/* ============================================
   Mati & Bren — 10.10.2026
   Variables de identidad visual: cambiar acá
   adentro para ajustar el look de toda la página.
   ============================================ */

:root {
  /* Bloquea el "modo oscuro automático" que algunos navegadores
     (sobre todo Chrome/Android) aplican por su cuenta a páginas que
     no declaran su propio esquema de color — invierte fondos claros
     a oscuros y reinterpreta los colores, exactamente lo que pasaba
     en la captura. Esto NO es lo mismo que "@media
     (prefers-color-scheme: dark)" (esa regla solo actúa si nosotros
     la escribimos, y nunca lo hicimos) — es una reinterpretación más
     agresiva del navegador que "only light" bloquea por completo. */
  color-scheme: only light;

  --burgundy: #5A2E34;
  --beige: #F4EFE6;
  --cream: #F8F5EF;
  --offwhite: #FCFBF8;
  --brown: #6A5448;

  --font-script: 'Pinyon Script', cursive;
  --font-heading: 'Cormorant Garamond', serif;
  --font-body: 'Manrope', sans-serif;

  --space-sm: clamp(48px, 7vw, 68px);
  --space-md: clamp(64px, 10vw, 92px);
  --space-lg: clamp(96px, 16vw, 152px);
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--offwhite);
  color: var(--brown);
}

