/* =====================================================
   VARIABLES GLOBALES — colores, sombras, radios y transición
   Cambia aquí para ajustar toda la paleta de la invitación
   ===================================================== */
:root {
  --bg-ivory: #ffffff;                              /* fondo principal blanco */
  --bg-warm-white: #FFFDFB;                         /* fondo cálido para tarjetas y formularios */
  --terracotta: #9e4319;                            /* color principal terracota (botones, títulos, acentos) */
  --terracotta-hover: #9e4319;                      /* color terracota al pasar el mouse (hover) */
  --deep-blue: #000000;                             /* color de texto principal */
  --night-blue: #000000;                            /* color de texto en modo oscuro/mosaico */
  --soft-gold: #D8B98A;                             /* dorado suave (decorativo) */
  --line: #D9D4CF;                                  /* color de líneas divisorias y bordes */
  --shadow-soft: 0 16px 30px rgba(24, 38, 59, 0.10); /* sombra suave para tarjetas */
  --shadow-btn: 0 10px 22px rgba(196, 88, 36, 0.28); /* sombra para botones terracota */
  --radius-card: 22px;                              /* radio de esquinas para tarjetas */
  --radius-pill: 999px;                             /* radio extremo para botones tipo pastilla */
  --transition: 220ms ease;                         /* velocidad de todas las animaciones */
}

/* Incluye padding y border dentro del ancho declarado de cada elemento */
* {
  box-sizing: border-box;
}

/* Activa el desplazamiento suave al hacer clic en anclas internas (#seccion) */
html {
  scroll-behavior: smooth;
}

/* Estilos base del cuerpo de la página */
body {
  margin: 0;                             /* elimina margen predeterminado del navegador */
  font-family: "Montserrat", sans-serif; /* fuente base para todo el sitio */
  color: var(--deep-blue);              /* color de texto por defecto */
  background: var(--bg-ivory);          /* fondo global de la página */
  line-height: 1.6;                     /* interlineado base */
  padding-bottom: 0; /* espacio absorbido por el footer */
}

/* Imágenes en bloque y responsivas por defecto */
img {
  display: block;   /* evita el espacio en blanco debajo de imágenes inline */
  width: 100%;      /* ocupa todo el ancho del contenedor */
  height: auto;     /* mantiene proporción original */
}

/* Los enlaces heredan el color del padre y no muestran subrayado */
a {
  color: inherit;
  text-decoration: none;
}

/* Contenedor principal de la invitación — limita el ancho máximo y centra la carta */
.invite-shell {
  max-width: 860px;                                  /* ancho máximo de la invitación */
  margin: 0 auto;                                    /* centra horizontalmente */
  background: var(--bg-ivory);                       /* fondo de la carta */
  box-shadow: 0 0 0 1px rgba(217, 212, 207, 0.25);  /* borde muy sutil alrededor */
  transition: transform 520ms ease, filter 520ms ease;
}

/* Ancho estándar para el contenido de las secciones */
.container {
  width: min(92%, 760px); /* máximo 760px, mínimo 92% del viewport (responsivo) */
  margin-inline: auto;    /* centra horizontalmente */
}

/* Ancho más estrecho para textos de lectura (más cómodo en pantalla) */
.narrow {
  width: min(88%, 700px);
}

/* Espacio vertical interno de cada sección (arriba y abajo) */
.section {
  padding: 4.5rem 0; /* ← ajusta el espaciado vertical entre secciones */
}

/* =====================================================
   SECCIÓN HERO (portada principal)
   ===================================================== */
/* Portada de pantalla completa con imagen de fondo */
.hero {
  position: relative;             /* ancla para los elementos posicionados dentro */
  min-height: 100vh;              /* ← altura mínima de la portada (100% de la pantalla) */
  background-size: cover;         /* la imagen cubre todo el contenedor */
  background-position: center;    /* imagen centrada */
  display: flex;
  align-items: flex-end;          /* el contenido se pega al borde inferior */
  justify-content: center;
}

/* Degradado oscuro sobre la imagen de fondo del hero */
.hero-overlay {
  position: absolute;
  inset: 0;                       /* cubre toda la superficie del hero */
  background: linear-gradient(
    180deg,
    rgba(196, 88, 36, 0.34) 0%,  /* terracota semitransparente arriba */
    rgba(196, 88, 36, 0.34) 58%,
    rgba(255, 255, 255, 0.97) 100% /* casi blanco abajo para hacer transición suave */
  );
}

/* Texto del hero centrado — nombres y subtítulo */
.hero-content {
  position: relative;
  z-index: 2;                         /* se muestra por encima del overlay */
  width: 100%;
  text-align: center;
  padding: 0 1.25rem 2.6rem;          /* ← espacio inferior entre texto y borde */
}

/* Nombres de la pareja con fuente script grande */
.couple-names {
  margin: 0;
  font-family: "Great Vibes", cursive;                    /* fuente script caligráfica */
  font-size: clamp(3rem, 10vw, 5.8rem);                   /* ← tamaño responsivo de los nombres */
  color: #fff;
  font-weight: 400;
  line-height: 0.95;                                      /* interlineado ajustado para fuente script */
  text-shadow: 0 12px 24px rgba(0, 0, 0, 0.26);           /* sombra de texto para legibilidad */
}

/* Subtítulo decorativo debajo de los nombres */
.hero-title {
  margin: 0.7rem 0 1.2rem;
  color: #fff;
  font-size: clamp(1.25rem, 3.5vw, 2rem); /* ← tamaño responsivo del subtítulo */
  font-family: "Cormorant Garamond", serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;                  /* ← espaciado entre letras del subtítulo */
  font-weight: 600;
  text-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}

/* Botón flecha para hacer scroll hacia abajo */
.scroll-indicator {
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;                                     /* ocupa todo el ancho para ser fácil de tocar */
  transition: transform var(--transition), opacity var(--transition);
}

.scroll-indicator svg {
  width: clamp(1.6rem, 5vw, 2.2rem); /* ← tamaño del ícono de la flecha */
  height: auto;
  opacity: 0.85;
}

.scroll-indicator:hover {
  transform: translateY(3px); /* se desplaza levemente hacia abajo al hacer hover */
  opacity: 0.9;
}

/* Sección introductoria con texto de bienvenida y reproductor de música */
.intro {
  padding: 2.8rem 0 4rem; /* ← espacio arriba y abajo de la sección intro */
  text-align: center;
  background: var(--bg-ivory);
}

/* Contenedor del reproductor de música */
.music-controls {
  margin-bottom: 1.6rem;   /* ← separación del reproductor con el texto de abajo */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;             /* ← espacio entre la línea decorativa y el reproductor */
}

/* Línea decorativa con punto central encima del reproductor */
.music-line {
  width: 160px;            /* ← ancho de la línea decorativa */
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--night-blue) 30%, var(--night-blue) 70%, transparent 100%);
  position: relative;
}

/* Punto central de la línea decorativa */
.music-line::after {
  content: "";
  position: absolute;
  width: 12px;            /* ← tamaño del punto central */
  height: 12px;
  border-radius: 50%;
  background: var(--night-blue);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Cápsula del reproductor de música (barra con botones) */
.music-player {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;                                     /* espacio entre los botones del reproductor */
  background: var(--bg-warm-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);               /* forma de pastilla */
  padding: 0.42rem 0.65rem;
  box-shadow: 0 8px 16px rgba(24, 38, 59, 0.08);  /* sombra suave debajo del reproductor */
}

/* Botones individuales del reproductor (anterior, siguiente) */
.music-player-btn {
  border: 0;
  background: transparent;
  color: var(--night-blue);
  border-radius: 50%;
  width: 40px;              /* ← tamaño de los botones laterales del reproductor */
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), transform var(--transition);
  line-height: 1;
  flex-shrink: 0;
}

/* Botón desactivado (cuando no hay cancion anterior/siguiente) */
.music-player-btn[aria-disabled="true"] {
  opacity: 0.45;  /* atenuado para indicar que no está disponible */
  cursor: default;
}

.music-player-btn:not([aria-disabled="true"]):hover {
  background: rgba(196, 88, 36, 0.08); /* fondo terracota suave al hover */
  color: var(--terracotta);
  transform: scale(1.12);              /* le­simo aumento de tamaño al hover */
}

/* Botón principal de play/pausa (más grande, terracota) */
.music-player-btn.is-main {
  width: 46px;            /* ← tamaño del botón play principal */
  height: 46px;
  background: var(--terracotta);
  color: #fff;
  font-size: 1rem;
  box-shadow: var(--shadow-btn);
}

