/* Academia Oposan · web v3 «El pulso»
   Estudio creativo web, 17-10-2026.
   Un hilo conductor: la línea de electrocardiograma. Aparece en la intro, en la portada,
   en el recorrido «del día 1 a tu plaza» y en el cierre. Todo lo demás, quieto y ordenado. */

@font-face{font-family:'Fraunces';font-weight:100 900;font-style:normal;font-display:swap;
  src:url(fuentes/Fraunces-VF.woff2) format('woff2')}
@font-face{font-family:'Inter';font-weight:100 900;font-style:normal;font-display:swap;
  src:url(fuentes/Inter-VF.woff2) format('woff2')}

:root{
  /* noche: el azul del logo llevado a fondo de monitor */
  --noche:#071330;
  --noche-2:#0D1F4A;
  --azul:#1B3F8B;          /* azul del logo web (D19) */
  --azul-claro:#9FB6E8;
  --amarillo:#F5B800;      /* amarillo del logo: solo acción */
  --monitor:#7DF2B8;       /* verde de monitor de constantes: solo la línea de pulso */
  --papel:#F4EFE6;
  --papel-2:#FBF8F2;
  --arena:#E7DCCB;
  --tinta:#13203A;
  --gris:#4F5967;
  --salvia:#3F5E4C;        /* «respuesta correcta» */
  --salvia-lavada:#DCE6DF;
  --error:#B3261E;

  --f-t:'Fraunces',Georgia,'Times New Roman',serif;
  --f-c:'Inter',system-ui,'Segoe UI',Arial,sans-serif;
  --fv:"SOFT" 50,"WONK" 0,"opsz" 144;

  --gutter:clamp(16px,4vw,56px);
  --max:1280px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-in:cubic-bezier(.7,0,.84,0);
  --r-foto:999px 999px 28px 28px; /* arco: ventana de hospital, vocación */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip}
body{margin:0;background:var(--papel);color:var(--tinta);font:400 17px/1.6 var(--f-c);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:fixed;left:16px;top:-80px;z-index:200;background:var(--amarillo);color:var(--noche);
  padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;transition:top .2s}
.saltar:focus{top:16px}

.envoltura{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--f-t);font-variation-settings:var(--fv);font-weight:600;letter-spacing:-.02em;margin:0}
h2{font-size:clamp(38px,5.6vw,84px);line-height:1.02}
h3{font-size:clamp(22px,2vw,28px);line-height:1.15}
p{margin:0}
.entradilla{font-size:clamp(18px,1.5vw,21px);line-height:1.55;max-width:58ch;color:var(--gris)}
.oscuro .entradilla{color:var(--azul-claro)}

/* ---------- botones ---------- */
.boton{--bg:var(--amarillo);--fg:var(--noche);position:relative;display:inline-flex;align-items:center;gap:12px;
  min-height:56px;padding:0 28px;border-radius:999px;background:var(--bg);color:var(--fg);
  font:700 17px/1 var(--f-c);text-decoration:none;border:0;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);will-change:transform;isolation:isolate;overflow:hidden}
.boton::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--papel);transform:translateY(101%);
  border-radius:inherit;transition:transform .45s var(--ease)}
.boton:hover::after{transform:none}
.boton:hover{box-shadow:0 18px 40px -12px rgba(245,184,0,.55)}
.flecha{width:22px;height:22px;flex:none}
.ficha:hover .ir .flecha{transform:translateX(4px)}
.ir .flecha{transition:transform .35s var(--ease)}
.boton .flecha{width:22px;height:22px;flex:none;transition:transform .35s var(--ease)}
.boton:hover .flecha{transform:translateX(4px)}
.boton.secundario{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 2px currentColor}
.boton.secundario::after{background:currentColor;opacity:.08}
.boton.azul{--bg:var(--azul);--fg:var(--papel)}
.boton.azul::after{background:var(--noche)}
.nota-boton{font-size:14px;color:var(--gris);margin-top:14px}
.oscuro .nota-boton{color:var(--azul-claro)}

/* ---------- cabecera ---------- */
.cabecera{position:fixed;inset:0 0 auto;z-index:50;padding:14px var(--gutter);display:flex;align-items:center;gap:24px;
  color:var(--papel);transition:background .4s,color .4s,transform .45s var(--ease),padding .4s}
