/* Laura & Kelvin — 5 de diciembre de 2026
   Built from Figma oG2ikvcXGVAPPayCySRakN (desktop frames 1512 wide,
   mobile frame 566 wide). Every size is written in Figma pixels times
   --u, so the layout scales with the viewport the way the frames do. */

@font-face {
  font-family: 'Aphrodite';
  src: url('fonts/Aphrodite-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Aphrodite Stylistic';
  src: url('fonts/Aphrodite-Stylistic.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Berton';
  src: url('fonts/Berton-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Venetian 301';
  src: url('fonts/venetian-301.otf') format('opentype');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --cream: #E5E2DC;
  --sage: #A7AC99;
  --green: #4D5B45;
  --ink: #262824;
  --ink-deep: #0c171d;
  --olive: #535931;
  --paper: #fdfbf9;
  --charcoal: #424242;

  --heading: 'Aphrodite', 'Snell Roundhand', cursive;
  --heading-alt: 'Aphrodite Stylistic', 'Aphrodite', cursive;
  --body: 'Berton', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Venetian 301', 'EB Garamond', Georgia, serif;

  /* 1 Figma pixel. Desktop frames are 1512 wide. */
  --u: calc(min(100vw, 1512px) / 1512);
  --nav-h: calc(76 * var(--u));
}

@media (max-width: 780px) {
  /* Mobile frame is 566 wide. */
  :root { --u: calc(100vw / 566); --nav-h: calc(110 * var(--u)); }
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--serif);
  font-style: italic;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

/* Type roles */
.t-head { font-family: var(--heading); font-style: normal; font-weight: 400; }
.t-body { font-family: var(--body); font-style: normal; }
/* Venetian in capitals — replaces the New Icon cuts the Figma still uses. */
.t-caps { font-family: var(--serif); font-style: italic; text-transform: uppercase; }

.reveal { opacity: 0; transform: translateY(24px); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 calc(40 * var(--u));
  background: var(--sage);
  transition: background-color .35s ease;
}
.site-nav__logo {
  font-family: var(--heading); font-style: normal;
  font-size: max(18px, calc(28 * var(--u))); letter-spacing: 0.06em;
  color: var(--green); text-decoration: none; white-space: nowrap;
}
.site-nav__links { display: flex; gap: max(16px, calc(30 * var(--u))); }
.site-nav__links a {
  font-size: max(14px, calc(21 * var(--u))); letter-spacing: 0.08em;
  color: var(--ink-deep); text-decoration: none; white-space: nowrap;
  transition: opacity .2s ease;
}
.site-nav__links a:hover { opacity: .6; }
.site-nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.site-nav__burger { display: none; }
.site-nav__overlay { display: none; }

/* Home: the hero only carries the monogram (as in the Figma); the sage
   bar slides in once the hero has scrolled past. */
.site-nav--home { transform: translateY(-100%); transition: transform .4s ease; }
.site-nav--home.is-solid { transform: none; }
/* Cover opening: the bar stays over the photo, without its sage fill. */
.site-nav--over:not(.is-solid) { transform: none; background: transparent; }
.site-nav--over:not(.is-solid) .site-nav__logo { opacity: 1; color: #fff; }
.site-nav--over:not(.is-solid) .site-nav__logo, .site-nav--over:not(.is-solid) .site-nav__links a { text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.site-nav--over:not(.is-solid) .site-nav__burger span { background: #fff; }
@media (min-width: 781px) {
  .site-nav--over:not(.is-solid) .site-nav__links a { color: #fff; }
}

@media (max-width: 780px) {
  /* Phones keep the burger reachable over the hero. */
  .site-nav--home { transform: none; background: transparent; }
  .site-nav--home .site-nav__logo { opacity: 0; transition: opacity .35s ease; }
  .site-nav--home.is-solid { background: var(--sage); }
  .site-nav--home.is-solid .site-nav__logo { opacity: 1; }
  .site-nav--over.site-nav--menu-open .site-nav__burger span { background: var(--ink); }
}

.page { padding-top: var(--nav-h); }

@media (max-width: 780px) {
  .site-nav { padding: 0 calc(30 * var(--u)); }
  .site-nav__logo { font-size: calc(34 * var(--u)); }
  .site-nav__burger {
    display: flex; flex-direction: column; justify-content: center; gap: calc(12 * var(--u));
    width: calc(60 * var(--u)); height: calc(60 * var(--u));
    padding: 0; border: 0; background: none; cursor: pointer; z-index: 2;
  }
  .site-nav__burger span { display: block; height: 1.5px; width: 100%; background: var(--ink); transition: transform .3s ease, opacity .3s ease; }
  .site-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(calc(12 * var(--u) + 1.5px)) rotate(45deg); }
  .site-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .site-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(calc(-12 * var(--u) - 1.5px)) rotate(-45deg); }

  .site-nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px);
    flex-direction: column; justify-content: center; gap: 22px;
    padding: 0 40px; background: var(--cream);
    transform: translateX(100%); transition: transform .4s ease;
  }
  .site-nav__links.is-open { transform: none; }
  .site-nav__links a { font-size: 26px; }
  .site-nav__overlay {
    display: block; position: fixed; inset: 0; background: rgba(38, 40, 36, .35);
    opacity: 0; pointer-events: none; transition: opacity .4s ease;
  }
  .site-nav__overlay.is-open { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

/* ── Music toggle ────────────────────────────────────────────────────── */
.site-music { position: fixed; right: 20px; bottom: 20px; z-index: 60; }
.site-music__toggle {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(38, 40, 36, .2);
  background: var(--green); color: var(--cream);
  box-shadow: 0 4px 14px rgba(38, 40, 36, .18);
  cursor: pointer; transition: transform .2s ease;
}
.site-music__toggle:hover { transform: scale(1.06); }
.site-music__icon { width: 20px; height: 20px; }
.site-music__icon--pause { display: none; }
.site-music__toggle.is-playing .site-music__icon--play { display: none; }
.site-music__toggle.is-playing .site-music__icon--pause { display: block; }
/* Licensed Spotify embed kept off-screen; only the button above is visible. */
.site-music__embed { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; top: 0; }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: #fff;
  font-family: var(--serif); font-style: italic;
  font-size: calc(34 * var(--u)); letter-spacing: 0.09em;
  height: calc(53 * var(--u)); padding: 0 calc(22 * var(--u));
  text-decoration: none; border: 0; cursor: pointer;
  transition: background-color .2s ease;
}
.btn:hover { background: #3c4836; }

/* ── Home · hero ─────────────────────────────────────────────────────── */
/* Closed state from the Figma frames "sobre cerrado": monogram, names,
   the envelope's address side and the click hint. site.js runs the
   opening (flip → flap → invitation out) and owns every position after
   the click; the values here are only the starting layout. */
.hero {
  --env-w: 589; --env-top: 270;
  position: relative; height: calc(983 * var(--u)); overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(24, 26, 22, .5) 0%, rgba(24, 26, 22, .12) 32%, rgba(24, 26, 22, 0) 55%, rgba(24, 26, 22, .3) 100%),
    #6f716c url('images/hero-photo.webp') right bottom / 120% auto no-repeat;
}
.hero__intro {
  position: absolute; left: 0; right: 0; top: calc(64 * var(--u)); text-align: center; color: #fff; z-index: 6;
  text-shadow: 0 1px 10px rgba(24, 26, 22, .35);
}
.hero__kicker { font-size: calc(30 * var(--u)); letter-spacing: 0.09em; }
.hero__names { margin-top: calc(26 * var(--u)); font-size: calc(60 * var(--u)); letter-spacing: 0.09em; line-height: 1.25; }
.hero__hint {
  position: absolute; left: 0; right: 0; top: calc(740 * var(--u)); z-index: 6;
  text-align: center; color: #fff; font-size: calc(26 * var(--u)); letter-spacing: 0.06em;
  text-shadow: 0 1px 6px rgba(38, 40, 36, .35);
  cursor: pointer; animation: lk-hint 2.4s ease-in-out infinite;
}
@keyframes lk-hint { 50% { opacity: .55; } }

/* Envelope box = the back's 901×685 artwork; every layer is sized off
   its width so JS can move/scale the whole envelope with left/top/width.
   No z-index/perspective here on purpose: the envelope must not form its
   own stacking context, so the hero-level .lk-clip can sit between the
   back and the pocket. 3D depth comes from GSAP's transformPerspective. */
.lk-env {
  position: absolute;
  left: calc(50% - var(--env-w) * var(--u) / 2); top: calc(var(--env-top) * var(--u));
  width: calc(var(--env-w) * var(--u)); aspect-ratio: 901 / 685;
}
.lk-env > img, .lk-face img { position: absolute; left: 0; width: 100%; height: auto; max-width: none; }
.lk-flap-open { bottom: 100%; z-index: 1; transform-origin: 50% 100%; }
.lk-back { top: 0; z-index: 1; }
/* Invitation mask: hero-wide, its bottom kept on the envelope's bottom
   edge by site.js, so the card is never seen below the envelope. */
.lk-clip { position: absolute; left: 0; right: 0; top: 0; height: 0; overflow: hidden; z-index: 2; pointer-events: none; }
.lk-pocket { top: 0; z-index: 3; height: 100% !important; } /* art is 680 tall vs the back's 685: stretch so the back never peeks below */
.lk-flap-closed { top: 0; z-index: 4; transform-origin: 50% 0; }
.lk-flip {
  position: absolute; inset: 0; z-index: 5; padding: 0; border: 0; background: none; cursor: pointer;
  transform-style: preserve-3d;
}
.lk-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.lk-face img { top: 0; }
.lk-face--rear { transform: rotateY(180deg); }
.lk-guest {
  position: absolute; left: 10%; right: 10%; top: 50%; transform: translateY(-50%);
  font-family: var(--heading); font-style: normal; color: var(--green);
  font-size: calc(var(--env-w) * 0.051 * var(--u) * var(--name-scale, 1)); letter-spacing: 0.09em; line-height: 1.3;
  text-align: center;
}
/* Pieces only revealed by site.js once the flip lands. */
.js .lk-flap-open, .js .lk-back, .js .lk-pocket, .js .lk-flap-closed, .js .hero__card { visibility: hidden; }
.hero__card { position: absolute; z-index: 2; max-width: none; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .18)); }
.hero__card.is-front { z-index: 7; }

/* Without JS: no envelope, just the invitation. */
html:not(.js) .lk-flip, html:not(.js) .lk-flap-closed, html:not(.js) .hero__hint, html:not(.js) .hero__intro { display: none; }

/* Opening: monogram cover (default) or envelope (access_group "sobre").
   While site.js asks the platform which one, only the photo shows. */
.hero__cover {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  /* Soft shade behind the white monogram so it reads over tree and sky. */
  background: radial-gradient(ellipse 34% 46% at 50% 50%, rgba(18, 20, 16, .55) 0%, rgba(18, 20, 16, .28) 55%, rgba(18, 20, 16, 0) 100%);
}
.hero__cover-mark { width: calc(300 * var(--u)); height: auto; filter: brightness(0) invert(1) drop-shadow(0 2px 18px rgba(0, 0, 0, .45)); }
.hero--pending .hero__cover,
.hero--pending .hero__intro, .hero--pending .lk-clip, .hero--pending .lk-env, .hero--pending .hero__hint { visibility: hidden; }
.hero--cover .hero__intro, .hero--cover .lk-clip, .hero--cover .lk-env, .hero--cover .hero__hint,
.hero--sobre .hero__cover { display: none; }
.hero--cover .hero__cover-mark { animation: lk-cover-in 1.4s ease-out both; }
@keyframes lk-cover-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero--cover .hero__cover-mark { animation: none; } }
html:not(.js) .hero__cover { visibility: visible; }

/* Cover photo option: the arch (EMC_4253). The monogram sits inside the
   arch, above the couple. */
.hero--arco {
  background-image: linear-gradient(to bottom, rgba(24, 26, 22, .6) 0%, rgba(24, 26, 22, .18) 14%, rgba(24, 26, 22, .05) 30%, rgba(24, 26, 22, 0) 55%, rgba(24, 26, 22, .25) 100%), url('images/hero-arco.webp');
  background-size: cover; background-position: center 45%;
}
.hero--arco .hero__cover {
  align-items: flex-start; padding-top: calc(120 * var(--u));
  background: radial-gradient(ellipse 22% 30% at 50% 31%, rgba(18, 20, 16, .5) 0%, rgba(18, 20, 16, .22) 60%, rgba(18, 20, 16, 0) 100%);
}

/* Envelope version: once the invitation is out, a cue to keep scrolling. */
.hero__scroll {
  position: absolute; left: 50%; bottom: calc(26 * var(--u)); z-index: 8;
  display: flex; align-items: center; gap: calc(8 * var(--u));
  transform: translateX(-50%);
  padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u));
  border-radius: 999px; background: rgba(77, 91, 69, .88); box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  font-family: var(--serif); font-style: italic; font-size: calc(22 * var(--u)); letter-spacing: 0.09em;
  color: var(--cream); text-decoration: none; white-space: nowrap;
  opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility .8s;
}
.hero__scroll svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); animation: lk-nudge 1.8s ease-in-out infinite; }
.hero__scroll.is-on { opacity: 1; visibility: visible; }
.hero--cover .hero__scroll { display: none; }
@keyframes lk-nudge { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll svg { animation: none; } }
html:not(.js) .lk-clip, html:not(.js) .lk-env { display: none; }
html:not(.js) .lk-clip { overflow: visible; height: 100%; }
html:not(.js) .hero__card { left: 50%; top: 8%; width: 30%; transform: translateX(-50%); }

