/* ===================================================================
   CrediAyudarte — Home cinematográfica
   Un solo universo claro que se transforma con el scroll (js/cine.js),
   seguido de secciones editoriales en "liquid glass". Base: styles.css.

   Jerarquía de color (tomada del logo):
   - verde del logo   → titulares grandes, cifras, acentos
   - amarillo del logo→ marcador detrás de la frase clave (<mark>), detalles
   - gris del logo    → cuerpo de texto y tinta sobre el marcador
   - azul grisáceo    → tercera esfera, estados neutros
   =================================================================== */

:root{
  --c-green:#6FAA31;        /* verde del logo */
  --c-green-hi:#7FBB3E;
  --c-green-lo:#5C9426;
  --c-yellow:#F1C300;       /* amarillo del logo */
  --c-blue:#B4C3CF;         /* azul grisáceo del logo */
  --c-ink:#2E2A30;          /* gris del logo, oscurecido: tinta sobre el marcador */
  --c-text:#4A454C;         /* cuerpo sobre el universo visual */
  --c-muted:#5C565D;        /* gris del logo: cuerpo sobre blanco */
  --c-line:#E6E5E8;
  --c-brand:var(--c-green);
  --nav-h:84px;
  --e-out:cubic-bezier(.22,.61,.36,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
  --e-spring:cubic-bezier(.34,1.4,.64,1);
}

/* El scroll de la experiencia se controla a mano: nada de smooth global */
html{scroll-behavior:auto}
body.home{background:#fff;color:var(--c-muted)}

.skip{position:absolute;left:1rem;top:-100px;z-index:100;background:#fff;color:var(--c-ink);padding:.7rem 1.1rem;border-radius:10px;font-weight:600;box-shadow:0 6px 20px -8px rgba(0,0,0,.25)}
.skip:focus{top:1rem}

body.home :focus-visible{outline:3px solid var(--c-green);outline-offset:3px;border-radius:6px}
/* Los enlaces del menú a #para-quien/#como-funciona/#preguntas/#contacto no deben
   quedar tapados por la cápsula fija de navegación al llegar por ancla */
body.home [id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* ===================================================================
   LIQUID GLASS
   Traducción web de la skill liquid-glass (SwiftUI .glassEffect):
   vidrio solo en la capa de controles y tarjetas flotantes, nunca en
   bloques de lectura; brillo especular que sigue al puntero (--mx/--my,
   js/home.js); tinte de marca en la acción principal; y respeto por
   "reducir transparencia".
   =================================================================== */
.lg{
  position:relative;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.74) 0%,rgba(255,255,255,.36) 46%,rgba(255,255,255,.24) 100%);
  -webkit-backdrop-filter:blur(18px) saturate(185%);backdrop-filter:blur(18px) saturate(185%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.95),
    inset 0 -10px 18px -12px rgba(255,255,255,.7),
    inset 0 0 0 .5px rgba(255,255,255,.35),
    0 1px 2px rgba(46,42,48,.06),
    0 18px 40px -22px rgba(46,42,48,.4);
}
/* reflejo especular: se mueve con el puntero */
.lg::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(160px 120px at var(--mx,22%) var(--my,0%),rgba(255,255,255,.75),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 38%);
  opacity:.7;transition:opacity .35s var(--e-soft);
}
.lg:hover::after{opacity:1}
@media (prefers-reduced-transparency:reduce){
  .lg{background:rgba(255,255,255,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Esferas de vidrio (las del isotipo) flotando como decoración */
.orb{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;border-radius:50%;
  pointer-events:none;z-index:0;
  animation:orb 9s ease-in-out infinite alternate;animation-delay:calc(var(--s) * -.05s);
}
.orb--y{background:radial-gradient(circle at 32% 28%,#fff 0 5%,#FFE788 16%,#F1C300 52%,#D6A500 100%);box-shadow:inset -8px -12px 20px rgba(150,100,0,.28),inset 6px 8px 14px rgba(255,255,255,.55),0 22px 34px -20px rgba(170,120,0,.6)}
.orb--g{background:radial-gradient(circle at 32% 28%,#fff 0 5%,#B7E07E 16%,#6FAA31 54%,#4C8A1E 100%);box-shadow:inset -8px -12px 20px rgba(40,80,10,.3),inset 6px 8px 14px rgba(255,255,255,.5),0 22px 34px -20px rgba(70,120,20,.6)}
.orb--b{background:radial-gradient(circle at 32% 28%,#fff 0 6%,#E4EBF1 20%,#B4C3CF 56%,#8C9FAF 100%);box-shadow:inset -6px -10px 16px rgba(70,90,110,.25),inset 6px 8px 14px rgba(255,255,255,.6),0 18px 30px -18px rgba(90,110,130,.55)}
.orb--w{background:radial-gradient(circle at 30% 26%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,.35) 30%,rgba(255,255,255,.08) 64%,rgba(255,255,255,.22) 100%);border:1px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-shadow:inset -6px -10px 22px rgba(255,255,255,.25),0 24px 40px -24px rgba(0,0,0,.25)}
@keyframes orb{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(6px,-16px,0)}}

/* Marcador amarillo detrás de la frase clave (como en las piezas de la marca) */
mark{
  color:var(--c-ink);background-color:transparent;
  background-image:linear-gradient(var(--c-yellow),var(--c-yellow));
  background-repeat:no-repeat;background-position:0 72%;background-size:100% 74%;
  padding:0 .1em;margin:0 -.04em;border-radius:.12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
/* se "pinta" al entrar (experiencia: .is-h · secciones: .is-visible) */
.js .cap mark,.reveal mark{background-size:0% 74%;transition:background-size .85s var(--e-out) .45s}
.js .cap.is-h mark,.reveal.is-visible mark{background-size:100% 74%}

/* Titulares que suben palabra por palabra (js/cine.js envuelve cada palabra) */
.split .w{display:inline-block;clip-path:inset(-.25em -.12em -.28em -.12em);vertical-align:top}
.split .wi{display:inline-block;translate:0 110%;transition:translate .95s var(--e-out);transition-delay:calc(var(--i) * 55ms)}
.js .cap.is-h .split .wi{translate:0 0}
.js .cap.is-out .split .wi{translate:0 -110%;transition-duration:.55s;transition-delay:calc(var(--i) * 18ms)}

/* ===================== BOTONES Y ENLACES ===================== */
.cbtn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.7rem;border-radius:999px;
  font-family:var(--f-head);font-weight:700;font-size:1.04rem;line-height:1.1;letter-spacing:-.005em;
  white-space:nowrap;cursor:pointer;
  transition:transform .25s var(--e-spring),box-shadow .25s var(--e-out),filter .25s var(--e-soft);
}
/* Acción principal: vidrio tintado con el verde del logo */
.cbtn--primary{
  color:#fff;text-shadow:0 1px 1px rgba(40,70,10,.45);
  background:linear-gradient(180deg,#8CCB4C 0%,var(--c-green) 52%,var(--c-green-lo) 100%);
  border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.65),inset 0 -3px 8px rgba(40,70,10,.28),0 12px 26px -12px rgba(92,148,38,.75);
}
/* destello que cruza el botón */
.cbtn--primary::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.45),rgba(255,255,255,0));
  transform:skewX(-18deg);animation:sheen 5.5s var(--e-soft) infinite 2s;
}
@keyframes sheen{0%,72%{left:-60%}100%{left:130%}}
.cbtn--primary:hover{transform:translateY(-2px) scale(1.02);filter:saturate(1.1) brightness(1.04);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -3px 8px rgba(40,70,10,.28),0 18px 34px -14px rgba(92,148,38,.85)}
.cbtn--light{color:var(--c-ink);background:rgba(255,255,255,.9)}
.cbtn--light.lg{background:linear-gradient(160deg,rgba(255,255,255,.95),rgba(255,255,255,.7))}
.cbtn--light:hover{transform:translateY(-2px) scale(1.02)}
.cbtn--sm{min-height:44px;padding:.6rem 1.2rem;font-size:.93rem}
.cbtn--lg{min-height:58px;padding:1rem 2.1rem;font-size:1.1rem}
.cbtn:active{transform:scale(.97)}

.clink{display:inline-flex;align-items:center;gap:.45rem;font-weight:650;color:var(--c-ink);padding:.4rem 0}
.clink .ico{width:1.05em;height:1.05em;color:var(--c-green);transition:transform .22s var(--e-out)}
.clink:hover{color:var(--c-green)}
.clink:hover .ico{transform:translateX(3px)}

/* ===================== NAVEGACIÓN: cápsula de vidrio flotante ===================== */
.cnav{position:fixed;left:0;right:0;top:0;z-index:60;height:var(--nav-h);display:flex;align-items:center;pointer-events:none}
.cnav__inner{
  pointer-events:auto;width:min(100% - 2.5rem,1280px);margin-inline:auto;display:flex;align-items:center;gap:1.5rem;
  padding:.5rem .55rem .5rem 1.3rem;border-radius:999px;
  background:linear-gradient(160deg,rgba(255,255,255,.62),rgba(255,255,255,.3));
  -webkit-backdrop-filter:blur(20px) saturate(190%);backdrop-filter:blur(20px) saturate(190%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 1px 2px rgba(46,42,48,.05),0 16px 36px -24px rgba(46,42,48,.4);
  transition:background .35s var(--e-soft),box-shadow .35s var(--e-soft);
}
html:not(.js) .cnav__inner,.cnav.is-solid .cnav__inner{background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.72));box-shadow:inset 0 1px 1px #fff,0 1px 2px rgba(46,42,48,.06),0 18px 40px -22px rgba(46,42,48,.45)}
.cnav__logo{display:block;flex:none}
.cnav__logo img{height:36px;width:auto}
/* Los 7 enlaces canónicos del sitio (mismo menú en toda la página): gap y
   tamaño más apretados que un menú de 4 ítems para que quepan sin desbordar. */
.cnav__links{display:flex;align-items:center;gap:1.15rem;margin-left:auto}
.cnav__links a{position:relative;font-weight:550;font-size:.89rem;color:var(--c-ink);padding:.45rem 0;white-space:nowrap}
.cnav__links a::after{content:"";position:absolute;left:0;right:0;bottom:.1rem;height:2px;border-radius:2px;background:var(--c-green);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--e-out)}
.cnav__links a:hover::after{transform:scaleX(1)}
.cnav__tel{flex:none;margin-left:1rem;font-size:.9rem;font-weight:700;color:var(--c-ink);letter-spacing:-.005em;white-space:nowrap}
.cnav__tel span{display:inline-block;margin-right:.4rem;padding:.2rem .5rem;border-radius:999px;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-ink);background:rgba(241,195,0,.9)}
.cnav__tel:hover{color:var(--c-green)}
.cnav__cta{margin-left:.3rem}
.cnav__toggle{display:none;width:44px;height:44px;border:0;background:transparent;border-radius:50%;cursor:pointer;position:relative;flex:none}
.cnav__toggle span{position:absolute;left:12px;right:12px;height:2px;border-radius:2px;background:var(--c-ink);transition:transform .25s var(--e-out),top .25s var(--e-out)}
.cnav__toggle span:first-child{top:17px}
.cnav__toggle span:last-child{top:25px}
.cnav__toggle.is-open span:first-child{top:21px;transform:rotate(45deg)}
.cnav__toggle.is-open span:last-child{top:21px;transform:rotate(-45deg)}

@media (max-width:1300px){.cnav__tel{display:none}}
@media (max-width:1100px){.cnav__links{gap:.85rem}.cnav__links a{font-size:.84rem}}
@media (max-width:920px){
  :root{--nav-h:72px}
  .cnav__inner{width:min(100% - 1.5rem,1280px);gap:.5rem;padding:.4rem .4rem .4rem 1rem}
  .cnav__logo img{height:30px}
  .cnav__cta{margin-left:auto}
  .cnav__toggle{display:block}
  .cnav__links{
    position:absolute;left:.75rem;right:.75rem;top:calc(var(--nav-h) + .2rem);margin:0;
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem;
    background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.76));
    -webkit-backdrop-filter:blur(22px) saturate(190%);backdrop-filter:blur(22px) saturate(190%);
    border:1px solid rgba(255,255,255,.7);border-radius:24px;box-shadow:inset 0 1px 1px #fff,0 26px 50px -26px rgba(46,42,48,.5);
    opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;
    transition:opacity .22s var(--e-soft),transform .3s var(--e-spring),visibility 0s .22s;
  }
  .cnav__links.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .22s var(--e-soft),transform .3s var(--e-spring),visibility 0s}
  .cnav__links a{padding:.9rem 1rem;border-radius:14px;font-size:1rem}
  .cnav__links a:hover{background:rgba(111,170,49,.1)}
  .cnav__links a::after{display:none}
}
@media (max-width:380px){
  .cnav__cta{padding:.55rem .9rem;font-size:.86rem}
  .cnav__logo img{height:26px}
}

