/* AfinidApp · página web · estilos
   Manual de identidad: arena #f8f4ed, crema #f3f5f1, verde profundo #1f6b55, ámbar #b7791f, carbón cálido #2b2621.
   Nunito para títulos, IBM Plex Sans para textos. Celular primero. */
:root{
  --arena:#f8f4ed; --arena-2:#f1ebdf; --crema:#f3f5f1; --linea:#dcd2c2;
  --verde:#1f6b55; --verde-2:#2f8f72; --verde-suave:#dfe9e3;
  --ambar:#b7791f; --ambar-oscuro:#8a5a17; --ambar-suave:#f3e6cf;
  --carbon:#2b2621; --tinta:#2b2621; --gris:#6f675f; --tierra:#4a4038; --tierra-oscura:#2b2621;
  --f-t:"Nunito","Segoe UI",system-ui,sans-serif; --f-c:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --radio:16px; --max:1180px; --gutter:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
html,body{overflow-x:clip;max-width:100%}
body{margin:0;background:var(--fondo,var(--arena));transition:background 1.2s ease;color:var(--tinta);font-family:var(--f-c);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-t);margin:0;line-height:1.12;letter-spacing:-.01em;text-wrap:pretty;overflow-wrap:break-word}
h1{text-wrap:balance}
h1{font-size:clamp(34px,7.2vw,68px);font-weight:800}
h2{font-size:clamp(28px,4.4vw,46px);font-weight:800}
h3{font-size:clamp(20px,2.4vw,26px);font-weight:700}
p{margin:0}
a{color:var(--ambar-oscuro)}
img,video,svg{max-width:100%;display:block}
.muted{color:var(--gris)}
.small{font-size:15px}
.tiny{font-size:13px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
:focus-visible{outline:3px solid var(--ambar);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 22px;border-radius:14px;font-family:var(--f-c);font-weight:600;font-size:16px;text-decoration:none;border:2px solid transparent;cursor:pointer;color:var(--carbon);transition:transform .2s cubic-bezier(.2,.8,.2,1),background .2s,box-shadow .2s;position:relative;overflow:hidden;text-align:center;line-height:1.25;padding-block:10px;max-width:100%}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-p{background:radial-gradient(120% 90% at 15% 0%,rgba(255,255,255,.22),transparent 55%),linear-gradient(118deg,#154a3b 0%,#1f6b55 38%,#2f8f72 72%,#4aab8c 100%);border-color:transparent;color:var(--crema);text-shadow:0 1px 1px rgba(0,0,0,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.2),0 8px 22px -12px rgba(31,107,85,.95);transition:transform .2s cubic-bezier(.2,.8,.2,1),filter .3s,box-shadow .3s}
.btn-p:hover{filter:brightness(1.07) saturate(1.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(0,0,0,.2),0 14px 30px -12px rgba(31,107,85,.9),0 0 0 4px rgba(183,121,31,.14)}
.btn-p:active{transform:scale(.985)}
.btn-p::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(248,244,237,.18) 50%,transparent 65%);transform:translateX(-120%);transition:transform .6s ease}
.btn-p:hover::after{transform:translateX(120%)}
.btn .fl{display:inline-block;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.btn:hover .fl{transform:translateX(4px)}
.btn-s{color:var(--verde);border-color:transparent;background:linear-gradient(135deg,var(--crema),#e9efe9) padding-box,linear-gradient(135deg,var(--verde) 0%,var(--verde-2) 45%,var(--ambar) 100%) border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.btn-s:hover{background:linear-gradient(var(--crema),var(--verde-suave)) padding-box,linear-gradient(135deg,var(--verde) 0%,var(--ambar) 100%) border-box;box-shadow:0 10px 24px -14px rgba(43,38,33,.4)}
.btn-v{background:var(--verde);color:var(--crema);border-color:var(--verde)}

/* Encabezado */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--fondo,var(--arena)) 88%,transparent);transition:background 1.2s ease;backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
@supports not (background:color-mix(in srgb,red 50%,blue)){.top{background:rgba(248,244,237,.94)}}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--carbon);min-width:0;white-space:nowrap}
.marca img,.marca svg{height:30px;width:auto;overflow:visible}
.marca b{font-family:var(--f-t);font-weight:800;font-size:20px}
.marca small{display:none;color:var(--gris);font-size:12px;margin-left:6px;overflow:hidden;text-overflow:ellipsis;max-width:34ch}
.nav{display:none;gap:22px;font-weight:500;font-size:15px;flex:none;white-space:nowrap}
.nav a{color:var(--carbon);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--verde)}
.top .btn{min-height:42px;padding:0 14px;font-size:14px;white-space:nowrap;flex:none}
.top .btn .l{display:none}
@media (min-width:600px){.top .btn .l{display:inline}}
@media (min-width:1000px){.nav{display:flex}.top .btn{min-height:46px;padding:0 18px;font-size:15px}}
@media (min-width:1400px){.marca small{display:inline-block}}

