@charset "UTF-8";
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/** Media Queries **/
/** ─────────────────────────────────────────────────────────────────────────
    Escala `max-width` — la que usa el PANEL

    Los cuatro mixins de arriba son `min-width` y no los usa nadie (0 llamadas en
    todo el proyecto). El panel, en cambio, es `max-width` de arriba abajo, con 16
    valores distintos escritos a mano. Esta escala se añade AL LADO en vez de
    reescribir aquellos: cambiar su semántica rompería cualquier uso futuro, y
    reescribir los ~25 breakpoints ya existentes de `intranet/shell/` (3857 líneas)
    tendría riesgo de regresión sin comprar nada.

    **Regla: mixin en lo nuevo, ad-hoc intacto en lo viejo.** Los valores sueltos
    (1100, 1050, 1000, 760, 700, 640, 600, 560, 480) migran cuando se toque su
    partial, no antes.

    ⚠️ `hasta-lg` (1024px) NO es negociable: es exactamente donde el sidebar pasa a
    drawer en `intranet/shell/`, y ese umbral está además en `layouts/intranet.php` y
    en `intranet/componentes/sidebar.js`. Cambiarlo aquí sin cambiarlo allí descuadra el layout.
    ───────────────────────────────────────────────────────────────────────── */
/* ⚠️ Aquí NO va `font-size: 62.5%`. Estuvo declarado y era letra muerta:
   `base/_reset.scss` declara `html { font-size: 16px }`, misma especificidad, y
   `app.scss` importa `estaticas` DESPUÉS que `base`, así que ganaba el 16px.
   La declaración fantasma costó dos partials del panel escritos en la escala de 10px que
   salían 1,6× más grandes de lo previsto. **1rem = 16px**, y la raíz se toca en
   `base/_reset.scss` — que además afecta al sitio público. */
html {
  box-sizing: border-box;
}

html.i18n-pending body {
  visibility: hidden;
}

html.i18n-pending.i18n-fallback body {
  visibility: visible;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  font-family: "Outfit", sans-serif;
  font-size: 1.8rem;
}

a {
  text-decoration: none;
}

img {
  width: 100%;
  height: auto;
}

h1 {
  font-size: 4rem;
}

h2 {
  font-size: 3.6rem;
}

h3 {
  font-size: 3rem;
}

.text-center {
  text-align: center;
}

:root {
  /* ---------- COLORES PRINCIPALES ---------- */
  --col-bilbao: #4D8ABB;
  --col-espiritu: #7DC6E5;
  --col-herencia: #374C69;
  --col-accent-pop: #F1C400;
  /* ---------- PALETA DE CATEGORÍAS ----------
     Los 10 colores del proyecto, en su orden cromático (naranja → rojo). Se
     usan en las categorías del blog y en los acentos del panel (acciones de
     tabla, chips, tarjetas del home). Hasta ahora solo existían en prosa en
     CLAUDE.md y repetidos a mano en cada partial. */
  --pal-naranja: #fc6722;
  --pal-ambar: #f5b400;
  --pal-lima: #8ac926;
  --pal-verde: #34a853;
  --pal-turquesa: #46bdc6;
  --pal-azul: #4285f4;
  --pal-indigo: #4267ac;
  --pal-morado: #aa2296;
  --pal-magenta: #ea075a;
  --pal-rojo: #e51022;
  /* Tinta oscura para fondos claros de la paleta (ámbar, lima, turquesa):
     el blanco no pasa AA sobre ellos. */
  --pal-tinta: #0B1F3D;
  /* ---------- PERMISOS: los CUATRO estados de un módulo ----------
     Sin acceso = rojo · Ver = azul · Editar = verde · Administrar = amarillo. Cada estado es un FONDO
     SÓLIDO (decisión del dueño, oct-2026: primero fue blanco con anillo y lo pidió sólido). Los usan
     el formulario de usuarios (`.perm`) y la ficha (`.ufi-pg`): una sola definición para que no se
     separen.
     `--nv-*` es el RELLENO. `--nc-*` es lo que se escribe ENCIMA (glifo y texto): blanco sobre rojo
     (4,7:1), azul (5,5:1) y verde (~5:1), y la tinta oscura sobre el amarillo (8,9:1: el blanco sobre
     ámbar da 1,9:1, la regla de siempre). `--nt-*` es la TINTA para escribir el mismo color sobre BLANCO
     (lo que no va relleno: el escalón «incluido» de una fila, un glifo suelto), todas por encima de
     4,5:1; el ámbar a pelo sobre blanco da 1,9:1 y su tinta es el ocre oscuro. */
  --nv-ninguno: var(--pal-rojo);
  --nv-lectura: var(--pal-indigo);
  --nv-escritura: color-mix(in srgb, var(--pal-verde) 70%, var(--pal-tinta));
  --nv-admin: var(--pal-ambar);
  --nc-ninguno: #fff;
  --nc-lectura: #fff;
  --nc-escritura: #fff;
  --nc-admin: var(--pal-tinta);
  --nt-ninguno: color-mix(in oklab, var(--pal-rojo) 82%, black);
  --nt-lectura: color-mix(in oklab, var(--pal-indigo) 82%, var(--pal-tinta));
  --nt-escritura: color-mix(in srgb, var(--pal-verde) 55%, var(--pal-tinta));
  --nt-admin: #7a5c00;
  /* ---------- TEXTO ---------- */
  --col-texto: #1A202C;
  --text-dark: #1A202C;
  --text-gray: #4A5568;
  --text-light: #FFFFFF;
  --col-blanco: #FFFFFF;
  /* ---------- FONDOS ---------- */
  --bg-global: #F9FBFE;
  --bg-dark: #0F172A;
  --bg-secondary: #F5F5F7;
  /* ---------- BORDES ---------- */
  --col-borde: rgba(77, 138, 187, 0.15);
  /* ---------- LAYOUT ---------- */
  --container-width: 1280px;
  --header-height: 80px;
  /* Botones circulares del topbar del panel (campana · avatar · salir).
     Un solo token: los tres deben medir lo mismo. */
  --tb-btn: 40px;
  /* Alto de fila de las rejillas de horario. TODAS las filas miden lo mismo, sin
     excepción: la altura proporcional a la duración del tramo hacía que un profesor
     de dos niveles viera casillas de tres alturas distintas y se leyera como un fallo
     de maquetación. 62px es lo que medía el tramo de 50 min, el dominante, así que
     las vistas por grupo y por aula quedan pixel-idénticas.
     `.hed-grid` (editor) usa el mismo token; `.supl-week` es rejilla de apoyo DENTRO
     de un formulario, no la vista principal, y por eso va más baja a propósito:
     uniformidad dentro de cada rejilla, jerarquía entre ellas. */
  --hor-fila: 62px;
  --hor-fila-compacta: 46px;
  /* ---------- ESPACIADO ---------- */
  --sp-sm: 24px;
  --sp-md: 48px;
  --sp-lg: 80px;
  --sp-xl: 120px;
  /* ---------- GUTTERS ---------- */
  --gutter-mobile: 24px;
  --gutter-desktop: 64px;
  /* ---------- RADIOS ---------- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-card: 24px;
  --radius-pill: 100px;
  /* ---------- SOMBRAS ---------- */
  --shadow-float:
      0 30px 60px -10px rgba(77, 138, 187, 0.2),
      0 10px 20px -5px rgba(0, 0, 0, 0.05);
  --shadow-input:
      0 4px 10px rgba(0, 0, 0, 0.03);
  /* ---------- TRANSICIONES ---------- */
  --transition-fast: 0.2s ease;
  --transition-std: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --transition-bezi: cubic-bezier(0.25, 0.8, 0.25, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: "Outfit", sans-serif;
  background-color: var(--bg-global);
  color: var(--col-texto);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  text-decoration: none;
  color: inherit;
  transition: 0.4s var(--transition-bezi);
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

p {
  margin-bottom: 1rem;
  font-weight: 400;
}

main {
  padding-top: 0;
}

/* =========================================================
   TEMA CLARO / OSCURO DEL SITIO PÚBLICO — tokens semánticos
   El interruptor es el botón del header (src/js/publico/theme.js), que guarda
   `bilbao_theme` en localStorage. El guard del <head> de views/layouts/publico.php
   estampa `data-theme="dark"` en <html> ANTES del primer pintado: sin él cada
   navegación pintaba la página en claro y luego saltaba a oscuro.

   Cómo se usa (reglas para todo partial de publico/):
   - Superficies y texto de página van con los `--p-*` de aquí, NO con hex a mano ni
     con `#fff`: un blanco literal es un hueco blanco en oscuro.
   - `--col-herencia` y `--col-bilbao` son COLORES DE MARCA y no cambian: siguen
     valiendo como fondo de botones y bandas con texto blanco. Cuando se usan como
     TINTA (títulos, enlaces, iconos sobre la página) se escribe `--p-titulo` /
     `--p-acento`, que en oscuro se aclaran.
   - Los tokens de texto/fondo de base/_tokens.scss (`--col-texto`, `--text-gray`,
     `--bg-global`, `--col-borde`…) SÍ se redefinen aquí: casi todos sus usos son
     de texto o de fondo de página. Si alguno se usa al revés (p. ej.
     `color: var(--bg-global)` sobre una banda oscura), ese uso pasa a un literal.
   - Mismos valores que la paleta oscura de la landing (`_home.scss`): el sitio es uno.
   - Solo se carga en el público (publico.css); la intranet no tiene tema oscuro y
     nunca lleva `data-theme`.
========================================================= */
:root {
  --p-fondo: #FFFFFF;
  --p-fondo-alt: #F9FBFE; /* bandas alternas, = --bg-global */
  --p-superficie: #FFFFFF; /* tarjetas, paneles, desplegables */
  --p-superficie-alt: #F4F7FB; /* hundido: inputs, chips, filas pares */
  --p-titulo: var(--col-herencia);
  --p-texto: var(--col-texto);
  --p-texto-suave: var(--text-gray);
  --p-acento: var(--col-bilbao); /* tinta de marca: enlaces, iconos, eyebrows */
  --p-linea: rgba(77, 138, 187, .15);
  --p-tinte: rgba(77, 138, 187, .08); /* hover y fondos teñidos de marca */
  --p-sombra: rgba(22, 32, 46, .12);
  --p-header: rgba(255, 255, 255, .97);
}

[data-theme=dark] {
  color-scheme: dark;
  --p-fondo: #081320;
  --p-fondo-alt: #0C1F33;
  --p-superficie: #0F2439;
  --p-superficie-alt: #132B43;
  --p-titulo: #EAF4FF;
  --p-texto: #D3E1EF;
  --p-texto-suave: #9DB1C7; /* 7:1 sobre --p-superficie */
  --p-acento: #7DC6E5;
  --p-linea: rgba(125, 198, 229, .16);
  --p-tinte: rgba(125, 198, 229, .10);
  --p-sombra: rgba(0, 0, 0, .45);
  --p-header: rgba(8, 19, 32, .92);
  /* Tokens heredados de base/_tokens.scss que son de texto o de fondo */
  --col-texto: #D3E1EF;
  --text-dark: #EAF4FF;
  --text-gray: #9DB1C7;
  --bg-global: #081320;
  --bg-secondary: #0C1F33;
  --bg-offwhite: #0C1F33;
  --col-borde: rgba(125, 198, 229, .16);
  --shadow-float:
      0 30px 60px -10px rgba(0, 0, 0, .5),
      0 10px 20px -5px rgba(0, 0, 0, .3);
  --shadow-input: 0 4px 10px rgba(0, 0, 0, .25);
}

/* El fondo va también en <html>: el overscroll y el hueco bajo un body corto no
   pueden asomar en blanco. */
html[data-theme=dark] {
  background: var(--p-fondo);
}

body {
  background: var(--p-fondo);
  color: var(--p-texto);
}

/* El logo es un PNG azul: sobre el azul noche casi desaparece. En oscuro se aclara
   entero (no hay versión en blanco del archivo). */
[data-theme=dark] :is(.logo-img, .footer-logo-img) {
  filter: brightness(0) invert(1) opacity(0.92);
}

.text-gradient {
  background: linear-gradient(135deg, var(--col-bilbao) 0%, var(--col-espiritu) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.visible {
  display: block !important;
}

.rotate {
  transform: rotate(180deg);
}

.no-scroll {
  overflow: hidden;
}

.section-header-center {
  text-align: center;
  margin-bottom: 60px;
}

.section-tag {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--col-espiritu);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  position: relative;
  z-index: 2;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--col-bilbao);
  color: white;
  padding: 8px;
  z-index: 2000;
  transition: top 0.3s;
}
.skip-link:focus {
  top: 0;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scrollCarousel {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-2000px);
  }
}
@keyframes scrollMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(50px, 50px);
  }
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes floatUpDown {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-18px);
  }
}
@keyframes floatUpDownSlow {
  0%, 100% {
    transform: translateY(0px) rotate(-2deg);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}
@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.7);
  }
}
@keyframes scrollDot {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  50% {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
@keyframes shimmerBg {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes blobMove {
  0%, 100% {
    border-radius: 60% 40% 30% 70%/60% 30% 70% 40%;
  }
  50% {
    border-radius: 30% 60% 70% 40%/50% 60% 30% 60%;
  }
}
@keyframes titleCycle {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  30% {
    opacity: 0;
    transform: translateY(-20px);
  }
  70% {
    opacity: 0;
    transform: translateY(20px);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.btn-primario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 36px;
  border-radius: 100px;
  background-color: var(--col-bilbao);
  color: white;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-primario:hover {
  transform: translateY(-3px);
}
.btn-primario {
  font-size: 1rem;
  box-shadow: 0 6px 20px rgba(77, 138, 187, 0.28);
}
.btn-primario:hover {
  background-color: var(--col-herencia);
  box-shadow: 0 12px 30px rgba(55, 76, 105, 0.35);
}

.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 34px;
  border-radius: 100px;
  background: transparent;
  border: 2px solid var(--p-acento);
  color: var(--p-acento);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-secundario:hover {
  transform: translateY(-3px);
}
.btn-secundario {
  font-size: 1rem;
}
.btn-secundario:hover {
  background: var(--col-bilbao);
  border-color: var(--col-bilbao);
  color: white;
  box-shadow: 0 8px 20px rgba(77, 138, 187, 0.25);
}

.btn-terciario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  border-radius: 100px;
  background-color: white;
  color: var(--col-bilbao);
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-terciario:hover {
  transform: translateY(-3px);
}
.btn-terciario {
  font-size: 1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.btn-terciario:hover {
  color: var(--col-herencia);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 3rem;
  border-radius: 100px;
  background-color: var(--col-bilbao);
  color: white;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
}
.btn-submit:hover {
  transform: translateY(-3px);
}
.btn-submit {
  display: flex;
  width: 100%;
  border: none;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  gap: 10px;
  box-shadow: 0 10px 20px rgba(77, 138, 187, 0.3);
  cursor: pointer;
}
.btn-submit:hover {
  background-color: var(--col-herencia);
  box-shadow: 0 15px 30px rgba(77, 138, 187, 0.4);
}
.btn-submit svg {
  width: 20px;
  height: 20px;
  animation: none;
}
.btn-submit.loading svg {
  animation: spin 1s linear infinite;
}

.btn-direct {
  --btn-direct-borde: #E2E8F0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 1.2rem 1.2rem;
  font-size: 16px;
  border-radius: 12px;
  background: var(--p-superficie);
  color: var(--p-acento);
  font-weight: 700;
  border: 2px solid var(--btn-direct-borde);
  transition: all 0.3s;
  box-shadow: var(--shadow-input);
  width: 100%;
}
.btn-direct:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
  border-color: var(--col-espiritu);
}

.btn-whatsapp {
  --btn-wa-fondo: #f0fdf4;
  color: #25D366;
  border-color: #25D366;
  background: var(--btn-wa-fondo);
}
.btn-whatsapp:hover {
  background: #25D366;
  color: white;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 0.82rem;
  background: var(--p-superficie);
  border: 1px solid var(--col-borde);
  color: var(--p-titulo);
  font-weight: 700;
  transition: all 0.3s ease;
}
.filter-btn:hover {
  border-color: var(--p-acento);
  color: var(--p-acento);
  transform: translateY(-2px);
}
.filter-btn.active {
  background: var(--col-bilbao);
  color: #fff;
  border-color: var(--col-bilbao);
  box-shadow: 0 10px 20px rgba(77, 138, 187, 0.18);
}

[data-theme=dark] .btn-direct {
  --btn-direct-borde: var(--p-linea);
}
[data-theme=dark] .btn-whatsapp {
  --btn-wa-fondo: rgba(37, 211, 102, .10);
}

.header-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: var(--p-header);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(77, 138, 187, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}
.header-bar.scrolled {
  box-shadow: 0 4px 24px rgba(22, 32, 46, 0.08);
}

.header-inner {
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.logo-link {
  display: flex;
  align-items: center;
  z-index: 1002;
  flex-shrink: 0;
}

.logo-img {
  height: 54px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* ── DESKTOP NAV ─────────────────────────────── */
.header-nav {
  display: none;
  align-items: center;
  gap: 1px;
  flex: 1;
  justify-content: center;
}
@media (min-width: 1024px) {
  .header-nav {
    display: flex;
  }
}
@media (min-width: 1200px) {
  .header-nav {
    gap: 3px;
  }
}
.header-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 8px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--p-titulo);
  text-decoration: none;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
@media (min-width: 1200px) {
  .header-nav__link {
    padding: 8px 11px;
    font-size: 0.86rem;
  }
}
.header-nav__link:hover {
  color: var(--p-acento);
  background: rgba(77, 138, 187, 0.07);
}
.header-nav {
  /* ── Ítem con submenú (dropdown) ── */
}
.header-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}
.header-nav__caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: 0.6;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.header-nav__item:hover .header-nav__caret, .header-nav__item:focus-within .header-nav__caret {
  opacity: 1;
  transform: translateY(0) rotate(225deg);
}
.header-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 232px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255, 255, 255, 0.98); /* en oscuro: ver el bloque del final */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--col-borde);
  border-radius: var(--radius-md);
  box-shadow: 0 24px 48px -18px rgba(22, 32, 46, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
  z-index: 1001;
}
.header-nav__item:hover .header-nav__dropdown, .header-nav__item:focus-within .header-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.header-nav__sublink {
  display: block;
  padding: 9px 12px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--p-titulo);
  text-decoration: none;
  border-radius: 9px;
  white-space: nowrap;
  transition: color 0.18s, background 0.18s;
}
.header-nav__sublink:hover, .header-nav__sublink:focus-visible {
  color: var(--p-acento);
  background: rgba(77, 138, 187, 0.09);
}

/* ── CONTROLES DERECHA ───────────────────────── */
.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1002;
  flex-shrink: 0;
}

.lang-switch {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--p-titulo);
  white-space: nowrap;
}

.lang-switch__btn {
  color: inherit;
  text-decoration: none;
}

.lang-switch .active {
  color: var(--p-acento);
  text-decoration: underline;
  text-underline-offset: 4px;
  pointer-events: none;
}

.header-theme-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(77, 138, 187, 0.22);
  background: transparent;
  color: var(--p-titulo);
  font-size: 1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink: 0;
}
.header-theme-btn:hover {
  background: rgba(77, 138, 187, 0.1);
  border-color: var(--p-acento);
  color: var(--p-acento);
}

.header-agenda-btn {
  display: none;
  padding: 9px 20px;
  border-radius: 100px;
  background: var(--col-bilbao);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s;
}
.header-agenda-btn:hover {
  background: var(--col-herencia);
  transform: translateY(-1px);
}
@media (min-width: 768px) {
  .header-agenda-btn {
    display: inline-flex;
    align-items: center;
  }
}
.header-agenda-btn {
  /* «Agenda tu visita» es más largo que el «Agenda» de antes: entre 1024 y 1200px el nav ya va justo,
     así que ahí el botón se compacta (y el texto no se parte). */
}
@media (min-width: 1024px) and (max-width: 1200px) {
  .header-agenda-btn {
    padding: 8px 14px;
    font-size: 0.8rem;
  }
}

.menu-trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  color: var(--p-acento);
}
@media (min-width: 1024px) {
  .menu-trigger {
    display: none;
  }
}

.hamburger-icon {
  width: 28px;
  height: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hamburger-icon span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--p-acento);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-global);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  overflow-y: auto;
}

.menu-overlay[aria-hidden=false] {
  opacity: 1;
  visibility: visible;
}

.overlay-header {
  flex-shrink: 0;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border-bottom: 1px solid rgba(77, 138, 187, 0.1);
}

.close-btn {
  width: 44px;
  height: 44px;
  position: relative;
  color: var(--p-acento);
}
.close-btn::before, .close-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 2px;
  background-color: currentColor;
}
.close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.overlay-content {
  flex-grow: 1;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px;
}

.nav-accordion-item {
  border-bottom: 1px solid var(--col-borde);
}

.nav-accordion-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--p-titulo);
  text-align: left;
  transition: color 0.2s;
}
.nav-accordion-trigger:hover, .nav-accordion-trigger[aria-expanded=true] {
  color: var(--p-acento);
}
.nav-accordion-trigger .chevron {
  transition: transform 0.3s ease;
  font-size: 1rem;
}
.nav-accordion-trigger[aria-expanded=true] .chevron {
  transform: rotate(180deg);
}

.nav-submenu {
  display: none;
  padding-bottom: 24px;
  padding-left: 24px;
  border-left: 2px solid var(--col-espiritu);
  margin-left: 4px;
}
.nav-submenu li {
  margin-bottom: 16px;
}
.nav-submenu a {
  font-size: 1.1rem;
  color: var(--col-texto);
  font-weight: 500;
}
.nav-submenu a:hover {
  color: var(--p-acento);
}

/* =========================================================
   TEMA OSCURO — solo lo que un token no resuelve
   Los tintes de hover, los bordes y las sombras del header están escritos con el
   azul de marca en rgba: en claro se quedan tal cual (píxel a píxel) y aquí se
   pasan a los tokens de _tema.scss. Las sombras con tinta azul oscura no se ven
   sobre el azul noche: en oscuro son negras y más densas.
========================================================= */
[data-theme=dark] .header-bar {
  border-bottom-color: var(--p-linea);
}
[data-theme=dark] .header-bar.scrolled {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}
[data-theme=dark] .header-nav__link:hover,
[data-theme=dark] .header-nav__sublink:hover,
[data-theme=dark] .header-nav__sublink:focus-visible {
  background: var(--p-tinte);
}
[data-theme=dark] {
  /* El desplegable es una superficie: el mismo cristal que el header, un punto
     más opaco para que el texto de debajo no se cuele entre las opciones. */
}
[data-theme=dark] .header-nav__dropdown {
  background: rgba(15, 36, 57, 0.98);
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.7);
}
[data-theme=dark] .header-theme-btn {
  border-color: rgba(125, 198, 229, 0.28);
}
[data-theme=dark] .header-theme-btn:hover {
  background: var(--p-tinte);
}
[data-theme=dark] .overlay-header {
  border-bottom-color: var(--p-linea);
}

/* Footer completo del index */
.footer-site {
  background-color: var(--p-fondo);
  position: relative;
  z-index: 10;
  border-top: 1px solid var(--col-borde);
  padding-top: 60px;
  font-size: 14px;
  color: var(--p-titulo);
}

.footer-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-header {
  display: flex;
  flex-direction: column;
  margin-bottom: 40px;
  align-items: flex-start;
}
.footer-header span {
  font-size: 16px;
}

.footer-logo-link {
  display: inline-block;
  margin-bottom: 16px;
}

.footer-logo-img {
  height: 77px;
  width: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
}

.footer-social-desktop {
  display: none;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--p-titulo);
  margin-right: 12px;
  transition: color 0.22s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.social-link:hover {
  color: var(--p-acento);
  transform: translateY(-3px) scale(1.12);
}

.social-icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.footer-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

.footer-desc {
  margin-bottom: 20px;
  font-size: 0.82rem;
  line-height: 1.65;
  text-align: left;
}

/* Bloque de información con jerarquía por iconos */
.footer-info {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-info__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.footer-info__ico {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: rgba(77, 138, 187, 0.1);
  color: var(--p-acento);
  font-size: 0.82rem;
}

.footer-info__label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--p-acento);
  margin-bottom: 4px;
}

.footer-info__value {
  display: block;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--p-titulo);
}

.footer-phone {
  display: block;
  font-weight: 600;
  color: var(--p-titulo);
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer-phone:hover {
  color: var(--p-acento);
}
.footer-phone__tag {
  display: inline-block;
  min-width: 88px;
  font-weight: 400;
  color: var(--p-titulo);
  opacity: 0.7;
}

.footer-hours {
  border-collapse: collapse;
  width: 100%;
  max-width: 220px;
  margin-top: 4px;
  font-size: 0.76rem;
}
.footer-hours tbody th {
  text-align: left;
  font-weight: 700;
  color: var(--p-titulo);
  padding: 4px 12px 4px 0;
  white-space: nowrap;
}
.footer-hours tbody td {
  font-variant-numeric: tabular-nums;
  color: var(--p-titulo);
  text-align: right;
  padding: 4px 0 4px 12px;
  white-space: nowrap;
}
.footer-hours tbody tr + tr th, .footer-hours tbody tr + tr td {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.footer-hours .is-closed {
  color: #b0b8c2;
  font-style: italic;
}

.footer-social-mobile {
  margin-top: 24px;
  margin-bottom: 32px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.footer-col-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--p-acento);
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.footer-links {
  display: none;
  margin-bottom: 24px;
}
.footer-links li {
  margin-bottom: 9px;
}
.footer-links a {
  position: relative;
  display: inline-block;
  font-size: 0.82rem;
  color: var(--p-titulo);
  text-decoration: none;
  background-image: linear-gradient(var(--p-acento), var(--p-acento));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  transition: color 0.22s ease, transform 0.22s ease, background-size 0.28s ease;
}
.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--p-acento);
  transform: translateX(4px);
  background-size: 100% 1.5px;
}

/* CTA de admisiones + horario dentro del bloque de identidad */
.footer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 11px 22px;
  border-radius: 100px;
  background: var(--col-bilbao);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.footer-cta:hover {
  background: var(--col-herencia);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(22, 32, 46, 0.45);
}

.footer-map-link {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-bottom: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--p-acento);
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.footer-map-link:hover {
  color: var(--p-titulo);
  transform: translateX(3px);
}

.footer-legal {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--col-borde);
  font-size: 0.72rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  opacity: 0.7;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.footer-copyright {
  text-align: center;
}

/* ---- RESPONSIVE ---- */
@media (min-width: 600px) {
  .footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 34px;
  }
}
@media (min-width: 1024px) {
  .footer-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .footer-social-desktop {
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .footer-grid {
    grid-template-columns: 1.25fr 1.75fr;
    gap: 56px;
  }
  .footer-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px 40px;
  }
  .footer-identity {
    grid-column: auto;
  }
  .footer-links {
    display: block !important;
  }
  .footer-col-title {
    pointer-events: none;
    cursor: default;
  }
  .footer-col-title .chevron {
    display: none;
  }
  .footer-social-mobile {
    display: none;
  }
  .footer-legal {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
/* Chevron del acordeón (solo visible < 1024px) */
.footer-col-title .chevron {
  transition: transform 0.22s ease;
  font-size: 0.6rem;
  opacity: 0.55;
}

.footer-col-title[aria-expanded=true] .chevron {
  transform: rotate(180deg);
}

/* =========================================================
   MÓVIL — disposición compacta
========================================================= */
@media (max-width: 767px) {
  .footer-site {
    padding-top: 40px;
  }
  .footer-container {
    padding: 0 20px;
  }
  /* Cabecera: logo centrado y más contenido */
  .footer-header {
    align-items: center;
    text-align: center;
    margin-bottom: 26px;
  }
  .footer-logo-link {
    margin-bottom: 0;
  }
  .footer-logo-img {
    height: 56px;
    margin: 0 auto;
  }
  .footer-grid {
    gap: 26px;
  }
  .footer-desc {
    text-align: center;
    margin-bottom: 24px;
    font-size: 0.86rem;
  }
  /* Bloque de datos */
  .footer-info {
    gap: 18px;
    margin-bottom: 22px;
  }
  .footer-info__row {
    gap: 13px;
  }
  .footer-info__ico {
    width: 36px;
    height: 36px;
    font-size: 0.82rem;
  }
  .footer-info__label {
    font-size: 0.66rem;
  }
  .footer-info__value {
    font-size: 0.86rem;
  }
  /* Teléfonos: etiqueta y número en extremos, fáciles de tocar */
  .footer-phone {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
  }
  .footer-phone__tag {
    min-width: 0;
  }
  /* Horario: tabla compacta a todo el ancho de su columna */
  .footer-hours {
    max-width: 100%;
    font-size: 0.82rem;
  }
  .footer-hours tbody th {
    padding: 6px 12px 6px 0;
  }
  .footer-hours tbody td {
    padding: 6px 0;
  }
  /* Botones a ancho completo, con buen área de toque */
  .footer-map-link {
    width: 100%;
    text-align: center;
    padding: 13px 18px;
    border: 1.5px solid var(--col-borde);
    border-radius: 100px;
    margin-bottom: 12px;
  }
  .footer-map-link:hover {
    transform: none;
    color: var(--p-acento);
  }
  .footer-cta {
    width: 100%;
    justify-content: center;
    padding: 14px 22px;
    font-size: 0.88rem;
  }
  .footer-cta:hover {
    transform: none;
  }
  /* Redes centradas bajo los botones */
  .footer-social-mobile {
    justify-content: center;
    gap: 6px;
    margin: 26px 0 4px;
  }
  .footer-social-mobile span {
    width: 100%;
    text-align: center;
    margin-bottom: 6px;
    font-size: 0.82rem;
  }
  .social-link {
    margin-right: 0;
    padding: 8px;
  }
  .social-icon {
    width: 22px;
    height: 22px;
  }
  /* Legal */
  .footer-legal {
    margin-top: 26px;
    gap: 12px;
    padding: 20px 0;
  }
  .legal-links {
    gap: 10px 14px;
  }
}
/* Acordeones como lista vertical (solo teléfono) */
@media (max-width: 599px) {
  .footer-links-grid {
    border-top: 1px solid var(--col-borde);
  }
  .footer-col {
    border-bottom: 1px solid var(--col-borde);
  }
  .footer-col-title {
    margin-bottom: 0;
    padding: 15px 2px;
    min-height: 48px; /* área de toque cómoda */
    font-size: 0.76rem;
    cursor: pointer;
  }
  .footer-links {
    margin-bottom: 0;
    padding: 0 2px 16px;
  }
  .footer-links li {
    margin-bottom: 12px;
  }
  .footer-links a {
    font-size: 0.88rem;
  }
}
/* =========================================================
   TEMA OSCURO
   - El pie se hunde un escalón (--p-fondo-alt) respecto a la página: en claro lo
     separa el borde sobre blanco; en oscuro, blanco y página son el mismo azul
     noche y el borde solo no basta para leer dónde acaba el contenido.
   - En claro todo el pie va en --col-herencia (tinta = título). En oscuro eso
     daría un bloque entero en el blanco de los títulos: se reparte la jerarquía
     (títulos y cifras en --p-titulo, texto corrido y enlaces en --p-texto,
     etiquetas y «Cerrado» en --p-texto-suave).
   - Tintes y sombras escritos en rgba de marca pasan a los tokens.
========================================================= */
[data-theme=dark] .footer-site {
  background-color: var(--p-fondo-alt);
  color: var(--p-texto);
}
[data-theme=dark] .footer-info__ico {
  background: var(--p-tinte);
}
[data-theme=dark] .footer-info__value,
[data-theme=dark] .footer-hours tbody td,
[data-theme=dark] .footer-links a:not(:hover, :focus-visible) {
  color: var(--p-texto);
}
[data-theme=dark] .footer-phone__tag {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] .footer-hours tbody tr + tr th, [data-theme=dark] .footer-hours tbody tr + tr td {
  border-top-color: rgba(125, 198, 229, 0.08);
}
[data-theme=dark] .footer-hours .is-closed {
  color: var(--p-texto-suave);
}
[data-theme=dark] .footer-cta:hover {
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.7);
}

/* =========================================================
   HOME / LANDING — nuevo diseño con bosque Three.js
========================================================= */
/* ── CSS VARIABLES ───────────────────────────────────────── */
:root {
  --bg: #F4F9FE;
  --bg-rgb: 244, 249, 254;
  --bg2: #E6F0FA;
  --bg3: #FBFDFF;
  --ink: #16202E;
  --ink-soft: rgba(22, 32, 46, .60);
  --ink-faint:rgba(22, 32, 46, .34);
  --bilbao: #4D8ABB;
  --espiritu: #5FB3DC;
  --herencia: #374C69;
  --pop: #F1C400;
  --glass: rgba(255, 255, 255, .52);
  --glass-brd:rgba(255, 255, 255, .72);
  --glass-sh: rgba(40, 70, 110, .12);
  --card: rgba(255, 255, 255, .62);
  --line: rgba(55, 76, 105, .14);
  --halo: rgba(77, 138, 187, .20);
}

[data-theme=dark] {
  --bg: #081320;
  --bg-rgb: 8, 19, 32;
  --bg2: #0C1F33;
  --bg3: #0A1A2B;
  --ink: #EAF4FF;
  --ink-soft: rgba(234, 244, 255, .64);
  --ink-faint:rgba(234, 244, 255, .32);
  --bilbao: #7DC6E5;
  --espiritu: #A9E0F5;
  --herencia: #9FB6D4;
  --pop: #F1C400;
  --glass: rgba(14, 32, 52, .46);
  --glass-brd:rgba(125, 198, 229, .20);
  --glass-sh: rgba(0, 0, 0, .45);
  --card: rgba(11, 28, 46, .55);
  --line: rgba(125, 198, 229, .16);
  --halo: rgba(125, 198, 229, .18);
}

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes lnd-floaty {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-18px) rotate(-1.5deg);
  }
}
@keyframes lnd-floaty2 {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-12px) rotate(2deg);
  }
}
@keyframes lnd-kenburns {
  0% {
    transform: scale(1.04) translate(0, 0);
  }
  100% {
    transform: scale(1.2) translate(-2%, -3%);
  }
}
@keyframes lnd-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes lnd-scroll {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(15px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes lnd-ping {
  0% {
    transform: scale(1);
    opacity: 0.55;
  }
  100% {
    transform: scale(2.7);
    opacity: 0;
  }
}
@keyframes lnd-poster-in {
  0% {
    opacity: 0;
    transform: translateY(28px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes lnd-poster-kb {
  0% {
    transform: scale(1.06) translate(0, 0);
  }
  100% {
    transform: scale(1.14) translate(-1.5%, -2%);
  }
}
/* ── FOREST CANVAS ────────────────────────────────────────── */
.lnd-forest-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.lnd-forest-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(135% 105% at 50% 2%, transparent 46%, var(--bg) 100%);
  transition: background 0.7s ease;
}

/* ── LANDING ROOT ─────────────────────────────────────────── */
.landing-root {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: "Outfit", system-ui, sans-serif;
  overflow-x: clip;
  transition: background 0.7s ease, color 0.7s ease;
  /* All direct children above canvas */
}
.landing-root > * {
  position: relative;
  z-index: 10;
}
.landing-root > .lnd-forest-canvas,
.landing-root > .lnd-forest-veil {
  z-index: 0;
  position: fixed;
}
.landing-root > .lnd-theme-btn {
  z-index: 80;
}

/* ── HERO ─────────────────────────────────────────────────── */
.lnd-hero {
  position: relative;
  z-index: 10;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(80px, 12vw, 140px) clamp(20px, 5vw, 60px) clamp(60px, 8vw, 100px);
  text-align: center;
  overflow: hidden;
  /* En móvil/tablet el hero se apila (texto + poster), así que dejamos que
     crezca con el contenido en vez de forzar 100svh y recortar. El header
     fijo (80px) obliga a un padding-top mayor. */
}
@media (max-width: 899px) {
  .lnd-hero {
    min-height: auto;
    overflow: visible;
    padding-top: 116px;
    padding-bottom: 56px;
  }
}
.lnd-hero {
  /* Neblina anclada al borde de la pantalla: da contraste uniforme a TODO el
     texto (incluida la palabra de acento) y se desvanece hacia la imagen. */
}
.lnd-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Niebla simétrica: densa en ambos bordes, despejada al centro */
  background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.96) 0%, rgba(var(--bg-rgb), 0.82) 18%, rgba(var(--bg-rgb), 0.3) 38%, rgba(var(--bg-rgb), 0) 50%, rgba(var(--bg-rgb), 0.3) 62%, rgba(var(--bg-rgb), 0.82) 82%, rgba(var(--bg-rgb), 0.96) 100%);
  /* Fade vertical (arriba/abajo) para que la niebla no tenga un canto duro */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 74%, transparent 100%);
}
@media (max-width: 899px) {
  .lnd-hero::before {
    /* En móvil (apilado) la niebla es simétrica en vertical */
    background: linear-gradient(180deg, rgba(var(--bg-rgb), 0.92) 0%, rgba(var(--bg-rgb), 0.3) 26%, rgba(var(--bg-rgb), 0) 50%, rgba(var(--bg-rgb), 0.3) 74%, rgba(var(--bg-rgb), 0.92) 100%);
    -webkit-mask-image: none;
    mask-image: none;
  }
}
.lnd-hero__grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(30px, 5vw, 60px);
}
@media (min-width: 900px) {
  .lnd-hero__grid {
    grid-template-columns: 1.02fr 0.98fr;
    align-items: stretch; /* ambas columnas comparten la misma altura */
  }
}
.lnd-hero__content {
  position: relative;
  z-index: 2;
  max-width: 620px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .lnd-hero__content {
    margin: 0;
    text-align: left;
  }
}
.lnd-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
@media (max-width: 767px) {
  .lnd-hero__eyebrow {
    line-height: 1.35;
    margin-bottom: 18px;
  }
}
.lnd-hero__title {
  font-size: clamp(2.6rem, 5.6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-top: 0;
  margin-bottom: 26px;
  /* Halo del color de fondo alrededor de las letras → más legible sobre el bosque */
  text-shadow: 0 2px 22px var(--bg);
  transition: opacity 0.45s ease, transform 0.45s ease;
  /* Altura FIJA (relativa al tamaño de fuente) para que las frases
     al rotar —sean de 2 o 3 líneas— no muevan el contenido inferior.
     El texto se centra verticalmente dentro de la caja reservada. */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5em;
}
@media (min-width: 900px) {
  .lnd-hero__title {
    justify-content: flex-start;
    height: 3.25em; /* reserva para las frases que ocupan 3 líneas en la columna */
  }
}
@media (max-width: 767px) {
  .lnd-hero__title {
    height: 3.2em;
  }
}
.lnd-hero__title-inner {
  display: block;
  text-align: center;
}
@media (min-width: 900px) {
  .lnd-hero__title-inner {
    text-align: left;
  }
}
.lnd-hero__hi {
  /* Azules profundos y saturados → nítido sobre el fondo pálido del bosque */
  background: linear-gradient(110deg, #1f5a94, #2f7cb8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* ⚠️ Sin `text-shadow`: el halo del título se heredaba y, con la tinta transparente,
     se pinta ENCIMA del degradado recortado (el orden es fondo → sombra → texto), así
     que la palabra de acento se veía tras una bruma del color de fondo —muy visible en
     oscuro, donde el halo es #081320 sobre azules claros—. La palabra va sin halo:
     no le hace falta (9,9:1 en oscuro, 4,2:1 como mínimo en claro; es texto grande).
     ⚠️ Tampoco `filter: drop-shadow`: en WebKit un filtro sobre `background-clip:text`
     puede borrar la palabra o pintarla como un bloque de color. */
  text-shadow: none;
  /* ⚠️ El degradado solo pinta dentro de la caja del span, y con el `letter-spacing`
     negativo del título el último glifo se sale de ella: la «o» de «maestro» salía
     cortada. Relleno para ensanchar la caja y margen negativo para devolver el
     espacio: la palabra no se mueve. En vertical, el relleno de un inline no altera
     la línea y deja sitio a las descendentes. */
  padding: 0.04em 0.1em 0.08em 0;
  margin-right: -0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.lnd-hero {
  /* En modo oscuro se usan azules claros para que resalten sobre el fondo oscuro */
}
[data-theme=dark] .lnd-hero__hi {
  background: linear-gradient(110deg, var(--bilbao), var(--espiritu));
  -webkit-background-clip: text;
  background-clip: text;
}
.lnd-hero__sub {
  font-size: clamp(1rem, 1.8vw, 1.12rem);
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0 auto 40px;
  font-weight: 400;
  line-height: 1.7;
}
@media (min-width: 900px) {
  .lnd-hero__sub {
    margin-left: 0;
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .lnd-hero__sub {
    margin-bottom: 26px;
  }
}
.lnd-hero__ctas {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
@media (min-width: 900px) {
  .lnd-hero__ctas {
    justify-content: flex-start;
    margin-bottom: 0;
  }
}
.lnd-hero {
  /* ── POSTER / IMAGEN REAL DEL COLEGIO ── */
}
.lnd-hero__media {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
@media (max-width: 899px) {
  .lnd-hero__media {
    order: 2;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }
}
.lnd-hero__poster {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4/3;
  border-radius: 26px;
  /* En desktop iguala la altura de la columna de contenido (sin proporción fija) */
}
@media (min-width: 900px) {
  .lnd-hero__poster {
    aspect-ratio: auto;
    height: 100%;
    min-height: 460px;
  }
}
.lnd-hero__poster {
  overflow: hidden;
  background: #0b1726;
  border: 1px solid var(--glass-brd);
  box-shadow: 0 44px 90px -42px rgba(8, 19, 32, 0.6);
  animation: lnd-poster-in 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  /* Todo el póster abre el lightbox, no solo la lupa. La clase la pone landing.js:
     sin JS (o si el bundle falla) no hay lightbox y el cursor no lo promete. */
}
.lnd-hero__poster.is-ampliable {
  cursor: zoom-in;
}
.lnd-hero__poster {
  /* Halo/anillo sutil que enmarca el poster como pieza intencional */
}
.lnd-hero__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
@media (max-width: 899px) {
  .lnd-hero__poster {
    aspect-ratio: 16/10;
  }
}
@media (max-width: 767px) {
  .lnd-hero__poster {
    aspect-ratio: 3/2;
    border-radius: 20px;
  }
}
.lnd-hero__slides {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lnd-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 0;
  /* Crossfade suave: la nueva imagen aparece ENCIMA de la anterior
     (que sigue opaca en .is-prev), evitando el parpadeo del fondo. */
  transition: opacity 1.1s ease;
}
.lnd-hero__slide.is-prev {
  opacity: 1;
  z-index: 1;
}
.lnd-hero__slide { /* saliente: permanece visible debajo */ }
.lnd-hero__slide.is-active {
  opacity: 1;
  z-index: 2;
}
.lnd-hero__slide { /* entrante: se funde por encima */ }
.lnd-hero__slide picture {
  position: absolute;
  inset: 0;
  display: block;
}
.lnd-hero__slide-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.lnd-hero {
  /* Ken Burns solo en la imagen activa */
}
.lnd-hero__slide.is-active .lnd-hero__slide-img {
  animation: lnd-poster-kb 20s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
  .lnd-hero__slide.is-active .lnd-hero__slide-img {
    animation: none;
  }
}
.lnd-hero__poster-badge {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 10px 16px;
  border-radius: 14px;
  color: #fff;
  background: rgba(8, 19, 32, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lnd-hero__poster-badge strong {
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
}
.lnd-hero__poster-badge span {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: rgba(255, 255, 255, 0.85);
}
.lnd-hero {
  /* Controles del carrusel (flechas, zoom, dots) — botón circular glassy */
}
.lnd-hero__nav, .lnd-hero__zoom {
  position: absolute;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(8, 19, 32, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: 0.82;
  transition: opacity 0.25s, transform 0.25s, background 0.25s;
}
.lnd-hero__nav svg, .lnd-hero__zoom svg {
  width: 20px;
  height: 20px;
}
.lnd-hero__nav:hover, .lnd-hero__zoom:hover {
  opacity: 1;
  background: var(--bilbao);
}
.lnd-hero__nav:focus-visible, .lnd-hero__zoom:focus-visible {
  opacity: 1;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.lnd-hero__nav {
  top: 50%;
  transform: translateY(-50%);
}
.lnd-hero__nav:hover {
  transform: translateY(-50%) scale(1.05);
}
.lnd-hero__nav--prev {
  left: 12px;
}
.lnd-hero__nav--next {
  right: 12px;
}
@media (max-width: 480px) {
  .lnd-hero__nav {
    width: 38px;
    height: 38px;
  }
}
.lnd-hero__zoom {
  top: 14px;
  right: 14px;
  cursor: zoom-in;
}
.lnd-hero__dots {
  position: absolute;
  z-index: 5;
  left: 50%;
  /* 8px de colchón alrededor de los puntos (el bottom baja lo mismo: los puntos no
     se mueven). Un toque que falla por poco un punto de 8px cae aquí y no hace nada,
     en vez de abrir el lightbox a pantalla completa. */
  bottom: 8px;
  padding: 8px;
  cursor: default;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.lnd-hero__dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.25s, width 0.25s;
}
.lnd-hero__dots span.is-active {
  width: 22px;
  border-radius: 5px;
  background: #fff;
}
.lnd-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}
.lnd-hero__scroll-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bilbao);
  animation: lnd-scroll 1.8s ease-in-out infinite;
}

/* ── LIGHTBOX (ampliar imágenes) ──────────────────────────── */
.lnd-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(6, 14, 24, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.lnd-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}
.lnd-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.7);
  transform: scale(0.96);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lnd-lightbox.is-open .lnd-lightbox__img {
  transform: scale(1);
}
.lnd-lightbox__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 0.2s;
  z-index: 2;
}
.lnd-lightbox__close::before, .lnd-lightbox__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}
.lnd-lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.lnd-lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.lnd-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.24);
}
.lnd-lightbox__close:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.lnd-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.lnd-lightbox__nav svg {
  width: 24px;
  height: 24px;
}
.lnd-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.24);
}
.lnd-lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.lnd-lightbox__nav--prev {
  left: clamp(12px, 3vw, 32px);
}
.lnd-lightbox__nav--next {
  right: clamp(12px, 3vw, 32px);
}
.lnd-lightbox__nav--prev:hover {
  transform: translateY(-50%) scale(1.06);
}
.lnd-lightbox__nav--next:hover {
  transform: translateY(-50%) scale(1.06);
}
@media (max-width: 480px) {
  .lnd-lightbox__nav {
    width: 44px;
    height: 44px;
  }
}

.lnd-btn-hero {
  font-size: 1rem;
  padding: 16px 34px;
  gap: 10px;
  border-radius: 14px;
  box-shadow: 0 12px 34px var(--halo);
}

.lnd-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: 14px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.96rem;
  transition: background 0.25s;
}
.lnd-btn-ghost:hover {
  background: var(--card);
}

/* ── STATS ────────────────────────────────────────────────── */
.lnd-stats {
  position: relative;
  z-index: 10;
  padding: 0 clamp(18px, 5vw, 60px) 60px;
  /* Tres cifras a todo el ancho del contenido (el mismo de la oferta educativa, justo
     debajo): con 900px sobraba un tercio de la fila a cada lado. Las tres siguen en
     fila hasta 560px (con menos de ~165px por tarjeta el rótulo se parte feo) y de ahí
     apilan: dos columnas dejaban una tarjeta huérfana. */
}
.lnd-stats__grid {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 560px) {
  .lnd-stats__grid {
    grid-template-columns: 1fr;
  }
}

.lnd-stat {
  padding: 26px clamp(16px, 3vw, 40px);
  border-radius: 20px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 40px var(--glass-sh);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  /* La cifra se mide contra SU tarjeta, no contra la ventana: «30,000m²» no parte
     (no tiene espacios) y con 4vw desbordaba el vidrio entre 561 y ~650px, donde
     cada tarjeta deja ~125px útiles. La primera línea es el respaldo sin cqi. */
}
.lnd-stat__num {
  display: block;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-size: clamp(1.75rem, 19cqi, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--bilbao);
  line-height: 1;
  margin-bottom: 8px;
}
.lnd-stat__label {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0;
}

/* ── NIVELES ──────────────────────────────────────────────── */
.lnd-niveles {
  position: relative;
  z-index: 10;
  padding: 60px clamp(18px, 5vw, 60px);
}
.lnd-niveles__header {
  max-width: var(--container-width);
  margin: 0 auto 44px;
  text-align: center;
}
.lnd-niveles__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bilbao);
}
.lnd-niveles__title {
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  letter-spacing: -0.035em;
  margin-top: 10px;
  color: var(--ink);
}
.lnd-niveles__grid {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
  .lnd-niveles__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .lnd-niveles__grid {
    grid-template-columns: 1fr;
  }
}

.lnd-level-card {
  position: relative;
  min-height: 380px;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  box-shadow: 0 32px 70px -46px var(--glass-sh);
  text-decoration: none;
  display: block;
  background: #0b1726;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lnd-level-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 48px 80px -36px rgba(77, 138, 187, 0.45), 0 0 0 2px rgba(77, 138, 187, 0.3);
}
.lnd-level-card {
  /* Barra de acento inferior */
}
.lnd-level-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--espiritu), var(--bilbao));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lnd-level-card:hover::after {
  transform: scaleX(1);
}
.lnd-level-card__bg {
  position: absolute;
  inset: 0;
}
.lnd-level-card__bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  animation: lnd-kenburns 22s ease-in-out infinite alternate;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lnd-level-card:hover .lnd-level-card__bg img {
  transform: scale(1.08);
}
.lnd-level-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 19, 32, 0) 18%, rgba(8, 19, 32, 0.72) 65%, rgba(8, 19, 32, 0.92));
  transition: background 0.4s ease;
}
.lnd-level-card:hover .lnd-level-card__overlay {
  background: linear-gradient(180deg, rgba(8, 19, 32, 0.06) 10%, rgba(8, 19, 32, 0.78) 58%, rgba(8, 19, 32, 0.95));
}
.lnd-level-card__alex {
  position: absolute;
  right: 16px;
  top: 16px;
  width: 84px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
  opacity: 0.6;
  transform: translateY(0) scale(0.94);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lnd-level-card:hover .lnd-level-card__alex {
  opacity: 1;
  transform: translateY(-6px) scale(1);
}
.lnd-level-card__content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 28px 32px;
  color: #fff;
  transform: translateY(4px);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lnd-level-card:hover .lnd-level-card__content {
  transform: translateY(0);
}
.lnd-level-card__num {
  font-family: monospace;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 600;
  transition: color 0.3s;
}
.lnd-level-card:hover .lnd-level-card__num {
  color: var(--espiritu);
}
.lnd-level-card__title {
  font-weight: 900;
  font-size: 1.8rem;
  letter-spacing: -0.02em;
  margin: 4px 0 10px;
}
.lnd-level-card__desc {
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
  max-width: 42ch;
  font-weight: 300;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.lnd-level-card:hover .lnd-level-card__desc {
  opacity: 1;
}
.lnd-level-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--espiritu);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.lnd-level-card:hover .lnd-level-card__link {
  opacity: 1;
  transform: translateX(0);
}

/* ── VIDA ─────────────────────────────────────────────────── */
.lnd-vida {
  position: relative;
  z-index: 10;
  max-width: var(--container-width);
  width: calc(100% - 2 * clamp(18px, 5vw, 60px));
  margin: 0 auto 60px;
  border-radius: 28px;
  background: linear-gradient(160deg, var(--herencia) 0%, #15233A 100%);
  overflow: hidden;
  padding: clamp(44px, 6vw, 72px) clamp(28px, 5vw, 60px);
}
.lnd-vida__alex {
  position: absolute;
  right: 24px;
  top: 24px;
  bottom: auto;
  width: clamp(100px, 13vw, 160px);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
  animation: lnd-floaty 8s ease-in-out infinite;
  transform: scaleX(-1);
}
@media (max-width: 820px) {
  .lnd-vida__alex {
    display: none;
  }
}
.lnd-vida__eyebrow {
  font-size: 0.76rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--espiritu);
  display: block;
  margin-bottom: 10px;
}
.lnd-vida__title {
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 12px;
}
.lnd-vida__desc {
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.6;
  font-size: 0.98rem;
  max-width: 46ch;
  font-weight: 300;
  margin-bottom: 36px;
}
.lnd-vida__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 36px;
}
@media (max-width: 820px) {
  .lnd-vida__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 460px) {
  .lnd-vida__grid {
    grid-template-columns: 1fr;
  }
}
.lnd-vida__cta {
  text-align: center;
}

.lnd-vida-card {
  padding: 24px 20px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.4s, background 0.4s;
}
.lnd-vida-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.12);
}
.lnd-vida-card__letter {
  font-weight: 900;
  font-size: 2.6rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--espiritu), var(--bilbao));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lnd-vida-card__title {
  font-weight: 800;
  font-size: 1.14rem;
  margin: 10px 0 5px;
  color: #fff;
}
.lnd-vida-card__desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.45;
  font-weight: 300;
}

/* ── DESCUBRE ─────────────────────────────────────────────── */
.lnd-descubre {
  position: relative;
  z-index: 10;
  padding: 50px clamp(18px, 5vw, 60px);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
}
.lnd-descubre__header {
  max-width: var(--container-width);
  margin: 0 auto 40px;
  text-align: center;
}
.lnd-descubre__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bilbao);
}
.lnd-descubre__title {
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  letter-spacing: -0.035em;
  margin-top: 10px;
  color: var(--ink);
}
.lnd-descubre__grid {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
  .lnd-descubre__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .lnd-descubre__grid {
    grid-template-columns: 1fr;
  }
}

.lnd-ex-card {
  position: relative;
  min-height: 380px;
  border-radius: 26px;
  text-decoration: none;
  border: 1px solid var(--glass-brd);
  box-shadow: 0 32px 70px -46px var(--glass-sh);
  display: block;
  background: #0b1726;
  overflow: hidden; /* clipa el zoom del __photo dentro de las esquinas redondeadas */
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s ease;
}
@media (max-width: 560px) {
  .lnd-ex-card {
    min-height: 300px;
  }
}
.lnd-ex-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px -40px var(--glass-sh);
}
.lnd-ex-card__clip {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
}
.lnd-ex-card__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lnd-ex-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 19, 32, 0.1) 28%, rgba(8, 19, 32, 0.92));
}
.lnd-ex-card__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(77, 138, 187, 0.34), rgba(28, 56, 90, 0.62));
  opacity: 0;
  transition: opacity 0.5s;
}
.lnd-ex-card__alex {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 96px;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.55));
  z-index: 3;
  opacity: 0;
  transform: translateY(26px) scale(0.7) rotate(-8deg);
  transition: all 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.5);
}
.lnd-ex-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 28px 26px;
  color: #fff;
  z-index: 3;
}
.lnd-ex-card__num {
  font-family: monospace;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
  display: block;
  margin-bottom: 7px;
}
.lnd-ex-card__bar {
  height: 3px;
  background: var(--espiritu);
  border-radius: 3px;
  margin-bottom: 13px;
  width: 0;
  transition: width 0.55s ease 0.05s;
}
.lnd-ex-card__title {
  font-weight: 900;
  font-size: 1.55rem;
  letter-spacing: -0.025em;
}
.lnd-ex-card__desc {
  font-size: 0.93rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 300;
  /* Reveal fluido con grid-rows (0fr → 1fr) en vez de max-height (evita el salto) */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(8px);
  transition: grid-template-rows 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.45s ease, transform 0.5s ease, margin 0.5s ease;
  margin: 0;
}
.lnd-ex-card__desc > * {
  overflow: hidden;
  min-height: 0;
}
.lnd-ex-card__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease 0.15s, transform 0.4s ease 0.15s;
  /* Solo la flecha (último span) es el círculo; el texto "Conocer" queda intacto */
}
.lnd-ex-card__go > span:last-child {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bilbao);
  flex: 0 0 auto;
}
.lnd-ex-card {
  /* ── Revelado en dispositivos con hover (desktop) + foco por teclado ── */
}
@media (hover: hover) {
  .lnd-ex-card:hover .lnd-ex-card__photo, .lnd-ex-card:focus-visible .lnd-ex-card__photo {
    transform: scale(1.1);
  }
  .lnd-ex-card:hover .lnd-ex-card__tint, .lnd-ex-card:focus-visible .lnd-ex-card__tint {
    opacity: 1;
  }
  .lnd-ex-card:hover .lnd-ex-card__alex, .lnd-ex-card:focus-visible .lnd-ex-card__alex {
    opacity: 1;
    transform: none;
  }
  .lnd-ex-card:hover .lnd-ex-card__bar, .lnd-ex-card:focus-visible .lnd-ex-card__bar {
    width: 48px;
  }
  .lnd-ex-card:hover .lnd-ex-card__desc, .lnd-ex-card:focus-visible .lnd-ex-card__desc {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
    margin: 12px 0 16px;
  }
  .lnd-ex-card:hover .lnd-ex-card__go, .lnd-ex-card:focus-visible .lnd-ex-card__go {
    opacity: 1;
    transform: none;
  }
}
.lnd-ex-card {
  /* ── En dispositivos táctiles (sin hover) el contenido siempre visible ── */
}
@media (hover: none) {
  .lnd-ex-card__tint {
    opacity: 1;
  }
  .lnd-ex-card__bar {
    width: 48px;
  }
  .lnd-ex-card__desc {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
    margin: 12px 0 16px;
  }
  .lnd-ex-card__go {
    opacity: 1;
    transform: none;
  }
}

/* ── VOCES / TESTIMONIALES ────────────────────────────────── */
.lnd-voces {
  position: relative;
  z-index: 10;
  padding: 60px 0;
  /* Panel azul oscuro (en claro y oscuro) */
  background: linear-gradient(165deg, #21365a 0%, #0f1f38 100%);
}
.lnd-voces__header {
  text-align: center;
  margin-bottom: 32px;
  padding: 0 20px;
}
.lnd-voces__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--espiritu);
  display: block;
}
.lnd-voces__title {
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  margin-top: 10px;
  color: #EAF4FF;
}
.lnd-voces__stars {
  color: var(--espiritu);
  font-size: 1.05rem;
  letter-spacing: 4px;
  margin-top: 6px;
  display: block;
}
.lnd-voces__cta-wrap {
  text-align: center;
  margin-top: 28px;
}
.lnd-voces__marquee-wrap {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lnd-voces__track {
  display: flex;
  gap: 18px;
  width: -moz-max-content;
  width: max-content;
  animation: lnd-marquee 50s linear infinite;
}
.lnd-voces__track:hover {
  animation-play-state: paused;
}

.lnd-voice-card {
  flex: 0 0 340px;
  padding: 28px;
  border-radius: 22px;
  /* Glassmorphism marcado: vidrio esmerilado sobre el panel azul oscuro */
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 26px 54px -30px rgba(0, 0, 0, 0.5);
}
.lnd-voice-card__quote {
  font-size: 0.98rem;
  line-height: 1.6;
  color: #EAF4FF;
  margin-bottom: 18px;
  font-weight: 400;
}
.lnd-voice-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.lnd-voice-card__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bilbao), var(--espiritu));
  flex: 0 0 auto;
}
.lnd-voice-card__name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
}
.lnd-voice-card__role {
  font-size: 0.76rem;
  color: rgba(234, 244, 255, 0.6);
}

/* ── NOTICIAS (dark horizontal scroll) ───────────────────── */
.lnd-news {
  position: relative;
  z-index: 10;
  margin-top: 0;
  /* Fondo claro (adaptable al tema) — las tarjetas oscuras resaltan encima */
  background: var(--bg2);
  overflow: hidden;
}
.lnd-news__ticker-wrap {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.lnd-news__ticker {
  display: flex;
  gap: 38px;
  width: -moz-max-content;
  width: max-content;
  animation: lnd-marquee 30s linear infinite;
  white-space: nowrap;
}
.lnd-news__ticker:hover {
  animation-play-state: paused;
}
.lnd-news__tick-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-decoration: none;
  transition: color 0.2s;
}
.lnd-news__tick-item span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bilbao);
  flex: 0 0 auto;
}
.lnd-news__tick-item:hover {
  color: var(--ink);
  text-decoration: underline;
}
.lnd-news__stage {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 34px 0 30px;
}
.lnd-news__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto 24px;
  padding: 0 clamp(18px, 5vw, 60px);
}
@media (max-width: 480px) {
  .lnd-news__header {
    flex-wrap: wrap;
    gap: 8px;
  }
}
.lnd-news__header-left {
  display: flex;
  align-items: flex-end;
  gap: 18px;
}
.lnd-news__alex {
  width: clamp(64px, 8vw, 100px);
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.5));
}
.lnd-news__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--bilbao);
}
.lnd-news__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e51022;
  box-shadow: 0 0 10px rgba(229, 16, 34, 0.55);
  animation: pulse-live 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.lnd-news__title-h2 {
  font-weight: 900;
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  margin-top: 6px;
  color: var(--ink);
}
.lnd-news__hint {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.74rem;
  color: var(--ink-faint);
  white-space: nowrap;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
@media (max-width: 480px) {
  .lnd-news__hint {
    display: none;
  }
}
.lnd-news__viewport {
  flex: 1;
  overflow-x: auto;
  display: flex;
  align-items: stretch;
  cursor: grab;
  scrollbar-width: none;
}
.lnd-news__viewport::-webkit-scrollbar {
  display: none;
}
.lnd-news__track {
  display: flex;
  gap: 24px;
  /* padding vertical: da aire para la sombra/anillo de las tarjetas
     (el viewport recorta en vertical al tener overflow-x: auto) */
  padding: 12px clamp(18px, 5vw, 60px);
  align-items: stretch;
  will-change: transform;
}
.lnd-news__cta {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 clamp(18px, 5vw, 60px) 48px;
}
.lnd-news__cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.25s, border-color 0.25s;
}
.lnd-news__cta a:hover {
  background: var(--card);
  border-color: var(--bilbao);
}

.lnd-news-card {
  flex: 0 0 320px;
  height: min(66vh, 520px);
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  text-decoration: none;
  background: #0c1a2c;
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Sombra sutil en capas: brillo superior + contacto + ambiente suave */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 10px -8px rgba(0, 0, 0, 0.4), 0 12px 28px -20px rgba(0, 0, 0, 0.5);
  /* Sin translate: el viewport recorta en vertical y cortaba la tarjeta.
     El hover ahora es interno (zoom de imagen + realce de borde). */
  transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.lnd-news-card:hover {
  border-color: rgba(125, 198, 229, 0.42);
  /* Toque creativo pero sutil: un halo frío (espíritu) que emana de la tarjeta */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 16px 36px -22px rgba(0, 0, 0, 0.55), 0 0 32px -6px rgba(125, 198, 229, 0.26);
}
.lnd-news-card--featured {
  flex: 0 0 clamp(300px, 40vw, 520px);
  border: 1.5px solid rgba(125, 198, 229, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px -26px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(125, 198, 229, 0.16);
}
.lnd-news-card__img-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.lnd-news-card--featured .lnd-news-card__img-wrap {
  flex: 1.5;
}
.lnd-news-card__img-wrap img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  draggable: false;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lnd-news-card:hover .lnd-news-card__img-wrap img {
  transform: scale(1.07);
}
.lnd-news-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 26, 44, 0.12) 28%, rgba(12, 26, 44, 0.86));
}
.lnd-news-card__cat {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  background: var(--bilbao);
  color: #fff;
}
.lnd-news-card--featured .lnd-news-card__cat {
  font-size: 0.72rem;
  padding: 7px 16px;
  background: var(--espiritu);
  color: #0c1a2c;
}
.lnd-news-card__body {
  padding: 20px 22px 24px;
}
.lnd-news-card--featured .lnd-news-card__body {
  padding: 26px 28px 28px;
}
.lnd-news-card__title {
  font-weight: 800;
  font-size: 1.16rem;
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 10px;
}
.lnd-news-card--featured .lnd-news-card__title {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -0.025em;
}
.lnd-news-card__excerpt {
  font-size: 0.93rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  margin-bottom: 14px;
  font-weight: 300;
}
.lnd-news-card__read {
  display: inline-flex;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--espiritu);
  transition: color 0.25s, letter-spacing 0.25s;
}
.lnd-news-card:hover .lnd-news-card__read {
  color: #fff;
  letter-spacing: 0.4px;
}

/* ── ARTÍCULOS ────────────────────────────────────────────── */
.lnd-articulos {
  position: relative;
  z-index: 10;
  padding: 80px clamp(18px, 5vw, 60px);
  /* Panel azul oscuro (en claro y oscuro) */
  background: linear-gradient(165deg, #21365a 0%, #0f1f38 100%);
}
.lnd-articulos__inner {
  max-width: var(--container-width);
  margin: 0 auto;
}
.lnd-articulos__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 2px solid rgba(255, 255, 255, 0.14);
  padding-bottom: 22px;
  margin-bottom: 40px;
}
.lnd-articulos__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--espiritu);
}
.lnd-articulos__tag::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--espiritu);
  flex-shrink: 0;
}
.lnd-articulos__title {
  font-weight: 900;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  letter-spacing: -0.035em;
  margin-top: 8px;
  color: #EAF4FF;
}
.lnd-articulos__intro {
  max-width: 34ch;
  color: rgba(234, 244, 255, 0.72);
  font-size: 0.96rem;
  line-height: 1.55;
  font-weight: 400;
}
.lnd-articulos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) {
  .lnd-articulos__grid {
    grid-template-columns: 1fr;
  }
  .lnd-articulos__grid .lnd-art-preview {
    display: none !important;
  }
}
.lnd-articulos__cta {
  text-align: center;
  margin-top: 48px;
}

.lnd-art-preview {
  position: sticky;
  top: 90px;
  height: 660px;
}
.lnd-art-preview__panel {
  height: 100%;
  flex-direction: column;
  border-radius: 24px;
  overflow: hidden;
  /* Glassmorphism marcado: vidrio esmerilado sobre el panel azul oscuro */
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 34px 70px -40px rgba(0, 0, 0, 0.55);
  /* Ahora es un enlace al artículo activo */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}
.lnd-art-preview__panel:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 44px 84px -40px rgba(0, 0, 0, 0.6), 0 0 34px -8px rgba(125, 198, 229, 0.5);
}
.lnd-art-preview__panel:focus-visible {
  outline: 2px solid var(--espiritu);
  outline-offset: 3px;
}
.lnd-art-preview__img-wrap {
  position: relative;
  height: 300px;
  flex: 0 0 300px;
  overflow: hidden;
}
.lnd-art-preview__img-wrap img:not(.lnd-art-preview__alex) {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  animation: lnd-kenburns 18s ease-in-out infinite alternate;
}
.lnd-art-preview__cat {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: var(--bilbao);
  color: #fff;
}
.lnd-art-preview__body {
  padding: 28px 30px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
.lnd-art-preview__alex {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 80px;
  opacity: 0.85;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
  pointer-events: none;
  z-index: 2;
}
.lnd-art-preview__title {
  font-weight: 900;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
  color: #EAF4FF;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lnd-art-preview__excerpt {
  color: rgba(234, 244, 255, 0.75);
  line-height: 1.6;
  font-size: 0.98rem;
  margin-bottom: 20px;
  font-weight: 400;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lnd-art-preview__foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 16px;
}
.lnd-art-preview__author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #fff;
}
.lnd-art-preview__author-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bilbao), var(--espiritu));
  flex: 0 0 auto;
}
.lnd-art-preview__time {
  font-size: 0.82rem;
  color: rgba(234, 244, 255, 0.55);
  font-weight: 600;
}

.lnd-art-list {
  display: flex;
  flex-direction: column;
}

.lnd-art-row {
  /* Van directamente sobre el panel azul oscuro → texto claro fijo */
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 22px 14px;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 2px solid transparent;
  border-radius: 0 12px 12px 0;
  transition: border-color 0.3s, background 0.3s, padding-left 0.3s;
}
.lnd-art-row:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.lnd-art-row__num {
  font-weight: 900;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(234, 244, 255, 0.34);
  letter-spacing: -0.03em;
}
.lnd-art-row__cat {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--espiritu);
  display: block;
}
.lnd-art-row__title {
  font-weight: 700;
  font-size: 1.16rem;
  line-height: 1.28;
  letter-spacing: -0.015em;
  margin: 5px 0 4px;
  color: #EAF4FF;
}
.lnd-art-row__meta {
  font-size: 0.78rem;
  color: rgba(234, 244, 255, 0.5);
  font-weight: 500;
}
.lnd-art-row__arrow {
  font-size: 1.1rem;
  color: var(--espiritu);
  opacity: 0;
  transform: translateX(-6px);
  transition: all 0.3s;
}

/* ── VISITA / MAPA ────────────────────────────────────────── */
.lnd-visita {
  position: relative;
  z-index: 10;
  padding: 80px clamp(18px, 5vw, 60px);
  background: var(--bg);
}
.lnd-visita__grid {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 880px) {
  .lnd-visita__grid {
    grid-template-columns: 1fr;
  }
}
.lnd-visita__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bilbao);
  display: block;
  margin-bottom: 10px;
}
.lnd-visita__title {
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  letter-spacing: -0.035em;
  margin-bottom: 16px;
  color: var(--ink);
}
.lnd-visita__desc {
  color: var(--ink-soft);
  line-height: 1.62;
  font-size: 1.02rem;
  max-width: 46ch;
  margin-bottom: 28px;
  font-weight: 400;
}
.lnd-visita__info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 30px;
}
.lnd-visita__info-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
@media (max-width: 880px) {
  .lnd-visita__eyebrow, .lnd-visita__title, .lnd-visita__desc {
    text-align: center;
  }
  .lnd-visita__desc {
    max-width: 100%;
    margin-inline: auto;
  }
  .lnd-visita {
    /* El bloque de datos se centra como conjunto, pero las filas
       mantienen su alineación a la izquierda para que las etiquetas
       (Dirección / Horario) queden alineadas entre sí */
  }
  .lnd-visita__info {
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
  }
  .lnd-visita__info-row {
    justify-content: flex-start;
    text-align: left;
  }
  .lnd-visita__ctas {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .lnd-visita__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  .lnd-visita__ctas > a {
    width: 100%;
    justify-content: center;
  }
}
.lnd-visita__info-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--glass);
  border: 1px solid var(--glass-brd);
  display: grid;
  place-items: center;
  color: var(--bilbao);
}
.lnd-visita__info-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 800;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.lnd-visita__info-val {
  font-size: 0.94rem;
  color: var(--ink);
  line-height: 1.45;
  font-weight: 500;
}
.lnd-visita__hours {
  border-collapse: collapse;
  font-size: 0.84rem;
}
.lnd-visita__hours th {
  text-align: left;
  font-weight: 700;
  color: var(--ink);
  padding: 2px 20px 2px 0;
  white-space: nowrap;
}
.lnd-visita__hours td {
  font-variant-numeric: tabular-nums;
  color: var(--bilbao);
  font-weight: 600;
  text-align: right;
}
.lnd-visita__hours .is-closed {
  color: var(--ink-faint);
  font-style: italic;
  font-weight: 500;
}
.lnd-visita__hours tr + tr th, .lnd-visita__hours tr + tr td {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.lnd-visita__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.lnd-visita__map-link {
  display: block;
  text-decoration: none;
  border-radius: 26px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.lnd-visita__map-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 60px rgba(20, 40, 70, 0.2);
}
.lnd-visita__map-wrap {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--glass-brd);
  box-shadow: 0 40px 90px -50px var(--glass-sh);
}
.lnd-visita__map-alex {
  position: absolute;
  right: 6px;
  bottom: 0;
  z-index: 4;
  width: clamp(86px, 14vw, 134px);
  filter: drop-shadow(0 14px 24px rgba(15, 40, 70, 0.4));
  animation: lnd-floaty2 7s ease-in-out infinite;
  scale: -1 1;
}
.lnd-visita__map-pin {
  position: absolute;
  left: 64%;
  top: 53%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lnd-visita__pin-dot {
  position: relative;
  width: 22px;
  height: 22px;
}
.lnd-visita__pin-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bilbao);
  animation: lnd-ping 1.9s ease-out infinite;
}
.lnd-visita__pin-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bilbao);
  border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(20, 40, 70, 0.4);
}
.lnd-visita__pin-label {
  margin-top: 9px;
  padding: 6px 13px;
  border-radius: 10px;
  background: #fff;
  color: #16202E;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(20, 40, 70, 0.28);
  white-space: nowrap;
}

/* ── CTA FINAL ────────────────────────────────────────────── */
.lnd-cta {
  position: relative;
  z-index: 10;
  padding: clamp(80px, 12vw, 150px) clamp(18px, 5vw, 60px) 70px;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(125% 100% at 50% 18%, var(--bg2) 0%, var(--bg) 72%);
}
.lnd-cta__alex-left {
  position: absolute;
  left: clamp(-30px, 3vw, 60px);
  bottom: 90px;
  width: clamp(120px, 15vw, 210px);
  filter: drop-shadow(0 18px 32px rgba(15, 40, 70, 0.3));
  animation: lnd-floaty 6.5s ease-in-out infinite;
  z-index: 1;
}
.lnd-cta__alex-right {
  position: absolute;
  right: clamp(-30px, 3vw, 60px);
  bottom: 100px;
  width: clamp(120px, 15vw, 210px);
  filter: drop-shadow(0 18px 32px rgba(15, 40, 70, 0.3));
  animation: lnd-floaty2 7.5s ease-in-out infinite;
  z-index: 1;
}
.lnd-cta__content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  margin: 0 auto;
}
.lnd-cta__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--bilbao);
  margin-bottom: 18px;
}
.lnd-cta__title {
  font-weight: 900;
  font-size: clamp(2.4rem, 6.6vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  color: var(--ink);
}
.lnd-cta__title span {
  background: linear-gradient(110deg, var(--bilbao), var(--espiritu));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Mismo corte que `.lnd-hero__hi`: con el tracking negativo el último glifo de
     cada span («hijos», «aquí», el punto) se sale de su caja y el degradado no lo
     pinta. Relleno + margen negativo del mismo valor: nada se mueve. */
  padding: 0.04em 0.1em 0.08em 0;
  margin-right: -0.1em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media (max-width: 767px) {
  .lnd-cta__title {
    margin-bottom: 24px;
  }
}
.lnd-cta {
  /* ── Móvil: las mascotas dejan de encimarse con el título/botón ──
     Se reducen y se anclan a las esquinas inferiores, dentro de una
     banda de padding reservada debajo del contenido */
}
@media (max-width: 767px) {
  .lnd-cta {
    padding-top: clamp(56px, 12vw, 80px);
    padding-bottom: 150px;
  }
  .lnd-cta__content {
    padding-bottom: 8px;
  }
  .lnd-cta__alex-left, .lnd-cta__alex-right {
    width: clamp(86px, 26vw, 118px);
    bottom: 14px;
    animation-duration: 7s;
  }
  .lnd-cta__alex-left {
    left: -8px;
  }
  .lnd-cta__alex-right {
    right: -8px;
  }
}
@media (max-width: 360px) {
  .lnd-cta__alex-left, .lnd-cta__alex-right {
    display: none;
  }
}

/* =========================================================
   LANDING · SOMOS COMUNIDAD  (banda contrastante, layout dividido)
========================================================= */
.lnd-comunidad {
  position: relative;
  z-index: 10;
  max-width: var(--container-width);
  width: calc(100% - 2 * clamp(18px, 5vw, 60px));
  margin: clamp(24px, 5vw, 56px) auto 60px;
  border-radius: 28px;
  /* Glassmorphism sobre el fondo Three.js */
  background: radial-gradient(120% 140% at 90% 8%, rgba(77, 138, 187, 0.35), transparent 48%), radial-gradient(110% 120% at 4% 98%, rgba(66, 103, 172, 0.3), transparent 50%), rgba(9, 25, 51, 0.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 80px -40px rgba(8, 26, 54, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
}

.lnd-comunidad__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: clamp(44px, 6vw, 68px) clamp(28px, 4vw, 52px);
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 48px;
  align-items: center;
}

.lnd-comunidad__intro {
  position: relative;
  color: #fff;
}

.lnd-comunidad__eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 14px;
}

.lnd-comunidad__title {
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.5px;
  line-height: 1.08;
  margin-bottom: 14px;
}

.lnd-comunidad__desc {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  max-width: 340px;
  margin-bottom: 8px;
}

.lnd-comunidad__mascot {
  width: 150px;
  height: auto;
  margin-top: 8px;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.45));
  animation: lnd-com-float 3.6s ease-in-out infinite;
}

@keyframes lnd-com-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
.lnd-comunidad__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lnd-com-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.5);
  transition: transform 0.24s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.24s;
  overflow: hidden;
}
.lnd-com-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
}
.lnd-com-row:hover {
  transform: translateX(8px);
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.6);
}

.lnd-com-row__icon {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 21px;
  color: #fff;
}

.lnd-com-row__text {
  flex: 1;
  min-width: 0;
}

.lnd-com-row__title {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--col-bilbao);
}

.lnd-com-row__desc {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--col-herencia);
  opacity: 0.8;
  margin-top: 2px;
}

.lnd-com-row__arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #eef3fb;
  color: var(--col-bilbao);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.lnd-com-row:hover .lnd-com-row__arrow {
  background: var(--col-bilbao);
  color: #fff;
  transform: translateX(3px);
}

.lnd-com-row--blue::before {
  background: #4267ac;
}
.lnd-com-row--blue .lnd-com-row__icon {
  background: linear-gradient(135deg, #2e4b8a, #4267ac);
}

.lnd-com-row--sky::before {
  background: #4d8abb;
}
.lnd-com-row--sky .lnd-com-row__icon {
  background: linear-gradient(135deg, #2e6fc7, #4d8abb);
}

.lnd-com-row--navy::before {
  background: #0d2451;
}
.lnd-com-row--navy .lnd-com-row__icon {
  background: linear-gradient(135deg, #081a36, #14468c);
}

@media (max-width: 860px) {
  .lnd-comunidad__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 28px;
    text-align: center;
  }
  .lnd-comunidad__desc {
    margin-left: auto;
    margin-right: auto;
  }
  .lnd-comunidad__mascot {
    display: none;
  }
  .lnd-com-row {
    text-align: left;
  }
}
/* =========================================================
   BLOG / ARTÍCULO — página de lectura
========================================================= */
main.article-main {
  padding-top: 0;
}

.article-hero {
  position: relative;
  height: 80vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: var(--header-height);
}

.hero-img-parallax {
  position: absolute;
  top: -15%;
  left: 0;
  width: 100%;
  height: 130%;
  -o-object-fit: cover;
     object-fit: cover;
  will-change: transform;
  z-index: 0;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(55, 76, 105, 0.88) 0%, rgba(55, 76, 105, 0.35) 50%, rgba(0, 0, 0, 0.05) 100%);
  z-index: 1;
}

.hero-meta {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 52px;
  color: white;
  animation: fadeInUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
}

.article-category,
.article-category-home {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--p-acento);
  margin-bottom: 5px;
  border: 1.5px solid var(--p-acento);
  padding: 4px 13px;
  border-radius: 50px;
  transition: opacity 0.2s;
  /* When color is overridden via inline style the pill becomes solid */
}
.article-category[style*=background],
.article-category-home[style*=background] {
  color: #fff !important;
  border-color: transparent !important;
}

/* Va sobre la foto del hero: casi blanco en los dos temas. Literal y no
   --bg-global, que en oscuro pasa a azul noche (oscuro sobre la foto). */
.article-category-template {
  color: #F9FBFE;
}

.article-title {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: white;
  margin-bottom: 24px;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.article-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  row-gap: 12px;
}

/* Share buttons dentro del hero del artículo */
.article-share-btns {
  display: flex;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
@media (max-width: 520px) {
  .article-share-btns {
    margin-left: 0;
    width: 100%;
  }
}

.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}
.article-share-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
  transform: translateY(-1px);
}
.article-share-btn--wa {
  background: #25d366;
  border-color: #25d366;
}
.article-share-btn--wa:hover {
  background: #1da851;
  border-color: #1da851;
}

.author-avatar-small {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.4);
  background: var(--col-bilbao);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: white;
  flex-shrink: 0;
}

.byline-text {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}
.byline-text strong {
  color: white;
  font-weight: 700;
}

.byline-dot {
  color: rgba(255, 255, 255, 0.4);
}

.breadcrumb {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 24px 0;
  font-size: 0.82rem;
  color: #999;
  display: flex;
  align-items: center;
  gap: 8px;
}
.breadcrumb a {
  color: var(--p-acento);
  font-weight: 600;
}
.breadcrumb a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb span {
  color: #ccc;
}

.article-body-wrapper {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px 100px;
  font-size: 1rem; /* reset: body hereda 28.8 px por conflicto globales/base */
}

.article-lead {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--p-titulo);
  line-height: 1.75;
  margin-bottom: 2rem;
  border-left: 4px solid var(--col-espiritu);
  padding-left: 24px;
}

.article-body p:first-of-type::first-letter {
  float: left;
  font-size: 3.4rem;
  line-height: 0.82;
  font-weight: 900;
  color: var(--p-acento);
  margin-right: 8px;
  margin-top: 6px;
  letter-spacing: -0.03em;
}
.article-body p {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--col-texto);
  margin-bottom: 1.5rem;
  font-weight: 400;
}
.article-body h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--p-titulo);
  margin: 2.5rem 0 0.9rem;
  letter-spacing: -0.3px;
  line-height: 1.25;
}
.article-body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--p-titulo);
  margin: 2rem 0 0.75rem;
  letter-spacing: -0.2px;
}
.article-body ul, .article-body ol {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--col-texto);
  margin-bottom: 1.5rem;
  padding-left: 1.4rem;
}
.article-body ul li, .article-body ol li {
  margin-bottom: 0.4rem;
}
.article-body blockquote {
  margin: 2.5rem 0;
  padding: 24px 28px;
  background: var(--bg-offwhite);
  border-radius: 16px;
  border-left: 4px solid var(--p-acento);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--p-titulo);
  line-height: 1.7;
}
.article-body strong {
  font-weight: 700;
}
.article-body em {
  font-style: italic;
}
.article-body a {
  color: var(--p-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.article-body a:hover {
  color: var(--p-titulo);
}

.article-divider {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, var(--col-bilbao), var(--col-espiritu));
  border-radius: 2px;
  margin: 48px 0;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 48px;
}

.tag {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 50px;
  background: var(--bg-offwhite);
  color: var(--p-acento);
  border: 1px solid var(--col-borde);
  transition: all 0.3s;
  cursor: default;
}
.tag:hover {
  background: var(--col-bilbao);
  color: white;
  border-color: var(--col-bilbao);
}

.share-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--col-borde);
}

.share-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--p-titulo);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.share-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-offwhite);
  border: 1px solid var(--col-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  cursor: pointer;
}
.share-btn:hover {
  background: var(--col-bilbao);
  border-color: var(--col-bilbao);
}
.share-btn svg {
  width: 16px;
  height: 16px;
  fill: var(--p-titulo);
  transition: fill 0.3s;
}
.share-btn:hover svg {
  fill: white;
}

.article-cta-block {
  background: linear-gradient(135deg, var(--col-herencia), #2a3850);
  border-radius: 28px;
  padding: 48px 40px;
  margin-top: 64px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.article-cta-block::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 200px;
  height: 200px;
  background: var(--col-espiritu);
  border-radius: 50%;
  opacity: 0.1;
  filter: blur(40px);
}
.article-cta-block h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 12px;
}
.article-cta-block p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.95rem;
  font-weight: 300;
  margin-bottom: 24px;
}
.article-cta-block .btn-terciario {
  font-size: 0.875rem;
  padding: 12px 28px;
}

/* ---- ARTÍCULOS RECOMENDADOS ---- */
.article-recomendados {
  background: var(--bg-offwhite);
  padding: 80px 24px 100px;
}

.recomendados-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.recomendados-titulo {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--p-titulo);
  letter-spacing: -0.03em;
  margin-bottom: 40px;
}

.recomendados-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .recomendados-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.rec-card {
  background: var(--p-superficie);
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid var(--col-borde);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.rec-card-img {
  position: relative;
  overflow: hidden;
}
.rec-card-img img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.rec-card:hover .rec-card-img img {
  transform: scale(1.04);
}

.rec-label {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--col-herencia);
  padding: 5px 12px;
  border-radius: 50px;
}

.rec-card-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rec-cat {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--p-acento);
  border: 1px solid var(--p-acento);
  padding: 4px 12px;
  border-radius: 50px;
  /* El color de la categoría llega del dato como --cat (views/publico/blog/
     articulo.php). Antes iba como `color:` inline, y eso no lo puede
     aclarar el tema oscuro. */
}
.rec-cat[style*="--cat"] {
  color: var(--cat);
  border-color: var(--cat);
}

.rec-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--p-titulo);
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 4px 0;
}

.rec-excerpt {
  font-size: 0.85rem;
  color: var(--col-texto);
  opacity: 0.8;
  line-height: 1.6;
  font-weight: 300;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rec-read-more {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--p-acento);
  margin-top: 4px;
  transition: color 0.2s;
}
.rec-card:hover .rec-read-more {
  color: var(--p-titulo);
}

/* ---- TEMA OSCURO ---- */
[data-theme=dark] {
  /* El pie del hero funde con el azul noche de la página en vez de quedarse
     en pizarra: la foto «se apoya» en el artículo en lugar de cortarse. */
}
[data-theme=dark] .hero-gradient {
  background: linear-gradient(to top, rgba(8, 19, 32, 0.94) 0%, rgba(8, 19, 32, 0.45) 50%, rgba(0, 0, 0, 0.08) 100%);
}
[data-theme=dark] {
  /* #999 a 13px sobre el fondo oscuro daba ~5:1 pero el #ccc de los
     separadores brillaba más que los enlaces: se invierte la jerarquía. */
}
[data-theme=dark] .breadcrumb {
  color: var(--p-texto-suave);
}
[data-theme=dark] .breadcrumb span {
  color: color-mix(in srgb, var(--p-texto-suave) 55%, transparent);
}
[data-theme=dark] .rec-card:hover {
  box-shadow: 0 18px 40px var(--p-sombra);
  border-color: rgba(125, 198, 229, 0.28);
}
[data-theme=dark] {
  /* Etiqueta sobre la foto: el cristal blanco al 92 % era el único blanco
     de la sección. Mismo cristal, en noche. */
}
[data-theme=dark] .rec-label {
  background: rgba(8, 19, 32, 0.82);
  color: var(--p-titulo);
}
[data-theme=dark] {
  /* Color de categoría como TINTA sobre --p-superficie: indigo, morado,
     magenta y rojo de la paleta quedan entre 2,5 y 3,5:1. Se aclaran
     conservando el tono (suelo de luminosidad ≈ 6:1). */
}
[data-theme=dark] .rec-cat[style*="--cat"] {
  color: color-mix(in oklab, var(--cat) 55%, #fff);
  border-color: color-mix(in oklab, var(--cat) 70%, #fff);
}
@supports (color: oklch(from red l c h)) {
  [data-theme=dark] .rec-cat[style*="--cat"] {
    color: oklch(from var(--cat) max(l, 0.78) c h);
    border-color: oklch(from var(--cat) max(l, 0.7) c h);
  }
}
[data-theme=dark] {
  /* La banda del CTA es pizarra sobre azul noche: sin filete se hunde. */
}
[data-theme=dark] .article-cta-block {
  box-shadow: inset 0 0 0 1px var(--p-linea);
}
[data-theme=dark] {
  /* ── Cuerpo WYSIWYG de artículos y noticias ──────────────
     El HTML viene del editor de Redacción, y lo pegado desde Google Docs o
     Word trae `color: rgb(0,0,0)` y fondos blancos inline: negro sobre azul
     noche. En oscuro se neutralizan (el claro no se toca: ahí el autor vio
     lo que publicó). Lo sirven las dos lecturas: .article-body (blog) y
     .noticia-detalle-body (noticias). */
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) [style*=color],
[data-theme=dark] :is(.article-body, .noticia-detalle-body) font[color] {
  color: inherit !important;
  caret-color: auto !important;
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) [style*=background] {
  background-color: transparent !important;
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) a[style*=color],
[data-theme=dark] :is(.article-body, .noticia-detalle-body) a font[color] {
  color: var(--p-acento) !important;
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) mark {
  background: rgba(241, 196, 0, 0.28);
  color: inherit;
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) code {
  background: var(--p-superficie-alt);
  color: var(--p-titulo);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) pre {
  background: var(--p-superficie-alt);
  border: 1px solid var(--p-linea);
  color: var(--p-texto);
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) pre code {
  background: none;
  padding: 0;
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) table {
  border-color: var(--p-linea);
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) th, [data-theme=dark] :is(.article-body, .noticia-detalle-body) td {
  border-color: var(--p-linea);
  color: var(--p-texto);
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) th {
  background: var(--p-superficie-alt);
  color: var(--p-titulo);
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) hr {
  border: 0;
  border-top: 1px solid var(--p-linea);
}
[data-theme=dark] :is(.article-body, .noticia-detalle-body) figcaption {
  color: var(--p-texto-suave);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .article-title {
    font-size: 1.65rem;
  }
  .article-hero {
    height: 75vh;
  }
  .article-body-wrapper {
    padding: 48px 20px 80px;
  }
  .article-cta-block {
    padding: 36px 24px;
  }
}
/* =========================================================
   CONTACTO — página de formulario y datos
========================================================= */
main {
  padding-top: var(--header-height);
}

/* Título del hero de Admisiones › Contacto. Vivía en la página «en construcción», ya unificada en
   _proximamente.scss, y era lo único de ese archivo que no era de ella. */
.admisiones-title {
  color: var(--p-acento);
  font-size: 64px;
  font-weight: 900;
}

/* HERO */
.contact-hero {
  background-color: var(--bg-global);
  padding: 80px 0 140px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.bg-blob {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(125, 198, 229, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: float 20s infinite alternate;
}
.bg-blob.blob-1 {
  top: -200px;
  right: -200px;
}
.bg-blob.blob-2 {
  top: 20%;
  left: -300px;
  background: radial-gradient(circle, rgba(77, 138, 187, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
}

.hero-lead {
  font-size: 1.2rem;
  color: var(--text-gray);
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* CONTENIDO */
.contact-content {
  margin-top: -100px;
  padding-bottom: var(--sp-xl);
  position: relative;
  z-index: 3;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* FORMULARIO */
.form-card {
  background: var(--p-superficie);
  padding: 3rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
  transition: height 0.3s ease;
}
.form-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--col-bilbao), var(--col-espiritu));
}

.form-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.form-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--p-titulo);
  margin-bottom: 0.5rem;
}

.form-subtitle {
  color: var(--text-gray);
  font-size: 1.1rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.form-group {
  position: relative;
}

.form-full {
  grid-column: 1/-1;
}

.form-label {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--p-acento);
  margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 1.1rem;
  border: 2px solid #E2E8F0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 1rem;
  background-color: #F8FAFC;
  transition: all 0.3s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--col-bilbao);
  background-color: white;
  box-shadow: 0 4px 12px rgba(77, 138, 187, 0.15);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
}

/* RADIO BUTTONS */
.radio-group {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-gray);
  padding: 0.4rem 0.9rem;
  border-radius: 50px;
  border: 2px solid #E2E8F0;
  transition: all 0.3s;
  background-color: var(--p-superficie);
}
.radio-label:hover {
  border-color: var(--col-espiritu);
  background-color: #F8FAFC;
}

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

.radio-label:has(.radio-input:focus-visible) {
  outline: 2px solid var(--p-acento);
  outline-offset: 2px;
}

.radio-icon {
  width: 14px;
  height: 14px;
  border: 2px solid #CBD5E1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.radio-icon::after {
  content: "";
  width: 6px;
  height: 6px;
  background-color: white;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.2s;
}

.radio-input:checked + .radio-icon::after {
  transform: scale(1);
}

.radio-input:checked + .radio-icon {
  border-color: var(--col-bilbao);
  background-color: var(--col-bilbao);
  color: white;
}

.radio-label:has(.radio-input:checked) {
  border-color: var(--col-bilbao);
  background-color: rgba(77, 138, 187, 0.05);
  color: var(--col-bilbao);
}

/* SUCCESS MESSAGE */
.success-message {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  min-height: 400px;
  animation: fadeIn 0.5s ease;
}

.success-icon {
  width: 80px;
  height: 80px;
  background: #DEF7EC;
  color: #03543F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

/* COLUMNA DE INFORMACIÓN */
.info-stack {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 2rem;
}

.info-card {
  background: linear-gradient(135deg, var(--col-herencia) 0%, #2c3e50 100%);
  color: white;
  padding: 3rem;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  position: relative;
  overflow: hidden;
}
.info-card h3 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.contact-list li {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  font-size: 1.05rem;
}
.contact-list li:last-child {
  margin-bottom: 0;
}

.c-icon {
  font-size: 1.2rem;
  opacity: 0.7;
}

.c-link {
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 2px;
  transition: border-color 0.3s;
}
.c-link:hover {
  border-color: white;
}

/* ACCIONES DIRECTAS */
.separator-text {
  text-align: center;
  color: var(--text-gray);
  font-weight: 600;
  margin: 1rem 0;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.8;
}

.direct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

/* MAPA */
.map-container {
  height: 300px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-input);
  border: 4px solid white;
}

.map-frame {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- TEMA OSCURO ----
   Los grises de formulario (#E2E8F0, #F8FAFC, #CBD5E1) y los blancos de borde no tienen
   token igual en claro: se reescriben solo aquí, para que el claro no se mueva.
   Los campos no heredan color del documento: sin `color` explícito el texto tecleado y
   la opción del <select> salían en el gris por defecto del navegador. */
[data-theme=dark] .form-card {
  border-color: var(--p-linea);
}
[data-theme=dark] .form-input,
[data-theme=dark] .form-select,
[data-theme=dark] .form-textarea {
  color: var(--p-texto);
  background-color: var(--p-superficie-alt);
  border-color: rgba(125, 198, 229, 0.22);
}
[data-theme=dark] .form-input::-moz-placeholder, [data-theme=dark] .form-select::-moz-placeholder, [data-theme=dark] .form-textarea::-moz-placeholder {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] .form-input::placeholder,
[data-theme=dark] .form-select::placeholder,
[data-theme=dark] .form-textarea::placeholder {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] .form-input:focus,
[data-theme=dark] .form-select:focus,
[data-theme=dark] .form-textarea:focus {
  border-color: var(--p-acento);
  background-color: var(--p-superficie);
  box-shadow: 0 0 0 4px var(--p-tinte);
}
[data-theme=dark] .form-select:has(option[value=""]:checked) {
  color: var(--p-texto-suave);
}
[data-theme=dark] .form-select option {
  background-color: var(--p-superficie);
  color: var(--p-texto);
}
[data-theme=dark] .radio-label {
  border-color: rgba(125, 198, 229, 0.22);
}
[data-theme=dark] .radio-label:hover {
  background-color: var(--p-superficie-alt);
}
[data-theme=dark] .radio-icon {
  border-color: var(--p-texto-suave);
}
[data-theme=dark] .radio-input:checked + .radio-icon {
  border-color: var(--p-acento);
  background-color: var(--p-acento);
}
[data-theme=dark] .radio-input:checked + .radio-icon::after {
  background-color: var(--p-fondo);
}
[data-theme=dark] .radio-label:has(.radio-input:checked) {
  border-color: var(--p-acento);
  background-color: var(--p-tinte);
  color: var(--p-acento);
}
[data-theme=dark] .success-icon {
  background: rgba(52, 168, 83, 0.16);
  color: #7EE2A0;
}
[data-theme=dark] .map-container {
  border-color: var(--p-superficie);
}

/* ---- RESPONSIVE ---- */
@media (min-width: 768px) {
  .form-card {
    padding: 4rem;
  }
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .container {
    padding: 0 var(--gutter-desktop);
  }
  .contact-grid {
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
  }
}
/* =========================================================
   VIEW TRANSITIONS — blog section
========================================================= */
@view-transition {
  navigation: auto;
}
/* Fade suave para el fondo de página (todo excepto los elementos con nombre propio) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: ease-out;
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}

::view-transition-new(root) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-fade-in {
  from {
    opacity: 0;
  }
}
/* Elementos con nombre propio (card → hero): duración más larga, easing enérgico */
::view-transition-group(*) {
  animation-duration: 0.5s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Los snapshots del elemento compartido se comportan como imágenes que rellenan su caja */
::view-transition-old(*),
::view-transition-new(*) {
  -o-object-fit: cover;
     object-fit: cover;
  overflow: clip;
}

/* =========================================================
   BLOG HOME — listado de artículos
========================================================= */
.blog-home {
  padding-top: var(--header-height);
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  min-height: 100vh;
}

/* ── SUBNAV ─────────────────────────────────────────────── */
.blog-subnav {
  background: var(--p-superficie);
  border-bottom: 1.5px solid rgba(77, 138, 187, 0.12);
  position: sticky;
  top: var(--header-height);
  z-index: 80;
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
.blog-subnav .container {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 50px;
  gap: 0;
}

.blog-subnav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p-titulo);
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid var(--col-borde);
  text-decoration: none;
  transition: color 0.2s;
}
.blog-subnav-brand svg {
  color: var(--p-acento);
  flex-shrink: 0;
}
.blog-subnav-brand:hover {
  color: var(--p-acento);
}

.blog-subnav-links {
  display: flex;
  gap: 2px;
  padding: 0 14px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.blog-subnav-links::-webkit-scrollbar {
  display: none;
}

.blog-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--col-texto);
  opacity: 0.55;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.blog-subnav-link:hover {
  background: rgba(77, 138, 187, 0.09);
  color: var(--p-acento);
  opacity: 1;
}
.blog-subnav-link.active {
  background: rgba(77, 138, 187, 0.1);
  color: var(--p-acento);
  opacity: 1;
  font-weight: 700;
}

.blog-subnav-end {
  flex-shrink: 0;
  padding-left: 16px;
  border-left: 1px solid var(--col-borde);
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-subnav-count {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--col-texto);
  opacity: 0.34;
  white-space: nowrap;
}

/* ── HERO ───────────────────────────────────────────────── */
.blog-home-hero {
  position: relative;
  padding: 48px 0 0; /* estandarizado con /noticias */
  overflow: hidden;
  background: var(--p-fondo);
  /* Large blue radial glow top-right */
}
.blog-home-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 65%;
  height: 160%;
  background: radial-gradient(ellipse 70% 70% at 60% 40%, rgba(66, 103, 172, 0.09) 0%, rgba(70, 189, 198, 0.05) 50%, transparent 75%);
  pointer-events: none;
}
.blog-home-hero {
  /* Thin blue left accent bar */
}
.blog-home-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--col-bilbao), #46bdc6);
  z-index: 1;
}
.blog-home-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end; /* estandarizado con /noticias */
  gap: 40px;
  /* Sin override de padding: usa el gutter del .container global,
     idéntico al de .blog-featured / .blog-posts → alineados. */
}

.blog-home-hero-body {
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: 52px; /* estandarizado con /noticias */
}

.blog-hero-mascot {
  flex: 0 0 auto;
  width: clamp(200px, 26vw, 400px); /* más grande: aprovecha el espacio (imagen vertical) */
  display: none;
  align-self: flex-end;
  pointer-events: none;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.42));
}
@media (min-width: 640px) {
  .blog-hero-mascot {
    display: block;
  }
}

.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 6px;
  border-radius: 999px;
  background: rgba(66, 103, 172, 0.07);
  color: var(--p-titulo);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 18px;
  border: 1px solid rgba(66, 103, 172, 0.16);
}

.blog-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--col-bilbao);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.blog-home-title {
  max-width: 920px;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--p-titulo);
  margin-bottom: 20px;
}
.blog-home-title em {
  font-style: normal;
  color: var(--p-acento);
}

.blog-home-lead {
  max-width: 580px;
  font-size: 0.95rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--col-texto);
  opacity: 0.82;
  margin-bottom: 28px;
}

.blog-home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.blog-home-actions .btn-primario {
  font-size: 0.875rem;
  padding: 12px 26px;
  background: var(--col-bilbao);
  color: #fff;
  border-color: var(--col-bilbao);
}
.blog-home-actions .btn-primario:hover {
  background: var(--col-herencia);
  border-color: var(--col-herencia);
}
.blog-home-actions .btn-secundario {
  font-size: 0.875rem;
  padding: 12px 26px;
  background: transparent;
  color: var(--p-titulo);
  border-color: rgba(66, 103, 172, 0.3);
}
.blog-home-actions .btn-secundario:hover {
  background: rgba(66, 103, 172, 0.07);
  border-color: var(--col-bilbao);
  color: var(--p-acento);
}

/* ── TOPICS STRIP (marquee de artículos) ────────────────── */
.blog-topics-strip {
  position: relative;
  z-index: 2;
  width: 100%;
  background: var(--col-herencia);
  overflow: hidden;
}

.blog-topics-inner {
  display: flex;
  align-items: stretch;
}

.blog-topics-label {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.blog-topics-label svg {
  opacity: 0.55;
  flex-shrink: 0;
}

.blog-topics-track-wrap {
  overflow: hidden;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.blog-topics-track {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: ticker-scroll 90s linear infinite;
  will-change: transform;
  white-space: nowrap;
  padding: 10px 10px;
}
.blog-topics-track:hover {
  animation-play-state: paused;
}

.blog-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.77rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.11);
  flex-shrink: 0;
  text-decoration: none;
  cursor: default;
  transition: background 0.22s, color 0.22s;
}
.blog-topic-pill:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.topic-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: 0.85;
}

/* ARTÍCULO DESTACADO */
.blog-featured {
  /* Sin padding horizontal: el .container interno ya aporta el gutter,
     así queda alineado con el hero (que solo usa .container). */
  padding: 24px 0 36px;
}

.blog-section-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  margin-bottom: 28px;
}

.blog-section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: var(--p-titulo);
  letter-spacing: -0.03em;
}

.blog-section-copy {
  max-width: 540px;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--col-texto);
  opacity: 0.85;
}

.featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .featured-grid {
    grid-template-columns: 1.25fr 0.75fr;
    align-items: stretch;
  }
}

.featured-main-card {
  position: relative;
  min-height: 540px;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.12);
  background: #dbeafe;
}
.featured-main-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.featured-main-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: end;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(15, 23, 42, 0.82) 100%);
  padding: 32px;
}

.featured-main-content {
  color: #fff;
  max-width: 700px;
}

.post-kicker {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px);
  margin-bottom: 16px;
}

.featured-main-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}

.featured-main-excerpt {
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.75;
  opacity: 0.94;
  margin-bottom: 18px;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  font-size: 0.95rem;
  opacity: 0.88;
}

.featured-side {
  display: grid;
  gap: 20px;
}

/* TARJETAS DE POST */
.mini-post-card {
  background: var(--p-superficie);
  border: 1px solid var(--col-borde);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mini-post-card img {
  width: 100%;
  height: 200px;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.mini-post-card:hover,
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.post-card img {
  width: 100%;
  height: 240px;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.mini-post-body,
.post-card-body {
  padding: 22px;
}

.mini-post-title {
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--p-titulo);
  margin: 10px 0;
}

.mini-post-excerpt,
.post-card-excerpt {
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--col-texto);
  opacity: 0.85;
  line-height: 1.7;
}

/* GRID DE POSTS */
.blog-posts {
  /* Igual que .blog-featured: alineado al gutter del .container */
  padding: 24px 0 80px;
}

/* Móvil: menos margen horizontal para aprovechar el ancho */
@media (max-width: 600px) {
  .blog-home-hero .container,
  .blog-featured .container,
  .blog-posts .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}
.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 768px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1200px) {
  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.post-card {
  background: var(--p-superficie);
  border: 1px solid var(--col-borde);
  border-radius: 26px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.2s ease;
}

.post-card-title {
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--p-titulo);
  margin: 12px 0 10px;
  letter-spacing: -0.02em;
}

.post-card-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.post-card-categories .article-category {
  cursor: pointer;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post-author-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--col-bilbao);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.post-author-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.post-author-avatar span {
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

.post-card.is-hidden {
  display: none;
}

.read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--p-acento);
}
.read-more:hover {
  color: var(--p-titulo);
}

/* BÚSQUEDA */
.blog-search-wrap {
  margin-bottom: 24px;
}

.blog-search-input-wrap {
  position: relative;
  max-width: 580px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 20px rgba(77, 138, 187, 0.09), 0 1px 4px rgba(15, 23, 42, 0.06);
  transition: max-width 0.3s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.blog-search-input-wrap:focus-within {
  max-width: 640px;
  border-color: rgba(77, 138, 187, 0.45);
  box-shadow: 0 0 0 4px rgba(77, 138, 187, 0.1), 0 4px 24px rgba(77, 138, 187, 0.12);
}
.blog-search-input-wrap svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--p-titulo);
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s;
}
.blog-search-input-wrap:focus-within svg {
  opacity: 1;
  color: var(--p-acento);
}

.blog-search-input {
  width: 100%;
  padding: 13px 44px 13px 44px;
  border: none;
  border-radius: 999px;
  font-size: 0.9rem;
  font-family: inherit;
  background: transparent;
  color: var(--col-texto);
  outline: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}
.blog-search-input::-moz-placeholder {
  color: var(--col-texto);
  opacity: 0.38;
}
.blog-search-input::placeholder {
  color: var(--col-texto);
  opacity: 0.38;
}
.blog-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.blog-search-clear {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(77, 138, 187, 0.12);
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--p-acento);
  font-size: 0.7rem;
  padding: 0;
  z-index: 2;
  transition: background 0.18s, transform 0.18s;
}
.blog-search-clear:hover {
  background: rgba(77, 138, 187, 0.24);
  transform: translateY(-50%) scale(1.1);
}
.blog-search-clear.visible {
  display: flex;
}

/* PAGINACIÓN */
.blog-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 40px;
  flex-wrap: wrap;
}

.blog-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1.5px solid rgba(77, 138, 187, 0.18);
  background: var(--p-superficie);
  color: var(--col-texto);
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.blog-page-btn:hover {
  border-color: var(--col-bilbao);
  color: var(--p-acento);
  background: rgba(77, 138, 187, 0.06);
}
.blog-page-btn.active {
  background: var(--col-bilbao);
  border-color: var(--col-bilbao);
  color: #fff;
  box-shadow: 0 4px 12px rgba(77, 138, 187, 0.3);
}
.blog-page-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.blog-page-info {
  font-size: 0.78rem;
  color: var(--text-gray);
  margin-right: 6px;
  white-space: nowrap;
}

/* FILTROS */
.category-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

/* ESTADO VACÍO */
.empty-state {
  display: none;
  padding: 40px 24px;
  border-radius: 24px;
  background: var(--p-superficie);
  border: 1px solid var(--col-borde);
  text-align: center;
  color: var(--col-texto);
}
.empty-state.show {
  display: block;
}

/* CTA BLOG */
.blog-cta {
  padding: 0 24px 110px;
}

.blog-cta-box {
  background: linear-gradient(135deg, var(--col-herencia) 0%, #1a4a9f 50%, var(--col-bilbao) 100%);
  color: #fff;
  border-radius: 28px;
  padding: 52px 32px;
  text-align: center;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
  position: relative;
  overflow: hidden;
}
.blog-cta-box::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -8%;
  width: 55%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 68%);
  pointer-events: none;
}
.blog-cta-box h3 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 14px;
  letter-spacing: -0.03em;
}
.blog-cta-box p {
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  opacity: 0.9;
}
.blog-cta-box .btn-terciario {
  font-size: 0.875rem;
  padding: 12px 30px;
}

/* =========================================================
   TEMA OSCURO — listado del blog
   Solo lo que no cambia con un token sin alterar el claro: tintes de marca
   de opacidad fija (sobre azul noche no se ven), sombras con tinta azul
   (en oscuro no separan: van a negro) y los grises a media opacidad que en
   oscuro quedaban por debajo de 4,5:1.
========================================================= */
[data-theme=dark] .blog-home {
  background: linear-gradient(180deg, var(--p-fondo) 0%, var(--p-fondo-alt) 100%);
}
[data-theme=dark] .blog-subnav {
  border-bottom-color: var(--p-linea);
  box-shadow: 0 2px 14px var(--p-sombra);
}
[data-theme=dark] {
  /* .55 de opacidad sobre --p-superficie daba ~4:1; el activo sigue
     distinguiéndose por su píldora teñida con filete y el peso 700. */
}
[data-theme=dark] .blog-subnav-link {
  opacity: 0.78;
}
[data-theme=dark] .blog-subnav-link:hover {
  background: var(--p-tinte);
}
[data-theme=dark] .blog-subnav-link.active {
  background: var(--p-tinte);
  box-shadow: inset 0 0 0 1px var(--p-linea);
}
[data-theme=dark] .blog-subnav-count {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] {
  /* El resplandor índigo de .07/.09 se pierde en el azul noche: se sube
     y pasa al acento claro, como el halo de la landing. */
}
[data-theme=dark] .blog-home-hero::before {
  background: radial-gradient(ellipse 70% 70% at 60% 40%, rgba(125, 198, 229, 0.1) 0%, rgba(70, 189, 198, 0.05) 50%, transparent 75%);
}
[data-theme=dark] .blog-eyebrow {
  background: var(--p-tinte);
  border-color: var(--p-linea);
}
[data-theme=dark] .blog-home-actions .btn-secundario {
  border-color: rgba(125, 198, 229, 0.32);
}
[data-theme=dark] .blog-home-actions .btn-secundario:hover {
  background: var(--p-tinte);
  border-color: var(--p-acento);
}
[data-theme=dark] {
  /* Hueco de la imagen mientras carga (o si falla): era azul pastel. */
}
[data-theme=dark] .featured-main-card {
  background: var(--p-superficie-alt);
  box-shadow: 0 30px 60px var(--p-sombra);
}
[data-theme=dark] .mini-post-card {
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}
[data-theme=dark] .mini-post-card:hover,
[data-theme=dark] .post-card:hover {
  box-shadow: 0 18px 40px var(--p-sombra);
  border-color: rgba(125, 198, 229, 0.28);
}
[data-theme=dark] {
  /* Buscador: el cristal blanco al 60 % era una barra gris sobre el fondo. */
}
[data-theme=dark] .blog-search-input-wrap {
  background: color-mix(in srgb, var(--p-superficie) 80%, transparent);
  border-color: var(--p-linea);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
[data-theme=dark] .blog-search-input-wrap:focus-within {
  border-color: rgba(125, 198, 229, 0.5);
  box-shadow: 0 0 0 4px var(--p-tinte), 0 4px 24px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .blog-search-input::-moz-placeholder {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] .blog-search-input::placeholder {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] .blog-search-clear {
  background: var(--p-tinte);
}
[data-theme=dark] .blog-search-clear:hover {
  background: rgba(125, 198, 229, 0.22);
}
[data-theme=dark] .blog-page-btn {
  border-color: var(--p-linea);
  /* :not(.active): con el prefijo del tema este hover pesaría más que
     .active y la página actual perdería su relleno al pasar por encima. */
}
[data-theme=dark] .blog-page-btn:hover:not(.active) {
  background: var(--p-tinte);
  border-color: var(--p-acento);
}
[data-theme=dark] .blog-page-btn.active {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .blog-cta-box {
  box-shadow: 0 28px 60px var(--p-sombra);
}

/* =========================================================
   PRÓXIMAMENTE — la página única de las secciones sin contenido
   (views/publico/paginas/_proximamente.php, PaginasController::proximamente()).
   Sustituye a las 11 páginas «en construcción» idénticas y a su `_construction.scss`.
   Composición de la 404 (texto + Alex), con tokens --p-* para claro y oscuro.
========================================================= */
body[data-page=proximamente] .prox {
  position: relative;
  isolation: isolate;
  overflow: clip;
  /* El `main { padding-top: var(--header-height) }` global ya aparta el header fijo. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-bottom: 64px;
  background: radial-gradient(60% 55% at 85% 20%, var(--p-tinte), transparent 70%), radial-gradient(45% 45% at 5% 95%, var(--p-tinte), transparent 70%), var(--p-fondo);
}
body[data-page=proximamente] .prox__wrap {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--gutter-mobile, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
body[data-page=proximamente] {
  /* ---- Texto ---- */
}
body[data-page=proximamente] .prox__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.1rem;
}
body[data-page=proximamente] .prox__grupo {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--p-texto-suave);
}
body[data-page=proximamente] .prox__titulo {
  margin: 0;
  font-size: clamp(2.2rem, 5.4vw, 3.8rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--p-titulo);
  text-wrap: balance;
}
body[data-page=proximamente] .prox__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--p-tinte);
  /* `--col-bilbao` a pelo sobre su propio velo da 3,40:1 (texto de 12px: no llega).
     Hacia la tinta un 30 %: 5,25:1 y sigue leyéndose azul de marca. En oscuro el
     acento claro ya da 8,3:1 y no se mezcla (ver abajo). */
  color: color-mix(in srgb, var(--col-bilbao) 70%, var(--pal-tinta));
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
body[data-page=proximamente] .prox__punto {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--col-accent-pop, #F1C400);
  box-shadow: 0 0 0 0 rgba(241, 196, 0, 0.55);
  animation: proxLatido 2s ease-out infinite;
}
body[data-page=proximamente] .prox__lead {
  margin: 0;
  max-width: 34rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--p-texto);
  text-wrap: pretty;
}
body[data-page=proximamente] .prox__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 0.4rem;
}
body[data-page=proximamente] {
  /* ---- Explora ---- */
}
body[data-page=proximamente] .prox__explora {
  width: 100%;
  margin-top: 0.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--p-linea);
}
body[data-page=proximamente] .prox__explora-label {
  margin: 0 0 0.7rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--p-texto-suave);
}
body[data-page=proximamente] .prox__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-page=proximamente] .prox__chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 100px;
  background: var(--p-superficie);
  border: 1.5px solid var(--p-linea);
  color: var(--p-titulo);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
body[data-page=proximamente] .prox__chip:hover, body[data-page=proximamente] .prox__chip:focus-visible {
  border-color: var(--p-acento);
  color: var(--p-acento);
  transform: translateY(-2px);
}
body[data-page=proximamente] {
  /* ---- Escena: Alex + bocadillo ---- */
}
body[data-page=proximamente] .prox__escena {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  /* Los aros cuelgan del <picture> y no de `.prox`: así quedan concéntricos con Alex
     en cualquier ancho —son la «señal» del punto que late en el badge—. Iban
     anclados al borde derecho de la página y a 1440px el centro caía 150px a la
     derecha de Alex, que parecía descolocado dentro de su propio fondo.
     `z-index:-1` contra el `isolation` de `.prox`: detrás del bocadillo y de Alex,
     delante del degradado. `.prox` es `overflow: clip`, así que el grande puede
     salirse de la pantalla sin dar scroll. */
}
body[data-page=proximamente] .prox__escena picture {
  position: relative;
  display: block;
  flex: 0 0 auto;
}
body[data-page=proximamente] .prox__escena picture::before, body[data-page=proximamente] .prox__escena picture::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 54%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px solid var(--p-linea);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
body[data-page=proximamente] .prox__escena picture::before {
  width: 135%;
}
body[data-page=proximamente] .prox__escena picture::after {
  width: 215%;
}
body[data-page=proximamente] .prox__bocadillo {
  position: relative;
  margin: 0;
  max-width: 17rem;
  text-wrap: pretty;
  padding: 1rem 1.3rem;
  border-radius: var(--radius-card, 24px);
  background: var(--p-superficie);
  border: 2px solid var(--p-linea);
  box-shadow: var(--shadow-float);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--p-titulo);
  text-align: center;
  /* Punta hacia Alex */
}
body[data-page=proximamente] .prox__bocadillo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 16px;
  height: 16px;
  background: var(--p-superficie);
  border-right: 2px solid var(--p-linea);
  border-bottom: 2px solid var(--p-linea);
  transform: translateX(-50%) rotate(45deg);
}
body[data-page=proximamente] .prox__alex {
  display: block;
  width: min(300px, 70vw);
  height: auto;
  /* El hueco se reserva ANTES de que llegue la imagen (3375×4219; la vista pone además
     `width`/`height`): sin esto, en móvil el bloque nacía a 0px de alto y el título
     saltaba ~250px hacia abajo al decodificarse Alex. */
  aspect-ratio: 3375/4219;
  filter: drop-shadow(0 18px 30px rgba(55, 76, 105, 0.22));
  animation: proxFlota 4.5s ease-in-out infinite;
}
body[data-page=proximamente] {
  /* ---- Oscuro ---- */
}
[data-theme=dark] body[data-page=proximamente] .prox__badge {
  color: var(--p-acento);
}
[data-theme=dark] body[data-page=proximamente] .prox__alex {
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
}
body[data-page=proximamente] {
  /* ---- Responsive: una columna, todo centrado ----
     Alex y su bocadillo pasan a UNA fila compacta encima del texto (Alex a la izquierda,
     el bocadillo apuntándole). En columna —bocadillo, Alex de 210px y luego el texto— el
     h1, que es lo único que dice dónde estás, caía a ~530px en un teléfono de 844: media
     pantalla de mascota antes del dato. En fila la escena mide lo que Alex (~190px) y el
     nombre de la sección entra en el primer pantallazo. */
}
@media (max-width: 900px) {
  body[data-page=proximamente] .prox {
    align-items: flex-start;
    padding-bottom: 48px;
  }
  body[data-page=proximamente] .prox__wrap {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    padding-top: 2rem;
  }
  body[data-page=proximamente] .prox__escena {
    order: -1;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 14px;
  }
  body[data-page=proximamente] .prox__alex {
    width: min(170px, 34vw);
  }
  body[data-page=proximamente] .prox__bocadillo {
    flex: 0 1 15rem;
    max-width: 15rem;
    padding: 0.85rem 1.1rem;
    text-align: left;
    /* La punta gira para señalar a Alex, que ahora está a la izquierda */
  }
  body[data-page=proximamente] .prox__bocadillo::after {
    left: -9px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(135deg);
  }
  body[data-page=proximamente] .prox__texto {
    align-items: center;
    text-align: center;
  }
  body[data-page=proximamente] {
    /* Centrado sí, a todo lo ancho no: a 768px el párrafo corría ~690px (100+ caracteres
       por línea). Se queda en la medida de escritorio. */
  }
  body[data-page=proximamente] .prox__lead {
    max-width: 34rem;
  }
  body[data-page=proximamente] .prox__acciones, body[data-page=proximamente] .prox__chips {
    justify-content: center;
  }
}
@media (max-width: 520px) {
  body[data-page=proximamente] .prox__alex {
    width: min(130px, 34vw);
  }
  body[data-page=proximamente] .prox__bocadillo {
    font-size: 0.88rem;
  }
  body[data-page=proximamente] .prox__titulo {
    font-size: clamp(2rem, 9vw, 2.4rem);
  }
  body[data-page=proximamente] .prox__acciones {
    width: 100%;
    flex-direction: column;
  }
  body[data-page=proximamente] .prox__acciones > a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}
body[data-page=proximamente] {
  /* Sin movimiento: Alex y el punto se quedan quietos (el estado final es el de reposo). */
}
@media (prefers-reduced-motion: reduce) {
  body[data-page=proximamente] .prox__alex, body[data-page=proximamente] .prox__punto {
    animation: none;
  }
  body[data-page=proximamente] .prox__chip {
    transition: none;
  }
}

/* Fuera del scope: @keyframes */
@keyframes proxFlota {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes proxLatido {
  0% {
    box-shadow: 0 0 0 0 rgba(241, 196, 0, 0.55);
  }
  70% {
    box-shadow: 0 0 0 9px rgba(241, 196, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(241, 196, 0, 0);
  }
}
/* =========================================================
   ADMISIONES — página de inicio
========================================================= */
.hero-section {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: center;
  background-color: var(--p-fondo);
  overflow: hidden;
  padding-top: 40px;
}

.hero-blob-bg {
  position: absolute;
  right: -15%;
  top: -20%;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, rgba(77, 138, 187, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  animation: pulseBlob 10s infinite alternate;
}

@keyframes pulseBlob {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  position: relative;
  z-index: 2;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
  }
}

.hero-text-col {
  position: relative;
  z-index: 3;
  text-align: left;
}

.hero-supertitle {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--col-espiritu);
  margin-bottom: 1rem;
  display: block;
  opacity: 0;
  animation: fadeUpAdm 1s ease forwards 0.2s;
}

.hero-h1-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--p-acento);
  margin-bottom: 1.5rem;
  letter-spacing: -0.04em;
  opacity: 0;
  animation: fadeUpAdm 1s ease forwards 0.4s;
}

.hero-desc-p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-gray);
  max-width: 550px;
  opacity: 0;
  animation: fadeUpAdm 1s ease forwards 0.6s;
  text-align: left;
}

.hero-img-col {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: scaleInAdm 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;
}

.hero-img-main {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 30px;
  box-shadow: 30px 40px 80px -10px rgba(0, 51, 102, 0.2);
  z-index: 2;
  transition: transform 0.6s ease;
  transform: rotate(2deg);
}
.hero-img-col:hover .hero-img-main {
  transform: rotate(0deg) scale(1.02);
}

.hero-floating-card {
  position: absolute;
  background: var(--p-superficie);
  padding: 1.5rem 2rem;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  z-index: 3;
  bottom: 40px;
  left: -20px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  animation: floatCard 5s ease-in-out infinite;
  text-align: left;
}

.float-stat {
  font-size: 2rem;
  font-weight: 900;
  color: var(--p-acento);
  line-height: 1;
  margin-bottom: 5px;
  display: block;
}

.float-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--p-titulo);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes floatCard {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes fadeUpAdm {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleInAdm {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.manifesto-section {
  padding: 140px 32px;
  background-color: var(--p-fondo);
  text-align: center;
}

.manifesto-container {
  max-width: 900px;
  margin: 0 auto;
}

.manifesto-lead {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--p-acento);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 64px;
}

.manifesto-body {
  font-size: 1.25rem;
  color: var(--p-titulo);
  line-height: 1.8;
  font-weight: 400;
  max-width: 800px;
  margin: 0 auto;
}

.manifesto-divider {
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, var(--col-bilbao), var(--col-espiritu));
  margin: 64px auto;
  border-radius: 2px;
}

.comparison-section {
  padding: 140px 32px;
  background-color: #F8FAFC;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 100px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .comparison-grid {
    grid-template-columns: 1.1fr 0.9fr;
    align-items: start;
  }
}

.card-yes {
  background: var(--p-superficie);
  border-radius: 30px;
  padding: 100px;
  box-shadow: 0 20px 60px rgba(77, 138, 187, 0.15);
  border-top: 8px solid var(--col-bilbao);
}
.card-yes h2 {
  font-size: 2rem;
  color: var(--p-acento);
  margin-bottom: 64px;
  font-weight: 700;
}

.check-list li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 20px;
  font-size: 1.1rem;
  color: var(--p-titulo);
  font-weight: 500;
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--p-acento);
  font-weight: 800;
  font-size: 1.2rem;
}

.card-no {
  background: transparent;
  padding: 64px;
  border-left: 4px solid #CBD5E1;
  margin-top: 64px;
}
.card-no h2 {
  font-size: 1.5rem;
  color: #64748B;
  margin-bottom: 24px;
  font-weight: 600;
}
.card-no p {
  font-size: 1rem;
  color: #64748B;
  margin-bottom: 16px;
  font-style: italic;
}
.card-no strong {
  color: #475569;
}

.process-section {
  padding: 140px 32px;
  background-color: var(--p-fondo);
  text-align: center;
}

.process-container {
  max-width: 1000px;
  margin: 0 auto;
}

.process-h2 {
  font-size: 2.5rem;
  margin-bottom: 100px;
  font-weight: 700;
  color: var(--p-titulo);
}

.steps-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.step-item {
  background: #F8FAFC;
  padding: 40px 30px;
  border-radius: 20px;
  transition: background 0.3s, transform 0.3s;
  border: 1px solid #E5E7EB;
}
.step-item:hover {
  background: var(--p-superficie);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-color: var(--p-acento);
}

.step-icon {
  font-size: 3rem;
  margin-bottom: 20px;
  display: block;
}

.step-title {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--p-acento);
}

.step-desc {
  font-size: 1rem;
  opacity: 0.9;
  line-height: 1.6;
  color: var(--p-titulo);
}

.explore-section {
  padding: 140px 32px;
}

.explore-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 100px;
}

.explore-h2 {
  font-size: 2.5rem;
  color: var(--p-titulo);
  font-weight: 700;
  margin-bottom: 16px;
}

.bento-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 300px;
  }
}

@media (min-width: 1024px) {
  .span-2 {
    grid-column: span 2;
  }
}

.bento-card {
  position: relative;
  height: 300px;
  border-radius: 20px;
  overflow: hidden;
  display: block;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s;
  background-color: #eee;
  text-decoration: none;
}
.bento-card:hover {
  transform: scale(1.02);
  z-index: 2;
}
.bento-card:hover .bento-img {
  transform: scale(1.1);
}

.bento-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s;
}

.bento-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  display: flex;
  align-items: flex-end;
  padding: 24px;
}

.bento-title {
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
}

.closing-message {
  text-align: center;
  margin-top: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}
.closing-message p {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--p-acento);
  line-height: 1.5;
}

.adm-faq-section {
  background-color: var(--p-fondo);
  padding: 140px 32px;
  border-top: 1px solid var(--col-borde);
}
.adm-faq-section .faq-wrapper {
  max-width: 900px;
  margin: 0 auto;
}
.adm-faq-section .faq-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-acento);
  text-align: center;
  margin-bottom: 48px;
}
.adm-faq-section .faq-item {
  border-bottom: 1px solid var(--col-borde);
}
.adm-faq-section .faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--p-titulo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: color 0.2s;
}
.adm-faq-section .faq-question:hover {
  color: var(--p-acento);
}
.adm-faq-section .faq-question:hover .faq-icon svg {
  fill: var(--p-acento);
}
.adm-faq-section .faq-question[aria-expanded=true] {
  color: var(--p-acento);
}
.adm-faq-section .faq-question[aria-expanded=true] .faq-icon {
  background-color: var(--col-bilbao);
  transform: rotate(180deg);
}
.adm-faq-section .faq-question[aria-expanded=true] .faq-icon svg {
  fill: #fff;
}
.adm-faq-section .faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #F0F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.3s;
  flex-shrink: 0;
}
[data-theme=dark] .adm-faq-section .faq-icon {
  background-color: var(--p-superficie-alt);
}
.adm-faq-section .faq-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--p-titulo);
  transition: fill 0.3s;
}
.adm-faq-section .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  color: var(--p-titulo);
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0;
  /* En claro la respuesta va en la tinta de títulos; en oscuro, en la de texto
     corrido: párrafos enteros en el blanco de los títulos deslumbran. */
}
[data-theme=dark] .adm-faq-section .faq-answer {
  color: var(--p-texto);
}
.adm-faq-section .faq-answer p {
  margin: 0 0 8px;
}
.adm-faq-section .faq-question[aria-expanded=true] + .faq-answer {
  opacity: 1;
  padding-bottom: 24px;
}
.adm-faq-section .faq-title {
  margin-bottom: 64px;
}

.adm-cta-section {
  padding: 140px 32px;
  background-color: var(--p-fondo);
  border-top: 1px solid var(--col-borde);
}

.adm-cta-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}
@media (min-width: 768px) {
  .adm-cta-container {
    flex-direction: row;
    align-items: center;
  }
}

.mascot-img {
  width: 280px;
  height: auto;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.mascot-img:hover {
  transform: scale(1.1) rotate(3deg);
}

.adm-cta-content {
  text-align: center;
  flex-grow: 1;
}
.adm-cta-content h2 {
  font-size: 2rem;
  color: var(--p-acento);
  margin-bottom: 24px;
}
.adm-cta-content p {
  font-size: 1.1rem;
  color: var(--p-titulo);
  text-align: center;
}
@media (min-width: 768px) {
  .adm-cta-content {
    text-align: left;
  }
  .adm-cta-content h2, .adm-cta-content p {
    text-align: left;
  }
}

[data-theme=dark] .comparison-section {
  background-color: var(--p-fondo-alt);
}
[data-theme=dark] .hero-img-main {
  box-shadow: 30px 40px 80px -10px var(--p-sombra);
}
[data-theme=dark] .hero-floating-card {
  background: var(--p-superficie);
  border-color: var(--p-linea);
  box-shadow: 0 30px 60px var(--p-sombra);
}
[data-theme=dark] .float-stat {
  color: var(--p-acento);
}
[data-theme=dark] .float-label {
  color: var(--p-titulo);
}
[data-theme=dark] .card-yes {
  box-shadow: 0 20px 60px var(--p-sombra);
}
[data-theme=dark] .card-no {
  border-left-color: var(--p-linea);
}
[data-theme=dark] .card-no h2, [data-theme=dark] .card-no p {
  color: var(--p-texto-suave);
}
[data-theme=dark] .card-no strong {
  color: var(--p-texto);
}
[data-theme=dark] .step-item {
  background: var(--p-superficie);
  border-color: var(--p-linea);
}
[data-theme=dark] .step-item:hover {
  background: var(--p-superficie-alt);
  box-shadow: 0 10px 30px var(--p-sombra);
  border-color: var(--p-acento);
}
[data-theme=dark] .bento-card {
  background-color: var(--p-superficie-alt);
  box-shadow: 0 30px 60px var(--p-sombra);
}
[data-theme=dark] .adm-faq-section .faq-question {
  color: var(--p-titulo);
}
[data-theme=dark] .adm-faq-section .faq-question:hover,
[data-theme=dark] .adm-faq-section .faq-question[aria-expanded=true] {
  color: var(--p-acento);
}
[data-theme=dark] .adm-faq-section .faq-question:hover .faq-icon svg {
  fill: var(--p-acento);
}
[data-theme=dark] .adm-faq-section .faq-icon {
  background-color: var(--p-superficie-alt);
}
[data-theme=dark] .adm-faq-section .faq-icon svg {
  fill: var(--p-titulo);
}
[data-theme=dark] .adm-faq-section .faq-question[aria-expanded=true] .faq-icon {
  background-color: var(--col-bilbao);
}
[data-theme=dark] .adm-faq-section .faq-question[aria-expanded=true] .faq-icon svg {
  fill: #fff;
}
[data-theme=dark] .adm-faq-section .faq-answer {
  color: var(--p-texto);
}

/* =========================================================
   ADMISIONES — preguntas frecuentes
========================================================= */
.faq-hero {
  background-color: var(--bg-global);
  padding: 80px 0 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.faq-hero-blob {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(125, 198, 229, 0.15) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  animation: breatheFaq 10s infinite alternate;
}

@keyframes breatheFaq {
  0% {
    transform: translateX(-50%) scale(1);
  }
  100% {
    transform: translateX(-50%) scale(1.1);
  }
}
.faq-hero-pre {
  display: inline-block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--col-espiritu);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.faq-hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  color: var(--p-acento);
  line-height: 1.1;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
}

.faq-hero-desc {
  font-size: 1.2rem;
  color: var(--text-gray);
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.faq-intro-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .faq-intro-section {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}

.faq-intro-icon {
  width: 200px;
  height: auto;
  flex-shrink: 0;
  margin-bottom: 16px;
}
.faq-intro-icon img {
  width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  .faq-intro-icon {
    margin-right: 48px;
    margin-bottom: 0;
    border-right: 2px solid var(--col-borde);
    padding-right: 48px;
    display: flex;
    align-items: center;
  }
}

.faq-intro-text {
  text-align: center;
}

.faq-intro-lead {
  font-size: 1.4rem;
  color: var(--p-acento);
  font-weight: 600;
  margin-bottom: 16px;
  line-height: 1.5;
}

.faq-intro-body {
  font-size: 1.15rem;
  color: var(--p-titulo);
  line-height: 1.8;
  font-weight: 300;
}

@media (min-width: 768px) {
  .faq-intro-text {
    text-align: justify;
  }
}
.mobile-cat-nav-wrapper {
  position: sticky;
  top: var(--header-height);
  z-index: 900;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--col-borde);
  margin-bottom: 2rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
@media (min-width: 1024px) {
  .mobile-cat-nav-wrapper {
    display: none;
  }
}

.mobile-cat-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 1rem;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mobile-cat-nav::-webkit-scrollbar {
  display: none;
}

.mobile-cat-link {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 0.6rem 1.2rem;
  background: var(--p-superficie);
  border-radius: 50px;
  border: 1px solid var(--col-borde);
  color: var(--p-titulo);
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.3s;
  white-space: nowrap;
}
.mobile-cat-link.active {
  background: var(--col-bilbao);
  color: white;
  border-color: var(--col-bilbao);
  box-shadow: 0 4px 10px rgba(77, 138, 187, 0.3);
}

.faq-content-section {
  padding: 0 0 48px;
  position: relative;
}

.faq-layout {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .faq-layout {
    grid-template-columns: 280px 1fr;
    gap: 5rem;
    align-items: start;
  }
}

.sticky-wrapper {
  position: sticky;
  top: 100px;
  align-self: start;
}

.faq-nav {
  background: var(--p-superficie);
  border-radius: var(--radius-card);
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--col-borde);
  display: none;
}
@media (min-width: 1024px) {
  .faq-nav {
    display: block;
  }
}

.faq-nav-title {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: var(--text-gray);
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 1px;
  padding-left: 1rem;
}

.faq-nav-list a {
  display: block;
  padding: 0.8rem 1rem;
  color: var(--p-titulo);
  font-weight: 500;
  font-size: 0.95rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}
.faq-nav-list a:hover, .faq-nav-list a.active {
  background-color: var(--bg-global);
  color: var(--p-acento);
  border-left-color: var(--p-acento);
}

.faq-group {
  margin-bottom: 4rem;
  scroll-margin-top: 160px;
}

.faq-group-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--p-acento);
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--col-borde);
  display: flex;
  align-items: center;
  gap: 10px;
}

.group-icon {
  font-size: 1.5rem;
  opacity: 0.8;
}

.category-img {
  width: 100%;
  height: 300px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--radius-card);
  margin-bottom: 3rem;
  box-shadow: 0 10px 30px rgba(77, 138, 187, 0.1);
  display: block;
}

.faq-list-container details {
  margin-bottom: 1.5rem;
  background: var(--p-superficie);
  border-radius: 12px;
  border: 1px solid rgba(77, 138, 187, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.faq-list-container details:hover {
  box-shadow: 0 8px 16px rgba(77, 138, 187, 0.1);
  transform: translateY(-2px);
  border-color: rgba(77, 138, 187, 0.3);
}
.faq-list-container details[open] {
  box-shadow: 0 10px 25px rgba(77, 138, 187, 0.15);
  border-color: var(--col-espiritu);
}
.faq-list-container summary {
  padding: 1.5rem 4rem 1.5rem 2rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--p-titulo);
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color 0.3s;
}
.faq-list-container summary::-webkit-details-marker {
  display: none;
}
.faq-list-container summary:hover {
  color: var(--p-acento);
}
.faq-list-container summary::after {
  content: "+";
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  font-weight: 300;
  color: var(--col-espiritu);
  transition: transform 0.3s ease, color 0.3s;
}
.faq-list-container details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--p-acento);
}

.faq-ans {
  padding: 0 2rem 2rem;
  color: var(--text-gray);
  font-size: 1.05rem;
  line-height: 1.7;
  animation: fadeInFaq 0.4s ease;
}

@keyframes fadeInFaq {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.faq-cta-box {
  background: linear-gradient(135deg, var(--col-bilbao) 0%, var(--col-herencia) 100%);
  color: white;
  border-radius: var(--radius-card);
  padding: 4rem 2rem;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 30px 60px rgba(77, 138, 187, 0.2);
}

.faq-cta-title {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.faq-cta-desc {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

[data-theme=dark] .mobile-cat-nav-wrapper {
  background: var(--p-header);
  box-shadow: 0 4px 10px var(--p-sombra);
}
[data-theme=dark] .faq-nav {
  box-shadow: 0 4px 20px var(--p-sombra);
}
[data-theme=dark] .faq-nav-list a:hover,
[data-theme=dark] .faq-nav-list a.active {
  background-color: var(--p-tinte);
}
[data-theme=dark] .faq-list-container details {
  border-color: var(--p-linea);
  box-shadow: none;
}
[data-theme=dark] .faq-list-container details:hover {
  border-color: rgba(125, 198, 229, 0.32);
  box-shadow: 0 8px 16px var(--p-sombra);
}
[data-theme=dark] .faq-list-container details[open] {
  border-color: var(--col-espiritu);
  box-shadow: 0 10px 25px var(--p-sombra);
}
[data-theme=dark] .faq-cta-box {
  box-shadow: 0 30px 60px var(--p-sombra);
}

/* =========================================================
   PAGE INTERIOR — Estilos compartidos para páginas interiores
========================================================= */
.page-main {
  padding-top: var(--header-height);
}

.page-hero {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  background-color: var(--col-herencia);
  background-size: cover;
  background-position: center;
  padding: 64px 24px;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-content {
  max-width: 900px;
  z-index: 2;
  position: relative;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.1;
  color: #fff;
  text-align: center;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 400;
  text-align: center;
  color: #fff;
}

.hero-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.1;
  text-align: center;
  color: #fff;
}

.hero-content p {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  text-align: center;
  color: #fff;
  margin-bottom: 0;
}

.page-nav-wrapper {
  background-color: var(--p-superficie);
  border-bottom: 1px solid #E0E6ED;
  position: sticky;
  top: var(--header-height);
  z-index: 900;
  padding: 16px 0;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.page-nav {
  max-width: var(--container-width);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0 24px;
}

.page-nav-link {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--p-titulo);
  padding: 8px 16px;
  border-radius: 20px;
  background-color: #F0F4F8;
  transition: all 0.2s ease;
}
.page-nav-link:hover {
  background-color: var(--col-espiritu);
  color: #fff;
  transform: translateY(-2px);
}

.sticky-nav-container {
  position: sticky;
  top: var(--header-height);
  z-index: 900;
  padding: 10px 0;
  background-color: rgba(249, 251, 254, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}

.sticky-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 0 24px;
}

.sticky-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--p-titulo);
  padding: 6px 14px;
  border-radius: 20px;
  background-color: #E8EEF4;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.sticky-link:hover {
  background-color: var(--col-espiritu);
  color: #fff;
  transform: translateY(-2px);
}

.section-container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 64px 24px;
  scroll-margin-top: 140px;
}

h2.section-title {
  font-size: 2rem;
  color: var(--p-acento);
  margin-bottom: 32px;
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: left;
}
h2.section-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: var(--col-espiritu);
  margin-top: 8px;
}

.section-label {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--col-espiritu);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: block;
}

.section-heading {
  font-size: 2.5rem;
  color: var(--p-acento);
  font-weight: 700;
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.section-desc {
  font-size: 1.1rem;
  color: var(--p-titulo);
  line-height: 1.7;
}

.feature-block {
  display: grid;
  gap: 48px;
  align-items: center;
  margin-bottom: 48px;
}
@media (min-width: 900px) {
  .feature-block {
    grid-template-columns: 1fr 1fr;
  }
  .feature-block.reverse .feature-image {
    order: 2;
  }
  .feature-block.reverse .feature-text {
    order: 1;
  }
}

.feature-image {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  height: 400px;
  position: relative;
}
.feature-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s;
}
.feature-image:hover img {
  transform: scale(1.03);
}
@media (min-width: 900px) {
  .feature-image {
    height: 500px;
  }
}

.feature-text {
  padding: 24px;
}

.feature-label {
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--col-espiritu);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: block;
}

.feature-title {
  font-size: 2.5rem;
  color: var(--p-acento);
  font-weight: 700;
  margin-bottom: 24px;
  line-height: 1.2;
}

.feature-desc p {
  margin-bottom: 24px;
  font-size: 1.1rem;
  color: var(--p-titulo);
}

.gallery-section {
  padding: 48px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.gallery-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

.visual-break {
  width: 40px;
  height: 3px;
  background-color: var(--col-espiritu);
  margin: 24px 0;
  border-radius: 2px;
  opacity: 0.6;
}

.text-highlight {
  color: var(--col-espiritu);
  font-weight: 700;
}

.text-link {
  color: var(--p-acento);
  font-weight: 600;
  border-bottom: 2px solid var(--col-espiritu);
  transition: all 0.2s;
}
.text-link:hover {
  color: var(--p-titulo);
  border-bottom-color: var(--p-acento);
}

.intro-lead {
  font-size: 1.4rem;
  color: var(--p-acento);
  font-weight: 600;
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: center;
}

.cta-section {
  padding: 64px 24px;
  background-color: var(--p-superficie);
  border-top: 1px solid #E0E6ED;
}

.cta-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
@media (min-width: 768px) {
  .cta-container {
    flex-direction: row;
    text-align: left;
    align-items: center;
  }
}

.cta-content {
  text-align: center;
  flex-grow: 1;
}
.cta-content h2 {
  font-size: 2rem;
  color: var(--p-acento);
  margin-bottom: 24px;
}
.cta-content p {
  text-align: center;
  font-size: 1.1rem;
  color: var(--p-titulo);
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .cta-content {
    text-align: left;
  }
  .cta-content h2, .cta-content p:not(.cta-p) {
    text-align: left;
  }
}

.mascot-img {
  width: 150px;
  height: auto;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}
.mascot-img:hover {
  transform: scale(1.05) rotate(3deg);
}
@media (min-width: 768px) {
  .mascot-img {
    width: 200px;
    margin-right: 24px;
  }
}

[data-theme=dark] .page-nav-wrapper {
  border-bottom-color: var(--p-linea);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
}
[data-theme=dark] .page-nav-link,
[data-theme=dark] .sticky-link {
  background-color: var(--p-superficie-alt);
}
[data-theme=dark] .page-nav-link:hover,
[data-theme=dark] .sticky-link:hover {
  background-color: var(--col-espiritu);
}
[data-theme=dark] .sticky-nav-container {
  background-color: rgba(12, 31, 51, 0.92);
  border-bottom-color: var(--p-linea);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] .gallery-section {
  border-top-color: var(--p-linea);
}
[data-theme=dark] .cta-section {
  border-top-color: var(--p-linea);
}
[data-theme=dark] .section-desc,
[data-theme=dark] .feature-desc p,
[data-theme=dark] .cta-content p {
  color: var(--p-texto);
}

@keyframes fadeInMethod {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   CONOCENOS — Estilos de las páginas: Quiénes somos,
   Equipo educativo, Instalaciones, Certificaciones
========================================================= */
.page-conocenos {
  /* Tema: `--col-herencia` se usaba aquí como color de PÁRRAFO. En claro sigue igual;
     en oscuro el cuerpo baja a `--p-texto` y no a `--p-titulo`, para que los títulos
     (`--p-acento`/`--p-titulo`) conserven jerarquía sobre el texto corrido. */
  --cn-cuerpo: var(--col-herencia);
}
[data-theme=dark] .page-conocenos {
  --cn-cuerpo: var(--p-texto);
}
.page-conocenos .conocenos-text {
  font-size: 14px;
}
.page-conocenos .btn-primario {
  margin-top: 20px;
}
.page-conocenos .intro-section {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  padding: 24px;
}
.page-conocenos .intro-highlight {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--p-acento);
  line-height: 1.6;
  margin-bottom: 24px;
  text-align: justify;
}
.page-conocenos .intro-body {
  font-size: 1.15rem;
  color: var(--cn-cuerpo);
  line-height: 1.8;
  text-align: justify;
}
.page-conocenos .graphic-separator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 32px 0;
}
.page-conocenos .separator-line {
  height: 2px;
  flex-grow: 1;
  background: linear-gradient(90deg, transparent, #E0E6ED, transparent);
  max-width: 150px;
}
[data-theme=dark] .page-conocenos .separator-line {
  background: linear-gradient(90deg, transparent, var(--p-linea), transparent);
}
.page-conocenos .separator-icon {
  width: 64px;
  height: 48px;
}
.page-conocenos .history-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .page-conocenos .history-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
.page-conocenos .history-img {
  order: 1;
  width: 100%;
}
.page-conocenos .history-img img {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(77, 138, 187, 0.15);
  width: 100%;
}
[data-theme=dark] .page-conocenos .history-img img {
  box-shadow: 0 10px 30px var(--p-sombra);
}
@media (min-width: 900px) {
  .page-conocenos .history-img {
    order: unset;
    width: auto;
  }
}
.page-conocenos .history-content {
  order: 2;
  width: 100%;
}
.page-conocenos .history-content p {
  margin-bottom: 24px;
  font-size: 14px;
}
@media (min-width: 900px) {
  .page-conocenos .history-content {
    order: unset;
    width: auto;
  }
}
.page-conocenos .mission-section {
  background: linear-gradient(180deg, var(--col-bilbao) 0%, var(--col-espiritu) 100%);
  color: #fff;
  border-radius: 16px;
  margin: 64px auto;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(77, 138, 187, 0.25);
}
@media (min-width: 900px) {
  .page-conocenos .mission-section {
    flex-direction: row;
  }
}
.page-conocenos .mission-text-content {
  padding: 48px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 900px) {
  .page-conocenos .mission-text-content {
    padding: 48px;
  }
}
.page-conocenos .mission-img-content {
  flex: 1;
  min-height: 300px;
  position: relative;
}
.page-conocenos .mission-img-content img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
@media (min-width: 900px) {
  .page-conocenos .mission-img-content {
    min-height: auto;
  }
}
.page-conocenos .mission-quote {
  font-size: 1.8rem;
  font-weight: 700;
  font-style: italic;
  margin-bottom: 24px;
  line-height: 1.3;
  text-align: center;
}
@media (min-width: 900px) {
  .page-conocenos .mission-quote {
    text-align: left;
  }
}
.page-conocenos .mission-text {
  font-size: 1.1rem;
  opacity: 0.95;
  max-width: 800px;
  margin: 0 auto;
  text-align: justify;
}
.page-conocenos .attributes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 600px) {
  .page-conocenos .attributes-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 1024px) {
  .page-conocenos .attributes-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page-conocenos .attribute-card {
  background: var(--p-superficie);
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-top: 4px solid var(--col-bilbao);
  transition: all 0.3s var(--transition-bezi);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-height: 200px;
  justify-content: center;
  cursor: pointer;
}
.page-conocenos .attribute-card img {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 16px;
  transition: all 0.3s ease;
  -o-object-fit: contain;
     object-fit: contain;
  animation: floatIconAttr 4s ease-in-out infinite;
}
.page-conocenos .attribute-card:nth-child(2n) img {
  animation-delay: 1s;
}
.page-conocenos .attribute-card:nth-child(3n) img {
  animation-delay: 2s;
}
.page-conocenos .attribute-card h3 {
  color: var(--p-titulo);
  font-size: 1.35rem;
  margin: 0;
  transition: all 0.3s ease;
}
[data-theme=dark] .page-conocenos .attribute-card {
  box-shadow: 0 4px 12px var(--p-sombra);
}
.page-conocenos .attribute-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(77, 138, 187, 0.15);
}
[data-theme=dark] .page-conocenos .attribute-card:hover {
  box-shadow: 0 12px 24px var(--p-sombra);
}
.page-conocenos .attribute-card:hover img {
  transform: scale(0.9);
  margin-bottom: 0;
  animation: none;
}
.page-conocenos .attribute-card:hover .attribute-desc {
  opacity: 1;
  max-height: 200px;
  margin-top: 24px;
}
.page-conocenos .attribute-desc {
  font-size: 0.95rem;
  color: var(--col-texto);
  margin-top: 16px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
  text-align: center;
}
.page-conocenos .expect-list {
  font-size: 14px;
  margin-top: 24px;
  padding-left: 24px;
}
.page-conocenos .expect-list li {
  position: relative;
  margin-bottom: 16px;
  padding-left: 24px;
  text-align: justify;
}
.page-conocenos .expect-list li::before {
  content: "•";
  color: var(--p-acento);
  font-weight: bold;
  font-size: 1.5rem;
  position: absolute;
  left: 0;
  top: -5px;
}
.page-conocenos .summary-full-width {
  width: 100%;
  background: radial-gradient(circle at top right, #8da4c3 0%, var(--col-herencia) 80%);
  color: #fff;
  padding: 150px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-conocenos .summary-content-wrapper {
  max-width: 900px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.page-conocenos .summary-lead {
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 300;
  line-height: 1.5;
  margin-bottom: 32px;
  color: #fff;
  text-align: center;
}
.page-conocenos .summary-body {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  font-weight: 700;
  line-height: 1.8;
  color: #fff;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}
.page-conocenos .directors-header-clean {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px auto;
}
.page-conocenos .dh-title-clean {
  font-size: 2.5rem;
  color: var(--p-acento);
  font-weight: 700;
  margin-bottom: 16px;
  position: relative;
  display: inline-block;
}
.page-conocenos .dh-separator {
  width: 80px;
  height: 4px;
  background-color: var(--col-espiritu);
  border-radius: 2px;
  margin: 0 auto 24px auto;
}
.page-conocenos .dh-intro-text p {
  font-size: 1.15rem;
  color: var(--cn-cuerpo);
  line-height: 1.7;
  text-align: center;
  margin-bottom: 16px;
  font-weight: 400;
}
.page-conocenos .directors-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px;
  margin-top: 32px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.page-conocenos .director-card {
  background: transparent;
  text-align: center !important;
  padding: 24px;
  transition: transform 0.3s ease;
  flex: 0 1 300px;
  margin: 0;
}
.page-conocenos .director-card p {
  text-align: center !important;
}
.page-conocenos .director-card.general {
  order: -1;
}
@media (min-width: 900px) {
  .page-conocenos .director-card.general {
    order: 0;
  }
}
.page-conocenos .director-card:hover .director-img-wrapper {
  transform: scale(1.08);
}
.page-conocenos .director-card:hover .director-details {
  opacity: 1;
  max-height: 200px;
  transform: translateY(0);
}
.page-conocenos .director-img-wrapper {
  width: 170px;
  height: 170px;
  margin: 0 auto 24px;
  padding: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--col-bilbao), var(--col-espiritu), var(--col-herencia));
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.page-conocenos .director-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 4px solid var(--p-fondo);
  background-color: var(--p-fondo);
}
.page-conocenos .director-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--p-acento);
  margin-bottom: 4px;
}
.page-conocenos .director-details {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transform: translateY(10px);
  transition: all 0.4s ease;
}
.page-conocenos .director-role {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--col-espiritu);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}
.page-conocenos .director-desc {
  font-size: 0.95rem;
  color: var(--cn-cuerpo);
  line-height: 1.5;
}
.page-conocenos .content-block {
  margin-bottom: 64px;
}
.page-conocenos #docentes {
  background: linear-gradient(135deg, var(--col-bilbao) 0%, var(--col-espiritu) 100%);
  color: #fff;
  border-radius: 24px;
  padding: 48px 24px;
  box-shadow: 0 15px 35px rgba(77, 138, 187, 0.25);
}
.page-conocenos #docentes .section-title {
  color: #fff;
  text-align: center;
  display: block;
  width: 100%;
  font-size: 2.5rem;
  margin-bottom: 48px;
}
.page-conocenos #docentes .section-title::after {
  display: none;
}
.page-conocenos #docentes .content-text p {
  color: rgba(255, 255, 255, 0.95);
  text-align: justify;
  font-weight: 400;
}
@media (min-width: 900px) {
  .page-conocenos #docentes {
    padding: 64px 48px;
  }
}
.page-conocenos .content-grid {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .page-conocenos .content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .page-conocenos .content-grid.reverse .content-img {
    order: 2;
  }
  .page-conocenos .content-grid.reverse .content-text {
    order: 1;
  }
}
.page-conocenos .content-img {
  order: 1;
  width: 100%;
}
.page-conocenos .content-img img {
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  width: 100%;
}
@media (min-width: 900px) {
  .page-conocenos .content-img {
    order: unset;
    width: auto;
  }
}
.page-conocenos .content-text {
  order: 2;
  width: 100%;
}
.page-conocenos .content-text p {
  margin-bottom: 24px;
  font-size: 1.05rem;
  font-weight: 400;
}
@media (min-width: 900px) {
  .page-conocenos .content-text {
    order: unset;
    width: auto;
  }
}
.page-conocenos .faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.page-conocenos .faq-item {
  border-bottom: 1px solid #E5E5E5;
  background: var(--p-superficie);
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid #E0E6ED;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
  overflow: hidden;
}
[data-theme=dark] .page-conocenos .faq-item {
  border-color: var(--p-linea);
}
.page-conocenos .faq-item:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
  border-color: var(--col-espiritu);
}
[data-theme=dark] .page-conocenos .faq-item:hover {
  box-shadow: 0 10px 20px var(--p-sombra);
}
.page-conocenos .faq-item:last-child {
  border-bottom: none;
}
.page-conocenos .faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 24px;
  background: none;
  border: none;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--p-titulo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s ease;
}
.page-conocenos .faq-question:hover {
  color: var(--p-acento);
}
.page-conocenos .faq-question[aria-expanded=true] {
  background-color: #F9FBFE;
}
[data-theme=dark] .page-conocenos .faq-question[aria-expanded=true] {
  background-color: var(--p-superficie-alt);
}
.page-conocenos .faq-question[aria-expanded=true] .faq-icon-wrapper {
  background-color: var(--col-bilbao);
  transform: rotate(180deg);
}
.page-conocenos .faq-question[aria-expanded=true] .faq-icon-wrapper svg {
  fill: #fff;
}
.page-conocenos .faq-question[aria-expanded=true] + .faq-answer {
  opacity: 1;
}
.page-conocenos .faq-icon-wrapper {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #F0F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}
[data-theme=dark] .page-conocenos .faq-icon-wrapper {
  background-color: var(--p-superficie-alt);
}
.page-conocenos .faq-icon-wrapper svg {
  width: 14px;
  height: 14px;
  fill: var(--p-titulo);
  transition: transform 0.3s ease, fill 0.3s ease;
}
.page-conocenos .faq-question:hover .faq-icon-wrapper svg {
  fill: var(--p-acento);
}
.page-conocenos .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  color: var(--cn-cuerpo);
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0;
}
.page-conocenos .faq-answer-inner {
  padding: 0 24px 24px 24px;
}
.page-conocenos .stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 600px) {
  .page-conocenos .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.page-conocenos .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-conocenos .stat-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floatIconAttr 3s ease-in-out infinite;
}
.page-conocenos .stat-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.page-conocenos .stat-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--p-titulo);
  margin-bottom: 4px;
}
.page-conocenos .stat-desc {
  font-size: 1rem;
  color: var(--cn-cuerpo);
}
.page-conocenos .classrooms-section {
  background-color: var(--bg-secondary);
  padding: 48px 0;
  border-top: 1px solid #E0E6ED;
}
[data-theme=dark] .page-conocenos .classrooms-section {
  border-top-color: var(--p-linea);
}
.page-conocenos .classrooms-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px auto;
  padding: 0 24px;
}
.page-conocenos .classrooms-header p {
  font-size: 14px;
}
.page-conocenos .classrooms-simple-grid {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-conocenos .classrooms-simple-grid .photo-card {
  position: relative;
  background: #eee;
  height: 380px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
  border-radius: 20px;
}
[data-theme=dark] .page-conocenos .classrooms-simple-grid .photo-card {
  background: var(--p-superficie-alt);
}
.page-conocenos .classrooms-simple-grid .photo-card img {
  overflow: hidden;
  border-radius: 20px;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.page-conocenos .classrooms-simple-grid .photo-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.page-conocenos .classrooms-simple-grid .photo-card:hover img {
  transform: scale(1.05);
}
.page-conocenos .classrooms-simple-grid .card-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  padding: 24px 16px 16px 16px;
  text-align: center;
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.3s ease, opacity 0.3s ease;
  text-transform: none;
}
.page-conocenos .classrooms-simple-grid .photo-card:hover .card-caption {
  opacity: 1;
  transform: translateY(0);
}
.page-conocenos .sep-card {
  background-color: var(--p-superficie);
  border-radius: 16px;
  padding: 48px 32px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(77, 138, 187, 0.15);
}
[data-theme=dark] .page-conocenos .sep-card {
  box-shadow: 0 15px 40px var(--p-sombra);
}
.page-conocenos .sep-card {
  border-top: 6px solid var(--col-bilbao);
  position: relative;
  overflow: hidden;
  margin: 48px auto;
  max-width: 900px;
}
.page-conocenos .sep-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(125, 198, 229, 0.1) 0%, transparent 70%);
  pointer-events: none;
}
.page-conocenos .sep-title {
  font-size: 2.2rem;
  color: var(--p-acento);
  font-weight: 700;
  margin-bottom: 24px;
}
.page-conocenos .sep-text {
  font-size: 1.15rem;
  color: var(--cn-cuerpo);
  line-height: 1.7;
}
.page-conocenos .highlight-section {
  background-color: var(--bg-secondary);
  border-radius: 24px;
  padding: 48px;
  margin: 96px auto;
  max-width: 1000px;
}
.page-conocenos .cendes-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}
@media (min-width: 900px) {
  .page-conocenos .cendes-container {
    flex-direction: row;
    text-align: left;
  }
}
.page-conocenos .cendes-logo-area {
  background: #fff;
  padding: 32px;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  border: 4px solid var(--col-bilbao);
  flex-shrink: 0;
}
.page-conocenos .cendes-logo-area img {
  width: 90px;
  height: auto;
}
@media (min-width: 900px) {
  .page-conocenos .cendes-logo-area {
    margin-right: 48px;
  }
}
.page-conocenos .container-constrained {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}
.page-conocenos .cta-pill {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-conocenos .cta-pill h2 {
  font-size: 2rem;
  color: var(--p-acento);
  margin-bottom: 24px;
}
.page-conocenos .cta-pill p {
  text-align: center;
  font-size: 1.1rem;
  color: var(--cn-cuerpo);
  margin-bottom: 32px;
}
.page-conocenos .cta-mascot {
  width: 140px;
  height: auto;
  margin-bottom: 24px;
  display: inline-block;
}
.page-conocenos .intro-icon-container {
  width: 80px;
  height: auto;
  flex-shrink: 0;
  margin-bottom: 24px;
}
.page-conocenos .intro-icon-img {
  width: 100%;
  height: auto;
}
.page-conocenos .intro-text-content {
  text-align: center;
}
.page-conocenos .intro-text {
  font-size: 1.15rem;
  color: var(--cn-cuerpo);
  line-height: 1.8;
  font-weight: 300;
}

@keyframes floatIconAttr {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}
.sports-grid {
  display: grid;
  gap: var(--sp-md);
  grid-template-columns: 1fr;
  padding: 0 var(--sp-md);
}

@media (min-width: 768px) {
  .sports-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.sport-card {
  height: 400px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.sport-card img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.faq-section {
  background: var(--bg-global);
  padding: var(--sp-xl) 0;
  border-top: 1px solid var(--col-borde);
}

.faq-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--sp-md);
}

.faq-title {
  text-align: center;
  font-size: 2rem;
  color: var(--p-acento);
  margin-bottom: var(--sp-lg);
}

.faq-item {
  border-bottom: 1px solid #E0E6ED;
  margin-bottom: 0;
  background: transparent;
}

[data-theme=dark] .faq-item {
  border-bottom-color: var(--p-linea);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  background: none;
  border: none;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--p-titulo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s ease;
}

.faq-question:hover {
  color: var(--p-acento);
}

/* Icono de + rotativo */
.faq-icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

.faq-icon-wrapper svg {
  width: 100%;
  height: 100%;
  fill: var(--p-acento);
}

.faq-question[aria-expanded=true] .faq-icon-wrapper {
  transform: rotate(45deg);
}

.faq-question[aria-expanded=true] {
  color: var(--p-acento);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
  color: var(--col-texto);
  font-size: 1rem;
  line-height: 1.6;
  padding: 0 20px;
}

.faq-question[aria-expanded=true] + .faq-answer {
  /* El padding bottom se maneja en JS o CSS si la altura está abierta,
      pero mejor dejarlo natural. */
  padding-bottom: 20px;
}

/* =========================================================
   MODELO EDUCATIVO — Modelo VIDA y páginas de método
========================================================= */
.hero-section {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background-color: var(--bg-global);
  overflow: hidden;
}

.hero-blob-bg {
  position: absolute;
  right: -10%;
  top: -10%;
  width: 60vw;
  height: 60vw;
  background: linear-gradient(135deg, rgba(77, 138, 187, 0.15) 0%, rgba(125, 198, 229, 0.1) 100%);
  border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  animation: morphBlob 15s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes morphBlob {
  0% {
    border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
  }
  50% {
    border-radius: 70% 30% 30% 70%/70% 70% 30% 30%;
  }
  100% {
    border-radius: 40% 60% 60% 40%/40% 40% 60% 60%;
  }
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
  position: relative;
  z-index: 2;
  align-items: center;
}
@media (min-width: 1024px) {
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding: 0 var(--gutter-desktop);
  }
}

.hero-text-col {
  position: relative;
  z-index: 3;
}

.hero-big-title {
  font-size: clamp(5rem, 15vw, 11rem);
  font-weight: 900;
  line-height: 0.85;
  color: var(--p-acento);
  margin-bottom: 1.5rem;
  margin-left: -5px;
  position: relative;
  opacity: 0;
  animation: fadeUpVida 0.8s ease forwards 0.4s;
}
.hero-big-title span {
  display: block;
  color: var(--p-acento);
}

.hero-definition {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 300;
  color: var(--p-titulo);
  margin-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  opacity: 0;
  animation: fadeUpVida 0.8s ease forwards 0.6s;
}

.def-word {
  position: relative;
}
.def-word:not(:last-child)::after {
  content: "•";
  margin-left: 15px;
  color: var(--col-espiritu);
}

.hero-desc-p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-gray);
  max-width: 500px;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeUpVida 0.8s ease forwards 0.8s;
}

.hero-img-col {
  position: relative;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: scaleInVida 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.5s;
}

.hero-img-main {
  width: 90%;
  height: auto;
  border-radius: 24px;
  box-shadow: 20px 30px 60px rgba(0, 51, 102, 0.15);
  transform: rotate(-3deg);
  z-index: 2;
  transition: transform 0.5s ease;
}
.hero-img-col:hover .hero-img-main {
  transform: rotate(0deg) scale(1.02);
}

.hero-floating-card {
  position: absolute;
  background: var(--p-superficie);
  padding: 1.5rem;
  border-radius: 16px;
  box-shadow: var(--shadow-float);
  z-index: 3;
  max-width: 220px;
  bottom: 40px;
  left: 0;
  animation: floatCardVida 6s ease-in-out infinite;
}

.float-stat {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--p-acento);
  line-height: 1;
}

.float-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--p-titulo);
  margin-top: 5px;
  height: auto;
  line-height: 1;
}

.page-vida .intro-section {
  padding: var(--sp-xl) 0;
  background-color: var(--p-fondo);
  position: relative;
  overflow: hidden;
}
.page-vida .intro-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  position: relative;
  z-index: 2;
}
@media (min-width: 1024px) {
  .page-vida .intro-layout {
    grid-template-columns: 0.5fr 1fr;
    align-items: start;
  }
}
.page-vida .intro-sticky {
  position: relative;
}
@media (min-width: 1024px) {
  .page-vida .intro-sticky {
    position: sticky;
    top: 120px;
  }
}
.page-vida .intro-watermark {
  position: absolute;
  top: -50px;
  left: -20px;
  font-size: 30vw;
  font-weight: 900;
  color: rgba(77, 138, 187, 0.03);
  line-height: 0.8;
  z-index: 0;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  letter-spacing: -0.05em;
}
[data-theme=dark] .page-vida .intro-watermark {
  color: rgba(125, 198, 229, 0.04);
}
.page-vida .intro-headline {
  font-size: clamp(2rem, 4vw, 3.2rem);
  color: var(--p-acento);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.page-vida .intro-body {
  font-size: 1.1rem;
  color: var(--text-gray);
  line-height: 1.7;
  font-weight: 300;
}
.page-vida .intro-body p {
  margin-bottom: 2rem;
  position: relative;
}
.page-vida .drop-cap {
  float: left;
  font-size: 3.2rem;
  line-height: 0.8;
  font-weight: 900;
  color: var(--p-acento);
  margin-right: 12px;
  margin-top: 4px;
}

.vida-section {
  padding-bottom: var(--sp-xl);
  background-color: var(--bg-global);
  padding-top: var(--sp-lg);
}

.vida-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .vida-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vida-card {
  background: var(--p-superficie);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-input);
  transition: all var(--transition-std);
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
[data-theme=dark] .vida-card {
  border-color: var(--p-linea);
}
.vida-card:hover {
  transform: translateY(-15px);
  box-shadow: var(--shadow-float);
  z-index: 5;
}
.vida-card:hover .vida-img {
  transform: scale(1.1);
}
.vida-card:hover .vida-bg-char {
  transform: scale(1.1) rotate(-10deg);
  color: rgba(77, 138, 187, 0.08);
}

.vida-img-wrapper {
  height: 260px;
  background: #eef2f6;
  position: relative;
  overflow: hidden;
}
[data-theme=dark] .vida-img-wrapper {
  background: var(--p-superficie-alt);
}

.vida-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.8s ease;
}

.vida-badge {
  position: absolute;
  top: 230px;
  left: 20px;
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: var(--p-acento);
}
[data-theme=dark] .vida-badge {
  background: color-mix(in srgb, var(--p-superficie) 92%, transparent);
  box-shadow: 0 10px 20px var(--p-sombra), inset 0 0 0 1px var(--p-linea);
}
.vida-badge {
  font-weight: 900;
  font-size: 1.8rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.vida-text-content {
  padding: 2rem;
  flex-grow: 1;
  position: relative;
  overflow: hidden;
}

.vida-bg-char {
  position: absolute;
  bottom: -30px;
  right: -10px;
  font-size: 12rem;
  font-weight: 900;
  color: rgba(77, 138, 187, 0.05);
  line-height: 1;
  pointer-events: none;
  transition: transform 0.4s ease;
  z-index: 0;
}

.vida-heading {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--p-titulo);
  margin-bottom: 0.8rem;
  position: relative;
  z-index: 1;
}

.vida-p {
  font-size: 0.92rem;
  color: var(--text-gray);
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.habit-section {
  background: linear-gradient(170deg, var(--p-fondo) 60%, var(--bg-global) 60%);
}
[data-theme=dark] .habit-section {
  background: linear-gradient(170deg, var(--p-fondo) 60%, var(--p-fondo-alt) 60%);
}
.habit-section {
  padding: 160px 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.habit-bg-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25vw;
  font-weight: 900;
  color: rgba(77, 138, 187, 0.04);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}

.habit-content {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.habit-quote {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  font-weight: 900;
  line-height: 1;
  margin-bottom: 2rem;
  color: var(--p-acento);
}
.habit-quote span {
  background: linear-gradient(120deg, var(--col-bilbao) 0%, var(--col-espiritu) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}
[data-theme=dark] .habit-quote span {
  background-image: linear-gradient(120deg, var(--p-acento) 0%, #A9E0F5 100%);
}
.habit-quote span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 8px;
  background-color: var(--col-accent-pop);
  opacity: 0.3;
  z-index: -1;
  transform: skewX(-20deg);
}

.habit-sub {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--text-gray);
  max-width: 750px;
  margin: 0 auto;
}

.page-vida .faq-section {
  padding: var(--sp-xl) 0;
  background: var(--p-fondo);
}
.page-vida .faq-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 1024px) {
  .page-vida .faq-layout {
    grid-template-columns: 1fr 0.5fr;
  }
}
.page-vida details {
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--col-borde);
}
.page-vida summary {
  padding: 1.5rem 0;
  font-weight: 700;
  color: var(--p-titulo);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  transition: color 0.2s;
}
.page-vida summary:hover {
  color: var(--p-acento);
}
.page-vida summary::-webkit-details-marker {
  display: none;
}
.page-vida summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--col-espiritu);
}
.page-vida details[open] summary::after {
  content: "−";
  color: var(--p-acento);
}
.page-vida .faq-body {
  padding-bottom: 1.5rem;
  color: var(--text-gray);
  font-size: 1rem;
}
.page-vida .mascot-box {
  background: linear-gradient(135deg, #F0F9FF 0%, #fff 100%);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  text-align: center;
  border: 1px solid var(--col-borde);
  position: sticky;
  top: 100px;
}
[data-theme=dark] .page-vida .mascot-box {
  background: linear-gradient(135deg, var(--p-superficie-alt) 0%, var(--p-superficie) 100%);
}
.page-vida .mascot-img-place {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto 1.5rem auto;
  display: block;
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.1));
}

.manifesto-lead {
  font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--p-acento);
  text-align: center;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--sp-lg);
}

@keyframes fadeUpVida {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleInVida {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes floatCardVida {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
.page-filosofia .hero-section {
  min-height: 85vh;
  padding-top: 40px;
}
.page-filosofia .hero-blob-bg {
  background: radial-gradient(circle, rgba(77, 138, 187, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  animation: pulseBlob 10s infinite alternate;
}
@media (min-width: 1024px) {
  .page-filosofia .hero-grid {
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
  }
}
.page-filosofia .hero-supertitle {
  display: block;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1;
  color: var(--p-acento);
  margin-bottom: 1.5rem;
  letter-spacing: -0.04em;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.2s;
}
.page-filosofia .hero-desc-p {
  margin-bottom: 0;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.6s;
}
.page-filosofia .hero-img-col {
  opacity: 0;
  animation: scaleIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;
}
.page-filosofia .hero-img-main {
  transform: rotate(2deg);
  box-shadow: 30px 40px 80px -10px rgba(0, 51, 102, 0.2);
}
.page-filosofia .hero-floating-card {
  bottom: 40px;
  left: -20px;
  animation: floatCard 5s ease-in-out infinite;
}
.page-filosofia .manifesto-section {
  padding: var(--sp-xl) 0;
  background-color: var(--p-fondo);
}
.page-filosofia .manifesto-container {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
}
@media (min-width: 1024px) {
  .page-filosofia .manifesto-container {
    grid-template-columns: 0.4fr 1fr;
    align-items: start;
  }
}
@media (min-width: 1024px) {
  .page-filosofia .manifesto-sticky {
    position: sticky;
    top: 120px;
  }
}
.page-filosofia .manifesto-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--col-espiritu);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
  display: block;
  text-align: left;
}
.page-filosofia .manifesto-lead {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--p-acento);
  line-height: 1.1;
  margin-bottom: 1rem;
  text-align: left;
}
.page-filosofia .manifesto-text {
  font-size: 1.2rem;
  color: var(--text-gray);
  line-height: 1.8;
  font-weight: 300;
  text-align: left;
}
.page-filosofia .manifesto-text p {
  margin-bottom: 1.5rem;
}
.page-filosofia .philosophy-section {
  background-color: var(--col-bilbao);
  color: white;
  padding: var(--sp-xl) 0;
  position: relative;
  overflow: hidden;
}
.page-filosofia .philo-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15vw;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.05);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}
.page-filosofia .philo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  position: relative;
  z-index: 2;
  align-items: center;
}
@media (min-width: 1024px) {
  .page-filosofia .philo-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.page-filosofia .philo-img-wrapper {
  height: 300px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;
}
.page-filosofia .philo-img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0.8;
}
.page-filosofia .philo-title {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: white;
}
.page-filosofia .philo-text {
  font-size: 1.2rem;
  opacity: 0.9;
  line-height: 1.6;
}
.page-filosofia .philo-highlight {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--col-espiritu);
  margin-top: 2rem;
  border-left: 4px solid var(--col-espiritu);
  padding-left: 20px;
}
.page-filosofia .methods-intro-title {
  padding: 80px 0 60px;
  text-align: center;
  background-color: var(--bg-global);
}
.page-filosofia .methods-intro-title h2 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
  color: var(--col-espiritu);
}
.page-filosofia .methods-intro-title p {
  font-size: 1.2rem;
  color: var(--p-acento);
}
.page-filosofia .methods-wrapper {
  background-color: #0b1120;
}
.page-filosofia .method-card-full {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
}
.page-filosofia .card-1 {
  background-color: var(--bg-global);
  color: var(--p-acento);
  z-index: 1;
}
.page-filosofia .card-2 {
  background-color: var(--col-espiritu);
  color: white;
  z-index: 2;
}
.page-filosofia .card-3 {
  background-color: var(--col-bilbao);
  color: white;
  z-index: 3;
}
.page-filosofia .card-4 {
  background-color: var(--col-herencia);
  color: white;
  z-index: 4;
}
.page-filosofia .method-inner {
  display: grid;
  grid-template-columns: 1fr;
  width: 100%;
  height: 100%;
  max-width: 1600px;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .page-filosofia .method-inner {
    grid-template-columns: 1fr 1fr;
  }
}
.page-filosofia .method-visual {
  position: relative;
  height: 50vh;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .page-filosofia .method-visual {
    height: 100vh;
  }
}
.page-filosofia .method-visual img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  animation: slowPan 20s infinite alternate;
}
.page-filosofia .method-info {
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
@media (min-width: 1024px) {
  .page-filosofia .method-info {
    padding: 80px;
  }
}
.page-filosofia .big-number {
  font-size: 8rem;
  font-weight: 900;
  opacity: 0.15;
  position: absolute;
  top: 20px;
  left: 20px;
  line-height: 1;
  color: currentColor;
}
.page-filosofia .card-2 .big-number, .page-filosofia .card-3 .big-number, .page-filosofia .card-4 .big-number {
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}
.page-filosofia .method-level {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 1rem;
  opacity: 0.8;
}
.page-filosofia .method-name {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 0.9;
  margin-bottom: 2rem;
  letter-spacing: -0.03em;
}
.page-filosofia .method-desc {
  font-size: 1.1rem;
  max-width: 500px;
  line-height: 1.6;
  font-weight: 400;
}
.page-filosofia .ecosystem-section {
  padding: var(--sp-xl) 0;
  background: var(--p-fondo);
}
.page-filosofia .ecosystem-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .page-filosofia .ecosystem-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}
.page-filosofia .eco-card {
  border-radius: var(--radius-card);
  padding: 3.5rem;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--col-borde);
  transition: transform 0.3s;
}
.page-filosofia .eco-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-float);
}
.page-filosofia .eco-card.aula {
  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
}
.page-filosofia .eco-card.relacion {
  background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}
[data-theme=dark] .page-filosofia .eco-card.aula {
  background: linear-gradient(135deg, var(--p-superficie-alt) 0%, var(--p-superficie) 100%);
}
[data-theme=dark] .page-filosofia .eco-card.relacion {
  background: linear-gradient(135deg, color-mix(in srgb, var(--col-accent-pop) 9%, var(--p-superficie)) 0%, var(--p-superficie) 100%);
}
.page-filosofia .eco-icon {
  font-size: 3rem;
  margin-bottom: 1.5rem;
  display: block;
}
.page-filosofia .eco-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--p-titulo);
  margin-bottom: 1rem;
}
.page-filosofia .eco-desc {
  font-size: 1rem;
  color: var(--text-gray);
  margin-bottom: 2rem;
}
.page-filosofia .eco-list {
  list-style: none;
  padding: 0;
}
.page-filosofia .eco-list li {
  margin-bottom: 1rem;
  padding-left: 2rem;
  position: relative;
  font-size: 1rem;
  color: var(--text-dark);
}
.page-filosofia .eco-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p-acento);
}
.page-filosofia .faq-section {
  padding: var(--sp-xl) 0;
  background-color: var(--bg-global);
}
.page-filosofia .faq-wrapper {
  max-width: 800px;
  margin: 0 auto 5rem auto;
}
.page-filosofia .faq-section-title {
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 800;
  color: var(--p-acento);
  font-size: 2rem;
}
.page-filosofia details {
  margin-bottom: 1.5rem;
  background: var(--p-superficie);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.page-filosofia details:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}
[data-theme=dark] .page-filosofia details {
  border-color: var(--p-linea);
}
[data-theme=dark] .page-filosofia details[open] {
  background: var(--p-superficie-alt);
}
.page-filosofia summary {
  padding: 1.5rem 2rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--p-acento);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 4rem;
}
.page-filosofia summary::-webkit-details-marker {
  display: none;
}
.page-filosofia summary::after {
  content: "+";
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--col-espiritu);
  transition: transform 0.3s;
}
.page-filosofia details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.page-filosofia .faq-ans {
  padding: 0 2rem 2rem;
  color: var(--text-gray);
  line-height: 1.7;
}
.page-filosofia .cta-final {
  background: var(--p-superficie);
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align: center;
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.02);
}
[data-theme=dark] .page-filosofia .cta-final {
  box-shadow: 0 20px 60px var(--p-sombra);
  border-color: var(--p-linea);
}
.page-filosofia .cta-heading {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-acento);
  margin-bottom: 1rem;
}
.page-filosofia .cta-body {
  margin-bottom: 2rem;
  font-size: 1.05rem;
  color: var(--text-gray);
}

.page-aprendizaje .hero-section {
  min-height: 85vh;
  padding-top: 40px;
}
.page-aprendizaje .hero-blob-bg {
  background: radial-gradient(circle, rgba(77, 138, 187, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  animation: pulseBlob 10s infinite alternate;
}
@media (min-width: 1024px) {
  .page-aprendizaje .hero-grid {
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
  }
}
.page-aprendizaje .hero-supertitle {
  display: block;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--p-acento);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.2s;
}
.page-aprendizaje .hero-title {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--p-titulo);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-align: left;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.4s;
}
.page-aprendizaje .hero-desc-p {
  margin-bottom: 0;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.6s;
}
.page-aprendizaje .hero-img-col {
  opacity: 0;
  animation: scaleIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;
}
.page-aprendizaje .hero-img-main {
  transform: rotate(2deg);
  box-shadow: 30px 40px 80px -10px rgba(0, 51, 102, 0.2);
}
.page-aprendizaje .hero-floating-card {
  bottom: 40px;
  left: -20px;
  line-height: 0;
  padding: 1rem 1.2rem;
  animation: floatCard 5s ease-in-out infinite;
}
.page-aprendizaje .float-stat {
  font-size: 1.8rem;
}
.page-aprendizaje .float-label {
  font-size: 0.8rem;
  line-height: 1.2;
  margin-top: 3px;
}
.page-aprendizaje .intro-section {
  padding: var(--sp-xl) 0;
  background: var(--p-fondo);
  text-align: center;
}
.page-aprendizaje .intro-highlight {
  font-size: clamp(1.3rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: var(--p-acento);
  max-width: 800px;
  margin: 0 auto 1rem;
  line-height: 1.3;
}
.page-aprendizaje .graphic-separator {
  width: 60px;
  height: 4px;
  background: var(--col-espiritu);
  margin: 2rem auto;
  border-radius: 2px;
}
.page-aprendizaje .intro-body {
  font-size: 1.05rem;
  color: var(--text-gray);
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.7;
}
.page-aprendizaje .sticky-container {
  display: block;
}
@media (min-width: 1024px) {
  .page-aprendizaje .sticky-container {
    display: flex;
    align-items: flex-start;
  }
}
.page-aprendizaje .visual-panel {
  display: none;
}
@media (min-width: 1024px) {
  .page-aprendizaje .visual-panel {
    display: block;
    width: 50%;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    align-self: flex-start;
  }
}
.page-aprendizaje .visual-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.page-aprendizaje .visual-image.active {
  opacity: 1;
}
.page-aprendizaje .visual-mascot {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 180px;
  height: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  z-index: 5;
}
.page-aprendizaje .visual-mascot.active {
  opacity: 1;
  transform: translateY(0);
}
.page-aprendizaje .content-panel {
  width: 100%;
}
@media (min-width: 1024px) {
  .page-aprendizaje .content-panel {
    width: 50%;
  }
}
.page-aprendizaje .content-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px var(--gutter-mobile);
}
@media (min-width: 1024px) {
  .page-aprendizaje .content-section {
    min-height: 100vh;
    padding: 100px 80px;
  }
}
.page-aprendizaje .content-section:nth-child(odd) {
  background: var(--bg-global);
}
.page-aprendizaje .content-section:nth-child(even) {
  background: var(--p-fondo);
}
[data-theme=dark] .page-aprendizaje .content-section:nth-child(even) {
  background: var(--p-fondo-alt);
}
.page-aprendizaje .ai-mobile-visual {
  margin-bottom: 2rem;
  border-radius: 16px;
  overflow: hidden;
  height: 260px;
}
.page-aprendizaje .ai-mobile-visual img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (min-width: 1024px) {
  .page-aprendizaje .ai-mobile-visual {
    display: none;
  }
}
.page-aprendizaje .text-wrapper {
  max-width: 560px;
}
.page-aprendizaje .pillar-number {
  display: block;
  font-size: 5rem;
  font-weight: 900;
  color: rgba(77, 138, 187, 0.12);
  line-height: 1;
}
[data-theme=dark] .page-aprendizaje .pillar-number {
  color: rgba(125, 198, 229, 0.16);
}
.page-aprendizaje .pillar-title {
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--p-titulo);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}
.page-aprendizaje .pillar-text {
  font-size: 1.05rem;
  color: var(--text-gray);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.page-aprendizaje .pillar-list {
  list-style: none;
  padding: 0;
  margin-top: 1rem;
}
.page-aprendizaje .pillar-list li {
  padding-left: 1.5rem;
  position: relative;
  font-size: 1rem;
  color: var(--text-gray);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.page-aprendizaje .pillar-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-acento);
}
.page-aprendizaje .faq-section {
  padding: var(--sp-xl) 0;
  background-color: var(--bg-global);
}
.page-aprendizaje .faq-section .faq-wrapper {
  max-width: 800px;
  margin: 0 auto;
}
.page-aprendizaje .faq-section .faq-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-acento);
  text-align: center;
  margin-bottom: 48px;
}
.page-aprendizaje .faq-section .faq-item {
  border-bottom: 1px solid var(--col-borde);
}
.page-aprendizaje .faq-section .faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--p-titulo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: color 0.2s;
}
.page-aprendizaje .faq-section .faq-question:hover {
  color: var(--p-acento);
}
.page-aprendizaje .faq-section .faq-question:hover .faq-icon svg {
  fill: var(--p-acento);
}
.page-aprendizaje .faq-section .faq-question[aria-expanded=true] {
  color: var(--p-acento);
}
.page-aprendizaje .faq-section .faq-question[aria-expanded=true] .faq-icon {
  background-color: var(--col-bilbao);
  transform: rotate(180deg);
}
.page-aprendizaje .faq-section .faq-question[aria-expanded=true] .faq-icon svg {
  fill: #fff;
}
.page-aprendizaje .faq-section .faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #F0F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.3s;
  flex-shrink: 0;
}
[data-theme=dark] .page-aprendizaje .faq-section .faq-icon {
  background-color: var(--p-superficie-alt);
}
.page-aprendizaje .faq-section .faq-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--p-titulo);
  transition: fill 0.3s;
}
.page-aprendizaje .faq-section .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  color: var(--p-titulo);
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0;
  /* En claro la respuesta va en la tinta de títulos; en oscuro, en la de texto
     corrido: párrafos enteros en el blanco de los títulos deslumbran. */
}
[data-theme=dark] .page-aprendizaje .faq-section .faq-answer {
  color: var(--p-texto);
}
.page-aprendizaje .faq-section .faq-answer p {
  margin: 0 0 8px;
}
.page-aprendizaje .faq-section .faq-question[aria-expanded=true] + .faq-answer {
  opacity: 1;
  padding-bottom: 24px;
}
.page-aprendizaje .cta-section {
  padding: var(--sp-xl) 0;
  background: var(--p-fondo);
}
.page-aprendizaje .cta-pill {
  max-width: 680px;
  margin: 0 var(--gutter-mobile);
  background: linear-gradient(135deg, var(--col-bilbao) 0%, var(--col-herencia) 100%);
  border-radius: 40px;
  padding: 4rem 2rem;
  text-align: center;
  color: white;
}
@media (min-width: 768px) {
  .page-aprendizaje .cta-pill {
    margin: 0 auto;
    padding: 4rem 3rem;
  }
}
.page-aprendizaje .cta-pill h2 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  font-weight: 800;
  margin-bottom: 1rem;
}
.page-aprendizaje .cta-pill p {
  font-size: 1.05rem;
  opacity: 0.9;
  margin-bottom: 2rem;
}
.page-aprendizaje .ai-cta-mascot {
  width: 140px;
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
}

.page-idiomas .hero-section {
  min-height: 85vh;
  padding-top: 40px;
}
.page-idiomas .hero-blob-bg {
  background: radial-gradient(circle, rgba(77, 138, 187, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  animation: pulseBlob 10s infinite alternate;
}
@media (min-width: 1024px) {
  .page-idiomas .hero-grid {
    grid-template-columns: 1fr 1.3fr;
    gap: 4rem;
  }
}
.page-idiomas .hero-supertitle {
  display: block;
  font-size: clamp(4rem, 10vw, 7.5rem);
  font-weight: 900;
  line-height: 1;
  color: var(--p-acento);
  letter-spacing: -0.04em;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.2s;
}
.page-idiomas .hero-desc-p {
  margin-bottom: 0;
  opacity: 0;
  animation: fadeUp 1s ease forwards 0.6s;
}
.page-idiomas .hero-img-col {
  opacity: 0;
  animation: scaleIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;
}
.page-idiomas .hero-img-main {
  transform: rotate(2deg);
  box-shadow: 30px 40px 80px -10px rgba(0, 51, 102, 0.2);
}
.page-idiomas .hero-floating-card {
  bottom: 40px;
  left: -20px;
  padding: 1rem 1.4rem;
  animation: floatCard 5s ease-in-out infinite;
}
.page-idiomas .float-stat {
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 4px;
}
.page-idiomas .float-label {
  font-size: 0.7rem;
  line-height: 1.3;
  margin-top: 2px;
}
.page-idiomas .manifesto-section {
  padding: var(--sp-xl) 0;
  background: var(--p-fondo);
}
.page-idiomas .manifesto-container {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  display: block;
}
.page-idiomas .manifesto-lead {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  color: var(--p-acento);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-align: center;
}
.page-idiomas .manifesto-text {
  font-size: 1.15rem;
  color: var(--text-gray);
  line-height: 1.8;
  font-weight: 300;
  text-align: center;
}
.page-idiomas .manifesto-text p {
  margin-bottom: 0;
}
.page-idiomas .feature-split {
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .page-idiomas .feature-split {
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
  }
}
@media (min-width: 1024px) {
  .page-idiomas .feature-split.reverse .split-img {
    order: 2;
  }
  .page-idiomas .feature-split.reverse .split-content {
    order: 1;
  }
}
.page-idiomas .split-img {
  height: 400px;
  overflow: hidden;
  order: -1;
}
@media (min-width: 1024px) {
  .page-idiomas .split-img {
    height: auto;
    order: unset;
  }
}
.page-idiomas .split-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 1s ease;
}
.page-idiomas .feature-split:hover .split-img img {
  transform: scale(1.04);
}
.page-idiomas .split-content {
  padding: 3rem var(--gutter-mobile);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-global);
  position: relative;
}
@media (min-width: 1024px) {
  .page-idiomas .split-content {
    padding: 5rem 5rem;
  }
}
.page-idiomas .natgeo-border {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #FFCC00;
}
.page-idiomas .natgeo-logo-container {
  max-width: 220px;
  margin-bottom: 2rem;
}
.page-idiomas .natgeo-logo-container img {
  width: 100%;
  height: auto;
  display: block;
}
.page-idiomas .feature-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: var(--p-acento);
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}
.page-idiomas .feature-desc {
  font-size: 1.05rem;
  color: var(--text-dark);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  opacity: 0.85;
}
.page-idiomas .feature-list {
  list-style: none;
  padding: 0;
}
.page-idiomas .feature-list li {
  margin-bottom: 0.75rem;
  padding-left: 1.5rem;
  position: relative;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-dark);
}
.page-idiomas .feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-acento);
}
.page-idiomas .vivencial-section .split-content {
  background: var(--p-fondo);
}
.page-idiomas .vivencial-section .feature-title {
  color: var(--p-acento);
}
.page-idiomas .faq-section {
  padding: var(--sp-xl) 0;
  background: var(--bg-global);
}
.page-idiomas .faq-wrapper {
  max-width: 800px;
  margin: 0 auto 5rem;
}
.page-idiomas .faq-section-title {
  text-align: center;
  margin-bottom: 3rem;
  font-weight: 800;
  color: var(--p-acento);
  font-size: 2rem;
}
.page-idiomas details {
  margin-bottom: 1.5rem;
  background: var(--p-superficie);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.page-idiomas details:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}
[data-theme=dark] .page-idiomas details {
  border-color: var(--p-linea);
}
[data-theme=dark] .page-idiomas details[open] {
  background: var(--p-superficie-alt);
}
.page-idiomas summary {
  padding: 1.5rem 2rem;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--p-acento);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 4rem;
}
.page-idiomas summary::-webkit-details-marker {
  display: none;
}
.page-idiomas summary::after {
  content: "+";
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--col-espiritu);
  transition: transform 0.3s;
}
.page-idiomas details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.page-idiomas .faq-ans {
  padding: 0 2rem 2rem;
  color: var(--text-gray);
  line-height: 1.7;
}
.page-idiomas .cta-final {
  background: var(--p-superficie);
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
  text-align: center;
  border-radius: var(--radius-card);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.02);
}
[data-theme=dark] .page-idiomas .cta-final {
  box-shadow: 0 20px 60px var(--p-sombra);
  border-color: var(--p-linea);
}
.page-idiomas .cta-heading {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-acento);
  margin-bottom: 1rem;
}
.page-idiomas .cta-body {
  margin-bottom: 2rem;
  font-size: 1.05rem;
  color: var(--text-gray);
}

@keyframes pulseBlob {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes floatCard {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes slowPan {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* =========================================================
   NIVELES ACADÉMICOS — Preescolar y niveles educativos
========================================================= */
.preschool-hero {
  position: relative;
  min-height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.hero-overlay-light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(125, 198, 229, 0.2), rgba(77, 138, 187, 0.3));
  z-index: 2;
}

/* Tema: aquí `--col-herencia` es color de PÁRRAFO (no de título). Las reglas de
   texto corrido leen `var(--nv-cuerpo, var(--col-herencia))`: en claro no hay
   variable y cae al herencia de siempre; en oscuro baja a `--p-texto`, un escalón
   por debajo de los títulos (`--p-titulo`), para no perder jerarquía. Se declara
   en `.page-main` porque estas clases son globales (Comunidad, Modelo VIDA y
   Certificaciones también usan `.intro-text`); la variable solo la lee este archivo. */
[data-theme=dark] .page-main {
  --nv-cuerpo: var(--p-texto);
}

.section-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px;
}

.organic-block {
  display: grid;
  gap: 48px;
  align-items: center;
  margin-bottom: 64px;
}
@media (min-width: 900px) {
  .organic-block {
    grid-template-columns: 1fr 1fr;
  }
  .organic-block.reverse .organic-text {
    order: 1;
  }
  .organic-block.reverse .organic-img-wrapper {
    order: 2;
  }
  .organic-block.inverse .organic-img-wrapper {
    order: 1;
  }
  .organic-block.inverse .organic-text {
    order: 2;
  }
}

.organic-img-wrapper {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(77, 138, 187, 0.15);
  height: 400px;
}
[data-theme=dark] .organic-img-wrapper {
  box-shadow: 0 15px 40px var(--p-sombra);
}
.organic-img-wrapper img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s ease;
}
.organic-img-wrapper:hover img {
  transform: scale(1.05);
}
@media (min-width: 900px) {
  .organic-img-wrapper {
    height: 500px;
  }
}

.section-title {
  font-size: 2.2rem;
  color: var(--p-acento);
  margin-bottom: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.section-text {
  font-size: 1.1rem;
  color: var(--nv-cuerpo, var(--col-herencia));
  line-height: 1.7;
}
.section-text p {
  margin-bottom: 16px;
}

.intro-text p {
  font-size: 1rem;
  color: var(--nv-cuerpo, var(--col-herencia));
  line-height: 1.8;
  margin-bottom: 24px;
}
.intro-text p strong {
  color: var(--p-acento);
  font-weight: 600;
}

.learning-section {
  background-color: #F0F6FC;
}
[data-theme=dark] .learning-section {
  background-color: var(--p-fondo-alt);
}
.learning-section {
  border-radius: 30px;
  padding: 48px;
  margin: 64px auto;
  max-width: 1280px;
}

.learning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.learning-card {
  background: #fff;
  padding: 24px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
}
[data-theme=dark] .learning-card {
  background: var(--p-superficie-alt);
  box-shadow: 0 4px 10px var(--p-sombra);
}
.learning-card {
  transition: transform 0.3s;
  font-size: 18px;
}
.learning-card:hover {
  transform: translateY(-5px);
}

.learning-icon {
  font-size: 2rem;
  color: var(--col-espiritu);
  margin-bottom: 16px;
  display: block;
}

.learning-title {
  font-weight: 700;
  color: var(--p-titulo);
  margin-bottom: 4px;
}

.transition-wrapper {
  position: relative;
  background-color: var(--p-superficie);
  border: 2px solid #E0E6ED;
}
[data-theme=dark] .transition-wrapper {
  border-color: var(--p-linea);
}
.transition-wrapper {
  border-radius: 30px;
  padding: 48px;
  margin-bottom: 64px;
}
@media (max-width: 768px) {
  .transition-wrapper {
    padding: 32px 24px;
  }
}

.cta-section {
  padding: 64px 24px;
  background-color: var(--bg-global);
  text-align: center;
  border-top: 1px solid #E0E6ED;
}
[data-theme=dark] .cta-section {
  border-top-color: var(--p-linea);
}

.cta-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.cta-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 100%;
  gap: 20px;
}

.cta-h2 {
  font-size: 2rem;
  color: var(--p-acento);
  text-align: center;
  margin-bottom: 0;
}

.cta-p {
  font-size: 1.1rem;
  max-width: 600px;
  text-align: center;
}

.page-preescolar .intro-section {
  padding: 64px 24px;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-preescolar .transition-wrapper .organic-text p {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--nv-cuerpo, var(--col-herencia));
}
.page-preescolar .faq-wrapper {
  max-width: 900px;
  margin: 0 auto;
}
.page-preescolar .faq-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-acento);
  text-align: center;
  margin-bottom: 48px;
}
.page-preescolar .faq-item {
  border-bottom: 1px solid var(--col-borde);
}
.page-preescolar .faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--p-titulo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: color 0.2s;
}
.page-preescolar .faq-question:hover {
  color: var(--p-acento);
}
.page-preescolar .faq-question:hover .faq-icon svg {
  fill: var(--p-acento);
}
.page-preescolar .faq-question[aria-expanded=true] {
  color: var(--p-acento);
}
.page-preescolar .faq-question[aria-expanded=true] .faq-icon {
  background-color: var(--col-bilbao);
  transform: rotate(180deg);
}
.page-preescolar .faq-question[aria-expanded=true] .faq-icon svg {
  fill: #fff;
}
.page-preescolar .faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #F0F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.3s;
  flex-shrink: 0;
}
[data-theme=dark] .page-preescolar .faq-icon {
  background-color: var(--p-superficie-alt);
}
.page-preescolar .faq-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--p-titulo);
  transition: fill 0.3s;
}
.page-preescolar .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  color: var(--p-titulo);
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0;
  /* En claro la respuesta va en la tinta de títulos; en oscuro, en la de texto
     corrido: párrafos enteros en el blanco de los títulos deslumbran. */
}
[data-theme=dark] .page-preescolar .faq-answer {
  color: var(--p-texto);
}
.page-preescolar .faq-answer p {
  margin: 0 0 8px;
}
.page-preescolar .faq-question[aria-expanded=true] + .faq-answer {
  opacity: 1;
  padding-bottom: 24px;
}

.mascot-intro {
  width: 140px;
  margin-bottom: 32px;
  transition: transform 0.3s;
}
.mascot-intro:hover {
  transform: scale(1.1) rotate(-5deg);
}

.mascot-thinking {
  position: absolute;
  top: -60px;
  right: 40px;
  width: 120px;
  height: auto;
  z-index: 5;
}
@media (max-width: 768px) {
  .mascot-thinking {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 24px;
    display: block;
  }
}

.mascot-happy {
  width: 140px;
  margin-bottom: 24px;
  transition: 0.3s;
}
.mascot-happy:hover {
  transform: scale(1.1) translateY(-10px);
}

@keyframes floatUpPreescolar {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(125, 198, 229, 0.2), rgba(77, 138, 187, 0.4));
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  padding: 24px;
  animation: floatUpPreescolar 1.2s ease-out;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.hero-content .hero-title {
  font-size: clamp(2.5rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 16px;
  color: white;
}
.hero-content .hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.7rem);
  font-weight: 500;
  color: white;
}

.page-hero {
  position: relative;
  height: 60vh;
  min-height: 400px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
}
.page-hero .hero-bg {
  background-size: cover;
  background-position: center;
}
.page-hero .hero-overlay {
  background: linear-gradient(rgba(55, 76, 105, 0.3), rgba(55, 76, 105, 0.5));
}

.organic-img-wrapper.img-vertical {
  height: 500px;
  max-width: 400px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .organic-img-wrapper.img-vertical {
    height: 600px;
  }
}
.organic-img-wrapper.img-square, .organic-img-wrapper.aspect-square {
  aspect-ratio: 1/1;
  height: auto;
  max-width: 500px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .organic-img-wrapper.img-square, .organic-img-wrapper.aspect-square {
    height: 500px;
    width: 500px;
  }
}
.organic-img-wrapper.img-horizontal, .organic-img-wrapper.aspect-horizontal {
  aspect-ratio: 16/9;
  height: auto;
  width: 100%;
}

.title-mascot-container {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
}

.mascot-title-icon {
  width: 80px;
  height: auto;
  flex-shrink: 0;
}

.mascot-float-small {
  width: 80px;
  margin-bottom: 16px;
  display: block;
}

.mascot-float-center {
  width: 100px;
  margin: 0 auto 16px;
  display: block;
}

.plus-icon {
  font-size: 1.5rem;
  color: var(--col-espiritu);
  transition: transform 0.3s, color 0.3s;
  flex-shrink: 0;
}

.faq-question[aria-expanded=true] .plus-icon {
  transform: rotate(45deg);
  color: var(--p-acento);
}

.intro-icon-container {
  width: 200px;
  flex-shrink: 0;
  margin-bottom: 24px;
}

.intro-icon-img {
  width: 100%;
  height: auto;
}

.intro-text-content {
  text-align: center;
}

.intro-lead {
  font-size: 1.4rem;
  color: var(--p-acento);
  font-weight: 600;
  margin-bottom: 24px;
  line-height: 1.5;
}

.page-primaria .hero-bg {
  background-image: url("/build/assets/img/niveles-academicos/primaria/alumnos-abrazados.jpg");
}
.page-primaria .intro-section {
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .page-primaria .intro-section {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
  }
}
@media (min-width: 768px) {
  .page-primaria .intro-icon-container {
    margin-right: 48px;
    margin-bottom: 0;
    border-right: 2px solid var(--col-borde);
    padding-right: 48px;
    min-height: 120px;
    display: flex;
    align-items: center;
  }
}
@media (min-width: 768px) {
  .page-primaria .intro-text-content {
    text-align: justify;
  }
}
.page-primaria #resumen .intro-text {
  font-size: 1rem;
}
.page-primaria #idiomas .organic-text p {
  font-size: 1rem;
}
.page-primaria .faq-wrapper {
  max-width: 900px;
  margin: 0 auto;
}
.page-primaria .faq-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-acento);
  text-align: center;
  margin-bottom: 48px;
}
.page-primaria .faq-item {
  border-bottom: 1px solid var(--col-borde);
}
.page-primaria .faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--p-titulo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: color 0.2s;
}
.page-primaria .faq-question:hover {
  color: var(--p-acento);
}
.page-primaria .faq-question:hover .faq-icon svg {
  fill: var(--p-acento);
}
.page-primaria .faq-question[aria-expanded=true] {
  color: var(--p-acento);
}
.page-primaria .faq-question[aria-expanded=true] .faq-icon {
  background-color: var(--col-bilbao);
  transform: rotate(180deg);
}
.page-primaria .faq-question[aria-expanded=true] .faq-icon svg {
  fill: #fff;
}
.page-primaria .faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #F0F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.3s;
  flex-shrink: 0;
}
[data-theme=dark] .page-primaria .faq-icon {
  background-color: var(--p-superficie-alt);
}
.page-primaria .faq-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--p-titulo);
  transition: fill 0.3s;
}
.page-primaria .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  color: var(--p-titulo);
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0;
  /* En claro la respuesta va en la tinta de títulos; en oscuro, en la de texto
     corrido: párrafos enteros en el blanco de los títulos deslumbran. */
}
[data-theme=dark] .page-primaria .faq-answer {
  color: var(--p-texto);
}
.page-primaria .faq-answer p {
  margin: 0 0 8px;
}
.page-primaria .faq-question[aria-expanded=true] + .faq-answer {
  opacity: 1;
  padding-bottom: 24px;
}

.page-secundaria .hero-bg {
  background-image: url("/build/assets/img/niveles-academicos/secundaria/alumnas-argumentando.jpg");
}
.page-secundaria .intro-section {
  padding: 64px 24px;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .page-secundaria .intro-section {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
}
.page-secundaria #acompanamiento .organic-text p {
  font-size: 1rem;
}
.page-secundaria .faq-wrapper {
  max-width: 900px;
  margin: 0 auto;
}
.page-secundaria .faq-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-acento);
  text-align: center;
  margin-bottom: 48px;
}
.page-secundaria .faq-item {
  border-bottom: 1px solid var(--col-borde);
}
.page-secundaria .faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--p-titulo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: color 0.2s;
}
.page-secundaria .faq-question:hover {
  color: var(--p-acento);
}
.page-secundaria .faq-question:hover .faq-icon svg {
  fill: var(--p-acento);
}
.page-secundaria .faq-question[aria-expanded=true] {
  color: var(--p-acento);
}
.page-secundaria .faq-question[aria-expanded=true] .faq-icon {
  background-color: var(--col-bilbao);
  transform: rotate(180deg);
}
.page-secundaria .faq-question[aria-expanded=true] .faq-icon svg {
  fill: #fff;
}
.page-secundaria .faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #F0F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.3s;
  flex-shrink: 0;
}
[data-theme=dark] .page-secundaria .faq-icon {
  background-color: var(--p-superficie-alt);
}
.page-secundaria .faq-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--p-titulo);
  transition: fill 0.3s;
}
.page-secundaria .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  color: var(--p-titulo);
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0;
  /* En claro la respuesta va en la tinta de títulos; en oscuro, en la de texto
     corrido: párrafos enteros en el blanco de los títulos deslumbran. */
}
[data-theme=dark] .page-secundaria .faq-answer {
  color: var(--p-texto);
}
.page-secundaria .faq-answer p {
  margin: 0 0 8px;
}
.page-secundaria .faq-question[aria-expanded=true] + .faq-answer {
  opacity: 1;
  padding-bottom: 24px;
}

.page-preparatoria .intro-section {
  padding: 64px 24px;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) {
  .page-preparatoria .intro-section {
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
}
.page-preparatoria #vocacional .organic-text p {
  font-size: 1rem;
}
.page-preparatoria .faq-wrapper {
  max-width: 900px;
  margin: 0 auto;
}
.page-preparatoria .faq-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--p-acento);
  text-align: center;
  margin-bottom: 48px;
}
.page-preparatoria .faq-item {
  border-bottom: 1px solid var(--col-borde);
}
.page-preparatoria .faq-question {
  width: 100%;
  text-align: left;
  padding: 20px 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--p-titulo);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: color 0.2s;
}
.page-preparatoria .faq-question:hover {
  color: var(--p-acento);
}
.page-preparatoria .faq-question:hover .faq-icon svg {
  fill: var(--p-acento);
}
.page-preparatoria .faq-question[aria-expanded=true] {
  color: var(--p-acento);
}
.page-preparatoria .faq-question[aria-expanded=true] .faq-icon {
  background-color: var(--col-bilbao);
  transform: rotate(180deg);
}
.page-preparatoria .faq-question[aria-expanded=true] .faq-icon svg {
  fill: #fff;
}
.page-preparatoria .faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #F0F4F8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.3s;
  flex-shrink: 0;
}
[data-theme=dark] .page-preparatoria .faq-icon {
  background-color: var(--p-superficie-alt);
}
.page-preparatoria .faq-icon svg {
  width: 14px;
  height: 14px;
  fill: var(--p-titulo);
  transition: fill 0.3s;
}
.page-preparatoria .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
  color: var(--p-titulo);
  font-size: 1rem;
  line-height: 1.6;
  opacity: 0;
  /* En claro la respuesta va en la tinta de títulos; en oscuro, en la de texto
     corrido: párrafos enteros en el blanco de los títulos deslumbran. */
}
[data-theme=dark] .page-preparatoria .faq-answer {
  color: var(--p-texto);
}
.page-preparatoria .faq-answer p {
  margin: 0 0 8px;
}
.page-preparatoria .faq-question[aria-expanded=true] + .faq-answer {
  opacity: 1;
  padding-bottom: 24px;
}

/* =========================================================
   PÁGINA HUB /niveles
========================================================= */
.page-niveles {
  padding-top: var(--header-height);
}

.nv-hero {
  padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 60px) clamp(32px, 5vw, 56px);
  text-align: center;
  background: var(--bg);
}
.nv-hero__inner {
  max-width: 700px;
  margin: 0 auto;
}
.nv-hero__eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--p-acento);
  margin-bottom: 14px;
}
.nv-hero__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--p-titulo);
  margin: 0 0 20px;
}
.nv-hero__sub {
  font-size: clamp(0.95rem, 1.6vw, 1.08rem);
  color: var(--ink-soft);
  line-height: 1.65;
  max-width: 56ch;
  margin: 0 auto;
}

.nv-grid-section {
  padding: 0 clamp(20px, 5vw, 60px) clamp(60px, 8vw, 100px);
  background: var(--bg);
}

.nv-grid {
  max-width: var(--container-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
@media (max-width: 640px) {
  .nv-grid {
    grid-template-columns: 1fr;
  }
}
.nv-grid .lnd-ex-card {
  min-height: 420px;
}
@media (max-width: 640px) {
  .nv-grid .lnd-ex-card {
    min-height: 300px;
  }
}

/* =========================================================
   ADMISIONES — Proceso de admisión
========================================================= */
.hero-cinema {
  position: relative;
  height: 90vh;
  min-height: 600px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg-dark);
  margin-top: calc(-1 * var(--header-height));
  padding-top: var(--header-height);
}

.hero-bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.hero-overlay-grad {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.3) 60%, rgba(15, 23, 42, 0.4) 100%);
  z-index: 1;
}

.hero-content-box {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 1000px;
  padding: 0 24px;
}

.hero-title-main {
  font-size: clamp(3.5rem, 8vw, 6rem);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  margin-bottom: 1.5rem;
  letter-spacing: -0.03em;
  opacity: 0;
  animation: fadeUpProceso 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.2s;
}

.hero-subtitle-main {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto;
  opacity: 0;
  animation: fadeUpProceso 1s cubic-bezier(0.16, 1, 0.3, 1) forwards 0.4s;
}

.summary-section {
  padding: var(--sp-xl) 0;
  background-color: var(--p-fondo);
  position: relative;
}

.summary-grid {
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .summary-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.summary-img-box {
  position: relative;
  height: 500px;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
  position: sticky;
  top: 120px;
}

.summary-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.summary-text-col {
  padding: 2rem 0;
}

.summary-heading {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--p-acento);
  line-height: 1.2;
  margin-bottom: 2rem;
}

.summary-p {
  font-size: 1.2rem;
  color: var(--text-gray);
  margin-bottom: 1.5rem;
  line-height: 1.7;
}

.summary-highlight {
  padding: 1.5rem;
  background-color: #F0F9FF;
  border-left: 4px solid var(--col-espiritu);
  border-radius: 0 12px 12px 0;
  color: var(--p-acento);
  font-weight: 600;
  font-size: 1.1rem;
}

.process-section {
  padding: var(--sp-xl) 0;
  background-color: var(--bg-global);
  position: relative;
}

.timeline-wrapper {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}
.timeline-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  width: 4px;
  background: rgba(77, 138, 187, 0.15);
  border-radius: 4px;
}
@media (min-width: 768px) {
  .timeline-wrapper::before {
    left: 50%;
    transform: translateX(-2px);
  }
}

.step-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
  position: relative;
}
@media (min-width: 768px) {
  .step-row {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .step-row:nth-child(odd) {
    flex-direction: row-reverse;
  }
  .step-row.feature-step {
    flex-direction: column !important;
    align-items: center;
  }
}

.step-card {
  background: var(--p-superficie);
  padding: 2.5rem;
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(77, 138, 187, 0.08);
  width: calc(100% - 60px);
  margin-left: 60px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}
.step-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px -12px rgba(77, 138, 187, 0.2);
}
@media (min-width: 768px) {
  .step-card {
    width: 45%;
    margin-left: 0;
  }
  .feature-step .step-card {
    width: 100%;
    max-width: 1000px;
    padding: 4rem;
    text-align: center;
  }
}

.step-feature .step-card {
  background: linear-gradient(135deg, #fff 0%, #F0F9FF 100%);
  border: 2px solid var(--col-espiritu);
}

.step-marker {
  position: absolute;
  left: 0;
  top: 2rem;
  width: 60px;
  height: 60px;
  background: var(--p-superficie);
  border: 4px solid var(--p-acento);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--p-acento);
  font-size: 1.2rem;
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
@media (min-width: 768px) {
  .step-marker {
    left: 50%;
    transform: translateX(-50%);
    top: 50%;
    margin-top: -30px;
  }
  .feature-step .step-marker {
    position: static;
    margin: 0 auto 2rem auto;
    transform: none;
    width: 80px;
    height: 80px;
    font-size: 1.5rem;
    background: var(--col-espiritu);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 10px 20px rgba(125, 198, 229, 0.4);
  }
}

.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}

.step-emoji {
  font-size: 3rem;
  margin-right: 1.5rem;
  line-height: 1;
}

.step-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--p-titulo);
  margin: 0;
}

.step-feature .step-title {
  font-size: 2.2rem;
  color: var(--p-acento);
}

.step-desc {
  font-size: 1.05rem;
  color: var(--text-gray);
  line-height: 1.6;
}

.info-grid-section {
  padding: var(--sp-xl) 0;
  background: var(--p-fondo);
}

.info-grid {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.card-cupo {
  background: linear-gradient(135deg, var(--col-herencia) 0%, #0a101f 100%);
  color: #fff;
  padding: 4rem;
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.card-cupo h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}
.card-cupo p {
  font-size: 1.15rem;
  opacity: 0.9;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.cupo-graphic {
  position: absolute;
  right: -20px;
  bottom: -20px;
  font-size: 8rem;
  color: var(--col-espiritu);
  opacity: 0.1;
  transform: rotate(-15deg);
}

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: var(--col-espiritu);
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 0 10px var(--col-espiritu);
  animation: pulseDot 2s infinite;
}

@keyframes pulseDot {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.card-foreign {
  background: var(--p-superficie);
  padding: 4rem;
  border-radius: var(--radius-card);
  color: var(--col-texto);
  border: 1px solid #F0F9FF;
  box-shadow: 0 10px 30px rgba(77, 138, 187, 0.05);
  position: relative;
  overflow: hidden;
}
.card-foreign h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--p-acento);
  position: relative;
  z-index: 2;
}
.card-foreign p {
  font-size: 1.15rem;
  color: var(--text-gray);
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}

.peace-cloud {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #F0F9FF 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.8;
}

.card-foreign-icon {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-size: 3rem;
  color: var(--col-borde);
}

.page-proceso .faq-section {
  padding: var(--sp-xl) 0;
  background-color: var(--bg-global);
}
.page-proceso .faq-wrapper {
  max-width: 800px;
  margin: 0 auto 5rem auto;
}
.page-proceso details {
  margin-bottom: 1.5rem;
  background: var(--p-superficie);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}
.page-proceso details:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05);
}
.page-proceso summary {
  padding: 1.5rem 2rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--p-acento);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 4rem;
}
.page-proceso summary::-webkit-details-marker {
  display: none;
}
.page-proceso summary::after {
  content: "+";
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--col-espiritu);
  transition: transform 0.3s;
}
.page-proceso details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.page-proceso .faq-ans {
  padding: 0 2rem 2rem 2rem;
  color: var(--text-gray);
  line-height: 1.7;
}

[data-theme=dark] .summary-highlight {
  background-color: var(--p-tinte);
}
[data-theme=dark] .timeline-wrapper::before {
  background: var(--p-linea);
}
[data-theme=dark] .step-card {
  box-shadow: 0 10px 30px var(--p-sombra);
}
[data-theme=dark] .step-card:hover {
  box-shadow: 0 25px 50px -12px var(--p-sombra);
}
[data-theme=dark] .step-feature .step-card {
  background: linear-gradient(135deg, var(--p-superficie) 0%, var(--p-superficie-alt) 100%);
}
[data-theme=dark] .step-marker {
  box-shadow: 0 4px 10px var(--p-sombra);
}
[data-theme=dark] .card-foreign {
  border-color: var(--p-linea);
  box-shadow: 0 10px 30px var(--p-sombra);
}
[data-theme=dark] .peace-cloud {
  background: radial-gradient(circle, var(--p-tinte) 0%, transparent 70%);
}
[data-theme=dark] .page-proceso details {
  border-color: var(--p-linea);
  box-shadow: none;
}
[data-theme=dark] .page-proceso details:hover {
  box-shadow: 0 8px 16px var(--p-sombra);
}

@keyframes fadeUpProceso {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* =========================================================
   PÁGINAS LEGALES — Aviso de Privacidad, Términos y Condiciones
========================================================= */
.page-legal .legal-wrapper {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 24px 120px;
}
.page-legal .legal-header {
  margin-bottom: 60px;
  text-align: left;
}
.page-legal .legal-h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--p-acento);
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.2;
}
.page-legal .legal-meta {
  font-size: 0.9rem;
  color: #888;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}
[data-theme=dark] .page-legal .legal-meta {
  color: var(--p-texto-suave);
}
.page-legal .legal-content {
  font-size: 1rem;
  color: var(--p-titulo);
}
.page-legal .legal-content h2 {
  font-size: 1.5rem;
  color: var(--p-titulo);
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #E0E6ED;
  padding-bottom: 10px;
}
[data-theme=dark] .page-legal .legal-content h2 {
  border-bottom-color: var(--p-linea);
}
.page-legal .legal-content h3 {
  font-size: 1.2rem;
  color: var(--p-acento);
  font-weight: 600;
  margin-top: 30px;
  margin-bottom: 15px;
}
.page-legal .legal-content ul {
  list-style: disc;
  padding-left: 24px;
  margin-bottom: 20px;
}
.page-legal .legal-content li {
  margin-bottom: 10px;
}
.page-legal .legal-content p {
  margin-bottom: 20px;
  line-height: 1.7;
}
.page-legal .legal-content {
  /* En claro el texto legal va en la tinta de títulos; en oscuro, en la de
     texto corrido (el blanco de los títulos en páginas enteras deslumbra).
     Los <h2> conservan --p-titulo: la jerarquía la ponen ellos. */
}
[data-theme=dark] .page-legal .legal-content {
  color: var(--p-texto);
}
.page-legal .legal-link {
  color: var(--p-acento);
  text-decoration: underline;
  font-weight: 600;
}
.page-legal .legal-link:hover {
  color: var(--col-espiritu);
}

/* =========================================================
   MAPA DEL SITIO
========================================================= */
.page-sitemap .sitemap-header {
  background-color: var(--col-herencia);
  color: #fff;
  padding: 80px 20px 60px;
  text-align: center;
}
.page-sitemap .sitemap-h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  margin-bottom: 24px;
  letter-spacing: -1px;
}
.page-sitemap .search-wrapper {
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}
.page-sitemap .search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--p-titulo);
}
.page-sitemap .search-input {
  width: 100%;
  padding: 14px 20px 14px 48px;
  border-radius: 50px;
  border: none;
  font-size: 1rem;
  font-family: inherit;
  /* Fondo explícito: sin él, en oscuro `color-scheme: dark` pinta el campo
     en el gris del sistema y el texto quedaba sin contraste. En claro es el
     mismo blanco que ponía el navegador. */
  background-color: var(--p-superficie);
  color: var(--p-titulo);
  outline: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.page-sitemap .search-input::-moz-placeholder {
  color: #aab;
}
.page-sitemap .search-input::placeholder {
  color: #aab;
}
.page-sitemap .search-input:focus {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
[data-theme=dark] .page-sitemap .search-input {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), inset 0 0 0 1px var(--p-linea);
}
[data-theme=dark] .page-sitemap .search-input::-moz-placeholder {
  color: var(--p-texto-suave);
}
[data-theme=dark] .page-sitemap .search-input::placeholder {
  color: var(--p-texto-suave);
}
[data-theme=dark] .page-sitemap .search-input:focus {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 0 1px var(--p-acento);
}
.page-sitemap .sitemap-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 40px;
}
.page-sitemap .sitemap-group .group-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--p-acento);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--p-acento);
}
.page-sitemap .sitemap-list {
  list-style: none;
}
.page-sitemap .sitemap-item {
  margin-bottom: 10px;
}
.page-sitemap .sitemap-link {
  font-size: 0.95rem;
  color: var(--p-titulo);
  text-decoration: none;
  transition: color 0.2s;
}
[data-theme=dark] .page-sitemap .sitemap-link:not(:hover) {
  color: var(--p-texto);
}
.page-sitemap .sitemap-link:hover {
  color: var(--p-acento);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.page-sitemap .search-results-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 60px;
  display: none;
}
.page-sitemap .search-results-container.active {
  display: block;
}
.page-sitemap .no-results {
  text-align: center;
  padding: 40px;
  color: var(--p-titulo);
  font-size: 1.1rem;
}

/* =========================================================
   NOTICIAS — índice + detalle  (v3)
========================================================= */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.32s;
  animation-timing-function: ease-out;
}

::view-transition-old(root) {
  animation-name: vt-fade-out-n;
}

::view-transition-new(root) {
  animation-name: vt-fade-in-n;
}

@keyframes vt-fade-out-n {
  to {
    opacity: 0;
  }
}
@keyframes vt-fade-in-n {
  from {
    opacity: 0;
  }
}
::view-transition-group(*) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(*),
::view-transition-new(*) {
  -o-object-fit: cover;
     object-fit: cover;
  overflow: clip;
}

/* ─── Base ──────────────────────────────────────────────── */
/* ── SUBNAV ─────────────────────────────────────────────── */
.noticias-subnav {
  background: linear-gradient(110deg, #08152b 0%, #122450 55%, #163a70 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  position: sticky;
  top: var(--header-height);
  z-index: 80;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}
.noticias-subnav .container {
  display: flex;
  align-items: center;
  padding: 0 24px;
  height: 50px;
  gap: 0;
}

.noticias-subnav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  flex-shrink: 0;
  padding-right: 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: color 0.2s;
}
.noticias-subnav-brand svg {
  color: #7dd3fc;
  flex-shrink: 0;
}
.noticias-subnav-brand:hover {
  color: #fff;
}

.noticias-subnav-sep {
  opacity: 0.28;
  padding: 0 5px;
  font-weight: 300;
}

.noticias-subnav-section {
  color: #7dd3fc;
}

.noticias-subnav-links {
  display: flex;
  gap: 2px;
  padding: 0 14px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.noticias-subnav-links::-webkit-scrollbar {
  display: none;
}

.noticias-subnav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.79rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}
.noticias-subnav-link:hover {
  background: rgba(255, 255, 255, 0.09);
  color: rgba(255, 255, 255, 0.88);
}
.noticias-subnav-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.noticias-subnav-end {
  flex-shrink: 0;
  padding-left: 16px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}

.noticias-subnav-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.noticias-subnav-live::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #e51022;
  animation: pulse-live 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────── */
.noticias-home {
  padding-top: var(--header-height);
  background: linear-gradient(180deg, #f0f5fb 0%, #e8f0f8 40%, #f4f8fc 100%);
  min-height: 100vh;
}

/* El detalle NO necesita padding-top: el hero portada gestiona su propio offset */
.noticia-detalle {
  background: var(--p-fondo);
  min-height: 100vh;
}

/* ── HERO ───────────────────────────────────────────────── */
#noticias-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.noticias-hero-mascot-wrap {
  flex: 0 0 auto;
  display: contents;
}

.noticias-hero {
  position: relative;
  padding: 48px 24px 0; /* estandarizado con /blog: mascota a ras del borde inferior */
  overflow: hidden;
  background: linear-gradient(160deg, #0b1f3d 0%, #163a70 55%, #1d5ab0 100%);
}
.noticias-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 120% at 90% 50%, rgba(125, 198, 229, 0.12), transparent 60%), radial-gradient(circle at 10% 80%, rgba(66, 103, 172, 0.18), transparent 40%);
  pointer-events: none;
}
.noticias-hero .container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end; /* estandarizado con /blog */
  gap: 40px;
}

.noticias-hero-body {
  flex: 1 1 0;
  min-width: 0;
  padding-bottom: 52px; /* estandarizado con /blog */
}

.noticias-hero-mascot {
  flex: 0 0 auto;
  width: clamp(200px, 30vw, 420px); /* más grande: aprovecha el espacio (imagen apaisada) */
  display: none;
  align-self: flex-end;
  pointer-events: none;
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.35));
}
@media (min-width: 640px) {
  .noticias-hero-mascot {
    display: block;
  }
}

.noticias-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.eyebrow-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
}
.eyebrow-live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e51022;
  animation: pulse-live 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulse-live {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.7);
  }
}
.noticias-hero-title {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 18px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.noticias-hero-lead {
  max-width: 580px;
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 26px;
}

.noticias-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.noticias-hero-actions .btn-primario {
  font-size: 0.875rem;
  padding: 12px 26px;
  background: #fff;
  color: #0b1f3d;
  border-color: #fff;
}
.noticias-hero-actions .btn-primario:hover {
  background: #e8f0fb;
  border-color: #e8f0fb;
}
.noticias-hero-actions .btn-secundario {
  font-size: 0.875rem;
  padding: 12px 26px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.noticias-hero-actions .btn-secundario:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

/* ── TICKER ─────────────────────────────────────────────── */
.news-ticker-bar {
  width: 100%;
  background: var(--col-herencia);
  overflow: hidden;
}

.news-ticker-inner {
  display: flex;
  align-items: stretch;
}

.ticker-label {
  flex-shrink: 0;
  background: var(--col-bilbao);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.ticker-label .ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  animation: pulse-live 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.ticker-track-wrap {
  overflow: hidden;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 12px 0;
}

.ticker-track {
  display: flex;
  animation: ticker-scroll 110s linear infinite;
  will-change: transform;
  white-space: nowrap;
}
.ticker-track:hover {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 36px 0 0;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.ticker-item:hover {
  color: #fff;
}
.ticker-item:hover .ticker-cat {
  color: rgba(255, 255, 255, 0.75);
}
.ticker-item::after {
  content: "◆";
  font-size: 0.4em;
  opacity: 0.28;
  margin-left: 36px;
  flex-shrink: 0;
}

.ticker-cat {
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.48);
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}

.ticker-text {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
/* ── SECTION HEAD ───────────────────────────────────────── */
.noticias-featured,
.noticias-listado {
  padding-left: 24px;
  padding-right: 24px;
}

.noticias-featured {
  padding-top: 52px;
  padding-bottom: 40px;
}

.noticias-listado {
  padding-top: 12px;
  padding-bottom: 80px;
  position: relative;
}
.noticias-listado::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 40% at 15% 25%, rgba(77, 138, 187, 0.13), transparent 60%), radial-gradient(ellipse 45% 50% at 85% 70%, rgba(125, 198, 229, 0.1), transparent 55%), radial-gradient(ellipse 40% 35% at 50% 50%, rgba(55, 76, 105, 0.06), transparent 65%);
  pointer-events: none;
}

.noticias-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.noticias-section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--p-titulo);
  letter-spacing: -0.03em;
}

.noticias-section-copy {
  max-width: 440px;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--col-texto);
  opacity: 0.8;
}

/* ── FEATURED ───────────────────────────────────────────── */
.featured-noticia {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(140deg, #0f2a5e 0%, #1d4080 55%, var(--col-bilbao) 100%);
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.18);
}
@media (min-width: 1024px) {
  .featured-noticia {
    min-height: 480px;
  }
}

.featured-noticia-bg-decor {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 50%, rgba(255, 255, 255, 0.05), transparent 55%), radial-gradient(circle at 20% 80%, rgba(125, 198, 229, 0.08), transparent 40%);
  pointer-events: none;
}

.featured-noticia-mascot {
  position: absolute;
  bottom: 0;
  right: 40px;
  width: clamp(160px, 20vw, 280px);
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.28));
}
@media (max-width: 767px) {
  .featured-noticia-mascot {
    width: 120px;
    right: 16px;
    opacity: 0.22;
  }
}

.featured-noticia-content {
  position: relative;
  z-index: 2;
  padding: 36px 32px;
  color: #fff;
  max-width: 680px;
}
@media (min-width: 1024px) {
  .featured-noticia-content {
    padding: 52px 56px;
  }
}

.featured-noticia-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.featured-noticia-date {
  font-size: 0.8rem;
  opacity: 0.55;
}

.featured-noticia-title {
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}

.featured-noticia-excerpt {
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.8;
  opacity: 0.88;
  max-width: 540px;
  margin-bottom: 28px;
}

.featured-noticia-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 12px 24px;
  border-radius: 999px;
  transition: background 0.22s ease, border-color 0.22s ease;
  text-decoration: none;
}
.featured-noticia-cta:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.4);
}

/* ── CATEGORY CHIPS + BADGES ────────────────────────────── */
.cat-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.cat-chip.cat-institucional {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}
.cat-chip.cat-academico {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}
.cat-chip.cat-cultural {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
}
.cat-chip.cat-deportivo {
  background: rgba(22, 163, 74, 0.12);
  color: #16a34a;
}
.cat-chip.cat-comunidad {
  background: rgba(219, 39, 119, 0.12);
  color: #db2777;
}
.cat-chip.cat-chip--white, .cat-chip.cat-chip--glass {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.cat-chip.cat-chip--featured {
  background: #f5b400;
  color: #fff;
  gap: 6px;
}

.nueva-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.32);
}

/* ── BÚSQUEDA ───────────────────────────────────────────── */
.noticias-search-wrap {
  margin-bottom: 20px;
}

.noticias-search-input-wrap {
  position: relative;
  max-width: 460px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 4px 20px rgba(77, 138, 187, 0.09), 0 1px 4px rgba(15, 23, 42, 0.06);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.noticias-search-input-wrap:focus-within {
  border-color: rgba(77, 138, 187, 0.45);
  box-shadow: 0 0 0 4px rgba(77, 138, 187, 0.1), 0 4px 24px rgba(77, 138, 187, 0.12);
}
.noticias-search-input-wrap svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--p-titulo);
  opacity: 0.75;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.2s;
}
.noticias-search-input-wrap:focus-within svg {
  opacity: 1;
  color: var(--p-acento);
}

.noticias-search-input {
  width: 100%;
  padding: 13px 20px 13px 44px;
  border: none;
  border-radius: 999px;
  font-size: 0.88rem;
  font-family: inherit;
  background: transparent;
  color: var(--col-texto);
  outline: none;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
}
.noticias-search-input::-moz-placeholder {
  color: var(--col-texto);
  opacity: 0.42;
}
.noticias-search-input::placeholder {
  color: var(--col-texto);
  opacity: 0.42;
}
.noticias-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* ── FILTROS ────────────────────────────────────────────── */
.noticias-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.noticias-filter-btn {
  padding: 9px 20px;
  border-radius: 999px;
  border: 1.5px solid var(--col-borde);
  background: var(--p-superficie);
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--col-texto);
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: inherit;
}
.noticias-filter-btn:hover {
  background: #f1f5f9;
  border-color: rgba(77, 138, 187, 0.3);
}
.noticias-filter-btn.active {
  background: var(--col-herencia);
  border-color: var(--col-herencia);
  color: #fff;
  box-shadow: 0 4px 14px rgba(55, 76, 105, 0.18);
}
.noticias-filter-btn[data-noticia-filter=institucional].active {
  background: #2563eb;
  border-color: #2563eb;
}
.noticias-filter-btn[data-noticia-filter=academico].active {
  background: #7c3aed;
  border-color: #7c3aed;
}
.noticias-filter-btn[data-noticia-filter=cultural].active {
  background: #d97706;
  border-color: #d97706;
}
.noticias-filter-btn[data-noticia-filter=deportivo].active {
  background: #16a34a;
  border-color: #16a34a;
}
.noticias-filter-btn[data-noticia-filter=comunidad].active {
  background: #db2777;
  border-color: #db2777;
}

/* ── GRID ───────────────────────────────────────────────── */
.noticias-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 640px) {
  .noticias-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1100px) {
  .noticias-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── CARD — editorial vertical ──────────────────────────── */
.noticia-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06), 0 8px 28px rgba(55, 76, 105, 0.08);
  transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
  position: relative;
  z-index: 1;
}
.noticia-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08), 0 20px 52px rgba(55, 76, 105, 0.14);
}
.noticia-card:hover .noticia-card-title a {
  color: var(--p-acento);
}
.noticia-card:hover .noticia-card-img img {
  transform: scale(1.04);
}
.noticia-card.is-hidden {
  display: none;
}

.noticia-card-img {
  display: block;
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
  text-decoration: none;
}
.noticia-card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.noticia-card-img .cat-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.noticia-card-img.noticia-card-img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}
.noticia-card-img.noticia-card-img--mascot img {
  -o-object-fit: contain;
     object-fit: contain;
  padding: 16px;
  height: 80%;
  width: auto;
}

/* Fondo sólido para cards sin portada — permite que el glassmorphism del card sea visible */
.noticia-card-img--empty {
  background: linear-gradient(140deg, #0d2451 0%, #1a4a9f 55%, #1d5ab0 100%);
  border-bottom: 1px solid rgba(30, 80, 180, 0.25);
}

/* Variantes de color por categoría (chip visible sobre el fondo azul) */
.cat-bg-institucional,
.cat-bg-academico,
.cat-bg-cultural,
.cat-bg-deportivo,
.cat-bg-comunidad { /* heredan el fondo azul de --empty */ }

.noticia-nueva-dot {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.noticia-card-body {
  flex: 1;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  background: transparent;
}

.noticia-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.noticia-date {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--col-texto);
  opacity: 0.48;
  white-space: nowrap;
}

.noticia-freshness {
  font-size: 0.72rem;
  color: var(--col-texto);
  opacity: 0.38;
  white-space: nowrap;
  flex-shrink: 0;
}

.noticia-card-title {
  font-size: 1.06rem;
  line-height: 1.3;
  color: var(--p-titulo);
  margin-bottom: 10px;
  letter-spacing: -0.02em;
  flex: 1;
}
.noticia-card-title a {
  color: inherit;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.noticia-card-excerpt {
  font-size: 0.84rem;
  font-weight: 300;
  color: var(--col-texto);
  opacity: 0.72;
  line-height: 1.65;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.noticia-read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--p-acento);
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
  margin-top: auto;
}
.noticia-read-more:hover {
  color: var(--p-titulo);
  gap: 10px;
}

/* ── Autor en card ──────────────────────────────────────── */
.noticia-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--col-borde);
  flex-shrink: 0;
}

.noticia-card-author-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--col-herencia), var(--col-bilbao));
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.noticia-card-author-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.noticia-card-author-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--col-texto);
  opacity: 0.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── EMPTY STATE ────────────────────────────────────────── */
.noticias-empty {
  display: none;
  padding: 52px 24px;
  text-align: center;
  background: var(--p-superficie);
  border: 1px solid var(--col-borde);
  border-radius: 24px;
  color: var(--col-texto);
}
.noticias-empty img {
  width: 100px;
  margin: 0 auto 20px;
  display: block;
  opacity: 0.4;
  filter: grayscale(0.4);
}
.noticias-empty h3 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: var(--p-titulo);
}
.noticias-empty p {
  font-size: 0.9rem;
  opacity: 0.6;
}
.noticias-empty.show {
  display: block;
}

/* ── CTA ────────────────────────────────────────────────── */
.noticias-cta {
  padding: 0 24px 100px;
}

.noticias-cta-box {
  background: linear-gradient(135deg, var(--col-herencia) 0%, #1a4a9f 50%, var(--col-bilbao) 100%);
  color: #fff;
  border-radius: 28px;
  padding: 52px 32px;
  text-align: center;
  box-shadow: 0 28px 60px rgba(15, 23, 42, 0.2);
  position: relative;
  overflow: hidden;
}
.noticias-cta-box::before {
  content: "";
  position: absolute;
  top: -40%;
  right: -8%;
  width: 55%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05), transparent 68%);
  pointer-events: none;
}
.noticias-cta-box h3 {
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  margin-bottom: 14px;
  letter-spacing: -0.03em;
}
.noticias-cta-box p {
  max-width: 620px;
  margin: 0 auto 28px;
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.75;
  opacity: 0.9;
}
.noticias-cta-box .btn-terciario {
  font-size: 0.875rem;
  padding: 12px 30px;
}

/* ═══════════════════════════════════════════════════════
   DETALLE
═══════════════════════════════════════════════════════ */
.read-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--col-bilbao), var(--col-espiritu));
  z-index: 9999;
  border-radius: 0 2px 2px 0;
  transition: width 0.08s linear;
  pointer-events: none;
}

.noticia-detalle {
  background: var(--p-fondo);
}

/* ── Hero portada full-width ────────────────────────────── */
.nd-hero-portada {
  position: relative;
  height: max(78vh, 520px);
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.nd-hero-portada--empty {
  background: linear-gradient(145deg, var(--col-herencia) 0%, #1a2d4f 50%, #0f1e38 100%);
}

.nd-hero-portada-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 115%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 30%;
     object-position: center 30%;
  z-index: 0;
  will-change: transform;
}
.nd-hero-portada-img--placeholder {
  opacity: 0.35;
  -o-object-position: center;
     object-position: center;
}

.nd-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 15, 40, 0.95) 0%, rgba(10, 25, 65, 0.72) 40%, rgba(0, 0, 0, 0.12) 100%), linear-gradient(to right, rgba(0, 0, 0, 0.18) 0%, transparent 70%);
  z-index: 1;
}

.nd-hero-portada--empty .nd-hero-overlay {
  background: linear-gradient(to top, rgba(5, 15, 40, 0.75) 0%, rgba(10, 25, 65, 0.5) 40%, rgba(0, 0, 0, 0.06) 100%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0%, transparent 70%);
}

.nd-hero-alex {
  position: absolute;
  bottom: 0;
  right: clamp(24px, 5vw, 80px);
  width: clamp(110px, 14vw, 210px);
  z-index: 3;
  filter: drop-shadow(0 20px 36px rgba(0, 0, 0, 0.45));
  animation: mascot-float 3.6s ease-in-out infinite;
  pointer-events: none;
}
@media (max-width: 640px) {
  .nd-hero-alex {
    width: 80px;
    right: 12px;
    opacity: 0.45;
  }
}

.nd-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 0 36px;
}
.nd-hero-content .container {
  max-width: 900px;
  padding-bottom: 16px;
}

.nd-hero-glass-card {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 24px 0 0;
}
@media (max-width: 640px) {
  .nd-hero-glass-card {
    padding: 18px 0 0;
  }
}

.nd-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s backwards;
}

.nd-hero-date {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.55);
}

.nd-hero-title {
  font-size: clamp(1.9rem, 4.8vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 16px;
  max-width: 760px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  animation: fadeInUp 0.85s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s backwards;
}

.nd-hero-lead {
  font-size: clamp(0.95rem, 1.5vw, 1.08rem);
  font-weight: 300;
  line-height: 1.78;
  color: rgba(255, 255, 255, 0.82);
  max-width: 620px;
  margin-bottom: 28px;
  animation: fadeInUp 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s backwards;
}

.nd-hero-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  animation: fadeInUp 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s backwards;
}

.nd-author-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.nd-author-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--col-herencia), var(--col-bilbao));
  border: 2px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  overflow: hidden;
}
.nd-author-avatar img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 50%;
}

.nd-author-meta {
  min-width: 0;
}
.nd-author-meta strong {
  display: block;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nd-author-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.52);
  line-height: 1.5;
}

.nd-sep {
  opacity: 0.35;
  font-size: 0.65rem;
}

.nd-hero-share {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .nd-hero-share {
    width: 100%;
  }
}

.nd-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
  white-space: nowrap;
  line-height: 1;
}
.nd-share-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.65);
  transform: translateY(-1px);
}
.nd-share-btn--wa {
  background: #25d366;
  border-color: #25d366;
}
.nd-share-btn--wa:hover {
  background: #1da851;
  border-color: #1da851;
}

/* ── Nav / Breadcrumb ───────────────────────────────────── */
.noticia-detalle-nav {
  padding: 22px 24px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.noticia-detalle-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--p-acento);
  text-decoration: none;
  transition: color 0.2s ease;
}
.noticia-detalle-nav a svg {
  transition: transform 0.2s ease;
}
.noticia-detalle-nav a:hover {
  color: var(--p-titulo);
}
.noticia-detalle-nav a:hover svg {
  transform: translateX(-3px);
}

.nd-breadcrumb-divider {
  color: var(--col-texto);
  opacity: 0.25;
  font-size: 0.8rem;
}

.nd-breadcrumb-current {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--col-texto);
  opacity: 0.5;
}

/* ── Alex summary ───────────────────────────────────────── */
.alex-summary {
  max-width: 720px;
  margin: 36px auto 0;
  padding: 0 24px;
}

.alex-summary-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.alex-summary-mascot-wrap {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-top: 4px;
}
.alex-summary-mascot-wrap img {
  width: 64px;
  filter: drop-shadow(0 5px 12px rgba(0, 0, 0, 0.1));
  animation: mascot-float 3.8s ease-in-out infinite;
}
.alex-summary-mascot-wrap span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--p-acento);
  opacity: 0.7;
}

.alex-summary-bubble {
  background: var(--p-superficie);
  border: 1.5px solid rgba(77, 138, 187, 0.18);
  border-radius: 20px 20px 20px 4px;
  padding: 20px 24px;
  flex: 1;
  box-shadow: 0 6px 24px rgba(77, 138, 187, 0.08);
}
.alex-summary-bubble .summary-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--p-acento);
  margin-bottom: 10px;
}
.alex-summary-bubble .summary-label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--p-acento);
  border-radius: 1px;
}
.alex-summary-bubble p {
  font-size: 0.97rem;
  line-height: 1.72;
  color: var(--p-titulo);
  font-weight: 400;
  margin: 0;
}
.alex-summary-bubble p strong {
  color: var(--p-acento);
}

/* ── TOC ────────────────────────────────────────────────── */
.noticia-toc {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 0 24px;
}

.noticia-toc-inner {
  background: linear-gradient(135deg, #f8fafc, #eff6ff);
  border: 1px solid rgba(77, 138, 187, 0.14);
  border-radius: 22px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.noticia-toc-inner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 40%;
  height: 200%;
  background: radial-gradient(circle, rgba(77, 138, 187, 0.05), transparent 65%);
  pointer-events: none;
}

.noticia-toc-alex {
  flex-shrink: 0;
  width: 68px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.1));
}
@media (max-width: 480px) {
  .noticia-toc-alex {
    display: none;
  }
}

.noticia-toc-body {
  flex: 1;
}
.noticia-toc-body h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--col-bilbao);
  margin-bottom: 14px;
}
.noticia-toc-body h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(77, 138, 187, 0.2);
}
.noticia-toc-body ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc-counter;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.noticia-toc-body li {
  counter-increment: toc-counter;
}
.noticia-toc-body a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--col-herencia);
  text-decoration: none;
  transition: color 0.2s ease, padding-left 0.2s ease;
}
.noticia-toc-body a::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--col-bilbao);
  opacity: 0.55;
  width: 22px;
  flex-shrink: 0;
}
.noticia-toc-body a:hover {
  color: var(--col-bilbao);
  padding-left: 4px;
}

/* ── Cuerpo del artículo ────────────────────────────────── */
.noticia-detalle-body {
  max-width: 720px;
  margin: 36px auto 0;
  padding: 0 24px;
}
.noticia-detalle-body h2 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 800;
  color: var(--p-titulo);
  margin: 52px 0 18px;
  letter-spacing: -0.03em;
  line-height: 1.2;
  scroll-margin-top: 96px;
}
.noticia-detalle-body h2:first-child {
  margin-top: 0;
}
.noticia-detalle-body h3 {
  font-size: 1.4rem;
  color: var(--p-titulo);
  margin: 44px 0 16px;
  letter-spacing: -0.03em;
  padding-left: 16px;
  border-left: 3px solid var(--p-acento);
}
.noticia-detalle-body p {
  font-size: 0.88rem;
  line-height: 1.82;
  color: var(--col-texto);
  margin-bottom: 20px;
  font-weight: 400;
}
.noticia-detalle-body ul {
  margin: 0 0 28px;
  list-style: none;
  padding: 0;
}
.noticia-detalle-body ul li {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--col-texto);
  font-weight: 400;
  margin-bottom: 10px;
  padding-left: 24px;
  position: relative;
}
.noticia-detalle-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p-acento);
  opacity: 0.6;
}
.noticia-detalle-body blockquote {
  margin: 44px 0;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(77, 138, 187, 0.04), rgba(125, 198, 229, 0.03));
  border-left: 5px solid var(--p-acento);
  border-radius: 0 20px 20px 0;
  position: relative;
}
.noticia-detalle-body blockquote::before {
  content: '"';
  position: absolute;
  top: -8px;
  left: 28px;
  font-size: 5rem;
  line-height: 1;
  color: var(--p-acento);
  opacity: 0.15;
  font-weight: 900;
}
.noticia-detalle-body blockquote p {
  font-size: 1.2rem;
  font-weight: 400;
  font-style: italic;
  opacity: 0.92;
  margin-bottom: 12px;
  line-height: 1.7;
}
.noticia-detalle-body blockquote cite {
  font-size: 0.85rem;
  font-style: normal;
  opacity: 0.48;
  color: var(--col-texto);
}

/* Drop cap primer bloque — targeting both <p> and <div> (contenteditable default) */
.noticia-detalle-body--lead > p:first-of-type::first-letter,
.noticia-detalle-body--lead > div:first-child::first-letter {
  float: left;
  font-size: 3.6rem;
  line-height: 0.82;
  font-weight: 900;
  color: var(--p-acento);
  margin-right: 8px;
  margin-top: 5px;
  letter-spacing: -0.03em;
}

/* ── Alex callout ───────────────────────────────────────── */
.alex-callout {
  max-width: 720px;
  margin: 44px auto;
  padding: 0 24px;
}
.alex-callout > div {
  background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
  border: 1px solid rgba(77, 138, 187, 0.18);
  border-radius: 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px 28px;
  overflow: hidden;
}

.alex-callout--pregunta > div {
  background: linear-gradient(135deg, #fff7ed, #fef3c7);
  border-color: rgba(217, 119, 6, 0.2);
}
.alex-callout--pregunta > div .callout-label--pregunta {
  color: #d97706;
}
.alex-callout--pregunta > div .callout-label--pregunta::before {
  background: #d97706;
}
.alex-callout--pregunta > div p strong {
  color: #d97706;
}

.alex-callout-mascot {
  flex-shrink: 0;
  width: 80px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1));
  animation: mascot-float 3.2s ease-in-out infinite;
}

.alex-callout-content {
  flex: 1;
}
.alex-callout-content .callout-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--col-bilbao);
  margin-bottom: 8px;
}
.alex-callout-content .callout-label::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--col-bilbao);
  border-radius: 1px;
}
.alex-callout-content p {
  font-size: 1rem;
  font-weight: 400;
  color: var(--col-herencia);
  line-height: 1.65;
  margin: 0;
}
.alex-callout-content p strong {
  color: var(--col-bilbao);
}

/* ── Key stats ──────────────────────────────────────────── */
.noticia-key-stats {
  max-width: 720px;
  margin: 44px auto;
  padding: 0 24px;
}

.key-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 500px) {
  .key-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.key-stat-item {
  background: #fff;
  border: 1px solid var(--col-borde);
  border-radius: 18px;
  padding: 22px 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.26s ease, box-shadow 0.26s ease;
}
.key-stat-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--stat-color, var(--col-bilbao));
  border-radius: 3px 3px 0 0;
}
.key-stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}

.key-stat-number {
  display: block;
  font-size: 2.6rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--stat-color, var(--col-bilbao));
  margin-bottom: 7px;
  font-variant-numeric: tabular-nums;
}

.key-stat-label {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--col-texto);
  opacity: 0.6;
  line-height: 1.45;
}

/* ── Pull quote ─────────────────────────────────────────── */
.noticia-pull-quote {
  max-width: 720px;
  margin: 52px auto;
  padding: 0 24px;
}

.pull-quote-inner {
  background: linear-gradient(140deg, var(--col-herencia) 0%, #1a4a9f 55%, var(--col-bilbao) 100%);
  border-radius: 26px;
  padding: 36px 40px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 56px rgba(55, 76, 105, 0.28);
}
.pull-quote-inner::before {
  content: '"';
  position: absolute;
  top: -28px;
  right: 18px;
  font-size: 14rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  font-weight: 900;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media (max-width: 480px) {
  .pull-quote-inner {
    padding: 28px 24px;
  }
}

.pull-quote-text {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.52;
  letter-spacing: -0.025em;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}

.pull-quote-source {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pull-quote-source .source-name {
  font-size: 0.88rem;
  font-weight: 700;
  opacity: 0.9;
  display: block;
}
.pull-quote-source .source-role {
  font-size: 0.76rem;
  opacity: 0.48;
  display: block;
  margin-top: 2px;
}

/* ── Tags ───────────────────────────────────────────────── */
.noticia-tags {
  max-width: 720px;
  margin: 40px auto 0;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.noticia-tags .tags-label {
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--col-texto);
  opacity: 0.38;
  flex-shrink: 0;
  margin-right: 2px;
}

.noticia-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--col-texto);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.22s ease, color 0.22s ease;
}
.noticia-tag:hover {
  background: var(--col-bilbao);
  color: #fff;
}

/* ── Celebración fin de lectura ─────────────────────────── */
.noticia-celebration {
  max-width: 720px;
  margin: 64px auto 0;
  padding: 0 24px;
}

.celebration-inner {
  background: linear-gradient(140deg, #0a1f4e 0%, #1a3b82 55%, #0f6fdf 100%);
  border-radius: 28px;
  padding: 48px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  box-shadow: 0 36px 72px rgba(10, 31, 78, 0.32);
}
.celebration-inner::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -5%;
  width: 40%;
  height: 180%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.06), transparent 60%);
  pointer-events: none;
}

.celebration-mascot-group {
  position: relative;
  display: inline-block;
  margin-bottom: 22px;
}

.celebration-mascot {
  width: 100px;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.38));
  animation: celebration-bounce 0.65s ease-in-out infinite alternate;
  position: relative;
  z-index: 2;
}

.celebration-confetti {
  position: absolute;
  inset: -30px;
  pointer-events: none;
  overflow: visible;
}
.celebration-confetti .confetti-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
}
.celebration-confetti .confetti-piece:nth-child(1) {
  left: 10%;
  top: 5%;
  background: #ef4444;
  animation: confetti-fall 2.2s ease 0s infinite;
}
.celebration-confetti .confetti-piece:nth-child(2) {
  left: 28%;
  top: 0%;
  background: #f59e0b;
  animation: confetti-fall 1.9s ease 0.3s infinite;
  width: 6px;
  height: 11px;
}
.celebration-confetti .confetti-piece:nth-child(3) {
  left: 50%;
  top: 3%;
  background: #10b981;
  animation: confetti-fall 2.4s ease 0.1s infinite;
  border-radius: 50%;
}
.celebration-confetti .confetti-piece:nth-child(4) {
  left: 72%;
  top: 1%;
  background: #6366f1;
  animation: confetti-fall 2.1s ease 0.5s infinite;
}
.celebration-confetti .confetti-piece:nth-child(5) {
  left: 88%;
  top: 8%;
  background: #ec4899;
  animation: confetti-fall 1.8s ease 0.2s infinite;
  width: 10px;
  height: 5px;
}
.celebration-confetti .confetti-piece:nth-child(6) {
  left: 18%;
  top: 15%;
  background: #0ea5e9;
  animation: confetti-fall 2.3s ease 0.4s infinite;
  border-radius: 50%;
  width: 5px;
  height: 5px;
}
.celebration-confetti .confetti-piece:nth-child(7) {
  left: 62%;
  top: 10%;
  background: #f97316;
  animation: confetti-fall 2s ease 0.6s infinite;
}
.celebration-confetti .confetti-piece:nth-child(8) {
  left: 40%;
  top: 18%;
  background: #84cc16;
  animation: confetti-fall 2.5s ease 0.15s infinite;
  border-radius: 50%;
  width: 6px;
  height: 6px;
}

@keyframes confetti-fall {
  0% {
    opacity: 0;
    transform: translateY(-24px) rotate(0deg) scale(0.8);
  }
  12% {
    opacity: 1;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0;
    transform: translateY(72px) rotate(400deg) scale(1.1);
  }
}
@keyframes celebration-bounce {
  0% {
    transform: translateY(0) rotate(-4deg);
  }
  100% {
    transform: translateY(-12px) rotate(4deg);
  }
}
.celebration-title {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
}

.celebration-subtitle {
  font-size: 0.9rem;
  font-weight: 300;
  opacity: 0.75;
  margin-bottom: 28px;
  line-height: 1.65;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.celebration-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.celebration-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: all 0.22s ease;
  border: none;
  line-height: 1;
}
.celebration-btn--copy {
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.24);
}
.celebration-btn--copy:hover {
  background: rgba(255, 255, 255, 0.22);
}
.celebration-btn--wa {
  background: #25d366;
  color: #fff;
}
.celebration-btn--wa:hover {
  background: #1da851;
}
.celebration-btn--back {
  background: #fff;
  color: var(--col-herencia);
}
.celebration-btn--back:hover {
  background: #eff6ff;
  color: var(--col-bilbao);
}

/* ── Companion flotante ─────────────────────────────────── */
.read-companion {
  position: fixed;
  bottom: 28px;
  right: 22px;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  z-index: 200;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.read-companion.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.read-companion-mascot {
  width: 56px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22));
  flex-shrink: 0;
}

.read-companion-bubble {
  background: #fff;
  border: 1.5px solid var(--col-borde);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 16px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--col-herencia);
  white-space: nowrap;
  position: relative;
}
.read-companion-bubble::after {
  content: "";
  position: absolute;
  bottom: -8px;
  right: 18px;
  width: 14px;
  height: 8px;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ── Noticias relacionadas ──────────────────────────────── */
.noticia-relacionadas {
  padding: 64px 24px 0;
}

.noticia-relacionadas-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-top: 24px;
}
@media (min-width: 640px) {
  .noticia-relacionadas-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Animaciones ────────────────────────────────────────── */
@keyframes mascot-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* ── TEMA OSCURO ────────────────────────────────────────────
   El hero, el subnav, el ticker, la destacada y el CTA ya son bandas oscuras con
   texto blanco en los dos temas: no se tocan. Aquí va lo que en claro es blanco
   o pastel y no se resuelve con un token sin mover el claro. El cuerpo WYSIWYG
   de la noticia comparte la guarda de colores pegados de _article.scss.
   Sin tocar a propósito: TOC, alex-callout, key-stats, pull-quote, tags,
   celebración y companion —ninguna vista ni JS los pinta hoy—; si vuelven,
   nacen con sus pasteles claros y hay que darles su versión oscura. */
[data-theme=dark] .noticias-home {
  background: linear-gradient(180deg, var(--p-fondo) 0%, var(--p-fondo-alt) 40%, var(--p-fondo) 100%);
}
[data-theme=dark] .noticias-listado::before {
  background: radial-gradient(ellipse 55% 40% at 15% 25%, rgba(125, 198, 229, 0.07), transparent 60%), radial-gradient(ellipse 45% 50% at 85% 70%, rgba(125, 198, 229, 0.05), transparent 55%);
}
[data-theme=dark] .featured-noticia,
[data-theme=dark] .noticias-cta-box {
  box-shadow: 0 28px 60px var(--p-sombra);
}
[data-theme=dark] {
  /* Buscador: mismo cristal noche que el del blog. */
}
[data-theme=dark] .noticias-search-input-wrap {
  background: color-mix(in srgb, var(--p-superficie) 80%, transparent);
  border-color: var(--p-linea);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
[data-theme=dark] .noticias-search-input-wrap:focus-within {
  border-color: rgba(125, 198, 229, 0.5);
  box-shadow: 0 0 0 4px var(--p-tinte), 0 4px 24px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .noticias-search-input::-moz-placeholder {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] .noticias-search-input::placeholder {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] {
  /* «Todas» activo era pizarra (#374C69) sobre azul noche: casi no se
     distinguía del resto. En oscuro invierte luminancia —acento claro con
     tinta— como el estado elegido del resto del sitio. Las categorías con
     color propio conservan su relleno. */
}
[data-theme=dark] .noticias-filter-btn:hover:not(.active) {
  background: var(--p-superficie-alt);
  border-color: rgba(125, 198, 229, 0.3);
}
[data-theme=dark] .noticias-filter-btn {
  /* Solo «Todas»: un `.active` genérico empataría en especificidad con
     los de categoría, ganaría por orden y dejaría tinta sobre su azul. */
}
[data-theme=dark] .noticias-filter-btn[data-noticia-filter=all].active {
  background: var(--p-acento);
  border-color: var(--p-acento);
  color: var(--pal-tinta);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
[data-theme=dark] {
  /* Tarjetas: el cristal blanco al 68 % pasa a cristal noche. */
}
[data-theme=dark] .noticia-card {
  background: color-mix(in srgb, var(--p-superficie) 78%, transparent);
  border-color: var(--p-linea);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 8px 28px rgba(0, 0, 0, 0.25);
}
[data-theme=dark] .noticia-card:hover {
  background: color-mix(in srgb, var(--p-superficie-alt) 92%, transparent);
  border-color: rgba(125, 198, 229, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 20px 52px var(--p-sombra);
}
[data-theme=dark] .noticia-nueva-dot {
  border-color: var(--p-superficie);
}
[data-theme=dark] {
  /* Fecha, frescura y autor iban a .38–.55 de opacidad: bajo 4,5:1 en
     oscuro. Pasan al gris suave del tema, a opacidad plena. */
}
[data-theme=dark] .noticia-date,
[data-theme=dark] .noticia-freshness,
[data-theme=dark] .noticia-card-author-name,
[data-theme=dark] .nd-breadcrumb-current {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] .noticia-freshness {
  opacity: 0.8;
}
[data-theme=dark] .noticias-empty img {
  opacity: 0.55;
}
[data-theme=dark] {
  /* Detalle */
}
[data-theme=dark] .alex-summary-bubble {
  border-color: var(--p-linea);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}
[data-theme=dark] .noticia-detalle-body blockquote {
  background: linear-gradient(135deg, rgba(125, 198, 229, 0.08), rgba(125, 198, 229, 0.03));
}
[data-theme=dark] .noticia-detalle-body blockquote::before {
  opacity: 0.22;
}
[data-theme=dark] .noticia-detalle-body blockquote cite {
  color: var(--p-texto-suave);
  opacity: 1;
}

/* ── Móvil: menos margen horizontal para aprovechar el ancho ── */
@media (max-width: 600px) {
  .noticias-hero {
    padding-left: 14px;
    padding-right: 14px;
  }
  .noticias-home .container {
    padding-left: 14px;
    padding-right: 14px;
  }
}
/* =========================================================
   COMUNIDAD · ESTUDIANTES (feed de Instagram)
========================================================= */
.comunidad-est {
  padding-top: var(--header-height);
  background: var(--bg-global);
  /* ── HERO ─────────────────────────────────── */
}
.comunidad-est__hero {
  position: relative;
  /* Claro del bosque (colores institucionales) */
  background: radial-gradient(55% 75% at 80% 8%, rgba(241, 196, 0, 0.16), transparent 46%), radial-gradient(90% 120% at 85% 18%, rgba(70, 189, 198, 0.24), transparent 50%), radial-gradient(120% 90% at 12% 100%, rgba(36, 80, 111, 0.5), transparent 60%), linear-gradient(180deg, #071528 0%, #0d2b3f 52%, #103a48 100%);
  border-bottom: 1px solid var(--col-borde);
  overflow: hidden;
}
.comunidad-est .comunidad-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.comunidad-est__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.comunidad-est__hero-text {
  max-width: 620px;
}
.comunidad-est__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}
.comunidad-est__title {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 900;
  line-height: 1.08;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: -1px;
}
.comunidad-est__lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 28px;
}
.comunidad-est__hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.comunidad-est__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 24px;
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}
.comunidad-est__btn--primary {
  background: var(--col-bilbao);
  color: #fff;
}
.comunidad-est__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px rgba(22, 32, 46, 0.5);
}
.comunidad-est__btn--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.comunidad-est__btn--ghost:hover {
  transform: translateY(-2px);
  border-color: #fff;
  background: rgba(255, 255, 255, 0.18);
}
.comunidad-est__hero-img {
  width: 280px;
  max-width: 38vw;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 20px 32px rgba(22, 32, 46, 0.22));
  animation: comunidad-est-float 3.4s ease-in-out infinite;
}
.comunidad-est {
  /* ── FEED ─────────────────────────────────── */
}
.comunidad-est__feed {
  max-width: 1400px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}
.comunidad-est__feed-head {
  text-align: center;
  margin-bottom: 40px;
}
.comunidad-est__feed-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--p-acento);
  margin-bottom: 8px;
}
.comunidad-est__feed-sub {
  font-size: 0.95rem;
  color: var(--p-titulo);
  opacity: 0.8;
}
.comunidad-est__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  align-items: start;
  justify-items: center;
  max-width: 1360px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .comunidad-est__grid {
    grid-template-columns: 1fr;
  }
}
.comunidad-est__post {
  width: 100%;
  max-width: 680px;
  border-radius: 18px;
  background: var(--p-superficie);
  border: 1px solid var(--col-borde);
  box-shadow: 0 10px 30px -18px rgba(22, 32, 46, 0.3);
  padding: 8px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.comunidad-est__post:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px -20px rgba(22, 32, 46, 0.4);
}
.comunidad-est__post .instagram-media {
  margin: 0 auto !important;
}

/* ── Tema oscuro ──
   El hero ya es noche en los dos temas (su degradado y la nube Three.js no cambian).
   Lo que cambia es lo de debajo: el subtítulo baja a texto suave —en `--p-titulo` al
   80 % competía con el título— y las sombras de tinta azul, invisibles sobre el azul
   noche, pasan a negras. El embed de Instagram sigue blanco (es de un tercero y
   trae su propio fondo inline): el marco oscuro de 8px lo recorta como una foto. */
[data-theme=dark] .comunidad-est__feed-sub {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] .comunidad-est__post {
  box-shadow: 0 10px 30px -18px var(--p-sombra);
}
[data-theme=dark] .comunidad-est__post:hover {
  box-shadow: 0 22px 44px -20px var(--p-sombra);
}

@keyframes comunidad-est-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}
@media (max-width: 860px) {
  .comunidad-est__hero-inner {
    flex-direction: column-reverse;
    text-align: center;
    padding: 40px 24px;
  }
  .comunidad-est__eyebrow {
    justify-content: center;
  }
  .comunidad-est__hero-cta {
    justify-content: center;
  }
  .comunidad-est__hero-img {
    width: 200px;
    max-width: 55vw;
  }
}
/* =========================================================
   COMUNIDAD · FAMILIAS  (avisos + calendario, estilo infantil)
   El calendario (.bilbao-cal) vive en componentes/_bilbao-cal.scss
========================================================= */
/* Mixin en lo nuevo, ad-hoc intacto en lo viejo: los ~7 breakpoints escritos a mano
   que ya había en este archivo se quedan como están (migrarlos es riesgo de
   regresión sin contrapartida), pero lo que se añada de aquí en adelante usa la
   escala de base/_mixins.scss. */
.fam {
  padding-top: var(--header-height);
  background: var(--bg-global);
  overflow: hidden;
  /* ── HERO ─────────────────────────────────── */
}
.fam__hero {
  position: relative;
  /* Claro del bosque: cielo profundo arriba, bruma teal, destello de sol cálido */
  background: radial-gradient(60% 80% at 78% 6%, rgba(241, 196, 0, 0.18), transparent 46%), radial-gradient(90% 120% at 88% 20%, rgba(70, 189, 198, 0.26), transparent 50%), radial-gradient(120% 90% at 10% 100%, rgba(36, 80, 111, 0.55), transparent 60%), linear-gradient(180deg, #071528 0%, #0d2b3f 50%, #103a48 100%);
  border-bottom: 1px solid var(--col-borde);
  overflow: hidden;
}
.fam .comunidad-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.fam__hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1120px;
  margin: 0 auto;
  padding: 60px 24px 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  text-align: left;
}
.fam__hero-chips {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.fam__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}
.fam__hero-art {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.fam__hero-halo {
  position: absolute;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 66%);
  pointer-events: none;
}
.fam__hero-img {
  position: relative;
  z-index: 1;
  width: 300px;
  max-width: 40vw;
  height: auto;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, 0.4));
  animation: fam-bob 3.4s ease-in-out infinite;
}
.fam__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.fam__title {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.05;
  color: #fff;
  margin-bottom: 16px;
  letter-spacing: -1px;
}
.fam__lead {
  font-size: 1.08rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 440px;
  margin: 0 auto;
}
.fam {
  /* ── SECCIONES ────────────────────────────── */
}
.fam__section {
  max-width: 1140px;
  margin: 0 auto;
  padding: 56px 24px;
}
.fam__section--cal {
  padding-bottom: 88px;
}
.fam__section-head {
  text-align: center;
  margin-bottom: 36px;
}
.fam__section-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--p-acento);
  margin-bottom: 8px;
}
.fam__section-title i {
  color: #fc6722;
}
.fam__section-sub {
  font-size: 0.98rem;
  color: var(--p-titulo);
  opacity: 0.8;
}
.fam {
  /* ── AVISOS ───────────────────────────────── */
}
.fam__avisos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 22px;
}
.fam {
  /* ── CALENDARIO layout ────────────────────── */
}
.fam__cal-wrap {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: start;
  /* ⚠️ Tiene `display` propio, así que necesita SU PROPIO `&[hidden]`.
     `[hidden] { display: none }` vive en `base/_normalize.scss`: misma
     especificidad (0,1,0) y capa ANTERIOR (`app.scss` importa `base` antes que
     `estaticas`), así que sin esta línea el `grid` gana y el conmutador de vista
     mostraría a la vez el mes y el ciclo completo. Es la misma trampa de
     cascada que `.admin-btn` y las modales del panel. */
}
.fam__cal-wrap[hidden] {
  display: none;
}
.fam__cal-detail {
  position: relative;
  background: linear-gradient(160deg, #0d2451 0%, #1650a0 100%);
  border-radius: 24px;
  padding: 28px 24px 24px;
  color: #fff;
  overflow: hidden;
  min-height: 320px;
}
.fam__cal-detail::after {
  content: "";
  position: absolute;
  bottom: -30px;
  right: -20px;
  width: 190px;
  height: 190px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 68%);
  pointer-events: none;
}
.fam__cal-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.fam__cal-detail-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
}
.fam__cal-reset {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.fam__cal-reset:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateX(-2px);
}
.fam__cal-reset[hidden] {
  display: none;
}
.fam__cal-detail-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fam__cal-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 11px 13px;
  backdrop-filter: blur(4px);
}
.fam__cal-item-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.fam__cal-item-date {
  display: block;
  font-size: 0.74rem;
  opacity: 0.7;
  font-weight: 600;
}
.fam__cal-item-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.35;
}
.fam__cal-item-desc {
  display: block;
  font-size: 0.78rem;
  opacity: 0.72;
  line-height: 1.45;
  margin-top: 3px;
}
.fam__cal-empty {
  font-size: 0.9rem;
  opacity: 0.75;
}
.fam {
  /* El icono del evento sustituye al punto de color: dice el color Y de qué va,
     en el mismo espacio. El punto seguía siendo legible solo con la leyenda
     delante, y aquí la leyenda queda a media pantalla de distancia.

     ⚠️ La pastilla es CLARA y el glifo lleva el color oscurecido, no al revés.
     Con el color a fondo entero y el glifo blanco, dos de los cinco tipos
     quedaban ilegibles: blanco sobre el ámbar #f5b400 da 1.86:1 y sobre el
     cyan #46bdc6 da 2.24:1, cuando un icono con significado necesita 3:1.
     Con esta vuelta el peor caso (ámbar) sube a 3.3:1 y el resto pasa de 5:1,
     y el tipo se sigue reconociendo por el color del glifo. Es la misma regla
     que `colorMateria()['oscuro']` en los horarios. */
}
.fam__cal-item-ico {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #fff;
  color: color-mix(in srgb, var(--ev-color, #4d8abb) 74%, var(--pal-tinta));
  font-size: 0.8rem;
  box-shadow: 0 3px 10px -4px rgba(0, 0, 0, 0.5);
}
.fam__cal-item-nivs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

/* ── Etiqueta de nivel ────────────────────────────────
   La misma pieza en las tarjetas de aviso, el detalle del día y la lista del ciclo:
   es siempre el mismo dato, así que no puede verse de tres maneras. Hereda el color
   del texto de donde esté (tarjeta clara u oscura) en vez de fijar uno. */
.fam-nivtag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid currentColor;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  /* .75 sobre `--col-herencia` daba 4.45:1 en la tarjeta clara — por debajo del
     mínimo AA para 10,6px. .85 la deja en 5,8:1 y no cambia nada en la oscura. */
  opacity: 0.85;
  white-space: nowrap;
}

/* =========================================================
   BARRA DE FILTROS DEL CALENDARIO
========================================================= */
.fam-calbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 22px;
  padding: 14px 16px;
  background: var(--p-superficie);
  border: 1px solid var(--col-borde);
  border-radius: 18px;
  box-shadow: 0 10px 26px -20px rgba(22, 32, 46, 0.35);
}
.fam-calbar__niveles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fam-calbar__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.fam-calbar {
  /* ── EL CICLO, como rótulo de la sección ──
     Era la coletilla de la letra pequeña, a 12px y con `opacity:.85` detrás de un
     punto medio: el dato que enmarca TODO el calendario tenía menos peso visual que
     los chips de nivel de encima. Ahora ocupa su propia fila y sube a 1.05rem con el
     año en negrita — la jerarquía de la sección pasa a ser ciclo → filtros → nota. */
}
.fam-calbar__ciclo {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding-top: 13px;
  border-top: 1px dashed var(--col-borde);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--p-titulo);
}
.fam-calbar__ciclo i {
  color: var(--p-acento);
  font-size: 0.9em;
}
.fam-calbar__ciclo {
  /* ⚠️ 1.2rem y no 1.12rem, y el motivo es de contraste además de jerárquico:
     `--col-bilbao` (#4D8ABB) da **3.70:1** sobre blanco, que solo es válido como
     TEXTO GRANDE — y en negrita eso empieza en 18.66px. A 1.12rem (17.9px) se
     quedaba justo por debajo del umbral; a 1.2rem (19.2px) entra. De paso el
     rótulo del ciclo, que enmarca todo el calendario, pesa más que los chips de
     nivel que tiene encima, que es la jerarquía que se buscaba. */
}
.fam-calbar__ciclo strong {
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--p-acento);
}
.fam-calbar {
  /* La letra pequeña que explica por qué un filtro de Kinder sigue mostrando la
     junta general. Solo se enseña CON un filtro puesto (lo alterna el JS): sin
     filtro no explicaba nada y competía con el rótulo del ciclo.
     ⚠️ Tiene `display` propio, así que necesita su `&[hidden]`: `[hidden]{display:none}`
     vive en `base/_normalize.scss`, misma especificidad y capa anterior, y sin esta
     línea el `flex` gana y la nota sale siempre. */
}
.fam-calbar__nota {
  flex: 1 0 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-top: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--p-titulo);
  /* .75 dejaba la letra pequeña en 4.45:1 a 12px, justo por debajo de AA. */
  opacity: 0.85;
}
.fam-calbar__nota i {
  color: var(--cal-evento);
}
.fam-calbar__nota[hidden] {
  display: none;
}

/* Chip de nivel. Selección MÚLTIPLE, así que se leen como interruptores y no como
   pestañas: el estado encendido es relleno sólido, no solo un subrayado.

   ⚠️ El relleno sólido dice «activo», no dice «puedo marcar varios»: con seis
   pastillas idénticas en fila, la primera lectura es la de un grupo de pestañas
   excluyentes. Lo desambigua la PALOMA que aparece al encender un nivel —el
   afordance universal de casilla— y el que «Todo el colegio» se vea de otra
   especie (ver abajo): si los seis se encendieran igual, no habría forma de
   anticipar que uno apaga a los otros cinco. */
.fam-nivchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 15px;
  border-radius: 100px;
  border: 1.5px solid var(--col-borde);
  background: var(--p-superficie);
  color: var(--p-titulo);
  font-size: 0.8rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.fam-nivchip:hover {
  border-color: var(--p-acento);
  color: var(--p-acento);
}
.fam-nivchip:focus-visible {
  outline: 2px solid var(--p-acento);
  outline-offset: 2px;
}
.fam-nivchip.is-on {
  background: var(--col-bilbao);
  border-color: var(--col-bilbao);
  color: #fff;
}
.fam-nivchip {
  /* Paloma de «marcado». Font Awesome 6 va como webfont (lo carga el layout),
     así que el glifo se puede pintar desde CSS sin tocar el markup ni el JS.
     Solo en los chips de nivel: el de «todo» no es una casilla que se marca. */
}
.fam-nivchip[data-nivel]:not([data-nivel=""]).is-on::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.66em;
  line-height: 1;
  margin-right: -1px;
}
.fam-nivchip {
  /* ── «Todo el colegio» = estado SIN filtro ──
     Ni es un nivel más ni se suma a los demás: apaga la selección. Por eso su
     estado activo es un tinte suave con tinta oscura y no el relleno sólido de
     los niveles — activo, sí, pero de otra naturaleza — y una línea lo separa
     del grupo que sí es multi-selección. */
}
.fam-nivchip[data-nivel=""] {
  position: relative;
  margin-right: 15px;
}
.fam-nivchip[data-nivel=""].is-on {
  background: color-mix(in srgb, var(--col-bilbao) 14%, var(--p-superficie));
  border-color: color-mix(in srgb, var(--col-bilbao) 55%, var(--p-superficie));
  color: var(--pal-tinta);
}
.fam-nivchip[data-nivel=""]::after {
  content: "";
  position: absolute;
  right: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 58%;
  background: rgba(55, 76, 105, 0.22);
}

/* Conmutador mes ↔ ciclo. Dos estados excluyentes sobre el mismo dato, así que va
   como segmented control y no como dos botones sueltos. */
.fam-calvista {
  display: inline-flex;
  padding: 3px;
  border-radius: 100px;
  background: #eef3f9;
  border: 1px solid var(--col-borde);
}
.fam-calvista__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--p-titulo);
  font-size: 0.78rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.fam-calvista__btn:focus-visible {
  outline: 2px solid var(--p-acento);
  outline-offset: 2px;
}
.fam-calvista__btn {
  /* `--col-bilbao` (#4D8ABB) da 3.7:1 sobre blanco: vale para un titular de
     27px, no para una etiqueta de 12,5px. El azul institucional oscuro llega
     a 7.1:1 y además hace que la opción activa pese más que la inactiva. */
}
.fam-calvista__btn.is-on {
  background: #fff;
  color: #1f5a94;
  box-shadow: 0 2px 8px -3px rgba(22, 32, 46, 0.4);
}

/* Descarga del ciclo en PDF. Solo existe si el módulo Eventos lo habilitó.

   ⚠️ Botón de contorno, y NO una pastilla rellena.
   Iba en cyan sólido (`--cal-entrega`), que trae dos problemas: era lo más
   llamativo de la barra y le ganaba la primera mirada al conmutador de vista
   —que es el control que decide qué se está mirando, mientras que la descarga es
   una salida de la página—, y ese cyan es además el color que la leyenda de
   debajo asigna a los eventos de tipo «Académico»: un color con significado
   gastado en una acción que no lo tiene. Con el contorno azul institucional se
   lee como acción sin competir, y el relleno se reserva para el hover.
   El azul #1f5a94 da 7.1:1 sobre blanco (y el blanco 7.1:1 sobre él al rellenar);
   `--col-bilbao` se queda en 3.7:1 y no sirve para texto de 12,5px. */
.fam-caldesc {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 17px;
  border-radius: 100px;
  background: var(--p-superficie);
  border: 1.5px solid color-mix(in srgb, var(--col-bilbao) 60%, var(--p-superficie));
  color: #1f5a94;
  font-size: 0.78rem;
  font-weight: 800;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.fam-caldesc:hover {
  background: #1f5a94;
  border-color: #1f5a94;
  color: #fff;
  transform: translateY(-1px);
}
.fam-caldesc:focus-visible {
  outline: 2px solid var(--p-acento);
  outline-offset: 2px;
}

/* =========================================================
   VISTA DE CICLO COMPLETO (doce meses)
========================================================= */
.fam-ciclo {
  display: block;
  /* ⚠️ Con `display` propio, su propio `&[hidden]` — ver la nota de
     `.fam__cal-wrap`, que es exactamente el mismo caso. */
}
.fam-ciclo[hidden] {
  display: none;
}
.fam-ciclo__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}
.fam-ciclo__titulo {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--p-acento);
  margin: 0;
}
.fam-ciclo__meta {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--p-titulo);
  opacity: 0.85; /* .7 daba 3.9:1 a 12,8px */
}
.fam-ciclo {
  /* Cuatro columnas en escritorio: los doce meses del curso caben en tres filas,
     que es lo que hace que esta vista sirva para "verlo todo de una vez".
     `align-items: start` y no el estirado por defecto: con doce meses de contenido
     muy desigual, igualar alturas deja media tarjeta en blanco bajo las listas
     cortas y engorda la fila entera a la medida del mes más cargado. */
}
.fam-ciclo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: start;
  gap: 16px;
}
.fam-ciclo__vacio {
  margin-top: 20px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--p-titulo);
  opacity: 0.85; /* .75 se queda en 4.45:1 */
}
.fam-ciclo__vacio[hidden] {
  display: none;
}

/* Tarjeta de un mes: mini-rejilla + lista de sus eventos.
   La lista NO es redundante con la rejilla: en una celda de 26px solo cabe un punto
   de color, y el evento hay que poder leerlo.

   ⚠️ Doce tarjetas iguales son un muro. Lo que las separa es el CONTRASTE DE PESO,
   no el adorno: la tarjeta es plana (borde de 1px, sin sombra — doce sombras juntas
   solo ensucian), los días sin evento no dibujan ninguna baldosa, y el mes sin nada
   que contar se apaga entero. Así lo único con color en toda la pantalla son los
   días marcados, que es exactamente lo que se viene a buscar. */
.fam-cmes {
  background: var(--p-superficie);
  border: 1px solid var(--col-borde);
  border-radius: 18px;
  padding: 14px;
}
.fam-cmes__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--col-borde);
}
.fam-cmes {
  /* Es el ancla de lectura de la vista: en doce tarjetas, el nombre del mes es lo
     que se recorre. A 0.92rem competía con la lista de debajo. */
}
.fam-cmes__titulo {
  font-size: 1rem;
  font-weight: 900;
  color: var(--pal-tinta);
  margin: 0;
  letter-spacing: -0.2px;
}
.fam-cmes__titulo span {
  font-weight: 600;
  opacity: 0.5;
  font-size: 0.8em;
}
.fam-cmes {
  /* Tinte + tinta oscura: el blanco sobre `--col-bilbao` se queda en 3.7:1, y
     doce pastillas azules sólidas eran doce puntos de atención repetidos que no
     jerarquizan nada — la cifra importa dentro de su tarjeta, no en la página. */
}
.fam-cmes__count {
  flex-shrink: 0;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--col-bilbao) 16%, var(--p-superficie));
  color: #1f5a94;
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
}
.fam-cmes__dow, .fam-cmes__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.fam-cmes__dow {
  margin-bottom: 4px;
}
.fam-cmes__dow span {
  text-align: center;
  font-size: 0.64rem; /* 9,6px era ilegible incluso pasando contraste */
  font-weight: 800;
  color: var(--p-titulo);
  opacity: 0.8; /* .5 daba 2.5:1 */
}
.fam-cmes__cell {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 7px;
  /* Sin baldosa. Treinta recuadros grises por tarjeta × doce tarjetas eran
     una textura que competía con los pocos días que sí llevan información. */
  background: transparent;
  color: var(--p-titulo);
  font-size: 0.66rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0;
}
.fam-cmes__cell--empty {
  color: transparent;
}
.fam-cmes__cell.is-today {
  box-shadow: inset 0 0 0 1.5px var(--cal-evento);
}
.fam-cmes__cell {
  /* Día con evento: se tiñe del color de su tipo. La tinta blanca no sirve
     sobre los tres claros de la paleta, así que el contraste lo da un velo
     del color al 18% con la tinta institucional encima — legible con los diez.
     ⚠️ La tinta es `--pal-tinta` y NO `--col-bilbao`: sobre el velo ámbar,
     ese azul se quedaba en 3.25:1 con una cifra de 10,5px, justo el caso que
     el velo venía a resolver. Con la tinta oscura el peor caso es 14:1. */
}
.fam-cmes__cell.has-event {
  cursor: pointer;
  background: color-mix(in srgb, var(--ev-color) 18%, var(--p-superficie));
  color: var(--pal-tinta);
  font-weight: 900;
  box-shadow: inset 0 0 0 1.5px var(--ev-color);
  transition: background 0.16s ease;
}
.fam-cmes__cell.has-event:hover {
  background: color-mix(in srgb, var(--ev-color) 34%, var(--p-superficie));
}
.fam-cmes__cell.has-event:focus-visible {
  outline: 2px solid var(--pal-tinta);
  outline-offset: 1px;
}
.fam-cmes__cell {
  /* Seleccionado: el mismo velo más saturado y el anillo al doble, no el color
     a fondo entero — ahí la cifra volvía a ser blanca sobre ámbar (1.9:1). */
}
.fam-cmes__cell.is-sel {
  background: color-mix(in srgb, var(--ev-color) 45%, var(--p-superficie));
  box-shadow: inset 0 0 0 2.5px var(--ev-color);
  color: var(--pal-tinta);
}
.fam-cmes {
  /* Segundo evento del día en adelante. Un punto y no un número: la cifra exacta
     no cambia ninguna decisión y en 26px compite con el día. */
}
.fam-cmes__mas {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.65;
}
.fam-cmes__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px dashed var(--col-borde);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fam-cmes__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 7px;
  border-radius: 10px;
  transition: background 0.18s ease;
  /* Resalte al pulsar su día en la mini-rejilla. */
}
.fam-cmes__item.is-hit {
  background: color-mix(in srgb, var(--ev-color) 15%, var(--p-superficie));
}
.fam-cmes {
  /* Mismo criterio que la celda: velo del color + anillo + tinta oscura. El día
     en blanco sobre el color a fondo entero era 1.9:1 en ámbar y 2.2:1 en cyan,
     y aquí el dato ES la cifra. */
}
.fam-cmes__dia {
  flex-shrink: 0;
  min-width: 26px;
  padding: 2px 5px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ev-color, #4d8abb) 22%, var(--p-superficie));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ev-color, #4d8abb) 70%, var(--p-superficie));
  color: var(--pal-tinta);
  font-size: 0.68rem;
  font-weight: 800;
  text-align: center;
  line-height: 1.45;
}
.fam-cmes {
  /* El glifo va oscurecido por la misma razón que el de la ficha del día: el
     ámbar y el cyan puros sobre blanco no llegan ni al 3:1 de un icono. */
}
.fam-cmes__ico {
  flex-shrink: 0;
  color: color-mix(in srgb, var(--ev-color, #4d8abb) 74%, var(--pal-tinta));
  font-size: 0.76rem;
  line-height: 1.6;
}
.fam-cmes {
  /* 11,8px en `--col-bilbao` (3.7:1) era el texto menos legible de la página, y
     es el que dice de qué va el evento. 12,8px sobre tinta = 16:1. */
}
.fam-cmes__txt {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pal-tinta);
}
.fam-cmes__nivs {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--p-titulo);
  opacity: 0.85; /* .65 daba 3.5:1 a 10,2px */
  margin-top: 2px;
}
.fam-cmes__sin {
  margin: 10px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--p-titulo);
  opacity: 0.8; /* .5 daba 2.5:1 */
  text-align: center;
}

/* ── El mes sin eventos se aparta del camino ──
   Doce tarjetas idénticas obligan a leer las doce para encontrar las que tienen
   algo. Un mes vacío conserva su rejilla —«no hay nada en octubre» es información,
   y quitarlo rompería la retícula del curso— pero baja de peso: sin fondo, sin
   sombra y con el número del día atenuado. El ojo aterriza solo en los que cuentan.
   `:has()` porque la diferencia la marca el contenido que pinta el JS, y no hay
   ninguna clase que lo anuncie; sin soporte, todas las tarjetas se ven como antes. */
@supports selector(:has(*)) {
  .fam-cmes:has(.fam-cmes__sin) {
    background: transparent;
    border-style: dashed;
    border-color: color-mix(in srgb, var(--col-borde) 70%, transparent);
    /* ⚠️ Baja de peso la SUPERFICIE, nunca la tinta de los números.
       Atenuar la rejilla con `opacity` dejaba las cifras en 2-3:1, y un texto
       por debajo de AA no se arregla diciendo que ahí no hay nada que leer.
       La tarjeta pierde fondo y el título baja de negro a gris (8.7:1): la
       diferencia de peso se ve a un metro y todo sigue siendo legible. */
  }
  .fam-cmes:has(.fam-cmes__sin) .fam-cmes__titulo {
    color: var(--p-titulo);
    font-weight: 800;
  }
  .fam-cmes:has(.fam-cmes__sin) .fam-cmes__head {
    border-bottom-color: transparent;
  }
}
/* ── TARJETA DE AVISO · «entrada de agenda» ─────────────────────────────────
   Era una tarjeta blanca con un filete de color de 5px ARRIBA: el patrón más repetido
   que existe, y el color —que es lo único que distingue de un vistazo un festivo de
   una junta— quedaba reducido a cuatro píxeles en el borde superior, que es justo
   donde no se mira. Con once avisos seguidos la sección se leía como once rectángulos
   iguales.

   Ahora la fecha es un TALÓN de color a la izquierda, con su troquelado, y el icono
   del tipo va de marca de agua al fondo. El color pasa de borde a superficie, que es
   lo que permite reconocer el tipo desde lejos — que es lo que una familia hace al
   pasar la vista por la lista.

   ⚠️ El talón lleva SIEMPRE el color a fondo y texto blanco, y eso obliga a tinta
   oscura sobre los tres claros de la paleta (ámbar, lima, turquesa), donde el blanco
   no llega a AA. Se resuelve con `color-mix` contra `--pal-tinta`: el talón se
   oscurece lo justo para que el blanco valga en los diez colores, y el tono se
   reconoce igual. Es la misma regla del PDF y de la rejilla de horarios. */
.fam-aviso {
  position: relative;
  display: flex;
  gap: 0;
  background: var(--p-superficie);
  border: 1px solid var(--col-borde);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 26px -18px rgba(22, 32, 46, 0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fam-aviso:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 44px -22px rgba(22, 32, 46, 0.42);
}
.fam-aviso {
  /* Página distinta del paginador. `display:none` y no `opacity`: una tarjeta
     transparente sigue ocupando su hueco en la rejilla. */
}
.fam-aviso.is-page-hidden {
  display: none;
}
.fam-aviso {
  /* ── El talón ── */
}
.fam-aviso__stub {
  position: relative;
  flex-shrink: 0;
  width: 84px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1;
  /* ⚠️ Fondo y tinta los decide PHP (`Evento::parLegible()`), no el CSS. Aquí
     había un `color-mix(… 88%, --pal-tinta)` con texto blanco fijo, y eso NO
     llega a AA en 6 de los 10 colores de la paleta: sobre ámbar el blanco se
     queda en 1.8:1. Un `color-mix` mezcla a ciegas —no sabe si el resultado se
     lee—, y oscurecer lo bastante para salvar el ámbar borra el color. El mes
     va a 10,9px, o sea texto pequeño: el listón es 4.5:1, no 3:1. */
  color: var(--aviso-ink, #fff);
  background: var(--aviso-stub-bg, var(--aviso-color, var(--col-bilbao)));
  /* Troquelado: la línea de puntos que separa el talón del cuerpo, como en una
     entrada. Va con `radial-gradient` repetido y no con un borde punteado
     porque los puntos tienen que morder el fondo blanco del cuerpo, no pintarse
     encima de él. */
}
.fam-aviso__stub::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -5px;
  width: 10px;
  background: radial-gradient(circle at 50% 5px, var(--p-superficie) 4px, transparent 4.5px) 0 0/10px 14px repeat-y;
}
.fam-aviso__day {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.fam-aviso__month {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.92;
}
.fam-aviso {
  /* Un evento de varios días lo dice en el talón: «del 20 al 6» es parte de CUÁNDO,
     y en el cuerpo del texto se perdía. */
}
.fam-aviso__hasta {
  margin-top: 5px;
  padding-top: 5px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-top: 1px solid color-mix(in srgb, var(--aviso-ink, #fff) 35%, transparent);
  opacity: 0.95;
}
.fam-aviso {
  /* ── El cuerpo ── */
}
.fam-aviso__body {
  position: relative;
  z-index: 1; /* por encima de la marca de agua */
  flex: 1;
  min-width: 0;
  padding: 16px 18px 16px 22px;
}
.fam-aviso__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 11px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--aviso-color) 14%, var(--p-superficie));
  /* Tinta derivada al **45%**, que es el suelo `ev-tinta` del proyecto. Con 62%
     el ámbar sobre su propio velo se queda en 3.4:1 y esto es texto de 11,2px. */
  color: color-mix(in srgb, var(--aviso-color, var(--col-bilbao)) 45%, var(--pal-tinta));
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.fam-aviso {
  /* ⚠️ El título NO va en `--col-bilbao` (#4D8ABB): sobre blanco da **3.70:1** y a
     16,3px no cuenta como texto grande, así que no pasa AA. La jerarquía con el
     cuerpo la llevan el tamaño y el peso (1.02rem/800 frente a .86rem/400), no el
     color —que es como se resuelve en el resto del sitio—. */
}
.fam-aviso__title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--p-titulo);
  margin-bottom: 6px;
  line-height: 1.25;
}
.fam-aviso__text {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--p-titulo);
}
.fam-aviso {
  /* Marca de agua del icono del tipo. Es DECORACIÓN —la pastilla ya nombra el
     tipo—, así que va muy tenue y con `aria-hidden` en el markup: sube el carácter
     de la tarjeta sin competir con el título. */
}
.fam-aviso__marca {
  position: absolute;
  right: -10px;
  bottom: -16px;
  font-size: 5.2rem;
  line-height: 1;
  color: color-mix(in srgb, var(--aviso-color, var(--col-bilbao)) 9%, transparent);
  pointer-events: none;
  transition: transform 0.3s ease;
}
.fam-aviso:hover .fam-aviso__marca {
  transform: rotate(-8deg) scale(1.06);
}
.fam-aviso {
  /* A qué niveles va dirigido. Solo aparece cuando el evento acota: un chip
     «Todo el colegio» en cada tarjeta sería ruido en la mayoría de ellas. */
}
.fam-aviso__nivs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
  color: var(--p-titulo);
}
@media (max-width: 420px) {
  .fam-aviso__stub {
    width: 68px;
    padding: 14px 6px;
  }
  .fam-aviso__day {
    font-size: 1.45rem;
  }
  .fam-aviso__body {
    padding: 14px 14px 14px 18px;
  }
  .fam-aviso__marca {
    font-size: 4rem;
  }
}

/* ── Paginador de avisos ──
   Un ciclo completo son ~40 tarjetas; de seis en seis, la sección deja de enterrar el
   calendario. Discreto a propósito: es navegación dentro de una lista, no una acción
   de la página. */
.fam-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 22px;
}
.fam-pager__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--col-borde);
  background: var(--p-superficie);
  color: var(--p-acento);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.fam-pager__btn:hover:not(:disabled) {
  border-color: var(--p-acento);
  transform: translateY(-2px);
}
.fam-pager__btn {
  /* Deshabilitado, no oculto: que el botón siga ahí es lo que dice que estás en
     el extremo de la lista y no que la lista haya cambiado de forma. */
}
.fam-pager__btn:disabled {
  opacity: 0.38;
  cursor: default;
}
.fam-pager__info {
  min-width: 58px;
  text-align: center;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--p-titulo);
}

@keyframes fam-bob {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
@media (max-width: 820px) {
  .fam__cal-wrap {
    grid-template-columns: 1fr;
  }
  .fam__hero-inner {
    flex-direction: column;
    text-align: center;
  }
  .fam__hero-chips {
    justify-content: center;
  }
  .fam__hero-img {
    width: 220px;
  }
  .fam__hero-halo {
    width: 250px;
    height: 250px;
  }
}
/* ── Ciclo completo: la rejilla baja de columnas antes que el resto ──
   Doce tarjetas con mini-calendario dentro necesitan ~240px de ancho útil cada una;
   a cuatro columnas eso se rompe mucho antes de los 820px del resto de la página. */
@media (max-width: 1180px) {
  .fam-ciclo__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .fam-ciclo__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .fam-ciclo__grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  /* La barra pasa a columna: los chips de nivel son seis y, apretados junto al
     conmutador y la descarga, quedaban en dos líneas rotas a media palabra. */
  .fam-calbar {
    flex-direction: column;
    align-items: stretch;
  }
  .fam-calbar__acciones {
    justify-content: space-between;
  }
  .fam-calvista__btn {
    flex: 1;
    justify-content: center;
  }
  /* ⚠️ Objetivo táctil de 44px en TODOS los controles de la barra.
     Esta página se consulta sobre todo desde el móvil de un padre o una madre,
     y los seis chips de nivel medían 35px de alto, el conmutador 33 y la
     descarga 37: por debajo del estándar real, y además pegados entre sí. */
  .fam-nivchip,
  .fam-calvista__btn,
  .fam-caldesc {
    min-height: 44px;
  }
  .fam-calvista {
    padding: 2px;
  }
  .fam__cal-reset {
    min-height: 40px;
  }
}
@media (max-width: 400px) {
  /* A este ancho el conmutador y la descarga no caben en la misma fila. */
  .fam-calbar__acciones {
    flex-direction: column;
    align-items: stretch;
  }
  .fam-caldesc {
    justify-content: center;
  }
}
/* ── Tarjeta de mes: se adapta a SU ancho, no al del viewport ──
   En una sola columna (≤560px) la tarjeta pasa a medir 300-500px, y con la
   rejilla estirada a todo el ancho las casillas llegaban a 68px para alojar una
   cifra de 10px: un mes ocupaba media pantalla de alto y los doce se volvían un
   scroll interminable. Como el ancho de la tarjeta depende del número de columnas
   y no del viewport, la media query no puede saberlo — esto es exactamente para lo
   que existen las container queries.
   Sin soporte, la tarjeta se queda como estaba: legible, solo que más suelta. */
@supports (container-type: inline-size) {
  .fam-cmes {
    container-type: inline-size;
  }
  @container (min-width: 290px) {
    /* La cifra del día crece con la tarjeta en vez de nadar en la casilla. */
    .fam-cmes__cell {
      font-size: clamp(0.66rem, 3.1cqi, 0.92rem);
    }
    .fam-cmes__dow span {
      font-size: clamp(0.64rem, 2.6cqi, 0.8rem);
    }
  }
  @container (min-width: 420px) {
    /* Rejilla contenida y centrada: por encima de este ancho, estirarla solo
       añade alto. El ancho sobrante se lo queda la lista, que pasa a dos
       columnas — que es donde el texto sí se aprovecha. */
    .fam-cmes__dow,
    .fam-cmes__grid {
      max-width: 340px;
      margin-inline: auto;
    }
    .fam-cmes__list {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-content: start;
      -moz-column-gap: 12px;
           column-gap: 12px;
    }
  }
}
/* ── ACCESO A ALGEBRAIX ───────────────────────── */
/* Puerta al sistema de gestión que las familias ya usan. Es la acción más buscada de
   la página, así que es UN solo objetivo grande y no una tarjeta más entre iguales:
   toda la pieza es el `<a>`, para que no haya forma de fallar el clic.

   Va en azul institucional sólido —no en la paleta de categorías— porque no es una
   categoría de contenido sino una salida del sitio, y el contraste con las tarjetas
   blancas de aviso y con el calendario es lo que la hace encontrable de un vistazo. */
.fam__section--alg {
  margin-top: 8px;
}

.fam-alg {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 22px 28px;
  border-radius: 26px;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(120deg, var(--col-herencia) 0%, var(--col-bilbao) 100%);
  box-shadow: 0 18px 38px -22px rgba(22, 32, 46, 0.65);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fam-alg:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 50px -24px rgba(22, 32, 46, 0.75);
}
.fam-alg {
  /* El foco va en blanco y por fuera: sobre el degradado azul, un outline del color
     de marca sería invisible. */
}
.fam-alg:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.fam-alg__art {
  position: relative;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
}
.fam-alg__halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.fam-alg__alex {
  position: relative;
  width: 84px;
  height: auto;
}
.fam-alg__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.fam-alg__pill {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border-radius: var(--radius-full, 100px);
  background: rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.fam-alg__title {
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.15;
}
.fam-alg {
  /* Blanco al 88%: el cuerpo tiene que ceder jerarquía al título sin bajar de AA
     sobre el azul. Por debajo de ~85% ya no pasa. */
}
.fam-alg__text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.fam-alg__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--radius-full, 100px);
  background: #fff;
  color: var(--col-herencia);
  font-size: 0.92rem;
  font-weight: 800;
  white-space: nowrap;
  transition: gap 0.25s ease;
}
.fam-alg:hover .fam-alg__cta {
  gap: 16px;
}

/* Móvil: el CTA no cabe en la misma fila que el texto y partirlo lo dejaría en dos
   líneas. Pasa a bloque a ancho completo, que además agranda el objetivo táctil. */
@media (max-width: 720px) {
  .fam-alg {
    grid-template-columns: auto 1fr;
    gap: 16px 18px;
    padding: 20px;
  }
  .fam-alg__art {
    width: 72px;
    height: 72px;
  }
  .fam-alg__alex {
    width: 64px;
  }
  .fam-alg__title {
    font-size: 1.25rem;
  }
  .fam-alg__cta {
    grid-column: 1/-1;
    justify-content: center;
  }
}
@media (max-width: 400px) {
  .fam-alg {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .fam-alg__art {
    justify-self: center;
  }
  .fam-alg__pill {
    justify-self: center;
  }
}
/* =========================================================
   TEMA OSCURO
   Lo que no se resuelve con un token porque en claro vale otra cosa. El hero, la
   banda de Algebraix y el detalle del día ya son azul noche en los dos temas y no se
   tocan. La regla de fondo es la misma que en claro, dada la vuelta: donde en claro
   hay «velo del color + tinta oscura», aquí hay «velo del color sobre la superficie
   + tinta clara»; y los glifos que en claro se OSCURECEN hacia `--pal-tinta` aquí se
   ACLARAN hacia blanco, porque un color de la paleta a pelo sobre `#0F2439` no llega
   al 3:1 en índigo ni en morado.
   Cifras sobre `--p-superficie` (#0F2439), peor caso de los diez colores:
   - velo 18/34/45 % + `--p-titulo` → 9,7 / 6,6 / 5,0:1 (ámbar, el más claro)
   - tinta de la pastilla, color 55 % + blanco sobre su velo al 14 % → ≥5,8:1
   - glifo, color 70 % + blanco → ≥4,5:1 (índigo)
========================================================= */
[data-theme=dark] {
  /* El subtítulo iba en `--col-herencia` al 80 %: en oscuro se aclara, pero a esa
     opacidad pesaba casi como el título. Texto suave a pelo. */
}
[data-theme=dark] .fam__section-sub {
  color: var(--p-texto-suave);
  opacity: 1;
}
[data-theme=dark] {
  /* Sombras con tinta azul: sobre el azul noche no se ven. */
}
[data-theme=dark] .fam-calbar {
  box-shadow: 0 10px 26px -20px var(--p-sombra);
}
[data-theme=dark] .fam-aviso {
  box-shadow: 0 10px 26px -18px var(--p-sombra);
}
[data-theme=dark] .fam-aviso:hover {
  box-shadow: 0 22px 44px -22px var(--p-sombra);
}
[data-theme=dark] .fam-alg {
  box-shadow: 0 18px 38px -22px rgba(0, 0, 0, 0.7);
}
[data-theme=dark] .fam-alg:hover {
  box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.8);
}
[data-theme=dark] {
  /* ── Barra de filtros ── */
}
[data-theme=dark] .fam-nivchip[data-nivel=""].is-on {
  color: var(--p-titulo);
}
[data-theme=dark] .fam-nivchip[data-nivel=""]::after {
  background: var(--p-linea);
}
[data-theme=dark] {
  /* Carril hundido y opción activa en relieve, como en claro: el carril baja al
     fondo de página y la opción elegida sube a superficie teñida con anillo de
     acento. «Elegido» no depende del matiz: cambian a la vez fondo, tinta y anillo. */
}
[data-theme=dark] .fam-calvista {
  background: var(--p-fondo);
}
[data-theme=dark] .fam-calvista__btn {
  color: var(--p-texto-suave);
}
[data-theme=dark] .fam-calvista__btn.is-on {
  background: color-mix(in srgb, var(--p-acento) 16%, var(--p-superficie));
  color: var(--p-acento);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--p-acento) 45%, transparent), 0 2px 8px -3px var(--p-sombra);
}
[data-theme=dark] {
  /* El azul #1f5a94 es tinta para fondo claro (sobre #0F2439 da 2,2:1). En oscuro
     la descarga es contorno de acento y, al pasar, se rellena de acento con tinta
     oscura (8,5:1). */
}
[data-theme=dark] .fam-caldesc {
  border-color: color-mix(in srgb, var(--p-acento) 50%, transparent);
  color: var(--p-acento);
}
[data-theme=dark] .fam-caldesc:hover {
  background: var(--p-acento);
  border-color: var(--p-acento);
  color: var(--pal-tinta);
}
[data-theme=dark] {
  /* ── Ciclo completo ── */
}
[data-theme=dark] .fam-cmes__titulo {
  color: var(--p-titulo);
}
[data-theme=dark] .fam-cmes__count {
  color: var(--p-acento);
}
[data-theme=dark] .fam-cmes {
  /* El día sin evento en texto suave (7:1) y el que lo tiene en titular: en
     claro la diferencia la hace el velo, pero sobre fondo oscuro treinta cifras
     casi blancas pesaban tanto como las pocas que llevan algo. */
}
[data-theme=dark] .fam-cmes__cell {
  color: var(--p-texto-suave);
}
[data-theme=dark] .fam-cmes__cell.has-event, [data-theme=dark] .fam-cmes__cell.is-sel, [data-theme=dark] .fam-cmes__dia, [data-theme=dark] .fam-cmes__txt {
  color: var(--p-titulo);
}
[data-theme=dark] .fam-cmes__cell.has-event:focus-visible {
  outline-color: var(--p-titulo);
}
[data-theme=dark] .fam-cmes__ico {
  color: color-mix(in srgb, var(--ev-color, #4d8abb) 70%, #fff);
}
[data-theme=dark] {
  /* El mes vacío baja el título a texto suave (en claro, de tinta a herencia). */
}
@supports selector(:has(*)) {
  [data-theme=dark] .fam-cmes:has(.fam-cmes__sin) .fam-cmes__titulo {
    color: var(--p-texto-suave);
  }
}
[data-theme=dark] {
  /* ── Tarjeta de aviso ── */
}
[data-theme=dark] .fam-aviso__pill {
  color: color-mix(in srgb, var(--aviso-color, var(--col-bilbao)) 55%, #fff);
}
[data-theme=dark] .fam-aviso__text {
  color: var(--p-texto);
}
[data-theme=dark] .fam-aviso {
  /* Al 9 % la marca de agua desaparecía sobre la superficie oscura. */
}
[data-theme=dark] .fam-aviso__marca {
  color: color-mix(in srgb, var(--aviso-color, var(--col-bilbao)) 16%, transparent);
}

/* ── Movimiento reducido ──
   El hero balancea a Alex en bucle (`fam-bob`, 3,4s infinito) y las tarjetas de
   aviso se levantan y se giran al pasar por encima. Es una animación permanente en
   pantalla, justo lo que `prefers-reduced-motion` viene a apagar; el GSAP de la
   página ya lo respetaba, el CSS no. Reducido no es inmóvil: los cambios de color
   y de fondo se conservan, solo desaparece el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .fam__hero-img {
    animation: none;
  }
  .fam-aviso:hover {
    transform: none;
  }
  .fam-alg:hover {
    transform: none;
  }
  .fam-alg:hover .fam-alg__cta {
    gap: 10px;
  }
  .fam-caldesc:hover,
  .fam__cal-reset:hover {
    transform: none;
  }
}
/* =========================================================
   .bilbao-cal — calendario reutilizable
   Lo comparten Comunidad › Familias (sitio público) y el panel (home, calendario,
   agenda y tablero de suplencias), así que va en las DOS hojas. Vivía dentro de
   _comunidad-familias.scss; se separó al partir el CSS por superficie.
========================================================= */
/* Colores por tipo de evento (compartidos con el calendario de cumpleaños) */
:root {
  --cal-festivo: #e51022;
  --cal-evento: #4285f4;
  --cal-junta: #aa2296;
  --cal-entrega: #46bdc6;
  --cal-evaluacion: #fc6722;
  --cal-suspension: #f5b400;
  --cal-cumple: #fc6722;
}

.bilbao-cal {
  background: var(--p-superficie, #fff);
  border: 1px solid var(--col-borde);
  border-radius: 24px;
  padding: 22px;
  box-shadow: 0 12px 30px -20px rgba(22, 32, 46, 0.35);
}
.bilbao-cal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.bilbao-cal__month {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--p-acento, var(--col-bilbao));
  text-transform: capitalize;
}
.bilbao-cal__nav {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--col-borde);
  background: var(--p-superficie, #fff);
  color: var(--p-acento, var(--col-bilbao));
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.bilbao-cal__nav:hover {
  background: var(--col-bilbao);
  color: #fff;
  border-color: var(--col-bilbao);
  transform: scale(1.06);
}
.bilbao-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.bilbao-cal__weekdays span {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--p-titulo, var(--col-herencia));
  opacity: 0.6;
}
.bilbao-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.bilbao-cal__cell {
  position: relative;
  aspect-ratio: 1;
  border: none;
  background: #f4f7fb;
  border-radius: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--p-titulo, var(--col-herencia));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background 0.18s ease, transform 0.18s ease, color 0.18s ease;
}
.bilbao-cal__cell--empty {
  background: transparent;
}
.bilbao-cal__cell.is-plain {
  color: #9fb0c4;
  background: #f8fafc;
}
.bilbao-cal__cell {
  /* Día con evento: fondo plano y anillo fino. El degradado anterior
     (linear-gradient 160deg + doble sombra) hacía que cada celda pareciera un
     botón en relieve y la rejilla entera se leía como un tablero de fichas. */
}
.bilbao-cal__cell.has-event {
  cursor: pointer;
  background: #eef4fc;
  color: var(--col-bilbao);
  font-weight: 800;
  box-shadow: inset 0 0 0 1.5px rgba(66, 103, 172, 0.28);
  /* El hover ya no desplaza ni escala: con `translateY(-4px) scale(1.06)`
     la celda invadía a sus vecinas y la rejilla parecía saltar. */
}
.bilbao-cal__cell.has-event:hover {
  background: #e2ecfa;
  box-shadow: inset 0 0 0 2px var(--col-bilbao);
}
.bilbao-cal__cell.is-today {
  box-shadow: inset 0 0 0 2px var(--cal-evento);
  color: var(--cal-evento);
}
.bilbao-cal__cell {
  /* Hoy Y con evento: antes `is-today` pisaba el anillo de `has-event` por
     orden de fuente y el día perdía la marca de que tenía algo. Se combinan. */
}
.bilbao-cal__cell.is-today.has-event {
  box-shadow: inset 0 0 0 2px var(--cal-evento), inset 0 0 0 4px var(--p-superficie, #fff);
  color: var(--cal-evento);
}
.bilbao-cal__cell.is-active {
  background: var(--col-bilbao);
  color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--col-bilbao);
}
.bilbao-cal__dots {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  display: flex;
  gap: 4px;
  justify-content: center;
}
.bilbao-cal {
  /* ⚠️ El color del punto llega POR `--c`, no por una clase modificadora.
     Los tipos de evento dejaron de ser cinco valores de un ENUM: ahora son filas de
     `evento_categorias` que el colegio crea y recolorea desde el panel, así que una
     regla por tipo dejaría sin color —punto invisible sobre blanco— a toda categoría
     nueva. Quien pinta el punto (PHP en la leyenda, JS en la rejilla) emite el hex
     que ya viene resuelto en el dato.
     El fallback gris no es decorativo: cubre el caso de un evento que apunta a una
     categoría borrada, que si no saldría sin marca ninguna en el día. */
}
.bilbao-cal__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  background: var(--c, #94a3b8);
  /* Los cumpleaños NO son una categoría de evento: son la otra fuente del mismo
     calendario y su color es fijo, así que conservan su modificador. */
}
.bilbao-cal__dot--cumple {
  background: var(--cal-cumple);
}
.is-active .bilbao-cal__dot {
  background: #fff !important;
}
.bilbao-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--col-borde);
}
.bilbao-cal__leg {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--p-titulo, var(--col-herencia));
  /* Mismo criterio que `__dot`: el color viene por `--c` desde el dato, porque las
     categorías se crean desde el panel. `data-type` se conserva —lo lee el JS del
     calendario público para filtrar— pero ya no decide el color. */
}
.bilbao-cal__leg i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  background: var(--c, #94a3b8);
}
.bilbao-cal__leg[data-type=cumple] i {
  background: var(--cal-cumple);
}
.bilbao-cal {
  /* ── Móvil ──
     El componente ya es fluido (siete columnas en `1fr` y celdas con `aspect-ratio`),
     pero el padding de 22px, el radio de 24 y la nav de 40px son fijos: en 360px se
     comían casi 60px de ancho útil y las celdas bajaban de 34px.
     Va aquí, a nivel de componente, y no en un partial del panel: `.bilbao-cal` la
     comparten Comunidad › Familias y cuatro pantallas del panel (cumpleaños, eventos,
     resumen diario, agenda de suplencias). Arreglarlo en un solo sitio las cubre
     todas y evita que las dos superficies se desincronicen. */
}
@media (max-width: 520px) {
  .bilbao-cal {
    padding: 12px;
    border-radius: 16px;
  }
  .bilbao-cal__nav {
    width: 36px;
    height: 36px;
  }
  .bilbao-cal__grid, .bilbao-cal__weekdays {
    gap: 4px;
  }
  .bilbao-cal__cell {
    border-radius: 10px;
    font-size: 0.85rem;
  }
  .bilbao-cal__weekdays span {
    font-size: 0.62rem;
    letter-spacing: 0.2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bilbao-cal__nav:hover {
    transform: none;
  }
}
/* ── Tema oscuro (solo sitio público) ──
   ⚠️ Este archivo va TAMBIÉN en intranet.css, donde no existen los `--p-*` ni hay
   nunca `data-theme`. Por eso arriba los tokens llevan su valor de siempre como
   respaldo (`var(--p-superficie, #fff)`) y lo que en claro vale otra cosa vive solo
   aquí, bajo `[data-theme="dark"]`: el panel queda idéntico.
   Mismo lenguaje que en claro, dado la vuelta: baldosa hundida, día con evento
   teñido de acento con anillo, y el día elegido RELLENO de acento con tinta oscura
   —el estado que más pesa invierte luminancia, no solo cambia de matiz—. */
[data-theme=dark] .bilbao-cal {
  box-shadow: 0 12px 30px -20px var(--p-sombra);
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell {
  background: var(--p-superficie-alt);
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell--empty {
  background: transparent;
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell {
  /* Días sin nada: se apartan, pero la cifra sigue siendo legible (4,9:1). */
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell.is-plain {
  background: color-mix(in srgb, var(--p-superficie-alt) 35%, var(--p-superficie));
  color: color-mix(in srgb, var(--p-texto-suave) 80%, var(--p-superficie));
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell.has-event {
  background: color-mix(in srgb, var(--p-acento) 18%, var(--p-superficie));
  color: var(--p-acento);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--p-acento) 45%, transparent);
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell.has-event:hover {
  /* 24 % y no más: por encima la cifra en acento baja de 4,5:1. */
  background: color-mix(in srgb, var(--p-acento) 24%, var(--p-superficie));
  box-shadow: inset 0 0 0 2px var(--p-acento);
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell {
  /* `--cal-evento` a pelo como cifra da 4,0:1 sobre la baldosa oscura; el anillo
     se queda en el color (es gráfico, 3:1) y la cifra se aclara. */
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell.is-today, [data-theme=dark] .bilbao-cal .bilbao-cal__cell.is-today.has-event {
  color: color-mix(in srgb, var(--cal-evento) 60%, #fff);
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell {
  /* Con el compuesto: si no, `.is-today.has-event` (más específico) le dejaba
     la cifra azul sobre el relleno de acento. */
}
[data-theme=dark] .bilbao-cal .bilbao-cal__cell.is-active, [data-theme=dark] .bilbao-cal .bilbao-cal__cell.is-active.is-today.has-event {
  background: var(--p-acento);
  color: var(--pal-tinta);
  box-shadow: inset 0 0 0 1.5px var(--p-acento);
}
[data-theme=dark] .bilbao-cal {
  /* Puntos blancos sobre el acento claro se perdían: sobre el día elegido van en tinta. */
}
[data-theme=dark] .bilbao-cal .is-active .bilbao-cal__dot {
  background: var(--pal-tinta) !important;
}
[data-theme=dark] .bilbao-cal .bilbao-cal__dot {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* =========================================================
   COMUNIDAD · COLABORADORES  (acceso al panel)
   Pantalla única: llena el alto visible bajo el header fijo.
========================================================= */
.colab {
  /* Compensa el header fijo igual que el resto de páginas (.comunidad-est, .fam).
     Con padding en el contenedor —y no margin en el hijo— se evita el colapso de
     márgenes que dejaba una banda del fondo del body bajo el header. */
  padding-top: var(--header-height);
}
.colab__stage {
  position: relative;
  /* Ocupa exactamente el alto visible por debajo del header fijo,
     así el centro del contenedor coincide con el centro de lo que se ve. */
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: center;
  justify-content: center;
  /* El padding inferior extra sube ópticamente el contenido (sin usar transform,
     para no pelearse con la animación de GSAP). */
  padding: 24px 24px calc(24px + 6vh);
  background: radial-gradient(120% 120% at 50% 0%, #14468c 0%, #0a1c3c 55%, #060f24 100%);
  overflow: hidden;
}
.colab {
  /* Bosque WebGL, el mismo componente del login. Ocupa el stage y NO el viewport:
     aquí el canvas es `absolute` dentro del contenedor, así que forest.js lo mide con
     clientWidth/clientHeight (ver el comentario de `medir()` en forest.js).
     El degradado de `.colab__stage` queda debajo y es el respaldo real cuando no hay
     WebGL o el usuario pidió menos animación — entonces `init()` devuelve null y el
     canvas se queda transparente. */
}
.colab__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.colab {
  /* Oscurece los bordes para que el título no compita con los árboles del centro.
     Mismo papel que `.admin-login__veil`. */
}
.colab__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(90% 70% at 50% 45%, rgba(6, 15, 36, 0) 0%, rgba(6, 15, 36, 0.55) 70%, rgba(6, 15, 36, 0.8) 100%);
}
.colab__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.colab__title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1.05;
  margin-bottom: 40px;
}
.colab__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 34px;
  border-radius: 100px;
  background: #fff;
  color: var(--col-bilbao);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.colab__cta i {
  transition: transform 0.2s ease;
}
.colab__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -14px rgba(0, 0, 0, 0.65);
  background: #eef4ff;
}
.colab__cta:hover i {
  transform: translateX(4px);
}

/* =========================================================
   blog-articulo
   Migrado desde el \3c style> embebido de views/publico/blog/articulo.php
========================================================= */
body[data-page=blog-articulo] .art-share {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
body[data-page=blog-articulo] .art-share .nd-share-btn {
  background: #F1F5F9;
  color: #374C69;
  border-color: #E2E8F0;
}
body[data-page=blog-articulo] .art-share .nd-share-btn:hover {
  background: #E2E8F0;
  border-color: #CBD5E0;
  transform: translateY(-1px);
}
@media (max-width: 600px) {
  body[data-page=blog-articulo] .art-share {
    margin-left: 0;
    width: 100%;
  }
}

/* Tema oscuro: las píldoras claras sobre la foto eran lo único blanco del hero.
   Pasan a cristal noche, como la etiqueta de los recomendados. (El acuse verde
   de «¡Copiado!» lo pone blog-articulo.js inline y gana: es un par cerrado,
   #166534 sobre #dcfce7, legible en los dos temas.) */
html[data-theme=dark] body[data-page=blog-articulo] .art-share .nd-share-btn {
  background: rgba(8, 19, 32, 0.62);
  color: var(--p-titulo);
  border-color: rgba(125, 198, 229, 0.28);
  backdrop-filter: blur(8px);
}
html[data-theme=dark] body[data-page=blog-articulo] .art-share .nd-share-btn:hover {
  background: rgba(15, 36, 57, 0.85);
  border-color: rgba(125, 198, 229, 0.5);
}

/* =========================================================
   errors-404
   Migrado desde el \3c style> embebido de views/publico/errores/404.php
========================================================= */
body[data-page=errors-404] .error-404-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem var(--gutter-mobile, 24px);
  background: var(--bg-global, #F9FBFE);
}
body[data-page=errors-404] .error-404-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 960px;
  width: 100%;
}
body[data-page=errors-404] .error-alex-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
body[data-page=errors-404] .error-bubble {
  background: var(--p-superficie);
  border: 2px solid var(--col-borde, rgba(77, 138, 187, 0.15));
  border-radius: var(--radius-card, 24px);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-float);
  max-width: 280px;
  text-align: center;
  position: relative;
  margin-bottom: 0;
}
body[data-page=errors-404] .error-bubble p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--p-titulo);
  font-weight: 600;
  line-height: 1.5;
}
body[data-page=errors-404] .error-bubble em {
  font-style: normal;
  color: var(--p-acento);
}
body[data-page=errors-404] {
  /* Punta del bocadillo */
}
body[data-page=errors-404] .error-bubble::after {
  content: "";
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: var(--p-superficie);
  filter: drop-shadow(0 3px 2px rgba(77, 138, 187, 0.1));
}
body[data-page=errors-404] .error-bubble::before {
  content: "";
  position: absolute;
  bottom: -19px;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: var(--col-borde, rgba(77, 138, 187, 0.2));
}
body[data-page=errors-404] .error-alex-img {
  width: 260px;
  max-width: 100%;
  margin-top: 1rem;
  filter: drop-shadow(0 16px 32px rgba(77, 138, 187, 0.18));
  animation: alexFloat 4s ease-in-out infinite;
}
body[data-page=errors-404] {
  /* ---- Columna de texto ---- */
}
body[data-page=errors-404] .error-text-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
body[data-page=errors-404] .error-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(77, 138, 187, 0.1);
  color: var(--p-acento);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 100px;
  width: -moz-fit-content;
  width: fit-content;
}
body[data-page=errors-404] .error-headline {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 900;
  color: var(--p-titulo);
  line-height: 1.15;
  margin: 0;
}
body[data-page=errors-404] .error-headline span {
  color: var(--p-acento);
}
body[data-page=errors-404] .error-desc {
  font-size: 1rem;
  color: var(--text-gray, #4A5568);
  line-height: 1.7;
  margin: 0;
  max-width: 420px;
}
body[data-page=errors-404] .error-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
body[data-page=errors-404] .error-divider {
  height: 1px;
  background: var(--col-borde, rgba(77, 138, 187, 0.15));
  margin: 0.25rem 0;
}
body[data-page=errors-404] .error-explore-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-gray, #4A5568);
}
body[data-page=errors-404] .error-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body[data-page=errors-404] .error-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 100px;
  background: var(--p-superficie);
  border: 1.5px solid var(--col-borde, rgba(77, 138, 187, 0.2));
  color: var(--p-titulo);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-fast, 0.2s ease);
}
body[data-page=errors-404] .error-chip:hover {
  border-color: var(--p-acento);
  color: var(--p-acento);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(77, 138, 187, 0.15);
}
body[data-page=errors-404] {
  /* ---- Tema oscuro ----
     El tinte de la insignia y las sombras azuladas no se ven sobre el azul
     noche: pasan a los tokens y a negro. El resto ya va por --p-*. */
}
[data-theme=dark] body[data-page=errors-404] .error-badge {
  background: var(--p-tinte);
}
[data-theme=dark] body[data-page=errors-404] .error-chip:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
[data-theme=dark] body[data-page=errors-404] .error-alex-img {
  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, 0.45));
}
body[data-page=errors-404] {
  /* ---- Responsive ---- */
}
@media (max-width: 680px) {
  body[data-page=errors-404] .error-404-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  body[data-page=errors-404] .error-alex-col {
    order: -1;
  }
  body[data-page=errors-404] .error-alex-img {
    width: 200px;
  }
  body[data-page=errors-404] .error-bubble {
    max-width: 100%;
  }
  body[data-page=errors-404] .error-bubble::after,
  body[data-page=errors-404] .error-bubble::before {
    display: none;
  }
  body[data-page=errors-404] .error-badge,
  body[data-page=errors-404] .error-chips,
  body[data-page=errors-404] .error-actions {
    justify-content: center;
  }
  body[data-page=errors-404] .error-desc {
    max-width: 100%;
  }
}

/* Fuera del scope: keyframes / variables */
@keyframes alexFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
/* =========================================================
   VOCES BILBAO — formulario de testimonios (/feedback-testimoniales)
   Vivía como \3c style> embebido en PaginasController::feedbackTestimoniales(); se
   migró al darle tema oscuro. Los valores del claro son los de entonces.
   El hero es azul noche en los dos temas: no cambia.
========================================================= */
body[data-page=estaticas-feedback-testimoniales] .fb-hero {
  background: linear-gradient(150deg, #0b1f3d 0%, #163a70 60%, #1d5ab0 100%);
  padding: 80px 24px 60px;
  text-align: center;
  color: #fff;
}
body[data-page=estaticas-feedback-testimoniales] .fb-hero__eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 14px;
}
body[data-page=estaticas-feedback-testimoniales] .fb-hero__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
body[data-page=estaticas-feedback-testimoniales] .fb-hero__sub {
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  max-width: 44ch;
  margin: 0 auto;
}
body[data-page=estaticas-feedback-testimoniales] .fb-wrap {
  max-width: 600px;
  margin: 0 auto;
  padding: 52px 24px 80px;
  width: 100%;
}
body[data-page=estaticas-feedback-testimoniales] .fb-card {
  background: var(--p-superficie);
  border-radius: 20px;
  padding: clamp(24px, 5vw, 44px);
  box-shadow: 0 12px 48px rgba(22, 40, 80, 0.1);
}
body[data-page=estaticas-feedback-testimoniales] .fb-card__title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #16202e;
  margin-bottom: 24px;
}
body[data-page=estaticas-feedback-testimoniales] .fb-field {
  margin-bottom: 20px;
}
body[data-page=estaticas-feedback-testimoniales] .fb-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--p-titulo);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
body[data-page=estaticas-feedback-testimoniales] {
  /* Asterisco de obligatorio (era un style="color:#e51022" en cada etiqueta). */
}
body[data-page=estaticas-feedback-testimoniales] .fb-req {
  color: var(--pal-rojo);
}
body[data-page=estaticas-feedback-testimoniales] .fb-input,
body[data-page=estaticas-feedback-testimoniales] .fb-select,
body[data-page=estaticas-feedback-testimoniales] .fb-textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #d1dce8;
  border-radius: 12px;
  font-family: inherit;
  font-size: 0.95rem;
  color: #16202e;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--p-superficie);
}
body[data-page=estaticas-feedback-testimoniales] .fb-input:focus,
body[data-page=estaticas-feedback-testimoniales] .fb-select:focus,
body[data-page=estaticas-feedback-testimoniales] .fb-textarea:focus {
  outline: none;
  border-color: #4285f4;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.14);
}
body[data-page=estaticas-feedback-testimoniales] .fb-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}
body[data-page=estaticas-feedback-testimoniales] .fb-counter {
  font-size: 0.76rem;
  color: #7a8fa8;
  text-align: right;
  margin-top: 4px;
}
body[data-page=estaticas-feedback-testimoniales] .fb-errores {
  background: #fff0f3;
  border: 1px solid #fca5a5;
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
body[data-page=estaticas-feedback-testimoniales] .fb-errores li {
  color: #b91c1c;
  font-size: 0.88rem;
  line-height: 1.7;
}
body[data-page=estaticas-feedback-testimoniales] .fb-btn {
  display: block;
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  background: #163a70;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
body[data-page=estaticas-feedback-testimoniales] .fb-btn:hover {
  background: #1d5ab0;
  transform: translateY(-1px);
}
body[data-page=estaticas-feedback-testimoniales] .fb-success {
  text-align: center;
  padding: 40px 20px;
}
body[data-page=estaticas-feedback-testimoniales] .fb-success__mascot {
  width: 100px;
  margin-bottom: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
body[data-page=estaticas-feedback-testimoniales] .fb-success__title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #163a70;
  margin-bottom: 10px;
}
body[data-page=estaticas-feedback-testimoniales] .fb-success__msg {
  color: #4a5c6e;
  font-weight: 400;
  line-height: 1.6;
  max-width: 38ch;
  margin: 0 auto 28px;
}
body[data-page=estaticas-feedback-testimoniales] .fb-success__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: 14px;
  background: #163a70;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}
body[data-page=estaticas-feedback-testimoniales] .fb-success__back:hover {
  background: #1d5ab0;
}

/* ── TEMA OSCURO ──
   La tarjeta se separa del fondo noche por superficie y un filo, no por sombra
   (una sombra azul sobre azul noche no se ve). Los campos van hundidos. El botón
   #163a70 casi se fundía con la tarjeta oscura: pasa al azul de marca oscurecido
   hacia la tinta, la regla del proyecto para blanco sobre marca (4,77:1). */
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-card {
  box-shadow: 0 0 0 1px var(--p-linea), 0 24px 48px -20px var(--p-sombra);
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-card__title {
  color: var(--p-titulo);
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-req {
  color: #ff8a93;
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] { /* --pal-rojo a pelo da 3,1:1 sobre la tarjeta */ }
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-input,
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-select,
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-textarea {
  background: var(--p-superficie-alt);
  border-color: rgba(125, 198, 229, 0.22);
  color: var(--p-texto);
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-input::-moz-placeholder, [data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-select::-moz-placeholder, [data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-textarea::-moz-placeholder {
  color: var(--p-texto-suave);
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-input::placeholder,
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-select::placeholder,
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-textarea::placeholder {
  color: var(--p-texto-suave);
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-input:focus,
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-select:focus,
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-textarea:focus {
  border-color: var(--p-acento);
  box-shadow: 0 0 0 3px var(--p-tinte);
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-counter {
  color: var(--p-texto-suave);
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-errores {
  background: rgba(229, 16, 34, 0.12);
  border-color: rgba(252, 165, 165, 0.35);
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-errores li {
  color: #fca5a5;
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-btn,
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-success__back {
  background: color-mix(in srgb, var(--col-bilbao) 82%, var(--pal-tinta));
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-btn:hover,
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-success__back:hover {
  background: color-mix(in srgb, var(--col-bilbao) 70%, var(--pal-tinta));
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-success__title {
  color: var(--p-titulo);
}
[data-theme=dark] body[data-page=estaticas-feedback-testimoniales] .fb-success__msg {
  color: var(--p-texto-suave);
}

/* =========================================================
   BOTÓN FLOTANTE DE WHATSAPP (views/publico/_partials/whatsapp.php)
   En todo el sitio público salvo Comunidad. Sustituye a la píldora móvil del home.

   - Círculo con el verde de WhatsApp: la marca es lo que lo hace reconocible de un
     vistazo, y cualquier otro color obligaría a leer el texto para saber qué es.
     El glifo blanco sobre #25D366 se queda en 2:1, pero es el logotipo de la marca en
     su presentación oficial (exento). El rótulo «Escríbenos» también va en blanco, por
     decisión del dueño (ver `&__txt`): no pasarlo a tinta por contraste. Lo que sí se
     cuida es que el CÍRCULO se separe del fondo: aro oscuro fino y sombra en claro, aro
     claro en oscuro.
   - En escritorio, al pasar o enfocar, se despliega «Escríbenos» hacia la izquierda.
     En táctil no hay hover: se queda en círculo, que ya dice qué es.
   - z-index POR DEBAJO del header (1000) y del menú a pantalla completa (2000): con
     el menú abierto el botón no puede quedar encima de la navegación.
   - SE APARTA (`.is-apartado`, lo pone src/js/publico/whatsapp.js) mientras la página
     ya enseña su propia llamada de WhatsApp: el «Agenda tu visita» del hero, el
     «Mándanos WhatsApp» de Contacto… Dos veces la misma acción en la misma pantalla es
     ruido, y en el hero del home a 390px el círculo tapaba además la flecha del carrusel.
     Sin JS no se aparta nunca: el estado base es visible.
========================================================= */
/* Medidas en un sitio: las usa también la reserva de hueco del pie. */
.wa-flotante {
  --wa: #25d366;
  --wa-tinta: #06301a; /* solo el contorno exterior del anillo de foco */
  --wa-aro: rgba(11, 31, 61, .18);
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  display: inline-flex;
  align-items: center;
  flex-direction: row-reverse;
  gap: 0;
  height: 58px;
  min-width: 58px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--wa);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--wa-aro), 0 14px 30px -10px rgba(18, 140, 75, 0.6), 0 4px 10px rgba(11, 31, 61, 0.18);
  /* Entra un instante después de la página: aparecer junto con todo lo demás lo
     convertía en parte del decorado.
     ⚠️ `backwards`, NO `both`: con `both` la animación se queda aplicando su último
     fotograma (`transform: none`) para siempre, y como una animación gana en la
     cascada a cualquier regla normal, el `translateY(-2px)` del hover no llegaba a
     aplicarse nunca. `backwards` solo sostiene el primer fotograma durante el retraso. */
  animation: wa-entra 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.9s backwards;
  /* Vuelta de «apartado» a visible: el mismo rebote corto del pop de entrada. */
  transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.22s ease, translate 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.3), scale 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.3), visibility 0.34s;
}
.wa-flotante__ico {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
.wa-flotante {
  /* El rótulo vive plegado (ancho 0) y se despliega con `max-width`: así el círculo
     mide lo mismo con y sin él, y no hay que medir el texto en JS. */
}
.wa-flotante__txt {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: "Outfit", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  /* Blanco, como el glifo, por decisión del dueño: la pastilla es la marca de
     WhatsApp y se lee como tal (el blanco sobre #25D366 queda en 2:1; la tinta
     oscura que llevó antes daba 7,3:1). */
  color: #fff;
  opacity: 0;
  transition: max-width 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease, margin 0.32s ease;
}
.wa-flotante:hover, .wa-flotante:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--wa-aro), 0 18px 36px -12px rgba(18, 140, 75, 0.7), 0 6px 14px rgba(11, 31, 61, 0.2);
}
.wa-flotante {
  /* Anillo de foco en DOS tonos: el blanco solo desaparecía sobre las páginas claras
     (que son casi todas). Aro blanco pegado al círculo + contorno oscuro por fuera:
     uno de los dos contrasta siempre, sea cual sea el fondo o el tema. */
}
.wa-flotante:focus-visible {
  outline: 3px solid var(--wa-tinta);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #fff, 0 18px 36px -12px rgba(18, 140, 75, 0.7);
}
@media (hover: hover) and (pointer: fine) {
  .wa-flotante:hover .wa-flotante__txt, .wa-flotante:focus-visible .wa-flotante__txt {
    max-width: 12ch;
    opacity: 1;
    margin-right: 10px;
  }
}
.wa-flotante:active {
  transform: translateY(0);
}
.wa-flotante {
  /* ── Apartado ── La salida es más corta que la entrada (≈70 %) y sin rebote: se
     retira, no actúa. `visibility` con retraso igual a la salida: se ve mientras se
     desvanece y después deja de ser clicable y enfocable. */
}
.wa-flotante.is-apartado {
  opacity: 0;
  translate: 0 14px;
  scale: 0.8;
  visibility: hidden;
  pointer-events: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, opacity 0.18s ease-in, translate 0.22s ease-in, scale 0.22s ease-in, visibility 0.22s;
}
@media (max-width: 520px) {
  .wa-flotante {
    right: calc(14px + env(safe-area-inset-right, 0px));
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    height: 54px;
    min-width: 54px;
    padding: 0 14px;
  }
}
.wa-flotante {
  /* Menos movimiento no es inmóvil: sin pop ni desplazamientos, pero apartarse y
     volver siguen siendo un fundido, para que no parpadee. */
}
@media (prefers-reduced-motion: reduce) {
  .wa-flotante {
    animation: none;
    transition: opacity 0.16s linear, visibility 0.16s;
  }
  .wa-flotante__txt {
    transition: none;
  }
  .wa-flotante:hover, .wa-flotante:focus-visible {
    transform: none;
  }
  .wa-flotante.is-apartado {
    translate: none;
    scale: none;
    transition: opacity 0.16s linear, visibility 0.16s;
  }
}
@media print {
  .wa-flotante {
    display: none;
  }
}

/* En oscuro el aro oscuro no se ve: se vuelve un filo claro. */
[data-theme=dark] .wa-flotante {
  --wa-aro: rgba(255, 255, 255, .22);
}

/* ── Reserva de hueco al final de la página ──
   En móvil la franja legal del pie ocupa todo el ancho, y al llegar abajo del todo el
   círculo se quedaba posado sobre «Mapa del sitio» y el final del copyright: el único
   sitio de la página donde ya no hay más scroll para apartarlo. Se le da al pie el alto
   del botón más su margen. Con `:has()` solo ocurre donde el botón existe (Comunidad no
   lo lleva); sin soporte, el pie se queda como estaba. */
@media (max-width: 720px) {
  body:has(.wa-flotante) .footer-legal {
    padding-bottom: calc(20px + 58px + 18px + env(safe-area-inset-bottom, 0px));
  }
}
@keyframes wa-entra {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/*# sourceMappingURL=publico.css.map */