/* ==============================================
   VARIABLES GLOBALES (actualizado)
   ============================================== */
:root {
  --glass-bg:rgba(255, 255, 255, 0.626);
  --glass-brd:rgba(255, 255, 255, 0.664);
  /* —— Colores base —— */
  --color-texto: #02345f;
  --color-accent-4: #035aa7;
  --color-primary:  #0583f2;
  --color-secondary:#2ba8d9;
  --color-accent-1: #05F2DB;
  --color-accent-2: #a4bf41;
  --color-accent-3: #F2C029;
  --gray-light:   #F5F5F5;
  --gray-medium:  #ECECEC;
  --gray-dark:    #333333;

  /* —— Niveles —— */
  --guarderia:    #c4afe7;
  --preescolar:   #2ba3d1;
  --primaria:     #18af0f;
  --secundaria:   #ffa500;
  --preparatoria: #358bc6;
  --todos:        #fc5a86;

  /* —— Tipografías —— */
  --font-body: 'Arimo', sans-serif;
  /* opcional si la usas en títulos */
  --font-display: 'League Spartan', system-ui, sans-serif;

  /* —— Dimensiones y layout —— */
  --card-width:  450px;
  --card-height: 300px;
  --container-max: 1200px;
  --header-height: 72px;

  /* —— Radios y sombras —— */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --shadow-soft: 0 8px 18px rgba(0,0,0,.12);
  --shadow-1:    0 10px 30px rgba(0,0,0,.15);
  --shadow-hard: 0 14px 28px rgba(0,0,0,.18);

  /* —— Transiciones / motion —— */
  --reveal-duration: 1s;
  --transition-fast: 160ms cubic-bezier(.2,.7,.3,1);
  --transition-slow: 320ms cubic-bezier(.2,.7,.3,1);

  /* —— Hero por nivel —— */
  --hero-height-desktop: clamp(300px, 50vh, 520px);
  --hero-height-mobile:  clamp(260px, 45vh, 480px);
  /* Degradado “cortina” */
  --hero-overlay-width: 90%;
  --hero-solid-stop: 60%;
  --hero-solid-stop-mobile: 52%;
  --hero-text-color: #fff;
  --hero-gap: 1.1rem;
  --hero-content-max: 640px;

  /* —— Helpers RGB (para overlays/alpha) —— */
  --c-primary-rgb:    5,131,242;  /* #0583F2 */
  --c-secondary-rgb: 43,168,217;  /* #2BA8D9 */
  --c-accent2-rgb:  164,191,65;   /* #A4BF41 */
  --c-accent4-rgb:    3,90,167;   /* #035AA7 */

  /* —— Calendario (mantengo los tuyos) —— */
  --calendar-bg: #fff;
  --calendar-shadow: rgba(156, 93, 93, 0.08);

  /* —— Tooltip —— */
  --tooltip-bg: #555;
  --tooltip-text: #ffffff;

  /* —— Hover día calendario —— */
  --day-hover-bg: rgba(53,139,198,0.08);

  /* —— Toolbar (ej. calendario) —— */
  --toolbar-btn-bg: var(--preescolar);
  --toolbar-btn-bg-hover: #3ab6e4;
  --toolbar-btn-bg-active: #2390b4;
  --toolbar-btn-bg-disabled: #89cfe5;
  --toolbar-title-color: var(--color-texto);
}


    /* Estilos para el loader */
    #loader-wrapper {
        position: fixed; /* Se mantiene fijo en la ventana gráfica */
        z-index: 9999;   /* Asegura que esté por encima de todo */
        width: 100%;
        height: 100%;
        background: url('images/loader3.gif') no-repeat center center; /* Centra el GIF */
        background-color: #fff; /* Color de fondo para cuando no se vea el GIF */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Oculta el loader al final de la carga */
    .loader-hidden {
        display: none;
    }


/* ==============================================
   RESET BÁSICO
   ============================================== */
*{ 
  margin:0; padding:0; box-sizing:border-box; 
}
body{ 
  font-family: var(--font-body); 
}



/* ==============================================
   TEXTO TITULOS SUBTITULOS ANIMACION
   ============================================== */
.textcolor {
  display: inline-block;
  font-weight: 600;
  /* 1) Definimos un gradiente con 6 tramos (uno por letra) */
  background: linear-gradient(
    to right,
    /* color1 */ #A4BF41 0%,    #A4BF41 16.66%,
    /* color2 */ #F2C029 16.66%,#F2C029 33.33%,
    /* color3 */ #A4BF41 33.33%,#A4BF41 50%,
    /* color4 */ #F2C029 50%,  #F2C029 66.66%,
    /* repetimos para bucle suave */
                 #A4BF41 66.66%,#A4BF41 83.33%,
                 #F2C029 83.33%,#F2C029 100%
  );
  background-size: 600% 100%;    /* 6 veces el ancho para 6 “pasos” */
  /* 2) Clip al texto y ocultar fill original */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  /* 3) Animación “step” para salto por salto */
  animation: colourShift 6s steps(6) infinite;
}

.titulo{
  color: var(--color-secondary);
}

.subtitulo{
  color: var(--color-texto);
}

@keyframes colourShift {
  to {
    background-position: -600% 0;
  }
}



/* ==============================================
  FLOTANTE
   ============================================== */
/* Botón flotante */
.btn-top{
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease, transform .25s ease;
  z-index: 9998;
}

/* Estado visible */
.btn-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover/active */
.btn-top:hover{
  background:#fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-top:active{
  transform: scale(.92);
}


.whatsapp {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50%;
	text-align:center;
  font-size: 1.2rem;
	z-index:100;
  }.whatsapp:hover{
	color: #25d366;
	background-color:#FFF;
	transition: ease .5s;
}.whatsapp-icon {
	margin-top:13px;
}.float-wa{
	position:fixed;
	width:60px;
	height:60px;
	bottom:80px;
	right:15px;
	background-color:#25d366;
	color:#FFF;
	border-radius:50px;
	text-align:center;
	font-size:30px;
	z-index:100;
}.float-wa:hover{
	color: #25d366;
  background:#fff;
  border: 2px solid #25d366; /* aparece solo en hover */
}
/* ==============================================
   FIN FLOTANTE
   ============================================== */



/* ==============================================
   TOP BAR
   ============================================== */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 1rem;
  height: 40px;
  background-color: var(--gray-light);
}

.top-bar .social-links a {
  color: var(--gray-dark);
  margin-right: .75rem;
  font-size: 1;
  transition: color .2s;
}
.top-bar .social-links a:last-child { margin-right: 0; }
.top-bar .social-links a:hover { color: var(--color-accent-4); }

/* BOTON TRADUCCION */
.btn-lang {
  background: var(--color-accent-3);
  backdrop-filter: blur(10px);
  border: none;
  padding: .3rem .5rem;
  border-radius: 4px;
  color: white;
  display:flex; align-items:center; gap:.4rem;
  cursor:pointer; transition: background .2s, color .2s;
  font-size: 13px;
}
.btn-lang:hover {
  background: #e2aa02;
  color: #fff;
}
/* ==============================================
   FIN TOP BAR
   ============================================== */


   
/* ==============================================
   NAVBAR DESKTOP
   ============================================== */
.navbar {
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(25px);
  position: sticky; 
  top:0; 
  z-index:100;
  padding: 1.3rem 1rem; 
  position: sticky;
}
.navbar-content {
  display: flex;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  max-width:1200px;
  margin:0 auto;
  padding:.75rem 1rem;
}

/* LOGO */
.navbar-content .logo {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
}
.logo img {
  width: clamp(100px, 20vw, 170px);
  height: auto;
}
@media (max-width: 768px) {
.logo img {
  width: clamp(160px, 20vw, 250px);
  height: auto;
  }
}

.navbar-content .nav-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0 auto;     
}
/* ENLACES DESKTOP */
.nav-links {
  grid-column: 2;
  display: flex;           /* para que sus <li> sigan en fila */
  justify-content: center;
  list-style:none;
}
.nav-links a {
  position:relative;
  color: var(--gray-dark);
  text-decoration:none;
  padding:.2rem 0;
  transition: color .3s;
  font-size: 16px;
  font-weight: 500;
}
.nav-links a::before,
.nav-links a::after {
  content:'';
  position:absolute;
  height:2px;
  background: var(--color-accent-2);
  width:0;
  transition: width .4s ease;
  margin-top: 1.8rem;
  margin-bottom: 1.8rem;
}
.nav-links a::after { bottom:0; left:0; transform-origin:left center; }
.nav-links a::before { top:0; right:0; transform-origin:right center; }
.nav-links a:hover,
.nav-links .active a {
  color: var(--color-secondary);
}
.nav-links a:hover::after,
.nav-links .active a::after {
  color: var(--color-secondary);
  width:100%;
}
.nav-links a:hover::before,
.nav-links .active a::before {
  color: var(--color-secondary);
  width:100%;
}
/* añade también estos para cuando el <a> lleva directamente la clase active */
.nav-links a.active::after,
.nav-links a.active::before {
  color: var(--color-secondary);
  width: 100%;
}

/* y para el color */
.nav-links a.active,
.nav-links a.active:hover {
  color: var(--color-secondary);
}
/* SUBMENU DESKTOP */
.has-submenu { position:relative; }
.submenu {
  position:absolute;
  top:100%; left:0;
  background: rgba(255,255,255, .9);
  backdrop-filter: blur(15px);
  list-style:none;
  padding:.5rem 0;
  min-width:180px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  opacity:0; visibility:hidden;
  transform:translateY(-10px);
  transition:opacity .2s, transform .2s;
}
.has-submenu:hover .submenu {
  opacity:1; visibility:visible; transform:translateY(0);
}
.submenu li a {
  display:block;
  padding:.5rem 1rem;
  color:var(--gray-dark);
  text-decoration:none;
  transition:background .2s;
}
.submenu li a:hover {
  background: rgba(0,0,0,0.05);
}
.submenu li a::before,
.submenu li a::after {
  content:'';
  position:absolute;
  height:2px;
  background: var(--color-accent-2);
  width:0;
  transition: width .4s ease;
  margin-top: 2.2rem;
  margin-bottom: 2.2rem;
}

/* BOTON INSCRIPCIONES */
.btn-inscribe {  
  position: absolute;      
  top: 50%;
  right: 1rem;            /* a 1rem del borde derecho */
  transform: translateY(-50%);
  color: white;
  padding:.5rem 1rem;
  border-radius:0;
  border: 2px solid var(--color-accent-2);
  text-decoration:none;
  transition: color .3s ease;
  font-size: 16px;
  font-weight: bold;
  background-color: var(--color-accent-2);
}
.btn-inscribe::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: #849934;
  z-index: -1;
  transition: width .3s ease;
}
.btn-inscribe:hover {
  color: #fff;
}
.btn-inscribe:hover::before {
  width: 100%;
}
/* ==============================================
   FIN NAVBAR DESKTOP
   ============================================== */


/* ==============================================
   HAMBURGUESA
   ============================================== */
.hamburger {
  display:none;
  background:none; border:none;
  font-size:1.5rem; cursor:pointer;
  margin-left:1rem;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 2000; /* por encima de todo */
  color: #333333;
}
/* ==============================================
   FIN HAMBURGUESA
   ============================================== */



/* ==============================================
   MENÚ MÓVIL SLIDE-IN
   ============================================== */
.mobile-menu {
  position: fixed;
  top: 0;
  left: -100%;
  width: 75%;
  max-width: 300px;
  height: 100vh;
  /* Frosted glass: semitransparente + desenfoque */
  background: var(--gray-light);
  /* Resto de tus estilos */
  transition: left .3s ease;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 9999;
}

.mobile-menu.open {
  left:0;
}

.close-menu {
  background:none; border:none;
  font-size:1.5rem; align-self:flex-end;
  cursor:pointer;
  margin-bottom:1rem;
}

