/* ============================================================================
   Cursos TIENDA MX · hoja única del sitio (fase 2, 28-sep-2026)

   POR QUÉ ASÍ
   . Identidad visual de TIENDA MX (decisión de Fer al revisar las maquetas):
     tipografías Archivo y Figtree, los mismos tokens de color que portada.css
     y los valores de las maquetas aprobadas. No se toca portada.css: el sitio
     de cursos tiene su propia hoja y no comparte nada con el SaaS.
   . Sin estilos en línea en ningún lado: la política de contenido del sitio es
     style-src 'self'. Todo lo visual vive aquí.
   . Cinco temas, los mismos que tenía el curso original (claro, oscuro,
     sepia, negro y alto contraste): el de alto contraste es de accesibilidad y
     no se quiso perder en el cambio de diseño. «Automático» sigue al sistema.
   . Los cursos traen su propio HTML (lecciones y ejercicio) con las clases del
     motor viejo: lista, tarjeta, nota-primario, aviso, rejilla c2, correo,
     cab, et, cuerpo-correo, senal, adjunto. Aquí se les da el aspecto nuevo sin
     tocar los archivos de idioma aprobados.
   ============================================================================ */

@font-face{font-family:"Archivo";font-weight:100 900;font-display:swap;src:url("fonts/archivo-latin-wght.woff2") format("woff2")}
@font-face{font-family:"Figtree";font-weight:300 900;font-display:swap;src:url("fonts/figtree-latin-wght.woff2") format("woff2")}

/* ---------- tokens: claro (maquetas aprobadas) ---------- */
:root{
  --azul:#1F4E79; --azul-2:#2B6CA8; --tinta:#15212E; --texto:#3A4A5C; --suave:#5E6E80;
  --fondo:#F4F7FB; --papel:#FFFFFF; --linea:#E1E8F0; --banda:#EAF1F8; --borde-campo:#C5D1DE; --banda-borde:#C9D9EA;
  --jade:#0F7B5F; --jade-2:#0B6650; --sobre-jade:#FFFFFF; --sobre-azul:#FFFFFF;
  --ok:#1E7A43; --ok-fondo:#E7F6EC; --ok-linea:#B7E0C4; --ok-tinta:#154F2E;
  --err:#B3261E; --err-fondo:#FDECEC; --err-linea:#F5C2C2;
  --aviso:#9A4A07; --aviso-fondo:#FDF1E4; --aviso-linea:#F1CFA8;
  --pie:#15212E; --pie-texto:#DCE5EE; --pie-suave:#B9C6D3; --pie-linea:#2A3A4C;
  --video:#0F1823;
  --sombra:0 10px 30px rgba(21,33,46,.08);
  --display:"Archivo",system-ui,"Segoe UI",Arial,sans-serif;
  --cuerpo:"Figtree",system-ui,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code","SF Mono",Consolas,Menlo,monospace;
  --radio:14px;
  color-scheme:light;
}
/* oscuro: los valores oscuros de portada.css */
[data-theme="dark"]{
  --azul:#7FB2E5; --azul-2:#9CC6F0; --tinta:#EEF3F8; --texto:#C3CFDC; --suave:#93A3B5;
  --fondo:#0F1823; --papel:#16212E; --linea:#26344A; --banda:#132131; --borde-campo:#34465E; --banda-borde:#2A3D57;
  --jade:#35B38F; --jade-2:#4CC7A2; --sobre-jade:#06231A; --sobre-azul:#0B1B2B;
  --ok:#7FD6A0; --ok-fondo:#12291D; --ok-linea:#2A5A3C; --ok-tinta:#BFEBD0;
  --err:#F4A29C; --err-fondo:#2E1614; --err-linea:#6A2E2A;
  --aviso:#F2B880; --aviso-fondo:#2E2012; --aviso-linea:#6A4A22;
  --pie:#0A1119; --pie-linea:#1E2B3B; --video:#070C12;
  --sombra:0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}
