/* ============================================================
   Cavesea — sistema visual único
   Papel #f5f4ef, tinta #12120f, Inter, filete de 1 px.
   Sirve a la portada, al programa, a los fundamentos y a los
   dos másteres: una sola hoja para todo el sitio.
   ============================================================ */

@font-face{font-family:Inter;src:url('fuentes/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('fuentes/inter-latin-700-normal.woff2') format('woff2');font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('fuentes/inter-latin-900-normal.woff2') format('woff2');font-weight:800 900;font-style:normal;font-display:swap}

/* ---------- LA FUENTE DE RESPALDO, CON LAS MEDIDAS DE INTER ----------
   Mientras las Inter se descargan, el navegador pinta con la fuente del
   sistema. Arial es un 7,2% más estrecha que Inter al mismo tamaño, así que
   el texto ocupaba menos, la miga de pan de los módulos cabía en dos líneas
   y al llegar la fuente buena pasaba a una: veintitrés píxeles de salto y
   todo lo de debajo subiendo de golpe. Medido: **CLS 0,284** en las páginas
   de módulo, cuando por encima de 0,25 Google lo llama «pobre».

   Esto declara la fuente del sistema con las medidas de Inter corregidas,
   así que el respaldo ocupa lo mismo que la definitiva y no hay salto. Los
   números no son de catálogo: `size-adjust` sale de medir la misma frase en
   las dos (4.678 px contra 4.363 a 100 px = 107,2%), y los `override`
   verticales de las métricas de Inter divididas por ese ajuste — ascendente
   2728/2816 = 96,88%, entre 1,072 = 90,4%; descendente 680/2816 = 24,15%,
   entre 1,072 = 22,5%.

   Va DESPUÉS de Inter en la pila y antes que nada del sistema. */
@font-face{
  font-family:InterCaida;
  src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans');
  size-adjust:107.2%;
  ascent-override:90.4%;
  descent-override:22.5%;
  line-gap-override:0%;
}


:root{
  /* --- base editorial --- */
  --ink:#12120f;
  --muted:#57564d;
  --soft:#66655c;
  --paper:#f5f4ef;
  --surface:#ffffff;
  --surface-alt:#ecebe4;
  --line:rgba(18,18,15,.14);
  --line-strong:rgba(18,18,15,.28);
  --dark:#11110f;
  --dim:#b9b9b2;
  --dim2:#9a998f;
  --ok:#1f6b3a;
  --danger:#8f2222;

  /* EL ACENTO, el mismo que en portada.css. Aquí dentro no compite con los
     acentos de módulo de más abajo porque hacen trabajos distintos: el color
     de módulo es identidad —el punto de la barra lateral, la etiqueta— y el
     bermellón es evidencia. La regla es la misma: si no señala un número
     comprobable, sobra. 5,98:1 sobre el blanco de las tarjetas. */
  --acento:#b8321d;

  /* compatibilidad con el marcado heredado de los másteres */
  --text:var(--ink);
  --text-dim:var(--muted);
  --text-faint:var(--soft);
  --border:var(--line);
  --border-strong:var(--line-strong);
  --bg:var(--paper);
  --brand:var(--ink);
  --brand-dark:var(--dark);
  --radius:0;

  /* --- acentos de módulo, apagados para papel --- */
  --micro:#0f5f57;
  --macro:#2f5fa8;
  --fiscal:#8a5a12;
  --finanzas:#5b3fa8;
  --conta:#2b6b3f;
  --emprendimiento:#8f2f45;
  --modelos:#9a4514;
  --arquitectura:#3d3a97;
  --estrategia:#175f70;
  --rrhh:#7d2a86;
  --negociacion:#4a6b16;
  --fundamentos:#0f5f57;
  --consumidor:#2f5fa8;
  --segmentacion:#8a5a12;
  --investigacion:#5b3fa8;
  --branding:#8f2f45;
  --pricing:#2b6b3f;
  --digital:#9a4514;
  --contenidos:#3d3a97;
  --rrss:#7d2a86;
  --analitica:#175f70;
  --estrategico:#4a6b16;

  /* --- acentos del máster de IA --- */
  --ia-llm:#0f5f57;
  --ia-prompting:#2f5fa8;
  --ia-verificacion:#8a5a12;
  --ia-coste:#5b3fa8;
  --ia-datos:#2b6b3f;
  --ia-agentes:#9a4514;
  --ia-evaluacion:#175f70;
  --ia-contenido:#8f2f45;
  --ia-riesgos:#7d2a86;
  --ia-operacion:#3d3a97;
  --ia-adopcion:#4a6b16;

  /* --- acentos del máster de Psicología --- */
  --psi-metodo:#0f5f57;
  --psi-decisiones:#2f5fa8;
  --psi-consumo:#8a5a12;
  --psi-motivacion:#5b3fa8;
  --psi-habitos:#8f2f45;
  --psi-diferencias:#2b6b3f;
  --psi-equipos:#9a4514;
  --psi-liderazgo:#3d3a97;
  --psi-organizacional:#7d2a86;
  --psi-influencia:#175f70;
  --psi-emocion:#4a6b16;

  /* --- Gestión Emocional y Comunicación, prefijados --com-* ---
     Los once pasan AA sobre papel (de 6,16:1 a 7,57:1). Si alguien
     cambia uno, que rehaga la cuenta: se leen a 11 px en la etiqueta
     del módulo y en el punto de la barra lateral. */
  --com-emocion:#13565f;
  --com-nombrar:#2c5b96;
  --com-hablarse:#6a3d94;
  --com-encuadre:#8a4b12;
  --com-feedback:#9c2f2a;
  --com-preguntar:#1f6146;
  --com-escuchar:#4d6218;
  --com-dificil:#8b2f63;
  --com-conflicto:#34479b;
  --com-carga:#7a5210;
  --com-mitos:#5c5a52;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,InterCaida,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;

  /* Que una palabra que no cabe se parta en vez de estirar la página.
     Lo pedía una URL con parámetros UTM de marketing/analitica.html: 585 px
     de ancho en un móvil de 390. Solo actúa cuando la palabra desbordaría,
     así que no toca la prosa normal. */
  overflow-wrap:break-word;}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms !important;animation-duration:.01ms !important}}

