/* ============= COUNTDOWN (exact canva mobile coords) =============
   y: airplane-circle 4941, photo 4964, seal 5145, names 5266,
   date 5307, label 5348, numbers 5372, units 5411, farewell 5446,
   final-stamp 5474. Section starts at y=4941, height ~660px */
.section-countdown {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: calc(700px * var(--u));
  overflow: hidden;
}
.cd-airplane-circle {
  position: absolute;
  top: 0;
  left: 12px;
  width: 92px;
  height: 95px;
  z-index: 2;
}
.cd-photo {
  position: absolute;
  top: 23px;
  left: 35px;
  width: 320px;
  height: 260px;
  margin: 0;
  z-index: 1;
}
.cd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-clip-path: url(#torn-paper);
  clip-path: url(#torn-paper);
}
.cd-seal {
  position: absolute;
  top: 204px;
  left: 41px;
  width: 124px;
  height: 139px;
  z-index: 3;
  transform: none;
}
.cd-names {
  position: absolute;
  top: 325px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--color-gold-dark);
  z-index: 3;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.cd-date {
  position: absolute;
  top: 370px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--color-gold-dark);
  z-index: 3;
  line-height: 1;
  font-weight: 400;
}
.cd-label {
  position: absolute;
  top: 405px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-gold);
  z-index: 3;
  line-height: 1;
  font-weight: 400;
}
.cd-widget {
  position: absolute;
  top: 432px;
  left: 0;
  right: 0;
  display: flex;
  gap: 12px;
  justify-content: center;
  font-family: var(--font-heading);
  z-index: 3;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cd-unit span {
  font-size: 38px;
  color: var(--color-heading-blue);
  line-height: 1;
  font-weight: 400;
}
.cd-unit small {
  font-family: var(--font-body-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--color-gold);
  margin-top: 4px;
  font-weight: 400;
}
.cd-farewell {
  position: absolute;
  top: 510px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-name-dark-burgundy);
  z-index: 3;
  line-height: 1;
  font-weight: 400;
}
.cd-final-stamp {
  position: absolute;
  top: 580px;
  left: 235px;
  width: 92px;
  height: 92px;
  z-index: 3;
}

.section {
  padding: var(--space-lg) var(--space-md);
  text-align: center;
}

/* ========= Layout base de secciones (styling detallado en fase posterior) ========= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300; /* above .historia-panel (200) */
  background: var(--color-bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.site-nav {
  max-width: 390px;
  margin: 0 auto;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  height: 48px;
  box-sizing: border-box;
}

.site-nav__logo {
  /* Oculto visualmente; se mantiene para accesibilidad/SEO — Canva no muestra logo en el nav */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.site-nav__menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  font-family: var(--font-body-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-text);
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .site-nav__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-bg);
    padding: 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  }
  .site-nav__menu.is-open { display: flex; }
}

/* Back button — shown when historia panel is open */
.nav-back {
  display: none;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-heading-blue);
  padding: 4px 0;
  margin-right: auto; /* push hamburger to the right */
}
body.historia-open .nav-back { display: flex; }
body.historia-open .nav-toggle { opacity: 0; pointer-events: none; } /* keep layout space */
body.historia-open { overflow: hidden; } /* lock main scroll while panel is open */

/* ============================== INTRO SECTION ==============================
   Between hero and boarding-pass: quote text + Nuestra Historia CTA */
.section-intro {
  position: relative;
  max-width: 390px;
  margin: 0 auto;
  padding: 12px 32px 28px;
  text-align: center;
  overflow: hidden;
}
.intro-compass {
  position: absolute;
  top: -10px;
  left: -16px;
  width: 92px;
  height: 92px;
  filter: saturate(0.45) opacity(0.55) brightness(1.08);
  --base-rot: -5deg;
  transform: rotate(-5deg);
}
.intro-quote {
  font-family: var(--font-body-display);
  font-weight: 400;
  font-size: 19px;
  color: var(--color-gold-dark);
  line-height: 1.55;
  margin: 60px 0 14px;
}
.intro-coda {
  font-family: var(--font-body-display); /* Oswald — matches Canva font (YACgEQY10lw_0) */
  font-weight: 700;
  font-size: 22px;                        /* Canva 37.3px × 0.8 scale ≈ 30px; our context ~22px */
  color: var(--color-gold-dark);          /* #584110 — confirmed from Canva computedStyle */
  letter-spacing: 0.01em;
  margin: 0 0 16px;
}

/* Stamp cluster below the intro coda — 3 overlapping stamps matching Canva */
.intro-stamps {
  position: relative;
  height: 130px;
  margin: 0 0 16px;
}
.intro-stamps img {
  position: absolute;
}
.intro-s-allyouneed {
  left: 60px;
  top: 0;
  width: 75px;
  height: 75px;
  --rot: rotate(-4deg);
  transform: rotate(-4deg);
}
.intro-s-bolivia {
  left: 118px;
  top: 6px;
  width: 122px;
  height: 80px;
  --rot: rotate(3deg);
  transform: rotate(3deg);
}
.intro-s-pink {
  left: 68px;
  top: 52px;
  width: 96px;
  height: 72px;
  --rot: rotate(-2deg);
  transform: rotate(-2deg);
}
.historia-open-btn {
  display: inline-block;
  background: none;
  border: 1.5px solid var(--color-heading-blue);
  border-radius: 24px;
  padding: 9px 22px;
  font-family: var(--font-body-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-heading-blue);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.historia-open-btn:hover {
  background: var(--color-heading-blue);
  color: #fff;
}

/* ============================== HISTORIA PANEL ==============================
   Fixed full-screen overlay, slides in from the right */
.historia-panel {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--color-bg);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  /* padding-top matches nav height so content starts below nav */
  padding-top: 48px;
}
.historia-panel.is-open {
  transform: translateX(0);
}