/* Intro de carga */
.intro{position:fixed;inset:0;z-index:100;background:var(--tierra-oscura);display:grid;place-items:center;transition:opacity .6s ease}
.intro.fuera{opacity:0;pointer-events:none}
.intro video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.intro .saltar{position:absolute;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2;background:rgba(43,38,33,.55);color:var(--arena);border:1px solid rgba(248,244,237,.5);border-radius:999px;padding:10px 16px;font:600 14px var(--f-c);cursor:pointer}
.intro.final{background:var(--arena)}

/* Indicador de capítulos */
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:20;display:none;flex-direction:column;gap:12px}
.rail a{width:10px;height:10px;border-radius:50%;background:var(--linea);display:block;border:0}
.rail a{transition:transform .25s,background .25s,box-shadow .25s}
.rail a:hover{transform:scale(1.4)}
.rail a[aria-current="true"]{background:linear-gradient(135deg,var(--verde-2),var(--ambar));box-shadow:0 0 0 4px var(--ambar-suave);transform:scale(1.25);animation:pulso .9s ease-out 1}
@keyframes pulso{0%{box-shadow:0 0 0 0 rgba(183,121,31,.55)}100%{box-shadow:0 0 0 10px rgba(183,121,31,0)}}
.barra{position:fixed;left:0;top:0;height:3px;width:0;background:linear-gradient(90deg,var(--verde),var(--verde-2) 60%,var(--ambar));z-index:40;transition:width .15s linear;box-shadow:0 0 10px rgba(183,121,31,.45)}
@media (min-width:900px){.rail{display:flex}.barra{display:none}}

