/* ==================================================================
   ANA & WILMER — INVITACIÓN DIGITAL DE BODA
   Sistema de diseño
   ------------------------------------------------------------------
   Color   ivory #FBF7F0 · white #FFFFFF · beige #EDE3D3
           gold #C6A15B · gold-light #E8D5A8
           sage #8FA888 · sage-light #C9D6C4
           rose #D8A8A0 · rose-light #EFD9D4
           ink #4A4238 · ink-soft #8C8272
   Type    display "Alex Brush" (caligráfica, nombres — con
                     mesura, solo en momentos clave)
           serif   "Cormorant Garamond" (títulos)
           sans    "Jost" (cuerpo / UI)
   Firma   Enredadera dorada continua que se dibuja con el scroll,
           uniendo cada capítulo de la historia — la boda como un
           camino que crece.
================================================================== */

/* ---- (Opcional) autoalojar tipografías: descarga los .woff2 en
   assets/fonts/ y descomenta este bloque en vez de usar el <link>
   de Google Fonts en index.html.
@font-face{font-family:'Alex Brush';src:url('assets/fonts/AlexBrush-Regular.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/CormorantGaramond-Regular.woff2') format('woff2');font-display:swap;}
@font-face{font-family:'Jost';src:url('assets/fonts/Jost-Regular.woff2') format('woff2');font-display:swap;}
*/

:root{
  color-scheme: light;
  /* Color */
  --ivory:#FBF7F0;
  --white:#FFFFFF;
  --beige:#F2EBDF;
  --gold:#C6A15B;
  --gold-light:#E8D5A8;
  --sage:#75916E;
  --sage-light:#D0DFCA;
  --rose:#D8A8A0;
  --rose-light:#EFD9D4;
  --ink:#4A4238;
  --ink-soft:#8C8272;

  /* Type */
  --font-script:'Alex Brush', cursive;
  --font-serif:'Cormorant Garamond', serif;
  --font-sans:'Jost', sans-serif;

  /* Rhythm */
  --section-pad-y: clamp(4.5rem, 10vw, 8rem);
  --container-w: 720px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--ivory) url('assets/images/texture-bg.jpg') center center / cover no-repeat;
  pointer-events:none;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;background:none;border:none;cursor:pointer;color:inherit;}
h1,h2,h3{margin:0;font-weight:500;}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
}

/* ------------------------------------------------------------ */
/* DIVISORES DE OLAS — transición suave entre fondos de sección,
   inspirados en el motivo de "colinas" superpuestas             */
/* ------------------------------------------------------------ */
.wave-divider{
  position:relative;
  z-index:2;
  width:100%;
  height:clamp(200px, 25vw, 400px);
  margin:-1px 0;
  overflow:hidden;
  line-height:0;
}
.wave-divider svg{
  width:100%;
  height:100%;
  display:block;
}
.wave-divider--to-beige .wave-back{fill:var(--sage);opacity:1;}
.wave-divider--to-beige .wave-front{fill:var(--sage-light);opacity:1;}
.wave-divider--to-beige .wave-base{fill:var(--beige);}
.wave-divider--to-ivory .wave-back{fill:var(--sage);opacity:1;}
.wave-divider--to-ivory .wave-front{fill:var(--sage-light);opacity:1;}

/* ------------------------------------------------------------ */
/* LOADER                                                        */
/* ------------------------------------------------------------ */
.loader{
  position:fixed;inset:0;z-index:9999;
  background:var(--ivory);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.25rem;
  transition:opacity 1s var(--ease), visibility 1s var(--ease);
}
.loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.loader__monogram{
  font-family:var(--font-serif);
  font-size:2.4rem;
  letter-spacing:.15em;
  color:var(--ink);
  font-style:italic;
}
.loader__amp{color:var(--gold);margin:0 .3em;font-family:var(--font-sans); font-weight: 300;}
.loader__line{
  width:1px;height:40px;
  background:linear-gradient(var(--gold), transparent);
  animation:loaderGrow 1.4s var(--ease) infinite;
}
@keyframes loaderGrow{
  0%{height:0;opacity:0;}
  50%{height:40px;opacity:1;}
  100%{height:0;opacity:0;}
}

