/* Estilos generales */
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  scroll-behavior: smooth;
  color: #333;
  background-color: #fff;
}

h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  margin-bottom: 1rem;
  color: #075d9d;
  
}
.indicadores {
  text-align: center;
  margin-top: 20px;
}

.indicadores span {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.indicadores span.active {
  background-color: #075d9d; /* tu color azul */
}

.contenido-mensaje-b {
    /* Nuevo: Añade un margen interno para que el texto no se pegue a los bordes */
    padding: 0 20px; 
}

/* =========================
   HERO SECTION RESPONSIVE
========================= */
#hero {
  position: relative;
  height: 100vh;
  background: url('../img/hero.jpg') no-repeat center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

/* Overlay oscuro para mejorar legibilidad */
#hero .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.35);
  z-index: 1;
}
.titulo-nuestra-boda {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  color: #075d9d;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}

.icon-clavel {
  width: 35px;
  height: 35px;
  flex: 0 0 35px;
}

/* Rectángulo blanco superior */
.rectangulo-boda {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: white;
  color: #075d9d;
  text-align: center;
  font-size: 1.8em;
  font-weight: 600;
  padding: 5px 0;
  z-index: 2;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Nombres y fecha centrados en medio de la pantalla */
.info-central {
  position: absolute;
  top: 45%;       /* Centro vertical */
  left: 50%;      /* Centro horizontal */
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  color: white;
}

.info-central .nombres-novios {
  font-family: 'Great Vibes', cursive; /* Sustituir por Westchester si la tienes */
  font-size: 9vw; /* Escalable según ancho de pantalla */
  margin: 0;
  font-weight: 400;
  line-height: 1.1;
  color: white;
}

.nombres-novios-m {
  font-family: 'Great Vibes', cursive; /* Sustituir por Westchester si la tienes */
  font-size: 7vw !important; /* Escalable según ancho de pantalla */
  margin: 0;
  font-weight: 400;
  line-height: 1.1;
  color: #075d9d;;
}

.info-central .fecha-boda {
  font-size: 3vw; /* También responsivo */
  margin: 10px 0 0;
  font-weight: 300;
  color: white;
}

/* Lluvia en el lado derecho */
.lluvia-derecha {
  position: absolute;
  top: 0;
  right: 0;
  width: 30%; /* solo lado derecho */
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
}

.lluvia-derecha span {
  position: absolute;
  top: -10px;
  display: block;
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: caer 4s linear infinite;
}
/* Asegúrate que el contenedor padre de las flechas tenga position: relative */
.galeria-horizontal {
    position: relative; /* ¡CLAVE! para que las flechas se posicionen */
    /* ... el resto de tus estilos ... */
}

/* Estilos básicos para las flechas de navegación */
.nav-arrow {
    position: absolute;
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%);
    background: rgba(7, 93, 157, 0.7); /* Azul de tu tema con transparencia */
    color: white;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10; /* Asegura que la flecha esté por encima de las imágenes */
    font-size: 1.5em;
    border-radius: 50%;
    transition: background 0.3s;
}

.nav-arrow:hover {
    background: #075d9d; /* El azul sólido al pasar el ratón */
}

/* Posición específica para la flecha IZQUIERDA */
.nav-arrow.left {
    left: 10px;
}

/* Posición específica para la flecha DERECHA */
.nav-arrow.right {
    right: 10px;
}



@keyframes caer {
  0% { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(100vh); opacity: 0; }
}

/* Diferentes posiciones y velocidades para las gotas */
.lluvia-derecha span:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 3s; }
.lluvia-derecha span:nth-child(2) { left: 20%; animation-delay: 0.5s; animation-duration: 4.5s; }
.lluvia-derecha span:nth-child(3) { left: 35%; animation-delay: 1s; animation-duration: 3.5s; }
.lluvia-derecha span:nth-child(4) { left: 50%; animation-delay: 0.2s; animation-duration: 4s; }
.lluvia-derecha span:nth-child(5) { left: 65%; animation-delay: 1.5s; animation-duration: 3.8s; }
.lluvia-derecha span:nth-child(6) { left: 75%; animation-delay: 0.7s; animation-duration: 4.2s; }
.lluvia-derecha span:nth-child(7) { left: 85%; animation-delay: 1.2s; animation-duration: 3.2s; }
.lluvia-derecha span:nth-child(8) { left: 15%; animation-delay: 0.3s; animation-duration: 3.7s; }
.lluvia-derecha span:nth-child(9) { left: 45%; animation-delay: 1.8s; animation-duration: 4.1s; }
.lluvia-derecha span:nth-child(10){ left: 70%; animation-delay: 1s; animation-duration: 3.9s; }

