/* ============================================================
   XV Martina — Invitación (HTML standalone, vanilla, sin build)
   Tema ÚNICO dark/glam.
   Baja de design.md (tokens/tipografía/motifs) + portada P1
   validada (_mockups/03-a1-p1.html).
   FASE 0: tokens + splash-overlay + scaffold + ambient.
   ============================================================ */

:root {
  /* --- paleta (design.md §2) --- */
  --obsidian: #0A0A0B;     /* fondo base */
  --warm-white: #F6F1E6;   /* texto principal */
  --mist: #B8AC8E;         /* eyebrows, metadatos, secundario */
  --gold: #CE983D;         /* acento de marca — RESERVADO: "Martina" + CTA primario RSVP */
  --gold-lite: #F3D78E;    /* glints / glow / highlights de oro */
  --silver: #C8D0D8;       /* plata: atmósfera del interior (design.md §2) */
  --silver-lite: #EAF0F5;  /* glints / números / highlights fríos */
  --mist-cool: #9CA6B0;    /* eyebrows / metadatos del interior (frío) */

  /* --- superficies del interior (plata-dominante) --- */
  --line: rgba(200, 208, 216, .30);        /* hairline plata */
  --line-soft: rgba(200, 208, 216, .16);
  --card-bg: linear-gradient(180deg, rgba(18, 17, 20, .92), rgba(11, 10, 13, .95)); /* card SÓLIDA */
  --card-border: rgba(200, 208, 216, .22);
  --field-bg: rgba(12, 13, 16, .6);

  /* --- tipografía (réplicas OFL, design.md §3) --- */
  --font-display: "Playfair Display", serif;  /* ≈ Brown Sugar */
  --font-serif: "Cormorant", serif;           /* ≈ Higuen Elegant Serif */
  --font-script: "Allura", cursive;           /* ≈ New Icon Script — "Martina" */
  --font-body: "Jost", system-ui, sans-serif; /* UI / cuerpo */

  /* --- curva firma (design.md §7) --- */
  --ease: cubic-bezier(.32, .72, 0, 1);

  --frame-max: 460px;      /* ancho del encuadre "celular" */

  /* Real film grain (feTurbulence): no grid, no visible tiling.
     The feColorMatrix is NOT decorative: fractalNoise has a gray mean, so with
     mix-blend-mode: screen it would lift the obsidian black to charcoal.
     The last (alpha) row subtracts 0.62 so it adds texture without washing out the background.
     Shared by #splash .grain, #hero .photo__grain and .gph__img::after — the 3 MUST use the
     exact same matrix, or the surface not touched keeps the correct obsidian while the one
     "adjusted" washes out, and nobody will trace the bug back to CSS. Each site keeps its own
     opacity (.34 / .22 / .16), calibrated per surface — do not fold those into this var. */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.85 0 0 0 0 0.88 0 0 0 0 0.93 1 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  min-height: 100%;
  background: var(--obsidian);
  color: var(--warm-white);
  font-family: var(--font-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ===== ambient: motas oro/plata fijas detrás del contenido ===== */
#ambient {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--frame-max);
  height: 100dvh;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ===== encuadre "celular": columna centrada, transparente sobre el ambient ===== */
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto;
  background: transparent;
}
@media (min-width: 500px) {
  main {
    margin-block: 28px;
    border-radius: 30px;
    border: 1px solid var(--card-border);
    box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8);
    overflow: hidden;
  }
}

/* ===== reveal on scroll ===== */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ============================================================
   SPLASH / PORTADA (P1) — portado de _mockups/03-a1-p1.html,
   scopeado bajo #splash para no chocar con los componentes de
   página que se agregan en fases siguientes.
   ============================================================ */
#splash.splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--obsidian);
  transition: opacity 1.1s ease, transform 1.1s var(--ease), visibility 1.1s;
}
#splash.splash--hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.06) translateY(-24px);
  pointer-events: none;
}