.music-player-btn.is-main:hover {
  background: var(--terracotta-hover);
  transform: scale(1.08);
}

/* Texto tipo script grande ("¡Los novios se casan!") */
.verse {
  margin: 0 0 1rem;
  color: var(--terracotta);
  font-family: "Great Vibes", cursive;
  font-size: clamp(2rem, 7.5vw, 3.5rem); /* ← tamaño del verso decorativo */
  font-weight: 400;
  line-height: 1;
}

/* Texto de bienvenida introductorio */
.intro-copy {
  margin: 0 auto;
  max-width: 580px;                                   /* ← ancho máximo del texto de bienvenida */
  color: var(--deep-blue);
  font-size: clamp(1rem, 2.4vw, 1.25rem);             /* ← tamaño del texto de bienvenida */
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
}

/* =====================================================
   SECCIÓN TIMER (cuenta regresiva)
   ===================================================== */
/* Grid de 2x2 en móvil y 4 columnas en escritorio */
.countdown {
  margin: 2rem auto;                                /* ← separación vertical del contador */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columnas en móvil */
  gap: 1rem 1.3rem;     /* ← espacio vertical/horizontal entre los círculos del contador */
  max-width: 530px;     /* ← ancho máximo del bloque de cuenta regresiva */
}

/* Cada unidad de tiempo (días, horas, minutos, segundos) */
.count-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem; /* ← espacio entre el círculo y la etiqueta de texto */
}

/* Círculo terracota con el número de la cuenta */
.count-circle {
  width: 68px;              /* ← tamaño del círculo del contador */
  aspect-ratio: 1/1;        /* siempre perfecto crculo */
  border-radius: 50%;
  background: var(--terracotta);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-btn);
}

.count-circle span {
  font-size: 1.62rem; /* ← tamaño del número dentro del círculo */
  font-weight: 700;
}

/* Etiqueta debajo del círculo ("DÍAS", "HORAS", etc.) */
.count-item small {
  color: var(--terracotta);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.82rem; /* ← tamaño de la etiqueta debajo del círculo */
}

/* Botón genérico base (estilos comunes a todos los botones) */
.btn {
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.82rem 1.5rem;    /* ← padding interno de todos los botones */
  border-radius: var(--radius-pill);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
}

.btn:hover {
  transform: translateY(-2px); /* sube ligeramente al pasar el mouse */
}

/* Botón principal terracota con sombra */
.btn-main {
  background: var(--terracotta);
  color: #fff;
  box-shadow: var(--shadow-btn);
}

.btn-main:hover {
  background: var(--terracotta-hover);
}

/* Botón secundario blanco-crema con sombra offset */
.btn-soft {
  background: var(--bg-warm-white);
  color: var(--deep-blue);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 8px 8px 0 rgba(36, 58, 90, 0.10); /* efecto de sombra desplazada */
  font-weight: 600;
}

.btn-soft:hover {
  box-shadow: 10px 10px 0 rgba(36, 58, 90, 0.13); /* sombra más pronunciada al hover */
}

/* ============================================================
   THANKS HEADER  —  "GRACIAS A" flotando sobre "Dios"
   ============================================================ */

/* Contenedor: centrado, empuja negativamente hacia el grid */
.thanks-header {
  text-align: center;
  margin-bottom: 2rem;   /* ajusta solapamiento sobre fotos */
  position: relative;
  z-index: 2;
}

/* Wrapper del título script ("Dios") */
.script-title {
  margin: 0;
  display: block;
  line-height: 1;
}

/* Letras "D" e "ios" del título grande "Dios" */
.god-d,
.god-ios {
  color: #B35A25;              /* color café-naranja de "Dios" */
  font-family: "Great Vibes", cursive;
  font-size: clamp(5rem, 24vw, 9rem); /* ← tamaño de la palabra "Dios" */
  font-weight: 400;
  line-height: 0.85;
}

/* Solo la D, sin posicionamiento relativo */
.god-d {
  display: inline-block;
}

/* "ios" tiene posición relativa para anclar el kicker flotante encima */
.god-ios {
  position: relative;
  display: inline-block;
}

/* "GRACIAS A" posicionado encima de "ios", desplazado a la derecha */
.kicker {
  position: absolute;
  top: clamp(0.08em, 0.5vw, 0.14em);   /* distancia desde el borde superior de "ios" */
  left: 5%;                            /* desplazamiento derecha sobre "ios" */
  margin: 0;
  color: #8B1532;              /* vino/burdéos para "GRACIAS A" */
  font-family: "Cinzel", serif;
  font-size: clamp(0.55rem, 2.2vw, 0.9rem); /* ← tamaño del texto "GRACIAS A" */
  font-weight: 600;
  letter-spacing: 0.22em;               /* ← espaciado entre letras de "GRACIAS A" */
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}

/* Texto destacado en la sección de agradecimiento */
.thanks-highlight {
  color: var(--terracotta);
  font-weight: 600;
}

/* Grid de 3 fotos: 1 grande a la izquierda + 2 pequeñas a la derecha */
.thanks-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.06fr 1fr; /* ← proporción columna izquierda/derecha de la galeria */
  grid-template-areas:
    "left top"
    "left mid";
  gap: 0.9rem; /* ← espacio entre las fotos del collage */
}

/* Cada foto del collage */
.tile {
  margin: 0;
  border-radius: 0;
  overflow: hidden;
}

/* Asignación de posiciones en el grid */
.tile-left { grid-area: left; }         /* foto grande izquierda */
.tile-right-top { grid-area: top; }     /* foto pequeña arriba derecha */
.tile-right-mid { grid-area: mid; }     /* foto pequeña abajo derecha */

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* recorta la imagen para llenar el espacio sin deformarla */
}

/* Texto descriptivo debajo del collage */
.thanks-copy {
  margin: 1.6rem 0;
  color: var(--night-blue);
  font-size: 1.05rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  text-align: justify;
}

/* Fila de 2 fotos horizontales en la parte inferior */
.thanks-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}

/* =====================================================
   SECCIÓN PADRES (familia)
   ===================================================== */
/* Contenedor principal de la sección de padres */
.parents {
  padding-top: 2rem; /* ← espacio superior de la sección padres */
}

/* Texto introductorio centrado de la sección padres */
.parents-intro {
  margin: 0 auto 1.4rem;                         /* ← separación inferior del texto introductorio */
  color: var(--deep-blue);
  font-size: 1rem;
  font-family: "Cormorant Garamond", serif;
  text-align: center;
  font-weight: 400;
  max-width: 640px;
  line-height: 1.6;
}

.parents-intro strong {
  font-weight: 700;
}

/* Nota al pie en itálica debajo de las tarjetas de padres */
.parents-note {
  margin: 1.2rem auto 0;
  color: var(--deep-blue);
  font-size: 1rem;
  font-family: "Cormorant Garamond", serif;
  text-align: center;
  font-weight: 400;
  font-style: italic;
  max-width: 640px;
  line-height: 1.6;
}

/* Grid de 3 columnas: tarjeta izq | línea divisoria | tarjeta der */
.parents-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* auto = la línea divisoria toma su ancho natural */
  align-items: start;
  gap: 0;
  margin-bottom: 0;
}

/* Línea vertical divisoria entre los dos grupos de padres */
.parents-divider {
  width: 2.5px;          /* ← grosor de la línea divisoria */
  align-self: stretch;   /* se estira para cubrir toda la altura */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--terracotta) 18%,
    var(--terracotta) 82%,
    transparent 100%    /* se desvanece en los extremos */
  );
  margin: 0 1rem;        /* ← espacio lateral entre la línea y las tarjetas */
  opacity: 0.55;
}

/* Tarjeta individual de un padre/madre */
.parent-card {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  text-align: center;
  box-shadow: none;
}

.parent-card img {
  border-radius: 0;
  aspect-ratio: 4/3;    /* ← proporción de la foto del padre/madre */
  object-fit: cover;
  width: 100%;
}

/* Nombre del padre con fuente script */
.parent-card h3 {
  margin: 0.7rem 0 0.25rem;
  color: var(--terracotta);
  font-family: "Great Vibes", cursive;
  font-size: clamp(1.6rem, 5vw, 2.2rem); /* ← tamaño del nombre del padre */
  line-height: 1;
  font-weight: 400;
}

