/* =========================================================
   Colegio de La Presentación Santa Teresa - Cúcuta
   Plantilla estática HTML + CSS + JS
   ========================================================= */

/* Fuentes del sitio (cargadas desde el CSS: no requiere tocar el <head>).
   - Handlee  -> títulos y encabezados (manuscrita, amigable para estudiantes)
   - Nunito   -> cuerpo y textos largos (redondeada y legible, combina con Handlee)
   - Baloo 2  -> ALTERNATIVA de títulos para comparar (ver nota más abajo)
   El @import DEBE ir al inicio del archivo para que el navegador lo respete. */
@import url("https://fonts.googleapis.com/css2?family=Handlee&family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&family=Baloo+2:wght@400;500;600;700&display=swap");

:root {
  --primary: #2f66cc;
  --primary-dark: #244f9e;
  --primary-foreground: #ffffff;
  --gold: #e8b23e;
  --gold-foreground: #3a2f10;
  --grass: #22a86a;
  --grass-foreground: #ffffff;
  --coral: #ee6042;
  --coral-foreground: #ffffff;
  --sky: #3ba3d9;
  --sky-foreground: #ffffff;

  /* =====================================================
     COLOR DEL FADE DEL SLIDER PRINCIPAL (hero)
     Para cambiarlo en vivo, descomenta UNA sola línea de
     abajo (valores en canales R, G, B). El azul es el
     predeterminado. También puedes cambiarlo por sección
     poniendo una clase en <section class="hero ...">:
       hero--verde  /  hero--amarillo  /  hero--coral
     ===================================================== */
  --hero-fade: 36, 79, 158;      /* Azul (predeterminado) */
  /* --hero-fade: 34, 168, 106; */   /* Verde   */
  /* --hero-fade: 232, 178, 62; */   /* Amarillo */
  /* --hero-fade: 238, 96, 66;  */   /* Coral   */

  --background: #fbfcfe;
  --foreground: #1a2233;
  --card: #ffffff;
  --muted: #f3f5fa;
  --muted-foreground: #5f6b80;
  --secondary: #eef2fb;
  --border: #e2e6ee;

  --radius: 1rem;
  --radius-sm: 0.6rem;
  --radius-lg: 1.5rem;

  --font-sans: "Nunito", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  /* Títulos manuscritos (Handlee). Para comparar la alternativa, cambia
     "Handlee" por "Baloo 2" en la línea siguiente y recarga la página. */
  --font-serif: "Handlee", "Baloo 2", "Playfair Display", Georgia, cursive;

  --shadow-sm: 0 1px 2px rgba(26, 34, 51, 0.06);
  --shadow: 0 6px 20px rgba(26, 34, 51, 0.08);
  --shadow-lg: 0 18px 40px rgba(26, 34, 51, 0.14);
  --container: 1200px;
}

/* ----------------- Reset ----------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--background);
}

body {
  font-family: var(--font-sans);
  color: var(--foreground);
  background: var(--background);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

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

ul {
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--font-serif);
  line-height: 1.15;
  font-weight: 700;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.section {
  padding: 5rem 0;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 3rem;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(47, 102, 204, 0.1);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--foreground);
}

.section-title .hl {
  color: var(--primary);
}

.section-sub {
  margin-top: 1rem;
  color: var(--muted-foreground);
  font-size: 1.05rem;
}

/* ----------------- Buttons ----------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow);
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-gold {
  background: var(--gold);
  color: var(--gold-foreground);
}

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

.btn-outline {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: #fff;
}

.btn-ghost {
  background: var(--secondary);
  color: var(--primary);
}

/* ----------------- Header ----------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  transition: all 0.3s ease;
}

.header .nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0;
}

.logo-pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.95);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
}

.logo-pill img {
  height: 3.85rem;
  width: auto;
  transition: height 0.3s ease;
}

.nav-links {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1.15rem;
  min-width: 0;
}

.nav-links a {
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  transition: color 0.2s ease;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width 0.25s ease;
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
}

.nav-cta .btn {
  padding: 0.55rem 1.15rem;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Header scrolled state */
.header.scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-sm);
}

.header.scrolled .logo-pill {
  box-shadow: none;
  background: transparent;
  padding-left: 0;
}

.header.scrolled .logo-pill img {
  height: 3rem;
}

.header.scrolled .nav-links a {
  color: var(--foreground);
}

.header.scrolled .nav-links a:hover {
  color: var(--primary);
}

.menu-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 0.6rem;
  padding: 0.5rem;
  cursor: pointer;
  color: var(--primary);
}

.menu-toggle svg {
  width: 26px;
  height: 26px;
}

/* Mobile nav */
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.75rem;
  margin-top: 0.5rem;
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  padding: 0.7rem 1rem;
  border-radius: 0.6rem;
  font-weight: 600;
  color: var(--foreground);
}

.mobile-nav a:hover {
  background: var(--secondary);
  color: var(--primary);
}

/* Menú móvil (clase usada en las páginas nuevas) */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding: 1rem 1.25rem 1.5rem;
}

.mobile-menu.open {
  display: flex;
}

.mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.mobile-menu nav a,
.mobile-menu nav summary {
  padding: 0.65rem 0.9rem;
  border-radius: 0.6rem;
  font-weight: 600;
  color: var(--foreground);
  cursor: pointer;
  list-style: none;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.mobile-menu nav a:hover,
.mobile-menu nav summary:hover {
  background: var(--secondary);
  color: var(--primary);
}

.mobile-menu nav details > a {
  padding-left: 1.5rem;
  font-weight: 500;
}

/* ----------------- Menú multinivel (desktop) ----------------- */
.nav-item {
  position: relative;
}

.nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  padding: 0;
  transition: color 0.2s ease;
}

.header.scrolled .nav-parent {
  color: var(--foreground);
}

.header.scrolled .nav-parent:hover {
  color: var(--primary);
}

.nav-parent .chev {
  width: 16px;
  height: 16px;
  transition: transform 0.25s ease;
}

.nav-item.has-sub:hover > .nav-parent .chev:not(.chev-right) {
  transform: rotate(180deg);
}

/* Submenú desplegable */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.75rem;
  min-width: 15rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 70;
}

/* Puente invisible para no perder el hover */
.submenu::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  right: 0;
  height: 0.75rem;
}

.nav-item.has-sub:hover > .submenu,
.nav-item.tap-open > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a,
.submenu .nav-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--foreground);
  text-align: left;
}

.submenu a::after {
  display: none;
}

.submenu a:hover,
.submenu .nav-parent:hover {
  background: var(--secondary);
  color: var(--primary);
}

/* Tercer nivel: se abre a la derecha */
.submenu-right {
  top: -0.5rem;
  left: 100%;
  margin-top: 0;
  margin-left: 0.5rem;
}

.submenu-right::before {
  top: 0;
  left: -0.5rem;
  right: auto;
  width: 0.5rem;
  height: 100%;
}

/* ----------------- Menú multinivel (móvil) ----------------- */
.m-item {
  display: flex;
  flex-direction: column;
}

.m-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--foreground);
  padding: 0.7rem 1rem;
  border-radius: 0.6rem;
  text-align: left;
}

.m-parent:hover {
  background: var(--secondary);
}

.m-parent .chev {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

.m-parent.open .chev {
  transform: rotate(180deg);
}

.m-submenu {
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  margin-left: 0.75rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border);
}

.m-submenu.open {
  display: flex;
}

.m-submenu a {
  font-weight: 600;
  font-size: 0.9rem;
}

.m-parent-2 {
  font-weight: 600;
  font-size: 0.9rem;
}

.m-submenu-2 {
  margin-left: 0.6rem;
}

/* ----------------- Page Hero (páginas secundarias) ----------------- */
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 58vh;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(30, 63, 130, 0.9) 0%,
    rgba(30, 63, 130, 0.6) 55%,
    rgba(30, 63, 130, 0.4) 100%
  );
}

.page-hero-overlay.bottom {
  background: linear-gradient(to top, rgba(30, 63, 130, 0.85), rgba(30, 63, 130, 0) 60%);
}

.page-hero-content {
  position: relative;
  width: 100%;
  padding-top: 9rem;
  padding-bottom: 3.5rem;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--gold);
}

.breadcrumb .sep {
  color: rgba(255, 255, 255, 0.5);
}

.breadcrumb .current {
  color: #fff;
  font-weight: 600;
}

/* Evita que SVGs sueltos dentro del breadcrumb se desborden */
.breadcrumb svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.page-hero .hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(212, 165, 74, 0.2);
  color: var(--gold);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(212, 165, 74, 0.4);
}

.page-hero h1 {
  margin-top: 1rem;
  max-width: 46rem;
  font-family: var(--font-serif);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}

.page-hero .page-hero-desc {
  margin-top: 1rem;
  max-width: 38rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

/* Secciones internas reutilizables */
.prose-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.prose-lead + .prose-lead {
  margin-top: 1rem;
}

/* Línea de tiempo (Historia) */
.timeline {
  position: relative;
  max-width: 46rem;
  margin: 3.5rem auto 0;
  padding-left: 2rem;
  border-left: 2px solid rgba(36, 58, 107, 0.2);
  list-style: none;
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.65rem;
  top: 0.25rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--gold);
  border: 4px solid var(--secondary);
}

.timeline-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.timeline-year {
  display: inline-block;
  background: rgba(212, 165, 74, 0.2);
  color: var(--primary);
  font-family: var(--font-serif);
  font-weight: 700;
  padding: 0.15rem 0.7rem;
  border-radius: 0.5rem;
}

.timeline-card h3 {
  margin-top: 0.75rem;
  color: var(--primary);
  font-size: 1.15rem;
}

.timeline-card p {
  margin-top: 0.35rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* Grid de valores */
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.value-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  padding: 1.75rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.value-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.value-item h3 {
  margin-top: 1.25rem;
  color: var(--primary);
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.value-item p {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* Cita / lema */
.quote-block {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

.quote-block .quote-text {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3vw, 1.9rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--primary);
}

.quote-block .quote-author {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

@media (min-width: 640px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .values-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ----------------- Plantilla de Nivel (Oferta educativa) ----------------- */
.nivel-intro {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

.nivel-intro-media img {
  width: 100%;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-lg);
  object-fit: cover;
}

.nivel-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.nivel-stat {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem 0.5rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.nivel-stat strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--primary);
}

.nivel-stat span {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

/* Grid de características */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.feature-card .feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  background: rgba(232, 178, 62, 0.18);
  color: var(--primary);
}

.feature-card .feature-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.feature-card h3 {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--primary);
}

.feature-card p {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

/* Galería del nivel */
.nivel-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.nivel-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: var(--shadow);
  aspect-ratio: 4 / 3;
}

.nivel-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.nivel-gallery figure:hover img {
  transform: scale(1.05);
}

/* CTA del nivel */
.nivel-cta {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}

.nivel-cta h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  color: var(--primary);
}

.nivel-cta p {
  margin-top: 1rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.nivel-cta .btn {
  margin-top: 1.75rem;
}

@media (min-width: 768px) {
  .nivel-intro {
    grid-template-columns: 1fr 1fr;
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .nivel-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .nivel-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----------------- Detalle de Noticia ----------------- */
.noticia {
  max-width: 56rem;
  margin: 0 auto;
}

.noticia-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

.noticia-meta .meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.noticia-meta svg {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
}

.noticia-meta .tag {
  background: rgba(232, 178, 62, 0.18);
  color: var(--primary);
  font-weight: 600;
  padding: 0.25rem 0.8rem;
  border-radius: 999px;
}

.noticia-cover {
  margin-top: 2rem;
  overflow: hidden;
  border-radius: 1.5rem;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
}

.noticia-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.noticia-body {
  margin-top: 2rem;
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--foreground);
}

.noticia-body p + p {
  margin-top: 1.25rem;
}

.noticia-block {
  margin-top: 3.5rem;
}

.noticia-block > h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--primary);
  margin-bottom: 1.5rem;
}

/* Galería de la noticia (4 columnas) */
.noticia-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.noticia-gallery figure {
  margin: 0;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: var(--shadow);
  aspect-ratio: 1 / 1;
}

.noticia-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.noticia-gallery figure:hover img {
  transform: scale(1.05);
}

/* Videos */
.noticia-videos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1rem;
  box-shadow: var(--shadow);
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-caption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

/* Adjuntos */
.noticia-files {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.file-item:hover {
  border-color: rgba(47, 102, 204, 0.4);
  background: var(--secondary);
}

.file-item .file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 0.75rem;
  background: rgba(47, 102, 204, 0.1);
  color: var(--primary);
}

.file-item .file-icon svg {
  width: 1.3rem;
  height: 1.3rem;
}

.file-item .file-info {
  flex: 1;
  min-width: 0;
}

.file-item .file-name {
  display: block;
  font-weight: 600;
  color: var(--foreground);
}

.file-item .file-meta {
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.file-item .file-dl {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--primary);
}

/* Ubicación */
.noticia-map {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 1.5rem;
  box-shadow: var(--shadow);
}

.map-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 1.25rem;
  background: var(--card);
}

.map-head svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--primary);
}

.map-head strong {
  display: block;
  color: var(--foreground);
}

.map-head span {
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

.noticia-map iframe {
  display: block;
  width: 100%;
  height: 18rem;
  border: 0;
}

.noticia-back {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 640px) {
  .noticia-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
  .noticia-videos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .noticia-gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ----------------- Visor de Galería (Lightbox / carrete) ----------------- */
.nivel-gallery img,
.noticia-gallery img {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: rgba(7, 9, 14, 0.985);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.lightbox-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.lightbox-count {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
}

.lightbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.lightbox-btn svg {
  width: 1.4rem;
  height: 1.4rem;
}

.lightbox-close {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
}

.lightbox-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4rem 1rem;
  min-height: 0;
}

.lightbox-figure {
  margin: 0;
  max-width: 64rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 72vh;
  object-fit: contain;
  border-radius: 1rem;
}

.lightbox-figure img.zoom-in {
  animation: lb-zoom 0.3s ease;
}

@keyframes lb-zoom {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lightbox-figure figcaption {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
}

.lightbox-nav:hover {
  transform: translateY(-50%) scale(1.08);
}

.lightbox-prev {
  left: 0.75rem;
}
.lightbox-next {
  right: 0.75rem;
}

.lightbox-thumbs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
}

@media (min-width: 640px) {
  .lightbox-thumbs {
    justify-content: center;
  }
}

.lightbox-thumb {
  flex: 0 0 auto;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 0;
  border-radius: 0.5rem;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.5;
  outline: 2px solid transparent;
  transition: opacity 0.2s ease, outline-color 0.2s ease;
}

.lightbox-thumb:hover {
  opacity: 0.9;
}

.lightbox-thumb.active {
  opacity: 1;
  outline-color: #fff;
}

.lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ----------------- Fondos con patrones y movimiento ----------------- */
.bg-dots {
  position: relative;
  background-color: var(--background);
  background-image: radial-gradient(rgba(47, 102, 204, 0.14) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

.bg-institucional {
  position: relative;
  background-color: var(--background);
  background-image:
    radial-gradient(closest-side at 12% 18%, rgba(59, 163, 217, 0.16), transparent),
    radial-gradient(closest-side at 88% 8%, rgba(232, 178, 62, 0.18), transparent),
    radial-gradient(closest-side at 78% 92%, rgba(47, 102, 204, 0.1), transparent);
}

.floating-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.floating-shapes span {
  position: absolute;
  border-radius: 999px;
}

.fs-1 { left: 6%; top: 4rem; width: 6rem; height: 6rem; background: rgba(59, 163, 217, 0.16); }
.fs-2 { right: 8%; top: 6rem; width: 4rem; height: 4rem; background: rgba(232, 178, 62, 0.28); }
.fs-3 { left: 14%; bottom: 4rem; width: 3rem; height: 3rem; border-radius: 1rem; background: rgba(238, 96, 66, 0.2); }
.fs-4 { right: 16%; bottom: 6rem; width: 5rem; height: 5rem; background: rgba(47, 102, 204, 0.1); }
.fs-5 { right: 38%; top: 2.5rem; width: 2rem; height: 2rem; background: rgba(34, 168, 106, 0.25); }

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

@keyframes float-slower {
  0%, 100% { transform: translateY(0) translateX(0) rotate(0deg); }
  50% { transform: translateY(18px) translateX(-12px) rotate(8deg); }
}

.floaty { animation: float-slow 9s ease-in-out infinite; }
.floaty-2 { animation: float-slower 12s ease-in-out infinite; }

.section-relative { position: relative; }
.section-relative > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .floaty, .floaty-2 { animation: none; }
}

/* ----------------- Hero Slider ----------------- */
.hero {
  position: relative;
  height: 100vh;
  min-height: 620px;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 1;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.slide.active .slide-bg {
  animation: kenburns 7s ease-out forwards;
}

@keyframes kenburns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  100% {
    transform: scale(1.12) translate(-1.5%, -1%);
  }
}

.slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--hero-fade), 0.8),
    rgba(var(--hero-fade), 0.4),
    transparent
  );
}

