/* =============================================================
   Paulina & Emiliano -- wedding invitation
   Vanilla rebuild. See ../docs/CODEBASE.md for the "why".
   ============================================================= */

/* ---------- Fonts (local copies already in assets/gstatic-fonts) ---------- */
@font-face { font-family: 'Cormorant Infant'; font-style: normal; font-weight: 300; font-display: swap;
  src: url(../assets/gstatic-fonts/s/cormorantinfant/v22/HhyCU44g9vKiM1sORYSiWeAsLN99xfs9KOOc_agJPrhxYNWajjg.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Infant'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/gstatic-fonts/s/cormorantinfant/v22/HhyCU44g9vKiM1sORYSiWeAsLN99xfs9KOOc_agJPrgdYNWajjg.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Infant'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../assets/gstatic-fonts/s/cormorantinfant/v22/HhyCU44g9vKiM1sORYSiWeAsLN99xfs9KOOc_agJPrjxZ9Wajjg.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Infant'; font-style: italic; font-weight: 300; font-display: swap;
  src: url(../assets/gstatic-fonts/s/cormorantinfant/v22/Hhy8U44g9vKiM1sORYSiWeAsLN997_IP1zv1ljKnOa3nI1PQvjRrlQ.woff2) format('woff2'); }
/* Poppins and PT Sans Caption used to live here too, for --font-ui and
   --font-caption -- removed (2026-08-28) after checking the original
   site's own rendered output directly: literally everything on it
   (nav, headings, body copy, buttons, form fields, footer) uses
   Cormorant Infant, at various weights. There never was a second
   typeface -- Poppins/PT Sans Caption were this rebuild's own invention,
   not something read off the original. */

/* ---------- Design tokens ---------- */
:root {
  --color-accent: #d3c4af;       /* frames, dividers, buttons */
  /* Was #859570 -- a sage green that doesn't belong to this site's
     tan/cream/black palette at all (most visible on the registry
     carousel's active pagination dot, flagged as looking green and
     out of place). Replaced with an actual darker shade of
     --color-accent instead of an unrelated hue. */
  --color-accent-dark: #a68b5f;  /* deeper accent, used sparingly */
  --color-ink: #000000;          /* headings, body copy on light bg */
  --color-body: #545454;         /* long-form paragraph text */
  --color-paper: #fdfbf7;        /* page background */
  --color-white: #ffffff;

  --font-display: 'Cormorant Infant', Georgia, 'Times New Roman', serif;

  --section-max: 900px;
  --section-padding-y: clamp(60px, 10vw, 120px);
  --section-padding-x: 24px;
}

/* ---------- Reset / base ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-body);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
/* height:auto matters here, not just max-width: every <img> in this page
   carries its real width/height HTML attributes (for layout stability
   before it loads), and those set an implicit height in the UA
   stylesheet -- without overriding it too, constraining just the width
   below an image's intrinsic size stretches it vertically instead of
   scaling it (hit this with the dress-code illustration: it rendered
   200px wide but 1600px tall). .gallery-card img below intentionally
   overrides height again for its own object-fit: cover crop. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-weight: 300; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
button { font: inherit; cursor: pointer; }

.section {
  max-width: var(--section-max);
  margin: 0 auto;
  padding: var(--section-padding-y) var(--section-padding-x);
  text-align: center;
}
.section--texture {
  max-width: none;
  background-image: url('../assets/wp-content/uploads/2026/08/ChatGPT-Image-26-ago-2026-11_00_29-a.m.webp');
  background-repeat: repeat;
}
.section--texture > * { max-width: calc(var(--section-max) - 2 * var(--section-padding-x)); margin-left: auto; margin-right: auto; }
.section__title {
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.section__intro { font-size: 17px; max-width: 480px; margin-left: auto; margin-right: auto; }

.btn {
  display: inline-block;
  padding: 14px 36px;
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
  text-decoration: none;
  letter-spacing: 2px;
  font-size: 13px;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease;
}
.btn:hover { background: var(--color-ink); color: var(--color-white); }
.btn--wide { width: 100%; border: none; background: var(--color-accent); color: var(--color-ink); padding: 16px; }
.btn--wide:hover { background: var(--color-accent-dark); color: var(--color-white); }

.link-underline {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

/* ---------- Nav ---------- */
.site-nav {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
}
.site-nav__toggle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.site-nav__toggle span { width: 20px; height: 2px; background: var(--color-ink); transition: transform .25s ease, opacity .25s ease; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav__menu {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 14, .96);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
}
.site-nav__menu.is-open { opacity: 1; visibility: visible; }
.site-nav__menu ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.site-nav__menu li { margin: 22px 0; }
.site-nav__menu a {
  text-decoration: none;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 3px;
}
.site-nav__menu a:hover { color: var(--color-accent); }

/* The original switches from a hamburger to a plain horizontal top bar
   at 981px (checked directly: #top-menu-nav is display:none right up to
   980px, then inline-block at 1024px -- 981px is Divi's own standard
   breakpoint for this). Same breakpoint here. Above it, the fullscreen
   overlay menu is restyled in place into a slim fixed bar -- a
   semi-transparent dark strip (matching the hero's own scrim color
   rather than the original's plain white bar + logo, since this rebuild
   has no separate small logo asset, only the hero's own title
   graphic) so its white text stays readable over every section it
   scrolls above, not just the hero. */
@media (min-width: 981px) {
  .site-nav__toggle { display: none; }
  .site-nav__menu {
    inset: 0 0 auto 0;
    height: auto;
    background: rgba(20, 18, 14, .55);
    backdrop-filter: blur(2px);
    opacity: 1;
    visibility: visible;
    padding: 20px 0;
  }
  .site-nav__menu ul { display: flex; justify-content: center; gap: 44px; }
  .site-nav__menu li { margin: 0; }
  .site-nav__menu a { font-size: 14px; letter-spacing: 2px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: right 43% top 64%;
}
.hero__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.18); }
/* align-items: stretch (not center) so .hero__content can stretch to the
   full height of .hero and distribute its own children top/bottom via
   justify-content: space-between below -- checked against the original
   directly: its title graphic sits right at the top of the photo (not
   vertically centered over it), small enough and high enough to clear
   the couple's faces, with the date/countdown pinned near the bottom
   instead. A single flex column with 2 children (the title, and a
   .hero__footer group holding date+countdown together) gets that same
   top/bottom split without hand-picking margins for every viewport. */
