:root{
  --gold: #b4945e;
  --gold-soft: #d8c59a;
  --ink: #3a2f1d;
  --paper-shadow: 0 8px 22px rgba(0,0,0,.10);
}

body {
  background-color: #fff8e7;
}

.hidden { display: none !important; }

#mainContent {
  display: none;          /* oculto al inicio */
  opacity: 0;             /* empieza transparente */
  transition: opacity 1s ease-in-out; /* transición suave */
}

#mainContent.visible {
  display: block;         /* visible al activarse */
  opacity: 1;             /* se desvanece hasta mostrarse */
}


/* Fondo con imagen */
.front-container {
  position: relative;
  background: url('images/main.jpg') no-repeat center center/cover;
  height: 80vh;
  color: white;
  text-align: center;
  font-family: 'Playfair Display', serif;
}
/* --- Dropdown --- */
.menu-dropdown{
  position: absolute;
  top: 14px;
  right: 18px;
  z-index: 9999;            /* asegura que quede por encima */
}

.dropbtn{
  background: rgba(0,0,0,.55);
  color: #fff;
  padding: 8px 14px;
  font-size: 16px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  backdrop-filter: blur(2px);
}

.dropbtn:focus{ outline: 2px solid rgba(255,255,255,.4); }

.dropdown-content{
  position: absolute;
  right: 0;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.5); /* blanco con opacidad */
  backdrop-filter: blur(6px);            /* difumina el fondo detrás */
  min-width: 180px;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  display: none;            /* por defecto oculto */
  overflow: hidden;
}

.dropdown-content a{
  display:block;
  padding: 10px 14px;
  color:#222;
  text-decoration:none;
  font-size: 15px;
}

.dropdown-content a:hover{
  background:#f2f2f2;
}

/* clase para mostrar por click */
.dropdown-content.show{ display:block; }