.slide-overlay.bottom {
  background: linear-gradient(
    to top,
    rgba(var(--hero-fade), 0.55),
    transparent 55%
  );
}

/* Presets rápidos: agrega una de estas clases a <section class="hero ..."> */
.hero.hero--azul     { --hero-fade: 36, 79, 158; }
.hero.hero--verde    { --hero-fade: 34, 168, 106; }
.hero.hero--amarillo { --hero-fade: 232, 178, 62; }
.hero.hero--coral    { --hero-fade: 238, 96, 66; }

.hero-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-inner {
  max-width: 640px;
  color: #fff;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(232, 178, 62, 0.2);
  border: 1px solid rgba(232, 178, 62, 0.5);
  color: var(--gold);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.hero-title {
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  margin-top: 1.2rem;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

.hero-desc {
  margin-top: 1.2rem;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 520px;
}

.hero-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.slide-content > * {
  opacity: 0;
  animation: slideUpFade 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.slide.active .slide-content > *:nth-child(1) {
  animation-delay: 0.15s;
}
.slide.active .slide-content > *:nth-child(2) {
  animation-delay: 0.35s;
}
.slide.active .slide-content > *:nth-child(3) {
  animation-delay: 0.55s;
}
.slide.active .slide-content > *:nth-child(4) {
  animation-delay: 0.75s;
}

@keyframes slideUpFade {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero controls */
.hero-nav {
  position: absolute;
  bottom: 2.5rem;
  left: 0;
  right: 0;
  z-index: 6;
}

.hero-nav .container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hero-dots {
  display: flex;
  gap: 0.6rem;
}

.hero-dots button {
  width: 34px;
  height: 5px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.hero-dots button.active {
  background: rgba(255, 255, 255, 0.4);
}

.hero-dots button.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: var(--gold);
  transform-origin: left;
  animation: progress 6s linear;
}

@keyframes progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hero-arrows {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

.hero-arrows button {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease;
}

.hero-arrows button:hover {
  background: rgba(255, 255, 255, 0.25);
}

.hero-arrows svg {
  width: 20px;
  height: 20px;
}

/* ----------------- Quick Access ----------------- */
.quick {
  position: relative;
  z-index: 20;
  margin-top: -5rem;
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.quick-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--shadow-lg);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.quick-card:hover {
  transform: translateY(-6px);
}

.icon-badge {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  transition: all 0.25s ease;
}

.icon-badge svg {
  display: block;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
}

.badge-coral {
  background: rgba(238, 96, 66, 0.15);
  color: var(--coral);
}
.badge-grass {
  background: rgba(34, 168, 106, 0.15);
  color: var(--grass);
}
.badge-sky {
  background: rgba(59, 163, 217, 0.15);
  color: var(--sky);
}
.badge-gold {
  background: rgba(232, 178, 62, 0.2);
  color: #9a7413;
}
.badge-primary {
  background: rgba(47, 102, 204, 0.12);
  color: var(--primary);
}

.quick-card:hover .badge-coral {
  background: var(--coral);
  color: #fff;
}
.quick-card:hover .badge-grass {
  background: var(--grass);
  color: #fff;
}
.quick-card:hover .badge-sky {
  background: var(--sky);
  color: #fff;
}
.quick-card:hover .badge-gold {
  background: var(--gold);
  color: var(--gold-foreground);
}

.quick-card h3 {
  font-size: 1.15rem;
  margin-top: 1rem;
  color: var(--foreground);
}

.quick-card p {
  margin-top: 0.5rem;
  font-size: 0.92rem;
  color: var(--muted-foreground);
  flex: 1;
}

.quick-card .link {
  margin-top: 1rem;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.quick-card:hover .link svg {
  transform: translateX(4px);
}

.quick-card .link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

/* ----------------- Why Us ----------------- */
.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.why-media {
  position: relative;
}

.why-media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  height: 460px;
  object-fit: cover;
}

.why-badge {
  position: absolute;
  bottom: -1.5rem;
  right: -1rem;
  background: var(--gold);
  color: var(--gold-foreground);
  padding: 1.2rem 1.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.why-badge strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1;
}

.why-badge span {
  font-size: 0.8rem;
  font-weight: 600;
}

.why-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.8rem;
}

.value-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem;
  transition: transform 0.2s ease;
}

.value-card:hover {
  transform: translateY(-4px);
}

.value-card .icon-badge {
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.9rem;
}

.value-card .icon-badge svg {
  width: 1.3rem;
  height: 1.3rem;
}

.value-card h4 {
  margin-top: 0.7rem;
  font-size: 0.95rem;
  color: var(--primary);
  font-weight: 700;
}

.value-card p {
  margin-top: 0.25rem;
  font-size: 0.82rem;
  color: var(--muted-foreground);
}

/* ----------------- Offerings ----------------- */
.bg-muted {
  background: var(--muted);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.offer-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.offer-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.offer-media {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.offer-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.offer-card:hover .offer-media img {
  transform: scale(1.07);
}

.offer-tag {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.tag-coral {
  background: var(--coral);
  color: #fff;
}
.tag-grass {
  background: var(--grass);
  color: #fff;
}
.tag-sky {
  background: var(--sky);
  color: #fff;
}

.offer-body {
  padding: 1.5rem;
}

.offer-body h3 {
  font-size: 1.25rem;
  color: var(--foreground);
}

.offer-body p {
  margin-top: 0.6rem;
  color: var(--muted-foreground);
  font-size: 0.95rem;
}

.offer-body .link {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
}

/* ----------------- Stats ----------------- */
.bg-secondary {
  background: var(--secondary);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.8rem;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.stat-card .icon-badge {
  margin: 0 auto;
}

.stat-num {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--primary);
  margin-top: 1rem;
}

.stat-label {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* ----------------- Platforms ----------------- */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.platform-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.platform-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.platform-card .icon-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 3rem;
  height: 3rem;
}

.platform-card span {
  display: block;
  margin-top: 0.7rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--foreground);
}

/* ----------------- News ----------------- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.news-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.news-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.news-media {
  height: 200px;
  overflow: hidden;
  position: relative;
}

.news-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.news-card:hover .news-media img {
  transform: scale(1.07);
}

.news-date {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--primary);
  color: #fff;
  border-radius: 0.6rem;
  padding: 0.4rem 0.7rem;
  text-align: center;
  line-height: 1;
  box-shadow: var(--shadow);
}

.news-date strong {
  display: block;
  font-size: 1.2rem;
  font-family: var(--font-serif);
}

.news-date span {
  font-size: 0.7rem;
  text-transform: uppercase;
}

.news-body {
  padding: 1.4rem;
}

.news-cat {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--coral);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-body h3 {
  margin-top: 0.5rem;
  font-size: 1.15rem;
  color: var(--foreground);
}

.news-body p {
  margin-top: 0.5rem;
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

/* ----------------- Agenda ----------------- */
.agenda-tabs {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.agenda-tab {
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.agenda-tab.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.agenda-list {
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.agenda-item {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--primary);
  border-radius: var(--radius);
  padding: 1.1rem 1.4rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.agenda-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow);
}

.agenda-item.cat-festivo {
  border-left-color: var(--coral);
}
.agenda-item.cat-general {
  border-left-color: var(--primary);
}
.agenda-item.cat-academico {
  border-left-color: var(--grass);
}
.agenda-item.cat-vacaciones {
  border-left-color: var(--gold);
}

.agenda-date {
  flex-shrink: 0;
  width: 68px;
  text-align: center;
  background: var(--secondary);
  border-radius: 0.7rem;
  padding: 0.6rem 0;
}

.agenda-date strong {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--primary);
  line-height: 1;
}

.agenda-date span {
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.agenda-info h4 {
  font-size: 1.02rem;
  color: var(--foreground);
}

.agenda-info p {
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

.agenda-chip {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.chip-festivo {
  background: rgba(238, 96, 66, 0.15);
  color: var(--coral);
}
.chip-general {
  background: rgba(47, 102, 204, 0.12);
  color: var(--primary);
}
.chip-academico {
  background: rgba(34, 168, 106, 0.15);
  color: var(--grass);
}
.chip-vacaciones {
  background: rgba(232, 178, 62, 0.2);
  color: #9a7413;
}

.agenda-item.hidden {
  display: none;
}

/* Tarjetas de índice de autoridades */
.autoridades-index-grid {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .autoridades-index-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
  }
}

.autoridad-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.autoridad-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(47, 102, 204, 0.35);
}

.autoridad-card-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--secondary);
}

.autoridad-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.45s ease;
}

.autoridad-card:hover .autoridad-card-photo img {
  transform: scale(1.04);
}

.autoridad-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
}

.autoridad-card-body h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--primary);
  margin: 0;
}

.autoridad-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  transition: gap 0.2s ease;
}

.autoridad-card:hover .autoridad-card-cta {
  gap: 0.6rem;
}

/* Enlace en item de agenda (para ir al detalle del evento) */
a.agenda-item {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

a.agenda-item .agenda-info h4 {
  transition: color 0.2s ease;
}

a.agenda-item:hover .agenda-info h4 {
  color: var(--primary);
}

/* ----------------- Calendario completo ----------------- */
.cal-layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 960px) {
  .cal-layout {
    /* El calendario recibe casi el doble de espacio: es el contenido principal */
    grid-template-columns: 2fr 1fr;
    gap: 2.5rem;
  }
}

.cal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

@media (min-width: 640px) {
  .cal {
    padding: 2rem;
  }
}

.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.cal-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

/* Panel lateral: contenido secundario, visualmente más discreto */
.cal-side {
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

/* Tarjeta compacta de evento para el panel lateral (adelanto, no listado
   completo): más angosta y corta que .agenda-item, pensada para 1fr */
.cal-side-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cal-side-item + .cal-side-item {
  margin-top: 0.75rem;
}

.cal-side-item:hover {
  transform: translateX(3px);
  box-shadow: var(--shadow-sm);
}

.cal-side-item.cat-festivo {
  border-left-color: var(--coral);
}
.cal-side-item.cat-academico {
  border-left-color: var(--grass);
}
.cal-side-item.cat-vacaciones {
  border-left-color: var(--gold);
}

.cal-side-date {
  flex-shrink: 0;
  width: 2.7rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 0.1rem;
}

.cal-side-date strong {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--primary);
}

.cal-side-date span {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.cal-side-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

.cal-side-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s ease;
}

.cal-side-item:hover .cal-side-name {
  color: var(--primary);
}

.cal-side-chip {
  font-size: 0.62rem;
  padding: 0.15rem 0.55rem;
}

.cal-side-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.cal-side-cta:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

.cal-side-cta svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.cal-side-cta:hover svg {
  transform: translateX(2px);
}

.cal-nav {
  display: flex;
  gap: 0.5rem;
}

.cal-nav button {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--secondary);
  color: var(--primary);
  cursor: pointer;
  transition: background 0.2s ease;
}

.cal-nav button:hover {
  background: var(--primary);
  color: #fff;
}

.cal-nav svg {
  width: 1.1rem;
  height: 1.1rem;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  /* grid-auto-rows fija la MISMA altura para todas las filas, sin importar
     cuántos eventos tenga cada día: así todos los recuadros se ven iguales */
  grid-auto-rows: 5.6rem;
  gap: 0.45rem;
}

.cal-weekday {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
  padding: 0.4rem 0;
}

.cal-day {
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  background: var(--background);
  overflow: hidden;
  min-width: 0;
}

.cal-day.other-month {
  opacity: 0.4;
}

.cal-day .cal-num {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--foreground);
}

.cal-day.today {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

.cal-day.today .cal-num {
  color: var(--primary);
}

/* El evento envuelve su texto en hasta 2 líneas en lugar de recortarlo */
.cal-event {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 0.64rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.16rem 0.32rem;
  border-radius: 0.35rem;
  color: #fff;
  text-decoration: none;
  word-break: break-word;
  transition: filter 0.2s ease;
}

.cal-event:hover {
  filter: brightness(1.08);
}

.cal-event.cat-general {
  background: var(--primary);
}
.cal-event.cat-academico {
  background: var(--grass);
}
.cal-event.cat-festivo {
  background: var(--coral);
}
.cal-event.cat-vacaciones {
  background: var(--gold);
  color: #6b5210;
}

/* Indicador de eventos adicionales cuando un día tiene más de uno */
.cal-day-more {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--muted-foreground);
  padding: 0 0.15rem;
}

/* ----- Ajustes responsive: el calendario debe verse prolijo en móvil ----- */
@media (max-width: 639px) {
  .cal-grid {
    grid-auto-rows: 3.9rem;
    gap: 0.28rem;
  }

  .cal-day {
    padding: 0.22rem;
    border-radius: 0.45rem;
    gap: 0.12rem;
  }

  .cal-day .cal-num {
    font-size: 0.72rem;
  }

  .cal-event {
    font-size: 0.56rem;
    line-height: 1.1;
    padding: 0.1rem 0.22rem;
    -webkit-line-clamp: 2;
  }

  .cal-day-more {
    font-size: 0.52rem;
  }

  .cal-weekday {
    font-size: 0.6rem;
    padding: 0.25rem 0;
  }
}

@media (max-width: 380px) {
  .cal-grid {
    grid-auto-rows: 3.4rem;
  }

  .cal-event {
    /* En pantallas muy pequeñas se prioriza el número del día */
    -webkit-line-clamp: 1;
  }
}

@media (max-width: 480px) {
  .cal {
    padding: 1.1rem 0.85rem;
  }
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.cal-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--muted-foreground);
}

.cal-legend i {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.25rem;
  display: inline-block;
}

.cal-side-title {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 1rem;
}

