/* ============================================================
   TOKENS
============================================================ */
:root{
  --paper: #F1E8D6;
  --paper-dark: #E7D9BE;
  --ink: #3B2A20;
  --rust: #9C5A3C;
  --olive: #6B7654;
  --gold: #B8935A;

  --display: 'Cormorant Garamond', serif;
  --script: 'Petit Formal Script', cursive;
  --body: 'EB Garamond', serif;
  --hand: 'Homemade Apple', cursive;

  --max-w: 480px;
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  background: var(--ink);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing:antialiased;
}

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

/* ============================================================
   PANTALLA DE SELLO (portada de apertura)
============================================================ */
#seal-screen{
  position:fixed; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px;
  background:
    radial-gradient(ellipse at center, #4a3626 0%, var(--ink) 70%);
  z-index:50;
}
#seal{
  width:140px; height:140px; cursor:pointer;
  transition: transform .4s ease;
}
#seal:hover{ transform: scale(1.05); }
.seal-ring{ fill:var(--rust); stroke:var(--gold); stroke-width:2; }
.seal-monogram{
  font-family: var(--script);
  font-size:64px;
  fill:var(--paper);
}
.seal-hint{
  font-family:var(--body); font-style:italic; letter-spacing:.08em;
  color:var(--paper-dark); font-size:14px; text-transform:uppercase;
}

#seal-screen.opening #seal-svg{
  animation: crack .7s ease forwards;
}
@keyframes crack{
  0%{ transform:scale(1); opacity:1; }
  60%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1.4); opacity:0; }
}
#seal-screen.hide{
  animation: fadeOut .5s ease forwards .3s;
  pointer-events:none;
}
@keyframes fadeOut{ to{ opacity:0; visibility:hidden; } }

/* ============================================================
   ESTRUCTURA GENERAL
============================================================ */
#site{
  max-width: var(--max-w);
  margin:0 auto;
  background: var(--ink);
}

.paper{
  position:relative;
  background: var(--paper);
  background-image:
    repeating-linear-gradient(0deg, rgba(59,42,32,0.02) 0px, transparent 2px);
  padding: 64px 32px 56px;
  text-align:center;
}

.edge-torn{
  position:absolute; left:0; right:0; bottom:-1px; height:18px;
  background: var(--ink);
  clip-path: polygon(
    0% 0%, 4% 100%, 8% 0%, 12% 100%, 16% 0%, 20% 100%, 24% 0%, 28% 100%,
    32% 0%, 36% 100%, 40% 0%, 44% 100%, 48% 0%, 52% 100%, 56% 0%, 60% 100%,
    64% 0%, 68% 100%, 72% 0%, 76% 100%, 80% 0%, 84% 100%, 88% 0%, 92% 100%,
    96% 0%, 100% 100%, 100% 0%
  );
}

.section-title{
  font-family: var(--display);
  font-weight:600;
  font-size: 34px;
  letter-spacing:.04em;
  text-transform:uppercase;
  margin: 0 0 28px;
}
.section-sub{
  font-style:italic; font-size:15px; margin-top:-16px; margin-bottom:28px; color:#5b4632;
}

/* ============================================================
   PORTADA
============================================================ */
#portada{ padding-top:80px; }
.eyebrow{
  font-style:italic; letter-spacing:.1em; text-transform:uppercase;
  font-size:13px; color:var(--rust); margin-bottom:8px;
}
.names{
  font-family:var(--script);
  font-weight:400;
  font-size: 56px;
  line-height:1.15;
  margin: 4px 0 28px;
  color:var(--ink);
}
.names .amp{
  display:block; font-size:30px; color:var(--rust); margin: -4px 0;
}
.portada-imagen-marco{
  border: 8px solid var(--paper);
  outline: 1px solid var(--gold);
  outline-offset: -14px;
  margin: 0 auto 24px;
  max-width:320px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.portada-imagen-marco img{ aspect-ratio: 4/5; object-fit:cover; }
.fecha-texto{
  font-family:var(--display); font-size:20px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--olive); margin: 8px 0 20px;
}
.cita{
  font-style:italic; font-size:16px; max-width:280px; margin:0 auto; color:#5b4632;
}

