/* ====================================================================
   Eunice & César · Wedding Invitation
   Palette · Typography · Animations · Components
   ==================================================================== */

@font-face {
  font-family: 'BJCree';
  src: url('../fonts/BJCree-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'MontserratLocal';
  src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root{
  /* Palette (Coolors) */
  --cream:       #FFEED9;
  --cream-2:     #FBE6CC;
  --champagne:   #F5E3C6;
  --gold:        #DBB079;
  --gold-soft:   #EDC48E;
  --blue:        #024890;
  --blue-2:      #19599A;
  --blue-dk:     #002a55;
  --magenta:     #991F58;
  --magenta-dk:  #8B1C50;
  --ink:         #0E2740;
  --ink-soft:    #3a4e66;
  --paper:       #fff9ef;

  --display:     'BJCree', 'Cormorant Garamond', Georgia, serif;
  --body:        'MontserratLocal', 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --max:    1180px;
  --gut:    clamp(20px, 4vw, 56px);
  --ease:   cubic-bezier(.22,1,.36,1);

  --shadow-1: 0 8px 28px rgba(14,39,64,.10);
  --shadow-2: 0 22px 50px rgba(14,39,64,.18);
}

/* ───── Reset ───── */
*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x: hidden; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-weight:300;
  letter-spacing:.01em;
}
body.locked{ overflow:hidden; height:100vh; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:transparent; color:inherit; }

/* ───── Type ───── */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;
  color:var(--blue);
  letter-spacing:.01em;
  line-height:1.1;
  margin:0;
}
h2{ font-size: clamp(2.2rem, 5vw, 3.6rem); }
h3{ font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

.kicker{
  font-family:var(--body);
  font-size:.74rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 .8rem;
  font-weight:500;
}
.kicker--light{ color:var(--gold-soft); }
.subtle{ color:var(--ink-soft); font-size:.96rem; }
.subtle--light{ color: rgba(255,238,217,.78); }
.center{ text-align:center; }

.container{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gut);
}

.section{
  padding: clamp(80px, 10vw, 130px) 0;
  position:relative;
}

/* Color helpers — never two same in a row */
.section--cream{ background: var(--cream); }
.section--cream-2{ background: var(--cream-2); }
.section--champagne{ background: var(--champagne); }
.section--blue{
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-2) 100%);
  color: var(--cream);
}
.section--dark{ background: var(--ink); color: var(--cream); }
.section--magenta{ background: linear-gradient(180deg, var(--magenta-dk) 0%, var(--magenta) 100%); color: var(--cream); }

/* Section dividers with dots */
.divider{
  display:inline-block;
  width: 80px; height: 1px;
  background: var(--gold);
  margin: 18px auto 26px;
  position:relative;
}
.divider::before,
.divider::after{
  content:""; position:absolute; top:50%;
  width:6px; height:6px;
  background: var(--gold);
  border-radius:50%;
  transform: translateY(-50%);
}
.divider::before{ left:-14px; }
.divider::after { right:-14px; }
.divider--light{ background: var(--gold-soft); }
.divider--light::before,.divider--light::after{ background: var(--gold-soft); }

/* ════════════════════════════════════════════════════════════
   SOBRE / ENVELOPE — full screen, demo style
   ════════════════════════════════════════════════════════════ */
.env{
  position:fixed; inset:0; z-index:9999;
  font-family: var(--body);
  overflow: hidden;
}
.env__bg{
  position:absolute; inset:0;
  background-color: #c89b62;
  background-image: url("../texture/paperboard.jpg");
  background-blend-mode: multiply;
  background-size: 260px;
  z-index: 0;
}