/* Detalle de evento: ficha de datos rápidos */
.evento-facts {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

@media (min-width: 640px) {
  .evento-facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fact {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.fact svg {
  width: 1.4rem;
  height: 1.4rem;
  flex-shrink: 0;
  color: var(--primary);
}

.fact .fact-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-foreground);
}

.fact .fact-value {
  display: block;
  font-weight: 600;
  color: var(--foreground);
}

/* ----------------- Autoridades ----------------- */

/* Bloque de una autoridad (foto + datos + cita) */
.autoridad {
  display: grid;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

@media (min-width: 768px) {
  .autoridad {
    grid-template-columns: 320px 1fr;
  }
  /* Alterna: foto a la derecha en el segundo bloque */
  .autoridad.autoridad-flip {
    grid-template-columns: 1fr 320px;
  }
  .autoridad.autoridad-flip .autoridad-photo {
    order: 2;
  }
  .autoridad.autoridad-flip .autoridad-body {
    order: 1;
  }
}

/* Panel de foto */
.autoridad-photo {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: var(--secondary);
}

.autoridad-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Cinta decorativa de cargo */
.autoridad-role-badge {
  position: absolute;
  bottom: 1.25rem;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.45rem 1.1rem 0.45rem 0.9rem;
  border-radius: 0 999px 999px 0;
}

.autoridad-role-badge svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* Panel de texto */
.autoridad-body {
  display: flex;
  flex-direction: column;
  padding: 2.25rem 2rem;
  gap: 1.5rem;
}

.autoridad-name {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.15;
  margin: 0;
}

.autoridad-carrera {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted-foreground);
  letter-spacing: 0.02em;
}

.autoridad-carrera svg {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--accent-foreground, var(--primary));
  flex-shrink: 0;
}

.autoridad-divider {
  width: 3rem;
  height: 3px;
  background: linear-gradient(to right, var(--primary), var(--gold, #e8b23e));
  border-radius: 999px;
  border: none;
  margin: 0;
}

.autoridad-desc {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--foreground);
  flex: 1;
}

/* Bloque de mensaje / cita */
.autoridad-mensaje {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  background: var(--secondary);
  border-left: 4px solid var(--primary);
  border-radius: 0 0.75rem 0.75rem 0;
}

.autoridad-mensaje::before {
  content: '\201C';
  position: absolute;
  top: -0.35rem;
  left: 0.85rem;
  font-family: var(--font-serif);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--primary);
  opacity: 0.18;
  pointer-events: none;
}

.autoridad-mensaje p {
  font-style: italic;
  font-size: 0.97rem;
  line-height: 1.75;
  color: var(--foreground);
  margin: 0;
}

.autoridad-mensaje cite {
  display: block;
  margin-top: 0.65rem;
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
}

/* Separador decorativo entre autoridades */
.autoridad-sep {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--muted-foreground);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.autoridad-sep::before,
.autoridad-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ----------------- Videos ----------------- */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.video-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
  cursor: pointer;
  position: relative;
}

.video-thumb {
  position: relative;
  height: 220px;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.5s ease;
}

.video-card:hover .video-thumb img {
  opacity: 1;
  transform: scale(1.05);
}

.play-btn {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.play-btn span {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-lg);
  transition: transform 0.2s ease;
}

.video-card:hover .play-btn span {
  transform: scale(1.1);
}

.play-btn svg {
  width: 26px;
  height: 26px;
  color: var(--primary);
  margin-left: 3px;
}

.video-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.2rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  color: #fff;
}

.video-caption h4 {
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

.video-caption p {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

/* ----------------- Gallery ----------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}

.gallery-item {
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-item.big {
  grid-column: span 2;
  grid-row: span 2;
}

/* ----------------- Admissions CTA ----------------- */
.cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  text-align: center;
}

.cta h2 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  color: #fff;
}

.cta p {
  margin: 1rem auto 2rem;
  max-width: 560px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
}

.cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ----------------- Footer ----------------- */
.footer {
  background: var(--primary-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 4rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 2.5rem;
}

/* Contenedor del logo (variante antigua: div.footer-logo > img) */
.footer-logo {
  display: inline-flex;
  background: #fff;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
}

.footer-logo img {
  height: 5rem;
  width: auto;
}

/* Variante nueva: img.footer-logo directo (páginas secundarias) */
img.footer-logo {
  display: block;
  height: 5rem;
  width: auto;
  max-width: 100%;
  background: #fff;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius);
  object-fit: contain;
}

/* Columna de marca en footer nuevo */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-brand p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.75);
  max-width: 280px;
}

/* Columnas de enlaces en footer nuevo */
.footer-links h4 {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links ul li {
  margin-bottom: 0.65rem;
}

.footer-links ul a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.footer-links ul a:hover {
  color: var(--gold);
}

/* Columna de contacto en footer nuevo (sin lista, con p) */
.footer-contact h4 {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  margin-bottom: 1.1rem;
}

.footer-contact > p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.footer-contact > p a {
  color: var(--gold);
  text-decoration: none;
}

.footer-contact > p a:hover {
  text-decoration: underline;
}

/* Compatibilidad: footer-col conserva sus reglas */
.footer-col h4 {
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
}

.footer-col ul li {
  margin-bottom: 0.7rem;
}

.footer-col ul a:hover {
  color: var(--gold);
}

.footer-contact li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-bottom: 0.9rem;
  font-size: 0.9rem;
}

.footer-contact svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.socials {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.2rem;
}

.socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  transition: background 0.2s ease, transform 0.2s ease;
}

.socials a:hover {
  background: var(--gold);
  color: var(--gold-foreground);
  transform: translateY(-3px);
}

.socials svg {
  width: 20px;
  height: 20px;
}

.footer-desc {
  margin-top: 1.2rem;
  font-size: 0.9rem;
  max-width: 300px;
}

.footer-bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

/* ----------------- WhatsApp Float ----------------- */
.wa-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 80;
}

.wa-btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.5);
  position: relative;
}

.wa-btn svg {
  width: 32px;
  height: 32px;
}

.wa-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25d366;
  animation: pulse 2s infinite;
  z-index: -1;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.wa-popup {
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 300px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: translateY(10px) scale(0.96);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
}

.wa-popup.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.wa-header {
  background: #075e54;
  color: #fff;
  padding: 1rem;
  display: flex;
  gap: 0.7rem;
  align-items: center;
}

.wa-header .avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #25d366;
  display: grid;
  place-items: center;
}

.wa-header strong {
  font-size: 0.9rem;
}

.wa-header span {
  font-size: 0.75rem;
  opacity: 0.85;
}

.wa-body {
  padding: 1.2rem;
  background: #e5ddd5;
}

.wa-bubble {
  background: #fff;
  border-radius: 0.6rem;
  padding: 0.8rem;
  font-size: 0.85rem;
  color: #333;
  box-shadow: var(--shadow-sm);
}

.wa-body .btn {
  width: 100%;
  margin-top: 1rem;
  background: #25d366;
  color: #fff;
}

/* ----------------- Enrollment Popup ----------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(26, 34, 51, 0.6);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 780px;
  width: 100%;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  position: relative;
  max-height: 90vh;
}

.modal-overlay.open .modal {
  transform: scale(1);
}

.modal-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-body {
  padding: 2rem;
  overflow-y: auto;
}

.modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(34, 168, 106, 0.15);
  color: var(--grass);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
}

.modal-body h3 {
  font-size: 1.6rem;
  margin-top: 1rem;
  color: var(--foreground);
}

.modal-body p {
  margin-top: 0.7rem;
  color: var(--muted-foreground);
  font-size: 0.95rem;
}

.modal-list {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.modal-list li {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.9rem;
  color: var(--foreground);
}

.modal-list svg {
  width: 18px;
  height: 18px;
  color: var(--grass);
  flex-shrink: 0;
}

.modal-actions {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
  color: var(--foreground);
}

.modal-close svg {
  width: 20px;
  height: 20px;
}

/* ================================================================
   PÁGINA NOTICIAS COMPLETA
   ================================================================ */

/* Barra de filtros y búsqueda */
.news-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.news-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}

.news-search svg {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--muted-foreground);
  pointer-events: none;
}

.news-search input {
  width: 100%;
  padding: 0.6rem 0.9rem 0.6rem 2.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--card);
  color: var(--foreground);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.news-search input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(47, 102, 204, 0.12);
}

.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.news-filter-btn {
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted-foreground);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.news-filter-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.news-filter-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Grid de noticias — 3 columnas en desktop */
.news-grid-full {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}

@media (min-width: 640px) {
  .news-grid-full {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .news-grid-full {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Noticia destacada (primera, ocupa 2 columnas) */
.news-card.featured {
  grid-column: 1 / -1;
  display: grid;
}

@media (min-width: 640px) {
  .news-card.featured {
    grid-template-columns: 1.4fr 1fr;
  }

  .news-card.featured .news-media {
    height: 100%;
    min-height: 240px;
  }

  .news-card.featured .news-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
  }

  .news-card.featured .news-body h3 {
    font-size: 1.5rem;
  }
}

/* Paginación */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 3.5rem;
}

.page-btn {
  min-width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--card);
  color: var(--foreground);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.page-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.page-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.page-btn svg {
  width: 1rem;
  height: 1rem;
}

/* Estado vacío en búsqueda */
.news-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  color: var(--muted-foreground);
}

.news-empty svg {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  opacity: 0.4;
}

/* ================================================================
   PÁGINA GALERÍA — ÁLBUMES
   ================================================================ */

.album-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
}

@media (min-width: 480px) {
  .album-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .album-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.album-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.album-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(47, 102, 204, 0.3);
}

.album-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--secondary);
}

.album-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.album-card:hover .album-thumb img {
  transform: scale(1.07);
}

/* Badge con cantidad de fotos */
.album-count {
  position: absolute;
  bottom: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(10, 12, 20, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.album-count svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* Franja de preview (3 miniaturas pequeñas debajo de la portada) */
.album-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
}

.album-strip-item {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--secondary);
}

.album-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.album-card:hover .album-strip-item img {
  transform: scale(1.08);
}

.album-info {
  padding: 1.2rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.album-tag {
  font-size: 0.73rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--coral);
}

.album-title {
  font-family: var(--font-serif);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.3;
  margin: 0;
}

.album-meta {
  font-size: 0.82rem;
  color: var(--muted-foreground);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.album-meta svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
}

.album-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.6rem;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--primary);
  transition: gap 0.2s ease;
}

.album-card:hover .album-cta {
  gap: 0.6rem;
}

.album-cta svg {
  width: 0.9rem;
  height: 0.9rem;
}

/* ================================================================
   PÁGINA ÁLBUM INDIVIDUAL
   ================================================================ */

/* Grid de 10 fotos: 5 arriba + 5 abajo */
.album-photos-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .album-photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .album-photos-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

.album-photo-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 0.85rem;
  cursor: zoom-in;
  background: var(--secondary);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.album-photo-item:hover {
  transform: scale(1.03);
  box-shadow: var(--shadow);
}

.album-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.album-photo-item:hover img {
  transform: scale(1.08);
}

/* Overlay de zoom al pasar el mouse */
.album-photo-item::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(47, 102, 204, 0.0);
  transition: background 0.25s ease;
  border-radius: inherit;
}

.album-photo-item:hover::after {
  background: rgba(47, 102, 204, 0.15);
}

/* Ícono de lupa */
.album-photo-item .zoom-icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 2;
}

.album-photo-item:hover .zoom-icon {
  opacity: 1;
}

.album-photo-item .zoom-icon svg {
  width: 2rem;
  height: 2rem;
  color: #fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

/* Breadcrumb dentro del álbum */
.album-back-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

/* ================================================================
   PÁGINA MISIÓN Y VISIÓN
   ================================================================ */

/* Tarjetas principales de misión y visión */
.mv-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 840px) {
  .mv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Acento de color superior */
.mv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.mv-card.mision::before { background: var(--primary); }
.mv-card.vision::before  { background: var(--gold); }

/* Ícono decorativo */
.mv-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  flex-shrink: 0;
}

.mision .mv-icon  { background: rgba(47, 102, 204, 0.1); color: var(--primary); }
.vision  .mv-icon { background: rgba(232, 178, 62, 0.15); color: #b88a1e; }

.mv-icon svg {
  width: 1.75rem;
  height: 1.75rem;
}

.mv-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.mision .mv-label { color: var(--primary); }
.vision  .mv-label { color: #b88a1e; }

.mv-card h2 {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--foreground);
  line-height: 1.2;
}

.mv-card p {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--foreground);
  flex: 1;
}

/* Frase destacada dentro de la tarjeta */
.mv-quote {
  padding: 1rem 1.25rem;
  border-left: 4px solid;
  border-radius: 0 0.75rem 0.75rem 0;
  font-style: italic;
  font-size: 0.97rem;
  line-height: 1.7;
  margin-top: 0.5rem;
}

.mision .mv-quote {
  border-color: var(--primary);
  background: rgba(47, 102, 204, 0.06);
  color: var(--primary-dark);
}

.vision .mv-quote {
  border-color: var(--gold);
  background: rgba(232, 178, 62, 0.08);
  color: #7a5a10;
}

/* Fila de pilares / compromisos */
.mv-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}

@media (min-width: 640px) {
  .mv-pillars {
    grid-template-columns: repeat(4, 1fr);
  }
}

.mv-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  padding: 1.5rem 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mv-pillar:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.mv-pillar .icon-badge {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.mv-pillar h4 {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--foreground);
  margin: 0;
}

.mv-pillar p {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin: 0;
}

/* Sección de objetivos — lista con íconos */
.mv-objectives {
  display: grid;
  gap: 1rem;
}

@media (min-width: 640px) {
  .mv-objectives {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mv-obj-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.mv-obj-item .obj-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.65rem;
  background: rgba(47, 102, 204, 0.1);
  color: var(--primary);
}

.mv-obj-item .obj-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.mv-obj-item h4 {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--foreground);
  margin-bottom: 0.2rem;
}

.mv-obj-item p {
  font-size: 0.85rem;
  color: var(--muted-foreground);
  line-height: 1.55;
  margin: 0;
}

/* Banner de frase institucional */
.mv-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mv-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.mv-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    rgba(47, 102, 204, 0.88) 0%,
    rgba(36, 79, 158, 0.82) 100%);
}

.mv-banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 3rem 2rem;
  max-width: 52rem;
  color: #fff;
}

.mv-banner-content blockquote {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.5vw, 2rem);
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: 1.25rem;
}

.mv-banner-content blockquote::before {
  content: '\201C';
  opacity: 0.5;
}
.mv-banner-content blockquote::after {
  content: '\201D';
  opacity: 0.5;
}

.mv-banner-content cite {
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  opacity: 0.85;
  text-transform: uppercase;
}

/* ----------------- Información Académica ----------------- */
.info-quicknav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.info-quicknav a {
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--foreground);
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.info-quicknav a:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.info-quicknav a.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

.schedule-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.schedule-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow);
}

.schedule-card h3 {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  color: var(--primary);
}

.schedule-card > p {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

.schedule-rows {
  margin: 1.2rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.schedule-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}

.schedule-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.schedule-row dt {
  color: var(--muted-foreground);
}

.schedule-row dd {
  font-weight: 600;
  color: var(--foreground);
  text-align: right;
}

.check-list {
  margin-top: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.check-list li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.95rem;
  color: var(--foreground);
  line-height: 1.55;
}

.check-list svg {
  width: 18px;
  height: 18px;
  color: var(--grass);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.info-note {
  margin-top: 2.5rem;
  background: var(--secondary);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.info-note p {
  max-width: 34rem;
  color: var(--foreground);
  font-size: 0.95rem;
  line-height: 1.6;
}

.info-note .btn {
  flex-shrink: 0;
}

.value-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 2.5rem;
}

@media (min-width: 1024px) {
  .schedule-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .value-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Cuadrícula del hub "Información Académica": tarjetas hacia cada
   página independiente (horarios, atención, uniformes, reglamento, costos) */
.info-hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  .info-hub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .info-hub-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.info-hub-grid .quick-card {
  height: 100%;
}

/* Fotografía de referencia (uniformes, etc.) dentro de una sección de
   texto + imagen, reutilizando el patrón .why-grid / .why-media */
.info-media-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.info-media-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Visor de PDF embebido para el manual de convivencia */
.pdf-viewer-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.pdf-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--secondary);
  border-bottom: 1px solid var(--border);
}

.pdf-viewer-toolbar span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--foreground);
}

