/* --- RESETEO BÁSICO --- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100vh;
}

body {
  font-family: 'Cormorant Garamond', serif;
  background-color: #fdf8f5;
  background-image: url('img/fondo-mov-peachg-al-92.webp');
  background-repeat: repeat-y;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  color: #5a4033;
  text-align: center;
  overflow-x: hidden;
}

/* Fondo para Pantallas Anchas / PC (>= 768px) */
@media (min-width: 768px) {
  body {
    background-image: url('img/pop-up-escrit-peach-flores.webp');
    background-size: cover;
    background-position: center center;
  }
}

/* --- PORTADA / CARTA COMPLETA --- */
.welcome-cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url('img/pop-up-mov-15-rosa.webp') no-repeat center center;
  background-size: cover;
  transition: opacity 0.8s ease, transform 0.8s ease;
}

@media (min-width: 768px) {
  .welcome-cover {
    background-image: url('img/pop-up-15-escrit-rosa.webp');
  }
}

.btn-sello {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  outline: none;
  animation: latidoLento 2.5s infinite ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sello-img {
  width: 121px;
  height: auto;
  display: block;
}

@keyframes latidoLento {
  0% { transform: scale(1); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.15)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.25)); }
  100% { transform: scale(1); filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.15)); }
}

.welcome-cover.fade-out {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

/* --- CONTENEDOR PRINCIPAL --- */
.main-invitation {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.main-invitation.hidden {
  display: none;
}

/* --- SECCIÓN HERO --- */
.hero-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 50px;
  padding-bottom: 20px;
}

/* CONTENEDOR MARCO DE LA FOTO */
.photo-wrapper {
  position: relative;
  width: 320px;
  height: 480px;
  margin: 0 auto;
}

/* APLICACIÓN DEL RECORTE SVG NATIVO */
.photo-mask {
  width: 100%;
  height: 100%;
  clip-path: url(#waveMask);
  -webkit-clip-path: url(#waveMask);
  background-color: #f0f0f0;
}

/* FOTO DE LA QUINCEAÑERA */
.quince-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* --- ESTILO DE LAS FLORES --- */
.flor {
  position: absolute;
  z-index: 5;
  pointer-events: none;
}

.flor-izq {
  width: 140px;
  bottom: 0px;
  left: -45px;
}

.flor-der {
  width: 140px;
  bottom: 0px;
  right: -45px;
}

@media (min-width: 768px) {
  .photo-wrapper {
    width: 340px;
    height: 500px;
  }

  .flor-izq {
    width: 170px;
    bottom: 10px;
    left: -140px;
  }

  .flor-der {
    width: 170px;
    bottom: 10px;
    right: -140px;
  }
}

/* --- SECCIÓN DE TEXTO DE LA INVITACIÓN --- */
.invitation-text-section {
  max-width: 650px;
  margin: 0 auto;
  padding: 20px 25px 60px 25px;
}

.subtitle-script {
  font-family: 'Great Vibes', cursive;
  font-size: 2.8rem;
  color: #8c6d46;
  margin: 0;
}

.title-name {
  font-family: 'Great Vibes', cursive;
  font-size: 4.5rem;
  color: #70502a;
  font-weight: 400;
  margin: -10px 0 20px 0;
}

.poem-text, .blessing-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #6b5344;
  margin: 15px 0;
}

.divider-wrapper {
  margin: 25px 0;
}

.floral-divider {
  width: 100%;
  max-width: 450px;
  height: auto;
}

.section-gold-title {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  letter-spacing: 2px;
  color: #937341;
  margin-bottom: 8px;
  font-weight: 700;
}

.names-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.5;
  color: #4a382c;
  margin-top: 0;
}

.family-block {
  margin: 30px 0;
}

/* --- CLASES DE ANIMACIÓN AL HACER SCROLL --- */
.fade-in-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

.fade-in-element.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- ESTILOS DE LA CUENTA REGRESIVA --- */
.countdown-section {
  margin: 25px 0;
}

.countdown-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}