/* Rol del padre ("Papá de Marco", etc.) */
.parent-card p {
  margin: 0;
  color: var(--terracotta);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(0.95rem, 2.8vw, 1.15rem); /* ← tamaño del rol debajo del nombre */
  font-weight: 600;
  line-height: 1.4;
}

/* =====================================================
   SECCIÓN EVENTO (fecha, lugar y hora)
   ===================================================== */
/* Imagen de fondo con overlay oscuro para el bloque de evento */
.event {
  position: relative;
  min-height: 480px;            /* ← altura mínima de la sección de evento */
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;          /* centra el contenido vertical y horizontalmente */
  margin-top: 0.8rem;
}

/* Overlay con gradiente que oscurece la imagen del evento */
.event-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(24, 38, 59, 1.00) 0%,   /* azul oscuro sólido arriba */
    rgba(24, 38, 59, 0.62) 55%,
    rgba(24, 38, 59, 0.52) 65%,
    rgb(254, 255, 255) 100%       /* blanco abajo para transición */
  );
}

/* Bloque de texto sobre la imagen del evento */
.event-content {
  position: relative;
  z-index: 1;                   /* se muestra sobre el overlay */
  text-align: center;
  color: #fff;
  padding: 2rem 1rem;           /* ← padding interno del bloque del evento */
}

/* Título "LUGAR" o "CEREMONIA" encima de los datos */
.event-title {
  margin: 0 0 0.2rem;
  color: #ffffff;
  font-size: clamp(0.95rem, 3vw, 1.3rem); /* ← tamaño del título de evento */
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;                  /* ← espaciado entre letras del título */
  font-weight: 600;
}

/* Toda la fecha en script: Domingo • 12 • Abril */
.event-date {
  margin: 0 0 0.5rem;
  font-family: "Great Vibes", cursive;
  font-size: clamp(2.8rem, 10vw, 5rem);
  line-height: 1;
  color: #fff;
}

.event-day-name,
.event-month {
  font-family: "Great Vibes", cursive;
}

.event-day-number {
  font-family: "Great Vibes", cursive;
}

.event-sep {
  display: inline-block;
  font-family: "Cormorant Garamond", serif;
  font-size: 0.7em;
  vertical-align: middle;
  margin-inline: 0.28rem;
}

.event-time-label {
  margin: 0.6rem 0 0;
  color: #f6e9d9;
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  font-family: "Cinzel", serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-weight: 600;
}

.event-time-value {
  margin: 0 0 1.4rem;
  color: #fff;
  font-family: "Great Vibes", cursive;
  font-size: clamp(3.2rem, 12vw, 5.5rem);
  line-height: 1;
}

.event-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.95);
  color: var(--deep-blue);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 0.65rem 1.5rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.event-btn:hover {
  background: #fff;
}

.event-btn svg {
  color: var(--terracotta);
  flex-shrink: 0;
}

.event-venue {
  margin: 0.9rem 0 0;
  color: rgba(255,255,255,0.92);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-weight: 400;
}

.event-venue strong {
  font-weight: 700;
  color: #fff;
}

/* =====================================================
   SECCIÓN CONFIRMACIÓN DE ASISTENCIA
   ===================================================== */
/* Contenedor principal del formulario RSVP */
.confirm {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--bg-ivory);
}

.confirm-overlay {
  display: none; /* overlay desactivado, no se usa actualmente */
}

/* Imagen decorativa con degradado encima — sólo afecta esta capa */
.confirm-img {
  position: relative;
  height: clamp(220px, 55vw, 380px); /* ← altura de la imagen decorativa del formulario */
  background-size: 150% auto;        /* ← zoom de la imagen de fondo */
  background-position: top center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Degradado blanco sobre la imagen de fondo del formulario */
.confirm-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;                              /* encima de la imagen */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1.00) 0%,          /* blanco sólido arriba */
    rgba(255, 255, 255, 0.70) 40%,
    rgba(255, 255, 255, 0.50) 72%,
    rgba(255, 255, 255, 1.00) 100%          /* blanco sólido abajo */
  );
  pointer-events: none;
}

.confirm-img-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 1rem 1.5rem 1.5rem;
}

/* Contenido del formulario RSVP */
.confirm-content {
  position: relative;
  z-index: 2;
  padding-top: 2rem; /* ← espacio arriba del formulario */
}

/* Texto descriptivo en el formulario */
.confirm-copy {
  margin: 0 auto 1rem;
  text-align: center;
  color: var(--deep-blue);
  font-size: 1.06rem;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  max-width: 640px;
}

.confirm-copy.strong {
  font-weight: 700;
  font-style: italic;
  font-size: 1.15rem; /* ← tamaño del texto en negrita/itálica del formulario */
}

/* Fecha límite para confirmar */
.deadline {
  margin: 0.9rem 0 1.5rem;
  text-align: center;
  color: var(--terracotta);
  font-weight: 700;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem; /* ← tamaño de la fecha límite */
}

/* Botón confirmar — burdeos rectangular */
.confirm .btn-main {
  background: #800020;                             /* ← color burdeos del botón confirmar */
  box-shadow: 0 8px 24px rgba(128, 0, 32, 0.38);
  display: block;
  margin: 0 auto;
  min-width: 240px;                                /* ← ancho mínimo del botón confirmar */
  padding: 1rem 2rem;
  font-size: 1.05rem;
  border-radius: 6px;
}

.confirm .btn-main:hover {
  background: #660019; /* ← color del botón confirmar al pasar el mouse */
}

/* Mensajes de éxito o error al enviar el formulario */
.flash {
  border-radius: 16px;
  padding: 0.9rem 1rem;
  margin: 0 auto 1.1rem;
  max-width: 620px;
  text-align: center;
  font-weight: 600;
  border: 1px solid var(--line);
}

.flash-success {
  background: rgba(15, 118, 110, 0.12); /* verde para confirmación exitosa */
  color: #0f695f;
}

.flash-error {
  background: rgba(180, 35, 24, 0.12); /* rojo para error */
  color: #8f261e;
}

/* ── RSVP popup modal ──────────────────────────── */
.rsvp-modal-overlay {
  display: none;
}

.rsvp-modal-overlay.is-open {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(24, 38, 59, 0.60);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  padding: 1rem;
}

.rsvp-modal-box {
  position: relative;
  background: var(--bg-warm-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 0 24px 64px rgba(20, 28, 46, 0.26);
  padding: 1.6rem 1.4rem 1.4rem;
  width: min(100%, 560px);
  max-height: 92vh;
  overflow-y: auto;
}

.rsvp-modal-title {
  margin: 0 0 0.2rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.4rem, 5vw, 1.9rem);
  color: var(--night-blue);
  line-height: 1;
  text-align: center;
  letter-spacing: 0.03em;
}

.rsvp-modal-guest {
  margin: 0 0 1.2rem;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.55rem, 5vw, 2rem);
  font-style: italic;
  font-weight: 600;
  color: var(--night-blue);
  line-height: 1.1;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.rsvp-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--deep-blue);
  opacity: 0.4;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  transition: opacity 0.15s;
}

.rsvp-modal-close:hover {
  opacity: 0.85;
}

/* Formulario RSVP dentro del modal — sin card propia */
.rsvp-form {
  margin: 0;
}

.confirm-submit-btn {
  display: block;
  width: 100%;
  background: #800020;
  box-shadow: 0 8px 24px rgba(128, 0, 32, 0.30);
  font-size: 1rem;
  border-radius: 6px;
  margin-top: 0.4rem;
}

.confirm-submit-btn:hover {
  background: #660019;
}

/* Campo honeypot anti-spam invisible para los usuarios */
.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* Fila de un campo del formulario (label + input) */
.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;        /* ← espacio entre la etiqueta y el campo */
  margin-bottom: 0.88rem; /* ← espacio entre filas del formulario */
}

.form-row label {
  color: var(--night-blue);
  font-weight: 600;
  font-size: 0.93rem; /* ← tamaño de las etiquetas del formulario */
}

/* Estilos para los campos de texto, select y textarea del formulario */
.form-row input,
.form-row select,
.form-row textarea {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 14px;
  color: var(--night-blue);
  font-family: inherit;
  font-size: 0.95rem; /* ← tamaño del texto dentro de los campos */
  padding: 0.8rem 0.85rem; /* ← padding interno de los campos del formulario */
}

/* Borde azul-terracota al enfocar un campo del formulario */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(196, 88, 36, 0.15);
}

.form-row small {
  display: block;
  min-height: 1.1rem;
  color: #a53320;
  font-size: 0.88rem;
  font-weight: 600;
}

.confirm-photos {
  display: none;
}