/* ============================================================
   1. Estructura del máster: barra lateral + contenido
   ============================================================ */
.app-shell{display:flex;min-height:100vh}

aside.sidebar{
  display:none;
  width:286px;flex-shrink:0;
  border-right:1px solid var(--line);
  background:var(--paper);
  padding:26px 18px;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sidebar .brand{padding:0 6px 20px;border-bottom:1px solid var(--ink);margin-bottom:18px}
.sidebar .brand .brand-title{
  font-size:1rem;margin:0 0 6px;font-weight:800;letter-spacing:-.035em;line-height:1.1;
}
.sidebar .brand p{margin:0;font-size:.78rem;color:var(--soft);line-height:1.45}
.sidebar .navgroup{margin-bottom:20px}
.sidebar .navgroup .glabel,
.mobilemenu .navgroup .glabel{
  display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);padding:0 6px;margin-bottom:8px;
}
.sidebar .navitem,.mobilemenu .navitem{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  text-decoration:none;
  background:none;border:none;border-left:2px solid transparent;
  padding:8px 8px;font-size:.88rem;color:var(--muted);cursor:pointer;
  font-family:inherit;line-height:1.3;transition:background .15s ease,color .15s ease;
}
.sidebar .navitem:hover,.mobilemenu .navitem:hover{background:rgba(255,255,255,.7);color:var(--ink)}
.sidebar .navitem.active,.mobilemenu .navitem.active{
  background:var(--surface);color:var(--ink);font-weight:700;
  border-left-color:var(--item-color,var(--ink));
}
.navitem .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--line-strong)}
.navitem.active .dot{background:var(--item-color,var(--ink))}
.navitem .label{flex:1}
.navitem .check{margin-left:auto;font-size:.75rem;color:var(--ok);flex-shrink:0;font-weight:700}

header.topbar{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:var(--paper);position:sticky;top:0;z-index:60;
}
header.topbar .menu-btn{
  background:none;border:1px solid var(--line-strong);
  width:40px;height:40px;font-size:1.05rem;cursor:pointer;color:var(--ink);flex-shrink:0;
}
header.topbar .cur-title{font-weight:700;font-size:.95rem;flex:1;letter-spacing:-.02em}

