/* ==========================================================================
   RSE — Red Salesiana de Escuelas del Perú
   Tokens de marca (Manual de Identidad Salesianos V4, 2026) + estilos del HEADER
   Fuentes (Manual V4, págs. 23-24 y 75): Merriweather (titulares) +
   Titillium Web (textos e interfaces digitales; cuerpo de lectura >= 16px)
   ========================================================================== */

:root {
  /* Paleta institucional — Manual de Identidad V4 (págs. 18-19 y 73) */
  --azul-inst:   #B71C26; /* Azul — Pantone 7691 C */
  --celeste:     #FDCB2B; /* Celeste — Pantone 2995 C */
  --rojo:        #EC3238; /* Rojo de acento (provisional en el manual) — Pantone 186 C */
  --beige:       #FDEBA8; /* Beige (provisional en el manual) — Pantone 468 C */
  --blanco:      #FFFFFF;

  /* Derivados permitidos por el manual (pág. 74: «azules claros y oscuros
     derivados del color corporativo»). No son colores nuevos de marca: son
     el azul corporativo oscurecido, para fondos con foto, estados hover y
     paneles oscuros donde el azul pleno no da contraste. */
  --azul-profundo: #2F2B2C;
  /* Texto pequeño en rojo sobre beige: el rojo oficial rinde 4,15:1 sobre
     #FDEBA8 (menos del 4,5:1 que pide la lectura accesible); esta versión
     apenas más oscura llega a 4,8:1. Solo para etiquetas de texto. */
  --rojo-texto:  #A8131D;

  /* Neutros de apoyo */
  --gris-texto:  #4A4546;
  --gris-claro:  #F7F5F2;
  --gris-borde:  #E8E1D6;

  /* Tipografía — pila segura (manual pág. 75: «en páginas web se definirá
     una pila tipográfica segura») */
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-body:    'Titillium Web', Arial, system-ui, -apple-system, sans-serif;

  /* Tinta y neutros de apoyo (decisión tipográfica del sitio, no de marca:
     el manual no define tinta de texto). Mismos valores que salesianosfs. */
  --tinta:       #231F20;
  --tinta-rgb:   55, 52, 53;    /* azul corporativo oscurecido, para sombras */
  --gris-suave:  #675F60;
  --fondo-suave: #FFF9E6;      /* celeste susurrado */

  /* Header blanco fijo: alto reservado por .site-header-wrap y alto compacto */
  --hdr-logo-w: clamp(190px, calc(190px + (100vw - 1101px) * .35), 320px); /* Decisión 111: logo fluido; a 1440 px ≈ 70 px de alto y tope de 72 px, como salesianosfs */
  --hdr-h: max(100px, calc(var(--hdr-logo-w) / 4.444 + 25px)); /* el logo (640×144) manda cuando es grande */
  --hdr-compact: 58px;
}
@media (max-width: 1100px) { :root { --hdr-h: 60px; --hdr-compact: 60px; } } /* Decisión 111: el menú se pliega a ≤1100 px, igual que salesianosfs */

/* ---- Reset base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--gris-texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font-family: inherit; }

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--azul-inst); line-height: 1.2; }

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

/* ==========================================================================
   FONDOS PLANOS ENTRE SECCIONES (Decisión 119) — reemplaza al antiguo
   «sistema de degradados». salesianosfs.test y rosenthal.test no usan
   degradés en el fondo de sus secciones: cada una es de color plano y se
   alternan blanco (--blanco) y celeste susurrado (--fondo-suave). RSE hace
   lo mismo. Los degradés quedan SOLO donde cumplen una función: el velo
   oscuro sobre fotografías (para leer el texto) y algunas tarjetas.
   Las clases conservan sus nombres históricos para no tocar el PHP:
     .bg-fade-wb / .me-f-wb  → blanco    (antes blanco→beige)
     .bg-fade-bw / .me-f-bw  → celeste suave (antes beige→blanco)
   Regla: entre dos secciones planas consecutivas se alternan; el azul
   profundo (.me-f-oscuro) nunca va pegado a otra banda azul.
   ========================================================================== */
.bg-fade-wb { background: var(--blanco); }
.bg-fade-bw { background: var(--fondo-suave); }

/* Etiqueta pequeña reutilizable para introducir una zona (ej. "Nuestro modelo pastoral") */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rojo-texto);
  margin-bottom: 14px;
}

/* ==========================================================================
   HEADER — blanco, logotipo a color estándar

   Decisión de la RSE (oct. 2026): cabecera blanca y minimalista, hermanada con
   la de salesianosfs.edu.pe (misma composición) y con salesianos.pe. Antes era
   azul con el logo de letras blancas.

   LA COMPOSICIÓN (la misma de salesianosfs):

       logotipo         |  utilidades · redes           |
       (ocupa el alto   |  MENÚ PRINCIPAL               |  DESTACADO
        de las 2 filas) |                               |  (cuelga por debajo)

   `.site-header` es `position: fixed`: así puede COMPACTARSE al bajar (sin fila
   de utilidades, logo menor) sin empujar el contenido. `.site-header-wrap`
   reserva en el flujo el alto de la cabecera completa.

   Colores: sólo tokens de la paleta V4. El celeste #FDCB2B no se usa como
   texto (3,2:1 sobre blanco): únicamente en el subrayado del menú, que es
   una barra, no texto.
   ========================================================================== */
.site-header-wrap { height: var(--hdr-h); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 10px 18px;
  background: var(--azul-inst);
  color: #fff;
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: var(--blanco);
  box-shadow: 0 1px 0 var(--gris-borde);
  transition: box-shadow .25s;
}
.site-header.is-scrolled { box-shadow: 0 4px 18px rgba(var(--tinta-rgb), .16); }

/* Anclas (#contacto, tarjetas de colegio con id…): colchón para que el
   contenido no quede tapado por la cabecera fija al saltar a ellas. */
section[id],
.red-colegio-card[id] { scroll-margin-top: calc(var(--hdr-compact) + 20px); }

.site-header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: clamp(1.5rem, 3vw, 3.5rem);
  row-gap: 8px;                      /* Decisión 111: ritmo vertical de salesianosfs (12 px + 8 px entre filas) */
  padding: 12px clamp(1rem, 2.5vw, 3rem);
}

/* Logotipo — ocupa el alto de las dos filas */
.header-logo { grid-area: 1 / 1 / 3 / 2; display: flex; align-items: center; }
.header-logo img { width: var(--hdr-logo-w); height: auto; transition: width .25s; }

/* Fila superior: utilidades + redes. Sin fondo propio: una banda gris encima
   de la blanca parte la cabecera en dos cajas; la jerarquía la da el tamaño y
   el contraste, no una caja. */
.header-utility {
  grid-area: 1 / 2 / 2 / 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(1rem, 2vw, 2rem);
  min-height: 26px;
}
.utility-links { display: flex; gap: clamp(1rem, 1.8vw, 1.75rem); }
.utility-links a {
  font-size: 12px;
  font-weight: 500;                  /* Decisión 111: peso medio, como salesianosfs */
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gris-suave);
  transition: color .15s;
}
.utility-links a { padding: 0 6px; }
.utility-links { align-items: center; gap: clamp(.6rem, 1.2vw, 1.2rem); }
@media (min-width: 1101px) { .nav-solo-movil { display: none; } } /* «Contacto» en escritorio va en el menú secundario */
.utility-links a:hover,
.utility-links a:focus-visible,
.utility-links a[aria-current="page"] { color: var(--azul-inst); }

.utility-contact { display: flex; align-items: center; gap: 4px; }
.utility-contact a {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--gris-suave);
  transition: color .15s, background .15s;
}
.utility-contact a:hover,
.utility-contact a:focus-visible { color: var(--azul-inst); background: var(--fondo-suave); }
.utility-contact svg { width: 16px; height: 16px; fill: currentColor; }
.utility-contact a.is-pending { opacity: .45; }

/* Menú principal */
.main-nav { grid-area: 2 / 2 / 3 / 3; display: flex; justify-content: flex-end; }
.main-nav > ul { display: flex; align-items: center; gap: clamp(.7rem, 1.4vw, 2rem); } /* 6 ítems con desplegable (Quiénes somos, Decisión 119): gap más compacto */
.main-nav a { display: block; }
.main-nav > ul > li > a {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta);
  padding: 8px 2px;
  white-space: nowrap;
  transition: color .15s;
}
/* Hover al estilo de rosenthal (Decisión 113): el texto cambia de color y asoma
   una línea de 2 px bajo la opción (el borde ya está reservado, transparente,
   así que nada se mueve). La página actual solo se marca con color y peso,
   sin línea (Decisión 110). */
.main-nav > ul > li > a { border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus-visible,
.main-nav > ul > li.is-open > a { color: var(--azul-inst); border-bottom-color: var(--celeste); }
.main-nav > ul > li.is-current > a { color: var(--azul-profundo); font-weight: 700; }
.main-nav > ul > li.is-current > a:hover,
.main-nav > ul > li.is-current > a:focus-visible { border-bottom-color: var(--celeste); }

/* Flechita de los ítems con desplegable */
.has-dropdown > a { padding-right: 16px !important; }
.has-dropdown > a::before {
  content: '';
  position: absolute;
  right: 3px; top: 50%;
  width: 5px; height: 5px;
  margin-top: -4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
}
.has-dropdown:hover > a::before,
.has-dropdown.is-open > a::before { transform: rotate(225deg); margin-top: -1px; }

/* Desplegable */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: 100%;
  left: -14px;
  min-width: 270px;
  background: var(--blanco);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(var(--tinta-rgb), .22);
  padding: 8px 0;
  z-index: 5; /* por encima del destacado, que cuelga a su lado */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .15s, transform .15s, visibility .15s;   /* como rosenthal */
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  color: var(--tinta);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 13.5px;                 /* Decisión 111: más cerca de los 13 px de salesianosfs */
  padding: 8px 18px;
}
.dropdown a { transition: background-color .15s, color .15s; }
.dropdown a:hover,
.dropdown a:focus-visible,
.dropdown a[aria-current="page"] { background: rgba(253,203,43,.1); color: var(--azul-inst); }

.main-nav-mobile-extra { display: none; }

/* El destacado — único elemento con fondo de color en toda la cabecera.
   Cuelga bajo el filete y remata en punta (clip-path). La sombra va como
   filter porque box-shadow dibujaría la del rectángulo previo al recorte. */
.btn-featured {
  --punta: 11px;
  --destacado-fondo: var(--azul-inst);
  grid-area: 2 / 3 / 3 / 4;
  align-self: stretch;
  display: block;
  margin-bottom: -32px;               /* 12 px de relleno inferior + 20 px que asoma (mide igual en salesianosfs) */
  position: relative;
  z-index: 3;
  text-align: center;
  line-height: 1.25;
  background: var(--destacado-fondo);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--punta)), 50% 100%, 0 calc(100% - var(--punta)));
  filter: drop-shadow(0 4px 10px rgba(var(--tinta-rgb), .28));
  transition: background .18s, filter .18s, transform .18s;
}
.btn-featured-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Decisión 111: lados fluidos (≈16 px) y 13 px arriba (8 + 5 de aire), como salesianosfs */
  padding: 13px calc(clamp(1.25rem, 2.2vw, 2rem) - 15px) calc(var(--punta) + 9px);
  color: var(--blanco);
}
.btn-featured:hover,
.btn-featured:focus-visible {
  --destacado-fondo: var(--azul-profundo);
  filter: drop-shadow(0 10px 20px rgba(var(--tinta-rgb), .4));
  transform: translateY(2px);                /* se asienta 2 px, como el destacado de rosenthal */
}
.btn-featured-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--beige); /* 5,4:1 sobre el azul */
}
.btn-featured-title {
  font-size: 19px;                   /* Decisión 118: más grande (antes 17 px) */
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Subtítulo del destacado, como .rsn-destacado-sub de salesianosfs: peso
   normal, tamaño pequeño y algo atenuado, bajo el título en negrita. */
.btn-featured-sub {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .04em;
  opacity: .92;
  text-transform: uppercase;
}

/* Foco visible, coherente en toda la cabecera */
.site-header a:focus-visible,
.nav-toggle:focus-visible { outline: 2px solid var(--azul-inst); outline-offset: 2px; border-radius: 4px; }

/* Botón hamburguesa (móvil) */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--azul-inst); border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- Cabecera compacta (al bajar, solo escritorio): sin fila de utilidades,
   logo menor, relleno corto. No cambia la altura reservada por el wrapper. ---- */
@media (min-width: 1101px) {
  .site-header.is-scrolled .header-utility { display: none; }
  .site-header.is-scrolled .site-header-inner { padding-block: 8px; row-gap: 0; }
  .site-header.is-scrolled .header-logo img { width: clamp(180px, 14vw, 250px); }
  .site-header.is-scrolled .btn-featured { margin-bottom: -20px; }
  .site-header.is-scrolled .btn-featured-face { padding-top: 8px; }
}
/* Escritorio estrecho: logo algo menor para que el menú no se apriete */
@media (min-width: 1101px) and (max-width: 1420px) {
  /* Decisión 119: con «Quiénes somos» el menú tiene 6 ítems; en laptops se compacta para que quepa junto al destacado */
  .main-nav > ul { gap: clamp(.6rem, 1vw, .9rem); }
  .main-nav > ul > li > a { font-size: 12px; letter-spacing: .035em; }
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
  .site-header-inner {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    column-gap: 10px;
    padding: 8px 12px;
  }
  .header-logo { grid-area: 1 / 1 / 2 / 2; justify-self: start; min-width: 0; }
  .header-logo img { width: auto; height: 40px; }
  .header-utility { display: none; } /* en móvil vive dentro del desplegable */

  /* El destacado conserva su forma en móvil (Decisión 115, como salesianosfs):
     una lengüeta con punta que cuelga bajo la cabecera, a la derecha, justo
     debajo del botón del menú. Con el menú abierto se oculta para no tapar nada. */
  .site-header-inner { position: relative; }
  .btn-featured {
    --punta: 9px;
    position: absolute;
    right: 12px; top: 100%;
    grid-area: auto;
    align-self: auto;
    margin: 0;
    max-width: none; min-width: 0;
    filter: drop-shadow(0 4px 8px rgba(var(--tinta-rgb), .28));
  }
  .btn-featured:hover, .btn-featured:focus-visible { transform: translateY(2px); }
  .btn-featured-face { padding: 8px 16px calc(var(--punta) + 7px); gap: 1px; }
  .btn-featured-label { font-size: 10px; }
  .btn-featured-title { font-size: 15px; max-width: 100%; }
  .btn-featured-sub { font-size: 11px; }
  .site-header:has(.main-nav.is-open) .btn-featured { visibility: hidden; }

  .nav-toggle { display: flex; grid-area: 1 / 2 / 2 / 3; }

  /* Desplegable a pantalla completa, blanco con 5 % de transparencia */
  .main-nav {
    position: fixed;
    top: var(--hdr-h);
    left: 0; right: 0; bottom: 0;
    display: block;
    background: var(--blanco);
    padding: 16px 20px 28px;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .25s, visibility .25s;
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); visibility: visible; }
  .main-nav > ul { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .main-nav > ul > li { width: 100%; border-bottom: 1px solid var(--gris-borde); }
  .main-nav > ul > li > a { padding: 14px 4px; font-size: 14px; }
  .main-nav > ul > li > a::after { display: none; }
  .main-nav > ul > li > a:hover, .main-nav > ul > li > a:focus-visible, .main-nav > ul > li.is-current > a:hover { border-bottom-color: transparent; }
  .has-dropdown > a::before { right: 8px; margin-top: -4px; }

  .dropdown {
    position: static;
    box-shadow: none;
    border: 0;
    background: var(--fondo-suave);
    opacity: 1; visibility: visible; transform: none;
    display: none;
    border-radius: 6px;
    padding: 4px 0;
    margin: 0 0 10px;
  }
  .dropdown a { padding: 10px 16px; }
  .has-dropdown.is-open .dropdown { display: block; }
  .has-dropdown:hover:not(.is-open) .dropdown { display: none; }

  /* Menú secundario + contacto de la RSE al final del desplegable */
  .main-nav-mobile-extra { display: block; width: 100%; }
  .main-nav-divider { height: 1px; background: var(--gris-borde); margin: 14px 4px 6px; }
  .main-nav-secondary a {
    display: block;
    padding: 12px 4px;
    color: var(--gris-suave);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12.5px;
    font-weight: 600;
  }
  .main-nav-secondary a:hover { color: var(--azul-inst); }

  .main-nav-contact { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--gris-borde); }
  .main-nav-contact-list { display: flex; flex-direction: column; gap: 10px; }
  .main-nav-contact-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--gris-texto); }
  .main-nav-contact-list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; fill: var(--azul-inst); }
  .main-nav-contact-list a { display: inline; color: var(--azul-inst); font-weight: 600; text-transform: none; letter-spacing: normal; padding: 0; }
  .main-nav-social { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
  .main-nav-social a { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--azul-inst); background: var(--fondo-suave); transition: background .2s, color .2s; }
  .main-nav-social a:hover { background: var(--azul-inst); color: #fff; }
  .main-nav-social svg { width: 18px; height: 18px; fill: currentColor; }
  .main-nav-social a.is-pending { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}


/* ==========================================================================
   HERO — carrusel de las últimas noticias + barra de cifras  (Decisión 118)
   Hermanado con `.rsn-portada` de salesianosfs.edu.pe / rosenthal: scroll-snap
   del navegador (sin JS sigue siendo una tira desplazable), VELO en degradado
   que entra tras mostrarse la foto, acercamiento lento, titular enlazado, chapa
   con la fecha y tira de miniaturas (6 visibles en pantalla grande).
   Lo genera inc/hero.php; el comportamiento está en js/main.js («Portada»).
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--azul-profundo);
}

.rse-portada {
  /* Los tiempos, en orden: primero la foto limpia, luego el velo, y solo
     entonces el acercamiento (si arrancaran a la vez competirían). */
  --portada-espera: 1s;
  --portada-barrido: 1.125s;
  --portada-zoom: var(--portada-duracion, 7s);
  /* Toda la pantalla menos la cabecera y la barra de cifras (≈ 76 px). */
  --portada-alto: max(460px, calc(100vh - var(--hdr-h) - 76px));
  --portada-visibles: 2;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: var(--portada-alto);
  background: var(--azul-profundo);
  overflow: hidden;            /* el acercamiento no debe asomar por los lados */
}
@supports (height: 100svh) {
  .rse-portada { --portada-alto: max(460px, calc(100svh - var(--hdr-h) - 76px)); }
}
@media (min-width: 700px)  { .rse-portada { --portada-visibles: 3; } }
@media (min-width: 1000px) { .rse-portada { --portada-visibles: 4; } }
@media (min-width: 1280px) { .rse-portada { --portada-visibles: 5; } }
@media (min-width: 1600px) { .rse-portada { --portada-visibles: 6; } }

.rse-portada-pista {
  flex: 1 1 auto;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rse-portada-pista::-webkit-scrollbar { display: none; }
.rse-portada-lamina {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: var(--portada-alto);
  display: grid;
  isolation: isolate;
  overflow: hidden;
}
.rse-portada-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  z-index: -2;
  /* Las caras de las fotos escolares están en el tercio superior: recortar
     desde el centro cortaría cabezas. */
  object-position: center 30%;
  transform-origin: center 30%;
}
@keyframes portadaZoom { from { transform: scale(1); } to { transform: scale(1.06); } }
.rse-portada-lamina.es-actual .rse-portada-foto {
  animation: portadaZoom var(--portada-zoom) linear calc(var(--portada-espera) + var(--portada-barrido)) both;
}

/* EL VELO: no cubre la lámina entera, solo el bloque del texto; de 0 % arriba a
   50 % abajo, en rampa continua. Va en un pseudoelemento para poder recortarlo
   en el barrido sin llevarse el texto. */
.rse-portada-texto {
  position: relative;
  align-self: end;
  width: 100%;
  padding: 50px clamp(1rem, 4vw, 3rem) calc(76px + 34px);
  color: var(--blanco);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.rse-portada-texto::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(var(--tinta-rgb), 0) 0%, rgba(var(--tinta-rgb), .56) 100%);
}
/* EL BARRIDO: el velo entra de derecha a izquierda cuando la lámina se hace
   visible, tras dejar ver la foto limpia. */
@keyframes portadaBarrido { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
.rse-portada-lamina.es-actual .rse-portada-texto::before {
  animation: portadaBarrido var(--portada-barrido) cubic-bezier(.22, .61, .36, 1) var(--portada-espera) both;
}
.rse-portada-texto > * { max-width: 900px; width: 100%; text-align: center; }
.rse-portada-texto > .rse-portada-fecha { width: auto; }
.rse-portada-titulo {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 42px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--blanco);
  text-wrap: balance;
}
.rse-portada-titulo a, .rse-portada-titulo span {
  display: block;
  color: var(--blanco);
  /* Una sombra cerrada que perfila la letra y otra abierta que oscurece la
     zona: con el velo al 50 % ellas sostienen el titular sobre manchas claras. */
  text-shadow: 0 1px 3px rgba(var(--tinta-rgb), .85), 0 4px 26px rgba(var(--tinta-rgb), .75);
  transition: color .15s ease;
}
.rse-portada-titulo a:hover, .rse-portada-titulo a:focus-visible { color: var(--beige); }
/* La fecha, en beige sobre su propia chapa (sin ella el beige suelto no aguanta
   sobre zonas claras de la foto). */
.rse-portada-fecha {
  display: inline-block;
  margin: 16px 0 0;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--beige);
  background: rgba(var(--tinta-rgb), .70);
  border-radius: 100px;
}

/* La tira de miniaturas: ventana de N completas; al avanzar se corre de una en una. */
.rse-portada-tira {
  position: absolute;
  left: clamp(.5rem, 2vw, 3rem);
  right: clamp(.5rem, 2vw, 3rem);
  bottom: 0;
  z-index: 2;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.rse-portada-tira::-webkit-scrollbar { display: none; }
.rse-portada-mini:first-child { margin-left: auto; }
.rse-portada-mini:last-child  { margin-right: auto; }
.rse-portada-mini {
  flex: 0 0 auto;
  width: calc(100% / var(--portada-visibles, 4));
  scroll-snap-align: start;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: rgba(var(--tinta-rgb), .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 0;
  border-top: 3px solid transparent;
  color: var(--blanco);
  text-align: left;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.rse-portada-mini:hover, .rse-portada-mini:focus-visible { background: rgba(var(--tinta-rgb), .78); }
.rse-portada-mini[aria-selected="true"] { background: rgba(var(--tinta-rgb), .88); border-top-color: var(--beige); }
.rse-portada-mini-foto { flex: 0 0 auto; width: 56px; height: 42px; object-fit: cover; border-radius: 4px; }
.rse-portada-mini-titulo {
  font-size: 12px;
  line-height: 1.35;
  font-family: var(--font-body);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Flechas y pausa (44 px: área táctil mínima). */
.rse-portada-flecha, .rse-portada-pausa {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(var(--tinta-rgb), .45);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  color: var(--blanco);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.rse-portada-flecha:hover, .rse-portada-pausa:hover,
.rse-portada-flecha:focus-visible, .rse-portada-pausa:focus-visible { background: rgba(var(--tinta-rgb), .8); }
.rse-portada-flecha { top: calc(50% - 46px); transform: translateY(-50%); }
.rse-portada-flecha--antes   { left: clamp(.5rem, 2vw, 2rem); }
.rse-portada-flecha--despues { right: clamp(.5rem, 2vw, 2rem); }
.rse-portada-pausa { top: 16px; right: clamp(.5rem, 2vw, 2rem); width: 38px; height: 38px; }
.rse-portada-pausa-icono { width: 11px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.rse-portada--pausada .rse-portada-pausa-icono { width: 0; height: 0; border-left: 11px solid currentColor; border-right: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }

@media (max-width: 780px) {
  .rse-portada-texto { padding: 40px 16px calc(76px + 24px); }
  .rse-portada-flecha { display: none; }   /* ya se arrastra con el dedo */
}
@media (prefers-reduced-motion: reduce) {
  .rse-portada-lamina.es-actual .rse-portada-foto,
  .rse-portada-lamina.es-actual .rse-portada-texto::before { animation: none; }
  .rse-portada-pista { scroll-behavior: auto; }
}

.hero-stats {
  position: relative;
  z-index: 2;
  /* Decisión 127: el azul corporativo pleno (antes azul profundo, casi igual al velo de la tira de
     miniaturas) + un filete celeste que separa con claridad la foto/tira de la franja de cifras. */
  background: var(--azul-inst);
  border-top: 4px solid var(--celeste);
}
.hero-stats-grid { display: flex; flex-wrap: wrap; }
.hero-stat {
  flex: 1 1 140px;
  text-align: center;
  padding: 20px 12px;
  border-left: 1px solid rgba(255,255,255,.15);
}
.hero-stat:first-child { border-left: none; }
.hero-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 900;
  color: var(--beige);
  line-height: 1;
  font-variant-numeric: tabular-nums; /* que los dígitos no «bailen» mientras suben */
}
.hero-stat-label {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: rgba(255,255,255,.85);
  font-weight: 600;
}

@media (max-width: 767px) {
  .hero-stat { flex: 1 1 50%; border-left: none; border-top: 1px solid rgba(255,255,255,.15); }
  .hero-stat:nth-child(-n+1) { border-top: none; }
  .hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.15); }
}

/* ==========================================================================
   EDUCAR CON CORAZÓN — retrato de Don Bosco + cita, seguido (sin espacio)
   de la franja de Valores RSE, simulando que la franja corta el torso.
   ========================================================================== */
.educar-corazon {
  position: relative;
  background: var(--blanco);
}
.educar-corazon-inner {
  display: flex;
  align-items: flex-end;
  gap: 56px;
  padding-top: 72px;
}
.educar-corazon-media {
  flex: 0 0 40%;
  max-width: 40%;
  line-height: 0; /* evita hueco bajo la imagen */
}
.educar-corazon-img { width: 100%; height: auto; display: block; }

.educar-corazon-text { flex: 1; min-width: 0; padding-bottom: 52px; }
.educar-corazon-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(24px, 2.6vw, 32px);
  color: var(--azul-inst);
}
.educar-corazon-divider {
  display: block;
  width: 54px;
  height: 3px;
  background: var(--rojo);
  margin: 18px 0 26px;
}
.educar-corazon-lead {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.6;
  color: var(--azul-inst);
  margin-bottom: 22px;
  text-align: justify;
}
.educar-corazon-quote p {
  font-style: italic;
  font-size: 16px;
  line-height: 1.75;
  color: var(--gris-texto);
  margin-bottom: 12px;
  text-align: justify;
}
.educar-corazon-quote footer cite {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: var(--azul-inst);
  font-size: 14px;
}
.educar-corazon-quote footer span {
  display: block;
  font-size: 12.5px;
  color: var(--gris-texto);
  margin-top: 2px;
}

/* -- Franja de Valores RSE: pegada al retrato, mismo tono institucional -- */
.valores-rse { background: var(--azul-inst); }
.valores-rse-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 46px 20px;
}
.valor-item {
  flex: 1 1 260px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.valor-icon { width: 52px; height: 52px; flex-shrink: 0; opacity: .95; }
.valor-title {
  font-family: var(--font-body);
  color: var(--beige);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.valor-copy p {
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.85);
  text-align: justify;
}

.valores-cta { text-align: center; padding: 0 20px 46px; }
.valor-link-subtle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .02em;
  color: var(--beige);
  text-decoration: none;
  border-bottom: 1px solid rgba(253,230,140,.45);
  padding-bottom: 3px;
  transition: border-color .2s ease, opacity .2s ease;
}
.valor-link-subtle:hover { border-color: var(--beige); opacity: .85; }
.valor-link-subtle span { transition: transform .2s ease; }
.valor-link-subtle:hover span { transform: translateX(3px); }

/* Versión genérica de .valor-link-subtle (mismo formato: texto + flecha,
   sin fondo sólido) para usar como CTA discreto "Conoce más" al cierre de
   cualquier zona — pedido explícito de Rodo para unificar el formato en
   Nuestra Red, Criterio Oratoriano, Recursos Educativos e Hitos
   Educativos. Dos variantes de color según el fondo de la zona: */
.link-subtle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: .02em;
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid;
  transition: border-color .2s ease, opacity .2s ease;
}
.link-subtle:hover { opacity: .85; }
.link-subtle span { transition: transform .2s ease; }
.link-subtle:hover span { transform: translateX(3px); }

