/* =========================================================================
   CIS La Estrella · hoja de estilos del sitio público
   Sistema de diseño extraído del prototipo de Claude Design.
   ========================================================================= */

/* ---------------------------------------------------------------- fuentes */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/hanken-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/hanken-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/spacemono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/spacemono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */

:root {
  --navy: #0a3a66;
  --navy-soft: #7fa7d0;
  --navy-pale: #c2d2e4;
  --navy-text: #d3dfee;
  --navy-muted: #aebfd4;

  --terracotta: #d8783c;
  --terracotta-dark: #c2622b;
  --terracotta-deep: #c9692f;

  --amber: #e49c48;
  --amber-soft: #f0c993;
  --amber-ink: #c98a3a;
  --amber-muted: #9a7d52;

  --ink: #2c3434;
  --slate: #485454;
  --muted: #6f7679;
  --muted-soft: #9aa0a0;
  --periwinkle: #9ca8c0;
  --sand: #b08a5e;
  --stone: #9a958c;

  --cream: #f7f4ee;
  --cream-warm: #fbf2e2;
  --dark: #1d2424;
  --darker: #141a1a;
  --white: #fff;

  /* Enlaces de contacto. Dos tonos distintos para que un correo y un
     teléfono no parezcan lo mismo, y los dos lo bastante oscuros para pasar
     el 4,5:1 sobre el crema del recuadro: los naranjas de marca se quedaban
     en 3,45:1, por debajo del mínimo legible. */
  --link-mail: #ad5119;   /* 4,82:1 sobre crema */
  --link-tel:  #8a6a1f;   /* 4,60:1 sobre crema */

  --line: rgba(72, 84, 84, 0.1);
  --line-strong: rgba(72, 84, 84, 0.18);

  --display: 'Archivo', system-ui, -apple-system, sans-serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  --pad: clamp(20px, 5vw, 90px);
  --max: 1500px;
  --radius: 16px;
  --radius-sm: 9px;

  --shadow-card: 0 18px 40px -22px rgba(28, 34, 34, 0.2);
  --shadow-tall: 0 20px 46px -18px rgba(28, 34, 34, 0.4);
  --shadow-mega: 0 24px 40px -18px rgba(44, 52, 52, 0.28);
}

/* ============================================================ accesibilidad

   Dos ajustes que se guardan en el navegador de quien visita: tamaño de texto
   y alto contraste. Las clases las pone `layout.php` antes de pintar.

   ------------------------------------------------------------------------
   TAMAÑO DE TEXTO

   En este proyecto TODAS las medidas de tipografía están en píxeles, así que
   el truco habitual —subir el `font-size` de la raíz— no haría absolutamente
   nada. Se amplía con `zoom`, que escala el bloque entero manteniendo las
   proporciones y sin tocar ninguna de las 147 declaraciones existentes.

   Se aplica al contenido y al pie, y NO a la cabecera: la barra va justa de
   sitio y ampliarla desmontaría el menú. Quien necesite más tamaño en el menú
   tiene el zoom del propio navegador, que sí lo abarca todo. */

html.a11y-texto-1 main,
html.a11y-texto-1 .site-footer { zoom: 1.15; }

html.a11y-texto-2 main,
html.a11y-texto-2 .site-footer { zoom: 1.3; }

/* ------------------------------------------------------------------------
   ALTO CONTRASTE

   Se rehacen los tokens de color en vez de escribir una regla por componente:
   toda la hoja se sirve de estas variables, así que con reasignarlas cambia el
   sitio entero y no hay que perseguir cada tarjeta. Los grises y los tonos
   suaves pasan a negro sobre blanco, y los colores de marca se oscurecen hasta
   pasar el 4,5:1 sobre blanco. */

html.a11y-contraste {
  --ink: #000;
  --slate: #000;
  --muted: #000;
  --muted-soft: #000;
  --periwinkle: #1a2433;
  --sand: #4a3416;
  --stone: #3a3730;

  --navy: #00264a;
  --navy-soft: #00264a;
  --navy-pale: #fff;
  --navy-text: #fff;
  --navy-muted: #e8eef6;

  --terracotta: #97441a;
  --terracotta-dark: #7c3714;
  --terracotta-deep: #8c3f18;

  --amber: #6d4a12;
  --amber-soft: #ffe9c4;
  --amber-ink: #6d4a12;
  --amber-muted: #4a3416;

  --cream: #fff;
  --cream-warm: #fff;
  --white: #fff;

  --line: #000;
  --line-strong: #000;

  --shadow-card: none;
  --shadow-tall: none;
  --shadow-mega: none;
}

/* Los enlaces del texto, subrayados: en alto contraste el color por sí solo no
   puede ser la única señal de que algo es un enlace. */
html.a11y-contraste .prose a,
html.a11y-contraste .footer__links a,
html.a11y-contraste .footer__legal a { text-decoration: underline; }

/* Los velos oscuros sobre foto dejan de hacer falta y estorban al contraste. */
html.a11y-contraste .hero__veil-a,
html.a11y-contraste .hero__veil-b { background: rgba(0, 0, 0, 0.72); }

/* Bordes visibles donde antes el relieve lo daba la sombra. */
html.a11y-contraste .card,
html.a11y-contraste .banner-card,
html.a11y-contraste .navdrop__menu,
html.a11y-contraste .navsearch__form,
html.a11y-contraste .subnav { border: 1px solid #000; }

/* ------------------------------------------------------------------ reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sin overflow-x aquí: cualquier recorte en html o body convierte a uno de
     los dos en contenedor de scroll y anula `position: sticky`. El
     desbordamiento horizontal se controla en cada sección. */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--white);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1em; padding-left: 1.2em; }

/* Foco visible y consistente para navegación por teclado. */
:focus-visible {
  outline: 3px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  font: 700 14px var(--display);
  border-radius: 0 0 8px 0;
}
.skip-link:focus {
  left: 0;
}

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

/* --------------------------------------------------------------- utilidades */

.padx {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.wrap {
  max-width: var(--max);
  margin-inline: auto;
}

.wrap-narrow {
  max-width: 1180px;
  margin-inline: auto;
}

.wrap-text {
  max-width: 760px;
  margin-inline: auto;
}

.kicker {
  font: 700 12px var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--periwinkle);
  margin-bottom: 14px;
}

.mono { font-family: var(--mono); }

.hl-terracotta { color: var(--terracotta); font-weight: 700; }
.hl-navy { color: var(--navy); font-weight: 700; }
.hl-amber { color: var(--amber); font-weight: 700; }

/* Triángulo decorativo del sistema de marca. */
.tri {
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 15px solid var(--terracotta);
  display: inline-block;
}

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn:hover { transform: translateY(-2px); }

/* El naranja de marca a pelo daba 3,15:1 con el texto en blanco, muy por
   debajo del 4,5:1 que hace falta para leerse: el botón principal usa la
   versión profunda del naranja del logo (5,86:1), la misma del «Inscríbete»
   de la cabecera. */
.btn-primary {
  background: var(--logo-ember);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(176, 64, 12, 0.6);
}
.btn-primary:hover {
  background: var(--logo-ember-dark); /* 7,42:1 */
  box-shadow: 0 12px 22px -10px rgba(150, 54, 10, 0.75);
}

.btn-navy { background: var(--navy); color: #fff; }

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  backdrop-filter: blur(3px);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.12); }

.btn-white { background: #fff; color: var(--terracotta-dark); }

.btn-sm { font-size: 13px; padding: 13px 24px; }

/* --------------------------------------------------------------- cabecera */

.site-header {
  position: relative;
  z-index: 30;
  background: #fff;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

/* El logotipo no se encoge. Es un elemento flexible dentro de una barra
   apretada y, con `max-width:100%` heredado, al estrecharse le bajaba el ancho
   pero no la altura: el logotipo salía achatado entre 1080 y 1400 px de pantalla.
   Se deja fuera del reparto de espacio y se le quita el tope de ancho. */
.navbar__logo {
  flex-shrink: 0;
  line-height: 0;
}
.navbar__logo img {
  height: 68px;
  width: auto;
  max-width: none;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 21px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--slate);
  white-space: nowrap;
}

.navlinks a,
.navlinks button {
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.navlinks a:hover,
.navlinks button:hover,
.navlinks .is-active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* Desplegable de una entrada del menú (NOTICIAS). El rótulo no es un enlace:
   sólo abre la lista, y su propia sección va dentro como primera entrada. */
.navdrop {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.navdrop__btn {
  padding: 4px 0;
  color: inherit;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.navdrop__btn:hover,
.navdrop__btn.is-active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}
.navdrop__menu {
  position: absolute;
  top: calc(100% + 10px);
  left: -14px;
  z-index: 40;
  min-width: 208px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-mega);
  font: 500 12.5px/1.5 var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.navdrop__menu[hidden] { display: none; }
.navdrop__menu a {
  display: block;
  padding: 8px 16px;
  color: #5d6669;
  border-bottom: 0;
}
.navdrop__menu a:hover {
  color: var(--terracotta);
  background: var(--cream);
  border-bottom: 0;
}

/* Submenú de segundo nivel (Prensa → notas y dossier). Va indentado y con una
   guía a la izquierda para que se vea de un vistazo que dependen de Prensa. */
.navdrop__sub {
  list-style: none;
  margin: 2px 0 6px 16px;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--line);
}
.navdrop__sub a {
  padding: 6px 12px;
  font-size: 12px;
  color: #767f82;
}

/* ------------------------------------------- herramientas de accesibilidad */

.a11y {
  display: flex;
  align-items: center;
  gap: 4px;
}
.a11y__btn {
  min-width: 32px;
  height: 32px;
  padding: 0 6px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--slate);
  font: 700 12.5px var(--body);
  line-height: 1;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.a11y__btn:hover,
.a11y__btn:focus-visible {
  background: var(--cream);
  color: var(--terracotta-deep);
  border-color: var(--terracotta-deep);
}
.a11y__btn[aria-pressed='true'] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}

/* Dentro del menú móvil van más grandes: se pulsan con el dedo. */
.a11y--menu {
  gap: 8px;
  margin: 0 0 14px;
}
.a11y--menu .a11y__btn {
  min-width: 46px;
  height: 42px;
  font-size: 14px;
}

.navbar__actions {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

/* ------------------------------------------------------------- buscador */

.navsearch {
  position: relative;
  display: flex;
  align-items: center;
}
.navsearch__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  color: var(--slate);
  transition: background 0.2s, color 0.2s;
}
.navsearch__btn:hover { background: var(--cream); color: var(--terracotta); }
.navsearch.is-open .navsearch__btn { background: var(--cream); color: var(--terracotta); }

.navsearch__form {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: flex;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-mega);
}
.navsearch__form[hidden] { display: none; }
.navsearch__form input {
  width: 244px;
  font: 400 14px var(--body);
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.navsearch__form input:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.navsearch__form button {
  font: 700 12px var(--body);
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  background: var(--terracotta-deep);
  color: #fff;
  white-space: nowrap;
}

/* ------------------------------------- contenido + columna lateral (interiores)

   Estaba puesto con un `style` en línea en cada página, y un estilo en línea no
   lo puede deshacer ninguna media query: en el móvil las dos columnas seguían
   ahí, la lateral se quedaba con sus 300 px y al texto le tocaba una tira de una
   palabra por línea. Por eso va aquí, con su punto de ruptura. */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--split-aside, 300px);
  gap: 56px;
  align-items: start;
}
.split--even {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 64px;
}
.split__aside { position: sticky; top: 96px; }

