/* ==========================================================================
   Cursos TIENDA MX · sistema «Folio» (sitio; F3a del rediseño, 22-oct-2026)
   Sale de la hoja del lienzo aprobado (gen/hacer_folio_css.py, en las herramientas de cada fase): este archivo NO se edita
   a mano; se cambia el lienzo o el script y se vuelve a generar. Los comentarios con el porqué de cada regla vienen
   del lienzo («la v1», «ronda 2»: las versiones y rondas de crítica de las maquetas).
   F3a trajo lo que usan la portada, la categoría y el menú; F3b-1, lo de la portada del curso, las lecciones y el
   ejercicio; F3b-2, lo del quiz y «Aprobaste»; F3c-1, lo de precios y verificar; F3c-2, lo de comprar o pedir
   cotización; F3c-3, lo del regreso del pago y el estado de la compra. Cada fase siguiente agrega lo de sus páginas.
   Idea rectora: cada curso es una constancia en blanco; aprobar es sellarla. Es lo único exclusivo del producto
   (el folio que cualquiera verifica) y la ilustración aprobada ya lo cuenta: la mujer sostiene la constancia.
   ========================================================================== */

/* ---- Fuentes, servidas por el sitio (font-src 'self'). Figtree es el archivo de hoy (cursos.css); Fraunces llegó
   con F2a, fija en 650, el único peso del diseño. swap: el texto se ve con la de respaldo mientras llega. ---- */