/* =====================================================
   GALERÍA DRESS CODE (fotos decorativas del código de vestimenta)
   ===================================================== */
/* Contenedor vertical con separación entre fotos */
.dress-gallery {
  display: flex;
  flex-direction: column;
  gap: 5px;              /* ← espacio entre filas de fotos de la galería */
  background: #fff;
  border-left: 5px solid #fff;
  border-right: 5px solid #fff;
}

/* Foto que ocupa todo el ancho */
.dress-gallery-full {
  margin: 0;
  overflow: hidden;
}

.dress-gallery-full img {
  width: 100%;
  aspect-ratio: 3 / 2;  /* ← proporción de la foto horizontal completa */
  object-fit: cover;
  display: block;
}

/* Fila de 2 fotos lado a lado */
.dress-gallery-row {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 fotos del mismo ancho */
  gap: 5px;                       /* ← espacio entre las 2 fotos */
}

.dress-gallery-row figure {
  margin: 0;
  overflow: hidden;
}

.dress-gallery-row figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4; /* ← proporción de cada foto vertical */
  object-fit: cover;
  display: block;
}

/* =====================================================
   DRESS CODE — Sección completa de código de vestimenta
   ===================================================== */
/* Contenedor de la sección, con imagen de fondo y degradado */
.dress {
  padding: 0.5rem 0 1rem;
  margin-top: -2rem;          /* se solapa ligeramente con la sección anterior */
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 1.00) 0%,   /* blanco sólido arriba */
      rgba(255, 255, 255, 0.00) 40%,
      rgba(255, 255, 255, 0.00) 72%,
      rgba(255, 255, 255, 1.00) 100%  /* blanco sólido abajo */
    ),
    url('../img/FondoVestimenta.png') center center / cover no-repeat; /* imagen de fondo */
}

/* Banner editorial: texto abs bottom-left | ilustración abs bottom-right */
.dress-row-top {
  position: relative;
  height: clamp(200px, 38vw, 330px); /* ← altura del banner superior del dress code */
  margin-bottom: 0.4rem;
}

/* Bloque de texto ("Código de Vestimenta") posicionado abajo a la izquierda */
.dress-header {
  position: absolute;
  bottom: 1.4rem;
  left: 3%;
  width: 58%;      /* ← ancho del bloque de texto del banner */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Imagen de siluetas posicionada abajo a la derecha del banner */
.dress-silhouettes {
  position: absolute;
  bottom: -0.8rem;
  right: 1rem;     /* ← distancia del borde derecho de las siluetas */
  display: flex;
  align-items: flex-end;
}

.dress-silhouettes img {
  height: clamp(205px, 39vw, 338px); /* ← altura de la imagen de siluetas */
  width: auto;
  display: block;
}

/* Fila 2: HOMBRES | MUJERES */
.dress-row-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;        /* el espacio entre columnas lo maneja el padding de .dress-col */
  align-items: stretch;
  width: 100%;
}

.dress-columns {
  display: contents;
}

.dress-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
}

.dress-btn-col {
  display: flex;
  justify-content: center;
}

.dress-col {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  width: 100%;
  padding-left: 14px;
  padding-right: 14px;
  box-sizing: border-box;
}

.dress-kicker {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.8rem, 2.2vw, 1.3rem);
  color: var(--terracotta);
  font-weight: 400;
  line-height: 1;
  margin-bottom: -0.20rem;
  padding-left: 5rem;
}

.dress-main-title {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: clamp(3.95rem, 11.9vw, 7.4rem);
  color: var(--terracotta);
  font-weight: 400;
  line-height: 1;
}

.dress-header-line {
  width: 88%;
  height: 1.5px;
  background: var(--terracotta);
  margin: 0.2rem 0 0;
  opacity: 0.5;
}

.dress-col-title {
  text-align: center;
  margin: 0 0 14px 0;
  font-family: "Cinzel", serif;
  font-size: clamp(0.72rem, 1.6vw, 1.1rem); /* ← TAMAÑO letra títulos HOMBRES / MUJERES: clamp(mínimo, fluido, máximo) */
  font-weight: 700;
  color: var(--deep-blue);
  letter-spacing: 0.12em;
}

.dress-col ul {
  list-style: disc;
  margin: 0;
  padding-left: 24px;
}

.dress-col ul li {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(0.8rem, 1.9vw, 1.2rem); /* ← TAMAÑO letra ítems de la lista: clamp(mínimo, fluido, máximo) */
  color: var(--deep-blue);
  line-height: 1.5;
  margin-bottom: 10px;
}

.dress-col ul li strong {
  font-weight: 700;
}

.dress-inspire-btn {
  display: inline-block;
  align-self: center;
  justify-self: center;
  text-align: center;
  background: var(--terracotta);
  color: #fff;
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.55rem 1.2rem; /* ← PADDING interno del botón: vertical horizontal */
  border-radius: 4px;
  text-decoration: none;
  transition: background var(--transition);
}

.dress-inspire-btn:hover {
  background: var(--terracotta-hover);
  color: #fff;
}

@media (min-width: 768px) {
  /* ── Dress code — desktop: centra y limita el ancho de cada columna ── */
  .dress-row-bottom {
    justify-items: center;
  }

  .dress-col {
    max-width: 280px;
    padding-left: 0;
    padding-right: 0;
  }

  .dress-col ul {
    padding-left: 1.4rem;
  }
}

@media (max-width: 767px) {
  /* ── Código de Vestimenta — columnas HOMBRES / MUJERES en tablet y móvil ── */

  .dress-row-bottom {
    column-gap: 0;
  }

  .dress-col {
    padding-left: 8px;  /* ← reduce el padding izquierdo de cada columna para ganar espacio */
    padding-right: 8px; /* ← reduce el padding derecho de cada columna para ganar espacio */
  }

  .dress-col-title {
    margin: 0 0 10px 0; /* ← reduce el espacio debajo del título HOMBRES / MUJERES */
  }

  .dress-col ul {
    padding-left: 18px; /* ← reduce la sangría de los bullets (era 24px en desktop) */
  }

  .dress-col ul li {
    margin-bottom: 8px; /* ← reduce el espacio entre cada ítem de la lista */
    line-height: 1.35;  /* ← reduce el interlineado del texto dentro de cada ítem */
  }
}

/* Mobile */
@media (max-width: 560px) {
  /* ── Código de Vestimenta — banner superior en móvil ── */

  .dress-row-top {
    height: clamp(150px, 48vw, 220px); /* ← altura del banner: mín 150px, fluido 48% viewport, máx 220px */
  }

  .dress-header {
    width: 58%; /* ← el bloque de texto ocupa 58% del ancho del banner, dejando espacio a las siluetas */
  }

  .dress-silhouettes {
    right: 0.5rem; /* ← acerca las siluetas al borde derecho */
  }

  .dress-silhouettes img {
    height: clamp(150px, 48vw, 220px); /* ← la imagen de siluetas iguala la altura del banner */
  }

  /* ── Código de Vestimenta — columnas HOMBRES / MUJERES en móvil ── */

  .dress-row-bottom {
    gap: 3.35rem 0; /* espacio vertical entre filas | columnas separadas solo por padding */
  }

  .dress-col ul {
    margin: 12px;                       /* ← elimina márgenes heredados del navegador */
    padding-left: 25px;              /* ← sangría de los bullets ajustada para pantallas pequeñas */
    list-style-position: outside;    /* ← el bullet queda fuera del flujo de texto, alineado al margen */
  }

  .dress-col-title {
    font-size: 0.88rem; /* ← reduce el tamaño del título HOMBRES / MUJERES en pantallas pequeñas */
    margin: 0 0 10px 0; /* ← mantiene separación debajo del título */
  }

  /* ── Código de Vestimenta — botones Inspírate en móvil ── */

  .dress-buttons {
    gap: 0 18px; /* ← separación horizontal entre los dos botones Inspírate */
  }

  .dress-inspire-btn {
    font-size: 0.6rem;       /* ← reduce el texto del botón para que quepa en pantallas pequeñas */
    padding: 0.4rem 0.7rem;  /* ← reduce el padding interno: menos alto y menos ancho */
    margin-top: 8px;         /* ← separación entre la lista y el botón Inspírate */
  }
}


/* ── Album ─────────────────────────────────────── */

/* =====================================================
   SECCIÓN ÁLBUM DE FOTOS
   ===================================================== */
/* Contenedor de la sección del álbum compartido */
.album {
  padding-top: 3.5rem;  /* ← espacio arriba de la sección del álbum */
  padding-bottom: 0;
}