/* ===================================================================
   EXPERIENCIA CINEMATOGRÁFICA
   Un video a pantalla completa recorrido por scroll (js/cine.js).
   Gramática editorial común a todos los capítulos:
   - margen lateral --gx y línea base inferior --gb compartidos
   - titulares grandes anclados a una esquina, pieza de vidrio en la opuesta
   - "aside" con filete superior, CTA en píldora al centro inferior
   Sin JS (o si cine.js no llega): el primer fotograma como portada y el
   copy de los 9 capítulos en flujo normal, legible y seleccionable.
   =================================================================== */
.cine{position:relative;z-index:1;background:#fff;--gx:clamp(1.25rem,4.5vw,5rem);--gb:clamp(1.5rem,5.5vh,3.4rem)}
.cine__stage{position:relative}
.cine__media{position:relative;height:72vh;overflow:hidden;background:#fff}
.cine__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.cine__img:not(:first-child){display:none}
.cine__copy{padding:2rem 0 4rem}
.cap{position:relative;width:min(100% - 2.5rem,760px);margin:0 auto;padding:1.8rem 0;border-top:1px solid var(--c-line)}
.cap:first-child{border-top:0}
.cap__veil,.cine__hud,.hero__scroll{display:none}
.cine__track{display:none}

/* ---------- Tipografía común ---------- */
.hero__eyebrow,.cap__kicker{display:inline-flex;align-items:center;gap:.6rem;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink)}
.hero__eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 4px rgba(111,170,49,.2);animation:pulse 2.4s var(--e-soft) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 4px rgba(111,170,49,.2)}50%{box-shadow:0 0 0 8px rgba(111,170,49,0)}}
.cap__kicker::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--c-yellow)}

.hero__title{font-family:var(--f-head);font-weight:640;color:var(--c-green);font-size:clamp(2.8rem,1rem + 5.6vw,6.6rem);line-height:.98;letter-spacing:-.048em;word-spacing:.04em;margin-top:1rem}
.hero__title span.hero__a,.hero__title span.hero__b{display:block}
.hero__lead{margin-top:1.4rem}
.hero__tag{font-family:var(--f-head);font-weight:650;color:var(--c-ink);font-size:clamp(1.2rem,1rem + .55vw,1.5rem);line-height:1.16;letter-spacing:-.022em}
.hero__tag b{font-weight:750;color:var(--c-green)}
.hero__text{margin-top:1rem;font-size:.97rem;line-height:1.55;color:var(--c-text);max-width:34ch;text-wrap:pretty}
.hero__cta{display:flex;align-items:center;gap:.55rem;margin-top:1.6rem}
.hero__cue{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.4rem;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--c-ink)}
.hero__how{color:var(--c-ink);text-decoration:none;transition:color .2s var(--e-soft)}
.hero__how:hover{color:var(--c-green)}

/* Botón redondo de vidrio que acompaña a la píldora */
.cround{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;flex:none;color:var(--c-green);transition:transform .25s var(--e-spring),color .2s var(--e-soft)}
.cround .ico{width:22px;height:22px}
.cbtn--hero{min-height:64px;padding:1.05rem 2.6rem;font-size:1.24rem}
.hero__cta .cround{width:64px;height:64px}
.hero__cta .cround .ico{width:28px;height:28px}
.cround:hover{transform:translateY(-2px) rotate(-10deg) scale(1.06);color:var(--c-green-lo)}

.cap__title{
  font-family:var(--f-head);font-weight:680;color:var(--c-green);
  font-size:min(clamp(2rem,.8rem + 2.6vw,3.8rem),7.4vh);
  line-height:1.03;letter-spacing:-.042em;word-spacing:.03em;text-wrap:balance;
}
.cap__kicker + .cap__title{margin-top:1rem}
.cap__text{margin-top:1.1rem;font-size:clamp(1.04rem,.92rem + .38vw,1.24rem);line-height:1.5;color:var(--c-text);max-width:36ch;text-wrap:pretty}
.cap__aside{margin-top:1.2rem;padding-top:.95rem;border-top:2px solid var(--c-yellow);font-size:clamp(1rem,.92rem + .25vw,1.12rem);line-height:1.5;color:var(--c-text);max-width:24rem;text-wrap:pretty}

