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

  /* ============================================================================
     MOTION VOCABULARY (Fase 1.3 · 2026-05-13)
     ============================================================================ */
  --cec-dur-instant:     100ms;
  --cec-dur-fast:        200ms;
  --cec-dur-base:        350ms;
  --cec-dur-slow:        600ms;
  --cec-dur-page:        700ms;

  --cec-ease-out:        cubic-bezier(0.16, 1, 0.3, 1);          /* salidas elegantes (reveals) */
  --cec-ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);           /* genérico symmetric */
  --cec-ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);      /* rebote sutil (íconos, badges) */
  --cec-ease-elegant:    cubic-bezier(0.7, 0, 0.3, 1);           /* sigmoide marcada (CTAs) */

  /* Transición estándar (mantenida por compat — usa nuevos tokens) */
  --cec-transition:      all var(--cec-dur-base) var(--cec-ease-in-out);

  /* ============================================================================
     SISTEMA TIPOGRÁFICO (Fase 1.2 · 2026-05-13)
     Display = Fraunces (serif). Body = Montserrat (sans). Mono opcional para code.
     ============================================================================ */
  --cec-font-display:    'Fraunces', Georgia, 'Times New Roman', serif;
  --cec-font-body:       'Montserrat', system-ui, -apple-system, sans-serif;

  /* Escala fluida con clamp(min, ideal, max) — mobile-first crecimiento progresivo */
  --cec-text-xs:    clamp(0.72rem, 0.7rem + 0.10vw, 0.78rem);
  --cec-text-sm:    clamp(0.82rem, 0.8rem + 0.12vw, 0.90rem);
  --cec-text-base:  clamp(1.00rem, 0.95rem + 0.20vw, 1.05rem);
  --cec-text-lg:    clamp(1.10rem, 1.05rem + 0.25vw, 1.20rem);
  --cec-text-xl:    clamp(1.25rem, 1.15rem + 0.40vw, 1.40rem);
  --cec-text-2xl:   clamp(1.50rem, 1.35rem + 0.60vw, 1.75rem);
  --cec-text-3xl:   clamp(1.85rem, 1.60rem + 1.10vw, 2.40rem);
  --cec-text-4xl:   clamp(2.25rem, 1.90rem + 1.60vw, 3.00rem);
  --cec-text-5xl:   clamp(2.75rem, 2.20rem + 2.40vw, 4.00rem);

  /* Tracking (letter-spacing) */
  --cec-tracking-tight:  -0.02em;
  --cec-tracking-normal:  0;
  --cec-tracking-wide:    0.05em;
  --cec-tracking-wider:   0.10em;

  /* Leading (line-height) */
  --cec-leading-tight:    1.15;
  --cec-leading-snug:     1.30;
  --cec-leading-normal:   1.50;
  --cec-leading-relaxed:  1.65;

  /* Tipografía base (override Bootstrap) */
  --bs-body-font-family: var(--cec-font-body);
  --bs-body-font-size:   var(--cec-text-base);
  --bs-body-line-height: var(--cec-leading-normal);

  /* 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 en serif Fraunces (display).
   H3/H4/H5/H6 quedan en Montserrat (sans) porque suelen usarse en cards
   pequeños donde el serif decorativo se ve forzado.
   Para títulos de card que quieran serif explícito, usar .cec-display.
   Para títulos H2 internos de card que quieran sans, usar .cec-text-sans. */
h1, h2 {
  font-family: var(--cec-font-display);
  font-weight: 700;
  line-height: var(--cec-leading-tight);
  letter-spacing: var(--cec-tracking-tight);
}
h3 {
  font-family: var(--cec-font-body);
  font-weight: 700;
  line-height: var(--cec-leading-snug);
}
h4, h5, h6 {
  font-family: var(--cec-font-body);
  font-weight: 600;
  line-height: var(--cec-leading-snug);
}

/* Override explícito: clases utilitarias para forzar familia */
.cec-text-serif { font-family: var(--cec-font-display); }
.cec-text-sans  { font-family: var(--cec-font-body); }

/* Escala custom (mantenida — usada por hero y carrusel) */
.cec-h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-family: var(--cec-font-display);
  letter-spacing: var(--cec-tracking-tight);
}


/* ----- 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: underline animado con efecto "ink spread" — Fase 2.4.
   ::before evita conflicto con el caret ::after de Bootstrap en dropdown-toggle.
   En reposo el underline está colapsado al centro (width 0); en hover/focus/active
   se expande hacia los costados con easing elegant. */
@media (min-width: 992px) {
  .navbar .nav-link:not(.btn-cta-admission) {
    position: relative;
  }
  .navbar .nav-link:not(.btn-cta-admission)::before {
    content: '';
    position: absolute;
    bottom: 0.2rem;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--bs-primary);
    border-radius: 1px;
    transition:
      width var(--cec-dur-base) var(--cec-ease-elegant),
      left var(--cec-dur-base) var(--cec-ease-elegant);
  }
  .navbar .nav-link:hover:not(.btn-cta-admission)::before,
  .navbar .nav-link:focus-visible:not(.btn-cta-admission)::before,
  .navbar .nav-link.cec-nav-active::before,
  .navbar .nav-item.show .nav-link.dropdown-toggle::before {
    width: calc(100% - 1.5rem);
    left: 0.75rem;
  }
}

/* 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 base (compat) */
.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: background var(--cec-dur-fast) var(--cec-ease-out),
              color var(--cec-dur-fast) var(--cec-ease-out);
}
.navbar .dropdown-item:hover {
  background-color: #f0f1f8;
  color: var(--bs-primary);
}

/* ============================================================================
   MEGA-MENÚ — FASE 2 (2026-05-13)
   ----------------------------------------------------------------------------
   Dropdown enriquecido con ícono + título + descripción por item. Se aplica
   añadiendo la clase `.cec-mega-menu` al `.dropdown-menu` y `.cec-mega-item`
   a cada `.dropdown-item`. Bootstrap sigue manejando el show/hide.
   ============================================================================ */

.navbar .dropdown-menu.cec-mega-menu {
  padding: 0.65rem;
  min-width: 320px;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.08);
  border-radius: var(--cec-radius-lg);
  box-shadow:
    0 4px 14px rgba(var(--bs-primary-rgb), 0.08),
    0 16px 40px rgba(var(--bs-primary-rgb), 0.10);
  /* Animación de entrada al hacer show */
  animation: cec-mega-in var(--cec-dur-base) var(--cec-ease-out) both;
  transform-origin: top center;
}

@media (min-width: 992px) {
  .navbar .dropdown-menu.cec-mega-menu { min-width: 360px; }
}

@keyframes cec-mega-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .navbar .dropdown-menu.cec-mega-menu { animation: none; }
}

.cec-mega-item {
  display: flex !important;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.7rem 0.85rem !important;
  border-radius: var(--cec-radius);
  text-decoration: none;
  transition:
    background var(--cec-dur-fast) var(--cec-ease-out),
    transform var(--cec-dur-fast) var(--cec-ease-out);
  white-space: normal !important;
}

.cec-mega-item:hover,
.cec-mega-item:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.06) !important;
  color: var(--bs-primary) !important;
  transform: translateX(2px);
  outline: 0;
}

.cec-mega-item-icon {
  flex-shrink: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 0.5rem;
  background: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition:
    background var(--cec-dur-fast) var(--cec-ease-spring),
    color var(--cec-dur-fast) var(--cec-ease-spring),
    transform var(--cec-dur-base) var(--cec-ease-spring);
}

.cec-mega-item:hover .cec-mega-item-icon,
.cec-mega-item:focus-visible .cec-mega-item-icon {
  background: var(--bs-primary);
  color: #fff;
  transform: scale(1.08) rotate(-3deg);
}

.cec-mega-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}

.cec-mega-item-title {
  color: var(--bs-primary);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.2;
}

.cec-mega-item-desc {
  color: var(--bs-secondary);
  font-size: 0.76rem;
  line-height: 1.4;
}