.mobilemenu-overlay{display:none;position:fixed;inset:0;background:rgba(18,18,15,.45);z-index:100}
.mobilemenu-overlay.open{display:block}
.mobilemenu{
  position:fixed;top:0;left:0;bottom:0;width:84vw;max-width:330px;
  background:var(--paper);z-index:101;padding:20px 16px;overflow-y:auto;
  transform:translateX(-100%);transition:transform .22s ease;
}
.mobilemenu-overlay.open .mobilemenu{transform:translateX(0)}
.mobilemenu .mm-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:4px 6px 16px;border-bottom:1px solid var(--ink);margin-bottom:16px;
}
.mobilemenu .mm-head b{font-size:.92rem;letter-spacing:-.02em}
.mobilemenu .close-btn{background:none;border:none;font-size:1.4rem;color:var(--soft);cursor:pointer;line-height:1}

@media(min-width:900px){
  aside.sidebar{display:block}
  header.topbar{display:none}
  .mobilemenu-overlay{display:none !important}
}

main.content{flex:1;min-width:0}
.content-inner{width:min(1020px,100%);margin:0 auto;padding:48px 34px 120px}
section.tab-content{display:none}
section.tab-content.active{display:block}

.back-to-hub{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--soft);text-decoration:none;margin-bottom:14px;
}
.back-to-hub:hover{color:var(--ink)}

/* ============================================================
   2. Tipografía de módulo
   ============================================================ */
h1.module-title,h2.module-title{
  font-size:clamp(28px,4.4vw,44px);line-height:.98;letter-spacing:-.05em;
  margin:0 0 14px;font-weight:800;max-width:20ch;
}
.module-sub{color:var(--muted);margin:0 0 34px;font-size:clamp(16px,2vw,18.5px);max-width:62ch}

.badge{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--line-strong);color:var(--item-color,var(--soft));
  background:none;margin-bottom:18px;
}
/* cada módulo tiñe su etiqueta con su acento */
.badge.micro{color:var(--micro)}          .badge.macro{color:var(--macro)}
.badge.fiscal{color:var(--fiscal)}        .badge.finanzas{color:var(--finanzas)}
.badge.conta{color:var(--conta)}          .badge.emprendimiento{color:var(--emprendimiento)}
.badge.modelos{color:var(--modelos)}      .badge.arquitectura{color:var(--arquitectura)}
.badge.estrategia{color:var(--estrategia)}.badge.rrhh{color:var(--rrhh)}
.badge.negociacion{color:var(--negociacion)}
.badge.fundamentos{color:var(--fundamentos)}   .badge.consumidor{color:var(--consumidor)}
.badge.segmentacion{color:var(--segmentacion)} .badge.investigacion{color:var(--investigacion)}
.badge.branding{color:var(--branding)}         .badge.pricing{color:var(--pricing)}
.badge.digital{color:var(--digital)}           .badge.contenidos{color:var(--contenidos)}
.badge.rrss{color:var(--rrss)}                 .badge.analitica{color:var(--analitica)}
.badge.estrategico{color:var(--estrategico)}
.badge.ia-llm{color:var(--ia-llm)}             .badge.ia-prompting{color:var(--ia-prompting)}
.badge.ia-verificacion{color:var(--ia-verificacion)} .badge.ia-coste{color:var(--ia-coste)}
.badge.ia-datos{color:var(--ia-datos)}         .badge.ia-agentes{color:var(--ia-agentes)}
.badge.ia-evaluacion{color:var(--ia-evaluacion)} .badge.ia-contenido{color:var(--ia-contenido)}
.badge.ia-riesgos{color:var(--ia-riesgos)}     .badge.ia-operacion{color:var(--ia-operacion)}
.badge.ia-adopcion{color:var(--ia-adopcion)}
.badge.psi-metodo{color:var(--psi-metodo)}     .badge.psi-decisiones{color:var(--psi-decisiones)}
.badge.psi-consumo{color:var(--psi-consumo)}   .badge.psi-motivacion{color:var(--psi-motivacion)}
.badge.psi-habitos{color:var(--psi-habitos)}   .badge.psi-diferencias{color:var(--psi-diferencias)}
.badge.psi-equipos{color:var(--psi-equipos)}   .badge.psi-liderazgo{color:var(--psi-liderazgo)}
.badge.psi-organizacional{color:var(--psi-organizacional)} .badge.psi-influencia{color:var(--psi-influencia)}
.badge.psi-emocion{color:var(--psi-emocion)}
.badge.com-emocion{color:var(--com-emocion)}
.badge.com-nombrar{color:var(--com-nombrar)}
.badge.com-hablarse{color:var(--com-hablarse)}
.badge.com-encuadre{color:var(--com-encuadre)}
.badge.com-feedback{color:var(--com-feedback)}
.badge.com-preguntar{color:var(--com-preguntar)}
.badge.com-escuchar{color:var(--com-escuchar)}
.badge.com-dificil{color:var(--com-dificil)}
.badge.com-conflicto{color:var(--com-conflicto)}
.badge.com-carga{color:var(--com-carga)}
.badge.com-mitos{color:var(--com-mitos)}