/* =========================
   RESPONSIVE
========================= */

@media (min-width: 1024px) {
  /* Imagen ya con ajuste de proporción */
  #hero {
    height: auto;
    min-height: 90vh;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #075d9d; /* Puedes cambiar a degradado */
    padding-top: 140px;
    padding-bottom: 140px;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Mueve contenido a la derecha */
    text-align: right;
  }

  /* Rectángulo superior igual */
  .rectangulo-boda {
    font-size: 1.5em; /* un poco más pequeño */
    padding: 10px 0;
  }

  /* Contenedor de nombres y fecha */
  .info-central {
   /* position: static;  Quitamos absoluto para que respete flexbox */
    transform: none;
      top: 45%;       /* Centro vertical */
  left: 54%;      /* Centro horizontal */
    text-align: right;
    max-width: 40%; /* para que no ocupe mucho ancho */
    margin-right: 5%; /* separación del borde */
  }

  .info-central .nombres-novios {
    font-size: 4vw; /* más pequeño en laptop */
    
  }

  .info-central .fecha-boda {
    font-size: 1.5vw;
  }
}

    
/* Estilos para el título de la bendición */
.mensaje-normal {
    font-size: 2em; /* Más pequeño */
    color: #B8860B; /* Color que contraste (verde). Puedes usar otro hex. */
    text-transform: uppercase;
    font-weight: bold;
}

/* Estilos para los títulos "De la Novia" y "Del Novio" */
.mensaje-padres h1 {
    font-family: 'Great Vibes', cursive; /* Fuente cursiva y llamativa */
    font-size: 4.2em; /* Más grande que los nombres */
    color: #075d9d; /* El azul que usas en la invitación */
    margin-bottom: 5px;
}

/* Estilos para los nombres de los padres (más neutros) */
.mensaje-padres h2 {
    font-family: 'Poppins', sans-serif; /* Fuente neutra y elegante */
    font-size: 2em !important;
    color: #555; /* Un gris oscuro, neutro */
    line-height: 1.6;
}


/* Estilos para la imagen superior desvanecida */
.imagen-superior-desvanecida {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px; /* Espacio entre la imagen y el texto */
}

.imagen-superior-desvanecida img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 300px;

    /* Máscara: desvanece ambos bordes */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

/* Estilos para el texto bíblico */
.mensaje-biblia {
    font-family: serif; /* Fuente formal y elegante */
    font-size: 1.5em; /* Ajusta el tamaño */
    color: #333; /* Color del texto principal */
    text-align: center;
    text-transform: uppercase;
    line-height: 1.6;
}

/* Estilos para la cita bíblica */
/* Estilos para la cita bíblica */
.cita-biblica {
    display: block;
    text-align: center; /* Cambiado de 'right' a 'center' */
    color: #075d9d; /* Color azul que usas */
    font-style: italic;
    font-family: cursive; /* Fuente cursiva */
    font-size: 1em; /* Ajusta el tamaño de la cita */
    margin-top: 10px;
}