/* Estado activo del item del mega-menú (página actual) */
.cec-mega-item.active,
.cec-mega-item[aria-current="page"] {
  background: rgba(var(--bs-primary-rgb), 0.10) !important;
}
.cec-mega-item.active .cec-mega-item-icon,
.cec-mega-item[aria-current="page"] .cec-mega-item-icon {
  background: var(--bs-primary);
  color: #fff;
}

/* Header opcional del mega-menú (solo se ve si se incluye en el HTML) */
.cec-mega-header {
  padding: 0.5rem 0.85rem 0.65rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.08);
}
.cec-mega-eyebrow {
  display: block;
  color: var(--bs-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: var(--cec-tracking-wider);
  text-transform: uppercase;
}
.cec-mega-lead {
  color: var(--bs-primary);
  font-size: 0.84rem;
  margin: 0.15rem 0 0;
  font-weight: 500;
}

/* En mobile (<992px), Bootstrap colapsa el dropdown dentro del navbar mobile.
   Apretamos el padding pero mantenemos la estructura legible. */
@media (max-width: 991.98px) {
  .navbar .dropdown-menu.cec-mega-menu {
    box-shadow: none;
    border: 0;
    background: rgba(var(--bs-primary-rgb), 0.03);
    border-radius: var(--cec-radius);
    margin: 0.25rem 0 0.5rem;
    padding: 0.25rem;
    animation: none;
  }
  .cec-mega-item { padding: 0.55rem 0.75rem !important; }
  .cec-mega-item-icon { width: 1.85rem; height: 1.85rem; font-size: 0.78rem; }
  .cec-mega-item-title { font-size: 0.88rem; }
  .cec-mega-item-desc { font-size: 0.74rem; }
}


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


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


/* Acreditaciones y convenios: 4 marcas, sin carrusel.
   Entran todas en pantalla, así que Swiper era una dependencia de ~150 KB
   cargada en las 27 páginas para una sola sección. */
.cec-acreditaciones {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}
.cec-acreditaciones li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 116px;
  padding: 1rem 1.25rem;
  background: #ffffff;
  border: var(--cec-border);
  border-radius: var(--cec-radius);
}
.cec-acreditaciones img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
@media (max-width: 767.98px) {
  .cec-acreditaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .cec-acreditaciones li { height: 96px; padding: 0.75rem 1rem; }
}

/* ----- Footer -----
   Solo navegación. Los datos de contacto viven en la barra utilitaria del
   header y en /contacto: acá competían con los enlaces sin jerarquía propia. */
.cec-footer {
  background-color: var(--bs-primary);
  color: #fff;
  padding-block: 3.25rem 1.25rem;
}
.cec-footer a {
  color: rgba(255, 255, 255, 0.70);
  text-decoration: none;
  transition: color var(--cec-dur-fast) var(--cec-ease-in-out);
}
.cec-footer a:hover,
.cec-footer a:focus-visible { color: #fff; }

.cec-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
  align-items: start;
}

/* El logo es azul de marca: sobre el footer del mismo azul era ilegible.
   Se invierte a blanco sólido, que es el tratamiento estándar en fondo oscuro. */
.cec-footer-brand-col .cec-logo-img {
  display: block;
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.cec-footer-brand {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.25;
}
.cec-footer-brand-sub {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.58);
  max-width: 26ch;
}

/* Jerarquía título → enlaces.
   El título no se distingue solo por mayúsculas: es más chico, más brillante,
   más espaciado y lleva una regla debajo. Los enlaces son más grandes y más
   apagados. La inversión de tamaño es la que crea el escalón. */
.cec-footer-heading {
  margin: 0 0 0.9rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bs-light);
}
.cec-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Separación mínima entre ítems: el aire lo da el padding del enlace,
     que es lo que además le da tamaño de target táctil. */
  gap: 0.1rem;
  font-size: 0.875rem;
  line-height: 1.35;
}
.cec-footer-links li {
  position: relative;
  padding-left: 0.95rem;
}
/* Viñeta propia: la de lista no se alinea con texto multilínea */
.cec-footer-links li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bs-light);
  opacity: 0.5;
  transition: opacity var(--cec-dur-fast) var(--cec-ease-in-out),
              scale var(--cec-dur-fast) var(--cec-ease-spring);
}
.cec-footer-links a {
  display: block;
  /* 0.45rem arriba y abajo → ~33px de alto: supera el mínimo de 24x24 (WCAG 2.5.8) */
  padding-block: 0.45rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  transition: color var(--cec-dur-fast) var(--cec-ease-in-out),
              translate var(--cec-dur-fast) var(--cec-ease-out);
}
.cec-footer .cec-footer-links a:hover,
.cec-footer .cec-footer-links a:focus-visible {
  color: #fff;
  translate: 3px 0;
}
.cec-footer-links li:hover::before,
.cec-footer-links li:has(a:focus-visible)::before {
  opacity: 1;
  scale: 1.3;
}
/* Foco visible sin depender del color */
.cec-footer-links a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Móvil: targets más holgados, que es donde se tocan con el dedo */
@media (max-width: 767.98px) {
  .cec-footer-links a { padding-block: 0.55rem; }
  .cec-footer-links li::before { top: 1.05rem; }
}

/* Barra inferior */
.cec-footer-bottom {
  margin-top: 3rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  justify-content: space-between;
  align-items: center;
}
.cec-footer-copyright,
.cec-footer-legal-link {
  margin: 0;
  font-size: 0.75rem;
  /* 0.55 = 5.45:1 sobre el azul de marca. Por debajo de 0.5 no pasa AA. */
  color: rgba(255, 255, 255, 0.55);
}

/* Tablet: marca a lo ancho, 4 columnas en fila */
@media (max-width: 991.98px) {
  .cec-footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem 1.5rem;
  }
  .cec-footer-brand-col { grid-column: 1 / -1; }
  .cec-footer-brand-sub { max-width: none; }
}

/* Mobile: 2 columnas de 4 enlaces */
@media (max-width: 575.98px) {
  .cec-footer { padding-block: 2.25rem 1rem; }
  .cec-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 1.25rem;
  }
  .cec-footer-bottom { margin-top: 2rem; justify-content: flex-start; }
}


/* ----- 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;
  /* El tooltip de WhatsApp vive en este hueco: 0.5rem de separación +
     ~26px de alto + holgura. Por debajo de 3rem invade el botón de subir. */
  gap: 3.15rem;
  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.5rem 0.5rem 0.5rem 0.85rem;
  /* Superficie CLARA: el footer es del mismo azul que la marca, así que una
     píldora azul se disolvía en él al llegar al pie. Blanca, lee como objeto
     flotante sobre cualquier fondo. */
  background: #ffffff;
  color: var(--bs-primary);
  border: 1px solid rgba(4, 19, 109, 0.10);
  border-radius: 999px;
  box-shadow:
    0 12px 32px rgba(4, 19, 109, 0.22),
    0 3px 8px rgba(4, 19, 109, 0.12);
}
.cec-sticky-cta-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
}
.cec-sticky-cta-text {
  font-size: 0.88rem;
  line-height: 1.3;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--bs-primary);
}
.cec-sticky-cta-text strong { display: inline; font-weight: 700; }
.cec-sticky-cta-sub { color: rgba(4, 19, 109, 0.62); font-weight: 500; }
.cec-sticky-cta-btn {
  flex-shrink: 0;
  white-space: nowrap;
  background: var(--bs-primary);
  color: #ffffff;
  border: 0;
  padding-inline: 1rem;
}
.cec-sticky-cta-btn:hover,
.cec-sticky-cta-btn:focus-visible {
  background: var(--cec-primary-hover);
  color: #ffffff;
}
.cec-sticky-cta-close {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  border: 0;
  background: rgba(4, 19, 109, 0.07);
  color: rgba(4, 19, 109, 0.55);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  transition: background var(--cec-dur-fast) var(--cec-ease-in-out),
              color var(--cec-dur-fast) var(--cec-ease-in-out);
}
.cec-sticky-cta-close:hover,
.cec-sticky-cta-close:focus-visible {
  background: rgba(4, 19, 109, 0.14);
  color: var(--bs-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(4, 19, 109, 0.18);
}

/* Debajo de ~680px la píldora de admisión y los botones flotantes se pisan:
   la píldora se ancha hasta casi todo el viewport y el WhatsApp le queda encima.
   Se elevan los flotantes solo mientras la píldora está visible.
   Funciona con el combinador de hermanos porque el <aside> precede al grupo. */
@media (max-width: 767.98px) {
  .cec-sticky-cta.is-visible ~ .cec-float-group { bottom: 5.75rem; }
}

/* 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
   Flotación permanente + tooltip siempre visible: sin eso es un círculo verde
   más. La flotación usa `translate` y el hover usa `scale` — propiedades
   independientes, así no compiten por `transform`. */
@keyframes cec-wa-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

.cec-whatsapp-btn {
  /* Sin esto los ::before/::after se anclaban a .cec-float-group y el tooltip
     quedaba centrado entre los dos botones, no junto a este. */
  position: relative;
  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 6px 18px rgba(37, 211, 102, 0.42);
  transition: background var(--cec-dur-fast) var(--cec-ease-in-out),
              scale var(--cec-dur-fast) var(--cec-ease-spring),
              box-shadow var(--cec-dur-fast) var(--cec-ease-in-out);
  text-decoration: none;
  flex-shrink: 0;
  animation: cec-wa-float 3.2s var(--cec-ease-in-out) infinite;
}
.cec-whatsapp-btn:hover,
.cec-whatsapp-btn:focus-visible {
  background: #1da851;
  color: #fff;
  scale: 1.08;
  box-shadow: 0 10px 26px rgba(37, 211, 102, 0.55);
}

/* Halo que late, para que el botón se lea como invitación y no como adorno */
.cec-whatsapp-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.55);
  animation: cec-wa-pulse 3.2s var(--cec-ease-out) infinite;
  pointer-events: none;
}
@keyframes cec-wa-pulse {
  0%       { opacity: 0.7; scale: 1; }
  70%,100% { opacity: 0;   scale: 1.55; }
}

