@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');

#portadaTextos {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  max-width: none;
  text-align: center;
  pointer-events: none; /* no bloquear el click del sobre */
  z-index: 2;
}

#portadaTextos .nboda {
  margin-top: 3%;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(28px, 8vw, 42px);
  color: #ffffff;
}

#portadaTextos .nombresPareja {
  margin-top: 1%;
  font-family: 'Cinzel', serif;
  letter-spacing: 3px;
  font-size: clamp(18px, 5.5vw, 34px);
  font-weight: 500;
  color: #ffffff;
}

#portadaTextos .fechaEvento {
  margin-top: 1%;
  font-family: 'Cinzel', serif;
  font-size: clamp(12px, 3.6vw, 19px);
  color: #ffffff;
}

#portadaTextos .ctaAbrir {
  margin-top: 26%;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(10px, 3.2vw, 12px);
  letter-spacing: 1px;
  color: #ffffff;
}


    html, body {
      margin: 0; padding: 0; height: 100%;
      background-color: #fffbfc;
      overflow-x: hidden;
      overflow-y: auto;
      font-family: 'Palatino Linotype', serif;
    }

    #contenedor {
  position: relative;
  width: 100vw;
  height: 100vh;                 /* full-screen */
  max-width: none;
  margin: 0 auto;
  background: url('../images/fondo_2.jpg') center/cover no-repeat;
  background-color: #fffbfc;
  opacity: 1;                      /* visible */
  transition: opacity 1.8s ease;   /* duración y suavidad */
}

/* Banda blanca inferior sobre la imagen de portada */
#contenedor::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  height: 100%;
  /* De menos a más: transparente arriba → blanco abajo */
  background: linear-gradient(
    to bottom,
    rgba(128,128,128,0.00) 0%,
    rgba(128,128,128,0.1) 25%,
    rgba(128,128,128,0.1) 45%,
    rgba(128,128,128,0.15) 65%,
    rgba(0,0,0,0.35) 82%,
    rgba(0,0,0,0.45) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Portada desvaneciéndose */
#contenedor.fade-out {
  opacity: 0;
}

    #fondo { display: none; }


    #nombreGrupo {
      position: absolute;
      top: 42vh;
      left: 50%;
      transform: translateX(-50%);
      width: 80vw;
      max-width: 900px;
      text-align: center;
     color: #ffffff; /* COLOR TEXTO */
      font-size: clamp(10px, 1.3vw, 14px);
      font-weight: normal;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      user-select: none;
      font-family: 'Palatino Linotype', serif;
    }
    #lineaArriba, #lineaAbajo {
      height: 8px;
      width: 140px;
      margin: 0 auto;
      background-repeat: repeat-x;
      background-position: center;
      background-size: 24px 8px;
      /* Onda más marcada y elegante */
      background-image: url("data:image/svg+xml,%3Csvg width='24' height='8' viewBox='0 0 24 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4 C 3 0 6 8 9 4 C 12 0 15 8 18 4 C 21 0 24 8 27 4' fill='none' stroke='%238a7963' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
    }
    #textoAbrirInvitacion{
      margin-top:22%;
      color:#e91e63;
      font-size:clamp(11px,1.6vw,15px);
      letter-spacing:1.5px;
      text-transform:uppercase;
      font-family:'Palatino Linotype', serif;
      line-height:1.3;
    }
    #lineaArriba { margin-bottom: 5px; }
    #lineaAbajo { margin-top: 5px; }
    #numPase {
      display: none;
    }
/* Contenedor centrado abajo */
#imgInferiorLink {
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%); /* centra en ambos ejes */
  cursor: pointer;
  z-index: 3;                    /* sobre el degradado */
  width: auto;
  height: auto;

  /* sin rectángulo clickeable grande */
  background-color: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Wrapper de carta: fija un ancho y sirve de referencia para el título */
#imgInferiorLink #cartaWrapper {
  position: relative;
  width: clamp(220px, 45vw, 600px);
  max-width: 90vw;
}

/* Imagen de la carta clickeable */
#imgInferiorLink #btnCarta {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;               /* por debajo del nombre */
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.25));
  pointer-events: none;  /* el clic lo maneja el contenedor */
  /* Bajar un poco la carta sin mover el nombre */
  margin-top: clamp(8px, 2.5vw, 28px);
}

/* Nombre del invitado sobre la carta (responsive) */
#imgInferiorLink #nombreGrupo {
  position: absolute !important;   /* relativo al wrapper */
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 23.5% !important;   /* altura respecto al borde superior de la carta */
  width: 100% !important;
  text-align: center;
  color: #e91e63; /* magenta */
  font-size: clamp(10px, 1.3vw, 14px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  user-select: none;
  z-index: 2;               /* por encima de la imagen de la carta */
  pointer-events: none;     /* no bloquear el clic del contenedor */
}
#imgInferiorLink #lineaAbajo {
  height: 8px;
  width: 140px;
  margin: 6px auto;
  background-repeat: repeat-x;
  background-position: center;
  background-size: 48px 8px;
  /* Línea ondulada elegante en color magenta - ondas más largas y suaves */
  background-image: url("data:image/svg+xml,%3Csvg width='48' height='8' viewBox='0 0 48 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 4 C 6 2 12 6 18 4 C 24 2 30 6 36 4 C 42 2 48 6 54 4' fill='none' stroke='%23e91e63' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Ajuste en móviles para no desbordar */
@media (max-width: 480px) {
  #imgInferiorLink #cartaWrapper { width: clamp(280px, 95vw, 560px); }
  #imgInferiorLink #nombreGrupo { top: 24.5% !important; }
}

/* Afinado por grupos de anchura para mantener la misma altura sobre el sobre */
@media (min-width: 340px) and (max-width: 400px) {
  #imgInferiorLink #nombreGrupo { top: 20.0% !important; }
}
@media (min-width: 401px) and (max-width: 430px) {
  #imgInferiorLink #nombreGrupo { top: 20% !important; }
}
@media (min-width: 431px) and (max-width: 540px) {
  #imgInferiorLink #nombreGrupo { top: 21% !important; }
}
@media (min-width: 541px) and (max-width: 768px) {
  #imgInferiorLink #nombreGrupo { top: 16.4% !important; }
}
/* iPad mini / tablets en vertical (ancho medio) */
@media (min-width: 481px) and (max-width: 1024px) {
  #imgInferiorLink #cartaWrapper { width: clamp(380px, 58vw, 720px); }
  #imgInferiorLink #nombreGrupo { top: 23.5% !important; }
}

/* Smart displays/tablets en paisaje con poca altura (Nest Hub ~1024x600) */
@media (min-width: 900px) and (max-height: 700px) {
  #imgInferiorLink #cartaWrapper { width: clamp(300px, 36vw, 520px); }
  #imgInferiorLink #nombreGrupo { top: 21.4% !important; }
}
/* “Número de Pase” editable en portada */
#portadaPases {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(15px, 9vh, 200px); /* subir/bajar reservas en portada de forma responsive */
  width: 100vw;
  max-width: 400px;
  text-align: center;
  pointer-events: none;      /* no tapar interacciones */
  z-index: 3;
}

#portadaPases .pp-title,
#portadaPases .pp-subtitle {
  font-family: 'Cinzel', serif;
  letter-spacing: 5px;
  font-size: 16px;
  color: #ffffff;
  font-weight: 600 !important;
}

#portadaPases .pp-circles {
  --pases-width: 220px;
  margin: 10px auto 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 18px;
  width: var(--pases-width);
}

#portadaPases .pp-circles .circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #a28f78;
  background: transparent;
  display: inline-block;
  justify-self: center; /* centra el círculo dentro de su celda */
}

#portadaPases .pp-circles .circle.active {
  background: #e91e63;        /* magenta activo */
  border-color: #e91e63;
}

#portadaPases .pp-numbers {
  --pases-width: 220px;
  margin-top: 5px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap: 18px;
  width: var(--pases-width);
  margin-left: auto;
  margin-right: auto;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  color: #ffffff;
  font-weight: 600 !important;
}

/* sección oculta por defecto */
#seccionNueva,
#Seccion1partB,
#seccionDos,
#seccionCuatro,
#seccionCinco,
#Opcionales,
#SeccionCarrusel, 
#SeccionPas,
#SeccionFin {
  display: none;
}

/* clase para mostrar */
.mostrar {
  display: block !important; /* solo JS puede activarla */
}



/* SECCIÓN 1 */
    #seccionNueva {
      display: none;
      width: 100vw;
      max-width: 400px;
      margin: 0 auto;
      position: relative;
    }
    #fondoSeccion {
      width: 100%;
      display: block;
    }

/* ===== Overlay editable Sección 1 (sobre seccion1.jpg) ===== */
#seccionNueva .sec1-overlay{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

#seccionNueva .sec1-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient( /* capa negra clara sobre la imagen */
    to bottom,
    rgba(128,128,128,0.00) 0%,
    rgba(128,128,128,0.1) 25%,
    rgba(25,25,25,0.15) 45%,
    rgba(25,25,25,0.30) 65%,
    rgba(25,25,25,0.25) 82%,
    rgba(45,45,45,0.25) 100%
  );
  z-index: 0;
}

#seccionNueva .sec1-overlay > *{
  position: relative;
  z-index: 1; /* textos por encima de la capa oscura */
}
#seccionNueva .love{
  position: absolute;
  top: 12%;
  left: 30%;
  transform: translateX(-50%);
  font-family: 'Great Vibes', cursive;
  color: #e91e63; /* magenta */
  font-size: clamp(48px, 12vw, 120px);
  line-height: 1;
  white-space: nowrap; /* Mantener el texto en una sola línea */
}

