/* Cambiar el color de fondo a azul */
body {
  background-color: #000; /* Aquí puedes poner cualquier color en formato hexadecimal, RGB, o nombre de color */
  color: #fff; /* Cambiar el color del texto para asegurar que sea legible sobre el nuevo fondo */
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #fff; /* Fondo negro para toda la página */
  color: #000; /* Color del texto blanco para contraste */
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 80vh;
  background-color: #f4f4f4;
}

.header {
  background-color: #000000;
  color: white;
  display: flex;
  align-items: center;
  padding: 10px 20px 10px 185px; /* ⬅ padding-left aquí */
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header img {
  height: 50px; /* Ajusta el tamaño del logo */
  margin-right: 25px;
}

.header h1 {
  margin: 0;
}

.menu {
  background-color: #060717;
  width: 101%;
  display: flex;
  justify-content: center;
  padding: 16px 27px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.menu a {
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  display: block;
}

.menus {
  background-color: #000;
  width: 101%;
  display: flex;
  justify-content: center;
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

#ws {
  position: relative;
}

.perfil-circulo {
  position: absolute;
  top: -40px; /* Ajusta según necesites */
  left: 10px; /* Ajusta según necesites */
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  background: white;
  z-index: 9999;
}

.perfil-circulo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon {
  font-size: 24px; /* Tamaño del ícono */
  color: #fff; /* Color del ícono */   }
  

.footer-list {
  text-align: center;
  margin: 8; /* Elimina el margen predeterminado */
  position: relative; /* Necesario para el posicionamiento del pseudo-elemento */
  padding-left: 15px; /* Espacio para el cuadrado */
  line-height: 0; /* Ajusta la altura de línea para mejorar la legibilidad */
  display: inline-block; /* Asegura que el padding y el posicionamiento funcionen correctamente */
}
        
.footer-list::before {
  content: ''; /* No texto, solo el cuadrado */
  width: 4px; /* Ancho del cuadrado */
  height: 4px; /* Altura del cuadrado */
  background-color: #ffffff; /* Fondo blanco para el cuadrado */
  position: absolute; /* Posiciona el cuadrado */
  left: 0%; /* Posición a la izquierda del párrafo */
  top: 50%; /* Centra verticalmente */
  transform: translateY(-50%); /* Ajusta la posición verticalmente */
  border: 1px solid #000; /* Borde negro opcional para mayor visibilidad */
}
		       
 h3 {
  margin: 15px; /* Elimina el margen predeterminado */
  padding: 0; /* Elimina el padding predeterminado */
}
    
h4-3 {
  margin: -0px; /* Elimina el margen predeterminado */
  padding: 0; /* Elimina el padding predeterminado */
}
    
h4-2 {
  margin: -10px; /* Elimina el margen predeterminado */
  padding: 0; /* Elimina el padding predeterminado */
}
    
.bordered-text {
  color: white; /* Color del texto en blanco */
  padding: 10px;
  display: inline-block;
  font-style: italic;
  font-weight: bold;
  text-decoration: none; /* Asegura que no haya subrayado */
  transition: border-color 0.3s ease; /* Transición suave para el borde */
}

.bordered-text:hover {
  border-color: white; /* Borde verde al pasar el mouse */
}
  
.bordered-text-grey-permanent {
  color: white; /* Color del texto en blanco */
  border: 4px solid white; /* Borde blanco */
  padding: 10px; /* Espaciado interno para que el borde sea visible */
  display: inline-block; /* Para que el padding y el borde funcionen correctamente */
  font-style: italic;
  font-weight: bold;
  text-decoration: none; /* Asegura que no haya subrayado */
}
  
.footer-liste {
  text-align: center;
  margin: 8; /* Elimina el margen predeterminado */
  position: relative; /* Necesario para el posicionamiento del pseudo-elemento */
  padding-left: 15px; /* Espacio para el cuadrado */
  line-height: 0; /* Ajusta la altura de línea para mejorar la legibilidad */
  display: inline-block; /* Asegura que el padding y el posicionamiento funcionen correctamente */
}
        
.footer-liste::before {
  content: ''; /* No texto, solo el cuadrado */
  width: 4px; /* Ancho del cuadrado */
  height: 4px; /* Altura del cuadrado */
  background-color: #ffffff; /* Fondo negro para el cuadrado */
  position: absolute; /* Posiciona el cuadrado */
  left: 0%; /* Posición a la izquierda del párrafo */
  top: 50%; /* Centra verticalmente */
  transform: translateY(-50%); /* Ajusta la posición verticalmente */
  border: 1px solid #fff; /* Borde negro opcional para mayor visibilidad */
}

.slider {
  position: relative;
  overflow: hidden; /* Asegura que no haya desbordamiento */
  width: 64%; /* Ajusta al tamaño del contenedor */
}
  
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 100%; /* Ajusta al tamaño del contenedor */
}

.slide {
  flex: 0 0 100%; /* Cada slide ocupa el 100% del contenedor */
  box-sizing: border-box; /* Asegura que el padding no afecta el ancho */
}
  
.slide img {
  width: 100%; /* Asegura que la imagen se ajuste al contenedor del slide */
  height: auto; /* Mantiene la proporción de la imagen */
  display: block; /* Elimina el espacio blanco debajo de la imagen */
}
  
.prev, .next {
  background-color: transparent; /* Sin fondo en los botones */
  border: none; /* Sin borde en los botones */
  color: #000; /* Color del icono o texto */
  cursor: pointer; /* Cursor en forma de puntero */
  padding: 10px; /* Ajusta el padding si es necesario */
}

#translate-box {
  position: fixed;
  bottom: 14px;
  right: 14px;
  background-color: #14213d;
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  width: 150px; /* Ajusta el ancho del contenedor */
}

#translate-button {
  display: block;
  background-color: #fca311; /* Color del botón */
  color: #ffffff; /* Color del texto */
  border: none;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  font-size: 16px; /* Tamaño de la fuente */
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#translate-button:hover {
  background-color: #e5e5e5; /* Color del botón al pasar el ratón */
}
  