@font-face{font-family:"Figtree";font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin-wght.woff2") format("woff2")}
@font-face{font-family:"Fraunces";font-weight:650;font-display:swap;src:url("fonts/fraunces-650-latin.woff2") format("woff2")}

/* ---- Temas. Los valores base son los de cursos.css hoy (la paleta no se
   cambia: Fer la aprobó). Se AGREGAN:
   --papel-constancia  el papel de tarjetas y constancias, no el fondo general.
   --acento            el naranja del chaleco, solo marcas puntuales. Color
                       nuevo en la paleta: lo decide Fer.
   --disco             el disco detrás del equipo (hoy fijo en el SVG; en sepia
                       contrastaba 1.23:1 y parecía pegado).
   --borde-campo       ≥ 3:1 en los cinco temas: hoy los campos miden
                       1.24–1.86:1 y fallan WCAG 1.4.11 (medido, ronda 1).
   --err*, --aviso-*   (22-oct-2026, páginas nuevas del lienzo: comprar, quiz,
                       pago) los MISMOS valores de cursos.css hoy, tema por
                       tema: los mensajes de error y de aviso no cambian de
                       color con el rediseño; Fer aprobó esa paleta. ---- */
.folio{
  --azul:#1F4E79; --azul-2:#2B6CA8; --tinta:#15212E; --texto:#3A4A5C; --suave:#5E6E80;
  --fondo:#F4F7FB; --papel:#FFFFFF; --linea:#E1E8F0; --banda:#EAF1F8; --banda-borde:#C9D9EA;
  --jade:#0F7B5F; --jade-2:#0B6650; --sobre-jade:#FFFFFF;
  --pie:#15212E; --pie-texto:#DCE5EE; --pie-suave:#B9C6D3; --pie-linea:#2A3A4C; --video:#0F1823;
  --sombra:0 10px 30px rgba(21,33,46,.08); --sombra-alta:0 18px 40px rgba(21,33,46,.14);
  --papel-constancia:#FFFBF0; --acento:#B4500A; --disco:#E3ECF6; --borde-campo:#7A8DA2;
  --err:#B3261E; --err-fondo:#FDECEC; --err-linea:#F5C2C2; --aviso-fondo:#FDF1E4; --aviso-linea:#F1CFA8;
  --guilloche:rgba(31,78,121,.16); --sello:var(--jade);
  color-scheme:light;
}
/* «Automático» sigue al sistema. La versión 1 lo había perdido (0 reglas
   prefers-color-scheme; lo cazó usabilidad en la ronda 2). Se repite el
   bloque oscuro en vez de compartirlo porque CSS no deja nombrar un bloque de
   variables y usarlo en dos selectores con condiciones distintas. */
[data-theme="dark"] .folio{
  --azul:#7FB2E5; --azul-2:#9CC6F0; --tinta:#EEF3F8; --texto:#C3CFDC; --suave:#93A3B5;
  --fondo:#0F1823; --papel:#16212E; --linea:#26344A; --banda:#132131; --banda-borde:#2A3D57;
  --jade:#35B38F; --jade-2:#4CC7A2; --sobre-jade:#06231A;
  --pie:#0A1119; --pie-texto:#DCE5EE; --pie-suave:#B9C6D3; --pie-linea:#1E2B3B; --video:#070C12;
  --sombra:0 10px 30px rgba(0,0,0,.35); --sombra-alta:0 18px 40px rgba(0,0,0,.5);
  --papel-constancia:#1B2533; --acento:#F59E4B; --disco:#1B2A3D; --borde-campo:#5E7591;
  --err:#F4A29C; --err-fondo:#2E1614; --err-linea:#6A2E2A; --aviso-fondo:#2E2012; --aviso-linea:#6A4A22;
  --guilloche:rgba(127,178,229,.18); color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  [data-theme="auto"] .folio{
    --azul:#7FB2E5; --azul-2:#9CC6F0; --tinta:#EEF3F8; --texto:#C3CFDC; --suave:#93A3B5;
    --fondo:#0F1823; --papel:#16212E; --linea:#26344A; --banda:#132131; --banda-borde:#2A3D57;
    --jade:#35B38F; --jade-2:#4CC7A2; --sobre-jade:#06231A;
    --pie:#0A1119; --pie-texto:#DCE5EE; --pie-suave:#B9C6D3; --pie-linea:#1E2B3B; --video:#070C12;
    --sombra:0 10px 30px rgba(0,0,0,.35); --sombra-alta:0 18px 40px rgba(0,0,0,.5);
    --papel-constancia:#1B2533; --acento:#F59E4B; --disco:#1B2A3D; --borde-campo:#5E7591;
    --err:#F4A29C; --err-fondo:#2E1614; --err-linea:#6A2E2A; --aviso-fondo:#2E2012; --aviso-linea:#6A4A22;
    --guilloche:rgba(127,178,229,.18); color-scheme:dark;
  }
}
[data-theme="sepia"] .folio{
  --azul:#7A4E24; --azul-2:#8E5E30; --tinta:#3E2F1C; --texto:#5A4830; --suave:#6E5C42;
  --fondo:#F1E7D0; --papel:#F9F1DF; --linea:#DCCBA8; --banda:#EFE0C4; --banda-borde:#D9C39A;
  --jade:#4C6B3C; --jade-2:#3E5A30; --sobre-jade:#FFFFFF;
  --pie:#3E2F1C; --pie-texto:#F1E7D0; --pie-suave:#D8C8A8; --pie-linea:#5A4830; --video:#2A2014;
  --sombra:0 10px 30px rgba(62,47,28,.10); --sombra-alta:0 18px 40px rgba(62,47,28,.16);
  --papel-constancia:#FBF4E4; --acento:#8E4512; --disco:#E6D3AE; --borde-campo:#9A8058;
  --err:#A63A1D; --err-fondo:#F3D9CC; --err-linea:#E0B29E; --aviso-fondo:#F3E0CB; --aviso-linea:#DDBB92;
  --guilloche:rgba(122,78,36,.18);
}
[data-theme="trueblack"] .folio{
  --azul:#8CC3F2; --azul-2:#A9D3F7; --tinta:#F0F0F0; --texto:#CFCFCF; --suave:#9A9A9A;
  --fondo:#000000; --papel:#0D0D0D; --linea:#262626; --banda:#111111; --banda-borde:#2E2E2E;
  --jade:#3CC79D; --jade-2:#5BD6B0; --sobre-jade:#00140E;
  --pie:#000000; --pie-texto:#F0F0F0; --pie-suave:#B5B5B5; --pie-linea:#262626; --video:#000000;
  --sombra:none; --sombra-alta:none;
  --papel-constancia:#0D0D0D; --acento:#F2A65A; --disco:#141414; --borde-campo:#6B6B6B;
  --err:#FF7B6E; --err-fondo:#2A100D; --err-linea:#5A221C; --aviso-fondo:#2A1C0C; --aviso-linea:#5A3E1C;
  --guilloche:rgba(140,195,242,.16); color-scheme:dark;
}
[data-theme="contraste"] .folio{
  --azul:#00FFFF; --azul-2:#7FFFFF; --tinta:#FFFFFF; --texto:#FFFFFF; --suave:#FFFF00;
  --fondo:#000000; --papel:#000000; --linea:#FFFFFF; --banda:#000000; --banda-borde:#FFFFFF;
  --jade:#FFFF00; --jade-2:#FFFF66; --sobre-jade:#000000;
  --pie:#000000; --pie-texto:#FFFFFF; --pie-suave:#FFFF00; --pie-linea:#FFFFFF; --video:#000000;
  --sombra:none; --sombra-alta:none;
  --papel-constancia:#000000; --acento:#FFAA00; --disco:transparent; --borde-campo:#FFFFFF;
  --err:#FF7777; --err-fondo:#220000; --err-linea:#FF7777; --aviso-fondo:#221500; --aviso-linea:#FFAA00;
  --guilloche:rgba(255,255,255,.35); color-scheme:dark;
}
/* La constancia como OBJETO (héroe, muestra, resultado, verificar, la cuenta de
   precios; no las tarjetas) es papel claro también en oscuro y negro. Lleva
   también --sobre-jade: sin él, el botón «Pagar» dentro de la cuenta quedaba
   con texto oscuro sobre jade oscuro, 3.18:1 (banco de la v2). Dos razones: en la v1
   el papel medía 1.00–1.05:1 contra las tarjetas y no se distinguía (ronda 2,
   diseño), y un QR claro sobre fondo oscuro muchos lectores no lo escanean.
   Alto contraste no se toca: ahí manda la accesibilidad, no el papel. */
:is([data-theme="dark"],[data-theme="trueblack"]) .folio .constancia{
  --papel-constancia:#F3EEE2; --tinta:#15212E; --texto:#3A4A5C; --suave:#5E6E80;
  --jade:#0F7B5F; --jade-2:#0B6650; --sobre-jade:#FFFFFF; --sello:#0F7B5F; --linea:#D9D2C2; --borde-campo:#7A8DA2;
  --guilloche:rgba(31,78,121,.16); --azul:#1F4E79; color:var(--tinta)}
@media (prefers-color-scheme:dark){
  [data-theme="auto"] .folio .constancia{
    --papel-constancia:#F3EEE2; --tinta:#15212E; --texto:#3A4A5C; --suave:#5E6E80;
    --jade:#0F7B5F; --jade-2:#0B6650; --sobre-jade:#FFFFFF; --sello:#0F7B5F; --linea:#D9D2C2; --borde-campo:#7A8DA2;
    --guilloche:rgba(31,78,121,.16); --azul:#1F4E79; color:var(--tinta)}
}
/* ---- Escala. Siete tokens de tamaño y tres excepciones DECLARADAS: el
   texto del sello (.66rem; es dibujo), el título de la tarjeta en teléfono
   (1.5rem, su porqué abajo) y la constancia del héroe (escala en cqi porque es
   ilustración). La v1 decía «7 tamaños» y medía 16 (ronda 2); el banco puede
   contar los font-size distintos y comparar contra esta lista.
   --t-xl es 28 px a propósito: es el mínimo de Fraunces.
   Fraunces 650, una sola instancia (opsz 144, SOFT 50): con un solo peso
   pesa 18.7 KB contra 36.9 de la variable (medido en la ronda 2), y el total
   con Figtree queda bajo la meta de 45 KB. Solo en exhibición: en tamaños
   chicos el opsz 144 se empasta. La única excepción declarada es el título
   de la tarjeta en teléfono (abajo, con su porqué).
   La monoespaciada es la del sistema y eso es un pendiente, no una decisión:
   ui-monospace no existe en Android ni en Firefox, así que el folio sale
   distinto en cada equipo. Para producción conviene una mono recortada a los
   ~52 signos de folios y cejas (≈ 3 KB, ronda 2). -------------------------- */
.folio{
  --t-xs:.8125rem; --t-s:.9375rem; --t-m:1.0625rem; --t-l:1.25rem; --t-xl:1.75rem;
  --t-2xl:clamp(2rem,1.3rem + 2.4vw,3.25rem); --t-3xl:clamp(2.75rem,1.2rem + 5.4vw,6rem);
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --cuerpo:"Figtree",system-ui,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,Menlo,monospace;
  --dur-1:120ms; --dur-2:220ms; --dur-3:420ms; --ease:cubic-bezier(.2,.7,.2,1);
  --radio:10px; --ancho:1200px; --margen:max(16px,4vw);
  font-family:var(--cuerpo); font-size:var(--t-m); line-height:1.6; color:var(--texto);
  background:var(--fondo); -webkit-font-smoothing:antialiased; min-height:100vh;
  display:flex; flex-direction:column;
}
/* El contenido crece y el pie queda abajo: en páginas cortas el pie flotaba
   a media pantalla con fondo vacío debajo (pintado, 21-oct). */
.folio > main{flex:1 0 auto}
.folio *,.folio *::before,.folio *::after{box-sizing:border-box}
/* :where() a propósito: «.folio p{margin:0}» pesa (0,1,1) y anulaba TODOS los
   margin-top de los componentes (21-oct). Con :where() no suma especificidad. */
.folio :where(h1,h2,h3,h4,p,ul,ol,dl,figure){margin:0}
.folio img{display:block;max-width:100%}
.folio a{color:var(--azul)}
.folio a:hover{color:var(--azul-2)}
.folio :focus-visible{outline:3px solid var(--azul-2);outline-offset:2px;border-radius:4px}
/* El foco se lleva al h1 al cambiar de paso, para el lector de pantalla y no
   para la vista: sin esto, quien llega por un enlace directo ve un anillo en
   el título y lo lee como error (ronda 1, diseño). */
.folio h1[tabindex="-1"]:focus{outline:none}
.folio :where(h1,h2,h3){text-wrap:balance}
.display{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;font-weight:650;color:var(--tinta);letter-spacing:-.02em}
.ceja{font-family:var(--mono);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:var(--t-xs);color:var(--jade)}
.mono{font-family:var(--mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;font-size:var(--t-xs)}
.suave{color:var(--suave)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* «Saltar al contenido» VISIBLE al enfocarlo. La v1 lo dejó en 1×1 px, una
   regresión contra el sitio de hoy (.saltar:focus); lo cazó usabilidad. */
.saltar{position:absolute;left:var(--margen);top:-80px;z-index:20;background:var(--papel);color:var(--tinta);padding:12px 16px;border-radius:8px;
  font-weight:600;box-shadow:var(--sombra-alta)}
.saltar:focus{top:8px}
.mt-1{margin-top:12px}.mt-2{margin-top:20px}.mt-3{margin-top:28px}
.texto-medida{max-width:44ch}
/* ---- Retícula: una sola, 12 columnas, máx. 1200 px. Hoy el contenido mide
   1080, 920 o 720 según la página y el pie arranca en x=180: desalineado en
   4 de 7 páginas. Cabecera, secciones y pie usan el mismo contenedor. ---- */
.ret{width:100%;max-width:calc(var(--ancho) + 2 * var(--margen));margin:0 auto;padding-inline:var(--margen)}
.seccion{padding-block:clamp(56px,7vw,104px)}
.seccion-banda{background:var(--banda);border-block:1px solid var(--banda-borde)}
/* La banda oscura de la página. La v1 era «un solo rollo azul pálido»:
   --banda contra --fondo mide 1.06:1 (ronda 2). Aquí vive el concepto. */
.seccion-oscura{background:var(--pie);color:var(--pie-texto)}
.seccion-oscura .display{color:#FFFFFF}
:is([data-theme="sepia"],[data-theme="contraste"]) .folio .seccion-oscura .display{color:var(--pie-texto)}
.seccion-oscura .ceja{color:var(--pie-suave)}
.seccion-oscura :focus-visible{outline-color:var(--pie-texto)}
.seccion-cab{display:flex;align-items:end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:32px}
.seccion-cab h2{font-size:var(--t-2xl);line-height:1.05;max-width:20ch}
.seccion-cab p{max-width:46ch;color:var(--suave);margin-top:10px}

/* ---- Botones: un primario (jade relleno), un secundario (borde de tinta) y
   el azul solo para enlaces. Hoy hay tres colores de acción primaria. Con
   .folio delante: sin él, la regla .folio a (más específica) pintaba el
   texto del botón azul sobre jade (v1, pintada del 21-oct). ------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;
  font:600 var(--t-s)/1 var(--cuerpo);text-decoration:none;border:1.5px solid transparent;cursor:pointer;white-space:nowrap}
.folio .btn-primario{background:var(--jade);color:var(--sobre-jade)}
.folio .btn-primario:hover{background:var(--jade-2);color:var(--sobre-jade)}
.folio .btn-secundario{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.folio .btn-secundario:hover{color:var(--tinta);background:var(--papel)}
.btn-chico{min-height:44px;padding:0 16px}
.enlace{font-weight:600;text-decoration:none;color:var(--azul);display:inline-flex;align-items:center;gap:6px;min-height:44px}
.enlace:hover{text-decoration:underline}

/* ---- Cabecera: una fila, también en teléfono (hoy 122 px en tres filas).
   «Cursos» es el apellido del logo, no un enlace que repite el catálogo. El
   tema pasa a un botón «Colores» de 44×44: «Tema» chocaba con «un tema en 20
   minutos». El menú se esconde desde 1100 px y no desde 640: a 768 la v1
   se desbordaba 111 px y a 1024 partía los enlaces en dos renglones (ronda 2,
   medido). ------------------------------------------------------------ */
.cab{background:var(--papel);border-bottom:1px solid var(--linea)}
.cab .ret{display:flex;align-items:center;gap:28px;min-height:63px}
.logo{display:flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;color:var(--azul);white-space:nowrap}
.logo b{font:800 var(--t-l)/1 var(--cuerpo);letter-spacing:-.01em;color:var(--azul)}
.logo b span{color:var(--tinta)}
.logo i{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--jade);font-style:normal;padding-left:10px;border-left:1px solid var(--linea)}
.cab-nav{display:flex;gap:4px;margin-left:8px}
.cab-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;text-decoration:none;color:var(--tinta);font-weight:600;font-size:var(--t-s);white-space:nowrap}
.cab-nav a[aria-current]{background:var(--banda)}
.cab-der{margin-left:auto;display:flex;align-items:center;gap:8px}
.icono-btn{flex:none;width:44px;height:44px;border-radius:999px;border:1.5px solid var(--borde-campo);background:var(--papel);color:var(--tinta);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.icono-btn svg{width:20px;height:20px}
.solo-tel{display:none}
@media (max-width:1100px){
  .folio .cab-nav{display:none}
  .folio .cab-der .solo-tel{display:inline-flex}
}

/* ---- Héroe. Le habla al dueño que compra, con la escala que el jurado
   recuerda: h1 de 44 a 96 px. Dos acciones, no tres: verificar un folio es
   de otro público (quien recibe la constancia) y se mudó a la banda oscura
   «Así se verifica» (ronda 2, diseño). -------------------------------- */
.heroe{background:var(--fondo);overflow:hidden}
.heroe .ret{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding-block:clamp(32px,5.5vw,80px)}
.heroe-texto{grid-column:1 / span 7}
.heroe h1{font-size:var(--t-3xl);line-height:.95;max-width:13ch;margin-top:18px}
.heroe h1 em{font-style:normal;color:var(--acento)}
/* 36 px y no 24: con interlineado .95 los rasgos que bajan alcanzaban el
   párrafo (v1). */
.heroe-lead{font-size:var(--t-l);line-height:1.5;max-width:40ch;margin-top:36px}
.heroe-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.heroe-confianza{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;padding:0;list-style:none;color:var(--suave)}
.heroe-confianza li{display:flex;align-items:center;gap:6px;font-size:var(--t-s)}
.heroe-confianza svg{width:16px;height:16px;color:var(--jade);flex:none}
.heroe-arte{grid-column:8 / span 5;position:relative;aspect-ratio:1/1;max-width:520px;width:100%;justify-self:end;container-type:inline-size}
/* El disco lo dibuja el CSS (antes estaba fijo en el SVG): cambia con cada
   tema. En alto contraste es solo un aro: un disco claro sobre negro le
   ganaba al h1 (13–17:1). */
.heroe-arte::before{content:"";position:absolute;inset:6%;border-radius:50%;background:var(--disco);border:2px solid var(--banda-borde)}
.heroe-arte > img{position:absolute;inset:6%;width:88%;height:88%;z-index:2}
/* La constancia grande detrás del equipo es ILUSTRACIÓN: escala como imagen
   (unidades cqi del contenedor) y no reacomoda su texto. Con px, a 1024 se
   salía de la pantalla y el casco volvía a tapar el folio (ronda 2). */
.heroe-folio{position:absolute;z-index:1;right:-6%;top:-22%;width:56%;transform:rotate(5deg)}
.heroe-folio .constancia{padding:2cqi;box-shadow:var(--sombra-alta)}
.heroe-folio .constancia-cuerpo{padding:4cqi 4cqi 3.5cqi}
.heroe-folio .ceja{font-size:2.4cqi}
.heroe-folio .constancia-nombre{font-size:7.6cqi;white-space:nowrap;margin-top:1.5cqi}
.heroe-folio .constancia-curso{font-size:2.9cqi;margin-top:1.5cqi}
.heroe-folio .constancia-pie{margin-top:3cqi}
.heroe-folio .constancia-folio{font-size:2.5cqi;white-space:nowrap}
.heroe-folio .constancia-folio small{font-size:1.9cqi}
.heroe-folio .qr-img{width:11cqi;height:11cqi}
.heroe-tel{display:none}
/* ---- La constancia: el objeto rector. Marco de guilloche con dos
   gradientes (sin imagen), doble filete, nombre en Fraunces, folio en mono,
   QR REAL (el mismo Vista::qrSvg del producto; la v1 pintaba un mosaico que
   se leía como ícono, ronda 2) y el sello girado −8°. -------------------- */
.constancia{position:relative;background:var(--papel-constancia);border-radius:6px;color:var(--tinta);padding:10px;
  background-image:repeating-linear-gradient(45deg,var(--guilloche) 0 1px,transparent 1px 7px),repeating-linear-gradient(-45deg,var(--guilloche) 0 1px,transparent 1px 7px);
  border:1px solid var(--linea)}
.constancia-cuerpo{background:var(--papel-constancia);border:1px solid var(--guilloche);outline:1px solid var(--linea);outline-offset:-5px;
  border-radius:3px;padding:28px 30px 26px;position:relative}
.constancia .ceja{color:var(--jade)}
/* El sello invade la esquina: la ceja de una constancia sellada le deja ese
   hueco (sin esto, en teléfono el sello tapaba «…FINALIZACIÓN», v1). */
.con-sello .ceja{padding-right:120px}
.constancia-nombre{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;font-weight:650;letter-spacing:-.02em;
  font-size:var(--t-2xl);line-height:1.05;color:var(--tinta);margin-top:10px;padding-bottom:6px;border-bottom:1px solid var(--borde-campo)}
.constancia-curso{font-size:var(--t-s);color:var(--texto);margin-top:10px}
.constancia-pie{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-top:18px}
.constancia-folio{font-family:var(--mono);font-size:var(--t-s);letter-spacing:.04em;color:var(--tinta);position:relative}
.constancia-folio small{display:block;font-size:var(--t-xs);letter-spacing:.08em;color:var(--suave);text-transform:uppercase;margin-bottom:2px}
.qr-img{width:76px;height:76px;flex:none;border:1px solid var(--linea);border-radius:2px;background:#FFFFFF}
.sello{position:absolute;width:104px;height:104px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;
  border:3px solid var(--sello);color:var(--sello);transform:rotate(-8deg);font:700 .66rem/1.15 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 0 0 5px var(--papel-constancia),inset 0 0 0 6px var(--sello);background:var(--papel-constancia)}
.sello b{display:block;font-size:var(--t-xl);line-height:1;letter-spacing:0;margin:2px 0}
.sello-pos{right:22px;top:-26px}
.sello-espera{border-style:dashed;box-shadow:none;color:var(--suave);border-color:var(--borde-campo)}
.ficha{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;margin-top:18px;font-size:var(--t-s)}
.ficha dt{color:var(--suave)}
.ficha dd{margin:0;color:var(--tinta);font-weight:600}
/* ---- Tarjeta de curso = constancia en blanco. Toda la tarjeta es UN
   enlace (hoy son dos al mismo destino: 15 tabulaciones al primer curso).
   La clave vuelve («SI-C1»), como en el sitio de hoy: la v1 la quitó y la
   síntesis la pedía (ronda 2). Se fue la línea «≈ 20 min · 6 lecciones…»:
   era idéntica en las seis tarjetas y la banda de la constancia ya dice que
   todos los cursos tienen la misma forma. ---------------------------------- */
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tarjeta{position:relative;display:flex;flex-direction:column;background:var(--papel-constancia);border:1px solid var(--linea);
  outline:1px solid var(--linea);outline-offset:-6px;border-radius:6px;padding:24px 24px 20px;color:var(--texto);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.tarjeta:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta);border-color:var(--azul)}
.tarjeta-arriba{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0}
.tarjeta-arriba .mono{color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.etiqueta{flex:none;font:700 var(--t-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1.5px solid currentColor}
.etiqueta-gratis{color:var(--acento)}
.etiqueta-codigo{color:var(--suave)}
.tarjeta h3{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;font-weight:650;font-size:var(--t-xl);
  line-height:1.12;color:var(--tinta);margin-top:16px;letter-spacing:-.01em}
.tarjeta h3 a{color:inherit;text-decoration:none}
.tarjeta h3 a::after{content:"";position:absolute;inset:0;border-radius:6px}
.tarjeta-resumen{margin-top:12px;font-size:var(--t-s);line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tarjeta-abajo{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-top:auto;padding-top:22px}
.renglon-nombre{flex:1;font:500 var(--t-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave);border-bottom:1px dashed var(--borde-campo);padding-bottom:6px}
.renglon-nombre span{white-space:nowrap;font:600 var(--t-s)/1 var(--cuerpo);letter-spacing:0;text-transform:none;color:var(--tinta);margin-left:6px}
.sello-vacio{width:52px;height:52px;flex:none;border-radius:50%;border:2px dashed var(--borde-campo);display:flex;align-items:center;justify-content:center;
  color:var(--suave);transition:transform var(--dur-2) var(--ease)}
.sello-vacio svg{width:20px;height:20px}
.tarjeta:hover .sello-vacio{transform:rotate(12deg);border-color:var(--jade);color:var(--jade)}
.sello-lleno{border:2px solid var(--sello);background:var(--sello);color:var(--sobre-jade);transform:rotate(-8deg)}
.tarjeta-cta{font-weight:600;font-size:var(--t-s);color:var(--azul);margin-top:16px;display:flex;align-items:center;gap:6px}
.fila{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}

/* ---- Categorías: cada una la lleva una persona de la ilustración, solo
   reencuadrando el SVG aprobado. Reparto de la ronda 2: el casco con
   «Seguridad digital» se leía como seguridad industrial. Ahora: la mujer de
   oficina (correo y cuentas) → Seguridad digital; el señor del mostrador (el
   dueño) → Finanzas para el dueño; el joven del casco (el nuevo del equipo)
   → Habilidades blandas. Y cada categoría enseña TRES TÍTULOS DE PAGO: la v1
   no mostraba ni uno de los 25 que se venden (ronda 2, marketing). ---------- */
.cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cat{position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:28px;display:flex;flex-direction:column;gap:14px;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.cat:hover{transform:translateY(-3px);box-shadow:var(--sombra-alta)}
.cat-cab{display:flex;align-items:center;gap:16px}
.retrato{width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--disco);position:relative;flex:none;border:2px solid var(--banda-borde)}
/* Encuadre medido sobre el SVG (360 u. de lado): cabezas en x≈79 (mostrador),
   182 (oficina) y 284 (casco), y≈144–152. Ventana de ~110 u. centrada un
   poco abajo de la cabeza para que entren los hombros. */
.retrato img{position:absolute;width:327%;max-width:none;height:auto}
.retrato-mostrador img{left:-22%;top:-95%}
.retrato-oficina img{left:-116%;top:-100%}
.retrato-casco img{left:-208%;top:-91%}
.cat h3{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;font-weight:650;font-size:var(--t-xl);line-height:1.05;color:var(--tinta);letter-spacing:-.01em}
.cat h3 a{color:inherit;text-decoration:none}
.cat h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radio)}
.cat p{font-size:var(--t-s)}
.cat-cursos{list-style:none;padding:0;display:grid;gap:8px;font-size:var(--t-s);color:var(--tinta)}
.cat-cursos li{display:grid;grid-template-columns:18px 1fr;gap:8px}
.cat-cursos li::before{content:"";width:10px;height:10px;margin-top:7px;border-radius:50%;border:1.5px dashed var(--borde-campo)}
.cat-cursos .mas{color:var(--suave)}
.cat-cursos .mas::before{border-color:transparent}
.cat-meta{display:flex;gap:16px;font-size:var(--t-xs);margin-top:auto;padding-top:12px;border-top:1px solid var(--linea)}
.cat-meta b{color:var(--tinta)}

/* ---- Para tu equipo: lo que necesita el dueño que paga. El ejemplo en
   pesos sale de Precios::cotizar: 8 personas, 1 categoría = $1,600, el tramo
   de 5 a 9 que Precios.php llama «el cliente más común» (ronda 2). ------- */
.equipo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start}
.equipo-puntos{grid-column:1 / span 7;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;list-style:none;padding:0}
.equipo-puntos svg{width:28px;height:28px;color:var(--jade)}
.equipo-puntos h3{font-size:var(--t-l);color:var(--tinta);margin-top:10px;line-height:1.25}
.equipo-puntos p{font-size:var(--t-s);margin-top:6px}
.ejemplo{grid-column:9 / span 4;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:28px;box-shadow:var(--sombra)}
.ejemplo-total{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;font-weight:650;font-size:var(--t-2xl);line-height:1;color:var(--tinta);margin-top:14px}
.ejemplo-total small{font:500 var(--t-s)/1 var(--cuerpo);color:var(--suave);margin-left:8px}
.ejemplo dl{margin-top:18px;display:grid;grid-template-columns:1fr auto;gap:8px 12px;font-size:var(--t-s)}
.ejemplo dt{color:var(--suave)}
.ejemplo dd{margin:0;color:var(--tinta);font-weight:600;text-align:right}
.ejemplo .btn{width:100%;margin-top:22px}
.ejemplo-nota{font-size:var(--t-xs);color:var(--suave);margin-top:12px}
.ejemplo-por{display:none}

/* ---- Así se verifica: la banda oscura con la constancia iluminada y la
   verificación EN VIVO (cambio 1 de la ronda 2, diseño): el momento firma
   del concepto (barrido, sello, folio que se escribe) ya no espera a que
   alguien apruebe un quiz; lo ve el jurado y lo ve el dueño. En teléfono
   reemplaza la lista 01-04, así que la página se ACORTA. --------------------- */
.dentro{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center}
.dentro-texto{grid-column:1 / span 5}
/* Tamaño propio: fuera de .seccion-cab el h2 heredaba 1.5em (25.5 px) y
   rompía el mínimo de Fraunces (pintado, v2). */
.dentro-texto h2{font-size:var(--t-2xl);line-height:1.05}
.dentro-pasos{list-style:none;padding:0;margin-top:28px;display:grid}
.dentro-pasos li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--pie-linea);font-size:var(--t-s)}
.dentro-pasos .num{font:600 var(--t-s)/1.6 var(--mono);color:var(--pie-suave)}
.dentro-pasos b{color:#FFFFFF;font-weight:600}
:is([data-theme="sepia"],[data-theme="contraste"]) .folio .dentro-pasos b{color:var(--pie-texto)}
.dentro-muestra{grid-column:7 / span 6}
.linea-20{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;margin:18px 0 8px}
.linea-20 i{height:8px;border-radius:2px;background:var(--azul)}
.linea-20 i.ej{background:var(--acento)}
.linea-20 i.qz{background:var(--jade)}
.linea-20-ley{display:flex;gap:16px;flex-wrap:wrap;font-size:var(--t-xs);color:var(--suave)}
.linea-20-ley span{display:inline-flex;align-items:center;gap:6px}
.linea-20-ley i{width:10px;height:10px;border-radius:2px;background:var(--azul);display:inline-block}
.linea-20-ley i.ej{background:var(--acento)}.linea-20-ley i.qz{background:var(--jade)}
.muestra-nota{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;font-size:var(--t-s);color:var(--suave);flex-wrap:wrap}
.seccion-oscura .muestra-nota{color:var(--pie-suave)}
/* ---- Campo de verificar ------------------------------------------------ */
.verificar-linea{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;max-width:460px}
.verificar-linea label{flex-basis:100%;font-size:var(--t-s);color:var(--suave)}
.seccion-oscura .verificar-linea label{color:var(--pie-suave)}
.verificar-linea .campo{flex:1 1 200px;min-width:0}
.campo{min-height:48px;border:1.5px solid var(--borde-campo);border-radius:999px;padding:0 18px;background:var(--papel);color:var(--tinta);
  font:500 var(--t-s)/1 var(--mono);letter-spacing:.04em;width:100%}
/* El color de los ejemplos de los campos sale del tema: el gris del
   navegador (#757575) medía 3.53–4.22:1 en oscuro, sepia y negro (ronda 1). */
.campo::placeholder{color:var(--suave);opacity:1}
.valida{display:flex;align-items:center;gap:12px;background:var(--papel);border:1.5px solid var(--sello);border-radius:var(--radio);padding:14px 18px;margin-bottom:18px;color:var(--tinta);font-weight:600}
.valida svg{width:24px;height:24px;color:var(--sello);flex:none}
.no-valida{border-color:var(--borde-campo)}
.no-valida svg{color:var(--suave)}
/* El barrido: una línea que cruza la constancia UNA vez y se apaga. En la
   v1 la línea se quedaba pintada (al 92 % con movimiento, al 46 % y encima de
   «Resultado» sin él; ronda 2). Ahora es invisible salvo durante la
   animación, y se mueve con transform (la v1 animaba top). */
.escaneo{position:relative}
/* La capa del barrido va dentro de la constancia y se vuelve a montar con el
   sello cada que se toca «Verificar» (así la animación corre otra vez). */
.capa.escaneo{position:absolute;inset:0;z-index:3}
.escaneo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(var(--jade),var(--jade)) top / 100% 2px no-repeat;filter:drop-shadow(0 0 6px var(--jade))}
/* ---- Quién está detrás / preguntas / banda / pie ------------------- */
.quien{display:grid;grid-template-columns:160px minmax(0,1fr);gap:32px;align-items:center;max-width:860px}
/* 22-oct-2026: Fer achicó este título en el lienzo (de 52 a 35 px) y agrandó el
   nombre, para que lo que se lea primero sea QUIÉN, no la etiqueta. En el
   sistema queda t-xl (28 px) con el nombre en t-l (20 px): la misma proporción
   1.4 que eligió, sin sumar tamaños fuera de los 7 tokens.
   (31-oct: Fer subió el nombre a 23 px; ver «Ajustes de Fer a la portada», al final.)
   Ese mismo día quitó las ligas (LinkedIn y correo): se borraron completas, no
   se dejan <a> vacíos, que serían paradas de teclado sin nombre. Y el ancho
   fijo y el alto de la foto que dejó el arrastre no se conservaron: a 768 px
   cortaban el texto y ovalaban el círculo. (El porqué vive aquí y no en
   Main.dc.html: ningún tablero lleva comentarios HTML y el editor del lienzo
   no garantiza conservarlos.) */
.quien h2{font-size:var(--t-xl);line-height:1.1}
.preguntas{max-width:860px;border-top:1px solid var(--linea)}
.preguntas details{border-bottom:1px solid var(--linea)}
.preguntas summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:64px;
  font-weight:600;font-size:var(--t-l);color:var(--tinta)}
.preguntas summary::-webkit-details-marker{display:none}
.preguntas summary svg{width:20px;height:20px;flex:none;transition:transform var(--dur-2) var(--ease)}
.preguntas details[open] > summary svg{transform:rotate(45deg)}
.preguntas details p{padding:0 0 20px;max-width:66ch}
.banda{background:var(--pie);color:var(--pie-texto)}
.banda .ret{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-block:44px}
.banda h2{font-size:var(--t-2xl);color:#FFFFFF;line-height:1.05;max-width:22ch}
:is([data-theme="sepia"],[data-theme="contraste"]) .folio .banda h2{color:var(--pie-texto)}
.banda p{color:var(--pie-suave);margin-top:10px;max-width:56ch}
/* Foco claro sobre lo oscuro: el anillo --azul-2 medía 2.96:1 en claro y
   2.33:1 en sepia sobre la banda (falla WCAG 1.4.11, ronda 1). */
.banda :focus-visible,.pie :focus-visible{outline-color:var(--pie-texto)}
.pie{background:var(--pie);color:var(--pie-suave);border-top:1px solid var(--pie-linea)}
.pie .ret{display:flex;gap:8px 24px;flex-wrap:wrap;align-items:center;min-height:72px;font-size:var(--t-s)}
.pie a{color:var(--pie-texto);display:inline-flex;align-items:center;min-height:44px}

/* ==== Página del curso ================================================ */
.migas{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:var(--t-s);color:var(--suave);padding-top:28px}
.migas a{display:inline-flex;align-items:center;min-height:44px}
.curso-cab{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;padding-block:12px 56px}
.curso-cab-texto{grid-column:1 / span 7}
.curso-cab .tarjeta-arriba{justify-content:flex-start;gap:14px}
.curso-cab h1{font-size:var(--t-2xl);line-height:1.02;margin-top:14px;max-width:16ch}
.curso-cab .lead{font-size:var(--t-l);margin-top:18px;max-width:46ch}
.curso-cab .para{font-size:var(--t-s);color:var(--suave);margin-top:12px}
.curso-acciones{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center;margin-top:28px}
.curso-meta{display:flex;gap:14px;font-size:var(--t-s);color:var(--suave);flex-wrap:wrap}
.curso-meta b{color:var(--tinta);font-weight:600}
.curso-cab-folio{grid-column:8 / span 5;position:relative;padding-top:24px}
.temario{list-style:none;padding:0;border-top:1px solid var(--linea)}
.temario li{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;min-height:64px;border-bottom:1px solid var(--linea);padding:10px 0}
.temario .n{width:32px;height:32px;border-radius:50%;border:1.5px dashed var(--borde-campo);display:flex;align-items:center;justify-content:center;font:600 var(--t-xs)/1 var(--mono);color:var(--suave)}
.temario li.hecho .n{background:var(--sello);border:1.5px solid var(--sello);color:var(--sobre-jade)}
.temario li.aqui{background:var(--banda);margin-inline:-12px;padding-inline:12px;border-radius:8px}
.temario li.aqui .n{border-style:solid;border-color:var(--azul);color:var(--azul)}
.temario .t{color:var(--tinta);font-weight:600}
/* El enlace ocupa el alto del renglón: medía 18–20 px dentro de un renglón
   de 52–64 (banco de la v2, objetivos táctiles). */
.temario .t a{color:inherit;text-decoration:none;display:flex;align-items:center;min-height:44px}
.temario .t a:hover{text-decoration:underline}
.temario .tipo{font:500 var(--t-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.curso-cuerpo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-bottom:88px}
.curso-temario{grid-column:1 / span 7}
.curso-temario .seccion-cab{margin-bottom:16px}
.curso-lado{grid-column:9 / span 4;display:grid;gap:24px;align-content:start}
.caja{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:24px}
.caja-banda{background:var(--banda);border-color:var(--banda-borde)}
.caja h2,.titulo-caja{font-size:var(--t-l);color:var(--tinta);font-weight:700;font-family:var(--cuerpo);letter-spacing:0;line-height:1.3}
.caja p{font-size:var(--t-s);margin-top:8px}
.aprende{list-style:none;padding:0;margin-top:14px;display:grid;gap:14px;counter-reset:a}
.aprende li{display:grid;grid-template-columns:36px 1fr;gap:10px;font-size:var(--t-s);counter-increment:a}
.aprende li::before{content:"0" counter(a);font:600 var(--t-xs)/1.9 var(--mono);color:var(--acento)}
.barra-fija{display:none}

/* ==== Lección ========================================================= */
.lec-cab{background:var(--papel);border-bottom:1px solid var(--linea);position:relative}
.lec-cab .ret{display:flex;align-items:center;gap:20px;min-height:56px}
.curso-nom{font-weight:600;color:var(--tinta);font-size:var(--t-s);display:flex;align-items:center;min-height:44px;min-width:0;text-decoration:none}
.folio .curso-nom{color:var(--tinta)}
.curso-nom span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.paso{margin-left:auto;font:500 var(--t-xs)/1 var(--mono);letter-spacing:.08em;color:var(--suave);white-space:nowrap}
.progreso{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--linea)}
/* scaleX y no width: animar el ancho obliga a recalcular el diseño (hoy la
   barra anima width). El valor lo pone el paso; la v1 decía .33 para el paso
   2 de 9 (= .222). Clases por paso en vez de style="" en el marcado: la
   política de contenido del sitio bloquea los estilos en línea (ronda 2). */
.progreso i{display:block;height:100%;width:100%;background:var(--jade);transform-origin:left;transform:scaleX(var(--avance,0))}
.lec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:40px 96px}
.lec-temario{grid-column:1 / span 3}
.lec-temario .ceja{color:var(--suave);margin-bottom:10px}
.lec-temario .temario li{grid-template-columns:36px 1fr;min-height:52px;font-size:var(--t-s)}
.lec-texto{grid-column:4 / span 6}
.lec-texto h1{font-size:var(--t-2xl);line-height:1.05;margin-top:12px}
/* :not(.ceja): sin esto la ceja «Lección 2 de 6» heredaba el tamaño del cuerpo. */
.lec-texto p:not(.ceja),.lec-texto li{font-size:var(--t-m);line-height:1.65;max-width:66ch}
.lec-texto > * + *{margin-top:20px}
/* El póster del video no repite el h1 (la v1 lo ponía en 32 px debajo del
   mismo h1, ronda 2) y sus colores son tokens del tema, no fijos. */
.folio .video{position:relative;aspect-ratio:16/9;border-radius:var(--radio);overflow:hidden;background:var(--video);display:flex;align-items:end;padding:24px;
  color:var(--pie-texto);text-decoration:none;border:1px solid var(--linea)}
.video::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,var(--guilloche) 0 1px,transparent 1px 9px)}
.play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--papel);color:var(--azul);display:flex;align-items:center;justify-content:center;border:2px solid var(--azul)}
.play svg{width:28px;height:28px;margin-left:4px}
.lec-detalles{border-bottom:1px solid var(--linea)}
.lec-detalles summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-height:52px;font-weight:600;color:var(--tinta);border-bottom:1px solid var(--linea)}
.lec-detalles summary::-webkit-details-marker{display:none}
.lec-detalles summary svg{width:20px;height:20px;transition:transform var(--dur-2) var(--ease)}
.lec-detalles[open] > summary svg{transform:rotate(45deg)}
.lec-detalles .cuerpo{padding-block:20px 8px;display:grid;gap:20px}
.lec-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:40px;padding-top:24px;border-top:1px solid var(--linea)}
.lec-nav .suave{font-size:var(--t-xs)}

