/* =======================================================================
   /learn — hoja única para el índice y para las guías.

   Los tokens de abajo son LOS MISMOS que el :root de marketing/landing/
   index.html, copiados a propósito: el landing es un archivo autocontenido
   de 660 KB y partirle el <style> para compartir variables es más riesgoso
   que duplicarlas. Nada las compara desde que /learn lo sirve
   supplai-sitio: un token que cambia en el landing se cambia acá también.
   ======================================================================= */
:root{
  --page-bg:#F5F2ED; --paper:#F5F2ED; --paper-2:#FAF7F2;
  --card:#FDFBF7; --card-2:#F1EDE5; --rule:#E3DED4; --rule-soft:#EDE9E1;
  --ink:#0C0B0A; --ink-2:#4B463E; --ink-3:#8A8377;
  --accent:#2151E0; --accent-2:#5B84F5; --accent-wash:#E4EAFD;
  --d-red:#C43D3D; --d-green:#128A5B; --d-amber:#B8720B;
  --night:#0E0D0C; --night-2:#171512; --night-rule:#2B2723;
  --night-ink:#F3EFE8; --night-ink2:#A79F93;
  --font-display:'Instrument Sans','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'Space Mono','SF Mono',ui-monospace,Consolas,monospace;
  --medida:72ch;
  color-scheme:light;
}
/* El landing arranca en claro y sólo cambia si el visitante eligió, así que
   acá igual: nada de prefers-color-scheme. El tema elegido viaja en
   localStorage("supplai-theme") y lo aplica el script del <head> antes de
   pintar, para que no haya flash al venir del home. */
:root[data-theme="dark"]{
  --page-bg:#100E0D; --paper:#100E0D; --paper-2:#15130F;
  --card:#191713; --card-2:#201D18; --rule:#2E2A24; --rule-soft:#24211C;
  --ink:#F4F0E8; --ink-2:#B0A99D; --ink-3:#857E72;
  --accent:#7FA0FF; --accent-2:#A8BEFF; --accent-wash:#1B2135;
  --d-red:#F07171; --d-green:#45C793; --d-amber:#E5A23C;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:92px;}
body{
  margin:0; background:var(--page-bg); color:var(--ink);
  font-family:var(--font-body); font-size:17px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto;}
a{color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:.07em;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px;}

/* ── barra de progreso de lectura ───────────────────────── */
.prog{position:fixed; top:0; left:0; height:2px; width:0; z-index:60;
  background:var(--accent); transition:width .12s linear;}

/* ── cabecera ───────────────────────────────────────────── */
.hdr{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--page-bg) 88%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--rule);}
/* Misma caja que `.shell`, así la marca arranca en la misma vertical que el
   riel de abajo. Si cambiás una, cambiá la otra: dos contenedores con anchos
   distintos se ven desalineados sin que se entienda por qué. */
.hdr-in{position:relative; max-width:1460px; margin:0 auto;
  padding:13px clamp(18px,3vw,46px); display:flex; align-items:center; gap:16px;}
.marca{display:flex; align-items:center; gap:9px; font-weight:700; font-size:1rem;
  letter-spacing:-.02em; color:var(--ink); text-decoration:none;}
.marca svg{display:block; flex:none;}
/* "Supplai | Academy": dos links que se leen como una marca. El filete
   vertical es lo que los junta y a la vez dice que son dos cosas. */
.marca-sec{display:flex; align-items:center; flex:none;}
.miga{margin-left:11px; padding-left:11px; border-left:1px solid var(--rule);
  font-size:.96rem; font-weight:500; letter-spacing:-.01em; line-height:1.15;
  color:var(--ink-2); text-decoration:none;}
.miga:hover{color:var(--accent);}
/* Las dos secciones. Centradas de verdad, contra el ancho de la barra y no
   contra lo que sobra entre la marca y los botones: absoluto, porque los dos
   costados no miden lo mismo y en flex el centro se corre con ellos. */
.hdr-nav{position:absolute; left:50%; transform:translateX(-50%);
  display:flex; gap:24px;}
.hdr-nav a{font-size:.94rem; color:var(--ink-3); text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid transparent;}
.hdr-nav a:hover{color:var(--ink);}
.hdr-nav a.aqui{color:var(--ink); font-weight:600; border-bottom-color:var(--accent);}
/* Una sección que todavía no abrió: se nombra, no se linkea. */
.apagado{display:inline-flex; align-items:center; gap:7px; font-size:.94rem;
  color:var(--ink-3); cursor:default; padding-bottom:3px; border-bottom:2px solid transparent;}
.apagado em{font-style:normal; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  border:1px solid var(--accent-wash); background:var(--accent-wash);
  border-radius:4px; padding:1px 5px;}
/* El menú del teléfono. Fuera del teléfono no existe: el botón no se ve y
   el panel queda con su `hidden`. Ojo con darle display al panel sin el
   :not([hidden]): una clase con display le gana al hidden del navegador, y
   así fue como el modal del piloto arrancaba abierto. */
.hdr .menu-btn{display:none;}
.menu-btn path{transition:transform .18s ease, opacity .18s ease; transform-origin:10px 10px;}
.menu-btn[aria-expanded="true"] .m1{transform:translateY(4px) rotate(45deg);}
.menu-btn[aria-expanded="true"] .m2{opacity:0;}
.menu-btn[aria-expanded="true"] .m3{transform:translateY(-4px) rotate(-45deg);}
/* El cajón: entra desde la derecha sobre un fondo que oscurece la página, y
   se cierra tocando el fondo, la cruz, Escape o cualquier link de adentro. */
.cajon:not([hidden]){position:fixed; inset:0; z-index:95;}
.cajon-fondo{position:absolute; inset:0; background:rgba(12,11,10,.4);
  animation:cajon-fondo .22s ease both;}
.cajon-panel{position:absolute; top:0; right:0; bottom:0; width:min(340px,86vw);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px));
  background:var(--page-bg); border-left:1px solid var(--rule);
  box-shadow:-18px 0 40px -24px rgba(0,0,0,.45);
  animation:cajon-entra .28s cubic-bezier(.2,.8,.2,1) both;}
.cajon-cab{display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px; margin-bottom:6px; border-bottom:1px solid var(--rule);}
.cajon-marca{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;}
.cajon-marca i{font-style:normal; font-weight:500; color:var(--ink-2); margin-left:4px;}
.cajon-sec{display:flex; align-items:center; gap:8px; padding:14px 2px 8px;
  font-size:1.08rem; font-weight:600; color:var(--ink); text-decoration:none;}
.cajon-sec.apagado{font-weight:500; color:var(--ink-3); padding-top:14px;
  border-top:1px solid var(--rule-soft); margin-top:10px;}
.cajon-cursos{display:flex; flex-direction:column; gap:2px;}
.cajon-cursos a{display:flex; flex-direction:column; gap:1px; padding:9px 12px;
  border-radius:9px; color:var(--ink); text-decoration:none; font-size:.98rem;}
