/* ===================================================================
   CONFIGURACIÓN GLOBAL Y VARIABLES
   =================================================================== */
:root {
  /* Fuentes */
  --font-heading: "Lora", ui-serif, Georgia, "Times New Roman", serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-cursive: "Alex Brush", cursive;
  --font-elegant: "Italiana", serif;
  --font-serif-alt: "Prata", serif;

  /* Layout & Espaciado Galería */
  --polaroid-w: clamp(140px, 16vw, 260px);
  --polaroid-r: 14px;
  --gap-rest: clamp(1rem, 2.8vw, 2rem);
}

/* ===================================================================
   ESTILOS BASE (BODY, HTML, TIPOGRAFÍA)
   =================================================================== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  scroll-behavior: smooth;
}

h1,
h2,
h3,
.h1,


.h2,
.h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  letter-spacing: 0.015em;
}

/* ===================================================================
HERO
   =================================================================== */
#hero {
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.08));
}

.hero-zoom {
  position: absolute;
  inset: 0;
  background: url("imagenes/bg_cd.webp") center/cover no-repeat;
  transform: scale(1);
  will-change: transform;

}

@keyframes heroPulse {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

.hero-title-wrap {
  position: relative;
  z-index: 2;
  padding: 0 1rem;
  color: #f2efe2;
  opacity: .40;
  height: 90%;
  /* El contenedor debe ocupar toda la altura del hero */
  display: flex;
  flex-direction: column;
  /* Alinea los elementos verticalmente */
  justify-content: space-between;
  /* Empuja los elementos a los extremos */
  align-items: center;
  /* Mantiene el centrado horizontal */
}

.dm-title {
  font-family: var(--font-cursive);
  font-weight: 400;
  line-height: 1.05;
  margin: 0;
  font-size: clamp(40px, 10vw, 88px);
}

.dm-word {
  font-size: clamp(25px, 25vw, 220px);
}

.dm-amp {
  display: inline-block;
  transform: translateY(-0.04em);
  margin: 0 0.1em;
  font-size: 1.06em;
}

h2.save-the-date {
  font-family: var(--font-elegant);
  font-weight: 800;
  font-size: clamp(20px, 4.6vw, 5.5rem);
  letter-spacing: 0.035em;
}

#brand {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: clamp(180px, 12vw, 260px);
  height: auto;
  user-select: none;
  z-index: 50;
}

/* --- Media Queries HERO --- */
@media (max-width: 500px) {
  h2.save-the-date {
    font-family: var(--font-serif-alt);
    font-weight: 400;
    font-size: 1.7rem;
    letter-spacing: .03em;
  }

  .hero-title-wrap {
    /* Mueve el bloque de texto a la parte inferior */
    justify-content: flex-end;
    /* Invierte el orden visual: D&M aparece arriba de Save The Date */
    flex-direction: column;
    /* Agrega espacio inferior para que no se pegue al borde */
    padding-bottom: 8vh;
  }

  .dm-title {
    /* Reduce el tamaño del '&' */
    font-size: clamp(34px, 9vw, 42px);
    /* Añade un pequeño espacio debajo de los nombres */
    margin-bottom: 0.5rem;
  }

  .dm-word {
    /* Reduce significativamente el tamaño de los nombres */
    font-size: clamp(70px, 22vw, 90px);
  }

  .hero-zoom {
    background-position: calc(50% + 120px) bottom;

  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-zoom {
    animation: none;
    transform: scale(1);
  }
}

/* ===================================================================
   SECCIÓN COUNTDOWN Y VIDEO (CON BOOTSTRAP GRID)
   =================================================================== */

#countdown-video-split {
  background-image: url(imagenes/bg_cd2.webp);
  background-size: cover;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  color: #37474f;

}

.countdown-content-wrapper {
  max-width: 500px;
  /* Limita el ancho del contenido del contador */
  width: 100%;
}

/* --- Estilos del carrusel de frases (adaptados) --- */
#countdown-video-split #loveCarousel {
  margin-bottom: 2rem;
  min-height: 70px;
}

#countdown-video-split .love-phrase {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.4;
  color: #333;
}

/* --- Estilos del contador (adaptados) --- */
#countdown-video-split .countdown {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 6vw, 3.5rem);
  /* Separación aumentada */
}

#countdown-video-split .cd-item {
  text-align: center;
}

#countdown-video-split .cd-value {
  font-family: var(--font-serif-alt);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 1;
  color: #212529;
}

#countdown-video-split .cd-label {
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 0.5rem;
}

/* --- Contenedor y estilos del video --- */
.video-container-split {

  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
}