/* ============= RESPONSIVE SCALE HELPER =============
   Wrapper to apply uniform scaling on absolutely-positioned section content.
   Use on a single child div inside a section that has `height: calc(NNN * var(--u))`.
   Children of .scaled-inner can use position:absolute with px coords (relative to 390px). */
.scaled-inner {
  position: absolute;
  top: 0;
  left: 50%;
  width: 390px;
  transform: translateX(-50%) scale(var(--u));
  transform-origin: top center;
}

/* ============= STAMP SOFTENING =============
   Canva renders decorative stamps (BON VOYAGE, ESPAÑA, ARGENTINA, JUL 31 2026,
   "All you need is love", green heart, pink Soul & Mey) more pastel/desaturated.
   My direct PNG embeds were too vivid; this filter brings them closer to the
   visual softness Mariana designed in Canva. */
/* Stamps & decorations: pastel/softened to match canva visual */
[class*="-stamp"],
[class*="stamp-"],
.hero-stamp,
.hero-stamp-lines,
.boarding-stamp-jul,
.itinerario-stamp-lines,
.destino-stamp-love,
.destino-stamp-spain,
.destino-stamp-heart,
.regalos-stamp-lines,
.regalos-stamp-madrid,
.regalos-stamp-pink,
.meet-stamp-love,
.meet-stamp-pink,
.meet-stamp-lines,
.pl-stamp-lines,
.pl-stamp-jul,
.ft-stamp-bonvoyage,
.dc-stamp-airplane,
.dc-stamp-heart,
.info-stamp-spain,
.info-stamp-pink,
.cd-final-stamp {
  filter: saturate(0.45) opacity(0.6) brightness(1.06);
}

/* Maps: faded watermark — keep natural warm rose/cream tone, just reduce opacity */
.hero-map,
.section-map-bg,
.destino-map,
.meet-map,
.pl-map,
.ft-map,
.pb-map {
  filter: opacity(0.38) brightness(1.05);
}

/* Compass + balloons + airline circles: noticeably softened but
   still visible as decorative elements */
[class$="-balloon"],
.itinerario-balloon,
.destino-balloon,
.meet-balloon,
.pl-balloon,
.ft-balloon,
.hero-balloon,
.boarding-balloon,
.regalos-balloon-outline,
.hero-compass,
.destino-compass,
.meet-compass,
.pl-compass,
.ft-compass,
.info-compass,
.cd-airplane-circle,
.meet-airplane-circle,
.info-airplane-circle,
.pb-airplane-circle {
  filter: saturate(0.65) opacity(0.75) brightness(1.05);
}

/* ============= SECTIONS BASE (mobile-first) ============= */
/* Canva mobile reference: 390px viewport, content column = full viewport */

.section {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 16px 20px;
  text-align: center;
  scroll-margin-top: 80px;
}
/* Desktop: center 390px column — same as Canva */
@media (min-width: 768px) {
  .section { padding: 20px 20px; }
}

.section-title {
  margin-bottom: 1.5rem;
}

/* ============================ HERO ============================ */
/* Canva mobile reference: 390px viewport. Posiciones absolutas con
   coordenadas exactas extraídas del Canva original. En desktop se
   centra igual (max-width 390px) replicando el comportamiento Canva. */

.section-hero {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  /* Height scales with viewport (960px at 390 viewport) */
  height: calc(960px * var(--u));
  overflow: hidden;
}

.hero-inner {
  position: absolute;
  top: 0;
  left: 50%;
  width: 390px;
  height: 960px;
  transform: translateX(-50%) scale(var(--u));
  transform-origin: top center;
}

/* Mapa: sale arriba y a los lados del viewport.
   Polos norte/sur recortados con clip-path para matchear canva visual */
.hero-map {
  position: absolute;
  top: -50px;   /* was -90px — less extension above hero */
  left: 0;      /* was -21px — flush left, max-width:100% fills 390px */
  width: 100%;  /* was 514px — reset.css max-width:100% was capping it anyway */
  height: auto;
  opacity: 1;
  z-index: 0;
  clip-path: inset(15% 0 18% 0);
}

.hero-title {
  position: absolute;
  top: 105px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 42px;
  line-height: 1.1;
  color: var(--color-heading-blue);
  letter-spacing: 0.01em;
  white-space: nowrap;
  z-index: 2;
}

.hero-balloon {
  position: absolute;
  top: 168px;
  left: 174px;
  width: 43px;
  height: 53px;
  z-index: 2;
}

/* Compass: rotated 9.3deg clockwise per Canva matrix(0.987, 0.162, ...) */
.hero-compass {
  position: absolute;
  top: 180px;
  left: 256px;
  width: 99px;
  height: 105px;
  z-index: 2;
  --base-rot: 9.3deg;
  transform: rotate(9.3deg);
}

/* Wax seal: rotated -10deg counter-clockwise per Canva matrix(0.985, -0.175, ...) */
.hero-seal {
  position: absolute;
  top: 245px;
  left: 71px;
  width: 248px;
  height: 273px;
  z-index: 2;
  transform: rotate(-10deg);
}

/* Date: bumped down 20px for additional separation from balloon/compass */
.hero-date {
  position: absolute;
  top: 273px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--color-gold-dark);
  letter-spacing: 0.02em;
  font-weight: 400;
  z-index: 3;
}

/* Stamp lines: rotated ~190deg (180 + 10) per Canva matrix
   Effect: image flipped — only wave portion visible (stamp portion off-screen left) */
.hero-stamp-lines {
  position: absolute;
  top: 418px;
  left: -35px;
  width: 198px;
  height: 100px;
  z-index: 2;
  --rot: rotate(190deg);
  transform: rotate(190deg);
}