.cabecera.solida{background:rgba(244,239,230,.86);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  color:var(--tinta);padding-block:8px;box-shadow:0 1px 0 rgba(19,32,58,.08)}
.cabecera.oculta{transform:translateY(-110%)}
.marca{display:block;width:118px;flex:none}
.marca img{width:100%;height:auto}
.marca .claro{display:block}.marca .oscuro-logo{display:none}
.cabecera.solida .marca .claro{display:none}.cabecera.solida .marca .oscuro-logo{display:block}
.menu{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.menu a{display:block;padding:10px 14px;border-radius:999px;text-decoration:none;font-weight:500;font-size:15px;position:relative}
.menu a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:currentColor;transform:scaleX(0);
  transform-origin:right;transition:transform .35s var(--ease)}
.menu a:hover::after,.menu a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.cabecera .boton{min-height:44px;padding:0 20px;font-size:15px}
.abrir-menu{display:none;margin-left:auto;background:none;border:0;width:48px;height:48px;border-radius:50%;cursor:pointer}
.abrir-menu span{display:block;width:22px;height:2px;background:currentColor;margin:5px auto;transition:transform .3s}
@media (max-width:900px){
  .menu,.cabecera .boton{display:none}
  .abrir-menu{display:block}
  .cabecera.abierta{background:var(--noche);color:var(--papel)}
  .cabecera.abierta .marca .claro{display:block}.cabecera.abierta .marca .oscuro-logo{display:none}
  .cabecera.abierta .menu{display:flex;flex-direction:column;position:fixed;inset:72px 0 auto;background:var(--noche);
    padding:12px var(--gutter) 28px;margin:0}
  .cabecera.abierta .menu a{font:600 30px/1.2 var(--f-t);padding:12px 0}
  .cabecera.abierta .menu a::after{display:none}
  .cabecera.abierta .abrir-menu span:first-child{transform:translateY(3.5px) rotate(45deg)}
  .cabecera.abierta .abrir-menu span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}

/* ---------- intro: el pulso que acaba en el logo ---------- */
.intro{position:fixed;inset:0;z-index:100;background:var(--noche);display:grid;place-items:center;overflow:hidden;cursor:pointer}
.intro svg.ecg{position:absolute;left:0;top:calc(50% - min(340px,62vw)*.082 - 136px);width:calc(50% - min(340px,62vw)*.31);height:220px;overflow:visible}
.intro .trazo{fill:none;stroke:var(--monitor);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(125,242,184,.8))}
.intro .logo-intro{position:relative;z-index:2;width:min(340px,62vw);opacity:0;transform:scale(.92);clip-path:circle(0% at 18% 37%)}
.intro .saltar-intro{position:absolute;bottom:28px;right:var(--gutter);color:var(--azul-claro);font-size:14px;background:none;border:0;cursor:pointer}
.intro.fuera{transform:translateY(-100%);transition:transform .9s var(--ease-in)}
html.sin-intro .intro{display:none}

/* ---------- portada ---------- */
.heroe{position:relative;min-height:100svh;background:var(--noche);color:var(--papel);overflow:hidden;
  display:grid;align-items:center;padding:110px 0 150px}