.video-container-split video {

  height: 90%;
  width: auto;
  aspect-ratio: 9 / 16;



  max-width: 100%;
  max-height: 100%;


  border-radius: 15px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {

  #countdown-video-split,
  #countdown-video-split .row,
  #countdown-video-split .col-md-6 {
    height: 100vh;
  }
}

/* Fondo crema por tarjeta del contador */
#countdown-video-split .cd-item {
  background-color: #FBF5E7;
  /* crema */
  border-radius: 12px;
  padding: 1rem 1.25rem;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
}

/* Ajuste del layout para que el gap se vea limpio */
#countdown-video-split .countdown-timer {
  gap: 1.25rem;
  /* ya tienes un gap; ajusta si lo necesitas */
}

/* En móvil, que armen una cuadrícula 2x2 agradable */
@media (max-width: 768px) {
  #countdown-video-split .cd-item {
    flex-basis: calc(50% - .75rem);
  }
}

/* Separación entre tarjetas del countdown */
#countdown-video-split .countdown-timer {
  display: flex;
  /* por si acaso */
  flex-wrap: wrap;
  /* permite salto a otra línea */
  justify-content: center;
  gap: 24px 28px;
  /* row-gap 24px, column-gap 28px */
}

/* Opcional: un poco más de aire al contenedor del lado izquierdo */
#countdown-video-split .countdown-content-wrapper {
  padding-inline: 20px;
}

/* Afinado responsive */
@media (max-width: 992px) {
  #countdown-video-split .countdown-timer {
    gap: 18px 20px;
  }
}

@media (max-width: 576px) {
  #countdown-video-split .countdown-timer {
    gap: 14px 16px;
  }
}

/* Pequeño respiro entre número y label dentro de cada tarjeta */
#countdown-video-split .cd-item .cd-value {
  margin-bottom: 4px;
}

/* ===================================================================
   LOGO FIJO EN SCROLL
   =================================================================== */

.fixed-brand {
  position: fixed;
  width: 150px;
  height: 150px;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease-out, visibility 0.4s ease-out;
}

.fixed-brand.is-visible {
  opacity: 0.8;
  visibility: visible;
}

.fixed-brand img {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

@media (max-width: 768px) {
  .fixed-brand {
    display: none;
  }
}

/* ===================================================================
   LOGO FIJO EN SCROLL - AJUSTE RESPONSIVE
   =================================================================== */

/* Busca el @media query anterior para .fixed-brand 
  (el que tenía 'display: none;') y REEMPLÁZALO por este bloque.
*/

@media (max-width: 768px) {
  .fixed-brand {
    /* Hacemos el logo visible pero más pequeño para tablets/móviles */
    display: block;
    /* Asegura que sea visible si estaba oculto */
    width: 70px;
    height: 70px;
    top: 15px;
    /* Reducimos el margen superior */
  }
}

/* Ajuste adicional para móviles pequeños */
@media (max-width: 480px) {
  .fixed-brand {
    width: 80px;
    height: 80px;
    top: 10px;
  }
}


/* ===================================================================
   ACTUALIZACIONES DEL COUNTDOWN
   =================================================================== */

/* 1. Contenedor para fondo crema y bordes redondeados
*/
.countdown-wrapper {
  background-color: #FBF5E7;
  /* Tono crema amarillento */
  border-radius: 12px;
  /* Bordes redondeados */
  padding: 2.5rem 2rem;
  /* Espacio interno amplio */
  max-width: 800px;
  /* Limita el ancho en pantallas grandes */
  margin: 0 auto;
  /* Centra el contenedor */
  box-shadow: 0 5px 20px rgba(45, 45, 45, 0.05);
  /* Sombra sutil */
}

/* 2. Ajuste al contenedor principal (.countdown-timer es #cd-root)
     para dar más separación.
*/
.countdown-timer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  /* Evita que se rompa en escritorio */
  gap: 3rem;
  /* REQ: Más separación entre bloques */
}

/* 3. Ajuste a las etiquetas (Meses, Días...) para hacerlas más grandes.
*/
.cd-label {
  font-family: var(--font-body);
  /* Asegura la fuente correcta */
  font-size: 1.15rem;
  /* REQ: Texto de etiqueta más grande */
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: block;
  margin-top: 0.5rem;
}

/* Ajustes a los números (basado en el diseño existente)
  (Puedes ajustar esto si ya lo tienes definido) 
*/
.cd-value {
  font-family: var(--font-heading);
  /* 'Lora' */
  font-size: 5rem;
  color: #B99A7B;
  /* Color principal */
  line-height: 1.1;
  display: block;
}

