/* ==========================================================================
   RSE — Red Salesiana de Escuelas del Perú
   Tokens de marca (Manual de Identidad Salesianos) + estilos del HEADER
   Fuentes: Merriweather (títulos) + Merriweather Sans (cuerpo, legible en pantalla)
   ========================================================================== */

:root {
  /* Paleta institucional (Manual de Identidad Salesianos) */
  --azul-inst:   #1C315E; /* Pantone 2965 C */
  --celeste:     #00A6D6; /* Pantone 2995 C */
  --rojo:        #D6182C; /* Pantone 186 C */
  --beige:       #FAE3B5; /* Pantone 468 C */
  --blanco:      #FFFFFF;
  --gris-texto:  #4A4A4A;
  --gris-claro:  #F5F7FA;
  --gris-borde:  #E3E7EF;

  /* Tipografía */
  --font-display: 'Merriweather', Georgia, serif;
  --font-body:    'Merriweather Sans', system-ui, -apple-system, sans-serif;

  /* Header */
  --header-h-utility: 36px;
  --header-h-nav: 76px;
  --header-h-mobile: 64px;
}

/* ---- 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; }

/* 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: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: 14px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: stretch;
  background: var(--blanco);
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
  transition: box-shadow .25s;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,0,0,.14); }

/* Compensación para el header sticky: cualquier sección con ancla (ej. #contacto,
   enlazada desde el menú, que vive dentro de <footer>, no de <main>) necesita
   este colchón para que su contenido no quede tapado detrás del header al saltar
   directo con el enlace — el header no achica la página, solo se superpone.
   Selector genérico en `section[id]` (sin restringir a main) para que cualquier
   ancla futura, esté donde esté, quede bien de entrada.
   `.red-colegio-card[id]` se agregó aparte (nuestra-red.php, tarjetas de
   colegio con ancla — no son `<section>`, son `<div>`) para el mismo
   colchón; mismo criterio, mismo bug que ya se había corregido una vez
   para `#contacto` (ver Decisión 36) — anclas que no son `<section>`
   necesitan su propia regla. */
section[id],
.red-colegio-card[id] { scroll-margin-top: calc(var(--header-h-utility) + var(--header-h-nav) + 20px); }
@media (max-width: 991px) {
  section[id],
  .red-colegio-card[id] { scroll-margin-top: calc(var(--header-h-mobile) + 16px); }
}

/* Bloque del logo: fondo blanco, tal como exige el manual de marca (logo a color solo sobre blanco) */
.header-logo {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  background: var(--blanco);
  flex-shrink: 0;
}
.header-logo img { height: 56px; width: auto; }

/* Columna derecha: utilidad + navegación, fondo azul institucional */
.header-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--azul-inst);
  min-width: 0;
}

/* -- Nivel superior: enlaces institucionales + contacto rápido -- */
.header-utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  height: var(--header-h-utility);
  padding: 0 24px;
  background: rgba(0,0,0,.16);
  font-size: 12px;
}
.utility-links { display: flex; gap: 20px; }
.utility-links a {
  color: rgba(255,255,255,.85);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  transition: color .2s;
}
.utility-links a:hover { color: var(--celeste); }

.utility-contact { display: flex; align-items: center; gap: 14px; }
.utility-contact a {
  color: #fff;
  opacity: .85;
  display: flex;
  transition: opacity .2s, color .2s;
}
.utility-contact a:hover { opacity: 1; color: var(--beige); }
.utility-contact svg { width: 16px; height: 16px; fill: currentColor; }
.utility-contact a.is-pending { opacity: .45; }

/* -- Nivel inferior: navegación principal + CTA destacado -- */
.header-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  height: var(--header-h-nav);
  padding: 0 24px;
}

.main-nav > ul { display: flex; align-items: center; gap: 26px; }
.main-nav a {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #fff;
  padding: 8px 2px;
  position: relative;
  display: inline-block;
}
.main-nav > ul > li > a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--celeste);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.is-open > a::after { transform: scaleX(1); }

/* Dropdown "Nuestra Red" */
.has-dropdown { position: relative; }
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 270px;
  background: var(--blanco);
  box-shadow: 0 16px 32px rgba(0,0,0,.18);
  border-radius: 0 0 6px 6px;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.has-dropdown:hover .dropdown,
.has-dropdown.is-open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  color: var(--azul-inst);
  text-transform: none;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 20px;
  display: block;
}
.dropdown a:hover { background: var(--gris-claro); color: var(--celeste); }
.dropdown a::after { display: none; }

