:root {
  --ivory: #f8f5ef;
  --paper: #fffdf9;
  --taupe: #b9aa9b;
  --taupe-dark: #74685d;
  --ink: #554d46;
  --line: rgba(116, 104, 93, .25);
  --blue: #20395f;
  --whatsapp: #2f7d66;
  --serif: "Cormorant Garamond", Georgia, serif;
  --display: "Italiana", Georgia, serif;
  --script: "Parisienne", "Segoe Script", cursive;
  --shadow: 0 22px 60px rgba(73, 62, 53, .13);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--ivory); font-family: var(--serif); font-size: 18px; line-height: 1.6; overflow-x: hidden; }
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.section { padding: clamp(5rem, 10vw, 8rem) max(1.25rem, calc((100vw - 1120px) / 2)); }
.section-label { margin: 0 0 .55rem; color: var(--taupe-dark); font-family: var(--display); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; }
h2 { margin: 0; color: var(--ink); font-family: var(--display); font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight: 400; line-height: 1.1; }

.button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; padding: .8rem 1.45rem; border: 1px solid transparent; border-radius: 999px; font-family: var(--serif); font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-decoration: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible, .music-control:focus-visible, .hero__scroll:focus-visible { outline: 3px solid rgba(116,104,93,.45); outline-offset: 4px; }
.button svg { width: 21px; height: 21px; }
.button--primary { color: white; background: var(--taupe-dark); box-shadow: 0 12px 30px rgba(69,57,48,.22); }
.button--outline { color: var(--taupe-dark); border-color: var(--taupe); background: transparent; }
.button--outline:hover { color: white; background: var(--taupe-dark); }

