/* ============================================================
   INVITACIÓN DIGITAL — ESPERANZA DEL RÍO, 70 AÑOS
   "Un jardín de recuerdos"
   ============================================================ */

:root{
  /* paleta: champán, terracota suave, verde salvia, marfil, dorado apagado */
  --cream:        #F8F3EC;
  --cream-deep:   #F1E9DC;
  --champagne:    #E8D9C5;
  --terracotta:   #C97C5D;
  --terracotta-deep: #A85D42;
  --sage:         #8A9A80;
  --sage-deep:    #667360;
  --gold:         #B08D57;
  --ink:          #3A342C;
  --ink-soft:     #6B6255;
  --white:        #FFFFFF;

  --font-display: "Playfair Display", serif;
  --font-script:  "Cormorant Garamond", serif;
  --font-body:    "Work Sans", sans-serif;

  --max-width: 1180px;
  --section-pad: clamp(4rem, 9vw, 7.5rem);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }
h1,h2,h3{ font-family: var(--font-display); margin:0; color: var(--terracotta-deep); }
p{ margin:0; }
button{ font-family: inherit; cursor:pointer; }
ul,ol{ margin:0; padding:0; list-style:none; }
svg{ fill:none; stroke:currentColor; }

::selection{ background: var(--terracotta); color: var(--white); }

/* ============ utilidades tipográficas de sección ============ */
.section-eyebrow{
  font-family: var(--font-script);
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--sage-deep);
  margin-bottom: .4rem;
  display:block;
}
.section-title{
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  font-weight: 600;
  margin-bottom: 1rem;
}
.section-lead{
  max-width: 46ch;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ============================================================
   SCROLL-REVEAL (JS toggles .is-visible)
   ============================================================ */
.reveal{
  opacity: 0;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: 0s;
}
.reveal[data-reveal="up"]{ transform: translateY(28px); }
.reveal[data-reveal="fade"]{ transform: none; }
.reveal[data-delay="1"]{ transition-delay: .12s; }
.reveal[data-delay="2"]{ transition-delay: .24s; }
.reveal.is-visible{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ transition: none; opacity: 1; transform: none; }
  html{ scroll-behavior: auto; }
}

/* ============================================================
   NAV LATERAL DE PUNTOS (desktop)
   ============================================================ */
.side-nav{
  position: fixed;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: none;
}
@media (min-width: 900px){ .side-nav{ display:block; } }
.side-nav ul{ display:flex; flex-direction:column; gap:.9rem; }
.side-nav__dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--gold);
  display:block;
  position: relative;
  transition: background .3s, transform .3s;
}
.side-nav__dot::after{
  content: attr(data-label);
  position: absolute;
  right: 130%;
  top: 50%;
  transform: translateY(-50%);
  font-size: .72rem;
  letter-spacing: .04em;
  white-space: nowrap;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.side-nav__dot:hover::after{ opacity: 1; }
.side-nav__dot.is-active{ background: var(--terracotta); border-color: var(--terracotta); transform: scale(1.3); }

/* ============================================================
   BOTÓN DE MÚSICA
   ============================================================ */
.music-toggle{
  position: fixed;
  bottom: 1.4rem;
  left: 1.4rem;
  z-index: 40;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--cream);
  box-shadow: 0 6px 18px rgba(58,52,44,.12);
  display:flex; align-items:center; justify-content:center;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.music-toggle:hover{ transform: scale(1.06); box-shadow: 0 8px 22px rgba(58,52,44,.18); }
.music-toggle__icon{ width: 20px; height: 20px; color: var(--terracotta-deep); display:flex; }
.music-toggle__icon svg{ width:100%; height:100%; fill: currentColor; stroke:none; }
.icon-pause{ display:none; }
.music-toggle[aria-pressed="true"] .icon-play{ display:none; }
.music-toggle[aria-pressed="true"] .icon-pause{ display:block; }
.music-toggle__bars{ position:absolute; inset:0; border-radius:50%; pointer-events:none; }
.music-toggle__bars i{
  position:absolute; width:2px; border-radius:2px; background: var(--terracotta);
  opacity:0; bottom: 14px; transform-origin:bottom;
}
.music-toggle[aria-pressed="true"] .music-toggle__bars i{ opacity:.55; animation: bars 1s ease-in-out infinite; }
.music-toggle__bars i:nth-child(1){ left: 15px; height:6px; animation-delay:0s; }
.music-toggle__bars i:nth-child(2){ left: 24px; height:10px; animation-delay:.15s; }
.music-toggle__bars i:nth-child(3){ left: 33px; height:6px; animation-delay:.3s; }
@keyframes bars{ 0%,100%{ transform: scaleY(.4); } 50%{ transform: scaleY(1.4); } }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-bottom: clamp(4rem, 12vh, 6rem);
  background: linear-gradient(160deg, var(--cream) 0%, var(--cream-deep) 55%, var(--champagne) 100%);
}
.hero__texture{
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(58,52,44,.05) 1px, transparent 0);
  background-size: 22px 22px;
  opacity:.5;
  pointer-events:none;
}
.hero__branch{
  position:absolute;
  width: min(48vw, 420px);
  color: var(--sage);
  opacity:.65;
  pointer-events:none;
}
.hero__branch--top{ top:-4%; right:-6%; }
.hero__branch--bottom{ bottom:-8%; left:-8%; width: min(42vw, 380px); }
.branch-line{ stroke: var(--sage-deep); stroke-width: 1.4; fill:none; opacity:.55; }
.branch-leaves ellipse{ fill: var(--sage); opacity:.5; }