/* CTA "publicación destacada" */
.btn-featured {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--beige);
  color: var(--azul-inst);
  padding: 8px 20px;
  border-radius: 4px;
  line-height: 1.25;
  flex-shrink: 0;
  transition: background .2s;
}
.btn-featured:hover { background: #ffeecb; }
.btn-featured-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rojo);
}
.btn-featured-title {
  font-size: 13px;
  font-weight: 700;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón hamburguesa (móvil) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .header-utility { display: none; } /* pendiente: valorar versión reducida en menú móvil */
  .header-logo { padding: 8px 12px; }
  .header-logo img { height: 34px; }
  .header-nav {
    height: var(--header-h-mobile);
    padding: 0 12px;
    justify-content: space-between; /* hamburguesa a la izquierda, CTA a la derecha */
    gap: 10px;
  }

  .nav-toggle { display: flex; flex-shrink: 0; }

  /* BUG (detectado por Rodo en su celular): `max-width: 46vw` se calcula
     sobre el ancho TOTAL de pantalla, pero en esta fila el logo ya ocupa
     buena parte de ese ancho — al botón nunca le queda ese 46vw real
     disponible y se salía por el borde derecho de la pantalla (sin verse
     su borde), cortando el texto. Fix: en vez de adivinar un % del
     viewport, se deja que flexbox calcule el espacio real restante de
     `.header-nav` (min-width:0 permite encogerse por debajo de su
     contenido, flex:1 1 auto lo hace ocupar exactamente lo que sobra
     junto al botón de hamburguesa) — funciona igual sin importar cuánto
     ancho real le quede en cada pantalla. max-width de respaldo para que
     no crezca demasiado en anchos "móviles" grandes (tablets cerca de
     991px). */
  .btn-featured { flex: 1 1 auto; min-width: 0; max-width: 230px; padding: 6px 10px; }
  .btn-featured-label { font-size: 9px; }
  .btn-featured-title { font-size: 11.5px; max-width: 100%; white-space: normal; line-height: 1.15; overflow-wrap: break-word; }

  .main-nav {
    position: fixed;
    top: var(--header-h-mobile);
    left: 0; right: 0; bottom: 0;
    background: var(--azul-inst);
    padding: 20px;
    transform: translateX(100%);
    transition: transform .25s;
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }
  .main-nav > ul { flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
  .main-nav > ul > li { width: 100%; }
  .main-nav a { display: block; padding: 12px 4px; }

  .dropdown {
    position: static;
    box-shadow: none;
    background: rgba(255,255,255,.06);
    opacity: 1; visibility: visible; transform: none;
    display: none;
    border-radius: 0;
    padding: 4px 0 4px 12px;
  }
  .dropdown a { color: rgba(255,255,255,.85); }
  .dropdown a:hover { background: transparent; color: var(--celeste); }
  .has-dropdown.is-open .dropdown { display: block; }

  .btn-featured { margin-top: 18px; align-items: flex-start; }
}

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

/* ==========================================================================
   HERO — slideshow (4 imágenes, crossfade) + barra de cifras
   ========================================================================== */
.hero {
  position: relative;
  min-height: 88vh;
  max-height: 820px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top; /* ancla arriba: evita cortar rostros en fotos grupales al recortar con cover */
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; }
.hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28,49,94,.15) 0%,
    rgba(28,49,94,.08) 45%,
    rgba(28,49,94,.80) 100%);
}

.hero-content { position: relative; z-index: 2; width: 100%; padding-bottom: 28px; }
.hero-headline {
  display: none;
  font-family: var(--font-display);
  color: var(--blanco);
  font-size: clamp(26px, 4vw, 46px);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0,0,0,.4);
  line-height: 1.25;
}
.hero-headline.is-active { display: block; animation: heroFadeUp .8s ease; }
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-dots {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding-bottom: 22px;
}
.hero-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .2s, transform .2s;
}
.hero-dot.is-active { background: var(--beige); transform: scale(1.25); }
.hero-dot:hover { background: rgba(255,255,255,.7); }