.cajon-cursos a small{font-size:.78rem; color:var(--ink-3);}
.cajon-cursos a.aqui{background:var(--accent-wash); color:var(--accent); font-weight:600;}
.cajon-cursos a:active{background:var(--card-2);}
.cajon-idioma{padding:14px 2px; color:var(--ink-3); text-decoration:none; font-size:.94rem;
  border-top:1px solid var(--rule-soft);}
.cajon-cta{margin-top:auto; padding-top:18px;}
.cajon-cta .btn{display:flex; justify-content:center; width:100%; padding:12px 16px;}
body.menu-abierto{overflow:hidden;}
@keyframes cajon-entra{from{transform:translateX(100%);}}
@keyframes cajon-fondo{from{opacity:0;}}
.hdr-der{margin-left:auto; display:flex; align-items:center; gap:14px;}
.tema{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:1px solid var(--rule); border-radius:8px; background:none; color:var(--ink-2);
  cursor:pointer;}
.tema:hover{color:var(--ink); border-color:var(--ink-3);}
.idioma{font-size:.9rem; color:var(--ink-3); text-decoration:none;}
.idioma:hover{color:var(--accent);}
.btn{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--accent);
  background:var(--accent); color:#fff; border-radius:9px; padding:9px 15px;
  font-family:var(--font-body); font-size:.88rem; font-weight:600; cursor:pointer;
  text-decoration:none; transition:opacity .15s;}
.btn:hover{opacity:.88; color:#fff;}
.btn.fant{background:none; color:var(--ink); border-color:var(--rule);}
.btn.fant:hover{border-color:var(--ink-3); opacity:1;}

/* ── armazón con riel ───────────────────────────────────── */
/* El riel vive contra el borde, no dentro de una caja centrada: es
   navegación, y la navegación pegada al texto se lee como parte del texto.
   La columna de lectura sí queda acotada — una línea de 120 caracteres se
   lee mal por más ancha que esté la pantalla. */
.shell{max-width:1460px; margin:0 auto; padding-inline:clamp(18px,3vw,46px);
  display:grid; grid-template-columns:200px minmax(0,1fr);
  gap:clamp(28px,5vw,78px); align-items:start;}
.shell > div{max-width:940px;}
.rail{position:sticky; top:92px; padding-block:30px 0; font-size:.94rem;}
.rail-sec + .rail-sec{margin-top:26px; padding-top:22px; border-top:1px solid var(--rule);}
.rail-sec > .k{display:block; margin-bottom:9px;}
.rail a{display:flex; align-items:baseline; gap:8px; padding:6px 0 6px 13px;
  color:var(--ink-2); border-left:2px solid var(--rule); text-decoration:none; line-height:1.35;}
.rail a:hover{color:var(--ink);}
.rail a.aqui{color:var(--accent); border-left-color:var(--accent); font-weight:500;}
.pronto{font-size:.74rem; color:var(--ink-3); border:1px solid var(--rule);
  border-radius:20px; padding:1px 8px; margin-left:auto;}
.rail .toc-lista a{font-size:.9rem;}

/* ── contenedores ───────────────────────────────────────── */
.env{max-width:1180px; margin:0 auto; padding-inline:24px;}
/* Los rótulos van en la sans, en caja baja y sin tracking. El mono en
   versalitas espaciadas es el tic más reconocible de una página generada, y
   acá el mono se reserva para lo que de verdad es mono: el código. */
.k{font-size:.88rem; font-weight:500; color:var(--ink-3);}
.k.acc{color:var(--accent);}

/* ── hero de la guía ────────────────────────────────────── */
.hero{padding-block:30px 26px; border-bottom:1px solid var(--rule);}
.hero h1{font-family:var(--font-display); font-weight:700; letter-spacing:-.032em;
  line-height:1.08; font-size:clamp(1.75rem,3.2vw,2.5rem); margin:.36em 0 0;
  text-wrap:balance;}
/* El índice no es una guía: su título es un rótulo de sección, no la promesa
   de un texto largo, así que no se come media pantalla antes de la primera
   card. */
/* Sin tope en ch: con un máximo de 28 caracteres, "Blogs sobre supply chain
   science e IA aplicada" se partía en dos con media pantalla libre al lado. */
.hero.corto h1{font-size:clamp(1.65rem,2.5vw,2.1rem);}
.hero.corto .bajada{font-size:1.02rem;}
.hero .bajada{margin:.7em 0 0; font-size:1.1rem; line-height:1.55;
  color:var(--ink-2); max-width:62ch;}
.hero .meta{margin-top:26px; display:flex; gap:20px; flex-wrap:wrap;}

/* ── grilla: índice al costado + cuerpo ─────────────────── */
.toc ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}

/* ── prosa ──────────────────────────────────────────────── */
.cuerpo{padding-block:34px 24px;}
.prosa{max-width:var(--medida);}
.prosa > *{margin-block:0 1.15em;}
.prosa h2{font-family:var(--font-display); font-weight:700; letter-spacing:-.028em;
  font-size:1.72rem; line-height:1.2; margin-block:2.1em .55em; text-wrap:balance;}
.prosa h3{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-size:1.2rem; margin-block:1.7em .4em;}
.prosa h2:first-child,.prosa h3:first-child{margin-top:0;}
.prosa strong{font-weight:600; color:var(--ink);}
.prosa ul,.prosa ol{padding-left:1.35em;}
.prosa li{margin-bottom:.45em;}
.prosa li::marker{color:var(--ink-3);}
.prosa blockquote{margin-inline:0; padding:2px 0 2px 20px; border-left:2px solid var(--accent);
  color:var(--ink-2); font-size:1.08rem;}
.prosa blockquote p:last-child{margin-bottom:0;}
.prosa hr{border:0; border-top:1px solid var(--rule); margin-block:2.4em;}
.prosa code{font-family:var(--font-mono); font-size:.86em; background:var(--card-2);
  border:1px solid var(--rule); border-radius:5px; padding:.1em .34em;}
.prosa pre{background:var(--night); color:var(--night-ink); border-radius:12px;
  padding:18px 20px; overflow-x:auto; font-size:.86rem; line-height:1.6;}
.prosa pre code{background:none; border:0; padding:0; color:inherit; font-size:1em;}
.tabla-scroll{overflow-x:auto; margin-bottom:1.15em;}
.prosa table{width:100%; border-collapse:collapse; font-size:.95rem;}
.prosa th{text-align:left; font-size:.9rem; color:var(--ink-2); font-weight:600;
  padding:10px 14px 10px 0; border-bottom:1px solid var(--ink-3);}
.prosa td{padding:11px 14px 11px 0; border-bottom:1px solid var(--rule);
  vertical-align:top; font-variant-numeric:tabular-nums;}

/* ── piezas que se escriben a mano en el markdown ───────── */
.dato{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  padding:22px 0; border-block:1px solid var(--rule); margin-block:2em;}
.dato b{font-family:var(--font-display); font-weight:700; font-size:3.4rem;
  line-height:.9; letter-spacing:-.04em; font-variant-numeric:tabular-nums;}
.dato span{font-size:1.02rem; color:var(--ink-2); max-width:34ch;}
/* Las notas no son cajas: sin fondo, sin radio, sin franja al costado. Una
   línea arriba, el rótulo en su columna y el texto en la suya, como una
   entrada de glosario. Las cajas redondeadas con borde de color eran la
   plantilla de siempre y se leían así (23/9). */