/* Ejercicio: el correo sospechoso como objeto, con 5 sellos de avance.
   Las marcas son <button> pero se leen como texto: el ejercicio es
   ENCONTRARLAS. La v1 les daba fondo al pasar el ratón y regalaba las
   respuestas (ronda 2, usabilidad); ahora TODO el correo tiene el mismo
   cursor y ninguna marca cambia antes de tocarla. En el sitio, el teclado
   recorre el correo palabra por palabra con flechas (como hoy), así que las
   5 respuestas tampoco son las 5 únicas paradas de Tab: el foco no las
   delata. En la maqueta son botones solo para poder tocarlas. */
.correo{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);cursor:pointer}
.explica{margin:12px 0 4px;border-left:3px solid var(--acento);padding:8px 0 8px 14px;font-size:var(--t-s);color:var(--texto)}
.sellos{display:flex;gap:10px;align-items:center}
.sellos i{width:30px;height:30px;border-radius:50%;border:2px dashed var(--borde-campo);display:inline-flex}
.sellos i.ok{border:2px solid var(--sello);background:var(--sello);transform:rotate(-8deg);align-items:center;justify-content:center}
.sellos i.ok::after{content:"✓";color:var(--sobre-jade);font:700 14px/1 var(--cuerpo);font-style:normal}
.sellos-txt{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.08em;color:var(--suave);margin-left:6px}

