/* ============================================================
   Invitación de Boda — Estilos v2
   ============================================================ */

:root{
  --crema:      #F7F2E9;
  --crema-2:    #FFFCF7;
  --oliva:      #4A5A3A;
  --oliva-2:    #3A4830;
  --dorado:     #A8843D;
  --dorado-2:   #C9A85C;
  --tinta:      #2B2620;
  --tinta-suave:#5C5446;
  --linea:      rgba(74,90,58,0.18);

  --fuente-display: 'Cormorant Garamond', serif;
  --fuente-cuerpo:   'Lora', serif;
  --fuente-util:     'Lora', serif;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--fuente-cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width:100%; display:block; }

.contenedor{
  max-width: 560px;
  margin: 0 auto;
  position: relative;
}

/* ---------- Divisor floral ---------- */
.divisor{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin: 36px auto;
  width: 70%;
  color: var(--dorado);
}
.divisor svg{ width:28px; height:28px; flex-shrink:0; }
.divisor .linea{ flex:1; height:1px; background: var(--linea); }

/* ============================================================
   PANTALLA DE APERTURA — sobre + sello
   ============================================================ */
#sello-pantalla{
  position: fixed;
  inset: 0;
  z-index: 999;
  /* El sobre ocupa toda la pantalla como fondo */
  background-image: url('../img/sobre.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: opacity 1s ease, visibility 1s ease;
  /* Overlay muy sutil para suavizar el fondo sin taparlo */
  /* No usamos overlay oscuro — el sobre ya es claro y elegante */
}

/* Capa de velo muy ligero para que el texto sea legible */
#sello-pantalla::before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(247, 242, 233, 0.15);
  pointer-events: none;
}

#sello-pantalla.oculto{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Contenedor central del sello sobre el sobre */
.sello-wrapper{
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* Posicionar en la zona del solape del sobre (parte baja-central) */
  margin-top: 5vh;
}

/* Botón que envuelve el sello real (imagen PNG con transparencia) */
.sello-boton{
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  /* Tamaño del sello: grande en desktop, responsive en móvil */
  width: clamp(140px, 22vw, 200px);
  height: clamp(140px, 22vw, 200px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .35s ease;
  animation: respirar 2.8s ease-in-out infinite;
  /* Sombra suave alrededor del sello */
  filter: drop-shadow(0 12px 28px rgba(100,70,20,0.35));
}

.sello-boton img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
}

.sello-boton:hover{
  transform: scale(1.06);
  filter: drop-shadow(0 16px 36px rgba(100,70,20,0.50));
}

.sello-boton:focus-visible{
  outline: 3px solid var(--dorado);
  outline-offset: 6px;
  border-radius: 50%;
}

.sello-boton.romper{
  animation: romper-sello .75s ease forwards;
}

@keyframes respirar{
  0%,100%{ transform: scale(1); filter: drop-shadow(0 12px 28px rgba(100,70,20,0.35)); }
  50%{ transform: scale(1.03); filter: drop-shadow(0 16px 36px rgba(168,132,61,0.55)); }
}

@keyframes romper-sello{
  0%  { transform: scale(1) rotate(0deg); opacity:1; }
  35% { transform: scale(1.18) rotate(-4deg); opacity:1; }
  65% { transform: scale(1.3) rotate(5deg); opacity:.7; }
  100%{ transform: scale(1.7) rotate(8deg); opacity:0; }
}

/* Texto debajo del sello */
.sello-texto{
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: clamp(16px, 3vw, 20px);
  color: var(--tinta);
  text-align: center;
  line-height: 1.6;
  letter-spacing: .03em;
  text-shadow: 0 1px 3px rgba(255,255,255,0.9);
}

.sello-firma{
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: clamp(13px, 2.2vw, 16px);
  color: var(--dorado);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(255,255,255,0.9);
  margin-top: -6px;
}

/* Pulso de "toca aquí" para móvil */
@media (pointer: coarse){
  .sello-texto::after{
    content: ' 👆';
    font-style: normal;
  }
}

/* ---------- Secciones generales ---------- */
section{ padding: 64px 28px; text-align:center; position:relative; }

.eyebrow{
  font-family: var(--fuente-util);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dorado);
  margin: 0 0 10px;
}
h1,h2,h3{ font-family: var(--fuente-display); color: var(--oliva-2); margin: 0; font-weight:600; }
p{ line-height: 1.85; color: var(--tinta-suave); }