/* Tooltip SIEMPRE visible, encima del botón: al costado comía ancho en móvil */
.cec-whatsapp-btn::before {
  content: 'Hablemos';
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  translate: -50% 0;
  background: #ffffff;
  color: var(--bs-primary);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  pointer-events: none;
  font-family: var(--bs-body-font-family);
  box-shadow: 0 6px 18px rgba(4, 19, 109, 0.18);
  transition: background var(--cec-dur-fast) var(--cec-ease-in-out),
              color var(--cec-dur-fast) var(--cec-ease-in-out);
}
.cec-whatsapp-btn:hover::before,
.cec-whatsapp-btn:focus-visible::before {
  background: var(--bs-primary);
  color: #ffffff;
}

/* Sin movimiento: se conserva el tooltip, se quitan flotación y halo */
@media (prefers-reduced-motion: reduce) {
  .cec-whatsapp-btn         { animation: none; }
  .cec-whatsapp-btn::after  { animation: none; opacity: 0; }
}

/* Back to top (oculto hasta que el scroll supere el umbral) */
.cec-back-to-top {
  width: 3.5rem;
  height: 3.5rem;
  /* Superficie clara, igual que el CTA sticky: en azul de marca el círculo
     desaparecía sobre el footer y quedaba solo el chevron flotando. */
  background: #ffffff;
  color: var(--bs-primary);
  border: 1px solid rgba(4, 19, 109, 0.10);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 8px 24px rgba(4, 19, 109, 0.20), 0 2px 6px rgba(4, 19, 109, 0.10);
  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(--bs-primary);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(4, 19, 109, 0.28);
}


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


/* ----- Page hero (encabezado de páginas internas) — FASE 3 enriquecido -----
   Compartido por todas las páginas internas. Ahora con:
   · Patrón decorativo de fondo (líneas finas brand)
   · Círculo radial decorativo arriba-derecha (existente)
   · Animación de entrada en cascada para eyebrow/title/lead
   · Soporte para variantes: --split (imagen lateral), --accent (stat side),
     --compact (familia/herramienta). */
.cec-page-hero {
  background:
    /* Patrón de líneas diagonales muy sutil */
    repeating-linear-gradient(
      135deg,
      rgba(var(--bs-primary-rgb), 0.015) 0 1px,
      transparent 1px 24px
    ),
    linear-gradient(160deg, rgba(var(--bs-primary-rgb), 0.06) 0%, rgba(var(--bs-light-rgb), 0.55) 100%);
  border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.08);
  padding-top: var(--cec-py-relaxed);
  padding-bottom: var(--cec-py-normal);
  position: relative;
  overflow: hidden;
}

/* Halo radial superior derecho */
.cec-page-hero::after {
  content: '';
  position: absolute;
  right: -120px;
  top: -120px;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(var(--bs-primary-rgb), 0.08), rgba(var(--bs-primary-rgb), 0) 70%);
  pointer-events: none;
}

/* Halo radial inferior izquierdo (nuevo en Fase 3) */
.cec-page-hero::before {
  content: '';
  position: absolute;
  left: -180px;
  bottom: -180px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(var(--bs-secondary-rgb), 0.10), rgba(var(--bs-secondary-rgb), 0) 70%);
  pointer-events: none;
}

/* Animación de entrada en cascada para los hijos del .container del hero */
html.cec-reveals-ready .cec-page-hero .container > * {
  opacity: 0;
  animation: cec-hero-cascade var(--cec-dur-slow) var(--cec-ease-out) forwards;
}
html.cec-reveals-ready .cec-page-hero .container > *:nth-child(1) { animation-delay: 0.05s; }
html.cec-reveals-ready .cec-page-hero .container > *:nth-child(2) { animation-delay: 0.18s; }
html.cec-reveals-ready .cec-page-hero .container > *:nth-child(3) { animation-delay: 0.30s; }
html.cec-reveals-ready .cec-page-hero .container > *:nth-child(4) { animation-delay: 0.42s; }
html.cec-reveals-ready .cec-page-hero .container > *:nth-child(5) { animation-delay: 0.54s; }

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

@media (prefers-reduced-motion: reduce) {
  html.cec-reveals-ready .cec-page-hero .container > * {
    animation: none;
    opacity: 1;
  }
}

