/* REGLAS DE DEFENSA (Definitivas) */
html, body {
  /* CRÍTICO: Debe estar para cortar el contenido que desborda */
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important; /* Asegura el ancho total */
}


/* Fuerza a que los contenedores no fijen un ancho que desborde */
.container, .wrapper, section {
  max-width: 100% !important;
  box-sizing: border-box;

}


*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: Helvetica, sans-serif;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}


.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body {
  background: linear-gradient(to bottom, #fdf8f8, #fdf8f8);
  color: #FFFFFF;
  margin: 0; /* Elimina el margen predeterminado del cuerpo */
  min-height: 100vh; /* Asegura que el cuerpo ocupe al menos el 100% de la altura de la ventana gráfica */
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* Hace que main ocupe el espacio disponible */
  display: flex;
  flex-direction: column;
}


/* ESTE APARTADO SOLO ES PARA LOS CSS DE LA PAGINA PRICIPAL */

/* Estilo para el contenedor con fondo */
.container.contenido.parte4 {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente los elementos apilados */
  align-items: flex-start; /* CAMBIO CLAVE: Alinea los elementos (h1, h2, h3, form) a la izquierda */
  text-align: left; /* Asegura que el texto dentro de los elementos se alinee a la izquierda */
  min-height: 100vh;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden; /* Evita que el contenido desborde el contenedor */

  /* Imagen de fondo */
  background-size: cover; /* Ajusta la imagen para que cubra todo el contenedor */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita la repetición */
}

/* Elimina márgenes adicionales en los hijos */
.container.contenido.parte4 > * {
  margin: 0;
}

.portada {
  width: 100%;
  height: 100vh;
  max-height: 100vh; /* Asegura que la imagen no exceda la altura de la ventana */
  object-fit: cover; /* Mantiene la proporción de la imagen dentro del contenedor */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* Coloca la imagen detrás del contenido */
}

/* Estilos para las imágenes de empresas en escala de grises */
.empresas-grayscale {
  filter: grayscale(100%); /* Hace que la imagen se vea completamente en blanco y negro */
}

/* Opcional: efecto al pasar el ratón para que vuelvan a su color original */
.empresas-grayscale:hover {
  filter: grayscale(0%); /* Quita el filtro de escala de grises */
  transition: filter 0.5s ease; /* Hace que la transición sea suave */
}

.curva-vibrante {
  position: absolute;
  top: 85vh; /* CAMBIO CLAVE: Usa 90vh (90% de la altura de la ventana del navegador) */
             /* Ajusta este porcentaje (ej: 60vh, 80vh) hasta que quede donde quieres. */
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
}


.curva-vibrante2 {
  left: 0;
  position: relative;
  padding: 0px;
  width: 100%;
  height: auto;
  z-index: 100;
  background-color: white;
}


/* Estilo para el H1 */
.container.contenido.parte4 h1 {
  font-size: 3.5em;
  color: white; /* Color del texto */
  margin-bottom: 60px;
  position: relative;
  z-index: 1; /* Asegura que el texto esté por encima de la imagen */
  text-align: left; /* Centra el texto horizontalmente dentro del contenedor */
  padding-left: 10%; /* CAMBIO CLAVE: Cambiado de 0% a 10% para alinear con h1 y h2 */
  margin-right: 10%;
  font-weight: 200;
  margin-top: 30px; /* Ajusta este valor según la separación que desees */
  white-space: normal; /* Permite el salto de línea */
  font-weight: normal; /* Para que solo strong sea bold */
  padding-top: 5px;
  padding-bottom: 0%;
  margin-bottom: 0%;
  padding-right: 10%;
}

.h1 strong {
  font-weight: bold !important;
}

/* Consideraciones adicionales para responsividad */
@media (max-width: 768px) {
  .h1 {
    font-size: 2.5em;
    padding: 0 15px !important; /* Asegura padding en móviles */
    width: auto !important; /* Ajusta el ancho en móviles para evitar desbordamiento */
  }
}

@media (max-width: 480px) {
  .h1 {
    font-size: 1.8em;
  }
}




/* SEGUNDO CONTENEDOR DE LA PAGINA PRINCIPAL */

/* Estilo para el contenedor publicidad1 */
.banerInforme, .banerInfoDesc {
  width: 100%;
  height: auto;
  background: linear-gradient(to right, #00C9FF, #0E1524);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 2%;
  padding-bottom: 2%;


  box-sizing: border-box;
  text-align: center;
  color: white;
}


.banerInforme2 {
  width: 100%;
  height: 0.6cm; 
  background: linear-gradient(to right, #00C9FF, #0E1524);
  display: flex; /* Keep flex if you want content centered within this thin line */
  justify-content: center; /* No content will be visible at 1cm height anyway, but keep for consistency */
  align-items: center; /* Same as above */
  padding: 0; /* Remove padding to ensure it's exactly 1cm high */
  box-sizing: border-box; /* Crucial to ensure padding/border don't add to the 1cm height */
  text-align: center; /* No text will be visible */
  color: white; /* No text will be visible */
  overflow: hidden; /* Hide any content that might overflow this tiny height */
}


.banerInforme3 {
  width: 100%;
  height: 2.0cm; 
  background: #00C9FF;
  display: flex; /* Keep flex if you want content centered within this thin line */
  justify-content: center; /* No content will be visible at 1cm height anyway, but keep for consistency */
  align-items: center; /* Same as above */
  padding: 0; /* Remove padding to ensure it's exactly 1cm high */
  box-sizing: border-box; /* Crucial to ensure padding/border don't add to the 1cm height */
  text-align: center; /* No text will be visible */
  color: white; /* No text will be visible */
  overflow: hidden; /* Hide any content that might overflow this tiny height */
}

.banerInforme h1, .banerInfoDesc h1 {
  font-size: 2.5em;
  color: white; /* Color del texto */
  margin-bottom: 20px;
  position: relative;
  z-index: 1; /* Asegura que el texto esté por encima de la imagen */
  text-align: left; /* Centra el texto horizontalmente dentro del contenedor */
  padding-left: 10%; /* Ajusta este valor para desplazar el texto hacia la derecha */
}

.contenido {
  max-width: 1200px;
  width: 100%;

}


.buscador2 {
  margin: 20px 0;
  display: flex;
  width: 100%;
  align-items: center;
}

.buscador2 input[type="text"] {
  padding: 15px 20px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 16px;
  font-weight: 400;
  outline: none;

  /* Efecto Glass / Liquid */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3),
              0 4px 10px rgba(0, 0, 0, 0.25);

  transition: all 0.3s ease;
}

.buscador2 input[type="text"]::placeholder {
  color: rgba(255, 255, 255, 0.8);
}

.buscador2 input[type="text"]:focus {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4),
              0 6px 12px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.4);
}



.buscador2 {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 40px;
  padding: 10px 20px;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3),
              0 4px 10px rgba(0, 0, 0, 0.25);
}




.descargas div {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
}


