/* =========================================================
   Colegio NSD — Sistema de diseño
   ---------------------------------------------------------
   Dos capas de tokens:

   1. RAMPA DE MARCA (--brand-*, --gold-*)
      Valores FIJOS. Nunca cambian entre temas. Úsalos cuando
      el color debe ser el mismo siempre (footer, secciones
      oscuras, el logo, gradientes de marca).

   2. TOKENS SEMÁNTICOS (--ink-*, --white, --surface-*)
      Texto, fondos y bordes. Nombres por función, no por color,
      para poder ajustar la paleta sin tocar los componentes.
   ========================================================= */

:root {
  color-scheme: light dark;

  /* ── 1. Rampa de marca ─────────────────────────────────── */
  --brand-900: #04120A;
  --brand-800: #0B3A18;
  --brand-700: #10572C;
  --brand-600: #1A7040;
  --brand-500: #229050;
  --brand-400: #3FA858;
  --brand-300: #5EBF78;
  --brand-200: #9BD6AE;
  --brand-100: #D4EBE0;
  --brand-50:  #EAF5EF;

  --gold-700: #6A4700;
  --gold-500: #C49200;
  --gold-400: #D4A80E;
  --gold-300: #E3C254;
  --gold-100: #F2E6C4;

  /* ── 2. Tokens adaptativos ─────────────────────────────── */
  /* Verde interactivo: botones, enlaces, iconos */
  --green-900: #04120A;
  --green-800: #0B3A18;
  --green-700: #10572C;
  --green-600: #1A7040;
  --green-500: #229050;
  --green-400: #3FA858;
  --green-300: #5EBF78;
  --green-200: #9BD6AE;
  --green-100: #D4EBE0;
  --green-50:  #EAF5EF;

  /* Oro — acento único, solo para énfasis puntual */
  --yellow-700: #6A4700;
  --yellow-500: #C49200;
  --yellow-400: #D4A80E;
  --yellow-100: #F2E6C4;

  /* Texto — de más a menos contraste. La escala está completa a
     propósito: algunas páginas usan los pasos intermedios en estilos
     inline y si falta el token el color se queda sin resolver. */
  --ink-900: #101810;
  --ink-800: #1C281C;
  --ink-700: #283828;
  --ink-600: #3A4E3D;
  --ink-500: #4C6450;
  --ink-400: #697F6C;
  --ink-300: #869E88;
  --ink-200: #A6BBA9;
  --ink-100: #C6D8CA;
  --ink-50:  #E6F0E8;

  /* Superficies — crema pergamino */
  --white:          #F5F1EA;
  --surface:        #F5F1EA;  /* fondo de página */
  --surface-raised: #FFFCF7;  /* tarjetas, menús, popovers */
  --surface-sunken: #EDE8DF;  /* secciones suaves, zonas hundidas */
  --surface-subtle: #EDE8DF;  /* chips, iconos, botones fantasma */
  --surface-overlay: rgba(245,241,234,.82); /* barras translúcidas */
  --border:        #DED8CC;
  --border-strong: #C7BFAE;

  /* ── Geometría — curvatura continua estilo Apple ───────── */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius:     14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* ── Elevación — sombras suaves y teñidas, en capas ────── */
  --shadow-xs: 0 1px 2px rgba(11,58,24,.06);
  --shadow-sm: 0 1px 3px rgba(11,58,24,.07), 0 4px 10px -4px rgba(11,58,24,.06);
  --shadow:    0 2px 6px rgba(11,58,24,.07), 0 12px 28px -8px rgba(11,58,24,.12);
  --shadow-lg: 0 4px 12px rgba(11,58,24,.08), 0 28px 56px -16px rgba(11,58,24,.18);
  --shadow-xl: 0 8px 20px rgba(11,58,24,.10), 0 44px 88px -24px rgba(11,58,24,.24);
  /* Brillo interior superior: da volumen sin recurrir a glows */
  --sheen: inset 0 1px 0 rgba(255,255,255,.7);

  /* ── Movimiento — curvas estilo Apple ──────────────────── */
  --ease-out:    cubic-bezier(.32,.72,0,1);   /* la curva firma */
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1); /* rebote sutil */
  --dur-fast: .16s;
  --dur:      .28s;
  --dur-slow: .48s;

  /* ── Layout ────────────────────────────────────────────── */
  --container: 1200px;
  /* Margen lateral único para toda la web: crece con la pantalla
     (18px en móvil, 32px en escritorio) y respeta la muesca del móvil. */
  --gutter: clamp(18px, 4vw, 32px);
  --margen-izq: max(var(--gutter), env(safe-area-inset-left));
  --margen-der: max(var(--gutter), env(safe-area-inset-right));

  --font-sans: 'Outfit', 'Outfit respaldo', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Fraunces', 'Fraunces respaldo', Georgia, serif;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  /* La navegación se queda fija arriba: sin esto, cualquier salto a un ancla
     deja el titular escondido detrás de ella. --topbar-h la publica
     partials.js midiendo la barra de contacto. */
  scroll-padding-top: calc(var(--navbar-h, 77px) + 12px);
}

/* Cualquier regla con display: flex/grid gana al [hidden] del navegador
   y el elemento se sigue viendo. Esto lo evita en todo el sitio. */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--white);
  line-height: 1.65;
  font-size: 1rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a   { color: var(--green-700); text-decoration: none; transition: color .2s; }
a:hover { color: var(--green-900); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 .6em;
  letter-spacing: -.02em;
  color: var(--ink-900);
}
h1 { font-size: clamp(2.6rem, 5.5vw, 4.2rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.05; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.8rem); letter-spacing: -.03em; line-height: 1.1; }
h3 { font-size: 1.45rem; letter-spacing: -.01em; }
h4 { font-size: 1.1rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: 0; }
h5 { font-size: .82rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
p  { margin: 0 0 1em; color: var(--ink-700); line-height: 1.75; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--margen-izq) var(--margen-der);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--green-700);
  margin-bottom: 1.2rem;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex-shrink: 0;
}
.eyebrow--light { color: var(--gold-300); }  /* el yellow-500 sobre verde solo daba 2,83:1 */

.text-gradient {
  background: linear-gradient(120deg, var(--green-700) 0%, var(--yellow-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============== TOPBAR ============== */
.topbar {
  background: color-mix(in srgb, var(--brand-800) 92%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(196,146,0,.20);
  color: #aec4b4;
  font-size: .85rem;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--brand-800); }
}
.topbar__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: #b8ccbf; }
.topbar a:hover { color: var(--yellow-400); }
.topbar__contact, .topbar__quick {
  display: flex; gap: 16px; align-items: center;
}
/* Todos los links del topbar: misma altura y alineación */
.topbar a {
  display: inline-flex; align-items: center; gap: 5px;
  color: #b8ccbf;
}
.topbar a:hover { color: var(--yellow-400); }
/* Todos los iconos: mismo tamaño y color */
.topbar i {
  font-size: 1rem;
  color: inherit;
  flex-shrink: 0;
}
.topbar__addr { opacity: .8; }
/* Pastillas Alexia / Raíces */
.quick-link {
  background: rgba(255,255,255,.08);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .82rem;
  transition: background .2s;
}
.quick-link:hover { background: rgba(247,211,0,.18); color: var(--yellow-500); }
.quick-link--sv {
  background: rgba(191,140,0,.20);
  /* #DDB42A se quedaba en 4,1:1 sobre la cabecera verde. #E3C254 (el
     --gold-300 del sistema) da 4,7:1 sin cambiar el carácter. */
  color: #E3C254 !important;
  font-weight: 700;
  border: 1px solid rgba(191,140,0,.40);
}
.quick-link--sv:hover { background: var(--yellow-400) !important; color: #021509 !important; }

@media (max-width: 720px) { .d-none-mobile { display: none; } }

/* Móvil: la topbar cabe en UNA sola fila.
   Se queda lo accionable (llamar, escribir, secretaría, tema) y se
   quitan las redes, que ya están en el pie del menú lateral. */
@media (max-width: 720px) {
  .topbar { font-size: .78rem; padding: 6px 0; }
  .topbar__inner {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
  }
  .topbar__contact { gap: 14px; flex-shrink: 0; }
  .topbar__contact a span,
  .topbar__contact a:not([href^="tel"]):not([href^="mailto"]) { display: none; }
  .topbar__quick {
    gap: 8px;
    flex-wrap: nowrap;
    min-width: 0;
  }
  .topbar__quick .quick-link { display: none; }
  .topbar__quick a[aria-label] { display: none; }   /* redes sociales */
  .topbar__quick .quick-link--sv {
    display: inline-flex;
    white-space: nowrap;
    min-width: 0;
    padding: 5px 10px;
  }
  /* El texto largo se recorta antes que provocar un salto de línea */
  .topbar__quick .quick-link--sv span { display: none; }
}

/* Pantallas muy estrechas: solo iconos imprescindibles */
@media (max-width: 380px) {
  .topbar__quick .quick-link--sv { display: none; }
}

/* ============== NAVBAR ============== */

/* El pegado va en el contenedor, no en la barra.
   `position: sticky` solo se mueve dentro de su padre, y la barra vive dentro
   de #site-header, que mide lo que miden la barra de contacto más ella: 118px.
   En cuanto ese bloque se iba hacia arriba, se llevaba la barra con él y al
   bajar por la página no quedaba navegación a mano (y los desplegables se
   quedaban flotando sin nada encima).
   Pegando el bloque entero con un desplazamiento negativo igual a la altura de
   la barra de contacto, esa barra sale de la pantalla al bajar y la navegación
   se queda clavada arriba, que es lo que interesa tener siempre a mano. */
#site-header {
  position: sticky;
  top: calc(-1 * var(--topbar-h, 41px));
  z-index: 50;
}
/* Hueco reservado mientras partials.js pinta la cabecera: sin él, todo el
   contenido baja de golpe al aparecer y la página "salta" (CLS). */
#site-header:empty { min-height: 118px; }
@media (min-width: 721px) and (max-width: 980px) { #site-header:empty { min-height: 106px; } }
/* Las mismas medidas, como valor de partida de las variables que luego
   publica partials.js: la portada calcula su alto con ellas y, si empezaran
   en otro valor, el titular se recolocaría al llegar el JS. */
html.js { --topbar-h: 41px; --navbar-h: 77px; }
html.js:has(.barra-hoy) { --barra-hoy-h: 47px; }
@media (max-width: 980px) { html.js { --navbar-h: 65px; } }
@media (max-width: 860px) { html.js:has(.barra-hoy) { --barra-hoy-h: 99px; } }
@media (max-width: 720px) { html.js { --topbar-h: 53px; } }

.navbar {
  position: relative;
  background: rgba(245,241,234,.90);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  z-index: 50;
  border-bottom: 1px solid rgba(11,58,24,.10);
  transition: box-shadow .2s, background .2s;
}
.navbar.is-scrolled {
  box-shadow: 0 2px 20px rgba(11,58,24,.10);
  background: rgba(245,241,234,.98);
}
.navbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 76px; gap: 24px;
}

.brand {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-900);
  position: relative;
}
.brand__logo {
  width: 58px; height: 58px;
  object-fit: contain;
  flex-shrink: 0;
  /* PNG ya tiene fondo transparente, no necesita mix-blend */
}
.brand__logo--lg { width: 72px; height: 72px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong {
  font-family: var(--font-display); font-weight: 900;
  font-size: 1.1rem; color: var(--green-900); letter-spacing: -.02em;
}
.brand__text small { color: var(--ink-500); font-size: .73rem; letter-spacing: .05em; font-weight: 500; }

.nav > ul {
  list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; align-items: center;
}
.nav a {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-700); font-weight: 600; font-size: .9rem;
  padding: 7px 12px; border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--green-100); color: var(--green-900); }
.nav-cta {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-900));
  color: #fff !important;
  box-shadow: 0 6px 20px -6px rgba(10,74,30,.55);
  letter-spacing: .03em;
}
.nav-cta:hover {
  background: linear-gradient(135deg, var(--green-700), #021509);
  box-shadow: 0 8px 24px -6px rgba(10,74,30,.7);
  color: #fff !important;
}

/* Secretaría Virtual — outlined button */
.nav-sv {
  border: 1.5px solid var(--green-700) !important;
  color: var(--green-700) !important;
  border-radius: var(--radius-sm) !important;
}
.nav-sv:hover { background: var(--brand-700) !important; color: #fff !important; }
.nav-sv i { color: inherit !important; }

/* Active nav link */
.nav a.is-active { background: var(--green-100); color: var(--green-900); }

/* dropdown */
.has-dropdown { position: relative; }
.has-dropdown > a .dd-arrow { transition: transform .22s; display: inline-block; }

/* transparent bridge over the gap — keeps :hover alive while cursor crosses it */
.has-dropdown::after {
  content: '';
  position: absolute;
  top: 100%; left: -12px; right: -12px;
  height: 16px;
  z-index: 99;
}

.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  /* Sólido a propósito: un menú translúcido deja ver la página de
     debajo y se vuelve ilegible sobre una foto. */
  background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 18px; padding: 8px; min-width: 200px;
  box-shadow: 0 1px 2px rgba(14,27,20,.06), 0 18px 44px -12px rgba(14,27,20,.28);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .18s, transform .18s;
  display: block;
  z-index: 100;
}
.dropdown ul { list-style: none; padding: 0; margin: 0; }
.dropdown li { width: 100%; list-style: none; }

/* Flecha de "esto sale del sitio". Mismo aviso que en las webs del club, para
   que quien lo pulsa sepa que no va a volver con el botón de atrás de golpe. */
.dd-fuera {
  margin-left: auto;
  font-size: .78em;
  opacity: .5;
  line-height: 1;
}
.drawer__sub .dd-fuera { opacity: .6; }
.dropdown a {
  display: flex; align-items: center; gap: 11px;
  min-height: 42px; padding: 9px 12px; border-radius: 11px; font-weight: 500;
  color: var(--ink-700); font-size: .9rem; line-height: 1.3;
}
.dropdown a .dd-icon {
  font-size: .92rem; color: var(--green-600); flex-shrink: 0;
  width: 20px; text-align: center; line-height: 1;
}
.dropdown a:hover { background: var(--green-50); color: var(--green-800); }
.dropdown a:hover .dd-icon { color: var(--green-700); }
.dropdown-divider { height: 1px; background: var(--border); margin: 8px 6px; }

/* open — triggered both by :hover (CSS) and .is-open (JS delay) */
.has-dropdown:hover > a .dd-arrow,
.has-dropdown.is-open > a .dd-arrow,
.has-dropdown:focus-within > a .dd-arrow { transform: rotate(180deg); }

.has-dropdown:hover .dropdown,
.has-dropdown.is-open .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1; transform: translateY(0); pointer-events: auto;
}
/* Escape cierra el desplegable aunque el foco siga en su enlace */
.has-dropdown.dd-cerrado:focus-within .dropdown { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.has-dropdown.dd-cerrado:focus-within > a .dd-arrow { transform: none; }

/* hamburger */
.hamburger {
  display: none;
  background: transparent; border: 1px solid var(--ink-100);
  border-radius: 12px; width: 44px; height: 44px;
  flex-direction: column; gap: 5px; align-items: center; justify-content: center;
  cursor: pointer;
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--ink-900); border-radius: 2px;
  transition: transform .2s, opacity .2s;
}
.hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2) { opacity: 0; }
.hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  /* En móvil ocultamos la navegación inline y usamos el drawer (animations.css) */
  .nav { display: none; }
  .hamburger { display: none; } /* sustituido por .hamburger-x */
  .navbar__inner { min-height: 64px; }
  .brand__logo { width: 52px; height: 52px; }
  .brand__text strong { font-size: 1rem; }
  .brand__text small { font-size: .68rem; }
}

/* ============== HERO ============== */
.hero {
  position: relative;
  padding: 110px 0 130px;
  background: var(--white);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
}
.hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden;
}
/* Manchas difuminadas del hero. Usan la rampa de marca (fija) para que
   en tema oscuro no se conviertan en un verde brillante que tape el texto. */
.blob {
  position: absolute; border-radius: 50%; filter: blur(100px); opacity: .18;
}
.blob--1 { width: 600px; height: 600px; background: var(--brand-700); top: -180px; left: -220px; }
.blob--2 { width: 460px; height: 460px; background: var(--gold-100); bottom: -180px; right: -140px; opacity: .55; }
.blob--3 { width: 280px; height: 280px; background: var(--brand-600); top: 22%; right: 5%; opacity: .10; }

/* En oscuro se atenúan mucho: sobre fondo oscuro cualquier mancha
   compite con el texto del hero. */

.hero__grid {
  position: relative;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center;
}
.hero__content .badge-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(191,140,0,.08);
  border: 1px solid rgba(191,140,0,.30);
  padding: 7px 16px 7px 7px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; color: var(--yellow-700);
  letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 2px 16px rgba(191,140,0,.10);
}
.hero__content .badge-pill i {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--yellow-400), var(--yellow-500));
  color: #fff;
  display: grid; place-items: center; font-size: .9rem; flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(191,140,0,.35);
}

.lead { font-size: 1.12rem; color: var(--ink-500); max-width: 540px; line-height: 1.8; font-weight: 400; }

.hero__cta { display: flex; gap: 12px; margin: 22px 0 24px; flex-wrap: wrap; }
.hero__chips { list-style: none; padding: 0; margin: 8px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }
.hero__chips li {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-raised); border: 1px solid rgba(191,140,0,.20);
  padding: 8px 12px; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--ink-700);
}
.hero__chips i { color: var(--green-700); }

/* hero card */
.hero__card { position: relative; overflow: visible; }
.hero__card-inner {
  position: relative; aspect-ratio: 4/4.5; max-width: 520px; margin-left: auto;
  border-radius: var(--radius-xl);
  background: linear-gradient(135deg, var(--brand-700), var(--brand-900));
  box-shadow:
    0 1px 1px rgba(14,27,20,.04),
    0 8px 16px -4px rgba(14,27,20,.12),
    0 24px 48px -16px rgba(14,27,20,.22);
  /* overflow visible para que las floating cards sobresalgan */
  overflow: visible;
}
.hero__photo {
  position: absolute; inset: 14px;
  border-radius: var(--radius-lg);
  /* clipping propio para mantener el border-radius de la imagen */
  overflow: hidden;
  /* El fondo solo se ve mientras cargan las fotos del colegio */
  background: var(--surface-sunken);
  z-index: 1;
}

