/* ============================================================
   KHAL CALLOWAY STUDIO
   XV Años: Renata Daniela · Telón de Terciopelo
   FILE: styles.css
   ============================================================ */

/* ── Signature face: Scriptorial (font/Scriptorial.ttf) — XV_RBN_04A ──
   Verified TrueType, family name "Scriptorial", full Spanish coverage.
   Doctrine caps it at three appearances: gate name, hero name, closing signature. */
@font-face {
  font-family: 'Scriptorial';
  src: url('font/Scriptorial.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --obsidian: #0a0a10;
  --obsidian-2: #131019;
  --obsidian-3: #1b1726;
  --ivory: #efe6d6;
  --ivory-dim: #c9c0ae;
  --gold: #c9a15a;
  --gold-bright: #ecd08e;
  --blue-deep: #17233f;
  --turquoise: #6fe3d9;
  --garnet: #4a1420;
  --line: rgba(201, 161, 90, .28);
  --f-eyebrow: 'Cinzel', serif;
  --f-display: 'Cormorant Garamond', serif;
  --f-body: 'Montserrat', sans-serif;
  --ease-silk: cubic-bezier(.65, 0, .35, 1);

  /* ── KC Ballet Nocturne · Apricot Blush — canonical foundation (XV_RBN_04A) ──
     The legacy tokens above stay: 3000+ lines still consume them and the section
     redesigns that retire them belong to BLT_04B/04C/05. */
  --kc-velvet-black:    #120F13;
  --kc-wine-shadow:     #2A1C23;
  --kc-apricot-blush:   #FAB1AA;
  --kc-satin-rose:      #D98F8B;
  --kc-tulle-pink:      #F6D8D4;
  --kc-ivory-paper:     #FFF7F0;
  --kc-antique-gold:    #C9A66B;
  --kc-rosegold-thread: #A97868;

  --kc-f-signature:  'Scriptorial', 'Cormorant Garamond', cursive;
  --kc-f-editorial:  'Cormorant Garamond', Georgia, serif;
  --kc-f-ceremonial: 'Cinzel', serif;
  --kc-f-ui:         'Montserrat', system-ui, sans-serif;
  --kc-music-medallion-size: 56px;
  --kc-watch-size: var(--kc-music-medallion-size);

  --kc-ease-curtain: cubic-bezier(.70, 0, .20, 1);
  /* Alias, not a duplicate: --ease-silk already holds this exact curve. */
  --kc-ease-silk: var(--ease-silk);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--f-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.locked {
  overflow: hidden;
  height: 100vh;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--gold);
  color: var(--obsidian);
}

.eyebrow {
  font-family: var(--f-eyebrow);
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
}

/* .divider removed — XV_AWR_13B1-R1: zero HTML references confirmed */

.section {
  position: relative;
  padding: clamp(64px, 12vw, 120px) 22px;
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

/* RSVP owns its entrance: ivory from Hospedaje evaporates into the velvet
   canvas inside the scene, without inserting a standalone divider. */
#rsvp.section::before {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 50%;
  width: 100vw;
  height: clamp(8rem, 18vw, 13rem);
  content: '';
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--kc-ivory-paper) 0%,
    color-mix(in srgb,var(--kc-ivory-paper) 72%,var(--kc-tulle-pink)) 22%,
    color-mix(in srgb,var(--kc-tulle-pink) 24%,transparent) 54%,
    transparent 100%
  );
  transform: translateX(-50%);
}

.section h2 {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(2rem, 8vw, 2.7rem);
  line-height: 1.15;
  color: var(--ivory);
}

/* .section h2 em + .section p.lead removed — XV_AWR_13B1-R1: zero HTML references confirmed */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease-silk), transform 1s var(--ease-silk);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* .ambient-bg — REMOVED in XV_AWR_02C-B. Replaced by .hero-forest-bg + .hero-forest-vignette. */

/* ============================================================
   GATE — Telón de Terciopelo: theatrical curtain
   Video: centered 720×1280 curtain · cord pull activates the opening
   ============================================================ */

/* ── Gate container — fullscreen fixed ── */
.kc-gate {
  --gate-apricot: var(--kc-apricot-blush);
  /* Cord geometry from telon1.mp4 (720×1280): rope at x≈0.874, spanning y 0.20→0.83.
     The frame is always 9:16 and top-anchored, so its percentages are the video's. */
  --gate-frame-w: max(100vw, 100vh * (720 / 1280));
  --gate-frame-h: max(100vh, 100vw * (1280 / 720));
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow: hidden;
  background: var(--obsidian);
  transition: opacity 1.2s var(--ease-silk), transform 1.4s var(--ease-silk);
}

/* Luminous dissolve continues telon2's final camera push-in. */
.kc-gate.is-exiting {
  opacity: 0;
  transform: scale(1.02);
  pointer-events: none;
}

/* ── Warm stage base ── */
.gate-stage-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(98, 42, 24, .34), transparent 65%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(14, 7, 5, .96), transparent 70%),
    var(--kc-velvet-black);
}

/* ── Centered 9:16 curtain frame ── */
.gate-curtain-frame {
  position: absolute;
  top: 0;
  left: 50vw;
  transform: translateX(-50%);
  width: max(100vw, 100vh * (720 / 1280));
  height: max(100vh, 100vw * (1280 / 720));
  z-index: 1;
}

/* ── Gate videos: both absolute fullscreen, same framing ── */
.gate-idle-video,
.gate-break-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  user-select: none;
  animation: videoReveal 1.2s var(--ease-silk) both;
}

.gate-idle-video {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Opacity/visibility preserves a loaded first frame; never use display:none. */
.gate-break-video {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 3;
  transition: opacity .16s ease-out;
}

.kc-gate.is-breaking .gate-break-video {
  opacity: 1;
  visibility: visible;
}

.kc-gate.is-breaking .gate-idle-video {
  opacity: 0;
  visibility: hidden;
}

@keyframes videoReveal {
  from { opacity: 0; filter: brightness(.72) saturate(.78); }
  to { opacity: 1; filter: brightness(1) saturate(1); }
}

/* ── Spotlight: a restrained warm bloom over the curtain ── */
.gate-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(ellipse 58% 42% at 50% 58%, transparent 0%, rgba(10, 5, 4, .24) 62%, rgba(8, 4, 3, .7) 100%);
  animation: spotBreath 4s ease-in-out infinite;
  transition: opacity 1s ease;
}

@keyframes spotBreath {
  0%, 100% { opacity: .82; }
  50% { opacity: 1; }
}

.kc-gate.is-activated .gate-spotlight {
  animation: none;
  opacity: .76;
}

/* Upper theatrical safe zone: the centre of the frame belongs to the silhouette.
   pointer-events:none — this is text, and it overlaps #gateCordTarget. */
.gate-copy {
  position: absolute;
  left: 50%;
  top: calc(env(safe-area-inset-top, 0px) + clamp(48px, 12vh, 110px));
  z-index: 9;
  width: min(90vw, 360px);
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .5rem;
  color: var(--kc-ivory-paper);
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .78);
  pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}

.gate-eyebrow,
.gate-name,
.gate-supporting {
  margin: 0;
}

.gate-eyebrow {
  font-family: var(--kc-f-ceremonial);
  font-size: .66rem;
  letter-spacing: .32em;
  color: var(--kc-antique-gold);
}

/* Scriptorial appearance #1 of 3 (gate · hero · closing signature).
   Recalibrated from the font's real metrics: unitsPerEm 1200, x-height .307em,
   The celebrant name advances 5.382em. The old clamp was tuned for Cormorant —
   at 4.25rem the name measures 366px and overflows the 360px column, and the
   .307em x-height makes a script read far smaller than a serif at equal size. */
.gate-name {
  font-family: var(--kc-f-signature);
  font-size: clamp(2.9rem, 15vw, 3.9rem);
  line-height: 1;
}

.gate-supporting {
  font-family: var(--kc-f-editorial);
  font-size: .92rem;
  letter-spacing: .06em;
}

/* ── Cord hit target: a transparent strip over the rope, inside the video frame ──
   The frame is wider than the viewport on tall phones and the rope sits near the
   cropped edge, so 'left' is capped to keep at least 64px of the strip on screen. */
#gateCordTarget {
  position: absolute;
  z-index: 4;
  top: 22%;
  height: 58%;
  left: min(80%, calc((var(--gate-frame-w) + 100vw) / 2 - 64px));
  width: 16%;
  min-width: 64px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#gateCordTarget:focus-visible {
  outline: 3px solid var(--gate-apricot);
  outline-offset: 2px;
}

/* ── Cord hint: discoverability, never a second CTA.
   Anchored bottom-centre of the viewport; it names the gesture, it does not point. ── */
.gate-cord-hint {
  position: absolute;
  z-index: 9;
  margin: 0;
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(30px, 9vh, 76px));
  left: 50%;
  transform: translateX(-50%);
  color: #fff7f0;
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.72rem, 2.5vw, .86rem);
  font-weight: 600;
  letter-spacing: .22em;
  white-space: nowrap;
  opacity: .94;
  pointer-events: none;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, .96),
    0 0 12px rgba(0, 0, 0, .9),
    0 0 24px rgba(250, 177, 170, .3);
  transition: opacity .6s ease;
}

.gate-cord-hint.pulse-strong {
  animation: cordHintBreath 2.6s ease-in-out infinite;
}

@keyframes cordHintBreath {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

.kc-gate.is-activated .gate-copy {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  pointer-events: none;
}

.kc-gate.is-activated .gate-cord-hint { opacity: 0; }
.kc-gate.is-activated #gateCordTarget { pointer-events: none; }

/* ── Reduced motion safety ── */
@media(prefers-reduced-motion:reduce) {
  .gate-idle-video,
  .gate-break-video,
  .gate-spotlight,
  .gate-cord-hint.pulse-strong { animation: none; }
  .gate-copy,
  .gate-cord-hint { transition: none; }
}

/* ── Narrow portrait continuity patch — BLT_03C-R1 ──
   In viewports narrower than 1:2 (W/H ≤ 0.50), the 9:16 frame overshoots
   horizontally and the curtain cord (x ≈ 0.874) is cropped or hugs the cut edge.
   This shifts the video framing rightward so the cord stays comfortably visible,
   and realigns the hit target and hint to match.
   BOTH videos receive the same object-position so telon1→telon2 is continuous. */
@media (max-aspect-ratio: 1/2) {
  .kc-gate {
    --gate-np-shift: 60%;
  }

  .gate-idle-video,
  .gate-break-video {
    object-position: var(--gate-np-shift) top;
  }

  #gateCordTarget {
    left: min(74%, calc((var(--gate-frame-w) + 100vw) / 2 - 72px));
  }

  .gate-cord-hint {
    left: 58%;
  }
}

/* ============================================================
   MAIN WRAPPER
   ============================================================ */
#invitation {
  position: relative;
}

/* ============================================================
   HERO — XV_RBN_04B_R1: Renata Daniela CREST REMASTER + HIERARCHY CLEANUP
   Mobile-first velvet stage with the telon2 apricot handoff held from first paint.
   ============================================================ */

/* ── Canvas: a contained, axial stage rather than a bottom-anchored banner ── */
#hero.hero-ballet {
  --hero-safe-top: max(24px, env(safe-area-inset-top));
  --hero-safe-bottom: max(34px, env(safe-area-inset-bottom));
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: var(--hero-safe-top) max(20px, env(safe-area-inset-right)) var(--hero-safe-bottom) max(20px, env(safe-area-inset-left));
  text-align: center;
  color: var(--kc-ivory-paper);
  background: linear-gradient(160deg, color-mix(in srgb, var(--kc-apricot-blush) 46%, var(--kc-wine-shadow)) 0%, color-mix(in srgb, var(--kc-apricot-blush) 30%, var(--kc-wine-shadow)) 54%, var(--kc-velvet-black) 100%);
}

/* ── Sequenced stage depth: the bridge above it remains visible before .in ── */
.hero-ballet-stage.hero-forest-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 1.45s var(--kc-ease-silk), transform 1.7s var(--kc-ease-silk);
  background:
    radial-gradient(ellipse 82% 55% at 50% 27%, color-mix(in srgb, var(--kc-apricot-blush) 50%, transparent) 0%, color-mix(in srgb, var(--kc-satin-rose) 18%, transparent) 40%, transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-wine-shadow) 18%, transparent) 0%, color-mix(in srgb, var(--kc-velvet-black) 4%, transparent) 45%, color-mix(in srgb, var(--kc-velvet-black) 62%, transparent) 100%);
}

.hero-ballet-stage.hero-forest-bg.in {
  opacity: 1;
  transform: scale(1);
}

/* Side velvet occlusion and a single localized haze define the proscenium. */
.hero-ballet-stage.hero-forest-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--kc-velvet-black) 74%, transparent) 0%, color-mix(in srgb, var(--kc-wine-shadow) 22%, transparent) 17%, transparent 36%, transparent 64%, color-mix(in srgb, var(--kc-wine-shadow) 22%, transparent) 83%, color-mix(in srgb, var(--kc-velvet-black) 74%, transparent) 100%),
    radial-gradient(ellipse 46% 24% at 50% 42%, color-mix(in srgb, var(--kc-tulle-pink) 7.5%, transparent), transparent 72%);
}

/* A restrained satin reflection grounds the lower third without painting it pink. */
.hero-ballet-stage.hero-forest-bg::after {
  content: '';
  position: absolute;
  inset: 52% 0 0;
  background:
    radial-gradient(ellipse 54% 42% at 50% 72%, color-mix(in srgb, var(--kc-satin-rose) 16%, transparent) 0%, color-mix(in srgb, var(--kc-rosegold-thread) 8%, transparent) 38%, transparent 73%),
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--kc-velvet-black) 38%, transparent) 100%);
}