body {
  font-size: 15px;
  margin: 0;
  padding: 0;
}
  
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 95px;
}
  
.boton {
  font-size: 1.25rem;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
  
@media (max-width: 768px) {
  .boton {
  font-size: 1rem;
} }
  
body {
  margin: 0;
  font-family: Arial, sans-serif;
}
  
header {
  background-color: #f8f9fa; /* Color de fondo de la cabecera */
  padding: 20px;
  text-align: center;
}
  
.borde {
  border-bottom: 5px solid white; /* Borde blanco */
  margin: 0; /* Sin margen */
}
  
.recuadro {
  background: linear-gradient(135deg, #002954, #043810);
  width: 1098px; /* Establecer un ancho fijo */
  padding: 10px;
  color: white; /* Color del texto */
  text-align: center; /* Centrar el texto */
  border-radius: 10px;
  border: 2px solid #000000;
}
  
@keyframes brillo {
  0% {
  box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #002954, 0 0 20px #002954;
}
  
100% {
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #002954, 0 0 40px #002954;
} }

.contenedor {
  display: flex;
  justify-content: center; /* Centra el contenido en la página */
  align-items: center;
  text-align: left;
}
  
.lineas-y-texto {
  display: flex;
  align-items: center; /* Alinea verticalmente las líneas y el texto */
}
  
.lineas-izquierda, .lineas-derecha {
  display: flex;
  flex-direction: column;
  margin: 0 10px; /* Espacio entre las líneas y el texto */
}
  
.linea-azul {
  width: 30px;
  height: 2px;
  background-color: #003366; /* Azul oscuro */
  margin-bottom: 5px;
}
  
.linea-verde {
  width: 30px;
  height: 2px;
  background-color: #006400; /* Verde oscuro */
}
  
.texto {
  font-size: 18px;
  color: #333;
  text-align: center; /* Centra el texto */
}

#contenido {
  transform: scale(0.65);
  transform-origin: top left;
  width: 153.8%; /* 100 / 0.65 */
} 

html, body {
  overflow-y: auto !important;
}

body {
  zoom: 60%;
}
	
.scaled-content {
  transform: scale(0.6);
  transform-origin: top left;
  width: 166.67%; /* 100 / 0.6 = 166.67% para evitar scroll lateral */
}

/* Contenedor principal del slider */
.slider {
    position: relative;
    width: 55%; /* Ajusta el ancho del slider */
    max-width: 1410px; /* Máximo ancho del slider */
    margin: 14px auto; /* Centra el slider */
    overflow: hidden;
    box-sizing: border-box;
}

/* Contenedor de las diapositivas */
.slides {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Transición suave entre slides */
    width: 100%; /* Ancho total del slider */
}

/* Cada diapositiva */
.slide {
    flex: 0 0 100%; /* Cada slide ocupa el 100% del contenedor */
    box-sizing: border-box;
}

/* Estilo para las imágenes */
.slide img {
    width: 100%;
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina el espacio debajo de la imagen */
}

/* Botones de navegación */
.prev, .next {
    position: absolute;
    top: 50%;
    width: 40px; /* Ajusta el tamaño del botón según tu preferencia */
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-weight: bold;
    font-size: 24px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%); /* Centra verticalmente */
    z-index: 1000; /* Asegura que los botones estén encima del contenido */
}

