/* Estilo global para el cuerpo del sitio */
body {
  font-family: 'Comfortaa', sans-serif; /* Fuente principal */
  margin: 0;
  padding: 0;
  background-color: #ffffff; /* Fondo blanco */
  color: #000000; /* Texto negro */
  font-size: 1rem;
}

/* Barra de navegación (navbar) */
.navbar {
  display: flex; /* Elementos en fila */
  justify-content: space-between; /* Espacio entre elementos */
  align-items: center; /* Centrado vertical */
  background-color: #ffffff; /* Fondo blanco */
  padding: 1rem 2rem; /* Espaciado interno */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Sombra inferior */
  position: sticky; /* Fija al hacer scroll */
  top: 0; /* Pegado arriba */
  z-index: 100; /* Superposición */
}

/* Contenedor del logo (imagen + texto) */
.logo-container {
  display: flex;
  align-items: center;
}
/* LOGO IZQUIERDO */
.logo-img {
  height: 90px; /*Tamaño de imagen del logo*/
  margin-right: 10px; /* Espacio entre imagen y texto */
}
/* TEXTO CERCA DE LOGO */
.logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e65f12;
}

/* Enlaces de navegación */
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none; /* Sin viñetas */
}

.nav-links a {
  text-decoration: none; /* Quitar subrayado */
  color: #000000; /* Color texto de barra de navegación*/
  font-weight: bold;
  transition: color 0.3s; /* Transición suave */
}

.nav-links a:hover {
  color: #1e90ff; /* Azul al pasar el mouse */
}

/* Estilos para submenú */
.submenu {
  position: relative;
}

/* Menú desplegable oculto inicialmente */
.dropdown {  /* Estilo para el menú desplegable (submenú) */
  display: none;  /* Oculta el submenú por defecto */
  position: absolute;  /* Posiciona el submenú de manera absoluta en relación a su contenedor padre */
  top: 100%; /* Justo debajo del enlace */
  left: 0;
  background-color: #ffffff;  /* Define el color de fondo del submenú */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);  /* Aplica una sombra sutil para dar un efecto de profundidad */
  list-style: none;  /* Elimina los puntos o viñetas de la lista */
  padding: 10px 0;  /* Añade un relleno (espacio) dentro del submenú en la parte superior e inferior */
  border-radius: 8px;  /* Redondea las esquinas del submenú */
  z-index: 99; /* Asegura que esté sobre otros elementos */
  min-width: 150px;
}

/* Mostrar el menú al pasar el mouse */
.submenu:hover .dropdown, 
.dropdown:hover{
  display: block;
}

.dropdown li a {
  display: block;
  padding: 10px 20px;
  color: #000000; /*Texto de submenu del navegador de barra*/
  text-decoration: none;
  transition: background 0.3s;
}

.dropdown li a:hover {
  background-color: #f0f0f0; /* Fondo gris claro al pasar el mouse */
}

/* Botón de menú hamburguesa (visible en móvil) */
.menu-toggle {
  display: none; /* Oculto en escritorio */
  font-size: 1.5rem;
  cursor: pointer;
}
/*--------------------------------------------------------*/
/* CONTENEDOR 1 */
/* Sección principal del sitio (hero section) */
.hero-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  gap: 2rem;
  flex-direction: row; /* Por defecto, horizontal */
}

/* Lado izquierdo (imagen) y derecho (texto) */
.hero-left,
.hero-right {
  flex: 1 1 400px;
  max-width: 700px;
}

/* Imagen del Hero */
.hero-img {
  width: 100%;
  max-width: 600px;
  border-radius: 20px;
  margin-bottom: 2rem;
}

/* Títulos y subtítulos */
.main-title {
  font-size: 4.5rem;
  margin: 0;
  color: #3c78d8;
  text-align: center;
}

.subtitle0 {
  font-size: 2.5rem;
  margin: 0;
  line-height: 1.3;
  color: #ff9900;
  text-align: center;
}

.subtitle1 {
  font-size: 1.9rem;
  margin-bottom: 2rem;
  line-height: 1.4;
  color: #e1302a;
  font-weight: bold;
  text-align: center;
}

.subtitle2 {
  font-size: 1.9rem;
  margin-bottom: 2rem;
  line-height: 1.6;
  text-align: center;
}