.hero-names {
  position: absolute;
  top: 500px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-body-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  color: var(--color-name-dark-burgundy);
  letter-spacing: 0.01em;
  z-index: 3;
}

.hero-stamp {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.hero-stamp--spain {
  top: 538px;
  left: 272px;
  width: 82px;
  height: 98px;
}

.hero-nickname {
  position: absolute;
  top: 559px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--color-gold-dark);
  letter-spacing: 0;
  z-index: 3;
}

.hero-stamp--bon-voyage {
  top: 604px;
  left: 34px;
  width: 80px;
  height: 79px;
}

.hero-stamp--argentina {
  top: 614px;
  left: 228px;
  width: 108px;
  height: 69px;
}

.hero-photo {
  position: absolute;
  top: 662px;
  left: 35px;
  width: 320px;
  height: 290px;
  margin: 0;
  z-index: 1;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Torn paper clip-path (SVG ref: #torn-paper) — mismo shape que Canva */
  -webkit-clip-path: url(#torn-paper);
  clip-path: url(#torn-paper);
}

/* (obsolete placeholder rules removed — see full boarding CSS below) */

/* (obsolete .historia-stop__photos and .washi-tape moved to historia block below) */

/* ============= ITINERARIO (Canva mobile exact coords, 606px total) ============= */
.section-itinerario {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: calc(650px * var(--u));
  overflow: hidden;
}
.itinerario-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 31px;
  color: var(--color-heading-blue);
  line-height: 1.2;
  z-index: 2;
  font-weight: 400;
  text-transform: uppercase;
}
.itinerario-balloon {
  position: absolute;
  top: 44px;
  left: 175px;
  width: 43px;
  height: 53px;
  z-index: 2;
}
.itinerario-stamp-lines {
  position: absolute;
  top: 67px;
  left: 250px;
  width: 166px;
  height: 61px;
  z-index: 2;
}
.itinerario-timeline {
  position: absolute;
  top: 126px;
  left: 50%;
  transform: translateX(-50%);
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 50px;
  z-index: 3;
}
.itinerario-item {
  display: grid;
  grid-template-columns: 60px 40px 100px;
  gap: 16px;
  align-items: center;
  text-align: left;
}
.itinerario-item time,
.itinerario-item > span:last-child {
  font-family: var(--font-heading);
  color: var(--color-name-dark-burgundy);
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
}
.itinerario-item .ico {
  width: 36px;
  height: 36px;
  object-fit: contain;
  justify-self: center;
}
.itinerario-item .ico-emoji {
  font-size: 28px;
  justify-self: center;
  line-height: 1;
}
.itinerario-stamp-spain {
  position: absolute;
  top: 525px;
  left: 50px;
  width: 80px;
  height: 96px;
  z-index: 4;
  --rot: rotate(-6deg);
  transform: rotate(-6deg);
}
.itinerario-stamp-circle {
  position: absolute;
  top: 540px;
  left: 110px;
  width: 100px;
  height: 70px;
  z-index: 4;
  --rot: rotate(-3deg);
  transform: rotate(-3deg);
}

/* ============= DRESS CODE — exact canva mobile coords ============= */
.section-dress-code {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 24px 38px 80px;
  text-align: center;
}
.dc-title {
  font-family: var(--font-heading);
  font-size: 31px;
  color: var(--color-heading-blue);
  margin: 0 0 16px;
  line-height: 1.05;
  font-weight: 400;
  text-transform: uppercase;
}
.dc-subtitle {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-gold-dark);
  margin: 0 0 24px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dc-body {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-gold-dark);
  margin: 0 0 18px;
  line-height: 1.4;
}
.dc-body--strong {
  font-weight: 400;
}
.dc-palette-intro {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-gold-dark);
  margin: 24px 0 12px;
  line-height: 1.3;
}
.dc-palette {
  display: block;
  width: 315px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 28px;
}
.dc-stamp-airplane {
  position: absolute;
  bottom: 30px;
  left: 83px;
  width: 75px;
  height: 78px;
}
.dc-stamp-heart {
  position: absolute;
  bottom: 35px;
  right: 84px;
  width: 114px;
  height: 67px;
}

/* ============= RSVP (CONFIRMA TU VUELO) mobile exact styling =============
   Background: striped PNG covers section. Title + form content in flow. */

.section-rsvp {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 0 16px 40px;
  text-align: center;
}
.rsvp-title-row {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 16px;
}
.rsvp-title-stamp {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
}
.rsvp-title {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 31px;
  color: var(--color-heading-blue);
  line-height: 1;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
}
.rsvp-title span { display: block; }
.rsvp-reserva {
  position: relative;
  z-index: 2;
  margin: 14px 0 18px;
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--color-gold-dark);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.04em;
}