/* ── Always-visible telon2 light bridge: never waits for the sequence ── */
.hero-ballet-bloom.hero-forest-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(ellipse 88% 60% at 50% 14%, color-mix(in srgb, var(--kc-apricot-blush) 76%, transparent) 0%, color-mix(in srgb, var(--kc-satin-rose) 34%, transparent) 32%, color-mix(in srgb, var(--kc-tulle-pink) 15%, transparent) 56%, transparent 80%),
    radial-gradient(ellipse 54% 36% at 50% 34%, color-mix(in srgb, var(--kc-ivory-paper) 13%, transparent), transparent 72%),
    linear-gradient(180deg, transparent 0%, transparent 56%, color-mix(in srgb, var(--kc-velvet-black) 34%, transparent) 100%);
}

/* ── Ritual composition: ACTO, full seal, name, then date/signature ── */
.hero-ballet-content {
  position: relative;
  z-index: 2;
  width: min(100%, 34rem);
  min-height: calc(100svh - var(--hero-safe-top) - var(--hero-safe-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  align-content: center;
  justify-items: center;
  gap: clamp(8px, 1.75vh, 18px);
  padding: clamp(28px, 7vh, 72px) 0 clamp(50px, 10vh, 92px);
}

.hero-theme-line {
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.64rem, 2.4vw, .78rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .26em;
  text-indent: .26em;
  color: var(--kc-antique-gold);
  font-variant-caps: all-small-caps;
  text-transform: none;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--kc-velvet-black) 70%, transparent);
}

/* ── Renata Daniela seal: retain the full 3:2 transparent composition in the stage bloom. ── */
.hero-ballet-monogram.hero-fireflies {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  width: clamp(272px, 88vw, 450px);
  max-width: 100%;
  aspect-ratio: 3 / 2;
  margin: clamp(4px, 1vh, 12px) 0 clamp(6px, 1.5vh, 16px);
  overflow: visible;
}

/* Localized tulle lift sits behind the transparent crest, never on the identity. */
.hero-ballet-monogram.hero-fireflies::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 7% -8% 10%;
  pointer-events: none;
  opacity: .42;
  background: radial-gradient(ellipse 62% 48% at 50% 46%, color-mix(in srgb, var(--kc-apricot-blush) 72%, var(--kc-tulle-pink)) 0%, color-mix(in srgb, var(--kc-satin-rose) 42%, transparent) 46%, transparent 76%);
  filter: blur(18px);
}

.hero-ballet-monogram img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 13px 14px color-mix(in srgb, var(--kc-velvet-black) 56%, transparent));
}

.hero-kicker {
  margin: clamp(2px, .65vh, 7px) 0 clamp(1px, .5vh, 6px);
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.68rem, 2.5vw, .82rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .22em;
  text-indent: .22em;
  color: color-mix(in srgb, var(--kc-apricot-blush) 64%, var(--kc-tulle-pink));
  font-variant-caps: all-small-caps;
  text-transform: none;
  text-shadow: 0 1px 10px color-mix(in srgb, var(--kc-velvet-black) 68%, transparent);
}

.hero-title {
  max-width: none;
  margin: clamp(2px, .75vh, 8px) 0 0;
  font-family: var(--kc-f-signature);
  font-size: clamp(2.88rem, 15vw, 5.4rem);
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--kc-ivory-paper);
  text-shadow: 0 2px 12px color-mix(in srgb, var(--kc-velvet-black) 76%, transparent);
}

.hero-date {
  display: grid;
  justify-items: center;
  gap: clamp(4px, .8vh, 7px);
  margin-top: clamp(2px, .8vh, 8px);
  font-family: var(--kc-f-ui);
  line-height: 1.1;
  text-transform: none;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--kc-velvet-black) 72%, transparent);
}

.hero-date time {
  font-family: var(--kc-f-ui);
  font-size: clamp(.68rem, 2.35vw, .78rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .12em;
  text-indent: .12em;
  white-space: nowrap;
  color: var(--kc-ivory-paper);
}

.hero-date span {
  font-family: var(--kc-f-editorial);
  font-size: clamp(.95rem, 4vw, 1.12rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: .015em;
  color: color-mix(in srgb, var(--kc-tulle-pink) 86%, var(--kc-ivory-paper));
  text-transform: none;
}

/* ── Live sequence hooks: one restrained reveal, no ambient animation ── */
.hero-theme-line,
.hero-fireflies,
.hero-kicker,
.hero-title,
.hero-date,
.scroll-cue {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--kc-ease-silk), transform 1.05s var(--kc-ease-silk);
}

.hero-fireflies {
  transform: translateY(12px) scale(.975);
  transition-duration: 1.1s, 1.25s;
}

.hero-title {
  transform: translateY(18px);
  transition-duration: 1.05s, 1.2s;
}

.hero-theme-line.in,
.hero-fireflies.in,
.hero-kicker.in,
.hero-title.in,
.hero-date.in,
.scroll-cue.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* The cue stays an unobtrusive stage mark, not a control or card. */
.scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, transparent, var(--kc-rosegold-thread));
  transform: translate(-50%, 10px);
}

.scroll-cue.in {
  transform: translate(-50%, 0);
}

.scroll-cue::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  border: 1px solid var(--kc-antique-gold);
  border-radius: 50%;
  transform: translateX(-50%);
}

/* ── Desktop: preserve the central stage axis while opening the frame ── */
@media (min-width: 768px) {
  #hero.hero-ballet {
    --hero-safe-top: max(36px, env(safe-area-inset-top));
    --hero-safe-bottom: max(42px, env(safe-area-inset-bottom));
  }

  .hero-ballet-content {
    width: min(100%, 42rem);
    gap: clamp(10px, 1.4vh, 18px);
    padding-block: clamp(48px, 8vh, 90px) clamp(62px, 11vh, 112px);
  }

  .hero-ballet-monogram.hero-fireflies {
    width: clamp(340px, 46vw, 560px);
  }

  .hero-title {
    font-size: clamp(4.8rem, 7.2vw, 6.4rem);
  }
}

/* ── Short mobile stages: retain the full ritual order above the scroll cue. ── */
@media (max-height: 430px) and (max-width: 480px) {
  .hero-ballet-content {
    gap: 6px;
    padding-block: 18px 42px;
  }

  .hero-ballet-monogram.hero-fireflies {
    width: min(248px, 76vw);
    margin-block: 0;
  }
}

/* ── Hero-local reduced motion: revealed elements settle without travel ── */
@media (prefers-reduced-motion: reduce) {
  .hero-ballet-stage.hero-forest-bg,
  .hero-theme-line,
  .hero-fireflies,
  .hero-kicker,
  .hero-title,
  .hero-date,
  .scroll-cue {
    transition-duration: 0ms;
  }

  .hero-ballet-stage.hero-forest-bg,
  .hero-theme-line,
  .hero-fireflies,
  .hero-kicker,
  .hero-title,
  .hero-date,
  .scroll-cue,
  .hero-ballet-stage.hero-forest-bg.in,
  .hero-theme-line.in,
  .hero-fireflies.in,
  .hero-kicker.in,
  .hero-title.in,
  .hero-date.in,
  .scroll-cue.in {
    transform: none;
  }

  .scroll-cue.in {
    transform: translateX(-50%);
  }
}

/* ============================================================
   INTRO — XV_RBN_04C: IVORY STAGE PAPER PROGRAMME
   ============================================================ */
#intro.intro-programme {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(5.5rem, 13vw, 8rem) clamp(1.5rem, 6vw, 3rem);
  color: var(--kc-velvet-black);
  background:
    radial-gradient(ellipse at 12% 88%, color-mix(in srgb, var(--kc-apricot-blush) 10%, transparent), transparent 38%),
    radial-gradient(ellipse at 88% 14%, color-mix(in srgb, var(--kc-tulle-pink) 24%, transparent), transparent 42%),
    repeating-linear-gradient(94deg, color-mix(in srgb, var(--kc-wine-shadow) 2.2%, transparent) 0 1px, transparent 1px 6px),
    var(--kc-ivory-paper);
}

.programme-paper-glow {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: min(16rem, 42%);
  pointer-events: none;
  background:
    radial-gradient(ellipse 66% 76% at 50% 0%, color-mix(in srgb, var(--kc-wine-shadow) 34%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-wine-shadow) 20%, var(--kc-apricot-blush)) 0%, color-mix(in srgb, var(--kc-tulle-pink) 58%, var(--kc-ivory-paper)) 48%, transparent 100%);
  opacity: .76;
}

.programme-page {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(100%, 38rem);
  margin-inline: auto;
  text-align: center;
}

.programme-page::before,
.programme-page::after {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  content: '';
  opacity: .58;
  pointer-events: none;
}

.programme-page::before {
  top: -.55rem;
  left: -.1rem;
  border-top: 1px solid var(--kc-antique-gold);
  border-left: 1px solid var(--kc-antique-gold);
}

.programme-page::after {
  right: -.1rem;
  bottom: -.55rem;
  border-right: 1px solid var(--kc-antique-gold);
  border-bottom: 1px solid var(--kc-antique-gold);
}

.programme-eyebrow {
  margin: 0;
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.62rem, 2.1vw, .72rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--kc-antique-gold);
}

.programme-rule {
  position: relative;
  display: block;
  width: min(8rem, 34vw);
  height: 1px;
  margin: 1.45rem auto 1.7rem;
  background: var(--kc-antique-gold);
  opacity: .72;
}

.programme-rule::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: .22rem;
  height: .22rem;
  content: '';
  border: 1px solid var(--kc-antique-gold);
  border-radius: 50%;
  background: var(--kc-ivory-paper);
  transform: translate(-50%, -50%) rotate(45deg);
}

.programme-title {
  max-width: 13ch;
  margin: 0;
  font-family: var(--kc-f-editorial);
  font-size: clamp(2.35rem, 10vw, 4.35rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.025em;
  color: var(--kc-velvet-black);
}

.programme-body {
  max-width: 32rem;
  margin: 1.85rem auto 0;
  font-family: var(--kc-f-editorial);
  font-size: clamp(1.12rem, 4.5vw, 1.35rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--kc-wine-shadow);
}

.programme-signature {
  margin: 1.8rem 0 0;
  font-family: var(--kc-f-signature);
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.15;
  color: var(--kc-rosegold-thread);
}

.intro-programme .programme-eyebrow,
.intro-programme .programme-rule,
.intro-programme .programme-title,
.intro-programme .programme-body,
.intro-programme .programme-signature {
  opacity: 0;
  transform: translateY(.75rem);
}

.intro-programme.in .programme-eyebrow {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .5s var(--ease-silk) .08s, transform .5s var(--ease-silk) .08s;
}

.intro-programme.in .programme-rule {
  opacity: .72;
  transform: translateY(0);
  transition: opacity .5s var(--ease-silk) .22s, transform .5s var(--ease-silk) .22s;
}

.intro-programme.in .programme-title {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .7s var(--ease-silk) .34s, transform .7s var(--ease-silk) .34s;
}

.intro-programme.in .programme-body {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .65s var(--ease-silk) .52s, transform .65s var(--ease-silk) .52s;
}

.intro-programme.in .programme-signature {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .55s var(--ease-silk) .68s, transform .55s var(--ease-silk) .68s;
}

@media (min-width: 48rem) {
  #intro.intro-programme {
    padding-block: clamp(7rem, 10vw, 10rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .intro-programme.in .programme-eyebrow,
  .intro-programme.in .programme-rule,
  .intro-programme.in .programme-title,
  .intro-programme.in .programme-body,
  .intro-programme.in .programme-signature {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .intro-programme.in .programme-rule {
    opacity: .72;
  }
}

/* ============================================================
   COUNTDOWN — RC3: OPENING-NIGHT CALLBOARD
   The live numbers, confirmed date and city are the scene; no abstract rosette.
   ============================================================ */

#countdown.countdown-tulle {
  position: relative;
  isolation: isolate;
  max-width: none;
  min-height: clamp(25rem, 43vw, 30rem);
  margin: 0;
  padding: clamp(6.25rem, 11vw, 7.5rem) clamp(1rem, 5vw, 2rem) clamp(5.25rem, 9vw, 6.5rem);
  overflow: hidden;
  color: var(--kc-ivory-paper);
  background:
    radial-gradient(ellipse 66% 52% at 50% 56%, color-mix(in srgb, var(--kc-apricot-blush) 26%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-wine-shadow) 92%, var(--kc-apricot-blush)) 0%, var(--kc-velvet-black) 100%);
}

.countdown-paper-bridge {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(5rem, 10vw, 7.5rem);
  pointer-events: none;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--kc-ivory-paper) 76%, transparent) 0%, transparent 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-tulle-pink) 38%, transparent) 0%, transparent 100%);
}

.countdown-programme {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  width: min(100%, 44rem);
  margin-inline: auto;
  gap: clamp(1rem, 2.6vw, 1.65rem);
  text-align: center;
}

#countdown .countdown-kicker {
  margin: 0;
  color: var(--kc-antique-gold);
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.62rem, 1.8vw, .7rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity 650ms var(--ease-silk) 130ms, transform 650ms var(--ease-silk) 130ms;
}

#countdown .countdown-title {
  margin: 0;
  color: var(--kc-ivory-paper);
  font-family: var(--kc-f-editorial);
  font-size: clamp(2.4rem, 8.5vw, 4.8rem);
  font-weight: 500;
  line-height: .92;
  letter-spacing: -.035em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(.8rem);
  transition: opacity 680ms var(--ease-silk) 190ms, transform 680ms var(--ease-silk) 190ms;
}