.descargas {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 30px;
}

/* Contenedor con efecto vidrio */
.glass-icon {
  width: 50px;
  height: 50px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);

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

  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3),
              0 6px 15px rgba(0, 0, 0, 0.25);

  transition: all 0.3s ease;
}

/* Imagen dentro del vidrio */
.glass-icon img {
  width: 50px;
  height: auto;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* Hover: brilla ligeramente y genera efecto flotante */
.glass-icon:hover {
  transform: scale(1.08);
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4),
              0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Active: se hunde con más transparencia */
.glass-icon:active {
  transform: scale(0.95);
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25),
              0 4px 10px rgba(0, 0, 0, 0.2);
}


/* FIN DEL SEGUNDO CONTENEDOR DE LA PAGINA PRINCIPAL */


/* Banner de Titulos */

.banerTitulos {
  display: flex; /* Usa flexbox para centrar el contenido */
  justify-content: left; /* Centra horizontalmente el contenido */
  align-items: center; /* Centra verticalmente el contenido */
  text-align: center; /* Asegura que el texto esté centrado horizontalmente */
  padding: 0; /* Elimina cualquier relleno adicional */
  margin: 0; /* Elimina cualquier margen adicional */
  width: 100%;
  height: 10px; 
  height: auto;
  padding-top: 10px;   /* Añade 0.5cm de espacio arriba del contenido del banner */
  padding-bottom: 10px; /* Añade 0.5cm de espacio abajo del contenido del banner */
  background-color: white;
  box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño total */
}


.banerTitulos h1{
  z-index: 1;
  /* Elimina los padding y margin en porcentaje, ya que son problemáticos aquí */
  padding: 0.5cm 15px; /* CAMBIO CLAVE: Padding de 0.5cm arriba/abajo y 15px izquierda/derecha */
  margin: 0 auto; /* Centra el h1 horizontalmente dentro del .banerTitulos2 si no ocupa todo el ancho */
  
  /* Revisa border-left y border-right si realmente quieres bordes o es padding */
  border-left: 15px solid transparent; /* Si era para espacio, mejor padding. Si es borde, especifica color y estilo. */
  border-right: 15px solid transparent;
  
  font-size: 1em; /* Mantén el tamaño de fuente, ajusta si es necesario */
  color: #19C9FF;
  
  /* Ajustes para el display flex si quieres centrar el texto dentro del h1 mismo */
  display: inline-flex; /* Permite que el h1 se ajuste a su contenido y padding */
  align-items: center; /* Centra el texto verticalmente dentro del h1 */
  justify-content: center; /* Centra el texto horizontalmente dentro del h1 */
  
  white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}

.banerTitulos2 {
  display: flex;
  justify-content: center; /* Cambiado a center para un centrado horizontal más consistente si h1 no ocupa todo el ancho */
  align-items: center; /* Centra verticalmente el contenido */
  text-align: center; /* Asegura que el texto esté centrado si no es flex item directo */
  padding: 0;
  margin: 0;
  width: 100%;
  
  /* CAMBIO CLAVE: Ajusta la altura total del banner para acomodar el padding del h1 */
  /* Si el h1 tendrá 0.5cm de padding arriba y abajo, el banner debe ser más alto. */
  /* Por ejemplo, si el texto tiene una altura de 1em (aprox 16px) y 0.5cm (aprox 19px) de padding arriba y abajo, */
  /* la altura total del banner será: 19px + 16px + 19px = 54px. */
  /* Podemos usar una altura mínima para que se ajuste al contenido o un padding directo. */
  
  /* Opción A: Mantener altura auto y usar padding en el h1 (Recomendado) */
  height: auto;
  padding-top: 0.5cm;   /* Añade 0.5cm de espacio arriba del contenido del banner */
  padding-bottom: 0.5cm; /* Añade 0.5cm de espacio abajo del contenido del banner */
  
  /* Opción B: Si necesitas una altura fija y el texto dentro puede ser recortado si es muy grande */
  /* height: calc(1em + 1cm); /* Esto sería altura de texto (1em) + 0.5cm arriba + 0.5cm abajo */
  /* overflow: hidden; */ /* Para recortar el texto si excede la altura */

  background-color: #0E1524;
  box-sizing: border-box; /* Asegura que el padding se incluya en el tamaño total */
}


.banerTitulos2 h1 {
  z-index: 1;
  /* Elimina los padding y margin en porcentaje, ya que son problemáticos aquí */
  padding: 0.5cm 15px; /* CAMBIO CLAVE: Padding de 0.5cm arriba/abajo y 15px izquierda/derecha */
  margin: 0 auto; /* Centra el h1 horizontalmente dentro del .banerTitulos2 si no ocupa todo el ancho */
  
  /* Revisa border-left y border-right si realmente quieres bordes o es padding */
  border-left: 15px solid transparent; /* Si era para espacio, mejor padding. Si es borde, especifica color y estilo. */
  border-right: 15px solid transparent;
  
  font-size: 1em; /* Mantén el tamaño de fuente, ajusta si es necesario */
  color: #19C9FF;
  
  /* Ajustes para el display flex si quieres centrar el texto dentro del h1 mismo */
  display: inline-flex; /* Permite que el h1 se ajuste a su contenido y padding */
  align-items: center; /* Centra el texto verticalmente dentro del h1 */
  justify-content: center; /* Centra el texto horizontalmente dentro del h1 */
  
  white-space: nowrap; /* Evita que el texto se rompa en varias líneas */
}

/* Nuevo Banner de Títulos 3 */
.banerTitulos3 {
  display: flex;
  justify-content: center; /* Centra horizontalmente su contenido (el .contenido-interno-banner3) */
  align-items: center;   /* Centra verticalmente su contenido */
  padding: 20px 0;
  margin: 0;
  width: 100%;
  height: auto;
  background-color: #0E1524;
  box-sizing: border-box;
  overflow: hidden;
  /* NO NECESITAMOS text-align aquí si los hijos son flex items */
}

/* Nuevo Banner de Títulos 3 */
.banerTitulos4 {
  display: flex;
  justify-content: center; 
  align-items: center;  
  padding: 20px 0;
  margin: 0;
  width: 100%;
  height: auto;
  background-color: white;
  box-sizing: border-box;
  overflow: hidden;
}
.contenido-interno-banner4 {
  
  max-width: 1200px;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center !important; 
  width: 100%; 
}

.banerTitulos4 h2 {
  display: block !important;
  width: fit-content !important;
  margin: 0 auto !important;
  font-size: 3.0em;
  color: #0E1524;
  padding: 0 !important; 
  font-weight: normal;
  line-height: 1.2;
  word-wrap: break-word;
  white-space: normal;

}


.banerTitulos4 h3 {
  display: block !important;
  width: fit-content !important;
  margin: 0 auto !important;
  font-size: 1.5em;
  color: #0E1524;
  padding: 0 !important; 
  font-weight: normal;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: normal;

}