/* ============================================================
   TIMELINE / ITINERARIO
============================================================ */
.timeline{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:0;
  max-width:260px; margin:0 auto;
  text-align:left;
}
.timeline li{
  position:relative;
  padding: 0 0 28px 28px;
  border-left: 1px solid var(--gold);
}
.timeline li:last-child{ border-left-color:transparent; padding-bottom:0; }
.timeline li::before{
  content:''; position:absolute; left:-5px; top:2px;
  width:9px; height:9px; border-radius:50%;
  background:var(--rust); border:2px solid var(--paper);
}
.timeline .hora{
  display:block; font-family:var(--display); font-size:19px; color:var(--rust);
}
.timeline .texto{ font-size:15px; }

/* ============================================================
   LUGARES (ceremonia / celebración)
============================================================ */
.lugar-marco{
  border: 8px solid var(--paper);
  outline: 1px solid var(--gold);
  outline-offset: -14px;
  max-width:320px; margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}
.lugar-marco img{ aspect-ratio: 4/3; object-fit:cover; }
.lugar-nombre{
  font-family:var(--display); font-weight:600; font-size:24px;
  letter-spacing:.04em; text-transform:uppercase; margin: 4px 0;
}
.lugar-direccion{ margin:2px 0; font-size:15px; }
.lugar-hora{ font-style:italic; color:var(--rust); margin: 4px 0 20px; }

.btn-link{
  display:inline-block; margin-top:4px;
  font-family:var(--display); font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none; color:var(--ink);
  border-bottom: 1px solid var(--rust); padding-bottom:2px;
}

/* ============================================================
   DRESS CODE
============================================================ */
.dresscode-titulo{
  font-family:var(--display); font-size:30px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--rust); margin:0 0 12px;
}
.dresscode-texto{ max-width:280px; margin:0 auto; font-size:15px; }

/* ============================================================
   TRANSPORTE / ALOJAMIENTO
============================================================ */
.transporte-lista, .alojamiento-lista{
  display:flex; flex-direction:column; gap:18px; max-width:300px; margin:0 auto;
}
.transporte-item, .alojamiento-item{
  border:1px solid var(--gold); padding:16px; text-align:left;
}
.transporte-item .tramo{
  font-family:var(--display); text-transform:uppercase; letter-spacing:.08em;
  color:var(--rust); font-size:14px; display:block; margin-bottom:4px;
}
.alojamiento-item .nombre{ font-family:var(--display); font-size:19px; display:block; }
.alojamiento-item a, .transporte-item a{ font-size:13px; color:var(--rust); }

/* ============================================================
   RSVP
============================================================ */
.btn-principal{
  display:inline-block; margin-top:8px;
  background: var(--rust); color: var(--paper);
  font-family:var(--display); font-size:17px; letter-spacing:.06em;
  text-transform:uppercase; text-decoration:none;
  padding: 14px 36px; border: 1px solid var(--ink);
}

/* ============================================================
   GALERÍA
============================================================ */
.galeria-carrusel{
  display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:8px; -webkit-overflow-scrolling:touch;
}
.galeria-carrusel img{
  scroll-snap-align:center; width:220px; height:280px; object-fit:cover;
  flex:0 0 auto; border: 6px solid var(--paper); outline:1px solid var(--gold); outline-offset:-10px;
}

/* ============================================================
   REGALO
============================================================ */
.regalo-texto{ max-width:300px; margin:0 auto 20px; font-size:15px; }
.cuenta-card{
  border:1px solid var(--gold); padding:20px; max-width:280px; margin:0 auto;
}
.iban{ font-family:var(--display); letter-spacing:.05em; font-size:17px; margin:6px 0 14px; }
.btn-secundario{
  font-family:var(--body); background:none; border:1px solid var(--ink);
  padding:8px 20px; cursor:pointer; letter-spacing:.05em;
}
.btn-secundario:hover{ background:var(--ink); color:var(--paper); }

/* ============================================================
   ÁLBUM
============================================================ */
.album-texto{ max-width:290px; margin:0 auto 16px; font-size:15px; }
.album-codigo{ margin-top:14px; font-size:14px; }
.album-codigo span{ font-family:var(--display); color:var(--rust); }