@media (max-width: 768px) {
    

 /* Estilos para el título de la bendición */
.mensaje-normal {
    font-size: 1.2em; /* Más pequeño */
    color: #B8860B; /* Color que contraste (verde). Puedes usar otro hex. */
    text-transform: uppercase;
    font-weight: bold;
}

/* Estilos para los títulos "De la Novia" y "Del Novio" */
.mensaje-padres h1 {
    font-family: ''Great Vibes'', cursive; /* Fuente cursiva y llamativa */
    font-size: 3.5em; /* Más grande que los nombres */
    color: #075d9d; /* El azul que usas en la invitación */
    margin-bottom: 5px;
}

/* Estilos para los nombres de los padres (más neutros) */
.mensaje-padres h2 {
    font-family: 'Poppins', sans-serif; /* Fuente neutra y elegante */
    font-size: 1.5em !important;
    color: #555; /* Un gris oscuro, neutro */
    line-height: 1.6;
}
    
    .imagen-desvanecida {
    position: relative; /* Clave: hace que los hijos absolutos se posicionen con respecto a este contenedor */
    overflow: hidden;
    width: 100%;
    max-width: 600px;
    margin: 40px auto 0;
}

.imagen-desvanecida img {
    width: 100%;
    display: block;

    /* Máscara para desvanecer bordes arriba y abajo */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

/* NUEVO: Estilos para el texto superpuesto */
.imagen-caption {
    position: absolute; /* Permite posicionarlo sobre la imagen */
    bottom: 20px; /* Distancia desde el borde inferior de la imagen */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste fino para centrar */
    color: white; /* Color del texto */
    font-size: 1.5em;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para que el texto resalte */
}

/* Estilos para la imagen superior desvanecida */
.imagen-superior-desvanecida {
    width: 100%;
    overflow: hidden;
    margin-bottom: 30px; /* Espacio entre la imagen y el texto */
}

.imagen-superior-desvanecida img {
    width: 100%;
    display: block;
    object-fit: cover;
    max-height: 600px;

    /* Máscara: desvanece ambos bordes */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

/* Estilos para el texto bíblico */
.mensaje-biblia {
    font-family: serif; /* Fuente formal y elegante */
    font-size: 1em; /* Ajusta el tamaño */
    color: #333; /* Color del texto principal */
    text-align: center;
    text-transform: uppercase;
    line-height: 1.6;
}

/* Estilos para la cita bíblica */
.cita-biblica {
    display: block;
    text-align: center; /* Cambiado de 'right' a 'center' */
    color: #075d9d; /* Color azul que usas */
    font-style: italic;
    font-family: cursive; /* Fuente cursiva */
    font-size: 1.2em; /* Ajusta el tamaño de la cita */
    margin-top: 10px;
}
    
    .nombres-novios-m {
  font-family: 'Great Vibes', cursive; /* Sustituir por Westchester si la tienes */
  font-size: 13vw !important; /* Escalable según ancho de pantalla */
  margin: 0;
  font-weight: 400;
  line-height: 1.1;
  color: #075d9d;;
}
  #hero {
    background-position: center top;
  }

  .rectangulo-boda {
    font-size: 1.2em;
    padding: 15px 0;
  }

  .info-central .nombres-novios {
    font-size: 14vw;
  }

  .info-central .fecha-boda {
    font-size: 6.5vw;
  }

  .lluvia-derecha {
    width: 50%; /* Más ancha para móviles */
  }
}





/* Contenedor general */
.galeria-horizontal {
  padding: 5px 0;

  text-align: center;
  overflow: hidden;
}

.galeria-title {
  font-size: 2.5rem;
  color: #075d9d;
  margin-bottom: 30px;
  animation: fadeSlide 1s ease-out forwards;
}

/* Contenedor horizontal */
.galeria-wrapper {
    
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 0 20px;
  animation: fadeSlide 1.2s ease-out forwards;
}

.galeria-wrapper::-webkit-scrollbar {
  height: 8px;
}
.galeria-wrapper::-webkit-scrollbar-thumb {
  background: #075d9d;
  border-radius: 4px;
}

/* Cada ítem */
.galeria-item {
  position: relative;
  max-width: 320px;   /* Imagen más grande */
  height: 220px;      /* Ajusta altura */
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  animation: fadeSlide 1.5s ease-out forwards;
}

.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.galeria-item:hover img {
  transform: scale(1.1);
}

/* Texto siempre visible */
.galeria-item .texto {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(7, 93, 157, 0.7);
  color: white;
  text-align: center;
  padding: 8px;
  font-size: 1rem;
  font-weight: 500;
}

/* Modal base */
.modal {
  display: none; 
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.9);
  text-align: center;
}

.modal-content {
  max-width: 90%;
  max-height: 80vh;
  margin: auto;
  transition: transform 0.3s ease;
}

