/* komusoftware.com · «Tu app, construida en vivo» (22-oct-2026, 4.ª pasada: «se ve muy sobria»).
   The home in ink and amanecer with paper sections in between, the devices (phone + laptop mock-ups, illustrative), and the
   flow with its live preview. Loaded after direccion.css. Choreography in js/escena.js (GSAP); with reduced motion or without
   JS every element shows in its finished state (the defaults below are the finished state; html.con-escena adds the staging). */
:root{--noche:#141412;--noche-2:#1c1c19;--noche-3:#262621;--sobre-noche:#b6b2a7;--grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body:not(.en-recorrido){background:var(--noche)}
/* Paper grain over everything: the page feels printed, not flat */
body::after{content:"";position:fixed;inset:0;z-index:95;pointer-events:none;background-image:var(--grano);opacity:.07;mix-blend-mode:multiply}

/* Header on the home: ink, sticky, blurred */
body:not(.en-recorrido) .cabecera-d{position:sticky;top:0;z-index:60;background:var(--noche)}
body:not(.en-recorrido) .cabecera-d .ancho::after{background:#2a2a25}
body:not(.en-recorrido) .cabecera-d .logo-d{color:var(--papel)}
.logo-d img{border-radius:50%;background:var(--papel);padding:3px 2px 0;box-sizing:content-box;width:34px;height:27px}
body:not(.en-recorrido) .cabecera-d .nav-cta{background:var(--amanecer);color:var(--tinta);border-color:var(--amanecer)}

/* ═══ Hero ═══ */
.h3{position:relative;overflow:hidden;isolation:isolate;min-height:calc(100svh - 84px);display:flex;align-items:center;padding:48px 0 72px;background:var(--noche);color:var(--papel)}
.h3::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(circle,rgba(251,249,243,.08) 1.1px,transparent 1.6px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 70% at 60% 40%,#000 20%,transparent 75%)}
.h3-luz{position:absolute;z-index:-1;left:62%;top:45%;width:720px;height:720px;margin:-360px 0 0 -360px;border-radius:50%;background:radial-gradient(circle,rgba(229,86,42,.34),rgba(229,86,42,.08) 42%,transparent 68%);pointer-events:none}
.h3-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:40px;align-items:center;width:100%}
.h3-kicker{font:600 13px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amanecer)}
.h3 h1{margin-top:18px;font-weight:900;line-height:.94;letter-spacing:-.045em;color:var(--papel)}
.h3 h1 .l1,.h3 h1 .l3{display:block}
.h3 h1 .l1i{white-space:normal}
.h3 h1 .linea{display:inline-block}
.h3 h1 em{position:relative;display:inline-block;white-space:nowrap;font-style:normal;color:var(--amanecer)}
/* The hand stroke scales with the word (no vector-effect: with it the dash pattern is measured in screen px and breaks) */
.trazo path{vector-effect:none;stroke-width:4.5}
.h3 .trazo path{stroke:var(--luz)}
.h3-apoyo{margin-top:22px;max-width:40ch;font:400 20px/1.45 var(--f-texto);color:var(--sobre-noche)}
.h3 .form-negocio{margin:30px 0 0;max-width:560px}
.h3 .form-negocio label{color:var(--papel)}
.h3 .campo-negocio{border-color:var(--papel);background:var(--papel);box-shadow:0 0 0 6px rgba(229,86,42,.12)}
.h3 .campo-negocio .btn{border-color:var(--tinta)}
.h3 .form-negocio .msg-error{color:#ff9b7a}
.h3 .garantias-d{justify-content:flex-start;margin-top:16px;color:var(--sobre-noche)}
.h3 .retomar .link-d{color:var(--papel)}
.h3-device{position:relative;display:grid;place-items:center;perspective:1500px;min-height:560px}
.nota-ejemplo{position:absolute;left:0;right:0;bottom:-34px;text-align:center;font:500 12px var(--f-texto);color:#8a867c}
.h3-komu{position:absolute;right:2%;bottom:6%;--s:118px;transform:rotate(8deg)}
@media (max-width:899px){
  .h3{min-height:0;padding:28px 0 88px}
  .h3-grid{grid-template-columns:minmax(0,1fr);gap:56px} /* minmax(0,…): measuring the headline at 100 px must not widen the column */
  .h3-device{min-height:0}
  .h3-apoyo{font-size:18px}
  .h3-komu{--s:84px;right:4%;bottom:2%}
}

/* ═══ The phone (illustrative app mock-up) ═══ */
.tel{--w:300px;position:relative;width:var(--w);aspect-ratio:300/620;transform:rotateY(-14deg) rotateX(6deg);transform-style:preserve-3d;font-size:calc(var(--w) / 300 * 16px)}
.tel-marco{position:absolute;inset:0;border-radius:15.5% / 7.5%;background:linear-gradient(145deg,#2a2a26,#0b0b0a 40%);padding:3.7%;box-shadow:0 0 0 1.5px #3b3b35,0 50px 90px -30px rgba(0,0,0,.7),0 0 120px -20px rgba(229,86,42,.25)}
.tel-pantalla{position:relative;width:100%;height:100%;overflow:hidden;border-radius:12.5% / 6%;background:var(--papel);display:flex;flex-direction:column;color:var(--tinta)}
.app-barra{position:relative;display:flex;justify-content:space-between;align-items:center;height:2.2em;padding:0 1.5em;font:600 .72em var(--f-texto)}
.app-barra i{position:absolute;left:50%;top:.55em;width:5.4em;height:1.45em;margin-left:-2.7em;border-radius:1em;background:#0b0b0a}
.app-cab{display:flex;align-items:center;gap:.65em;padding:.5em 1em .7em}
.app-ini{display:grid;place-items:center;flex:none;width:2.4em;height:2.4em;border:2px solid var(--tinta);border-radius:50%;background:var(--amanecer);font:900 1.05em var(--f-titulo);color:var(--tinta)}
.app-txt{min-width:0;display:flex;flex-direction:column}
.app-txt strong{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:800 1em/1.15 var(--f-titulo)}
.app-txt small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 .7em var(--f-texto);color:var(--suave)}
.app-carrito{position:relative;display:grid;place-items:center;flex:none;width:2.2em;height:2.2em;margin-left:auto;border-radius:50%;background:var(--washi)}
.app-carrito svg{width:1.2em;height:1.2em}
.app-carrito i{position:absolute;top:-.2em;right:-.2em;display:grid;place-items:center;width:1.1em;height:1.1em;border-radius:50%;background:var(--amanecer);font:800 .62em var(--f-texto);font-style:normal}
.app-banner{position:relative;flex:none;height:7.3em;margin:.2em .9em;padding:1em;border-radius:1.1em;background:var(--tinta);overflow:hidden}
.app-banner span{display:block;border-radius:.4em}
.ab-l1{width:52%;height:.8em;background:var(--papel)}
.ab-l2{width:34%;height:.5em;margin-top:.5em;background:#77746b}
.ab-btn{width:4.4em;height:1.6em;margin-top:1em;border-radius:1em!important;background:var(--amanecer)}
.ab-komu{position:absolute;right:-.3em;bottom:-1.6em;width:6.4em;height:auto}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6em;padding:.7em .9em}
.app-prod{position:relative;padding:.45em;border-radius:.9em;background:var(--washi)}
.app-prod i{display:block;height:3.4em;border-radius:.6em;background:#bfd9f2}
.app-prod.pr1 i{background:#e9d8be}.app-prod.pr2 i{background:#cdebdd}.app-prod.pr3 i{background:#f8d2b4}
.app-prod span{display:block;width:70%;height:.45em;margin-top:.5em;border-radius:.3em;background:#cfc9bc}
.app-prod span.c{width:40%;margin-top:.35em}
.app-prod b{position:absolute;right:.45em;bottom:.4em;display:grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:var(--tinta);color:var(--papel);font:800 .8em var(--f-texto)}
.app-nav{display:flex;justify-content:space-around;align-items:center;flex:none;height:3.5em;margin-top:auto;border-top:1px solid var(--linea-2);background:var(--papel);color:#9a968c}
.app-nav svg{width:1.4em;height:1.4em}.app-nav .on{color:var(--amanecer)}
.app-pago{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:1.1em 1em 4.4em;border-radius:1.4em 1.4em 0 0;background:var(--papel);box-shadow:0 -1em 2em rgba(20,20,18,.18);visibility:hidden}
.ap-tarjeta{display:block;height:4.6em;padding:.8em;border-radius:.8em;background:linear-gradient(135deg,#2c2c27,var(--tinta))}
.ap-tarjeta i{display:block;width:40%;height:.45em;border-radius:.3em;background:#8f8b80}.ap-tarjeta i+i{width:62%;margin-top:1.7em;background:#d9d4c8}
.ap-linea{display:block;width:60%;height:.5em;margin:1em 0;border-radius:.3em;background:#cfc9bc}
.ap-btn{display:grid;place-items:center;height:2.6em;border:2px solid var(--tinta);border-radius:.8em;background:var(--amanecer);font:800 .9em var(--f-titulo)}
.ap-ok{position:absolute;left:50%;top:-1.8em;width:3.6em;height:3.6em;margin-left:-1.8em}
.ap-ok circle{fill:var(--amanecer);stroke:var(--tinta);stroke-width:3}
.ap-ok path{fill:none;stroke:var(--tinta);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.app-chat{position:absolute;left:0;right:0;top:5.6em;bottom:3.5em;z-index:2;display:flex;flex-direction:column;gap:.7em;padding:1.2em .9em;background:var(--washi);visibility:hidden}
.ac-b{display:block;height:2.2em;border-radius:1.1em}
.ac-b.yo{align-self:flex-end;width:58%;border-bottom-right-radius:.3em;background:var(--amanecer)}
.ac-b.ia{display:flex;align-items:center;gap:.3em;width:46%;padding:0 .9em;border:1.5px solid var(--linea);border-bottom-left-radius:.3em;background:var(--papel)}
.ac-b.ia i{width:.45em;height:.45em;border-radius:50%;background:#9a968c}
.ac-b.ia.l{width:72%;height:3.6em}.ac-b.yo.c{width:38%}
.tel-plano{position:absolute;inset:0;z-index:4;border-radius:inherit;background:#1a1a17;background-image:linear-gradient(rgba(229,86,42,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(229,86,42,.22) 1px,transparent 1px);background-size:1.4em 1.4em}
/* Flow preview: the modules the visitor picked */
.app-modulos{display:flex;flex-direction:column;gap:.45em;padding:.7em .9em;overflow:hidden}
.app-mod{display:flex;align-items:center;gap:.6em;padding:.45em .6em;border:1.5px solid var(--tinta);border-radius:.8em;background:var(--papel);font:700 .72em/1.2 var(--f-texto);animation:modEntra .45s var(--resorte,cubic-bezier(.34,1.56,.64,1)) both}
.app-mod img{flex:none;width:2.2em;height:2.2em}
@keyframes modEntra{from{opacity:0;transform:translateY(10px) scale(.9)}}
/* A notification popping out of the phone (hero) */
.tel-aviso{position:absolute;z-index:5;color:var(--tinta);left:-26%;top:16%;display:grid;grid-template-columns:auto 1fr;column-gap:.6em;align-items:center;padding:.6em .9em .6em .6em;border:2px solid var(--tinta);border-radius:1em;background:var(--papel);box-shadow:.3em .3em 0 var(--tinta);transform:translateZ(60px);opacity:0}
.tel-aviso>span{grid-row:1 / span 2;display:grid;place-items:center;width:2.2em;height:2.2em;border-radius:.6em;background:var(--amanecer)}
.tel-aviso svg{width:1.2em;height:1.2em}
.tel-aviso b{font:800 .82em var(--f-titulo);white-space:nowrap}
.tel-aviso small{max-width:9em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 .68em var(--f-texto);color:var(--suave)}
.sin-escena .tel-aviso{opacity:1}
.tel-hero.tecleo .app-txt strong{animation:tecleo .35s ease}
@keyframes tecleo{0%{color:var(--amanecer)}100%{color:inherit}}
@media (max-width:899px){.tel-hero{--w:236px}.tel-aviso{left:-18%}}

/* Komu as a sticker: amanecer disc, ink rim, solid shadow (keeps the dark helmet readable on ink) */
.komu-sticker{--s:120px;display:block;width:var(--s);height:var(--s);overflow:hidden;border:3px solid var(--tinta);border-radius:50%;background:var(--amanecer);box-shadow:5px 5px 0 var(--tinta)}
.komu-sticker img{width:84%;height:auto;margin:18% auto 0}

/* ═══ VSL on ink ═══ */
.vsl-d{background:linear-gradient(var(--noche) 0,var(--noche) 80%,var(--washi) 100%);height:220svh}
.vsl-pie{color:var(--sobre-noche)}
.vsl-marco{box-shadow:calc(9px - var(--g) * 1px) calc(9px - var(--g) * 1px) 0 var(--amanecer),0 0 120px -10px rgba(229,86,42,.35)}
.vsl-nubes.atras .relleno{fill:#2a2a25;stroke:rgba(251,249,243,.35)}.vsl-nubes.atras .rulos{stroke:rgba(251,249,243,.3)}

/* ═══ Build story (pinned by escena.js; without it: a list and the finished app) ═══ */
.c3{position:relative;background:var(--washi);color:var(--tinta)}
.c3-pin{display:flex;align-items:center;min-height:100svh;padding:80px 0}
.c3-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;width:100%}
.c3-tit{font:900 clamp(34px,4.6vw,64px)/1 var(--f-titulo);letter-spacing:-.035em}
.c3-pasos{list-style:none;margin-top:28px}
.c3-paso{padding:18px 0;border-top:1.5px solid var(--linea)}
.c3-paso h3{font:900 clamp(26px,3.2vw,46px)/1.04 var(--f-titulo);letter-spacing:-.03em}
.c3-num{display:block;width:44px;height:6px;margin-bottom:16px;border-radius:3px;background:var(--amanecer)}
.c3-paso p{max-width:42ch;margin-top:12px;font:400 19px/1.5 var(--f-texto);color:var(--tinta-2)}
.c3-servicios{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:28px;font:800 18px var(--f-titulo)}
.c3-servicios span+span::before{content:"/";padding:0 10px;color:var(--amanecer)}
.c3-device{position:relative;display:grid;place-items:center;height:min(680px,78svh);perspective:1500px}
.tel-build{--w:min(300px,36svh);transform:rotateY(-10deg) rotateX(4deg)}
.lap{position:absolute;width:min(600px,100%);opacity:0;pointer-events:none}
.lap-pantalla{display:grid;grid-template-columns:3.6em 1fr;aspect-ratio:16/10;padding:10px;border-radius:18px 18px 4px 4px;background:linear-gradient(145deg,#2a2a26,#0b0b0a 40%);box-shadow:0 0 0 1.5px #3b3b35,0 40px 80px -30px rgba(0,0,0,.6);font-size:15px;overflow:hidden}
.lap-lado{display:flex;flex-direction:column;align-items:center;gap:.8em;padding:.8em 0;border-radius:8px 0 0 8px;background:var(--tinta)}
.lap-lado .app-ini{width:2.2em;height:2.2em;font-size:.9em;border-color:var(--papel)}
.lap-lado i{display:block;width:1.4em;height:.4em;border-radius:.3em;background:#55524a}
.lap-main{padding:.9em 1.1em;border-radius:0 8px 8px 0;background:var(--papel);overflow:hidden}
.lap-top{display:flex;justify-content:space-between;align-items:center}
.lap-top strong{font:800 1.05em var(--f-titulo)}
.lap-top span{width:5em;height:1.4em;border-radius:1em;background:var(--amanecer)}
.lap-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.6em;margin-top:.8em}
.lap-kpi{height:3.4em;padding:.6em;border:1.5px solid var(--tinta);border-radius:.6em;background:var(--washi)}
.lap-kpi span{display:block;width:60%;height:.4em;border-radius:.3em;background:#9a968c}.lap-kpi b{display:block;width:45%;height:.9em;margin-top:.5em;border-radius:.3em;background:var(--tinta)}
.lap-kpi.k1 b{background:var(--amanecer)}
.lap-graf{display:flex;align-items:flex-end;gap:.5em;height:6.6em;margin-top:.9em;padding:.4em .2em 0;border-bottom:1.5px solid var(--linea)}
.lap-graf i{flex:1;height:var(--h);border-radius:.35em .35em 0 0;background:var(--tinta)}
.lap-graf i:nth-child(even){background:var(--amanecer)}
.lap-filas span{display:block;height:.55em;margin-top:.6em;border-radius:.3em;background:var(--linea-2)}
.lap-filas span:nth-child(2){width:80%}.lap-filas span:nth-child(3){width:60%}
.lap-base{height:14px;margin:0 -7%;border-radius:0 0 16px 16px;background:linear-gradient(#3a3a35,#1a1a17)}
.c3-komu{position:absolute;left:4%;bottom:10%;--s:96px;transform:rotate(-8deg);z-index:3}
.c3 .nota-ejemplo{bottom:0;color:var(--suave)}
/* Staging (only with the choreography): the steps stack in one place and swap; the pin lives in escena.js */
.con-escena .c3-pasos{position:relative;height:250px}
.con-escena .c3-paso{position:absolute;inset:0 0 auto;border-top:0}
.con-escena .tel-build .app-pago,.con-escena .tel-build .app-chat{visibility:visible}
@media (max-width:899px){
  .c3-pin{align-items:flex-start;padding:24px 0}
  .c3-grid{grid-template-columns:1fr;gap:8px}
  .c3-tit{font-size:30px}
  .con-escena .c3-pasos{height:150px;margin-top:14px}
  .c3-paso p{font-size:15px}
  .c3-servicios{font-size:14px;margin-top:6px}
  .c3-device{height:52svh}
  .tel-build{--w:min(240px,25svh)}
  .lap{width:min(420px,96%)}.lap-pantalla{font-size:10px}
  .c3-komu{--s:66px;left:0;bottom:6%}
}
.sin-escena .lap{display:none}

/* ═══ Problems: bold statements on ink ═══ */
.d3{padding:120px 0;background:var(--noche);color:var(--papel)}
.d3-tit{max-width:16ch;font:900 clamp(40px,6.4vw,92px)/.98 var(--f-titulo);letter-spacing:-.045em}
.d3-lista{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:56px}
.d3-lista li{display:flex;gap:18px;align-items:flex-start;padding:26px 0;border-top:1.5px solid #2f2f2a;font:600 clamp(19px,1.8vw,24px)/1.35 var(--f-texto)}
.d3-x{position:relative;flex:none;width:30px;height:30px;margin-top:2px;border-radius:50%;background:var(--amanecer)}
.d3-x::before,.d3-x::after{content:"";position:absolute;left:8px;top:13.5px;width:14px;height:3px;border-radius:2px;background:var(--tinta);transform:rotate(45deg)}.d3-x::after{transform:rotate(-45deg)}
.d3-bajada{max-width:56ch;margin-top:40px;font:400 19px/1.55 var(--f-texto);color:var(--sobre-noche)}
.d3 .cta-linea,.p3 .cta-linea{background:var(--noche-2);border-color:#34342e;color:var(--papel)}
@media (max-width:760px){.d3{padding:80px 0}.d3-lista{grid-template-columns:1fr;margin-top:32px}}

/* ═══ Services: ink cards with a light under the pointer ═══ */
.s3{padding:120px 0;background:var(--papel)}
.s3-tit{max-width:14ch;font:900 clamp(38px,5.6vw,80px)/.98 var(--f-titulo);letter-spacing:-.045em}
.s3-cartas{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:48px 0 28px}
.s3-carta{position:relative;isolation:isolate;display:flex;flex-direction:column;padding:18px 18px 22px;overflow:hidden;border-radius:26px;background:var(--noche);color:var(--papel);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.s3-carta::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(229,86,42,.42),transparent 60%);opacity:0;transition:opacity .35s}
.s3-carta:hover{transform:translateY(-8px) rotate(-.6deg)}.s3-carta:hover::before{opacity:1}
.s3-img{display:grid;place-items:center;height:170px;border-radius:18px;background:#bfd9f2}
.tono-1 .s3-img{background:#e9d8be}.tono-2 .s3-img{background:#cdebdd}.tono-3 .s3-img{background:#f8d2b4}
.s3-img img{width:118px;height:118px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.s3-carta:hover .s3-img img{transform:scale(1.12) rotate(-6deg)}
.s3-carta h3{margin-top:20px;font:800 22px/1.15 var(--f-titulo)}
.s3-carta p{margin-top:10px;font:400 15px/1.5 var(--f-texto);color:var(--sobre-noche)}
.s3-desde{margin-top:auto!important;padding-top:18px;font:800 18px var(--f-titulo)!important;color:var(--amanecer)!important}
@media (max-width:1000px){.s3-cartas{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.s3{padding:80px 0}.s3-cartas{grid-template-columns:1fr}}

/* ═══ Facts band: amanecer, giant type ═══ */
.f3{background:var(--amanecer);color:var(--tinta);border-top:3px solid var(--tinta);border-bottom:3px solid var(--tinta)}
.f3-lista{list-style:none;display:grid;grid-template-columns:repeat(4,1fr)}
.f3-lista li{display:flex;flex-direction:column;gap:8px;padding:44px 24px 44px 0}
.f3-lista li+li{padding-left:24px;border-left:2px solid var(--tinta)}
.f3-lista b{font:900 clamp(32px,5vw,76px)/.95 var(--f-titulo);letter-spacing:-.04em;white-space:nowrap}
.f3-lista span{max-width:22ch;font:600 15px/1.4 var(--f-texto)}
@media (max-width:820px){.f3-lista{grid-template-columns:1fr 1fr}.f3-lista li:nth-child(3){padding-left:0;border-left:0}.f3-lista li:nth-child(n+3){border-top:2px solid var(--tinta)}}

/* ═══ Pablo on ink ═══ */
section.p3{padding:120px 0;background:var(--noche);color:var(--papel)}
.p3-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.p3-dato{font:600 14px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--amanecer)}
.p3 h2{margin-top:14px;font:900 clamp(36px,4.8vw,68px)/1 var(--f-titulo);letter-spacing:-.04em}
.p3-texto{margin:18px 0 20px;font:400 18px/1.55 var(--f-texto);color:var(--sobre-noche)}
.p3 .link-d{color:var(--papel)}
.p3-video .video-pablo{border:3px solid var(--papel);border-radius:22px;box-shadow:10px 10px 0 var(--amanecer)}
.p3 .pie-video{color:var(--sobre-noche)}
@media (max-width:820px){.p3{padding:80px 0}.p3-grid{grid-template-columns:1fr}}

/* ═══ Process: a sideways track while pinned (wide screens) ═══ */
.r3{background:var(--washi);overflow:hidden}
.r3-pin{display:flex;flex-direction:column;justify-content:center;min-height:100svh;padding:96px 0}
.r3-tit{font:900 clamp(38px,5.4vw,78px)/1 var(--f-titulo);letter-spacing:-.045em}
.r3-nota{max-width:60ch;margin-top:12px;font:400 17px/1.5 var(--f-texto);color:var(--tinta-2)}
.r3-pista{list-style:none;display:flex;gap:28px;width:max-content;margin-top:48px;padding:0 max(var(--gutter),calc((100vw - var(--ancho-d)) / 2 + var(--gutter)))}
.r3-paso{display:flex;flex-direction:column;width:min(440px,38vw);min-height:340px;padding:30px;border:3px solid var(--tinta);border-radius:28px;background:var(--papel);box-shadow:10px 10px 0 var(--tinta)}
.r3-paso:nth-child(2){background:#cdebdd}.r3-paso:nth-child(3){background:#bfd9f2}.r3-paso:nth-child(4){background:var(--amanecer)}
.r3-num{display:grid;place-items:center;width:64px;height:64px;border:3px solid var(--tinta);border-radius:50%;background:var(--tinta);color:var(--papel);font:900 30px var(--f-titulo)}
.r3-paso h3{margin-top:auto;padding-top:40px;font:900 clamp(26px,2.6vw,38px)/1.05 var(--f-titulo);letter-spacing:-.03em}
.r3-paso p{margin-top:12px;font:400 17px/1.5 var(--f-texto);color:var(--tinta-2)}
.r3-paso .btn{align-self:flex-start;margin-top:20px}
@media (max-width:899px){.r3-pin{min-height:0;padding:80px 0}.r3-pista{flex-direction:column;width:auto;padding:0 var(--gutter)}.r3-paso{width:auto;min-height:0;box-shadow:6px 6px 0 var(--tinta)}.r3-paso h3{padding-top:24px}}

/* ═══ Prices ═══ */
.x3{padding:120px 0;background:var(--papel)}
.x3-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:56px;align-items:start}
.x3 h2{font:900 clamp(36px,4.8vw,68px)/1 var(--f-titulo);letter-spacing:-.04em}
.x3-texto{margin-top:18px;font:400 18px/1.55 var(--f-texto);color:var(--tinta-2)}
.x3-cond{margin:18px 0 28px;font:500 15px/1.6 var(--f-texto);color:var(--suave)}
.x3-lista{list-style:none;border-top:3px solid var(--tinta)}
.x3-lista li{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 20px;padding:26px 8px;border-bottom:1.5px solid var(--tinta);transition:background .25s,padding .25s}
.x3-lista li:hover{background:var(--washi);padding-left:18px}
.x3-lista span{font:700 clamp(18px,1.7vw,22px) var(--f-titulo)}
.x3-lista b{font:900 clamp(22px,2.4vw,32px) var(--f-titulo);letter-spacing:-.02em;white-space:nowrap}
@media (max-width:820px){.x3{padding:80px 0}.x3-grid{grid-template-columns:1fr}}

/* ═══ FAQ ═══ */
.q3{padding:120px 0;background:var(--washi)}
.q3-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:start}
.q3 h2{position:sticky;top:110px;font:900 clamp(36px,4.8vw,68px)/1 var(--f-titulo);letter-spacing:-.04em}
.q3 .faq-d{margin-top:0;border-top:3px solid var(--tinta)}
.q3 .faq-d details{border-bottom:1.5px solid var(--tinta)}
.q3 .faq-d summary{min-height:72px;font-size:20px}
@media (max-width:820px){.q3{padding:80px 0}.q3-grid{grid-template-columns:1fr;gap:24px}.q3 h2{position:static}}

/* ═══ Closing: full-bleed amanecer ═══ */
.z3{padding:120px 0;background:var(--amanecer);color:var(--tinta);border-top:3px solid var(--tinta)}
.z3-grid{display:grid;grid-template-columns:auto minmax(0,720px);gap:56px;align-items:center;justify-content:center}
.z3-komu{--s:200px;background:var(--papel);transform:rotate(-6deg);box-shadow:10px 10px 0 var(--tinta)}
.z3 h2{font:900 clamp(40px,6vw,88px)/.95 var(--f-titulo);letter-spacing:-.045em}
.z3 .form-negocio{max-width:620px;margin:28px 0 0}
.z3 .campo-negocio{box-shadow:8px 8px 0 var(--tinta)}
.z3 .campo-negocio .btn-primario{background:var(--tinta);color:var(--papel);box-shadow:0 4px 0 #000}
.z3 .garantias-d{justify-content:flex-start;color:var(--tinta)}.z3 .garantias-d li::before{background:var(--tinta)}
@media (max-width:760px){.z3{padding:80px 0}.z3-grid{grid-template-columns:1fr;gap:28px;text-align:left}.z3-komu{--s:120px}}

.pie-3{background:var(--noche);color:#8a867c;border-top:0}
.pie-3 a{color:var(--papel)}

/* The v3 layers paint sections by id (#problema, #pablo, #precio, #faq, #cierre) and tilt/tape the Pablo card: an id beats a
   class, so each 4th-pass section is restated under #principal. */
#principal .d3,#principal .p3{background:var(--noche)}
#principal .s3,#principal .x3{background:var(--papel)}
#principal .r3,#principal .q3{background:var(--washi)}
#principal .z3{background:var(--amanecer)}
.p3 .pablo-card{transform:none;padding:0;border:0;background:none;box-shadow:none}
.p3 .pablo-card::before{display:none}
.p3 .video-pablo{margin-top:0}

/* ═══ Flow «Armar mi proyecto»: the question on paper, your project live on ink beside it ═══ */
.f2{min-height:100dvh;background:var(--washi)}
.f2-top{position:sticky;top:0;z-index:40;background:rgba(245,241,232,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.f2-top .ancho{display:flex;align-items:center;gap:24px;height:76px}
.f2-top .ancho::after{display:none}
.f2-top .etapas{flex:1;max-width:520px;margin:0 auto}
.f2-top .volver{flex:none;font-size:14px;color:var(--suave)}
.f2-top .avance{height:4px;margin:0;border-radius:0}
.f2-top .avance i{border-radius:0 4px 4px 0}
.f2-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:64px;align-items:start;max-width:calc(var(--ancho-d) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.f2.sin-vista .f2-cuerpo{grid-template-columns:minmax(0,1fr);max-width:calc(var(--form-d) + 2 * var(--gutter))}
.f2-form.flujo-cuerpo{max-width:660px;margin:0;padding:44px 0 96px}
.f2 .flujo-meta{margin-top:0}
.f2 .pregunta-d h1{margin:14px 0 12px;font:900 clamp(34px,4.4vw,58px)/1.02 var(--f-titulo);letter-spacing:-.04em}
.f2 .ayuda-d{font-size:18px}
.f2 .atajo{color:#8a867c}
@media (hover:none),(pointer:coarse){.f2 .atajo,.opcion kbd,.carta-d kbd{display:none!important}}

/* Options: big, keyed, unmistakable when picked */
.f2 .opciones-d{gap:12px}
.f2 .opcion{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:68px;padding:14px 16px;border:2px solid var(--tinta);border-radius:16px;background:var(--papel);font:600 17px/1.3 var(--f-texto);box-shadow:0 0 0 var(--tinta);transition:transform .15s,box-shadow .15s,background .15s,color .15s}
.f2 .opcion:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--tinta)}
.f2 .opcion kbd{display:grid;place-items:center;width:30px;height:30px;border:1.5px solid var(--tinta);border-radius:8px;background:var(--washi);font:600 13px var(--f-mono)}
.f2 .opcion[aria-checked="true"]{padding:14px 16px;border:2px solid var(--tinta);background:var(--tinta);color:var(--papel);font-weight:700;box-shadow:0 4px 0 var(--amanecer)}
.f2 .opcion[aria-checked="true"] kbd{border-color:var(--amanecer);background:var(--amanecer);color:var(--tinta)}
.f2 .opcion .marca{border-color:var(--tinta)}
.f2 .opcion[aria-checked="true"]>.marca{border-color:var(--amanecer);background:var(--amanecer)}
.f2 .opcion[aria-checked="true"]>.marca:not(.cuadro)::after{background:var(--tinta)}
.f2 .carta-d{grid-template-columns:44px minmax(0,1fr) 20px;border:2px solid var(--tinta);border-radius:16px;transition:transform .15s,box-shadow .15s}
.f2 .carta-d:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--tinta)}
.f2 .carta-d[aria-checked="true"]{padding:14px 16px;border:2px solid var(--tinta);background:var(--tinta);color:var(--papel);box-shadow:0 4px 0 var(--amanecer)}
.f2 .carta-d[aria-checked="true"] small{color:var(--sobre-noche)}
.f2 .carta-d[aria-checked="true"] img{background:var(--papel);border-radius:10px}
.f2 .carta-d kbd{display:none}
.f2 .campo-d input{border:2px solid var(--tinta);border-radius:14px;min-height:60px;font-size:18px}
.f2 .acciones-d .btn-primario{min-height:60px}
@media (max-width:899px){.f2 .opciones-d.dos{grid-template-columns:1fr}}

/* The live project panel */
.f2-vista{position:sticky;top:104px;margin-top:40px;padding:20px;border-radius:28px;background:var(--noche);color:var(--papel);box-shadow:10px 10px 0 var(--amanecer)}
.f2-vista-btn{display:flex;align-items:center;gap:14px;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.f2-komu{position:relative;flex:none;width:64px;height:64px;overflow:hidden;border:3px solid var(--tinta);border-radius:50%;background:var(--washi);box-shadow:0 0 0 2px var(--papel)}
.f2-komu img,.f2-komu .komu-rive-canvas{position:absolute;inset:4px 6px -6px;width:calc(100% - 12px);height:calc(100% + 2px)}
.f2-vista-t{display:flex;flex-direction:column;min-width:0}
.f2-vista-t b{font:800 18px var(--f-titulo)}
.f2-vista-t small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 13px var(--f-texto);color:var(--sobre-noche)}
.f2-vista-ver{margin-left:auto;font:600 13px var(--f-texto);color:var(--amanecer)}
.f2-kicker{display:none}
.f2-vista .tel-vista{--w:230px;margin:22px auto 26px;transform:rotateY(-8deg) rotateX(3deg)}
.f2-vista .tel-vista .tel-marco{box-shadow:0 0 0 1.5px #3b3b35,0 30px 60px -20px rgba(0,0,0,.7)}
.f2-log{max-height:34svh;overflow:auto;border-top:1px solid #34342e}
.f2-log>div{border-bottom:1px solid #2b2b26}
.f2-log dt{color:#8f8b80}.f2-log dd{color:var(--papel)}
.f2-log .link-d{color:var(--amanecer)}
.f2-vista .ficha-vacia{color:var(--sobre-noche)}
@media (min-width:900px){.f2-vista-btn{pointer-events:none}.f2-vista-ver{display:none}}
@media (max-width:899px){
  .f2-cuerpo{grid-template-columns:1fr;gap:0}
  .f2-form.flujo-cuerpo{padding:28px 0 140px}
  .f2-top .ancho{height:64px;gap:12px}.f2-top .volver{display:none}
  .f2-top .logo-d{font-size:0;gap:0}.f2-top .logo-d img{margin:0}
  .f2-top .etapas li:not([aria-current])>[data-copy]{display:none}
  .f2-top .etapas{justify-content:flex-end;gap:10px}
  .f2-vista{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:50;margin:0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(20,20,18,.25)}
  .f2-komu{width:48px;height:48px}
  .f2-vista-in{display:none;max-height:68svh;overflow:auto;padding-bottom:8px}
  .f2-vista.abierta .f2-vista-in{display:block}
  .f2-vista .tel-vista{--w:190px;margin:16px auto 18px}
  .f2-log{max-height:none}
}

.f2 .form-contacto a{color:var(--tinta);text-underline-offset:3px}

/* ═══ Phones, 2nd pass (Rayyan, 23-oct: «en celular se ve horrible») ═══ */
@media (max-width:899px){
  /* Hero: a smaller, tidier device; less dead ink below it */
  .h3{padding:24px 0 36px}
  .h3-grid{gap:36px}
  .h3-device{height:470px}
  .tel-hero{--w:214px;transform:rotateY(-12deg) rotateX(5deg) translateX(8%)}
  .tel-aviso{left:-30%;top:12%}
  .h3-komu{--s:76px;left:4%;right:auto;bottom:10%}
  .h3 .nota-ejemplo{bottom:-22px}
  /* Build story: steps on top in a fixed band, the device takes the rest, room kept for the bottom CTA bar */
  .c3-pin{min-height:100svh;padding:14px 0 96px}
  .c3-grid{gap:4px}
  .c3-tit{font:600 12px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--amanecer)}
  .con-escena .c3-pasos{height:122px;margin-top:10px}
  .c3-paso{padding:0}
  .c3-num{width:30px;height:5px;margin-bottom:10px}
  .c3-paso h3{font-size:25px}
  .c3-paso p{margin-top:6px;font-size:15px;line-height:1.45}
  .con-escena .c3-servicios{display:none}
  .c3-device{height:calc(100svh - 64px - 14px - 96px - 150px);min-height:360px}
  .tel-build{--w:min(250px,calc((100svh - 330px) / 2.07))}
  .lap{width:100%}.lap-pantalla{font-size:9.5px}
  .c3-komu{--s:58px;left:0;bottom:12%}
  .c3 .nota-ejemplo{bottom:-14px}
  /* The bottom CTA bar never covers the end of the page */
  .pie-3{padding-bottom:104px}
}
@media (max-width:699px){
  .vsl-d.vsl-estatico{height:auto;background:var(--noche)}
  .vsl-estatico .vsl-escena{position:relative;height:auto;display:flex;flex-direction:column;align-items:center;padding:44px 0 84px;overflow:hidden}
  .vsl-estatico .vsl-marco{position:relative;left:auto;top:auto;transform:none}
  .vsl-estatico .vsl-pie{position:static;width:auto;margin-top:22px;padding:0 24px;transform:none;opacity:1}
  .vsl-estatico .vsl-nubes.atras{display:none}
  .vsl-estatico .vsl-nubes.frente .kumo{top:auto;bottom:-10px;width:48vw;transform:none}
  .vsl-estatico .vsl-nubes.frente .kumo:nth-child(1){left:-14%}
  .vsl-estatico .vsl-nubes.frente .kumo:nth-child(2){left:auto;right:-14%}
}
/* Pinned sections live under the sticky header (--cab is its height, set by escena.js) */
.con-escena .c3-pin{min-height:calc(100svh - var(--cab,84px))}
.con-escena .r3-pin{min-height:calc(100svh - var(--cab,84px))}
@media (max-width:899px){.con-escena .c3-device{height:calc(100svh - var(--cab,72px) - 14px - 96px - 150px)}}
/* Phones: the four services slide sideways (snap) instead of stacking two screens of cards */
@media (max-width:560px){
  .s3-cartas{display:flex;gap:14px;margin:36px calc(var(--gutter) * -1) 24px;padding:4px var(--gutter) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .s3-cartas::-webkit-scrollbar{display:none}
  .s3-carta{flex:0 0 80%;scroll-snap-align:start}
  .s3-carta:hover{transform:none}
  .s3-img{height:150px}
}
/* Touch screens hide the key letter: the label takes the space and the mark stays on the right */
@media (hover:none),(pointer:coarse){.f2 .opcion{grid-template-columns:minmax(0,1fr) auto}}