.cec-page-hero-eyebrow {
  color: var(--bs-secondary);
  font-size: var(--cec-text-xs);
  font-weight: 700;
  letter-spacing: var(--cec-tracking-wider);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.cec-page-hero-title {
  color: var(--bs-primary);
  /* Hereda font-family serif de h1 (definido en LAYER 2) */
  font-size: var(--cec-text-4xl);
  font-weight: 700;
  line-height: var(--cec-leading-tight);
  letter-spacing: var(--cec-tracking-tight);
  margin-bottom: 1rem;
}

.cec-page-hero-lead {
  color: var(--bs-secondary);
  font-size: var(--cec-text-lg);
  line-height: var(--cec-leading-relaxed);
  max-width: 680px;
  margin-bottom: 0;
}

/* Scroll cue al pie del hero (chevron animado) */
.cec-page-hero-cue {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  color: var(--bs-secondary);
  font-size: 0.85rem;
  opacity: 0.6;
  pointer-events: none;
  animation: cec-cue-bounce 2.4s ease-in-out infinite;
  animation-delay: 1.5s;
}
@keyframes cec-cue-bounce {
  0%, 100% { transform: translate(-50%, 0);   opacity: 0.4; }
  50%      { transform: translate(-50%, 6px); opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
  .cec-page-hero-cue { animation: none; }
}

/* ============================================================================
   VARIANTES DE PAGE HERO — FASE 3 (2026-05-13)
   ============================================================================ */

/* --- Variante SPLIT: imagen lateral en desktop, full-bleed mobile ---
   Uso: <section class="cec-page-hero cec-page-hero--split">
        con .row interno: col-lg-7 (texto) + col-lg-5 (imagen) */
.cec-page-hero--split .cec-page-hero-media {
  border-radius: var(--cec-radius-lg);
  overflow: hidden;
  box-shadow:
    0 10px 30px rgba(var(--bs-primary-rgb), 0.18),
    0 4px 10px rgba(var(--bs-primary-rgb), 0.10);
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  position: relative;
  transform: perspective(1200px) rotateY(-3deg);
  transition: transform var(--cec-dur-slow) var(--cec-ease-out);
}
.cec-page-hero--split .cec-page-hero-media:hover {
  transform: perspective(1200px) rotateY(-1deg);
}
.cec-page-hero--split .cec-page-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 991.98px) {
  .cec-page-hero--split .cec-page-hero-media { transform: none; margin-top: 1.5rem; }
  .cec-page-hero--split .cec-page-hero-media:hover { transform: none; }
}

/* --- Variante ACCENT: stat o dato destacado al costado ---
   Uso: con .cec-page-hero-accent block al lado del texto */
.cec-page-hero-accent {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  color: #fff;
  border-radius: var(--cec-radius-lg);
  padding: 2rem 1.75rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(var(--bs-primary-rgb), 0.22);
}
.cec-page-hero-accent::after {
  content: '';
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
}
.cec-page-hero-accent-num {
  font-family: var(--cec-font-display);
  font-size: var(--cec-text-5xl);
  font-weight: 700;
  line-height: 0.95;
  margin: 0 0 0.5rem;
  letter-spacing: var(--cec-tracking-tight);
}
.cec-page-hero-accent-label {
  font-size: var(--cec-text-sm);
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: var(--cec-tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
}
.cec-page-hero-accent-text {
  font-size: var(--cec-text-sm);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--cec-leading-relaxed);
  margin: 1rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 1rem;
}

/* --- Variante COMPACT: hero más bajo, para páginas tipo herramienta
   (familia/lista-utiles, familia/uniformes, etc.) --- */
.cec-page-hero--compact {
  padding-top: var(--cec-py-normal);
  padding-bottom: var(--cec-py-compact);
}
.cec-page-hero--compact .cec-page-hero-title {
  font-size: var(--cec-text-3xl);
}
.cec-page-hero--compact .cec-page-hero-lead {
  font-size: var(--cec-text-base);
}


/* ----- Breadcrumb (migas de pan) -----
   Patrón liviano sobre el page-hero. Item activo en color brand y peso 600. */
.cec-breadcrumb {
  font-size: 0.82rem;
  color: var(--bs-secondary);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}
.cec-breadcrumb a {
  color: var(--bs-secondary);
  text-decoration: none;
  transition: var(--cec-transition);
}
.cec-breadcrumb a:hover,
.cec-breadcrumb a:focus-visible {
  color: var(--bs-primary);
  text-decoration: underline;
}
.cec-breadcrumb-sep {
  color: var(--bs-tertiary);
  display: inline-block;
}
.cec-breadcrumb [aria-current="page"] {
  color: var(--bs-primary);
  font-weight: 600;
}


/* ----- Feature card (ícono + título + texto) -----
   Card de contenido reutilizable: variante "tarjeta de contenido completa"
   complementaria al .cec-pilar (que es más compacto). Pensada para listar
   beneficios, espacios, programas en grids 2/3 columnas. */
.cec-feature-card {
  background: #fff;
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  padding: 1.75rem 1.5rem;
  box-shadow:
    0 1px 2px rgba(4, 19, 109, 0.04),
    0 3px 10px rgba(4, 19, 109, 0.05);
  height: 100%;
  transition: var(--cec-transition);
  position: relative;
}
.cec-feature-card:hover {
  border-color: #b8bbda;
  box-shadow:
    0 2px 4px rgba(4, 19, 109, 0.06),
    0 10px 22px rgba(4, 19, 109, 0.10);
  transform: translateY(-3px);
}
.cec-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.10), rgba(var(--bs-secondary-rgb), 0.18));
  color: var(--bs-primary);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.cec-feature-title {
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.cec-feature-text {
  color: var(--bs-secondary);
  font-size: 0.93rem;
  line-height: 1.55;
  margin-bottom: 0;
}


/* ----- Timeline (historia institucional, hitos pastorales) -----
   Línea vertical con marcadores. Mobile: línea a la izquierda. Desktop:
   se mantiene a la izquierda con más aire. La variante alternada (zig-zag)
   se omite por simplicidad y por mantener la lectura en columna izquierda. */
.cec-timeline {
  position: relative;
  padding-left: 1.75rem;
  margin: 0;
  list-style: none;
}
.cec-timeline::before {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--bs-primary), var(--bs-tertiary));
  border-radius: 2px;
}
.cec-timeline-item {
  position: relative;
  padding-bottom: 2rem;
}
.cec-timeline-item:last-child { padding-bottom: 0; }
.cec-timeline-marker {
  position: absolute;
  left: -1.75rem;
  top: 0.25rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--bs-primary);
  box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.10);
}
.cec-timeline-year {
  display: inline-block;
  background: var(--bs-primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
}
.cec-timeline-title {
  color: var(--bs-primary);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.cec-timeline-text {
  color: var(--bs-secondary);
  font-size: 0.93rem;
  line-height: 1.6;
  margin-bottom: 0;
}


/* ----- Team card (autoridades, equipo pastoral, docentes) -----
   Card vertical con avatar circular, nombre, cargo y bio breve. El avatar
   acepta tanto <img> real como un <span> con iniciales (mismo wrapper). */
.cec-team-card {
  background: #fff;
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  padding: 1.75rem 1.25rem 1.5rem;
  text-align: center;
  height: 100%;
  box-shadow: var(--cec-shadow-sm);
  transition: var(--cec-transition);
}
.cec-team-card:hover {
  border-color: #b8bbda;
  box-shadow: var(--cec-shadow-md);
  transform: translateY(-3px);
}
.cec-team-avatar {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  margin: 0 auto 1rem;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  color: #fff;
  font-weight: 700;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 14px rgba(var(--bs-primary-rgb), 0.18);
}
/* Modifier xl: para el avatar del director general (perfil destacado). */
.cec-team-avatar--xl {
  width: 180px;
  height: 180px;
  font-size: 2.5rem;
}
.cec-team-name {
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}
.cec-team-role {
  color: var(--bs-secondary);
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.85rem;
}
.cec-team-bio {
  color: var(--bs-secondary);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 0;
}


/* ----- Lista de íconos (chequeo, ventajas, requisitos) -----
   Lista con bullet de ícono Font Awesome. Compartido por varias páginas. */
.cec-icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cec-icon-list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6rem 0;
  color: var(--bs-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.cec-icon-list li + li {
  border-top: 1px dashed rgba(var(--bs-primary-rgb), 0.08);
}
.cec-icon-list .cec-icon-list-mark {
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), 0.10);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  margin-top: 0.15rem;
}


/* ----- Tabla comparativa (niveles, planes, becas) -----
   Patrón: primera columna = característica; columnas siguientes = opciones.
   En mobile envolverla en `<div class="cec-compare-wrap">` para scroll horizontal. */
.cec-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -0.75rem;
  padding: 0 0.75rem;
}
.cec-compare-table {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border-radius: var(--cec-radius);
  overflow: hidden;
  box-shadow: var(--cec-shadow-sm);
}
.cec-compare-table thead th {
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  padding: 1rem 1.25rem;
  border: 0;
}
.cec-compare-table thead th:first-child {
  text-align: left;
  background: var(--bs-primary);
}
.cec-compare-table tbody th,
.cec-compare-table tbody td {
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(var(--bs-primary-rgb), 0.08);
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--bs-secondary);
  vertical-align: top;
}
.cec-compare-table tbody th {
  background: rgba(var(--bs-primary-rgb), 0.03);
  color: var(--bs-primary);
  font-weight: 600;
  text-align: left;
  width: 26%;
}
.cec-compare-table tbody td {
  text-align: center;
}
.cec-compare-table tbody tr:hover td,
.cec-compare-table tbody tr:hover th {
  background: rgba(var(--bs-primary-rgb), 0.04);
}
.cec-compare-check {
  color: var(--bs-primary);
  font-weight: 700;
}
.cec-compare-cross {
  color: var(--bs-tertiary);
  opacity: 0.6;
}


/* ----- Pathway (stepper horizontal) -----
   Visualización lineal de pasos: proceso de admisión, trayecto del egresado,
   ruta pastoral, etc. Mobile: stacked vertical. Desktop: horizontal con flecha. */