body {
  position: relative;
  font-family: var(--font-body);
  color: var(--brown);
  background-color: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- Grano de papel muy sutil, en toda la página ---------- */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.028;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Sistema de aparición al hacer scroll ----------
   Dos familias de clases, pensadas para combinarse:

   FORMA (qué hace): reveal--fade / --up / --left / --right /
   --scale / --up-scale / --blur / --clip — cada una define su
   propio estado inicial + qué propiedades transiciona.

   TIEMPO (cuándo/cuánto): --slow o --important alargan la
   duración; --d1 a --d6 escalonan el arranque (90ms a 540ms).

   Ejemplo: class="reveal reveal--scale reveal--slow reveal--d2"
   = aparece con escala sutil, en cámara lenta, empezando 180ms
   después de que el elemento entra en pantalla.

   Todas comparten el mismo easing (una desaceleración suave, sin
   rebote) y el mismo mecanismo de fondo: IntersectionObserver le
   agrega .is-visible una sola vez y deja de observar ese elemento
   — no vuelve a dispararse si se sube y se baja de nuevo. */
.reveal {
  --reveal-duration: 850ms;
  --reveal-delay: 0ms;
  transition-duration: var(--reveal-duration);
  transition-delay: var(--reveal-delay);
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal--fade { opacity: 0; transition-property: opacity; }
.reveal--fade.is-visible { opacity: 1; }

.reveal--up { opacity: 0; transform: translateY(20px); transition-property: opacity, transform; }
.reveal--up.is-visible { opacity: 1; transform: translateY(0); }

.reveal--left { opacity: 0; transform: translateX(-22px); transition-property: opacity, transform; }
.reveal--left.is-visible { opacity: 1; transform: translateX(0); }

.reveal--right { opacity: 0; transform: translateX(22px); transition-property: opacity, transform; }
.reveal--right.is-visible { opacity: 1; transform: translateX(0); }

.reveal--scale { opacity: 0; transform: scale(0.96); transition-property: opacity, transform; }
.reveal--scale.is-visible { opacity: 1; transform: scale(1); }

.reveal--up-scale { opacity: 0; transform: translateY(14px) scale(0.97); transition-property: opacity, transform; }
.reveal--up-scale.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Microanimación de una sola vez, un poco más marcada que --scale
   (para el ícono de canciones) — sigue sin rebote, solo un rango
   de escala/rotación más generoso para que se sienta con un poco
   más de personalidad. */
.reveal--icon-pop { opacity: 0; transform: scale(0.55) rotate(-10deg); transition-property: opacity, transform; }
.reveal--icon-pop.is-visible { opacity: 1; transform: scale(1) rotate(0deg); }

.reveal--blur { opacity: 0; filter: blur(7px); transition-property: opacity, filter; }
.reveal--blur.is-visible { opacity: 1; filter: blur(0); }

/* Se "descubre" con un barrido sutil de derecha a izquierda — un
   recorte parcial (no total) a propósito: un clip-path al 100% hace
   que el navegador calcule intersección CERO para ese elemento, y
   el IntersectionObserver nunca llega a dispararse (probado). Con
   un recorte parcial la mayor parte ya es detectable desde el
   principio, y el efecto final es más sutil de todos modos — más
   acorde a "diferencias sutiles" entre variantes. */
.reveal--clip {
  opacity: 1;
  transform: scale(1.015);
  clip-path: inset(0 14% 0 0);
  transition-property: clip-path, transform;
}
.reveal--clip.is-visible { clip-path: inset(0 0 0 0); transform: scale(1); }

/* ---- Tiempo: duración ---- */
.reveal--slow, .reveal--important { --reveal-duration: 1250ms; }

/* ---- Tiempo: retraso escalonado (90ms entre pasos) ---- */
.reveal--d1 { --reveal-delay: 90ms; }
.reveal--d2 { --reveal-delay: 180ms; }
.reveal--d3 { --reveal-delay: 270ms; }
.reveal--d4 { --reveal-delay: 360ms; }
.reveal--d5 { --reveal-delay: 450ms; }
.reveal--d6 { --reveal-delay: 540ms; }

/* ---- Líneas/trazos que "crecen" en vez de aparecer de golpe ---- */
.reveal--grow-v {
  transform: scaleY(0);
  transform-origin: top center;
  transition-property: transform, opacity;
  opacity: 0.01; /* evita el "salto" de layout mientras mide 0 */
}
.reveal--grow-v.is-visible { transform: scaleY(1); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--fade, .reveal--up, .reveal--left, .reveal--right,
  .reveal--scale, .reveal--up-scale, .reveal--icon-pop, .reveal--blur, .reveal--clip,
  .reveal--grow-v {
    opacity: 1; transform: none; filter: none; clip-path: none; transition: none;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Botones ---------- */
.btn {
  display: inline-block;
  appearance: none; -webkit-appearance: none;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-decoration: none;
  text-transform: uppercase;
  padding: 16px 34px;
  border-radius: 4px;
  border: 1px solid var(--burgundy);
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.btn--primary { background-color: var(--burgundy); color: var(--offwhite); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(90,46,52,0.24); }
/* El fondo transparente acá es intencional (botón "outline"): deja
   ver el fondo de la sección que lo contiene, que ya está fijado
   explícitamente en cada caso — no es un hueco sin color definido,
   revela un color que ya está bloqueado más arriba. */
.btn--outline { background-color: transparent; color: var(--burgundy); }
.btn--outline:hover { background-color: var(--burgundy); color: var(--offwhite); }
.btn:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }

/* ============ PORTADA ============
   FIJADO DURANTE EL SCROLL — .hero es position:fixed (nunca
   background-attachment:fixed) y .hero-spacer reserva su lugar en
   el flujo normal. Las secciones siguientes, opacas y con z-index
   mayor, "suben y tapan" la portada al scrollear. Se desactiva con
   prefers-reduced-motion.

   UNA SOLA FOTO — versión restaurada (sin collage de 3 fotos):
   dos capas con la MISMA imagen (images/hero.jpg). La de atrás
   (.hero__bg-blur) va a sangre completa, muy desenfocada, y solo
   se nota en escritorio en los bordes. La de adelante
   (.hero__bg-sharp) es la protagonista: en mobile ocupa toda la
   pantalla (cover); en escritorio se angosta a una columna con la
   proporción real de la foto (2:3), centrada, con los bordes
   fundidos hacia la capa desenfocada mediante una máscara de
   degradado — así nunca se ve como una franja recortada. */
.hero {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  z-index: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  background-color: var(--burgundy);
}
.hero-spacer {
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
}
@media (prefers-reduced-motion: reduce) {
  .hero { position: relative; }
  .hero-spacer { display: none; }
}

.hero__bg-blur {
  position: absolute;
  top: -40px; right: -40px; bottom: -40px; left: -40px;
  background-image: url('images/hero.jpg');
  background-size: cover;
  background-position: center 30%;
  filter: blur(46px) brightness(0.85) saturate(1.05);
  animation: heroBlurBreathe 40s ease-in-out infinite alternate;
}
@keyframes heroBlurBreathe {
  from { transform: scale(1); }
  to { transform: scale(1.02); }
}
.hero__bg-sharp {
  position: absolute;
  inset: 0;
  background-image: url('images/hero.jpg');
  background-size: cover;
  background-position: center 22%;
  filter: brightness(0.98) saturate(0.98);
}
@media (min-width: 900px) {
  .hero__bg-sharp {
    inset: auto;
    left: 50%;
    top: 0;
    height: 100%;
    aspect-ratio: 2 / 3;
    transform: translateX(-50%);
    background-position: center 8%;
    -webkit-mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
    mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg-blur { animation: none; transform: scale(1); }
}

.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(24,13,15,0.08) 0%,
    rgba(32,17,19,0.16) 40%,
    rgba(40,21,24,0.40) 72%,
    rgba(36,19,21,0.74) 100%);
}
.hero__content {
  position: relative; z-index: 2;
  width: 100%;
  padding: 0 24px 56px;
  text-align: center; color: var(--offwhite);
}
.hero__names {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(3.6rem, 17vw, 6.4rem); line-height: 1;
  margin-bottom: 18px;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.hero__tagline {
  font-family: var(--font-heading); font-style: italic; font-weight: 400;
  font-size: clamp(1rem, 3.6vw, 1.2rem); letter-spacing: 0.02em;
  color: var(--beige); opacity: 0.94; margin-bottom: 46px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.2);
}
.hero__scroll { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; }
.hero__scroll-line {
  width: 1px; height: 34px; background: rgba(252,251,248,0.55);
  animation: scrollPulse 2.4s ease-in-out infinite;
}
.hero__scroll-chevron {
  width: 9px; height: 9px;
  border-right: 1px solid rgba(252,251,248,0.55);
  border-bottom: 1px solid rgba(252,251,248,0.55);
  transform: rotate(45deg);
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.55; }
  50% { transform: scaleY(0.55); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line { animation: none; }
}

/* ============ CUENTA REGRESIVA ============
   Composición editorial continua: cada etapa (eyebrow, fecha, días,
   hs:min:seg, frase) se conecta con la siguiente mediante un
   "conector" — un hilo vertical fino con degradado, nunca un salto
   vacío. Horas/min/seg llevan un aro fino (como en la referencia).
   Las enredaderas laterales solo aparecen en escritorio, donde hay
   ancho de sobra: usan el mismo lenguaje botánico que la sección
   de Ceremonia, pero más tenues, para no competir. */
.countdown {
  position: relative;
  z-index: 1;
  background-color: var(--beige);
  color: var(--brown);
  padding: var(--space-lg) 24px;
  text-align: center;
  overflow: hidden;
}
.countdown__vine {
  display: none;
  position: absolute;
  top: 8%;
  width: 70px;
  height: 84%;
  opacity: 0.09;
  pointer-events: none;
}
.countdown__vine--left { left: 2%; }
.countdown__vine--right { right: 2%; transform: scaleX(-1); }
@media (min-width: 900px) {
  .countdown__vine { display: block; }
}

.countdown__inner {
  position: relative;
  z-index: 1;
  max-width: 520px;
  margin: 0 auto;
}

.countdown__eyebrow-row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: clamp(16px, 2.5vw, 20px);
}
.countdown__eyebrow-tick { width: 16px; height: 1px; background: var(--burgundy); opacity: 0.3; }
.countdown__eyebrow {
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--brown); opacity: 0.8; margin: 0;
}

.countdown__date {
  font-family: var(--font-heading); font-weight: 600;
  font-size: clamp(2.9rem, 13.5vw, 6.6rem);
  letter-spacing: 0.03em; line-height: 1;
  color: var(--burgundy);
}

.countdown__connector {
  width: 1px; height: clamp(30px, 5vw, 48px);
  background: linear-gradient(to bottom, transparent, rgba(90,46,52,0.32), transparent);
  margin: 0 auto;
}
.countdown__connector--long { height: clamp(44px, 7vw, 68px); }

/* AROS DE PROGRESO — SVG real, no decorativo.
   Cada .ring contiene un <svg> con dos <circle>: uno de fondo muy
   tenue (.ring__track) y uno de progreso bordó (.ring__progress),
   rotado -90deg para que arranque arriba. El contenido (número +
   etiqueta) se centra con position:absolute + translate(-50%,-50%)
   sobre el círculo — centrado matemático real, no aproximado con
   flex, así que funciona igual con 1 o 2 dígitos sin correcciones
   manuales. El progreso real (stroke-dasharray/dashoffset) lo
   calcula script.js en cada frame. */
.ring { position: relative; }
.ring__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.ring__track { fill: none; stroke: rgba(90,46,52,0.13); }
.ring__progress {
  fill: none; stroke: var(--burgundy);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.2s linear;
}
/* Transición mucho más lenta, solo durante el primer trazo del aro
   grande de días al entrar en pantalla (ver script.js) — después se
   saca esta clase y vuelve a la transición rápida de siempre. */
.ring__progress--drawing {
  transition: stroke-dashoffset 1.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .ring__progress { transition: stroke-dashoffset 0.6s ease; }
}
.ring__content {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  width: 100%;
}

/* El "mecanismo" agrupa el aro de días + hs:min:seg como una sola
   unidad secundaria, compacta, separada de la fecha (el elemento
   dominante de arriba) por el conector largo. */
.countdown__mechanism {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4vw, 30px);
}