/* ============================================================
   3. Tarjetas — filete, no sombra
   ============================================================ */
.card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:36px 38px;
  margin-bottom:20px;
}
/* Los niveles de encabezado de un módulo van h1 → h2 → h3, sin saltos. Antes
   iban h1 → h3 → h4: se saltaban el h2 en las 65 páginas de máster, y quien
   navega por encabezados con un lector de pantalla se encontraba un hueco en
   cada una. El aspecto no cambia — estas dos reglas son las de antes con el
   nivel corrido— y de paso se arregla algo que no se veía: el máster de
   Comunicación traía sus títulos de sección en h2 sin regla que los pintara,
   así que salían a 24 px y peso 700 del navegador en vez de los 25 y 800 de
   la casa. Cuatro másteres con un aspecto y el quinto con otro. */
.card h2{
  margin:0 0 16px;font-size:clamp(19px,2.3vw,25px);line-height:1.08;
  letter-spacing:-.04em;font-weight:800;
}
.card h3{font-size:16px;margin:26px 0 10px;letter-spacing:-.02em;font-weight:800}
.card p,.card li{font-size:16.5px;color:var(--muted);margin:0 0 16px}
.card p:last-child{margin-bottom:0}
.card p strong,.card li strong,.card p b,.card li b,td b{color:var(--ink);font-weight:700}
.card ul,.card ol{padding-left:20px;margin:0 0 18px}
.card li{margin-bottom:10px}

/* la escena que abre cada módulo */
.card.analogy{
  background:var(--surface-alt);
  border:1px solid var(--line-strong);
  border-left:3px solid var(--item-color,var(--ink));
}

/* guía docente plegable */
details.card.guia{padding:0}
details.card.guia summary{
  cursor:pointer;font-weight:800;font-size:16px;letter-spacing:-.02em;
  padding:20px 30px;list-style:none;display:flex;justify-content:space-between;
  align-items:center;gap:16px;
}
details.card.guia summary::-webkit-details-marker{display:none}
details.card.guia summary::after{content:"+";font-size:22px;font-weight:400;color:var(--soft)}
details.card.guia[open] summary{border-bottom:1px solid var(--line)}
details.card.guia[open] summary::after{content:"−"}
details.card.guia>*:not(summary){padding-left:30px;padding-right:30px}
details.card.guia>*:last-child{padding-bottom:26px}
details.card.guia h3:first-of-type{margin-top:22px}

/* acordeones y soluciones paso a paso */
.card details{margin-top:18px;border-top:1px solid var(--line-strong)}
.card details summary{
  cursor:pointer;font-weight:700;font-size:16px;padding:16px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.card details summary::-webkit-details-marker{display:none}
.card details summary::after{content:"+";font-size:20px;font-weight:400;color:var(--soft)}
.card details[open] summary::after{content:"−"}
details.accordion{border:1px solid var(--line);margin-bottom:10px}
details.accordion summary{padding:14px 18px;background:var(--surface-alt);font-weight:700;font-size:15px;cursor:pointer}
details.accordion .accordion-body{padding:6px 18px 18px;color:var(--muted);font-size:15.5px}

.grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.grid2{grid-template-columns:1fr 1fr}}

/* ============================================================
   4. Tablas
   ============================================================ */
table.simple-table{
  width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15px;
  font-variant-numeric:tabular-nums;
}
table.simple-table th,table.simple-table td{
  text-align:left;padding:13px 12px;border-bottom:1px solid var(--line);vertical-align:top;
}
/* La primera fila incluye su esquina vacía, que es un `<td>` y no un `<th>`:
   un encabezado sin texto no encabeza nada y un lector de pantalla lo anuncia
   como una columna sin nombre. Diecinueve celdas en diecisiete módulos. Van
   con el mismo filete que sus vecinas para que la tabla se vea igual. */