@media (max-width: 900px) {
  .split,
  .split--even {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  /* Apilada deja de tener sentido pegarla arriba: se quedaría flotando sobre
     el texto durante todo el desplazamiento. */
  .split__aside { position: static; }
}

/* ------------------------------------------ banner destacado de un área
   Una tarjeta al principio de la página del área que manda a una web propia
   (Panel → Áreas → «Banner destacado»). Va en azul marino, como la cabecera,
   con un resplandor en el color de acento del área y la puerta del isotipo
   de marca de agua: tiene que verse como lo más importante de la página, no
   como un aviso más. */

.area-cta {
  --accent: var(--terracotta);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
  margin-bottom: 52px;
  padding: 42px 48px;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(115deg, #082f54 0%, var(--navy) 55%, #0f4a7d 100%);
  box-shadow: 0 24px 50px -28px rgba(10, 58, 102, 0.75);
}
/* Resplandor en el color del área, detrás del botón. */
.area-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -120px;
  top: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent), transparent 72%);
  opacity: 0.55;
  pointer-events: none;
}
/* La puerta del isotipo, como en la cabecera de la página. */
.area-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 34%;
  bottom: -70px;
  width: 210px;
  height: 230px;
  background: url("../img/puerta.svg") no-repeat center / contain;
  opacity: 0.35;
  pointer-events: none;
}
.area-cta__text { min-width: 0; max-width: 640px; }
.area-cta__kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 12px var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-soft);
  margin: 0 0 12px;
}
.area-cta__kicker::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(228, 156, 72, 0.25);
}
.area-cta__title {
  font: 800 clamp(24px, 2.6vw, 34px)/1.12 var(--display);
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
}
.area-cta__lead {
  font: 500 17px/1.55 var(--body);
  color: var(--navy-text);
  margin: 12px 0 0;
}
.area-cta__action {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.area-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 19px 30px 19px 34px;
  border-radius: 999px;
  background: #fff;
  color: var(--logo-ember);        /* 5,86:1 sobre blanco */
  font: 800 17px var(--display);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.55);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.area-cta__btn svg {
  flex: none;
  transition: transform 0.2s;
}
.area-cta__host {
  font-size: 12px;
  color: var(--navy-muted);
  letter-spacing: 0.02em;
}
.area-cta__btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .area-cta__btn:hover {
    transform: translateY(-3px);
    background: var(--amber-soft);
    box-shadow: 0 20px 36px -12px rgba(0, 0, 0, 0.6);
  }
  .area-cta__btn:hover svg { transform: translateX(4px); }
}

@media (max-width: 900px) {
  .area-cta { padding: 34px 32px; gap: 26px; }
  .area-cta::after { right: -30px; }
}
@media (max-width: 680px) {
  .area-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 30px 22px 26px;
    margin-bottom: 36px;
  }
  .area-cta::before { right: -180px; top: -220px; }
  .area-cta::after { right: -60px; bottom: -110px; opacity: 0.22; }
  .area-cta__lead { font-size: 15.5px; }
  .area-cta__action { align-items: stretch; }
  .area-cta__btn { justify-content: center; white-space: normal; font-size: 16px; padding: 17px 24px; }
  .area-cta__host { text-align: center; }
}
/* --------------------------------------------- categorías de los proyectos */

.projcats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.projcat {
  display: inline-block;
  font: 700 10.5px var(--body);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--projcat, #9ca8c0);
  border: 1px solid currentColor;
  white-space: nowrap;
}
a.projcat:hover {
  background: var(--projcat, #9ca8c0);
  color: #fff;
}

/* Secciones que coinciden con la búsqueda, encima de los resultados. */
.searchsections {
  margin-bottom: 30px;
  padding: 18px 20px;
  background: var(--cream);
  border-radius: var(--radius-sm);
}
.searchsections__title {
  font: 700 10.5px var(--body);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--periwinkle);
  margin-bottom: 10px;
}
.searchsections ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.searchsections a {
  font: 700 14px var(--body);
  color: var(--navy);
}
.searchsections a:hover { color: var(--terracotta); }

/* Selector de idioma, lo primero del menú móvil. */
.mobilelang {
  display: flex;
  width: max-content;
  margin: 4px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  overflow: hidden;
  font: 700 13px var(--display);
}
.mobilelang a,
.mobilelang span {
  padding: 9px 16px;
  color: var(--muted-soft);
  transition: background 0.2s, color 0.2s;
}
.mobilelang a:hover { background: var(--cream); color: var(--slate); }
.mobilelang .is-active { background: var(--terracotta-deep); color: #fff; }

/* Redes sociales al final del menú móvil. Círculos rellenos: los recuadros con
   borde fino se leían como cajas vacías, no como botones. */
/* Con `.mobilenav` delante, igual que los enlaces de dentro: si no,
   `.mobilenav ul { margin: 0 }` gana por especificidad y la separación
   respecto al botón de contacto se quedaba en cero. */
.mobilenav .mobilesocial {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 30px 0 6px;
  padding: 0;
}
/* Va con `.mobilenav` delante a propósito: la lista de redes es un `ul` hijo
   del menú, así que la alcanzaba `.mobilenav > ul > li > a`, que le metía el
   color de texto oscuro, la raya de abajo y el tipo de letra de las secciones.
   El glifo salía gris marengo sobre azul marino y los iconos parecían cajas. */
.mobilenav .mobilesocial a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font: inherit;
  transition: background 0.2s, transform 0.2s;
}
.mobilenav .mobilesocial a:hover,
.mobilenav .mobilesocial a:focus-visible {
  background: var(--terracotta-deep);
  transform: translateY(-2px);
}

/* Buscador del menú móvil: siempre a la vista. */
.mobilesearch {
  display: flex;
  gap: 8px;
  margin: 4px 0 18px;
}
.mobilesearch input {
  flex: 1;
  min-width: 0;
  font: 400 15px var(--body);
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
}
.mobilesearch button {
  font: 700 12.5px var(--body);
  padding: 11px 16px;
  border-radius: var(--radius-sm);
  background: var(--terracotta-deep);
  color: #fff;
  white-space: nowrap;
}

.lang {
  display: flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
}
.lang a,
.lang span {
  padding: 7px 9px;
  color: var(--muted-soft);
  transition: background 0.2s, color 0.2s;
}
.lang a:hover { background: var(--cream); color: var(--slate); }
.lang .is-active { background: var(--navy); color: #fff; }

.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  align-items: center;
  justify-content: center;
}
.burger span {
  width: 19px;
  height: 2px;
  background: var(--slate);
  display: block;
  transition: transform 0.25s, opacity 0.2s;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------------------- mega menú */

.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #fff;
  border-bottom: 1px solid rgba(72, 84, 84, 0.12);
  box-shadow: var(--shadow-mega);
  padding-top: 30px;
  padding-bottom: 34px;
}
.mega[hidden] { display: none; }

.mega__title {
  font: 700 11px var(--body);
  letter-spacing: 0.12em;
  color: var(--periwinkle);
  margin-bottom: 18px;
  text-transform: uppercase;
}

.megagrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 26px;
}

.megagrid h3,
.megagrid__area {
  font: 800 11px var(--body);
  letter-spacing: 0.08em;
  color: var(--terracotta);
  margin-bottom: 11px;
  text-transform: uppercase;
}
.megagrid ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 500 12.5px/1.95 var(--body);
  color: #5d6669;
}
.megagrid li a:hover { color: var(--terracotta); }

/* Menú móvil desplegable. */
.mobilenav {
  display: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
  background: #fff;
}
.mobilenav.is-open { display: block; }

/* El menú se desplaza por dentro.

   Sin esto, el panel crecía hacia abajo todo lo que hiciera falta pero el
   cuerpo estaba bloqueado (`body.nav-open{overflow:hidden}`), así que todo lo
   que caía por debajo del borde de la pantalla no había forma de alcanzarlo:
   el menú se cortaba en Noticias y las redes sociales del final no aparecían
   nunca.

   La cabecera pasa a ser una columna con el alto de la pantalla como tope; la
   barra ocupa lo suyo y el menú se queda con el resto y se desplaza solo. Así
   vale para cualquier alto de cabecera, encogida o no. */
