/* Escudio · Propuesta A «El expediente»
   Un caso contado de principio a fin con el móvil fijo y los capítulos pasando.
   Recursos de firma: el gran anillo de protección que se llena alrededor del móvil, la línea de tiempo del
   expediente, el sello que estampa, la cifra coral que irrumpe, las pruebas que caen al cajón y la carta que
   se escribe sola. Paleta y piezas de la app («Escudo vivo»). */

@font-face{font-family:"Outfit";src:url(../fuentes/outfit-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url(../fuentes/outfit-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Outfit";src:url(../fuentes/outfit-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Outfit";src:url(../fuentes/outfit-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fuentes/manrope-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fuentes/manrope-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fuentes/manrope-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Manrope";src:url(../fuentes/manrope-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

@property --p{syntax:"<number>";inherits:true;initial-value:0}
@property --brillo{syntax:"<angle>";inherits:false;initial-value:0deg}

:root{
  --fondo:#eef3f8;
  --fondo-2:#f4f7fb;
  --cristal:rgba(255,255,255,.72);
  --cristal-2:#fff;
  --borde:rgba(15,32,58,.08);
  --borde-luz:rgba(255,255,255,.95);
  --texto:#0b1628;
  --suave:#4a5970;
  --tenue:#6f7c90;
  --esmeralda:#0c9a6c;
  --esmeralda-2:#19c48a;
  --turquesa:#0b8791;
  --turquesa-2:#1fb3be;
  --ambar:#b26b06;
  --ambar-2:#f2b03d;
  --coral:#d4402f;
  --coral-2:#ff7a5c;
  --violeta:#5b4bd6;
  --violeta-2:#8a7cf0;
  --cielo:#2b7fe0;
  --cielo-2:#5fb7ff;
  --pista:rgba(15,32,58,.07);
  --sombra:0 1px 1px rgba(15,32,58,.04),0 2px 4px rgba(15,32,58,.04),0 8px 16px -6px rgba(15,32,58,.08),0 22px 40px -18px rgba(15,32,58,.16);
  --sombra-alta:0 1px 1px rgba(15,32,58,.05),0 4px 8px rgba(15,32,58,.05),0 16px 32px -10px rgba(15,32,58,.14),0 40px 70px -30px rgba(12,154,108,.3);
  --curva:cubic-bezier(.2,.8,.2,1);
  --ancho:1200px;
  --gutter:clamp(16px,4vw,40px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:"Manrope",system-ui,sans-serif;font-size:17px;line-height:1.6;color:var(--texto);background:var(--fondo);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 38vmax at 8% 4%,rgba(25,196,138,.20),transparent 60%),
    radial-gradient(34vmax 34vmax at 96% 30%,rgba(31,179,190,.18),transparent 60%),
    radial-gradient(40vmax 40vmax at 30% 100%,rgba(138,124,240,.12),transparent 60%);
  animation:respirar 30s ease-in-out infinite alternate}
@keyframes respirar{to{transform:translate3d(3%,-2%,0) scale(1.06)}}
h1,h2,h3,.cap-num,.boton,.logo{font-family:"Outfit",system-ui,sans-serif;letter-spacing:-.025em}
h2{font-size:clamp(34px,5.2vw,62px);line-height:1.04;font-weight:800}
h3{font-weight:700;line-height:1.15}
a{color:inherit}
img,svg{display:block}
.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.degradado{background:linear-gradient(110deg,var(--esmeralda) 10%,var(--turquesa) 60%,var(--esmeralda-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.coral{color:var(--coral)}
:focus-visible{outline:3px solid var(--turquesa);outline-offset:3px;border-radius:8px}
.saltar{position:absolute;left:-999px;top:8px;background:#fff;padding:10px 16px;border-radius:12px;z-index:100}
.saltar:focus{left:12px}
section{position:relative}
.eti{display:inline-flex;align-items:center;gap:8px;font:700 12px "Outfit";letter-spacing:.14em;text-transform:uppercase;color:var(--esmeralda);background:rgba(255,255,255,.7);border:1px solid rgba(12,154,108,.2);padding:7px 14px;border-radius:99px;backdrop-filter:blur(10px)}
.eti .i{width:15px;height:15px}

/* Botones */
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:18px;padding:16px 26px;font-weight:700;font-size:16px;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s var(--curva),box-shadow .2s}
.boton:hover{transform:translateY(-2px)}
.boton:active{transform:scale(.98)}
.boton-principal{color:#fff;background:linear-gradient(135deg,var(--esmeralda-2),var(--esmeralda) 45%,var(--turquesa));box-shadow:0 16px 30px -12px rgba(12,154,108,.65),inset 0 1px 0 rgba(255,255,255,.4)}
.boton-principal::after{content:"";position:absolute;top:0;bottom:0;width:55%;left:-70%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);animation:destello 4s ease-in-out 1.6s infinite}
@keyframes destello{0%{left:-70%}45%,100%{left:120%}}
.boton-cristal{color:var(--texto);background:var(--cristal);box-shadow:var(--sombra);backdrop-filter:blur(14px)}
.boton-peque{padding:11px 18px;font-size:14.5px;border-radius:14px}

/* Insignias como en la app */
.ins{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;color:#fff;position:relative;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 14px -6px var(--s,rgba(12,154,108,.6))}
.ins::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(160deg,rgba(255,255,255,.35),transparent 55%)}
.ins.pequena{width:32px;height:32px;border-radius:11px}.ins.pequena .i{width:16px;height:16px}
.ins.grande{width:50px;height:50px;border-radius:16px}.ins.grande .i{width:24px;height:24px}
.g-verde{background:linear-gradient(145deg,var(--esmeralda-2),var(--esmeralda));--s:rgba(12,154,108,.55)}
.g-turquesa{background:linear-gradient(145deg,var(--turquesa-2),var(--turquesa));--s:rgba(11,135,145,.55)}
.g-coral{background:linear-gradient(145deg,var(--coral-2),var(--coral));--s:rgba(212,64,47,.5)}
.g-ambar{background:linear-gradient(145deg,var(--ambar-2),var(--ambar));--s:rgba(178,107,6,.5)}
.g-violeta{background:linear-gradient(145deg,var(--violeta-2),var(--violeta));--s:rgba(91,75,214,.5)}
.g-cielo{background:linear-gradient(145deg,var(--cielo-2),var(--cielo));--s:rgba(43,127,224,.5)}

/* Barra superior */
.barra{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:50;width:min(var(--ancho),calc(100% - 24px));display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 18px;border-radius:20px;background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 10px 30px -18px rgba(15,32,58,.4),inset 0 0 0 1px rgba(255,255,255,.8);transition:background .3s,box-shadow .3s}
.barra.con-fondo{background:rgba(255,255,255,.84)}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:21px;text-decoration:none}
.logo-escudo{width:28px;height:28px;filter:drop-shadow(0 4px 8px rgba(12,154,108,.35))}
.barra nav{display:flex;gap:4px}
.barra nav a{font:600 14.5px "Outfit";color:var(--suave);text-decoration:none;padding:9px 13px;border-radius:12px;transition:background .2s,color .2s}
.barra nav a:hover{background:rgba(12,154,108,.08);color:var(--esmeralda)}
@media (max-width:860px){.barra nav{display:none}}

/* ============ PORTADA ============ */
.portada{overflow-x:clip;min-height:min(100svh,920px);max-width:var(--ancho);margin:0 auto;padding:130px var(--gutter) 70px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:40px}
.portada h1{font-size:clamp(54px,6.6vw,96px);line-height:.94;font-weight:800;margin:22px 0 22px;letter-spacing:-.045em}
.entradilla{font-size:clamp(18px,1.6vw,21px);color:var(--suave);max-width:540px}
.entradilla strong{color:var(--texto);font-weight:700}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.microaviso{margin-top:14px;font:500 13px "Manrope";color:var(--suave)}
.garantias-portada{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font:600 14px "Outfit";color:var(--suave)}
.garantias-portada li{display:flex;align-items:center;gap:7px}
.garantias-portada .i{width:17px;height:17px;color:var(--esmeralda)}
.portada-texto>*{animation:subir .9s var(--curva) both}
.portada-texto>*:nth-child(2){animation-delay:.08s}.portada-texto>*:nth-child(3){animation-delay:.16s}.portada-texto>*:nth-child(4){animation-delay:.24s}.portada-texto>*:nth-child(5){animation-delay:.32s}
@keyframes subir{from{opacity:0;transform:translateY(22px)}}

.portada-movil{position:relative;display:grid;place-items:center;min-height:640px}
/* Anillo gigante alrededor del móvil: se llena al cargar y lo recorre un destello */
.halo-anillo{position:absolute;width:min(560px,46vw);aspect-ratio:1;border-radius:50%;--p:0;
  background:conic-gradient(from -90deg,var(--esmeralda-2),var(--turquesa-2) calc(var(--p)*1%),rgba(15,32,58,.06) 0);
  -webkit-mask:radial-gradient(circle closest-side,transparent calc(100% - 22px),#000 calc(100% - 21px));mask:radial-gradient(circle closest-side,transparent calc(100% - 22px),#000 calc(100% - 21px));
  animation:llenar 2.4s var(--curva) .5s forwards;filter:drop-shadow(0 20px 40px rgba(12,154,108,.25))}
@keyframes llenar{to{--p:78}}
.halo-anillo i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from var(--brillo),transparent 0 80%,rgba(255,255,255,.95) 88%,transparent 96%);animation:girar 5s linear 3s infinite}
@keyframes girar{to{--brillo:360deg}}

/* Móvil recreado */
.movil{position:relative;width:330px;aspect-ratio:9/19.3;border-radius:52px;padding:10px;background:linear-gradient(150deg,#fdfefe,#dfe6ee 38%,#f3f6f9 62%,#cfd8e3);box-shadow:0 60px 100px -40px rgba(15,32,58,.5),0 0 0 1px rgba(15,32,58,.08),inset 0 1px 0 #fff}
.pantalla{position:relative;height:100%;border-radius:43px;overflow:hidden;background:var(--fondo-2);isolation:isolate}
.pantalla::before{content:"";position:absolute;inset:-20%;z-index:-1;background:radial-gradient(240px 200px at 85% 6%,rgba(31,179,190,.22),transparent 70%),radial-gradient(240px 220px at 0% 30%,rgba(25,196,138,.16),transparent 70%)}
.estado{display:flex;justify-content:space-between;align-items:center;padding:13px 26px 4px;font:600 12.5px "Outfit"}
.estado .isla{width:92px;height:25px;border-radius:20px;background:#05080f}
.estado .i{width:15px;height:15px;color:var(--esmeralda)}
.p-scroll{padding:6px 16px}
.p-marca{display:flex;align-items:center;gap:7px;font:700 9.5px "Outfit";letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin-top:6px}
.p-marca i{width:8px;height:8px;border-radius:3px;background:linear-gradient(135deg,var(--esmeralda-2),var(--turquesa))}
.p-hola{font:800 25px/1.05 "Outfit";letter-spacing:-.03em;margin-top:8px}
.p-sub{font-size:11.5px;color:var(--suave);margin-bottom:12px}
.p-tarjeta{position:relative;background:rgba(255,255,255,.78);border-radius:20px;box-shadow:var(--sombra)}
.p-heroe{display:flex;gap:12px;align-items:center;padding:13px}
.anillo-g{--p:0;width:92px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;background:conic-gradient(from -90deg,var(--esmeralda-2),var(--turquesa-2) calc(var(--p)*1%),var(--pista) 0);filter:drop-shadow(0 8px 14px rgba(12,154,108,.28))}
.anillo-g::before{content:"";position:absolute;inset:9px;border-radius:50%;background:linear-gradient(160deg,#fff,#f1f6fa)}
.anillo-g>div{position:relative;text-align:center;line-height:1}
.anillo-g .i{width:17px;height:17px;color:var(--esmeralda);margin:0 auto 2px}
.anillo-g b{display:block;font:800 26px "Outfit";letter-spacing:-.03em}
.anillo-g small{font:700 8px "Outfit";letter-spacing:.14em;color:var(--tenue)}
.anillo-g.en-marcha,.visible .anillo-g{animation:llenar-g 1.8s var(--curva) .3s forwards}
@keyframes llenar-g{to{--p:var(--meta)}}
.p-gr{font:800 17px/1.1 "Outfit";letter-spacing:-.02em}
.p-gr em{font-style:normal;background:linear-gradient(120deg,var(--esmeralda),var(--turquesa));-webkit-background-clip:text;background-clip:text;color:transparent}
.p-pq{font-size:10.5px;color:var(--suave);margin-top:4px;line-height:1.35}
.p-pastilla{display:inline-flex;align-items:center;gap:5px;margin-top:7px;font:700 9.5px "Outfit";padding:4px 8px;border-radius:99px;color:var(--coral);background:rgba(212,64,47,.09)}
.latido{width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none;animation:latir 1.8s infinite}
@keyframes latir{0%{box-shadow:0 0 0 0 rgba(212,64,47,.5)}70%{box-shadow:0 0 0 7px rgba(212,64,47,0)}100%{box-shadow:0 0 0 0 rgba(212,64,47,0)}}
.p-tit{display:flex;justify-content:space-between;align-items:center;font:700 13px "Outfit";margin:14px 2px 8px}
.p-aviso{display:flex;align-items:center;gap:10px;padding:10px 11px;margin-bottom:7px;overflow:hidden}
.p-aviso .ins{width:32px;height:32px;border-radius:11px}.p-aviso .ins .i{width:16px;height:16px}
.p-aviso>div{flex:1;min-width:0}
.p-aviso b{display:block;font:700 11.5px "Outfit"}
.p-aviso small{display:block;font-size:9.5px;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-aviso.urgente{background:linear-gradient(120deg,rgba(255,255,255,.88),rgba(255,226,218,.85))}
.p-aviso.urgente::after{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--coral)}
.p-aviso.pronto{background:linear-gradient(120deg,rgba(255,255,255,.88),rgba(255,240,210,.85))}
.p-valor{font:800 12px "Outfit";color:var(--coral);flex:none}
.p-valor.ambar{color:var(--ambar)}

.flotante{position:absolute;display:flex;align-items:center;gap:10px;padding:11px 14px 11px 11px;border-radius:18px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);box-shadow:var(--sombra-alta);font-size:12px;animation:flotar 6s ease-in-out infinite alternate,aparecer .8s var(--curva) both}
.flotante b{display:block;font:700 13.5px "Outfit"}
.flotante small{color:var(--suave)}
.flotante .ins{width:34px;height:34px;border-radius:12px}.flotante .ins .i{width:17px;height:17px}
.f1{left:-4%;top:20%;animation-delay:0s,1.4s}
.f2{right:-6%;bottom:4%;animation-delay:-3s,1.9s}
@keyframes flotar{to{transform:translateY(-12px)}}
@keyframes aparecer{from{opacity:0;scale:.85}}

@media (max-width:960px){
  .portada{grid-template-columns:1fr;padding-top:110px;text-align:left}
  .portada-movil{min-height:560px;margin-top:10px}
  .halo-anillo{width:min(500px,108vw)}
  .f1{left:0;top:8%}.f2{right:0;bottom:6%}
}
@media (max-width:480px){
  .portada h1{font-size:clamp(50px,15.5vw,66px)}
  .movil-portada{width:270px;border-radius:44px}
  .movil-portada .pantalla{border-radius:36px}
  .portada-movil{min-height:520px}
  .flotante{font-size:11px;padding:9px 11px 9px 9px}
  .flotante b{font-size:12px}
  .boton{width:100%}
}

/* ============ MANIFIESTO (las palabras se encienden al pasar) ============ */
.manifiesto{max-width:1000px;margin:0 auto;padding:clamp(56px,12vh,130px) var(--gutter) clamp(64px,14vh,150px)}
.frase-grande{font:700 clamp(28px,4.2vw,52px)/1.18 "Outfit";letter-spacing:-.03em}
.frase-grande .pal{color:rgba(11,22,40,.16);transition:color .35s}
.frase-grande .pal.on{color:var(--texto)}
.frase-grande .clave .pal.on{color:var(--esmeralda)}

/* ============ EL CASO ============ */
.caso{padding-top:clamp(20px,4vh,44px)}
.caso-cab,.cab-seccion{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
.caso-cab h2,.cab-seccion h2{margin:18px 0 14px}
.caso-cab>p:last-child{color:var(--suave);font-size:19px;max-width:620px}
.caso-escena{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:60px}
.caso-fijo{position:sticky;top:max(0px,calc(50vh - 460px));height:min(100vh,920px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding-top:70px}
.linea-tiempo{position:relative;width:min(440px,100%);padding-top:4px}
.linea-tiempo::before{content:"";position:absolute;left:0;right:0;top:9px;height:3px;border-radius:3px;background:var(--pista)}
.lt-relleno{position:absolute;left:0;top:9px;height:3px;border-radius:3px;width:calc(var(--avance,0) * 100%);background:linear-gradient(90deg,var(--esmeralda-2),var(--turquesa),var(--coral-2));transition:width .6s var(--curva)}
.linea-tiempo ol{position:relative;list-style:none;display:flex;justify-content:space-between}
.linea-tiempo li{position:relative;padding-top:20px;font:700 11px "Outfit";color:var(--tenue);text-align:center;width:16%;transition:color .3s}
.linea-tiempo li::before{content:"";position:absolute;left:50%;top:3px;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:var(--fondo-2);border:3px solid var(--pista);transition:border-color .3s,transform .3s}
.linea-tiempo li.hecho{color:var(--texto)}
.linea-tiempo li.hecho::before{border-color:var(--esmeralda)}
.linea-tiempo li.actual::before{transform:scale(1.25);border-color:var(--turquesa);box-shadow:0 0 0 6px rgba(11,135,145,.14)}
.caso-escena[data-paso="3"] .linea-tiempo li.actual::before{border-color:var(--coral);box-shadow:0 0 0 6px rgba(212,64,47,.14)}

.movil-caso{width:310px}
.vista{position:absolute;inset:47px 0 0;padding:8px 15px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .45s,transform .55s var(--curva);pointer-events:none}
.caso-escena[data-paso="1"] .v1,.caso-escena[data-paso="2"] .v2,.caso-escena[data-paso="3"] .v3,.caso-escena[data-paso="4"] .v4,.caso-escena[data-paso="5"] .v5,.caso-escena[data-paso="6"] .v6,.caso-escena[data-paso="0"] .v1{opacity:1;transform:none}
.p-migas{font:600 10px "Outfit";color:var(--tenue);text-align:center;margin:4px 0 12px}
.p-ficha-cab{display:flex;gap:11px;align-items:center;margin-bottom:12px}
.p-ficha-cab b{display:block;font:800 20px/1.05 "Outfit";letter-spacing:-.03em}
.p-ficha-cab small{font-size:10.5px;color:var(--suave)}
.p-dato{padding:11px 13px;margin-top:10px}
.p-dato small{display:block;font:700 8.5px "Outfit";letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.p-dato b{font:800 15px "Outfit"}

/* Capítulo 1: la web de la oferta, el disparo y el sello */
.oferta-web{position:relative;border-radius:18px;overflow:hidden;background:#fff;box-shadow:var(--sombra)}
.ow-barra{display:flex;align-items:center;gap:4px;padding:8px 10px;background:#f1f4f8;font-size:8.5px;color:var(--tenue)}
.ow-barra i{width:6px;height:6px;border-radius:50%;background:#d5dbe3}
.ow-barra span{margin-left:6px;background:#fff;padding:2px 8px;border-radius:6px;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ow-cuerpo{padding:16px 14px 18px;background:linear-gradient(150deg,#f3efff,#fff 60%)}
.ow-cuerpo small{font:700 10px "Outfit";letter-spacing:.12em;text-transform:uppercase;color:var(--violeta)}
.ow-precio{font:800 46px/1 "Outfit";letter-spacing:-.04em;margin:6px 0}
.ow-precio sup{font-size:15px;vertical-align:top;margin-left:2px}
.ow-letra{font-size:10px;color:var(--suave);line-height:1.4}
.ow-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.sello-grande{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;gap:7px;padding:7px 11px 7px 8px;border-radius:14px;color:var(--esmeralda);background:rgba(255,255,255,.94);border:2px solid rgba(12,154,108,.35);font:800 11px/1.1 "Outfit";letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:rotate(-8deg) scale(2.2)}
.sello-grande small{font:600 8.5px "Outfit";letter-spacing:0;text-transform:none;color:var(--suave)}
.sello-grande .i{width:22px;height:22px}
.caso-escena[data-paso="1"] .ow-flash{animation:flash .7s ease-out .35s both}
.caso-escena[data-paso="1"] .sello-grande{animation:estampar .55s cubic-bezier(.3,1.6,.5,1) .85s forwards}
@keyframes flash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
@keyframes estampar{to{opacity:1;transform:rotate(-8deg) scale(1)}}

/* Capítulo 2: notificación y comparación */
.noti{display:flex;gap:9px;align-items:center;padding:9px 11px;border-radius:16px;background:rgba(255,255,255,.95);box-shadow:var(--sombra-alta);margin:0 0 10px;transform:translateY(-70px);opacity:0}
.noti b{display:block;font:700 11.5px "Outfit"}
.noti small{font-size:9.5px;color:var(--suave)}
.caso-escena[data-paso="2"] .noti{animation:bajar .6s var(--curva) .2s forwards}
@keyframes bajar{to{transform:none;opacity:1}}
.comparar{padding:14px 13px}
.cmp{display:grid;grid-template-columns:52px 1fr auto;gap:9px;align-items:center;font-size:10.5px;color:var(--suave);margin:5px 0}
.cmp .b{height:9px;border-radius:9px;background:var(--pista);overflow:hidden}
.cmp .b i{display:block;height:100%;border-radius:9px;transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--curva) .5s}
.cmp .verde{width:79%;background:linear-gradient(90deg,var(--esmeralda-2),var(--esmeralda))}
.cmp .coral{width:100%;background:linear-gradient(90deg,var(--coral-2),var(--coral));transition-delay:.9s}
.cmp b{font:800 13px "Outfit";color:var(--texto);min-width:56px;text-align:right}
.caso-escena[data-paso="2"] .cmp .b i,.caso-escena[data-paso="3"] .cmp .b i{transform:scaleX(1)}

/* Capítulo 3: la cifra coral */
.alerta-factura{position:relative;padding:15px 14px;border-radius:22px;overflow:hidden;background:linear-gradient(150deg,rgba(255,240,236,.98),rgba(255,255,255,.9));box-shadow:var(--sombra)}
.alerta-factura::after{content:"";position:absolute;right:-40px;top:-50px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,92,.28),transparent 70%)}
.af-tit{display:flex;align-items:center;gap:7px;font:700 11.5px "Outfit";color:var(--coral)}
.af-cifra{font:800 54px/1 "Outfit";letter-spacing:-.05em;margin:10px 0 4px;background:linear-gradient(120deg,var(--coral-2),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent;transform-origin:left center}
.caso-escena[data-paso="3"] .af-cifra{animation:irrumpir .8s cubic-bezier(.3,1.5,.5,1) .2s both}
@keyframes irrumpir{from{transform:scale(.4);opacity:0;filter:blur(8px)}}
.af-sub{font-size:10.5px;color:var(--suave)}
.cuenta{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:12px;padding:9px 10px;border-radius:14px;background:#fff;box-shadow:var(--sombra)}
.cuenta small{display:block;font:700 7.5px "Outfit";letter-spacing:.12em;color:var(--tenue)}
.cuenta b{font:800 12.5px "Outfit"}
.cuenta span{color:var(--tenue);font-size:12px}
.p-boton{margin-top:12px;text-align:center;padding:13px;border-radius:16px;color:#fff;font:700 13px "Outfit";background:linear-gradient(135deg,var(--esmeralda-2),var(--turquesa));box-shadow:0 12px 24px -10px rgba(12,154,108,.6)}
.p-boton.coral{background:linear-gradient(135deg,var(--coral-2),var(--coral));box-shadow:0 12px 24px -10px rgba(212,64,47,.6)}

/* Capítulo 4: el cajón */
.p-pill{font:700 9px "Outfit";color:var(--esmeralda);background:rgba(12,154,108,.1);padding:4px 8px;border-radius:99px}
.cajon{list-style:none;background:rgba(255,255,255,.8);border-radius:20px;padding:4px 11px;box-shadow:var(--sombra)}
.cajon li{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--borde);opacity:0;transform:translateY(-60px) rotate(-3deg)}
.cajon li:last-child{border-bottom:0}
.cajon .n{font:800 9.5px "Outfit";color:var(--tenue);width:16px}
.cajon li>div{flex:1;min-width:0}
.cajon li>div b{display:block;font:700 11px "Outfit"}
.cajon li>div small{display:block;font-size:9px;color:var(--tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cajon em{font:800 7.5px "Outfit";font-style:normal;letter-spacing:.08em;color:var(--esmeralda);background:rgba(12,154,108,.1);padding:3px 6px;border-radius:99px;opacity:0;transform:scale(1.8)}
.cajon li.mal{background:linear-gradient(90deg,transparent,rgba(255,226,218,.6),transparent)}
.caso-escena[data-paso="4"] .cajon li{animation:caer .6s cubic-bezier(.3,1.3,.5,1) forwards;animation-delay:calc(var(--n)*.22s + .15s)}
.caso-escena[data-paso="4"] .cajon em{animation:estampar-p .35s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--n)*.22s + .6s)}
@keyframes caer{to{opacity:1;transform:none}}
@keyframes estampar-p{to{opacity:1;transform:none}}

/* Capítulo 5: la carta */
.p-rec{font:700 9.5px "Outfit";letter-spacing:.14em;color:var(--coral);margin-top:6px}
.p-rec-tit{font:800 21px/1.05 "Outfit";letter-spacing:-.03em;margin:4px 0 12px}
.p-rec-tit em{font-style:normal;color:var(--coral)}
.carta{background:#fff;border-radius:18px;padding:13px;box-shadow:var(--sombra);min-height:300px}
.carta-asunto{font:700 10.5px "Outfit";padding-bottom:7px;margin-bottom:7px;border-bottom:1px solid var(--borde)}
.carta-texto{font-size:10.5px;line-height:1.55;color:var(--suave);white-space:pre-wrap}
.carta-texto .cursor{display:inline-block;width:1.5px;height:12px;background:var(--esmeralda);vertical-align:-2px;animation:parpadeo 1s steps(1) infinite}
@keyframes parpadeo{50%{opacity:0}}
.carta-texto .hueco{color:var(--turquesa);font-weight:700}

/* Capítulo 6: enviada */
.enviado{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:40px}
.env-circulo{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,var(--esmeralda-2),var(--turquesa));box-shadow:0 20px 40px -14px rgba(12,154,108,.7),0 0 0 12px rgba(12,154,108,.08),0 0 0 26px rgba(12,154,108,.04)}
.env-circulo .i{width:40px;height:40px}
.caso-escena[data-paso="6"] .env-circulo .i{animation:volar 1.1s var(--curva) .3s both}
@keyframes volar{0%{transform:translate(-30px,30px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
.env-tit{font:800 20px "Outfit";letter-spacing:-.02em;margin-top:22px}
.env-sub{font-size:11px;color:var(--suave);margin:6px 8px 18px;line-height:1.5}
.env-estado{display:flex;align-items:center;gap:10px;padding:11px 13px;text-align:left;width:100%}
.env-estado b{display:block;font:700 11.5px "Outfit"}
.env-estado small{font-size:9.5px;color:var(--suave)}

/* Capítulos */
.capitulos{display:flex;flex-direction:column}
.capitulo{min-height:min(100vh,820px);display:flex;flex-direction:column;justify-content:center;max-width:470px;opacity:.28;transition:opacity .5s}
.capitulo.activo{opacity:1}
.cap-num{font:700 13px "Outfit";letter-spacing:.12em;text-transform:uppercase;color:var(--turquesa);margin-bottom:14px}
.capitulo[data-cap="3"] .cap-num{color:var(--coral)}
.capitulo h3{font-size:clamp(30px,3.4vw,44px);line-height:1.06;font-weight:800;letter-spacing:-.035em;margin-bottom:16px}
.capitulo p:last-child{color:var(--suave);font-size:18px}

@media (max-width:860px){
  .caso-escena{grid-template-columns:1fr;gap:0}
  .caso-fijo{height:100svh;justify-content:flex-start;padding-top:82px;gap:10px}
  .linea-tiempo{width:100%}
  .movil-caso{zoom:.74}
  /* Cada texto se queda abajo, en su sitio, y el siguiente lo sustituye (sin una pantalla vacía entre textos):
     cada capítulo se queda pegado en la franja de abajo al llegar y el siguiente lo tapa; escena.js elige el activo por lo recorrido (--h-cap por paso). */
  .caso-escena{--h-cap:60svh}
  .capitulos{margin-top:-100svh;padding-top:calc(100svh - var(--h-cap));position:relative;z-index:2;pointer-events:none}
  .capitulo{position:sticky;top:calc(100svh - var(--h-cap));min-height:var(--h-cap);justify-content:flex-end;padding:0 0 22px;max-width:none;opacity:1}
  .capitulo::after{content:"";position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));bottom:0;height:300px;z-index:-1;background:linear-gradient(rgba(238,243,248,0),rgba(238,243,248,.96) 38%);transition:opacity .4s}
  .capitulo:not(.activo)::after{opacity:0}
  .capitulo>*{transition:opacity .4s,transform .5s var(--curva)}
  .capitulo:not(.activo)>*{opacity:0;transform:translateY(16px)}
  .cap-num{font-size:11px;margin-bottom:6px}
  .capitulo h3{font-size:25px;margin-bottom:6px;text-wrap:balance}
  .capitulo p:last-child{font-size:15px;line-height:1.5}
}

/* ============ QUÉ VIGILA (bento) ============ */
.vigila{padding:clamp(64px,16vh,150px) 0 clamp(48px,10vh,110px)}
.bento{max-width:var(--ancho);margin:44px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.celda{position:relative;padding:26px;border-radius:28px;background:var(--cristal);backdrop-filter:blur(18px);box-shadow:var(--sombra);overflow:hidden;transition:transform .3s var(--curva),box-shadow .3s}
.celda::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(160deg,var(--borde-luz),rgba(255,255,255,.2) 40%,var(--borde));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.celda:hover{transform:translateY(-4px);box-shadow:var(--sombra-alta)}
.celda h3{font-size:22px;margin:18px 0 8px}
.celda p{color:var(--suave);font-size:15.5px}
.c-cobro{grid-column:span 2;background:linear-gradient(140deg,rgba(255,255,255,.85),rgba(255,233,226,.75))}
.mini-cuenta{display:flex;align-items:center;gap:14px;margin-top:20px;font:800 clamp(26px,3.4vw,40px) "Outfit";letter-spacing:-.03em}
.mini-cuenta span{color:var(--tenue);font-weight:400}
.cuenta-atras{margin-top:18px;display:flex;flex-direction:column;gap:2px}
.cuenta-atras span{font:700 11px "Outfit";letter-spacing:.12em;text-transform:uppercase;color:var(--tenue)}
.cuenta-atras b{font:800 30px "Outfit";letter-spacing:-.02em;color:var(--turquesa);font-variant-numeric:tabular-nums}
.barra-promo{margin-top:20px}
.barra-promo i{display:block;height:10px;border-radius:10px;background:linear-gradient(90deg,var(--esmeralda-2) 0 70%,var(--ambar-2) 70% 85%,var(--pista) 85%);background-size:100% 100%}
.barra-promo small{display:block;margin-top:8px;font:700 13px "Outfit";color:var(--ambar)}
.c-gar{grid-column:1/-1;display:flex;align-items:center;gap:26px;background:linear-gradient(140deg,rgba(255,255,255,.85),rgba(220,246,236,.75))}
.extra{font:700 12px "Outfit";letter-spacing:.12em;text-transform:uppercase;color:var(--esmeralda)}
.c-gar h3{margin-top:6px}
.anillo-g.peque{width:120px}
.anillo-g.peque b{font-size:22px}
@media (max-width:900px){.bento{grid-template-columns:1fr 1fr}.c-cobro{grid-column:span 2}}
@media (max-width:600px){.bento{grid-template-columns:1fr}.c-cobro,.c-gar{grid-column:auto}.c-gar{flex-direction:column;align-items:flex-start}.celda{padding:22px}}

/* Revelado al entrar en pantalla */
.revela{opacity:0;transform:translateY(26px);transition:opacity .8s var(--curva),transform .8s var(--curva)}
.revela.visible{opacity:1;transform:none}

/* ============ CÓMO FUNCIONA ============ */
.como{padding:clamp(48px,10vh,110px) 0}
.pasos{list-style:none;max-width:var(--ancho);margin:50px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
.pasos::before{content:"";position:absolute;left:calc(var(--gutter) + 30px);right:calc(var(--gutter) + 30px);top:28px;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--esmeralda-2),var(--turquesa),var(--ambar-2),var(--coral-2));transform-origin:left;transform:scaleX(var(--avance-pasos,0));transition:transform .2s linear}
.paso{position:relative}
.paso-num{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:20px;font:800 24px "Outfit";background:#fff;box-shadow:var(--sombra);color:var(--esmeralda);margin-bottom:20px}
.paso h3{font-size:24px;margin-bottom:8px}
.paso p{color:var(--suave);font-size:15.5px}
.paso-iconos{display:flex;gap:8px;margin-top:16px}
@media (max-width:860px){.pasos{grid-template-columns:1fr 1fr;row-gap:36px}.pasos::before{display:none}}
@media (max-width:520px){.pasos{grid-template-columns:1fr}}

/* ============ TU IA ============ */
.ia{max-width:var(--ancho);margin:0 auto;padding:clamp(56px,12vh,130px) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.ia-texto h2{margin:18px 0 18px}
.ia-texto>p:not(.eti){color:var(--suave);margin-bottom:14px;font-size:17.5px}
.ia-texto strong{color:var(--texto)}
.lista-check{list-style:none;margin-top:20px;display:grid;gap:10px}
.lista-check li{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.lista-check .i{color:var(--esmeralda);margin-top:3px}
.interruptor{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:18px;background:rgba(255,255,255,.7);box-shadow:var(--sombra);margin-bottom:16px}
.interruptor button{position:relative;z-index:1;border:0;background:none;font:700 14.5px "Outfit";padding:12px;border-radius:14px;color:var(--suave);cursor:pointer;transition:color .3s}
.interruptor button[aria-selected="true"]{color:#fff}
.interruptor-fondo{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:14px;background:linear-gradient(135deg,var(--esmeralda-2),var(--turquesa));box-shadow:0 10px 20px -10px rgba(12,154,108,.7);transition:transform .45s var(--curva)}
.interruptor[data-vista="tu"] .interruptor-fondo{transform:translateX(100%)}
.carta-demo{background:#fff;border-radius:26px;padding:26px;box-shadow:var(--sombra-alta);font-size:15.5px;line-height:1.6;color:var(--suave)}
.carta-demo p+p{margin-top:10px}
.cd-asunto{font:700 15px "Outfit";color:var(--texto);padding-bottom:12px;border-bottom:1px solid var(--borde)}
.hueco{display:inline-block;font-weight:700;padding:1px 8px;border-radius:8px;background:rgba(11,135,145,.1);color:var(--turquesa);transition:background .4s,color .4s}
.carta-demo[data-vista="tu"] .hueco{background:rgba(12,154,108,.12);color:var(--esmeralda)}
.nota-demo{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:14px;color:var(--suave)}
.nota-demo .i{width:17px;height:17px;color:var(--esmeralda)}
@media (max-width:860px){.ia{grid-template-columns:1fr;gap:34px}}

/* ============ PRIVACIDAD ============ */
.privacidad{max-width:var(--ancho);margin:0 auto;padding:clamp(48px,10vh,110px) var(--gutter);display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.priv-texto h2{margin:18px 0 18px}
.priv-texto>p:not(.eti){color:var(--suave);font-size:17.5px}
.datos-priv{margin-top:26px;display:grid;gap:10px}
.datos-priv div{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-radius:16px;background:var(--cristal);box-shadow:var(--sombra)}
.datos-priv dt{color:var(--suave);font-size:15px}
.datos-priv dd{font:800 16px "Outfit";color:var(--esmeralda)}
.caja-fuerte{position:relative;aspect-ratio:1;max-width:460px;width:100%;margin:0 auto;display:grid;place-items:center}
.caja-fuerte::before{content:"";position:absolute;inset:8%;border-radius:50%;border:2px dashed rgba(12,154,108,.25)}
.caja-fuerte::after{content:"";position:absolute;inset:24%;border-radius:50%;background:radial-gradient(circle,rgba(25,196,138,.22),transparent 70%)}
.cf-movil{position:relative;z-index:2;width:120px;height:200px;border-radius:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#fff;background:linear-gradient(150deg,var(--esmeralda-2),var(--turquesa));box-shadow:0 30px 50px -20px rgba(12,154,108,.7),inset 0 1px 0 rgba(255,255,255,.4);font:700 14px "Outfit"}
.cf-movil .i{width:36px;height:36px}
.cf-orbita{position:absolute;inset:8%;animation:orbitar 40s linear infinite}
.cf-dato{position:absolute;left:50%;top:50%;transform:rotate(var(--a)) translateY(calc(-1 * min(200px,40vw))) rotate(calc(-1 * var(--a)));translate:-50% -50%;padding:8px 14px;border-radius:99px;background:#fff;box-shadow:var(--sombra);font:700 13px "Outfit";white-space:nowrap}
.cf-orbita .cf-dato{animation:contraorbitar 40s linear infinite}
@keyframes orbitar{to{rotate:360deg}}
@keyframes contraorbitar{to{rotate:-360deg}}
.cf-fuera{position:absolute;right:-2%;top:2%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 16px;border-radius:18px;background:rgba(255,255,255,.9);box-shadow:var(--sombra);font-size:12px;color:var(--tenue)}
.cf-fuera .i{width:28px;height:28px;color:var(--tenue)}
.cf-fuera b{font:800 18px "Outfit";color:var(--coral)}
@media (max-width:860px){.privacidad{grid-template-columns:1fr}.caja-fuerte{max-width:340px}.cf-dato{font-size:11.5px}}

/* ============ INCLUYE ============ */
.incluye{padding:clamp(40px,8vh,90px) 0}
.rejilla-funciones{list-style:none;max-width:var(--ancho);margin:34px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rejilla-funciones li{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;padding:18px;border-radius:22px;background:var(--cristal);box-shadow:var(--sombra)}
.rejilla-funciones .ins{grid-row:span 2}
.rejilla-funciones b{font:700 17px "Outfit"}
.rejilla-funciones small{color:var(--suave);font-size:14px;line-height:1.4}
.plataformas{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:26px;color:var(--suave);font-weight:600}
.plataformas .i{color:var(--esmeralda)}
@media (max-width:860px){.rejilla-funciones{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rejilla-funciones{grid-template-columns:1fr}}

/* ============ PRECIO ============ */
.precio{padding:clamp(56px,12vh,130px) 0 clamp(40px,8vh,90px)}
.centrada{text-align:center}
.centrada>p:last-child{color:var(--suave);font-size:18px;max-width:560px;margin:0 auto}
.planes{max-width:840px;margin:44px auto 0;padding:0 var(--gutter);display:grid;grid-template-columns:.85fr 1.15fr;gap:18px;align-items:stretch}
.plan{display:flex;flex-direction:column;padding:30px;border-radius:30px;background:var(--cristal);box-shadow:var(--sombra)}
.plan h3{font-size:22px}
.plan-precio{font:800 52px/1 "Outfit";letter-spacing:-.04em;margin:14px 0 18px}
.plan-precio small{display:block;font:600 13px "Manrope";letter-spacing:0;color:var(--suave);margin-top:8px}
.plan ul{list-style:none;display:grid;gap:9px;margin-bottom:26px;flex:1;align-content:start}
.plan li{padding-left:26px;position:relative;color:var(--suave)}
.plan li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;border-radius:5px;background:linear-gradient(135deg,var(--esmeralda-2),var(--turquesa))}
.plan-destacado{position:relative;background:linear-gradient(160deg,#fff,rgba(220,246,236,.9));box-shadow:var(--sombra-alta)}
.plan-destacado::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--brillo),var(--esmeralda-2),var(--turquesa),var(--violeta-2),var(--esmeralda-2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:girar 6s linear infinite}
.plan-eti{align-self:flex-start;font:700 11px "Outfit";letter-spacing:.14em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--esmeralda-2),var(--turquesa));padding:6px 12px;border-radius:99px;margin-bottom:14px}
.plan .boton{width:100%}
@media (max-width:700px){.planes{grid-template-columns:1fr}}

/* ============ PREGUNTAS ============ */
.preguntas{max-width:820px;margin:0 auto;padding:clamp(40px,8vh,90px) var(--gutter)}
.preguntas h2{font-size:clamp(30px,4vw,46px);margin-bottom:26px}
.acordeon{display:grid;gap:10px}
.acordeon details{border-radius:20px;background:var(--cristal);box-shadow:var(--sombra);overflow:hidden}
.acordeon summary{list-style:none;cursor:pointer;padding:20px 56px 20px 22px;font:700 18px "Outfit";position:relative}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary::after{content:"";position:absolute;right:22px;top:50%;width:12px;height:12px;margin-top:-8px;border-right:2.5px solid var(--esmeralda);border-bottom:2.5px solid var(--esmeralda);transform:rotate(45deg);transition:transform .3s var(--curva)}
.acordeon details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.acordeon details p{padding:0 22px 20px;color:var(--suave)}
@supports selector(::details-content){
  .acordeon details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--curva),content-visibility .4s allow-discrete}
  .acordeon details[open]::details-content{block-size:auto}
  :root{interpolate-size:allow-keywords}
}

/* ============ CIERRE ============ */
.cierre{text-align:center;padding:clamp(56px,12vh,130px) var(--gutter) clamp(64px,14vh,150px);display:flex;flex-direction:column;align-items:center;gap:28px}
.cierre h2{font-size:clamp(36px,6vw,74px)}
.anillo-g.grande{width:130px}
.anillo-g.grande .i{width:46px;height:46px;margin:0}

/* ============ PIE ============ */
.pie{max-width:var(--ancho);margin:0 auto;padding:30px var(--gutter) 46px;border-top:1px solid var(--borde)}
.pie-fila{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.pie nav{display:flex;gap:18px}
.pie nav a{color:var(--suave);font-size:14.5px;text-decoration:none}
.pie nav a:hover{color:var(--esmeralda)}
.pie-legal{margin-top:20px;font-size:13px;color:var(--tenue);max-width:820px}

/* Accesibilidad: sin movimiento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .halo-anillo{--p:78}
  .revela{opacity:1;transform:none}
  .frase-grande .pal{color:var(--texto)}
}

/* Isla de navegación dentro de los móviles recreados */
.p-isla{position:absolute;left:12px;right:12px;bottom:12px;height:52px;border-radius:19px;display:flex;justify-content:space-around;align-items:center;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);box-shadow:0 14px 28px -14px rgba(15,32,58,.35),inset 0 0 0 1px rgba(255,255,255,.9);z-index:5}
.p-isla i{width:18px;height:18px;border-radius:6px;border:2px solid #b9c3d1}
.p-isla i.on{border-color:var(--esmeralda);background:rgba(12,154,108,.12)}
.p-isla b{width:42px;height:42px;margin-top:-24px;border-radius:15px;display:grid;place-items:center;color:#fff;font:400 26px/1 "Outfit";background:linear-gradient(140deg,var(--esmeralda-2),var(--turquesa));box-shadow:0 10px 18px -6px rgba(12,154,108,.7),0 0 0 4px rgba(244,247,251,.95)}
.p-mosaico{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.p-mosaico div{padding:10px;border-radius:16px;background:rgba(255,255,255,.78);box-shadow:var(--sombra)}
.p-mosaico .ins{width:28px;height:28px;border-radius:10px}.p-mosaico .ins .i{width:14px;height:14px}
.p-mosaico b{display:block;font:800 17px "Outfit";margin-top:6px}
.p-mosaico small{font-size:9.5px;color:var(--suave)}
.p-plazos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.p-plazo{display:flex;gap:8px;align-items:center;padding:9px;border-radius:16px;background:rgba(255,255,255,.8);box-shadow:var(--sombra)}
.mini{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;position:relative;background:conic-gradient(from -90deg,var(--c1,var(--esmeralda-2)),var(--c2,var(--turquesa-2)) calc(var(--meta)*1%),var(--pista) 0)}
.mini::before{content:"";position:absolute;inset:4px;border-radius:50%;background:#fff}
.mini b{position:relative;font:800 8.5px "Outfit"}
.p-plazo small{display:block;font:700 7.5px "Outfit";letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.p-plazo strong{display:block;font:800 11px "Outfit"}
.p-fila{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:16px;background:rgba(255,255,255,.8);box-shadow:var(--sombra);margin-top:8px}
.p-fila>div{flex:1;min-width:0}
.p-fila b{display:block;font:700 11px "Outfit"}
.p-fila small{display:block;font-size:9.5px;color:var(--suave)}
.p-fila em{font:800 7.5px "Outfit";font-style:normal;letter-spacing:.08em;color:var(--esmeralda);background:rgba(12,154,108,.1);padding:3px 6px;border-radius:99px}
/* Plazos de devolución y permanencia en el bento */
.puntos{display:flex;gap:5px;margin-top:20px;flex-wrap:wrap}
.puntos i{width:14px;height:14px;border-radius:5px;background:var(--pista)}
.puntos i.ya{background:linear-gradient(135deg,var(--coral-2),var(--coral))}
.puntos-txt{display:block;margin-top:8px;font:700 13px "Outfit";color:var(--coral)}
.perm{display:flex;align-items:center;gap:14px;margin-top:18px}
.perm .anillo-g{width:74px;background:conic-gradient(from -90deg,var(--violeta-2),var(--violeta) calc(var(--p)*1%),var(--pista) 0)}
.perm .anillo-g::before{inset:7px}
.perm .anillo-g b{font-size:15px}
.celda .perm p{font:700 13px "Outfit";color:var(--violeta)}
main>section{overflow-x:clip}
.barra .boton{width:auto}

/* ============ PANTALLAS ALTAS (monitor vertical, 1080×1920…): la escena del caso y la portada crecen en vez de dejar
   cientos de píxeles vacíos. Sin tocar móviles ni pantallas normales. ============ */
@media (min-width:861px) and (min-height:1300px){
  .portada{min-height:min(100svh,1180px)}
  .portada-movil{zoom:1.18}
  .portada h1{font-size:clamp(64px,8vw,104px)}
  .caso-fijo{top:max(0px,calc(50vh - 640px));height:min(100vh,1280px);gap:28px}
  .movil-caso{zoom:1.38}
  .linea-tiempo{width:min(560px,100%)}
  .capitulo{min-height:min(100vh,1000px);max-width:520px}
  .capitulo h3{font-size:clamp(36px,4vw,50px)}
  .capitulo p:last-child{font-size:20px}
}

/* Pantallas grandes en vertical (monitor girado, tableta grande): la escena del caso se apila como en el móvil —el
   móvil arriba y el texto del capítulo abajo— para usar la altura en vez de dejarla vacía. */
@media (min-width:861px) and (orientation:portrait){
  /* Una sola columna también en la portada: a dos columnas el titular grande tocaba el aro (1080×1920). */
  .portada{min-height:0;padding-top:150px;padding-bottom:60px;grid-template-columns:1fr}
  .portada-movil{margin-top:10px}
  .f1{left:3%}.f2{right:3%}
  .caso-escena{grid-template-columns:1fr;gap:0;max-width:960px}
  .caso-fijo{top:0;height:100svh;justify-content:flex-start;padding-top:104px;gap:22px}
  .movil-caso{zoom:1.2}
  .caso-escena{--h-cap:50svh}
  .capitulos{margin-top:-100svh;padding-top:calc(100svh - var(--h-cap));position:relative;z-index:2;pointer-events:none}
  .capitulo{position:sticky;top:calc(100svh - var(--h-cap));min-height:var(--h-cap);justify-content:flex-end;padding:0 0 48px;max-width:none;opacity:1}
  .capitulo::after{content:"";position:absolute;left:calc(-1 * var(--gutter));right:calc(-1 * var(--gutter));bottom:0;height:420px;z-index:-1;background:linear-gradient(rgba(238,243,248,0),rgba(238,243,248,.97) 40%);transition:opacity .4s}
  .capitulo:not(.activo)::after{opacity:0}
  .capitulo>*{max-width:760px;transition:opacity .4s,transform .5s var(--curva)}
  .capitulo:not(.activo)>*{opacity:0;transform:translateY(16px)}
}
@media (min-width:861px) and (orientation:portrait) and (min-height:1700px){
  .movil-caso{zoom:1.55}
  .linea-tiempo{width:min(620px,100%)}
}

/* ============ INSTALAR (cómo tenerla en el móvil; «Disponible pronto» hasta que salga) ============ */
.instalar{padding:clamp(40px,8vh,90px) 0}
.instalar-planes{grid-template-columns:1fr 1fr}
.instalar-estado{font:700 13px "Outfit";letter-spacing:.06em;text-transform:uppercase;color:var(--turquesa);margin:8px 0 14px}
.boton-desactivado{opacity:.6;cursor:default;pointer-events:none}
@media (max-width:620px){.instalar-planes{grid-template-columns:1fr}}