/* Contenedor interno para el texto del banner */
.contenido-interno-banner3 {
  /* Quita cualquier width que hayas probado si lo tenías */
  /* width: 90%; */
  
  /* Mantén un max-width para que el texto no sea excesivamente largo en pantallas muy grandes */
  max-width: 1200px;
  
  /* Añade padding a los lados para que el texto no toque los bordes del navegador */
  padding: 0 20px;
  box-sizing: border-box;

  /* Centra el texto dentro de este contenedor */
  text-align: center !important; /* Fuerza el centrado del texto dentro de este div */
  
  /* Asegura que este div ocupe todo el ancho disponible para que el text-align funcione */
  width: 100%; /* Asegura que la caja para text-align es tan ancha como el padre */
}


.banerTitulos3 h2 {
  /* Asegura que el h1 es un elemento de bloque */
  display: block !important;
  
  /* Permite que el h1 ocupe solo el ancho de su contenido */
  width: fit-content !important;
  
  /* CRUCIAL: Centra el h1 horizontalmente como un elemento de bloque */
  margin: 0 auto !important;
  
  font-size: 3.0em;
  color: white;
  padding: 0 !important; /* Aseguramos que no tenga padding interno que lo desplace */
  font-weight: normal; /* Para que solo strong sea bold */
  line-height: 1.2;
  word-wrap: break-word;
  white-space: normal; /* Permite el salto de línea */

  /* Asegúrate de que no haya un text-align aquí que pueda anular el margin: auto */
  /* text-align: left; */ /* Si lo tienes, quítalo */
}

.banerTitulos3 h2 strong, .banerTitulos4 h2 strong {
  font-weight: bold !important;
}

/* Consideraciones adicionales para responsividad */
@media (max-width: 768px) {
  .banerTitulos3 h2, .banerTitulos4 h2  {
    font-size: 2.5em;
    padding: 0 15px !important; /* Asegura padding en móviles */
    width: auto !important; /* Ajusta el ancho en móviles para evitar desbordamiento */
  }
}

@media (max-width: 480px) {
  .banerTitulos3 h2 {
    font-size: 1.8em;
  }
}

/* FIN Banner de Titulos */


/* CUARTO CONTENEDOR DE LA PAGINA PRINCIPAL */

.publicidad3 {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra verticalmente */
  align-items: center; /* Centra horizontalmente */
  text-align: center;
  min-height: 100vh; /* Asegura que ocupa al menos toda la pantalla */
  padding: 0; /* Elimina padding adicional si existiera */
  margin: 0; /* Elimina márgenes adicionales */
  box-sizing: border-box; /* Asegura que padding y border no afecten el tamaño del contenedor */
  overflow: hidden; /* Evita que el contenido desborde el contenedor */

}

.publicidad3 h2{
  z-index: 1; /* Asegura que el texto esté por encima de otros elementos */
  display: flex; /* Usa flexbox para centrar el contenido */
  padding: 0; /* Elimina cualquier relleno adicional */
  margin: 0; /* Elimina cualquier margen adicional */
  padding-top: 5%;
  padding-bottom: 5%;
  border-left: 5%;
  border-right: 5%;
  font-size: 1em;
  margin-left: auto;
  margin-right: auto;
  color: #00023E;
}


/* FIN CUARTO CONTENEDOR DE LA PAGINA PRINCIPAL */

/* CSS Adicional y Modificaciones */

/* CasosExito */

/* Estilos para la parte 7 */
.CasosExito {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 10px;
  background-color: #0E1524;
}

.CasosExito .logo {
  max-width: 250px;
  height: auto;
  margin-bottom: 20px;
}

/* Contenedor para organizar St01 y St02 uno al lado del otro */
.ImaCasosExitos {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.carousel-container {
  width: 50%;
  overflow: hidden;
  position: relative;
  padding: 0%;
}

.carousel-track {
  display: flex;
  width: max-content;
  animation: scrollCarousel 40s linear infinite;
}

.carousel-track:hover {
  animation-play-state: running;
}

.carousel-image {
  width: 7%;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
}

@keyframes scrollCarousel {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-150vw);
  }
}

.St01 {
  flex: 1;
  display: flex;
  justify-content: center;
}

.St01 img {
  width: 100%;
  height: 100%;
}

.banerCasosExito {
  flex: 1;
  padding-left: 20px;
  padding-right: 20px;
  margin: -10px;
  text-align: left;
  width: 300%;
  position: relative; /* Asegúrate de que este sea 'relative' para posicionar los botones */
}

.banerCasosExito h1 {
  font-size: 2.0em;
  color: white;
  padding-left: 0%;
  line-height: 1.2; /* Reduce espacio entre líneas */
  margin: 0;
}

.banerCasosExito h2 {
  font-size: 1.2em;
  color: white;
  line-height: 1.3; /* Antes 1.6 */
  margin: 10px 0;
  font-weight: 200;
}

.banerCasosExito h3 {
  font-size: 0.8em;
  color: #19C9FF;
  line-height: 1.3; /* Antes 1.6 */
  margin: 10px 0;
}

.container.contenido.parte4 p {
  font-size: 0.8em;
  color: #19C9FF;
  line-height: 1.3; /* Antes 1.6 */
  position: relative;
  z-index: 1;
  text-align: left;
  padding-left: 10%;
  margin-right: 10%;
  margin-top: 20px;
  font-weight: normal;
  white-space: normal;
  padding-top: 0%;
  padding-bottom: 0%;
  margin-bottom: 0%;
  padding-right: 10%;
}

.CasosExito input[type="button"] {
  background-color: #E918C0;
  color: #CAEBFF;
  padding: 10px 20px;
  border: none;
  font-size: 1.1em;
  cursor: pointer;
  margin: 0;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.CasosExito input[type="button"]:hover {
  background-color: #19C9FF;
}

  
/* Contenedor del texto de los casos de éxito */
.text-carousel-content {
  position: relative;
  overflow: hidden; /* Oculta los casos de éxito no activos */
  height: 300px; /* Altura fija para el contenedor del texto. Ajusta según sea necesario */
  /* Opcional: min-height si quieres que se expanda dinámicamente */
}

.caso-exito-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 0.7s ease-in-out; /* Transición suave para la aparición/desaparición */
  box-sizing: border-box;
}

.caso-exito-item.active {
  opacity: 1;
  position: relative; /* Lo saca del flujo absoluto y lo hace visible */
}
  

