/* ============================================================================
   SEMINARIO TEOLOGICO THOMAS CRANMER — Hoja unica

   GENERADA por componer.py. No editar aqui: los cambios se pierden.
   Se compone de fuentes.css + base.css + componentes.css, en ese orden.
   ========================================================================= */

/* ══════ fuentes.css ══════ */
/* Tipografías autoalojadas. Cinzel (titulares) + EB Garamond (cuerpo, con griego
   politónico para la inscripción del escudo). Ambas SIL OFL.
   Se cargan UNA sola vez: no hay <link> a fonts.googleapis.com. */

/* Cinzel 400 normal — latin-ext */
/* Cinzel se sirve SOLO en 400 y 600. La cara 700 existia unicamente porque la
   hoja del navegador pone font-weight:bold a <b> y <strong>, y eso obligaba a
   descargar una tercera cara de 21 KB que nadie habia disenado. Al no declararla,
   el motor de fuentes resuelve 700 con la 600, que es lo que ya se veia. */
@font-face {
  font-display: swap;
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cinzel-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cinzel 400 normal — latin */
@font-face {
  font-display: swap;
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cinzel-400-latin.woff2') 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;
}

/* Cinzel 600 normal — latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cinzel-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cinzel 600 normal — latin */
@font-face {
  font-display: swap;
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cinzel-600-latin.woff2') 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;
}

/* Cinzel 700 normal — latin-ext */

/* Cinzel 700 normal — latin */

/* EB Garamond 400 italic — greek */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-italic-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* EB Garamond 400 italic — latin-ext */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 400 italic — latin */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-italic-latin.woff2') 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;
}

/* EB Garamond 400 normal — greek */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* EB Garamond 400 normal — latin-ext */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 400 normal — latin */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/eb-garamond-400-latin.woff2') 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;
}

/* EB Garamond 500 normal — greek */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/eb-garamond-500-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* EB Garamond 500 normal — latin-ext */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/eb-garamond-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 500 normal — latin */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/eb-garamond-500-latin.woff2') 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;
}

/* EB Garamond 600 normal — greek */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-600-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

/* EB Garamond 600 normal — latin-ext */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* EB Garamond 600 normal — latin */
@font-face {
  font-display: swap;
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/eb-garamond-600-latin.woff2') 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;
}
/* ══════ base.css ══════ */
/* ============================================================================
   SEMINARIO TEOLÓGICO THOMAS CRANMER — Fundamentos
   Tokens, reset, tipografía y escalado responsive.

   Principio rector del responsive: NO se diseña «móvil primero» ni «escritorio
   primero». Todo está en rem y se escala :root. Una línea por escalón y el
   sistema entero —contenedores, espaciado, tipografía— se acomoda solo.

   Los breakpoints de layout van en px, no en em: deben responder al viewport
   real y no al font-size que acabamos de cambiar nosotros.
   ========================================================================= */

/* ─── 1 · ESCALADO DE LA RAÍZ ─────────────────────────────────────────────── */
:root { font-size: 100%; }                          /* 16 px */
@media (max-width:  359px) { :root { font-size: 93.75%;  } }  /* 15 px */
@media (min-width: 1920px) { :root { font-size: 106.25%; } }  /* 17 px · 2K  */
@media (min-width: 2560px) { :root { font-size: 118.75%; } }  /* 19 px · 4K  */
@media (min-width: 3400px) { :root { font-size: 131.25%; } }  /* 21 px · 5K  */

/* ─── 2 · TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* Color — medido píxel a píxel sobre el brochure institucional.
     El oro #FBB03B del escudo da 1,85:1 sobre blanco: es color de RELLENO,
     nunca de tinta. Sobre oro se escribe en azul. */
  --azul:            #032540;
  --azul-profundo:   #01203D;
  --azul-medio:      #012849;
  --azul-tenue:      #E8ECF0;
  --oro:             #D9A43D;
  --oro-claro:       #E5AC41;
  --oro-oscuro:      #B78337;
  --oro-tinta:       #806124;   /* 4,98:1 sobre crema · 5,75:1 sobre papel — este SÍ sirve
                                   como texto. Medido, no estimado: #8A6A2C daba 4,36 sobre
                                   crema y NO pasaba AA. */
  --crema:           #F3EEE8;
  --crema-clara:     #FAF7F3;
  --papel:           #FFFFFF;
  --tinta:           #333230;
  --tinta-suave:     #5A5248;
  --tinta-tenue:     #736B62;   /* 4,54:1 sobre crema · 5,24:1 sobre papel.
                                   #7A7268 daba 4,11 sobre crema y NO pasaba AA */
  --linea:           #DCD4C8;
  --linea-fuerte:    #C0B5A4;
  --sepia:           #CBBA8D;
  --granate:         #661E23;   /* Cátedra Latimer */
  --verde:           #40631A;   /* éxito */
  --rojo:            #850607;   /* error / heráldica */

  /* Tipografía */
  --f-titulo: 'Cinzel', 'Trajan Pro', 'Optima', Georgia, serif;
  --f-texto:  'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', Palatino,
              'Book Antiqua', Georgia, 'Times New Roman', serif;
  --f-ui:     'EB Garamond', Georgia, serif;
  --f-mono:   ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

  /* Escala tipográfica fluida — progresión ~1.25 con jerarquía intermedia real */
  --fs-display: clamp(2.5rem, 4.5vw + .75rem, 4.25rem);
  --fs-h1:      clamp(2.125rem, 3vw + .75rem, 3.25rem);
  --fs-h2:      clamp(1.75rem, 1.8vw + .75rem, 2.375rem);
  --fs-h3:      clamp(1.375rem, 1vw + .7rem, 1.75rem);
  --fs-h4:      clamp(1.15rem, .5vw + .7rem, 1.375rem);
  --fs-h5:      1.0625rem;
  --fs-lead:    clamp(1.125rem, .4vw + 1rem, 1.3125rem);
  --fs-base:    1.0625rem;   /* 17 px · nunca menos, tampoco en móvil */
  --fs-small:   .9375rem;
  --fs-mini:    .8125rem;
  --fs-eyebrow: .75rem;

  --lh-display: 1.06;
  --lh-titulo:  1.18;
  --lh-texto:   1.62;
  --lh-ajustada: 1.35;

  --ls-display: -.015em;
  --ls-titulo:  .01em;
  --ls-eyebrow: .18em;
  --ls-versal:  .12em;

  /* Espaciado — escala modular */
  --e-3xs: .25rem;  --e-2xs: .5rem;   --e-xs: .75rem;   --e-sm: 1rem;
  --e-md: 1.5rem;   --e-lg: 2rem;     --e-xl: 3rem;     --e-2xl: 4.5rem;
  --e-3xl: 6rem;    --e-4xl: 8rem;

  /* Disposición */
  --wrap:      75rem;    /* 1200 px a root 16 · 1425 px a 4K */
  --wrap-wide: 90rem;
  --measure:   42rem;    /* ≈68 caracteres en TODAS las resoluciones */
  --gutter:    1.5rem;
  --radio:     3px;
  --radio-lg:  6px;

  /* Sombras y transiciones */
  --sombra-sm: 0 1px 2px rgba(3,37,64,.08);
  --sombra:    0 2px 8px rgba(3,37,64,.10);
  --sombra-lg: 0 8px 28px rgba(3,37,64,.14);
  --trans:     180ms cubic-bezier(.2,.7,.4,1);

  /* Alturas fijas */
  --h-header:  4.5rem;
  --h-barra-cta: 4rem;

  /* MODO CLARO FORZADO — decisión del editor, no negociable.
     `only light` es la clave: le dice al navegador que la página NO soporta
     esquema oscuro, de modo que Chrome en Android, Safari en iOS y los modos
     de «oscurecimiento automático» dejan de reinterpretar los colores.
     Con `light` a secas, algunos navegadores siguen auto-oscureciendo. */
  color-scheme: only light;
  forced-color-adjust: none;
}