/* Posicionamiento específico para los botones */
.prev {
    left: 10px; /* Ajusta la distancia desde el borde izquierdo */
}

.next {
    right: 10px; /* Ajusta la distancia desde el borde derecho */
}

/* Estilo adicional para los botones en estado hover */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* Controles de navegación */
.controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.control-button {
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    color: white;
    padding: 10px;
    cursor: pointer;
}

/* Contenedor adicional */
.container {
    display: flex;
    max-width: 1468px; /* Ajusta el ancho del contenedor */
    width: 100%;
    padding: 20px;
    margin: -21px auto;
}

.column {
    flex: 1;
    margin: 0 10px;
}

.column h2 {
    margin-top: 0;
    color: #333;
}

.section {
   padding: 10px;
   margin-bottom: 20px;
   background: #f9f9f9;
   border: 1px solid #ddd;
   border-radius: 4px;
}

.section:last-child {
   margin-bottom: 0;
}

.extra-sections {
   max-width: 1468px; /* Ajusta el ancho de las secciones adicionales */
   width: 100%;
   padding: 20px;
   background: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   margin: 20px auto;
}

.extra-sections h2 {
   margin-top: 0;
   color: #333;
}

/* styles.css */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #000310;
    color: #fff;
	height: auto;
	position: relative;
    z-index: 9999;
}

.footer-left,
.footer-center,
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-left img,
.footer-right img {
    margin: 0 80px;
}

.footer-center {
    flex: 1;
    text-align: center;
}

.footer-center .links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.footer-left em, 
.footer-right em {
    margin: 10px 0;
}

.footer-left h3, 
.footer-right strong {
    margin: 0;
}

.footer-right img {
    margin: 0 333px;
}

.footer p {
    margin: 0;
}

/* styles.css */
.contact-info {
    display: flex;
    align-items: center; /* Alinea verticalmente el ícono y el texto */
    gap: 10px; /* Espacio entre el ícono y el texto */
}

.contact-info img {
    margin-right: 5px; /* Espacio entre el ícono y el texto */
}

.contact-info h3 {
    margin: 0; /* Elimina el margen predeterminado del elemento h3 */
}

/* Establece el fondo negro y el texto blanco para toda la página */
body {
    background-color: #000000; /* Fondo negro */
    color: #ffffff; /* Texto blanco */
    font-family: Arial, sans-serif; /* Fuente legible */
    margin: 0; /* Elimina el margen por defecto */
    padding: 0; /* Elimina el padding por defecto */
}

/* Estilo para encabezados */
h1, h2 {
    color: #ffffff; /* Texto blanco */
}

/* Estilo para enlaces */
a {
    color: #ffffff; /* Enlaces en blanco */
    text-decoration: none; /* Sin subrayado */
}

a:hover {
    text-decoration: underline; /* Subrayar en hover */
}

/* Estilo para secciones y otros elementos */
header, main, footer {
    padding: 20px; /* Espaciado interno */
}

/* Estilo adicional para el pie de página */
footer {
    text-align: center; /* Centra el texto del pie de página */
}
/* styles.css */
header {
    background-color: #f8f9fa;
    padding: 20px;
    display: flex;
    align-items: center;
}

.header-content {
    display: flex;
    align-items: center;
}

.header-icon {
    width: 800px; /* Ajusta el tamaño del ícono según sea necesario */
    height: auto; /* Mantiene la proporción de la imagen */
    margin-right: 10px; /* Espacio entre ícono y texto */
}

header h1 {
    margin: 0;
    font-size: 24px;
}
/* styles.css */
a {
    text-decoration: none; /* Elimina el subrayado del enlace */
    color: inherit; /* Hereda el color del texto del elemento padre, opcional */
}
/* styles.css */
header {
    background-color: #e0deeb;
    padding: 20px;
    display: flex;
    align-items: center;
}

.header-content {
    display: flex;
    align-items: center;
}

.header-content i {
    font-size: 24px; /* Tamaño del ícono */
    margin-right: 10px; /* Espacio entre ícono y texto */
    color:  /* Color del ícono */
}

header h1 {
    margin: 0;
    font-size: 24px;
}