/* Ajustes responsivos del "Love" por dispositivo */
@media (max-width: 480px){
  #seccionNueva .love{
    top: 9%;
    left: 33%;
    font-size: 48px; /* Tamaño fijo de 48px */
    white-space: nowrap;
  }
}
@media (min-width: 481px) and (max-width: 768px){
  #seccionNueva .love{
    top: 8%;
    left: 33%;
    font-size: 64px;
  }
}
@media (min-width: 769px) and (max-width: 1024px){
  #seccionNueva .love{
    top: 8%;
    left: 32%;
    font-size: 74px;
  }
}
@media (min-width: 1025px){
  #seccionNueva .love{
    top: 8%;
    left: 42%;
    font-size: 84px;
  }
}

#seccionNueva .names-block{
  position: absolute;
  top: 35%;                   /* debajo de “Love” */
  left: 50%;                  /* desplaza el bloque hacia la derecha */
  transform: translateX(-50%);  /* mantiene centrado respecto a su nuevo punto */
  display: grid;
  grid-template-columns: 1fr auto;          /* nombres a la izquierda, fecha a la derecha */
  align-items: center;                       /* centrar verticalmente nombres y fecha */
  column-gap: 10px;                          /* juntar nombres y línea/números */
  width: 80%;
  max-width: 520px;
}

#seccionNueva .names{
  grid-column: 1 / 2;
  display: grid;
  grid-template-rows: auto auto auto;       /* nombre 1, &, nombre 2 */
  row-gap: 10px;
  justify-items: right;                    /* centrado horizontal */
}

#seccionNueva .name .first{
  font-family: 'Cinzel', serif;
  letter-spacing: 4px;
  font-size: clamp(16px, 2.1vw, 24px);
  color: #ffffff;
  text-align: right;                 /* alinear a la derecha solo el texto del nombre */
}
#seccionNueva .name .last{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(10px, 1.2vw, 12px);
  color: #ffffff;
  text-align: right;                 /* alinear a la derecha el apellido */
}

#seccionNueva .amp{
  grid-row: 2;
  font-family: 'Cinzel', serif;
  font-size: clamp(18px, 2.4vw, 26px);
  align-self: center;
  color: #ffffff;
}

#seccionNueva .vdate{
  grid-column: 2 / 3;
  display: grid;
  grid-template-rows: repeat(3, auto);
  row-gap: clamp(6px, 1.2vw, 10px);
  padding-left: 14px;
  border-left: 3px solid #FFD700; /* línea vertical amarilla más gruesa y visible */
}
#seccionNueva .vdate span{
  font-family: 'Cinzel', serif;
  color: #FFD700; /* amarillo dorado vibrante */
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 500;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); /* resplandor amarillo sutil */
}

#seccionNueva .story{
  position: absolute;
  left: 50%;
  top: 60%;                   /* debajo de los nombres y números */
  transform: translateX(-50%);
  width: 73%;
  max-width: 520px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 1.3vw, 14px);
  color: #ffffff;
  line-height: 1.55;
}

/* ===== hacer #seccionNueva full-screen cover (como portada) ===== */
#seccionNueva{
  position: relative !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  overflow: hidden !important;
}
#fondoSeccion{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}
#seccionNueva .sec1-overlay{ position: absolute !important; inset: 0 !important; }
@media (max-height: 700px){
  #seccionNueva{ min-height: 700px !important; height: auto !important; }
}
/* SECCIÓN 1 parte B */
#Seccion1partB {
  display: none;
  width: 100%;
  max-width: none;
  margin: 0;
  position: relative;
}

#fondoSeccion1partB {
  /* imagen a ancho completo de la pantalla (full‑bleed) incluso si el contenedor es angosto */
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  display: block !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}

/* ===== Contenido editable Sección 1B (Padres / Padrinos) ===== */
#Seccion1partB .sec1b-content{
  position: relative;
  pointer-events: auto;
  display: grid;
  place-items: center;
  padding: 8vh 4vw 4vh;
  box-sizing: border-box;
  gap: clamp(10px, 3vh, 24px);
  width: min(90%, 800px);
  margin: 0 auto;
}
/* título superior */
#Seccion1partB .sec1b-content .blessing{
  font-family: 'Cinzel', serif;
  text-align: center;
  letter-spacing: 1px;
  color: #d11553; /* sobre fondo claro de la imagen 1b */
  font-size: clamp(12px, 4.8vw, 24px);
  line-height: 1.4;
  font-weight: 500; /* un poco más gruesa y elegante solo aquí */
}
/* grupos */
#Seccion1partB .sec1b-content .group{
  text-align: center;
  display: grid;
  gap: clamp(6px, 1.2vh, 12px);
}
#Seccion1partB .sec1b-content .group-title{
  font-family: 'Great Vibes', cursive;
  color: #1e3d69;
  font-size: clamp(32px, 4.6vw, 42px);
  line-height: 1.1;
}
#Seccion1partB .sec1b-content .group-names{
  font-family: 'Poppins', sans-serif;
  color: #000;
  font-size: clamp(12px, 4.6vw, 14px);
  line-height: 1.5;
}

/* responsive: ancho cómodo similar a la referencia */
@media (min-width: 769px){
  #Seccion1partB .sec1b-content{ width: 73%; }
}

/* ===== Sección SAVE THE DATE (ahora dentro de #seccionAgendar) ===== */
#seccionAgendar{
  display: none;               /* se muestra al abrir */
  width: 100%;
  position: relative;
  padding: 6vh 0;
  background: #fffbfc;
}
#seccionAgendar .save-container{
  width: 100%;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: grid;
  place-items: center;   /* centra horizontal y verticalmente el contenido */
  padding-left: clamp(12px, 4vw, 20px);   /* deja respiración lateral */
  padding-right: clamp(12px, 4vw, 20px);
  box-sizing: border-box;
}
#seccionAgendar .save-title{
  font-family: 'Cinzel', serif;
  letter-spacing: 6px;
  color: #1e3d69;
  font-size: clamp(24px, 4.6vw, 34px);
  margin-bottom: clamp(16px, 2.8vh, 28px);
}
#seccionAgendar .save-title span{
  font-family: 'Great Vibes', cursive;
  letter-spacing: 0;
  font-size: 1.1em;
}
#seccionAgendar .calendar-card{
  /* Crece hasta 480px y luego se mantiene; respeta el padding lateral del contenedor */
  width: min(480px, 100%);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;     /* fuerza centrado dentro del grid */
  box-sizing: border-box;
  background: #fff;               /* panel blanco */
  /* Cúpula mediante radios elípticos con porcentajes (ancho/alto del propio panel) */
  border-radius: 50% 50% 20px 20px / 38% 38% 20px 20px;
  /* Sube o baja la “unión” de la cúpula ajustando este padding-top */
  padding: clamp(56px, 10vh, 120px) clamp(16px, 2.5vw, 28px) clamp(20px, 3vw, 28px);
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.08)); /* sombra al conjunto */
  position: relative;
  overflow: hidden;
}
#seccionAgendar .calendar-card::before,
#seccionAgendar .calendar-card::after{ content: none; }
#seccionAgendar .calendar-card > *{ position: relative; z-index: 1; }
#seccionAgendar .month-name{
  font-family: 'Great Vibes', cursive; /* script como la referencia */
  color: #d11553;
  font-size: clamp(20px, 10vw, 48px);
  margin-top: clamp(6px, 1.6vw, 12px);
  margin-bottom: clamp(10px, 1.2vw, 18px);
}
#seccionAgendar .dow{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(6px, 1vw, 10px);
  font-family: 'Poppins', sans-serif;
  color: #6b6b6b;
  font-size: clamp(10px, 1.2vw, 12px);
  margin-bottom: clamp(8px, 1.2vw, 10px);
}
#seccionAgendar .dow span{ opacity: .9; }
#seccionAgendar .days-grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(6px, 1vw, 10px);
  font-family: 'Poppins', sans-serif;
  color: #000;
  font-size: clamp(12px, 1.6vw, 16px);
  margin-bottom: clamp(16px, 2.2vw, 24px);
  min-height: 8rem;
}
#seccionAgendar .day{
  padding: clamp(6px, 1vw, 10px) 0;
}
#seccionAgendar .day.blank{ opacity: 0; }
#seccionAgendar .day.event{
  position: relative;
  color: #fff;
  font-weight: 700;
}
#seccionAgendar .day.event::before,
#seccionAgendar .day.event::after{
  content:'';
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) rotate(-45deg);
  width: clamp(20px, 4.4vw, 30px);
  height: clamp(20px, 4.4vw, 30px);
  background: #d11553;
  border-radius: 4px 0 0 0;
  z-index:-1;
}
#seccionAgendar .day.event::after{
  transform: translate(calc(-50% + 50%), calc(-50% - 0%));
  width: clamp(10px, 2.6vw, 16px);
  height: clamp(10px, 2.6vw, 16px);
  border-radius: 50%;
  background: #d11553;
}
#seccionAgendar .add-calendar{
  display: inline-block;
  background: #d11553;
  color:#fff;
  font-family: 'Cinzel', serif;
  letter-spacing: 1px;
  font-size: clamp(12px, 1.6vw, 16px);
  padding: clamp(10px, 1.6vw, 14px) clamp(16px, 2.2vw, 24px);
  border-radius: 10px;
  text-decoration: none;
}
#seccionAgendar .add-calendar::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f073"; /* calendar-days */
  margin-right: 10px;
}
/* (el antiguo bloque de imagen de #seccionAgendar se reemplazó por la tarjeta Save the Date) */


/* POPUP PARA AGENDAR FECHA */