body.nav-open .site-header {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  max-height: 100dvh;   /* en el móvil descuenta la barra del navegador */
}
body.nav-open .mobilenav {
  min-height: 0;        /* sin esto un elemento flexible no deja desbordar */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobilenav ul { list-style: none; margin: 0; padding: 0; }
.mobilenav > ul > li > a,
.mobilenav > ul > li > span {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font: 700 15px var(--display);
  color: var(--ink);
}
.mobilenav .sub { padding: 6px 0 12px 14px; }
.mobilenav .sub li a {
  display: block;
  padding: 6px 0;
  font: 500 14px var(--body);
  color: var(--muted);
}
/* Rótulo que sólo agrupa, sin destino propio (NOTICIAS). */
.mobilenav__group { color: var(--muted-soft); }
/* Tercer nivel: los apartados de Prensa, colgando de ella. */
.mobilenav .sub--deep {
  padding: 2px 0 6px 14px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}
.mobilenav .sub--deep li a { font-size: 13px; padding: 5px 0 5px 10px; }
.mobilenav .mobilenav__cta { margin-top: 18px; display: block; text-align: center; }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  width: 100%;
  height: min(90vh, 840px);
  overflow: hidden;
  background: var(--dark);
}

.hero__slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide.is-active:first-child { animation: heroKen 9s ease-out alternate infinite; }

@keyframes heroKen {
  0% { transform: scale(1.02); }
  100% { transform: scale(1.12); }
}

.hero__veil-a {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(20, 26, 26, 0.78) 0%, rgba(20, 26, 26, 0.42) 42%, rgba(20, 26, 26, 0.08) 70%, rgba(20, 26, 26, 0.25) 100%);
}
.hero__veil-b {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 26, 26, 0) 55%, rgba(20, 26, 26, 0.55) 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 150px;
  max-width: var(--max);
  margin-inline: auto;
  width: 100%;
}

.hero__kicker {
  font: 700 12px var(--body);
  letter-spacing: 0.16em;
  color: var(--amber-soft);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.hero h1 {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(42px, 5.4vw, 78px);
  line-height: 0.95;
  color: #fff;
  letter-spacing: -0.02em;
  max-width: 880px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}

.hero__lead {
  font: 500 18px/1.55 var(--body);
  color: rgba(255, 255, 255, 0.88);
  margin-top: 24px;
  max-width: 520px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  margin-top: 34px;
  flex-wrap: wrap;
}

.hero__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 128px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: var(--max);
  margin-inline: auto;
}
.hero__dots .dots { display: flex; gap: 8px; align-items: center; }
/* Acotado a `.dots`: antes era `.hero__dots button` y alcanzaba a cualquier
   botón de la franja, así que el de parar el carrusel salía de 8×8 px. */
.hero__dots .dots button {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.5);
  transition: all 0.45s;
  padding: 0;
}
.hero__dots .dots button[aria-current='true'] {
  width: 30px;
  background: var(--amber);
}
/* El punto se ve pequeño, pero se pulsa en un cuadrado de 24 px. Acertar con
   el dedo en 8 px es una lotería y no cuesta nada arreglarlo. */
.hero__dots .dots button::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}
.hero__label,
.hero__num {
  font: 600 11px var(--mono);
  color: rgba(255, 255, 255, 0.85);
}
.hero__num { color: rgba(255, 255, 255, 0.55); margin-left: auto; }

/* Botón de parar / reanudar el carrusel. */
.hero__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.hero__toggle:hover,
.hero__toggle:focus-visible {
  background: rgba(0, 0, 0, 0.55);
  border-color: #fff;
}
/* Dos barras cuando está en marcha (pausar) y un triángulo cuando está parado
   (reanudar). Se dibujan con bordes para no depender de ningún icono. */
.hero__toggle-icon {
  width: 10px;
  height: 11px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
.hero__toggle[aria-pressed='true'] .hero__toggle-icon {
  width: 0;
  height: 0;
  margin-left: 3px;
  border: 6px solid transparent;
  border-left: 10px solid #fff;
  border-right: 0;
}

/* ----------------------------------------------------------- seis áreas */

.areas-overlap {
  position: relative;
  z-index: 6;
  margin-top: -128px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 152px;
  gap: 16px;
  max-width: 1560px;
  margin-inline: auto;
}

.area-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.35s, box-shadow 0.35s;
}
.area-card:hover { transform: translateY(-4px); }

.area-card--tall {
  grid-row: span 2;
  min-height: 230px;
  color: #fff;
  box-shadow: var(--shadow-tall);
}
.area-card--short {
  color: #fff;
  box-shadow: 0 18px 40px -20px rgba(28, 34, 34, 0.32);
}
.area-card--solid {
  padding: 22px 20px;
  justify-content: flex-start;
  box-shadow: var(--shadow-card);
}

.area-card__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transition: transform 0.6s;
}
.area-card:hover .area-card__bg { transform: scale(1.05); }

.area-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 34, 34, 0.1) 28%, rgba(28, 34, 34, 0.88) 100%);
}

.area-card__num {
  position: absolute;
  left: 20px;
  top: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 800 12px var(--mono);
  color: #fff;
  z-index: 2;
}

.area-card__solid-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: auto;
  font: 800 12px var(--mono);
}

.area-card__body { position: relative; padding: 22px; }
.area-card__kicker {
  font: 700 10px var(--body);
  letter-spacing: 0.1em;
  color: var(--amber-soft);
  margin-bottom: 5px;
  text-transform: uppercase;
}
.area-card__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.04;
  color: inherit;
}
.area-card--solid .area-card__title { font-size: 19px; margin-top: 10px; }
.area-card--short .area-card__title { font-size: 18px; line-height: 1.05; }
.area-card__text {
  font: 500 13px/1.42 var(--body);
  color: rgba(255, 255, 255, 0.86);
  margin-top: 8px;
}
.area-card--solid .area-card__text { font-size: 12px; line-height: 1.38; margin-top: 5px; }
.area-card--short .area-card__text { font-size: 11.5px; line-height: 1.35; margin-top: 4px; }
.area-card__more {
  font: 700 11px var(--body);
  margin-top: 13px;
  color: #fff;
}
.area-card--short .area-card__body { padding: 18px; }
.area-card--short .area-card__num { left: 18px; top: 16px; }

/* ------------------------------------------- seis banners sobre el carrusel */

/* Rejilla de cuatro columnas y filas de 152 px. Un banner «grande» ocupa dos
   filas: con los dos de los extremos grandes y cuatro pequeños en medio sale la
   composición de siempre, que es la que deja que unas cosas destaquen sobre
   otras y da más sitio de texto donde hace falta.

   El orden de la rejilla lo hace sola: el primero grande ocupa la columna 1
   entera, los dos siguientes van arriba, el cuarto grande ocupa la columna 4 y
   los dos últimos caen en el hueco de abajo. */
.banners-overlap {
  position: relative;
  z-index: 6;
  margin-top: -128px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 152px;
  gap: 16px;
  max-width: 1560px;
}

.banner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s, box-shadow 0.35s;
}
.banner-card:hover { transform: translateY(-4px); }
.banner-card--photo { box-shadow: var(--shadow-tall); }

/* El grande ocupa dos filas. `min-height` por si algún día hay menos banners
   que huecos y la fila se queda a medias. */
.banner-card--tall {
  grid-row: span 2;
  min-height: 230px;
}

.banner-card__bg {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transition: transform 0.6s;
}
.banner-card:hover .banner-card__bg { transform: scale(1.05); }

.banner-card__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 34, 34, 0.12) 30%, rgba(28, 34, 34, 0.88) 100%);
}

.banner-card__body {
  position: relative;
  padding: 22px;
}
.banner-card__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.05;
  color: inherit;
}
/* El grande tiene sitio para respirar, y así se nota cuál manda. */
.banner-card--tall .banner-card__title { font-size: 23px; line-height: 1.04; }

.banner-card__text {
  font: 500 12px/1.38 var(--body);
  margin-top: 6px;
  color: inherit;
}
.banner-card--tall .banner-card__text { font-size: 13px; line-height: 1.42; margin-top: 8px; }
/* La transparencia sólo sobre foto, donde debajo hay un velo oscuro. Sobre un
   color plano rebajaría un contraste que se acaba de calcular a propósito. */
.banner-card--photo .banner-card__text { opacity: 0.86; }

/* ------------------------------------------------------------- secciones */

.section { padding-top: 74px; padding-bottom: 74px; }
.section--tight { padding-top: 60px; padding-bottom: 60px; }
.section--cream { background: var(--cream); }
.section--dark { background: var(--ink); color: #fff; }

/* «¿Qué es el CIS?»: la marca en vertical junto al titular. Con el logotipo al
   lado, el texto deja de ir centrado —centrado quedaría descolgado del bloque—
   y se alinea a la izquierda, contra el logotipo. */
.intro-head {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin-inline: auto;
}
.intro-head__logo {
  width: 100%;
  height: auto;
}
.intro-head .section__head { text-align: left; margin-inline: 0; }
.intro-head .section__lead { margin-left: 0; }

@media (max-width: 860px) {
  .intro-head {
    grid-template-columns: 1fr;
    gap: 26px;
    justify-items: center;
  }
  .intro-head__logo { max-width: 200px; }
  .intro-head .section__head { text-align: center; }
  .intro-head .section__lead { margin-inline: auto; }
}

.section__head {
  text-align: center;
  max-width: 1180px;
  margin-inline: auto;
}
.section__head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.section__lead {
  font: 500 18px/1.6 var(--body);
  color: var(--muted);
  max-width: 720px;
  margin: 18px auto 0;
  text-wrap: pretty;
}

.section__bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  margin-bottom: 28px;
}
.section__bar h2 { font-size: clamp(24px, 3vw, 34px); }
.section__bar .kicker { color: var(--sand); margin-bottom: 6px; letter-spacing: 0.12em; }
.section__more {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--terracotta);
  white-space: nowrap;
}
.section__more:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- pilares */

