/* =============================================================
   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'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/gstatic-fonts/s/poppins/v24/pxiEyp8kv8JHgFVrJJnecg.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(../assets/gstatic-fonts/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1JlFQ.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../assets/gstatic-fonts/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFQ.woff2) format('woff2'); }
@font-face { font-family: 'PT Sans Caption'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../assets/gstatic-fonts/s/ptsanscaption/v20/0FlMVP6Hrxmt7-fsUFhlFXNIlpcadA_x.woff2) format('woff2'); }
@font-face { font-family: 'PT Sans Caption'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../assets/gstatic-fonts/s/ptsanscaption/v20/0FlJVP6Hrxmt7-fsUFhlFXNIlpcSwSrkQg-v.woff2) format('woff2'); }

/* ---------- Design tokens ---------- */
:root {
  --color-accent: #d3c4af;       /* frames, dividers, buttons */
  --color-accent-dark: #859570;  /* 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;
  --font-ui: 'Poppins', Arial, sans-serif;
  --font-caption: 'PT Sans Caption', Helvetica, Arial, sans-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-ui);
  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); }

/* ---------- 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); }
.hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--color-white);
  padding: 100px 20px;
  width: 100%;
  max-width: 700px;
}
.hero__title { width: min(90vw, 560px); height: auto; margin: 0 auto 20px; }
.hero__date { letter-spacing: 3px; font-size: 15px; margin-bottom: 40px; 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: 19px; 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: 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. */
.divider {
  height: clamp(160px, 24vw, 300px);
  background-size: cover;
  background-repeat: no-repeat;
}

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