/* Las floating cards van POR ENCIMA del card-inner, fuera del overflow */
.hero__floating {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 5; /* por encima de hero__photo (z-index:1) */
}

.float-card {
  position: absolute;
  background: var(--surface-raised); padding: 14px 16px; border-radius: 16px;
  display: flex; gap: 12px; align-items: center;
  pointer-events: auto;
  font-size: .85rem;
  /* Sombras 3D multi-capa para efecto premium de "tarjeta levitando" */
  box-shadow:
    0 1px 2px rgba(14,27,20,.06),
    0 4px 8px rgba(14,27,20,.06),
    0 12px 24px -6px rgba(14,27,20,.18),
    0 28px 50px -12px rgba(14,27,20,.28),
    0 50px 80px -24px rgba(14,27,20,.18);
  /* Borde sutil para definirla mejor sobre el fondo */
  border: 1px solid var(--border);
  /* Fondo sólido del tema. Antes era un degradado blanco fijo: en oscuro
     la tarjeta se quedaba blanca con el texto claro encima, ilegible.
     Se deja opaca a propósito, porque semitransparente el texto pierde
     contraste según lo que tenga detrás. */
  background: var(--surface-raised);
  -webkit-backdrop-filter: blur(10px);
  /* Pequeña inclinación 3D inicial */
  transform: perspective(800px) rotateY(-2deg);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.float-card:hover {
  transform: perspective(800px) rotateY(0) translateY(-4px) scale(1.04);
  box-shadow:
    0 1px 2px rgba(14,27,20,.06),
    0 8px 16px rgba(14,27,20,.08),
    0 20px 40px -8px rgba(14,27,20,.22),
    0 40px 70px -16px rgba(14,27,20,.32),
    0 70px 100px -32px rgba(14,27,20,.22);
  z-index: 6;
}
.float-card strong {
  display: block; color: var(--ink-900);
  font-family: var(--font-sans); font-weight: 700;
}
.float-card small { color: var(--ink-500); }
.float-card__icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.15rem;
  /* Sombra interna sutil al icono */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), 0 4px 12px -4px rgba(0,0,0,.15);
}
/* Posicionamiento: que sobresalgan claramente fuera de la imagen.
   Cada tarjeta tiene su propia keyframe para preservar la inclinación 3D durante el float. */
.float-card--1 {
  top: 6%; left: -36px;
  animation: floatCard1 6s ease-in-out infinite;
}
.float-card--2 {
  bottom: 28%; right: -44px;
  animation: floatCard2 7s ease-in-out infinite;
}
.float-card--3 {
  bottom: -22px; left: 14%;
  animation: floatCard3 8s ease-in-out infinite;
}

@keyframes floatCard1 {
  0%, 100% { transform: perspective(800px) rotateY(-3deg) rotateZ(-1.5deg) translateY(0); }
  50%      { transform: perspective(800px) rotateY(-3deg) rotateZ(-1.5deg) translateY(-12px); }
}
@keyframes floatCard2 {
  0%, 100% { transform: perspective(800px) rotateY(3deg)  rotateZ(1.5deg)  translateY(0); }
  50%      { transform: perspective(800px) rotateY(3deg)  rotateZ(1.5deg)  translateY(-14px); }
}
@keyframes floatCard3 {
  0%, 100% { transform: perspective(800px) rotateY(-1deg) rotateZ(-1deg)   translateY(0); }
  50%      { transform: perspective(800px) rotateY(-1deg) rotateZ(-1deg)   translateY(-10px); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero__scroll {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: 28px; height: 46px; border: 2px solid var(--ink-300); border-radius: 999px;
  display: grid; place-items: center;
}
.hero__scroll span {
  width: 4px; height: 8px; background: var(--green-700); border-radius: 4px;
  animation: scroll 1.6s ease-in-out infinite;
}
@keyframes scroll {
  0% { transform: translateY(-6px); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(8px); opacity: 0; }
}

/* float-card--2 se acerca al borde derecho del contenedor en pantallas medianas */
@media (max-width: 1248px) {
  .float-card--2 { right: -18px; }
}

@media (max-width: 980px) {
  .hero { padding: 40px 0 60px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__card { max-width: 460px; margin: 0 auto; width: 100%; }
  .hero__card-inner { margin: 0 auto; max-width: 100%; aspect-ratio: 4/4; }
  /* En tablet, la tarjeta es full-width: ajustar posiciones para que no se corten */
  .float-card--1 { left: -10px; }
  .float-card--2 { right: -10px; }
  .float-card--3 { bottom: -8px; }
  .hero__scroll { display: none; }
  .hero h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
  .lead { font-size: 1rem; }
  /* Botones hero iguales y compactos */
  .hero__cta { gap: 10px; flex-wrap: nowrap; }
  .hero__cta .btn { flex: 1 1 0; padding: 12px 14px; font-size: .85rem; min-width: 0; justify-content: center; }
  .hero__cta .btn--lg { padding: 12px 14px; font-size: .85rem; }
  .hero__chips { gap: 6px; }
  .hero__chips li { padding: 6px 10px; font-size: .78rem; }
}
@media (max-width: 540px) {
  .hero { padding: 30px 0 50px; }
  .hero__card-inner { aspect-ratio: 4/3.8; }
  .float-card { padding: 8px 12px; font-size: .76rem; gap: 8px; }
  .float-card__icon { width: 30px; height: 30px; font-size: .9rem; flex-shrink: 0; }
  .float-card strong { font-size: .76rem; line-height: 1.15; }
  .float-card small { font-size: .62rem; line-height: 1.1; }
  /* En móvil pequeño, las cards quedan dentro de la tarjeta */
  .float-card--1 { left: 6px; }
  .float-card--2 { right: 6px; }
  .float-card--3 { bottom: 4px; }
  /* Botones aun mas pequenos */
  .hero__cta .btn { padding: 11px 12px; font-size: .8rem; }
  .hero__cta .btn--lg { padding: 11px 12px; font-size: .8rem; }
}
@media (max-width: 380px) {
  .float-card { padding: 6px 10px; font-size: .7rem; }
  .float-card strong { font-size: .7rem; }
}
/* Evita scroll horizontal.
   `hidden` en un eje convierte el cuerpo en contenedor de scroll y rompe el
   pegado de la cabecera. `clip` recorta igual sin crear ese contenedor. La
   primera línea se queda como respaldo para navegadores que no conozcan clip:
   la ignoran y aplican hidden. */
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* ============== STATS ============== */
.stats {
  background: var(--brand-800);
  color: #fff;
  padding: 90px 0;
  position: relative;
  overflow: hidden;
}
.stats::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(16,87,44,.6), transparent 55%),
    radial-gradient(ellipse at 100% 50%, rgba(196,146,0,.08), transparent 55%);
  pointer-events: none;
}
.stats::after {
  content: "1957";
  position: absolute; right: -2%; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(8rem, 18vw, 16rem);
  color: rgba(255,255,255,.03);
  line-height: 1; pointer-events: none; user-select: none;
  letter-spacing: -.05em;
}
.stats > .container { position: relative; }
.stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  text-align: center;
}
.stat {
  padding: 20px 30px;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.stat:last-child { border-right: none; }
.stat__label {
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--yellow-500); font-weight: 700; margin-bottom: 8px;
}
.stat__num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(3.2rem, 6.5vw, 5.5rem);
  color: #fff;
  display: inline-block;
  line-height: 1;
  letter-spacing: -.04em;
}
.stat__figure { display: flex; align-items: baseline; gap: 2px; }
.stat__plus { font-size: 2rem; color: var(--yellow-500); font-weight: 900; line-height: 1; margin-bottom: 10px; }
.stat p { color: rgba(255,255,255,.78); margin: 6px 0 0; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 720px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:last-child, .stat:nth-last-child(2) { border-bottom: none; }
}

/* ============== SECTIONS ============== */
.section { padding: 110px 0; }
.section--soft { background: var(--surface-sunken); }
@media (max-width: 720px) {
  .section { padding: 70px 0; }
  .section__head { margin-bottom: 40px; }
}
.section--dark {
  background: var(--brand-800);
  color: #fff;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.60); }

.section__head { max-width: 680px; margin: 0 auto 60px; text-align: center; }
.section__head--light .eyebrow { color: var(--yellow-500); }
.section__head.between {
  display: flex; justify-content: space-between; align-items: end; gap: 24px;
  text-align: left; max-width: 100%;
}
.section__head.between .eyebrow { display: inline-flex; }

/* two-col layout */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center;
}
.two-col--reverse .two-col__media { order: 2; }
@media (max-width: 980px) {
  .two-col { grid-template-columns: 1fr; gap: 40px; }
  .two-col--reverse .two-col__media { order: 0; }
}

.img-stack { position: relative; aspect-ratio: 1/1; }
.img-stack__main {
  position: absolute; inset: 0 24px 24px 0;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 60%, rgba(0,0,0,.3) 100%),
    url('../img/historia.jpg') center/cover;
  box-shadow: var(--shadow);
}
.img-stack__accent {
  position: absolute; inset: 24px 0 0 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--yellow-100), #EDE3C5);
  z-index: -1;
}
.img-stack__badge {
  position: absolute; bottom: -10px; left: -10px;
  background: var(--surface-raised); padding: 14px 18px; border-radius: 14px;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; line-height: 1.1;
}
.img-stack__badge strong {
  font-family: var(--font-display); font-weight: 900;
  color: var(--green-700); font-size: 1.6rem;
}
.img-stack__badge span { font-size: .8rem; color: var(--ink-500); }

.check-list { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.check-list i { color: var(--green-700); margin-right: 8px; }

/* ============== STAGES ============== */
/* 5 filas: icono | edad | título | párrafo(1fr) | link */
.stages {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto 1fr auto;
  column-gap: 22px;
  row-gap: 0;
}
.stage {
  grid-row: span 5;
  display: grid;
  grid-template-rows: subgrid;
  background: var(--surface-raised); border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  padding: 32px 28px; transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .25s;
  position: relative; overflow: hidden;
}
.stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(255,255,255,0) 40%, color-mix(in srgb, var(--c, var(--green-700)) 6%, transparent) 100%);
  pointer-events: none; transition: opacity .35s;
  opacity: 0;
}
.stage:hover { transform: translateY(-8px); box-shadow: 0 24px 48px -16px rgba(14,27,20,.18), 0 4px 12px rgba(14,27,20,.06); border-color: transparent; }
.stage:hover::after { opacity: 1; }
.stage__icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: color-mix(in srgb, var(--c) 18%, white);
  color: var(--c); display: grid; place-items: center; font-size: 1.5rem;
  align-self: start; margin-bottom: 12px;
}
.stage__age {
  display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-500);
  align-self: start; margin-bottom: 4px;
}
.stage h3 { align-self: start; margin-bottom: 0; }
.stage p { font-size: .92rem; color: var(--ink-700); margin: 12px 0 0; align-self: start; }
.stage__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; font-size: .9rem; color: var(--green-700);
  align-self: end; padding-top: 18px; margin-top: 0;
}
.stage__link i { transition: transform .2s; }
.stage__link:hover i { transform: translateX(4px); }

/* En tablet y móvil volvemos a flex column (no hay alineación cruzada) */
@media (max-width: 980px) {
  .stages { grid-template-columns: repeat(2,1fr); grid-template-rows: none; gap: 22px; }
  .stage { grid-row: auto; display: flex; flex-direction: column; }
  .stage__icon { margin-bottom: 14px; }
  .stage p { margin: 0; flex: 1; }
  .stage__link { margin-top: auto; }
}
@media (max-width: 560px) { .stages { grid-template-columns: 1fr; } }

/* ============== VALUES ============== */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--ink-100); border-radius: var(--radius-lg); overflow: hidden; }
.value {
  background: var(--surface-raised);
  padding: 36px 30px;
  transition: background .3s;
  position: relative;
  counter-increment: value-counter;
}
.value::before {
  content: "0" counter(value-counter);
  position: absolute; top: 22px; right: 26px;
  font-family: var(--font-display); font-weight: 900;
  font-size: 2.8rem; color: var(--ink-100);
  letter-spacing: -.04em; line-height: 1;
  transition: color .3s;
}
.value:hover { background: var(--green-100); }
.value:hover::before { color: rgba(31,164,44,.15); }
.value i {
  font-size: 1.4rem; color: var(--green-700); background: var(--green-100);
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 18px; transition: background .3s;
}
.value:hover i { background: rgba(31,164,44,.2); }
.value h3, .value h4 { margin-bottom: 8px; font-size: 1rem; }
.value p { margin: 0; font-size: .9rem; color: var(--ink-500); line-height: 1.65; }
.values { counter-reset: value-counter; }
@media (max-width: 880px) { .values { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) { .values { grid-template-columns: 1fr; } }

/* ============== SERVICES ============== */
.services {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.service {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  padding: 22px; border-radius: var(--radius);
  transition: transform .25s, background .25s, border-color .25s;
  display: flex; flex-direction: column; gap: 10px;
  color: #fff;
}
.service:hover {
  background: rgba(247,211,0,.12); border-color: var(--yellow-500);
  transform: translateY(-4px); color: #fff;
}
.service__ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(247,211,0,.18); color: var(--yellow-500);
  display: grid; place-items: center; font-size: 1.25rem;
}
.service h3, .service h4 { margin: 0; color: #fff; font-size: 1rem; }
.service p { margin: 0; font-size: .85rem; color: #c4d0c8; }
/* Tarjeta destacada: campamento con web propia */
.service--featured {
  position: relative;
  background: linear-gradient(135deg, rgba(201,160,66,.14), rgba(201,160,66,.18));
  border: 2px solid var(--yellow-500);
  box-shadow: 0 12px 40px rgba(201,160,66,.2);
  padding-top: 22px;
}
.service--featured::before {
  content: '';
  position: absolute; inset: -3px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--yellow-500), var(--yellow-700), var(--yellow-500));
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  filter: blur(10px);
  animation: borderShine 3s ease-in-out infinite;
}
.service--featured:hover { border-color: var(--yellow-500); transform: translateY(-6px); }
.service--featured:hover::before { opacity: .6; }
.service--featured .service__ic {
  background: var(--yellow-500);
  color: var(--brand-900);
  box-shadow: 0 6px 16px rgba(201,160,66,.35);
}
.service--featured h3, .service--featured h4 { color: var(--gold-300); }
.service__ribbon {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--yellow-500);
  color: var(--brand-900);
  padding: 5px 11px; border-radius: 999px;
  font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(201,160,66,.4);
  animation: ribbonPulse 2.4s ease-in-out infinite;
  white-space: nowrap;
  z-index: 2;
}
.service__ribbon i { font-size: .78rem; }
@media (max-width: 980px) { .services { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 540px) {
  .services { grid-template-columns: repeat(2,1fr); gap: 12px; }
  .service { padding: 16px 14px; gap: 8px; }
  .service h3, .service h4 { font-size: .9rem; }
  .service p { font-size: .78rem; }
  .service__ic { width: 36px; height: 36px; font-size: 1.05rem; }
}
@media (max-width: 360px) { .services { grid-template-columns: 1fr; } }

/* ============== NEWS ============== */
.news {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  grid-auto-rows: 1fr;
}
.news__item {
  background: var(--surface-raised); border: 1px solid var(--ink-100); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform .25s, box-shadow .25s;
  display: flex; flex-direction: column;
}
.news__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.news__item--feat { grid-column: span 2; flex-direction: row; }
.news__item--feat .news__img {
  flex: 0 0 45%;
  width: 45%;
  min-height: 280px;
  aspect-ratio: auto;
}
.news__item--feat .news__body { padding: 30px; flex: 1 1 55%; }
.news__img {
  position: relative; aspect-ratio: 16/10; background: var(--green-100);
}
.news__cat {
  position: absolute; top: 14px; left: 14px;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.news__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news__body time { font-size: .8rem; color: var(--ink-500); font-weight: 600; }
.news__body h3 { margin: 0; }
.news__body p  { margin: 0 0 6px; font-size: .92rem; }
.news__body .btn { margin-top: auto; align-self: flex-start; padding: 0; }
@media (max-width: 980px) {
  .news { grid-template-columns: repeat(2,1fr); }
  .news__item--feat { grid-column: span 2; flex-direction: column; }
  .news__item--feat .news__img { min-height: 200px; }
}
@media (max-width: 600px) {
  .news { grid-template-columns: 1fr; }
  .news__item--feat { grid-column: span 1; }
}

/* ============== CTA ============== */
.cta {
  position: relative;
  background: var(--brand-800);
  color: #fff;
  padding: 110px 0;
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(31,164,44,.18), transparent 55%),
    radial-gradient(ellipse at 85% 30%, rgba(247,211,0,.12), transparent 50%);
  pointer-events: none;
}
.cta::after {
  content: "NSD";
  position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(8rem, 20vw, 18rem);
  color: rgba(255,255,255,.025);
  line-height: 1; pointer-events: none; user-select: none;
  letter-spacing: -.06em;
}
.cta__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: center;
}
@media (min-width: 881px) { .cta__inner { min-height: 222px; } }
.cta h2 { color: #fff; margin: 6px 0 12px; }
.cta p { color: rgba(255,255,255,.55); margin: 0; font-size: 1.05rem; }
.cta__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 880px) {
  .cta__inner { grid-template-columns: 1fr; gap: 36px; }
  .cta__actions { justify-content: flex-start; }
}
.cta .btn--primary {
  background: var(--yellow-500);
  color: var(--brand-900);
  box-shadow: 0 8px 24px -8px rgba(201,160,66,.45);
}
.cta .btn--primary:hover { color: var(--brand-900); transform: translateY(-2px); box-shadow: 0 14px 32px -10px rgba(201,160,66,.6); }
.cta .btn--ghost { background: rgba(255,255,255,.07); color: #fff; border: 1.5px solid rgba(255,255,255,.2); }
.cta .btn--ghost:hover { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }

/* ============== CONTACT ============== */
.contact-list { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.contact-list i {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--green-100); color: var(--green-700);
  margin-right: 10px;
}
.contact-list li { display: flex; align-items: center; color: var(--ink-700); }
.contact-social { display: flex; gap: 10px; }
.contact-social a {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--ink-50); color: var(--ink-700);
  display: grid; place-items: center; font-size: 1.1rem;
  transition: background .2s, color .2s, transform .2s;
}
.contact-social a:hover { background: var(--brand-700); color: #fff; transform: translateY(-2px); }

/* ── Form card rediseño ────────────────────────────────── */
.form-card {
  background: var(--surface-raised);
  border: none;
  border-radius: var(--radius-xl);
  box-shadow:
    0 2px 4px rgba(14,91,20,.04),
    0 12px 32px -8px rgba(14,91,20,.14),
    0 32px 64px -20px rgba(14,91,20,.18);
  overflow: hidden;
  padding: 0;
}
/* Cabecera con gradiente */
.form-card__header {
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 100%);
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  overflow: hidden;
}
.form-card__header::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 85% -20%, rgba(255,211,0,.22), transparent 55%);
  pointer-events: none;
}
.form-card__header-ico {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.18);
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 1.45rem;
  flex-shrink: 0;
  position: relative; z-index: 1;
}
.form-card__header-ico i { color: #fff; }
.form-card__header-text { position: relative; z-index: 1; }
.form-card__header-text h3 { color: #fff; margin: 0 0 3px; font-size: 1.15rem; }
.form-card__header-sub { color: rgba(255,255,255,.78); font-size: .8rem; margin: 0; }
/* Cuerpo del formulario */
.form-body { padding: 24px 28px 28px; }
.form-row { margin-bottom: 14px; }
.form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Fila mensaje + privacidad en paralelo */
.form-row--msg {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 14px;
}
.form-card label {
  display: block; font-size: .83rem; font-weight: 700; color: var(--ink-700);
}
.form-card label i.lbl-ico { color: var(--green-700); margin-right: 3px; font-size: .88em; }
.form-card input, .form-card select, .form-card textarea {
  margin-top: 6px;
  width: 100%; padding: 11px 14px; font: inherit; color: var(--ink-900);
  border: 1.5px solid var(--ink-100); border-radius: 10px;
  background: var(--ink-50);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.form-card input:focus, .form-card select:focus, .form-card textarea:focus {
  outline: none; border-color: var(--green-700); background: var(--surface-raised);
  box-shadow: 0 0 0 3px rgba(31,164,44,.13);
}
/* Recuadro de privacidad al lado del textarea */
.form-privacy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--green-100);
  border: 1.5px solid rgba(31,164,44,.22);
  border-radius: 12px;
  padding: 14px 10px;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ink-700);
  text-align: center;
  cursor: pointer;
  width: 120px;
  flex-shrink: 0;
  transition: background .15s, border-color .15s;
}
.form-privacy:hover { background: #c8f0cc; border-color: var(--green-700); }
.form-privacy input[type="checkbox"] {
  width: 20px; height: 20px; margin-top: 0;
  accent-color: var(--green-700); cursor: pointer;
  flex-shrink: 0;
}
.form-privacy i { font-size: 1.55rem; color: var(--green-700); }
.form-privacy a { color: var(--green-900); font-weight: 700; }
.form-check {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; font-weight: 500; color: var(--ink-500);
  margin-bottom: 16px;
}
.form-check a { color: var(--green-700); }
/* El enlace dentro de un parrafo no puede distinguirse solo por el color:
   subrayado siempre (WCAG 1.4.1). */
.form-check a, .form-nota a { text-decoration: underline; text-underline-offset: 2px; }


@media (max-width: 620px) {
  .form-row--2 { grid-template-columns: 1fr; }
  .form-row--msg { grid-template-columns: 1fr; }
  .form-privacy { width: 100%; flex-direction: row; padding: 12px 14px; text-align: left; }
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 22px; border-radius: 4px;
  font-weight: 700; font-size: .95rem;
  border: 0; cursor: pointer;
  transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s;
  text-decoration: none;
  background-clip: padding-box;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
  line-height: 1;
}
.btn:focus-visible { outline: 3px solid rgba(31,164,44,.4); outline-offset: 2px; }
.btn--lg { padding: 14px 24px; font-size: 1rem; }
.btn--block { width: 100%; justify-content: center; }
/* Usa la rampa de marca (fija), no la adaptativa: este botón debe
   tener fondo verde oscuro y texto blanco en los dos temas. */
.btn--primary {
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-900) 100%);
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(10,74,30,.55);
  letter-spacing: .02em;
}
.btn--primary:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(10,74,30,.7);
  background: linear-gradient(135deg, var(--brand-700) 0%, #021509 100%);
}
/* CTA oscura — botón dorado para contrastar */
.cta .btn--primary {
  background: linear-gradient(135deg, var(--yellow-400), var(--yellow-500));
  color: var(--brand-900);
  box-shadow: 0 8px 28px -8px rgba(191,140,0,.55);
}
.cta .btn--primary:hover {
  color: var(--brand-900);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -10px rgba(191,140,0,.7);
}
.btn--ghost {
  background: transparent; color: var(--ink-700);
  border: 1.5px solid rgba(10,74,30,.25);
  padding: 12px 20px;
}
.btn--ghost:hover {
  background: rgba(10,74,30,.06);
  color: var(--green-700);
  border-color: rgba(10,74,30,.45);
}
.cta .btn--ghost { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.4); padding: 12px 20px; }
.cta .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn--link {
  padding: 4px 0; background: transparent; color: var(--green-700);
}
.btn--link:hover { color: var(--green-900); }