/* Oscurece ligeramente la imagen para contraste */
.overlay {
  background: rgba(0, 0, 0, 0.1);
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Contenido centrado */
.content {
  padding: 2rem;
}

/* Título pequeño */
.title {
  font-size: 1.2rem;
  letter-spacing: 4px;
  color: #fff;
  margin-bottom: 0.5rem;
}

/* Nombres */
.names {
  font-size: 3rem;
  color: #fff;
  font-weight: 400;
}

.names span {
  color: #d4af37; /* dorado */
  font-weight: bold;
}

/* Contador */
.countdown {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.time-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.number {
  font-size: 4rem;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px #000;
}

.label {
  font-size: 1.2rem;
  margin-top: 0.5rem;
}

/* Responsive */
@media (max-width: 768px) {
  .names {
    font-size: 2.4rem;
  }

  .number {
    font-size: 3rem;
  }

  .label {
    font-size: 1rem;
  }

  .countdown {
    gap: 1rem;
  }
}
.biblical-verse-section {
  background-image: url('images/cita.jpg'); /* textura clara elegante */
  background-size: cover;
  background-position: center;
  padding: 80px 20px;
  position: relative;
  text-align: center;
  font-family: 'Georgia', serif;
  color: #3c3c3c;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}
.biblical-verse-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 0;
}

.biblical-verse-section.show {
  opacity: 1;
  transform: translateY(0);
}

.verse-content {
  position: relative;
  z-index: 1;             /* encima del overlay y las flores */
}

blockquote {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-style: italic;
  line-height: 1.8;
  margin: 0 0 20px;
  color: #2f2f2f;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8);
}
.reference {
  font-family: sans-serif;
  font-size: clamp(1.2rem, 1.5vw, 1.2rem);
  font-weight: bold;
  color: #b4945e;
}


.biblical-verse-section {
  opacity: 0;
  transform: translateY(50px);
  animation: fadeInUp 1s ease-out forwards;
  animation-delay: 0.5s;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.announcement-section {
  background: url('images/fondo.jpg') no-repeat center center/cover;
  background-color: #fff8e7; /* blanco cálido con toque dorado */
  padding: 60px 20px;
  text-align: center;
  font-family: 'Great Vibes', cursive;
  color: #5a4e3c;
  font-size: 3rem;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease, transform 1s ease;
}

.announcement-section.show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .announcement-section {
    font-size: 2.2rem;
    padding: 40px 10px;
  }
}
.family-section {
  background: url('images/fondo.jpg') no-repeat center center/cover;
  padding: 60px 20px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  color: #5a4e3c;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.family-section.show {
  opacity: 1;
  transform: translateY(0);
}

.family-section h2 {
  font-size: 2.4rem;
  color: #b1975b; /* dorado suave */
  margin-bottom: 10px;
}

.family-section .subtitle {
  font-size: 1.1rem;
  color: #777;
  margin-bottom: 40px;
}

.parents-section {
  text-align: center;
  padding: 60px 20px;
  background: #faf9f6; /* tono marfil claro */
}

.parents-title {
  font-family: 'Georgia', serif;
  font-size: 2rem;
  color: #3a2f1d;
  margin-bottom: 2rem;
  letter-spacing: 1px;
}

.parents-container {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.parent-card {
 background: rgba(255, 255, 255, 0.30);
  padding: 25px 35px;
  border-radius: 18px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  max-width: 350px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  max-width: 320px;   /* 🔑 todos tendrán el mismo ancho máximo */
  width: 100%;        /* ocupa el mismo ancho disponible */
  flex: 1 1 320px; 
}

.parent-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.parent-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Times New Roman", serif;
  font-style: italic;
  color: #3a2f1d;
}

.parent-names .name {
  font-size: 1.4rem;
  margin: 0.3rem 0;
}

.parent-names .ampersand {
  font-size: 2rem;
  font-family: "Great Vibes", cursive;
  color: #c4a060;
  margin: 0.6rem 0;
}

.parent-card .role {
  font-size: 1rem;
  color: #777;
  font-style: italic;
  margin-top: 1rem;
}


.ampersand {
  font-size: 2rem;
  color: #c5a46d; /* dorado */
  margin: 0 10px;
  font-family: 'Playfair Display', serif;
  white-space: nowrap;   /* evita salto de línea */
  display: inline-block; /* mantiene unido el símbolo */
  vertical-align: middle;
}

.finado {
  color: #7a1f1f;
  font-style: italic;
  font-weight: 600;
}



.padrinos-carousel-section {
   background: url('images/fondo.jpg') no-repeat center center/cover;
  padding: 60px 20px;
  text-align: center; 
}

.padrinos-carousel-section h2 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  margin-bottom: 30px;
  color: #b49b5a; /* dorado elegante */
}

.carousel-wrapper {
  overflow-x: auto;
  scroll-behavior: smooth;
}

.carousel-track {
  display: flex;
  gap: 20px;
  padding: 10px;
  width: max-content;
  animation: slideLoop 50s linear infinite;
}

.carousel-card {
  flex-shrink: 0;
  width: 280px;
  height: 380px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

/* Animación automática */
@keyframes slideLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive */
@media (max-width: 768px) {
  .carousel-card {
    width: 220px;
    height: 300px;
  }
}
.ubicacion-section {
  background: url('images/fondo.jpg') no-repeat center center/cover;
  padding: 60px 20px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  color: #3c3c3c;
}

.ubicacion-section h2 {
  font-size: 2.2rem;
  color: #bfa14c;
  margin-bottom: 40px;
}

.evento-card {
  background: rgba(255, 255, 255, 0.50);
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin: 30px auto;
  padding: 20px;
  max-width: 500px;
  transition: transform 0.3s ease;
}

.evento-card:hover {
  transform: translateY(-5px);
}

.evento-img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
}

.evento-lugar {
  font-size: 1.2rem;
  color: #5a5a5a;
  margin: 10px 0;
}

.btn-mapa {
  background: #bfa14c;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 10px;
  transition: background 0.3s ease;
}

.btn-mapa:hover {
  background: #a68f3c;
}

/* FadeIn */
.fade-in-section {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in-section.show {
  opacity: 1;
  transform: translateY(0);
}
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.modal-box {
  background: url('images/fondo.jpg') no-repeat center center/cover;
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  overflow: hidden;
  animation: fadeIn 0.4s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  position: relative;
  text-align: center;
  font-family: 'Georgia', serif;
}

.modal-header {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 15px;
  display: block;
  border-bottom: 1px solid #eaeaea;
}

.modal-box iframe {
  width: 100%;
  height: 280px;
  border: none;
}

.modal-body {
  padding: 20px;
  color: #333;
}

.modal-body h3 {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1.2rem;
}

.modal-close {
  margin: 0 auto 20px;
  background-color: #bfa14c;
  color: white;
  font-weight: bold;
  padding: 10px 30px;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.modal-close:hover {
  background-color: #a38b38;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  } 
}
.fade-carousel {
  width: 100%;
  max-width: 620px;
  height: 230px;
  position: relative;
  margin: 1.5rem auto;
  overflow: hidden;
  border-radius: 20px;
}

.fade-slide {
  position: absolute;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

.fade-slide.active {
  opacity: 1;
  z-index: 1;
}

.fade-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* <-- Esto evita que se deforme y llena sin aplastarse */
  border-radius: 20px;
}
.dresscode-section {
  text-align: center;
  padding: 60px 20px;
  background: url('images/fondo.jpg') no-repeat center center/cover;
}

.dresscode-section h2 {
  font-family: 'Georgia', serif;
  font-size: 2em;
  color: #7a663a;
  margin-bottom: 40px;
}

.dresscode-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 60px;
}

.dresscode-card {
  max-width: 200px;
  text-align: center;
  transition: transform 1s ease, opacity 1s ease;
  opacity: 0;
}

.dresscode-card img {
  width: 100%;
  height: auto;
  max-height: 300px;
}

.dresscode-card h3 {
  font-size: 1.4em;
  font-family: 'Georgia', serif;
  margin-top: 10px;
  color: #2d2d2d;
}

.dresscode-card .nota {
  font-size: 0.95em;
  font-style: italic;
  color: #6d5a2d;
  margin-top: 5px;
}

/* Animaciones */
.slide-in-left {
  transform: translateX(-100px);
}
.slide-in-right {
  transform: translateX(100px);
}

.show .slide-in-left,
.show .slide-in-right {
  transform: translateX(0);
  opacity: 1;
}
.dresscode-tag {
  font-family: 'Georgia', serif;
  font-size: 1.2rem;
  color: #b89c5a; /* dorado suave */
  margin-bottom: 1.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Seccion pases */
.pase-section {
  background: url('images/fondo.jpg') no-repeat center center/cover;
  /* background: #f6f1eb; */
  padding: 3rem 1rem;
  text-align: center;
  border-top: 3px solid #d2c1a5;
}

.pase-titulo {
  font-family: 'Georgia', serif;
  font-size: 1.5rem;
  color: #3d3d3d;
  margin-bottom: 1rem;
}

.pase-card {
  background: rgba(255, 255, 255, 0.60);
  border-radius: 15px;
  padding: 2.5rem 2rem;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  text-align: center;
  animation: fadeIn 1s ease-in-out;
}

.nombre-invitado {
  font-size: 1.5rem;
  font-weight: bold;
  color: #b89c5a;
  margin-bottom: 1rem;
  font-family: 'Georgia', serif;
}

.divider {
  width: 50px;
  height: 2px;
  background: #e0cfa3;
  margin: 1rem auto 1.5rem;
  border-radius: 2px;
}

.pases-wrapper {
  margin: 1rem 0;
}

.pases-label {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 0.6rem;
  font-family: 'Georgia', serif;
}

.pases-circulo {
  width: 80px;
  height: 80px;
  background: #fdf8ef;
  border: 2px solid #b89c5a;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  font-weight: bold;
  color: #3a2f1d;
  margin: auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.pases-circulo:hover {
  transform: scale(1.08);
}

.pase-mensaje {
  font-size: 0.95rem;
  color: #8c7547;
  margin-top: 1.8rem;
  font-style: italic;
  line-height: 1.5;
}




@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
/** Hoteles **/
.hotel-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 700px;
  margin: auto;
  min-height: 500px; /* o lo que necesites para que las slides no se corten */
}
.hotel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: rotateY(90deg);
  transition: transform 0.8s ease, opacity 0.8s ease;
  pointer-events: none;
}

.hotel-slide.active {
  opacity: 1;
  transform: rotateY(0deg);
  pointer-events: auto;
  z-index: 2;
}


.hotel-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hotel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  color: #333;
  border: none;
  font-size: 2.5rem;
  padding: 0.1rem 0.6rem;
  cursor: pointer;
  z-index: 5;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  border-radius: 8px;
  transition: background 0.3s, transform 0.3s;
}

.hotel-arrow:hover {
  background: #f1e7c6;
  transform: scale(1.1);
}

.hotel-arrow.left {
  left: -40px;
}

.hotel-arrow.right {
  right: -40px;
}

@media (max-width: 768px) {
  .hotel-arrow.left {
    left: 5px;
  }

  .hotel-arrow.right {
    right: 5px;
  }
}
/** Confirmacion */
.confirmacion-section {
  background: url('images/fondo.jpg') no-repeat center center/cover;
  padding: 80px 20px;
  text-align: center;
  font-family: 'Playfair Display', serif;
  color: #333;
}

.confirmacion-section h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.confirmacion-section p {
  font-size: 1.2rem;
  margin-bottom: 30px;
}

.confirmacion-botones {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-wapp {
  background-color: #25d366;
  color: white;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, background 0.2s ease;
}

.btn-wapp:hover {
  background-color: #1ebe5d;
  transform: scale(1.05);
}

.btn-wapp.novio {
  background-color: #7F7BCB; /* azul lavanda suave */
}

.btn-wapp.novia {
  background-color: #D79CA4; /* rosa empolvado */
}


.icono-btn {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .btn-wapp {
    width: 100%;
    text-align: center;
  }
}
.radio-group {
  margin: 1rem 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-size: 1.1rem;
}

.radio-group input[type="radio"] {
  margin-right: 0.5rem;
  transform: scale(1.2);
}
.mensaje-gracias {
  margin-top: 1rem;
  font-weight: bold;
  font-size: 1.2rem;
  color: #5A45FE;
  text-align: center;
  animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}



/** Invitacion invalida **/
.invitacion-invalida {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background: rgba(248, 245, 240, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
}

.invitacion-invalida .contenido {
  background: white;
  padding: 2rem 3rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  text-align: center;
  max-width: 90%;
  width: 500px;
}

.invitacion-invalida h1 {
  font-size: 2rem;
  color: #a17811;
  margin-bottom: 1rem;
  font-weight: bold;
}

.invitacion-invalida p {
  font-size: 1.2rem;
  color: #333;
  line-height: 1.5;
  margin: 0;
  white-space: normal; /* evita quiebre innecesario */
  word-wrap: break-word;
}

/** Comentarios **/
.comentarios-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 3rem auto;
  padding: 2rem 1rem;
  background: url('images/fondo.jpg') no-repeat center center/cover;
  border-radius: 16px;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.comentarios-section h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  color: #b4945e;
}

.comentarios-section p {
  color: #666;
  margin-bottom: 1rem;
  max-width: 500px;
}

#comentarioInput {
  width: 100%;
  max-width: 500px;
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 12px;
  font-size: 1rem;
  resize: vertical;
  font-family: inherit;
  margin-bottom: 1rem;
  background: #f0e5d5;
  
}

.btn-comentario {
  background: linear-gradient(to right, #5a45fe, #a18dff);
  color: white;
  border: none;
  padding: 0.6rem 1.6rem;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s;
  margin-bottom: 1rem;
}

.btn-comentario:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(90, 69, 254, 0.4);
}

.comentario-exito {
  color: #4CAF50;
  font-style: italic;
  font-size: 1rem;
  text-align: center;
  max-width: 500px;
}
.buzon-container {
  position: relative;
   background: url('images/papelc.jpg') no-repeat center center/cover;
  border-radius: 20px;
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  text-align: center;
  max-width: 450px;
  margin: 2rem auto;
  overflow: hidden;
}

.buzon-container::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 80px;
  background: linear-gradient(to bottom right, #fff8e7, #8f7f66);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  z-index: 1;
}

.buzon-title {
  font-family: 'Georgia', serif;
  font-size: 1.8rem;
  font-weight: bold;
  color: #5A45FE;
  margin-top: 2.5rem;
  position: relative;
  z-index: 2;
}

.buzon-subtitle {
  font-size: 1rem;
  color: #555;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 2;
  font-style: italic;
}

.buzon-textarea {
  width: 100%;
  height: 120px;
  padding: 1rem;
  border:1.5px solid var(--gold-soft); border-radius:14px; resize:vertical;
  border-radius: 12px;
  resize: none;
  font-size: 1rem;
  box-sizing: border-box;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.03);
}