.countdown-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 38rem);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 700ms var(--ease-silk) 240ms, transform 700ms var(--ease-silk) 240ms;
}

.countdown-unit {
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: .5rem;
  padding: clamp(.8rem, 2.5vw, 1.15rem) clamp(.12rem, 1.2vw, .6rem);
  text-align: center;
}

.countdown-value {
  display: block;
  min-width: 0;
  color: var(--kc-ivory-paper);
  font-family: var(--kc-f-editorial);
  font-size: clamp(2rem, 8vw, 4.25rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.045em;
  text-shadow: 0 10px 28px color-mix(in srgb, var(--kc-apricot-blush) 11%, transparent);
}

.countdown-label {
  display: block;
  color: color-mix(in srgb, var(--kc-tulle-pink) 82%, var(--kc-antique-gold));
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.64rem, 1.65vw, .72rem);
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.25;
  text-transform: uppercase;
}

.countdown-event-anchor {
  display: grid;
  justify-items: center;
  gap: .5rem;
  margin-top: .4rem;
  opacity: 0;
  transform: translateY(.75rem);
  transition: opacity 680ms var(--ease-silk) 320ms, transform 680ms var(--ease-silk) 320ms;
}
.countdown-event-anchor time {
  color: var(--kc-antique-gold);
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.72rem, 1.8vw, .82rem);
  font-weight: 600;
  letter-spacing: .2em;
}
.countdown-event-anchor span {
  color: color-mix(in srgb, var(--kc-tulle-pink) 70%, transparent);
  font-family: var(--kc-f-ui);
  font-size: clamp(.64rem, 1.6vw, .72rem);
  letter-spacing: .16em;
}

#countdown.countdown-tulle.in .countdown-kicker,
#countdown.countdown-tulle.in .countdown-title,
.countdown-tulle.in .countdown-grid,
.countdown-tulle.in .countdown-event-anchor {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 390px) {
  #countdown.countdown-tulle { min-height: 25rem; padding-inline: .8rem; }
  .countdown-grid { width: 100%; }
  .countdown-unit { gap: .4rem; padding-inline: 0; }
  .countdown-value { font-size: clamp(1.8rem, 8vw, 2.15rem); }
  .countdown-label { font-size: .62rem; letter-spacing: .09em; }
  .countdown-event-anchor time { letter-spacing: .14em; }
}

@media (min-width: 768px) {
  #countdown.countdown-tulle { min-height: clamp(28rem, 38vw, 30rem); }
}

@media (prefers-reduced-motion: reduce) {
  #countdown .countdown-kicker,
  #countdown .countdown-title,
  .countdown-grid,
  .countdown-event-anchor { transition: none; }
  #countdown.countdown-tulle .countdown-kicker,
  #countdown.countdown-tulle .countdown-title,
  .countdown-tulle .countdown-grid,
  .countdown-tulle .countdown-event-anchor {
    opacity: 1;
    transform: translateY(0);
  }
}



/* ================================================================
   FAMILY CREDITS — PROGRAMME PAPER + BALLET ORNAMENT RECOVERY
   ================================================================ */
#padres.family-credits {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(88px, 13vw, 124px) clamp(22px, 7vw, 72px) calc(min(61.375vw, 28rem) + clamp(14px, 3vw, 28px));
  color: var(--kc-wine-shadow);
  text-align: center;
  background: var(--kc-ivory-paper);
}

/* A short tulle veil carries the velvet countdown into the paper programme. */
.family-night-paper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 68% 20% at 50% 0%,
      color-mix(in srgb, var(--kc-apricot-blush) 16%, transparent),
      transparent 74%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--kc-wine-shadow) 14%, transparent),
      color-mix(in srgb, var(--kc-wine-shadow) 5%, transparent) 76px,
      transparent 116px
    ),
    repeating-linear-gradient(
      96deg,
      color-mix(in srgb, var(--kc-wine-shadow) 1.6%, transparent) 0 1px,
      transparent 1px 15px
    ),
    repeating-linear-gradient(
      7deg,
      color-mix(in srgb, var(--kc-antique-gold) 1.2%, transparent) 0 1px,
      transparent 1px 19px
    );
}

.family-ballet-ornament {
  position: absolute;
  z-index: 1;
  bottom: clamp(14px, 3vw, 28px);
  left: 50%;
  width: min(92vw, 42rem);
  aspect-ratio: 736 / 491;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.7s var(--kc-ease-silk), transform 0.7s var(--kc-ease-silk);
}

.family-ballet-ornament > img {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

#padres.family-credits > :not(.family-night-paper, .family-ballet-ornament) {
  position: relative;
  z-index: 2;
}

.family-credits-header {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 3vw, 22px);
  margin: 0 auto clamp(42px, 8vw, 64px);
}

.family-credits-eyebrow {
  margin: 0;
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(0.62rem, 2.4vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.28em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--kc-antique-gold);
}

.family-honour-seal {
  width: clamp(72px, 15vw, 88px);
  color: var(--kc-antique-gold);
}

.family-honour-seal img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.family-honour-seal circle,
.family-honour-seal path {
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.family-seal-orbit-outer {
  stroke-width: 0.8;
  opacity: 0.72;
}

.family-seal-orbit-inner {
  stroke-width: 0.55;
  opacity: 0.48;
}

.family-seal-ticks {
  stroke-width: 0.8;
  opacity: 0.75;
}

.family-seal-arc {
  stroke-width: 0.7;
  opacity: 0.62;
}

.family-honour-seal .family-seal-needle {
  stroke: var(--kc-rosegold-thread);
  stroke-width: 0.95;
  opacity: 0.9;
}

.family-seal-core {
  fill: var(--kc-rosegold-thread);
  stroke-width: 0.7;
}

.family-credit-ledger {
  display: grid;
  gap: clamp(30px, 6vw, 48px);
  width: min(100%, 50rem);
  margin: 0 auto;
}

.family-credit-group {
  display: grid;
  gap: clamp(20px, 4vw, 28px);
  width: 100%;
}

.family-credit-group::before {
  width: min(100%, 22rem);
  height: 1px;
  margin: 0 auto;
  content: '';
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--kc-antique-gold) 56%, transparent) 18%,
    color-mix(in srgb, var(--kc-antique-gold) 56%, transparent) 82%,
    transparent
  );
}

#padres.family-credits .family-credit-heading {
  margin: 0;
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(0.76rem, 2.5vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.22em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--kc-antique-gold);
}

.family-credit-cast {
  display: grid;
  gap: clamp(22px, 5vw, 32px);
}

.family-credit-person {
  display: grid;
  gap: 7px;
  margin: 0;
}

.family-credit-role {
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(0.62rem, 2.2vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--kc-antique-gold);
}

.family-credit-name {
  display: block;
  max-width: 20ch;
  margin-inline: auto;
  font-family: var(--kc-f-editorial);
  font-size: clamp(1.65rem, 6vw, 2.22rem);
  font-weight: 500;
  line-height: 1.13;
  color: var(--kc-wine-shadow);
}

.family-credit-interlude {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: min(100%, 22rem);
  margin: 0 auto;
  color: var(--kc-antique-gold);
}

.family-credit-interlude::before,
.family-credit-interlude::after {
  height: 1px;
  content: '';
  background: color-mix(in srgb, currentColor 52%, transparent);
}

.family-credit-interlude span {
  display: block;
  width: 5px;
  height: 5px;
  background: currentColor;
  transform: rotate(45deg);
}

.family-credits-header,
.family-credit-group,
.family-credit-interlude {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.55s var(--kc-ease-silk), transform 0.55s var(--kc-ease-silk);
}

.family-credits.in .family-credits-header,
.family-credits.in .family-credit-group,
.family-credits.in .family-credit-interlude {
  opacity: 1;
  transform: translateY(0);
}

.family-credits.in .family-ballet-ornament {
  opacity: 0.58;
  transform: translate(-50%, 0);
}

.family-credits.in .family-credit-group:nth-child(3) {
  transition-delay: 0.08s;
}

@media (min-width: 720px) {
  #padres.family-credits {
    padding-inline: clamp(40px, 9vw, 128px);
  }

  .family-credit-group {
    width: min(100%, 46rem);
    margin-inline: auto;
  }

  .family-credit-cast {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 6vw, 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .family-credits-header,
  .family-credit-group,
  .family-credit-interlude {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .family-ballet-ornament {
    opacity: 0.58;
    transform: translateX(-50%);
    transition: none;
  }
}

/* ── UBICACIONES / PROGRAMME ACTS — BALLET DOCTRINE R3 ── */
/* Two photographic velvet chapters: the places are scenes, never cards. */
#ubicaciones.programme-acts {
  --programme-velvet: var(--kc-velvet-black);
  --programme-paper: var(--kc-ivory-paper);
  --programme-ivory: var(--kc-tulle-pink);
  --programme-gold: var(--kc-antique-gold);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--programme-velvet);
}

/* The family paper fades into the first velvet scene instead of cutting to black. */
#ubicaciones.programme-acts::before {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(80px, 15vw, 110px);
  content: '';
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--programme-paper) 0%,
    color-mix(in srgb, var(--programme-paper) 72%, var(--programme-velvet)) 32%,
    color-mix(in srgb, var(--programme-velvet) 86%, transparent) 100%
  );
}

#ubicaciones.programme-acts.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .72s var(--kc-ease-silk), transform .72s var(--kc-ease-silk);
}

#ubicaciones.programme-acts.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

#ubicaciones.programme-acts .programme-act {
  position: relative;
  display: flex;
  width: 100%;
  min-height: clamp(34rem, 100svh, 42rem);
  isolation: isolate;
  overflow: hidden;
  align-items: stretch;
  background: var(--programme-velvet);
}

/* ENTREACTO interrupts the two-act adjacency; the RC2 velvet dissolve now owns the handoff. */
#ubicaciones.programme-acts .programme-entreacto + .programme-act {
  border-top: 0;
}

/* BLT_06 slot 1/3: a brief velvet pause between the two scenes. */
#ubicaciones.programme-acts .programme-entreacto {
  position: relative;
  display: grid;
  min-height: clamp(16rem, 45svh, 22rem);
  isolation: isolate;
  overflow: hidden;
  place-items: center;
  background: var(--programme-velvet);
}
#ubicaciones.programme-acts .programme-entreacto::before,
#ubicaciones.programme-acts .programme-entreacto::after {
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  height: clamp(7rem, 20vw, 11rem);
  content: '';
  pointer-events: none;
}
#ubicaciones.programme-acts .programme-entreacto::before {
  top: 0;
  background:
    radial-gradient(ellipse 72% 58% at 50% 0%, color-mix(in srgb, var(--kc-apricot-blush) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--programme-velvet) 0%, color-mix(in srgb, var(--programme-velvet) 88%, transparent) 24%, transparent 100%);
}
#ubicaciones.programme-acts .programme-entreacto::after {
  bottom: 0;
  background:
    radial-gradient(ellipse 68% 54% at 50% 100%, color-mix(in srgb, var(--kc-apricot-blush) 14%, transparent), transparent 72%),
    linear-gradient(0deg, var(--programme-velvet) 0%, color-mix(in srgb, var(--programme-velvet) 90%, transparent) 26%, transparent 100%);
}
#ubicaciones.programme-acts .programme-entreacto-image {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: saturate(.62) sepia(.17) brightness(.76) contrast(.94);
}
#ubicaciones.programme-acts .programme-entreacto-veil {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--programme-velvet) 54%, transparent), color-mix(in srgb, var(--programme-velvet) 46%, transparent) 50%, color-mix(in srgb, var(--programme-velvet) 52%, transparent));
}
#ubicaciones.programme-acts .programme-entreacto-copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: .45rem;
  padding: 1.5rem;
  text-align: center;
}
#ubicaciones.programme-acts .programme-entreacto-label {
  margin: 0;
  color: color-mix(in srgb, var(--programme-paper) 88%, var(--programme-gold));
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.62rem, 1.8vw, .76rem);
  font-weight: 600;
  letter-spacing: .28em;
}
.kc-signature-ribbon {
  display: block;
  width: min(16.25rem, 72vw);
  height: auto;
  overflow: visible;
  color: var(--kc-antique-gold);
}
.kc-signature-ribbon-stroke,
.kc-signature-ribbon-thread {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kc-signature-ribbon-stroke { stroke-width: 1.15; }
.kc-signature-ribbon-thread { stroke-width: .6; opacity: .68; }
@media (prefers-reduced-motion: no-preference) {
  .programme-entreacto .kc-signature-ribbon,
  .kc-programme-footer .kc-signature-ribbon { opacity: 0; transform: translateY(9px); }
  .programme-entreacto .kc-signature-ribbon { animation: kcSignatureRibbonIn .7s var(--kc-ease-silk) .18s forwards; }
  .kc-programme-footer.is-visible .kc-signature-ribbon { animation: kcSignatureRibbonIn .7s var(--kc-ease-silk) .18s forwards; }
}
@keyframes kcSignatureRibbonIn {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .programme-entreacto .kc-signature-ribbon,
  .kc-programme-footer .kc-signature-ribbon { animation: none; opacity: 1; transform: none; }
}

#ubicaciones.programme-acts .programme-act-visual {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--programme-velvet);
}

/* This is one readable velvet veil, not a detached text panel. */
#ubicaciones.programme-acts .programme-act-visual::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: '';
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--programme-velvet) 0%, transparent 20%, transparent 78%, var(--programme-velvet) 100%),
    linear-gradient(90deg, color-mix(in srgb, var(--programme-velvet) 64%, transparent) 0%, color-mix(in srgb, var(--programme-velvet) 58%, transparent) 57%, color-mix(in srgb, var(--programme-velvet) 62%, transparent) 100%),
    radial-gradient(ellipse 58% 46% at 58% 38%, color-mix(in srgb, var(--kc-apricot-blush) 24%, transparent) 0%, transparent 74%);
}