#splash #gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: radial-gradient(120% 80% at 50% -8%, rgba(96, 106, 120, .18), transparent 55%), var(--obsidian);
}
#splash .grain {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .34;
  /* Noise data-URI: --noise en :root (única fuente — ver comentario ahí). */
  background-image: var(--noise);
  background-size: 220px 220px;
}
#splash #balls {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: block;
}
/* Bolas de disco: foto real y estática. Sin rotación — la foto ya viene nivelada. */
#splash .ball { position: absolute; z-index: 2; aspect-ratio: 1; pointer-events: none; }
#splash .ball img { display: block; width: 100%; height: 100%; }
#splash .ball::before {   /* cable */
  content: ""; position: absolute; left: 50%; bottom: 93%; top: -600px; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(200, 208, 216, .32));
}
#splash .ball::after {    /* halo de luz */
  content: ""; position: absolute; inset: -55%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(222, 230, 240, .20), transparent 60%);
}
#splash .ball--1 { width: 126px; left: 5%;  top: 3%; }
#splash .ball--2 { width: 84px;  left: 61%; top: 0%; }
#splash .ball--3 { width: 52px;  left: 83%; top: 15%; }
#splash .ball--2 img { transform: scaleX(-1); }   /* espejo, NO rotación */
#splash .grad {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(180deg, rgba(10, 10, 11, .34) 0%, transparent 30% 58%, rgba(10, 10, 11, .72) 100%);
}
#splash .content {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#splash .eyebrow {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .32em;
  font-size: 11.5px;
  color: var(--mist-cool);
  padding-left: .32em;
  margin-bottom: 11px;
  opacity: 0;
  animation: rise 1s .2s var(--ease) forwards;
}
.foil {
  background: linear-gradient(100deg, #8a5e22 0%, var(--gold) 24%, var(--gold-lite) 42%, #fff7e4 50%, var(--gold-lite) 58%, var(--gold) 76%, #6f4a18 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 7s linear infinite;
}
@keyframes sheen { to { background-position: -250% 0; } }
#splash .name {
  font-family: var(--font-script);
  font-size: clamp(64px, 22vw, 120px);
  line-height: .82;
  filter: drop-shadow(0 4px 34px rgba(206, 152, 61, .5));
  opacity: 0;
  animation: rise 1.3s .35s var(--ease) forwards, glow 4.5s 1.6s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% { filter: drop-shadow(0 4px 30px rgba(206, 152, 61, .42)); }
  50% { filter: drop-shadow(0 4px 50px rgba(243, 215, 142, .66)); }
}
#splash .sub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  opacity: 0;
  animation: rise 1.1s .6s var(--ease) forwards;
}
#splash .sub i { height: 1px; width: 30px; background: linear-gradient(90deg, transparent, var(--silver)); }
#splash .sub i:last-child { background: linear-gradient(90deg, var(--silver), transparent); }
#splash .sub b {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: 12px;
  color: var(--warm-white);
  padding-left: .34em;
}
#splash .date {
  margin-top: 22px;
  font-weight: 300;
  letter-spacing: .24em;
  font-size: 14px;
  color: #dfe4ea;
  opacity: 0;
  animation: rise 1.1s .8s var(--ease) forwards;
}
#splash .date b { font-weight: 500; color: var(--silver-lite); }
#splash .cta {
  margin-top: 32px;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12.5px;
  padding-left: .16em;
  color: #0A0A0B;
  border: 0;
  border-radius: 999px;
  padding: 15px 22px 15px 32px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, #EAF0F5 0%, var(--silver) 55%, #9AA4AE 100%);
  box-shadow: 0 10px 34px -6px rgba(200, 208, 216, .5), inset 0 1px 0 rgba(255, 255, 255, .6);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
  opacity: 0;
  animation: rise 1.1s 1s var(--ease) forwards;
}
#splash .cta span { position: relative; z-index: 2; }
#splash .cta .ic {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(10, 10, 15, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .5s var(--ease);
}
#splash .cta .ic svg { width: 12px; height: 12px; stroke: #0A0A0B; stroke-width: 2; fill: none; }
#splash .cta::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: skewX(-18deg);
  animation: shine 4.5s 2s ease-in-out infinite;
}
@keyframes shine { 0% { left: -60%; } 18%, 100% { left: 130%; } }
#splash .cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px -6px rgba(234, 240, 245, .6), inset 0 1px 0 rgba(255, 255, 255, .65);
}
#splash .cta:hover .ic { transform: translate(3px, -1px) scale(1.06); }
#splash .cta:active { transform: translateY(0) scale(.985); }
#splash .cta:focus-visible { outline: 2px solid var(--silver-lite); outline-offset: 3px; }
#splash .place {
  margin-top: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 10.5px;
  color: var(--mist-cool);
  padding-left: .3em;
  opacity: 0;
  animation: rise 1.1s 1.2s var(--ease) forwards;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO-FOTO (§1) — Editorial full-bleed.
   Foto a pantalla completa, scrim inferior que funde a la
   página, texto abajo. La foto real (~13/07) reemplaza el
   background de .photo__img.
   ============================================================ */