/* 4. REQ: Responsivo para móvil (Grid 2x2)
*/
@media (max-width: 768px) {
  .countdown-wrapper {
    padding: 2rem 1.5rem;
  }

  .countdown-timer {
    flex-wrap: wrap;
    /* PERMITE EL GRID 2x2 */
    gap: 2rem;
    /* Ajusta la separación (vertical y horizontal) */
  }

  .cd-item {
    /* Cada item ocupa la mitad del espacio (menos el gap) */
    flex-basis: calc(50% - 1rem);
    flex-grow: 0;

    /* Evita que crezcan de forma extraña */
  }

  .cd-value {
    font-size: 3.5rem;
    /* Números más pequeños en móvil */
  }

  .cd-label {
    font-size: 1.9rem;
    /* Etiquetas más pequeñas en móvil */
  }
}

/* Ajuste fino para móviles muy pequeños */
@media (max-width: 480px) {
  .countdown-wrapper {
    padding: 1.5rem 1rem;
  }

  .cd-value {
    font-size: 3rem;
  }
}

/* ===== Countdown layout estable ===== */

/* Desktop y laptops: 4 en una fila, con buen gap */
@media (min-width: 992px) {
  #countdown-video-split .countdown-timer {
    display: grid !important;
    grid-template-columns: repeat(4, auto);
    /* 4 tarjetas en línea */
    justify-content: center;
    /* centradas */
    align-items: start;
    column-gap: 32px;
    /* separación horizontal */
    row-gap: 0;
    /* no hay segunda fila */
  }

  /* Si alguno era demasiado ancho, controlamos anchura mínima/ máxima */
  #countdown-video-split .cd-item {
    min-width: 120px;
    /* puedes subir a 130–140 si quieres cajas más anchas */
    max-width: 180px;
    /* evita que crezcan y empujen a otra línea */
  }
}

/* Tablets: 2x2 cómodo, con buen respiro */
@media (min-width: 576px) and (max-width: 991.98px) {
  #countdown-video-split .countdown-timer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 20px 24px;
    justify-items: center;
  }
}

/* Desktop/laptop: 4 columnas que llenan el ancho disponible */
@media (min-width: 1200px) {
  #countdown-video-split .countdown-content-wrapper {
    max-width: none;
    /* evita cuello de botella del contenedor izquierdo */
    width: 100%;
  }

  #countdown-video-split .countdown-timer {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    /* 4 iguales */
    column-gap: 32px;
    /* separa horizontalmente */
    row-gap: 0;
    /* sin segunda fila */
    width: 100%;
  }

  #countdown-video-split .cd-item {
    width: 100%;
    /* que la tarjeta se estire en su celda */
    min-width: 0;
    /* anula min-width heredado que empuja el layout */
  }
}

/* 1366px: un poco menos de gap para que no salte a segunda fila */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #countdown-video-split .countdown-timer {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(128px, 1fr));
    column-gap: 28px;
  }

  #countdown-video-split .cd-item {
    min-width: 0;
  }
}

/* Tablets: 2 x 2 */
@media (min-width: 576px) and (max-width: 991.98px) {
  #countdown-video-split .countdown-timer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 20px 24px;
    justify-items: center;
  }
}

/* Móvil chico: 2 x 2 compacto */
@media (max-width: 575.98px) {
  #countdown-video-split .countdown-timer {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(110px, 1fr));
    gap: 14px 16px;
    justify-items: center;
  }
}


/* Móviles ch*


/* ===================================================================
   SALON
   =================================================================== */


#locations {
  width: 100%;
  background-color: #2c3a47;
  /* Fallback color */
}