/* Para fondos claros (blanco/crema) — Nuestra Red, Criterio Oratoriano,
   Recursos Educativos. */
.link-subtle-dark { color: var(--azul-inst); border-bottom-color: rgba(55,52,53,.35); }
.link-subtle-dark:hover { border-color: var(--azul-inst); }

/* Para fondos oscuros o con foto — Hitos Educativos (mismos colores que
   .valor-link-subtle, que usa esta misma paleta sobre el azul de Valores). */
.link-subtle-light { color: var(--beige); border-bottom-color: rgba(253,230,140,.45); }
.link-subtle-light:hover { border-color: var(--beige); }

@media (max-width: 900px) {
  .educar-corazon-inner { flex-direction: column; align-items: center; gap: 0; padding-top: 40px; }
  .educar-corazon-media { flex: 0 0 auto; max-width: 78%; }
  .educar-corazon-text { padding: 28px 4px 40px; text-align: center; }
  /* En móvil el bloque se apila centrado (título, cita y firma incluidos);
     el texto justificado (pedido de Rodo) se mantiene desde tablet/escritorio
     hacia arriba, donde el párrafo tiene ancho suficiente para verse bien. */
  .educar-corazon-lead, .educar-corazon-quote p { text-align: center; }
  .educar-corazon-divider { margin-left: auto; margin-right: auto; }
  .valores-rse-grid { padding: 36px 20px; gap: 30px; }
  .valor-item { flex: 1 1 100%; }
}

/* ==========================================================================
   VIDEO INSTITUCIONAL — banda a todo el ancho (misma técnica que el
   index.html de Admisión 2027 del Salesiano Rosenthal que envió Rodo):
   iframe de YouTube escalado para cubrir siempre la franja, sin barras
   negras, autoplay silencioso en loop y sin controles.
   ========================================================================== */
#video-institucional {
  position: relative;
  width: 100%;
  height: 900px;
  overflow: hidden;
  background: var(--azul-inst);
}
#video-institucional iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: calc(100vw * 9 / 16);
  min-width: calc(900px * 16 / 9);
  min-height: 900px;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none; /* video puramente ambiental, sin interacción */
}
#video-institucional::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(55,52,53,.15);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 640px) {
  #video-institucional { height: 260px; }
}

/* ==========================================================================
   CRITERIO ORATORIANO — 4 ámbitos (Patio, Escuela, Casa, Parroquia) en
   grid de tarjetas, cada una con ícono SVG propio y color de acento de
   la paleta institucional. Diseño propio (sin modelo de referencia).
   ========================================================================== */
.oratoriano { background: var(--blanco); padding: 92px 0 100px; }

.oratoriano-intro { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.oratoriano-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--azul-inst);
  margin-bottom: 16px;
}
.oratoriano-lead { font-size: 16px; line-height: 1.7; color: var(--gris-texto); }

.oratoriano-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 28px;
}
@media (min-width: 700px) {
  .oratoriano-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.oratoriano-card {
  background: var(--gris-claro);
  border-radius: 10px;
  padding: 38px 34px;
  border-top: 4px solid var(--card-accent, var(--azul-inst));
  transition: transform .2s ease, box-shadow .2s ease;
}
.oratoriano-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(55,52,53,.12);
}

.oratoriano-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--card-accent, var(--azul-inst));
  color: var(--card-icon-color, #fff);
  margin-bottom: 22px;
}
.oratoriano-icon svg { width: 26px; height: 26px; }

.oratoriano-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--azul-inst);
  margin-bottom: 10px;
}
.oratoriano-card p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gris-texto);
  text-align: justify;
}

.oratoriano-cta { text-align: center; margin-top: 48px; }

@media (max-width: 480px) {
  .oratoriano { padding: 64px 0 72px; }
  .oratoriano-card { padding: 30px 26px; }
}

/* ============================================================
   ZONA — NUESTROS VALORES (Fe, Amor, Ciudadanía)
   Mismo patrón visual que Criterio Oratoriano, pero en grid de 3
   columnas en vez de 2x2 (son 3 valores, no 4 ámbitos).
   ============================================================ */
.nuestros-valores { background: var(--blanco); padding: 92px 0 100px; } /* reinicia en blanco: justo antes va Misión y Visión, una zona con foto, no plana */

.nuestros-valores-intro { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.nuestros-valores-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--azul-inst);
  margin-bottom: 16px;
}
.nuestros-valores-lead { font-size: 16px; line-height: 1.7; color: var(--gris-texto); }

.nuestros-valores-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 28px;
}
@media (min-width: 700px) {
  .nuestros-valores-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.nuestros-valores-card {
  background: var(--gris-claro);
  border-radius: 10px;
  padding: 38px 34px;
  border-top: 4px solid var(--card-accent, var(--azul-inst));
  transition: transform .2s ease, box-shadow .2s ease;
}
.nuestros-valores-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(55,52,53,.12);
}

.nuestros-valores-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--card-accent, var(--azul-inst));
  color: var(--card-icon-color, #fff);
  margin-bottom: 22px;
}
.nuestros-valores-icon svg { width: 26px; height: 26px; }

.nuestros-valores-card h3 {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--azul-inst);
  margin-bottom: 10px;
}
.nuestros-valores-card p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gris-texto);
  text-align: justify;
}

.nuestros-valores-cta { text-align: center; margin-top: 48px; }

@media (max-width: 480px) {
  .nuestros-valores { padding: 64px 0 72px; }
  .nuestros-valores-card { padding: 30px 26px; }
}

/* ============================================================
   ZONA — NUESTRA RED (grid de colegios)
   ============================================================ */
.red-colegios {
  background: var(--fondo-suave); /* invertido respecto a Nuestros Valores, justo arriba, para que el corte entre ambas no se note */
  padding: 80px 0 90px;
}
.red-colegios-intro { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.red-colegios-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--azul-inst);
  margin-bottom: 16px;
}
.red-colegios-lead { font-size: 16px; line-height: 1.7; color: var(--gris-texto); }

.red-colegios-grid {
  /* Flexbox + justify-content:center (en vez de CSS Grid) a propósito:
     así, si la última fila no completa el máximo de columnas (ej. 10
     tarjetas en filas de 3 deja 1 sola en la última fila), esa fila
     queda centrada en vez de pegada a la izquierda con espacio vacío
     a la derecha — pedido explícito de Rodo. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.red-colegio-card {
  display: block;
  flex: 1 1 100%;
  max-width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: var(--blanco);
  box-shadow: 0 6px 18px rgba(55,52,53,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
@media (min-width: 620px) {
  .red-colegio-card { flex-basis: calc(50% - 13px); max-width: calc(50% - 13px); }
}
@media (min-width: 980px) {
  .red-colegio-card { flex-basis: calc(33.333% - 17.334px); max-width: calc(33.333% - 17.334px); }
}
.red-colegio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(55,52,53,.16);
}
.red-colegio-card:hover .red-colegio-name { color: var(--azul-profundo); }

.red-colegio-photo {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center top;
}

.red-colegio-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 20px 24px;
  text-align: center;
}
.red-colegio-name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--azul-inst);
  line-height: 1.3;
}
.red-colegios-cta { text-align: center; margin-top: 48px; }
.btn-outline {
  display: inline-block;
  border: 2px solid var(--azul-inst);
  color: var(--azul-inst);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 13px 32px;
  border-radius: 6px;
  transition: background .2s ease, color .2s ease;
}
.btn-outline:hover { background: var(--azul-inst); color: #fff; }

/* ============================================================
   ZONA — MISIÓN Y VISIÓN
   ============================================================ */
.mision-vision {
  position: relative;
  overflow: hidden;
  background: var(--azul-inst); /* color de respaldo mientras carga la foto */
  padding: 120px 0 130px;
  /* Alto proporcional al ancho (≈16:9, el ratio real de slide-basilica.jpg)
     para que la foto llene el bloque sin dejar franjas de color de sobra
     arriba/abajo, con un piso y un techo razonables. */
  min-height: clamp(480px, 55vw, 880px);
}
/* Capa de foto — desplazada por JS (main.js) para el efecto parallax.
   Sin blur (foto natural, a pedido de Rodo). `background-size: 100% auto`
   asegura que se vea SIEMPRE el ancho completo de la foto (nunca se recorta
   a los costados). El `inset` vertical le da a la capa más alto que la
   sección para que el recorrido del parallax nunca deje ver un borde;
   `background-position: center` (no "top") centra el alto de la foto
   dentro de esa capa más alta, así en reposo la foto llena justo el alto
   visible de la sección — ver cuentas en el comentario del proyecto.
   `inset` subido de -25% a -35% junto con MV_RANGE en main.js (pedido de
   Rodo de aumentar aún más el desplazamiento) — más colchón vertical para
   que el recorrido más largo del parallax siga sin dejar ver un borde. */
.mv-bg {
  position: absolute;
  inset: -35% 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  will-change: transform;
}
/* Velo de marca, sutil, sobre la foto — solo para que el título/eyebrow
   sigan siendo legibles; la foto en sí queda natural (sin oscurecer fuerte). */
.mision-vision::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47,43,44,.28) 0%, rgba(47,43,44,.52) 100%);
}
.mision-vision .container { position: relative; z-index: 1; }

.mision-vision-intro { max-width: 680px; margin: 0 auto 48px; text-align: center; }
.mision-vision .eyebrow { color: var(--beige); text-shadow: 0 2px 10px rgba(0,0,0,.5); } /* sobre foto el rojo se pierde; beige = color del manual para texto sobre azul/foto */
.mision-vision-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--blanco);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
}

.mv-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 28px;
}
@media (min-width: 800px) {
  .mv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.mv-card {
  border-radius: 14px;
  padding: 48px 42px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 24px 48px rgba(0,0,0,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.mv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px rgba(0,0,0,.45);
}
.mv-mision { background: var(--azul-profundo); }
.mv-vision { background: #007AB5; } /* plano, como .mv-mision; este tono da 4,7:1 con texto blanco (el celeste de marca solo da 3,2:1) */

.mv-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  margin-bottom: 24px;
}
.mv-icon svg { width: 28px; height: 28px; }

.mv-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 14px;
}
.mv-card p { font-size: 16px; line-height: 1.8; opacity: .96; text-align: justify; }

@media (max-width: 480px) {
  .mision-vision { padding: 90px 0 100px; }
  .mv-card { padding: 36px 28px; }
}

/* ============================================================
   ZONA — RECURSOS EDUCATIVOS DE LA ESCUELA SALESIANA (grid 3+2)
   ============================================================ */
.recursos {
  background: var(--blanco); /* invertido respecto a Nuestra Red, justo arriba */
  padding: 88px 0 96px;
}
.recursos-intro { max-width: 700px; margin: 0 auto 52px; text-align: center; }
.recursos-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--azul-inst);
  margin-bottom: 16px;
}
.recursos-lead { font-size: 16px; line-height: 1.7; color: var(--gris-texto); }

.recursos-grid {
  /* Misma técnica que "Nuestra Red": Flexbox + justify-content:center
     para que la última fila (2 tarjetas, ya que son 5 en filas de 3)
     quede centrada en vez de pegada a la izquierda. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.recurso-card {
  flex: 1 1 100%;
  max-width: 100%;
  background: var(--blanco);
  border-radius: 10px;
  padding: 36px 32px;
  border-top: 4px solid var(--card-accent, var(--azul-inst));
  box-shadow: 0 6px 18px rgba(55,52,53,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 620px) {
  .recurso-card { flex-basis: calc(50% - 13px); max-width: calc(50% - 13px); }
}
@media (min-width: 980px) {
  .recurso-card { flex-basis: calc(33.333% - 17.334px); max-width: calc(33.333% - 17.334px); }
}
.recurso-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 34px rgba(55,52,53,.14);
}

.recurso-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--card-accent, var(--azul-inst));
  color: var(--card-icon-color, #fff);
  margin-bottom: 22px;
}
.recurso-icon svg { width: 26px; height: 26px; }

.recurso-card h3 {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.3;
  color: var(--azul-inst);
  margin-bottom: 10px;
  min-height: 2.6em;
}
.recurso-card p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gris-texto);
  text-align: justify;
}

.recursos-cta { text-align: center; margin-top: 48px; }

@media (max-width: 480px) {
  .recursos { padding: 60px 0 68px; }
  .recurso-card { padding: 30px 26px; }
  .recurso-card h3 { min-height: 0; }
}

/* ============================================================
   ZONA — HITOS EDUCATIVOS SALESIANOS (grid 2x2, sobre foto de fondo)
   "Modo distinto" pedido por Rodo: a diferencia de las zonas de grid
   anteriores (fondo blanco/crema liso), esta va sobre una foto a todo
   el ancho + velo de marca para legibilidad del título, con efecto
   PARALLAX notorio (pedido explícito de Rodo — ver HITOS_RANGE en
   js/main.js). Tarjetas: mismo componente que Criterio Oratoriano
   (ícono + acento + hover/sombra), en blanco opaco para contrastar bien
   contra la foto.
   ============================================================ */
.hitos {
  position: relative;
  overflow: hidden;
  background: var(--azul-inst); /* respaldo mientras carga la foto */
  padding: 92px 0 100px;
}
/* Capa de foto — desplazada por JS (main.js) para el parallax, igual
   patrón que `.mv-bg` en Misión y Visión. Esta foto ya viene en 1920×1080
   (16:9, igual que las del hero), así que `background-size: cover` es
   suficiente — a diferencia de `.mv-bg`, no hace falta "100% auto" para
   evitar recortes laterales. El `inset` vertical le da a la capa más
   alto que la sección para que el recorrido del parallax nunca deje ver
   un borde vacío. */
.hitos-bg {
  position: absolute;
  inset: -22% 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
}
.hitos::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47,43,44,.62) 0%, rgba(47,43,44,.74) 100%);
}
.hitos .container { position: relative; z-index: 1; }

.hitos-intro { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.hitos .eyebrow { color: var(--beige); text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.hitos-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--blanco);
  text-shadow: 0 2px 14px rgba(0,0,0,.5);
  margin-bottom: 16px;
}
.hitos-lead { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.92); text-shadow: 0 1px 8px rgba(0,0,0,.4); }

.hitos-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 28px;
}
@media (min-width: 700px) {
  .hitos-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.hitos-card {
  background: var(--blanco);
  border-radius: 10px;
  padding: 38px 34px;
  border-top: 4px solid var(--card-accent, var(--azul-inst));
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.hitos-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 48px rgba(0,0,0,.36);
}

.hitos-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--card-accent, var(--azul-inst));
  color: var(--card-icon-color, #fff);
  margin-bottom: 22px;
}
.hitos-icon svg { width: 26px; height: 26px; }

.hitos-cta { text-align: center; margin-top: 48px; }
/* Variante clara de .btn-outline (que usa azul institucional, pensado
   para fondos blancos/crema) — para botones sobre fondos oscuros o con
   foto, como esta zona. Reutilizable en cualquier otra zona similar. */
.btn-outline-light {
  display: inline-block;
  border: 2px solid rgba(255,255,255,.85);
  color: var(--blanco);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  text-decoration: none;
  padding: 13px 32px;
  border-radius: 6px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-outline-light:hover { background: var(--blanco); color: var(--azul-inst); border-color: var(--blanco); }

.hitos-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.3;
  color: var(--azul-inst);
  margin-bottom: 10px;
}
.hitos-card p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gris-texto);
  text-align: justify;
}

@media (max-width: 480px) {
  .hitos { padding: 64px 0 72px; }
  .hitos-card { padding: 30px 26px; }
}

/* ============================================================
   FRANJA DE CONTACTO — formulario + mapa, encima del resto del
   footer (pedido explícito de Rodo). Fondo blanco para contrastar
   con el azul institucional del footer, justo debajo.
   ============================================================ */
.footer-contacto { background: var(--blanco); padding: 84px 0 90px; }
.footer-contacto-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr);
  gap: 52px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .footer-contacto-grid { grid-template-columns: minmax(0,1fr); gap: 40px; }
}

.footer-contacto-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  color: var(--azul-inst);
  margin-bottom: 14px;
}
.footer-contacto-lead { color: var(--gris-texto); font-size: 16px; line-height: 1.7; margin-bottom: 28px; max-width: 480px; }

.form-aviso { padding: 14px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 22px; }
.form-aviso-ok { background: #E3F6E8; color: #1E7A3C; border: 1px solid #BEE6C9; }
.form-aviso-error { background: #FCE8E8; color: var(--rojo-texto); border: 1px solid #F5C2C2; }
/* Hueco del aviso del formulario de contacto (encima del botón); vacío no ocupa espacio. */
.form-aviso-slot:empty { display: none; }
.form-aviso-slot .form-aviso { margin: 4px 0 16px; }
.contacto-form button[aria-busy="true"] { cursor: progress; opacity: .85; }

.contacto-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--azul-inst);
}
.form-opcional { font-weight: 400; color: var(--gris-texto); }
.contacto-form input[type="text"],
.contacto-form input[type="email"],
.contacto-form input[type="tel"],
.contacto-form textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--gris-texto);
  padding: 12px 14px;
  border: 1px solid #D8DEE8;
  border-radius: 8px;
  background: var(--gris-claro);
  transition: border-color .2s ease, background .2s ease;
}
.contacto-form input:focus,
.contacto-form textarea:focus {
  outline: none;
  border-color: var(--celeste);
  background: var(--blanco);
}
.contacto-form textarea { resize: vertical; min-height: 110px; }

/* Honeypot anti-spam: oculto visualmente, pero presente para bots que
   completan todos los campos que encuentran (a diferencia de display:none,
   que algunos bots detectan y evitan). */
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.btn-solid {
  display: inline-block;
  align-self: flex-start;
  background: var(--azul-inst);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
  padding: 14px 34px;
  border-radius: 6px;
  transition: background .2s ease, transform .2s ease;
}
.btn-solid:hover { background: var(--azul-profundo); transform: translateY(-2px); }

.footer-contacto-mapa-col { min-height: 380px; }
.footer-contacto-mapa-frame {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(55,52,53,.18);
}
.footer-contacto-mapa-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

@media (max-width: 900px) {
  .footer-contacto-mapa-col, .footer-contacto-mapa-frame { min-height: 320px; }
}
@media (max-width: 480px) {
  .footer-contacto { padding: 60px 0 68px; }
}

/* ============================================================
   FOOTER — 5 columnas (institución, Mapa Web, En el Perú, En el
   Mundo, Boletín Salesiano). Presentación de los enlaces (lista
   vertical, uno por línea, alineados a la izquierda, sin viñetas,
   buen espaciado) según el modelo que envió Rodo; colores/tipografía
   propios de RSE.

   `.footer-grid` y `.footer-bottom-inner` llenan todo el ancho de la
   pantalla (pedido explícito de Rodo) — a diferencia del resto del
   sitio, NO usan `.container` (que limita a 1280px), sino su propio
   padding lateral aquí abajo, que se reduce en los breakpoints
   angostos igual que hacía `.container`. */
.site-footer { background: var(--azul-inst); color: #fff; }

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.2fr);
  gap: 40px;
  padding: 72px 48px 56px; /* padding-top antes vivía en .site-footer; movido aquí al agregar la franja de contacto arriba */
  width: 100%;
}
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); row-gap: 48px; padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: minmax(0,1fr); padding-left: 20px; padding-right: 20px; }
}

/* -- Columna 2 (nueva): Mapa Web — menú principal + menú secundario de
   la navegación del sitio, mismo estilo de enlace que las columnas de
   "En el Perú"/"En el Mundo" (.footer-links). Línea sutil entre ambos
   menús, mismo lenguaje visual que la línea del desplegable móvil del
   header (Decisión 100). */
.footer-mapaweb-divider {
  height: 0; /* sin línea (Decisión 110): solo separa los dos grupos con espacio */
  margin: 4px 0 18px;
}

.footer-col-title {
  font-family: var(--font-body);
  color: var(--beige);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 26px;
}

/* -- Columna 1: institución -- */
/* Logo cuadrado (img/logo-rse-cuadrado.png) SIN tarjetita: el archivo
   tiene fondo transparente de verdad (verificado por canal alfa) y el
   único blanco que trae es un keyline delgado entre la figura azul y el
   remolino beige (~3% del arte), así que se ve limpio directo sobre el
   azul del footer — no hace falta el fondo blanco que se usaba antes. */
/* Siempre al 90% del ancho de columna, en todos los tamaños de pantalla
   (pedido explícito de Rodo — antes variaba: 100% escritorio/90% tablet/
   80% móvil). */
.footer-logo {
  display: block;
  width: 172px; /* Decisión 109/111/114: logo pequeño pero legible (96 → 132 → 172 px: el rótulo «Red Salesiana de Escuelas» no se leía) */
  max-width: 80%;
  margin: 0 auto 26px;
  line-height: 0;
}
.footer-logo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; }

.footer-contact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.footer-contact-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; line-height: 1.35; text-align: left; }
.footer-contact-list svg { width: 18px; height: 18px; flex-shrink: 0; fill: var(--beige); }
.footer-contact-list a { color: rgba(255,255,255,.9); transition: color .2s; }
.footer-contact-list a:hover { color: var(--beige); }

.footer-social { display: flex; justify-content: center; gap: 14px; }
.footer-social a { color: #fff; opacity: .85; display: flex; transition: opacity .2s, color .2s; }
.footer-social a:hover { opacity: 1; color: var(--beige); }
.footer-social svg { width: 17px; height: 17px; fill: currentColor; }
.footer-social a.is-pending { opacity: .4; }

/* -- Columnas 3 y 4: listas de enlaces (también usada por la nueva
   columna 2, Mapa Web, con la misma clase .footer-links) -- */
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 18px; }
.footer-links li:last-child { margin-bottom: 0; }
.footer-links a {
  display: inline-block;
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .2s;
}
.footer-links a:hover { color: var(--beige); }
.footer-links a.is-pending { opacity: .45; pointer-events: none; }
.footer-links-pending { font-size: 15px; font-style: italic; color: rgba(255,255,255,.55); }

/* -- Columna 5: Boletín (iframe externo de tamaño fijo) -- */
/* Sin título de columna (Rodo pidió dejar solo la imagen); sin margen
   superior para que el iframe arranque a la misma altura que los
   títulos "EN EL PERÚ" / "EN EL MUNDO" de las otras columnas. */
.footer-boletin-frame {
  /* Fondo transparente (sin marco blanco), SIN sombra — Rodo pidió
     quitar la sombra (y cualquier efecto hover; no se encontró ningún
     hover aplicado a este bloque, solo esta sombra fija, ya retirada). */
  background: transparent;
  border-radius: 8px;
  max-width: 100%;
  overflow-x: auto;
}
.footer-boletin-frame iframe { display: block; max-width: 100%; border: none; border-radius: 8px; }

/* Franja inferior: fondo beige (distinto del azul del pie) con el © a la izquierda
   y el crédito «Desarrollado por EDUBRIDGES.COM» a la derecha. Texto azul profundo
   sobre beige = contraste > 9:1. */
