/* ============================================================================
   main.css — Centro Educacional Cristiano (CEC)
   ----------------------------------------------------------------------------
   Descripción : Hoja de estilos principal del sitio institucional del CEC.
                 Extiende Bootstrap 5.3 con tokens de marca, componentes propios
                 y microinteracciones controladas. Escrita mobile-first, con
                 nomenclatura tipo BEM en prefijo `cec-`.
   Estructura  :
                 LAYER 1 — Tokens / Variables (paleta, tipografía, espacios)
                 LAYER 2 — Base y layout (body, hero, navbar, utility bar)
                 LAYER 3 — Componentes (cards, MVV, pilares, acreditaciones)
                 LAYER 4 — Botones y utilidades tipográficas
                 LAYER 5 — Scroll polish (reveals, progress bar, floating shapes)
                 LAYER 6 — Responsive tweaks y prefers-reduced-motion
   Dependencias: Bootstrap 5.3.3, Font Awesome 6.5.0, Google Fonts (Montserrat)
   Versión     : 1.0.0
   Actualizado : 2026-04-21
   ============================================================================ */


/* =============================================================================
   LAYER 1 — Tokens / Variables (overrides de Bootstrap + tokens propios)
   ============================================================================= */

:root {
  /* Paleta de marca (intocable — definida por identidad institucional) */
  --bs-primary:          #04136d;
  --bs-primary-rgb:      4, 19, 109;
  --bs-secondary:        #5d649f;
  --bs-secondary-rgb:    93, 100, 159;
  --bs-tertiary:         #7c84b3;
  --bs-light:            #cccee0;
  --bs-light-rgb:        204, 206, 224;

  /* Derivados */
  --cec-primary-hover:   #344089;

  /* Bordes */
  --cec-border:          1px solid #cccee0;
  --cec-border-accent:   1px solid #7c84b3;

  /* Sombras en capas (suaves → marcadas) */
  --cec-shadow-sm:       0 2px 8px rgba(4, 19, 109, 0.08);
  --cec-shadow-md:       0 6px 16px rgba(4, 19, 109, 0.10);
  --cec-shadow-lg:       0 8px 20px rgba(4, 19, 109, 0.12);

  /* Radius */
  --cec-radius:          0.5rem;
  --cec-radius-lg:       0.75rem;

  /* Transición estándar */
  --cec-transition:      all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Tipografía base (Montserrat cargado desde Google Fonts) */
  --bs-body-font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  --bs-body-font-size:   1rem;
  --bs-body-line-height: 1.5;

  /* Sistema de padding vertical por sección (mobile) */
  --cec-py-compact: 2rem;   /* franjas utilitarias (accesos, stats, acreditaciones) */
  --cec-py-normal:  3rem;   /* secciones de contenido estándar */
  --cec-py-relaxed: 3.5rem; /* bloques de mayor peso (bienvenida, CTA admisión) */
}

/* Breakpoint md (≥768px): ampliar paddings de sección */
@media (min-width: 768px) {
  :root {
    --cec-py-compact: 2.5rem;
    --cec-py-normal:  4rem;
    --cec-py-relaxed: 5.5rem;
  }
}

/* Breakpoint lg (≥992px): paddings finales para desktop */
@media (min-width: 992px) {
  :root {
    --cec-py-compact: 3rem;
    --cec-py-normal:  5rem;
    --cec-py-relaxed: 7rem;
  }
}


/* =============================================================================
   LAYER 2 — Base y layout
   ============================================================================= */

/* Reset mínimo — box-sizing coherente en todo el árbol */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  color: #1a1a2e;
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
}

/* Jerarquía tipográfica */
h1, h2, h3 { font-weight: 700; line-height: 1.2; }
h4, h5     { font-weight: 600; line-height: 1.3; }

/* Escala custom */
.cec-h1 { font-size: clamp(2rem, 5vw, 3.5rem); }


/* ----- Hero / Banner Principal -----
   Carrusel de 3 slides con overlay y contenido centrado vertical. */
.cec-hero {
  position: relative;
  min-height: 75vh;
  background: #0d1b5e center / cover no-repeat;
  display: flex;
  align-items: center;
}

.cec-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(4, 19, 109, 0.72), rgba(5, 20, 110, 0.42));
  z-index: 1;
}

.cec-hero-content { position: relative; z-index: 2; }

.cec-hero-slide {
  min-height: 75vh;
  background: #0d1b5e center / cover no-repeat;
  display: flex;
  align-items: center;
}

/* Variantes de fondo de slide (fallback sólido mientras no haya foto real) */
.cec-hero-slide--a { background-color: #0d1b5e; }
.cec-hero-slide--b { background-color: #0a154a; }
.cec-hero-slide--c { background-color: #0f1f6e; }

/* Hero split (F3.3) — slide principal con imagen lateral en desktop.
   En mobile el overlay y el background-color cubren todo (la imagen lateral
   queda d-none); en desktop el overlay se atenúa para que la foto respire. */
@media (min-width: 992px) {
  .cec-hero-slide--split .cec-hero-overlay {
    background: linear-gradient(110deg, rgba(4, 19, 109, 0.78) 0%, rgba(4, 19, 109, 0.55) 50%, rgba(4, 19, 109, 0.25) 100%);
  }
}
.cec-hero-split-img {
  border-radius: var(--cec-radius-lg);
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 6px 16px rgba(0, 0, 0, 0.18);
  aspect-ratio: 4 / 3;
  background: rgba(255, 255, 255, 0.06);
}
.cec-hero-split-img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Texto descriptivo blanco sobre overlay */
.cec-hero-lead { font-size: 1.1rem; opacity: 0.92; }

/* Eyebrow (bajada pequeña sobre el H1) — F2.3
   `.text-white-50` de Bootstrap da ~4.7:1 sobre el overlay azul (AA borderline).
   Esta clase fija un color con ratio ≥ 10:1 y ajusta peso + tracking para jerarquía. */
.cec-hero-eyebrow {
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  letter-spacing: 0.08em;
}


/* ----- Navbar Principal -----
   Altura con aire para que el logo respire; se compacta sutilmente al scrollear. */
.navbar {
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}
.navbar .container { align-items: center; }
.navbar-brand      { padding-top: 0; padding-bottom: 0; }

.navbar-brand-text {
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--bs-primary);
  line-height: 1.1;
}
.navbar-brand-text span {
  display: block;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--bs-secondary);
}

.nav-link {
  font-weight: 500;
  font-size: 0.9rem;
  color: #1a1a2e !important;
  padding: 0.45rem 0.7rem !important;
  line-height: 1.4;
  transition: var(--cec-transition);
}
.nav-link:hover,
.nav-link:focus {
  color: var(--bs-primary) !important;
}

/* Estado activo del nav link según la sección visible en viewport */
.navbar .nav-link.cec-nav-active {
  color: var(--bs-primary) !important;
  font-weight: 600;
}

/* Desktop: línea inferior bajo el texto.
   ::before evita conflicto con el caret ::after de Bootstrap en dropdown-toggle. */
@media (min-width: 992px) {
  .navbar .nav-link.cec-nav-active { position: relative; }
  .navbar .nav-link.cec-nav-active::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background: var(--bs-primary);
    border-radius: 1px;
  }
}