.hero { align-items: stretch; }
.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 56px 20px 64px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
/* Much smaller and narrower than before (was min(90vw,560px)) -- measured
   directly against the original: its title graphic is only ~25% of the
   hero's own width, not ~45-90%. At that size, sitting at the top of the
   photo (see .hero above), it clears the couple's faces entirely instead
   of sitting on top of them. */
.hero__title { width: min(46vw, 260px); height: auto; margin: 0 auto; }
.hero__date { letter-spacing: 3px; font-size: 15px; margin-bottom: 24px; text-transform: uppercase; }

.countdown { display: flex; justify-content: center; align-items: flex-start; gap: 14px; }
.countdown__sep { font-family: var(--font-display); font-size: 32px; opacity: .6; padding-top: 2px; }
.countdown__unit { min-width: 56px; }
.countdown__value { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px, 6vw, 42px); margin: 0; }
.countdown__label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; opacity: .85; margin: 4px 0 0; }

/* ---------- Padres ---------- */
.verse { font-family: var(--font-display); font-size: clamp(22px, 3vw, 26px); font-style: normal; }
.verse__ref { font-family: var(--font-display); font-style: italic; margin-bottom: 40px; }

.padres-frame {
  border: 2px solid var(--color-accent);
  padding: 40px 30px 60px;
  margin-top: 40px;
}
.padres-frame__title { font-size: clamp(26px, 4vw, 36px); letter-spacing: 4px; margin-bottom: 20px; }
.padres-frame__divider { width: 60px; border: none; border-top: 1px solid var(--color-accent); margin: 0 auto 36px; }
.padres-frame__cols { display: flex; justify-content: center; gap: 60px; flex-wrap: wrap; }
.padres-frame__col h3 { font-size: 20px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 12px; }
.padres-frame__col p { font-family: var(--font-display); font-size: 18px; }

/* ---------- Itinerario timeline ----------
   Rebuilt to match the original site's actual layout, checked directly
   (not assumed) at both mobile and desktop widths on
   paulinayemiliano.invite-ra.com -- turns out it's a straight two-
   column row at every width, content + a narrow time column, and the
   *whole row* flips sides at a breakpoint (time-left/content-right
   below ~700px, content-left/time-right above it). It does NOT
   alternate sides row-by-row the way an earlier pass at this assumed;
   every event uses the same side at a given width.

   The vertical rule is one continuous line down the whole list, not a
   per-row border: .timeline__item has zero gap between siblings, and
   .timeline__time-box's border runs its own full height (it stretches
   to match .timeline__content's height, the tallest sibling in the
   row) -- consecutive items' borders butt directly against each other
   with nothing in between, so they read as one unbroken line. The
   short accent-colored tick at each event's own time label is a
   ::before positioned exactly on top of that border (see the
   right:-4px / left:-4px math below), copying the original's own
   technique of layering a second, shorter, differently-colored border
   at the same x-position rather than something drawn separately. */