.footer-bottom { background: var(--beige); border-top: 4px solid var(--celeste); }
.footer-bottom-inner {
  padding: 16px 48px;
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* © izquierda · redes al centro · crédito derecha */
  align-items: center;
  gap: 8px 20px;
  font-size: 14px;
  color: var(--azul-profundo);
}
.footer-copy { justify-self: start; }
.footer-bottom-inner .footer-credit { justify-self: end; }
/* Redes sociales al centro de la última fila (sobre el beige) */
.footer-social--base { justify-self: center; gap: 10px; }
.footer-social--base a { width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 50%; color: var(--azul-profundo); opacity: 1; background: rgba(55,52,53,.1); transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; }
.footer-social--base a:hover, .footer-social--base a:focus-visible { background: var(--azul-inst); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(47,43,44,.3); }
.footer-social--base svg { width: 20px; height: 20px; }
.footer-social--base a.is-pending { opacity: .45; }
.footer-credit { color: var(--azul-profundo); }
.footer-credit a {
  color: var(--azul-profundo);
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.footer-credit a:hover,
.footer-credit a:focus-visible { color: var(--rojo-texto); border-bottom-color: var(--rojo-texto); }

@media (max-width: 760px) {
  .footer-bottom-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 18px 20px; row-gap: 12px; }
  .footer-copy, .footer-bottom-inner .footer-credit, .footer-social--base { justify-self: center; }
  .footer-social--base { order: -1; }
}

@media (max-width: 480px) {
  .site-footer { padding-top: 52px; }
  .footer-grid { gap: 40px; padding-bottom: 44px; }
}

/* ==========================================================================
   PÁGINAS INTERIORES — componentes reutilizables
   Primera página interior del sitio: documentos.php. `.page-hero` queda
   pensado para reutilizarse en cualquier otra página interior futura
   (Nuestra Red, Criterio Oratoriano, Calendario, páginas de colegios...).
   ========================================================================== */

/* Banner de encabezado: foto de fondo + velo de marca + parallax NO
   aplicado aquí (a diferencia de Misión y Visión/Hitos) — es un banner
   angosto de una sola pantalla, sin el espacio vertical que necesita el
   efecto para lucir; mismo criterio de "fondo con foto + velo" del resto
   del sitio, solo sin la capa de scroll independiente. */
.page-hero {
  position: relative;
  background: var(--azul-inst); /* respaldo mientras carga la foto */
  padding: 64px 0 56px;
  min-height: clamp(220px, 26vw, 420px);
  display: flex;
  align-items: flex-end;
  /* Sombra hacia el contenido de abajo, pedido de Rodo en documentos.php y
     calendario.php — se aplica en el componente reutilizable `.page-hero`
     para que valga también en futuras páginas interiores. Antes tenía
     `overflow:hidden` para "contener" la foto de fondo y el velo, pero
     ambos usan `inset:0` (calzan exacto con la caja, nunca se salen), así
     que quitarlo es seguro y es lo que deja ver la sombra — con
     `overflow:hidden` puesto, el navegador recorta cualquier box-shadow
     que se salga de la caja, incluida esta. Al ser el banner de ancho
     completo, el sangrado horizontal de la sombra queda fuera de pantalla
     (invisible) y el de arriba queda tapado por el header — solo se nota
     hacia abajo, que es justamente el efecto buscado. */
  box-shadow: 0 24px 40px rgba(15,23,42,.35);
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  z-index: 0;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(47,43,44,.55) 0%, rgba(47,43,44,.78) 100%);
  z-index: 1;
}
.page-hero > .container { position: relative; z-index: 2; }

.page-hero-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255,255,255,.7);
  margin-bottom: 16px;
}
.page-hero-breadcrumb a { color: rgba(255,255,255,.9); text-decoration: none; }
.page-hero-breadcrumb a:hover { text-decoration: underline; }
.page-hero-breadcrumb [aria-current="page"] { color: var(--beige); font-weight: 600; }

.page-hero-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 44px);
  color: var(--blanco);
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
  margin-bottom: 10px;
}
.page-hero-lead {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 8px rgba(0,0,0,.3);
  text-align: justify;
  max-width: 640px;
}

@media (max-width: 620px) {
  .page-hero { padding: 44px 0 36px; }
}

/* NOTA: el bloque .documentos-intro (imagen + texto en dos columnas) que
   vivía aquí se RETIRÓ — Rodo pidió unificar el encabezado de documentos.php
   al mismo estilo de calendario.php (título + párrafo dentro del propio
   `.page-hero`, ver `.page-hero-lead`), así que el párrafo ya no necesita
   un bloque aparte. */

/* ---- Documentos y Calendario: sección del iframe ----
   Décima ronda — Rodo pidió QUITAR por completo la foto de fondo detrás
   del iframe y volver a la versión anterior sin imágenes: tras 6+ rondas
   de ajuste (Decisiones 44-50: foto a todo color → degradados/techos de
   opacidad crecientes → corrección de blur y zona de revelado) el
   resultado seguía sin convencer en su navegador real. Se retiró toda la
   capa `.documentos-section-bg` / `.calendario-section-bg` (el div en PHP,
   el `background-image`, el blur, la opacidad y la máscara en degradado)
   y las fotos `ayacucho1.jpg` / `ayacucho2.jpg` ya no se usan en estas
   páginas. La sección vuelve a un fondo plano simple, y la tarjeta del
   iframe recupera un fondo blanco propio (ya no hace falta que sea
   transparente — esa transparencia solo existía para dejar ver la foto de
   fondo, que ya no está). */
.documentos-section,
.calendario-section {
  background: var(--blanco);
  padding: 72px 0 120px;
}

/* El iframe se auto-ajusta al alto real de su contenido vía postMessage
   (ver js/main.js, sección "Auto-resize del iframe de Documentos") — ver
   comentario histórico completo en documentos.php. */

/* Tarjetas con fondo blanco propio y el mismo patrón de hover + sombra que
   las tarjetas de INICIO (`.oratoriano-card`, `.recurso-card`): leve
   elevación + sombra más marcada al pasar el mouse. El iframe en sí
   (`documentos.salesianos.online` o Google Calendar) sigue mostrando SU
   PROPIO fondo blanco interno — no se puede quitar desde nuestro CSS por
   ser contenido de otro dominio (misma limitación ya documentada con el
   iframe del Boletín del footer, Decisión 21). */
.documentos-frame,
.calendario-frame {
  position: relative;
  background: var(--blanco);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(55,52,53,.24);
  transition: transform .2s ease, box-shadow .2s ease;
}
.documentos-frame:hover,
.calendario-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(55,52,53,.3);
}
.documentos-frame iframe {
  display: block;
  width: 100%;
  height: 1000px; /* alto de respaldo — ver comentario en documentos.php */
  border: none;
  background: transparent;
  transition: height .25s ease;
}

.documentos-frame-nota {
  display: table; /* se achica al contenido y se centra con margin:auto, en vez de ocupar el ancho completo */
  margin: 18px auto 0;
  font-size: 16px;
  color: var(--gris-texto);
  text-align: center;
  background: rgba(255,255,255,.92);
  padding: 8px 20px;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(55,52,53,.14);
}
.documentos-frame-nota a { color: var(--azul-inst); font-weight: 600; }

@media (max-width: 620px) {
  .documentos-frame iframe { height: 900px; }
  .documentos-section,
  .calendario-section { padding: 48px 0 80px; }
}

/* ---- Calendario: Google Calendar embebido, responsive por aspect-ratio ----
   El código que da Google trae medidas fijas (800×600). En vez de usarlas
   tal cual, el contenedor mantiene esa misma proporción (4:3) a cualquier
   ancho de pantalla — el iframe se estira al 100% del contenedor en vez de
   tener un tamaño fijo en píxeles. No hace falta ningún mecanismo de
   postMessage aquí (a diferencia de documentos.php): Google Calendar no
   avisa su alto, pero tampoco hace falta que lo haga, porque el contenido
   del calendario ya se adapta solo al espacio disponible del iframe. */
.calendario-frame {
  width: 100%;
  aspect-ratio: 4 / 3; /* misma proporción 800:600 del embed original de Google */
}
.calendario-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

@media (max-width: 620px) {
  /* Más vertical en móvil: con 4:3 puro, el calendario queda muy achatado
     en pantallas angostas y la grilla de días se vuelve difícil de tocar. */
  .calendario-frame { aspect-ratio: 3 / 4; }
}

/* ==========================================================================
   NUESTRA RED — listado detallado por colegio (nuestra-red.php)
   Reemplaza el grid de tarjetas (que se queda igual en INICIO) por una fila
   por colegio con 3 columnas: foto + insignias, datos de contacto, y mapa
   de Google. Modelo de layout pedido por Rodo (envió una captura de
   referencia de otro sitio); contenido investigado por Claude — ver
   inc/nuestra-red-data.php para el detalle de fuentes por colegio. */
.colegios-detalle-section {
  background: var(--blanco);
  padding: 72px 0 100px;
}
.colegios-detalle-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.colegio-row {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(55,52,53,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  scroll-margin-top: calc(var(--hdr-compact) + 20px);
}
.colegio-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(55,52,53,.16);
}
@media (min-width: 900px) {
  .colegio-row { flex-direction: row; }
}

.colegio-col { padding: 24px; }
@media (min-width: 900px) {
  .colegio-col-photo { flex: 0 0 26%; max-width: 26%; }
  .colegio-col-info   { flex: 1 1 44%; max-width: 44%; border-left: 1px solid rgba(55,52,53,.08); border-right: 1px solid rgba(55,52,53,.08); }
  .colegio-col-map    { flex: 0 0 30%; max-width: 30%; display: flex; flex-direction: column; }
}

.colegio-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background-size: cover;
  background-position: center top;
  margin-bottom: 14px;
}
.colegio-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.colegio-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gris-claro);
  color: var(--azul-inst);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 20px;
}
.colegio-badge svg { width: 14px; height: 14px; flex: none; fill: var(--celeste); }

/* .colegio-gender-detail (texto "Varones y Mujeres" + isotipos debajo de la
   foto, en coeducación) — RETIRADO a pedido de Rodo, que se retractó del
   pedido original. Ya no se usa en el markup; regla eliminada. */

.colegio-name {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--azul-inst);
  margin-bottom: 4px;
}
.colegio-founded {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--azul-inst);
  margin-bottom: 12px;
}
.colegio-desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--gris-texto);
  text-align: justify;
  margin-bottom: 18px;
}

.colegio-meta { display: flex; flex-direction: column; gap: 10px; }
.colegio-meta-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
}
.colegio-meta-row svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  fill: var(--azul-inst);
}
.colegio-meta-row a { color: var(--azul-inst); font-weight: 600; text-decoration: none; }
.colegio-meta-row a:hover { text-decoration: underline; }
.colegio-meta-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  color: #25923d;
  font-weight: 700;
  text-decoration: none;
  font-size: 12.5px;
}
.colegio-meta-whatsapp svg { width: 14px; height: 14px; fill: #25923d; margin: 0; }
.colegio-meta-whatsapp:hover { text-decoration: underline; }

.colegio-map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--azul-inst);
  background: var(--gris-claro);
  padding: 7px 14px;
  border-radius: 20px;
  text-decoration: none;
  margin-bottom: 12px;
}
.colegio-map-link:hover { background: var(--beige); }
.colegio-map-link svg { width: 13px; height: 13px; fill: var(--azul-inst); }
.colegio-map-frame {
  position: relative;
  flex: 1;
  min-height: 200px;
  border-radius: 8px;
  overflow: hidden;
}
.colegio-map-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (max-width: 899px) {
  .colegio-col-info { border-top: 1px solid rgba(55,52,53,.08); border-bottom: 1px solid rgba(55,52,53,.08); }
  .colegio-map-frame { aspect-ratio: 4 / 3; min-height: unset; }
}

/* ==========================================================================
   BLOQUE DE DETALLE — componente genérico para páginas interiores que
   desarrollan a página completa un grid de tarjetas de INICIO (ícono +
   título + texto condensado), mostrando el texto OFICIAL completo del
   documento fuente en vez del resumen. Usado por primera vez en
   criterio-oratoriano.php (los 4 ámbitos) y reutilizado tal cual en
   recursos-educativos.php (los 5 recursos) — incluso sirve para una
   futura nuestros-valores.php. Un bloque por ítem, ícono grande + texto,
   fondo alternado blanco/gris para dar ritmo sin depender de fotos por
   ítem (no se proveyeron). Reutiliza los mismos íconos SVG y colores de
   acento que ya usa cada grid de INICIO. */
.detalle-block {
  padding: 56px 0;
}
.detalle-block:nth-child(even) { background: var(--blanco); }
.detalle-block:nth-child(odd) { background: var(--fondo-suave); } /* excepto el 1° (el page-hero, no un .detalle-block); el 1er .detalle-block real cae en nth-child(2), par, y arranca en blanco */
.detalle-block-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .detalle-block-inner { flex-direction: row; align-items: flex-start; }
}
.detalle-block-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex: none;
  background: var(--card-accent, var(--azul-inst));
  color: var(--card-icon-color, #fff);
}
.detalle-block-icon-wrap svg { width: 36px; height: 36px; }
.detalle-block-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--azul-inst);
  margin-bottom: 10px;
}
.detalle-block-text {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gris-texto);
  text-align: justify;
}
@media (max-width: 719px) {
  .detalle-block-inner { text-align: center; align-items: center; }
  .detalle-block-text { text-align: center; }
}

/* ==========================================================================
   IDENTIDAD SALESIANA — página interior (identidad-salesiana.php).
   Intro (2 párrafos) + 3 perfiles en pestañas (Estudiante/Educador/Familia).
   Cada pestaña y su panel llevan su propio color de acento institucional
   vía la variable CSS `--tab-accent` (heredada por todo lo de adentro del
   panel: título, viñetas de la lista), fijada inline por perfil en PHP. */
.identidad-intro { padding: 56px 0; background: var(--blanco); }
.identidad-intro-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.identidad-intro-inner p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--gris-texto);
  text-align: justify;
}
.identidad-intro-inner em { font-style: italic; color: var(--azul-inst); }

.identidad-perfiles { padding: 8px 0 72px; background: var(--fondo-suave); } /* invertido: sigue a .identidad-intro justo arriba */

/* Tarjetas de la página-resumen (identidad-salesiana.php), una por
   perfil, cada una enlaza a su página propia (mismo espíritu que
   .red-colegio-card: elevación + sombra al pasar el mouse). */
.identidad-perfil-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  padding: 8px 0;
}
.identidad-perfil-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: 1 1 100%;
  max-width: 100%;
  background: #fff;
  border-radius: 16px;
  border-top: 4px solid var(--card-accent, var(--azul-inst));
  box-shadow: 0 6px 18px rgba(55,52,53,.08);
  padding: 40px 28px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 720px) {
  .identidad-perfil-card { flex-basis: calc(33.333% - 18.667px); max-width: calc(33.333% - 18.667px); }
}
.identidad-perfil-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(55,52,53,.16);
}
.identidad-perfil-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--card-accent, var(--azul-inst));
  color: #fff;
}
.identidad-perfil-card-icon svg { width: 32px; height: 32px; }
.identidad-perfil-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--azul-inst);
}
.identidad-perfil-card-cta {
  font-size: 14px;
  font-weight: 700;
  color: var(--azul-inst); /* el acento de la tarjeta (celeste/rojo) no da contraste como texto de 14px; se conserva en bordes e iconos */
}
.identidad-perfil-card:hover .identidad-perfil-card-cta { text-decoration: underline; }

.identidad-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 40px;
}
.identidad-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 999px;
  border: 2px solid var(--tab-accent, var(--azul-inst));
  background: #fff;
  color: var(--azul-inst);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.identidad-tab-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--tab-accent, var(--azul-inst));
  transition: color .2s ease;
}
.identidad-tab-icon svg { width: 100%; height: 100%; }
.identidad-tab:hover { background: var(--gris-claro); }
.identidad-tab.is-active {
  background: var(--tab-accent, var(--azul-inst));
  color: #fff;
  border-color: var(--tab-accent, var(--azul-inst));
}
.identidad-tab.is-active .identidad-tab-icon { color: #fff; }

.identidad-panel { display: none; }
.identidad-panel.is-active { display: block; }

.identidad-panel-title {
  font-size: clamp(24px, 3vw, 32px);
  text-align: center;
  margin: 0 auto 36px;
  padding-bottom: 16px;
  border-bottom: 3px solid var(--tab-accent, var(--azul-inst));
  max-width: 560px;
}

/* Fila de 4 fotos reales, insertada antes de cada bloque de "Dimensión" (y
   una vez más al final) en las páginas de perfil — sugerencia de Rodo, ver
   inc/identidad-galeria.php para el origen de las fotos. Cada foto es un
   botón `.galeria-thumb` (mismo componente que las fichas de colegio, con
   su mismo hover de elevación) — clic abre el lightbox/carrusel manual
   compartido `js/galeria-lightbox.js`, que reúne TODAS las fotos de la
   página (todas las filas) en un solo carrusel navegable. */
.identidad-foto-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  max-width: 860px;
  margin: 0 auto 24px;
}
.identidad-foto-row .galeria-thumb { aspect-ratio: 4 / 3; }

.identidad-dimension {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  padding: 32px;
  margin-bottom: 24px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.identidad-dimension-title {
  font-size: 20px;
  color: var(--azul-inst);
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gris-claro);
}
.identidad-grupo { margin-bottom: 24px; }
.identidad-grupo:last-child { margin-bottom: 0; }
.identidad-grupo-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--tab-accent, var(--azul-inst));
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 14px;
}
.identidad-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.identidad-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--gris-texto);
  text-align: justify;
}
.identidad-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tab-accent, var(--celeste));
}
.identidad-list em { font-style: italic; color: var(--azul-inst); }

@media (max-width: 640px) {
  .identidad-tab { padding: 10px 16px; font-size: 14px; }
  .identidad-dimension { padding: 24px 20px; }
  .identidad-foto-row { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
}

/* Página propia de un solo perfil (estudiante-salesiano.php,
   educador-salesiano.php, familia-salesiana.php, vía
   inc/perfil-detalle.php) — mismos bloques de Dimensión/Grupo que las
   pestañas de identidad-salesiana.php, pero sin selector de pestañas
   (cada perfil ya es su propia página) y con más aire arriba al venir
   justo después del banner. */
/* Reemplaza el degradado de `.identidad-perfiles` (pensado para la página-resumen,
   que sigue a .identidad-intro) — en la ficha de UN perfil esta sección va
   justo después del `.page-hero` (foto oscura), así que reinicia en blanco. */
.identidad-perfiles-single { padding-top: 56px; background: var(--blanco); }

.identidad-otros-perfiles {
  max-width: 860px;
  margin: 40px auto 0;
  padding-top: 32px;
  border-top: 1px solid var(--gris-claro);
  text-align: center;
}
.identidad-otros-perfiles-label {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--azul-inst);
  margin-bottom: 20px;
}
/* Nota: las reglas ".identidad-otros-perfiles a" de la versión anterior
   (cuando "Conoce también" era texto con enlaces sueltos) se retiraron por
   completo en vez de dejarlas sin usar — ahora SÍ había un conflicto real:
   con las tarjetas ".identidad-perfil-card" (que también son <a>) anidadas
   aquí dentro, ese selector ganaba por especificidad sobre "display:flex"
   de la tarjeta y rompía su layout (título y CTA se mezclaban en una sola
   línea). A diferencia de otro CSS viejo que se deja sin usar porque es
   inofensivo, este había que borrarlo. */

/* ==========================================================================
   FICHA DE COLEGIO — página interior propia de cada obra (don-bosco-arequipa.php
   y las que sigan, inc/colegio-detalle.php). Primera de las 10 páginas
   "Ver colegio" a las que ya apuntaba el botón del grid de INICIO
   (inc/red-colegios.php) desde antes de que existieran. Reutiliza tal cual
   los componentes visuales creados para el listado de nuestra-red.php
   (.colegio-photo, .colegio-badges/-badge, .colegio-desc, .colegio-meta*,
   .colegio-map-link/-frame) en un layout de página completa de 2 columnas
   en vez de la fila compacta — misma fuente de datos, mismo criterio de
   contenido (nada inventado más allá de lo ya investigado y aprobado por
   Rodo en nuestra-red.php). Volver a usar los MISMOS nombres de clase para
   estas piezas (foto, insignias, descripción, contacto, mapa) mantiene el
   sitio visualmente consistente sin duplicar CSS. */
.colegio-perfil-section {
  /* El fondo (blanco→beige o beige→blanco) lo pone una de las clases
     .bg-fade-wb/.bg-fade-bw agregadas en el HTML (inc/colegio-detalle.php) —
     no una sola dirección fija acá, porque las 4 zonas de esta ficha son
     opcionales y varían de colegio a colegio; ver el sistema de degradados
     al inicio del archivo y la variable $bgFlow en colegio-detalle.php. */
  padding: 64px 0 100px;
}
.colegio-perfil-grid {
  /* BUG (encontrado por Rodo en su celular, en la ficha de un colegio):
     con `grid-template-columns: 1fr` a secas, si algún contenido interno
     no cabe (aunque sea por poco), el navegador agranda esa columna en
     vez de encogerla — el "1fr" solo reparte espacio DISPONIBLE, no
     obliga a nada a entrar ahí, así que la ficha completa se salía por
     el borde derecho de la pantalla en celular (texto y datos de
     contacto cortados). Fix: `minmax(0,1fr)` en vez de `1fr` — le dice
     al navegador que el mínimo permitido es 0, así que si el contenido
     no cabe, ENCOGE en vez de desbordar. Se aplicó el mismo fix a todos
     los demás `grid-template-columns` del sitio como prevención (mismo
     riesgo latente en cualquier grilla, aunque solo se detectó acá). */
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 32px;
  background: var(--blanco);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(55,52,53,.08);
  padding: 32px;
}
@media (min-width: 900px) {
  .colegio-perfil-grid { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); padding: 40px; }
}
.colegio-perfil-photo {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background-size: cover;
  background-position: center top;
  margin-bottom: 18px;
}
.colegio-perfil-main .colegio-badges { margin-bottom: 20px; }
.colegio-perfil-main .colegio-desc { font-size: 16px; margin-bottom: 24px; }
.colegio-perfil-map {
  display: flex;
  flex-direction: column;
}
.colegio-perfil-map .colegio-map-frame {
  flex: 1;
  min-height: 260px;
}
.colegio-perfil-back {
  display: inline-block;
  margin-bottom: 24px;
}

/* ==========================================================================
   LA COMUNIDAD EDUCATIVA — franja a todo el ancho en la ficha de cada
   colegio (inc/colegio-detalle.php), debajo de la ficha de contacto y
   antes del footer. Modelo de diseño y texto tomados de la captura de
   referencia que envió Rodo (foto del equipo a la izquierda + panel
   oscuro con título/párrafo/cifras a la derecha); las 6 cifras son datos
   reales de cada obra, no un componente decorativo con datos de ejemplo.
   Sección OPCIONAL — solo aparece cuando el colegio tiene `'comunidad'`
   en inc/nuestra-red-data.php. */
.comunidad-educativa {
  display: flex;
  flex-direction: column;
}
@media (min-width: 900px) {
  .comunidad-educativa { flex-direction: row; min-height: 560px; }
}
.comunidad-foto {
  flex: 1 1 50%;
  min-height: 320px;
  background-size: cover;
  background-position: center;
}
.comunidad-contenido {
  flex: 1 1 50%;
  background: var(--azul-profundo);
  color: #fff;
  padding: 56px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (min-width: 900px) {
  .comunidad-contenido { padding: 64px 64px; }
}
.comunidad-titulo {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  color: #fff;
  margin-bottom: 20px;
}
.comunidad-texto {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,.82);
  text-align: justify;
  max-width: 640px;
  margin-bottom: 40px;
}
.comunidad-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  column-gap: 56px;
  row-gap: 40px;
}
@media (max-width: 599px) {
  .comunidad-stats { grid-template-columns: repeat(2, auto); column-gap: 40px; }
}
.comunidad-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin-bottom: 10px;
}
.comunidad-stat-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
}

/* ==========================================================================
   EQUIPO DE GESTIÓN — grilla de personas (foto + nombre + cargo), debajo de
   "La Comunidad Educativa" en la ficha de cada colegio. Tarjeta blanca con
   hover/sombra, mismo lenguaje visual que `.colegio-row`/`.red-colegio-card`
   en el resto del sitio (elevación + sombra al pasar el cursor). */
.equipo-gestion-section {
  /* Fondo puesto por .bg-fade-wb/.bg-fade-bw en el HTML — ver nota en
     .colegio-perfil-section arriba. */
  padding: 72px 0 90px;
}
.equipo-gestion-intro { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.equipo-gestion-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 32px);
  color: var(--azul-inst);
  margin-bottom: 12px;
}
.equipo-gestion-subtitle { font-size: 16px; line-height: 1.7; color: var(--gris-texto); }

.equipo-gestion-grid {
  /* Flexbox + justify-content:center (mismo patrón que .red-colegios-grid
     y .recursos-grid) en vez de CSS Grid: el equipo de gestión no siempre
     es múltiplo exacto de 4 (ej. 7 personas), así que una fila incompleta
     debe quedar centrada en vez de pegada a la izquierda. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
}

.equipo-card {
  flex: 1 1 calc(50% - 14px);
  max-width: calc(50% - 14px);
  background: var(--blanco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(55,52,53,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 860px) {
  .equipo-card { flex-basis: calc(25% - 21px); max-width: calc(25% - 21px); }
}
.equipo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(55,52,53,.16);
}
.equipo-card-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center top;
  background-color: var(--gris-claro);
}
.equipo-card-body {
  padding: 16px 14px 20px;
  text-align: center;
}
.equipo-card-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--azul-inst);
  line-height: 1.3;
  margin-bottom: 6px;
}
.equipo-card-cargo {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--azul-inst);
  line-height: 1.4;
}

@media (max-width: 419px) {
  .equipo-card { flex-basis: 100%; max-width: 320px; }
}

/* ==========================================================================
   INSTRUMENTOS DE GESTIÓN — fila de documentos descargables (PEI/PCI/PAT/RI
   en Arequipa), al final de la ficha de cada colegio, antes del footer.
   Mismos 2 tonos crema/beige que `.equipo-gestion-section` justo arriba
   (y que `.red-colegios` en INICIO), pero en degradado INVERTIDO: Rodo
   notó que, con las dos zonas en la misma dirección, el tono oscuro del
   final de una franja se encontraba con el tono claro del inicio de la
   siguiente y se sentía un corte. Al invertir la dirección cada vez que
   una franja de este mismo par de tonos sigue a otra, el oscuro de abajo
   de una zona conecta con el oscuro de arriba de la próxima (y así con el
   claro), sin costura visible entre bloques. Si se agrega una zona más con
   este mismo fondo debajo, debe seguir alternando la dirección otra vez. */
.instrumentos-gestion-section {
  /* Fondo puesto por .bg-fade-wb/.bg-fade-bw en el HTML — ver nota en
     .colegio-perfil-section arriba. */
  padding: 72px 0 90px;
}
.instrumentos-gestion-intro { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.instrumentos-gestion-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 32px);
  color: var(--azul-inst);
  margin-bottom: 12px;
}
.instrumentos-gestion-subtitle { font-size: 16px; line-height: 1.7; color: var(--gris-texto); }

