/* ==========================================================================
   St. Matthew's College — hoja de estilos principal
   --------------------------------------------------------------------------
   Mobile-first, sin framework. La paleta institucional y las métricas viven
   en las custom properties de :root: cambiar un color ahí lo cambia en todo
   el sitio.
   ========================================================================== */

/* ------------------------------ 1. Tokens ------------------------------ */

:root {
  /* Paleta institucional (misma que el home aprobado) */
  --bordo:        #5f0709;
  --bordo-dark:   #470506;
  --bordo-soft:   #7a1518;
  /* El dorado sirve para filetes, bordes e iconos. Ojo con usarlo de fondo
     de texto blanco: da 3,9:1 de contraste y no llega al mínimo AA de 4,5:1.
     Para fondos con texto encima usar --bordo. */
  --dorado:       #94800a;
  --dorado-light: #b59d0c;
  --dorado-pale:  #e6dfae;
  --azul:         #003082;
  --verde:        #006338;

  /* Neutros */
  --ink:        #22262a;
  --ink-soft:   #57606a;
  --ink-faint:  #8a939c;
  --paper:      #ffffff;
  --paper-soft: #f6f4f0;
  --line:       #e4e0d8;

  /* Tipografía */
  --font-head: 'Varela Round', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-body: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Métrica */
  --shell:      1200px;
  --gutter:     1.25rem;
  /* Todos los desplazamientos por el header fijo (hero, cabeceras internas,
     anclas) se calculan desde esta variable: cambiarla acá los ajusta a todos. */
  --header-h:   80px;
  --radius:     6px;
  --radius-lg:  8px;
  --radius-btn: 3px;

  /* Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .07);
  --shadow:    0 8px 24px rgba(0, 0, 0, .12);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .18);

  /* Movimiento */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 2rem; --header-h: 108px; }
}

/* ------------------------------ 2. Reset ------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Compensa el header fijo cuando se navega a un #ancla */
  scroll-padding-top: calc(var(--header-h) + 1rem);
}
/* Compensa además la barra sticky de anclas. Estos valores son solo el
   fallback sin JavaScript: main.js mide el alto real de la barra y sobrescribe
   --jumpnav-h, porque el alto cambia según cuántos chips entren por fila. */
html:has(.page-has-jumpnav) {
  --jumpnav-h: 6rem;
  scroll-padding-top: calc(var(--header-h) + var(--jumpnav-h) + .75rem);
}
@media (min-width: 768px) {
  html:has(.page-has-jumpnav) { --jumpnav-h: 4.25rem; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  /* Evita que un mail o una URL larga desborde una columna angosta */
  overflow-wrap: break-word;
  /* Espacio para la barra de contacto fija. El safe-area suma la franja
     inferior de los iPhone con notch, donde la barra es más alta. */
  padding-bottom: calc(66px + env(safe-area-inset-bottom));
}

@media (min-width: 1280px) {
  body { padding-bottom: 0; }
}

body.nav-open { overflow: hidden; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 .6em;
  color: var(--bordo);
  text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 5.2vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.25rem); }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); }

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

a { color: var(--bordo); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--dorado); }

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

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

button { font: inherit; color: inherit; }

/* Foco visible y consistente en todo el sitio.
   Nunca se usa outline:none sin reemplazo. */
:focus-visible {
  outline: 3px solid var(--dorado-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Iconos del sprite SVG */
.ico {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  fill: none;
  stroke-width: 0;
  vertical-align: -.15em;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  padding: .75rem 1.25rem;
  background: var(--bordo);
  color: #fff;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; color: #fff; }

/* Distintivo de vista previa. Solo se imprime cuando el sitio corre en una
   carpeta _preview-*; su ausencia significa que está en modo producción. */
.preview-flag {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 200;
  margin: 0;
  padding: .3rem .7rem;
  background: #1f2937;
  color: #fde68a;
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-top-right-radius: 6px;
  pointer-events: none;
}
@media (max-width: 1279px) {
  /* Por encima de la barra de contacto fija */
  .preview-flag { bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* ------------------------------ 3. Layout ------------------------------ */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(2.75rem, 6vw, 5rem); }
.section--tinted { background: var(--paper-soft); }
.section--dark { background: var(--bordo); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }

.section__head {
  max-width: 46rem;
  margin: 0 auto clamp(1.75rem, 4vw, 3rem);
  text-align: center;
}
.section__head p {
  color: var(--ink-soft);
  font-size: 1.0625rem;
}
.section__head--light p { color: rgba(255, 255, 255, .8); }

.section__head h2 { position: relative; padding-bottom: .65em; }
.section__head h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 3px;
  border-radius: 3px;
  background: var(--dorado);
}

/* ------------------------------ 4. Botones ------------------------------ */

.btn {
  --btn-bg: var(--bordo);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* min-height 48px: área táctil cómoda en mobile */
  min-height: 48px;
  padding: .7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { color: var(--btn-fg); background: var(--bordo-soft); }

.btn--sm      { min-height: 42px; padding: .5rem 1.1rem; font-size: .875rem; }
.btn--block   { width: 100%; }

/* Para usar sobre fondos oscuros (hero, franjas bordó, header). */
.btn--light {
  --btn-bg: var(--paper);
  --btn-fg: var(--bordo);
  border-color: var(--paper);
}
.btn--light:hover { background: var(--dorado-pale); --btn-fg: var(--bordo-dark); border-color: var(--dorado-pale); }

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .55);
}
.btn--outline-light:hover { background: var(--paper); --btn-fg: var(--bordo); border-color: var(--paper); }

.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--bordo);
  border-color: var(--bordo);
}
.btn--outline:hover { background: var(--bordo); --btn-fg: #fff; }

/* Enlace de texto con flecha, para acciones secundarias sin peso de botón. */
/* Acción del sitio: texto más una flecha fina dentro de un círculo.
   ---------------------------------------------------------------------------
   Reemplaza la flecha suelta, que se leía como un carácter tipográfico pegado
   al texto. El círculo es el único recurso de acción del sitio, así que se
   define una vez acá y lo heredan todas las páginas. El subrayado se saca: el
   círculo y su relleno en hover ya señalan que es accionable, y el foco tiene
   su propio anillo.

   El círculo se dibuja sobre el propio <svg> con padding y border, así ningún
   archivo PHP tuvo que cambiar de marcado. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-height: 44px;
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
}
/* OJO: el color del icono se controla con `color`, no con `stroke`.
   Cada <symbol> del sprite declara stroke="currentColor", y esa presentación
   vive dentro del shadow tree del <use>: le gana a cualquier stroke heredado
   del <svg> que lo instancia. Poner `stroke` acá no pinta nada, y fue lo que
   dejaba la flecha del mismo color que el relleno del círculo en hover. */
.link-arrow .ico {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 1px solid var(--dorado);
  border-radius: 50%;
  color: var(--dorado);
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.link-arrow:hover .ico,
.link-arrow:focus-visible .ico {
  background: var(--dorado);
  border-color: var(--dorado);
  color: #fff;
  transform: translateX(2px);
}
.link-arrow:focus-visible { outline: 2px solid var(--dorado); outline-offset: 3px; }

/* Sobre fondo bordó: el círculo va en blanco y se rellena en dorado claro. */
.link-arrow--light { color: #fff; }
.link-arrow--light .ico { border-color: rgba(255, 255, 255, .55); color: #fff; }
.link-arrow--light:hover { color: var(--dorado-pale); }
.link-arrow--light:hover .ico,
.link-arrow--light:focus-visible .ico {
  background: var(--dorado-pale);
  border-color: var(--dorado-pale);
  color: var(--bordo-dark);
}

/* ------------------------------ 5. Header ------------------------------ */

/* Header fijo. En páginas internas es bordó sólido; en el home arranca
   transparente sobre el hero y se vuelve bordó al hacer scroll. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  min-height: var(--header-h);
  background: var(--bordo);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 2px 14px rgba(0, 0, 0, .2); }

.is-home .site-header {
  background: linear-gradient(to bottom, rgba(30, 3, 4, .16), rgba(30, 3, 4, 0));
  border-bottom-color: transparent;
}
.is-home .site-header.is-stuck {
  background: var(--bordo);
  border-bottom-color: rgba(255, 255, 255, .12);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .2);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

/* El header usa images/logo-smc-header.png, la variante pensada para fondo
   oscuro: "45" y nombre en blanco, escudo y banda del aniversario con sus
   colores. Al leerse sola sobre el bordó y sobre la foto, ya no hace falta
   ninguna placa. Nunca se le aplican filtros CSS. */
.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 44px;
}
/* El archivo mide 285x81. A 66px de alto se está usando casi a resolución
   nativa (1,23x), así que en pantallas de alta densidad el texto chico del
   isologo se ve algo blando. Este es el límite del archivo actual: para ir
   más grande hace falta un export del logo de los 45 años a mayor resolución
   (con 570x162 aguantaría 80px cómodo). */
.brand img { width: auto; height: 50px; }
@media (min-width: 768px) { .brand img { height: 66px; } }

.nav-desktop { display: none; }

@media (min-width: 992px) {
  .nav-desktop { display: block; }
  .nav-desktop ul {
    display: flex;
    align-items: center;
    gap: clamp(.75rem, 2vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav-desktop a {
    display: block;
    padding: .5rem 0;
    color: #fff;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    /* Da legibilidad mientras el header es transparente sobre la foto */
    text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    position: relative;
  }
  .nav-desktop a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--dorado-pale);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
  }
  .nav-desktop a:hover::after,
  .nav-desktop a.is-active::after { transform: scaleX(1); }
  .nav-desktop a:hover { color: var(--dorado-pale); }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex: 0 0 auto;
}
/* Solo aloja el menú hamburguesa; en desktop la nav va en .nav-desktop. */
@media (min-width: 992px) { .site-header__actions { display: none; } }

/* Sin recuadro: solo el icono. El área táctil de 48x48 se mantiene aunque no
   se vea, y el ícono lleva sombra para leerse sobre la foto del hero. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}
.nav-toggle .ico { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.nav-toggle:hover { color: var(--dorado-pale); }
.nav-toggle .ico { width: 26px; height: 26px; stroke-width: 2; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

@media (min-width: 992px) { .nav-toggle { display: none; } }

/* ------------------------------ 6. Menú mobile ------------------------------ */

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .28s var(--ease);
}
.nav-backdrop.is-open { opacity: 1; }

.nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  width: min(360px, 88vw);
  padding: 1rem 1.25rem 2.5rem;
  background: var(--bordo);
  color: #fff;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
}
.nav-drawer.is-open { transform: translateX(0); }

/* Con menú desplegado: por encima del launcher de Sir Matt (199), debajo del panel del asistente (221). */
body.nav-open .nav-backdrop {
  z-index: 210;
}
body.nav-open .nav-drawer {
  z-index: 220;
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.nav-drawer__title {
  font-family: var(--font-head);
  font-size: 1.05rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dorado-pale);
}
.nav-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-btn);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  cursor: pointer;
}
.nav-drawer__close:hover { background: rgba(255, 255, 255, .22); }
.nav-drawer__close .ico { width: 24px; height: 24px; stroke-width: 2; }

.nav-drawer__list { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.nav-drawer__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 54px;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.15rem;
  text-decoration: none;
}
.nav-drawer__list a .ico {
  width: 20px; height: 20px;
  stroke: var(--dorado-pale);
  stroke-width: 2;
  opacity: .7;
  transition: transform .2s var(--ease);
}
.nav-drawer__list a:hover { color: var(--dorado-pale); }
.nav-drawer__list a:hover .ico { transform: translateX(4px); }
.nav-drawer__list a.is-active { color: var(--dorado-pale); }

.nav-drawer__cta { margin-bottom: 1.75rem; }

.nav-drawer__contact { display: grid; gap: 1.25rem; margin-bottom: 1.75rem; }
.nav-drawer__sede-name {
  margin: 0 0 .4rem;
  font-family: var(--font-head);
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--dorado-pale);
}
.nav-drawer__sede-name span {
  display: block;
  font-family: var(--font-body);
  font-size: .6875rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .55);
  text-transform: none;
}
.nav-drawer__sede a {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  color: rgba(255, 255, 255, .92);
  font-size: .9375rem;
  text-decoration: none;
}
.nav-drawer__sede a:hover { color: var(--dorado-pale); }
.nav-drawer__sede .ico { stroke: var(--dorado-pale); stroke-width: 1.8; }