.timeline { list-style: none; margin: 0 0 70px; padding: 0; }
.timeline__item { display: flex; flex-direction: row-reverse; }
.timeline__content {
  flex: 0 0 78%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 16px 40px;
}
.timeline__icon { width: 60px; height: 60px; object-fit: contain; margin-bottom: 20px; }
.timeline__name { font-size: clamp(24px, 3vw, 30px); letter-spacing: 1px; margin-bottom: 4px; }
.timeline__place { font-size: 18px; margin-bottom: 16px; }
.timeline__map-btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 300;
  padding: 10px 25px;
  border-radius: 2px;
  text-decoration: none;
  transition: background-color .25s ease;
}
.timeline__map-btn:hover { background: var(--color-accent-dark); }

.timeline__time-box {
  position: relative;
  flex: 0 0 22%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border-right: 4px solid #ddd;
  padding-right: 16px;
}
/* The accent tick -- same x-position as the border above (border-box
   sizing puts that 4px strip just past the padding edge, hence -4px). */
.timeline__time-box::before {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.4em;
  background: var(--color-accent);
}
.timeline__time { font-family: var(--font-display); font-weight: 500; font-size: 18px; white-space: nowrap; }

@media (min-width: 700px) {
  .timeline__item { flex-direction: row; }
  .timeline__time-box {
    justify-content: flex-start;
    border-right: none;
    border-left: 4px solid #ddd;
    padding-right: 0;
    padding-left: 16px;
  }
  .timeline__time-box::before { right: auto; left: -4px; }
  .timeline__time { font-size: 22px; }
}

.dresscode__illustration { max-width: 200px; margin: 0 auto 16px; }
.dresscode__label { letter-spacing: 2px; text-transform: uppercase; font-size: 14px; }

/* ---------- Carousels (Swiper: registry + gallery) ----------
   assets/vendor/swiper owns slide sizing, touch/drag, snapping, and the
   prev/next buttons + pagination dots (.swiper-button-next/prev,
   .swiper-pagination) -- no custom scroll-position math needed on this
   site's side at all. The rules below are this site's own skin on top
   of Swiper's default markup, plus the card content itself. Per-carousel
   slide counts/effect/speed are set in js/main.js, matching the
   original site's own two carousels (see the comments there). */
:root {
  --swiper-theme-color: var(--color-accent-dark);
  --swiper-navigation-color: var(--color-ink);
  --swiper-pagination-color: var(--color-accent-dark);
}
.registry-swiper, .gallery-swiper {
  max-width: 900px;
  margin: 0 auto;
  padding: 8px 4px 44px; /* bottom space for the pagination dots / arrow overlay */
}
/* Swiper's own base CSS sets .swiper-slide { height: 100% }, which only
   does anything if .swiper-wrapper has a definite height of its own to
   resolve that percentage against -- ours doesn't (no fixed-height
   .swiper container), so left alone every slide silently falls back to
   sizing off its own content instead of a shared height. Registry
   cards don't actually need this (their height comes from
   aspect-ratio, which sizes correctly on its own), but overriding to
   auto here is harmless and keeps this from becoming a surprise again
   on some future card added without an aspect-ratio. */