/* Chips y rótulos de vidrio */
.cap__chips{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem;max-width:34rem}
.cap__chips li,.perfiles a{
  display:inline-flex;align-items:center;gap:.55rem;padding:.62rem 1.05rem .62rem .85rem;border-radius:999px;
  font-size:.97rem;font-weight:650;color:var(--c-ink);
}
.cap__chips li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 3px rgba(111,170,49,.18)}
.cap__chips li:nth-child(2)::before{background:var(--c-yellow);box-shadow:0 0 0 3px rgba(241,195,0,.22)}
.cap__chips li:nth-child(3)::before{background:var(--c-blue);box-shadow:0 0 0 3px rgba(180,195,207,.3)}
.perfiles{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem}
.perfiles a span{display:inline-grid;place-items:center;min-width:2.15rem;height:2.15rem;border-radius:999px;font-size:.82rem;font-weight:800;color:var(--c-ink);background:var(--c-yellow)}
.perfiles a{padding:.85rem 1.5rem .85rem 1rem;font-size:1.16rem;gap:.7rem}
.perfiles a{transition:transform .25s var(--e-spring),color .2s var(--e-soft)}
.perfiles a:hover{transform:translateY(-3px) scale(1.03);color:var(--c-green)}

/* 02 · Capas de vidrio escalonadas */
.capas{display:grid;gap:.6rem;margin-top:1.4rem;max-width:22rem}
.capas li{display:flex;flex-direction:column;gap:.15rem;padding:.9rem 1.2rem;border-radius:20px}
.capas small{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.capas b{font-size:1.45rem;font-weight:700;letter-spacing:-.025em;color:var(--c-green)}
.capas li:nth-child(2) b{color:var(--c-ink)}
.capas li:nth-child(3) b{color:var(--c-ink);background:linear-gradient(var(--c-yellow),var(--c-yellow)) no-repeat 0 78%/100% 40%}

/* 03 · Tarjeta de revisión con línea de escaneo */
.scan{margin-top:1.6rem;max-width:26rem;padding:1.05rem 1.2rem 1.1rem;border-radius:24px}
.scan__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink)}
.scan__head i{position:relative;flex:1;max-width:8rem;height:4px;border-radius:4px;background:rgba(46,42,48,.1);overflow:hidden}
.scan__head i::after{content:"";position:absolute;inset:0;width:40%;border-radius:inherit;background:linear-gradient(90deg,var(--c-green),var(--c-yellow));animation:scan 1.8s var(--e-soft) infinite}
@keyframes scan{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.scan__list{margin-top:.8rem;display:grid;gap:.55rem}
.scan__list li{display:flex;align-items:flex-start;gap:.7rem;font-size:1rem;font-weight:650;color:var(--c-ink);line-height:1.3}
.scan__list small{display:block;font-size:.84rem;font-weight:500;color:var(--c-muted)}
.espera{display:inline-flex;gap:3px;width:24px;height:24px;align-items:center;justify-content:center;flex:none;border-radius:50%;border:1.8px dashed rgba(46,42,48,.3)}
.espera i{width:3px;height:3px;border-radius:50%;background:var(--c-muted);animation:dot 1.2s var(--e-soft) infinite}
.espera i:nth-child(2){animation-delay:.15s}.espera i:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,100%{opacity:.25}50%{opacity:1}}

/* Check que se dibuja (03 y 07) */
.tick{width:24px;height:24px;flex:none;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tick circle{stroke:var(--c-green);stroke-width:1.8;fill:rgba(111,170,49,.12);stroke-dasharray:66;stroke-dashoffset:0}
.tick polyline{stroke:var(--c-green);stroke-width:2.4;stroke-dasharray:16;stroke-dashoffset:0}
.js .seq > li .tick circle{stroke-dashoffset:66;transition:stroke-dashoffset .6s var(--e-out)}
.js .seq > li .tick polyline{stroke-dashoffset:16;transition:stroke-dashoffset .45s var(--e-out) .35s}
.js .seq > li.is-on .tick circle,.js .seq > li.is-on .tick polyline{stroke-dashoffset:0}

/* 05 · Barras: cuando la cuota baja, el plazo y el costo total suben */
.barras{margin:1.8rem auto 0;max-width:30rem;padding:1.1rem 1.3rem 1.2rem;border-radius:24px;text-align:left}
.barras figcaption{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink)}
.barras ul{margin-top:.9rem;display:grid;gap:.75rem}
.barras li{display:grid;grid-template-columns:6.6rem 1fr auto;align-items:center;gap:.8rem;font-size:.95rem;font-weight:650;color:var(--c-ink)}
.barras i{position:relative;height:12px;border-radius:12px;background:rgba(46,42,48,.08);overflow:hidden}
.barras i::after{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:left;transform:scaleX(var(--v));background:linear-gradient(90deg,var(--c-yellow),#FFD84A)}
.barras--down i::after{background:linear-gradient(90deg,var(--c-green-lo),var(--c-green-hi))}
.barras b{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .55rem;border-radius:999px;background:var(--c-yellow);color:var(--c-ink)}
.barras--down b{background:rgba(111,170,49,.16);color:var(--c-ink)}
.js .barras i::after{transition:transform 1.5s var(--e-out) .2s}
.js .barras--down i::after{transform:scaleX(.82)}
.js .barras--up i::after{transform:scaleX(.42)}
.js .cap.is-c .barras i::after{transform:scaleX(var(--v))}

/* 07 · Lista de claridad */
.check{margin-top:1.6rem;max-width:30rem;padding:.6rem 1.2rem;border-radius:24px}
.check li{display:flex;align-items:center;gap:.8rem;padding:.8rem 0;font-size:clamp(1.05rem,.95rem + .35vw,1.25rem);font-weight:650;color:var(--c-ink);letter-spacing:-.012em}
.check li + li{border-top:1px solid rgba(46,42,48,.08)}

/* 08 · 9 años + clientes reales */
.anios{margin-top:1.6rem;max-width:27rem;padding:1.1rem 1.3rem 1.15rem;border-radius:26px;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:center}
.anios__n{display:flex;align-items:baseline;gap:.25rem;font-family:var(--f-head);font-weight:750;color:var(--c-green);line-height:.85}
.anios__n span{font-size:clamp(3.6rem,2.4rem + 3vw,5.2rem);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.anios__n small{font-size:1.05rem;font-weight:750;color:var(--c-ink);letter-spacing:-.01em}
.anios__t{font-size:1.12rem;font-weight:650;line-height:1.25;color:var(--c-ink);letter-spacing:-.015em}
.anios__t b{font-weight:750;background:linear-gradient(var(--c-yellow),var(--c-yellow)) no-repeat 0 82%/100% 38%}
.anios__who{grid-column:1 / -1;display:flex;align-items:center;gap:.75rem;margin-top:.9rem;padding-top:.85rem;border-top:1px solid rgba(46,42,48,.1);font-size:.88rem;line-height:1.35}
.anios__who a{font-weight:650;color:var(--c-ink);text-decoration:underline;text-decoration-color:var(--c-green);text-decoration-thickness:2px;text-underline-offset:3px}
.anios__faces{display:flex;flex:none}
.anios__faces img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:50% 25%;border:2px solid #fff;box-shadow:0 4px 10px -4px rgba(46,42,48,.4)}
.anios__faces img + img{margin-left:-11px}
.fotos{display:flex;gap:.6rem;margin-top:1.4rem}
.fotos li{padding:6px;border-radius:22px;width:160px}
.fotos img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:16px}

/* ===================== MODO CINEMATOGRÁFICO (JS activo) ===================== */
.js .cine__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff}
.js .cine__media{
  position:absolute;inset:0;height:auto;transform-origin:50% 60%;will-change:transform;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%);mask-image:linear-gradient(to bottom,transparent 0,#000 6%);
}
.js .cine__img{display:block;opacity:0;z-index:1;transition:opacity .24s linear;backface-visibility:hidden}
.js .cine__img:first-child{opacity:1}
/* oculto (visibility) hasta que está listo: así no compite como LCP */
.cine__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;visibility:hidden;pointer-events:none}
.cine__vid.is-on{visibility:visible}
.js .cine__track{display:block;height:1400vh}
.js .cine__copy{position:absolute;inset:0;padding:0;z-index:3;pointer-events:none}

.js .cap{position:absolute;inset:0;width:auto;margin:0;padding:0;border:0}
.js .cap a,.js .cap .cap__box,.js .cap__aside,.js .perfiles,.js .capas,.js .fotos{pointer-events:auto}
/* Los capítulos que no están en pantalla siguen encima (opacidad 0): sin esto, las fotos
   invisibles del 08 tapaban los rótulos "03" y "04" del 06 y no se podían pulsar */
.js .cap:not(.is-act) *,.js .cap.is-out *{pointer-events:none !important}
/* el vidrio de los capítulos que no están en pantalla no se calcula */
.js .cap:not(.is-act) .lg{-webkit-backdrop-filter:none;backdrop-filter:none}
.js .cap__box{position:absolute;left:var(--gx);top:calc(var(--nav-h) + 6vh);width:min(44vw,700px)}
.js .cap__aside{position:absolute;right:var(--gx);bottom:var(--gb);width:min(26vw,24rem);margin:0}
.js .cap__veil{display:block;position:absolute;inset:0;background:var(--veil,none);opacity:0;transition:opacity .9s var(--e-soft)}
.js .cap.is-h .cap__veil{opacity:1}
.js .cap.is-out .cap__veil{opacity:0}