.location-split {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.location-image {
  width: 50%;
  background-image: url();
  background-size: cover;
  background-position: center;
}

.location-content {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(2rem, 8vw, 6rem);
  color: #f2efe2;
  font-family: var(--font-locations);
}

.location-text-wrapper {
  max-width: 500px;
}

.location-content h2 {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1rem;
}

.location-content p {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.7;
  opacity: 0.85;
  margin-bottom: 2.5rem;
}

.location-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.btn-outline {
  display: inline-block;
  font-family: var(--font-locations);
  background-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.8);
  color: rgba(255, 255, 255, 0.8);
  padding: 0.8rem 1.8rem;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  border-radius: 50px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.btn-outline:hover {
  background-color: #f2efe2;
  border-color: #f2efe2;
  color: #2c3a47;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* --- Estilos para el Carrusel --- */

/* Ajusta el contenedor de la imagen para que el carrusel quepa dentro */
.location-image {
  width: 50%;
  /* Eliminamos el background-image de aquí */
}

/* El carrusel y su contenedor interno deben ocupar toda la altura */
#salonCarousel,
#churchCarousel,
.carousel-inner {
  height: 100%;
}

.carousel-item {
  height: 100%;
}

/* Estilo clave para que las imágenes cubran el espacio sin deformarse */
.carousel-item img {
  height: 100%;
  object-fit: cover;
  /* Recorta la imagen para llenar el espacio, manteniendo la proporción */
  object-position: center;
}

/* Responsive for Locations Section */
@media (max-width: 768px) {
  .location-split {
    /* Apila los elementos verticalmente (carrusel arriba, texto abajo) */
    flex-direction: column;
    /* Asegura que la sección no exceda la altura de la pantalla */
    height: 50vh;
    overflow: hidden;

  }

  .location-image,
  .location-content {
    width: 100%;
  }

  /* El carrusel ocupa el 70% del alto de la pantalla */
  .location-image {
    height: 70vh;
  }

  /* La sección de información ocupa el 30% del alto */
  .location-content {
    height: 30vh;
    text-align: center;
    /* Se reduce el padding para que el contenido quepa en el espacio reducido */
    padding: clamp(1rem, 4vh, 1.5rem) 1rem;
    /* Permite el scroll interno si el contenido llegara a desbordarse */
    overflow-y: auto;
  }

  /* Se ajusta el tamaño de los textos para el nuevo espacio */
  .location-content h2 {
    font-size: clamp(1.8rem, 5vw, 2.2rem);
    margin-bottom: 0.5rem;
  }

  .location-content p {
    font-size: clamp(0.85rem, 2.5vw, 0.95rem);
    line-height: 1.5;
    margin-bottom: 1rem;
  }

  .location-buttons {
    /* La propiedad flex ya los ordena horizontalmente */
    justify-content: center;
    gap: 0.75rem;
    /* Se reduce el espacio entre botones */
  }

  .btn-outline {
    /* Se hacen los botones un poco más pequeños */
    padding: 0.6rem 1.2rem;
    font-size: clamp(0.8rem, 2vw, 0.9rem);
  }
}

.hotelinfo {
  background-color: #415262;
  padding: 30px 150px;
  color: white;
  text-align: justify;
}

@media (max-width:500px) {
  .hotelinfo {
    background-color: #415262;
    padding: 30px 20px;
    color: white;
    text-align: justify;
    text-align-last: center;
  }
}

/* ===================================================================
   ESTILOS PARA LA SECCIÓN DE VIDEO DE AGRADECIMIENTO
   =================================================================== */
#video-thanks {
  overflow: hidden;
  /* Evita cualquier desbordamiento inesperado */
}

.video-split-layout {
  display: flex;
  flex-wrap: wrap;
  /* Permite que los elementos se apilen en móviles */
  width: 100%;
  height: 100vh;
  background-color: #f8f9fa;
  /* Un color de fondo suave */
}

.text-container,
.video-container {
  /* En móviles, cada uno ocupa el 100% del ancho y el 50% del alto */
  flex-basis: 100%;
  height: 50vh;
}

.text-container {
  display: flex;
  justify-content: center;
  /* Centrado horizontal */
  align-items: center;
  /* Centrado vertical */
  padding: 2rem;
}

.thanks-title {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  /* Tipografía responsiva */
  text-align: center;
  color: #343a40;
  line-height: 1.2;
}

.video-container {
  position: relative;
  overflow: hidden;
  /* Oculta partes del video que se salen del contenedor */
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  /* La propiedad clave para video vertical: lo expande para cubrir el área sin deformarlo */
  object-fit: cover;
}

/* --- Media Query para Desktop y Laptops --- */
@media (min-width: 768px) {

  .text-container,
  .video-container {
    /* En pantallas grandes, cada uno ocupa el 50% del ancho y el 100% de la altura */
    flex-basis: 50%;
    height: 100vh;
  }
}

/* ===================================================================
   IGLESIA SECTION
   =================================================================== */

#church {
  width: 100%;
  /* Un color de fondo ligeramente diferente para distinguirla visualmente */
  background-color: #3d4a57;

}

@media (max-width: 768px) {
  #church .location-split {
    flex-direction: column-reverse;
  }
}

@media (max-width: 500px) {
  #church {
    padding: 0px 0px 50px 0px
  }
}

/* =================================================================== ENCABEZADO DE SECCIÓN (PARA HOTELES Y OTROS)
   =================================================================== */
#hotels-header {
  padding: 2.5rem 0;
  background-color: #6e879f;
  text-align: center;
}

#hotels-header h2 {
  font-family: var(--font-heading);
  color: #000000;
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0;
}

#hotels {

  height: calc(100vh - 110px);
  width: 100%;
  overflow: hidden;
}

.hotel-container {
  display: flex;
  height: 100%;
  position: relative;
}