.heroe .rejilla-monitor{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(rgba(159,182,232,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(159,182,232,.07) 1px,transparent 1px);
  background-size:48px 48px}
.heroe .ecg-fondo{position:absolute;left:0;right:0;bottom:18px;height:96px;width:100%;pointer-events:none;overflow:visible}
.heroe .ecg-fondo path{fill:none;stroke:var(--monitor);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;opacity:.9;
  filter:drop-shadow(0 0 5px rgba(125,242,184,.65))}
.heroe .contenido{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.saludo{font:500 clamp(16px,1.4vw,19px)/1.3 var(--f-c);color:var(--monitor);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.saludo .punto{width:10px;height:10px;border-radius:50%;background:var(--monitor);box-shadow:0 0 0 0 rgba(125,242,184,.7);animation:latido 1.2s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(125,242,184,.6)}70%{box-shadow:0 0 0 14px rgba(125,242,184,0)}100%{box-shadow:0 0 0 0 rgba(125,242,184,0)}}
.titular{font-size:clamp(48px,6.4vw,108px);line-height:.95;letter-spacing:-.035em;font-weight:500}
.titular .l{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.titular .p{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:0 100%}
.listo .titular .p{transform:none;transition:transform 1.1s var(--ease);transition-delay:calc(var(--i)*70ms + 150ms)}
.titular .segunda{font-style:italic;font-weight:400;color:var(--amarillo);font-size:.68em;line-height:1.02}
.heroe .nota-boton{color:#B8C6E6}
.heroe .entradilla{color:#C9D5F0;margin:24px 0 30px;max-width:46ch;opacity:0;transform:translateY(16px)}
.heroe .acciones{opacity:0;transform:translateY(16px)}
.listo .heroe .entradilla,.listo .heroe .acciones{opacity:1;transform:none;transition:opacity 1s .9s,transform 1s .9s var(--ease)}
.listo .heroe .acciones{transition-delay:1.05s}

/* collage de arcos */
.arcos{position:relative;height:min(640px,72svh);perspective:1200px}
.arco{position:absolute;margin:0;border-radius:var(--r-foto);overflow:hidden;background:var(--noche-2);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.65);opacity:0;transform:translateY(60px) scale(.94);will-change:transform}
.arco img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);filter:saturate(.95) contrast(1.02)}
.arco.a1{width:52%;height:78%;left:24%;top:4%;z-index:2}
.arco.a2{width:36%;height:50%;left:0;top:36%;z-index:3}
.arco.a3{width:34%;height:46%;right:0;top:44%;z-index:1}
.listo .arco{opacity:1;transform:none;transition:opacity 1.2s var(--ease),transform 1.4s var(--ease)}
.listo .arco.a1{transition-delay:.35s}.listo .arco.a2{transition-delay:.55s}.listo .arco.a3{transition-delay:.7s}
.sello{position:absolute;z-index:4;left:6%;top:6%;width:132px;height:132px;color:var(--amarillo)}
.sello svg{width:100%;height:100%;animation:girar 22s linear infinite}
.sello text{font:600 11.5px var(--f-c);letter-spacing:.06em;fill:currentColor}
@keyframes girar{to{transform:rotate(360deg)}}
.chapa{position:absolute;z-index:5;right:4%;top:12%;background:var(--papel);color:var(--tinta);border-radius:18px;padding:14px 16px;
  display:flex;gap:12px;align-items:center;box-shadow:0 20px 40px -18px rgba(0,0,0,.6);font-size:14px;line-height:1.3;max-width:240px;
  opacity:0;transform:translateY(20px)}
.chapa b{display:block;font:600 22px/1 var(--f-t);font-variation-settings:var(--fv)}
.chapa .ok{width:36px;height:36px;border-radius:50%;background:var(--salvia);display:grid;place-items:center;flex:none}
.listo .chapa{opacity:1;transform:none;transition:opacity .8s 1.3s,transform .8s 1.3s var(--ease)}
.desliza{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;color:var(--azul-claro);font-size:13px;
  display:flex;flex-direction:column;align-items:center;gap:8px}
.desliza i{display:block;width:1px;height:44px;background:var(--azul-claro);animation:caer 1.8s var(--ease) infinite;transform-origin:top}
@keyframes caer{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (max-width:900px){
  .heroe{padding:104px 0 80px;align-items:start}
  .heroe .contenido{grid-template-columns:1fr}
  .arcos{height:380px;margin-top:8px}
  .arco.a1{width:56%;height:92%;left:22%;top:0}
  .arco.a2{width:38%;height:62%;left:0;top:30%}
  .arco.a3{width:36%;height:58%;right:0;top:36%}
  .sello{width:96px;height:96px;left:0;top:-6px}
  .chapa{right:0;top:auto;bottom:-14px}
  .desliza{display:none}
  .heroe .ecg-fondo{bottom:10px;height:70px}
  .heroe{padding-bottom:110px}
}

/* ---------- cinta ---------- */
.cinta{background:var(--amarillo);color:var(--noche);overflow:hidden;padding:18px 0;border-block:2px solid var(--noche)}
.cinta .pista{display:flex;gap:48px;width:max-content;animation:cinta 38s linear infinite;font:600 clamp(20px,2.2vw,30px)/1 var(--f-t);font-variation-settings:var(--fv)}
.cinta .pista span{display:flex;align-items:center;gap:48px;white-space:nowrap}
.cinta svg{width:44px;height:20px;flex:none}
@keyframes cinta{to{transform:translateX(-50%)}}

/* ---------- secciones ---------- */
.seccion{padding:clamp(80px,12vw,168px) 0;position:relative}
.oscuro{background:var(--noche);color:var(--papel)}
.cabeza-seccion{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:32px;align-items:end;margin-bottom:clamp(40px,6vw,80px)}
@media (max-width:900px){.cabeza-seccion{grid-template-columns:1fr}}
.revela{opacity:0;transform:translateY(28px)}
.revela.dentro{opacity:1;transform:none;transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*1ms)}
.palabras .w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .08em .1em 0;margin:0 -.08em -.1em 0}
.palabras .w>span{display:inline-block;transform:translateY(105%)}
.palabras.dentro .w>span{transform:none;transition:transform .9s var(--ease);transition-delay:calc(var(--i)*45ms)}

/* ---------- recorrido: del día 1 a tu plaza ---------- */
.recorrido{background:var(--papel);position:relative}
.recorrido .fijo{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.recorrido .cabeza{padding:0 var(--gutter);max-width:var(--max);margin:0 auto 4vh;width:100%;display:flex;justify-content:space-between;align-items:end;gap:24px}
.recorrido .cabeza h2{font-size:clamp(38px,5vw,76px)}
.recorrido .progreso{font:600 15px var(--f-c);color:var(--gris);white-space:nowrap}
.recorrido .progreso b{font:600 40px/1 var(--f-t);color:var(--azul);font-variant-numeric:tabular-nums}
.pista-h{display:flex;gap:clamp(20px,3vw,48px);padding:0 var(--gutter);will-change:transform;position:relative}
.pista-h .linea{position:absolute;left:0;top:calc(min(42vh,400px) + 32px - 74px);height:120px;pointer-events:none;overflow:visible;z-index:3}
.pista-h .linea path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.pista-h .linea .base{stroke:rgba(19,32,58,.12);stroke-width:2}
.pista-h .linea .viva{stroke:var(--azul);stroke-width:3}
.parada{flex:none;width:min(420px,78vw);position:relative}
.parada figure{margin:0;height:min(42vh,400px);border-radius:var(--r-foto);overflow:hidden;background:var(--arena)}
.parada figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform 1.2s var(--ease)}
.parada.activa figure img{transform:scale(1)}
.parada .hito{display:flex;align-items:center;gap:12px;margin:22px 0 10px}
.parada .bola{position:relative;z-index:4;width:20px;height:20px;border-radius:50%;border:3px solid var(--azul);background:var(--papel);flex:none;transition:background .4s,transform .4s var(--ease)}
.parada.activa .bola{background:var(--amarillo);border-color:var(--noche);transform:scale(1.25)}
.parada .cuando{font:600 15px var(--f-c);color:var(--azul);background:var(--papel);padding:2px 10px 2px 6px;position:relative;z-index:4;border-radius:999px}
.parada h3{margin-bottom:8px}
.parada p{color:var(--gris);max-width:36ch}
.parada.final figure{box-shadow:0 0 0 6px var(--amarillo)}
@media (max-width:900px){
  .recorrido .fijo{position:static;height:auto;padding:88px 0}
  .recorrido .cabeza{flex-direction:column;align-items:start}
  .pista-h{flex-direction:column;transform:none!important;gap:56px}
  .pista-h .linea{display:none}
  .parada{width:100%}
  .parada figure{height:300px}
  .recorrido{height:auto!important}
}

/* ---------- tarjetas de test 3D ---------- */
.prueba{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.prueba{grid-template-columns:1fr}.carta.atras-1{transform:translate3d(14px,-22px,-80px) rotate(4deg)}.carta.atras-2{transform:translate3d(-12px,-36px,-160px) rotate(-5deg)}.mazo{height:520px}}
.mazo{position:relative;height:540px;perspective:1600px}
.carta{position:absolute;inset:0 0 auto;margin:auto;width:min(480px,100%);height:500px;border-radius:28px;transform-style:preserve-3d;
  transition:transform .9s var(--ease)}
.carta .cara{position:absolute;inset:0;border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:30px;
  display:flex;flex-direction:column;background:var(--papel-2);box-shadow:0 30px 60px -28px rgba(19,32,58,.45),0 0 0 1px rgba(19,32,58,.06)}
.carta.atras-1{transform:translate3d(36px,-26px,-80px) rotate(5deg);opacity:.9}
.carta.atras-2{transform:translate3d(-30px,-44px,-160px) rotate(-6deg);opacity:.75}
.carta.atras-1 .cara{background:var(--azul);color:var(--papel)}
.carta.atras-2 .cara{background:var(--amarillo);color:var(--noche)}
.carta .tema{font:600 14px var(--f-c);display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;color:var(--azul)}
.carta.atras-1 .tema,.carta.atras-2 .tema{color:inherit}
.carta .chip{font-size:12.5px;padding:6px 10px;border-radius:999px;background:rgba(27,63,139,.08)}
.carta .enunciado{font:500 clamp(21px,2vw,25px)/1.25 var(--f-t);font-variation-settings:var(--fv);margin-bottom:20px}
.opciones{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.opcion{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:1.5px solid rgba(19,32,58,.14);
  background:var(--papel);cursor:pointer;font-size:16px;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.opcion:hover{border-color:var(--azul);transform:translateX(4px)}
.opcion .letra{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--noche);color:var(--papel);font-weight:700;font-size:14px;flex:none}
.opcion.mal{border-color:var(--error);background:#FBEAE8;animation:sacudir .45s}
.opcion.mal .letra{background:var(--error)}
.opcion{position:relative}
.opcion .rodeo{position:absolute;left:-8px;top:-7px;width:calc(100% + 16px);height:calc(100% + 14px);overflow:visible;pointer-events:none}
.opcion .rodeo path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1200;stroke-dashoffset:1200}
.opcion.mal .rodeo path{stroke:var(--error);stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--ease)}
.opcion.si .rodeo path{stroke:var(--salvia);stroke-dashoffset:0;transition:stroke-dashoffset .5s var(--ease)}
@keyframes sacudir{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.carta .pista-carta{margin-top:auto;font-size:14px;color:var(--gris)}
.carta .dorso{transform:rotateY(180deg);background:var(--salvia);color:var(--papel)}
.carta.girada{transform:rotateY(180deg)}
.dorso .bien{display:flex;align-items:center;gap:12px;font:600 15px var(--f-c);margin-bottom:18px}
.dorso .bien span{width:36px;height:36px;border-radius:50%;background:var(--papel);color:var(--salvia);display:grid;place-items:center}
.dorso h3{font-size:clamp(28px,3vw,40px);margin-bottom:14px}
.dorso p{color:#E3ECE5;font-size:17px}
.dorso ol{margin:14px 0 0;padding-left:20px;color:#E3ECE5;font-size:15.5px;line-height:1.5}
.dorso .otra{margin-top:auto;align-self:start;background:none;border:0;color:var(--papel);text-decoration:underline;cursor:pointer;padding:8px 0}
.atras-1 .cara,.atras-2 .cara{justify-content:flex-end}
.atras-1 .grande,.atras-2 .grande{font:600 64px/1 var(--f-t);font-variation-settings:var(--fv)}

/* ---------- cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(159,182,232,.25)}
.cifra{padding:36px 24px 8px 0;border-right:1px solid rgba(159,182,232,.25)}
.cifra:last-child{border-right:0}
.cifra+.cifra{padding-left:24px}
.cifra .n{font:500 clamp(56px,7vw,112px)/.95 var(--f-t);font-variation-settings:var(--fv);letter-spacing:-.04em;color:var(--papel);font-variant-numeric:tabular-nums;display:block}
.cifra .n sup{font-size:.4em;color:var(--amarillo);vertical-align:top;margin-left:4px}
.cifra p{margin-top:14px;color:var(--azul-claro);max-width:24ch}
.cifra small{display:block;margin-top:8px;font-size:13px;color:#AEBDE0}
.cifra small a{color:inherit}
@media (max-width:900px){.cifras{grid-template-columns:1fr 1fr}.cifra{border-right:0;border-bottom:1px solid rgba(159,182,232,.25);padding:28px 12px 24px 0}.cifra+.cifra{padding-left:0}.cifra:nth-child(even){padding-left:16px;border-left:1px solid rgba(159,182,232,.25)}}

/* ---------- Julio ---------- */
.julio{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,96px);align-items:center}
@media (max-width:900px){.julio{grid-template-columns:1fr}}
.retrato{position:relative;aspect-ratio:4/5;border-radius:var(--r-foto);overflow:hidden;background:var(--azul)}
.retrato img{width:100%;height:100%;object-fit:cover;mix-blend-mode:luminosity;opacity:.55}
.retrato .monograma{position:absolute;inset:auto 0 0;padding:32px;color:var(--papel)}
.retrato .monograma b{display:block;font:500 clamp(80px,11vw,160px)/.85 var(--f-t);font-variation-settings:var(--fv);letter-spacing:-.05em;color:var(--amarillo)}
.retrato .monograma span{font-size:15px}
.datos-julio{list-style:none;padding:0;margin:32px 0 36px;display:grid;gap:0}
.datos-julio li{display:grid;grid-template-columns:56px 1fr;gap:16px;align-items:center;padding:18px 0;border-top:1px solid rgba(19,32,58,.12);font-size:18px}
.datos-julio li:last-child{border-bottom:1px solid rgba(19,32,58,.12)}
.datos-julio svg{width:40px;height:40px;color:var(--azul)}
.cita{font:400 italic clamp(24px,2.6vw,36px)/1.25 var(--f-t);font-variation-settings:var(--fv);margin:22px 0 0;color:var(--tinta)}

/* ---------- clases / precio ---------- */
.planes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:760px){.planes{grid-template-columns:1fr}}
.plan{position:relative;border-radius:32px;padding:36px;background:var(--papel-2);color:var(--tinta);overflow:hidden;
  box-shadow:0 0 0 1px rgba(19,32,58,.08);transition:transform .5s var(--ease)}
.plan:hover{transform:translateY(-6px)}
.plan.destacado{background:var(--amarillo);color:var(--noche)}
.plan .etiqueta{display:inline-block;font:600 13px var(--f-c);padding:7px 12px;border-radius:999px;background:var(--noche);color:var(--papel);margin-bottom:24px}
.plan .precio{font:500 clamp(72px,8vw,120px)/.9 var(--f-t);font-variation-settings:var(--fv);letter-spacing:-.05em;display:flex;align-items:flex-start;gap:6px}
.plan .precio small{font:600 18px/1.2 var(--f-c);letter-spacing:0;margin-top:14px}
.plan ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:12px}
.plan li{display:flex;gap:12px;align-items:flex-start}
.plan li svg{width:22px;height:22px;flex:none;margin-top:2px}
.oscuro .plan{box-shadow:none}

/* ---------- convocatoria ---------- */
.monitor-conv{border-radius:32px;background:var(--noche);color:var(--papel);padding:clamp(28px,4vw,56px);position:relative;overflow:hidden;
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,64px);align-items:center}
@media (max-width:760px){.monitor-conv{grid-template-columns:1fr}}
.monitor-conv .gran{font:500 clamp(96px,14vw,200px)/.85 var(--f-t);font-variation-settings:var(--fv);letter-spacing:-.05em;color:var(--amarillo);font-variant-numeric:tabular-nums}
.monitor-conv .estado{display:inline-flex;align-items:center;gap:10px;font:600 14px var(--f-c);color:var(--monitor);margin-bottom:14px}
.monitor-conv .estado i{width:9px;height:9px;border-radius:50%;background:var(--monitor);animation:latido 1.2s infinite}
.monitor-conv h3{font-size:clamp(24px,2.6vw,34px);margin-bottom:12px}
.monitor-conv p{color:#C9D5F0;max-width:60ch}
.monitor-conv .fuente{font-size:14px;color:#B8C6E6;margin-top:14px}
.monitor-conv a{color:var(--papel)}
.monitor-conv .ecg-mini{position:absolute;right:0;top:0;width:60%;height:100%;opacity:.12;pointer-events:none}

/* ---------- preguntas ---------- */
.faq{max-width:900px}
.faq details{border-top:1px solid rgba(19,32,58,.14)}
.faq details:last-child{border-bottom:1px solid rgba(19,32,58,.14)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:center;padding:26px 0;
  font:500 clamp(20px,2vw,26px)/1.25 var(--f-t);font-variation-settings:var(--fv)}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{width:40px;height:40px;border-radius:50%;border:1.5px solid currentColor;position:relative;flex:none;transition:transform .4s var(--ease),background .3s}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:currentColor;transform:translate(-50%,-50%)}
.faq summary i::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .4s var(--ease)}
.faq details[open] summary i{background:var(--amarillo);border-color:var(--amarillo)}
.faq details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq .resp{padding:0 0 26px;max-width:66ch;color:var(--gris);font-size:17px}