/* ------------------------------------------------------------ */
/* VID DECORATIVA (elemento firma)                                */
/* ------------------------------------------------------------ */
.vine{
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:100px;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.55;
  display:none; /* se activa en desktop, ver media query */
}
#vinePath{
  stroke-dasharray:4600;
  stroke-dashoffset:4600;
  transition:stroke-dashoffset .1s linear;
}
@media (min-width: 960px){
  .vine{display:block;}
}

/* ------------------------------------------------------------ */
/* PÉTALOS                                                        */
/* ------------------------------------------------------------ */
.petals{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden;}
.petal{
  position:absolute;
  top:-5%;
  width:10px;height:10px;
  background:var(--rose);
  border-radius:0 60% 0 60%;
  opacity:.75;
  animation:petalFall linear forwards;
}
@keyframes petalFall{
  to{ transform:translateY(110vh) translateX(var(--drift,0px)) rotate(var(--rot,180deg)); opacity:0;}
}

/* Sparkles */
.sparkle{
  position:absolute;
  width:4px;height:4px;
  background:var(--gold-light);
  border-radius:50%;
  pointer-events:none;
  animation:sparkleTwinkle 2.4s ease-in-out infinite;
}
@keyframes sparkleTwinkle{
  0%,100%{opacity:0;transform:scale(.4);}
  50%{opacity:.9;transform:scale(1);}
}

/* ------------------------------------------------------------ */
/* REPRODUCTOR DE MÚSICA                                          */
/* ------------------------------------------------------------ */
.music-player{
  position:fixed;
  top:1.25rem; right:1.25rem;
  z-index:60;
  display:flex;align-items:center;gap:.6rem;
}
.music-player__btn{
  width:46px;height:46px;
  border-radius:50%;
  background:var(--white);
  border:1px solid var(--beige);
  box-shadow:0 4px 14px rgba(74,66,56,.1);
  display:flex;align-items:center;justify-content:center;
  position:relative;
  color:var(--gold);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.music-player__btn:hover{transform:scale(1.06);box-shadow:0 6px 18px rgba(74,66,56,.16);}
.music-player__icon{width:18px;height:18px;}
.music-player__disc{
  position:absolute;inset:0;
  border-radius:50%;
  border:1px dashed var(--gold-light);
  animation:spin 6s linear infinite paused;
}
.music-player.is-playing .music-player__disc{animation-play-state:running;}
@keyframes spin{to{transform:rotate(360deg);}}
.music-player__label{
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft);
  background:var(--white);
  padding:.4rem .7rem;
  border-radius:20px;
  border:1px solid var(--beige);
  opacity:0;
  transform:translateX(6px);
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.music-player:hover .music-player__label{opacity:1;transform:translateX(0);}
@media(max-width:640px){ .music-player__label{display:none;} }

/* ------------------------------------------------------------ */
/* NAV DE PROGRESO (puntos laterales)                             */
/* ------------------------------------------------------------ */
.progress-nav{
  position:fixed;
  right:1.5rem; top:50%;
  transform:translateY(-50%);
  z-index:50;
  display:none;
  flex-direction:column;
  gap:.85rem;
}
@media(min-width:960px){ .progress-nav{display:flex;} }
.progress-nav button{
  width:8px;height:8px;
  border-radius:50%;
  background:var(--beige);
  transition:all .35s var(--ease);
}
.progress-nav button.is-active{
  background:var(--gold);
  transform:scale(1.5);
}

/* ------------------------------------------------------------ */
/* UTILIDADES DE SECCIÓN                                         */
/* ------------------------------------------------------------ */
main > section, .parents, .dresscode{
  position:relative;
  z-index:2;
  padding:var(--section-pad-y) 1.5rem;
  max-width:var(--container-w);
  margin:0 auto;
  text-align:center;
}
.eyebrow{
  font-family:var(--font-sans);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .9rem;
}
.section-title{
  font-family:var(--font-serif);
  font-size:clamp(1.9rem, 4vw, 2.6rem);
  font-style:italic;
  font-weight:500;
  color:var(--ink);
  margin-bottom:1rem;
  letter-spacing:.01em;
}
.section-title--script{
  font-family:var(--font-script);
  font-style:normal;
  font-size:clamp(2rem, 5vw, 3rem);
  line-height:1.3;
}
.section-divider{
  width:180px;height:24px;
  margin:0 auto 1.5rem;
  display:block;
  opacity:.8;
}
.section-garland{
  width:min(90%,420px);
  height:auto;
  margin:0 auto 1rem;
  display:block;
}

/* Botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:.5rem;
  padding:.95rem 2.2rem;
  font-family:var(--font-sans);
  font-size:.78rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  border-radius:30px;
  transition:all .35s var(--ease);
  cursor:pointer;
}
.btn--ghost{
  border:1px solid rgba(255,255,255,.7);
  color:#fff;
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(2px);
}
.btn--ghost:hover{background:rgba(255,255,255,.18);transform:translateY(-2px);}
.btn--outline-ink{
  border:1px solid var(--gold);
  color:var(--ink);
  background:rgba(255,255,255,.5);
}
.btn--outline-ink:hover{background:var(--gold);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(198,161,91,.3);}
.btn--outline-sage{
  border:1px solid var(--sage);
  color:var(--ink);
  background:rgba(255,255,255,.5);
}
.btn--outline-sage:hover{background:var(--sage);color:#fff;transform:translateY(-2px);box-shadow:0 8px 20px rgba(117,145,110,.3);}
.btn--solid{
  background:var(--gold);
  color:var(--white);
  border:1px solid var(--gold);
}
.btn--solid:hover{background:#B38F49;transform:translateY(-2px);box-shadow:0 8px 20px rgba(198,161,91,.35);}
.btn--line{
  margin-top:1.1rem;
  border:1px solid var(--gold);
  color:var(--gold);
  background:transparent;
}
.btn--line:hover{background:var(--gold);color:var(--white);}

/* Scroll reveal */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}