.cec-pathway {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1.5rem;
  counter-reset: pathway;
}
@media (min-width: 768px) {
  .cec-pathway {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 1rem;
  }
}
.cec-pathway-step {
  counter-increment: pathway;
  position: relative;
  background: #fff;
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  padding: 1.75rem 1.25rem 1.25rem;
  box-shadow: var(--cec-shadow-sm);
  transition: var(--cec-transition);
  text-align: center;
}
.cec-pathway-step::before {
  content: counter(pathway);
  position: absolute;
  top: -0.95rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--bs-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.25);
}
.cec-pathway-step:hover {
  transform: translateY(-3px);
  box-shadow: var(--cec-shadow-md);
  border-color: #b8bbda;
}
.cec-pathway-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), 0.10);
  color: var(--bs-primary);
  font-size: 1rem;
  margin-bottom: 0.65rem;
}
.cec-pathway-title {
  color: var(--bs-primary);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.cec-pathway-text {
  color: var(--bs-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
  margin-bottom: 0;
}
/* Flechas entre pasos (sólo desktop, no en el último) */
@media (min-width: 768px) {
  .cec-pathway-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -1.1rem;
    width: 1.2rem;
    height: 2px;
    background: var(--bs-tertiary);
    transform: translateY(-50%);
    z-index: 1;
  }
}


/* ============================================================================
   COMPONENTES TIPOGRÁFICOS — FASE 1.5 (2026-05-13)
   ----------------------------------------------------------------------------
   Variantes editoriales para enriquecer el tratamiento de texto en páginas
   con contenido largo. Todos usan los tokens definidos en :root.
   ============================================================================ */

/* Display — para títulos heroicos (hero principal, splash de sección).
   Usa serif Fraunces a tamaño grande con tracking ajustado y balance de texto. */
.cec-display {
  font-family: var(--cec-font-display);
  font-size: var(--cec-text-5xl);
  font-weight: 700;
  line-height: var(--cec-leading-tight);
  letter-spacing: var(--cec-tracking-tight);
  text-wrap: balance;
  margin: 0 0 1rem;
}
.cec-display--md { font-size: var(--cec-text-4xl); }
.cec-display--sm { font-size: var(--cec-text-3xl); }
.cec-display--italic { font-style: italic; }

/* Drop cap — primera letra grande para arranques de párrafos editoriales.
   Aplicar a <p class="cec-dropcap">. Float left, sin afectar lectura. */
.cec-dropcap::first-letter {
  float: left;
  font-family: var(--cec-font-display);
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 0.85;
  margin: 0.35rem 0.65rem 0 0;
  color: var(--bs-primary);
  padding-top: 0.15rem;
}
@media (max-width: 575.98px) {
  .cec-dropcap::first-letter { font-size: 3.5rem; margin-right: 0.5rem; }
}

/* Pull quote — cita destacada que rompe el flujo de texto largo. Estilo
   editorial: serif italic, gran tamaño, line-height generoso, sin comillas
   tipográficas (se agregan con ::before/::after).
   Uso: <blockquote class="cec-pullquote">…<footer><cite>—</cite></footer></blockquote> */
.cec-pullquote {
  font-family: var(--cec-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--cec-text-2xl);
  line-height: var(--cec-leading-snug);
  color: var(--bs-primary);
  margin: 2rem 0;
  padding: 1rem 0 1rem 1.75rem;
  border-left: 4px solid var(--bs-secondary);
  position: relative;
}
.cec-pullquote::before {
  content: '\201C';
  position: absolute;
  top: -0.5rem;
  left: 1.25rem;
  font-size: 4rem;
  color: var(--bs-light);
  font-family: var(--cec-font-display);
  line-height: 1;
  z-index: -1;
  opacity: 0.85;
}
.cec-pullquote footer {
  font-family: var(--cec-font-body);
  font-style: normal;
  font-size: var(--cec-text-sm);
  font-weight: 600;
  letter-spacing: var(--cec-tracking-wide);
  color: var(--bs-secondary);
  text-transform: uppercase;
  margin-top: 1rem;
}
.cec-pullquote cite { font-style: normal; }
@media (min-width: 768px) {
  .cec-pullquote {
    font-size: var(--cec-text-3xl);
    padding-left: 2.5rem;
    margin: 3rem 0;
  }
}

/* Eyebrows variados — pre-titulo arriba de los H2 con distintos treatments.
   El .cec-section-subtitle clásico sigue funcionando; estos son alternativas. */

/* Eyebrow con línea decorativa horizontal a la izquierda */
.cec-eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--bs-secondary);
  font-family: var(--cec-font-body);
  font-size: var(--cec-text-xs);
  font-weight: 700;
  letter-spacing: var(--cec-tracking-wider);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.cec-eyebrow-line::before {
  content: '';
  width: 2rem;
  height: 2px;
  background: var(--bs-secondary);
  border-radius: 1px;
}

/* Eyebrow numerado (01 — Texto) */
.cec-eyebrow-num {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  color: var(--bs-secondary);
  font-family: var(--cec-font-body);
  font-size: var(--cec-text-sm);
  font-weight: 600;
  letter-spacing: var(--cec-tracking-wide);
  margin-bottom: 0.85rem;
}
.cec-eyebrow-num::before {
  content: attr(data-num);
  font-family: var(--cec-font-display);
  font-size: var(--cec-text-xl);
  font-weight: 700;
  color: var(--bs-primary);
  line-height: 1;
  font-feature-settings: 'tnum' 1;
}

/* Eyebrow italic serif (decorativo, para arranques editoriales) */
.cec-eyebrow-script {
  font-family: var(--cec-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--cec-text-lg);
  color: var(--bs-secondary);
  margin-bottom: 0.5rem;
  letter-spacing: var(--cec-tracking-normal);
}

/* Lead — párrafo introductorio destacado. Más grande, más respiración. */
.cec-lead {
  font-size: var(--cec-text-lg);
  line-height: var(--cec-leading-relaxed);
  color: var(--bs-secondary);
  margin-bottom: 1.25rem;
}
.cec-lead--display {
  font-family: var(--cec-font-display);
  font-size: var(--cec-text-xl);
  font-weight: 400;
  color: var(--bs-primary);
}

/* Text-stagger — para usar con JS de reveal palabra-por-palabra (Fase 4).
   En este momento solo aplica opacity inicial; el motion se activa con clase
   .is-visible (manejada por initReveals). */
html.cec-reveals-ready .cec-text-stagger > span {
  opacity: 0;
  display: inline-block;
  transform: translateY(0.5em);
  transition:
    opacity var(--cec-dur-base) var(--cec-ease-out),
    transform var(--cec-dur-base) var(--cec-ease-out);
  transition-delay: calc(var(--stagger-i, 0) * 60ms);
}
html.cec-reveals-ready .cec-text-stagger.is-visible > span {
  opacity: 1;
  transform: translateY(0);
}

/* Caja de cita corta — variante compacta del pullquote, ideal para
   bloques laterales o footers de secciones. */
.cec-quote-card {
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.04), rgba(var(--bs-light-rgb), 0.40));
  border: var(--cec-border);
  border-left: 4px solid var(--bs-primary);
  border-radius: 0 var(--cec-radius) var(--cec-radius) 0;
  padding: 1.5rem 1.75rem;
  font-family: var(--cec-font-display);
  font-style: italic;
  font-size: var(--cec-text-lg);
  line-height: var(--cec-leading-snug);
  color: var(--bs-primary);
  position: relative;
}
.cec-quote-card-cite {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--cec-font-body);
  font-style: normal;
  font-size: var(--cec-text-xs);
  font-weight: 600;
  letter-spacing: var(--cec-tracking-wider);
  text-transform: uppercase;
  color: var(--bs-secondary);
}


/* ----- CTA estándar de página interna -----
   Variante slim del .cec-cta-admision para cerrar páginas internas sin
   reproducir el formulario completo. Usa el mismo gradiente brand. */
.cec-cta-page {
  background: linear-gradient(160deg, #050d52 0%, #071463 50%, #04136d 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cec-cta-page .cec-cta-page-eyebrow {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.cec-cta-page-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 0.85rem;
  line-height: 1.2;
}
.cec-cta-page-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto 1.75rem;
}
.cec-cta-page .btn-light {
  color: var(--bs-primary);
}
.cec-cta-page .btn-outline-light { border-width: 1.5px; }


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