/* Capítulos */
.cap{position:relative;padding:clamp(56px,9vw,120px) 0;border-top:1px solid var(--linea)}
.cap:first-of-type{border-top:0}
.cap .wrap{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
.cap .wrap>*,.fin .wrap>*{min-width:0}
.num{font-family:var(--f-t);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ambar-oscuro);display:flex;align-items:center;gap:10px}
.num::before{content:"";width:28px;height:2px;background:var(--ambar)}
.escena{position:relative;border-radius:var(--radio);overflow:hidden;background:var(--arena-2);border:1px solid var(--linea);aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end;padding:18px}
.escena .n{position:absolute;left:16px;top:6px;font-family:var(--f-t);font-weight:800;font-size:clamp(90px,22vw,160px);line-height:1;color:var(--linea);opacity:.7;user-select:none}
.escena .toma{position:relative;font-size:13.5px;color:var(--gris);font-style:italic;line-height:1.4;background:rgba(248,244,237,.86);border-radius:10px;padding:10px 12px}
.escena .toma b{display:block;font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ambar-oscuro);margin-bottom:4px}
.escena.oscura{background:linear-gradient(180deg,#3a3129 0%,#2b2621 100%)}
.escena.oscura .n{color:#4a4038}
.escena.cafe{background:linear-gradient(180deg,#6b5537 0%,#4a4038 100%)}
.escena.cafe .n{color:#8a6f4a}
.escena.noche{background:linear-gradient(180deg,#1d2b26 0%,#2b2621 100%)}
.escena.noche .n{color:#2f4a40}
.escena img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.texto{display:flex;flex-direction:column;gap:18px;max-width:60ch;min-width:0}
.lead{font-size:clamp(18px,2vw,21px);color:var(--gris)}
.acciones{display:flex;flex-direction:column;gap:10px;min-width:0}
.acciones .btn{width:100%}
@media (min-width:900px){.acciones .btn{width:auto}}
.aviso{font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px}
.aviso::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--verde);display:inline-block}
@media (min-width:900px){
  .cap .wrap{grid-template-columns:5fr 6fr;gap:clamp(40px,6vw,96px);align-items:start}
  .cap .escena{position:sticky;top:96px;aspect-ratio:4/5}
  .cap.inv .escena{order:2}
  .acciones{flex-direction:row;flex-wrap:wrap}
}

/* Tarjeta del próximo plan */
.plan{background:var(--crema);border:1px solid var(--linea);border-radius:var(--radio);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0;max-width:100%}
.plan h3{overflow-wrap:anywhere}
.plan .tag{align-self:flex-start;background:linear-gradient(135deg,var(--verde-suave),#efe3c9);color:var(--verde);font:800 13px var(--f-t);border-radius:999px;padding:5px 12px}
.datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;font-size:15.5px}
.datos b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gris);font-weight:600}
.pend{color:var(--ambar-oscuro)}
.cita{border-left:3px solid var(--ambar);padding:8px 14px;color:var(--gris);font-size:15px}

/* Listas y rejillas */
.pasos{display:grid;gap:14px;counter-reset:p}
.paso{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.paso i{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--verde),var(--verde-2));box-shadow:inset 0 1px 0 rgba(255,255,255,.2);color:var(--crema);display:grid;place-items:center;font:800 18px var(--f-t);font-style:normal}
.paso b{display:block;font-family:var(--f-t);font-size:18px;font-weight:700}
.bloques{display:grid;gap:12px}
.bloque{border-top:2px solid var(--verde);padding-top:12px}
.bloque b{font-family:var(--f-t);font-size:18px;display:block;margin-bottom:4px}
.grupos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grupo{background:var(--arena-2);border:1px solid var(--linea);border-radius:14px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:4px;align-items:center}
.grupo svg{width:28px;height:28px;stroke:var(--verde);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.grupo b{font-size:14px;font-weight:600}
.grupo span{font-size:11.5px;color:var(--ambar-oscuro);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.puntos{display:grid;gap:12px}
.punto{display:flex;gap:12px;align-items:flex-start;font-size:16.5px}
.punto::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--ambar);margin-top:10px}
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.video{aspect-ratio:9/16;border-radius:14px;background:var(--tierra);color:var(--arena);display:flex;flex-direction:column;justify-content:flex-end;padding:12px;text-decoration:none;font:600 13.5px/1.3 var(--f-c);position:relative;overflow:hidden}
.video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(43,38,33,.75))}
.video span{position:relative;z-index:1}
.video small{position:absolute;top:10px;left:10px;z-index:1;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.85}
.personas{display:grid;gap:14px}
.persona{display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:center}
.persona .foto{width:72px;height:72px;border-radius:50%;background:var(--arena-2);border:1px solid var(--linea);display:grid;place-items:center;font-size:10px;color:var(--gris);text-align:center;padding:6px}
.persona b{font-family:var(--f-t);font-size:18px;display:block}
.testis{display:grid;gap:10px}
.testi{border:1px dashed var(--linea);border-radius:14px;padding:16px;color:var(--gris);font-size:14px;min-height:88px;display:grid;place-items:center;text-align:center}
@media (min-width:700px){.testis{grid-template-columns:repeat(3,1fr)}.bloques{grid-template-columns:repeat(3,1fr)}.pasos{grid-template-columns:repeat(3,1fr)}.paso{grid-template-columns:1fr;gap:10px}}

/* Después del recorrido */
.fin{padding:clamp(56px,8vw,110px) 0;border-top:1px solid var(--linea)}
.fin .wrap{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.fin .wrap{grid-template-columns:4fr 7fr;gap:clamp(40px,6vw,96px);align-items:start}}
details{border-bottom:1px solid var(--linea)}
details summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px 0;font:700 17px var(--f-t)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font:400 24px var(--f-t);color:var(--ambar-oscuro);flex:none}
details[open] summary::after{content:"–"}
details p{padding:0 0 16px;color:var(--gris)}

/* Formulario */
.form{background:var(--crema);border:1px solid var(--linea);border-radius:var(--radio);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-size:14.5px;font-weight:600}
.campo input{min-height:50px;border:1.5px solid var(--linea);border-radius:12px;padding:0 14px;font:16px var(--f-c);background:var(--arena);color:var(--carbon);width:100%}
.campo input:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 4px rgba(47,143,114,.18),0 0 0 1px var(--verde)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 14px;border-radius:999px;border:1.5px solid var(--linea);background:var(--arena);font-size:15px;cursor:pointer}
.pill:has(input:checked){border-color:transparent;background:linear-gradient(var(--verde-suave),var(--verde-suave)) padding-box,linear-gradient(135deg,var(--verde),var(--ambar)) border-box;color:var(--verde);font-weight:600}
.pill input{width:16px;height:16px;accent-color:var(--verde);margin:0}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14.5px}
.chk input{width:22px;height:22px;flex:none;accent-color:var(--verde);margin:2px 0 0}
.msg{border-radius:12px;padding:12px 14px;font-size:15px;display:none}
.msg.ok{display:block;background:var(--verde-suave);color:var(--verde)}
.msg.err{display:block;background:var(--ambar-suave);color:var(--ambar-oscuro)}
.trampa{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* Pie */
footer{background:var(--carbon);color:var(--arena);padding:clamp(48px,7vw,80px) 0 calc(32px + env(safe-area-inset-bottom,0px))}
footer .wrap{display:grid;gap:28px}
footer a{color:var(--arena);text-decoration:none}
footer a:hover{color:var(--ambar)}
footer .lema{font-family:var(--f-t);font-weight:800;font-size:22px}
footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
footer .redes{display:flex;gap:14px;flex-wrap:wrap}
footer .redes a{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(248,244,237,.3);border-radius:999px;padding:8px 14px;font-size:14px}
footer .fino{font-size:13px;color:rgba(248,244,237,.6);border-top:1px solid rgba(248,244,237,.15);padding-top:16px}
@media (min-width:900px){footer .wrap{grid-template-columns:2fr 1fr 1fr 1fr}footer .fino{grid-column:1/-1}}

/* Aparición suave al desplazarse */
.rev{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.rev.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}}