#ubicaciones.programme-acts .programme-act-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(.74) sepia(.12) brightness(.84) contrast(.96);
}

/* Iglesia source includes Maps pixels at its lower edge: the oversized image crops them out. */
#ubicaciones.programme-acts .programme-act-ceremony .programme-act-image {
  top: 0;
  bottom: auto;
  height: 120%;
  object-position: center top;
}

#ubicaciones.programme-acts .programme-act-reception .programme-act-image {
  object-position: 58% center;
}

#ubicaciones.programme-acts .programme-act-folio {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 34rem);
  min-height: 100%;
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  margin-right: auto;
  padding: clamp(8.25rem, 28vw, 11.5rem) clamp(1.5rem, 7vw, 5.5rem) clamp(2.5rem, 9vw, 5.25rem);
}

#ubicaciones.programme-acts .programme-act-label {
  margin: 0;
  color: var(--programme-gold);
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.57rem, 1.4vw, .7rem);
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.35;
}

#ubicaciones.programme-acts .programme-act-title {
  margin: .7rem 0 0;
  color: var(--programme-paper);
  font-family: var(--kc-f-editorial);
  font-size: clamp(3rem, 11vw, 5.8rem);
  font-weight: 500;
  line-height: .82;
}

#ubicaciones.programme-acts .programme-act-venue {
  max-width: 27rem;
  margin: 1rem 0 0;
  color: var(--programme-ivory);
  font-family: var(--kc-f-editorial);
  font-size: clamp(1.5rem, 5.4vw, 2.6rem);
  font-weight: 500;
  line-height: .98;
}

#ubicaciones.programme-acts .programme-act-time {
  margin-top: 1.1rem;
  color: color-mix(in srgb, var(--programme-ivory) 82%, transparent);
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.68rem, 1.65vw, .82rem);
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.3;
}

#ubicaciones.programme-acts .programme-act-address {
  max-width: 29rem;
  margin: .85rem 0 0;
  color: color-mix(in srgb, var(--programme-paper) 82%, transparent);
  font-family: var(--kc-f-ui);
  font-size: clamp(.76rem, 1.8vw, .92rem);
  line-height: 1.55;
}

#ubicaciones.programme-acts .programme-act-map {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  margin-top: 1.15rem;
  padding: .5rem 0;
  color: var(--programme-gold);
  font-family: var(--kc-f-ceremonial);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--programme-gold) 64%, transparent);
  transition: color .2s ease, border-color .2s ease;
}

#ubicaciones.programme-acts .programme-act-map:hover {
  color: var(--programme-paper);
  border-color: var(--programme-paper);
}

#ubicaciones.programme-acts .programme-act-map:focus-visible {
  outline: 2px solid var(--programme-paper);
  outline-offset: 5px;
  color: var(--programme-paper);
}

@media (min-width: 760px) {
  #ubicaciones.programme-acts .programme-act {
    min-height: clamp(38rem, 74vh, 44rem);
  }

  #ubicaciones.programme-acts .programme-act-reception .programme-act-folio {
    margin-right: 0;
    margin-left: auto;
  }

  #ubicaciones.programme-acts .programme-act-reception .programme-act-visual::after {
    background:
      linear-gradient(180deg, var(--programme-velvet) 0%, transparent 20%, transparent 78%, var(--programme-velvet) 100%),
      linear-gradient(270deg, color-mix(in srgb, var(--programme-velvet) 70%, transparent) 0%, color-mix(in srgb, var(--programme-velvet) 64%, transparent) 57%, color-mix(in srgb, var(--programme-velvet) 68%, transparent) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #ubicaciones.programme-acts.reveal,
  #ubicaciones.programme-acts.reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  #ubicaciones.programme-acts .programme-act-map {
    transition: none;
  }
}

/* ── ITINERARIO / RABBIT HOLE TIMELINE — XV_AWR_05B ── */
.itinerary-rabbit-hole {
  isolation: isolate;
  overflow: hidden;
  max-width: 760px;
  padding: clamp(68px, 13vw, 116px) clamp(16px, 5vw, 42px) clamp(74px, 14vw, 126px);
  background: #090a0b;
}

.itinerary-hole-bg,
.itinerary-hole-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.itinerary-hole-bg {
  z-index: -2;
  background: var(--obsidian-2);
  opacity: .72;
  filter: saturate(.96) brightness(.96) contrast(1.04);
  transform: scale(1.025);
  transition: opacity 1.7s var(--ease-silk), filter 1.7s var(--ease-silk), transform 3.5s var(--ease-silk);
}

.itinerary-hole-shade {
  z-index: -1;
  background:
    radial-gradient(ellipse 58% 42% at 50% 42%, rgba(22, 30, 17, .02) 0%, rgba(5, 7, 6, .10) 62%, rgba(3, 4, 4, .52) 100%),
    linear-gradient(180deg, rgba(3, 4, 4, .56) 0%, rgba(5, 8, 6, .06) 28%, rgba(4, 6, 5, .12) 72%, rgba(3, 4, 4, .58) 100%);
}

.itinerary-rabbit-hole.is-root-awake .itinerary-hole-bg {
  opacity: .98;
  filter: saturate(1.05) brightness(1.03) contrast(1.05);
  transform: scale(1);
}

.itinerary-header {
  position: relative;
  z-index: 2;
  max-width: 390px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s var(--ease-silk) .28s, transform .9s var(--ease-silk) .28s;
}

.itinerary-rabbit-hole.is-root-awake .itinerary-header { opacity: 1; transform: translateY(0); }

.itinerary-eyebrow {
  font-family: var(--f-eyebrow);
  font-size: .62rem;
  letter-spacing: .34em;
  color: var(--gold-bright);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .85);
}

.itinerary-title {
  margin-top: 10px;
  font-family: var(--kc-f-editorial);
  font-size: clamp(2.15rem, 10vw, 3.6rem);
  font-weight: 400;
  line-height: .98;
  color: #f4ead7;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .72);
}

.itinerary-subtitle {
  max-width: 260px;
  margin: 14px auto 0;
  color: rgba(239, 230, 214, .85);
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.28;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .88);
}

.itinerary-branch-stage {
  position: relative;
  z-index: 1;
  max-width: 590px;
  margin: 35px auto 0;
}

.itinerary-branch-svg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.itinerary-branch-main,
.itinerary-branch-offshoot {
  fill: none;
  stroke: url(#itineraryRootGold);
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: url(#itineraryRootGlow);
  vector-effect: non-scaling-stroke;
}

.itinerary-branch-main {
  stroke-width: 3.35;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--root-progress, 0));
  opacity: .98;
  filter: url(#itineraryRootGlow) drop-shadow(0 0 5px rgba(98, 117, 65, .48));
  transition: stroke-dashoffset .96s cubic-bezier(.18, .8, .2, 1);
}

.itinerary-branch-offshoot {
  stroke-width: 1.75;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: .9;
  transition: stroke-dashoffset .72s cubic-bezier(.2, .82, .18, 1);
}

.itinerary-branch-offshoot.is-sprouted { stroke-dashoffset: 0; }

.itinerary-timeline {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.itinerary-step {
  position: relative;
  display: flex;
  min-height: clamp(72px, 19vw, 92px);
  flex-direction: column;
  justify-content: center;
  width: calc(50% - 16px);
  opacity: 0;
  filter: blur(3px);
  transition: opacity .5s ease, transform .72s var(--ease-silk), filter .66s ease;
}

.itinerary-step-left {
  align-items: flex-end;
  margin-right: auto;
  padding-right: 9px;
  text-align: right;
  transform: translateX(-16px) translateY(6px);
}

.itinerary-step-right {
  align-items: flex-start;
  margin-left: auto;
  padding-left: 9px;
  text-align: left;
  transform: translateX(16px) translateY(6px);
}

.itinerary-step.is-sprouted {
  opacity: 1;
  filter: blur(0);
  transform: translate(0);
}

.itinerary-node {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(246, 220, 142, .9);
  border-radius: 50%;
  background: #b88b44;
  box-shadow: 0 0 0 3px rgba(64, 86, 54, .3), 0 0 11px 3px rgba(204, 159, 78, .38);
  transform: translateY(-50%) scale(0);
  transition: transform .48s cubic-bezier(.2, 1.35, .32, 1) .18s;
}

.itinerary-step-left .itinerary-node { right: -20px; }
.itinerary-step-right .itinerary-node { left: -20px; }
.itinerary-step.is-sprouted .itinerary-node { transform: translateY(-50%) scale(1); }

.itinerary-time {
  color: #e4be75;
  font-family: var(--f-eyebrow);
  font-size: clamp(.66rem, 2.8vw, .78rem);
  font-weight: 600;
  letter-spacing: .095em;
  line-height: 1.1;
  text-shadow: 0 2px 8px #000, 0 0 14px rgba(180, 128, 53, .28);
}

.itinerary-label {
  max-width: 160px;
  margin-top: 5px;
  color: #f2eadc;
  font-family: var(--f-display);
  font-size: clamp(1rem, 4.2vw, 1.25rem);
  font-weight: 500;
  line-height: 1.02;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .94);
}

@media (min-width: 768px) {
  .itinerary-rabbit-hole { max-width: 860px; }
  .itinerary-branch-stage { margin-top: 48px; }
  .itinerary-step { min-height: 94px; width: calc(50% - 38px); }
  .itinerary-label { max-width: 220px; font-size: 1.33rem; }
  .itinerary-step-left { padding-right: 22px; }
  .itinerary-step-right { padding-left: 22px; }
  .itinerary-step-left .itinerary-node { right: -44px; }
  .itinerary-step-right .itinerary-node { left: -44px; }
}

@media (prefers-reduced-motion: reduce) {
  .itinerary-hole-bg,
  .itinerary-header,
  .itinerary-branch-main,
  .itinerary-branch-offshoot,
  .itinerary-step,
  .itinerary-node { transition: none !important; }
  .itinerary-hole-bg { opacity: .98; filter: saturate(1.03) brightness(1.02); transform: none; }
  .itinerary-header,
  .itinerary-step { opacity: 1; filter: none; transform: none; }
  .itinerary-branch-main,
  .itinerary-branch-offshoot { stroke-dashoffset: 0; }
  .itinerary-node { transform: translateY(-50%) scale(1); }
}

/* — Itinerary final milestone node — */
.itinerary-node-final {
  width: 11px;
  height: 11px;
  background: radial-gradient(circle, #f2d98a 30%, #b87f32 100%);
  border-color: rgba(242, 217, 138, .95);
  box-shadow: 0 0 0 4px rgba(64, 86, 54, .28), 0 0 16px 5px rgba(218, 170, 82, .46);
}
.itinerary-step-final .itinerary-label {
  color: #f5e8c4;
  text-shadow: 0 0 18px rgba(204, 162, 78, .38), 0 2px 10px rgba(0,0,0,.94);
}

/* ── DRESS CODE / APRICOT BLUSH EDITORIAL INTERLUDE ── */
#dress-code.dress-code-interlude {
  --dress-paper: var(--kc-ivory-paper);
  --dress-ink: var(--kc-wine-shadow);
  --dress-gold: var(--kc-antique-gold);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(4.5rem, 12vw, 7rem) clamp(1.25rem, 6vw, 4rem);
  overflow: hidden;
  color: var(--dress-ink);
  background:
    radial-gradient(ellipse at 12% 88%, color-mix(in srgb, var(--kc-apricot-blush) 10%, transparent), transparent 38%),
    radial-gradient(ellipse at 88% 14%, color-mix(in srgb, var(--kc-tulle-pink) 24%, transparent), transparent 42%),
    repeating-linear-gradient(94deg, color-mix(in srgb, var(--kc-wine-shadow) 2.2%, transparent) 0 1px, transparent 1px 6px),
    var(--kc-ivory-paper);
}

#dress-code.dress-code-interlude::before {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: min(16rem, 42%);
  content: '';
  pointer-events: none;
  background:
    radial-gradient(ellipse 66% 76% at 50% 0%, color-mix(in srgb, var(--kc-wine-shadow) 34%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-wine-shadow) 20%, var(--kc-apricot-blush)) 0%, color-mix(in srgb, var(--kc-tulle-pink) 58%, var(--kc-ivory-paper)) 48%, transparent 100%);
  opacity: .76;
}

.dress-code-stage {
  display: grid;
  grid-template-columns: minmax(8rem, .62fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.25rem, 6vw, 4.5rem);
  width: min(100%, 55rem);
  margin-inline: auto;
}

.dress-code-visual {
  display: grid;
  place-items: center;
  min-width: 0;
  margin: 0;
}

.dress-code-visual img {
  display: block;
  width: min(100%, 15rem);
  height: auto;
  max-height: 22rem;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px color-mix(in srgb, var(--kc-wine-shadow) 18%, transparent));
}

.dress-code-copy {
  display: grid;
  justify-items: start;
  min-width: 0;
}

.dress-code-eyebrow {
  margin: 0;
  color: var(--dress-gold);
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.58rem, 1.9vw, .7rem);
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.35;
}

.dress-code-rule {
  display: block;
  width: min(6rem, 30vw);
  height: 1px;
  margin: 1rem 0 1.25rem;
  background: var(--dress-gold);
  opacity: .68;
}

