/* ATCO Academy — sistema de diseño de la web (maqueta v2). Oscuro, "sala de control": rejilla fina,
   tipografía grande, etiquetas en monoespaciada tipo ficha de vuelo, ámbar como único acento. */
:root{--bg:#060B16;--bg2:#0A1222;--panel:#0E1830;--panel2:#121F3D;--line:rgba(255,255,255,.09);--line2:rgba(255,255,255,.16);
--tx:#EEF2FA;--sub:#9AA8C2;--mut:#7281A1;--amber:#F2B544;--amber2:#FFD27A;--cyan:#5CD6FF;--green:#3DDC97;--red:#FF6B5E;--paper:#F4F1EA;--ink:#0B1222;
--r:20px;--max:1200px;--disp:"Space Grotesk",Inter,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:16px/1.65 Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:72px 72px;mask-image:radial-gradient(ellipse 90% 70% at 50% 0,#000 0,transparent 75%);opacity:.5}
main,header,footer{position:relative;z-index:1}a{color:inherit;text-decoration:none}img,svg{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--disp);font-weight:600;letter-spacing:-.035em;line-height:1.02;margin:0}
h1{font-size:clamp(44px,7.4vw,104px)}h2{font-size:clamp(34px,4.8vw,64px)}h3{font-size:clamp(20px,2vw,26px);letter-spacing:-.02em;line-height:1.15}
p{margin:0}.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}.sub{color:var(--sub)}.amber{color:var(--amber)}
.mono{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sub)}
.tagline{display:inline-flex;align-items:center;gap:10px}.tagline:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 0 rgba(242,181,68,.6);animation:ping 2.2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 12px rgba(242,181,68,0)}100%{box-shadow:0 0 0 0 rgba(242,181,68,0)}}
section{padding:clamp(80px,11vw,150px) 0}.lead{font-size:clamp(17px,1.5vw,21px);color:var(--sub);max-width:640px}
.sec-head{display:grid;grid-template-columns:200px 1fr;gap:32px;margin-bottom:64px;align-items:start}.sec-head .mono{padding-top:14px;border-top:1px solid var(--line2)}.sec-head h2{max-width:900px}.sec-head .lead{margin-top:22px}
/* botones */
.btn{display:inline-flex;align-items:center;gap:12px;font:600 15px/1 Inter;padding:18px 26px;border-radius:999px;border:1px solid transparent;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,color .2s;will-change:transform;cursor:pointer}
.btn svg{width:16px;height:16px;transition:transform .25s}.btn:hover svg{transform:translateX(4px)}
.btn-a{background:var(--amber);color:#1a1200}.btn-a:hover{background:var(--amber2)}.btn-o{border-color:var(--line2);color:var(--tx)}.btn-o:hover{background:rgba(255,255,255,.06)}.btn-k{background:var(--ink);color:#fff}
/* nav */
.nav{position:fixed;top:14px;left:0;right:0;z-index:80;pointer-events:none}.nav .in{pointer-events:auto;max-width:var(--max);margin:0 auto;padding:10px 12px 10px 22px;display:flex;align-items:center;gap:26px;background:rgba(10,18,34,.72);backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--line);border-radius:999px}
.logo{font:700 17px var(--disp);letter-spacing:-.02em}.logo i{font-style:normal;color:var(--amber)}.nav nav{display:flex;gap:24px;margin-left:auto;font-size:14.5px;color:var(--sub)}.nav nav a:hover,.nav nav a.on{color:var(--tx)}.nav .btn{padding:12px 18px;font-size:14px}.nav .login{font-size:14.5px;color:var(--tx)}
.burger{display:none;margin-left:auto;width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);background:none;color:#fff}
/* revelado al hacer scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}
.split .w{display:inline-block;overflow:hidden;vertical-align:top}.split .w>span{display:inline-block;transform:translateY(105%);transition:transform 1s cubic-bezier(.2,.8,.2,1)}.split.in .w>span{transform:none}
/* hero */
.hero{min-height:100vh;display:flex;align-items:flex-end;padding:150px 0 70px;position:relative;overflow:hidden}
#radar{position:absolute;right:-12vw;top:50%;width:min(92vh,980px);height:min(92vh,980px);transform:translateY(-50%);opacity:.95}
.hero:after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,var(--bg));pointer-events:none}
.hero .wrap{position:relative;z-index:2;width:100%}.hero h1{max-width:1000px;margin:26px 0 30px}.hero .lead{margin-bottom:38px}.cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-foot{display:flex;gap:36px;flex-wrap:wrap;margin-top:70px;padding-top:24px;border-top:1px solid var(--line)}.hero-foot div{font-size:14px;color:var(--sub)}.hero-foot b{display:block;font:600 30px var(--disp);color:var(--tx);letter-spacing:-.03em}
/* marquesina */
.marq{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;background:var(--bg2)}.marq .t{display:flex;gap:56px;width:max-content;animation:mq 38s linear infinite;font:500 clamp(18px,2.2vw,28px) var(--disp);letter-spacing:-.02em;color:var(--sub)}.marq b{color:var(--tx);font-weight:600}.marq i{font-style:normal;color:var(--amber)}
@keyframes mq{to{transform:translateX(-50%)}}
/* scrollytelling SRS: columna pegada con la curva + pasos que pasan */
.story{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}.story .stick{position:sticky;top:110px}
.graph{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 18px}
.graph svg{width:100%;height:auto;overflow:visible}.graph .legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--sub)}.graph .legend i{display:inline-block;width:18px;height:3px;border-radius:2px;margin-right:8px;vertical-align:middle}
.graph .big{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}.graph .big b{font:600 54px/1 var(--disp);letter-spacing:-.04em}.graph .big span{font-size:13px;color:var(--sub);text-align:right;max-width:180px}
.beat{min-height:72vh;display:flex;flex-direction:column;justify-content:center;opacity:.28;transition:opacity .5s}.beat.on{opacity:1}.beat .mono{margin-bottom:16px;color:var(--amber)}.beat h3{font-size:clamp(26px,2.8vw,38px);margin-bottom:16px}.beat p{color:var(--sub);font-size:17px;max-width:480px}
.boxes{display:flex;gap:8px;margin-top:22px}.boxes div{flex:1;border:1px solid var(--line2);border-radius:12px;padding:12px 8px;text-align:center;font:500 11px var(--mono);color:var(--sub);letter-spacing:.06em}.boxes b{display:block;font:600 20px var(--disp);color:var(--tx);letter-spacing:-.02em;margin-bottom:4px}
/* ruta de vuelo (niveles) */
.route{position:relative}.route svg.path{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}.route .wp{display:grid;grid-template-columns:120px 1fr 1fr;gap:34px;padding:46px 0;border-top:1px solid var(--line);align-items:start}
.route .wp .id{background:var(--bg);padding:6px 0;position:relative;z-index:1;font:600 56px/1 var(--disp);letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px var(--line2)}.route .wp.in .id{color:var(--amber);-webkit-text-stroke:0}.route .wp p{color:var(--sub)}.route .wp ul{margin:0;padding:0;list-style:none;font-size:15px;color:var(--sub)}.route .wp li{padding:9px 0;border-bottom:1px dashed var(--line)}.route .wp li b{color:var(--tx);font-weight:600}
/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(190px,auto);gap:16px}.cell{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;position:relative;overflow:hidden;transition:border-color .3s,transform .4s cubic-bezier(.2,.8,.2,1)}
.cell:hover{border-color:var(--line2)}.cell:before{content:"";position:absolute;inset:0;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(242,181,68,.10),transparent 60%);opacity:0;transition:opacity .3s}.cell:hover:before{opacity:1}
.cell>*{position:relative}.cell h3{margin:14px 0 10px}.cell p{color:var(--sub);font-size:15.5px}.cell .num{font:600 clamp(48px,6vw,84px)/.95 var(--disp);letter-spacing:-.05em}.c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.r2{grid-row:span 2}
.cell.hi{background:var(--amber);color:#1a1200;border-color:transparent}.cell.hi p,.cell.hi .mono{color:#4d3a08}.cell.paper{background:var(--paper);color:var(--ink)}.cell.paper p,.cell.paper .mono{color:#5b6172}
.ico{width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);display:grid;place-items:center}.ico svg{width:20px;height:20px;stroke:var(--amber);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* fichas de vuelo (fases) en scroll horizontal */
.hscroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 28px 26px;margin:0 -28px;scrollbar-width:none}.hscroll::-webkit-scrollbar{display:none}
.strip{flex:0 0 min(420px,82vw);scroll-snap-align:start;background:var(--paper);color:var(--ink);border-radius:16px;padding:0;overflow:hidden;display:flex;flex-direction:column}
.strip .top{display:flex;justify-content:space-between;padding:14px 20px;font:600 11px var(--mono);letter-spacing:.14em;border-bottom:2px solid var(--ink)}.strip .bd{padding:24px 20px 26px;flex:1}.strip h3{font-size:26px;margin-bottom:12px}.strip ul{margin:0;padding:0;list-style:none;font-size:15px;color:#3a4357}.strip li{padding:9px 0;border-top:1px solid rgba(11,18,34,.12)}.strip li b{color:var(--ink)}
.strip.dk{background:var(--panel2);color:var(--tx)}.strip.dk .top{border-color:var(--amber);color:var(--amber)}.strip.dk ul{color:var(--sub)}.strip.dk li{border-color:var(--line)}.strip.dk li b{color:var(--tx)}
/* tarjetas de producto / coaching / precios */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.cards.c4x{grid-template-columns:repeat(4,1fr)}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:12px;transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s}.card:hover{transform:translateY(-6px);border-color:var(--line2)}
.card p{color:var(--sub);font-size:15.5px}.card .price{font:600 40px/1 var(--disp);letter-spacing:-.04em;margin-top:6px}.card .price small{font:500 15px Inter;color:var(--sub);letter-spacing:0}.card ul{list-style:none;margin:6px 0 10px;padding:0;font-size:15px;color:var(--sub);flex:1}.card li{padding:8px 0 8px 24px;position:relative;border-top:1px solid var(--line)}.card li:before{content:"";position:absolute;left:2px;top:15px;width:10px;height:6px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.card.best{background:var(--amber);color:#1a1200;border-color:transparent}.card.best p,.card.best ul,.card.best .mono,.card.best .price small{color:#4d3a08}.card.best li{border-color:rgba(26,18,0,.15)}.card.best li:before{border-color:#1a1200}.card .btn{justify-content:center;margin-top:auto}
.cover{aspect-ratio:3/4;border-radius:10px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;font-family:var(--disp);box-shadow:0 30px 50px -25px rgba(0,0,0,.8),inset 6px 0 0 rgba(0,0,0,.18);transform:perspective(900px) rotateY(-14deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);margin-bottom:10px}.card:hover .cover{transform:perspective(900px) rotateY(0)}.cover b{font-size:70px;line-height:.85;letter-spacing:-.06em}.cover span{font:600 11px var(--mono);letter-spacing:.12em}
.deck{position:relative;aspect-ratio:3/4;margin-bottom:10px}.deck i{position:absolute;inset:8% 12%;border-radius:14px;background:var(--paper);border:1px solid rgba(0,0,0,.2);box-shadow:0 20px 30px -18px rgba(0,0,0,.7)}.deck i:nth-child(1){transform:rotate(-9deg)}.deck i:nth-child(2){transform:rotate(-3deg);background:#fff}.deck i:nth-child(3){transform:rotate(5deg);background:var(--amber);display:grid;place-items:center;font:600 22px var(--disp);font-style:normal;color:#1a1200;text-align:center;padding:14px}
/* comparativa */
.cmp{overflow-x:auto}.cmp table{width:100%;min-width:700px;border-collapse:collapse;font-size:15px}.cmp th,.cmp td{padding:18px 16px;text-align:left;border-bottom:1px solid var(--line)}.cmp th{font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--sub)}.cmp td:first-child{color:var(--sub)}.cmp .me{background:rgba(242,181,68,.08);color:var(--tx)}.cmp th.me{color:var(--amber)}
/* cita, faq, cta final, pie */
.quote{font:500 clamp(26px,3.4vw,46px)/1.15 var(--disp);letter-spacing:-.03em;max-width:1000px}.quote em{font-style:normal;color:var(--amber)}
details{border-top:1px solid var(--line);padding:26px 0}details:last-of-type{border-bottom:1px solid var(--line)}summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;font:500 clamp(18px,1.8vw,23px) var(--disp);letter-spacing:-.02em}summary::-webkit-details-marker{display:none}summary:after{content:"+";color:var(--amber);font-weight:400;font-size:28px;line-height:.8;transition:transform .3s}details[open] summary:after{transform:rotate(45deg)}details p{color:var(--sub);margin-top:16px;max-width:760px}
.final{position:relative;border:1px solid var(--line);border-radius:32px;padding:clamp(48px,8vw,110px) 28px;text-align:center;overflow:hidden;background:radial-gradient(700px 320px at 50% 120%,rgba(242,181,68,.22),transparent 70%),var(--panel)}.final h2{max-width:900px;margin:18px auto 28px}
footer{border-top:1px solid var(--line);padding:70px 0 40px;color:var(--sub);font-size:14.5px}footer .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}footer a{display:block;padding:5px 0}footer a:hover{color:var(--tx)}footer .mono{margin-bottom:14px}footer .big{font:600 clamp(60px,15vw,210px)/.8 var(--disp);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--line2);margin-top:70px;white-space:nowrap}
/* cabecera de páginas interiores */
.phero{padding:190px 0 90px;position:relative;overflow:hidden}.phero h1{font-size:clamp(40px,6vw,84px);max-width:1000px;margin:24px 0 26px}.phero .orb{position:absolute;right:-180px;top:-120px;width:640px;height:640px;border-radius:50%;border:1px solid var(--line);box-shadow:0 0 0 80px rgba(255,255,255,.015),0 0 0 170px rgba(255,255,255,.012),inset 0 0 120px rgba(242,181,68,.10)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.kv{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}.kv div{padding:28px;border-left:1px solid var(--line)}.kv div:first-child{border-left:0}.kv b{display:block;font:600 44px/1 var(--disp);letter-spacing:-.04em;margin-bottom:8px}.kv span{font-size:14px;color:var(--sub)}
.form{display:flex;gap:10px;max-width:520px}.form input{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:999px;padding:17px 22px;color:var(--tx);font:500 15px Inter}.form input::placeholder{color:var(--mut)}
.list{margin:0;padding:0;list-style:none}.list li{display:grid;grid-template-columns:70px 1fr auto;gap:20px;align-items:baseline;padding:22px 0;border-top:1px solid var(--line)}.list li:last-child{border-bottom:1px solid var(--line)}.list .n{font:500 13px var(--mono);color:var(--amber)}.list h3{font-size:22px}.list p{color:var(--sub);font-size:15px;margin-top:4px}.list .m{font:500 12px var(--mono);color:var(--sub);letter-spacing:.08em}
.mcta{display:none}
@media(max-width:940px){.nav nav,.nav .login,.nav .in>.btn{display:none}.nav .in{margin:0 12px}.burger{display:block}.nav.open nav{display:flex;position:absolute;top:66px;left:12px;right:12px;flex-direction:column;gap:0;background:var(--bg2);border:1px solid var(--line);border-radius:22px;padding:10px 22px}.nav.open nav a{padding:14px 0;border-top:1px solid var(--line);font-size:17px;color:var(--tx)}.nav.open nav a:first-child{border:0}
.sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}.story,.two{grid-template-columns:1fr;gap:30px}.story .stick{position:relative;top:0}.beat{min-height:auto;opacity:1;padding:26px 0}.route .wp{grid-template-columns:1fr;gap:12px;padding:32px 0}.bento{grid-template-columns:1fr 1fr}.c2,.c3,.c4{grid-column:span 2}.cards,.cards.c4x{grid-template-columns:1fr}.kv{grid-template-columns:1fr 1fr}.kv div{border-left:0;border-top:1px solid var(--line)}footer .cols{grid-template-columns:1fr 1fr}#radar{right:-45vw;opacity:.5}.hero{padding-top:130px}.hero-foot{gap:22px}.form{flex-direction:column}.list li{grid-template-columns:44px 1fr}.list .m{display:none}
.mcta{display:block;position:fixed;left:14px;right:14px;bottom:14px;z-index:70}.mcta .btn{width:100%;justify-content:center;box-shadow:0 20px 40px -10px rgba(0,0,0,.8)}body{padding-bottom:84px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.split .w>span{opacity:1;transform:none}}
/* modo captura (?shot): todo revelado, para revisar la página entera en una imagen */
.shot .rv,.shot .split .w>span{opacity:1!important;transform:none!important}.shot .hero{min-height:900px}.shot .beat{opacity:1;min-height:auto;padding:36px 0}.shot .story .stick{position:relative;top:0}.shot .route .wp .id{color:var(--amber);-webkit-text-stroke:0}.shot .nav{position:absolute}.shot .mcta{display:none}

/* formularios: mensaje y pop-up del temario */
.fmsg{margin-top:12px;font-size:14px;color:var(--sub);min-height:20px;max-width:520px}
.modal{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:20px}.modal.on{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(3,6,14,.72);backdrop-filter:blur(8px)}
.modal-box{position:relative;width:min(520px,100%);background:radial-gradient(520px 260px at 100% 0,rgba(242,181,68,.16),transparent 70%),var(--panel);border:1px solid var(--line2);border-radius:26px;padding:38px 34px 30px;box-shadow:0 40px 120px -20px rgba(0,0,0,.8);animation:pop .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}}
.modal-box h3{font-size:clamp(26px,3vw,34px);margin:16px 0 12px}.modal-box p{color:var(--sub);font-size:15.5px;margin-bottom:22px}
.modal-x{position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line2);background:none;color:var(--tx);font-size:22px;line-height:1;cursor:pointer}.modal-x:hover{background:rgba(255,255,255,.06)}
.mform{display:grid;gap:10px}.mform input{background:rgba(255,255,255,.05);border:1px solid var(--line2);border-radius:14px;padding:16px 18px;color:var(--tx);font:500 15px Inter;outline:none}.mform input:focus{border-color:var(--amber)}.mform input::placeholder{color:var(--mut)}.mform .btn{justify-content:center;margin-top:6px}
.modal-box small{display:block;margin-top:14px;font-size:12.5px;color:var(--mut);line-height:1.5}.modal-box small a{text-decoration:underline}