html, body {
    overflow-x: hidden; /* Oculta el scroll horizontal */
    overflow-y: auto;   /* Muestra el scroll vertical si es necesario */
}

.footer-left {
    display: flex;
    flex-direction: column; /* Organiza los elementos en una columna */
    align-items: flex-start; /* Alinea los elementos al inicio del contenedor */
}

.contact-info {
  /*  display: flex;*/
    align-items: center; /* Alinea verticalmente el icono y el texto */
    gap: 5px; /* Espacio entre el icono y el texto */
  
}

.contact-info img {
    display: block; /* Elimina espacio extra debajo de la imagen */
}

.contact-info h3 {
    margin: 0; /* Elimina el margen por defecto del h3 */
}
.footer-left {
    display: flex;
    flex-direction: column; /* Organiza los elementos en una columna */
    align-items: flex-start; /* Alinea los elementos al inicio del contenedor */
}

.contact-infos {
    display: flex;
    align-items: center; /* Alinea verticalmente el icono y el texto */
    gap: 80px; /* Espacio entre el icono y el texto */
    margin-bottom: 5px; /* Reduce el espacio entre cada grupo de icono y texto */
}

.contact-infos img {
    display: block; /* Elimina espacio extra debajo de la imagen */
}

.contact-infos h3 {
    margin: 0; /* Elimina el margen por defecto del h3 */
}
/* CSS para centrar los enlaces de navegación */
.footer-links {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra los elementos horizontalmente */
    margin-bottom: 10px;
}

.links-group {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se ajusten en varias líneas si es necesario */
    justify-content: center; /* Centra los elementos dentro del grupo */
    margin-bottom: 3px;
}

.link-item {
    display: flex;
    align-items: center;
    margin: 1px 15px; /* Ajusta el espaciado entre los elementos */
}

.link-item i {
    margin-right: 8px; /* Espaciado entre el ícono y el texto */
}

.link-item a {
    text-decoration: none;
    color: #fff; /* Color del texto */
}


/* Asegúrate de que el footer tiene un espacio adecuado */
footer {
    padding: 20px; /* Ajusta el padding según sea necesario */
}

/* Estilo para el contenedor del pie de página */
.footer-left {
    display: flex;
    justify-content: flex-end; /* Alinea el contenido a la derecha */
    gap: 2.5px; /* Espacio entre los elementos */
}

/* Estilo para los bloques de información de contacto */
.contact-info {
    text-align: right; /* Alinea el texto a la derecha */
}

/* Opcional: Añadir margen al contenedor para evitar que quede pegado a los bordes */
.footer-left {
    margin-right:100px; /* Ajusta el margen derecho según sea necesario */
}

/* Opcional: Ajustar el tamaño de las imágenes */
.contact-info img {
    display: block; /* Elimina el espacio extra debajo de las imágenes */
}

.style {
  margin-left: 350px; /* Ajusta este valor según necesites */
}

.style a {
  text-decoration: none;
  color: white;
  padding: 11px 48px;
  border-radius: 5px;
  display: inline-block;
  font-weight: bold;
  transition: border-color 0.3s;
}

a:hover {
border-color: white; /* Color del borde al pasar el mouse */
}

/* Estilo para los párrafos dentro de h3 */
h3 .footer-list {
    color: white;
    transition: color 0.3s ease-in-out;
}

h3 .footer-list:hover {
    color: white;
}
/* Estilo para los párrafos dentro de h3 */
h3 .footer-liste {
    color: white;
    transition: color 0.3s ease-in-out;
}

h3 .footer-liste:hover {
    color: white;
}

/* Estilo para los encabezados h1 y h4 dentro de <em><strong></em></strong> */
h1, h4 {
    color: white;
    text-align: center;
    transition: color 0.3s ease-in-out;
}

h1:hover, h4:hover {
    color: gray;
}

/* Estilo para los párrafos dentro de h4 */
h4 p {
    text-align: center;
    margin: -15px;
    color: white;
    transition: color 0.3s ease-in-out;
}

h4 p:hover {
    color: gray;
}
.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center; /* Centra el texto dentro del contenedor */
}

.header-container i {
    font-size: 2em; /* Ajusta el tamaño del icono según sea necesario */
    margin-right: 10px; /* Espacio entre el icono y el texto */
}

.header-container h1 {
    margin: 0;
    font-size: 2em; /* Ajusta el tamaño del texto según sea necesario */
}
.header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.header-container i {
    font-size: 2em; /* Ajusta el tamaño del ícono si es necesario */
    margin-right: 10px; /* Espacio entre el ícono y el texto */
}