/* ------------------------------------------------------------ */
/* HERO                                                           */
/* ------------------------------------------------------------ */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  width:100%;
  max-width:none;
  padding:0;
  display:flex;
  align-items:center;
}
.hero__bg{position:absolute;inset:0;z-index:0;}
.hero__glow{
  position:absolute;
  top:50%;left:50%;
  width:min(70vw,640px);height:min(70vw,640px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(232,213,168,.35) 45%, rgba(232,213,168,0) 72%);
  animation:glowPulse 8s ease-in-out infinite;
}
@keyframes glowPulse{
  0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1);}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06);}
}
.hero__wreath{
  position:absolute;
  top:50%;left:50%;
  width:min(120vw,900px);height:auto;
  transform:translate(-50%,-50%);
  opacity:.5;
}
.hero__content{
  position:relative;z-index:2;
  width:100%;
  padding:6rem 1.5rem 4rem;
  text-align:center;
  color:var(--ink);
}
.hero__eyebrow{
  font-size:.9rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1.5rem;
}
.hero__sprig{
  width:110px;height:auto;
  margin:0 auto 1.4rem;
  display:block;
  opacity:.85;
}
.hero__names{
  font-family:var(--font-script);
  font-size:clamp(3.4rem, 13vw, 6.5rem);
  line-height:1;
  margin-bottom:1.1rem;
  font-weight:400;
  color:var(--ink);
}
.hero__name{display:inline-block;}
.hero__amp{
  font-family:var(--font-serif);
  font-size:.5em;
  margin:0 .25em;
  vertical-align:.15em;
  color:inherit;
}
.amp-mark{
  font-family:var(--font-serif);
  font-size:.55em;
  margin:0 .12em;
  vertical-align:.08em;
  color:inherit;
}
.hero__phrase{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(1rem,2.4vw,1.25rem);
  max-width:32ch;
  margin:0 auto 1rem;
  color:var(--ink-soft);
}
.hero__date{
  font-size:1.1rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:2.2rem;
}
.hero__scrollcue{
  position:absolute;left:50%;bottom:1.6rem;
  transform:translateX(-50%);
  color:var(--sage);
  z-index:2;
  animation: bounceDown 2s infinite ease-in-out;
}
.hero__scrollcue svg{
  width: 32px;
  height: 32px;
  display: block;
}
@keyframes bounceDown {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(10px);
  }
  60% {
    transform: translateX(-50%) translateY(5px);
  }
}