.CasosExito input[type="button"] {
  background-color: #E918C0;
  color: #CAEBFF;
  padding: 10px 20px;
  border: none;
  font-size: 1.1em;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.CasosExito input[type="button"]:hover {
  background-color: #19C9FF;
}
  




.carousel-controls button {
  /* Apariencia Liquid Glass Oscura/Teñida */
  /* Fondo muy transparente para que se vea el fondo detrás. Tinte azul oscuro del fondo del SO. */
  background-color: #001337; 
  color: #ffffff; /* Texto blanco */
  
  /* Efecto de desenfoque de fondo (Frosted Glass) */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  
  /* Borde de luz muy sutil */
  border: 1px solid #001337; 
  border-radius: 40px; /* Bordes totalmente redondeados (estilo pill) */
  
  /* Dimensiones y Tipografía iOS */
  padding: 10px 20px; /* Ajuste el padding para un botón más grande, pero mantenga el width/height fijo */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.5em; 
  font-weight: 500;
  cursor: pointer;
  width: auto; /* El botón de búsqueda es ancho, así que eliminamos el width fijo */
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Sombra suave para profundidad */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2), 
              inset 0 1px 0 rgba(255, 255, 255, 0.25); /* Brillo superior */
  transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.carousel-controls button:hover {
  background-color: #001337; 
  transform: scale(1.01); /* Pequeña escala */
  border-color: rgba(255, 255, 255, 0.4);
}

.carousel-controls button:active {
  background-color: rgba(60, 40, 100, 0.2); 
  transform: scale(0.99);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.1);
}



.carousel-container::before,
.carousel-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%; /* Ancho del desvanecimiento, ajusta según necesidad */
  height: 100%;
  z-index: 10; /* Asegura que esté por encima de las imágenes */
  pointer-events: none; /* Permite interactuar con lo que está debajo */
}