table.simple-table tr:first-child th,table.simple-table tr:first-child td{
  border-bottom:1px solid var(--ink);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--soft);font-weight:800;
}
table.simple-table tr:last-child td{border-bottom:1px solid var(--ink)}
table.simple-table td{color:var(--muted)}

/* ============================================================
   5. Simuladores — el panel de la calculadora de la portada
   ============================================================ */
.sim-box{
  background:var(--surface-alt);
  border:1px solid var(--line-strong);
  padding:22px;
  margin-top:6px;
}
canvas{
  width:100%;height:auto;display:block;
  background:var(--surface);border:1px solid var(--line);
}
.sim-controls{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.sim-controls label{
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft);display:flex;justify-content:space-between;gap:14px;
}
.sim-controls label span{color:var(--ink);font-variant-numeric:tabular-nums}
/* Los deslizadores de los simuladores medían 16 px de alto. WCAG 2.2 pide
   24 en el criterio 2.5.8, y el motivo se nota antes que la norma: en un
   móvil, agarrar un pulgar de 16 px con el dedo es una lotería. La altura
   se sube en la caja y el pulgar se agranda a mano, porque `accent-color`
   pinta pero no dimensiona. */
.sim-controls input[type=range]{
  width:100%;accent-color:var(--item-color,var(--ink));
  height:24px;min-height:24px;margin:0;
}
.sim-controls input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;border:0;
  background:var(--item-color,var(--ink));cursor:pointer;
}
.sim-controls input[type=range]::-webkit-slider-runnable-track{
  height:4px;background:var(--line-strong,rgba(18,18,15,.28));border-radius:0;
}
.sim-controls input[type=range]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;border:0;
  background:var(--item-color,var(--ink));cursor:pointer;
}
.sim-controls input[type=range]::-moz-range-track{
  height:4px;background:var(--line-strong,rgba(18,18,15,.28));
}
.sim-readout{display:flex;flex-wrap:wrap;gap:1px;margin-top:20px;background:var(--line-strong)}
.sim-readout .stat{
  background:var(--surface);padding:14px 15px;font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  flex:1 1 150px;min-width:0;
}
/* El número que cambia al mover los mandos. Es la razón de existir del
   simulador y estaba en negro, indistinguible de cualquier otro dato de la
   página; en bermellón se ve moverse desde el otro lado de la pantalla. */
.sim-readout .stat b{
  display:block;margin-top:8px;font-size:clamp(20px,2.7vw,28px);letter-spacing:-.045em;
  color:var(--acento);text-transform:none;font-variant-numeric:tabular-nums;
}

button.action,.quiz-retry,.submit{
  display:inline-block;border:1px solid var(--ink);background:var(--ink);color:var(--surface);
  padding:12px 18px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;
  margin:4px 6px 4px 0;transition:background .2s ease,color .2s ease;
}
button.action:hover,.quiz-retry:hover{background:#000}
button.action.secondary{background:transparent;color:var(--ink)}
button.action.secondary:hover{background:var(--ink);color:var(--surface)}
.quiz-retry:disabled{opacity:.45;cursor:not-allowed}

/* ============================================================
   6. Quiz y examen
   ============================================================ */
.quiz-q{border-top:1px solid var(--line);padding:22px 0}
.quiz-q:first-child{border-top:none;padding-top:4px}
.quiz-q p.qtext{font-weight:700;margin:0 0 14px;font-size:16.5px;color:var(--ink);letter-spacing:-.01em}
/* La cuenta hecha por otro, para que la audites. Se lee como un papel que te
   pasan por encima de la mesa: filete a la izquierda, cifras tabulares y el
   número de paso fuera del texto, porque las opciones lo nombran («en el paso
   3») y tiene que poderse contar de un vistazo. Sin relleno ni caja cerrada:
   no es una cita destacada, es material de trabajo. Mismas medidas que en
   `troncos/pieza.css`, con las variables de aquí; si cambia una, cambian las
   dos, que es la misma pregunta en dos edificios. */
.pasos{list-style:none;counter-reset:paso;margin:0 0 14px;padding:2px 0 2px 16px;
  border-left:1px solid var(--line-strong);max-width:56ch}
.pasos li{counter-increment:paso;position:relative;padding-left:26px;
  font-size:15.5px;line-height:1.55;color:var(--ink);font-variant-numeric:tabular-nums}
.pasos li + li{margin-top:5px}
.pasos li::before{content:counter(paso);position:absolute;left:0;top:1px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--soft)}
.quiz-opt{
  display:block;background:var(--surface);border:1px solid var(--line);
  padding:12px 14px;margin-bottom:8px;cursor:pointer;font-size:15.5px;color:var(--muted);
  transition:border-color .15s ease,color .15s ease;
}
.quiz-opt:hover{border-color:var(--ink);color:var(--ink)}
.quiz-opt.selected{border-color:var(--ink);color:var(--ink);font-weight:600}
.quiz-opt.correct{border-color:var(--ok);border-left:3px solid var(--ok);color:var(--ink);background:rgba(31,107,58,.06)}
.quiz-opt.incorrect{border-color:var(--danger);border-left:3px solid var(--danger);color:var(--ink);background:rgba(143,34,34,.05)}
.quiz-feedback{font-size:15px;margin-top:12px;padding:12px 14px;display:none;line-height:1.5}
.quiz-feedback.show{display:block}
.quiz-feedback.correct{background:rgba(31,107,58,.08);color:var(--ink);border-left:2px solid var(--ok)}
.quiz-feedback.incorrect{background:rgba(143,34,34,.06);color:var(--ink);border-left:2px solid var(--danger)}
.quiz-score{margin-top:22px;padding-top:18px;border-top:1px solid var(--ink);font-weight:700;font-size:16px}

