/* Estilos Generales */
* {
  margin: 0;
  /* padding: 0; */
  box-sizing: border-box;
}

/* Estilo para el desplazamiento suave en la página */
html {
  scroll-behavior: smooth;  /* Habilita el desplazamiento suave para toda la página */
}


body {
  font-family: Arial, sans-serif;
}

/* Prevent horizontal shift and ensure full-width baseline */
html, body { width: 100%; overflow-x: hidden; }

/* Primera Línea: Top Bar */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  padding-left: 30px !important;
  padding-right: 30px !important;
  position: relative;
  z-index: 20;
}

/* --- responsive header + drawer styles (moved from inline) --- */
.logo-container{flex:1}
/* make logo fixed width per device, keep aspect ratio */
.logo{height:auto;width:160px;max-height:none}
.buttons-container{display:flex;gap:12px}
.cta-button,.cta-button-aulavirtual{padding:7px 12px;border-radius:6px;border:none;background:#063982;color:#fff;cursor:pointer;white-space:nowrap}
.hamburger{display:none;background:transparent;border:none;font-size:24px;cursor:pointer;z-index:1001;position:relative}
.hamburger:hover{cursor:pointer}

/* drawer base */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.4);opacity:0;visibility:hidden;transition:opacity .25s;z-index:999}
.drawer{position:fixed;top:0;right:-320px;width:320px;height:100%;background:#fff;box-shadow:-4px 0 12px rgba(0,0,0,.2);transition:right .3s;z-index:1000;padding:18px;overflow:auto}
.drawer.open{right:0}
.drawer-backdrop.open{opacity:1;visibility:visible}
.drawer .close-x{position:absolute;top:12px;right:12px;border:none;background:transparent;font-size:22px;cursor:pointer;color:#063982}
/* ensure menu items stack vertically despite global nav ul flex */
.drawer nav ul{display:block;list-style:none;padding:40px 0 20px;margin:0}
.drawer nav li{margin:0;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.0)}
.drawer nav li:not(:last-child){border-bottom:1px solid rgba(255,255,255,0.0)}
.drawer nav a{color:#063982;text-decoration:none;font-weight:600}

/* Drawer color and separators for mobile/tablet */
@media (max-width:1024px){
  .drawer{width:200px;right:-200px;background:#063982;color:#A9D1E3;padding:18px}
  .drawer.open{right:0}
  .drawer .close-x{color:#A9D1E3}
  .drawer nav ul{padding:20px 0}
  .drawer nav li{padding:12px 0 !important;border-bottom:1px solid rgba(255,255,255,0.2) !important}
  .drawer nav li:last-child{border-bottom:0}
  .drawer nav a{color:#A9D1E3}
  /* remove vertical separator pseudo-element inherited from global nav rule */
  .drawer nav ul li:after { display: none !important; content: none !important; }
  .drawer nav a{display:block;padding:6px 8px}
}

/* responsive for phones & tablets */
@media (max-width:1024px){
  .top-bar{justify-content:center;position:relative;flex-direction:column;padding:10px 0;align-items:center;padding-left:0 !important;padding-right:0 !important}
  .logo-container{flex:0 0 auto;text-align:center;display:flex;justify-content:center;width:100%}
  .logo{width:100px !important;margin:0 auto}
  .hamburger{display:block;position:absolute;right:18px;top:18px;transform:none}
  .hamburger i{pointer-events:none}
  /* Show two action buttons inline, hide the phone button on small screens */
  .buttons-container{flex-direction:row;align-items:center;margin-top:10px;width:auto;justify-content:center;gap:10px}
  .buttons-container .cta-button,.buttons-container .cta-button-aulavirtual{width:auto;max-width:none;margin:2px 0;padding:4px 10px}
  .buttons-container #telefono{display:none !important}
  .menu-bar{display:none}
}

/* laptops */
@media (min-width:1025px){
  .drawer,.drawer-backdrop{display:none}
  .logo{width:160px}
  .top-bar{padding:12px 24px}
}
/* big monitors */
@media (min-width:1440px){
  .logo{width:160px}
  .top-bar{padding:14px 32px}
}


/* Animación de los botones deslizándose desde la derecha */
@keyframes slideIn {
  to {
    transform: translateX(0);
  }
}

/* Segunda Línea: Menu Bar */
.menu-bar {
  background-color: #063982;
  padding: 10px 20px;
  position: relative;

  z-index: 20;
  margin-bottom: 1px;
}

nav ul {
  display: flex;
  justify-content: flex-end;
}

nav ul li {
  list-style: none;
  margin-left: 30px;
  position: relative;
}

nav ul li a {
  color: #A9D1E3; /* Celeste más claro */
  text-decoration: none;
  font-size: 18px;
  transition: color 0.3s;
  padding-right: 20px;
}

nav ul li a:hover {
  color: #FEC917;
}

/* Línea vertical entre las opciones */
nav ul li:not(:last-child):after {
  content: "";
  position: absolute;
  top: -12px;
  right: 0;
  height: 33px; /* Altura de la línea */
  width: 1px; /* Grosor de la línea */
  background-color: rgba(255, 255, 255, 0.2); /* Línea suave y casi imperceptible */
  margin-top: 5px; /* Alineación con el texto, para no estar pegada al borde superior */
}







/* Estilos para la sección Hero */
.hero {
  position: relative;
  width: 100%;
  height: 100vh; /* La altura de la ventana */
  overflow: hidden;
  display: flex;
  justify-content: center; /* Centramos el contenido dentro de la sección */
  align-items: center; /* Centra verticalmente */
  background-color: #f4f4f4;
}

/* Capa celeste sobre los videos */
.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(6, 56, 129, 0.5); /* Celeste muy suave */
  z-index: 1; /* Para que esté encima de los videos, pero debajo del texto */
}

/* Carousel base: use a viewport and vw-based slides so layout is consistent across breakpoints */
.carousel-viewport {
  position: relative;
  width: 100vw;
  height: 100%;
  overflow: hidden;
}

.video-carousel {
  display: flex;
  width: 300vw; /* 3 videos x 100vw each — keeps translations predictable */
  transition: transform 1s ease-in-out;
  position: absolute; top: 0; left: 0; height: 100%;
}

.carousel-video {
  flex: 0 0 100vw; /* each slide is exactly one viewport wide */
  width: 100vw;
  height: 100%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ===== Responsive Hero adjustments for mobile/tablet ===== */
@media (max-width:1024px) {
  /* Let the carousel determine height; avoid full viewport hero */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto; /* do not use 100vh on small screens */
    overflow: visible;
    padding: 0;
  }

  /* Hide the existing overlay element (we'll use a pseudo overlay on the viewport) */
  .hero > .overlay { display: none; }

  /* Viewport: contains the sliding .video-carousel (overflow:hidden + aspect) */
  .carousel-viewport {
    order: 1;
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    max-width: 100vw;
  }
  .carousel-viewport::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6,56,129,0.28); /* reduce opacity to let videos be clearly visible */
    z-index: 2;
    pointer-events: none;
  }

  /* The sliding element keeps width = number_of_slides * 100% so the JS transform works unchanged */
  .video-carousel {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 300vw; /* 3 videos x 100vw each */
    display: flex;
    transition: transform 1s ease-in-out;
  }

  /* Each slide must be exactly 100vw on mobile so transforms align correctly */
  .carousel-video { flex: 0 0 100vw; width: 100vw; height: 100%; object-fit: contain; background: #000; }

  /* Place the carousel text above the carousel (line superior) */
  .left-half {
    order: 0;
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    z-index: 3;
    padding: 10px 12px;
    box-sizing: border-box;
  }
  .carousel-text {
    /* show centered over the videos */
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0 auto;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.2;
    color: #FECA17;
    z-index: 6;
    pointer-events: none;
    width: 90%;
  }

  /* Dots beneath viewport */
  .carousel-dots { 
    position: relative !important; 
    order: 3 !important; 
    bottom: auto !important; 
    display: flex !important; 
    justify-content: center !important; 
    margin: 8px 0 12px !important; 
    z-index: 6 !important; 
  }

  /* Arrows placed over the viewport and vertically centered */
  .carousel-viewport .prev,
  .carousel-viewport .next {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 7;
    background: rgba(0,0,0,0.35);
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border: none;
  }
  .carousel-viewport .prev { left: 8px; }
  .carousel-viewport .next { right: 8px; }

  /* Hide contact-card inside hero on mobile; use the separate mobile section instead */
  .right-half { display: none !important; }
  .contact-mobile-section { display: block; padding: 12px 18px; }
  .contact-mobile-section .contact-card { max-width: 100%; width: 100%; height: auto; padding: 14px; margin: 0 auto 24px; }

  /* Ensure video text appears above the pseudo-overlay */
  .carousel-text { z-index: 8; }

  /* Force font-size for contact form elements on small screens */
  .contact-card, .contact-card input, .contact-card select, .contact-card button {
    font-size: 1rem !important;
  }

  /* Tweak dots size/spacing for small screens */
  .dot { 
    height: 12px !important;
    width: 12px !important;
    margin: 0 6px !important;
  }
}

/* mobile section hidden on desktop */
@media (min-width:1025px) {
  .contact-mobile-section { display: none; }
}

@media (min-width:1025px) {
  /* División de la pantalla: solo en pantallas >= 1025px */
  .left-half, .right-half {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 50px;
  }

  .left-half {
    left: 0;
    width: 60%;
  }

  .right-half {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 30;
    padding-right: 30px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* El formulario de contacto no debe pegarse a los bordes de la sección */
#formContacto {
  scroll-margin-top: 100px; /* deja visible el inicio de la tarjeta bajo el header */
}

@media (min-width:1025px) {
  /* Texto sobre el carrusel (desktop) */
  .carousel-text {
    position: relative;
    color: #FECA17;
    font-size: 2.1rem;
    font-weight: 800;
    text-align: left;
    line-height: 1.2;
    z-index: 4;
    margin-top: -300px;
    padding: 0 20px;
    text-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    max-width: 90%;
    width: auto;
  }

  /* Desktop: fill full slide width to avoid side columns */
  .carousel-video {
    object-fit: cover !important;
    object-position: center center;
    transform: none !important;
    /* max-height: 70vh; */
  }
}

/* Estilos para la tarjeta de contacto */
.contact-card {
  background: #fff;
  color: #043780;
  width: 100%;
  max-width: 380px;
  padding: 18px;
  border-radius: 12px;
  height: 580px; /* Aumentada la altura de la tarjeta */
  /* sombreado / relieve */
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.22),
    0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 4;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Para la animación de hover */
}

/* Estilo de los campos del formulario */
.contact-card input,
.contact-card select {
  width: 100%;
  padding: 12px 10px;
  border-radius: 8px;
  border: 1px solid rgba(4, 55, 128, 0.22);
  outline: none;
  color: #043780;
  background: #fff;
  margin-top: 8px;
   margin-bottom: 8px;
}

/* Ajustar el tamaño de la fuente */
.contact-card input,
.contact-card select,
.contact-card button {
  font-size: 16px; /* Aumentado tamaño de font */
}

/* Placeholder */
.contact-card input::placeholder {
  color: rgba(4, 55, 128, 0.55);
}

/* Estilo del botón */
.contact-card button {
  width: 50%;  /* El botón sigue siendo más angosto */
  margin-top: 12px;
  background: #fff; /* Fondo blanco */
  color: #063982;  /* Color del texto */
  border: 2px solid #4F6B98; 
  padding: 0 12px;  /* Solo agregamos padding a los laterales */
  height: 32px;  /* Altura de 70px en top y bottom */
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px; /* Tamaño de fuente */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Sombra notoria para hacerlo sobresalir */
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  display: block;
  margin-left: auto;
  margin-right: auto; /* Centramos el botón */
}

/* Efecto hover en el botón */
.contact-card button:hover {
  transform: translateY(-6px); /* Levemente aumentamos el tamaño */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Más sombra al pasar el cursor */
  color: #FEC917; /* Cambio de color del texto a #FEC917 */
  background: #4F6B98;
}

/* Título principal */
.contact-card h2 {
  margin-bottom: 8px;
  color: #043780;
  text-align: center;
  font-size: 1.4rem; /* Tamaño de fuente para el título */
}

/* Subtítulo */
.contact-card h3 {
  margin-bottom: 15px;
  color: #043780;
  text-align: center;
  font-size: 1rem; /* Tamaño de fuente para el subtítulo */
}

/* Espaciado entre los campos */
.contact-card input,
.contact-card select {
  margin-bottom: 10px; /* Separación entre campos de formulario */
}



/* Animación de deslizamiento de la tarjeta */
@keyframes slideIn {
  to {
    transform: translateX(0);
  }
}

/* Puntos de navegación */
.carousel-dots {
  position: absolute;
  bottom: 230px;
  display: flex;
  justify-content: center;
  width: 100%;
  z-index: 100; /* elevar por encima de la mitad derecha y otros elementos */
}

.dot {
  height: 15px;
  width: 15px;
  margin: 0 5px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s;
  cursor: pointer;
}

.dot:hover {
  background-color: #717171;
}

/* estado activo controlado por JS */
.dot.active {
  background-color: #717171;
}


/* Flechas de navegación */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 8px;
  background-color: rgba(0, 0, 0, 0);
  color: white;
  font-size: 18px;
  border: none;
  cursor: pointer;
  z-index: 100;
  border-radius: 50%;
}

.prev { left: 10px; }
.next { right: 10px; }

/* Estilo al pasar el cursor por las flechas */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.1);
}