@media (max-width: 780px) {
  .hero { --env-w: 480; --env-top: 360; height: calc(1183 * var(--u)); background-image: linear-gradient(to bottom, rgba(24, 26, 22, .5) 0%, rgba(24, 26, 22, .12) 28%, rgba(24, 26, 22, 0) 50%, rgba(24, 26, 22, .3) 100%), url('images/hero-photo-portrait.webp'); background-size: cover; background-position: center; }
  .hero__intro { top: calc(150 * var(--u)); }
  .hero__kicker { font-size: calc(28 * var(--u)); }
  .hero__names { font-size: calc(36 * var(--u)); white-space: nowrap; }
  .hero__hint { top: calc(760 * var(--u)); font-size: calc(26 * var(--u)); }
  .hero__cover { background: radial-gradient(ellipse 62% 32% at 50% 50%, rgba(18, 20, 16, .62) 0%, rgba(18, 20, 16, .32) 55%, rgba(18, 20, 16, 0) 100%); }
  .hero__cover-mark { width: calc(250 * var(--u)); }
  .hero--arco { background-image: linear-gradient(to bottom, rgba(24, 26, 22, .45) 0%, rgba(24, 26, 22, .08) 25%, rgba(24, 26, 22, 0) 55%, rgba(24, 26, 22, .25) 100%), url('images/hero-arco-portrait.webp'); background-position: center; }
  .hero--arco .hero__cover { padding-top: calc(250 * var(--u)); background: radial-gradient(ellipse 48% 18% at 50% 34%, rgba(18, 20, 16, .5) 0%, rgba(18, 20, 16, .22) 60%, rgba(18, 20, 16, 0) 100%); }
  .hero__scroll { font-size: calc(24 * var(--u)); bottom: calc(30 * var(--u)); }
  .hero__scroll svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
}