@media (prefers-color-scheme: dark){[data-theme="auto"]{
  --azul:#7FB2E5; --azul-2:#9CC6F0; --tinta:#EEF3F8; --texto:#C3CFDC; --suave:#93A3B5;
  --fondo:#0F1823; --papel:#16212E; --linea:#26344A; --banda:#132131; --borde-campo:#34465E; --banda-borde:#2A3D57;
  --jade:#35B38F; --jade-2:#4CC7A2; --sobre-jade:#06231A; --sobre-azul:#0B1B2B;
  --ok:#7FD6A0; --ok-fondo:#12291D; --ok-linea:#2A5A3C; --ok-tinta:#BFEBD0;
  --err:#F4A29C; --err-fondo:#2E1614; --err-linea:#6A2E2A;
  --aviso:#F2B880; --aviso-fondo:#2E2012; --aviso-linea:#6A4A22;
  --pie:#0A1119; --pie-linea:#1E2B3B; --video:#070C12;
  --sombra:0 10px 30px rgba(0,0,0,.35); color-scheme:dark;
}}
[data-theme="sepia"]{
  --azul:#7A4E24; --azul-2:#8E5E30; --tinta:#3E2F1C; --texto:#5A4830; --suave:#6E5C42;
  --fondo:#F1E7D0; --papel:#F9F1DF; --linea:#DCCBA8; --banda:#EFE0C4; --borde-campo:#CDB88F; --banda-borde:#D9C39A;
  --jade:#4C6B3C; --jade-2:#3E5A30; --sobre-jade:#FFFFFF; --sobre-azul:#FFFFFF;
  --ok:#4C6B3C; --ok-fondo:#E2EBD5; --ok-linea:#BCCCA5; --ok-tinta:#34492A;
  --err:#A63A1D; --err-fondo:#F3D9CC; --err-linea:#E0B29E;
  --aviso:#8A4A10; --aviso-fondo:#F3E0CB; --aviso-linea:#DDBB92;
  --pie:#3E2F1C; --pie-texto:#F1E7D0; --pie-suave:#D8C8A8; --pie-linea:#5A4830;
  --sombra:0 10px 30px rgba(62,47,28,.10);
}
[data-theme="trueblack"]{
  --azul:#8CC3F2; --azul-2:#A9D3F7; --tinta:#F0F0F0; --texto:#CFCFCF; --suave:#9A9A9A;
  --fondo:#000000; --papel:#0D0D0D; --linea:#262626; --banda:#111111; --borde-campo:#3A3A3A; --banda-borde:#2E2E2E;
  --jade:#3CC79D; --jade-2:#5BD6B0; --sobre-jade:#00140E; --sobre-azul:#00101E;
  --ok:#6FD597; --ok-fondo:#0D2617; --ok-linea:#1E4A2E; --ok-tinta:#BDF0D0;
  --err:#FF7B6E; --err-fondo:#2A100D; --err-linea:#5A221C;
  --aviso:#F2A65A; --aviso-fondo:#2A1C0C; --aviso-linea:#5A3E1C;
  --pie:#000000; --pie-linea:#262626; --video:#000000;
  --sombra:none; color-scheme:dark;
}
[data-theme="contraste"]{
  --azul:#00FFFF; --azul-2:#7FFFFF; --tinta:#FFFFFF; --texto:#FFFFFF; --suave:#FFFF00;
  --fondo:#000000; --papel:#000000; --linea:#FFFFFF; --banda:#000000; --borde-campo:#FFFFFF; --banda-borde:#FFFFFF;
  --jade:#FFFF00; --jade-2:#FFFF66; --sobre-jade:#000000; --sobre-azul:#000000;
  --ok:#55FF55; --ok-fondo:#002200; --ok-linea:#55FF55; --ok-tinta:#FFFFFF;
  --err:#FF7777; --err-fondo:#220000; --err-linea:#FF7777;
  --aviso:#FFAA00; --aviso-fondo:#221500; --aviso-linea:#FFAA00;
  --pie:#000000; --pie-texto:#FFFFFF; --pie-suave:#FFFF00; --pie-linea:#FFFFFF; --video:#000000;
  --sombra:none; color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:var(--cuerpo);font-size:16px;line-height:1.55;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4{font-family:var(--display);color:var(--tinta);margin:0;line-height:1.2}
p{margin:0 0 12px}
a{color:var(--azul)}a:hover{color:var(--azul-2)}
code{font-family:var(--mono);font-size:.92em;background:var(--banda);border:1px solid var(--linea);border-radius:5px;padding:0 4px}
img,svg,iframe{max-width:100%}
:focus-visible{outline:3px solid var(--azul-2);outline-offset:2px}
.saltar{position:absolute;left:-9999px;top:8px;background:var(--papel);padding:8px 12px;border-radius:8px;z-index:100}
.saltar:focus{left:8px}
.oculto-visual{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.envoltura{max-width:1120px;margin:0 auto;padding:0 20px;width:100%}
main{flex:1 0 auto}

/* ---------- botones, etiquetas, campos ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 15px var(--cuerpo);text-decoration:none;border-radius:10px;padding:12px 18px;border:0;cursor:pointer;min-height:44px;line-height:1.2;text-align:center}
.btn-jade{background:var(--jade);color:var(--sobre-jade)}.btn-jade:hover{background:var(--jade-2);color:var(--sobre-jade)}
.btn-azul{background:var(--azul);color:var(--sobre-azul)}.btn-azul:hover{background:var(--azul-2);color:var(--sobre-azul)}
.btn-borde{background:transparent;color:var(--azul);border:1.5px solid var(--azul)}.btn-borde:hover{color:var(--azul-2);border-color:var(--azul-2)}
.btn-suave{background:var(--papel);color:var(--tinta);border:1px solid var(--linea)}
.btn-grande{font-size:16px;padding:14px 24px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-chico{min-height:36px;padding:7px 12px;font-size:14px}
.tag{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--cuerpo);letter-spacing:.02em;border-radius:999px;padding:4px 10px;white-space:nowrap}
.tag-libre{background:var(--ok-fondo);color:var(--ok);border:1px solid var(--ok-linea)}
.tag-codigo{background:var(--banda);color:var(--azul);border:1px solid var(--banda-borde)}
.tag-oculto{background:var(--papel);color:var(--texto);border:1px solid var(--linea)}
/* Fase 4 (30-sep-2026, maquetas 1 y 2): lo que entra por la licencia de TIENDA MX
   va en el verde de «Libre» (lo abierto), no en el azul de «Con código» (lo que se
   canjea). La franja usa los mismos tonos para que se lea como «ya tienes acceso». */
.tag-licencia{background:var(--ok-fondo);color:var(--ok);border:1px solid var(--ok-linea)}
.licencia{background:var(--ok-fondo);border-bottom:1px solid var(--ok-linea);color:var(--ok-tinta)}
.licencia-fila{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;font-size:15px}
.licencia-sello{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.licencia-sello::before{content:"\2713";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--ok);color:var(--papel);font-size:12px}
.licencia-vence{color:var(--suave);font-size:14px;margin-left:auto}
.marca{font:800 22px var(--display);letter-spacing:-.01em;color:var(--azul);text-decoration:none;white-space:nowrap}
.marca b{color:var(--tinta)}
.cod{font:700 12px var(--display);letter-spacing:.06em;color:var(--suave)}
.ceja{display:block;font:700 13px var(--cuerpo);letter-spacing:.08em;text-transform:uppercase;color:var(--jade)}
.ayuda{font:400 13px var(--cuerpo);color:var(--suave)}
.campo{display:flex;flex-direction:column;gap:6px;font:600 14px var(--cuerpo);color:var(--tinta)}
.campo input,.campo select,.campo textarea{font:400 16px var(--cuerpo);padding:11px 12px;border:1px solid var(--borde-campo);border-radius:10px;background:var(--papel);color:var(--tinta);min-height:44px;width:100%}
.campo .ayuda{font-weight:400}
.campo-corto{max-width:160px}
.casilla{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;cursor:pointer}
.casilla input{width:20px;height:20px;margin-top:2px;flex:none}
.mensaje{border-radius:12px;padding:12px 16px;font-size:15px;line-height:1.5}
.mensaje-err{background:var(--err-fondo);border:1px solid var(--err-linea);color:var(--err)}
.mensaje-ok{background:var(--ok-fondo);border:1px solid var(--ok-linea);color:var(--ok-tinta)}
.mensaje-aviso{background:var(--aviso-fondo);border:1px solid var(--aviso-linea);color:var(--tinta)}
select.tema{font:600 14px var(--cuerpo);padding:8px 10px;border:1px solid var(--linea);border-radius:8px;background:var(--papel);color:var(--tinta);min-height:40px}

/* ---------- cabecera y pie ---------- */
.cab{background:var(--papel);border-bottom:1px solid var(--linea)}
.cab-fila{min-height:64px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cab-sitio{font:700 14px var(--display);color:var(--jade);border-left:1px solid var(--linea);padding-left:16px;text-decoration:none}
.cab-nav{display:flex;gap:20px;margin-left:12px;font:600 15px var(--cuerpo)}
.cab-nav a{color:var(--texto);text-decoration:none}
.cab-nav a[aria-current="page"]{color:var(--tinta)}
/* 30-sep: sin «gap» ni la regla del teléfono que escondía «.cab-der .btn»: eran
   para el botón «Conoce TIENDA MX», que se quitó (Fer). Medido en Chromium: la
   cabecera queda igual al píxel en 390, 640, 641, 768 y 1280, con y sin licencia. */
.cab-der{margin-left:auto;display:flex;align-items:center}
.cab-der label{display:flex;align-items:center;gap:6px;font:600 14px var(--cuerpo);color:var(--texto)}
.promo{background:var(--pie);color:var(--pie-texto);margin-top:40px}
.promo-fila{padding:36px 20px;display:flex;align-items:center;gap:24px}
.promo h2{font-size:24px;color:#fff}
[data-theme="sepia"] .promo h2,[data-theme="contraste"] .promo h2{color:var(--pie-texto)}
.promo p{margin:8px 0 0;color:var(--pie-texto)}
.promo .btn{flex:none}
.pie{background:var(--pie);border-top:1px solid var(--pie-linea)}
.pie-fila{padding:16px 20px;display:flex;gap:20px;flex-wrap:wrap;font-size:14px;color:var(--pie-suave)}
.pie a{color:var(--pie-texto)}
.pie-claro{background:var(--papel);border-top:1px solid var(--linea)}
.pie-claro .pie-fila{color:var(--suave)}.pie-claro a{color:var(--azul)}

/* ---------- catálogo ---------- */
.heroe{background:var(--banda);border-bottom:1px solid var(--linea)}
/* 6-oct-2026 (Fer): el texto a dos tercios y la ilustración a un tercio. */
.heroe-rejilla{padding:56px 20px 48px;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:48px;align-items:center}
.heroe-texto{display:flex;flex-direction:column;gap:18px}
.heroe h1{font-size:44px;line-height:1.1;letter-spacing:-.02em}
.heroe-texto>p{margin:0;font-size:18px;line-height:1.55}
/* «Cómo funciona cada curso», plegado bajo el texto (6-oct-2026): era una
   tarjeta que a quien regresa le ocupaba media pantalla. El summary es flex
   para medir 44 px de alto al dedo, y eso le quita su triangulito: se repone. */
.como{font-size:15px}
.como summary{cursor:pointer;font-weight:700;color:var(--azul);min-height:44px;display:flex;align-items:center;gap:8px;list-style:none}
.como summary::-webkit-details-marker{display:none}
.como summary::before{content:"\25B8";font-size:14px}
.como[open] summary::before{content:"\25BE"}
.como ol{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.como li{display:flex;gap:12px;align-items:center}
.como li b{color:var(--tinta)}
.como .bolita{width:28px;height:28px;font-size:13px}
.heroe-imagen{display:flex;justify-content:center}
.heroe-imagen img{display:block;width:100%;max-width:320px;height:auto}
.bolita{flex:none;width:32px;height:32px;border-radius:999px;background:var(--banda);color:var(--azul);font:800 15px var(--display);display:flex;align-items:center;justify-content:center}
.bolita-ok{background:var(--ok-fondo);color:var(--ok)}
.catalogo{padding:40px 20px 32px;display:flex;flex-direction:column;gap:24px}
.filtros{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.filtros-grupo{display:flex;gap:8px;flex-wrap:wrap}
.filtro{display:inline-flex;align-items:center;font:700 15px var(--cuerpo);border-radius:10px;padding:8px 14px;min-height:40px;text-decoration:none;background:var(--papel);color:var(--tinta);border:1px solid var(--linea)}
.filtro[aria-current="true"]{background:var(--tinta);color:var(--fondo);border-color:var(--tinta)}
/* La categoría se elige de una lista (6-oct-2026, opción A de Fer): un solo
   control, sean 2 categorías o 20. Con un botón por categoría, ocho se iban a
   tres renglones. */
.filtro-cat{align-items:center;gap:8px 14px}
.filtro-sel{display:inline-flex;align-items:center;gap:10px;font:700 15px var(--cuerpo);color:var(--tinta)}
.filtro-sel select{font:700 15px var(--cuerpo);min-height:44px;border:1px solid var(--borde-campo);border-radius:10px;padding:8px 12px;background:var(--papel);color:var(--tinta);max-width:100%}
.filtros .total{font:600 14px var(--cuerpo);color:var(--suave)}
.seccion-cab{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--linea);padding-bottom:12px;flex-wrap:wrap}
.seccion-cab h2{font-size:28px}
.seccion-cab h2 a{color:inherit;text-decoration:none}
/* La descripción cede ancho antes de que «Ver los N» se caiga a otro renglón
   (medido el 6-oct: con la de Habilidades blandas se caía a 1280 px). */
.seccion-cab p{margin:0;flex:1 1 0;min-width:240px}
/* 7-oct-2026: «Ver los N cursos» es un botón (.btn .btn-borde, en la vista) y
   aquí ya no lleva regla propia en escritorio. Tenía tipografía (la misma que
   .btn) y white-space:nowrap; se midió sin el nowrap a 15 anchos, de 320 a
   1280 px, y no cambió nada: el renglón baja el botón entero antes de
   quitarle ancho. Una regla que no mueve nada se quita. La cuenta
   «N cursos · M libres» (.cuenta) se quitó ese día con su regla. */
.tarjetas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.tarjeta-curso{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:22px;display:flex;flex-direction:column;gap:12px;min-height:290px}
.tarjeta-curso .arriba{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tarjeta-curso h3{font-size:20px;line-height:1.25}
.tarjeta-curso h3 a{color:inherit;text-decoration:none}
.tarjeta-curso p{margin:0;font-size:15px;line-height:1.5;flex-grow:1}
.tarjeta-curso .datos{font:600 13px var(--cuerpo);color:var(--suave)}
/* El estado del curso en este navegador (lo pone cursos.js en lugar de los datos). */
.tarjeta-curso .estado{display:flex;flex-direction:column;gap:6px;font:600 13px var(--cuerpo);color:var(--tinta)}
.tarjeta-curso .estado .barra{height:6px}
.tarjeta-curso .estado-ok{color:var(--ok);font:700 14px var(--cuerpo)}
.tarjeta-curso .acciones{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:14px}
.tarjeta-curso .acciones .btn{flex:1 1 auto}
.vacio{background:var(--papel);border:1px dashed var(--borde-campo);border-radius:var(--radio);padding:28px;text-align:center}
.pide{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:22px 26px;display:flex;align-items:center;gap:20px}
.pide div{flex-grow:1}
.pide h3{font-size:18px}
.pide p{margin:6px 0 0}

/* ---------- portada del curso ---------- */
.portada{padding:32px 20px 48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start}
.portada-principal{grid-column:span 2;display:flex;flex-direction:column;gap:28px}
.ruta{font-size:14px;color:var(--suave)}
.portada-intro{display:flex;flex-direction:column;gap:14px}
.portada-intro .fila{display:flex;gap:10px;align-items:center}
.portada h1{font-size:42px;line-height:1.1;letter-spacing:-.02em}
.portada-intro>p{margin:0;font-size:19px;line-height:1.55}
.portada-intro>p.para-quien{font-size:15px;line-height:1.5}
.para-quien{color:var(--suave)}
/* Los datos del curso, en su cuadro lateral (6-oct-2026). Eran seis fichas
   redondas bajo el título: parecían botones y no se podían pulsar. */
.hechos{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font:600 15px var(--cuerpo);color:var(--tinta)}
.hechos li{display:flex;gap:10px}
.hechos li::before{content:"\2022";color:var(--jade);font-weight:800}
/* El único botón verde de la portada, junto a la palabra «Temario». */
.temario-cab{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.temario-cab .acciones{display:flex;gap:10px;flex-wrap:wrap}
.caja{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:26px;display:flex;flex-direction:column;gap:14px}
.caja h2{font-size:22px}
.aprender{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;font-size:16px;line-height:1.45}
.aprender li{display:flex;gap:10px}
.aprender li::before{content:"✓";color:var(--jade);font-weight:800}
.temario-lista{margin:0;padding:0;list-style:none;background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.temario-lista li{display:flex;align-items:center;gap:16px;padding:14px 20px;border-bottom:1px solid var(--linea)}
.temario-lista li:last-child{border-bottom:0}
.temario-lista .bolita{width:30px;height:30px;font-size:14px}
.temario-lista .t{flex-grow:1;color:var(--tinta);font-weight:600}
.temario-lista .tipo{font-size:14px;color:var(--suave);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
/* El temario con estado (lo marca cursos.js): palomita en lo visto, «Aquí vas»
   en donde te quedaste. Mismo dibujo que el temario de las lecciones. */
.temario-lista a.t{text-decoration:none}
.temario-lista a.t:hover{text-decoration:underline}
.temario-lista li.hecho .bolita{background:var(--ok-fondo);color:var(--ok);font-size:0}
.temario-lista li.hecho .bolita::before{content:"✓";font-size:14px}
.temario-lista li.aqui{background:var(--banda)}
.temario-lista li.aqui .bolita{background:var(--azul);color:var(--sobre-azul)}
.tag-aqui{background:var(--azul);color:var(--sobre-azul)}
.ico-video{flex:none;color:var(--azul)}
.lado{display:flex;flex-direction:column;gap:20px;position:sticky;top:24px}
.lado .caja{padding:24px}
.lado h2{font-size:18px}
.lado p{margin:0;font-size:15px}
/* «Lo que vas a aprender» vive en la columna lateral: ahí no caben dos columnas de puntos. */
.lado .aprender{grid-template-columns:1fr;gap:10px;font-size:15px}
/* Miniatura de la constancia en «Al aprobar». */
.mini-constancia{border:1px solid var(--linea);border-radius:8px;background:var(--fondo);padding:16px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.mini-constancia .mc-ceja{font:700 10px var(--cuerpo);letter-spacing:.12em;text-transform:uppercase;color:var(--jade)}
.mini-constancia .mc-nombre{font:700 17px var(--display);color:var(--tinta);border-bottom:1px solid var(--borde-campo);padding:0 14px 4px}
.mini-constancia .mc-curso{font-size:12px;color:var(--texto)}
.mini-constancia .mc-folio{font:600 11px var(--mono);color:var(--suave)}
.lado .caja-banda{background:var(--banda);border-color:var(--banda-borde)}
.barra{height:10px;background:var(--banda);border-radius:999px;overflow:hidden}
.barra>div{width:0;height:100%;background:var(--jade);transition:width .3s}
.candado{background:var(--banda);border:1px solid var(--banda-borde);border-radius:var(--radio);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.candado h2{font-size:20px}

/* ---------- lecciones ---------- */
.curso-cab .cab-fila{padding:0 28px;max-width:none;gap:20px}
.curso-cab .marca{font-size:19px}
.curso-cab .titulo-curso{font:700 15px var(--display);color:var(--tinta);text-decoration:none;border-left:1px solid var(--linea);padding-left:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 200px}
.avance{margin-left:auto;display:flex;align-items:center;gap:12px;min-width:280px}
.avance span{font:600 14px var(--cuerpo);color:var(--texto);white-space:nowrap}
.avance .barra{flex-grow:1;height:8px}
/* La columna del temario llega hasta el pie aunque la lección sea corta. */
main:has(> .aula){display:flex;flex-direction:column}
.aula{flex-grow:1;display:grid;grid-template-columns:300px minmax(0,1fr)}
.temario{background:var(--papel);border-right:1px solid var(--linea);padding:24px 16px;display:flex;flex-direction:column;gap:4px}
.temario-titulo{font:700 12px var(--cuerpo);letter-spacing:.08em;text-transform:uppercase;color:var(--suave);padding:0 12px 10px}
.temario a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:10px;text-decoration:none;font:600 14px var(--cuerpo);color:var(--texto);line-height:1.35}
.temario a .b{flex:none;width:24px;height:24px;border-radius:999px;display:flex;align-items:center;justify-content:center;font:800 12px var(--display);background:var(--fondo);color:var(--suave);border:1px solid var(--linea)}
.temario a.hecho .b{background:var(--ok-fondo);color:var(--ok);border-color:var(--ok-fondo)}
.temario a.hecho .b{font-size:0}.temario a.hecho .b::before{content:"✓";font-size:12px}
.temario a[aria-current="step"]{color:var(--tinta);background:var(--banda)}
.temario a[aria-current="step"] .b{background:var(--azul);color:var(--sobre-azul);border-color:var(--azul)}
.temario details summary{display:none}
.leccion{padding:36px 56px 40px;display:flex;flex-direction:column;gap:22px;max-width:860px;width:100%}
.leccion>h1,.leccion .paso>h1{font-size:34px;line-height:1.15;letter-spacing:-.01em}
.paso{display:flex;flex-direction:column;gap:18px}
.js .paso{display:none}.js .paso.activo{display:flex}
.cuerpo{font-size:18px;line-height:1.6;color:var(--texto)}
.cuerpo p{max-width:70ch}
.cuerpo h3{font-size:20px;margin:22px 0 10px}
.cuerpo h4{font-size:17px;margin:0 0 8px}
.cuerpo strong,.cuerpo b{color:var(--tinta)}
.cuerpo ul.lista{margin:8px 0 16px;padding-left:24px}
.cuerpo ul.lista li{margin-bottom:8px;max-width:68ch}
.cuerpo .tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:12px;padding:16px 20px;margin-top:12px}
.cuerpo .tarjeta p{font-size:16px;margin:0}
.cuerpo .rejilla{display:grid;gap:14px;margin-top:14px}
.cuerpo .rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cuerpo .rejilla .tarjeta{margin-top:0}
.cuerpo .nota-primario{background:var(--ok-fondo);border:1px solid var(--ok-linea);border-radius:12px;padding:16px 20px;font-size:16px;line-height:1.5;color:var(--ok-tinta);margin-top:16px}
.cuerpo .nota-primario b,.cuerpo .nota-primario strong{color:var(--ok-tinta)}
.cuerpo .aviso{background:var(--aviso-fondo);border:1px solid var(--aviso-linea);border-radius:12px;padding:16px 20px;font-size:16px;line-height:1.5;margin-top:16px}
.video{aspect-ratio:16/9;width:100%;background:var(--video);border-radius:var(--radio);overflow:hidden}
.video iframe{width:100%;height:100%;border:0;display:block}
/* El texto de una lección con video, plegado bajo el video (13-oct-2026,
   pedido de Fer; el porqué, en vistas/lecciones.php). La barra va pegada al
   pie del video y es parte de él: el video pierde sus esquinas de abajo y la
   barra las toma. El margen negativo anula el hueco de 18 px entre los hijos
   del paso (.paso{gap:18px}). Lleva su raya de arriba porque las miniaturas
   de Fer son claras, como la barra: sin ella no se ve dónde termina el
   video (medido en la maqueta del 13-oct). Todo el renglón se pulsa y mide
   44 px, para el dedo; la letra, la mano y el hueco son los de .btn (el banco
   los compara contra los botones de la misma página). Las dos leyendas están
   en el HTML y el CSS muestra la que toca: así no hace falta JavaScript para
   cambiarla.
   QUITADO tras el barrido de mutaciones del 13-oct (regla de Fer: lo que no
   mueve nada medido, sobra): el relleno de la barra (con min-height:44px y
   una leyenda de un renglón no cambiaba nada a ningún ancho), list-style:none
   (con display:flex el resumen ya no lleva marcador en ningún navegador
   actual) y flex:none del chevron (nunca le falta lugar).
   SE QUEDA SIN PODER MEDIRSE AQUÍ: ::-webkit-details-marker. Safari dibuja su
   triángulo con ese seudoelemento aunque el resumen sea flex; en el
   contenedor solo hay Chromium. Era la misma regla que usaba «Para tu
   equipo» (.equipos) mientras fue plegable, hasta el 14-oct. */
.video.con-texto{border-radius:var(--radio) var(--radio) 0 0}
.texto-leccion{margin-top:-18px}
.texto-leccion summary{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;background:var(--banda);border:1px solid var(--banda-borde);border-radius:0 0 var(--radio) var(--radio);font:700 15px var(--cuerpo);color:var(--azul)}
.texto-leccion summary::-webkit-details-marker{display:none}
.texto-leccion summary:hover{background:var(--fondo)}
.texto-leccion summary .chevron{transition:transform .15s}
.texto-leccion[open] summary .chevron{transform:rotate(180deg)}
.texto-leccion .ocultar,.texto-leccion[open] .ver{display:none}
.texto-leccion[open] .ocultar{display:inline}
.texto-leccion>.cuerpo{margin-top:18px}
/* La portada del video (13-oct-2026; el porqué, en vistas/lecciones.php).
   La miniatura llena el cuadro 16:9; si YouTube solo tiene la de 4:3
   (hqdefault, con franjas negras arriba y abajo), object-fit:cover las
   recorta. El botón es nuestro, en los colores del sitio, para que la
   portada no parezca el reproductor de YouTube a medio cargar.
   El botón: 76 px (más que los 44 del dedo y menos de la mitad del cuadro
   aun a 320 px); la sombra es para que el círculo blanco se distinga sobre
   las miniaturas claras de Fer (el banco la mide sobre una toda blanca); el
   triángulo se corre 4 px a la derecha porque su peso está cargado a la
   izquierda y centrado por su caja se ve chueco (su centroide queda 1.6 px a
   la derecha del centro; sin el corrimiento, 0.4 a la izquierda). El anillo
   de foco va HACIA ADENTRO (-3px): el cuadro recorta lo que sale
   (overflow:hidden) y el anillo general (+2px) no se vería. Con «menos
   movimiento», el botón crece sin animación.
   QUITADO tras el barrido del 13-oct: color:var(--azul) de la portada (todo
   enlace ya es --azul, y al pasar el ratón manda a:hover) y display:block de
   la miniatura (no movía nada medido). */
.portada-video{position:relative;display:block;width:100%;height:100%}
.portada-video img{width:100%;height:100%;object-fit:cover}
.portada-video .boton-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:#FFFFFF;color:#1F4E79;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 24px rgba(0,0,0,.28);transition:transform .15s}
/* 13-oct-2026 (decisión de Fer, tras la revisión independiente): el botón
   es SIEMPRE blanco con el triángulo azul, en todos los temas, porque va
   sobre la miniatura y la miniatura no cambia con el tema (con --papel salía
   azul marino en oscuro y casi negro en negro puro). Son el --papel y el
   --azul del tema claro (:root), escritos fijos a propósito: el banco los
   compara contra los que publica el tema claro. El color va en el botón y
   no se hereda del enlace, para que a:hover no lo cambie.
   EXCEPCIÓN, alto contraste: ese tema existe por accesibilidad y la persona
   lo eligió para ver negro con cian en todo el sitio; el botón se queda con
   los colores de ese tema. */
[data-theme="contraste"] .portada-video .boton-play{background:var(--papel);color:var(--azul)}
.portada-video .boton-play svg{margin-left:4px}
.portada-video:hover .boton-play,.portada-video:focus-visible .boton-play{transform:scale(1.08)}
.portada-video:focus-visible{outline:3px solid var(--azul-2);outline-offset:-3px}
@media (prefers-reduced-motion:reduce){.portada-video .boton-play{transition:none}}
.nav-pasos{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:8px;border-top:1px solid var(--linea);flex-wrap:wrap}
.sin-js .nav-pasos{display:none}

/* ---------- ejercicio (correo simulado) ---------- */
.correo{background:var(--papel);border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);overflow:hidden;font-size:16px}
.correo .cab{padding:14px 18px;border-bottom:1px solid var(--linea);background:var(--fondo);font-size:15px}
.correo .cab div{margin-bottom:3px}
.correo .et{font:700 11px var(--cuerpo);color:var(--suave);text-transform:uppercase;letter-spacing:.08em;margin-right:8px}
.correo .cuerpo-correo{padding:18px}
.correo .cuerpo-correo p{margin-bottom:10px;max-width:none}
.correo .adjunto{display:inline-block;margin-top:6px;padding:6px 10px;border:1px solid var(--linea);border-radius:8px;background:var(--fondo);font-size:14px}
/* 30-sep-2026 (fase 5): una señal NO se distingue del resto del correo hasta
   que se encuentra. Antes llevaba subrayado punteado, relleno y cursor de
   mano, y el resto del texto no: se veían las cinco sin leer (revisión
   independiente de HB-C1; pasaba en todos los cursos). Ahora la mano va en
   TODO el correo: la primera versión la ponía solo en señales y «trozos», y
   la puntuación pegada a una señal quedaba con cursor de texto (la revisión
   independiente midió 41 de 60 señales así). Con el teclado, cursos.js marca
   solo la palabra activa: ningún borde de señal se ve. */
.js .correo{cursor:pointer}
/* Una dirección larga (la del enlace falso de SI-C1) se parte antes que
   salirse de la pantalla: a 320 px la página medía 338 (revisión del 1-oct;
   venía de antes de esta fase). Solo cambia SI-C1 a 320 px: 1 de 48 fotos
   de los 12 cursos a 320, 390, 768 y 1280 px. */
.correo{overflow-wrap:anywhere}
/* El contorno de la palabra activa solo con el correo enfocado: al salir
   con Tab ya no queda marcada (revisión del 1-oct). Sin separación ni
   esquinas redondeadas: el barrido no pudo defender ninguna de las dos. */
.correo:focus .palabra.activa{outline:2px solid var(--azul-2)}
/* Al recorrer con las flechas, la palabra activa se lleva a la vista con su
   contorno completo y un renglón de contexto. 30-sep-2026: sin este margen
   quedaba pegada al borde de la pantalla (0.3 px fuera) con el contorno
   cortado; lo midió J16 a 390x500 px. */
.correo .palabra{scroll-margin:24px 0}
/* El aviso del ejercicio («no es una de las que buscas», o cómo se usa con
   el teclado) guarda su lugar aunque esté vacío: si apareciera de la nada,
   empujaría las explicaciones hacia abajo a cada pulsación (banco, J11).
   El aviso y una copia invisible de su texto más largo ocupan la MISMA celda
   de una rejilla, así la caja mide lo que ese texto a cualquier ancho.
   30-sep-2026: la primera versión fijaba un renglón (min-height:1.5em) y a
   390 px el aviso ocupa dos; el margen pasa de la <p> a la caja para que el
   aviso lleno no mida más que su copia, y la caja deja debajo lo mismo que
   un párrafo (J19). La copia, con visibility:hidden, tampoco existe para un
   lector de pantalla (J18; por eso no lleva aria-hidden). */
.aviso-caja{display:grid;margin:0 0 12px}
.aviso-caja>*{grid-area:1/1;margin:0}
.aviso-medida{visibility:hidden}
.senal.hallada{background:var(--ok-fondo);border-bottom:2px solid var(--ok);cursor:default}
.senal.hallada::after{content:" ✓";color:var(--ok);font-weight:800}
.contador{font:700 15px var(--display);color:var(--azul)}
.hallazgos{display:flex;flex-direction:column;gap:8px}
.hallazgo{background:var(--ok-fondo);border:1px solid var(--ok-linea);border-radius:10px;padding:10px 14px;font-size:15px;color:var(--ok-tinta)}
.hallazgo b{color:var(--ok-tinta)}
.cierre{display:none}.cierre.visto{display:block}

/* ---------- quiz ---------- */
.quiz{padding:40px 56px;display:grid;grid-template-columns:minmax(0,1fr);max-width:860px;width:100%;gap:24px}
.tarjeta-quiz{background:var(--papel);border:1px solid var(--linea);border-radius:16px;box-shadow:var(--sombra);padding:32px;display:flex;flex-direction:column;gap:18px}
.tarjeta-quiz h1{font-size:28px;line-height:1.2}
.tarjeta-quiz h2{font-size:22px;line-height:1.35}
.tarjeta-quiz>p{margin:0;font-size:16px}
.cuenta-quiz{display:flex;justify-content:space-between;align-items:center;font:600 14px var(--cuerpo);color:var(--texto)}
.cuenta-quiz+.barra{height:8px}
.cuenta-quiz+.barra>div{background:var(--azul)}
.opciones{display:flex;flex-direction:column;gap:10px}
.opcion{display:block;width:100%;text-align:left;font:500 16px var(--cuerpo);line-height:1.45;background:var(--papel);color:var(--texto);border:1px solid var(--linea);border-radius:10px;padding:14px 16px;cursor:pointer;min-height:44px}
.opcion:hover:not([disabled]){border-color:var(--azul)}
.opcion[disabled]{cursor:default}
.opcion.buena{background:var(--ok-fondo);color:var(--ok-tinta);border:2px solid var(--ok);font-weight:600}
.opcion.buena::before{content:"✓\00a0 "}
.opcion.mala{background:var(--err-fondo);color:var(--err);border:2px solid var(--err)}
.explica{border-radius:12px;padding:14px 18px;font-size:15px;line-height:1.5}
.explica.bien{background:var(--ok-fondo);border:1px solid var(--ok-linea);color:var(--ok-tinta)}
.explica.mal{background:var(--err-fondo);border:1px solid var(--err-linea);color:var(--tinta)}
.explica b{margin-right:4px}
.derecha{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.captcha-op{font:800 18px var(--mono);color:var(--azul);background:var(--banda);border:1px solid var(--banda-borde);border-radius:8px;padding:6px 14px;letter-spacing:.1em;user-select:none}
.captcha-fila{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.resultado{text-align:center;align-items:center}
.marcador{font:800 48px var(--display);color:var(--azul);line-height:1.1}
.veredicto{font:700 20px var(--display)}
.veredicto.si{color:var(--ok)}.veredicto.no{color:var(--err)}
.folio{font:700 15px var(--display);letter-spacing:.06em;color:var(--tinta)}
[hidden]{display:none!important}

/* ---------- constancia (carta) ---------- */
.constancia-pagina{padding:32px 20px 48px;display:flex;flex-direction:column;align-items:center;gap:18px}
.constancia-acciones{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.constancia{width:100%;max-width:816px;background:#fff;color:#3A4A5C;border:1px solid var(--linea);border-top:10px solid #1F4E79;padding:56px 64px;display:flex;flex-direction:column;gap:28px;min-height:1056px}
.constancia h1,.constancia h2{color:#15212E}
.constancia .marca{color:#1F4E79}.constancia .marca b{color:#15212E}
.constancia .c-cab{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.constancia .c-sitio{font:700 14px var(--display);color:#0F7B5F;border-left:1px solid #E1E8F0;padding-left:14px}
.constancia .c-folio{margin-left:auto;font:700 13px var(--display);letter-spacing:.06em;color:#5E6E80}
.constancia .c-centro{display:flex;flex-direction:column;gap:10px;align-items:center;text-align:center;padding-top:36px}
.constancia .c-ceja{font:700 14px var(--cuerpo);letter-spacing:.14em;text-transform:uppercase;color:#0F7B5F}
.constancia .c-suave{font-size:17px;color:#3A4A5C}
.constancia .c-nombre{font:700 36px var(--display);color:#15212E;border-bottom:2px solid #E1E8F0;padding:4px 28px 10px;line-height:1.2}
.constancia .c-curso{font:700 26px var(--display);color:#1F4E79;line-height:1.25}
.constancia .c-cat{font:600 14px var(--cuerpo);color:#5E6E80}
.constancia .c-nota{font-size:14px;color:#5E6E80}
.constancia .c-esencial{background:#F4F7FB;border:1px solid #E1E8F0;border-radius:12px;padding:22px 26px;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.constancia .c-esencial h2{font-size:17px}
.constancia .c-esencial ul{margin:0;padding-left:20px;font-size:15px;line-height:1.55}
.constancia .c-pie{margin-top:auto;display:flex;align-items:flex-end;gap:24px;border-top:1px solid #E1E8F0;padding-top:22px}
.constancia .c-verifica{flex-grow:1;display:flex;flex-direction:column;gap:6px;font-size:14px}
.constancia .c-verifica b{color:#15212E}
.constancia .qr{width:104px;height:104px;flex:none}

/* ---------- verificar y páginas legales ---------- */
.angosta{max-width:760px;margin:0 auto;padding:40px 20px 24px;display:flex;flex-direction:column;gap:20px;width:100%}
.angosta h1{font-size:34px;letter-spacing:-.01em}
.verifica-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.verifica-form .campo{flex:1 1 260px}
.ficha{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);padding:24px 26px;display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:16px}
.ficha dt{font-weight:700;color:var(--tinta)}.ficha dd{margin:0}
.legal-doc h1{font-size:34px}
.legal-doc h2{font-size:20px;margin:26px 0 10px}
.legal-doc .fecha{color:var(--suave);font-size:14px}
.legal-doc li{margin-bottom:8px}

/* ---------- errores ---------- */
.error-caja{max-width:640px;margin:56px auto;padding:0 20px;display:flex;flex-direction:column;gap:16px;width:100%}
.error-caja h1{font-size:30px}

/* ---------- teléfono y tableta ---------- */
@media (max-width:980px){
  .heroe-rejilla{grid-template-columns:1fr;gap:28px;padding:36px 20px 32px}
  .heroe h1{font-size:34px}
  .heroe-imagen img{max-width:200px}
  .tarjetas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portada{grid-template-columns:1fr}
  .portada-principal{grid-column:auto}
  .lado{position:static}
  .aula{grid-template-columns:1fr}
  .temario{border-right:0;border-bottom:1px solid var(--linea);padding:12px 16px}
  .temario details summary{display:flex;align-items:center;gap:8px;font:700 15px var(--cuerpo);color:var(--tinta);cursor:pointer;padding:6px 4px;min-height:40px}
  .temario .temario-titulo{display:none}
  .leccion,.quiz{padding:24px 20px 32px}
  .avance{min-width:0;flex:1 1 100%;margin-left:0;padding-bottom:10px}
}
@media (max-width:640px){
  .cab-fila{gap:12px;padding-top:8px;padding-bottom:8px}
  .cab-nav{margin-left:0;gap:14px;font-size:14px;order:3;flex-basis:100%}
  .cab-der label span{display:none}
  .tarjetas{grid-template-columns:1fr}
  .tarjeta-curso{min-height:0}
  .pide,.promo-fila{flex-direction:column;align-items:flex-start}
  .portada h1{font-size:32px}
  .portada-intro>p{font-size:17px}
  .aprender{grid-template-columns:1fr}
  /* 6-oct-2026: en teléfono el botón del temario va bajo la palabra, a todo lo ancho. */
  .temario-cab .btn{flex:1 1 100%}
  .temario-cab .acciones{flex:1 1 100%}
  /* Sin flex-wrap y con el título encogible: con un título de dos renglones
     la bolita se iba a un renglón propio (visto a 390 px el 6-oct). */
  .temario-lista li{gap:12px;padding:12px 14px}
  .temario-lista .t{min-width:0}
  /* En teléfono las lecciones no llevan la palabra «Lección» (ni «· vista»):
     el número ya dice que lo es y la palomita que se vio, y la etiqueta le
     quitaba al título casi la mitad del renglón (a 320 px un título se iba a
     cuatro renglones). Se quedan el icono de video, «Aquí vas» y las
     etiquetas de lo que NO es lección (Ejercicio, Evaluación). */
  .temario-lista li[data-visto="vista"] [data-tipo]:not(.tag){display:none}
  .seccion-cab{flex-direction:column;gap:6px}
  /* En teléfono el botón va bajo la descripción: los 6 px del renglón le
     quedan justos a un botón con borde (7-oct-2026). */
  .seccion-cab .ver-todos{margin-top:6px}
  .seccion-cab p{flex:0 0 auto;min-width:0}
  /* La etiqueta «Categoría» va arriba de su lista; el número de cursos se
     alinea con la lista, no con el conjunto. */
  .filtro-sel{display:flex;flex-direction:column;align-items:stretch;gap:6px}
  .filtro-cat{align-items:flex-end}
  .filtro-cat .total{padding-bottom:12px}
  .leccion>h1,.leccion .paso>h1{font-size:27px}
  .cuerpo{font-size:17px}
  .tarjeta-quiz{padding:22px}
  .curso-cab .cab-fila{padding:8px 16px}
  .curso-cab .titulo-curso{flex-basis:100%;border-left:0;padding-left:0;order:3}
  .constancia{padding:28px 22px;min-height:0}
  .constancia .c-nombre{font-size:26px;padding:4px 8px 8px}
  .constancia .c-curso{font-size:21px}
  .ficha{grid-template-columns:1fr}
}

/* ---------- impresión: solo la constancia, en carta ---------- */
@page{size:letter;margin:0}
@media print{
  body{background:#fff}
  .cab,.promo,.pie,.pie-claro,.constancia-acciones,.no-imprimir{display:none!important}
  .constancia-pagina{padding:0}
  .constancia{border:0;border-top:10px solid #1F4E79;max-width:none;width:8.5in;min-height:11in;padding:.6in .7in;box-shadow:none}
}

/* En alto contraste el riel de las barras de avance es negro sobre negro: se le
   pone orilla para que se vea cuánto falta (medido en las capturas del 28-sep). */
[data-theme="contraste"] .barra{border:1px solid var(--linea)}
@media (prefers-reduced-motion:reduce){.barra>div{transition:none}}

/* ---------- abrir un curso con código (fase 3, 29-sep-2026) ---------- */
.abrir .fila{display:flex;gap:10px;align-items:center}
.abrir>p{margin:0;font-size:16px;line-height:1.5}
.campo input.campo-codigo{font-family:var(--display);letter-spacing:.06em;text-transform:uppercase}

/* ---------- programa con constancia DC-3 (2-oct-2026, maquetas aprobadas por Fer) ----------
   Lo que usan la página del trabajador (/programa/<id>) y, en la Administración, los formularios
   de Agentes, Programas y la empresa de un código (admin.css se carga DESPUÉS de esta hoja y
   las páginas públicas no la cargan: por eso la rejilla de campos vive aquí y no allá).
   . campos-dos: dos columnas de campos; «todo» ocupa el renglón. minmax(0,1fr) y no 1fr: con
     1fr un campo con un valor largo ensancha su columna y la página se desborda en teléfono
     (la lección de Códigos del 29-sep). En teléfono, una columna.
   . programa-cursos: el avance, un renglón por curso con su etiqueta a la derecha. */
.campos-dos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.campos-dos .todo{grid-column:1/-1}
@media (max-width:640px){.campos-dos{grid-template-columns:minmax(0,1fr)}}
.programa-cursos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.programa-cursos li{display:flex;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--linea);border-radius:10px;padding:9px 12px;font-size:15px}
.programa-form{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.programa summary{font:700 16px var(--cuerpo);color:var(--tinta);cursor:pointer}
/* «No soy yo» es un formulario (cambia la sesión, va por POST con su token) pero se lee como liga. */
.liga-boton{background:none;border:0;padding:0;color:var(--azul);font:400 14px var(--cuerpo);cursor:pointer;text-decoration:underline}

/* ---------- solicitar un código (6-oct-2026, maquetas aprobadas por Fer) ----------
   El formulario reutiliza la tarjeta y los campos de «Abrir con código» (tarjeta-quiz, campo,
   campos-dos): quien pide un código y quien lo canjea ven la misma forma. Aquí solo lo propio.
   . opcional: lo opcional se dice con la palabra junto a la etiqueta, no con un asterisco en lo
     obligatorio (un asterisco hay que saber leerlo).
   . textarea: alto para tres renglones y crece solo a lo alto; a lo ancho rompería la tarjeta
     en teléfono.
   . campo-numero: «¿Para cuántas personas?» es un número corto; a todo lo ancho invita a
     escribir otra cosa.
   . no-llenar: el campo trampa contra programas. Fuera de la pantalla y NO con display:none: los
     programas que llenan formularios suelen saltarse lo que está oculto de esa forma.
   . resumen: «Lo que nos enviaste», etiqueta y dato en dos columnas; en teléfono, uno bajo otro.
     resumen-texto conserva los renglones del comentario. */
.campo .opcional{font:400 13px var(--cuerpo);color:var(--suave)}
.campo textarea{min-height:96px;resize:vertical;line-height:1.45}
.campo input.campo-numero{max-width:140px}
.no-llenar{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.solicitar .fila{flex-wrap:wrap}
.resumen{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;font-size:15px}
.resumen dt{color:var(--suave)}
.resumen dd{margin:0;color:var(--tinta);font-weight:600;overflow-wrap:anywhere}
.resumen-texto{white-space:pre-line}
@media (max-width:640px){.resumen{grid-template-columns:minmax(0,1fr);gap:2px 0}.resumen dd{margin-bottom:8px}}

/* ============================================================================
   «Precios» (7-oct-2026; maquetas ajustadas y aprobadas por Fer ese día)

   DECISIONES DE FER: no se vende un curso suelto, solo una categoría o todos;
   el precio es por persona, más IVA, por 12 meses, y SE PUBLICA. Para equipos
   no hay paquetes: baja el precio por persona según cuántas son. Los números
   NO están en esta hoja ni en las vistas: salen de src/Precios.php.

   POR QUÉ CADA BLOQUE
   . Dos tarjetas y no tres: son dos productos. «Todos» lleva el borde verde.
   . Cada tarjeta se lee sola (criterio de Fer en la portada de TIENDA MX: si
     alguien le toma una imagen, que salga completa): por eso el botón va
     DENTRO, empujado al fondo, y las dos miden lo mismo aunque una lleve la
     marca «Recomendado» arriba.
   14-oct-2026: ya no son dos productos sino uno, por categoría, con «IVA
   incluido»; la tarjeta única y sus porcentajes van al final de esta hoja.
   ============================================================================ */
.precios{max-width:960px;margin:0 auto;padding:40px 20px 48px;display:flex;flex-direction:column;gap:28px;width:100%}
.precios-cab{display:flex;flex-direction:column;gap:10px}
.precios-cab h1{font-size:40px;line-height:1.1;letter-spacing:-.02em}
.precios-cab p{margin:0;font-size:18px;max-width:640px}
.planes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.plan{background:var(--papel);border:1px solid var(--linea);border-radius:16px;box-shadow:var(--sombra);padding:28px;display:flex;flex-direction:column;gap:14px}
.plan-rec{border:2px solid var(--jade)}
.plan-marca{align-self:flex-start;font:700 12px var(--cuerpo);letter-spacing:.08em;text-transform:uppercase;color:var(--sobre-jade);background:var(--jade);border-radius:999px;padding:4px 12px}
.plan h2{font-size:24px;line-height:1.2}
.plan-precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan-precio b{font:800 52px/1 var(--display);letter-spacing:-.02em;color:var(--tinta)}
.plan-precio span{font-size:15px;color:var(--suave)}
.plan ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:15px}
.plan li{padding-left:26px;position:relative}
/* La palomita se dibuja con dos bordes: el sitio no carga iconos. */
.plan li::before{content:"";position:absolute;left:4px;top:7px;width:10px;height:6px;border-left:2px solid var(--jade);border-bottom:2px solid var(--jade);transform:rotate(-45deg)}
.plan .btn{margin-top:auto}
/* «Para tu equipo, menos por persona» (14-oct-2026): DENTRO de la tarjeta de
   precios, para que una imagen de la tarjeta salga completa (criterio de
   Fer). Ya no va plegada: son cuatro renglones de porcentajes, no la tabla de
   montos del 7-oct que ocupaba media página. Las reglas del <details> de
   entonces (renglón que se pulsa, chevron, margen de lo desplegado) y las de
   la tabla de montos (deslizarse a 280 px, el «por persona» bajo cada monto,
   la nota) se quitaron con él: ya no hay nada en la página que las use. */
.equipos{background:var(--papel);border:1px solid var(--linea);border-radius:16px;padding:28px}
.equipos p{margin:0}
.equipos table{width:100%;border-collapse:collapse;font-size:15px}
.equipos th,.equipos td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--linea);vertical-align:baseline}
.equipos th{font:700 13px var(--cuerpo);letter-spacing:.04em;text-transform:uppercase;color:var(--suave)}
.equipos td b{font:800 20px var(--display);color:var(--tinta)}
.equipos tr:last-child td,.equipos tr:last-child th{border-bottom:0}
.incluye{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.incluye div{display:flex;flex-direction:column;gap:4px}
.incluye b{color:var(--tinta)}
.incluye span{font-size:15px}
.con-tmx{background:var(--banda);border:1px solid var(--banda-borde);border-radius:16px;padding:24px 28px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.con-tmx h3{font-size:20px}
.con-tmx p{margin:4px 0 0;font-size:15px;max-width:560px}
/* En el formulario y en «Recibimos tu solicitud»: lo que costaría. */
.costo{background:var(--banda);border:1px solid var(--banda-borde);border-radius:12px;padding:14px 16px;display:flex;justify-content:space-between;gap:6px 16px;align-items:baseline;flex-wrap:wrap}
.costo b{font:800 24px var(--display);color:var(--tinta)}
.costo span{font-size:14px;color:var(--suave)}
.resumen dd small{display:block;font:400 13px var(--cuerpo);color:var(--suave)}
/* La banda del catálogo lleva ahora dos botones: van juntos, en un renglón, y
   no se estiran ni se encogen (la regla «.pide div» de arriba le da todo el
   ancho al texto, y sin el «no te encojas» los botones quedaban uno sobre
   otro en escritorio: medido el 7-oct). En teléfono la banda es una columna
   y ahí sí pueden partirse en dos renglones si no caben. */
.pide .pide-botones{flex:0 0 auto;display:flex;gap:10px}
@media (max-width:640px){
  .precios{padding:28px 16px 36px;gap:22px}
  .precios-cab h1{font-size:32px}
  .planes,.incluye{grid-template-columns:minmax(0,1fr)}
  .plan,.equipos{padding:22px}
  .plan-precio b{font-size:44px}
  .pide .pide-botones{flex-wrap:wrap}
  /* La tabla de equipos CABE en un teléfono sin deslizarla (medido a 390 y a
     320 px): con el relleno de escritorio, la columna «Todos los cursos», que
     era la recomendada, quedaba cortada (7-oct). Desde el 14-oct la tabla
     tiene dos columnas; se vuelve a medir en el barrido. */
  .equipos th,.equipos td{padding:10px 4px}
}
/* En los teléfonos más angostos el menú ya tiene tres ligas: con la letra y
   el aire de siempre «Verificar una constancia» se partía en dos renglones
   (medido a 320 px el 7-oct). */
@media (max-width:360px){.cab-nav{gap:10px;font-size:13px}}

/* ============================================================================
   14-oct-2026 · PRECIO POR CATEGORÍA (decisiones de Fer; maquetas «Precios ·
   por categoría» y «Comprar o solicitar», aprobadas ese día)
   ============================================================================ */
/* /precios: UNA tarjeta a todo lo ancho (ya no son dos, «una o todos»). La
   regla va en dos renglones: el precio grande de la primera categoría, y
   abajo, más chico, «+ $100 por cada categoría más». */
.plan-ancho{grid-column:1/-1}
.plan-regla{display:flex;flex-direction:column;gap:6px}
.plan-regla .mas{font:700 20px var(--display);color:var(--tinta)}
/* Los porcentajes, dentro de la tarjeta: una caja más ligera que la tarjeta
   (sin sombra) para que se lea como parte de ella y no como otra tarjeta. */
.plan .niveles{padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.plan .niveles h3{font:700 18px var(--display);color:var(--tinta);margin:0}
.equipos th.num,.equipos td.num{text-align:right;font-variant-numeric:tabular-nums}

/* «Solicitar un código»: una casilla por categoría. Cada una es un cuadro de
   44 px o más (blanco fácil para el pulgar), y marcada se nota por el borde y
   el fondo, no solo por la palomita. Tres por renglón en escritorio; en
   teléfono, una debajo de otra. */
.cats{border:0;margin:0;padding:0;min-width:0;display:flex;flex-direction:column;gap:10px}
.cats legend{font:600 14px var(--cuerpo);color:var(--tinta);padding:0;margin-bottom:8px}
.cats-lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.cat{border:1px solid var(--borde-campo);border-radius:10px;padding:12px 14px;min-height:44px;background:var(--papel)}
.cat:has(input:checked){border:2px solid var(--jade);padding:11px 13px;background:var(--banda)}
.cat b{display:block;font-weight:700;color:var(--tinta)}
.cats-pie{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
@media (max-width:640px){.cats-lista{grid-template-columns:minmax(0,1fr)}}


/* ---------- pago en línea (16-oct-2026, F1b-1; maqueta «Comprar o solicitar» y las de
   «Pago recibido», «Esperando tu pago» y «El pago no se completó», 9 y 14-oct) ----------
   Las reglas son las de la hoja de las maquetas (maqueta3.css), pasadas aquí al construir.
   . factura: solo la casilla y un correo (Fer, 9-oct): la factura se hace FUERA del sitio.
     Va en su bloque, con línea arriba, para que se lea como parte de «Quiero factura».
   . botones-pago: pagar es la acción principal (jade); «Solo enviar solicitud» queda al lado,
     con borde, no escondida: es el camino de quien prefiere hablar antes de pagar. En teléfono
     se apilan y cada uno ocupa todo el ancho (blanco fácil para el pulgar).
   . codigo-grande: el código pagado se muestra UNA vez, grande, y se selecciona entero con un
     toque (user-select: all): tiene que poder copiarse sin errores de dedo. En teléfono baja a
     22px para que quepa en UNA línea desde 414 px; más angosto se parte, pero solo después de un
     guion (los grupos quedan enteros). Medido el 16-oct (N10). Sin «overflow-wrap»: el formato
     CUR-XXXX-XXXX-XXXX ya trae sus puntos de corte en los guiones, y quitarlo no cambió nada
     medido de 320 a 414 px (el barrido lo dejó vivo, M92).
   . pasos: números, porque el orden importa y la persona vuelve a esta página a medio camino
     (la ficha de OXXO se paga días después). */
.factura{border-top:1px solid var(--linea);padding-top:18px;display:flex;flex-direction:column;gap:14px}
.factura .ayuda{margin:0}
.botones-pago{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
@media (max-width:640px){.botones-pago .btn{flex:1 1 100%;justify-content:center}}
.metodos{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--suave);margin:0}
.metodos b{color:var(--texto);font-weight:600}
.codigo-caja{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.codigo-grande{font:700 30px var(--mono);letter-spacing:.06em;color:var(--tinta);background:var(--banda);border:1px dashed var(--banda-borde);border-radius:12px;padding:14px 20px;user-select:all}
@media (max-width:640px){.codigo-grande{font-size:22px}}
.pasos{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px}

/* ============================================================================
   17-oct-2026 · ESTADO DE TU COMPRA (decisiones de Fer del 14 y 17-oct; maqueta
   «Estado de tu compra»; el porqué de cada cuenta, en src/EstadoCompra.php)
   ============================================================================ */
/* Las tres cifras de arriba (lugares, vigencia, última actividad): en
   escritorio, una al lado de otra; en teléfono, una debajo de otra, porque
   tres de un tercio de 320 px no caben con su letra de 30 px. La caja es la de
   .costo (banda), para que se lea como un dato y no como otra tarjeta. */
.cifras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.cifras{grid-template-columns:minmax(0,1fr)}}
.cifra{background:var(--banda);border:1px solid var(--banda-borde);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.cifra b{font:800 30px/1.1 var(--display);color:var(--tinta)}
.cifra span{font-size:14px;color:var(--suave)}
/* Cada categoría es la tarjeta de .equipos (la tabla de /precios) con su
   título adentro: así una imagen de la sección sale completa, con su nombre
   (criterio de Fer). El hueco separa el título, la cuenta y la tabla. */
.estado-categoria{display:flex;flex-direction:column;gap:8px}
.estado-categoria h3{font:700 20px var(--display);color:var(--tinta);margin:0}
/* Las columnas de números miden lo que su cabecera, en UN renglón, y el resto
   es del título (medido el 17-oct a 1280 px): con el reparto automático de la
   tabla, cada tarjeta ponía sus números en otro lugar según lo largo de sus
   títulos, y en «Habilidades blandas» «LO ABRIERON» se partía en dos. Con
   width:1% la columna se encoge a su contenido y nowrap impide que ese
   contenido sea media cabecera; como la cabecera es la misma en todas, las
   tablas quedan alineadas. */
.estado-categoria th.num{white-space:nowrap;width:1%}
/* En teléfono cada curso es un renglón de dos pisos: el título arriba, a todo lo
   ancho, y abajo sus dos números con su leyenda («2 lo abrieron · 1 lo
   aprobaron»). Medido el 17-oct: a 320 px la tabla de tres columnas no cabía
   (Habilidades blandas pedía 300 px en 246: «Retroalimentación» y las dos
   cabeceras en mayúsculas no se pueden partir), y una tabla que se desliza en
   su caja no sale completa en una imagen. La cabecera se esconde porque cada
   número ya trae su leyenda; la línea entre cursos pasa del renglón de cada
   celda al del curso, para que no quede una raya bajo el título y otra bajo
   los números. */
@media (max-width:480px){
  .estado-categoria thead{display:none}
  .estado-categoria tr{display:flex;flex-wrap:wrap;column-gap:14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--linea)}
  .estado-categoria tr:last-child{border-bottom:0}
  .estado-categoria td{border:0;padding:0}
  .estado-categoria td:first-child{flex-basis:100%}
  .estado-categoria td.num::after{content:" " attr(data-etiqueta);font-size:14px;color:var(--suave)}
}