.pdf-viewer-toolbar span svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--primary);
  flex-shrink: 0;
}

.pdf-viewer-toolbar a {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.pdf-viewer-toolbar a svg {
  width: 1rem;
  height: 1rem;
}

.pdf-viewer-frame {
  width: 100%;
  height: 80vh;
  min-height: 460px;
  max-height: 900px;
  border: 0;
  display: block;
  background: var(--muted);
}

@media (max-width: 640px) {
  .pdf-viewer-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .pdf-viewer-frame {
    height: 62vh;
    min-height: 360px;
  }
}

/* ----------------- Reveal Animation ----------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ----------------- Responsive ----------------- */
@media (max-width: 992px) {
  .quick-grid,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .platform-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .offer-grid,
  .news-grid,
  .video-grid {
    grid-template-columns: 1fr 1fr;
  }
  .why-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
  .modal {
    grid-template-columns: 1fr;
  }
  .modal-media {
    display: none;
  }
}

@media (max-width: 1180px) {
  .nav-links,
  .nav-cta {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
}

@media (max-width: 640px) {
  .quick {
    margin-top: -2rem;
  }
  .quick-grid,
  .stats-grid,
  .offer-grid,
  .news-grid,
  .video-grid,
  .platform-grid,
  .why-values,
  .footer-grid {
    grid-template-columns: 1fr;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
  .gallery-item.big {
    grid-column: span 2;
    grid-row: span 1;
  }
  .section {
    padding: 3.5rem 0;
  }
  .cta {
    padding: 2rem 1.2rem;
  }
  .why-badge {
    right: 1rem;
  }
}

/* ============================================================
   PROCESO DE ADMISIÓN - LÍNEA DE TIEMPO CON PASOS DESPLEGABLES
   ============================================================ */
.steps-timeline {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.step-item {
  position: relative;
  display: flex;
  gap: 1.1rem;
}

.step-rail {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 3.25rem;
}

.step-marker {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
  border: 2px solid var(--border);
  background: var(--card);
  color: var(--primary);
  transition: all 0.25s ease;
  z-index: 1;
}

.step-marker.marker-coral { color: var(--coral); }
.step-marker.marker-grass { color: var(--grass); }
.step-marker.marker-sky { color: var(--sky); }
.step-marker.marker-gold { color: #9a7413; }
.step-marker.marker-primary { color: var(--primary); }

.step-item.open .step-marker {
  color: #fff;
}
.step-item.open .step-marker.marker-coral { background: var(--coral); border-color: var(--coral); }
.step-item.open .step-marker.marker-grass { background: var(--grass); border-color: var(--grass); }
.step-item.open .step-marker.marker-sky { background: var(--sky); border-color: var(--sky); }
.step-item.open .step-marker.marker-gold { background: var(--gold); border-color: var(--gold); color: var(--gold-foreground); }
.step-item.open .step-marker.marker-primary { background: var(--primary); border-color: var(--primary); }

.step-line {
  flex: 1;
  width: 2px;
  min-height: 0.75rem;
  background: var(--border);
  margin: 0.35rem 0;
}

.step-item:last-child .step-line {
  display: none;
}

.step-card {
  flex: 1;
  min-width: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
  margin-bottom: 0.3rem;
}

.step-item.open .step-card {
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.step-header {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.step-header-text {
  flex: 1;
  min-width: 0;
}

.step-eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.2rem;
}

.step-header-text h3 {
  font-size: 1.1rem;
  color: var(--foreground);
  margin: 0;
}

.step-teaser {
  margin-top: 0.3rem;
  font-size: 0.92rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.step-chevron {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  transition: transform 0.3s ease, background 0.25s ease;
  margin-top: 0.15rem;
}

.step-chevron svg {
  width: 1rem;
  height: 1rem;
}

.step-item.open .step-chevron {
  transform: rotate(180deg);
  background: var(--primary);
  color: #fff;
}

.step-body-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.step-item.open .step-body-wrap {
  grid-template-rows: 1fr;
}

.step-body {
  min-height: 0;
  overflow: hidden;
}

.step-detail {
  padding: 0 1.3rem 1.3rem 1.3rem;
  border-top: 1px solid var(--border);
  margin-top: 0.1rem;
  padding-top: 1rem;
}

.step-detail p {
  color: var(--muted-foreground);
  line-height: 1.6;
  font-size: 0.95rem;
}

.step-detail-list {
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.step-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--foreground);
}

.step-detail-list svg {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--grass);
}

.step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.step-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--secondary);
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 600;
}

.step-tag svg {
  width: 0.9rem;
  height: 0.9rem;
}

@media (max-width: 640px) {
  .step-rail {
    width: 2.6rem;
  }
  .step-marker {
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1rem;
  }
  .step-header {
    padding: 0.95rem 1rem;
  }
  .step-detail {
    padding: 1rem 1rem 1.1rem 1rem;
  }
}

/* ============================================================
   PÁGINA DE CONTACTO
   ============================================================ */
.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Columna de información */
.contact-info-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.contact-info-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--primary);
}

.contact-info-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-info-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.contact-info-icon.ic-primary { background: var(--secondary); color: var(--primary); }
.contact-info-icon.ic-grass { background: rgba(74, 157, 92, 0.14); color: var(--grass); }
.contact-info-icon.ic-gold { background: rgba(214, 168, 44, 0.16); color: #9a7413; }
.contact-info-icon.ic-coral { background: rgba(224, 122, 95, 0.14); color: var(--coral); }

.contact-info-text {
  min-width: 0;
}

.contact-info-text h3 {
  font-size: 1.02rem;
  margin-bottom: 0.2rem;
  color: var(--foreground);
}

.contact-info-text p,
.contact-info-text a {
  font-size: 0.94rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  word-break: break-word;
}

.contact-info-text a:hover {
  color: var(--primary);
}

/* Mapa */
.contact-map {
  margin-top: 1.4rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 20rem;
  border: 0;
}

.contact-map-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: var(--card);
}

.contact-map-foot span {
  font-size: 0.9rem;
  color: var(--muted-foreground);
}

/* Formulario */
.contact-form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.9rem;
}

.contact-form-card h2 {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
}

.contact-form-card .form-intro {
  font-size: 0.94rem;
  color: var(--muted-foreground);
  margin-bottom: 1.5rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.05rem;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.05rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--foreground);
}

.form-field label .req {
  color: var(--coral);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field textarea {
  resize: vertical;
  min-height: 6.5rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--secondary);
}

.form-field input.invalid,
.form-field textarea.invalid,
.form-field select.invalid {
  border-color: var(--coral);
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  line-height: 1.5;
}

.form-consent input {
  margin-top: 0.15rem;
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  accent-color: var(--primary);
}

.contact-form .btn {
  align-self: flex-start;
}

.form-recaptcha-note {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin-top: -0.2rem;
}

.form-recaptcha-note a {
  color: var(--primary);
  text-decoration: underline;
}

.form-recaptcha-note a:hover {
  opacity: 0.85;
}

.contact-form .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mensaje de estado del formulario */
.form-status {
  display: none;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.9rem 1.05rem;
  border-radius: var(--radius);
  font-size: 0.92rem;
  line-height: 1.5;
}

.form-status svg {
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.form-status.show {
  display: flex;
}

.form-status.success {
  background: rgba(74, 157, 92, 0.12);
  color: #2f6b3d;
}

.form-status.error {
  background: rgba(224, 122, 95, 0.12);
  color: #a63a22;
}

@media (max-width: 860px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
  }
  .contact-form-card {
    padding: 1.35rem;
  }
}

/* ============================================================
   PÁGINA SÍMBOLOS (bandera y escudo)
   ============================================================ */
.symbols-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.symbol-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.symbol-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: linear-gradient(160deg, var(--secondary), var(--muted));
  min-height: 20rem;
}

.symbol-media img {
  max-width: 100%;
  max-height: 16rem;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.12));
}

/* Bandera construida con CSS (colores institucionales) */
.flag-visual {
  width: 20rem;
  max-width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.flag-band {
  flex: 1;
}

.flag-band.blue { background: var(--primary); }
.flag-band.white { background: #ffffff; }
.flag-band.gold { background: var(--gold); }

.flag-emblem {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flag-emblem img {
  width: 6.5rem;
  height: auto;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}

.symbol-body {
  padding: 1.75rem;
}

.symbol-body .symbol-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--secondary);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.symbol-body h2 {
  font-size: 1.5rem;
  margin-bottom: 0.6rem;
}

.symbol-body p {
  color: var(--muted-foreground);
  line-height: 1.65;
  font-size: 0.96rem;
}

.symbol-body p + p {
  margin-top: 0.85rem;
}

/* ============================================================
   PÁGINA HIMNO
   ============================================================ */
.himno-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.himno-stanzas {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.himno-chorus {
  background: var(--secondary);
  border-left: 4px solid var(--primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.25rem 1.5rem;
}

.himno-stanza {
  padding: 0.25rem 0.25rem 0.25rem 1.5rem;
  border-left: 4px solid var(--border);
}

.himno-stanza .stanza-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.himno-chorus .stanza-label {
  color: var(--primary);
}

.himno-stanza p,
.himno-chorus p {
  font-family: "Playfair Display", serif;
  font-size: 1.12rem;
  line-height: 1.9;
  color: var(--foreground);
}

.himno-chorus p {
  font-style: italic;
}

.himno-aside {
  position: sticky;
  top: 6rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.himno-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
}

.himno-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.himno-card h3 svg {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--primary);
}

.himno-card p {
  font-size: 0.92rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.himno-meta {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-top: 0.25rem;
}

.himno-meta-item {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--border);
}

.himno-meta-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.himno-meta-item .k {
  color: var(--muted-foreground);
}

.himno-meta-item .v {
  font-weight: 600;
  color: var(--foreground);
  text-align: right;
}

/* ============================================================
   PÁGINA MASCOTA
   ============================================================ */
.mascot-banner {
  position: relative;
  width: 100%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, var(--primary), #1f4a99);
}

.mascot-banner img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Marcador de posición del banner (mientras no exista la imagen real) */
.mascot-placeholder {
  aspect-ratio: 21 / 9;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 2rem;
  color: #fff;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.12), transparent 55%),
    linear-gradient(135deg, var(--primary), #1f4a99);
}

.mascot-placeholder svg {
  width: 3.5rem;
  height: 3.5rem;
  opacity: 0.9;
}

.mascot-placeholder strong {
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
}

.mascot-placeholder span {
  font-size: 0.9rem;
  max-width: 30rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
}

.mascot-desc {
  max-width: 46rem;
  margin: 2.5rem auto 0;
  text-align: center;
}

.mascot-desc p {
  color: var(--muted-foreground);
  line-height: 1.7;
  font-size: 1rem;
}

.mascot-desc p + p {
  margin-top: 1rem;
}

.mascot-traits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.mascot-trait {
  text-align: center;
  padding: 1.5rem 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.mascot-trait .icon-badge {
  margin: 0 auto 0.85rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mascot-trait h4 {
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}

.mascot-trait p {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  line-height: 1.55;
}

/* ESTILOS MODAL YOUTUBE */

  .video-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: rgba(0, 0, 0, 0.88) !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;
    box-sizing: border-box !important;
}

.video-modal.active {
    display: flex !important;
}

.video-modal-content {
    position: relative !important;
    width: min(1000px, 90vw) !important;
    max-width: 1000px !important;
    margin: auto !important;
    box-sizing: border-box !important;
}

.video-container {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;

    background: #000 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.video-container iframe {
    display: block !important;
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}

.video-modal-close {
    position: absolute !important;

    top: -50px !important;
    right: 0 !important;

    width: 42px !important;
    height: 42px !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 50% !important;

    background: #fff !important;
    color: #222 !important;

    font-size: 30px !important;
    line-height: 42px !important;
    text-align: center !important;

    cursor: pointer !important;
    z-index: 10 !important;
}

.video-card {
    cursor: pointer !important;
}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 768px) {

    .video-modal {
        padding: 15px !important;
    }

    .video-modal-content {
        width: 100% !important;
        max-width: none !important;
    }

    .video-modal-close {
        top: -50px !important;
        right: 0 !important;
    }

}

/* ============================================================
   PÁGINA HORIZONTE INSTITUCIONAL
   ============================================================ */
.horizon-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.horizon-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.9rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.horizon-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--primary);
}

.horizon-card .icon-badge {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.horizon-card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.6rem;
}

.horizon-card p {
  color: var(--muted-foreground);
  line-height: 1.65;
  font-size: 0.95rem;
}

.horizon-card ul {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.horizon-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.92rem;
  color: var(--foreground);
  line-height: 1.5;
}

.horizon-card ul li svg {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--grass);
}

/* Mapa de procesos */
.process-map {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.process-row {
  display: grid;
  gap: 1.25rem;
}

.process-row.cols-1 { grid-template-columns: 1fr; }
.process-row.cols-3 { grid-template-columns: repeat(3, 1fr); }

.process-band-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: -0.5rem;
}

.process-band-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.process-box {
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.4rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.process-box.strategic {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.process-box.support {
  background: var(--secondary);
  border-color: transparent;
}

.process-box h4 {
  font-size: 1rem;
  margin-bottom: 0.35rem;
  color: inherit;
}

.process-box p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.85;
}

.process-box.strategic p {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

/* Flechas del ciclo misional */
.process-core {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
  align-items: stretch;
  gap: 0.75rem;
}

.process-core .process-box {
  border-top: 3px solid var(--gold);
}

.process-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
}

.process-chevron svg {
  width: 1.6rem;
  height: 1.6rem;
}

.process-endpoint {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0.75rem;
  min-width: 5.5rem;
}

.process-endpoint .ep-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-endpoint .ep-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.process-endpoint span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted-foreground);
  line-height: 1.3;
}

@media (max-width: 900px) {
  .symbols-grid,
  .horizon-cards {
    grid-template-columns: 1fr;
  }
  .himno-layout {
    grid-template-columns: 1fr;
  }
  .himno-aside {
    position: static;
  }
  .process-core {
    grid-template-columns: 1fr;
  }
  .process-chevron {
    transform: rotate(90deg);
  }
  .process-endpoint {
    flex-direction: row;
  }
}

@media (max-width: 640px) {
  .process-row.cols-3 {
    grid-template-columns: 1fr;
  }
  .mascot-traits {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PÁGINA INSTALACIONES / INFRAESTRUCTURA
   ============================================================ */

/* Tarjetas de espacios destacados */
.spaces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
}

.space-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.space-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-3px);
  border-color: var(--primary);
}