.instrumentos-gestion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 700px) {
  .instrumentos-gestion-grid { grid-template-columns: repeat(4, minmax(0,1fr)); max-width: none; }
}

.instrumento-card {
  display: block;
  background: var(--blanco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(55,52,53,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.instrumento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(55,52,53,.16);
}
.instrumento-card img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   GALERÍA DE FOTOS — grilla de miniaturas (hasta 5 por fila en escritorio)
   al final de la ficha de cada colegio, + lightbox/carrusel de pantalla
   completa (js/galeria-lightbox.js). Fondo en degradado: arranca en el
   mismo crema donde termina "Instrumentos de Gestión" justo arriba y baja
   a blanco puro, para conectar sin corte con la franja de Contacto
   (blanca) que abre el footer — pedido explícito de Rodo. */
.galeria-section {
  /* Fondo puesto por .bg-fade-wb/.bg-fade-bw en el HTML — ver nota en
     .colegio-perfil-section arriba. */
  padding: 72px 0 80px;
}
.galeria-intro { max-width: 620px; margin: 0 auto 40px; text-align: center; }
.galeria-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 32px);
  color: var(--azul-inst);
  margin-bottom: 12px;
}
.galeria-subtitle { font-size: 16px; line-height: 1.7; color: var(--gris-texto); }

.galeria-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px;
}
@media (min-width: 560px) {
  .galeria-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 900px) {
  .galeria-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
}

.galeria-thumb {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--gris-claro);
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  box-shadow: 0 6px 18px rgba(55,52,53,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.galeria-thumb:hover,
.galeria-thumb:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(55,52,53,.16);
}
.galeria-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* -- Lightbox / carrusel manual -- */
.galeria-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(10,14,26,.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
}
.galeria-lightbox[hidden] { display: none; }

.galeria-lightbox-stage {
  max-width: min(1100px, 92vw);
  max-height: 78vh;
  display: flex;
}
.galeria-lightbox-stage img {
  max-width: 100%;
  max-height: 78vh;
  margin: auto;
  border-radius: 6px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}

.galeria-lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.galeria-lightbox-close:hover { background: rgba(255,255,255,.24); }
.galeria-lightbox-close svg { width: 20px; height: 20px; }

.galeria-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s;
}
.galeria-lightbox-arrow:hover { background: rgba(255,255,255,.24); }
.galeria-lightbox-arrow svg { width: 26px; height: 26px; }
.galeria-lightbox-prev { left: 16px; }
.galeria-lightbox-next { right: 16px; }

.galeria-lightbox-bullets {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90vw;
}
.galeria-bullet {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.galeria-bullet.is-active { background: var(--celeste); transform: scale(1.3); }
.galeria-bullet:hover { background: rgba(255,255,255,.6); }

@media (max-width: 599px) {
  .galeria-lightbox-arrow { width: 42px; height: 42px; }
  .galeria-lightbox-prev { left: 8px; }
  .galeria-lightbox-next { right: 8px; }
}

/* ==========================================================================
   CAPA EDITORIAL — hermanada con salesianosfs.edu.pe (oct. 2026)

   Decisión de la RSE: el sitio de la Red y el de cada colegio deben leerse como
   hermanos. Se toma de salesianosfs la COMPOSICIÓN, no su cromatismo:

     · encabezado de zona alineado a la izquierda: rótulo (eyebrow) + titular
       serif + filete corto + párrafo de entrada;
     · enlaces de cierre «CONOCE MÁS →» en versalitas, sin subrayado;
     · botones con relieve (sombra + elevación al pasar);
     · cierre de página: banda de foto + título + subtítulo + hasta 3 botones.

   Los colores son SIEMPRE los del Manual V4 de la Congregación (la identidad de
   la RSE prima): azul #B71C26, celeste #FDCB2B (solo barras e íconos), beige
   #FDEBA8 y rojo #EC3238. Esta capa va al final de la hoja a propósito: ajusta
   lo anterior sin tocar los 20 bloques de zona.
   ========================================================================== */

/* --- Encabezado de zona: a la izquierda ---------------------------------- */
.oratoriano-intro,
.nuestros-valores-intro,
.red-colegios-intro,
.recursos-intro,
.hitos-intro,
.mision-vision-intro {
  margin-left: 0;
  margin-right: 0;
  max-width: 760px;
  text-align: left;
}
.oratoriano-lead,
.nuestros-valores-lead,
.red-colegios-lead,
.recursos-lead { max-width: 640px; }

/* Filete corto bajo el titular: celeste sobre claro (es una barra, no texto);
   beige sobre foto o fondo oscuro. */
.oratoriano-title::after,
.nuestros-valores-title::after,
.red-colegios-title::after,
.recursos-title::after,
.hitos-title::after,
.mision-vision-title::after {
  content: '';
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 16px;
  border-radius: 2px;
  background: var(--celeste);
}
.hitos-title::after,
.mision-vision-title::after { background: var(--beige); }

/* --- Cierres de zona: a la izquierda, en versalitas ---------------------- */
.oratoriano-cta,
.nuestros-valores-cta,
.red-colegios-cta,
.recursos-cta,
.hitos-cta { text-align: left; }
.valores-cta { text-align: left; padding-left: 0; padding-right: 0; }

.link-subtle,
.valor-link-subtle {
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 0;
  padding-bottom: 0;
}
.link-subtle-dark { color: var(--azul-inst); }
.link-subtle-dark:hover { color: var(--azul-profundo); opacity: 1; }
.link-subtle-light:hover,
.valor-link-subtle:hover { opacity: 1; color: var(--blanco); }

/* --- Botones: relieve y elevación al pasar ------------------------------- */
.btn-solid,
.btn-outline,
.btn-outline-light {
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(var(--tinta-rgb), .10), 0 8px 22px rgba(var(--tinta-rgb), .13);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-solid:hover,
.btn-outline:hover,
.btn-outline-light:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--tinta-rgb), .14), 0 16px 38px rgba(var(--tinta-rgb), .22);
}
.btn-solid:focus-visible,
.btn-outline:focus-visible,
.btn-outline-light:focus-visible { outline: 2px solid var(--azul-inst); outline-offset: 3px; }

/* --- Cierre de página ------------------------------------------------------
   Banda de foto con velo azul profundo (el mismo oscurecido del azul que ya usan
   Misión y Visión y Hitos: garantiza el blanco del titular sobre cualquier foto). */
.cierre-pagina {
  position: relative;
  overflow: hidden;
  background: var(--azul-profundo);
  padding: clamp(64px, 8vw, 110px) 0;
  color: var(--blanco);
}
.cierre-pagina-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}
.cierre-pagina::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(47,43,44,.86) 0%, rgba(47,43,44,.92) 100%);
}
.cierre-pagina-inner { position: relative; z-index: 2; text-align: center; }
.cierre-pagina .eyebrow { color: var(--beige); }
.cierre-pagina-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 700;
  color: var(--blanco);
  max-width: 760px;
  margin: 0 auto 14px;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.cierre-pagina-lead {
  max-width: 600px;
  margin: 0 auto 32px;
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,.92);
}
.cierre-pagina-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.cierre-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 26px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 8px;
  color: var(--blanco);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,.24), 0 8px 24px rgba(0,0,0,.30);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cierre-btn svg { width: 18px; height: 18px; flex: none; }
.cierre-btn:hover,
.cierre-btn:focus-visible {
  background: var(--blanco);
  color: var(--azul-inst);
  border-color: var(--blanco);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.32), 0 16px 38px rgba(0,0,0,.46);
}
/* El primero va relleno en beige: es el destino principal */
.cierre-btn-solid { background: var(--beige); border-color: var(--beige); color: var(--azul-profundo); }
.cierre-btn-solid:hover,
.cierre-btn-solid:focus-visible { background: #FFF3C4; border-color: #FFF3C4; color: var(--azul-profundo); }
@media (max-width: 520px) {
  .cierre-btn { width: 100%; justify-content: center; }
}


/* ==========================================================================
   NOTICIAS DE LA RED · AGUINALDO DEL RECTOR MAYOR  (Decisión 104)
   Composición hermanada con salesianosfs.edu.pe; colores del Manual V4.
   ========================================================================== */

/* --- Chip de categoría y metadatos --------------------------------------- */
.noticia-chip {
  display: inline-block;
  align-self: flex-start;
  background: var(--beige);
  color: var(--azul-profundo);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 4px;
}
a.noticia-chip:hover { background: #FFF3C4; }
.noticia-chip--sobre-foto { position: absolute; left: 14px; top: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.noticia-meta { display: block; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: var(--gris-suave); }

/* --- Portada: franja «Noticias de la Red» --------------------------------- */
.noticias-home { background: var(--blanco); padding: 92px 0 100px; }
.noticias-home-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; margin-bottom: 40px; }
.noticias-home-intro { max-width: 760px; }
.noticias-home-title { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2; color: var(--azul-inst); margin-bottom: 14px; }
.noticias-home-title::after { content: ''; display: block; width: 44px; height: 3px; margin-top: 16px; border-radius: 2px; background: var(--celeste); }
.noticias-home-lead { font-size: 17px; line-height: 1.65; color: var(--tinta); max-width: 640px; }
.noticias-home-todas { white-space: nowrap; }

.noticias-mosaico-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 300px;
  gap: 20px;
}
.noticia-mosaico { min-width: 0; }
.noticia-mosaico--destacada { grid-column: 1 / 3; grid-row: 1 / 3; }
.noticia-mosaico-caja {
  position: relative; display: block; height: 100%;
  border-radius: 12px; overflow: hidden; background: var(--azul-profundo);
  color: var(--blanco); text-decoration: none;
  box-shadow: 0 2px 6px rgba(var(--tinta-rgb), .10), 0 10px 28px rgba(var(--tinta-rgb), .16);
  transition: transform .25s ease, box-shadow .25s ease;
}
.noticia-mosaico-caja img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.noticia-mosaico-velo { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(47,43,44,0) 22%, rgba(47,43,44,.78) 62%, rgba(47,43,44,.95) 100%); }
.noticia-mosaico-texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.noticia-mosaico-titulo {
  font-family: var(--font-display); font-size: 17px; line-height: 1.35; color: var(--blanco);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.noticia-mosaico--destacada .noticia-mosaico-titulo { font-size: clamp(21px, 2.3vw, 28px); line-height: 1.3; -webkit-line-clamp: 4; }
.noticia-mosaico-texto .noticia-meta { color: rgba(255,255,255,.88); }
.noticia-mosaico-caja:hover,
.noticia-mosaico-caja:focus-visible { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(var(--tinta-rgb), .16), 0 22px 44px rgba(var(--tinta-rgb), .26); }
.noticia-mosaico-caja:hover img { transform: scale(1.05); }
.noticia-mosaico-caja:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }

@media (max-width: 991px) {
  /* La fila de la destacada mide lo que ella (340 px) y el resto 260 px; antes la
     destacada medía 340 dentro de una fila de 260 y se montaba sobre la segunda. */
  .noticias-mosaico-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 340px; grid-auto-rows: 260px; }
  .noticia-mosaico--destacada { grid-column: 1 / 3; grid-row: 1 / 2; }
}
@media (max-width: 620px) {
  .noticias-home { padding: 64px 0 72px; }
  .noticias-mosaico-grid { grid-template-columns: 1fr; grid-template-rows: 300px; grid-auto-rows: 260px; }
  .noticia-mosaico--destacada { grid-column: auto; grid-row: auto; }
}

/* --- Archivo y «más noticias»: foto arriba, texto abajo -------------------- */
.noticias-archivo { background: var(--blanco); padding: 56px 0 84px; }
/* Barra de filtros de noticias: ver «Noticias: barra de filtros minimalista» más abajo. */

/* Resultado, etiquetas y categorías de las noticias (Decisión 127) */
.noticias-resultado { margin: -8px 0 26px; font-size: 14px; color: var(--gris-suave); }
.noticias-resultado a { color: var(--azul-inst); font-weight: 600; }
.noticia-nota-clasificacion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 32px 0 6px; padding-top: 22px; border-top: 1px solid var(--gris-borde); }
.noticia-clasif-rotulo { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-suave); margin-right: 2px; }
.noticia-clasif-rotulo:not(:first-child) { margin-left: 14px; }
.noticia-etiqueta { display: inline-block; padding: 5px 13px; border: 1.5px solid var(--gris-borde); border-radius: 99px; background: var(--blanco); color: var(--azul-inst); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease; }
.noticia-etiqueta:hover, .noticia-etiqueta:focus-visible { border-color: var(--azul-inst); background: var(--azul-inst); color: var(--blanco); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(var(--tinta-rgb), .16); }
.noticia-etiqueta--cat { background: var(--beige); border-color: var(--beige); color: var(--azul-profundo); }
.noticias-vacio { font-size: 17px; color: var(--gris-suave); }

.noticias-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.noticia-card { min-width: 0; display: flex; }
.noticia-card-caja {
  display: flex; flex-direction: column; width: 100%;
  background: var(--blanco); border-radius: 12px; overflow: hidden;
  color: var(--tinta); text-decoration: none;
  box-shadow: 0 2px 6px rgba(var(--tinta-rgb), .08), 0 10px 26px rgba(var(--tinta-rgb), .11);
  transition: transform .25s ease, box-shadow .25s ease;
}
.noticia-card-caja:hover,
.noticia-card-caja:focus-visible { transform: translateY(-5px); box-shadow: 0 6px 14px rgba(var(--tinta-rgb), .14), 0 22px 44px rgba(var(--tinta-rgb), .22); }
.noticia-card-caja:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
.noticia-card-foto { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--azul-profundo); }
.noticia-card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.noticia-card-caja:hover .noticia-card-foto img { transform: scale(1.05); }
.noticia-card-cuerpo { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; flex: 1; }
.noticia-card-titulo { font-family: var(--font-display); font-size: 18px; line-height: 1.4; color: var(--azul-inst); transition: color .2s; }
.noticia-card-caja:hover .noticia-card-titulo { color: var(--azul-profundo); }
.noticia-card-extracto { font-size: 16px; line-height: 1.6; color: var(--tinta); }
.noticia-card-mas { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--azul-inst); }

@media (max-width: 991px) { .noticias-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .noticias-grid { grid-template-columns: 1fr; } .noticias-archivo { padding: 40px 0 64px; } }

/* --- Nota completa --------------------------------------------------------- */
.noticia-nota { background: var(--blanco); padding: 36px 0 72px; }
.noticia-nota-wrap { max-width: 900px; }
.noticia-nota-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--gris-suave); margin-bottom: 26px; }
.noticia-nota-breadcrumb a { color: var(--azul-inst); text-decoration: none; }
.noticia-nota-breadcrumb a:hover { text-decoration: underline; }
.noticia-nota-breadcrumb [aria-current="page"] { color: var(--tinta); font-weight: 600; }
/* Encabezado de la nota (centrado: categoría · título · fuente · fecha · compartir) */
.noticia-nota-cabecera { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; margin: 0 auto 36px; max-width: 820px; }
.noticia-nota-eyebrow { font-family: var(--font-body); font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8A6300; margin-bottom: 18px; }
.noticia-nota-eyebrow a { color: inherit; text-decoration: none; }
.noticia-nota-eyebrow a:hover { color: var(--azul-profundo); text-decoration: underline; text-underline-offset: 4px; }
.noticia-nota-eyebrow span[aria-hidden] { margin: 0 .35em; }
.noticia-nota-titulo { font-family: var(--font-body); font-weight: 700; font-size: clamp(30px, 5vw, 52px); line-height: 1.12; letter-spacing: -.01em; color: var(--azul-profundo); text-wrap: balance; margin-bottom: 28px; }
.noticia-nota-fuente { font-family: var(--font-body); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-inst); margin-bottom: 14px; }
.noticia-nota-fuente a { color: inherit; text-decoration: none; }
.noticia-nota-fuente a:hover { text-decoration: underline; text-underline-offset: 4px; }
.noticia-nota-datos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 34px; font-family: var(--font-body); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--gris-suave); margin-bottom: 22px; }
.noticia-nota-datos strong { color: var(--tinta); font-weight: 700; margin-left: .4em; }
.noticia-compartir { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; }
.noticia-compartir a, .noticia-compartir button { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #DDE3EA; background: #EEF2F6; color: var(--gris-suave); cursor: pointer; padding: 0; transition: transform .25s var(--ease-vivo), background .2s, color .2s, box-shadow .25s; }
.noticia-compartir svg { width: 17px; height: 17px; }
.noticia-compartir a:hover, .noticia-compartir button:hover, .noticia-compartir a:focus-visible, .noticia-compartir button:focus-visible { background: var(--azul-inst); color: #fff; border-color: var(--azul-inst); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(55,52,53,.28); }
.noticia-compartir button.copiado { background: #1E7B4B; border-color: #1E7B4B; color: #fff; }
@media print { .noticia-compartir, .noticia-nota-acciones { display: none; } }
.noticia-nota-foto { margin: 0 0 36px; border-radius: 12px; overflow: hidden; background: var(--azul-profundo); box-shadow: 0 4px 12px rgba(var(--tinta-rgb), .12), 0 18px 44px rgba(var(--tinta-rgb), .18); }
.noticia-nota-foto img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; }
.noticia-nota-cuerpo { max-width: 780px; }
.noticia-nota-cuerpo p { font-size: 18px; line-height: 1.8; color: var(--tinta); text-align: justify; margin-bottom: 1.2em; }
.noticia-nota-entradilla { text-align: left !important; font-family: var(--font-display); font-size: 20px !important; line-height: 1.6 !important; color: var(--azul-inst) !important; padding-left: 18px; border-left: 4px solid var(--celeste); }
.noticia-nota-acciones { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.noticia-btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.noticia-btn svg { width: 18px; height: 18px; flex: none; }
.noticias-mas { padding-top: 56px; }
.noticias-mas-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); color: var(--azul-inst); margin-bottom: 28px; }

/* --- Portada: franja del Aguinaldo ----------------------------------------- */
.aguinaldo-home { background: var(--azul-profundo); color: var(--blanco); position: relative; overflow: hidden; }
.aguinaldo-home-alto { padding: 84px 0 0; }
.aguinaldo-home-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: end; }
.aguinaldo-home-texto { padding-bottom: 150px; align-self: center; }
.aguinaldo-home .eyebrow { color: var(--beige); }
.aguinaldo-home-title { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(30px, 4vw, 48px); line-height: 1.2; color: var(--blanco); margin-bottom: 20px; }
.aguinaldo-home-sub { display: block; margin-top: 6px; font-size: .62em; font-weight: 400; color: var(--beige); }
.aguinaldo-home-title::after { content: ''; display: block; width: 44px; height: 3px; margin-top: 18px; border-radius: 2px; background: var(--beige); }
.aguinaldo-home-resumen { font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.92); max-width: 620px; text-align: justify; margin-bottom: 30px; }
.aguinaldo-btn { display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase; letter-spacing: .08em; font-size: 13px !important; }
.aguinaldo-btn svg { width: 18px; height: 18px; flex: none; transition: transform .2s; }
.aguinaldo-btn:hover svg { transform: translateX(4px); }
.aguinaldo-home-figura { position: relative; align-self: end; justify-self: center; line-height: 0; }
.aguinaldo-home-figura::before { content: ''; position: absolute; inset: -4% -22% 0; background: radial-gradient(closest-side at 50% 40%, rgba(253,203,43,.38), rgba(253,203,43,0) 100%); }
.aguinaldo-home-figura img { position: relative; display: block; width: auto; height: clamp(380px, 38vw, 560px); max-width: 100%; }

/* La franja beige le cruza el torso: el corte inferior del recorte queda oculto. */
.aguinaldo-home-franja { position: relative; z-index: 2; margin-top: -92px; background: var(--beige); padding: 44px 0 48px; box-shadow: 0 -10px 30px rgba(0,0,0,.18); }
.aguinaldo-cita { margin: 0; max-width: 980px; padding-left: 26px; border-left: 5px solid var(--rojo); }
.aguinaldo-cita blockquote { margin: 0; }
.aguinaldo-cita blockquote p { font-family: var(--font-display); font-style: italic; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.5; color: var(--azul-profundo); }
.aguinaldo-cita figcaption { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.aguinaldo-cita-autor { font-weight: 700; font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo-texto); }
.aguinaldo-cita cite { font-style: normal; font-size: 15px; color: var(--azul-profundo); }
.aguinaldo-cita--oscura { border-left-color: var(--beige); }
.aguinaldo-cita--oscura blockquote p { color: var(--blanco); }
.aguinaldo-cita--oscura .aguinaldo-cita-autor { color: var(--beige); }
.aguinaldo-cita--oscura cite { color: rgba(255,255,255,.88); }

@media (max-width: 860px) {
  .aguinaldo-home-resumen { text-align: left; }
  .aguinaldo-home-alto { padding-top: 64px; }
  .aguinaldo-home-grid { grid-template-columns: 1fr; gap: 12px; }
  .aguinaldo-home-texto { padding-bottom: 8px; }
  .aguinaldo-home-figura { order: 2; }
  .aguinaldo-home-figura img { height: 340px; }
  .aguinaldo-home-franja { margin-top: -70px; padding: 36px 0 40px; }
  .aguinaldo-cita { padding-left: 18px; }
}

/* --- Página del Aguinaldo --------------------------------------------------- */
.ag-bloque { padding: 72px 0; }
.ag-title { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; color: var(--azul-inst); margin-bottom: 20px; }
.ag-title::after { content: ''; display: block; width: 44px; height: 3px; margin-top: 16px; border-radius: 2px; background: var(--celeste); }
.ag-bloque p { font-size: 17px; line-height: 1.8; color: var(--tinta); }
.ag-texto p, .ag-columna p { text-align: justify; margin-bottom: 1.1em; }
.ag-columna { max-width: 860px; }
.ag-intro { max-width: 760px; margin-bottom: 40px; }
.ag-dos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; align-items: center; }

.ag-lema { background: var(--azul-profundo); color: var(--blanco); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 6px 16px rgba(var(--tinta-rgb), .16), 0 24px 52px rgba(var(--tinta-rgb), .24); }
.ag-lema-texto { padding: 34px 34px 8px; order: 1; }
.ag-lema-cita { display: inline-block; background: var(--beige); color: var(--azul-profundo); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 4px; margin-bottom: 16px; }
.ag-lema .ag-lema-lema { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.25; color: var(--blanco); margin-bottom: 8px; }
.ag-lema .ag-lema-sub { font-size: 18px; color: var(--beige); }
.ag-lema-foto { order: 2; display: block; width: 62%; height: auto; margin: 10px auto 0; align-self: center; }

.ag-frase { background: var(--azul-inst); padding: 64px 0; }

.ag-cards { display: grid; gap: 24px; }
.ag-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-cards--5 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.ag-card { background: var(--blanco); border-radius: 12px; border-top: 4px solid var(--celeste); padding: 28px 26px 30px; box-shadow: 0 2px 6px rgba(var(--tinta-rgb), .08), 0 10px 26px rgba(var(--tinta-rgb), .11); transition: transform .25s ease, box-shadow .25s ease; }
.ag-card:hover { transform: translateY(-5px); box-shadow: 0 6px 14px rgba(var(--tinta-rgb), .14), 0 22px 44px rgba(var(--tinta-rgb), .22); }
.ag-card h3 { font-family: var(--font-display); font-size: 21px; color: var(--azul-profundo); margin-bottom: 12px; }
.ag-card p { font-size: 16px; line-height: 1.65; }
.ag-card--chica h3 { font-size: 19px; }

.ag-oscuro { background: var(--azul-profundo); color: var(--blanco); }
.ag-oscuro .eyebrow { color: var(--beige); }
.ag-oscuro .ag-title { color: var(--blanco); }
.ag-oscuro .ag-title::after { background: var(--beige); }
.ag-oscuro p { color: rgba(255,255,255,.9); }
.ag-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.ag-paso { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.2); border-radius: 12px; padding: 28px 24px; transition: transform .25s, background .25s; }
.ag-paso:hover { transform: translateY(-4px); background: rgba(255,255,255,.12); }
.ag-paso-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--beige); color: var(--azul-profundo); font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.ag-paso h3 { font-family: var(--font-display); font-size: 22px; color: var(--blanco); margin-bottom: 10px; }
.ag-paso p { font-size: 16px; line-height: 1.65; }

.ag-dos--contexto { align-items: start; }
.ag-fechas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ag-fechas li { background: var(--blanco); border-left: 5px solid var(--celeste); border-radius: 8px; padding: 18px 22px; box-shadow: 0 2px 6px rgba(var(--tinta-rgb), .08), 0 10px 26px rgba(var(--tinta-rgb), .10); }
.ag-fecha-dato { display: block; font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--azul-inst); }
.ag-fecha-rotulo { display: block; font-size: 16px; color: var(--tinta); margin-top: 2px; }

