/* =======================
   PALETA Y VARIABLES
   ======================= */
:root {
  --warm-taupe: #D2BEB0;
  --golden-beige: #E6C48D;
  --champagne: #F4E8D4;
  --burnt-orange: #c9a58e;
  --dusty-rose: #C59992;
  --caramel-brown: #79533f;
  --terracotta: #a0705b;
  --sage-green: #849f7d;
}

/* =======================
   RESET Y BASE
   ======================= */
body {
  font-family: 'Calibri', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fafbfa;
  color: #333;
  font-size: 1.2rem;
  line-height: 1.6;
}

body.loading {
  overflow: hidden;
}

/* =======================
   BIENVENIDA
   ======================= */
#welcome-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2000;
  transition: opacity 0.8s ease;
  padding: 40px;
  overflow: hidden; /* importante para que no se salga el pseudo */
}

#welcome-screen::before {
  content: "";
  position: absolute;
  inset: 0;
 /*background: var(--burnt-orange); */
  background: url("assets/bienvenida.png") center/cover no-repeat;
  filter: blur(1px); /* <-- aquí se aplica el desenfoque */
  transform: scale(1.1); /* evitar bordes transparentes */
  z-index: -1; /* ponerlo detrás del contenido */
}





.welcome-content {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.bienvenida-titulo {
  color: #fff;
  font-size: 1.5rem;
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  margin-bottom: 30px;
}

.bienvenida-linea {
  width: 100%;
  max-width: 200px;
  height: 1px;
  background: #fff;
  margin: 0 auto 2px auto;
  border-radius: 2px;
}

.bienvenida-nombres {
  color: #fff;
  font-size: 2.8rem;
  font-family: 'Libre Baskerville', serif;
  font-weight: 700;
  margin: 0 0 6px 0;
}

.bienvenida-linea2 {
  width: 100%;
  max-width: 200px;
  height: 1px;
  background: #fff;
  margin: 0 auto 2px auto;
  border-radius: 2px;
}

.bienvenida-sub {
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 28px;
  font-family: 'Playfair Display', serif;
}

.bienvenida-btn {
  background: var(--terracotta);
  color: #fff;
  border: none;
  border-radius: 30px;
  padding: 12px 38px;
  font-size: 1.2rem;
  font-family: 'Playfair Display', serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  margin-top: 10px;
  font-weight: 500;
}

.bienvenida-btn:hover {
  background: var(--burnt-orange);
  transform: scale(1.05);
}

/*-------------------- 
  Foto portada
---------------------*/


/* capa de la foto de fondo */
.foto-portada {
  position: relative;
  inset: 0;               /* ocupa todo el alto/ancho de la sección */
  z-index: 0;             /* por debajo de todo */
  pointer-events: none;   /* no bloquea toques/clicks */
}
.foto-portada .foto-img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* cubre sin deformarse */
  display: block;
}

/* capa de la foto de fondo */
.foto-nombres {
  position: relative;
  inset: 0;               /* ocupa todo el alto/ancho de la sección */
  z-index: 0;             /* por debajo de todo */
  pointer-events: none;   /* no bloquea toques/clicks */
}
.foto-nombres .foto-img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* cubre sin deformarse */
  display: block;
}


/* =======================
   PORTADA (LANDING)
   ======================= */


.landing-content {
  text-align: center;
  background: #fafbfa;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.landing-cover {
  position: relative;
  overflow: hidden;
}

.landing-cover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
}

.landing-cover .landing-content {
  position: relative;
  z-index: 2;
}

/*===========================
   BOTÓN DE MÚSICA
   ======================= */

.music-btn {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 3000;
  background: var(--dusty-rose);
  border: none;
  border-radius: 50%;
  max-width: 56px;
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: background 0.2s, transform 0.2s;
}
.music-btn:hover {
  background: var(--warm-taupe);
  transform: scale(1.08);
}
.music-btn ion-icon {
  color: #ffffff99;
  font-size: 2rem;
}






/*===========================
   FLECHA PARA DESLIZAR
   ======================= */

.scroll-down-arrow{
  min-height:90vh;  
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 4vh, 28px);
  transform: translateX(-50%);
  z-index: 5;                 /* por encima de la foto */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  width: auto;
  font-size: clamp(28px, 7vw, 44px);
  color: var(--sage-green);
  background: transparent;
}

.scroll-down-arrow ion-icon {
  animation: arrow-bounce 1.3s infinite;
}

@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0);}
  50% { transform: translateY(18px);}
}


/* =======================
   CUENTA REGRESIVA
   ======================= */
  
.countdown-section {
  position: relative;
  min-height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafbfa;
}

.countdown-circle {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  max-width: 220px;
  width: 100%;
  height: auto;
  z-index: 3;                        /* encima del marco */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
}

.countdown-floral {
  position: absolute;
  width: 130%;   /* Aumenta el tamaño del marco */
  height: auto;  /* Aumenta el tamaño del marco */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.countdown-floral img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.countdown-marco{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 143%;
  height: auto;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;                        /* debajo del ::before */
}

/* capa de la foto de fondo */
.foto-conteo{
  position: absolute;
  inset: 0;               /* ocupa todo el alto/ancho de la sección */
  z-index: 0;             /* por debajo de todo */
  pointer-events: none;   /* no bloquea toques/clicks */
}
.foto-conteo .foto-img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* cubre sin deformarse */
  display: block;
}

/* contenido por encima del fondo */
.countdown-section > :not(.foto-conteo){
  position: relative;
  z-index: 2;
}

.countdown-content {
  position: absolute;
  z-index: 2;
  width: 100%;
  text-align: center;
}


.countdown-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem;
  color: var(--terracotta);
  margin-bottom: 10px;
  font-weight: 400;
  justify-content: center;
}