.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1180px;
  margin: 50px auto 0;
}
.pillar {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 30px 26px;
}
.pillar__icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(60, 50, 40, 0.08);
  margin-bottom: 18px;
}
.pillar h3 { font-size: 19px; margin-bottom: 8px; }
.pillar p { font: 500 14px/1.5 var(--body); color: var(--muted); }

/* ------------------------------------------------------------- manifiesto */

.manifesto {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
  max-width: var(--max);
  margin-inline: auto;
}
.manifesto h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.04;
  color: #fff;
}
.manifesto .kicker { color: var(--amber); }
.manifesto__lead {
  font: 500 16px/1.6 var(--body);
  color: rgba(255, 255, 255, 0.82);
  margin-top: 14px;
  max-width: 46ch;
}
.manifesto__cta { margin-top: 22px; }
.manifesto__stats {
  display: grid;
  /* Las cifras las pone el cliente y pueden ser dos, tres o cuatro: la rejilla
     se adapta al número que haya en vez de dejar huecos o apretarlas. */
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px;
}
.stat__value {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(34px, 4vw, 46px);
  color: var(--amber);
  line-height: 1;
}
.stat__label {
  font: 600 13px/1.4 var(--body);
  color: #aeb6b4;
  margin-top: 6px;
}

/* --------------------------------------------------------------- tarjetas */

.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 6px rgba(60, 50, 40, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px -20px rgba(28, 34, 34, 0.32);
}
.card__media {
  height: 208px;
  background-position: center;
  background-size: cover;
  background-color: var(--cream);
}
.card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { font-size: 20px; margin-bottom: 8px; }
.card__text {
  font: 500 14px/1.45 var(--body);
  color: var(--muted);
  margin-bottom: 14px;
}
.card__tag {
  font: 600 11px var(--body);
  letter-spacing: 0.03em;
  color: var(--terracotta);
  margin-top: auto;
}
.card__date {
  font: 700 11px var(--body);
  letter-spacing: 0.06em;
  color: var(--periwinkle);
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* ------------------------------------------------------------- dos franjas */

.bands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 430px;
}
.band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: #fff;
  min-height: 430px;
}
.band--photo { background: var(--dark); }
/* El color lo pone el panel en --band-bg; sin él, el naranja de siempre. El
   degradado oscurece un poco el color elegido hacia una esquina; la primera
   línea es el plan B para navegadores sin color-mix(). */
.band--solid {
  background: var(--band-bg, var(--terracotta));
  background: linear-gradient(140deg, var(--band-bg, var(--terracotta)),
              color-mix(in srgb, var(--band-bg, var(--terracotta-dark)) 86%, #000));
}
.band__bg { position: absolute; inset: 0; background-position: center 32%; background-size: cover; }
.band__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 26, 26, 0.05) 30%, rgba(20, 26, 26, 0.88) 100%);
}
.band__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.16);
  pointer-events: none;
}
.band__ring--a { right: -46px; top: -34px; width: 250px; height: 250px; }
.band__ring--b { right: 36px; top: 64px; width: 128px; height: 128px; border-color: rgba(255, 255, 255, 0.13); }
.band__body {
  position: relative;
  z-index: 2;
  padding: 46px clamp(24px, 4.2vw, 68px);
}
.band__kicker {
  font: 700 11px var(--body);
  letter-spacing: 0.14em;
  color: var(--amber-soft);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.band--solid .band__kicker { color: rgba(255, 255, 255, 0.82); }
.band h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.08;
  max-width: 440px;
  color: #fff;
}
.band__text {
  font: 500 14px/1.5 var(--body);
  color: rgba(255, 255, 255, 0.85);
  margin-top: 12px;
  max-width: 440px;
}
.band--solid .band__text { color: rgba(255, 255, 255, 0.92); }
.band__cta { margin-top: 24px; }

/* Sobre un color claro el texto pasa a oscuro (lo decide el servidor con el
   mismo cálculo de contraste que los banners). */
.band--light,
.band--light h2,
.band--light .band__kicker,
.band--light .band__text { color: var(--band-fg, var(--ink)); }
.band--light .band__ring { border-color: rgba(0, 0, 0, 0.12); }

/* --------------------------------------------------------- noticias+agenda */

.newsGrid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  background: #fff;
  max-width: 1560px;
  margin-inline: auto;
}
.newsLeft {
  padding: 60px 48px 60px 0;
  border-right: 1px solid var(--line);
}
.newsRight { padding: 60px 0 60px 48px; }
.newsGrid h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 22px; }

.newsrow {
  display: grid;
  grid-template-columns: 58px 90px 1fr;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid rgba(72, 84, 84, 0.12);
  align-items: center;
}
.newsrow:hover .newsrow__title { color: var(--terracotta); }
.newsrow__day {
  font-family: var(--display);
  font-weight: 800;
  font-size: 27px;
  line-height: 1;
  color: var(--terracotta);
  text-align: center;
}
.newsrow__month {
  font: 700 10px var(--body);
  color: var(--stone);
  text-align: center;
}
.newsrow__thumb {
  height: 62px;
  border-radius: 8px;
  background-position: center;
  background-size: cover;
  background-color: var(--cream);
}
.newsrow__cat {
  font: 700 10px var(--body);
  letter-spacing: 0.08em;
  color: var(--periwinkle);
  margin-bottom: 3px;
  text-transform: uppercase;
}
.newsrow__title {
  font: 700 17px/1.3 var(--body);
  color: var(--ink);
  transition: color 0.2s;
}

.agendarow {
  display: flex;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid rgba(72, 84, 84, 0.12);
  align-items: center;
}
.agendarow:hover .agendarow__title { color: var(--terracotta); }
.agendarow__date {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-sm);
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.agendarow__day {
  font-family: var(--display);
  font-weight: 800;
  font-size: 18px;
  color: var(--slate);
  line-height: 1;
}
.agendarow__month { font: 700 9px var(--body); color: var(--terracotta); }
.agendarow__title {
  font: 600 14px/1.35 var(--body);
  color: #3c4444;
  transition: color 0.2s;
}
.agenda__all {
  margin-top: 24px;
  background: var(--slate);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  padding: 14px;
  border-radius: var(--radius-sm);
  text-align: center;
  display: block;
}
.agenda__all:hover { background: var(--ink); }

/* --------------------------------------------------------------- objetivo */