.carousel-container::before {
  left: 0;
  background: linear-gradient(to right, #0E1524 10%, transparent 100%);
}

/* .carousel-container::after {
  right: 0;
  background: linear-gradient(to left, #0E1524 0%, transparent 100%);
}









  /* FIN CasosExito */

.container.contenido.parte4 p {
  font-size: 0.8em;
  color: #19C9FF;
  line-height: 1.6;
  position: relative;
  z-index: 1; /* Asegura que el texto esté por encima de la imagen */
  text-align: left; /* Centra el texto horizontalmente dentro del contenedor */
  padding-left: 10%; /* CAMBIO CLAVE: Cambiado de 0% a 10% para alinear con h1 y h2 */
  margin-right: 10%;
  font-weight: 200;
  margin-top: 30px; /* Ajusta este valor según la separación que desees */
  white-space: normal; /* Permite el salto de línea */
  font-weight: normal; /* Para que solo strong sea bold */
  padding-top: 0%;
  padding-bottom: 0%;
  margin-bottom: 0%;
  padding-right: 10%;
}

/* FIN CasosExito */









/* INICIO DE SSOLVER */


.SuperSolver {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 50px 10px;
  background: linear-gradient(to bottom, #ffffff, #ffffff);
}

.SSolver1 {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between; /* Separa los elementos en horizontal */
  text-align: left; /* Alinea el texto a la izquierda */
  width: 100%;
  max-width: 1200px; /* Limita el ancho total */
  margin: 0 auto;
  padding: 20px;
}

.SSolver .logo {
  max-width: 250px;
  height: auto;
  margin-bottom: 20px;
}

.SSolver h3 {
  font-size: 1em;
  color: #E918C0;
  line-height: 1.6;
  margin: 0px;
}

.SSolver1 h1 {
  font-size: 2.5em;
  color: #00023E;
  padding-left: 0%;
}

.SSolver1 h2 {
  font-size: 1.2em;
  color: #00023E;
  margin-bottom: 50px;
  position: relative;
  z-index: 1;
  text-align: center;
  font-weight: 200;
  line-height: 1.6;
}


/* Bloque principal del SuperSolver */

.SSolverbloqueprincipal {
  display: flex; /* Cambia a flex para organizar en fila */
  flex-wrap: nowrap; /* Evita que los elementos se ajusten a una nueva línea */
  align-items: flex-start; /* Alinea los elementos al inicio */
  gap: 0px; /* Agrega un pequeño espacio entre los contenedores */
  width: 100%;
  margin: 0 auto;
}

.SSolverpublicidad {
  display: flex;
  justify-content: center;
}

.SSolverpublicidad img{
  width: 1690%;
  height: 1800%;
  padding-left: 25%;
}


.SSolver2 {
  display: flex; /* Cambia a flex para organizar en fila */
  flex-wrap: wrap; /* Permite que los elementos se ajusten a la siguiente línea si no hay suficiente espacio */
  align-items: flex-start; /* Alinea los elementos al inicio */
  gap: 20px; /* Agrega un pequeño espacio entre los contenedores */
  width: 100%;
  margin: 0 auto;
  padding-left: 200px;
  padding-right: -200px;
}

.SSolver2uno {
  background-color: #E1F7FF;
  color: #ffffff;
  border: none;
  font-size: 0.9em;
  cursor: pointer;
  border-radius: 10px;
  height: 250px;
  width: 200px; /* Mantiene un tamaño fijo */
  display: flex; /* Permite que el contenido interno se organice */
  flex-direction: column; /* Coloca el contenido en columna */
  justify-content: space-between; /* Espacia el contenido verticalmente */
  margin: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Añade sombra para dar efecto de profundidad */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para efectos al pasar el ratón */
}

.SSolver2uno:hover {
  transform: scale(1.05); /* Agranda ligeramente el contenedor al pasar el ratón */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 8px 25px rgba(0, 0, 0, 0.2); /* Aumenta la sombra para más profundidad */
}


.SSolver2 h1 {
  font-size: 1.5em;
  padding: 10px 20px;
  color: #00023e;
}

.SSolver2 h2 {
  font-size: 1.2em;
  padding: 10px 20px;
  color: #00023E;
  z-index: 1;
  text-align: left;
  font-weight: 200;
}

.SSolver2uno input {
  background-color: #001337;
  color: #18A0FB;
  padding: 10px 20px;
  border: none;
  font-size: 1.1em;
  cursor: pointer;
  margin-top: 20px;
  border-radius: 5px;
  width: 100%; /* Asegura que el botón ocupe el ancho completo del contenedor */
}


/* FIN SSOLVER */


/* Estilo para el H2 */
.container.contenido.parte4 h2 {
  font-size: 1.3em;
  color: white;
  margin-bottom: 60px;
  position: relative;
  z-index: 1; /* Asegura que el texto esté por encima de la imagen */
  text-align: left; /* Centra el texto horizontalmente dentro del contenedor */
  padding-left: 10%; /* Ajusta este valor para desplazar el texto hacia la derecha */
  margin-right: 10%;
  font-weight: 200;
  margin-bottom: 2%;
  padding-right: 20%;
}

/* Estilo para el H3 */
.container.contenido.parte4 h3 {
  font-size: 1em;
  color: white;
  margin-bottom: 60px;
  position: relative;
  z-index: 1; /* Asegura que el texto esté por encima de la imagen */
  text-align: left; /* Centra el texto horizontalmente dentro del contenedor */
  padding-left: 10%; /* CAMBIO CLAVE: Cambiado de 0% a 10% para alinear con h1 y h2 */
  margin-right: 10%;
  font-weight: 200;
  margin-top: 30px; /* Ajusta este valor según la separación que desees */

}

.buscador {
  margin: 20px 0;
  display: flex;
  justify-content: flex-start; /* Alinea los elementos internos a la izquierda */
  width: 100%;
  padding-left: 10%; /* Ajusta este valor para alinear con el texto */
  box-sizing: border-box; /* Incluye padding en el ancho total */
}


/*FINALIZA AQUI */






.form-container {

  display: flex;
  border-radius: 20px;
  box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
  height: 500px;
  max-width: 900px;
  margin: auto; /* Centra el form-container */
  background: linear-gradient(to bottom, #3AB6FF, #FF66C7);
  margin-top: 90px; /* Espacio entre el nav y el form-container */
}


.information {
  width: 40%;
  display: flex;
  align-items: center;
  text-align: center;
  background-color: #CAEBFF;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.info-registro {
  width: 100%;
  padding: 0 30px;
}

.info-registro h2 {
  font-size: 2.5rem;
  color: #151515;
}

.info-registro p {
  margin: 15px;
  color: #151515;
}

.icons {
  margin: 15px 0px;
  color: #151515;
}

.icons i {
  border-radius: 50%;;
  padding: 15px;
  cursor: pointer;
  margin: 0 10px;
  color: #00023E;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border: solid thin red;
}

.icons i:hover {
  background-color: #CAEBFF;
  color: #FFFFFF;
}

.form {
  margin: 30px 0 0 0;
}

.form label {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-radius: 20px;
  padding: 0 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.form label input {
  width: 100%;
  padding: 10px;
  background-color: #FFFFFF;
  border: none;
  outline: none;
  border-radius: 20px;
  color: #333;
}

.form label i {
  color: #a7a7a7;
}

.form input[type="button"]{
  background-color: #00023E;
  color: #fff;
  border-radius: 20px;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  margin-top: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.form input[type="button"]:hover { 
  background-color: #fff;
  color: #3AB6FF;
}

/* Esto me permite seguir con el otro formulario */
.hide {
  position: absolute;
  transform: translateY(-300%);
}


.form-registro {
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.form-registro-childs {
  padding: 0 30px;
}

.form-registro-childs h2 {
  color: #151515;
  font-size: 2rem;

}

.form-registro-childs p {
  padding: 0 30px;
}

.hidden {
  display: none;
}



.navbar, .nav-list {
  overflow: visible !important; /* CRÍTICO: Permite que el menú salga del contenedor */
}

/* 4. Corrige el título interno que tiene ancho fijo */
.navmenu-container .menu_eleg1 {
  width: 100%; /* Cambia 750px por 100% */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 15px;
}

/* Estilos de la barra de navegación de Industrias Lord */
.navbar {
    background-color: #FFFFFF; /* Fondo blanco desde el inicio */
    color: #000000; /* Texto negro desde el inicio */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: background-color 0.3s ease, color 0.3s ease;
  }


  /* Las barras del menú también deben ser negras desde el inicio */
.menu-toggle .bar {
  background-color: #00023E;
}


body.overlay-active::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Capa oscura */
  backdrop-filter: blur(5px); /* Efecto difuminado */
  z-index: 999; /* Por debajo del navbar y menú, pero encima del resto del contenido */
  pointer-events: auto;
  opacity: 1; /* Visible cuando la clase está activa */
  transition: opacity 0.3s ease; /* Transición para suavizar aparición */
}

/* Oculta la capa por defecto (cuando body no tiene overlay-active) */
body:not(.overlay-active)::before {
  opacity: 0;
  pointer-events: none; /* Desactiva interacción cuando está oculta */
}


/* Asegura que el menú desplegable esté por encima de la capa */
.navmenu-container {
  display: none;
  position: absolute;
  background: #fff;
  z-index: 2000; /* Súbelo para asegurar que gane al overlay */
  
  /* Cambia el ancho fijo por uno más flexible */
  width: 750px; 
  max-width: 95vw; /* Evita que sea más ancho que la pantalla del celular */
  
  height: auto; /* Deja que el contenido defina el alto */
  min-height: 350px;
  
  border-radius: 15px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  
  box-shadow: 0 15px 35px rgba(0,0,0,0.2); /* Sombra más realista */
  border: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 20px; /* Espacio extra al final */
}
/* Tu script de scroll original debe seguir funcionando sin interferencias */
/*
window.addEventListener('scroll', function() {
  const navbar = document.querySelector('.navbar');
  if (window.scrollY > 50) {
    navbar.classList.add('scrolled');
  } else {
    navbar.classList.remove('scrolled');
  }
});
*/

/* El JavaScript para activar/desactivar la clase 'overlay-active' en el body
   debe manejarse en tu script existente cuando el menú desplegable se abre/cierra. */
/*
document.addEventListener('DOMContentLoaded', function() {
  const serviciosLink = document.getElementById('Elegirnos');
  const navmenuContainer = document.querySelector('.navmenu-container');
  const body = document.body;

  let menuOpen = false; // Variable para controlar el estado del menú

  // Función para manejar la apertura/cierre del menú y la capa
  function toggleOverlay() {
    if (navmenuContainer.classList.contains('active')) { // Asume que el navmenu-container obtiene una clase 'active' cuando está abierto
      body.classList.add('overlay-active');
      menuOpen = true;
    } else {
      body.classList.remove('overlay-active');
      menuOpen = false;
    }
  }

  // Si el menú se abre por hover (CSS puro), necesitarías observar cambios en el display del navmenu-container
  // O, si lo abres con JS, simplemente llama a toggleOverlay() en tu función de apertura/cierre.

  // Ejemplo si usas un evento de clic para abrir/cerrar (más común para móviles/hamburguesa)
  serviciosLink.addEventListener('click', function(event) {
    event.preventDefault(); // Evita que el enlace # salte
    navmenuContainer.classList.toggle('active'); // O la clase que uses para mostrar/ocultar
    toggleOverlay();
  });

  // Si el menú se cierra al hacer clic fuera
  document.addEventListener('click', function(event) {
    if (menuOpen && !navmenuContainer.contains(event.target) && !serviciosLink.contains(event.target)) {
      navmenuContainer.classList.remove('active');
      toggleOverlay();
    }
  });

  // Si el menú se abre con hover, es más complejo con JS. Podrías necesitar un MutationObserver
  // para detectar cuando 'navmenu-container' cambia de display: none a display: block/flex,
  // y luego aplicar el 'overlay-active'.
  // O más sencillo, si tu CSS de hover para el menú es:
  // #Elegirnos:hover .navmenu-container { display: block; }
  // Entonces, el JS para la capa debería estar en el evento 'mouseenter' y 'mouseleave' del #Elegirnos:

  serviciosLink.addEventListener('mouseenter', function() {
    body.classList.add('overlay-active');
  });

  serviciosLink.addEventListener('mouseleave', function() {
    // Pequeño retraso para permitir el movimiento del cursor al menú desplegable
    setTimeout(() => {
      // Solo quita la clase si el ratón no está sobre el enlace o el menú desplegable
      if (!serviciosLink.matches(':hover') && !navmenuContainer.matches(':hover')) {
        body.classList.remove('overlay-active');
      }
    }, 100); // Ajusta el tiempo si es necesario
  });

  navmenuContainer.addEventListener('mouseleave', function() {
    setTimeout(() => {
      if (!serviciosLink.matches(':hover')) {
        body.classList.remove('overlay-active');
      }
    }, 100);
  });
});
*/


.logo {
  max-width: 150px;
}

.nav-list {
  list-style-type: none;
  display: flex;
  align-items: center; /* Alinea verticalmente los elementos dentro de la lista */
  position: relative; /* Ya lo tienes, pero asegúrate de que no se pierda */
}

.nav-list li {
  margin-right: 30px;
}

.nav-list a {
  text-decoration: none;
  color: #00023E;
  transition: color 0.3s ease; /* Transición suave para el cambio de color del enlace */
}

.menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  height: 4px;
  width: 30px;
  background-color: #FFFFFF;
  margin: 6px 0;
}


/* ESTILO DE LOS BOTONES DEL SITIO WEB */

/* ============================================== */
/* ESTILOS BASE (CORREGIDOS A RGBA PARA LIQUID GLASS) */
/* ============================================== */

/* Botón: #Te Contactamos (Fondo Oscuro) */
#Te\ Contactamos {
  padding: 10px 20px;
  background-color: #00023E; /* CORREGIDO: RGBA para transparencia (base: #00023E) */
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 40px;
  cursor: pointer;
  
  /* ESTILO LIQUID GLASS */
  background: #001337;
  color: white;
  font-weight: 600;
  border: 1px solid #001337;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4),
              0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Botón: #CotizaSeri (Fondo Cyan Brillante) */
#CotizaSeri {
  padding: 10px 20px;
  background-color: #00023E; /* CORREGIDO: RGBA para transparencia (base: #19C9FF) */
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 40px;
  cursor: pointer;
  
  /* ESTILO LIQUID GLASS */
  background: #001337;
  color: white;
  font-weight: 600;
  border: 1px solid #001337;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4),
              0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Botón: #Button1 (Fondo Oscuro, más grande) */
#Button1 {
  padding: 15px 30px;
  background-color: #001337; /* CORREGIDO: RGBA para transparencia (base: #19C9FF) */
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 40px;
  cursor: pointer;
  
  /* ESTILO LIQUID GLASS */
  background: #001337;
  color: white;
  font-weight: 600;
  border: 1px solid #001337;
  box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.4),
              0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Botones: #BannerButton, #BannerButton2 (Fondo Rosa/Magenta) */
#BannerButton, #BannerButton2 {
  padding: 15px 35px; 
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 16px;
  font-weight: 400;
  outline: none;
  
  /* ESTILO LIQUID GLASS */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3),
              0 4px 10px rgba(0, 0, 0, 0.25);
  
  transition: all 0.3s ease;
}



/* ============================================== */
/* ESTILOS HOVER Y ACTIVE (INTERACCIÓN) */
/* ============================================== */

/* Hover (iOS: El vidrio se vuelve más brillante/opaco y se levanta sutilmente) */
#Button1:hover, #Te\ Contactamos:hover, #BannerButton:hover, #CotizaSeri:hover, #BannerButton2:hover {
  background-color: white; /* Fondo blanco casi opaco para simular la luz */
  transform: scale(1.05);
  color: #00023E; 
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Active (iOS: El vidrio se hunde y se vuelve más transparente) */
#Button1:active, #Te\ Contactamos:active, #BannerButton:active, #CotizaSeri:active, #BannerButton2:active {
  background-color: rgba(255, 255, 255, 0.3); 
  color: #00023E;
  transform: scale(0.98);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
}
/* ============================================== */
/* OTROS ESTILOS NO RELACIONADOS CON EL BOTÓN */
/* ============================================== */