/* Mobile: borde izquierdo dentro del menú desplegado */
@media (max-width: 991.98px) {
  .navbar .nav-link.cec-nav-active {
    border-left: 3px solid var(--bs-primary);
    padding-left: calc(0.75rem - 3px) !important;
    background-color: rgba(4, 19, 109, 0.04);
    border-radius: 0 var(--cec-radius) var(--cec-radius) 0;
  }
}

/* Dropdowns */
.navbar .dropdown-menu {
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  box-shadow: var(--cec-shadow-md);
  padding: 0.5rem 0;
}
.navbar .dropdown-item {
  font-size: 0.88rem;
  font-weight: 400;
  padding: 0.45rem 1.25rem;
  transition: var(--cec-transition);
}
.navbar .dropdown-item:hover {
  background-color: #f0f1f8;
  color: var(--bs-primary);
}


/* ----- Utility Bar (barra utilitaria superior) -----
   Desktop: info completa + redes. Mobile: tel: + mail CTA directo. */
.cec-utility-bar {
  background-color: var(--bs-primary);
  font-size: 0.82rem;
  letter-spacing: 0.015em;
  /* F2.4 — Separación visual reforzada entre utility bar, navbar y hero.
     Antes: border 0.08 · sin sombra. Se fundía con el hero azul oscuro. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.06);
}
.cec-utility-bar .container {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.cec-utility-bar a {
  text-decoration: none;
  transition: var(--cec-transition);
}
.cec-utility-bar a:hover { opacity: 0.75; }

/* Variante mobile compacta */
.cec-utility-bar--mobile { font-size: 0.78rem; }
.cec-utility-bar--mobile .container {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.cec-utility-bar--mobile .cec-utility-sep {
  width: 1px;
  height: 0.9rem;
  background: rgba(255, 255, 255, 0.3);
  display: inline-block;
}


/* =============================================================================
   LAYER 3 — Componentes (cards, MVV, pilares, acreditaciones)
   ============================================================================= */

/* ----- Card base -----
   Sombras layered + línea superior con gradiente que se revela en hover. */
.cec-card {
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  box-shadow:
    0 1px 2px rgba(4, 19, 109, 0.06),
    0 4px 12px rgba(4, 19, 109, 0.07);
  transition: var(--cec-transition);
  background: #fff;
  position: relative;
  overflow: hidden;
}
.cec-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--bs-primary), var(--bs-secondary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  border-radius: var(--cec-radius) var(--cec-radius) 0 0;
}
.cec-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 2px 4px rgba(4, 19, 109, 0.08),
    0 8px 20px rgba(4, 19, 109, 0.13),
    0 16px 32px rgba(4, 19, 109, 0.06);
  border-color: #b8bbda;
}
.cec-card:hover::before { transform: scaleX(1); }

/* ----- Card de nivel educativo -----
   Foco en la imagen: zoom + borde inferior brand que crece. Sin lift. */
.cec-card-level {
  overflow: hidden;
  position: relative;
}
.cec-card-level::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4px;
  background: var(--bs-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.cec-card-level:hover {
  box-shadow:
    0 2px 4px rgba(4, 19, 109, 0.08),
    0 10px 24px rgba(4, 19, 109, 0.14),
    0 20px 40px rgba(4, 19, 109, 0.07);
  border-color: #b8bbda;
}
.cec-card-level:hover::after { transform: scaleX(1); }

/* Imagen de nivel: zoom sutil en hover (aplica a la <img> dentro de .cec-media) */
.cec-card-level .cec-media img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cec-card-level:hover .cec-media img { transform: scale(1.04); }

/* ----- Diferenciación de niveles por saturación del azul institucional -----
   F2.2 — La paleta es monocromática azul (ver logo). La lectura "de un vistazo"
   se resuelve por GRADACIÓN (claro → medio → marino), no por colores distintos.
   Se aplica sobre la línea inferior del card y sobre el badge de edad.
*/
.cec-card-level--inicial::after    { background: var(--bs-tertiary); }
.cec-card-level--primario::after   { background: var(--bs-secondary); }
.cec-card-level--secundario::after { background: var(--bs-primary); }

.cec-card-level--inicial .cec-badge-soft {
  background: #e6e8f3;
  color: var(--bs-secondary);
}
.cec-card-level--primario .cec-badge-soft {
  background: var(--bs-light);
  color: var(--bs-primary);
}
.cec-card-level--secundario .cec-badge-soft {
  background: var(--bs-primary);
  color: #ffffff;
}


/* ----- Nuestro ADN — Misión / Visión como prosa (F1.3) -----
   Reemplaza al antiguo bloque .cec-mvv-card / .cec-mvv-icon: ahora la jerarquía
   se construye con un borde lateral en azul institucional + tipografía, sin
   cards repetidas. Las antiguas reglas .cec-mvv-* fueron removidas porque
   ningún markup las usa tras la fusión MVV + Pilares. */
.cec-adn-prose {
  border-left: 3px solid var(--bs-primary);
  padding: 0.5rem 0 0.5rem 1.25rem;
  height: 100%;
}
.cec-adn-prose .letter-spacing { letter-spacing: 0.08em; }


/* ----- Section heads (título + divider + subtítulo lead) ----- */
.cec-section-title {
  color: var(--bs-primary);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

/* Base: color secundario (cumple WCAG AA, ratio ≈ 4.63:1 sobre blanco) */
.cec-section-subtitle {
  color: var(--bs-secondary);
  font-size: 0.95rem;
}

/* Variante "lead" dentro del encabezado de sección:
   más presencia que el body, sin competir con el H2. */
.cec-section-head .cec-section-subtitle {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.55;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  color: #454a75; /* secondary oscurecido — más peso visual */
}
@media (min-width: 992px) {
  .cec-section-head .cec-section-subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
  }
}

/* Divider decorativo (barra azul fina) */
.cec-divider {
  width: 3rem;
  height: 3px;
  background: var(--bs-secondary);
  border-radius: 2px;
  margin: 0.75rem auto 0;
}
.cec-divider-left { margin: 0.75rem 0 0; }

/* Margen inferior del heading group, responsive */
.cec-section-head { margin-bottom: 2rem; }
@media (min-width: 768px) { .cec-section-head { margin-bottom: 3rem; } }
@media (min-width: 992px) { .cec-section-head { margin-bottom: 3.5rem; } }


/* ----- Stats bar (franja de estadísticas) ----- */
.cec-stats-bar { background-color: var(--bs-primary); }

.cec-stat-number {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
.cec-stat-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.cec-stat-icon {
  font-size: 1.6rem;
  color: rgba(255, 255, 255, 0.85);
}

/* F2.5 — Wrapper circular detrás del icono de estadística.
   Da profundidad visual sobre el fondo azul saturado y diferencia cada métrica. */
.cec-stat-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin-bottom: 0.5rem;
}

/* Nota al pie de los stats (asterisco explicativo, F5.3) */
.cec-stat-footnote {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}


/* ----- Pilares (diferenciadores) -----
   Card real: borde + fondo + sombra en capas. */
.cec-pilar {
  border: 1px solid #e4e6f0;
  border-radius: 1rem;
  padding: 1.75rem 1rem;
  background: #fff;
  box-shadow:
    0 1px 2px rgba(4, 19, 109, 0.04),
    0 3px 10px rgba(4, 19, 109, 0.05);
  transition: var(--cec-transition);
  cursor: default;
  height: 100%;
}
.cec-pilar:hover {
  border-color: #b8bbda;
  box-shadow:
    0 2px 4px rgba(4, 19, 109, 0.06),
    0 10px 24px rgba(4, 19, 109, 0.10);
  transform: translateY(-3px);
}
.cec-pilar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  font-size: 1.35rem;
  color: var(--bs-primary);
  background: linear-gradient(135deg, rgba(4, 19, 109, 0.08), rgba(93, 100, 159, 0.14));
  border-radius: 50%;
  margin-bottom: 0.9rem;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease;
}
.cec-pilar:hover .cec-pilar-icon {
  transform: scale(1.08) rotate(-4deg);
  background: linear-gradient(135deg, rgba(4, 19, 109, 0.14), rgba(93, 100, 159, 0.24));
}