.mobile-links{
  color: var(--gray-dark);
  overflow-y: auto;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-links li {
  padding: 0.3rem 0;
  font-weight: bold;
  opacity:0; transform:translateX(-20px);
  animation:slideIn .4s forwards;
  gap: 1;
}

.mobile-links a {
  font-weight: bold;
  color: var(--gray-dark);
  text-decoration: none;
  font-size: 1.1rem;
}

.mobile-links a:hover,
.mobile-links li:hover{
  color: var(--color-secondary);
}

.mobile-links li:nth-child(1){animation-delay:.1s;}
.mobile-links li:nth-child(2){animation-delay:.2s;}
.mobile-links li:nth-child(3){animation-delay:.3s;}
.mobile-links li:nth-child(4){animation-delay:.4s;}
.mobile-links li:nth-child(5){animation-delay:.5s;}
.mobile-links li:nth-child(6){animation-delay:.6s;}
.mobile-links li:nth-child(7){animation-delay:.7s;}
.mobile-links li:nth-child(8){animation-delay:.8s;}

@keyframes slideIn {
  to { opacity:1; transform:translateX(0); }
}

/* SUBMENU MOVIL */
.mobile-item { display:flex; flex-direction:column; }
.submenu-toggle {
  font-weight: bold;
  background: none;
  border: none;
  font-size: 1rem;
  text-align: left;
  padding: 2;
  color: var(--gray-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.submenu-toggle .fa-chevron-down{
  transition: transform .2s ease;
}
.mobile-item.open .submenu-toggle .fa-chevron-down{
  transform: rotate(180deg);
}
.mobile-submenu {
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
  list-style: none;
}
.mobile-item.open .mobile-submenu {
  max-height:500px;
  height: auto;
}
.mobile-submenu li a {
  display: block;
  padding: 0.1rem 0;
  color: var(--gray-dark);
  text-decoration: none;
  transition: color .2s;
}
.mobile-submenu li a:hover {
  color: var(--color-primary);
}

/* ==============================================
   MENÚ MÓVIL FOOTER
   ============================================== */
.mobile-social-footer {
  flex-shrink: 0;    /* no se encoge */
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.1);
  margin: 0;         /* elimina márgenes extra */
}
.mobile-social-footer a {
  font-size: 1.2rem;
  color: var(--gray-dark);
  transition: color .2s;
}
.mobile-social-footer a:hover {
  color: var(--color-secondary);
}
@media (max-width: 768px) {
  /* fuerza ocultar los enlaces y el CTA */
  .nav-links,
  .btn-inscribe,
  .top-bar {
    display: none !important;
  }

/* ==============================================
   HAMBURGUESA MEDIA AJUSTE
   ============================================== */
  .hamburger {
    display: block !important;
  }
}
@media (max-width: 768px) {
  header.menu-open .logo {
    display: none;
  }
}
/* ==============================================
   MENÚ MÓVIL SLIDE-IN
   ============================================== */



/* ==========================================================================
   CARRUSEL 
   ========================================================================== */
.carrusel .carousel-item {
  position: relative;
  overflow: hidden;
}

/* Limita la altura máxima del carrusel y oculta el exceso */
.carrusel .carousel-inner {
  max-height: 450px;
  overflow: hidden;
}

/* Imagen 100% ancho + altura automática */
/* object-fit: cover recorta si hiciera falta */
.carrusel .carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

@media (max-width: 767px) {
  .carrusel .carousel-inner {
    max-height: none;  /* o pon un max-height menor, p.ej. 300px */
  }
}
/* ==========================================================================
   FIN CARRUSEL 
   ========================================================================== */



/* =========================
   HERO
   ========================= */
.hero{
  position: relative;
  overflow: hidden;
  width: 100%;
  /* altura compacta y quepa sin scroll bajo el header */
  height: min(var(--hero-height-desktop), calc(100vh - var(--header-height)));
  display: grid;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}

/* Imagen de fondo a toda área */
.hero .hero-media,
.hero .hero-media picture,
.hero .hero-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero .hero-media img{ object-fit: cover; }

/* Degradado IZQUIERDO: sólido → difuminado, cubre más de la mitad */
.hero .hero-gradient{
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: var(--hero-overlay-width);
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(var(--c-primary-rgb),  .95) 0%,
    rgba(var(--c-primary-rgb),  .95) var(--hero-solid-stop),            /* sólido */
    rgba(var(--c-secondary-rgb), .65) calc(var(--hero-solid-stop) + 8%),/* transición */
    rgba(var(--c-accent2-rgb),   .40) 78%,
    rgba(var(--c-accent2-rgb),   0)   100%                               /* difuminado */
  );
}

/* Contenido dentro del overlay */
.hero .hero-content{
  position: relative;
  z-index: 1;
  width: var(--hero-overlay-width);
  display: grid;
  align-items: center;
  padding: clamp(12px, 3vw, 28px);
  color: var(--hero-text-color);
}
.hero .hero-content-inner{
  max-width: var(--hero-content-max);
  display: grid;
  gap: var(--hero-gap);
}
.hero h1{
  margin: 0;
  color: #fff;
  font-weight: 800;
  line-height: 1.1;
  font-size: clamp(20px, 4vw, 42px); /* compacto */
  letter-spacing: .2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.hero .accent{ color: var(--color-accent-3); }

.hero p{
  margin: 0;
  color: #fff;
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.45;
  opacity: .95;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.hero .hero-btn{
  display: inline-block;
  padding: .7rem 1.05rem;
  background: var(--color-secondary);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-weight: 600;
  transition: transform .15s ease, filter .15s ease;
}
.hero .hero-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* Variante DERECHA: overlay + texto al lado derecho */
.hero.is-right .hero-gradient{
  left: auto; right: 0;
  background: linear-gradient(
    to left,
    rgba(var(--c-primary-rgb),  .95) 0%,
    rgba(var(--c-primary-rgb),  .95) var(--hero-solid-stop),
    rgba(var(--c-secondary-rgb), .65) calc(var(--hero-solid-stop) + 8%),
    rgba(var(--c-accent2-rgb),   .40) 78%,
    rgba(var(--c-accent2-rgb),   0)   100%
  );
}
.hero.is-right .hero-content{
  margin-left: auto;
  width: var(--hero-overlay-width);
}

/* Variante opcional AÚN MÁS compacta (si la usas en el HTML) */
.hero--compact{
  height: min(clamp(260px, 45vh, 480px), calc(100vh - var(--header-height)));
}

/* Responsive móvil: gradiente vertical (abajo → arriba), sigue compacto */
@media (max-width: 768px){
  .hero{
    height: min(var(--hero-height-mobile), calc(100vh - var(--header-height)));
  }
  .hero .hero-gradient{
    width: 100%;
    left: 0 !important; right: 0 !important;
    background: linear-gradient(
      to top,
      rgba(var(--c-primary-rgb),  .90) 0%,
      rgba(var(--c-primary-rgb),  .90) var(--hero-solid-stop-mobile),     /* sólido */
      rgba(var(--c-secondary-rgb), .55) calc(var(--hero-solid-stop-mobile) + 12%),
      rgba(var(--c-accent2-rgb),   0.35) 78%,
      rgba(var(--c-accent2-rgb),   0)    100%
    );
  }
  .hero .hero-content{
    width: 100%;
    place-items: center start;
    padding: 16px;
  }
  .hero .hero-content-inner{ max-width: 95%; }
}

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .hero .hero-btn{ transition: none; }
}
/* ==========================================================================
   FIN HERO 
   ========================================================================== */






/* ==========================================================================
   BARRA DE ESTADÍSTICAS
   ========================================================================== */
/* 1) Estilo para la sección completa */
.stats-section {
  background-color: white;
  padding: 0.2rem 0.2rem;             /* espacio arriba/abajo y lateral */
}
/* 2) Wrapper interior centrado y con ancho propio */
.stats-wrapper {
  max-width: 1050px;  /* o el ancho que prefieras */
  width: 100%;
  padding: 2rem 1rem 1rem 1rem;   /* respiración lateral */
  background-color: var(--color-accent-2);
  color: white;
  border-radius: 12px;
}
/* 3) Sigue usando tus .counter dentro de .stats-wrapper… */
.stats-wrapper .counter {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
  font-size: 2rem;
}
.stats-wrapper .counter.visible {
  opacity: 1;
  transform: translateY(0);
}
/* ———————————————————————————— */
/*  B) Iconos con animación “flotante” */
/* ———————————————————————————— */
.counter-icon {
  font-size: 1.5rem;
  color: white;
  display: block;
  margin: 0 auto 0.2rem;
  animation: float 1.7s ease-in-out infinite alternate;
}
@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-8px); }
}

@media (max-width: 768px) {
  .stats-wrapper {
    max-width: 1050px;  /* o el ancho que prefieras */
    width: 80%;
    background-color: var(--color-secondary);
    color: white;
    border-radius: 1rem;
  }
  .stats-wrapper .counter {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s ease, transform .6s ease;
    font-size: 1.3rem;
  }
  .position-relative > .stats-section {
    margin-top: -1rem;
    padding-top: 1rem;
  }
  .counter-icon { font-size: 1.3rem; }
  .stats-wrapper{border-radius: 40px;}
}
/* ==========================================================================
   FIN BARRA DE ESTADÍSTICAS
   ========================================================================== */



/* ==========================================================================
   EDUCATION LEVELS: TARJETAS CUADRADAS, 3x3
   ========================================================================== */
.education-levels {
  padding: 2rem 0;
  background-color: #ffffff;
  background-image: url(images/fondos/cgreen.png);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 25%;
}

/* === Cada tarjeta === */
.education-levels .level-card {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100%;
  position: relative;
  width: 100%;
  max-width: 500px;
  aspect-ratio: 1/1;
  margin: 0 auto 1rem;
  overflow: hidden;
  border-radius: 12px;
  transition: transform .3s;
}

/* — Fondo oscuro permanente — */
.education-levels .level-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
  border-radius: .8rem;
}