.dress-code-title {
  max-width: 8ch;
  margin: 0;
  color: var(--dress-ink);
  font-family: var(--kc-f-editorial);
  font-size: clamp(2.25rem, 8.8vw, 4.65rem);
  font-weight: 500;
  line-height: .9;
  letter-spacing: -.035em;
}

.dress-code-body {
  max-width: 22rem;
  margin: 1.25rem 0 0;
  color: color-mix(in srgb, var(--dress-ink) 82%, transparent);
  font-family: var(--kc-f-editorial);
  font-size: clamp(1rem, 3.5vw, 1.22rem);
  line-height: 1.45;
}

#dress-code.dress-code-interlude.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .72s var(--kc-ease-silk), transform .72s var(--kc-ease-silk);
}

#dress-code.dress-code-interlude.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

@media (min-width: 720px) {
  #dress-code.dress-code-interlude::before { inset: 2rem clamp(2rem, 8vw, 7rem); }
  .dress-code-stage { grid-template-columns: minmax(14rem, .72fr) minmax(0, 1fr); }
  .dress-code-visual img { width: min(100%, 19rem); max-height: 28rem; }
  .dress-code-copy { padding-block: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  #dress-code.dress-code-interlude.reveal,
  #dress-code.dress-code-interlude.reveal.in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── HOSPEDAJE / PROGRAMME PAPER CODA — DOCTRINE R4 ── */
/* The final lodging note opens from velvet onto a single, unbroken ivory folio. */
#hospedaje.lodging-coda {
  --lodging-paper: var(--kc-ivory-paper);
  --lodging-ivory: var(--kc-tulle-pink);
  --lodging-gold: var(--kc-antique-gold);
  --lodging-ink: var(--kc-wine-shadow);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(8.5rem, 18vw, 11.5rem) clamp(1.5rem, 6vw, 5rem) clamp(4.75rem, 11vw, 8rem);
  overflow: hidden;
  color: var(--lodging-ink);
  text-align: left;
  background:
    radial-gradient(ellipse at 12% 88%, color-mix(in srgb, var(--kc-apricot-blush) 10%, transparent), transparent 38%),
    radial-gradient(ellipse at 88% 14%, color-mix(in srgb, var(--kc-tulle-pink) 24%, transparent), transparent 42%),
    repeating-linear-gradient(94deg, color-mix(in srgb, var(--kc-wine-shadow) 2.2%, transparent) 0 1px, transparent 1px 6px),
    var(--kc-ivory-paper);
}

/* A tulle-length veil makes the handoff from the final velvet act ceremonial. */
#hospedaje.lodging-coda::before {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  left: 0;
  height: clamp(80px, 14vw, 110px);
  content: '';
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--kc-velvet-black) 0%,
    color-mix(in srgb, var(--kc-velvet-black) 68%, var(--lodging-ivory)) 42%,
    color-mix(in srgb, var(--lodging-paper) 92%, transparent) 100%
  );
}

/* Programme's top paper bloom, retained behind Hospedaje's factual ledger. */
#hospedaje.lodging-coda::after {
  position: absolute;
  z-index: 0;
  inset: 0 0 auto;
  height: min(16rem, 42%);
  content: '';
  pointer-events: none;
  background:
    radial-gradient(ellipse 66% 76% at 50% 0%, color-mix(in srgb, var(--kc-wine-shadow) 34%, transparent), transparent 68%),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-wine-shadow) 20%, var(--kc-apricot-blush)) 0%, color-mix(in srgb, var(--kc-tulle-pink) 58%, var(--kc-ivory-paper)) 48%, transparent 100%);
  opacity: .76;
}

#hospedaje.lodging-coda.reveal .lodging-coda-header,
#hospedaje.lodging-coda.reveal .hotel-stay {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .62s var(--kc-ease-silk), transform .62s var(--kc-ease-silk);
}

#hospedaje.lodging-coda.reveal.in .lodging-coda-header,
#hospedaje.lodging-coda.reveal.in .hotel-stay {
  opacity: 1;
  transform: translateY(0);
}

#hospedaje.lodging-coda.reveal.in .hotel-stay-companion {
  transition-delay: .1s;
}

.lodging-coda-header {
  position: relative;
  z-index: 1;
  width: min(100%, 42rem);
  margin: 0 auto;
  text-align: center;
}

.lodging-coda-kicker {
  margin: 0;
  color: var(--lodging-gold);
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.57rem, 1.25vw, .68rem);
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.35;
}

#hospedaje.lodging-coda .lodging-coda-title {
  margin: .65rem 0 0;
  color: var(--lodging-ink);
  font-family: var(--kc-f-editorial);
  font-size: clamp(3.25rem, 10vw, 5.75rem);
  font-weight: 500;
  line-height: .82;
}

.lodging-coda-note {
  max-width: 29rem;
  margin: 1rem auto 0;
  color: color-mix(in srgb, var(--lodging-ink) 76%, transparent);
  font-family: var(--kc-f-ui);
  font-size: clamp(.82rem, 1.7vw, .96rem);
  line-height: 1.6;
}

.lodging-coda-ledger {
  position: relative;
  z-index: 1;
  width: min(100%, 71rem);
  margin: clamp(3.25rem, 8vw, 5.5rem) auto 0;
  border-top: 1px solid color-mix(in srgb, var(--kc-antique-gold) 72%, transparent);
}

/* One Programme registration mark anchors the ledger without framing hotel entries. */
.lodging-coda-ledger::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: .22rem;
  height: .22rem;
  content: '';
  border: 1px solid var(--kc-antique-gold);
  border-radius: 50%;
  background: var(--kc-ivory-paper);
  transform: translate(-50%, -50%) rotate(45deg);
}

.hotel-stay {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 3.5rem);
  padding: clamp(2.75rem, 7vw, 4.75rem) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--kc-antique-gold) 72%, transparent);
}

.hotel-stay-visual {
  min-height: clamp(14.5rem, 56vw, 22rem);
  overflow: hidden;
  background: color-mix(in srgb, var(--lodging-ivory) 66%, var(--lodging-paper));
}

.hotel-stay-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  filter: saturate(.72) sepia(.12) brightness(.94) contrast(.95);
  transform: scale(1.035);
}

/* Lift the featured facade crop above distracting foreground geometry. */
.hotel-stay-featured .hotel-stay-image {
  height: 132%;
  object-position: 50% 18%;
  transform: translateY(-4%) scale(1.045);
}

/* Keep the companion architecture legible by muting the red foreground. */
.hotel-stay-companion .hotel-stay-image {
  height: 118%;
  object-position: 72% 23%;
  transform: translateY(-1%) scale(1.08);
}

.hotel-stay-content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.hotel-stay-name {
  margin: 0;
  color: var(--lodging-ink);
  font-family: var(--kc-f-editorial);
  font-size: clamp(2.1rem, 6.1vw, 4.1rem);
  font-weight: 500;
  line-height: .88;
}

.hotel-stay-address {
  max-width: 31rem;
  margin: 1rem 0 0;
  color: color-mix(in srgb, var(--lodging-ink) 78%, transparent);
  font-family: var(--kc-f-ui);
  font-size: clamp(.82rem, 1.55vw, .94rem);
  line-height: 1.65;
}

.hotel-stay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 1.25rem;
  margin-top: 1.35rem;
}

.hotel-stay-map,
.hotel-stay-call {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: .5rem 0;
  color: var(--lodging-ink);
  font-family: var(--kc-f-ceremonial);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom: 1px solid color-mix(in srgb, var(--lodging-gold) 78%, transparent);
  transition: color .2s ease, border-color .2s ease;
}

.hotel-stay-map:hover,
.hotel-stay-call:hover {
  color: var(--lodging-gold);
  border-color: var(--lodging-ink);
}

.hotel-stay-map:focus-visible,
.hotel-stay-call:focus-visible {
  outline: 2px solid var(--lodging-gold);
  outline-offset: 4px;
}

.hotel-reservation-note {
  display: grid;
  gap: .25rem;
  margin: 1.6rem 0 0;
  padding: .2rem 0 .2rem 1rem;
  border-left: 1px solid var(--lodging-gold);
}

.hotel-reservation-label {
  color: color-mix(in srgb, var(--lodging-ink) 78%, transparent);
  font-family: var(--kc-f-ceremonial);
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
}

.hotel-reservation-code {
  color: var(--lodging-ink);
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(.88rem, 1.6vw, 1rem);
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.2;
}

.hotel-reservation-secondary {
  color: color-mix(in srgb, var(--lodging-ink) 72%, transparent);
  font-family: var(--kc-f-ui);
  font-size: .78rem;
  line-height: 1.4;
}

@media (min-width: 760px) {
  .hotel-stay {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
  }

  .hotel-stay-visual {
    min-height: clamp(21rem, 35vw, 29rem);
  }

  .hotel-stay-featured .hotel-stay-visual,
  .hotel-stay-featured .hotel-stay-content {
    grid-row: 1;
  }

  .hotel-stay-companion .hotel-stay-content {
    grid-column: 1;
    grid-row: 1;
  }

  .hotel-stay-companion .hotel-stay-visual {
    grid-column: 2;
    grid-row: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #hospedaje.lodging-coda.reveal .lodging-coda-header,
  #hospedaje.lodging-coda.reveal .hotel-stay,
  #hospedaje.lodging-coda.reveal.in .lodging-coda-header,
  #hospedaje.lodging-coda.reveal.in .hotel-stay {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hotel-stay-map,
  .hotel-stay-call {
    transition: none;
  }
}

/* ================================================================
   GALERIA / ENCHANTED MEMORY DECK — XV_AWR_08B
   Truthful coming-soon deck: four CSS/SVG memory cards, never fake photos.
   ================================================================ */
#galeria.gallery-cardstack { isolation:isolate; overflow:hidden; padding-top:clamp(54px,10vw,84px); padding-bottom:clamp(50px,9vw,76px); text-align:center; background:radial-gradient(ellipse 64% 42% at 50% 43%,rgba(62,58,41,.17),transparent 72%),linear-gradient(180deg,rgba(6,8,10,.72),rgba(10,8,7,.88)); }
#galeria.gallery-cardstack .gallery-haze { position:absolute; z-index:-1; inset:-16% -24%; pointer-events:none; background:radial-gradient(ellipse 32% 20% at 8% 64%,rgba(101,141,139,.12),transparent 70%),radial-gradient(ellipse 30% 22% at 91% 12%,rgba(218,177,92,.1),transparent 68%); filter:blur(20px); }
#galeria.gallery-cardstack .gallery-header { position:relative; z-index:1; }
#galeria.gallery-cardstack .gallery-eyebrow { margin:0; color:#d6b46d; font-family:var(--f-eyebrow); font-size:.58rem; font-weight:600; letter-spacing:.22em; line-height:1.25; }
#galeria.gallery-cardstack .gallery-title { margin:10px 0 0; color:#f2e5c8; font-family:var(--f-display); font-size:clamp(2rem,9vw,3.2rem); font-weight:500; line-height:.98; }
#galeria.gallery-cardstack .gallery-subtitle { max-width:29rem; margin:14px auto 0; color:rgba(235,226,205,.74); font-family:var(--f-body); font-size:.9rem; line-height:1.58; }
#galeria.gallery-cardstack .gallery-deck-wrap { position:relative; max-width:370px; margin:22px auto 0; }
#galeria.gallery-cardstack .gallery-hint { margin:0 0 9px; color:rgba(220,201,158,.64); font-family:var(--f-eyebrow); font-size:.53rem; letter-spacing:.15em; text-transform:uppercase; }
#galeria.gallery-cardstack .gallery-deck { position:relative; height:306px; touch-action:pan-y; user-select:none; }
#galeria.gallery-cardstack .gallery-card { --stack-index:0; --stack-shift:0px; --stack-rotation:0deg; --drag-x:0px; --drag-rotate:0deg; position:absolute; top:0; left:50%; z-index:calc(10 - var(--stack-index)); display:flex; width:min(100%,326px); min-height:266px; padding:31px 28px 26px; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; color:#eee0c0; text-align:center; border:1px solid rgba(216,178,99,.54); border-radius:10px 20px 10px 20px; background:radial-gradient(circle at 50% 12%,rgba(209,174,95,.11),transparent 31%),linear-gradient(138deg,rgba(42,35,26,.98),rgba(14,16,17,.98)); box-shadow:inset 0 0 0 5px rgba(222,191,123,.035),inset 0 1px 0 rgba(255,236,191,.16),0 15px 27px rgba(0,0,0,.31); opacity:calc(1 - (var(--stack-index) * .13)); pointer-events:none; transform:translateX(-50%) translateX(var(--drag-x)) translateY(var(--stack-shift)) rotate(calc(var(--stack-rotation) + var(--drag-rotate))) scale(calc(1 - (var(--stack-index) * .035))); transition:transform .42s cubic-bezier(.22,.72,.22,1),opacity .32s ease; }
#galeria.gallery-cardstack .gallery-card::before,#galeria.gallery-cardstack .gallery-card::after { position:absolute; content:''; pointer-events:none; }
#galeria.gallery-cardstack .gallery-card::before { inset:8px; border:1px solid rgba(227,195,125,.2); border-radius:5px 14px 5px 14px; }
#galeria.gallery-cardstack .gallery-card::after { inset:auto 18px 17px; height:1px; background:linear-gradient(90deg,transparent,rgba(214,178,104,.6),transparent); }
#galeria.gallery-cardstack .gallery-card.is-active { cursor:grab; pointer-events:auto; }
#galeria.gallery-cardstack .gallery-card.is-active:active { cursor:grabbing; }
#galeria.gallery-cardstack .gallery-deck.is-dragging .gallery-card { transition:none; }
#galeria.gallery-cardstack .gallery-card-corner { position:absolute; color:rgba(227,193,120,.72); font-family:var(--f-eyebrow); font-size:.58rem; letter-spacing:.08em; }
#galeria.gallery-cardstack .gallery-card-corner-tl { top:15px; left:17px; }
#galeria.gallery-cardstack .gallery-card-corner-br { right:17px; bottom:15px; transform:rotate(180deg); }
#galeria.gallery-cardstack .gallery-card-sigil { width:82px; height:61px; margin-bottom:8px; }
#galeria.gallery-cardstack .gallery-card-sigil path { fill:none; stroke:rgba(221,185,108,.78); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
#galeria.gallery-cardstack .gallery-card-kicker { color:#d8b66e; font-family:var(--f-eyebrow); font-size:.59rem; letter-spacing:.22em; }
#galeria.gallery-cardstack .gallery-card-title { max-width:13rem; margin:9px 0 0; color:#f3e5c7; font-family:var(--f-display); font-size:1.58rem; font-weight:500; line-height:1; }
#galeria.gallery-cardstack .gallery-card-copy { margin:10px 0 0; color:rgba(231,216,183,.7); font-family:var(--f-body); font-size:.76rem; font-style:italic; line-height:1.4; }
#galeria.gallery-cardstack .gallery-controls { display:inline-grid; grid-template-columns:42px minmax(88px,auto) 42px; align-items:center; gap:10px; margin-top:1px; }
#galeria.gallery-cardstack .gallery-control { display:grid; width:42px; height:42px; place-items:center; color:#e4c27a; border:1px solid rgba(218,182,107,.44); border-radius:50%; background:rgba(38,31,22,.38); transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s ease; }
#galeria.gallery-cardstack .gallery-control svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#galeria.gallery-cardstack .gallery-control:hover { color:#fff0c9; border-color:#edc977; background:rgba(132,101,50,.25); transform:translateY(-1px); }
#galeria.gallery-cardstack .gallery-control:focus-visible { outline:2px solid #fff0c9; outline-offset:3px; }
#galeria.gallery-cardstack .gallery-status { color:rgba(226,209,170,.6); font-family:var(--f-eyebrow); font-size:.49rem; letter-spacing:.1em; text-transform:uppercase; }
@media (min-width:700px) { #galeria.gallery-cardstack .gallery-deck-wrap { max-width:390px; } #galeria.gallery-cardstack .gallery-deck { height:324px; } #galeria.gallery-cardstack .gallery-card { width:346px; min-height:280px; } }
@media (prefers-reduced-motion:reduce) { #galeria.gallery-cardstack .gallery-card,#galeria.gallery-cardstack .gallery-control { transition:none; } }

/* 08C performance: compositor-only dragging; layers are promoted only while useful. */
#galeria.gallery-cardstack .gallery-deck { contain: layout paint; }
#galeria.gallery-cardstack .gallery-card { contain: layout paint; backface-visibility: hidden; transform: translateX(-50%) translate3d(var(--drag-x), var(--stack-shift), 0) rotate(calc(var(--stack-rotation) + var(--drag-rotate))) scale(calc(1 - (var(--stack-index) * .035))); }
#galeria.gallery-cardstack .gallery-card.is-active,
#galeria.gallery-cardstack .gallery-deck.is-settling .gallery-card { will-change: transform; }
#galeria.gallery-cardstack .gallery-deck.is-dragging .gallery-card:not(.is-active) { opacity: 0; }

/* ================================================================
   CAPTURA EL MOMENTO — XV_AWR_13D-R4
   Shared Photo Album CTA · muestra pública sin álbum de cliente
   ================================================================ */

/* ── Section shell ── */
.captura-momento {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 12vw, 96px) clamp(20px, 6vw, 48px);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 46% at 50% 12%, color-mix(in srgb, var(--kc-apricot-blush) 26%, transparent), transparent 74%),
    radial-gradient(ellipse 58% 34% at 16% 78%, color-mix(in srgb, var(--kc-satin-rose) 14%, transparent), transparent 76%),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-wine-shadow) 88%, var(--kc-apricot-blush)) 0%, var(--kc-velvet-black) 100%);
  position: relative;
}