/* Botón de llamada a la acción */
.btn-info {
  display: block;
  background-color: #1e90ff;
  color: #ffffff;
  padding: 1rem 2rem;
  text-decoration: none;
  border-radius: 25px;
  font-weight: bold;
  font-size: 1rem;
  transition: background-color 0.3s;
  margin: 2rem auto 0 auto;
  width: fit-content;
}

.btn-info:hover {
  background-color: #52e416;
}

/*----------------------------------------------*/
/*CONTENEDOR 2*/
/* Sección de información adicional SEGUNDO CONTENEDOR*/
.info-section {
  display: flex;  /* Usa Flexbox para organizar los elementos dentro de la sección */
  flex-wrap: wrap;  /* Permite que los elementos se envuelvan en dispositivos pequeños */
  align-items: center;  /* Alinea los elementos verticalmente al centro */
  justify-content: center;  /* Centra los elementos horizontalmente CONTENEDOR*/
  padding: 3rem 2rem;  /* Añade un relleno de 3rem en la parte superior e inferior, 2rem en los lados */
  gap: 2rem;  /* Añade un espacio de 2rem entre los elementos dentro de la sección */
  background-color: #f9f9f9;  /* Establece el color de fondo como un gris claro */
}
/*Tamaño de segundo contenedor*/
.info-left,
.info-form {
  flex: 1 1 400px; /*Tamaño minimo de contenedor*/
  max-width: 700px; /*Tamaño de contenedor*/
}
/*Titulo de 2 contenedor*/
.info-title {
  font-size: 1.8rem;
  margin-bottom: 3rem;
  line-height: 1.6; /* Interlineado cómodo y legible */
}
/*Subtitulo opciones*/
.info-features {
  font-size: 1.4rem;
  margin-bottom: 1rem;
  line-height: 1.6; /* Interlineado cómodo y legible */
}
.check {
  color: #52e416;
  font-weight: bold;
  margin-right: 0.4rem;
}

/*Información de promoción especial*/
.info-promo {
  font-size: 1.4rem;
  font-weight: bold;
  color: #1e90ff;
  line-height: 1.6; /* Interlineado cómodo y legible */
  text-align: center; /*Centrar texto*/
}

/* Formulario estilo popup */
.popup {
  background-color: #ffffff;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
/*Texto Registro*/
.popup h2 {
  margin-top: 0;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  text-align: center; /* Centra el texto */
  color: #ff9900;
}
/*Cajas de texto de registro*/
.popup input,
.popup select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 1rem;
}

/* Agrupación de botones radio */
.radio-group {
  display: flex;
  justify-content: space-between;
  margin: 1rem 0;
}

.radio-group label {
  font-size: 1.1rem;
}

.radio-group input[type="radio"] {
  transform: scale(1.4);  /* Escala el botón radio */
  cursor: pointer;
}

/* Botón del formulario */
.popup button {
  width: 100%;
  padding: 0.75rem;
  background-color: #1e90ff;
  color: #ffffff;
  border: none;
  border-radius: 25px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s;
}

.popup button:hover {
  background-color: #52e416;
}

/* Mensaje de error en el formulario */
.error {
  color: red;
  font-size: 0.85rem;
  display: none; /* Oculto por defecto */
  margin-bottom: 0.5rem;
}
  /*----------------------------------------------*/
/*CONTENEDOR 3*/
 /* CONTENEDOR DE OFERTA */