/* ---------- cierre ---------- */
.cierre{position:relative;min-height:92svh;display:grid;place-items:center;text-align:center;color:var(--papel);overflow:hidden;background:var(--noche)}
.cierre .fondo{position:absolute;inset:-10% 0;background-size:cover;background-position:center;will-change:transform}
.cierre .fondo img{width:100%;height:100%;object-fit:cover}
.cierre::before{content:"";position:absolute;inset:0;background:rgba(7,19,48,.74);z-index:1}
.cierre .envoltura{position:relative;z-index:2}
.cierre h2{font-size:clamp(48px,9vw,148px);line-height:.92;letter-spacing:-.04em;font-weight:500;margin-bottom:34px}
.cierre h2 em{color:var(--amarillo);font-weight:400}
.cierre .ecg-cierre{width:min(720px,90%);height:90px;margin:0 auto 26px;display:block;overflow:visible}
.cierre .ecg-cierre path{fill:none;stroke:var(--monitor);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(125,242,184,.7))}

/* ---------- pie ---------- */
.pie{background:var(--noche);color:#C9D5F0;padding:80px 0 40px;font-size:15px}
.pie .rejilla{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
@media (max-width:900px){.pie .rejilla{grid-template-columns:1fr 1fr}}
.pie img{width:150px}
.pie h4{font:600 14px var(--f-c);color:var(--papel);margin:0 0 14px}
.pie ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pie a{text-decoration:none}.pie a:hover{text-decoration:underline;color:var(--papel)}
.pie .legal{margin-top:56px;padding-top:24px;border-top:1px solid rgba(159,182,232,.2);display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;font-size:13.5px;color:#AEBDE0}
.pie .gigante{font:500 clamp(80px,17vw,260px)/.8 var(--f-t);font-variation-settings:var(--fv);letter-spacing:-.06em;color:var(--noche-2);margin-top:48px;user-select:none;white-space:nowrap}

/* ---------- cabecera de páginas interiores ---------- */
.portadilla{background:var(--noche);color:var(--papel);padding:clamp(130px,16vw,200px) 0 clamp(120px,12vw,170px);position:relative;overflow:hidden}
.portadilla .miga{font-size:14px;color:var(--azul-claro);margin-bottom:22px}
.portadilla .miga a{color:inherit}
.portadilla h1{font-size:clamp(46px,7.6vw,120px);line-height:.95;letter-spacing:-.035em;font-weight:500;max-width:14ch}
.portadilla h1 em{color:var(--amarillo);font-weight:400}
.portadilla .entradilla{color:#C9D5F0;margin:26px 0 34px}
.portadilla .ecg-fondo{position:absolute;left:0;right:0;bottom:14px;width:100%;height:84px;overflow:visible;pointer-events:none}
.portadilla .ecg-fondo path{fill:none;stroke:var(--monitor);stroke-width:2;opacity:.8;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(125,242,184,.6))}
.portadilla .foto-lado{position:absolute;right:var(--gutter);top:120px;width:min(30vw,380px);aspect-ratio:3/4;border-radius:var(--r-foto);overflow:hidden;opacity:.95}
.portadilla .foto-lado img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.portadilla .foto-lado{position:relative;right:auto;top:auto;width:62%;margin-top:40px}}

.lista-check{list-style:none;padding:0;margin:0;display:grid;gap:0}
.lista-check li{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;border-top:1px solid rgba(19,32,58,.12);font-size:18px;align-items:start}
.lista-check li:last-child{border-bottom:1px solid rgba(19,32,58,.12)}
.lista-check svg{width:32px;height:32px;color:var(--salvia)}
.pasos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:paso;list-style:none;padding:0;margin:0}
@media (max-width:820px){.pasos{grid-template-columns:1fr}}
.pasos li{padding:30px;border-radius:28px;background:var(--papel-2);box-shadow:0 0 0 1px rgba(19,32,58,.08)}
.pasos li::before{counter-increment:paso;content:counter(paso);display:block;font:500 72px/1 var(--f-t);color:var(--azul);margin-bottom:18px}
.pasos h3{margin-bottom:8px}.pasos p{color:var(--gris)}
.fichas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.fichas{grid-template-columns:1fr}}
.ficha{display:flex;flex-direction:column;gap:12px;padding:30px;border-radius:28px;background:var(--papel-2);text-decoration:none;
  box-shadow:0 0 0 1px rgba(19,32,58,.08);transition:transform .5s var(--ease),box-shadow .5s;min-height:260px}