.popup-agenda {
    display: none; /* oculto al inicio */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.45); 
    backdrop-filter: blur(2px);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.popup-contenido {
    background: white;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    width: 260px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.popup-contenido button {
   margin: 10px auto;   /* ← centra horizontal */
    width: 180px;
    padding: 15px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.popup-contenido button img {
    margin-right: 10px;
}

.popup-contenido button:first-child {
    background-color: #4285F4;
    color: white;
}

.popup-contenido button:last-child {
    background-color: white;
    border: 1px solid #ccc;
}

.popup-cerrar {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
    cursor: pointer;
}


/*SECCION 4 */
#SeccionTime {
  display: none;
  width: 100vw;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
}

#SeccionTime::before{ content: none; }

#SeccionTime .count-title{
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 86%;
  text-align: center;
  font-family: 'Cinzel', serif;
  letter-spacing: 4px;
  color: #ffffff;
  font-size: clamp(20px, 3.6vw, 28px);
  z-index: 10;
}

#fondoSeccion4 { 
  width: 100%;
  display: block; }

/* POSICIÓN DEL COUNTDOWN SOBRE EL FONDO 4 */
#SeccionTime .countdown-container {
  position: absolute;
  top: 9.5%; /* AJUSTAR */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

#SeccionTime #celebration-message {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}


/* ESTILOS DEL COUNTDOWN */
#SeccionTime,
#SeccionTime * {
    font-family: 'Cinzel', serif !important;
}

.countdown-container {
    display: flex;
    justify-content: space-between; /* deja espacio uniforme entre cuadritos */
    align-items: center;
    padding: 2%;
    margin: 15px auto 0 auto;
    width: 96%; /* deja un margen lateral proporcional */
    max-width: 370px;        /* ancho máximo del grupo */
    gap: 1%;                 /* separación proporcional entre cuadritos */
    box-sizing: border-box;
}


.countdown-item {
    background: #d11553;
    border-radius: 5px;
/*    border: 2px solid #ffffff; /* ← CONTORNO */
    padding: 2%;
    flex: 1;            /* ocupa igual espacio que los demás */
    text-align: center;
    min-width: 20%;     /* evita que se haga demasiado pequeño en móviles */
    box-sizing: border-box;
}


.countdown-item span {
    font-size: 2rem;
    color: #ffffff;
    display: inline-block;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

.countdown-item span.animate {
    transform: translateY(-10px);
    opacity: 0;
}

.countdown-label {
    font-size: 1rem;
   text-transform: none;
    margin-top: -15%;  /* ← acerca el texto al número */
    color: #ffffff;
}

.celebration-message {
    font-size: 25px;
    color: white;
    display: none;
}

@media (max-width: 768px) {
    .countdown-container {
        flex-direction: row;
        justify-content: space-between;
    }

    .countdown-item {
        width: 20%;
        font-size: 100%;
        padding: 6px;
       margin: 3px; /* SEPARACIÓN ENTRE CUADRITOS */
    }
}

@media (max-width: 768px) {
    .countdown-item span {
        font-size: 1.4rem;
    }

    .countdown-label {
        font-size: 1rem;
    }
}


/*  SECCION 5 */
#seccionCinco {
    position: relative;
    width: 100vw;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 0;       /* sin espacio */
    box-sizing: border-box;
}

#fondoSeccion5 {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 0;
}

/* ===== Overlay editable Ceremonia / Recepción ===== */
#seccionCinco .evento-overlay{
    /* Ahora es un bloque normal por encima de la imagen (no superpuesto) */
    position: static;
    display: grid;
    align-content: center;
    gap: clamp(32px, 6vh, 48px);
    padding: clamp(14px, 3vh, 24px) 0;
    pointer-events: auto;
}
#seccionCinco .evento-card{
    width: 46%;
    margin: 0 auto;
    text-align: center;
    background: transparent;               /* sin tarjeta blanca (solo en Ubicaciones) */
    border-radius: 0;
    padding: clamp(10px, 2.4vw, 18px);
    box-shadow: none;
    pointer-events: auto;
}
#seccionCinco .evento-card .ev-icon{
    font-size: clamp(44px, 8vw, 64px);
    color: #c7b294; /* dorado elegante, como la referencia */
    margin-bottom: clamp(8px, 1.6vw, 12px);
}
/* Imágenes de íconos personalizadas */
#seccionCinco .evento-card .ev-icon .ev-img{
  width: clamp(92px, 10vw, 80px);  /* un poco más grande */
  height: auto;
  display: block;
  margin-left: auto;               /* centrado horizontal */
  margin-right: auto;
}
/* Estilo de trazo fino (opción 1 - solo CSS) */
#seccionCinco .evento-card .ev-icon i{
  color: #c7b294; /* fallback sólido */
}
@supports (-webkit-text-stroke: 1px #000){
  #seccionCinco .evento-card .ev-icon i{
    color: transparent;
    -webkit-text-stroke: 1.4px #c7b294;
    text-shadow: none;
    font-weight: 400;
  }
}
/* iconos con apariencia de trazo (contorno) para un estilo más fino */
#seccionCinco .evento-card .ev-icon i{
    color: #c7b294;
}
#seccionCinco .evento-card .ev-title{
    font-family: 'Great Vibes', cursive;
    color: #d11553;
    font-size: clamp(30px, 6vw, 46px);
}
#seccionCinco .evento-card .ev-place{
    font-family: 'Cinzel', serif;
    font-size: clamp(13px, 2.8vw, 16px);
    letter-spacing: .6px;
    margin-top: 6px;
    color: #406c8c;
}
#seccionCinco .evento-card .ev-time{
    font-family: 'Cinzel', serif;
    font-size: clamp(13px, 2.8vw, 16px);
    margin: 8px 0 14px;
    color: #1e3d69;
    font-weight: 600;
}
#seccionCinco .evento-card .ev-btn{
    display: inline-block;
    background: #818181;
    color: #fff;
    text-decoration: none;
    font-family: 'Cinzel', serif;
    font-size: clamp(12px, 2.8vw, 20px);
    letter-spacing: .6px;
    padding: 10px 18px;
    border-radius: 10px;
}
#seccionCinco .evento-card .ev-btn i{ margin-right: 8px; }

/* Ocultar hotspots antiguos cuando usemos overlay nuevo */
#Ceremonia, #Recepcion, #Pintere{ display:none !important; }

#Ceremonia {
/*    background-color: rgba(0, 128, 0, 0.5); /* verde 50% */
   background-color: transparent;  /* intercambiar */
    cursor: pointer; }

#Recepcion {
/*      background-color: rgba(255, 0, 0, 0.5); /* rojo 50% */ 
   background-color: transparent;  /* intercambiar */
    cursor: pointer; }

#Pintere {
  /*     background-color: rgba(255, 0, 0, 0.5); /* rojo 50% */ 
  background-color: transparent;  /* intercambiar */
    cursor: pointer; }

#Ceremonia,
#Pintere,
#Recepcion {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 75%; 
}

/* aquí mandas tú la altura de cada una */
#Ceremonia { top: 13.8%;  height: 3.5%; cursor: pointer; }
#Recepcion { top: 30.5%; height: 3.5%; }
#Pintere { top: 92.5%; height: 3.5%; }


/* SECCIÓN OPCIONALES */
#Opcionales {
    position: relative;
    width: 100vw;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 0;       /* sin espacio */
    box-sizing: border-box;
}

#fondoOpcionales {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Overlay editable Dress Code ===== */
#Opcionales .dress-overlay,
#seccionDress .dress-overlay{
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  padding-top: clamp(8px, 2vh, 16px);
  pointer-events: none;
}
#Opcionales .dress-overlay > *,
#seccionDress .dress-overlay > *{ pointer-events: auto; }
#Opcionales .dress-icons,
#seccionDress .dress-icons{
  text-align: center;
  color: #c7b294; /* dorado elegante para el ícono */
  font-size: clamp(36px, 7vw, 50px);
}
#Opcionales .dress-icons i,
#seccionDress .dress-icons i{
  color: #c7b294;
}
/* Imágenes para el icono de dress code */
#Opcionales .dress-icons .dress-img,
#seccionDress .dress-icons .dress-img{
  width: clamp(56px, 26vw, 188px);
  height: auto;
  display: inline-block;
}
#Opcionales .dress-title,
#seccionDress .dress-title{
  text-align: center;
  font-family: 'Great Vibes', cursive;
  color: #d11553;
  font-size: clamp(30px, 6.6vw, 48px);
  margin-top: 6px;
}
#Opcionales .dress-sub,
#seccionDress .dress-sub{
  text-align: center;
  font-family: 'Cinzel', serif;
  font-size: clamp(12px, 2.8vw, 14px);
  margin-bottom: 10px;
}
#Opcionales .dress-lines,
#seccionDress .dress-lines{
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  line-height: 1.5;
}
#Opcionales .dress-note,
#seccionDress .dress-note{
  width: 86%;
  margin: 12px auto 10px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
}
#Opcionales .palette,
#seccionDress .palette{
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
#Opcionales .palette span,
#seccionDress .palette span{
  width: clamp(20px, 4.8vw, 26px);
  height: clamp(20px, 4.8vw, 26px);
  border-radius: 50%;
  background: var(--c, #000);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.1);
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
  display: inline-block;
}
#Opcionales .palette span::before,
#seccionDress .palette span::before{
  content: '✕';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  font-size: clamp(14px, 3.2vw, 18px);
  font-weight: bold;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}
#Opcionales .dress-btn,
#seccionDress .dress-btn{
  display: inline-block;
  margin: 0 auto;
  background: #c7b294;
  color: #fff;
  text-decoration: none;
  font-family: 'Cinzel', serif;
  font-size: clamp(12px, 2.8vw, 14px);
  letter-spacing: .6px;
  padding: 10px 18px;
  border-radius: 10px;
}
#Opcionales .dress-btn i,
#seccionDress .dress-btn i{ margin-right: 8px; }

/* Presentación como sección independiente */
#seccionDress{
  width: 100vw;
  max-width: 400px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  background: #fffbfc;
  padding: clamp(28px, 9vh, 48px) 0 clamp(32px, 10vh, 56px);
}
#seccionDress .dress-overlay{ position: static; }