/* — Cortina de color en hover — */
.education-levels .level-card::after {
  content: "";
  position: absolute;
  inset: 0;
  height: 0;
  transition: height .4s ease;
  z-index: 2;
  border-radius: .8rem;
}
/* Colores según tipo */
.level-card.guarderia::after     { background: #F2C02999; }
.level-card.preescolar::after   { background: #A4BF4199; }
.level-card.primaria::after     { background: #05f0d899; }
.level-card.secundaria::after   { background: #2BA8D999; }
.level-card.preparatoria::after { background: #0583F299; }
.level-card.extendido::after    { background: #035AA799; }
/* Al hacer hover: desplegar cortina */
.education-levels .level-card:hover::after {
  height: 100%;
}

/* === Cabecera fija (icono + título) === */
.education-levels .card-header {
  border-bottom: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  padding: 2rem !important; /* ajusta según necesites */
  position: relative;
  z-index: 3;
  color: #fff;
}
.education-levels .card-icon {
  font-size: 1.5rem;
  color: #fff;
  transform: rotate();
}
.education-levels .card-title {
  font-size: 1.2rem;
  margin: 0;
  transform: rotate(-90deg);
  transform-origin: center center;
  transform-origin: right center; /* gira alrededor del centro derecho */
}

/* === Detalle oculto hasta hover === */
.education-levels .content-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  padding: 5rem 1rem 1rem;
  text-align: center;
  z-index: 4;
  transition: opacity .3s ease .2s;
  color: white;
}
.education-levels .level-card:hover .content-overlay {
  opacity: 1;
}

.education-levels .level-card:hover .card-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* 5) Y quitamos la rotación del título durante el hover */
.education-levels .level-card:hover .card-title {
  transform: rotate(0);
}

/* === Hover de la tarjeta === */
.education-levels .level-card:hover {
  transform: scale(1.02);
}

/* === Botón “relleno” dentro del detalle === */
.education-levels .content-overlay .btn {
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  background: #fff;
  color: currentColor;
  border: none;              /* quitamos el borde */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  transition: background .3s, color .3s, box-shadow .2s;
}
.education-levels .content-overlay .btn:hover {
  background: currentColor;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* === Alineación con Bootstrap row/g-4 === */
.education-levels .row {
  justify-content: center;
}

.education-levels .content-overlay i {
  margin-bottom: 1rem;  /* antes 0.5rem */
}
.education-levels .content-overlay h2 {
  margin: 0 0 1.5rem;   /* antes 0.5rem */
}
.education-levels .content-overlay p {
  margin: 0.2rem 0;    /* un poco más de separación */
  font-size: 1.25rem;
}

/* Guardería: color primario */
.level-card.guarderia .content-overlay .btn {
  color: var(--color-accent-3);
  border: 2px solid var(--color-accent-3);
  border-radius: 0%;
}.level-card.guarderia .content-overlay .btn:hover {
  color: white;
  border: 2px solid var(--color-accent-3);
  background-color: var(--color-accent-3);
  border-radius: 0%;
}

/* Preescolar: color secundario */
.level-card.preescolar .content-overlay .btn {
  color: var(--color-accent-2);
  border: 2px solid var(--color-accent-2);
  border-radius: 0%;
}.level-card.preescolar .content-overlay .btn:hover {
  color: white;
  border: 2px solid var(--color-accent-2);
  background-color: var(--color-accent-2);
  border-radius: 0%;
}

/* Primaria: accent-1 */
.level-card.primaria .content-overlay .btn {
  color: var(--color-accent-1);
  border: 2px solid var(--color-accent-1);
  border-radius: 0%;
}.level-card.primaria .content-overlay .btn:hover {
  color: white;
  border: 2px solid var(--color-accent-1);
  background-color: var(--color-accent-1);
  border-radius: 0%;
}

/* Secundaria: accent-2 */
.level-card.secundaria .content-overlay .btn {
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  border-radius: 0%;
}.level-card.secundaria .content-overlay .btn:hover {
  color: white;
  border: 2px solid var(--color-secondary);
  background-color: var(--color-secondary);
  border-radius: 0%;
}

/* Bachillerato: accent-3 */
.level-card.preparatoria .content-overlay .btn {
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 0%;
}.level-card.preparatoria .content-overlay .btn:hover {
  color: white;
  border: 2px solid var(--color-primary);
  background-color: var(--color-primary);
  border-radius: 0%;
}

/* Horario extendido: gris oscuro */
.level-card.extendido .content-overlay .btn {
  color: var(--color-accent-4);
  border: 2px solid var(--color-accent-4);
  border-radius: 0%;
}.level-card.extendido .content-overlay .btn:hover {
  color: white;
  border: 2px solid var(--color-accent-4);
  background-color: var(--color-accent-4);
  border-radius: 0%;
}

/* === 7) Animación sutil “flotante” del icono dentro de la cortina === */
@keyframes float {
  from { transform: translateY(0);}
  to   { transform: translateY(-8px);}
}

/* si quieres que siga flotando también una vez visible */
.education-levels .content-overlay i {
  animation: float 3s ease-in-out infinite alternate;
}

/* === 8) Responsive: una columna en móvil === */
@media (max-width: 767px) {
  .education-levels {
    padding: 2rem 0;
    background-color: #ffffff;
    background-image: url(images/fondos/cblue.png);
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 250%;
  }
  .education-levels .level-card {
    width: 100%;
    max-width: 300px;
  }
  .education-levels .row {
    row-gap: 0.2rem; /* separa verticalmente en móvil */
  }
  .education-levels .col-12.col-md-4 {
    margin: 0 auto;  /* centra la card */
  }
  .education-levels .content-overlay p {
    margin: 0.2rem 0;    /* un poco más de separación */
    font-size: 0.9rem;
  }
}
/* ==========================================================================
   FIN EDUCATION LEVELS: TARJETAS CUADRADAS, 3x3
   ========================================================================== */



/* ==============================================
   MODELO EDUCATIVO
   ============================================== */
.modelo-educativo {
  padding: 3rem 1rem;
  background: linear-gradient(180deg,rgba(245, 245, 245, 1) 0%, rgba(236, 236, 236, 1) 50%, rgba(255, 255, 255, 1) 100%);
  background-image: url(images/fondos/fondomap.png);
  background-repeat:no-repeat;
  background-size: cover;
  height: 100%;
  background-size:80%;
}

.edu-container {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
}

/* GRID de tarjetas izquierda */
.edu-grid {
  display: grid;
  grid-template-areas:
    "se  be"
    "do  do";
  grid-template-columns: 280px 280px;
  grid-template-rows:    280px 280px;
  gap: 1.5rem 2rem; /* fila / columna */
  justify-content: center; /* centra la grilla en su contenedor */
}

/* Asignación de áreas */
.edu-grid .se            { grid-area: se; }
.edu-grid .be            { grid-area: be; }
.edu-grid .do            { grid-area: do; }

/* 2) Tarjetas rellenan completamente cada celda */
.edu-grid .card {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: .8rem;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: transform .3s, box-shadow .3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.edu-grid .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  border: 2px solid var(--color-accent-2);
}

/* Centramos icono, título y subtítulo dentro de cada tarjeta */
.edu-grid .card-inner {
  text-align: center;
  padding: 1rem;
}

/* 3) Móvil: apilamos, pero con gap y tarjetas nunca ocupan 100% ancho */
@media (max-width: 768px) {
  .edu-grid {
    grid-template-areas:
      "se"
      "be"
      "do";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;           /* margen entre cada tarjeta */
    justify-items: center; /* centra cada tarjeta */
  }
  .edu-grid .card {
    width: 80%;          /* ocupa 80% del contenedor pero nunca todo */
    height: auto;        /* deja que la altura se ajuste al contenido */
    aspect-ratio: 1 / 1; /* sigue manteniendo forma de cuadrado */
  }
  .modelo-educativo {
    padding: 3rem 1rem;
    background: linear-gradient(180deg,rgba(245, 245, 245, 1) 0%, rgba(236, 236, 236, 1) 50%, rgba(255, 255, 255, 1) 100%);
    background-image: url(images/fondos/fondomap.png);
    background-repeat:no-repeat;
    background-position:center;
    background-size: cover;
    background-size:200%;
  }
}

/* Icono */
.card-icon {
  font-size: 2.8rem;
  color: var(--color-secondary);
  margin-bottom: .5rem;
}
/* Titulos */
.card h4 {
  font-size: 1.2rem;
  margin: .25rem 0;
  color: var(--color-texto);
  font-weight: bolder;
}
.card h5 {
  margin: 0;
  color: var(--gray-dark);
}

/* CONTENIDO DERECHA */
.edu-content {
  max-width: 480px;
  text-align: left;
}
.edu-content h2 {
  font-size: 2rem;
  margin-bottom: .5rem;
  color: var(--color-texto);
}
.edu-content h3 {
  font-weight: bolder;
  font-size: 1.3rem;
  margin-bottom: 1rem;
  font-size: 72px;
  background: linear-gradient(
    90deg,rgba(237, 221, 83, 1) 0%, 
    rgba(87, 199, 133, 1) 53%, 
    rgba(42, 123, 155, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.edu-content p {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: var(--gray-dark);
}

/* BOTÓN “RELLENO” */
.btn-fill {
  position: relative;
  display: inline-block;
  padding: .6rem 1.5rem;
  color: var(--color-accent-4);
  font-weight: bold;
  text-decoration: none;
  border: 2px solid var(--color-accent-4);
  overflow: hidden;
  transition: color .3s ease;
}
.btn-fill::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--color-accent-4);
  z-index: -1;
  transition: width .3s ease;
}
.btn-fill:hover {
  color: #fff;
}
.btn-fill:hover::before {
  width: 100%;
}

/* RESPONSIVE (móvil) */
@media (max-width: 768px) {
  .edu-container {
    flex-direction: column;
    gap: 2.5rem;
  }
  .edu-grid {
    grid-template-areas:
      "se"
      "be"
      "do";
    grid-template-columns: 1fr;
    row-gap: 1rem;
    justify-items: center;
  }
  .edu-content {
    text-align: center;
  }
  .edu-content p{
    text-align: justify;
  }
}
/* ==============================================
   FIN MODELO EDUCATIVO
   ============================================== */



/* ==============================================
   DEPORTES
   ============================================== */
  .sports-section {
    position: relative;
    padding: 4rem 1rem;
    text-align: center;
    overflow: hidden;  
    background-image: url(images/fondos/cyellow.png);
    background-repeat:no-repeat;
    background-position:center left;
    background-size:40%;
    text-transform: uppercase;
  }
  .sports-section::before,
  .sports-section::after {
    content:""; position:absolute;
    width:100px; height:100px;
    background: #A4BF414a;
    border-radius:50%;
    pointer-events:none;
  }

  .sports-section::before { top:1rem; left:1rem; }
  .sports-section::after  { bottom:1rem; right:1rem; background: #0583f24a;}

  .sports-header h2 {
    font-size:2.5rem;
    color: var(--color-primary);
    margin-bottom:.5rem;
  }
  .sports-header h4 {
    font-size:1.25rem;
    color: var(--color-secondary);
    margin-bottom:1rem;
  }
  .sports-header p {
    font-size:1rem;
    color:#555;
    max-width:600px;
    margin:0 auto 2rem;
  }

  /* ====== GRID de CARDS ====== */
  .sports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    row-gap: 1rem;         /* espacio vertical entre filas */
    justify-items: center;
    align-items: start;
    margin-top: 2rem;
  }

    .sports-grid .flip-card:nth-child(4){
     /* o 1rem si la quieres más marcada */
  }
.sports-grid .flip-card:nth-child(4) { --delay: 0.8s; }
.sports-grid .flip-card:nth-child(5) { --delay: 1.0s; }
.sports-grid .flip-card:nth-child(6) { --delay: 1.2s; }
  /* ====== FLIP CARD ====== */
  .flip-card {
    position: relative;
    width: 100%; max-width: 300px; /* ancho fijo */
    perspective: 1000px;
  }
  .flip-card-inner {
    position: relative;
    width:100%; height:0; padding-top:100%;
    transform-style: preserve-3d;
    transition: transform .6s ease;
  }
  .flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
  }
  .flip-card-front,
  .flip-card-back {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    backface-visibility:hidden;
    border-radius:.5rem;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:1.2rem;
  }
  .flip-card-front {
    background-size:cover;
    background-position:center;
  }
  .card-overlay {
    position:absolute; inset:0;
    background:rgba(0,0,0,0.4);
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
  }
  .card-overlay i {
    font-size:2.5rem; margin-bottom:.5rem;
    color:#fff;
  }
  .flip-card-back {
    background: var(--color-secondary);
    transform: rotateY(180deg);
    padding:1rem; text-align:center;
    display:flex; flex-direction:column;
    justify-content:center;
  }

  /* ====== PALANCA (botón) ====== */
  .flip-card-tab {
    border-radius: 0%;
    position:absolute;
    top: 10px; right: -40px;
    background:#fff;
    color: var(--color-primary);
    border:2px solid var(--color-primary);
    padding:.3rem .6rem;
    cursor:pointer;
    z-index:2;
    transition: background .3s, color .3s, transform .2s;
  }
  .flip-card-tab:hover {
    border-radius: 0%;
    background:currentColor;
    color:#fff;
    transform: translateY(-2px);
  }

  /* ====== SCROLL REVEAL ====== */
  .flip-card {
    opacity:0;
    transform: translateY(20px);
    transition:
      transform .6s ease var(--delay,0s),
      opacity   .6s ease var(--delay,0s);
  }
  .flip-card.visible {
    opacity:1;
    transform: translateY(0);
  }

@media (max-width: 768px) {
  .flip-card {
    /* para que cada card esté centrada en móvil */
    margin: 0 auto;
  }
  .flip-card-tab {
    /* quitamos el right absoluto */
    right: auto;
    /* lo centramos horizontalmente */
    left: 50%;
    transform: translateX(-50%);
  }
  .flip-card-tab:hover {
    /* corregimos el hover para no perder el centrado */
    transform: translate(-50%, -2px);
  }
      .sports-section {
      background-image: url(images/fondos/cyellow.png);
      background-repeat:no-repeat;
      background-position:center right;
      background-size:200%;
    }
        .flip-card {
      width: 85%; max-width: 300; /* ancho fijo */
      perspective: 1000px;
    }
        .sports-grid {
      gap:1.4rem;
    }
}

.card-football .flip-card-back,
.card-football .flip-card-tab { 
  color: white;     /* color del borde y texto de la tab */
  border-color: var(--color-secondary);
  background: var(--color-secondary); /* para el reverso */
  border: 2px solid white;
}
.card-swim .flip-card-back,
.card-swim .flip-card-tab { 
  color: white;
  border-color: var(--color-accent-2);
  background: var(--color-accent-2);
  border: 2px solid white;
}
.card-karate .flip-card-back,
.card-karate .flip-card-tab { 
  color: white;
  border-color: var(--color-accent-4);
  background: var(--color-accent-4);
  border: 2px solid white;
}
.card-gym .flip-card-back,
.card-gym .flip-card-tab { 
  color: white;
  border-color: var(--color-accent-4);
  background: var(--color-accent-4);
  border: 2px solid white;
}
.card-otro .flip-card-back,
.card-otro .flip-card-tab { 
  color: white;
  border-color: var(--color-secondary);
  background: var(--color-secondary);
  border: 2px solid white;
}
.card-otro2 .flip-card-back,
.card-otro2 .flip-card-tab { 
  color: white;
  border-color: var(--color-accent-2);
  background: var(--color-accent-2);
  border: 2px solid white;
}
/* ==============================================
   FIN DEPORTES
   ============================================== */



/* ==============================================
   SECCION VIDEO
   ============================================== */
.video-section {
  position: relative;
  /* altura mínima para que siempre se vea bien el contenido */
  background-position:center top;
  background-size:100%;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  color: #fff;
}
.video-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(images/fondos/speaker_bg.png);
  background-repeat:no-repeat;
  z-index: 0;
}
.video-section .video-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  width: 100%;
}
.video-title {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}
.video-subtitle {
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.video-text {
  font-size: 1rem;
  margin-bottom: 2rem;
  line-height: 1.4;
  margin-top: 0.2rem;
}

/* Wrapper responsive para el iframe */
.video-wrapper {
  position: relative;
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
  /* relación 16:9 */
  aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Ajustes para móvil */
@media (max-width: 768px) {
  .video-section {
    padding: 2rem 0.5rem;
  }
  .video-title {
    font-size: 2rem;
  }
  .video-subtitle {
    font-size: 1.25rem;
  }
  .video-wrapper {
    width: 90%;
  }
}

/* 1) Formas flotantes */
.video-section .float-shape {
  position: absolute;
  border-radius: 50%;
  animation: float-shape 3s ease-in-out infinite alternate;
  pointer-events: none;
}
.shape1 { width:80px; height:80px; top:10%; left:5%; 
  background: #a4bf4198;}
.shape2 { width:50px; height:50px; bottom:15%; right:10%; 
  background: #0583F283;}

/* float keyframes */
@keyframes float-shape {
  from { transform: translateY(0)   translateX(0); }
  to   { transform: translateY(-20px) translateX(10px); }
}

/* 2) Fade‐in up para texto y vídeo */
.animate {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.4s forwards ease-out;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0); }
}

/* 3) Hover sobre vídeo */
.video-wrapper {
  transition: transform .3s ease, box-shadow .3s ease;
}
.video-wrapper:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
/* ==============================================
   FIN SECCION VIDEO
   ============================================== */



/* ==============================================
   SECCION INSTAGRAM
   ============================================== */   
/* --- Sección Instagram --- */
.instagram-section {
  position: relative;
  padding: 3rem 1rem 1rem 2rem;
  background: #fff;
  overflow: hidden;
}
/* ==============================================
   FIN SECCION INSTAGRAM
   ============================================== */



/* ==============================================
   SECCION CARRUSEL PARTNER
   ============================================== */
.brand-carousel-section {
background-color: #ffffff;
background-image:  linear-gradient(#02345f1e 1px, transparent 1px), linear-gradient(to right, #02345f1e 1px, #ffffff 1px);
background-size: 20px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  /* altura fija o mínima para centrar vertical */
  min-height: 200px;
}

/* ====== Carrusel ====== */
.brand-carousel {
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
}

/* Pista de logos, en fila continua */
.brand-carousel-track {
  display: flex;
  align-items: center;
  /* anima la traslación continua */
  animation: scroll-logos 20s linear infinite;
}

/* Cada logo */
.brand-item {
  flex: 0 0 auto;
  width: 120px;       /* ajusta según necesites */
  margin: 0 2rem;     /* separación entre logos */
}
.brand-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: filter 1s;
}
.brand-item img:hover {
  filter: none;
}

/* ====== Animación ====== */
@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ====== Responsivo ====== */
@media (max-width: 768px) {
  .brand-item {
    width: 100px;
    margin: 0 .5rem;
  }
  .brand-carousel-section {
    min-height: 150px;
    padding: 1.5rem .5rem;
  }
  .brand-carousel-section {
    background-image: url(images/fondos/speaker_bg.png);
    background-repeat:no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;;
    /* altura fija o mínima para centrar vertical */
    min-height: 200px;
  }
}
/* ==============================================
   FIN SECCION CARRUSEL PARTNER
   ============================================== */



/* ==============================================
   SECCION MAPA
   ============================================== */
.map-section {
  background-image: url(images/fondos/cgreen.png);
  background-repeat:no-repeat;
  background-position:right center;
  background-size:15%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 1rem;
  background: #ffffff;
  overflow: hidden;  
}

/* Círculos decorativos */
.map-decor,
.map-decor--alt {
  content: "";
  position: absolute;
  width: 200px; height: 200px;
  background: rgba(5,131,242,0.15);
  border-radius: 50%;
  pointer-events: none;
  animation: float 6s ease-in-out infinite alternate;
}
.map-decor { top: 2rem; left: 1rem; }
.map-decor--alt { bottom: 1rem; right: 2rem; background: rgba(242, 192, 41, 0.281)}

/* Contenedor izquierdo */
.map-content {
  flex: 1 1 300px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Grid de bloques de info */
.map-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2rem;
}
.map-info-block {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.map-icon {
  font-size: 1.75rem;
  color: var(--color-primary);
  flex-shrink: 0;
}
.info-title {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 .25rem;
  color: #333;
}
.info-text {
  font-size: .95rem;
  margin: 0;
  color: var(--gray-dark);
}

/* Contenedor del mapa */
.map-embed {
  flex: 1 1 300px;
  max-width: 600px;
  width: 100%;
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  /* animación de aparición */
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.map-embed.visible {
  opacity: 1;
  transform: translateY(0);
}
.map-embed iframe {
  width: 100%;
  height: 350px;
  border: 0;
}

/* Flotación suave de círculos */
@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-20px); }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .map-section {
    flex-direction: column;
    text-align: center;
    padding: 2.5rem .5rem;
  }
  .map-info-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .map-embed iframe {
    height: 500px;
  }
}

@media (max-width: 768px) {
  /* Cada bloque pasa a columna y centra su contenido */
  .map-info-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
  }
  .map-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
  }
}
/* ==============================================
   FIN SECCION MAPA
   ============================================== */



   /* ====== FOOTER ====== */
.site-footer {
  position: relative;
  background: url('/images/en4.png') center/cover no-repeat;
  color: #fff;
  padding: 3rem 1rem;
  overflow: hidden;
}
.site-footer .footer-overlay {
  content: "";
  position: absolute;
  inset: 0;
  background: #02345fd8;
  z-index: 0;
}

/* Contenedor interno */
.site-footer .footer-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;  /* ajusta a tu gusto */
}

/* Columnas */
.footer-col {
  flex: 1 1 200px;
  min-width: 200px;
}

/* Izquierda */
.footer-left .footer-logo img {
  height: 55px;
  margin-bottom: 1rem;
}
.footer-left .footer-desc {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: #fff;
  border-radius: 50%;
  color: #666;
  font-size: 1.1rem;
  transition: background .3s ease, color .3s ease, transform .2s ease;
  text-decoration: none;
}

/* Brand colors */
.social-icon.facebook:hover   { background: #3b5998; }
.social-icon.instagram:hover  { background: #E1306C; }
.social-icon.youtube:hover    { background: #FF0000; }
.social-icon.tiktok:hover     { background: #000000; }

/* Icon turns white on hover */
.social-icon:hover i {
  color: #fff;
}

/* Initial icon color */
.social-icon i {
  color: inherit;
  transition: color .3s ease;
}

/* Slight pop on hover */
.social-icon:hover {
  transform: scale(1.1);
}

/* Centro */
.footer-center .footer-title,
.footer-right .footer-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: white;
  font-weight: bolder;
}
.footer-nav {
  list-style: none;
  padding: 0;
}
.footer-nav li + li {
  margin-top: .5rem;
}
.footer-nav a {
  color: #fff;
  text-decoration: none;
  transition: color .2s;
}
.footer-nav a:hover {
  color: #ff85b8;
}

/* Derecha */
.footer-contact {
  list-style: none;
  padding: 0;
}
.footer-contact li {
  display: flex;
  align-items: center;
  margin-bottom: .75rem;
  font-size: .95rem;
}
.footer-contact i {
  margin-right: .5rem;
  font-size: 1.1rem;
  color: var(--color-accent-2);
}

/* ====== RESPONSIVE ====== */
@media (max-width: 768px) {
  .site-footer .footer-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
  }
  .footer-center, .footer-social{
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
  }
  .footer-contact li {
    justify-content: center;
  }
}


/* NOSOTROS.HTML */
/* ===== Sección de testimonios ===== */
.testimonials-section {
  background-image: url(images/fondos/speaker_bg.png);
  background-repeat:no-repeat;
  position: relative;
  overflow: hidden;
}
.testimonials-section .section-header {
  max-width: 600px;
  margin: 0 auto 2rem;
}
.testimonials-section .section-title {
  font-size: 2.5rem;
  color: var(--color-primary);
}
.testimonials-section .section-subtitle {
  font-size: 1.1rem;
  color: var(--gray-dark);
}

/* Carrusel */
.testimonials-carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-track {
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  position: relative;
}
.testimonial-slide {
  display: none;
  padding: 0 1rem;
}
.testimonial-slide.active {
  display: block;
}

/* Botones */
.carousel-btn {
  background: rgba(0,0,0,0.05);
  border: none;
  font-size: 2rem;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  transition: background .3s, transform .2s;
}
.carousel-btn:hover {
  background: var(--color-secondary);
  color: white;
  transform: scale(1.1);
}
.carousel-btn.prev  { margin-right: 1rem; }
.carousel-btn.next  { margin-left: 1rem; }

/* Carta testimonial */
.testimonial-card {
  background: white;
  padding: 2rem 1.5rem;
  border-radius: .75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: solid 2px var(--gray-medium);
}

.testimonial-card:hover{
  border: solid 2px var(--color-accent-2);
}

.testimonial-photo {
  width: 100px; height: 100px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}
.testimonial-text {
  font-size: 1rem;
  color: #444;
  line-height: 1.5;
  margin-bottom: 1rem;
}
.testimonial-name {
  font-weight: bold;
  color: var(--color-secondary);
}

/* Responsive */
@media (max-width: 576px) {
  .testimonials-section .section-title {
    font-size: 2rem;
  }
  .carousel-btn {
    width: 40px; height: 40px;
    font-size: 1.5rem;
  }
}


 /* ----------------  Layout  ---------------- */
.calendar-container{
  max-width: 80%;
  margin: 1rem auto 2rem;
  display: grid;                 /* para centrar leyenda bajo el calendario */
  grid-template-columns: 1fr;
  justify-items: center;
  row-gap: .6rem;                /* separación MUY corta calendario/leyenda */
}

#calendar{
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  /* Calendario: fondo del contenedor */                   background: var(--calendar-bg);
  /* Calendario: sombra del contenedor */                  box-shadow: 0 5px 20px var(--calendar-shadow);
  min-width: 320px;
}

/* ---- LEYENDA ---- */
.legend{ width: min(100%, 980px); text-align: center; }
.legend h3{ margin: 0 0 .3rem; font-size: 1.15rem; /* Título toolbar/legend: color de texto */ color: var(--toolbar-title-color); }
.legend-row{ display: flex; flex-wrap: wrap; gap: .4rem .8rem; justify-content: center; }
.legend-item{ display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; /* Legend items: color de texto */ color: #222; }
.color-box{ width: 1.1rem; height: 1.1rem; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }
.calendar-container .legend{ order: -1; }
/* ---- TOOLTIP ---- */
.fc-tooltip{
  position: absolute;
  z-index: 10001;
  background: var(--tooltip-bg);
  color: var(--tooltip-text);
  padding: .5rem .75rem;
  border-radius: 4px;
  font-size: .85rem;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0; transform: translateY(-6px);
  animation: fadeInUp .25s forwards;
}
@keyframes fadeInUp{ to{ opacity:1; transform: translateY(0); } }

/* ---- CELDAS DE DÍA (verticalmente centrado, SIN rotación) ---- */
.fc .fc-daygrid-day-frame{
  display: flex;
  flex-direction: column;
  justify-content: center;   /* centra VERTICAL */
  align-items: flex-start;   /* mantiene IZQUIERDA */
  transition: background .25s, transform .25s;
  border-radius: 8px;
  color: #111;
}
.fc .fc-daygrid-day-frame:hover{
  background: var(--day-hover-bg);
  transform: scale(1.02);
}

/* ---- EVENTOS ---- */
.fc .fc-event{
  transition: transform .2s;
  color: #000; /* el fondo lo pone la categoría */
}
.fc .fc-event:hover{ transform: scale(1.04); }

/* ---- TOOLBAR / BOTONES ---- */
.fc .fc-toolbar-title{
  font-weight: 700;
  color: var(--color-texto);
}
.fc .fc-button-primary,
.fc .fc-today-button,
.fc .fc-prev-button,
.fc .fc-next-button{ background: var(--color-accent-2) !important; color:#fff !important; border:none; }

.fc .fc-button-primary:hover,
.fc .fc-today-button:hover,
.fc .fc-prev-button:hover,
.fc .fc-next-button:hover{ background: var(--color-accent-4) !important; }

.fc .fc-button-primary:active,
.fc .fc-today-button:active,
.fc .fc-prev-button:active,
.fc .fc-next-button:active,
.fc .fc-button-primary.fc-button-active{ background: var(--color-primary) !important; }

.fc .fc-button-primary:disabled,
.fc .fc-today-button:disabled,
.fc .fc-prev-button:disabled,
.fc .fc-next-button:disabled{ background: var(--color-secondary) !important; color:#fff !important; }

/* ---- BOTONES MÁS CHICOS EN MÓVIL ---- */
@media (max-width: 640px){
  .fc .fc-toolbar-title{ font-size: 1rem; }
  .fc .fc-button{ padding: .25rem .5rem; font-size: .85rem; }
}

/* (opcional) reduce tipografías un poco en pantallas muy angostas */
@media (max-width: 380px){
  .legend-item{ font-size: .9rem; }
}



/* ==== SOLO ETIQUETAS/BLOQUES DE EVENTO (dayGrid) ==== */
/* Bloque de evento “píldora” más angosto y centrado */
#calendar .fc-daygrid-day .fc-daygrid-block-event,
#calendar .fc-daygrid-day .fc-daygrid-dot-event,
#calendar .fc-daygrid-day .fc-h-event{
  width: 90% !important;         /* menos que 100% para no tocar bordes del día */
  box-sizing: border-box;
  border-radius: 6px;             /* esquinas suaves (opcional) */
}

/* Contenido del evento: un poco de padding para el texto */
#calendar .fc-daygrid-day .fc-daygrid-event .fc-event-main{
  padding-inline: 6px;            /* espacio horizontal interno del título */
}

/* El enlace “+n más” con el MISMO ancho para consistencia visual */
#calendar .fc-daygrid-day .fc-daygrid-more-link{
  display: block;
  width: 90% !important;
  text-align: center;
  border-radius: 6px;
}

/* Si FullCalendar usa el modo “dot”, igualamos el ancho también */
#calendar .fc-daygrid-day .fc-daygrid-dot-event{
  width: 90% !important;
  margin: 2px auto !important;
}

/* En móvil, un poquito más anchas para legibilidad */
@media (max-width: 640px){
  #calendar .fc-daygrid-day .fc-daygrid-block-event,
  #calendar .fc-daygrid-day .fc-daygrid-dot-event,
  #calendar .fc-daygrid-day .fc-h-event,
  #calendar .fc-daygrid-day .fc-daygrid-more-link{
    width: 92% !important;
  }
}