/* Imagen vertical (agregada dinámicamente por JS) */
@media (min-width: 1024px) {
.modal-content.vertical {
  max-width: 25%; /* más angosta */
  max-height: 85vh;
}

.galeria-item {
  position: relative;
  max-width: 380px;   /* Imagen más grande */
  height: 520px;      /* Ajusta altura */
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  animation: fadeSlide 1.5s ease-out forwards;
}
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover {
  color: #bbb;
}

/* Animaciones */
@keyframes zoomIn {
  from {transform: scale(0.7); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

@keyframes fadeSlide {
  from {opacity: 0; transform: translateX(50px);}
  to {opacity: 1; transform: translateX(0);}
}

/* Responsive */
@media (max-width: 768px) {
  .galeria-item {
    min-width: 380px;
    height: 550px;
  }
  
  .modal-content.vertical {
  max-width: 50%; /* más angosta */
  max-height: 65vh;
}
}


/* Galer铆a */
#galeria {
  padding: 60px 20px;
}

.carousel-inner img {
  max-height: 500px;
  object-fit: cover;
}

/* RSVP (confirmaci贸n) */
#rsvp {
  padding: 60px 20px;
  background-color: #f1f1f1;
  text-align: center;
}

#rsvp form {
  max-width: 500px;
  margin: auto;
}

#rsvp input, #rsvp select {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 10px;
}

#rsvp button {
  background-color: #075d9d;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#rsvp button:hover {
  background-color: #054c7d;
}

footer {
  text-align: center;
  padding: 1rem;
  background: #075d9d;
  color: #fff;
  position: relative;
}

footer .social-icons {
  margin-bottom: 1rem;
}

footer .social-icons a {
  color: #fff;
  font-size: 1.5rem;
  margin: 0 0.5rem;
  transition: transform 0.3s;
}

footer .social-icons a:hover {
  transform: scale(1.2);
}

footer .contador {
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

footer #countdown span {
  display: inline-block;
  margin: 0 0.5rem;
  font-weight: bold;
}


/* Sección Mensaje */
#mensaje {
    position: relative;
    padding: 60px 5px;
    text-align: center;
    color: #075d9d;

    /* Propiedades de fondo actualizadas */
    background-image: linear-gradient(rgba(244, 250, 255, 0.8), rgba(230, 241, 251, 0.8)), url('../img/flores.png');
    background-size: cover; /* La imagen cubre todo el contenedor */
    background-repeat: no-repeat;
    background-position: center;
    
    background-color: #f4faff; /* Color de fondo base en caso de que la imagen no cargue */
    
    border-top: 2px solid #bcd6ec;
    border-bottom: 2px solid #bcd6ec;
}

#mensajer {

    position: relative;

    padding: 60px 5px;

    text-align: center;

    color: #075d9d;

    display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;


    /* Propiedades de fondo actualizadas */

    background-image: linear-gradient(rgba(244, 250, 255, 0.8), rgba(230, 241, 251, 0.8)), url('../img/flores.png');

    background-size: cover; /* La imagen cubre todo el contenedor */

    background-repeat: no-repeat;

    background-position: center;

    

    background-color: #f4faff; /* Color de fondo base en caso de que la imagen no cargue */

    

    border-top: 2px solid #bcd6ec;

    border-bottom: 2px solid #bcd6ec;

} 

#mensajeros {
    position: relative;
    padding: 60px 10px 0 10px;
    text-align: center;
    color: #075d9d;

    /* Propiedades de Flexbox eliminadas */
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    
    /* Propiedades de fondo actualizadas */
    background-image: linear-gradient(rgba(244, 250, 255, 0.8), rgba(230, 241, 251, 0.8)), url('../img/flores.png');
    background-size: cover; /* La imagen cubre todo el contenedor */
    background-repeat: no-repeat;
    background-position: center;
    
    background-color: #f4faff; /* Color de fondo base en caso de que la imagen no cargue */
    
    border-top: 2px solid #bcd6ec;
    border-bottom: 2px solid #bcd6ec;
}

#mano {
    position: relative;
    padding: 60px 10px 0 10px; /* Padding reducido a 0 en la parte inferior */
    text-align: center;
    color: #075d9d;
    background-image: linear-gradient(rgba(244, 250, 255, 0.8), rgba(230, 241, 251, 0.8)), url('../img/flores.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f4faff;
    border-top: 2px solid #bcd6ec;
    border-bottom: 2px solid #bcd6ec;
}