.ojo{border-top:1px solid var(--d-amber); padding-top:16px; margin-block:2.4em;
  display:grid; grid-template-columns:9.5rem minmax(0,1fr); column-gap:28px;}
.ojo > .k{grid-column:1; grid-row:1 / span 20; margin:0;
  font-weight:600; line-height:1.45; color:var(--d-amber);}
.ojo > :not(.k){grid-column:2; margin-block:0 .9em;}
.ojo p:last-child{margin-bottom:0;}
/* "Qué hacemos en Supplai": una sola columna, con título propio y el texto al
   tamaño del resto, entre dos líneas. En dos columnas quedaba chico al lado
   del artículo y no se leía como lo que es, la parte de nosotros. */
.supplai{border-block:2px solid var(--accent); padding-block:22px 24px; margin-block:2.6em;}
.supplai > .k{display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.45rem; letter-spacing:-.025em; line-height:1.2; color:var(--ink);
  margin:0 0 .7em;}
.supplai > p{font-size:1.06rem; margin-block:0 .9em;}
.supplai > p:last-child{margin-bottom:0;}
.supplai-link a{font-weight:600; color:var(--accent); text-decoration:none;}
.supplai-link a::after{content:" \2192";}
.supplai-link a:hover{text-decoration:underline;}

/* ── cierre de la guía ──────────────────────────────────── */
.sigue{border-top:1px solid var(--rule); padding-block:38px 10px; margin-top:52px;}
.tarjetas{display:grid; grid-template-columns:repeat(auto-fit,minmax(252px,1fr));
  gap:16px; margin-top:18px;}
.tarj{display:block; background:var(--card); border:1px solid var(--rule);
  border-radius:13px; padding:20px 22px; text-decoration:none; color:inherit;
  transition:border-color .16s, transform .16s;}
.tarj:hover{border-color:var(--accent); transform:translateY(-2px);}
.tarj b{display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.06rem; letter-spacing:-.02em; margin:7px 0 5px;}
.tarj span{font-size:.94rem; color:var(--ink-2);}
.tarj.soon{opacity:.72;}
.tarj.soon:hover{border-color:var(--rule); transform:none;}
.cierre{background:var(--card); border:1px solid var(--rule); border-radius:15px;
  padding:34px 32px; margin-block:44px; text-align:center;}
.cierre h2{font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:1.6rem; margin:.3em 0 .45em;}
.cierre p{color:var(--ink-2); max-width:52ch; margin:0 auto 22px;}

/* ── índice de /learn: una card por guía ─────────────────
   Portada, título, bajada. La portada la dibuja el generador a partir del
   slug mientras no haya una imagen de verdad: un rectángulo gris diría
   "falta algo", y una foto de banco de imágenes diría algo peor. */
.lista{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:20px; margin-top:18px;}
.item{display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--rule); border-radius:15px;
  overflow:hidden; transition:transform .22s cubic-bezier(.16,1,.3,1),
  border-color .22s, box-shadow .22s;}
.item:hover{transform:translateY(-3px); border-color:var(--ink-3);
  box-shadow:0 14px 34px rgba(12,11,10,.09);}
.item:hover .item-t{color:var(--accent);}
.item-portada{display:block; width:100%; aspect-ratio:2/1; object-fit:cover;
  border-bottom:1px solid var(--rule); background:var(--paper);}
.item-cuerpo{padding:15px 17px 17px; display:flex; flex-direction:column; flex:1;}
.item-t{font-family:var(--font-display); font-weight:700; font-size:1.06rem;
  letter-spacing:-.022em; line-height:1.26; margin:6px 0 5px;}
.item p{margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;}
.item .lado{margin-top:auto; padding-top:12px; display:flex; align-items:center;
  gap:10px; font-size:.84rem;}
.item .k{font-size:.82rem;}
/* Un curso no tiene portada — lo que hay para mirar es el temario — así que
   la tarjeta respira un poco más y el "coming soon" queda contra el margen. */
.item-curso .item-cuerpo{padding:20px 21px 19px;}
.item-curso .item-t{font-size:1.16rem;}
.item-curso p{-webkit-line-clamp:4;}
.item-curso .lado .pronto{margin-left:auto;}
.vacio{padding-block:40px; color:var(--ink-3);}

/* ── pie ────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--rule); margin-top:64px; padding-block:30px 46px;
  display:flex; gap:18px; flex-wrap:wrap; align-items:center; color:var(--ink-3); font-size:.9rem;}
.pie a{color:var(--ink-3);}
.pie .der{margin-left:auto; display:flex; gap:16px;}

/* ── aparición al scrollear ──────────────────────────────
   Sin JS, o con IO no soportado, todo queda visible: la clase que esconde
   la pone el script recién cuando confirma que puede volver a mostrarla. */
.js-anim .aparece{opacity:0; transform:translateY(14px);}
.js-anim .aparece.vista{opacity:1; transform:none;
  transition:opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js-anim .aparece{opacity:1; transform:none;}
  *{animation:none!important; transition:none!important;}
  /* Sin animación, el tilde tiene que quedar dibujado, no en su cuadro 0. */
  .hecho-tilde circle, .hecho-tilde path{stroke-dashoffset:0!important;}
  .hecho-rayos{opacity:0;}
}

/* ── curso ──────────────────────────────────────────────── */
.espera{background:var(--card); border:1px solid var(--rule); border-radius:15px;
  padding:26px 28px; margin-block:32px; display:flex; flex-direction:column; gap:16px;}
.espera h2{font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:1.42rem; margin:.3em 0 .35em;}
.espera p{color:var(--ink-2); max-width:56ch; margin:0;}
.espera-campos{display:flex; gap:10px; flex-wrap:wrap;}
.espera input{flex:1; min-width:230px; padding:12px 15px; border:1px solid var(--rule);
  border-radius:10px; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:1rem;}
.espera input::placeholder{color:var(--ink-3);}
.espera [data-estado]:empty{display:none;}
.trampa{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;
  pointer-events:none;}
.espera.listo{border-color:var(--accent);}
/* La lista de espera del índice de cursos: arriba de todo, porque es lo único
   que se puede hacer con cursos que no abrieron. Título, mail y botón. */
.espera-ix{margin-block:28px 6px; border-color:var(--accent-wash);
  box-shadow:0 1px 0 var(--rule-soft);}
.espera-ix h2{margin-top:0;}
.espera-ix.listo > h2, .espera-ix.listo .espera-campos{display:none;}

/* ── el "listo" de la lista de espera ──
   El círculo se traza, el tilde se dibuja después y un destello sale de
   alrededor una sola vez. Nada queda moviéndose: es una confirmación, no un
   adorno. */
.hecho{display:flex; align-items:center; gap:16px; animation:hecho-in .4s ease both;}
.hecho-tilde{width:52px; height:52px; flex:none; overflow:visible;}
.hecho-tilde circle{fill:var(--accent-wash); stroke:var(--accent); stroke-width:2.5;
  stroke-dasharray:145; stroke-dashoffset:145; transform:rotate(-90deg); transform-origin:26px 26px;
  animation:hecho-trazo .55s cubic-bezier(.65,0,.35,1) .05s forwards;}
