/* ============================================================
   AURORA — diseño público de pdf-manual.es
   Soft gradients, airy, friendly SaaS. Tokens first, then components.
   Self-contained: NO Bulma, NO Font Awesome, NO framework, NO JS.
   Se carga SOLO en las vistas que declaran @section('aurora')
   (pages/index, pages/category) desde pages/layout.blade.php, siempre
   con ?v={{ config('app.css_version') }}. Las demás páginas siguen con
   Bulma + layout.css, sin cambios.
   ============================================================ */
:root{
  --bg:#f6f7fb; --surface:#fff; --ink:#0e1220; --ink-2:#2b3245; --muted:#5b6478;
  --line:#e8ebf3; --line-2:#dfe4f0;
  --primary:#4f46e5; --primary-600:#4338ca; --primary-50:#eef2ff;
  --accent:#06b6d4; --good:#10b981;
  --grad:linear-gradient(135deg,#4f46e5 0%,#7c3aed 45%,#06b6d4 100%);
  --r-lg:22px; --r-md:16px; --r-sm:11px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(16,24,40,.05), 0 8px 24px -12px rgba(16,24,40,.14);
  --shadow-2:0 24px 60px -28px rgba(24,32,64,.35);
  --wrap:1180px;
  --step--2:clamp(.74rem,.72rem + .1vw,.8rem);   /* micro: rótulos en mayúsculas y píldoras */
  --step--1:clamp(.9rem,.88rem + .1vw,.95rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.06rem);
  --step-1:clamp(1.08rem,1rem + .45vw,1.2rem);
  --step-2:clamp(1.24rem,1.1rem + .7vw,1.5rem);
  --step-3:clamp(1.45rem,1.2rem + 1vw,2rem);
  --step-4:clamp(1.9rem,1.4rem + 2vw,2.9rem);
  --step-5:clamp(2.6rem,1.6rem + 2.8vw,4rem);    /* única pieza mayor que el h1: cifra de error */
}
/* ---------- Tipografía propia (2026-10-13) ----------
   Plus Jakarta Sans es una fuente VARIABLE: un solo woff2 de 27 KB cubre los pesos 400-800 (los cinco
   ficheros que devuelve Google son el mismo, comprobado con md5). Antes se pedía a fonts.googleapis.com:
   una hoja que BLOQUEA el render, dos orígenes nuevos de DNS+TLS y ~49 KB de fuentes que llegaban a los
   1,7 s; al cambiar las métricas del texto, la portada se movía (CLS 0,21 medido con Chromium a 390 px,
   Slow 4G y CPU x4). Autoalojada y precargada desde el <head>, llega a la vez que el CSS. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url('/fonts/pjs/pjs-var.woff2?v=1') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font:400 var(--step-0)/1.65 "Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--ink); margin:0; line-height:1.18; letter-spacing:-.02em; font-weight:700}
/* Una sola escala en todo el sitio: título de página --step-3 (40 px), sección --step-2 (28),
   subtítulo --step-1 (21), rótulo --step-0 (17). Sólo la portada sube su h1 a --step-4 (62 px)
   porque es un hero; las páginas interiores llevan un h1 de 62 px desproporcionado (el título de
   un curso ocupaba 215 px de alto y "Contáctenos" se veía como un cartel).
   TODA la tipografía sale de estos tokens: se han eliminado los tamaños sueltos que había
   (12,5 px en las píldoras .tag/.meta .lbl, 13,6 px en el número de .step, 16 px y 16,96 px en los
   títulos de fila, 1,16 rem en el logo, 3 rem del contador, el clamp del 404). Ahora --step--2 es el
   suelo para micro-rótulos y --step-5 la única pieza por encima del h1. */
h1{font-size:var(--step-3)} h2{font-size:var(--step-2)} h3{font-size:var(--step-1)} h4{font-size:var(--step-0)}
.hero h1{font-size:var(--step-4)}
p{margin:0}
a{color:var(--primary-600); text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block; max-width:100%}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:3px solid #7c3aed; outline-offset:2px; border-radius:6px}
.skip{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; background:#fff; z-index:100}
.skip:focus{position:fixed; left:1rem; top:1rem; width:auto; height:auto; clip:auto; padding:.7rem 1rem; border-radius:12px; box-shadow:var(--shadow-2)}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(1rem,4vw,2rem)}
.eyebrow{font-size:var(--step--1); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary)}
.muted{color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; gap:.5rem; min-height:46px; padding:.65rem 1.15rem;
  border-radius:var(--r-pill); border:1px solid transparent; font-weight:700; font-size:var(--step-0);
  background:var(--primary); color:#fff; cursor:pointer; transition:.18s ease; white-space:nowrap;
}
.btn:hover{background:var(--primary-600); text-decoration:none; transform:translateY(-1px)}
.btn--ghost{background:#fff; color:var(--ink); border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--primary); color:var(--primary-600)}
.btn--onGrad{background:#fff; color:var(--primary-600)}
.btn--sm{min-height:40px; padding:.4rem .85rem; font-size:var(--step--1)}
/* (La banda oscura de cifras «.ticker» se retiró el 2026-10-12 a petición del usuario: era la
   «parte de arriba en negro». Sus cifras siguen en la portada (bloque .stats) y en el pie.) */
header.site{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.bar{display:flex; align-items:center; gap:1rem; min-height:70px; position:relative}
.bar > .btn{min-height:46px; padding-inline:.95rem}
.logo{display:flex; align-items:center; gap:.7rem; font-weight:800; font-size:var(--step-1); color:var(--ink); letter-spacing:-.03em}
.logo:hover{text-decoration:none}
.logo .mark{width:34px;height:34px;border-radius:10px;background:var(--grad); display:grid; place-items:center; color:#fff}
.logo b{color:var(--primary)}
.nav{display:flex; align-items:center; gap:.2rem; margin-left:auto; min-width:0}
.nav a{padding:.55rem .7rem; border-radius:var(--r-sm); color:var(--ink); font-weight:600; white-space:nowrap; min-height:46px; display:inline-flex; align-items:center}
.nav a:hover{background:#f1f3fa; text-decoration:none}
.nav .has-menu{position:static}
.nav .menu-btn{display:inline-flex; align-items:center; gap:.4rem; background:none; border:0; font:inherit; font-weight:600; color:var(--ink); padding:.6rem .8rem; border-radius:var(--r-sm); cursor:pointer}
.menu-panel{
  /* anchored to the header bar (not to the trigger): centres itself and can never
     push the document wider than the viewport — the trigger-anchored version overflowed at 1024px */
  position:absolute; top:calc(100% - 6px); left:0; right:0; margin-inline:auto;
  /* 52 rem en lugar de 46: con las columnas ya corregidas (ver .cols) el nombre de categoría más
     largo («Microsoft Office y Productividad») necesita ~287 px y no cabía en 46 rem. */
  width:min(52rem,calc(100% - 2rem)); background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); padding:.6rem; opacity:0; visibility:hidden; transition:.16s ease;
}
.has-menu:hover .menu-panel,.has-menu:focus-within .menu-panel{opacity:1; visibility:visible}
/* minmax(0,1fr) y NO 1fr: una pista «1fr» no baja de su min-content, y el min-content de una fila es
   el nombre entero (white-space:nowrap). Medido con pm-panelprobe.js: las columnas salían de 379 y
   366 px dentro de un panel de 736 px, así que desbordaban por la derecha y los contadores quedaban
   pegados al borde y desalineados. Con minmax(0,1fr) cada columna mide la mitad exacta y el nombre
   se recorta con puntos suspensivos sólo si de verdad no cabe. */
.menu-panel .cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.15rem}
.menu-panel a{display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem; border-radius:12px}
.menu-panel a:hover{background:#f4f6fd; text-decoration:none}
.menu-panel .ic{width:34px;height:34px;border-radius:10px; display:grid; place-items:center; font-size:1.05rem; flex:0 0 auto}
.menu-panel .nm{font-weight:600; color:var(--ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* Los contadores con el mismo ancho y centrados: así la columna de números queda recta (con el ancho
   del texto, «1» y «23» bailaban de alineación, que es justo lo que señaló el usuario). */
.menu-panel .ct{font-size:var(--step--1); font-weight:700; color:var(--muted); background:#f1f3fa; border-radius:var(--r-pill); padding:.1rem .5rem; min-width:2.4rem; text-align:center; flex:0 0 auto}
/* 12.ª celda de la rejilla (11 categorías + 1 atajo): el panel queda lleno, sin hueco. No es una
   categoría, así que no lleva contador: lleva flecha. */
.menu-panel a.catpromo{background:var(--primary-50); border:1px solid #dfe1ff}
.menu-panel a.catpromo:hover{background:#e6eaff}
.menu-panel a.catpromo .ic{background:#fff; color:var(--primary)}
.menu-panel a.catpromo .nm{color:var(--primary-600)}
.menu-panel .go{color:var(--primary-600); font-weight:800; flex:0 0 auto}
.search{margin-left:.4rem; position:relative; min-width:0; flex:0 1 auto}
.search input{
  width:clamp(9.5rem,13vw,13rem); min-height:46px; padding:.5rem .9rem .5rem 2.6rem; font:inherit;
  border:1px solid var(--line-2); border-radius:var(--r-pill); background:#fbfcfe; color:var(--ink); transition:.18s ease;
}
.search input::placeholder{color:#8b93a7}
.search input:focus{background:#fff; border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50); outline:none}
.search svg{position:absolute; left:.95rem; top:50%; transform:translateY(-50%); color:#8b93a7}
.burger{display:none; background:none; border:1px solid var(--line-2); border-radius:var(--r-sm); min-width:44px; min-height:44px; align-items:center; justify-content:center; cursor:pointer}
.hero{position:relative; overflow:hidden; padding-block:clamp(1.5rem,3.5vw,2.2rem) clamp(1.4rem,3vw,2rem)}
.hero::before{content:""; position:absolute; inset:-40% 30% 40% -10%; background:var(--grad); filter:blur(90px); opacity:.16; z-index:-1}
.hero .grid{display:grid; gap:clamp(1.5rem,4vw,3rem); grid-template-columns:1.15fr .85fr; align-items:center}
.badge-row{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem}
.chip{display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .8rem; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-2); font-size:var(--step-0); font-weight:600; color:var(--ink-2)}
.chip--soft{background:var(--primary-50); border-color:#dfe1ff; color:var(--primary-600)}
.hero h1 span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .lede{font-size:var(--step-1); color:var(--muted); margin-top:1rem; max-width:56ch}
.hero-search{display:flex; gap:.6rem; margin-top:1.6rem; max-width:640px}
.hero-search .field{position:relative; flex:1}
.hero-search input{width:100%; min-height:58px; padding:0 1rem 0 3rem; font:inherit; font-size:var(--step-1); border:1px solid var(--line-2); border-radius:var(--r-md); background:#fff; box-shadow:var(--shadow-1)}
.hero-search input:focus{border-color:var(--primary); box-shadow:0 0 0 5px var(--primary-50); outline:none}
.hero-search svg{position:absolute; left:1.05rem; top:50%; transform:translateY(-50%); color:#8b93a7}
.hero-search .btn{min-height:58px; border-radius:var(--r-md); padding-inline:1.6rem}
.suggest{margin-top:.9rem; display:flex; flex-wrap:wrap; gap:.45rem; align-items:center; font-size:var(--step--1)}
.suggest a{padding:.25rem .65rem; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-2); color:var(--ink-2); font-weight:600}
.suggest a:hover{border-color:var(--primary); color:var(--primary-600); text-decoration:none}
.hero-card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:1.15rem; display:grid; gap:.9rem}
.hero-card h3{font-size:var(--step-1)}
/* Tarjeta «Lo más descargado» (portada + título + datos en UNA fila). El <a> exterior envuelve toda
   la tarjeta, así que la portada es un <span> con clase .cover: un <a> dentro de otro <a> es HTML
   inválido y el navegador cerraba el exterior al llegar al interior, dejando el texto fuera de la
   fila flex (portada y texto desalineados). */
.doc{display:flex; gap:.9rem; align-items:center; padding:.3rem .35rem; border-radius:14px; transition:.18s ease}
.doc:hover{background:#fbfcff; text-decoration:none}
.doc:hover .t{color:var(--primary-600)}
/* La miniatura guarda la proporción real de la página (480×679) en vez de los 56×74 de los listados:
   con la caja antigua `object-fit:cover` recortaba el 6 % inferior (donde va el pie de portada). */
.doc .cover{width:56px; height:auto; aspect-ratio:480/679}
.doc-body{display:block; min-width:0}
.cover{width:56px; height:74px; border-radius:9px; flex:0 0 auto; overflow:hidden; background:var(--grad); box-shadow:0 6px 14px -8px rgba(24,32,64,.5); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.2rem; text-align:center; padding:.35rem .25rem}
.cover b{font-size:var(--step--2); font-weight:800; color:#fff; line-height:1.1; text-shadow:0 1px 3px rgba(0,0,0,.4); overflow-wrap:anywhere}
.cover::after{content:"PDF"; font-size:var(--step--2); font-weight:800; letter-spacing:.16em; color:rgba(255,255,255,.9)}
/* Miniatura = PORTADA REAL del PDF (primera página recortada en /covers). Sustituye al emoji que
   hacía de icono en los listados: el documento se reconoce por su propia portada. */
.cover--img{background:#fff; border:1px solid var(--line-2); padding:0; display:block}
.cover--img::after{content:none}
.cover--img img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block}
a.cover{transition:.18s ease}
a.cover:hover{transform:translateY(-2px); box-shadow:var(--shadow-1)}
.doc .t{font-weight:700; color:var(--ink); font-size:var(--step-0); line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .18s ease}
.doc .m{font-size:var(--step--1); color:var(--muted); display:flex; gap:.3rem .8rem; flex-wrap:wrap; margin-top:.3rem}
.pill{display:inline-flex; align-items:center; gap:.3rem; font-weight:700; color:var(--good)}
.stats{margin-top:clamp(2rem,5vw,3.2rem)}
.stats .card{background:var(--ink); color:#c9d0e4; border-radius:var(--r-lg); padding:1.3rem clamp(1rem,3vw,2rem); display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; box-shadow:var(--shadow-2)}
.stats .n{font-size:var(--step-2); font-weight:800; color:#fff; letter-spacing:-.02em}
.stats .l{font-size:var(--step--1); color:#9aa3bd}
section.blk{padding-block:clamp(1.8rem,4vw,2.8rem)}
.blk-head{display:flex; align-items:end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem}
.blk-head p{color:var(--muted); margin-top:.4rem; max-width:60ch}
.cats{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem}
.cat{display:flex; flex-direction:column; gap:.7rem; padding:1.05rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); transition:.18s ease}
.cat:hover{transform:translateY(-3px); box-shadow:var(--shadow-1); border-color:#d9def0; text-decoration:none}
.cat .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem}
.cat .nm{font-weight:700; color:var(--ink); line-height:1.25}
.cat .ct{font-size:var(--step--1); color:var(--muted)}
.list{display:grid; gap:.7rem}
.row{display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1rem 1.15rem; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); transition:.18s ease}
.row:hover{border-color:#d9def0; box-shadow:var(--shadow-1)}
.row .t{font-weight:700; color:var(--ink); font-size:var(--step-0); line-height:1.3; display:block; padding-block:.15rem}
.row .t:hover{color:var(--primary-600); text-decoration:none}
.row .m{display:flex; gap:.4rem .9rem; flex-wrap:wrap; font-size:var(--step--1); color:var(--muted); margin-top:.35rem}
.tag{display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:var(--r-pill); background:var(--primary-50); color:var(--primary-600); font-size:var(--step--2); font-weight:700}
.feat{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.f{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:1.3rem}
.f .ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.3rem;margin-bottom:.85rem;background:var(--primary-50);color:var(--primary)}
.f h3{font-size:var(--step-0); margin-bottom:.4rem}
.f p{color:var(--muted); font-size:var(--step-0)}
.guides{background:var(--ink); border-radius:var(--r-lg); padding:clamp(1.5rem,4vw,2.6rem); color:#c9d0e4}
.guides h2{color:#fff}
.guides p{color:#a8b0c8; margin-top:.6rem}
.gcards{display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin-top:1.4rem}
.gcard{display:block; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--r-md); padding:1.15rem; transition:.18s ease}
.gcard:hover{background:rgba(255,255,255,.12); text-decoration:none; transform:translateY(-2px)}
.gcard b{color:#fff; display:block; font-size:var(--step-1); line-height:1.3}
.gcard span{font-size:var(--step--1); color:#9aa3bd; display:block; margin-top:.35rem}
footer.site{background:#fff; border-top:1px solid var(--line); margin-top:clamp(1.6rem,4vw,2.8rem)}
/* Bloque de marca a todo lo ancho. Antes era la 1ª de 5 columnas: medido, dejaba 268 px vacíos
   y las columnas cortas 344 px, con una fila de 518 px (lo cazó pm-deep.js). */
footer .fbrand{display:flex; align-items:center; gap:.9rem 1.4rem; flex-wrap:wrap; padding-block:clamp(1.4rem,3vw,2rem) 0}
footer .fbrand p{color:var(--muted); font-size:var(--step-0); margin:0; max-width:78ch}
footer .cols{display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; padding-block:clamp(1.2rem,2.5vw,1.6rem)}
/* Las pistas de la rejilla deben poder encogerse: con `white-space:nowrap` el ancho mínimo de un
   enlace es el texto entero, así que sin `min-width:0` el pie empujaba la PÁGINA a 633 px en un
   móvil de 390 (lo cazó pm-deep.js). */
footer .cols > *{min-width:0}
/* Jerarquía del pie: los rótulos de columna deben PESAR MÁS que los enlaces. Antes eran más
   pequeños (14,4 px, gris) que los propios enlaces (17 px), así que el pie se leía como una
   lista plana (lo señaló el análisis visual en 28 de 54 capturas). */
footer h4{font-size:var(--step--1); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2); font-weight:700; margin-bottom:.7rem}
footer li{margin-bottom:.1rem}
/* Todas las columnas del pie con el mismo número de filas (4) y una sola línea por enlace: así el
   pie mide ~170 px y ninguna columna queda medio vacía. Antes, con los títulos reales de los
   documentos (2-3 líneas) y 10 filas, la fila medía 518 px y dejaba 268/103/344/344 px de hueco.
   El texto completo sigue disponible en el atributo title de cada enlace. */
footer li a{display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* El pie conserva 1 rem (= suelo de --step-0) en los enlaces de columna: con el tope del token
   (1,06 rem = 16,96 px) el enlace más largo, «Microsoft Office y Productividad», se recortaba 9 px
   con puntos suspensivos en una columna de 255 px (medido con pm-footercheck.js). El resto de
   tamaños del pie (rótulos h4, línea legal) sí van con los tokens. */
footer a{color:var(--ink-2); font-weight:500; font-size:1rem; padding-block:.22rem; display:block}
footer a:hover{color:var(--primary-600)}
footer .bottom{border-top:1px solid var(--line); padding-block:.9rem; display:flex; justify-content:space-between; gap:.4rem 1.2rem; flex-wrap:wrap; font-size:var(--step-0); color:var(--muted)}
footer .bottom span{max-width:78ch}
.drawer{position:fixed; inset:0; z-index:80; background:rgba(12,16,30,.5); backdrop-filter:blur(3px); display:none; opacity:0; transition:.2s ease}
.drawer .panel{position:absolute; right:0; top:0; bottom:0; width:min(88vw,360px); background:#fff; padding:1.2rem; overflow:auto; transform:translateX(100%); transition:.24s ease}
#nav:checked ~ .drawer{display:block; opacity:1}
#nav:checked ~ .drawer .panel{transform:none}
.drawer .close{background:none;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:.45rem .7rem;cursor:pointer;font:inherit}
.drawer nav a{display:block; padding:.75rem .6rem; border-radius:12px; font-weight:600; color:var(--ink)}
.drawer nav a:hover{background:#f4f6fd; text-decoration:none}
/* Menú móvil · categorías: emoji + nombre + contador en LA MISMA línea y el contador alineado a la
   derecha. Antes el «(23)» caía a la línea siguiente y los números quedaban desalineados. */
.drawer nav.catlist a{display:flex; align-items:center; gap:.6rem}
.drawer nav.catlist .ic{flex:0 0 auto; width:1.4rem; text-align:center}
.drawer nav.catlist .nm{flex:1; min-width:0}
.drawer nav.catlist .ct{flex:0 0 auto; font-size:var(--step--1); font-weight:700; color:var(--muted)}
.drawer h4{margin:1.2rem 0 .5rem}
/* La cabecera Aurora (logo + 5 enlaces + buscador + CTA) no cabe en el ancho útil por debajo de
   1400 px: el CTA de cabecera se oculta antes y queda el del hero / el del menú móvil. Con la
   escala tipográfica actual, mostrarlo a 1200-1399 px empujaba el documento 12 px fuera del viewport. */
@media (max-width:1399px){
  .bar > .btn{display:none}
}
@media (max-width:1199px){
  .nav a.opt{display:none}    /* enlaces secundarios: siguen accesibles desde el hero y el menú móvil */
}
@media (max-width:1023px){
  .nav a,.nav .has-menu{display:none}
  .search input{width:min(42vw,14rem)}
  .cats{grid-template-columns:repeat(3,1fr)}
  .feat{grid-template-columns:1fr 1fr}
  footer .cols{grid-template-columns:1fr 1fr; gap:1.5rem 1.3rem}
}
@media (max-width:719px){
  .search{display:none}
  .burger{display:inline-flex}
  .bar > .btn{display:none}          /* el CTA vive en el menú desplegable en móvil */
  .hero .grid{grid-template-columns:1fr}
  .stats .card{grid-template-columns:1fr 1fr}
  .cats{grid-template-columns:1fr 1fr}
  .feat,.gcards{grid-template-columns:1fr}
  .row{grid-template-columns:auto 1fr; row-gap:.6rem}
  .row .cta{grid-column:1 / -1}
  .row .cta .btn{width:100%; justify-content:center}
  .hero-search{flex-direction:column}
  .hero-search .btn{width:100%; justify-content:center}
  /* Aquí vivían los ajustes de la banda «.ticker» en móvil; la banda se retiró el 2026-10-12. */
  /* Áreas táctiles en móvil: ningún enlace de lista ni de pie por debajo de ~30 px de alto.
     WCAG 2.5.8 pide 24×24 px como mínimo; los títulos de las listas medían 19-27 px y los enlaces
     del pie 22 px. Se agranda el área pulsable sin cambiar el tamaño del texto. */
  .list .row a.t{display:block; padding-block:.35rem}
  footer li a, footer .bottom a{display:inline-block; padding-block:.3rem}
  .crumbs a{padding-block:.25rem}
  .suggest a{padding:.45rem .8rem}
  .chip{padding:.45rem .8rem}
  .btn--sm{min-height:44px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ============================================================
   Producción — piezas que el mockup no necesitaba
   (en el mockup todas las etiquetas eran visibles; aquí hay
   labels reales, cubiertas con emoji, migas, guía y paginación)
   ============================================================ */

/* Texto sólo para lectores de pantalla (labels, checkbox del menú).
   El mockup usaba .sr sin definirla; aquí sí está definida. */
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* Los documentos reales no traen cubierta legible a 56px: la portada CSS
   lleva el emoji de la categoría en lugar de una palabra. */
.cover--emoji b{font-size:1.55rem; text-shadow:none; overflow-wrap:normal}

/* Anclas internas (#cats, #top, #rutas): que el header sticky no las tape */
main [id]{scroll-margin-top:5.5rem}

/* Migas de pan (categorías) */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:var(--step--1); color:var(--muted); margin-bottom:1rem}
.crumbs a{color:var(--muted); font-weight:600}
.crumbs a:hover{color:var(--primary-600); text-decoration:none}
.crumbs .sep{color:#c3c9db}

/* Cabecera de categoría */
.cat-hero{position:relative; overflow:hidden; padding-block:clamp(1.3rem,3vw,2rem) clamp(.8rem,2vw,1.2rem)}
.cat-hero::before{content:""; position:absolute; inset:-60% 40% 40% -10%; background:var(--grad); filter:blur(90px); opacity:.13; z-index:-1}
.cat-hero .lede{font-size:var(--step-1); color:var(--muted); margin-top:.9rem; max-width:70ch}
.cat-hero .card-cta{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.4rem}
.cat-facts{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.2rem}

/* Guía editorial de la categoría (categoría.fulldesc) */
.prose p{margin-top:.8rem; color:var(--ink-2); max-width:80ch}
.guide{background:#fff; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:var(--r-md); padding:clamp(1.2rem,3vw,1.8rem); box-shadow:var(--shadow-1)}
.guide h2{font-size:var(--step-2)}
.guide h3{font-size:var(--step-1); margin-top:1.4rem}

/* Bloque "Por dónde empezar": filas con número */
.steps{display:grid; gap:.7rem; margin-top:.9rem}
.step{display:grid; grid-template-columns:auto 1fr auto; gap:.9rem; align-items:center; background:#fbfcff; border:1px solid var(--line); border-radius:var(--r-md); padding:.75rem .9rem}
.step .n{width:30px; height:30px; border-radius:50%; background:var(--primary-50); color:var(--primary-600); display:grid; place-items:center; font-weight:800; font-size:var(--step--2)}
.step .t{font-weight:700; color:var(--ink)}
.step .m{font-size:var(--step--1); color:var(--muted)}

/* Paginación de las listas largas (las categorías paginan a 25) */
.pager{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.35rem; margin-top:clamp(1.6rem,4vw,2.4rem)}
.pager a,.pager .cur,.pager .off{min-width:42px; min-height:42px; padding:.4rem .6rem; border-radius:12px; border:1px solid var(--line-2); background:#fff; color:var(--ink); font-weight:700; display:inline-flex; align-items:center; justify-content:center}
.pager a:hover{border-color:var(--primary); color:var(--primary-600); text-decoration:none}
.pager .cur{background:var(--primary); border-color:var(--primary); color:#fff}
.pager .off{color:#c3c9db}
.pager .info{width:100%; text-align:center; color:var(--muted); font-size:var(--step--1); margin-top:.6rem}

/* Lista de cursos de una categoría: datos reales por ficha */
.row .m .pill{color:var(--good)}
.row .m .size{color:var(--muted)}
.row .t{display:block}

/* Las rejillas de contenido nunca deben ensanchar la página: títulos o descripciones con
   palabras larguísimas (nombres de archivo en los títulos reales) rompen la palabra en vez
   de empujar la columna y crear scroll horizontal en móvil. */
.cats,.list,.steps,.feat,.blk-head{min-width:0}
.row>div,.step>span,.cat,.f,.doc{min-width:0}
.row .t,.row p,.step .t,.cat .nm,.doc .t{overflow-wrap:anywhere}

/* En pantallas estrechas, la fila se apila y la cubierta reduce un poco */
@media (max-width:719px){
  .cat-hero{padding-block:1.6rem 1rem}
  .step{grid-template-columns:auto 1fr; row-gap:.3rem}
  .step .m{grid-column:1 / -1}
  .guide{padding:1rem}
}

/* ============================================================
   Páginas interiores — curso, buscador, legales, contacto y errores
   Reutiliza las variables y los componentes de arriba. Nada de esta
   sección se aplica a la portada ni a las categorías (no usan estas
   clases), así que su aspecto no cambia.
   ============================================================ */

/* Tarjeta de contenido (sustituye al .box de Bulma) y pila de tarjetas.
   El padding lateral es mayor que el vertical: da aire al texto y mantiene el ancho de línea en
   ~80 caracteres dentro de tarjetas de 1116 px (sin recortar el contenido). */
.panel{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.2rem,3vw,2rem) clamp(1.25rem,4vw,3.25rem); box-shadow:var(--shadow-1)}
.panel--soft{background:var(--primary-50); border-color:#dfe1ff}
.stack{display:grid; gap:1.2rem}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
/* Ninguna rejilla interior debe poder ensanchar la página: los hijos llevan min-width:0 y las
   tablas se desplazan en horizontal dentro de su tarjeta (mismo criterio que .cats/.list arriba). */
.stack > *,.grid-2 > *{min-width:0}
.tbl{overflow-x:auto; -webkit-overflow-scrolling:touch}
.prose td,.prose th{overflow-wrap:break-word}

/* Texto largo: fichas de curso, guías y páginas legales.
   SIN max-width a propósito: el texto llena su tarjeta, de modo que el hero, las tarjetas y las
   rejillas comparten el mismo ancho. Antes .prose se quedaba en 80ch (960 px) dentro de tarjetas de
   1116 px, así que /about y /license tenían cuatro bordes derechos distintos (960 / 1050 / 1116),
   que es lo que hacía que "unas cajas pareciesen grandes y otras más grandes". El ancho de línea
   se controla con el padding lateral de .panel, no recortando el texto dentro de la tarjeta. */
.prose{color:var(--ink-2)}
.prose > :first-child{margin-top:0}
.prose h2{font-size:var(--step-2); margin-top:1.8rem}
.prose h3{font-size:var(--step-1); margin-top:1.4rem}
.prose h4{font-size:var(--step-0); margin-top:1.1rem}
.prose p{margin-top:.85rem}
.prose ul,.prose ol{margin:.85rem 0 0 1.3rem; display:grid; gap:.45rem}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li{color:var(--ink-2)}
.prose li::marker{color:var(--primary)}
.prose strong{color:var(--ink)}
.prose em{font-style:italic}
.prose a{text-decoration:underline; text-underline-offset:2px}
.prose blockquote{margin:1.2rem 0 0; padding:.6rem 0 .6rem 1rem; border-left:4px solid var(--primary); color:var(--muted)}
.prose table{width:100%; border-collapse:collapse; margin-top:1rem; font-size:var(--step-0)}
.prose th,.prose td{border:1px solid var(--line-2); padding:.6rem .7rem; text-align:left}
.prose th{background:#f5f7fd; color:var(--ink); font-weight:700}
.prose pre{background:var(--ink); color:#e6e9f5; border-radius:var(--r-sm); padding:1rem; overflow:auto; margin-top:1rem; font-size:var(--step--1); white-space:pre-wrap; overflow-wrap:anywhere}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; overflow-wrap:anywhere}
.prose img{border-radius:var(--r-sm); max-width:100%; height:auto}
.prose hr{border:0; border-top:1px solid var(--line); margin:1.6rem 0}

/* Ficha del curso: cabecera con cubierta + datos + botón de descarga */
.course-head{display:grid; grid-template-columns:1fr auto; gap:clamp(1.2rem,4vw,2.4rem); align-items:stretch}
.course-head .cover-hero{float:none; width:min(250px,34vw); margin:0; align-self:stretch; aspect-ratio:480/679}
/* La cubierta real es una página en retrato (480×679): se estira a la altura del bloque de texto y
   recorta por arriba, en vez de quedar más alta que el texto y dejar huecos (lo señaló el análisis
   visual: "el bloque de la imagen es mucho más alto que el bloque de texto adyacente"). */
.course-head .cover-hero img{height:100%; object-fit:cover; object-position:top}
.cover-hero{border-radius:var(--r-md); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-1)}
.cover-hero img{width:100%; height:auto; display:block}
.metas{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; margin-top:1.6rem}
.meta{display:flex; align-items:center; gap:.75rem; background:#fbfcff; border:1px solid var(--line); border-radius:var(--r-md); padding:.85rem .95rem}
.meta .ic{width:44px; height:44px; border-radius:12px; background:var(--primary-50); color:var(--primary); display:grid; place-items:center; font-size:1.15rem; flex:0 0 auto}
.meta .lbl{font-size:var(--step--2); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--muted)}
.meta .val{font-weight:700; color:var(--ink); overflow-wrap:anywhere}

/* Índice del documento (courses.table_of_contents) */
.toc{background:#fff; border:1px solid var(--line); border-radius:var(--r-md); padding:1.1rem 1.3rem; margin-bottom:1.6rem}
.toc .hd{display:flex; align-items:center; gap:.5rem; font-weight:800; color:var(--ink); border-bottom:2px solid var(--primary); padding-bottom:.5rem; margin-bottom:.8rem}
.toc ol,.toc ul{margin-left:1.3rem; display:grid; gap:.35rem}
.toc ol{list-style:decimal}
.toc li{color:var(--ink-2)}
.toc li::marker{color:var(--primary); font-weight:700}

/* Panel de formulario: se ajusta al ancho del formulario en vez de ocupar toda la columna.
   Con el panel a 1116 px y el formulario a 660 px quedaban 391 px muertos dentro de la tarjeta
   (el análisis visual lo señaló en /contactanos). */
.panel--form{max-width:820px; margin-inline:auto}
/* Formulario de contacto (y cualquier otro formulario público). */
.form{display:grid; gap:1.05rem}
.form .field{display:grid; gap:.35rem}
.form label{font-weight:700; color:var(--ink); font-size:var(--step--1)}
.form input,.form textarea{width:100%; min-height:48px; padding:.65rem .9rem; font:inherit; color:var(--ink); background:#fff; border:1px solid var(--line-2); border-radius:var(--r-sm)}
.form textarea{min-height:190px; resize:vertical}
.form input:focus,.form textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px var(--primary-50); outline:none}
.form .actions{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
/* Casilla + etiqueta en la misma línea (login). El input hereda de .form un ancho del 100 %. */
.form .remember{display:flex; align-items:center; gap:.6rem}
.form .remember input{width:auto; min-height:auto; margin:0; accent-color:var(--primary)}
.form .remember label{font-size:var(--step-0); font-weight:600; color:var(--ink-2)}
.alert{border-radius:var(--r-md); padding:.9rem 1.1rem; border:1px solid var(--line-2); background:#fff; font-weight:600; max-width:820px; margin-inline:auto}
.alert--ok{background:#ecfdf5; border-color:#a7f3d0; color:#065f46}
.alert--err{background:#fef2f2; border-color:#fecaca; color:#b91c1c}
.help-err{color:#b91c1c; font-size:var(--step--1); font-weight:600}

/* Páginas de error (404, 403, 500…) */
.err-code{font-size:var(--step-5); font-weight:800; line-height:1; letter-spacing:-.04em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent}

/* Contador de la página intermedia de descarga */
.timer{display:grid; place-items:center; gap:1rem; text-align:center}
.timer .circle{position:relative; width:220px; height:220px}
.timer .clock{position:absolute; inset:0; display:grid; place-items:center; font-size:var(--step-4); font-weight:700; color:var(--primary); text-align:center}

@media (max-width:719px){
  .grid-2{grid-template-columns:1fr}
  .metas{grid-template-columns:1fr 1fr}
  .course-head{grid-template-columns:1fr}
  /* La cubierta (retrato, proporción de una página A4) medía 228×323 px al final del hero y lo
     alargaba hasta 1031 px en un móvil de 844 px de alto. A 150 px sigue siendo una miniatura
     legible del documento y el hero vuelve a caber en una pantalla. */
  /* aspect-ratio reserva el hueco de la cubierta (retrato 480x679) ANTES de que la imagen llegue:
     sin él la caja medía 0 px y al cargar crecía 212 px, arrastrando la ficha entera (CLS 0,14). */
  .course-head .cover-hero{width:min(150px,44vw); margin-inline:auto; align-self:start; aspect-ratio:480/679}
  .course-head .cover-hero img{height:auto}
  .toc{padding:1rem}
  /* Tablas de las páginas legales: caben a lo ancho en el móvil sin scroll interno */
  .prose th,.prose td{padding:.45rem .5rem; font-size:var(--step--1)}
}

/* ============================================================
   COMPARTIR EN REDES — fila compacta junto al botón de descarga
   (pages/course). Sin JavaScript de terceros: son enlaces directos;
   el único JS es el copiado del enlace al portapapeles, que degrada a
   un enlace normal si no está disponible.
   ============================================================ */
.share{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:1.05rem}
.share-lbl{
  font-size:var(--step--2); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin-right:.15rem;
}
.share-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  width:42px; height:42px; padding:0; border-radius:var(--r-pill);
  background:#fff; border:1px solid var(--line-2); color:var(--ink-2);
  box-shadow:var(--shadow-1); cursor:pointer;
  transition:transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.share-btn svg{width:19px; height:19px; fill:currentColor}
.share-btn:hover{transform:translateY(-2px); border-color:currentColor; text-decoration:none}
.share-btn:focus-visible{outline:3px solid #7c3aed; outline-offset:2px}
.share-btn.wa:hover{color:#25d366} .share-btn.fb:hover{color:#1877f2}
.share-btn.tw:hover{color:#0f1419} .share-btn.li:hover{color:#0a66c2}
.share-btn.tg:hover{color:#229ed9} .share-btn.ml:hover{color:#6b7280}
.share-btn.cp:hover{color:var(--primary-600)}
.share-ok{font-size:var(--step--1); font-weight:600; color:var(--good)}
@media (max-width:520px){
  .share{gap:.4rem}
  .share-btn{width:40px; height:40px}
}