/* Sección principal de fondo claro con espaciado y contenido centrado */
.oferta {
  background: linear-gradient(135deg, #3cb9fc, #002789); /* Degradado de azul a naranja */
  padding: 30px 20px;               /* Espacio interno */
  display: flex;                    /* Se usa flex para centrar contenido vertical */
  justify-content: center;         /* Centrado horizontal del contenido */
}

/* Contenedor interior con límite de ancho y diseño flexible */
.oferta-container {
  max-width: 1600px;                /* Máximo ancho del contenedor (Permite desplazarse texto y botón)*/
  width: 100%;                      /* Ocupar el ancho disponible */
  display: flex;                    /* Flexbox para alineación */
  align-items: center;             /* Alinear elementos verticalmente al centro */
  justify-content: space-between;  /* Separar texto y botón */
  gap: 20px;                        /* Espacio entre elementos */
  flex-wrap: wrap;                 /* Permitir que se acomode en pantallas pequeñas */
}

/* Contenedor del texto */
.oferta-text {
  flex: 1;                          /* El texto toma el mayor espacio disponible */
}

/* Título principal */
.oferta-title {
  font-size: 1.5rem;                  /* Tamaño grande para el título */
  margin-bottom: 10px;             /* Espacio debajo del título */
  font-family: 'Comfortaa', cursive; /* Fuente personalizada */
  color: #fffb00;                     /* Color negro */
  font-weight: bold; /*Texto en negrita*/
  text-align: center; /*CENTRAR TEXTO*/
}

/* Subtítulo */
.subtitle3 {
  font-size: 1.1rem;                /* Tamaño del subtítulo */
  color: #ffffff;                      /* Gris oscuro */
  margin: 0;                        /* Sin margen extra */
  text-align: center;
}

/* Contenedor del botón */
.oferta-btn {
  flex-shrink: 0;                   /* Evita que el botón se reduzca en pantallas grandes */
  align-self: flex-end;            /* Alinea el botón hacia la parte inferior del texto */
}

/* Estilo del botón de WhatsApp */
.oferta-btn .btn-info {
  background-color: #ff9900;       /* Azul principal */
  color: white;                    /* Texto blanco */
  padding: 1rem 2rem;              /* tamaño botón */
  text-decoration: none;           /* Sin subrayado */
  border-radius: 25px;              /* Bordes redondeados */
  font-weight: bold;               /* Texto en negrita */
  transition: background-color 0.3s ease; /* Transición suave al pasar el mouse */
  display: inline-block;           /* Mostrar como bloque en línea */
}

/* Hover del botón */
.oferta-btn .btn-info:hover {
  background-color: #52e416;       /* Color más oscuro al pasar el mouse */
}

  /*----------------------------------------------*/
/* RAZONES 4 */
.razones {
  background-color: #f9f9f9;
  display: flex;  /* Usa Flexbox para organizar los elementos dentro de la sección */
  flex-wrap: wrap;  /* Permite que los elementos se envuelvan en dispositivos pequeños */
  align-items: center;  /* Alinea los elementos verticalmente al centro */
  justify-content: center;  /* Centra los elementos horizontalmente CONTENEDOR*/
  padding: 3rem 2rem;  /* Añade un relleno de 3rem en la parte superior e inferior, 2rem en los lados */
  gap: 2rem;  /* Añade un espacio de 2rem entre los elementos dentro de la sección */
}

/* Contenedor general */
.razones-container {
  display: flex;
  flex-direction: row; /* Por defecto: horizontal */
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 3rem auto;
  padding: 2rem;
  gap: 2rem;
  max-width: 400px;
}

/* Imagen */
.razones-container {
  display: flex;
  flex-direction: row; /* Horizontal por defecto */
  text-align: left;
  gap: 2rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Imagen */
.razones-left img {
  width: 100%;              /* Ocupa todo el ancho disponible del contenedor */
  max-width: 700px;         /* Limita el tamaño máximo */
  height: auto;             /* Mantiene la proporción */
  border-radius: 20px;
  display: block;           /* Evita espacio blanco debajo */
  margin: 0 auto;           /* Centra en responsive */
}

/* Texto */
.razones-right {
  flex: 1 1 50%;
  text-align: left;
}

/* Encabezado */
.subtitle4 {
  font-size: 1.8rem;
  text-align: left;
  color: #002789;
}

  /*----------------------------------------------*/
/* CONTENEDOR JUSTIFICACION 5*/
.justificacion { 
  padding: 80px 40px;                             /* Espaciado interno del contenedor */
  background-color: #ffffff;                      /* Fondo celeste claro */
  text-align: center;                             /* Centrar texto e imágenes */
}

.justificacion-header {
  margin-bottom: 30px;                            /* Espacio debajo del encabezado */
}

.justificacion-img {
  max-width: 100px;                               /* Tamaño máximo de la imagen */
  display: block;                                 /* Hacer que la imagen sea un bloque */
  margin: 0 auto;                            /* Centrar imagen y añadir espacio inferior */
}

.justificacion-grid {
  display: grid;                                  /* Usar grid layout */
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* Columnas adaptables */
  gap: 50px;                                      /* Espacio entre columnas */
  max-width: 1700px;                              /* Ancho máximo del grid */
  margin: 0 auto;                                 /* Centrar horizontalmente el grid */
}

.justificacion-item {
  background-color: rgba(48, 196, 255, 0.1);     /* Fondo translúcido blanco */
  padding: 10px;                                  /* Espacio interno recuadro */
  border-radius: 12px;                            /* Bordes redondeados */
  transition: transform 0.3s ease;                /* Transición suave al hacer hover */
  text-align: center;      /* Centrar texto e imágenes dentro del ítem */
}

.justificacion-item:hover {
  transform: scale(1.05);                         /* Efecto de zoom al pasar el cursor */
}

.justificacion-item img {
  max-width: 100%;       /* La imagen nunca sobrepasará el ancho del contenedor */
  height: auto;          /* Mantiene la proporción original */
  display: block;        /* Hace que respete márgenes y se centre bien */
  margin: 0 auto 12px;   /* Centra la imagen horizontalmente y añade espacio debajo */
  border-radius: 10px;   /* (Opcional) Bordes redondeados si deseas */
}

.justificacion-title {
  font-size: 1.3rem;                              /* Tamaño del título */
  font-weight: bold;                              /* Negrita */
  margin-bottom: 8px;                             /* Espacio debajo del título */
  color: #150fc8;                                 /* Color negro del texto */
}

.justificacion-text {
  font-size: 1.1rem;                              /* Tamaño del texto descriptivo */
  color: #000000;                                 /* Color vino para el texto */
}
  /*----------------------------------------------*/
/* CONTENEDOR CARRUSEL 6*/
.carrusel-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 500px;
  margin: 40px auto;
  overflow: hidden;
  border-radius: 10px;
}

.carrusel-slide {
  display: flex;
  transition: transform 1s ease-in-out;
  height: 100%;
}

.carrusel-slide img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Para ver toda la imagen sin recorte */
  background-color: #fff; /* Fondo blanco si la imagen no llena el espacio */
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 2rem;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 10;
  border-radius: 50%;
}
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
.prev { left: 10px; }
.next { right: 10px; }

  /*----------------------------------------------*/