/* Refuerzo en los tres elementos que los navegadores tocan primero */
html, body { color-scheme: only light; background-color: #FFFFFF; }

/* Si el sistema pide oscuro, NO cambiamos nada: los tokens se mantienen.
   Se declara explícitamente para que ninguna extensión ni hoja de usuario
   herede un valor distinto por descuido. */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: only light; }
  html, body { background-color: #FFFFFF; color: var(--tinta); }
}

/* Modo de alto contraste de Windows: se respeta la accesibilidad del usuario
   en los textos, pero no se invierte la identidad de marca. */
@media (forced-colors: active) {
  .btn, .tarjeta, .cabecera, .pie-sitio { forced-color-adjust: auto; }
}

@media (max-width: 359px) { :root { --gutter: .75rem; } }
@media (min-width: 600px) { :root { --gutter: 2rem; } }

/* ─── 3 · RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-header) + 1rem);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--f-texto);
  font-size: var(--fs-base);
  line-height: var(--lh-texto);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Blindaje: si falla la carga de una variante, el navegador NO inventa
     negritas ni cursivas falsas. Es el defecto que arrastra la web madre. */
  font-synthesis: none;
  min-height: 100vh;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

/* ─── 4 · TIPOGRAFÍA ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--f-titulo);
  font-weight: 600;
  line-height: var(--lh-titulo);
  letter-spacing: var(--ls-titulo);
  color: var(--azul);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }

/* VIUDAS Y HUÉRFANAS
   `text-wrap: pretty` impide que la última línea de un párrafo quede con una
   sola palabra. `text-wrap: balance` reparte los titulares en líneas de largo
   parecido en lugar de dejar una palabra suelta abajo — solo conviene en
   bloques cortos, por eso no se aplica a los párrafos largos.
   `orphans`/`widows` cubren la impresión y los navegadores sin text-wrap. */
p, li, dd, figcaption, blockquote { text-wrap: pretty; orphans: 2; widows: 2; }
.lead, .eyebrow, .cita-destacada p, .tarjeta h3, .hero p,
caption, th, .btn, .chip, .migas, .tarjeta-datos { text-wrap: balance; }

p + p, p + ul, p + ol, ul + p, ol + p { margin-top: var(--e-sm); }

a { color: var(--azul-medio); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--oro-tinta); }

strong, b { font-weight: 600; color: var(--azul); }
em, i { font-style: italic; }
small { font-size: var(--fs-small); }

/* Latín y otras lenguas: cursiva, mayúscula solo en la 1.ª palabra y en los
   nombres divinos. El griego en alfabeto propio va en REDONDA: el cambio de
   alfabeto ya cumple la función distintiva. */
.lat { font-style: italic; }
.gr  { font-style: normal; font-family: var(--f-texto); }

/* Versalitas reales para referencias bíblicas y siglas */
.versal, abbr[title] {
  font-variant-caps: small-caps; letter-spacing: .04em; text-decoration: none;
}
/* Abreviaturas que conservan su caja aunque el contenedor esté en versalita,
   y que nunca deben partirse al final de línea. */
.abbr { text-transform: none !important; white-space: nowrap; }

.eyebrow {
  display: block;
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--oro-tinta);
}
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--tinta-suave); }
.medida { max-width: var(--measure); }

/* ─── 5 · DISPOSICIÓN ─────────────────────────────────────────────────────── */
.wrap  { width: 100%; max-width: var(--wrap);      margin-inline: auto; padding-inline: var(--gutter); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-lectura { width: 100%; max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }

.seccion      { padding-block: var(--e-2xl); }
.seccion-sm   { padding-block: var(--e-xl); }
.seccion-lg   { padding-block: var(--e-3xl); }
.fondo-crema  { background: var(--crema); }
.fondo-clara  { background: var(--crema-clara); }
.fondo-azul   { background: var(--azul); color: #E8E1D6; }
.fondo-azul h1, .fondo-azul h2, .fondo-azul h3, .fondo-azul h4 { color: var(--papel); }
.fondo-azul .eyebrow { color: var(--oro); }
/* `:not(.btn)` es imprescindible. Sin él, esta regla (clase + elemento, 0-1-1)
   gana a `.btn-cta { color: var(--azul) }` (clase sola, 0-1-0) y el texto del
   botón se vuelve dorado sobre fondo dorado: invisible. */
.fondo-azul a:not(.btn) { color: var(--oro); }

.rejilla { display: grid; gap: var(--e-md); }
.centro  { text-align: center; }
.centro .medida { margin-inline: auto; }

/* ─── 6 · ACCESIBILIDAD ───────────────────────────────────────────────────── */
.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--azul); color: var(--papel);
  padding: var(--e-xs) var(--e-md); border-radius: 0 0 var(--radio) 0;
}
.salto-contenido:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--oro-tinta);
  outline-offset: 2px;
  border-radius: 2px;
}
.fondo-azul :focus-visible { outline-color: var(--oro-claro); }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