/* Form as a boarding-pass-style card: blue rounded border + striped bg */
.rsvp-form {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  padding: 18px 20px 22px;
  border: 2.5px solid var(--color-heading-blue);
  border-radius: 12px;
  background-image: url('/assets/images/canva/8874316f474565d084565ace61a8bd13.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.rsvp-route-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding-bottom: 14px;
  margin-bottom: 4px;
  border-bottom: 2px dashed var(--color-heading-blue);
}
.rsvp-route-col {
  text-align: center;
}
.rsvp-airline {
  font-family: var(--font-heading);
  font-size: 10px;
  color: var(--color-gold-dark);
  margin: 0 0 4px;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.rsvp-code {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--color-name-dark-burgundy);
  line-height: 1;
  margin: 0;
  font-weight: 400;
}
.rsvp-code-label {
  font-family: var(--font-heading);
  font-size: 9px;
  color: var(--color-gold-dark);
  margin: 4px 0 0;
  letter-spacing: 0.02em;
  font-weight: 400;
}
.rsvp-plane {
  width: 28px;
  height: 28px;
  filter: none;
}

.rsvp-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
.rsvp-field > span,
.rsvp-field > legend {
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-gold-dark);
  letter-spacing: 0.02em;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
.rsvp-field input,
.rsvp-field textarea,
.rsvp-field select {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed var(--color-heading-blue);
  padding: 3px 2px 4px;
  font-family: var(--font-body-display);
  font-size: 14px;
  color: var(--color-gold-dark);
  line-height: 1.3;
}
.rsvp-field input::placeholder,
.rsvp-field textarea::placeholder {
  color: var(--color-gold);
  font-family: var(--font-body-display);
  opacity: 1;
  text-overflow: ellipsis;
}
.rsvp-field select {
  appearance: none;
  -webkit-appearance: none;
  color: var(--color-gold);
}
.rsvp-field select:not(:invalid) {
  color: var(--color-gold-dark);
}
.rsvp-note {
  font-family: var(--font-heading);
  font-size: 10px;
  color: var(--color-gold);
  line-height: 1.35;
  margin-top: 4px;
}
.rsvp-bus {
  border: none;
  padding: 0;
}
.rsvp-bus legend {
  margin-bottom: 6px;
}
.rsvp-bus label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
  font-family: var(--font-body-display);
  font-size: 14px;
  color: var(--color-gold-dark);
}

.rsvp-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  padding: 10px 18px;
  background: var(--color-gold);
  color: #ffffff;
  border: none;
  border-radius: 2px;
  font-family: var(--font-body-display);
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  letter-spacing: 0.05em;
}
.rsvp-submit img {
  width: 22px;
  height: 22px;
  filter: brightness(0) invert(1);
}

.rsvp-deadline {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--font-body-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 0.02em;
}