/* El trazo del tilde lo anima learn.js: primero se dibuja como una serie
   (un forecast) y después se dobla hasta ser el tilde. */
.hecho-tilde path{fill:none; stroke:var(--accent); stroke-width:3.4; stroke-linecap:round;
  stroke-linejoin:round;}
.hecho-rayos line{stroke:var(--accent); stroke-width:2.4; stroke-linecap:round;}
.hecho-rayos{opacity:0; transform-origin:26px 26px; animation:hecho-rayos .6s ease-out 1.1s both;}
.hecho-t{display:flex; flex-direction:column; gap:2px; min-width:0;}
.hecho-t b{font-family:var(--font-display); font-weight:700; font-size:1.3rem;
  letter-spacing:-.025em; color:var(--ink);}
.hecho-t span{color:var(--ink-2); font-size:.95rem;}
.espera.listo{animation:hecho-borde 1.1s ease 1s;}

/* El segundo paso de la lista de espera: nombre, empresa y rol, opcionales. */
.espera-ix.paso2 > h2, .espera-ix.paso2 .espera-campos,
.barra-espera.paso2 .barra-campos, .barra-espera.paso2 .barra-texto{display:none;}
.espera-mas:not([hidden]){display:flex; flex-direction:column; gap:10px; width:100%;
  flex-basis:100%; animation:hecho-in .3s ease both;}
.espera-mas-h{margin:0; line-height:1.4;}
.espera-mas-h b{font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;}
.espera-mas-h span{color:var(--ink-3); font-size:.9rem;}
.espera-mas-campos{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.espera-mas-campos input{flex:1 1 160px; min-width:0; padding:10px 12px;
  border:1px solid var(--rule); border-radius:9px; background:var(--paper);
  color:var(--ink); font-family:var(--font-body); font-size:.95rem;}
.espera-mas-campos input::placeholder{color:var(--ink-3);}
.espera-mas-campos input:focus{outline:none; border-color:var(--accent);}
.espera-saltar{background:none; border:0; padding:6px 4px; color:var(--ink-3);
  font:inherit; font-size:.9rem; cursor:pointer; text-decoration:underline;
  text-underline-offset:3px;}
.espera-saltar:hover{color:var(--ink);}
@keyframes hecho-in{from{opacity:0; transform:translateY(8px);}}
@keyframes hecho-trazo{to{stroke-dashoffset:0;}}
@keyframes hecho-rayos{0%{opacity:0; transform:scale(.7);} 35%{opacity:1;}
  100%{opacity:0; transform:scale(1.18);}}
@keyframes hecho-borde{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 35%,transparent);}
  100%{box-shadow:0 0 0 14px transparent;}}

/* El título pineado del curso. Sticky con alto cero: se pega debajo de la
   barra de arriba sin ocupar lugar, y su contenido aparece recién cuando el
   título grande se fue de la pantalla (lo decide learn.js con .visible). */
.curso-fijo{position:sticky; top:65px; height:0; z-index:40;}
.curso-fijo-in{position:absolute; left:0; right:0; top:0; display:flex; align-items:baseline;
  gap:14px; padding:11px 2px 12px; min-width:0;
  background:var(--page-bg); border-bottom:1px solid var(--rule);
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;}
.curso-fijo.visible .curso-fijo-in{opacity:1; transform:none; pointer-events:auto;}
.curso-fijo-in b{font-family:var(--font-display); font-weight:700; font-size:1.08rem;
  letter-spacing:-.025em; color:var(--ink); white-space:nowrap; flex:0 1 auto;
  min-width:0; overflow:hidden; text-overflow:ellipsis;}
.curso-fijo-mod{color:var(--ink-2); font-size:.92rem; min-width:0; overflow:hidden; flex:0 3 auto;
  text-overflow:ellipsis; white-space:nowrap;}
.curso-fijo-mod i{font-style:normal; font-variant-numeric:tabular-nums; color:var(--accent);
  margin-right:7px; font-weight:600;}
.curso-fijo-prog{position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background:var(--accent); transition:width .12s linear;}
.modulos{list-style:none; margin:20px 0 0; padding:0; counter-reset:m;}
.modulos li{counter-increment:m; display:grid; grid-template-columns:34px minmax(0,1fr);
  gap:4px 18px; padding-block:20px; border-bottom:1px solid var(--rule);}
.modulos li::before{content:counter(m,decimal-leading-zero);
  font-family:var(--font-display); font-weight:700; font-size:1rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; padding-top:2px;}
.modulos b{font-family:var(--font-display); font-weight:700; font-size:1.14rem;
  letter-spacing:-.02em;}
.modulos span{grid-column:2; color:var(--ink-2); font-size:.97rem;}

/* ── el piloto, sobre la misma página ────────────────────
   El formulario del home queda donde está: tiene pills, calendario adentro y
   su propio diccionario de idioma. Este es su hermano corto, con los tres
   campos que el endpoint necesita para que el lead sirva. Lo que comparten es
   lo que importa — la misma ruta, el mismo kind, la misma agenda. */
.piloto{position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  padding:22px; overflow:auto;}
/* `display:grid` en una clase le gana al `hidden` del navegador, que es una
   regla del user agent. Sin esta línea el modal arranca abierto en todas las
   páginas. */
.piloto[hidden]{display:none;}
.piloto::before{content:""; position:fixed; inset:0; background:rgba(12,11,10,.52);
  backdrop-filter:blur(2px);}
.piloto-panel{position:relative; width:min(520px,100%); background:var(--card);
  border:1px solid var(--rule); border-radius:16px; padding:32px 30px 28px;
  box-shadow:0 24px 60px rgba(12,11,10,.22);}
.piloto-x{position:absolute; top:12px; right:12px; width:30px; height:30px;
  display:grid; place-items:center; border:1px solid var(--rule); border-radius:9px;
  background:none; color:var(--ink-3); cursor:pointer; font-size:.8rem; line-height:1;}
.piloto-x:hover{color:var(--ink); border-color:var(--ink-3);}
.piloto-panel h2{font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:1.55rem; line-height:1.14; margin:.34em 0 0;}
.piloto-lede{margin:.6em 0 0; color:var(--ink-2); font-size:.98rem; line-height:1.55;}
.piloto-form label{display:block; margin-top:16px;}
.piloto-form label span{display:block; margin-bottom:6px; font-size:.88rem; color:var(--ink-2);}
.piloto-form input, .piloto-form textarea{width:100%; padding:11px 14px;
  border:1px solid var(--rule); border-radius:10px; background:var(--paper);
  color:var(--ink); font-family:var(--font-body); font-size:1rem; resize:vertical;}
.piloto-form input:focus, .piloto-form textarea:focus{outline:none; border-color:var(--accent);}
.piloto-form textarea::placeholder{color:var(--ink-3);}
.piloto-go{margin-top:20px; width:100%; justify-content:center;}
.piloto-go.enviando{opacity:.6; pointer-events:none;}
.piloto-nota{margin:12px 0 0; text-align:center; font-size:.88rem; color:var(--ink-3);}
.piloto-nota:empty{display:none;}
.piloto-listo b{display:block; font-family:var(--font-display); font-weight:700;
  letter-spacing:-.02em; font-size:1.3rem;}