.hero__content{
  position:relative;
  z-index:2;
  max-width: var(--max-width);
  width:100%;
  margin: 0 auto;
  padding: 7rem 6vw 4rem;
}
.hero__eyebrow{
  font-family: var(--font-script);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  color: var(--sage-deep);
  margin: 0 0 .6rem;
}
.hero__name{
  font-size: clamp(3.2rem, 10vw, 6.4rem);
  font-weight: 700;
  line-height: .98;
  color: var(--terracotta-deep);
  margin: 0 0 1rem;
}
.hero__name span{ color: var(--ink); font-weight: 500; }
.hero__tagline{
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: var(--ink-soft);
  max-width: 32ch;
  margin-bottom: 2.4rem;
}
.hero__date{
  display:inline-flex;
  align-items:center;
  gap: 1rem;
  padding: .9rem 1.4rem;
  background: rgba(255,255,255,.55);
  border: 1px solid var(--gold);
  border-radius: 999px;
  backdrop-filter: blur(4px);
}
.hero__date-day{
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--terracotta);
}
.hero__date-rest{ display:flex; flex-direction:column; font-size:.85rem; letter-spacing:.03em; text-transform:uppercase; color: var(--ink-soft); }
.hero__date-rest span:first-child{ font-weight:600; color: var(--ink); }

.scroll-cue{
  position:absolute;
  bottom: 2.2rem;
  left: 6vw;
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  color: var(--ink-soft);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.scroll-cue__line{
  width:1px; height: 46px;
  background: var(--gold);
  position:relative;
  overflow:hidden;
}
.scroll-cue__line::after{
  content:"";
  position:absolute; left:0; top:-100%;
  width:100%; height:100%;
  background: var(--terracotta);
  animation: cueDrop 2.2s var(--ease) infinite;
}
@keyframes cueDrop{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } }

/* ============================================================
   INTRO
   ============================================================ */
.intro{
  max-width: 62ch;
  margin: 0 auto;
  padding: var(--section-pad) 6vw;
  text-align:center;
}
.intro__ornament{ width:120px; margin:0 auto 2rem; color: var(--gold); }
.intro__ornament svg{ width:100%; stroke:currentColor; stroke-width:1.4; }
.intro__quote{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  line-height: 1.55;
  color: var(--ink);
}
.intro__signature{
  margin-top: 1.4rem;
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--terracotta-deep);
}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding: var(--section-pad) 6vw;
  background: linear-gradient(135deg, var(--sage-deep), var(--sage) 60%, var(--terracotta) 130%);
  color: var(--cream);
}
.countdown .section-eyebrow{ color: var(--champagne); }
.countdown .section-title{ color: var(--white); }
.countdown__leaf{ position:absolute; width: 220px; color: var(--cream); opacity:.12; }
.countdown__leaf--a{ top:-6%; left:-4%; transform: rotate(-15deg); }
.countdown__leaf--b{ bottom:-10%; right:-4%; transform: rotate(200deg); }
.countdown__leaf path{ fill: currentColor; stroke:none; }