::selection { background: var(--oro); color: var(--azul); }

/* ─── 7 · ORNAMENTOS DE MARCA ─────────────────────────────────────────────── */
.filete { display: flex; align-items: center; gap: var(--e-xs); margin-block: var(--e-md); }
.filete::before, .filete::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oro-oscuro), transparent);
}
.filete i { width: 7px; height: 7px; background: var(--oro); transform: rotate(45deg); }
.filete-corto { max-width: 9rem; }
.centro .filete-corto { margin-inline: auto; }

.regla-oro { width: 3.5rem; height: 2px; background: var(--oro); border: 0; margin-block: var(--e-2xs) var(--e-sm); }
.centro .regla-oro { margin-inline: auto; }

.friso { width: 100%; opacity: .55; pointer-events: none; user-select: none; }

/* ─── 8 · UTILIDADES ──────────────────────────────────────────────────────── */
.oculto { display: none !important; }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mt-sm { margin-top: var(--e-sm); }
.mt-md { margin-top: var(--e-md); }
.mt-lg { margin-top: var(--e-lg); }
.mt-xl { margin-top: var(--e-xl); }

@media print {
  .cabecera, .pie-sitio, .barra-cta, .btn { display: none !important; }
  body { color: #000; background: #fff; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* ══════ componentes.css ══════ */
/* ============================================================================
   SEMINARIO TEOLÓGICO THOMAS CRANMER — Componentes
   Depende de base.css. Todos los tamaños en rem: escalan solos con :root.
   ========================================================================= */

/* ─── BOTONES ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 3rem;                      /* área táctil ≥48 px */
  padding: .75rem 1.75rem;
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; text-align: center;
  border: 1px solid transparent; border-radius: var(--radio);
  transition: background var(--trans), color var(--trans), border-color var(--trans);
  cursor: pointer;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Oro sobre azul: 8,8:1. Es el CTA principal del sitio. */
.btn-cta { background: var(--oro); color: var(--azul); border-color: var(--oro-oscuro); }
.btn-cta:hover, .btn-cta:focus-visible { background: var(--oro-claro); color: var(--azul); }
.btn-cta svg { fill: var(--azul); }

.btn-solido { background: var(--azul); color: var(--papel); border-color: var(--azul); }
.btn-solido:hover, .btn-solido:focus-visible { background: var(--azul-medio); color: var(--papel); }
.btn-solido svg { fill: var(--oro); }

.btn-linea { background: transparent; color: var(--azul); border-color: var(--linea-fuerte); }
.btn-linea:hover, .btn-linea:focus-visible { border-color: var(--azul); background: var(--azul-tenue); }
.btn-linea svg { fill: var(--azul); }

/* ─── SUPERFICIES OSCURAS: REDEFINICIÓN DE TOKENS ───────────────────────────
   Reasignar el color componente por componente ya nos falló tres veces: cada
   vez que se añadía un componente a una superficie oscura había que acordarse
   de repetir la regla, y si no, el texto quedaba oscuro sobre azul.

   Aquí se redefinen los TOKENS dentro del contexto oscuro, así que todo lo que
   los usa —eyebrow, ticks, notas, foco, enlaces en hover— se adapta solo.

   Medido, no estimado, sobre --azul #032540:
     --oro       #D9A43D → 6,95:1   ✓ AA
     --oro-tinta #806124 → 2,72:1   ✗ era esto lo que se colaba
     #9FB0C0             → 7,04:1   ✓ AA
   Es seguro porque dentro de .fondo-azul nada usa fondo claro: las tarjetas,
   tablas y acordeones van con blancos translúcidos sobre el azul. */
.fondo-azul, .hero, .barra-cta, .pie-sitio {
  --oro-tinta:   var(--oro);
  --tinta-tenue: #9FB0C0;
}

/* El botón de contorno debe aclararse en TODAS ellas.
   Antes solo se contemplaba `.fondo-azul`, pero el hero usa `.hero` y la barra
   fija usa `.barra-cta`: en ambas el texto quedaba azul sobre azul, invisible.
   Se agrupan aquí para que añadir una superficie oscura nueva sea una línea. */
.fondo-azul .btn-linea,
.hero .btn-linea,
.barra-cta .btn-linea,
.pie-sitio .btn-linea {
  color: var(--papel);
  border-color: rgba(217,164,61,.55);
  background: transparent;
}
.fondo-azul .btn-linea:hover, .fondo-azul .btn-linea:focus-visible,
.hero .btn-linea:hover, .hero .btn-linea:focus-visible,
.barra-cta .btn-linea:hover, .barra-cta .btn-linea:focus-visible,
.pie-sitio .btn-linea:hover, .pie-sitio .btn-linea:focus-visible {
  background: rgba(217,164,61,.16);
  border-color: var(--oro);
  color: var(--papel);
}
.fondo-azul .btn-linea svg, .hero .btn-linea svg,
.barra-cta .btn-linea svg, .pie-sitio .btn-linea svg { fill: var(--oro); }

/* El botón sólido es azul sobre azul en estas superficies: se ve el texto pero
   no el botón. Se aclara el fondo y se le da borde dorado para que exista como
   objeto pulsable. Hoy no se usa aquí; queda blindado para cuando se use. */
.fondo-azul .btn-solido, .hero .btn-solido,
.barra-cta .btn-solido, .pie-sitio .btn-solido {
  background: var(--azul-medio); border-color: var(--oro); color: var(--papel);
}
.fondo-azul .btn-solido:hover, .fondo-azul .btn-solido:focus-visible,
.hero .btn-solido:hover, .hero .btn-solido:focus-visible,
.barra-cta .btn-solido:hover, .barra-cta .btn-solido:focus-visible,
.pie-sitio .btn-solido:hover, .pie-sitio .btn-solido:focus-visible {
  background: var(--oro); color: var(--azul); border-color: var(--oro-oscuro);
}

.btn-sm { min-height: 2.5rem; padding: .5rem 1.15rem; font-size: var(--fs-mini); }
.btn-bloque { display: flex; width: 100%; }

/* Nota bajo el CTA: la alternativa a WhatsApp siempre visible, nunca un modal
   interceptor para quien no lo tenga. */
.btn-nota { font-size: var(--fs-small); color: var(--tinta-tenue); margin-top: var(--e-2xs); }
.btn-nota a { color: var(--oro-tinta); }

/* ─── CABECERA ────────────────────────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.cabecera::after {
  content: ''; display: block; height: 3px;
  background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro), var(--oro-oscuro));
}
.cabecera-fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-sm);
  min-height: var(--h-header);
}
/* `min-height` da los 44 px de zona pulsable que el escudo por sí solo no
   alcanza: es un blasón alto y estrecho, así que a 2rem de alto medía 21 px de
   ancho — por debajo incluso del mínimo de 24 px de la WCAG 2.2. */
.marca {
  display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none;
  min-height: 2.75rem;
}
.marca img, .marca svg { width: auto; height: 2.375rem; }
@media (min-width: 600px)  { .marca img, .marca svg { height: 2.5rem; } }
@media (min-width: 1024px) { .marca img, .marca svg { height: 2.75rem; } }

/* El nombre se muestra también en el móvil. Antes aparecía solo desde 480 px y
   en un teléfono de 360 la cabecera quedaba con un escudo de 21 px y nada más:
   ni marca reconocible ni objetivo pulsable decente. Espacio sobra, porque el
   botón de consulta no entra hasta 1200 px. */
.marca-texto { display: block; line-height: 1.15; }
@media (max-width: 359px) { .marca-texto { display: none; } }
.marca-texto b {
  display: block; font-family: var(--f-titulo); font-weight: 600;
  font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--azul);
}
.marca-texto span {
  display: block; font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--oro-tinta);
}