/* Estilos para que la imagen ocupe el 100% del ancho del viewport */
.imagen-ancho-completo {
    width: 40vw;
    position: relative;
    left: 80%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.imagen-ancho-completo img {
    width: 100%;
    display: block;
    /* Mantén tus estilos de desvanecimiento aquí si los quieres */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* El resto de tus estilos para .imagen-caption se mantiene igual */
.imagen-ancho-completo .imagen-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 5em;
    font-family: 'Great Vibes', cursive; 
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

#mensajer-1 {
    position: relative;
    padding: 10px 10px;
    text-align: center;
    color: #075d9d;
    display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

    /* Propiedades de fondo actualizadas */
    background-image: linear-gradient(rgba(244, 250, 255, 0.8), rgba(230, 241, 251, 0.8)), url('../img/flores.png');
    background-size: cover; /* La imagen cubre todo el contenedor */
    background-repeat: no-repeat;
    background-position: center;
    
    background-color: #f4faff; /* Color de fondo base en caso de que la imagen no cargue */
    
    border-top: 2px solid #bcd6ec;
    border-bottom: 2px solid #bcd6ec;
}
/* Contenedor flotante */
.music-float-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    cursor: pointer;
}

/* Estilo del botón de música */
.btn-music {
    width: 60px;
    height: 60px;
    background-color: #075d9d; /* Color de tu boda */
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    transition: transform 0.2s ease;
}

.btn-music:hover {
    transform: scale(1.1);
}

/* Animación de latido */
.btn-music.playing {
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Icono dentro del botón */
.btn-music i {
    pointer-events: none; /* Para que el clic funcione en el botón y no en el ícono */
}

.contenido-mensaje h2 {
  font-size: 2em;
  margin-bottom: 20px;
}

.contenido-mensaje p.italico {
  font-style: italic;
  font-size: 1.2em;
  margin-bottom: 30px;
}

/* 🎵 Reproductor Premium */
.audio-player {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 320px;
  padding: 12px 20px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(10px);
  border-radius: 40px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
  margin: 30px auto 0;
  position: relative;
  transition: transform 0.3s ease;
}

/* Efecto de latido */
.audio-player.playing {
  animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Botón Play/Pause */
.audio-player .btn-play {
  background: #075d9d;
  color: white;
  border: none;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease;
}

.audio-player .btn-play:hover {
  transform: scale(1.1);
}

/* Barra de progreso */
.progress-container {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.3);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}

#progress-bar {
  background: #075d9d;
  height: 100%;
  width: 0%;
  border-radius: 5px;
  transition: width 0.1s linear;
}

/* Control de volumen */
#volume-control {
  width: 70px;
  cursor: pointer;
}

/* 🌸 Flores decorativas flotantes */
.flores-decorativas {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 100%; /* CLAVE: La imagen no será más ancha que su contenedor */
    width: 450px; /* Mantienes el ancho original para pantallas grandes, pero se adapta a menos de 450px */
    height: auto; /* Asegura que la altura se ajuste proporcionalmente */
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
    animation: suaveFlotar 8s ease-in-out infinite;
}

@keyframes suaveFlotar {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* Asegurar que el contenido va por encima */
#mensaje .contenido-mensaje {
  position: relative;
  z-index: 2;
}

/* Ajustes responsive */
@media (max-width: 768px) {
    
    
    
  .audio-player {
    width: 260px;
    gap: 10px;
    padding: 10px 15px;
  }

  .flores-decorativas {
    width: 450px;
    opacity: 0.25;
  }
}


/* =========================
   SECCIÓN COUNTDOWN
========================= */
#countdown-section {
  position: relative;
  background: url('../img/Anillo.jpg') no-repeat center center;
  background-size: cover;
  height: 100vh;        /* Alto en desktop */
  min-height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;  /* Centrado vertical en desktop */
  text-align: center;
  padding: 150px 0;
}

/* Overlay degradado */
#countdown-section .overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to bottom right, rgba(7, 93, 157, 0.7), rgba(0, 0, 0, 0.3));
  z-index: 1;
}

