/* =============================================================
   1. Tokens
   ============================================================= */
:root {
  --bg:        #0b0b0c;
  --bg-2:      #151517;
  --card:      #17171a;
  --ink:       #f5f5f4;
  --ink-soft:  #d8d7d5;
  --mute:      #8f8e8c;
  --line:      rgba(245,245,244,0.14);
  --accent:    #ffffff;

  /* Warm brass/antique gold — decorative accent only, never body text */
  --gold:       #c9a66b;
  --gold-soft:  #d9c093;
  --gold-line:  rgba(201,166,107,0.4);
  --gold-glow:  rgba(201,166,107,0.16);

  /* Faint color notes pulled from the venue photo (neon red, flag blue,
     brass gold) — used only in the fixed ambient layer, never as text
     or component color, so the page reads as color instead of flat black. */
  --wash-red:  rgba(150,45,40,0.16);
  --wash-blue: rgba(35,65,110,0.14);
  --wash-gold: rgba(160,120,60,0.12);

  --serif: "Bodoni Moda", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 2; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2 { text-wrap: balance; line-height: 1; letter-spacing: -0.02em; }
::selection { background: var(--gold); color: var(--bg); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.only-mobile { display: inline; }
@media (min-width: 540px) { .only-mobile { display: none; } }

/* =============================================================
   3. Utilities
   ============================================================= */
.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--bg);
  z-index: 9999; border-radius: 8px; font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Fixed color wash behind the whole page — echoes the neon red, flag
   blue and brass gold from the venue photo so the flat sections don't
   read as plain black, and the cut from the hero photo feels continuous. */
.ambient {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 900px 700px at 12% 6%, var(--wash-red), transparent 60%),
    radial-gradient(ellipse 800px 900px at 90% 28%, var(--wash-blue), transparent 62%),
    radial-gradient(ellipse 1000px 800px at 45% 100%, var(--wash-gold), transparent 65%),
    var(--bg);
}

.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

main { position: relative; z-index: 2; }

/* =============================================================
   4. Sections — Hero
   ============================================================= */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1.5rem 4rem;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

/* Venue photo — blurred, desaturated and darkened so the type on
   top stays crisp and the page keeps its monochrome tone. */
.hero::before {
  content: "";
  position: absolute;
  inset: -30px;
  background-image: url("assets/img/hero-bg.webp");
  background-size: cover;
  background-position: center 38%;
  filter: grayscale(0.65) brightness(0.46) contrast(1.08) saturate(1.1) blur(3px);
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: -30px;
  background:
    radial-gradient(circle at 50% 38%, rgba(11,11,12,0.2) 0%, rgba(11,11,12,0.66) 62%, rgba(11,11,12,0.88) 100%),
    linear-gradient(180deg, rgba(11,11,12,0.5) 0%, transparent 22%, transparent 76%, rgba(11,11,12,0.82) 100%);
  z-index: -1;
}

.hero-number {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(7rem, 34vw, 20rem);
  line-height: 0.82;
  color: var(--ink);
  letter-spacing: -0.02em;
  position: relative;
}
/* Bodoni's "1" is visually much lighter/narrower than its "8" — nudge it
   up a touch so the two digits read as the same optical size. Stays a
   plain inline span (no display change) so it keeps sharing the same
   text baseline as the "8" instead of drifting out of alignment. */
.hero-number .n1 {
  font-size: 1.08em;
}
/* Faint warm glow behind the numeral — adds richness without tinting the type */
.hero-number::before {
  content: "";
  position: absolute;
  inset: 10% -10%;
  z-index: -1;
  background: radial-gradient(ellipse at center, var(--gold-glow) 0%, transparent 70%);
  filter: blur(30px);
}

.hero-name {
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1rem;
  color: var(--ink-soft);
}

.hero-invite {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem);
  color: var(--ink-soft);
  margin-top: 1.5rem;
  max-width: 26ch;
}

.hero-meta {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.hero-meta-dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  display: inline-block;
}

.scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 3rem;
  display: block;
}
.scroll-cue span {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(var(--line), var(--gold));
  animation: cueMove 2.2s ease-in-out infinite;
}
@keyframes cueMove {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* Ornamental divider — thin gold hairlines flanking a small diamond,
   used between sections instead of bare empty space. */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  max-width: 220px;
  margin: 2.5rem auto;
  padding: 0 1.5rem;
}
.divider span {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-line));
}
.divider span:last-child {
  background: linear-gradient(to left, transparent, var(--gold-line));
}
.divider i {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--gold);
  transform: rotate(45deg);
  display: block;
}

/* =============================================================
   5. Sections — Details
   ============================================================= */
.details {
  padding: 3.5rem 1.5rem 3rem;
  max-width: 960px;
  margin-inline: auto;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.detail-card {
  background: var(--bg);
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
}
.detail-card::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--gold);
}

.detail-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.9rem;
}

.detail-value {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
}

.detail-link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.detail-link:hover { color: var(--gold-soft); border-color: var(--gold-line); }