/* ----- Blockquote (cita bíblica / testimonios) ----- */
.cec-blockquote {
  border-left: 3px solid var(--bs-secondary);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: #444;
  font-style: italic;
}
.cec-blockquote cite {
  font-size: 0.82rem;
  color: var(--bs-secondary);
  font-style: normal;
  font-weight: 600;
}


/* ----- News cards -----
   Elevación por sombra + zoom de imagen. Sin lift (el texto debe permanecer estable). */
.cec-news-card {
  overflow: hidden;
  transition:
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}
.cec-news-card:hover {
  box-shadow:
    0 4px 10px rgba(4, 19, 109, 0.08),
    0 14px 28px rgba(4, 19, 109, 0.12);
  border-color: #b8bbda;
}
/* F5.2 — Cards clickables: el contenedor queda como referencia para stretched-link
   que cubre toda su superficie; mantenemos cursor pointer para el feedback. */
.cec-news-card,
.cec-card-level {
  position: relative;
  cursor: pointer;
}
/* El link "Leer más"/"Ver más" lleva `stretched-link` en el HTML.
   El texto del card queda por encima del link (z-index) para que los anchors internos
   sigan siendo clickables si se añaden en el futuro. */
.cec-news-card .card-body > *:not(.stretched-link),
.cec-card-level .card-body > *:not(.stretched-link) {
  position: relative;
  z-index: 2;
}
/* Hover zoom para la foto de la noticia (la <img> dentro de .cec-media--noticia) */
.cec-news-card .cec-media img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.cec-news-card:hover .cec-media img { transform: scale(1.04); }

/* Line clamp 2 líneas (soporte compatible) */
.cec-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}


/* ----- Aliados estratégicos — Swiper carousel -----
   Reemplaza al antiguo bloque .cec-acred-logo / .cec-acred-item: la sección
   pasó de "Acreditaciones" estáticas a "Aliados" con carrusel Swiper.
   Se mantienen las propiedades de logo (grayscale + lift en hover) sobre los
   slides individuales. */
.cec-allies-wrap {
  padding: 0 0.25rem;
}
.cec-allies-swiper {
  padding: 0.25rem 0 1rem; /* aire para sombras del hover */
}

/* Slide card: el <a> envuelve el logo y maneja el hover */
.cec-ally-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 110px;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  text-decoration: none;
  transition: var(--cec-transition);
}
.cec-ally-card:hover,
.cec-ally-card:focus-visible {
  border-color: var(--bs-secondary);
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(4, 19, 109, 0.14);
  outline: 0;
}
.cec-ally-card[aria-disabled="true"] {
  cursor: not-allowed;
  /* No usamos opacity aquí — se aplica al <img> para no afectar el card */
}
.cec-ally-card[aria-disabled="true"]:hover {
  border-color: var(--cec-border-color);
  transform: none;
  box-shadow: none;
}
.cec-ally-card img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: grayscale(60%);
  opacity: 0.82;
  transition: var(--cec-transition);
}
.cec-ally-card:hover img,
.cec-ally-card:focus-visible img {
  filter: none;
  opacity: 1;
}

/* Iguala la altura de todos los slides (clave para el grid del Swiper) */
.cec-allies-swiper .swiper-slide {
  height: auto;
  display: flex;
}
.cec-allies-swiper .swiper-slide > a { width: 100%; }

/* Botones prev/next: pill brand absoluto sobre los bordes del carrusel */
.cec-swiper-nav {
  position: absolute;
  top: calc(50% - 1.5rem); /* compensa el espacio de la pagination abajo */
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--cec-border-color);
  background: #ffffff;
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 12px rgba(4, 19, 109, 0.1);
  transition: var(--cec-transition);
}
.cec-swiper-nav:hover,
.cec-swiper-nav:focus-visible {
  background: var(--bs-primary);
  color: #ffffff;
  border-color: var(--bs-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(4, 19, 109, 0.18);
}
.cec-swiper-nav.swiper-button-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.cec-swiper-prev { left: -1rem; }
.cec-swiper-next { right: -1rem; }
@media (max-width: 575.98px) {
  .cec-swiper-prev,
  .cec-swiper-next { display: none; } /* en mobile el swipe nativo cubre el caso */
}

/* Indicadores (bullets) — patrón consistente con .cec-testi-indicators */
.cec-swiper-pagination {
  position: relative !important;
  margin-top: 1rem;
  text-align: center;
  bottom: auto !important;
}
.cec-swiper-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bs-tertiary);
  opacity: 0.45;
  margin: 0 4px;
  border: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, width 0.2s ease;
}
.cec-swiper-bullet-active {
  background-color: var(--bs-primary);
  opacity: 1;
  width: 22px;
  border-radius: 4px;
}
.cec-swiper-bullet:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}