/* ── Home · historia + gallery (paper band); countdown closes the page ── */
.paper {
  position: relative;
  background: var(--cream) url('images/bg-paper.webp') center top / cover;
}

.countdown {
  position: relative; text-align: center; color: var(--green);
  padding: calc(120 * var(--u)) 0 calc(150 * var(--u));
}
/* White-background art: multiply lets the paper texture show through. */
.countdown__car { width: calc(460 * var(--u)); margin: 0 auto calc(30 * var(--u)); mix-blend-mode: multiply; }
.countdown__eyebrow { font-size: calc(40 * var(--u)); letter-spacing: 0.09em; }
.countdown__clock {
  display: flex; justify-content: center; align-items: baseline;
  gap: calc(40 * var(--u)); margin-top: calc(6 * var(--u));
}
.countdown__unit { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
.countdown__num { font-size: calc(80 * var(--u)); letter-spacing: 0.09em; line-height: 1; }
.countdown__label { font-size: calc(30 * var(--u)); letter-spacing: 0.09em; }
.countdown__date { margin-top: calc(28 * var(--u)); font-size: calc(30 * var(--u)); letter-spacing: 0.09em; line-height: 1.6; color: var(--ink); }

.gallery { position: relative; padding-top: calc(10 * var(--u)); }
.gallery__flower { position: absolute; left: calc(1190 * var(--u)); top: calc(-147 * var(--u)); width: calc(157 * var(--u)); } /* right: the historia sprig sits on the left */
.gallery__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(20 * var(--u)); margin: 0 calc(-4 * var(--u)); }
.gallery__cell { position: relative; height: calc(557 * var(--u)); overflow: hidden; }
.gallery__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.historia {
  position: relative;
  display: grid; grid-template-columns: calc(900 * var(--u)) 1fr; align-items: center;
  padding: calc(102 * var(--u)) 0 calc(110 * var(--u));
  scroll-margin-top: var(--nav-h);
}
.historia__text { text-align: center; padding-left: calc(120 * var(--u)); }
.historia__title { font-size: calc(50 * var(--u)); letter-spacing: 0.09em; color: var(--green); }
.historia__body {
  margin: calc(34 * var(--u)) auto 0; max-width: calc(600 * var(--u));
  font-size: calc(24 * var(--u)); letter-spacing: 0.09em; line-height: 1.3; color: var(--ink);
}
.historia__body p + p { margin-top: 1.3em; }
.historia__sign { margin-top: calc(50 * var(--u)); font-family: var(--heading-alt); font-style: normal; font-size: calc(30 * var(--u)); letter-spacing: 0.09em; color: var(--green); }
.historia__couple { width: calc(381 * var(--u)); margin-left: calc(93 * var(--u)); }
.historia__sprig { position: absolute; left: calc(160 * var(--u)); bottom: calc(10 * var(--u)); width: calc(167 * var(--u)); transform: rotate(-77.25deg); }