.piloto-listo p{margin:.6em 0 18px; color:var(--ink-2); line-height:1.6;}
.piloto-listo .piloto-falla{margin:0 0 16px; padding:11px 14px; border-radius:10px;
  border:1px solid var(--d-amber, #C98A1B); color:var(--ink); line-height:1.5;}
/* Al pasar a la agenda el panel se ensancha: el picker de Google no entra en
   520px y se ve como una columna de horarios de un botón de ancho. */
.piloto-panel.agendando{width:min(880px,100%);}
.piloto-cal{border:1px solid var(--rule); border-radius:12px; overflow:hidden;
  background:var(--paper);}
.piloto-cal:empty{display:none;}
.piloto-cal iframe{display:block; width:100%; height:600px; border:0;}
.piloto-alt{display:inline-block; margin-top:14px; font-size:.9rem; color:var(--ink-3);}
.piloto-alt:hover{color:var(--ink);}
body.piloto-abierto{overflow:hidden;}

/* ── compartir ───────────────────────────────────────────
   Mismo cuadrado que el interruptor de tema, al lado. Copia el link y lo
   dice en un globito: no abre el menú del sistema ni ofrece seis redes,
   porque una guía técnica se pega en un Slack o en un mail. */
.compartir{position:relative;}
.compartir.listo{color:var(--accent); border-color:var(--accent);}
.compartir.listo::after, .compartir.falla::after{
  content:attr(data-ok); position:absolute; top:calc(100% + 8px); right:0;
  white-space:nowrap; padding:5px 10px; border-radius:8px;
  background:var(--ink); color:var(--paper); font-size:.8rem; line-height:1.4;
  font-family:var(--font-body); pointer-events:none;}
.compartir.falla::after{content:attr(data-error); background:var(--ink-2);}

/* ── figuras dentro de la prosa ──────────────────────────
   Un gráfico se explica solo o no está. El pie no repite el título: dice qué
   hay que mirar. */
.figura{margin:34px 0;}

/* ── dónde va la figura ──────────────────────────────────
   La columna de lectura mide 72ch y la de contenido llega a 940px, así que
   sobra lugar a la derecha. Tres posiciones, y ninguna es decorativa:

   (sin nada)  ancho de la columna de texto, entre dos párrafos
   ancha       se sale hacia la canaleta, para lo que necesita aire
   izq / der   al costado, con el texto al lado, para lo que se mira mientras
               se lee el párrafo que lo explica

   En pantalla angosta todas colapsan a lo mismo, que es lo único que entra. */
/* La sangría hacia la canaleta se mide contra la columna de texto, no contra
   el viewport: el ancho de la columna de contenido depende del riel y del gap,
   así que `100vw` se pasaba de largo en pantallas medianas. Y sólo existe
   cuando de verdad sobra lugar, o sea de 1240px para arriba. */
.figura.ancha{width:100%; max-width:none;}
@media (min-width:1240px){
  .figura.ancha{width:calc(100% + 120px);}
}
.figura.lado{width:min(44%, 340px); margin-block:8px 18px;}
.figura.lado.der{float:right; margin-left:30px;}
.figura.lado.izq{float:left; margin-right:30px;}
.figura.lado figcaption{font-size:.84rem;}
/* Un título nunca arranca al costado de una figura flotada. */
.prosa h2, .prosa h3{clear:both;}

.figura-caja{border:1px solid var(--rule); border-radius:13px; background:var(--card);
  padding:18px 18px 12px; overflow:hidden;}
.figura svg, .figura img{display:block; width:100%; height:auto; border-radius:8px;}
.figura figcaption{margin-top:11px; color:var(--ink-3); font-size:.88rem; line-height:1.5;}
.figura figcaption b{color:var(--ink-2); font-weight:600;}

/* ── la barra de la lista de espera ──────────────────────
   Fija abajo porque el curso no abrió: la única acción de la página es dejar
   el mail, y una caja a mitad del scroll la pide justo cuando la persona
   todavía no sabe si le interesa. Baja, para no tapar el temario, que es lo
   que vino a leer. */
.barra-espera{position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:11px clamp(18px,3vw,46px);
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:saturate(1.4) blur(10px); border-top:1px solid var(--rule);}
.barra-texto{display:flex; align-items:baseline; gap:10px; min-width:0;}
.barra-texto b{font-family:var(--font-display); font-weight:700; font-size:1rem;
  letter-spacing:-.02em; white-space:nowrap;}
.barra-texto span{color:var(--ink-3); font-size:.9rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;}
.barra-campos{margin-left:auto; display:flex; gap:9px; align-items:center;}
.barra-espera input[type=email]{width:min(290px,52vw); padding:9px 13px;
  border:1px solid var(--rule); border-radius:9px; background:var(--paper);
  color:var(--ink); font-family:var(--font-body); font-size:.95rem;}
.barra-espera input::placeholder{color:var(--ink-3);}
.barra-espera .btn{padding:9px 16px;}
.barra-espera [data-estado]{flex-basis:100%; margin:0; text-align:right;}
.barra-espera [data-estado]:empty{display:none;}
.barra-espera.listo .barra-campos, .barra-espera.listo .barra-texto{display:none;}
.barra-espera .hecho{margin:0 auto; gap:12px;}
.barra-espera .hecho-tilde{width:34px; height:34px;}
.barra-espera .hecho-t{flex-direction:row; align-items:baseline; gap:10px; flex-wrap:wrap;}
.barra-espera .hecho-t b{font-size:1.02rem;}
.barra-espera .hecho-t span{font-size:.9rem;}
.barra-espera.listo [data-estado]{text-align:center; color:var(--accent);}
/* Plegada: queda sólo el botón, flotando abajo a la derecha (learn.js la
   pliega al scrollear y la abre con un toque). */
.barra-espera{transition:left .25s ease, right .25s ease, bottom .25s ease, padding .25s ease,
  border-radius .25s ease, background-color .25s ease;}
.barra-espera.plegada{left:auto; right:clamp(16px,3vw,46px); bottom:18px; padding:0;
  background:transparent; border-top-color:transparent; backdrop-filter:none; gap:0;}
.barra-espera.plegada .barra-texto, .barra-espera.plegada [data-estado],
.barra-espera.plegada input[type=email], .barra-espera.plegada .espera-mas{display:none;}
.barra-espera.plegada .barra-campos{margin:0;}
.barra-espera.plegada .btn{padding:12px 20px; border-radius:999px;
  box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 18%,transparent);}
@media (prefers-reduced-motion: reduce){.barra-espera{transition:none;}
  body[data-pagina="guia"] .rail-buscar, body[data-pagina="guia"] .rail-gr,
  body[data-pagina="guia"] .toc-sec{transition:none !important;}}
/* El pie no puede quedar debajo de la barra. */
body.con-barra{padding-bottom:78px;}

/* ── el temario, que es la página ───────────────────────── */
.temario{padding-block:26px 8px;}
.temario h2{font-family:var(--font-display); font-weight:700; letter-spacing:-.03em;
  font-size:1.5rem; margin:.3em 0 .45em;}
.temario .lede{margin:0 0 6px; color:var(--ink-2);}

/* El SVG de una figura hereda la tipografía de la página y pinta con los
   tokens, así que el modo oscuro no necesita una segunda versión del dibujo. */
.fig{display:block; width:100%; height:auto; overflow:visible;}
.fig-t{font-family:var(--font-body); font-size:13px; fill:var(--ink-3);}
/* En el mapa isométrico los rótulos pasan por encima de líneas del dibujo:
   un borde del color del fondo, pintado debajo del texto, los despeja. */
.mapa-iso .fig-t{paint-order:stroke; stroke:var(--card); stroke-width:6px;
  stroke-linejoin:round;}
/* El SVG escala con el ancho, así que una figura al costado achica su propia
   tipografía a la mitad. Se compensa acá y no en el dibujo, que no sabe dónde
   va a terminar. */
.figura.lado .fig-t{font-size:21px;}
.figura.ancha .fig-t{font-size:12px;}
.fig-ink{fill:var(--ink-2); font-weight:600;}
.fig-acc{fill:var(--accent); font-weight:600;}
/* El número grande de una figura. Lleva la misma lista de selectores que
   .fig-t porque si no las reglas de .lado/.ancha le ganan por especificidad. */
.fig-n, .figura.lado .fig-n, .figura.ancha .fig-n{font-size:26px; font-weight:700;}

/* ── cajas al margen del texto ───────────────────────────
   Sintaxis estándar de admonition (`!!! dato "Título"`), no un invento
   nuestro, para que el markdown siga siendo legible sin el generador.
   Tres tipos y nada más: un dato que se mira aparte, una advertencia que
   cuesta plata, y una definición. Cuatro tipos ya es decoración. */
.admonition{margin:2.4em 0; padding:16px 0 0; border-top:1px solid var(--ink);
  border-bottom:0; display:grid; grid-template-columns:9.5rem minmax(0,1fr);
  column-gap:28px; row-gap:0;}
.admonition > *{grid-column:2; margin-block:0 .7em;}
.admonition > *:last-child{margin-bottom:0;}
.admonition > .admonition-title{grid-column:1; grid-row:1 / span 20; margin:0;
  font-size:.88rem; font-weight:600; line-height:1.45; color:var(--ink);}
.admonition.dato{border-top-color:var(--accent);}
.admonition.dato .admonition-title{color:var(--accent);}
.admonition.ojo{border-top-color:var(--d-amber);}
.admonition.ojo .admonition-title{color:var(--d-amber);}
/* La definición se lee como la definición: un poco más grande que el texto. */
.admonition.definicion p:not(.admonition-title){font-size:1.12rem; line-height:1.55; color:var(--ink);}
.admonition p{line-height:1.6;}
.admonition ul,.admonition ol{padding-left:1.2em;}

/* Listas con aire: una lista apretada se lee como un párrafo con guiones. */
.prosa ul,.prosa ol{padding-left:1.25em;}
.prosa li{margin-bottom:.6em; padding-left:.15em;}
.prosa li > strong:first-child{color:var(--ink);}

/* La cita que se saca del texto, para el remate de una sección. */
.prosa blockquote p{font-family:var(--font-display); font-weight:500;
  font-size:1.18rem; line-height:1.4; letter-spacing:-.015em; color:var(--ink-2);}

/* ── la entrada ──────────────────────────────────────────
   La bajada no va debajo del título sino adentro del texto, sangrada, como
   la entrada de una nota. Arriba competía con el primer párrafo y los dos
   decían lo mismo con otras palabras; acá es el primer escalón de la
   lectura. */
.prosa .entrada{margin:0 0 1.6em; padding-left:20px;
  border-left:3px solid var(--accent);
  font-size:1.12rem; line-height:1.6; color:var(--ink-2);}

/* ── el riel, como árbol ─────────────────────────────────
   Los grupos son <details>: colapsan sin JavaScript, responden al teclado
   solos y el navegador se encarga del estado. El que corresponde a la página
   abierta viene desplegado y el otro cerrado. */
.rail-buscar{margin-bottom:14px;}

.rail-buscar input{width:100%; padding:7px 11px 7px 30px; font-size:.88rem;
  font-family:var(--font-body); color:var(--ink); border:1px solid var(--rule);
  border-radius:9px; background:var(--paper) no-repeat 9px 50%/13px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238A8377' stroke-width='2'%3E%3Ccircle cx='8.6' cy='8.6' r='5.4'/%3E%3Cpath d='M12.6 12.6L17 17' stroke-linecap='round'/%3E%3C/svg%3E");}
.rail-buscar input:focus{outline:none; border-color:var(--accent);}
.rail-buscar input::-webkit-search-cancel-button{cursor:pointer;}
.rail-nada{margin:0 0 10px; font-size:.86rem; color:var(--ink-3);}

.rail-gr + .rail-gr{margin-top:6px;}
.rail-gr > summary{display:flex; align-items:center; gap:8px; cursor:pointer;
  padding:6px 0; list-style:none; font-size:.92rem; font-weight:500;
  color:var(--ink); user-select:none;}
.rail-gr > summary::-webkit-details-marker{display:none;}
.rail-gr > summary::before{content:""; width:0; height:0; flex:none;
  border-left:5px solid var(--ink-3); border-top:4px solid transparent;
  border-bottom:4px solid transparent; transition:transform .16s;}
.rail-gr[open] > summary::before{transform:rotate(90deg);}
.rail-gr > summary:hover{color:var(--accent);}
.rail-gr .rail-nav{padding-left:6px; margin-bottom:8px;}
.rail-gr .rail-nav a{padding-block:5px; font-size:.9rem;}
.rail-gr .rail-nav a i{font-style:normal; color:var(--ink-3);
  font-variant-numeric:tabular-nums; font-size:.8rem; flex:none;}
.rail-gr .rail-nav a b{font-weight:500;}
.rail-vacio{display:block; padding:6px 0 6px 13px; color:var(--ink-3);
  font-size:.88rem; border-left:2px solid var(--rule);}
/* El buscador esconde lo que no coincide; el grupo se esconde si se quedó
   sin nada adentro. */
.rail [data-oculto]{display:none;}

/* ── memes ───────────────────────────────────────────────
   Formatos que se reconocen sin la foto original, dibujados con la misma
   tinta que las figuras. Uno por guía como mucho: un chiste que se repite
   deja de ser un chiste y pasa a ser el tono. */
.meme{margin:34px 0; padding:18px 20px; border:1px solid var(--rule);
  border-radius:13px; background:var(--card); max-width:560px;}
.meme-cerebro{padding:0; overflow:hidden;}
.meme-fila{display:grid; grid-template-columns:minmax(0,1fr) 124px; align-items:center;
  border-top:1px solid var(--rule);}
.meme-fila:first-child{border-top:0;}
.meme-t{padding:14px 18px; font-family:var(--font-display); font-weight:600;
  font-size:1.02rem; line-height:1.35; letter-spacing:-.01em; color:var(--ink);}
.meme-cerebro-svg{display:block; width:100%; height:auto; padding:6px 8px;
  border-left:1px solid var(--rule); background:var(--paper);}
.meme-botonera{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.meme-boton{display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; font-family:var(--font-display); font-weight:600; font-size:.98rem;
  line-height:1.3; color:var(--ink);}
.meme-boton-svg{width:92px; height:auto;}
.meme-botones figcaption{display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--rule);
  color:var(--ink-2); font-size:.94rem;}
.meme-gota{width:11px; height:auto; flex:none;}
.meme-nadie p{margin:0 0 .5em; font-size:1.02rem; color:var(--ink-2);}
.meme-nadie p:last-child{margin:0; color:var(--ink);}
.meme-nadie b{color:var(--ink); font-weight:600;}

/* ── el header en pantalla angosta ───────────────────────
   Lo que sobra es lo que ya está en otro lado. El cambio de idioma vive
   también en el pie, así que en el header se va: sin él, la marca, los dos
   cuadrados y el botón entran sin cortarse. */

/* Al imprimir o guardar como PDF no hay scroll que dispare la aparición: sin
   esto, todo lo que estaba abajo de la primera pantalla salía invisible. */
@media print{
  .js-anim .aparece{opacity:1 !important; transform:none !important;}
  .hdr, .barra-espera, .cajon, .prog{display:none !important;}
}

/* ── el riel en pantalla ancha ──
   Rediseño del 23/9: el grupo ya no se ve como un acordeón. En una columna
   lateral no hay nada que plegar, así que el <summary> es sólo un rótulo (no
   se puede clickear) y cada curso es una fila con su cantidad de módulos
   abajo; el abierto va sobre el lavado del acento, con sus módulos colgando
   de un filete. El <details> sigue ahí por el teléfono, donde sí es un chip
   que se abre. */
@media (min-width:921px){
  .rail-gr > summary{pointer-events:none; cursor:default; padding:0 2px 10px;
    font-family:var(--font-mono); font-size:.68rem; font-weight:400;
    letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);}
  .rail-gr > summary::before{display:none;}
  .rail-gr > summary em{font-style:normal; margin-left:auto; color:var(--ink-3);}
  .rail-gr .rail-nav{padding-left:0; display:flex; flex-direction:column; gap:2px;}
  .rail-gr .rail-nav a{flex-direction:column; align-items:flex-start; gap:2px;
    border-left:0; border-radius:9px; padding:8px 11px; color:var(--ink-2);
    transition:background .15s, color .15s;}
  .rail-gr .rail-nav a b{font-weight:500; color:var(--ink);}
  .rail-gr .rail-nav a small{font-size:.76rem; color:var(--ink-3);}
  .rail-gr .rail-nav a:hover{background:var(--card-2);}
  .rail-gr .rail-nav a.aqui{background:var(--accent-wash);}
  .rail-gr .rail-nav a.aqui b{color:var(--accent); font-weight:600;}
  .rail-gr .rail-nav a.mod{flex-direction:row; align-items:baseline; gap:9px;
    margin-left:14px; padding:5px 0 5px 12px; border-radius:0;
    border-left:1px solid var(--rule); font-size:.86rem;}
  .rail-gr .rail-nav a.mod:hover{background:none; color:var(--ink); border-left-color:var(--ink-3);}
  .rail-gr .rail-nav a.mod:first-of-type{margin-top:4px;}
  .rail-buscar input{border-color:transparent; background-color:var(--card-2);}
  .rail-buscar input:focus{border-color:var(--accent); background-color:var(--paper);}

  /* Leyendo una guía, al bajar se van el buscador y la lista del blog, y el
     índice del artículo queda solo y tenue; al subir vuelve todo. Lo decide
     learn.js con body.leyendo, que además mide el alto de lo que se pliega
     (va inline, por eso el max-height:0 lleva !important). visibility espera
     a que termine el fundido: sin ella, lo plegado seguía en el orden del Tab
     y enfocarlo hacía saltar la página. */
  body[data-pagina="guia"] .rail-buscar, body[data-pagina="guia"] .rail-gr{
    transition:opacity .35s ease, transform .35s ease, max-height .45s ease,
      margin .45s ease, visibility 0s linear 0s;}
  body[data-pagina="guia"] .toc-sec{transition:opacity .35s ease, margin .45s ease,
    padding .45s ease, border-color .35s ease;}
  body.leyendo .rail-buscar, body.leyendo .rail-gr, body.leyendo .rail-nada{opacity:0;
    transform:translateX(-14px); max-height:0 !important; margin:0; overflow:hidden;
    pointer-events:none; visibility:hidden;
    transition:opacity .35s ease, transform .35s ease, max-height .45s ease,
      margin .45s ease, visibility 0s linear .45s;}
  body.leyendo .toc-sec{opacity:.45; margin-top:0; padding-top:0; border-top-color:transparent;}
  body.leyendo .toc-sec:hover, body.leyendo .toc-sec:focus-within{opacity:1;}
}

/* ── pantallas angostas ──────────────────────────────────
   Todos los @media van juntos y al final, de más ancho a más angosto.
   Estaban en el medio del archivo y cada regla nueva que se agregaba
   abajo los pisaba sin aviso: el chip del riel tenía el borde de la
   regla angosta y el padding de la ancha, que es como terminó
   deformado. */

@media (max-width:920px){
  .shell{grid-template-columns:minmax(0,1fr); gap:0; padding-inline:18px;}
  .shell > div{min-width:0;}
  /* El riel deja de ser columna y pasa a ser una fila de dos chips. Apilado
     se comía la primera pantalla entera antes del título, que es lo único que
     alguien vino a ver. */
  .rail{position:static; padding-block:14px 12px; border-bottom:1px solid var(--rule);
    display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start;}
  .rail-buscar{display:none;}
  .rail-nada{display:none;}
  .rail-gr{margin:0;}
  .rail-gr + .rail-gr{margin-top:0;}
  .rail-gr > summary{gap:7px; padding:7px 15px 7px 13px; border:1px solid var(--rule);
    border-radius:20px; font-size:.88rem; background:var(--card);}
  .rail-gr[open]{flex-basis:100%; min-width:0;}
  .rail-gr[open] > summary{border-color:var(--ink-3);}
  /* Adentro de un grupo abierto los items vuelven a ser filas. Como chips no
     se podían achicar abajo de su texto y empujaban la página a lo ancho: un
     título de guía no entra en una pastilla de 360px. */
  .rail-gr .rail-nav{display:block; margin-top:8px; padding-left:2px;}
  /* `display:block` y no flex: un flex item no baja de su ancho máximo de
     contenido, así que el título largo empujaba la página entera a lo ancho
     aunque el texto tuviera permiso para cortarse. */
  .rail-gr .rail-nav a{display:block; border:0; border-left:2px solid var(--rule);
    border-radius:0; padding:6px 0 6px 12px; white-space:normal;}
  .rail-gr .rail-nav a i{margin-right:8px;}
  .rail-gr .rail-nav a small, .rail-gr > summary em{display:none;}
  /* El chip: un chevron fino después del texto en vez del triángulo lleno. */
  .rail-gr > summary::before{display:none;}
  .rail-gr > summary::after{content:""; width:6px; height:6px; margin:-3px 0 0 2px;
    border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3);
    transform:rotate(45deg); transition:transform .16s;}
  .rail-gr[open] > summary::after{transform:rotate(-135deg); margin-top:3px;}
  .rail-gr .rail-nav a.aqui{border-left-color:var(--accent);}
  .rail-sec{margin:0; padding:0; border:0;}
  .rail-sec.toc-sec{display:none;}
  .rail-sec > .k{display:none;}
  /* En angosto el riel es una barra arriba, no una columna. Los grupos
     siguen siendo grupos, pero el del curso arranca cerrado incluso en su
     propia página: doce módulos apilados antes del título es una pantalla
     entera de índice antes de leer nada. */
  .rail-nav{display:flex; gap:8px; flex-wrap:wrap; padding-left:0;}
  .rail-nav a{border-left:0; border:1px solid var(--rule); border-radius:8px;
    padding:7px 12px;}
  .rail-nav a.aqui{border-color:var(--accent);}
  .rail-gr[open] > summary{margin-bottom:6px;}
  .rail-gr .rail-nav a i{display:none;}
  .rail-buscar{max-width:340px;}
  /* Centrada contra la barra entera sólo mientras hay barra de sobra: acá la
     nav vuelve a la fila, antes de los botones, y no se superpone con nada. */
  .hdr-nav{position:static; transform:none; gap:16px; margin-right:4px;}
  .hdr-in,.env{padding-inline:18px;}
  body{font-size:16.5px;}
}