/* ==== Resultado y verificar ============================================== */
.resultado{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;padding-block:56px 88px}
.resultado-texto{grid-column:1 / span 5}
.resultado-texto h1{font-size:var(--t-2xl);line-height:1.02;margin-top:14px}
.puntaje{display:flex;align-items:baseline;gap:10px;margin-top:22px;font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;font-weight:650;font-size:var(--t-3xl);line-height:1;color:var(--tinta)}
.puntaje small{font:500 var(--t-l)/1 var(--cuerpo);color:var(--suave)}
.resultado-folio{grid-column:7 / span 6;position:relative}
.resultado-folio .constancia-cuerpo{padding:40px 40px 34px}
.resultado-folio .sello{width:132px;height:132px;right:30px;top:-40px}
.compartir{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.siguiente{margin-top:28px;padding-top:20px;border-top:1px solid var(--linea);display:grid;gap:4px}
.ver-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;padding-block:56px 96px}
.ver-form{grid-column:1 / span 5}
.ver-form h1{font-size:var(--t-2xl);line-height:1.02;margin-top:14px}
.ver-form .verificar-linea{max-width:none}
.ver-res{grid-column:7 / span 6}

/* ==== Precios (calculadora: propuesta, la decide Fer) =================== */
.precio-cab{padding-top:48px;max-width:760px}
.precio-cab h1{font-size:var(--t-2xl);line-height:1.02;margin-top:14px}
.precio-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:36px 96px;align-items:start}
.precio-elige{grid-column:1 / span 7;display:grid;gap:28px}
.precio-elige fieldset{border:0;padding:0;margin:0;min-width:0}
.precio-elige legend{font-weight:700;color:var(--tinta);font-size:var(--t-l);margin-bottom:12px}
.chk{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 16px;border:1.5px solid var(--borde-campo);border-radius:var(--radio);background:var(--papel);
  cursor:pointer;margin-bottom:10px;font:inherit;color:inherit;text-align:left}
.chk:has(input:checked){border-color:var(--jade);box-shadow:inset 0 0 0 1px var(--jade)}
.caja-chk{width:24px;height:24px;border-radius:6px;border:2px solid var(--borde-campo);display:flex;align-items:center;justify-content:center;flex:none;color:var(--sobre-jade)}
.chk input:checked + .caja-chk{background:var(--jade);border-color:var(--jade)}
.chk input:not(:checked) + .caja-chk svg{visibility:hidden}
.caja-chk svg{width:16px;height:16px}
.chk b{color:var(--tinta);display:block}
.chk small{color:var(--suave);font-size:var(--t-s)}
.contador{display:inline-flex;align-items:center;border:1.5px solid var(--borde-campo);border-radius:999px;background:var(--papel)}
.contador button{width:52px;height:52px;border:0;background:transparent;color:var(--tinta);font:600 var(--t-xl)/1 var(--cuerpo);cursor:pointer;border-radius:999px}
/* El número es un dato dentro de un control, no exhibición: Figtree con
   cifras tabulares (en Fraunces quedaba en 25.6 px, bajo su mínimo; ronda 2). */
.contador input{min-width:72px;text-align:center;font:700 var(--t-xl)/1 var(--cuerpo);font-variant-numeric:tabular-nums;color:var(--tinta)}
/* Tramos: también son atajos (tocar «10 a 24» pone 10 personas: de 10 a 100
   eran 90 toques, ronda 2), y el activo no se distingue solo por color: lleva
   palomita y relleno. */
.niveles{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.nivel{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.04em;min-height:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--borde-campo);color:var(--tinta);
  background:var(--papel);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nivel[aria-pressed="true"]{border-color:var(--jade);background:var(--jade);color:var(--sobre-jade)}
.ticket{grid-column:9 / span 4;position:relative}
.ticket .constancia-cuerpo{padding:26px}
.ticket dl{display:grid;grid-template-columns:1fr auto;gap:10px 12px;margin-top:16px;font-size:var(--t-s)}
.ticket dt{color:var(--suave)}
.ticket dd{margin:0;text-align:right;color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}
.total{border-top:1px dashed var(--borde-campo);margin-top:16px;padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.total b{font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;font-weight:650;font-size:var(--t-2xl);line-height:1;color:var(--tinta)}
.ticket .btn{width:100%;margin-top:14px}
.ticket .btn:first-of-type{margin-top:20px}

/* ---- Mensajes. Los tres del sitio de hoy (error, aviso, listo) con su
   paleta, en el renglón del sistema: borde de 1.5 px, radio 10 y un ícono
   que dice el tipo sin depender del color (rojo y verde no se distinguen
   para 1 de cada 12 hombres). ------------------------------------------- */
.lec-aviso,:is(.examen,.compra-forma,.pago-grid,.estado-compra) .aviso{display:flex;gap:12px;align-items:flex-start;border-radius:var(--radio);padding:14px 18px;font-size:var(--t-s);line-height:1.55;color:var(--tinta);
  background:var(--aviso-fondo);border:1.5px solid var(--aviso-linea)}
.lec-aviso svg,:is(.examen,.compra-forma,.pago-grid,.estado-compra) .aviso svg{width:22px;height:22px;flex:none;margin-top:1px;color:var(--acento)}
:is(.examen,.compra-forma,.pago-grid,.estado-compra) .aviso-ok{background:var(--papel);border-color:var(--sello)}
:is(.examen,.compra-forma,.pago-grid,.estado-compra) .aviso-ok svg{color:var(--sello)}
:is(.examen,.compra-forma,.pago-grid,.estado-compra) .aviso-err{background:var(--err-fondo);border-color:var(--err-linea)}
:is(.examen,.compra-forma,.pago-grid,.estado-compra) .aviso-err svg{color:var(--err)}

/* ---- Formularios largos (comprar, quiz). El campo de UNA línea con forma de
   píldora (.campo) es de verificar un folio; para un formulario de varios
   datos la píldora alarga la vista y no deja leer la etiqueta junto al dato,
   así que aquí el campo es rectangular y la etiqueta va ARRIBA, siempre
   visible (un texto de ejemplo dentro del campo se va al escribir y no
   sustituye a la etiqueta). Lo opcional dice «opcional»; no hay asteriscos
   (decisión del 6-oct que se conserva). El borde es --borde-campo, ≥ 3:1. --- */
.forma{display:grid;gap:30px}
.forma fieldset{border:0;padding:0;margin:0;min-width:0}
.forma legend{font-weight:700;color:var(--tinta);font-size:var(--t-l);margin-bottom:14px;padding:0}
.campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.campos .todo{grid-column:1 / -1}
.etq{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:var(--t-s);color:var(--tinta)}
.etq .opcional{font-weight:500;color:var(--suave)}
.entrada{min-height:48px;border:1.5px solid var(--borde-campo);border-radius:var(--radio);padding:10px 14px;background:var(--papel);color:var(--tinta);
  font:400 var(--t-m)/1.4 var(--cuerpo);width:100%}
textarea.entrada{min-height:104px;resize:vertical}
.entrada::placeholder{color:var(--suave);opacity:1}
.ayuda-campo{font-weight:400;color:var(--suave);font-size:var(--t-s)}
/* Casilla de verdad (input checkbox), con su cuadro de 24 px dentro de un
   renglón de 44: el cuadro chico solo es el blanco del dedo si el renglón
   entero es la etiqueta. */
.casilla{display:flex;gap:12px;align-items:flex-start;min-height:44px;padding:10px 0;font-size:var(--t-s);color:var(--tinta);cursor:pointer}
.casilla input{width:22px;height:22px;flex:none;margin:1px 0 0;accent-color:var(--jade)}
.casilla small{display:block;color:var(--suave);font-size:var(--t-s);margin-top:2px}
.sub-bloque{border-left:3px solid var(--linea);padding:4px 0 4px 18px;margin-top:4px;display:grid;gap:10px}
.compra-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;padding-block:28px 96px;align-items:start}
.compra-forma{grid-column:1 / span 7}
.compra-grid .ticket{grid-column:9 / span 4;position:sticky;top:24px}
.ticket .legal{font-size:var(--t-xs);color:var(--suave);margin-top:14px;line-height:1.5}
.metodos{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.metodos > span{font:600 var(--t-xs)/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 9px;border:1px solid var(--linea);border-radius:999px;color:var(--texto)}

/* ---- Quiz: la hoja del examen junto a la constancia que espera. El nombre
   que la persona escribe aparece en la constancia mientras lo escribe: así
   ve, antes de empezar, cómo quedará (y corrige un acento a tiempo; hoy lo
   descubre al final). Las diez marcas de abajo de la constancia son las
   preguntas: se llenan con palomita o con tache, y el tache lleva TRAZO
   distinto, no solo otro color. ------------------------------------------ */
.examen-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;padding-block:40px 96px}
.examen{grid-column:1 / span 7;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:32px;box-shadow:var(--sombra)}
.examen h1,.examen h2{font-size:var(--t-xl);line-height:1.15;margin-top:12px;font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;font-weight:650;color:var(--tinta);letter-spacing:-.01em}
/* :not() a propósito: «.examen-paso > p» (en el lienzo, .examen > p) pesa más que .ceja y .puntaje y les
   quitaba su tamaño (la ceja salía a 15 px y el puntaje a 15 en vez de 96). */
.examen > p:not(.ceja):not(.puntaje),.examen-paso > p:not(.ceja):not(.puntaje){margin-top:10px;font-size:var(--t-s)}
.examen .forma{margin-top:24px;gap:20px}
.examen-lado{grid-column:9 / span 4;position:sticky;top:24px}
.captcha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.captcha output{font:700 var(--t-l)/1 var(--mono);color:var(--tinta);letter-spacing:.04em;min-width:88px}
.captcha .entrada{width:96px;text-align:center}
.cuenta-q{display:flex;justify-content:space-between;gap:12px;font:600 var(--t-xs)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.barra-q{height:6px;border-radius:999px;background:var(--linea);margin-top:12px;overflow:hidden}
.barra-q i{display:block;height:100%;background:var(--jade);transform-origin:left;transform:scaleX(var(--avance,0))}
.opciones{display:grid;gap:10px;margin-top:22px}
.opcion{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;width:100%;min-height:56px;padding:14px 16px;border:1.5px solid var(--borde-campo);border-radius:var(--radio);
  background:var(--papel);color:var(--tinta);font:500 var(--t-m)/1.45 var(--cuerpo);text-align:left;cursor:pointer}
.opcion .letra{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--borde-campo);display:flex;align-items:center;justify-content:center;font:700 var(--t-xs)/1 var(--mono);color:var(--suave)}
.opcion:hover:not([disabled]){border-color:var(--azul)}
.opcion.bien{border-color:var(--sello);box-shadow:inset 0 0 0 1px var(--sello)}
.opcion.bien .letra{background:var(--sello);border-color:var(--sello);color:var(--sobre-jade)}
.opcion.mal{border-color:var(--err);border-style:dashed}
.opcion.mal .letra{border-color:var(--err);color:var(--err)}
.opcion[disabled]{cursor:default}
.veredicto{font-weight:700;color:var(--tinta)}
.marcas{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin-top:16px}
.marcas i{aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--borde-campo);display:flex;align-items:center;justify-content:center;font:700 var(--t-xs)/1 var(--cuerpo);font-style:normal}
.marcas i.ok{border:1.5px solid var(--sello);background:var(--sello);color:var(--sobre-jade)}
.marcas i.no{border:1.5px solid var(--suave);color:var(--suave)}
.marcas i.ahora{border:2px solid var(--azul)}
.marcas-ley{display:flex;justify-content:space-between;font-size:var(--t-xs);color:var(--suave);margin-top:8px}
.nombre-vacio{color:var(--suave)}
/* ---- Estado de tu compra: tres cifras como fichas y una tabla por categoría.
   La barra de cada curso es decoración (aria-hidden): la cifra ya está en la
   tabla y la barra solo deja ver de un vistazo cuánto falta. ------------- */
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.cifra{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:22px 24px}
.cifra b{display:block;font-family:var(--display);font-variation-settings:"opsz" 144,"SOFT" 50,"WONK" 0;font-weight:650;font-size:var(--t-xl);line-height:1.1;color:var(--tinta);font-variant-numeric:tabular-nums}
.cifra span{display:block;font-size:var(--t-s);color:var(--suave);margin-top:6px}
/* position:relative a propósito (banco del 22-oct): el texto solo para lector
   de pantalla (.sr) es absoluto, y sin un ancestro posicionado se ubicaba
   contra la página, fuera de la caja que corta la tabla, y la desbordaba 28 px
   a 390 y 98 a 320. */
.tabla-caja{overflow-x:auto;margin-top:16px;position:relative}
.tabla{width:100%;border-collapse:collapse;font-size:var(--t-s);min-width:520px}
.tabla th{text-align:left;font:600 var(--t-xs)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave);padding:10px 12px;border-bottom:1.5px solid var(--linea)}
.tabla td{padding:14px 12px;border-bottom:1px solid var(--linea);color:var(--tinta);vertical-align:middle}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;width:120px}
.tabla .barra-td{width:30%}
.barra-par{height:8px;border-radius:999px;background:var(--linea);position:relative;overflow:hidden}
.barra-par i{position:absolute;inset:0 auto 0 0;background:var(--azul);border-radius:999px}
.barra-par i.ap{background:var(--sello)}

/* ---- Regreso del pago. El código va en una ficha con la forma de la
   constancia (es el papel que la persona se lleva), en mono grande y en
   bloques de cuatro, como lo escribirá en el curso. ---------------------- */
.pago-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:start;padding-block:28px 96px}
.pago-texto{grid-column:1 / span 6;display:grid;gap:20px;align-content:start}
.pago-texto h1{font-size:var(--t-2xl);line-height:1.02}
.pago-ficha{grid-column:8 / span 5}
.codigo-grande{font:700 var(--t-xl)/1.2 var(--mono);letter-spacing:.06em;color:var(--tinta);margin-top:12px}
.pasos{list-style:none;padding:0;display:grid;counter-reset:p;border-top:1px solid var(--linea)}
.pasos li{display:grid;grid-template-columns:44px 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--linea);font-size:var(--t-s);counter-increment:p}
.pasos li::before{content:"0" counter(p);font:600 var(--t-s)/1.6 var(--mono);color:var(--acento)}
.botones{display:flex;gap:12px;flex-wrap:wrap}

/* ---- Categoría. La cabecera repite la persona de la tarjeta de la portada
   (el mismo encuadre, más grande): quien llega de la portada reconoce dónde
   está. Las otras categorías van como pestañas de enlaces y no como lista
   desplegable: con tres categorías, una lista esconde dos de tres y en el
   sitio de hoy tuvo que llevar su botón «Ver» (F0, 22-oct) para cumplir
   WCAG 3.2.2; un enlace no tiene ese problema. ------------------------------ */