.portada-flor-izq-sup,
.portada-flor-izq-inf,
.portada-flor-der-inf {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  animation: sway 9s ease-in-out infinite;
}
.portada-flor-izq-sup {
  top: -10px;
  left: -10px;
  width: clamp(110px, 30vw, 260px);
}
.portada-flor-izq-inf {
  bottom: -10px;
  left: -10px;
  width: clamp(90px, 25vw, 200px);
  animation-delay: -2s;
}
.portada-flor-der-inf {
  bottom: -10px;
  right: -10px;
  width: clamp(90px, 25vw, 200px);
  animation-delay: -4s;
}
@keyframes sway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(1.2deg) translateY(-4px); }
}

/* Tonos de color para las ilustraciones botánicas de línea fina
   (usan currentColor, que hereda correctamente a través de <use>) */
.tone-sage{color:var(--sage);}
.tone-sage-light{color:var(--sage-light);}
.tone-sage-dark{color:#5f7a58;}
.tone-rose{color:var(--rose);}
.tone-rose-deep{color:#C48D82;}
.tone-gold{color:var(--gold);}

/* Florales decorativos reutilizables para el resto de secciones */
.section-floral{
  position:absolute;
  width:clamp(70px,13vw,140px);
  height:auto;
  z-index:-1;
  opacity: 1;
  pointer-events:none;
  animation:sway 11s ease-in-out infinite;
}
.section-floral--sm{width:clamp(50px,9vw,95px);opacity: 0.9;}
.section-floral--tl{top:-6px;left:-6px;}
.section-floral--tr{top:-6px;right:-6px;transform:scaleX(-1);}
.section-floral--bl{bottom:-6px;left:-6px;transform:scaleY(-1);animation-delay:-4s;}
.section-floral--br{bottom:-6px;right:-6px;transform:rotate(180deg);animation-delay:-2s;}
.footer__floral{
  display:block;
  width:60px;height:auto;
  margin:0 auto 1.2rem;
  opacity:.8;
}

/* ------------------------------------------------------------ */
/* COUNTDOWN — medallón circular con corona y marco geométrico    */
/* ------------------------------------------------------------ */
.countdown{background:transparent;}

.countdown__medallion{
  position:relative;
  width:clamp(320px, 60vw, 420px);
  height:clamp(320px, 60vw, 420px);
  margin:2.5rem auto 0;
}
.countdown__frame,
.countdown__wreath{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.countdown__frame{opacity:.9;}
.countdown__wreath{opacity:.95;}

.countdown__circle{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:66%;height:66%;
  border-radius:50%;
  background:var(--white);
  box-shadow:0 20px 50px -20px rgba(74,66,56,.3);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:2.2rem;
  gap:.4rem;
}
.countdown__grid{
  display:flex;align-items:center;justify-content:center;
  gap:0;
}
.countdown__unit{
  display:flex;flex-direction:column;align-items:center;
  padding:0 .4rem;
}
.countdown__num{
  font-family:var(--font-sans);
  font-weight:600;
  font-size:clamp(1.3rem,4vw,1.8rem);
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  line-height:1;
}
.countdown__label{
  margin-top:.3rem;
  font-size:.62rem;
  letter-spacing:.1em;
  text-transform:lowercase;
  color:var(--gold);
}
.countdown__sep{
  color:var(--beige);
  font-size:1.3rem;
  padding:0 .05rem;
  align-self:flex-start;
  margin-top:.2rem;
}
.countdown__heart{
  width:34px;height:34px;
  color:var(--sage);
  margin-top:.6rem;
  animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
  0% { transform: scale(1); }
  15% { transform: scale(0.85); }
  30% { transform: scale(1); }
  45% { transform: scale(0.85); }
  60%, 100% { transform: scale(1); }
}
@media(max-width:480px){
  .countdown__medallion{width:82vw;height:82vw;}
  .countdown__num{font-size:clamp(1rem,4.5vw,1.4rem);}
  .countdown__unit{padding:0 .2rem;}
}

/* ------------------------------------------------------------ */
/* HISTORIA / TIMELINE                                            */
/* ------------------------------------------------------------ */
.story{max-width:960px;}
.timeline{margin-top:2.5rem;display:flex;flex-direction:column;gap:clamp(3rem,7vw,5rem);}
.timeline__item{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;
  text-align:left;
}
.timeline__item--reverse .timeline__media{order:2;}
.timeline__item--reverse .timeline__body{order:1;}
.timeline__media{
  background:var(--white);
  padding:clamp(8px, 2.5vw, 14px);
  padding-bottom:clamp(35px, 8vw, 60px);
  border-radius:2px;
  box-shadow: 0 6px 14px rgba(74,66,56,.08), 0 2px 4px rgba(74,66,56,.04);
}
.timeline__media img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
}
.timeline__mark{
  display:inline-block;
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:.6rem;
}
.timeline__title{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(1.4rem,3vw,1.9rem);
  margin-bottom:.7rem;
}
.timeline__text{color:var(--ink-soft);font-size:.95rem;}

@media(max-width:720px){
  .timeline__item, .timeline__item--reverse{
    grid-template-columns:1fr;
    text-align:center;
  }
  .timeline__item--reverse .timeline__media,
  .timeline__item--reverse .timeline__body{order:unset;}
  .timeline__media{max-width:320px;margin:0 auto;}
  .timeline__mark{margin-bottom:.4rem;}
}

/* ------------------------------------------------------------ */
/* GALERÍA                                                        */
/* ------------------------------------------------------------ */
.gallery{max-width:960px;}
.gallery__grid{
  margin-top:2rem;
  column-count:3;
  column-gap:.7rem;
}
.gallery__item{
  display:block;
  width:100%;
  margin-bottom:1.5rem;
  break-inside:avoid;
  position:relative;
  /* Polaroid Effect */
  background:var(--white);
  padding:clamp(8px, 2.5vw, 14px);
  padding-bottom:clamp(35px, 8vw, 60px);
  border-radius:2px;
  box-shadow: 0 6px 14px rgba(74,66,56,.08), 0 2px 4px rgba(74,66,56,.04);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s cubic-bezier(.2,.8,.2,1);
}
.gallery__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.gallery__item:hover{
  transform: translateY(-6px) rotate(1.5deg) scale(1.02);
  box-shadow: 0 15px 35px rgba(74,66,56,.12), 0 5px 10px rgba(74,66,56,.06);
  z-index:2;
}
.gallery__item:nth-child(even):hover{
  transform: translateY(-6px) rotate(-1.5deg) scale(1.02);
}
@media(max-width:640px){
  .gallery__grid{column-count:2;}
}

/* CAROUSEL */
.carousel {
  position: relative;
  max-width: 600px;
  margin: 2rem auto 1rem;
  display: flex;
  align-items: center;
}
.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  width: 100%;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  padding: 0 1rem;
}
.carousel__slide .gallery__item {
  margin-bottom: 0;
  width: 100%;
  aspect-ratio: 1/1;
}
.carousel__btn {
  background: var(--white);
  border: 1px solid var(--sage-light);
  color: var(--sage);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.carousel__btn:hover {
  background: var(--sage);
  color: var(--white);
}
.carousel__btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}
.carousel__btn--prev {
  left: -15px;
}
.carousel__btn--next {
  right: -15px;
}
@media (max-width: 600px) {
  .carousel__btn--prev { left: 5px; }
  .carousel__btn--next { right: 5px; }
}
.carousel__indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 3rem;
}
.carousel__dot {
  width: 14px;
  height: 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--sage-light);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.3s ease, transform 0.3s ease;
}
.carousel__dot svg {
  width: 100%;
  height: 100%;
}
.carousel__dot.active {
  color: var(--sage);
  transform: scale(1.3);
}

