/* Mati y Sol — borrador de diseño. Golden hour.
   Recorrido (tomado de ondocollective.jp):
   1. portada sobre el video   2. ceremonia, sube sobre el video
   3. una mancha tapa el video → cuándo y dónde, partido con foto del lugar
   4. otra mancha lleva al color claro → RSVP
   5. índice: lista fija a la izquierda, partes que scrollean a la derecha */

:root {
  --oscuro: #3a2e22;       /* el "verde Ondo" de esta boda: tierra tostada */
  --oscuro-2: #5a4532;
  --miel: #c4935a;
  --durazno: #e6b98f;
  --claro: #f3ebe2;        /* off-white crema, apenas rosado */
  --crema: #f6efe4;
  --linea-clara: rgba(246, 239, 228, 0.24);
  --linea-oscura: rgba(58, 46, 34, 0.18);

  --titulos: 'la-mericana', 'Times New Roman', serif;   /* La Mericana Thin, Adobe Fonts */
  --peso-titulos: 100;   /* el proyecto de Adobe trae solo el Thin */
  --texto: 'Poppins', system-ui, sans-serif;   /* la secundaria de Ondo */

  --margen: clamp(24px, 6vw, 96px);
  /* En la compu, el texto de las secciones que pasan bajo el logo de la
     barra arranca más adentro, como en Ondo (9,9% del ancho): el logo baja
     por el costado sin pisarlo, y hay lugar para agrandarlo. */
  --margen-texto: 9.9vw;
  --espacio: clamp(96px, 14vw, 180px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--oscuro);
  color: var(--crema);
  font-family: var(--texto);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  /* Como Ondo: en Mac afina la letra (sobre todo clara sobre oscuro) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;   /* las líneas se salen por los costados; clip no rompe sticky */
}