.cursos {
  padding: 50px 20px;
  text-align: center;
}

.cursos .curso {
  display: inline-block;
  width: 30%;
  margin: 10px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.sucursales {
  padding: 50px 20px;
  background: #fff;
}

.testimonios {
  padding: 50px 20px;
}

/* Estilos para las imágenes de testimonios */
.testimonial-carousel {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap; /* Asegura que las imágenes se ajusten en pantallas pequeñas */
}

.testimonial {
  text-align: center;
  max-width: 250px; /* Limita el ancho del testimonio */
  margin: 20px;
}

.testimonial-img {
  width: 80px;  /* Tamaño adecuado para las imágenes de testimonios */
  height: 80px; /* Hacemos que el alto sea igual al ancho para mantener la proporción */
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 3px solid #ff5733; /* Añade un borde de color para darle estilo */
}

/* Estilos para las imágenes de testimonios */
.testimonial-carousel {
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap; /* Asegura que las imágenes se ajusten en pantallas pequeñas */
}

.testimonial {
  text-align: center;
  max-width: 250px; /* Limita el ancho del testimonio */
  margin: 20px;
}

.testimonial-img {
  width: 80px;  /* Tamaño adecuado para las imágenes de testimonios */
  height: 80px; /* Hacemos que el alto sea igual al ancho para mantener la proporción */
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 3px solid #ff5733; /* Añade un borde de color para darle estilo */
}

footer {
  background: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

/* .social-media a {
  margin: 0 10px;
  
} */


/* ============   SECCION PORQUE ECONIT    ===========*/
/* Sección ¿Por qué elegirnos? */
#porque {
  padding: 50px 20px;
  margin-left: 150px;
  margin-right: 150px;
  overflow: hidden; /* Permite que los elementos fuera de la pantalla no sean visibles */
  text-align: center;
}

#porque h3 {
  color: #043780;
  font-size: 1.1rem;
  text-align: center; /* Centrado del texto */
  margin-top: 10px; /* Ajustamos el margen superior */
  margin-bottom: 30px; /* Espacio debajo del texto */
  font-weight: 700; /* Negrita */
}