/* Contenedor del contador */
.countdown-container {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 90%;
  padding: 20px;
}

/* Título responsivo */
.countdown-title {
  font-size: 3vw;       /* Escalable según ancho de pantalla */
  margin-bottom: 30px;
  color: #fff;
  font-weight: 600;
}

/* Caja del contador */
.countdown-box {
  display: flex;
  justify-content: center;
  gap: 30px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 25px 40px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.countdown-box div {
  font-size: 2.5vw;    /* Responsivo */
  color: white;
  text-align: center;
}

.countdown-box p {
  font-size: 0.6em;
  margin-top: 5px;
  color: #fff;
}
  .subtitulo-historia{
      font-size: 2vw; 
  }

/* =========================
   RESPONSIVE MÓVIL
========================= */
@media (max-width: 768px) {
    
    /* Estilos para que la imagen ocupe el 100% del ancho del viewport */
.imagen-ancho-completo {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.imagen-ancho-completo img {
    width: 100%;
    display: block;
    /* Mantén tus estilos de desvanecimiento aquí si los quieres */
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

/* El resto de tus estilos para .imagen-caption se mantiene igual */
.imagen-ancho-completo .imagen-caption {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 2.5em;
    font-family: 'Great Vibes', cursive; 
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}
  #countdown-section {
    height: 55vh;
    min-height: 350px;
    padding: 20px 0 50px 0;
    align-items: flex-start; /* Sube el contenido */
    overflow-x: hidden;      /* Evita scroll horizontal */
  }
  
  .subtitulo-historia{
      font-size: 5.5vw; 
  }

  .countdown-container {
    margin-top: 10px;
    width: 100%;
    max-width: 95%;          /* Margen para que no pegue a los bordes */
  }

  .countdown-title {
    font-size: 8vw;
    margin-bottom: 20px;
    color: white;
  }

  .countdown-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between; /* Distribuye horizontalmente */
    gap: 5px;
    width: 100%;                    /* Ocupa todo el ancho */
    padding: 12px 15px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    backdrop-filter: blur(8px);
  }

  .countdown-box div {
    flex: 1;                       /* Todos ocupan el mismo espacio */
    text-align: center;
    font-size: 7vw;                 /* Se adapta al ancho de pantalla */
    color: white;
  }

  .countdown-box div p {
    font-size: 6vw;                 /* Etiquetas más pequeñas */
    margin-top: 3px;
  }
}




/* ---- Estilos generales de la sección ---- */
#galeria {
    padding: 60px 0;
    text-align: center;
    background-color: #f8f9fa;
}

.galeria-title {
    font-size: 2.5rem;
    color: #075d9d;
    margin-bottom: 40px;
}

/* ---- Estilos para limitar el ancho y centrar la galería ---- */
.galeria-wrapper {
    max-width: 820px;
    margin: 0 auto;
    max-height: 650px;
    padding: 0 20px;
}

/* ---- NUEVOS ESTILOS para que el alto sea dinámico ---- */

/* La altura del carrusel ahora se ajusta automáticamente */
.slick-slide {
    height: auto; /* IMPORTANTE: Quitamos la altura fija */
    line-height: 0;
}

/* La imagen en sí misma */
.galeria-imagen {
    width: 100%;
    height: auto; /* La altura se calcula automáticamente para mantener la proporción */
    object-fit: contain; /* ¡CLAVE! Muestra la imagen completa sin recortar */
    
    display: block;
    border: 3px solid #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.galeria-imagen:hover {
    transform: scale(1.03);
}

/* ... (el resto de los estilos de Slick y Lightbox se mantienen) ... */

/* ---- Personalización de Slick Carousel ---- */

/* Flechas de navegación (Anterior/Siguiente) */
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    color: #075d9d; /* Color de acento para las flechas */
    opacity: 0.75;
}

.slick-prev:hover:before, .slick-next:hover:before {
    opacity: 1;
    color: #054877; /* Un azul más oscuro al pasar el cursor */
}

/* Puntos de paginación (dots) */
.slick-dots li button:before {
    font-size: 10px;
    color: #075d9d; /* Color de acento para los puntos */
    opacity: 0.5;
}