/* Páginas de texto (políticas) */
.doc{max-width:72ch;margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter);display:flex;flex-direction:column;gap:16px}
.doc h1{font-size:clamp(30px,5vw,44px)}
.doc h2{font-size:22px;margin-top:12px}
.doc ol,.doc ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.doc .nota{background:var(--ambar-suave);border-radius:12px;padding:12px 14px;font-size:14.5px;color:var(--ambar-oscuro)}

/* ============ Motion graphics (solo transform y opacity; se apagan con "reducir movimiento") ============ */
/* Escena: luz ambiental que respira, número que flota, inclinación con el cursor, brillo que sigue al cursor */
.escena{max-width:100%;transform-style:preserve-3d;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--py,0px));transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;will-change:transform;box-shadow:0 18px 40px -28px rgba(43,38,33,.45)}
.escena::before{content:"";position:absolute;inset:-30%;background:radial-gradient(40% 40% at 30% 30%,rgba(183,121,31,.16),transparent 70%),radial-gradient(35% 35% at 70% 65%,rgba(47,143,114,.14),transparent 70%);animation:aurora 16s ease-in-out infinite alternate;pointer-events:none}
@keyframes aurora{0%{transform:translate3d(-4%,-3%,0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,4%,0) rotate(6deg) scale(1.08)}100%{transform:translate3d(5%,-4%,0) rotate(-4deg) scale(1.02)}}
.escena::after{content:"";position:absolute;inset:0;background:radial-gradient(220px 220px at var(--mx,50%) var(--my,50%),rgba(248,244,237,.14),transparent 60%);opacity:0;transition:opacity .4s;pointer-events:none}
.escena:hover{border-color:rgba(183,121,31,.6);box-shadow:0 28px 60px -30px rgba(43,38,33,.55)}
.escena:hover::after{opacity:1}
.escena .n{animation:flota 7s ease-in-out infinite;transform:translateY(var(--pn,0px))}
@keyframes flota{0%,100%{translate:0 0}50%{translate:0 -10px}}
.escena .toma{transform:translateY(var(--pt,0px));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.escena:hover .toma{box-shadow:0 12px 28px -14px rgba(43,38,33,.5)}
.escena .toma b::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ambar);margin-right:7px;vertical-align:1px;animation:parpadeo 2.4s ease-in-out infinite}
@keyframes parpadeo{0%,100%{opacity:.35}50%{opacity:1}}
@media (hover:none){.escena{transform:translateY(var(--py,0px))}}