/* ============================================================
   COUNTDOWN
============================================================ */
.countdown{ display:flex; gap:18px; justify-content:center; }
.countdown div{ display:flex; flex-direction:column; align-items:center; }
.countdown span{ font-family:var(--display); font-size:34px; color:var(--rust); }
.countdown small{ text-transform:uppercase; letter-spacing:.08em; font-size:11px; }

/* ============================================================
   FOOTER
============================================================ */
.footer{
  background: var(--ink); color: var(--paper-dark);
  text-align:center; padding: 32px 0 40px;
  font-family:var(--script); font-size:26px;
}

/* ============================================================
   MÚSICA
============================================================ */
#music-toggle{
  position:fixed; bottom:18px; right:18px; z-index:40;
  width:46px; height:46px; border-radius:50%;
  background:var(--rust); color:var(--paper); border:1px solid var(--ink);
  font-size:18px; cursor:pointer;
}

/* ============================================================
   TRANSICIONES DE LUJO — aparición delicada al hacer scroll
============================================================ */
.paper > *:not(.edge-torn){
  opacity: 0;
  transform: translateY(34px);
  transition: opacity 1.2s cubic-bezier(.19,1,.22,1), transform 1.2s cubic-bezier(.19,1,.22,1);
  will-change: opacity, transform;
}
.paper.in-view > *:not(.edge-torn){
  opacity: 1;
  transform: none;
}
.paper > *:not(.edge-torn):nth-child(1){ transition-delay:.05s; }
.paper > *:not(.edge-torn):nth-child(2){ transition-delay:.16s; }
.paper > *:not(.edge-torn):nth-child(3){ transition-delay:.27s; }
.paper > *:not(.edge-torn):nth-child(4){ transition-delay:.38s; }
.paper > *:not(.edge-torn):nth-child(5){ transition-delay:.49s; }
.paper > *:not(.edge-torn):nth-child(6){ transition-delay:.60s; }
.paper > *:not(.edge-torn):nth-child(7){ transition-delay:.71s; }

/* Itinerario: entrada lateral, delicada, en cascada */
.timeline li{
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .9s cubic-bezier(.19,1,.22,1), transform .9s cubic-bezier(.19,1,.22,1);
}
.paper.in-view .timeline li{ opacity:1; transform:none; }
.timeline li:nth-child(1){ transition-delay:.18s; }
.timeline li:nth-child(2){ transition-delay:.34s; }
.timeline li:nth-child(3){ transition-delay:.50s; }
.timeline li:nth-child(4){ transition-delay:.66s; }
.timeline li:nth-child(5){ transition-delay:.82s; }

/* Dress code: el título se abre con delicadeza (letter-spacing) */
.paper .dresscode-titulo{
  opacity: 0;
  letter-spacing: .45em;
  transform: translateY(34px);
  transition: opacity 1.3s ease, letter-spacing 1.4s cubic-bezier(.19,1,.22,1), transform 1.2s cubic-bezier(.19,1,.22,1);
}
.paper.in-view .dresscode-titulo{
  opacity: 1;
  letter-spacing: .08em;
  transform: none;
}

/* ============================================================
   FOTOS: aparición suave (blur-up + destello de luz)
============================================================ */
.portada-imagen-marco, .lugar-marco{ position:relative; overflow:hidden; }
.portada-imagen-marco img,
.lugar-marco img{
  filter: blur(20px);
  opacity: 0;
  transform: scale(1.08);
  transition: filter 1.7s cubic-bezier(.19,1,.22,1), opacity 1.5s ease, transform 1.9s cubic-bezier(.19,1,.22,1);
}
.paper.in-view .portada-imagen-marco img,
.paper.in-view .lugar-marco img{
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}
.portada-imagen-marco::after, .lugar-marco::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.55) 48%, transparent 64%);
  transform: translateX(-130%);
  pointer-events:none;
}
.paper.in-view .portada-imagen-marco::after,
.paper.in-view .lugar-marco::after{
  animation: shine 1.5s ease-out .6s 1;
}
@keyframes shine{ to{ transform: translateX(130%); } }