/* ---------- 01 · Hero (distribución de la referencia) ---------- */
.js .cap--01 .hero__eyebrow{position:absolute;left:var(--gx);top:calc(var(--nav-h) + 2.6vh)}
/* Titular en un solo bloque arriba a la izquierda: "ANTES DE / FIRMAR," y justo
   debajo "REVISA." (decisión del dueño 2026-09-29: ya no va partido en esquinas).
   Queda a la izquierda de las esferas del isotipo. */
.js .cap--01{--hf:min(clamp(2.6rem,4.2vw,6rem),9.6vh)}
.js .hero__title{position:absolute;left:var(--gx);top:calc(var(--nav-h) + 7vh);margin:0;font-size:var(--hf)}
/* botón del recorrido automático, justo debajo de "REVISA." (3 líneas de titular) */
.js .tour-btn{position:absolute;left:var(--gx);top:calc(var(--nav-h) + 7vh + var(--hf) * 3 + 1.5rem);margin:0;pointer-events:auto}
.js .hero__a,.js .hero__b{position:static;text-align:left}
.js .hero__b{margin-top:.08em}
.js .hero__lead{position:absolute;left:var(--gx);bottom:var(--gb);width:min(24vw,21rem);margin:0}
.js .hero__cta{position:absolute;left:50%;bottom:var(--gb);transform:translateX(-50%);margin:0}
.js .hero__cue{position:absolute;right:var(--gx);bottom:var(--gb);width:min(30vw,26rem);margin:0;padding-top:.9rem;border-top:2px solid rgba(46,42,48,.18)}
/* el filete se llena de verde a amarillo mientras invita a bajar */
.js .hero__cue::before{content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:linear-gradient(90deg,var(--c-green),var(--c-yellow));transform-origin:left;animation:fill 2.8s var(--e-soft) infinite}
@keyframes fill{0%{transform:scaleX(0)}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.js .hero__scroll{display:inline-flex;align-items:center;gap:.6rem}
.js .hero__scroll i{position:relative;display:block;width:14px;height:22px;border:1.6px solid rgba(46,42,48,.55);border-radius:8px}
.js .hero__scroll i::after{content:"";position:absolute;left:50%;top:4px;width:2px;height:5px;margin-left:-1px;border-radius:2px;background:var(--c-green);animation:wheel 2s var(--e-soft) infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(7px);opacity:0}100%{transform:translateY(0);opacity:0}}
/* halo blanco: el titular puede cruzar el isotipo sin perder lectura */
.js .hero__title,.js .cap--09 .cap__title{text-shadow:0 0 28px rgba(255,255,255,.8),0 0 2px rgba(255,255,255,.7)}
.js .hero__title mark,.js .cap--09 .cap__title mark{text-shadow:none}
.cap--01,.cap--09{--veil:radial-gradient(ellipse 62% 60% at 50% 46%,rgba(255,255,255,0) 52%,rgba(255,255,255,.55) 100%)}

/* ---------- 02 · Estallido: titular abajo a la izquierda, capas a la derecha ---------- */
.js .cap--02 .cap__box{top:auto;bottom:var(--gb);width:min(40vw,640px)}
.js .capas{position:absolute;right:calc(var(--gx) + 4.5rem);top:calc(var(--nav-h) + 8vh);width:19rem;margin:0}
.js .capas li:nth-child(2){margin-left:-2.2rem;margin-right:2.2rem}
.js .capas li:nth-child(3){margin-left:-4.4rem;margin-right:4.4rem}
.cap--02{--veil:linear-gradient(0deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.4) 26%,rgba(255,255,255,0) 44%)}

/* ---------- 03 · Vórtice: velo fuerte a la izquierda ---------- */
.js .cap--03 .cap__box{top:50%;transform:translateY(-50%);width:min(40vw,620px)}
.cap--03{--veil:linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 32%,rgba(255,255,255,.3) 54%,rgba(255,255,255,0) 68%)}

/* ---------- 04 · Camino: cielo arriba a la izquierda ---------- */
.js .cap--04 .cap__box{width:min(42vw,660px)}
.cap--04{--veil:linear-gradient(100deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.62) 30%,rgba(255,255,255,0) 56%)}

/* ---------- 05 · Nubes: centrado ---------- */
.js .cap--05 .cap__box{left:50%;top:50%;transform:translate(-50%,-50%);width:min(76vw,960px);text-align:center}
.js .cap--05 .cap__text{margin-inline:auto}
.cap--05{--veil:radial-gradient(ellipse 58% 52% at 50% 50%,rgba(255,255,255,.82) 0%,rgba(255,255,255,.45) 55%,rgba(255,255,255,0) 100%)}

/* ---------- 06 · Pedestales: titular arriba al centro, rótulos bajo cada ícono ---------- */
.js .cap--06 .cap__box{left:50%;top:calc(var(--nav-h) + 2.5vh);transform:translateX(-50%);width:min(80vw,1000px);text-align:center}
.js .cap--06 .cap__title{font-size:min(clamp(1.9rem,.8rem + 2.2vw,3.3rem),6.6vh)}
.js .cap--06 .cap__text{margin:.7rem auto 0}
.cap--06{--veil:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.5) 20%,rgba(255,255,255,0) 34%)}
.js .perfiles{position:absolute;inset:0;display:block;margin:0;pointer-events:none}
.js .perfiles li{position:absolute;left:var(--lx,calc(var(--vx) * 100%));top:var(--ly,72%);transform:translateX(-50%);pointer-events:auto}
/* filete vertical que "cuelga" el rótulo del pedestal */
.js .perfiles li::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:clamp(18px,3.4vh,34px);border-radius:2px;background:linear-gradient(to top,var(--c-green),rgba(111,170,49,0))}
.js .perfiles a{white-space:nowrap}

/* ---------- 07 · Cinta y esfera: arriba a la izquierda ---------- */
.js .cap--07 .cap__box{width:min(40vw,620px)}
.cap--07{--veil:linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.6) 32%,rgba(255,255,255,0) 56%)}

/* ---------- 08 · Paneles: postura + trayectoria, fotos flotando a la derecha ---------- */
.js .cap--08 .cap__box{top:calc(var(--nav-h) + 5vh);width:min(44vw,680px)}
.js .cap--08 .cap__title{font-size:min(clamp(1.9rem,.8rem + 2.4vw,3.5rem),6.8vh)}
.cap--08{--veil:linear-gradient(90deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.64) 36%,rgba(255,255,255,0) 58%)}
.js .fotos{position:absolute;left:var(--gx);bottom:var(--gb);display:flex;align-items:flex-end;gap:1rem;margin:0}
.js .fotos li{position:relative;width:min(11vw,17vh)}
.js .fotos li:nth-child(1){rotate:-6deg}
.js .fotos li:nth-child(2){rotate:4deg;z-index:2;margin-bottom:1.4rem}
.js .fotos li:nth-child(3){rotate:-3deg}
/* deriva suave con el scroll del capítulo (--cp: 0→1) */
.js .fotos li{translate:0 calc((.5 - var(--cp,.5)) * 30px)}
.js .fotos li:nth-child(2){translate:0 calc((.5 - var(--cp,.5)) * 56px)}

/* ---------- 09 · Cierre: la misma gramática del hero ---------- */
.js .cap--09 .cap__box{top:calc(var(--nav-h) + 7vh);width:auto}
/* el cierre no se monta sobre el isotipo: columna izquierda, tres líneas */
.js .cap--09 .cap__title{font-size:min(clamp(2.4rem,3.9vw,5.6rem),8.8vh)}

/* ---------- Fases del copy: entran, se leen, salen ---------- */
.js .cap__h,.js .cap__b,.js .cap__c,.js .seq > *{
  opacity:0;translate:0 18px;
  transition:opacity .7s var(--e-out),translate .9s var(--e-out);
}
.js .split.cap__h{translate:0 0}
.js .cap.is-h .cap__h,.js .cap.is-b .cap__b,.js .cap.is-c .cap__c{opacity:1;translate:0 0}
.js .cap.is-h .cap__h + .cap__h{transition-delay:.08s}
.js .cap--01.is-h .hero__b{transition-delay:.16s}
.js .cap--01.is-b .cap__b{transition-delay:.26s}
.js .cap--01.is-c .cap__c{transition-delay:.4s}
.js .seq > *{scale:.96;transition:opacity .6s var(--e-out),translate .8s var(--e-spring),scale .8s var(--e-spring)}
.js .seq > .is-on{opacity:1;translate:0 0;scale:1}
.js .fotos.seq > li{translate:0 40px}
.js .fotos.seq > li.is-on{translate:0 calc((.5 - var(--cp,.5)) * 30px)}
.js .fotos.seq > li:nth-child(2).is-on{translate:0 calc((.5 - var(--cp,.5)) * 56px)}
.js .cap.is-out .cap__h,.js .cap.is-out .cap__b,.js .cap.is-out .cap__c,.js .cap.is-out .seq > *{
  opacity:0;translate:0 -12px;transition-duration:.5s,.6s;transition-delay:0s;
}