.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(30,26,20,.92);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;
  animation:fadeIn .3s var(--ease);
}
.lightbox[hidden]{display:none;}
.lightbox__img{max-width:90vw;max-height:85vh;border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.4);}
.lightbox__close{
  position:absolute;top:1.5rem;right:1.5rem;
  color:#fff;font-size:2.2rem;line-height:1;
  width:44px;height:44px;
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

/* ------------------------------------------------------------ */
/* DETALLES DEL EVENTO                                            */
/* ------------------------------------------------------------ */
.details{max-width:1100px;}
.details__date{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1.15rem;
  color:var(--ink-soft);
  margin-bottom:2.5rem;
}
.details__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
.details__card{
  background:var(--white);
  border:1px solid var(--beige);
  border-radius:6px;
  padding:2.4rem 1.6rem;
}
.details__icon{width:40px;height:40px;color:var(--gold);margin-bottom:1rem;}
.details__title{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1.5rem;
  margin-bottom:.6rem;
}
.details__text{font-weight:400;color:var(--ink);margin:.2rem 0;}
.details__meta{font-size:.85rem;color:var(--ink-soft);margin:.2rem 0;}
@media(max-width:860px){
  .details__grid{grid-template-columns:1fr 1fr;}
  .details__card:last-child{grid-column: 1 / -1; max-width: 400px; justify-self: center; margin:0 auto;}
}
@media(max-width:640px){
  .details__grid{grid-template-columns:1fr;}
  .details__card:last-child{grid-column: auto; max-width: none; justify-self: stretch; margin:0;}
}

/* ------------------------------------------------------------ */
/* PADRES                                                         */
/* ------------------------------------------------------------ */
.parents{background:transparent;max-width:none;}
.parents .section-title--script{color:var(--ink);}
.parents__grid{
  max-width:700px;margin:2rem auto 0;
  display:flex;align-items:center;justify-content:center;
  gap:2.5rem;
}
.parents__of{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage);margin-bottom:.6rem;
}
.parents__names{font-family:var(--font-serif);font-size:1.15rem;line-height:1.6;}
.parents__divider{font-family:var(--font-script);font-size:2rem;color:var(--gold);}
@media(max-width:560px){
  .parents__grid{flex-direction:column;gap:1.5rem;}
}