.cat-hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:center;padding-block:8px 36px}
.cat-hero-texto{grid-column:1 / span 7;display:flex;gap:24px;align-items:center}
.cat-hero .retrato{width:132px;height:132px}
.cat-hero h1{font-size:var(--t-2xl);line-height:1.02;margin-top:10px}
.cat-hero p.lead{font-size:var(--t-l);margin-top:12px;max-width:40ch}
.pestanas{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--linea);padding-bottom:16px;margin-bottom:28px}
.pestana{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--borde-campo);text-decoration:none;
  font-weight:600;font-size:var(--t-s);color:var(--tinta);background:var(--papel)}
.folio .pestana{color:var(--tinta)}
.folio .pestana[aria-current="page"]{background:var(--tinta);border-color:var(--tinta);color:var(--fondo)}
.pestana small{font:600 var(--t-xs)/1 var(--mono);color:inherit}
.filtros-fila{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;font-size:var(--t-s);color:var(--suave)}
.filtros-fila .pestanas{border:0;padding:0;margin:0}
/* «En curso»: la constancia a medio llenar. El renglón del nombre dice en
   qué va y el sello vacío muestra cuánto falta con un trazo, no con color. */
.renglon-nombre.en-curso span{color:var(--azul)}
.sello-vacio.medio{border-style:solid;border-color:var(--azul)}
.seccion-fin{margin-bottom:88px}
.foto-img{width:160px;height:160px;border-radius:50%;object-fit:cover;border:2px solid var(--banda-borde);background:var(--disco)}
.quien-nombre{font-size:var(--t-l);color:var(--tinta);margin-top:14px}
.quien-nombre b{font-weight:700}
@media (max-width:900px){
  .compra-forma,.compra-grid .ticket,.cat-hero-texto,.examen,.examen-lado,.pago-texto,.pago-ficha{grid-column:1 / -1}
  .compra-grid .ticket,.examen-lado{position:static}
  .cifras{grid-template-columns:1fr}
}
@media (max-width:640px){
  .campos{grid-template-columns:1fr}
  .cat-hero-texto{flex-direction:column;align-items:flex-start;gap:14px}
  .cat-hero .retrato{width:88px;height:88px}
  /* Solo la lista de la categoría: la fila de la portada se desliza de lado. */
  .tarjetas.cat-lista{grid-template-columns:1fr}
  .examen{padding:22px 18px}
  .examen-grid{padding-block:20px 48px}
  /* En teléfono la constancia que espera va ARRIBA y compacta (la vista
     previa del nombre es lo que importa); la hoja del examen, debajo. */
  .examen-lado{order:-1}
  .botones .btn{flex:1 1 100%}
}

/* ==== Menú y colores (teléfono) ========================================= */
.panel{background:var(--papel);border-bottom:1px solid var(--linea);box-shadow:var(--sombra-alta);padding:8px 0 20px}
.panel-lista{list-style:none;padding:0}
.panel-lista a{display:flex;align-items:center;justify-content:space-between;min-height:56px;border-bottom:1px solid var(--linea);text-decoration:none;color:var(--tinta);font-weight:600;font-size:var(--t-l)}
.panel .btn{width:100%;margin-top:16px}
.colores{border:0;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.colores legend{font-weight:700;color:var(--tinta);margin-bottom:10px}
.color{display:flex;cursor:pointer}
.color-caja{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1.5px solid var(--linea);border-radius:var(--radio);font-size:var(--t-xs);color:var(--tinta)}
.color input{position:absolute;opacity:0;pointer-events:none}
.color input:checked + .color-caja{border-color:var(--jade);box-shadow:inset 0 0 0 1px var(--jade)}
.muestra{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--borde-campo)}
.m-auto{background:linear-gradient(90deg,#F4F7FB 50%,#0F1823 50%)}.m-light{background:#F4F7FB}.m-dark{background:#0F1823}
.m-sepia{background:#F1E7D0}.m-trueblack{background:#000000}.m-contraste{background:linear-gradient(135deg,#000 50%,#FFFF00 50%)}
/* ==== Tableta (641–1100) ================================================= */
@media (max-width:1100px){
  .heroe-folio{right:-4%;top:-18%}
}
@media (max-width:900px){
  .heroe-texto,.heroe-arte,.dentro-texto,.dentro-muestra,.equipo-puntos,.ejemplo,.curso-cab-texto,.curso-cab-folio,.curso-temario,.curso-lado,
  .lec-temario,.lec-texto,.resultado-texto,.resultado-folio,.ver-form,.ver-res,.precio-elige,.ticket{grid-column:1 / -1}
  .heroe-arte{max-width:420px;justify-self:center;margin-top:32px}
  .heroe-folio{display:none}
  .tarjetas,.cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lec-temario{display:none}
}
/* ==== Teléfono ========================================================= */
@media (max-width:640px){
  .cab .ret{gap:12px;min-height:55px}
  .solo-esc{display:none}
  .logo b{font-size:var(--t-m)}
  /* Héroe en teléfono: la ilustración PEQUEÑA arriba a la derecha, junto a la
     ceja, y no centrada debajo (hoy ocupa 200 px debajo del texto y empuja los
     cursos a 1167 px). La lista de confianza se va: con ella la primera tarjeta
     quedaba a 629 px y la meta es ≤ 560 (ronda 2, medido); lo que decía
     (gratis, sin registro) ya lo dicen el botón y el título de abajo. A cambio
     queda UNA frase con el concepto: en la v1 la palabra «folio» no aparecía
     hasta y≈1104 (ronda 2, diseño). */
  .heroe .ret{padding-block:16px 20px;position:relative}
  .heroe-arte{position:absolute;right:var(--margen);top:4px;width:104px;max-width:104px;margin:0}
  .heroe .ceja{padding-right:108px}
  .heroe h1{font-size:var(--t-2xl);line-height:1;margin-top:12px;max-width:none;padding-right:64px}
  .heroe-lead{font-size:var(--t-m);margin-top:16px}
  .heroe-lead .solo-esc{display:none}
  .heroe-tel{display:block;font-size:var(--t-s);color:var(--suave);margin-top:6px}
  .heroe-acciones{margin-top:18px}
  .heroe-acciones .btn{flex:1 1 100%}
  .heroe-confianza{display:none}
  .seccion{padding-block:32px}
  .seccion-cab{margin-bottom:16px}
  .seccion-cab p{display:none}
  #gratis.seccion{padding-top:16px}
  #gratis .seccion-cab .enlace{display:none}
  /* Filas que se deslizan de lado: se asoma la siguiente tarjeta (invita a
     deslizar) y la página no crece con cada curso. */
  .fila,.cats{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin-inline:calc(-1 * var(--margen));padding-inline:var(--margen);scroll-padding-inline:var(--margen);gap:14px;padding-bottom:6px}
  .fila > *,.cats > *{scroll-snap-align:start}
  .tarjeta{padding:20px 20px 18px}
  /* Excepción declarada a «Fraunces ≥ 28 px»: a 24 px con +.01em de
     interletrado el título de la tarjeta aún se lee; a 28 px los títulos de
     tres renglones empujaban la tarjeta a 470 px de alto. */
  .tarjeta h3{font-size:1.5rem;letter-spacing:.01em;margin-top:12px}
  .tarjeta-resumen{-webkit-line-clamp:2}
  .cat{padding:20px}
  .cat .retrato{width:64px;height:64px}
  .cat p:not(.cat-meta){display:none}
  .dentro-pasos{display:none}
  .dentro-muestra{margin-top:8px}
  .equipo-puntos{grid-template-columns:1fr;gap:16px}
  .equipo-puntos li{display:grid;grid-template-columns:28px 1fr;column-gap:12px}
  .equipo-puntos h3{margin-top:0;font-size:var(--t-m)}
  .equipo-puntos p{grid-column:2;margin-top:2px}
  .ejemplo{padding:22px}
  /* En teléfono el desglose se resume en una línea junto al total («$200 por
     persona»); la cuenta completa está a un toque, en «Calcular mi precio». */
  .ejemplo dl{display:none}
  .ejemplo-por{display:block;margin-top:8px;font-size:var(--t-s);color:var(--suave)}
  .banda .ret{padding-block:28px}
  .banda .btn{width:100%}
  .constancia-cuerpo{padding:22px 18px 18px}
  .sello{width:88px;height:88px}
  .sello b{font-size:var(--t-l)}
  .con-sello .ceja{padding-right:92px}
  /* Curso: el botón vive en la barra fija de abajo; repetirlo arriba ponía dos
     «Continuar» en la misma pantalla (v1). */
  .curso-cab{padding-bottom:28px}
  .curso-cab-folio{display:none}
  .curso-acciones .btn{display:none}
  .temario li{grid-template-columns:40px 1fr auto;gap:12px}
  .temario li:not(.aqui) .tipo{display:none}
  .barra-fija{display:flex;position:sticky;bottom:0;z-index:5;gap:10px;align-items:center;padding:10px var(--margen) calc(10px + env(safe-area-inset-bottom));
    background:var(--papel);border-top:1px solid var(--linea);box-shadow:0 -8px 24px rgba(21,33,46,.08)}
  .barra-fija .btn{flex:1}
  .barra-fija .btn.icono{flex:0 0 auto;padding:0 18px}
  /* Lección: en la cabecera se ve el nombre del curso y no «Paso 2 de 9» (la
     barra de abajo ya dice el avance). En la v1 el nombre medía 0 px a 320 y
     su enlace seguía en el Tab (ronda 2, usabilidad). */
  .paso{display:none}
  .lec-cab .icono-btn{margin-left:auto}
  .lec{padding-block:24px 40px}
  .folio .video{padding:16px}
  .play{width:60px;height:60px;margin:-30px 0 0 -30px}
  .lec-nav{display:none}
  .resultado-folio .sello{width:96px;height:96px;right:12px;top:-30px}
  .resultado-folio .constancia-cuerpo{padding:28px 20px 22px}
  .compartir .btn{flex:1 1 100%}
}
/* ==== Movimiento: solo si la persona no pidió reducirlo ==================
   Todo con transform y opacity (la v1 animaba top, box-shadow y clip-path,
   ronda 2). Con «reducir movimiento» cada efecto se ve ya terminado. */
@media (prefers-reduced-motion:no-preference){
  @keyframes sellar{0%{transform:scale(1.6) rotate(-16deg);opacity:0}60%{transform:scale(.94) rotate(-8deg);opacity:1}100%{transform:scale(1) rotate(-8deg);opacity:1}}
  @keyframes tinta{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.35);opacity:0}}
  @keyframes escanear{0%{transform:translateY(4%);opacity:0}12%{opacity:.85}88%{opacity:.85}100%{transform:translateY(94%);opacity:0}}
  /* El folio «se escribe»: una cortina del color del papel se corre a la
     derecha en 18 pasos (18 caracteres a 35 ms). Con transform y no con un
     span por letra: el lector de pantalla lee el folio entero una vez. */
  @keyframes escribir{from{transform:translateX(0)}to{transform:translateX(100%)}}
  .anima-sello{animation:sellar var(--dur-3) cubic-bezier(.2,.8,.2,1.2) both}
  .anima-sello::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:3px solid var(--sello);animation:tinta 700ms var(--dur-3) ease-out both}
  .escaneo.anima::after{animation:escanear 900ms var(--ease) 1 both}
  .anima-folio{display:inline-block;position:relative;overflow:hidden;vertical-align:bottom}
  .anima-folio::after{content:"";position:absolute;inset:0;background:var(--papel-constancia);animation:escribir 630ms steps(18,end) 650ms both}
}
@media (prefers-reduced-motion:reduce){
  .folio *,.folio *::before,.folio *::after{transition:none!important;animation:none!important}
}

/* ==========================================================================
   F3d · LAS CUATRO PÁGINAS DE FLUJO QUE FALTABAN (25-oct-2026). Fer decidió
   el 22-oct que se diseñaran en el lienzo y se le enseñaran antes de
   construirlas: abrir un curso con código (el canje), el programa con
   constancia DC-3 en sus cinco estados, la constancia imprimible en carta y
   «Recibimos tu solicitud». Usan el MISMO sistema; aquí solo va lo que no
   existía. Los textos son los de las vistas de hoy (abrir.php, programa.php,
   constancia.php, solicitud_enviada.php): cambia la forma, no lo que se dice.
   ========================================================================== */

/* ---- Canje. La hoja del formulario junto a la constancia del curso con su
   candado: el mismo par «hoja + constancia que espera» del quiz, para que
   abrir un curso y presentar su quiz se lean como pasos del mismo trámite.
   El código se escribe en mono y en mayúsculas, como sale en el correo de
   la compra: comparar lo escrito contra el correo es más fácil con la misma
   forma (hoy el campo ya lleva autocapitalize="characters"). ------------ */
.entrada-codigo{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase}
.sello-icono svg{display:block;width:26px;height:26px;margin:2px auto}
.canje-pie{padding-top:16px;border-top:1px solid var(--linea)}

/* En dos partes, como el regreso del pago (Fer, 25-oct: «Debajo de los
   avisos»; y para el programa: «la vista previa se queda entre el avance y
   el formulario»): en escritorio la constancia ocupa la columna de la derecha junto
   a las dos partes; en teléfono queda ENTRE ellas, después de tu avance y
   antes del formulario, y no al final de una página larga. */
/* Y «Recibimos tu solicitud» en dos partes, como el regreso del pago: en escritorio la caja de lo que se envió ocupa la
   columna de la derecha junto a la cabeza (el mensaje) y los botones; en el teléfono queda ENTRE ellos, en el orden de
   hoy (el mensaje, lo que enviaste y al final los botones). F3d-1, 25-oct-2026. */
/* auto 1fr: cuando la caja de la derecha es más alta que la columna de texto, lo que
   sobra va DEBAJO de la segunda parte y no entre las dos (con dos filas auto
   se repartía y los botones de «Recibimos» quedaban 130 px abajo del aviso,
   pintado el 25-oct). */
.partida{row-gap:20px;grid-template-rows:auto 1fr}
/* Fija mientras se baja (sticky): en el programa la DC-3 se llena con lo que
   se escribe más abajo, y si se va de la pantalla al llegar al CURP no se ve
   cómo queda (revisión independiente, 25-oct). Le cae también a
   «Recibimos», que comparte la partida: su tablero también la trae fija (desde
   F3d-2, KN01 compara «position» y «top» con él). */
.partida > .pago-ficha{grid-row:1 / span 2;position:sticky;top:24px}

/* ---- Recibimos tu solicitud. Lo que se envió va en una caja y NO en el
   papel de la constancia ni con sello: aquí nadie paga, y la página no debe
   parecer un recibo (decisión del 7-oct que se conserva). ---------------- */