.objective {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--terracotta), var(--terracotta-dark));
  color: #fff;
  text-align: center;
}
.objective__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.14);
  pointer-events: none;
}
.objective__ring--a { left: -50px; top: -40px; width: 230px; height: 230px; }
.objective__ring--b { right: -40px; bottom: -50px; width: 260px; height: 260px; border-color: rgba(255, 255, 255, 0.12); }
.objective__inner { position: relative; max-width: 880px; margin-inline: auto; }
.objective .kicker { color: rgba(255, 255, 255, 0.85); letter-spacing: 0.16em; }
.objective__text {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(21px, 2.6vw, 30px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.objective__text u {
  text-decoration: none;
  border-bottom: 3px solid rgba(255, 255, 255, 0.55);
  padding-bottom: 1px;
}
.objective__motto {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 99px;
  padding: 14px 28px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------------- pie */

.site-footer {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: var(--navy-pale);
  padding-top: 64px;
  padding-bottom: 48px;
}
.site-footer__mark {
  position: absolute;
  right: -46px;
  bottom: -78px;
  height: 360px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.footerGrid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.25fr 0.85fr 1.2fr;
  gap: 54px;
  max-width: var(--max);
  margin-inline: auto;
  align-items: start;
}
.footer__logo { height: 128px; margin-bottom: 22px; }
.footer__about {
  font: 500 14px/1.65 var(--body);
  color: var(--navy-muted);
  max-width: 360px;
}
/* Panel blanco detrás del logotipo del CIT: sus letras son negras y el pie es
   azul marino. Sin el panel el contraste es 1,81:1; encima del blanco, 21:1. */
.footer__funding {
  margin-top: 30px;
  display: inline-block;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 16px 22px;
}
.footer__funding img {
  display: block;
  width: 193px;
  height: auto;
  max-width: 100%;
}
.footer h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  color: #fff;
  letter-spacing: -0.01em;
}
.footer__rule { height: 1px; background: rgba(255, 255, 255, 0.22); margin: 18px 0 26px; }
.footer__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
  font: 500 15px/1.5 var(--body);
  color: var(--navy-text);
}
.footer__row svg { flex-shrink: 0; margin-top: 1px; }
.footer__row a:hover { color: #fff; text-decoration: underline; }
.footer__links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  max-width: 300px;
  font: 500 14px var(--body);
  color: #8fb0d4;
}
.footer__links a:hover { color: #fff; }
.instGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px 30px;
  align-items: center;
  justify-items: center;
}
.instGrid img { height: 56px; width: auto; }
.footer__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  margin-top: 4px;
}
.footer__social-rule { width: 42px; height: 3px; background: var(--amber); border-radius: 2px; }
.footer__social ul { display: flex; gap: 12px; list-style: none; margin: 0; padding: 0; }
.footer__social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.footer__social a:hover { background: rgba(255, 255, 255, 0.26); }
.footer__legal {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 40px auto 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font: 500 13px var(--body);
  color: #8fb0d4;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

/* ---------------------------------------------------------------- Amalia
   Asistente turística por WhatsApp. Es un proyecto ajeno al centro, así que
   conserva sus colores (el degradado violeta-azul de su marca) y no los
   nuestros. Abajo a la derecha; el WhatsApp del centro va a la izquierda. */

.amalia {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 45;               /* como el de WhatsApp: por debajo de las cookies (60) */
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.amalia__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #fff;
  color: var(--ink);
  font: 500 12.5px/1.3 var(--body);
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  white-space: nowrap;
}
.amalia__label strong {
  font: 700 13px/1.2 var(--body);
  color: #6d28d9;            /* 7,4:1 sobre blanco */
}
.amalia__btn {
  position: relative;
  width: 60px;
  height: 60px;
  flex: none;
  padding: 3px;
  border-radius: 50%;
  background: linear-gradient(135deg, #9333ea, #2563eb);
  box-shadow: 0 10px 24px -8px rgba(79, 70, 229, 0.6);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.amalia__btn img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #fff;
  object-fit: cover;
  box-sizing: border-box;
}
/* Latido: un aro que crece y se desvanece por detrás del botón. Con la
   preferencia de movimiento reducido lo apaga la regla general de arriba. */
.amalia__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  background: #a78bfa;
  opacity: 0.25;
  animation: amaliaPulse 2s infinite;
}
@keyframes amaliaPulse {
  0%        { transform: scale(1);   opacity: 0.25; }
  70%, 100% { transform: scale(1.3); opacity: 0; }
}
.amalia:focus-visible { outline: none; }
.amalia:focus-visible .amalia__btn {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px #6d28d9;
}
@media (hover: hover) and (pointer: fine) {
  .amalia:hover .amalia__btn {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 16px 30px -10px rgba(124, 58, 237, 0.7);
  }
}
/* --------------------------------------------------- páginas interiores */

.pagehead {
  background: var(--navy);
  color: #fff;
  padding-top: 62px;
  padding-bottom: 62px;
  position: relative;
  overflow: hidden;
}
/* La puerta del isotipo como marca de agua, en vez de un círculo genérico:
   es un elemento propio de la identidad del centro. */
.pagehead::after {
  content: '';
  position: absolute;
  right: clamp(-40px, -2vw, 0px);
  bottom: -58px;
  width: 300px;
  height: 330px;
  background: url('../img/puerta.svg') no-repeat center / contain;
  /* El trazo va en el naranja del logo (#f0761f dentro del SVG). Sobre el azul
     hace falta bastante opacidad para que se lea naranja y no gris: por debajo
     de ~0.45 la mezcla con el navy lo apaga. */
  opacity: 0.55;
  pointer-events: none;
}
.pagehead__inner { position: relative; z-index: 1; max-width: var(--max); margin-inline: auto; }
.pagehead .kicker { color: var(--amber-soft); }
.pagehead h1 {
  color: #fff;
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 900;
  letter-spacing: -0.02em;
  max-width: 900px;
}
.pagehead__lead {
  font: 500 17px/1.6 var(--body);
  color: rgba(255, 255, 255, 0.82);
  margin-top: 16px;
  max-width: 640px;
}

.breadcrumb {
  font: 500 13px var(--body);
  color: var(--muted);
  padding-top: 20px;
  max-width: var(--max);
  margin-inline: auto;
}
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.breadcrumb li + li::before { content: '/'; margin-right: 8px; color: var(--periwinkle); }
.breadcrumb a:hover { color: var(--terracotta); }

/* Contenido de texto largo procedente del editor. */
.prose {
  font: 400 17px/1.75 var(--body);
  color: var(--slate);
  max-width: 760px;
}
.prose h2 { font-size: 28px; margin: 2em 0 0.6em; }
.prose h3 { font-size: 21px; margin: 1.8em 0 0.5em; }
.prose h4 { font-size: 18px; margin: 1.6em 0 0.5em; }
.prose h2:first-child, .prose h3:first-child { margin-top: 0; }
.prose p { margin-bottom: 1.15em; }
.prose ul, .prose ol { margin-bottom: 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: 0.4em; }
.prose a { color: var(--terracotta); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--terracotta-dark); }
.prose img { border-radius: 12px; margin: 1.6em 0; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--amber);
  font-size: 19px;
  font-style: italic;
  color: var(--ink);
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--line-strong); padding: 10px 12px; text-align: left; }
.prose th { background: var(--cream); font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--line-strong); margin: 2em 0; }

/* Barra de filtros por categoría. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 34px;
}
.filters a {
  font: 700 12px var(--display);
  padding: 9px 16px;
  border-radius: 99px;
  border: 1px solid var(--line-strong);
  color: var(--slate);
  transition: all 0.2s;
}
.filters a:hover { border-color: var(--terracotta); color: var(--terracotta); }
.filters a.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Paginación. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 46px;
  font: 700 13px var(--display);
}
.pagination a,
.pagination span {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  color: var(--slate);
}
.pagination a:hover { border-color: var(--terracotta); color: var(--terracotta); }
.pagination .is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.pagination .is-disabled { opacity: 0.35; }

.empty {
  padding: 60px 0;
  text-align: center;
  color: var(--muted);
  font-size: 17px;
}

/* Detalle de noticia / evento. */
.article-head { max-width: 860px; margin-inline: auto; }
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  font: 600 13px var(--body);
  color: var(--muted);
  margin-top: 16px;
}
.article-meta .badge {
  background: var(--cream);
  color: var(--terracotta);
  border-radius: 99px;
  padding: 5px 13px;
  font: 700 11px var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* Ancho de las fichas con imagen de cabecera. La imagen y el contenido lo
   comparten para que queden alineados; está en una variable para que no se
   puedan separar por descuido. */
:root { --ficha-max: 1100px; }

.article-hero {
  max-width: var(--ficha-max);
  margin: 38px auto 0;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--cream);
}
.article-hero img { width: 100%; height: 100%; object-fit: cover; }
.article-body { max-width: 760px; margin: 46px auto 0; }

/* Contenido ancho, a la misma anchura que la imagen de cabecera. Se usa en las
   fichas de espacio, donde el contenido es sobre todo visual. Las noticias
   siguen en la columna estrecha: 1100 px de texto corrido son unos 110
   caracteres por línea y se leen mal. */
.prose--wide { max-width: var(--ficha-max); }

/* Un botón dentro del contenido no es un enlace de texto.
   `.prose a` (0,1,1) gana por especificidad a `.btn-primary` (0,1,0) y le
   repintaba el texto de naranja sobre el naranja del propio botón, además de
   subrayarlo. Aquí se le devuelve lo suyo a cada variante. */
.prose a.btn { text-decoration: none; }
.prose a.btn-primary,
.prose a.btn-navy { color: #fff; }
.prose a.btn-outline { color: var(--slate); }
.prose a.btn-white { color: var(--logo-ember); }
.prose a.btn-primary:hover,
.prose a.btn-navy:hover { color: #fff; }

/* Dato destacado en una ficha (el aforo de un espacio, por ejemplo). */
.badge {
  display: inline-block;
  background: var(--cream-warm);
  border: 1px solid rgba(176, 64, 12, 0.28);
  color: var(--logo-ember);
  font: 700 13px/1 var(--display);
  letter-spacing: 0.02em;
  padding: 11px 18px;
  border-radius: 99px;
}

.event-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 26px 28px;
  margin: 0 auto 36px;
  max-width: 760px;
}
.event-facts dt {
  font: 700 11px var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--periwinkle);
  margin-bottom: 5px;
}
.event-facts dd {
  margin: 0;
  font: 600 16px var(--body);
  color: var(--ink);
}

/* Formulario de contacto. */
.form { max-width: 640px; }
.form__row { margin-bottom: 20px; }
.form label {
  display: block;
  font: 700 13px var(--body);
  color: var(--ink);
  margin-bottom: 7px;
}
.form input[type='text'],
.form input[type='email'],
.form input[type='tel'],
.form textarea,
.form select {
  width: 100%;
  font: 400 16px var(--body);
  color: var(--ink);
  padding: 13px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus,
.form textarea:focus,
.form select:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(216, 120, 60, 0.15);
}
.form .has-error input,
.form .has-error textarea { border-color: #c0392b; }
.form__error {
  display: block;
  margin-top: 6px;
  font: 600 12px var(--body);
  color: #c0392b;
}
.form__check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font: 400 14px/1.5 var(--body);
  color: var(--muted);
}
.form__check input { margin-top: 3px; flex-shrink: 0; }
.form__check a { color: var(--terracotta); text-decoration: underline; }

