/* =========================================================
   Anita & Lucho
   Traducido de los frames de Figma "Anita & Lucho - Web" (mobile, 390px)
   y "Desktop" (columna de 508px).

   Escala: cada sección define --s = 1px del diseño, medido contra el
   ancho de la columna. TODO (medidas y tipografía) se escribe en
   calc(N * var(--s)), así la página entera se estira en proporción,
   igual que el frame de Figma.

   Las piezas decorativas se exportaron de Figma ya rotadas y recortadas,
   así que se ubican con la caja que ocupan en el diseño, sin transformar.
   ========================================================= */

:root{
  --bordo:    #34070b;
  --bordo-2:  #8f7578;
  --bordo-3:  #ede4e7;
  --blanco:   #fdf7fa;
  --bordo-4:  #c6b4b6;
  --fucsia:   #de2e5a;
  --input-borde: #f0e1d5;
  --texto-check: #3d262a;

  /* Abyssinica SIL sólo existe en Regular: nunca pedirle 500 ni 600,
     el navegador la falsea en negrita y se ve sucia. */
  --serif: "Abyssinica SIL", Georgia, serif;
  --sans:  "Ancizar Sans", system-ui, -apple-system, sans-serif;

  --base: 390;      /* ancho de referencia del diseño */
  --col:  480px;    /* ancho máximo de la columna en mobile */

  --curva: cubic-bezier(.22, 1, .36, 1);        /* entrada que frena suave */
  --rebote: cubic-bezier(.34, 1.56, .64, 1);    /* para los confetti */
}

*, *::before, *::after{ box-sizing: border-box; }

/* El clip va en html: es ahí donde vive la barra de scroll. Evita que una
   pieza que asoma fuera de la ventana genere scroll lateral, sobre todo
   mientras entra. No recorta nada que entre en pantalla. */