.buzon-btn{
  margin-top:1rem; border:none; cursor:pointer;
  padding:.9rem 2.1rem; border-radius:999px; color:#fff; font-weight:700;
  background: linear-gradient(135deg, #c8a96b, #b4945e);
  box-shadow: 0 6px 14px rgba(180,148,94,.35);
  transition: transform .2s ease, filter .2s ease;
}

.buzon-btn:hover {
  background: linear-gradient(to right, #a58fff, #6c55fe);
}

#sobreImagen {
  width: 80px;
  height: auto;
  display: block;
}

.comentario-exito {
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  color: #b4945e;;
  background: #fffbf0;
  padding: 1rem;
  border-radius: 12px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ✉️ Animación sobre volador */
.sobre-volador {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 2.5rem;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.sobre-volador.animar {
  animation: vueloSobre 1.2s ease-in-out forwards;
}

@keyframes vueloSobre {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(300%, -300%) scale(0.5) rotate(360deg);
    opacity: 0;
  }
}
.sobre-volador {
  font-size: 3rem;
  text-align: center;
  opacity: 1;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.sobre-volador.animar-vuelo {
  animation: vueloEmoji 1.2s ease-in-out forwards;
}

@keyframes vueloEmoji {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  50% {
    transform: translate(-30px, -80px) scale(1.2) rotate(-15deg);
    opacity: 1;
  }
  100% {
    transform: translate(200px, -300px) scale(0.4) rotate(360deg);
    opacity: 0;
  }
}

/** loader **/
/* ===== Pantalla ===== */
/* ===== Overlay de bienvenida ===== */
/* ===== Overlay ===== */
.pantalla-bienvenida{
  position:fixed; inset:0; z-index:9999; overflow:hidden;
  display:grid; place-items:center; isolation:isolate;
}

/* ===== Cortinas sin divisiones, con borde rústico ===== */
.cortina{
  position:absolute; top:0; width:50%; height:100%; z-index:1;

  /* “quemado” con sombras internas, sin tiles */
  box-shadow:
    inset 0 0 120px rgba(0,0,0,.25),
    inset 0 0 80px rgba(139,69,19,.22);

  transition: transform 1.15s ease-in-out;
}

/* Vignette rústico en los bordes con un pseudo-elemento (sin repetición) */
.cortina::before{
  content:"";
  position:absolute; inset:-2.5rem; pointer-events:none;
  /* degradado único, sin repeat = sin divisiones */
  background:
    radial-gradient(120% 80% at 0% 50%, rgba(0,0,0,.28) 0%, rgba(0,0,0,.15) 35%, transparent 62%);
  filter: blur(10px);
  opacity:.55;
}

/* Izquierda / Derecha */
.cortina.izquierda{ left:0;  border-right: 2px solid rgba(0,0,0,.12); }
.cortina.derecha  { right:0; border-left:  2px solid rgba(0,0,0,.12); }
/* espejo del vignette para la derecha */
.cortina.derecha::before{ transform: scaleX(-1); }

/* Estados de animación */
.pantalla-bienvenida.cerrar .cortina.izquierda{ transform: translateX(0); }
.pantalla-bienvenida.cerrar .cortina.derecha  { transform: translateX(0);  }
.pantalla-bienvenida .cortina.izquierda      { transform: translateX(-100%); }
.pantalla-bienvenida .cortina.derecha        { transform: translateX(100%);  }
.pantalla-bienvenida.abrir .cortina.izquierda{ transform: translateX(-100%); }
.pantalla-bienvenida.abrir .cortina.derecha  { transform: translateX(100%);  }


/* ===== Video flotante (modal elegante) ===== */
.video-pop{
  margin-left: 20px;
  position:absolute; inset:0; margin:auto; z-index:2;
  width:min(100vw, 560px); aspect-ratio: 10/9;
  border-radius:20px; overflow:hidden; pointer-events:none;
  opacity:0; transform:scale(.94);
  transition: opacity .45s ease, transform .45s ease;
}
.video-pop.mostrar{ opacity:1; transform:scale(1); pointer-events:auto; }
.clip{ width:100%; height:100%;  display:block; }

/* ===== Botón sello ===== */
.sello-btn {
  position: absolute;
  inset: auto 0 30%; 
  margin: auto;
  z-index: 3;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.6); /* borde fino elegante */
  cursor: pointer;

  /* Estilo elegante tipo sello */
  background: radial-gradient(circle at 30% 30%, #f8e1c4 0%, #d4a373 60%, #a47148 100%);
  color: #fff;
  font-family: "Cinzel", serif; /* fuente elegante */
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);

  /* Sombra elegante */
  box-shadow: 
    0 12px 25px rgba(0, 0, 0, 0.25), 
    inset 0 6px 10px rgba(255, 255, 255, 0.4);

  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sello-btn:hover {
  transform: scale(1.08);
  box-shadow: 
    0 16px 30px rgba(0, 0, 0, 0.35), 
    inset 0 8px 14px rgba(255, 255, 255, 0.45);
}


/* Responsivo suave */
@media (max-width: 480px){
  .sello-btn{ width:100px; height:100px; font-size:.95rem; }
}


/** musica y boton */
.audio-toggle {
  display: none; 
  position: fixed;
  top: 40%;
  right: 0;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.3s ease;
}


.audio-toggle:hover {
  transform: scale(1.1);
}

.audio-toggle img {
  width: 24px;
  height: 24px;
}

/** Trivia */
 .trivia-container { max-width:500px; margin:1rem auto; padding: 1rem; text-align:center;  background: url('images/fondo.jpg') no-repeat center center/cover;}
    .progress-bar { position:relative; width:100%; height:20px; background:#2E3A5F; border-radius:10px; overflow:hidden; margin-bottom:1rem; }
    .progress-fill { height:100%; width:0; background:linear-gradient(90deg,#FF6073,#C372FF); transition:width .5s ease; }
    .progress-text { position:absolute; top:0; left:50%; transform:translateX(-50%); color:#fff; font-weight:bold; line-height:20px; }
    .question-card { background:rgba(0,0,0,0.3); border-radius:30px; padding:1.5rem; margin-bottom:1rem;}
    .question-card p { margin:0; font-size:1.2rem; color:#fff; font-style: italic;}
    .options-container { display:flex; flex-direction:column; gap:.8rem; }
    .option-btn { display:flex; justify-content:space-between; align-items:center; background:hsla(41, 38%, 58%, 0.6); border:4px solid #2E3A5F; border-radius:50px; padding:.8rem 1.2rem; color:#ffffff; 
      font-weight: bold; font-size: larger; cursor:pointer; transition:background .3s; }
    .option-btn:hover { background:rgba(0,0,0,0.2); }
    .option-btn .letter { width:32px; height:32px; border-radius:50%; background:#2E3A5F; display:flex; align-items:center; justify-content:center; font-weight:bold; color:#fff; }
    .option-btn.correct { animation:pop .3s ease; }
    @keyframes pop { 50% { transform:scale(1.1); } }
    .emoji-triste { position:fixed; top:50%; left:50%; font-size:4rem; transform:translate(-50%,-50%) scale(.3); animation:flotar 1.5s forwards ease-out; pointer-events:none; }
    @keyframes flotar {
      0%   { opacity:0; transform:translate(-50%,-40%) scale(.3); }
      30%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
      100% { opacity:0; transform:translate(-50%,-70%) scale(.8); }
    }
    .btn-start-trivia:hover, .btn-play-again:hover { opacity:.9; }
    
    .ranking-container { 
      margin-top:1rem;
      overflow-x:auto;
      -webkit-overflow-scrolling: touch;
     }
    .ranking-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 0.5rem;
  /* table-layout: fixed;  */
}

/* Overlay de carga */
.loading-overlay {
  position: absolute; inset: 0;
  display: none; /* se muestra con JS */
  align-items: center; justify-content: center; flex-direction: column;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(2px);
  z-index: 50;
  text-align: center;
}

.loading-overlay .spinner {
  width: 48px; height: 48px;
  border: 4px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  margin-bottom: 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay .text {
  font-weight: 600; letter-spacing: .3px;
}

table thead {
  background-color: #d4b47c;
}

    .ranking-table th, .ranking-table td { padding:.1rem; border:1px solid #f5f5f5; color:#333; }

    
    .btn-start-trivia, .btn-play-again {
      background:#FF6073; color:#fff; border:none;
      padding:.8rem 1.2rem; border-radius:30px;
      cursor:pointer; font-size:1rem; margin-top:1rem;
    }
    .ranking-table tbody td {
   background: url('images/fondo.jpg') no-repeat center center/cover;
  padding: 0.50rem;
  color: #333;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.5);
  position: relative;
  text-align: center;
  font-style: italic;
}
.results-message {
  font-size: 1.1rem;
  color: var(--grad-from);
  margin: 0.5rem 0 1rem;
  font-weight: bold;
}
/* estilo base para secciones de invitación */
.invitation-section {
  background: url('images/fondo.jpg') no-repeat center center/cover;        /* tono crema suave */
  padding: 2rem 1rem;
  text-align: center;
  margin: 2rem 0;
  border-radius: 0.75rem;
}

/* títulos de sección */
.section-title {
  font-family: 'Times New Roman', serif;
  font-size: 2rem;
  color: #b4945e;               /* dorado elegante */
  margin: 0;
}

/* subtítulos / párrafos secundarios */
.section-subtitle {
  font-family: sans-serif;
  font-size: 1rem;
  color: #333;
  margin: 0.5rem 0 1.5rem;
}

/* botón “Iniciar” */
.btn-start-trivia {
  background: #FF6073;
  color: #fff;
  border: none;
  padding: 0.8rem 1.2rem;
  border-radius: 30px;
  cursor: pointer;
  font-size: 1rem;
}
.btn-start-trivia:hover {
  opacity: 0.9;
}
/* --- Sección general --- */
.countdown-section {
  background: url('images/fondo.jpg') no-repeat center center/cover;          /* crema suave */
  padding: 3rem 1rem;             /* espacio superior e inferior */
}

/* --- Contenedor centrado --- */
.countdown-wrapper {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
  position: relative; 
  z-index: 1;
}

/* --- Título elegante --- */
.countdown-title {
  font-family: 'Times New Roman', serif;
  font-size: 2rem;
  color: #b4945e;                 /* dorado */
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* --- Tarjeta de números --- */
.countdown-card {
  display: flex;
  justify-content: space-around;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.6);
  padding: 2rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  overflow: visible;
}

/* --- Cajas de tiempo --- */
.time-box {
  flex: 1;
  text-align: center;
}
.time-box .number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #b4945e;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.time-box .label {
  font-size: 0.6rem;
  color: #555;
  margin-top: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.countdown-card {
  position: relative;
  /* borde doble dorado degradado */
  border: 4px double #b4945e;
  border-image: linear-gradient(45deg, var(--grad-from), var(--grad-to)) 1;
  background: rgba(255,255,255,0.8);
  padding: 2rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Opcional: esquinas decorativas con pseudo-elementos */
.countdown-card::before,
.countdown-card::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border: 4px solid #b4945e;
}
.countdown-card::before {
  top: -4px; left: -4px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 1rem;
}
.countdown-card::after {
  bottom: -4px; right: -4px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: 1rem;
}
.last-container {
  position: relative;
  background: url('images/last.jpg') no-repeat center center/cover;
  height: 80vh;
  color: white;
  text-align: center;
  font-family: 'Playfair Display', serif;
}
/* Fuente script para “Save the Date” */
.save-date {
  font-family: 'Great Vibes', cursive;
  font-size: 4rem;
  color: #b4945e;             /* dorado elegante */
  text-align: center;
  line-height: 0.9;
  margin-bottom: 0.5rem;
  position: relative;
}

/* Cada línea en su propio bloque para ajustar tamaño si quieres */
.save-date .line1 {
  display: block;
  font-size: 3rem;
}
.save-date .line2 {
  display: block;
  font-size: 4.5rem;
}

/* Adorno simple antes y después */
.save-date::before,
.save-date::after {
  content: "❧";
  font-size: 1.2rem;
  color: #b4945e;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.save-date::before {
  left: -1.5rem;
}
.save-date::after {
  right: -1.5rem;
}

/* Ajustes responsivos */
@media (max-width: 480px) {
  .save-date {
    font-size: 2.5rem;
  }
  .save-date .line1 { font-size: 2rem; }
  .save-date .line2 { font-size: 3rem; }
}

/* Carrusel: scroll suave y sin scrollbar visible */
.moments-carousel {
  display: flex;
  overflow-x: auto;
   overflow-y: hidden;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 1rem;
  scroll-behavior: smooth;              /* suaviza el scroll */
}
.moments-carousel::-webkit-scrollbar { display: none; }

.gallery-wrapper {
  position: relative;
}

.carousel-item {
  background: #fff;                      /* marco blanco */
  padding: 0.3rem;                       /* espacio entre foto y marco */
  border: 0.2rem solid #fff;            /* grosor de marco */
  border-radius: 0.2rem;                /* esquinas ligeramente redondeadas */
  box-shadow:
    0 4px 8px rgba(0,0,0,0.1),           /* sombra suave principal */
    0 2px 4px rgba(0,0,0,0.06);          /* sombra de relleno */
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  flex: 0 0 70%;                         /* mantiene tu tamaño de carrusel */
  max-width: 70%;
  scroll-snap-align: center;
}

/* cuando esté activa, un marco un poco más grueso y sombra más profunda */
.carousel-item.active {
  padding: 0.75rem;
  border-width: 0.3rem;
  box-shadow:
    0 8px 16px rgba(0,0,0,0.15),
    0 4px 6px rgba(0,0,0,0.1);
  transform: scale(1.05);
}

/* la propia imagen ya no necesita borde */
.carousel-item img {
  width: 100%;
   height: 100%;       /* que llene el alto también */
  object-fit: cover; 
  display: block;
  border-radius: 0;                      /* integra con el marco */
}


/* Flechas estilizadas */
.carousel-nav button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, #FF6073, #C372FF);
  border: none;
  color: #fff;
  font-size: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.carousel-nav button:hover {
  transform: translateY(-50%) scale(1.1);
  opacity: 0.9;
}
.prev-btn  { left: -1rem; }
.next-btn  { right: -1rem; }


.gallery-section {
  text-align: center;
  padding: 60px 20px;
  background: url('images/fondo.jpg') no-repeat center center/cover;
}
/* ===== Contenedor parallax ===== */


.parallax-section1 {
  position: relative;
  height: 360px;               /* Ajusta la altura que prefieras */
  overflow: hidden;
}

/* ===== Imagen de fondo ===== */
.parallax-bg1{
  position: absolute; inset: -20% 0 auto 0;   /* margen extra arriba */
  width: 100%; height: 140%;
  background: url('images/par1.jpg') center/cover no-repeat;
  will-change: transform, filter;
  transition: transform .2s ease-out, filter .2s ease-out;
  transform: translateY(0) scale(1.05);       /* leve zoom elegante */
  filter: brightness(.92) contrast(1.03) saturate(1.05);
}


.parallax-section1::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18) 80%, rgba(0,0,0,.28));
  pointer-events:none;
  z-index:1;
  mix-blend-mode: multiply;
}

.parallax-section1::before{
  content:"";
  position:absolute; inset:12px;
  border:1px solid rgba(180,148,94,.35);
  border-radius:14px;
  z-index:2;
}


.parallax-section2 {
  position: relative;
  height: 360px;               /* Ajusta la altura que prefieras */
  overflow: hidden;
}

/* ===== Imagen de fondo ===== */
.parallax-bg2{
  position: absolute; inset: -20% 0 auto 0;   /* margen extra arriba */
  width: 100%; height: 140%;
  background: url('images/par2.jpg') center/cover no-repeat;
  will-change: transform, filter;
  transition: transform .2s ease-out, filter .2s ease-out;
  transform: translateY(0) scale(1.05);       /* leve zoom elegante */
  filter: brightness(.92) contrast(1.03) saturate(1.05);
}


.parallax-section2::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 80% at 50% 120%, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 45%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.18) 80%, rgba(0,0,0,.28));
  pointer-events:none;
  z-index:1;
  mix-blend-mode: multiply;
}

.parallax-section2::before{
  content:"";
  position:absolute; inset:12px;
  border:1px solid rgba(180,148,94,.35);
  border-radius:14px;
  z-index:2;
}

/* Opcional: un overlay suave */
.parallax-section3::after {
  content: "";
  position: absolute; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.2);
}
.parallax-section3 {
  position: relative;
  height: 350px;               /* Ajusta la altura que prefieras */
  overflow: hidden;
}

/* ===== Imagen de fondo ===== */
.parallax-bg3 {
  position: absolute;
  top: -25%; left: 0;
  width: 100%; height: 150%;   /* Más alto que el contenedor para cubrir el movimiento */
  background: url('images/par3.jpg') center/cover no-repeat;
  will-change: transform;
  transition: transform 0.1s ease-out;
}


/* Opcional: un overlay suave */
.parallax-section3::after {
  content: "";
  position: absolute; top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.2);
}

/* Contenedor y foto circular debajo del título */
.buzon-photo-wrapper {
  text-align: center;
  margin: 1rem 0;
}
.buzon-photo {
  width: 180px;                 /* ajusta el tamaño según prefieras */
  height: auto;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid #fff;       /* marco blanco */
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: transform 0.5s ease;
}

/* Hover suave (opcional) */
.buzon-photo:hover {
  transform: scale(1.05);
}


/** Mesa de regalos */
.mesa-regalos-section {
  text-align: center;
  padding: 60px 20px;
  position: relative;
  background: url('images/fondo.jpg') no-repeat center center/cover;
  background-color: #fff8e7; /* blanco cálido con toque dorado */
}

.mesa-regalos-container {
  max-width: 700px;
  margin: auto;
  background: rgba(255, 255, 255, 0.50);
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  animation: fadeInUp 1s ease;
}

.mesa-regalos-title {
  font-size: 2rem;
  color: #5A45FE;
  margin-bottom: 15px;
  font-family: 'Playfair Display', serif;
}

.mesa-regalos-text {
  font-size: 1.1rem;
  color: #444;
  line-height: 1.6;
  margin-bottom: 25px;
  font-style: italic;
}


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

/** toast **/
.toast {
  visibility: hidden;
  min-width: 250px;
  background: linear-gradient(135deg, #b4945e, #d6c094);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 12px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  font-family: 'Georgia', serif;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  opacity: 0;
  transition: opacity .4s, bottom .4s;
}
.toast.show {
  visibility: visible;
  opacity: 1;
  bottom: 50px;
}


/** video **/
/* Tarjeta “papel” */
.video-section{
  display:flex; 
  justify-content:center; 
   background: url('images/fondo.jpg') no-repeat center center/cover;        /* tono crema suave */
  padding: 2rem 1rem;
}
.video-card{
  width:min(880px, 92vw);
  border:1px solid rgba(180,148,94,.25);
  border-radius:20px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  padding:28px 22px;
  text-align:center;
  background: rgba(255, 255, 255, 0.30);
}

.video-title{
  font-family: "Georgia", serif;
  color: var(--ink);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  margin: 0 0 14px;
  color: #a38b38;
}
.video-title::after{
  content:""; display:block; width:76px; height:3px; margin:.6rem auto 0;
  background: var(--gold); opacity:.45; border-radius:3px;
}

/* Marco del video (aspect-ratio elegante) */
.video-frame{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  aspect-ratio: 16 / 9;   /* Soporta navegadores modernos */
  background:#000;
}

/* Video ocupa todo */
.hero-video{
  width:auto; height:100%; object-fit:cover; display:block;
  filter: brightness(.98) contrast(1.02) saturate(1.03);
}

.video-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;   /* el overlay no tapa */
  z-index: 2;
}
.replay-btn {
  pointer-events: auto;   /* el botón sí recibe clic */
  font-size: 2rem;
  background: rgba(0,0,0,0.5);
  border: none;
  border-radius: 50%;
  color: #fff;
  padding: .8rem 1.2rem;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.replay-btn:hover { transform: scale(1.1); background: rgba(0,0,0,0.7); }

/* Asegura que el video no tape el overlay */
.video-frame { position: relative; }
.hero-video  { position: relative; z-index: 1; }

.video-caption{
  margin:14px 0 0;
  color:#6b5c40;
  font-style: italic;
  font-size:1rem;
}

/* Menos animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .hero-video{ filter:none }
}
.btn-sec {
  background: rgba(0,0,0,.55);
  color: #fff;
  border: 0;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background .2s;
}
.btn-sec:hover {
  background: rgba(0,0,0,.75);
}