.exam-footer{
  display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;
  padding-top:18px;border-top:1px solid var(--ink);font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;color:var(--soft);flex-wrap:wrap;
}
.cert-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.cert-form input,#glossarySearch{
  flex:1 1 220px;padding:13px 14px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);font-size:16px;font-family:inherit;
}
.cert-form input:focus,#glossarySearch:focus{border-color:var(--ink);outline:none}

/* ============================================================
   7. Glosario
   ============================================================ */
#glossarySearch{width:100%;margin-bottom:8px}
#glossaryList{border-top:1px solid var(--ink)}
.gloss-item{border-bottom:1px solid var(--line);padding:16px 2px}
.gloss-item .term{font-weight:700;letter-spacing:-.02em;font-size:16.5px}
.gloss-item .area-tag{
  font-size:10px;color:var(--soft);text-transform:uppercase;letter-spacing:.14em;
  margin-left:10px;font-weight:800;
}
.gloss-item .def{color:var(--muted);margin:6px 0 0;font-size:15.5px}

/* ============================================================
   8. Portada del máster (pestaña Inicio)
   ============================================================ */
.hero{
  background:var(--dark);color:#fff;padding:48px 44px;margin-bottom:20px;
}
.hero h1,.hero h2{
  margin:0 0 12px;font-size:clamp(26px,3.6vw,40px);line-height:.98;
  letter-spacing:-.05em;font-weight:800;color:#fff;
}
.hero p{margin:0;color:var(--dim);font-size:16.5px;max-width:60ch}
.progress-summary{display:flex;align-items:center;gap:16px;margin-top:26px}
.progress-bar-track{flex:1;height:6px;background:rgba(255,255,255,.22);overflow:hidden}
.progress-bar-fill{height:100%;background:#fff;transition:width .3s ease}
.progress-summary .pct{
  font-size:11px;font-weight:800;letter-spacing:.13em;white-space:nowrap;color:#fff;
}

.home-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
@media(min-width:640px){.home-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.home-grid{grid-template-columns:1fr 1fr 1fr}}
.home-card{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);padding:28px 26px;cursor:pointer;border:none;
  position:relative;transition:background .2s ease;
}
.home-card:hover{background:var(--surface-alt)}
.home-card .hc-top{display:flex;justify-content:flex-start;align-items:center;gap:10px}
.home-card .hc-n{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--soft)}
.home-card .hc-check{margin-left:auto}
.home-card .hc-dot{width:8px;height:8px;border-radius:50%;background:var(--item-color,var(--ink));flex:none}
.home-card h2{margin:0 0 10px;font-size:18px;letter-spacing:-.03em;font-weight:800;line-height:1.2}
.home-card p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.55}
.home-card .hc-check{
  color:var(--ok);font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}

footer{
  border-top:1px solid var(--line);padding:28px 0;margin-top:40px;
  color:var(--soft);font-size:13px;text-align:center;
}