.space-card .icon-badge {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-card .icon-badge svg {
  width: 1.4rem;
  height: 1.4rem;
}

.space-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.space-card p {
  font-size: 0.9rem;
  color: var(--muted-foreground);
  line-height: 1.55;
}

/* Mosaico de fotos tipo revista — masonry con columnas CSS (sin huecos).
   Usa .album-photos-grid para engancharse al visor lightbox. */
.mosaic-gallery.album-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.mosaic-gallery .album-photo-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.mosaic-gallery .album-photo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.mosaic-gallery .album-photo-item:hover img {
  transform: scale(1.05);
}

/* Rótulo sobre cada foto */
.mosaic-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.75rem 1rem 0.9rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.mosaic-gallery .album-photo-item:hover .mosaic-caption {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 700px) {
  .mosaic-gallery.album-photos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .mosaic-caption {
    opacity: 1;
    transform: none;
    font-size: 0.78rem;
    padding: 1.25rem 0.7rem 0.6rem;
  }
}

/* ============================================================
   HORARIOS CON VISOR PDF EMBEBIDO POR SECCIÓN
   ============================================================ */

/* Cuando las tarjetas incluyen visor PDF, apilamos a una columna y
   distribuimos: info a la izquierda, visor grande a la derecha. */
.schedule-grid.has-pdf {
  grid-template-columns: 1fr;
  gap: 2rem;
}

.schedule-grid.has-pdf .schedule-card {
  display: grid;
  grid-template-columns: 20rem 1fr;
  grid-auto-rows: min-content;
  gap: 0.5rem 1.75rem;
  align-items: start;
}

/* La columna de datos (icono, título, filas) ocupa la 1ª columna en orden */
.schedule-grid.has-pdf .schedule-card > .icon-badge,
.schedule-grid.has-pdf .schedule-card > h3,
.schedule-grid.has-pdf .schedule-card > p,
.schedule-grid.has-pdf .schedule-card > .schedule-rows {
  grid-column: 1;
}

.schedule-grid.has-pdf .schedule-card > h3 {
  margin-top: 0.75rem;
}

.schedule-grid.has-pdf .schedule-card > .schedule-rows {
  margin-top: 0.5rem;
}

/* El visor ocupa la 2ª columna y abarca toda la altura de la tarjeta */
.schedule-pdf {
  grid-column: 2;
  grid-row: 1 / 100;
  align-self: stretch;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  display: flex;
  flex-direction: column;
}

.schedule-pdf .pdf-viewer-toolbar {
  padding: 0.75rem 1rem;
}

.schedule-pdf .pdf-viewer-frame {
  height: 30rem;
  min-height: 0;
  max-height: none;
  flex: 1;
}

/* Tablet y móvil: la tarjeta vuelve a una sola columna vertical */
@media (max-width: 860px) {
  .schedule-grid.has-pdf .schedule-card {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .schedule-pdf {
    grid-column: 1;
    grid-row: auto;
  }
  .schedule-pdf .pdf-viewer-frame {
    height: 24rem;
  }
}

@media (max-width: 560px) {
  .schedule-pdf .pdf-viewer-frame {
    height: 20rem;
  }
}

/* ============================================================
   GALERÍA DE UNIFORMES — tarjetas verticales 4:5 tipo galería
   (usa .album-photos-grid para engancharse al visor lightbox)
   ============================================================ */
.uniform-gallery.album-photos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.25rem;
}

.uniform-gallery .album-photo-item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--secondary);
  cursor: zoom-in;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.uniform-gallery .album-photo-item:hover {
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.uniform-gallery .album-photo-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.uniform-gallery .album-photo-item:hover img {
  transform: scale(1.06);
}

/* R��tulo inferior con el nombre de la prenda/conjunto */
.uniform-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 1.75rem 0.9rem 0.85rem;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), transparent);
  pointer-events: none;
}

/* Icono de zoom que aparece al pasar el mouse */
.uniform-gallery .zoom-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 1;
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.uniform-gallery .zoom-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.uniform-gallery .album-photo-item:hover .zoom-icon {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 1024px) {
  .uniform-gallery.album-photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .uniform-gallery.album-photos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .uniform-caption {
    font-size: 0.78rem;
    padding: 1.25rem 0.7rem 0.6rem;
  }
}

/* ============================================================
   ESCUELA DE FORMACIÓN — tarjetas de grupos formativos
   (imagen de referencia + icono + descripción + disciplinas)
   ============================================================ */
.formation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
}

.formation-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.formation-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Imagen de referencia */
.formation-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.formation-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.formation-card:hover .formation-media img {
  transform: scale(1.06);
}

/* Insignia con icono sobre la imagen */
.formation-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.formation-badge svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Cuerpo de texto */
.formation-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  flex: 1;
}

.formation-body h3 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--primary);
}

.formation-body p {
  color: var(--muted-foreground);
  line-height: 1.6;
  font-size: 0.95rem;
}

/* Etiquetas de disciplinas (p. ej. Fútbol, Voleibol, Baloncesto) */
.formation-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.35rem;
}

.formation-tags span {
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: var(--secondary);
  color: var(--secondary-foreground);
  border: 1px solid var(--border);
}

@media (max-width: 760px) {
  .formation-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* ============================================================
   ESTUDIANTES DESTACADOS — foto del mejor estudiante + PDF
   ============================================================ */
.honor-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.honor-card {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 1.75rem;
  align-items: stretch;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Columna de la foto del estudiante destacado */
.honor-student {
  display: flex;
  flex-direction: column;
}

.honor-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--secondary);
}

.honor-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marcador de posición cuando aún no se ha subido la foto */
.honor-photo.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--muted-foreground);
  border: 2px dashed var(--border);
  background:
    radial-gradient(circle at 50% 35%, rgba(47, 102, 204, 0.08), transparent 60%),
    var(--secondary);
}

.honor-photo.is-placeholder svg {
  width: 3rem;
  height: 3rem;
  opacity: 0.6;
}

.honor-photo.is-placeholder span {
  font-size: 0.82rem;
  line-height: 1.4;
  max-width: 14rem;
}

/* Distintivo de nivel + nombre bajo la foto */
.honor-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  margin-top: 1rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--primary);
  color: var(--primary-foreground);
}

.honor-name {
  margin-top: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--foreground);
}

.honor-caption {
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

/* Columna del visor PDF */
.honor-pdf {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

.honor-pdf .pdf-viewer-toolbar {
  padding: 0.75rem 1rem;
}

.honor-pdf .pdf-viewer-frame {
  flex: 1;
  height: 100%;
  min-height: 26rem;
  max-height: none;
}

@media (max-width: 820px) {
  .honor-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .honor-photo {
    max-width: 18rem;
    margin: 0 auto;
  }
  .honor-student {
    align-items: center;
    text-align: center;
  }
  .honor-level-badge {
    align-self: center;
  }
  .honor-pdf .pdf-viewer-frame {
    min-height: 22rem;
  }
}

@media (max-width: 560px) {
  .honor-card {
    padding: 1rem;
  }
  .honor-pdf .pdf-viewer-frame {
    min-height: 18rem;
  }
}

/* ============================================================
   ASOCIACIÓN DE PADRES DE FAMILIA
   Foto horizontal del consejo + grid de cargos
   ============================================================ */
.board-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.board-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marcador de posición cuando aún no se sube la foto grupal */
.board-photo.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  text-align: center;
  padding: 2rem;
  color: var(--muted-foreground);
  border: 2px dashed var(--border);
  background:
    radial-gradient(circle at 50% 35%, rgba(47, 102, 204, 0.08), transparent 60%),
    var(--secondary);
}

.board-photo.is-placeholder svg {
  width: 3.5rem;
  height: 3.5rem;
  opacity: 0.55;
}

.board-photo.is-placeholder span {
  font-size: 0.9rem;
  max-width: 26rem;
  line-height: 1.5;
}

.board-photo-caption {
  margin-top: 0.85rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

/* Grid de cargos */
.board-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.board-member {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--primary);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.board-member:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

/* Cargos jerárquicos destacados */
.board-member.is-lead {
  border-top-color: var(--gold, #c8a24a);
}

.board-role {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
}

.board-member.is-lead .board-role {
  color: var(--gold, #c8a24a);
}

.board-person {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--foreground);
  line-height: 1.3;
}

.board-note {
  font-size: 0.82rem;
  color: var(--muted-foreground);
  line-height: 1.45;
}

/* La tarjeta de representantes ocupa toda la fila para listar varios nombres */
.board-member.is-wide {
  grid-column: 1 / -1;
  border-top-color: var(--primary);
}

.board-reps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 0.35rem;
}

.board-reps span {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--foreground);
}

@media (max-width: 900px) {
  .board-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .board-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
  .board-photo {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 420px) {
  .board-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PÁGINA COMUNICADOS / CIRCULARES
   Jerarquía visual: 1 destacado + 3 resaltados + archivo.
   Todas las tarjetas usan .album-photo-item (visor lightbox).
   ============================================================ */

/* Encabezado de cada bloque */
.comunicados-block-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 3rem 0 1.5rem;
}

.comunicados-block-head:first-of-type {
  margin-top: 0;
}

.comunicados-block-head h2 {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--primary);
}

.comunicados-block-head .line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Tarjeta base de comunicado (la imagen clicable) */
.comunicado-cover.album-photo-item {
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  cursor: zoom-in;
}

.comunicado-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Marcador de posición cuando aún no se sube la imagen del comunicado */
.comunicado-cover.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.25rem;
  color: var(--muted-foreground);
  border: 2px dashed var(--border);
  background:
    radial-gradient(circle at 50% 35%, rgba(47, 102, 204, 0.08), transparent 60%),
    var(--secondary);
}

.comunicado-cover.is-placeholder svg {
  width: 2.5rem;
  height: 2.5rem;
  opacity: 0.55;
}

.comunicado-cover.is-placeholder span {
  font-size: 0.8rem;
  line-height: 1.4;
  max-width: 12rem;
}

/* Rótulo inferior (título + fecha) sobre la imagen */
.comunicado-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 2rem 0.9rem 0.85rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82), transparent);
  pointer-events: none;
}

.comunicado-caption .c-title {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.3;
}

.comunicado-caption .c-date {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  opacity: 0.85;
}

/* Insignia superior (Nuevo / fecha) */
.comunicado-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--gold, #c8a24a);
  color: #1a1205;
}

/* Icono de zoom (aparece al pasar el mouse) */
.comunicado-cover .zoom-icon {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.comunicado-cover .zoom-icon svg {
  width: 1.05rem;
  height: 1.05rem;
}

.comunicado-cover:hover .zoom-icon {
  opacity: 1;
  transform: scale(1);
}

/* ---------- 1) COMUNICADO DESTACADO (el más reciente) ---------- */
.comunicado-featured.album-photos-grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) 1fr;
  gap: 2rem;
  align-items: center;
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(47, 102, 204, 0.06), transparent 55%),
    var(--card);
  box-shadow: var(--shadow-lg);
}

.comunicado-featured .comunicado-cover.album-photo-item {
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow);
}

.comunicado-featured-info {
  display: flex;
  flex-direction: column;
}

.comunicado-featured-info .eyebrow {
  color: var(--gold, #c8a24a);
}

.comunicado-featured-info h3 {
  font-family: var(--font-serif);
  font-size: 1.8rem;
  line-height: 1.2;
  margin: 0.5rem 0 0.4rem;
  color: var(--foreground);
}

.comunicado-featured-info .c-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.9rem;
}

.comunicado-featured-info .c-meta svg {
  width: 1rem;
  height: 1rem;
}

.comunicado-featured-info p {
  color: var(--muted-foreground);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.comunicado-featured-info .btn {
  align-self: flex-start;
}

/* ---------- 2) COMUNICADOS RESALTADOS (los 3 siguientes) ---------- */
.comunicado-highlights.album-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.comunicado-highlights .comunicado-cover.album-photo-item {
  box-shadow: var(--shadow);
}

/* ---------- 3) ARCHIVO / CONSULTA (los demás) ---------- */
.comunicado-archive.album-photos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.comunicado-archive .comunicado-cover.album-photo-item {
  box-shadow: var(--shadow-sm);
}

.comunicado-archive .comunicado-caption {
  padding: 1.5rem 0.7rem 0.6rem;
}

.comunicado-archive .comunicado-caption .c-title {
  font-size: 0.8rem;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 900px) {
  .comunicado-highlights.album-photos-grid {
    gap: 1rem;
  }
  .comunicado-archive.album-photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .comunicado-featured.album-photos-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.25rem;
  }
  .comunicado-featured .comunicado-cover.album-photo-item {
    max-width: 18rem;
    margin: 0 auto;
    width: 100%;
  }
  .comunicado-featured-info {
    text-align: center;
  }
  .comunicado-featured-info .c-meta,
  .comunicado-featured-info .btn {
    align-self: center;
  }
}

@media (max-width: 560px) {
  .comunicado-highlights.album-photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .comunicado-archive.album-photos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .comunicados-block-head h2 {
    font-size: 1.25rem;
  }
}

/* ============================================================
   DOCUMENTOS INSTITUCIONALES — acordeón con visor PDF embebido
   ============================================================ */
.docs-accordion {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 60rem;
  margin: 0 auto;
}

.doc-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.doc-item.is-open {
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

/* Cabecera clicable */
.doc-trigger {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 1.25rem;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--foreground);
  transition: background 0.2s ease;
}

.doc-trigger:hover {
  background: var(--secondary);
}

/* Icono del documento */
.doc-icon {
  flex-shrink: 0;
  width: 2.85rem;
  height: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.doc-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* Texto: nombre + descripción corta */
.doc-info {
  flex: 1;
  min-width: 0;
}

.doc-info .doc-name {
  display: block;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.3;
}

.doc-info .doc-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--muted-foreground);
}

/* Chevron indicador */
.doc-chevron {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  color: var(--muted-foreground);
  transition: transform 0.3s ease;
}

.doc-item.is-open .doc-chevron {
  transform: rotate(180deg);
  color: var(--primary);
}

/* Panel desplegable con el visor */
.doc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.doc-item.is-open .doc-panel {
  grid-template-rows: 1fr;
}

.doc-panel-inner {
  overflow: hidden;
}

.doc-viewer {
  border-top: 1px solid var(--border);
}

.doc-viewer .pdf-viewer-toolbar {
  padding: 0.75rem 1.25rem;
}

.doc-viewer .pdf-viewer-frame {
  width: 100%;
  height: 34rem;
  border: none;
  display: block;
  background: var(--secondary);
}

@media (max-width: 640px) {
  .doc-trigger {
    padding: 1rem;
    gap: 0.75rem;
  }
  .doc-icon {
    width: 2.4rem;
    height: 2.4rem;
  }
  .doc-info .doc-name {
    font-size: 0.95rem;
  }
  .doc-viewer .pdf-viewer-frame {
    height: 24rem;
  }
}

/* ============================================================
   REVISTA INSTITUCIONAL
   Página de bienvenida (directora + proyecto + ediciones) y
   plantilla de edición (texto, imagen principal, galería,
   PDF y video).
   ============================================================ */

/* ---------- Mensaje de la directora ---------- */
.director-card {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(135deg, rgba(47, 102, 204, 0.06), transparent 55%),
    var(--card);
  box-shadow: var(--shadow);
}

.director-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--secondary);
  box-shadow: var(--shadow);
}

.director-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.director-photo.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  text-align: center;
  padding: 1.5rem;
  color: var(--muted-foreground);
  border: 2px dashed var(--border);
}

.director-photo.is-placeholder svg {
  width: 3rem;
  height: 3rem;
  opacity: 0.55;
}

.director-photo.is-placeholder span {
  font-size: 0.8rem;
  line-height: 1.4;
  max-width: 11rem;
}

.director-quote {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  line-height: 1.45;
  color: var(--foreground);
  margin-bottom: 1rem;
  position: relative;
}

.director-body p {
  color: var(--muted-foreground);
  line-height: 1.7;
  margin-bottom: 0.85rem;
}

.director-signature {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.director-signature .name {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--primary);
}

.director-signature .role {
  display: block;
  font-size: 0.85rem;
  color: var(--muted-foreground);
  margin-top: 0.15rem;
}

/* ---------- Bloque "sobre el proyecto" ---------- */
.magazine-about {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.magazine-about .about-card {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--primary);
}

.magazine-about .about-card .icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  margin-bottom: 1rem;
}

.magazine-about .about-card .icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.magazine-about .about-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--foreground);
  margin-bottom: 0.4rem;
}