/* Línea del capítulo que se dibuja y aparición escalonada de las tarjetas */
.num::before{transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.2,.8,.2,1) .15s}
.rev.on .num::before,.on .num::before{transform:scaleX(1)}
.rev > .pasos > *,.rev > .bloques > *,.rev > .grupos > *,.rev > .videos > *,.rev > .puntos > *,.rev > .testis > *,.rev > .personas > *,.rev .datos > *{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.08s * var(--i,0) + .15s)}
.rev.on > .pasos > *,.rev.on > .bloques > *,.rev.on > .grupos > *,.rev.on > .videos > *,.rev.on > .puntos > *,.rev.on > .testis > *,.rev.on > .personas > *,.rev.on .datos > *{opacity:1;transform:none}
/* Titular de portada: palabra por palabra */
h1 .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(1.5deg);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1);transition-delay:calc(.06s * var(--i,0))}
.on h1 .w{opacity:1;transform:none}

/* Tarjetas con respuesta al cursor */
.grupo,.video,.paso,.bloque,.persona,.testi{transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s,background .3s}
.grupo:hover{transform:translateY(-4px);border-color:var(--verde);background:var(--crema);box-shadow:0 14px 28px -18px rgba(43,38,33,.4)}
.grupo svg path,.grupo svg circle,.grupo svg rect{stroke-dasharray:80;stroke-dashoffset:0}
.grupo:hover svg path,.grupo:hover svg circle,.grupo:hover svg rect{animation:dibuja .9s ease}
@keyframes dibuja{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
.grupo svg{transition:transform .3s}
.grupo:hover svg{transform:scale(1.12)}
.video::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 30%,rgba(183,121,31,.35),transparent 70%);opacity:0;transition:opacity .4s;z-index:0}
.video:hover{transform:translateY(-4px) scale(1.02);box-shadow:0 18px 34px -18px rgba(43,38,33,.6)}
.video:hover::before{opacity:1}
.video .play{position:absolute;left:50%;top:42%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(248,244,237,.92);display:grid;place-items:center;z-index:1;transform:scale(.8);opacity:.85;transition:transform .3s cubic-bezier(.2,.8,.2,1),opacity .3s}
.video .play::after{content:"";border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent var(--verde);margin-left:3px}
.video:hover .play{transform:scale(1);opacity:1}
.paso i{transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s}
.paso:hover i{transform:rotate(-6deg) scale(1.08);background:var(--verde-2)}
.bloque:hover{border-top-color:var(--ambar)}
.punto::before{transition:transform .3s}
.punto:hover::before{transform:scale(1.5)}
.persona .foto{transition:transform .3s,border-color .3s}
.persona:hover .foto{border-color:var(--verde);transform:scale(1.04)}
details summary::after{transition:transform .3s}
details[open] summary::after{transform:rotate(180deg)}
.pill{transition:border-color .2s,background .2s,transform .2s}
.pill:hover{transform:translateY(-1px)}
.marca img,.marca svg{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.marca:hover img,.marca:hover svg{transform:rotate(-8deg) scale(1.08)}

/* Cinta que corre (debajo de la portada) */
.cinta{overflow:hidden;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--crema);padding:12px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta .pista{display:flex;gap:40px;width:max-content;animation:corre 38s linear infinite;font:800 14px var(--f-t);letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
.cinta:hover .pista{animation-play-state:paused}
.cinta span{display:inline-flex;align-items:center;gap:40px;white-space:nowrap}
.cinta span::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ambar)}
@keyframes corre{to{transform:translateX(-50%)}}