#hero {
  position: relative;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
#hero .photo { position: absolute; inset: 0; overflow: hidden; }
#hero .photo__img {
  position: absolute;
  inset: 0;
  transform: scale(1.02);
  background-color: #0b0a0c;
  background-image: url("assets/disco-portada.webp");
  background-size: cover;
  /* 30% vertical: en desktop el cover recorta arriba/abajo — anclamos en la cara/torso */
  background-position: 50% 30%;
  background-repeat: no-repeat;
}
#hero .photo__grain {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: .22;
  /* Noise data-URI: --noise en :root (única fuente — ver comentario ahí). */
  background-image: var(--noise);
  background-size: 220px 220px;
}
#hero .scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 11, .5) 0%, transparent 24% 50%, rgba(10, 10, 11, .72) 78%, var(--obsidian) 100%);
}
#hero .vig {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 100% at 50% 40%, transparent 55%, rgba(10, 10, 11, .55) 100%);
}
#hero .content {
  position: relative;
  z-index: 4;
  text-align: center;
  padding: 0 34px 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Scroll hint. Centrado: el FAB de música vive abajo a la derecha y no se tocan.
   La animación mueve SOLO el transform — la opacidad queda fija a propósito: con
   prefers-reduced-motion el bloque global congela la animación, y si la opacidad
   fuese animada el chevron quedaría clavado en el frame apagado. Así queda quieto
   pero legible, que es justo lo que necesita quien no puede ver movimiento. */
#hero .scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 18px;
  margin-left: -11px;
  z-index: 5;
  width: 22px;
  height: 22px;
  color: var(--gold-lite);
  opacity: .72;
  pointer-events: none;
  transition: opacity .5s var(--ease);
}
#hero .scroll-hint svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; animation: hint-bob 1.9s var(--ease) infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
/* Cumplió su función: el usuario ya sabe que la página sigue. */
body.scrolled #hero .scroll-hint { opacity: 0; }
#hero .eyebrow {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: 10.5px;
  color: var(--mist-cool);
  padding-left: .34em;
}
#hero .name {
  font-family: var(--font-script);
  font-size: clamp(56px, 20vw, 100px);
  line-height: .8;
  color: var(--warm-white);
  text-shadow: 0 4px 30px rgba(0, 0, 0, .6), 0 0 40px rgba(200, 208, 216, .28);
  margin: 6px 0 2px;
}
#hero .sub { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
#hero .sub i { height: 1px; width: 26px; background: linear-gradient(90deg, transparent, var(--silver)); }
#hero .sub i:last-child { background: linear-gradient(90deg, var(--silver), transparent); }
#hero .sub b {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .3em;
  font-size: 11px;
  color: #dfe4ea;
  padding-left: .3em;
}
/* Entrada escalonada: gateada a la apertura del splash (body.entered).
   Sin JS (no .js) el contenido queda visible por default (spec §8). */
.js #hero .eyebrow,
.js #hero .name,
.js #hero .sub { opacity: 0; }
.js body.entered #hero .eyebrow { animation: rise 1s .15s var(--ease) forwards; }
.js body.entered #hero .name { animation: rise 1.2s .3s var(--ease) forwards; }
.js body.entered #hero .sub { animation: rise 1.1s .55s var(--ease) forwards; }
.js body.entered #hero .photo__img { animation: kenburns 18s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.12); } }

/* ============================================================
   COMPONENTES DE PÁGINA (§2–§10) — plata glam.
   Cards SÓLIDAS sobre el ambient de reflejos; superficies con
   hairline plateada. Oro RESERVADO: "Martina" + CTA primario RSVP
   (design.md §2). Todo lo demás → plata/frío.
   ============================================================ */

.eyebrow--center {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .34em;
  font-size: 11px;
  color: var(--mist-cool);
  padding-left: .34em;
}