/* Navegación de escritorio: SANS-serif no; usamos la serif de texto, no la de
   display. Una lapidaria a tamaño de interfaz se lee mal — es el defecto de la
   web madre, que además pide a Forum un peso que no existe. */
.nav-principal { display: none; }
@media (min-width: 1200px) {
  .nav-principal { display: flex; align-items: center; gap: .25rem; }
  .nav-principal > li { position: relative; }
  .nav-principal > li > a, .nav-principal > li > button {
    display: flex; align-items: center; gap: .3em;
    white-space: nowrap;              /* «El Seminario» y «Convenio MINTS» no se parten */
    padding: .85rem .7rem; min-height: 3rem;
    font-family: var(--f-texto); font-weight: 500; font-size: 1rem;
    color: var(--azul); text-decoration: none; letter-spacing: .01em;
    border-bottom: 2px solid transparent;
  }
  .nav-principal > li > a:hover, .nav-principal > li > button:hover,
  .nav-principal > li > a[aria-current="page"] {
    color: var(--oro-tinta); border-bottom-color: var(--oro);
  }
  .nav-principal .flecha { width: .55em; height: .55em; transition: transform var(--trans); }
  .nav-principal [aria-expanded="true"] .flecha { transform: rotate(180deg); }

  .submenu {
    position: absolute; top: 100%; left: 0; min-width: 20rem;
    background: var(--papel); border: 1px solid var(--linea);
    border-top: 3px solid var(--oro);
    box-shadow: var(--sombra-lg); padding: .5rem;
    opacity: 0; visibility: hidden; transform: translateY(-.4rem);
    transition: opacity var(--trans), transform var(--trans), visibility var(--trans);
  }
  .nav-principal li:hover > .submenu,
  .nav-principal li:focus-within > .submenu,
  .submenu[data-abierto="true"] { opacity: 1; visibility: visible; transform: none; }
  .submenu a {
    display: block; padding: .7rem .9rem; text-decoration: none;
    color: var(--tinta); font-size: var(--fs-small); border-radius: var(--radio);
  }
  .submenu a:hover { background: var(--crema); color: var(--azul); }
  .submenu .destacado {
    border-top: 1px solid var(--linea); margin-top: .35rem; padding-top: .35rem;
    font-family: var(--f-titulo); font-size: var(--fs-mini);
    letter-spacing: .08em; text-transform: uppercase; color: var(--oro-tinta);
  }
}

.cabecera .btn-cta { display: none; }
/* El CTA de la cabecera aparece justo donde se retira la barra fija inferior.
   Antes salía en 768 y la barra no se iba hasta 1200: entre medias había DOS
   CTA idénticos a la vez, que es lo contrario de la regla de escasez. */
@media (min-width: 1200px) { .cabecera .btn-cta { display: inline-flex; } }

/* Hamburguesa — a la DERECHA, como manda la convención */
.hamburguesa {
  display: flex; align-items: center; justify-content: center;
  width: 3rem; height: 3rem; margin-inline-start: auto;
  color: var(--azul); border: 1px solid var(--linea); border-radius: var(--radio);
}
@media (min-width: 1200px) { .hamburguesa { display: none; } }
.hamburguesa svg { width: 1.5rem; height: 1.5rem; }

/* Panel móvil a pantalla completa */
.panel-movil {
  position: fixed; inset: 0; z-index: 200;
  background: var(--papel);
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--trans);
  overflow-y: auto; overscroll-behavior: contain;
}
.panel-movil[data-abierto="true"] { transform: none; }
.panel-movil-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-sm) var(--gutter);
  border-bottom: 1px solid var(--linea); min-height: var(--h-header);
}
.panel-movil nav { padding: var(--e-sm) var(--gutter) var(--e-2xl); }
.panel-movil nav > ul > li { border-bottom: 1px solid var(--linea); }
.panel-movil nav a, .panel-movil nav summary {
  display: block; padding: .9rem 0; min-height: 3rem;
  font-family: var(--f-texto); font-size: 1.0625rem; color: var(--azul);
  text-decoration: none; cursor: pointer;
}
.panel-movil details summary { list-style: none; display: flex; align-items: center; justify-content: space-between; }
.panel-movil details summary::-webkit-details-marker { display: none; }
.panel-movil details[open] summary { color: var(--oro-tinta); }
.panel-movil details ul { padding-bottom: .5rem; }
.panel-movil details ul a { padding: .6rem 0 .6rem 1rem; font-size: var(--fs-small); color: var(--tinta); }