/* ----- CTA admisión (sección full-width con gradiente + formas flotantes) ----- */
.cec-cta-admision {
  background: linear-gradient(160deg, #050d52 0%, #071463 50%, #04136d 100%);
  position: relative;
  overflow: hidden; /* contiene a las formas flotantes */
}
.cec-cta-admision .btn-light:hover {
  background-color: #cccee0;
  color: var(--bs-primary);
}

/* ----- Formulario inline de interés (F4.3) -----
   Estados: idle (default) · submitting (data-state="submitting") · success/error.
   La a11y descansa en HTML5 nativo (required, type, pattern, aria-live). */
.cec-lead-form { max-width: 720px; }
.cec-lead-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.cec-lead-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0.35rem;
}
.cec-lead-input {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--bs-primary);
  border-radius: var(--cec-radius);
  padding: 0.6rem 0.85rem;
}
.cec-lead-input::placeholder { color: rgba(4, 19, 109, 0.45); }
.cec-lead-input:focus {
  background: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.35);
  color: var(--bs-primary);
}
.cec-lead-error {
  display: none;
  margin-top: 0.3rem;
  font-size: 0.8rem;
  color: #ffe2e2;
  font-weight: 500;
}
.cec-lead-form .is-invalid ~ .cec-lead-error,
.cec-lead-form input.is-invalid ~ .cec-lead-error,
.cec-lead-form select.is-invalid ~ .cec-lead-error,
.cec-lead-form .form-check-input.is-invalid ~ .cec-lead-error {
  display: block;
}
.cec-lead-input.is-invalid {
  border-color: #ffb4b4;
  box-shadow: 0 0 0 0.2rem rgba(255, 180, 180, 0.25);
}
.cec-lead-consent {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.88rem;
  margin-left: 0.75rem;
}
.cec-lead-consent .form-check-input { margin-top: 0.25rem; }
.cec-lead-consent .form-check-input.is-invalid { border-color: #ffb4b4; }

/* Estados del botón submit + área de status (controlados por data-state en el form) */
.cec-lead-submit-loading { display: none; }
.cec-lead-form[data-state="submitting"] .cec-lead-submit-idle { display: none; }
.cec-lead-form[data-state="submitting"] .cec-lead-submit-loading { display: inline-flex; align-items: center; }
.cec-lead-form[data-state="submitting"] .cec-lead-submit { pointer-events: none; opacity: 0.85; }

.cec-lead-status > div { display: none; padding: 0.85rem 1rem; border-radius: var(--cec-radius); }
.cec-lead-form[data-state="success"] .cec-lead-status-success {
  display: block;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.32);
}
.cec-lead-form[data-state="error"] .cec-lead-status-error {
  display: block;
  background: rgba(255, 90, 90, 0.18);
  color: #ffe2e2;
  border: 1px solid rgba(255, 90, 90, 0.45);
}
/* Cuando el form se enviÓ con éxito, ocultamos los inputs y el submit */
.cec-lead-form[data-state="success"] .row,
.cec-lead-form[data-state="success"] .d-flex.flex-wrap { display: none !important; }

/* Divisor entre CTA y footer — gradiente brand */
.cec-cta-footer-sep {
  height: 4px;
  background: linear-gradient(
    to right,
    #04136d 0%,
    #7c84b3 30%,
    #5d649f 50%,
    #7c84b3 70%,
    #04136d 100%
  );
}


/* ----- Footer ----- */
.cec-footer { background-color: var(--bs-primary); }
.cec-footer-divider { border-top: 1px solid rgba(255, 255, 255, 0.15); }
.cec-footer a {
  text-decoration: none;
  transition: var(--cec-transition);
}
.cec-footer a:hover {
  opacity: 0.9;
  text-decoration: underline;
}

/* Tokens tipográficos del footer */
.cec-footer-brand       { font-size: 0.95rem; line-height: 1.2; }
.cec-footer-brand-sub   { font-size: 0.72rem; color: rgba(255, 255, 255, 0.6); }
.cec-footer-copy-text   { color: rgba(255, 255, 255, 0.65); font-size: 0.84rem; line-height: 1.6; }
.cec-footer-heading     { font-size: 0.88rem; letter-spacing: 0.06em; text-transform: uppercase; }
.cec-footer-link        { font-size: 0.84rem; }
.cec-footer-contact     { font-size: 0.84rem; color: rgba(255, 255, 255, 0.65); }
.cec-footer-copyright   { font-size: 0.78rem; color: rgba(255, 255, 255, 0.4); }
.cec-footer-legal-link  { font-size: 0.78rem; }


/* ----- Iconos de redes sociales en círculo (utility bar + footer) ----- */
.cec-social-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.82rem;
  text-decoration: none;
  flex-shrink: 0;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cec-social-circle:hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
  transform: rotate(15deg);
}
/* Variante grande para footer */
.cec-social-circle-lg {
  width: 38px;
  height: 38px;
  font-size: 0.95rem;
}


/* ----- Botones flotantes (grupo columna derecha) ----- */
.cec-float-group {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  overflow: visible;
}


/* ----- Sticky CTA de inscripción (F4.2) -----
   Pill flotante centrada en mobile y anclada bottom-left en desktop.
   Aparece tras superar el 60% del scroll del viewport. Z-index 1040 para no
   tapar dropdowns del navbar (1030) ni botones flotantes derechos (1050). */