/* Título */
#porque h2 {
  color: #043780;
  font-size: 2rem;
  text-align: left;
  margin-bottom: 20px;
  position: relative;
  width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
}

/* Subtítulo */
#porque p {
  color: #043780;
  font-size: 1rem;
  text-align: left;
  margin-left: 0;
  margin-bottom: 30px;
  width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
}

/* Contenedor de las tarjetas */
.porque-container {
  display: flex; /* Cambié de grid a flex para que las tarjetas estén en línea */
  justify-content: space-between; /* Espaciado entre las tarjetas */
  gap: 10px; /* Reduje el espacio entre las tarjetas */
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1200px;
  flex-wrap: wrap; /* Esto permite que se ajusten en pantallas pequeñas */
}

/* Contenedor de cada tarjeta con su texto debajo */
.cardPorque-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 18%; /* Reduje el ancho de cada tarjeta para que entren 5 */
  text-align: center;
}

.cardPorque-container h3 {
  color: #043780;
  font-size: 1.1rem;
  margin-top: 20px;
  font-weight: 700;
}

/* Tarjeta base */
.cardPorque {
  background: #fff;
  border-radius: 50%; /* Hace las tarjetas circulares */
  padding: 18px;
  width: 90px; /* Ajusté el tamaño de la tarjeta */
  height: 90px; /* Mismo tamaño en altura y ancho */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Centra el contenido dentro de la tarjeta */
  border: 1px solid rgba(4, 55, 128, 0.2); /* Borde suave */
}

/* Estados iniciales ocultos para animación de entrada (se activan con GSAP)
   Evitan parpadeos y permiten que la animación se vea desde "no visual" */
#porque h2 {
  opacity: 0;
  transform: translateX(-120px);
}

.cardPorque {
  opacity: 0;
  transform: scale(0);
}

.cardPorque-container h3 {
  opacity: 0;
  transform: translateY(30px);
}


/* Responsividad para móviles y tablets */
@media (max-width: 768px) {
  /* En móviles y tablets, h2 y p ocupan todo el ancho */
  #porque {
    padding: 50px 20px;
    margin-left: 0px;
    margin-right: 0px;
    overflow: hidden;
    text-align: center;
  }

  #porque h2, #porque p {
    width: 100%;
    text-align: center;
  }

  /* Contenedor de las tarjetas */
  .porque-container {
    display: flex;
    flex-wrap: wrap; /* Las tarjetas se ajustan en varias filas */
    justify-content: space-evenly; /* Distribuye las tarjetas equitativamente */
  }

.cardPorque {
  background: #fff;
  border-radius: 50%; /* Hace las tarjetas circulares */
  padding: 18px;
  width: 90px; /* Ajusté el tamaño de la tarjeta */
  height: 90px; /* Mismo tamaño en altura y ancho */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* Centra el contenido dentro de la tarjeta */
  border: 1px solid rgba(4, 55, 128, 0.2); /* Borde suave */
}
  /* Tarjetas */
  .cardPorque-container {
    width: 45%; /* Dos tarjetas por fila */
    margin-bottom: 20px; /* Espacio entre las filas */
  }

  /* En la tercera fila, el bloque se centra */
  .cardPorque-container:nth-child(5) {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  /* Para pantallas más pequeñas, ajustamos más */
  .cardPorque-container {
    width: 45%; /* Dos tarjetas por fila */
  }

  .cardPorque-container:nth-child(5) {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}


/* Títulos de secciones que se animan al hacer scroll */
#cursos h2,
.ubicacion-title {
  opacity: 0;
  transform: translateX(-120px);
}

.cardPorque i {
  color: #043780;
  font-size: 45px; /* Tamaño de los íconos */
}

.cardPorque:hover {
  transform: scale(1.1); /* Aumenta el tamaño de la tarjeta al pasar el cursor */
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* Aumenta la sombra */
}



/* ============   SECCION CURSOS    ===========*/
/* Estilo de la sección de cursos */
#cursos {
  padding: 0px 20px 20px 20px;
  margin-left: 150px;
  margin-right: 150px;
  overflow: hidden; /* Esto permite que los elementos fuera de la pantalla no sean visibles */
  margin-bottom: 20px;
}

#cursos h2 {
  color: #043780;
  font-size: 2rem;
  text-align: left;
  margin-bottom: 20px;
  position: relative;
}

#cursos p {
  color: #043780; /* Color del texto */
  font-size: 1.2rem; /* Tamaño del texto */
  text-align: justify;
  margin-left: 0; /* Alineamos el texto a la izquierda */
  margin-bottom: 30px; /* Espacio debajo del texto */
}

/* Contenedor de las tarjetas */
.cursos-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 20px;
  margin: 0 auto;
  padding: 0 20px;         /* Margen lateral */
  max-width: 1040px;       /* Límite para pantallas grandes */
  margin-left: 0;          /* Alineado a la izquierda */
}

/* Tarjeta base */
.cardCursos {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(4, 55, 128, 0.2); /* Borde suave */
  text-align: center; /* Centrado del texto */
}