/* The two flaps form a closed envelope, meeting at horizontal center */
.env__flap{
  position:absolute;
  left:0; width:100%;
  pointer-events:none;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 2s var(--ease);
  z-index: 2;
}
.env__flap--top{
  top: -2%;
  height: 60%;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.18)) drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.env__flap--bottom{
  bottom: -2%;
  height: 60%;
  filter: drop-shadow(0 -6px 12px rgba(0,0,0,.18)) drop-shadow(0 -1px 3px rgba(0,0,0,.15));
}
.env__panel{
  width:100%; height:100%;
  background:
    linear-gradient(180deg, #f3decd 0%, #e3c499 55%, #c89b62 100%),
    url("../texture/paperboard.jpg");
  background-blend-mode: multiply;
  background-size: 100% 100%, 260px 260px;
  background-repeat: repeat;
}
.env__panel--top{
  clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%);
}
.env__panel--bottom{
  clip-path: polygon(0 45%, 50% 0, 100% 45%, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #e3c499 0%, #c89b62 60%, #a37844 100%),
              url("../texture/paperboard.jpg");
  background-blend-mode: multiply;
  background-size: 100% 100%, 260px 260px;
}

/* Decorative line where the two flaps meet */
.env::before{
  content: "";
  position: absolute;
  top: 50%; left: 6%; right: 6%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(94,55,18,.25), transparent);
  z-index: 3;
  transform: translateY(-50%);
}

/* Central content (label + seal + names) */
.env__center{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap: clamp(12px, 2.2vh, 22px);
  z-index: 10;
  padding: 24px;
  text-align: center;
  pointer-events: auto;
  transition: opacity .6s ease, transform .8s var(--ease);
  color: #2b1810;
}
.env__label{
  margin:0;
  font-size:.75rem;
  letter-spacing:.45em;
  text-transform:uppercase;
  color: #5a3614;
}
.env__title{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  color: #2b1810;
  margin: 4px 0 0;
}
.env__title .amp{
  color: #8c5a25;
  font-size: .8em;
  margin: 0 .1em;
}
.env__subtitle{
  margin: 0;
  font-size: .9rem;
  letter-spacing: .04em;
  color: #5a3614;
  font-style: italic;
}
.env__hint{
  margin: 12px 0 0;
  font-size: .7rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: rgba(43,24,16,.65);
}