/* ── Móvil: que nada se salga del ancho de la pantalla ──────────────────────
   En un teléfono de 375 px el sitio medía 414 y se podía arrastrar de lado,
   con los botones y las tarjetas cortados. Tres causas y una red de seguridad. */
/* 1. Las celdas de rejilla y de flex no bajan de su contenido mínimo si no se
      les dice: sin esto, una fila de datos ancha estira toda la columna. */
.two>*,.kv>*,.story>*,.bento>*,.cards>*,.wp>*,.list li>*{min-width:0}
summary{min-width:0}
/* 2. El logotipo gigante del pie no cabía: 60 px de mínimo son 386 px de ancho.
      Se deja que escale con la pantalla y se recorta lo que sobre. */
footer .big{font-size:clamp(26px,12.5vw,190px);overflow:hidden}
/* 3. Nada de red de seguridad en «html»: el body ya lleva overflow-x:hidden, y
      ese par (html recortado + body oculto) convierte al body en contenedor de
      scroll y deja sin efecto todos los position:sticky. Se arreglan las causas
      y punto; las 14 páginas miden ya justo el ancho de la pantalla. */
@media(max-width:560px){
  .boxes{flex-wrap:wrap}           /* los cinco separadores de la caja de flashcards */
  .kv{grid-template-columns:1fr}   /* los datos en dos columnas no caben */
  .kv div{border-left:0}
  .deck{max-width:100%}
  /* las portadas van giradas en 3D y su caja visual sobresale de la de
     maquetación: en una pantalla estrecha eso son 35 px de más */
  /* «aspect-ratio» + min-width:auto: la altura de la fila le impone a la portada
     un ancho mínimo mayor que su columna y estira la rejilla */
  .cover{transform:none;min-width:0}
  .price{font-size:clamp(32px,11vw,64px)}
}