@media(max-width:620px){
  .content-inner{padding:26px 18px 80px}
  .card{padding:22px 20px}
  details.card.guia summary{padding:18px 20px}
  details.card.guia>*:not(summary){padding-left:20px;padding-right:20px}
  .hero{padding:28px 22px}
  /* La tabla scrollea dentro de sí misma en vez de estirar la página.
     Un barrido de las 88 páginas a 390 px encontró que TREINTA módulos de
     los cinco másteres hacían scroll horizontal del documento entero por
     una tabla ancha: en un móvil eso mueve el texto de al lado, no solo
     la tabla. `display:block` la convierte en una caja que se desplaza y
     el interior sigue maquetando como tabla, porque tbody y tr conservan
     su display. Pierde el ancho al 100%, que en móvil no se echa en falta. */
  table.simple-table{font-size:14px;display:block;overflow-x:auto;max-width:100%}
  table.simple-table th,table.simple-table td{padding:11px 8px}
  .sim-box{padding:16px}
}

/* ============================================================
   9. Vestíbulo del máster — lo añadido al poner los módulos
      delante del texto. Antes se entraba a un muro de
      instrucciones y los once módulos quedaban al final.
   ============================================================ */
.home-grid{margin-bottom:20px}

.card.compacto .tres-capas{list-style:none;padding:0;margin:0 0 22px}
.card.compacto .tres-capas li{
  padding:16px 0;border-top:1px solid var(--line);
  font-size:15.5px;line-height:1.6;color:var(--muted);
}
.card.compacto .tres-capas li b{color:var(--text)}
.card .matiz{font-size:14.5px;line-height:1.6;color:var(--soft);margin:0 0 12px}
.card .matiz:last-child{margin-bottom:0}
.card .matiz a{color:var(--text);border-bottom:1px solid var(--line-strong)}
.card .matiz .action{margin-left:8px;vertical-align:baseline}

.card.plegable{padding:0}
.card.plegable>summary{
  padding:24px 38px;cursor:pointer;font-weight:700;font-size:16px;
  letter-spacing:-.02em;list-style:none;
}
.card.plegable>summary::-webkit-details-marker{display:none}
.card.plegable>summary::after{content:' +';color:var(--soft);font-weight:800}
.card.plegable[open]>summary::after{content:' −'}
.card.plegable>summary:hover{background:var(--surface-alt)}
.card.plegable[open]>summary{border-bottom:1px solid var(--line)}
.card.plegable>*:not(summary){margin-left:38px;margin-right:38px}
.card.plegable>*:last-child{margin-bottom:28px}
.card.plegable>.simple-table{width:calc(100% - 76px);margin-top:24px}

@media(max-width:620px){
  .card.plegable>summary{padding:20px 20px}
  .card.plegable>*:not(summary){margin-left:20px;margin-right:20px}
  .card.plegable>.simple-table{width:calc(100% - 40px)}
}

/* La celda doce de la rejilla: el examen. Antes quedaba vacía y se veía
   el fondo del grid como un hueco gris. */