/* ============== FOOTER ============== */
.footer {
  background: var(--brand-800); color: #e6ede8; padding: 70px 0 0;
  position: relative;
}
/* Marca + las cuatro columnas del menú + contacto. */
.footer__grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.15fr 1.15fr 1.3fr;
  gap: 32px;
  padding-bottom: 50px;
}
@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}
.footer__brand p { margin-top: 14px; max-width: 320px; color: #e6ede8; font-size: .95rem; line-height: 1.65; }
.footer h5, .footer .footer__col-title {
  font-family: var(--font-sans); font-weight: 800; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.78); margin-bottom: 16px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer a:not(.btn) { color: #e6ede8; }
.footer a:not(.btn):hover { color: var(--yellow-500); }
.footer__contact i { color: var(--yellow-500); margin-right: 8px; }

/* ── Contraste sobre el fondo verde oscuro del pie ──────────────────
   El pie es una zona permanentemente oscura, pero estos elementos
   heredaban colores de texto pensados para fondo claro (--ink-*) y
   quedaban prácticamente invisibles. Se fuerzan tonos claros. */
.footer .brand__text strong { color: #fff; }
.footer .brand__text small  { color: rgba(255,255,255,.72); }
.footer p                   { color: #e6ede8; }
.footer__bottom p,
.footer__bottom              { color: rgba(255,255,255,.72); }

.footer__bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; font-size: .82rem; }
.footer__bottom-inner {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: 4px 16px; min-width: 0; list-style: none; padding: 0; margin: 0; }

.to-top {
  position: fixed; right: 24px; bottom: 24px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--brand-700);
  color: #fff;
  border: none; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 20px rgba(15,94,22,.32), 0 2px 6px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden;
  transform: translateY(14px) scale(.92);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s, background .2s, box-shadow .2s;
  z-index: 80;
  text-decoration: none;
  cursor: pointer;
}
.to-top.is-visible {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1), visibility 0s, background .2s, box-shadow .2s;
}
.to-top:hover {
  background: var(--brand-900); color: #fff;
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 10px 28px rgba(15,94,22,.45), 0 4px 10px rgba(0,0,0,.12);
}
.to-top:active { transform: translateY(-1px) scale(.98); }
/* Centrado perfecto del icono Bootstrap (que viene con line-height interno) */
.to-top i {
  display: block;
  font-size: 1.15rem;
  line-height: 1;
  margin: 0;
  transform: translateY(-1px);  /* corrige offset visual del glyph */
}
@media (max-width: 720px) {
  .to-top { right: 14px; bottom: 86px; width: 42px; height: 42px; }
  .to-top i { font-size: 1.05rem; }
}

@media (max-width: 980px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: span 2; }
}
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } .footer__brand { grid-column: auto; } }

/* ============== Reveal animation ============== */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

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

/* ============== STAGE FEATURED (Infantil con web propia) ============== */
.stage--featured {
  position: relative;
  background: linear-gradient(160deg, var(--white) 0%, var(--yellow-100) 100%);
  border: 2px solid rgba(196,146,0,.45);
  box-shadow: 0 12px 40px rgba(196,146,0,.15), 0 4px 12px rgba(11,58,24,.08);
  transform: translateY(-4px);
  overflow: visible !important;
}
.stage--featured::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--yellow-500), var(--yellow-700), var(--yellow-500));
  background-size: 200% 200%;
  z-index: -1;
  opacity: 0;
  animation: borderShine 3s ease-in-out infinite;
  filter: blur(8px);
}
.stage--featured:hover::before { opacity: .55; }
@keyframes borderShine {
  0%,100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.stage__ribbon {
  position: absolute; top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand-700);
  color: #fff; padding: 6px 12px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 16px rgba(15,94,22,.28);
  animation: ribbonPulse 2.4s ease-in-out infinite;
}
.stage__ribbon i { font-size: .85rem; }
@keyframes ribbonPulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* ============== NEWS card mejorada con imagen real ============== */
.news__img {
  display: block;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.news__img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}
.news__item:hover .news__img { transform: scale(1); }
.news__meta {
  display: flex; gap: 14px; font-size: .78rem; color: var(--ink-500);
  align-items: center; flex-wrap: wrap; margin-bottom: 4px;
}

.news__meta span { display: inline-flex; align-items: center; gap: 4px; }
.news__meta i { font-size: .82rem; }

/* ============== GALLERY tile mejorada con imagen ============== */
.gallery-tile {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.gallery-tile::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.7) 100%);
  z-index: 1;
  pointer-events: none;
}
.gallery-tile span.gallery-tile__icon {
  position: absolute; top: 12px; right: 12px; left: auto; bottom: auto;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--green-900);
  display: grid; place-items: center; font-size: 1.15rem;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .35s cubic-bezier(.22,1,.36,1), background .25s;
  padding: 0; letter-spacing: 0; text-transform: none;
  backdrop-filter: none;
}
.gallery-tile:hover span.gallery-tile__icon {
  transform: scale(1.12) rotate(-8deg);
  background: var(--yellow-500);
  color: var(--green-900);
}
/* Etiqueta de texto: glassmorphism elegante en la parte inferior */
.gallery-tile__label,
.gallery-tile > span:not(.gallery-tile__icon) {
  position: absolute !important;
  left: 14px; bottom: 14px; right: auto;
  /* Encima de una foto clara el velo tiene que ser opaco de verdad */
  background: rgba(15, 23, 33, .86);
  color: #fff;
  padding: 7px 14px; border-radius: 999px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  text-align: left;
  z-index: 2;
  box-shadow: 0 4px 14px rgba(0,0,0,.2);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255,255,255,.18);
  white-space: nowrap;
  transition: transform .3s, background .25s, color .25s, opacity .2s;
}
.gallery-tile:hover > span:not(.gallery-tile__icon) {
  opacity: 0;
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.35);
}

/* Skip link — accesibilidad teclado */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 999999;
  padding: 10px 20px;
  background: #101810;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .15s;
}
.skip-link:focus { top: 0; }

/* =========================================================
   Utilidad: texto solo para lectores de pantalla
   ========================================================= */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   TEMA OSCURO
   ---------------------------------------------------------
   Funciona casi entero con solo cambiar los tokens, porque los
   componentes ya usan --surface-*, --ink-* y --border en vez de
   colores fijos. Las zonas que deben seguir oscuras siempre
   (pie, franjas verdes, marquee) usan la rampa --brand-*, que
   NO cambia entre temas: por eso no necesitan parches.

   Se declara dos veces a propósito:
   1) media query  → funciona aunque falle el JS
   2) [data-theme] → permite forzar el tema desde el selector
   ========================================================= */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ink-900: #ECEFEC;
    --ink-800: #D5DCD7;
    --ink-700: #BFC8C2;
    --ink-600: #A8B3AD;
    --ink-500: #93A099;
    --ink-400: #7D8C84;
    --ink-300: #68786F;
    --ink-200: #46564E;
    --ink-100: #2A3833;
    --ink-50:  #1B2520;

    --white:           #0F1814;
    --surface:         #0F1814;
    --surface-raised:  #17221D;
    --surface-sunken:  #141E19;
    --surface-subtle:  #1F2A24;
    --surface-overlay: rgba(15,24,20,.85);
    --border:          #27332D;
    --border-strong:   #35433B;

    --green-900: #9BD6AE;
    --green-700: #5EBF78;
    --green-600: #4FBA6B;
    --green-500: #3FA858;
    --green-400: #7FD196;
    --green-300: #9BD6AE;
    --green-200: #22382A;
    --green-100: #18291E;
    --green-50:  #121C16;
    --yellow-700: #E8C97A;
    --yellow-100: #33240A;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 10px -4px rgba(0,0,0,.45);
    --shadow:    0 2px 6px rgba(0,0,0,.5), 0 12px 28px -8px rgba(0,0,0,.5);
    --shadow-lg: 0 4px 12px rgba(0,0,0,.5), 0 28px 56px -16px rgba(0,0,0,.6);
    --shadow-xl: 0 8px 20px rgba(0,0,0,.5), 0 44px 88px -24px rgba(0,0,0,.7);
    --sheen: inset 0 1px 0 rgba(255,255,255,.05);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --ink-900: #ECEFEC;
  --ink-800: #D5DCD7;
  --ink-700: #BFC8C2;
  --ink-600: #A8B3AD;
  --ink-500: #93A099;
  --ink-400: #7D8C84;
  --ink-300: #68786F;
  --ink-200: #46564E;
  --ink-100: #2A3833;
  --ink-50:  #1B2520;

  --white:           #0F1814;
  --surface:         #0F1814;
  --surface-raised:  #17221D;
  --surface-sunken:  #141E19;
  --surface-subtle:  #1F2A24;
  --surface-overlay: rgba(15,24,20,.85);
  --border:          #27332D;
  --border-strong:   #35433B;

  --green-900: #9BD6AE;
  --green-700: #5EBF78;
  --green-600: #4FBA6B;
  --green-500: #3FA858;
  --green-400: #7FD196;
  --green-300: #9BD6AE;
  --green-200: #22382A;
  --green-100: #18291E;
  --green-50:  #121C16;
  --yellow-700: #E8C97A;
  --yellow-100: #33240A;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 4px 10px -4px rgba(0,0,0,.45);
  --shadow:    0 2px 6px rgba(0,0,0,.5), 0 12px 28px -8px rgba(0,0,0,.5);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.5), 0 28px 56px -16px rgba(0,0,0,.6);
  --shadow-xl: 0 8px 20px rgba(0,0,0,.5), 0 44px 88px -24px rgba(0,0,0,.7);
  --sheen: inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---- Los pocos parches que sí hacen falta ----------------
   Solo para cosas con colores fijos dentro (degradados,
   fotos con velo) que los tokens no alcanzan.            */

/* Hero: el degradado y las manchas se calman sobre fondo oscuro */
[data-theme="dark"] .hero {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-sunken) 100%);
}
[data-theme="dark"] .blob--1 { opacity: .10; }
[data-theme="dark"] .blob--2 { opacity: .06; }
[data-theme="dark"] .blob--3 { opacity: .05; }
[data-theme="dark"] .hero__photo { filter: brightness(.9); }

/* Texto con degradado: los verdes y oros originales quedan casi
   negros sobre fondo oscuro, hay que subirles la luminosidad */
[data-theme="dark"] .text-gradient-anim {
  background: linear-gradient(120deg, #6ED08A 0%, #E8C55C 30%, #F0D678 50%, #6ED08A 75%, #E8C55C 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

/* Barra superior fija y translúcida */
[data-theme="dark"] .navbar {
  background: var(--surface-overlay) !important;
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .navbar.is-scrolled { background: rgba(15,24,20,.95) !important; }

/* Aviso de alérgenos: lleva amarillos fijos */
[data-theme="dark"] .allergen-notice { background: #2A2108; border-color: #5C4A12; }
[data-theme="dark"] .allergen-notice p { color: #F0DFA8; }
[data-theme="dark"] .allergen-notice i { color: var(--yellow-400); }

/* Cabecera de página: el velo verde sobre la foto se oscurece */
[data-theme="dark"] .page-hero {
  /* Sin foto de banco de imágenes: cargarla mandaba la IP de cada visita a
     un tercero (Unsplash) solo por usar el tema oscuro. */
  background: linear-gradient(135deg, rgba(4,18,10,.98), rgba(8,48,22,.96));
}

/* Mosaico de la galería */
[data-theme="dark"] .gallery-tile { background: var(--surface-subtle) center/cover; }

/* Barra fija inferior en móvil */
[data-theme="dark"] .mobile-cta-bar {
  background: rgba(15,24,20,.95) !important;
  border-top-color: var(--border);
}

/* Banner de cookies: tiene colores propios */
[data-theme="dark"] #ck-banner { background: var(--surface-raised) !important; color: var(--ink-900) !important; border-color: var(--border) !important; }
[data-theme="dark"] #ck-banner .ck-info h3 { color: var(--green-700) !important; }
[data-theme="dark"] #ck-banner .ck-info p  { color: var(--ink-500) !important; }
[data-theme="dark"] #ck-banner .ck-cat     { background: var(--ink-50); border-color: var(--border-strong); }
[data-theme="dark"] #ck-banner .ck-cat h4  { color: var(--green-700); }
[data-theme="dark"] #ck-banner .ck-cat p   { color: var(--ink-500); }
[data-theme="dark"] #ck-banner .ck-slider  { background: var(--border-strong); }
[data-theme="dark"] #ck-banner .ck-btn-reject { color: var(--ink-600); border-color: var(--border-strong); }

/* Controles nativos (calendarios, desplegables, barras de scroll) */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] button { color-scheme: dark; }

/* =========================================================
   Selector de tema (claro / sistema / oscuro)
   ========================================================= */
.theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 3px;
  margin-left: 6px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18);
  flex-shrink: 0;
}
.theme-switch__thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 30px; height: 26px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28);
  transition: transform var(--dur) var(--ease-out);
  pointer-events: none;
}
.theme-switch[data-choice="system"] .theme-switch__thumb { transform: translateX(30px); }
.theme-switch[data-choice="dark"]   .theme-switch__thumb { transform: translateX(60px); }