.countdown-numbers {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.countdown-numbers div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== Separadores verticales suaves en la cuenta regresiva ===== */
.countdown-numbers{
  gap: 0; /* el espacio lo daremos con padding para que quepa la línea */
}

.countdown-numbers > div{
  position: relative;
  padding: 0 clamp(10px, 3.5vw, 20px);   /* espacio a la izquierda/derecha */
}

/* Línea a la derecha de cada bloque, menos el último */
.countdown-numbers > div:not(:last-child)::after{
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 58%;                          /* alto relativo al bloque */
  /* verde muy sutil con desvanecido arriba/abajo */
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(143,161,139,.35) 20%,
    rgba(143,161,139,.35) 80%,
    transparent
  );
  border-radius: 1px;
  pointer-events: none;
}


.countdown-numbers span {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--caramel-brown);
  font-family: 'Playfair Display', serif;
}

.countdown-numbers .label {
  font-size: 1rem;
  color: var(--sage-green);
  font-weight: 400;
  margin-top: 2px;
}

.countdown-heart {
  margin-top: 10px;
}
.countdown-heart ion-icon {
  font-size: 2.2rem;
  color: var(--terracotta);
}




/*=====================
   SEPARADOR ELEGANTE
   ======================= */

.elegant-separator{
  min-height: 20vh;
  --badge-top: 50%;        /* súbelo/bájalo afinando este valor */
  background: #fafbfa;
  padding: 36px 0 72px;
  position: relative;
  overflow: hidden;
}

.elegant-separator .waves{
  width: 100%;
  height: auto;
  display: block;
}

.divider-badge{
  position: absolute;
  left: 50%;
  top: var(--badge-top);    /* más arriba para alinearlo con las líneas */
  transform: translate(-50%, -50%);
  max-width: 140px;
  width: 100%;
  height: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;  /* el círculo ya lo pinta el SVG */
  z-index: 0;
}

/* Imagen del badge en el separador elegante */
.badge-img{
  width: 85%;
  height: auto;
  object-fit: contain;       /* evita deformaciones */
  border-radius: 50%;        /* forma circular, opcional */
  background: #fff;          /* círculo blanco como el anterior */
  box-shadow: 0 6px 12px rgba(0,0,0,0.08); /* sombra suave */
  padding: 8px;
  z-index: 1;          /* deja un borde interno para “marco” */
}



/* =======================
   CEREMONIA
   ======================= */

/* Separador de sección */
.section-separator {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0 40px 0;
}
.section-title {
  background: #8fa18b;
  color: #fff;
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  padding: 10px 48px;
  border-radius: 2px;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}



/* Ceremonia */
.ceremonia-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  width: 100%;
  max-width: 1050px;
}

/* La sección es el contenedor de referencia */
.ceremonia-section{
  position: relative;
  overflow: hidden;
  background: #fafafa;   /* por si tarda en cargar */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 👇 espacio “seguro” para el listón que está en la imagen */
  padding: clamp(310px, 26vw, 190px) 20px 60px;  /* top | left/right | bottom */
}

