/* 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) PRIER CONTENEDOR */
.hero-section {
    display: flex;  /* Usa flexbox para organizar el contenido dentro de la sección */
    flex-wrap: wrap;  /* Permite que los elementos se acomoden en varias líneas si es necesario, ideal para pantallas pequeñas */
    align-items: center;  /* Alinea los elementos verticalmente al centro */
    justify-content: center;  /* Alinea los elementos horizontalmente al centro */
    padding: 3rem 2rem;  /* Aplica relleno (espacio interno) alrededor de la sección */
    gap: 3rem;  /* Define un espacio de 2rem entre las columnas de la sección */
  }
  
  .hero-left,
  .hero-right {
    flex: 1 1 400px; /* Adaptables con mínimo de 400px */
    max-width: 900px; /* Adaptable PRIMER CONTENEDOR */
  }
  
  /* Contenedor general para centrar contenido y aplicar márgenes */
  .hero-container {
    display: flex;
    flex-direction: row-reverse; /* Alineación vertical */
    align-items: center;     /* Centra todo horizontalmente */
    text-align: center;      /* Centra el texto */
    margin: 3rem auto;       /* Espacio arriba/abajo y centrado automático */
    padding: 2rem;
    max-width: 900px;        /* Limita el ancho para que no se expanda demasiado */
  }
  
  /* Imagen chica con laptop */
  .hero-img {
    width: 100%;
    max-width: 800px;      /* Tamaño máximo */
    border-radius: 20px;   /* Bordes redondeados */
    margin-bottom: 2rem;   /* Espacio debajo de la imagen */
  }
  
  /* TÍTULO DE LA PÁGINA */
  .main-title {
    font-size: 2rem; /* Tamaño del titulo */
    margin-bottom: 2rem auto;   /* Espacio debajo del título */
    color: #3c78d8;
    line-height: 1.4; /* Interlineado cómodo y legible */
  }
  
  /* TEXTO SECUNDARIO1 */
  .subtitle0 {
    font-size: 1.8rem;
    margin-bottom: 2rem auto;   /* Más espacio para separar del texto */
    line-height: 1.6; /* Interlineado cómodo y legible */
    color: #2a23ad;
    font-weight: bold; /*Texto en negrita*/
    text-align: center;
  }
  /* 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.4rem;
    margin-bottom: 1.5rem;
    text-align: center; /* Centra el texto */
    color: #3cb9fc;
  }
  /*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: 1.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 2*/
 /* 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 */
}


   /*----------------------------------------------*/
/* CONTENEDOR 3: SECCIÓN DE LLAMADO A LA ACCIÓN */
/* Sección general que contiene todo el bloque visual */
.funciona-section {
  display: flex;               /* Activa Flexbox para el diseño flexible */
  flex-wrap: wrap;             /* Permite que los elementos se ajusten en pantallas pequeñas */
  align-items: center;         /* Alinea los elementos verticalmente al centro */
  justify-content: center;     /* Centra horizontalmente todos los elementos hijos */
  padding: 3rem 2rem;          /* Espaciado interior: 3rem arriba/abajo, 2rem a los lados */
  gap: 1rem;                   /* Espacio entre elementos */
  background-color: #f9f9f9;   /* Fondo gris claro */
}

/* CONTENEDOR PRINCIPAL: Acomoda columnas lado a lado */
.funciona-container {
  display: flex;               /* Activa Flexbox */
  justify-content: center; /* Centrado en todo momento */
  align-items: center;         /* Alinea los hijos verticalmente al centro */
  flex-wrap: nowrap;           /* No permitir que salten de línea */
  max-width: 1600px;           /* Ancho máximo para pantallas grandes */
  width: 100%;                 /* Ocupa todo el ancho disponible */
  margin: 0 auto;              /* Centrado horizontal automático */
  gap: 2.5rem;                 /* Espacio entre columnas */
  padding: 0 1rem;             /* Espaciado lateral interno */
  overflow-x: auto;        /* Si es MUY pequeño, permite desplazamiento horizontal */
}

/* COLUMNAS: IZQUIERDA (texto) y DERECHA (formulario o imagen) */
.info-left,
.info-form {
  flex: 1 1 400px;             /* Crece, reduce, base de 500px */
  max-width: 1000px;           /* No se ensancha más de 1000px */
  min-width: 320px;            /* Nunca más estrecho que 320px */
}

/* CONTENEDOR DEL TEXTO */
.funciona-texto {
  flex: 1 1 500px;             /* Flexible con base de 500px */
  max-width: 1000px;           /* Límite de ancho */
  text-align: center;          /* Centra el texto */
}

/* TÍTULO PRINCIPAL (H1) */
.subtitle1 {
  font-size: clamp(1.9rem, 2.5vw, 2rem); /* Tamaño flexible según el ancho de pantalla */
  line-height: 1.3;              /* Espaciado entre líneas */
  color: #0000ff;                /* Azul intenso */
  margin: 0 auto 1rem auto;      /* Margen inferior con centrado */
  padding: 0 1rem;               /* Relleno lateral */
  text-align: center;           /* Centrado horizontal del texto */
  font-weight: bold; /*Texto en negrita*/
}