.slick-dots li.slick-active button:before {
    color: #075d9d;
    opacity: 1;
}

/* Elimina el borde de enfoque en los botones del carrusel */
.slick-slider .slick-prev:focus, .slick-slider .slick-next:focus {
    outline: none;
}


/* ---- Personalización de Lightbox (Opcional) ---- */

/* Personaliza el color del fondo del modal de Lightbox */
#lightboxOverlay.lb-overlay {
    background-color: rgba(7, 93, 157, 0.9); /* Azul de tu boda, semitransparente */
}

/* Personaliza el color del texto y los botones dentro del modal */
.lb-caption, .lb-number {
    color: #ffffff; /* Texto blanco en el modal */
}

#evento {
  position: relative;
  padding: 80px 20px;
  text-align: center;
  /*background: linear-gradient(to bottom right, #f4faff, #e6f1fb);*/
  /*background-image: url('../img/textura_papel_suave.png');*/
  background-blend-mode: overlay;
  overflow: hidden;
}

.titulo-evento {
  font-size: 3em;
  color: #075d9d;
  margin-bottom: 30px;
  font-family: 'Playfair Display', serif;
  text-shadow: 0 0 12px rgba(7, 93, 157, 0.3);
}

.evento-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 30px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border-radius: 25px;
    border: 2px solid #4fa3ff;
    box-shadow: 0 0 25px rgba(79, 163, 255, 0.25);
    animation: fadeInUp 0.8s ease;
    position: relative;
    z-index: 2;
}

/* Nuevos estilos para el contenedor de la imagen */
.imagen-evento {
    width: 100%;
    margin-bottom: 25px; /* Espacio debajo de la imagen */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se salga */
    border-radius: 20px; /* Bordes redondeados para que coincida con la tarjeta */
    /*box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);*/
}

.imagen-evento img {
    width: 100%;
    height: auto;
    display: block; /* Elimina cualquier espacio adicional debajo de la imagen */
    transition: transform 0.3s ease;
}

.imagen-itinerario {
    width: 100%;                /* Que ocupe todo el ancho disponible */
    display: flex;              /* Usamos flexbox */
    justify-content: center;    /* Centra horizontalmente */
    margin-bottom: 25px;
    overflow: hidden;
    border-radius: 20px;
}

.imagen-itinerario img {
    max-width: 50%;             /* Controla el tamaño máximo */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.imagen-itinerario img:hover {
    transform: scale(1.05);
}


.imagen-evento img:hover {
    transform: scale(1.05); /* Efecto de zoom sutil al pasar el mouse */
}


.icono-fiesta i {
  font-size: 3.5em;
  color: #1d7ce4; /* Azul brillante */
  margin-bottom: 20px;
  text-shadow: 0 0 15px rgba(29, 124, 228, 0.3);
}

.evento-lugar {
  font-size: 1.8em;
  color: #075d9d;
  font-weight: 600;
  margin-bottom: 20px;
}

.evento-detalle {
  font-size: 1em;
  color: #0a3f6b;
  margin: 6px 0;
}

.btn-mapa {
  display: inline-block;
  margin-top: 25px;
  padding: 12px 25px;
  background: linear-gradient(45deg, #1d7ce4, #4fa3ff);
  color: white;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 0 15px rgba(29, 124, 228, 0.4);
}

.btn-mapa:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 25px rgba(79,163,255,0.6);
}

/* Partículas azules */
.evento-luces span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #4fa3ff;
  border-radius: 50%;
  opacity: 0.7;
  animation: caer 6s linear infinite;
}

@keyframes caer {
  0% { transform: translateY(-10px) scale(1); opacity: 0.8; }
  100% { transform: translateY(100vh) scale(0.5); opacity: 0; }
}