html{
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body{
  margin: 0;
  background: var(--blanco);
  color: var(--bordo);
  font-family: var(--sans);
  font-size: 17.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;   /* evita que una pieza en movimiento genere scroll lateral */
}

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

.page{
  position: relative;
  container-type: inline-size;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  overflow-x: clip;
  background-color: var(--blanco);
  background-image: url("img/textura-tile.webp?v=5");
  background-repeat: repeat;
  background-size: 322.08px 480px;
}

.fondo, .resplandor{ display: none; }   /* sólo desktop */

/* =========================================================
   Secciones
   ========================================================= */
.sec{
  position: relative;
  width: 100%;
  --s: calc(100cqw / var(--base));
}

.inner{
  position: relative;
  z-index: 1;                    /* el texto siempre sobre las piezas */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.grupo-8, .grupo-12, .grupo-20, .grupo-24{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.grupo-8 { gap: calc( 8 * var(--s)); }
.grupo-12{ gap: calc(12 * var(--s)); }
.grupo-20{ gap: calc(20 * var(--s)); }
.grupo-24{ gap: calc(24 * var(--s)); }

/* =========================================================
   Piezas decorativas y su entrada
   --x --y --w --h: la caja que ocupan en el diseño
   --dx --dy --sc:  desde dónde entran
   --d:             cuánto esperan antes de entrar
   ========================================================= */
.deco{ position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.p{
  position: absolute;
  left:   calc(var(--x) * var(--s));
  top:    calc(var(--y) * var(--s));
  width:  calc(var(--w) * var(--s));
  height: calc(var(--h) * var(--s));
  max-width: none;
}

/* Sin JS las piezas se ven quietas y en su lugar */
.js .p{
  opacity: 0;
  transform: translate3d(calc(var(--dx, 0) * var(--s)), calc(var(--dy, 0) * var(--s)), 0)
             scale(var(--sc, 1));
  transition: opacity 1.15s var(--curva) var(--d, 0s),
              transform 1.15s var(--curva) var(--d, 0s);
}
.js .p--cf{
  transition: opacity .6s ease-out var(--d, 0s),
              transform .78s var(--rebote) var(--d, 0s);
}
/* Las polaroids grandes vienen de más lejos, así que tardan un poco más.
   Curva menos abrupta que la del resto: con --curva el 93% del recorrido se
   gastaba en la primera mitad y la foto parecía frenar de golpe.            */
.js .p--hero-foto,
.js .p--cierre-foto{
  transition: opacity 1.27s ease-out var(--d, 0s),
              transform 1.27s cubic-bezier(.215,.61,.355,1) var(--d, 0s);
}
/* La del cierre cierra la secuencia, después de la línea y la firma */
.js .p--cierre-foto{ --d: .5s; }
.js .visible .p{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.p--hero-foto{ --x:-8.99; --y:-5.61; --w:406.24; --h:466.71; --dx:-60; --dy:20; --sc:1.0; --d:0.00s; }
.p--hero-cf1{ --x:349.19; --y:39.29; --w:37.43; --h:37.83; --dx:11; --dy:16; --sc:0.45; --d:0.34s; }
.p--hero-cf2{ --x:-15.78; --y:317.37; --w:37.43; --h:37.83; --dx:-11; --dy:-14; --sc:0.45; --d:0.44s; }
.p--hero-cf3{ --x:-0.09; --y:89.3; --w:36.11; --h:37.99; --dx:-11; --dy:16; --sc:0.45; --d:0.54s; }
.p--hero-cf4{ --x:367.9; --y:286.7; --w:37.43; --h:37.83; --dx:11; --dy:-14; --sc:0.45; --d:0.64s; }
.p--hero-cf5{ --x:373.7; --y:51.47; --w:37.43; --h:37.83; --dx:11; --dy:16; --sc:0.45; --d:0.74s; }
.p--cele-2{ --x:212.97; --y:12.62; --w:277.29; --h:277.04; --dx:34; --dy:28; --sc:1.0; --d:0.12s; }
.p--cele-1{ --x:-63.63; --y:79.35; --w:288.62; --h:303.29; --dx:-34; --dy:28; --sc:1.0; --d:0.12s; }
.p--cele-cf1{ --x:262.38; --y:279.93; --w:34.34; --h:34.71; --dx:11; --dy:16; --sc:0.45; --d:0.34s; }
.p--cele-cf2{ --x:28.48; --y:350.47; --w:33.68; --h:34.05; --dx:-11; --dy:-14; --sc:0.45; --d:0.44s; }
.p--cele-cf3{ --x:138.07; --y:93.05; --w:33.68; --h:34.05; --dx:-11; --dy:16; --sc:0.45; --d:0.54s; }
.p--cele-cf4{ --x:157.06; --y:77.31; --w:35.03; --h:35.41; --dx:-11; --dy:-14; --sc:0.45; --d:0.64s; }
.p--dress-2{ --x:171.42; --y:40.16; --w:307.55; --h:346.81; --dx:34; --dy:28; --sc:1.0; --d:0.12s; }
.p--dress-1{ --x:-91.24; --y:94.87; --w:363.28; --h:390.74; --dx:-34; --dy:28; --sc:1.0; --d:0.12s; }
.p--dress-cf1{ --x:188.19; --y:373.1; --w:37.43; --h:37.83; --dx:11; --dy:16; --sc:0.45; --d:0.34s; }
.p--dress-cf2{ --x:115.07; --y:103.42; --w:37.43; --h:37.83; --dx:-11; --dy:-14; --sc:0.45; --d:0.44s; }
.p--dress-cf3{ --x:328.42; --y:410.93; --w:37.43; --h:37.83; --dx:11; --dy:16; --sc:0.45; --d:0.54s; }
.p--reg-2{ --x:100.98; --y:80.13; --w:381.76; --h:381.76; --dx:34; --dy:28; --sc:1.0; --d:0.12s; }
.p--reg-1{ --x:-99.39; --y:4.12; --w:307.66; --h:303.22; --dx:-34; --dy:28; --sc:1.0; --d:0.12s; }
.p--reg-cf1{ --x:61.69; --y:296.8; --w:36.68; --h:37.08; --dx:-11; --dy:16; --sc:0.45; --d:0.34s; }
.p--reg-cf2{ --x:319.02; --y:403.76; --w:37.43; --h:37.83; --dx:11; --dy:-14; --sc:0.45; --d:0.44s; }
.p--asis-1{ --x:-79.57; --y:74.7; --w:345.36; --h:379.71; --dx:-34; --dy:28; --sc:1.0; --d:0.12s; }
.p--asis-2{ --x:173.66; --y:35.91; --w:306.19; --h:337.48; --dx:34; --dy:28; --sc:1.0; --d:0.12s; }
.p--asis-cf1{ --x:339.24; --y:365.74; --w:37.43; --h:37.83; --dx:11; --dy:16; --sc:0.45; --d:0.34s; }
.p--asis-cf2{ --x:137.7; --y:394.62; --w:37.43; --h:37.83; --dx:-11; --dy:-14; --sc:0.45; --d:0.44s; }
.p--asis-cf3{ --x:46.74; --y:55.78; --w:37.43; --h:37.83; --dx:-11; --dy:16; --sc:0.45; --d:0.54s; }
.p--cierre-foto{ --x:1.01; --y:-15.53; --w:401.0; --h:427.5; --dx:-60; --dy:20; --sc:1.0; --d:0.00s; }
.p--cierre-cf1{ --x:345.77; --y:103.27; --w:34.02; --h:34.39; --dx:11; --dy:16; --sc:0.45; --d:0.34s; }
.p--cierre-cf2{ --x:16.17; --y:340.04; --w:35.72; --h:36.11; --dx:-11; --dy:-14; --sc:0.45; --d:0.44s; }
.p--cierre-cf3{ --x:-16.0; --y:160.03; --w:34.02; --h:34.39; --dx:-11; --dy:16; --sc:0.45; --d:0.54s; }
.p--cierre-cf4{ --x:328.18; --y:377.82; --w:30.62; --h:30.95; --dx:11; --dy:-14; --sc:0.45; --d:0.64s; }

/* =========================================================
   Tipografía
   ========================================================= */
.t-titulo{
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size:   calc(28 * var(--s));
  line-height: calc(36.4 * var(--s));
  letter-spacing: calc(2.8 * var(--s));
  text-transform: uppercase;
  text-align: center;
  color: var(--bordo);
  font-feature-settings: "cswh" 1;
}
.t-label{
  margin: 0;
  font-weight: 500;
  font-size:   calc(14 * var(--s));
  line-height: calc(21 * var(--s));
  letter-spacing: calc(3.08 * var(--s));
  text-transform: uppercase;
  text-align: center;
  color: var(--bordo-2);
  font-feature-settings: "cswh" 1;
}
.t-cuerpo{
  margin: 0;
  font-size: calc(17.5 * var(--s));
  line-height: 1.5;
  letter-spacing: calc(.175 * var(--s));
  text-align: center;
  color: var(--bordo-2);
}
/* El subrayado despegado de la línea de base, para que no choque
   con las colas de las letras */
.t-cuerpo u{
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}

.t-titulo--fecha{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(20 * var(--s));
}

.fecha-rule{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(32 * var(--s));
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size:   calc(16 * var(--s));
  line-height: calc(21 * var(--s));
  letter-spacing: calc(3.68 * var(--s));
  text-transform: uppercase;
  color: var(--bordo-2);
  font-feature-settings: "cswh" 1;
  white-space: nowrap;
}
.fecha-rule span{
  height: calc(2 * var(--s));
  width:  calc(59 * var(--s));
  flex: 0 1 auto;
  min-width: calc(20 * var(--s));
  background: var(--bordo-4);
  -webkit-mask: url("img/divider-texto.svg?v=5") no-repeat right center / 100% 100%;
          mask: url("img/divider-texto.svg?v=5") no-repeat right center / 100% 100%;
}
.fecha-rule span:last-of-type{ transform: scaleX(-1); }

.flecha{
  width:  calc(12 * var(--s));
  height: calc(38.5 * var(--s));
  background: var(--bordo-2);
  -webkit-mask: url("img/flecha.svg?v=5") no-repeat center / 100% 100%;
          mask: url("img/flecha.svg?v=5") no-repeat center / 100% 100%;
}

.icono{ height: calc(80 * var(--s)); width: auto; }

/* =========================================================
   Botones
   ========================================================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--s));
  min-height: calc(54 * var(--s));
  padding: calc(14 * var(--s)) calc(24 * var(--s));
  border: none;
  border-radius: calc(8 * var(--s));
  background: var(--fucsia);
  color: var(--blanco);
  font-family: var(--sans);
  font-weight: 600;
  font-size: calc(16 * var(--s));
  line-height: 1.5;
  letter-spacing: calc(.16 * var(--s));
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: filter .2s ease, transform .1s ease;
}
.btn:hover{ filter: brightness(1.06); }
.btn:active{ transform: scale(.985); }
.btn:focus-visible{ outline: 2px solid var(--bordo); outline-offset: 3px; }
.btn--224{ width: calc(224 * var(--s)); max-width: 100%; }
.btn--ancho{ width: 100%; }
.btn img{ width: calc(20 * var(--s)); height: calc(20 * var(--s)); }

/* =========================================================
   HERO
   ========================================================= */
.hero{ min-height: calc(517 * var(--s)); }

.hero__fecha{
  position: absolute;
  z-index: 1;
  left: calc(var(--fecha-x) * var(--s));
  top:  calc(var(--fecha-y) * var(--s));
  width: calc(257.06 * var(--s));
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size:   calc(17 * var(--s));
  line-height: calc(21 * var(--s));
  letter-spacing: calc(3.91 * var(--s));
  text-transform: uppercase;
  text-align: center;
  color: var(--bordo);
  font-feature-settings: "cswh" 1;
  --fecha-x: 66.31;
  --fecha-y: 30.39;
}

/* El lettering viene recortado dentro de su caja, igual que en Figma */
.hero__titular{
  position: absolute;
  z-index: 1;
  left:   calc(var(--tit-x) * var(--s));
  top:    calc(var(--tit-y) * var(--s));
  width:  calc(var(--tit-w) * var(--s));
  height: calc(var(--tit-h) * var(--s));
  overflow: hidden;
  --tit-x: -13.12;
  --tit-y: 423.48;
  --tit-w: 414.84;
  --tit-h: 93.3;
}
.hero__titular img{
  position: absolute;
  left: 0;
  top: -6.75%;
  width: 100%;
  height: 123.06%;
  max-width: none;
}

/* La fecha entra con el resto del hero */
.js .hero__fecha{
  opacity: 0;
  transform: translate3d(0, calc(18 * var(--s)), 0);
  transition: opacity 1.15s var(--curva) var(--d), transform 1.15s var(--curva) var(--d);
  --d: .1s;
}
.js .hero.visible .hero__fecha{ opacity: 1; transform: translate3d(0,0,0); }

/* El lettering se descubre de izquierda a derecha, como si lo estuvieran
   escribiendo. El borde del barrido va inclinado para acompañar la caída
   de la caligrafía: arriba adelanta, abajo va atrás.                      */
.js .hero__titular{
  /* Arranca en 8% y no en 0: el PNG tiene aire antes de la primera letra,
     así el trazo empieza a verse apenas arranca y no medio segundo después. */
  clip-path: polygon(0 0, 8% 0, -4% 100%, 0 100%);
  /* El fade corto hace que el trazo se registre enseguida, junto con la foto;
     el barrido sigue después, así arrancan juntos pero no terminan juntos.   */
  opacity: 0;
  transition: clip-path 1.65s cubic-bezier(.35,.08,.5,.97) var(--d, 0s),
              opacity .48s ease-out var(--d, 0s);
  --d: .08s;
}
.js .hero.visible .hero__titular{
  opacity: 1;
  clip-path: polygon(0 0, 112% 0, 100% 100%, 0 100%);
}

/* El final entra como un bloque: la línea, la firma y recién ahí la polaroid */
.js .fecha-rule,
.js .footer__firma{
  opacity: 0;
  transform: translate3d(0, calc(18 * var(--s)), 0);
  transition: opacity 1.15s var(--curva) var(--d), transform 1.15s var(--curva) var(--d);
}
.js .fecha-rule{    --d: .08s; }
.js .footer__firma{ --d: .3s; }
.js .footer.visible .fecha-rule,
.js .footer.visible .footer__firma{ opacity: 1; transform: translate3d(0,0,0); }

/* =========================================================
   CUENTA REGRESIVA
   ========================================================= */
.countdown{ min-height: calc(300 * var(--s)); }
.countdown .inner{
  gap: calc(var(--cd-gap) * var(--s));
  padding: calc(28 * var(--s)) calc(var(--pad-x) * var(--s)) 0;
  --pad-x: 32;
  --cd-gap: 28;
}
.countdown__bloque{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(28 * var(--s));
  width: 100%;
}
.countdown__grid{
  display: flex;
  justify-content: center;
  gap: calc(12 * var(--s));
}
.cd__unit{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--s));
}
.cd__box{
  display: flex;
  align-items: center;
  justify-content: center;
  width:  calc(64 * var(--s));
  height: calc(64 * var(--s));
  border: calc(1.5 * var(--s)) solid var(--bordo-3);
  border-radius: 50%;
  background: #fff;
  font-weight: 500;
  font-size: calc(20 * var(--s));
  color: var(--bordo-2);
  font-variant-numeric: tabular-nums;
}
.cd__label{
  margin: 0;
  font-weight: 500;
  font-size: calc(12 * var(--s));
  letter-spacing: calc(1 * var(--s));
  text-transform: uppercase;
  color: var(--bordo-2);
}

/* =========================================================
   Secciones con piezas decorativas.
   El contenido se ancla a la altura exacta que tiene en Figma,
   así la distancia con las piezas de arriba es la del diseño.
   ========================================================= */
.celebracion, .dresscode, .regalos, .rsvp{ display: flex; flex-direction: column; }
.celebracion .inner,
.dresscode  .inner,
.regalos    .inner,
.rsvp       .inner{
  margin-top: calc(var(--inner-y) * var(--s));
  padding: calc(32 * var(--s)) calc(var(--pad-x) * var(--s));
  --pad-x: 32;
}

.celebracion{ min-height: calc(873 * var(--s)); }
.celebracion .inner{ gap: calc(32 * var(--s)); --inner-y: 366.69; }

.dresscode{ min-height: calc(757 * var(--s)); }
.dresscode .inner{ gap: calc(16 * var(--s)); --inner-y: 496; }

.regalos{ min-height: calc(1111 * var(--s)); }
.regalos .inner{ gap: calc(36 * var(--s)); --inner-y: 442; }

.rsvp{ min-height: calc(1153 * var(--s)); }
.rsvp .inner{ gap: calc(32 * var(--s)); --inner-y: 475; }

/* ---------- Regalos: alias ---------- */
.alias{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--s));
  width: 100%;
  padding: calc(14 * var(--s)) calc(24 * var(--s));
  border: calc(1.5 * var(--s)) solid var(--fucsia);
  border-radius: calc(8 * var(--s));
  background: #fff;
  font-family: var(--sans);
  cursor: pointer;
  position: relative;
}
.alias:focus-visible{ outline: 2px solid var(--bordo); outline-offset: 3px; }
.alias__label{
  font-weight: 500;
  font-size: calc(12 * var(--s));
  letter-spacing: calc(1 * var(--s));
  text-transform: uppercase;
  color: var(--bordo-2);
}
.alias__valor{
  font-size: calc(17.5 * var(--s));
  letter-spacing: calc(.175 * var(--s));
  color: var(--bordo);
}
/* El banco va fuera de .alias__valor a propósito: al tocar el botón se copia
   sólo el número, que es lo que el invitado necesita pegar en el homebanking. */
.alias__banco{
  margin-top: calc(4 * var(--s));
  font-size: calc(17.5 * var(--s));
  letter-spacing: calc(.175 * var(--s));
  color: var(--bordo);
}
.alias.copiado::after{
  content: "¡Copiado!";
  position: absolute;
  top: 50%;
  right: calc(12 * var(--s));
  transform: translateY(-50%);
  font-size: calc(12 * var(--s));
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--fucsia);
}
/* Esta caja lleva una línea más (el banco), así que su centro queda debajo
   del número. Se sube el cartel para que salga a la altura del número. */