/* Efecto hover: aumenta el tamaño de la tarjeta */
.cardCursos:hover {
    /* transform: translateY(-8px); */
  transform: scale(1.1);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Imagen dentro de la tarjeta (ahora circular) */
.cardCursos img {
  width: 150px; /* Aumento el tamaño de la imagen */
  height: 150px; /* Aumento el tamaño de la imagen */
  border-radius: 50%; /* Sigue siendo circular */
  margin-bottom: 20px; /* Un poco más de espacio debajo */
  object-fit: cover; /* Ajustamos la imagen para que se recorte de forma circular */
}

/* Títulos dentro de la tarjeta */
.cardCursos h3 {
  color: #043780; /* Títulos de color azul */
  font-size: 1.4rem;
  margin-bottom: 10px; /* Espacio debajo del título */
  text-align: left; /* Alineación a la izquierda */
  margin-left: 0; /* Alineamos el texto a la izquierda */
}

/* Descripción dentro de la tarjeta */
.cardCursos p {
  color: #333; /* Color del texto */
  font-size: 1rem;
  text-align: center; /* Texto centrado */
}

/* Ajuste de la posición del texto en "Licencia Clase B" */
.cardCursos:nth-child(1) h3 {
  text-align: left; /* Alineamos el título a la izquierda */
  margin-left: 0; /* Alineamos el texto al extremo izquierdo */
}

/* Estilo del botón */
.cardCursos button {
  width: 25%;  /* El botón sigue siendo más angosto */
  margin-top: 12px;
  background: #fff; /* Fondo blanco */
  color: #063982;  /* Color del texto */
  border: 2px solid #4F6B98; 
  padding: 0 12px;  /* Solo agregamos padding a los laterales */
  height: 25px;  /* Altura de 70px en top y bottom */
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px; /* Aumentado tamaño de font */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Sombra notoria para hacerlo sobresalir */
  transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  display: block;
  margin-left: auto;
  margin-right: auto; /* Centramos el botón */
}

/* Efecto hover en el botón */
.cardCursos button:hover {
  /*transform: translateY(-6px);*/
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  color: #FEC917;
  background: #4F6B98;
}

/* Estado activo cuando su sección está abierta */
.cardCursos button.btn-active {
  background: #063982;
  color: #FEC917;
  border-color: #063982;
  box-shadow: 0 4px 14px rgba(6, 57, 130, 0.4);
  transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

/* @media (max-width: 768px) { */
@media (max-width: 1024px) {
  #cursos {
    padding: 0px 20px 20px 20px;
    margin-left: 0px;
    margin-right: 0px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .cursos-container {
    display: block;
  }

  .cardCursos {
    margin-top: 10px;
   }

  /* En movil/tablet no aplicar aumento de tamano a tarjetas visibles */
  .cardCursos:hover {
    transform: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}



/* ============   SECCION CURSOS  B  ===========*/
#cursosB {
  padding: 0px 20px 20px 20px;
  margin-left: 150px;
  margin-right: 150px;

}

.acordeon-contenidoB {
  height: 0;
  opacity: 0;
  overflow: hidden;
  /* Animación controlada por GSAP */
}

.acordeon-contenidoB.open {
  opacity: 1; /* fallback sin JS */
}


/* Contenedor de las tarjetas */
.cursosB-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 20px;
  margin: 0 auto;
  padding: 0 20px;         /* Margen lateral */
  max-width: 1040px;       /* Límite para pantallas grandes */
  margin-left: 0;          /* Alineado a la izquierda */
  margin-bottom: 40px;     /* espacio extra debajo para evitar solapamientos */
}

/* Tarjeta base */
.cardCursosB {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(4, 55, 128, 0.2); /* Borde suave */
  text-align: center; /* Centrado del texto */
  margin-top: 15px;
}

/* Efecto hover: aumenta el tamaño de la tarjeta */
.cardCursosB:hover {
    /* transform: translateY(-8px); */
  transform: scale(1.07);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Imagen dentro de la tarjeta (ahora circular) */
.cardCursosB img {
  width: 150px; /* Aumento el tamaño de la imagen */
  height: 150px; /* Aumento el tamaño de la imagen */
  border-radius: 50%; /* Sigue siendo circular */
  margin-bottom: 20px; /* Un poco más de espacio debajo */
  object-fit: cover; /* Ajustamos la imagen para que se recorte de forma circular */
}

/* Títulos dentro de la tarjeta */
.cardCursosB h3 {
  color: #043780 !important; /* Títulos de color azul */
  font-size: 1.4rem;
  margin-bottom: 10px; /* Espacio debajo del título */
  text-align: left; /* Alineación a la izquierda */
  margin-left: 0; /* Alineamos el texto a la izquierda */
}

/* Descripción dentro de la tarjeta */
.cardCursosB p {
  color: #333; /* Color del texto */
  font-size: 1rem;
  text-align: center; /* Texto centrado */
}

/* texto adicional dentro de tarjetas pequeñas */
.cardCursosB p.extra-text {
  color: #043780;
  font-size: 16px;
  text-align: justify;
  margin: 8px 0;
}
/* Nueva tarjeta grande que ocupa tres columnas */
.cardCursosB-large {
  display: flex;
  flex-direction: row; /* Imagen a la izquierda y texto a la derecha */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  grid-column: span 3; /* Esta propiedad hace que la tarjeta ocupe tres columnas */
  padding: 20px;
  margin-top: 20px;
  border: 1px solid rgba(4, 55, 128, 0.2); /* Borde suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
}

.cardCursosB-large:hover {
    /* transform: translateY(-8px); */
  transform: scale(1.05);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Imagen dentro de la tarjeta grande */
.cardCursosB-image-container {
  width: 100%
}

.cardCursosB-large img {
  width: 45%; /* La imagen ocupa el 45% del ancho de la tarjeta */
  height: auto;
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Sombra suave */
  object-fit: contain; /* Mantiene la imagen sin recortarla */
  max-width: 90%; /* Reduce la imagen un 10% respecto a su tamaño original */
}

/* Texto al costado de la imagen */
.cardCursosB-text {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Esto asegura el espacio entre los párrafos */
  max-width: 55%; /* El texto ocupa el 55% del ancho de la tarjeta */
  font-size: 20px;
  color: #043780; /* Títulos de color azul */
  text-align: justify; /* Justifica el texto */
  height: 100%; /* Hace que el contenedor de texto ocupe todo el alto disponible */
}

/* Estilo del primer párrafo: alineado con el top de la imagen */
.cardCursosB-text p:first-child {
  align-self: flex-start; /* Alinea el primer párrafo al top */
  margin-bottom: 10px; /* Espacio entre los párrafos */
}

/* Estilo del último párrafo: alineado con el bottom de la imagen */
.cardCursosB-text p:last-child {
  align-self: flex-end; /* Alinea el último párrafo al bottom */
  margin-top: 10px; /* Espacio entre el párrafo y el contenido superior */
}

/* Estilo del párrafo central: con espacio arriba y abajo */
.cardCursosB-text p:nth-child(2) {
  margin-top: 10px; /* Espacio arriba */
  margin-bottom: 10px; /* Espacio abajo */
}


/* ================================= */
/* VERSION MOVIL / TABLET - CAROUSEL */
/* ================================= */

@media (max-width:1024px) {

  #cursosB {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    padding: 0 0 20px 10px;
  }

  #cursosB.open::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(6, 57, 130, 0.08) 72%, rgba(6, 57, 130, 0.14) 100%);
    z-index: 2;
  }

  #cursosB.open::before {
    content: 'Desliza';
    position: absolute;
    right: 14px;
    top: 18px;
    z-index: 3;
    pointer-events: none;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(6, 57, 130, 0.62);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    box-shadow: 0 4px 12px rgba(6, 57, 130, 0.12);
  }

  /* contenedor horizontal */
  .cursosB-container {

    display: flex;
    flex-direction: row;

    overflow-x: auto;
    overflow-y: hidden;

    gap: 16px;

    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    padding-right: 20vw;
    padding-bottom: 10px;
  }

  /* ocultar scrollbar */

  .cursosB-container::-webkit-scrollbar {
    display: none;
  }

  .cursosB-container {
    scrollbar-width: none;
  }

  /* tarjetas pequeñas */

  .cardCursosB {

    min-width: clamp(248px, 78vw, 340px);
    max-width: clamp(248px, 78vw, 340px);

    flex-shrink: 0;

    scroll-snap-align: start;
  }

  /* tarjeta grande */

  .cardCursosB-large {

    min-width: clamp(280px, 84vw, 380px);
    max-width: clamp(280px, 84vw, 380px);

    flex-direction: column;

    flex-shrink: 0;

    scroll-snap-align: start;

    grid-column: unset;
    padding-bottom: 10px;
  }

  /* imagen */

  .cardCursosB-large img {

    width: 100%;
    max-width: 100%;
  }

  /* texto */

  .cardCursosB-text {

    max-width: 100%;

    padding-left: 0;

    margin-top: 10px;

    font-size: 16px;
  }

}