/* ===== SECCIÓN RSVP ===== */
#SeccionFin .rsvp-container{
  width: 86%;
  margin: 0 auto 10px auto;
}
#SeccionFin .rsvp-container.rsvp-new{ width: min(92%, 820px); }
#SeccionFin .rsvp-new .rsvp-title{
  font-family: 'Great Vibes', cursive;
  font-size: clamp(30px, 6.6vw, 46px);
  color: #406c8c;
  text-align: center;
  margin-bottom: 10px;
}
#SeccionFin .rsvp-new .rsvp-lead,
#SeccionFin .rsvp-cta .rsvp-lead{
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 2.6vw, 14px);
  margin-bottom: 12px;
}
#SeccionFin .rsvp-new .rsvp-lead strong{ color:#1e3d69; }

/* CTA principal */
#SeccionFin .rsvp-cta{
  text-align:center;
  padding: 18px 0px 48px 0px;      /* espacio interno superior e inferior */
  margin: 18px auto 24px;  /* centrado + separación respecto a secciones vecinas */
  width: 100%;
  max-width: 760px;
}
#SeccionFin .rsvp-cta-btn{
  display:inline-block;
  margin: 10px auto 16px;
  background:#1e3d69;
  color:#fff;
  border:none;
  border-radius:14px;
  padding: 12px 22px;
  font-family:'Cinzel', serif;
  font-size: clamp(14px, 2.8vw, 18px);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
  cursor:pointer;
  transition: all 0.3s ease;
}

/* Estado: Confirmación enviada (verde) */
#SeccionFin .rsvp-cta-btn.confirmado{
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  box-shadow: 0 8px 18px rgba(76, 175, 80, 0.3);
  cursor: default;
}

/* Estado: Registro enviado (naranja) */
#SeccionFin .rsvp-cta-btn.registrado{
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  box-shadow: 0 8px 18px rgba(255, 152, 0, 0.3);
  cursor: default;
}

/* Botón para modificar confirmación */
#SeccionFin .rsvp-modificar-btn{
  display: inline-block;
  margin: 8px auto 16px;
  background: transparent;
  color: #1e3d69;
  border: 2px solid #1e3d69;
  border-radius: 14px;
  padding: 10px 20px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 2.4vw, 14px);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}

#SeccionFin .rsvp-modificar-btn:hover{
  background: #1e3d69;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 61, 105, 0.3);
}

#SeccionFin .rsvp-contacto{ margin-top: 4px; font-family:'Poppins',sans-serif; font-size: clamp(14px,2.4vw,16px); color:#1e3d69; }
#SeccionFin .rsvp-contacto-nombre{ font-family:'Cinzel',serif; font-weight:700; color:#1e3d69; }
#SeccionFin .rsvp-contacto-rol, #SeccionFin .rsvp-contacto-tel{ color:#1e3d69; }

/* Popup RSVP */
.popup-rsvp{
  display:none;
  position:fixed;
  inset:0;
  background-color: rgba(0,0,0,0.45);
  backdrop-filter: blur(2px);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.popup-contenido-rsvp{
  background: #fffbfc;
  padding: 16px;
  border-radius: 16px;
  width: min(92vw, 820px);
  max-height: 90vh;
  overflow: auto;
  position: relative;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.popup-contenido-rsvp .popup-cerrar{
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 22px;
  cursor: pointer;
}
#SeccionFin .rsvp-new .rsvp-legend{
  font-family: 'Cinzel', serif;
  font-size: clamp(14px, 2.6vw, 16px);
  color: #1e3d69;
  margin-bottom: 6px;
}
#SeccionFin .rsvp-new .rsvp-row{ margin-bottom: 14px; }
#SeccionFin .rsvp-new .rsvp-radio{ margin-right: 18px; font-family: 'Poppins', sans-serif; font-size: clamp(12px,2.6vw,14px); }
#SeccionFin .rsvp-new .rsvp-label{ display:block; font-family: 'Cinzel', serif; font-size: clamp(12px,2.6vw,14px); margin-bottom:6px; }
#SeccionFin .rsvp-new .rsvp-input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cfd9e2;
  border-radius: 10px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  box-sizing: border-box;
}
#SeccionFin .rsvp-new .rsvp-pase:first-child input[readonly]{
  background: #eef3f7;
  color: #6b7a8a;
  border-color: #d7e2ec;
  cursor: not-allowed;
}
#SeccionFin .rsvp-new .rsvp-textarea{ min-height: 120px; resize: vertical; }
#SeccionFin .rsvp-new .rsvp-hint{ font-family: 'Poppins', sans-serif; font-size: clamp(11px,2.4vw,13px); color:#6b7a8a; margin-top:6px; }
#SeccionFin .rsvp-new .rsvp-sub{ font-family: 'Cinzel', serif; color:#1e3d69; font-size: clamp(14px,2.6vw,16px); }
#SeccionFin .rsvp-new .rsvp-counter{ float:right; font-family:'Poppins',sans-serif; font-size: clamp(12px,2.4vw,13px); color:#406c8c; }
#SeccionFin .rsvp-new .rsvp-line{ clear:both; height:2px; background:#cfd9e2; margin:8px 0 10px; }
#SeccionFin .rsvp-new .rsvp-pase{
  border: 1px solid #d7e2ec;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(198, 212, 226, 0.15);
}
#SeccionFin .rsvp-new .pase-title{ font-family:'Cinzel',serif; color:#1e3d69; margin-bottom:8px; }
#SeccionFin .rsvp-new .pase-group{ display:grid; gap:8px; }
#SeccionFin .rsvp-new .pase-toggle{ cursor:pointer; font-family:'Poppins',sans-serif; font-size: clamp(12px,2.4vw,13px); color:#1e3d69; display:inline-flex; align-items:center; gap:6px; }
#SeccionFin .rsvp-new .oculto{ display:none; }
#SeccionFin .rsvp-new .rsvp-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  background: #1e3d69;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-family: 'Cinzel', serif;
  letter-spacing: .6px;
  font-size: clamp(12px, 2.8vw, 16px);
  cursor: pointer;
  opacity: .75;
  transition: background 0.3s ease, opacity 0.3s ease;
}
#SeccionFin .rsvp-new .rsvp-btn i {
  font-size: 1.2em;
  opacity: 0.95;
}
#SeccionFin .rsvp-new .rsvp-btn:enabled{ 
  opacity: 1; 
}
#SeccionFin .rsvp-new .rsvp-btn:enabled:hover {
  background: #15304d;
}
#SeccionFin .rsvp-title{
  font-family: 'Great Vibes', cursive;
  font-size: clamp(30px, 6.6vw, 46px);
  color: #d11553;
  text-align: center;
}
#SeccionFin .rsvp-sub{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  text-align: center;
  margin: 6px 0 12px;
}
#SeccionFin .rsvp-label{
  display:block;
  font-family: 'Cinzel', serif;
  font-size: clamp(12px, 2.6vw, 14px);
  margin-top: 12px;
  margin-bottom: 6px;
}
#SeccionFin .rsvp-hint{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(11px, 2.4vw, 13px);
  margin-bottom: 6px;
}
#SeccionFin .rsvp-input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  box-sizing: border-box;
}
#SeccionFin .rsvp-btn{
  display: inline-block;
  margin-top: 14px;
  background: #c7b294;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 18px;
  font-family: 'Cinzel', serif;
  letter-spacing: .6px;
  font-size: clamp(12px, 2.8vw, 14px);
  cursor: pointer;
}

/* ===== Mensaje final ===== */
#SeccionFin .fin-image-wrap{
  position: relative;
  width: 100vw;
  height: clamp(520px, 75vh, 1100px);
  overflow: hidden;
  left: auto;
  transform: none;
}
#SeccionFin .fin-image-wrap::before{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55); /* contraste oscuro */
  z-index:1;
  pointer-events:none;
}
#SeccionFin #fondoSeccionFin{
  display:block;
  width: 100vw;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
#SeccionFin .fin-message{
  /* sobre la imagen (solo dentro del wrapper), centrado */
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;
  display: grid;
  justify-items: center;   /* centra horizontalmente los hijos */
  align-items: center;     /* centra verticalmente los hijos */
  justify-content: center; /* asegura centrado en eje principal */
  align-content: center;   /* asegura centrado en eje transversal */
  text-align: center;
  z-index: 2;
  /* gaps ajustables entre líneas del mensaje final */
  --fin-gap-text-below: 16px;
  --fin-gap-callout-above: 18px;
  --fin-gap-callout-below: 16px;
  --fin-gap-names-above: 18px;
}
#SeccionFin .fin-message .fin-text,
#SeccionFin .fin-message .fin-callout,
#SeccionFin .fin-message .fin-names{
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
#SeccionFin .fin-message .fin-text{
  margin-bottom: var(--fin-gap-text-below);
  line-height: 1.35;
}
#SeccionFin .fin-message .fin-callout{
  margin: var(--fin-gap-callout-above) 0 var(--fin-gap-callout-below);
}
#SeccionFin .fin-message .fin-names{
  margin-top: var(--fin-gap-names-above);
}
#SeccionFin .fin-text{
  font-family: 'Cinzel', serif;
  color: #000;
  font-size: clamp(14px, 3.6vw, 24px);
  line-height: 1.45;
  margin-bottom: 12px;
}
#SeccionFin .fin-callout{
  font-family: 'Great Vibes', cursive;
  color: #c7b294;
  font-size: clamp(28px, 8vw, 56px);
  margin-bottom: 10px;
}
#SeccionFin .fin-names{
  font-family: 'Cinzel', serif;
  color: #000;
  font-size: clamp(16px, 4vw, 28px);
  letter-spacing: 2px;
}
#Sugerencia {
  /*    background-color: rgba(255, 0, 0, 0.5); /* rojo 50% */ 
   background-color: transparent;  /* intercambiar */
    cursor: pointer; }