.alias--banco.copiado::after{ top: calc(50% - 5 * var(--s)); }

/* =========================================================
   CONFIRMAR ASISTENCIA
   ========================================================= */
.form{
  display: flex;
  flex-direction: column;
  gap: calc(24 * var(--s));
  width: 100%;
}
.form__opciones{
  display: flex;
  justify-content: center;
  gap: calc(20 * var(--s));
}
.check{ display: flex; align-items: center; gap: calc(10 * var(--s)); cursor: pointer; }
.check input{ position: absolute; opacity: 0; width: 0; height: 0; }
.check__box{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width:  calc(32 * var(--s));
  height: calc(32 * var(--s));
  border: calc(1.5 * var(--s)) solid var(--fucsia);
  border-radius: calc(5.333 * var(--s));
  background: #fff;
  transition: background .15s ease;
}
.check__texto{
  font-size: calc(17.5 * var(--s));
  letter-spacing: calc(.175 * var(--s));
  color: var(--bordo-2);
  white-space: nowrap;
}
.check input:checked ~ .check__box{ background: var(--fucsia); }
.check input:checked ~ .check__box::after{
  content: "";
  width:  calc(7 * var(--s));
  height: calc(12 * var(--s));
  margin-top: calc(-2 * var(--s));
  border: solid #fff;
  border-width: 0 calc(2.5 * var(--s)) calc(2.5 * var(--s)) 0;
  transform: rotate(45deg);
}
.check input:checked ~ .check__texto{ color: var(--texto-check); }
.check input:focus-visible ~ .check__box{ outline: 2px solid var(--bordo); outline-offset: 3px; }

