/* Tokens: los mismos nombres y valores que las variables del Figma
   ("Invitación · Juli & Hernán": color/rosa, color/crema, color/tinta…). */
:root {
  --rosa: #B87177;
  --rosa-sello: #E5989B;
  --crema: #F0EAD6;
  --tinta: #2A2E1A;
  --arena: #E8D8C8;
  --papel: #FAF6EC;
  --durazno: #EBD9C7;

  --marco-h: min(11.3vw, 76px);      /* alto de la franja entre secciones: 122/1080 del ancho, como en el Figma */
  --title-size: clamp(2.25rem, 8.8vw, 3.3rem);

  --script: 'Monsieur La Doulaise', cursive;
  --script-y: 'Miss Fajardose', cursive;
  --serif: 'Cormorant Garamond', serif;
  --body: 'Pochaevsk', serif;

  --ease-out: cubic-bezier(0.22, 0.75, 0.2, 1);
  font-size: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html.is-locked, html.is-locked body { overflow: hidden; }

body {
  margin: 0;
  background: var(--crema);
  color: var(--tinta);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

/* ============ Tipografía (estilos de texto del Figma) ============ */

.title {
  margin: 0;
  max-width: 26ch;
  font-family: var(--serif);          /* títulos de sección en Cormorant Garamond (Figma "Correccion final") */
  font-weight: 400;
  font-size: var(--title-size);
  line-height: 1.13;
  text-align: center;
  text-wrap: balance;
}
.title--wide { max-width: 100%; font-family: var(--body); font-size: clamp(1.45rem, 6vw, 2.6rem); }
.title--rose { color: var(--rosa); }

.body {
  margin: 0;
  max-width: 30rem;                  /* en celular usa todo el ancho: menos líneas */
  font-size: clamp(1.02rem, 4.2vw, 1.2rem);
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}
.body--wide { max-width: 34rem; }

.detail {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 5.2vw, 1.7rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.detail--plain { text-decoration: none; text-transform: none; letter-spacing: 0.06em; }

.lead {
  margin: 0;
  max-width: 30rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(0.95rem, 3.95vw, 1.4rem);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

/* ============ Ornamentos (vectores del Figma, color por currentColor) ============ */

.orn {
  display: block;
  margin: 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--orn) center / contain no-repeat;
          mask: var(--orn) center / contain no-repeat;
}
.orn--fleurons { --orn: url(assets/ornaments/fleurons.svg);      aspect-ratio: 872 / 226; width: min(38vw, 190px); }
.orn--flor     { --orn: url(assets/ornaments/fleur-cluster.svg); aspect-ratio: 544 / 225; width: min(56vw, 270px); }
.orn--corazon  { --orn: url(assets/ornaments/heart-flourish.svg); aspect-ratio: 366 / 117;  width: min(39.4vw, 200px); }
.orn--voluta   { --orn: url(assets/ornaments/flourish.svg);       aspect-ratio: 366 / 76.1; width: min(39.4vw, 200px); }
.orn--divisor  { --orn: url(assets/ornaments/divisor.svg);        aspect-ratio: 235.6 / 25; width: min(21.8vw, 112px); }
.orn--flip { transform: scaleY(-1); }

.sec-orn--ink   { color: var(--tinta); }
.sec-orn--rose  { color: var(--rosa); }
.sec-orn--cream { color: var(--crema); }

.rule {
  display: block;
  width: min(72vw, 390px);
  height: 1px;
  margin: 0 auto;
  background: currentColor;
  opacity: 0.6;
}
.rule--light { color: var(--crema); }
.rule--ink   { color: var(--tinta); }
.rule--rose  { color: var(--rosa); opacity: 0.8; }
/* Línea pegada al título (como el subrayado de "Confirmá tu asistencia" en el Figma) */
.rule--under { width: min(100%, calc(var(--title-size) * 9.6)); margin-top: calc(var(--gap) * -1 + 0.2rem); }

/* ============ Secciones ============ */

.section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  --gap: 2rem;
  gap: var(--gap);
  padding: 2.9rem 1.25rem;            /* 120 px del Figma arriba y abajo (Ubicación) */
  text-align: center;
}
.cream { background: var(--crema); color: var(--tinta); }
.rose  { background: var(--rosa);  color: var(--crema); }
.peach { background: var(--durazno) url(assets/fondo-durazno.webp) center / cover no-repeat; color: var(--tinta); }

/* Aire propio de cada sección, medido en el frame "Correccion final" */
.section--prog { padding-top: 4.3rem; padding-bottom: 3.4rem; }     /* Programa: 180 / 141 px */
.section--airy { padding-top: 5.6rem; padding-bottom: 5.6rem; }     /* Vestimenta: 234 px */
.section--form { padding-top: 4.3rem; padding-bottom: 6rem; }       /* Confirmación: 180 / 251 px */

/* ============ Franja entre secciones (componente "marco" del Figma) ============
   Relleno #BE7F84 con la textura en multiplicar (horneados en marco-fondo.webp, que se repite
   espejado y no deja costura) y, encima, el ornamento #E5989B centrado: 62 de los 122 px de alto. */

.marco {
  display: block;
  position: relative;
  z-index: 3;
  height: var(--marco-h);
  background:
    url(assets/ornaments/marco.svg) center / auto 50.82% no-repeat,
    #B76B6E url(assets/marco-fondo.webp) center / auto 100% repeat-x;
  pointer-events: none;
}
.marco--hero { position: absolute; left: 0; right: 0; top: 0; }

/* Pantalla inicial: la misma franja en crema #F0EAD6 con la textura en multiplicar
   (horneada en marco-fondo-crema.webp) y el ornamento en rosa #B87177, arriba y abajo
   (la de abajo girada 180°), por encima de todas las capas, como en "pantalla inicio". */
.marco--intro {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 6;
  height: var(--band-h);
  background:
    url(assets/ornaments/marco-rosa.svg) center / auto 50.82% no-repeat,
    #CDC8B7 url(assets/marco-fondo-crema.webp) center / auto 100% repeat-x;
}
.marco--intro-top { top: 0; }
.marco--intro-bottom { bottom: 0; transform: rotate(180deg); }

/* ============ Botones ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.4rem;
  border: 1.5px solid currentColor;
  border-radius: 0.5rem;
  background: transparent;
  color: inherit;
  font-family: var(--body);
  font-size: 1.02rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.cream .btn:hover, .cream .btn:focus-visible,
.peach .btn:hover, .peach .btn:focus-visible { background: var(--tinta); color: var(--crema); }
.btn:active { transform: scale(0.98); }

/* ============ 01 · Sobre de entrada ============ */

.no-js .intro { display: none; }

.intro {
  /* Medidas del frame "pantalla inicio" (1079 × 1918): el sobre ocupa 1128/1079 del ancho.
     En pantallas bajas o anchas se achica para entrar entre las dos franjas. */
  --band-h: min(11.3vw, 76px, 8vh);    /* 122/1080 del ancho, como la franja entre secciones */
  --env-w: min(104.54vw, (100vh - 2 * var(--band-h)) * 1.125, 760px);
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden;
  background: #A29591;               /* tono medio del fondo, mientras carga la foto */
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 1.1s var(--ease-out), opacity 0.8s ease 0.4s, visibility 0s linear 1.2s;
}
.intro:focus-visible { outline: none; }

/* Capa 1 · foto de lirios detrás del vidrio acanalado (el vidrio viene horneado en la imagen:
   tiras de 60 px, desenfoque y refracción en los bordes medidos del efecto Glass del Figma) */
.intro__fondo,
.intro__fondo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Capa 2 · velo #685454 al 40 % */
.intro__velo {
  position: absolute;
  inset: 0;
  background: rgba(104, 84, 84, 0.4);
}
/* Capa 4 · sobre completo, centrado: el cuerpo del sobre queda en el medio de la pantalla */
.intro__env {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50.3%;
  width: var(--env-w);
  aspect-ratio: 1128 / 1044.62;
  transform: translate(-50%, -61.97%);
}
.intro__paper { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.intro__seal {
  position: absolute;
  left: 49.79%;
  top: 70.19%;
  width: 17.84%;
  height: auto;
  transform: translate(-50%, -50%);
  animation: seal-idle 2.8s ease-in-out infinite;
}
/* Velo #D9D9D9 al 20 % sobre el sobre y el sello (Rectangle 60), recortado a la silueta del sobre */
.intro__env-velo {
  position: absolute;
  inset: 0;
  background: rgba(217, 217, 217, 0.2);
  -webkit-clip-path: inset(28.35% 6.97% 4.49% 6.54%);
          clip-path: inset(28.35% 6.97% 4.49% 6.54%);
  -webkit-mask: url(assets/inicio-sobre.webp) center / 100% 100% no-repeat;
          mask: url(assets/inicio-sobre.webp) center / 100% 100% no-repeat;
  pointer-events: none;
}
/* Capa 5 · arriba de todo: #ABABAB al 18 % y su ruido (negro al 25 % × 18 % de la capa = 4,5 %, mitad de los granos) */
.intro__grano {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(171, 171, 171, 0.18);
  pointer-events: none;
}
.intro__grano::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/ruido.png) 0 0 / 96px 96px;   /* grano fino: ~1 px de pantalla en celulares */
  opacity: 0.045;
}
.intro__hint {
  position: absolute;
  left: 0; right: 0;
  z-index: 6;
  top: calc(75.15% + var(--env-w) * 0.156 - var(--band-h) / 2);   /* a mitad de camino entre el sobre y la franja */
  margin: 0;
  padding: 0 1.5rem;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--body);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  color: var(--crema);
  text-shadow: 0 1px 6px rgba(60, 40, 42, 0.45);
  animation: breathe 3.2s ease-in-out infinite;
  transition: opacity 0.4s ease;
}