.time-card {
  background-color: #f3c2c9; /* Tono rosa pastel de la imagen */
  width: 75px;
  height: 85px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.time-number {
  font-family: 'Great Vibes', cursive;
  font-size: 2.2rem;
  color: #ffffff;
  line-height: 1;
  margin-bottom: 4px;
}

.time-label {
  font-family: 'Great Vibes', cursive;
  font-size: 1.1rem;
  color: #ffffff;
}

@media (min-width: 768px) {
  .countdown-container {
    gap: 18px;
  }
  .time-card {
    width: 90px;
    height: 100px;
  }
  .time-number {
    font-size: 2.8rem;
  }
  .time-label {
    font-size: 1.3rem;
  }
}

/* --- SECCIÓN CALENDARIO Y POEMA --- */
.calendar-section {
  margin: 10px auto 20px auto; /* Cambiado de 35px a 10px superior */
  max-width: 500px;
}

.poem-text-full {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.7;
  color: #6b5344;
  margin-bottom: 30px;
  padding: 0 10px;
}

/* TARJETA DEL CALENDARIO (FONDO 100% TRANSPARENTE) */
.calendar-card {
  background-color: transparent; /* Quita el relleno blanco */
  border: 1.5px solid #f2bdc6;    /* Mantiene únicamente el marco rosa */
  border-radius: 20px;            /* Bordes redondeados */
  padding: 25px 20px;
  box-shadow: none;               /* Quita cualquier sombra previa */
}

.calendar-title {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  letter-spacing: 1.5px;
  color: #8c6d46;
  font-weight: 700;
  margin-bottom: 15px;
}

.calendar-img-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calendar-img {
  width: 100%;
  max-width: 380px;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .calendar-card {
    padding: 30px 25px;
  }
  .calendar-title {
    font-size: 1.5rem;
  }
  .poem-text-full {
    font-size: 1.35rem;
  }
}

/* --- TARJETA DE CELEBRACIÓN --- */
.celebration-card {
  position: relative;
  width: 90%;
  max-width: 500px;
  margin: 35px auto;
  padding: 55px 25px 50px 25px;
  background-color: transparent;
  border: 1.5px solid #f2bdc6;
  border-radius: 28px;
  overflow: hidden; /* Mantiene los bordes limpios */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

/* FLORES EN LAS ESQUINAS DE LA TARJETA (RECORTADAS) */
.card-flower {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.flower-top-right {
  width: 150px;
  top: -35px;    /* Oculta la parte superior echa hacia afuera */
  right: -35px;  /* Oculta el borde derecho */
}

.flower-bottom-left {
  width: 160px;
  bottom: -35px; /* Oculta la parte inferior echa hacia afuera */
  left: -35px;   /* Oculta el borde izquierdo */
}

/* TÍTULO Y CONTENIDO */
.celebration-title {
  font-family: 'Cinzel', serif;
  font-size: 1.5rem;
  letter-spacing: 2px;
  color: #70502a;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

/* ILUSTRACIÓN PAREJA */
.dancing-couple-wrapper {
  margin: 10px 0 15px 0;
  position: relative;
  z-index: 2;
}

.dancing-couple-img {
  width: 110px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* DETALLES DE TEXTO */
.celebration-details {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
}

.time-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.35rem;
  color: #6b5344;
  margin-bottom: 2px;
}

.time-value {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.5rem;
  color: #4a382c;
  font-weight: 600;
  margin-bottom: 15px;
}

.venue-name, .venue-address {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #5a4033;
  line-height: 1.4;
}

/* BOTÓN DE UBICACIÓN ROSA */
.btn-location {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: #eebfca;
  color: #ffffff;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  padding: 8px 22px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, background-color 0.2s ease;
  position: relative;
  z-index: 2;
}

.btn-location:hover {
  background-color: #e5acb9;
  transform: translateY(-2px);
}

.location-icon {
  fill: currentColor;
}

@media (min-width: 768px) {
  .flower-top-right {
    width: 180px;
    top: -45px;
    right: -45px;
  }
  .flower-bottom-left {
    width: 190px;
    bottom: -45px;
    left: -45px;
  }
  .dancing-couple-img {
    width: 130px;
  }
}

/* --- TARJETA CÓDIGO DE VESTIMENTA --- */
.dresscode-card {
  position: relative;
  width: 90%;
  max-width: 500px; /* Igualamos el ancho a la tarjeta de Celebración */
  margin: 35px auto;
  padding: 55px 25px 50px 25px; /* Más padding para darle la misma altura */
  background-color: transparent;
  border: 1.5px solid #f2bdc6;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

.dresscode-title {
  font-family: 'Cinzel', serif;
  font-size: 1.45rem;
  letter-spacing: 2px;
  color: #70502a;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
}

.dresscode-icon-wrapper {
  margin: 20px 0 25px 0;
  position: relative;
  z-index: 2;
}

.dresscode-icon-img {
  width: 115px; /* Escalado ligeramente para rellenar la altura */
  height: auto;
  display: block;
  margin: 0 auto;
}

.dresscode-style {
  font-family: 'Cinzel', serif;
  font-size: 1.3rem;
  letter-spacing: 1.5px;
  color: #5a4033;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.dresscode-subtitle {
  font-family: 'Cinzel', serif;
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  color: #8c6d46;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}

.dresscode-restriction-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #6b5344;
  max-width: 330px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* FLORES DE LAS ESQUINAS DEL CÓDIGO DE VESTIMENTA */
.dresscode-card .flower-top-right {
  width: 130px;
  top: -25px;
  right: -25px;
}

.dresscode-card .flower-bottom-left {
  width: 130px;
  bottom: -25px;
  left: -25px;
}

/* --- TARJETA CONFIRMACIÓN DE ASISTENCIA --- */
.rsvp-card {
  position: relative;
  width: 90%;
  max-width: 500px;
  margin: 35px auto;
  padding: 55px 25px 50px 25px;
  background-color: transparent;
  border: 1.5px solid #f2bdc6;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
  box-sizing: border-box;
}

.rsvp-title {
  font-family: 'Cinzel', serif;
  font-size: 1.35rem;
  letter-spacing: 2px;
  color: #70502a;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}

.rsvp-deadline {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #70502a;
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
}

.rsvp-form {
  position: relative;
  z-index: 2;
}

.rsvp-label {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #5a4033;
  margin-bottom: 10px;
}

.required {
  color: #d9534f;
}

.rsvp-input {
  width: 100%;
  max-width: 320px;
  height: 42px;
  padding: 8px 15px;
  border: 1px solid #d4c5b9;
  border-radius: 10px;
  background-color: transparent; /* Fondo 100% transparente */
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  color: #4a3a30;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 25px;
  transition: border-color 0.3s;
}

.rsvp-input:focus {
  border-color: #f2bdc6;
  background-color: transparent; /* Mantiene la transparencia al escribir */
}

.rsvp-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-bottom: 30px;
}

.radio-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  max-width: 260px;
}

.radio-container input {
  display: none;
}

.radio-custom {
  width: 18px;
  height: 18px;
  border: 1px solid #9c8473;
  border-radius: 50%;
  margin-right: 12px;
  position: relative;
  flex-shrink: 0;
}

.radio-container input:checked + .radio-custom::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  background-color: #8c6d46;
  border-radius: 50%;
}

.radio-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.2rem;
  color: #5a4033;
}

.btn-rsvp {
  background-color: #f0c4cd;
  color: #ffffff;
  border: none;
  padding: 10px 35px;
  border-radius: 12px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s, transform 0.2s;
}

.btn-rsvp:hover {
  background-color: #e5b3be;
  transform: translateY(-2px);
}

/* FLORES INVERTIDAS PARA ESTA TARJETA */
.rsvp-card .flower-top-left {
  width: 130px;
  top: -25px;
  left: -25px;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.rsvp-card .flower-bottom-right {
  width: 130px;
  bottom: -25px;
  right: -25px;
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* --- SECCIÓN RECUERDOS / REGALOS --- */
.gift-section {
  text-align: center;
  width: 90%;
  max-width: 480px;
  margin: 40px auto;
  box-sizing: border-box;
}

.gift-title {
  font-family: 'Cinzel', serif;
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: #70502a;
  margin-bottom: 20px;
  font-weight: 500;
}

/* Limita tanto la imagen como su contenedor */
.gift-icon-wrapper {
  width: 100%;
  max-width: 95px; /* Tamaño máximo fijado */
  margin: 0 auto 20px auto;
}

.gift-icon-img {
  width: 100%;
  max-width: 95px; /* Evita que crezca de más en móviles */
  height: auto;
  display: block;
  margin: 0 auto;
}

.gift-text {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #70502a;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 420px;
}

/* Ajustes para pantallas móviles muy pequeñas (<= 360px) */
@media (max-width: 360px) {
  .gifts-section {
    margin: 25px auto;
  }
  .gifts-title {
    font-size: 1.25rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
  }
  .gift-icon-wrapper {
    margin-bottom: 15px;
  }
  .gift-icon-img {
    width: 90px;
  }
  .gifts-text {
    font-size: 1.1rem;
    line-height: 1.5;
  }
}

/* Ajustes para tablets y pantallas grandes (>= 768px) */
@media (min-width: 768px) {
  .gifts-section {
    margin: 45px auto;
  }
  .gifts-title {
    font-size: 1.6rem;
    letter-spacing: 3.5px;
  }
  .gift-icon-img {
    width: 125px;
    max-width: 100%;
  }
  .gifts-text {
    font-size: 1.35rem;
  }
}

/* --- SECCIÓN FINAL --- */
.thanks-section {
  text-align: center;
  width: 90%;
  max-width: 500px;
  margin: 40px auto 0 auto;
  position: relative;
  z-index: 2;
}

.camera-icon-wrapper {
  margin-bottom: 20px;
}

.camera-icon-img {
  width: 90px;
  height: auto;
  display: block;
  margin: 0 auto;
}

.thanks-phrase-italic {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: #70502a;
  margin-bottom: 6px;
  line-height: 1.4;
}

.thanks-title-main {
  font-family: 'Cinzel', serif;
  font-size: 1.25rem;
  letter-spacing: 2px;
  color: #70502a;
  margin: 25px 0;
  font-weight: 600;
}

.bouquet-image-wrapper {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

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

/* --- FOOTER INFERIOR --- */
.footer-bar {
  background-color: #f2bdc6;
  text-align: center;
  padding: 10px 15px;
  width: 100%;
  box-sizing: border-box;
}

.footer-bar p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #ffffff;
  margin: 0;
  letter-spacing: 0.5px;
}

.heart-icon {
  color: #d9534f;
  display: inline-block;
  margin: 0 2px;
}

/* --- BOTÓN FLOTANTE DE MÚSICA --- */
.music-toggle-btn {
  position: fixed;
  bottom: 20px; /* En lugar de top */
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #f2bdc6;
  color: #f2bdc6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 999;
  transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.5s ease;
}

.music-toggle-btn svg {
  width: 24px;
  height: 24px;
}

.music-toggle-btn:hover {
  transform: scale(1.08);
  background-color: #ffffff;
}

.music-toggle-btn.hidden {
  display: none;
  opacity: 0;
}