.ring--days {
  width: clamp(122px, 27vw, 168px);
  height: clamp(122px, 27vw, 168px);
  margin: 0 auto;
}
.ring--days .ring__track, .ring--days .ring__progress { stroke-width: 2.1; }
.ring--days .ring__number {
  font-size: clamp(2.6rem, 10.5vw, 3.5rem);
  line-height: 0.9;
}
.ring--days .ring__label {
  font-size: 10px;
  letter-spacing: 0.26em;
  margin-top: 6px;
}

.countdown__sub {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3.5vw, 30px);
}
.countdown__sub-sep {
  font-family: var(--font-heading); font-size: clamp(1.2rem, 4.5vw, 1.5rem);
  color: var(--burgundy); opacity: 0.3;
}

.ring--sub {
  width: clamp(64px, 14vw, 80px);
  height: clamp(64px, 14vw, 80px);
}
.ring--sub .ring__track, .ring--sub .ring__progress { stroke-width: 2.4; }
.ring__number {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(1.4rem, 5.2vw, 1.75rem);
  color: var(--burgundy); line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.ring__number.tick { animation: secTick 0.5s ease; }
@keyframes secTick {
  0% { opacity: 0.45; transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ring__label {
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--brown); margin-top: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .ring__number.tick { animation: none; }
}

.countdown__message-mark { margin-bottom: 22px; }
.countdown__message-text {
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(1.15rem, 4vw, 1.5rem); line-height: 1.6;
  color: var(--burgundy); max-width: 460px; margin: 0 auto;
}

/* ============ CEREMONIA Y FIESTA ============ */
.ceremony {
  position: relative;
  z-index: 1;
  background-color: var(--cream);
  color: var(--brown);
  padding: var(--space-md) 24px;
  text-align: center;
  overflow: hidden;
}
.ceremony__decor {
  position: absolute;
  top: -8%;
  right: -6%;
  width: 220px;
  height: 130%;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.ceremony__card {
  position: relative;
  z-index: 1;
  max-width: 420px; margin: 0 auto;
  background-color: var(--offwhite);
  border: 1.5px solid var(--burgundy);
  border-radius: 3px;
  padding: 44px 32px 0;
  overflow: hidden;
}
.ceremony__rings { display: block; margin: 0 auto 22px; }
.ceremony__title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(2.1rem, 7.5vw, 2.85rem); line-height: 1.12;
  color: var(--burgundy); margin-bottom: clamp(36px, 6.5vw, 54px);
}

.ceremony__date-block {
  display: flex; align-items: baseline; justify-content: center;
  gap: 16px; margin-bottom: 26px;
}
.ceremony__day {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(3rem, 11vw, 3.8rem);
  color: var(--burgundy); line-height: 0.85;
}
.ceremony__date-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.ceremony__month { font-family: var(--font-heading); font-style: italic; font-size: 1.2rem; color: var(--burgundy); }
.ceremony__year { font-size: 11.5px; letter-spacing: 0.16em; color: var(--brown); margin-top: 3px; }

.ceremony__divider { height: 1px; background: rgba(90,46,52,0.15); margin-bottom: 24px; }

.ceremony__row {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-size: 15.5px; color: var(--brown); margin-bottom: 20px;
}
.ceremony__row:last-of-type { margin-bottom: 30px; }
.ceremony__icon { width: 19px; height: 19px; flex-shrink: 0; }

.ceremony__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 -32px; padding: 18px 32px;
  border-top: 1px solid rgba(90,46,52,0.15);
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--burgundy); text-decoration: none;
  transition: background 0.3s ease, gap 0.3s ease;
}
.ceremony__cta:hover { background: rgba(90,46,52,0.05); gap: 12px; }
.ceremony__cta-arrow { width: 13px; height: 13px; transition: transform 0.3s ease; }
.ceremony__cta:hover .ceremony__cta-arrow { transform: translateX(3px); }
.ceremony__cta:focus-visible { outline: 2px solid var(--burgundy); outline-offset: -2px; }