/* 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>) — ampliado Fase 4 */
html.cec-reveals-ready .cec-reveal {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition:
    opacity var(--cec-dur-slow) var(--cec-ease-out),
    transform var(--cec-dur-slow) var(--cec-ease-out),
    filter var(--cec-dur-slow) var(--cec-ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
html.cec-reveals-ready .cec-reveal-up      { transform: translateY(28px); }
html.cec-reveals-ready .cec-reveal-down    { 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-zoomout { transform: scale(1.04); }
html.cec-reveals-ready .cec-reveal-blur    { filter: blur(8px); transform: translateY(12px); }
html.cec-reveals-ready .cec-reveal-curtain { transform: scaleY(0); transform-origin: top; }
html.cec-reveals-ready .cec-reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: 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; }
}

/* ============================================================================
   HOVERS DIFERENCIADOS POR TIPO DE CARD — FASE 4 (2026-05-13)
   ----------------------------------------------------------------------------
   Cada tipo de card tiene su propia firma de hover. Reemplaza el "translateY -3px
   genérico" por interacciones específicas que comunican el tipo de contenido.
   ============================================================================ */

/* cec-feature-card → tilt 3D leve siguiendo la inclinación del cursor (CSS-only
   con perspective + transform-origin). Sin JS, suficientemente sutil. */
.cec-feature-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition:
    transform var(--cec-dur-slow) var(--cec-ease-elegant),
    box-shadow var(--cec-dur-slow) var(--cec-ease-elegant),
    border-color var(--cec-dur-base) var(--cec-ease-out);
}
.cec-feature-card:hover {
  transform: translateY(-4px) rotateX(2deg) rotateY(-2deg);
  box-shadow:
    0 4px 10px rgba(var(--bs-primary-rgb), 0.06),
    0 18px 36px rgba(var(--bs-primary-rgb), 0.12);
}
.cec-feature-card .cec-feature-icon {
  transition:
    transform var(--cec-dur-base) var(--cec-ease-spring),
    background var(--cec-dur-base) var(--cec-ease-out),
    color var(--cec-dur-base) var(--cec-ease-out);
}
.cec-feature-card:hover .cec-feature-icon {
  transform: scale(1.1) rotate(-4deg);
  background: var(--bs-primary);
  color: #fff;
}

/* cec-team-card → avatar con anillo animado y card con elevación */
.cec-team-card {
  transition:
    transform var(--cec-dur-base) var(--cec-ease-elegant),
    box-shadow var(--cec-dur-base) var(--cec-ease-elegant);
}
.cec-team-avatar {
  position: relative;
  transition: transform var(--cec-dur-base) var(--cec-ease-spring);
}
.cec-team-avatar::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--bs-secondary);
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity var(--cec-dur-base) var(--cec-ease-out),
    transform var(--cec-dur-base) var(--cec-ease-spring);
}
.cec-team-card:hover .cec-team-avatar {
  transform: scale(1.04);
}
.cec-team-card:hover .cec-team-avatar::after {
  opacity: 1;
  transform: scale(1);
}

/* cec-acceso-card → press preview con icon que se "lanza" */
.cec-acceso-card .cec-acceso-icon {
  transition:
    transform var(--cec-dur-base) var(--cec-ease-spring),
    color var(--cec-dur-fast) var(--cec-ease-out);
}
.cec-acceso-card:hover .cec-acceso-icon {
  transform: scale(1.18) translateY(-2px);
}

/* cec-pilar → ícono que pulsa al hover */
.cec-pilar-icon {
  animation: cec-pilar-pulse 0s paused;
}
.cec-pilar:hover .cec-pilar-icon {
  animation: cec-pilar-pulse var(--cec-dur-slow) var(--cec-ease-elegant) both;
}
@keyframes cec-pilar-pulse {
  0%   { transform: scale(1) rotate(0); }
  35%  { transform: scale(1.18) rotate(-6deg); }
  70%  { transform: scale(0.96) rotate(2deg); }
  100% { transform: scale(1.08) rotate(-4deg); }
}

/* cec-uni-card (universidades) → glow brand sutil */
.cec-uni-card {
  position: relative;
  isolation: isolate;
}
.cec-uni-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(var(--bs-primary-rgb), 0.12), transparent 70%);
  opacity: 0;
  z-index: -1;
  transition: opacity var(--cec-dur-base) var(--cec-ease-out);
}
.cec-uni-card:hover::before { opacity: 1; }

/* cec-sport-card → barra superior crece + icon rebota */
.cec-sport-card::before {
  transition: height var(--cec-dur-base) var(--cec-ease-elegant);
}
.cec-sport-card:hover::before { height: 8px; }
.cec-sport-card .cec-sport-icon {
  transition: transform var(--cec-dur-slow) var(--cec-ease-spring);
}
.cec-sport-card:hover .cec-sport-icon {
  transform: scale(1.12) rotate(-6deg);
}


/* ============================================================================
   FILTROS ANIMADOS (galería y noticias) — FASE 4
   ----------------------------------------------------------------------------
   Cuando se cambia el filtro, los items que NO matchean hacen fade+scale out,
   los que matchean siguen visibles. CSS-only con transition (sin JS).
   ============================================================================ */
.cec-gallery-photo,
.cec-news-card-wrap {
  transition:
    opacity var(--cec-dur-base) var(--cec-ease-out),
    transform var(--cec-dur-base) var(--cec-ease-out);
}

/* Por defecto display:none oculta sin animar. Para animar bien necesitaríamos
   JS. Pero podemos al menos animar el reveal inicial con el sistema cec-reveal,
   y suavizar el cambio de filtro con un fade overlay sobre el grid. */
.cec-gallery-wrap-inner {
  transition: opacity var(--cec-dur-fast) var(--cec-ease-out);
}
.cec-gallery-wrap:has(.cec-gallery-input:focus-visible) .cec-gallery-wrap-inner {
  opacity: 0.95;
}


/* ============================================================================
   RIPPLE en CTAs primarios — FASE 4
   ----------------------------------------------------------------------------
   Efecto de onda al click sobre botones primarios. Pure CSS con ::after que se
   expande al :active. Discreto, sin JS. */
.btn-primary,
.btn-cta-admission,
.cec-cta-page .btn-light {
  position: relative;
  overflow: hidden;
}
.btn-primary::after,
.btn-cta-admission::after,
.cec-cta-page .btn-light::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition:
    width var(--cec-dur-slow) var(--cec-ease-elegant),
    height var(--cec-dur-slow) var(--cec-ease-elegant),
    opacity var(--cec-dur-slow) var(--cec-ease-elegant);
  opacity: 0;
}
.btn-primary:active::after,
.btn-cta-admission:active::after,
.cec-cta-page .btn-light:active::after {
  width: 280px;
  height: 280px;
  opacity: 1;
  transition: 0s;
}

/* Ripple invertido para botones light (background oscuro) */
.cec-cta-page .btn-light::after {
  background: rgba(var(--bs-primary-rgb), 0.20);
}


/* ============================================================================
   IMAGE PARALLAX SUTIL — FASE 4
   ----------------------------------------------------------------------------
   Ligero movimiento Y de imágenes dentro de figuras cec-media al scrollear.
   Implementado con scroll-driven animations (Chrome 115+, FF en flag),
   con fallback graceful. */
@supports (animation-timeline: scroll()) {
  .cec-media--bienvenida img,
  .cec-media--nivel img,
  .cec-media--noticia img {
    animation: cec-parallax-y linear both;
    animation-timeline: view();
    animation-range: cover;
  }
  @keyframes cec-parallax-y {
    from { transform: translateY(8%); }
    to   { transform: translateY(-8%); }
  }
  /* Reduced motion: desactiva parallax */
  @media (prefers-reduced-motion: reduce) {
    .cec-media--bienvenida img,
    .cec-media--nivel img,
    .cec-media--noticia img { animation: none; }
  }
}


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