/* ── El relato con scroll del método SRS, también en el móvil ───────────────
   Antes la gráfica dejaba de estar fija por debajo de 940 px: se iba de la
   pantalla nada más empezar a leer y el lector nunca veía cambiar la curva,
   que es justo lo que cuenta la sección. Ahora se ancla arriba, compacta, y
   los textos pasan por debajo. Funciona porque el recorte global es
   «overflow-x:clip», que no crea contenedor de scroll y no rompe el sticky. */
@media(max-width:940px){
  /* En bloque, no en rejilla: con una sola columna cada hijo es su propia fila
     y el sticky se queda sin recorrido, así que la gráfica se iba igualmente. */
  .story{display:block}
  .story .stick{position:sticky;top:72px;z-index:4;padding:10px 0 16px;background:var(--bg);box-shadow:0 18px 22px -14px var(--bg)}
  .story .graph{padding:16px 16px 10px}
  .story .graph svg{max-height:34vh}
  .beat{min-height:58vh;justify-content:center;opacity:.3;padding:0}
  .beat.on{opacity:1}
  .beat h3{font-size:clamp(22px,6.4vw,30px)}
  .beat p{font-size:16px}
}

/* ── Portadas reales de los libros ──────────────────────────────────────────
   Antes eran marcadores hechos con CSS. Mantienen el mismo giro en 3D y la
   misma sombra que tenía el marcador, para no cambiar el lenguaje visual. */