.form-status {
  margin: 12px 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 1.4em;
}
.form-status[data-status="success"] { color: #2d7a3c; }
.form-status[data-status="error"] { color: #c0392b; }

/* ============= REGALOS (exact canva mobile coords, 600px) =============
   y-offsets (relative to section start, canva y=4341):
   title 0-91 (3 lines), stamp-lines 88, gift 101, intro ~200-347,
   DATOS BANCARIOS 347, bank rows 370-437, balloon-outline 480,
   spain 485, pink-stamp 492 */
.section-regalos {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: calc(750px * var(--u));
  overflow: hidden;
}
.regalos-title {
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 31px;
  color: var(--color-heading-blue);
  line-height: 1.1;
  font-weight: 400;
  z-index: 3;
  text-transform: uppercase;
}
.regalos-stamp-lines {
  position: absolute;
  top: 148px;
  left: -20px;
  width: 179px;
  height: 66px;
  z-index: 2;
}
.regalos-gift {
  position: absolute;
  top: 161px;
  left: 176px;
  width: 69px;
  height: 69px;
  z-index: 3;
}
.regalos-intro {
  position: absolute;
  top: 255px;
  left: 30px;
  right: 30px;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-gold-dark);
  line-height: 1.4;
  z-index: 3;
}
/* Datos bancarios — boarding-pass-style card */
.regalos-bank {
  position: absolute;
  top: 415px;
  left: 50px;
  right: 50px;
  z-index: 3;
  text-align: center;
  border: 2.5px solid var(--color-heading-blue);
  border-radius: 10px;
  padding: 12px 16px 14px;
  background-image: url('/assets/images/canva/8874316f474565d084565ace61a8bd13.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.regalos-bank-title {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--color-gold-dark);
  margin: 0 0 8px;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.regalos-bank dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  text-align: left;
  margin: 0;
}
.regalos-bank dl div {
  display: contents;
}
.regalos-bank dt {
  font-family: var(--font-body-display);
  font-size: 13px;
  color: var(--color-name-dark-burgundy);
  font-weight: 400;
  margin: 0;
  text-align: right;
  padding-right: 6px;
}
.regalos-bank dd {
  font-family: var(--font-body-display);
  font-size: 13px;
  color: var(--color-gold);
  margin: 0;
}
.regalos-balloon-outline {
  position: absolute;
  top: 615px;
  left: 246px;
  width: 89px;
  height: 109px;
  z-index: 2;
}
.regalos-stamp-madrid {
  position: absolute;
  top: 620px;
  left: 43px;
  width: 81px;
  height: 80px;
  z-index: 3;
}
.regalos-stamp-pink {
  position: absolute;
  top: 627px;
  left: 106px;
  width: 116px;
  height: 102px;
  z-index: 3;
}

/* ============= INFO FAQ (canva /info exact coords) ============= */
.section-info {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: calc(800px * var(--u));
  overflow: hidden;
}
.info-airplane-circle {
  position: absolute;
  top: 0;
  left: 254px;
  width: 77px;
  height: 80px;
  z-index: 2;
}
.info-title {
  margin: 50px 0 0;
  font-family: var(--font-heading);
  font-size: 31px;
  color: var(--color-heading-blue);
  font-weight: 400;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}
.info-subtitle {
  margin: 16px 0 0;
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-gold-dark);
}
.info-compass {
  position: absolute;
  bottom: 90px;
  left: 44px;
  width: 97px;
  height: 100px;
  z-index: 2;
  opacity: 0.85;
}
.info-stamp-spain {
  position: absolute;
  bottom: 80px;
  left: 234px;
  width: 112px;
  height: 128px;
  z-index: 2;
}
.info-stamp-pink {
  position: absolute;
  bottom: 30px;
  left: 158px;
  width: 105px;
  height: 89px;
  z-index: 2;
}

.faq {
  position: relative;
  z-index: 3;
  text-align: center;
  margin: 24px auto 80px;
  padding: 0 50px;
}
.faq-item {
  border: 1px solid var(--color-heading-blue);
  border-radius: 6px;
  padding: 14px 16px;
  text-align: center;
  margin-bottom: 8px;
  background: var(--color-bg);
  position: relative;
  z-index: 4;
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-heading);
  color: var(--color-gold-dark);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.3;
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { display: none; }
.faq-item[open] summary::before { display: none; }
.faq-item p {
  margin: 10px 0 0;
  color: var(--color-gold-dark);
  font-family: var(--font-heading);
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

/* (obsolete .countdown-* rules removed — see .cd-* in countdown block above) */

.site-footer {
  padding: 3rem 1.25rem;
  text-align: center;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  font-size: 0.9rem;
}

/* ========== Historia ========== */
.historia-stop__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1rem 0;
}
.historia-plane {
  width: 48px;
  height: auto;
  transform: rotate(15deg);
}
.historia-photo-placeholder {
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--color-gold) 18%, white);
  border: 2px dashed var(--color-gold-dark);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-dark);
  font-family: var(--font-body);
  font-size: 0.75rem;
  padding: 0.5rem;
  text-align: center;
  gap: 0.5rem;
}
.historia-photo-placeholder span {
  font-size: 2.5rem;
}
.historia-photo-placeholder small {
  font-family: var(--font-body-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ================= BOARDING PASS (Pasaje a Nuestra Boda) ================= */
/* Fiel al Canva mobile. Fondo completo con rayas diagonales, ticket PNG
   superior con texto overlay, detalles debajo con balloon outline, sello
   rosa "31 JUL 2026" flotando en la esquina. */

.section-boarding {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: calc(480px * var(--u));
  overflow: hidden;
  background: none;
}

.boarding-inner {
  position: absolute;
  top: 0;
  left: 50%;
  width: 390px;
  height: 480px;
  transform: translateX(-50%) scale(var(--u));
  transform-origin: top center;
}

/* Single stripe background spanning ticket + all detail rows */
.boarding-card {
  position: absolute;
  top: 40px;
  left: 8px;
  right: 8px;
  height: 345px;
  background-image: url('/assets/images/canva/8874316f474565d084565ace61a8bd13.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* Ticket gráfico principal (bff851b054) */
.boarding-ticket {
  position: absolute;
  top: 40px;
  left: 8px;
  right: 8px;
  height: 146px;
  z-index: 1;
}
.boarding-ticket__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}
.boarding-ticket__text {
  position: absolute;
  inset: 0;
  left: 95px;
  right: 55px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.boarding-pasaje {
  font-family: var(--font-body-display);
  font-size: 32px;
  line-height: 1.05;
  color: var(--color-name-dark-burgundy);
  margin: 0;
  font-weight: 400;
  text-transform: uppercase;
}
.boarding-meyandsoul {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-gold-dark);
  margin: 8px 0 0;
  letter-spacing: 0.02em;
}

/* Balloon outline flotando a la derecha, debajo del ticket */
.boarding-balloon {
  position: absolute;
  top: 198px;
  left: 278px;
  width: 77px;
  height: 89px;
  z-index: 2;
  --base-rot: -13deg;
  transform: rotate(-13deg);
}

/* Box con FECHA/HORA/DESTINO */
.boarding-details {
  position: absolute;
  top: 192px;
  left: 8px;
  right: 8px;
  text-align: left;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}

/* FECHA + HORA grouped in one bordered box */
.boarding-rows-group {
  border: 3px solid var(--color-heading-blue);
  border-radius: 8px;
}
.boarding-rows-group .boarding-row + .boarding-row {
  border-top: 1.5px solid var(--color-heading-blue);
}
.boarding-row {
  padding: 7px 10px 8px;
}

/* DESTINO as its own bordered box */
.boarding-row--destino {
  border: 3px solid var(--color-heading-blue);
  border-radius: 8px;
}

.boarding-row dt {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-gold);
  letter-spacing: 0.02em;
  margin: 0;
}
.boarding-row dd {
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-gold-dark);
  line-height: 1.2;
  margin: 2px 0 0;
  text-transform: uppercase;
}

/* Sello rectangular rosa "31 JUL 2026" */
.boarding-stamp-jul {
  position: absolute;
  bottom: 20px;
  right: -4px;
  width: 120px;
  height: auto;
  z-index: 3;
  --rot: rotate(1deg);
  transform: rotate(1deg);
}

/* ============= PHOTO BRIDGE (entre boarding-pass e itinerario) ============= */
.section-photo-bridge {
  position: relative;
  width: 100%;
  height: calc(400px * var(--u));
  overflow: hidden;
}
.pb-map {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  max-width: 600px;
  pointer-events: none;
  z-index: 0;
}
.pb-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 340px;
  margin: 0;
  z-index: 1;
}
.pb-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-clip-path: url(#torn-paper);
  clip-path: url(#torn-paper);
}
.pb-airplane-circle {
  position: absolute;
  bottom: 10px;
  left: 10px;
  width: 90px;
  height: auto;
  z-index: 2;
}

/* ========== Decorative map background helper ========== */
.section-map-bg {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  max-width: 600px;
  opacity: 0.28;
  z-index: 0;
  pointer-events: none;
}

/* (itinerario rules unified above — obsolete duplicates removed) */

/* ============= DESTINO (exact canva coords, 543px) ============= */
/* Canva y-offset: title 2571, balloon 2622, compass 2650, finca 2725,
   address 2761, maps 2805, washi 2822, tape-text 2976, stamps 2966/3011/3104.
   Section starts at y=2571 so subtract. Height = 3114-2571 = 543px */
.section-destino {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: calc(620px * var(--u));
  overflow: hidden;
}
.destino-map {
  position: absolute;
  top: -187px;
  left: -16px;
  width: 513px;
  height: 577px;
  z-index: 0;
}
.destino-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 31px;
  font-weight: 400;
  color: var(--color-heading-blue);
  z-index: 2;
  text-transform: uppercase;
}
.destino-balloon {
  position: absolute;
  top: 51px;
  left: 174px;
  width: 43px;
  height: 53px;
  z-index: 2;
}
.destino-compass {
  position: absolute;
  top: 79px;
  left: 288px;
  width: 64px;
  height: 68px;
  opacity: 1;
  z-index: 2;
}
.destino-name {
  position: absolute;
  top: 154px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--color-name-dark-burgundy);
  z-index: 3;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
}
.destino-address {
  position: absolute;
  top: 190px;
  left: 48px;
  right: 48px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 15px;
  font-style: normal;
  color: var(--color-gold-dark);
  z-index: 3;
  line-height: 1.35;
}
.destino-maps-link {
  position: absolute;
  top: 258px;
  left: 162px;
  width: 70px;
  height: 70px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.destino-maps-link img { width: 70px; height: 70px; }
.destino-click {
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-text);
}
.destino-note {
  position: absolute;
  top: 355px;
  left: 36px;
  right: 36px;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-gold-dark);
  line-height: 1.45;
  z-index: 3;
}
/* Washi tape CTA for bus — single strip (same crop trick as historia tape) */
.destino-bus {
  position: absolute;
  top: 450px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  text-decoration: none;
  display: block;
  /* Reset <button> defaults so it looks like the original <a> */
  background: none;
  border: none;
  outline: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.destino-bus-tape {
  display: none;
}
.destino-bus-text {
  position: relative;
  display: inline-block;
  min-width: 200px;
  padding: 12px 22px;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--color-name-dark-burgundy);
  line-height: 1.3;
  text-align: center;
  transform: rotate(-3deg);
  white-space: nowrap;
  z-index: 1;
}
.destino-bus-text::before {
  content: '';
  position: absolute;
  inset: -3px -4px -3px -12px;
  background-image: url('/assets/images/canva/b7d2ffc003c1cf8153f223817a0e52d7.png');
  background-size: 340% auto;
  background-position: 7% 13%;
  background-repeat: no-repeat;
  filter: saturate(0.7) opacity(0.85) brightness(1.05);
  z-index: -1;
}
.destino-stamp-love {
  position: absolute;
  top: 510px;
  left: 270px;
  width: 78px;
  height: 78px;
  z-index: 3;
}
.destino-stamp-spain {
  position: absolute;
  top: 510px;
  left: 200px;
  width: 76px;
  height: 91px;
  z-index: 3;
}
.destino-stamp-heart {
  position: absolute;
  top: 540px;
  left: 30px;
  width: 105px;
  height: 65px;
  z-index: 3;
}