.hotel-column {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: flex 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.hotel-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  transform: scale(1.05);
  /* Ligero zoom inicial */
}

.hotel-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  transition: background 0.5s ease;
}

.hotel-name {
  font-family: var(--font-heading);
  color: #fff;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  white-space: nowrap;
  opacity: 0.9;
  transition: opacity 0.5s ease;
}

/* --- INTERACCIONES --- */
.hotel-column:hover .hotel-bg {
  transform: scale(1.1);
}

.hotel-column:hover .hotel-overlay {
  background: rgba(0, 0, 0, 0.35);
}

.hotel-container.expanded .hotel-column:not(.active) {
  flex: 0;
  width: 0;
}

.hotel-container .hotel-column.active {
  flex: 10;
  cursor: default;
}

/* --- PANEL DE DETALLES --- */
.hotel-details {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s 0.3s ease;
  z-index: 10;
  background: #ffffff;
}

.hotel-details.active {
  opacity: 1;
  pointer-events: auto;
}

.close-btn {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 2.5rem;
  font-weight: 300;
  color: #555;
  cursor: pointer;
  z-index: 11;
  transition: transform 0.2s ease;
}

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

.details-content {
  display: flex;
  height: 100%;
  width: 100%;
}

.details-photos {
  flex-basis: 50%;
  background-color: #f0f0f0;
  overflow: hidden;
}

.details-photos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.details-info {
  flex-basis: 50%;
  padding: clamp(2rem, 8vw, 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.details-info h3 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 1.5rem;
}

.details-info p {
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  margin-bottom: 2rem;
}

.details-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* --- ADAPTACIÓN PARA MÓVILES --- */
@media (max-width: 768px) {
  #hotels {
    overflow-y: auto;
  }

  .hotel-container {
    flex-direction: column;
  }

  .hotel-column {
    flex-basis: 25%;
    width: 100%;
  }

  .hotel-name {
    writing-mode: horizontal-tb;
    transform: translate(-50%, -50%);
    white-space: normal;
    text-align: center;
    width: 80%;
  }

  .hotel-container.expanded .hotel-column.active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 5;
  }

  .details-content {
    flex-direction: column;
  }

  .details-photos,
  .details-info {
    flex-basis: 50%;
    width: 100%;
  }

  .details-info {
    justify-content: start;
    padding: 2.5rem 1.5rem;
    text-align: center;
  }

  .details-buttons {
    justify-content: center;
  }
}


/* ===================================================================
   ITINERARIO SECTION
   =================================================================== */
#itinerary {
  background-color: #b4ded7;
  /* Un color de fondo neutro y suave */
  font-family: var(--font-body);
  color: #2e343b;
  padding: 4rem 0;
  min-height: 100vh;
}

.itinerary-title {
  font-family: var(--font-heading);
  color: #212529;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

.itinerary-subtitle {
  font-family: var(--font-serif-alt);
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* La línea central de la línea de tiempo */
.timeline::after {
  content: '';
  position: absolute;
  width: 2px;
  background-color: #dee2e6;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -1px;
}

.timeline-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
}

/* Círculo en la línea de tiempo */
.timeline-marker {
  position: absolute;
  top: 28px;
  width: 48px;
  height: 48px;
  background-color: #ffffff;
  border: 2px solid #dee2e6;
  border-radius: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.timeline-marker svg {
  width: 24px;
  height: 24px;
  color: #8395a7;
  /* Un color suave para los íconos */
  transition: color 0.3s ease;
}

/* Alineación de los items */
.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
}

.timeline-item:nth-child(even) {
  left: 50%;
  text-align: left;
}

/* Posicionamiento de los marcadores */
.timeline-item:nth-child(odd) .timeline-marker {
  right: -24px;
}

.timeline-item:nth-child(even) .timeline-marker {
  left: -24px;
}

.timeline-content {
  padding: 20px 30px;
  position: relative;
}

.timeline-time {
  font-weight: 700;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: #6c757d;
  letter-spacing: 0.05em;
}

.timeline-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  margin-top: 5px;
  color: #343a40;
}

p.timeline-location {
  font-family: var(--font-serif-alt);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
  margin-top: 0.5rem;
  color: #343a40;
}

/* Efectos al pasar el cursor */
.timeline-item:hover .timeline-marker {
  border-color: #5d6a74;
  transform: scale(1.1);
}

.timeline-item:hover .timeline-marker svg {
  color: #5d6a74;
}