/* ============   SECCION CURSOS A  ===========*/
.linea {
  display: flex;
  align-items: center;
  margin-bottom: 20px; /* Espacio entre las líneas */
}

#cursosA2 {
  padding: 0px 20px 20px 20px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: -25px;
}

#cursosA3 {
  padding: 0px 20px 20px 20px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: -20px;
}

#cursosA4 {
  padding: 0px 20px 20px 20px;
  margin-left: 150px;
  margin-right: 150px;
  margin-top: -20px;
}

.acordeon-contenidoA {
  max-height: 0; /* Inicialmente está oculta */
  opacity: 0; /* Inicialmente es invisible */
  overflow: hidden; /* Esto permite que los elementos fuera de la pantalla no sean visibles */
  transition: max-height 0.5s ease-out, opacity 0.5s ease-out; /* Transición suave */
 }

/* Efecto de apertura suave */
.acordeon-contenidoA.open {
  max-height: 1050px; /* Ajusta el valor según el contenido */
  opacity: 1; /* La hace visible */
}

/* Contenedor de las tarjetas */
.cursosA-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 20px;
  margin: 0 auto;
  padding: 0 0px;         /* Margen lateral */
  max-width: 980px;       /* Límite para pantallas grandes */
  margin-left: 20;          /* Alineado a la izquierda */
}

/* Tarjeta base */
.cardCursosA {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(4, 55, 128, 0.2); /* Borde suave */
  text-align: center; /* Centrado del texto */
}