/* ---- pills (CTA) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background .3s, border-color .3s;
}
.pill--gold {
  color: #170f03;
  border: 0;
  background: linear-gradient(180deg, #f7e4a4 0%, var(--gold) 52%, #b07d2c 100%);
  box-shadow: 0 10px 30px -8px rgba(206, 152, 61, .5), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.pill--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(243, 215, 142, .6), inset 0 1px 0 rgba(255, 255, 255, .55); }
.pill--ghost { color: var(--silver-lite); background: transparent; border: 1px solid var(--line); }
.pill--ghost:hover { transform: translateY(-2px); background: rgba(200, 208, 216, .1); border-color: var(--silver); }
.pill:active { transform: translateY(0) scale(.985); }
.pill:focus-visible { outline: 2px solid var(--silver-lite); outline-offset: 3px; }

.pill .chev { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- bottom-sheet "Agendá la fecha" (Google / Apple·Outlook) ---- */
.cal-sheet { position: fixed; inset: 0; z-index: 60; visibility: hidden; }
.cal-sheet.open { visibility: visible; }
.cal-sheet__scrim {
  position: absolute; inset: 0; background: rgba(5, 5, 7, .66);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.cal-sheet.open .cal-sheet__scrim { opacity: 1; }
.cal-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-width: var(--frame-max); margin: 0 auto;
  background: linear-gradient(180deg, #191a1f 0%, #0e0e11 100%);
  border-top: 1px solid var(--line); border-radius: 24px 24px 0 0;
  box-shadow: 0 -20px 50px -12px rgba(0, 0, 0, .7);
  padding: 10px 16px calc(22px + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .42s var(--ease);
}
.cal-sheet.open .cal-sheet__panel { transform: translateY(0); }
.cal-sheet__grab { width: 38px; height: 4px; border-radius: 99px; background: rgba(200, 208, 216, .28); margin: 2px auto 14px; }
.cal-sheet__title { text-align: center; font-family: var(--font-serif); font-weight: 600; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--silver); }
.cal-sheet__sub { text-align: center; font-size: 12px; color: #8a929b; margin: 3px 0 16px; }
.cal-sheet__row {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 14px; border-radius: 14px; text-decoration: none;
  color: var(--silver-lite); border: 1px solid var(--line-soft); background: rgba(200, 208, 216, .03);
  transition: background .2s, border-color .2s;
}
.cal-sheet__row:hover { background: rgba(200, 208, 216, .08); border-color: var(--line); }
.cal-sheet__row:focus-visible { outline: 2px solid var(--silver-lite); outline-offset: 2px; }
.cal-sheet__row + .cal-sheet__row { margin-top: 10px; }
.cal-sheet__ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(200, 208, 216, .06); }
.cal-sheet__ic svg { width: 19px; height: 19px; }
.cal-sheet__txt b { display: block; font-weight: 500; font-size: 14.5px; }
.cal-sheet__txt small { display: block; color: #8a929b; font-size: 11.5px; letter-spacing: .02em; margin-top: 2px; }
.cal-sheet__cancel {
  display: block; width: 100%; text-align: center; margin-top: 14px; padding: 13px;
  background: transparent; border: 0; color: #8a929b; cursor: pointer;
  font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  transition: color .2s;
}
.cal-sheet__cancel:hover { color: var(--silver); }
.cal-sheet__cancel:focus-visible { outline: 2px solid var(--silver-lite); outline-offset: 2px; }

/* ---- §2 Countdown ---- */
.count { padding: 48px 26px 22px; }
.cells { display: flex; gap: 9px; justify-content: center; max-width: var(--frame-max); margin: 18px auto 0; }
.cell {
  flex: 1;
  padding: 16px 4px;
  text-align: center;
  border-radius: 16px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.cell .n { font-family: var(--font-display); font-weight: 500; font-size: 28px; color: var(--silver-lite); line-height: 1; font-variant-numeric: tabular-nums; }
.cell .l { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist-cool); margin-top: 7px; }

/* ---- §3 Galería · bento 3 fotos ---- */
.gallery { padding: 42px 22px 30px; }
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.b1 { grid-column: 1; grid-row: 1 / span 2; }
.b2 { grid-column: 2; grid-row: 1; aspect-ratio: 1/1; }
.b3 { grid-column: 2; grid-row: 2; aspect-ratio: 1/1; }
/* Feather (validado en _mockups/f3): sin hairline ni sombra — la máscara radial
   lleva el alpha a 0 en el perímetro, así la foto se disuelve en la obsidiana en
   vez de leerse como una card apoyada encima. El radius queda chico porque la
   máscara ya come las esquinas; uno grande no se vería. */
.gph {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin: 0;
  cursor: pointer;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(circle at 50% 50%, #000 62%, transparent 100%);
}
.gph .gph__img { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.gph:hover .gph__img { transform: scale(1.05); }
.gph__img::after { content: ""; position: absolute; inset: 0; mix-blend-mode: screen; opacity: .16; background-image: var(--noise); background-size: 220px 220px; }
/* Fotos reales. background-position ancla la cara en cada recorte de cover. */
.ph1, .ph2, .ph3 { background-color: #0c0a0c; background-size: cover; background-repeat: no-repeat; }
.ph1 { background-image: url("assets/disco-1.webp"); background-position: 50% 35%; }
.ph2 { background-image: url("assets/disco-3.webp"); background-position: 55% 50%; }
.ph3 { background-image: url("assets/disco-4.webp"); background-position: 55% 50%; }

/* ---- §4/§5/§6/§7 Cards ---- */
.card {
  position: relative;
  z-index: 1;
  margin: 20px 22px;
  padding: 34px 26px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(246, 241, 230, .06);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.card__ic {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  background: radial-gradient(circle at 50% 30%, rgba(200, 208, 216, .16), rgba(200, 208, 216, .04));
  border: 1px solid var(--line);
}
.card__ic svg { width: 23px; height: 23px; stroke: var(--silver-lite); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.card__title { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--mist-cool); }
.card__big { font-family: var(--font-serif); font-weight: 500; font-size: 26px; color: var(--warm-white); margin-top: 10px; line-height: 1.2; }
.card__sub { font-size: 13px; letter-spacing: .02em; color: var(--mist-cool); margin-top: 8px; line-height: 1.5; max-width: 34ch; }
.card__note { display: inline-block; margin-top: 14px; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--silver); }
.card__cta { margin-top: 20px; }

/* Separador de marca: los "rombitos" (· ✦ ·). Compartido entre §8 (frase) y §10 (cierre). */
.spark { color: var(--silver); letter-spacing: .5em; font-size: 14px; text-shadow: 0 0 12px rgba(234, 240, 245, .55); }

/* ---- §8 Frase ---- */
.frase { padding: 56px 34px; text-align: center; }
.frase__text { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.55; color: var(--warm-white); max-width: 22ch; margin: 22px auto 0; }

/* ---- §10 Cierre ---- */
.closing { padding: 60px 30px 46px; text-align: center; }
.closing__text { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.6; color: var(--warm-white); max-width: 26ch; margin: 16px auto 0; }
.closing__sign { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--mist-cool); margin-top: 28px; line-height: 1.5; }
/* "Martina" del cierre = momento de marca → se mantiene en oro foil (design.md §2) */
.closing__name { font-family: var(--font-script); font-style: normal; font-size: 52px; color: var(--gold-lite); display: inline-block; margin-top: 2px; line-height: 1; }
.closing__footer { margin-top: 42px; }
.closing__nm { font-family: var(--font-display); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--mist-cool); }
.closing__hm { font-size: 10px; letter-spacing: .06em; color: rgba(184, 172, 142, .6); margin-top: 8px; }
.closing__hm a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Lightbox ---- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 5, 6, .9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.lb.open { display: flex; }
.lb__stage {
  position: relative;
  width: 100%;
  max-width: var(--frame-max);
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px #000, 0 0 0 1px rgba(200, 208, 216, .28);
}
.lb__stage .gph__img { position: absolute; inset: 0; }
.lb__hint { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: rgba(246, 241, 230, .55); }

/* ---- FAB música de fondo ---- */
.fab {
  position: fixed;
  bottom: 22px;
  transition: bottom .3s ease;
  right: max(12px, calc(50vw - 214px));
  z-index: 55;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(28, 27, 31, .92), rgba(14, 13, 16, .95));
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Lift above the fixed demo bar (16px + 44px) only once the bar is visible. */
body:has(.demo-bar--visible) .fab { bottom: 76px; }
.fab svg { width: 22px; height: 22px; }
.fab__play { fill: var(--silver-lite); }
.fab__pause { display: none; fill: none; stroke: var(--silver-lite); stroke-width: 2.4; stroke-linecap: round; }
.fab.is-playing .fab__play { display: none; }
.fab.is-playing .fab__pause { display: block; }
.fab .ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--silver); animation: pulse 2.4s ease-out infinite; }
.fab:not(.is-playing) .ring { animation: none; opacity: 0; }
@keyframes pulse { 0% { transform: scale(.9); opacity: .5; } 80%, 100% { transform: scale(1.5); opacity: 0; } }
.fab:focus-visible { outline: 2px solid var(--silver-lite); outline-offset: 3px; }

/* ---- §9 RSVP ---- */
.rsvp { padding: 6px 0 20px; }
/* La card interactiva solo con JS; sin JS cae al <noscript>. */
.rsvp__card { display: none; }
.js .rsvp__card {
  position: relative;
  z-index: 1;
  margin: 20px 22px;
  padding: 34px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(246, 241, 230, .06);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.rsvp__dl { font-size: 12px; letter-spacing: .02em; color: var(--mist-cool); margin-top: 10px; }
.rsvp__dl b { color: var(--silver-lite); font-weight: 500; }
.rsvp__noscript { margin: 20px 22px; padding: 22px 20px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--mist-cool); border: 1px solid var(--line); border-radius: 20px; }

.rsvp form { width: 100%; margin-top: 22px; text-align: left; }
.rsvp__lbl { display: block; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--silver-lite); margin-bottom: 12px; }