.ceremony__closing {
  position: relative; z-index: 1;
  font-family: var(--font-heading); font-style: italic; font-size: 18px;
  color: var(--burgundy); margin-top: clamp(28px, 5vw, 40px);
}

/* ============ GALERÍA + INSTAGRAM ============
   Una sola sección: Instagram arriba (ícono, usuario, texto, botón)
   y el carrusel debajo, con poco espacio entre ambos para que se
   sienta unificado. Antes eran dos secciones separadas (ver punto 6).

   BUG DEL CARRUSEL — causa real: overflow:hidden estaba en
   .gallery__track (el elemento que se transforma) en vez de en
   .gallery__carousel. El track, al no tener ancho propio explícito,
   toma el ancho de su contenedor y se recorta A SÍ MISMO antes de
   que el translateX pueda revelar el resto — por eso solo se veía
   la primera foto. Ahora overflow:hidden vive en .gallery__carousel
   (que no se mueve) y .gallery__track queda libre para ser tan
   ancho como sus 6 slides (600%) y desplazarse dentro de esa
   ventana fija. */
.gallery {
  position: relative;
  z-index: 1;
  background-color: var(--beige);
  background-image: url('images/paper-embossed.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: multiply;
  color: var(--brown);
  padding: var(--space-md) 0;
  text-align: center;
  overflow: hidden;
}
.gallery__content { position: relative; z-index: 1; }

.gallery__ig-icon {
  width: clamp(38px, 6vw, 54px);
  height: clamp(38px, 6vw, 54px);
  margin: 0 auto clamp(18px, 3vw, 24px);
}
.gallery__ig-handle {
  font-family: var(--font-heading); font-size: clamp(1.35rem, 5.2vw, 1.6rem);
  color: var(--burgundy); margin-bottom: 16px;
}
.gallery__ig-lead {
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(1.15rem, 4.4vw, 1.4rem);
  color: var(--burgundy);
  max-width: 320px; margin: 0 auto 12px;
}
.gallery__ig-text {
  font-size: 14.5px; line-height: 1.7; max-width: 380px;
  margin: 0 auto 26px; padding: 0 24px;
}
.gallery__ig-btn { margin-bottom: clamp(40px, 7vw, 56px); }
@media (min-width: 700px) {
  .gallery__ig-lead { white-space: nowrap; max-width: none; font-size: 1.55rem; }
  .gallery__ig-text { white-space: nowrap; max-width: none; font-size: 15.5px; }
}

.gallery__frame {
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(26px, 5vw, 40px) clamp(14px, 3vw, 26px);
  background-color: var(--cream);
  border: 1px solid rgba(90,46,52,0.16);
  border-radius: 4px;
}
.gallery__carousel {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding: 0 46px;
}
.gallery__viewport {
  overflow: hidden;
  border-radius: 3px;
}
.gallery__track {
  display: flex;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
  .gallery__track { transition: none; }
}
.gallery__slide {
  flex: 0 0 100%;
  min-width: 100%;
  aspect-ratio: 3 / 4;
  background-color: var(--beige);
}
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  appearance: none; -webkit-appearance: none;
  background-color: var(--offwhite);
  border: 1px solid rgba(90,46,52,0.22);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.25s ease;
  z-index: 2;
  padding: 0;
}
.gallery__arrow:hover { background-color: var(--burgundy); }
.gallery__arrow:hover .gallery__arrow-icon { stroke: var(--offwhite); }
.gallery__arrow--prev { left: 0; }
.gallery__arrow--next { right: 0; }
.gallery__arrow-icon { width: 15px; height: 15px; stroke: var(--burgundy); transition: stroke 0.25s ease; }
.gallery__arrow:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }

.gallery__dots { display: flex; justify-content: center; gap: 9px; margin-top: 22px; }
.gallery__dot {
  width: 6px; height: 6px; border-radius: 50%;
  appearance: none; -webkit-appearance: none;
  background-color: rgba(90,46,52,0.25);
  border: none; cursor: pointer; padding: 0;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.gallery__dot.is-active { background-color: var(--burgundy); transform: scale(1.5); }
.gallery__dot:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }

/* ============ RSVP ============ */
.rsvp { position: relative; z-index: 1; background-color: var(--offwhite); color: var(--brown); padding: var(--space-sm) 24px; text-align: center; }
.rsvp__eyebrow { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brown); margin-bottom: 14px; }
.rsvp__title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(1.9rem, 6.5vw, 2.4rem); color: var(--burgundy);
  margin-bottom: 18px;
}
.rsvp__text { font-size: 15.5px; line-height: 1.7; max-width: 360px; margin: 0 auto 10px; }
.rsvp__text-sub {
  font-family: var(--font-heading); font-style: italic;
  font-size: 17px; color: var(--burgundy);
  margin: 0 auto 28px;
}
@media (min-width: 700px) {
  .rsvp__text { white-space: nowrap; max-width: none; font-size: 16.5px; }
}

/* ============ LUNA DE MIEL ============ */
.gift {
  position: relative; z-index: 1;
  background-color: var(--cream);
  background-image: linear-gradient(rgba(248,245,239,0.55), rgba(248,245,239,0.55)), url('images/paper-texture.jpg');
  background-size: cover;
  background-position: center;
  color: var(--brown);
  padding: var(--space-sm) 24px;
  text-align: center;
}
.gift__title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(1.9rem, 6.5vw, 2.4rem); color: var(--burgundy);
  margin-top: 6px;
  margin-bottom: 16px;
}
.gift__text { font-size: 15px; line-height: 1.65; max-width: 340px; margin: 0 auto 24px; }