/* Barra CTA fija — solo por debajo de 1024 px */
.barra-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: .5rem; padding: .6rem var(--gutter);
  background: var(--azul); border-top: 2px solid var(--oro);
  padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
}
.barra-cta .btn { flex: 1; }
@media (min-width: 1200px) { .barra-cta { display: none; } }
@media (max-width: 1199px) { body { padding-bottom: var(--h-barra-cta); } }

/* ─── HERO ────────────────────────────────────────────────────────────────── */
.hero { position: relative; background: var(--azul); color: #E8E1D6; overflow: hidden; }
.hero-inner { position: relative; z-index: 2; padding-block: var(--e-2xl) var(--e-xl); }
.hero h1 { color: var(--papel); }
.hero .lead { color: #CFD8E0; }
.hero-acciones { display: flex; flex-wrap: wrap; gap: var(--e-xs); margin-top: var(--e-md); }
/* Mismo grupo de botones, pero centrado: dos .btn contiguos solo se separan por
   el espacio en blanco del HTML, que casi no se ve. */
.acciones-centro { display: flex; flex-wrap: wrap; gap: var(--e-xs); justify-content: center; }
.hero-datos {
  display: flex; flex-wrap: wrap; gap: var(--e-sm) var(--e-lg);
  margin-top: var(--e-lg); padding-top: var(--e-md);
  border-top: 1px solid rgba(217,164,61,.35);
}
.hero-datos div { min-width: 6rem; }
.hero-datos b {
  display: block; font-family: var(--f-titulo); font-size: 1.5rem; color: var(--oro);
}
.hero-datos span {
  font-size: var(--fs-mini); letter-spacing: .1em; text-transform: uppercase; color: #9FB0C0;
}
.hero-friso { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; opacity: .16; }

/* Realce sobre fondo azul. base.css pinta <strong> y <b> en --azul: sobre la
   banda azul quedaban del MISMO color que el fondo, es decir, invisibles.
   Verificado en el hero de la home («modalidad virtual») y en la banda MINTS.
   El oro sobre azul da 8,8:1, así que aquí sí es tinta y además es el acento
   de la marca. */
.hero strong, .hero b,
.fondo-azul strong, .fondo-azul b { color: var(--oro); }

/* ─── TARJETAS ────────────────────────────────────────────────────────────── */
.rejilla-programas, .rejilla-catedras, .rejilla-personas { display: grid; gap: var(--e-md); }
@media (min-width: 600px)  { .rejilla-programas, .rejilla-catedras { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 768px)  { .rejilla-personas  { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px) { .rejilla-programas { grid-template-columns: repeat(3,1fr); }
                             .rejilla-catedras  { grid-template-columns: repeat(4,1fr); } }
@media (min-width: 600px) and (max-width:767px) { .rejilla-personas { grid-template-columns: repeat(2,1fr); } }

.tarjeta {
  display: flex; flex-direction: column;
  background: var(--papel); border: 1px solid var(--linea);
  border-top: 3px solid var(--oro);
  border-radius: var(--radio); overflow: hidden;
  transition: box-shadow var(--trans), transform var(--trans), border-color var(--trans);
}
.tarjeta:hover, .tarjeta:focus-within { box-shadow: var(--sombra-lg); transform: translateY(-2px); }
.tarjeta-cuerpo { padding: var(--e-md); display: flex; flex-direction: column; flex: 1; gap: var(--e-2xs); }
.tarjeta h3 { font-size: var(--fs-h4); }
.tarjeta p { font-size: var(--fs-small); color: var(--tinta-suave); }
.tarjeta-pie { margin-top: auto; padding-top: var(--e-sm); }

/* El enlace cubre la tarjeta entera sin romper la accesibilidad del foco */
.tarjeta-enlace::after { content: ''; position: absolute; inset: 0; }
.tarjeta { position: relative; }

.tarjeta-datos {
  display: flex; flex-wrap: wrap; gap: var(--e-sm) var(--e-md);
  margin-top: var(--e-2xs); padding-top: var(--e-xs);
  border-top: 1px solid var(--linea);
}
/* Cada dato es un par valor/etiqueta apilado: el valor arriba, en grande, y la
   etiqueta debajo en versalita. Antes iban en línea y «Libre acceso» se leía
   al revés que «6 cursos», que es lo que hacía la fila incomprensible. */
.tarjeta-datos span { display: flex; flex-direction: column; line-height: 1.15; }
.tarjeta-datos b {
  font-family: var(--f-titulo); font-weight: 600; font-size: 1.125rem;
  color: var(--azul);
}
.tarjeta-datos i {
  font-style: normal; font-size: var(--fs-mini);
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-tenue);
  margin-top: .15rem;
}

.chip {
  display: inline-block; padding: .2rem .6rem;
  font-size: var(--fs-mini); letter-spacing: .06em; text-transform: uppercase;
  background: var(--azul-tenue); color: var(--azul-medio); border-radius: 999px;
}
.chip-oro { background: #FBF3E2; color: var(--oro-tinta); }

/* Tarjeta de cátedra */
.tarjeta-catedra { text-align: center; }
.tarjeta-catedra img { margin: var(--e-md) auto var(--e-2xs); width: 8rem; height: auto; }
.tarjeta-catedra .lema {
  font-style: italic; font-size: var(--fs-mini); color: var(--oro-tinta);
  letter-spacing: .04em;
}

/* Tarjeta de persona */
.tarjeta-persona { text-align: center; border-top-color: var(--linea); }
.tarjeta-persona img {
  width: 9rem; height: 9rem; border-radius: 50%; object-fit: cover;
  margin: var(--e-md) auto var(--e-sm); border: 3px solid var(--crema);
  box-shadow: var(--sombra);
}
.tarjeta-persona .cargo {
  font-family: var(--f-titulo); font-size: var(--fs-mini);
  letter-spacing: .1em; text-transform: uppercase; color: var(--oro-tinta);
}

/* ─── BLOQUES EDITORIALES ─────────────────────────────────────────────────── */
.cita-destacada {
  border-left: 3px solid var(--oro); padding: .25rem 0 .25rem var(--e-md);
  margin-block: var(--e-md); max-width: var(--measure);
}
.cita-destacada p {
  font-style: italic; font-size: var(--fs-lead); line-height: var(--lh-ajustada);
  color: var(--tinta-suave);
}
.cita-destacada cite {
  display: block; margin-top: var(--e-2xs); font-style: normal;
  font-family: var(--f-titulo); font-size: var(--fs-mini);
  letter-spacing: var(--ls-versal); text-transform: uppercase; color: var(--oro-tinta);
}

/* Retrato de documento — pintura o fotografía histórica dentro de la columna de
   lectura. A diferencia de `.tarjeta-persona`, NO recorta a círculo: en estos
   retratos la composición entera (vestiduras, báculo, insignias) es parte del
   documento y un recorte cuadrado la destruye. */
.retrato-documento {
  margin: var(--e-lg) auto; max-width: 20rem; text-align: center;
}
.retrato-documento img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.retrato-documento figcaption {
  margin-top: var(--e-xs); font-size: var(--fs-mini);
  line-height: var(--lh-ajustada); color: var(--tinta-tenue);
  text-wrap: balance;
}
.retrato-documento figcaption b {
  display: block; font-family: var(--f-titulo); font-weight: 600;
  letter-spacing: var(--ls-versal); text-transform: uppercase;
  color: var(--oro-tinta);
}
.fondo-azul .retrato-documento img { border-color: rgba(217,164,61,.3); }
.fondo-azul .retrato-documento figcaption { color: #8FA1B3; }

.caja {
  background: var(--crema); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: var(--e-md);
}
.caja .eyebrow { margin-bottom: var(--e-2xs); }
.fondo-crema .caja { background: var(--papel); }

.lista-marcada li {
  display: flex; gap: var(--e-sm); padding: var(--e-xs) 0;
  border-bottom: 1px solid var(--linea);
}
.lista-marcada li:last-child { border-bottom: 0; }
.lista-marcada .num {
  flex: none; width: 1.85rem; height: 1.85rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: var(--oro);
  font-family: var(--f-titulo); font-weight: 600; font-size: var(--fs-mini);
}
/* --oro-oscuro #B78337 daba 2,88:1 sobre crema y 3,33:1 sobre blanco: no pasa
   AA. --oro-tinta da 4,98:1 y 5,75:1. En oscuro el token ya vale --oro. */
.lista-marcada .tick { flex: none; width: 1.85rem; color: var(--oro-tinta); text-align: center; }

/* Bloque 5/7 — imagen + texto */
/* `min-width: 0` es obligatorio: los hijos de una rejilla valen `min-width:auto`
   por defecto, así que una tabla ancha ensancha su columna por encima del
   contenedor y desborda la página entera. */
.bloque-57 { display: grid; gap: var(--e-lg); align-items: center; }
.bloque-57 > * { min-width: 0; }
@media (min-width: 768px) {
  .bloque-57 { grid-template-columns: 5fr 7fr; gap: var(--e-xl); }
  .bloque-57.invertido > :first-child { order: 2; }
}

/* Tabla comparativa: se convierte en tarjetas por debajo de 768 px */
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-comparativa th, .tabla-comparativa td {
  padding: var(--e-xs) var(--e-sm); text-align: left;
  border-bottom: 1px solid var(--linea); font-size: var(--fs-small);
}
.tabla-comparativa thead th {
  font-family: var(--f-titulo); font-size: var(--fs-mini);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--papel); background: var(--azul); border-bottom: 0;
}
.tabla-comparativa tbody tr:nth-child(even) { background: var(--crema-clara); }

/* Modificador .tabla-tarjetas — SE AÑADE porque faltaba de verdad.
   El comentario de arriba anunciaba «se convierte en tarjetas por debajo de
   768 px», pero el único mecanismo existente era el scroll horizontal de
   .tabla-envoltorio. La comparativa de /programas/ tiene siete columnas: a
   360 px es inservible con scroll, y el wireframe (§3.12) lo prohíbe
   expresamente. Cada <td> declara su rótulo en data-rotulo; el <thead> se
   oculta solo visualmente, de modo que el lector de pantalla sigue leyendo
   la tabla como tabla. Reutilizable en cualquier comparativa ancha. */
@media (max-width: 767px) {
  .tabla-tarjetas thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .tabla-tarjetas, .tabla-tarjetas tbody, .tabla-tarjetas tr,
  .tabla-tarjetas tbody th, .tabla-tarjetas td { display: block; width: 100%; }
  .tabla-tarjetas tr {
    background: var(--papel);
    border: 1px solid var(--linea); border-top: 3px solid var(--oro);
    border-radius: var(--radio); margin-bottom: var(--e-md); overflow: hidden;
  }
  .tabla-comparativa.tabla-tarjetas tbody tr:nth-child(even) { background: var(--papel); }
  .tabla-tarjetas tbody th[scope="row"] {
    font-family: var(--f-titulo); font-size: var(--fs-h4); font-weight: 600;
    line-height: var(--lh-titulo); color: var(--azul);
    background: var(--crema); text-transform: none; letter-spacing: 0;
  }
  /* `flex-wrap` y `min-width: 0` son imprescindibles: con `flex: none` en el
     rótulo, un par rótulo+valor largo desbordaba el <tr>, que recorta con
     `overflow: hidden`, y el valor desaparecía sin aviso a 360 px. */
  .tabla-tarjetas td {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: var(--e-2xs) var(--e-sm); text-align: right;
  }
  .tabla-tarjetas td::before {
    content: attr(data-rotulo);
    flex: 0 1 auto; min-width: 0; text-align: left;
    font-family: var(--f-titulo); font-size: var(--fs-mini);
    letter-spacing: .08em; text-transform: uppercase; color: var(--oro-tinta);
  }
  .tabla-tarjetas tr > :last-child { border-bottom: 0; }

  /* En modo tarjeta el encabezado de fila es el título: su enlace debe ocupar
     toda la zona pulsable, no el renglón de 25 px que ocupaba el texto. */
  .tabla-tarjetas tbody th[scope="row"] a {
    display: flex; align-items: center; min-height: 2.75rem;
  }

  /* Modo tarjeta sobre superficie oscura. Sin esto, `.tabla-tarjetas tr` pinta
     la fila de blanco mientras el texto sigue en claro por estilo en línea:
     desaparece. Es el mismo fallo que ya se vio en la tabla de MINTS. */
  .fondo-azul .tabla-tarjetas tr,
  .fondo-azul .tabla-comparativa.tabla-tarjetas tbody tr:nth-child(even) {
    background: rgba(255,255,255,.06);
    border-color: rgba(217,164,61,.30);
    border-top-color: var(--oro);
  }
  .fondo-azul .tabla-tarjetas tbody th[scope="row"] {
    background: rgba(217,164,61,.14); color: var(--oro);
  }
  .fondo-azul .tabla-tarjetas td { border-bottom-color: rgba(217,164,61,.20); }
}

/* Acordeón nativo para las mallas curriculares */
.acordeon { border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: var(--e-2xs); }
.acordeon summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-sm);
  padding: var(--e-xs) var(--e-sm); min-height: 3rem; cursor: pointer;
  font-family: var(--f-titulo); font-weight: 600; font-size: var(--fs-small);
  letter-spacing: .05em; text-transform: uppercase; color: var(--azul);
  list-style: none;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: '+'; font-size: 1.4em; color: var(--oro-oscuro); }
.acordeon[open] summary { background: var(--crema); border-bottom: 1px solid var(--linea); }
.acordeon[open] summary::after { content: '–'; }
.acordeon-cuerpo { padding: var(--e-sm); }

/* Banda de aliados */
.aliados { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--e-lg); }
.aliados a, .aliados div { display: block; text-align: center; text-decoration: none; }
.aliados img { height: 4rem; width: auto; margin-inline: auto; }
.aliados figcaption {
  margin-top: var(--e-2xs); font-family: var(--f-titulo);
  font-size: var(--fs-mini); letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinta-tenue);
}