/* Sobre de bienvenida */
.welcome { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 1.5rem; background: rgba(248,245,239,.98); transition: opacity .65s ease, visibility .65s ease; }
.welcome.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.welcome__glow { position: absolute; width: min(90vw, 720px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(185,170,155,.25), transparent 66%); }
.envelope-stage { position: relative; z-index: 1; width: min(92vw, 540px); text-align: center; }
.envelope { position: relative; width: min(78vw, 400px); aspect-ratio: 1.48; margin: 0 auto 2.4rem; filter: drop-shadow(0 24px 24px rgba(81,68,56,.16)); perspective: 900px; }
.envelope__back, .envelope__front, .envelope__flap { position: absolute; inset: 0; }
.envelope__back { border: 1px solid #ded5cb; border-radius: 4px; background: #eee7dd; }
.envelope__card { position: absolute; z-index: 2; left: 7%; right: 7%; bottom: 5%; height: 88%; display: flex; flex-direction: column; justify-content: center; padding: 1rem; border: 1px solid #d8cec3; background: var(--paper); transform: translateY(0); transition: transform .9s cubic-bezier(.22,.8,.26,1) .35s; }
.envelope__card span { font-family: var(--display); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; }
.envelope__card strong { font-family: var(--script); font-size: clamp(2.7rem, 10vw, 4rem); font-weight: 400; line-height: 1.1; }
.envelope__card small { letter-spacing: .18em; }
.envelope__front { z-index: 3; background: linear-gradient(145deg, transparent 49.7%, #f7f2eb 50%) left/50.2% 100% no-repeat, linear-gradient(215deg, transparent 49.7%, #f2ebe2 50%) right/50.2% 100% no-repeat; border-radius: 0 0 4px 4px; pointer-events: none; }
.envelope__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(35deg, transparent 49.5%, #fbf8f3 50%) left bottom/50.2% 72% no-repeat, linear-gradient(-35deg, transparent 49.5%, #f6f0e8 50%) right bottom/50.2% 72% no-repeat; }
.envelope__flap { z-index: 4; height: 55%; transform-origin: top; transform: rotateX(0deg); background: #e8dfd5; clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .7s cubic-bezier(.4,0,.2,1); }
.envelope__seal { position: absolute; z-index: 5; left: 50%; top: 50%; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--taupe-dark); font-family: var(--display); transform: translate(-50%,-50%); box-shadow: 0 5px 12px rgba(70,60,52,.22); transition: opacity .25s ease .05s, transform .25s ease .05s; }
.envelope.is-opening .envelope__flap { z-index: 1; transform: rotateX(180deg); }
.envelope.is-opening .envelope__seal { opacity: 0; transform: translate(-50%,-50%) scale(.6); }
.envelope.is-opening .envelope__card { transform: translateY(-48%); }
.welcome__copy { transition: opacity .35s ease; }
.welcome.is-opening .welcome__copy { opacity: 0; }
.eyebrow { margin: 0 0 .35rem; font-family: var(--display); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.welcome h1 { margin: 0 0 1.15rem; font-family: var(--script); font-size: clamp(2.5rem, 8vw, 4.25rem); font-weight: 400; line-height: 1.12; }
.welcome__hint { margin: .75rem 0 0; color: #8b8076; font-size: .84rem; }

.music-control { position: fixed; z-index: 50; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; color: white; background: rgba(85,77,70,.82); box-shadow: 0 8px 24px rgba(51,44,38,.18); backdrop-filter: blur(9px); cursor: pointer; opacity: 0; transform: translateY(10px); pointer-events: none; transition: .3s ease; }
.music-control.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.music-control svg { width: 22px; height: 22px; }
.music-control .icon-muted { display: none; }
.music-control.is-muted .icon-sound { display: none; }
.music-control.is-muted .icon-muted { display: block; }

/* Portada */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: white; background: #7b6e62; }
.hero__photo { position: absolute; inset: 0; background: url("nicole.jpg") center 36%/cover no-repeat; transform: scale(1.025); animation: heroDrift 14s ease-out both; }
.hero__veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(35,28,23,.18), rgba(35,28,23,.1) 45%, rgba(35,28,23,.65)); }
.hero__content { position: relative; z-index: 1; width: min(92%, 800px); padding: 4rem 1rem 8rem; text-align: center; text-shadow: 0 2px 18px rgba(26,20,16,.28); }
.hero__kicker { margin: 0; font-family: var(--display); font-size: .95rem; letter-spacing: .38em; text-transform: uppercase; }
.hero__mark { margin: 1rem 0 .6rem; font-size: 1.1rem; }
.hero h1 { margin: 0; font-family: var(--script); font-size: clamp(4.2rem, 15vw, 9rem); font-weight: 400; line-height: .82; }
.hero h1 span { display: block; margin-top: 1.1rem; font-family: var(--display); font-size: .31em; letter-spacing: .08em; line-height: 1.2; }
.hero__date { margin: 1.7rem 0 0; font-size: clamp(1rem, 2vw, 1.25rem); letter-spacing: .11em; text-transform: uppercase; }
.hero__scroll { position: absolute; z-index: 2; bottom: 1.6rem; left: 50%; display: flex; flex-direction: column; align-items: center; gap: .25rem; color: white; font-size: .76rem; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.hero__scroll svg { width: 25px; height: 25px; animation: bob 1.6s ease-in-out infinite; }

.intro { position: relative; text-align: center; background: var(--paper); }
.ornament { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--taupe); }
.ornament span { width: 56px; height: 1px; background: currentColor; }
.script { margin: 1.4rem 0 0; color: var(--taupe-dark); font-family: var(--script); font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; }
.intro h2 { max-width: 800px; margin: .7rem auto 1.5rem; font-size: clamp(2rem, 4.7vw, 3.5rem); }
.intro__text { max-width: 720px; margin: 0 auto; font-size: 1.15rem; }
.family { max-width: 720px; display: grid; grid-template-columns: 1fr 1px 1fr; gap: clamp(1.2rem, 5vw, 3.5rem); align-items: center; margin: 3rem auto 0; }
.family i { width: 1px; height: 80px; background: var(--line); }
.family span { display: block; margin-bottom: .4rem; color: var(--taupe-dark); font-family: var(--display); font-size: .72rem; letter-spacing: .19em; text-transform: uppercase; }
.family strong { display: block; font-size: 1.25rem; font-weight: 500; }

.countdown { color: white; text-align: center; background: var(--taupe-dark); }
.countdown .section-label, .countdown h2 { color: white; }
.countdown__grid { max-width: 780px; display: grid; grid-template-columns: repeat(4, 1fr); margin: 3rem auto 0; border: 1px solid rgba(255,255,255,.35); }
.countdown__grid div { padding: clamp(1.1rem, 4vw, 2rem) .5rem; border-right: 1px solid rgba(255,255,255,.25); }
.countdown__grid div:last-child { border: 0; }
.countdown__grid strong { display: block; font-family: var(--display); font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1; }
.countdown__grid span { display: block; margin-top: .65rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; }
.countdown__message { margin: 1.5rem 0 0; }

.events { text-align: center; background: var(--ivory); }
.events__grid { display: grid; gap: 2rem; margin-top: 3.5rem; }
.event-card { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 490px; overflow: hidden; text-align: left; background: var(--paper); box-shadow: var(--shadow); }
.event-card--reverse .event-card__image { grid-column: 2; grid-row: 1; }
.event-card__image { position: relative; min-height: 360px; overflow: hidden; background: #d8cec3; }
.event-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s ease; }
.event-card__image--logo { background: var(--blue); }
.event-card__image--logo img { object-fit: contain; padding: 1.5rem; }
.event-card__image > span { position: absolute; right: 1rem; bottom: 1rem; padding: .45rem .8rem; border-radius: 999px; color: white; background: rgba(48,41,35,.68); font-size: .8rem; letter-spacing: .07em; backdrop-filter: blur(7px); }
.event-card__image:hover img { transform: scale(1.035); }
.event-card__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(2.2rem, 5vw, 4.5rem); }
.event-card__number { position: absolute; top: 1rem; right: 1.5rem; color: rgba(116,104,93,.12); font-family: var(--display); font-size: 5rem; line-height: 1; }
.event-card__type { margin: 0 0 .8rem; color: var(--taupe-dark); font-family: var(--display); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; }
.event-card h3 { position: relative; margin: 0 0 1.6rem; font-family: var(--display); font-size: clamp(1.75rem, 3.2vw, 2.65rem); font-weight: 400; line-height: 1.17; }
.event-card__detail { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1.8rem; }
.event-card__detail svg { flex: 0 0 24px; width: 24px; margin-top: .2rem; }
.event-card__detail strong { font-weight: 600; }

.quote { position: relative; display: grid; place-items: center; min-height: 570px; color: white; text-align: center; background: linear-gradient(rgba(59,51,45,.52), rgba(59,51,45,.66)), url("nicole.jpg") center 54%/cover fixed; }
.quote__inner { max-width: 780px; }
.quote__inner > span { font-family: Georgia, serif; font-size: 5rem; line-height: .6; opacity: .75; }
.quote blockquote { margin: 1rem 0 1.2rem; font-family: var(--display); font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.25; }
.quote p { margin: 0; font-family: var(--script); font-size: 1.8rem; }

.rsvp { text-align: center; background: var(--paper); }
.rsvp > p:not(.section-label) { max-width: 620px; margin: 1.4rem auto 2rem; }
.button--whatsapp { color: white; background: var(--whatsapp); box-shadow: 0 12px 28px rgba(47,125,102,.2); }
.button--whatsapp svg { width: 24px; height: 24px; }
.rsvp__phone { display: block; width: max-content; margin: 1rem auto 0; color: var(--taupe-dark); font-weight: 600; letter-spacing: .08em; text-decoration: none; }
footer { padding: 2.3rem 1.5rem; color: rgba(255,255,255,.82); text-align: center; background: #554d46; }
footer p { margin: 0 0 .2rem; font-family: var(--script); font-size: 1.8rem; }
footer span { font-size: .75rem; letter-spacing: .22em; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s ease, transform .75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes bob { 50% { transform: translateY(6px); } }
@keyframes heroDrift { from { transform: scale(1.08); } to { transform: scale(1.025); } }

@media (max-width: 760px) {
  body { font-size: 17px; }
  .section { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .hero { min-height: 100svh; }
  .hero__photo { background-position: 50% 30%; }
  .hero__content { padding-bottom: 7rem; }
  .hero h1 { font-size: clamp(4.2rem, 22vw, 6.5rem); }
  .hero h1 span { font-size: .27em; }
  .family { grid-template-columns: 1fr; }
  .family i { width: 70px; height: 1px; margin: 0 auto; }
  .countdown__grid { grid-template-columns: repeat(2, 1fr); }
  .countdown__grid div:nth-child(2) { border-right: 0; }
  .countdown__grid div:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.25); }
  .event-card { grid-template-columns: 1fr; }
  .event-card--reverse .event-card__image { grid-column: 1; grid-row: 1; }
  .event-card__image { min-height: auto; aspect-ratio: 1.12; }
  .event-card__body { padding: 2.2rem 1.5rem 2.5rem; }
  .event-card__number { font-size: 4rem; }
  .quote { min-height: 520px; background-attachment: scroll; background-position: center; }
  .button--whatsapp { width: 100%; max-width: 380px; }
}

@media (max-width: 390px) {
  .welcome { padding-inline: 1rem; }
  .envelope-stage { width: 100%; }
  .envelope { width: 88vw; margin-bottom: 1.8rem; }
  .welcome h1 { font-size: 2.45rem; }
  .hero__date { font-size: .88rem; letter-spacing: .06em; }
  .countdown__grid strong { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}