.ag-voces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 40px; }
.ag-voces li { background: var(--blanco); border-left: 5px solid var(--celeste); border-radius: 10px; padding: 22px 26px; font-family: var(--font-display); font-style: italic; font-size: 19px; line-height: 1.55; color: var(--azul-profundo); box-shadow: 0 2px 6px rgba(var(--tinta-rgb), .08), 0 10px 26px rgba(var(--tinta-rgb), .10); transition: transform .35s var(--ease-vivo), box-shadow .35s var(--ease-vivo), border-color .25s; }
.ag-voces li:hover { transform: translateY(-4px); border-left-color: var(--rojo); box-shadow: 0 6px 14px rgba(var(--tinta-rgb), .14), 0 22px 44px rgba(var(--tinta-rgb), .20); }

@media (max-width: 991px) {
  .ag-dos { grid-template-columns: 1fr; gap: 36px; }
  .ag-cards--3 { grid-template-columns: 1fr; }
  .ag-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ag-voces { grid-template-columns: 1fr; }
  .ag-lema-foto { width: 52%; }
}
@media (max-width: 560px) {
  .ag-bloque { padding: 52px 0; }
  .ag-pasos { grid-template-columns: 1fr; }
  .ag-frase { padding: 48px 0; }
}

/* ==========================================================================
   RELIEVE Y MOVIMIENTO — el lenguaje de «cajas vivas» de salesianosfs.edu.pe
   (Decisión 105). Mismo criterio que usan salesianosfs.test y rosenthal.test:

     · TODA caja con texto + foto o ícono tiene sombra de dos capas (contacto
       corto + sombra larga) y, al pasar el puntero, SUBE (-6 px) y la sombra
       crece. Mismo relieve que los botones.
     · Las FOTOS se acercan despacio (escala 1,06 en .7 s, curva suave).
     · Los retratos recortados (Don Bosco, Rector Mayor) crecen apenas, ancla
       abajo, con sombra proyectada.
     · Los ÍCONOS giran un poco y se agrandan.
     · En las tarjetas con foto aparece un FILETE celeste que crece desde la
       izquierda.
     · Con «reducir movimiento» activado en el sistema, todo queda quieto.

   Los colores siguen siendo los del Manual V4. Esta capa va al final a
   propósito: unifica los ~20 hover anteriores sin tocar cada bloque de zona.
   ========================================================================== */
:root {
  --realce:            0 2px 5px rgba(var(--tinta-rgb), .10), 0 8px 22px rgba(var(--tinta-rgb), .13);
  --realce-alto:       0 4px 12px rgba(var(--tinta-rgb), .14), 0 16px 38px rgba(var(--tinta-rgb), .22);
  --realce-oscuro:     0 2px 6px rgba(0,0,0,.24), 0 8px 24px rgba(0,0,0,.30);
  --realce-oscuro-alto:0 4px 14px rgba(0,0,0,.32), 0 16px 38px rgba(0,0,0,.46);
  --ease-vivo: cubic-bezier(.16, .84, .44, 1);
}

/* --- 1 · Cajas claras: relieve en reposo, sube y se despega al pasar ------- */
.oratoriano-card,
.nuestros-valores-card,
.recurso-card,
.red-colegio-card,
.identidad-perfil-card,
.equipo-card,
.instrumento-card,
.galeria-thumb,
.noticia-card-caja,
.ag-card {
  box-shadow: var(--realce);
  transition: transform .35s var(--ease-vivo), box-shadow .35s ease, border-color .3s ease;
}
.oratoriano-card:hover,
.nuestros-valores-card:hover,
.recurso-card:hover,
.red-colegio-card:hover,
.identidad-perfil-card:hover,
.equipo-card:hover,
.instrumento-card:hover,
.galeria-thumb:hover,
.galeria-thumb:focus-visible,
.noticia-card-caja:hover,
.noticia-card-caja:focus-visible,
.ag-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--realce-alto);
}

/* Cajas grandes (fichas, marcos, bloques de texto): sube menos para no marear */
.colegio-row,
.documentos-frame,
.calendario-frame,
.identidad-dimension,
.colegio-perfil-grid {
  box-shadow: var(--realce);
  transition: transform .35s var(--ease-vivo), box-shadow .35s ease;
}
.colegio-row:hover,
.documentos-frame:hover,
.calendario-frame:hover,
.identidad-dimension:hover,
.colegio-perfil-grid:hover {
  transform: translateY(-4px);
  box-shadow: var(--realce-alto);
}

/* Cajas sobre fondo oscuro o foto: la sombra es negra, no azul */
.hitos-card,
.mv-card,
.noticia-mosaico-caja {
  box-shadow: var(--realce-oscuro);
  transition: transform .35s var(--ease-vivo), box-shadow .35s ease, background .35s ease;
}
.hitos-card:hover,
.mv-card:hover,
.noticia-mosaico-caja:hover,
.noticia-mosaico-caja:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--realce-oscuro-alto);
}
.ag-paso { transition: transform .35s var(--ease-vivo), box-shadow .35s ease, background .35s ease; box-shadow: var(--realce-oscuro); }
.ag-paso:hover { transform: translateY(-6px); box-shadow: var(--realce-oscuro-alto); background: rgba(255,255,255,.12); }
.ag-fechas li { transition: transform .35s var(--ease-vivo), box-shadow .35s ease; }
.ag-fechas li:hover { transform: translateY(-4px); box-shadow: var(--realce-alto); }

/* --- 2 · Íconos: giran y se agrandan cuando la caja se activa -------------- */
.oratoriano-icon,
.nuestros-valores-icon,
.recurso-icon,
.hitos-icon,
.mv-icon,
.identidad-perfil-card-icon,
.valor-icon {
  transition: transform .35s ease, box-shadow .35s ease;
}
.oratoriano-card:hover .oratoriano-icon,
.nuestros-valores-card:hover .nuestros-valores-icon,
.recurso-card:hover .recurso-icon,
.hitos-card:hover .hitos-icon,
.mv-card:hover .mv-icon,
.identidad-perfil-card:hover .identidad-perfil-card-icon,
.valor-item:hover .valor-icon {
  transform: scale(1.08) rotate(-6deg);
}
.oratoriano-card:hover .oratoriano-icon,
.nuestros-valores-card:hover .nuestros-valores-icon,
.recurso-card:hover .recurso-icon,
.hitos-card:hover .hitos-icon,
.identidad-perfil-card:hover .identidad-perfil-card-icon { box-shadow: 0 8px 18px rgba(var(--tinta-rgb), .28); }

/* --- 3 · Fotos de fondo (span/div con background-image): zoom interior ------
   Se anima un pseudo-elemento que hereda la misma imagen; la caja recorta. Así
   no hay que tocar el HTML de ninguna foto. */
.red-colegio-photo,
.equipo-card-photo,
.colegio-photo,
.colegio-perfil-photo,
.comunidad-foto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.red-colegio-photo::before,
.equipo-card-photo::before,
.colegio-photo::before,
.colegio-perfil-photo::before,
.comunidad-foto::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  transition: transform .7s var(--ease-vivo);
  z-index: -1;
}
.red-colegio-card:hover .red-colegio-photo::before,
.equipo-card:hover .equipo-card-photo::before,
.colegio-row:hover .colegio-photo::before,
.colegio-perfil-photo:hover::before,
.comunidad-educativa:hover .comunidad-foto::before { transform: scale(1.06); }

/* --- 4 · Fotos <img>: zoom interior -------------------------------------- */
.galeria-thumb img,
.instrumento-card img,
.noticia-card-foto img,
.noticia-mosaico-caja img,
.noticia-nota-foto img { transition: transform .7s var(--ease-vivo); }
.galeria-thumb:hover img,
.galeria-thumb:focus-visible img,
.instrumento-card:hover img,
.noticia-card-caja:hover .noticia-card-foto img,
.noticia-mosaico-caja:hover img,
.noticia-nota-foto:hover img { transform: scale(1.06); }
.instrumento-card { overflow: hidden; }

/* --- 5 · Retratos recortados: crecen apenas, anclados abajo ---------------- */
.educar-corazon-img,
.aguinaldo-home-figura img,
.ag-lema-foto {
  transform-origin: 50% 100%;
  transition: transform .6s var(--ease-vivo);
}
.educar-corazon-media:hover .educar-corazon-img,
.aguinaldo-home-figura:hover img,
.ag-lema:hover .ag-lema-foto { transform: scale(1.035); }

/* --- 6 · Filete celeste que crece desde la izquierda (tarjetas con foto) ---- */
.red-colegio-body,
.noticia-card-cuerpo,
.equipo-card-body { position: relative; }
.red-colegio-body::before,
.noticia-card-cuerpo::before,
.equipo-card-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--celeste);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease-vivo);
}
.red-colegio-card:hover .red-colegio-body::before,
.noticia-card-caja:hover .noticia-card-cuerpo::before,
.equipo-card:hover .equipo-card-body::before { transform: scaleX(1); }

/* La flecha «Leer más →» avanza */
.noticia-card-mas span { display: inline-block; transition: transform .25s ease; }
.noticia-card-caja:hover .noticia-card-mas span { transform: translateX(5px); }

/* --- 7 · Movimiento reducido: todo quieto ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .oratoriano-card, .nuestros-valores-card, .recurso-card, .red-colegio-card, .identidad-perfil-card,
  .equipo-card, .instrumento-card, .galeria-thumb, .noticia-card-caja, .ag-card, .colegio-row,
  .documentos-frame, .calendario-frame, .identidad-dimension, .colegio-perfil-grid,
  .hitos-card, .mv-card, .noticia-mosaico-caja, .ag-paso, .ag-fechas li, .ag-voces li,
  .oratoriano-icon, .nuestros-valores-icon, .recurso-icon, .hitos-icon, .mv-icon, .identidad-perfil-card-icon, .valor-icon,
  .educar-corazon-img, .aguinaldo-home-figura img, .ag-lema-foto,
  .red-colegio-photo::before, .equipo-card-photo::before, .colegio-photo::before,
  .colegio-perfil-photo::before, .comunidad-foto::before,
  .galeria-thumb img, .instrumento-card img, .noticia-card-foto img, .noticia-mosaico-caja img, .noticia-nota-foto img,
  .red-colegio-body::before, .noticia-card-cuerpo::before, .equipo-card-body::before { transition: none !important; }
  .oratoriano-card:hover, .nuestros-valores-card:hover, .recurso-card:hover, .red-colegio-card:hover,
  .identidad-perfil-card:hover, .equipo-card:hover, .instrumento-card:hover, .galeria-thumb:hover,
  .noticia-card-caja:hover, .ag-card:hover, .colegio-row:hover, .documentos-frame:hover, .calendario-frame:hover,
  .identidad-dimension:hover, .colegio-perfil-grid:hover, .hitos-card:hover, .mv-card:hover,
  .noticia-mosaico-caja:hover, .ag-paso:hover, .ag-fechas li:hover, .ag-voces li:hover { transform: none; }
  .galeria-thumb:hover img, .instrumento-card:hover img, .noticia-card-caja:hover .noticia-card-foto img,
  .noticia-mosaico-caja:hover img, .noticia-nota-foto:hover img,
  .educar-corazon-media:hover .educar-corazon-img, .aguinaldo-home-figura:hover img, .ag-lema:hover .ag-lema-foto,
  .red-colegio-card:hover .red-colegio-photo::before, .equipo-card:hover .equipo-card-photo::before,
  .colegio-row:hover .colegio-photo::before, .colegio-perfil-photo:hover::before,
  .comunidad-educativa:hover .comunidad-foto::before { transform: none; }
}

/* ==========================================================================
   FRANJA DEL SISTEMA PREVENTIVO (Decisión 108) — misma diagramación que la
   franja de salesianosfs: columna de presentación + tres pilares con filete
   superior, ícono + título serif y texto. Color: se mantiene el azul RSE.
   ========================================================================== */
.sp-franja { padding: 0; }
.sp-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr 1fr 1fr;
  gap: 0 48px;
  padding: 52px 0 60px;
  align-items: start;
}
.sp-intro, .sp-pilar { border-top: 1px solid rgba(253,230,140,.6); padding-top: 26px; }
.sp-eyebrow { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--beige); margin-bottom: 14px; }
.sp-titulo { font-family: var(--font-display); font-size: clamp(22px, 2.1vw, 28px); line-height: 1.28; font-weight: 700; color: var(--blanco); margin-bottom: 26px; text-wrap: balance; }
.sp-pilar-titulo { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 24px; line-height: 1.2; font-weight: 700; color: var(--blanco); text-transform: none; letter-spacing: 0; margin: 0 0 16px; }
.sp-pilar-icon { width: 34px; height: 34px; flex-shrink: 0; opacity: .95; }
.sp-pilar p { font-size: 15.5px; line-height: 1.75; color: rgba(255,255,255,.88); text-align: left; margin: 0; }
.sp-pilar { transition: border-color .3s ease; }
.sp-pilar:hover { border-top-color: var(--beige); }
@media (max-width: 1100px) {
  .sp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 36px; padding: 44px 0 52px; }
  .sp-intro { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 0 32px; align-items: end; }
  .sp-intro .sp-eyebrow { grid-column: 1 / -1; }
  .sp-titulo { margin-bottom: 0; }
}
@media (max-width: 760px) {
  .sp-grid { grid-template-columns: 1fr; gap: 30px; padding: 36px 0 44px; }
  .sp-intro { display: block; }
  .sp-titulo { margin-bottom: 22px; }
}

/* -- Don Bosco con vida sutil (opción 1): respira, la luz le recorre el
      rostro y el retrato se desplaza apenas con el cursor. Se activa solo
      cuando es visible (js/main.js agrega .viva) y se apaga con
      «reducir movimiento». -------------------------------------------------- */
.educar-corazon-media { position: relative; transform-origin: 50% 100%; translate: var(--dx, 0) var(--dy, 0); transition: translate .5s ease-out; }
.educar-corazon-media::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 38% 30% at var(--luz-x, 50%) var(--luz-y, 22%), rgba(255,236,196,.55), rgba(255,236,196,0) 70%);
  mix-blend-mode: soft-light;
  -webkit-mask: url(../img/donbosco.webp) center / 100% 100% no-repeat;
          mask: url(../img/donbosco.webp) center / 100% 100% no-repeat;
}
.educar-corazon-media.viva { animation: don-bosco-respira 7s ease-in-out infinite; }
.educar-corazon-media.viva::after { animation: don-bosco-luz 11s ease-in-out infinite; }
@keyframes don-bosco-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012, 1.018); } }
@keyframes don-bosco-luz {
  0%, 100% { opacity: .0; --luz-x: 38%; --luz-y: 24%; }
  30%      { opacity: .9; --luz-x: 46%; --luz-y: 20%; }
  60%      { opacity: .7; --luz-x: 56%; --luz-y: 25%; }
}
@property --luz-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --luz-y { syntax: '<percentage>'; inherits: true; initial-value: 22%; }
@media (prefers-reduced-motion: reduce) {
  .educar-corazon-media, .educar-corazon-media.viva { animation: none !important; translate: none; transition: none; }
  .educar-corazon-media::after, .educar-corazon-media.viva::after { animation: none !important; opacity: 0; }
}

/* ==========================================================================
   MODELO EDUCATIVO SALESIANO (Decisión 106) — Patio · Escuela · Casa · Parroquia
   Páginas: modelo-educativo, patio, propuesta-educativa, sistema-preventivo,
   matriz-axiologica, metodologia, niveles, primaria, secundaria, tutoria,
   pastoral (plantilla inc/modelo-pagina.php, contenido inc/modelo-data.php).

   Las «cajas» siguen el estilo de la página Pastoral de rosenthal.test:
     · .me-clave  — tarjeta blanca, círculo de ícono, número grande de marca de
                    agua, filete de color que crece desde la izquierda y sube
                    (-6 px) al pasar el puntero.
     · .me-valor  — tarjeta oscura translúcida sobre azul profundo.
   El acento de cada espacio sale de --me-acc (Patio celeste, Escuela azul,
   Casa rojo, Parroquia beige), siempre con colores del Manual V4.
   ========================================================================== */

/* Menú: subítems de «Escuela» */
.dropdown .dropdown-sub a { position: relative; padding-left: 40px; font-weight: 400; font-size: 13.5px; color: var(--gris-suave); }
.dropdown .dropdown-sub a::before { content: ''; position: absolute; left: 22px; top: 50%; width: 9px; height: 1px; background: var(--celeste); }
.dropdown .dropdown-sub a:hover, .dropdown .dropdown-sub a[aria-current="page"] { color: var(--azul-inst); }
@media (max-width: 1100px) { .dropdown .dropdown-sub a { padding-left: 34px; } }

/* Botonera de los cuatro espacios */
.me-espacios-nav { background: var(--fondo-suave); border-bottom: 1px solid var(--gris-borde); box-shadow: 0 8px 20px rgba(var(--tinta-rgb), .06); position: relative; z-index: 3; }
.me-espacios-nav-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.me-pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 20px 7px 7px; border-radius: 999px; background: var(--fondo-suave); border: 1px solid transparent; color: var(--azul-profundo); font-weight: 700; font-size: 16px; transition: transform .3s var(--ease-vivo), box-shadow .3s ease, border-color .25s, background .25s, color .25s; }
.me-pill-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--me-acc-rgb), .22); color: var(--me-ico); transition: transform .4s var(--ease-vivo); }
.me-pill-ico svg { width: 19px; height: 19px; }
.me-pill:hover, .me-pill:focus-visible { transform: translateY(-3px); box-shadow: var(--realce); border-color: rgba(var(--me-acc-rgb), .7); background: var(--blanco); }
.me-pill:hover .me-pill-ico { transform: scale(1.08) rotate(-6deg); }
.me-pill.is-current { background: var(--azul-profundo); color: var(--blanco); }
.me-pill.is-current .me-pill-ico { background: var(--beige); color: var(--azul-profundo); }

/* Secciones y fondos */
.me-seccion { padding: 84px 0; }
.me-f-wb { background: var(--blanco); }
.me-f-bw { background: var(--fondo-suave); }
.me-f-oscuro { background: var(--azul-profundo); color: var(--blanco); }
.me-s-cita { background: var(--azul-inst); padding: 68px 0; }

.me-cabeza { max-width: 780px; margin: 0 0 44px; }
.me-cabeza--centro { margin-left: auto; margin-right: auto; text-align: center; }
.me-titulo { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; color: var(--azul-inst); margin-bottom: 4px; }
.me-titulo::after { content: ''; display: block; width: 44px; height: 3px; margin-top: 16px; border-radius: 2px; background: var(--celeste); }
.me-cabeza--centro .me-titulo::after { margin-left: auto; margin-right: auto; }
.me-lead { font-size: 17px; line-height: 1.75; color: var(--tinta); margin-top: 18px; }
.me-f-oscuro .eyebrow { color: var(--beige); }
.me-f-oscuro .me-titulo { color: var(--blanco); }
.me-f-oscuro .me-titulo::after { background: var(--beige); }
.me-f-oscuro .me-lead { color: rgba(255,255,255,.9); }

/* Texto + aside */
.me-dos { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.me-texto p { font-size: 17px; line-height: 1.85; color: var(--tinta); margin-bottom: 1.1em; text-align: justify; hyphens: auto; }
.me-aside { position: relative; overflow: hidden; background: linear-gradient(145deg, var(--azul-profundo) 0%, var(--azul-inst) 100%); color: var(--blanco); border-radius: 18px; padding: 40px 38px 42px; box-shadow: var(--realce-oscuro); transition: transform .35s var(--ease-vivo), box-shadow .35s ease; }
.me-aside:hover { transform: translateY(-4px); box-shadow: var(--realce-oscuro-alto); }
.me-aside-num { position: absolute; top: -6px; right: 22px; font-family: var(--font-display); font-weight: 900; font-size: 130px; line-height: 1; color: var(--blanco); opacity: .09; }
.me-aside-icono { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--beige); color: var(--azul-profundo); margin-bottom: 22px; transition: transform .45s var(--ease-vivo); }
.me-aside:hover .me-aside-icono { transform: scale(1.08) rotate(-6deg); }
.me-aside-icono svg { width: 32px; height: 32px; }
.me-aside-lema { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(22px, 2.4vw, 29px); line-height: 1.3; color: var(--blanco); margin-bottom: 12px; }
.me-aside-texto { font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.9); }

/* Cajas */
.me-cajas { display: grid; gap: 28px; }
.me-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.me-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.me-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.me-cols-1 { grid-template-columns: minmax(0, 1fr); }

.me-clave, .me-espacio { position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .07); border-radius: 16px; padding: 34px 30px 38px; box-shadow: var(--realce); color: var(--tinta); text-decoration: none; transition: transform .35s var(--ease-vivo), box-shadow .35s ease, border-color .3s ease; }
.me-clave::after, .me-espacio::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--me-acc); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-vivo); }
.me-clave:hover, .me-clave:focus-visible, .me-espacio:hover { transform: translateY(-6px); box-shadow: var(--realce-alto); border-color: rgba(var(--me-acc-rgb), .55); }
.me-clave:hover::after, .me-clave:focus-visible::after, .me-espacio:hover::after { transform: scaleX(1); }

.me-num { position: absolute; top: 6px; right: 20px; font-family: var(--font-display); font-weight: 900; font-size: 96px; line-height: 1; color: var(--azul-inst); opacity: .07; pointer-events: none; transition: transform .5s var(--ease-vivo), opacity .4s; }
.me-clave:hover .me-num, .me-espacio:hover .me-num, .me-valor:hover .me-num { transform: translateY(-4px) scale(1.06); opacity: .11; }

.me-icono { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; background: rgba(var(--me-acc-rgb), .18); color: var(--me-ico, var(--azul-inst)); margin-bottom: 20px; transition: transform .45s var(--ease-vivo); }
.me-icono svg { width: 28px; height: 28px; }
.me-icono--grande { width: 74px; height: 74px; }
.me-icono--grande svg { width: 34px; height: 34px; }
.me-clave:hover .me-icono, .me-espacio:hover .me-icono, .me-valor:hover .me-icono { transform: scale(1.08) rotate(-6deg); }

.me-etiqueta { align-self: flex-start; background: var(--beige); color: var(--azul-profundo); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 4px; margin-bottom: 14px; }
.me-clave h3, .me-espacio h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.3; color: var(--azul-inst); margin-bottom: 10px; }
.me-clave p, .me-espacio p { font-size: 16.5px; line-height: 1.7; color: var(--tinta); }
@media (min-width: 861px) { .me-clave p, .me-espacio p { text-align: justify; hyphens: auto; } }

.me-lista { margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.me-lista li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.55; color: var(--tinta); }
.me-lista li::before { content: ''; position: absolute; left: 3px; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: var(--celeste); }
.me-mas { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font-size: 15px; font-weight: 700; letter-spacing: .03em; color: var(--azul-inst); }
.me-mas svg { width: 18px; height: 18px; transition: transform .3s var(--ease-vivo); }
.me-caja--link:hover .me-mas svg { transform: translateX(6px); }

/* Foto en las cajas «clave» y «valor» (Decisión 115): la imagen ocupa todo el ancho de
   la tarjeta (16:10), el círculo del icono se monta sobre su borde inferior y el
   número va en blanco sobre la foto. Al pasar el cursor, la foto se acerca. */
.me-clave.me-caja--foto, .me-valor.me-caja--foto { padding-top: 0; }
.me-caja-foto { display: block; margin: 0 -30px 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--azul-profundo); }
.me-caja-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-vivo); }
.me-caja--foto:hover .me-caja-foto img, .me-caja--foto:focus-visible .me-caja-foto img { transform: scale(1.06); }
.me-caja--foto .me-icono { margin-top: -30px; position: relative; z-index: 1; width: 60px; height: 60px; background-color: #fff; background-image: linear-gradient(rgba(var(--me-acc-rgb), .18), rgba(var(--me-acc-rgb), .18)); box-shadow: 0 0 0 4px var(--blanco), var(--realce); }
.me-valor.me-caja--foto .me-icono { background-color: var(--azul-profundo); background-image: linear-gradient(rgba(253,230,140,.16), rgba(253,230,140,.16)); box-shadow: 0 0 0 4px var(--azul-profundo), 0 6px 16px rgba(0,0,0,.35); }
.me-caja--foto .me-num { top: 12px; right: 18px; z-index: 1; color: #fff; opacity: .92; font-size: 64px; text-shadow: 0 2px 14px rgba(0,0,0,.5); }
.me-caja--foto:hover .me-num { opacity: 1; transform: translateY(-4px) scale(1.06); }
.me-valor.me-caja--foto .me-num { opacity: .92; }
.me-caja--foto h3 { margin-top: 2px; }
@media (max-width: 640px) { .me-caja-foto { margin-inline: -24px; } }

/* Caja oscura */
.me-valor { position: relative; overflow: hidden; display: flex; flex-direction: column; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 16px; padding: 34px 30px 36px; color: var(--blanco); text-decoration: none; transition: transform .35s var(--ease-vivo), box-shadow .35s ease, border-color .3s ease, background .3s ease; }
.me-valor:hover, .me-valor:focus-visible { transform: translateY(-6px); background: rgba(255,255,255,.11); border-color: rgba(253,230,140,.6); box-shadow: var(--realce-oscuro-alto); }
.me-valor .me-num { color: var(--blanco); opacity: .08; }
.me-valor .me-icono { background: rgba(253,230,140,.16); color: var(--beige); }
.me-valor h3 { font-family: var(--font-display); font-size: 21px; line-height: 1.3; color: var(--blanco); margin-bottom: 10px; }
.me-valor p { font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.9); }
@media (min-width: 861px) { .me-valor p { text-align: justify; hyphens: auto; } }
.me-valor .me-lista li { color: rgba(255,255,255,.92); }
.me-valor .me-lista li::before { background: var(--beige); }
.me-valor .me-mas { color: var(--beige); }

/* Cita */
.me-cita { max-width: 900px; margin: 0 auto; text-align: center; color: var(--blanco); }
.me-cita blockquote { position: relative; }
.me-cita blockquote::before { content: '«'; display: block; font-family: var(--font-display); font-size: 80px; line-height: .6; color: var(--beige); margin-bottom: 14px; }
.me-cita p { font-family: var(--font-display); font-style: italic; font-size: clamp(20px, 2.4vw, 27px); line-height: 1.55; color: var(--blanco); }
.me-cita figcaption { margin-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--beige); }