/* Índice de página — solo para las páginas largas (p. ej. /el-seminario/escudo/).
   Se monta sobre .acordeon: <details open> nativo, así en móvil se pliega de un
   toque y sin JavaScript, y en escritorio queda abierto de entrada. */
.indice-pagina .acordeon-cuerpo li { padding: .35rem 0; border-bottom: 1px solid var(--linea); }
.indice-pagina .acordeon-cuerpo li:last-child { border-bottom: 0; }
.indice-pagina .acordeon-cuerpo a { font-size: var(--fs-small); }

/* Capitular de las páginas editoriales largas (p. ej. /el-seminario/raices/).
   Va en la serif de titulares y en oro-tinta (5,5:1), nunca en --oro. */
.capitular::first-letter {
  float: left; font-family: var(--f-titulo); font-weight: 600;
  font-size: 3.4em; line-height: .82;
  padding-right: .09em; margin-top: .05em;
  color: var(--oro-tinta);
}

/* Organigrama de gobierno — /el-seminario/gobierno/.
   Se dibuja con listas anidadas y filetes, NUNCA con una imagen: así el lector
   de pantalla recorre la jerarquía real, el texto se selecciona y se traduce, y
   no hay ningún dato encerrado en un PNG. */
.organigrama ol ol {
  margin-top: var(--e-sm); margin-left: var(--e-2xs);
  padding-left: var(--e-md); border-left: 2px solid var(--linea-fuerte);
}
.organigrama ol ol > li { position: relative; }
.organigrama ol ol > li + li { margin-top: var(--e-sm); }
.organigrama ol ol > li::before {
  content: ''; position: absolute; top: 1.4rem; left: calc(var(--e-md) * -1);
  width: var(--e-md); height: 2px; background: var(--linea-fuerte);
}
.org-nodo {
  display: block; background: var(--papel);
  border: 1px solid var(--linea); border-left: 3px solid var(--oro);
  border-radius: var(--radio); padding: var(--e-xs) var(--e-sm);
}
.org-nodo b {
  display: block; font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--fs-h5); letter-spacing: var(--ls-titulo); color: var(--azul);
}
.org-nodo span { display: block; font-size: var(--fs-mini); color: var(--tinta-tenue); }
.org-nodo-alto { border-left-color: var(--azul); }