.bookimg{display:block;width:100%;height:auto;aspect-ratio:850/1100;object-fit:cover;border-radius:10px;
  box-shadow:0 30px 50px -25px rgba(0,0,0,.8),inset 6px 0 0 rgba(0,0,0,.18);
  transform:perspective(900px) rotateY(-14deg);transition:transform .6s cubic-bezier(.2,.8,.2,1);margin-bottom:10px}
.card:hover .bookimg{transform:perspective(900px) rotateY(0)}
/* La colección de tres, apilada: se lee de un vistazo que son varios libros. */
.pila{position:relative;aspect-ratio:1/.99;margin-bottom:10px}
.pila img{position:absolute;top:0;width:66%;height:auto;aspect-ratio:850/1100;object-fit:cover;border-radius:9px;
  box-shadow:0 26px 40px -22px rgba(0,0,0,.9);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
/* abanico de izquierda a derecha, con el primer libro delante */
.pila img:nth-child(1){left:0;z-index:3;transform:rotate(-5deg)}
.pila img:nth-child(2){left:17%;z-index:2;transform:translateY(5%)}
.pila img:nth-child(3){left:34%;z-index:1;transform:rotate(5deg) translateY(10%)}
.card:hover .pila img:nth-child(1){transform:rotate(-9deg) translateY(-3%)}
.card:hover .pila img:nth-child(3){transform:rotate(9deg) translateY(6%)}
@media(max-width:560px){.bookimg{transform:none}.pila img{transition:none}}

/* La barra y el botón fijo se apartan al bajar y vuelven al subir. Se mueven con transform
   para que el navegador no tenga que recalcular nada mientras se hace scroll. */
.nav{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.nav.fuera{transform:translateY(calc(-100% - 22px))}
.mcta{transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.mcta.fuera{transform:translateY(calc(100% + 22px))}
@media(prefers-reduced-motion:reduce){.nav.fuera,.mcta.fuera{transform:none}}

/* Módulo de enlaces internos del final de cada página. Sin estilos propios casi:
   reutiliza las tarjetas, solo aligera el espacio porque va pegado al pie. */
.rel{padding-top:0}
.rel .sec-head{margin-bottom:34px}
.rel .card h3{font-size:clamp(18px,1.7vw,21px)}
.rel .card p{color:var(--sub);font-size:14.5px}

/* Índice real de cada módulo del temario, sacado de los PDF oficiales. */
.list .idx{list-style:none;margin:12px 0 0;padding:0;color:var(--sub);font-size:14.5px;line-height:1.6}
.list .idx li{display:inline;margin:0}
.list .idx li+li:before{content:" · ";color:var(--mut)}
.list .dato{margin-top:12px;font-size:13px;color:var(--mut)}
.list .dato b{color:var(--sub);font-weight:600}