.magazine-about .about-card p {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ---------- Cuadrícula de ediciones ---------- */
.editions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.edition-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.edition-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.edition-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--secondary);
}

.edition-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.edition-card:hover .edition-cover img {
  transform: scale(1.05);
}

.edition-cover .edition-tag {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: var(--primary);
  color: var(--primary-foreground);
}

.edition-cover .edition-tag.is-new {
  background: var(--gold, #c8a24a);
  color: #1a1205;
}

.edition-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.4rem;
  padding: 1.35rem;
}

.edition-info .edition-date {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
}

.edition-info h3 {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--foreground);
}

.edition-info p {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.55;
  flex: 1;
}

.edition-info .edition-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary);
}

.edition-info .edition-link svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.2s ease;
}

.edition-card:hover .edition-link svg {
  transform: translateX(3px);
}

/* ============================================================
   PLANTILLA DE EDICIÓN
   ============================================================ */
.edition-article {
  max-width: 60rem;
  margin: 0 auto;
}

/* Encabezado del artículo */
.edition-header {
  text-align: center;
  margin-bottom: 2rem;
}

.edition-header .edition-meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
  font-size: 0.88rem;
  color: var(--muted-foreground);
}

.edition-header .edition-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.edition-header .edition-meta svg {
  width: 1rem;
  height: 1rem;
  color: var(--primary);
}

/* Imagen principal */
.edition-hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  margin-bottom: 2.5rem;
  background: var(--secondary);
}

/* Cuerpo de texto del artículo */
.edition-prose p {
  color: var(--foreground);
  line-height: 1.8;
  margin-bottom: 1.25rem;
  font-size: 1.02rem;
}

.edition-prose h2 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--primary);
  margin: 2.25rem 0 1rem;
}

.edition-prose blockquote {
  margin: 1.75rem 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--primary);
  background: var(--secondary);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--foreground);
}

/* Título de sección dentro del artículo */
.edition-section-title {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin: 3rem 0 1.5rem;
}

.edition-section-title h2 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--primary);
}

.edition-section-title .line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Galería de imágenes secundarias (usa lightbox .album-photos-grid) */
.edition-gallery.album-photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.edition-gallery .album-photo-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}

.edition-gallery .album-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video embebido responsivo (YouTube/Vimeo) */
.edition-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #000;
}

.edition-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* PDFs adjuntos */
.edition-attachments {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.attachment-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.attachment-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
}

.attachment-link .att-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}

.attachment-link .att-icon svg {
  width: 1.4rem;
  height: 1.4rem;
}

.attachment-link .att-text {
  flex: 1;
  min-width: 0;
}

.attachment-link .att-text .att-name {
  display: block;
  font-weight: 600;
  font-size: 0.98rem;
}

.attachment-link .att-text .att-size {
  display: block;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin-top: 0.1rem;
}

.attachment-link .att-download {
  flex-shrink: 0;
  color: var(--muted-foreground);
}

.attachment-link .att-download svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* Navegación entre ediciones al pie del artículo */
.edition-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

/* ---------- RESPONSIVE REVISTA ---------- */
@media (max-width: 860px) {
  .director-card {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
  .director-photo {
    max-width: 15rem;
    margin: 0 auto;
    width: 100%;
  }
  .magazine-about,
  .editions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .magazine-about,
  .editions-grid,
  .edition-gallery.album-photos-grid {
    grid-template-columns: 1fr;
  }
  .director-quote {
    font-size: 1.2rem;
  }
  .edition-gallery.album-photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   SATMUN — Modelo de Naciones Unidas (bachillerato)
   ============================================================ */

/* Introducción: texto + tarjeta de datos */
.satmun-intro {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
}

.satmun-intro-text p {
  color: var(--muted-foreground);
  line-height: 1.8;
  margin-bottom: 1.1rem;
}

.satmun-intro-text .lead {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--foreground);
  margin-bottom: 1.25rem;
}

/* Cuadrícula de estadísticas */
.satmun-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.satmun-stat {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.satmun-stat .num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--primary);
}

.satmun-stat:nth-child(2) .num,
.satmun-stat:nth-child(3) .num {
  color: var(--gold, #c8a24a);
}

.satmun-stat .lbl {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--muted-foreground);
  letter-spacing: 0.02em;
}

/* Pilares / objetivos */
.satmun-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.satmun-pillar {
  padding: 1.75rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.satmun-pillar:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.satmun-pillar .icon {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  margin-bottom: 1rem;
}

.satmun-pillar .icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.satmun-pillar h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--foreground);
  margin-bottom: 0.4rem;
}

.satmun-pillar p {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Cómo funciona: pasos numerados */
.satmun-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  counter-reset: step;
}

.satmun-step {
  position: relative;
  padding: 1.5rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.satmun-step .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin-bottom: 0.85rem;
}

.satmun-step h4 {
  font-size: 1rem;
  color: var(--foreground);
  margin-bottom: 0.35rem;
}

.satmun-step p {
  color: var(--muted-foreground);
  font-size: 0.85rem;
  line-height: 1.55;
}

/* Comités */
.satmun-committees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

.committee-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.committee-card .c-abbr {
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary-foreground);
  background: var(--primary);
  border-radius: 0.6rem;
  padding: 0.5rem 0.7rem;
  min-width: 3.5rem;
  text-align: center;
}

.committee-card h4 {
  font-size: 1rem;
  color: var(--foreground);
  margin-bottom: 0.25rem;
}

.committee-card p {
  color: var(--muted-foreground);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* Cronograma / fases (línea vertical) */
.satmun-timeline {
  max-width: 46rem;
  margin: 0 auto;
  position: relative;
  padding-left: 2.5rem;
}

.satmun-timeline::before {
  content: "";
  position: absolute;
  left: 0.65rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--border);
}

.timeline-item {
  position: relative;
  padding-bottom: 2rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -2.5rem;
  top: 0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid var(--background);
  box-shadow: 0 0 0 1px var(--border);
}

.timeline-item .t-date {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold, #c8a24a);
}

.timeline-item h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: var(--foreground);
  margin: 0.2rem 0 0.3rem;
}

.timeline-item p {
  color: var(--muted-foreground);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Banda de convocatoria (CTA) */
.satmun-cta {
  border-radius: var(--radius-lg);
  padding: 3rem 2rem;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(47, 102, 204, 0.12), transparent 60%),
    var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.satmun-cta h2 {
  font-family: var(--font-serif);
  font-size: 1.9rem;
  color: var(--foreground);
  margin-bottom: 0.75rem;
}

.satmun-cta p {
  color: var(--muted-foreground);
  max-width: 34rem;
  margin: 0 auto 1.75rem;
  line-height: 1.7;
}

.satmun-cta .cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Galería SATMUN (lightbox) */
.satmun-gallery.album-photos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.satmun-gallery .album-photo-item {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}

.satmun-gallery .album-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- RESPONSIVE SATMUN ---------- */
@media (max-width: 900px) {
  .satmun-intro {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .satmun-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
  .satmun-steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .satmun-committees {
    grid-template-columns: repeat(2, 1fr);
  }
  .satmun-gallery.album-photos-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .satmun-pillars,
  .satmun-steps,
  .satmun-committees {
    grid-template-columns: 1fr;
  }
  .satmun-gallery.album-photos-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .satmun-intro-text .lead {
    font-size: 1.15rem;
  }
  .satmun-cta {
    padding: 2rem 1.25rem;
  }
  .satmun-cta h2 {
    font-size: 1.5rem;
  }
}

/* ============================================================
   TIPOGRAFÍA — Handlee (títulos) + Nunito (cuerpo)
   Ajustes de legibilidad para la fuente manuscrita.
   Handlee sólo tiene un grosor (400): forzamos font-weight normal
   para evitar la "negrita falsa" que la ensucia, y abrimos un poco
   el interlineado y el espaciado entre letras.
   ------------------------------------------------------------
   ¿Prefieres comparar con la alternativa (Baloo 2)?
   En :root cambia  --font-serif  de "Handlee" a "Baloo 2".
   Baloo 2 sí tiene varios grosores, así que si la usas puedes
   borrar el "font-weight: 400 !important" de este bloque.
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
blockquote {
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* Handwritten necesita un poco más de aire vertical */
h1,
h2,
h3 {
  line-height: 1.25;
}

/* Las manuscritas se perciben más pequeñas: leve realce en títulos grandes */
.page-hero h1,
.hero h1,
.section-title {
  letter-spacing: 0.015em;
}

/* Nunito para el cuerpo: peso base cómodo para lectura larga */
body {
  font-weight: 500;
}

/* Mantener el énfasis real en negritas del cuerpo (Nunito sí tiene pesos) */
strong,
b,
.btn {
  font-weight: 700;
}

/* ============================================================
   SECCIONES A COLOR — Quick Access, Stats y Platforms
   El cliente pidió menos minimalismo y más color, con mosaicos
   de fondo sólido (referencia con teal, rosa, celeste, naranja
   y verde), íconos y textos en blanco.
   Los colores se asignan por posición con :nth-child, así que
   NO hay que modificar el HTML: basta con reemplazar el CSS.
   ============================================================ */

/* Paleta de mosaicos (tonos vivos, legibles con texto blanco) */
:root {
  --tile-teal: #2f93a8;
  --tile-pink: #e0447f;
  --tile-sky: #35b0dd;
  --tile-orange: #ee8a2f;
  --tile-green: #6fb050;
}

/* --- Base común de los mosaicos coloreados --- */
.quick-grid .quick-card,
.stats-grid .stat-card,
.platform-grid .platform-card {
  color: #fff;
  border-color: transparent;
  position: relative;
  overflow: hidden;
  /* velo inferior sutil para reforzar el contraste del texto */
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.12), transparent 40%, rgba(0, 0, 0, 0.14));
}

/* Íconos: chip translúcido blanco con el símbolo en blanco */
.quick-grid .quick-card .icon-badge,
.stats-grid .stat-card .icon-badge,
.platform-grid .platform-card .icon-badge {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.quick-grid .quick-card .icon-badge svg,
.stats-grid .stat-card .icon-badge svg,
.platform-grid .platform-card .icon-badge svg {
  width: 1.9rem;
  height: 1.9rem;
}

/* Textos en blanco dentro de los mosaicos */
.quick-grid .quick-card h3,
.quick-grid .quick-card p,
.quick-grid .quick-card .link,
.stats-grid .stat-card .stat-num,
.stats-grid .stat-card .stat-label,
.platform-grid .platform-card span {
  color: #fff;
}

/* La descripción y etiquetas usan blanco un poco más suave + peso legible */
.quick-grid .quick-card p,
.stats-grid .stat-card .stat-label {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.quick-grid .quick-card .link svg {
  color: #fff;
}

/* Realce en hover: sombra de color y ligero brillo */
.quick-grid .quick-card:hover,
.stats-grid .stat-card:hover,
.platform-grid .platform-card:hover {
  box-shadow: 0 16px 34px rgba(26, 34, 51, 0.22);
  border-color: transparent;
  filter: saturate(1.05) brightness(1.03);
}

/* --- Asignación de colores por posición --- */

/* Quick Access (4 tarjetas): teal, rosa, celeste, naranja */
.quick-grid .quick-card:nth-child(4n + 1) { background-color: var(--tile-teal); }
.quick-grid .quick-card:nth-child(4n + 2) { background-color: var(--tile-pink); }
.quick-grid .quick-card:nth-child(4n + 3) { background-color: var(--tile-sky); }
.quick-grid .quick-card:nth-child(4n + 4) { background-color: var(--tile-orange); }

/* Stats (4 tarjetas): naranja, verde, rosa, celeste (variando el orden) */
.stats-grid .stat-card:nth-child(4n + 1) { background-color: var(--tile-orange); }
.stats-grid .stat-card:nth-child(4n + 2) { background-color: var(--tile-green); }
.stats-grid .stat-card:nth-child(4n + 3) { background-color: var(--tile-pink); }
.stats-grid .stat-card:nth-child(4n + 4) { background-color: var(--tile-sky); }

/* Platforms (6 tarjetas): teal, rosa, celeste, naranja, verde, teal (como la referencia) */
.platform-grid .platform-card:nth-child(6n + 1) { background-color: var(--tile-teal); }
.platform-grid .platform-card:nth-child(6n + 2) { background-color: var(--tile-pink); }
.platform-grid .platform-card:nth-child(6n + 3) { background-color: var(--tile-sky); }
.platform-grid .platform-card:nth-child(6n + 4) { background-color: var(--tile-orange); }
.platform-grid .platform-card:nth-child(6n + 5) { background-color: var(--tile-green); }
.platform-grid .platform-card:nth-child(6n + 6) { background-color: var(--tile-teal); }

/* Los mosaicos de plataformas un poco más altos y centrados como la referencia */
.platform-grid .platform-card {
  padding: 1.7rem 1rem;
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 8.5rem;
}

.platform-grid .platform-card span {
  font-weight: 700;
}

/* ============================================================
   ANIMACIONES DE HOVER — Quick Access y Platforms
   Movimiento sutil que da vida sin resultar exagerado:
   - leve elevación de la tarjeta
   - ícono que crece y rebota un poco
   - destello de luz que cruza el mosaico
   Se respeta prefers-reduced-motion para accesibilidad.
   ============================================================ */

/* Transiciones base (estado normal, para que el retorno sea suave) */
.quick-grid .quick-card,
.platform-grid .platform-card {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    filter 0.35s ease;
  will-change: transform;
}

.quick-grid .quick-card .icon-badge,
.platform-grid .platform-card .icon-badge,
.quick-grid .quick-card .icon-badge svg,
.platform-grid .platform-card .icon-badge svg {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Destello diagonal que cruza el mosaico al pasar el cursor */
.quick-grid .quick-card::after,
.platform-grid .platform-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.28),
    transparent
  );
  transform: skewX(-18deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* --- Estado hover --- */
.quick-grid .quick-card:hover,
.platform-grid .platform-card:hover {
  transform: translateY(-6px);
}

/* El ícono crece con un ligero rebote */
.quick-grid .quick-card:hover .icon-badge,
.platform-grid .platform-card:hover .icon-badge {
  transform: scale(1.12) translateY(-2px);
}

.quick-grid .quick-card:hover .icon-badge svg,
.platform-grid .platform-card:hover .icon-badge svg {
  transform: scale(1.06);
}

/* Dispara el destello cruzando la tarjeta */
.quick-grid .quick-card:hover::after,
.platform-grid .platform-card:hover::after {
  opacity: 1;
  animation: tile-shine 0.75s ease forwards;
}

@keyframes tile-shine {
  from {
    left: -75%;
  }
  to {
    left: 130%;
  }
}

/* En Quick Access la flecha del enlace se desplaza levemente */
.quick-grid .quick-card .link svg {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.quick-grid .quick-card:hover .link svg {
  transform: translateX(4px);
}

/* Accesibilidad: desactivar el movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .quick-grid .quick-card,
  .platform-grid .platform-card,
  .quick-grid .quick-card .icon-badge,
  .platform-grid .platform-card .icon-badge,
  .quick-grid .quick-card .link svg {
    transition: none;
  }
  .quick-grid .quick-card:hover,
  .platform-grid .platform-card:hover {
    transform: none;
  }
  .quick-grid .quick-card:hover .icon-badge,
  .platform-grid .platform-card:hover .icon-badge {
    transform: none;
  }
  .quick-grid .quick-card:hover::after,
  .platform-grid .platform-card:hover::after {
    animation: none;
    opacity: 0;
  }
}

/* ============================================================
   OFERTA EDUCATIVA (#oferta) — más visible + animaciones
   Realza las tarjetas de niveles con: barra de acento superior
   de color (a juego con la etiqueta), scrim y destello en la
   imagen, etiqueta y enlace animados, y entrada escalonada.
   Todo scoped a #oferta; no requiere cambios de HTML.
   ============================================================ */

/* Entrada escalonada de las tres tarjetas (usa .reveal existente) */
#oferta .offer-card.reveal {
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}
#oferta .offer-card.reveal:nth-child(1) { transition-delay: 0.05s; }
#oferta .offer-card.reveal:nth-child(2) { transition-delay: 0.18s; }
#oferta .offer-card.reveal:nth-child(3) { transition-delay: 0.31s; }

/* Tarjeta: preparar posición para la barra de acento y refinar hover */
#oferta .offer-card {
  position: relative;
  isolation: isolate;
}

/* Barra de acento superior que crece en hover (color por posición) */
#oferta .offer-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 3;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
#oferta .offer-card:nth-child(1)::before { background: var(--coral); }
#oferta .offer-card:nth-child(2)::before { background: var(--grass); }
#oferta .offer-card:nth-child(3)::before { background: var(--sky); }
#oferta .offer-card:hover::before {
  transform: scaleX(1);
}