/* Migas de pan */
.migas { font-size: var(--fs-mini); color: var(--tinta-tenue); padding-block: var(--e-xs); }
.migas ol { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.migas li:not(:last-child)::after { content: '›'; margin-left: .35rem; color: var(--oro-oscuro); }
.migas a { color: var(--tinta-suave); }

/* ════════════════════════════════════════════════════════════════════════════
   SUPERFICIES OSCURAS — bloque único

   Todos los componentes de arriba están pensados para fondo claro. Puestos
   sobre `.fondo-azul`, `.hero`, `.barra-cta` o el pie heredaban colores claros
   sobre fondos claros (o al revés) y el texto desaparecía. En vez de parchear
   caso por caso, aquí se reasigna TODO lo que cambia sobre oscuro.

   Regla para quien amplíe esto: si añades un componente nuevo, comprueba cómo
   se ve dentro de `.fondo-azul` ANTES de darlo por terminado.
   ═════════════════════════════════════════════════════════════════════════ */
.fondo-azul, .hero { --linea: rgba(217,164,61,.28); --linea-fuerte: rgba(217,164,61,.5); }

/* Texto y énfasis */
.fondo-azul strong, .fondo-azul b,
.hero strong, .hero b { color: var(--oro); }
.fondo-azul .lead, .hero .lead { color: #CFD8E0; }
.fondo-azul p, .fondo-azul li, .fondo-azul dd { color: #D6DEE6; }

/* Tablas: el rayado cebra en crema deja texto claro sobre casi blanco */
.fondo-azul .tabla-comparativa th,
.fondo-azul .tabla-comparativa td {
  color: #E8E1D6; border-bottom-color: rgba(217,164,61,.22);
}
.fondo-azul .tabla-comparativa thead th { color: var(--azul); background: var(--oro); }
.fondo-azul .tabla-comparativa tbody tr:nth-child(even) { background: rgba(255,255,255,.055); }
.fondo-azul .tabla-comparativa tbody tr:hover { background: rgba(217,164,61,.10); }
.fondo-azul .tabla-comparativa caption { color: #C9BFAF; }

/* Cajas y tarjetas */
.fondo-azul .caja {
  background: rgba(255,255,255,.05); border-color: rgba(217,164,61,.3); color: #D6DEE6;
}
.fondo-azul .tarjeta { background: rgba(255,255,255,.05); border-color: rgba(217,164,61,.25); }
.fondo-azul .tarjeta h3 { color: var(--papel); }
.fondo-azul .tarjeta p { color: #C9BFAF; }
.fondo-azul .tarjeta-datos { border-top-color: rgba(217,164,61,.25); color: #C9BFAF; }
.fondo-azul .tarjeta-datos b, .fondo-azul .tarjeta-datos dd { color: var(--oro); }

/* Listas, citas, acordeones y chips */
.fondo-azul .lista-marcada li { border-bottom-color: rgba(217,164,61,.22); }
.fondo-azul .lista-marcada .num { background: var(--oro); color: var(--azul); }
.fondo-azul .lista-marcada .tick { color: var(--oro); }
.fondo-azul .cita-destacada p { color: #D6DEE6; }
.fondo-azul .cita-destacada cite { color: var(--oro); }
.fondo-azul .chip { background: rgba(217,164,61,.16); color: var(--oro); }
.fondo-azul .acordeon { border-color: rgba(217,164,61,.28); }
.fondo-azul .acordeon summary { color: var(--papel); }
.fondo-azul .acordeon[open] summary { background: rgba(255,255,255,.05); }
.fondo-azul .filete i { background: var(--oro); }
.fondo-azul .regla-oro { background: var(--oro); }
/* El hero es superficie oscura pero NO lleva .fondo-azul: si no se nombra aquí,
   .btn-nota se queda en --tinta-tenue (oscuro) sobre azul y no se lee. */
.fondo-azul .btn-nota, .hero .btn-nota { color: #9FB0C0; }
.fondo-azul .btn-nota a, .hero .btn-nota a { color: var(--oro); }
.fondo-azul .migas, .fondo-azul .migas a { color: #B8C4CE; }

/* ─── PIE ─────────────────────────────────────────────────────────────────── */
.pie-sitio { background: var(--azul); color: #C9BFAF; padding-block: var(--e-2xl) 0; }
.pie-rejilla { display: grid; gap: var(--e-lg); }
@media (min-width: 600px)  { .pie-rejilla { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .pie-rejilla { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e-xl); } }
.pie-sitio h2 {
  font-size: var(--fs-mini); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase; color: var(--oro); margin-bottom: var(--e-sm);
}
.pie-sitio ul li { margin-bottom: .5rem; }
/* `:not(.btn)` por la misma razón que en .fondo-azul: sin él estas reglas ganan
   a .btn-cta y un botón puesto en el pie saldría con color de enlace y subrayado
   al pasar el ratón. Hoy no hay ninguno; el día que lo haya, no se romperá. */
.pie-sitio a:not(.btn) { color: #C9BFAF; text-decoration: none; font-size: var(--fs-small); }
.pie-sitio a:not(.btn):hover { color: var(--papel); text-decoration: underline; }
.pie-marca img { height: 5rem; width: auto; margin-bottom: var(--e-sm); }
.pie-marca p { font-size: var(--fs-small); line-height: 1.5; }

/* Identidad del pie: el nombre en una pieza y la afiliación debajo.
   Antes iba en un solo párrafo con negrita a media frase, que partía mal de
   línea y ensuciaba el bloque. */
.pie-nombre {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: .9375rem; line-height: 1.3; letter-spacing: .06em;
  text-transform: uppercase; color: var(--papel);
}
.pie-afiliacion {
  margin-top: .35rem; font-size: var(--fs-small);
  color: #C9BFAF; font-style: italic;
}
.pie-marca .versal { display: block; line-height: 1.5; }

/* ─── VALORES (home) ──────────────────────────────────────────────────────── */
/* Cuatro cajas de texto sin ancla visual parecían marcadores de posición.
   Un símbolo dorado y jerarquía real las convierten en contenido. */
.rejilla-valores { display: grid; gap: var(--e-md); }
@media (min-width: 600px)  { .rejilla-valores { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .rejilla-valores { grid-template-columns: repeat(4,1fr); } }

.valor {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--e-2xs);
  background: var(--papel); border: 1px solid var(--linea);
  border-top: 3px solid var(--oro);
  border-radius: var(--radio); padding: var(--e-md) var(--e-sm);
}
.valor-marca { width: 2.25rem; height: 2.25rem; fill: var(--oro-oscuro); margin-bottom: var(--e-3xs); }
.valor h3 {
  font-size: var(--fs-h5); letter-spacing: var(--ls-versal);
  text-transform: uppercase; color: var(--azul);
}
.valor p { font-size: var(--fs-small); color: var(--tinta-suave); margin: 0; }
.pie-lema {
  font-family: var(--f-titulo); font-size: var(--fs-small);
  letter-spacing: var(--ls-versal); color: var(--oro); margin-top: var(--e-sm);
}
.pie-legal {
  margin-top: var(--e-xl); padding-block: var(--e-sm);
  border-top: 1px solid rgba(217,164,61,.25);
  display: flex; flex-wrap: wrap; gap: var(--e-xs) var(--e-md);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-mini); color: #8FA1B3;
}
.pie-legal a { font-size: var(--fs-mini); }

/* Holgura del menú por tramos: a 1200 px va justo, a 1440 respira. */
@media (min-width: 1200px) and (max-width: 1439px) {
  .nav-principal { gap: 0; }
  .nav-principal > li > a, .nav-principal > li > button { padding-inline: .55rem; font-size: .95rem; }
  .marca-texto b { font-size: .75rem; }
  .marca-texto span { font-size: .625rem; }
}
@media (min-width: 1440px) {
  .nav-principal > li > a, .nav-principal > li > button { padding-inline: .95rem; }
}