/* SELLO — big, centered exactly at flap meeting point */
.env__seal{
  position: relative;
  width: clamp(180px, 32vmin, 260px);
  height: clamp(180px, 32vmin, 260px);
  border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform .3s var(--ease), filter .3s ease;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  padding: 0;
}
.env__seal img{
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.env__seal:hover{ transform: scale(1.05); filter: drop-shadow(0 12px 24px rgba(255,180,80,.4)); }
.env__seal:active{ transform: scale(.96); }
.env__seal::after{
  content: "";
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1.5px solid rgba(237,196,142,.5);
  animation: sealPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sealPulse{
  0%   { transform: scale(.96); opacity:.7 }
  60%  { transform: scale(1.18); opacity:0 }
  100% { transform: scale(1.18); opacity:0 }
}

/* OPEN STATE — flaps slide away vertically, content fades */
.env.is-opening .env__flap--top{
  transform: translateY(-110%);
}
.env.is-opening .env__flap--bottom{
  transform: translateY(110%);
}
.env.is-opening .env__center{
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .5s ease, transform .8s var(--ease);
}
.env.is-cracking .env__seal img{
  animation: sealCrack .55s ease-out forwards;
}
@keyframes sealCrack{
  0%   { transform: scale(1) rotate(0); filter: brightness(1); }
  35%  { transform: scale(1.18) rotate(-3deg); filter: brightness(1.3); }
  100% { transform: scale(.7) rotate(8deg); opacity:0; filter: brightness(1.5); }
}
.env.is-hidden{ display: none; }

/* Stagger entrance */
.stagger{
  opacity: 0;
  animation: stagIn .9s var(--ease) forwards;
  animation-delay: calc(.25s + var(--d, 0) * .15s);
}
@keyframes stagIn{
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════
   DOT NAV
   ════════════════════════════════════════════════════════════ */
.dotnav{
  position:fixed;
  top:50%; right: 18px;
  transform: translateY(-50%);
  z-index: 50;
  display:flex; flex-direction:column; gap:12px;
  opacity:0; pointer-events:none;
  transition: opacity .6s ease;
}
.dotnav.is-on{ opacity:1; pointer-events:auto; }
.dotnav a{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(14,39,64,.25);
  position: relative;
  transition: background .25s ease, transform .25s ease;
}
.dotnav a::after{
  content: attr(data-label);
  position:absolute; right: 18px; top:50%;
  transform: translateY(-50%) translateX(8px);
  font-size:.66rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: var(--ink);
  background: rgba(255,238,217,.94);
  padding: 4px 8px;
  border-radius: 3px;
  white-space:nowrap;
  opacity:0; pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.dotnav a:hover::after{ opacity:1; transform: translateY(-50%) translateX(0); }
.dotnav a.is-active{ background: var(--blue); transform: scale(1.6); }
@media (max-width: 880px){ .dotnav{ display:none; } }

/* ════════════════════════════════════════════════════════════
   FLOATING RSVP BUTTON
   ════════════════════════════════════════════════════════════ */
.float-rsvp{
  position: fixed;
  bottom: 18px; right: 18px;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 10px 28px rgba(153,31,88,.35), 0 2px 8px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(10px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease, background .25s ease, box-shadow .25s ease;
}
.float-rsvp.is-on{ opacity:1; transform:none; pointer-events:auto; }
.float-rsvp:hover{ background: var(--magenta-dk); box-shadow: 0 14px 36px rgba(153,31,88,.45); transform: translateY(-2px); }
.float-rsvp svg{ color: var(--gold-soft); }
@media (max-width: 480px){
  .float-rsvp{ padding: 11px 14px; font-size: .66rem; gap:6px; }
}

/* ════════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════════ */
.hero{
  position: relative;
  min-height: 100svh;
  display: grid; place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__media{
  position: absolute; inset: -8% -2% -2%;
  z-index: 0;
  will-change: transform;
}
.hero__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 28%;
}
.hero__veil{
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(2,18,42,.55) 0%, rgba(2,18,42,.55) 35%, rgba(2,18,42,.7) 70%, rgba(2,18,42,.9) 100%),
    radial-gradient(ellipse at center 55%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 50%, rgba(0,0,0,.6) 100%);
}
.hero__content{
  position: relative; z-index: 2;
  text-align: center;
  color: #fff;
  padding: 110px var(--gut) 110px;
  max-width: 900px;
  width: 100%;
}
.hero__content::before{
  content: ""; position: absolute; inset: -8% -8%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.45) 0%, rgba(0,0,0,.2) 50%, transparent 78%);
  z-index: -1; pointer-events: none;
}
.hero__eyebrow{
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  margin: 0 0 14px;
  color: var(--gold-soft);
  letter-spacing: .04em;
}
.hero__names{
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.6rem, 11vw, 7.6rem);
  line-height: .95;
  margin: 0 0 16px;
  display: flex; flex-direction: column; align-items: center;
  text-shadow: 0 4px 14px rgba(0,0,0,.55), 0 12px 40px rgba(0,0,0,.4);
  color: #fff;
}
.hero__amp{
  color: var(--gold-soft);
  font-size: .55em;
  margin: -.15em 0 -.05em;
}
.hero__date{
  font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  letter-spacing: .3em;
  color: var(--gold-soft);
  margin: 0 0 30px;
}
.countdown{
  display: grid;
  grid-template-columns: repeat(4, minmax(60px, 1fr));
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 24px;
}
.cd{
  background: rgba(255,238,217,.08);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(237,196,142,.32);
  border-radius: 4px;
  padding: 14px 6px;
  text-align: center;
}
.cd__num{
  display: block;
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.1rem);
  line-height: 1;
  color: var(--gold-soft);
  margin-bottom: 4px;
}
.cd__lbl{
  display: block;
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,238,217,.78);
}
.hero__say{
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.5rem, 4vw, 2.3rem);
  margin: 6px 0 0;
  color: #fff;
  text-shadow: 0 6px 22px rgba(0,0,0,.45);
}