/* Efecto hover: aumenta el tamaño de la tarjeta */
.cardCursosA:hover {
    /* transform: translateY(-8px); */
  transform: scale(1.1);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Imagen dentro de la tarjeta (ahora circular) */
.cardCursosA-img-container {
  width: 40%;
}

.cardCursosA img {
  width: 150px; /* Aumento el tamaño de la imagen */
  height: 150px; /* Aumento el tamaño de la imagen */
  border-radius: 50%; /* Sigue siendo circular */
  margin-bottom: 20px; /* Un poco más de espacio debajo */
  object-fit: cover; /* Ajustamos la imagen para que se recorte de forma circular */
}

/* Títulos dentro de la tarjeta */
.cardCursosA h3 {
  color: #043780 !important; /* Títulos de color azul */
  font-size: 1.4rem;
  margin-bottom: 10px; /* Espacio debajo del título */
  text-align: left; /* Alineación a la izquierda */
  margin-left: 0; /* Alineamos el texto a la izquierda */
}

/* Descripción dentro de la tarjeta */
.cardCursosA p {
  color: #333; /* Color del texto */
  font-size: 1rem;
  text-align: center; /* Texto centrado */
}

/* Nueva tarjeta grande que ocupa tres columnas */
.cardCursosA-large {
  display: flex;
  flex-direction: row; /* Imagen a la izquierda y texto a la derecha */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  grid-column: span 3; /* Esta propiedad hace que la tarjeta ocupe tres columnas */
  padding: 20px;
  margin-top: 20px;
  border: 1px solid rgba(4, 55, 128, 0.2); /* Borde suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
}

/* Imagen dentro de la tarjeta grande */
.cardCursosA-large img {
  width: 100%; /* La imagen ocupa el 45% del ancho de la tarjeta */
  height: auto;
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Sombra suave alrededor de la imagen */
  object-fit: contain; /* Mantiene la imagen sin recortarla */
  max-width: 90%; /* Reduce la imagen un 10% respecto a su tamaño original */
  display: block; /* Elimina el espacio extra debajo de la imagen */
  margin: 0 auto; /* Centra la imagen */
}

/* Texto al costado de la imagen */
.cardCursosA-text {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Esto asegura el espacio entre los párrafos */
  max-width: 55%; /* El texto ocupa el 55% del ancho de la tarjeta */
  font-size: 17px;
  color: #043780; /* Títulos de color azul */
  text-align: justify; /* Justifica el texto */
  height: 100%; /* Hace que el contenedor de texto ocupe todo el alto disponible */
}

.cardCursosA-large:hover {
    /* transform: translateY(-8px); */
  transform: scale(1.05);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Estilo del primer párrafo: alineado con el top de la imagen */
.cardCursosA-text p:first-child {
  align-self: flex-start; /* Alinea el primer párrafo al top */
  margin-bottom: 10px; /* Espacio entre los párrafos */
}

/* Estilo del último párrafo: alineado con el bottom de la imagen */
.cardCursosA-text p:last-child {
  align-self: flex-end; /* Alinea el último párrafo al bottom */
  margin-top: 10px; /* Espacio entre el párrafo y el contenido superior */
}

/* Estilo del párrafo central: con espacio arriba y abajo */
.cardCursosA-text p:nth-child(2) {
  margin-top: 10px; /* Espacio arriba */
  margin-bottom: 10px; /* Espacio abajo */
}


/* ================================= */
/* CURSOS A2 - A3 - A4 MOVIL/TABLET  */
/* ================================= */
@media (max-width:1024px) {

  /* eliminar márgenes laterales grandes */

  #cursosA2,
  #cursosA3,
  #cursosA4 {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding: 0 10px 20px 10px;
  }

  /* Sin espacio residual cuando el acordeon esta cerrado (anula padding de IDs) */
  .acordeon-contenidoB:not(.open),
  .acordeon-contenidoD:not(.open) {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Mayor separacion entre tarjeta visible y bloque de detalle abierto */
  .acordeon-contenidoB.open,
  .acordeon-contenidoD.open {
    margin-top: 18px;
  }

  /* En movil el contenido apila verticalmente: GSAP gestiona el alto, solo fijamos padding */
  .acordeon-contenidoD.open {
    padding-bottom: 20px !important;
  }

  /* contenedor */

  .cursosA-container {
    display: block;
    max-width: 100%;
    padding: 0;
  }

  /* tarjeta principal */

  .cardCursosA-large {

    flex-direction: column;   /* imagen arriba texto abajo */

    grid-column: unset;

    width: 100%;

    padding: 15px;
  }

  /* contenedor de imagen */

  .cardCursosA-img-container {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 15px;
  }

  /* imagen */

  .cardCursosA-large img {

    width: 100%;

    max-width: 320px;

    height: auto;
  }

  /* texto */

  .cardCursosA-text {

    max-width: 100%;

    padding-left: 0;

    font-size: 16px;

    text-align: justify;
  }

}


/* ============   SECCION CURSOS  D  ===========*/
#cursosD {
  padding: 0px 20px 20px 20px;
  margin-left: 150px;
  margin-right: 150px;
}

.acordeon-contenidoD {
  height: 0;
  opacity: 0;
  overflow: hidden;
  /* Animación controlada por GSAP */
}

.acordeon-contenidoD.open {
  opacity: 1; /* fallback sin JS */
}

/* Contenedor de las tarjetas */
.cursosD-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas */
  gap: 20px;
  margin: 0 auto;
  padding: 0 20px;         /* Margen lateral */
  max-width: 1040px;       /* Límite para pantallas grandes */
  margin-left: 0;          /* Alineado a la izquierda */
  margin-top: -20px;
}

/* Tarjeta base */
.cardCursosD {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(4, 55, 128, 0.2); /* Borde suave */
  text-align: center; /* Centrado del texto */
}

/* Efecto hover: aumenta el tamaño de la tarjeta */
.cardCursosD:hover {
    /* transform: translateY(-8px); */
  transform: scale(1);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Imagen dentro de la tarjeta */
.cardCursosD-image-container {
  width: 40%;
}

.cardCursosD img {
  width: 150px; /* Aumento el tamaño de la imagen */
  height: 150px; /* Aumento el tamaño de la imagen */
  border-radius: 50%; /* Sigue siendo circular */
  margin-bottom: 20px; /* Un poco más de espacio debajo */
  object-fit: cover; /* Ajustamos la imagen para que se recorte de forma circular */
}

/* Títulos dentro de la tarjeta */
.cardCursosD h3 {
  color: #043780 !important; /* Títulos de color azul */
  font-size: 1.4rem;
  margin-bottom: 10px; /* Espacio debajo del título */
  text-align: left; /* Alineación a la izquierda */
  margin-left: 0; /* Alineamos el texto a la izquierda */
}

/* Descripción dentro de la tarjeta */
.cardCursosD p {
  color: #333; /* Color del texto */
  font-size: 1rem;
  text-align: center; /* Texto centrado */
}

/* Nueva tarjeta grande que ocupa tres columnas */
.cardCursosD-large {
  display: flex;
  flex-direction: row; /* Imagen a la izquierda y texto a la derecha */
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  grid-column: span 3; /* Esta propiedad hace que la tarjeta ocupe tres columnas */
  padding: 20px;
  margin-top: 35px;
  border: 1px solid rgba(4, 55, 128, 0.2); /* Borde suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
}

/* Imagen dentro de la tarjeta grande */
.cardCursosD-large img {
  width: 100%; /* La imagen ocupa el 45% del ancho de la tarjeta */
  height: auto;
  border-radius: 10px; /* Bordes redondeados */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6); /* Sombra suave alrededor de la imagen */
  object-fit: contain; /* Mantiene la imagen sin recortarla */
  max-width: 90%; /* Reduce la imagen un 10% respecto a su tamaño original */
  display: block; /* Elimina el espacio extra debajo de la imagen */
  margin: 0 auto; /* Centra la imagen */
}

/* Texto al costado de la imagen */
.cardCursosD-text {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Esto asegura el espacio entre los párrafos */
  max-width: 55%; /* El texto ocupa el 55% del ancho de la tarjeta */
  font-size: 17px;
  color: #043780; /* Títulos de color azul */
  text-align: justify; /* Justifica el texto */
  height: 100%; /* Hace que el contenedor de texto ocupe todo el alto disponible */
}

.cardCursosD-large:hover {
    /* transform: translateY(-8px); */
  transform: scale(1.05);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

/* Estilo del primer párrafo: alineado con el top de la imagen */
.cardCursosD-text p:first-child {
  align-self: flex-start; /* Alinea el primer párrafo al top */
  margin-bottom: 10px; /* Espacio entre los párrafos */
}

/* Estilo del último párrafo: alineado con el bottom de la imagen */
.cardCursosD-text p:last-child {
  align-self: flex-end; /* Alinea el último párrafo al bottom */
  margin-top: 10px; /* Espacio entre el párrafo y el contenido superior */
}

/* Estilo del párrafo central: con espacio arriba y abajo */
.cardCursosD-text p:nth-child(2) {
  margin-top: 10px; /* Espacio arriba */
  margin-bottom: 10px; /* Espacio abajo */
}



/* ================================= */
/* CURSO CLASE D - MOVIL / TABLET    */
/* ================================= */

@media (max-width:1024px) {

  #cursosD {
    margin-left: 0;
    margin-right: 0;
    padding: 0 10px 20px 10px;
  }

  /* contenedor */

  .cursosD-container {
    display: block;
    max-width: 100%;
    padding: 0;
    margin-top: 0;
  }

  /* tarjeta */

  .cardCursosD-large {

    flex-direction: column;   /* imagen arriba texto abajo */

    grid-column: unset;

    width: 100%;

    padding: 15px;

    margin-top: 15px;
  }

  /* contenedor imagen */

  .cardCursosD-image-container {

    width: 100%;

    display: flex;

    justify-content: center;

    margin-bottom: 15px;
  }

  /* imagen */

  .cardCursosD-large img {

    width: 100%;

    max-width: 340px;

    height: auto;
  }

  /* texto */

  .cardCursosD-text {

    max-width: 100%;

    padding-left: 0;

    font-size: 16px;

    text-align: justify;
  }

}


/* Estilos del footer */
footer {
  background-color: #063982; /* Fondo institucional */
  color: #fff; /* Texto blanco */
  padding-top: 62px; /* Espaciado vertical */
  padding-bottom: 20px; /* Espaciado vertical */

  text-align: center; /* Alineamos el contenido al centro */
  font-size: 14px; /* Tamaño de texto pequeño */
  position: relative; /* Necesario para posicionar la línea sobre el texto */
}

/* Línea sobre el texto */
footer::before {
  content: ""; /* Necesario para crear la línea */
  position: absolute;
  top: 0; /* Colocamos la línea justo arriba del texto */
  left: 0;
  width: 100%;
  height: 2px; /* Grosor de la línea */
  background-color: #4c79b0; /* Un color más claro que #063982 */
}

footer p {
  margin-bottom: -15px; /* Espacio entre el texto y los iconos */
  position: relative; /* Necesario para colocar la línea sobre el texto */
}


footer .social-media {
  margin-top: 10px;
  margin-bottom: 50px;
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se ajusten en varias líneas si es necesario */
  justify-content: center; /* Centra los elementos */
}

footer .social-media a {
  color: #fff; /* Enlaces blancos */
  margin: 0 15px; /* Espaciado entre los íconos */
  font-size: 20px; /* Tamaño de los íconos */
  transition: color 0.3s ease; /* Transición suave al pasar el cursor */
}

footer .social-media a:hover {
  color: #FEC917; /* Cambio de color al pasar el cursor */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Para pantallas de móvil y tabletas (menos de 1024px) */
@media (max-width: 1024px) {
  footer .social-media {
    flex-direction: column; /* Los elementos se apilan verticalmente */
  }

  footer .social-media a:first-child {
    margin-bottom: 10px; /* Espacio entre el correo y los íconos de redes sociales */
  }

  /* Asegura que los íconos de Facebook e Instagram estén en la misma línea */
  footer .social-media .social-icons {
    display: flex;
    justify-content: center; /* Centra los íconos de las redes sociales */
    margin-top: 10px;
  }

  footer .social-media a {
    font-size: 25px; /* Ajuste del tamaño de los íconos */
  }
}

/* Para pantallas mayores a 1024px, mantén el diseño original */
@media (min-width: 1025px) {
  footer .social-media {
    flex-direction: row; /* Asegura que los íconos sigan en una sola línea */
  }
}


footer .footer-line {
  width: 100%; /* Aseguramos que la línea ocupe todo el ancho */
  height: 2px; /* Grosor de la línea */
  background-color: #4c79b0; /* Línea de color más claro que el fondo */
  margin-top: 5px;
  margin-bottom: 5px;
}


.logo-container {
  flex: 1;
}

.logo {
  width: 160px;
  margin: 0 auto;
  display: block;
  opacity: 0;
  transform: translateX(-120px);
}

.buttons-container {
  transform: none !important;  /* evita que queden pegados fuera */
  opacity: 1;
  z-index: 25;
  padding-right: 30px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}


/* ==== FIX DEFINITIVO BOTONES TOP ==== */
.cta-button {
  appearance: none;
  -webkit-appearance: none;
  background-color: #073A82 !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  width: 200px;
  height: 50px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  margin-right: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.cta-button:hover {
  transform: translateY(-6px); /* Animación de hover */
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24); /* Sombra en hover */
}

.cta-button-aulavirtual {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff !important;
  border: 1px solid #073A82 !important;
  color: #073A82 !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 22px;
  border-radius: 8px;
  border: none;

  font-size: 14px;
  font-weight: 700;
  line-height: 1;

  cursor: pointer;
  width: 180px;
  height: 50px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.cta-button-aulavirtual:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
  background-color: #073A82;  /* Esto cambia el color del fondo */
  color: #ffffff; /* Esto cambia el color del texto */
}


/* Estilos Generales para la sección UBICACION */
.ubicacion-section {
  background: #f9fafb;
  padding: 60px 20px;
  scroll-margin-top: 20px;
  text-align: left;
  margin-top: 20px;

}

/* Título de ubicación */
.ubicacion-title {
  color: #063982;
  margin-bottom: 20px !important;
  font-size: 2rem;
  width: 77%; /* Ajusta el ancho al de las tarjetas */
  margin: 0 auto;
  position: relative;
}

.ubicacion-text {
  font-size: 1.2rem;
  margin-bottom: 30px !important;
  color: #063982;
  width: 77%; /* Ajusta el ancho al de las tarjetas */
  margin: 0 auto;
  text-align: justify;
}


/* Contenedor principal */
.ubicacion-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 20px;
}

/* Contenedor de la izquierda con los datos */
.ubicacion-left {
  background: #fff;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
  display: flex;
  align-items: center;
  /* border: 1px solid rgba(4, 55, 128, 0.2); */
  text-align: center;
}

/* Datos de contacto */
.ubicacion-info {
  font-size: 16px;
  color: #374151;
  line-height: 1.6;
  padding: 10px;
  box-sizing: border-box;
}

.ubicacion-subtitle {
  font-size: 1.4rem;
  font-weight: 700;
  color: #063982;
  margin-bottom: 20px;
}

.ubicacion-details p {
  color: #063982;
  margin-bottom: 15px;
  text-align: left;
}

/* Estilo para el botón de WhatsApp */
.ubicacion-whatsapp {
  display: inline-block;
  background: #25D366;
  color: white;
  font-weight: 500;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-decoration: none;
  font-size: 18px;
  margin-top: 20px;
}


/* ================================================= */
/* PANTALLAS GRANDES ≥ 1441px — secciones centradas  */
/* No afecta resoluciones inferiores                 */
/* ================================================= */
@media (min-width: 1441px) {

  /* "¿Por qué elegir a Econit?" */
  #porque {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }

  /* "Nuestros cursos" — sección encabezado */
  #cursos {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Grid de tarjetas de cursos (tenía margin-left:0 explícito) */
  .cursos-container {
    margin-left: auto;
    margin-right: auto;
  }

  /* Acordeón Clase B */
  #cursosB {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Acordeones Licencias Profesionales A */
  #cursosA2,
  #cursosA3,
  #cursosA4 {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Acordeón Clase D */
  #cursosD {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Contenido interno de los acordeones ---- */

  /* Grid de tarjetas Clase B (tenía margin-left:0 explícito) */
  .cursosB-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
  }

  /* Layout interno Licencias Profesionales A (tenía margin-left:20 explícito) */
  .cursosA-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
  }

  /* Grid de tarjeta Clase D (tenía margin-left:0 explícito) */
  .cursosD-container {
    margin-left: auto;
    margin-right: auto;
    max-width: 1100px;
  }

  /* ---- Nuestra Ubicación ---- */

  /*
   * Para alinear el borde izquierdo del título con el de #cursos:
   * #cursos:  max-width 1140px + margin:auto + padding-left 20px  → borde texto = (vw-1140)/2 + 20
   * .ubicacion-section pad lateral = 20px → necesitamos max-width 1100px + margin:auto
   *   → borde texto = 20 + (vw-40-1100)/2 = 20 + (vw-1140)/2  ✓
   */
  .ubicacion-title,
  .ubicacion-text {
    width: auto;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }

  /* El contenedor mapa+datos ya tiene max-width:1200px y margin:auto, solo reforzamos */
  .ubicacion-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ---- Video Sticky ---- */
  /* En pantallas grandes, agregamos un pequeno solape estructural para evitar franjas residuales */
  .video-section {
    height: calc(70vh + 36px);
    margin-bottom: 0;
  }

  /* Cuando el sticky JS activa .fixed, en desktop grande se ancla al bottom */
  .video-section.fixed {
    top: auto !important;
    bottom: -36px !important;
  }

  .overlay2 {
    height: calc(70vh + 36px);
  }

  /* ---- Certificación ---- */
  /* Igualar el ancho útil del texto de #cursos (1140px de sección - 40px de padding = 1100px) */
  .certificacion {
    width: 100%;
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}

/* Contenedor de la derecha (Mapa) */
.ubicacion-right {
  flex: 1;
  min-width: 300px;
  max-width: 50% !important;
}

/* Estilo para la tarjeta del mapa */
.map-card {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Efecto de hover */
}

/* Estilo del iframe del mapa */
.map-iframe {
  width: 100%;
  height: 400px;
  border: none;
}

/* Efecto hover para las tarjetas */
.ubicacion-left:hover, .ubicacion-right:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-in-out;
}