/* CONTENEDOR CELESTE 7*/
.container {
  background-color: #3cb9fc; /* Color celeste */
  border: 2px solid #3cb9fc; /* Bordes del mismo color */
  border-radius: 10px;
  padding: 20px;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); /* Sombra */
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1150px; /* Ajusta el tamaño del cuadrado */
  margin: auto;
  margin-bottom: 2rem; /* Espacio debajo del contenedor celeste, general */
  font-family: "Comfortaa", sans-serif;
  flex-wrap: wrap; /* Permite que los elementos se ajusten */
}
.text {
  font-size: 30px;
  color: white;
  text-align: left;
  white-space: nowrap; /* Evita saltos de línea */
  margin-right: 20px; /* Espacio entre texto y botón */
  flex: 1;
}
.text span {
  font-weight: normal; /* Sin negrita */
  display: block; /* Para que los textos estén uno sobre el otro */
}
.button {
  background-color: #004aad; /* Azul oscuro */
  color: white;
  padding: 12px 30px; /* Aumenta el tamaño del botón */
  border: none;
  border-radius: 30px;
  font-size: 20px; /* Tamaño del texto dentro del botón */
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  margin-left: 30px; /* Desplaza el botón hacia la derecha */
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: #52e416;
}
.button:active {
  background-color: orange; /* Cambia a naranja cuando se hace clic */
}
  /*----------------------------------------------*/
/* CONTENEDOR CURSOS 8*/

.cursos {
  display: flex;
  justify-content: center; /*Centrar las imagenes y restar espacio entre ellas*/
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2rem;
  background-color: #ffffff;
  text-align: center;
}
.cursos-titulo {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  color: #3cb9fc;
  margin-bottom: 2rem;
  font-family: 'Comfortaa', sans-serif;
}

.curso-item {
  max-width: 380px;
  flex: 1 1 200px;
}