.nav-drawer__social {
  display: flex;
  gap: .5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.nav-drawer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.nav-drawer__social a:hover { background: var(--dorado); color: #fff; }
.nav-drawer__social .ico { width: 22px; height: 22px; stroke-width: 1.8; }

/* ------------------------------ 7. Hero ------------------------------ */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 560px;
  overflow: hidden;
  background: var(--bordo-dark);
  color: #fff;
}
@media (min-width: 768px) { .hero { min-height: 600px; } }
@media (min-width: 1200px) { .hero { min-height: 660px; } }

.hero__media { position: absolute; inset: 0; }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .9s var(--ease);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img,
.hero__slide picture { width: 100%; height: 100%; object-fit: cover; }

/* Degradado que garantiza contraste del texto sobre cualquier foto */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(30, 3, 4, .78) 0%, rgba(30, 3, 4, .42) 34%, rgba(30, 3, 4, .1) 64%, rgba(30, 3, 4, .06) 100%);
}
@media (min-width: 992px) {
  .hero__scrim {
    background:
      linear-gradient(to right, rgba(30, 3, 4, .62) 0%, rgba(30, 3, 4, .36) 42%, rgba(30, 3, 4, .06) 100%),
      linear-gradient(to top, rgba(30, 3, 4, .28), rgba(30, 3, 4, 0) 50%);
  }
}

.hero__content {
  position: relative;
  z-index: 2;
  /* Deja libre la franja del header, que flota transparente por encima */
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 5.5rem;
  max-width: 46rem;
  margin-inline: auto;
}
@media (min-width: 992px) {
  /* En desktop el degradado oscuro queda a la izquierda, pero el texto no tiene
     que pegarse al borde del contenedor: un poco más de aire lo equilibra con
     el espacio libre de la foto. */
  .hero > .shell.hero__content {
    padding-left: calc(var(--gutter) + clamp(2rem, 5vw, 4.5rem));
  }
  .hero__content {
    margin-inline: 0 auto;
    padding-bottom: 6rem;
  }
}

.hero__eyebrow {
  margin: 0 0 .9rem;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dorado-pale);
}

.hero h1 {
  color: #fff;
  margin-bottom: .5em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}

.hero__lead {
  max-width: 34rem;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .9);
}
/* En mobile el párrafo completo tapaba la foto: queda solo la primera oración. */
.hero__lead-more { display: none; }
@media (min-width: 768px) {
  .hero__lead { font-size: 1.15rem; }
  .hero__lead-more { display: inline; }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.75rem;
  margin-top: 1.75rem;
}
@media (max-width: 479px) {
  .hero__actions .btn { width: 100%; }
}

/* Rotador de las frases institucionales.
   Las tres frases se apilan en la misma celda de grid en lugar de superponerse
   con position:absolute. Así el bloque reserva por sí solo la altura de la frase
   más larga (no hace falta un min-height inventado, y no hay salto al rotar) y
   cada frase lleva su propio filete dorado, que mide exactamente lo que mide el
   texto y queda centrado con él. */
.hero__rotator {
  display: grid;
  align-items: center;
  margin-top: 1.5rem;
  max-width: 30rem;
}
.hero__rotator-item {
  grid-area: 1 / 1;
  padding-left: .8rem;
  border-left: 3px solid var(--dorado);
  font-family: var(--font-head);
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--dorado-pale);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
@media (min-width: 480px) {
  .hero__rotator-item { font-size: 1.05rem; }
}
.hero__rotator-item.is-active { opacity: 1; transform: translateY(0); }

/* Controles */
.hero__ui {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .5rem;
}
@media (min-width: 992px) {
  .hero__ui { left: auto; right: 2rem; transform: none; }
}

.hero__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.hero__arrow:hover { background: var(--dorado); border-color: var(--dorado); }
.hero__arrow .ico { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; }

.hero__dots { display: flex; gap: .5rem; padding-inline: .35rem; }
.hero__dot {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.hero__dot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .45);
  transition: background-color .2s var(--ease), width .2s var(--ease);
}
.hero__dot.is-active::after { background: var(--dorado-light); width: 26px; border-radius: 999px; }

/* ------------------------------ 8. Niveles ------------------------------ */

.niveles__grid {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .niveles__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .niveles__grid { grid-template-columns: repeat(3, 1fr); } }

.nivel { --nivel-color: var(--bordo); }
.nivel--verde { --nivel-color: var(--verde); }
.nivel--azul  { --nivel-color: var(--azul); }
.nivel--bordo { --nivel-color: var(--bordo); }

.nivel > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 1.75rem 1.5rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.nivel > a:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--nivel-color);
}

.nivel__media {
  display: block;
  width: 180px;
  max-width: 60%;
  aspect-ratio: 1;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  /* El recorte circular depende de este overflow: las fotos de niveles son
     JPEG rectangulares sin transparencia. */
  overflow: hidden;
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 8px var(--nivel-color);
  transition: box-shadow .25s var(--ease);
}
.nivel > a:hover .nivel__media {
  box-shadow: 0 0 0 5px var(--paper), 0 0 0 10px var(--nivel-color);
}
.nivel__media img { width: 100%; height: 100%; object-fit: cover; }

.nivel__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.nivel__name {
  font-family: var(--font-head);
  font-size: 1.3rem;
  color: var(--nivel-color);
  margin-bottom: .5rem;
}
.nivel__text { color: var(--ink-soft); font-size: .9375rem; flex: 1 1 auto; }
.nivel__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  margin-top: 1rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--nivel-color);
}
/* Mismo círculo que .link-arrow, pero en el color del nivel. */
.nivel__more .ico {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.nivel > a:hover .nivel__more .ico {
  background: var(--nivel-color);
  color: #fff;
  transform: translateX(2px);
}

/* ------------------------------ 9. Diferenciales ------------------------------ */

.diferenciales__grid {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .diferenciales__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .diferenciales__grid { grid-template-columns: repeat(4, 1fr); } }

.diferenciales__grid li {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.15rem 1.25rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--ink);
}
@media (min-width: 768px) {
  .diferenciales__grid li { flex-direction: column; text-align: center; gap: 1rem; padding: 1.9rem 1.25rem; }
}

/* Los iconos originales del colegio son trazo blanco: van sobre un disco
   bordó para que se lean, sin modificar los archivos. */
.diferenciales__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--bordo);
}
.diferenciales__icon img { width: 34px; height: 34px; object-fit: contain; }

/* ------------------------------ 10. Lema y valores ------------------------------ */

/* El wrapper .valores__valores solo agrupa en el DOM; la grilla la arma el layout. */
.valores__valores { display: contents; }

.valores__layout {
  display: grid;
  gap: clamp(.75rem, 2vw, 1.125rem);
  grid-template-areas:
    "heading"
    "lema"
    "cards";
  align-items: start;
}
@media (min-width: 901px) {
  .valores__layout {
    grid-template-columns: minmax(0, 33%) minmax(0, 1fr);
    grid-template-areas:
      "heading heading"
      "lema cards";
    column-gap: clamp(1rem, 2vw, 1.35rem);
    row-gap: clamp(.65rem, 1.5vw, .9rem);
    align-items: stretch;
  }
}

.valores__valores > h2 {
  grid-area: heading;
  margin: 0 0 clamp(.5rem, 1.2vw, .75rem);
  text-align: center;
  font-size: clamp(1.35rem, 3vw, 1.65rem);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.valores__grid {
  grid-area: cards;
  display: grid;
  gap: clamp(.75rem, 2vw, 1rem);
  grid-template-columns: 1fr;
}
@media (min-width: 561px) {
  .valores__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
  }
  .valores__grid .tile { min-height: 7.25rem; height: 100%; }
}
@media (min-width: 901px) {
  .valores__grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(6.85rem, 1fr));
    align-items: stretch;
  }
  .valores__grid .tile {
    min-height: 6.85rem;
    height: 100%;
    grid-column: span 2;
  }
  .valores__grid .tile:nth-child(4) { grid-column: 1 / span 3; }
  .valores__grid .tile:nth-child(5) { grid-column: 4 / span 3; }
}

.valores .tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-height: 130px;
  text-wrap: balance;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  border-radius: var(--radius-lg);
  color: #fff;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.valores .tile:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .24); }

.valores .tile h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(.875rem, 1.65vw, 1.05rem);
  line-height: 1.28;
  letter-spacing: .03em;
  text-transform: uppercase;
  max-width: 22ch;
}
.valores .tile--lema-principal h3 { max-width: none; }

.valores .tile--verde  { background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.08)), var(--verde); }
.valores .tile--azul   { background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.08)), var(--azul); }
.valores .tile--bordo  { background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(0,0,0,.08)), var(--bordo); }
.valores .tile--dorado { background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(0,0,0,.08)), var(--dorado); }

.valores .tile--lema-principal {
  grid-area: lema;
  align-self: start;
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,0)), var(--verde);
  box-shadow: 0 0 0 2px rgba(148, 128, 10, .35) inset, 0 10px 30px rgba(0, 0, 0, .25);
  min-height: 0;
  padding: clamp(.9rem, 2.2vw, 1.2rem) clamp(1rem, 2.4vw, 1.35rem);
}
@media (min-width: 901px) {
  /* Misma altura que la grilla 3+2 de valores; contenido centrado, sin aire extra. */
  .valores .tile--lema-principal {
    align-self: stretch;
    height: 100%;
    min-height: 100%;
    justify-content: center;
    padding: .75rem 1rem;
  }
  .valores .tile--lema-principal h2 {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .16em;
    opacity: 1;
  }
  .valores .tile--lema-principal .valores__lema-motto {
    margin: .5rem 0 .3rem;
    font-size: clamp(1.7rem, 2.75vw, 2.15rem);
    font-weight: 800;
    letter-spacing: .11em;
    line-height: 1.05;
  }
  .valores .tile--lema-principal .valores__lema-tagline {
    font-size: 1.1875rem;
    font-weight: 600;
    letter-spacing: .045em;
  }
}
.valores .tile--lema-principal h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(.9375rem, 2vw, 1.05rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  opacity: .92;
}
.valores .tile--lema-principal h2::after { display: none; }
.valores__lema-motto {
  margin: clamp(.45rem, 1.2vw, .65rem) 0 .2rem;
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(1.45rem, 3.8vw, 1.95rem);
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.08;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.valores__lema-tagline {
  margin: 0;
  color: #fff;
  font-family: var(--font-head);
  font-size: clamp(.9375rem, 2vw, 1.1rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: .04em;
  opacity: .95;
}

.valores .tile p {
  margin: .4rem 0 0;
  font-family: var(--font-body);
  font-size: clamp(.8125rem, 1.8vw, .9375rem);
  font-weight: 400;
  font-style: normal;
  letter-spacing: .01em;
  line-height: 1.35;
  text-transform: none;
  opacity: .94;
}

/* ------------------------------ 11. Cifras (We are SMC) ------------------------------ */

.stats__grid {
  display: grid;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 768px) { .stats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .stats__grid { grid-template-columns: repeat(5, 1fr); } }

.stats__grid li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.25rem 1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .07);
  text-align: center;
}
.stats__grid strong {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  font-weight: 400;
  color: var(--dorado-pale);
  line-height: 1;
}
.stats__grid span { font-size: .8125rem; color: rgba(255, 255, 255, .82); line-height: 1.35; }
.stats__note {
  margin: clamp(.95rem, 2.47vw, 1.38rem) auto 0;
  max-width: 36rem;
  font-family: var(--font-body);
  font-size: clamp(.7125rem, 1.9vw, .83125rem);
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
  color: rgba(255, 255, 255, .46);
}

/* ------------------------------ 12. Sedes ------------------------------ */

.sedes__grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .sedes__grid { grid-template-columns: repeat(2, 1fr); } }

.sede {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  /* Compensa el header fijo al llegar desde /contacto/#belgrano */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.sede__media { aspect-ratio: 500 / 300; overflow: hidden; background: var(--paper-soft); }
.sede__media img { width: 100%; height: 100%; object-fit: cover; }

/* Video bajo demanda en cards del home: la foto se mantiene; el MP4 solo carga al click */
.sede__media--video {
  position: relative;
  display: grid;
}
.sede__video-trigger,
.sede__video-player { grid-area: 1 / 1; }
.sede__video-trigger {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
}
.sede__video-trigger img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.sede__video-trigger:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: -2px;
}
.sede__video-chip {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .45rem .85rem;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(30, 3, 4, .12);
  color: var(--bordo);
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  transition: transform .2s var(--ease), background .2s var(--ease),
              box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.sede__video-chip .ico {
  width: .75rem;
  height: .75rem;
  fill: var(--bordo);
  flex-shrink: 0;
}
.sede__video-trigger:hover img,
.sede__video-trigger:focus-visible img { transform: scale(1.015); }
.sede__video-trigger:hover .sede__video-chip,
.sede__video-trigger:focus-visible .sede__video-chip {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .96);
  border-color: rgba(148, 128, 10, .35);
  box-shadow: 0 4px 14px rgba(30, 3, 4, .16);
}
.sede__media--video.is-playing .sede__video-trigger { display: none; }
.sede__video-player {
  display: block;
  width: 100%;
  min-height: 100%;
  object-fit: cover;
  background: var(--bordo-dark);
}