@keyframes seal-idle {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.04); }
}
@keyframes breathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.8; } }

/* Al abrir: el sello se presiona y se quiebra, y el sobre se levanta */
.intro.is-opening .intro__hint { opacity: 0; animation: none; }
.intro.is-opening .intro__seal { animation: seal-break 0.7s var(--ease-out) forwards; }
.intro.is-gone { transform: translateY(-105%); opacity: 0; visibility: hidden; }

@keyframes seal-break {
  0%   { transform: translate(-50%, -50%) scale(1); }
  30%  { transform: translate(-50%, -50%) scale(0.88); }
  100% { transform: translate(-50%, -50%) scale(1.5) rotate(-8deg); opacity: 0; }
}

/* ============ 02 · Portada ============ */

.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--marco-h) + 2.4rem) 1.25rem 4.2rem;
  text-align: center;
  color: var(--crema);
  background: #9d7b80;
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Vidrio acanalado (como los rectángulos con efecto "glass" del Figma) */
.hero__glass {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, 0.10) 0,
      rgba(255, 255, 255, 0.02) 18px,
      rgba(0, 0, 0, 0.06) 44px,
      rgba(255, 255, 255, 0.08) 64px);
  background-size: min(17vw, 64px) 100%;
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
          backdrop-filter: blur(7px) saturate(1.1);
}
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(104, 84, 84, 0.34), rgba(104, 84, 84, 0.34)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* Separaciones del frame "inicio" del Figma: 101 px entre bloques (--g), 45 px entre
   "Nos casamos" y el ornamento, 80 px entre cada ornamento y su filete. */