.evento-luces span:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 5s; }
.evento-luces span:nth-child(2) { left: 20%; animation-delay: 1s; animation-duration: 6s; }
.evento-luces span:nth-child(3) { left: 35%; animation-delay: 0.5s; animation-duration: 7s; }
.evento-luces span:nth-child(4) { left: 50%; animation-delay: 2s; animation-duration: 5.5s; }
.evento-luces span:nth-child(5) { left: 65%; animation-delay: 1.5s; animation-duration: 6.5s; }
.evento-luces span:nth-child(6) { left: 75%; animation-delay: 0.3s; animation-duration: 5.7s; }
.evento-luces span:nth-child(7) { left: 85%; animation-delay: 1.2s; animation-duration: 6.8s; }
.evento-luces span:nth-child(8) { left: 15%; animation-delay: 0.7s; animation-duration: 7.2s; }
.evento-luces span:nth-child(9) { left: 45%; animation-delay: 2.2s; animation-duration: 6.2s; }
.evento-luces span:nth-child(10){ left: 70%; animation-delay: 1.7s; animation-duration: 5.9s; }

/* Animación sutil */
@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 768px) {
  .titulo-evento {
    font-size: 2.8em;
  }

  .evento-card {
    padding: 5px;
  }

  .evento-lugar {
    font-size: 2em;
  }
}

#codigo-itinerario {
  text-align: center;
  padding: 10px 5px;
  /*background: linear-gradient(to bottom, #f4faff, #e6f1fb);*/
  border-top: 2px solid #bcd6ec;
  border-bottom: 2px solid #bcd6ec;
  color: #075d9d;
}

@media (min-width: 1024px) {
  #codigo-itinerario {
    height: auto;
    min-height: 90vh;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    background-color: #075d9d; /* Fondo de la sección */
    padding-top: 50px;
    padding-bottom: 50px;
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar contenido */
    text-align: center;
  }

  .imagen-wrapper {
    background: white; /* Fondo blanco solo para la imagen */
    padding: 20px;
    border-radius: 15px;
    max-width: 500px;
    display: flex;
    justify-content: center;
  }

  .imagen-wrapper img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  .imagen-wrapperr {
  background-color: white;    /* Fondo blanco solo para la imagen */
  padding: 10px;              /* Espacio alrededor de la imagen */
  border-radius: 10px;        /* Bordes redondeados opcionales */
  display: flex;              /* Para centrar la imagen dentro */
  justify-content: center;
  align-items: center;
}

.imagen-wrapperr img {
  max-width: 100%;
  height: auto;
  display: block;
}
  .w {
  max-width: 800px;
}

}

@media (max-width: 768px) {
    .w {
  max-width: 800px;
}

.imagen-wrapper {
  background-color: white;    /* Fondo blanco solo para la imagen */
  padding: 10px;              /* Espacio alrededor de la imagen */
  border-radius: 10px;        /* Bordes redondeados opcionales */
  display: flex;              /* Para centrar la imagen dentro */
  justify-content: center;
  align-items: center;
}

.imagen-wrapper img {
  max-width: 100%;
  height: auto;
  display: block;
}

.imagen-wrapperr {
  /*background-color: white;    *//* Fondo blanco solo para la imagen */
  padding: 10px;              /* Espacio alrededor de la imagen */
  border-radius: 10px;        /* Bordes redondeados opcionales */
  display: flex;              /* Para centrar la imagen dentro */
  justify-content: center;
  align-items: center;
}

.imagen-wrapperr img {
  max-width: 100%;
  height: auto;
  display: block;
}

}






#codigo-vestimenta {
  text-align: center;
  padding: 50px 20px;
  /*background: linear-gradient(to bottom, #f4faff, #e6f1fb);*/
  border-top: 2px solid #bcd6ec;
  border-bottom: 2px solid #bcd6ec;
  color: #075d9d;
}

.titulo-vestimenta {
  font-size: 2.2em;
  margin-bottom: 30px;
}

.img-vestimenta {
  width: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-vestimenta:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Tenis */
.tenis {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 10px 0 25px 0; /* Menor separación */
}

.tenis img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  background: white;
  /*border-radius: 8px;*/
  /*padding: 4px;*/
  /*box-shadow: 0 2px 8px rgba(0,0,0,0.15);*/
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tenis img:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Columnas de información */
.columnas-info {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.columna {
  flex: 0 0 150px; /* Más estrechas */
  text-align: center;
}

.columna h3 {
  font-size: 2em;
  margin-bottom: 10px;
}

.columna p {
  margin: 5px 0;
  font-size: 1.3em;
}

.nota-vestimenta {
  margin-top: 30px;
  font-size: 1.2em;
  font-style: italic;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}