/* El fondo NO debe empujar el contenido */
.fondo-ceremonia{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fondo-ceremonia .foto-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Todo el contenido por encima del fondo */
.ceremonia-section > :not(.fondo-ceremonia){
  position: relative;
  z-index: 2;
}

.ceremonia-info {
  /*background: #eef3ee;*/
  background: #fddedd5f;
  border-radius: 18px;
  padding: 36px 36px 24px 36px;
  width: 100%;
  min-width: 300px;
  max-width: 340px;
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 2px 12px rgba(0,0,0,0.03);
}

.ceremonia-dia-titulo {
  color: var(--terracotta);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.ceremonia-dia-fecha {
  color: var(--terracotta);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 18px;
}

.ceremonia-detalles {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}
.ceremonia-detalle {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ceremonia-icon {
  background: #edb7b1;
  border-radius: 50%;
  max-width: 38px;
  width: 100%;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7c625e;
  font-size: 1.5rem;
}
.ceremonia-detalle-label {
  color: var(--terracotta);
  font-size: 0.95rem;
}
.ceremonia-detalle-valor {
  color: var(--dusty-rose);
  font-size: 1.1rem;
  font-weight: 500;
}

.ceremonia-lugar-label {
  color: var(--dusty-rose);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 4px;
  margin-top: 10px;
}
.ceremonia-lugar-nombre {
  color: var(--terracotta);
  font-size: 1.15rem;
  font-weight: 600;
}
.ceremonia-lugar-direccion {
  color: var(--terracotta);
  font-size: 1rem;
  margin-top: 2px;
}

.ceremonia-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-width: 320px;
  max-width: 400px;
  flex: 1 1 320px;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 18px;
}

.ceremonia-btn {
  background: var(--terracotta);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 0;
  font-size: 1rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 0;
  text-align: center;
  display: block;
}
.ceremonia-btn.save-date {
  background: var(--dusty-rose);
}
.ceremonia-btn.outline {
  background: #fff;
  color: var(--dusty-rose);
  border: 2px solid var(--dusty-rose);
  margin-top: 8px;
}
.ceremonia-btn:hover {
  background: #c6857b;
  color: #fff;
}
.ceremonia-btn.outline:hover {
  background: #e5c3be;
  color: #d08377;
}


/* === Separador Fiesta === */
/*=====================
   SEPARADOR ELEGANTE
   ======================= */

.fiesta-separator{
  min-height: 20vh;
  --badge-top: 50%;        /* súbelo/bájalo afinando este valor */
  background: #fafbfa;
  padding: 36px 0 72px;
  position: relative;
  overflow: hidden;
}

.fiesta-separator .waves{
  width: 100%;
  height: auto;
  display: block;
}

.divider-badge2{
  position: absolute;
  left: 50%;
  top: var(--badge-top);    /* más arriba para alinearlo con las líneas */
  transform: translate(-50%, -50%);
  max-width: 140px;
  width: 100%;
  height: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;  /* el círculo ya lo pinta el SVG */
}

/* Imagen del badge en el separador elegante */
.badge-img-fiesta{
  width: 80%;
  height: auto;
  object-fit: contain;       /* evita deformaciones */
  border-radius: 50%;        /* forma circular, opcional */
  background: #fff;          /* círculo blanco como el anterior */
  box-shadow: 0 6px 12px rgba(0,0,0,0.08); /* sombra suave */
  padding: 5px;             /* deja un borde interno para “marco” */
}



/* =======================
   FIESTA DE CELEBRACIÓN
   ======================= */

.section-separator {
  max-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 60px 0 40px 0;
}
.section-title-celebracion {
  background: var(--caramel-brown);
  color: #fff;
  font-family: 'Dancing Script', cursive;
  font-size: 2rem;
  padding: 10px 48px;
  border-radius: 2px;
  letter-spacing: 1px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.fiesta-section {
  background: #fafbfa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 60px 20px;
}


/* La sección es el contenedor de referencia */
.fiesta-section{
  position: relative;
  overflow: hidden;
  background: #fafafa;   /* por si tarda en cargar */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 👇 espacio “seguro” para el listón que está en la imagen */
  padding: clamp(310px, 26vw, 190px) 20px 60px;  /* top | left/right | bottom */
}

/* El fondo NO debe empujar el contenido */
.fondo-fiesta{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fondo-fiesta .foto-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Todo el contenido por encima del fondo */
.fiesta-section > :not(.fondo-fiesta){
  position: relative;
  z-index: 2;
}



.fiesta-content {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  flex-direction: row-reverse; /* Cambia el orden para dinamismo */
}

.fiesta-info {
  background: #fff;
  border-radius: 18px;
  padding: 36px 36px 24px 36px;
  width: 100%;
  min-width: 340px;
  max-width: 340px;
  flex: 1 1 340px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border: 2px dashed var(--caramel-brown);
}

.fiesta-dia-titulo {
  color: var(--caramel-brown);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 6px;
}
.fiesta-dia-fecha {
  color: var(--caramel-brown);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 18px;
}

.fiesta-detalles {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}
.fiesta-detalle {
  display: flex;
  align-items: center;
  gap: 14px;
}
.fiesta-icon {
  background: #c9bab3;
  border-radius: 50%;
  max-width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--caramel-brown);
  font-size: 1.5rem;
}
.fiesta-detalle-label {
  color: var(--caramel-brown);
  font-size: 0.95rem;
}
.fiesta-detalle-valor {
  color: var(--caramel-brown);
  font-size: 1.1rem;
  font-weight: 500;
}

.fiesta-lugar-label {
  color: var(--caramel-brown);
  font-size: 1rem;
  letter-spacing: 2px;
  margin-bottom: 4px;
  margin-top: 10px;
}
.fiesta-lugar-nombre {
  color: var(--caramel-brown);
  font-size: 1.15rem;
  font-weight: 600;
}
.fiesta-lugar-direccion {
  color: var(--caramel-brown);
  font-size: 1rem;
  margin-top: 2px;
}

.fiesta-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-width: 320px;
  max-width: 400px;
  flex: 1 1 320px;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 18px;
}

.fiesta-btn {
  background: var(--dusty-rose);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 0;
  font-size: 1rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 10px;
  text-align: center;
  display: block;
}
.fiesta-btn.save-date {
  background: #765848;
}
.fiesta-btn.outline {
  background: #fff;
  color: #765848;
  border: 2px solid #765848;
  margin-top: 8px;
}
.fiesta-btn:hover {
  background: #836c61;
  color: #fff;
}
.fiesta-btn.outline:hover {
  background: #694e4090;
  color: var(--caramel-brown);
}
/*======================
   SEPARADORES
======================*/



/*==========================
   RETRATOS DE NUESTRO AMOR
   ===================== */


/* La sección es el contenedor de referencia */
.retratos-section{
  position: relative;
  overflow: hidden;
  background: #fafafa;   /* por si tarda en cargar */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 👇 espacio “seguro” para el listón que está en la imagen */
  padding: clamp(310px, 26vw, 190px) 20px 60px;  /* top | left/right | bottom */
}

/* El fondo NO debe empujar el contenido */
.fondo-retratos{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fondo-retratos .foto-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Todo el contenido por encima del fondo */
.retratos-section > :not(.fondo-retratos){
  position: relative;
  z-index: 2;
}

.retratos-section .section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.85rem;
  font-family: 'Dancing Script', cursive;
  color: #fafafa;
}

.retratos-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  gap: 40px;
}

.retratos-polaroid {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  padding: 24px 24px 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 340px;
}

.retratos-polaroid img {
  max-width: 290px;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  margin-bottom: 16px;
}

.retratos-caption {
  font-family: 'Dancing Script', cursive;
  color: var(--caramel-brown);
  font-size: 1.2rem;
  text-align: center;
  margin-top: 4px;
}

.retratos-arrow {
  background: #ede8ea;
  border: none;
  border-radius: 50%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #a18b92;
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.retratos-arrow:hover {
  background: #e3d8d4;  
}

.retratos-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}
.retratos-dots .dot {
  max-width: 12px;
  width: 100%;
  height: 12px;
  background: #dbe3d4;
  border-radius: 50%;
  display: inline-block;
  transition: background 0.2s;
}
.retratos-dots .dot.active {
  background: #8fa18b;
}


/* Carrusel: flechas superpuestas y siempre a la vista */
.retratos-carousel {
  position: relative;
  gap: 0;                       /* quitamos hueco lateral que empujaba flechas */
}

.retratos-polaroid {
  position: relative;
  width: clamp(260px, 86vw, 360px); /* un poco más ancho en móvil */
  margin: 0 56px;                   /* deja espacio "virtual" para las flechas */
}

.retratos-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  z-index: 5;
}
.retratos-arrow.left  { left: 6px; }
.retratos-arrow.right { right: 6px; }

/* Animación bonita al cambiar de foto */
@keyframes retrato-reveal {
  from { opacity: 0; transform: translateY(12px) scale(.98); filter: blur(2px); }
  to   { opacity: 1; transform: none;                    filter: none; }
}
.retratos-polaroid.animating img,
.retratos-polaroid.animating .retratos-caption {
  animation: retrato-reveal .48s ease forwards;
}



/*=====================
   SEPARADOR ELEGANTE
   ======================= */