/* Reserva y gracias */
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--linea);padding-top:14px;font-size:16px}
.total b{font:800 24px var(--f-t);color:var(--verde)}
.pills.modo .pill b{font-weight:700;color:var(--verde)}
.latido{animation:latido 1.6s ease-in-out infinite}
@keyframes latido{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.8}}
@media (prefers-reduced-motion:reduce){.escena::before,.escena::after,.cinta .pista{animation:none}.escena{transform:none}h1 .w,.rev > * > *{opacity:1;transform:none}}

/* ============ Toques de experiencia ============ */
/* Enlaces del menú y del pie: subrayado que se dibuja */
.nav a,footer ul a{position:relative}
.nav a::after,footer ul a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--verde-2),var(--ambar));transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.nav a:hover::after,footer ul a:hover::after{transform:scaleX(1)}
/* Pista de "desliza" en la portada */
.desliza{display:inline-flex;align-items:center;gap:10px;font:600 13px var(--f-c);letter-spacing:.08em;text-transform:uppercase;color:var(--gris);margin-top:6px;transition:opacity .4s}
.desliza i{width:22px;height:34px;border:2px solid var(--linea);border-radius:12px;position:relative;display:inline-block}
.desliza i::before{content:"";position:absolute;left:50%;top:6px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:linear-gradient(var(--verde-2),var(--ambar));animation:rueda 1.6s ease-in-out infinite}
@keyframes rueda{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{transform:translateY(0);opacity:0}}
.desliza.ya{opacity:0}
/* Chulo que se dibuja en el mensaje de éxito */
.msg.ok{display:flex;gap:10px;align-items:flex-start}
.msg .chulo{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--verde),var(--verde-2));display:grid;place-items:center;animation:brota .4s cubic-bezier(.2,.8,.2,1)}
.msg .chulo svg{width:14px;height:14px;fill:none;stroke:var(--crema);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:traza .5s ease .2s forwards}
@keyframes traza{to{stroke-dashoffset:0}}
@keyframes brota{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
/* Selección de texto y foco con la marca */
::selection{background:rgba(183,121,31,.28)}
/* Botones magnéticos (solo con mouse; el JS mueve --mxb/--myb) */
@media (hover:hover) and (pointer:fine){.btn{translate:var(--mxb,0px) var(--myb,0px)}}

/* ============ Tono de fondo por capítulo ============ */
body[data-tono="inicio"]{--fondo:#f8f4ed}
body[data-tono="plan"]{--fondo:#f7f1e4}
body[data-tono="como"]{--fondo:#f3f5f1}
body[data-tono="aprende"]{--fondo:#eef3ee}
body[data-tono="grupos"]{--fondo:#f4f3ea}
body[data-tono="nosotros"]{--fondo:#f3ede1}
body[data-tono="fin"]{--fondo:#f8f4ed}

/* ============ Palabra que cambia ============ */
.rotor{display:inline-block;vertical-align:bottom;height:1.35em;overflow:hidden;line-height:1.35em}
.rotor-pista{display:flex;flex-direction:column;animation:rota 9s cubic-bezier(.7,0,.3,1) infinite}
.rotor-pista span{display:block;height:1.35em;font-weight:700;background:linear-gradient(90deg,var(--verde),var(--verde-2) 60%,var(--ambar));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
@keyframes rota{0%,26%{transform:translateY(0)}33%,59%{transform:translateY(-1.35em)}66%,92%{transform:translateY(-2.7em)}100%{transform:translateY(-4.05em)}}
@media (prefers-reduced-motion:reduce){.rotor-pista{animation:none}}

/* ============ Contador real de la lista ============ */
.cuenta{margin-top:12px;display:inline-flex;align-items:center;gap:10px;background:var(--crema);border:1px solid var(--linea);border-radius:999px;padding:8px 16px;font-size:15px}
.cuenta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--verde-2);box-shadow:0 0 0 0 rgba(47,143,114,.5);animation:late 2s infinite}
.cuenta b{font-family:var(--f-t);font-size:18px;color:var(--verde)}
@keyframes late{to{box-shadow:0 0 0 8px rgba(47,143,114,0)}}