/* Chips (áreas curriculares) */
.me-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 1000px; margin: 0 auto; }
.me-chips li { padding: 11px 22px; border-radius: 999px; border: 1px solid rgba(253,230,140,.55); background: rgba(255,255,255,.07); color: var(--blanco); font-size: 16.5px; font-weight: 600; transition: transform .3s var(--ease-vivo), background .25s, box-shadow .3s; }
.me-chips li:hover { transform: translateY(-4px); background: rgba(255,255,255,.14); box-shadow: var(--realce-oscuro); }

/* Hub del modelo: los cuatro espacios en caja grande */
.me-espacios-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.me-espacio { padding: 42px 40px 40px; }
.me-espacio .me-num { font-size: 130px; top: 4px; right: 26px; }
.me-espacio h3 { font-size: 30px; margin-bottom: 4px; }
.me-espacio .me-espacio-lema { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--rojo-texto); margin-bottom: 14px; }
/* Foto de cada espacio (Decisión 114): a todo el ancho de la tarjeta, con el círculo
   del icono montado sobre su borde inferior y el número en blanco sobre la foto. */
.me-espacio--foto { padding-top: 0; }
.me-espacio-foto { margin: 0 -40px 0; aspect-ratio: 2 / 1; overflow: hidden; background: var(--azul-profundo); }
.me-espacio-foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-vivo); }
.me-espacio--foto:hover .me-espacio-foto img { transform: scale(1.06); }
.me-espacio--foto .me-icono { margin-top: -37px; position: relative; z-index: 1; box-shadow: 0 0 0 5px var(--blanco), var(--realce); background-color: #fff; background-image: linear-gradient(rgba(var(--me-acc-rgb), .18), rgba(var(--me-acc-rgb), .18)); }
.me-espacio--foto .me-icono + h3 { margin-top: 2px; }
.me-espacio--foto .me-num { top: 14px; right: 24px; color: #fff; opacity: .9; text-shadow: 0 2px 14px rgba(0,0,0,.45); font-size: 84px; z-index: 1; }
.me-espacio--foto:hover .me-num { opacity: 1; }
.me-espacio--foto .me-espacio-enlaces { padding-top: 22px; }
.me-espacio-enlaces { margin-top: auto; padding-top: 24px; display: grid; gap: 8px; }
.me-espacio-enlaces a { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 10px; background: var(--fondo-suave); border: 1px solid transparent; color: var(--azul-profundo); font-weight: 700; font-size: 16px; transition: transform .3s var(--ease-vivo), background .25s, border-color .25s, box-shadow .3s; }
.me-espacio-enlaces a svg { width: 18px; height: 18px; flex: none; color: var(--azul-inst); transition: transform .3s var(--ease-vivo); }
.me-espacio-enlaces a:hover, .me-espacio-enlaces a:focus-visible { transform: translateX(4px); background: var(--blanco); border-color: rgba(var(--me-acc-rgb), .7); box-shadow: var(--realce); }
.me-espacio-enlaces a:hover svg { transform: translateX(4px); }

/* Niveles: dos cajas grandes (sin foto: plancha de marca con la inicial) */
.me-niveles-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.me-nivel { position: relative; overflow: hidden; min-height: 400px; display: flex; align-items: flex-end; border-radius: 20px; padding: 46px 44px; color: var(--blanco); box-shadow: var(--realce-oscuro); transition: transform .4s var(--ease-vivo), box-shadow .4s ease; }
.me-nivel--primaria { background: linear-gradient(135deg, var(--azul-profundo) 0%, var(--azul-inst) 100%); }
.me-nivel--secundaria { background: linear-gradient(135deg, var(--azul-inst) 0%, #0079B5 100%); }
.me-nivel:hover { transform: translateY(-5px); box-shadow: var(--realce-oscuro-alto); }
.me-nivel-inicial { position: absolute; right: -14px; top: -70px; font-family: var(--font-display); font-weight: 900; font-size: 420px; line-height: 1; color: var(--blanco); opacity: .07; transform-origin: 70% 60%; transition: transform .8s var(--ease-vivo); pointer-events: none; }
.me-nivel:hover .me-nivel-inicial { transform: scale(1.06); }
.me-nivel-cuerpo { position: relative; z-index: 1; }
.me-nivel-grados { display: inline-block; background: var(--beige); color: var(--azul-profundo); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 13px; border-radius: 4px; margin-bottom: 18px; }
.me-nivel h2 { font-family: var(--font-display); font-size: clamp(34px, 4vw, 48px); line-height: 1.1; color: var(--blanco); margin-bottom: 14px; }
.me-nivel-texto { font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.93); max-width: 460px; margin-bottom: 26px; }

/* Obras de la Red por nivel */
.me-obras { display: grid; gap: 28px; }
.me-obras-col { background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .07); border-radius: 16px; padding: 30px 30px 24px; box-shadow: var(--realce); }
.me-obras-col h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-size: 22px; color: var(--azul-inst); padding-bottom: 14px; margin-bottom: 6px; border-bottom: 3px solid var(--celeste); }
.me-obras-col h3 span { font-family: var(--font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--beige); color: var(--azul-profundo); padding: 4px 10px; border-radius: 4px; }
.me-obras-col li a { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--gris-borde); font-size: 16.5px; font-weight: 600; color: var(--tinta); transition: color .2s, padding-left .3s var(--ease-vivo); }
.me-obras-col li:last-child a { border-bottom: 0; }
.me-obras-col li a svg { width: 17px; height: 17px; flex: none; color: var(--celeste); transition: transform .3s var(--ease-vivo); }
.me-obras-col li a:hover { color: var(--azul-inst); padding-left: 10px; }
.me-obras-col li a:hover svg { transform: translateX(4px); }
.me-nota { text-align: center; margin-top: 30px; font-size: 16px; color: var(--gris-suave); }
.me-nota a { color: var(--azul-inst); font-weight: 700; border-bottom: 1px solid rgba(55,52,53,.35); }
.me-nota a:hover { border-color: var(--azul-inst); }

/* Botones */
.me-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 46px; }
.me-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 26px; border-radius: 8px; border: 2px solid var(--azul-inst); background: transparent; color: var(--azul-inst); font-weight: 700; font-size: 16px; letter-spacing: .01em; box-shadow: var(--realce); transition: transform .3s var(--ease-vivo), box-shadow .3s ease, background .25s, color .25s, border-color .25s; }
.me-btn svg { width: 18px; height: 18px; flex: none; transition: transform .3s var(--ease-vivo); }
.me-btn:hover, .me-btn:focus-visible { transform: translateY(-3px); box-shadow: var(--realce-alto); background: var(--azul-inst); color: var(--blanco); }
.me-btn:hover svg { transform: translateX(4px); }
.me-btn--solido { background: var(--azul-inst); color: var(--blanco); }
.me-btn--solido:hover, .me-btn--solido:focus-visible { background: var(--azul-profundo); border-color: var(--azul-profundo); }
.me-btn--claro { background: var(--blanco); border-color: var(--blanco); color: var(--azul-profundo); }
.me-btn--claro:hover, .me-btn--claro:focus-visible { background: var(--beige); border-color: var(--beige); color: var(--azul-profundo); }
.me-f-oscuro .me-btn { border-color: var(--beige); color: var(--beige); box-shadow: var(--realce-oscuro); }
.me-f-oscuro .me-btn--solido { background: var(--beige); color: var(--azul-profundo); }
.me-f-oscuro .me-btn:hover, .me-f-oscuro .me-btn:focus-visible { background: var(--blanco); border-color: var(--blanco); color: var(--azul-profundo); }

/* Responsive */
@media (max-width: 1100px) {
  .me-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .me-seccion { padding: 64px 0; }
  .me-dos { grid-template-columns: 1fr; gap: 36px; }
  .me-cols-3, .me-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-espacios-grid, .me-niveles-hub { grid-template-columns: 1fr; }
  .me-nivel { min-height: 340px; }
}
@media (max-width: 640px) {
  .me-seccion { padding: 52px 0; }
  .me-cols-4, .me-cols-3, .me-cols-2 { grid-template-columns: 1fr; }
  .me-obras { grid-template-columns: 1fr; }
  .me-espacios-nav-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .me-pill { padding-right: 12px; font-size: 15px; }
  .me-clave, .me-valor { padding: 28px 24px 32px; }
  .me-espacio { padding: 32px 26px; }
  .me-espacio--foto { padding-top: 0; }
  .me-espacio-foto { margin-inline: -26px; }
  .me-espacio--foto .me-num { font-size: 64px; }
  .me-nivel { padding: 34px 26px; }
  .me-nivel-inicial { font-size: 300px; top: -40px; }
  .me-botones .me-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .me-pill, .me-pill-ico, .me-aside, .me-aside-icono, .me-clave, .me-clave::after, .me-espacio, .me-espacio::after,
  .me-num, .me-icono, .me-valor, .me-chips li, .me-espacio-enlaces a, .me-nivel, .me-nivel-inicial, .me-btn,
  .me-mas svg, .me-btn svg, .me-obras-col li a, .me-obras-col li a svg, .me-espacio-enlaces a svg { transition: none !important; }
  .me-pill:hover, .me-aside:hover, .me-clave:hover, .me-espacio:hover, .me-valor:hover, .me-chips li:hover,
  .me-espacio-enlaces a:hover, .me-nivel:hover, .me-btn:hover { transform: none; }
  .me-clave:hover .me-icono, .me-espacio:hover .me-icono, .me-valor:hover .me-icono, .me-aside:hover .me-aside-icono,
  .me-pill:hover .me-pill-ico, .me-nivel:hover .me-nivel-inicial, .me-clave:hover .me-num, .me-espacio:hover .me-num, .me-valor:hover .me-num { transform: none; }
}

/* --- INICIO: «Modelo Educativo Salesiano» en cajas al estilo rosenthal/pastoral --- */
.me-lema { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 15.5px; line-height: 1.4; color: var(--rojo-texto); margin-bottom: 12px; }
.or-cajas .me-clave p { text-align: left; hyphens: manual; font-size: 16px; }
.or-cajas .me-clave h3 { font-size: 24px; margin-bottom: 6px; }
.or-cajas .me-clave { padding-top: 38px; }
@media (max-width: 1100px) { .or-cajas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .or-cajas { grid-template-columns: 1fr; } }

/* --- INICIO: franja STAFF (después de Don Bosco) ------------------------------ */
.staff { padding: 84px 0 76px; background: var(--blanco); }
.staff-cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.staff-cabeza-texto { max-width: 760px; }
.staff-title { font-family: var(--font-display); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.25; color: var(--azul-inst); }
.staff-title::after { content: ''; display: block; width: 44px; height: 3px; margin-top: 16px; border-radius: 2px; background: var(--celeste); }
.staff-lead { font-size: 17px; line-height: 1.75; color: var(--tinta); margin-top: 18px; }
.staff-flechas { display: flex; gap: 10px; flex: none; }
.staff-flecha { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--azul-inst); background: var(--blanco); color: var(--azul-inst); cursor: pointer; box-shadow: var(--realce); transition: transform .3s var(--ease-vivo), box-shadow .3s ease, background .25s, color .25s, opacity .25s; }
.staff-flecha svg { width: 22px; height: 22px; }
.staff-flecha:hover:not(:disabled), .staff-flecha:focus-visible { transform: translateY(-3px); background: var(--azul-inst); color: var(--blanco); box-shadow: var(--realce-alto); }
.staff-flecha:disabled { opacity: .35; cursor: default; box-shadow: none; }

.staff-pista { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 14px 4px 34px; margin: 0 -4px; scrollbar-width: thin; scrollbar-color: var(--celeste) transparent; }
.staff-pista:focus-visible { outline: 3px solid var(--celeste); outline-offset: 4px; border-radius: 12px; }
.staff-card { flex: 0 0 calc((100% - 72px) / 4); min-width: 232px; scroll-snap-align: start; background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .07); border-radius: 16px; overflow: hidden; box-shadow: var(--realce); transition: transform .35s var(--ease-vivo), box-shadow .35s ease; }
.staff-card:hover { transform: translateY(-6px); box-shadow: var(--realce-alto); }
.staff-card-foto { position: relative; aspect-ratio: 1 / 1; background-color: var(--fondo-suave); background-size: cover; background-position: center top; overflow: hidden; }
.staff-card-foto::before { content: ''; position: absolute; inset: 0; background: inherit; transition: transform .7s var(--ease-vivo); }
.staff-card:hover .staff-card-foto::before { transform: scale(1.06); }
.staff-card-cuerpo { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 24px; }
.staff-card-cuerpo::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--celeste); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease-vivo); }
.staff-card:hover .staff-card-cuerpo::before { transform: scaleX(1); }
.staff-card-cargo { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rojo-texto); }
.staff-card-nombre { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--azul-inst); }
.staff-card-obra { font-size: 16px; color: var(--gris-suave); }
.staff-cta { text-align: center; margin-top: 4px; }
@media (max-width: 1100px) { .staff-card { flex-basis: calc((100% - 48px) / 3); } }
@media (max-width: 860px) {
  .staff { padding: 60px 0 56px; }
  .staff-cabeza { flex-direction: column; align-items: flex-start; gap: 20px; }
  .staff-card { flex-basis: 62%; }
}
@media (max-width: 520px) { .staff-card { flex-basis: 78%; } }
@media (prefers-reduced-motion: reduce) {
  .staff-pista { scroll-behavior: auto; }
  .staff-card, .staff-card-foto::before, .staff-card-cuerpo::before, .staff-flecha { transition: none !important; }
  .staff-card:hover, .staff-flecha:hover { transform: none; }
  .staff-card:hover .staff-card-foto::before { transform: none; }
}

/* --- INICIO: tarjetas de Valores, Recursos e Hitos en el mismo lenguaje de cajas
       (blanca, número de marca de agua, filete inferior de color que crece) ------ */
.nuestros-valores-grid, .recursos-grid, .hitos-grid { counter-reset: tarj; }
.nuestros-valores-card, .recurso-card, .hitos-card {
  position: relative; overflow: hidden; counter-increment: tarj;
  background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .07); border-top-width: 1px; border-radius: 16px;
}
.nuestros-valores-card::before, .recurso-card::before, .hitos-card::before {
  content: counter(tarj, decimal-leading-zero);
  position: absolute; top: 6px; right: 20px;
  font-family: var(--font-display); font-weight: 900; font-size: 88px; line-height: 1;
  color: var(--azul-inst); opacity: .07; pointer-events: none;
  transition: transform .5s var(--ease-vivo), opacity .4s;
}
.nuestros-valores-card:hover::before, .recurso-card:hover::before, .hitos-card:hover::before { transform: translateY(-4px) scale(1.06); opacity: .11; }
.nuestros-valores-card::after, .recurso-card::after, .hitos-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--card-accent, var(--azul-inst));
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-vivo);
}
.nuestros-valores-card:hover::after, .recurso-card:hover::after, .hitos-card:hover::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .nuestros-valores-card::before, .recurso-card::before, .hitos-card::before,
  .nuestros-valores-card::after, .recurso-card::after, .hitos-card::after { transition: none !important; }
  .nuestros-valores-card:hover::before, .recurso-card:hover::before, .hitos-card:hover::before { transform: none; }
}
.me-botones--izq { justify-content: flex-start; }

/* ==========================================================================
   ENLACES «CONOCE MÁS» UNIFICADOS (Decisión 112)
   Un solo formato para todos los cierres de zona: palabra en versalitas con
   flecha, SIN botón sólido. Reacción al pasar: se dibuja una línea bajo el
   texto de izquierda a derecha, la flecha avanza y el color se profundiza.
   Variantes: -dark (fondo claro), -light (fondo oscuro o con foto).
   Los cierres de las zonas con tarjetas van centrados bajo la rejilla.
   ========================================================================== */
.link-subtle,
.valor-link-subtle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 6px;
  border: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-size .4s var(--ease-vivo), color .2s ease;
}
.link-subtle span, .valor-link-subtle span { display: inline-block; font-size: 1.35em; line-height: 1; transition: transform .35s var(--ease-vivo); }
.link-subtle:hover, .link-subtle:focus-visible,
.valor-link-subtle:hover, .valor-link-subtle:focus-visible { background-size: 100% 2px; opacity: 1; }
.link-subtle:hover span, .link-subtle:focus-visible span,
.valor-link-subtle:hover span, .valor-link-subtle:focus-visible span { transform: translateX(7px); }
.link-subtle-dark { color: var(--azul-inst); }
.link-subtle-dark:hover, .link-subtle-dark:focus-visible { color: var(--azul-profundo); }
.link-subtle-light, .valor-link-subtle { color: var(--beige); }
.link-subtle-light:hover, .link-subtle-light:focus-visible,
.valor-link-subtle:hover, .valor-link-subtle:focus-visible { color: var(--blanco); }
.link-subtle:focus-visible, .valor-link-subtle:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .link-subtle, .valor-link-subtle, .link-subtle span, .valor-link-subtle span { transition: none; }
  .link-subtle:hover span, .valor-link-subtle:hover span { transform: none; }
}

/* Cierres de zona con tarjetas: centrados bajo la rejilla */
.oratoriano-cta, .nuestros-valores-cta, .red-colegios-cta, .recursos-cta, .hitos-cta { text-align: center; margin-top: 44px; }


/* ==========================================================================
   RECURSOS EDUCATIVOS (Decisión 118) — recursos-educativos.php
   Cada recurso es una fila foto + texto que alterna de lado, en el lenguaje
   de las páginas del Modelo Educativo: acento de color propio (--me-acc),
   número grande sobre la foto, bloque de color desplazado detrás de la foto,
   filete que crece al pasar el puntero y círculo de ícono que gira.
   ========================================================================== */
.rec-seccion { scroll-margin-top: 110px; }
.rec-intro { padding-bottom: 36px; }
.rec-intro .me-cabeza { margin-bottom: 0; }
.rec-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.rec-fila--inv .rec-foto { order: 2; }

.rec-foto { position: relative; margin: 0; border-radius: 18px; aspect-ratio: 10 / 7; background: var(--azul-profundo); box-shadow: 14px 14px 0 rgba(var(--me-acc-rgb), .38), var(--realce-alto); transition: transform .45s var(--ease-vivo), box-shadow .45s ease; }
.rec-fila--inv .rec-foto { box-shadow: -14px 14px 0 rgba(var(--me-acc-rgb), .38), var(--realce-alto); }
.rec-foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; transition: transform .9s var(--ease-vivo); }
.rec-foto::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(47,43,44,.38) 0%, rgba(47,43,44,0) 38%); pointer-events: none; z-index: 1; }
.rec-foto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 0 0 18px 18px; background: var(--me-acc); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease-vivo); z-index: 2; }
.rec-fila:hover .rec-foto { transform: translateY(-5px); }
.rec-fila:hover .rec-foto img { transform: scale(1.05); }
.rec-fila:hover .rec-foto::after { transform: scaleX(1); }
/* El zoom de la foto queda recortado por el borde redondeado sin ocultar la sombra del bloque */
.rec-foto { overflow: visible; }
.rec-foto img { clip-path: inset(0 round 18px); }

.rec-num { position: absolute; top: 14px; left: 24px; z-index: 2; font-family: var(--font-display); font-weight: 900; font-size: 92px; line-height: 1; color: #fff; text-shadow: 0 2px 18px rgba(0,0,0,.5); transition: transform .5s var(--ease-vivo); }
.rec-fila:hover .rec-num { transform: translateY(-4px) scale(1.05); }
.rec-cuenta { position: absolute; right: 18px; bottom: 18px; z-index: 2; background: var(--beige); color: var(--azul-profundo); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 4px; }

.rec-texto { position: relative; }
.rec-texto .me-icono { margin-bottom: 18px; }
.rec-fila:hover .rec-texto .me-icono { transform: scale(1.08) rotate(-6deg); }
.rec-texto .eyebrow { display: block; margin-bottom: 8px; }
.rec-texto .me-titulo { margin-bottom: 18px; }
.rec-texto p { font-size: 17.5px; line-height: 1.85; color: var(--tinta); }
@media (min-width: 992px) { .rec-texto p { text-align: justify; hyphens: auto; } }
.rec-sig { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; padding: 11px 22px; border-radius: 8px; border: 2px solid var(--azul-inst); color: var(--azul-inst); font-weight: 700; font-size: 15px; box-shadow: var(--realce); transition: transform .3s var(--ease-vivo), box-shadow .3s ease, background .25s, color .25s; }
.rec-sig svg { width: 18px; height: 18px; flex: none; transform: rotate(90deg); transition: transform .3s var(--ease-vivo); }
.rec-sig:hover, .rec-sig:focus-visible { transform: translateY(-3px); box-shadow: var(--realce-alto); background: var(--azul-inst); color: var(--blanco); }
.rec-sig:hover svg { transform: rotate(90deg) translateX(4px); }

@media (max-width: 991px) {
  .rec-fila { grid-template-columns: 1fr; gap: 44px; }
  .rec-fila--inv .rec-foto { order: 0; }
  .rec-foto, .rec-fila--inv .rec-foto { box-shadow: 10px 10px 0 rgba(var(--me-acc-rgb), .38), var(--realce-alto); max-width: 640px; width: calc(100% - 10px); margin: 0 auto; }
  .rec-texto { max-width: 680px; margin: 0 auto; }
}
@media (max-width: 640px) {
  .rec-num { font-size: 64px; left: 18px; }
  .rec-texto p { font-size: 16.5px; line-height: 1.75; }
  .rec-sig { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rec-foto, .rec-foto img, .rec-foto::after, .rec-num, .rec-texto .me-icono, .rec-sig, .rec-sig svg { transition: none !important; }
  .rec-fila:hover .rec-foto, .rec-fila:hover .rec-foto img, .rec-fila:hover .rec-num, .rec-fila:hover .rec-texto .me-icono, .rec-sig:hover { transform: none; }
}

/* ==========================================================================
   DOCUMENTOS (Decisión 118) — fichas al estilo del repositorio de Rosenthal
   Una ficha por documento: formato, versión, título, descripción, fecha de
   subida y peso. Mismo lenguaje que las cajas del Modelo Educativo: número
   grande de marca de agua, filete de color que crece, elevación al pasar.
   ========================================================================== */
.doc-seccion { scroll-margin-top: 110px; }
/* Fichas de documentos: 3 por fila; la última fila, si trae 1 o 2, queda CENTRADA
   (con grid quedaban pegadas a la izquierda). Es flex con ancho fijo por ficha. */
.doc-lista { --doc-gap: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--doc-gap); }
.doc-item { display: flex; flex: 0 0 calc((100% - 2 * var(--doc-gap)) / 3); max-width: calc((100% - 2 * var(--doc-gap)) / 3); min-width: 0; }
.doc-ficha { position: relative; overflow: hidden; display: flex; flex-direction: column; width: 100%; background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .07); border-top: 5px solid var(--me-acc); border-radius: 16px; padding: 28px 28px 26px; box-shadow: var(--realce); color: var(--tinta); text-decoration: none; transition: transform .35s var(--ease-vivo), box-shadow .35s ease, border-color .3s ease; }
.doc-ficha::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--me-acc); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-vivo); }
.doc-ficha:hover, .doc-ficha:focus-visible { transform: translateY(-6px); box-shadow: var(--realce-alto); border-color: rgba(var(--me-acc-rgb), .55); }
.doc-ficha:hover::after, .doc-ficha:focus-visible::after { transform: scaleX(1); }
.doc-num { position: absolute; top: 4px; right: 18px; font-family: var(--font-display); font-weight: 900; font-size: 92px; line-height: 1; color: var(--azul-inst); opacity: .07; pointer-events: none; transition: transform .5s var(--ease-vivo), opacity .4s; }
.doc-ficha:hover .doc-num { transform: translateY(-4px) scale(1.06); opacity: .11; }
.doc-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; position: relative; }
.doc-ext { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 7px 12px; border-radius: 8px; background: var(--azul-profundo); color: var(--beige); font-size: 13px; font-weight: 700; letter-spacing: .12em; transition: transform .45s var(--ease-vivo); }
.doc-ficha:hover .doc-ext { transform: rotate(-4deg) scale(1.06); }
.doc-ficha--pdf .doc-ext { background: var(--rojo-texto, #B3122A); color: #fff; }
.doc-version { background: var(--beige); color: var(--azul-profundo); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 6px 11px; border-radius: 4px; }
.doc-nombre { position: relative; font-family: var(--font-display); font-size: 21px; line-height: 1.3; color: var(--azul-inst); margin-bottom: 10px; }
.doc-desc { position: relative; font-size: 16px; line-height: 1.65; color: var(--tinta); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.doc-pie { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin-top: auto; padding-top: 20px; font-size: 13.5px; color: var(--gris-suave); }
.doc-archivo { font-weight: 700; letter-spacing: .04em; }
.doc-ficha .me-mas { padding-top: 16px; }
.doc-ficha:hover .me-mas svg { transform: translateX(6px); }
@media (max-width: 991px) { .doc-item { flex-basis: calc((100% - var(--doc-gap)) / 2); max-width: calc((100% - var(--doc-gap)) / 2); } }
@media (max-width: 640px) { .doc-item { flex-basis: 100%; max-width: 100%; } .doc-ficha { padding: 24px 22px 22px; } }
@media (prefers-reduced-motion: reduce) {
  .doc-ficha, .doc-ficha::after, .doc-num, .doc-ext, .doc-ficha .me-mas svg { transition: none !important; }
  .doc-ficha:hover, .doc-ficha:hover .doc-num, .doc-ficha:hover .doc-ext { transform: none; }
}

/* --- Documentos: zonas (Decisión 118) --------------------------------------- */
.doc-vacio { text-align: center; padding: 26px 20px; border: 2px dashed rgba(var(--me-acc-rgb, 183,28,38), .45); border-radius: 14px; background: rgba(255,255,255,.7); color: var(--gris-suave); font-size: 16.5px; }
.doc-subtitulo { font-family: var(--font-display); font-size: 24px; color: var(--azul-inst); margin: 34px 0 18px; }
.doc-enlace { color: var(--azul-inst); font-weight: 700; border-bottom: 1px solid rgba(55,52,53,.35); }
.doc-enlace:hover { border-color: var(--azul-inst); }
.doc-nota { text-align: center; margin-top: 36px; font-size: 16px; color: var(--gris-suave); }
.doc-nota a { color: var(--azul-inst); font-weight: 700; border-bottom: 1px solid rgba(55,52,53,.35); }
.doc-nota a:hover { border-color: var(--azul-inst); }

.doc-obras-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 1040px; margin: 0 auto 44px; padding: 0; }
.doc-obras-nav a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 12px 9px 18px; border-radius: 999px; background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .1); color: var(--azul-profundo); font-weight: 700; font-size: 15px; box-shadow: var(--realce); transition: transform .3s var(--ease-vivo), box-shadow .3s ease, background .25s, color .25s, border-color .25s; }
.doc-obras-nav a span { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--beige); color: var(--azul-profundo); font-size: 13px; }
.doc-obras-nav a:hover, .doc-obras-nav a:focus-visible { transform: translateY(-3px); box-shadow: var(--realce-alto); background: var(--azul-inst); color: var(--blanco); border-color: var(--azul-inst); }

