body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Century Gothic', sans-serif;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.main-content {
  flex: 1 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-top: 100px; /* Espacio adicional en la parte superior */
}
.main-header {
  font-size: 2.5em;
  color: #000000;
  line-height: 1.2;
  margin-top: -80px;
}
.main-header h1 .highlight {
  color: #0097B2;
}
.carousel {
  margin-top: 120px;
  width: 100%;
  overflow: hidden;
}
.carousel__track {
  display: flex;
  white-space: nowrap;
  animation: slide 20s linear infinite;
}
.carousel__image {
  width: 10%;
  flex-shrink: 0;
  will-change: transform;
}
@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@media (max-width: 1024px) {
  .main-header h1 {
      font-size: 1.2em;
  }
  .carousel__image {
      width: 40%;
  }
}
@media (max-width: 768px) {
  .main-header h1 {
      font-size: 1.2em;
  }
  .carousel__image {
      width: 40%;
  }
}
@media (max-width: 480px) {
    .main-header h1 {
        font-size: 1.2em;
    }
    .carousel__image {
        width: 40%;
    }
}
.site-footer {
  width: 100%;
  padding: 20px 50px;
  background-color: #88bccb; /* Fondo gris */
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-top: 1px solid #97979760; /* Línea negra arriba del footer */
}
.footer-logo {
  width: 200px;
  margin-right: 30px; /* Espacio al lado del logo */
}
.footer-links {
  display: flex;
  justify-content: center; /* Centra las columnas horizontalmente */
  align-items: start; /* Alinea los enlaces al inicio verticalmente */
  flex-grow: 1;
}
.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 30px; /* Espacio entre columnas */
}
.footer-link {
  color: #000000;
  text-decoration: none;
  margin-bottom: 15px; /* Espacio entre enlaces en la misma columna */
  font-size: 1.2rem;
  font-weight: bold;
  transition: color 0.3s;
}
.footer-link:hover {
  color: #ffffff;
}
.footer-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* Alineación a la derecha para la información de contacto */
}
.footer-legal {
  text-align: right;
  width: auto; /* Cambio de 100% a auto para ajustar el ancho al contenido */
  position: relative; /* Añadir posición relativa para mover específicamente este elemento */
  left: -15px; /* Desplazar a la izquierda */
}
@media (max-width: 768px) {
  .site-footer {
    flex-direction: column;
    padding: 20px;
    align-items: center;
  }
  .footer-logo {
    width: 150px; /* Reducir el tamaño del logo para dispositivos móviles */
    margin-right: 0; /* Eliminar margen derecho */
  }
  .footer-links {
    flex-direction: column;
    align-items: center; /* Centra los enlaces */
    margin-top: 20px; /* Espacio entre logo e información */
  }
  .footer-column {
    align-items: center; /* Centra los enlaces de cada columna */
    margin: 10px 0; /* Reducir el espacio entre columnas y aumentar espacio vertical */
  }
  .footer-link {
    text-align: center; /* Alineación central del texto de los enlaces */
    margin-bottom: 10px; /* Espacio uniforme entre enlaces */
  }
  .footer-info {
    align-items: center; /* Centra la información de contacto */
    margin-top: 20px; /* Espacio antes de la información de contacto */
  }
  .footer-legal {
    width: 100%; /* Ajustar ancho al contenedor */
    text-align: center; /* Centrar texto legal */
    left: 0; /* Resetear desplazamiento */
    margin-top: 10px; /* Espacio antes de los enlaces legales */
  }
}
.menu-toggle {
  position: absolute; /* Posición absoluta para colocarlo en una posición específica */
  top: 20px; /* Ajustar margen superior */
  left: 20px; /* Ajustar margen izquierdo */
  z-index: 10000; /* Asegurarse que esté por encima de todo lo demás */
}
.bar {
  display: block;
  background-color: #000000; /* Cambiado a negro para las barras */
  height: 7px;
  width: 45px;
  margin: 11px 0;
  transition: 0.3s ease;
}
.nav-list {
  list-style: none;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.979); /* Fondo negro con transparencia para estilo moderno */
  width: 100%;
  height: 100vh;
  top: 0;
  right: -200%; /* Asegurarse de que el menú se esconda completamente */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra los elementos verticalmente */
  align-items: center; /* Centra los elementos horizontalmente */
  transition: right 0.3s ease;
  z-index: 9998; /* Debajo de la hamburguesa pero sobre otros contenidos */
}
/* Estilos para los elementos de lista cuando el nav-list está activo */
.nav-list.active {
  right: 0; /* Muestra el menú */
}
.nav-list li {
  transition: opacity 0.5s ease-in-out, transform 0.5s ease;
  margin: 1rem 0; /* Espacio entre los elementos de lista */
  transform: scale(1); /* Escala predeterminada */
}
/* Estilos para los enlaces dentro de la lista, más grandes y con estilo */
.nav-list li a {
  color: #fff;
  text-decoration: none;
  font-size: 2rem; /* Tamaño de fuente más grande */
  font-weight: 300; /* Más ligero para un estilo más minimalista */
  padding: 0.5rem 1rem; /* Espaciado interno para facilitar la clicabilidad */
  transition: all 0.3s ease-in-out;
}
/* Cambios de estilo cuando se pasa el ratón por encima de los enlaces */
.nav-list li a:hover {
  color: #3498db; /* Color de enlace al pasar el ratón */
  background-color: rgba(255, 255, 255, 0.1); /* Fondo ligeramente visible al pasar el ratón */
  transform: scale(1.1); /* Ligero aumento de tamaño al pasar el ratón */
  border-radius: 5px; /* Esquinas redondeadas */
}
/* Estilo para el nav-list cuando está activo */
.nav-list.active {
  right: 0;
  transition: right 0.5s;
}
.nav-list.active li {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.menu-toggle.close .bar {
  position: relative; /* Esto puede ser necesario si se están aplicando otras transformaciones a las barras */
}
.menu-toggle.close .bar:nth-child(1) {
  transform: translateY(11px) rotate(45deg);
  background-color: #fff; /* Color blanco para la 'X' */
}
.menu-toggle.close .bar:nth-child(2) {
  opacity: 0;
}
.menu-toggle.close .bar:nth-child(3) {
  transform: translateY(-25px) rotate(-45deg);
  background-color: #fff; /* Color blanco para la 'X' */
}