.theme-switch__opt {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 26px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.theme-switch__opt:hover { color: #fff; }
.theme-switch__opt:active { transform: scale(.92); }
.theme-switch__opt[aria-checked="true"] { color: var(--brand-800); }
.theme-switch__opt:focus-visible { outline: 2px solid var(--yellow-400); outline-offset: 2px; }

.drawer__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}
.drawer__theme-label {
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .78);
}
.drawer__theme .theme-switch { margin-left: 0; }

@media (max-width: 720px) { .theme-switch { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .theme-switch__thumb { transition: none; } }


/* En tema oscuro el banner también es oscuro, así que sus enlaces piden un
   verde claro: el verde de enlace normal se queda en 3,22:1 ahí dentro. */
[data-theme="dark"] #ck-banner .ck-info a,
[data-theme="dark"] #ck-banner .ck-btn-detail { color: #5EBF78 !important; }
[data-theme="dark"] #ck-banner .ck-info a:hover,
[data-theme="dark"] #ck-banner .ck-btn-detail:hover { color: #9BD6AE !important; }

/* Tableta: la barra superior en una sola fila, igual que en el resto de
   webs NSD. Alexia, Raíces y las redes ya están en el menú lateral, como
   en móvil. */
@media (min-width: 721px) and (max-width: 980px) {
  .topbar__inner { flex-wrap: nowrap; }
  .topbar__quick .quick-link:not(.quick-link--sv),
  .topbar__quick a[aria-label] { display: none; }
}

/* =========================================================
   Navegación por secciones (septiembre de 2026)
   Cada entrada del menú lleva a la página resumen de su sección; el
   desplegable, a las páginas de dentro. Todo lo genera partials.js.
   ========================================================= */
.dropdown { min-width: 268px; }
.dropdown__hub {
  display: flex !important; align-items: center; justify-content: space-between; gap: 14px;
  margin: -2px 0 6px; padding: 11px 13px !important; border-radius: 12px;
  background: var(--green-50); color: var(--green-900) !important; font-weight: 700 !important;
}
.dropdown__hub-label { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: -.01em; }
.dropdown__hub-ver { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; color: var(--green-700); }
.dropdown__hub:hover { background: var(--green-100) !important; }
.dropdown__hub:hover .dropdown__hub-ver i { transform: translateX(2px); }
.dropdown__hub-ver i { transition: transform .2s; }
.dropdown a[aria-current="page"] { background: var(--green-50); color: var(--green-900); font-weight: 700; }
.dropdown__grupo {
  padding: 8px 13px 4px; font-size: .66rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-500);
}