.alert {
  padding: 16px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 26px;
  font: 500 15px var(--body);
}
.alert--ok { background: #edf7ee; color: #256b2c; border: 1px solid #b9dfbd; }
.alert--error { background: #fdeceb; color: #a02c22; border: 1px solid #f2c2bd; }

/* Bloque de contacto de cierre. */
.contact-cta {
  background: var(--cream);
  text-align: center;
}
.contact-cta h2 { font-size: clamp(24px, 3vw, 34px); }
.contact-cta p { margin-top: 12px; color: var(--muted); font-size: 17px; }
.contact-cta .btn { margin-top: 24px; }

/* --------------------------------------------------------------- cookies */

.cookiebar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 18px 50px -12px rgba(20, 26, 26, 0.4);
  border: 1px solid var(--line-strong);
  padding: 22px 24px;
  max-width: 760px;
  margin-inline: auto;
}
.cookiebar[hidden] { display: none; }
.cookiebar h2 { font-size: 19px; margin-bottom: 8px; }
.cookiebar p { font: 400 14px/1.6 var(--body); color: var(--muted); }
.cookiebar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.cookiebar__actions .btn { font-size: 13px; padding: 12px 20px; }
.btn-outline {
  border: 1px solid var(--line-strong);
  color: var(--slate);
  background: #fff;
}
.btn-outline:hover { border-color: var(--slate); }
.cookiebar__prefs { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.cookiebar__prefs[hidden] { display: none; }
.cookie-opt {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.cookie-opt:last-child { border-bottom: 0; }
.cookie-opt strong { display: block; font: 700 14px var(--body); color: var(--ink); }
.cookie-opt p { font-size: 13px; margin-top: 3px; }
.cookie-opt__state { margin-left: auto; font: 700 11px var(--body); color: var(--periwinkle); white-space: nowrap; }

/* ------------------------------------------------------------ responsive */

/* Franja estrecha: el menú completo cabe con calzador. Antes esto no se veía
   porque el logotipo se dejaba achatar para hacer sitio; ahora que conserva su
   proporción, el hueco hay que sacarlo de donde no se nota. */
@media (min-width: 1081px) and (max-width: 1519px) {
  .navlinks { gap: 14px; }
  .navbar__actions { gap: 8px; }
  .navbar { padding-left: 28px; padding-right: 28px; }
}


@media (max-width: 1080px) {
  .navlinks { display: none; }
  /* La lupa sobra: el menú móvil ya lleva su propio campo de búsqueda. */
  .navsearch { display: none; }
  /* Y las herramientas de accesibilidad, igual: van dentro del menú, donde se
     pulsan mejor. En la barra ocupaban el sitio de la hamburguesa y la
     empujaban fuera de la pantalla. */
  .a11y--barra { display: none; }
  .burger { display: flex; }
  /* Las barras pasan a la X sin animación, por lo mismo que el logotipo: la
     transición no llegaba a completarse en el móvil y las barras se quedaban
     como estaban, así que el botón seguía siendo una hamburguesa con el menú
     ya abierto. Sin transición, el cambio es inmediato y no depende de nada. */
  .burger span { transition: none; }
  .megagrid { grid-template-columns: repeat(3, 1fr); }
  .areas-overlap {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    margin-top: -40px;
  }
  .area-card--tall { grid-row: auto; min-height: 230px; }
  /* En dos columnas ya no hay composición que mantener: el grande dejaría un
     hueco al lado, así que todos pasan a ocupar una fila. El alto va en la
     tarjeta, no en la fila, para que nunca se salga de su hueco. */
  .banners-overlap {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    margin-top: -40px;
  }
  .banner-card { height: 172px; }
  .banner-card--tall { grid-row: auto; height: 172px; min-height: 0; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
  .newsGrid { grid-template-columns: 1fr; }
  .newsLeft { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; }
  .newsRight { padding-left: 0; }
  .manifesto { grid-template-columns: 1fr; gap: 30px; }
  .footerGrid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footerGrid > *:nth-child(3) { grid-column: 1 / -1; }
  .footer__social { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .megagrid { grid-template-columns: repeat(2, 1fr); }
  .areas-overlap { grid-template-columns: 1fr; margin-top: 18px; }
  /* En una sola columna se mantiene la jerarquía subiendo el alto de los
     grandes: si no, la diferencia queda en unos píxeles y parece un fallo.

     El alto va en la tarjeta y las filas son automáticas. Con filas de tamaño
     fijo, una tarjeta más alta que su fila se sale de ella y se monta sobre la
     siguiente: la rejilla reserva el hueco de la fila, no el de la tarjeta. */
  .banners-overlap {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    margin-top: 18px;
  }
  .banner-card { height: 158px; }
  .banner-card--tall { height: 210px; min-height: 0; }
  .bands { grid-template-columns: 1fr; }
  .band { min-height: 320px; }
  .footerGrid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: 1fr; }
  .manifesto__stats { grid-template-columns: 1fr; gap: 22px; }
  .lang { display: none; }
  .navbar__cta { display: none; }
  /* El hero tenía altura fija y el contenido centrado con 120 px de hueco
     abajo: en un móvil el titular, el texto y los dos botones no caben en ese
     alto, así que se desbordaban hacia arriba y el título salía pegado a la
     cabecera. Ahora la altura es un mínimo y la caja crece si hace falta. */
  .hero { height: auto; min-height: 78vh; }
  .hero__inner {
    padding-top: 40px;
    padding-bottom: 116px;
  }
  .hero h1 { font-size: clamp(32px, 8.4vw, 46px); }
  .hero__lead { font-size: 15.5px; }
  .hero__actions { gap: 10px; }
  .hero__dots { bottom: 30px; }
  .newsrow { grid-template-columns: 52px 1fr; }
  .newsrow__thumb { display: none; }
  .section { padding-top: 52px; padding-bottom: 52px; }
  .newsLeft, .newsRight { padding-top: 44px; padding-bottom: 44px; }
  .prose { font-size: 16px; }
  .cookiebar { left: 10px; right: 10px; bottom: 10px; padding: 18px; }
  .cookiebar__actions .btn { flex: 1 1 auto; text-align: center; }
}

/* Menú móvil abierto: bloqueamos el scroll del fondo. */
body.nav-open { overflow: hidden; }

@media print {
  .site-header, .site-footer, .amalia, .cookiebar, .hero__dots { display: none !important; }
  body { color: #000; }
}

/* =========================================================================
   Contenido enriquecido: alineación, figuras, galerías, incrustados
   y visor de imágenes a pantalla completa.
   ========================================================================= */

/* -------------------------------------------------------- alineación */

.prose .align-left { text-align: left; }
.prose .align-center { text-align: center; }
.prose .align-right { text-align: right; }
.prose .align-justify { text-align: justify; }

/* ----------------------------------------------------------- figuras */

/* El ancho lo puede fijar el editor con un `style="width:N%"` en la propia
   figura (los manejadores de tamaño del panel). Aquí sólo se pone el tope
   para que un valor heredado de otra plantilla no desborde la columna. */
.prose figure {
  margin: 2em 0;
  max-width: 100%;
}
.prose .embed,
.prose .gallery { max-width: 100%; }
.prose figure img {
  margin: 0;
  border-radius: 12px;
  width: 100%;
  height: auto;
}
.prose figcaption {
  font: 500 14px/1.5 var(--body);
  color: var(--muted);
  text-align: center;
  margin-top: 10px;
  font-style: italic;
}

/* Ajuste del texto respecto a la figura.
   Con `float` el texto la rodea; sin él la figura ocupa su propia línea y el
   texto continúa debajo, colocada a la izquierda, centrada o a la derecha. */
.prose .img-block-left  { margin-inline: 0 auto; }
.prose .img-center      { margin-inline: auto; }
.prose .img-block-right { margin-inline: auto 0; }
.prose .img-full img { width: 100%; }

/* Ancho por defecto de una imagen flotada. Va en `width` y no en `max-width`
   porque un max-width ganaría al ancho en línea que fija el editor y los
   manejadores no podrían pasar del 46 %. */
.prose .img-left {
  float: left;
  width: 46%;
  margin: 0.4em 2em 1.2em 0;
}
.prose .img-right {
  float: right;
  width: 46%;
  margin: 0.4em 0 1.2em 2em;
}
.prose .img-left + *, .prose .img-right + * { margin-top: 0; }

/* Que el texto siguiente no se meta debajo de una imagen flotada. */
.prose h2, .prose h3, .prose blockquote, .prose .gallery, .prose .embed { clear: both; }

/* ---------------------------------------------------------- galerías */

.prose .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 2em 0;
  clear: both;
}
.prose .gallery-2 { grid-template-columns: repeat(2, 1fr); }
.prose .gallery-4 { grid-template-columns: repeat(4, 1fr); }

.prose .gallery-item {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  background: var(--cream);
  text-decoration: none;
}
.prose .gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  transition: transform 0.45s ease;
}
.prose .gallery-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(20, 26, 26, 0);
  transition: background 0.3s;
}
.prose .gallery-item:hover img { transform: scale(1.06); }
.prose .gallery-item:hover::after { background: rgba(20, 26, 26, 0.18); }

/* -------------------------------------------------------- incrustados */

.prose .embed {
  margin: 2em 0;
  clear: both;
}
.prose .embed iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 12px;
  display: block;
  background: var(--ink);
}
.prose .embed-pdf iframe {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line-strong);
  background: var(--cream);
}

/* Imágenes sueltas del contenido importado: también con esquinas y lightbox. */
.prose > p > img,
.prose > img {
  border-radius: 12px;
  margin: 1.8em 0;
}

.prose a[data-lightbox],
.prose img[data-zoomable] {
  cursor: zoom-in;
}

/* --------------------------------------------------- visor a pantalla completa */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(12, 16, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__figure {
  max-width: min(94vw, 1400px);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.lightbox__img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  transform: scale(0.96);
  transition: transform 0.28s ease;
}
.lightbox.is-open .lightbox__img { transform: scale(1); }

.lightbox__caption {
  font: 500 14px/1.5 var(--body);
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  max-width: 680px;
  padding: 0 20px;
}

.lightbox__btn {
  position: absolute;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  transition: background 0.2s, transform 0.2s;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.26); transform: scale(1.06); }
.lightbox__close { top: 22px; right: 22px; font-size: 26px; }
.lightbox__prev { left: 22px; top: 50%; margin-top: -26px; }
.lightbox__next { right: 22px; top: 50%; margin-top: -26px; }
.lightbox__btn[hidden] { display: none; }

.lightbox__counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font: 600 12px var(--mono);
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.06em;
}

body.lightbox-open { overflow: hidden; }