@media (max-width:820px){
  .figura.lado, .figura.ancha{width:100%; float:none; margin:28px 0;}
  /* Ya no hay columna angosta ni sangría: las tres posiciones ocupan lo
     mismo, así que el texto de los dibujos vuelve a una sola medida. */
  .fig-t, .figura.lado .fig-t, .figura.ancha .fig-t{font-size:13px;}
}

@media (max-width:700px){
  .barra-espera{gap:9px; padding:10px 16px;}
  .barra-texto span{display:none;}
  .barra-campos{margin-left:auto;}
  .barra-espera input[type=email]{width:min(190px,44vw);}
  /* La barra ocupa dos filas en angosto; el pie tiene que quedar arriba de
     ella y no debajo. */
  body.con-barra{padding-bottom:132px;}
}

@media (max-width:620px){
  .hdr-in{gap:10px; padding:10px 16px;}
  /* En el teléfono la barra es marca a la izquierda y tres cuadrados a la
     derecha: las secciones, el idioma y el piloto pasan al menú o al cierre
     de la página. Antes se escondía "Supplai" para que entrara el botón. */
  .hdr .idioma, .hdr-nav, .btn-hdr{display:none;}
  .curso-fijo{top:55px;}
  .curso-fijo-in{gap:10px; padding-block:9px 10px;}
  .curso-fijo-in b{font-size:.98rem;}
  .curso-fijo-mod{font-size:.86rem;}
  .hdr .menu-btn{display:inline-flex;}
  /* El riel no tiene lugar en el teléfono: los cursos viven en el cajón. */
  .rail{display:none;}
  /* La lista de espera del índice, en el teléfono, se pina abajo como la
     barra de cada curso: arriba de todo quedaba lejos apenas se empieza a
     mirar los cursos, que es justo cuando alguien decide anotarse. */
  .espera-ix{position:fixed; left:0; right:0; bottom:0; z-index:60; margin:0;
    gap:8px; padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));
    border:0; border-top:1px solid var(--rule); border-radius:0;
    background:color-mix(in srgb,var(--card) 96%,transparent);
    backdrop-filter:saturate(1.4) blur(10px); box-shadow:0 -10px 24px -18px rgba(0,0,0,.35);}
  .espera-ix h2{font-size:.98rem; margin:0;}
  .espera-ix .espera-campos{flex-wrap:nowrap; gap:8px;}
  .espera-ix input{min-width:0; padding:10px 12px; font-size:16px;}
  .espera-ix .btn{flex:none; padding:10px 14px;}
  .espera-ix [data-estado]{margin:0;}
  .espera-ix.listo{animation:none;}
  .espera-ix .hecho{gap:12px;}
  .espera-ix .hecho-tilde{width:34px; height:34px;}
  .espera-ix .hecho-t b{font-size:1rem;}
  .espera-ix .hecho-t span{font-size:.86rem;}
  body[data-pagina="learn-cursos"]{padding-bottom:128px;}
  .espera-mas-campos input{flex-basis:100%; font-size:16px;}
  .espera-mas-campos .btn{flex:1;}
  .hdr-der{gap:8px;}
  .tema{width:34px; height:34px;}
  .hero h1{font-size:clamp(1.62rem,7.4vw,2.1rem);}
  .hero.corto h1{font-size:clamp(1.5rem,6.4vw,1.9rem);}
  .hero .bajada{font-size:1.02rem;}
  .prosa .entrada{font-size:1.05rem; padding-left:15px;}
  .figura{margin:26px 0;}
  .figura-caja{padding:12px 12px 8px; border-radius:11px;}
  /* El SVG escala con el ancho, así que el texto de adentro se achica junto
     con la pantalla: en un teléfono, 13px de viewBox son 7px reales. Estos
     tres escalones lo dejan en 13px leídos en cualquier ancho. */
  .fig-t, .figura.lado .fig-t, .figura.ancha .fig-t{font-size:16px;}
  .admonition, .ojo{grid-template-columns:minmax(0,1fr);}
  .supplai > .k{font-size:1.25rem;}
  /* El mapa isométrico es ancho y se achica mucho: sus rótulos, más grandes. */
  .figura .mapa-iso .fig-t, .figura.ancha .mapa-iso .fig-t{font-size:23px;}
  .admonition > .admonition-title, .ojo > .k{grid-row:auto; margin-bottom:8px;}
  .admonition > *, .ojo > :not(.k), .ojo > .k{grid-column:1;}
  .meme-fila{grid-template-columns:minmax(0,1fr) 92px;}
  .meme-t{padding:12px 14px; font-size:.96rem;}
  .item-cuerpo{padding:14px 15px 16px;}
  .cierre{padding:26px 20px;}
  .pie{flex-direction:column; align-items:flex-start; gap:12px;}
  .pie .der{margin-left:0;}
}

@media (max-width:560px){
  .modulos li{grid-template-columns:1fr;}
  .modulos li::before{display:none;}
  .modulos span{grid-column:1;}
}

@media (max-width:560px){
  .piloto{padding:0; place-items:stretch;}
  .piloto-panel{width:100%; min-height:100%; border:0; border-radius:0;}
  .piloto-cal iframe{height:520px;}
}


@media (max-width:480px){
  .fig-t, .figura.lado .fig-t, .figura.ancha .fig-t{font-size:19px;}
  .fig-n, .figura.lado .fig-n, .figura.ancha .fig-n{font-size:36px;}
}


@media (max-width:380px){
  .marca{font-size:.94rem;}
  .miga{margin-left:9px; padding-left:9px; font-size:.9rem;}
  .hdr-der{gap:6px;}
}