/* Mobile: positions from the Figma "Home" mobile frame (566 wide). */
@media (max-width: 780px) {
  .countdown { height: auto; padding: calc(90 * var(--u)) 0 calc(90 * var(--u)); }
  .countdown__car { width: calc(470 * var(--u)); margin-bottom: calc(24 * var(--u)); }
  .countdown__eyebrow { font-size: calc(40 * var(--u)); }
  .countdown__clock { gap: calc(26 * var(--u)); margin-top: calc(20 * var(--u)); }
  .countdown__num { font-size: calc(60 * var(--u)); }
  .countdown__label { font-size: calc(26 * var(--u)); }
  .countdown__unit:last-child { display: none; } /* the mobile frame has no seconds */
  .countdown__date { margin-top: calc(40 * var(--u)); font-size: calc(26 * var(--u)); }

  .gallery { padding: calc(161 * var(--u)) calc(4 * var(--u)) 0; }
  .gallery__flower { left: calc(41 * var(--u)); top: 0; width: calc(157 * var(--u)); }
  .gallery__grid { grid-template-columns: repeat(2, 1fr); gap: calc(17 * var(--u)) calc(15 * var(--u)); margin: 0; }
  .gallery__cell { height: calc(414 * var(--u)); }
  .gallery__cell--4 { order: 3; }
  .gallery__cell--3 { order: 4; }

  .historia { grid-template-columns: 1fr; padding: calc(221 * var(--u)) 0 calc(34 * var(--u)); }
  .historia__text { padding: 0 calc(40 * var(--u)); }
  .historia__title { font-size: calc(47 * var(--u)); }
  .historia__body { margin-top: calc(8 * var(--u)); max-width: calc(430 * var(--u)); font-size: calc(24 * var(--u)); }
  .historia__sign { margin-top: calc(40 * var(--u)); }
  .historia__couple { margin: calc(100 * var(--u)) auto 0; width: calc(381 * var(--u)); }
  .historia__sprig { left: calc(206 * var(--u)); top: calc(-28 * var(--u)); bottom: auto; transform: rotate(-101deg); }
}

/* ── Home · explora + RSVP teaser ────────────────────────────────────── */
.explora {
  position: relative; overflow: hidden;
  background: var(--cream) url('images/bg-explora.webp') center top / cover;
  padding: calc(126 * var(--u)) 0 calc(80 * var(--u));
}
.explora__grid { display: grid; grid-template-columns: calc(885 * var(--u)) 1fr; align-items: center; }
.explora__col--mono { display: flex; justify-content: center; align-items: center; }
.explora__title { font-size: calc(50 * var(--u)); letter-spacing: 0.09em; color: var(--olive); text-align: center; padding-left: calc(30 * var(--u)); width: calc(888 * var(--u)); }
.explora__list { margin: calc(70 * var(--u)) 0 0 calc(141 * var(--u)); width: calc(695 * var(--u)); border-top: 1px solid var(--ink-deep); }
.explora__item { border-bottom: 1px solid var(--ink-deep); }
.explora__item a {
  display: grid; grid-template-columns: calc(129 * var(--u)) 1fr calc(70 * var(--u)); align-items: center;
  height: calc(128 * var(--u)); padding-left: calc(8 * var(--u));
  color: var(--ink-deep); text-decoration: none;
}
.explora__num { font-size: calc(80 * var(--u)); letter-spacing: 0.09em; line-height: 1; }
.explora__eyebrow { display: block; font-size: calc(40 * var(--u)); letter-spacing: 0.09em; line-height: 1.1; }
.explora__name { display: block; font-size: calc(31 * var(--u)); letter-spacing: 0.07em; line-height: 1.15; white-space: nowrap; }
.explora__arrow { justify-self: end; font-size: calc(60 * var(--u)); padding-right: calc(20 * var(--u)); transition: transform .25s ease; }
.explora__item a:hover .explora__arrow { transform: translateX(8px); }

.monogram { position: relative; width: calc(546 * var(--u)); height: calc(672 * var(--u)); }
/* Photo centred in the frame. The mask shape is inlined so it also works
   when the page is opened straight from disk (file://). */