.hero__scroll{
  position: absolute;
  left: 50%; bottom: 26px;
  transform: translateX(-50%);
  width: 26px; height: 44px;
  border: 1.5px solid rgba(237,196,142,.7);
  border-radius: 14px;
  display: grid; place-items: center;
  z-index: 3;
}
.hero__scroll span{
  width: 3px; height: 8px;
  background: var(--gold-soft);
  border-radius: 2px;
  animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint{
  0%,100%{ transform: translateY(-6px); opacity:1; }
  50%    { transform: translateY(8px);  opacity:.3; }
}

/* ════════════════════════════════════════════════════════════
   INTRO
   ════════════════════════════════════════════════════════════ */
.intro{ text-align: center; }
.intro__logo{
  width: clamp(160px, 24vw, 220px);
  margin: 0 auto 20px;
  filter: drop-shadow(0 10px 24px rgba(14,39,64,.18));
}
.intro__lead{
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  line-height: 1.4;
  color: var(--ink);
  margin: 0 auto 18px;
  max-width: 36ch;
}
.intro__quote{
  font-family: var(--body);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto 14px;
  max-width: 42ch;
}
.intro__quote em{
  font-family: var(--display);
  font-style: italic;
  color: var(--magenta);
  font-size: 1.15em;
}
.intro__close{
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  color: var(--blue);
  margin: 18px 0 0;
}

/* ════════════════════════════════════════════════════════════
   PHOTO BREAKS — parallax + scroll blur (omaryevelyn style)
   ════════════════════════════════════════════════════════════ */
.photobreak{
  position: relative;
  height: 60vh; min-height: 360px;
  overflow: hidden;
  isolation: isolate;
}
.photobreak--tall{ height: 75vh; min-height: 460px; }
.photobreak__media{
  position: absolute; inset: -10% -2% -2%;
  will-change: transform, filter;
  z-index: 0;
}
.photobreak__media img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.photobreak::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,39,64,.15) 0%, rgba(14,39,64,.35) 100%);
  z-index: 1;
}
.photobreak__quote{
  position: absolute;
  inset: auto 0 14% 0;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  color: var(--cream);
  z-index: 2;
  text-shadow: 0 6px 24px rgba(0,0,0,.5);
  padding: 0 var(--gut);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   PADRES
   ════════════════════════════════════════════════════════════ */
.parents__grid{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  max-width: 980px;
  margin: 24px auto 0;
}
.parent{ text-align: center; }
.parent__role{
  display: block;
  font-size: .72rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 18px;
}
.parent__name{
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  color: var(--blue);
  margin: 4px 0;
  line-height: 1.3;
}
.parent__amp{
  color: var(--gold);
  font-size: 1.2rem;
  margin: 6px 0;
  font-family: var(--display);
}
.parents__seal{ display: grid; place-items: center; }
.parents__seal img{
  width: 90px; height: auto;
  opacity: .9;
  filter: drop-shadow(0 6px 14px rgba(14,39,64,.18));
}
@media(max-width: 760px){
  .parents__grid{ grid-template-columns: 1fr; gap: 32px; }
  .parents__seal img{ width: 70px; }
}

/* ════════════════════════════════════════════════════════════
   APARTA LA FECHA (blue)
   ════════════════════════════════════════════════════════════ */
.dateband{ position: relative; overflow: hidden; }
.dateband::before{
  content: "";
  position: absolute; inset: 24px;
  border: 1px solid rgba(219,176,121,.35);
  pointer-events: none;
}
.dateband__inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 60px);
  margin: 30px 0 8px;
  flex-wrap: wrap;
}
.dateband__side{
  font-family: var(--display);
  color: var(--gold-soft);
  font-size: clamp(1rem, 2vw, 1.4rem);
  letter-spacing: .42em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.dateband__side:last-child{ transform: rotate(0); }
.dateband__num{
  font-family: var(--display);
  font-size: clamp(6rem, 18vw, 12rem);
  color: #fff;
  line-height: 1;
}
.dateband__month{
  font-family: var(--display);
  color: var(--gold);
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .3em;
  margin: 12px 0 18px;
}
.dateband__place{
  font-size: .82rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0;
}
@media(max-width: 520px){
  .dateband__side{ writing-mode: horizontal-tb; transform: none; }
  .dateband__side:last-child{ transform: none; }
}

/* ════════════════════════════════════════════════════════════
   ITINERARY
   ════════════════════════════════════════════════════════════ */
.events{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  margin-top: 36px;
  max-width: 1080px;
  margin-inline: auto;
}
.event{
  border: 1px solid rgba(219,176,121,.45);
  background: rgba(255,255,255,.6);
  padding: 36px 22px 28px;
  border-radius: 4px;
  text-align: center;
  transition: transform .45s var(--ease), box-shadow .45s ease, background .25s ease;
  position: relative;
}
.event:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-1);
  background: #fff;
}
.event__icon{
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  color: var(--blue);
}
.event__icon svg{ width: 100%; height: 100%; }
.event__icon svg [pathLength]{
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.event__icon{
  transform: translateY(10px) scale(.85);
  opacity: 0;
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
.event.in-view .event__icon{
  opacity: 1;
  transform: none;
}
.event__time{
  font-family: var(--display);
  font-size: 1.8rem;
  color: var(--blue);
  margin: 4px 0 4px;
}
.event__title{
  font-size: .76rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--magenta);
  margin: 0 0 10px;
  font-weight: 600;
}
.event__note{
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 0;
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   VENUE
   ════════════════════════════════════════════════════════════ */
.venue__addr{
  font-family: var(--display);
  color: var(--blue);
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 6px 0 0;
}
.venue__map{
  margin: 36px auto 26px;
  max-width: 760px;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(219,176,121,.45);
  box-shadow: var(--shadow-1);
}
.venue__map iframe{ width: 100%; height: 100%; border: 0; display: block; }
.venue__cta{
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 10px;
}
.venue__qr img{
  width: 110px; height: 110px;
  border-radius: 6px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(219,176,121,.5);
}

/* ════════════════════════════════════════════════════════════
   DRESS CODE (blue, backup style)
   ════════════════════════════════════════════════════════════ */
.dress{ position: relative; overflow: hidden; }
.dress::before{
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at top, rgba(237,196,142,.12), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(0,21,46,.5), transparent 50%);
  pointer-events: none;
}
.dress > *{ position: relative; z-index: 2; }
.dress h2{ color: #fff; margin-bottom: 0; }
.dress p{ color: rgba(255,238,217,.86); max-width: 50ch; margin-inline: auto; }
.dress__formal{
  font-family: var(--display);
  font-size: clamp(3rem, 8vw, 5rem);
  color: var(--gold-soft);
  margin: 16px 0;
  letter-spacing: .12em;
  line-height: 1;
}
.dress__icons{
  display: flex;
  gap: 60px;
  justify-content: center;
  margin: 24px auto 18px;
  flex-wrap: wrap;
}
.dress__person{
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  color: var(--cream);
}
.dress__person svg{
  width: 72px; height: 72px;
}
.dress__person{
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transition: opacity .8s var(--ease), transform .9s var(--ease);
}
.dress__icons.in-view .dress__person{ opacity: 1; transform: none; }
.dress__icons.in-view .dress__person:nth-child(2){ transition-delay: .15s; }
.dress__person span{
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.dress__note{ margin-top: 8px; }
.dress__light{ color: rgba(255,238,217,.6); font-size: .9em; }

/* ════════════════════════════════════════════════════════════
   HOSPEDAJE
   ════════════════════════════════════════════════════════════ */
.hosp__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
  margin-top: 36px;
}
.hosp__card{
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(219,176,121,.45);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease), box-shadow .4s ease;
}
.hosp__card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-2); }
.hosp__photo{
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--blue);
}
.hosp__photo img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 8s var(--ease);
}
.hosp__card:hover .hosp__photo img{ transform: scale(1.08); }
.hosp__body{
  padding: 26px 24px 28px;
  display: flex; flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
}
.hosp__card--inside .hosp__body{
  background: linear-gradient(150deg, var(--blue) 0%, var(--blue-2) 100%);
  color: var(--cream);
  flex: 1;
}
.hosp__card--inside h3{ color: #fff; }
.hosp__card--inside p{ color: rgba(255,238,217,.85); margin: 0; }
.hosp__card--out .hosp__body{ flex: 1; }
.hosp__card--out p{ color: var(--ink-soft); margin: 0; }
.hosp__tag{
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: var(--gold-soft);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.hosp__tag--gold{
  background: rgba(219,176,121,.18);
  color: var(--gold);
}
.hosp__card p{ font-size: .96rem; }
@media(max-width: 760px){ .hosp__grid{ grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   WEATHER
   ════════════════════════════════════════════════════════════ */
.weather__card{
  margin: 28px auto 0;
  max-width: 540px;
  background: #fff;
  border: 1px solid rgba(219,176,121,.45);
  border-radius: 6px;
  padding: 32px 28px;
  box-shadow: var(--shadow-1);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.weather__card::before{
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(237,196,142,.4), transparent 70%);
  pointer-events: none;
}
.weather__loading{
  color: var(--ink-soft);
  font-size: .92rem;
  text-align: center;
  min-height: 100px;
  display: grid; place-items: center;
}
.weather__head{
  display: flex; align-items: center; gap: 20px;
  position: relative;
}
.weather__icon{
  width: 80px; height: 80px;
  color: var(--blue);
  flex: 0 0 auto;
}
.weather__icon svg{ width: 100%; height: 100%; }
.weather__temps{
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--display);
  line-height: 1;
}
.weather__max{ font-size: 3rem; color: var(--blue); }
.weather__min{ font-size: 1.4rem; color: var(--ink-soft); }
.weather__cond{
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: .95rem;
}
.weather__note{
  position: relative;
  margin: 16px 0 0;
  font-size: .78rem;
  color: var(--gold);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   GALLERY SLIDER (full-bleed, autoplay, Ken Burns)
   ════════════════════════════════════════════════════════════ */
.gallery{ padding-bottom: clamp(40px, 6vw, 80px); }
.gallery__title{ color: #fff; }
.slider{
  position: relative;
  width: 100%;
  height: clamp(420px, 75vh, 720px);
  overflow: hidden;
  background: #000;
  margin-top: 40px;
}
.slider__track{
  position: absolute; inset: 0;
}
.slider__slide{
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.slider__slide img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  transition: transform 7s ease-out;
}
.slider__slide.is-active{
  opacity: 1;
  pointer-events: auto;
}
.slider__slide.is-active img{ transform: scale(1.18); }
.slider::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,39,64,.12) 0%, transparent 30%, rgba(14,39,64,.35) 100%);
  pointer-events: none;
}
.slider__btn{
  position: absolute;
  top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  color: var(--cream);
  font-size: 1.6rem;
  line-height: 1;
  display: grid; place-items: center;
  z-index: 4;
  transition: background .25s ease, transform .25s ease;
  border: 1px solid rgba(255,238,217,.3);
}
.slider__btn:hover{ background: rgba(255,255,255,.28); transform: translateY(-50%) scale(1.08); }
.slider__btn--prev{ left: 18px; }
.slider__btn--next{ right: 18px; }
.slider__dots{
  position: absolute;
  left: 50%; bottom: 20px;
  transform: translateX(-50%);
  display: flex; gap: 7px;
  z-index: 4;
}
.slider__dots span{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,238,217,.4);
  transition: background .2s ease, transform .2s ease;
  cursor: pointer;
}
.slider__dots span.is-on{ background: var(--gold-soft); transform: scale(1.4); }

/* ════════════════════════════════════════════════════════════
   MESA DE REGALOS
   ════════════════════════════════════════════════════════════ */
.gift-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin-top: 36px;
  max-width: 920px;
  margin-inline: auto;
}
.gift-card{
  background: #fff;
  border: 1px solid rgba(219,176,121,.45);
  border-radius: 6px;
  padding: 30px 24px 26px;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  text-align: center;
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease), box-shadow .4s ease;
}
.gift-card:not([data-pending]):hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); }
.gift-card[data-pending]{ opacity: .6; cursor: not-allowed; }
.gift-card__logo{
  height: 54px;
  display: grid; place-items: center;
  margin-bottom: 8px;
  width: 100%;
}
.gift-card__logo svg{ width: 100%; max-width: 180px; height: 100%; }
.gift-card__lbl{
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.gift-card__code{
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--blue);
  margin: 0;
}
.gift-card__cta{
  margin-top: 6px;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--magenta);
  font-weight: 600;
}
.gift-card__cta--off{ color: var(--ink-soft); font-style: italic; }