/* Fine apricot mist joins the RSVP and closing-stage scenes. */
.captura-momento::before,
.captura-momento::after {
  position: absolute;
  right: -12%;
  left: -12%;
  height: clamp(3.5rem, 8vw, 6rem);
  content: '';
  pointer-events: none;
  filter: blur(10px);
  opacity: .78;
}
.captura-momento::before {
  top: -1.5rem;
  background:
    radial-gradient(ellipse 52% 80% at 50% 0%, color-mix(in srgb, var(--kc-apricot-blush) 28%, transparent), transparent 74%),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-tulle-pink) 16%, transparent), transparent 100%);
}
.captura-momento::after {
  bottom: -1.5rem;
  background:
    radial-gradient(ellipse 48% 80% at 50% 100%, color-mix(in srgb, var(--kc-satin-rose) 22%, transparent), transparent 74%),
    linear-gradient(0deg, color-mix(in srgb, var(--kc-wine-shadow) 34%, transparent), transparent 100%);
}

/* ── Ambient haze layer (mirrors secret-key-haze depth) ── */
.captura-haze {
  position: absolute;
  z-index: -1;
  inset: -15%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 24% at 10% 70%, color-mix(in srgb, var(--kc-apricot-blush) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 32% 22% at 90% 18%, color-mix(in srgb, var(--kc-tulle-pink) 15%, transparent), transparent 70%),
    radial-gradient(ellipse 62% 32% at 50% 100%, color-mix(in srgb, var(--kc-wine-shadow) 62%, transparent), transparent 75%);
  filter: blur(24px);
}

/* ── Camera SVG wrapper ── */
.captura-camera-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-bottom: clamp(24px, 5vw, 36px);
}
.captura-camera-svg {
  width: clamp(120px, 40vw, 188px);
  height: auto;
  overflow: visible;
  animation: capturaCameraFloat 5.5s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--kc-apricot-blush) 28%, transparent)) drop-shadow(0 2px 8px rgba(0,0,0,.55));
}

@keyframes capturaCameraFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}

/* ── SVG element styles — gold fine-line strokes ── */
.cam-body {
  fill: none;
  stroke: color-mix(in srgb, var(--kc-apricot-blush) 64%, var(--kc-antique-gold));
  stroke-width: 1.6;
  stroke-linejoin: round;
  /* Draw-in via dashoffset — length ≈ perimeter of rects */
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  transition: stroke-dashoffset 0s;
}
.cam-lens-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--kc-apricot-blush) 72%, var(--kc-antique-gold));
  stroke-width: 1.6;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 0s;
}
.cam-lens-mid {
  fill: none;
  stroke: rgba(228, 208, 165, .45);
  stroke-width: 1.2;
  stroke-dasharray: 178;
  stroke-dashoffset: 178;
  transition: stroke-dashoffset 0s;
}
.cam-lens-glass {
  fill: color-mix(in srgb, var(--kc-apricot-blush) 6%, transparent);
  stroke: color-mix(in srgb, var(--kc-apricot-blush) 58%, var(--kc-ivory-paper));
  stroke-width: 1.2;
  stroke-dasharray: 114;
  stroke-dashoffset: 114;
  transition: stroke-dashoffset 0s;
  /* Subtle lens pulse after draw */
  animation: none;
}
.cam-iris {
  stroke: rgba(236, 208, 142, .30);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transition: stroke-dashoffset 0s;
}
.cam-shutter {
  fill: rgba(201, 161, 90, .18);
  stroke: rgba(201, 161, 90, .65);
  stroke-width: 1.3;
  stroke-dasharray: 44;
  stroke-dashoffset: 44;
  transition: stroke-dashoffset 0s;
}
.cam-viewfinder {
  fill: none;
  stroke: rgba(228, 208, 165, .40);
  stroke-width: 1.2;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 0s;
}
.cam-botanical {
  fill: none;
  stroke: rgba(128, 147, 93, .48);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  transition: stroke-dashoffset 0s;
}
.cam-glint {
  fill: rgba(255, 240, 180, .88);
  opacity: 0;
  transition: opacity 0s;
  animation: none;
}
.cam-glint-2 {
  fill: rgba(255, 240, 180, .55);
  opacity: 0;
  transition: opacity 0s;
  animation: none;
}
.cam-flourish {
  fill: none;
  stroke: rgba(201, 161, 90, .35);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  transition: stroke-dashoffset 0s;
}

/* ── Triggered on .captura-momento.in (reveal) ── */
.captura-momento.in .cam-body {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.4s var(--ease-silk) 0.1s;
}
.captura-momento.in .cam-lens-ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.0s var(--ease-silk) 0.5s;
}
.captura-momento.in .cam-lens-mid {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s var(--ease-silk) 0.8s;
}
.captura-momento.in .cam-lens-glass {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s var(--ease-silk) 1.0s;
  animation: capturaLensPulse 4s ease-in-out 2.0s infinite;
}
.captura-momento.in .cam-iris {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s var(--ease-silk) 1.2s;
}
.captura-momento.in .cam-shutter {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s var(--ease-silk) 0.9s;
}
.captura-momento.in .cam-viewfinder {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s var(--ease-silk) 0.7s;
}
.captura-momento.in .cam-botanical {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s var(--ease-silk) 1.4s;
}
.captura-momento.in .cam-glint {
  opacity: 1;
  transition: opacity 0.3s ease 1.8s;
  animation: capturaGlintPass 3.5s ease-in-out 2.0s 1 forwards;
}
.captura-momento.in .cam-glint-2 {
  opacity: 0.7;
  transition: opacity 0.3s ease 2.0s;
}
.captura-momento.in .cam-flourish {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.4s var(--ease-silk) 1.6s;
}

/* ── Camera keyframes ── */
@keyframes capturaLensPulse {
  0%, 100% { stroke: rgba(236, 208, 142, .55); }
  50%       { stroke: rgba(255, 232, 160, .80); }
}
@keyframes capturaGlintPass {
  0%   { opacity: 1;   transform: scale(1);   }
  40%  { opacity: 1;   transform: scale(1.6); }
  70%  { opacity: 0.5; transform: scale(2.2); }
  100% { opacity: 0;   transform: scale(1);   }
}

/* ── Copy ── */
.captura-copy {
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.0s var(--ease-silk) 0.6s, transform 1.0s var(--ease-silk) 0.6s;
}
.captura-momento.in .captura-copy {
  opacity: 1;
  transform: translateY(0);
}
.captura-eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.38em;
  color: rgba(201, 161, 90, .65);
  margin-bottom: 0.6em;
  text-shadow: 0 0 14px rgba(201, 161, 90, .35);
}
.captura-title {
  font-family: var(--kc-f-editorial);
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: normal;
  color: color-mix(in srgb, var(--kc-apricot-blush) 72%, var(--kc-ivory-paper));
  text-shadow:
    0 0 32px color-mix(in srgb, var(--kc-apricot-blush) 38%, transparent),
    0 2px 8px rgba(0, 0, 0, .90);
  margin-bottom: 0.6em;
  line-height: 1.15;
}
.captura-body {
  font-family: var(--f-display);
  font-size: clamp(0.92rem, 3.8vw, 1.05rem);
  font-style: italic;
  line-height: 1.75;
  color: rgba(239, 228, 208, .88);
  text-shadow: 0 1px 12px rgba(2, 1, 6, .95), 0 0 20px rgba(2, 1, 6, .80);
  margin-bottom: 2em;
}
.captura-body-2 {
  display: block;
  color: rgba(239, 228, 208, .70);
  font-size: .96em;
}

/* ── CTA pill ── */
.captura-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 52px;                 /* ≥ 44px touch target */
  padding: 0 clamp(22px, 5vw, 36px);
  font-family: var(--f-eyebrow);
  font-size: clamp(0.72rem, 3.2vw, 0.82rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: color-mix(in srgb, var(--kc-apricot-blush) 78%, var(--kc-ivory-paper));
  border: 1.4px solid color-mix(in srgb, var(--kc-apricot-blush) 58%, var(--kc-antique-gold));
  border-radius: 3px;
  background: color-mix(in srgb, var(--kc-apricot-blush) 8%, transparent);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition:
    background  .22s ease,
    border-color .22s ease,
    color       .22s ease,
    transform   .18s ease,
    box-shadow  .22s ease;
  box-shadow: 0 0 18px color-mix(in srgb, var(--kc-apricot-blush) 18%, transparent), inset 0 0 0 0 color-mix(in srgb, var(--kc-apricot-blush) 12%, transparent);
}
.captura-cta:hover {
  background: color-mix(in srgb, var(--kc-apricot-blush) 18%, transparent);
  border-color: color-mix(in srgb, var(--kc-apricot-blush) 76%, var(--kc-ivory-paper));
  color: #fff8e8;
  box-shadow: 0 0 28px color-mix(in srgb, var(--kc-apricot-blush) 34%, transparent), inset 0 0 12px color-mix(in srgb, var(--kc-apricot-blush) 14%, transparent);
}
.captura-cta:active {
  transform: scale(.96);
  background: color-mix(in srgb, var(--kc-apricot-blush) 24%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--kc-apricot-blush) 24%, transparent);
}
.captura-cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--kc-apricot-blush) 82%, var(--kc-ivory-paper));
  outline-offset: 4px;
}
.captura-cta-icon {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  flex-shrink: 0;
}