.calendar-link {
  display: block;
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  color: var(--mute);
  transition: color 0.3s var(--ease-out);
}
.calendar-link:hover { color: var(--gold-soft); }

/* =============================================================
   6. Sections — Countdown
   ============================================================= */
.countdown {
  padding: 2.75rem 1.5rem 6rem;
  text-align: center;
}

.countdown-label {
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 2rem;
}

.countdown-grid {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 4vw, 2.5rem);
  max-width: 640px;
  margin-inline: auto;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.2rem;
}

.countdown-value {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  color: var(--gold-soft);
  font-variant-numeric: tabular-nums;
}

.countdown-caption {
  margin-top: 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}

/* =============================================================
   7. Sections — Canción
   ============================================================= */
.song {
  padding: 0 1.5rem;
  text-align: center;
  max-width: 520px;
  margin-inline: auto;
}
.song-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.9rem;
}
.song-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 4.4vw, 2.2rem);
  color: var(--ink);
}
.song-sub {
  margin-top: 0.85rem;
  color: var(--mute);
  font-size: 0.9rem;
}

/* =============================================================
   8. Sections — RSVP
   ============================================================= */
.rsvp {
  padding: 2.75rem 1.5rem 3rem;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
}

.rsvp-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 3rem);
  color: var(--gold-soft);
}

.rsvp-sub {
  margin-top: 1rem;
  color: var(--mute);
  font-size: 0.95rem;
}

.btn-rsvp {
  display: inline-block;
  margin-top: 2.25rem;
  padding: 1.05rem 2.75rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: transform 0.35s var(--ease-bounce), box-shadow 0.35s var(--ease-out);
}
.btn-rsvp:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 40px var(--gold-glow);
}
.btn-rsvp:active { transform: translateY(-1px) scale(0.99); }

/* =============================================================
   9. Sections — Pago
   ============================================================= */
.payment {
  padding: 0 1.5rem 3.5rem;
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
}

.payment-label {
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 0.75rem;
}

.payment-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  color: var(--ink);
}

.payment-alias {
  margin-top: 1.75rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.payment-alias-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.payment-alias-value {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.03em;
  color: var(--ink);
  padding: 0.7rem 1.75rem;
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.payment-alias-value:hover {
  border-color: var(--gold);
  color: var(--gold-soft);
  background: rgba(201,166,107,0.06);
}
.payment-alias-value.is-copied {
  border-color: var(--gold);
  color: var(--gold-soft);
}

.payment-note {
  margin-top: 1.5rem;
  color: var(--mute);
  font-size: 0.88rem;
}

.payment-whatsapp {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.payment-whatsapp:hover { color: var(--gold-soft); border-color: var(--gold-line); }

/* =============================================================
   10. Footer
   ============================================================= */
.footer {
  position: relative;
  z-index: 2;
  padding: 2.5rem 1.5rem 3rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--mute);
  border-top: 1px solid var(--gold-line);
}

.footer-credit {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(143,142,140,0.6);
}

/* =============================================================
   11. Reveal-on-scroll
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-soft), transform 0.9s var(--ease-soft);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Defensive: never leave content invisible if JS fails or is stale */
.no-js .reveal,
html:not(.js) .reveal {
  opacity: 1;
  transform: none;
}

/* =============================================================
   12. RSVP dialog (native <dialog>)
   ============================================================= */
.rsvp-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink);
  max-width: min(440px, calc(100vw - 2.5rem));
  width: 100%;
}
.rsvp-dialog::backdrop {
  background: rgba(5,5,6,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.rsvp-form {
  position: relative;
  background: var(--card);
  border: 1px solid var(--gold-line);
  border-radius: 20px;
  padding: 2.5rem 1.75rem 2rem;
}

.rsvp-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--mute);
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.rsvp-close:hover { color: var(--gold-soft); background: rgba(245,245,244,0.08); }

.rsvp-form-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
  padding-right: 1.5rem;
  color: var(--gold-soft);
}

.field {
  border: 0;
  padding: 0;
  margin-bottom: 1.15rem;
}
.field label,
.field legend {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 0.5rem;
}

.field input[type="text"],
.field select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color 0.25s var(--ease-out);
}
.field input[type="text"]:focus,
.field select:focus {
  outline: none;
  border-color: var(--gold);
}

.radio-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.radio-option:has(input:checked) {
  border-color: var(--gold);
  color: var(--ink);
}
.radio-option input { accent-color: var(--gold); }

.rsvp-error {
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: rgba(245,245,244,0.06);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 1rem;
}

.rsvp-submit {
  width: 100%;
  margin-top: 0.25rem;
}
.rsvp-submit[disabled] { opacity: 0.55; pointer-events: none; }

.rsvp-success {
  margin-top: 1.25rem;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-soft);
}

/* =============================================================
   13. Responsive
   ============================================================= */
@media (min-width: 540px) {
  .details-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 720px) {
  .details-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 960px) {
  .hero { padding-top: 4rem; }
}

/* =============================================================
   14. Reduced motion — only the truly intrusive bits
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; }
  .reveal { transition-duration: 0.25s; }
}