/* Custom CSS para aplicar los colores de la marca y asegurar la responsividad de los iframes */
body {
  font-family: "Inter", sans-serif;
  background-color: #f8fafc; /* Fondo gris claro */
}
/* Colores de la marca */
.color-primary-dark {
  color: #2b5b65;
} /* Verde/Azul Oscuro */
.bg-primary-dark {
  background-color: #2b5b65;
}
.border-primary-dark {
  border-color: #2b5b65;
}

/* Menu*/
.bg-menu {
  background-color: #f8fafc;
}

#main-navigation > li > a {
  color: #2b5b65;
  font-weight: bold;
}

.color-secondary-gold {
  color: #d7a648;
} /* Amarillo Dorado */
.bg-secondary-gold {
  background-color: #d7a648;
}
.hover\:bg-secondary-gold-darker:hover {
  background-color: #c7963d;
} /* Dorado ligeramente más oscuro al pasar el ratón */
.border-secondary-gold {
  border-color: #d7a648;
}

.color-tertiary-dark {
  color: #0e2a2d;
} /* Verde/Azul muy oscuro para pie de página/texto */
.bg-tertiary-dark {
  background-color: #0e2a2d;
}

.hero-background {
  /* Imagen de marcador de posición, considerar reemplazarla con una imagen real de Bahía Cupica */
  background-image: url("images/beach.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
/* Superposición para la imagen principal para una mejor legibilidad del texto */
.hero-background::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5),
    rgba(0, 0, 0, 0.7)
  );
}

#mobile-menu-button {
  color: #2b5b65;
}
.text-shadow-strong {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
.accordion-header {
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.accordion-header:hover {
  background-color: #eff6f9; /* Más claro al pasar el ratón para el acordeón */
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.accordion-content.active {
  max-height: 500px; /* Ajustar según sea necesario para la altura del contenido */
  transition: max-height 0.3s ease-in;
}
/* Estilos del modal */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Posición fija */
  z-index: 1000; /* Siempre en la parte superior */
  left: 0;
  top: 0;
  width: 100%; /* Ancho completo */
  height: 100%; /* Altura completa */
  overflow: auto; /* Habilitar desplazamiento si es necesario */
  background-color: rgba(0, 0, 0, 0.7); /* Negro con opacidad */
  align-items: center;
  justify-content: center;
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 2.5rem;
  border-radius: 0.75rem;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  position: relative;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
.modal.show .modal-content {
  transform: scale(1);
  opacity: 1;
}
.close-button {
  color: #aaa;
  float: right;
  font-size: 2rem;
  font-weight: bold;
  position: absolute;
  top: 1rem;
  right: 1.5rem;
}
.close-button:hover,
.close-button:focus {
  color: #333;
  text-decoration: none;
  cursor: pointer;
}
/* Contenedor de iframe responsivo para videos de YouTube */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
  height: 0;
  overflow: hidden;
  border-radius: 0.75rem; /* Esquinas redondeadas */
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Estilos para el menú móvil */
.mobile-nav-menu {
  display: none; /* Oculto por defecto en móviles */
  flex-direction: column;
  position: absolute;
  top: 100%; /* Justo debajo del encabezado */
  left: 0;
  width: 100%;
  background-color: #2b5b65; /* Color de fondo del encabezado */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 1rem 0;
  z-index: 40; /* Por debajo del encabezado fijo */
}
.mobile-nav-menu.active {
  display: flex; /* Mostrar cuando está activo */
}
.mobile-nav-menu li {
  width: 100%;
  text-align: center;
}
.mobile-nav-menu a {
  display: block;
  padding: 0.75rem 1rem;
  color: white;
  transition: background-color 0.3s ease;
}
.mobile-nav-menu a:hover {
  background-color: #3f7a8b; /* Color de fondo al pasar el ratón */
  color: #d7a648;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after,
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  color: white !important;
}

.swiper-pagination-bullet-active {
  background-color: white;
}