.hero-stats {
  position: relative;
  z-index: 2;
  background: rgba(28,49,94,.88);
}
.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;
}
.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 { min-height: 76vh; }
  .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: linear-gradient(180deg, #F7F2E7 0%, #EFE6D2 100%);
}
.educar-corazon::before {
  /* sombra que separa visualmente el hero de esta zona (el hero tiene
     overflow:hidden, así que la sombra se dibuja acá, no en el hero) */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 34px;
  background: linear-gradient(180deg, rgba(10,18,36,.30) 0%, rgba(10,18,36,0) 100%);
  pointer-events: none;
}
.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: 15px;
  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: #8892A4;
  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: 800;
  margin-bottom: 8px;
}
.valor-copy p {
  font-size: 14.5px;
  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(250,227,181,.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(28,49,94,.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(250,227,181,.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(28,49,94,.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(28,49,94,.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: 14.5px;
  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; }

.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(28,49,94,.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: 14.5px;
  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: linear-gradient(180deg, #F7F2E7 0%, #EFE6D2 100%);
  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(28,49,94,.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(28,49,94,.16);
}
.red-colegio-card:hover .red-colegio-name { color: var(--celeste); }

.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(28,49,94,.28) 0%, rgba(28,49,94,.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 { text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.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-inst); }
.mv-vision { background: linear-gradient(135deg, var(--celeste) 0%, #0B6E90 100%); }

.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: 800;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 14px;
}
.mv-card p { font-size: 15.5px; 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: linear-gradient(180deg, #F7F2E7 0%, #EFE6D2 100%);
  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(28,49,94,.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(28,49,94,.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: 14.5px;
  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(28,49,94,.62) 0%, rgba(28,49,94,.74) 100%);
}
.hitos .container { position: relative; z-index: 1; }

.hitos-intro { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.hitos .eyebrow { 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: 14.5px;
  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: 15px; 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); border: 1px solid #F5C2C2; }

.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: #152547; 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(28,49,94,.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 — 4 columnas (institución, 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.
   ============================================================ */
.site-footer { background: var(--azul-inst); color: #fff; }

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

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

/* -- 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: 90%;
  margin: 0 auto 24px;
  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 0 22px; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.footer-contact-list li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.footer-contact-list svg { width: 15px; height: 15px; flex-shrink: 0; fill: var(--celeste); }
.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 2 y 3: listas de enlaces -- */
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 16px; }
.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: 13px;
  letter-spacing: .07em;
  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: 13px; font-style: italic; color: rgba(255,255,255,.55); }

/* -- Columna 4: 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) + sombra sutil, a pedido de Rodo */
  background: transparent;
  border-radius: 8px;
  max-width: 100%;
  overflow-x: auto;
  box-shadow: 0 12px 28px rgba(0,0,0,.28);
}
.footer-boletin-frame iframe { display: block; max-width: 100%; border: none; border-radius: 8px; }

.footer-bottom { background: rgba(0,0,0,.18); }
.footer-bottom-inner {
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
  font-size: 12.5px;
  color: rgba(255,255,255,.65);
}
.footer-credit {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.65);
  text-decoration: none;
  transition: color .2s;
}
.footer-credit svg { width: 14px; height: 14px; fill: currentColor; opacity: .8; }
.footer-credit:hover { color: var(--beige); }

@media (max-width: 480px) {
  .footer-bottom-inner { justify-content: center; text-align: center; }
}

@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(28,49,94,.55) 0%, rgba(28,49,94,.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(--gris-claro);
  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(28,49,94,.24);
  transition: transform .2s ease, box-shadow .2s ease;
}
.documentos-frame:hover,
.calendario-frame:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 42px rgba(28,49,94,.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: 13.5px;
  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(28,49,94,.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(--gris-claro);
  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(28,49,94,.08);
  transition: transform .2s ease, box-shadow .2s ease;
  scroll-margin-top: calc(var(--header-h-utility) + var(--header-h-nav) + 20px);
}
.colegio-row:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(28,49,94,.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(28,49,94,.08); border-right: 1px solid rgba(28,49,94,.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-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(--celeste);
  margin-bottom: 12px;
}
.colegio-desc {
  font-size: 14.5px;
  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(28,49,94,.08); border-bottom: 1px solid rgba(28,49,94,.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(--gris-claro); }
.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; }
.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(--gris-claro); }

/* 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(28,49,94,.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(28,49,94,.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(--card-accent, var(--celeste));
}
.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: 15px;
  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. */
.identidad-perfiles-single { padding-top: 56px; }

.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 {
  background: var(--gris-claro);
  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(28,49,94,.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: 15.5px; 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: #1A2030;
  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: 15px;
  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 {
  /* Mismo degradado crema/beige que .instrumentos-gestion-section justo
     debajo — Rodo pidió unificar el fondo de ambas zonas (antes esta era
     gris claro, para alternar con el panel oscuro de arriba). */
  background: linear-gradient(180deg, #F7F2E7 0%, #EFE6D2 100%);
  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: 15.5px; 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(28,49,94,.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(28,49,94,.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(--celeste);
  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 {
  background: linear-gradient(180deg, #EFE6D2 0%, #F7F2E7 100%);
  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: 15.5px; 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(28,49,94,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.instrumento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(28,49,94,.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 {
  background: linear-gradient(180deg, #F7F2E7 0%, #FFFFFF 100%);
  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: 15.5px; 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(28,49,94,.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(28,49,94,.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; }
}