.sede__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 1.5rem; }
.sede__body h3 { margin-bottom: .35rem; }
.sede__hist {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.sede__niveles {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
  color: var(--ink-soft);
}

.sede__data { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: .55rem; flex: 1 1 auto; }
.sede__data li { display: flex; align-items: flex-start; gap: .65rem; font-size: .9375rem; min-width: 0; }
.sede__data li > a, .sede__data li > span { min-width: 0; }
.sede__data .ico { stroke: var(--dorado); stroke-width: 1.8; margin-top: .3em; }
.sede__data a { color: var(--ink); text-decoration-color: var(--line); }
.sede__data a:hover { color: var(--bordo); text-decoration-color: currentColor; }

/* Admisiones (mobile): CTAs de sede a ancho completo y misma altura fija (hasta 2 líneas). */
@media (max-width: 799px) {
  [data-track-zone="admisiones-selector"] .sede__body {
    align-items: stretch;
    text-align: center;
  }
  [data-track-zone="admisiones-selector"] .sede__data li {
    justify-content: center;
    text-align: center;
  }
  [data-track-zone="admisiones-selector"] .sede__body > .btn,
  [data-track-zone="cierre"] .cta-band__actions .btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3.875rem;
    height: 3.875rem;
    padding-block: 0.7rem;
    line-height: 1.25;
    text-align: center;
    text-wrap: pretty;
  }
  [data-track-zone="admisiones-selector"] .sede__body > .btn {
    margin-top: auto;
  }
  [data-track-zone="cierre"] .cta-band__actions {
    flex-direction: column;
    align-items: stretch;
  }
  [data-track-zone="cierre"] .btn--adm-form {
    flex-direction: column;
    gap: .15rem;
  }
}

.btn--adm-form .btn__adm-sede {
  color: var(--dorado-pale);
  font-weight: 500;
}

/* CTA formularios por sede: en desktop una línea con punto medio */
@media (min-width: 800px) {
  .btn--adm-form {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .btn--adm-form .btn__adm-lead::after {
    content: ' · ';
    font-weight: 500;
    color: var(--btn-fg);
  }
}

/* ------------------------------ 13. Cinta de logos ------------------------------ */

/* Cinta continua de logos.
   La clave es que los dos sets midan exactamente lo mismo: cada uno lleva el
   mismo gap interno más un padding-right del mismo valor. Así translateX(-50%)
   cae justo al inicio del segundo set y el loop no salta. */
.logos {
  --logo-gap: clamp(2rem, 5vw, 4rem);
}
.logos__viewport {
  overflow: hidden;
  padding-block: .5rem;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
/* 45s sobre un set de ~1800px son unos 40 px/s: se nota que se mueve sin
   resultar invasivo. A 60s daba 30 px/s y parecía quieta. */
.logos__track {
  display: flex;
  width: max-content;
  animation: logos-scroll 45s linear infinite;
  will-change: transform;
}
.logos__set {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
}
.logos__viewport:hover .logos__track,
.logos__viewport:focus-within .logos__track { animation-play-state: paused; }

@keyframes logos-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logos__item { position: relative; flex: 0 0 auto; }
.logos__item img {
  height: clamp(42px, 6vw, 62px);
  width: auto;
  object-fit: contain;
  transition: opacity .25s var(--ease);
}
.logos__hov { position: absolute; inset: 0; opacity: 0; }
.logos__item:hover .logos__def { opacity: 0; }
.logos__item:hover .logos__hov { opacity: 1; }

/* ------------------------------ 14. Banda CTA ------------------------------ */

.cta-band {
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: 3px solid var(--dorado);
  background: var(--paper-soft);
  text-align: center;
}
.cta-band > .shell > p { max-width: 42rem; margin-inline: auto; color: var(--ink-soft); }

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.5rem;
}

/* Correos de las dos sedes: apilados en mobile, uno al lado del otro desde
   600px. Antes iban en una sola línea separados por un punto medio y en
   pantalla chica quedaban cortados. */
.cta-band__contactos {
  display: grid;
  gap: 1rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}
.cta-band__contactos li { display: grid; gap: .15rem; }
.cta-band__contactos span {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cta-band__contactos a {
  font-size: .9375rem;
  color: var(--bordo);
  overflow-wrap: anywhere;
}
@media (min-width: 600px) {
  .cta-band__contactos {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: 1rem 3rem;
  }
}

/* ------------------------------ 15. Footer ------------------------------ */

.site-footer { background: var(--bordo-dark); color: rgba(255, 255, 255, .85); }

.site-footer__grid {
  display: grid;
  gap: 2.25rem;
  padding-block: clamp(2.5rem, 5vw, 3.75rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr .8fr; } }

/* El logo va sobre una placa clara: es a color y sobre el bordó del footer
   no se leería. Se ajusta el contenedor, nunca el logo. */
.site-footer__plate {
  display: inline-block;
  margin-bottom: 1.1rem;
  padding: .7rem .9rem;
  background: var(--paper);
  border-radius: var(--radius);
}
.site-footer__plate img { height: 46px; width: auto; }
.site-footer__brand p { font-size: .875rem; color: rgba(255, 255, 255, .7); }

.site-footer__social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.site-footer__social a:hover { background: var(--dorado); color: #fff; }
.site-footer__social .ico { width: 21px; height: 21px; stroke-width: 1.8; }

.site-footer__col h2 {
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--dorado);
  color: #fff;
  font-size: .9375rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.site-footer__hist {
  display: block;
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 400;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .5);
  text-transform: none;
}

.site-footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.site-footer__col li { display: flex; align-items: flex-start; gap: .6rem; font-size: .875rem; min-width: 0; }
.site-footer__col li > a, .site-footer__col li > span { min-width: 0; }
.site-footer__col .ico { stroke: var(--dorado); stroke-width: 1.8; margin-top: .25em; }
.site-footer__col a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.site-footer__col a:hover { color: #fff; text-decoration: underline; }

.site-footer__links li { min-height: 30px; }

.site-footer__legal {
  padding-block: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .8125rem;
  color: rgba(255, 255, 255, .6);
  text-align: center;
}
.site-footer__legal p { margin: 0; }

.site-footer__legal .spindel-credit {
  margin-top: 0.75rem;
  color: #fff;
}

.site-footer__legal .spindel-credit:hover span {
  color: var(--dorado-pale);
}

.spindel-credit {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: inherit;
  text-decoration: none;
  opacity: 0.62;
  font-size: 0.78rem;
  letter-spacing: 0.025em;
  transition: opacity 0.25s ease, transform 0.25s ease, color 0.25s ease;
}

.spindel-credit span {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.12em;
  transition: color 0.25s ease;
}

.spindel-credit span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.18em;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.spindel-credit:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.spindel-credit:hover span::after {
  transform: scaleX(1);
}

.spindel-credit:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .spindel-credit,
  .spindel-credit span,
  .spindel-credit span::after {
    transition: none;
  }

  .spindel-credit:hover {
    transform: none;
  }
}

/* ------------------------------ 15b. Menú flotante lateral (desktop) ------------------------------ */

/* Accesos rápidos del diseño aprobado: contacto por sede, redes y empleo.
   Va sobre el margen derecho, igual que en la carpeta aprobada.
   Desde 1280px el contenedor de 1200px deja margen suficiente para que el
   rail no se superponga al texto. Por debajo, su función la cumple la barra
   inferior fija. */
.side-rail { display: none; }

@media (min-width: 1280px) {
  .side-rail {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Por encima de la barra de anclas (90) y por debajo del header (100).
       El rail va centrado en la ventana y la barra queda fija arriba, así que
       normalmente no se cruzan; sí lo hacen con la ventana por debajo de unos
       540px de alto —un portátil de 768px con el zoom al 125%, por ejemplo—, y
       ahí la barra le tapaba los botones. En esa franja del margen derecho la
       barra solo tiene fondo: su contenido no pasa del ancho del contenedor. */
    z-index: 95;
    background: var(--azul);
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: -2px 0 14px rgba(0, 0, 0, .18);
    overflow: visible;
  }

  .side-rail__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
    text-decoration: none;
  }
  .side-rail__item + .side-rail__item { border-top: 1px solid rgba(255, 255, 255, .16); }
  .side-rail__item:hover,
  .side-rail__item:focus-visible { background: var(--dorado); color: #fff; }
  .side-rail__item .ico { width: 21px; height: 21px; stroke-width: 1.8; }

  /* Etiqueta que se despliega al pasar el mouse */
  .side-rail__label {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 2px;
    padding: .45rem .8rem;
    background: var(--azul);
    color: #fff;
    font-size: .8125rem;
    white-space: nowrap;
    border-radius: var(--radius-btn) 0 0 var(--radius-btn);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s var(--ease);
  }
  .side-rail__item:hover .side-rail__label,
  .side-rail__item:focus-visible .side-rail__label { opacity: 1; visibility: visible; }

  /* Submenú de contacto por sede */
  .side-rail__sub {
    position: absolute;
    right: 100%;
    top: 0;
    margin-right: 2px;
    min-width: 15rem;
    padding: .4rem 0;
    background: var(--azul);
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s var(--ease);
  }
  .side-rail__group:hover .side-rail__sub,
  .side-rail__group:focus-within .side-rail__sub { opacity: 1; visibility: visible; }
  .side-rail__group:hover > .side-rail__item > .side-rail__label { opacity: 0; visibility: hidden; }

  .side-rail__sub a {
    display: flex;
    align-items: center;
    gap: .6rem;
    min-height: 44px;
    padding: .35rem 1rem;
    color: rgba(255, 255, 255, .92);
    font-size: .875rem;
    text-decoration: none;
  }
  .side-rail__sub a:hover { background: var(--dorado); color: #fff; }
  .side-rail__sub .ico { stroke: var(--dorado-pale); stroke-width: 1.8; }
  .side-rail__sub a:hover .ico { stroke: #fff; }
  .side-rail__sub strong { font-weight: 500; }
  .side-rail__sub small { display: block; opacity: .75; font-size: .75rem; }
}

/* ------------------------------ 16. Barra de contacto mobile ------------------------------ */

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  background: var(--bordo);
  border-top: 2px solid var(--dorado);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .2);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 1280px) { .mobile-bar { display: none; } }

.mobile-bar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: 62px;
  padding: .4rem .25rem;
  color: #fff;
  font-size: .6875rem;
  font-weight: 500;
  text-decoration: none;
  border-right: 1px solid rgba(255, 255, 255, .15);
}
.mobile-bar__item:last-child { border-right: 0; }
.mobile-bar__item:hover, .mobile-bar__item:active { background: var(--bordo-soft); color: #fff; }
.mobile-bar__item .ico { width: 20px; height: 20px; stroke: var(--dorado-pale); stroke-width: 2; }

/* ------------------------------ 17. Páginas internas ------------------------------ */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* El header es fijo: hay que reservarle el espacio */
  padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  background: var(--bordo);
  color: #fff;
}

/* Foto de fondo con velo bordó encima: la imagen queda como textura y el
   texto mantiene contraste pleno. */
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
}
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Intensidad medida, no elegida a ojo: con el velo más liviano que este, la
     cabecera de vida-escolar.php —la foto más clara en la franja del título—
     cae por debajo de 3:1 de contraste contra el texto blanco. */
  background:
    linear-gradient(100deg, rgba(71, 5, 6, .61) 0%, rgba(71, 5, 6, .44) 38%, rgba(95, 7, 9, .21) 100%);
}
@media (min-width: 992px) {
  .page-hero__bg::after {
    background:
      linear-gradient(100deg, rgba(71, 5, 6, .63) 0%, rgba(71, 5, 6, .40) 36%, rgba(95, 7, 9, .14) 100%);
  }
}

.page-hero h1 { color: #fff; max-width: 30rem; text-shadow: 0 2px 14px rgba(0, 0, 0, .28); }
.page-hero__lead {
  max-width: 42rem;
  font-size: 1.0625rem;
  color: rgba(255, 255, 255, .85);
}
.page-hero__eyebrow {
  margin: 0 0 .9rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dorado-pale);
}