.form__campos{ display: flex; flex-direction: column; gap: calc(12 * var(--s)); }
.form__campos input,
.form__campos textarea{
  width: 100%;
  padding: calc(12 * var(--s));
  border: 1px solid var(--input-borde);
  border-radius: calc(8 * var(--s));
  background: #fff;
  font-family: var(--sans);
  font-size: max(16px, calc(17.5 * var(--s)));
  line-height: 1.5;
  letter-spacing: calc(.175 * var(--s));
  color: var(--bordo);
  resize: vertical;
}
.form__campos textarea{ min-height: calc(80 * var(--s)); }
.form__campos ::placeholder{ color: var(--bordo-2); opacity: 1; }
.form__campos input:focus-visible,
.form__campos textarea:focus-visible{ outline: 2px solid var(--fucsia); outline-offset: 1px; }

/* El campo trampa no se ve ni se puede tabular hasta él */
.trampa{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.form__estado{
  margin: 0;
  min-height: 1.5em;
  font-size: calc(14 * var(--s));
  text-align: center;
  color: var(--bordo-2);
}
.form__estado.error{ color: var(--fucsia); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ min-height: calc(180.19 * var(--s)); }
.footer .inner{
  gap: calc(20 * var(--s));
  padding: calc(40 * var(--s)) calc(32 * var(--s)) calc(8 * var(--s));
}
.footer__firma{
  width: calc(339.25 * var(--s));
  max-width: 100%;
  height: auto;
  mix-blend-mode: darken;
}

/* =========================================================
   CIERRE
   ========================================================= */
.cierre{ min-height: calc(461 * var(--s)); }

/* =========================================================
   DESKTOP — columna de 508px sobre el fondo fijo
   ========================================================= */
@media (min-width: 481px){
  /* La columna nunca pasa de 508; si la ventana es más angosta, el diseño
     entero se achica en proporción en vez de dejar bandas a los costados. */
  :root{ --base: 508; --col: min(508px, 100vw); }

  /* Los confetti del hero y del cierre los trae el fondo */
  .solo-mobile{ display: none; }

  /* --- geometría del diseño desktop --- */
  .hero{ min-height: calc(630 * var(--s)); }
  .hero__fecha{ --fecha-x: 125.4; --fecha-y: 56.39; }
  .hero__titular{ --tit-x: -35.17; --tit-y: 505.21; --tit-w: 577.11; --tit-h: 129.8; }

  /* El lettering es más grande acá, así que se escribe un poco más rápido */
  .js .hero__titular{
    transition: clip-path 1.49s cubic-bezier(.35,.08,.5,.97) var(--d, 0s),
                opacity .43s ease-out var(--d, 0s);
  }

  .countdown{ min-height: calc(312 * var(--s)); }
  .countdown .inner{ --pad-x: 48; --cd-gap: 32; }

  .celebracion{ min-height: calc(873 * var(--s)); }
  .celebracion .inner{ --inner-y: 366.69; }

  .dresscode{ min-height: calc(746 * var(--s)); }
  .dresscode .inner{ --inner-y: 476; --pad-x: 48; }

  .regalos{ min-height: calc(1047 * var(--s)); }
  .regalos .inner{ --inner-y: 404; --pad-x: 48; }

  .rsvp{ min-height: calc(1145 * var(--s)); }
  .rsvp .inner{ --inner-y: 472; }

  .cierre{ min-height: calc(543 * var(--s)); }

  .p--hero-foto{ --x:12.87; --y:7.37; --w:477.03; --h:548.04; --dx:-60; --dy:20; --sc:1.0; --d:0.00s; }
  .p--cele-2{ --x:263.97; --y:12.62; --w:277.29; --h:277.04; --dx:34; --dy:28; --sc:1.0; --d:0.12s; }
  .p--cele-1{ --x:-12.63; --y:79.35; --w:288.62; --h:303.29; --dx:-34; --dy:28; --sc:1.0; --d:0.12s; }
  .p--cele-cf1{ --x:321.38; --y:279.93; --w:34.34; --h:34.71; --dx:11; --dy:16; --sc:0.45; --d:0.34s; }
  .p--cele-cf2{ --x:87.48; --y:350.47; --w:33.68; --h:34.05; --dx:-11; --dy:-14; --sc:0.45; --d:0.44s; }
  .p--cele-cf3{ --x:197.07; --y:93.05; --w:33.68; --h:34.05; --dx:-11; --dy:16; --sc:0.45; --d:0.54s; }
  .p--cele-cf4{ --x:216.06; --y:77.31; --w:35.03; --h:35.41; --dx:-11; --dy:-14; --sc:0.45; --d:0.64s; }
  .p--dress-2{ --x:213.09; --y:30.55; --w:307.55; --h:346.81; --dx:34; --dy:28; --sc:1.0; --d:0.12s; }
  .p--dress-1{ --x:-49.57; --y:85.26; --w:363.28; --h:390.74; --dx:-34; --dy:28; --sc:1.0; --d:0.12s; }
  .p--dress-cf1{ --x:229.86; --y:363.48; --w:37.43; --h:37.83; --dx:-11; --dy:16; --sc:0.45; --d:0.34s; }
  .p--dress-cf2{ --x:156.74; --y:93.81; --w:37.43; --h:37.83; --dx:-11; --dy:-14; --sc:0.45; --d:0.44s; }
  .p--dress-cf3{ --x:370.09; --y:401.31; --w:37.43; --h:37.83; --dx:11; --dy:16; --sc:0.45; --d:0.54s; }
  .p--reg-2{ --x:159.3; --y:64.13; --w:381.76; --h:381.76; --dx:34; --dy:28; --sc:1.0; --d:0.12s; }
  .p--reg-1{ --x:-41.07; --y:-11.88; --w:307.66; --h:303.22; --dx:-34; --dy:28; --sc:1.0; --d:0.12s; }
  .p--reg-cf1{ --x:120.02; --y:280.8; --w:36.68; --h:37.08; --dx:-11; --dy:16; --sc:0.45; --d:0.34s; }
  .p--reg-cf2{ --x:377.34; --y:387.76; --w:37.43; --h:37.83; --dx:11; --dy:-14; --sc:0.45; --d:0.44s; }
  .p--asis-1{ --x:-25.71; --y:74.7; --w:345.36; --h:379.71; --dx:-34; --dy:28; --sc:1.0; --d:0.12s; }
  .p--asis-2{ --x:227.52; --y:35.91; --w:306.19; --h:337.48; --dx:34; --dy:28; --sc:1.0; --d:0.12s; }
  .p--asis-cf1{ --x:393.1; --y:365.74; --w:37.43; --h:37.83; --dx:11; --dy:16; --sc:0.45; --d:0.34s; }
  .p--asis-cf2{ --x:191.56; --y:394.62; --w:37.43; --h:37.83; --dx:-11; --dy:-14; --sc:0.45; --d:0.44s; }
  .p--asis-cf3{ --x:100.6; --y:55.78; --w:37.43; --h:37.83; --dx:-11; --dy:16; --sc:0.45; --d:0.54s; }
  .p--cierre-foto{ --x:22.43; --y:-30.94; --w:486.25; --h:518.38; --dx:-60; --dy:20; --sc:1.0; --d:0.00s; }
}

/* =========================================================
   El fondo fijo aparece recién cuando la columna (508px) deja
   lugar a los costados.
   ========================================================= */
/* Desde que se abandona el layout mobile, la tela cubre toda la ventana.
   Antes esto arrancaba en 570 y entre 481 y 569 quedaban hasta 30px de
   blanco por lado, con las piezas cortadas contra el borde de la columna. */
@media (min-width: 481px){
  /* La tela va por un lado y los elementos por otro. Antes era una sola foto
     con proporción fija, así que `cover` recortaba los bordes y cada monitor
     se comía una parte distinta de la cinta y las flores.

     Ahora la tela se estira con `cover` como siempre (es pareja, el recorte
     no se nota) y cada elemento va anclado a su esquina del viewport.      */
  .fondo{
    display: block;
    position: fixed;
    inset: 0;
    z-index: -2;
    overflow: hidden;
    background: url("img/fondo-desktop.webp?v=8") center / cover no-repeat;
  }

  /* Resplandor suave detrás de la columna (Fondo Blur en Figma) */
  .resplandor{
    display: block;
    position: fixed;
    z-index: -1;
    left: 50%;
    top: 50%;
    width: 416px;
    height: 1068px;
    transform: translate(-50%, -50%);
    background: var(--blanco);
    opacity: .4;
    filter: blur(104px);
    pointer-events: none;
  }

  /* Acá sí: la columna no lleva fondo propio ni recorta,
     así las piezas decorativas se ven enteras. */
  .page{ background: none; overflow-x: visible; }
}

/* Los adornos de las esquinas son todo o nada: achicados no se leen y no
   aportan. Abajo de 1080px no se muestran y queda sólo la tela; de ahí para
   arriba salen a tamaño completo, el mismo en cualquier monitor.

   El corte está en 1080 y no más abajo por geometría: la columna mide 508
   fijos, así que el margen libre por lado es (ancho - 508) / 2. En 1080 son
   286px, suficiente para la pieza más ancha (253) sin tocar el contenido. */
@media (min-width: 1080px){
  .deco-f{
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .deco-f--si{                       /* cinta, arriba a la izquierda */
    top: 0; left: 0;
    width: 224px; height: 188px;
    background-image: url("img/deco-cinta.webp?v=8");
  }
  .deco-f--sd{                       /* flores, arriba a la derecha */
    top: 0; right: 0;
    width: 253px; height: 181px;
    background-image: url("img/deco-flores2.webp?v=8");
  }
  .deco-f--ii{                       /* ramo, abajo a la izquierda: en la escena
                                        original asomaba parcialmente, así que
                                        se corre hacia afuera lo mismo que allá */
    bottom: -27px; left: -68px;
    width: 291px; height: 226px;
    background-image: url("img/deco-flores1.webp?v=8");
  }
  .deco-f--id{                       /* cuenco, abajo a la derecha */
    bottom: 0; right: 0;
    width: 195px; height: 153px;
    background-image: url("img/deco-cuenco.webp?v=8");
  }
}

/* =========================================================
   Accesibilidad
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  /* Con movimiento reducido las piezas aparecen ya puestas */
  .js .p,
  .js .hero__fecha,
  .js .hero__titular,
  .js .fecha-rule,
  .js .footer__firma{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .js .hero__titular{ clip-path: none !important; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}