.elegant-separator{
  --badge-top: 50%;        /* súbelo/bájalo afinando este valor */
  background: #fafbfa;
  padding: 36px 0 72px;
  position: relative;
  overflow: hidden;
}

.elegant-separator .waves{
  width: 100%;
  height: auto;
  display: block;
}

.divider-badge{
  position: absolute;
  left: 50%;
  top: var(--badge-top);    /* más arriba para alinearlo con las líneas */
  transform: translate(-50%, -50%);
  width: 170px;
  height: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;  /* el círculo ya lo pinta el SVG */
}

/* Imagen del badge en el separador elegante */
.badge-img-copa{
  width: 70%;
  height: 70%;
  object-fit: contain;       /* evita deformaciones */
  border-radius: 50%;        /* forma circular, opcional */
  background: #fff;          /* círculo blanco como el anterior */
  box-shadow: 0 6px 12px rgba(0,0,0,0.08); /* sombra suave */
  padding: 12px;             /* deja un borde interno para “marco” */
}



/* ===== Acápite bíblico con imagen de fondo ===== */

/* capa de la foto de fondo */
.fondo-versiculo {
  position: relative;
  inset: 0;               /* ocupa todo el alto/ancho de la sección */
  z-index: 0;             /* por debajo de todo */
  pointer-events: none;   /* no bloquea toques/clicks */
}
.fondo-versiculo .foto-img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* cubre sin deformarse */
  display: block;
}


/*==========================
   MÚSICA DE LA FIESTA
   ===================== */

.musica-section {
  background: #fafbfa;
  min-height: 20vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 60px 20px;
}

/* La sección es el contenedor de referencia */
.musica-section{
  position: relative;
  overflow: hidden;
  background: #fafafa;   /* por si tarda en cargar */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 👇 espacio “seguro” para el listón que está en la imagen */
  padding: clamp(310px, 26vw, 190px) 20px 60px;  /* top | left/right | bottom */
}

/* El fondo NO debe empujar el contenido */
.fondo-musica{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fondo-musica .foto-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Todo el contenido por encima del fondo */
.musica-section > :not(.fondo-musica){
  position: relative;
  z-index: 2;
}

.musica-subtitle {
  color: #b0aaa6;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 32px;
  margin-top: -50px;
  font-family: 'Playfair Display', serif;
}
.musica-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  padding: 36px 24px 32px 24px;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.musica-icon ion-icon {
  font-size: 3rem;
  color: var(--terracotta);
  margin-bottom: 10px;
}
.musica-pregunta {
  font-family: 'Playfair Display', serif;
  color: var(--terracotta);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}
.musica-ayuda {
  color: #b0aaa6;
  font-size: 1.1rem;
  margin-bottom: 28px;
  text-align: center;
}
.musica-btn {
  background: var(--dusty-rose);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 0;
  width: 90%;
  max-width: 600px;
  font-size: 1.1rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 10px;
}
.musica-btn:hover {
  background: var(--terracotta);
}

/* Modal sugerencia */
.modal-sugerencia {
  display: none;
  position: fixed;
  z-index: 4000;
  left: 0; 
  top: 0; 
  max-width: 100vw;
  width: 100%; 
  height: auto;
  align-items: center;
  justify-content: center;
}
.modal-sugerencia.active {
  display: flex;
}
.modal-overlay {
  position: fixed;
  left: 0; 
  top: 0; 
  max-width: 100vw;
  width: 100%;
  height: auto;
  background: rgba(0,0,0,0.18);
  z-index: 1;
}
.modal-content {
  position: center;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 48px 32px 32px 32px;
  max-width: 370px;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.modal-floral-cancion img {
  max-width: 175px;
  width: 100%;
  position: absolute;
  top: -70px;
  left: 6%;
  transform: translateX(-50%);
  z-index: 3;
}
.modal-icon-cancion ion-icon {
  font-size: 3.2rem;
  color: var(--terracotta);
  margin-bottom: 4px;
  margin-top: 4px;
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--terracotta);
  border: none;
  border-radius: 50%;
  max-width: 32px;
  width: 100%;
  height: auto;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}
.modal-close ion-icon {
  font-size: 1.5rem;
  color: #ffffff;
}

.modal-title-cancion {
  font-family: 'Playfair Display', serif;
  color: var(--terracotta);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 20px;
  margin-top: 4px;
  text-align: center;
}

.modal-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}
.modal-form input {
  border: none;
  border-bottom: 1px solid #dbe3d4;
  padding: 10px 4px;
  font-size: 1rem;
  outline: none;
  background: transparent;
  color: var(--terracotta);
  font-family: 'Playfair Display', serif;
}
.modal-form input:focus {
  border-bottom: 1.5px solid var(--dusty-rose);
}
.modal-submit {
  background: var(--dusty-rose);
  color: #fff;
  border: none;
  border-radius: 18px;
  padding: 12px 0;
  font-size: 1.1rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
}
.modal-submit:hover {
  background: var(--dusty-rose);
}

/*=================
Dress Code
=================*/
.dresscode-section {
  min-height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  background: #fafbfa;
}
.dresscode-card {
  background: #d6ae9657;
  border-radius: 20px;
  padding: 40px 32px 32px 32px;
  max-width: 200px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}