.countdown__grid{
  display:flex;
  justify-content:center;
  gap: clamp(.8rem, 3vw, 2.2rem);
  margin-top: 2.4rem;
  flex-wrap: wrap;
  position:relative;
  z-index:1;
}
.countdown__unit{
  min-width: 84px;
  padding: 1.2rem .6rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 14px;
  backdrop-filter: blur(3px);
}
.countdown__value{
  display:block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight:700;
  line-height:1;
}
.countdown__label{
  display:block;
  margin-top:.4rem;
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.85;
}
.countdown__done{ margin-top: 2rem; font-size:1.3rem; font-family: var(--font-display); }

/* ============================================================
   GALERÍA
   ============================================================ */
.gallery{ padding: var(--section-pad) 6vw; max-width: var(--max-width); margin: 0 auto; }
.gallery__grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 2.6rem;
}
.gallery__item{
  border:0; padding:0; background:none;
  grid-column: span 3;
  aspect-ratio: 4/5;
  overflow:hidden;
  border-radius: 6px;
  position:relative;
  box-shadow: 0 10px 24px -12px rgba(58,52,44,.35);
}
.gallery__item--tall{ aspect-ratio: 3/4; }
.gallery__item:nth-child(1){ grid-column: span 4; }
.gallery__item:nth-child(2){ grid-column: span 2; }
.gallery__item:nth-child(3){ grid-column: span 2; }
.gallery__item:nth-child(4){ grid-column: span 2; }
.gallery__item:nth-child(5){ grid-column: span 2; }
.gallery__item:nth-child(6){ grid-column: span 3; }
.gallery__item img{
  width:100%; height:100%; object-fit:cover;
  filter: sepia(.35) grayscale(.25) contrast(1.02);
  transition: transform .6s var(--ease), filter .4s;
}
.gallery__item::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 60%, rgba(58,52,44,.35));
  opacity:0;
  transition: opacity .35s;
}
.gallery__item:hover img{ transform: scale(1.06); filter: sepia(.15) grayscale(0) contrast(1.02); }
.gallery__item:hover::after{ opacity:1; }

@media (max-width: 720px){
  .gallery__grid{ grid-template-columns: repeat(2,1fr); }
  .gallery__item, .gallery__item:nth-child(n){ grid-column: span 1; aspect-ratio: 3/4; }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:100;
  background: rgba(30,26,21,.92);
  display:flex; align-items:center; justify-content:center;
  padding: 4vh 4vw;
}
.lightbox[hidden]{ display:none; }
.lightbox__image{
  max-width: min(90vw, 720px);
  max-height: 82vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  filter: sepia(.2) grayscale(.05);
}
.lightbox__close{
  position:absolute; top: 1.5rem; right: 1.8rem;
  background:none; border:0; color: var(--cream);
  font-size: 2.2rem; line-height:1;
}
.lightbox__nav{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3);
  color: var(--cream); width: 46px; height:46px; border-radius:50%;
  font-size: 1.6rem; display:flex; align-items:center; justify-content:center;
  transition: background .25s;
}
.lightbox__nav:hover{ background: rgba(255,255,255,.22); }
.lightbox__nav--prev{ left: 2vw; }
.lightbox__nav--next{ right: 2vw; }

/* ============================================================
   UBICACIÓN
   ============================================================ */
.location{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items:center;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--section-pad) 6vw;
}
.location__details{ margin: 1.6rem 0 2rem; display:flex; flex-direction:column; gap: 1.2rem; }
.location__details li{ display:flex; gap: .9rem; align-items:flex-start; }
.location__details svg{ width:22px; height:22px; flex-shrink:0; margin-top:.15rem; color: var(--terracotta); stroke-width:1.6; }
.location__details strong{ display:block; font-size:1.05rem; }
.location__details span{ color: var(--ink-soft); font-size:.92rem; }
.location__map{ border-radius: 14px; overflow:hidden; box-shadow: 0 16px 40px -18px rgba(58,52,44,.4); aspect-ratio: 4/3; }
.location__map iframe{ width:100%; height:100%; border:0; }