/* Variante baja (campo-deportes.php: acceso al mapa en /mapa/). */
.page-hero--compacta {
  padding-top: calc(var(--header-h) + clamp(1.25rem, 3vw, 2rem));
  padding-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}
.page-hero--compacta .page-hero__lead { margin-bottom: 0; }

/* Índice de anclas dentro de una sección larga.
   El offset lo resuelve scroll-padding-top en html; evitar scroll-margin
   duplicado en los destinos, que empujaba las secciones demasiado abajo. */
.page-has-jumpnav section[id],
.page-has-jumpnav article[id],
.page-has-jumpnav aside[id],
.page-has-jumpnav .sede-block[id] {
  scroll-margin-top: 0;
}

/* La primera sección anclada es la única que empieza pegada a la barra, y por
   eso necesita una excepción. Al navegar a su ancla el scroll se detiene el
   .75rem de aire de scroll-padding-top antes del punto en que la barra se fija,
   así que la barra queda suelta y entre el header y ella asoma una franja del
   hero. Restar ese mismo aire lleva el scroll justo al punto de fijado. Las
   demás anclas caen mucho más abajo y no lo necesitan. */
.page-has-jumpnav .jumpnav + section[id],
.page-has-jumpnav .jumpnav + article[id] {
  scroll-margin-top: -.75rem;
}

.jumpnav {
  position: sticky;
  top: var(--header-h);
  z-index: 90;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 248, 245, .97);
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.jumpnav__inner { padding-block: .65rem; }

.jumpnav__mobile { display: block; }
.jumpnav__mobile-label {
  display: block;
  margin: 0 0 .4rem;
  font-family: var(--font-head);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bordo);
}

.jumpnav__select-wrap {
  position: relative;
  border: 1px solid rgba(95, 7, 9, .18);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff 0%, var(--paper-soft) 100%);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.jumpnav__select-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  /* Dorado translúcido, no el token pleno: es un control de servicio y a tono
     lleno el filete leía como una franja mostaza al lado del texto. */
  background: rgba(148, 128, 10, .35);
  pointer-events: none;
  z-index: 1;
}

.jumpnav__select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .7rem 2.75rem .7rem 1rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.jumpnav__select:focus {
  outline: none;
}
.jumpnav__select:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: -2px;
}
.jumpnav__select-icon {
  position: absolute;
  right: .75rem;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: rgba(95, 7, 9, .08);
  color: var(--bordo);
  pointer-events: none;
  transform: translateY(-50%) rotate(90deg);
}
.jumpnav__select-icon .ico {
  width: .85rem;
  height: .85rem;
  stroke-width: 2.4;
}

.jumpnav__list {
  display: none;
  flex-wrap: wrap;
  gap: .45rem .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .jumpnav__mobile { display: none; }
  .jumpnav__list { display: flex; }
  .jumpnav__inner { padding-block: .75rem; }
}

.jumpnav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .3rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--paper);
  color: var(--ink-soft);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease), background-color .2s var(--ease);
}
.jumpnav__list a:hover {
  border-color: var(--bordo);
  color: var(--bordo);
  background: #fff;
}

/* ---------- Índice con iconos (recorrido de conocer.php) ----------
   Cuando los ítems traen icono, la barra deja de ser una fila de chips: el
   icono va arriba de la etiqueta, sin recuadro, y el estado actual se marca
   con un filete dorado arriba y fondo claro. Menos aspecto de botonera. */
.jumpnav--iconos .jumpnav__list { gap: 0; }
.jumpnav--iconos .jumpnav__list a {
  flex-direction: column;
  gap: .4rem;
  min-height: 0;
  padding: .7rem .85rem .6rem;
  border: 0;
  border-top: 2px solid transparent;
  border-radius: 0;
  background: none;
  font-size: .75rem;
  text-align: center;
}
.jumpnav--iconos .jumpnav__ico {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--dorado);
  transition: color .2s var(--ease);
}
.jumpnav--iconos .jumpnav__list a:hover,
.jumpnav--iconos .jumpnav__list a[aria-current="true"] {
  border-top-color: var(--dorado);
  background: rgba(148, 128, 10, .07);
  color: var(--bordo);
}
.jumpnav--iconos .jumpnav__list a:hover .jumpnav__ico,
.jumpnav--iconos .jumpnav__list a:focus-visible .jumpnav__ico { color: var(--bordo); }
.jumpnav--iconos .jumpnav__list a span { max-width: 8.5rem; }

/* ---------- Índice secundario en mobile ----------
   En el recorrido la navegación principal es la lineal del pie de cada tramo,
   así que acá el índice se guarda en un desplegable cerrado: se puede llegar a
   cualquier tramo, pero no compite con el hilo de lectura. */
.jumpnav--secundario .jumpnav__inner { padding-block: 0; }

.jumpnav__desplegable > summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 46px;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
}
.jumpnav__desplegable > summary::-webkit-details-marker { display: none; }
.jumpnav__desplegable > summary::before {
  content: "";
  flex-shrink: 0;
  width: .45rem;
  height: .45rem;
  border-right: 1.5px solid var(--bordo);
  border-bottom: 1.5px solid var(--bordo);
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.jumpnav__desplegable[open] > summary::before { transform: rotate(-135deg); }
.jumpnav__desplegable > summary:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

.jumpnav__cuenta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  height: 1.35rem;
  padding-inline: .3rem;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: .6875rem;
  color: var(--bordo);
}

.jumpnav__mobile-lista {
  max-height: 52vh;
  overflow-y: auto;
  margin: 0 0 .6rem;
  padding: .35rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}
.jumpnav__mobile-lista a {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .35rem .15rem;
  color: var(--ink);
  font-size: .875rem;
  text-decoration: none;
}
.jumpnav__mobile-lista a:hover,
.jumpnav__mobile-lista a:focus-visible { color: var(--bordo); }
.jumpnav__mobile-lista .jumpnav__ico { width: 1.05rem; height: 1.05rem; color: var(--dorado); flex-shrink: 0; }
.jumpnav__list a:focus-visible {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}

/* Bloque de texto institucional largo */
.prose { max-width: 44rem; }
/* Mismo filete dorado que .section__head h2, pero alineado a la izquierda:
   los dos tratamientos de h2 del sitio comparten el lenguaje visual. */
.prose h2 {
  position: relative;
  margin-top: 2.75rem;
  padding-bottom: .55em;
}
.prose h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 3px;
  background: var(--dorado);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75rem; color: var(--dorado); }
/* El :not([class]) es a propósito: las viñetas doradas son solo para las listas
   de texto. Cualquier lista con su propia clase dentro de .prose (la tira de
   fotos, por ejemplo) mantiene su diseño y no recibe el punto. */
.prose ul:not([class]) { padding-left: 0; list-style: none; display: grid; gap: .6rem; }
.prose ul:not([class]) li { display: flex; gap: .65rem; }
.prose ul:not([class]) li::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: .62em;
  border-radius: 50%;
  background: var(--dorado);
}
.prose blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--dorado);
  background: var(--paper-soft);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-head);
  font-size: 1.1rem;
  color: var(--bordo);
}

/* Identidad — Pilares (6 cards) */
.pilares-grid {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .pilares-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pilares-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pilares-card {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-height: 100%;
  padding: clamp(1.35rem, 3vw, 1.85rem) clamp(1.25rem, 2.8vw, 1.65rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-top-width: 4px;
  border-top-style: solid;
}
.pilares-card--bordo  { border-top-color: var(--bordo); }
.pilares-card--verde  { border-top-color: var(--verde); }
.pilares-card--azul   { border-top-color: var(--azul); }
.pilares-card--dorado { border-top-color: var(--dorado); }

.pilares-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: var(--bordo);
}
.pilares-card--verde .pilares-card__mark  { background: var(--verde); }
.pilares-card--azul .pilares-card__mark   { background: var(--azul); }
.pilares-card--dorado .pilares-card__mark { background: var(--dorado); color: var(--bordo-dark, var(--bordo)); }

.pilares-card p {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.65;
  color: var(--ink);
  text-wrap: pretty;
}
.pilares-card__accent {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .01em;
}
.pilares-card--bordo .pilares-card__accent  { color: var(--bordo); }
.pilares-card--verde .pilares-card__accent  { color: var(--verde); }
.pilares-card--azul .pilares-card__accent   { color: var(--azul); }
.pilares-card--dorado .pilares-card__accent { color: var(--dorado); }

.logogrid__static {
  display: block;
}

/* Justificado institucional (segunda revisión Luz): desktop; en mobile alineación normal */
@media (min-width: 768px) {
  .prose--justified-ideario p,
  .prose--justified-ideario li {
    text-align: justify;
  }
  .prose--justified-global p {
    text-align: justify;
  }
}

/* Identidad — Historia: bloque único de lectura + timeline */
#historia.section {
  padding-bottom: clamp(.35rem, 1vw, .65rem);
}
#convenios.section {
  padding-top: clamp(.85rem, 2vw, 1.35rem);
}

.historia__head {
  max-width: 62.5rem;
  margin-bottom: clamp(1.25rem, 2.8vw, 1.75rem);
}
.historia__head h2 {
  font-size: clamp(1.45rem, 3.2vw, 2rem);
  line-height: 1.22;
  letter-spacing: .02em;
}

.historia__body {
  max-width: 62.5rem;
  margin-inline: auto;
}
.historia__body p {
  margin: 0 0 clamp(1rem, 2.2vw, 1.2rem);
  line-height: 1.68;
  color: var(--ink-soft);
}
.historia__body p:last-child {
  margin-bottom: 0;
}
.historia__destacado {
  font-size: clamp(1.03125rem, 2.1vw, 1.125rem);
  font-weight: 600;
  line-height: 1.7;
  color: var(--ink);
}

/* Línea de tiempo 45 años (HTML/CSS) */
.historia-tl__head {
  max-width: min(100%, 46rem);
  margin: clamp(1.75rem, 4vw, 2.35rem) auto clamp(1.25rem, 2.8vw, 1.65rem);
  padding-top: clamp(1.35rem, 3.2vw, 1.85rem);
  text-align: center;
  border-top: 1px solid var(--line);
}
.historia-tl__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.45rem, 1.5vw, .7rem);
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .02em;
  text-wrap: balance;
}
.historia-tl__title-en {
  display: block;
  font-size: clamp(1.55rem, 4.2vw, 2.35rem);
  color: var(--bordo);
}
.historia-tl__title-es {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(1.1875rem, 3.1vw, 1.5rem);
  font-weight: 400;
  line-height: 1.42;
  color: var(--dorado);
}

.historia-tl {
  --historia-tl-spine: 1.125rem;
  --historia-tl-year-col: 3.25rem;
  --historia-tl-bridge: clamp(.45rem, 1.6vw, .65rem);
  width: 100%;
  max-width: min(100%, 65.625rem);
  margin: 0 auto;
  padding-bottom: clamp(.25rem, 1vw, .5rem);
}