.obra-doc { scroll-margin-top: 110px; margin-bottom: 38px; background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .07); border-radius: 20px; overflow: hidden; box-shadow: var(--realce); transition: box-shadow .35s ease, transform .35s var(--ease-vivo); }
.obra-doc:hover { box-shadow: var(--realce-alto); }
.obra-doc-cab { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; min-height: 190px; padding: 28px 34px; background-size: cover; background-position: center; color: var(--blanco); isolation: isolate; }
.obra-doc-cab::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(47,43,44,.92) 0%, rgba(47,43,44,.72) 55%, rgba(47,43,44,.38) 100%); }
.obra-doc-cab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--me-acc); }
.obra-doc-num { position: absolute; top: 6px; right: 26px; font-family: var(--font-display); font-weight: 900; font-size: 110px; line-height: 1; color: #fff; opacity: .16; pointer-events: none; }
.obra-doc-niveles { display: inline-block; background: var(--beige); color: var(--azul-profundo); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 5px 11px; border-radius: 4px; margin-bottom: 12px; }
.obra-doc-titulo h3 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); line-height: 1.15; color: var(--blanco); margin: 0; }
.obra-doc-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; position: relative; }
.obra-doc-cuenta { font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--beige); }
.obra-doc-ver { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; border: 2px solid var(--beige); color: var(--beige); font-weight: 700; font-size: 15px; transition: transform .3s var(--ease-vivo), background .25s, color .25s, box-shadow .3s; }
.obra-doc-ver svg { width: 18px; height: 18px; transition: transform .3s var(--ease-vivo); }
.obra-doc-ver:hover, .obra-doc-ver:focus-visible { transform: translateY(-3px); background: var(--beige); color: var(--azul-profundo); box-shadow: var(--realce-oscuro); }
.obra-doc-ver:hover svg { transform: translateX(4px); }
.obra-doc-cuerpo { padding: 32px 34px 36px; background: var(--fondo-suave, #F4F7FA); }
@media (max-width: 991px) { .obra-doc-cab { padding: 24px 24px; } .obra-doc-cuerpo { padding: 26px 22px 30px; } }
@media (max-width: 640px) { .obra-doc-cab { min-height: 160px; } .obra-doc-num { font-size: 76px; } .doc-obras-nav a { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .obra-doc, .obra-doc-ver, .obra-doc-ver svg, .doc-obras-nav a { transition: none !important; } .obra-doc-ver:hover, .doc-obras-nav a:hover { transform: none; } }

/* Detalles de las filas de «Nuestros valores» (comparten las clases .rec-*) */
.rec-texto p + p { margin-top: 14px; }
.rec-lema { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 18px; line-height: 1.45; color: var(--rojo-texto); }
.rec-sub { font-family: var(--font-display); font-size: 18px; line-height: 1.3; color: var(--azul-inst); margin: 22px 0 0; }
.rec-texto .me-lista { margin-top: 12px; }
.rec-texto .me-lista + .rec-sub { margin-top: 24px; }

/* ==========================================================================
   QUIÉNES SOMOS (Decisión 119): quienes-somos, mision-vision, equipo-de-gestion
   y nuestra-historia. Reutilizan .me-* y .rec-*; aquí solo lo propio.
   Fondos planos: blanco / celeste suave alternados, sin degradés.
   ========================================================================== */
.qs-acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }

/* ---- Equipo de gestión: bienvenida con retrato a un lado ---- */
.eq-bienvenida { overflow: hidden; }
.eq-cuerpo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.eq-bienvenida--izq .eq-figura { order: -1; }
.eq-bienvenida--izq .eq-cuerpo { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); }
.eq-texto .eyebrow { display: block; margin-bottom: 8px; }
.eq-texto .me-titulo { margin-bottom: 6px; }
.eq-cargo { font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo-texto); margin-bottom: 20px; }
.eq-texto > p:not(.eq-cargo):not(.eq-firma) { font-size: 17.5px; line-height: 1.85; color: var(--tinta); }
.eq-texto > p + p { margin-top: 14px; }
@media (min-width: 992px) { .eq-texto > p:not(.eq-cargo):not(.eq-firma) { text-align: justify; hyphens: auto; } }

/* Frase destacada con filete lateral */
.eq-frase { margin: 26px 0 0; padding: 4px 0 4px 22px; border-left: 5px solid var(--celeste); }
.eq-frase blockquote { margin: 0; }
.eq-frase p { font-family: var(--font-display); font-style: italic; font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--azul-profundo); }
.eq-bienvenida--izq .eq-frase { border-left-color: var(--rojo); }

/* Firma */
.eq-firma { display: flex; flex-direction: column; gap: 2px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--gris-borde, rgba(47,43,44,.14)); }
.eq-firma-nombre { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--azul-inst); }
.eq-firma-cargo { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo-texto); }

/* Retrato (o monograma si aún no hay foto) */
.eq-figura { margin: 0; position: relative; justify-self: center; width: 100%; max-width: 380px; aspect-ratio: 4 / 5; border-radius: 24px; background: var(--beige); box-shadow: 14px 14px 0 rgba(253,203,43,.30), var(--realce-alto); overflow: hidden; }
.eq-bienvenida--izq .eq-figura { box-shadow: -14px 14px 0 rgba(236,50,56,.22), var(--realce-alto); }
.eq-figura img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.eq-figura--monograma { display: grid; place-items: center; background: var(--azul-profundo); }
.eq-figura--monograma::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--beige); }
.eq-monograma { font-family: var(--font-display); font-weight: 900; font-size: clamp(72px, 12vw, 120px); letter-spacing: .04em; color: var(--beige); }
@media (max-width: 899px) {
  .eq-cuerpo, .eq-bienvenida--izq .eq-cuerpo { grid-template-columns: 1fr; }
  .eq-figura, .eq-bienvenida--izq .eq-figura { order: -1; max-width: 300px; box-shadow: 10px 10px 0 rgba(253,203,43,.30), var(--realce-alto); }
}

/* Frase final de Don Bosco (sección clara; el cierre de página ya es azul oscuro) */
.eq-cita-cuerpo { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 64px); max-width: 1040px; }
.eq-cita-foto { flex: 0 0 auto; width: clamp(120px, 18vw, 200px); height: auto; border-radius: 50%; border: 5px solid var(--beige); box-shadow: var(--realce); background: var(--blanco); object-fit: cover; aspect-ratio: 1; }
.eq-cita-cuerpo .aguinaldo-cita { margin: 0; }
@media (max-width: 700px) { .eq-cita-cuerpo { flex-direction: column; text-align: left; } }

/* ---- Nuestra historia ---- */
.hist-etapa .rec-foto .rec-num { font-size: 72px; }
.hist-credito { position: absolute; left: 14px; bottom: 14px; z-index: 2; font-size: 11px; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.hist-anio { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 6px; aspect-ratio: 10 / 7; padding: 0 clamp(24px, 4vw, 52px); border-radius: 18px; background: var(--azul-profundo); box-shadow: 14px 14px 0 rgba(var(--me-acc-rgb), .38), var(--realce-alto); overflow: hidden; }
.rec-fila--inv .hist-anio { order: 2; box-shadow: -14px 14px 0 rgba(var(--me-acc-rgb), .38), var(--realce-alto); }
.hist-anio::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--me-acc); }
.hist-anio-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(68px, 10vw, 128px); line-height: 1; color: var(--beige); }
.hist-anio-rango { font-size: 14px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.88); }
.hist-hitos { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hist-hitos li { padding: 6px 13px; border-radius: 999px; background: rgba(var(--me-acc-rgb), .22); color: var(--azul-profundo); font-size: 14px; font-weight: 700; line-height: 1.3; }
@media (max-width: 991px) {
  .hist-anio, .rec-fila--inv .hist-anio { order: 0; box-shadow: 10px 10px 0 rgba(var(--me-acc-rgb), .38), var(--realce-alto); max-width: 640px; width: calc(100% - 10px); margin: 0 auto; }
}
.hist-fuentes { max-width: 860px; }
.hist-fuentes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hist-fuentes-lista a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; border-radius: 12px; background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .1); color: var(--azul-profundo); font-weight: 700; box-shadow: var(--realce); transition: transform .3s var(--ease-vivo), box-shadow .3s ease, border-color .25s; }
.me-f-bw .hist-fuentes-lista a { background: var(--blanco); }
.hist-fuentes-lista a svg { width: 18px; height: 18px; flex: none; }
.hist-fuentes-lista a:hover, .hist-fuentes-lista a:focus-visible { transform: translateY(-3px); box-shadow: var(--realce-alto); border-color: var(--azul-inst); }
@media (prefers-reduced-motion: reduce) { .hist-fuentes-lista a { transition: none; } .hist-fuentes-lista a:hover { transform: none; } }

/* ==========================================================================
   MENÚ SECUNDARIO + BUSCADOR + VIDEO DISCRETO (Decisión 119)
   ========================================================================== */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buscador de la fila superior: lupa que despliega el campo hacia la izquierda */
.utility-search { position: relative; display: flex; align-items: center; flex-direction: row-reverse; margin: 0; }
.utility-search button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--gris-suave); cursor: pointer; transition: color .15s, background .15s, box-shadow .2s; }
.utility-search button:hover, .utility-search button:focus-visible { color: var(--azul-inst); background: var(--fondo-suave); box-shadow: var(--realce); }
.utility-search svg { width: 17px; height: 17px; fill: currentColor; }
.utility-search input { width: 0; opacity: 0; padding: 0; border: 0; border-bottom: 1px solid transparent; background: transparent; font: inherit; font-size: 13px; color: var(--tinta); transition: width .3s var(--ease-vivo), opacity .2s, padding .3s, border-color .2s; }
.utility-search.is-open input { width: 170px; opacity: 1; padding: 3px 6px; border-bottom-color: var(--celeste); }
.utility-search input:focus { outline: none; }

/* Buscador del menú móvil */
.main-nav-search { display: flex; align-items: center; gap: 0; margin: 4px 0 14px; border: 1px solid var(--gris-borde); border-radius: 8px; overflow: hidden; background: var(--blanco); }
.main-nav-search input { flex: 1; min-width: 0; border: 0; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--tinta); background: transparent; }
.main-nav-search input:focus { outline: none; }
.main-nav-search button { flex: none; width: 46px; align-self: stretch; border: 0; background: var(--azul-inst); color: #fff; cursor: pointer; display: grid; place-items: center; }
.main-nav-search svg { width: 18px; height: 18px; fill: currentColor; }
@media (min-width: 1101px) { .main-nav-search { display: none; } }

/* Página buscar.php */
.bus-cuerpo { max-width: 860px; }
.bus-form { display: flex; gap: 12px; flex-wrap: wrap; }
.bus-input { flex: 1 1 320px; min-width: 0; padding: 14px 18px; border: 2px solid var(--gris-borde); border-radius: 10px; font: inherit; font-size: 17px; color: var(--tinta); background: var(--blanco); box-shadow: var(--realce); transition: border-color .2s, box-shadow .2s; }
.bus-input:focus { outline: none; border-color: var(--celeste); box-shadow: var(--realce-alto); }
.bus-boton { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; border: 0; }
.bus-boton svg { width: 20px; height: 20px; }
.bus-ayuda, .bus-cuenta { margin: 22px 0 0; color: var(--tinta); font-size: 16px; }
.bus-cuenta { font-weight: 700; color: var(--azul-profundo); }
.bus-atajos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bus-vacio { margin-top: 28px; padding: 26px 28px; border-radius: 14px; background: var(--fondo-suave); }
.bus-vacio h3 { font-size: 20px; margin-bottom: 8px; }
.bus-vacio a { color: var(--azul-inst); font-weight: 700; text-decoration: underline; }
.bus-lista { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.bus-item { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px; border-radius: 14px; background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .08); box-shadow: var(--realce); color: var(--tinta); transition: transform .3s var(--ease-vivo), box-shadow .3s ease, border-color .25s; }
.bus-item:hover, .bus-item:focus-visible { transform: translateY(-3px); box-shadow: var(--realce-alto); border-color: var(--celeste); }
.bus-ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--fondo-suave); color: var(--azul-inst); }
.bus-ico svg { width: 22px; height: 22px; }
.bus-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bus-tipo { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo-texto); }
.bus-titulo { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--azul-inst); }
.bus-extracto { font-size: 15px; line-height: 1.6; color: var(--tinta); }
.bus-flecha { flex: none; align-self: center; color: var(--azul-inst); }
.bus-flecha svg { width: 20px; height: 20px; transition: transform .3s var(--ease-vivo); }
.bus-item:hover .bus-flecha svg { transform: translateX(5px); }
.bus-item mark { background: rgba(250, 227, 181, .85); color: inherit; padding: 0 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .bus-item, .bus-flecha svg, .utility-search input { transition: none; } .bus-item:hover { transform: none; } }

/* Video discreto del Equipo de gestión: un enlace pequeño bajo la firma; el video solo se carga al abrirlo */
.eq-video { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 4px 2px; background: none; border: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--azul-inst); cursor: pointer; text-decoration: none; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.eq-video svg { width: 22px; height: 22px; flex: none; transition: transform .3s var(--ease-vivo); }
.eq-video:hover, .eq-video:focus-visible { color: var(--celeste); border-bottom-color: currentColor; }
.eq-video:hover svg { transform: scale(1.12); }
.vid-dialog { position: fixed; inset: 0; margin: auto; width: min(92vw, 880px); height: fit-content; max-height: 92vh; padding: 0; border: 0; border-radius: 14px; background: #0b1d2b; color: #fff; box-shadow: var(--realce-oscuro-alto); overflow: hidden; }
.vid-dialog::backdrop { background: rgba(0, 25, 43, .72); }
.vid-marco { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vid-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-pie { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 18px; font-size: 14px; }
.vid-pie a { color: var(--beige); text-decoration: underline; }
.vid-cerrar { flex: none; padding: 8px 16px; border: 2px solid var(--beige); border-radius: 8px; background: transparent; color: var(--beige); font: inherit; font-weight: 700; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.vid-cerrar:hover, .vid-cerrar:focus-visible { background: var(--beige); color: var(--azul-profundo); box-shadow: var(--realce-oscuro); }
@media (prefers-reduced-motion: reduce) { .eq-video svg { transition: none; } }

/* ==========================================================================
   MAPA EN COLORES INSTITUCIONALES — Decisión 119 (cont. 3)
   Componente inc/mapa.php (rse_mapa) usado en la franja de Contacto, en
   Nuestra Red y en la ficha de cada obra.
   El iframe de Google se pasa por el filtro SVG #rse-duotono (definido en
   mapa.php): tierra casi blanca, agua celeste, calles blancas, rótulos azul
   profundo. El pin rojo (marca) va encima, con la punta en el centro.
   «En reposo» (clase añadida por js/main.js): una capa transparente cubre el
   mapa; al hacer clic/tocar se activa y se puede mover y acercar.
   ========================================================================== */
.rse-mapa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 220px;
  border-radius: 12px;
  background: #E9F3FA;
  box-shadow: var(--realce);
  transition: transform .35s var(--ease-vivo), box-shadow .35s ease;
}
.rse-mapa:hover { transform: translateY(-4px); box-shadow: var(--realce-alto); }
.rse-mapa-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: url(#rse-duotono);
}

/* Pin de marca: solo con JS (en reposo), para no desfasarse al arrastrar */
.rse-mapa-pin {
  position: absolute; left: 50%; top: 50%;
  z-index: 3;
  width: 44px; height: 58px;
  transform: translate(-50%, -100%);
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 4px 5px rgba(47,43,44,.35));
  transition: opacity .25s ease;
}
.rse-mapa-pin svg { display: block; width: 100%; height: 100%; }
.rse-mapa-pin::after {            /* sombra/halo en el suelo, bajo la punta */
  content: ""; position: absolute; left: 50%; bottom: -3px;
  width: 22px; height: 8px; margin-left: -11px;
  border-radius: 50%; background: rgba(47,43,44,.28);
  z-index: -1;
}
.rse-mapa--reposo .rse-mapa-pin { display: block; }
.rse-mapa--activo .rse-mapa-pin { opacity: 0; }

/* Capa de activación */
.rse-mapa-activar {
  display: none;
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  margin: 0; padding: 0; border: 0; border-radius: inherit;
  background: transparent; cursor: pointer;
}
.rse-mapa--reposo .rse-mapa-activar { display: block; }
.rse-mapa--activo .rse-mapa-activar { display: none; }
.rse-mapa-activar:focus-visible { outline: 3px solid var(--celeste); outline-offset: -3px; }
.rse-mapa-pista {
  position: absolute; left: 50%; top: 12px;
  transform: translate(-50%, -6px);
  padding: 6px 13px;
  background: rgba(47,43,44,.92); color: var(--blanco);
  font: 600 12.5px/1.2 var(--font-body);
  letter-spacing: .02em;
  border-radius: 20px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s var(--ease-vivo);
}
.rse-mapa-activar:hover .rse-mapa-pista,
.rse-mapa-activar:focus-visible .rse-mapa-pista { opacity: 1; transform: translate(-50%, 0); }

/* «Cómo llegar»: abajo al centro (a los lados Google pone su logo y sus
   términos, que no se pueden tapar) */
.rse-mapa-llegar {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4;
  margin: 0 auto; width: fit-content; max-width: calc(100% - 24px);
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  background: var(--blanco); color: var(--azul-inst);
  font: 700 12.5px/1.2 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(47,43,44,.28);
  transition: background-color .25s ease, color .25s ease, transform .25s var(--ease-vivo);
}
.rse-mapa-llegar svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.rse-mapa-llegar:hover,
.rse-mapa-llegar:focus-visible { background: var(--azul-inst); color: var(--blanco); transform: translateY(-2px); }
.rse-mapa-llegar:focus-visible { outline: 3px solid var(--celeste); outline-offset: 2px; }

/* Tamaños según el sitio donde vive */
.rse-mapa.footer-contacto-mapa-frame { height: 100%; min-height: 380px; border-radius: 12px; }
.rse-mapa.colegio-map-frame { flex: 1; min-height: 240px; border-radius: 10px; }
@media (max-width: 899px) {
  .rse-mapa.colegio-map-frame { aspect-ratio: 4 / 3; min-height: 260px; }
}
@media (max-width: 900px) {
  .rse-mapa.footer-contacto-mapa-frame { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .rse-mapa, .rse-mapa-llegar, .rse-mapa-pista, .rse-mapa-pin { transition: none; }
  .rse-mapa:hover, .rse-mapa-llegar:hover, .rse-mapa-llegar:focus-visible { transform: none; }
}

/* ==========================================================================
   AGUINALDO — ZONA DEL VIDEO (aguinaldo.php) — Decisión 119 (cont. 4)
   Composición de salesianorosenthal.edu.pe/aguinaldo con la identidad de la RSE:
   foto con velo azul profundo, título centrado, video 16:9 y tres botones.
   ========================================================================== */
.ag-video { position: relative; isolation: isolate; overflow: hidden; background: var(--azul-profundo); color: var(--blanco); padding: 84px 0 92px; }
.ag-video-fondo {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
}
.ag-video-fondo::after { content: ""; position: absolute; inset: 0; background: rgba(47,43,44,.9); }
.ag-video-cuerpo { text-align: center; }
.ag-video-titulo {
  margin: 0 auto 14px;
  font: 900 clamp(30px, 4.2vw, 46px)/1.15 var(--font-display);
  color: var(--blanco);
}
.ag-video-lead { max-width: 640px; margin: 0 auto 34px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.86); }
.ag-video-marco {
  position: relative; width: min(100%, 860px); margin: 0 auto 38px;
  aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000;
  box-shadow: var(--realce-oscuro-alto);
}
.ag-video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ag-video-botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.ag-boton {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 28px;
  font: 700 14px/1.2 var(--font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--blanco); background: transparent;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.22);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease-vivo), box-shadow .25s ease;
}
.ag-boton svg { width: 18px; height: 18px; flex: none; }
.ag-boton:hover, .ag-boton:focus-visible { background: var(--blanco); color: var(--azul-profundo); border-color: var(--blanco); transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.32); }
.ag-boton--principal { background: var(--beige); color: var(--azul-profundo); border-color: var(--beige); }
.ag-boton--principal:hover, .ag-boton--principal:focus-visible { background: var(--blanco); border-color: var(--blanco); }
.ag-boton:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
@media (max-width: 640px) {
  .ag-video { padding: 60px 0 68px; }
  .ag-boton { width: 100%; justify-content: center; }
  .ag-video-botones { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .ag-boton { transition: none; } .ag-boton:hover, .ag-boton:focus-visible { transform: none; } }


/* ==========================================================================
   CIUDAD DELANTE DEL TITULAR  («Lima.- …», «Arequipa.- …»)
   Se ve de qué zona del país llega la noticia. La ciudad va en <b> (no en
   <span>) para no heredar el `display:block` del titular del slider.
   ========================================================================== */
.rse-portada-ciudad,
.noticia-ciudad { font-weight: 800; white-space: nowrap; }
.rse-portada-ciudad { color: var(--beige); }
.noticia-mosaico-titulo .noticia-ciudad { color: var(--beige); }
.noticia-card-titulo .noticia-ciudad,
.noticia-nota-titulo .noticia-ciudad { color: var(--rojo-texto); }


/* ==========================================================================
   MÓVIL — fondo de Misión y Visión como el de Hitos, y destacado que se oculta
   al pasar a cabecera fija (6-oct-2026)
   ========================================================================== */
/* El fondo de Misión y Visión usa «100% auto» (la foto a todo el ancho de la
   pantalla, sin recortar los lados). Eso es lo correcto en escritorio, donde la
   sección es más baja que la foto; en móvil la sección mide ~1 500 px y la foto,
   a 390 px de ancho, solo ~220 px, así que quedaba una tira pequeña. Debajo de
   800 px (cuando las dos tarjetas pasan a una columna) usa la misma receta que
   Hitos: la capa de foto con `cover` y el mismo margen vertical. */
@media (max-width: 799px) {
  .mv-bg, .hitos-bg { inset: -22% 0; background-size: cover; background-position: center center; }
}

/* Destacado «Red de Escuelas» en móvil: se ve al inicio de la página y se
   oculta (sin tapar el contenido) en cuanto la cabecera pasa a fija/compacta
   (clase `is-scrolled`, a los 60 px de scroll). */
@media (max-width: 1100px) {
  .btn-featured { transition: background .18s, filter .18s, transform .18s, opacity .25s ease, visibility 0s linear 0s; }
  .site-header.is-scrolled .btn-featured {
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: background .18s, filter .18s, opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
}

/* =========================================================================
   FORMULARIO DE CONTACTO — ayudas anti-spam (Decisión 125)
   ========================================================================= */
.form-ayuda { display: block; margin-top: 6px; font-size: 12.5px; color: var(--gris-suave, #6B6465); }
.form-recaptcha-aviso { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--gris-suave, #6B6465); }
.form-recaptcha-aviso a { color: inherit; text-decoration: underline; }
.contacto-form .btn-solid[disabled] { opacity: .65; cursor: progress; }


/* =========================================================================
   MATRIZ AXIOLÓGICA — tres valores con sus operativos, comportamientos y
   enfoques (Decisión 130). Tarjeta grande por valor: foto + definición arriba,
   tres columnas abajo. Usa el acento (--me-acc) de cada valor.
   ========================================================================= */
.mx-indice { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 40px; }
.mx-lista { display: grid; gap: 40px; }
.mx-valor { position: relative; overflow: hidden; background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .08); border-radius: 18px; box-shadow: var(--realce); scroll-margin-top: 120px; transition: transform .35s var(--ease-vivo), box-shadow .35s ease, border-color .3s ease; }
.mx-valor::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--me-acc); z-index: 2; }
.mx-valor:hover { transform: translateY(-4px); box-shadow: var(--realce-alto); border-color: rgba(var(--me-acc-rgb), .5); }
.mx-cab { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
.mx-foto { margin: 0; min-height: 280px; position: relative; background: var(--azul-profundo); }
.mx-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s var(--ease-vivo); }
.mx-valor:hover .mx-foto img { transform: scale(1.05); }
.mx-foto { overflow: hidden; }
.mx-cab-texto { position: relative; padding: 38px 40px 34px; }
.mx-num { position: absolute; right: 26px; top: 8px; font-family: var(--font-display); font-weight: 900; font-size: 92px; line-height: 1; color: var(--azul-inst); opacity: .07; pointer-events: none; }
.mx-cab-texto .me-icono { margin-bottom: 14px; }
.mx-titulo { font-family: var(--font-display); font-size: 34px; line-height: 1.15; color: var(--azul-inst); margin: 4px 0 14px; }
.mx-def { font-size: 16.5px; line-height: 1.75; color: var(--tinta); margin: 0; }
.mx-def-rotulo { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--azul-inst); margin-bottom: 6px; }
.mx-cuerpo { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(var(--tinta-rgb), .08); }
.mx-col { padding: 28px 30px 34px; }
.mx-col + .mx-col { border-left: 1px solid rgba(var(--tinta-rgb), .08); }
.mx-col h4 { font-family: var(--font-display); font-size: 17px; line-height: 1.3; color: var(--azul-inst); margin: 0 0 4px; padding-bottom: 10px; border-bottom: 3px solid var(--me-acc); display: inline-block; }
.mx-ops { margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.mx-ops li { padding: 8px 16px; border-radius: 999px; background: var(--beige); color: var(--azul-profundo); font-size: 15.5px; font-weight: 700; line-height: 1.3; box-shadow: var(--realce); transition: transform .3s var(--ease-vivo), box-shadow .3s ease; }
.mx-ops li:hover { transform: translateY(-3px); box-shadow: var(--realce-alto); }
.mx-enf { margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.mx-enf li { padding: 12px 16px; border-radius: 10px; border-left: 4px solid var(--me-acc); background: rgba(var(--me-acc-rgb), .09); line-height: 1.45; }
.mx-enf strong { display: block; font-size: 15px; color: var(--azul-profundo); }
.mx-enf span { display: block; font-size: 15.5px; color: var(--tinta); }
@media (max-width: 1000px) {
  .mx-cab { grid-template-columns: 1fr; }
  .mx-foto { min-height: 220px; }
  .mx-cuerpo { grid-template-columns: 1fr; }
  .mx-col + .mx-col { border-left: 0; border-top: 1px solid rgba(var(--tinta-rgb), .08); }
}
@media (max-width: 560px) {
  .mx-cab-texto { padding: 28px 22px 26px 26px; }
  .mx-titulo { font-size: 28px; }
  .mx-col { padding: 24px 22px 28px 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .mx-valor, .mx-foto img, .mx-ops li { transition: none !important; }
  .mx-valor:hover, .mx-ops li:hover { transform: none; }
  .mx-valor:hover .mx-foto img { transform: none; }
}


/* Botonera por etapas de «Nuestra historia» (Decisión 132): cada rango de años lleva
   su círculo numerado, igual que las demás botoneras del Modelo Educativo. */
.me-pill--etapa { padding-right: 22px; box-shadow: var(--realce); background: var(--blanco); border-color: rgba(var(--me-acc-rgb), .35); }
.me-pill--etapa .me-pill-ico { font-family: var(--font-display); font-weight: 900; font-size: 17px; line-height: 1; background: var(--azul-inst); color: var(--blanco); box-shadow: 0 0 0 3px rgba(var(--me-acc-rgb), .35); }
.me-pill--etapa:hover .me-pill-ico, .me-pill--etapa:focus-visible .me-pill-ico { background: var(--azul-profundo); color: var(--beige); }
.me-pill--etapa:hover, .me-pill--etapa:focus-visible { box-shadow: var(--realce-alto); }
@media (max-width: 640px) { .me-pill--etapa { padding-right: 12px; font-size: 14.5px; } }

/* Identidad Salesiana (Decisión 132): la franja de 4 fotos se ensancha en las páginas de perfil. */
.pf-vida .identidad-foto-row { max-width: 1100px; gap: 16px; margin-bottom: 0; }
.pf-vida .identidad-foto-row .galeria-thumb { border-radius: 14px; box-shadow: var(--realce); }
.rec-texto .me-botones { justify-content: flex-start; margin-top: 24px; }

/* Perfiles: con listas largas la foto acompaña al texto (queda fija mientras se lee) en escritorio. */
@media (min-width: 992px) {
  .pf-dim .rec-fila { align-items: start; }
  .pf-dim .rec-foto { position: sticky; top: 130px; }
}

/* Noticias: barra de filtros minimalista (Decisión 133, ajustada en la 134).
   Categoría y etiqueta en dos listas desplegables: al elegir una categoría, la
   lista de etiquetas solo trae las que existen dentro de ella.
   Funciona sin JavaScript: es un formulario GET con botón «Filtrar» en <noscript>. */
.noticias-barra { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 30px; padding-bottom: 16px; border-bottom: 1px solid rgba(var(--tinta-rgb), .15); }
.noticias-campo { min-width: 0; }
.noticias-barra select { font: inherit; font-size: 13px; font-weight: 600; color: var(--azul-inst); background-color: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .3); border-radius: 999px; padding: 7px 34px 7px 14px; max-width: 100%; cursor: pointer; box-shadow: 0 2px 6px rgba(var(--tinta-rgb), .08); transition: box-shadow .2s, border-color .2s; }
.noticias-barra select:hover, .noticias-barra select:focus-visible { border-color: var(--azul-inst); box-shadow: 0 4px 12px rgba(var(--tinta-rgb), .18); outline: none; }
.noticias-barra select:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; }
.noticias-etiqueta-ir { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; border: 0; background: var(--azul-inst); color: var(--blanco); cursor: pointer; }
@media (max-width: 700px) {
  .noticias-barra { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 10px; }
  .noticias-barra select { width: 100%; }
}

/* Botón «volver arriba» (Decisión 136, igual que en Don Bosco Pucallpa) y distintivo de reCAPTCHA v3 oculto.
   El botón se eleva solo al llegar a la franja de créditos (js/main.js) para no taparla.
   El aviso legal que exige Google queda escrito bajo el formulario de contacto. */
.volver-arriba { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: var(--azul-inst); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 14px rgba(0,31,56,.35); opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s, background .2s, box-shadow .2s; }
.volver-arriba[hidden] { display: none; }
.volver-arriba.is-visible { opacity: 1; transform: none; }
.volver-arriba svg { width: 24px; height: 24px; }
.volver-arriba:hover, .volver-arriba:focus-visible { background: var(--rojo); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,31,56,.4); outline: none; }
.volver-arriba:focus-visible { outline: 3px solid var(--celeste); outline-offset: 3px; }
@media (max-width: 600px) { .volver-arriba { right: 14px; bottom: 14px; width: 44px; height: 44px; } }
.grecaptcha-badge { visibility: hidden !important; }

/* Nuestra historia: selector de etapas en combo (Decisión 137). Reemplaza la botonera de años. */
.hist-selector-inner { display: flex; align-items: center; justify-content: center; gap: 10px 16px; padding-top: 16px; padding-bottom: 16px; }
.hist-selector-label { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); white-space: nowrap; }
.hist-selector-campo { position: relative; display: block; width: min(520px, 100%); min-width: 0; }
.hist-selector-campo select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; font-weight: 700; color: var(--azul-profundo); background: var(--blanco); border: 1px solid rgba(var(--tinta-rgb), .22); border-radius: 999px; padding: 10px 46px 10px 20px; width: 100%; cursor: pointer; text-overflow: ellipsis; box-shadow: 0 2px 8px rgba(var(--tinta-rgb), .08); transition: border-color .2s, box-shadow .2s; }
.hist-selector-campo select:hover { border-color: var(--azul-inst); box-shadow: 0 6px 16px rgba(var(--tinta-rgb), .14); }
.hist-selector-campo select:focus-visible { outline: 2px solid var(--celeste); outline-offset: 2px; border-color: var(--azul-inst); }
.hist-selector-flecha { position: absolute; right: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; color: var(--azul-inst); pointer-events: none; }
.hist-selector-cuenta { font-size: 13px; font-weight: 600; color: var(--gris-suave, #6B6465); white-space: nowrap; }
.hist-selector-cuenta b { color: var(--azul-inst); font-size: 15px; }
.hist-selector-links { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; list-style: none; margin: 0 auto; padding: 0 0 14px; }
@media (max-width: 640px) {
  .hist-selector-inner { flex-wrap: wrap; gap: 6px 12px; padding-top: 12px; padding-bottom: 14px; }
  .hist-selector-label { flex: 1 1 auto; }
  .hist-selector-campo { order: 3; flex: 1 1 100%; }
  .hist-selector-campo select { width: 100%; font-size: 15px; padding: 11px 44px 11px 16px; }
  .hist-selector-cuenta { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .hist-selector-campo select { transition: none; } }

/* Documentos: categoría «Recursos Pastorales» con tres espacios internos (Decisión 138) */
.doc-pastoral-espacio { scroll-margin-top: 110px; margin-top: 54px; padding-top: 42px; border-top: 1px solid rgba(var(--tinta-rgb), .1); }
.doc-pastoral-espacio:first-of-type { margin-top: 0; }
.doc-pastoral-cab { text-align: center; max-width: 720px; margin: 0 auto 26px; }
.doc-pastoral-cab h3 { font-family: var(--font-display); font-size: 26px; line-height: 1.2; color: var(--azul-inst); margin: 0 0 8px; }
.doc-pastoral-cab p { margin: 0; color: var(--gris-suave, #6B6465); }

/* ==========================================================================
   COLEGIO SALESIANO DON BOSCO · PIURA — ajustes propios (sobre la base de la RSE)
   ========================================================================== */

/* ---- Equipo de gestión: tarjetas de retrato (coordinaciones) ---- */
.eq-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 28px; }
.eq-card { text-align: center; }
.eq-card-foto { margin: 0 0 16px; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--beige); box-shadow: 10px 10px 0 rgba(253,203,43,.28), var(--realce); transition: transform .3s ease, box-shadow .3s ease; }
.eq-card:hover .eq-card-foto { transform: translateY(-4px); box-shadow: 12px 14px 0 rgba(183,28,38,.22), var(--realce-alto); }
.eq-card-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.eq-card-nombre { font-family: var(--font-display); font-size: 18px; line-height: 1.35; color: var(--azul-inst); margin: 0 0 4px; }
.eq-card-cargo { font-size: 13.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--rojo-texto); margin: 0; }
@media (max-width: 900px) { .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .eq-grid { grid-template-columns: minmax(0, 1fr); max-width: 340px; margin-inline: auto; } }

/* ---- Cabecera: escudo + nombre del colegio (en lugar del logo horizontal) ---- */
.header-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.header-logo img.logo-escudo { width: auto; height: calc(var(--hdr-h) - 28px); max-height: 82px; min-height: 40px; display: block; }
.logo-texto { display: flex; flex-direction: column; line-height: 1.05; color: var(--azul-profundo); }
.logo-texto-1 { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo-texto); }
.logo-texto-2 { font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 1.9vw, 26px); color: var(--azul-inst); margin: 2px 0; }
.logo-texto-3 { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-suave); }
@media (max-width: 1100px) {
  .header-logo img.logo-escudo { height: 40px; min-height: 0; }
  .logo-texto-2 { font-size: 18px; }
  .logo-texto-1, .logo-texto-3 { font-size: 10px; }
}
@media (max-width: 380px) { .logo-texto-3 { display: none; } }