@media (max-width: 860px){
  .location{ grid-template-columns:1fr; }
}

/* ============================================================
   BOTONES
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding: .85rem 1.8rem;
  border-radius: 999px;
  font-weight:600; font-size:.95rem;
  text-decoration:none; border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}
.btn svg{ width:18px; height:18px; fill: currentColor; stroke:none; }
.btn--primary{
  background: var(--terracotta);
  color: var(--white);
  box-shadow: 0 10px 22px -8px rgba(169,93,66,.55);
}
.btn--primary:hover{ transform: translateY(-2px); background: var(--terracotta-deep); }
.btn--ghost{
  background: transparent;
  border-color: var(--gold);
  color: var(--terracotta-deep);
}
.btn--ghost:hover{ background: rgba(176,141,87,.12); transform: translateY(-2px); }
.btn--whatsapp{ background: var(--sage-deep); box-shadow: 0 10px 22px -8px rgba(102,115,96,.55); width:100%; justify-content:center; }
.btn--whatsapp:hover{ background: var(--sage); }

/* ============================================================
   CÓDIGO DE VESTIMENTA
   ============================================================ */
.dresscode{ max-width: var(--max-width); margin:0 auto; padding: var(--section-pad) 6vw; text-align:center; }
.dresscode__palette{
  display:flex; justify-content:center; gap: clamp(1rem,3vw,2.2rem); flex-wrap:wrap;
  margin-top: 2.4rem;
}
.swatch{ display:flex; flex-direction:column; align-items:center; gap:.7rem; font-size:.85rem; color: var(--ink-soft); }
.swatch__color{
  width: 58px; height:58px; border-radius:50%;
  box-shadow: 0 8px 18px -8px rgba(58,52,44,.4), inset 0 0 0 3px rgba(255,255,255,.5);
  transition: transform .3s var(--ease);
}
.swatch:hover .swatch__color{ transform: scale(1.1) rotate(6deg); }

/* ============================================================
   ITINERARIO
   ============================================================ */
.timeline{ max-width: var(--max-width); margin:0 auto; padding: var(--section-pad) 6vw; }
.timeline__list{ position:relative; margin-top: 2.8rem; }
.timeline__list::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px;
  background: var(--gold); opacity:.5;
}
.timeline__item{
  position:relative;
  width: 46%;
  padding: 1.2rem 1.6rem;
  margin-bottom: 2rem;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 12px 28px -16px rgba(58,52,44,.3);
}
.timeline__item:nth-child(odd){ margin-right:auto; text-align:right; }
.timeline__item:nth-child(even){ margin-left:auto; }
.timeline__item::before{
  content:""; position:absolute; top: 1.5rem; width:12px; height:12px; border-radius:50%;
  background: var(--terracotta); border: 3px solid var(--cream);
}
.timeline__item:nth-child(odd)::before{ right: -1.6rem; transform: translateX(50%); }
.timeline__item:nth-child(even)::before{ left: -1.6rem; transform: translateX(-50%); }
.timeline__time{ font-family: var(--font-script); font-style:italic; color: var(--sage-deep); font-size:1.1rem; margin-bottom:.3rem; }
.timeline__body svg{ width:24px; height:24px; color: var(--terracotta); stroke-width:1.5; margin-bottom:.4rem; }
.timeline__item:nth-child(odd) .timeline__body{ display:flex; flex-direction:column; align-items:flex-end; }
.timeline__body h3{ font-size:1.15rem; margin-bottom:.2rem; }
.timeline__body p{ color: var(--ink-soft); font-size:.9rem; }

@media (max-width: 760px){
  .timeline__list::before{ left: 10px; }
  .timeline__item, .timeline__item:nth-child(odd), .timeline__item:nth-child(even){
    width: auto; margin-left: 2.4rem; margin-right:0; text-align:left;
  }
  .timeline__item:nth-child(odd) .timeline__body{ align-items:flex-start; }
  .timeline__item::before, .timeline__item:nth-child(odd)::before{ left:-2rem; right:auto; transform:none; }
}

/* ============================================================
   MESA DE REGALOS
   ============================================================ */