.historia-tl__track {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.historia-tl__item {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.historia-tl__marker {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin: 0;
}

.historia-tl__bridge {
  flex-shrink: 0;
}

/* Mobile: año arriba, card abajo, codo de continuidad */
@media (max-width: 899px) {
  .historia-tl {
    --historia-tl-mobile-spine: .75rem;
  }
  .historia-tl__track {
    gap: clamp(1.5rem, 4.5vw, 2.15rem);
  }
  .historia-tl__item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(.7rem, 2.4vw, .95rem);
    padding-bottom: clamp(.15rem, .6vw, .35rem);
  }
  .historia-tl__marker {
    order: 1;
    justify-content: flex-start;
  }
  .historia-tl__card {
    order: 2;
    width: 100%;
    max-width: none;
  }
  .historia-tl__bridge {
    order: 3;
    display: block;
    align-self: flex-start;
    width: 1.35rem;
    height: 1.35rem;
    margin: clamp(.35rem, 1.4vw, .55rem) 0 0 var(--historia-tl-mobile-spine);
    background: transparent;
    border: none;
    border-left: 2px solid var(--dorado-pale);
    border-bottom: 2px solid var(--dorado-pale);
    border-radius: 0 0 0 3px;
    position: relative;
  }
  .historia-tl__bridge::before {
    content: "";
    position: absolute;
    left: -2px;
    bottom: 100%;
    width: 2px;
    height: clamp(.55rem, 2.2vw, .8rem);
    background: var(--dorado-pale);
    border-radius: 1px;
  }
  .historia-tl__item:last-child .historia-tl__bridge {
    display: none;
  }
}

.historia-tl__year {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.5rem;
  padding: .4rem .85rem;
  border-radius: 999px;
  font-family: var(--font-head);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  background: var(--bordo);
}
.historia-tl__item--azul .historia-tl__year   { background: var(--azul); }
.historia-tl__item--verde .historia-tl__year  { background: var(--verde); }
.historia-tl__item--dorado .historia-tl__year { background: var(--dorado); }

.historia-tl__card {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(1rem, 2.4vw, 1.2rem) clamp(1.05rem, 2.6vw, 1.4rem);
  padding-left: clamp(1.1rem, 2.8vw, 1.45rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-left-color: var(--bordo);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-align: left;
}
.historia-tl__item--azul .historia-tl__card   { border-left-color: var(--azul); }
.historia-tl__item--verde .historia-tl__card  { border-left-color: var(--verde); }
.historia-tl__item--dorado .historia-tl__card { border-left-color: var(--dorado); }

.historia-tl__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}

.historia-tl__list {
  margin: 0;
  padding: 0 0 0 1.15rem;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
}
.historia-tl__list li {
  margin: 0 0 .5rem;
}
.historia-tl__list li:last-child {
  margin-bottom: 0;
}

/* Cinta de luto (luto.webp) — hito fundadores 2022 */
.historia-tl__luto {
  display: inline-block;
  width: auto;
  height: 20px;
  max-height: 24px;
  margin: 0 0 0 0.175em;
  padding: 0;
  vertical-align: -0.15em;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 479px) {
  .historia-tl__luto {
    height: 22px;
    max-height: 24px;
  }
}

/* Desktop: eje lateral, año | puente | card */
@media (min-width: 900px) {
  .historia-tl {
    --historia-tl-spine: 1.5rem;
    --historia-tl-year-col: 4rem;
    --historia-tl-bridge: clamp(.55rem, 1vw, .75rem);
    max-width: min(100%, 65.625rem);
  }
  .historia-tl__track {
    gap: clamp(1.25rem, 2vw, 1.65rem);
  }
  .historia-tl__track::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--historia-tl-spine);
    width: 2px;
    margin-left: -1px;
    background: var(--dorado-pale);
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
  }
  .historia-tl__item {
    display: grid;
    grid-template-columns: var(--historia-tl-year-col) var(--historia-tl-bridge) minmax(0, 1fr);
    grid-template-areas: "year bridge card";
    align-items: start;
    column-gap: 0;
    row-gap: 0;
    padding-bottom: 0;
  }
  .historia-tl__marker {
    grid-area: year;
    order: unset;
    justify-content: center;
    justify-self: center;
  }
  .historia-tl__bridge {
    grid-area: bridge;
    order: unset;
    display: block;
    align-self: center;
    justify-self: stretch;
    width: auto;
    height: 2px;
    margin: 0;
    background: var(--line);
    border: none;
    border-radius: 1px;
  }
  .historia-tl__bridge::before {
    content: none;
    display: none;
  }
  .historia-tl__card {
    grid-area: card;
    order: unset;
    max-width: min(53.125rem, 100%);
    padding: 1.1rem 1.45rem 1.15rem 1.5rem;
  }
  .historia-tl__year {
    font-size: .9375rem;
    padding: .42rem .9rem;
  }
}

/* Identidad — currículum: subsección A/E/E (3 filas a ancho completo) */
.curriculum-aee__head {
  max-width: 62.5rem;
  margin: clamp(2rem, 4.5vw, 2.75rem) auto 0;
  padding-top: clamp(1.5rem, 3.2vw, 2rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.curriculum-aee__head h3 {
  margin: 0 auto;
  max-width: 40rem;
  font-size: clamp(1.0625rem, 2.35vw, 1.3rem);
  line-height: 1.38;
  letter-spacing: .02em;
  color: var(--bordo);
}

.curriculum-aee {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.35rem);
  grid-template-columns: 1fr;
  max-width: 62.5rem;
  width: 100%;
  margin: clamp(1.25rem, 2.8vw, 1.65rem) auto 0;
  align-items: start;
}
.curriculum-aee .card {
  padding: clamp(1.5rem, 3.2vw, 2rem) clamp(1.35rem, 3vw, 1.75rem);
}
.curriculum-aee .card h3 {
  margin: 0 0 .75rem;
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  letter-spacing: .03em;
}
.curriculum-aee .card p {
  line-height: 1.68;
  text-wrap: pretty;
}
.curriculum-aee .card p + p {
  margin-top: clamp(.9rem, 2vw, 1.1rem);
}

.split {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .split { grid-template-columns: 1.4fr .9fr; } }
.split__aside {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--dorado);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--paper-soft);
}
.split__aside h2, .split__aside h3 {
  margin-top: 0;
  margin-bottom: 1.1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bordo);
}
.split__aside h2::after, .split__aside h3::after { display: none; }

.valores-list {
  display: grid;
  gap: .65rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.valores-list__item {
  padding: .85rem .95rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--dorado);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper);
}
.valores-list__title {
  display: block;
  margin-bottom: .2rem;
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--bordo);
}
.valores-list__desc {
  display: block;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.modalidad-sede + .modalidad-sede { margin-top: 1.25rem; }
.modalidad-sede__head {
  margin: 0 0 .65rem;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bordo);
}

/* Lista de enlaces con icono, para los paneles laterales. Reemplaza a los
   enlaces subrayados sueltos, que quedaban sin peso visual. */
.linklist { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.linklist a {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 48px;
  padding: .55rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.linklist a:hover,
.linklist a:focus-visible { border-color: var(--dorado); color: var(--bordo); }
.linklist .ico { stroke: var(--dorado); stroke-width: 1.8; flex: 0 0 auto; }
.linklist__mas {
  margin-left: auto;
  stroke: var(--ink-faint);
  transition: transform .2s var(--ease);
}
.linklist a:hover .linklist__mas { transform: translateX(3px); stroke: var(--bordo); }

/* Tira de fotos de archivo */
.tira {
  display: grid;
  gap: .75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .tira { grid-template-columns: repeat(4, 1fr); } }
/* Cada foto abre su versión grande. El icono de lupa aparece al pasar el mouse
   para que se entienda que son ampliables. */
.tira a {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  transition: border-color .2s var(--ease);
}
.tira a:hover,
.tira a:focus-visible { border-color: var(--dorado); }
.tira img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 520 / 366;
  object-fit: cover;
  transition: transform .35s var(--ease);
}
.tira a:hover img { transform: scale(1.04); }
.tira__lupa {
  position: absolute;
  right: .4rem;
  bottom: .4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(71, 5, 6, .82);
  color: #fff;
  opacity: 0;
  transition: opacity .2s var(--ease);
  pointer-events: none;
}
.tira a:hover .tira__lupa,
.tira a:focus-visible .tira__lupa { opacity: 1; }
.tira__lupa .ico { width: 16px; height: 16px; }

/* En pantallas táctiles no hay hover: sin esto la lupa no aparecía nunca y no
   se entendía que las fotos se pueden ampliar. */
@media (hover: none) {
  .tira__lupa { opacity: .9; }
}

/* ---------- Galería de fotos ampliadas ----------
   La arma main.js al primer clic. Reemplaza el "abrir en pestaña nueva": la
   foto se ve sobre la página, con anterior/siguiente, contador y epígrafe. */
.galeria {
  position: fixed;
  inset: 0;
  /* Por encima del header (100), la barra mobile (90) y el distintivo de
     preview (200); por debajo del skip-link (999). */
  z-index: 210;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(.35rem, 2vw, 1.25rem);
  padding: clamp(3.25rem, 8vh, 5rem) clamp(.5rem, 3vw, 2.5rem);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
.galeria.is-open { opacity: 1; }
.galeria[hidden] { display: none; }

.galeria__fondo {
  position: absolute;
  inset: 0;
  /* .96 y no menos: por debajo de eso se llega a intuir el fantasma del
     layout de la página detrás en pantallas buenas. */
  background: rgba(20, 2, 3, .96);
  cursor: pointer;
}

.galeria__figura {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  margin: 0;
  min-width: 0;
  max-height: 100%;
}
.galeria__figura img {
  display: block;
  max-width: 100%;
  /* Deja aire para el contador sin que la foto se recorte nunca. */
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  background: var(--bordo-dark);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
  transform: scale(.98);
  transition: transform .22s var(--ease);
}
.galeria.is-open .galeria__figura img { transform: none; }

/* Solo el contador: las fotos van sin epígrafe. El texto alternativo sigue en
   la imagen para los lectores de pantalla, pero no se muestra. */
.galeria__pie { text-align: center; }
.galeria__contador {
  font-family: var(--font-head);
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado-pale);
}

.galeria__btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease);
}
.galeria__btn:hover {
  background: var(--dorado-pale);
  border-color: var(--dorado-pale);
  color: var(--bordo-dark);
}
.galeria__btn:focus-visible { outline: 2px solid var(--dorado-pale); outline-offset: 3px; }
.galeria__btn .ico { width: 20px; height: 20px; }
.galeria__btn[hidden] { display: none; }

/* El cierre flota arriba a la derecha y no ocupa columna de la grilla. */
.galeria__cerrar {
  position: absolute;
  top: clamp(.75rem, 2vh, 1.35rem);
  right: clamp(.75rem, 3vw, 1.75rem);
}

@media (max-width: 599px) {
  /* En mobile la foto usa todo el ancho y las flechas van debajo, sobre los
     costados, para no comerle espacio a la imagen. */
  .galeria { grid-template-columns: 1fr; padding-inline: .75rem; }
  .galeria__figura { order: 1; }
  .galeria__nav { position: absolute; bottom: 1.1rem; }
  .galeria__nav--prev { left: 1.1rem; }
  .galeria__nav--next { right: 1.1rem; }
  .galeria__figura img { max-height: calc(100vh - 12rem); }
}

/* Tarjetas genéricas */
.cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-top: 4px solid var(--dorado);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.card h3 { margin-top: 0; color: var(--bordo); }
.card p { margin: 0; }
.card p + p { margin-top: .85rem; }
.card--verde { border-top-color: var(--verde); }
.card--azul  { border-top-color: var(--azul); }
.card--bordo { border-top-color: var(--bordo); }
.card__meta {
  margin: -.25rem 0 1rem;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.card--narrow { max-width: 52rem; margin-inline: auto; }
.card--spaced { margin-top: 2rem; }

/* Video del campo de deportes (vida-escolar). Mismo criterio que contacto: sin autoplay,
   poster y controles; altura acotada para no dominar la ficha. */
.campo-card__video {
  margin: 0 0 1.25rem;
  padding: 0;
}
.campo-card__video video {
  display: block;
  width: 100%;
  max-height: min(50vh, 22rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bordo-dark);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card__hint {
  margin: .75rem 0 0;
  font-size: .8125rem;
  color: var(--ink-faint);
}

/* Sports — disciplinas (Vida escolar): bloque editorial, sin caja */
.sports-disciplinas {
  margin: 1.85rem 0 2.15rem;
  padding: 0;
}
.sports-disciplinas__lead {
  position: relative;
  margin: 0 0 1.7rem;
  padding-top: 0.75rem;
}
.sports-disciplinas__lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 48px;
  height: 2px;
  border-radius: 2px;
  background: var(--dorado);
}
.sports-disciplinas__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.15rem 1.75rem;
}
@media (min-width: 720px) {
  .sports-disciplinas__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem clamp(2rem, 5vw, 3.75rem);
  }
}
.sports-disciplinas__grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
}
.sports-disciplinas__ico {
  display: block;
  width: 3.9rem;
  height: 3.9rem;
  object-fit: contain;
  object-position: center;
}
.sports-disciplinas__name {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}

/* Pasos numerados (proceso de admisión) */
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.25rem; counter-reset: step; }
.steps li {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 4.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  counter-increment: step;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 1.25rem;
  top: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bordo);
  color: #fff;
  font-family: var(--font-head);
  font-size: 1.05rem;
}

/* Acordeón (FAQ) */
.faq { display: grid; gap: .75rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1rem 1.25rem;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.05rem;
  color: var(--bordo);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--dorado);
  transition: transform .2s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 1.25rem 1.25rem; color: var(--ink-soft); }

/* Franja fotográfica panorámica que encabeza un bloque de contenido.
   Los originales son 1887x427; en pantallas chicas se recorta a 3:1 para que
   no queden como una línea. */
.band {
  overflow: hidden;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--paper-soft);
  aspect-ratio: 3 / 1;
}
@media (min-width: 700px) { .band { aspect-ratio: 1400 / 317; } }
.band img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Contacto: apertura «Consultas de admisión» + aclaración de contacto general */
.contacto-admisiones-intro {
  max-width: 52rem;
  margin: 0 0 1.35rem;
  padding: 0 0 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  line-height: 1.6;
}
.contacto-admisiones-intro__title {
  margin: 0 0 0.65rem;
  font-family: var(--font-head);
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
}
.contacto-admisiones-intro p {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
}
.contacto-admisiones-intro p:last-child {
  margin-bottom: 0;
}