.dresscode-icon ion-icon {
  font-size: 3rem;
  color: var(--caramel-brown);
  margin-bottom: 10px;
}
.dresscode-title {
  font-family: 'Dancing Script', cursive;
  color: var(--caramel-brown);
  font-size: 2rem;
  margin-bottom: 10px;
}
.dresscode-desc {
  color: var(--terracotta);
  font-size: 1.15rem;
  margin-bottom: 28px;
  text-align: center;
}
.dresscode-btn {
  background: #fff;
  color: var(--caramel-brown);
  border: 1.5px solid var(--caramel-brown);
  border-radius: 10px;
  padding: 12px 0;
  width: 90%;
  font-size: 1.1rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.dresscode-btn:hover {
  background: #f3e9e3;
  color: var(--caramel-brown);
}

/* Modal Dress Code */
.modal-dresscode {
  display: none;
  position: fixed;
  z-index: 4000;
  left: 0; top: 0; max-width: 100vw; width: 100%; height: auto;
  align-items: center;
  justify-content: center;
}


.modal-dresscode.active {
  display: flex;
}
.modal-overlay {
  position: fixed;
  left: 0; top: 0; width: 100%; max-width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.18);
  z-index: 1;
}
.modal-content {
  position: relative;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  padding: 12px 6px 9px 6px;
  max-width: 340px;
  width: 100%;
  height: 400px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-floral-dresscode img {
  max-width: 190px;
  width: 100%;
  position: absolute;
  top: -65px;
  left: 5%;
  transform: translateX(-50%);
  z-index: 3;
}
.modal-icon ion-icon {
  font-size: 2rem;
  color: #fafafa;
  margin-bottom: 10px;
  margin-top: 10px;
}
.modal-close-dresscode {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--terracotta);
  border: none;
  border-radius: 50%;
  max-width: 32px;
  width: 100%;
  height: auto;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}
.modal-close-dresscode ion-icon {
  font-size: 1.8rem;
}
.modal-title {
  font-family: 'Playfair Display', serif;
  color: var(--caramel-brown);
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 1px;
  margin-top: -12px;
  text-align: center;
}
.modal-subtitle {
  color: var(--dusty-rose);
  font-size: 0.9rem;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
}
.modal-outfit-ideas {
  color: #a6a9b0;
  font-size: 0.9rem;
  margin-bottom: 1px;
  text-align: center;
}
.modal-outfit-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  margin-top: -10px;
  display: block;
}



/*===================
Tips & Notas
===================*/

/* Tarjeta Tips & Notas */
.tips-section {
  min-height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  background: #fafbfa; /* Fondo suave */
}
.tips-card {
  background: #d6ae9657; /* Fondo tarjeta */
  border-radius: 20px;
  padding: 32px 22px 22px 22px;
  max-width: 400px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8px 32px rgba(0,0,0,0.07);
}
.tips-icon ion-icon {
  font-size: 3rem;
  color: var(--dusty-rose);
  margin-bottom: 10px;
}
.tips-title {
  font-family: 'Dancing Script', cursive;
  color: var(--dusty-rose);
  font-size: 2rem;
  margin-bottom: 10px;
}
.tips-desc {
  color: white;
  font-size: 1.15rem;
  margin-bottom: 28px;
  text-align: center;
}
.tips-btn {
  background: #fff;
  color: #c59992;
  border: 1.5px solid #c59992;
  border-radius: 10px;
  padding: 12px 0;
  width: 90%;
  font-size: 1.1rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.tips-btn:hover {
  background: #e8c8c8;
  color: #c6857b;
}


/* La tarjeta debe ser referencia para el posicionamiento */
.tips-card{
  position: relative;
  overflow: shown;            /* recorta la imagen fuera de los bordes redondeados */
}

/* Imagen decorativa arriba a la izquierda */
.tips-deco-corner{
  position: absolute;
  top: -50px;                  /* mueve un poquito hacia arriba para que “asome” */
  left: -50px;                 /* y hacia la izquierda */
  width: clamp(120px, 28%, 220px); /* tamaño fluido */
  pointer-events: none;        /* no tapa el botón */
  opacity: .9;                 /* sutil */
  transform: rotate(-6deg);    /* leve ángulo, opcional */
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.12));
  /* Si tu PNG tiene fondo blanco y quieres integrarlo mejor:
     mix-blend-mode: multiply; */
}

.tips-deco-corner:not([src]){ display:none; } /* por si aún no cargas la imagen */

@media (max-width: 420px){
  .tips-deco-corner{
    top: -10px;
    left: -8px;
    width: 100%;               /* un poco más grande en móviles */
  }
}

/* Modal Tips & Notas */
.modal-tips {
  display: none;
  position: fixed;
  z-index: 4000;
  left: 0; top: 0; width: 100%; max-width: 100vw; height: 100vh;
  align-items: center;
  justify-content: center;
}
.modal-tips.active {
  display: flex;
}
.modal-overlay {
  position: fixed;
  left: 0; top: 0; width: 100%; max-width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.18);
  z-index: 1;
}
.modal-content-tips {
  position: relative;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  padding: 24px 12px 18px 12px;
  max-width: 340px;
  width: 100%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal-floral-tips img {
  max-width: 200px;
  width: 100%;
  position: absolute;
  top: -75px;
  left: 12%;
  transform: translateX(-55%);
  z-index: 3;
}
.modal-icon ion-icon {
  font-size: 2.2rem;
  color: var(--terracotta);
  margin-bottom: 10px;
  margin-top: 10px;
}
.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: var(--terracotta);
  border: none;
  border-radius: 50%;
  max-width: 32px;
  width: 100%;
  height: 32px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 4;
}
.modal-close ion-icon {
  font-size: 1.5rem;
}
.modal-title-tips {
  font-family: 'Playfair Display', serif;
  color: var(--caramel-brown);
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 12px;
  margin-top: 2px;
  text-align: center;
}
.modal-list-tips {
  color: var(--caramel-brown);
  font-size: 1.05rem;
  margin: 0 0 10px 0;
  padding: 0;
  list-style: none;
}
.modal-list-tips li {
  margin-bottom: 12px;
  color: var(--caramel-brown);
  text-align: left;
  line-height: 1.5;
}


/* === Ajustes de separación Dress Code y Tips & Notas === */

/* Mantener márgenes laterales seguros en ambas secciones */
.dresscode-section,
.tips-section {
  padding-left: 20px;
  padding-right: 20px;
}

/* Tarjetas: más compactas y sin pegarse a los bordes */
.dresscode-card,
.tips-card {
  max-width: 360px;              /* antes 400px */
  margin: 0 auto;                /* centradas siempre */
  padding: 28px 20px;            /* menos relleno interno */
}

