/* 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); transform: translate3d(0, var(--barra-corre, 0px), 0); }
.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;
  /* Alto completo de la pantalla (lvh), no el que dejan las barras (svh):
     en el iPhone (Safari de iOS 26) la barra de abajo flota sobre la página
     y, con svh, debajo del video quedaba una franja del marrón del body. El
     texto y los botones siguen en svh (.portada__fija), así la barra no los
     tapa. La franja de arriba, detrás de la hora, la pinta Safari con el
     color del video oscurecido: eso no se controla desde la página. */
  height: 100lvh;
  margin-bottom: -100lvh;   /* 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 */
}
/* El botón de play que Safari le pone a un video que no pudo arrancar solo
   (iPhone con ahorro de batería): no se puede tocar y parece roto. Sin él,
   queda el póster quieto hasta que main.js lo arranca con un toque. */
video::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; }
video::-webkit-media-controls { display: none !important; }
.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); }
  /* Angosto, con el mismo margen a los dos lados: a la derecha están la
     música y el de bajar (34 px de píldora + 12 de aire) */
  .portada__texto { font-size: min(3.2vw, 14px); width: calc(100vw - 2 * (var(--margen) + 46px)); 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); }
/* En el celu el texto de la ceremonia arranca debajo del logo chico de la
   barra (arriba + 40 px de logo + aire), así al llegar a la sección no se
   pisan. Después, al seguir bajando, el título empuja el logo para arriba
   (main.js, --barra-corre). */
@media (max-width: 899px) {
  .lugar__texto { padding-top: calc(max(16px, env(safe-area-inset-top)) + 40px + 48px); }
}
.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; }
/* Regla de los CTAs: el texto y UN ícono, siempre a la derecha (la flecha,
   el pin, el calendario o "abrir afuera"); al pasar el mouse, se corre */
.enlace__flecha { display: inline-flex; align-items: center; }
.enlace__icono { flex: none; display: block; }
.lugar__enlaces { display: flex; flex-wrap: wrap; column-gap: 32px; }
.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 y Dress code: "Ver datos" / "Ver ejemplos" despliegan lo de
   abajo (se abre de 0fr a 1fr). El hijo directo de .regalo__datos es el que
   se recorta (overflow hidden, min-height 0). */
.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__cuentas, .dress__ejemplos { overflow: hidden; min-height: 0; max-width: 560px; }
.dress__tableros { display: flex; flex-wrap: wrap; column-gap: 28px; }
.dress__tableros .enlace { margin-top: 22px; font-size: 0.72rem; }
.parte p + p { margin-top: 1.1em; }   /* un renglón de aire entre párrafos (Mujeres / Hombres) */
/* Regalos: una cuenta por desplegable, uno abajo del otro */
.regalo__desplegables { display: flex; flex-direction: column; align-items: flex-start; }
.regalo__desplegables .regalo__cuenta { align-self: stretch; }
.regalo__desplegables .regalo__abrir { margin-top: 22px; }
.regalo__desplegables .regalo__cuenta:first-child .regalo__abrir { margin-top: 36px; }
.regalo__lista { margin: 0; }
/* Una cuenta por moneda: Pesos, Dólares, Euros */
.regalo__moneda { margin: 72px 0 0; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; }
.regalo__moneda:first-child { margin-top: 32px; }
.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: 12px; 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; }
/* En el celu el moño y el regalo son dos canvas: se atenúa solo el de la
   parte que se abrió (las fotos tapan el moño; los datos, el regalo) */
@media (max-width: 899px) {
  .indice.regalo-abierto .linea--indice { opacity: 0.8; }
  .indice.abierto-dress-code .linea--indice:not(.linea--regalo),
  .indice.abierto-regalos .linea--regalo { opacity: 0.15; }
}
.regalo__copiar.copiado { background: var(--crema); color: var(--oscuro); border-color: var(--crema); }
/* Dress code: las fotos de ejemplo, chicas, en grilla (4 en la compu, 2 en
   el celu). Mientras no lleguen, cuadros vacíos con borde. */