.monogram__mask {
  position: absolute; left: 50%; top: 50%;
  width: calc(533 * var(--u)); height: calc(656 * var(--u));
  transform: translate(-50%, -50%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 533.078 656.37' preserveAspectRatio='none'%3E%3Cpath d='M114.278 82.6784H85.8702L83.955 113.64C56.2918 136.196 0.773783 211.121 0.00772349 330.371C-0.758336 449.621 55.6534 524.546 83.955 547.102V576.148H111.405C134.281 602.535 179.712 659.138 270.682 656.265C358.14 653.503 401.55 603.173 421.659 576.148H449.429V547.102C477.199 526.354 538.164 446.237 532.738 310.581C528.397 202.056 475.39 134.068 449.429 113.64V82.6784H421.659C401.976 55.4407 358.779 0.92774 265.256 0.0078406C187.373 -0.758219 132.153 54.8023 114.278 82.6784Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 533.078 656.37' preserveAspectRatio='none'%3E%3Cpath d='M114.278 82.6784H85.8702L83.955 113.64C56.2918 136.196 0.773783 211.121 0.00772349 330.371C-0.758336 449.621 55.6534 524.546 83.955 547.102V576.148H111.405C134.281 602.535 179.712 659.138 270.682 656.265C358.14 653.503 401.55 603.173 421.659 576.148H449.429V547.102C477.199 526.354 538.164 446.237 532.738 310.581C528.397 202.056 475.39 134.068 449.429 113.64V82.6784H421.659C401.976 55.4407 358.779 0.92774 265.256 0.0078406C187.373 -0.758219 132.153 54.8023 114.278 82.6784Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.monogram__mask img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.monogram__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.explora__candle { position: absolute; left: calc(1332 * var(--u)); top: calc(812 * var(--u)); width: calc(86 * var(--u)); }

.teaser { position: relative; height: calc(760 * var(--u)); margin-top: calc(60 * var(--u)); }
.teaser__stage { position: absolute; left: 50%; top: 0; width: calc(1124 * var(--u)); height: 100%; transform: translateX(-50%); }
.teaser__photo {
  position: absolute; left: calc(25 * var(--u)); top: calc(23 * var(--u));
  width: calc(408 * var(--u)); height: calc(452 * var(--u));
  background: var(--sage); transform: rotate(-6.91deg);
  padding: calc(26 * var(--u)) calc(26 * var(--u)) 0;
}
.teaser__photo img { width: 100%; height: calc(395 * var(--u)); object-fit: cover; }
.teaser__cake {
  position: absolute; left: calc(574 * var(--u)); top: calc(45 * var(--u));
  width: calc(408 * var(--u)); height: calc(452 * var(--u)); background: var(--sage);
}
.teaser__cake::before {
  content: ''; position: absolute; left: calc(27 * var(--u)); top: calc(29 * var(--u));
  width: calc(355 * var(--u)); height: calc(394 * var(--u));
  background: var(--cream); box-shadow: inset 0 4px 4px rgba(0, 0, 0, .25);
}
.teaser__cake img { position: absolute; left: calc(1 * var(--u)); top: calc(75 * var(--u)); width: calc(372 * var(--u)); }
.teaser__card {
  position: absolute; z-index: 2; left: calc(320 * var(--u)); top: calc(118 * var(--u));
  width: calc(408 * var(--u)); height: calc(452 * var(--u));
  background: var(--sage); transform: rotate(15deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 calc(40 * var(--u)); text-align: center; color: var(--ink);
  box-shadow: 0 6px 18px rgba(38, 40, 36, .12);
}
.teaser__eyebrow { font-size: calc(30 * var(--u)); letter-spacing: 0.09em; }
.teaser__title { margin-top: calc(12 * var(--u)); font-size: calc(39 * var(--u)); line-height: 1.1; letter-spacing: 0.09em; }
.teaser__text { margin-top: calc(20 * var(--u)); font-size: calc(27 * var(--u)); letter-spacing: 0.09em; line-height: 1.25; }
.teaser__sprig { position: absolute; left: calc(-70 * var(--u)); top: calc(500 * var(--u)); width: calc(97 * var(--u)); transform: rotate(-39deg); }
.teaser__cta { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: calc(69 * var(--u)); width: calc(228 * var(--u)); font-size: calc(48 * var(--u)); }

@media (max-width: 780px) {
  .explora { padding: calc(59 * var(--u)) 0 calc(60 * var(--u)); }
  .explora__grid { grid-template-columns: 1fr; }
  .explora__col--mono { order: -1; }
  .explora__title { width: auto; padding: 0; margin-top: calc(60 * var(--u)); font-size: calc(47 * var(--u)); }
  .explora__list { margin: calc(40 * var(--u)) auto 0; width: calc(486 * var(--u)); }
  .explora__item a { grid-template-columns: calc(82 * var(--u)) 1fr calc(40 * var(--u)); height: calc(116 * var(--u)); }
  .explora__num { font-size: calc(56 * var(--u)); }
  .explora__eyebrow { font-size: calc(22 * var(--u)); }
  .explora__name { font-size: calc(24 * var(--u)); white-space: normal; }
  .explora__arrow { font-size: calc(40 * var(--u)); padding-right: calc(10 * var(--u)); }
  .explora__candle { left: auto; right: calc(61 * var(--u)); top: calc(1538 * var(--u)); }

  /* Stacked like the mobile frame: photo, invitation card, cake card. */
  .teaser { height: calc(1300 * var(--u)); margin-top: calc(110 * var(--u)); }
  .teaser__stage { width: calc(566 * var(--u)); }
  .teaser__photo { left: calc(-1 * var(--u)); top: calc(23 * var(--u)); }
  .teaser__cake { left: calc(230 * var(--u)); top: calc(687 * var(--u)); transform: rotate(-7deg); }
  .teaser__card { left: calc(90 * var(--u)); top: calc(417 * var(--u)); }
  .teaser__sprig { left: calc(71 * var(--u)); top: calc(931 * var(--u)); transform: none; }
  .teaser__cta { top: calc(1220 * var(--u)); bottom: auto; }
}

/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
  background: var(--green); color: var(--cream);
  text-align: center; padding: 48px 20px 28px;
}
.site-footer__mark { width: 70px; height: auto; margin: 0 auto 14px; filter: invert(93%) sepia(6%) saturate(220%) hue-rotate(10deg); }
.site-footer__line { font-size: 19px; letter-spacing: 0.08em; }
.site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 18px; }
.site-footer__links a { font-size: 17px; letter-spacing: 0.08em; text-decoration: none; opacity: .85; }
.site-footer__links a:hover { opacity: 1; }
.centella-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 26px 0 0;
  padding: 7px 13px; border-radius: 999px;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-style: normal; font-size: 12.5px; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  background: rgba(255, 255, 255, .08); color: var(--cream);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: opacity .15s ease, transform .15s ease;
}
.centella-badge:hover { opacity: .85; transform: translateY(-1px); }
.centella-badge__icon { width: 13px; height: 13px; flex-shrink: 0; }
.centella-badge__icon path { fill: currentColor; }