.header-container h1 {
    margin: 0;
    font-size: 2em; /* Ajusta el tamaño del texto si es necesario */
    color: white; /* Color del texto por defecto */
    transition: color 0.3s ease; /* Transición suave para el cambio de color */
}

.header-container h1:hover {
    color: white; /* Color del texto al pasar el mouse */
}
.button-link {
    text-decoration: none; /* Elimina el subrayado del enlace */
}

.green-button {
    background: linear-gradient(135deg, #002954, #043810); /* Color azul oscuro */
    color: white; /* Texto blanco */
    border: none; /* Sin borde */
    border-radius: 50px; /* Bordes redondeados */
    padding: 29px 352px; /* Espaciado interno más grande */
    font-size: 20px; /* Tamaño de fuente más grande */
    cursor: pointer; /* Cursor de mano */
    transition: background-color 0.3s; /* Transición de color */
	border: 2px solid #000000;
	
	        @keyframes brillo {
      0% {
         box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #002954, 0 0 20px #002954;
    }
      100% {
         box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #002954, 0 0 40px #002954;
    }
  }
}

.green-button:hover {
    background-color: #000c1f; /* Color verde oscuro en hover */
}

/* Estilo para el botón al pasar el mouse */
.green-button:hover {
    background-color: #000c1f;  /* Color azul oscuro */
}


/* Contenedor principal del slider */
.slider-2 {
    position: relative;
    width: 55%; /* Ajusta el ancho del slider */
    max-width: 1595px; /* Máximo ancho del slider */
    margin: 20px auto; /* Centra el slider */
    overflow: hidden;
    box-sizing: border-box;
}

/* Contenedor de las diapositivas */
.slides-2 {
    display: flex;
    transition: transform 0.5s ease-in-out; /* Transición suave entre slides */
    width: 100%; /* Ancho total del slider */
}

/* Cada diapositiva */
.slide {
    flex: 0 0 100%; /* Cada slide ocupa el 100% del contenedor */
    box-sizing: border-box;
}

/* Estilo para las imágenes */
.slide img {
    width: 100%;
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina el espacio debajo de la imagen */
}

/* Botones de navegación */
.prev, .next {
    position: absolute;
    top: 50%;
    width: 40px; /* Ajusta el tamaño del botón según tu preferencia */
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-weight: bold;
    font-size: 29px;
    border: none;
    border-radius: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%); /* Centra verticalmente */
    z-index: 1000; /* Asegura que los botones estén encima del contenido */
}

/* Posicionamiento específico para los botones */
.prev {
    left: 10px; /* Ajusta la distancia desde el borde izquierdo */
}

.next {
    right: 10px; /* Ajusta la distancia desde el borde derecho */
}

/* Estilo adicional para los botones en estado hover */
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}
 
 .prev, .next {
  text-decoration: none; /* Elimina el subrayado de los enlaces */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}


/* styles.css */
.slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
}

.slide img {
    width: 100%;
    height: auto;
    display: block;
}

a.prev, a.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    text-decoration: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 1000;
    font-size: 24px;
}

a.prev {
    left: 10px;
}

a.next {
    right: 10px;
}

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slide {
  min-width: 100%;
  box-sizing: border-box;
}

button.prev, button.next {
  position: absolute;
  top: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
  transform: translateY(-50%);
}

button.prev {
  left: 0;
}

button.next {
  right: 0;
}

.button-container {
    margin: 20px; /* Margen general alrededor del botón */
}

.my-button {
    background-color: #002244; /* Azul oscuro */
    color: white; /* Texto blanco */
    border: none;
    padding: 10px 20px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    margin-left: 20px; /* Distancia específica del texto a la izquierda */
	border: 2px solid white; /* Borde blanco */
}

.my-button:hover {
    background-color: #01152d; /* Color más oscuro al pasar el mouse */
}

/* Agrega este estilo si tienes un texto */
.texto {
    margin-right: 20px; /* Distancia del texto a la derecha */
}

@media (max-width: 600px) {
    /* Estilos para pantallas pequeñas */
}

.content {
    padding: 20px;
}

.scroll-btn {
    position: fixed;
    bottom: 20px;
    right: 18px;
    background-color: #01152d; /* Azul claro */
    color: white; /* Color de la flecha */
    border: none;
    border-radius: 5px;
    padding: 14px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s;
	width: 50px; /* Ajusta el ancho aquí */
    border: 2px solid white; /* Borde blanco */
	opacity: 1; /* Visibilidad inicial */
    animation: brillo 1.5s infinite alternate;
	z-index: 10000;
	
	        @keyframes brillo {
      0% {
         box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #002954, 0 0 20px #002954;
    }
      100% {
         box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #002954, 0 0 40px #002954;
    }
  }
}