/* ========= Contenedor sección ========= */
.oe-wrap{
  background-image: url(images/fondos/speaker_bg.png);
  background-repeat:no-repeat;
  justify-content: center;
  width: min(1200px, 95%);
  margin-inline: auto;
  padding: clamp(1.25rem, 3vw, 2rem);
}

.oe-head{ margin-bottom: clamp(1rem, 2vw, 1.25rem); }
.oe-title{
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 2.8vw, 2.1rem);
  line-height: 1.1;
  margin: 0 0 .25rem;
  color: var(--color-texto);
}
.oe-subtitle{
  margin: 0;
  font-size: clamp(.95rem, 1.8vw, 1.05rem);
  color: var(--gray-dark);
}

/* ========= Grid ========= */
.oe-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* siempre 3 arriba */
  gap: clamp(1rem, 2.5vw, 1.5rem);
  justify-items: stretch;
}
/* En tablets: 2 columnas */
@media (max-width: 1100px){
  .oe-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* En móviles: 1 columna */
@media (max-width: 720px){
  .oe-grid{ grid-template-columns: 1fr; }
}

/* ========= Card base ========= */
.oe-card{
  width: 200px;          /* más compacta */
  min-height: 280px;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
@keyframes oe-enter{
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* Halo semicircular expansivo */
.oe-card .oe-bg{
  --bg-alpha: .20;
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120px 120px at 20% 0%,
      color-mix(in srgb, var(--card-color) calc(var(--bg-alpha)*100%), transparent) 0%,
      transparent 70%);
  transition: transform .4s ease, background .4s ease;
  transform-origin: 20% 0%;
}
.oe-card:hover .oe-bg{
  transform: scale(2.2);
  background:
    radial-gradient(60% 60% at 50% 30%,
      color-mix(in srgb, var(--card-color) 22%, transparent) 0%,
      transparent 90%);
}


.oe-content{
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .4rem;
  padding: .9rem;
}

/* Títulos más chicos */
.oe-level-es{
  font-family: 'League Spartan', sans-serif;
  font-weight: 700;
  font-size:  1.4rem;
  margin: 0;
  color: var(--color-texto);
}
.oe-level-en{
  margin: 0 0 .3rem;
  font-size: 1rem;
  color: var(--gray-dark);
}

/* Ícono circular reducido */
.oe-icon-img{
  --icon-d: 100px;
  width: var(--icon-d);
  height: var(--icon-d);
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) opacity(.9);
  transition: filter .3s, transform .3s;
}
.oe-card:hover .oe-icon-img{
  filter: grayscale(0) opacity(1) drop-shadow(0 3px 6px rgba(0,0,0,.1));
  transform: scale(1.05);
}

/* Meta más pequeño */
.oe-meta{
  margin-top: .2rem;
  display: grid;
  gap: .15rem;
  font-size: .7rem;
  color: var(--gray-dark);
}
.oe-line{ margin: 0; }

/* ===== Botón reducido ===== */
.oe-btn{
  --btn-h: 34px;
  --btn-w: 140px;
  width: var(--btn-w);
  height: var(--btn-h);
  display: grid;
  place-items: center;
  grid-template-areas: "content";
  border-radius: 0;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-texto);
  background: var(--gray-light);
  border: 1px solid var(--gray-medium);
  margin-top: auto;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease;
}
.oe-btn .label, .oe-btn i{ grid-area: content; line-height: 1; }
.oe-btn .label{ white-space: nowrap; }
.oe-btn i{
  opacity: 0;
  transform: scale(.9);
  transition: opacity .2s, transform .2s;
  font-size: .9rem;
}
.oe-btn:hover{
  background: color-mix(in srgb, var(--card-color) 22%, var(--gray-light));
  border-color: color-mix(in srgb, var(--card-color) 40%, var(--gray-medium));
}
.oe-btn:hover .label{ opacity: 0; }
.oe-btn:hover i{ opacity: 1; transform: scale(1); }