.cec-sticky-cta {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translate(-50%, calc(100% + 1.5rem));
  z-index: 1040;
  width: min(calc(100% - 2rem), 520px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.cec-sticky-cta.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.cec-sticky-cta-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.65rem 0.65rem 1rem;
  background: var(--bs-primary);
  color: #ffffff;
  border-radius: 999px;
  box-shadow:
    0 6px 18px rgba(4, 19, 109, 0.28),
    0 2px 4px rgba(4, 19, 109, 0.18);
}
.cec-sticky-cta-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cec-sticky-cta-text {
  font-size: 0.88rem;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
}
.cec-sticky-cta-text strong { display: inline; font-weight: 600; }
.cec-sticky-cta-sub { color: rgba(255, 255, 255, 0.78); font-weight: 500; }
.cec-sticky-cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
  color: var(--bs-primary);
}
.cec-sticky-cta-btn:hover { background: #f4f5fa; color: var(--bs-primary); }
.cec-sticky-cta-close {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cec-sticky-cta-close:hover,
.cec-sticky-cta-close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}

/* En mobile, ocultar el subtítulo y reducir padding */
@media (max-width: 575.98px) {
  .cec-sticky-cta { bottom: 1rem; }
  .cec-sticky-cta-inner { padding-left: 0.7rem; gap: 0.45rem; }
  .cec-sticky-cta-text { font-size: 0.82rem; }
}

/* Reduced motion: aparición sin transform, sólo opacity */
@media (prefers-reduced-motion: reduce) {
  .cec-sticky-cta {
    transform: translate(-50%, 0);
    transition: opacity 0.2s linear;
  }
  .cec-sticky-cta.is-visible { transform: translate(-50%, 0); }
}

/* WhatsApp flotante */
.cec-whatsapp-btn {
  width: 3.5rem;
  height: 3.5rem;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  transition: var(--cec-transition);
  text-decoration: none;
  flex-shrink: 0;
}
.cec-whatsapp-btn:hover {
  background: #1da851;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
}

/* Tooltip del WhatsApp (aparece a la izquierda en hover/focus) */
.cec-whatsapp-btn::before {
  content: 'Escribinos por WhatsApp';
  position: absolute;
  right: calc(100% + 0.75rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #1a1a2e;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.35rem 0.75rem;
  border-radius: 0.4rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-family: var(--bs-body-font-family);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.cec-whatsapp-btn::after {
  content: '';
  position: absolute;
  right: calc(100% + 0.4rem);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  border: 5px solid transparent;
  border-left-color: #1a1a2e;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.cec-whatsapp-btn:hover::before,
.cec-whatsapp-btn:focus::before,
.cec-whatsapp-btn:hover::after,
.cec-whatsapp-btn:focus::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Back to top (oculto hasta que el scroll supere el umbral) */
.cec-back-to-top {
  width: 3.5rem;
  height: 3.5rem;
  background: var(--bs-primary);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--cec-shadow-md);
  cursor: pointer;
  transition: var(--cec-transition);
  flex-shrink: 0;
  /* Oculto por defecto: opacidad 0 + pointer-events none + desplazado */
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}
.cec-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cec-back-to-top:hover {
  background: var(--cec-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--cec-shadow-lg);
}


/* ----- Accesos rápidos (cards clickeables) ----- */
.cec-acceso-card {
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  box-shadow: var(--cec-shadow-sm);
  padding: 1.25rem 0.75rem;
  text-align: center;
  text-decoration: none;
  color: #1a1a2e;
  background: #fff;
  display: block;
  transition: var(--cec-transition);
}
/* Sensación "button press preview" — lift + tinte brand + icon scale */
.cec-acceso-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--cec-shadow-md);
  color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.04);
  border-color: rgba(var(--bs-primary-rgb), 0.2);
}
.cec-acceso-card .cec-acceso-icon {
  font-size: 1.8rem;
  color: var(--bs-secondary);
  margin-bottom: 0.5rem;
  transition:
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.25s ease;
}
.cec-acceso-card:hover .cec-acceso-icon {
  transform: scale(1.12);
  color: var(--bs-primary);
}
.cec-acceso-card .cec-acceso-label {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}


/* ----- Carousel custom bullets ----- */
.carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  background-color: transparent;
}
.carousel-indicators .active {
  background-color: #fff;
  border-color: #fff;
}


/* ----- Sistema de slots de imagen (media) -----
   Patrón único para secciones con imagen:
     <figure class="cec-media cec-media--MOD">
       <img src="..." alt="..." width="..." height="..." loading="lazy">
     </figure>

   Modificadores actuales:
     .cec-media--nivel      → tarjetas de Nivel Educativo (16:10, ~210px alto)
     .cec-media--noticia    → tarjetas de Noticia (16:10, ~220px alto)
     .cec-media--bienvenida → imagen grande de bienvenida (4:3 fluido)

   Los placeholders actuales son SVG en assets/images/. Para reemplazar por
   fotos reales, basta con sustituir el archivo (mismo path o cambiando
   extensión .svg → .jpg/.webp en el <img src>).
*/
.cec-media {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #e6e8f3 0%, #cccee0 100%);
}
.cec-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Niveles y Noticias: altura fija para mantener armonía de grid */
.cec-media--nivel,
.cec-media--noticia {
  aspect-ratio: 16 / 10;
}
.cec-media--nivel    > img { min-height: 210px; }
.cec-media--noticia  > img { min-height: 220px; }

/* Bienvenida: imagen grande institucional (4:3 fluido) */
.cec-media--bienvenida {
  aspect-ratio: 4 / 3;
}
.cec-media--bienvenida > img {
  min-height: 320px;
}


/* ----- Testimonios (F3.1) -----
   Carrusel Bootstrap con avatares de iniciales sobre círculo brand. Cuando el
   cliente provea fotos, basta con cambiar el `<span class="cec-testi-avatar">`
   por un `<img class="cec-testi-avatar">` — el wrapper ya está dimensionado. */
.cec-testi-carousel { position: relative; }
.cec-testi-card {
  background: #ffffff;
  border: var(--cec-border);
  border-radius: var(--cec-radius-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
  position: relative;
  box-shadow:
    0 1px 2px rgba(4, 19, 109, 0.05),
    0 6px 18px rgba(4, 19, 109, 0.06);
}
.cec-testi-quote-icon {
  font-size: 1.75rem;
  color: var(--bs-tertiary);
  opacity: 0.55;
  margin-bottom: 0.75rem;
}
.cec-testi-text {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.6;
  color: var(--bs-primary);
  font-weight: 500;
  margin: 0 0 1.5rem 0;
  font-style: italic;
}
.cec-testi-author {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
}
/* El avatar es un wrapper común para `<span>` (iniciales) o `<img>` (foto real) */
.cec-testi-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  object-fit: cover;
}
.cec-testi-meta { display: flex; flex-direction: column; line-height: 1.25; }
.cec-testi-name { font-weight: 600; color: var(--bs-primary); font-size: 0.95rem; }
.cec-testi-role { font-size: 0.82rem; color: var(--bs-secondary); }

.cec-testi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
}
.cec-testi-control {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--cec-border-color);
  background: #ffffff;
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--cec-transition);
}
.cec-testi-control:hover,
.cec-testi-control:focus-visible {
  background: var(--bs-primary);
  color: #ffffff;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(4, 19, 109, 0.18);
}
.cec-testi-indicators { gap: 0.4rem; }
.cec-testi-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--bs-tertiary);
  opacity: 0.45;
  border: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.cec-testi-indicators [data-bs-target].active {
  background-color: var(--bs-primary);
  opacity: 1;
}


/* ----- FAQ accordion (F3.2) -----
   Versión brand del accordion de Bootstrap: borde institucional, focus en azul,
   header activo con tinte light-soft. Mantiene a11y nativo del componente. */