#Hashtag {
 /*      background-color: rgba(255, 0, 0, 0.5); /* rojo 50% */ 
  background-color: transparent;  /* intercambiar */
    cursor: pointer; }

#Sugerencia,
#Hashtag {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 75%; 
}

/* aquí mandas tú la altura de cada una */
#Sugerencia { top: 54%;  height: 3.5%; cursor: pointer; }
#Hashtag { top: 74%; height: 3.5%; }

/* SECCIÓN 6 - GALERÍA */
#SeccionCarrusel {
    position: relative;
    width: 100vw;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 24px 0 0;
}

#SeccionCarrusel .gallery-header{
  text-align:center;
  margin: 22px 0 34px;
}
#SeccionCarrusel .gallery-header .gh-left{
  font-family:'Cinzel', serif;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: clamp(20px, 5vw, 36px);
  color:#1e3d69;
  margin-right: 8px;
}
#SeccionCarrusel .gallery-header .gh-right{
  font-family:'Great Vibes', cursive;
  font-size: clamp(24px, 4.6vw, 34px);
  color:#1e3d69;
}

#fondoSeccion6 {
    width: 100%;
    height: auto;
    display: block;
}



/* Carrusel ENCIMA del fondo */
.gallery-container {
    position: absolute;
    top: 110px;          /* AJUSTA este valor para subir/bajar el carrusel */
    left: 50%;
    transform: translateX(-50%);
    width: 99%;
    max-width: 375px;
}

.image-wrapper {
    position: relative;
    width: 100%;
    height: clamp(520px, 80vh, 1100px);       /* alto crece con la resolución y muestra más imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Imágenes superpuestas para el crossfade */
.slide-image {
    position: absolute;
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;   /* llena de extremo a extremo (puede recortar) */
    object-position: center;
    display: block;

    opacity: 0;
    transition: opacity 0.8s ease-in-out; /* duración del desvanecimiento */
}

/* Alturas responsive del carrusel por @medidas */
@media (max-width: 480px){
  #SeccionCarrusel .image-wrapper{
    height: clamp(320px, 36vh, 620px);
  }
}
@media (min-width: 481px) and (max-width: 580px){
  #SeccionCarrusel .image-wrapper{
    height: clamp(380px, 36vh, 720px);
  }
}
@media (min-width: 581px) and (max-width: 748px){
  #SeccionCarrusel .image-wrapper{
    height: clamp(420px, 36vh, 720px);
  }
}
@media (min-width: 749px) and (max-width: 1024px){
  #SeccionCarrusel .image-wrapper{
    height: clamp(480px, 70vh, 860px);
  }
}
@media (min-width: 1025px) and (max-width: 1440px){
  #SeccionCarrusel .image-wrapper{
    height: clamp(640px, 75vh, 980px);
  }
}
@media (min-width: 1441px){
  #SeccionCarrusel .image-wrapper{
    height: clamp(720px, 80vh, 1200px);
  }
}

/* La que está visible en este momento */
.slide-image.visible {
    opacity: 1;
}

.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(203, 185, 164, 0);
    border: none;
    color: white;
    font-size: 30px;
    padding: 10px;
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.25s ease;
}

.arrow-left  { left: 2px; }
.arrow-right { right: 2px; }

/* ===== Overrides para ocultar imagen de sección 6 y mantener layout ===== */
#fondoSeccion6{ display: none !important; }
#fondoSeccion7{ display: none !important; } /* oculta imagen de la sección de pases sin romper layout */
#SeccionCarrusel .gallery-container{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100vw;
  max-width: none;
  margin: 16px 0 0;
}
#SeccionCarrusel{ padding-top: 24px; }

/* Full-bleed override para que el carrusel vaya de extremo a extremo */
#SeccionCarrusel{
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
}
#SeccionCarrusel .gallery-container{ width: 100vw !important; }


/* SECCIÓN PASS */
#SeccionPas {
    position: relative;
    width: 100vw;
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
    min-height: 40vh; /* mantiene altura aun sin imagen de fondo */
}

#fondoSeccion7 {
    width: 100%;
    height: auto;
    display: block;
}

#paseN1 {
    display: none; /* oculto: usaremos círculos editables */
}

/* Overlay editable de pases */
#SeccionPas .pas-overlay {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 360px;
    top: var(--pas-top, 70px) !important; /* subir/bajar reservas (menor valor = más arriba) */
    color: #ffffff !important;
}

#SeccionPas .pas-title,
#SeccionPas .pas-subtitle {
    font-family: 'Cinzel', serif;
    letter-spacing: 6px;
    font-size: 16px;
    color: #ffffff !important;
    font-weight: 400 !important;
}

#SeccionPas .pas-circles {
    --pases-width: 240px;
    margin: 14px auto 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 20px;
    width: var(--pases-width);
}

#SeccionPas .pas-circles .circle {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid #a28f78;
    background: transparent;
    display: inline-block;
    justify-self: center;
}

#SeccionPas .pas-circles .circle.active {
    background: #e91e63;       /* magenta activo */
    border-color: #e91e63;
}

#SeccionPas .pas-numbers {
    --pases-width: 240px;
    margin-top: 5px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 20px;
    width: var(--pases-width);
    margin-left: auto;
    margin-right: auto;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #ffffff;
    font-weight: 400 !important;
}

#SeccionPas .pas-subtitle {
    margin-top: 12px;
}

/* Nueva presentación estática de pases */
#SeccionPas .pas-static{ text-align:center; }
#SeccionPas .pas-static .pas-icon{
  color:#c7b294;
  font-size: clamp(42px, 9vw, 82px);
  margin-bottom: 4px;
}
#SeccionPas .pas-static .pas-icon .pas-img{
  width: clamp(48px, 10vw, 94px);
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
}
#SeccionPas .pas-static .pas-callig{
  font-family:'Great Vibes', cursive;
  color:#1e3d69;
  font-size: clamp(30px, 8vw, 56px);
  line-height:1.1;
}
#SeccionPas .pas-static .pas-sub{
  font-family:'Cinzel', serif;
  letter-spacing: 4px;
  font-size: clamp(12px, 3.4vw, 16px);
  margin-top: 6px;
  color:#1e1e1e;
}
#SeccionPas .pas-static .pas-qty{
  font-family:'Cinzel', serif;
  font-size: clamp(20px, 6vw, 28px);
  color:#1e3d69;
  margin: 8px 0;
}
#SeccionPas .pas-static .pas-qty #pasNum{ font-weight:700; letter-spacing:2px; }
#SeccionPas .pas-static .pas-note{
  font-family:'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  color:#1e1e1e;
}

/* SECCIÓN 8 */
#SeccionFin {
    position: relative;
    width: 100vw;
    max-width: none;
    margin: 0;
    text-align: center;
    padding: 0;
}

#fondoSeccionFin {
    width: 100%;
    height: auto;
    display: block;
}

#SeccionFinRSVP {
    position: absolute;
    top: 1%;                 /* ajusta verticalmente */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;               /* ancho del botón */
    height: 1%;              /* alto del botón */
/*     background-color: rgba(255, 105, 180, 0.5); /* rosado 50% transparencia */
    background-color: transparent;  /* intercambiar */
    cursor: pointer;
}


/* Ocultar todas las secciones inicialmente */
#seccionNueva,
#Seccion1partB,
#seccionAgendar,
#seccionDress,
#seccionCuatro,
#seccionCinco,
#Opcionales,
#seccionSiete,
#SeccionPas, 
#SeccionFin {
    display: none; /* sin !important */
}

/* ===== Overrides fuertes para color blanco en la sección de pases ===== */
#SeccionPas .pas-title,
#SeccionPas .pas-subtitle,
#SeccionPas .pas-numbers {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* ====== Segunda parte: ancho responsivo hasta 800px por sección ====== */
#seccionNueva,
#Seccion1partB,
#seccionAgendar,
#seccionDress,
#seccionCuatro,
#seccionCinco,
#Opcionales,
#seccionSiete,
#SeccionPas,
#SeccionFin {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: visible;
}

/* Centra la sección final; el fondo se hace full-bleed con el wrapper */
#SeccionFin{
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Full-bleed específicos */
#SeccionTime{
  width: 100vw;
  max-width: none;
  margin: 0;
}
#fondoSeccion4{
  width: 100vw;
  height: clamp(520px, 55vh, 700px); /* ancho completo, alto contenido y recorte vertical controlado */
  display: block;
  object-fit: cover;                 /* recorta sin deformar */
  object-position: center 35%;       /* enfoca un poco más arriba para ver el horizonte */
}
@media (min-width: 1024px){
  #fondoSeccion4{
    height: clamp(100px, 65vh, 840px); /* un poco más alto en pantallas grandes */
  }
}
#SeccionCarrusel{
  width: 100vw;
  max-width: none;
  margin: 0;
}
#fondoSeccion6{
  width: 100vw;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Full-bleed imagen de Ubicaciones (sección 5) */
#seccionCinco{
  width: 100vw;
  max-width: none;
  margin: 0;
}
#fondoSeccion5{
  width: 100vw;
  display: block;
  object-fit: cover;
  object-position: center;
  height: clamp(420px, 55vh, 700px);
}
@media (min-width: 1024px){
  #fondoSeccion5{
    height: 700px; /* Altura fija a partir de 1024px */
    max-height: 700px;
  }
}