.scroll-btn:hover {
    background-color: #01152d; /* Color al pasar el mouse */
}

.scroll-btn.hidden {
    opacity: 0; /* Ocultar el botón */
    pointer-events: none; /* Desactiva eventos cuando está oculto */
}

.slide {
    width: 100%;
    height: 100%;
    background-color: #000000; /* Color de fondo del slide */
    border: 2px solid white; /* Ancho y color del borde */
    border-radius: 15px; /* Ajusta el radio para redondear los bordes */
    box-sizing: border-box; /* Asegura que el borde no afecte el tamaño del elemento */
	
}

.container {
    max-width: 1200px; /* Ancho máximo */
}

.all-well-services {
    display: flex; /* Usar Flexbox para alinear elementos en una fila */
    justify-content: space-between; /* Espaciado entre elementos */
}

.well-services {
    flex: 1; /* Permitir que cada recuadro ocupe el mismo ancho */
    margin: -24px; /* Espacio entre elementos */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 2px 57px rgba(0, 0, 0, 0.1); /* Sombra suave */
    text-align: center; /* Centrar el contenido */
    padding: 21px 36px; /* Espaciado interno */
    transition: transform 0.3s, box-shadow 0.3s; /* Transiciones suaves */
}

.well-services:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el cursor */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Sombra más intensa al pasar el cursor */
}

.well-img {
    margin-bottom: 20px; /* Espacio debajo de la imagen */
}

.big-icon {
    font-size: 48px; /* Tamaño del icono */
    color: #007bff; /* Color del icono */
}

.wel-content h4 {
    font-size: 22px; /* Tamaño del título */
    margin-bottom: 10px; /* Espacio debajo del título */
    color: #333; /* Color del texto del título */
    font-weight: bold; /* Negrita */
}

.wel-content p {
    font-size: 16px; /* Tamaño del texto */
    color: #666; /* Color del texto */
    line-height: 1.6; /* Altura de línea para mejor legibilidad */
}

/* Opcional: para pantallas pequeñas */
@media (max-width: 768px) {
    .well-services {
        flex: 1 1 45%; /* Dos recuadros en filas pequeñas */
    }
}

@media (max-width: 480px) {
    .well-services {
        flex: 1 1 100%; /* Un recuadro por fila en móviles */
    }
}

.well-img .big-icon {
    font-size: 48px; /* Tamaño del icono */
    color: #ffffff; /* Color azul y verde */
    display: block; /* Asegurarte de que ocupa todo el espacio disponible */
    margin: 0 auto 20px; /* Centrar el icono y añadir espacio debajo */
}

.full-width-box {
    width: 100%; /* Ocupa todo el ancho de la página */
    background: linear-gradient(135deg, #002954, #043810); /* Degradado de azul a verde */
    color: white; /* Color del texto */
    padding: 10px; /* Espaciado interno */
    text-align: center; /* Centrar el texto */
    box-sizing: border-box; /* Incluye el padding en el ancho total */
    margin: 0; /* Asegurarte de que no hay márgenes */
}

.full-width-box h2 {
    margin: 0 0 20px; /* Margen inferior para el título */
}

.full-width-box p {
    margin: 0; /* Sin margen para el párrafo */
}

.bordes-redondeados {
    border: 2px solid white;
}

/* Estilos para el botón de WhatsApp */
#whatsapp-button {
  position: fixed;
  bottom: 20px;  /* Alineado en la parte inferior */
  left: 18px;    /* Alineado a la izquierda */
  padding: 14px;
  background-color: #01152d;  /* Color azul */
  border-radius: 5px;
  font-size: 20px;
  cursor: pointer;
  width: 35px;  /* Ancho del botón */
  height: 34px;
  transition: background-color 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid white;
  opacity: 1;
  animation: brillo 1.5s infinite alternate;
  z-index: 10000;
	
  @keyframes brillo {
      0% {
         box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #002954, 0 0 20px #002954;
    }
  100% {
         box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #002954, 0 0 40px #002954;
    }
  }
}

#whatsapp-button img {
    width: 78px; /* Ajusta el tamaño del icono dentro del botón */
    height: 34px; /* Ajusta el tamaño del icono dentro del botón */
}

#whatsapp-button:hover {
    background-color: #01152d;  /* Color azul oscuro al pasar el mouse */
}