/* Icono de cada web hermana: el escudo en su color, o el escudo propio */
.web-ico {
  position: relative; flex-shrink: 0; display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px; overflow: visible;
}
.web-ico img { display: block; object-fit: contain; }
.web-ico i {
  position: absolute; right: -4px; bottom: -4px;
  width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center;
  font-size: .56rem; line-height: 1; border: 1.5px solid var(--surface-raised);
}
.web-ico--infantil   { background: linear-gradient(135deg, var(--brand-500), var(--brand-800)); }
.web-ico--infantil i { background: var(--yellow-400); color: var(--brand-900); }
.web-ico--campamento { background: linear-gradient(135deg, var(--yellow-400), var(--yellow-700)); }
.web-ico--campamento i { background: var(--brand-700); color: #fff; }
.web-ico--dragons    { background: #0c0c0c; box-shadow: inset 0 0 0 1px rgba(212,175,55,.45); }
.dropdown__web { padding-block: 7px !important; }
.drawer__acceso .web-ico i { border-color: #0b1a10; }


/* Barra de páginas de la sección, bajo la cabecera de cada página */
/* La barra de páginas la añade partials.js después de pintar: se le guarda
   el sitio bajo la cabecera para que el contenido no baje de golpe.
   Las páginas sin barra llevan .page-hero--sola. */
.js .page-hero:not(.page-hero--sola) { margin-bottom: 61px; }
.js .page-hero:has(+ .subnav), html.en-ventana .page-hero { margin-bottom: 0; }
.subnav {
  position: relative; z-index: 2;
  background: var(--surface-raised); border-bottom: 1px solid var(--border);
}
.subnav__lista {
  display: flex; gap: 4px; margin: 0; padding: 10px 0; list-style: none;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.subnav__lista::-webkit-scrollbar { display: none; }
.subnav__lista li { flex-shrink: 0; scroll-snap-align: start; }
.subnav__lista a {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  padding: 8px 14px; border-radius: 999px; white-space: nowrap;
  font-size: .88rem; font-weight: 600; color: var(--ink-700);
  transition: background .2s, color .2s;
}
.subnav__lista a i { color: var(--green-600); font-size: .9rem; }
.subnav__lista a:hover { background: var(--green-50); color: var(--green-900); }
.subnav__lista a[aria-current="page"] {
  background: var(--brand-800); color: #fff;
  box-shadow: 0 4px 14px -6px rgba(11,58,24,.55);
}
.subnav__lista a[aria-current="page"] i { color: var(--gold-300, #E3C254); }

.footer__col-title a { color: inherit; }
.footer__col-title a:hover { color: var(--yellow-400); }

/* Página mostrada como miniatura en la vista previa de Documentación */
.en-vista-previa .mobile-cta-bar, .en-vista-previa .to-top, .en-vista-previa .cursor-ring, .en-vista-previa .scroll-progress { display: none !important; }

/* Zonas pulsables mínimas (WCAG 2.5.8): los enlaces de icono solo, las
   migas de pan y los contactos del pie medían menos de 24 px. */
.topbar a { min-width: 26px; justify-content: center; padding-block: 4px; }
.topbar__contact a { justify-content: flex-start; }
.crumbs a, .footer__contact a { display: inline-flex; align-items: center; padding-block: 4px; min-height: 24px; }
.footer li a { display: inline-block; padding-block: 5px; margin-block: -5px; }
.footer__col-title a { display: inline-block; padding-block: 6px; }

/* ---------- Botón de la página que vive en otra web ----------
   En el desplegable, la Escuela Infantil no es una entrada más de la
   lista: es un botón con su color, su rótulo y la flecha en diagonal. */
.dropdown__destacado { margin: 2px 0 6px; }
.dropdown__boton {
  --acento: #a8325f;
  display: grid !important; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
  min-height: 56px; padding: 9px 12px !important; border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--acento) 30%, transparent);
  background: color-mix(in srgb, var(--acento) 9%, transparent);
  transition: background .2s, border-color .2s, transform .2s var(--ease-out);
}
.dropdown__boton:hover { background: color-mix(in srgb, var(--acento) 16%, transparent); border-color: var(--acento); transform: translateX(2px); }
.dropdown__boton-ico {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--acento) 16%, var(--surface-raised)); color: var(--acento); font-size: 1.05rem;
}
.dropdown__boton-txt { display: grid; line-height: 1.25; min-width: 0; }
.dropdown__boton-txt strong { font-weight: 700; color: var(--ink-900); }
.dropdown__boton-txt small { font-size: .74rem; font-weight: 700; color: var(--acento); }
.dropdown__boton-ir { color: var(--acento); font-size: .95rem; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dropdown__boton { --acento: #f79ec0; } }
:root[data-theme="dark"] .dropdown__boton { --acento: #f79ec0; }


/* ---------- Barra de hoy ----------
   Debajo de la navegación: el día, la hora y lo que pasa hoy. Los
   mensajes pasan deslizándose; se paran al pasar el ratón y con el
   botón, que es lo que pide la norma para el contenido en movimiento. */
.barra-hoy {
  position: relative; z-index: 3;
  background: linear-gradient(90deg, var(--brand-800), var(--brand-700) 55%, var(--brand-600));
  border-bottom: 1px solid rgba(196,146,0,.3);
  color: #fff;
}
/* Con JS la barra siempre acaba saliendo (como mínimo, con una cita):
   se pinta vacía y con su altura desde el principio para que no empuje
   la portada hacia abajo al llegar el contenido. */
.js .barra-hoy[hidden] { display: block !important; min-height: 47px; }
@media (max-width: 860px) { .js .barra-hoy[hidden] { min-height: 99px; } }
.barra-hoy__in {
  max-width: var(--container); margin: 0 auto; padding-inline: var(--margen-izq) var(--margen-der);
  min-height: 46px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
}
.barra-hoy__fecha {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: .84rem; font-weight: 600; color: rgba(255,255,255,.9); white-space: nowrap;
}
.barra-hoy__fecha > i { color: var(--gold-300); font-size: .95rem; }
.barra-hoy__dia::first-letter { text-transform: uppercase; }
.barra-hoy__reloj {
  padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.12);
  font-variant-numeric: tabular-nums; font-weight: 700; color: #fff;
}
/* La rueda de mensajes: todos apilados, solo se ve el activo */
.barra-hoy__rueda { position: relative; list-style: none; margin: 0; padding: 0; height: 46px; overflow: hidden; }
.barra-hoy__msg {
  position: absolute; inset: 0; display: flex; align-items: center; gap: 10px;
  font-size: .86rem; min-width: 0;
  opacity: 0; transform: translateX(28px); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .35s var(--ease-out);
}
.barra-hoy__msg.is-activa { opacity: 1; transform: none; pointer-events: auto; }
.barra-hoy__msg.is-saliendo { opacity: 0; transform: translateX(-28px); }
.barra-hoy__msg > i { color: var(--gold-300); font-size: .95rem; flex-shrink: 0; }
.barra-hoy__rotulo {
  flex-shrink: 0; padding: 2px 9px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.barra-hoy__texto { flex: 1 1 0; min-width: 0; color: rgba(255,255,255,.92); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-hoy__texto a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); }
.barra-hoy__texto a:hover { text-decoration-color: var(--gold-300); }
.barra-hoy__texto b { color: var(--gold-300); font-weight: 700; }
.barra-hoy__msg.es-hoy .barra-hoy__rotulo { background: var(--gold-400); color: var(--brand-900); }
.barra-hoy__msg.es-urgente .barra-hoy__rotulo { background: #E4572E; color: #fff; }
.barra-hoy__msg.es-aviso .barra-hoy__rotulo { background: rgba(227,194,84,.24); color: var(--gold-300); }
.barra-hoy__msg.es-cita .barra-hoy__texto { font-style: italic; }
.barra-hoy__mandos { display: flex; align-items: center; gap: 24px; }
.barra-hoy__pausa {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; cursor: pointer; font-size: .8rem;
  transition: background .2s;
}
.barra-hoy__pausa:hover { background: rgba(255,255,255,.14); }
.barra-hoy__agenda {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 700; color: var(--gold-300); white-space: nowrap;
}
.barra-hoy__agenda:hover { background: rgba(255,255,255,.1); color: var(--gold-300); }
@media (max-width: 860px) {
  .barra-hoy__in { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 8px 20px; }
  .barra-hoy__rueda { grid-column: 1 / -1; grid-row: 2; height: 42px; }
  .barra-hoy__msg { flex-wrap: nowrap; font-size: .8rem; }
  .barra-hoy__texto { flex: 1; min-width: 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* Con poco sitio sobra la flecha, no la palabra */
  .barra-hoy__agenda { font-size: .76rem; padding: 6px 8px; }
  .barra-hoy__agenda i { display: none; }
  .barra-hoy__fecha { min-width: 0; overflow: hidden; }
  .barra-hoy__dia { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
  .barra-hoy__agenda span, .barra-hoy__rotulo { font-size: .64rem; }
  .barra-hoy__fecha { font-size: .78rem; }
}
.barra-hoy__msg.es-promo .barra-hoy__rotulo { background: var(--gold-400); color: var(--brand-900); }
@media (prefers-reduced-motion: reduce) {
  .barra-hoy__msg { transition: opacity .2s linear; transform: none !important; }
}

/* Procedencia de las fotos de la portada. Va debajo de la tarjeta para
   no quedar tapada por las tarjetas flotantes. */
.hero__credito {
  max-width: 520px; margin: 40px 0 0 auto; padding: 0 2px;
  font-size: .76rem; line-height: 1.55; color: var(--ink-500); text-align: right;
}
@media (max-width: 980px) { .hero__credito { margin: 26px auto 0; text-align: center; } }

/* La agenda también se usa en la portada, que no carga secciones.css:
   por eso sus estilos viven aquí, en la hoja que cargan todas. */
/* =========================================================
   «Hoy en el cole»: qué día es, qué pasa hoy y qué viene
   ========================================================= */
.agenda {
  display: grid; grid-template-columns: 320px 1fr; gap: 0; overflow: hidden;
  border-radius: var(--radio-dispositivo, 28px); border: 1px solid var(--border);
  background: var(--surface-raised);
  box-shadow: 0 1px 2px rgba(11,58,24,.05), 0 26px 50px -34px rgba(11,58,24,.5);
}
.agenda--compacta { grid-template-columns: 1fr; }
.agenda__hoy {
  padding: 30px 28px; color: #fff;
  background: radial-gradient(circle at 85% 0%, rgba(212,168,14,.26), transparent 52%), linear-gradient(160deg, var(--brand-700), var(--brand-900));
}
.agenda__rotulo { margin: 0 0 14px; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-300, #E3C254); }
.agenda__fecha { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.15; color: #fff; letter-spacing: -.02em; }
.agenda__fecha b { font-size: 2.6rem; font-weight: 900; line-height: 1; display: inline-block; margin: 0 2px; }
.agenda__curso { margin: 6px 0 0; font-size: .86rem; color: rgba(255,255,255,.72) !important; }
.agenda__secretaria {
  display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0 !important; padding: 12px 14px;
  border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  font-size: .88rem; color: rgba(255,255,255,.88) !important; line-height: 1.45;
}
.agenda__secretaria i { color: var(--gold-300, #E3C254); margin-top: 2px; }
.agenda__secretaria strong { color: #fff; display: block; }
.agenda__secretaria small { display: block; margin-top: 4px; font-size: .76rem; color: rgba(255,255,255,.6); }
.agenda__secretaria--abierto i { color: #7FD196; }

.agenda__cuerpo { padding: 26px 28px; }
.agenda__titulo {
  margin: 0 0 10px; font-family: var(--font-sans); font-size: .72rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500);
}
.agenda__titulo + .agenda__lista { margin-bottom: 22px; }
.agenda__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.agenda-ev {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 12px; border-radius: 14px; transition: background .2s;
}
.agenda-ev:hover { background: var(--green-50); }
.agenda-ev.es-hoy { background: var(--yellow-100); }
.agenda-ev__dia {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 52px; border-radius: 12px; background: var(--green-100); color: var(--green-700);
  font-variant-numeric: tabular-nums;
}
.agenda-ev.es-hoy .agenda-ev__dia { background: var(--yellow-400); color: var(--brand-900); }
.agenda-ev__dia b { font-family: var(--font-display); font-size: 1.35rem; font-weight: 900; line-height: 1; }
.agenda-ev__dia span { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.agenda-ev__txt strong { display: block; font-size: .98rem; color: var(--ink-900); font-weight: 700; }
.agenda-ev__txt strong a { color: inherit; }
/* Titulares enlazados: el relleno vertical en linea agranda la zona
   tactil hasta 24px sin mover el texto ni el alto de la linea. */
.agenda-ev__txt strong a,
.agenda-ev__txt strong a:hover { color: var(--green-700); }
.agenda-ev__txt > span { display: block; font-size: .85rem; color: var(--ink-600); line-height: 1.45; }
.agenda-ev__cuando {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: .8rem; font-weight: 700; color: var(--green-700);
}
.agenda-ev.es-hoy .agenda-ev__cuando { color: var(--yellow-700); }

.agenda__avisos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.agenda__avisos li {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--surface-sunken);
  font-size: .88rem; color: var(--ink-700);
}
.agenda__avisos li i { color: var(--green-700); }
.agenda__avisos strong { display: block; color: var(--ink-900); font-size: .9rem; }
.agenda__avisos span span { display: block; font-size: .8rem; color: var(--ink-600); }
.agenda__estado { font-size: .76rem; font-weight: 800; color: var(--ink-500); white-space: nowrap; }
.agenda__avisos li.es-urgente { background: var(--yellow-100); }
.agenda__avisos li.es-urgente .agenda__estado, .agenda__avisos li.es-urgente i { color: var(--yellow-700); }
.agenda__avisos li.es-pasado { background: transparent; border: 1px dashed var(--border); }
.agenda__avisos li.es-pasado strong, .agenda__avisos li.es-pasado .agenda__estado { color: var(--ink-600); }
.agenda__avisos li.es-pasado i { color: var(--ink-500); }

.agenda__pie { margin: 18px 0 0 !important; }
.agenda__pie a { font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.agenda__pendiente { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.agenda__pendiente summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--green-700); min-height: 32px; display: inline-flex; align-items: center; }
.agenda__pendiente ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.agenda__pendiente li { font-size: .86rem; color: var(--ink-600); }
.agenda__pendiente li strong { color: var(--ink-900); }
.agenda__pendiente p { margin: 10px 0 0; font-size: .82rem; color: var(--ink-500); }

@media (max-width: 860px) {
  .agenda { grid-template-columns: 1fr; }
  .agenda__hoy { padding: 24px 22px; }
  .agenda__cuerpo { padding: 22px; }
  .agenda-ev { grid-template-columns: 46px 1fr; }
  .agenda-ev__cuando { grid-column: 2; }
  .agenda__avisos li { grid-template-columns: 20px 1fr; }
  .agenda__estado { grid-column: 2; }
}


/* =========================================================
   Calendario mensual del curso (bajo la agenda completa)
   ========================================================= */
.cal {
  display: grid; grid-template-columns: minmax(0, 430px) minmax(0, 1fr); gap: 0 28px;
  border-radius: var(--radio-dispositivo, 28px); border: 1px solid var(--border);
  background: var(--surface-raised); padding: 22px; margin-top: 22px;
}
@media (max-width: 860px) { .cal { grid-template-columns: 1fr; } }
.cal__cab { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cal__mes {
  flex: 1; margin: 0; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--ink-900);
}
.cal__mes::first-letter { text-transform: uppercase; }
.cal__mes span { color: var(--ink-500); font-weight: 400; }
.cal__flecha {
  width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-800);
  transition: background .2s, color .2s;
}
.cal__flecha:hover:not(:disabled) { background: var(--green-100); color: var(--green-800); }
.cal__flecha:disabled { opacity: .35; cursor: default; }
.cal__hoy {
  min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-sans); font-size: .82rem; font-weight: 700; color: var(--green-700);
}
.cal__hoy:hover { background: var(--green-100); }
.cal__semana, .cal__rejilla { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__semana { margin-bottom: 6px; }
.cal__semana li { text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .1em; color: var(--ink-400); }
.cal__dia {
  width: 100%; aspect-ratio: 1; max-height: 62px; display: grid; place-content: center; justify-items: center; gap: 3px;
  padding: 4px; border-radius: 12px; border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--font-sans); color: var(--ink-800); transition: background .15s, border-color .15s;
}
.cal__dia:hover { background: var(--green-50); border-color: var(--border); }
.cal__num { font-size: .95rem; font-weight: 600; line-height: 1; }
/* Los días pasados se apagan, pero siguen pasando el 4.5:1 */
.cal__dia.es-pasado .cal__num { color: var(--ink-500); }
.cal__dia.es-hoy { border-color: var(--green-600); font-weight: 800; }
.cal__dia.es-hoy .cal__num { color: var(--green-800); }
.cal__dia.tiene-evento { background: var(--green-50); }
.cal__dia.is-elegido { background: var(--brand-800); border-color: var(--brand-800); }
.cal__dia.is-elegido .cal__num { color: #fff; }
.cal__marcas { display: flex; gap: 3px; min-height: 6px; }
.cal__punto { width: 6px; height: 6px; border-radius: 999px; display: inline-block; }
.cal__punto--evento { background: var(--green-600); }
.cal__punto--aviso { background: var(--yellow-500); }
.cal__punto--hoy { background: transparent; box-shadow: inset 0 0 0 2px var(--green-600); }
.cal__dia.is-elegido .cal__punto--evento { background: var(--gold-300); }
.cal__dia.is-elegido .cal__punto--aviso { background: #fff; }
.cal__leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 14px 0 0; font-size: .78rem; color: var(--ink-500); }
.cal__leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.cal__detalle { padding-left: 28px; border-left: 1px solid var(--border); }
@media (max-width: 860px) {
  .cal__detalle { margin-top: 18px; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--border); }
}
.cal__detalle h3 { margin: 0 0 10px; font-size: 1.02rem; }
/* Solo la primera letra: «Domingo, 20 de septiembre», no «20 De Septiembre» */
.cal__detalle h3::first-letter { text-transform: uppercase; }
.cal__detalle ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cal__detalle li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: .9rem; }
.cal__detalle li > i { color: var(--green-700); font-size: 1rem; }
.cal__detalle li strong { display: block; color: var(--ink-900); }
.cal__detalle li span span { display: block; font-size: .85rem; color: var(--ink-600); line-height: 1.5; }
.cal__detalle li.es-aviso > i { color: var(--yellow-700); }
.cal__nada { margin: 0; font-size: .9rem; color: var(--ink-600); }
@media (max-width: 560px) {
  .cal { padding: 14px; }
  .cal__mes { font-size: 1.08rem; }
  .cal__dia { border-radius: 10px; }
  .cal__num { font-size: .85rem; }
}
.cal__titulo { margin: 34px 0 4px; font-size: 1.3rem; }
.cal__intro { margin: 0; font-size: .92rem; color: var(--ink-600); }

/* =========================================================
   Portada de una noticia
   Con foto real, la foto. Sin ella, una compuesta con el color y el
   icono de su categoría: visual, coherente y sin imágenes de banco.
   ========================================================= */
.portada-noticia {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 16 / 10; border-radius: 16px; background: var(--surface-sunken);
}
.portada-noticia > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portada-noticia--pintada {
  display: grid; place-content: center; justify-items: center; gap: 10px;
  background: linear-gradient(145deg, var(--t1), var(--t2));
  color: #fff;
}
.portada-noticia--pintada::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 78% 18%, rgba(255,255,255,.22), transparent 55%);
}
.portada-noticia--pintada > i { font-size: 2.4rem; opacity: .95; }
.portada-noticia--pintada > b { font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .9; }
.portada-noticia--alta { aspect-ratio: 4 / 3; border-radius: 18px; }
.portada-noticia--mini { aspect-ratio: 1; border-radius: 12px; }
.portada-noticia--mini > i { font-size: 1.3rem; }
.portada-noticia--mini > b { display: none; }

/* ==========================================================
   «Actualidad» de la portada: carrusel de noticias, al estilo del
   que ya usan Dolores Dragons y Dragons Den (buscar + filtrar +
   desplazamiento horizontal con tarjetas), en la paleta clara del
   colegio.
   ========================================================= */
.act-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 10px; margin-bottom: 22px;
}
/* En la cabecera de la portada: título a la izquierda, controles a la derecha */
.act-controles .act-toolbar { margin-bottom: 0; }
.act-head { margin-bottom: 32px; }
.act-head > div:first-child { max-width: 560px; }
.act-head p { margin-bottom: 0; }

.act-select { position: relative; display: inline-flex; }
.act-select select {
  appearance: none; -webkit-appearance: none; min-height: 40px; max-width: 100%;
  padding: 0 38px 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface-raised);
  font-family: var(--font-sans); font-size: .85rem; font-weight: 600; color: var(--ink-800);
  transition: border-color .2s;
}
.act-select select:hover { border-color: var(--green-300); }
.act-select select:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.act-select i {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-size: .75rem; color: var(--ink-500); pointer-events: none;
}

.act-search {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-raised);
  color: var(--ink-500); transition: border-color .2s;
}
.act-search:focus-within { border-color: var(--green-400); }
.act-search i { font-size: .85rem; }
.act-search input {
  border: 0; background: none; outline: none; font-family: var(--font-sans);
  font-size: .85rem; color: var(--ink-900); width: 128px; max-width: 40vw;
}
.act-search input::placeholder { color: var(--ink-400); }

.act-nav { display: flex; gap: 8px; }
.act-nav__btn {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-raised); color: var(--ink-700);
  cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
.act-nav__btn:hover { border-color: var(--green-400); color: var(--green-700); }
@media (max-width: 640px) { .act-nav { display: none; } }

/* La pista llega al borde para que se vea que hay más, pero la primera
   tarjeta empieza alineada con el texto y encaja ahí al deslizar. */
.act-pistabox { margin-inline: calc(-1 * var(--margen-izq)) calc(-1 * var(--margen-der)); }
.act-pista {
  display: flex; gap: 20px; overflow-x: auto; padding: 4px var(--margen-der) 18px var(--margen-izq);
  scroll-padding-inline: var(--margen-izq) var(--margen-der);
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.act-pista::-webkit-scrollbar { display: none; }

.act-card {
  position: relative;
  display: flex; flex-direction: column; flex: 0 0 auto; scroll-snap-align: start;
  width: min(340px, 82vw); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-raised); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm); transition: border-color .3s, box-shadow .3s, transform .3s;
}
.act-card:hover { border-color: var(--green-300); box-shadow: var(--shadow-lg); transform: translateY(-3px); }
@media (prefers-reduced-motion: reduce) { .act-card:hover { transform: none; } }

.act-card__foto { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.act-card__foto .portada-noticia { width: 100%; height: 100%; transition: transform .6s var(--ease-out); }
.act-card:hover .act-card__foto .portada-noticia { transform: scale(1.06); }
.act-card__insignias { position: absolute; top: 12px; left: 12px; display: flex; gap: 8px; }
.act-card__cat, .act-card__nuevo {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}
.act-card__cat { background: rgba(6,44,18,.72); color: #fff; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.act-card__nuevo { background: var(--gold-400); color: #241a00; }

.act-card__cuerpo { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 18px 20px 20px; }
.act-card__meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: .74rem; color: var(--ink-500); text-transform: uppercase; letter-spacing: .04em; }
.act-card__meta > * + *::before { content: "·"; margin-right: 10px; color: var(--ink-400); }
.act-card__titulo { margin: 0; font-size: 1.08rem; line-height: 1.3; color: var(--ink-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.act-card:hover .act-card__titulo { color: var(--green-700); }
.act-card__resumen { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--ink-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.act-card__pie {
  margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.act-card__doc { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--yellow-100); color: var(--yellow-700); font-size: .7rem; font-weight: 800; }
.act-card__link {
  display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; color: var(--green-700);
  text-transform: uppercase; letter-spacing: .04em;
}
.act-card__link i { transition: transform .2s; }
.act-card:hover .act-card__link i { transform: translateX(3px); }
/* El enlace cubre toda la tarjeta: con ratón se pulsa en cualquier sitio
   y con teclado el foco llega aquí, como en el carrusel de Dolores Dragons. */
.act-card__link::after { content: ""; position: absolute; inset: 0; }

.act-card__vacio { margin: 0; padding: 40px; text-align: center; color: var(--ink-500); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }

.act-puntos { display: flex; justify-content: center; gap: 0; margin-top: 2px; background: none; }
/* Solo las rayitas: el botón no lleva fondo ni borde propios */
.act-punto {
  appearance: none; -webkit-appearance: none; padding: 10px 4px; margin: 0; border: 0;
  background: none; box-shadow: none; display: grid; place-items: center; cursor: pointer;
}
.act-punto:focus-visible { outline: 2px solid var(--green-600); outline-offset: 0; border-radius: 6px; }
.act-punto span { display: block; width: 16px; height: 6px; border-radius: 999px; background: var(--border-strong); transition: width .25s, background .25s; }
.act-punto[aria-current="true"] span { width: 32px; background: var(--brand-700); }

.act-pie { margin: 22px 0 0; text-align: center; }

@media (max-width: 860px) {
  .act-head { flex-direction: column; align-items: stretch; gap: 18px; }
  .act-controles .act-toolbar { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .act-controles .act-toolbar { flex-wrap: nowrap; }
  .act-select { flex: 1 1 55%; min-width: 0; }
  .act-select select { width: 100%; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
  .act-search { flex: 1 1 45%; min-width: 0; }
  .act-search input { width: 100%; max-width: none; min-width: 0; }
}


/* El pie respira más y la última franja no queda pegada */
.footer__grid { gap: 40px 28px; }
.footer__bottom { margin-top: 12px; }

/* La sección de contacto y la botonera del ecosistema. Están también
   en nsd-base.css para infantil y campamento; el colegio no carga esa
   hoja, así que aquí va su copia. */
/* =========================================================
   Contacto: la misma sección al final de todas las páginas
   ========================================================= */
.contacto-band { padding: 72px 0; background: var(--surface-sunken); border-top: 1px solid var(--border); }
.contacto-band__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.contacto-band h2 { margin: 6px 0 8px; font-size: clamp(1.8rem, 3vw, 2.4rem); }
.contacto-band__texto > p { margin: 0 0 20px; color: var(--ink-600); max-width: 48ch; }
.contacto-band__datos { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; }
.contacto-band__datos li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-size: .95rem; color: var(--ink-700); }
.contacto-band__datos i { color: var(--green-700); font-size: 1rem; }
.contacto-band__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.contacto-band__mapa {
  position: relative; aspect-ratio: 16 / 11; border-radius: var(--radio-dispositivo, 28px); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-raised); box-shadow: var(--shadow);
}
.contacto-band__mapa iframe { width: 100%; height: 100%; border: 0; display: block; filter: saturate(.92); }
.contacto-band__ir {
  position: absolute; left: 14px; bottom: 14px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--ink-900);
  font-size: .88rem; font-weight: 700; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease-out), background .2s;
}
.contacto-band__ir i { color: var(--green-700); }
.contacto-band__ir:hover { transform: translateY(-2px); background: var(--green-100); color: var(--green-900); }
@media (max-width: 900px) {
  .contacto-band { padding: 54px 0; }
  .contacto-band__in { grid-template-columns: 1fr; gap: 28px; }
  .contacto-band__mapa { aspect-ratio: 16 / 10; }
}

/* =========================================================
   Las webs del grupo, en botones
   ========================================================= */
.grupo-webs { padding: 54px 0; background: var(--surface); border-top: 1px solid var(--border); }
.grupo-webs__titulo {
  margin: 0 0 20px; font-family: var(--font-sans); font-size: .74rem; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-500); text-align: center;
}
.grupo-webs__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.grupo-web {
  height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  border: 1px solid var(--border); background: var(--surface-raised); color: inherit;
  transition: transform .3s var(--ease-out), border-color .2s, box-shadow .3s;
}
.grupo-web:hover { transform: translateY(-3px); border-color: var(--green-300); box-shadow: var(--shadow); color: inherit; }
.grupo-web.es-aqui { border-color: var(--green-600); background: var(--green-50); }
.grupo-web__ico {
  width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--green-100); color: var(--green-700); font-size: 1.1rem;
}
.grupo-web__txt { display: grid; line-height: 1.3; min-width: 0; }
.grupo-web__txt strong { font-size: .94rem; color: var(--ink-900); }
.grupo-web__txt span { font-size: .78rem; color: var(--ink-500); }
.grupo-web__ir { color: var(--green-700); font-size: .9rem; }
@media (max-width: 1080px) { .grupo-webs__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grupo-webs__lista { grid-template-columns: 1fr; } }


/* La botonera del ecosistema, ya dentro del pie oscuro */
.footer .grupo-webs { padding: 8px 0 34px; background: transparent; border: 0; }
.footer .grupo-webs__titulo { color: rgba(255,255,255,.62); }
/* Las reglas generales del pie (.footer ul, .footer a) ganan por
   especificidad, así que la rejilla se repite aquí. */
.footer .grupo-webs__lista { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.footer .grupo-web {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #fff;
}
@media (max-width: 1080px) { .footer .grupo-webs__lista { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .footer .grupo-webs__lista { grid-template-columns: 1fr; } }
.footer .grupo-web:hover { border-color: var(--gold-400); background: rgba(255,255,255,.12); color: #fff; }
.footer .grupo-web.es-aqui { border-color: var(--gold-400); background: rgba(227,194,84,.14); }
.footer .grupo-web__ico { background: rgba(255,255,255,.12); color: var(--gold-300); }
.footer .grupo-web__txt strong { color: #fff; }
.footer .grupo-web__txt span { color: rgba(255,255,255,.66); }
.footer .grupo-web__ir { color: var(--gold-300); }

/* Días con clase y sin clase, en el calendario */
.cal__dia.con-clase .cal__num { color: var(--ink-900); }
.cal__dia.sin-clase { background: var(--surface-sunken); }
.cal__dia.sin-clase .cal__num { color: var(--ink-500); }
.cal__dia.sin-confirmar { background: var(--yellow-100); border-style: dashed; border-color: var(--border-strong); }
.cal__dia.is-elegido.sin-clase, .cal__dia.is-elegido.sin-confirmar { background: var(--brand-800); }
.cal__muestra { width: 14px; height: 14px; border-radius: 5px; display: inline-block; border: 1px solid var(--border); }
.cal__muestra--clase { background: var(--surface-raised); }
.cal__muestra--sin { background: var(--surface-sunken); }
.cal__muestra--dudosa { background: var(--yellow-100); border-style: dashed; border-color: var(--border-strong); }
.cal__clase {
  display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start;
  margin: 0 0 12px; padding: 9px 12px; border-radius: 12px; font-size: .9rem;
  background: var(--surface-sunken); color: var(--ink-700);
}
.cal__clase.es-si { background: var(--green-100); color: var(--green-900); }
.cal__clase.es-si > i { color: var(--green-700); }
.cal__clase.es-dudosa { background: var(--yellow-100); color: var(--yellow-700); }
.cal__clase em { font-style: normal; opacity: .85; }

/* Aviso de si hoy hay clase, dentro del panel oscuro de la agenda */
.agenda__clase {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0 !important; padding: 11px 14px;
  border-radius: 14px; font-size: .88rem; line-height: 1.45;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.88) !important;
}
.agenda__clase i { margin-top: 2px; font-size: 1rem; }
.agenda__clase strong { color: #fff; display: block; }
.agenda__clase small { color: rgba(255,255,255,.66); font-size: .8rem; }
.agenda__clase.es-si { background: rgba(94,191,120,.16); border-color: rgba(94,191,120,.38); }
.agenda__clase.es-si i { color: #9BD6AE; }
.agenda__clase.es-no i { color: var(--gold-300, #E3C254); }
/* El día elegido manda sobre el color de «sin clase»: si no, el número
   se queda gris sobre el verde oscuro y no se lee. */
.cal__dia.is-elegido .cal__num { color: #fff; }

/* =========================================================
   Banda del club en la portada: brillo y movimiento
   ---------------------------------------------------------
   El marcado lleva los colores en línea; aquí solo van
   propiedades que no están ahí (sombra, transform, animación
   y pseudoelementos), así que no pelean entre sí.
   ========================================================= */

/* Una luz dorada que cruza la banda de vez en cuando */
.dragons2::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(232,201,122,.10) 45%, rgba(232,201,122,.18) 50%, rgba(232,201,122,.10) 55%, transparent);
  transform: skewX(-14deg); pointer-events: none; z-index: 0;
  animation: dragonsLuz 7s ease-in-out 1.5s infinite;
}
@keyframes dragonsLuz {
  0%   { left: -40%; opacity: 0; }
  12%  { opacity: 1; }
  55%  { left: 100%; opacity: 0; }
  100% { left: 100%; opacity: 0; }
}

/* El punto de «inscripciones abiertas», latiendo */
.dragons2__latido { position: relative; box-shadow: 0 0 0 0 rgba(232,201,122,.7); animation: dragonsLatido 2.2s ease-out infinite; }
@keyframes dragonsLatido {
  0%   { box-shadow: 0 0 0 0 rgba(232,201,122,.65); }
  70%  { box-shadow: 0 0 0 9px rgba(232,201,122,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,201,122,0); }
}
.dragons2__sello { box-shadow: 0 0 22px -6px rgba(232,201,122,.35); }

/* El oro del titular, vivo */
.dragons2__oro {
  background: linear-gradient(100deg, #C9A227 0%, #F3DE9A 28%, #E8C97A 45%, #FFF3CE 58%, #E8C97A 72%, #C9A227 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
  animation: dragonsOro 6s ease-in-out infinite;
}
@keyframes dragonsOro { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* El escudo flota y respira su halo */
.dragons2__escudo {
  filter: drop-shadow(0 0 18px rgba(212,175,55,.38));
  animation: dragonsFlota 5.5s ease-in-out infinite;
}
@keyframes dragonsFlota {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 16px rgba(212,175,55,.32)); }
  50%      { transform: translateY(-7px); filter: drop-shadow(0 0 30px rgba(212,175,55,.55)); }
}

/* La tarjeta: se levanta y enseña un reflejo al pasar por encima */
.dragons2__tarjeta {
  position: relative; overflow: hidden;
  box-shadow: 0 30px 70px -40px rgba(232,201,122,.55), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.dragons2__tarjeta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  background-size: 300% 100%; background-position: -60% 0;
  transition: background-position 1s var(--ease-out);
}
.dragons2__tarjeta:hover { transform: translateY(-6px); box-shadow: 0 40px 90px -40px rgba(232,201,122,.75); }
.dragons2__tarjeta:hover::before { background-position: 160% 0; }

/* Cada dato de la tarjeta reacciona */
.dragons2__fila { transition: transform .25s var(--ease-out), box-shadow .25s ease; }
.dragons2__fila:hover { transform: translateX(3px); box-shadow: inset 0 0 0 1px rgba(232,201,122,.3); }

/* Las cifras, con un punto de brillo */
.dragons2__cifra { text-shadow: 0 0 24px rgba(232,201,122,.28); }

/* Botones: respuesta al pulsar y halo en el dorado */
.dragons2__boton { transition: transform .25s var(--ease-out), box-shadow .3s ease, background .25s ease; }
.dragons2__boton:not(.dragons2__boton--linea) { box-shadow: 0 10px 30px -12px rgba(232,201,122,.75); }
.dragons2__boton:hover { transform: translateY(-2px); box-shadow: 0 16px 38px -12px rgba(232,201,122,.9); }
.dragons2__boton--linea:hover { background: rgba(232,201,122,.12) !important; }
.dragons2__boton:active { transform: translateY(0) scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .dragons2::after, .dragons2__latido, .dragons2__oro, .dragons2__escudo { animation: none; }
  .dragons2__oro { background-position: 30% 50%; }
  .dragons2__tarjeta, .dragons2__fila, .dragons2__boton { transition: none; }
  .dragons2__tarjeta:hover, .dragons2__boton:hover, .dragons2__fila:hover { transform: none; }
}

/* =========================================================
   Pie: proporciones
   ---------------------------------------------------------
   La columna de la marca era demasiado estrecha (la dirección
   partía mal y el correo caía debajo de su icono) y las cinco
   columnas de enlaces tenían anchos distintos, así que el aire
   sobrante se acumulaba a la derecha. Ahora la marca tiene su
   espacio y las cinco columnas miden lo mismo.
   ========================================================= */
.footer__grid {
  grid-template-columns: minmax(270px, 1.7fr) repeat(5, minmax(0, 1fr));
  gap: 44px 30px;
  align-items: start;
}
.footer__brand { max-width: 340px; }
.footer__brand p { max-width: none; }

/* Icono y texto en columnas: el texto sangra bajo sí mismo, no bajo el icono */
.footer__contact { gap: 12px; }
.footer__contact li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px;
  align-items: start; line-height: 1.55;
}
.footer__contact i { margin-right: 0; line-height: 1.55; }
.footer__contact a { display: inline; overflow-wrap: anywhere; }

/* Las columnas de enlaces, con el mismo ritmo */
.footer__grid > div:not(.footer__brand) ul { gap: 2px; }
.footer__grid > div:not(.footer__brand) li a { display: block; padding-block: 7px; margin-block: 0; }

@media (max-width: 1200px) {
  .footer__grid { grid-template-columns: minmax(240px, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: span 1; max-width: none; }
}
@media (max-width: 900px) {
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; max-width: 420px; }
}
@media (max-width: 620px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 22px; }
}
@media (max-width: 420px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Contacto con formulario: la misma pieza que infantil y
   campamento. (El colegio no carga nsd-base.css, de ahí la copia.)
   ========================================================= */
.contacta {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 30px; align-items: start;
}
/* En el colegio los datos van a la izquierda y el formulario a la derecha */
.contacta--invertida { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
.contacta__accion { min-width: 0; }
.contacta__datos {
  min-width: 0; display: grid; gap: 16px; align-content: start;
  padding: 28px; border-radius: var(--radius-lg);
  background: var(--surface-sunken); border: 1px solid var(--border);
}
.contacta__datos > h2 { margin: 6px 0 4px; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.contacta__datos > p { margin: 0; color: var(--ink-600); line-height: 1.65; }
.contacta__datos .contact-list { margin: 4px 0 0; }
/* La tarjeta del mapa lleva aspect-ratio 16/9 en pages.css, que aquí
   la hacía más alta que toda la columna de al lado. */
.contacta__datos .map-card { margin-top: 4px !important; aspect-ratio: auto; height: 165px; overflow: hidden; }
.contacta__horario .tabla th, .contacta__horario .tabla td { padding: 9px 12px; }
.contacta__horario h3 { margin: 0 0 8px; }
.ancla { display: block; position: relative; top: calc(var(--navbar-h, 77px) * -1); visibility: hidden; }
@media (max-width: 980px) {
  .contacta, .contacta--invertida { grid-template-columns: 1fr; gap: 24px; }
  .contacta__datos { padding: 22px; }
}
/* La casilla de privacidad quedaba apilada: «.form-card label» (0,1,1)
   le imponía display:block a «.form-check» (0,1,0). */
.form-card label.form-check { display: flex; align-items: flex-start; gap: 10px; }
/* La regla general del formulario pone width:100% a los input, y eso
   estiraba la casilla hasta empujar el texto fuera de la tarjeta. */
.form-card label.form-check input[type="checkbox"] {
  width: 22px; height: 22px; min-width: 22px; margin-top: 1px; flex-shrink: 0; accent-color: var(--green-600);
}
.form-card label.form-check > span { flex: 1; min-width: 0; line-height: 1.5; }

/* Las dos columnas, del mismo tamaño y a la misma altura: antes una
   acababa mucho antes que la otra y la sección se veía torcida. */
.contacta { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.contacta--invertida { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contacta__accion { display: flex; flex-direction: column; }
.contacta__accion > form,
.contacta__accion > .form-card,
.contacta__accion > .apuntarse { flex: 1; display: flex; flex-direction: column; }
.contacta__accion > form > .form-card__cuerpo,
.contacta__accion > form > .form-body { flex: 1; display: flex; flex-direction: column; }
.contacta__accion > form .form-grid { flex: 1; align-content: start; }
.contacta__datos { height: 100%; }
@media (max-width: 980px) {
  .contacta, .contacta--invertida { grid-template-columns: 1fr; }
  .contacta__accion > form, .contacta__accion > .form-card, .contacta__accion > .apuntarse { display: block; }
}

/* Botones del ecosistema: todos iguales, sin que ninguna palabra
   parta en dos líneas. Fuente algo menor y una sola línea por texto. */
.grupo-web { padding: 13px 14px; gap: 11px; align-items: center; }
.grupo-web__ico { width: 34px; height: 34px; border-radius: 11px; font-size: 1rem; }
.grupo-web__txt strong,
.grupo-web__txt span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grupo-web__txt strong { font-size: .88rem; line-height: 1.25; }
.grupo-web__txt span { font-size: .74rem; line-height: 1.3; }
.grupo-web__ir { font-size: .85rem; }
.footer .grupo-web { padding: 13px 14px; gap: 11px; }
@media (max-width: 1200px) and (min-width: 1081px) {
  .grupo-web__txt strong { font-size: .84rem; }
  .grupo-web__txt span { font-size: .71rem; }
}

/* El botón va justo después de la casilla, no pegado al fondo: si la
   otra columna es más alta, el hueco se queda debajo del botón, que es
   donde no molesta. */

/* Altura fija: así los cinco botones miden lo mismo en las tres webs,
   sin depender de cómo redondee cada hoja el alto del contenido. */
.grupo-web { min-height: 62px; }
.footer .grupo-web { min-height: 62px; margin-block: 0; }

/* Pasos y tablas: el colegio no carga nsd-base.css, así que la
   sección de contacto necesita su copia de estas dos piezas. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: paso; list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative; padding: 30px 26px 26px; border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--ink-100);
}
.step::before {
  counter-increment: paso; content: counter(paso);
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-900)); color: #fff;
  font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; margin-bottom: 16px;
}
.step h3 { font-size: 1.2rem; }
.step p { margin: 0; font-size: .94rem; }

.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.tabla th { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500); font-weight: 700; }
.tabla td:first-child { font-weight: 700; color: var(--ink-900); white-space: nowrap; }
.tabla-marco { background: var(--surface-raised); border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: 8px 10px; overflow-x: auto; }

.contacta__horario h3 { display: flex; align-items: center; gap: 9px; margin: 4px 0 10px; font-size: 1.05rem; }
.contacta__horario h3 i { color: var(--green-700); }
.contacta__horario .tabla-marco { padding: 4px 6px; }
.contacta__horario .tabla th, .contacta__horario .tabla td { padding: 11px 12px; font-size: .9rem; }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.form-nota { margin: 14px 0 0; font-size: .84rem; line-height: 1.6; color: var(--ink-500); }
.form-nota a { color: var(--green-700); font-weight: 600; }
/* La tarjeta del mapa vivía solo en pages.css, que la portada y
   admisión no cargan: sin esto el mapa salía en blanco. */
.map-card { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); background: var(--ink-50); }
.map-card iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Aire entre los tres pasos y las dos columnas */
.steps + .contacta, .steps ~ .contacta { margin-top: 40px; }
.section__head + .steps { margin-top: 8px; }

/* =========================================================
   SELLOS Y PROGRAMAS
   ---------------------------------------------------------
   Tira de logos encima de la banda de contacto, en todas las
   paginas. Mientras no haya archivo de logo, el sello enseña
   el nombre escrito; la clase «sello--con-logo» la pone
   partials.js cuando la imagen carga de verdad.
   ========================================================= */
.sellos {
  padding: 54px 0 58px;
  /* Fondo claro: la seccion de encima suele ser la crema y dos cremas
     seguidas no se distinguen. */
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.sellos__titulo {
  margin: 0 0 30px;
  font-family: var(--font-sans, inherit);
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-500); text-align: center;
}
/* Siete sellos: en rejilla dejaban un huerfano pegado a la izquierda.
   Con flex y centrado, la ultima fila queda centrada bajo las demas. */
.sellos__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
}
.sello { flex: 0 0 calc((100% - 42px) / 4); }
@media (max-width: 980px) { .sello { flex-basis: calc((100% - 28px) / 3); } }
@media (max-width: 620px) { .sello { flex-basis: calc((100% - 14px) / 2); } }
.sello {
  position: relative;
  display: grid; place-items: center;
  min-height: 132px; padding: 16px 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
}
.sello__logo {
  display: block;
  /* Los apaisados se limitan por ancho y los cuadrados por alto: si todos se
     midieran por el alto, un logo ancho pesaria el triple que uno compacto. */
  max-width: 88%; max-height: 84px; width: auto; height: auto;
  object-fit: contain;
}
/* Con logo de verdad, la baldosa se queda blanca en los dos temas: los logos
   oficiales vienen pensados para fondo claro. */
.sello--con-logo { background: #FFFFFF; }
.sello--con-logo .sello__nombre { display: none; }
.sello__nombre {
  font-size: .82rem; font-weight: 700; line-height: 1.4;
  color: var(--ink-600); text-align: center; text-wrap: balance;
}
@media (max-width: 720px) {
  .sellos { padding: 42px 0 46px; }
  .sello { min-height: 112px; padding: 14px 10px; }
  .sello__logo { max-height: 68px; max-width: 90%; }
}

/* Un enlace metido en un parrafo no puede distinguirse solo por el color
   (WCAG 1.4.1). Solo los enlaces «desnudos», sin clase: los botones, la
   navegacion y las tarjetas ya se distinguen por su forma. */
p a:not([class]), .legal li a:not([class]) {
  text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;
}

/* =========================================================
   EQUIPO DIRECTIVO
   ---------------------------------------------------------
   Fichas que se abren al pulsarlas. Mientras no haya fotos,
   cada persona se identifica con sus iniciales.
   ========================================================= */
.equipo { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.equipo--simple { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.equipo__item {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface-raised); overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.equipo__item:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }
.equipo__item--plano { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.equipo__ficha {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
}
.equipo__avatar {
  flex-shrink: 0; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--green-700), var(--green-500));
  color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: .02em;
}
.equipo__item--plano .equipo__avatar { width: 46px; height: 46px; font-size: .95rem; }
.equipo__txt { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.equipo__nombre { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink-900); line-height: 1.25; }
.equipo__cargo { font-size: .86rem; color: var(--ink-500); }
.equipo__flecha { flex-shrink: 0; color: var(--green-700); transition: transform .25s; }
.equipo__ficha[aria-expanded="true"] .equipo__flecha { transform: rotate(180deg); }
.equipo__ficha[aria-expanded="true"] { background: var(--green-50, #F0FDF4); }
.equipo__detalle { padding: 4px 20px 20px 90px; }
.equipo__detalle p { margin: 0 0 14px; font-size: .94rem; line-height: 1.7; color: var(--ink-600); }
.equipo__datos { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.equipo__datos li { display: flex; align-items: center; gap: 9px; font-size: .9rem; color: var(--ink-700); }
.equipo__datos i { color: var(--green-700); }
.equipo__nota { margin-top: 18px; font-size: .86rem; color: var(--ink-500); display: flex; align-items: center; gap: 8px; }
.equipo__nota i { color: var(--green-700); }
@media (max-width: 620px) {
  .equipo__detalle { padding: 4px 18px 18px; }
  .equipo__ficha { padding: 16px; gap: 13px; }
  .equipo__avatar { width: 46px; height: 46px; font-size: .92rem; }
}

/* Organigrama del equipo directivo: la direccion se separa del resto
   (banda con fondo propio) y las fichas llevan la imagen por delante,
   con los datos debajo. Mismo patron de "toda la tarjeta es el enlace"
   que el carrusel de noticias, pero con expansion en vez de enlace. */
.organigrama__tier--direccion {
  background: var(--green-50, #F0FDF4); border: 1px solid var(--green-100);
  border-radius: var(--radius-lg); padding: 30px 22px 34px;
}
.organigrama__etiqueta {
  margin: 0 0 20px; text-align: center; font-size: .72rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--green-700);
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.organigrama__etiqueta--suave { color: var(--ink-500); }
.organigrama__fila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 22px; }
@media (max-width: 620px) { .organigrama__fila { grid-template-columns: 1fr; } }
.organigrama__conector { display: flex; justify-content: center; }
.organigrama__conector span { width: 2px; height: 30px; background: var(--border-strong); }
.organigrama__tier--gestion { padding-top: 26px; }

.dir-card {
  width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-raised); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.dir-card:hover { border-color: var(--green-400); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.dir-card__ficha {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column;
  width: 100%; cursor: pointer; font-family: inherit; color: inherit;
}
.dir-card__medio { position: relative; aspect-ratio: 4 / 5; }
.dir-card__medio .hueco { position: absolute; inset: 0; border-radius: 0; border: 0; aspect-ratio: auto; }
.dir-card__cuerpo { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 44px 16px 18px; }
.dir-card__nombre { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink-900); line-height: 1.3; }
.dir-card--principal .dir-card__nombre { font-size: 1.1rem; }
.dir-card__cargo { font-size: .82rem; color: var(--ink-500); line-height: 1.4; }
.dir-card__flecha {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-sunken); color: var(--green-700); font-size: .95rem;
  transition: transform .25s, background .2s;
}
.dir-card__ficha[aria-expanded="true"] .dir-card__flecha { transform: translateY(-50%) rotate(180deg); background: var(--green-100, #DCF5E4); }
.dir-card__ficha[aria-expanded="true"] { background: var(--green-50, #F0FDF4); }
.dir-card__detalle { padding: 2px 18px 20px; }
.dir-card__detalle p { margin: 0 0 14px; font-size: .9rem; line-height: 1.65; color: var(--ink-600); }
@media (max-width: 480px) {
  .dir-card { max-width: 360px; margin: 0 auto; }
}

/* =========================================================
   DEPARTAMENTOS
   ---------------------------------------------------------
   Mismas fichas desplegables que el equipo directivo, con un
   recuadro a la derecha esperando la foto del departamento.
   ========================================================= */
.dep { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.dep__item {
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface-raised); overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.dep__item:hover { border-color: var(--green-600); box-shadow: var(--shadow-sm); }
.dep__ficha {
  width: 100%; display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
}
.dep__icono {
  flex-shrink: 0; width: 50px; height: 50px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.3rem; color: #fff;
}
.dep__icono--color-1 { background: linear-gradient(140deg, #1A7040, #5EBF78); }
.dep__icono--color-2 { background: linear-gradient(140deg, #1D4E89, #5A9BD8); }
.dep__icono--color-3 { background: linear-gradient(140deg, #7B2D8E, #C86BD8); }
.dep__icono--color-4 { background: linear-gradient(140deg, #B23A48, #F08A8A); }
.dep__icono--color-5 { background: linear-gradient(140deg, #9A5B00, #F0B95C); }
.dep__icono--color-6 { background: linear-gradient(140deg, #17697E, #5FC2D8); }
.dep__txt { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.dep__nombre { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-900); line-height: 1.25; }
.dep__resumen { font-size: .9rem; line-height: 1.6; color: var(--ink-600); }
.dep__flecha { flex-shrink: 0; color: var(--green-700); transition: transform .25s; }
.dep__ficha[aria-expanded="true"] .dep__flecha { transform: rotate(180deg); }
.dep__ficha[aria-expanded="true"] { background: var(--green-50, #F0FDF4); }
.dep__detalle {
  display: grid; grid-template-columns: 1fr 260px; gap: 22px;
  padding: 6px 20px 22px 86px; align-items: start;
}
.dep__datos { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.dep__datos li { display: flex; align-items: center; gap: 9px; font-size: .92rem; color: var(--ink-700); }
.dep__datos i { color: var(--green-700); }
.dep__equipo { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; color: var(--ink-500); }
.dep__equipo i { color: var(--green-700); margin-top: 2px; }
.dep__foto { margin: 0; }
@media (max-width: 860px) {
  .dep__detalle { grid-template-columns: 1fr; padding: 6px 18px 18px; }
}

/* Departamentos agrupados por categoria, en paneles con imagen por
   delante (foto real cuando existe; si no, el mismo recuadro de color
   que el resto del ecosistema) y el icono del area como insignia. */
.dep-categorias { display: flex; flex-direction: column; gap: 34px; }
.dep-categoria__titulo {
  display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
  font-family: var(--font-display); font-size: 1.05rem; color: var(--ink-800);
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.dep-categoria__titulo i { color: var(--green-700); font-size: 1.1rem; }
.dep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
@media (max-width: 560px) { .dep-grid { grid-template-columns: 1fr; } }

.dep-card {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface-raised); overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.dep-card:hover { border-color: var(--green-400); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.dep-card__ficha {
  all: unset; box-sizing: border-box; display: flex; flex-direction: column;
  width: 100%; cursor: pointer; font-family: inherit; color: inherit; position: relative;
}
.dep-card__medio { position: relative; aspect-ratio: 4 / 3; }
.dep-card__medio .hueco, .dep-card__medio .foto-real {
  position: absolute; inset: 0; border-radius: 0; border: 0; aspect-ratio: auto;
}
.dep-card__icono {
  position: absolute; left: 12px; bottom: 12px; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; font-size: 1.15rem; color: #fff;
  box-shadow: 0 4px 10px -2px rgba(0,0,0,.35);
}
.dep-card__icono--color-1 { background: linear-gradient(140deg, #1A7040, #5EBF78); }
.dep-card__icono--color-2 { background: linear-gradient(140deg, #1D4E89, #5A9BD8); }
.dep-card__icono--color-3 { background: linear-gradient(140deg, #7B2D8E, #C86BD8); }
.dep-card__icono--color-4 { background: linear-gradient(140deg, #B23A48, #F08A8A); }
.dep-card__icono--color-5 { background: linear-gradient(140deg, #9A5B00, #F0B95C); }
.dep-card__icono--color-6 { background: linear-gradient(140deg, #17697E, #5FC2D8); }
.dep-card__cuerpo { display: flex; flex-direction: column; gap: 5px; padding: 16px 40px 16px 18px; }
.dep-card__nombre { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink-900); line-height: 1.3; }
.dep-card__resumen { font-size: .85rem; line-height: 1.55; color: var(--ink-600); }
.dep-card__flecha {
  position: absolute; right: 12px; top: 12px;
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--surface-raised); border: 1px solid var(--border);
  color: var(--green-700); font-size: .85rem; transition: transform .25s, background .2s;
}
.dep-card__ficha[aria-expanded="true"] .dep-card__flecha { transform: rotate(180deg); background: var(--green-100, #DCF5E4); }
.dep-card__ficha[aria-expanded="true"] .dep-card__cuerpo { background: var(--green-50, #F0FDF4); }
.dep-card__detalle { padding: 0 18px 18px; }
.dep-card__detalle .dep__datos { margin: 0 0 12px; }

/* Recuadros de color a la espera de foto. Mismos tonos que en la escuela
   infantil, para que todo el ecosistema hable el mismo idioma. */
.hueco.hueco--color-1 { background: linear-gradient(140deg, #DFF3E6, #F1FAF3); border-style: solid; border-color: transparent; }
.hueco.hueco--color-2 { background: linear-gradient(140deg, #E5EAFB, #F3F6FE); border-style: solid; border-color: transparent; }
.hueco.hueco--color-3 { background: linear-gradient(140deg, #F3E4FA, #FAF3FD); border-style: solid; border-color: transparent; }
.hueco.hueco--color-4 { background: linear-gradient(140deg, #FCE4E6, #FEF3F4); border-style: solid; border-color: transparent; }
.hueco.hueco--color-5 { background: linear-gradient(140deg, #FFEBD6, #FFF7EC); border-style: solid; border-color: transparent; }
.hueco.hueco--color-6 { background: linear-gradient(140deg, #E2F1F6, #F2F9FB); border-style: solid; border-color: transparent; }
.hueco.hueco--color-1 i { color: #1F7A46; }
.hueco.hueco--color-2 i { color: #3A57A8; }
.hueco.hueco--color-3 i { color: #8E2E8E; }
.hueco.hueco--color-4 i { color: #B23A48; }
.hueco.hueco--color-5 i { color: #A85E00; }
.hueco.hueco--color-6 i { color: #17697E; }
.hueco[class*="hueco--color-"] strong { color: var(--ink-900); }
.hueco[class*="hueco--color-"] span { color: var(--ink-600); }

/* La foto de cada persona del equipo, cuando la haya. Mientras tanto, un
   recuadro del color de su ficha. */
.equipo__detalle { display: grid; grid-template-columns: 1fr 220px; gap: 22px; align-items: start; }
.equipo__cuerpo { min-width: 0; }
.equipo__foto { margin: 0; aspect-ratio: 3 / 4; }
@media (max-width: 860px) {
  .equipo__detalle { grid-template-columns: 1fr; }
  .equipo__foto { aspect-ratio: 16 / 9; }
}

/* =========================================================
   PORTADAS ALINEADAS
   ---------------------------------------------------------
   Misma vertical que la escuela infantil y el campamento: la
   rejilla arranca por arriba y el titular reserva cuatro
   lineas. Ver nsd-base.css, donde esta la copia maestra.
   ========================================================= */
@media (min-width: 981px) {
  .hero__grid { align-items: start; }
  .hero__titular {
    font-size: clamp(2.5rem, 5.5vw, 4.2rem); line-height: 1.05;
    min-height: 282px; min-height: 4lh;
    display: flex; align-items: center;
  }
  .hero__titular h1 { width: 100%; }
  .hero__credito { min-height: 38px; min-height: 2lh; }
}

/* Documentacion relacionada con el post: mismo lenguaje visual que el
   gestor de documentos, para que se reconozca de un vistazo. */
.post-card__docs {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin: 32px 0 0; padding: 18px 20px; border-radius: var(--radius-lg);
  border: 1px solid var(--border); background: var(--surface-sunken);
}
.post-card__docs-ico {
  flex-shrink: 0; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 12px; background: var(--green-100); color: var(--green-700); font-size: 1.2rem;
}
.post-card__docs-txt { flex: 1 1 220px; min-width: 0; }
.post-card__docs-txt strong { display: block; font-size: .95rem; color: var(--ink-900); }
.post-card__docs-txt span { font-size: .82rem; color: var(--ink-500); }
.post-card__docs-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 480px) { .post-card__docs-acciones .btn { flex: 1 1 auto; justify-content: center; } }

/* =========================================================
   TARJETA DE POST — la misma pieza al entrar directo (url
   compartida, otra web) o al abrirse en ventana emergente
   desde dentro de la propia web (nsd-post-modal.js, sin
   navegar). La clase va en <main id="contenido">.
   ========================================================= */
html[data-page="blog"] body { background: var(--surface-sunken); }
.post-card {
  position: relative; max-width: 880px; margin: 28px auto 64px;
  border-radius: var(--radius-xl); overflow: hidden;
  background: var(--surface-raised);
  box-shadow: 0 40px 90px -40px rgba(11,58,24,.5);
}
.post-card .page-hero { padding: 56px 0 40px; }
.post-card .article { grid-template-columns: 1fr; padding-top: 48px; }
.post-card .aside { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (max-width: 640px) { .post-card { margin: 0 0 40px; border-radius: 0; } .post-card .page-hero { padding: 44px 0 30px; } }

.post-card__cerrar {
  position: absolute; top: 18px; left: max(18px, calc(var(--margen-izq) - 6px)); z-index: 5;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; background: rgba(6,20,10,.45); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  text-decoration: none; font-size: 1.05rem;
  transition: background .2s, transform .2s;
}
.post-card__cerrar:hover { background: rgba(6,20,10,.7); transform: scale(1.06); }
.post-card__cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- La ventana emergente (nsd-post-modal.js) ----------
   Cuando se abre desde dentro de la propia web: la pagina de detras
   se queda tal cual, y la tarjeta flota encima con su propio fondo. */
html.con-post { overflow: hidden; }
.nsd-post-overlay {
  position: fixed; inset: 0; z-index: 9997;
  display: flex; justify-content: center; align-items: flex-start;
  padding: 28px 16px; overflow-y: auto;
  opacity: 0; transition: opacity .22s ease;
}
.nsd-post-overlay.is-abierta { opacity: 1; }
.nsd-post-overlay__fondo {
  position: fixed; inset: 0; z-index: -1;
  background: rgba(6,14,8,.6);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.nsd-post-overlay .post-card {
  margin: 0; width: 100%;
  transform: translateY(14px); transition: transform .28s var(--ease-out, ease);
}
.nsd-post-overlay.is-abierta .post-card { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .nsd-post-overlay, .nsd-post-overlay .post-card { transition: none; }
}
@media (max-width: 640px) { .nsd-post-overlay { padding: 0; } .nsd-post-overlay .post-card { min-height: 100%; } }

/* El post va en un iframe a pantalla completa, transparente: el desplazamiento
   lo hace el propio iframe y la tarjeta se pinta con sus propios estilos. */
.nsd-post-overlay:has(.nsd-post-overlay__marco) { padding: 0; overflow: hidden; }
.nsd-post-overlay__marco {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: transparent;
  transform: translateY(14px); transition: transform .28s var(--ease-out, ease);
}
.nsd-post-overlay.is-abierta .nsd-post-overlay__marco { transform: none; }
@media (prefers-reduced-motion: reduce) { .nsd-post-overlay__marco { transition: none; transform: none; } }

/* Dentro del iframe: solo la tarjeta, sobre fondo transparente */
html.en-ventana, html.en-ventana body { background: transparent !important; }
html.en-ventana .skip-link, html.en-ventana #site-header, html.en-ventana #site-footer,
html.en-ventana .sellos, html.en-ventana .grupo-webs { display: none !important; }
html.en-ventana body { min-height: 100vh; padding: 28px 16px; box-sizing: border-box; }
html.en-ventana .post-card { margin: 0 auto 28px; }
@media (max-width: 640px) {
  html.en-ventana body { padding: 0; }
  html.en-ventana .post-card { margin: 0; min-height: 100vh; }
}

/* =========================================================
   Mapa que se carga al pulsar (.mapa-diferido)
   Google Maps no entra en la página hasta que la familia lo pide:
   antes, el iframe mandaba la IP a Google y podía dejar cookies en la
   primera visita. La ficha estática da lo esencial (dirección y «Cómo
   llegar») y el botón inyecta el iframe (nsd-mapa.js).
   ========================================================= */
.mapa-diferido { position: relative; width: 100%; height: 100%; min-height: 100%; }
.mapa-diferido.is-cargado iframe { width: 100%; height: 100%; min-height: 240px; border: 0; display: block; }
.mapa-diferido__ficha {
  display: grid; gap: 10px; align-content: center; justify-items: start;
  height: 100%; padding: 20px 22px;
  background: var(--surface-sunken); color: var(--ink-700);
}
.mapa-diferido__ico { width: 26px; height: 26px; color: var(--green-700); }
.mapa-diferido__dir { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--ink-700); }
.mapa-diferido__dir strong { display: block; color: var(--ink-900); font-size: 1rem; }
.mapa-diferido__botones { display: flex; flex-wrap: wrap; gap: 8px; }
.mapa-diferido__botones .btn { min-height: 44px; padding: 10px 16px; font-size: .9rem; }
.mapa-diferido__aviso { margin: 0; font-size: .8rem; line-height: 1.5; color: var(--ink-600); max-width: 52ch; }
.mapa-diferido__aviso a { color: inherit; text-decoration: underline; }
.mapa-diferido__flota {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px;
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--ink-900);
  font-size: .85rem; font-weight: 700; box-shadow: var(--shadow-sm); text-decoration: none;
}
/* Mientras solo está la ficha, el recuadro crece con su contenido en vez
   de imponerle la proporción o el alto pensados para el mapa. */
.map-card:has(> .mapa-diferido:not(.is-cargado)),
.contacto-band__mapa:has(> .mapa-diferido:not(.is-cargado)),
.contacta__datos .map-card:has(> .mapa-diferido:not(.is-cargado)),
.contacta__datos .contacto__mapa:has(> .mapa-diferido:not(.is-cargado)) { aspect-ratio: auto; height: auto; }

/* =========================================================
   Primera capa de información de protección de datos (RGPD art. 13),
   justo encima de la casilla y el botón de cada formulario.
   ========================================================= */
.aviso-datos {
  margin: 14px 0 12px; padding: 12px 14px; border-radius: 12px;
  background: var(--surface-sunken); border: 1px solid var(--border);
  font-size: .8rem; line-height: 1.5; color: var(--ink-700);
}
.aviso-datos__titulo { margin: 0 0 6px; font-weight: 700; color: var(--ink-900); font-size: .82rem; }
.aviso-datos dl { margin: 0; display: grid; gap: 4px; }
.aviso-datos dl > div { display: grid; grid-template-columns: 8.5em 1fr; gap: 8px; }
.aviso-datos dt { font-weight: 700; color: var(--ink-900); }
.aviso-datos dd { margin: 0; }
.aviso-datos a { color: inherit; text-decoration: underline; }
@media (max-width: 520px) { .aviso-datos dl > div { grid-template-columns: 1fr; gap: 0; } }

/* Protección de la infancia (LOPIVI): franja fija en el pie de las tres webs */
.footer__infancia { border-top: 1px solid rgba(255,255,255,.08); padding: 16px 0; }
.footer__infancia p { margin: 0; font-size: .82rem; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 110ch; }
.footer__infancia strong { color: #fff; }
.footer__infancia a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* El titular recibe el foco al abrir el post (para lectores de pantalla); no
   hace falta pintarle el anillo, que no es un control. */
.post-card h1[tabindex="-1"]:focus { outline: none; }
html.con-post .to-top, html.con-post .mobile-cta-bar, html.con-post .cursor-ring { display: none !important; }

/* Enlaces dentro de avisos: subrayados, que no dependan solo del color (WCAG 1.4.1) */
.dep-pendiente a, .info-sello a, .info-nota a, .acceso-estado a { text-decoration: underline; text-underline-offset: 2px; }
/* En móvil el botón de cerrar del post tapaba las migas: se bajan */
@media (max-width: 640px) { .post-card .page-hero { padding-top: 76px; } }

/* =========================================================
   PIE COMPACTO (oct 2026)
   El pie común medía unas 4 pantallas en el móvil (sellos, llamada,
   cinco listas abiertas, webs del grupo). Mismo contenido, menos alto.
   ========================================================= */
.sellos { padding: 34px 0 36px; }
.sellos__titulo { margin-bottom: 18px; }
.sellos__lista { flex-wrap: nowrap; gap: 12px; }
.sello { flex: 1 1 0; min-width: 0; min-height: 88px; padding: 12px 10px; }
.sello__logo { max-height: 56px; }
@media (max-width: 980px) {
  /* Una sola fila que se desliza con el dedo, en vez de cuatro filas */
  .sellos__lista { overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; justify-content: flex-start; overscroll-behavior-x: contain; }
  .sello { flex: 0 0 140px; min-height: 76px; scroll-snap-align: start; }
  .sello__logo { max-height: 46px; }
}
@media (max-width: 720px) { .sellos { padding: 26px 0 28px; } .sello { min-height: 72px; padding: 10px 8px; } }

.cta { padding: 72px 0; }
.cta h2 { margin-top: 0; }
@media (min-width: 881px) { .cta__inner { min-height: 0; } }
@media (max-width: 880px) {
  .cta { padding: 44px 0; }
  .cta::after { display: none; }
  .cta__inner { gap: 20px; }
  .cta p { font-size: .95rem; }
  .cta__actions .btn { flex: 1 1 auto; }
}

.footer { padding-top: 52px; }
.footer__grid { padding-bottom: 34px; }
.footer__col { margin: 0; }
.footer__col > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.footer__col > summary::-webkit-details-marker { display: none; }
.footer__col > summary .bi { font-size: .85rem; transition: transform .2s var(--ease-out, ease); }
.footer__col[open] > summary .bi { transform: rotate(180deg); }
@media (min-width: 761px) {
  .footer__col > summary { pointer-events: none; cursor: default; }
  .footer__col > summary .bi { display: none; }
}
@media (max-width: 760px) {
  .footer { padding-top: 36px; }
  .footer__grid { grid-template-columns: 1fr !important; gap: 0 !important; padding-bottom: 18px; }
  .footer__brand { margin-bottom: 18px; }
  .footer__brand p { display: none; }
  .footer__col { border-top: 1px solid rgba(255,255,255,.1); }
  .footer__col:last-child { border-bottom: 1px solid rgba(255,255,255,.1); }
  .footer__col > summary { min-height: 52px; margin: 0; cursor: pointer; font-size: 1rem; }
  .footer__col > ul { padding: 0 0 16px; }
  .footer .grupo-webs { padding: 4px 0 22px; }
  .footer .grupo-webs__titulo { margin-bottom: 12px; }
  .footer .grupo-webs__lista { grid-template-columns: 1fr 1fr; gap: 8px; }
  .footer .grupo-web { padding: 10px 12px; gap: 10px; grid-template-columns: auto minmax(0, 1fr); border-radius: 12px; }
  .footer .grupo-web__ico { width: 32px; height: 32px; border-radius: 10px; font-size: .95rem; }
  .footer .grupo-web__txt strong { font-size: .86rem; }
  .footer .grupo-web__txt span, .footer .grupo-web__ir { display: none; }
  .footer__infancia p { font-size: .8rem; }
  .footer__bottom ul { flex-wrap: wrap; gap: 4px 14px; }
}
@media (prefers-reduced-motion: reduce) { .footer__col > summary .bi { transition: none; } }

/* Menú del comedor: elegir semana en vez de ver todas seguidas */
.menu-semanas { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 16px 0 4px; scroll-snap-type: x proximity; }
.menu-semanas__btn {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border-radius: 999px; scroll-snap-align: start;
  border: 1.5px solid var(--border-strong); background: var(--surface-raised); color: var(--ink-800);
  font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer;
}
.menu-semanas__btn:hover { border-color: var(--green-700); }
.menu-semanas__btn[aria-pressed="true"] { background: var(--brand-800); border-color: var(--brand-800); color: #fff; }
.menu-semanas__btn:focus-visible { outline: 3px solid rgba(31,164,44,.45); outline-offset: 2px; }
.menu-semana[hidden] { display: none !important; }

/* =========================================================
   PLIEGUES: secciones largas que se abren al tocar el título
   (comedor, etapas, información a las familias, textos legales…)
   ========================================================= */
.pliegue {
  margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius, 14px);
  background: var(--surface-raised);
}
.pliegue + .pliegue { margin-top: 0; }
.pliegue__cab {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  min-height: 60px; padding: 14px 20px; border-radius: inherit;
}
.pliegue__cab::-webkit-details-marker { display: none; }
.pliegue__cab > :is(h2, h3) { margin: 0 !important; font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.3; }
.pliegue__cab:hover > :is(h2, h3) { color: var(--green-700); }
.pliegue__cab:focus-visible { outline: 3px solid rgba(31,164,44,.45); outline-offset: 2px; }
.pliegue__ico { flex: none; color: var(--green-700); transition: transform .25s var(--ease-out, ease); }
.pliegue[open] > .pliegue__cab .pliegue__ico { transform: rotate(180deg); }
.pliegue[open] > .pliegue__cab { border-bottom: 1px solid var(--border); border-radius: var(--radius, 14px) var(--radius, 14px) 0 0; }
.pliegue__cuerpo { padding: 18px 20px 20px; }
.pliegue__cuerpo > :first-child { margin-top: 0; }
.pliegue__cuerpo > :last-child { margin-bottom: 0; }
@media (max-width: 560px) { .pliegue__cab { padding: 12px 16px; } .pliegue__cuerpo { padding: 14px 16px 16px; } }
@media (prefers-reduced-motion: reduce) { .pliegue__ico { transition: none; } }
@media print { .pliegue__cuerpo { display: block !important; } .pliegue__ico { display: none; } }

/* Valores de la portada en el móvil: fila compacta (icono a la izquierda) */
@media (max-width: 540px) {
  .value { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 18px 18px; }
  .value::before { display: none; }
  .value i { grid-row: span 2; width: 40px; height: 40px; margin: 0; font-size: 1.15rem; }
  .value h3, .value h4 { margin: 0 0 4px; }
  .value p { font-size: .88rem; line-height: 1.55; }
}
@media (max-width: 760px) { .footer .grupo-web__txt strong { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; } }
.pliegue__cab > :is(h2, h3) { font-size: clamp(1.05rem, 1rem + .5vw, 1.25rem) !important; letter-spacing: -.01em; }

/* Tarjetas de «destacados» (comedor, etapas) en el móvil: fila compacta */
@media (max-width: 560px) {
  .highlight-grid { gap: 10px !important; }
  .highlight { display: grid !important; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px !important; }
  .highlight > .bi { grid-row: span 2; width: 40px !important; height: 40px !important; margin: 0 !important; font-size: 1.1rem !important; }
  .highlight h3, .highlight h4 { margin: 0 0 4px !important; font-size: 1rem !important; }
  .highlight p { margin: 0 !important; font-size: .88rem; }
}
.sellos__lista:focus-visible { outline: 3px solid rgba(31,164,44,.45); outline-offset: 4px; border-radius: 14px; }

/* =========================================================
   Bloques para que la información no sea un muro de texto.
   Se usan en páginas de contenido (canal, protección…).
   ========================================================= */
.tarjetas-info {
  list-style: none; margin: 18px 0 28px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px;
}
.tarjetas-info > li {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-content: start; margin: 0;
  padding: 16px 18px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--border);
  line-height: 1.5;
}
.tarjetas-info > li > .bi {
  grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--green-100); color: var(--green-700); font-size: 1rem;
}
.tarjetas-info > li > strong { color: var(--ink-900); font-size: .98rem; }
.tarjetas-info > li > span { font-size: .9rem; color: var(--ink-600); }
.pasos { list-style: none; counter-reset: paso; margin: 18px 0 28px; padding: 0; display: grid; gap: 10px; }
.pasos > li {
  counter-increment: paso; position: relative; display: grid; gap: 4px; margin: 0;
  padding: 14px 18px 14px 62px; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--border);
  line-height: 1.5;
}
.pasos > li::before {
  content: counter(paso); position: absolute; left: 16px; top: 14px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: #17663A; color: #fff; font-weight: 700; font-size: .9rem;
}
.pasos > li > strong { color: var(--ink-900); }
.pasos > li > span { font-size: .92rem; color: var(--ink-600); }
.llamadas { list-style: none; margin: 18px 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.llamadas li { margin: 0; }
.llamadas a {
  height: 100%; display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: var(--radius-lg);
  background: var(--surface-raised); border: 1px solid var(--border); border-top: 4px solid #C0392B;
  text-decoration: none !important; color: inherit;
}
.llamadas a:hover { border-color: #C0392B; }
.llamadas__n { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--ink-900); line-height: 1.1; }
.llamadas__t { font-size: .88rem; color: var(--ink-600); line-height: 1.45; }

/* =========================================================
   Color de cada departamento (data-tono="slug").
   Tonos oscuros: el texto blanco encima pasa AA. --tono-txt es la
   versión para texto sobre el fondo de la página (más clara en oscuro).
   ========================================================= */
:root, [data-tono="centro"] { --tono: #17663A; }
[data-tono="infantil"]           { --tono: #C2185B; }
[data-tono="primaria"]           { --tono: #1565C0; }
[data-tono="matematicas"]        { --tono: #3949AB; }
[data-tono="lengua"]             { --tono: #C62828; }
[data-tono="geografia-historia"] { --tono: #8A6100; }
[data-tono="ciencias"]           { --tono: #2E7D32; }
[data-tono="tecnologia"]         { --tono: #00695C; }
[data-tono="ingles"]             { --tono: #6A1B9A; }
[data-tono="frances"]            { --tono: #0277BD; }
[data-tono="educacion-fisica"]   { --tono: #BF360C; }
[data-tono="artistico"]          { --tono: #AD1457; }
[data-tono="religion-valores"]   { --tono: #5D4037; }
[data-tono="diversificacion"]    { --tono: #00838F; }
[data-tono="orientacion"]        { --tono: #A64B00; }
[data-tono="bilinguismo"]        { --tono: #283593; }
:root, [data-tono] { --tono-txt: color-mix(in srgb, var(--tono) 82%, #000); --tono-suave: color-mix(in srgb, var(--tono) 12%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) [data-tono] { --tono-txt: color-mix(in srgb, var(--tono) 45%, #fff); --tono-suave: color-mix(in srgb, var(--tono) 24%, transparent); }
}
:root[data-theme="dark"], :root[data-theme="dark"] [data-tono] { --tono-txt: color-mix(in srgb, var(--tono) 45%, #fff); --tono-suave: color-mix(in srgb, var(--tono) 24%, transparent); }

/* Cabecera de la página de un departamento, teñida con su color */
html[data-tono] .page-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--tono) 45%, #03100a), color-mix(in srgb, var(--tono) 78%, #03100a));
}

/* Los dos últimos desplegables del menú se abren hacia la izquierda: en
   pantallas de 1000-1100 px se salían por la derecha y creaban scroll lateral. */
#primaryNav > ul > li.has-dropdown:nth-last-child(-n+3) > .dropdown { left: auto; right: 0; }

/* =========================================================
   Piezas que se pueden poner desde el panel dentro de un texto
   ========================================================= */
.botonera { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.btn-enlace {
  display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 11px 18px;
  border-radius: 14px; background: var(--tono, #17663A); color: #fff !important;
  font-weight: 650; font-size: .95rem; line-height: 1.25; text-decoration: none !important;
  box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--tono, #17663A) 80%, #000);
  transition: transform var(--dur-fast, .15s) var(--ease-out, ease), filter .15s;
}
.btn-enlace::after {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.btn-enlace--doc::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7 10l5 5 5-5M5 20h14'/%3E%3C/svg%3E");
}
.btn-enlace:hover { transform: translateY(-1px); filter: brightness(1.08); }
.btn-enlace:focus-visible { outline: 3px solid var(--tono, #17663A); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .btn-enlace { transition: none; } .btn-enlace:hover { transform: none; } }
.figura { margin: 18px 0; }
.figura img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 18px; background: var(--surface-sunken); }
.figura figcaption { margin-top: 8px; font-size: .86rem; color: var(--ink-500); }
.galeria { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.galeria li { margin: 0 !important; }
.galeria .figura { margin: 0; }
.galeria .figura img { aspect-ratio: 4 / 3; max-height: none; }
.galeria--1 { grid-template-columns: 1fr; }
.galeria--1 .figura img { aspect-ratio: 16 / 9; }

/* =========================================================
   DETALLES DE INTERACCIÓN (pulido «a lo Apple»)
   ---------------------------------------------------------
   Inspirado en «Designing Fluid Interfaces» (WWDC 2018).
   No cambia la identidad: mismos colores, mismas fuentes y
   misma maquetación. Sólo afina cómo responde la web al
   tocarla, cómo se mueve y cómo se lee.

   - Va al final de la hoja principal. Como pages.css,
     secciones.css, nsd-apple.css… se cargan después, las
     reglas que tienen que ganarles llevan `html` delante
     (sube la especificidad sin !important).
   - La pulsación usa la propiedad `scale`, no `transform`:
     así se suma al translate del hover en vez de pisarlo y
     no choca con las `transition: transform` existentes.
   ========================================================= */

/* ── Curvas tipo muelle ─────────────────────────────────── */
:root {
  /* Amortiguamiento crítico: llega sin rebotar. Para casi todo. */
  --ease-fluido: cubic-bezier(.22, 1, .36, 1);
  /* Rebote leve (~0,8): sólo para lo que el usuario lanza o arrastra. */
  --ease-muelle: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
  --dur-pulsar: 100ms;
  --dur-aparecer: 200ms;
  --dur-panel: 350ms;
  /* Anillo de foco: verde de marca; en zonas oscuras, el oro claro. */
  --anillo: var(--green-600);
}
@supports not (transition-timing-function: linear(0, 1)) {
  :root { --ease-muelle: var(--ease-fluido); }
}

/* ── Base: tamaño de texto estable y tipografía ─────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-optical-sizing: auto; }
/* Titulares sin una palabra huérfana en la última línea; párrafos
   con cortes más equilibrados. No cambia tamaños ni interletraje,
   que ya estaban ajustados (negativo en titulares grandes). */
h1, h2, h3 { text-wrap: balance; }
p, li, figcaption, blockquote { text-wrap: pretty; }
/* Cifras que se comparan o cuentan: todas del mismo ancho. */
table, time, .stat__num, .agenda__fecha, .pnl-tabla { font-variant-numeric: tabular-nums; }

/* ── Selección de texto: oro de marca a baja opacidad ───── */
::selection { background: color-mix(in srgb, var(--gold-300) 42%, transparent); color: inherit; }

/* ── Foco visible coherente ─────────────────────────────── */
/* :where() deja la especificidad en lo mínimo: los anillos que ya
   tenían componentes concretos (botones, interruptor de tema…)
   siguen mandando. Esto cubre todo lo demás con el mismo anillo. */
:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--anillo);
  outline-offset: 2px;
}
.topbar, .footer, .drawer, .section--dark, .cta, .stats, .baldosa,
.promos, .marquee, .espacio--oscuro, .carrusel__media, .visor {
  --anillo: var(--gold-300);
}

/* ── Respuesta inmediata al tocar ───────────────────────── */
/* Sin el retraso de 300 ms que algunos móviles guardan para el doble toque. */
a, button, [role="button"], input, select, textarea, label, summary {
  touch-action: manipulation;
}
/* Pulsación: el elemento cede en cuanto el dedo lo toca (:active),
   no al soltar. Botones pequeños 0,97; tarjetas grandes 0,985.
   Nunca en enlaces dentro de un párrafo. */
.pagination a, .tag-filter a, .quick-link, .topbar__pill, .hamburger-x, .drawer__close,
.contacto-band__ir, .contact-social a, .mobile-cta-bar a, .doc2-tab, .diario-filtro,
.sim-etapa, .sim-tipo, .menu-semanas__btn, .btn-enlace, .ficha-cerrar, .post-card__cerrar,
.rotafotos__pausa, .visor__boton, .entrada-copiar,
.stage, .dept, a.teacher, .persona, .cms-doc, .deps-item a, .cms-enlaces a, .doc2-tarjeta,
.doc2-carpeta, .grupo-web, .act-card, .dir-card, .dep-card, .news__item, .promo, .service {
  -webkit-tap-highlight-color: transparent;
}
html :is(.pagination a, .tag-filter a, .quick-link, .topbar__pill, .hamburger-x, .drawer__close,
.contacto-band__ir, .contact-social a, .mobile-cta-bar a, .doc2-tab, .diario-filtro,
.sim-etapa, .sim-tipo, .menu-semanas__btn, .btn-enlace, .ficha-cerrar, .post-card__cerrar,
.rotafotos__pausa, .visor__boton, .entrada-copiar):not([data-tacto]):active {
  scale: .97;
}
html :is(.stage, .dept, a.teacher, .persona, .cms-doc, .deps-item a, .cms-enlaces a, .doc2-tarjeta,
.doc2-carpeta, .grupo-web, .act-card, .dir-card, .dep-card, .news__item, .promo,
.service):not([data-tacto]):active {
  scale: .985;
}
/* Los que ya llevan su transición conocida: se le añade `scale` para
   que la vuelta tras soltar sea suave (100 ms al bajar, igual al subir). */
html :is(.pagination a, .tag-filter a) {
  transition: background-color .2s, color .2s, border-color .2s, scale var(--dur-pulsar) ease-out;
}
/* Botones con muelle de nsd-spring.js (marcados con data-tacto): el
   muelle ya escala; el :active de CSS no debe sumar una segunda escala. */
html .btn[data-tacto]:active { transform: none; }

/* ── Hover sólo donde hay ratón ─────────────────────────── */
/* En pantallas táctiles, el :hover se queda «pegado» tras tocar y la
   tarjeta se quedaba levantada. Se anula sólo el movimiento; los
   cambios de color del hover se mantienen. */
@media (hover: none), (pointer: coarse) {
  html :is(.gallery-tile, .cms-doc, .deps-item a, .cms-enlaces a, .enlace-web, .dept, a.teacher,
  .persona, .web, .btn--gold, .doc2-tarjeta, .doc2-carpeta, .promo, .stage, .service--featured,
  .news__item, .cta .btn--primary, .contact-social a, .dropdown__boton, .act-card,
  .contacto-band__ir, .grupo-web, .dragons2__tarjeta, .dragons2__fila, .dragons2__boton,
  .dir-card, .dep-card, .post-card__cerrar, .btn-enlace):hover,
  html .to-top.is-visible:hover,
  html .enlace-web:hover .enlace-web__ir,
  html .indice a:hover .indice__ir i,
  html .web:hover .web__ir i,
  html .stage__link:hover i,
  html .act-card:hover .act-card__link i,
  html .dropdown__hub:hover .dropdown__hub-ver i {
    transform: none;
  }
  /* La tarjeta destacada de etapas está un poco elevada de base. */
  html .stage.stage--featured:hover { transform: translateY(-4px); }
  html .carrusel__item.is-visible:hover .carrusel__media img { transform: scale(1); }
}

/* ── Desplegables y cajones: interrumpibles y simétricos ── */
/* El desplegable ya abre y cierra con transiciones (si se interrumpe,
   vuelve desde donde está). Se le da la curva fluida y nace del borde
   de su botón. */
.dropdown {
  transform-origin: top left;
  transition-timing-function: var(--ease-fluido);
}
/* El cajón entra por la derecha y sale por la derecha (ya era así).
   El scroll de dentro no se escapa a la página de detrás. */
.drawer { overscroll-behavior: contain; }

/* ── Carriles horizontales: límites suaves ──────────────── */
.subnav__lista, .act-pista, .doc2-tabs, .menu-semanas {
  overscroll-behavior-x: contain;
}

/* ── Formularios ────────────────────────────────────────── */
input, select, textarea { caret-color: var(--green-600); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--green-700); }
/* En móvil, 16 px como mínimo: por debajo, iOS hace zoom al escribir
   y la página se queda desplazada. */
@media (max-width: 720px), (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="hidden"]),
  select, textarea {
    font-size: max(16px, 1em) !important;
  }
}

/* ── Zonas seguras: lo que flota abajo ──────────────────── */
.to-top {
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: max(24px, calc(env(safe-area-inset-right) + 12px));
}
@media (max-width: 720px) {
  .to-top {
    bottom: calc(86px + env(safe-area-inset-bottom));
    right: max(14px, calc(env(safe-area-inset-right) + 8px));
  }
}

/* ── Dianas táctiles de 44 × 44 ─────────────────────────── */
/* Botones de sólo icono más pequeños que un dedo: se amplía la zona
   que responde con un pseudo-elemento invisible, sin cambiar el dibujo. */
@media (pointer: coarse) {
  html :is(.rotafotos__pausa, .ficha-cerrar, .post-card__cerrar, .to-top)::after {
    content: ""; position: absolute;
    inset: min(0px, calc((100% - 44px) / 2));
  }
  /* Interruptor de tema: sus opciones van pegadas, así que sólo se
     amplía en vertical para no pisar a la de al lado. */
  html .theme-switch__opt::after {
    content: ""; position: absolute;
    inset: min(0px, calc((100% - 44px) / 2)) 0;
  }
  .pagination a { position: relative; }
  .pagination a::after { content: ""; position: absolute; inset: -2px; }
}

/* ── Movimiento reducido: respuesta suave, sin desplazamientos ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Sin escalar al pulsar: en su lugar, un leve atenuado. */
  html [data-tacto] { scale: none !important; }
  html :is(.btn, .nav-cta, .web, .baldosa, .indice a, .carrusel__boton, .enlace-web, .to-top, .theme-switch__opt,
  .pagination a, .tag-filter a, .quick-link, .topbar__pill, .hamburger-x, .drawer__close,
  .contacto-band__ir, .contact-social a, .mobile-cta-bar a, .doc2-tab, .diario-filtro,
  .sim-etapa, .sim-tipo, .menu-semanas__btn, .btn-enlace, .ficha-cerrar, .post-card__cerrar,
  .rotafotos__pausa, .visor__boton, .entrada-copiar,
  .stage, .dept, a.teacher, .persona, .cms-doc, .deps-item a, .cms-enlaces a, .doc2-tarjeta,
  .doc2-carpeta, .grupo-web, .act-card, .dir-card, .dep-card, .news__item, .promo, .service):active {
    scale: none; transform: none; opacity: .8;
  }
  /* Las apariciones de menús pasan a ser un fundido corto, sin moverse. */
  html .dropdown { transform: none !important; transition: opacity 150ms ease !important; }
  html .reveal { transform: none; }
}