/* Menos aire entre consultas → sedes y sedes → familias (sin tocar .sede-block interno) */
.contacto-sedes.section {
  padding-top: clamp(1.15rem, 2.8vw, 1.85rem);
  padding-bottom: clamp(2rem, 4vw, 3.25rem);
}
.contacto-sedes .sede-block:first-child {
  padding-top: 0;
}
.contacto-familias.section {
  padding-top: clamp(1.35rem, 3vw, 2rem);
}
.contacto-familias .section__head {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

/* Bloque de sede completo (página de contacto) */
.sede-block {
  padding-block: clamp(2rem, 4vw, 3rem);
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}
.sede-block + .sede-block { border-top: 1px solid var(--line); }

.sede-block__head { margin-bottom: 1.5rem; }
.sede-block__head h2 { margin-bottom: .3rem; }
.sede-block__head h2 span {
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-left: .5rem;
}
.sede-block__head p { margin: 0; color: var(--ink-soft); font-size: .9375rem; }

.sede-block__grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 860px) { .sede-block__grid { grid-template-columns: 1fr 1.15fr; } }

.sede-block__photo {
  overflow: hidden;
  margin-bottom: 1.35rem;
  border-radius: var(--radius);
  background: var(--paper-soft);
  aspect-ratio: 16 / 9;
}
.sede-block__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.sede-block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 1.5rem;
}
.sede-block__admision-note {
  flex: 1 1 100%;
  margin: 0;
  font-size: .9375rem;
  color: var(--ink-soft);
}

/* El mapa se carga en diferido: no pesa hasta que entra en pantalla. */
.sede-block__map {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper-soft);
  aspect-ratio: 4 / 3;
}
@media (min-width: 860px) { .sede-block__map { aspect-ratio: 3 / 2; } }
.sede-block__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* Recorrido aéreo por sede (contacto). Sin autoplay: el visitante decide cuándo
   reproducir. El poster evita un recuadro vacío antes de la primera interacción. */
.sede-block__video {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
}
.sede-block__video figcaption {
  margin: 0 0 .65rem;
  font-family: var(--font-head);
  font-size: 1rem;
  color: var(--bordo);
}
.sede-block__video video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bordo-dark);
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Grilla de logos institucionales (convenios y asociaciones).
   El protagonismo es del logo: la tarjeta es solo un contenedor claro y
   uniforme, porque los archivos vienen todos en 219x125. */
.logogrid {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
}
@media (min-width: 640px) { .logogrid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }

.logogrid a,
.logogrid span {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 219 / 125;
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.logogrid a:hover,
.logogrid a:focus-visible { border-color: var(--dorado); box-shadow: var(--shadow-sm); }
.logogrid img { max-width: 100%; height: auto; }
/* Logos actualizados oct 2026: escala acorde al resto de la grilla sin deformar */
.logogrid img.logogrid__img--ade {
  max-width: 78%;
  max-height: 4.35rem;
  width: auto;
  height: auto;
  object-fit: contain;
}
.logogrid img.logogrid__img--sanandres {
  max-width: 92%;
  max-height: 3.65rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Bloques de la sección de convenios */
.convenios__grupo + .convenios__grupo { margin-top: clamp(2rem, 4vw, 3rem); }
.convenios__grupo h3 {
  margin: 0 0 .35rem;
  color: var(--bordo);
  font-size: 1.05rem;
}
.convenios__grupo p {
  margin: 0 0 1.25rem;
  font-size: .9375rem;
  color: var(--ink-soft);
}

/* Lista de principios en tarjetas. En una sola columna, doce ítems cortos se
   leían como un volcado de viñetas; repartidos en columnas ocupan el ancho de
   la sección y se entienden como un conjunto. Todas las tarjetas de una fila
   comparten altura y el texto va centrado, así las frases cortas no quedan
   colgando arriba de un hueco. */
.principios {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .principios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .principios { grid-template-columns: repeat(3, 1fr); } }

.principios li {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.05rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .9375rem;
  line-height: 1.5;
}
.principios .ico {
  width: 17px;
  height: 17px;
  color: var(--dorado);
}

/* Nota de cierre de sección: un logo institucional y el texto al lado.
   El logo va directo sobre el fondo blanco porque el JPG del IB ya trae su
   propio marco dorado; encerrarlo en otro recuadro duplicaba el borde. */
.nota-logo {
  display: grid;
  justify-items: start;
  gap: 1.1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.15rem, 3vw, 1.65rem);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--dorado);
  border-radius: var(--radius);
}
@media (min-width: 600px) {
  .nota-logo {
    grid-template-columns: 175px 1fr;
    align-items: center;
    gap: 1.6rem;
  }
}
.nota-logo img { width: 175px; max-width: 100%; height: auto; }
/* Límite de medida: sin esto, en pantallas anchas el párrafo llegaba a más de
   90 caracteres por línea y se leía incómodo. */
.nota-logo__texto { max-width: 42rem; }
.nota-logo h3 {
  margin: 0 0 .35rem;
  color: var(--bordo);
  font-size: 1.05rem;
}
.nota-logo p {
  margin: 0 0 .8rem;
  font-size: .9375rem;
  color: var(--ink-soft);
}

/* Grupos IB — Vida escolar (Middle & Senior) */
.ib-grupos {
  display: grid;
  gap: .65rem;
  grid-template-columns: 1fr;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 700px) {
  .ib-grupos { grid-template-columns: repeat(2, 1fr); }
}
.ib-grupos__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem .5rem;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: .9375rem;
  line-height: 1.35;
}
.ib-grupos__grupo {
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bordo);
  white-space: nowrap;
}
.ib-grupos__sep {
  color: var(--line);
  font-weight: 300;
  user-select: none;
}
.ib-grupos__area {
  color: var(--ink);
  flex: 1 1 8rem;
  min-width: 0;
}
.prose .ib-grupos + p { margin-top: 2rem; }

/* Tabla institucional */
.tabla-wrap { overflow-x: auto; }
.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  background: var(--paper);
}
.tabla th, .tabla td { padding: .8rem 1rem; border: 1px solid var(--line); text-align: left; }
.tabla thead th {
  background: var(--bordo);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 400;
}
.tabla .th-sub {
  display: block;
  font-family: var(--font-body);
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
}

/* Aviso / nota destacada */
.note {
  display: flex;
  gap: .85rem;
  padding: 1.1rem 1.25rem;
  border-left: 4px solid var(--dorado);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--paper-soft);
  font-size: .9375rem;
  color: var(--ink-soft);
}
/* color, no stroke: los <symbol> del sprite llevan stroke="currentColor" como
   atributo de presentación, y ese atributo gana sobre un stroke aplicado por
   CSS al <svg> que los instancia. Con stroke el icono quedaba del color del
   texto en lugar de dorado. */
.note .ico { color: var(--dorado); margin-top: .25em; }

/* Página de resultado (gracias / 404) */
.standalone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 62vh;
  padding-top: calc(var(--header-h) + 3rem);
  padding-bottom: 3rem;
  text-align: center;
}
.standalone__inner { max-width: 34rem; }
.standalone__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: var(--paper-soft);
  color: var(--verde);
}
.standalone__icon .ico { width: 36px; height: 36px; stroke: currentColor; stroke-width: 2.4; }
.standalone__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }

/* ------------------------------ 18. Animación de entrada ------------------------------ */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Si el sistema pide menos movimiento, nada se mueve.
   ---------------------------------------------------------------------------
   Todo se acota con html:not(.anim-test) para poder verificar si esta
   preferencia es la que está frenando una animación. En la consola:
       document.documentElement.classList.add('anim-test')
   y las animaciones vuelven aunque el sistema pida reducirlas.
   Para saber si la preferencia está activa:
       matchMedia('(prefers-reduced-motion: reduce)').matches
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html:not(.anim-test) { scroll-behavior: auto; }
  html:not(.anim-test) *,
  html:not(.anim-test) *::before,
  html:not(.anim-test) *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
  html:not(.anim-test) [data-reveal] { opacity: 1; transform: none; }
  html:not(.anim-test) .hero__slide { transition: none; }

  /* Excepción deliberada: la cinta de logos sigue andando aunque el sistema
     pida reducir el movimiento, pero a menos de la mitad de velocidad
     (20 px/s). Es un desplazamiento lento, continuo, sin destellos ni
     parallax, y se detiene al pasar el mouse o al recibir foco.
     Antes se detenía por completo y quedaba pareciendo un bloque estático. */
  html .logos__track {
    animation-name: logos-scroll;
    animation-duration: 90s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
}

/* Fallback: si el JS no corre, el contenido igual se ve. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* ------------------------------ 19. Utilidades ------------------------------ */

.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;
}
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

@media print {
  .site-header, .nav-drawer, .nav-backdrop, .mobile-bar, .hero__ui, .cta-band { display: none; }
  body { padding-bottom: 0; color: #000; }
}

/* ------------------------------ 20. Conocé SMC a tu manera ------------------------------
   Experiencia guiada de conocer.php, más su bloque de entrada en el home.
   No introduce lenguaje visual nuevo: usa los mismos tokens, radios y filetes
   dorados que el resto del sitio. Los radios y checkboxes son nativos y siguen
   en el DOM (solo se ocultan visualmente), así que el teclado y los lectores de
   pantalla funcionan sin ARIA extra.
   --------------------------------------------------------------------------- */

/* El atributo hidden viene del navegador y pierde contra cualquier display
   declarado en la hoja de estilos: .btn es inline-flex y el aviso de recorrido
   guardado es flex, así que los dos seguirían visibles. Se declara explícito. */
.conocer-entry__reanudar[hidden],
.conocer__acciones .btn[hidden],
.recorrido__aviso[hidden] { display: none; }

/* ---------- Entrada desde el home ----------
   Pieza principal del home después del hero. A la izquierda el relato (eyebrow,
   título, texto, CTA y los tres pasos); a la derecha una composición de tres
   fotos reales del colegio, superpuestas y con giros mínimos. */
.conocer-entry {
  padding-block: clamp(2.1rem, 5vw, 3.6rem);
  border-block: 1px solid var(--line);
  background: var(--paper-soft);
}

.conocer-entry__inner {
  display: grid;
  gap: clamp(2rem, 4vw, 3.25rem);
}
@media (min-width: 900px) {
  .conocer-entry__inner {
    /* La ilustración acompaña, no protagoniza: se le da algo más de la mitad
       del ancho de la columna de texto. */
    grid-template-columns: minmax(0, 1fr) minmax(0, .55fr);
    align-items: center;
  }
}

.conocer-entry__eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .8rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dorado);
}
.conocer-entry__eyebrow-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid var(--dorado);
  border-radius: 50%;
}
.conocer-entry__eyebrow .ico { width: .8rem; height: .8rem; color: var(--dorado); }

.conocer-entry h2 {
  position: relative;
  margin: 0;
  padding-bottom: .45em;
  max-width: 15em;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.14;
}
.conocer-entry h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: var(--dorado);
}

.conocer-entry__lead {
  margin: .9rem 0 1.2rem;
  max-width: 32rem;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* El CTA lleva la misma flecha en círculo que el resto de las acciones, en
   blanco porque va sobre el bordó del botón. */
.conocer-entry__cta { padding-right: 1rem; gap: .75rem; }
.conocer-entry__cta .ico {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease);
}
.conocer-entry__cta:hover .ico,
.conocer-entry__cta:focus-visible .ico {
  background: #fff;
  border-color: #fff;
  color: var(--bordo);
  transform: translateX(2px);
}

/* ---------- Los tres pasos ----------
   Explicación visual de la experiencia, no controles: no hay fondo de botón ni
   borde de campo. En desktop se enlazan con una línea punteada muy tenue. */
.pasos-intro {
  display: grid;
  /* Siempre en una fila: apilados verticalmente estiraban demasiado el bloque
     en mobile. Sin la línea de detalle, tres columnas entran cómodas en 375px. */
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin: clamp(1.3rem, 2.6vw, 1.7rem) 0 0;
  padding: clamp(1.15rem, 2.3vw, 1.4rem) 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.pasos-intro__item {
  position: relative;
  display: grid;
  gap: .3rem;
  justify-items: center;
  text-align: center;
}
.pasos-intro__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: .4rem;
  border: 1px solid var(--dorado-pale);
  border-radius: 50%;
  background: var(--paper);
}
.pasos-intro__ico .ico { width: 1.05rem; height: 1.05rem; color: var(--dorado); }