@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg); /* Empieza en la parte superior */
  }
  100% {
    transform: translateY(100vh) rotate(360deg); /* Baja hasta la parte inferior de la pantalla */
  }
}

/* Estilos para el botón */
.btn-iniciar {
  width: 244px;
  height: 75px;
  background: linear-gradient(to right, #002954, #043810); /* Gradiente azul a verde */
  color: white;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  text-align: center;
  line-height: 50px; /* Centra el texto verticalmente */
  transition: all 0.3s ease;
  outline: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  margin-left: 59px; /* Ajusta este valor para mover el botón más a la derecha */	
}

/* Estilo para el texto */
.btn-iniciar:focus {
    outline: none;
}

.slider {
  position: relative;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.slider img {
  width: 100%;
  height: auto;
}

/* Estilos del recuadro que aparecerá en la parte superior derecha */
.info-box {
  position: fixed;
  top: 10px;
  right: 10px;
  background-color: black;
  color: white;
  padding: 10px;
  border-radius: 5px;
  display: none; /* Ocultamos el recuadro inicialmente */
  z-index: 9999;
}

/* Estilos para las imágenes del slider */
.slider {
  display: flex;
}

.slider img {
  cursor: pointer;
  margin-right: 10px;
}

.slider {
  display: flex;
  overflow: hidden;
  width: 100%; /* Ajusta según el tamaño de tu contenedor */
}

.slide {
  min-width: 100%; /* Hace que cada imagen ocupe todo el ancho del contenedor */
  transition: transform 0.5s ease; /* Animación suave para el deslizamiento */
}

/* Recuadro de Información en la parte superior derecha */
.informacion {
  position: fixed;
  top: 35px;
  right: 20px;
  background-color: rgba(0, 0, 0, 44.4553);
  color: white;
  padding: 10px;
  border-radius: 5px;
  width: 191px; /* Nuevo ancho */
  height: 50px; /* Nueva altura */
  max-width: 300px;
  font-family: Arial, sans-serif;
  border: 2px solid white;
  z-index: -1; /* Asegura que el recuadro esté por encima de otros elementos inicialmente */
  display: none; /* Inicialmente oculto */
}

@media screen and (max-width: 768px) {
    body {
        display: none;
    }
}

/* Estilo para el contenido que se desplazará */
section {
    position: relative;
    z-index: 1;
    padding: 20px;
    color: white;
    height: 2000px; /* Este valor hace que haya suficiente contenido para permitir el desplazamiento */
}

.floating-comments {
  position: fixed;
  top: 30px; /* Antes estaba en 100px */
  width: 250px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 25px;
  animation: slideDown 1s ease;
  z-index: -1;
}


.right-side {
  right: 10px;
}

.floating-comments:not(.right-side) {
  left: 10px;
}

.comment-box {
  display: flex;
  background: #000000;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 12px;
  align-items: center;
  transition: all 0.3s ease;
  border: 2px solid white;
}

.comment-box:hover {
  transform: scale(1.03);
}

.comment-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
}

.comment-text {
  font-size: 16px;
  color: #ffffff;
}

@keyframes slideDown {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0px);
    opacity: 1;
  }
}

.snowflake {
  position: fixed; /* Fijo al viewport para no moverse con el scroll */
  color: white;
  font-size: 20px;
  user-select: none;
  pointer-events: none;
  z-index: 999999; /* Bien alto para que esté encima de todo */
}
	
h1 {
  text-align: center;
  margin-bottom: 30px;
}

p {
  line-height: 1.6;
  margin-bottom: 20px;
}
  
/* Zona del texto, posición final */
.hover-zone {
  position: absolute;
  top: 2.30%;
  left: 55.85%;
  transform: translateX(-50%);
  z-index: 10000;
}