/* ============= MEET section (canva mobile home transition area) =============
   Canva y range 3611-4300 = 689px. Contains: map bg (extending), orange
   'love' stamp, paragraph, Google Meet icon + (click), decorative
   stamps/balloon. No title. */
.section-meet {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: calc(790px * var(--u));
  overflow: hidden;
}
.section-meet[hidden] { display: block !important; } /* force visible in long-scroll */
.meet-map {
  position: absolute;
  top: 0;
  left: -13px;
  width: 506px;
  height: 569px;
  z-index: 0;
}
.meet-stamp-love {
  position: absolute;
  top: 27px;
  left: 278px;
  width: 79px;
  height: 79px;
  z-index: 2;
}
.meet-balloon {
  position: absolute;
  top: 254px;
  left: 175px;
  width: 38px;
  height: 47px;
  z-index: 2;
}
.meet-stamp-lines {
  position: absolute;
  top: 301px;
  left: 212px;
  width: 143px;
  height: 52px;
  z-index: 2;
}
.meet-text {
  position: absolute;
  top: 367px;
  left: 43px;
  right: 38px;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 17px;
  line-height: 1.35;
  color: var(--color-gold-dark);
  z-index: 3;
}
.meet-link {
  position: absolute;
  top: 620px;
  left: 158px;
  width: 84px;
  z-index: 3;
  display: block;
  text-decoration: none;
}
.meet-link img {
  width: 84px;
  height: 69px;
  display: block;
}
.meet-click {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-gold-dark);
  white-space: nowrap;
}
.meet-compass {
  position: absolute;
  top: 556px;
  left: 38px;
  width: 105px;
  height: 111px;
  z-index: 2;
}
.meet-airplane-circle {
  position: absolute;
  top: 591px;
  left: 269px;
  width: 87px;
  height: 90px;
  z-index: 2;
}
.meet-stamp-pink {
  position: absolute;
  top: 695px;
  left: 250px;
  width: 99px;
  height: 72px;
  z-index: 3;
}

/* ========== Fotos ========== */
.fotos-inner {
  position: relative;
}
.fotos-camera {
  display: inline-block;
  font-size: 3rem;
  margin: 1rem 0;
}

/* (obsolete .regalos-gift rule — replaced above — keep as no-op) */
._obsolete_regalos {
  display: none;
  width: 80px;
  margin: 0 auto 1rem;
}

/* (obsolete .countdown-photo / .countdown-seal removed — replaced by .cd-* above) */

/* Info FAQ container background */
.section-info {
  position: relative;
}

/* ============= HISTORIA — Canva mobile fidelity =============
   4 paradas (Primera / Escala / Travesía / Destino Final) each with
   washi tape label + 4 photos + descriptive text. Uses real canva
   tape PNG as background with 'PRIMERA PARADA' text overlaid. */