.pasos-intro__titulo {
  font-family: var(--font-head);
  font-size: .8125rem;
  line-height: 1.25;
  color: var(--bordo);
}
.pasos-intro__detalle { display: none; }

/* Punteado de enlace, a la altura del centro del círculo. */
.pasos-intro__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.05rem;
  left: calc(50% + 1.4rem);
  right: calc(-50% + 1.4rem);
  border-top: 1px dashed var(--dorado-pale);
  pointer-events: none;
}

@media (min-width: 620px) {
  .pasos-intro { gap: 1.1rem; }
  .pasos-intro__item { justify-items: start; text-align: left; }
  .pasos-intro__ico { width: 2.4rem; height: 2.4rem; margin-bottom: .5rem; }
  .pasos-intro__ico .ico { width: 1.15rem; height: 1.15rem; }
  .pasos-intro__titulo { font-size: .875rem; }
  .pasos-intro__detalle {
    display: block;
    font-size: .78125rem;
    line-height: 1.4;
    color: var(--ink-soft);
  }
  .pasos-intro__item:not(:last-child)::after {
    top: 1.2rem;
    left: 2.9rem;
    right: -.55rem;
  }
}

/* ---------- Ilustración del recorrido ----------
   Desktop (≥900px): PNG/WebP transparente, sin marco; cuadrado, max-width 19rem.
   Mobile (<900px): mismo <img> y srcset, en contenedor horizontal 2:1 con
   object-fit cover (Sir Matt centrado en el encuadre). */
.conocer-entry__ilustracion { display: none; }

@media (max-width: 899px) {
  .conocer-entry__ilustracion {
    display: block;
    width: 100%;
    margin-top: clamp(0.35rem, 1.2vw, 0.65rem);
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--paper);
  }
  .conocer-entry__ilustracion img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    margin-inline: 0;
    object-fit: cover;
    /* Probado vs. center / 42% / 48% vertical: 45% mantiene pluma, rostro y
       nodos del camino sin recortar de más arriba o abajo. */
    object-position: 50% 45%;
  }
}

@media (min-width: 900px) {
  .conocer-entry__ilustracion { display: block; }
  .conocer-entry__ilustracion img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 19rem;
    margin-inline: auto;
    object-fit: initial;
    object-position: initial;
    transition: transform .5s var(--ease);
  }
  /* Al pasar el mouse por el bloque, la ilustración se acerca apenas. La
     preferencia de movimiento reducido la resuelve la regla global. */
  .conocer-entry:hover .conocer-entry__ilustracion img { transform: scale(1.02); }
}

/* ---------- Recorrido guardado ----------
   Invitación personal, no una fila de controles: icono propio, rótulo, título,
   metadata y la acción como pastilla. Separada del CTA principal por su propio
   espacio y por el contraste del fondo blanco sobre el beige. */
.conocer-entry__reanudar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--dorado);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 760px) {
  .conocer-entry__reanudar {
    flex-direction: row;
    align-items: center;
    gap: 1.35rem;
    padding: 1.3rem 1.55rem;
  }
  .conocer-entry__reanudar-texto { flex: 1 1 auto; }
  .conocer-entry__reanudar-acciones { flex-shrink: 0; }
}

/* Continuar es la acción principal; cancelar queda al lado, sin peso de botón. */
.conocer-entry__reanudar-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.15rem;
}
.conocer-entry__cancelar {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-faint);
  font-family: var(--font-body);
  font-size: .8125rem;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  cursor: pointer;
}
.conocer-entry__cancelar:hover {
  color: var(--bordo);
  text-decoration-color: currentColor;
}
.conocer-entry__cancelar:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }

.conocer-entry__reanudar-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid var(--dorado-pale);
  border-radius: 50%;
  background: var(--paper-soft);
}
.conocer-entry__reanudar-ico .ico { width: 1.1rem; height: 1.1rem; color: var(--dorado); }

.conocer-entry__reanudar-eyebrow {
  margin: 0 0 .3rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dorado);
}
.conocer-entry__reanudar-titulo {
  margin: 0;
  font-family: var(--font-head);
  font-size: 1.0625rem;
  color: var(--bordo);
}
.conocer-entry__reanudar-meta {
  margin: .25rem 0 0;
  font-size: .9375rem;
  color: var(--ink-soft);
}

/* La pastilla usa el mismo círculo, en bordó sobre fondo claro. */
.conocer-entry__reanudar-cta { gap: .7rem; }
.conocer-entry__reanudar-cta .ico {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 5px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
/* .btn--outline se vuelve bordó sólido en hover: la flecha pasa a blanco para
   no quedar del mismo color que su fondo. */
.conocer-entry__reanudar-cta:hover .ico,
.conocer-entry__reanudar-cta:focus-visible .ico {
  color: #fff;
  transform: translateX(2px);
}

/* ---------- Indicador de progreso ---------- */
.conocer__pasos {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: var(--ink-faint);
  counter-reset: cpaso;
}
.conocer__pasos li {
  display: flex;
  align-items: center;
  gap: .5rem;
  counter-increment: cpaso;
}
.conocer__pasos li::before {
  content: counter(cpaso);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--paper);
  font-size: .75rem;
  font-weight: 500;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.conocer__pasos li[aria-current="step"] { color: var(--bordo); font-weight: 500; }
.conocer__pasos li[aria-current="step"]::before {
  border-color: var(--bordo);
  background: var(--bordo);
  color: #fff;
}
.conocer__pasos li.is-hecho { color: var(--ink-soft); }
.conocer__pasos li.is-hecho::before {
  border-color: var(--dorado);
  background: var(--dorado-pale);
  color: var(--bordo-dark);
}
/* Sin JS los tres pasos se completan en una sola pantalla: el indicador
   secuencial no describiría lo que pasa, así que no se muestra. */
.no-js .conocer__pasos { display: none; }

/* ---------- Formulario de selección ---------- */
.conocer__form { max-width: 62rem; }

.conocer__paso {
  margin: 0 0 2.5rem;
  padding: 0;
  border: 0;
}
.conocer__paso:last-of-type { margin-bottom: 1.75rem; }

/* En modo guiado (con JS) se ve un paso a la vez. */
.conocer__form.is-guiado .conocer__paso { display: none; }
.conocer__form.is-guiado .conocer__paso.is-activo { display: block; }

.conocer__legend {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin: 0 0 1.1rem;
  padding: 0;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  color: var(--bordo);
}
.conocer__legend-num {
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--dorado);
}
.conocer__nota {
  margin: -.5rem 0 1.1rem;
  max-width: 42rem;
  font-size: .875rem;
  color: var(--ink-soft);
}

.conocer__opciones { display: grid; gap: .75rem; }
@media (min-width: 800px) {
  .conocer__opciones--nivel { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) {
  .conocer__opciones--sede { grid-template-columns: repeat(3, 1fr); }
}
/* auto-fill con mínimo angosto: en 375px queda una columna y nunca hay
   scroll horizontal, que fue el problema de la botonera de secciones. */
.conocer__opciones--interes { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.conocer__opcion {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  cursor: pointer;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease),
              background .2s var(--ease);
}
.conocer__opcion:hover { border-color: var(--dorado); box-shadow: var(--shadow-sm); }

/* El input queda en el DOM y sigue siendo focusable: solo se oculta. */
.conocer__opcion input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.conocer__opcion-cuerpo {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  padding: .9rem 1rem;
}
.conocer__opcion-nombre {
  font-family: var(--font-head);
  font-size: .9375rem;
  color: var(--ink);
}
.conocer__opcion-ayuda { font-size: .8125rem; color: var(--ink-soft); line-height: 1.45; }

.conocer__opcion-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--paper-soft);
}
.conocer__opcion-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s var(--ease);
}
.conocer__opcion--foto:hover .conocer__opcion-media img { transform: scale(1.03); }

/* Estado elegido: filete bordó y tilde dorada, el mismo lenguaje de las
   tarjetas del sitio. Nada de acentos de color nuevos. */
.conocer__opcion:has(input:checked) {
  border-color: var(--bordo);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.conocer__opcion:has(input:checked)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--bordo);
  z-index: 1;
}
.conocer__opcion:has(input:checked) .conocer__opcion-nombre { color: var(--bordo); }
.conocer__opcion:has(input:checked)::after {
  content: "";
  position: absolute;
  right: .7rem;
  top: .7rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--bordo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  z-index: 2;
}
.conocer__opcion--foto:has(input:checked)::after {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85);
}

.conocer__opcion:has(input:focus-visible) {
  outline: 2px solid var(--dorado);
  outline-offset: 2px;
}

.conocer__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ---------- El selector en pantallas chicas ----------
   Un paso por pantalla y lo mínimo en pantalla: el indicador muestra el número
   de los cuatro pasos pero solo el nombre del actual, las opciones con foto
   pasan a fila (miniatura + texto) y los botones ocupan el ancho. Así los tres
   pasos se sienten un camino y no una pantalla llena de controles. */
@media (max-width: 559px) {
  .conocer__pasos {
    gap: .3rem .55rem;
    margin-bottom: 1.5rem;
    font-size: .75rem;
  }
  .conocer__pasos li:not([aria-current="step"]) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .conocer__legend { font-size: 1.15rem; }

  .conocer__opcion--foto { flex-direction: row; align-items: center; }
  .conocer__opcion--foto .conocer__opcion-media {
    flex: 0 0 5.25rem;
    align-self: stretch;
    aspect-ratio: auto;
  }
  .conocer__opcion--foto:has(input:checked)::after { top: .55rem; box-shadow: none; }

  .conocer__opcion-cuerpo { padding: .75rem .9rem; }

  .conocer__opciones--interes { gap: .5rem; }

  .conocer__acciones { flex-direction: column-reverse; align-items: stretch; }
  .conocer__acciones .btn { width: 100%; }
}
/* "Continuar" se deshabilita hasta que haya una elección: sin esto el botón
   parece activo y el clic no haría nada. */
.conocer__acciones .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.conocer__acciones .btn:disabled:hover { background: var(--btn-bg); }

.conocer__salida { margin: 0; color: var(--ink-soft); }

/* ---------- Bloque para modificar la selección ---------- */
.conocer__editar {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.conocer__editar > summary {
  display: flex;
  align-items: center;
  gap: .55rem;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 1rem var(--gutter);
  font-family: var(--font-head);
  font-size: .9375rem;
  color: var(--bordo);
  cursor: pointer;
  list-style: none;
}
.conocer__editar > summary::-webkit-details-marker { display: none; }
.conocer__editar > summary::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--ease);
}
.conocer__editar[open] > summary::before { transform: rotate(-135deg); }
.conocer__editar > summary:focus-visible { outline: 2px solid var(--dorado); outline-offset: -2px; }
.conocer__editar .conocer { padding-top: 0; }

/* ---------- Encabezado del recorrido ----------
   Va dentro de .page-hero, sobre el velo bordó. Antes era una franja blanca
   propia entre la cabecera y el índice sticky, y al scrollear se metía debajo
   del header fijo: el resumen desaparecía y el índice parecía pegado al header.
   Integrado en la cabecera scrollea junto con el H1 y no hay solapamiento. */
.recorrido__head {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
  max-width: 46rem;
}

/* El velo bordó de la cabecera es suave a propósito, así que el texto que va
   sobre la foto necesita su propia sombra, igual que el H1. */
.recorrido__resumen {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  line-height: 1.3;
  color: #fff;
  text-shadow: 0 2px 14px rgba(30, 3, 4, .5);
}

.recorrido__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .9rem 0 0;
  padding: 0;
  list-style: none;
}
.recorrido__chips li {
  padding: .24rem .7rem;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--radius-btn);
  background: rgba(30, 3, 4, .55);
  backdrop-filter: blur(3px);
  font-size: .75rem;
  color: #fff;
}

.recorrido__head-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 1.5rem;
}
/* Acotado al botón de compartir y al de reiniciar. Sin acotar, esta regla le
   pisaba el tamaño al círculo de .link-arrow y la flecha quedaba de 4 px
   dentro de su propio padding: se veía un círculo vacío. */
.recorrido__head-acciones .btn .ico,
.recorrido__head-acciones .recorrido__reiniciar .ico { width: 1rem; height: 1rem; }

/* Enlaces sobre el velo bordó de la cabecera: el círculo va en blanco, que es
   lo único que se lee bien sobre la foto. */