/* ============ DRESS CODE ============ */
.dresscode { position: relative; z-index: 1; background-color: var(--offwhite); color: var(--brown); padding: var(--space-sm) 24px; text-align: center; }
.dresscode__icon {
  width: clamp(38px, 6vw, 54px);
  height: clamp(38px, 6vw, 54px);
  margin: 0 auto clamp(18px, 3vw, 24px);
  opacity: 0.88;
}
.dresscode__eyebrow { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brown); margin-bottom: 18px; }
.dresscode__badge {
  display: inline-block;
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(1.35rem, 5vw, 1.75rem);
  color: var(--burgundy);
  padding: 14px 36px;
  border: 1px solid rgba(90,46,52,0.28);
  border-radius: 999px;
}

/* ============ BOTÓN FIJO DE MÚSICA ============
   position:fixed real — siempre en la misma esquina de la pantalla,
   sin importar el scroll (a diferencia de sticky, que solo se pega
   dentro de su propio contenedor). Los dos íconos (play/pausa) están
   los dos en el DOM siempre; solo se alterna cuál se ve con opacity,
   así el cambio es una transición suave, no un parpadeo. El anillo
   fino alrededor pulsa muy despacio solo mientras suena — el mismo
   lenguaje de líneas finas que el resto del sitio, nada de un
   "reproductor" tipo app. El motor real es un <audio> nativo (ver
   script.js) — este bloque es puramente visual. */