/* =============================================================================
   LAYER 9 — LAYOUTS ASIMÉTRICOS Y ORNAMENTOS (Fase 5 · 2026-05-13)
   ============================================================================= */

/* ----- Asymmetric row -----
   Permite combinar columnas de distintos anchos rompiendo el ritmo 50/50 o 33/33/33.
   Uso: <div class="cec-asym cec-asym--6633"> con 2 hijos. */
.cec-asym {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .cec-asym--6633 { grid-template-columns: 2fr 1fr; gap: 2rem; }
  .cec-asym--3366 { grid-template-columns: 1fr 2fr; gap: 2rem; }
  .cec-asym--2575 { grid-template-columns: 1fr 3fr; gap: 2.5rem; }
  .cec-asym--7525 { grid-template-columns: 3fr 1fr; gap: 2.5rem; }
  .cec-asym--7030 { grid-template-columns: 7fr 3fr; gap: 2rem; }
}

/* ----- Ornamentos decorativos de sección -----
   Cruces, líneas y formas brand que rompen la rigidez del grid. Se posicionan
   absolute dentro de un wrapper relative + overflow:hidden. */
.cec-ornament {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.10;
  color: var(--bs-primary);
}
.cec-ornament-content { position: relative; z-index: 1; }

/* Cruz decorativa (símbolo cristiano sutil) */
.cec-ornament--cross {
  width: 180px;
  height: 180px;
}
.cec-ornament--cross::before,
.cec-ornament--cross::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 4px;
}
.cec-ornament--cross::before {
  top: 0; bottom: 0; left: 50%;
  width: 14px; transform: translateX(-50%);
}
.cec-ornament--cross::after {
  left: 0; right: 0; top: 40%;
  height: 14px;
}

/* Línea decorativa diagonal */
.cec-ornament--line {
  width: 240px;
  height: 2px;
  background: currentColor;
  transform: rotate(-25deg);
  opacity: 0.15;
}

/* Punto/círculo decorativo grande */
.cec-ornament--dot {
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: currentColor;
  filter: blur(60px);
  opacity: 0.06;
}

/* Patrón de puntos repetidos (grid pequeño) */
.cec-ornament--grid {
  width: 160px;
  height: 160px;
  background-image: radial-gradient(circle, currentColor 1.5px, transparent 1.5px);
  background-size: 16px 16px;
  opacity: 0.18;
}

/* Tres rayas finas escalonadas */
.cec-ornament--stripes {
  width: 100px;
  height: 80px;
  background:
    linear-gradient(to right, currentColor 80px, transparent 80px) 0 0 / 100% 4px no-repeat,
    linear-gradient(to right, currentColor 60px, transparent 60px) 0 16px / 100% 4px no-repeat,
    linear-gradient(to right, currentColor 100px, transparent 100px) 0 32px / 100% 4px no-repeat;
  opacity: 0.20;
}

/* Posiciones predefinidas (esquinas + bordes) */
.cec-ornament--tl { top: 1.5rem; left: 1rem; }
.cec-ornament--tr { top: 1.5rem; right: 1rem; }
.cec-ornament--bl { bottom: 1.5rem; left: 1rem; }
.cec-ornament--br { bottom: 1.5rem; right: 1rem; }
.cec-ornament--right { top: 50%; right: -40px; transform: translateY(-50%); }
.cec-ornament--left  { top: 50%; left: -40px; transform: translateY(-50%); }

/* Wrapper helper: secciones que contienen ornamentos */
.cec-section-with-ornament {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* En mobile, los ornamentos grandes se reducen o esconden */
@media (max-width: 767.98px) {
  .cec-ornament--cross,
  .cec-ornament--grid,
  .cec-ornament--stripes {
    transform: scale(0.6);
    opacity: 0.06;
  }
  .cec-ornament--right { right: -80px; }
  .cec-ornament--left  { left: -80px; }
}

/* ----- Image zigzag layout -----
   Para secciones con varios bloques imagen-texto alternados. Aplicar en el
   <div class="cec-zigzag"> con hijos <div class="cec-zigzag-item"> que tienen
   .cec-zigzag-media + .cec-zigzag-body adentro. En odd se invierte el orden. */
.cec-zigzag {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
@media (min-width: 992px) { .cec-zigzag { gap: 5rem; } }

.cec-zigzag-item {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: center;
}
@media (min-width: 768px) {
  .cec-zigzag-item {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
  /* Items impares (2.°, 4.°...) invierten orden: imagen a la derecha */
  .cec-zigzag-item:nth-child(even) .cec-zigzag-media {
    grid-column: 2;
    grid-row: 1;
  }
  .cec-zigzag-item:nth-child(even) .cec-zigzag-body {
    grid-column: 1;
    grid-row: 1;
  }
}

.cec-zigzag-media {
  border-radius: var(--cec-radius-lg);
  overflow: hidden;
  box-shadow: var(--cec-shadow-md);
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--bs-primary), var(--bs-secondary));
  transition: transform var(--cec-dur-slow) var(--cec-ease-out);
}
.cec-zigzag-media:hover { transform: scale(1.02); }
.cec-zigzag-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}


/* ----- Hover ripple para enlaces de card stretched-link -----
   Para que las cards con stretched-link tengan un visual feedback más rico.
   Aplica solo si el card tiene .cec-card-interactive. */
.cec-card-interactive {
  position: relative;
  overflow: hidden;
}
.cec-card-interactive::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--bs-primary-rgb), 0.04) 50%,
    transparent 100%
  );
  transition: left var(--cec-dur-slow) var(--cec-ease-elegant);
  pointer-events: none;
}
.cec-card-interactive:hover::after { left: 100%; }


/* =============================================================================
   LAYER 10 — RELATED CONTENT, NEWSLETTER, CTA VARIANTS (Fase 7 · 2026-05-13)
   ============================================================================= */

/* ----- Related content "Seguí explorando" -----
   Bloque de 3 cards de páginas afines, ubicado antes del CTA de cierre.
   Markup:
   <section class="cec-related">
     <div class="container">
       <p class="cec-eyebrow-line">Seguí explorando</p>
       <h2 class="cec-related-title">Te puede interesar</h2>
       <div class="cec-related-grid">
         <a class="cec-related-card" href="…">
           <span class="cec-related-card-icon"><i class="fa-solid fa-…"></i></span>
           <span class="cec-related-card-body">
             <span class="cec-related-card-eyebrow">Vida Escolar</span>
             <span class="cec-related-card-title">Pastoral y Capilla</span>
             <span class="cec-related-card-text">…</span>
           </span>
           <span class="cec-related-card-arrow"><i class="fa-solid fa-arrow-right"></i></span>
         </a>
       </div>
     </div>
   </section>
*/
.cec-related {
  padding-top: var(--cec-py-normal);
  padding-bottom: var(--cec-py-normal);
  background: rgba(var(--bs-primary-rgb), 0.02);
  border-top: 1px solid rgba(var(--bs-primary-rgb), 0.06);
}
.cec-related-title {
  color: var(--bs-primary);
  font-family: var(--cec-font-display);
  font-size: var(--cec-text-3xl);
  font-weight: 700;
  line-height: var(--cec-leading-tight);
  margin: 0 0 1.5rem;
}
.cec-related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 768px) { .cec-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cec-related-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: #fff;
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  padding: 1.25rem 1.1rem;
  text-decoration: none;
  color: inherit;
  transition:
    transform var(--cec-dur-base) var(--cec-ease-elegant),
    border-color var(--cec-dur-base) var(--cec-ease-out),
    box-shadow var(--cec-dur-base) var(--cec-ease-out);
}
.cec-related-card:hover,
.cec-related-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--bs-secondary);
  box-shadow: var(--cec-shadow-md);
  outline: 0;
}

.cec-related-card-icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.55rem;
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.10), rgba(var(--bs-secondary-rgb), 0.20));
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  transition:
    background var(--cec-dur-fast) var(--cec-ease-out),
    color var(--cec-dur-fast) var(--cec-ease-out);
}
.cec-related-card:hover .cec-related-card-icon {
  background: var(--bs-primary);
  color: #fff;
}