/* Elevación algo más marcada al pasar el cursor */
#oferta .offer-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 22px 44px rgba(26, 34, 51, 0.18);
}

/* Imagen: scrim inferior que aparece + destello diagonal en hover */
#oferta .offer-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(26, 34, 51, 0.35), transparent 55%);
  opacity: 0;
  transition: opacity 0.4s ease;
}
#oferta .offer-card:hover .offer-media::before {
  opacity: 1;
}

#oferta .offer-media::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 55%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
#oferta .offer-card:hover .offer-media::after {
  opacity: 1;
  animation: offer-shine 0.8s ease forwards;
}
@keyframes offer-shine {
  from { left: -80%; }
  to { left: 130%; }
}

/* Zoom de imagen un poco mayor */
#oferta .offer-card:hover .offer-media img {
  transform: scale(1.1);
}

/* Etiqueta: se eleva y realza en hover */
#oferta .offer-tag {
  z-index: 3;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}
#oferta .offer-card:hover .offer-tag {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 8px 18px rgba(26, 34, 51, 0.25);
}

/* Título cambia a color primario en hover */
#oferta .offer-body h3 {
  transition: color 0.3s ease;
}
#oferta .offer-card:hover .offer-body h3 {
  color: var(--primary);
}

/* Enlace "Más información": subrayado animado + flecha que avanza */
#oferta .offer-body .link {
  position: relative;
  transition: gap 0.3s ease;
}
#oferta .offer-body .link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#oferta .offer-card:hover .offer-body .link {
  gap: 0.7rem;
}
#oferta .offer-card:hover .offer-body .link::after {
  transform: scaleX(1);
}
#oferta .offer-body .link svg {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
#oferta .offer-card:hover .offer-body .link svg {
  transform: translateX(5px);
}

/* Accesibilidad: sin movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  #oferta .offer-card.reveal { transition-delay: 0s; }
  #oferta .offer-card:hover {
    transform: none;
  }
  #oferta .offer-card:hover .offer-media img { transform: none; }
  #oferta .offer-card:hover .offer-tag { transform: none; }
  #oferta .offer-media::after,
  #oferta .offer-card:hover .offer-media::after {
    animation: none;
    opacity: 0;
  }
}

/* ============================================================
   FONDOS ANIMADOS (2 secciones)
   Solo CSS, sin tocar el HTML: cada fondo se pinta en un
   pseudo-elemento ::before de la sección (z-index 0) y el
   contenido se mantiene por encima con .container { z-index:1 }.

   Estilos elegidos:
     - Degradado que fluye ... #agenda   (Próximos eventos)
     - Patrón geométrico ..... #noticias (Últimas novedades)
   ============================================================ */

/* Base común: recorte y capa de contenido por encima */
#agenda,
#noticias {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#agenda > .container,
#noticias > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Degradado que fluye (#agenda) ---------- */
#agenda::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
  background: linear-gradient(
    120deg,
    var(--sky),
    var(--primary),
    var(--grass),
    var(--gold),
    var(--coral),
    var(--sky)
  );
  background-size: 300% 300%;
  animation: bg-flow 16s ease infinite;
}
@keyframes bg-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---------- Patrón geométrico en movimiento (#noticias) ---------- */
#noticias::before {
  content: "";
  position: absolute;
  inset: -40px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: radial-gradient(
    color-mix(in srgb, var(--primary) 26%, transparent) 1.6px,
    transparent 1.7px
  );
  background-size: 26px 26px;
  animation: bg-dots 22s linear infinite;
}
@keyframes bg-dots {
  from { background-position: 0 0; }
  to   { background-position: 260px 260px; }
}

/* Accesibilidad: detener los fondos si el usuario reduce el movimiento */
@media (prefers-reduced-motion: reduce) {
  #agenda::before,
  #noticias::before {
    animation: none;
  }
}

/* ============================================================
   ADMISIONES (#admisiones .cta) — rediseño destacado
   Misma información, más impacto visual. Todo scoped a
   #admisiones, solo CSS (sin cambios de HTML):
   - fondo multicapa (gradiente + brillos + patrón de puntos)
   - badge superior "Inscripciones 2026 abiertas" (::before)
   - orbes de luz flotantes (::after) + glow que respira
   - botones más grandes, con ícono de WhatsApp y hover animado
   ============================================================ */

#admisiones {
  position: relative;
}

/* Tarjeta principal: fondo rico + borde luminoso + sombra */
#admisiones .cta {
  padding: 3.75rem 3rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(120% 120% at 12% 8%, color-mix(in srgb, var(--gold) 34%, transparent), transparent 46%),
    radial-gradient(120% 120% at 88% 92%, color-mix(in srgb, var(--sky) 40%, transparent), transparent 50%),
    radial-gradient(color-mix(in srgb, #ffffff 10%, transparent) 1.3px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow:
    0 26px 60px -18px color-mix(in srgb, var(--primary) 70%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  animation: adm-breathe 6s ease-in-out infinite;
}

@keyframes adm-breathe {
  0%, 100% { box-shadow: 0 26px 60px -18px color-mix(in srgb, var(--primary) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
  50%      { box-shadow: 0 30px 72px -16px color-mix(in srgb, var(--gold) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
}

/* Badge superior (primer hijo en el flujo, centrado sobre el título) */
#admisiones .cta::before {
  content: "Inscripciones 2026 abiertas";
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-foreground);
  background: var(--gold);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--gold) 80%, transparent);
  position: relative;
  z-index: 2;
}

/* Orbe de luz flotante decorativo */
#admisiones .cta::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -8%;
  width: 22rem;
  height: 22rem;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold) 45%, transparent), transparent 62%);
  filter: blur(6px);
  animation: adm-float 9s ease-in-out infinite alternate;
}

@keyframes adm-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-3%, 6%, 0) scale(1.12); }
}

/* Contenido por encima de las capas decorativas */
#admisiones .cta h2,
#admisiones .cta p,
#admisiones .cta-actions {
  position: relative;
  z-index: 2;
}

/* Título más grande y con sombra sutil para resaltar */
#admisiones .cta h2 {
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  line-height: 1.1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

#admisiones .cta p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.95);
}

/* --- Botones más llamativos --- */
#admisiones .cta-actions {
  margin-top: 2.25rem;
  gap: 0.9rem;
}

#admisiones .cta-actions .btn {
  padding: 0.95rem 1.6rem;
  font-size: 1.02rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    filter 0.3s ease;
}

/* Ícono de WhatsApp en el botón principal (mask -> hereda el color del texto) */
#admisiones .btn-gold::before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.149-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.372-.025-.521-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51l-.57-.01c-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.71.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

#admisiones .btn-gold {
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--gold) 85%, transparent);
}

#admisiones .cta-actions .btn:hover {
  transform: translateY(-3px);
  filter: brightness(1.05);
}

#admisiones .btn-gold:hover {
  box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--gold) 90%, transparent);
}

#admisiones .btn-white:hover {
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.4);
}

/* ---------- Animación extra ---------- */

/* El badge late suavemente y muestra un punto que parpadea (● en vivo) */
#admisiones .cta::before {
  content: "● Inscripciones 2026 abiertas";
  animation: adm-badge-pulse 2.8s ease-in-out infinite;
}
@keyframes adm-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--gold) 80%, transparent); }
  50%      { transform: scale(1.05); box-shadow: 0 10px 26px -4px color-mix(in srgb, var(--gold) 95%, transparent); }
}

/* Título con una flotación muy leve para dar vida sin distraer */
#admisiones .cta h2 {
  animation: adm-title-float 5s ease-in-out infinite;
}
@keyframes adm-title-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* El botón dorado emite un glow que pulsa para atraer la mirada */
#admisiones .btn-gold {
  animation: adm-btn-glow 2.4s ease-in-out infinite;
}
@keyframes adm-btn-glow {
  0%, 100% { box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--gold) 85%, transparent), 0 0 0 0 color-mix(in srgb, var(--gold) 55%, transparent); }
  50%      { box-shadow: 0 16px 34px -8px color-mix(in srgb, var(--gold) 95%, transparent), 0 0 0 8px color-mix(in srgb, var(--gold) 0%, transparent); }
}

/* El ícono de WhatsApp hace un pequeño saludo al pasar el cursor */
#admisiones .btn-gold:hover::before {
  animation: adm-wa-wave 0.7s ease-in-out;
}
@keyframes adm-wa-wave {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-12deg); }
  75%      { transform: rotate(12deg); }
}

/* La flotación del botón en hover tiene prioridad sobre el glow en reposo */
#admisiones .cta-actions .btn:hover {
  animation-play-state: paused;
}

/* Responsive */
@media (max-width: 640px) {
  #admisiones .cta {
    padding: 2.5rem 1.5rem;
  }
  #admisiones .cta-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Accesibilidad: sin movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  #admisiones .cta,
  #admisiones .cta::after,
  #admisiones .cta::before,
  #admisiones .cta h2,
  #admisiones .btn-gold,
  #admisiones .btn-gold:hover::before {
    animation: none;
  }
}

/* ============================================================
   PLATFORMS — logos de marca a COLOR
   Para usar el logo real de cada plataforma (a color) en vez del
   ícono de silueta blanco. En el HTML del recuadro:

     <a href="..." class="platform-card has-logo reveal">
       <span class="logo-badge">
         <img src="assets/img/logos/NOMBRE.png" alt="Nombre plataforma">
       </span>
       <span>Nombre plataforma</span>
     </a>

   La clase .has-logo hace que el chip sea blanco y el logo se vea
   a todo color (sin el filtro blanco de los íconos de silueta).
   ============================================================ */

/* Chip blanco que contiene el logo a color */
.platform-grid .platform-card.has-logo .logo-badge {
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 16px -6px rgba(26, 34, 51, 0.35);
  margin-bottom: 0.35rem;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* El logo se muestra completo, a color y nítido */
.platform-grid .platform-card.has-logo .logo-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Mantener la animación de hover del chip también con logo */
.platform-grid .platform-card.has-logo:hover .logo-badge {
  transform: scale(1.12) translateY(-2px);
}

/* ============================================================
   CARRUSEL CUBO 3D (#informativos) — Informativas y Circulares
   Dos carruseles lado a lado con transición tipo cubo. La lógica
   está en js/main.js; aquí van el layout y el efecto 3D.
   Marcadores neutros por ahora; el cliente reemplaza cada
   .cube-face por una imagen real:
     <figure class="cube-face"><img src="..." alt="..."></figure>
   ============================================================ */

/* Fila de los dos carruseles (lado a lado; se apilan en móvil).
   Informativas (horizontal) recibe más ancho; Circulares (vertical)
   ocupa una columna más estrecha. Se alinean por arriba. */
.cube-row {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  align-items: start;
  gap: 2.5rem;
}
@media (max-width: 820px) {
  .cube-row {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* En móvil, la circular vertical no ocupa todo el ancho */
  .cube-col--narrow {
    max-width: 26rem;
    margin: 0 auto;
    width: 100%;
  }
}

.cube-col {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.cube-title {
  text-align: center;
  color: var(--primary);
  font-size: 1.25rem;
}

/* Contenedor del carrusel */
.cube-carousel {
  position: relative;
}

/* Escenario con perspectiva 3D */
.cube-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  perspective: 1400px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--muted);
  box-shadow: 0 16px 40px -18px rgba(26, 34, 51, 0.35);
}

/* Variante vertical: circulares suben en formato 4:5 (retrato) */
.cube-carousel--v .cube-stage {
  aspect-ratio: 4 / 5;
}

/* Caja que gira */
.cube-box {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* Cada cara del cubo */
.cube-face {
  position: absolute;
  inset: 0;
  margin: 0;
  display: none; /* JS activa solo las caras en juego */
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  overflow: hidden;
  background: var(--muted);
}
.cube-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Marcador de posición neutro (mientras no hay imagen real) */
.cube-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--foreground) 55%, transparent);
  background:
    repeating-linear-gradient(
      45deg,
      color-mix(in srgb, var(--primary) 6%, transparent) 0 12px,
      transparent 12px 24px
    ),
    var(--muted);
}

/* Flechas de navegación */
.cube-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: color-mix(in srgb, var(--primary) 80%, transparent);
  box-shadow: 0 6px 16px -6px rgba(26, 34, 51, 0.5);
  transition: background 0.25s ease, transform 0.25s ease;
}
.cube-nav:hover {
  background: var(--primary);
  transform: translateY(-50%) scale(1.08);
}
.cube-nav svg {
  width: 1.2rem;
  height: 1.2rem;
}
.cube-prev { left: 0.6rem; }
.cube-next { right: 0.6rem; }

/* Puntos indicadores */
.cube-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.7rem;
  z-index: 5;
  display: flex;
  gap: 0.4rem;
  justify-content: center;
}
.cube-dots button {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 0 0 1px rgba(26, 34, 51, 0.15);
  transition: background 0.25s ease, transform 0.25s ease;
}
.cube-dots button.active {
  background: #fff;
  transform: scale(1.25);
}

/* Accesibilidad: sin auto-giro perceptible si se reduce el movimiento
   (el JS ya respeta prefers-reduced-motion desactivando el autoplay) */
@media (prefers-reduced-motion: reduce) {
  .cube-box {
    transition: none !important;
  }
}

/* ============================================================
   INSTITUCIÓN (#institucion) — "Una comunidad que forma con amor"
   Más color y animaciones. Todo scoped a #institucion, solo CSS:
   - fondo suave con brillos de color y patrón de puntos
   - imagen con marco de color, brillo animado y badge que late
   - cada tarjeta de valor tintada con el color de su ícono
   - entrada escalonada + hover con elevación y brillo
   ============================================================ */

#institucion {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Fondo con brillos de color en las esquinas + patrón de puntos */
#institucion::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 55% at 92% 8%, color-mix(in srgb, var(--sky) 16%, transparent), transparent 70%),
    radial-gradient(55% 50% at 4% 96%, color-mix(in srgb, var(--coral) 14%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--primary) 6%, transparent) 1.2px, transparent 1.3px) 0 0 / 24px 24px;
}
#institucion > .container {
  position: relative;
  z-index: 1;
}

/* --- Imagen con marco de color y brillo giratorio --- */
#institucion .why-media {
  border-radius: calc(var(--radius-lg) + 6px);
  padding: 6px;
  background: linear-gradient(135deg, var(--sky), var(--primary) 45%, var(--coral));
  box-shadow: 0 24px 50px -20px color-mix(in srgb, var(--primary) 60%, transparent);
}
#institucion .why-media img {
  height: 470px;
  animation: inst-img-in 0.9s ease both;
}
@keyframes inst-img-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