/* ===== Colores por card ===== */
.card-maternal   { --card-color: var(--guarderia);   }
.card-preescolar { --card-color: var(--preescolar);    }
.card-primaria   { --card-color: var(--primaria);   }
.card-secundaria { --card-color: var(--secundaria); }
.card-prepa      { --card-color: var(--preparatoria);      }

/* ===== Responsivo ===== */
/* Tablets: 3 columnas */
@media (max-width: 1100px){
  .oe-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Celulares: 2 columnas */
@media (max-width: 720px){
  .oe-grid{ grid-template-columns: repeat(2, 1fr); }
  .oe-card{ width: 100%; } /* que ocupen todo el ancho de la celda */
}

/* Muy angosto: 1 columna */
@media (max-width: 420px){
  .oe-grid{ grid-template-columns: 1fr; }
}




/* ===== Mapear color por nivel con tus variables del :root ===== */
.lvl--maternal   { --nivel: var(--guarderia); }
.lvl--preescolar { --nivel: var(--preescolar); }
.lvl--primaria   { --nivel: var(--primaria); }
.lvl--secundaria { --nivel: var(--secundaria); }
.lvl--prepa      { --nivel: var(--preparatoria); }

.nova{ --ink:#0f2740; --ink2:#203a57; font-family: var(--font-body); }

/* ===== Sección general ===== */
.nivel{ position:relative; overflow:hidden; background:#fff; color:var(--ink); }

/* ================= HERO corregido ================= */
/* ===== HERO (versión inicial) ===== */
.hero-nova{
  position: relative;
  min-height: clamp(150px, 58vh, 200px);
  border-bottom: 1px solid color-mix(in srgb, var(--nivel) 35%, #e6eff7);
  isolation: isolate; /* asegura las capas */
}

/* Capa 0: FOTO en la mitad derecha */
.hero-photo-wrap{
  position: absolute; inset: 0 0 0 50%; /* left = 50% */
  z-index: 0;
}
.hero-photo{
  width: 100%; height: 100%;
  object-fit: cover; display:block;
}

/* Capa 1: OVERLAY (de color del nivel → a transparente a la derecha) */
.hero-overlay{
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--nivel) 62%, #ffffff) 0%,
      color-mix(in srgb, var(--nivel) 30%, #ffffff) 44%,
      color-mix(in srgb, var(--nivel) 10%, #ffffff) 60%,
      rgba(255,255,255,0) 75%);
}

/* Capa 1.5: DECOR (debajo del contenido, encima del overlay) */
.decor{ position:absolute; inset:0; z-index: 2; pointer-events:none; }

/* Capa 2: CONTENIDO */
.hero-grid{
  position: relative; z-index: 3;
  width: min(1200px, 85%);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(16px, 2.5vw, 28px);
  padding: clamp(18px, 4vw, 28px) 0;
}

/* Icono + textos (como los tenías) */
.icon-wrap{ display:grid; place-items:center; margin-bottom:.4rem; }
.icon-level{
  width: clamp(76px, 10vw, 110px);
  height: clamp(76px, 10vw, 110px);
  border-radius: 50%; object-fit: cover; background:#fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.1);
}
.hero-title{
  margin:.1rem 0 .2rem; text-align:center;
  font-family: var(--font-body); font-weight: bold;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
  color: color-mix(in srgb, var(--nivel) 70%, #0a1a2d);
}
.hero-text{
  margin:0 auto; text-align:center;
  color: color-mix(in srgb, var(--nivel) 35%, var(--ink2));
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  max-width: 48ch;
  font-weight: normal;
}


/* ================= MINI-SECCIÓN inspirada ================= */
.mini-bites{ background: color-mix(in srgb, var(--nivel) 10%, #f7fbff);
  border-top: 1px solid color-mix(in srgb, var(--nivel) 25%, #e7f0fa);
  border-bottom: 1px solid color-mix(in srgb, var(--nivel) 25%, #e7f0fa);
}
.bites-wrap{
  width: min(1100px, 85%); margin: clamp(16px, 3vw, 24px) auto;
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(10px, 2vw, 16px);
}
.bite{
  background:#fff; border:1px solid color-mix(in srgb, var(--nivel) 30%, #e5edf6);
  border-radius: 14px; padding: .9rem .95rem; text-align:center;
  box-shadow:0 10px 26px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.bite:hover{ transform: translateY(-4px); box-shadow:0 16px 36px rgba(0,0,0,.07); }
.b-emoji{ font-size: 1.4rem; margin-bottom:.25rem; }
.bite h3{ margin:.1rem 0 .15rem; font-family: var(--font-body); color: color-mix(in srgb, var(--nivel) 65%, #0a1a2d); font-weight: bold;}
.bite p{ margin:0; color:#284461; font-weight:normal; font-size: 1.02rem; }

/* ================= Info clave ================= */
.nivel .sec-title{
  text-align:center; margin: clamp(16px,2.6vw,22px) 0 .6rem;
  font-family: var(--font-body);
  font-weight: bold; 
  color: color-mix(in srgb, var(--nivel) 70%, #0a1a2d);
  font-size: clamp(1.25rem, 2.8vw, 1.6rem);
}
.info{ width:min(1100px,85%); margin:0 auto; 
  background-image: url(images/fondos/speaker_bg.png);
  background-repeat:no-repeat;}
.kp{ list-style:none; padding:0; margin:0 auto; max-width:900px;
  display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.6rem 1rem; }
.kp li{
  display:grid; grid-auto-flow:column; align-items:center; gap:.5rem;
  background:#fff; border:1px solid color-mix(in srgb, var(--nivel) 35%, #e6edf5);
  border-radius:14px; padding:.75rem .9rem; color:#173b5a; 
  font-weight: normal;
  box-shadow:0 8px 20px rgba(0,0,0,.04);
}
.kp i{ color: color-mix(in srgb, var(--nivel) 70%, #0a1a2d); }

/* ================= Galería / Carrusel ================= */
.gallery{ width:min(1100px,85%); margin:0 auto; }
.carousel{
  position:relative; border:1px solid #e6edf5; border-radius: 0; background:#fff; overflow:hidden;
  box-shadow:0 10px 28px rgba(0,0,0,.05);
}
.car-track{ display:grid; grid-auto-flow:column; grid-auto-columns:100%; transition: transform .45s ease; scroll-snap-type:x mandatory; }
.carousel img{ width:100%; height: clamp(450px, 38vh, 560px); object-fit:cover; display:block; scroll-snap-align:center; }
.car-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  background:rgba(255,255,255,.95); border:1px solid #e2ebf5; display:grid; place-items:center; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.car-btn.prev{ left:.6rem; } .car-btn.next{ right:.6rem; }

/* ================= Artes ================= */
.artes{ width:min(1100px,85%); margin:0 auto; }
.arts-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:.9rem; }
.art-card{
  background:#fff; border:1px solid color-mix(in srgb, var(--nivel) 28%, #e5edf6);
  border-radius:14px; padding:1rem .9rem; text-align:center; box-shadow:0 8px 22px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.art-card:hover{ transform: translateY(-4px); box-shadow:0 14px 36px rgba(0,0,0,.08); border-color: color-mix(in srgb, var(--nivel) 50%, #d3e0f2); }
.art-icon{
  width:56px; height:56px; margin:0 auto .4rem; display:grid; place-items:center; border-radius:50%;
  background: color-mix(in srgb, var(--nivel) 14%, #f4f9ff); border:1px solid color-mix(in srgb, var(--nivel) 38%, #d9e5f4);
  color: color-mix(in srgb, var(--nivel) 70%, #0a1a2d); font-size:1.2rem;
}
.art-card h3{ margin:.2rem 0 .15rem; font-weight:800; color: color-mix(in srgb, var(--nivel) 70%, #0a1a2d); }
.art-card p{ margin:0; color:#183b59; font-weight:600; }

/* ================= CTAs ================= */
.ctas{ display:grid; justify-items:center; gap:.7rem; margin: clamp(10px,2vw,18px) 0 2rem; }
.btn-cta{
  display:inline-grid; grid-auto-flow:column; align-items:center; gap:.55rem;
  text-decoration:none; font-weight:bold; padding:.78rem 1.1rem; border-radius:0; border:1px solid;
  transition: transform .15s ease, background .25s ease, border-color .25s ease;
}
.btn-cta.primary{ background: color-mix(in srgb, var(--nivel) 18%, #f0f6fc); border-color: color-mix(in srgb, var(--nivel) 50%, #d4e1f0); color: var(--ink); }
.btn-cta.primary:hover{ transform: translateY(-1px); background: color-mix(in srgb, var(--nivel) 26%, #eef3f8); }
.btn-cta.ghost{ background:#fff; border-color:#e6edf5; color:#27405c; }
.btn-cta.ghost:hover{ transform: translateY(-1px); background:#f9fcff; }

/* ================= Reveal on scroll ================= */
.reveal{ opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

/* ================= Responsive ================= */
@media (max-width: 1040px){
  .hero-nova{ min-height: clamp(320px, 52vh, 520px); }
  .decor-pre .rainbow{ right: 10%; bottom: 10%; width: 120px; }
}
@media (max-width: 860px){
  .bites-wrap{ grid-template-columns: 1fr; }
  .kp{ grid-template-columns: 1fr; }
  .arts-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .arts-grid{ grid-template-columns: 1fr; }
}

/* ================= Accesibilidad ================= */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  .decor-pre .cloud, .decor-pre .sun, .decor-pre .rainbow{ animation:none; }
}


/* ===================== ALT MOSAIC (debajo del hero) ===================== */
.alt-mosaic{
  --wrap-w: min(1200px, 85%);   /* súbelo a 90% si deseas */
  background-color: #ffffff;
  background-image:  linear-gradient(#02345f1e 1px, transparent 1px), linear-gradient(to right, #02345f1e 1px, #ffffff 1px);
  background-size: 20px 20px;
  border: none;
}
.altm-wrap{
  width: var(--wrap-w);
  margin: clamp(18px, 4vw, 28px) auto;
  display: grid;
  gap: clamp(18px, 3vw, 26px);
  border: none;
}

/* filas en dos columnas, con altura pensada para fotos grandes */
.altm-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.2vw, 22px);
  align-items: center;
  position: relative;
  border: none;
}

/* invertir orden para la segunda fila */
.altm-row--invert .altm-text{ order: 0; }
.altm-row--invert .altm-photo{ order: 1; }

/* ========== FOTO: rectangular alta, sin borde, con sombra ========== */
.altm-photo{
  border: none;
  position: relative;
  margin: 0;
  border-radius: 0;             /* sin bordes redondeados */
  overflow: visible;            /* deja respirar los flotantes */
  box-shadow: 0 18px 42px rgba(0,0,0,.12);
}
.altm-photo img{
  display: block;
  width: 100%;
  height: clamp(420px, 48vh, 560px);  /* alta y protagonista */
  object-fit: cover;
  transform: translateZ(0) scale(1.01);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .6s;
  filter: saturate(1.03) contrast(1.03);
}
.altm-photo:hover img{ transform: scale(1.05); filter: saturate(1.08) contrast(1.05); }

/* desfase de la foto derecha (fila 2) para hacer que su esquina superior izquierda
   toque la esquina superior derecha de la foto izquierda de arriba */
.altm-photo--offset{
  margin-top: calc(-1 * clamp(60px, 8vh, 120px));
}

/* ========== TEXTO: caja centrada horizontalmente respecto a su foto ========== */
.altm-text{
  display: grid;
  justify-items: center;    /* centra la tarjeta horizontalmente */
}
.altm-card{
  max-width: 48ch;          /* no muy ancho */
  background: transparent;
  border: none;
  padding: clamp(14px, 2.2vw, 18px);
}
.altm-title{
  text-align: center;
  margin: 0 0 .5rem;
  font-family: var(--font-body);
  font-weight: bold;
  color: color-mix(in srgb, var(--nivel) 70%, #0a1a2d);
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
}
.altm-card p{
  font-family: var(--font-body);
  margin: 0;
  text-align: justify;
  font-size: clamp(1rem, 2.2vw, 1.07rem);
  line-height: 1.65;        /* pensado para ~8 renglones cómodos */
  min-height: 13em;         /* asegura altura visual ~8 líneas */
  color: #173b5a;
  font-weight: normal;
}

/* ========== Animaciones de entrada (usa tu .reveal global) ========== */
.from-left{  opacity:0; transform: translateX(-24px); }
.from-right{ opacity:0; transform: translateX( 24px); }
.reveal.is-visible .from-left,
.reveal.is-visible .from-right{
  opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease;
}

/* ========== Flotantes temáticos alrededor de fotos (genéricos) ========== */
.altm-photo .flt{
  position: absolute;
  z-index: 2;
  pointer-events: none;
  animation: bob 11s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.08));
}
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

/* ===================== Motivos por NIVEL ===================== */
/* PREESCOLAR (nubes, crayón, sol) — activar con .motif-pre en .alt-mosaic */
.motif-pre .f-cloud{
  width: 90px; height: 40px; background:#fff; border-radius: 20px;
}
.motif-pre .f-cloud::before, .motif-pre .f-cloud::after{
  content:""; position:absolute; background:#fff; width:32px; height:32px; border-radius:50%; top:-16px;
}
.motif-pre .f-cloud::before{ left:12px; } .motif-pre .f-cloud::after{ left:36px; }
.motif-pre .altm-photo .f1{ left:-18px; top: 18px; animation-delay:.2s; }
.motif-pre .altm-photo .f2{ right:-20px; top: 22px; animation-delay:.6s; }
.motif-pre .f-sun{
  width: 48px; height: 48px; left:-16px; bottom: 16px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff7c2, #ffd35a 70%);
  animation-duration: 12s;
}

/* Ejemplos para otros niveles (opcional, activa con motif-*) */
/* MATERNAL */
.motif-mat .flt.star{
  width:14px; height:14px; background: color-mix(in srgb, var(--nivel) 70%, #fff);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.motif-mat .altm-photo .star{ left:-12px; top:20px; }
.motif-mat .altm-photo .moon{
  width:26px; height:26px; right:-14px; bottom:20px; border-radius:50%;
  box-shadow:-10px 0 0 0 color-mix(in srgb, var(--nivel) 60%, #fff);
}

/* PRIMARIA */
.motif-prim .pencil{
  width:100px; height:14px; right:-24px; top: 18px; border-radius:7px;
  background: linear-gradient(90deg, #f9c74f, #f9844a); transform: rotate(12deg);
}
.motif-prim .ruler{
  width:80px; height:12px; left:-20px; bottom:16px; border-radius:6px;
  background: repeating-linear-gradient(90deg, #e2e8f0 0 8px, #cbd5e1 8px 9px);
}

/* SECUNDARIA */
.motif-sec .atom{
  width:44px; height:44px; border-radius:50%; border:2px solid color-mix(in srgb, var(--nivel) 70%, #fff);
  left:-16px; top:16px;
}
.motif-sec .gear{
  width:36px; height:36px; right:-14px; bottom:16px;
  background: conic-gradient(from 0deg, color-mix(in srgb, var(--nivel) 70%, #fff) 0 10%, transparent 10% 20%, color-mix(in srgb, var(--nivel) 70%, #fff) 20% 30%, transparent 30% 40%, color-mix(in srgb, var(--nivel) 70%, #fff) 40% 50%, transparent 50% 60%, color-mix(in srgb, var(--nivel) 70%, #fff) 60% 70%, transparent 70% 80%, color-mix(in srgb, var(--nivel) 70%, #fff) 80% 90%, transparent 90% 100%);
  mask: radial-gradient(circle 12px, #0000 98%, #000 100%);
  border-radius:8px;
}

/* PREPARATORIA */
.motif-prepa .cap{
  right:-20px; top:18px; width:52px; height:26px; position:absolute;
  background: color-mix(in srgb, var(--nivel) 70%, #0a1a2d);
  clip-path: polygon(0 60%, 50% 0, 100% 60%, 50% 60%); border-radius:2px;
}
.motif-prepa .star{
  left:-14px; bottom:16px; width:14px; height:14px; position:absolute;
  background: color-mix(in srgb, var(--nivel) 70%, #fff);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ===================== Responsive ===================== */
@media (max-width: 980px){
  .altm-row{ grid-template-columns: 1fr; }
  .altm-photo--offset{ margin-top: 0; } /* elimina el desfase en móvil */
  .altm-card{ max-width: 48ch; }
  .altm-photo img{ height: clamp(320px, 44vh, 480px); }
}



/* ======== HERO GENÉRICO REUTILIZABLE ======== */
.page-hero{
  --hero-a:#035AA7;           /* color 1 del gradiente */
  --hero-b:#0583F2;           /* color 2 del gradiente */
  --hero-overlay:.72;         /* opacidad del gradiente sobre la imagen */
  --hero-min-h: 42vh;         /* alto mínimo */
  position: relative;
  display: grid;
  place-items: center;
  min-height: var(--hero-min-h);
  padding: 4rem 1rem;
  text-align: center;

  /* imagen de fondo opcional (se setea en línea con style="background-image:url(...)") */
  background-size: cover;
  background-position: center;
  overflow: hidden;
  font-family: var(--font-body);
}
.page-hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--hero-a), var(--hero-b));
  opacity: var(--hero-overlay);
  z-index:0;
}
.page-hero > .hero-content{ position: relative; z-index:1; max-width: 900px; }
.page-hero .hero-title{ font-weight: 800; letter-spacing: .3px; font-family: var(--font-body);}
.page-hero .hero-subtitle{ opacity:.95; }

/* Temas rápidos por clase (puedes crear más) */
.theme-primary{ --hero-a:#035AA7; --hero-b:#0583F2; }
.theme-green  { --hero-a:#79b11f; --hero-b:#A4BF41; }
.theme-teal   { --hero-a:#00c6bb; --hero-b:#05F2DB; }
.theme-gold   { --hero-a:#E0A900; --hero-b:#F2C029; }

/* ======== HERO DE NIVELES (icono circular centrado) ======== */
/* ===== Variante “nivel educativo” (mismo hero pero con icono + títulos apilados) ===== */
.level-hero .hero-body{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.5rem;
}
.level-hero .level-icon{
  width: clamp(84px, 10vw, 112px);
  height: clamp(84px, 10vw, 112px);
  border-radius: 999px;
  object-fit: cover;
  border: 0;
  box-shadow: 0 5px 20px rgba(5, 5, 5, 0.103);
}
/* ===== Temas por nivel (usando tus colores del :root) ===== */
/* Guardería → var(--color-accent-3) */
.level-hero--guarderia::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
  linear-gradient(to bottom right, #c4afe7bf 0%, #c4afe773 60%),
  linear-gradient(to bottom, #c4afe726, #c4afe759);
  margin:.1rem 0 .2rem; text-align:center;
  font-family: var(--font-body); font-weight: bold;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
}

/* Preescolar → var(--color-accent-2) */
.level-hero--preescolar::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
  linear-gradient(to bottom right, #2ba3d1bf 0%, #2ba3d173 60%),
  linear-gradient(to bottom, #2ba3d126, #2ba3d159);
  margin:.1rem 0 .2rem; text-align:center;
  font-family: var(--font-body); font-weight: bold;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
}
/* Primaria → var(--color-accent-1) */
.level-hero--primaria::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
  linear-gradient(to bottom right, #18af0fbf 0%, #18af0f73 60%),
  linear-gradient(to bottom, #18af0f26, #18af0f59);
  margin:.1rem 0 .2rem; text-align:center;
  font-family: var(--font-body); font-weight: bold;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
}
/* Secundaria → var(--color-secondary) */
.level-hero--secundaria::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
  linear-gradient(to bottom right, #ffa500bf 0%, #ffa50073 60%),
  linear-gradient(to bottom, #ffa50026, #ffa50059);
  margin:.1rem 0 .2rem; text-align:center;
  font-family: var(--font-body); font-weight: bold;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
}
/* Preparatoria → var(--color-primary) */
.level-hero--preparatoria::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
  linear-gradient(to bottom right, #358bc6bf 0%, #358bc673 60%),
  linear-gradient(to bottom, #358bc626, #358bc659);
  margin:.1rem 0 .2rem; text-align:center;
  font-family: var(--font-body); font-weight: bold;
  font-size: clamp(1.6rem, 3.8vw, 2.6rem);
}

/* ======== Detalles decorativos opcionales ======== */
.page-hero .bubble{
  position:absolute; border-radius:50%; filter: blur(1px); opacity:.22; pointer-events:none;
  animation: heroFloat 4s ease-in-out infinite alternate;
}
.page-hero .b1{ width:120px; height:120px; top:10%; left:8%; background:#fff; }
.page-hero .b2{ width:80px;  height:80px;  bottom:12%; right:12%; background:#fff; animation-delay:.6s; }
@keyframes heroFloat{ from{ transform:translateY(0)} to{ transform:translateY(-14px)} }

/* ======== Responsive ======== */
@media (max-width: 991.98px){
  .page-hero{ padding: 3rem 1rem; }
  .level-hero .level-icon{ width: 96px; border-width:3px; }
}

/* ===== Contact Section ===== */
.contact-section{
  background-color: #ffffff;
  background-image:  linear-gradient(#02345f1e 1px, transparent 1px), linear-gradient(to right, #02345f1e 1px, #ffffff 1px);
  background-size: 20px 20px;
  position: relative;
  padding: 4rem 1rem;
  overflow: hidden;
}

/* formas decorativas */
.contact-shape{
  position:absolute;
  width:160px;height:160px;
  border-radius:50%;
  filter: blur(2px);
  opacity:.35;
  animation: contactFloat 4s ease-in-out infinite alternate;
  pointer-events: none;
  z-index:0;
}
.shape-a{ top:-40px; left:-40px; background: var(--color-accent-4, #035aa7); }
.shape-b{ bottom:-50px; right:-50px; background: var(--color-accent-3, #F2C029); }

@keyframes contactFloat{
  from{ transform: translateY(0) translateX(0); }
  to  { transform: translateY(-18px) translateX(10px); }
}

/* Encabezado */
.contact-header{
  text-align:center;
  margin-bottom:2.5rem;
  position: relative;
  z-index:1;
}
.contact-title{
  font-size: clamp(1.8rem, 2.5vw, 2.4rem);
  color: var(--color-primary, #0583F2);
  margin-bottom:.4rem;
}
.contact-subtitle{
  font-size: clamp(1rem, 2vw, 1.1rem);
  color:#555;
}

/* Grid principal */
.contact-grid{
  position: relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap:2rem;
  align-items: start;
}

/* Columna izquierda */
.contact-info{ display:flex; flex-direction:column; gap:1rem; }

/* Tarjeta de info (glass suave) */
.info-card{
  display:flex; align-items:center; gap:.9rem;
  padding: .9rem 1rem;
  border-radius:.75rem;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.info-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
  border-color: #0583f240; 
}
.info-icon{
  width:42px; height:42px; min-width:42px;
  border-radius:50%;
  display:grid; place-items:center;
  background: #0583f21a;
  color: var(--color-accent-4, #035aa7);
  font-size:1.1rem;
}
.info-text h3{
  margin:0 0 .15rem;
  font-size:1.05rem;
  color:#222;
}
.info-text p{
  margin:0; color:#555; line-height:1.4;
}

/* Redes */
.contact-social{ display:flex; gap:.6rem; margin-top:.25rem; }
.contact-social .sc{
  text-decoration: none;
  width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; 
  color:#777;
  border:1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.contact-social .sc:hover{ transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.12); color:#fff; border-color: transparent; }
.contact-social .fb:hover{ background:#1877F2; }
.contact-social .ig:hover{ background:#E1306C; }
.contact-social .yt:hover{ background:#FF0000; }
.contact-social .tt:hover{ background:#000; }

/* Columna derecha: formulario incrustado */
.contact-form{ display:flex; flex-direction:column; gap:.6rem; width: 100%;}

.form-frame{
  border-radius:.9rem;
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 22px rgba(0,0,0,.10);
  /* alto adaptable para la mayoría de embeds */
}
.form-frame iframe{
  width:100%;
  min-height: 400px;
  height: min(50vh, 420px);
  border:0;
}

.form-note{
  color:#666; font-size:.9rem;
}
.form-note a{ color: var(--color-primary,#0583F2); text-decoration: underline; }

/* Reveal on scroll (suave) */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform:none; }

/* Responsive */
@media (max-width: 992px){
  .contact-grid{ grid-template-columns: 1fr; }
  .form-frame{ min-height: 560px; }
}
@media (max-width: 576px){
  .contact-section{ padding: 3rem .75rem; }
  .info-card{ padding:.8rem .9rem; }
  .info-icon{ width:38px; height:38px; font-size:1rem; }
  .form-frame{ min-height: 520px; }
}


/* ===== Sección Mapa ===== */
.map-section2{
  align-items: center;
  position: relative;
  padding: 2.5rem 1rem 2rem;
  overflow: hidden;
  background-color: #ffffff;
  background-image: url(images/fondos/cgreen.png);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 50%;
}

/* decoraciones */
.map-dot{
  position:absolute; border-radius:50%; pointer-events:none; filter:blur(1px);
  animation: mapFloat 4s ease-in-out infinite alternate;
  opacity:.35; z-index:0;
}
.dot-a{ width:140px; height:140px; top:-40px; left:-40px; background: var(--color-secondary, #2BA8D9); }
.dot-b{ width:110px; height:110px; right:-35px; bottom:-35px; background: var(--color-accent-2, #A4BF41); }
@keyframes mapFloat{
  from{ transform: translateY(0) translateX(0); }
  to  { transform: translateY(-14px) translateX(10px); }
}

/* encabezado */
.map-header{
  text-align:center; margin-bottom:0.1rem; position:relative; z-index:1;
}

/* grid info */
.map-info-grid{
  display: grid;
  grid-template-columns: 1fr;   /* una sola columna */
  justify-items: center;        /* centra el ítem */
  margin: 1rem auto 1.25rem;
  max-width: 920px;
}
.mini-card{
  display:flex; align-items:center; gap:.9rem;
  background: rgba(255, 255, 255, 0.788);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border:1px solid rgba(0,0,0,.06);
  border-radius:.75rem;
  padding:.85rem 1rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow 1s ease, border-color 1s ease;
}
.mini-card:hover{ transform: translateY(-3px); box-shadow:0 10px 24px rgba(0,0,0,.10); border-color: #0583f240; }
.mini-icon{
  width:42px;height:42px; min-width:42px; border-radius:50%;
  display:grid; place-items:center; background: rgba(5,131,242,.10); color: var(--color-accent-4,#035aa7);
  font-size:1.1rem;
}
.mini-text h3{ margin:.05rem 0 .1rem; font-size:1.05rem; color:#222; }
.mini-text p{ margin:0; color:#555; line-height:1.4; }

/* mapa ancho-abajo */
.map-frame{
  position:relative; width:100%; max-width: 1100px; margin: 0 auto;
  aspect-ratio: 21 / 9;              /* más ancho que alto en desktop */
  max-height: 300px;                  /* evita que crezca demasiado */
  border-radius: .9rem; overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
}
.map-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* reveal */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease;}
.reveal.visible{ opacity:1; transform:none; }

/* responsive */
@media (max-width: 992px){
  .map-info-grid{ grid-template-columns: 1fr; max-width: 640px; }
  .map-frame{ aspect-ratio: 16 / 9; max-height: 380px; }
}
@media (max-width: 576px){
  .map-section2{ padding: 3rem .75rem 2rem; }
  .mini-card{ padding:.75rem .9rem; }
  .mini-icon{ width:38px;height:38px; font-size:1rem; }
  .map-frame{ aspect-ratio: 4 / 3; max-height: 340px; }
}



/* ========= Utilidades de sección (fondos full-bleed) ========= */
    .section--full{
      width:100%;
      position:relative;
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      /* capa opcional de color encima del fondo: */
      --overlay: transparent; /* puedes cambiar a rgba(0,0,0,.3) */
    }
    .section--full::before{
      content:"";
      position:absolute; inset:0;
      background: var(--overlay);
      z-index:0;
    }
    .container{
      max-width:1100px;
      margin:0 auto;
      padding: clamp(1.25rem, 2vw, 2rem) 1rem;
      position:relative;
      z-index:1; /* por encima de la overlay */
    }

    /* ========= Títulos de sección ========= */
    .section-header{
      text-align:center;
      margin-bottom:2rem;
      color:var(--text-dark);
    }
    .section-kicker{
      text-transform:uppercase;
      letter-spacing:.06em;
      color:var(--color-secondary);
      font-weight:700;
      font-size:clamp(.9rem, 1.5vw, 1rem);
      margin-bottom:.35rem;
    }
    .section-title{
      font-size:clamp(1.6rem, 3vw, 2.2rem);
      font-weight:800;
      color:#02345f;
      margin:0;
    }
    .section-sub{
      color:#4b5563;
      max-width:800px;
      margin:.6rem auto 0;
      font-size:clamp(1rem, 1.6vw, 1.1rem);
    }

/* ===== Timeline ALT ===== */
.timeline-alt{
  position: relative;
  margin: 1rem auto 2rem;
  padding: .5rem 0;
  max-width: 1100px;
}

/* Tronco central */
.timeline-alt::before{
  content:"";
  position:absolute;
  left:50%; top:0; bottom:0;
  transform: translateX(-50%);
  width:3px;
  background: linear-gradient(to bottom, rgba(5,131,242,.575), rgba(43,168,217,.575));
  border-radius:2px;
}

/* Ítems alternados */
.timeline-item{
  position: relative;
  width: calc(50% - 2.5rem);
  margin: 1.25rem 0;
  opacity:0; transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.timeline-item.in-view{ opacity:1; transform: translateY(0); }

.timeline-item.left  { margin-right:auto; }
.timeline-item.right { margin-left:auto;  }

/* Número en el tronco (centrado vertical respecto a la tarjeta) */
.step-badge{
  position:absolute;
  left:50%; top:50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  border:3px solid var(--color-primary);
  color: var(--color-primary);
  font-weight:800;
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  z-index:2;
}

/* pequeña “ramita” desde el tronco hacia la tarjeta */
.timeline-item::before{
  content:"";
  position:absolute; top:50%;
  width: 28px; height:2px;
  background: rgba(5, 131, 242, 0.575);
  transform: translateY(-50%);
}
.timeline-item.left::before{
  right: calc(-28px - 3px); /* 3px del tronco */
}
.timeline-item.right::before{
  left: calc(-28px - 3px);
}

/* Tarjeta con glass + contenido centrado + ícono al centro */
.step-card-alt{
  background: rgb(255, 255, 255);
  border: 1px solid rgba(255,255,255,0.38);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 1.25rem 1rem 1.1rem;
  color:#0f172a;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;

  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.step-card-alt:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0,0,0,.12);
  border-color: rgba(5,131,242,.45);
}
.step-card-icon{
  font-size: 2.25rem;
  color: var(--color-secondary);
  margin-bottom:.5rem;
}
.step-title{
  font-weight:800;
  margin: 0 0 .35rem;
  font-size: clamp(1.05rem, 1.8vw, 1.2rem);
  color:#0b2a53;
}
.step-text{
  margin:0;
  line-height:1.5;
  color:#334155;
  max-width: 40ch;
}

/* CTA */
.admissions-cta{ text-align:center; margin-top: .75rem; }
.btn-fill{
  background-color: white;
  position:relative; display:inline-block;
  padding:.75rem 1.4rem;
  color: var(--color-accent-4);
  border:2px solid var(--color-accent-4);
  font-weight:800; text-decoration:none;
  overflow:hidden;
  transition: color .3s ease, transform .2s ease;
}
.btn-fill::before{
  content:""; position:absolute; inset:0;
  transform: translateX(-100%);
  background: var(--color-accent-4);
  z-index:-1; transition: transform .35s ease;
}
.btn-fill:hover{ color:white; transform: translateY(-2px); }
.btn-fill:hover::before{ transform: translateX(0); }

/* Responsive */
@media (max-width: 992px){
  .timeline-item{ width: min(560px, 92%); }
  .timeline-item.left::before{ right: -31px; }
  .timeline-item.right::before{ left: -31px; }
}
@media (max-width: 640px){
  .timeline-item{ width: 100%; }
  .step-text{ max-width: 48ch; }
}


    /* ========= FAQ (categorías + vidrio esmerilado) ========= */
    .faq{
      display:grid;
      grid-template-columns: 1fr;
      gap:1.25rem;
    }
    .faq-card{
      background-color: white;
      border:1px solid var(--glass-brd);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      border-radius:14px;
      overflow:hidden;
      box-shadow:0 8px 20px rgba(0,0,0,.06);
      opacity:0; transform: translateY(20px);
      transition: opacity .5s ease, transform .5s ease;
    }
    .faq-card.in-view{ opacity:1; transform: translateY(0); }

    .faq-head{
      display:flex;
      align-items:center;
      gap:.75rem;
      padding: 1rem 1.25rem;
      background: linear-gradient(90deg, rgba(5,131,242,.06), rgba(43,168,217,.06));
      font-weight:800;
      color:#0b2a53;
    }
    .faq-head i{ color: var(--color-secondary); }

    .faq-body{
      padding: .25rem 1rem 1rem;
    }
    .faq-item{
      border-bottom:1px dashed rgba(0,0,0,.08);
    }
    .faq-item:last-child{ border-bottom:none; }

    .faq-q{
      width:100%;
      background:transparent;
      border:none;
      padding: .9rem .25rem;
      text-align:left;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      cursor:pointer;
      color:#0f172a;
      font-weight:600;
    }
    .faq-q i{
      transition: transform .25s ease, color .25s ease;
      color: var(--color-primary);
      min-width:20px; text-align:center;
    }
    .faq-a{
      max-height:0;
      overflow:hidden;
      transition:max-height .35s ease, opacity .35s ease;
      opacity:0;
      color:#334155;
      padding:0 .25rem;
    }
    .faq-item.open .faq-a{
      opacity:1; max-height: 300px; /* lo suficiente para la mayoría */
      padding-bottom:.8rem;
    }
    .faq-item.open .faq-q i{
      transform: rotate(45deg);
      color: var(--color-secondary);
    }

    /* ========= Decorativos sutiles (círculos) ========= */
    .decor{
      position:absolute;
      border-radius:50%;
      pointer-events:none;
      z-index:0;
      animation: float 3.2s ease-in-out infinite alternate;
    }
    .decor.one{ width:120px; height:120px; top: -20px; left: -20px; background: rgba(164,191,65,.20); }
    .decor.two{ width:90px; height:90px; bottom: -15px; right: 10%; background: rgba(5,131,242,.18); }
    @keyframes float{
      from{ transform: translateY(0) }
      to  { transform: translateY(-14px) }
    }

    /* ========= Responsive ========= */
    @media (max-width: 992px){
      .timeline{
        grid-template-columns: 1fr; gap:1.5rem;
      }
      .timeline::before{ left: 12px; transform:none; width:2px; opacity:.25; }
      .timeline-step:nth-child(odd),
      .timeline-step:nth-child(even){ grid-column:1; }
      .timeline-step .step-card{
        padding-left: 2.2rem;
      }
      .timeline-step .step-card::after{ display:none; }
      /* badge centrada a la tarjeta, sigue arriba */
      .timeline-step .step-badge{
        left: calc(2.2rem + 50%); /* compensa padding izquierdo */
      }
    }



/* ===== Sección Horario Extendido ===== */
.extended-hours{
  position: relative;
  padding: 3rem 1rem;
  overflow: hidden;
}

/* decorativos */
.extended-hours .eh-deco{
  position:absolute; border-radius:50%;
  filter: blur(1px);
  pointer-events:none;
  opacity:.25;
  animation: floatEh 3.5s ease-in-out infinite alternate;
}
.extended-hours .eh-deco.d1{
  width:120px; height:120px; top:6%; left:4%;
  background: #A4BF41;
}
.extended-hours .eh-deco.d2{
  width:90px; height:90px; bottom:8%; right:6%;
  background: #0583F2;
}
@keyframes floatEh{
  from{ transform: translateY(0) }
  to  { transform: translateY(-14px) translateX(6px) }
}

/* header */
.eh-header{ text-align:center; margin-bottom:1.5rem; }
.eh-kicker{
  color: var(--color-secondary);
  font-weight: 800;
  letter-spacing:.08em;
  text-transform: uppercase;
  margin: 0 0 .25rem;
}
.eh-title{
  margin:.1rem 0 .35rem;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  color:#0b2a53;
}
.eh-sub{
  margin:0 auto;
  color:#475569;
  max-width: 720px;
}
.eh-badge{
  display:inline-block;
  margin-left:.5rem;
  padding:.25rem .5rem;
  font-size:.85rem;
  border-radius:.4rem;
  background: #f3f3f4;
  border:1px solid #0f172a1c;
}

/* grid */
.ext-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px,1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 1rem auto 1.25rem;
}
@media (max-width: 992px){
  .ext-grid{ grid-template-columns: repeat(2, minmax(230px,1fr)); }
}
@media (max-width: 600px){
  .ext-grid{ grid-template-columns: 1fr; }
}

/* card base (glass) */
.ext-card{
  position: relative;
  border-radius: 14px;
  padding: 1rem 1rem 0.9rem;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(15,23,42,0.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(2,10,40,0.06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.ext-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(2,10,40,0.12);
  border-color: rgba(5,131,242,.35);
}

/* cabecera de card */
.ext-card-head{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.6rem;
}
.ext-card-head i{
  font-size:1.4rem;
}
.ext-card-head h3{
  margin:0; font-weight:800; font-size:1.1rem; color:#0b2a53;
  text-transform: uppercase;
  text-align: center;
}

/* lista de horarios */
.ext-times{
  list-style:none; padding:0; margin: .25rem 0 .65rem;
}
.ext-times li{
  text-align: center;
  display:flex; align-items:center; gap:.5rem;
  padding:.4rem .5rem;
  border-radius:.5rem;
  background: rgba(255,255,255,0.45);
  border:1px solid rgba(2,10,40,0.08);
  margin-bottom:.45rem;
  color:#0f172a;
}
.ext-times i{ opacity:.75; }
.ext-note{
  margin: 0 0 .8rem;
  color:#475569; font-size:.95rem;
}

/* acentos por nivel (tira superior delgada y color de icono) */
.ext-card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:4px; border-radius:14px 14px 0 0;
}

.level-preescolar .ext-card-head i{ color: var(--color-accent-3); }
.level-primaria   .ext-card-head i{ color: var(--color-accent-2); }
.level-secundaria .ext-card-head i{ color: var(--color-secondary); }
.level-preparatoria .ext-card-head i{ color: var(--color-primary); }

/* CTA pequeño */
.eh-cta{ text-align:center; margin-top:.25rem; }
.btn-fill{
  position:relative; display:inline-block;
  padding:.7rem 1.2rem; border-radius:.5rem;
  color: var(--color-primary); border:2px solid var(--color-primary);
  font-weight:800; text-decoration:none; overflow:hidden;
  transition: color .3s ease, transform .2s ease;
}
.btn-fill::before{
  content:""; position:absolute; inset:0; transform: translateX(-100%);
  background: var(--color-primary); z-index:-1; transition: transform .35s ease;
}
.btn-fill:hover{ color:#fff; transform: translateY(-2px); }
.btn-fill:hover::before{ transform: translateX(0); }

.btn-sm{ padding:.55rem 1rem; font-size:.95rem; }

/* reveal on scroll (1x1) */
.reveal-y{ opacity:0; transform: translateY(16px); }
.reveal-y.visible{ opacity:1; transform: translateY(0); transition: opacity .5s ease, transform .5s ease; }
.ext-grid .reveal-y:nth-child(1){ transition-delay:.0s; }
.ext-grid .reveal-y:nth-child(2){ transition-delay:.12s; }
.ext-grid .reveal-y:nth-child(3){ transition-delay:.24s; }
.ext-grid .reveal-y:nth-child(4){ transition-delay:.36s; }



    .section--full2{
      width:100%;
      position:relative;
  background-color: #ffffff;
  background-image:  linear-gradient(#02345f1e 1px, transparent 1px), linear-gradient(to right, #02345f1e 1px, #ffffff 1px);
  background-size: 20px 20px;
    }