/* ── Piezas que se repiten ─────────────────────────────────────────── */
.etiqueta {
  margin: 0 0 20px;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.titulo {
  margin: 0;
  font-family: var(--titulos);
  font-weight: var(--peso-titulos);
  font-size: clamp(2.6rem, 8.5vw, 5.4rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* El logo (el <symbol> #logo-sym del HTML), del color del texto. Mide
   396,69 × 442,93: el alto sale de la proporción. */
.logo { display: block; width: 72px; aspect-ratio: 396.69 / 442.93; height: auto; }
.logo--chico { width: 40px; }

.dos-columnas {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .dos-columnas { grid-template-columns: 4fr 7fr; gap: 64px; }
  .dos-columnas > .etiqueta { padding-top: 0.6em; padding-left: 30%; }
}

/* ── La puerta: logo y "Entrar a la invitación" sobre el tierra ────── */
.puerta { display: none; }
.con-puerta .puerta {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 44px;
  padding: var(--margen);
  background: var(--oscuro);
  color: var(--crema);
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}
/* Mientras está, la página no se mueve */
.con-puerta:not(.puerta-abierta) { overflow: hidden; }
.puerta-abierta .puerta { opacity: 0; visibility: hidden; pointer-events: none; }
.puerta__logo { width: clamp(72px, 7vw, 110px); }
.puerta .boton--borde { color: var(--crema); border-color: var(--crema); }
.puerta .boton--borde:hover { background: var(--crema); color: var(--oscuro); }
.puerta__logo, .puerta__entrar { animation: puerta-aparece 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; }
.puerta__entrar { animation-delay: 0.35s; }
@keyframes puerta-aparece {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .puerta__logo, .puerta__entrar { animation: none; }
}

/* ── Barra fija ────────────────────────────────────────────────────── */
.barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) var(--margen) 16px;
  color: var(--crema);
  pointer-events: none;
  transition: color 0.5s ease;
}
.barra--oscura { color: var(--oscuro); }
/* En la compu, como Ondo: el logo grande y pegado al borde (1,7% del
   ancho, 5,1% de ancho), y la fecha arriba, a la altura del logo y no
   centrada. Entre el logo y el texto (--margen-texto, 9,9%) queda aire
   para que baje sin pisarlo. */
@media (min-width: 900px) {
  .barra { align-items: flex-start; padding-top: max(1.6vw, env(safe-area-inset-top)); padding-left: 1.7vw; }
  .barra .logo--chico { width: 5.1vw; }
  .barra__fecha { padding-top: 0.5vw; }
}
.barra { opacity: var(--barra, 1); }
.barra__fecha { font-size: 0.75rem; letter-spacing: 0.24em; }

/* ── La escena: fondo quieto + portada + ceremonia + RSVP ─────────── */
.escena { position: relative; }

.fondo {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;   /* no ocupa lugar: el contenido pasa por encima */
  overflow: hidden;
  z-index: 0;
  background: #b89a78;
}
.fondo__respira {
  position: absolute;
  inset: -4%;
  animation: respirar 22s ease-in-out infinite alternate;
}
.fondo__imagen {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;
  /* El color ya viene dado en el montaje: acá nada */
}
.fondo__luz {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(130% 80% at 85% -5%, rgba(255, 190, 120, 0.55), transparent 65%),
    linear-gradient(180deg, rgba(232, 178, 120, 0.3) 0%, rgba(58, 46, 34, 0.1) 45%, rgba(58, 46, 34, 0.55) 100%);
}
.fondo__sombra { position: absolute; inset: 0; background: #241a12; opacity: var(--sombra, 0); }
.fondo__mancha {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Respaldo sin WebGL: dos capas que se funden de a poco */
.fondo__respaldo { position: absolute; inset: 0; display: none; }
.sin-webgl .fondo__respaldo { display: block; }
.fondo__respaldo--tierra { background: var(--oscuro); opacity: var(--respaldo-tierra, 0); }
.fondo__respaldo--crema { background: var(--claro); opacity: var(--respaldo-crema, 0); }
.fondo__tapa { position: absolute; inset: 0; background: var(--oscuro); }
.fondo__grano {
  position: absolute;
  inset: 0;
  /* Se va con el color: si no, el tierra del fondo tiene textura y el de la
     sección siguiente no, y se nota la línea donde se juntan. */
  opacity: calc(0.22 * (1 - var(--tinte, 0)));
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@keyframes respirar {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.06) translate3d(-1.5%, 1%, 0); }
}

/* 1 · Portada: alta (225svh). El contenido queda quieto y se desvanece
   con el scroll (--salida, de 0 a 1, lo pone main.js); después queda el
   video solo y recién ahí sube la ceremonia. */
.portada { position: relative; z-index: 1; height: 225svh; }
.portada__fija {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  /* Como Ondo: logo a 40 px de arriba y el texto a 40 px del borde de abajo
     (24 px en el celu) */
  padding: max(40px, calc(env(safe-area-inset-top) + 24px)) var(--margen) max(40px, env(safe-area-inset-bottom));
}

/* El barrido de Ondo (sacado de su CSS): una máscara diagonal con una franja
   visible en el medio y bordes que se desvanecen, cuatro veces más grande
   que el texto. Moverla es lo que borra o descubre el texto en diagonal:
     100% 0%  → oculto (entra al cargar la página, en 1,3 s)
     50% 50%  → visible
     0% 100%  → oculto (sale con el scroll; main.js pone --mx y --my) */
.portada__arriba,
.portada__abajo,
.linea--portada {
  --barrido: linear-gradient(45deg, transparent 25%, rgba(0, 0, 0, 0.5) 31.25%, #000 37.5%, #000 62.5%, rgba(0, 0, 0, 0.5) 68.75%, transparent 75%);
  -webkit-mask-image: var(--barrido);
          mask-image: var(--barrido);
  -webkit-mask-size: 400% 400%;
          mask-size: 400% 400%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: var(--mx, 50%) var(--my, 50%);
          mask-position: var(--mx, 50%) var(--my, 50%);
  animation: barrido-entrada 1.3s linear;   /* sin "both": al terminar, manda el scroll */
}
/* Hasta que main.js termina de preparar la página, el barrido queda en
   pausa en su primer cuadro (texto tapado). Si no, al recargar con la página
   en caché el barrido corría mientras el código trabajaba y el texto
   aparecía de golpe. La clase la pone un script en el <head> y la saca
   main.js (o el propio script, a los 3 s, si main.js no llega). */
.espera-entrada .portada__arriba,
.espera-entrada .portada__abajo { animation-play-state: paused; }
/* Entra al revés de como sale: sale yendo de 50% 50% a 0% 100%, entra
   volviendo de 0% 100% a 50% 50% */
@keyframes barrido-entrada {
  from { -webkit-mask-position: 0% 100%; mask-position: 0% 100%; }
  to   { -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
}
.portada__arriba { display: flex; flex-direction: column; align-items: center; gap: 14px; }
/* Tamaños de la portada de Ondo (su CSS): título 48/1400 del ancho, hasta
   48 px; texto 14/1400, hasta 14 px. En el celu, 36/375 y 12/375.
   El título va compensado porque la fuente no es la de Ondo: La Mericana
   es 9% más ancha (medido) → ×0,92. El texto ya es Poppins, como en Ondo: sus
   mismos números.
   "Sol y Mati" y "Nos casamos" van del mismo tamaño. */
.portada__nombres,
.portada__titulo {
  margin: 0;
  font-family: var(--titulos);
  font-weight: var(--peso-titulos);
  font-size: clamp(10px, 3.15vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.portada__texto {
  margin: 8px auto 0;
  font-size: clamp(10px, 1vw, 14px);
  letter-spacing: -0.03em;
  line-height: 1.2;
}
@media (max-width: 767px) {
  /* Con tope: en una ventana angosta de compu (~750 px) el 3,2vw daba 24 px; tope en el tamaño de celu */
  .portada__nombres, .portada__titulo { font-size: min(8.83vw, 40px); }
  .portada__texto { font-size: min(3.2vw, 14px); width: 90.7vw; max-width: 100%; }
  .portada__texto br { display: none; }
  .portada__fija { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
}


/* ── 3 · Cuándo y dónde, partido ──────────────────────────────────── */
main { position: relative; z-index: 1; }

/* Vive dentro de la escena y sin fondo propio: entra sobre el fondo fijo
   mientras el color todavía lo termina de cubrir (como "About" en Ondo). */
.lugar { position: relative; z-index: 1; display: grid; }
.lugar__texto { padding: calc(var(--espacio) / 2) var(--margen) var(--espacio); }
.lugar__texto .titulo { margin-bottom: 48px; }
@media (min-width: 900px) {
  /* El ancho suma lo que se corrió el margen: la columna de texto sigue
     igual de ancha que antes (si no, "13 de febrero" se partía en dos) */
  /* + 4vw arriba: el bloque baja para que la línea del dibujo no le pase
     por encima (el dibujo se ubica en vw, así la distancia se mantiene) */
  .lugar__texto { padding: calc(var(--espacio) / 3 + 4vw) var(--margen) var(--espacio) var(--margen-texto); max-width: calc(50% + var(--margen-texto) - var(--margen)); }
}

/* Los datos de la ceremonia, uno abajo del otro: sin rótulos ni líneas */
.datos { display: grid; gap: 14px; }
.datos p { margin: 0; font-size: 1.1rem; line-height: 1.5; }

.enlace {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  color: inherit;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1px solid currentColor;
}
.enlace__flecha { transition: transform 0.4s ease; }
.enlace:hover .enlace__flecha { transform: translateX(6px); }

/* ── 4 · RSVP, en el claro ────────────────────────────────────────── */
.rsvp {
  position: relative;
  z-index: 1;
  color: var(--oscuro);
  /* El aire de arriba lo calcula main.js (airearRsvp); esto es el respaldo */
  padding-top: 50svh;
  /* El recorrido: la pantalla y algo más de scroll con el escenario fijo,
     mientras la ventana crece hasta ser card (como el 290svh de Ondo) */
  padding-bottom: 0;
  --card-radio: 16px;   /* el de la ventana; abierta, es 0 (main.js: --rv-radio) */
}
/* Abierta, la card es la pantalla entera (full bleed) */
.rsvp__escenario {
  position: sticky;
  top: 0;
}
.rsvp::after { content: ''; display: block; height: 120svh; }   /* el recorrido fijo */

/* Antes de crecer: solo la ventana, al centro de la pantalla */
.rsvp__antes {
  position: absolute;
  inset: 0 0 auto 0;
  height: 100svh;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.rsvp__ventana { width: clamp(180px, 16vw, 300px); height: clamp(260px, 44svh, 480px); }
@media (max-width: 767px) {
  .rsvp__ventana { width: 42vw; height: 30svh; }
}

/* La card: ya está entera detrás; lo que crece es el recorte (clip-path)
   que la deja ver, de la ventana a la card completa */
.rsvp__card {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  color: var(--crema);
  /* Detrás del contenido, el video del loop (.rsvp__video) bajo un velo de
     tierra para que se lea el texto */
  background: var(--oscuro);
  overflow: hidden;
  /* El radio va también en el recorte (inset … round): si no, el clip-path
     le pisa las esquinas al border-radius */
  clip-path: var(--rv-recorte, inset(0));
  --linea-oscura: var(--linea-clara);
}
.rsvp__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none;
}
.rsvp__card::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Más oscuro en el centro, detrás del texto, y abajo tierra pleno: así se
     junta sin corte con Detalles, que viene pegado debajo */
  background:
    linear-gradient(180deg, transparent 60%, var(--oscuro) 94%),
    radial-gradient(70% 60% at 50% 50%, rgba(58, 46, 34, 0.72), rgba(58, 46, 34, 0.5) 70%, rgba(58, 46, 34, 0.6));
}
.rsvp__contenido { position: relative; z-index: 2; }
.rsvp__contenido {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(40px, 8svh, 96px) clamp(24px, 6vw, 80px);
  /* Entra con el barrido diagonal de Ondo (su máscara "fuerte") */
  -webkit-mask-image: linear-gradient(45deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.5) 50%, transparent 58%);
          mask-image: linear-gradient(45deg, #000 0%, #000 42%, rgba(0, 0, 0, 0.5) 50%, transparent 58%);
  -webkit-mask-size: 400% 400%;
          mask-size: 400% 400%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: var(--rv-mx, 0%) var(--rv-my, 100%);
          mask-position: var(--rv-mx, 0%) var(--rv-my, 100%);
  pointer-events: var(--rv-click, auto);
}
/* La card, centrada: el título, el texto y los botones (los campos de los
   formularios quedan a la izquierda, que se leen mejor) */
.rsvp__contenido { text-align: center; }
.titulo--card { margin-bottom: 28px; }
.rsvp-ctas { justify-content: center; }
.rsvp-form { text-align: left; }
.rsvp-form > .boton { align-self: center; }
.rsvp__card .boton { background: var(--crema); border-color: var(--crema); color: var(--oscuro); }
.rsvp__card .boton--borde { background: transparent; color: var(--crema); }
.rsvp__card .boton:hover { background: var(--miel); border-color: var(--miel); color: var(--crema); }
.rsvp__card .rsvp-form__check input { accent-color: var(--miel); }

.rsvp-intro p { margin: 0 0 6px; font-size: 1.05rem; }
.rsvp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.boton {
  font: inherit;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 16px 28px;
  border-radius: 999px;
  border: 1px solid var(--oscuro);
  background: var(--oscuro);
  color: var(--claro);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.boton--borde { background: transparent; color: var(--oscuro); }
.boton:hover { background: var(--miel); border-color: var(--miel); color: var(--claro); }
.boton:disabled { opacity: 0.5; cursor: default; }

/* Estados que maneja /js/rsvp.js con .is-open */
.rsvp-form, .rsvp-success { display: none; }
.rsvp-form.is-open, .rsvp-success.is-open { display: flex; }
.rsvp-success { flex-direction: column; font-family: var(--titulos); font-weight: var(--peso-titulos); font-size: 1.8rem; line-height: 1.2; }
.rsvp-success p { margin: 0; }

.rsvp-form { flex-direction: column; gap: 28px; width: 100%; margin-top: 8px; }
.rsvp-form > .boton { align-self: flex-start; }
.rsvp-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 480px) { .rsvp-form__row { grid-template-columns: 1fr; } }
.rsvp-form__field { display: flex; flex-direction: column; gap: 6px; }
.rsvp-form__label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; margin: 0; }
.rsvp-form__legend, .rsvp-form__question { font-size: 0.85rem; font-weight: 400; margin: 0 0 12px; padding: 0; }
.rsvp-form__input {
  font: inherit;
  width: 100%;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--linea-oscura);
  border-radius: 0;
  background: transparent;
  color: inherit;
}
.rsvp-form__input:focus { outline: none; border-bottom-color: var(--miel); }
.rsvp-form__input.is-error { border-bottom-color: #b3412f; }
.rsvp-form__textarea { resize: vertical; min-height: 56px; }
.rsvp-form__fieldset { border: 0; margin: 0; padding: 0; }
.rsvp-form__check-row { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.rsvp-form__check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.rsvp-form__check input { accent-color: var(--oscuro); }
.rsvp-form__field-error { color: #b3412f; font-size: 0.8rem; }
.rsvp-form__fallo { color: #b3412f; }

.rsvp-stepper-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 0; border-top: 1px solid var(--linea-oscura); border-bottom: 1px solid var(--linea-oscura); }
.rsvp-stepper-card p { margin: 0; }
.rsvp-stepper { display: flex; align-items: center; gap: 14px; }
.rsvp-stepper__btn { font: inherit; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--linea-oscura); background: transparent; color: inherit; cursor: pointer; }
.rsvp-stepper__btn:disabled { opacity: 0.35; cursor: default; }
.rsvp-companion-section { display: flex; flex-direction: column; gap: 20px; padding-top: 20px; border-top: 1px solid var(--linea-oscura); }
.rsvp-companion-section__header { margin: 0; font-family: var(--titulos); font-weight: var(--peso-titulos); font-size: 1.4rem; }
#companions-container { display: flex; flex-direction: column; gap: 24px; }

/* ── 5 · Índice ───────────────────────────────────────────────────── */
.indice {
  background: var(--oscuro);
  padding: calc(var(--espacio) / 2) var(--margen) var(--espacio);
  display: grid;
  gap: 64px;
}
.indice__titulo { margin: 0 0 28px; font-family: var(--titulos); font-weight: var(--peso-titulos); font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; }
.indice__lista { list-style: none; margin: 0; padding: 0; }
.indice__lista a {
  display: grid;
  grid-template-columns: 1fr auto;   /* sin número: nombre y flecha */
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--linea-clara);
  color: inherit;
  text-decoration: none;
  font-weight: 400;
  opacity: 0.6;
  transition: opacity 0.4s ease;
}
.indice__lista li:first-child a { border-top: 1px solid var(--linea-clara); }
.indice__lista a:hover, .indice__lista a.activo { opacity: 1; }
.indice__flecha { transition: transform 0.4s ease; }
.indice__lista a:hover .indice__flecha { transform: translateY(3px); }

.parte { padding: 40px 0 64px; border-top: 1px solid var(--linea-clara); scroll-margin-top: 90px; }
.parte:first-child { border-top: 0; padding-top: 0; }
.parte__titulo { margin: 0 0 24px; font-family: var(--titulos); font-weight: var(--peso-titulos); font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1.05; }
.parte p { margin: 0; max-width: 560px; }

/* Regalos: "Ver datos" despliega la transferencia (se abre de 0fr a 1fr) */
.regalo__abrir { background: none; border: 0; border-bottom: 1px solid currentColor; font-family: inherit; cursor: pointer; padding: 0 0 6px; }
.regalo__abrir .enlace__flecha { transition: transform 0.4s ease; }
.regalo__abrir:hover .enlace__flecha { transform: translateY(3px); }
.regalo__abrir[aria-expanded="true"] .enlace__flecha { transform: rotate(180deg); }
.regalo__datos {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}
.regalo__datos.abierto { grid-template-rows: 1fr; opacity: 1; }
.regalo__lista { overflow: hidden; margin: 0; max-width: 560px; min-height: 0; }
.regalo__fila {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linea-clara);
}
.regalo__fila:first-child { margin-top: 28px; border-top: 1px solid var(--linea-clara); }
.regalo__fila dt { font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; padding-top: 3px; }
.regalo__fila dd { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 1.05rem; }
.regalo__valor { word-break: break-all; }
.regalo__copiar {
  font: inherit; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: none; color: inherit; border: 1px solid var(--linea-clara); border-radius: 999px;
  padding: 6px 14px; cursor: pointer; transition: border-color 0.3s ease, background 0.3s ease;
}
.regalo__copiar:hover { border-color: currentColor; }
/* Con los datos abiertos, el dibujo de Detalles se atenúa: su línea cruza
   justo por la tabla y los botones de copiar */
.linea--indice { transition: opacity 0.6s ease; }
.indice.regalo-abierto .linea--indice { opacity: 0.15; }
.regalo__copiar.copiado { background: var(--crema); color: var(--oscuro); border-color: var(--crema); }

@media (min-width: 900px) {
  .indice { grid-template-columns: 4fr 7fr; gap: 64px; padding-left: var(--margen-texto); }
  /* La lista queda fija mientras las partes pasan */
  .indice__nav { position: sticky; top: 110px; align-self: start; }
  .parte { min-height: 70svh; padding: 48px 0 96px; }
}

/* ── Pie ──────────────────────────────────────────────────────────── */
.pie {
  position: relative;
  z-index: 1;
  background: var(--oscuro);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  padding: 40px var(--margen) max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea-clara);
  font-size: 0.75rem;
}
.pie p { margin: 0; }
.pie__credito { opacity: 0.7; }
.pie__link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;                 /* en el celu baja entero, con el ícono */
  border-bottom: 1px solid rgba(246, 239, 228, 0.4);
  padding-bottom: 1px;
}
.pie__link:hover { border-bottom-color: currentColor; }
.pie__icono { width: 1.1em; height: 1.1em; margin-right: 4px; vertical-align: -0.2em; }
@media (max-width: 767px) {
  .pie { flex-direction: column; text-align: center; padding-bottom: 96px; }   /* lugar para el botón */
}

/* ── El botón de abajo a la derecha ───────────────────────────────────── */
/* Los dos controles de abajo a la derecha: el de bajar y la música */
.controles {
  position: fixed;
  right: var(--margen);
  bottom: max(36px, env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
}
.bajar {
  flex-direction: row-reverse;        /* la píldora contra el borde, el texto adentro */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--crema);
  cursor: pointer;
  transition: color 0.5s ease, opacity 0.5s ease;
}
.bajar--oscuro { color: var(--oscuro); }
.bajar__pildora {
  width: 40px;
  height: 56px;
  border: 1px solid currentColor;     /* líneas, sin relleno */
  border-radius: 999px;
  display: grid;
  place-items: center;
}
.bajar__pildora svg { animation: rebotar 1.6s ease-in-out infinite; transition: rotate 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.bajar--arriba .bajar__pildora svg { rotate: 180deg; }
.bajar__texto { font-size: 0.85rem; letter-spacing: 0.06em; }
@keyframes rebotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}
/* La música: la misma píldora de línea que el de bajar, sin flecha */
.musica {
  padding: 0; border: 0; background: none; font: inherit;
  color: var(--crema); cursor: pointer;
  transition: color 0.5s ease;
}
.musica--oscuro { color: var(--oscuro); }
.musica__pildora {
  width: 40px; height: 56px;
  border: 1px solid currentColor; border-radius: 999px;
  display: grid; place-items: center;
}
/* El ícono es el estado: parlante con ondas si suena, tachado si no */
.musica__pildora svg { grid-area: 1 / 1; transition: opacity 0.3s ease, transform 0.3s ease; }
.musica__on { opacity: 0; transform: scale(0.85); }
.musica[aria-pressed="true"] .musica__on { opacity: 1; transform: none; }
.musica[aria-pressed="true"] .musica__off { opacity: 0; transform: scale(0.85); }
@media (max-width: 767px) {
  .controles { bottom: max(24px, env(safe-area-inset-bottom)); gap: 16px; }
  .bajar__pildora { width: 34px; height: 48px; }
  /* En el celu la música va arriba a la derecha, junto a la fecha: abajo,
     en la portada, quedaba sobre el texto (y tiene que poder pausarse de
     entrada, no puede esconderse como el de bajar) */
  .musica { position: fixed; top: max(14px, env(safe-area-inset-top)); right: var(--margen); }
  .musica__pildora { width: 28px; height: 40px; }
  .barra__fecha { margin-right: 44px; }
  /* En la portada el texto ocupa todo el ancho abajo: el botón aparece
     cuando el barrido ya lo borró */
  .bajar { opacity: var(--bajar-celu, 1); pointer-events: var(--bajar-click, auto); }
}
@media (prefers-reduced-motion: reduce) {
  .bajar__pildora svg { animation: none; }
}

/* ── Las líneas dibujadas a mano ──────────────────────────────────────
   Ubicadas según los mockups de Pilar (escala y posición medidas sobre sus
   capturas; los dibujos van estirados como ahí, por eso
   preserveAspectRatio="none"). Detrás del texto, en crema. Se salen por los
   costados a propósito: body tiene overflow-x: clip para que no haya scroll
   horizontal. Por ahora solo en la compu: en el celu hacen falta versiones
   verticales. */
.linea { position: absolute; z-index: 0; color: var(--crema); pointer-events: none; display: block; overflow: visible; }
/* Las tres son canvas: linea-viva.js dibuja el trazo (grosor variable,
   ondulación) y main.js decide cuánto se ve con el scroll. */
.linea--portada {
  /* Canvas a pantalla completa: linea-viva.js ubica, corta y mueve el trazo */
  left: 0; top: 0; width: 100%; height: 100%;
}
/* El barrido de entrada espera a que el canvas tenga el dibujo (si no,
   terminaba antes de que cargara el código y la línea aparecía de golpe) */
.linea--portada:not(.lista) {
  animation: none;
  -webkit-mask-position: 0% 100%;
          mask-position: 0% 100%;
}
.linea-fuente { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
/* La de la ceremonia es un canvas (linea-viva.js: grosor variable,
   ondulación y se dibuja con el scroll), un poco transparente */
/* (24 px de holgura de cada lado para la ondulación; ver main.js) */
/* Pilar la reexportó con un pajarito, un árbol menos y la casa y la laguna
   más abajo (para no pisar el texto): misma escala que antes, 677,89 unidades de alto
   (36,49vw); la loma de arriba queda donde estaba */
.linea--lugar   { left: calc(-12.1vw - 24px); top: calc(var(--espacio) / 3 - 9vw - 24px); width: calc(128.5vw + 48px); height: calc(36.49vw + 48px); opacity: 0.8; }
/* Detalles: el SVG de Pilar reexportado (el moño termina a la izquierda);
   la línea del regalo quedó igual pero 240,74 unidades más arriba, así que
   la caja baja 14,22vw y mide 881,61 unidades de alto (52,08vw) */
.linea--indice  { left: calc(-1.8vw - 24px); top: calc(var(--espacio) / 2 + 19.32vw - 24px); width: calc(111.9vw + 48px); height: calc(52.08vw + 48px); opacity: 0.8; }
.portada__arriba, .portada__abajo { position: relative; z-index: 1; }
.lugar { position: relative; }
.lugar__texto, .indice__partes { position: relative; z-index: 1; }
.indice__nav { z-index: 1; }   /* sin tocar su position: es sticky en la compu */
/* La sombra tapa el medio píxel de la unión con la card del RSVP: si no,
   ahí se asomaba el crema del fondo fijo como una línea */
.indice { position: relative; z-index: 1; box-shadow: 0 -3px 0 var(--oscuro); }
@media (max-width: 899px) { .linea, .linea-fuente { display: none; } }

/* class="pendiente" marca lo provisorio (textos, logo, datos que faltan).
   No se ve: Sol y Mati no tienen que encontrarse marcas raras. La lista de
   lo que falta sale de: grep -n pendiente public/bodas/matiysol/index.html */

/* Aparecer al entrar en pantalla (lo activa main.js) */
.js [data-aparece] {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.js [data-aparece].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fondo__respira, .portada__arriba, .portada__abajo, .linea--portada { animation: none; }
  .js [data-aparece] { opacity: 1; transform: none; transition: none; }
}