/* ---- Pie: escudo + lema + columnas ---- */
.footer-grid--piura { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; gap: 36px 30px; }
.footer-logo-escudo { width: 84px; height: auto; display: block; margin-bottom: 14px; }
.footer-lema { font-family: var(--font-display); font-style: italic; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.88); margin: 0 0 6px; }
.footer-lema-sub { font-size: 13px; color: var(--beige); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 1100px) { .footer-grid--piura { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .footer-grid--piura { grid-template-columns: minmax(0, 1fr); } }

/* ---- Hero: lámina del II Encuentro de Bandas ---- */
.rse-portada-lamina--evento .rse-portada-foto { object-position: center 40%; }
.rse-portada-lamina--evento::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(10,22,70,.92) 0%, rgba(10,22,70,.78) 38%, rgba(10,22,70,.25) 75%, rgba(10,22,70,0) 100%); }
.portada-evento { position: relative; z-index: 1; align-self: center; display: flex; align-items: center; gap: clamp(20px, 4vw, 56px); padding: 40px clamp(1rem, 6vw, 5rem) calc(76px + 80px); max-width: 1180px; width: 100%; margin: 0 auto; }
.portada-evento-logo { width: clamp(220px, 34vw, 460px); height: auto; filter: drop-shadow(0 6px 22px rgba(0,0,0,.5)); }
.portada-evento-datos { color: #fff; max-width: 440px; }
.portada-evento-chapa { display: inline-block; background: var(--celeste); color: var(--azul-profundo); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.portada-evento-fecha { font-family: var(--font-display); font-weight: 900; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.05; margin: 0 0 10px; color: #fff; text-shadow: 0 3px 16px rgba(0,0,0,.5); }
.portada-evento-lugar { font-size: clamp(15px, 1.5vw, 18px); color: rgba(255,255,255,.92); margin: 0 0 22px; }
.portada-evento-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--celeste); color: var(--azul-profundo); font-weight: 700; padding: 13px 26px; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 22px rgba(0,0,0,.35); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.portada-evento-btn svg { width: 18px; height: 18px; transition: transform .2s ease; }
.portada-evento-btn:hover, .portada-evento-btn:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.45); background: #fff; }
.portada-evento-btn:hover svg { transform: translateX(4px); }
.rse-portada-lamina--evento .rse-portada-texto { position: absolute; left: 0; right: 0; bottom: 0; }
.rse-portada-lamina--evento .rse-portada-titulo { font-size: clamp(16px, 1.8vw, 22px); }
@media (max-width: 760px) {
  .portada-evento { flex-direction: column; text-align: center; padding-top: 28px; }
  .portada-evento-logo { width: min(70vw, 300px); }
  .portada-evento-datos { max-width: 360px; }
}

/* ---- Página del II Encuentro de Bandas ---- */
.enc-hero-logo { display: block; width: min(560px, 80%); height: auto; margin: 0 auto; filter: drop-shadow(0 8px 22px rgba(0,0,0,.35)); }
.enc-fechas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.enc-evento { background: #fff; border-radius: 18px; padding: 34px 30px; border-top: 6px solid var(--celeste); box-shadow: var(--realce); position: relative; overflow: hidden; }
.enc-evento--2 { border-top-color: var(--azul-inst); }
.enc-evento-dia { font-family: var(--font-display); font-weight: 900; font-size: 64px; line-height: 1; color: var(--azul-inst); }
.enc-evento-mes { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--rojo-texto); margin: 4px 0 14px; }
.enc-evento h3 { font-family: var(--font-display); font-size: 22px; color: var(--azul-profundo); margin: 0 0 6px; }
.enc-evento p { margin: 0 0 6px; color: var(--gris-texto); font-size: 16.5px; }
.enc-evento-hora, .enc-evento-lugar { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.enc-evento-hora svg, .enc-evento-lugar svg { width: 20px; height: 20px; flex: none; color: var(--azul-inst); }
.enc-colegios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.enc-colegios li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; border-radius: 12px; border-left: 5px solid var(--celeste); box-shadow: 0 2px 10px rgba(47,43,44,.07); font-weight: 600; color: var(--azul-profundo); }
.enc-colegios li.es-sede { border-left-color: var(--azul-inst); background: var(--fondo-suave); }
.enc-colegios li small { margin-left: auto; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--rojo-texto); }
.enc-carteles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 920px; margin: 0 auto; }
.enc-carteles figure { margin: 0; }
.enc-carteles img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--realce-alto); }
.enc-carteles figcaption { text-align: center; font-size: 14px; color: var(--gris-suave); margin-top: 10px; }
@media (max-width: 760px) { .enc-fechas, .enc-colegios, .enc-carteles { grid-template-columns: minmax(0, 1fr); } }

/* ---- Datos de contacto en el pie y créditos ---- */
.footer-credito-edubridges { background: var(--azul-profundo); }
.valor-icon { color: var(--beige); }
.valor-icon svg { width: 100%; height: 100%; }
.valores-rse .valor-title { margin: 0 0 8px; }
.enc-colegios svg { width: 24px; height: 24px; flex: none; color: var(--azul-inst); }
.valores-cta { padding: 0 20px 46px; } .valor-link-subtle { padding-left: 4px; }

/* ==========================================================================
   FRANJA DE DON BOSCO — «Nuestro carisma» (home)
   Banda oscura con la figura + franja clara del Sistema Preventivo que corta el torso.
   ========================================================================== */
.carisma {
  --car-alto: 640px; --car-rel: 0.6007; --car-corte: 90px; --car-fondo: clamp(2rem, 4vw, 3.5rem);
  position: relative; overflow: hidden; overflow: clip; isolation: isolate;
  background: var(--azul-profundo); color: #fff;
}
.carisma-alto { position: relative; }
.carisma-cuerpo { position: relative; z-index: 1; padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); }
.carisma-texto { max-width: 60ch; }
.carisma-rotulo { font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--celeste); margin: 0 0 1rem; }
.carisma-lema { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem); line-height: 1.3; letter-spacing: -.01em; text-wrap: balance; margin: 0 0 1.4rem; color: #fff; }
.carisma-parrafo { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,.84); margin: 0 0 1.6rem; }
.carisma-cita { margin: 0 0 2rem; max-width: 48ch; border-left: 3px solid var(--celeste); padding-left: 1.1rem; }
.carisma-cita blockquote { margin: 0; }
.carisma-cita p { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.6; color: #fff; margin: 0 0 .7rem; }
.carisma-cita p::before { content: "\00AB"; } .carisma-cita p::after { content: "\00BB"; }
.carisma-cita figcaption { display: flex; flex-direction: column; gap: .15rem; font-family: var(--font-body); font-size: .875rem; }
.carisma-autor { font-weight: 700; color: var(--celeste); }
.carisma-cita cite { font-style: normal; color: rgba(255,255,255,.7); }
.carisma-figura { position: absolute; right: -14%; top: 0; z-index: 0; width: min(70vw, 440px); opacity: .22; line-height: 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); mask-image: linear-gradient(to bottom, #000 62%, transparent 96%); }
.carisma-figura img { width: 100%; height: auto; display: block; }
@media (max-width: 1079px) { .carisma-texto { max-width: none; } .carisma-alto { min-height: calc(min(70vw, 440px) + 2rem); } }
@media (max-width: 700px) { .carisma-figura { opacity: .16; } }
@media (min-width: 1080px) {
  .carisma-cuerpo { display: flex; align-items: flex-start; gap: clamp(2rem, 3vw, 3.5rem); padding-bottom: var(--car-fondo); }
  .carisma-texto { flex: 0 1 auto; }
  .carisma-figura { position: static; opacity: 1; flex: 0 0 auto; margin-left: auto; width: calc(var(--car-alto) * var(--car-rel));
    -webkit-mask-image: none; mask-image: none; margin-bottom: calc((var(--car-corte) + var(--car-fondo)) * -1); }
  .carisma-figura img { height: var(--car-alto); width: 100%; object-fit: contain; object-position: top right; filter: drop-shadow(0 10px 28px rgba(0,0,0,.35)); }
}
/* Franja clara: cubre el torso de la figura */
.carisma-pilares { position: relative; z-index: 2; background: var(--beige); color: var(--tinta); padding-block: clamp(2.5rem, 5vw, 4rem); }
.carisma-rejilla { display: grid; gap: 2rem; }
@media (min-width: 900px) { .carisma-rejilla { grid-template-columns: minmax(0, .95fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; align-items: start; } }
.carisma-ojo { display: block; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--rojo-texto); margin-bottom: .7rem; }
.carisma-titulo { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.35; color: var(--azul-profundo); margin: 0; text-wrap: balance; }
.carisma-lista { display: contents; list-style: none; margin: 0; padding: 0; }
.carisma-pilar { list-style: none; }
.carisma-pilar h3 { display: flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-size: 1.15rem; color: var(--rojo-texto); margin: 0 0 .6rem; }
.carisma-icono { flex: 0 0 auto; width: 28px; height: 28px; }
.carisma-pilar p { font-family: var(--font-body); font-size: .98rem; line-height: 1.6; color: var(--gris-texto); margin: 0; }
@media (prefers-reduced-motion: reduce) { .carisma * { transition: none !important; } }

/* Logo del header: nunca se deforma (proporción fija 363×420), tampoco al hacer scroll ni en móvil.
   Las reglas heredadas de RSE fijaban un ancho en .is-scrolled y en responsive con el alto en otra regla. */
.site-header .header-logo img.logo-escudo,
.site-header.is-scrolled .header-logo img.logo-escudo {
  width: auto !important; aspect-ratio: 363 / 420; object-fit: contain; flex: 0 0 auto;
}

/* Destacado del header: el título puede partirse en dos líneas en vez de cortarse con «…» */
.btn-featured-title { white-space: normal; overflow: visible; text-overflow: clip; max-width: 300px; text-align: center; line-height: 1.15; font-size: 17px; text-wrap: balance; }

/* «Conoce nuestros valores»: centrado */
.valores-rse .valores-cta { text-align: center; padding-left: 20px; padding-right: 20px; }

/* Redes en el header (fila de utilidades) */
.utility-sep { width: 1px; height: 16px; background: rgba(var(--tinta-rgb), .2); margin: 0 6px; }
.utility-contact a.utility-red svg { width: 15px; height: 15px; }
.footer-social--base { display: flex; }
.footer-social--base a { display: flex; }

/* Pie con la misma estructura que rse.test: logo + contacto en la primera columna */
.footer-col-institucion { text-align: center; }
.footer-col-institucion .footer-logo-escudo { width: 96px; margin: 0 auto 12px; }
.footer-col-institucion .footer-lema { margin: 0 0 22px; }


/* Video institucional en móvil: cubrir la franja de 260px sin escalar a 900px de alto */
@media (max-width: 640px) {
  #video-institucional iframe { min-height: 260px; min-width: calc(260px * 16 / 9); width: max(100vw, calc(260px * 16 / 9)); height: max(calc(100vw * 9 / 16), 260px); }
}

/* Portada en pantallas pequeñas: la lámina del evento muestra solo la foto + el título del slider,
   sin logo ni chapa ni botón encima de la imagen */
@media (max-width: 820px) {
  .portada-evento { display: none; }
  .rse-portada-lamina--evento::before { display: none; }
}


/* Saludos (Director / Promotor) en el inicio */
.saludo-home-acciones { margin-top: 26px; }




/* Saludos del inicio: retrato recortado (fondo transparente), sin marco ni caja, apoyado en el borde inferior */
.saludo-home.me-seccion { padding-bottom: 0; overflow: hidden; }
.saludo-home .eq-cuerpo { align-items: end; }
.saludo-home .eq-texto { align-self: center; padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.saludo-home .saludo-home-figura, .saludo-home.eq-bienvenida--izq .saludo-home-figura {
  position: relative; aspect-ratio: auto; max-width: 440px; width: 100%; background: none; border-radius: 0; box-shadow: none; overflow: visible; line-height: 0; align-self: end; }
.saludo-home .saludo-home-figura::before { content: ''; position: absolute; inset: 8% -14% 0; background: radial-gradient(closest-side at 50% 45%, rgba(253,203,43,.34), rgba(253,203,43,0) 100%); }
.saludo-home.eq-bienvenida--izq .saludo-home-figura::before { background: radial-gradient(closest-side at 50% 45%, rgba(236,50,56,.18), rgba(236,50,56,0) 100%); }
.saludo-home .saludo-home-figura img { position: relative; width: 100%; height: auto; max-height: 560px; object-fit: contain; object-position: bottom center; filter: drop-shadow(0 12px 22px rgba(47,43,44,.22)); }



/* PANTALLAS PEQUEÑAS — como salesianosfs: la figura (Don Bosco, Director, Promotor, Rector Mayor) queda de marca de
   agua difuminada al lado derecho de la caja, detrás del texto, que se lee encima. */
.carisma-cuerpo, .saludo-home .eq-cuerpo, .aguinaldo-home-grid { position: relative; }
@media (max-width: 1079px) {
  .carisma-alto { min-height: 0; }
  .carisma-texto { position: relative; z-index: 1; padding-bottom: 1rem; }
  .carisma-figura { position: absolute; right: -12%; top: 0; z-index: 0; width: min(66vw, 380px); opacity: .2; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%); mask-image: linear-gradient(to bottom, #000 58%, transparent 96%); }
  .carisma-figura img { height: auto; width: 100%; filter: none; margin: 0; }
}
@media (max-width: 899px) {
  .saludo-home.me-seccion { padding-bottom: clamp(2.5rem, 8vw, 4rem); }
  .saludo-home .eq-texto { position: relative; z-index: 1; padding-bottom: 0; }
  .saludo-home .saludo-home-figura, .saludo-home.eq-bienvenida--izq .saludo-home-figura {
    position: absolute; right: -12%; top: 0; order: 0; z-index: 0; width: min(66vw, 380px); max-width: none; margin: 0; opacity: .2; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%); mask-image: linear-gradient(to bottom, #000 58%, transparent 96%); }
  .saludo-home .saludo-home-figura::before { display: none; }
  .saludo-home .saludo-home-figura img { max-height: none; filter: none; }
}
@media (max-width: 860px) {
  .aguinaldo-home-figura { position: absolute; right: -12%; top: 0; order: 0; z-index: 0; width: min(66vw, 380px); opacity: .2; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 96%); mask-image: linear-gradient(to bottom, #000 58%, transparent 96%); }
  .aguinaldo-home-figura::before { display: none; }
  .aguinaldo-home-figura img { width: 100%; height: auto; max-width: 100%; }
  .aguinaldo-home-texto { position: relative; z-index: 1; padding-bottom: 96px; }
}
/* La palabra «Destacado» no se muestra nunca en el botón del encabezado */
.btn-featured-label { display: none !important; }