/* Reducir espacio vertical de las secciones */
.dresscode-section {
  padding-top: 40px;
  padding-bottom: 40px;
}
.tips-section {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* En pantallas pequeñas, asegúrate que no se peguen a los lados */
@media (max-width: 480px) {
  .dresscode-card,
  .tips-card {
    max-width: 92%;              /* nunca tocar bordes */
  }
}



/* =======================
   COMPARTIR FOTOS
   ======================= */
.fotos-section{
  min-height: 20vh;
  background:#fafbfa;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:60px 20px;
}

.fotos-heading{
  font-family:'Dancing Script', cursive;
  color: var(--terracotta);             /* verde elegante, acorde a la paleta */
  text-align:center;
  line-height:1.1;
  font-size:clamp(2.2rem, 6vw, 3.2rem);
  margin:0 0 10px 0;
}

.fotos-subtitle{
  color:#b0aaa6;
  font-family:'Playfair Display', serif;
  font-size:1.15rem;
  text-align:center;
  margin:0 0 26px 0;
}

.fotos-card{
  background:#d6ae9657;        /* el mismo tono suave usado en otras tarjetas */
  border-radius:20px;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  padding:28px 22px 26px 22px;
  width:100%;
  max-width:400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  border:1px solid rgba(143,161,139,.25);
}

.fotos-qr{
  width:min(300px, 78vw);
  height:auto;
  background:#fff;
  border-radius:12px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  padding:10px;
}

.fotos-legend{
  color: var(--dusty-rose);
  font-size:1.02rem;
  margin:14px 0 18px 0;
  text-align:center;
  font-weight:600;
}

.fotos-btn{
  background:var(--dusty-rose);        /* mismo estilo de botones de la web */
  color:#fff;
  text-decoration:none;
  border:none;
  border-radius:10px;
  padding:14px 26px;
  font-size:1.05rem;
  font-family:'Playfair Display', serif;
  font-weight:600;
  cursor:pointer;
  transition:background .2s;
  display:inline-block;
}
.fotos-btn:hover{ background: var(--terracotta); }


/*=====================
   SEPARADOR ELEGANTE
   ======================= */

.elegant-separator-confirmacion{
  min-height: 50vh;
  --badge-top: 30%;        /* súbelo/bájalo afinando este valor */
  background: #fafbfa;
  padding: 36px 0 72px;
  position: relative;
  overflow: hidden;
}

.elegant-separator-confirmacion .waves{
  width: 100%;
  height: auto;
  display: block;
}

.divider-badge-confirmacion{
  position: absolute;
  left: 50%;
  top: var(--badge-top);    /* más arriba para alinearlo con las líneas */
  transform: translate(-50%, -50%);
  max-width: 140px;
  width: 100%;
  height: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: transparent;  /* el círculo ya lo pinta el SVG */
  z-index: 0;
}

/* Imagen del badge en el separador elegante */
.badge-img-confirmacion{
  width: 100%;
  height: auto;
  object-fit: contain;       /* evita deformaciones */
  border-radius: 50%;        /* forma circular, opcional */
  background: #fff;          /* círculo blanco como el anterior */
  box-shadow: 0 6px 12px rgba(0,0,0,0.08); /* sombra suave */
  padding: 5px;   
  z-index: 1;          /* deja un borde interno para “marco” */
}


/*===============
    Regalos
===============*/

/* La sección es el contenedor de referencia */
.regalos-section{
  position: relative;
  overflow: hidden;
  background: #fafafa;   /* por si tarda en cargar */
  min-height: auto;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-width: 992px){
  .regalos-section{
    min-height: 20vh; /* solo en escritorio */
  }
}

/* El fondo NO debe empujar el contenido */
.fondo-regalos{
  position: relative;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fondo-regalos .foto-img{
  width: 100%;
  height: 10=-0%;
  object-fit: cover;
  display: block;
}

/* Todo el contenido por encima del fondo */
.regalos-section > :not(.fondo-regalos){
  position: relative;
  z-index: 2;
}

/* ===== Regalos (cards) ===== */

.btn{
  display:inline-flex; align-items:center; gap:8px;
  justify-content:center; width:100%;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight:700; font-family:'Playfair Display', serif;
  color:#fff; background: linear-gradient(180deg, #8fa18b, #6f846f);
  border: none;
  text-decoration:none;
}
.btn.outline{
  background: #fff; color: #4c5d4e;
  border: 1.5px solid #6f846f;
}

#rsvp.rsvp-section {
  margin-top: -20px;    /* acerca más la sección de RSVP a Regalos */
}

.regalos-actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-width: 320px;
  max-width: 400px;
  flex: 1 1 320px;
  justify-content: flex-start;
  align-items: stretch;
  margin-top: 18px;
}

.regalos-btn {
  background: #7a8b7a;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 0;
  font-size: 1rem;
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  margin-bottom: 0;
  text-align: center;
  display: block;
}
.regalos-btn.amazon {
  background: var(--terracotta);
}
.regalos-btn.zelle {
  background: #fff;
  color: var(--caramel-brown);
  border: 2px solid var(--caramel-brown);
  margin-top: 8px;
}
.regalos-btn:hover {
  background: #d4aa8a;
  color: #fff;
}
.regalos-btn.zelle:hover {
  background: #c5b4ac;
  color: var(--caramel-brown);
}

/* === Ajustes de botones en sección Regalos === */
.regalos-section {
  position: relative; /* referencia para posicionamiento absoluto */
}

.regalos-actions {
  position: absolute;
  inset: 0;          /* ocupa toda la sección */
  pointer-events: none; /* evita que bloquee el scroll/clicks en otros lados */
}

/* Cada botón posicionado manualmente */
#regalos-amazon,
#regalos-zelle {
  position: absolute;
  pointer-events: auto; /* vuelve a ser clickeable */
  width: auto;
  max-width: 130px;
  padding: 12px 18px;
  font-size: 0.85rem;
}

/* Amazon → abajo a la derecha */
#regalos-amazon {
  bottom: 17%;   /* ajusta según tu imagen */
  right: 33%;    /* ajusta según tu imagen */
}

/* Zelle → arriba a la izquierda */
#regalos-zelle {
  top: 85%;     /* ajusta según tu imagen */
  left: 34%;     /* ajusta según tu imagen */
}