.home-card.examen{background:var(--dark);color:#fff}
.home-card.examen:hover{background:#000}
.home-card.examen h2{color:#fff}
.home-card.examen p{color:var(--dim)}
.home-card.examen .hc-n{color:var(--dim2)}

/* ============================================================
   10. La cuenta — la puerta del resultado y el quiz a ciegas

   El quiz ya no corrige pregunta a pregunta: se contesta entero
   y se corrige al final. Por eso hace falta un estado nuevo,
   `.elegida`: marca lo que has escogido sin decir si acertaste.
   ============================================================ */

.quiz-opt.elegida{
  border-color:var(--ink);
  background:var(--surface-alt);
  font-weight:700;
}
.quiz-opt.elegida::before{content:'● ';color:var(--ink)}

.quiz-cierre{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  flex-wrap:wrap;border-top:1px solid var(--line);margin-top:26px;padding-top:22px;
}
.quiz-avance{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.quiz-ver{
  border:1px solid var(--ink);background:var(--ink);color:#fff;
  padding:13px 22px;font:inherit;font-size:15px;font-weight:700;cursor:pointer;
  transition:opacity .2s ease;
}
.quiz-ver:disabled{opacity:.3;cursor:not-allowed}
.quiz-ver:not(:disabled):hover{background:#000}

/* La puerta ya no está aquí: se la lleva puesta cuenta.js, porque la
   usan también las páginas de tronco, que llevan portada.css y no esta
   hoja. Definida en dos sitios se habría desincronizado el primer día. */

@media(max-width:560px){
  .quiz-cierre{flex-direction:column;align-items:stretch}
  .quiz-ver{width:100%}
}

/* La tira de cuenta del vestíbulo */
.tira-cuenta{
  border:1px solid var(--line);background:var(--surface);
  padding:20px 26px;margin-bottom:20px;
  display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap;
}
/* El `display:flex` de arriba le gana al atributo `hidden`, así que la tira
   se veía como una caja vacía con filete en el inicio de los tres másteres
   mientras no hay cuenta. */
.tira-cuenta[hidden]{display:none}
.tc-quien{font-size:15px;font-weight:800;letter-spacing:-.02em}
.tc-nota{font-size:14px;color:var(--muted);flex:1;min-width:220px;line-height:1.5}
.tc-acciones{display:flex;gap:8px;margin-left:auto}
.tc-btn{
  border:1px solid var(--line-strong);background:none;color:var(--muted);
  padding:9px 14px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
}
.tc-btn:hover{border-color:var(--ink);color:var(--ink)}
.tc-borrar:hover{border-color:var(--danger);color:var(--danger)}
@media(max-width:620px){
  .tira-cuenta{padding:18px 20px}
  .tc-acciones{margin-left:0;width:100%}
  .tc-btn{flex:1}
}


/* ============================================================
   Navegación entre páginas de módulo
   Cada módulo tiene URL propia, así que hacen falta migas de pan
   y un paso a los módulos vecinos. Antes eran pestañas y no había
   ni una cosa ni la otra.
   ============================================================ */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.migas{
  font-size:12.5px;color:var(--soft);margin:0 0 26px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;line-height:1.4;
}
.migas a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line)}
.migas a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.migas [aria-current]{color:var(--ink);font-weight:700}

.paso{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:52px;
  background:var(--line-strong);border:1px solid var(--line-strong);
}
.paso-a{
  background:var(--surface);padding:22px 24px;text-decoration:none;color:inherit;
  display:block;transition:background .2s ease;min-height:84px;
}
.paso-a:hover{background:var(--surface-alt)}
.paso-a span{
  display:block;font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--soft);margin-bottom:8px;
}
.paso-a b{font-size:16px;letter-spacing:-.025em;line-height:1.25;display:block}
.paso-a.sig{text-align:right}
.paso-a.vacio{background:var(--paper);cursor:default}
@media(max-width:620px){
  .paso{grid-template-columns:1fr}
  .paso-a.sig{text-align:left}
}

.sidebar .brand-title a{color:inherit;text-decoration:none}
.sidebar .brand-title a:hover{border-bottom:1px solid currentColor}
footer a{color:inherit;border-bottom:1px solid currentColor}

/* Cruces entre másteres: el diferencial que MAPA.md declara y que hasta que
   cada módulo no tuvo URL propia no se podía enlazar. */
.card.cruce{background:var(--surface-alt);border-color:var(--line-strong)}
.card.cruce ul{list-style:none;padding:0;margin:18px 0 0}
.card.cruce li{border-top:1px solid var(--line-strong);padding:16px 0 0;margin-top:16px}
.card.cruce li:first-child{border-top:none;padding-top:0;margin-top:0}
.card.cruce li a{
  display:block;font-size:17px;letter-spacing:-.03em;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;margin-bottom:6px;width:fit-content;
}
.card.cruce li a:hover{border-bottom-color:var(--ink)}
.card.cruce li a b{font-weight:800}
.card.cruce li span{display:block;color:var(--muted);font-size:14.5px;line-height:1.55}

/* Enlace de salto: estaba solo en portada.css y las páginas de módulo
   lo enseñaban en la esquina. Solo debe verse al llegar con el tabulador. */
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

/* ---------- LA MIGA DE PAN, TOCABLE ----------
   `.migas a` es display:block y medía 19 px de alto. Es la navegación
   «hacia arriba» de un módulo, que en un móvil es justo la que más se usa,
   y era la más difícil de acertar de la página. Cuatro píxeles arriba y
   abajo la dejan en 25. WCAG 2.2, criterio 2.5.8. */
.migas a{padding:4px 0;min-height:24px;display:inline-flex;align-items:center}