.hero__inner {
  --g: clamp(1.9rem, 9.35vw, 3.3rem);
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--g);
}

.eyebrow {
  margin: 0 0 calc(var(--g) * -0.554);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.25rem, 5.4vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hero__orn { color: var(--crema); width: min(34vw, 170px); margin-bottom: calc(var(--g) * -0.208); }
.hero__orn.orn--flip { margin-top: calc(var(--g) * -0.208); margin-bottom: 0; }

/* "Julieta y Hernan" (Frame 98): cajas de 360, 142 y 479 px, solapadas 25 px, con los nombres
   a 154,87 px y la "y" a 185,84 px sobre 1080 de ancho. Todo en em del tamaño de los nombres. */
.names {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(2.6rem, 14.34vw, 5.6rem);
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 16px rgba(60, 30, 35, 0.25);
}
.names__n { flex: none; font-family: var(--script); }
.names__n:first-child { width: 2.325em; margin-right: -0.161em; }
.names__n:last-child { width: 3.093em; margin-right: -0.278em; }   /* en el Figma "Hernan" sobresale 43 px del grupo de 888 */
.names__y { flex: none; font-family: var(--script-y); font-size: 1.2em; line-height: 0.97; width: 0.764em; margin-right: -0.1345em; }

.hero__date {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.2rem, 9.6vw, 3.4rem);
  line-height: 1.4;
  letter-spacing: 0.06em;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  width: 34px;
  height: 34px;
  transform: translateX(-50%);
  color: var(--crema);
  opacity: 0.8;
  animation: nudge 2.2s ease-in-out infinite;
}
@keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* Entrada escalonada de la portada, se dispara cuando se abre el sobre */
.js .hero-in {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s ease, transform 1.1s var(--ease-out), filter 1.2s ease;
  transition-delay: calc(var(--d, 0) * 0.14s + 0.3s);
}
.js .hero-in--blur { filter: blur(8px); }
.js .hero-in.orn--flip { transform: translateY(18px) scaleY(-1); }
.is-open .hero-in { opacity: 1; transform: none; filter: none; }
.is-open .hero-in.orn--flip { transform: scaleY(-1); }