/* --- Responsive para Móviles --- */
@media screen and (max-width: 768px) {

  /* Mueve la línea al lado izquierdo */
  .timeline::after {
    left: 24px;
  }

  /* Todos los items a la derecha de la línea */
  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
    text-align: left;
    /* Alinea todo el texto a la izquierda */
  }

  /* Ajusta posición para que no se sobreponga */
  .timeline-item:nth-child(even) {
    left: 0;
  }

  /* Posiciona todos los marcadores sobre la línea izquierda */
  .timeline-marker,
  .timeline-item:nth-child(odd) .timeline-marker,
  .timeline-item:nth-child(even) .timeline-marker {
    left: 0;
    margin-left: 0;
  }

  .timeline-content {
    padding: 20px 0 20px 20px;
  }
}

/* ===================================================================
   ACTIVITIES SECTION
   =================================================================== */
#activities {
  background-color: #a5c2bf;
  ;
  color: #495057;
  padding: 4rem 0;
}

.activities-header .activities-title {
  font-family: var(--font-heading);
  color: #212529;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

.activities-header .activities-subtitle {
  font-family: var(--font-serif-alt);
  font-size: clamp(1rem, 2vw, 1.2rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.activities-intro {
  max-width: 800px;
  margin: 0 auto 4rem auto;
  text-align: center;
}

.activities-intro>p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}

.how-to-get-there {
  background-color: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
}

.how-to-get-there h3 {
  font-family: var(--font-heading);
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.transport-options {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.transport-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
}

.transport-item svg {
  color: #8395a7;
  width: 28px;
  height: 28px;
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.activity-card {
  text-align: center;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.activity-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.activity-card .card-icon {
  margin-bottom: 1.5rem;
}

.activity-card .card-icon svg {
  width: 48px;
  height: 48px;
  color: #5d6a74;
}

.activity-card h3 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  color: #212529;
  margin-bottom: 0.5rem;
}

.activity-card p {
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.9;
}

/* --- Responsive para Móviles y Tablets --- */
@media screen and (max-width: 992px) {
  .activities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  #activities {
    padding: 3rem 0;
  }

  .activities-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Estilos para Botones de Navegación --- */
.navigation-buttons {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  /* Centra los botones en su contenedor */
}

.btn-nav {
  padding: 12px 24px;
  border-radius: 10px;
  /* Bordes completamente redondeados */
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  display: inline-block;
  text-align: center;
  transition: transform 0.2s ease-out, background-color 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-nav:hover {
  transform: translateY(-3px);
  color: #fff;
}

/* Estilo específico para Google Maps */
.btn-maps {
  background-color: #434952;
  /* Color oficial de Google */
}

.btn-maps:hover {
  background-color: #357ae8;
}


/* Estilo específico para Waze */
.btn-waze {
  background-color: #455243;
  /* Color oficial de Waze */
}

.btn-waze:hover {
  background-color: #2bafdb;
}

/* =======================================================
   ESTILOS PARA DESCARGA DE PDF EN ACTIVITIES
   ======================================================= */
.pdf-download-container {
  margin-top: 2.5rem;
  /* Espacio para separarlo de los botones de Waze/Maps */
  text-align: center;
  /* Centra el botón */
}

.pdf-download-link {
  display: inline-flex;
  /* Alinea el icono y el texto horizontalmente */
  align-items: center;
  /* Centra verticalmente el icono y el texto */
  gap: 0.75rem;
  /* Espacio entre el icono y el texto */
  padding: 12px 24px;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  /* Borde sutil */
  border-radius: 50px;
  /* Bordes completamente redondeados */
  color: #343a40;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.pdf-download-link:hover {
  transform: translateY(-3px);
  /* Efecto de "levantar" al pasar el mouse */
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: #ced4da;
  color: #212529;
}

.pdf-download-link svg {
  stroke: #495057;
  /* Color del icono */
}


/* ===================================================================
   SECCIÓN: GALERÍA
   =================================================================== */
#galeria {
  background: url('imagenes/bg_gal2.webp') center/cover no-repeat;
}

.polaroid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-rest);
}

.polaroid {
  width: 100%;
  max-width: var(--polaroid-w);
  margin: 0 auto;
  padding: clamp(10px, 1.8vw, 14px);
  background: #fff;
  border-radius: var(--polaroid-r);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: rotate(var(--rot, 0deg));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.polaroid:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 32px rgba(0, 0, 0, 0.16);
}

.polaroid:nth-child(3n + 1) {
  --rot: -1.2deg;
}

.polaroid:nth-child(3n + 2) {
  --rot: 0.8deg;
}

.polaroid:nth-child(3n + 3) {
  --rot: -0.4deg;
}

.polaroid-photo {
  position: relative;
  overflow: hidden;
  background: #f7f7f7;
  border-radius: calc(var(--polaroid-r) - 4px);
  aspect-ratio: 1 / 1;
}

.polaroid-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.polaroid figcaption {
  text-align: center;
  padding-top: 0.6rem;
  font-size: 0.95rem;
  color: #333;
}

/* --- Media Queries GALERÍA --- */
@media (max-width: 992px) {
  .polaroid-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  #galeria {
    background-image: url('imagenes/bg_gal_m.webp');
    background-size: contain;
  }

  .polaroid-grid {
    grid-template-columns: repeat(2, 1fr);
    /* Mantenemos 2 columnas en móvil */
  }
}

@media (max-width: 450px) {
  .polaroid-grid {
    gap: 1rem;
  }

  .polaroid {
    padding: clamp(6px, 3.5vw, 8px);
  }

  .polaroid figcaption {
    font-size: clamp(1rem, 3.4vw, 1.1rem);
  }
}

/* ===================================================================
   SECCIÓN: MESA DE REGALOS
   =================================================================== */
#gift-registry {
  background-color: #f8f6f3;
  color: #37474f;

}