/* =======================
   CONFIRMACIÓN (WhatsApp)
   ======================= */

/* Sección principal de RSVP */
.rsvp-section {
  margin-top: 20px;
  min-height: 20vh;
  background: #fafbfa;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* Asegura que la tarjeta no se desplace */
}

/* Títulos y subtítulos */
.rsvp-heading {
  font-family: 'Dancing Script', cursive;
  color: var(--terracotta);
  text-align: center;
  line-height: 1.1;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  margin: 0 0 8px 0;
}

.rsvp-subtitle {
  color: var(--muted-text, #8d807f);
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  text-align: center;
  margin: 0 0 26px 0;
}

/* Tarjeta de RSVP */
.rsvp-card {
  width: 100%;
  max-width: 460px;
  background: var(--soft-card, #d6ae9657);
  border: 1px solid rgba(143, 161, 139, 0.25);
  border-radius: 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  position: relative; /* Evita desplazamientos */
}

/* Icono de RSVP */
.rsvp-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f3f5f28d;
  color: #422f23;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.rsvp-icon svg {
  width: 34px;
  height: auto;
}

/* Botón CTA */
.rsvp-cta {
  background: var(--dusty-rose);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 14px 28px;
  font-weight: 700;
  letter-spacing: 0.3px;
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  cursor: pointer;
  transition: background 0.2s; /* Removida transform para evitar movimiento */
}

.rsvp-cta:hover {
  background: #6a5551a8;
}

.rsvp-cta:active {
  filter: brightness(0.95); /* Reemplaza transform por un efecto visual */
}

/* Link rápido */
.rsvp-link-quick {
  font-size: 0.95rem;
  color: var(--dusty-rose, #c59992);
  text-decoration: underline;
  opacity: 0.8;
}

/* Modal principal */
.rsvp-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh; /* Evita que se reduzca con el teclado */
  display: none;
  z-index: 5000;
  background: rgba(0, 0, 0, 0.18); /* Fondo oscuro como Tips & Notas */
  align-items: center;
  justify-content: center;
 /* touch-action: none; /* Evita scroll táctil en el modal */
}

/* Estado abierto */
.rsvp-modal.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}

/* Fondo del modal */
.rsvp-modal__backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.18);
  z-index: 1;
}

/* Tarjeta del modal */
.rsvp-modal__card {
  position: relative;
  width: min(92vw, 380px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
  padding: 36px 24px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: none; /* Removida transición translateY */
  transition: opacity 0.3s ease; /* Solo transición de opacidad */
}

.rsvp-modal.active .rsvp-modal__card {
  opacity: 1;
}

/* Botón de cierre */
.rsvp-modal__close {
  position: absolute;
  right: 14px;
  top: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--terracotta);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

/* Badge del modal */
.rsvp-modal__badge {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--soft-card, #f5f3f2);
  color: var(--terracotta, #c59992);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  margin: -62px auto 12px;
}

.rsvp-modal__badge svg {
  width: 38px;
  height: 38px;
}

/* Título del modal */
.rsvp-modal__title {
  font-family: 'Playfair Display', serif;
  color: #693d31;
  text-align: center;
  margin: 8px 0 14px;
  font-size: 1.4rem;
}

/* Opciones de radio */
.rsvp-modal__options {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 12px;
}

.rsvp-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: #efdddd8a;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  user-select: none;
}

.rsvp-radio input {
  accent-color: var(--dusty-rose, #c59992);
}

/* Inputs */
.rsvp-inputs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 10px 0 16px;
}

.rsvp-inputs input {
  width: 100%;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  padding: 12px 6px;
  outline: none;
  font-size: 1rem;
  font-family: inherit;
}

.rsvp-inputs input:focus {
  border-bottom-color: var(--dusty-rose, #c59992);
}

/* Botón de envío */
.rsvp-send {
  width: 100%;
  background: var(--dusty-rose);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-family: 'Playfair Display', serif;
  font-size: 1.02rem;
  cursor: pointer;
  transition: filter 0.15s ease;
}

.rsvp-send:hover {
  filter: brightness(0.95);
}






/* ===== Banner final ===== */
.farewell-banner{
  background: linear-gradient(180deg, #fafbfa 0%, #eef3ee 100%);
  padding: 56px 20px calc(86px + var(--safe-b)); /* margen inferior extra por el botón de música */
  text-align: center;
}
.farewell-inner{
  max-width: 720px;
  margin: 0 auto;
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(143,161,139,.22);
  box-shadow: 0 10px 40px rgba(0,0,0,.08);
  padding: 36px 20px 30px;
}
.farewell-names{
  font-family: 'Dancing Script', cursive;
  color: var(--terracotta);
  font-size: clamp(2.4rem, 7vw, 4rem);
  line-height: 1;
  margin: 0;
}
.farewell-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0 10px;
}
.farewell-divider span{
  display: block;
  width: 64px;
  max-width: 22vw;
  height: 2px;
  background: #e3ddd4;
  border-radius: 2px;
}
.farewell-divider ion-icon{
  color: #e3ddd4;
  font-size: 20px;
}
.farewell-sub{
  font-family: 'Playfair Display', serif;
  color: var(--terracotta);
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  letter-spacing: .3px;
}

.modal-floral-behind2 {
  position: absolute;
  top: 115px; /* Ajusta según tu diseño */
  left: 10%;
  transform: translateX(-50%);
  z-index: 4000; /* Detrás de la tarjeta */
  pointer-events: none;
}

.modal-floral-behind2 img {
  max-width: 170px; /* Ajusta el tamaño según prefieras */
  width: 100%;
  display: block;
}


.modal-floral-behind3 {
  position: absolute;
  top: 22px; /* Ajusta según tu diseño */
  transform: translateX(320px);
  z-index: 4000; /* Detrás de la tarjeta */
  pointer-events: none;
}

.modal-floral-behind3 img {
  max-width: 140px; /* Ajusta el tamaño según prefieras */
  width: 100%;
  display: block;
}




/* ===========================
   FIX PACK: responsive + anti-overflow
   Pegar al FINAL del archivo
   =========================== */

/* 0) Viewport seguro y box-sizing coherente */
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: inherit; min-width: 0; }

html, body { overflow-x: clip; } /* evita scroll lateral por decorativos */

/* 1) Imágenes y media siempre fluidos */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* 2) Tipografías y espacios fluidos */
:root {
  --safe-b: env(safe-area-inset-bottom, 0px);
}
.landing-names { font-size: clamp(2.2rem, 6vw, 4rem); }
.landing-phrase { font-size: clamp(1rem, 2.5vw, 1.5rem); }