.nav-list input {
  margin-left: 10px;
}

@media screen and (max-width: 768px) {
  .nav-list {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .nav-list input {
    margin: 10px 0;
  }
}


/* FIN DE LOS ESTILO DE LOS BOTONES*/


/* RESPONSIVE FORM*/

@media screen and (max-width:750px) {
  html{
    font-size: 12px;
  }
}

@media screen and (max-width:580px) {
  html{
    font-size: 10px;
  }
  .form-container {
    height: auto;
    flex-direction: column;
    margin-left: 20px;
    margin-right: 20px;
    padding-bottom: auto;
  }

  .form-container h2 {
    font-size: 3rem;
  }

  .form-container p {
    font-size: 12px;
  }
  
  .information{
    width: 100%;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  .form-registro {
    width: 100%;
    padding: 20px;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 0px;

  }

}

@media screen and (max-width: 768px) {
  .nav-list {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: #151515;
    margin: 0; /* Elimina el margen predeterminado del cuerpo */
    min-height: 100vh; /* Asegura que el cuerpo ocupe al menos el 100% de la altura de la ventana gráfica */
  }

  .nav-list.show {
    display: flex;
  }

  .nav-list li {
    margin-right: 0;
    margin-bottom: 10px;
    font-size: 20px;
  }

  .menu-toggle {
    display: flex;
  }
}


/* Seleccion de profesiones */
.selecprofesion {
  display: flex;
  flex-wrap: wrap; /* Para que los botones que no caben en una fila pasen a la siguiente */
  justify-content: center; /* Alinea horizontalmente al centro */
  gap: 10px; /* Añade un espacio entre los botones */
  max-width: 100%; /* Asegura que el contenedor de botones no se desborde */
}

.selecprofesion input {
  margin-bottom: 5px;
}

.selecprofesion input.selected {
  background-color: #3AB6FF; /* Cambia el color de fondo seleccionado según tus preferencias */
  color: #ffffff; /* Cambia el color del texto seleccionado según tus preferencias */
}


.form-registro-childs h2 {
  color: #151515;
  font-size: 2rem;
  margin-bottom: 20px;
}

.form-registro-childs p {
  color: #151515;
  font-size: 1rem;
  margin-bottom: 20px;
}

.selecprofesion {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
  justify-content: center;
}

.selecprofesion input[type="button"] {
  padding: 10px 15px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
  margin: 5px; /* Añade margen alrededor de los botones */
}

.selecprofesion input[type="button"]:hover {
  background-color: #3AB6FF;
  color: white;
}

/* Estilo del botón cuando está seleccionado */
.profesion-btn.selected {
  background-color: #007bff;
  color: white;
  border: 1px solid #007bff;
}

.selecprofesion input.selected {
  background-color: #3AB6FF;
  color: #FFFFFF;
  border: none;
}

.form input[type="button"] {
  background-color: #00023E;
  color: #FFFFFF;
  border-radius: 20px;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  margin-top: 20px;
  margin-right: 10px;
  transition: background-color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  align-items: center; /* Alinea verticalmente los elementos dentro de la lista */

}

.form input[type="button"]:hover {
  background-color: #FFFFFF;
  color: #00023E;
  border: 1px solid #00023E;
}

#atras1, #siguiente2 {
  display: inline-block;
  width: 150px;
  text-align: center;
}

#siguiente2 {
  margin-left: 10px;
}