/* ── Helper text ── */
.captura-helper {
  margin-top: 0.85em;
  font-family: var(--f-eyebrow);
  font-size: clamp(0.58rem, 2.2vw, 0.66rem);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--kc-apricot-blush) 54%, transparent);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .captura-copy,
  .captura-camera-svg,
  .cam-body, .cam-lens-ring, .cam-lens-mid, .cam-lens-glass,
  .cam-iris, .cam-shutter, .cam-viewfinder, .cam-botanical,
  .cam-glint, .cam-glint-2, .cam-flourish {
    transition: none !important;
    animation: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }
  .captura-copy {
    opacity: 1 !important;
    transform: none !important;
  }
  .captura-cta {
    transition: none !important;
  }
}

/* ================================================================
   SECRET KEY FINALE — XV_AWR_10B
   A narrative key after Album, never a fixed left-side utility.
   ================================================================ */
#secret-key.secret-key-finale { isolation:isolate; overflow:hidden; padding-top:clamp(58px,10vw,84px); padding-bottom:clamp(58px,10vw,82px); text-align:center; background:radial-gradient(ellipse 58% 44% at 50% 42%,color-mix(in srgb,var(--kc-apricot-blush) 24%,transparent),transparent 72%),linear-gradient(180deg,color-mix(in srgb,var(--kc-wine-shadow) 88%,var(--kc-velvet-black)),var(--kc-velvet-black)); }
#secret-key.secret-key-finale .secret-key-haze { position:absolute; z-index:-1; inset:-20%; pointer-events:none; background:radial-gradient(ellipse 30% 20% at 15% 68%,color-mix(in srgb,var(--kc-apricot-blush) 15%,transparent),transparent 72%),radial-gradient(ellipse 30% 21% at 87% 16%,color-mix(in srgb,var(--kc-tulle-pink) 12%,transparent),transparent 70%); filter:blur(21px); }
#secret-key.secret-key-finale .secret-key-stage { position:relative; min-height:176px; display:grid; place-items:center; }
#secret-key.secret-key-finale .secret-key-trigger { display:inline-flex; min-width:148px; min-height:142px; padding:7px 16px; flex-direction:column; align-items:center; justify-content:center; color:#d9b46c; border:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:color .25s ease,transform .25s ease,opacity .25s ease; }
#secret-key.secret-key-finale .secret-key-trigger:hover { color:#f2d18a; transform:translateY(-2px); }
#secret-key.secret-key-finale .secret-key-trigger:active { transform:scale(.96); }
#secret-key.secret-key-finale .secret-key-trigger:focus-visible,#secret-key.secret-key-finale .secret-key-close:focus-visible { outline:2px solid #fff0c9; outline-offset:4px; border-radius:5px; }
#secret-key.secret-key-finale .secret-key-svg { width:94px; height:94px; overflow:visible; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 7px 10px rgba(0,0,0,.38)); }
#secret-key.secret-key-finale .wax-seal-shadow { fill:rgba(0,0,0,.35); stroke:none; }
#secret-key.secret-key-finale .wax-seal-edge { fill:#8c5a42; stroke:#d9b46c; stroke-width:1.1; }
#secret-key.secret-key-finale .wax-seal-face { fill:#6d3f31; stroke:rgba(255,225,177,.42); stroke-width:.8; }
#secret-key.secret-key-finale .wax-seal-imprint { stroke:rgba(255,229,188,.66); stroke-width:1.1; }
#secret-key.secret-key-finale .wax-seal-mark { fill:rgba(222,181,109,.36); stroke:rgba(255,232,194,.58); stroke-width:.7; }
#secret-key.secret-key-finale .secret-key-hint { margin-top:2px; color:rgba(229,210,169,.7); font-family:var(--f-eyebrow); font-size:.57rem; letter-spacing:.2em; text-transform:uppercase; }
#secret-key.secret-key-finale .secret-key-card { position:relative; width:min(100%,360px); padding:27px 23px 22px; overflow:hidden; border:1px solid rgba(217,180,100,.45); border-radius:22px 8px 22px 8px; background:linear-gradient(145deg,color-mix(in srgb,var(--kc-wine-shadow) 82%,var(--kc-apricot-blush)),color-mix(in srgb,var(--kc-velvet-black) 90%,var(--kc-wine-shadow))); box-shadow:inset 0 1px 0 rgba(255,232,178,.12),0 18px 34px rgba(0,0,0,.35); }
#secret-key.secret-key-finale .secret-key-card[hidden] { display:none; }
#secret-key.secret-key-finale .secret-key-card::before { position:absolute; inset:7px; border:1px solid rgba(228,195,126,.12); border-radius:15px 4px 15px 4px; content:''; pointer-events:none; }
#secret-key.secret-key-finale .secret-key-eyebrow { margin:0; color:#d9b66d; font-family:var(--f-eyebrow); font-size:.54rem; font-weight:600; letter-spacing:.2em; }
#secret-key.secret-key-finale .secret-key-title { margin:10px 0 0; color:#f2e4c6; font-family:var(--f-display); font-size:clamp(1.75rem,7vw,2.25rem); font-weight:500; line-height:1; }
#secret-key.secret-key-finale .secret-key-message { margin:14px auto 0; color:rgba(235,223,197,.8); font-family:var(--f-display); font-size:1rem; font-style:italic; line-height:1.62; }
#secret-key.secret-key-finale .secret-key-signature { margin:12px 0 0; color:rgba(224,202,158,.62); font-family:var(--f-body); font-size:.74rem; }
#secret-key.secret-key-finale .secret-key-close { margin-top:18px; padding:7px 2px; color:#e2bd72; border:0; border-bottom:1px solid rgba(224,187,111,.62); background:transparent; font-family:var(--f-eyebrow); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; }
#secret-key.secret-key-finale.is-open .secret-key-trigger { position:absolute; opacity:0; pointer-events:none; transform:scale(.9); }
@media (prefers-reduced-motion:reduce) {
  #secret-key.secret-key-finale .secret-key-trigger { transition:none; }
}

/* ================================================================
   FOOTER
   ================================================================ */
.kc-programme-footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 54px 22px 88px;
  text-align: center;
  border-top: 1px solid rgba(210, 175, 103, .18);
  background:
    radial-gradient(ellipse 62% 58% at 50% 110%, color-mix(in srgb, var(--kc-apricot-blush) 15%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-wine-shadow) 48%, var(--kc-velvet-black)), var(--kc-velvet-black));
}
.kc-programme-footer .footer-mist { position:absolute; z-index:-1; inset:-40% -25%; pointer-events:none; background:radial-gradient(ellipse 30% 22% at 16% 70%,color-mix(in srgb,var(--kc-apricot-blush) 14%,transparent),transparent 72%),radial-gradient(ellipse 34% 20% at 84% 20%,color-mix(in srgb,var(--kc-satin-rose) 11%,transparent),transparent 72%); filter:blur(18px); }
.kc-programme-footer .footer-relic { width:min(180px,58vw); margin:0 auto 14px; color:rgba(218,185,112,.65); }
.kc-programme-footer .footer-relic svg { display:block; width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.kc-programme-footer .footer-whisper { margin:0; color:rgba(231,220,194,.69); font-family:var(--f-display); font-size:1.1rem; font-style:italic; line-height:1.2; }
.kc-programme-footer .footer-family { margin:9px 0 0; color:rgba(223,205,166,.78); font-family:var(--kc-f-signature); font-size:clamp(1.45rem,6vw,2rem); line-height:1; }
.kc-programme-footer .kc-signature-ribbon { margin:8px auto 0; color:rgba(222,190,119,.76); }
.kc-programme-footer .footer-kc-seal { display:flex; min-height:44px; align-items:center; justify-content:center; gap:10px; margin-top:24px; color:rgba(222,190,119,.78); font-family:var(--f-eyebrow); font-size:.52rem; letter-spacing:.2em; text-decoration:none; text-transform:uppercase; transition:color .2s ease; }
.kc-programme-footer .footer-kc-seal:hover { color:#f1d08a; }
.kc-programme-footer .footer-kc-seal:focus-visible { outline:2px solid #fff0c9; outline-offset:4px; border-radius:3px; }
.kc-programme-footer .footer-instagram { width:12px; height:12px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; opacity:.72; }
.kc-programme-footer .footer-seal-line { width:clamp(28px,9vw,54px); height:1px; background:linear-gradient(90deg,transparent,rgba(220,185,109,.58)); }
.kc-programme-footer .footer-seal-line:last-child { background:linear-gradient(90deg,rgba(220,185,109,.58),transparent); }
@media (prefers-reduced-motion:no-preference) {
  .kc-programme-footer:not(.is-visible) .footer-relic,
  .kc-programme-footer:not(.is-visible) .footer-whisper,
  .kc-programme-footer:not(.is-visible) .footer-family,
  .kc-programme-footer:not(.is-visible) .kc-signature-ribbon,
  .kc-programme-footer:not(.is-visible) .footer-kc-seal { opacity:0; transform:translateY(10px); }
  .kc-programme-footer .footer-relic,
  .kc-programme-footer .footer-whisper,
  .kc-programme-footer .footer-family,
  .kc-programme-footer .kc-signature-ribbon,
  .kc-programme-footer .footer-kc-seal { transition:opacity .55s ease,transform .55s var(--ease-silk); }
  .kc-programme-footer.is-visible .footer-whisper { transition-delay:.06s; }
  .kc-programme-footer.is-visible .footer-family { transition-delay:.12s; }
  .kc-programme-footer.is-visible .kc-signature-ribbon { transition-delay:.18s; }
  .kc-programme-footer.is-visible .footer-kc-seal { transition-delay:.24s; }
}

/* ================================================================
   MUSIC MEDALLION CONTROL — BLT_06
   Fixed below the gate (z-index 500); controlled by #musicBtn.
   ================================================================ */
.kc-music-medallion {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 500;
  display: grid;
  width: var(--kc-music-medallion-size);
  min-width: 44px;
  height: var(--kc-music-medallion-size);
  min-height: 44px;
  padding: 0;
  place-items: center;
  color: #d8b36a;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 7px 12px rgba(0,0,0,.48));
  transition: color .24s ease, filter .24s ease, transform .2s ease;
}
.kc-music-medallion[hidden] { display: none; }
.kc-music-medallion::before { position:absolute; z-index:-1; inset:2px; border:1px solid rgba(219,179,97,.32); border-radius:50%; background:radial-gradient(circle at 40% 35%,rgba(244,228,187,.15),rgba(30,25,18,.94) 68%); content:''; }
.kc-music-medallion:hover { color:#f2d48e; filter:drop-shadow(0 8px 15px rgba(0,0,0,.58)); }
.kc-music-medallion:active { transform:scale(.94); }
.kc-music-medallion:focus-visible { outline:2px solid #fff0c9; outline-offset:4px; border-radius:50%; }
.kc-music-medallion-svg { position:relative; width:100%; height:100%; overflow:visible; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.kc-music-medallion-svg .medallion-outer-ring { stroke-width:1.2; }
.kc-music-medallion-svg .medallion-inner-ring { stroke:rgba(245,216,151,.66); stroke-width:.75; }
.kc-music-medallion-svg .medallion-velvet { fill:rgba(45,29,33,.88); stroke:rgba(169,120,104,.5); stroke-width:.65; }
.kc-music-medallion-svg .medallion-rosette { fill:rgba(250,177,170,.34); stroke:rgba(250,198,181,.86); stroke-width:.8; transform-box:view-box; transform-origin:36px 36px; }
.kc-music-medallion.is-paused { color:rgba(171,135,80,.7); filter:drop-shadow(0 5px 9px rgba(0,0,0,.4)); }
.kc-music-medallion.is-paused::before { border-color:rgba(175,136,81,.18); background:radial-gradient(circle at 40% 35%,rgba(218,192,141,.08),rgba(22,19,15,.94) 68%); }
.kc-music-medallion.is-playing .medallion-rosette { animation:kcMedallionRosette 16s linear infinite; }
@keyframes kcMedallionRosette { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .kc-music-medallion.is-playing .medallion-rosette { animation:none; } }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* RESPONSIVE */
@media(min-width:640px) {
  .section {
    max-width: 640px;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Dress Code becomes a full Programme-paper scene, not a pale side card. */
#dress-code.dress-code-interlude {
  padding-block: clamp(6.25rem, 14vw, 8.5rem);
}
.dress-code-stage {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(1.75rem, 7vw, 3.25rem);
  width: min(100%, 42rem);
  text-align: center;
}
.dress-code-visual img {
  width: min(100%, 16rem);
  filter: drop-shadow(0 18px 22px color-mix(in srgb, var(--kc-wine-shadow) 24%, transparent));
}
.dress-code-copy {
  justify-items: center;
  text-align: center;
}
.dress-code-eyebrow {
  color: color-mix(in srgb, var(--kc-wine-shadow) 78%, var(--kc-antique-gold));
  font-size: clamp(.66rem, 2.1vw, .78rem);
  font-weight: 700;
  letter-spacing: .24em;
}
.dress-code-rule {
  width: min(9rem, 42vw);
  margin: 1.15rem auto 1.45rem;
  background: var(--kc-antique-gold);
  opacity: .8;
}
.dress-code-title {
  max-width: 16ch;
  font-family: var(--kc-f-ceremonial);
  font-size: clamp(1.9rem, 8.2vw, 3.65rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .035em;
}
#dress-code.dress-code-interlude .dress-code-title {
  color: color-mix(in srgb, var(--kc-wine-shadow) 76%, var(--kc-satin-rose) 24%);
  text-shadow:
    0 1px 0 color-mix(in srgb, var(--kc-ivory-paper) 88%, transparent),
    0 5px 24px color-mix(in srgb, var(--kc-apricot-blush) 18%, transparent);
}
.dress-code-body {
  margin-top: 1.35rem;
  color: color-mix(in srgb, var(--kc-wine-shadow) 92%, transparent);
}
@media (min-width: 720px) {
  .dress-code-stage {
    grid-template-columns: minmax(14rem, .72fr) minmax(0, 1fr);
    justify-items: stretch;
    width: min(100%, 55rem);
    text-align: left;
  }
  .dress-code-visual img { width: min(100%, 19rem); }
  .dress-code-copy { justify-items: start; text-align: left; }
  .dress-code-rule { margin-inline: 0; }
}

/* Mobile keeps the dress as a subordinate stage relic beneath the copy. */
@media (max-width: 719px) {
  #dress-code.dress-code-interlude {
    padding-block: clamp(4.5rem, 11vw, 6rem);
  }

  .dress-code-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: clamp(18rem, 70vw, 22rem);
  }

  .dress-code-visual {
    position: absolute;
    z-index: 0;
    inset: 0;
    display: grid;
    align-items: end;
    justify-items: center;
    pointer-events: none;
  }

  .dress-code-visual img {
    width: min(72vw, 16rem);
    max-height: 100%;
    opacity: .36;
    transform: translateY(-8%);
    filter: saturate(.84) sepia(.08) drop-shadow(0 18px 22px color-mix(in srgb, var(--kc-wine-shadow) 22%, transparent));
  }

  .dress-code-copy {
    position: relative;
    z-index: 1;
    width: min(100%, 24rem);
  }
}

/* Quiet text must still be legible: dark ink on paper, light ink on velvet. */
.programme-eyebrow,
.family-credits-eyebrow,
#padres.family-credits .family-credit-heading,
.dress-code-eyebrow,
#hospedaje.lodging-coda .lodging-coda-kicker {
  color: color-mix(in srgb, var(--kc-wine-shadow) 78%, var(--kc-antique-gold));
  font-weight: 700;
}
.programme-eyebrow,
.family-credits-eyebrow {
  font-size: clamp(.68rem, 2.2vw, .8rem);
}
#padres.family-credits .family-credit-heading {
  font-size: clamp(.8rem, 2.65vw, .96rem);
}
#hospedaje.lodging-coda .lodging-coda-kicker {
  font-size: clamp(.64rem, 1.45vw, .74rem);
}
#countdown .countdown-kicker,
#ubicaciones.programme-acts .programme-act-label,
#ubicaciones.programme-acts .programme-entreacto-label {
  color: var(--kc-ivory-paper);
  font-weight: 700;
  text-shadow: 0 2px 10px color-mix(in srgb, var(--kc-velvet-black) 82%, transparent);
}
#countdown .countdown-kicker {
  font-size: clamp(.66rem, 1.95vw, .76rem);
}
#ubicaciones.programme-acts .programme-act-label,
#ubicaciones.programme-acts .programme-entreacto-label {
  font-size: clamp(.64rem, 1.9vw, .8rem);
}