/* 3) Botones fijos: evita que se pisen música vs landing */
.music-btn { bottom: calc(32px + var(--safe-b)); right: 32px; }
@media (max-width: 480px) {
  .landing-btn { right: calc(32px + 64px); } /* corre un poco a la izquierda */
}

/* 4) Secciones a pantalla completa: usa 100dvh (corrige 100vh en móviles) */
.landing-cover,
.countdown-section,
.ceremonia-section,
.fiesta-section,
.retratos-section,
.musica-section,
.dresscode-section,
.tips-section,
.fotos-section,
.regalos-section,
.rsvp-section {
  min-height: 100dvh;
}

/* 5) Countdown: quita tamaños fijos y usa vmin + aspect */
.countdown-circle {
  width: min(80vmin, 400px);
  height: min(80vmin, 240px);
}
.countdown-floral {
  width: 190%;
  height: auto;
  left: 50%; /* centrado real */
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none; /* no tapa toques */
}

/* 6) Tarjetas y columnas: elimina min-width 340px que rompía móviles angostos */
.ceremonia-info,
.fiesta-info,
.ceremonia-actions,
.fiesta-actions {
  min-width: 0;         /* anula min-width previos */
  width: min(420px, 100%);
  flex: 1 1 300px;      /* deja que rompa línea bonito */
}

/* 7) Polaroids: fluidas y con ratio estable, sin desbordes */
.retratos-polaroid { width: clamp(260px, 70vw, 340px); }
.retratos-polaroid img {
  width: 100%;
  height: auto;
  aspect-ratio: 29 / 32;      /* mantiene forma sin height fijo */
  object-fit: cover;
}

/* 8) Decoración en separadores y PNG centrado: que no cause overflow ni tape */
.custom-image-slot { pointer-events: none; }
.custom-image-slot img { width: min(230px, 60vw); }
.elegant-separator .waves { height: auto; } /* deja que el SVG sea fluido */

/* 9) Overlays y modales: siempre a pantalla completa y tarjetas con width fluida */
.modal-sugerencia,
.modal-dresscode,
.modal-tips,
.modal-regalos,
.rsvp-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  display: none;
  align-items: center;
  justify-content: center;
}
.modal-sugerencia.active,
.modal-dresscode.active,
.modal-tips.active,
.modal-regalos.active,
.rsvp-modal__card.active { display: flex; }

.modal-overlay { position: fixed; inset: 0; width: 100vw; height: 100dvh; }

.modal-content,
.modal-content-tips,
.modal-content-regalos,
.rsvp-modal__card {
  width: min(92vw, 380px);   /* no usar 40vw en móviles */
}

/* 10) Arreglo de propiedad inválida: debería ser visible */
.tips-card { overflow: visible; }  /* antes decías: overflow: shown; */

/* 11) Scroll-down arrow más prudente en móviles pequeños */
.scroll-down-arrow { font-size: clamp(2rem, 8vw, 3.5rem); }

/* 12) Mejoras de accesibilidad en hover para táctiles y reduce motion */
@media (hover: none) {
  .landing-btn:hover,
  .music-btn:hover,
  .retratos-arrow:hover,
  .fiesta-btn:hover,
  .ceremonia-btn:hover,
  .musica-btn:hover,
  .dresscode-btn:hover,
  .tips-btn:hover,
  .regalos-btn:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/*-----------------
Celebracion y retratos  
------------------*/
/* Títulos: una sola línea y tamaño fluido */
.section-title-celebracion,
.retratos-section .section-title {
  white-space: nowrap;             /* no permitir salto de línea */
  overflow: hidden;                /* por si el dispositivo es ultra angosto */
  text-overflow: ellipsis;         /* recorta con "…" si no entra */
  letter-spacing: .5px;
}

/* Tamaño fluido, sin romper layout */
.section-title-celebracion {
  font-size: clamp(1.6rem, 6.2vw, 2.4rem);
  padding: 10px clamp(22px, 6.5vw, 52px);
  line-height: 1.1;
}
.retratos-section .section-title {
  font-size: clamp(1.5rem, 5.6vw, 2.1rem);
  padding: 10px clamp(20px, 6.5vw, 44px);
  line-height: 1.1;
}





/* ===== Scroll reveal (aparición al hacer scroll) ===== */
[data-reveal]{
  --reveal-dur: .65s;
  --reveal-delay: 0ms;
  --reveal-ease: cubic-bezier(.21,.61,.35,1);
  opacity: 0;
  transform: translateY(14px);
  filter: none;
  transition:
    opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay),
    transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay),
    filter var(--reveal-dur) var(--reveal-ease) var(--reveal-delay);
  will-change: opacity, transform, filter;
}

/* Variantes */
[data-reveal="fade"]      { transform: none; }
[data-reveal="fade-up"]   { transform: translateY(16px); }
[data-reveal="fade-down"] { transform: translateY(-16px); }
[data-reveal="left"]      { transform: translateX(-22px); }
[data-reveal="right"]     { transform: translateX(22px); }
[data-reveal="zoom-in"]   { transform: scale(.96); }
[data-reveal="blur-in"]   { filter: blur(6px); }

/* Estado visible */
.is-visible{
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Stagger (efecto en cascada para hijos) */
[data-stagger] > *{ /* el delay por hijo lo setea el JS con --reveal-delay */
  opacity: 0;
}

/* Respeta accesibilidad: sin animaciones si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  [data-reveal],
  [data-stagger] > *{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}