/* Estilo para la sección del video */
.video-section {
  position: relative;
  width: 100%;
  height: 642px;  /* Altura del video */
  overflow: hidden;  /* Asegura que todo lo que sobresalga esté recortado */
  margin-bottom: 1px;
}

/* cuando se fija en top durante scroll */
.video-section.fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0; /* footer tendrá z-index mayor para pasar por encima */
}

/* asegurar footer pasa sobre el video fijo */
footer {
  position: relative;
  z-index: 2;
}

/* Estilo para el video en el fondo */
.video-background {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Asegura que el video cubra todo el contenedor */
}

/* Capa sobre el video */
.overlay2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 642px;
  background-color: rgba(6, 56, 129, 0.5);  /* Capa celeste semitransparente */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;  /* Color del texto */
  text-align: center;
  /* padding: 20px; */
  box-sizing: border-box;
  z-index: 1;  /* Asegura que la capa esté por encima del video */
  object-fit: cover;  /* Asegura que el video cubra todo el contenedor */
}

/* Estilo para el título */
.overlay2 h2 {
  font-size: 2rem;
  margin-bottom: 10px;
}

/* Estilo para el párrafo */
.overlay2 p {
  font-size: 18px;
  margin-bottom: 20px;
}

/* Estilo para el botón */
.cta-button2 {
  padding: 10px 30px;
  font-size: 18px;
  color: white;
  border: 2px solid #063982;
  border-radius: 25px;
  background-color: rgba(6, 56, 129, 0.7); /* Fondo semitransparente */
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.3s ease, background-color 0.3s ease; /* Transición suave */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);  /* Sombra suave para el botón */
}