.music-btn {
  position: fixed;
  right: clamp(16px, 4vw, 28px);
  bottom: clamp(16px, 4vw, 28px);
  z-index: 500;
  width: 52px; height: 52px;
  border-radius: 50%;
  appearance: none; -webkit-appearance: none;
  background-color: var(--offwhite);
  color: var(--burgundy);
  border: 1px solid rgba(90,46,52,0.22);
  box-shadow: 0 6px 20px rgba(36,19,21,0.16);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}
.music-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(36,19,21,0.22); }
.music-btn:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }

.music-btn__icon {
  position: absolute;
  width: 20px; height: 20px;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.music-btn__icon--pause { opacity: 0; transform: scale(0.85); }
.music-btn.is-playing .music-btn__icon--play { opacity: 0; transform: scale(0.85); }
.music-btn.is-playing .music-btn__icon--pause { opacity: 1; transform: scale(1); }

.music-btn__ring {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(90,46,52,0.4);
  opacity: 0;
  pointer-events: none;
}
.music-btn.is-playing .music-btn__ring {
  animation: musicPulse 2.6s ease-out infinite;
}
@keyframes musicPulse {
  0%   { transform: scale(0.85); opacity: 0.55; }
  75%  { transform: scale(1.28); opacity: 0; }
  100% { transform: scale(1.28); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .music-btn.is-playing .music-btn__ring { animation: none; opacity: 0.4; }
}

.music-btn__hint {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--offwhite);
  border: 1px solid rgba(90,46,52,0.16);
  color: var(--burgundy);
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 7px 13px;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(36,19,21,0.12);
  opacity: 0;
  animation: hintFade 0.6s ease 1.4s forwards;
}
.music-btn__hint.is-hidden { animation: none; opacity: 0; transition: opacity 0.3s ease; }
@keyframes hintFade {
  from { opacity: 0; transform: translateY(-50%) translateX(4px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .music-btn__hint { animation: none; opacity: 1; }
}

/* ============ SUGERENCIA DE CANCIONES ============ */
.songs { position: relative; z-index: 1; background-color: var(--cream); color: var(--brown); padding: var(--space-sm) 24px; text-align: center; }
.songs__icon {
  width: clamp(34px, 5.5vw, 44px);
  height: clamp(34px, 5.5vw, 44px);
  margin: 0 auto clamp(20px, 3vw, 26px);
  opacity: 0.88;
}
.songs__title {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(1.4rem, 5.6vw, 1.9rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--burgundy);
  line-height: 1.35;
  max-width: 360px;
  margin: 0 auto 18px;
}
.songs__text {
  font-size: 15px; line-height: 1.65;
  max-width: 360px; margin: 0 auto 28px;
}
@media (min-width: 700px) {
  .songs__text { white-space: nowrap; max-width: none; font-size: 16px; }
}

/* ============ CIERRE ============
   Una sola capa continua (background-size:cover, sin repetir)
   cubre TODA la sección — igual técnica que ya funciona bien en
   Instagram/galería con la textura de papel. mix-blend-mode:
   multiply funde el fondo blanco original de la imagen con el
   beige de la sección, así no queda un rectángulo visible ni se
   percibe dónde "empieza" la textura. Nada de recortes en las
   esquinas: al ser una sola imagen de fondo, no hay costura que
   notar ni repetición mecánica que evitar. */
.closing {
  position: relative; z-index: 1; overflow: hidden;
  background-color: var(--beige);
  color: var(--brown);
  padding: var(--space-lg) 24px;
  text-align: center;
}
.closing::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('images/leaves-pattern.jpg');
  background-size: cover;
  background-position: 30% 20%;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}
.closing__content { position: relative; z-index: 1; }
.closing__mark { margin-bottom: 30px; }
.closing__names {
  font-family: var(--font-script);
  font-size: clamp(3.1rem, 13vw, 4.6rem);
  color: var(--burgundy); margin-bottom: 22px;
}
.closing__text {
  font-family: var(--font-heading); font-style: italic;
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  color: var(--brown); max-width: 380px; margin: 0 auto;
}

/* ============ MODAL — LUNA DE MIEL ============ */
.modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; }
.modal.is-open { display: flex; }
.modal__backdrop { position: absolute; inset: 0; background-color: rgba(26,15,17,0.55); }
.modal__panel {
  position: relative; background-color: var(--offwhite);
  color: var(--brown);
  border: 1px solid rgba(90,46,52,0.14);
  border-radius: 10px; padding: 42px 30px; max-width: 380px; width: 100%; text-align: center;
}
.modal__close {
  position: absolute; top: 14px; right: 16px;
  background-color: transparent; border: none;
  appearance: none; -webkit-appearance: none;
  font-size: 24px; line-height: 1; color: var(--brown); cursor: pointer;
}
.modal__close:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 2px; }
.modal__title { font-family: var(--font-heading); color: var(--burgundy); font-size: 1.6rem; margin-bottom: 26px; }
.modal__data { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.modal__data div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(90,46,52,0.12); padding-bottom: 10px; }
.modal__data dt { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brown); }
.modal__data dd { font-size: 14px; color: var(--burgundy); font-weight: 500; text-align: right; }