/* Badge dorado que late suavemente */
#institucion .why-badge {
  animation: inst-badge-beat 3.2s ease-in-out infinite;
}
@keyframes inst-badge-beat {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: var(--shadow-lg); }
  50%      { transform: translateY(-4px) scale(1.05); box-shadow: 0 18px 34px -10px color-mix(in srgb, var(--gold) 75%, transparent); }
}

/* --- Tarjetas de valores: cada una tintada con su color --- */
#institucion .why-values {
  gap: 1.1rem;
}

#institucion .value-card {
  position: relative;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease,
    background 0.35s ease;
  /* Entrada escalonada */
  opacity: 0;
  transform: translateY(16px);
  animation: inst-card-in 0.6s ease forwards;
}
@keyframes inst-card-in {
  to { opacity: 1; transform: translateY(0); }
}
#institucion .value-card:nth-child(1) { animation-delay: 0.05s; }
#institucion .value-card:nth-child(2) { animation-delay: 0.18s; }
#institucion .value-card:nth-child(3) { animation-delay: 0.31s; }
#institucion .value-card:nth-child(4) { animation-delay: 0.44s; }

/* Franja de color superior que crece en hover */
#institucion .value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}
#institucion .value-card:hover::before {
  transform: scaleX(1);
}

#institucion .value-card:hover {
  transform: translateY(-6px);
}

/* Color por tarjeta según el ícono que contiene */
#institucion .value-card:has(.badge-sky) {
  background: color-mix(in srgb, var(--sky) 10%, var(--card));
  border-color: color-mix(in srgb, var(--sky) 35%, transparent);
}
#institucion .value-card:has(.badge-sky)::before { background: var(--sky); }
#institucion .value-card:has(.badge-sky):hover {
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--sky) 70%, transparent);
}

#institucion .value-card:has(.badge-coral) {
  background: color-mix(in srgb, var(--coral) 10%, var(--card));
  border-color: color-mix(in srgb, var(--coral) 35%, transparent);
}
#institucion .value-card:has(.badge-coral)::before { background: var(--coral); }
#institucion .value-card:has(.badge-coral):hover {
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--coral) 70%, transparent);
}

#institucion .value-card:has(.badge-grass) {
  background: color-mix(in srgb, var(--grass) 10%, var(--card));
  border-color: color-mix(in srgb, var(--grass) 35%, transparent);
}
#institucion .value-card:has(.badge-grass)::before { background: var(--grass); }
#institucion .value-card:has(.badge-grass):hover {
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--grass) 70%, transparent);
}

#institucion .value-card:has(.badge-gold) {
  background: color-mix(in srgb, var(--gold) 12%, var(--card));
  border-color: color-mix(in srgb, var(--gold) 40%, transparent);
}
#institucion .value-card:has(.badge-gold)::before { background: var(--gold); }
#institucion .value-card:has(.badge-gold):hover {
  box-shadow: 0 16px 32px -12px color-mix(in srgb, var(--gold) 70%, transparent);
}

/* Chip del ícono: un poco más grande y con rebote al pasar el cursor */
#institucion .value-card .icon-badge {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#institucion .value-card:hover .icon-badge {
  transform: rotate(-6deg) scale(1.12);
}

/* Resalte del texto destacado del título (subrayado suave animado) */
#institucion .section-title .hl {
  background-image: linear-gradient(
    color-mix(in srgb, var(--gold) 42%, transparent),
    color-mix(in srgb, var(--gold) 42%, transparent)
  );
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 0% 0.28em;
  padding: 0 0.05em;
  animation: inst-hl-in 1s ease 0.35s forwards;
}
@keyframes inst-hl-in {
  to { background-size: 100% 0.28em; }
}

/* Accesibilidad: sin animación si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  #institucion .why-media img,
  #institucion .why-badge,
  #institucion .value-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   RECORRIDO VIRTUAL (.vtour) — portada + visor inmersivo
   - .vtour-cover: una sola foto principal (clicable)
   - .vtour-viewer: overlay a pantalla completa con foto grande,
     descripción del lugar, flechas, contador y miniaturas.
   La lógica está en js/main.js (initVirtualTour).
   ============================================================ */

.vtour {
  position: relative;
}

/* ---------- PORTADA (una sola foto) ---------- */
.vtour-cover {
  position: relative;
  display: block;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0;
  border: none;
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  background: var(--muted);
  box-shadow: 0 24px 55px -22px rgba(26, 34, 51, 0.5);
  aspect-ratio: 16 / 9;
}
.vtour-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.vtour-cover:hover .vtour-cover-img {
  transform: scale(1.06);
}
.vtour-cover-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(var(--hero-fade, 36, 79, 158), 0.85),
    rgba(var(--hero-fade, 36, 79, 158), 0.25) 55%,
    rgba(var(--hero-fade, 36, 79, 158), 0.1)
  );
  transition: opacity 0.4s ease;
}
.vtour-cover:hover .vtour-cover-shade {
  opacity: 0.85;
}
.vtour-cover-inner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #fff;
  text-align: center;
  padding: 1.5rem;
}
.vtour-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease;
  animation: vtour-pulse 2.6s ease-in-out infinite;
}
.vtour-play svg { width: 2.6rem; height: 2.6rem; }
.vtour-cover:hover .vtour-play {
  transform: scale(1.12);
  background: rgba(255, 255, 255, 0.28);
}
@keyframes vtour-pulse {
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(255, 255, 255, 0.35); }
  50%      { box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5), 0 0 0 14px rgba(255, 255, 255, 0); }
}
.vtour-cover-title {
  font-family: var(--font-serif, "Playfair Display", serif);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.vtour-cover-meta {
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* ---------- VISOR A PANTALLA COMPLETA ---------- */
.vtour-viewer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  background: rgba(12, 18, 32, 0.94);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s ease;
  padding: clamp(0.8rem, 2vw, 1.6rem);
}
.vtour-viewer.open {
  opacity: 1;
}
.vtour-viewer[hidden] {
  display: none;
}

.vtour-close {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.4rem);
  right: clamp(0.8rem, 2vw, 1.4rem);
  z-index: 5;
  width: 2.8rem;
  height: 2.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.25s ease, transform 0.25s ease;
}
.vtour-close:hover { background: rgba(255, 255, 255, 0.25); transform: rotate(90deg); }
.vtour-close svg { width: 1.4rem; height: 1.4rem; }

.vtour-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
}

.vtour-figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: min(1320px, 100%);
  max-height: 100%;
}
.vtour-img-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.vtour-img {
  max-width: 100%;
  max-height: 72vh;
  border-radius: var(--radius);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.7);
  background: var(--muted);
  animation: vtour-fade 0.5s ease;
}
/* Tamaño según la proporción de la foto (clase puesta por JS) */
.vtour-img.is-landscape {
  /* Horizontales: que llenen el ancho y crezcan más de alto */
  width: 100%;
  max-height: 78vh;
}
.vtour-img.is-square {
  /* Cuadradas: un poco más grandes que antes */
  max-height: 74vh;
}
.vtour-img.is-portrait {
  /* Verticales: contenidas para no desbordar en alto */
  max-height: 74vh;
}
@keyframes vtour-fade {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}

.vtour-caption {
  text-align: center;
  color: #fff;
  max-width: 640px;
}
.vtour-counter {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.08);
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.vtour-place {
  color: #fff;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  margin: 0 0 0.35rem;
}
.vtour-desc {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  margin: 0;
}

/* Flechas */
.vtour-nav {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.25s ease, transform 0.25s ease;
}
.vtour-nav:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.08); }
.vtour-nav svg { width: 1.4rem; height: 1.4rem; }

/* Tira de miniaturas */
.vtour-thumbs {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-start;
  overflow-x: auto;
  padding: 0.8rem 0.2rem 0.3rem;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.vtour-thumbs::-webkit-scrollbar { height: 6px; }
.vtour-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 999px; }
.vtour-thumb {
  flex: 0 0 auto;
  width: 84px;
  height: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.55;
  background: var(--muted);
  transition: opacity 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.vtour-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vtour-thumb:hover { opacity: 0.9; }
.vtour-thumb.active {
  opacity: 1;
  border-color: var(--gold);
  transform: translateY(-2px);
}

/* Responsivo: flechas más pequeñas y layout vertical en móvil */
@media (max-width: 640px) {
  .vtour-img,
  .vtour-img.is-landscape,
  .vtour-img.is-square,
  .vtour-img.is-portrait { max-height: 56vh; }
  .vtour-nav { width: 2.4rem; height: 2.4rem; }
  .vtour-thumb { width: 66px; height: 44px; }
}

/* No bloquear scroll cuando el visor está abierto */
body.vtour-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .vtour-cover-img,
  .vtour-play,
  .vtour-img { animation: none; transition: none; }
}

/* ============================================================
   RESEÑA POR DÉCADAS (#resena-decadas) — acordeón
   Cada <details class="decade"> es una década; al abrir una se
   cierran las demás (name="historia-decadas" + refuerzo en JS).
   Dentro, .year-list muestra el detalle año por año.
   ============================================================ */

.decades {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.decade {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.decade[open] {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  box-shadow: 0 14px 34px -18px color-mix(in srgb, var(--primary) 55%, transparent);
}

/* Cabecera clicable */
.decade-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 0.25s ease;
}
.decade-head::-webkit-details-marker { display: none; }
.decade-head:hover {
  background: color-mix(in srgb, var(--primary) 6%, transparent);
}
.decade[open] .decade-head {
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

/* Etiqueta de la década (1940s) */
.decade-label {
  font-family: var(--font-serif, "Playfair Display", serif);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem);
  color: var(--primary);
  line-height: 1;
  flex-shrink: 0;
  min-width: 4.3rem;
}
.decade-s {
  font-size: 0.62em;
  opacity: 0.7;
  margin-left: 0.05em;
}

.decade-title {
  flex: 1;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--foreground);
}

/* Flecha */
.decade-caret {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  transition: transform 0.35s ease, background 0.25s ease;
}
.decade-caret svg { width: 1.1rem; height: 1.1rem; }
.decade[open] .decade-caret {
  transform: rotate(180deg);
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Cuerpo desplegable */
.decade-body {
  padding: 0.4rem 1.3rem 1.3rem;
}

/* Lista de años */
.year-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
/* Línea vertical que conecta los años */
.year-list::before {
  content: "";
  position: absolute;
  left: 3.15rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 2px;
  background: color-mix(in srgb, var(--primary) 20%, transparent);
}

.year-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 0.7rem 0;
  animation: decade-year-in 0.45s ease both;
}
.decade[open] .year-item:nth-child(1) { animation-delay: 0.02s; }
.decade[open] .year-item:nth-child(2) { animation-delay: 0.10s; }
.decade[open] .year-item:nth-child(3) { animation-delay: 0.18s; }
.decade[open] .year-item:nth-child(4) { animation-delay: 0.26s; }
@keyframes decade-year-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Año + punto en la línea */
.year {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 4.4rem;
  text-align: left;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
  padding-top: 0.05rem;
}
.year::after {
  content: "";
  position: absolute;
  left: 2.75rem;
  top: 0.35rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 999px;
  background: var(--primary);
  border: 3px solid var(--card);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);
}

.year-detail h4 {
  margin: 0 0 0.2rem;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--foreground);
}
.year-detail p {
  margin: 0;
  color: var(--muted-foreground);
  line-height: 1.55;
  font-size: 0.95rem;
}

@media (max-width: 560px) {
  .year-list::before { left: 2.75rem; }
  .year { width: 3.6rem; font-size: 0.85rem; }
  .year::after { left: 2.3rem; }
  .year-item { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .year-item { animation: none; }
  .decade-caret { transition: none; }
}

/* ============================================================
   CONVENIOS (#convenios) — marquee de logos infinito (CSS puro)
   .logos-track contiene DOS .logos-group idénticos; al animar
   translateX(-50%) el bucle es continuo y sin saltos.
   Pausa al pasar el cursor y desvanecido en los bordes.
   ============================================================ */

.logos-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 0.5rem 0;
  /* Desvanecido en los bordes izquierdo/derecho */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logos-track {
  display: flex;
  width: max-content;
  animation: logos-scroll 32s linear infinite;
}
.logos-marquee:hover .logos-track {
  animation-play-state: paused;
}

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

.logos-group {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-left: 1.25rem; /* separación entre las dos copias */
}

.logo-chip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 190px;
  height: 100px;
  padding: 1rem 1.4rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 20px -14px rgba(26, 34, 51, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.logo-chip:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 40%, transparent);
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--primary) 55%, transparent);
}

.logo-chip img {
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Logos en gris por defecto; recuperan su color al pasar el cursor. */
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.logo-chip:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* Chip de ejemplo mientras llegan los logos reales */
.logo-ph {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--muted-foreground);
  text-align: center;
}

@media (max-width: 560px) {
  .logo-chip { width: 150px; height: 84px; }
  .logo-chip img { max-height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .logos-track { animation: none; }
  /* Sin animación, permite desplazamiento manual con scroll táctil/rueda */
  .logos-marquee { overflow-x: auto; }
}

/* ============================================================
   MEJORAS UNIFICADAS EN PÁGINAS INTERNAS
   Soporte para el realce (colores, animaciones y hover) que
   js/main.js aplica automáticamente a todas las páginas.
   - .is-autotint-a / .is-autotint-b: tintes de marca alternados (JS)
   - .auto-card: tarjeta genérica realzable (la marca el JS)
   - .auto-reveal: animación de entrada auto-aplicada (usa .reveal)
   ============================================================ */

/* Tintes de marca alternados y VISIBLES para páginas internas.
   Definidos al final del archivo para prevalecer sobre bg-dots/bg-muted.
   Son claros para no afectar la legibilidad del texto oscuro, pero con
   suficiente color para que las tarjetas blancas resalten. */
.section.is-autotint-a,
.section.is-autotint-b {
  position: relative;
}
.section.is-autotint-a > .container,
.section.is-autotint-b > .container {
  position: relative;
  z-index: 1;
}
/* Tinte A — azul institucional */
.section.is-autotint-a {
  background-color: #e9f0fb;
  background-image:
    radial-gradient(closest-side at 12% 12%, rgba(47, 102, 204, 0.14), transparent),
    radial-gradient(closest-side at 90% 20%, rgba(59, 163, 217, 0.12), transparent),
    radial-gradient(rgba(47, 102, 204, 0.10) 1.4px, transparent 1.4px);
  background-size: auto, auto, 22px 22px;
}
/* Tinte B — dorado cálido */
.section.is-autotint-b {
  background-color: #faf4e8;
  background-image:
    radial-gradient(closest-side at 88% 12%, rgba(232, 178, 62, 0.22), transparent),
    radial-gradient(closest-side at 8% 88%, rgba(47, 102, 204, 0.08), transparent);
}

/* Realce de íconos al pasar el cursor sobre tarjetas o enlaces */
.card:hover .icon-badge,
a:hover > .icon-badge,
li:hover > .icon-badge,
.auto-card:hover .icon-badge {
  transform: scale(1.08) rotate(-3deg);
}

/* Tarjeta genérica realzable: el JS la aplica a bloques tipo tarjeta
   que aún no tienen su propio efecto hover. */
.auto-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.auto-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

/* Escalonado de entrada para grupos de elementos auto-revelados.
   El JS asigna --i (índice) a cada elemento del grupo. */
.auto-reveal {
  transition-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .auto-reveal { transition-delay: 0ms; }
  .card:hover .icon-badge,
  a:hover > .icon-badge,
  .auto-card:hover .icon-badge { transform: none; }
}