.cec-faq-accordion .accordion-item {
  border: 1px solid var(--cec-border-color);
  border-radius: var(--cec-radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  background: #ffffff;
}
.cec-faq-accordion .accordion-item:last-child { margin-bottom: 0; }
.cec-faq-accordion .accordion-button {
  font-weight: 600;
  color: var(--bs-primary);
  background: #ffffff;
  border-radius: 0;
  padding: 1rem 1.25rem;
}
.cec-faq-accordion .accordion-button:not(.collapsed) {
  color: var(--bs-primary);
  background: var(--bs-light);
  box-shadow: inset 0 -1px 0 var(--cec-border-color);
}
.cec-faq-accordion .accordion-button:focus {
  box-shadow: 0 0 0 0.2rem rgba(4, 19, 109, 0.18);
  border-color: var(--bs-primary);
}
.cec-faq-accordion .accordion-button::after {
  filter: invert(11%) sepia(81%) saturate(4326%) hue-rotate(232deg) brightness(74%) contrast(108%);
}
.cec-faq-accordion .accordion-body {
  color: var(--bs-secondary);
  line-height: 1.6;
  font-size: 0.95rem;
  padding: 0 1.25rem 1.1rem;
}


/* ----- Logo de marca -----
   .cec-logo-mark  → fallback textual con gradiente (heredado)
   .cec-logo-img   → slot para archivo real (SVG/PNG del cliente)
*/
.cec-logo-mark {
  width: 46px;
  height: 46px;
  border-radius: var(--cec-radius);
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}
.cec-logo-mark--sm {
  width: 40px;
  height: 40px;
  font-size: 0.9rem;
  background: rgba(255, 255, 255, 0.15);
}

/* Logo como imagen — height fija + width:auto + object-fit contain evitan distorsión */
.cec-logo-img {
  height: 46px;
  width: auto;
  max-width: 200px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.cec-logo-img--sm {
  height: 40px;
  max-width: 170px;
}
/* Logo grande en navbar (cliente usa un render alto del PNG) */
.cec-logo-img--xl {
  height: 80px;
  max-width: 260px;
}

/* F5.6 — Variante responsive del logo navbar.
   En tablet baja a 60px; en mobile a 50px y ancho máximo más estricto para que
   el lockup no compita con el botón de hamburguesa. */
@media (max-width: 991.98px) {
  .cec-logo-img--xl {
    height: 60px;
    max-width: 200px;
  }
}
@media (max-width: 575.98px) {
  .cec-logo-img--xl {
    height: 50px;
    max-width: 170px;
  }
}


/* =============================================================================
   LAYER 4 — Botones y utilidades tipográficas
   ============================================================================= */

/* ----- Botones (sistema refinado con motion + sombras brand) ----- */
.btn {
  letter-spacing: 0.02em;
  font-family: var(--bs-body-font-family);
}

.btn-primary {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  font-weight: 600;
  border-radius: var(--cec-radius);
  padding: 0.6rem 1.5rem;
  letter-spacing: 0.025em;
  box-shadow: 0 2px 8px rgba(4, 19, 109, 0.25);
  transition: var(--cec-transition);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cec-primary-hover);
  border-color: var(--cec-primary-hover);
  box-shadow: 0 4px 14px rgba(4, 19, 109, 0.35);
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--bs-primary);
  border-color: var(--bs-primary);
  border-width: 1.5px;
  font-weight: 600;
  border-radius: var(--cec-radius);
  padding: 0.6rem 1.5rem;
  letter-spacing: 0.025em;
  transition: var(--cec-transition);
}
.btn-outline-primary:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
  box-shadow: 0 4px 14px rgba(4, 19, 109, 0.25);
  transform: translateY(-1px);
}

/* Botón CTA admisión en navbar (padding propio que le gana al override global) */
.btn-cta-admission {
  background: linear-gradient(135deg, var(--bs-primary) 0%, #1a2e8a 100%);
  color: #fff !important;
  border: none;
  border-radius: var(--cec-radius);
  font-weight: 600;
  font-size: 0.84rem;
  padding: 0.45rem 1.1rem !important;
  letter-spacing: 0.03em;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(4, 19, 109, 0.3);
  transition: var(--cec-transition);
  white-space: nowrap;
}
.btn-cta-admission:hover {
  background: linear-gradient(135deg, #1a2e8a 0%, var(--cec-primary-hover) 100%);
  color: #fff !important;
  box-shadow: 0 4px 16px rgba(4, 19, 109, 0.4);
  transform: translateY(-1px);
}

/* Botones con flecha animada (.btn-arrow > .btn-arrow-icon) */
.btn-arrow .btn-arrow-icon {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-arrow:hover .btn-arrow-icon { transform: translateX(4px); }

/* Botón outline-light refinado (hero / CTA admisión) */
.btn-outline-light {
  border-width: 1.5px;
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: var(--cec-transition);
}
.btn-outline-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 255, 255, 0.15);
}

/* Botón light (hero / CTA) */
.btn-light {
  font-weight: 600;
  letter-spacing: 0.025em;
  transition: var(--cec-transition);
}
.btn-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ----- Botones específicos del hero -----
   Tamaño propio que no hereda del override global de .btn. */
.cec-hero-content .btn {
  font-size: 0.9rem;
  padding: 0.55rem 1.2rem !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Hero primario: sólido blanco */
.cec-hero-content .btn-light {
  background: #fff;
  color: var(--bs-primary);
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.cec-hero-content .btn-light:hover {
  background: #e8eaf6;
  color: var(--bs-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
  transform: translateY(-1px);
}
/* Hero secundario: frosted glass */
.cec-btn-hero-secondary {
  background: rgba(255, 255, 255, 0.14);
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: #fff !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cec-btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 0.24);
  border-color: rgba(255, 255, 255, 0.85);
  color: #fff !important;
  transform: translateY(-1px);
}
/* Hero terciario: sólo borde */
.cec-hero-content .btn-outline-light {
  border-width: 1.5px;
  color: rgba(255, 255, 255, 0.88) !important;
}
.cec-hero-content .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff !important;
  transform: translateY(-1px);
}


/* ----- Utilidades (tipografía + fondo suave + tokens) ----- */
.cec-text-balance { text-wrap: balance; }
.cec-bg-light-soft { background-color: #f4f5fb; }
.letter-spacing    { letter-spacing: 0.08em; }
.cec-text-brand    { color: var(--bs-primary); }
.cec-text-accent   { color: var(--bs-tertiary); }

/* Escala tipográfica (tokens reutilizables) */
.cec-fs-xs { font-size: 0.72rem; }
.cec-fs-sm { font-size: 0.78rem; }
.cec-fs-md { font-size: 0.84rem; }
.cec-fs-lg { font-size: 1.05rem; }
.cec-fs-xl { font-size: 1.1rem; }

/* CTA final — tipografía específica del H2 full-width */
.cec-h2-cta { font-size: clamp(1.6rem, 3vw, 2.4rem); }
.cec-cta-lead { opacity: 0.88; font-size: 1.05rem; }
.cec-cta-sub  { opacity: 0.7;  font-size: 0.9rem;  }

/* Badge soft (fondo light + texto brand) */
.cec-badge-soft {
  background: var(--bs-light);
  color: var(--bs-primary);
}
.cec-badge-soft--muted { color: var(--bs-secondary); }

/* ----- Meta-data de noticias (F5.5) -----
   Badge de categoría saturado dentro de la paleta monocromática + fecha con
   icono y un separador discreto. Las 3 categorías (Académico · Vida Escolar ·
   Pastoral) usan tonos del mismo azul para mantener coherencia con el logo. */
.cec-badge-news {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.cec-badge-news--academico {
  background: var(--bs-primary);
  color: #ffffff;
}
.cec-badge-news--vida {
  background: rgba(4, 19, 109, 0.12);
  color: var(--bs-primary);
  border-color: rgba(4, 19, 109, 0.18);
}
.cec-badge-news--pastoral {
  background: rgba(124, 132, 179, 0.18);
  color: var(--bs-primary);
  border-color: rgba(124, 132, 179, 0.35);
}

.cec-news-meta-sep {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bs-tertiary);
  flex-shrink: 0;
}
.cec-news-date {
  color: var(--bs-secondary);
  font-size: 0.78rem;
  font-weight: 500;
}

/* Enlace "botón link" con color brand */
.cec-btn-brand-link { color: var(--bs-primary); }

/* ----- Estado "próximamente" (F5.7) -----
   Aplicado a links que aún no tienen destino real (mapa de sitio pendiente,
   redes sociales sin URL, contenido legal por redactar). Comunica el estado
   al usuario y al lector de pantalla sin ocultar el ítem. */
a[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}
a[aria-disabled="true"]:hover { opacity: 0.75; }

/* Padding vertical por tipo de sección */
.cec-py-compact { padding-top: var(--cec-py-compact); padding-bottom: var(--cec-py-compact); }
.cec-py-normal  { padding-top: var(--cec-py-normal);  padding-bottom: var(--cec-py-normal); }
.cec-py-relaxed { padding-top: var(--cec-py-relaxed); padding-bottom: var(--cec-py-relaxed); }


/* ----- Accesibilidad: focus visible + skip link ----- */

/* Focus visible accesible (sólo con teclado) */
:focus-visible {
  outline: 2px solid #5d649f;
  outline-offset: 2px;
}

/* Skip link (WCAG 2.4.1) — visible sólo al foco por teclado */
.cec-skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 0.75rem 1rem;
  background: var(--bs-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--cec-radius) 0;
}
.cec-skip-link:focus { color: #fff; }


/* =============================================================================
   LAYER 5 — Scroll polish (reveals, progress bar, floating shapes, hero in)
   Progressive enhancement: el estado "oculto" sólo aplica cuando <html>
   tiene la clase cec-reveals-ready (seteada por un inline script en <head>).
   Si el JS falla, el contenido queda 100% visible (fallback seguro).
   ============================================================================= */

/* Barra de progreso del scroll */
.cec-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--bs-primary), var(--bs-secondary), var(--bs-tertiary));
  z-index: 1080;
  transition: width 120ms linear;
  pointer-events: none;
}

/* Reveals (estado oculto condicionado por la clase del <html>) */
html.cec-reveals-ready .cec-reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.cec-reveals-ready .cec-reveal-up    { transform: translateY(28px); }
html.cec-reveals-ready .cec-reveal-left  { transform: translateX(-36px); }
html.cec-reveals-ready .cec-reveal-right { transform: translateX(36px); }
html.cec-reveals-ready .cec-reveal-zoom  { transform: scale(0.96); }
html.cec-reveals-ready .cec-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Navbar compacta al scrollear (blur + padding reducido) */
.navbar {
  transition:
    padding 0.25s ease,
    background-color 0.25s ease,
    backdrop-filter 0.25s ease;
}
.navbar.is-scrolled {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  background-color: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* Formas flotantes decorativas (CTA admisión) */
.cec-cta-shapes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cec-floating-shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
  animation: cec-float 22s ease-in-out infinite;
}
.cec-floating-shape--cta-1 {
  width: 420px;
  height: 420px;
  background: var(--bs-secondary);
  top: -20%;
  left: -8%;
  opacity: 0.35;
  animation-delay: 0s;
}
.cec-floating-shape--cta-2 {
  width: 340px;
  height: 340px;
  background: var(--bs-tertiary);
  bottom: -25%;
  right: -6%;
  opacity: 0.28;
  animation-delay: -10s;
}

@keyframes cec-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -25px) scale(1.08); }
  66%      { transform: translate(-30px, 20px) scale(0.94); }
}