.section-historia {
  position: relative;
  max-width: 390px;
  margin: 0 auto;
  padding: 80px 0 0; /* push title to y≈128px matching Canva (48px nav + 80px) */
  text-align: center;
}
.historia-inner {
  position: relative;
  margin: 0 auto 8px;
  height: 165px;
}
/* Taller map (711×800) covers title area from nav downward */
.historia-inner .section-map-bg {
  top: -80px; /* starts right at panel content top (below nav) */
  width: 390px;
  max-width: 390px;
}
.historia-balloon {
  position: absolute;
  top: 95px; /* moved down relative to increased section padding */
  left: 174px;
  width: 43px;
  height: 53px;
  z-index: 2;
}
.historia-inner .section-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  font-family: var(--font-heading);
  font-size: 31px;
  color: var(--color-heading-blue);
  font-weight: 400;
  z-index: 2;
  text-align: center;
}

.historia-stop {
  position: relative;
  margin: 12px auto 36px;
  padding: 0;
}

.historia-stop__label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 20px 20px;
  height: auto;
}
/* img element is hidden — we use the PNG as background on the text span */
.historia-tape {
  display: none;
}
.historia-parada {
  display: inline-block;
  min-width: 155px;
  padding: 12px 28px;
  background-image: url('/assets/images/decor/historia-tape.png');
  background-size: 100% 130%;
  background-position: center bottom;
  background-repeat: no-repeat;
  font-family: var(--font-body-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-name-dark-burgundy);
  line-height: 1.3;
  text-align: center;
  transform: rotate(-2deg);
}
.historia-plane {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transform: rotate(0deg);
}

.historia-stop__photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0;
  position: relative;
}
/* línea dashed vertical central entre las 4 fotos */
.historia-stop__photos::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 2px dashed var(--color-blue-muted);
  z-index: 1;
}
.historia-stop__photos figure {
  position: relative;
  z-index: 2;
  margin: 0;
}
.historia-stop__photos img {
  width: 100%;
  height: auto;
  display: block;
  /* Torn paper clip-path (SVG ref: #torn-paper, extraído del Canva) */
  -webkit-clip-path: url(#torn-paper);
  clip-path: url(#torn-paper);
}

.historia-text {
  max-width: 480px;
  margin: 2rem auto 0;
  font-family: var(--font-body);
}
.historia-text p {
  margin-bottom: 1rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .historia-stop__photos { gap: 0.75rem; }
  .washi-tape { font-size: 0.85rem; padding: 0.4rem 1rem; }
}

/* ============= PLAYLIST hero (canva /play-list, exact coords) ============= */
.section-playlist {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: calc(720px * var(--u));
  overflow: hidden;
}
.pl-map {
  position: absolute;
  top: -120px;
  left: -16px;
  width: 513px;
  height: 577px;
  z-index: 0;
}
.pl-title {
  position: absolute;
  top: 130px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 31px;
  color: var(--color-heading-blue);
  font-weight: 400;
  z-index: 2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.pl-subtitle {
  position: absolute;
  top: 174px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--color-gold-dark);
  z-index: 2;
  letter-spacing: 0.04em;
}
.pl-balloon {
  position: absolute;
  top: 215px;
  left: 173px;
  width: 43px;
  height: 53px;
  z-index: 2;
}
.pl-stamp-lines {
  position: absolute;
  top: 222px;
  left: 113px;
  width: 250px;
  height: 91px;
  z-index: 2;
}
.pl-body {
  position: absolute;
  left: 38px;
  right: 38px;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-gold-dark);
  line-height: 1.35;
  z-index: 3;
}
/* First .pl-body — main paragraph */
.pl-body:not(.pl-body--strong) { top: 320px; }
/* Second .pl-body (--strong) — placed after main body */
.pl-body--strong { top: 460px; font-weight: 400; }
.pl-note-icon {
  position: absolute;
  top: 545px;
  left: 165px;
  width: 58px;
  height: 76px;
  z-index: 3;
}
.pl-compass {
  position: absolute;
  top: 615px;
  left: 35px;
  width: 95px;
  height: 96px;
  z-index: 3;
  opacity: 0.85;
}
.pl-click {
  position: absolute;
  top: 625px;
  left: 168px;
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--color-gold-dark);
  z-index: 4;
}
.pl-stamp-jul {
  position: absolute;
  top: 650px;
  left: 253px;
  width: 102px;
  height: 58px;
  z-index: 3;
}

/* PLAYLIST WIDGET (Spotify search) — separate functional section */
.section-playlist-widget {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  padding: 24px 20px 48px;
  text-align: center;
}