/* A measured final proscenium gives the invitation a true closing scene. */
.kc-programme-footer {
  padding: clamp(5rem, 12vw, 7.5rem) 22px clamp(6.5rem, 15vw, 9rem);
  border-top-color: color-mix(in srgb, var(--kc-antique-gold) 64%, transparent);
  background:
    radial-gradient(ellipse 56% 34% at 50% 0%, color-mix(in srgb, var(--kc-tulle-pink) 19%, transparent), transparent 74%),
    radial-gradient(ellipse 62% 58% at 50% 110%, color-mix(in srgb, var(--kc-apricot-blush) 21%, transparent), transparent 72%),
    repeating-linear-gradient(94deg, color-mix(in srgb, var(--kc-antique-gold) 2.4%, transparent) 0 1px, transparent 1px 11px),
    linear-gradient(180deg, color-mix(in srgb, var(--kc-wine-shadow) 58%, var(--kc-velvet-black)), var(--kc-velvet-black));
}
.kc-programme-footer::before {
  position: absolute;
  z-index: 0;
  inset: clamp(1rem, 4vw, 1.75rem) clamp(1rem, 6vw, 3.5rem);
  content: '';
  pointer-events: none;
  border-top: 1px solid color-mix(in srgb, var(--kc-antique-gold) 62%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--kc-antique-gold) 38%, transparent);
}
.kc-programme-footer > :not(.footer-mist) { position: relative; z-index: 1; }
.kc-programme-footer .footer-mist {
  z-index: 0;
  inset: -28% -22%;
  background:
    radial-gradient(ellipse 28% 22% at 14% 66%, color-mix(in srgb, var(--kc-apricot-blush) 24%, transparent), transparent 72%),
    radial-gradient(ellipse 30% 24% at 86% 18%, color-mix(in srgb, var(--kc-tulle-pink) 18%, transparent), transparent 68%),
    radial-gradient(ellipse 38% 18% at 50% 100%, color-mix(in srgb, var(--kc-antique-gold) 13%, transparent), transparent 74%);
  filter: blur(22px);
}
.kc-programme-footer .footer-relic {
  width: min(200px, 62vw);
  margin-bottom: 1.1rem;
  color: color-mix(in srgb, var(--kc-antique-gold) 84%, var(--kc-tulle-pink));
}
.kc-programme-footer .footer-whisper {
  color: color-mix(in srgb, var(--kc-ivory-paper) 92%, transparent);
  font-size: clamp(1.12rem, 3.8vw, 1.36rem);
  line-height: 1.28;
  text-shadow: 0 2px 14px color-mix(in srgb, var(--kc-velvet-black) 72%, transparent);
}
.kc-programme-footer .footer-family {
  margin-top: .75rem;
  color: var(--kc-tulle-pink);
  font-size: clamp(1.65rem, 6.8vw, 2.35rem);
  text-shadow: 0 3px 16px color-mix(in srgb, var(--kc-wine-shadow) 74%, transparent);
}
.kc-programme-footer .kc-signature-ribbon { margin-top: .9rem; color: var(--kc-antique-gold); }
.kc-programme-footer .footer-kc-seal {
  margin-top: 2.1rem;
  color: color-mix(in srgb, var(--kc-antique-gold) 88%, var(--kc-ivory-paper));
}

/* ── CIERRE RSVP ADAPTADO · RESPUESTA EN EL TELÓN ── */
.kc-programme-footer .footer-farewell {
  position: relative;
  max-width: 400px;
  margin: 6px auto 0;
  padding: clamp(25px, 7vw, 34px) clamp(20px, 6vw, 30px) clamp(22px, 6vw, 28px);
  border-top: 1px solid color-mix(in srgb, var(--kc-antique-gold) 82%, transparent);
  background:
    radial-gradient(ellipse 78% 54% at 50% 0%, color-mix(in srgb, var(--kc-tulle-pink) 13%, transparent), transparent 72%),
    color-mix(in srgb, var(--kc-velvet-black) 68%, transparent);
  box-shadow: 0 20px 42px color-mix(in srgb, var(--kc-velvet-black) 62%, transparent);
  text-align: center;
}
.kc-programme-footer .footer-farewell-eyebrow {
  margin: 0;
  color: color-mix(in srgb, var(--kc-ivory-paper) 64%, transparent);
  font-family: var(--f-eyebrow);
  font-size: .49rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.kc-programme-footer .footer-farewell-name {
  margin: 13px 0 0;
  color: var(--kc-ivory-paper);
  font-family: var(--kc-f-signature);
  font-size: clamp(1.65rem, 7vw, 2.35rem);
  line-height: 1;
  text-shadow: 0 3px 16px color-mix(in srgb, var(--kc-wine-shadow) 78%, transparent);
}
.kc-programme-footer .footer-farewell-body {
  max-width: 19rem;
  margin: 13px auto 0;
  color: color-mix(in srgb, var(--kc-ivory-paper) 76%, transparent);
  font-family: var(--f-display);
  font-size: 1rem;
  font-style: italic;
  line-height: 1.5;
}
.kc-programme-footer .footer-farewell-brand {
  margin: 19px 0 0;
  color: color-mix(in srgb, var(--kc-antique-gold) 62%, transparent);
  font-family: var(--f-eyebrow);
  font-size: .38rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
/* ── FOOTER DONOR PORT · FILIGRANA, CUERPO Y CONSTELACIÓN ── */
.kc-programme-footer .footer-filigree-top,
.kc-programme-footer .footer-filigree-bottom {
  display: block;
  fill: none;
  pointer-events: none;
}
.kc-programme-footer .footer-filigree-top {
  width: min(16rem, 72vw);
  margin: 0 auto .7rem;
  stroke: color-mix(in srgb, var(--kc-antique-gold) 68%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--kc-antique-gold) 24%, transparent));
}
.kc-programme-footer .footer-body {
  display: grid;
  justify-items: center;
  gap: clamp(.18rem, .8vw, .35rem);
  padding: .3rem 0;
}
.kc-programme-footer .footer-whisper {
  margin: 0;
  color: color-mix(in srgb, var(--kc-aged-champagne, var(--kc-ivory-paper)) 88%, transparent);
  font-size: clamp(.96rem, 3.2vw, 1.16rem);
  font-style: italic;
  letter-spacing: .04em;
  line-height: 1.35;
  text-shadow: 0 2px 14px color-mix(in srgb, var(--kc-velvet-black) 82%, transparent);
}
.kc-programme-footer .footer-family {
  margin: 0;
  color: transparent;
  background: linear-gradient(105deg, var(--kc-ivory-paper) 0%, var(--kc-antique-gold) 30%, #fff0b3 46%, var(--kc-tulle-pink) 62%, var(--kc-antique-gold) 78%, var(--kc-ivory-paper) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: clamp(2.35rem, 11vw, 3.8rem);
  font-weight: normal;
  line-height: 1;
  letter-spacing: -.01em;
  white-space: nowrap;
  animation: telonFooterNameShimmer 5.5s ease-in-out infinite;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--kc-antique-gold) 36%, transparent));
}
@keyframes telonFooterNameShimmer {
  0%, 100% { background-position: 100% 50%; filter: drop-shadow(0 0 12px color-mix(in srgb, var(--kc-antique-gold) 28%, transparent)); }
  50% { background-position: 0% 50%; filter: drop-shadow(0 0 26px color-mix(in srgb, var(--kc-tulle-pink) 38%, transparent)); }
}
.kc-programme-footer .footer-gold-thread,
.kc-programme-footer .kc-gold-thread {
  display: block;
  width: min(14rem, 58vw);
  height: 4px;
  margin: .45rem auto 0;
  overflow: visible;
  fill: none;
  stroke: var(--kc-antique-gold);
  stroke-width: 1;
  stroke-linecap: round;
  opacity: .74;
}
.kc-programme-footer .footer-filigree-bottom {
  width: min(13rem, 54vw);
  margin: .45rem auto .7rem;
  stroke: color-mix(in srgb, var(--kc-antique-gold) 54%, transparent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.kc-programme-footer .footer-kc-seal {
  margin-top: .8rem;
  color: color-mix(in srgb, var(--kc-aged-champagne, var(--kc-ivory-paper)) 78%, transparent);
  transition: color .28s ease, letter-spacing .28s ease;
}
.kc-programme-footer .footer-kc-seal:hover { color: var(--kc-antique-gold); letter-spacing: .25em; }
.kc-programme-footer .footer-fireflies { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.kc-programme-footer .ff-dot { position: absolute; width: var(--ff-size, 4px); height: var(--ff-size, 4px); top: var(--ff-top, 50%); left: var(--ff-left, 50%); border-radius: 50%; background: radial-gradient(circle, var(--kc-antique-gold) 0%, color-mix(in srgb, var(--kc-tulle-pink) 42%, transparent) 58%, transparent 100%); opacity: 0; animation: telonFireflyFloat var(--ff-dur, 7s) var(--ff-delay, 0s) ease-in-out infinite, telonFireflyBlink var(--ff-blink, 4s) var(--ff-delay, 0s) ease-in-out infinite; }
@keyframes telonFireflyFloat { 50% { transform: translate(calc(var(--ff-vx, 1) * -6px), calc(var(--ff-vy, -1) * 24px)) scale(.9); } }
@keyframes telonFireflyBlink { 40%, 60% { opacity: var(--ff-peak, .65); box-shadow: 0 0 9px 3px color-mix(in srgb, var(--kc-antique-gold) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  .kc-programme-footer .footer-family,
  .kc-programme-footer .ff-dot { animation: none; }
  .kc-programme-footer .ff-dot { opacity: .18; }
}

/* ── SELLO FLORAL · adaptado de Katia al terciopelo ── */
#secret-key.secret-key-finale .secret-key-flower-svg {
  width: 116px;
  height: 116px;
  color: var(--kc-antique-gold);
  filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--kc-velvet-black) 54%, transparent));
}
#secret-key.secret-key-finale .secret-key-flower-svg .flower-stem { stroke-width: 1.35; }
#secret-key.secret-key-finale .secret-key-flower-svg .flower-petals { transform-origin: 80px 74px; animation: telonFlowerBreath 5.6s ease-in-out infinite; }
#secret-key.secret-key-finale .secret-key-flower-svg .flower-halo { opacity: .8; }
#secret-key.secret-key-finale .secret-key-flower-svg .flower-core { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--kc-antique-gold) 62%, transparent)); }
#secret-key.secret-key-finale .secret-key-flower-svg .flower-glint { animation: telonFlowerGlint 3.8s ease-in-out infinite; }
@keyframes telonFlowerBreath { 0%, 100% { transform: scale(.98); } 50% { transform: scale(1.025); } }
@keyframes telonFlowerGlint { 0%, 100% { opacity: .38; } 48% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #secret-key.secret-key-finale .secret-key-flower-svg .flower-petals,
  #secret-key.secret-key-finale .secret-key-flower-svg .flower-glint { animation: none; }
}