.gifts{ padding: var(--section-pad) 6vw; }
.gifts__card{
  max-width: 560px; margin: 0 auto; text-align:center;
  background: var(--champagne);
  border-radius: 20px;
  padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.6rem, 5vw, 3rem);
  position: relative;
}
.gifts__icon{ width:40px; height:40px; margin: 0 auto 1rem; color: var(--terracotta-deep); stroke-width:1.4; }
.gifts__card .section-lead{ margin: 1rem auto 1.6rem; }
.gifts__toast{
  margin-top: 1rem; font-size:.85rem; color: var(--sage-deep);
  background: rgba(255,255,255,.6); padding:.7rem 1rem; border-radius:10px;
}

/* ============================================================
   RSVP
   ============================================================ */
.rsvp{ max-width: 640px; margin: 0 auto; padding: var(--section-pad) 6vw; text-align:center; }
.rsvp__form{ margin-top: 2.2rem; text-align:left; display:flex; flex-direction:column; gap: 1.2rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; flex:1; }
.field-row{ display:flex; gap: 1.2rem; }
.field label{ font-size:.82rem; letter-spacing:.03em; color: var(--ink-soft); }
.field input, .field select, .field textarea{
  font-family: inherit; font-size: 1rem; padding: .75rem .9rem;
  border: 1px solid var(--champagne); border-radius: 10px;
  background: var(--white); color: var(--ink);
  transition: border-color .25s, box-shadow .25s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color: var(--terracotta); box-shadow: 0 0 0 3px rgba(201,124,93,.15);
}
@media (max-width: 560px){ .field-row{ flex-direction:column; } }

/* ============================================================
   CIERRE / QR
   ============================================================ */
.closing{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding: var(--section-pad) 6vw calc(var(--section-pad) + 1rem);
  background: linear-gradient(180deg, var(--cream-deep), var(--champagne));
}
.closing__texture{
  position:absolute; inset:0;
  background-image: radial-gradient(circle at 1px 1px, rgba(58,52,44,.06) 1px, transparent 0);
  background-size: 20px 20px;
  opacity:.6;
}
.closing__script{
  position:relative; z-index:1;
  font-family: var(--font-script); font-style:italic;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: var(--terracotta-deep);
  margin-bottom: .4rem;
}
.closing .section-title{ position:relative; z-index:1; }

.qr{ position:relative; z-index:1; margin: 2.6rem auto 0; display:inline-flex; flex-direction:column; align-items:center; gap: 1rem; }
.qr__frame{ position:relative; width: 200px; height:200px; padding: 10px; background: var(--white); border-radius: 16px; box-shadow: 0 16px 36px -16px rgba(58,52,44,.4); }
.qr__frame canvas{ width:100%; height:100%; border-radius: 8px; }
.qr__corner{ position:absolute; width:22px; height:22px; border-color: var(--terracotta); }
.qr__corner--tl{ top:-2px; left:-2px; border-top:3px solid; border-left:3px solid; border-radius: 6px 0 0 0; }
.qr__corner--tr{ top:-2px; right:-2px; border-top:3px solid; border-right:3px solid; border-radius: 0 6px 0 0; }
.qr__corner--bl{ bottom:-2px; left:-2px; border-bottom:3px solid; border-left:3px solid; border-radius: 0 0 0 6px; }
.qr__corner--br{ bottom:-2px; right:-2px; border-bottom:3px solid; border-right:3px solid; border-radius: 0 0 6px 0; }
.qr__caption{ font-size:.82rem; letter-spacing:.03em; color: var(--ink-soft); max-width: 26ch; }

.closing__footer{ position:relative; z-index:1; margin-top: 3.4rem; color: var(--ink-soft); font-size:.88rem; }
.closing__credit{ margin-top:.6rem; font-size:.76rem; opacity:.8; letter-spacing:.02em; }
.closing__credit-brand{
  font-family: var(--font-script);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--terracotta-deep);
}
.closing__credit-brand em{
  font-style: normal;
  color: var(--gold);
  margin: 0 .15em;
}

/* ============================================================
   RESPONSIVE GENERAL
   ============================================================ */
@media (max-width: 480px){
  .hero__content{ padding: 6rem 6vw 3rem; }
  .hero__date{ flex-wrap:wrap; }
}