/* Playlist text-input widget */
#playlist-widget {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
.playlist-field {
  display: block;
}
.playlist-field .subtitle-upper {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px;
  color: var(--color-gold-dark);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.playlist-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  font-family: var(--font-body-display);
  font-size: 14px;
  color: var(--color-gold-dark);
  background: transparent;
  border: none;
  border-bottom: 1.5px dashed var(--color-heading-blue);
  outline: none;
}
.playlist-field input::placeholder {
  color: var(--color-gold);
}
.playlist-field input:focus {
  border-bottom-color: var(--color-name-dark-burgundy);
}
.playlist-submit {
  margin-top: 8px;
  padding: 10px 18px;
  background: var(--color-gold);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-family: var(--font-body-display);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.05em;
  cursor: pointer;
  align-self: center;
  min-width: 200px;
}
.playlist-submit:hover:not(:disabled) {
  background: var(--color-gold-dark);
}
.playlist-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ============= FOTOS hero (canva /fotos exact coords) ============= */
.section-fotos {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  height: calc(770px * var(--u));
  overflow: hidden;
}
.ft-map {
  position: absolute;
  top: -100px;
  left: -16px;
  width: 513px;
  height: 577px;
  z-index: 0;
}
.ft-balloon {
  position: absolute;
  top: 32px;
  left: 301px;
  width: 31px;
  height: 38px;
  z-index: 2;
}
.ft-title {
  position: absolute;
  top: 88px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 31px;
  color: var(--color-heading-blue);
  font-weight: 400;
  z-index: 2;
  text-transform: uppercase;
}
.ft-compass {
  position: absolute;
  top: 137px;
  left: 282px;
  width: 69px;
  height: 69px;
  z-index: 2;
  opacity: 0.85;
}
.ft-camera {
  position: absolute;
  top: 141px;
  left: 163px;
  width: 68px;
  height: 68px;
  z-index: 2;
}
.ft-body {
  position: absolute;
  left: 38px;
  right: 38px;
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 17px;
  color: var(--color-gold-dark);
  line-height: 1.35;
  z-index: 3;
}
.ft-body--first { top: 220px; }
.ft-body--strong {
  top: 410px;
  font-weight: 700;
}
.ft-qr-link {
  position: absolute;
  top: 490px;
  left: 50%;
  transform: translateX(-50%);
  width: 145px;
  height: 145px;
  z-index: 3;
  display: block;
  border: 2.5px solid var(--color-heading-blue);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.ft-qr {
  width: 100%;
  height: 100%;
  display: block;
}
.ft-stamp-bonvoyage {
  position: absolute;
  top: 660px;
  left: 50px;
  width: 75px;
  height: 75px;
  z-index: 3;
}

/* obsolete .fotos-* placeholder rules below */
.fotos-camera-icon,
.fotos-camera {
  display: block;
  width: 110px;
  margin: 1rem auto;
}
.fotos-qr {
  display: block;
  max-width: 220px;
  margin: 1.5rem auto 1rem;
  border: 3px solid var(--color-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent);
}
.fotos-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

/* ============================== ANIMACIONES DECORATIVAS ==============================
   Globos: sway continuo (CSS puro). Sellos y brújulas: entrada al hacer scroll
   disparada por IntersectionObserver en /js/scroll-animations.js. */

@keyframes balloonSway {
  0%, 100% { transform: rotate(calc(var(--base-rot, 0deg) - 2deg)) translateY(0); }
  50%      { transform: rotate(calc(var(--base-rot, 0deg) + 2deg)) translateY(-4px); }
}

[class$="-balloon"],
.regalos-balloon-outline {
  animation: balloonSway 5s ease-in-out infinite;
  animation-delay: var(--sway-delay, 0s);
  transform-origin: 50% 0;
  will-change: transform;
}

@keyframes stampEnter {
  from { opacity: 0; transform: var(--rot, rotate(0deg)) scale(0.85); }
  to   { opacity: 1; transform: var(--rot, rotate(0deg)) scale(1); }
}

/* Estado inicial: invisible. La animación se dispara al añadir .is-visible. */
.fx-enter { opacity: 0; }
.fx-enter.is-visible {
  animation: stampEnter 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes compassCalibrate {
  from { opacity: 0; transform: rotate(calc(var(--base-rot, 0deg) + 540deg)) scale(0.85); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: rotate(var(--base-rot, 0deg)) scale(1); }
}

@keyframes compassWobble {
  0%, 100% { transform: rotate(calc(var(--base-rot, 0deg) - 3deg)); }
  50%      { transform: rotate(calc(var(--base-rot, 0deg) + 3deg)); }
}

/* Brújulas usan .fx-enter pero con animación específica que sustituye stampEnter */
.fx-enter[class*="-compass"].is-visible {
  animation:
    compassCalibrate 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    compassWobble 5s ease-in-out 1.4s infinite;
}

/* Section-level fade-up — applied to top-level sections via .fx-section */
.fx-section {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.fx-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .fx-enter {
    opacity: 1;
    animation: none;
  }
  .fx-section {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }
  [class$="-balloon"], .regalos-balloon-outline {
    animation: none;
  }
}

/* ============================================================================
   Bus info inline panel — appears below the .destino-bus tape on click
   ============================================================================ */
/* Make sure the bus-tape <button> has no visible chrome — only the tape +
   text show, exactly like the original <a>. */
.destino-bus:focus { outline: none; }
.destino-bus:focus-visible {
  outline: 2px dashed var(--color-heading-blue);
  outline-offset: 4px;
  border-radius: 4px;
}
.destino-bus:hover .destino-bus-text {
  /* keep visual identical to non-hover; cursor:pointer comes from .destino-bus */
}

.destino-bus-info {
  /* Sibling block after .section-destino — appears in normal flow when shown */
  max-width: 360px;
  margin: 0 auto 24px;
  padding: 16px 22px 18px;
  border: 2.5px solid var(--color-heading-blue);
  border-radius: 10px;
  background-image: url('/assets/images/canva/8874316f474565d084565ace61a8bd13.png');
  background-color: var(--color-bg);
  background-size: cover;
  background-position: center;
  color: var(--color-gold-dark);
  font-family: var(--font-heading);
  text-align: left;
}
.destino-bus-info[hidden] {
  display: none !important;
}
.destino-bus-info__intro {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}
.destino-bus-info__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.destino-bus-info__list > div {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 8px;
  align-items: baseline;
}
.destino-bus-info__list dt {
  font-family: var(--font-body-display);
  font-weight: 700;
  font-size: 12px;
  color: var(--color-name-dark-burgundy);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.destino-bus-info__list dd {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
}
.destino-bus-info__list strong {
  color: var(--color-name-dark-burgundy);
  font-weight: 700;
}

/* ============================================================================
   Admin: stats + playlist panel
   ============================================================================ */
.admin-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.admin-stat {
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-heading-blue) 25%, transparent);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
}
.admin-stat__label {
  display: block;
  font-family: var(--font-body-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
  margin-bottom: 4px;
}
.admin-stat__value {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  color: var(--color-heading-blue);
  line-height: 1;
}