#fondoSeccion,
#fondoSeccion1partB,
#fondoSeccion2,
#fondoItinerario,
#fondoSeccion5,
#fondoOpcionales,
#fondoSeccion6,
#fondoSeccion7,
#fondoSeccionFin {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ===== ITINERARIO (usado dentro de #Opcionales) ===== */
#Opcionales { text-align: center; }
#Opcionales .itin-overlay{
  position: absolute;
  inset: 0;
  color: #fff;
  display: grid;
  align-content: start;
  padding-top: clamp(16px, 4vh, 26px);
}
#Opcionales{
  /* comportamiento vertical en portada del Itinerario similar a sección 4 */
  width: 100vw;
  max-width: none;
  margin: 0;
}
#fondoOpcionales{
  width: 100vw;
  height: clamp(620px, 60vw, 1200px);
  display: block;
  object-fit: cover;
  object-position: center 35%;
}
@media (min-width: 220px){
  #fondoOpcionales{
    height: clamp(520px, 60vw, 1400px);
  }
}
@media (min-width: 420px){
  #fondoOpcionales{
    height: clamp(580px, 60vw, 1400px);
  }
}
@media (min-width: 520px){
  #fondoOpcionales{
    height: clamp(680px, 60vw, 1400px);
  }
}
@media (min-width: 720px){
  #fondoOpcionales{
    height: clamp(780px, 60vw, 1400px);
  }
}
@media (min-width: 1024px){
  #fondoOpcionales{
    height: clamp(800px, 45vw, 1400px);
  }
}
#Opcionales .itin-overlay::before{
  content:'';
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.48);
  z-index:0;
}
#Opcionales .itin-title{
  position: relative;
  z-index:1;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(32px, 8vw, 54px);
  margin-bottom: clamp(10px, 2vh, 16px);
}
#Opcionales .itin-grid{
  position: relative;
  z-index:1;
  width: 98%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.6vh, 24px) 10px;
}
@media (min-width: 1024px){
  /* A partir de 1024px no se expande más hacia los laterales */
  #Opcionales .itin-grid{
    max-width: 1024px;
    width: 100%;
  }
}
#Opcionales .itin-grid::before{
  content:'';
  position:absolute;
  top:0; bottom:0; left:50%;
  width:3px;
  background: rgba(255,255,255,0);
  transform: translateX(-50%);
}
#Opcionales .item{
  display:grid;
  justify-items:center;
  gap:4px;
  position: relative; /* para dibujar los conectores */
  --arm-offset: 50%;
}
#Opcionales .item i{
  font-size: clamp(34px, 7.2vw, 56px);
  color:#fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
#Opcionales .item .itin-icon{
  width: clamp(34px, 9vw, 108px);
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
/* conectores horizontales hacia la línea central */
#Opcionales .item.left::after,
#Opcionales .item.right::before{
  content:'';
  position:absolute;
  top: var(--arm-offset);
  transform: translateY(-50%);
  width: clamp(16px, 6vw, 48px);
  height: 1px;
  background: rgba(255,255,255,.9);
  z-index: 1;
}
#Opcionales .item.left::after{ right: 6.5vw; transform: translateX(0);}
#Opcionales .item.right::before{ left: 6.5vw; transform: translateX(0);}

/* offsets intercalados para que los brazos no queden a la misma altura */
#Opcionales .itin-grid .item:nth-child(1){ --arm-offset: 50%; transform:translateX(var(--shift-x, -10px)); }  /* Ceremonia */
#Opcionales .itin-grid .item:nth-child(2){ --arm-offset: 50%; transform:translateX(var(--shift-x, 10px));}  /* Recepción */
#Opcionales .itin-grid .item:nth-child(3){ --arm-offset: 50%; transform:translateX(var(--shift-x, -10px));}  /* Fotos */
#Opcionales .itin-grid .item:nth-child(4){ --arm-offset: 50%; transform:translateX(var(--shift-x, 10px));}  /* Cena */
#Opcionales .itin-grid .item:nth-child(5){ --arm-offset: 50%; transform:translateX(var(--shift-x, -10px));}  /* Brindis */
#Opcionales .itin-grid .item:nth-child(6){ --arm-offset: 50%; transform:translateX(var(--shift-x, 10px));}  /* Baile */
#Opcionales .itin-grid .item:nth-child(7){ --arm-offset: 50%; transform:translateX(var(--shift-x, -10px));}  /* Torta */
#Opcionales .label{
  font-family: 'Cinzel', serif;
  font-size: clamp(13px, 3vw, 18px);
  letter-spacing: .8px;
}
#Opcionales .itin-grid .item:nth-child(8){ --arm-offset: 50%; }  /* Fin de fiesta */
#Opcionales .time{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 2.8vw, 16px);
  color: #fff;
  font-weight: 500;
}

/* ===== OCULTAR CONTENIDO CUANDO NO HAY PARÁMETROS ===== */
body.sin-parametros #contenedor > *:not(#fondo) {
  display: none !important;
}
body.sin-parametros #portadaTextos,
body.sin-parametros #portadaPases,
body.sin-parametros #imgInferiorLink,
body.sin-parametros #seccionNueva,
body.sin-parametros #seccionSiete,
body.sin-parametros #SeccionCarrusel,
body.sin-parametros #SeccionPas,
body.sin-parametros #SeccionFin {
  display: none !important;
}
body.sin-parametros #fondo {
  width: 100vw !important;
  height: 100vh !important;
  object-fit: cover !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 9999 !important;
}
body.sin-parametros #contenedor {
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* ===== PROTECCIÓN CONTRA DESCARGA DE IMÁGENES ===== */
/* Prevenir selección de imágenes */
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

/* Prevenir selección de texto en general */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Permitir selección en inputs y textareas */
input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Overlay transparente sobre imágenes para prevenir clic directo */
img::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  pointer-events: none;
}

/* ===== SECCIÓN BUS - SALIDA DE BUS ===== */
#seccionBus{
  width:100vw;
  max-width:400px;
  margin:0 auto;
  position:relative;
  text-align:center;
  background: transparent;
  padding: 14px 0 20px;
}
#seccionBus .gift-overlay{ width:86%; margin:0 auto; }
#seccionBus .gift-block{
  background: transparent;
  border-radius:0;
  padding:8px 0 14px;
  margin-bottom:14px;
  box-shadow: none;
}
#seccionBus .gift-icon{ text-align:center; }
#seccionBus .gift-icon i{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
#seccionBus .gift-title{
  font-family: 'Great Vibes', cursive;
  color:#d11553; /* magenta como evento-overlay */
  font-size: clamp(30px, 6vw, 46px);
  margin: 6px 0 6px;
}
#seccionBus .gift-sub{
  font-family: 'Cinzel', serif;
  color:#1e3d69;
  font-size: clamp(14px, 3vw, 18px);
  letter-spacing:.6px;
  margin-bottom: 6px;
  font-weight: 600;
}
#seccionBus .gift-text{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  line-height: 1.5;
  color: #1e3d69;
}
#seccionBus .gift-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
#seccionBus .gift-btn{
  display:inline-block;
  background:#6a6a6a;
  color:#fff;
  text-decoration:none;
  font-family:'Cinzel', serif;
  font-size: clamp(12px, 2.8vw, 14px);
  letter-spacing:.6px;
  padding:10px 18px;
  border-radius:10px;
  width:100%;
  max-width:280px;
  text-align:center;
  transition:background 0.3s ease;
}
#seccionBus .gift-btn:hover{
  background:#5a5a5a;
}
#seccionBus .gift-btn i{ margin-right:8px; }

/* ===== SECCIÓN 7 - OBSEQUIOS / HASHTAG / PETICIÓN ===== */
#seccionSiete{
  width:100vw;
  max-width:400px;
  margin:0 auto;
  position:relative;
  text-align:center;
  background: transparent;
  padding: 14px 0 20px;
}
#seccionSiete .gift-overlay{ width:86%; margin:0 auto; }
#seccionSiete .gift-block{
  background: transparent;
  border-radius:0;
  padding:8px 0 14px;
  margin-bottom:14px;
  box-shadow: none;
}
#seccionSiete .gift-icon{ text-align:center; }
#seccionSiete .gift-icon .gift-img{
  width: clamp(56px, 10vw, 88px);
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}
#seccionSiete .gift-title{
  font-family: 'Great Vibes', cursive;
  color:#d11553; /* magenta como evento-overlay */
  font-size: clamp(30px, 6vw, 46px);
  margin: 6px 0 6px;
}
#seccionSiete .gift-sub{
  font-family: 'Cinzel', serif;
  color:#1e3d69;
  font-size: clamp(14px, 3vw, 18px);
  letter-spacing:.6px;
  margin-bottom: 6px;
   font-weight: 600;
}
#seccionSiete .gift-text{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  line-height: 1.5;
  color: #1e3d69;
}
#seccionSiete .gift-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
#seccionSiete .gift-btn{
  display:inline-block;
  background:#6a6a6a; /* gris como botones de evento-overlay */
  color:#fff;
  text-decoration:none;
  font-family:'Cinzel', serif;
  font-size: clamp(12px, 2.8vw, 14px);
  letter-spacing:.6px;
  padding:10px 18px;
  border-radius:10px;
  width:100%;
  max-width:280px;
  text-align:center;
  transition:background 0.3s ease;
}
#seccionSiete .gift-btn:hover{
  background:#5a5a5a;
}
#seccionSiete .gift-btn i{ margin-right:8px; }
#seccionSiete .gift-hashtag{
  margin-top:8px;
  font-family:'Cinzel', serif;
  color:#d11553;
  font-size: clamp(14px, 3.2vw, 18px);
  cursor:pointer;
}
#seccionSiete .gift-upload-btn{
  display:inline-block;
  margin-top:14px;
  background:#6a6a6a;
  color:#fff;
  text-decoration:none;
  font-family:'Cinzel', serif;
  font-size: clamp(12px, 2.8vw, 14px);
  letter-spacing:.6px;
  padding:10px 18px;
  border-radius:10px;
  border:none;
  transition:background 0.3s ease;
}
#seccionSiete .gift-upload-btn{
  cursor: pointer !important;
  pointer-events: auto !important;
}
#seccionSiete .gift-upload-btn:hover{
  background:#5a5a5a;
}
#seccionSiete .gift-upload-btn i{
  margin-right:8px;
}
#seccionSiete .gift-songs-form{
  margin-top:32px;
  padding:20px;
  background:#fffbfc;
  border-radius:12px;
  border:1px solid #e0e0e0;
  width:100%;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
  display:block;
  box-sizing:border-box;
}
#seccionSiete .songs-form-title{
  font-family:'Great Vibes', cursive;
  font-size: clamp(24px, 5vw, 32px);
  color:#1e3d69;
  text-align:center;
  margin-bottom:8px;
}
#seccionSiete .songs-form-text{
  font-family:'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  color:#1e3d69;
  text-align:center;
  margin-bottom:16px;
  line-height:1.5;
}
#seccionSiete .songs-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
#seccionSiete .songs-form-row{
  display:flex;
  flex-direction:column;
  gap:6px;
}
#seccionSiete .songs-form-label{
  font-family:'Cinzel', serif;
  font-size: clamp(12px, 2.6vw, 14px);
  color:#1e3d69;
  font-weight:500;
}
#seccionSiete .songs-form-input{
  width:100%;
  padding:10px 12px;
  border:1px solid #cfd9e2;
  border-radius:10px;
  background:#fff;
  font-family:'Poppins', sans-serif;
  font-size: clamp(12px, 2.6vw, 14px);
  color:#1e3d69;
  box-sizing:border-box;
  transition:border-color 0.2s ease;
}
#seccionSiete .songs-form-input:focus{
  outline:none;
  border-color:#1e3d69;
}
#seccionSiete .songs-form-input::placeholder{
  color:#9ca3af;
}
#seccionSiete .songs-form-btn{
  margin-top:8px;
  background:#6a6a6a;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:12px 18px;
  font-family:'Cinzel', serif;
  font-size: clamp(12px, 2.8vw, 14px);
  letter-spacing:.6px;
  cursor:pointer;
  transition:background 0.3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