/* ============ Aparición al hacer scroll ============ */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease, transform 1s var(--ease-out);
  transition-delay: var(--rd, 0s);
}
.js .orn[data-reveal] { transform: translateY(14px) scale(0.85); }
.js .orn--flip[data-reveal] { transform: translateY(14px) scale(0.85) scaleY(-1); }
.js .rule[data-reveal] { transform: scaleX(0); transition: transform 1.2s var(--ease-out), opacity 0.6s ease; }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js .orn--flip[data-reveal].is-in { transform: scaleY(-1); }
.js .rule[data-reveal].is-in { opacity: 0.6; }

/* ============ 03 · Ubicación (logo del salón entre el divisor y la dirección) ============ */

.venue-logo { flex: none; width: min(20vw, 104px); height: auto; }   /* 216/1080 del ancho */

/* ============ 04 · Invitación ============ */

.invite { color: var(--crema); padding-bottom: 3.5rem; background: var(--rosa); }   /* arriba, los 122 px del Figma */
.invite__bg, .closing__bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.invite__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(rgba(184, 113, 119, 0.69), rgba(184, 113, 119, 0.69)),
    linear-gradient(rgba(104, 84, 84, 0.15), rgba(171, 171, 171, 0.15));
}
.invite .body { text-shadow: 0 1px 2px rgba(120, 60, 66, 0.3); }

.gyps {
  position: absolute;
  z-index: -1;
  bottom: 5.5rem;                    /* asoma por detrás del sobre */
  width: min(22vw, 170px);
  opacity: 0.85;
  transform-origin: 50% 100%;
  animation: sway 7s ease-in-out infinite;
  pointer-events: none;
}
.gyps--l { left: -4%; }
.gyps--r { right: -4%; transform: scaleX(-1); animation-name: sway-r; animation-delay: -3s; }
@keyframes sway   { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2.5deg); } }
@keyframes sway-r { 0%, 100% { transform: scaleX(-1) rotate(-2deg); } 50% { transform: scaleX(-1) rotate(2.5deg); } }

.invite__hint {
  margin: -1.2rem 0 0;
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  opacity: 0.85;
  transition: opacity 0.4s ease;
}
.invite:has(.sobre[data-state]) .invite__hint { opacity: 0; }

/* ---------- SOBRE1 (componente del Figma) ----------
   Caja = 1078×1281 del componente; cada capa usa su posición en % dentro de él. */