.swiper-slide { height: auto; }
.swiper-button-next, .swiper-button-prev {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--color-accent); }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 16px; font-weight: 700; }
.swiper-pagination-bullet { background: #ddd; opacity: 1; }
.swiper-pagination-bullet-active { background: var(--color-accent-dark); width: 22px; border-radius: 5px; transition: width .2s ease; }

/* Matches the original's own card design, read directly off the live
   site rather than designed from scratch: a tall rounded rectangle --
   white zone on top holding the logo/icon, accent-colored zone below
   holding the text -- clipped to shape by the card's own border-radius
   + overflow: hidden (it's one box with two visual zones, not two
   separately-styled boxes). aspect-ratio, not height: 100%, is what
   keeps all three cards the same size regardless of how much text is
   in each: Swiper already gives every slide in a row the same *width*,
   and since this card's height is purely a function of that shared
   width, equal width already guarantees equal height -- no
   cross-stretching needed (and, as found while fixing this, not
   reliably available anyway: Swiper's own .swiper-slide{height:100%}
   doesn't resolve against a .swiper-wrapper with no explicit height of
   its own, so slides were each sizing to their own content instead of
   stretching to match their tallest sibling). */
.registry-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 4 / 7;
  background: var(--color-accent);
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(0,0,0,.3);
  text-decoration: none;
  color: var(--color-white);
}
.registry-card__icon-wrap {
  flex: 0 0 70%;
  min-height: 0;
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.registry-card__icon-wrap img { width: 100%; height: 100%; object-fit: contain; }
/* This wrapper (not .registry-card__text itself) is the flex container
   that centers the text block vertically in the remaining 30% -- see
   the comment on .registry-card__text for why centering can't move
   onto the text element itself. */
.registry-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
}
.registry-card__text {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.5;
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: center;
  /* NOT display:flex -- a flex container turns every element child
     (each <strong>, <span>, and even each <br>) into its own separate
     flex item laid out along the row axis, which completely wrecks a
     mix of inline text/line-breaks like the SANTANDER block below (it
     scattered into a jumbled grid of fragments instead of stacked
     lines). Plain block flow respects <br> correctly; centering is
     .registry-card__body's job instead, one level up. */
  /* break-word, not the more aggressive "anywhere": the account/CLABE
     numbers below are pre-grouped into space-separated chunks (like a
     real card/account number would be shown), so there's always a
     natural break point and this should never need to split a chunk
     mid-digit -- it's here as a safety net, not the primary fix. */
  overflow-wrap: break-word;
}
.registry-card__number { letter-spacing: 0.5px; }
.registry-card__cta { font-size: 22px; font-weight: 500; letter-spacing: 2px; }
.swipe-hint { margin-top: 20px; font-size: 13px; letter-spacing: 1px; }

.gallery-swiper { max-width: 1000px; }
.gallery-card { display: block; aspect-ratio: 4 / 5; border-radius: 4px; overflow: hidden; }
.gallery-card img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }

/* ---------- Adultos / Hospedaje ---------- */
/* min(420px, 100%), not a bare 420px -- max-width on a replaced element
   (img) only caps its own box, it doesn't also shrink to the
   container the way a non-replaced block would. Below ~420px-wide
   viewports the image was overflowing its section by exactly the
   difference (confirmed via computed margin-right going negative to
   compensate), same class of bug as the dress-code illustration
   fix above, just triggered by viewport width here instead of an
   HTML width/height attribute. */
.hospedaje__photo { max-width: min(420px, 100%); margin: 0 auto 30px; border-radius: 4px; }
.hospedaje__name { font-family: var(--font-display); font-size: 20px; margin-bottom: 20px; }
.hospedaje__actions { display: flex; gap: 16px; justify-content: center; align-items: center; margin-bottom: 30px; flex-wrap: wrap; }
.hospedaje__alt { font-size: 14px; max-width: 420px; margin: 0 auto; }

/* ---------- Clima ----------
   Rebuilt to match the original weatherwidget.org embed's own CSS as
   closely as possible -- values below (colors, sizes, spacing) were
   read directly off its live, rendered output/stylesheet at
   paulinayemiliano.invite-ra.com, not guessed. Full-bleed colored band
   (the original's own .et_pb_section background-color, #cdb492 pre-
   swap == var(--color-accent) here), no section title, widget content
   capped at 440px and centered, same as the original. */
.clima {
  background: var(--color-accent);
  padding: 55px 20px;
}
.weather-widget {
  max-width: 440px;
  margin: 0 auto;
  color: #fff;
  font-family: 'Times New Roman', Times, serif;
  font-size: 15px;
  line-height: normal;
  text-align: center;
}
.weather-widget__status { font-style: italic; }

.weather-widget__name { font-weight: 700; margin-bottom: 2px; }
/* The original widget always shows the real "right now" -- this one
   shows a specific future date instead (the wedding day itself, not the
   day the page happens to be viewed), so it needs to say which date and
   whether it's an actual forecast or a historical average (see
   js/main.js's weather section for why it's usually the latter: the
   wedding is normally too far out for Open-Meteo's own forecast
   horizon). */
.weather-widget__daylabel { font-size: 12px; font-style: italic; opacity: .8; margin-bottom: 10px; }