#seccionSiete .songs-form-btn:hover{
  background:#5a5a5a;
}
#seccionSiete .songs-form-btn:disabled{
  background:#9ca3af;
  cursor:not-allowed;
}
#seccionSiete .songs-form-btn i{
  font-size:14px;
}

/* Media queries para centrar el formulario en todas las resoluciones */
@media (max-width: 768px) {
  #seccionSiete .gift-songs-form {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 480px) {
  #seccionSiete .gift-songs-form {
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding: 16px;
  }
}

@media (min-width: 769px) {
  #seccionSiete .gift-songs-form {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===== MODAL DE CONFIRMACIÓN DE CANCIÓN ===== */
.modal-song{
  position:fixed;
  bottom:30px;
  left:50%;
  transform:translateX(-50%);
  z-index:10001;
  animation:fadeInUp 0.4s ease, fadeOut 0.4s ease 2.6s forwards;
}
.modal-comprobante-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  z-index:10001;
  animation:fadeIn 0.3s ease;
}
.modal-comprobante-overlay.fadeOut{
  animation:fadeOutOverlay 0.3s ease forwards;
}
@keyframes fadeOutOverlay{
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}
.modal-comprobante{
  top:50%;
  bottom:auto;
  transform:translate(-50%, -50%);
  animation:fadeInUpCenter 0.4s ease;
  z-index:10002;
}
@keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}
.modal-song-content{
  background:#fffbfc;
  padding:20px 28px;
  border-radius:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.15), 0 8px 32px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.8);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  min-width:280px;
  max-width:90vw;
  border:none;
}
.modal-song-icon{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#4CAF50;
  color:#ffffff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:bold;
  line-height:1;
  box-shadow:0 2px 8px rgba(76, 175, 80, 0.3);
}
.modal-song-title{
  font-family:'Cinzel', serif;
  font-size: clamp(18px, 4vw, 22px);
  color:#1e3d69;
  font-weight:600;
  text-align:center;
}
.modal-song-message{
  font-family:'Poppins', sans-serif;
  font-size: clamp(13px, 2.8vw, 15px);
  color:#1e3d69;
  text-align:center;
  line-height:1.5;
}
.modal-comprobante-aceptar-btn{
  margin-top:12px;
  background:#1e3d69;
  border:none;
  color:#ffffff;
  border-radius:8px;
  padding:10px 24px;
  font-family:'Poppins', sans-serif;
  font-size: clamp(13px, 2.6vw, 14px);
  cursor:pointer;
  transition:all 0.2s ease;
  font-weight:500;
}
.modal-comprobante-aceptar-btn:hover{
  background:#15304d;
}
.comprobante-enviado{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:20px;
  background:#f5f5f5;
  border-radius:12px;
  border:2px solid #4CAF50;
}
.comprobante-enviado-icon{
  font-size:48px;
  color:#4CAF50;
}
.comprobante-enviado-text{
  font-family:'Cinzel', serif;
  font-size: clamp(18px, 4vw, 22px);
  color:#1e3d69;
  font-weight:600;
  text-align:center;
}
.comprobante-modificar-btn{
  background:transparent;
  border:1px solid #1e3d69;
  color:#1e3d69;
  border-radius:8px;
  padding:10px 20px;
  font-family:'Poppins', sans-serif;
  font-size: clamp(13px, 2.6vw, 14px);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:all 0.2s ease;
  font-weight:500;
}
.comprobante-modificar-btn:hover{
  background:#1e3d69;
  color:#ffffff;
}
.comprobante-modificar-btn i{
  font-size:13px;
}
.fotos-list{
  margin-top:12px;
  padding:10px;
  background:#f5f5f5;
  border-radius:8px;
  font-family:'Poppins', sans-serif;
  font-size: clamp(12px, 2.4vw, 13px);
  color:#1e3d69;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.foto-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  background:#ffffff;
  border-radius:6px;
  border:1px solid #e0e0e0;
}
.foto-name{
  flex:1;
  font-size: clamp(12px, 2.4vw, 13px);
  color:#1e3d69;
  word-break:break-word;
}
.foto-remove-btn{
  background:transparent;
  border:none;
  color:#d32f2f;
  cursor:pointer;
  padding:4px 8px;
  border-radius:4px;
  transition:all 0.2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.foto-remove-btn:hover{
  background:#ffebee;
  color:#c62828;
}
.foto-remove-btn i{
  font-size:14px;
}
.fotos-enviar-container{
  margin-top:12px;
  text-align:center;
}
.fotos-enviar-btn{
  background:#1e3d69;
  color:#ffffff;
  border:none;
  border-radius:8px;
  padding:12px 24px;
  font-family:'Poppins', sans-serif;
  font-size: clamp(13px, 2.6vw, 14px);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:all 0.2s ease;
  font-weight:500;
}
.fotos-enviar-btn:hover{
  background:#15304d;
}
.fotos-enviar-btn:disabled{
  background:#9e9e9e;
  cursor:not-allowed;
}
.fotos-enviar-btn i{
  font-size:14px;
}
@keyframes fadeInUp{
  from{
    opacity:0;
    transform:translateX(-50%) translateY(20px);
  }
  to{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
}
.modal-comprobante{
  animation:fadeInUpCenter 0.4s ease;
}
@keyframes fadeInUpCenter{
  from{
    opacity:0;
    transform:translate(-50%, -40%);
  }
  to{
    opacity:1;
    transform:translate(-50%, -50%);
  }
}
@keyframes fadeOut{
  from{
    opacity:1;
    transform:translateX(-50%) translateY(0);
  }
  to{
    opacity:0;
    transform:translateX(-50%) translateY(-20px);
  }
}
.modal-comprobante.fadeOut{
  animation:fadeOutCenter 0.4s ease forwards;
}
@keyframes fadeOutCenter{
  from{
    opacity:1;
    transform:translate(-50%, -50%);
  }
  to{
    opacity:0;
    transform:translate(-50%, -40%);
  }
}
#seccionSiete .gift-address{
  margin-top:20px;
  font-family:'Cinzel', serif;
  color:#1e3d69;
  font-size: clamp(13px, 3.2vw, 16px);
  font-weight:600;
  line-height:1.5;
  text-align:center;
  padding:14px 12px;
  background:#f8f8f8;
  border-radius:10px;
  border:2px solid #1e3d69;
}

/* Responsive: botones lado a lado en pantallas grandes */
@media (min-width: 600px){
  #seccionSiete .gift-buttons{
    flex-direction:row;
    justify-content:center;
    gap:12px;
  }
  #seccionSiete .gift-btn{
    width:auto;
    min-width:180px;
  }
}