/* ----- Entrada suave del contenido del hero por slide activo -----
   Bootstrap marca el slide activo con .active en .carousel-item.
   Al cambiar de slide la animación se re-dispara en el nuevo. */
.cec-hero-slide .cec-hero-content > .row > [class*="col-"] > * {
  opacity: 0;
}
.carousel-item.active .cec-hero-slide .cec-hero-content > .row > [class*="col-"] > * {
  animation: cec-hero-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.carousel-item.active .cec-hero-slide .cec-hero-content > .row > [class*="col-"] > *:nth-child(1) { animation-delay: 0.08s; }
.carousel-item.active .cec-hero-slide .cec-hero-content > .row > [class*="col-"] > *:nth-child(2) { animation-delay: 0.22s; }
.carousel-item.active .cec-hero-slide .cec-hero-content > .row > [class*="col-"] > *:nth-child(3) { animation-delay: 0.36s; }
.carousel-item.active .cec-hero-slide .cec-hero-content > .row > [class*="col-"] > *:nth-child(4) { animation-delay: 0.50s; }

@keyframes cec-hero-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* =============================================================================
   LAYER 6 — Responsive tweaks + prefers-reduced-motion
   ============================================================================= */

/* Ajustes móviles (<768px) */
@media (max-width: 767.98px) {
  .cec-hero        { min-height: 60vh; }
  .cec-hero-slide  { min-height: 60vh; }
  .cec-h1          { font-size: 2rem; }
  .cec-hero-content .btn {
    font-size: 0.82rem;
    padding: 0.48rem 0.9rem !important;
  }
  .cec-stats-bar .cec-stat-number { font-size: 1.8rem; }
}

/* Reduced motion (WCAG 2.3.3) — neutraliza toda animación/transición */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* =============================================================================
   LAYER 7 — Hero Video (alternativa al carrusel, usado en index-v2.html).
   Convive con `.cec-hero*` del slider — namespace BEM independiente, sin
   colisiones. Mobile-first: en <768px sólo se muestra el poster (img); el
   <video> queda display:none y su <source> nunca recibe src (ahorro de datos
   y mejor LCP). En ≥768px, JS inyecta el src y reproduce silencioso en loop.
   ============================================================================= */
.cec-hero-video {
  position: relative;
  min-height: 60vh;              /* mobile baseline */
  overflow: hidden;
  background-color: #0d1b5e;     /* fallback institucional mientras carga el poster */
  display: flex;
  align-items: center;
}

.cec-hero-video__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cec-hero-video__poster,
.cec-hero-video__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El <video> queda por encima del poster en todos los breakpoints — el poster
   actúa como fallback visual mientras carga, y como reemplazo si autoplay
   falla o si prefers-reduced-motion está activo. `object-fit: cover` asegura
   que el video horizontal (16:9) llene también el viewport vertical en mobile,
   recortando lados pero sin bandas negras. */
.cec-hero-video__video { z-index: 1; }

@media (min-width: 768px) {
  .cec-hero-video { min-height: 75vh; }
}

.cec-hero-video__overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(135deg, rgba(4, 19, 109, 0.72), rgba(5, 20, 110, 0.42));
  pointer-events: none;
}