/* ── Programa ────────────────────────────────────────────────────────── */
.programa-page { background: var(--paper) url('images/bg-dots.webp') center / calc(577 * var(--u)) auto repeat; }
.programa-hero {
  position: relative; height: calc(467 * var(--u));
  background: linear-gradient(rgba(28, 34, 40, .28), rgba(28, 34, 40, .28)), #8f9aa3 url('images/programa-hero.webp') center 42% / cover no-repeat;
  color: #fff; text-align: center;
}
.programa-hero__mark { position: absolute; left: 50%; top: calc(110 * var(--u)); width: calc(135 * var(--u)); height: auto; transform: translateX(-50%); }
.programa-hero__date { position: absolute; left: 0; right: 0; color: #000; top: calc(313 * var(--u)); font-size: calc(25 * var(--u)); letter-spacing: 0.09em; }
.programa-hero__title { position: absolute; left: 0; right: 0; color: #000; top: calc(344 * var(--u)); font-size: calc(60 * var(--u)); letter-spacing: 0.13em; }

.programa-events { display: flex; justify-content: center; gap: calc(108 * var(--u)); padding: calc(66 * var(--u)) 0 calc(80 * var(--u)); }
.programa-event {
  width: calc(475 * var(--u)); min-height: calc(583 * var(--u));
  background: var(--sage); text-align: center; color: var(--ink);
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(50 * var(--u));
  display: flex; flex-direction: column; align-items: center;
}
.programa-event__ill { height: calc(331 * var(--u)); display: flex; align-items: flex-end; }
.programa-event__ill img { max-height: 100%; width: auto; }
.programa-event__ill--church img { width: calc(411 * var(--u)); }
.programa-event__ill--dog img { width: calc(235 * var(--u)); }
.programa-event__title { margin-top: calc(30 * var(--u)); font-size: calc(40 * var(--u)); letter-spacing: 0.09em; }
.programa-event__place { font-size: calc(30 * var(--u)); letter-spacing: 0.09em; line-height: 1.2; }
.programa-event__time { margin-top: calc(10 * var(--u)); font-size: calc(30 * var(--u)); letter-spacing: 0.09em; }

.alojamiento {
  max-width: calc(1058 * var(--u)); margin: 0 auto calc(110 * var(--u));
  background: var(--paper); border: 1px solid var(--sage);
  padding: calc(56 * var(--u)) calc(80 * var(--u)); text-align: center;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.alojamiento__eyebrow { font-size: calc(29 * var(--u)); letter-spacing: 0.09em; color: var(--olive); }
.alojamiento__title { margin-top: calc(8 * var(--u)); font-size: calc(53 * var(--u)); letter-spacing: 0.09em; word-spacing: 0.3em; color: var(--ink-deep); }
.alojamiento__text { margin: calc(24 * var(--u)) auto 0; max-width: calc(700 * var(--u)); font-size: calc(26 * var(--u)); letter-spacing: 0.09em; line-height: 1.35; }
.alojamiento__code { margin-top: calc(28 * var(--u)); font-size: calc(35 * var(--u)); letter-spacing: 0.09em; color: var(--green); }
.alojamiento__btn { margin-top: calc(28 * var(--u)); }

@media (max-width: 780px) {
  .programa-hero { height: calc(420 * var(--u)); background-size: cover; background-position: center; }
  .programa-hero__mark { top: calc(46 * var(--u)); width: calc(108 * var(--u)); }
  .programa-hero__date { top: calc(212 * var(--u)); font-size: calc(24 * var(--u)); }
  .programa-hero__title { top: calc(256 * var(--u)); font-size: calc(54 * var(--u)); }
  .programa-events { flex-direction: column; align-items: center; gap: calc(40 * var(--u)); padding: calc(50 * var(--u)) 0 calc(60 * var(--u)); }
  .programa-event { width: calc(486 * var(--u)); min-height: 0; }
  .alojamiento { margin: 0 calc(40 * var(--u)) calc(80 * var(--u)); padding: calc(44 * var(--u)) calc(30 * var(--u)); }
  .alojamiento__title { font-size: calc(46 * var(--u)); }
  .alojamiento__text { font-size: calc(24 * var(--u)); max-width: none; }
}

/* ── Regalos ─────────────────────────────────────────────────────────── */
.regalos-page { background: var(--cream) url('images/bg-paper.webp') center / cover fixed; }
.regalos { display: grid; grid-template-columns: calc(756 * var(--u)) calc(628 * var(--u)); column-gap: calc(40 * var(--u)); padding: calc(108 * var(--u)) 0 calc(120 * var(--u)); }
.regalos__visual { position: relative; height: calc(700 * var(--u)); }
.regalos__frame {
  position: absolute; left: calc(80 * var(--u)); top: calc(22 * var(--u));
  width: calc(408 * var(--u)); height: calc(551 * var(--u));
  background: var(--sage); transform: rotate(-6.91deg);
  padding: calc(26 * var(--u)) calc(26 * var(--u)) 0;
}
.regalos__frame img.regalos__photo { width: 100%; height: calc(395 * var(--u)); object-fit: cover; }
.regalos__frame .regalos__mono { width: calc(70 * var(--u)); margin: calc(22 * var(--u)) auto 0; }
.m-only, .regalos__dog-m { display: none; }
.regalos__content { position: relative; }
.regalos__dog { position: absolute; left: calc(515 * var(--u)); top: calc(324 * var(--u)); width: calc(201 * var(--u)); }
.regalos__eyebrow { font-size: calc(29 * var(--u)); letter-spacing: 0.09em; color: var(--ink-deep); padding-left: calc(9 * var(--u)); }
.regalos__title { font-size: calc(53 * var(--u)); letter-spacing: 0.09em; color: var(--ink-deep); padding-left: calc(9 * var(--u)); }
.regalos__intro { margin-top: calc(36 * var(--u)); padding: 0 calc(28 * var(--u)) calc(24 * var(--u)) calc(18 * var(--u)); font-size: calc(26 * var(--u)); letter-spacing: 0.09em; line-height: 1.2; color: var(--ink-deep); }
.regalos__intro p + p { margin-top: 1.2em; }
/* Store name with its list link beside it. */
.regalo { display: flex; align-items: center; justify-content: space-between; gap: calc(20 * var(--u)); border-top: 1px solid var(--ink-deep); padding: calc(24 * var(--u)) calc(11 * var(--u)); }
.regalo__name { font-size: calc(35 * var(--u)); letter-spacing: 0.09em; color: var(--ink-deep); }
.regalo .btn { flex-shrink: 0; width: calc(177 * var(--u)); padding: 0; }

@media (max-width: 780px) {
  .regalos-page { background-attachment: scroll; }
  .regalos { grid-template-columns: 1fr; padding: calc(60 * var(--u)) calc(40 * var(--u)) calc(80 * var(--u)); }
  .regalos__visual { height: calc(600 * var(--u)); margin-bottom: calc(70 * var(--u)); }
  .regalos__frame { left: calc(50% - 204 * var(--u)); }
  .regalos__dog { display: none; }
  br.m-only { display: inline; }
  .regalos__dog-m { display: block; position: absolute; right: calc(10 * var(--u)); top: calc(-20 * var(--u)); width: calc(150 * var(--u)); }
  .regalos__eyebrow { font-size: calc(26 * var(--u)); }
  .regalos__title { font-size: calc(50 * var(--u)); }
  .regalos__intro { font-size: calc(24 * var(--u)); }
  .regalo .btn { width: auto; padding: 0 calc(30 * var(--u)); font-size: calc(30 * var(--u)); height: calc(60 * var(--u)); }
}

/* ── Vestimenta ──────────────────────────────────────────────────────── */
.vestimenta-page { background: var(--paper); }
.vestimenta-page .page { position: relative; }
.vestimenta-page .page::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: url('images/bg-linen.webp') center top / cover; opacity: .5;
}
.vestimenta { position: relative; z-index: 1; text-align: center; padding: calc(109 * var(--u)) 0 calc(110 * var(--u)); }
.vestimenta__ill { width: calc(312 * var(--u)); margin: 0 auto; }
.vestimenta__title { margin-top: calc(35 * var(--u)); font-size: calc(53 * var(--u)); letter-spacing: 0.09em; color: var(--ink-deep); }
.vestimenta__vine { width: calc(500 * var(--u)); margin: calc(18 * var(--u)) auto 0; }
.vestimenta__text { margin: calc(26 * var(--u)) auto 0; width: calc(568 * var(--u)); font-size: calc(31 * var(--u)); letter-spacing: 0.09em; line-height: 1.2; color: var(--ink-deep); }
.vestimenta__board {
  position: relative; width: calc(1000 * var(--u)); margin: calc(50 * var(--u)) auto 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u));
}
.vestimenta__mood { margin: 0; }
.vestimenta__mood img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 6; }
.vestimenta__cap { margin-top: calc(14 * var(--u)); font-size: calc(24 * var(--u)); letter-spacing: 0.12em; color: var(--green); }
.vestimenta__lily { position: absolute; left: calc(-150 * var(--u)); top: calc(470 * var(--u)); width: calc(173 * var(--u)); transform: rotate(-30.93deg); }
.vestimenta__note { margin: calc(34 * var(--u)) auto 0; max-width: calc(620 * var(--u)); font-family: var(--serif); font-style: italic; font-size: calc(24 * var(--u)); letter-spacing: 0.06em; line-height: 1.35; color: var(--green); }
.vestimenta__help { margin-top: calc(41 * var(--u)); font-size: calc(30 * var(--u)); letter-spacing: 0.09em; line-height: 1.3; color: var(--ink-deep); }