.ficha small{display:block;font-weight:400;color:var(--suave);font-size:var(--t-xs);margin-top:2px}
.ficha .texto-libre{white-space:pre-line;font-weight:400}

/* ---- Programa con constancia DC-3. A la derecha, la constancia DC-3 que se
   va llenando: su CURP en 18 casillas, como en el formato de la STPS, para
   que la persona vea ANTES de generarla cómo quedará y corrija una letra a
   tiempo (cada corrección queda registrada y regenera el PDF). Es una vista
   previa con el sistema del sitio, no el PDF: el PDF sigue el formato y va
   sin marca de TIENDA MX (decisión de Fer, 2-oct). --------------------------- */
.dc3-titulo{font-weight:700;font-size:var(--t-s);color:var(--tinta);margin-top:6px;max-width:30ch;line-height:1.35}
/* El hueco del sello también para el título del formato, como la ceja: el
   sello tapaba «Constancia de competencias…» de 320 a 1024 px (banco, 25-oct). */
.con-sello .dc3-titulo{padding-right:120px;max-width:none}
.dc3-datos{display:grid;gap:12px;margin-top:18px}
.dc3-datos dt{font:600 var(--t-xs)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.dc3-datos dd{margin:2px 0 0;color:var(--tinta);font-weight:600;font-size:var(--t-s);padding-bottom:6px;border-bottom:1px solid var(--borde-campo);min-height:30px}
.dc3-datos dd.vacio{color:var(--suave);font-weight:400}
/* 18 casillas parejas: una por carácter del CURP. Las vacías llevan un punto
   medio y no quedan en blanco, para que se cuenten de un vistazo. */
.curp{display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:2px}
.curp i{font:600 var(--t-s)/1 var(--mono);font-style:normal;text-align:center;padding:6px 0 5px;border:1px solid var(--borde-campo);border-radius:2px;color:var(--tinta);min-width:0}
.curp i.vacio{color:var(--suave)}
.dc3-pie{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap}
/* Aprobado o Pendiente se DICE con texto también en el teléfono: el temario del
   curso esconde su .tipo ahí (la palomita basta en una lección), pero en el
   programa es lo que dice qué curso falta y el número de la izquierda es
   aria-hidden (revisión independiente: un lector de pantalla no lo sabía).
   Gana por ir DESPUÉS de la del teléfono (pesan lo mismo; el generador lo exige). */
.temario li .tipo.estado{display:inline}
/* «No soy yo» es un formulario (borra quién eres en este navegador): botón de
   verdad con forma de enlace, como hoy. */
.liga-boton{background:none;border:0;padding:0;min-height:44px;color:var(--azul);font:600 var(--t-s)/1 var(--cuerpo);text-decoration:underline;cursor:pointer}
/* La corrección va plegada (un <details>, como hoy): se abre sola cuando vuelve con un error (vistas/folio/programa.php). */
.plegable{padding:0}
.plegable summary{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 24px;font-weight:700;color:var(--tinta);cursor:pointer}
.plegable > :not(summary){padding-inline:24px}
.plegable > :last-child{padding-bottom:24px}

/* ---- Constancia imprimible. En pantalla, el papel con su marco de
   guilloche; al imprimir, SOLO el papel, en carta y en una hoja, siempre en
   colores claros aunque la persona use el tema oscuro o el de alto
   contraste (es papel: se imprime en papel blanco). El marco y el sello son
   bordes y no fondos: un navegador no imprime fondos salvo que se le pida
   («gráficos de fondo»), y la constancia debe salir igual con o sin esa
   casilla. El anillo de adentro del sello es una sombra: Chromium la imprime
   igual sin esa casilla (medido el 26-oct); Firefox no se midió. El guilloche sí es fondo: si no sale, el marco queda en doble
   filete y la constancia se sigue leyendo completa. ---------------------- */
/* Sin las declaraciones del tablero que no cambian nada en el sitio (medido el 26-oct, en pixeles y en el PDF;
   gen/hacer_folio_css.py dice cuáles y por qué): las que repiten lo heredado (el tamaño y el color del texto, la negrita
   de un h2), las variaciones de Fraunces (aquí es un corte fijo de 650) y otras dos. */
.hoja-acciones{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;padding-top:32px}
.hoja-ayuda{text-align:center;font-size:var(--t-s);color:var(--suave);margin-top:10px}
.hoja{max-width:816px;margin:24px auto 88px}
.hoja .constancia-cuerpo{padding:44px 52px 36px;text-align:center}
.hoja-cab{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;text-align:left;padding-bottom:18px;border-bottom:1px solid var(--linea)}
.hoja-cab .logo{min-height:0}
.hoja-folio{font:600 var(--t-xs)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.hoja .ceja{margin-top:30px}
.hoja-suave{color:var(--suave);font-size:var(--t-s);margin-top:10px}
.hoja .constancia-nombre{display:inline-block;margin-top:6px;padding-inline:24px}
.hoja-curso{font-family:var(--display);font-weight:650;letter-spacing:-.01em;
  font-size:var(--t-xl);line-height:1.15;color:var(--azul);margin-top:8px}
.hoja-cat{font-weight:600;font-size:var(--t-s);color:var(--texto);margin-top:6px}
.hoja-dato{margin-top:12px}
.hoja-nota{font-size:var(--t-xs);color:var(--suave);margin-top:8px}
.hoja-esencial{text-align:left;margin-top:26px;border:1px solid var(--linea);border-radius:var(--radio);padding:18px 22px}
.hoja-esencial h2{font-size:var(--t-m)}
.hoja-esencial ul{margin:8px 0 0;padding-left:20px;font-size:var(--t-s);color:var(--texto);display:grid;gap:4px}
/* El sello va en el pie, junto al QR, y no en la esquina sobre el nombre: un
   nombre de más de ~21 letras («María Guadalupe Hernández») chocaba con él y
   el sello, opaco, se lo comía (revisión independiente, 25-oct). Abajo, como
   el sello de un documento junto a su firma, no tapa nada en ningún largo. */
.hoja-pie{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;text-align:left;margin-top:28px;padding-top:18px;border-top:1px solid var(--linea);font-size:var(--t-s)}
.hoja-pie > div{flex:1 1 220px}
.hoja-pie .sello{position:relative;width:120px;height:120px}
/* Con «> div»: sin él, «.hoja-pie span» le quitaba al sello (que es un span)
   su display:flex y su texto se subía a tocar el anillo (banco, 25-oct). */
.hoja-pie > div b{display:block}
.hoja-pie > div span{display:block;color:var(--texto)}
.hoja .qr-img{width:96px;height:96px}
@media print{
  /* Carta y 12 mm: sin @page cada navegador pone su tamaño y sus márgenes (el
     motor del banco, ninguno: imprimió a 0 mm), y los 940 px de la hoja y el
     tablero «en carta» dejan de ser lo que sale. Medido en el PDF: el marco a
     45 px del borde con esta regla y a 0 sin ella (25-oct). Con nombre: la
     carta y los 12 mm son de la constancia (page:constancia, abajo) y no de
     toda página de Folio que se imprima (F3d-3, 26-oct). */
  @page constancia{size:letter;margin:12mm}
  /* Solo en la constancia: su <body> lleva «folio-hoja» (vistas/marco_folio.php,
     con el porqué). Escrito para .folio, como en el tablero, cambiaba cómo se
     imprimen TODAS las páginas de Folio (revisión independiente, 26-oct). */
  .folio.folio-hoja{page:constancia;background:#FFFFFF}
  .folio-hoja .cab,.folio-hoja .pie,.folio-hoja .saltar,.hoja-acciones,.hoja-ayuda{display:none}
  /* Sin el margen de la retícula: el de la hoja es el de @page (12 mm). Con él,
     lo impreso quedaba 60 px más angosto que el tablero «en carta» (revisión
     independiente: el marco a 0.78 in del borde y no a 0.47). En el sitio la
     retícula (.ret) va DENTRO de <main>; en el lienzo, <main> es la retícula. */
  .folio-hoja main .ret{padding:0}
  /* Los colores claros se fijan aquí y no se heredan del tema: es papel, se
     imprime en papel blanco, y en alto contraste el papel era negro.
     «.folio .hoja.constancia» pesa lo mismo que la regla del papel claro de los
     temas oscuros (:is(…) .folio .constancia) y va después: con menos peso, en
     el tema oscuro la hoja salía color crema y no blanca (pintado, 25-oct). */
  .folio .hoja.constancia{--papel-constancia:#FFFFFF; --tinta:#15212E; --texto:#3A4A5C; --suave:#5E6E80; --azul:#1F4E79; --jade:#0F7B5F;
    --sello:#0F7B5F; --linea:#D9D2C2; --borde-campo:#7A8DA2; --guilloche:rgba(31,78,121,.16); margin:0}
  /* La hoja llena la carta, como la de hoy: el pie con el QR va abajo y no a
     media página. 940 px = el alto útil de la carta (1056 − 2 × 45 de margen,
     los 12 mm de @page) menos el marco de guilloche (10 + 10) y sus bordes. */
  .hoja .constancia-cuerpo{display:flex;flex-direction:column;min-height:940px}
  .hoja .constancia-nombre{align-self:center}
  .hoja-esencial{margin-bottom:28px}
  .hoja-pie{margin-top:auto}
  /* Compacta en carta: con el «Lo esencial» más largo de hoy (FD-7, 742
     letras) y un nombre de dos renglones, la hoja medía 1,065 px de los 940 que
     caben y salía en DOS hojas (banco del lienzo, peor caso; lo había advertido
     la revisión independiente). El nombre baja de --t-2xl (que además depende
     del ancho de la ventana) a --t-xl, 28 px: en papel siguen siendo 21 pt.
     «Lo esencial» va a --t-xs, 13 px = 9.75 pt, sobre el mínimo de 9 pt para
     papel. */
  .hoja .constancia-cuerpo{padding:32px 40px 24px}
  .hoja .constancia-nombre{font-size:var(--t-xl)}
  .hoja .ceja{margin-top:20px}
  .hoja-suave{margin-top:6px}
  .hoja-dato{margin-top:8px}
  .hoja-esencial{margin-top:18px;padding:14px 18px}
  .hoja-esencial ul{font-size:var(--t-xs);gap:2px}
  .hoja-pie{padding-top:14px}
  /* Del @media print del tablero no entran reglas y declaraciones que aquí no
     hacen nada (medido el 26-oct, en el PDF y en los 6 temas): «.hoja
     .constancia» (las dos clases van en el mismo <article>), la que apaga las
     animaciones (aquí no hay ninguna), y del papel el color de la tinta (ya lo
     heredan) y max-width:none (la carta útil, 726 px, es más angosta que la
     hoja, 816). El margen de abajo de «Lo esencial» SÍ se queda: cuando la
     constancia pasa a dos hojas (un nombre extremo), el pie ya no va abajo y
     ese margen es lo que lo separa (medido el 26-oct; lo defiende KC06). */
  .hoja-pie .sello{width:104px;height:104px}
  .hoja .qr-img{width:88px;height:88px}
}
@media (max-width:900px){
  .partida > .pago-ficha{grid-row:auto;position:static}
}
@media (max-width:640px){
  .hoja .constancia-cuerpo{padding:26px 18px 22px}
  /* La DC-3 ocupa todo el ancho en el teléfono: su sello no se achica a 88
     como los demás. A 88 «Aprobaste», «Expedida» y «Programa» tocaban el
     anillo (banco, 25-oct); a 104 caben, y el título le deja su hueco. */
  .partida .sello{width:104px;height:104px}
  .partida .con-sello .ceja{padding-right:120px}
  /* Un botón largo dentro de una caja («Descargar mi constancia (PDF)») parte
     su texto en vez de ensanchar la caja: a 320 la desbordaba 2 px (banco). */
  .partida .caja .btn{white-space:normal;text-align:center;line-height:1.25;padding-block:10px}
  .plegable summary{padding-inline:18px}
  .plegable > :not(summary){padding-inline:18px}
}

/* ==========================================================================
   Solo en el sitio (22-oct-2026): lo que el lienzo no necesitaba.
   ========================================================================== */
.folio{margin:0}
/* El QR es el SVG que dibuja el servidor (Vista::qrSvg) dentro de un <span class="qr-img">; el lienzo usaba un <img>.
   No lleva regla propia, a propósito (22-oct, mutación C05 viva dos veces): el <span> es hijo de un flex
   (.constancia-pie) y por eso ya se porta como bloque con la medida de .qr-img, y el SVG la llena solo (trae viewBox y
   ningún ancho). Las dos reglas que se le habían puesto no cambiaban un solo píxel, medido. */
/* El menú y los colores. En el lienzo son una pantalla aparte; aquí, un panel bajo la cabecera, cerrado hasta que se
   pide. Sin JavaScript se abre con :target (los botones son ligas a #menu); con él, folio.js pone .abierto. */
.panel{display:none}
.panel:target,.panel.abierto{display:block}
/* Desde 1101 px la cabecera ya trae las ligas y «Comprar»: el panel solo ofrece los colores. */
@media (min-width:1101px){
  .panel-nav,.panel-comprar{display:none}
}
/* El botón del menú cambia a la X cuando el panel está abierto (el lienzo lo dibujaba así). */
.icono-btn .si-abierto,.icono-btn[aria-expanded="true"] .si-cerrado{display:none}
.icono-btn[aria-expanded="true"] .si-abierto{display:block}
/* Los colores se guardan en el navegador: sin JavaScript no hay quien los guarde y no se ofrecen. tema.js pone
   html.js antes de pintar. */
html:not(.js) .con-js{display:none}
/* El círculo de radio es invisible (la muestra de color hace de casilla): el foco del teclado se marca en el
   recuadro entero, o con el teclado no se vería cuál está elegido. Con el selector de hermano y no con :has() (F4,
   27-oct: el porqué, arriba, donde se arma .color-caja). La etiqueta sigue posicionada: la casilla va contra ella. */
.color{position:relative}
.color input:focus-visible + .color-caja{outline:3px solid var(--azul-2);outline-offset:2px}
/* La franja de la licencia de TIENDA MX (reglas del 30-sep, Fer las pidió en Folio el 22-oct): la misma información
   que hoy, con la banda clara del sistema. */
.licencia{background:var(--banda);border-bottom:1px solid var(--banda-borde);color:var(--tinta)}
.licencia .ret{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;min-height:48px;padding-block:10px;font-size:var(--t-s)}

/* ---- Portada del curso y lecciones (F3b-1, 23-oct-2026) ---- */
/* El curso con código, para quien no puede entrar: el candado con el texto de hoy, como caja del sistema. */
.candado{margin-top:28px}
.candado .btn{margin-top:16px}
/* El icono de «esta lección trae video» en el temario, delante de «Lección» (el mismo de hoy). */
.ico-video{display:inline-block;vertical-align:-4px;margin-right:6px}
/* Todo el curso va en una página: con JavaScript se ve un paso a la vez (folio.js le pone .activo). Sin él se ven todos
   seguidos. tema.js pone html.js antes de pintar: así no se ven todos un instante y luego se van (eso movería la página). */
/* Cada paso es una columna del lienzo (.lec-texto); con JavaScript se muestra uno y queda en el primer renglón de la
   retícula, junto al temario. */
.js .lec-texto:not(.activo){display:none}
/* El video: la portada (miniatura de YouTube y nuestro botón) llena el recuadro del lienzo, y el reproductor la
   reemplaza en el mismo lugar al pulsar. */
.portada-video{position:absolute;inset:0;display:block}
.portada-video img{width:100%;height:100%;object-fit:cover}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Las dos leyendas que Fer aprobó el 13-oct: «Ver el texto de la lección» cerrado y «Ocultar el texto» abierto. */
.lec-detalles .ocultar,.lec-detalles[open] .ver{display:none}
.lec-detalles[open] .ocultar{display:inline}
/* El contenido de la lección es el HTML del curso aprobado, con sus clases de siempre; aquí se le da el aspecto del
   sistema. Sin caja propia, cada párrafo ya trae el tamaño de .lec-texto. */
.lec-texto .cuerpo{display:grid;gap:20px}
.cuerpo h3{font-size:var(--t-l);line-height:1.3;color:var(--tinta);margin-top:8px}
.cuerpo h4{font-size:var(--t-m);color:var(--tinta)}
.cuerpo .lista{padding-left:24px;display:grid;gap:8px}
.cuerpo b,.cuerpo strong{color:var(--tinta)}
/* Los <code> de los cursos, con la letra fija del sistema y su mismo tamaño (uno menor saldría de los siete de la escala). */
.cuerpo code{font-family:var(--mono)}
/* «tarjeta» es también la tarjeta de curso del sistema: dentro de una lección es solo una caja (sin la constancia, sin
   ser liga y sin subir al pasar el ratón). Sus partes (un título y su párrafo, un párrafo y su lista) a 8 px: el sistema
   quita los márgenes y quedaban pegadas (revisión independiente, 23-oct: 19 tarjetas con título y párrafo, 10 con lista). */
.cuerpo .tarjeta{display:grid;gap:8px;position:static;background:var(--papel);outline:0;border-radius:var(--radio);padding:18px 20px;transition:none}
.cuerpo .tarjeta:hover{transform:none;box-shadow:none;border-color:var(--linea)}
.cuerpo .rejilla{display:grid;gap:14px}
.cuerpo .rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* La nota del curso (lo que hay que llevarse) y el aviso (el cuidado): con el filete de la nota del lienzo, jade y
   acento; sin cajas de color, que en los temas oscuros se leían como botones. */
.cuerpo .nota-primario,.cuerpo .aviso{border-left:3px solid var(--jade);padding:4px 0 4px 18px}
.cuerpo .aviso{border-left-color:var(--acento)}
/* El ejercicio. El correo es el del curso: su cabecera (De, Para, Asunto) con las etiquetas del lienzo. */
.correo{overflow-wrap:anywhere}
/* La cabecera en bloque y no en rejilla (23-oct, lo vi en la foto de HB-E4 a 320 px): en HB y FD es UNA línea de texto
   suelto («🏪 El minisúper de don Héctor…»), y folio.js la parte en una <span> por palabra; en una rejilla, cada palabra
   era un renglón. El aire entre De, Para y Asunto (SI) va en el renglón de abajo. */
.correo .cab{padding:18px 22px;border-bottom:1px solid var(--linea);font-size:var(--t-s);color:var(--tinta)}
.correo .cab > div + div{margin-top:6px}
.correo .et{display:inline-block;min-width:80px;margin-right:12px;font:500 var(--t-xs)/1.9 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--suave)}
.correo .cuerpo-correo{padding:22px;font-size:var(--t-m);line-height:1.7}
.correo .cuerpo-correo p + p{margin-top:12px}
.correo .adjunto{display:inline-block;margin-top:6px;padding:6px 10px;border:1px solid var(--linea);border-radius:8px;font-size:var(--t-s)}
/* La palabra activa del teclado, solo con el correo enfocado, y siempre a la vista con su contorno (J16 del banco del
   ejercicio; el porqué, en cursos.css). */
.correo:focus .palabra.activa{outline:2px solid var(--azul-2)}
.correo .palabra{scroll-margin:24px 0}
/* Una señal no se distingue del resto del correo hasta que se encuentra (Fer, 30-sep). Encontrada: el subrayado grueso
   de acento del lienzo y no un bloque relleno, que tapaba los «< >» del remitente (v1 del lienzo, pintado). */
.senal.hallada{color:var(--tinta);font-weight:600;box-shadow:inset 0 -3px 0 var(--acento);cursor:default}
/* Los sellos y la frase del contador en un renglón; si no caben, la frase baja. 23-oct (N02b del banco): a 320 px
   «0 / 5 incumplimientos encontrados» (HB-E4) no cabía junto a los cinco sellos y la página se desbordaba 35 px. */
.sellos{flex-wrap:wrap}
.sellos-marcas{display:flex;gap:10px}
.hallazgos{display:grid;gap:8px}
.hallazgo.explica{margin:0}
/* El aviso guarda su lugar aunque esté vacío: el aviso y una copia invisible de su texto más largo ocupan la misma celda
   (el porqué, en cursos.css; lo defienden J11, J17 y J19). */
.aviso-caja{display:grid}
.aviso-caja > *{grid-area:1 / 1}
.aviso-medida{visibility:hidden}
/* El aviso y su copia, con la MISMA letra (si no, la copia reservaría otro alto): chica y gris. «.lec-texto .aviso-caja >»
   y no solo la clase: «.lec-texto p» (el tamaño de los párrafos de la lección) le ganaba al aviso, que es un <p>, y
   no a su copia, que es un <span> (lo midió N13 el 23-oct: 17 px el aviso y 15 la copia). */
.lec-texto .aviso-caja > p,.lec-texto .aviso-caja > span{font-size:var(--t-s);line-height:1.5;color:var(--suave)}
.cierre{display:none}
.cierre.visto{display:flex}
@media (max-width:640px){
  /* En el teléfono «Tengo un código» vive en la barra de abajo, como el botón del curso. */
  .candado .btn{display:none}
  /* La barra de las lecciones va dentro de cada paso (una por paso) y por eso dentro de la retícula: sale de su margen
     para ir de orilla a orilla, como la del lienzo, que está fuera. */
  .lec .barra-fija{margin-inline:calc(-1 * var(--margen))}
  /* Y sin el espacio que .lec-texto pone entre sus partes: la del lienzo no lo lleva (N01). */
  .lec-texto > .barra-fija{margin-top:0}
}

/* ---- El quiz y «Aprobaste» (F3b-2, 23-oct-2026) ---- */
/* Lo que folio.js oculta en el examen (cada pantalla, el mensaje de error vacío, «Siguiente» antes de contestar) se
   oculta de verdad: el mensaje es flex y el botón inline-flex, y cualquier display le gana al «hidden» del navegador
   (el mensaje vacío se veía como una caja roja sin texto). Pesa lo mismo que .examen .aviso y le gana por ir DESPUÉS:
   el generador lo exige (revisión independiente, 23-oct; un !important no lo movía ninguna medida, y lo que ninguna
   aserción defiende sobra). */
.examen [hidden]{display:none}

/* ---- Precios y verificar (F3c-1, 24-oct-2026) ---- */
/* La casilla de cada categoría es de verdad pero no se ve: la caja de 24 px del lienzo (.caja-chk) la dibuja, y el
   renglón entero es la etiqueta (el blanco del dedo). Queda en el orden del teclado; su foco se marca en la caja que la
   dibuja, o con el teclado no se vería en cuál vas. Con el selector de hermano y no con :has() en el renglón (el porqué,
   arriba: un navegador sin :has() no enseñaría el foco). */
.chk{position:relative}
.chk input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.chk input:focus-visible + .caja-chk{outline:3px solid var(--azul-2);outline-offset:2px}
/* El número de personas, con la medida del <output> del lienzo pero como campo: sin marco propio (el marco es el del
   contador) ni las flechitas del navegador (los «−» y «+» del lienzo hacen eso, más grandes). Medido en Chromium (24-oct):
   las flechitas las quita la regla de ::-webkit-…-spin-button (sin ella salen al pasar el ratón; K04 lo defiende);
   appearance:textfield no cambia nada AHÍ: es lo que las quita en Firefox, que este banco no puede correr (solo hay
   Chromium). Es la única declaración de F3c-1 que ninguna aserción defiende, y se queda a sabiendas. */
.contador input{border:0;background:transparent;padding:0;width:72px;height:52px;-moz-appearance:textfield;appearance:textfield}
.contador input::-webkit-inner-spin-button,.contador input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* Lo que solo sirve sin JavaScript (la regla de precios en una frase, en vez de una cuenta que no se movería): con él se
   va. tema.js pone html.js antes de pintar. */
.js .sin-js{display:none}

/* ---- Comprar o pedir cotización (F3c-2, 24-oct-2026) ---- */
/* El campo trampa contra programas y el botón que usa Enter («Solo enviar solicitud», para que un Enter no abra un cobro
   en Stripe): fuera de la pantalla y NO con display:none, como hoy (cursos.css): los programas que llenan formularios
   suelen saltarse lo que está oculto así, y algunos navegadores no usan un botón escondido para el Enter. */
.no-llenar{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* El correo de la factura lo esconde folio.js mientras «Quiero factura» no está marcada: .sub-bloque es grid, y
   cualquier display le gana al «hidden» del navegador (el mismo porqué que en el examen, arriba). */
.compra-forma [hidden]{display:none}
/* ---- El quiz en un teléfono (N24, 24-oct-2026) ---- */
/* La caja de una dirección del quiz (folio.js, conCortes: «facturacion.electronica@proveedor.com», «Aeropuerto_WiFi_Gratis»).
   inline-block por una razón: así la dirección pasa ENTERA al renglón siguiente cuando ahí cabe, y solo se parte en sus
   marcas (<wbr> antes de «.», «/», «@» o «_») cuando ni sola cabe; en línea normal se partiría en la primera marca aunque
   la dirección cupiera completa abajo (medido el 24-oct). Fer, 24-oct: «En la puntuación». Sin max-width a propósito: el
   barrido demostró que no hacía nada (una caja en línea nunca pasa del ancho de su renglón; mutación M5 viva, quitada). */
.dir{display:inline-block}
/* ---- El regreso del pago (F3c-3, 25-oct-2026) ---- */
/* El código se selecciona ENTERO con un toque, como hoy (cursos.css): se muestra una sola vez y tiene que poder copiarse
   sin errores de dedo, también sin JavaScript (sin él no hay botón de copiar). */
.codigo-grande{user-select:all}
/* «Copiar el código» llega escondido (hidden) y lo enciende folio.js cuando se puede copiar. .btn es inline-flex, y
   cualquier display le gana al «hidden» del navegador: sin esta regla, sin JavaScript salía un botón que no hace nada
   (lo cazó el banco, RN05, 25-oct; el mismo porqué que en el examen y en comprar, arriba). */
.pago-ficha [hidden]{display:none}
/* El correo de quien compró se parte primero en su puntuación (Folio::cortes, como el quiz de N24) y, SOLO si un pedazo
   entre dos signos no cabe ni solo en su renglón, en cualquier letra. Por qué este último recurso aquí y no en el quiz:
   las preguntas del quiz son de un banco medido entero (N24: las 3 100 combinaciones caben), y un correo lo escribe cada
   quien: con «facturacion.electronica.337a2a@…» el pedazo «electronica.337a2a» (antes de un dígito no se corta) medía
   más que la columna de la ficha a 320 px y se salía del papel (lo cazó el banco, RN06, 25-oct). «anywhere» solo corta
   donde no hay otro lugar en el renglón: las marcas de puntuación se usan antes. */
.pago-grid .dir{overflow-wrap:anywhere}

/* ---- «Recibimos tu solicitud» (F3d-1, 25-oct-2026) ---- */
/* Lo que la persona escribió (la empresa, el comentario) se parte en cualquier letra cuando un pedazo no cabe ni solo en
   su renglón, como hoy (cursos.css, .resumen dd). Un comentario con una dirección sin espacios medía 205 px en una columna
   de 141 a 320 px y sacaba la página de la pantalla (lo cazó el banco, KN04, 25-oct; el tablero no lo veía: su comentario
   es corto). Solo en la partida de «Recibimos»: las otras fichas (verificar, el regreso del pago) no llevan lo que escribe
   cada quien, salvo el correo, que ya va en su caja. «anywhere» solo corta donde no hay otro lugar en el renglón. */
.partida .ficha dd{overflow-wrap:anywhere}

/* ---- El programa con constancia DC-3 (F3d-2, 26-oct-2026) ---- */
/* Lo que la persona escribe y la DC-3 de la derecha repite (los apellidos, el nombre, el puesto) se parte en cualquier
   letra cuando un pedazo no cabe ni solo en su renglón. Con un apellido de 60 letras sin espacio (el tope del campo) el
   renglón medía 1 801 px en una columna de 293 a 320 px: la DC-3 entera se ensanchaba, sacaba de su caja las 18 casillas
   del CURP y la página se salía de la pantalla (lo cazó el banco, KP05, 26-oct; el tablero no lo veía: sus datos son
   cortos). La misma regla que «Recibimos» (arriba), por la misma razón. «anywhere» solo corta donde no hay otro lugar. */
.dc3-datos dd{overflow-wrap:anywhere}

/* ---- La constancia imprimible (F3d-3, 26-oct-2026) ---- */
/* Al imprimir, SOLO el papel (el lienzo), y eso incluye la franja de la licencia de TIENDA MX: el lienzo no la dibuja, y
   el marco la pone bajo la cabecera a quien entró con su licencia. Sin esta regla se imprimía arriba de la constancia (49 px)
   y la mandaba a DOS hojas (medido el 26-oct; lo defiende KC07). Hoy también sale impresa: cursos.css no la esconde. Para
   .folio-hoja, como lo de arriba: las demás páginas de Folio se imprimen como hasta hoy. */
@media print{
  .folio-hoja .licencia{display:none}
}
/* El panel del menú y los colores, abierto (con el botón, o con #menu sin JavaScript), también salía impreso arriba de la
   constancia y la mandaba a DOS hojas (medido el 26-oct; lo vio la revisión independiente; lo defiende KC13). */
@media print{
  .folio-hoja .panel{display:none}
}
/* Un nombre de una sola palabra larga (el quiz solo pide un espacio) no tenía dónde partirse: con 117 «W» se salía 2 550 px
   del papel y la página entera se recorría de lado de 3 300 a 4 800 px en todos los anchos (medido el 26-oct; lo defiende
   KC06). La misma regla que la DC-3 (.dc3-datos dd, arriba), por la misma razón: «anywhere» solo corta donde no hay otro
   lugar, y un nombre normal no cambia. */
.hoja .constancia-nombre{overflow-wrap:anywhere}

/* ---- Las páginas de texto (F3d-4, 27-oct-2026) ---- */
/* Sin tablero en el lienzo: a las páginas de texto se les aplica el sistema directo (decisión de Fer, 22-oct). Cada medida
   de aquí es la de una pieza que Folio ya tiene, y el navegador del banco la mide CONTRA esa pieza en la misma corrida
   (KT02 contra una lección, KT03 contra Verificar), no contra un número escrito a mano.
   (27-oct, el barrido) La primera versión traía medidas mías: 16 px entre párrafos, 6 entre renglones de lista, 40 antes
   de cada subtítulo y, en la página de error, 18, 32, 56ch y 20ch. Nueve de esas reglas salieron vivas en el barrido de
   mutaciones (ninguna aserción las veía) y todas movían pixeles; el comentario de entonces decía «nada inventado», y no
   era cierto. Se igualaron a sus piezas y se agregaron las aserciones que las comparan.

   EL AVISO DE PRIVACIDAD Y LOS TÉRMINOS son la MISMA vista de hoy (<article class="angosta legal-doc">, Folio::legal): el
   texto del abogado vive en un solo archivo, y su marcado no se toca (CT03 lo exige byte por byte), así que las piezas de
   la lección se le ponen aquí, por su etiqueta. Se lee como una lección porque es lo mismo, texto largo de leer de
   corrido: el renglón de 66 caracteres y el interlineado de 1.65 de .lec-texto, centrados (no hay temario al lado). El
   66ch se mide con la letra del artículo, la de cuerpo (t-m), la misma con la que .lec-texto mide sus párrafos. */
.legal-doc{max-width:calc(66ch + 2 * var(--margen));margin-inline:auto;padding:40px var(--margen) 96px;line-height:1.65}
/* Arriba y abajo, lo de una lección (.lec): 40 y 96, y en el teléfono 24 y 40, como .lec ahí (revisión independiente,
   27-oct: la primera versión dejaba en el teléfono el relleno de escritorio; KT02 no medía el aire de arriba). */
@media (max-width:640px){.legal-doc{padding-block:24px 40px}}
/* La ceja del artículo es un <span> (en la lección, un <p>): suelta en el renglón, el título quedaba 17 px abajo y no a
   los 12 de la lección (medido el 27-oct). En bloque, a 12. */
.legal-doc .ceja{display:block}
/* El título de una lección (.lec-texto h1 con .display). Sin peso: Fraunces se carga solo en 650 (la @font-face de
   arriba), y quitarlo no movía un pixel (medido el 27-oct por reglas_muertas_f3d4). */
.legal-doc h1{font-family:var(--display);color:var(--tinta);letter-spacing:-.02em;font-size:var(--t-2xl);line-height:1.05;margin-top:12px}
/* «Última actualización»: la nota chica y gris del sistema (t-s, --suave), a mt-1 del título. */
.legal-doc .fecha{font-size:var(--t-s);color:var(--suave);margin-top:12px}
/* Los subtítulos son los de dentro de una lección (.cuerpo h3): la letra de cuerpo en negrita, de 20 (t-l). En el sistema,
   Fraunces va de 28 px para arriba (lo exigen las comprobaciones de maquetas; la mutación C8 del barrido lo comprueba).
   Arriba, lo que deja la lección antes de un subtítulo: los 20 entre piezas más sus 8 propios. */
.legal-doc h2{color:var(--tinta);font-size:var(--t-l);line-height:1.3;margin-top:28px}
/* Entre párrafos, los 20 de la lección (.lec-texto > * + *); la lista, la de la lección (.cuerpo .lista), con su sangría
   de 24 y 8 entre renglones (sin esto, la sangría de 40 del navegador); las negritas en tinta, como .cuerpo strong. */
.legal-doc p,.legal-doc ul{margin-top:20px}
.legal-doc ul{padding-left:24px;display:grid;gap:8px}
.legal-doc strong{color:var(--tinta)}
/* LA PÁGINA DE ERROR Y «ESTE ENLACE YA NO SIRVE» no traen reglas propias: usan la maqueta de Verificar (.ver-grid y
   .ver-form), la página de Folio de una sola idea (ceja, título, texto y acción en la columna de 5 de 12), con mt-2,
   texto-medida y mt-3. Si Verificar cambia, ellas cambian con ella: eso se quiere. */

/* ==========================================================================
   Ajustes de Fer al ver la vista previa (23-oct-2026, F3b-1b). No son del lienzo: se pidieron sobre lo instalado.
   ========================================================================== */
/* La constancia que espera en la portada del curso, 20 % más chica ENTERA (letra, QR, sello y márgenes): Fer la ve
   como una imagen y la pidió «un poco más pequeña (un 20%)». zoom escala la caja y lo de dentro juntos, así se
   conserva el dibujo tal cual; solo con el ancho, el texto se reacomodaba y la constancia salía MÁS alta (medido: 322 →
   343 px a 1440). El zoom no cambia su ancho de bloque, por eso también el 80 %. Va pegada a la derecha, a ras de
   «Lo que vas a aprender», y la nota de abajo con su mismo ancho para que se lean como una pieza. Su letra más chica
   queda en 10.4 px (13 × 0.8): es un dibujo (aria-hidden) y la nota de abajo lo dice con letra de lectura. */
.curso-cab-folio .constancia{zoom:.8;width:80%;margin-left:auto}
.curso-cab-folio .muestra-nota{width:80%;margin-left:auto}
/* La columna de las lecciones (video, texto y ejercicio), 20 % más ancha: Fer, «amplíalo un 20% aproximadamente (en lo
   ancho)». El lienzo la dibuja de 6 columnas y deja libres las 3 de la derecha para la nota al margen, que el sitio no
   lleva; el 120 % de su espacio cae en esas columnas libres y es exacto a cualquier ancho (7 columnas en vez de 6
   darían +17 %). Solo donde hay temario al lado: a 900 px o menos la lección ya ocupa todo el ancho. */
@media (min-width:901px){
  .lec-texto{width:120%}
}

/* ==========================================================================
   Ajustes de Fer al regreso del pago (25-oct-2026, F3c-3). No son del lienzo: los decidió al ver lo medido.
   ========================================================================== */
/* El código pasa DEBAJO del sello. En el tablero el sello «Pagado», que es opaco (lleva el fondo del papel), tapaba de
   2 a 4 letras del código a 390, 1024, 1280 y 1440 px (medido el 25-oct, igual en el lienzo que en el sitio), y es la
   única vez que la página enseña el código. Fer: «Bajar el código», lo justo y nada más. Un flotante invisible y SIN
   ancho, tan alto como lo que el sello baja dentro del papel, y el código lo libra (clear): si la ceja ya lo dejara
   abajo, no se movería nada. Sin ancho a propósito: con 1 px, los renglones de al lado perdían ese pixel y a 320 px el
   «CUR-····» de «esperando» se partía en dos (lo cazó la comparación al píxel, 25-oct). La altura sale de las medidas del sello: top -26 px y 104 px de alto (88 a 640 px o
   menos), menos el relleno de arriba del papel (28 px; 22 a 640 o menos). Si alguien cambia el sello, cambia esto. */
.pago-ficha .sello-pos + .ceja::before{content:"";float:right;width:0;height:calc(104px - 26px - 28px)}
.pago-ficha [data-codigo]{clear:right}
/* En «pagado» la ficha del código va ENTRE la cabeza (título y avisos) y el resto (vistas/folio/pago.php, con el
   porqué): en el teléfono, donde todo va en una columna, el código sale justo después de «Guárdalo ahora» y no al
   final, debajo de «Ir al catálogo», como lo dibuja el tablero. Fer, 25-oct: «Debajo de los avisos». En escritorio
   no cambia nada: la ficha ocupa los dos renglones a la derecha, y entre la cabeza y el resto quedan los 20 px que
   había entre sus piezas cuando eran una sola columna (.pago-texto, gap 20). */
.pago-partida{row-gap:20px}
.pago-partida .pago-ficha{grid-row:1 / span 2}
@media (max-width:900px){
  .pago-partida .pago-ficha{grid-row:auto}
}
@media (max-width:640px){
  .pago-ficha .sello-pos + .ceja::before{height:calc(88px - 26px - 22px)}
  /* El código en UN renglón desde 414 px, como la página de hoy (decisión del 16-oct). Con la letra del tablero (28 px)
     medía 334 px y en la ficha de 414 caben 321: se partía en dos. Fer, 25-oct: «Un renglón desde 414». 26 px es la
     letra más grande con la que cabe (310 px); en escritorio no cambia. Lo cazó la regresión (N10 de banco_pago.py). */
  .pago-ficha .codigo-grande{font-size:26px}
}
/* El aviso arriba de las lecciones (29-oct-2026): separado de la cabecera; abajo lo separa el relleno de .lec. */
.lec-aviso{margin-top:24px}

/* ==========================================================================
   Ajustes de Fer a la portada (31-oct-2026). No son del lienzo: los pidió al ver la portada instalada.
   ========================================================================== */
/* «Dr. Fernando Chávez», entre 10 y 20 % más grande: 23 px (+15 %, el punto medio). Ya no lleva al lado «· Tecnología,
   gestión y finanzas» (vistas/folio/portada.php): el renglón es solo el nombre. Queda fuera de los 7 tamaños del sistema
   a propósito, como excepción declarada (la segunda, después del título de la tarjeta en el teléfono; el banco la
   acepta solo en este renglón): 20 px era t-l y el siguiente, t-xl, son 28 px (+40 %, fuera de lo que pidió, y del
   mismo tamaño que el título «Quién está detrás», que dejaría de mandar). La proporción título/nombre pasa de 1.4 a 1.22: el título sigue
   arriba y en Fraunces; el nombre gana peso sin competir con él. Solo se ve de 641 px para arriba (.solo-esc). */
.quien-nombre{font-size:1.4375rem}
/* «¿Ya usas TIENDA MX? Todos los cursos vienen incluidos.», entre 40 y 60 % más chico: pasa de t-2xl (que crece con la
   pantalla: 52 px desde 1280, 48 a 1140, 45 a 1024, 39 a 768, 32 en teléfono) a t-xl, 28 px fijos. Medido: −46 % a 1280
   y 1440, −42 % a 1140 (la pantalla con que Fer lo vio), −38 % a 1024, −29 % a 768 y −12.5 % en teléfono. No baja de
   28 px en ningún ancho porque 28 es el mínimo de Fraunces en el sistema (--t-xl, arriba: más chico, el opsz 144 se
   empasta): por eso en teléfono baja solo 12.5 %. Antes medía lo mismo que los títulos de las secciones (t-2xl); ahora
   queda por debajo de ellos en todos los anchos (32 px en teléfono, 48 a 1140), como un cierre. Sin el tope de 22ch
   (max-width:none): con esa medida, a 28 px el título se partía en dos renglones de 385 px encima de un párrafo de 610,
   y se veía angosto; sin tope va en UN renglón de 625 px, del ancho del párrafo, de 768 px para arriba (en teléfono,
   dos renglones; a 320, tres). La banda baja de 281 a 209 px de alto a 1140. Es la banda de la portada y la de
   /precios: es la misma pieza (vistas/marco_folio.php) y cambian las dos. */
.banda h2{font-size:var(--t-xl);max-width:none}

/* ==========================================================================
   La cabecera a menos de 300 px (6-nov-2026, decisión de Fer). No es del lienzo.
   ========================================================================== */
/* A 280 px (un plegable cerrado) la cabecera se salía 10 px por la derecha en TODAS las páginas: el logo «TIENDA MX |
   CURSOS» mide 166 px (de 16 a 182), los dos botones 96 y entre ellos van 12: llegaban a 290 (medido el 6-nov; de 290
   px para arriba ya cabía). Fer escogió quitar la etiqueta «Cursos», con su rayita y su separación, por debajo de 300
   px: el logo queda en «TIENDA MX» (92 px) y de 300 para arriba la cabecera es IDÉNTICA a la de antes.
   Se quita de la VISTA, no del lector: con display:none la liga del logo dejaba de anunciarse «TIENDA MX Cursos» y
   pasaba a «TIENDA MX» (medido en el árbol de accesibilidad de Chromium); así se anuncia igual en todos los anchos.
   position:absolute la saca del renglón (se van su ancho y la separación, que el flex no le da a un hijo absoluto) y
   clip la deja sin pintar y sin recibir el clic. Solo en la cabecera (.cab): la constancia imprimible lleva el mismo
   logo y ahí «Cursos» se queda. Corte en 299 px porque Fer dijo «debajo de 300» y los anchos de pantalla son enteros:
   a 299 ya no se ve y a 300 sí (con un ancho fraccionario entre los dos no se oculta, y ya cabe: cabe desde 290). */
@media (max-width:299px){
  .cab .logo i{position:absolute;clip:rect(0 0 0 0)}
}

/* ==========================================================================
   El retrato de «Crecer con números» y la retícula debajo de 300 px (7-nov-2026). No es del lienzo.
   ========================================================================== */
/* Crecer con números lleva su propia persona (pedido de Fer, 6-nov): un dibujo aparte, retrato_cn.svg, que ya viene
   recortado (su viewBox es el cuadro de la cara, del mismo tamaño que en los otros tres retratos). Llena el círculo
   entero: sin el 327 % ni el corrimiento con que los otros tres sacan a su persona de equipo.svg. */
.retrato-cn img{left:0;top:0;width:100%}
/* Las rejillas de 12 columnas llevan 24 px entre columna y columna: 11 huecos, 264 px. Debajo de 296 px de pantalla el
   contenido mide menos que eso (248 a 280 px) y, como en el teléfono cada parte ocupa las 12 columnas, mide 264 aunque
   las columnas queden en cero: se corría 16 px a la derecha, con 16 de margen a la izquierda y ninguno a la derecha
   (medido el 7-nov en la portada, /precios, verificar, la portada del curso, el quiz, Solicitar y la categoría). En la
   lección se veía además como desborde: la barra de abajo sale 16 px por lado para ir de orilla a orilla, y llegaba a
   296. Sin huecos entre columnas cada parte mide lo que mide el contenido y quedan 16 px por lado. Debajo de 300, como la
   cabecera: de 300 para arriba las 11 columnas ya caben y las páginas son, pixel por pixel, las de antes. */
@media (max-width:299px){
  .cat-hero,.compra-grid,.curso-cab,.curso-cuerpo,.dentro,.equipo,.examen-grid,.heroe .ret,.lec,.pago-grid,.precio-grid,
  .resultado,.ver-grid{column-gap:0}
}
/* La lista de cursos de una categoría, en el teléfono, en UNA columna que no crece más que la pantalla: con 1fr (que es
   minmax(auto,1fr)) la columna no bajaba del ancho mínimo de las tarjetas, y en Habilidades blandas eso es 269 px: a 280
   la página se salía 5 px, y a 300 la tarjeta tapaba 1 px del margen. minmax(0,1fr) la deja del ancho del contenido; el
   texto de la tarjeta se parte como en cualquier otra. */
@media (max-width:640px){
  .tarjetas.cat-lista{grid-template-columns:minmax(0,1fr)}
}