.curso-item img {
  width: 340px;
  height: auto;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.curso-item h3 {
  font-size: 1.2rem;
  color: #000000;
  margin-bottom: 0.5rem;
}

.curso-item p {
  font-size: 1.1rem;
  color: #1c1b1b;
}
.cursos-siguenos {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  color: #3cb9fc;
  margin-bottom: 2rem;
  font-family: 'Comfortaa', sans-serif;
}

/*----------------------------------------------*/
/*----------CAMBRIDGE---------------*/
/* Contenedor principal de la publicidad */
.cambridge-container {
  background-color: #3cb9fc;  /* Azul vibrante para llamar la atención */
  color: white;               /* Color de texto blanco para contraste */
  padding: 1rem 1.5rem;       /* Espaciado interior */
  margin: 2rem 0;             /* Espaciado superior e inferior */
  border-radius: 10px;        /* Bordes redondeados */
  display: flex;              /* Flexbox para alinear los elementos */
  justify-content: flex-start; /* Alineación hacia la izquierda */
  align-items: center;        /* Alinear elementos verticalmente */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para resaltar */
  transform: skewX(-10deg);   /* Inclinación hacia la izquierda */
  flex-wrap: wrap;            /* Asegurarse de que los elementos se ajusten */
  max-width: 60%;             /* Limitar el ancho del contenedor */
  margin-left: 20%;           /* Dejar un margen hacia la izquierda */
}

/* Contenido de la publicidad */
.cambridge-content {
  display: flex;             /* Flexbox para alinear el texto e imagen */
  justify-content: flex-start; /* Alinear los elementos a la izquierda */
  align-items: center;       /* Alineación vertical */
  width: 100%;               /* Hacer que ocupe todo el ancho disponible */
}

/* Texto de la publicidad */
.cambridge-text {
  font-size: 1.6rem;         /* Tamaño de fuente más pequeño para el texto */
  font-weight: bold;         /* Negrita para resaltar */
  margin-right: 1rem;        /* Espaciado entre el texto y la imagen */
  max-width: 70%;            /* Limitar el ancho del texto */
  text-align: center;          /* Alinear el texto a la izquierda */
}

/* Contenedor del logo de Cambridge */
.cambridge-logo-container {
  width: 99px;               /* Ancho de la imagen */
  height: 99px;              /* Altura para hacerlo cuadrado */
  border-radius: 50%;        /* Hacer la imagen circular */
  overflow: hidden;          /* Cortar la imagen que sobresalga */
  display: flex;             /* Asegurar que esté centrado */
  justify-content: center;   /* Centrar la imagen dentro del contenedor */
  align-items: center;       /* Centrar verticalmente la imagen */
}

/* Imagen del logo de Cambridge */
.cambridge-logo {
  width: 12%;               /* Hacer que la imagen ocupe el 100% del contenedor */
  height: auto;              /* Mantener proporción */
  object-fit: cover;         /* Cubrir el espacio sin distorsionar */
}

/*----------REDES SOCIALES---------------*/

.social-container {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 0;
}

.social-container a img {
  width: 50px;
  height: 50px;
  transition: transform 0.3s ease;
}

.social-container a img:hover {
  transform: scale(1.2);
}

/*----------------------------------------------*/
/*----------PIE De PÁGINA---------------*/
/* Estilos generales del pie de página */
.footer {
  background-color: #f0f0f0;               /* Color de fondo gris claro */
  padding: 0.5rem;                           /* Espaciado interno */
  font-family: 'Comfortaa', sans-serif;    /* Fuente personalizada */
  font-size: 0.8rem;                       /* Tamaño base del texto */
  color: #333;                             /* Color de texto gris oscuro */
}

/* Contenedor principal del footer con flexbox */
.footer-container {
  display: flex;               /* Activación de modelo Flexbox */
  flex-wrap: wrap;             /* Permite que los elementos pasen a otra línea en pantallas pequeñas */
  justify-content: space-around; /* Espacio entre columnas */
  align-items: flex-start;     /* Alineación superior de los elementos */
  gap: 1rem;                   /* Espacio entre columnas */
}

/* Estilos del logo dentro del footer */
.footer-logo img {
  width: 150px;                /* Ancho fijo del logo */
  border-radius: 19px;         /* Bordes redondeados para suavizar la imagen */
}

/* Contenedor de las columnas de enlaces */
.footer-links {
  display: flex;               /* Modelo Flexbox para distribuir columnas */
  gap: 0.5rem;                   /* Espacio entre columnas */
  flex-wrap: wrap;             /* Acomodo automático en móviles */
}

/* Encabezados de cada columna */
.footer-column h4 {
  margin-bottom: 0.5rem;       /* Espacio inferior */
  color: #000000;              /* Color negro para los títulos */
}

/* Estilo para listas dentro del footer */
.footer-column ul {
  list-style: none;            /* Quita los puntos de la lista */
  padding: 0;
  margin: 0;
}

/* Espaciado entre elementos de lista */
.footer-column ul li {
  margin-bottom: 0.2rem;
}

/* Enlaces dentro de las listas */
.footer-column ul li a {
  color: #000;                 /* Color negro por defecto */
  text-decoration: none;       /* Sin subrayado */
  transition: color 0.3s;      /* Suaviza el cambio de color al pasar el mouse */
}

/* Cambio de color al pasar el mouse por encima de los enlaces */
.footer-column ul li a:hover {
  color: #1e90ff;              /* Azul al pasar el mouse */
}

/* Contacto (WhatsApp, correo, etc.) */
.footer-contact p a {
  color: #000;                 /* Color negro inicial */
  text-decoration: none;       /* Sin subrayado */
  font-weight: bold;           /* Texto más grueso */
}

/* Hover sobre los enlaces de contacto */
.footer-contact p a:hover {
  color: #1e90ff;              /* Azul al pasar el mouse */
}

/*----------------------------------------------*/

/* Responsive Design para teléfonos y tablets */
/* Estilos responsivos para pantallas pequeñas */
@media (max-width: 768px) {
  .nav-links {
    display: none; /* Ocultar enlaces */
    flex-direction: column;
    gap: 1rem;
    background-color: #ffffff;
    position: absolute;
    top: 70px;
    right: 20px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    border-radius: 12px;
  }

  .nav-links.active {
    display: flex; /* Mostrar cuando está activa */
  }

  .menu-toggle {
    display: block; /* Mostrar hamburguesa */
  }

  
/* ---------------------------------------------- */

/*----------------------------------------------CONTEINER1*/
.hero-section {
  flex-direction: column; /* Coloca imagen y texto en vertical */
  text-align: center;
  padding: 2rem 1rem;
}

.hero-left,
.hero-right {
  max-width: 100%;
  flex: 1 1 100%;
}

.main-title {
  font-size: 3rem;
}

.subtitle0 {
  font-size: 2rem;
}

.subtitle1,
.subtitle2 {
  font-size: 1.5rem;
}

.btn-info {
  font-size: 1rem;
  padding: 0.8rem 1.5rem;
}

/* --------------------CONTAINER 2-------------------------- */

.info-section {
  flex-direction: column;      /* Coloca los elementos en vertical */
  padding: 1.5rem 1rem;
  text-align: center;
}

.info-left,
.info-form {
  flex: 1 1 100%;
  max-width: 100%;
}

.info-title {
  font-size: 1.3rem;
}

.info-features,
.info-promo {
  font-size: 1rem;
}

.popup {
  padding: 1.5rem;
}

.popup h2 {
  font-size: 1.4rem;
}

.popup input,
.popup select {
  font-size: 0.95rem;
  padding: 0.5rem;
}

.radio-group input[type="radio"] {
  transform: scale(1); /* Tamaño más cómodo para móviles */
}

.popup button {
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
}
/*----------------------------------------------CONTEINER3*/
.oferta {
  padding: 20px 10px; /* Menos espacio interno */
}

/* Contenedor interior */
.oferta-container {
  flex-direction: column; /* Apilar texto y botón uno debajo del otro */
  align-items: center; /* Centrar ambos elementos */
  text-align: center; /* Centrar el contenido */
}

/* Texto de la oferta */
.oferta-text {
  flex: unset; /* Eliminar flex extra */
  width: 100%; /* Ocupar todo el ancho */
}

/* Título */
.oferta-title {
  font-size: 1.7rem; /* Reducir tamaño del título */
  margin-bottom: 8px; /* Ajustar espacio inferior */
}

/* Subtítulo */
.subtitle3 {
  font-size: 1.2rem; /* Reducir tamaño del subtítulo */
}

/* Botón */
.oferta-btn {
  align-self: center; /* Centrar botón */
  margin-top: 15px; /* Espacio encima del botón */
}

.oferta-btn .btn-info {
  padding: 1rem 1.8rem; /* Botón ligeramente más pequeño */
  font-size: 1rem; /* Ajuste de tamaño de texto */
}
/* ---------------------------------------------- */
/*----------------------------------------------CONTEINER4*/
.razones-container {
  flex-direction: column;
  align-items: center;
  text-align: center;
    
}

.razones-left,
.razones-right {
  max-width: 100%;
  flex: 1 1 100%;
  text-align: center;
}

.subtitle4 {
  text-align: center;
}
/* ---------------------------------------------- */

/*----------------------------------------------CONTEINER 5*/
.justificacion {
  padding: 50px 20px; /* Menos espacio interno */
}

/* Encabezado */
.justificacion-header {
  margin-bottom: 20px; /* Menos espacio debajo del encabezado */
}

/* Imagen principal */
.justificacion-img {
  max-width: 80px; /* Imagen un poco más pequeña */
}

/* Grid de justificación */
.justificacion-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Columnas más adaptables */
  gap: 30px; /* Menos espacio entre cajas */
}

/* Item de justificación */
.justificacion-item {
  padding: 8px; /* Menos espacio interno */
  border-radius: 10px;
}

/* Imagen dentro del ítem */
.justificacion-item img {
  max-width: 90%; /* Ligeramente más pequeño */
  margin-bottom: 10px;
}

/* Título de cada ítem */
.justificacion-title {
  font-size: 1rem; /* Letra un poco más pequeña */
  margin-bottom: 6px;
}

/* Texto de cada ítem */
.justificacion-text {
  font-size: 1rem; /* Ajustar tamaño del texto */
}

/*----------------------------------------------CONTEINER 6*/
.container {
  flex-direction: column;
  text-align: center;
}
.text {
  font-size: 30px;
  text-align: center;
  white-space: normal;
}
.button {
  margin-top: 10px;
  padding: 14px 28px; /* Ajuste del tamaño del botón */
}
/*----------------------------------------------CONTEINER 7*/
.container {
  flex-direction: column; /* Apilar texto y botón uno debajo del otro */
  align-items: center; /* Centrar contenido */
  text-align: center; /* Centrar texto */
  padding: 15px; /* Menos padding para pantallas pequeñas */
}

.text {
  font-size: 28px; /* Reducir el tamaño del texto */
  margin-right: 0; /* Eliminar margen derecho */
  margin-bottom: 15px; /* Añadir espacio debajo del texto */
  white-space: normal; /* Permitir saltos de línea */
}

.text span {
  display: inline; /* Opcional: que el span no haga salto innecesario */
}

.button {
  font-size: 20px; /* Reducir tamaño del texto del botón */
  padding: 12px 24px; /* Ajustar tamaño del botón */
  margin-left: 0; /* Eliminar desplazamiento */
  min-width: 120px; /* Tamaño mínimo más pequeño */
}
/*------------------CAMBRIDGE----------------------*/
.cambridge-container {
  padding: 1rem;           /* Reducir el espaciado interior en pantallas pequeñas */
  margin-left: 15%;         /* Dejar un margen más pequeño hacia la izquierda */
  transform: skewX(-5deg);     /* Inclinación a la izquierda en dispositivos pequeños */
}

.cambridge-text {
  font-size: 1.1rem;       /* Reducir el tamaño de la fuente en móviles */
  margin-right: 0.5rem;    /* Reducir el margen entre el texto y la imagen */
}

.cambridge-logo-container {
  width: 95px;               /* Aumentar tamaño del logo */
  height: 95px;              /* Aumentar tamaño del logo */
}
/* Imagen del logo de Cambridge */
.cambridge-logo {
  width: 25%;   /* El logo ocupará todo el contenedor en móviles */
  height: 25%;
  object-fit: cover;
}
/*------------------CONTENEDOR REDES----------------------*/
.social-container {
  gap: 1rem;                      /* Reducimos el espacio entre íconos */
  padding: 1rem 0;                /* Menos espacio en pantallas pequeñas */
}

.social-container a img {
  width: 40px;                    /* Íconos un poco más pequeños */
  height: 40px;
}

.cursos-siguenos {
  font-size: 1.5rem;              /* Título un poco más pequeño */
  margin-bottom: 1rem;            /* Menos espacio debajo */
}
/*------------------PIE DE PÁGINA----------------------*/
.footer-container {
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 0.8rem;
}

.footer-links {
  flex-direction: column;
  align-items: center;
}
}