/* Galería: cada foto aparece suave al desplazarse */
.galeria-carrusel img{
  filter: blur(16px);
  opacity: 0;
  transform: scale(1.06);
  transition: filter 1.1s cubic-bezier(.19,1,.22,1), opacity 1s ease, transform 1.2s cubic-bezier(.19,1,.22,1);
}
.galeria-carrusel img.is-visible{
  filter: blur(0);
  opacity: 1;
  transform: scale(1);
}

/* ============================================================
   BRILLO SUAVE EN TÍTULOS (glow loop, ligero)
============================================================ */
@keyframes glowPulse{
  0%, 100%{ text-shadow: 0 0 0 rgba(184,147,90,0); }
  50%{ text-shadow: 0 0 14px rgba(184,147,90,.5), 0 0 28px rgba(184,147,90,.22); }
}
.glow-title{ animation: glowPulse 4.8s ease-in-out infinite; }

/* El botón de RSVP respira con un brillo suave */
@keyframes btnGlow{
  0%, 100%{ box-shadow: 0 0 0 rgba(156,90,60,0); }
  50%{ box-shadow: 0 0 22px rgba(156,90,60,.45); }
}
.btn-principal{ animation: btnGlow 3.6s ease-in-out infinite; }

/* ============================================================
   TEXTO QUE SE ESCRIBE A MANO, EN EL MOMENTO
============================================================ */
.handwritten{
  font-family: var(--hand);
  font-size: 1.3em;
  line-height: 1.5;
  color: var(--ink);
}
.typing-cursor::after{
  content:'';
  display:inline-block;
  width:2px; height:.9em;
  background: var(--rust);
  margin-left:2px;
  vertical-align:middle;
  animation: blink .8s step-end infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ============================================================
   CONTADOR MÁGICO DE LUJO
============================================================ */
.countdown-luxe{ display:flex; justify-content:center; }
.countdown-frame{
  position:relative;
  padding: 32px 30px 26px;
  border: 1px solid var(--gold);
}
.countdown-frame .corner{
  position:absolute; width:18px; height:18px;
  border: 1px solid var(--gold);
}
.countdown-frame .corner.tl{ top:-1px; left:-1px; border-right:none; border-bottom:none; }
.countdown-frame .corner.tr{ top:-1px; right:-1px; border-left:none; border-bottom:none; }
.countdown-frame .corner.bl{ bottom:-1px; left:-1px; border-right:none; border-top:none; }
.countdown-frame .corner.br{ bottom:-1px; right:-1px; border-left:none; border-top:none; }

.countdown{ display:flex; align-items:baseline; gap:10px; justify-content:center; }
.cd-unit{ display:flex; flex-direction:column; align-items:center; min-width:52px; }
.cd-unit span{
  font-family: var(--display);
  font-size: 38px;
  font-weight: 600;
  background: linear-gradient(120deg, var(--rust) 0%, var(--gold) 45%, var(--rust) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerGold 5s linear infinite;
}
.cd-unit small{ text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--olive); margin-top:2px; }
.cd-sep{ font-family:var(--display); font-size:26px; color:var(--gold); align-self:flex-start; margin-top:6px; }
@keyframes shimmerGold{
  0%{ background-position: 0% center; }
  100%{ background-position: -220% center; }
}

/* ============================================================
   REDUCE MOTION
============================================================ */
@media (prefers-reduced-motion: reduce){
  #seal:hover{ transform:none; }
  #seal-screen.opening #seal-svg, #seal-screen.hide{ animation:none; }

  .paper > *:not(.edge-torn),
  .timeline li,
  .portada-imagen-marco img,
  .lugar-marco img,
  .galeria-carrusel img,
  .dresscode-titulo{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .paper .dresscode-titulo{ letter-spacing:.08em !important; }
  .glow-title, .btn-principal, .cd-unit span{ animation: none !important; }
  .portada-imagen-marco::after, .lugar-marco::after{ display:none; }
}

/* Foco visible para accesibilidad */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--rust); outline-offset: 3px;
}