/* Hover y toque en menú hamburguesa (móvil y desktop) */
.navbar-nav.d-lg-none .nav-link {
  transition: background-color 0.3s, color 0.3s; /* transición suave */
  border-radius: 5px;
  color:#fff;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* sombreado negro */
  font-family: 'Sansation', sans-serif;
}

/* Cuando el mouse pasa o se toca */
.navbar-nav.d-lg-none .nav-link:hover,
.navbar-nav.d-lg-none .nav-link:focus,
.navbar-nav.d-lg-none .nav-link:active {
  background-color: #218687; /* naranja claro */
  color: #fff;
}

/* Para que en dispositivos táctiles el efecto ocurra al tocar */
@media (hover: none) and (pointer: coarse) {
  .navbar-nav.d-lg-none .nav-link:active {
    background-color: #fff;
    color: #000;
  }
}




#pillNav2 {
  --bs-nav-link-color: #ffffff;           /* color de los links normales */
  --bs-nav-pills-link-active-color: #218687; /* color del link activo */
  --bs-nav-pills-link-active-bg: #ffffff;    /* fondo del link activo */
  background-color: #218687 !important;      /* fondo del menú */
}


.navbar-toggler {
background-color: rgba(0, 0, 0, 0.68) !important; /* negro sólido */
  border: 2px solid #000;
  padding: 6px 12px;
  border-radius: 8px;

  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 6px;
}

/* Texto "Menu" */
.navbar-toggler .texto-menu {
  font-weight: bold;
  color: #fff; /* blanco */
  font-family: 'Sansation', sans-serif;
}

/* Ícono de hamburguesa */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}






header {
  background-image: url('../img/playa.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 550px;   /* altura del header */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 👈 contenido arriba */
}


.header-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;   /* ocupa todo el ancho */
  height: 100vh;  /* ocupa todo el alto */
  background-color: rgba(0,0,0,0); /* 👈 inicialmente transparente */
  transition: background-color 0.3s;
  z-index: 1; /* detrás del menú */
  pointer-events: none; /* 🚫 no bloquea clicks */
}



header nav {
  position: relative;
  z-index: 2;
}

.header-overlay.active {
  display: block;
  pointer-events: auto; /* ✅ solo bloquea cuando está activo */
}




.contacto-title {
  text-align: center;
  margin: 60px 20px; /* 60px arriba y abajo */
}



.badge-custom {
  background-color: #f49d09 !important;
  color: #fff !important;
   text-shadow: 2px 2px 4px rgba(0,0,0,0.4) !important;
}




/* Estilos para el botón flotante de WhatsApp */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #25D366; /* verde WhatsApp */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 1000;
  transition: transform 0.2s;
}

.whatsapp-float:hover {
  transform: scale(1.1);
}



.cards-container {
  margin-top: 80px; /* más espacio antes de las cards */
}



.form-container {

  margin-top: 80px !important;
  padding: 20px !important;
  max-width: 800px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
}





.form-container h3 {
  margin-bottom: 30px; /* espacio debajo del h3 */
}




footer {
  background-color: #333; /* fondo gris oscuro */
  color: #fff;           /* texto blanco */
  padding: 20px;         /* espacio interno */
  text-align: center;    /* texto centrado */
  margin-top: 80px;
}



#redes-footer svg {
  margin: 20 px 5px;
  cursor: pointer;
  transition: transform 0.2s;
  margin-bottom: 13px;
}


#redes-footer svg:hover {
  transform: scale(1.2);
}


.icon-instagram {
  color: #E1306C; /* rosa oficial de Instagram */
}



.mt-6 {
  margin-top: 6rem; 
  margin-left: 6rem;
  margin-right: 6rem;
  width: 85% !important;
}


#galeria-container {
  max-width: 1200px !important;   /* ancho máximo del contenedor */
  margin: 0 auto !important;      /* centra el bloque en la pantalla */
  padding: 0 20px !important; 
  margin-top: 6rem !important;    /* espacio a los costados (separación con los bordes) */
}

/* AddToAny flotante atrás */
.a2a_floating_style {
  z-index: 1000 !important;  /* más bajo que el overlay */
}


#btnEnviar {
  width: 100% !important;
}



.ver-mas-btn {
  width: 100% !important;
}


.ajustes {
  position: absolute;
  top: 5px;
  right: 20px;
  display: flex;
  gap: 10px;
}



#quienes-somos {
  text-align: justify;
   max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border-left: 5px solid #3085d6; /* color destacado */
  background: #fefefe;
}

@media (max-width: 768px) {
  #quienes-somos {
    margin: 20px 10px;   /* agrega aire a los costados */
    padding: 15px;       /* un poco menos de padding interno */
  }
}




[data-i18n="texto"]::first-letter {
  float: left;
  font-size: 2.5em;
  line-height: 1;
  margin-right: 6px;
  font-weight: bold;
}





.texto {
  overflow: hidden;
  max-height: 250px;     /* solo muestra parte del texto */
  transition: max-height 0.5s ease;
}

.texto.expandido {
  max-height: 1000px;   /* suficiente para mostrar todo */
}

#toggleBtn {
  margin-top: 10px;
  background: #3085d6;
  color: white;
  border: none;
  padding: 8px 15px;
  border-radius: 6px;
  cursor: pointer;
  width: 100% !important;
}

#toggleBtn:hover {
  background: #2563eb;
}





.card-img-top {
  width: 100%;          /* Ocupa todo el ancho de la card */
  height: 250px;        /* Altura fija (ajustala a gusto) */
  object-fit: cover;    /* Recorta para llenar el espacio sin deformar */
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}


.cont-imagen {
  text-align: center;
  padding: 30px;
}

.cont-imagen img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  border-radius: 8px;
}



.foto-grilla {
  display: block;
  object-fit: cover;
  height: 200px;
  width: 100%;

}

.col {
  padding: 0;
}



.card {
  display: flex;
  flex-direction: column;
  height: 100%; /* todas las cards del mismo alto */
}

.card-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1; /* ocupa el espacio disponible */
}

.ver-mas-btn {
  margin-top: auto; /* empuja el botón hacia el fondo */
  align-self: center; /* centrado horizontal opcional */
}

.card-title {
  text-align: center;
}


.card-text {
  text-align: justify;
}

.cards-container .row {
  align-items: stretch; /* todas las columnas de la fila tienen igual altura */
}

.cards-container .col {
  display: flex;
}

.cards-container .card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

/* Asegura que la imagen tenga el mismo alto en todas las cards */
.cards-container .card img {
  height: 200px; /* ajustá el valor según el diseño */
  object-fit: cover;
  width: 100%;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

/* Cuerpo de la tarjeta */
.cards-container .card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Estilo uniforme del título */
.cards-container .card-title {
  text-align: center;
  margin-bottom: 10px;
}

/* Footer fijo abajo */
.cards-container .card-footer {
  margin-top: auto;
}