@media (max-width: 780px) {
  .vestimenta { padding: calc(70 * var(--u)) calc(40 * var(--u)) calc(90 * var(--u)); }
  .vestimenta__vine { width: calc(440 * var(--u)); transform: none; }
  .vestimenta__text { width: auto; margin-top: calc(54 * var(--u)); font-size: calc(26 * var(--u)); }
  .vestimenta__board { width: calc(440 * var(--u)); grid-template-columns: 1fr; gap: calc(36 * var(--u)); }
  .vestimenta__lily { left: calc(-60 * var(--u)); top: auto; bottom: calc(-60 * var(--u)); width: calc(110 * var(--u)); }
  .vestimenta__note { max-width: calc(440 * var(--u)); font-size: calc(22 * var(--u)); }
  .vestimenta__help { font-size: calc(26 * var(--u)); }
}

/* ── Q&A ─────────────────────────────────────────────────────────────── */
.faq { display: grid; grid-template-columns: calc(1037 * var(--u)) 1fr; min-height: calc(921 * var(--u)); }
.faq__panel { background: var(--cream) url('images/bg-paper.webp') center / cover; padding: calc(149 * var(--u)) calc(56 * var(--u)) calc(110 * var(--u)) calc(96 * var(--u)); }
.faq__title { font-size: calc(40 * var(--u)); letter-spacing: 0.09em; line-height: 1.1; color: var(--olive); width: calc(405 * var(--u)); }
.faq__title span { font-size: calc(35 * var(--u)); }
.faq__list { margin-top: calc(42 * var(--u)); border-top: 1px solid var(--ink-deep); }
.faq__item { border-bottom: 1px solid var(--ink-deep); }
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: calc(86 * var(--u)); padding: calc(14 * var(--u)) calc(21 * var(--u)) calc(14 * var(--u)) calc(23 * var(--u));
  font-size: calc(35 * var(--u)); letter-spacing: 0.09em; color: var(--ink-deep);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: '+'; font-size: calc(40 * var(--u)); font-style: normal; transition: transform .25s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 calc(60 * var(--u)) calc(26 * var(--u)) calc(23 * var(--u)); font-size: calc(26 * var(--u)); letter-spacing: 0.09em; line-height: 1.3; color: var(--ink); }
.faq__answer a { color: var(--green); }
.faq__photo { position: relative; overflow: hidden; }
.faq__photo img.faq__img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Title with the dog illustration beside it. */
.faq__head { display: flex; align-items: flex-end; gap: calc(24 * var(--u)); }
.faq__head .faq__title { width: auto; }
.faq__title span { display: block; }
.faq__dog { width: calc(130 * var(--u)); flex-shrink: 0; }

@media (max-width: 780px) {
  .faq { grid-template-columns: 1fr; }
  .faq__photo { height: calc(560 * var(--u)); order: -1; }
  .faq__photo img.faq__img { object-position: center 30%; }
  .faq__panel { padding: calc(60 * var(--u)) calc(40 * var(--u)) calc(80 * var(--u)); }
  .faq__title { width: auto; }
  .faq__item summary { font-size: calc(27 * var(--u)); }
  .faq__answer { font-size: calc(24 * var(--u)); padding-right: calc(23 * var(--u)); }
  .faq__dog { width: calc(130 * var(--u)); }
}

/* ── RSVP ────────────────────────────────────────────────────────────── */
.rsvp-layout { display: grid; grid-template-columns: calc(756 * var(--u)) 1fr; min-height: calc(100vh - var(--nav-h)); }
.rsvp-layout__photo {
  position: relative; background: #f4e3dc url('images/rsvp-diamonds.webp') center / cover;
  display: grid; place-items: center; padding: calc(60 * var(--u)) 0;
}
.rsvp-ticket { position: relative; width: calc(447 * var(--u)); height: calc(606 * var(--u)); }
.rsvp-ticket > img { position: absolute; }
.rsvp-ticket__shape { inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .12)); }
.rsvp-ticket__ill { left: calc(8 * var(--u)); top: calc(74 * var(--u)); width: calc(430 * var(--u)); }
.rsvp-layout__content { background: var(--paper); display: grid; place-items: center; padding: calc(70 * var(--u)) calc(40 * var(--u)) calc(90 * var(--u)); }
.rsvp-panel { width: calc(640 * var(--u)); text-align: center; color: var(--olive); }
.rsvp-panel__mark { width: calc(181 * var(--u)); margin: 0 auto calc(36 * var(--u)); }
.rsvp-panel__eyebrow { font-size: calc(30 * var(--u)); letter-spacing: 0.09em; }
.rsvp-panel__rule { position: relative; width: calc(221 * var(--u)); height: 1px; margin: calc(20 * var(--u)) auto calc(30 * var(--u)); background: var(--olive); }
.rsvp-panel__rule::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: calc(10 * var(--u)); height: calc(10 * var(--u));
  border: 1px solid var(--olive); background: var(--paper);
  transform: translate(-50%, -50%) rotate(45deg);
}
.rsvp-panel__greeting { font-size: calc(34 * var(--u)); letter-spacing: 0.09em; font-weight: 600; }
.rsvp-panel__question { margin-top: calc(14 * var(--u)); font-family: var(--body); font-style: normal; font-size: calc(26 * var(--u)); letter-spacing: 0.09em; line-height: 1.2; color: var(--ink); }
.rsvp-panel__deadline { margin-top: calc(14 * var(--u)); font-size: calc(25 * var(--u)); letter-spacing: 0.09em; font-weight: 600; }
.rsvp-panel__dots { width: calc(48 * var(--u)); margin: calc(36 * var(--u)) auto calc(30 * var(--u)); }

.rsvp-choice, .rsvp-submit {
  display: flex; align-items: center; justify-content: center;
  width: calc(439 * var(--u)); max-width: 100%; height: calc(53 * var(--u)); margin: 0 auto calc(24 * var(--u));
  border: 0; cursor: pointer; color: #fff;
  font-family: var(--serif); font-style: italic; font-size: calc(34 * var(--u)); letter-spacing: 0.09em;
  background: var(--green); transition: background-color .2s ease, opacity .2s ease;
}
.rsvp-choice--no { background: var(--charcoal); }
.rsvp-choice:hover, .rsvp-submit:hover { opacity: .9; }
.rsvp-choice:disabled, .rsvp-submit:disabled { opacity: .5; cursor: default; }
.rsvp-submit { margin-top: calc(30 * var(--u)); }

