/* =====================================
   INSTITUTIONAL THEME – CLEANED (same look) CON IA
   ===================================== */

/* ===== 0. Fonts ===== */
/* ===== Importar fuente Gilroy ===== */

/* Fuente global: Gilroy Heavy */
@font-face {
  font-family: 'Gilroy';
  src: url('/fonts/Gilroy-Heavy.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
body, h1, h2, h3, h4, h5, h6, p, li, a, span {
  font-family: 'Gilroy', Arial, sans-serif;
}

/* Tamaños base */
body {
  font-size: 16px;
  line-height: 1.6;
  color: #333; /* color por defecto */
}
h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }



/* ===== 1. Variables ===== */
:root {
  --color-primario: #00537A;
  --color-secundario: #FFBA42;
  --color-fondo: #F5F9FC;
  --color-texto: #333;
  --color-azul-oscuro: #0B1E34;
}

/* ===== 2. Reset & Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #f9f9f9;
  color: #333;
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Young Serif', serif;
  font-weight: normal;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
section { padding: 3rem 2rem; max-width: 1200px; margin: auto; }

h1.titulo, h2.titulo, h3.titulo { text-align: center; font-size: 2rem; padding-top: 50px; }

/* ===== 3. Navbar base (genérico) ===== */
.navbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 2rem; background-color: #f8f8f8; border-bottom: 1px solid #ddd;
}
.logo { font-size: 1.5rem; font-weight: bold; color: #005baa; text-decoration: none; }
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a { text-decoration: none; color: #333; font-weight: 500; }
.hamburger { font-size: 2rem; cursor: pointer; display: none; color: transparent; }

/* ===== 4. Main menu (sticky) ===== */
.main-menu {
  background-color: #0B1E34; padding: 1.5rem 1rem; position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.menu-wrapper { display: flex; justify-content: space-between; align-items: center; }
/* Aumenta tamaño del logo */

.logo-header {
  width: 350px !important;   /* o 400px si quieres */
  height: auto !important;
  max-height: none !important;
  display: block;
  margin-right: 50px;
}

/* Ajusta el header para que no "apriete" el logo */
.menu-wrapper {
  align-items: center;   /* centra verticalmente */
  padding: 10px 20px;    /* agrega espacio arriba/abajo */
  min-height: 120px;     /* fuerza altura mínima del header */
}




/* nav-links en header principal */
.nav-links { list-style: none; display: flex; gap: 2rem; padding: 0; margin: 0; }
.nav-links a {
  color: white; text-decoration: none; font-weight: bold; font-size: 1.1rem;
  background-color: #004c97; padding: 0.6rem 1rem; border-radius: 8px; transition: background-color 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { background-color: #003f7f; }
.menu-toggle, .hamburger { display: none; }

/* ===== 5. Carrusel ===== */
.carousel-container { position: relative; width: 100%; height: clamp(520px, 75vh, 900px); overflow: hidden; }
.carousel-slide { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 1s ease-in-out; }
.carousel-slide.active { opacity: 1; }
.carousel-slide img { object-fit: cover; width: 100%; height: 100%; }
.prev-button, .next-button {
  position: absolute; top: 50%; transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 1rem; font-size: 1.5rem; cursor: pointer; z-index: 10; border-radius: 5px;
}
.prev-button { left: 1rem; } .next-button { right: 1rem; }

/* ===== 6. Index / Institucional ===== */
.instituto-header { text-align: center; margin-bottom: 2rem; }
.titulo-institucional { color: #00537A; font-size: 1.6rem; font-weight: bold; margin-bottom: 0.5rem; text-align: center; }
.lema-institucional { color: #F39200; font-size: 1.3rem; font-weight: 600; margin-bottom: 1rem; }
.instituto-contenido p { text-align: justify; font-size: 1rem; line-height: 1.6; color: #333; margin-bottom: 1rem; }
.cita-freire { font-style: italic; color: #444; text-align: justify; }

/* ===== 7. Tarjetas (layout final estable) ===== */
:root{ --badge-size: 124px; --card-min: 520px; --title-height: 110px; }
.tarjetas { display: grid; gap: 2rem; row-gap: calc(var(--badge-size)/2 + 1.25rem); align-items: stretch; padding: 3rem 1rem; }
@media (min-width: 1200px){ .tarjetas{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 768px) and (max-width: 1199.98px){ .tarjetas{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px){ .tarjetas{ grid-template-columns: 1fr; row-gap: calc(var(--badge-size)/2 + 1rem); justify-items: center; } }

.tarjetas .card{
  position: relative; display: flex; flex-direction: column; gap: .8rem; min-height: var(--card-min);
  padding: 1.25rem 1.5rem calc(var(--badge-size)/2 + 1.25rem); border-radius: 20px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.tarjetas .card h2{
  margin: 0 0 1rem 0; line-height: 1.2; text-align: center; text-wrap: balance; min-height: var(--title-height);
  display: flex; align-items: flex-end; justify-content: center;
}
.tarjetas .card p{ margin: 0; line-height: 1.6; overflow-wrap: anywhere; }

/* colores por card */
.card:nth-child(1) { background-color:  #8ccce4; color: #fff; }
.card:nth-child(2) { background-color: #F55E10; color: #fff; }
.card:nth-child(3) { background-color: #189DD3; color: #fff; }
.card:nth-child(4) { background-color: #FFBA42; color: #fff; }

/* variantes por clase (por si se usan) */
.amarillo { background-color: #FFBA42; color: #fff; }
.celeste  { background-color: #189DD3; color: #fff; }
.anaranjado { background-color: transparent; color: #F55E10; }

.tarjetas .personaje-circulo{
  position: absolute; left: 50%; bottom: calc(-1 * var(--badge-size) / 2); transform: translateX(-50%);
  width: var(--badge-size); height: var(--badge-size); border-radius: 50%; overflow: hidden;
  border: 6px solid var(--color-azul-oscuro); background-color: #fff;
}
.tarjetas .personaje-circulo img{ width: 100%; height: 100%; object-fit: contain; display: block; }

/* ===== 8. Niveles (FIX responsive final) ===== */
.niveles{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; align-items: stretch; justify-items: center; }
.nivel-card{ background:#fff; border:3px solid var(--nivel-color); border-radius:20px; box-shadow:0 4px 12px rgba(0,0,0,0.08); 
  padding:1.25rem 1.25rem 1.6rem; display:flex; flex-direction:column; gap:.75rem; max-width:340px; width:100%; }
.nivel-card h3{ margin:0; line-height:1.2; padding:.7rem 1rem; border-radius:12px; background:var(--nivel-color); color:#fff; align-self:center; }
.nivel-card p{ margin:0; color:#333; text-align:center; font-size:1.1rem; line-height:1.65; overflow-wrap:anywhere; }
.nivel-card .boton{ align-self:center; margin-top:auto; }
@media (max-width: 420px){ .nivel-card{ padding:1rem 1rem 1.25rem; } .nivel-card p{ font-size:1rem; } }

/* Colores por nivel */
.nivel-card.preescolar{ --nivel-color: #8CCCE4; }
.nivel-card.primaria  { --nivel-color: #F55E10; }
.nivel-card.secundaria{ --nivel-color: #189DD3; }
.nivel-card.guarderia { --nivel-color: #FFBA42; }

/* ===== 9. Video ===== */
.video-container{ max-width: 800px; margin: 0 auto; }
video { width: 100%; border-radius: 10px; }

/* ===== 10. Footer (único) ===== */
footer {
   background-color:
    #003f7f; color:
     white; 
     padding: 1rem;
      text-align: center; 
    }

/* ===== 11. Page: Nosotros ===== */
.page-nosotros { background-color: #f7f9fc; color: #333; }
.header-dinamico { background-color: #005baa; padding: 1.5rem 1rem; color: white; }
.contenedor-header { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.contenido-nosotros { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
.seccion-nosotros { background: white; border-left: 6px solid #005baa; border-radius: 8px; margin-bottom: 2rem; padding: 
  1.5rem; text-align: left; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
.seccion-nosotros h2 { color: #005baa; margin-top: 0; }
.seccion-nosotros p, .seccion-nosotros blockquote { line-height: 1.6; margin: 0.8rem 0; }
.seccion-nosotros blockquote { font-style: italic; border-left: 4px solid #005baa; padding-left: 1rem; color: #555; }
.valores { text-align: center; margin-bottom: 3rem; }
.valores h2 { color: #005baa; margin-bottom: 1.5rem; }
.valores-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; justify-items: center; }
.valor { background: white; border: 3px solid; border-radius: 8px; padding: 1.2rem; box-shadow: 0 4px 8px rgba(0,0,0,0.05); text-align: center; }
.valor h3 { margin-bottom: 0.5rem; }
.valor-amarillo { border-color: #FFBA42; } /* Amarillo */
.valor-azul     { border-color: #00537A; } /* Azul */
.valor-naranja  { border-color: #FF8000; } /* Naranja */
.valor-celeste  { border-color: #8CCCE4; } /* Celeste */


@media (max-width: 768px) {
  .contenedor-header { flex-direction: column; gap: 1rem; }
  .nav-links { flex-direction: column; }
}

/* ===== 12. Page: Contacto ===== */
.page-contacto { background-color: #f7f9fc; color: #333; }
.contenido-contacto { max-width: 1100px; margin: 2rem auto; padding: 0 1rem; text-align: center; }
.contenido-contacto h1 { color: #005baa; margin-bottom: 1.5rem; }
.boxes-contacto { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: center; margin: 2rem auto; max-width: 1100px; }
.info-box { flex: 1 1 280px; max-width: 320px; border: 3px solid; border-radius: 10px; padding: 1.5rem; background: #fff;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; }
.info-box h2 { margin-top: 0.8rem; }
.box-azul { border-color: #189DD3; } .box-amarillo { border-color: #FFBA42; }

.form-map-container { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: space-between; max-width: 1100px; margin: 0 auto; }
.contacto-form, .map-container { flex: 1 1 500px; background: #fff; border-radius: 10px; padding: 1.5rem; box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: left; }
.contacto-form h2, .map-container h2 { color: #005baa; margin-top: 0; }
.contacto-form label { font-weight: bold; display: block; margin-bottom: 0.3rem; }
.contacto-form input, .contacto-form textarea { width: 100%; margin-bottom: 1rem; padding: 0.8rem; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; font-family: inherit; }
.contacto-form button { background-color: #005baa; color: white; border: none; padding: 0.8rem 1.2rem; border-radius: 6px; font-size: 1rem; cursor: pointer; }
.contacto-form button:hover { background-color: #004c97; }
#mensajeConfirmacion { display: none; margin-top: 1rem; color: #2d6b00; font-weight: bold; }

@media (max-width: 800px) {
  .contenedor-header { flex-direction: column; gap: 1rem; }
  .nav-links { flex-direction: column; }
  .form-map-container { flex-direction: column; }
}

/* ===== 13. Page: Oferta Académica ===== */
.page-oferta{ background-color: #f7f9fc; color: #333; }
.header-dinamico { background-color: #005baa; color: white; padding: 1.5rem 1rem; }
.contenedor-header { display: flex; justify-content: space-between; align-items: center; max-width: 1100px; margin: 0 auto; }
.logo-header { max-height: 75px; }
.nav-links { list-style: none; display: flex; justify-content: center; align-items: center; gap: 2rem; padding: 0; margin: 0; }
.nav-links a { color: white; text-decoration: none; font-weight: bold; font-size: 1.1rem; background-color: #FFBA42; padding: 0.6rem 1rem;
   border-radius: 8px; transition: background-color 0.3s ease; }
.nav-links a:hover, .nav-links a.active { background-color: #003f7f; }
main.contenedor { max-width: 1000px; margin: 2rem auto; padding: 1rem; }
.nivel { margin-bottom: 3rem; background: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.nivel h2 { margin: 0; font-size: 1.8rem; padding: 1rem; border-radius: 10px 10px 0 0; color: white; text-align: center; }
.nivel p { font-size: 1rem; text-align: justify; margin-top: 1.5rem; line-height: 1.6; }
.nivel.preescolar h2 { background-color:#00537A; }
.nivel.primaria h2 { background-color: #F55E10; }
.nivel.secundaria h2 { background-color:#189DD3; }
.nivel.guarderia h2 { background-color: #FFBA42; }
.boton { display: inline-block; margin-top: 1.2rem; padding: 0.6rem 1.2rem; background-color: #005baa; color: white;
   border-radius: 6px; text-decoration: none; transition: background-color 0.3s ease; }
.boton:hover { background-color: #003f7f; }
@media (max-width: 768px) {
  .contenedor-header { flex-direction: column; align-items: center; text-align: center; }
  .nav-links { flex-direction: column; gap: 0.5rem; }
  .nav-links a { display: block; width: 100%; max-width: 300px; margin: 0.2rem auto; font-size: 1rem; padding: 0.6rem; }
  .logo-header { max-height: 60px; }
}

/* ===== 14. Page: Servicios ===== */
.page-servicios { background-color: #f7f9fc; color: #333; }
.header-dinamico { background-color: #005baa; padding: 1.5rem 1rem; color: white; }
.contenedor-header { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.logo-header { max-height: 80px; }
.servicios { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin: 2rem auto; max-width: 1100px; padding: 0 1rem; }
.tarjeta-servicio { border: 3px solid currentColor; border-radius: 12px; padding: 1.5rem; width: 260px; background-color: #fff;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1); text-align: center; transition: transform 0.3s ease; }
.tarjeta-servicio:hover { transform: translateY(-5px); }
.tarjeta-servicio i { margin-bottom: 0.8rem; display: block; }
.tarjeta-azul { color: #00537A  ; }
.tarjeta-naranja { color: #F55E10 ; }
.tarjeta-celeste { color: #8CCCE4 ; }
.tarjeta-amarillo { color: #FFBA42 ; }
.tarjeta-servicio h3 { font-size: 1.3rem; margin-bottom: 0.5rem; font-weight: bold; }
.tarjeta-servicio p { font-size: 1rem; color: #333; }
@media (max-width: 768px) { .contenedor-header { flex-direction: column; gap: 1rem; } .nav-links { flex-direction: column; } }

/* ===== 15. Imágenes Circulares ===== */
.imagen-circular { width: 120px; height: 120px; object-fit: cover; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 10px rgba(0,0,0,0.2); }

/* ===== 16. Landing / Oferta con imagen ===== */
.encabezado-landing { background-color: var(--color-primario); color: white; text-align: center; padding: 4rem 2rem; }
.encabezado-landing h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.encabezado-landing p { font-size: 1.2rem; margin-bottom: 2rem; }


.oferta-academica-preescolar { background-color: white; border-top: 4px solid var(--color-secundario); }
.contenedor-oferta { display: flex; flex-wrap: wrap; gap: 2rem; align-items: center; }
.texto-oferta { flex: 1 1 600px; }
.imagen-oferta { flex: 1 1 300px; text-align: center; }
.imagen-oferta img { max-width: 100%; height: auto; }

.formulario-contacto { background-color: var(--color-primario); color: white; padding: 3rem 2rem; border-radius: 8px; }
.formulario-contacto form { display: grid; gap: 1rem; max-width: 600px; margin: auto; }
.formulario-contacto label { font-weight: bold; }
.formulario-contacto input, .formulario-contacto textarea { padding: 0.75rem; border: none; border-radius: 5px; font-family: 'Segoe UI', sans-serif; }
.formulario-contacto button { background-color: var(--color-secundario); color: var(--color-primario); padding: 0.75rem;
   border: none; border-radius: 5px; font-weight: bold; cursor: pointer; }
.formulario-contacto button:hover { background-color: #e0a832; }

/* ===== 17. WhatsApp buttons ===== */
.btn-whatsapp { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 56px; height: 56px;
   border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; 
   box-shadow: 0 8px 24px rgba(37,211,102,.45); z-index: 999; transition: transform .2s ease, box-shadow .2s ease; text-decoration: none; }
.btn-whatsapp i { font-size: 28px; }
.btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(37,211,102,.6); }

.whatsapp-button { position: fixed; bottom: 20px; right: 20px; background-color: #25D366; color: white; font-weight: bold;
   padding: 12px 18px; border-radius: 50px; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.2); z-index: 1000; 
   display: flex; align-items: center; gap: 10px; transition: background-color 0.3s ease; }
.whatsapp-button:hover { background-color: #1ebe5d; }
.whatsapp-icon { width: 24px; height: 24px; }

/* ===== 18. Beneficios secundaria (lista colorida) ===== */
.lista-beneficios { list-style: none; padding: 0; margin: 0; }
.lista-beneficios li { font-size: 18px; margin-bottom: 10px; font-weight: bold; }
.color1 { color: #00537A; }
.color2 { color: #FFBA42; }
.color3 { color: #0B1E34; }
.color4 { color: #189DD3; }
.color5 { color: #F55E10; }

/* ===== 19. Galería ===== */
.galeria { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-top: 20px; }
.galeria img { width: 100%; height: auto; border-radius: 12px; border: 4px solid #00537A; box-shadow: 0 4px 10px rgba(11, 30, 52, 0.3); 
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.galeria img:hover { transform: scale(1.05); box-shadow: 0 6px 15px rgba(24, 157, 211, 0.6); border-color: #F55E10; }
section h2.titulo { text-align: center; font-size: 2rem; margin-bottom: 20px; color: #00537A; position: relative; }
section h2.titulo::after { content: ""; display: block; width: 80px; height: 4px; background-color: #FFBA42; margin: 8px auto 0; border-radius: 2px; }

/* ===== 20. Responsive genérico ===== */
@media (max-width: 768px) {
  .hamburger { display: block; font-size: 1.8rem; color: white; cursor: pointer; }
  .nav-links { max-height: 0; overflow: hidden; flex-direction: column; width: 100%; gap: 1rem; padding: 0; background-color: #005baa;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out; }
  .nav-links li { width: 100%; text-align: center; }
  .nav-links li a { background-color: transparent; width: 80%; padding: 0.8rem; display: block; margin: 0 auto; border: 1px solid #ffffff; border-radius: 8px; }
  .menu-toggle:checked ~ .nav-links { max-height: 500px; padding: 1rem 0; }
  .carousel-container { height: 30vh; }
}

/* Footer decorativo */
.footer-decoracion {
  width: 100%;
  height: 70px; /* ajusta según tamaño de tu imagen */
  background: url("images/") repeat-x center;
  background-size: contain; /* mantiene proporciones */
  margin-bottom: 1rem; /* separa de texto */
}

/* Footer base */
footer {
  background-color: #003f7f;
  color: white;
  padding: 1rem;
  text-align: center;
  position: relative;
}

/* Redes sociales */
.social-icons {
  margin-top: 1rem;
  display: flex;
  gap: .75rem;
  justify-content: center;
}

.social-icons a {
  font-size: 1.6rem;
  transition: color 0.3s ease;
  color: #F55E10; /* anaranjado */
}

.social-icons a:nth-child(even) {
  color: #FFBA42; /* amarillo */
}

.social-icons a:hover {
  color: #189DD3; /* celeste institucional */
}
/* === Franja decorativa en el footer === */
.footer-decoracion {
  width: 100%;
  height: 70px; /* Ajusta según alto de tu imagen */
  background-size: contain; /* Mantiene proporciones de la imagen */
  margin-bottom: 1rem; /* Espacio entre franja y texto */
}









/*Preescolar*/

.areas-preescolar{
  background-color: #fff;
  padding: 3rem 2rem;
  text-align: center;
}

.areas-preescolar h2 {
  color: #00537A;
  font-size: 2.2rem;
  margin-bottom: 2rem;
}

.grid-areas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.area {
  background-color: #189DD3 ;
  color: #0B1E34;
  font-weight: bold;
  padding: 1rem 1.2rem;
  border-radius: 10px;
  font-size: 1.1rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: transform 0.3s ease, border 0.3s ease;
  border: 2px solid transparent;
}

.area:hover {
  transform: scale(1.05);
  border: 2px solid #F55E10;
}
 

.bloque-asignaturas {
  text-align: center;
  padding: 3rem 2rem;
}

.bloque-asignaturas h2 {
  font-size: 2rem;
  color: #0B1E34;
  margin-bottom: 2rem;
}

.grid-asignaturas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
  justify-items: center;
}

.asignatura {
  background-color: var(--color);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.asignatura:hover {
  transform: scale(1.1);
}

.asignatura span {
  font-size: 0.8rem;
  margin-top: 0.5rem;
  font-weight: bold;
}

.asignaturas-combinadas {
  padding: 4rem 2rem;
  text-align: center;
  background-color: #fff;
}

.asignaturas-combinadas h2 {
  font-size: 2rem;
  color: #00537A;
  margin-bottom: 2rem;
}

.grid-combinadas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.asignatura-combinada {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--color);
  border-radius: 12px;
  padding: 1rem;
  color: white;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}

.asignatura-combinada:hover {
  transform: translateY(-5px);
}

.icono-circular {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: white;
  color: var(--color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 0.8rem;
}

.nombre-asignatura {
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
}



:root {
  --color-ingles: #00537A;
  --color-espanol: #F55E10;
  --color-matematicas: #189DD3;
  --color-ciencias: #452774;
  --color-steam: #FFBA42;
  --color-robotica: #0B1E34;
  --color-musica: #6A1B9A;
  --color-educacion: #2E7D32;
  --color-talleres: #FFA94D;
}

.asignaturas-combinadas {
  padding: 4rem 2rem;
  text-align: center;
 color:var(--color-fondo);
}

.asignaturas-combinadas h2 {
  font-size: 2rem;
  color: #00537A;
  margin-bottom: 2rem;
}

.grid-combinadas {

  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas fijas */
  gap: 2.5rem;
  justify-items: center;}

.asignatura-combinada {
  background-color: var(--color);
  border-radius: 16px;
  padding: 1.5rem;
  width: 180px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transition: transform 0.3s ease;
}

.asignatura-combinada:hover {
  transform: scale(1.06);
}

.icono-circular {
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  width: 100px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 2rem;
}

.nombre-asignatura {
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}



/**/

.bloques-invertidos {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 4rem 2rem;
  flex-wrap: wrap;
  text-align: center;
}

.bloque {
  width: 280px;
  background-color: #fff;
  border-radius: 12px;
  padding: 2rem 1rem 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.bloque h3 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: #003366;
}

.bloque p {
  font-size: 0.95rem;
  margin-bottom: 1.5rem;
  color: #333;
}

.icono-circular {
  width: 90px;
  height: 90px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  background-color: #e6f0fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icono-circular img {
  width: 80%;
  height: auto;
}




/* ===== Botón flotante WhatsApp ===== */
.btn-whatsapp {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  z-index: 999;
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
}

.btn-whatsapp i { font-size: 28px; }

.btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(37,211,102,.6);
}
/* Grid responsive para los círculos */
.niveles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.25rem;
  align-items:center;
  justify-items:center;
  padding-block:.5rem 1rem;
}

/* Círculo base */
.nivel-card{
  --ring: conic-gradient(
    from 180deg,
    #ffffff00 0% 20%,
    rgba(0,0,0,.08) 20% 22%,
    #ffffff00 22% 45%,
    rgba(0,0,0,.08) 45% 47%,
    #ffffff00 47% 70%,
    rgba(0,0,0,.08) 70% 72%,
    #ffffff00 72% 100%
  );
  position:relative;
  aspect-ratio:1/1;               /* círculo perfecto */
  width:min(240px, 42vw);          /* tamaño flexible */
  border-radius:50%;
  padding:1.1rem 1.2rem 2.6rem;    /* espacio también para el botón */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:.35rem;
  background:#fff;                 /* será sobreescrito por color por nivel */
  color:#0f172a;
  box-shadow:0 6px 24px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06);
  overflow:hidden;
  isolation:isolate;
  transition:transform .35s ease, box-shadow .35s ease;
}

/* Anillo decorativo alrededor del círculo */
.nivel-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:3px;                     /* grosor del anillo */
  background:var(--ring);
  -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}

/* Hover con “lift” sutil */
.nivel-card:hover{
  transform:translateY(-4px) scale(1.02);
  box-shadow:0 10px 28px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.08);
}

/* Tipografía dentro del círculo */
.nivel-card h3{
  font-family: "Young Serif", ui-serif, Georgia, serif;
  font-size: clamp(1rem, 2.6vw, 1.15rem);
  letter-spacing:.5px;
}
.nivel-card p{
  font-size:.9rem;
  line-height:1.25rem;
  opacity:.9;
  max-width:24ch;
  margin:0;
  transition:opacity .25s ease, transform .25s ease;
}
.nivel-card:hover p{ opacity:1; transform:translateY(-1px); }

/* Botón dentro del círculo */
.nivel-card .boton{
  position:absolute;
  bottom:12px;
  left:50%;
  transform:translateX(-50%);
  display:inline-block;
  padding:.55rem .9rem;
  border-radius:999px;
  font-weight:600;
  text-decoration:none;
  background:#0f172a;
  color:#fff;
  box-shadow:0 4px 14px rgba(0,0,0,.15);
  transition:filter .25s ease, transform .25s ease;
}
.nivel-card .boton:hover{ filter:brightness(1.1); transform:translateX(-50%) translateY(-2px); }

/* Colores por nivel */





/* Accesibilidad: menos movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .nivel-card, .nivel-card p, .nivel-card .boton{ transition:none !important; }
}

/* Fallback para pantallas muy pequeñas: tarjetas redondeadas si no cabe el círculo */
@media (max-width: 420px){
  .nivel-card{
    width:100%;
    aspect-ratio:auto;
    border-radius:1.25rem;
    padding:1rem 1rem 3.25rem;
  }
}


/* === Niveles Educativos con colores uniformes (ajustados) === */



/* === Alineación corregida para Niveles Educativos === */
.nivel-card{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* título arriba, texto medio, botón abajo */
  gap: 1rem;
  padding: 1.75rem 1.5rem;
  border-radius: 24px;
}

.nivel-card h3{
  margin: 0;
  line-height: 1.2;
  padding: .9rem 1.2rem;
  border-radius: 12px;
  align-self: center;
}

.nivel-card p{
  margin: 0;
  flex-grow: 1;
}

.nivel-card .boton{
  align-self: center;
  margin-top: 1rem;
}


/* === Refinamiento: texto más arriba y botón pegado abajo === */
.nivel-card{
  display: flex;
  flex-direction: column;
  /* quitamos space-between para que el texto no se vaya tan abajo */
  gap: 0.9rem;
  padding: 1.25rem 1.5rem 1.75rem;   /* menos padding superior, un poco más abajo */
  border-radius: 24px;
}

.nivel-card h3{
  margin: 0;
  line-height: 1.2;
  padding: .85rem 1.2rem;
  border-radius: 12px;
  align-self: center;
}

.nivel-card p{
  margin: 0;
  /* el párrafo ocupa su tamaño natural */
}

.nivel-card .boton{
  align-self: center;
  margin-top: auto;     /* 👈 empuja el botón al fondo */
}

/* Altura mínima para uniformar tarjetas en desktop */
@media (min-width: 992px){
  .nivel-card{ min-height: 420px; }
}


/* === Niveles Educativos estilo alternativo: fondo blanco + borde de color === */
.nivel-card{
  background-color: #fff;
  border-radius: 20px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.nivel-card h3{
  margin: 0;
  line-height: 1.2;
  padding: 0.8rem 1.2rem;
  border-radius: 12px;
  color: #fff;
  align-self: center;
}

/* Bordes y colores por nivel */


.nivel-card p{
  margin: 0;
  color: #333;
  text-align: justify;
}

.nivel-card .boton{
  align-self: center;
  margin-top: auto;
}


/* === FIX: Estilo alternativo limpio (fondo blanco + borde de color + título en pill de color) === */

/* Variables por tarjeta */
.nivel-card.preescolar{ --nivel-color: #8CCCE4; }
.nivel-card.primaria  { --nivel-color: #F55E10; }
.nivel-card.secundaria{ --nivel-color: #189DD3; }
.nivel-card.guarderia { --nivel-color: #FFBA42; }

/* Base de tarjeta */
.nivel-card{
  background:#fff !important;   /* fuerza fondo blanco */
  color:#333 !important;
  border:3px solid var(--nivel-color);
  border-radius:20px;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  display:flex;
  flex-direction:column;
  gap:1rem;
  padding:1.25rem 1.25rem 1.6rem;
}

/* Título en pastilla de color */
.nivel-card h3{
  background:var(--nivel-color);
  color:#fff !important;
  margin:0;
  padding:.75rem 1.1rem;
  border-radius:12px;
  align-self:center;
  line-height:1.15;
}

/* Texto y botón */
.nivel-card p{ margin:0; text-align:justify; }
.nivel-card .boton{ align-self:center; margin-top:auto; }


/* === Ajuste: texto más grande dentro de las tarjetas === */
.nivel-card p {
  font-size: 1.1rem;    /* un poco más grande */
  line-height: 1.65;    /* más aire entre líneas */
  margin: 0;
  text-align: justify;
}


/* === Ajuste: texto justificado con guiones automáticos === */
.nivel-card p {
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0;
  text-align: justify;
  hyphens: auto;
}


/* === Mejora de legibilidad en párrafos ===
   - Usa alineación a la izquierda por defecto para evitar huecos grandes
   - En pantallas anchas aplica justificado con guiones automáticos
   - Añade prefijos de hyphens para mejor soporte
   - Evita estirar la última línea
*/
.nivel-card p{
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0;
  text-align: left;              /* por defecto: izquierda, sin huecos */
  word-spacing: normal;
  letter-spacing: normal;
  text-align-last: left;
  overflow-wrap: anywhere;       /* permite saltos suaves si hay palabras largas */
}

@media (min-width: 1280px){
  .nivel-card p{
    text-align: justify;
    text-align-last: left;       /* evita estirar última línea */
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
  }
}


/* === Variante: texto centrado en las tarjetas === */
.nivel-card p {
  font-size: 1.1rem;
  line-height: 1.65;
  margin: 0;
  text-align: center;
}


/* === Forzar centrado del texto en todas las tarjetas (alta especificidad) === */
/* Coloca este archivo al FINAL de tus estilos para que gane la cascada. */
.niveles .nivel-card p,
section.niveles .nivel-card p,
div.niveles .nivel-card p {
  text-align: center !important;
  text-align-last: center !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  -ms-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: anywhere;
}

/*Boton de WhatsApp en contactos*/

.whatsapp-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366;
  color: white;
  font-weight: bold;
  padding: 12px 18px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.3s ease;
}

.whatsapp-button:hover {
  background-color: #1ebe5d;
}

.whatsapp-icon {
  width: 24px;
  height: 24px;
}


/*Letras de beneficios de secundaria*/
.lista-beneficios {
  list-style: none; /* Elimina los puntos */
  padding: 0;
  margin: 0;
}

.lista-beneficios li {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
}

.color1 { color: #00537A; }  /* Azul oscuro */
.color2 { color: #FFBA42; }  /* Amarillo */
.color3 { color: #0B1E34; }  /* Azul oscuro */
.color4 { color: #189DD3; }  /* Azul claro */
.color5 { color: #F55E10; }  /* Anaranjado */
/* Si quieres usar el celeste también, puedes agregar un sexto ítem con: 
.color6 { color: #8CCCE4; } */

/* === FIX responsive Niveles === */
.niveles{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  justify-items: center;
}

.nivel-card{
  /* quitar el círculo rígido */
  aspect-ratio: auto !important;
  width: 100%;
  max-width: 340px;
  border-radius: 20px;
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.nivel-card h3{
  margin: 0;
  line-height: 1.2;
  padding: .7rem 1rem;
  border-radius: 12px;
  align-self: center;
}

.nivel-card p{
  margin: 0;
  line-height: 1.55;
  text-align: center;          /* si prefieres: left */
  overflow-wrap: anywhere;
  flex: 1 1 auto;              /* ocupa el espacio disponible */
}

/* botón en flujo normal, pegado abajo */
.nivel-card .boton{
  position: static !important; /* <- clave: NO absoluto */
  align-self: center;
  margin-top: auto;            /* lo empuja al fondo de la tarjeta */
  transform: none !important;
}

/* un poco más compacto en móviles estrechos */
@media (max-width: 420px){
  .nivel-card{
    padding: 1rem 1rem 1.25rem;
  }
  .nivel-card p{ font-size: 1rem; }
}

/* === Tarjetas: layout final estable === */
:root{
  --badge-size: 124px;    /* diámetro del círculo */
  --card-min: 520px;      /* altura uniforme en escritorio */
}

/* Grid con columnas exactas */
.tarjetas{
  display: grid;
  gap: 2rem;
  row-gap: calc(var(--badge-size)/2 + 1.25rem); /* hueco por el saliente */
  align-items: stretch;
}

@media (min-width: 1200px){                     /* 4 columnas fijas */
  .tarjetas{ grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) and (max-width: 1199.98px){  /* 2 columnas */
  .tarjetas{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px){                   /* 1 columna */
  .tarjetas{
    grid-template-columns: 1fr;
    row-gap: calc(var(--badge-size)/2 + 1rem);
  }
}

/* Tarjeta */
.tarjetas .card{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: var(--card-min);
  padding: 1.25rem 1.5rem calc(var(--badge-size)/2 + 1.25rem);
  border-radius: 20px;
}

/* Título y texto: siempre arriba, sin estirar */
.tarjetas .card h2{
  margin: 0;
  line-height: 1.2;
  text-align: center;
}
.tarjetas .card p{
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
  /* CLAVE: no ocupar espacio flexible para que no cambie su posición */
  flex: 0 0 auto;
}

/* Personaje (siempre igual que el diseño original) */
.tarjetas .personaje-circulo{
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--badge-size) / 2);
  transform: translateX(-50%);
  width: var(--badge-size);
  height: var(--badge-size);
}
.tarjetas .personaje-circulo img{
  width: 100%; height: 100%; display: block; object-fit: contain;
}

/* Alturas responsivas: compacta un poco en pantallas medianas y quita min-height en móvil */
@media (max-width: 1199.98px){
  :root{ --card-min: 500px; }
}
@media (max-width: 991.98px){
  :root{ --card-min: 460px; }
}
@media (max-width: 767.98px){
  .tarjetas .card{
    min-height: auto;                                /* sin espacio muerto */
    padding-bottom: calc(var(--badge-size)/2 + 1rem); /* hueco justo para el badge */
  }
}

/* Centrar las tarjetas en móviles */
@media (max-width: 767.98px){
  .tarjetas{
    justify-items: center;  /* centra horizontalmente cada tarjeta */
  }
  .tarjetas .card{
    margin-left: auto;
    margin-right: auto;     /* asegura centrado si hay algún resto de flex/grid */
  }
}

/* === ARREGLO DEFINITIVO: títulos alineados en el mismo eje Y === */

/* 1) Neutraliza reglas generales de .card dentro de .tarjetas */
.tarjetas .card{
  /* evita el centrado vertical heredado */
  justify-content: flex-start !important;
  align-items: stretch;
  /* usa el padding uniforme del layout de tarjetas */
  padding: 1.25rem 1.5rem calc(var(--badge-size)/2 + 1.25rem) !important;
  gap: .8rem !important;
  width: auto !important;      /* ignora width:300px genérico */
  max-width: none;
}

/* 2) Reserva un bloque de altura para el título (igual en todas) */
:root{
  --title-height: 120px; /* ajusta si lo quieres más alto/bajo */
}

.tarjetas .card h2{
  margin: 0 0 1rem 0 !important;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
  /* bloque uniforme para alinear */
  min-height: var(--title-height);
  display: flex;
  align-items: flex-end;   /* el texto “asienta” abajo del bloque */
  justify-content: center;
}

/* Un poco más compacto en pantallas menores */
@media (max-width: 1199.98px){ :root{ --title-height: 110px; } }
@media (max-width: 991.98px){  :root{ --title-height: 100px; } }
@media (max-width: 767.98px){  :root{ --title-height: 86px;  } }

/* 3) Asegura que el párrafo no se estire (para que no empuje el título) */
.tarjetas .card p{
  flex: 0 0 auto !important;
  margin: 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* 4) Personaje: sin cambios, pero recuerda que el grid ya deja hueco */
.tarjetas .personaje-circulo{
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--badge-size) / 2);
  transform: translateX(-50%);
  width: var(--badge-size);
  height: var(--badge-size);
}



/* Estilos de la galería */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
  margin-top: 20px;
}

.galeria img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 4px solid #00537A; /* azul oscuro institucional */
  box-shadow: 0 4px 10px rgba(11, 30, 52, 0.3); /* sombra con #0B1E34 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover llamativo */
.galeria img:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(24, 157, 211, 0.6); /* azul claro institucional */
  border-color: #F55E10; /* cambia borde a anaranjado al pasar el mouse */
}

/* Título de la galería */
section h2.titulo {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 20px;
  color: #00537A;
  position: relative;
}

section h2.titulo::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background-color: #FFBA42; /* amarillo institucional */
  margin: 8px auto 0;
  border-radius: 2px;
}
/*__________________________________________________________________________________________________________________________________________________________________*/
/* Header base */
nav.main-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(11, 30, 52, 0.85); /* Azul institucional con transparencia */
  backdrop-filter: blur(6px); /* efecto glass suave */
  transition: transform 0.35s ease-in-out, background-color 0.35s ease-in-out;
  z-index: 1000;
  padding: 1rem 2rem;
}

/* Header oculto */
nav.main-menu.header-hide {
  transform: translateY(-100%);
}

/* Header visible */
nav.main-menu.header-show {
  transform: translateY(0);
}

/* Links dentro del header */
nav.main-menu .nav-links a {
  color: #fff;
  background-color: transparent;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.6rem 1rem;
  border-radius: 6px;
  transition: all 0.3s ease;
}

/* Hover en amarillo */
nav.main-menu .nav-links a:hover,
nav.main-menu .nav-links a.active {
  background-color: #FFBA42;
  color: #0B1E34;
}


/* Limitar altura del logo */
.logo-header {
  max-height: 60px;   /* ajusta entre 50–70px */
  width: auto;
  display: block;
}

/* Reducir espacios del header */
nav.main-menu .menu-wrapper {
  padding: 0.3rem 1rem;   /* menos padding arriba/abajo */
  align-items: center;
}









/* Ajuste general del logo */
.logo-header {
  max-height: 55px;   /* 🔽 aquí defines la altura máxima */
  width: auto;
  height: auto;
  object-fit: contain;
}

@media (max-width: 768px) {
  .logo-header {
    max-height: 40px;  /* más compacto en móviles */
  }
}





@media (max-width: 992px){
  nav.main-menu .nav-links{
    position: fixed;
    top: 70px;                     /* 🔽 ajusta a la altura real de tu header */
    left: 0; right: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    background: transparent;       /* 🚀 fondo transparente */
    max-height: 0;                 /* colapsado */
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transition: max-height .35s ease, padding .35s ease, opacity .25s ease;
    z-index: 9999;
  }

  /* Cuando está activo el menú */
  .menu-toggle:checked ~ .nav-links{
    max-height: 80vh;
    padding: 1rem 0;
    opacity: 1;
  }

  /* Estilo de los botones flotantes */
  nav.main-menu .nav-links a{
    width: clamp(200px, 90%, 500px);
    text-align: center;
    padding: .7rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    background: rgba(11,30,52,0.9); /* botones individuales azules */
    color: #fff;
    transition: background .25s ease, color .25s ease, transform .15s ease;
  }

  nav.main-menu .nav-links a:hover,
  nav.main-menu .nav-links a.active{
    background: #FFBA42;  /* hover amarillo */
    color: #0B1E34;
    transform: translateY(-1px);
  }
}




/* ===== Ajustes base (desktop) ===== */
nav.main-menu{ overflow: visible !important; }
nav.main-menu .menu-wrapper{ position: relative; display:flex; align-items:center; justify-content:space-between; }
.logo-header{ max-height: 55px; width:auto; object-fit:contain; }

/* Menú en línea para desktop */
nav.main-menu .nav-links{
  display:flex; align-items:center; gap:1rem; list-style:none; margin:0; padding:0;
}
.hamburger, .menu-toggle{ display:none; }

/* ====== Responsive (<= 992px) ====== */
@media (max-width: 992px){
  /* Logo más compacto */
  .logo-header{ max-height: 42px !important; }

  /* El checkbox NO va en display:none para que funcione el :checked */
  .menu-toggle{
    position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none;
  }

  /* Botón hamburguesa visible y encima de todo */
  .hamburger{
    display:inline-flex !important; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:999px;
    background: rgba(11,30,52,.35); backdrop-filter: blur(4px);
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    z-index:2000; cursor:pointer;
  }
  .hamburger i{ color:#fff; font-size:1.4rem; line-height:1; transition:color .2s, transform .15s; }
  .hamburger:hover i{ color:#FFBA42; transform:translateY(-1px); }

  /* Menú colapsado: panel compacto, SIN fondo general (sólo botones) */
  nav.main-menu .nav-links{
    position: fixed;           /* cae bajo el header */
    top: 70px;                 /* ⬅️ AJUSTA a la altura real de tu header */
    left: 0; right: 0;
    flex-direction: column;
    align-items: center;
    gap: .75rem;
    background: transparent;   /* sin fondo */
    max-height: 0; overflow: hidden;
    opacity: 0; padding: 0;
    transition: max-height .35s ease, padding .35s ease, opacity .25s ease;
    z-index: 1500;
  }
  /* Al marcar el checkbox, se despliega */
  .menu-toggle:checked ~ .nav-links{
    max-height: 80vh; opacity: 1; padding: 1rem 0;
  }

  /* Botones flotantes */
  nav.main-menu .nav-links a{
    width: clamp(200px, 90%, 520px);
    text-align: center;
    padding: .7rem 1rem;
    border-radius: 10px;
    font-weight: 700;
    background: rgba(11,30,52,.9);  /* botón azul individual */
    color:#fff;
    transition: background .25s ease, color .25s ease, transform .15s ease;
  }
  nav.main-menu .nav-links a:hover,
  nav.main-menu .nav-links a.active{
    background:#FFBA42; color:#0B1E34; transform:translateY(-1px);
  }

  /* Evita que otras reglas oculten la hamburguesa */
  nav.main-menu .hamburger{ visibility: visible !important; opacity: 1 !important; }
}






/* === PATCH COMPACTO DE HEADER (pegar al FINAL) ===================== */

/* 0) Altura declarada del header (cámbiala si quieres) */
:root{
  --topbar-h: 0px;   /* si no usas topbar arriba, déjalo en 0 */
  --header-h: 64px;  /* altura objetivo del header en desktop */
}

/* 1) Forzar header compacto y fijo (anula el "sticky" de arriba) */
nav.main-menu{
  position: fixed !important;
  top: var(--topbar-h);
  left: 0; right: 0;
  z-index: 1000;
  padding: 8px 16px !important;             /* menos alto */
  background: rgba(11,30,52,.86) !important;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* 2) Wrapper sin alturas forzadas */
nav.main-menu .menu-wrapper{
  min-height: unset !important;
  padding: 0 !important;
  gap: 12px;
  display: flex; align-items: center; justify-content: space-between;
}

/* 3) LOGO: tamaño controlado (anula width:350px !important anterior) */
nav.main-menu .logo-header{
  width: auto !important;
  max-height: 90px !important;              /* ajusta 50–60px a gusto */
  height: auto !important;
  object-fit: contain;
  margin-right: 12px !important;
  display: block;
}

/* 4) Botones del menú un poco más compactos */
nav.main-menu .nav-links{ display:flex; align-items:center; gap: .8rem; }
nav.main-menu .nav-links a{
  font-size: 1rem !important;
  padding: .5rem .8rem !important;
  border-radius: 8px;
  color:#fff;
  background: transparent;
  transition: background .25s, color .25s, transform .15s;
}
nav.main-menu .nav-links a:hover,
nav.main-menu .nav-links a.active{ background:#FFBA42; color:#0B1E34; transform: translateY(-1px); }

/* 5) Empuje del body para que el contenido no quede bajo el header */
body{ padding-top: calc(var(--topbar-h) + var(--header-h)) !important; }

/* ===== RESPONSIVE (<= 992px) ====================================== */
@media (max-width: 992px){
  :root{ --header-h: 56px; }                 /* header un poco más bajo */
  nav.main-menu{ padding: 6px 12px !important; }
  nav.main-menu .logo-header{ max-height: 40px !important; }

  /* Botón hamburguesa visible */
  .hamburger{
    display: inline-flex !important;
    align-items:center; justify-content:center;
    width: 44px; height: 44px; border-radius: 999px;
    background: rgba(11,30,52,.35);
    position: absolute; right: 8px; top: 50%;
    transform: translateY(-50%); z-index: 2000; cursor: pointer;
  }
  .hamburger i{ color:#fff; font-size:1.35rem; }

  /* Asegura que el checkbox funcione */
  .menu-toggle{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

  /* Menú desplegable: SIN fondo general, sólo botones */
  nav.main-menu .nav-links{
    position: fixed;
    top: calc(var(--topbar-h) + var(--header-h));
    left: 0; right: 0;
    flex-direction: column; align-items: center; gap: .75rem;
    background: transparent;
    max-height: 0; overflow: hidden; opacity: 0; padding: 0;
    transition: max-height .35s, padding .35s, opacity .25s;
    z-index: 1500;
  }
  .menu-toggle:checked ~ .nav-links{ max-height: 80vh; opacity: 1; padding: 1rem 0; }

  /* Botones del panel móvil */
  nav.main-menu .nav-links a{
    width: clamp(200px, 90%, 520px);
    text-align: center;
    background: rgba(11,30,52,.92);
    color:#fff;
    padding: .7rem 1rem !important;
    border-radius: 10px;
  }
  nav.main-menu .nav-links a:hover,
  nav.main-menu .nav-links a.active{ background:#FFBA42; color:#0B1E34; }
}



/*Espacios en textos de colores de primaria,secundarias y los otros 2 *_______________________________________________________________________________________________*/

.beneficios h2 {
  text-align: center;
  color: #003366;
  margin-bottom: 20px; /* aquí defines el espacio */
}


/*Mapa___________________________________________________________________________________________________________*/
.mapa-foto {
  margin: 12px 0 0;
  text-align: center;
}
.mapa-foto img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.mapa-foto figcaption {
  font-size: .9rem;
  color: #6b7280;
  margin-top: 4px;
}




/* Bordes institucionales para las cajitas-__________________________________________________________________ */
.box-amarilla {
  border: 3px solid #FFBA42; /* dorado */
}

.box-verde {
  border: 3px solid #F55E10; /* cambiamos verde → naranja institucional */
}

.box-azul {
  border: 3px solid #00537A; /* azul institucional */
}



/* Contenedor de formulario + mapa */
.form-map-container {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 20px; /* espacio entre ellos */
  flex-wrap: wrap; /* permite que en móvil se apilen */
}

/* Cada bloque (formulario y mapa) */
.contacto-form,
.map-container {
  flex: 1 1 48%; /* 48% del ancho, se ajusta en responsive */
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* El mapa ocupa toda la altura igual que el form */
.mapa-embed iframe {
  width: 100%;
  height: 100%;
  min-height: 400px; /* altura mínima */
  border: 0;
  border-radius: 8px;
}

/* Responsive: se apilan en móviles */
@media (max-width: 900px) {
  .form-map-container {
    flex-direction: column;
  }
  .contacto-form,
  .map-container {
    flex: 1 1 100%;
  }
}