.recorrido__head-acciones .link-arrow {
  color: #fff;
  text-shadow: 0 1px 10px rgba(30, 3, 4, .6);
}
.recorrido__head-acciones .link-arrow .ico {
  width: 30px;
  height: 30px;
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
  background: rgba(30, 3, 4, .35);
}
.recorrido__head-acciones .link-arrow:hover { color: var(--dorado-pale); }
.recorrido__head-acciones .link-arrow:hover .ico,
.recorrido__head-acciones .link-arrow:focus-visible .ico {
  background: var(--dorado-pale);
  border-color: var(--dorado-pale);
  color: var(--bordo-dark);
}

.recorrido__reiniciar {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: #fff;
  text-shadow: 0 1px 10px rgba(30, 3, 4, .6);
  text-decoration-color: rgba(255, 255, 255, .45);
}
.recorrido__reiniciar:hover { color: var(--dorado-pale); text-decoration-color: currentColor; }
.recorrido__reiniciar .ico { stroke: currentColor; }

.recorrido__aviso {
  margin: 1.1rem 0 0;
  padding: .6rem .9rem;
  border: 1px solid rgba(230, 223, 174, .5);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .12);
  font-size: .875rem;
  color: #fff;
}

/* ---------- Sir Matt — portal fijo temporal (figura + globo) ---------- */
.sir-matt-cierre-sentinel {
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.sir-matt-portal {
  position: fixed;
  /* Capas sitio: mobile-bar/jumpnav 90 · side-rail 95 · header 100 · sir-matt 105
     · nav-backdrop 110 · nav-drawer 120 · galería 210 · skip-link 999 (focus) */
  z-index: 105;
  bottom: calc(66px + env(safe-area-inset-bottom) + 0.65rem);
  right: max(0.75rem, var(--gutter));
  left: auto;
  max-width: min(22rem, 92vw);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.42s ease, transform 0.42s ease;
  pointer-events: none;
}
.sir-matt-portal.is-entering {
  opacity: 0;
  transform: translateY(12px);
}
.sir-matt-portal:not([hidden]) {
  pointer-events: auto;
}
.sir-matt-portal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.sir-matt-portal.is-hiding {
  opacity: 0;
  transform: translateY(6px);
}

.sir-matt-portal__panel {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
}

.sir-matt-portal__inner {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(0.35rem, 1.5vw, 0.55rem);
}

.sir-matt-portal__figura {
  flex-shrink: 0;
  line-height: 0;
  order: 2;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sir-matt-portal__globo {
  order: 1;
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(17.5rem, 68vw);
  padding: 0.6rem 0.65rem 0.55rem 0.7rem;
  border: 1px solid rgba(230, 223, 174, 0.78);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 4px 20px rgba(30, 3, 4, 0.08);
}
.sir-matt-portal__cerrar {
  position: absolute;
  top: -0.3rem;
  right: -0.28rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(230, 223, 174, 0.55);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 1px 5px rgba(30, 3, 4, 0.06);
  color: rgba(87, 96, 106, 0.72);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease),
              background-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.sir-matt-portal__cerrar:hover,
.sir-matt-portal__cerrar:focus-visible {
  color: var(--bordo);
  border-color: rgba(148, 128, 10, 0.45);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 2px 8px rgba(30, 3, 4, 0.08);
  outline: none;
}
.sir-matt-portal__cerrar span {
  display: block;
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1;
  transform: scale(0.92) translateX(0.06em);
}
.sir-matt-portal__globo::after {
  content: "";
  position: absolute;
  right: -0.45rem;
  bottom: 0.65rem;
  width: 0.55rem;
  height: 0.55rem;
  background: rgba(255, 255, 255, 0.97);
  border-right: 1px solid rgba(230, 223, 174, 0.78);
  border-bottom: 1px solid rgba(230, 223, 174, 0.78);
  transform: rotate(-45deg);
  box-shadow: 2px 2px 4px rgba(30, 3, 4, 0.04);
}

.sir-matt-portal__img {
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: bottom center;
}
.sir-matt-portal__figura--intro .sir-matt-portal__img {
  width: clamp(56px, 14vw, 88px);
  height: clamp(56px, 14vw, 88px);
}
.sir-matt-portal__figura--cierre .sir-matt-portal__img {
  width: clamp(48px, 12vw, 72px);
  height: clamp(48px, 12vw, 72px);
}

.sir-matt-portal__texto {
  margin: 0;
  padding-right: 0.15rem;
  font-size: 0.8125rem;
  line-height: 1.48;
  color: var(--ink-soft);
}
.sir-matt-portal__panel--intro .sir-matt-portal__texto {
  font-size: 0.875rem;
  line-height: 1.52;
}
.sir-matt-portal__panel--cierre .sir-matt-portal__globo {
  box-shadow: 0 3px 14px rgba(30, 3, 4, 0.06);
}
.sir-matt-portal__panel--cierre .sir-matt-portal__texto {
  font-size: 0.8125rem;
}

@media (min-width: 1280px) {
  .sir-matt-portal {
    bottom: 1.15rem;
    right: calc(50px + 1.15rem);
    max-width: 21rem;
  }
  .sir-matt-portal__globo {
    max-width: 16.5rem;
  }
  .sir-matt-portal__figura--intro .sir-matt-portal__img {
    width: 88px;
    height: 88px;
  }
  .sir-matt-portal__figura--cierre .sir-matt-portal__img {
    width: 72px;
    height: 72px;
  }
  .sir-matt-portal__cerrar span {
    transform: scale(0.92) translateX(0.015em);
  }
}

@media (max-width: 479px) {
  .sir-matt-portal__figura--intro .sir-matt-portal__img {
    width: 56px;
    height: 56px;
  }
  .sir-matt-portal__figura--cierre .sir-matt-portal__img {
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sir-matt-portal {
    transition: opacity 0.12s ease;
    transform: none;
  }
  .sir-matt-portal.is-entering,
  .sir-matt-portal.is-hiding {
    transform: none;
  }
  .sir-matt-portal.is-visible {
    transform: none;
  }
  .sir-matt-portal__img {
    transition: none;
  }
}

/* ---------- Tramos del recorrido ---------- */
.recorrido__cuerpo { max-width: 54rem; margin-inline: auto; }

/* El primer tramo abre la experiencia: más aire arriba que el resto. */
.recorrido__bloque--primero { padding-top: clamp(3.5rem, 8vw, 6.5rem); }

.recorrido__paso {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .7rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dorado);
}
.recorrido__paso .ico {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  padding: .35rem;
  border: 1px solid var(--dorado-pale);
  border-radius: 50%;
  color: var(--dorado);
}
.recorrido__paso--centrado { justify-content: center; }

/* ---------- Navegación lineal entre tramos ----------
   Va al pie de cada tramo y es la forma principal de recorrer en mobile.
   El orden sale de la misma lista que el índice de arriba. */
.tramo-nav {
  display: grid;
  gap: .75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
@media (min-width: 640px) {
  .tramo-nav { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

.tramo-nav__link {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  text-decoration: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.tramo-nav__link:hover,
.tramo-nav__link:focus-visible {
  border-color: var(--dorado);
  box-shadow: var(--shadow-sm);
}
/* Si falta el anterior, "Siguiente" no se estira a media fila: va a la derecha. */
.tramo-nav__link--next {
  grid-column: 2;
  justify-content: flex-end;
  text-align: right;
}
@media (max-width: 639px) {
  .tramo-nav__link--next { grid-column: auto; }
}

.tramo-nav__texto { display: grid; gap: .1rem; min-width: 0; }
.tramo-nav__dir {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tramo-nav__titulo {
  font-family: var(--font-head);
  font-size: .9375rem;
  line-height: 1.25;
  color: var(--bordo);
}

.tramo-nav__link .ico {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  padding: 6px;
  border: 1px solid var(--dorado);
  border-radius: 50%;
  color: var(--dorado);
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
/* La misma flecha del sprite, espejada para "Anterior". */
.tramo-nav__link--prev .ico { transform: scaleX(-1); }
.tramo-nav__link:hover .ico,
.tramo-nav__link:focus-visible .ico {
  background: var(--dorado);
  color: #fff;
}
.tramo-nav__link--next:hover .ico,
.tramo-nav__link--next:focus-visible .ico { transform: translateX(2px); }
.tramo-nav__link--prev:hover .ico,
.tramo-nav__link--prev:focus-visible .ico { transform: scaleX(-1) translateX(2px); }

.recorrido__bloque--primero .recorrido__cuerpo > h2 {
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.15;
}
.recorrido__cuerpo > h2 {
  position: relative;
  margin: 0 0 1.25rem;
  padding-bottom: .5em;
}
.recorrido__cuerpo > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: 3px;
  background: var(--dorado);
}
.recorrido__bloque .band { margin-bottom: 2rem; }

.recorrido__detalle { margin-top: 2rem; }
.recorrido__detalle > h3 {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  color: var(--bordo);
}

.recorrido__enlace { margin: 1.75rem 0 0; }

.recorrido__sedes {
  display: grid;
  gap: 1.75rem;
  margin-top: 1.75rem;
}
@media (min-width: 800px) {
  .recorrido__sedes--dos { grid-template-columns: repeat(2, 1fr); }
}
.recorrido__sedes + .note { margin-top: 1.5rem; }

/* Nivel elegido dentro de la grilla de los tres niveles. */
.recorrido__niveles { margin-top: 1.75rem; }
.recorrido__niveles .nivel.is-elegido { outline: 2px solid var(--dorado); outline-offset: 3px; }
.nivel__tag {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .45rem;
  border-radius: var(--radius-btn);
  background: var(--dorado-pale);
  font-family: var(--font-body);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bordo-dark);
  vertical-align: middle;
}

.recorrido__hitos {
  margin: 1.75rem 0 0;
  padding: 0 0 0 1.15rem;
  border-left: 2px solid var(--dorado-pale);
  list-style: none;
  display: grid;
  gap: 1.1rem;
}
.recorrido__hitos li { display: grid; gap: .15rem; }
.recorrido__hitos strong {
  font-family: var(--font-head);
  font-weight: 400;
  color: var(--bordo);
}
.recorrido__hitos span { font-size: .9375rem; color: var(--ink-soft); }

.recorrido__pasos-admision {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: adm;
  display: grid;
  gap: .5rem;
}
.recorrido__pasos-admision li {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  counter-increment: adm;
  font-size: .9375rem;
}
.recorrido__pasos-admision li::before {
  content: counter(adm);
  flex-shrink: 0;
  min-width: 1.35rem;
  font-family: var(--font-head);
  font-size: .8125rem;
  color: var(--dorado);
}

.recorrido__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1.25rem;
  margin-top: 1.75rem;
}

/* ---------- Bloques no elegidos ----------
   Lista editorial en columnas, no una grilla de recuadros: cada entrada se
   separa con un filete dorado fino arriba en lugar de una caja cerrada, y la
   acción usa la flecha del sitio. Sin bordes completos no parece un formulario
   y las alturas desparejas dejan de ser un problema. */
.recorrido__resto { border-top: 1px solid var(--line); }

.recorrido__mas {
  display: grid;
  gap: 2rem clamp(2rem, 4vw, 3.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 720px)  { .recorrido__mas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .recorrido__mas { grid-template-columns: repeat(3, 1fr); } }

.recorrido__mas-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 1.15rem;
  border-top: 2px solid var(--dorado-pale);
}
.recorrido__mas-item h3 {
  margin: 0 0 .55rem;
  font-size: 1.0625rem;
  color: var(--bordo);
}
.recorrido__mas-item p {
  margin: 0 0 1.1rem;
  font-size: .9375rem;
  color: var(--ink-soft);
}
/* La acción queda al pie aunque las bajadas midan distinto. */
.recorrido__mas-item .link-arrow { margin-top: auto; }

.recorrido__mapa {
  margin-top: 2rem;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-color: var(--line);
  box-shadow: none;
}
.recorrido__mapa .btn { margin-top: .35rem; }

/* Campo de deportes — puerta al mapa en /mapa/ */
.section--mapa {
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.mapa-marco {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper-soft);
  box-shadow: var(--shadow-sm);
}

.mapa-marco__titulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  padding: .7rem 1.15rem;
  border-bottom: 2px solid var(--dorado);
  background: var(--bordo);
  color: #fff;
  font-family: var(--font-head);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mapa-marco__titulo .ico {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--dorado-pale);
}

.mapa-marco__acceso {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding: clamp(1.35rem, 3.5vw, 2rem) 1.15rem;
}
.mapa-marco__acceso .note { margin: 0; }

@media (min-width: 768px) {
  .mapa-marco__acceso {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .mapa-marco__acceso .btn { flex-shrink: 0; }
}