.ficha:hover{transform:translateY(-6px);box-shadow:0 0 0 2px var(--azul),0 30px 60px -30px rgba(19,32,58,.4)}
.ficha .estado-f{align-self:start;font:600 13px var(--f-c);padding:7px 12px;border-radius:999px}
.ficha .estado-f.verde{background:var(--salvia-lavada);color:var(--salvia)}
.ficha .estado-f.gris{background:var(--arena);color:var(--tinta)}
.ficha .estado-f.amarillo{background:#FFF1C2;color:#6B4E00}
.ficha p{color:var(--gris)}
.ficha .ir{margin-top:auto;font-weight:600;color:var(--azul);display:flex;gap:8px;align-items:center}
.aviso-legal-mini{font-size:14px;color:var(--gris);max-width:70ch;margin-top:32px}
.rgpd{font-size:14px;color:var(--gris);display:grid;grid-template-columns:160px 1fr;gap:10px 24px;max-width:900px}
.rgpd dt{font-weight:600;color:var(--tinta)}
.rgpd dd{margin:0}
@media (max-width:640px){.rgpd{grid-template-columns:1fr}.rgpd dd{margin-bottom:10px}}

/* ---------- cursor ---------- */
.cursor,.cursor-punto{position:fixed;left:0;top:0;pointer-events:none;z-index:300;border-radius:50%;mix-blend-mode:difference}
.cursor{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid #fff;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s}
.cursor.grande{width:84px;height:84px;margin:-42px 0 0 -42px;background:#fff}
.cursor-punto{width:6px;height:6px;margin:-3px 0 0 -3px;background:#fff}
@media (hover:none),(pointer:coarse){.cursor,.cursor-punto{display:none}}

/* ---------- transición entre páginas ---------- */
.telon{position:fixed;inset:0;z-index:150;background:var(--noche);pointer-events:none;transform:translateY(100%);display:grid;place-items:center}
.telon svg{width:min(560px,80vw);height:120px;overflow:visible}
.telon path{fill:none;stroke:var(--monitor);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(125,242,184,.8))}
.telon.entra{transform:none;transition:transform .55s var(--ease-in)}
.telon.sale{transform:translateY(-100%);transition:transform .7s var(--ease)}
.telon.cubre{transform:none}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .titular .p,.revela,.palabras .w>span,.arco,.chapa,.heroe .entradilla,.heroe .acciones{opacity:1!important;transform:none!important}
  .intro,.telon,.cursor,.cursor-punto{display:none!important}
  .recorrido .fijo{position:static;height:auto;padding:88px 0}
  .pista-h{flex-wrap:wrap;transform:none!important}.pista-h .linea{display:none}
  .recorrido{height:auto!important}
}
html:not(.js) .revela,html:not(.js) .titular .p,html:not(.js) .palabras .w>span,html:not(.js) .arco,html:not(.js) .chapa,
html:not(.js) .heroe .entradilla,html:not(.js) .heroe .acciones{opacity:1;transform:none}
html:not(.js) .intro{display:none}

/* Foto de Julio (bloque de la portada) */
.retrato.foto-julio{aspect-ratio:auto;background:none;border-radius:0;overflow:visible}
.retrato.foto-julio img{aspect-ratio:4/5;height:auto;border-radius:var(--r-foto);mix-blend-mode:normal;opacity:1;object-fit:cover;background:var(--papel-2)}
.retrato.foto-julio figcaption{margin-top:16px}
.retrato.foto-julio figcaption b{display:block;font:600 24px/1.1 var(--f-t);font-variation-settings:var(--fv);letter-spacing:-.01em}
.retrato.foto-julio figcaption span{font-size:15px;color:var(--gris)}
/* contraste AA del texto pequeño sobre fondos oscuros */
.heroe .nota-boton,.portadilla .nota-boton,.cierre .nota-boton{color:var(--azul-claro)}
/* el titular de la portadilla no pisa la foto en arco */
@media (min-width:901px){.portadilla:has(.foto-lado) h1{max-width:calc(100% - min(30vw,380px) - 48px)}}
/* Web v1 (auditoría 17-10): zonas táctiles del pie en móvil ≥ 44 px de alto */
@media (max-width:900px){.pie a{display:inline-block;min-height:44px;line-height:44px;padding:0 4px}}

/* Pie «Imagen ilustrativa» en fotos de banco (fila de tiempo y /clases/) */
.parada figure,.foto-lado{position:relative}
.parada figure figcaption,.foto-lado figcaption{position:absolute;left:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.88);color:#2a2a2a;font-size:.75rem;line-height:1.3}