/* Grid de 1 columna en móvil (pasa a 2 en ≥720px) */
.album-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;          /* ← espacio entre la foto y el texto del álbum */
  align-items: center;
}

/* Foto decorativa del álbum */
.album-figure {
  margin: 0;
}

.album-figure img {
  width: 100%;
  aspect-ratio: 4/5;   /* ← proporción de la foto del álbum */
  object-fit: cover;
  display: block;
  border-radius: 4px;
}

/* Texto y botones del álbum */
.album-copy {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;         /* ← espacio entre los textos y botones del álbum */
  align-items: center;
}

/* Primer párrafo del álbum */
.album-text-1 {
  margin: 0;
  color: var(--deep-blue);
  font-size: 1.05rem;  /* ← tamaño del primer párrafo del álbum */
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  line-height: 1.65;
}

/* Segundo párrafo del álbum (en negrita terracota) */
.album-text-2 {
  margin: 0;
  color: var(--terracotta);
  font-size: 1.05rem;  /* ← tamaño del segundo párrafo del álbum */
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;
  line-height: 1.65;
}

/* Botón para ir al álbum compartido */
.album-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  padding: 0.6rem 1.2rem;       /* ← padding del botón del álbum */
  background: #fff;
  color: var(--deep-blue);
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;           /* ← tamaño del texto del botón del álbum */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}

.album-btn:hover {
  background: var(--terracotta); /* se vuelve terracota al hover */
  border-color: var(--terracotta);
  color: #fff;
}

.album-btn svg {
  flex-shrink: 0;
}

.album-upload-label {
  cursor: pointer;
}

.album-upload-label:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}

.album-upload-status {
  min-height: 1.2em;
  font-family: "Montserrat", sans-serif;
  font-size: 0.78rem;
  text-align: center;
}

.album-upload-status.is-loading {
  color: var(--deep-blue);
  opacity: 0.7;
}

.album-upload-status.is-success {
  color: #2a7a3f;
}

.album-upload-status.is-error {
  color: #b91c1c;
}

/* ── Footer ─────────────────────────────────────── */
/* Pie de página con imagen de fondo y texto de los novios */
.invite-footer {
  position: relative;
  min-height: 420px;     /* ← altura mínima del footer */
  margin-top: 0;
  padding-bottom: 56px;  /* espacio para el cintillo fijo inferior */
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Degradado encima de la imagen del footer */
.footer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 1.00) 0%,
    rgb(17, 37, 77, 0.50) 20%,
    rgba(196, 88, 36, 0.46) 100%,
    rgba(196, 88, 36, 0.46) 100%);
}

.footer-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1rem;
  color: #fff;
}

.footer-content p {
  margin: 0 0 0.2rem;
  color: rgba(255, 255, 255, 0.88);
  font-family: "Cinzel", serif;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-size: clamp(0.62rem, 2vw, 0.78rem);
  font-weight: 400;
}

.footer-content h2 {
  margin: 0;
  color: #fff;
  font-family: "Great Vibes", cursive;
  font-size: clamp(4rem, 14vw, 7.5rem);
  line-height: 1;
  font-weight: 400;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* Barra fija en la parte inferior para confirmar por WhatsApp */
.whatsapp-float {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;                                           /* pegado al borde inferior de la pantalla */
  z-index: 99;                                         /* por encima de todo el contenido */
  background: #800020;                                 /* ← color burdeos del botón WhatsApp */
  color: #fff;
  border: none;
  border-radius: 0;
  padding: 1rem 1.5rem;                                /* ← padding interno del botón WhatsApp */
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  font-size: 0.92rem;                                  /* ← tamaño de texto del botón WhatsApp */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
  transition: transform 420ms ease, filter var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  line-height: 1;
  transform: translateY(100%); /* empieza oculto fuera de la pantalla */
}

.whatsapp-float.is-visible {
  transform: translateY(0); /* se desliza hacia arriba cuando aparece */
}

.whatsapp-float:disabled {
  background: #a0a0a0; /* gris cuando está desactivado */
  cursor: default;
}

.whatsapp-float svg {
  flex-shrink: 0;
}

.whatsapp-float:hover {
  filter: brightness(0.93); /* oscurece ligeramente al pasar el mouse */
}

/* Elementos con animación de entrada (aparecen al hacer scroll) */
[data-reveal] {
  opacity: 0;                   /* empieza invisible */
  transform: translateY(24px);  /* empieza 24px más abajo */
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 720ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms),
    transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
}

/* =====================================================
   RESPONSIVO: pantallas medianas y grandes (≥720px)
   La cuenta regresiva pasa a 4 columnas, el álbum a 2 columnas
   ===================================================== */
@media (min-width: 720px) {
  .countdown {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* el contador pasa de 2x2 a 4 columnas en una sola fila */
  }

  .parents-cards {
    grid-template-columns: 1fr auto 1fr; /* asegura el grid de 3 columnas en pantallas medianas */
  }

  .confirm-photos {
    grid-template-columns: 1fr 1fr; /* las fotos de confirmación se muestran en 2 columnas */
  }

  .album-grid {
    grid-template-columns: 1fr 1fr; /* el álbum pasa a 2 columnas: foto a la izquierda, texto a la derecha */
    gap: 2.5rem;                    /* ← espacio entre la foto y el texto del álbum en escritorio */
  }

  .album-copy {
    text-align: left;       /* el texto del álbum se alinea a la izquierda en escritorio */
    align-items: flex-start; /* los botones se alinean al inicio (izquierda) */
  }
}

/* =====================================================
   RESPONSIVO: pantallas grandes (≥980px)
   Se agrega fondo degradado, bordes redondeados a la carta y ajuste de fuentes
   ===================================================== */
@media (min-width: 980px) {
  body {
    background: linear-gradient(180deg, #efe6de 0%, #f6f1ec 100%); /* fondo crema/beige visible alrededor de la carta centrada */
  }

  .invite-shell {
    border-radius: 22px; /* ← esquinas redondeadas de la carta en escritorio */
    overflow: hidden;    /* recorta el contenido que sobresalga de las esquinas */
    margin: 1.2rem auto 2rem; /* ← separación de la carta con los bordes de la ventana */
  }

  .hero {
    min-height: 92vh; /* ← el hero es casi de pantalla completa en escritorio (menos que 100vh para no ocultar la barra del nav) */
  }

  .script-title .god-d,
  .script-title .god-ios {
    font-size: clamp(6rem, 12vw, 9.5rem); /* ← la palabra "Dios" crece en pantallas grandes */
  }

  .script-title .kicker {
    font-size: clamp(0.65rem, 1.1vw, 0.92rem); /* ← "GRACIAS A" crece proporcionalmente en escritorio */
    letter-spacing: 0.26em;                     /* ← más espaciado entre letras en escritorio */
  }

  .dress-body {
    max-width: 100%; /* el cuerpo del dress code ocupa todo el ancho disponible en pantallas grandes */
  }
}
/* Tarjeta con los datos del invitado (nombre y mesa) — visible antes de abrir el sobre */
.invite-badge {
  margin: 0 auto 1.1rem;
  max-width: 620px;
  background: var(--bg-warm-white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0.95rem 1rem; /* ← padding interno de la tarjeta del invitado */
  text-align: center;
  box-shadow: 0 10px 20px rgba(24, 38, 59, 0.08);
}

.invite-badge-kicker {
  margin: 0;
  color: var(--terracotta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  font-size: 0.78rem;
}

.invite-badge h3 {
  margin: 0.2rem 0 0.3rem;
  color: var(--night-blue);
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  line-height: 1;
}

.invite-badge p {
  margin: 0;
  color: var(--deep-blue);
  font-family: "Cormorant Garamond", serif;
  font-size: 1.12rem;
}

.invite-badge-status {
  margin-top: 0.38rem !important;
  color: var(--terracotta) !important;
  font-weight: 700;
}

.invite-badge-warning {
  border-color: rgba(196, 88, 36, 0.35);
  background: rgba(196, 88, 36, 0.08);
}

.invite-badge-error {
  border-color: rgba(180, 35, 24, 0.35);
  background: rgba(180, 35, 24, 0.10);
}

.field-hint {
  color: var(--night-blue) !important;
  opacity: 0.85;
}

button[disabled],
input[disabled],
select[disabled],
textarea[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Bloquea el scroll del body mientras el sobre está abierto */
body.gate-active {
  overflow: hidden;
  touch-action: none; /* desactiva gestos táctiles de scroll en móvil */
}

/* =====================================================
   PANTALLA DE BIENVENIDA — SOBRE (GATE)
   Cubre toda la pantalla hasta que el invitado hace clic en el sobre
   ===================================================== */
.invite-gate {
  position: fixed;
  inset: 0;                  /* cubre toda la pantalla */
  z-index: 130;              /* encima de todo el contenido */
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 10%, rgba(216, 185, 138, 0.2) 0%, transparent 46%),
    radial-gradient(circle at 90% 15%, rgba(196, 88, 36, 0.15) 0%, transparent 40%),
    linear-gradient(180deg, #f5eee7 0%, #f6f1ec 100%); /* fondo crema cálido */
  transition: opacity 560ms ease, visibility 560ms ease; /* animación al desaparecer */
}

.invite-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/15_album_left.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.24;
  filter: saturate(0.85) contrast(0.95);
  transform: scale(1.06);
}

.invite-gate::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 30%, rgba(24, 38, 59, 0.04) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 70%, rgba(24, 38, 59, 0.04) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.52) 100%);
  background-size: 26px 26px, 32px 32px, auto;
  opacity: 0.85;
}