/* ---------- Portada ---------- */
.portada{
  min-height: 100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, var(--crema) 0%, var(--crema-2) 100%);
  padding: 40px 28px;
}
.portada-imagen{
  width: 220px; height: 280px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 18px 40px rgba(43,38,32,0.18);
  margin-bottom: 28px;
  border: 6px solid var(--crema-2);
}
.portada .eyebrow{ margin-bottom: 4px; }
.portada h1{
  font-size: 56px;
  line-height: 1.05;
  margin-bottom: 10px;
}
.portada .frase{
  font-style: italic;
  color: var(--dorado);
  font-family: var(--fuente-display);
  font-size: 22px;
  margin-top: 6px;
}
.nombres-amp{ color: var(--dorado); font-style: italic; }

/* ---------- Frase de amor ---------- */
.frase-amor p{
  font-family: var(--fuente-display);
  font-size: 21px;
  font-style: italic;
  color: var(--oliva-2);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ---------- Fecha / Contador ---------- */
.fecha-grande{
  font-family: var(--fuente-display);
  font-size: 84px;
  color: var(--oliva-2);
  line-height: 1;
}
.fecha-detalle{
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 6px;
}
.contador{
  display:flex;
  justify-content:center;
  gap: 18px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.contador .bloque{
  background: var(--crema-2);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 14px 16px;
  min-width: 64px;
}
.contador .num{
  font-family: var(--fuente-display);
  font-size: 30px;
  color: var(--dorado);
  display:block;
}
.contador .lbl{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---------- Invitado / Pases ---------- */
.tarjeta-invitado{
  background: var(--crema-2);
  border: 1px solid var(--linea);
  border-radius: 14px;
  padding: 36px 28px;
  max-width: 420px;
  margin: 0 auto;
  box-shadow: 0 10px 30px rgba(43,38,32,0.06);
}
.tarjeta-invitado .nombre-invitado{
  font-size: 30px;
  margin: 6px 0 18px;
}
.pases-numero{
  font-family: var(--fuente-display);
  font-size: 64px;
  color: var(--dorado);
  line-height: 1;
}
.pases-label{
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

/* ---------- Padres / bendición ---------- */
.padres-grid{
  display:flex;
  justify-content:center;
  gap: 48px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.padres-grupo .eyebrow{ margin-bottom:10px; }
.padres-grupo p{ margin: 2px 0; color: var(--oliva-2); font-size:16px; }

/* ---------- Ceremonia / Recepción ---------- */
.evento-card{
  max-width: 420px;
  margin: 0 auto 28px;
  padding: 30px;
  border: 1px solid var(--linea);
  border-radius: 14px;
  background: var(--crema-2);
}
.evento-icono{
  width:46px; height:46px;
  margin: 0 auto 14px;
  color: var(--dorado);
}
.evento-hora{
  font-family: var(--fuente-display);
  font-size: 30px;
  color: var(--dorado);
  margin: 8px 0 2px;
}
.evento-lugar{ font-size:17px; color: var(--oliva-2); margin-bottom: 16px; }
.btn-mapa{
  display:inline-block;
  font-family: var(--fuente-util);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oliva-2);
  border: 1px solid var(--oliva);
  padding: 10px 22px;
  border-radius: 30px;
  text-decoration:none;
  transition: all .25s ease;
}
.btn-mapa:hover{ background: var(--oliva); color:#fff; }

/* ---------- Dress code ---------- */
.dresscode-grid{
  display:flex;
  justify-content:center;
  gap: 50px;
  margin-top: 22px;
  flex-wrap:wrap;
}
.dresscode-item svg{ width:38px;height:38px;color:var(--dorado);margin-bottom:10px; }
.dresscode-item .rol{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-suave); }
.dresscode-item .traje{ font-family: var(--fuente-display); font-size:20px; color:var(--oliva-2); }
.dresscode-nota{ font-size:13px; font-style:italic; margin-top:24px; }

/* ---------- Itinerario ---------- */
.itinerario-lista{
  max-width: 360px;
  margin: 30px auto 0;
  text-align:left;
}
.itinerario-item{
  display:flex;
  align-items:center;
  gap:18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea);
}
.itinerario-item:last-child{ border-bottom:none; }
.itinerario-icono{ width:34px;height:34px;color:var(--dorado); flex-shrink:0; }
.itinerario-item .titulo{ font-family:var(--fuente-display); font-size:18px; color:var(--oliva-2); }
.itinerario-item .hora{ margin-left:auto; font-size:14px; color:var(--dorado); letter-spacing:.05em; }

/* ============================================================
   GALERÍA con zoom / lightbox
   ============================================================ */
.galeria{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 480px;
  margin: 30px auto 0;
}

.galeria-item{
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: zoom-in;
}

.galeria-item:nth-child(odd){ margin-top: 18px; }

.galeria-item img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  transition: transform .4s ease, filter .4s ease;
}

.galeria-item:hover img{
  transform: scale(1.05);
  filter: brightness(1.08);
}

/* Icono de lupa al hacer hover */
.galeria-item::after{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(74,90,58,0) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3Cpath d='M11 8v6M8 11h6'/%3E%3C/svg%3E") no-repeat center center;
  border-radius: 6px;
  transition: background-color .3s ease;
}
.galeria-item:hover::after{
  background-color: rgba(43,38,32,0.22);
}

/* ---------- LIGHTBOX ---------- */
#lightbox{
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(20,16,12,0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  cursor: zoom-out;
}
#lightbox.activo{
  opacity: 1;
  visibility: visible;
}
#lightbox img{
  max-width: min(90vw, 900px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  transform: scale(.94);
  transition: transform .35s ease;
  cursor: default;
}
#lightbox.activo img{
  transform: scale(1);
}