/* ------------------------------------------------------------ */
/* CÓDIGO DE VESTIMENTA                                           */
/* ------------------------------------------------------------ */
.dresscode__formal{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:.3rem 0 .8rem;
}
.dresscode__reserved-group{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.4rem;
  margin-bottom:1rem;
}
.dresscode__reserved{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  letter-spacing:.06em;
  color:var(--ink);
  background:var(--ivory);
  border:1px solid var(--beige);
  border-radius:20px;
  padding:.4rem .9rem;
  margin:0;
}
.dresscode__reserved::before{
  content:"";
  display:inline-block;
  width:16px;height:16px;
  border-radius:50%;
  background:var(--dot-color, #fff);
  border:1px solid var(--gold);
  flex-shrink:0;
}
.dresscode__reserved--women{
  --dot-color: linear-gradient(90deg, #FFFFFF 50%, var(--beige) 50%);
}
.dresscode__reserved--men{
  --dot-color: var(--beige);
}

/* ------------------------------------------------------------ */
/* REGALOS                                                        */
/* ------------------------------------------------------------ */
.gifts{max-width:1100px;}
.gifts__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.5rem;
}
@media(max-width:960px){
  .gifts__grid{grid-template-columns:1fr 1fr;}
  .gifts__grid .gifts__card{grid-column: 1 / -1; max-width: 500px; justify-self: center; margin:0 auto;}
}
@media(max-width:640px){
  .gifts__grid{grid-template-columns:1fr;}
  .gifts__grid .gifts__card{grid-column: auto; max-width: none; justify-self: stretch; margin:0;}
}
.gifts__intro{color:var(--ink-soft);margin-bottom:1.5rem;}
.gifts__card{
  border:1px solid var(--beige);
  border-radius:6px;
  padding:2.4rem 2rem;
  background:var(--white);
}
.gifts__icon{width:42px;height:42px;color:var(--sage);margin-bottom:1rem;}
.gifts__heading{font-family:var(--font-serif);font-style:italic;font-size:1.4rem;margin-bottom:.7rem;}
.gifts__detail{
  font-size:.95rem;color:var(--ink);
  background:var(--ivory);
  border-radius:6px;
  padding:1rem 1.2rem;
  margin:1rem 0;
  letter-spacing:.02em;
}
.gifts__detail strong{color:var(--gold);}
.gifts__copy{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);
  border-radius:20px;padding:.4rem .9rem;margin-top:.4rem;
}
.gifts__copy:hover{background:var(--gold);color:#fff;}

/* ------------------------------------------------------------ */
/* RSVP                                                           */
/* ------------------------------------------------------------ */
.rsvp{max-width:600px;}
.rsvp__card{
  background:url('assets/images/texture-bg.jpg') center/cover, var(--sage);
  background-blend-mode:multiply;
  color:#fff;
  border-radius:8px;
  padding:3rem 2rem;
  position:relative;
  overflow:hidden;
}
.rsvp__card .section-title{color:#fff;}
.rsvp__icon{width:44px;height:44px;color:var(--gold-light);margin-bottom:1rem;}
.rsvp__text{color:#F1F4EE;margin-bottom:1.6rem;font-size:.95rem;}
.rsvp__text span{color:var(--gold-light);font-weight:500;}
.rsvp .btn--solid{background:#fff;color:var(--sage);border-color:#fff;}
.rsvp .btn--solid:hover{background:var(--gold-light);color:var(--ink);}

/* ------------------------------------------------------------ */
/* COMPARTE / MENSAJE                                             */
/* ------------------------------------------------------------ */

.share__card{
  background:var(--white);
  border:1px solid var(--beige);
  border-radius:6px;
  padding:2.2rem 1.5rem;
}
.share__icon{width:38px;height:38px;color:var(--rose);margin-bottom:.9rem;}
.share__text{font-size:.9rem;color:var(--ink-soft);margin-bottom:.4rem;}


/* ------------------------------------------------------------ */
/* FRASE FINAL                                                    */
/* ------------------------------------------------------------ */
.farewell{
  position:relative;
  max-width:none;
  padding:0;
  height:70vh;
  min-height:460px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.farewell__media{position:absolute;inset:0;}
.farewell__media img{width:100%;height:100%;object-fit:cover;object-position:center;}
.farewell__scrim{position:absolute;inset:0;background:linear-gradient(180deg, rgba(35,30,22,.5), rgba(35,30,22,.68));}
.farewell__content{position:relative;z-index:2;color:#fff;text-align:center;padding:0 1.5rem;max-width:640px;}
.farewell__sprig{
  width:120px;height:auto;
  margin:0 auto 1.4rem;
  display:block;
  opacity:.9;
}
.farewell__verse{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(1rem,2.2vw,1.15rem);
  line-height:1.7;
  color:var(--gold-light);
  max-width:46ch;
  margin:0 auto .6rem;
}
.farewell__verse-ref{
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#F1E9D8;
  opacity:.8;
  margin:0 0 2rem;
}
.farewell__quote{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(1.3rem,3.4vw,1.9rem);
  line-height:1.5;
  margin-bottom:1.4rem;
}
.farewell__names{font-family:var(--font-script);font-size:clamp(2.2rem,5vw,3rem);color:var(--gold-light);}

/* ------------------------------------------------------------ */
/* FOOTER                                                         */
/* ------------------------------------------------------------ */
.footer{
  position:relative;z-index:2;
  text-align:center;
  padding:3.5rem 1.5rem 3rem;
  background:var(--ink);
  color:var(--beige);
}
.footer__names{font-family:var(--font-script);font-size:2.2rem;color:var(--gold-light);margin-bottom:.5rem;}
.footer__quote{font-family:var(--font-serif);font-style:italic;font-size:.95rem;opacity:.85;margin-bottom:.8rem;}
.footer__date{font-size:.7rem;letter-spacing:.25em;color:var(--sage-light);}

/* ------------------------------------------------------------ */
/* RESPONSIVE FINE-TUNING                                         */
/* ------------------------------------------------------------ */
@media(max-width:480px){
  main > section, .parents, .dresscode{padding:3.5rem 1.25rem;}
}

.music-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--ivory);
  border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  cursor: pointer;
  transition: transform 0.3s ease;
}
.music-toggle:hover {
  transform: scale(1.1);
}
.music-toggle svg {
  width: 24px;
  height: 24px;
}