.gate-collage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.gate-collage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.54) 100%);
}

.gate-photo {
  position: absolute;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0.64;
  filter: blur(1.8px) saturate(0.9);
  box-shadow: 0 18px 34px rgba(24, 38, 59, 0.2);
}

.gate-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gate-photo-1 {
  width: min(33vw, 250px);
  aspect-ratio: 4 / 5;
  left: -4.5vw;
  top: 8%;
  transform: rotate(-8deg);
}

.gate-photo-2 {
  width: min(34vw, 270px);
  aspect-ratio: 3 / 4;
  right: -8vw;
  top: 22%;
  transform: rotate(10deg);
}

.gate-photo-3 {
  width: min(32vw, 250px);
  aspect-ratio: 4 / 5;
  left: 10%;
  bottom: -6%;
  transform: rotate(7deg);
}

.invite-gate.is-open {
  opacity: 0;        /* invisible al ser cerrado */
  visibility: hidden; /* no recibe clics al cerrarse */
}

.invite-gate.is-hidden {
  display: none; /* completamente removido del DOM visual */
}

/* Contenedor central del sobre — limita el ancho máximo */
.invite-gate-inner {
  position: relative;
  z-index: 3;
  width: min(92vw, 560px); /* ← ancho máximo del sobre en la pantalla */
  display: grid;
  justify-items: center;
  gap: 0.72rem;            /* ← espacio entre el sobre y el texto de bienvenida */
}

/* Botón invisible que es el sobre (al hacer clic abre la invitación) */
.invite-envelope {
  position: relative;
  width: min(100%, 460px); /* ← ancho máximo del sobre */
  aspect-ratio: 5 / 4;     /* ← proporción alto/ancho del sobre */
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: center;
  filter: drop-shadow(0 20px 30px rgba(24, 38, 59, 0.24));
  transition: transform 360ms ease, filter 360ms ease;
}

.invite-envelope:hover,
.invite-envelope:focus-visible {
  transform: translateY(-3px); /* sube al pasar el mouse */
  filter: drop-shadow(0 24px 34px rgba(24, 38, 59, 0.28));
}

.invite-envelope:focus-visible {
  outline: 3px solid rgba(196, 88, 36, 0.45);
  outline-offset: 8px;
}

.envelope-shadow {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 8%;
  border-radius: 999px;
  background: rgba(24, 38, 59, 0.24);
  filter: blur(10px);
}

.envelope-tip-shadow {
  position: absolute;
  left: 50%;
  top: 67%;
  width: 64%;
  height: 15%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: radial-gradient(ellipse at center, rgba(44, 35, 24, 0.36) 0%, rgba(44, 35, 24, 0.16) 44%, rgba(44, 35, 24, 0) 74%);
  filter: blur(6px);
  z-index: 1;
  pointer-events: none;
}

.envelope-body {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 17%;
  bottom: 4%;
  border-radius: 16px 16px 22px 22px;
  border: 1px solid #cec2b3;
  background:
    repeating-linear-gradient(0deg, rgba(255, 252, 245, 0.14) 0 1px, rgba(239, 229, 214, 0.09) 1px 2px),
    radial-gradient(circle at 14% 18%, rgba(216, 185, 138, 0.28) 0%, transparent 56%),
    radial-gradient(circle at 82% 86%, rgba(171, 139, 100, 0.14) 0%, transparent 48%),
    linear-gradient(180deg, #fdf8f1 0%, #eadfce 100%);
  overflow: hidden;
  box-shadow:
    0 14px 24px rgba(40, 35, 26, 0.14),
    inset 0 0 0 1px rgba(255, 253, 246, 0.7),
    inset 0 -14px 20px rgba(167, 134, 98, 0.22);
}

.envelope-body::before,
.envelope-body::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  border-top: 1px solid rgba(216, 185, 138, 0.45);
}

.envelope-body::before {
  left: 0;
  right: 50%;
  transform: skewY(27deg) translateY(-14px);
  transform-origin: left bottom;
}

.envelope-body::after {
  left: 50%;
  right: 0;
  transform: skewY(-27deg) translateY(-14px);
  transform-origin: right bottom;
}

.envelope-flap {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 17%;
  height: 56%;
  border: 1px solid #cec2b3;
  border-bottom: 0;
  border-radius: 16px 16px 0 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 251, 243, 0.15) 0 1px, rgba(236, 224, 209, 0.1) 1px 2px),
    radial-gradient(circle at 50% 28%, rgba(216, 185, 138, 0.34) 0%, transparent 48%),
    linear-gradient(180deg, #fdf8f1 0%, #e8dccb 100%);
  clip-path: polygon(0 0, 100% 0, 50% 84%);
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    inset 0 -10px 14px rgba(171, 138, 100, 0.15);
  filter: drop-shadow(0 9px 10px rgba(24, 38, 59, 0.15));
  transform-origin: top center;
  transition: transform 900ms cubic-bezier(0.2, 0.78, 0.22, 1), opacity 700ms ease, filter 700ms ease;
  z-index: 2;
}

.envelope-flap::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 1.5%;
  width: 2px;
  height: 80%;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.62) 0%,
    rgba(204, 167, 122, 0.22) 48%,
    rgba(113, 84, 54, 0.34) 100%
  );
  opacity: 0.72;
  pointer-events: none;
}

.envelope-flap::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(126deg, transparent 47.6%, rgba(126, 94, 65, 0.25) 49.8%, rgba(255, 255, 255, 0.22) 50.5%, transparent 52.6%),
    linear-gradient(54deg, transparent 47.6%, rgba(126, 94, 65, 0.25) 49.8%, rgba(255, 255, 255, 0.22) 50.5%, transparent 52.6%),
    radial-gradient(circle at 50% 84%, rgba(98, 70, 44, 0.24) 0%, rgba(98, 70, 44, 0) 54%);
  opacity: 0.84;
  pointer-events: none;
}