.cec-related-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  flex: 1;
  min-width: 0;
}
.cec-related-card-eyebrow {
  color: var(--bs-secondary);
  font-size: var(--cec-text-xs);
  font-weight: 600;
  letter-spacing: var(--cec-tracking-wide);
  text-transform: uppercase;
}
.cec-related-card-title {
  color: var(--bs-primary);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
}
.cec-related-card-text {
  color: var(--bs-secondary);
  font-size: 0.78rem;
  line-height: 1.4;
  margin-top: 0.2rem;
}

.cec-related-card-arrow {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), 0.08);
  color: var(--bs-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  transition: transform var(--cec-dur-base) var(--cec-ease-spring);
}
.cec-related-card:hover .cec-related-card-arrow {
  transform: translateX(3px);
  background: var(--bs-primary);
  color: #fff;
}


/* ----- Newsletter signup en footer (Fase 7) -----
   Mini form de captura de email para el footer. Activable agregando el bloque
   manualmente en el footer de cada página o en una sola vez en el index. */
.cec-newsletter {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--cec-radius);
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
}
.cec-newsletter-title {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin: 0 0 0.35rem;
}
.cec-newsletter-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0 0 0.85rem;
}
.cec-newsletter-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cec-newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.55rem 0.85rem;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: var(--cec-radius);
  color: #fff;
  font-size: 0.88rem;
  transition: background var(--cec-dur-fast) var(--cec-ease-out);
}
.cec-newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.cec-newsletter-form input[type="email"]:focus {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.45);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.10);
}
.cec-newsletter-form button {
  background: #fff;
  color: var(--bs-primary);
  border: 0;
  padding: 0.55rem 1.1rem;
  border-radius: var(--cec-radius);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform var(--cec-dur-fast) var(--cec-ease-spring);
}
.cec-newsletter-form button:hover { transform: scale(1.04); }


/* ----- CTA variants — alternativas al .cec-cta-page genérico ----- */

/* CTA con cita bíblica + invitación (para páginas pastorales) */
.cec-cta-verse {
  background: linear-gradient(160deg, rgba(var(--bs-primary-rgb), 0.96), rgba(var(--bs-secondary-rgb), 0.92));
  color: #fff;
  padding: var(--cec-py-relaxed) 0;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.cec-cta-verse::before {
  content: '\f02d';  /* book open icon */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 28rem;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  line-height: 1;
}
.cec-cta-verse-text {
  font-family: var(--cec-font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: var(--cec-leading-snug);
  max-width: 720px;
  margin: 0 auto 1.25rem;
  position: relative;
}
.cec-cta-verse-cite {
  display: inline-block;
  font-size: 0.85rem;
  letter-spacing: var(--cec-tracking-wider);
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  border-top: 1px solid rgba(255, 255, 255, 0.30);
  padding-top: 0.85rem;
  margin-bottom: 1.5rem;
  position: relative;
}

/* CTA con countdown (inscripciones) */
.cec-cta-countdown {
  background: linear-gradient(160deg, #050d52 0%, #04136d 100%);
  color: #fff;
  padding: var(--cec-py-relaxed) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cec-cta-countdown-eyebrow {
  font-size: 0.85rem;
  letter-spacing: var(--cec-tracking-wider);
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 0.85rem;
}
.cec-cta-countdown-title {
  font-family: var(--cec-font-display);
  font-size: var(--cec-text-4xl);
  font-weight: 700;
  line-height: var(--cec-leading-tight);
  margin: 0 0 1.5rem;
}
.cec-cta-countdown-blocks {
  display: inline-flex;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cec-cta-countdown-block {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--cec-radius);
  padding: 1rem 1.25rem;
  min-width: 86px;
}
.cec-cta-countdown-num {
  font-family: var(--cec-font-display);
  font-size: var(--cec-text-4xl);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 0.35rem;
}
.cec-cta-countdown-label {
  font-size: 0.72rem;
  letter-spacing: var(--cec-tracking-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
}

/* CTA mini-form inline (para páginas informativas) */
.cec-cta-mini {
  background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.06), rgba(var(--bs-light-rgb), 0.40));
  border: var(--cec-border);
  border-radius: var(--cec-radius-lg);
  padding: 2rem;
}
.cec-cta-mini-title {
  color: var(--bs-primary);
  font-family: var(--cec-font-display);
  font-size: var(--cec-text-2xl);
  font-weight: 700;
  margin: 0 0 0.5rem;
}
.cec-cta-mini-text {
  color: var(--bs-secondary);
  font-size: var(--cec-text-base);
  margin: 0 0 1rem;
}
.cec-cta-mini-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cec-cta-mini-form input {
  flex: 1;
  min-width: 200px;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid rgba(var(--bs-primary-rgb), 0.18);
  border-radius: var(--cec-radius);
  font-size: 0.95rem;
}
.cec-cta-mini-form input:focus {
  border-color: var(--bs-primary);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18);
}


/* ============================================================================
   COMPONENTES COMPARTIDOS (movidos desde CSS de página)
   ----------------------------------------------------------------------------
   Estos componentes se usan en MÁS DE UNA página, por lo que deben vivir en el
   CSS global. Antes estaban solo en el CSS de una página y las demás los
   usaban sin estilo (bug heredado del sitio HTML original).
     · Filtros tipo chip (galeria + noticias)  <- desde pages/vida-escolar/galeria.css
     · Tabs por área (programa + lista-utiles) <- desde pages/academico/programa.css
     · Bloque método (programa + extracurriculares)
   ============================================================================ */

/* --- Filtros tipo chip (CSS-only, radios ocultos) --- */
.cec-gallery-wrap {
  position: relative;
}

/* Radios de filtro: invisibles pero focuseables por teclado */
.cec-gallery-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Chips de filtro */
.cec-gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.cec-gallery-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  background: #fff;
  color: var(--bs-secondary);
  border: 1.5px solid rgba(var(--bs-primary-rgb), 0.12);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: var(--cec-transition);
  user-select: none;
}
.cec-gallery-filter:hover {
  border-color: var(--bs-secondary);
  color: var(--bs-primary);
}
.cec-gallery-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: rgba(var(--bs-primary-rgb), 0.10);
  color: var(--bs-primary);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Estado activo del chip (input:checked previo) */
.cec-gallery-input:checked + .cec-gallery-filter {
  background: var(--bs-primary);
  color: #fff;
  border-color: var(--bs-primary);
  box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.25);
}
.cec-gallery-input:checked + .cec-gallery-filter .cec-gallery-filter-count {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}

/* Foco visible accesible cuando se navega con teclado */
.cec-gallery-input:focus-visible + .cec-gallery-filter {
  outline: 3px solid rgba(var(--bs-secondary-rgb), 0.45);
  outline-offset: 2px;
}

/* --- Tabs por área pedagógica --- */
.cec-area-tabs.nav-tabs {
  border-bottom: 2px solid rgba(var(--bs-primary-rgb), 0.10);
  gap: 0.25rem;
  flex-wrap: wrap;
}

.cec-area-tabs .nav-link {
  border: 0;
  background: transparent;
  color: var(--bs-secondary) !important;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.7rem 1rem;
  border-radius: var(--cec-radius) var(--cec-radius) 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: var(--cec-transition);
}
.cec-area-tabs .nav-link:hover,
.cec-area-tabs .nav-link:focus-visible {
  background: rgba(var(--bs-primary-rgb), 0.06);
  color: var(--bs-primary) !important;
  outline: 0;
}
.cec-area-tabs .nav-link.active {
  background: linear-gradient(180deg, transparent 0%, rgba(var(--bs-primary-rgb), 0.06) 100%);
  color: var(--bs-primary) !important;
  border-bottom: 3px solid var(--bs-primary);
  margin-bottom: -2px;
}

.cec-area-tab-icon {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: rgba(var(--bs-primary-rgb), 0.10);
  color: var(--bs-primary);
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
}

/* Evaluación / metodología — bloque informativo */
.cec-method-block {
  background: linear-gradient(160deg, rgba(var(--bs-primary-rgb), 0.04) 0%, rgba(var(--bs-light-rgb), 0.35) 100%);
  border: var(--cec-border);
  border-radius: var(--cec-radius);
  padding: 1.5rem 1.75rem;
}