/* ===== POPUP CUENTAS BANCARIAS ===== */
.popup-cuentas{
  display:none;
  position:fixed;
  inset:0;
  background-color: rgba(0,0,0,0.5);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.popup-cuentas.show{
  display:flex;
}
.popup-cuentas-overlay{
  background:rgba(0, 0, 0, 0.5);
  position:absolute;
  inset:0;
  cursor:pointer;
}
.popup-cuentas-content{
  background: #fffbfc;
  padding: 18px;
  border-radius: 16px;
  width: min(90vw, 420px);
  max-height: 90vh;
  overflow: auto;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
}
.popup-cuentas-cerrar{
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 28px;
  cursor: pointer;
  color: #666;
  line-height: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
}
.popup-cuentas-cerrar:hover{
  background: #f0f0f0;
  color: #333;
}
.cuentas-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:2px solid #e8e8e8;
}
.cuentas-header i{
  font-size:24px;
  color:#6a6a6a;
}
.cuentas-header h2{
  font-family:'Cinzel', serif;
  font-size: clamp(18px, 4vw, 22px);
  color:#1e3d69;
  margin:0;
  font-weight:300;
  letter-spacing:0.5px;
}
.cuentas-section{
  margin-bottom:14px;
}
.cuentas-header-yape{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.cuentas-header-yape i{
  font-size:20px;
  color:#6a6a6a;
}
.cuentas-header-yape h3{
  font-family:'Cinzel', serif;
  font-size: clamp(16px, 3.5vw, 20px);
  color:#1e3d69;
  margin:0;
  font-weight:300;
  letter-spacing:0.5px;
}
.cuentas-info{
  margin-bottom:10px;
}
.cuentas-item{
  display:flex;
  align-items:center;
  margin-bottom:6px;
  gap:6px;
  flex-wrap:nowrap;
}
.cuentas-label{
  font-family:'Cinzel', serif;
  font-size: clamp(13px, 2.8vw, 15px);
  color:#6a6a6a;
  font-weight:500;
  white-space:nowrap;
}
.cuentas-value{
  font-family:'Poppins', sans-serif;
  font-size: clamp(13px, 2.8vw, 15px);
  color:#1e3d69;
  flex:1;
  padding:4px 8px;
  border-radius:6px;
  transition:background 0.2s ease;
  text-align:left;
}
.cuentas-value:focus{
  outline:none;
  background:#f5f5f5;
}
.cuentas-copy-group{
  margin-top:8px;
}
.cuentas-copy-label{
  font-family:'Cinzel', serif;
  font-size: clamp(13px, 2.8vw, 15px);
  color:#6a6a6a;
  margin-bottom:8px;
  font-weight:500;
}
.cuentas-copy-field{
  display:flex;
  gap:8px;
  align-items:center;
  margin-bottom:10px;
  flex-wrap:nowrap;
  width:100%;
}
.cuentas-copy-field:last-child{
  margin-bottom:0;
}
.cuentas-input{
  flex:1;
  min-width:0;
  padding:8px 12px;
  border:1px solid #d0d0d0;
  border-radius:10px;
  background:#f8f8f8;
  font-family:'Poppins', sans-serif;
  font-size: clamp(12px, 2.5vw, 14px);
  color:#1e3d69;
  text-align:center;
  letter-spacing:1px;
  box-sizing:border-box;
}
.cuentas-label-numero{
  font-family:'Cinzel', serif;
  font-size: clamp(11px, 2.4vw, 13px);
  color:#1e3d69;
  font-weight:600;
  margin-right:8px;
  white-space:nowrap;
  flex-shrink:0;
  text-align:left;
}
.cuentas-copy-btn{
  background:#1e3d69;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:8px 14px;
  font-family:'Cinzel', serif;
  font-size: clamp(12px, 2.6vw, 14px);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:background 0.2s ease;
  white-space:nowrap;
}
.cuentas-copy-btn:hover{
  background:#15304d;
}
.cuentas-copy-btn i{
  font-size:14px;
}
.cuentas-divider{
  height:1px;
  background:#e8e8e8;
  margin:14px 0;
}

/* ===== SECCIÓN COMPROBANTE (SUTIL) ===== */
.comprobante-section{
  margin-top:8px;
  padding-top:12px;
}
.comprobante-message{
  font-family:'Poppins', sans-serif;
  font-size: clamp(11px, 2.2vw, 12px);
  color:#8a8a8a;
  text-align:center;
  margin-bottom:10px;
  line-height:1.4;
  font-style:italic;
}
.comprobante-upload{
  display:flex;
  flex-direction:row;
  justify-content:center;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
  width:100%;
}
.comprobante-btn{
  background:#f5f5f5;
  color:#1e3d69;
  border:1px solid #d0d0d0;
  border-radius:8px;
  padding:8px 16px;
  font-family:'Poppins', sans-serif;
  font-size: clamp(12px, 2.4vw, 13px);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:all 0.2s ease;
  font-weight:500;
  flex-shrink:0;
}
.comprobante-btn:hover{
  background:#e8e8e8;
  border-color:#1e3d69;
  color:#1e3d69;
}
.comprobante-btn i{
  font-size:13px;
}
.files-list{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:8px;
  flex:0 1 auto;
  min-width:0;
  align-items:flex-start;
  justify-content:flex-start;
}
.file-name-display{
  font-family:'Poppins', sans-serif;
  font-size: clamp(11px, 2.2vw, 12px);
  color:#1e3d69;
  text-align:center;
  padding:6px 12px;
  background:#f0f0f0;
  border-radius:6px;
  word-break:break-all;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-width:150px;
  max-width:300px;
  flex:1;
}
.file-name-text{
  flex:1;
  text-align:left;
  word-break:break-all;
}
.file-remove-btn{
  background:transparent;
  border:none;
  color:#8a8a8a;
  cursor:pointer;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  transition:all 0.2s ease;
  flex-shrink:0;
}
.file-remove-btn:hover{
  background:#e0e0e0;
  color:#e91e63;
}
.file-remove-btn i{
  font-size:14px;
}
.invitado-name-display{
  font-family:'Cinzel', serif;
  font-size: clamp(12px, 2.4vw, 13px);
  color:#1e3d69;
  text-align:center;
  padding:6px 12px;
  background:transparent;
  border-radius:6px;
  font-weight:600;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.invitado-name-display::before{
  content:'👤';
  opacity:0.3;
  margin-right:6px;
}
.comprobante-mensaje-section{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.comprobante-mensaje-btn{
  background:transparent;
  color:#1e3d69;
  border:1px solid #d0d0d0;
  border-radius:8px;
  padding:6px 14px;
  font-family:'Poppins', sans-serif;
  font-size: clamp(11px, 2.2vw, 12px);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:all 0.2s ease;
  font-weight:500;
}
.comprobante-mensaje-btn:hover{
  background:#f5f5f5;
  border-color:#1e3d69;
}
.comprobante-mensaje-btn i{
  font-size:12px;
}
.mensaje-box{
  width:100%;
  max-width:100%;
  animation:fadeIn 0.3s ease;
}
.mensaje-textarea{
  width:100%;
  padding:10px;
  border:1px solid #d0d0d0;
  border-radius:8px;
  font-family:'Poppins', sans-serif;
  font-size: clamp(12px, 2.4vw, 13px);
  color:#1e3d69;
  resize:vertical;
  min-height:60px;
  box-sizing:border-box;
}
.mensaje-textarea:focus{
  outline:none;
  border-color:#1e3d69;
}
.comprobante-enviar{
  margin-top:12px;
  display:flex;
  justify-content:center;
}
.comprobante-enviar-btn{
  background:#1e3d69;
  color:#fff;
  border:none;
  border-radius:8px;
  padding:10px 20px;
  font-family:'Cinzel', serif;
  font-size: clamp(12px, 2.6vw, 14px);
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  transition:background 0.2s ease;
  font-weight:600;
  letter-spacing:0.5px;
}
.comprobante-enviar-btn:hover:not(:disabled){
  background:#15304d;
}
.comprobante-enviar-btn:disabled{
  background:#9ca3af;
  cursor:not-allowed;
}
.comprobante-enviar-btn i{
  font-size:13px;
}

/* Ajuste de encuadre y altura a partir de 900px para la imagen final */
@media (min-width: 900px){
  #SeccionFin .fin-image-wrap{
    height: clamp(620px, 85vh, 1200px);
  }
  #SeccionFin #fondoSeccionFin{
    object-position: center 20%;
  }
}

/* ===== MODAL DE CONFIRMACIÓN ELEGANTE ===== */
.modal-success{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease-out;
}

.modal-success-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  animation: fadeIn 0.3s ease-out;
}

.modal-success-content{
  position: relative;
  background: #fffbfc;
  border-radius: 20px;
  padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
  width: min(90vw, 420px);
  text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.4s ease-out;
  z-index: 1;
}

.modal-success-icon{
  width: clamp(64px, 12vw, 80px);
  height: clamp(64px, 12vw, 80px);
  margin: 0 auto clamp(20px, 2.5vw, 24px);
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(36px, 7vw, 48px);
  color: #fff;
  font-weight: bold;
  box-shadow: 0 4px 16px rgba(76, 175, 80, 0.4);
  animation: scaleIn 0.5s ease-out 0.2s both;
}

/* Estilo naranja para cuando no asiste */
.modal-success.no-asiste .modal-success-icon{
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  box-shadow: 0 4px 16px rgba(255, 152, 0, 0.4);
}

.modal-success-title{
  font-family: 'Cinzel', serif;
  font-size: clamp(22px, 4vw, 28px);
  color: #1e3d69;
  margin-bottom: clamp(12px, 1.5vw, 16px);
  font-weight: 600;
  letter-spacing: 0.5px;
}

.modal-success-message{
  font-family: 'Poppins', sans-serif;
  font-size: clamp(14px, 2.2vw, 16px);
  color: #6b7a8a;
  line-height: 1.6;
  margin-bottom: clamp(24px, 3vw, 32px);
}

.modal-success-btn{
  background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: clamp(12px, 2vw, 16px) clamp(32px, 6vw, 48px);
  font-family: 'Cinzel', serif;
  font-size: clamp(14px, 2.4vw, 16px);
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
}

.modal-success-btn:hover{
  background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(76, 175, 80, 0.4);
}

/* Estilo naranja para el botón cuando no asiste */
.modal-success.no-asiste .modal-success-btn{
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.3);
}

.modal-success.no-asiste .modal-success-btn:hover{
  background: linear-gradient(135deg, #F57C00 0%, #E65100 100%);
  box-shadow: 0 6px 16px rgba(255, 152, 0, 0.4);
}

.modal-success-btn:active{
  transform: translateY(0);
}

@keyframes fadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

@keyframes slideUp{
  from{
    opacity: 0;
    transform: translateY(30px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn{
  from{
    opacity: 0;
    transform: scale(0.5);
  }
  to{
    opacity: 1;
    transform: scale(1);
  }
}