.weather-widget__current {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.weather-widget__temp, .weather-widget__cond {
  display: inline-block;
  margin: 0 2%;
}
.weather-widget__temp { font-size: 45px; line-height: 47px; height: 45px; font-weight: 500; }
.weather-widget__icon { display: inline-block; margin: 0 2%; line-height: 0; }
.weather-widget__icon svg { height: 45px; width: 45px; }

.weather-widget__extra { margin-top: 4px; }
.weather-widget__stat { display: inline-block; margin: 10px 2% 0; }
.weather-widget__stat-icon { display: inline-block; height: 15px; width: 15px; margin-right: 5px; vertical-align: middle; line-height: 0; }
.weather-widget__stat-icon svg { height: 100%; width: 100%; }
.weather-widget__stat-text { position: relative; top: -2px; }

.weather-widget__delimiter { margin: 10px 0; width: 100%; height: 1px; background-color: #ffffff3d; }

.weather-widget__hours { position: relative; }
.weather-widget__line {
  margin: 0 25px;
  overflow-x: auto;
  scrollbar-width: none;
  white-space: nowrap;
}
.weather-widget__line::-webkit-scrollbar { display: none; }
.weather-widget__hour { display: inline-block; margin-right: 8px; width: 51px; }
.weather-widget__hour-date { font-size: 75%; opacity: .7; margin-bottom: 5px; }
.weather-widget__hour-icon { line-height: 0; }
.weather-widget__hour-icon svg { height: 35px; width: 35px; }
.weather-widget__hour-temp { font-size: 100%; }

.weather-widget__arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background-color: #0000001a;
  border: none;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.weather-widget__arr--left { left: 0; }
.weather-widget__arr--right { right: 0; }

/* Icon fills -- same class names and colors as the original's own SVG
   icon set (.wi_sun/.wi_cloud/etc.), copied from its live stylesheet. */
.weather-widget svg .wi_cloud, .weather-widget svg .wi_fog { fill: #fff; stroke: #fff; }
.weather-widget svg .wi_rain, .weather-widget svg .wi_snow { fill: rgba(165,195,236,1); stroke: rgba(165,195,236,1); }
.weather-widget svg .wi_sun, .weather-widget svg .wi_sun-semi, .weather-widget svg .wi_sunshine { fill: #FFC107; stroke: #FFC107; }
.weather-widget svg .wi_moon, .weather-widget svg .wi_moon-semi, .weather-widget svg .wi_stars { fill: #FFC107; }
.weather-widget svg .wi_thunder { fill: #ff5d2b; }
.weather-widget__stat-icon svg path { fill: #fff; }
.weather-widget__more a { text-decoration: underline; }

/* ---------- RSVP ---------- */
.rsvp__assigned { letter-spacing: 2px; font-style: italic; font-family: var(--font-display); }
.rsvp__passes { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin-bottom: 30px; }
.rsvp-form { max-width: 440px; margin: 0 auto; text-align: left; }
.rsvp-form__field { margin-bottom: 20px; }
.rsvp-form__field legend { font-weight: 600; margin-bottom: 10px; padding: 0; }
.rsvp-form__field label { display: inline-flex; align-items: center; gap: 6px; margin-right: 20px; font-size: 15px; }
.rsvp-form input[type="text"],
.rsvp-form input[type="tel"],
.rsvp-form select,
.rsvp-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #ddd;
  background: var(--color-white);
  font: inherit;
  color: var(--color-ink);
}
.rsvp-form select { appearance: auto; }
.rsvp-form__note { margin-top: 16px; font-size: 13px; text-align: center; color: var(--color-body); }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 40px 20px; font-family: var(--font-display); letter-spacing: 2px; }

/* ---------- Section dividers (decorative photo bands) ----------
   Between-section breather images, matching the original's own
   "spacer" rows -- see CLAUDE.md for how those were found on `main`.
   Full-bleed by design (outside .section's max-width), background-image
   set inline per instance (same pattern as .hero__bg) since only the
   image and its focal point change; sizing/behavior stays generic here. */
/* Fixed per-breakpoint heights, not a continuously fluid clamp() -- the
   previous clamp(160px, 24vw, 300px) made the height (and so the visible
   crop window, since these use background-size: cover with a fixed
   per-instance background-position tuned to keep a person's head in
   frame) drift continuously as the viewport width changed, so a head
   that was framed fine at one width could end up cropped off at some
   other width in between. Checked the original directly: it doesn't
   scale these continuously either -- it's three fixed heights, one per
   device tier (~300px phone, ~400px tablet, ~660px desktop), so the crop
   only ever has to look right at those three sizes, not at every size in
   between. Same three tiers here; the background-position values below
   (set inline per .divider instance) already matched the original's own
   before this fix, so only the height model needed correcting. */
.divider {
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (min-width: 641px) {
  .divider { height: 400px; }
}
@media (min-width: 1000px) {
  .divider { height: 660px; }
}

/* ---------- Responsive ---------- */
@media (min-width: 640px) {
  .padres-frame__cols { gap: 100px; }
}