/* ============================================================
   Puedo Pagarlo? — web comercial
   Sistema visual compartido. Estética calibrada con la app
   (logo: cartera verde + moneda + check). Fuentes autoalojadas.
   ============================================================ */

/* ---- Fuentes autoalojadas (woff2, subset latin) ---- */
@font-face{
  font-family:"DM Sans";
  src:url("/assets/fonts/dmsans.woff2") format("woff2");
  font-weight:100 1000; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("/assets/fonts/instrument-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Instrument Serif";
  src:url("/assets/fonts/instrument-italic.woff2") format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ---- Tokens ---- */
:root{
  --bg:#F4EEE3; --bg-warm:#EAE2D0; --bg-deep:#0E3A36; --bg-deeper:#0a2d2a; --card:#FFFFFF;
  --ink:#161A18; --ink-soft:#3F4744; --ink-dim:#6F7674; --ink-faint:#A8ADA8;
  --line:rgba(22,26,24,.08); --line-soft:rgba(22,26,24,.05);
  --green:#639922; --green-deep:#4F7B1B; --green-soft:#E5EDD3; --green-tint:#F1F5E3;
  --teal:#0F4F4A;
  --red:#C73E3E; --red-soft:#FCEAEA; --amber:#BA7517; --amber-soft:#FBEED7;
  --gold:#E8B84A; --gold-deep:#B8862A; --azul:#3B6BD2; --azul-soft:#E7EFFF;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
::selection{background:var(--green);color:#fff;}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
em.s{font-family:var(--serif);font-style:italic;font-weight:400;}

/* ---- Tipografía ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:var(--green-deep);}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.5;}
h1{font-weight:700;font-size:clamp(38px,5.4vw,66px);line-height:1.04;letter-spacing:-1.4px;text-wrap:balance;}
h2{font-weight:700;font-size:clamp(30px,4vw,48px);line-height:1.07;letter-spacing:-1px;text-wrap:balance;}
h3{font-weight:700;font-size:21px;line-height:1.2;letter-spacing:-.4px;}
.lede{font-size:19px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty;}
.center{text-align:center;max-width:780px;margin:0 auto;}

/* ---- Botones ---- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:14px;font-family:var(--sans);font-weight:600;cursor:pointer;border:none;transition:transform .15s,box-shadow .15s;}
.btn-prim{background:var(--green);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.05),0 8px 22px -6px rgba(99,153,34,.4);}
.btn-prim:hover{transform:translateY(-1px);}
.btn-ghost{background:transparent;border:1.5px solid rgba(22,26,24,.14);color:var(--ink);}
.btn-gold{background:var(--gold);color:var(--bg-deep);box-shadow:0 8px 24px -6px rgba(232,184,74,.45);}
.btn-gold:hover{transform:translateY(-1px);}
.btn-darkghost{background:transparent;border:1.5px solid rgba(255,255,255,.25);color:#fff;}
.btn-sm{height:40px;padding:0 18px;font-size:13.5px;}
.btn-md{height:50px;padding:0 24px;font-size:15px;}
.btn-lg{height:58px;padding:0 28px;font-size:16px;}

/* badge Google Play */
.gplay{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:#fff;height:58px;padding:0 22px;border-radius:14px;}
.gplay .gp-ic{font-size:22px;line-height:1;}
.gplay .small{font-size:9.5px;letter-spacing:.5px;opacity:.75;font-family:var(--mono);text-transform:uppercase;}
.gplay .big{font-size:18px;font-weight:700;line-height:1.05;}
.gplay.light{background:#fff;color:var(--ink);}

/* ---- Nav ---- */
nav.top{position:sticky;top:0;z-index:50;background:rgba(244,238,227,.85);backdrop-filter:blur(16px) saturate(180%);-webkit-backdrop-filter:blur(16px) saturate(180%);border-bottom:1px solid var(--line);}
nav.top .row{display:flex;align-items:center;justify-content:space-between;height:72px;}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:-.3px;color:var(--ink);}
.brand img{width:30px;height:30px;border-radius:8px;display:block;}
nav.top .links{display:flex;align-items:center;gap:28px;margin-left:40px;font-size:14.5px;color:var(--ink-soft);font-weight:500;}
nav.top .links a:hover{color:var(--ink);}
nav.top .links a.act{color:var(--ink);font-weight:700;}
nav.top .right{margin-left:auto;display:flex;align-items:center;gap:12px;}
/* botón que cruza al otro público (gestorías ↔ autónomos) */
.btn-cross{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border-radius:12px;font-weight:700;font-size:13.5px;border:1.5px solid var(--green);color:var(--green-deep);background:transparent;transition:background .15s,color .15s;}
.btn-cross:hover{background:var(--green-soft);}
.btn-cross.back{border-color:rgba(22,26,24,.16);color:var(--ink-soft);}
.btn-cross.back:hover{background:rgba(22,26,24,.05);color:var(--ink);}
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:8px;}
.cross-mobile{display:none;}

/* ---- Secciones ---- */
section{padding:96px 0;}

/* ---- Feature row (texto + captura) ---- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.frow.flip .ftext{order:2;} .frow.flip .fcap{order:1;}
.frow.wide{grid-template-columns:.9fr 1.1fr;}
.frow .lede{margin-top:18px;max-width:520px;}
.points{list-style:none;margin:26px 0 0;display:flex;flex-direction:column;gap:13px;}
.points li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.55;color:var(--ink-soft);}
.points li .pk{flex-shrink:0;margin-top:3px;width:22px;height:22px;border-radius:50%;background:var(--green-soft);display:inline-flex;align-items:center;justify-content:center;}
.fcap{display:flex;justify-content:center;position:relative;}
.fhalo{position:absolute;inset:-40px;border-radius:50%;pointer-events:none;}

/* teléfono */
.phone{width:280px;padding:7px;background:#1B1F1D;border-radius:34px;box-shadow:0 30px 60px -20px rgba(20,30,28,.35),inset 0 0 0 1.5px rgba(255,255,255,.06);}
.phone img{width:100%;display:block;border-radius:28px;}
.phone.lg{width:312px;border-radius:38px;}
.phone.lg img{border-radius:31px;}

/* anotaciones sobre capturas */
.anno{position:absolute;z-index:3;background:var(--card);color:var(--ink);padding:8px 12px;border-radius:999px;font-size:12px;font-weight:600;font-family:var(--mono);display:flex;align-items:center;gap:6px;box-shadow:0 6px 16px -4px rgba(20,30,28,.18);white-space:nowrap;}
.anno::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-deep);}

/* marco navegador para captura del panel */
.shot{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 60px -22px rgba(20,30,28,.32),0 6px 16px -8px rgba(20,30,28,.18);background:#fff;}
.shot .sbar{background:#f1ede4;border-bottom:1px solid var(--line);padding:9px 13px;display:flex;align-items:center;gap:8px;}
.shot .sbar .dots{display:flex;gap:5px;} .shot .sbar .dots i{width:8px;height:8px;border-radius:50%;display:block;}
.shot .sbar .surl{flex:1;background:#fff;border-radius:6px;font-size:10.5px;color:#7a8595;padding:5px 10px;font-family:var(--mono);border:1px solid var(--line);}
.shot img{width:100%;height:auto;display:block;}
/* encuadre: mostramos la parte de arriba de la captura (la más informativa) y desvanecemos abajo */
.shot.crop{position:relative;max-height:560px;overflow:hidden;}
.shot.crop img{height:auto;}
.shot.crop::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(transparent,#fff);pointer-events:none;}

/* ---- Footer ---- */
footer{background:var(--bg-deep);color:rgba(255,255,255,.6);padding:64px 0 32px;border-top:1px solid rgba(255,255,255,.08);}
.footgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px;}
.footgrid .brand{color:#fff;}
.footgrid .brand img{filter:none;}
.fdesc{margin-top:16px;font-size:14px;line-height:1.6;max-width:320px;}
.fnote{margin-top:24px;font-size:12.5px;font-family:var(--mono);color:rgba(255,255,255,.4);}
.fcol h4{font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:16px;}
.fcol a{display:block;font-size:14px;color:rgba(255,255,255,.6);padding:5px 0;}
.fcol a:hover{color:#fff;}
.flegal{font-size:12px;color:rgba(255,255,255,.4);line-height:1.5;margin-bottom:18px;max-width:760px;}
.flegal strong{color:rgba(255,255,255,.6);}
.fbottom{border-top:1px solid rgba(255,255,255,.08);padding-top:22px;display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:rgba(255,255,255,.5);flex-wrap:wrap;}

/* ---- Responsive ---- */
@media(max-width:900px){
  section{padding:64px 0;}
  .frow,.frow.flip,.frow.wide{grid-template-columns:1fr;gap:44px;}
  .frow.flip .ftext,.frow.flip .fcap{order:initial;}
  .footgrid{grid-template-columns:1fr 1fr;}
  /* El panel está siempre presente (display:flex) pero colapsado; abrir/cerrar
     anima opacity+transform (compositable). `visibility` sale del flujo de foco
     cuando está cerrado, y transiciona con retardo para no cortar el fade-out.
     Antes conmutaba display:none↔flex, que no es transicionable → corte seco. */
  nav.top .links{position:absolute;top:72px;left:0;right:0;flex-direction:column;gap:0;margin-left:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 32px 16px;z-index:60;
    opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
    transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1),visibility 0s linear .22s;}
  nav.top .links.open{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s;}
  nav.top .links a{padding:12px 0;border-bottom:1px solid var(--line-soft);}
  .navtoggle{display:block;}
  /* en móvil, el botón de cruce se oculta de la barra (queda en el menú desplegable como enlace) */
  nav.top .right .btn-cross{display:none;}
  nav.top .links.open .cross-mobile{display:block;color:var(--green-deep);font-weight:700;}
}
@media(max-width:560px){
  .wrap{padding:0 20px;}
  .footgrid{grid-template-columns:1fr;}
  .fbottom{flex-direction:column;}
}

/* ============================================================
   Estilos del área de gestorías (compartidos por sus 3 páginas)
   ============================================================ */
.ges-hero{background:var(--bg-deep);color:#fff;padding:64px 0 88px;}
.ges-hero .eyebrow{color:var(--gold);}
.ges-hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center;}
.ges-hero h1{margin-top:22px;color:#fff;} .ges-hero h1 em.s{color:var(--gold);}
.ges-hero .lede{margin-top:24px;max-width:520px;color:rgba(255,255,255,.78);}
.ges-hero .cta-row{margin-top:36px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.ges-hero .free-note{margin-top:18px;font-size:14px;color:rgba(255,255,255,.6);} .ges-hero .free-note b{color:var(--gold);}
/* hero pequeño (subpáginas de gestorías) */
.ges-hh{background:var(--bg-deep);color:#fff;padding:60px 0 56px;}
.ges-hh .eyebrow{color:var(--gold);justify-content:center;}
.ges-hh h1{margin-top:18px;color:#fff;max-width:760px;margin-left:auto;margin-right:auto;} .ges-hh h1 em.s{color:var(--gold);}
.ges-hh .lede{margin:22px auto 0;max-width:600px;color:rgba(255,255,255,.78);}
/* hero art C2 */
.hero-art{position:relative;min-height:420px;display:flex;align-items:center;justify-content:center;}
.hero-art .blob{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(232,184,74,.15),transparent 68%);z-index:0;}
.c2{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;width:340px;}
.c2-row{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 24px;display:flex;align-items:center;gap:16px;width:100%;}
.c2-ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.c2-ic.cap{background:rgba(58,154,173,.25);} .c2-ic.rev{background:rgba(232,184,74,.22);}
.c2-who{font-family:var(--mono);font-size:10.5px;letter-spacing:.9px;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:3px;}
.c2-act{font-family:var(--serif);font-style:italic;font-size:24px;color:#fff;line-height:1.05;}
.c2-conn{width:2px;height:42px;background:linear-gradient(var(--gold),rgba(232,184,74,.15));position:relative;}
.c2-conn svg{position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);color:var(--gold);}
.swap{background:var(--bg-warm);}
.swap .cols{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;margin-top:56px;}
.swap .col{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:32px;}
.swap .col.old{opacity:.85;}
.swap .col .clab{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;}
.swap .col.old .clab{color:var(--ink-dim);} .swap .col.new .clab{color:var(--green-deep);}
.swap .col h3{font-size:23px;margin-bottom:10px;} .swap .col p{font-size:15px;color:var(--ink-soft);}
.swap .arrow{width:52px;height:52px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px;}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;}
.mcard .mi{width:46px;height:46px;border-radius:13px;background:var(--green-soft);color:var(--green-deep);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.mcard h3{font-size:17px;margin-bottom:7px;} .mcard p{font-size:14px;color:var(--ink-soft);}
.steps{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--card);}
.step{padding:38px 30px;display:flex;flex-direction:column;gap:16px;border-right:1px solid var(--line);}
.step:last-child{border-right:none;}
.step .sn{font-family:var(--mono);font-size:14px;font-weight:700;color:var(--green-deep);letter-spacing:1px;}
.step h3{font-size:20px;line-height:1.25;} .step p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}
.precios{text-align:center;background:var(--bg-warm);}
.soon-chip{display:inline-block;background:var(--amber-soft);color:var(--amber);font-family:var(--mono);font-size:12px;font-weight:700;padding:4px 12px;border-radius:8px;margin-left:10px;vertical-align:middle;}
.planes{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:760px;margin:56px auto 0;text-align:left;}
.plan{border:1px solid var(--line);border-radius:24px;padding:32px;background:var(--card);}
.plan.free{border:1.5px solid var(--green);}
.plan .pn{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ink-dim);}
.plan.free .pn{color:var(--green-deep);}
.plan .pr{font-family:var(--serif);font-size:52px;font-weight:400;letter-spacing:-1px;line-height:1;margin:12px 0 2px;}
.plan.soon .pr{font-size:34px;color:var(--ink-dim);}
.plan .psub{font-size:14px;color:var(--ink-dim);margin-bottom:20px;}
.plan ul{list-style:none;}
.plan li{font-size:14.5px;padding:8px 0 8px 28px;position:relative;color:var(--ink-soft);}
.plan li::before{content:"";position:absolute;left:0;top:13px;width:16px;height:9px;border-left:2px solid var(--green-deep);border-bottom:2px solid var(--green-deep);transform:rotate(-45deg);}
.plan li.muted{color:var(--ink-dim);} .plan li.muted::before{border-color:var(--ink-faint);opacity:.5;}
.plan .pbtn{display:block;text-align:center;margin-top:22px;height:50px;line-height:50px;border-radius:14px;font-weight:700;font-size:15px;}
.plan.free .pbtn{background:var(--green);color:#fff;} .plan.soon .pbtn{background:var(--bg);color:var(--ink-dim);}
.finalcta{background:var(--bg-deep);}
.finalcta .box{max-width:900px;margin:0 auto;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);border:1px solid rgba(255,255,255,.1);border-radius:28px;padding:60px 48px;text-align:center;}
.finalcta .eyebrow{color:var(--gold);justify-content:center;}
.finalcta h2{color:#fff;max-width:680px;margin:18px auto 0;} .finalcta h2 em.s{color:var(--gold);}
.finalcta .lede{color:rgba(255,255,255,.7);max-width:520px;margin:24px auto 0;}
/* resumen de capacidades (inicio gestorías) */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px;}
@media(max-width:920px){
  .ges-hero .grid{grid-template-columns:1fr;gap:36px;}
  .hero-art{min-height:300px;}
  .swap .cols{grid-template-columns:1fr;} .swap .arrow{transform:rotate(90deg);margin:0 auto;}
  .mgrid,.steps,.planes,.cap-grid{grid-template-columns:1fr;}
  .step{border-right:none;border-bottom:1px solid var(--line);}
}

/* ============================================================
   Animaciones (sutiles). Todo se desactiva con prefers-reduced-motion.
   ============================================================ */

/* --- reveal al hacer scroll: estado inicial oculto+desplazado, JS añade .in --- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:none;}
/* escalonado: hijos directos con .stagger entran uno tras otro */
.stagger>*{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1);}
.stagger.in>*{opacity:1;transform:none;}
.stagger.in>*:nth-child(2){transition-delay:.08s;}
.stagger.in>*:nth-child(3){transition-delay:.16s;}
.stagger.in>*:nth-child(4){transition-delay:.24s;}
.stagger.in>*:nth-child(5){transition-delay:.32s;}
.stagger.in>*:nth-child(6){transition-delay:.40s;}
.stagger.in>*:nth-child(7){transition-delay:.48s;}
.stagger.in>*:nth-child(8){transition-delay:.56s;}
/* del 9º en adelante, el mismo retardo tope: no acumular esperas largas si una
   rejilla crece mucho, pero SIN romper la cascada (antes: 7º+ entraban de golpe) */
.stagger.in>*:nth-child(n+9){transition-delay:.60s;}

/* --- hero: entrada escalonada al cargar (sin esperar scroll) --- */
.hero-anim{opacity:0;transform:translateY(20px);animation:heroIn .8s cubic-bezier(.22,.61,.36,1) forwards;}
.hero-anim.d1{animation-delay:.05s;} .hero-anim.d2{animation-delay:.15s;}
.hero-anim.d3{animation-delay:.25s;} .hero-anim.d4{animation-delay:.35s;}
@keyframes heroIn{to{opacity:1;transform:none;}}

/* --- chips del móvil: entran con un pop y LUEGO flotan --- */
/* El pop (chipIn) y la flotación (floaty) animan ambos `transform`. Si corren a la
   vez, la 2ª regla de @keyframes pisa a la 1ª y el pop se ve deslavado + da un tirón
   al terminar. Solución: NO solaparlos — cada floaty arranca justo cuando su chipIn
   (.7s) ya acabó (delay entrada + .7s), así nunca compiten por `transform`. */
.chip{opacity:0;animation:chipIn .7s ease forwards;}
.chip:nth-of-type(2){animation-delay:.5s;} .chip:nth-of-type(3){animation-delay:.65s;} .chip:nth-of-type(4){animation-delay:.8s;}
@keyframes chipIn{from{opacity:0;transform:translateY(8px) scale(.96);}to{opacity:1;transform:none;}}
.chip.float{animation:chipIn .7s ease forwards, floaty 5.5s ease-in-out .7s infinite;}
.chip.float.f2{animation:chipIn .7s ease .65s forwards, floaty 6.2s ease-in-out 1.35s infinite;}
.chip.float.f3{animation:chipIn .7s ease .8s forwards, floaty 5s ease-in-out 1.5s infinite;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}

/* respeta la preferencia del sistema: nada de movimiento */
@media (prefers-reduced-motion: reduce){
  .reveal,.stagger>*{opacity:1 !important;transform:none !important;transition:none !important;}
  .hero-anim{opacity:1 !important;transform:none !important;animation:none !important;}
  .chip,.chip.float,.chip.float.f2,.chip.float.f3{opacity:1 !important;animation:none !important;transform:none !important;}
}

/* ---- Recorrido animado de capturas («la app en un minuto») ----
   Lo usan /app/conectar/ y /caracteristicas/. El guion (qué captura, qué
   banda se enfoca y cuánto dura) vive en el HTML de cada página; aquí solo
   está la pinta, y en /assets/recorrido.js el reproductor. */
/* ---- Recorrido «la app en un minuto» ----
   Capturas reales encadenadas: el móvil se ve entero y casi a tamaño real,
   y un foco de luz recorre la pantalla señalando de qué habla cada paso.
   Sin zoom a propósito: ampliar recortaría los laterales de las tarjetas y
   se perderían las cifras de los extremos. Si el reproductor no arranca,
   queda la primera captura y el guion entero en texto. */
.tour{--tour-w:min(340px,84vw);display:grid;grid-template-columns:minmax(0,400px) minmax(0,600px);gap:52px;justify-content:center;align-items:start;margin-top:44px;}
.tour-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;}
.tour-phone{width:var(--tour-w);position:relative;z-index:1;}
.tour-screen{position:relative;width:100%;aspect-ratio:1080/2172;border-radius:28px;overflow:hidden;background:#F2F3F2;cursor:pointer;}
/* El lienzo tiene SIEMPRE el alto de la captura entera; en móvil la ventana es
   más baja que él y el JS lo desplaza para centrar la banda enfocada. En
   escritorio ventana y lienzo miden lo mismo, así que no se mueve. */
.tour-lienzo{position:absolute;left:0;right:0;top:0;aspect-ratio:1080/2172;transition:transform .75s cubic-bezier(.4,0,.2,1);will-change:transform;}
.tour-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s ease;}
.tour-img.is-on{opacity:1;}
/* Foco: dos velos (arriba y abajo) y un marco sobre la banda iluminada */
.tour-focus{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none;}
.tour-focus.is-on{opacity:1;}
.tour-focus .velo{position:absolute;left:0;right:0;height:0;background:rgba(14,32,28,.42);
                  -webkit-backdrop-filter:saturate(.7) blur(1.2px);backdrop-filter:saturate(.7) blur(1.2px);
                  transition:height .75s cubic-bezier(.4,0,.2,1);}
.tour-focus .velo.arriba{top:0;}
.tour-focus .velo.abajo{bottom:0;}
.tour-focus .marco{position:absolute;left:3%;right:3%;top:0;height:0;border:2px solid rgba(126,190,44,.9);
                   border-radius:14px;box-shadow:0 0 0 1px rgba(255,255,255,.28);
                   transition:top .75s cubic-bezier(.4,0,.2,1),height .75s cubic-bezier(.4,0,.2,1);}
.tour-tap{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;
          border:2.5px solid rgba(255,255,255,.9);background:rgba(126,190,44,.28);opacity:0;pointer-events:none;}
.tour-tap.is-on{animation:tourtap 2s ease-out infinite;}
@keyframes tourtap{0%{transform:scale(.5);opacity:0;}22%{opacity:1;}70%{transform:scale(1.2);opacity:0;}100%{opacity:0;}}
/* Progreso y controles: solo tienen sentido si hay JS que los mueva */
.tour-bar,.tour-ctrl{display:none;}
.tour.js .tour-bar{display:flex;gap:5px;width:var(--tour-w);}
/* Rótulo del paso en curso: solo en móvil, donde la lista queda fuera de pantalla */
.tour-ahora{display:none;width:var(--tour-w);}
.tour-ahora .ta-t{display:block;font-size:16px;font-weight:700;letter-spacing:-.2px;}
.tour-ahora .ta-d{display:block;font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin-top:4px;}
.tour.js .tour-ctrl{display:flex;align-items:center;gap:12px;}
.tour-bar .seg{flex:1;height:3px;border-radius:2px;background:rgba(22,26,24,.13);overflow:hidden;}
.tour-bar .seg i{display:block;height:100%;width:0;background:var(--green);border-radius:2px;}
.tour-btn{width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--line);color:var(--ink);
          display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,box-shadow .15s;}
.tour-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -8px rgba(20,30,28,.3);}
.tour-hint{font-family:var(--mono);font-size:11.5px;letter-spacing:.6px;color:var(--ink-dim);text-transform:uppercase;}
/* El guion es a la vez la lista de capítulos y el texto de la sección */
.tour-steps{list-style:none;display:flex;flex-direction:column;gap:3px;}
.tour-step{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;background:transparent;
           border:1px solid transparent;border-radius:15px;padding:13px 16px;cursor:pointer;font-family:inherit;
           color:var(--ink);transition:background .2s,border-color .2s,box-shadow .2s;}
.tour-step:hover{background:rgba(22,26,24,.035);}
.tour-step .ts-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:var(--bg-warm);color:var(--ink-soft);
                 font-family:var(--mono);font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;}
.tour-step .ts-t{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.2px;}
.tour-step .ts-d{display:block;font-size:14px;line-height:1.5;color:var(--ink-soft);margin-top:5px;}
.tour.js .tour-step .ts-d{display:none;}
.tour.js .tour-step[aria-current="true"] .ts-d{display:block;}
.tour-step[aria-current="true"]{background:var(--card);border-color:var(--line);box-shadow:0 10px 26px -16px rgba(20,30,28,.45);}
.tour-step[aria-current="true"] .ts-n{background:var(--green);color:#fff;}
@media(prefers-reduced-motion:reduce){
  .tour-img,.tour-lienzo,.tour-focus,.tour-focus .velo,.tour-focus .marco{transition:none;}
  .tour-tap{display:none;}
}
@media(max-width:900px){
  /* En móvil el teléfono entero ocupaba la pantalla y el guion se quedaba debajo,
     obligando a hacer scroll en cada paso. La ventana se recorta (misma escala,
     sin zoom: el texto de la app se lee igual) y debajo cabe el rótulo del paso. */
  .tour{--tour-w:min(300px,78vw);grid-template-columns:1fr;gap:26px;justify-items:center;}
  .tour-screen{aspect-ratio:1080/1500;}
  .tour.js .tour-ahora{display:block;}
  .tour.js .tour-step[aria-current="true"] .ts-d{display:none;}   /* ya está en el rótulo */
  .tour-steps{width:100%;}
}