.button-text {
  color: #ffffff;
  font-size: 7.65em; /* Más grande horizontalmente */
  font-weight: 700;  /* Peso más profesional */
  text-align: center;
  line-height: 1.1;  /* Más compacto verticalmente pero más grande */
  display: inline-block;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición más suave */
  cursor: default;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  max-width: none;
  
   /* Bordes negros gruesos y realistas */
   text-shadow:
  
   /* Bordes principales más gruesos */
   -3px -3px 0 #000000,
    3px -3px 0 #000000,
   -3px 3px 0 #000000,
    3px 3px 0 #000000,
  
   /* Bordes intermedios para suavizar */
   -2px -2px 0 #000000,
    2px -2px 0 #000000,
   -2px 2px 0 #000000,
    2px 2px 0 #000000,
  
   /* Bordes finos para definición */
   -1px -1px 0 #000000,
    1px -1px 0 #000000,
   -1px 1px 0 #000000,
    1px 1px 0 #000000,
    
   /* Bordes direccionales para completar */
   -3px 0 0 #000000,
    3px 0 0 #000000,
    0 -3px 0 #000000,
    0 3px 0 #000000,
   
   -2px 0 0 #000000,
    2px 0 0 #000000,
    0 -2px 0 #000000,
    0 2px 0 #000000,
    
   /* Sombras realistas */
   0 4px 12px rgba(0, 0, 0, 0.7), /* Sombra principal */
   0 8px 25px rgba(0, 0, 0, 0.4), /* Sombra de profundidad */
   0 2px 4px rgba(0, 0, 0, 0.8);  /* Sombra cercana para realismo */
  
   /* Tipografía moderna */
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
   letter-spacing: 0.02em;       /* Espaciado moderno */
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale; }

   /* Animación al pasar el mouse - más realista */
   .button-text:hover {
   transform: translateY(-10px) scale(1.03);  /* Efecto más dramático */
   text-shadow:
    
   /* Bordes más pronunciados en hover */
   -4px -4px 0 #000000,
    4px -4px 0 #000000,
   -4px 4px 0 #000000,
    4px 4px 0 #000000,
    
   /* Capas intermedias */
   -3px -3px 0 #000000,
    3px -3px 0 #000000,
   -3px 3px 0 #000000,
    3px 3px 0 #000000,
   
   -2px -2px 0 #000000,
    2px -2px 0 #000000,
   -2px 2px 0 #000000,
    2px 2px 0 #000000,
    
   -1px -1px 0 #000000,
    1px -1px 0 #000000,
   -1px 1px 0 #000000,
    1px 1px 0 #000000,
    
   /* Bordes direccionales más gruesos */
   -4px 0 0 #000000,
    4px 0 0 #000000,
    0 -4px 0 #000000,
    0 4px 0 #000000,
   
   -3px 0 0 #000000,
    3px 0 0 #000000,
    0 -3px 0 #000000,
    0 3px 0 #000000,
    
	/* Sombras más realistas y dramáticas */
    0 6px 20px rgba(0, 0, 0, 0.8), /* Sombra principal más intensa */
    0 12px 35px rgba(0, 0, 0, 0.5), /* Sombra de profundidad */
    0 3px 8px rgba(0, 0, 0, 0.9), /* Sombra cercana muy definida */
    0 0 40px rgba(0, 0, 0, 0.3); /* Resplandor ambiental */
}

/* Opcional: Animación adicional para un efecto más dinámico */
@keyframes textGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.1);
  }
}

/* Para activar el brillo sutil (opcional) */
.button-text:hover {
  animation: textGlow 2s ease-in-out infinite;
}

/* Botón de pausa/reproducir en la esquina inferior izquierda */
.pause-btn {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
  z-index: 10;
  min-width: 50px;
  text-align: center;
}

.pause-btn:hover {
  background-color: rgba(0, 0, 0, 0.9);
  transform: scale(1.05);
}

.pause-btn:active {
  transform: scale(0.95);
}
	
/* Indicador de estado */
.status-indicator {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  z-index: 10;
}

.sparkle-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 94%;
  pointer-events: none;
  z-index: 10002;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 8px white;
  animation: sparkleAnim 2s infinite ease-in-out;
}

@keyframes sparkleAnim {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
  100% {
    transform: scale(0.5);
    opacity: 0;
  }
}

/* OPCIÓN 1: Bordes más delgados */
.slider {
    border: 1px solid white; /* En lugar de 3px */
    border-radius: 10px;
    overflow: hidden;
}

/* OPCIÓN 2: Bordes casi opacos (muy poco transparentes) */
.slider {
    border: 1px solid rgba(255, 255, 255, 0.95); /* Blanco casi opaco */
    border-radius: 10px;
    overflow: hidden;
}

/* OPCIÓN 3: Bordes prácticamente sólidos */
.slider {
    border: 1px solid rgba(255, 255, 255, 0.9); /* Blanco con mínima transparencia */
    border-radius: 10px;
    overflow: hidden;
}

/* OPCIÓN 4: Solo sombra sutil (sin borde) */
.slider {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2); /* Sombra blanca sutil */
}

/* OPCIÓN 5: Borde gris muy claro (casi imperceptible) */
.slider {
    border: 1px solid #f0f0f0; /* Gris muy claro */
    border-radius: 10px;
    overflow: hidden;
}