@media (max-width: 680px) {
  .prose .gallery,
  .prose .gallery-3,
  .prose .gallery-4 { grid-template-columns: repeat(2, 1fr); }

  .prose .img-left,
  .prose .img-right {
    float: none;
    margin: 1.6em 0;
  }

  /* En móvil todo va a una sola columna. El !important es necesario aquí:
     el ancho que fija el editor viaja en el atributo style de la figura y
     una regla normal no puede ganarle. Sin esto, una foto puesta al 35 %
     para que el texto la rodease en escritorio saldría en el móvil como
     una miniatura de 120 px en mitad de la página. */
  .prose figure,
  .prose .embed,
  .prose .gallery { width: auto !important; }

  .lightbox__prev { left: 10px; }
  .lightbox__next { right: 10px; }
  .lightbox__btn { width: 44px; height: 44px; font-size: 20px; }
  .lightbox__close { top: 12px; right: 12px; }
  .prose .embed-pdf iframe { aspect-ratio: 2 / 3; }
}

/* La imagen destacada de una noticia también se amplía al pulsarla. */
.article-hero img[data-zoomable] { cursor: zoom-in; }

/* Bloques de código en el contenido publicado. */
.prose pre {
  background: #1d2430;
  color: #d7e2ef;
  border-radius: 12px;
  padding: 20px 22px;
  overflow-x: auto;
  font: 400 14px/1.7 ui-monospace, Menlo, Consolas, monospace;
  margin: 1.8em 0;
  clear: both;
}
.prose pre code { background: none; color: inherit; padding: 0; border: 0; font-size: inherit; }
.prose code {
  background: var(--cream);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 1px 6px;
  font: 400 14px ui-monospace, Menlo, Consolas, monospace;
  color: var(--terracotta-dark);
}
.prose kbd {
  background: var(--ink);
  color: #fff;
  border-radius: 5px;
  padding: 2px 7px;
  font: 600 12.5px ui-monospace, Menlo, Consolas, monospace;
}

/* =========================================================================
   Cabecera fija, redes en el menú y botones de compartir
   ========================================================================= */

:root {
  /* Naranja de marca oscurecido hasta cumplir el contraste AA (4.88:1 sobre
     blanco). Se usa donde hay texto pequeño en blanco sobre naranja. */
  --terracotta-aa: #b35722;

  /* Los tres naranjas del isotipo, muestreados del propio archivo del logo:
     dorado #da942e, naranja #f0761f y rojizo #d24f0e. Tal cual no valen para
     texto en blanco (2.5:1, 2.9:1 y 4.3:1), así que cada uno se oscurece lo
     justo para cumplir el mínimo que le toca por su uso.

     El bloque de la derecha de la cabecera reproduce el degradado del logo de
     izquierda a derecha: dorado (redes) → naranja (idiomas) → rojizo (CTA). */
  --logo-gold: #b0761b;        /* fondo de las redes al pasar el ratón — 3.85:1 */
  --logo-gold-ink: #a8711a;    /* icono de red en reposo sobre blanco — 4.17:1 */

  --logo-orange: #bc5a0f;      /* idioma activo, texto blanco — 4.56:1 */
  --logo-orange-tint: #fceede; /* fondo del idioma inactivo al pasar el ratón */

  --logo-ember: #b0400c;       /* botón Inscríbete, texto blanco — 5.86:1 */
  --logo-ember-dark: #96360a;  /* Inscríbete al pasar el ratón — 7.42:1 */
}

/* --------------------------------------------------------- cabecera fija */

.site-header.is-sticky {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.25s ease, background 0.25s ease;
}

.site-header.is-sticky.is-stuck {
  box-shadow: 0 6px 24px -12px rgba(20, 26, 26, 0.34);
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: saturate(180%) blur(8px);
}

/* Al bajar, la barra se encoge para robar menos pantalla. */
.site-header.is-sticky .navbar {
  transition: padding 0.25s ease;
}
.site-header.is-stuck .navbar {
  padding-top: 8px;
  padding-bottom: 8px;
}
.navbar__logo img {
  transition: height 0.25s ease;
}
.site-header.is-stuck .navbar__logo img {
  height: 44px;
}
.site-header.is-stuck .navsocial {
  opacity: 0;
  width: 0;
  margin: 0;
  overflow: hidden;
  pointer-events: none;
}

/* El mega menú cuelga de la cabecera fija. */
.site-header.is-sticky .mega {
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

/* --------------------------------------------------- redes en la cabecera */

.navsocial {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0 4px 0 0;
  padding: 0;
  transition: opacity 0.2s ease, width 0.25s ease, margin 0.25s ease;
}
/* El recuadro está siempre visible para que se lean como botones; al pasar
   el ratón se rellena con el dorado del logo. */
.navsocial a {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--logo-gold-ink);
  background: #fff;
  border: 1px solid rgba(176, 118, 27, 0.32);
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.navsocial a:hover,
.navsocial a:focus-visible {
  background: var(--logo-gold);
  border-color: var(--logo-gold);
  color: #fff;
  transform: translateY(-1px);
}

/* ----------------------------------------- naranja en el selector y el CTA */

.lang {
  border-color: rgba(188, 90, 15, 0.32);
}
.lang .is-active {
  background: var(--logo-orange);
  color: #fff;
}
.lang a:hover {
  background: var(--logo-orange-tint);
  color: var(--logo-orange);
}

.navbar__cta.btn-navy,
.navbar__cta {
  background: var(--logo-ember);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(176, 64, 12, 0.75);
}
.navbar__cta:hover {
  background: var(--logo-ember-dark);
  color: #fff;
}

.mobilenav__cta.btn-navy {
  background: var(--logo-ember);
}

/* La hamburguesa acompaña al CTA, que es lo que tiene al lado.

   Sólo donde hay ratón: en una pantalla táctil el navegador deja el `:hover`
   pegado al último elemento tocado, así que el botón se quedaba resaltado en
   naranja después de cerrar el menú, como si siguiera activo. */
@media (hover: hover) and (pointer: fine) {
  .burger:hover {
    border-color: var(--logo-ember);
  }
  .burger:hover span { background: var(--logo-ember); }
}

/* ----------------------------------------------------- botones de compartir */

.article-foot {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
}

.share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}
.share__label {
  font: 700 11px var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--periwinkle);
}
.share__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.share__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  color: var(--slate);
  background: #fff;
  transition: background 0.18s, color 0.18s, border-color 0.18s, transform 0.18s;
}
.share__btn:hover,
.share__btn:focus-visible {
  background: var(--brand, var(--navy));
  border-color: var(--brand, var(--navy));
  color: #fff;
  transform: translateY(-2px);
}
.share__btn.is-copied {
  background: #256b2c;
  border-color: #256b2c;
  color: #fff;
}

/* Aviso «enlace copiado». */
.share__toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%) translateY(12px);
  background: var(--ink);
  color: #fff;
  font: 600 14px var(--body);
  padding: 12px 22px;
  border-radius: 99px;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 90;
}
.share__toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Va aquí, después de la definición de .navsocial, y no con el resto de reglas
   adaptativas: allí arriba tiene la misma especificidad pero está antes en el
   fichero, así que el `display:flex` de abajo la anulaba y los iconos no se
   ocultaban. */
/* Los iconos de redes son lo primero que se cae cuando la barra va justa: son
   decorativos y están también en el pie, mientras que el logotipo, el menú, los
   idiomas y las herramientas de accesibilidad no se pueden quitar. */
@media (max-width: 1519px) {
  .navsocial { display: none; }
}

@media (max-width: 680px) {
  .site-header.is-stuck .navbar__logo img { height: 40px; }
  /* Sin transición en el móvil: el cambio de tamaño es instantáneo. Con ella,
     cualquier captura hecha durante el cuarto de segundo que dura pilla el
     logotipo a medio camino, y no había forma de saber si el estado era el
     correcto o el de la animación. */
  .navbar__logo img { transition: none; }
  .article-foot { flex-direction: column; align-items: flex-start; }
  .share { margin-left: 0; }
}

/* =========================================================================
   Agenda: cambio de vista, listado y calendario mensual
   ========================================================================= */

.agenda-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 32px;
}

/* ------------------------------------------------------ cambio de vista */

.viewswitch {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: 99px;
  padding: 3px;
  background: #fff;
}
.viewswitch a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 12.5px var(--display);
  padding: 8px 16px;
  border-radius: 99px;
  color: var(--muted);
  transition: background 0.18s, color 0.18s;
}
.viewswitch a:hover { color: var(--terracotta-aa); }
.viewswitch a.is-active {
  background: var(--terracotta-aa);
  color: #fff;
}

/* ----------------------------------------------------------- listado */

.eventrow {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 22px 26px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.eventrow:hover {
  border-color: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(28, 34, 34, 0.4);
}
.eventrow.is-past { opacity: 0.72; }

.eventrow__date {
  text-align: center;
  background: var(--cream);
  border-radius: 12px;
  padding: 14px 6px;
}
.eventrow__day {
  font: 800 30px var(--display);
  line-height: 1;
  color: var(--terracotta);
}
.eventrow__month {
  font: 700 11px var(--body);
  letter-spacing: 0.06em;
  color: var(--stone);
}
.eventrow__year { font: 600 11px var(--body); color: var(--muted-soft); }

.eventrow__meta {
  font: 700 10px var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--periwinkle);
  margin-bottom: 5px;
}
.eventrow__title { font-size: 21px; margin-bottom: 7px; }
.eventrow__text { font: 500 14px/1.5 var(--body); color: var(--muted); margin: 0; }

/* ------------------------------------------------- navegación del mes */

.calnav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.calnav__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: var(--slate);
  background: #fff;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.calnav__btn:hover {
  border-color: var(--terracotta-aa);
  color: var(--terracotta-aa);
  background: var(--cream-warm);
}
.calnav__label {
  font-size: clamp(20px, 2.6vw, 26px);
  text-transform: capitalize;
  min-width: 210px;
}
.calnav__today {
  margin-left: auto;
  font: 700 12.5px var(--display);
  color: var(--terracotta-aa);
  border: 1px solid rgba(216, 120, 60, 0.4);
  border-radius: 99px;
  padding: 8px 16px;
  transition: background 0.18s;
}
.calnav__today:hover { background: var(--cream-warm); }