/* ---------- Pantallas bajas (1366×768, 1280×800) ---------- */
@media (max-height:820px) and (min-aspect-ratio:1/1){
  .cine{--gb:clamp(1.25rem,4.4vh,2.4rem)}
  .js .hero__text{font-size:.9rem}
  .js .hero__tag{font-size:1.18rem}
  .cap__text{font-size:1.05rem}
  .scan,.check,.anios,.barras{margin-top:1.1rem}
  .scan__list li,.check li{font-size:.95rem}
  .check li{padding:.6rem 0}
  .capas li{padding:.7rem 1rem}
  .capas b{font-size:1.25rem}
  .anios__n span{font-size:3.6rem}
  .js .fotos li{width:min(10vw,15vh)}
}
/* Escritorio angosto */
@media (max-width:1100px) and (min-aspect-ratio:1/1){
  .js .hero__lead{width:min(30vw,19rem)}
  .js .hero__tag{display:none}
  .js .hero__cue{width:min(28vw,18rem)}
  .js .hero__how{display:none}
  .js .cine__hud{display:none}
  .js .capas{width:15rem}
}

/* ---------- Retrato (móvil y tablet vertical) ----------
   Arriba, el video COMPLETO en un cuadro 16:9 (sin recortes); debajo, el copy
   y las piezas animadas de cada capítulo. (Antes el video iba recortado en una
   banda abajo y el texto encima; decisión del dueño 2026-09-29.) */
@media (max-aspect-ratio:1/1){
  .cine{--gx:1.25rem;--gb:clamp(1rem,3vh,1.8rem);--mt:calc(var(--nav-h) + .35rem);--mh:calc((100vw - 1.5rem) * 9 / 16)}
  .js .cine__media{
    top:var(--mt);left:.75rem;right:.75rem;bottom:auto;height:auto;aspect-ratio:16/9;
    border-radius:20px;overflow:hidden;background:#fff;transform-origin:50% 0;
    -webkit-mask-image:none;mask-image:none;
    box-shadow:0 18px 40px -26px rgba(46,42,48,.45);
  }
  .js .cine__img,.cine__vid{object-position:50% 50%}
  /* Cada capítulo es una columna debajo del cuadro del video; el CTA baja al final */
  .js .cap{display:flex;flex-direction:column;align-items:flex-start;padding:calc(var(--mt) + var(--mh) + 1.1rem) var(--gx) var(--gb)}
  .js .cap > *,.js .cap--01 .hero__eyebrow,.js .hero__a,.js .hero__b,.js .hero__lead,.js .hero__cue,
  .js .cap .cap__box,.js .cap__aside,.js .capas,.js .fotos{position:static;left:auto;right:auto;top:auto;bottom:auto;width:auto;max-width:none;height:auto;transform:none;text-align:left}
  .js .cap__veil,.js .cine__hud,.js .capas{display:none}
  .js .hero__eyebrow{font-size:.66rem;letter-spacing:.1em}
  .js .hero__title{margin-top:.6rem;width:100%;font-size:min(11vw,5.6vh)}
  .js .hero__b{text-align:left}
  .js .hero__lead{margin-top:1rem}
  .js .hero__tag{display:none}
  .js .hero__text{margin-top:0;font-size:clamp(.95rem,4vw,1.08rem);max-width:32ch}
  .js .hero__cta{position:static;margin-top:auto;align-self:center;transform:none}
  .js .hero__cue{display:none}
  .cap__title,.js .cap--06 .cap__title,.js .cap--08 .cap__title{font-size:min(clamp(1.6rem,6.6vw,2.6rem),4.6vh)}
  .js .cap--09 .cap__title{font-size:min(10vw,5.4vh)}
  /* en el 04 la consola ya nombra las cinco variables: los chips sobran aquí */
  .js .cap--04 .cap__chips{display:none}
  .cbtn--hero{min-height:58px;padding:.95rem 2rem;font-size:1.12rem}
  .hero__cta .cround{width:58px;height:58px}
  .mixer{margin-top:.9rem;max-width:none;width:100%}
  .js .cap--05 .cap__box,.js .cap--06 .cap__box{text-align:left}
  .js .cap--05 .cap__text,.js .cap--06 .cap__text{margin-inline:0}
  .cap__text{font-size:clamp(1rem,4.2vw,1.15rem);margin-top:.7rem}
  .js .cap__aside{margin-top:1rem;max-width:30ch}
  .cap__chips,.js .perfiles{margin-top:.9rem;gap:.4rem}
  .cap__chips li{padding:.45rem .8rem .45rem .68rem;font-size:.86rem}
  .perfiles a{padding:.6rem 1rem .6rem .7rem;font-size:.98rem;gap:.5rem}
  .perfiles a span{min-width:1.8rem;height:1.8rem;font-size:.72rem}
  .js .perfiles{position:static;display:flex;flex-wrap:wrap;pointer-events:auto}
  .js .perfiles li{position:static;transform:none}
  .js .perfiles li::before{display:none}
  .scan,.check,.barras,.anios{margin-top:.9rem;max-width:none;width:100%}
  .scan{padding:.8rem 1rem}
  .scan__list li,.check li{font-size:.92rem}
  .scan__list small{font-size:.78rem}
  .check{padding:.3rem 1rem}
  .check li{padding:.55rem 0}
  .barras{padding:.85rem 1rem}
  .barras li{grid-template-columns:5.4rem 1fr auto;font-size:.86rem}
  .anios{padding:.85rem 1rem}
  .anios__n span{font-size:3.4rem}
  .anios__t{font-size:1rem}
  /* fotos en fila sobre el reflejo, sin deriva */
  .js .cap--08 .fotos{display:flex;justify-content:center;align-self:stretch;margin-top:auto;margin-bottom:1vh;gap:.5rem}
  .js .fotos li:nth-child(n){position:relative;left:auto;right:auto;top:auto;width:28vw;max-width:150px}
  .js .fotos.seq > li:nth-child(n){translate:0 24px}
  .js .fotos.seq > li:nth-child(n).is-on{translate:0 0}
  .js .fotos li:nth-child(1){rotate:-5deg}
  .js .fotos li:nth-child(2){rotate:3deg;top:-10px}
  .js .fotos li:nth-child(3){rotate:-3deg}
}
/* Retrato con poca altura (iPhone SE y similares): solo lo esencial bajo el video */
@media (max-aspect-ratio:1/1) and (max-height:720px){
  .js .hero__text{display:none}
  .js .cap--08 .fotos{display:none}
  .mixer i{height:56px}
  .mixer{padding:.7rem .9rem .8rem}
  .anios{padding:.7rem .9rem}
  .anios__n span{font-size:2.8rem}
}
@media (max-aspect-ratio:1/1) and (min-width:700px){
  .cine{--gx:8%}
  .js .hero__title{font-size:min(9vw,5.4vh)}
  .cap__title,.js .cap--06 .cap__title,.js .cap--08 .cap__title{font-size:min(clamp(2.2rem,5.2vw,3.4rem),4.4vh)}
  .scan,.check,.barras,.anios{max-width:34rem}
}

/* Movimiento reducido: el copy aparece sin desplazamiento, fundidos cortos */
@media (prefers-reduced-motion:reduce){
  .js .cap__h,.js .cap__b,.js .cap__c,.js .seq > *{translate:none !important;scale:none !important;transition:opacity .3s linear !important;transition-delay:0s !important}
  .split .wi{translate:none !important;transition:none !important}
  .js .hero__scroll i::after,.js .hero__cue::before,.cbtn--primary::after,.orb,.scan__head i::after,.espera i,.hero__eyebrow::before{animation:none}
  mark{transition:none !important;background-size:100% 74% !important}
  .mixer i::before,.mixer s{animation:none !important}
}

/* ===================================================================
   SECCIONES POSTERIORES — superficies claras con luz de marca y vidrio
   =================================================================== */