.gift-registry-header .gift-registry-title {
  font-family: var(--font-heading);
  color: #212529;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}

.gift-registry-header .gift-registry-subtitle {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.1rem);
  max-width: 650px;
  margin: 0 auto;
  opacity: 0.8;
}

.gift-registry-content {
  max-width: 500px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 2.5rem clamp(1.5rem, 5vw, 3rem);
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
}

.liverpool-logo {
  max-width: 100px;
  height: auto;
  margin-bottom: 1.5rem;
}

.event-info {
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.event-number {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  background-color: #f8f6f3;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  display: inline-block;
  margin-bottom: 2rem;
  border: 1px dashed #ddd;
}

.btn-liverpool {
  display: inline-block;
  background-color: #e10098;
  /* Color corporativo de Liverpool */
  color: #fff;
  padding: 12px 28px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.2s ease-in-out;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.9rem;
}

.btn-liverpool:hover {
  background-color: #c80086;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(225, 0, 152, 0.25);
  color: #fff;
}

/* ===================================================================
   SECCIÓN: REGISTRO (FORMULARIO)
   =================================================================== */
#registro .container {
  max-width: 760px;
}

.form-registro {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(3px);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: clamp(16px, 3.2vw, 28px);
}

.form-registro .hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.form-registro .fr-row {
  display: grid;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.form-registro label,
.form-registro legend {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.form-registro input[type="text"],
.form-registro input[type="tel"],
.form-registro input[type="email"] {
  width: 100%;
  height: 44px;
  padding: 0 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-registro input:focus {
  border-color: rgba(0, 0, 0, 0.35);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.form-registro .fr-rsvp {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 0;
  padding: 0;
  margin: 0.75rem 0 1rem;
}

.form-registro .rsvp-opt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  user-select: none;
}

.form-registro .rsvp-opt input {
  width: 18px;
  height: 18px;
}

.form-registro .fr-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.form-registro .btn-enviar {
  appearance: none;
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  padding: 0.8rem 1.25rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: #374550;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  transition: transform 0.06s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.form-registro .btn-enviar:hover {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
}

.form-registro .btn-enviar:active {
  transform: translateY(1px);
  opacity: 0.92;
}

/* --- Media Queries FORMULARIO --- */
@media (max-width: 480px) {
  .form-registro {
    padding: 14px;
  }

  .form-registro .fr-rsvp {
    flex-wrap: wrap;
    gap: 0.6rem 0.9rem;
  }
}

/* ===================================================================
   CÓDIGO DE VESTIMENTA
   =================================================================== */

#dress-code {
  background-color: #fcfaf8;
  /* Coincide con el fondo general si es necesario */
  padding: 100px 0;
  /* Espaciado estándar de tus secciones */
  text-align: center;
}

/* Reutiliza tu clase .section-title, no necesita estilos nuevos */

.dress-code-container {
  display: flex;
  justify-content: center;
  /* Centra las opciones */
  align-items: flex-start;
  /* Alinea arriba si tienen diferente altura */
  gap: 4rem;
  /* Espacio entre las opciones */
  margin-top: 40px;
  /* Espacio después del título */
  flex-wrap: wrap;
  /* Permite que se apilen en pantallas pequeñas */
}

.dress-code-option {
  flex-basis: 300px;
  /* Ancho base de cada opción */
  max-width: 350px;
  /* Ancho máximo */
  padding: 20px;
}

.dress-code-icon {
  margin-bottom: 1.5rem;
}

.dress-code-icon i {
  font-size: 4.5rem;
  /* Tamaño del icono */
  color: #b99a7b;
  /* Color principal (ajusta si es diferente) */
}

.dress-code-option h3 {
  font-family: var(--font-heading);
  /* Fuente Lora para títulos de opción */
  font-size: 1.8rem;
  color: #2d2d2d;
  /* Color de texto oscuro */
  margin-bottom: 0.75rem;
}

.dress-code-option p {
  font-family: var(--font-body);
  /* Fuente Plus Jakarta Sans para descripción */
  font-size: 1rem;
  color: #666;
  /* Color de texto secundario */
  line-height: 1.6;
}

.dress-code-note {
  margin-top: 3rem;
  /* Espacio sobre la nota adicional */
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
}

/* --- Responsive para Código de Vestimenta --- */
@media (max-width: 768px) {
  .dress-code-container {
    gap: 2rem;
    /* Reduce el espacio en pantallas medianas */
  }

  .dress-code-option {
    flex-basis: 250px;
    /* Reduce el ancho base */
  }

  .dress-code-icon i {
    font-size: 4rem;
    /* Icono ligeramente más pequeño */
  }

  .dress-code-option h3 {
    font-size: 1.6rem;
  }

  .dress-code-option p {
    font-size: 0.95rem;
  }
}

@media (max-width: 576px) {
  #dress-code {
    padding: 80px 0;
    /* Menos padding en móviles */
  }

  .dress-code-container {
    flex-direction: column;
    /* Apila las opciones verticalmente */
    align-items: center;
    /* Centra las opciones apiladas */
    gap: 2.5rem;
  }

  .dress-code-option {
    flex-basis: 100%;
    /* Ocupa todo el ancho disponible */
    max-width: 320px;
    /* Limita el ancho máximo en móvil */
  }
}


/* ===================================================================
   SECCIÓN: FOOTER
   =================================================================== */
.thanks-footer {
  padding: clamp(28px, 5vw, 56px) 0 clamp(18px, 3.6vw, 32px);
  color: #fff;
  background: radial-gradient(1200px 600px at 50% -20%, rgba(255, 255, 255, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(55, 69, 80, 0.9) 0%, rgba(55, 69, 80, 0.92) 100%);
}

.thanks-footer .container {
  max-width: 1040px;
}

.tf-wrap {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(14px, 3vw, 28px);
  align-items: center;
}

.tf-msg h3 {
  margin: 0 0 0.25rem 0;
  font-size: clamp(1.2rem, 3.2vw, 1.7rem);
}

.tf-msg p {
  margin: 0;
  opacity: 0.95;
  font-size: clamp(0.95rem, 2.2vw, 1.05rem);
}

.tf-cta {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.thanks-footer a.btn-primary,
.thanks-footer a.btn-ghost {
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 12px;
  padding: 0.75rem 1.1rem;
  transition: transform 0.06s ease, box-shadow 0.2s ease, opacity 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.thanks-footer a.btn-primary {
  background: #ffffff;
  color: #374550;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.thanks-footer a.btn-primary:hover {
  transform: translateY(1px);
  opacity: 0.96;
}

.thanks-footer a.btn-ghost {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}

.thanks-footer a.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.tf-bottom {
  margin-top: clamp(14px, 3vw, 24px);
  padding-top: clamp(10px, 1.8vw, 14px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  text-align: center;
  opacity: 0.85;
}

.tf-bottom small {
  font-size: 0.9rem;
}

/* --- Media Queries FOOTER --- */
@media (max-width: 768px) {
  .tf-wrap {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tf-cta {
    justify-content: center;
  }
}

/* === Floating Language FAB (EN/US) | inline SVG, sin archivo externo === */
.lang-fab{
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  z-index: 1060;
  background-color: #fff;
  /* Bandera de EE. UU. dentro de un círculo (SVG inline) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Ccircle cx='32' cy='32' r='32'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23c)'%3E%3Crect width='64' height='64' fill='%23b22234'/%3E%3Cg fill='%23ffffff'%3E%3Crect y='4' width='64' height='4'/%3E%3Crect y='12' width='64' height='4'/%3E%3Crect y='20' width='64' height='4'/%3E%3Crect y='28' width='64' height='4'/%3E%3Crect y='36' width='64' height='4'/%3E%3Crect y='44' width='64' height='4'/%3E%3Crect y='52' width='64' height='4'/%3E%3C/g%3E%3Crect width='26' height='28' fill='%233c3b6e'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.12);
  border: 2px solid #fff;
  display: inline-block;
  outline: none;
}
.lang-fab:hover,
.lang-fab:focus{
  transform: translateY(-1px) scale(1.04);
  box-shadow: 0 10px 24px rgba(0,0,0,.22), 0 3px 8px rgba(0,0,0,.14);
}
@media (hover:none){ .lang-fab:hover{ transform: none; } }
@media (prefers-reduced-motion: reduce){ .lang-fab{ transition: none !important; } }