/* Efecto de hover para el botón */
.cta-button2:hover {
  transform: scale(1.1);  /* Aumenta de tamaño levemente */
  background-color: rgba(6, 56, 129, 0.9); /* Fondo más opaco al pasar el cursor */
}



/* Responsividad */
@media (max-width: 1024px) {
  .ubicacion-left, .ubicacion-right {
    max-width: 100%; /* En pantallas pequeñas, las tarjetas ocupan el 100% del ancho */
  }

  .ubicacion-container {
    flex-direction: column; /* Cambia el diseño a columna en pantallas pequeñas */
  }
}

/* Contenedor de la tarjeta del video */
.ubicacion-video {
  width: 72%;  /* Asegura que la tarjeta de video abarque un 72% del ancho disponible */
  margin: 0 auto;  /* Centra el contenedor .ubicacion-video horizontalmente */
}

.video-card {
  width: 78%;  /* Define el ancho de la tarjeta de video */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra para darle profundidad */
  border-radius: 8px;  /* Bordes redondeados */
  overflow: hidden;  /* Para asegurar que el contenido del video no sobresalga */
  padding-top: 10px;
  margin: 0 auto;  /* Centra la tarjeta de video dentro del contenedor */
}



/* Estilos para la sección INSTAGRAM en el footer */
.instagram-footer {
  text-align: center; /* Centra todo el contenido */
  color: #063982; /* Color general del texto */
  padding: 20px 20px 0px 20px;
}

/* Estilo para el título */
.instagram-footer h2 {
  color: #FECA17; /* Color amarillo */
  font-size: 2.1rem; /* Tamaño del texto */
  margin-bottom: 25px; /* Espacio debajo del título */
}

/* Estilo para la descripción */
.instagram-footer span {
  font-size: 18px; /* Tamaño de texto más pequeño */
  color: white; /* Color de texto similar al de la sección */
  max-width: 50%; /* Asegura que el texto no sea más ancho que el título */
  display: inline-block; /* Para poder centrarlo */
  margin-bottom: 30px; /* Espacio abajo */
}

/* Estilo para el botón */
.instagram-footer button {
  background-color: transparent; /* Fondo transparente */
  border: 2px solid #FECA17; /* Borde amarillo */
  color: #FECA17; /* Texto amarillo */
  font-size: 1rem; /* Tamaño de texto del botón */
  padding: 12px 25px; /* Espaciado interno para el botón */
  border-radius: 25px; /* Bordes redondeados */
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-weight: bold;
}

/* Efecto cuando el cursor está sobre el botón */
.instagram-footer button:hover {
  background-color: #5779a9; /* Color celeste claro */
  color: white; /* Texto blanco cuando pasa el cursor */
}



ul {
  padding-left: 20px; /* Alinea ambas listas al mismo nivel */
  list-style-position: inside; /* Ajusta la posición de los puntos dentro de la lista */
}

/* Esto elimina los puntos solo para la lista con la clase 'con-visto-bueno' */
.con-visto-bueno {
  list-style-type: none; /* Elimina los puntos */
}

.con-visto-bueno li::before {
  content: "✓"; /* Agrega el visto bueno antes del texto */
  display: inline-block; /* Evita el tabulador extra */
  margin-right: 5px; /* Solo un pequeño margen entre el símbolo y el texto */
  vertical-align: middle; /* Alinea el símbolo al centro */
}

@media (max-width: 1024px) {

  footer {
    background-color: #063982; /* Fondo institucional */
    color: #fff; /* Texto blanco */
    padding-top: 100px; /* Espaciado vertical */
    padding-bottom: 20px; /* Espaciado vertical */
    text-align: center; /* Alineamos el contenido al centro */
    font-size: 14px; /* Tamaño de texto pequeño */
    position: relative; /* Necesario para posicionar la línea sobre el texto */
  }

  .instagram-footer {
    text-align: center; /* Centra todo el contenido */
    color: #063982; /* Color general del texto */
    padding: 0px;
  }

  .instagram-footer span {
    font-size: 18px; /* Tamaño de texto más pequeño */
    color: white; /* Color de texto similar al de la sección */
    display: inline; /* Para poder centrarlo */
  }

.instagram-footer h2 {
  color: #FECA17; /* Color amarillo */
  font-size: 2.1rem; /* Tamaño del texto */
  margin-bottom: 15px; /* Espacio debajo del título */
}

.instagram-footer button {
  margin-top: 20px;
}
}

/* para la respuesta de mensajes  */
.form-mensaje {
  min-height: 40px;             /* altura fija suficiente para cualquier mensaje */
  padding: 10px;                 /* padding constante */
  border-radius: 6px;
  font-size: 14px;

  /* siempre con border y background, solo cambia el color */
  border: 1px solid transparent; 
  background-color: transparent;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease;

}

.form-mensaje.exito {
  opacity: 1;
  visibility: visible;
  background-color: #d4edda;
  color: #155724;
  border-color: #c3e6cb;
}

.form-mensaje.error {
  opacity: 1;
  visibility: visible;
  background-color: #f8d7da;
  color: #721c24;
  border-color: #f5c6cb;
}



/* ESTILOS PARA SECCION CERTIFICACION */
.certificacion {
    display: flex;
    gap: 20px;
    align-items: center;
    max-width: 1000px;
    margin: auto;
    padding: 20px;
    flex-wrap: wrap; /* para que sea responsive */
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.certificacion:hover {
    /* transform: translateY(-8px); */
  transform: scale(1.05);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* Sombra más fuerte */
}

.cert-texto {
    flex: 1 1 300px;
}

.cert-texto h2 {
    color: #043780;
    margin-bottom: 10px;
    font-size: 2rem; /* Tamaño de fuente para el título */
  opacity: 0;
  transform: translateX(-120px);
}

.cert-texto p {
    font-size: 15px;
    line-height: 1.6;
    margin: 0 0 10px 0;
    color: #063982;
    text-align: justify;
}

.cert-logo {
    flex: 1 1 200px;
    text-align: center;
}

.cert-logo img {
    max-width: 180px;
    height: auto;
    max-width: 200px;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}

/* Responsive para móviles */
@media (max-width: 1024px) {
  .certificacion {
      width: calc(100% - 36px);
      max-width: 100%;
      margin: 0 auto 24px;
      padding: 14px;
      box-sizing: border-box;
      flex-direction: column;
      text-align: center;
  }
  .certificacion:hover {
    transform: scale(1);
  }

  .cert-logo {
      margin-top: 15px;
  }
}