.lightbox-cerrar{
  position: absolute;
  top: 18px; right: 22px;
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.12);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
  z-index: 10;
}
.lightbox-cerrar:hover{ background: rgba(255,255,255,0.25); }

.lightbox-nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  font-size: 28px;
  width: 46px; height: 60px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
  z-index: 10;
}
.lightbox-nav:hover{ background: rgba(255,255,255,0.25); }
#lb-prev{ left: 14px; }
#lb-next{ right: 14px; }

/* Contador de fotos en lightbox */
.lightbox-contador{
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.6);
  font-family: var(--fuente-util);
  font-size: 13px;
  letter-spacing: .08em;
}

/* ---------- Regalos ---------- */
.btn-dorado{
  display:inline-block;
  margin-top: 18px;
  font-family: var(--fuente-util);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--dorado);
  padding: 14px 30px;
  border-radius: 30px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition: background .25s ease;
}
.btn-dorado:hover{ background: var(--oliva); }

/* ---------- RSVP ---------- */
.rsvp-form{
  max-width: 400px;
  margin: 28px auto 0;
  text-align:left;
}
.rsvp-form label{
  display:block;
  font-size: 12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--tinta-suave);
  margin: 18px 0 6px;
}
.rsvp-form input[type=text],
.rsvp-form select,
.rsvp-form textarea{
  width:100%;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: var(--crema-2);
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  color: var(--tinta);
}
.rsvp-form textarea{ resize:vertical; min-height:80px; }
.rsvp-form button{
  width:100%;
  margin-top: 24px;
}
.rsvp-limite{ font-size:13px; margin-top:18px; font-style:italic; }
.rsvp-mensaje-ok{
  background: #eef3e7;
  border: 1px solid var(--oliva);
  color: var(--oliva-2);
  padding: 18px;
  border-radius: 10px;
  margin-top: 20px;
  font-size:15px;
}

/* ---------- Despedida ---------- */
.despedida{ background: var(--oliva-2); padding: 70px 28px; }
.despedida p{ color: rgba(255,255,255,0.82); max-width: 420px; margin: 0 auto; }
.despedida .firma{
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 30px;
  color: var(--dorado-2);
  margin-top: 22px;
}
.despedida .divisor .linea{ background: rgba(255,255,255,0.2); }
.despedida .divisor{ color: var(--dorado-2); }

/* ---------- Botón flotante de música ---------- */
#musica-flotante{
  position: fixed;
  bottom: 22px; right: 22px;
  width: 50px; height:50px;
  border-radius: 50%;
  background: var(--oliva-2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  z-index: 100;
  color: var(--dorado-2);
  border: none;
}
#musica-flotante svg{ width:22px; height:22px; }
#musica-flotante.sonando{ background: var(--dorado); }
#musica-flotante.sonando svg{ animation: girar 3s linear infinite; }
@keyframes girar{ from{transform:rotate(0)} to{transform:rotate(360deg)} }

/* ---------- Scroll reveal ---------- */
.aparecer{
  opacity:0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.aparecer.visible{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE — móvil
   ============================================================ */
@media (max-width: 480px){
  .portada h1{ font-size:42px; }
  .fecha-grande{ font-size:64px; }
  .padres-grid{ gap: 30px; }

  /* Sello un poco más grande en móvil para facilitar el toque */
  .sello-boton{
    width: 160px;
    height: 160px;
  }

  /* Navegación lightbox más accesible en móvil */
  .lightbox-nav{
    width: 38px;
    height: 50px;
    font-size: 22px;
  }
  #lb-prev{ left: 6px; }
  #lb-next{ right: 6px; }
}

/* Pantallas muy pequeñas */
@media (max-width: 340px){
  .sello-boton{ width:130px; height:130px; }
  .sello-texto{ font-size:14px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}