/* ============ RESPONSIVE — tablet ============ */
@media (min-width: 700px) {
  .gallery__carousel { max-width: 520px; }
}

/* ============ RESPONSIVE — desktop ============ */
@media (min-width: 1024px) {
  .rsvp__text, .gift__text, .gallery__ig-text { font-size: 16px; }

  .countdown__inner { max-width: 620px; }
  .countdown__date { font-size: 4.6rem; }
  .countdown__connector { height: 58px; }
  .gallery__frame { max-width: 640px; padding: 48px 40px; }

  .ceremony__card { max-width: 580px; padding: 56px 48px 0; }
  .ceremony__title { font-size: 3.1rem; margin-bottom: 60px; }
  .ceremony__rings { transform: scale(1.15); margin-bottom: 30px; }
  .ceremony__row { font-size: 17px; }
  .ceremony__decor { width: 300px; right: -4%; }

  .gallery__carousel { max-width: 600px; padding: 0 60px; }
}

/* ============================================
   RESTRICCIÓN DE ESCRITORIO (1024px+)
   ============================================
   .desktop-lock existe siempre en el HTML pero está oculta por
   defecto (mobile/tablet). Desde 1024px se invierte: .invitation
   (todo el sitio real) desaparece por completo y .desktop-lock pasa
   a ocupar toda la pantalla, fija, sin scroll posible — no queda
   contenido "escondido" debajo. Nada de esto toca ningún estilo por
   debajo de 1024px: la invitación mobile/tablet permanece intacta. */
.desktop-lock { display: none; background-color: var(--beige); color: var(--brown); }

@media (min-width: 1024px) {
  html, body { overflow: hidden; }
  .invitation { display: none; }

  .desktop-lock {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
  }
}

.desktop-lock__inner {
  max-width: 420px;
  text-align: center;
}
.desktop-lock__names {
  font-family: var(--font-script);
  font-size: 2.75rem;
  color: var(--burgundy);
  margin-bottom: 22px;
}
.desktop-lock__rule {
  width: 40px; height: 1px;
  background-color: var(--burgundy);
  opacity: 0.35;
  margin: 0 auto 28px;
}
.desktop-lock__title {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--burgundy);
  margin-bottom: 16px;
}
.desktop-lock__text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--brown);
  margin-bottom: 36px;
}
.desktop-lock__qr-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--offwhite);
  border: 1px solid rgba(90,46,52,0.16);
  border-radius: 8px;
  /* 26px de margen real alrededor del QR: cubre la "quiet zone" que
     necesita un lector de códigos para reconocerlo de forma
     confiable (el estándar recomienda ~4 módulos de margen; a este
     tamaño de QR, 26px lo cumple con holgura). */
  padding: 26px;
  margin-bottom: 30px;
}
.desktop-lock__qr {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.desktop-lock__qr-note {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--brown);
  text-align: center;
  padding: 0 6px;
}
.desktop-lock__footer {
  font-family: var(--font-body);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brown);
  opacity: 0.8;
}