.envelope-seal {
  position: absolute;
  left: 50%;
  top: 64%;
  transform: translate(-50%, -50%);
  width: clamp(96px, 25.5vw, 112px);
  height: clamp(96px, 25.5vw, 112px);
  border: 1px solid rgba(255, 224, 208, 0.38);
  background:
    radial-gradient(circle at 25% 22%, #d5734d 0%, #be552f 42%, #9a3e22 70%, #7e311b 100%);
  color: #ffd9cc;
  display: grid;
  place-items: center;
  padding: 0.45rem;
  text-align: center;
  clip-path: polygon(
    50% 0%,
    61% 5%,
    72% 2%,
    83% 8%,
    92% 17%,
    98% 29%,
    95% 40%,
    100% 50%,
    95% 60%,
    98% 72%,
    92% 84%,
    83% 92%,
    71% 98%,
    60% 95%,
    50% 100%,
    40% 95%,
    29% 98%,
    17% 92%,
    8% 84%,
    2% 72%,
    5% 60%,
    0% 50%,
    5% 40%,
    2% 29%,
    8% 17%,
    17% 8%,
    29% 2%,
    40% 5%
  );
  box-shadow:
    0 3px 6px rgba(122, 46, 23, 0.24),
    inset 0 1px 1px rgba(246, 188, 161, 0.18),
    inset 0 -1px 2px rgba(83, 28, 13, 0.18);
  z-index: 3;
  transition: transform 700ms ease, opacity 480ms ease;
}

.envelope-seal::before {
  content: "";
  position: absolute;
  inset: 9px;
  clip-path: inherit;
  border: 1px solid rgba(240, 168, 138, 0.26);
  border-radius: 42%;
  pointer-events: none;
}

.envelope-seal::after {
  content: "";
  position: absolute;
  top: 56%;
  left: 18%;
  width: 64%;
  height: 1px;
  border-radius: 999px;
  background: rgba(100, 27, 14, 0.26);
  filter: none;
  pointer-events: none;
}

.seal-meta {
  position: relative;
  display: grid;
  place-items: center;
  gap: 0.02rem;
  z-index: 1;
}

.seal-meta strong {
  font-size: clamp(1.2rem, 3.9vw, 1.56rem);
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffe7dd;
  text-shadow:
    0 1px 0 rgba(93, 28, 13, 0.5),
    0 -1px 0 rgba(244, 168, 136, 0.18);
  font-variant-numeric: tabular-nums;
}

.seal-meta small {
  font-size: clamp(0.42rem, 1.02vw, 0.52rem);
  line-height: 1.08;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #ffdacc;
  text-shadow: 0 1px 0 rgba(95, 30, 14, 0.45);
}

.envelope-sticker {
  position: absolute;
  right: 7.8%;
  bottom: 8.8%;
  z-index: 4;
  padding: 0.38rem 0.8rem 0.44rem;
  border-radius: 8px;
  border: 1px solid rgba(154, 132, 103, 0.58);
  background:
    repeating-linear-gradient(0deg, rgba(255, 252, 247, 0.36) 0 1px, rgba(235, 225, 211, 0.26) 1px 2px),
    linear-gradient(180deg, #fbf5ea 0%, #ede1cf 100%);
  color: #6b4730;
  font-family: "Great Vibes", cursive;
  font-size: clamp(1rem, 2.3vw, 1.25rem);
  line-height: 1;
  letter-spacing: 0.01em;
  transform: rotate(-7deg);
  box-shadow:
    0 8px 14px rgba(56, 44, 31, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.gate-copy {
  text-align: center;
  max-width: 34ch;
}

.gate-copy-top {
  margin-bottom: 0.16rem;
}

.gate-copy-bottom {
  margin-top: 0.05rem;
}

.gate-kicker {
  margin: 0;
  color: var(--terracotta);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 700;
}

.gate-name {
  margin: 0.25rem 0 0;
  color: var(--night-blue);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.02;
  font-weight: 700;
  text-wrap: balance;
}

.gate-table {
  margin: 0.42rem 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(196, 88, 36, 0.32);
  color: var(--terracotta);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.gate-hint {
  margin: 0;
  color: #fff;
  background: linear-gradient(180deg, #c8784b 0%, #a7552d 100%);
  border: 1px solid rgba(255, 241, 230, 0.62);
  border-radius: 999px;
  padding: 0.54rem 1.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 20px rgba(143, 69, 35, 0.22);
  cursor: pointer;
  font-family: inherit;
}

.invite-gate.is-opening .envelope-flap {
  transform: rotateX(178deg) translateY(-12px);
  opacity: 0.86;
  filter: drop-shadow(0 4px 8px rgba(24, 38, 59, 0.1));
}

.invite-gate.is-opening .envelope-seal {
  transform: translate(-50%, -78%) scale(0.76);
  opacity: 0.15;
}

/* =====================================================
   RESPONSIVO: pantallas pequeñas (≤719px)
   Ajustes generales del layout para móvil
   ===================================================== */
@media (max-width: 719px) {
  /* Layout general */
  .invite-shell {
    max-width: 100%;  /* la carta ocupa todo el ancho de la pantalla */
    box-shadow: none; /* quita el borde/sombra lateral (no hay espacio a los lados) */
  }

  .section {
    padding: 1.8rem 0; /* ← espacio vertical entre secciones en móvil (menor que en escritorio) */
  }

  /* Hero */
  .hero {
    min-height: 52vh; /* ← el hero ocupa solo la mitad de la pantalla en móvil */
  }

  .hero-content {
    padding-bottom: 1.2rem; /* ← espacio inferior del texto en el hero en móvil */
  }

  /* Contador regresivo */
  .count-circle {
    width: 56px; /* ← círculos del contador más pequeños en móvil */
  }

  .count-circle span {
    font-size: 1.28rem; /* ← números del contador más pequeños en móvil */
  }

  .count-item {
    gap: 0.28rem; /* ← espacio entre el círculo y la etiqueta en móvil */
  }

  .count-item small {
    font-size: 0.7rem; /* ← etiquetas ("DÍAS", "HORAS"...) más pequeñas en móvil */
  }

  /* Intro y música */
  .intro {
    padding: 0.6rem 0 1rem; /* ← sección intro más compacta en móvil */
  }

  .music-controls {
    margin-bottom: 0.75rem; /* ← menos espacio debajo del reproductor en móvil */
    gap: 0.5rem;            /* ← menos separación entre línea decorativa y reproductor */
  }

  .music-line {
    width: 120px; /* ← la línea decorativa del reproductor es más corta en móvil */
  }

  .music-player-btn {
    width: 34px;       /* ← botones laterales del reproductor más pequeños en móvil */
    height: 34px;
    font-size: 0.88rem; /* ← ícono dentro de los botones más pequeño en móvil */
  }

  .music-player-btn.is-main {
    width: 40px;  /* ← botón play principal más pequeño en móvil */
    height: 40px;
  }

  .verse {
    font-size: 1.85rem;    /* ← verso decorativo más pequeño en móvil */
    margin-bottom: 0.5rem; /* ← menos espacio debajo del verso en móvil */
  }

  .intro-copy {
    font-size: 0.92rem; /* ← texto de bienvenida más pequeño en móvil */
  }

  /* Contador: pasa a 4 columnas en una sola fila incluso en móvil */
  .countdown {
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 columnas en una fila (días, horas, min, seg) */
    gap: 0.5rem;          /* ← espacio entre los círculos del contador en móvil */
    margin: 0.75rem auto; /* ← margen vertical del contador en móvil */
    max-width: 100%;       /* ocupa todo el ancho disponible */
  }

  /* Sección Gracias a Dios */
  .thanks-header {
    margin-bottom: -0.4rem; /* negativo: hace que el título solape levemente el collage */
  }

  .thanks-grid {
    grid-template-columns: 1.06fr 1fr; /* misma proporción que en escritorio */
    grid-template-areas:
      "left top"
      "left mid";
    gap: 0.5rem; /* ← menos espacio entre fotos del collage en móvil */
  }

  .thanks-bottom {
    grid-template-columns: 1fr 1fr; /* las 2 fotos inferiores siguen en 2 columnas */
    gap: 0.5rem; /* ← menos espacio entre las fotos inferiores en móvil */
  }

  /* Textos generales — tamaño reducido en móvil */
  .thanks-copy,
  .parents-intro,
  .parents-note,
  .confirm-copy,
  .album-text-1,
  .album-text-2 {
    font-size: 1rem; /* ← normaliza el tamaño de todos estos textos largos en móvil */
  }

  /* Evento */
  .event {
    min-height: 480px; /* ← altura mínima de la sección de evento en móvil */
  }

  .event-title {
    font-size: 1.7rem; /* ← título del evento ("LUGAR") más grande en móvil para legibilidad */
  }

  /* Elementos legacy (por si se reintroducen) */
  .dress-card {
    width: min(92vw, 400px); /* tarjeta del dress code ocupa casi todo el ancho en móvil */
  }

  .dress-tags span {
    padding: 0.5rem 1rem; /* etiquetas de color con más padding en móvil */
    min-width: 80px;       /* ancho mínimo para que las etiquetas no queden muy estrechas */
  }

  /* Padres */
  .parents {
    padding-top: 1rem; /* ← menos espacio superior en la sección de padres en móvil */
  }

  /* Álbum */
  .album {
    padding-top: 1.8rem;    /* ← espacio arriba del álbum en móvil */
    padding-bottom: 1.8rem; /* ← espacio abajo del álbum en móvil */
  }

  /* Footer */
  .invite-footer {
    min-height: 280px; /* ← footer más bajo en móvil */
  }

  /* Botón WhatsApp fijo al fondo */
  .whatsapp-float {
    padding: 0.9rem 1rem; /* ← padding del botón WhatsApp más compacto en móvil */
    font-size: 0.82rem;   /* ← texto del botón WhatsApp más pequeño en móvil */
  }

  /* Sobre de bienvenida (gate) */
  .invite-gate-inner {
    width: min(94vw, 440px); /* ← el sobre ocupa casi todo el ancho en móvil */
    gap: 0.62rem;            /* ← menos espacio entre el sobre y el texto en móvil */
  }

  .invite-envelope {
    aspect-ratio: 1.22 / 1; /* ← el sobre es más cuadrado (menos alto) en móvil */
  }

  .envelope-tip-shadow {
    top: 66.8%;  /* reposiciona la sombra del sobre para la nueva proporción */
    width: 70%;  /* ← sombra más ancha proporcionalmente en móvil */
    height: 16%; /* ← sombra más alta en móvil */
  }

  /* Fotos decorativas de fondo del sobre */
  .gate-photo {
    opacity: 0.52;                /* fotos más transparentes en móvil para no distraer */
    filter: blur(2px) saturate(0.88); /* mayor desenfoque en móvil */
  }

  .gate-photo-1 {
    width: 42vw;   /* ← tamaño de la foto decorativa izquierda en móvil */
    left: -16vw;   /* ← se sale más del borde izquierdo en móvil */
    top: 8%;       /* ← posición vertical de la foto 1 en móvil */
  }

  .gate-photo-2 {
    width: 44vw;   /* ← tamaño de la foto decorativa derecha en móvil */
    right: -19vw;  /* ← se sale del borde derecho en móvil */
    top: 24%;      /* ← posición vertical de la foto 2 en móvil */
  }

  .gate-photo-3 {
    width: 40vw;   /* ← tamaño de la foto decorativa inferior en móvil */
    left: -8vw;    /* ← posición horizontal de la foto 3 en móvil */
    bottom: -8%;   /* ← se sale del borde inferior en móvil */
  }

  /* Texto debajo del sobre */
  .gate-kicker {
    font-size: 0.76rem;   /* ← etiqueta "INVITACIÓN PERSONAL" más pequeña en móvil */
    letter-spacing: 0.05em; /* ← menos espaciado entre letras en móvil */
  }

  .gate-name {
    font-size: clamp(1.95rem, 8vw, 2.45rem); /* ← nombre del invitado crece con el ancho en móvil */
  }
}

/* =====================================================
   RESPONSIVO: pantallas muy pequeñas (≤420px)
   Ajustes finos para teléfonos pequeños
   ===================================================== */
@media (max-width: 420px) {
  /* Hero */
  .hero-title {
    margin-bottom: 0.9rem; /* ← más espacio debajo del subtítulo antes de la flecha en pantallas muy pequeñas */
  }

  /* Contador */
  .countdown {
    gap: 0.85rem; /* ← los círculos del contador se separan más en pantallas muy pequeñas */
  }

  /* .kicker inside .god uses clamp — no override needed at 420px */

  /* Sobre — sello central */
  .envelope-seal {
    width: 88px;   /* ← el sello del sobre es más pequeño en pantallas muy pequeñas */
    height: 88px;
    top: 63.5%;    /* ← reposiciona el sello más arriba por la nueva proporción del sobre */
  }

  .envelope-tip-shadow {
    top: 66.4%; /* ← sombra de la solapa reposicionada */
    width: 72%;  /* ← sombra más ancha en pantallas muy pequeñas */
  }

  .seal-meta strong {
    font-size: 1.08rem; /* ← números del sello (año) más pequeños en pantallas muy pequeñas */
  }

  /* Sobre — sticker */
  .envelope-sticker {
    right: 8.4%;                      /* ← reposiciona el sticker horizontalmente */
    bottom: 8%;                       /* ← reposiciona el sticker verticalmente */
    font-size: 0.98rem;               /* ← tamaño del texto script del sticker */
    padding: 0.32rem 0.68rem 0.38rem; /* ← padding del sticker más ajustado */
  }

  /* Botón "Toca para abrir" */
  .gate-hint {
    font-size: 0.76rem;   /* ← texto del botón más pequeño en pantallas muy pequeñas */
    padding: 0.5rem 1rem; /* ← padding del botón ajustado */
  }

  /* Foto decorativa inferior del sobre (se oculta por falta de espacio) */
  .gate-photo-3 {
    display: none; /* se elimina la tercera foto decorativa en pantallas muy pequeñas */
  }
}

body.gate-active .invite-shell {
  transform: scale(0.985);
  filter: blur(2px);
  pointer-events: none;
}

/* ============================================================
   SCHEDULE / ITINERARY — Lista del itinerario en zigzag
   Hora a la izquierda → ícono central → descripción a la derecha
   (o invertido para los pares)
   ============================================================ */
.schedule {
  background: #fff;
}

/* Título script de la sección de itinerario */
.schedule-title {
  margin: 0 0 2rem;              /* ← espacio debajo del título del itinerario */
  text-align: center;
  color: var(--terracotta);
  font-family: "Great Vibes", cursive;
  font-size: clamp(3rem, 9vw, 4.8rem); /* ← tamaño del título del itinerario */
  font-weight: 400;
  line-height: 1;
}

/* Lista vertical de pasos del itinerario */
.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Línea vertical terracota que conecta todos los íconos */
.schedule-list::before {
  content: "";
  position: absolute;
  left: 50%;             /* centrada horizontalmente */
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--terracotta) 8%, var(--terracotta) 92%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
}

/* Cada paso del itinerario: 3 columnas (hora | ícono | descripción) */
.schedule-item {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* auto = el ícono ocupa su tamaño natural */
  align-items: center;
  gap: 0.75rem 1rem;    /* ← espaciado vertical/horizontal entre hora, icono y texto */
  padding: 1.1rem 0;    /* ← espacio vertical entre cada paso del itinerario */
}

/* Pasos impares: hora a la izquierda, texto a la derecha */
.schedule-item:nth-child(odd) .schedule-time {
  order: -1;           /* la hora va primero (izquierda) */
  text-align: right;
}

.schedule-item:nth-child(odd) .schedule-label {
  order: 1;            /* la descripción va última (derecha) */
  text-align: left;
}

/* Pasos pares: hora a la derecha, texto a la izquierda (zigzag) */
.schedule-item:nth-child(even) .schedule-time {
  order: 1;            /* la hora va al final (derecha) */
  text-align: left;
}

.schedule-item:nth-child(even) .schedule-label {
  order: -1;           /* la descripción va primero (izquierda) */
  text-align: right;
}

/* Círculo terracota con el ícono del paso */
.schedule-icon {
  width: 52px;              /* ← tamaño del círculo del icono del itinerario */
  height: 52px;
  background: var(--terracotta);
  color: #fff;              /* el SVG del icono hereda este color (stroke="currentColor") */
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  flex-shrink: 0;
  box-shadow: var(--shadow-btn);
  position: relative;
  z-index: 1;               /* se muestra por encima de la línea vertical */
}

/* Hora del paso ("2:30 PM") */
.schedule-time {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.4rem, 5vw, 2rem); /* ← tamaño de la hora en el itinerario */
  font-weight: 700;
  color: var(--terracotta);
  line-height: 1;
  white-space: nowrap;
}

/* Descripción del paso ("Recepcón de invitados") */
.schedule-label {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1rem, 4vw, 1.25rem); /* ← tamaño del texto descriptivo del itinerario */
  font-weight: 500;
  color: var(--night-blue);
  line-height: 1.2;
}

/* Responsivo del itinerario en pantallas muy pequeñas */
@media (max-width: 500px) {
  .schedule-item {
    padding: 0.9rem 0; /* ← espacio vertical entre pasos en móvil pequeño */
  }

  .schedule-icon {
    width: 46px;       /* ← tamaño del ícono en móvil pequeño */
    height: 46px;
    font-size: 1.2rem;
  }
}

/* ── Modal RSVP en escritorio — tamaño compacto ── */
@media (min-width: 640px) {
  .rsvp-modal-box {
    width: min(90vw, 400px);
    padding: 1.3rem 1.25rem 1.2rem;
    max-height: 88vh;
  }

  .rsvp-modal-box .form-row {
    margin-bottom: 0.6rem;
    gap: 0.25rem;
  }

  .rsvp-modal-box .form-row input,
  .rsvp-modal-box .form-row select,
  .rsvp-modal-box .form-row textarea {
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    border-radius: 10px;
  }

  .rsvp-modal-box .form-row textarea {
    min-height: 4.5rem;
  }

  .rsvp-modal-box .confirm-submit-btn {
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    margin-top: 0.5rem;
  }

  .rsvp-modal-guest {
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
  }
}