.cec-hero-video__content {
  position: relative;
  z-index: 3;
}

/* Animación de entrada — replica el patrón del slide activo del carrusel
   (mismas keyframes ya definidas: `cec-hero-in`). */
.cec-hero-video__content > .row > [class*="col-"] > * {
  opacity: 0;
  animation: cec-hero-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.cec-hero-video__content > .row > [class*="col-"] > *:nth-child(1) { animation-delay: 0.08s; }
.cec-hero-video__content > .row > [class*="col-"] > *:nth-child(2) { animation-delay: 0.22s; }
.cec-hero-video__content > .row > [class*="col-"] > *:nth-child(3) { animation-delay: 0.36s; }
.cec-hero-video__content > .row > [class*="col-"] > *:nth-child(4) { animation-delay: 0.50s; }


/* =============================================================================
   LAYER 8 — Hero Video INMERSIVO (modo página completa).
   Activado SOLO cuando <body class="cec-page-hero-video"> está presente.
   Si la clase no está, no aplica nada → index.html y cualquier otra página
   conservan su layout intacto.

   Concepto:
   - Utility bar oculta de forma permanente (la info ya está en navbar/footer/
     WhatsApp flotante; reaparecerla al scroll generaba un salto visual).
   - Navbar pasa a `position: fixed`, transparente sobre el video, y vuelve
     al estado sólido blanco automáticamente al añadirse `.is-scrolled`
     (clase que ya emite el JS — sin tocar nada del JS).
   - Hero a 100svh para llenar el viewport sin el bug de Safari iOS con 100vh.
   - Chevron animado al pie del hero como cue de scroll.
   ============================================================================= */

/* 1. Utility bar(s): ocultas en modo inmersivo. La info de contacto vive en
      el footer, el WhatsApp flotante y el navbar mismo. Sin reapariciones al
      scroll → cero saltos de layout. */
body.cec-page-hero-video .cec-utility-bar,
body.cec-page-hero-video .cec-utility-bar--mobile {
  display: none !important;
}

/* 2. Navbar fixed sobre el hero. Sobreescribe `.sticky-top` de Bootstrap.
      Default: transparente, sin sombra. Al scrollear (clase `.is-scrolled`
      que añade el JS desde >20px), retorna al estado sólido blanco. */
body.cec-page-hero-video .navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background-color: transparent !important;
  box-shadow: none !important;
  transition:
    background-color 280ms ease,
    box-shadow       280ms ease;
}
body.cec-page-hero-video .navbar.is-scrolled {
  background-color: #fff !important;
  /* La sombra ya viene de `.shadow` que añade el JS junto a `.is-scrolled`. */
}

/* 2a. Logo y links blancos sobre el video. Vuelven a su color original
       cuando el navbar gana `.is-scrolled` (cascada natural — no hace falta
       resetear nada explícitamente). */
body.cec-page-hero-video .navbar:not(.is-scrolled) .navbar-brand-text {
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
  transition: color 280ms ease, text-shadow 280ms ease;
}
body.cec-page-hero-video .navbar:not(.is-scrolled) .navbar-brand-text span {
  color: rgba(255, 255, 255, 0.85);
}
body.cec-page-hero-video .navbar:not(.is-scrolled) .nav-link {
  color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
body.cec-page-hero-video .navbar:not(.is-scrolled) .nav-link:hover,
body.cec-page-hero-video .navbar:not(.is-scrolled) .nav-link:focus {
  color: rgba(255, 255, 255, 0.85) !important;
}
body.cec-page-hero-video .navbar:not(.is-scrolled) .nav-link.cec-nav-active {
  color: #fff !important;
}
body.cec-page-hero-video .navbar:not(.is-scrolled) .nav-link.cec-nav-active::before {
  background: #fff;  /* línea inferior del activo en blanco sobre el video */
}

/* 2b. Hamburguesa (mobile) en blanco. El icono de Bootstrap es un SVG
       data-uri oscuro; lo invertimos con filter para no duplicar assets. */
body.cec-page-hero-video .navbar:not(.is-scrolled) .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}
body.cec-page-hero-video .navbar:not(.is-scrolled) .navbar-toggler-icon {
  filter: invert(1) brightness(2);
}

/* 2c. Cuando el menú mobile está expandido (collapse abierto), el fondo
       transparente deja ver el video detrás de los links → ilegible.
       Forzamos un panel sólido sólo en mobile y sólo cuando está show. */
@media (max-width: 991.98px) {
  body.cec-page-hero-video .navbar:not(.is-scrolled) .navbar-collapse.show,
  body.cec-page-hero-video .navbar:not(.is-scrolled) .navbar-collapse.collapsing {
    background-color: rgba(13, 27, 94, 0.96);
    border-radius: var(--cec-radius);
    margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    box-shadow: var(--cec-shadow-md);
  }
}

/* 3. Hero a viewport completo. svh = small viewport height (evita el salto
      del browser chrome de iOS Safari al ocultarse/mostrarse).
      `dvh` como mejora progresiva en navegadores que la soporten. */
body.cec-page-hero-video .cec-hero-video {
  min-height: 100vh;        /* fallback */
  min-height: 100svh;       /* moderno (Safari 15.4+, Chrome 108+, FF 101+) */
  align-items: center;       /* contenido centrado vertical */
}

/* 4. Overlay del video reformulado: foco oscuro arriba (legibilidad del
      navbar transparente), respiro al medio (deja respirar el video y deja
      ver el rostro/escena), refuerzo abajo (legibilidad del chevron y del
      copy si baja al tercio inferior). */
body.cec-page-hero-video .cec-hero-video__overlay {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.18) 30%,
    rgba(0, 0, 0, 0.30) 60%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* 5. Chevron de scroll — cue visual de que hay más contenido abajo.
      Se neutraliza la animación con prefers-reduced-motion (regla global
      de LAYER 6 ya lo cubre, pero lo dejamos explícito por claridad). */
.cec-hero-video__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  z-index: 4;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  pointer-events: none;
  animation: cec-scroll-cue-bounce 2.4s ease-in-out infinite;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
@keyframes cec-scroll-cue-bounce {
  0%, 100% { transform: translate(-50%, 0);   opacity: 0.55; }
  50%      { transform: translate(-50%, 10px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cec-hero-video__scroll-cue { animation: none; }
}

/* 6. Pequeño ajuste de respiración del copy en mobile: con el navbar fixed
      transparente, los headlines pueden "tocar" visualmente el área del logo.
      Pequeño padding-top mantiene jerarquía limpia. */
@media (max-width: 767.98px) {
  body.cec-page-hero-video .cec-hero-video__content {
    padding-top: 4rem;
  }
}