.sobre {
  --w: min(92vw, 460px);
  position: relative;
  width: var(--w);
  aspect-ratio: 1078 / 1281;
  margin: 1.2rem 0 1rem;
}
.sobre__hit {
  position: absolute;
  left: 4%; right: 4%; top: 19%; bottom: 0;
  z-index: 6;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sobre__hit:focus-visible { outline: 2px dashed var(--crema); outline-offset: 6px; }
.sobre[data-state] .sobre__hit { pointer-events: none; }

.sobre__cerrado,
.sobre__fondo,
.sobre__frente { position: absolute; max-width: none; filter: drop-shadow(0 14px 22px rgba(70, 35, 40, 0.25)); }
.sobre__cerrado { left: -4.36%; top: 19.13%; width: 108.53%; height: 84.62%; transition: opacity 0.35s ease-out, transform 0.3s ease; }
.sobre__fondo,
.sobre__frente { left: -10.39%; top: 9.13%; width: 120.87%; height: 94.22%; opacity: 0; transition: opacity 0.35s ease-out; }
.sobre__frente { filter: none; }
.sobre:not([data-state]) .sobre__hit:hover ~ .sobre__cerrado { transform: translateY(-4px) rotate(-0.6deg); }

/* Ranura del sobre: el calendario solo se dibuja por encima de la boca y dentro de la muesca del frente,
   así nunca asoma por debajo del sobre ni se transparenta mientras se abre.
   Los puntos siguen el borde superior de sobre1-frente.webp, en % de la caja. */
.sobre__ranura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-clip-path: polygon(-30% -60%, 130% -60%, 130% 50%, 97.2% 50.1%, 93.8% 50.4%, 90.2% 51.4%, 65.3% 72%, 35.5% 72%, 10% 51.6%, 7.6% 50.7%, 2.8% 50%, -30% 50%);
          clip-path: polygon(-30% -60%, 130% -60%, 130% 50%, 97.2% 50.1%, 93.8% 50.4%, 90.2% 51.4%, 65.3% 72%, 35.5% 72%, 10% 51.6%, 7.6% 50.7%, 2.8% 50%, -30% 50%);
}

/* Tarjeta del calendario ("Frame 97" del Figma, 738 × 790): arranca adentro del sobre, con el mismo giro de 5°.
   Las medidas de adentro van en cqw: 1cqw = 1 % del ancho de la tarjeta. */
.sobre__cal {
  position: absolute;
  left: 10.8%;
  top: 58.8%;
  width: 72%;
  aspect-ratio: 738 / 790;
  container-type: inline-size;
  transform-origin: 0 0;
  transform: rotate(-5deg);
  opacity: 0;
  transition: opacity 0.35s ease-out, transform 0.75s cubic-bezier(0.3, 0.7, 0.2, 1);
}
/* Papel con las esquinas recortadas y el doble filete (vector del Figma) */
.sobre__tarjeta { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sobre__papel {
  position: absolute;
  inset: 0;
  padding: 17.2cqw 0 0 11.92cqw;
  color: var(--tinta);
  text-align: left;
}

.sobre[data-state] .sobre__cerrado { opacity: 0; }
.sobre[data-state] .sobre__fondo,
.sobre[data-state] .sobre__frente,
.sobre[data-state] .sobre__cal { opacity: 1; }
/* Variant2: el calendario sale del sobre (queda con el borde de abajo metido en la muesca, no suelto) */
.sobre[data-state="afuera"] .sobre__cal { transform: translateY(-82.4%) rotate(-5deg); }

.sobre__hand {
  position: absolute;
  z-index: 5;
  right: 5%;
  bottom: 2%;
  width: 11%;
  color: var(--tinta);
  pointer-events: none;
  animation: tap 1.8s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
.sobre[data-state] .sobre__hand { opacity: 0; animation: none; }
@keyframes tap {
  0%, 100% { transform: translate(0, 0) scale(1); }
  45%, 55% { transform: translate(-6%, -8%) scale(0.92); }
}

/* ---------- Calendario (tipografía y medidas del Figma) ---------- */

.cal__month { margin: 0 0 3.4cqw; font-family: var(--serif); font-size: 7.9cqw; line-height: 0.97; }
/* Siete columnas de 62,86 px cada 82,9 px; filas cada 76,5 px; filete fino bajo los días de la semana */
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 8.517cqw);
  column-gap: 2.715cqw;
  row-gap: 1.85cqw;
  width: 75.91cqw;
  font-family: var(--serif);
  font-variant-numeric: lining-nums;
  text-align: center;
  background: linear-gradient(var(--tinta), var(--tinta)) 0 7.78cqw / 100% max(0.6px, 0.124cqw) no-repeat;
}
.cal__head {
  display: grid;
  place-items: center;
  height: 7.78cqw;
  margin-bottom: 0.86cqw;
  font-weight: 500;
  font-size: 2.96cqw;
}
.cal__day { position: relative; display: grid; place-items: center; height: 8.517cqw; font-weight: 700; font-size: 4.94cqw; color: rgba(42, 46, 26, 0.8); }
.cal__day--mark { color: var(--crema); z-index: 0; }
.cal__day--mark::before {
  content: "";
  position: absolute;
  inset: 3.8% -1.5%;
  z-index: -1;
  background: var(--tinta);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5S1 14.6 1 7.2A5.7 5.7 0 0 1 12 4.3 5.7 5.7 0 0 1 23 7.2c0 7.4-11 14.3-11 14.3z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.5S1 14.6 1 7.2A5.7 5.7 0 0 1 12 4.3 5.7 5.7 0 0 1 23 7.2c0 7.4-11 14.3-11 14.3z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: beat 1.6s ease-in-out infinite;
}
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } }

/* ============ 05 · Programa (enredadera) ============ */

.timeline {
  --row: 8.5rem;
  --gap: 1.2rem;
  --s: calc(var(--row) + var(--gap));        /* distancia entre flores (effects.js la mide si las filas crecen) */
  --row0: calc(var(--row) / 2);              /* centro de la primera fila */
  --u: calc(var(--s) / 375.29);              /* 1 px del Figma */
  --vine-w: calc(var(--u) * 158.28);
  --vine-h: calc(var(--u) * 1741.7);
  --vine-top: calc(var(--row0) - var(--u) * 117.25);
  --spread: min(100vw, calc(var(--u) * 1080));
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 1rem 0 0;
}
.timeline__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
/* Enredadera: un trazo tenue de guía y, encima, el mismo dibujo que crece con el scroll
   (--p de 0 a 1, lo calcula effects.js). */
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: calc(50% - var(--vine-w) / 2);
  top: var(--vine-top);
  width: var(--vine-w);
  height: var(--vine-h);
  background: url(assets/enredadera.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.timeline::before { opacity: 0.16; }
.timeline::after { clip-path: inset(0 0 calc((1 - var(--p, 0)) * 100%) 0); }
.no-js .timeline::after { clip-path: none; }

/* Circulitos sueltos alrededor del programa: aparecen a medida que la enredadera pasa por su altura */
.ring {
  position: absolute;
  left: calc(50% + var(--x) * var(--spread));
  top: calc(var(--vine-top) + var(--y) * var(--vine-h));
  width: calc(var(--u) * 14.7);
  height: calc(var(--u) * 14.7);
  margin: calc(var(--u) * -7.35) 0 0 calc(var(--u) * -7.35);
  border: max(1.2px, calc(var(--u) * 3.3)) solid var(--tinta);
  border-radius: 50%;
  opacity: calc((var(--p, 0) - var(--y) * 0.85 + 0.125) * 8);
  transition: opacity 0.5s ease;
}
.no-js .ring { opacity: 1; }

.t-item {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr var(--vine-w) 1fr;
  align-items: center;
  column-gap: 0.6rem;
  min-height: var(--row);
}
.t-item__icon { grid-row: 1; display: flex; }
.t-item__icon img { width: min(30vw, 150px); height: auto; }
.t-item--wide .t-item__icon img { width: min(34vw, 172px); }
/* Flor sobre la enredadera (--dx/--dy: su lugar exacto en el dibujo, en px del Figma) */
.t-item__dot {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: calc(var(--u) * 60);
  aspect-ratio: 1;
  background: url(assets/icons/flor-1.svg) center / contain no-repeat;
  translate: calc(var(--dx, 0) * var(--u)) calc(var(--dy, 0) * var(--u));
  transform: scale(0.4);
  opacity: 0.4;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
.t-item:nth-child(1) { --dx: 7.11;  --dy: -10.13; }
.t-item:nth-child(2) { --dx: 13.11; --dy: 4.84; }
.t-item:nth-child(3) { --dx: 7.74;  --dy: 11.55; }
.t-item:nth-child(4) { --dx: -9.64; --dy: 2.89; }
.t-item:nth-child(5) { --dx: 6.86;  --dy: -9.15; }
.t-item:nth-child(3) .t-item__dot { background-image: url(assets/icons/flor-2.svg); }
.t-item:nth-child(n+4) .t-item__dot { background-image: url(assets/icons/flor-3.svg); }

.t-item__text { grid-row: 1; display: flex; flex-direction: column; }
.t-item__time { font-size: clamp(1.1rem, 4.7vw, 1.5rem); color: var(--rosa); line-height: 1.25; }
.t-item__label { font-size: clamp(1.18rem, 5.1vw, 1.6rem); line-height: 1.2; }

.t-item--icon-left  .t-item__icon { grid-column: 1; justify-content: flex-end; }
.t-item--icon-left  .t-item__text { grid-column: 3; text-align: left; }
.t-item--icon-right .t-item__icon { grid-column: 3; justify-content: flex-start; }
.t-item--icon-right .t-item__text { grid-column: 1; text-align: right; }

/* Cada ítem entra desde el lado de su ícono cuando la línea llega a él */
.js .t-item__icon, .js .t-item__text { opacity: 0; transition: opacity 0.8s ease, transform 0.9s var(--ease-out); }
.js .t-item--icon-left  .t-item__icon, .js .t-item--icon-right .t-item__text { transform: translateX(-24px); }
.js .t-item--icon-right .t-item__icon, .js .t-item--icon-left  .t-item__text { transform: translateX(24px); }
.t-item.is-in .t-item__icon, .t-item.is-in .t-item__text { opacity: 1; transform: none; }
.t-item.is-in .t-item__text { transition-delay: 0.12s; }
.t-item.is-in .t-item__dot { transform: scale(1); opacity: 1; }
.no-js .t-item__dot { transform: none; opacity: 1; }

/* ============ 07 · Confirmación ============ */

#rsvp-form {
  width: 100%;
  max-width: 460px;
  margin-top: 0.4rem;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 1.9rem;
}
.field { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.field > label, .field > legend {
  padding: 0;
  margin-bottom: 0.15rem;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--tinta);
}
.field input[type="text"], .field input[type="number"] {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: var(--arena);
  font-family: var(--body);
  font-size: 1rem;
  color: var(--tinta);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.field input:focus { outline: none; border-color: var(--rosa); background: var(--papel); box-shadow: 0 0 0 3px rgba(184, 113, 119, 0.18); }

/* Opción (componente del Figma): pastilla arena con texto rosa; los checks llevan un cuadradito rosa.
   El input cubre toda la pastilla (invisible) y el estado elegido invierte los colores. */
.field .choice {
  position: relative;
  display: block;
  margin: 0;
  border-radius: 0.6rem;
  background: var(--arena);
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--rosa);
  cursor: pointer;
  transition: transform 0.15s ease;
}
.choice:active { transform: scale(0.99); }
.choice input {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choice span {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.8rem 1rem;
  border: 1px solid transparent;
  border-radius: inherit;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.choice--check span::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  background: currentColor;
}
.choice input:checked + span { background: var(--rosa); color: var(--crema); }
.choice input:focus-visible + span { outline: 2px solid var(--rosa); outline-offset: 2px; }

#submit-btn { align-self: center; margin-top: 0.2rem; min-width: 9.2rem; color: var(--tinta); }
#submit-btn:disabled { opacity: 0.6; cursor: wait; }

.form-note { margin: 0; text-align: center; font-size: 1.05rem; }
.form-note--error { color: #A8465A; }

.notes { max-width: 30rem; color: var(--tinta); font-size: clamp(1.02rem, 4.2vw, 1.2rem); line-height: 1.5; text-wrap: pretty; }
.notes p { margin: 0 0 0.9rem; }
.notes p:last-child { margin: 0; }

/* ============ 08 · Cierre (franja sutil) ============ */

.closing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 2.6rem 1.5rem 2.8rem;
  text-align: center;
  color: var(--crema);
}
/* Como en el Figma: la franja de arriba de la foto, espejada y desenfocada (9 px sobre 1080), bajo el rosa al 69 % */
.closing__bg {
  inset: -14px;
  width: calc(100% + 28px);
  height: calc(100% + 28px);
  max-width: none;
  object-position: 50% 0;
  transform: scaleY(-1);
  filter: blur(clamp(3.5px, 0.83vw, 9px));
}
.closing__veil { position: absolute; inset: 0; z-index: -2; background: rgba(184, 113, 119, 0.69); }
.closing__text { margin: 0; font-size: clamp(1.05rem, 4.4vw, 1.25rem); letter-spacing: 0.02em; }

/* ============ Pétalos ============ */

.petals { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute;
  top: -40px;
  width: var(--s);
  height: calc(var(--s) * 0.72);
  border-radius: 80% 0 80% 0;
  background: var(--c);
  opacity: 0.9;
  animation: fall var(--t) cubic-bezier(0.3, 0.1, 0.4, 1) var(--delay) forwards;
}
@keyframes fall {
  0%   { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(var(--dx), 110vh) rotate(var(--r)); opacity: 0.6; }
}

/* ============ Música ============ */

#music-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1.5px solid var(--rosa);
  background: var(--papel);
  color: var(--tinta);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(42, 46, 26, 0.2);
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
#music-toggle:hover { opacity: 1; transform: scale(1.05); }
#music-toggle.is-playing #music-icon { display: inline-block; animation: music-pulse 1.6s ease-in-out infinite; }
@keyframes music-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* ============ Tablet y PC ============ */

@media (min-width: 768px) {
  .section { --gap: 2.4rem; padding: 4.5rem 2.5rem; }
  .section--prog { padding-top: 6rem; padding-bottom: 5rem; }
  .section--airy { padding-top: 7.5rem; padding-bottom: 7.5rem; }
  .section--form { padding-top: 6rem; padding-bottom: 8rem; }
  .invite { padding-bottom: 5.5rem; }
  :root { --title-size: clamp(3.1rem, 5vw, 4.2rem); }
  .title--wide { max-width: 30ch; font-size: clamp(2.3rem, 3.8vw, 3.1rem); }
  .lead { font-size: clamp(1.4rem, 1.9vw, 1.65rem); max-width: 40rem; }
  .venue-logo { width: 128px; }
  .orn--corazon, .orn--voluta { width: 230px; }
  .orn--divisor { width: 128px; }
  .body { font-size: clamp(1.2rem, 1.6vw, 1.4rem); line-height: 1.65; max-width: 40rem; }
  .body--wide { max-width: 46rem; }
  .detail { font-size: clamp(1.6rem, 2.4vw, 2rem); }
  .btn { font-size: 1.12rem; padding-inline: 2.2rem; }

  .hero__inner { max-width: 820px; --g: 3.4rem; }
  .eyebrow { font-size: clamp(1.6rem, 2.4vw, 2rem); }
  .names { font-size: clamp(5.4rem, 9vw, 8.2rem); }
  .orn--fleurons { width: 230px; }

  .sobre { --w: min(48vw, 540px); }
  .gyps { width: min(20vw, 260px); }
  .gyps--l { left: 4%; }
  .gyps--r { right: 4%; }
  .invite__hint, .intro__hint { font-size: 1rem; }
  .intro__grano::after { background-size: 256px 256px; }

  .timeline { max-width: 820px; --row: 11rem; --gap: 1.8rem; }
  .t-item { column-gap: 1.6rem; }
  .t-item__icon img { width: 170px; }
  .t-item--wide .t-item__icon img { width: 205px; }
  .t-item__time { font-size: clamp(1.45rem, 2vw, 1.75rem); }
  .t-item__label { font-size: clamp(1.6rem, 2.2vw, 1.9rem); }

  #rsvp-form { max-width: 620px; gap: 2.2rem; }
  .field > label, .field > legend { font-size: 1.4rem; }
  .field input[type="text"], .field input[type="number"] { font-size: 1.1rem; padding: 0.95rem 1.1rem; }
  .field .choice { font-size: 1.18rem; }
  .choice span { padding: 0.95rem 1.2rem; }
  .choice:hover span { border-color: rgba(184, 113, 119, 0.5); }
  .notes { max-width: 40rem; font-size: clamp(1.2rem, 1.6vw, 1.4rem); }
  .form-note { font-size: 1.15rem; }

  .closing { padding: 3.4rem 2rem 3.6rem; }
  .closing__text { font-size: 1.45rem; }
}

@media (min-width: 768px) and (min-resolution: 1.5dppx) {
  .intro__grano::after { background-size: 128px 128px; }
}

@media (min-width: 1200px) {
  .section { padding: 5.5rem 3rem; }
  .section--prog { padding-top: 7rem; padding-bottom: 6rem; }
  .section--airy { padding-top: 9rem; padding-bottom: 9rem; }
  .section--form { padding-top: 7rem; padding-bottom: 9rem; }
  .invite { padding-bottom: 6.5rem; }
  :root { --title-size: 4.5rem; }
  .title--wide { font-size: 3.4rem; }
  .body, .notes { font-size: 1.45rem; }
  .sobre { --w: 580px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
    transition-delay: 0s !important;
  }
  .petals { display: none; }
}