.hsec{position:relative;z-index:2;background:#fff;padding:clamp(4.5rem,9vw,8rem) 0;overflow:hidden}
.hsec__wrap{position:relative;z-index:1;width:min(100% - 2.5rem,1200px);margin-inline:auto}
.hsec__wrap--narrow{width:min(100% - 2.5rem,860px)}
.hsec__head{max-width:780px}
.hsec h2{font-family:var(--f-head);font-weight:700;color:var(--c-green);font-size:clamp(2.1rem,1.25rem + 2.7vw,3.7rem);line-height:1.05;letter-spacing:-.036em;text-wrap:balance}
.hsec__head > p:not(.kick){margin-top:1.1rem;font-size:clamp(1.02rem,.95rem + .3vw,1.18rem);line-height:1.6;max-width:56ch}
.kick{display:inline-flex;align-items:center;gap:.6rem;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-ink);margin-bottom:1rem}
.kick::before{content:"";width:22px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--c-green),var(--c-yellow))}
/* luz de marca detrás del vidrio: sin ella el vidrio no tiene qué refractar */
.quien,.pasos{background:
  radial-gradient(42% 46% at 6% 8%,rgba(111,170,49,.13),rgba(111,170,49,0) 70%),
  radial-gradient(36% 40% at 96% 18%,rgba(241,195,0,.14),rgba(241,195,0,0) 70%),
  radial-gradient(46% 50% at 70% 100%,rgba(180,195,207,.28),rgba(180,195,207,0) 70%),#fff}
.prueba,.faq2{background:
  radial-gradient(44% 50% at 92% 12%,rgba(111,170,49,.14),rgba(111,170,49,0) 70%),
  radial-gradient(40% 44% at 4% 90%,rgba(241,195,0,.16),rgba(241,195,0,0) 70%),
  radial-gradient(50% 60% at 40% 40%,rgba(180,195,207,.22),rgba(180,195,207,0) 70%),#F8F9F7}
.codigo2{background:
  radial-gradient(40% 50% at 100% 50%,rgba(111,170,49,.14),rgba(111,170,49,0) 70%),
  radial-gradient(34% 40% at 0% 0%,rgba(241,195,0,.12),rgba(241,195,0,0) 70%),#fff}

/* La primera sección entra sobre el final de la experiencia: fundido a blanco */
.cine + .hsec::before{content:"";position:absolute;left:0;right:0;top:0;height:140px;background:linear-gradient(to bottom,#fff,rgba(255,255,255,0));pointer-events:none;z-index:0}

/* ---------- Para quién ---------- */
.quien__grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:3rem}
.quien__card{
  display:flex;flex-direction:column;gap:.55rem;min-height:280px;padding:1.5rem 1.45rem 1.4rem;border-radius:28px;
  transition:transform .35s var(--e-spring),box-shadow .35s var(--e-out);
}
.quien__card:hover{transform:translateY(-6px);box-shadow:inset 0 1px 1px #fff,0 30px 50px -28px rgba(92,148,38,.55)}
.quien__ico{display:grid;place-items:center;width:58px;height:58px;margin-bottom:.6rem;border-radius:50%;color:var(--c-green);
  background:radial-gradient(circle at 32% 28%,#fff 0 12%,rgba(255,255,255,.6) 40%,rgba(111,170,49,.14) 100%);
  border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 -6px 12px rgba(111,170,49,.18),0 10px 20px -12px rgba(92,148,38,.6);transition:transform .4s var(--e-spring)}
.quien__ico .ico{width:30px;height:30px;stroke:currentColor}
.quien__card:hover .quien__ico{transform:rotate(-8deg) scale(1.08)}
.quien__card:nth-child(2) .quien__ico{color:#C99A00;background:radial-gradient(circle at 32% 28%,#fff 0 12%,rgba(255,255,255,.6) 40%,rgba(241,195,0,.2) 100%)}
.quien__card:nth-child(3) .quien__ico{color:#6D8292;background:radial-gradient(circle at 32% 28%,#fff 0 12%,rgba(255,255,255,.6) 40%,rgba(180,195,207,.35) 100%)}
.quien__tag{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-muted)}
.quien__card h3{font-size:1.42rem;font-weight:750;letter-spacing:-.022em;color:var(--c-ink);line-height:1.15}
.quien__card p{flex:1;font-size:.95rem;line-height:1.55}
.quien__more{display:inline-flex;align-items:center;gap:.4rem;margin-top:.6rem;font-weight:700;font-size:.93rem;color:var(--c-ink)}
.quien__more .ico{width:1em;height:1em;color:var(--c-green);transition:transform .25s var(--e-out)}
.quien__card:hover .quien__more .ico{transform:translateX(4px)}
.quien__links{position:relative;z-index:1;margin-top:2.2rem;font-size:.97rem;max-width:70ch}
.quien__links a,.faq2__more a,.codigo2__main a{color:var(--c-ink);font-weight:650;text-decoration:underline;text-decoration-color:var(--c-green);text-decoration-thickness:2px;text-underline-offset:3px}

/* ---------- Prueba humana ---------- */
.prueba__grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.prueba h2{font-size:clamp(2rem,1.2rem + 2.2vw,3.2rem)}
.prueba__copy p:not(.kick):not(.prueba__office):not(.anios__n):not(.anios__t){margin-top:1.1rem;font-size:1.08rem;line-height:1.6;max-width:44ch}
.prueba__anios{display:inline-grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:center;margin-top:1.6rem;padding:.9rem 1.3rem .95rem 1.1rem;border-radius:24px;max-width:24rem}
.prueba__anios .anios__n{grid-row:auto}
.prueba__office{display:flex;gap:.7rem;align-items:flex-start;margin:1.6rem 0 1.4rem;padding-top:1.4rem;border-top:1px solid var(--c-line);font-size:.95rem;line-height:1.5}
.prueba__office .ico{width:1.2rem;height:1.2rem;color:var(--c-green);margin-top:.15rem}
.prueba__office strong{display:block;color:var(--c-ink)}
.prueba__fotos{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:.9rem}
.pf{position:relative;z-index:1;overflow:hidden;padding:7px;border-radius:26px}
.pf img{width:100%;height:100%;object-fit:cover;border-radius:20px;transition:transform .7s var(--e-out)}
.pf--a{grid-column:1 / -1;aspect-ratio:16/9}
.pf--b,.pf--c{aspect-ratio:1/1}
.pf--b img{object-position:50% 40%}
.pf--c img{object-position:50% 30%}
.prueba__fotos:hover .pf img{transform:scale(1.03)}

/* ---------- Cómo funciona ---------- */
.pasos__list{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:3.4rem;padding-top:2.4rem;counter-reset:paso}
.pasos__list::before,.pasos__list::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px}
.pasos__list::before{background:rgba(46,42,48,.08)}
.pasos__list::after{background:linear-gradient(90deg,var(--c-green),var(--c-yellow));transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--e-out)}
.pasos.is-in .pasos__list::after{transform:scaleX(1)}
.paso{padding:1.5rem 1.4rem 1.4rem;border-radius:26px}
.paso::before{content:"";position:absolute;left:1.4rem;top:calc(-2.4rem - 6px);width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #D3D1D5;transition:border-color .3s,background-color .3s,transform .4s var(--e-spring)}
.pasos.is-in .paso::before{border-color:var(--c-green);background:var(--c-green);transform:scale(1.15)}
.pasos.is-in .paso:nth-child(2)::before{transition-delay:.4s}
.pasos.is-in .paso:nth-child(3)::before{transition-delay:.8s;border-color:var(--c-yellow);background:var(--c-yellow)}
.pasos.is-in .paso:nth-child(4)::before{transition-delay:1.2s;border-color:var(--c-yellow);background:var(--c-yellow)}
.paso__n{font-size:2.4rem;font-weight:750;letter-spacing:-.05em;line-height:1;color:var(--c-green)}
.paso h3{margin-top:.7rem;font-size:1.3rem;font-weight:750;letter-spacing:-.018em;color:var(--c-ink)}
.paso p{margin-top:.55rem;font-size:.97rem;line-height:1.6}
.paso small{display:inline-block;margin-top:.9rem;font-size:.8rem;font-weight:700;color:var(--c-ink);padding:.3rem .75rem;border-radius:999px;background:rgba(241,195,0,.28)}

/* ---------- Código CrediAyudarte ---------- */
.codigo2__grid{display:grid;grid-template-columns:6fr 4fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.codigo2 h2{font-size:clamp(2.4rem,1.3rem + 3.4vw,4.4rem)}
.codigo2__main p:not(.kick){margin-top:1.3rem;font-size:1.06rem;line-height:1.65;max-width:58ch}
.codigo2__main strong{color:var(--c-ink);font-weight:700}
.codigo2__list{margin-top:.4rem;padding:.4rem 1.5rem;border-radius:28px}
.codigo2__list li{padding:1.3rem 0;border-bottom:1px solid rgba(46,42,48,.08);font-size:clamp(1.15rem,1rem + .5vw,1.4rem);line-height:1.3;font-weight:700;letter-spacing:-.012em;color:var(--c-ink);display:flex;gap:.9rem;align-items:baseline}
.codigo2__list li:last-child{border-bottom:0}
.codigo2__list li::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--c-green);box-shadow:0 0 0 4px rgba(111,170,49,.16);transform:translateY(-2px)}
.codigo2__list li:last-child{color:var(--c-green)}
.codigo2__list li:last-child::before{background:var(--c-yellow);box-shadow:0 0 0 4px rgba(241,195,0,.22)}

/* ---------- Preguntas (acordeón accesible) ---------- */
.faq2 .faq-pages{margin-top:2.6rem;padding:.6rem clamp(1rem,2.4vw,1.8rem) 1.4rem;border-radius:30px}
.faq2 .faq{display:block;gap:0}
.faq2 .faq[hidden]{display:none}
.acc__item{border-bottom:1px solid rgba(46,42,48,.08)}
.acc__h{font-size:inherit;font-weight:inherit;letter-spacing:0;line-height:inherit}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  padding:1.25rem .2rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--f-head);font-size:clamp(1.02rem,.96rem + .25vw,1.14rem);font-weight:650;color:var(--c-ink);line-height:1.4;
}
.acc__btn:hover{color:var(--c-green)}
.acc__ico{position:relative;flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(46,42,48,.18);background:rgba(255,255,255,.6);transition:border-color .25s,background-color .25s,transform .35s var(--e-spring)}
.acc__ico::before,.acc__ico::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;border-radius:2px;background:var(--c-green);transform:translate(-50%,-50%);transition:transform .3s var(--e-out)}
.acc__ico::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc__item.is-open .acc__ico{border-color:var(--c-green);background:var(--c-green);transform:rotate(180deg)}
.acc__item.is-open .acc__ico::before,.acc__item.is-open .acc__ico::after{background:#fff}
.acc__item.is-open .acc__ico::after{transform:translate(-50%,-50%) rotate(0deg)}
.acc__inner{padding:0 .2rem}
.acc__inner > :last-child{padding-bottom:1.35rem}
.acc__inner p{font-size:1rem;line-height:1.65;max-width:68ch}
/* Con JS: paneles cerrados con altura animada; sin JS quedan abiertos */
.acc-on .acc__panel{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .38s var(--e-out),visibility 0s .38s}
.acc-on .acc__item.is-open .acc__panel{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .38s var(--e-out),visibility 0s}
.acc-on .acc__inner{overflow:hidden;min-height:0}
.faq2 .pager{margin-top:1.6rem}
.faq2 .pager__num.is-active{background:var(--c-green);border-color:var(--c-green)}
.faq2__more{margin-top:2.2rem;font-size:.97rem;line-height:1.6}

/* ---------- CTA final ---------- */
.cfinal{position:relative;z-index:2;overflow:hidden;color:#fff;text-align:center;padding:clamp(5rem,11vw,9rem) 0;
  background:radial-gradient(60% 80% at 50% 0%,#8CCB4C 0%,rgba(140,203,76,0) 70%),linear-gradient(160deg,#7AB83A 0%,var(--c-green) 50%,var(--c-green-lo) 100%)}
.cfinal__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.cfinal h2{color:#fff;font-size:clamp(2.5rem,1.4rem + 3.8vw,5.2rem);font-weight:750;letter-spacing:-.04em;line-height:1.02;text-shadow:0 2px 20px rgba(40,70,10,.25)}
.cfinal h2 mark{color:var(--c-ink);text-shadow:none}
.cfinal p{margin-top:1.2rem;max-width:46ch;font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);line-height:1.55;color:#fff;text-shadow:0 1px 8px rgba(40,70,10,.3)}
.cfinal .cbtn{margin-top:2.2rem}
.cfinal :focus-visible{outline-color:#fff}

/* ---------- Footer y WhatsApp en la Home ---------- */
body.home .footer{position:relative;z-index:2}
body.home .wa-float{transition:transform .25s var(--e-out),opacity .3s var(--e-soft),visibility 0s}
body.home .wa-float.is-hidden{opacity:0;visibility:hidden;transform:scale(.85);transition:transform .25s var(--e-out),opacity .3s var(--e-soft),visibility 0s .3s}

/* ---------- Responsive secciones ---------- */
@media (max-width:1080px){
  .quien__grid{grid-template-columns:repeat(2,1fr)}
  .pasos__list{grid-template-columns:repeat(2,1fr);row-gap:1.1rem}
}
@media (max-width:860px){
  .prueba__grid,.codigo2__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .quien__grid{grid-template-columns:1fr}
  .quien__card{min-height:0}
  .pasos__list{grid-template-columns:1fr;padding-top:0;padding-left:1.8rem;gap:1rem;margin-top:2.6rem}
  .pasos__list::before,.pasos__list::after{left:5px;right:auto;top:0;bottom:0;width:3px;height:auto}
  .pasos__list::after{transform:scaleY(0);transform-origin:top}
  .pasos.is-in .pasos__list::after{transform:scaleY(1)}
  .paso::before{left:calc(-1.8rem - 0px);top:1.6rem}
  .prueba__fotos{gap:.6rem}
  .pf{border-radius:20px;padding:5px}
  .pf img{border-radius:15px}
  .orb{scale:.7}
}

/* ===================================================================
   TITULARES CON LA FUENTE DE LA MARCA
   Archivo pesada, ancha y en mayúsculas (la de las piezas de CrediAyudarte),
   en el verde del logo con la frase clave en marcador amarillo.
   =================================================================== */
body.home .hero__title,body.home .cap__title,body.home .hsec h2,body.home .cfinal h2{
  font-family:var(--f-display);font-weight:800;font-variation-settings:"wdth" 108;
  text-transform:uppercase;letter-spacing:-.018em;word-spacing:normal;line-height:.95;
}
body.home .hsec h2{font-size:clamp(1.9rem,1.1rem + 2.3vw,3.3rem)}
body.home .cfinal h2{font-size:clamp(2.2rem,1.2rem + 3.2vw,4.6rem)}
/* el marcador abraza las mayúsculas (no hay descendentes que cubrir) */
body.home .hero__title mark,body.home .cap__title mark,body.home .hsec h2 mark,body.home .cfinal h2 mark{background-position:0 58%;background-size:100% 82%;padding:0 .08em}
body.home .js .cap mark{background-size:0% 82%}
body.home .js .cap.is-h mark{background-size:100% 82%}
body.home .reveal mark{background-size:0% 82%}
body.home .reveal.is-visible mark{background-size:100% 82%}

/* ===================================================================
   04 · CONSOLA DE VARIABLES (motion graphic)
   Cinco reguladores de vidrio que suben y bajan desfasados: al mover
   uno, se mueven los demás. Solo corre con el capítulo en pantalla.
   =================================================================== */
.mixer{margin-top:1.4rem;max-width:30rem;padding:1rem 1.2rem 1.1rem;border-radius:24px}
.mixer figcaption{font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-ink)}
.mixer figcaption b{font-weight:800;color:var(--c-green-lo)}
.mixer ul{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-top:1rem}
.mixer li{display:flex;flex-direction:column;align-items:center;gap:.6rem}
.mixer i{position:relative;display:block;width:10px;height:clamp(78px,12vh,124px);border-radius:10px;background:rgba(46,42,48,.08);box-shadow:inset 0 1px 2px rgba(46,42,48,.14)}
/* relleno: crece desde abajo (scaleY) al ritmo de la perilla */
.mixer i::before{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:bottom;transform:scaleY(.4);
  background:linear-gradient(to top,var(--c),rgba(255,255,255,.7));animation:mixF 4.2s var(--e-soft) var(--d) infinite}
/* perilla: capa del alto del riel que sube un % de su propio alto */
.mixer s{position:absolute;inset:0;text-decoration:none;transform:translateY(-40%);animation:mixK 4.2s var(--e-soft) var(--d) infinite}
.mixer s::before{content:"";position:absolute;left:50%;bottom:-13px;width:26px;height:26px;margin-left:-13px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff 0 14%,rgba(255,255,255,.75) 34%,var(--c) 100%);
  border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 -4px 8px rgba(46,42,48,.18),0 6px 14px -6px rgba(46,42,48,.55)}
.mixer span{font-size:.74rem;font-weight:700;line-height:1.2;color:var(--c-ink);text-align:center}
@keyframes mixK{0%,100%{transform:translateY(-22%)}30%{transform:translateY(-80%)}62%{transform:translateY(-44%)}}
@keyframes mixF{0%,100%{transform:scaleY(.22)}30%{transform:scaleY(.8)}62%{transform:scaleY(.44)}}
.js .cap:not(.is-act) .mixer i::before,.js .cap:not(.is-act) .mixer s{animation-play-state:paused}

/* ===================================================================
   ÍNDICE NUMERADO DE SECCIONES (js/home.js)
   Fijo a la derecha durante todo el scroll. Siempre se ven los números
   y el nombre de la sección actual; al pasar el cursor, todos.
   =================================================================== */
/* un poco por encima del centro: así no cae sobre los rótulos de los pedestales (06, al 72 % del alto) */
.snav{position:fixed;right:clamp(.6rem,1.3vw,1.3rem);top:calc(50% - 3rem);transform:translateY(-50%);z-index:55}
.snav__list{display:flex;flex-direction:column;gap:1px;margin:0;padding:.4rem;border-radius:22px;list-style:none}
.snav__list li:nth-child(9){margin-bottom:.25rem;padding-bottom:.25rem;border-bottom:1px solid rgba(46,42,48,.1)}
.snav__list a{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;min-height:22px;padding:.08rem .45rem;border-radius:12px;
  font-size:.8rem;font-weight:600;color:var(--c-muted);text-decoration:none;transition:background .2s var(--e-soft),color .2s var(--e-soft)}
.snav__list b{min-width:1.4em;text-align:right;font-size:.72rem;font-weight:800;font-variant-numeric:tabular-nums;color:rgba(46,42,48,.42);transition:color .2s var(--e-soft)}
.snav__t{max-width:0;opacity:0;overflow:hidden;white-space:nowrap;transition:max-width .35s var(--e-out),opacity .25s var(--e-soft)}
.snav:hover .snav__t,.snav:focus-within .snav__t,.snav__list a.is-active .snav__t{max-width:11rem;opacity:1}
.snav__list a:hover{background:rgba(111,170,49,.12);color:var(--c-ink)}
.snav__list a:hover b{color:var(--c-green-lo)}
.snav__list a.is-active{color:var(--c-ink);font-weight:700}
.snav__list a.is-active b{color:#9A7A00}
.snav__list a.is-active::before{content:"";width:3px;height:14px;border-radius:3px;background:var(--c-green)}
/* en pantallas medianas solo se ve el número activo (el nombre invadía el contenido); todos al pasar el cursor */
@media (max-width:1499px){
  .snav__list a.is-active .snav__t{max-width:0;opacity:0}
  .snav:hover .snav__t,.snav:focus-within .snav__t{max-width:11rem;opacity:1}
}
@media (max-width:920px){.snav{display:none}}

/* En teléfono el índice vive dentro del menú de la cápsula (siempre a mano) */
.cnav__secs{display:none}
@media (max-width:920px){
  .cnav__links{max-height:calc(100svh - var(--nav-h) - 1rem);overflow:auto;overscroll-behavior:contain}
  .cnav__links:has(.cnav__secs) > a{display:none}
  /* el vidrio anidado no desenfoca lo de atrás (lo impide el vidrio de la cápsula): fondo casi opaco */
  .cnav__links:has(.cnav__secs){background:rgba(255,255,255,.97)}
  .cnav__secs{display:block}
  .cnav__secs p{padding:.5rem .6rem .35rem;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
  .cnav__secs ol{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0;padding:0;list-style:none}
  .cnav__secs a{display:flex;align-items:center;gap:.55rem;min-height:44px;padding:.4rem .6rem;border-radius:14px;font-size:.93rem;font-weight:600;color:var(--c-ink)}
  .cnav__secs a b{order:-1;min-width:1.9rem;height:1.9rem;display:inline-grid;place-items:center;border-radius:999px;font-size:.72rem;font-weight:800;background:rgba(46,42,48,.07)}
  .cnav__secs a.is-active{background:rgba(111,170,49,.12)}
  .cnav__secs a.is-active b{background:var(--c-yellow)}
  .cnav__secs .snav__t{max-width:none;opacity:1;overflow:visible}
}

/* ===================================================================
   RECORRIDO AUTOMÁTICO (js/tour.js)
   Botón grande bajo el titular del hero y un control flotante mientras
   corre. Objetivos táctiles de 48px+ y textos visibles (no solo íconos):
   el público es mayor.
   =================================================================== */
.tour-btn{display:none}
.tour-on .tour-btn{
  display:inline-flex;align-items:center;gap:.85rem;min-height:62px;padding:.55rem 1.4rem .55rem .55rem;
  border-radius:999px;cursor:pointer;text-align:left;color:var(--c-ink);font:inherit;
  transition:transform .25s var(--e-spring),box-shadow .25s var(--e-out);
}
.tour-btn.lg{background:linear-gradient(160deg,rgba(255,255,255,.96),rgba(255,255,255,.8))}
.tour-btn:hover{transform:translateY(-2px) scale(1.02)}
.tour-btn:active{transform:scale(.98)}
.tour-btn__ico{
  flex:none;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;
  background:linear-gradient(180deg,#8CCB4C 0%,var(--c-green) 55%,var(--c-green-lo) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 0 0 0 rgba(111,170,49,.45);
  animation:tourPulse 2.6s var(--e-soft) infinite;
}
.tour-btn__ico svg{width:22px;height:22px;fill:#fff;margin-left:3px}
@keyframes tourPulse{0%,100%{box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 0 0 0 rgba(111,170,49,.45)}60%{box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 0 0 12px rgba(111,170,49,0)}}
.tour-btn__txt{display:flex;flex-direction:column;line-height:1.2}
.tour-btn__txt b{font-size:1.08rem;font-weight:750;letter-spacing:-.01em}
.tour-btn__txt small{margin-top:.2rem;font-size:.86rem;color:var(--c-muted)}
/* mientras corre, el botón del hero no invita de nuevo */
.tour-running .tour-btn__ico{animation:none}

/* Control flotante: abajo al centro, por encima del CTA del hero */
.tour{
  position:fixed;left:50%;bottom:calc(clamp(1.5rem,5.5vh,3.4rem) + 84px);z-index:58;
  width:min(100% - 2rem,520px);transform:translate(-50%,16px);opacity:0;pointer-events:none;
  transition:opacity .3s var(--e-soft),transform .45s var(--e-spring);
}
.tour[hidden]{display:none}
.tour.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.tour__in{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:999px}
.tour__in.lg{background:linear-gradient(160deg,rgba(255,255,255,.97),rgba(255,255,255,.86))}
.tour__play{
  flex:none;display:inline-flex;align-items:center;gap:.5rem;min-height:50px;padding:0 1.2rem 0 1rem;
  border:0;border-radius:999px;cursor:pointer;font:inherit;font-weight:700;font-size:1rem;color:#fff;
  background:linear-gradient(180deg,#8CCB4C 0%,var(--c-green) 52%,var(--c-green-lo) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.6),0 10px 22px -12px rgba(92,148,38,.8);
  text-shadow:0 1px 1px rgba(40,70,10,.45);
}
.tour__play:hover{filter:brightness(1.05)}
.tour__i{width:20px;height:20px;fill:#fff}
.tour__i--play{display:none}
.tour.is-paused .tour__i--play{display:block}
.tour.is-paused .tour__i--pause{display:none}
.tour__info{flex:1;min-width:0}
.tour__now{font-size:1rem;line-height:1.25;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tour__now b{font-weight:750}
.tour__now span{color:var(--c-muted);font-weight:500}
.tour__bar{display:block;height:6px;margin-top:.4rem;border-radius:6px;background:rgba(46,42,48,.1);overflow:hidden}
.tour__bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--c-green),var(--c-yellow));transform-origin:left;transform:scaleX(0)}
.tour__close{
  flex:none;display:grid;place-items:center;width:50px;height:50px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(46,42,48,.08);color:var(--c-ink);transition:background .2s var(--e-soft);
}
.tour__close:hover{background:rgba(46,42,48,.14)}
.tour__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.tour :focus-visible{outline:3px solid var(--c-green);outline-offset:3px}

/* En escritorio el control se acomoda DENTRO de la cápsula de navegación: es la
   única franja donde ningún capítulo pone texto (abajo tapaba titulares como
   "Lo primero que ves no es todo"). Mientras corre se ocultan los enlaces del
   menú; el logo y "Solicita tu análisis" siguen a la vista. */
@media (min-width:921px){
  .tour{top:calc(var(--nav-h) / 2);bottom:auto;z-index:61;width:min(100% - 30rem,560px);transform:translate(-50%,-50%) translateY(-10px)}
  .tour.is-on{transform:translate(-50%,-50%)}
  .tour__in{padding:.3rem;box-shadow:inset 0 1px 1px #fff,0 8px 22px -14px rgba(46,42,48,.45)}
  .tour__play,.tour__close{min-height:48px}
  .tour__close{width:48px;height:48px}
  .tour-running .cnav__links,.tour-running .cnav__tel{visibility:hidden}
}
@media (max-aspect-ratio:1/1){
  .js .tour-btn{margin-top:1.1rem;align-self:stretch}
}
@media (max-width:920px){
  .tour{bottom:calc(clamp(1rem,3vh,1.8rem) + 76px)}
}
@media (max-width:480px){
  .tour__in{gap:.5rem}
  .tour__play{padding:0 1rem 0 .85rem}
  .tour__now{font-size:.94rem}
}
@media (prefers-reduced-motion:reduce){
  .tour-btn__ico{animation:none}
  .tour{transition:opacity .2s linear}
}