/* SUBTÍTULO O PÁRRAFO */
.subtitle2 {
  font-size: clamp(1.1rem, 1.8vw, 0.8rem); /* Tamaño fluido */
  line-height: 1.4;              /* Espaciado entre líneas */
  color: #070708;                /* Gris oscuro, casi negro */
  margin: 0 auto 1rem auto;      /* Margen inferior y centrado */
  padding: 0 1rem;               /* Relleno lateral */
  text-align: left;             /* Alineado a la izquierda */
  display: block;               /* Comportamiento de bloque */
}

/* ÍCONO TIPO CHECK */
.check {
  color: #00bfff;               /* Celeste */
  margin-right: 0.5rem;         /* Separación a la derecha */
  font-weight: bold;            /* Negrita para resaltar */
}

/* CONTENEDOR DE LA IMAGEN */
.funciona-imagen {
  flex: 1 1 400px;              /* Flexible con base de 400px */
  max-width: 500px;             /* Límite de ancho máximo */
  text-align: center;           /* Centrado del contenido (imagen) */
  transform: translateX(-3px);  /* Mueve la imagen 3px a la izquierda */
}

/* ESTILO DE LA IMAGEN */
.funciona-img {
  width: 100%;                  /* Ocupa todo el ancho del contenedor */
  height: auto;                 /* Mantiene la proporción original */
  border-radius: 10px;          /* Bordes redondeados */
  object-fit: contain;          /* Escala la imagen sin recortar */
}

    /*----------------------------------------------*/
  /* CONTENEDOR 4 CANVA*/
/* CONTENEDOR 4: Estilos para incrustar contenido de Canva */
/* CONTENEDOR EXTERNO PARA CENTRAR TODO EL CONTENIDO */
.canva-wrapper {
  display: flex;                /* Usa flexbox para centrar */
  justify-content: center;     /* Centrado horizontal */
  align-items: center;         /* Centrado vertical */
  width: 100%;                 /* Ocupa todo el ancho disponible */
  margin: 0 auto;              /* Centrado automático en horizontal */
  padding: 1rem;               /* Espaciado interno para evitar que toque los bordes */
  box-sizing: border-box;      /* Incluye padding en el ancho total */
}

/* CONTENEDOR INTERNO QUE ENVUELVE EL IFRAME */
.canva-container {
  position: relative;              /* Necesario para posicionar el iframe absolutamente */
  width: 100%;                     /* Ocupa el 100% del ancho del contenedor padre */
  max-width: 1200px;               /* Ancho máximo en pantallas grandes */
  aspect-ratio: 12 / 9;            /* Relación de aspecto responsiva */
  background-color: #ffffff;       /* Fondo blanco */
  border-radius: 8px;              /* Bordes redondeados */
  overflow: hidden;                /* Oculta el contenido que se desborde */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* IFRAME DE CANVA AJUSTADO AL TAMAÑO DEL CONTENEDOR */
.canva-container iframe {
  position: absolute;       /* Posicionamiento absoluto para llenar el contenedor */
  width: 100%;              /* Ancho completo */
  height: 100%;             /* Alto completo */
  top: 0;
  left: 0;
  border: none;             /* Sin borde */
  margin: 0;
  padding: 0;
  object-fit: cover;        /* Asegura que el contenido cubra todo el espacio sin bordes */
}

  /*----------------------------------------------*/
  /*CONTENEDOR 5*/

  .container {
    background-color: #3cb9fc;
    border: 2px solid #3cb9fc;
    border-radius: 30px;
    padding: 20px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1100px;
    margin: auto;
    font-family: Arial, sans-serif;
    flex-wrap: wrap;
}

.text {
    font-size: 30px;
    color: white;
    text-align: left;
    white-space: nowrap;
    margin-right: 20px;
    flex: 1;
}

.text span {
    font-weight: normal;
    display: block;
}

.button {
    background-color: #004aad;
    color: white;
    padding: 16px 30px;
    border: none;
    border-radius: 30px;
    font-size: 25px;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    margin-left: 50px;
    transition: background-color 0.3s ease;
}

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

.button:active {
    background-color: orange;
}

    /*----------------CONTAINER 6-----------------------*/
    /* Estilos del banner de promoción */
.promo-banner {
  background: linear-gradient(135deg, #3cb9fc, #005f99); /* Degradado azul vibrante */
  color: #ffffff;
  padding: 2rem 1rem;
  border-radius: 15px;
  text-align: center;
  margin: 2rem auto;
  max-width: 900px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.promo-content h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: bold;
}

.promo-content p {
  font-size: 1.4rem;
  margin: 0.5rem 0;
  color: #FFD700;
}

.promo-button {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.8rem 2rem;
  background-color: #fdfdfd;
  color: #005f99;
  font-weight: bold;
  border-radius: 30px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}

.promo-button:hover {
  background-color: #005f99;
  color: #ffffff;
}

/*----------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);
}
.cursos-siguenos {
  width: 100%;
  text-align: center;
  font-size: 2rem;
  color: #3cb9fc;
  margin-bottom: 2rem;
  font-family: 'Comfortaa', sans-serif;
}
/*----------------------------------------------*/

/*----------PIE De PÁGINA---------------*/
.footer {
    background-color: #f0f0f0;
    padding: 2rem;
    font-family: 'Comfortaa', sans-serif;
    font-size: 0.8rem;
    color: #333;
  }
  
  .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 */
  }
  
  .footer-logo img {
    width: 150px;
    border-radius: 19px;
  }
  
  .footer-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
  }
  
  .footer-column h4 {
    margin-bottom: 0.8rem;
    color: #000000;
  }
  
  .footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  
  .footer-column ul li {
    margin-bottom: 0.4rem;
  }
  
  .footer-column ul li a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s;
  }
  
  .footer-column ul li a:hover {
    color: #1e90ff;
  }
  
  .footer-contact p a {
    color: #000;
    text-decoration: none;
    font-weight: bold;
  }
  
  .footer-contact p a:hover {
    color: #1e90ff;
  }

  /*----------------------------------------------*/