/* ------------------------------------------------------- rejilla mensual */

.calendar {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.calendar__head {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--cream);
  border-bottom: 1px solid var(--line-strong);
}
.calendar__head span {
  padding: 12px 8px;
  text-align: center;
  font: 700 11px var(--body);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.calendar__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
}
.calendar__week:last-child { border-bottom: 0; }

.calendar__day {
  min-height: 116px;
  padding: 8px 8px 10px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.calendar__day:last-child { border-right: 0; }
.calendar__day.is-outside { background: #fbfcfd; }
.calendar__day.is-outside .calendar__num { color: var(--line-strong); }

.calendar__num {
  font: 700 13px var(--body);
  color: var(--slate);
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.calendar__day.is-today .calendar__num {
  background: var(--terracotta-aa);
  color: #fff;
}

/* Un evento dentro de una casilla. */
.calevent {
  display: block;
  font: 600 11.5px/1.35 var(--body);
  background: var(--navy);
  color: #fff;
  border-radius: 6px;
  padding: 5px 7px;
  overflow: hidden;
  transition: background 0.18s, transform 0.18s;
}
.calevent:hover { background: var(--terracotta-aa); transform: translateX(1px); }
.calevent.is-past { background: #9aa4ad; }
.calevent.is-past:hover { background: var(--slate); }

.calevent__time {
  display: block;
  font: 700 10px var(--mono);
  opacity: 0.75;
}
.calevent__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Eventos de varios días: barra continua entre casillas. */
.calevent.is-span { border-radius: 0; margin-inline: -8px; padding-inline: 8px; }
.calevent.is-span.is-start { border-radius: 6px 0 0 6px; margin-left: 0; }
.calevent.is-span.is-end { border-radius: 0 6px 6px 0; margin-right: 0; }
.calevent__cont { display: block; text-align: center; opacity: 0.5; }

.calendar__count {
  margin-top: 18px;
  font: 600 13px var(--body);
  color: var(--muted);
  text-align: center;
}

@media (max-width: 900px) {
  .calendar__day { min-height: 92px; padding: 6px 5px 8px; }
  .calevent { font-size: 10.5px; padding: 4px 5px; }
  .calevent__title { -webkit-line-clamp: 2; }
  .calnav__label { min-width: 0; }
}

@media (max-width: 680px) {
  .agenda-bar { flex-direction: column; align-items: stretch; }
  .viewswitch { align-self: flex-start; }

  /* En móvil la rejilla de 7 columnas es ilegible: pasamos a lista de días
     y ocultamos los que no tienen nada. */
  .calendar__head { display: none; }
  .calendar__week { grid-template-columns: 1fr; border: 0; }
  .calendar__day {
    display: none;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
  }
  .calendar__day.has-events { display: flex; }
  .calendar__day.is-today { display: flex; background: var(--cream-warm); }
  .calendar__num {
    width: 40px;
    height: auto;
    border-radius: 8px;
    padding: 4px 0;
    background: var(--cream);
    font-size: 15px;
  }
  .calendar__day > :not(.calendar__num) { flex: 1; }
  .calevent { margin-inline: 0 !important; border-radius: 6px !important; }
  .calevent__cont { display: none; }
  .eventrow { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 16px 18px; }
  .eventrow__day { font-size: 24px; }
}

/* En pantallas estrechas la puerta se reduce para no invadir el titular. */
@media (max-width: 680px) {
  .pagehead::after {
    width: 180px;
    height: 200px;
    bottom: -40px;
    right: -30px;
    opacity: 0.1;
  }
}

/* ------------------------------- Navegación lateral de un área y sus páginas */

.subnav {
  background: var(--cream);
  border-radius: var(--radius);
  padding: 26px 24px;
}
.subnav__title {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.subnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 500 15px/1.5 var(--body);
}
.subnav li {
  padding: 0;
  border-bottom: 1px solid var(--line);
}
.subnav li:last-child { border-bottom: 0; }
.subnav li a {
  display: block;
  padding: 10px 0;
  color: var(--slate);
  transition: color 0.18s, padding-left 0.18s;
}
.subnav li a:hover,
.subnav li a[aria-current='page'] {
  color: var(--terracotta-aa);
  padding-left: 6px;
}
.subnav--plain li { padding: 10px 0; color: var(--muted); }
.subnav__plain { display: block; padding: 10px 0; color: var(--muted); }

.subnav__back {
  display: inline-block;
  margin-top: 18px;
  font: 700 13px var(--display);
  color: var(--terracotta-aa);
}
.subnav__back:hover { text-decoration: underline; }

@media (max-width: 900px) {
  .subnav { position: static !important; }
}

/* =========================================================================
   Botón flotante de WhatsApp
   ========================================================================= */

.wa {
  position: fixed;
  left: 26px;
  bottom: 26px;
  z-index: 45;               /* por debajo del aviso de cookies (60) */
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.wa__btn {
  width: 58px;
  height: 58px;
  flex: none;
  border-radius: 50%;
  background: #25d366;       /* verde de marca de WhatsApp */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  /* El logotipo está exento del mínimo de contraste de WCAG, pero el borde
     del botón sí tiene que distinguirse del fondo blanco de la página: de
     ahí el aro más oscuro y la sombra. */
  box-shadow: 0 0 0 1px rgba(11, 92, 47, 0.35), 0 10px 24px -8px rgba(11, 92, 47, 0.65);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wa:hover .wa__btn,
.wa:focus-visible .wa__btn {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(11, 92, 47, 0.45), 0 16px 30px -10px rgba(11, 92, 47, 0.7);
}

.wa__label {
  background: #fff;
  color: var(--ink);
  font: 700 12.5px var(--body);
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  white-space: nowrap;
}

/* En móvil el botón es pequeño y sin etiqueta, para no comerse la pantalla. */
@media (max-width: 680px) {
  .wa { left: 14px; bottom: 14px; gap: 0; }
  .wa__btn { width: 44px; height: 44px; }
  .wa__btn svg { width: 23px; height: 23px; }
  .wa__label { display: none; }

  /* Amalia sí conserva su etiqueta en el móvil, que es donde más se usa
     WhatsApp, pero más pequeña y en dos líneas para que quepa junto al
     botón de WhatsApp de la otra esquina. */
  .amalia { right: 14px; bottom: 14px; gap: 8px; }
  .amalia__btn { width: 50px; height: 50px; }
  .amalia__label {
    white-space: normal;
    max-width: 150px;
    font-size: 11.5px;
    padding: 7px 11px;
  }
}

/* Mientras se ve el aviso de cookies, el botón sube para no quedar debajo.
   Sólo hace falta en pantallas estrechas: en escritorio el aviso va centrado
   y con ancho máximo, así que no llega a la esquina izquierda. */
@media (max-width: 820px) {
  body:has(.cookiebar:not([hidden])) .wa,
  body:has(.cookiebar:not([hidden])) .amalia { bottom: 190px; }
}

/* Al imprimir no pinta nada. */
@media print {
  .wa { display: none !important; }
}

/* =========================================================================
   Aviso emergente (pop-up)
   ========================================================================= */

.popup[hidden] { display: none; }

.popup {
  position: fixed;
  inset: 0;
  z-index: 200;              /* por encima del aviso de cookies */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* La capa que oscurece la web mientras se muestra el aviso. */
.popup__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 26, 26, 0.62);
  backdrop-filter: blur(2px);
  animation: popupFade 0.25s ease;
}

.popup__box {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
  animation: popupIn 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes popupFade { from { opacity: 0; } }
@keyframes popupIn {
  from { opacity: 0; transform: translateY(14px) scale(0.97); }
}

/* Botón de cerrar: grande y siempre a la vista, que es lo que más molesta
   cuando no se encuentra. */
.popup__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  transition: background 0.15s, transform 0.15s;
}
.popup__close:hover { background: #fff; transform: scale(1.06); }

.popup__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius) var(--radius) 0 0;
}

.popup__body { padding: 26px 28px 28px; }

.popup__title {
  font: 900 24px/1.25 var(--display);
  color: var(--ink);
  margin-bottom: 12px;
}

.popup__text {
  font: 400 16px/1.65 var(--body);
  color: var(--slate);
}
.popup__text p { margin-bottom: 0.9em; }
.popup__text p:last-child { margin-bottom: 0; }
.popup__text a { color: var(--logo-ember); text-decoration: underline; }

.popup__actions { margin-top: 20px; }
.popup__actions .btn { text-decoration: none; }

@media (max-width: 680px) {
  .popup { padding: 14px; align-items: flex-end; }
  .popup__box { width: 100%; max-height: 88vh; }
  .popup__body { padding: 20px 20px 22px; }
  .popup__title { font-size: 20px; }
  .popup__text { font-size: 15px; }
}

/* Sin animaciones para quien las ha desactivado en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .popup__backdrop, .popup__box { animation: none; }
}

@media print {
  .popup { display: none !important; }
}

/* --------------------------------------- directorio de departamentos */

.deplist {
  list-style: none;
  margin: 0;
  padding: 0;
  font: 500 14px/1.5 var(--body);
}
.deplist li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.deplist li:last-child { border-bottom: 0; }
.deplist__name {
  display: block;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.deplist a {
  display: block;
  word-break: break-word;   /* los correos largos no desbordan la columna */
}
/* Por el tipo de enlace, no por el orden: así no hay que acordarse de nada
   al añadir un departamento sin teléfono. */
.deplist a[href^="mailto:"] { color: var(--link-mail); }
.deplist a[href^="tel:"]    { color: var(--link-tel); font-variant-numeric: tabular-nums; }

/* Pista bajo un campo del formulario. */
.form__hint {
  margin-top: 6px;
  font: 500 13px/1.45 var(--body);
  color: var(--muted);
}