.rsvp-steps__dots { display: flex; justify-content: center; gap: 8px; margin-bottom: calc(26 * var(--u)); }
.rsvp-steps__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.rsvp-steps__dot.is-active { background: var(--green); }

.rsvp-form { text-align: left; color: var(--ink); }
.rsvp-back { border: 0; background: none; padding: 0; margin-bottom: calc(20 * var(--u)); cursor: pointer; font-family: var(--serif); font-style: italic; font-size: calc(24 * var(--u)); color: var(--olive); }
.rsvp-subfield { margin-top: calc(22 * var(--u)); }
.rsvp-subfield label, .rsvp-event-q__label { display: block; font-size: calc(26 * var(--u)); letter-spacing: 0.06em; color: var(--olive); margin-bottom: 8px; }
.rsvp-subfield input, .rsvp-subfield textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--sage); background: #fff;
  font-family: var(--body); font-size: 16px; color: var(--ink); border-radius: 0;
}
.rsvp-subfield textarea { min-height: 130px; resize: vertical; }
.rsvp-subfield input:focus, .rsvp-subfield textarea:focus { outline: 1px solid var(--green); border-color: var(--green); }
.rsvp-person { padding: calc(20 * var(--u)) 0; border-bottom: 1px solid rgba(83, 89, 49, .3); }
.rsvp-person__name { font-size: calc(32 * var(--u)); letter-spacing: 0.06em; color: var(--ink); margin-bottom: 10px; }
.rsvp-event-q__options { display: flex; gap: 10px; }
.rsvp-toggle {
  flex: 1; padding: 10px 8px; cursor: pointer;
  border: 1px solid var(--green); background: transparent; color: var(--green);
  font-family: var(--serif); font-style: italic; font-size: calc(24 * var(--u));
}
.rsvp-toggle.is-selected { background: var(--green); color: #fff; }
.rsvp-toggle--decline.is-selected { background: var(--charcoal); border-color: var(--charcoal); }
.rsvp-plusone { margin-top: 12px; font-size: calc(26 * var(--u)); color: var(--ink); }
.rsvp-plusone input { accent-color: var(--green); margin-right: 8px; }
.rsvp-error { margin-top: 14px; font-family: var(--body); font-style: normal; font-size: 15px; color: #8a2f2f; text-align: center; }
.rsvp-lookup__confirmed { margin: 14px 0; font-family: var(--body); font-style: normal; font-size: 15px; text-align: center; }
.rsvp-lookup .rsvp-panel__question { text-align: center; }

.rsvp-confirm { color: var(--olive); }
.rsvp-confirm__title { font-family: var(--heading); font-style: normal; font-size: calc(46 * var(--u)); letter-spacing: 0.06em; color: var(--ink); }
.rsvp-confirm__body { margin-top: 16px; font-family: var(--body); font-style: normal; font-size: calc(26 * var(--u)); letter-spacing: 0.06em; line-height: 1.3; color: var(--ink); }
.rsvp-confirm__links { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 26px; }
.rsvp-confirm__links a { font-size: calc(28 * var(--u)); letter-spacing: 0.06em; color: var(--green); }

@media (max-width: 780px) {
  .rsvp-layout { grid-template-columns: 1fr; }
  .rsvp-layout__photo { padding: calc(50 * var(--u)) 0; }
  .rsvp-ticket { width: calc(340 * var(--u)); height: calc(461 * var(--u)); }
  .rsvp-ticket__ill { left: calc(6 * var(--u)); top: calc(56 * var(--u)); width: calc(327 * var(--u)); }
  .rsvp-panel { width: 100%; }
  .rsvp-panel__mark { width: calc(140 * var(--u)); }
  .rsvp-panel__question, .rsvp-subfield label, .rsvp-event-q__label, .rsvp-plusone { font-size: calc(24 * var(--u)); }
  .rsvp-choice, .rsvp-submit { width: 100%; height: calc(70 * var(--u)); font-size: calc(30 * var(--u)); }
  .rsvp-toggle { font-size: calc(24 * var(--u)); }
}

/* ── Mensajes (private page, not linked) ─────────────────────────────── */
.mensajes-hero { text-align: center; padding: calc(110 * var(--u)) 20px calc(40 * var(--u)); }
.mensajes-hero__eyebrow { font-size: calc(29 * var(--u)); letter-spacing: 0.09em; color: var(--olive); }
.mensajes-hero__title { margin-top: 10px; font-size: calc(53 * var(--u)); letter-spacing: 0.06em; color: var(--ink-deep); }
.mensajes-hero__intro { margin-top: 14px; font-family: var(--body); font-style: normal; font-size: calc(24 * var(--u)); letter-spacing: 0.06em; }
.mensajes-board-wrap { padding: 0 calc(96 * var(--u)) calc(120 * var(--u)); }
.mensajes-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.mensajes-card { background: var(--paper); border: 1px solid var(--sage); padding: 22px 22px 26px; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.mensajes-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(38, 40, 36, .1); }
.mensajes-card__name { font-size: 22px; letter-spacing: 0.06em; color: var(--green); }
.mensajes-card__date { margin-top: 2px; font-size: 14px; color: var(--sage); }
.mensajes-card__message { margin-top: 12px; font-family: var(--body); font-style: normal; font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.mensajes-empty { grid-column: 1 / -1; text-align: center; color: var(--sage); padding: 40px 0; }
.mensajes-empty svg { margin: 0 auto 10px; }
.mensajes-modal-backdrop { position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 20px; background: rgba(38, 40, 36, .45); }
.mensajes-modal-backdrop.is-open { display: grid; }
.mensajes-modal { position: relative; width: min(560px, 100%); max-height: 85vh; overflow: auto; background: var(--paper); padding: 34px 30px; }
.mensajes-modal__close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink); }
.mensajes-modal__name { font-size: 28px; color: var(--green); }
.mensajes-modal__date { font-size: 14px; color: var(--sage); }
.mensajes-modal__message { margin-top: 16px; font-family: var(--body); font-style: normal; font-size: 16px; line-height: 1.6; white-space: pre-wrap; }

@media (max-width: 780px) {
  .mensajes-hero__title { font-size: calc(46 * var(--u)); }
  .mensajes-board-wrap { padding: 0 20px 60px; }
}