/* Estilos responsivos para pantallas pequeñas */

@media (max-width: 768px) {
      /*------------------CONTENEDOR MENU NAVEGACION----------------------*/
  .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 */
  }

  .hero-section,
  .info-section {
    padding: 2rem 1rem;
    flex-direction: column; /* Columnas en lugar de filas */
  }

  .hero-left, .hero-right,
  .info-left, .info-form {
    max-width: 100%;
  }
   /*------------------CONTENEDOR 1 ----------------------*/
   .hero-container {
    flex-wrap: nowrap;               /* NO permitir que bajen, siempre en fila */
    overflow-x: auto;                 /* Permitir scroll horizontal si no caben */
    justify-content: flex-start;      /* Alinear al inicio si hacen scroll */
    gap: 1rem;                        /* Mantener separación entre imagen y formulario */
  }

  .hero-left,
  .hero-right {
    flex: 0 0 auto;                   /* No crecer, no encoger automáticamente */
    width: 80%;                       /* Ancho de cada sección reducido al 80% */
    max-width: 400px;                 /* Limitar el ancho para que se vean bien */
    min-width: 280px;                 /* No permitir que se achiquen demasiado */
  }

  .hero-img {
    width: 100%;                      /* Imagen llena el contenedor */
    max-width: 500px;                 /* Imagen más pequeña para teléfono */
    height: auto;                     /* Mantiene proporciones */
    margin: center;                   /* Centrar la imagen */
  }

  .main-title,
  .subtitle1 {
    font-size: 2.1rem; /* Ajustar tamaños de texto dinámicamente */
    text-align: center;                  /* Texto centrado */
  }

  .popup {
    padding: 1.5rem;                     /* Un poco menos de padding para móviles */
  }

  .popup h2 {
    font-size: clamp(1.2rem, 4vw, 1.6rem); /* Título ajustable */
  }

  .popup input,
  .popup select,
  .popup button {
    font-size: 0.8rem;                   /* Ajustar tamaños de campos y botones */
    padding: 0.6rem;                     /* Más compacto */
  }
  .radio-group label {
    font-size: 0.8rem;                   /* Ajustar tamaños de campos y botones */
    padding: 0.6rem; 
  }
   /*------------------CONTENEDOR 2----------------------*/
   .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 */
  }
  /* ---------------------------------------------- */

   /*------------------CONTENEDOR 3----------------------*/
   .funciona-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1rem;
    gap: 1rem;
    overflow-x: hidden;
    flex-direction: column;     /* Cambia a vertical en móviles/tablets */
  }

  .info-left,
  .info-form,
  .funciona-imagen,
  .funciona-texto {
    flex: 1 1 100%;             /* Ocupan el 100% del ancho disponible */
    max-width: 100%;            /* No se pasan del contenedor */
    min-width: auto;            /* No fuerza un mínimo demasiado grande */
    padding: 0.5rem 0;          /* Espaciado interior */
  }

  .funciona-img {
    width: 100%;
    height: auto;
    max-width: 100%;
  }

  .subtitle1 {
    font-size: 1.5rem;
    text-align: center;
  }

  .subtitle2 {
    font-size: 1rem;
    text-align: center;  /* Opcional: si deseas centrar en móviles */
  }
    /*------------------CONTENEDOR 5 ----------------------*/

    .container {
      flex-direction: column;
      text-align: center;
  }

  .text {
      font-size: 32px;
      text-align: center;
      white-space: normal;
  }

  .button {
      font-size: 1.2rem;
      margin-top: 8px;
      padding: 14px 28px;
  }
   /*------------------CONTENEDOR 6 ----------------------*/
  .promo-banner {
    padding: 1.5rem 1rem;
    margin: 1.5rem 1rem;
  }

  .promo-content h2 {
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
  }

  .promo-content p {
    font-size: 1.1rem;
  }

  .promo-button {
    font-size: 0.95rem;
    padding: 0.6rem 1.5rem;
  }
/*----------------CONTAINER ----------------------*/

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