@media screen and (max-width: 580px) {
  .selecprofesion input[type="button"] {
    flex: 1 1 100%; /* Botones ocupan todo el ancho en pantallas pequeñas */
  }
}


/* EFECTO DEL TECLEADO */

#typewriterInput {
  font-size: 1em;
  width: 500px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.cursor {
  display: inline-block;
  width: 3px;
  background-color: black;
  margin-left: 2px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* FIN DE EFECTO */



/* Menu desplegable */
.navmenu-container {
  display: none;
  position: absolute;
  background: #fff;
  z-index: 1000;
  width: auto; /* Tamaño que elegiste */
  height: auto; /* Es mejor auto para que no se corte el contenido */
  min-height: 350px;
  border-radius: 10px;
  top: 100%;
  left: 100%;
  transform: translateX(-50%);
  box-shadow: 0 10px 80px rgba(0,0,0,0.1);
  overflow: hidden; /* Evita que los hijos se salgan de las esquinas redondeadas */
}


.navmenu-container .menu_eleg1 {
  display: flex;
  flex-wrap: wrap; /* Organiza los elementos en filas si es necesario */
  justify-content: center; /* Centra los elementos dentro del contenedor */
  align-items: center; /* Alinea verticalmente en el centro */
  background-color: #fff;
  color: #00023E;
  font-size: 1em; /* Ajusta el tamaño de fuente */
  font-weight: bold; /* Letra más gruesa */
  text-align: center; /* Centra el texto */
  margin-left: auto;
  margin-right: auto;
  width: 100%; /* Ancho ajustado para el contenido */
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom: 1px solid #1CD9F6; /* Solo la línea inferior con color */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.menu_eleg2 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; 
  align-items: center; 
  gap: 100%; 
  
  /* CAMBIO CLAVE: width 100% para que sea igual al cuadro blanco */
  width: auto; 
  
  padding: 30px 20px; /* Espacio interno para que los eleg2 no toquen los bordes */
  margin: 0;
  box-sizing: border-box; /* Crucial para que el padding no lo haga más ancho */
}

.menu_eleg2 img {
  width: 50%; /* La imagen ocupará el 100% del ancho del contenedor */
  height: auto; /* La altura se ajustará proporcionalmente al ancho */
  object-fit: cover; /* Ajusta la imagen para que cubra todo el contenedor sin distorsionarse */
  border-radius: 10px; /* Ajusta los bordes redondeados si es necesario */
}


.eleg2 {
  background-color: #0E1524;
  color: #ffffff;
  border: none;
  font-size: 0.9em;
  font-weight: bold; /* Letra más gruesa */
  border-radius: 10px;
  height: 180px;
  width: 120px; /* Mantiene un tamaño fijo */
  display: flex; /* Permite que el contenido interno se organice */
  flex-direction: column; /* Coloca el contenido en columna */
  justify-content: center; /* Centra los elementos dentro del contenedor */
  align-items: center; /* Centra verticalmente el texto*/
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 6px 20px rgba(0, 0, 0, 0.1); /* Añade sombra para dar efecto de profundidad */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transición suave para efectos al pasar el ratón */
}

.eleg2 a {
  padding-top: 10px;
  text-align: center; /* Centra el texto */
}


.menu_eleg2 .Proxi {
  font-size: 0.8em; /* Ajusta el tamaño de la fuente para mayor visibilidad */
  background: #00023e; /* Fondo del menú */
  border: 1px solid #1CD9F6; /* Borde del menú */
  color: #1CD9F6;
  border-radius: 10px;
  
  /* Aumenta el relleno para dar más espacio interno */
  padding: 5px 7px;
  
  /* Elimina el borde innecesario con valores de porcentaje y usa margen en su lugar */
  margin-top: 5px; /* Añade un margen superior para separar "Próximamente" de "IA AVI" */
  display: inline-block; /* Para que se comporte como un bloque en línea */
  text-align: center; /* Centra el texto */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho total del contenedor */
}

.menu_eleg2 .Proxi3 {
  font-size: 0.8em; /* Ajusta el tamaño de la fuente para mayor visibilidad */
  background: #00023e; /* Fondo del menú */
  border: 1px solid #FFE96E; /* Borde del menú */
  color: #FFE96E;
  border-radius: 10px;
    
  /* Aumenta el relleno para dar más espacio interno */
  padding: 5px 7px;
  
  /* Elimina el borde innecesario con valores de porcentaje y usa margen en su lugar */
  margin-top: 5px; /* Añade un margen superior para separar "Próximamente" de "IA AVI" */
  display: inline-block; /* Para que se comporte como un bloque en línea */
  text-align: center; /* Centra el texto */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho total del contenedor */
  }

.menu_eleg2 .Proxi4 {
  font-size: 0.8em; /* Ajusta el tamaño de la fuente para mayor visibilidad */
  background: #00023e; /* Fondo del menú */
  border: 1px solid #E918C0; /* Borde del menú */
  color: #E918C0;
  border-radius: 10px;
      
  /* Aumenta el relleno para dar más espacio interno */
  padding: 5px 7px;
  
  /* Elimina el borde innecesario con valores de porcentaje y usa margen en su lugar */
  margin-top: 5px; /* Añade un margen superior para separar "Próximamente" de "IA AVI" */
  display: inline-block; /* Para que se comporte como un bloque en línea */
  text-align: center; /* Centra el texto */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho total del contenedor */
  }

.menu_eleg2 .Proxi5 {
  font-size: 0.8em; /* Ajusta el tamaño de la fuente para mayor visibilidad */
  background: #00023e; /* Fondo del menú */
  border: 1px solid #0434D1; /* Borde del menú */
  color: #0434D1;
  border-radius: 10px;
      
  /* Aumenta el relleno para dar más espacio interno */
  padding: 5px 7px;
  
  /* Elimina el borde innecesario con valores de porcentaje y usa margen en su lugar */
  margin-top: 5px; /* Añade un margen superior para separar "Próximamente" de "IA AVI" */
  display: inline-block; /* Para que se comporte como un bloque en línea */
  text-align: center; /* Centra el texto */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho total del contenedor */
  }

.menu_eleg2 .Proxi2 {
  font-size: 0.8em; /* Ajusta el tamaño de la fuente para mayor visibilidad */
  background: #00023e; /* Fondo del menú */
  border: 1px solid #00d8aa; /* Borde del menú */
  color: #00d8aa;
  border-radius: 10px;
  
  /* Aumenta el relleno para dar más espacio interno */
  padding: 5px 7px;
  
  /* Elimina el borde innecesario con valores de porcentaje y usa margen en su lugar */
  margin-top: 5px; /* Añade un margen superior para separar "Próximamente" de "IA AVI" */
  display: inline-block; /* Para que se comporte como un bloque en línea */
  text-align: center; /* Centra el texto */
  box-sizing: border-box; /* Incluye el padding y el borde en el ancho total del contenedor */
}


.eleg2:hover {
  transform: scale(1.05); /* Agranda ligeramente el contenedor al pasar el ratón */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 8px 25px rgba(0, 0, 0, 0.2); /* Aumenta la sombra para más profundidad */
}


.h4-headline {
display: flex; /* Permite que el contenido interno se organice */
font-size: 1.3em;
font-weight: bold; /* Letra más gruesa */
color: #00023E;
position: relative;
z-index: 1;
text-align: center;
line-height: 1.6;
padding: 0; /* Elimina cualquier relleno adicional */
margin: 0; /* Elimina cualquier margen adicional */
padding-top: 5%;
padding-bottom: 5%;
border-left: 5%;
border-right: 5%;
margin-left: auto;
margin-right: auto;

}

.navmenu-container a {
  background-color: #0E1524;
  color: #ffffff;
  border-radius: 10px;
}

.nav-list li {
  position: relative; /* Para el menú desplegable */
}

.nav-list li:hover .navmenu-container {
  display: block; /* Muestra el menú al pasar el mouse (opcional) */
}






/* RESPONSIVA LA PAGINA */

/* ========================================= */
/* MEDIA QUERIES PARA RESPONSIVIDAD          */
/* ========================================= */

/* Dispositivos Grandes (Tablets, 1024px y menos) */
@media (max-width: 1024px) {
    /* Menú y Navegación */
    .top-bar {
        display: none;
    }
    body {
        padding-top: 80px;
    }
    .main-nav-bar {
        padding: 15px 20px;
    }
    
    /* Servicios Grid */
    .grid-servicios {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 5%;
    }

    /* Casos de Éxito */
    .ImaCasosExitos {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .carousel-container, .banerCasosExito {
        width: 100%;
        max-width: 800px;
        padding: 0 20px;
        box-sizing: border-box;
    }

    /* Mantenimientos QR */
    .mantenimientos-qr-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .qr-content-wrapper, .qr-visual-content, .mobile-mockup-qr {
        width: 100%;
        position: relative;
    }
    
    /* Banner Final CTA */
    .cta-section {
        padding: 50px 20px;
    }
    .cta-content h1 {
        font-size: 2.5em;
    }
}

/* Dispositivos Móviles (Móviles y Tablets Pequeñas, hasta 768px) */
@media (max-width: 768px) {
    /* Menú Móvil */
    .menu-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }
    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: #001e4d;
    }
    .nav-actions {
        display: none;
    }
    .main-nav-bar .logo {
        height: 25px;
    }
    .banner-dia-hombre {
        font-size: 10px;
        padding: 5px 10px;
    }

    /* Hero Section */
    .hero-content h1 {
      margin-top: 60% !important; /* Ajusta según prefieras */
        font-size: 2.3rem !important; /* Ajusta según prefieras */
    }
    .hero-content p {
        margin-bottom: 10px !important; /* Ajusta según prefieras */
        font-size: 1.5rem !important; /* Ajusta según prefieras */
        justify-content: center;
    }
    .hero-cards {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .hero-card {
      width: 100%;
      max-width: 100%;
      height: 150px !important;
      
      /* Esto centra todo el contenido (h1 y p) dentro de la tarjeta */
      display: flex;
      flex-direction: column; /* Alinea los textos uno debajo del otro */
      justify-content: center; /* Centrado vertical */
      align-items: center;    /* Centrado horizontal */
      text-align: center;     /* Asegura que las líneas de texto se centren */
  }

  .hero-cards h3 {
    margin-bottom: 10px !important; /* Ajusta según prefieras */
    font-size: 2rem !important; /* Ajusta según prefieras */
    justify-content: center;
}

.hero-cards span {
  margin-bottom: 10px !important; /* Ajusta según prefieras */
  font-size: 1rem !important; /* Ajusta según prefieras */
  justify-content: center;
}


/* Dentro de @media (max-width: 768px) */
.card-content h3 {
  font-size: 1.5rem !important; /* Ajusta según prefieras */
  line-height: 1.2;
  justify-content:left !important; /* Ajusta según prefieras */

}

.card-content p {
  font-size: 1.2rem !important; 
  margin-bottom: 15px;
}
  
    /* Empresas */
    .empresas-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        padding: 20px 10px !important;
    }
    .empresas-container img {
        height: 30px !important;
        margin: 5px !important;
    }

    /* Banners de Buscador e Informes */
    .banerInforme, .banerInfoDesc {
        display: flex;
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
    }
    .buscador2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }
    .buscador2 input[type="text"],
    .buscador2 input[type="button"] {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        font-size: 1.3rem !important; 
    }
    .descargas {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    /* Grid Servicios Móvil */
    .grid-servicios {
        grid-template-columns: 1fr;
    }

    /* Títulos */
    .banerTitulos h1, .banerTitulos2 h1 {
        font-size: 1.3em;
        padding: 0px;
        text-align: center;
    }
    .banerTitulos3 h2, .banerTitulos4 h2 {
        font-size: 2.3em;
        text-align: center;
        padding: 0 15px;
        margin-bottom: 5px !important; /* Ajusta según prefieras */

    }
    .banerTitulos4 h3 {
        font-size: 1.5em;
        text-align: center;
        padding: 0 15px;
    }

    .banerTitulos3 p {
      font-size: 1.2em;
      text-align: center;
  }

    /* Casos de Exito Textos */
    .caso-exito-item h1 {
        font-size: 2.5em;
    }
    .caso-exito-item h2 {
        font-size: 1.2em;
    }
    .banerCasosExito input[type="button"] {
        width: 100%;
        white-space: normal;
        height: auto;
        padding: 10px;
    }

    /* Certificado Section */
    .certificado-main-img {
        width: 90%;
        height: auto;
    }

    /* CTA Final */

    .cta-content h1 {
        font-size: 1.8em;
        margin-bottom: 10px !important; /* Ajusta según prefieras */

    }
    .cta-content h3 {
        font-size: 1.2em !important; /* Ajusta según prefieras */
        padding: 10px !important; /* Ajusta según prefieras */

    }
    .cta-button {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    /* Footer */
    .footer-legal-text p {
        font-size: 12px;
        text-align: justify;
    }
    .footer-bottom-bar {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    .footer-links {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/* Móviles Pequeños (Hasta 480px) */
@media (max-width: 480px) {
    .main-nav-bar {
        flex-wrap: wrap;
    }
    .nav-banner-container {
        order: 3;
        width: 100%;
        margin-top: 10px;
    }
    .banner-dia-hombre {
        font-size: 12px;
        text-align: center;
    }
    .hero-content h1 {
        font-size: 1.5em;
    }
    .formContainer {
        width: 95%;
        padding: 20px;
    }
    .inputGroup {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .inputGroup input {
        width: 100%;
        box-sizing: border-box;
    }
}