/* persona (bloque repetible) */
.person {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 15px 15px 17px;
  margin-bottom: 12px;
  background: rgba(10, 10, 11, .35);
}
.person__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.person__n { font-family: var(--font-display); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--mist-cool); }
.person__rm {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent;
  color: var(--mist-cool); font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color .3s, border-color .3s, background .3s;
}
.person__rm:hover { color: var(--warm-white); border-color: var(--silver); background: rgba(200, 208, 216, .1); }
.person__rm:focus-visible { outline: 2px solid var(--silver-lite); outline-offset: 2px; }
.person__row { display: flex; gap: 12px; }
.person__row .field { flex: 1; margin-bottom: 0; }

/* campos */
.field { margin-bottom: 12px; }
.field label { display: block; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--mist-cool); margin-bottom: 6px; }
.field input,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--warm-white);
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 11px 13px;
  transition: border-color .3s, box-shadow .3s;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  padding-right: 34px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C8D0D8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
}
.field select option { background: #14151a; color: var(--warm-white); }
.field input::placeholder { color: rgba(156, 166, 176, .45); }
.field input:focus,
.field select:focus { outline: none; border-color: var(--silver); box-shadow: 0 0 0 3px rgba(200, 208, 216, .16); }
.field input:invalid:not(:placeholder-shown) { border-color: rgba(217, 139, 118, .55); }

/* + agregar persona */
.rsvp__add {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: .06em; color: var(--silver-lite);
  background: transparent; border: 1px dashed var(--line); border-radius: 12px;
  padding: 9px 16px; cursor: pointer; margin: 2px 0 2px;
  transition: background .3s, border-color .3s;
}
.rsvp__add span { font-size: 16px; }
.rsvp__add:hover { background: rgba(200, 208, 216, .08); border-color: var(--silver); }
.rsvp__add:focus-visible { outline: 2px solid var(--silver-lite); outline-offset: 2px; }

.rsvp__group { margin-top: 18px; }
.rsvp__submit { margin-top: 22px; text-align: center; }
.rsvp__err { margin-top: 14px; font-size: 12.5px; line-height: 1.4; text-align: center; color: #d98b76; }

/* estado gracias */
.rsvp__thanks { text-align: center; padding: 8px 0 2px; }
.rsvp__thanks-mark { color: var(--silver); font-size: 20px; letter-spacing: .4em; }
.rsvp__thanks-t { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 30px; color: var(--warm-white); margin-top: 8px; }
.rsvp__thanks-s { font-size: 13px; color: var(--mist); margin-top: 8px; line-height: 1.5; }

/* cerrado por deadline */
.rsvp--closed .rsvp__dl { color: var(--silver-lite); }

/* ============================================================
   REDUCED MOTION — NO NEGOCIABLE (design.md §7).
   Entrada instantánea, loops rAF a 1 frame (JS), foil fijo.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .fab { transition: none; }
  * {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
  .foil { background-position: 0 0; }
  [data-reveal] { opacity: 1; transform: none; }
  #splash.splash { transition: none; }
}