.dress__fotos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding-top: 28px; }
.dress__foto { margin: 0; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; border: 1px solid var(--linea-clara); background: rgba(244, 236, 223, 0.04); }
.dress__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }   /* llenan la card sin deformarse; el recorte, un poco hacia arriba */
@media (max-width: 599px) {
  .dress__fotos { grid-template-columns: repeat(2, 1fr); }
  /* En el celu el CBU y el IBAN no entran al lado de la etiqueta: la
     etiqueta va arriba y el número con su "Copiar" en un renglón */
  .regalo__fila { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .regalo__fila dd { flex-wrap: nowrap; align-items: center; font-size: 0.98rem; }
}

@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: flex-start;   /* firma y crédito a la izquierda: a la derecha van los botones */
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px 48px;
  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__firma { font-family: var(--titulos); font-weight: var(--peso-titulos); font-size: 1.15rem; letter-spacing: 0.01em; }
.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) {
  /* Lugar para los dos botones, que en el celu van uno arriba del otro */
  .pie { flex-direction: column; align-items: center; text-align: center; padding-bottom: calc(max(24px, env(safe-area-inset-bottom)) + 48px + 10px + 48px + 24px); }
}

/* ── 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) {
  /* En el celu los dos van en columna en la esquina de abajo a la
     derecha: la música justo arriba del de bajar (lo pidió Pilar). El texto
     de la portada se angosta para no chocarlos (ver .portada__texto). */
  .controles { bottom: max(24px, env(safe-area-inset-bottom)); flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
  .bajar__pildora, .musica__pildora { width: 34px; height: 48px; }
  /* En la portada se ve solo la píldora: la palabra "Scroll" pisaría el
     texto centrado, y aparece cuando el barrido ya lo borró */
  .bajar__texto { opacity: var(--bajar-celu, 1); }
  /* Con relleno: claro sobre los fondos oscuros y marrón sobre los claros
   (el --oscuro que pone main.js según lo que tengan debajo), así se leen
   aunque pasen por encima de un texto */
  .bajar__pildora, .musica__pildora {
    background: var(--claro); color: var(--oscuro); border-color: var(--claro);
    transition: background 0.5s ease, color 0.5s ease, border-color 0.5s ease;
  }
  .bajar--oscuro .bajar__pildora, .musica--oscuro .musica__pildora { background: var(--oscuro); color: var(--claro); border-color: var(--oscuro); }
}
@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. En el celu van más grandes y recortadas (ver más abajo).
   */
.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); }
/* En el celu no van la fecha chiquita de arriba a la derecha ni el menú de
   Detalles (título y lista): con una sola columna, Dress code y Regalos
   están ahí abajo y el menú no suma (lo pidió Pilar). */
@media (max-width: 899px) {
  .barra__fecha, .indice__nav { display: none; }
}

/* Los dibujos del celu: los que Pilar redibujó sobre capturas del iPhone,
   medidos sobre esas capturas (390 px de ancho: 1 unidad del SVG = 0,1544vw).
   Cada canvas mide lo que el dibujo, más 24 px de holgura por lado.
   · portada: fija a la pantalla, desde arriba
   · ceremonia y Detalles: el "top" lo pone main.js (ubicarLineasCelu),
     respecto de "Cómo llegar" y de "Ver ejemplos"
   Los espacios de abajo (ceremonia, Dress code, Regalos) son los que había
   cuando se sacaron las capturas: no cambiarlos sin mover los dibujos. */
@media (max-width: 899px) {
  .linea--portada { left: calc(-7.28vw - 24px); top: calc(3.76vw - 24px); width: calc(118.13vw + 48px); height: calc(204.71vw + 48px); }
  .lugar { padding-bottom: 62vw; }
  .linea--lugar  { left: calc(-12.72vw - 24px); top: 0; width: calc(118.82vw + 48px); height: calc(75.95vw + 48px); }
  #dress-code { padding-bottom: calc(64px + 20vw); }
  #regalos { padding-bottom: calc(64px + 28vw); }
  .linea--indice { left: calc(-9.89vw - 24px); top: 0; width: calc(149.33vw + 48px); height: calc(124.86vw + 48px); }
}

/* class="revisar": lo provisorio que Sol y Mati tienen que revisar, en rojo
   a propósito para que lo encuentren. Sacarlo cuando lo aprueben. */
.revisar { color: #ff6b5e; }
.dress__fotos.revisar .dress__foto { border-color: #ff6b5e; }

/* 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; }
}