/* ════════════════════════════════════════════════════════════
   PLAYLIST
   ════════════════════════════════════════════════════════════ */
.playlist__embed{
  margin: 28px auto 0;
  max-width: 720px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
  background: #000;
}

/* ════════════════════════════════════════════════════════════
   RSVP
   ════════════════════════════════════════════════════════════ */
.rsvp{
  background: var(--ink);
  color: var(--cream);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(100px, 14vw, 160px) 0;
}
.rsvp__bg{
  position: absolute; inset: -10% -2% -2%; z-index: 0;
}
.rsvp__bg img{ width: 100%; height: 100%; object-fit: cover; filter: brightness(.4); }
.rsvp__veil{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(2,72,144,.55) 0%, rgba(14,39,64,.78) 100%);
}
.rsvp__inner{ position: relative; z-index: 2; }
.rsvp h2{
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin-bottom: 4px;
}
.rsvp p{ color: rgba(255,238,217,.88); max-width: 52ch; margin-inline: auto; }
.rsvp__deadline{
  margin: 22px auto !important;
  font-size: .95rem;
  letter-spacing: .04em;
}
.rsvp__deadline strong{ color: var(--gold-soft); }

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 3px;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--cream);
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 500;
  transition: transform .25s var(--ease), box-shadow .25s ease, background .25s ease, color .25s ease;
  margin-top: 14px;
}
.btn:hover{
  background: var(--blue-dk);
  border-color: var(--blue-dk);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(2,72,144,.32);
}
.btn--gold{
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
  padding: 18px 38px;
  font-size: .82rem;
}
.btn--gold:hover{
  background: var(--gold-soft);
  border-color: var(--gold-soft);
  box-shadow: 0 14px 28px rgba(219,176,121,.4);
}
.btn--wa{
  background: #25D366;
  border-color: #25D366;
  color: #fff;
}
.btn--wa:hover{
  background: #1eb958;
  border-color: #1eb958;
  box-shadow: 0 14px 28px rgba(37,211,102,.35);
}

/* ════════════════════════════════════════════════════════════
   FOOTER (oscuro)
   ════════════════════════════════════════════════════════════ */
.foot{
  background: var(--ink);
  color: rgba(255,238,217,.7);
  padding: 90px 0 80px;
  text-align: center;
  position: relative;
  border-top: 1px solid rgba(219,176,121,.18);
}
.foot__logo{
  width: clamp(160px, 22vw, 220px);
  margin: 0 auto 22px;
  filter: brightness(0) invert(1) opacity(.92);
}
.foot__heart{
  margin-top: 22px;
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: .04em;
  color: var(--gold-soft);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════
   REVEAL ANIMATION
   ════════════════════════════════════════════════════════════ */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: transform, opacity;
}
.reveal.is-in{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  .reveal, .stagger, .env__seal::after, .hero__scroll span,
  .env__flap, .env__seal img, .event__icon svg [pathLength],
  .dress__person svg [pathLength], .slider__slide img{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}