/* ============================================================
   KHAL CALLOWAY STUDIO — Alice Wonderland Royal
   XV Años: Isabella Victoria Vázquez Pérez
   FILE: styles.css  (extraído de xv-isabella-wonderland.html)
   ============================================================ */

/* ── Local font: KC Alice (Alice.ttf) — XV_AWR_02C-C ──
   Applied to .hero-title and .hero-theme-line only in this phase. */
@font-face {
  font-family: 'KC Alice';
  src: url('Alice.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);
}

* {
  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;
}

.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 — XV_AWR_02B-V2: Video Gate — conej.webm idle / ruptura.webm break
   Video: portrait ~9:16. Object-position: 72% top (mobile), center top (desktop)
   Watch hitbox: x≈79%  y≈48%  hit≈28%  tilt: -6deg
   ============================================================ */

/* ── Gate hit-target variables — V2 SINGLE SOURCE OF TRUTH ── */
:root {
  --awr-clock-left:  79%;
  --awr-clock-top:   48%;
  --gate-watch-hit:  28%;   /* visual hitbox diameter — revalidate in QA against conej.webm */
  --awr-clock-tilt:  -6deg;
  --awr-gold:        #c9a15a;
  --awr-turquoise:   #6fe3d9;
}

/* ── Gate container — fullscreen fixed ── */
.kc-gate {
  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),
    filter 1.2s var(--ease-silk);
}

/* Dark implosion exit — gate collapses inward, no brightness burn */
.kc-gate.is-exiting {
  opacity: 0;
  transform: scale(0.96);
  filter: blur(8px) brightness(0.6);
  pointer-events: none;
}

/* ── Abyss void base ── */
.gate-void-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(40, 18, 60, .55), transparent 65%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(6, 4, 12, .9), transparent 70%),
    var(--obsidian);
}

/* ── Rabbit frame — Maintains image aspect ratio while covering screen ── */
.gate-rabbit-frame {
  position: absolute;
  top: 0;
  /* Mimics object-position: 72% top */
  left: 72vw;
  transform: translateX(-72%);
  width: max(100vw, 100vh * (941 / 1672));
  height: max(100vh, 100vw * (1672 / 941));
  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;
  /* 72% from left keeps the rabbit centered on narrow screens;
     the frame already handles horizontal offset, so object-position stays centered */
  object-position: center top;
  display: block;
  user-select: none;
  /* Reveal fade-in on load */
  animation: videoReveal 1.2s var(--ease-silk) both;
}

/* Idle: visible by default — shows poster immediately, then video */
.gate-idle-video {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* Break: hidden until touch, using opacity/visibility (not display:none)
   to avoid first-frame jump when swapped in */
.gate-break-video {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 3;  /* above idle */
  transition: opacity .16s ease-out;
}

/* Swap: break video becomes visible when gate enters is-breaking state */
.kc-gate.is-breaking .gate-break-video {
  opacity: 1;
  visibility: visible;
}

/* Also hide idle when break is playing to free GPU compositing */
.kc-gate.is-breaking .gate-idle-video {
  opacity: 0;
  visibility: hidden;
}

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

/* ── DEBUG: Hitbox visualizer — DISABLED in production.
   Add class "debug-hitbox" to #gate to see the watch target ring.
   Remove before shipping. ── */
.debug-hitbox .gate-clock-touch-target {
  outline: 2px dashed rgba(111, 227, 217, .7);
  background: rgba(111, 227, 217, .08);
}

/* ── Spotlight: cinematic vignette illumination from the watch ── */
.gate-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;  /* above both videos (idle z2, break z3) — vignette stays on top */
  /* Dark vignette with a warm opening at the clock position */
  background:
    radial-gradient(
      ellipse 40% 35% at var(--awr-clock-left) var(--awr-clock-top),
      transparent 0%,
      transparent 30%,
      rgba(3, 2, 8, .4) 60%,
      rgba(3, 2, 8, .82) 100%
    );
  animation: spotBreath 4s ease-in-out infinite;
  transition: background 1.8s ease, opacity 1s ease;
}

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

/* On activation: freeze the breathing animation — mismo aspecto que idle, sin cambios de intensidad */
.kc-gate.is-activated .gate-spotlight {
  animation: none;
  opacity: .9;  /* punto medio de spotBreath (oscila .85–1) — queda congelado igual */
}



/* (Clock overlay / face / hands / pivot / fracture removed in V1.
   Tombstone kept for history: .gate-clock-overlay, .kc-gate-clock-face,
   .kc-gate-clock-numerals, .kc-num variants, awrWatchHM/Sec keyframes,
   chaos rules, .gate-fracture-layer, fractureCrack keyframes.) */


/* ── Touch target — invisible circle over the watch, mobile-safe ── */
.gate-clock-touch-target {
  position: absolute;
  left: var(--awr-clock-left);
  top:  var(--awr-clock-top);
  width: var(--gate-watch-hit);
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%) rotate(var(--awr-clock-tilt));
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 9;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.gate-clock-touch-target:focus-visible {
  outline: 2px solid var(--awr-turquoise);
  outline-offset: 6px;
}

/* ── Instruction "Toca el reloj" — only visible CTA, never replaced ── */
.gate-instruction {
  position: absolute;
  bottom: clamp(28px, 8vh, 60px);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--f-eyebrow);
  font-size: .65rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  /* Warm ivory-gold: legible against dark scene */
  color: rgba(238, 218, 172, .88);
  text-align: center;
  white-space: nowrap;
  z-index: 10;
  animation: flicker 5s ease-in-out infinite;
  transition: opacity .6s ease, transform .6s ease;
  pointer-events: none;
  text-shadow: 0 0 12px rgba(201, 161, 90, .4), 0 1px 3px rgba(0,0,0,.7);
}

/* After 9s idle, gently intensify (via JS class) */
.gate-instruction.pulse-strong {
  animation: flickerStrong 2.5s ease-in-out infinite;
}

@keyframes flickerStrong {
  0%, 100% { opacity: .75; letter-spacing: .38em; }
  50% { opacity: 1; letter-spacing: .42em; text-shadow: 0 0 18px rgba(201, 161, 90, .6), 0 1px 3px rgba(0,0,0,.7); }
}

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

@keyframes flicker {
  0%, 100% { opacity: .6; }
  50% { opacity: .95; }
}

/* Fallback CTA block removed in R3 — no button ever appears */

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

/* ── Desktop: show face+watch area instead of just the ears ── */
@media(min-width:768px) {
  .gate-rabbit-frame {
    /* Desktop: image width = 100vw, height ≈ 100vw * 1.777 (portrait ratio).
       Rabbit face+watch is at ~30–50% of image height.
       top: 50% - 48% * imageHeight positions the watch at vertical center.
       Equivalent: top: calc(50vh - 48% of frame height).
       We express this as: top = 50vh - 48/100 * (100vw * 1.777)
                               = 50vh - 0.853 * 100vw
       So top = calc(50vh - 85.3vw)  */
    left: 50vw;
    transform: translateX(-50%);
    top: calc(50vh - 85.3vw);
  }
}

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

/* ============================================================
   HERO BOSQUE — XV_AWR_02C-C Polish
   Concept: dark forbidden forest entrance. Silhouette invoked from mist.
   Kicker above silhouette. Alice.ttf for ISABELLA + EN EL PAÍS.
   ============================================================ */

/* ── Hero root — fullscreen dark forest container ── */
#hero.hero-forest {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;   /* copy anchored near bottom */
  /* XV_AWR_10C-R: was clamp(24px,5vh,40px) — increased so ISABELLA+date sit above the fixed music hint */
  padding: 0 0 clamp(90px, 16vh, 130px);
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--obsidian);
}

/* ── Layer 1: Forest background — dark entry ── */
.hero-forest-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('bosque.jpg');
  background-size: cover;
  background-position: 48% center;  /* slight left offset to favor forest path */
  background-repeat: no-repeat;
  /* initial state: fully transparent — reveal from black */
  opacity: 0;
  transition: opacity 2s var(--ease-silk);
}

.hero-forest-bg.in {
  opacity: 1;
}

/* Dark overlay always present — prevents bright flash on reveal.
   Reduced from .38 to .10: forest must remain visible and atmospheric. */
.hero-forest-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(3, 2, 8, .10);  /* light tint only — vignette handles the rest */
  pointer-events: none;
  z-index: 1;
}

/* ── Layer 2: Spotlight vignette — ALWAYS ON ──
   Like the gate's candle spotlight: transparent at center (silhouette zone),
   dark at all edges. The black silhouette contrasts against the lighter
   forest center — no glow needed, just atmospheric contrast.
   Bottom stays heavy for text readability. */
.hero-forest-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* SPOTLIGHT: dark outer ring, transparent center at silhouette position */
    radial-gradient(
      ellipse 52% 58% at 50% 38%,
      transparent 0%,
      transparent 28%,
      rgba(3, 2, 8, .52) 62%,
      rgba(3, 2, 8, .84) 100%
    ),
    /* Top shadow — sky stays dark and cinematic */
    linear-gradient(to bottom,
      rgba(3, 2, 8, .82) 0%,
      rgba(3, 2, 8, .28) 22%,
      transparent 42%
    ),
    /* Bottom heavy — grounds text with readable dark bed */
    linear-gradient(to top,
      rgba(3, 2, 8, .97) 0%,
      rgba(3, 2, 8, .60) 30%,
      transparent 58%
    );
  opacity: 1;
}

/* ── Layer 3: Fireflies — 12 CSS-only organic particles ── */
.hero-fireflies {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s var(--ease-silk);
}

.hero-fireflies.in {
  opacity: 1;
}

/* Individual firefly particle */
.ff {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 5px 2px rgba(236, 208, 142, .45);
  animation: ffDrift 0s ease-in-out infinite alternate;
  opacity: 0;
}

/* Scatter each firefly — staggered position + timing + colour tint */
.ff:nth-child(1)  { left:  8%; top: 28%; animation: ffDrift 6.2s  ease-in-out infinite alternate; animation-delay: 0s;    opacity: .72; }
.ff:nth-child(2)  { left: 18%; top: 55%; animation: ffDrift 7.8s  ease-in-out infinite alternate; animation-delay: 1.1s;  opacity: .55; background: rgba(111,227,217,.9); box-shadow: 0 0 6px 3px rgba(111,227,217,.25); }
.ff:nth-child(3)  { left: 30%; top: 18%; animation: ffDrift 9.1s  ease-in-out infinite alternate; animation-delay: 0.4s;  opacity: .6;  }
.ff:nth-child(4)  { left: 42%; top: 72%; animation: ffDrift 8.3s  ease-in-out infinite alternate; animation-delay: 2.2s;  opacity: .45; }
.ff:nth-child(5)  { left: 55%; top: 34%; animation: ffDrift 5.9s  ease-in-out infinite alternate; animation-delay: 0.8s;  opacity: .65; }
.ff:nth-child(6)  { left: 65%; top: 60%; animation: ffDrift 10.4s ease-in-out infinite alternate; animation-delay: 1.7s;  opacity: .5;  background: rgba(111,227,217,.9); box-shadow: 0 0 6px 3px rgba(111,227,217,.2); }
.ff:nth-child(7)  { left: 74%; top: 22%; animation: ffDrift 7.2s  ease-in-out infinite alternate; animation-delay: 0.2s;  opacity: .6;  }
.ff:nth-child(8)  { left: 82%; top: 48%; animation: ffDrift 8.8s  ease-in-out infinite alternate; animation-delay: 3.0s;  opacity: .42; }
.ff:nth-child(9)  { left: 12%; top: 78%; animation: ffDrift 6.6s  ease-in-out infinite alternate; animation-delay: 1.4s;  opacity: .55; }
.ff:nth-child(10) { left: 90%; top: 35%; animation: ffDrift 11.0s ease-in-out infinite alternate; animation-delay: 0.6s;  opacity: .38; }
.ff:nth-child(11) { left: 50%; top: 12%; animation: ffDrift 9.4s  ease-in-out infinite alternate; animation-delay: 2.6s;  opacity: .48; }
.ff:nth-child(12) { left: 38%; top: 88%; animation: ffDrift 7.0s  ease-in-out infinite alternate; animation-delay: 1.9s;  opacity: .42; }

@keyframes ffDrift {
  0%   { transform: translate(0, 0) scale(1);    opacity: .0; }
  15%  { opacity: 1; }
  50%  { transform: translate(8px, -12px) scale(1.15); }
  85%  { opacity: .8; }
  100% { transform: translate(-6px, 10px) scale(0.85); opacity: .0; }
}

/* ── Layer 4: Silhouette medallion — XV_AWR_10C-R: bigger + raised ── */
.hero-silhouette-stage {
  position: relative;
  z-index: 3;
  /* XV_AWR_10C-R: was clamp(170px,52vw,260px) — bigger presence */
  width: clamp(210px, 64vw, 310px);
  /* Less margin-top = pushed up relative to kicker; less margin-bottom = tighter stack */
  margin-top: clamp(4px, 0.8vh, 10px);
  margin-bottom: clamp(10px, 2vh, 20px);
  /* NO gold drop-shadow — replaced by ::before mist + ::after dark ambient */
  filter: none;
  /* initial state */
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity  1.6s var(--ease-silk),
    transform 1.8s var(--ease-silk);
}

/* Forest mist behind silhouette — cool, organic, not neon */
.hero-silhouette-stage::before {
  content: '';
  position: absolute;
  inset: -18% -22%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 72% 60% at 50% 52%,
    rgba(12, 16, 30, .52) 0%,
    rgba(8, 12, 22, .26) 50%,
    transparent 78%
  );
  filter: blur(22px);
  z-index: -1;
  pointer-events: none;
}

/* Dark ambient ground shadow — anchors silueta to the forest floor */
.hero-silhouette-stage::after {
  content: '';
  position: absolute;
  bottom: -8%;
  left: 10%;
  right: 10%;
  height: 18%;
  background: radial-gradient(
    ellipse 80% 100% at 50% 100%,
    rgba(2, 1, 6, .38),
    transparent 75%
  );
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}

.hero-silhouette-stage.in {
  opacity: 1;
  transform: scale(1);
}

.hero-silhouette {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 1;
  /* Minimal dark shadow — integration not decoration */
  filter: drop-shadow(0 4px 16px rgba(2, 1, 6, .55));
}

/* ── Layer 5: Copy block ── */
.hero-copy {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0 20px;
}

/* Kicker — Mis XV Años — XV_AWR_10C-R: KC Alice font + larger + shimmer ── */
.hero-kicker {
  position: relative;
  z-index: 5;
  /* XV_AWR_10C-R: switched to KC Alice for thematic identity, still feels secondary to ISABELLA h1 */
  font-family: 'KC Alice', var(--f-display), serif;
  font-weight: normal;
  /* XV_AWR_13D-R2b: +2 pesos — was clamp(1.1rem,4.8vw,1.5rem) */
  font-size: clamp(1.28rem, 5.6vw, 1.75rem);
  letter-spacing: .12em;
  text-transform: none;   /* Alice.ttf reads better in mixed-case */
  color: var(--gold-bright);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease-silk), transform .9s var(--ease-silk);
  margin-bottom: 0;
  /* Multi-layer gold shadow: soft halo + crisp obsidian base */
  text-shadow:
    0 0 28px rgba(201, 161, 90, .55),
    0 0 10px rgba(201, 161, 90, .28),
    0 1px 8px rgba(2, 1, 6, .88);
}

.hero-kicker.in {
  opacity: 1;
  transform: translateY(0);
  /* Golden shimmer — runs once after reveal, then repeats gently */
  animation: kickerShimmer 4s ease-in-out 0.6s infinite;
}

/* Subtle gold-pulse shimmer on the kicker — gives it life without competing with ISABELLA */
@keyframes kickerShimmer {
  0%, 100% {
    text-shadow:
      0 0 28px rgba(201, 161, 90, .55),
      0 0 10px rgba(201, 161, 90, .28),
      0 1px 8px rgba(2, 1, 6, .88);
    opacity: 1;
  }
  45% {
    text-shadow:
      0 0 42px rgba(236, 208, 142, .85),
      0 0 18px rgba(201, 161, 90, .55),
      0 1px 8px rgba(2, 1, 6, .88);
    opacity: .88;
  }
  50% {
    text-shadow:
      0 0 52px rgba(255, 228, 155, 1),
      0 0 24px rgba(201, 161, 90, .72),
      0 1px 8px rgba(2, 1, 6, .88);
    opacity: 1;
  }
}

/* XV_AWR_13D-R2: Slightly larger numeric XV in the kicker — 'Mis XV Años' */
.hero-kicker-xv {
  font-size: 1.28em; /* ~28% larger than surrounding kicker text */
  display: inline-block;
  line-height: 1;
  vertical-align: baseline;
}

/* h1 — ISABELLA in Alice.ttf ── */
.hero-title {
  font-family: 'KC Alice', var(--f-display), serif;
  font-weight: normal;
  font-size: clamp(2.4rem, 10.5vw, 4.2rem);
  line-height: 1.05;
  color: var(--ivory);
  letter-spacing: .10em;
  text-transform: uppercase;
  text-shadow:
    0 2px 20px rgba(2, 1, 6, .75),
    0 1px 4px  rgba(2, 1, 6, .9);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.2s var(--ease-silk), transform 1.2s var(--ease-silk);
  margin: 0;
}

.hero-title.in {
  opacity: 1;
  transform: translateY(0);
}

/* Theme line — EN EL PAÍS DE LAS MARAVILLAS in Alice.ttf ── */
.hero-theme-line {
  font-family: 'KC Alice', var(--f-display), serif;
  font-style: normal;  /* Alice.ttf has no italic variant */
  font-size: clamp(.62rem, 2.6vw, .82rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-top: 6px;
  text-shadow: 0 1px 10px rgba(2, 1, 6, .8);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1s var(--ease-silk), transform 1s var(--ease-silk);
}

.hero-theme-line.in {
  opacity: .82;
  transform: translateY(0);
}

/* Date — 05 SEPTIEMBRE 2026 — legibility pass ── */
.hero-date {
  margin-top: 16px;
  font-family: var(--f-eyebrow);
  letter-spacing: .28em;
  font-size: .68rem;
  /* Warm ivory-parchment: readable without overpowering ISABELLA */
  color: rgba(239, 230, 214, .88);
  text-transform: uppercase;
  text-shadow:
    0 1px 12px rgba(2, 1, 6, .85),
    0 0px 4px  rgba(2, 1, 6, .95);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .9s var(--ease-silk), transform .9s var(--ease-silk);
}

.hero-date.in {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll cue */
.scroll-cue {
  position: relative;
  z-index: 4;
  margin-top: clamp(16px, 4vh, 32px);
  width: 20px;
  height: 32px;
  border: 1px solid rgba(201, 161, 90, .5);
  border-radius: 12px;
  opacity: 0;
  transition: opacity 1s var(--ease-silk);
}

.scroll-cue.in {
  opacity: 1;
}

.scroll-cue::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  background: var(--gold-bright);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 1.8s ease-in-out infinite;
}

@keyframes scrollDot {
  0%   { opacity: 1; top: 6px; }
  100% { opacity: 0; top: 16px; }
}

/* ── Hero-seq reveal — all .hero-seq start invisible ──
   JS adds .in individually to each via revealHeroSequence()
   The bg and vignette use their own opacity transition.
   The silhouette stage also uses its own. fireflies also.
   hero-kicker, hero-title, hero-theme-line, hero-date, scroll-cue
   use the translateY + opacity system above. */

/* ── Desktop Hero adjustments — XV_AWR_10C-R ── */
@media (min-width: 768px) {
  #hero.hero-forest {
    justify-content: center;
    /* Desktop: enough bottom padding so music hint doesn't overlay copy */
    padding: clamp(60px, 10vh, 120px) 24px clamp(80px, 10vh, 100px) 24px;
  }

  .hero-kicker {
    font-size: clamp(1.2rem, 2.8vw, 1.7rem);
  }

  .hero-silhouette-stage {
    /* XV_AWR_10C-R: was clamp(220px,25vw,340px) — raised proportionally */
    width: clamp(260px, 28vw, 380px);
    margin-top: clamp(4px, 0.6vh, 8px);
    margin-bottom: clamp(16px, 2.5vh, 28px);
  }

  .hero-title {
    font-size: clamp(3.4rem, 6.5vw, 5.4rem);
    letter-spacing: .12em;
  }

  .hero-theme-line {
    font-size: clamp(.7rem, 1.8vw, .9rem);
  }
}

/* ── Reduced motion safety — Hero ── */
@media (prefers-reduced-motion: reduce) {
  .hero-forest-bg,
  .hero-forest-vignette,
  .hero-fireflies,
  .hero-silhouette-stage,
  .hero-kicker,
  .hero-title,
  .hero-theme-line,
  .hero-date,
  .scroll-cue {
    transition: opacity .4s ease !important;
    transform: none !important;
  }
  .ff { animation: none !important; }
  .scroll-cue::before { animation: none !important; }
  .hero-kicker.in { animation: none !important; }
}

/* .hero-frame, .hero-frame span, .hero-eyebrow, .hero-name, .hero-sub — REMOVED XV_AWR_02C-B */

/* ============================================================
   INTRO / DEDICATORIA — XV_AWR_04B-R v2
   Doctrina: texto flotando en el bosque. Sin card. Solo niebla y palabras.
   ============================================================ */
#intro.intro-dedication {
  position: relative;
  padding: clamp(24px, 4.5vh, 42px) 32px;
  text-align: center;
  overflow: hidden;
  background: transparent;
}

/* Neblina izquierda — vapor denso desde el flanco oeste del bosque */
.intro-mist-l {
  position: absolute;
  top: -10%;
  left: -8%;
  width: 55%;
  height: 120%;
  background:
    radial-gradient(ellipse 80% 60% at 15% 50%,
      rgba(6, 12, 22, 0.72) 0%,
      rgba(8, 14, 24, 0.38) 45%,
      transparent 72%);
  filter: blur(28px);
  pointer-events: none;
  z-index: 0;
  animation: introMistL 14s ease-in-out infinite alternate;
}
/* Neblina derecha — vapor leve desde el flanco este */
.intro-mist-r {
  position: absolute;
  top: -10%;
  right: -8%;
  width: 50%;
  height: 120%;
  background:
    radial-gradient(ellipse 75% 55% at 85% 42%,
      rgba(4, 10, 18, 0.60) 0%,
      rgba(6, 12, 20, 0.28) 48%,
      transparent 70%);
  filter: blur(32px);
  pointer-events: none;
  z-index: 0;
  animation: introMistR 18s ease-in-out infinite alternate;
}
@keyframes introMistL {
  0%   { transform: translateX(0) scaleX(1);    opacity: 0.85; }
  100% { transform: translateX(10px) scaleX(1.04); opacity: 1; }
}
@keyframes introMistR {
  0%   { transform: translateX(0) scaleX(1);    opacity: 0.75; }
  100% { transform: translateX(-8px) scaleX(1.03); opacity: 0.92; }
}

/* Luciérnagas ambientales — 3 puntos, discreción máxima */
.intro-ff {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: introFfPulse 5s ease-in-out infinite alternate;
}
.intro-ff-1 {
  left: 18%;
  top: 22%;
  background: var(--gold-bright);
  box-shadow: 0 0 5px 2px rgba(236, 208, 142, .3);
  animation-duration: 6.2s;
  animation-delay: 0s;
  opacity: 0.55;
}
.intro-ff-2 {
  right: 22%;
  top: 60%;
  background: rgba(111, 227, 217, .9);
  box-shadow: 0 0 5px 2px rgba(111, 227, 217, .22);
  animation-duration: 8.4s;
  animation-delay: 1.8s;
  opacity: 0.42;
}
.intro-ff-3 {
  left: 68%;
  top: 18%;
  background: var(--gold-bright);
  box-shadow: 0 0 4px 1.5px rgba(236, 208, 142, .25);
  animation-duration: 7.1s;
  animation-delay: 0.9s;
  opacity: 0.38;
}
@keyframes introFfPulse {
  0%   { transform: translate(0, 0) scale(1);    opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 0.7; }
  100% { transform: translate(5px, -8px) scale(1.1); opacity: 0; }
}

/* Contenedor del texto — se centra, tamaño ajustado al contenido */
.intro-float {
  position: relative;
  z-index: 2;
  display: inline-block;
  max-width: min(82vw, 320px);
  text-align: center;
}

/* Título — Alice.ttf, tamaño moderado, deja respirar el bosque */
.intro-title {
  font-family: 'KC Alice', var(--f-display), serif;
  font-weight: normal;
  font-size: clamp(1.55rem, 6.5vw, 2rem);
  line-height: 1.25;
  color: var(--ivory);
  letter-spacing: 0.04em;
  text-shadow:
    0 2px 20px rgba(2, 1, 6, .82),
    0 1px 6px  rgba(2, 1, 6, .95);
  margin-bottom: 14px;
}

/* Cuerpo — breve, en serif, luminoso y legible sobre el bosque */
.intro-body {
  font-family: var(--f-display);
  font-size: clamp(0.92rem, 3.7vw, 1.06rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.70;
  /* XV_AWR_TEXT-R: ivory cálido más vivo — era rgba(201,192,174,0.78) apagado */
  color: rgba(239, 228, 208, 0.96);
  text-shadow:
    0 1px 14px rgba(2, 1, 6, .98),
    0 0  22px rgba(2, 1, 6, .90),
    0 2px  6px rgba(0, 0, 0, .95);
  margin-bottom: 18px;
}

/* Firma — dorada real, presencia visible */
.intro-sig {
  font-family: var(--f-eyebrow);
  font-size: 0.62rem;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  /* XV_AWR_TEXT-R: era rgba(201,161,90,0.55) — dorada viva */
  color: rgba(220, 180, 100, 0.92);
  text-shadow:
    0 0 16px rgba(201, 161, 90, .55),
    0 0  8px rgba(2, 1, 6, .95),
    0 1px  4px rgba(0, 0, 0, .90);
}

/* XV_AWR_13D-R2: Familia signature — adopts .intro-sig visual language */
.intro-signature {
  font-family: var(--f-eyebrow);
  font-size: clamp(0.68rem, 2.8vw, 0.82rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(220, 180, 100, 0.88);
  text-shadow:
    0 0 16px rgba(201, 161, 90, .50),
    0 0  8px rgba(2, 1, 6, .95),
    0 1px  4px rgba(0, 0, 0, .90);
  margin-top: 1.4em;
  text-align: center;
}

/* Stagger reveal — título primero, body después, firma al final */
.intro-dedication .intro-title,
.intro-dedication .intro-body,
.intro-dedication .intro-sig,
.intro-dedication .intro-signature {
  opacity: 0;
  transform: translateY(10px);
}
.intro-dedication.in .intro-title {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s var(--ease-silk) 0.2s, transform 1.2s var(--ease-silk) 0.2s;
}
.intro-dedication.in .intro-body {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.1s var(--ease-silk) 0.7s, transform 1.1s var(--ease-silk) 0.7s;
}
.intro-dedication.in .intro-sig {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s var(--ease-silk) 1.2s, transform 0.9s var(--ease-silk) 1.2s;
}
.intro-dedication.in .intro-signature {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.9s var(--ease-silk) 1.4s, transform 0.9s var(--ease-silk) 1.4s;
}

/* ── XV_AWR_13D-R2b: Intro mushroom grove — misma familia visual que KC-RSVP ── */
.intro-shroom-grove {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0; /* detrás del texto (intro-float tiene z-index implícito vía stacking) */
}

.intro-shroom {
  position: absolute;
  display: block;
  color: rgba(189, 174, 131, .58);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .32));
  transform-origin: 50% 100%;
  animation: introShroomSway var(--shroom-speed, 7s) ease-in-out infinite;
}
.intro-shroom svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Paleta idéntica al KC-RSVP grove */
.intro-shroom-stem   { fill: rgba(204, 195, 166, .68); }
.intro-shroom-cap    { fill: #6c4a43; stroke: rgba(228, 208, 165, .42); stroke-width: 1.15; }
.intro-shroom-spot   { fill: rgba(238, 226, 188, .72); }
.intro-shroom-ground { fill: none; stroke: rgba(128, 147, 93, .55); stroke-width: 1.1; stroke-linecap: round; }

/* Posiciones — izquierda y derecha, pegados al suelo de la sección */
.intro-shroom-l {
  --shroom-speed: 7.8s;
  width: 42px;
  left: 6%;
  bottom: 6%;
  opacity: .82;
}
.intro-shroom-r {
  --shroom-speed: 6.2s;
  width: 30px;
  right: 7%;
  bottom: 10%;
  animation-delay: -3.1s;
  opacity: .70;
}

/* Neblina de suelo — radial suave que da sensación de tierra húmeda de bosque */
.intro-shroom-mist {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 64px;
  background: radial-gradient(
    ellipse 80% 100% at 50% 100%,
    rgba(12, 8, 4, .48) 0%,
    rgba(24, 16, 8, .18) 55%,
    transparent 100%
  );
  pointer-events: none;
}

@keyframes introShroomSway {
  0%, 100% { transform: rotate(-1.3deg) translateY(0); }
  50%       { transform: rotate(2.2deg) translateY(-2px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .intro-mist-l, .intro-mist-r { animation: none; }
  .intro-ff { animation: none; }
  .intro-shroom { animation: none; }
}

/* ============================================================
   COUNTDOWN — Cheshire Apparition — XV_AWR_03B-R (Rescue)
   Concept: Cat materialises from the forest. Unified SVG face.
   IDs preserved: cd-days, cd-hours, cd-min, cd-sec.
   ============================================================ */

/* ── Cheshire tokens ── */
:root {
  --cheshire-eye:      #6fe3d9;
  --cheshire-eye-deep: #1a8f8b;
  --cheshire-pupil:    rgba(2, 4, 8, .97);
  --cheshire-glow:     rgba(111, 227, 217, .28);
  --cheshire-teeth:    #cfc8b8;
  --cheshire-grin-str: rgba(210, 175, 95, .60);
}

/* ── Section root — zero padding, everything inside is absolute ── */
#countdown.countdown-cheshire {
  position: relative;
  /* min-height is the only height control — no dead-zone padding */
  min-height: clamp(460px, 96vw, 580px);
  padding: 0;
  overflow: hidden;
  background: transparent;
  max-width: none;
}

/* ── Layer 0: Forest atmosphere — dark continuation from Hero ── */
.countdown-forest-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(3, 2, 8, .97)  0%,
      rgba(6, 5, 12, .85) 8%,
      rgba(8, 7, 16, .65) 18%,
      transparent         36%
    ),
    linear-gradient(to top,
      rgba(3, 2, 8, .94)  0%,
      rgba(5, 4, 10, .65) 14%,
      transparent         38%
    ),
    radial-gradient(ellipse 110% 80% at 50% 35%,
      rgba(4, 18, 14, .68) 0%,
      rgba(6, 8, 20, .55)  42%,
      rgba(3, 2, 8, .86)   100%
    ),
    var(--obsidian);
}

/* ── Layer 1: Mist drift ── */
.countdown-mist-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 140% 50% at 28% 65%, rgba(10, 24, 18, .35) 0%, transparent 58%),
    radial-gradient(ellipse 110% 38% at 72% 52%, rgba(8, 20, 15, .25) 0%, transparent 52%);
  animation: mistDrift 20s ease-in-out infinite alternate;
}
@keyframes mistDrift {
  0%   { transform: translateX(0) scaleX(1);    opacity: .60; }
  50%  { transform: translateX(12px) scaleX(1.03); opacity: .78; }
  100% { transform: translateX(-8px) scaleX(.98); opacity: .60; }
}

/* ── Section fireflies — 14 tiny particles ── */
.cd-fireflies {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.cd-ff {
  position: absolute;
  width: 2.5px;
  height: 2.5px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 4px 1.5px rgba(236, 208, 142, .40);
  opacity: 0;
  animation: cdFfDrift 0s ease-in-out infinite alternate;
}

/* Scatter 14 fireflies — staggered positions, timings, some turquoise */
.cd-ff:nth-child(1)  { left:  6%; top: 22%; animation: cdFfDrift  6.4s ease-in-out infinite alternate; animation-delay:  0.0s; opacity: .65; }
.cd-ff:nth-child(2)  { left: 14%; top: 68%; animation: cdFfDrift  8.2s ease-in-out infinite alternate; animation-delay:  1.2s; opacity: .50; background: rgba(111,227,217,.9); box-shadow: 0 0 5px 2px rgba(111,227,217,.22); }
.cd-ff:nth-child(3)  { left: 22%; top: 38%; animation: cdFfDrift  7.1s ease-in-out infinite alternate; animation-delay:  0.5s; opacity: .55; }
.cd-ff:nth-child(4)  { left: 32%; top: 80%; animation: cdFfDrift  9.0s ease-in-out infinite alternate; animation-delay:  2.4s; opacity: .40; }
.cd-ff:nth-child(5)  { left: 42%; top: 15%; animation: cdFfDrift  5.8s ease-in-out infinite alternate; animation-delay:  0.9s; opacity: .58; background: rgba(111,227,217,.9); box-shadow: 0 0 5px 2px rgba(111,227,217,.20); }
.cd-ff:nth-child(6)  { left: 52%; top: 75%; animation: cdFfDrift 10.2s ease-in-out infinite alternate; animation-delay:  1.8s; opacity: .45; }
.cd-ff:nth-child(7)  { left: 62%; top: 28%; animation: cdFfDrift  7.6s ease-in-out infinite alternate; animation-delay:  0.3s; opacity: .55; }
.cd-ff:nth-child(8)  { left: 70%; top: 58%; animation: cdFfDrift  8.8s ease-in-out infinite alternate; animation-delay:  3.1s; opacity: .42; }
.cd-ff:nth-child(9)  { left: 80%; top: 18%; animation: cdFfDrift  6.9s ease-in-out infinite alternate; animation-delay:  1.5s; opacity: .52; background: rgba(111,227,217,.9); box-shadow: 0 0 5px 2px rgba(111,227,217,.18); }
.cd-ff:nth-child(10) { left: 88%; top: 72%; animation: cdFfDrift 11.0s ease-in-out infinite alternate; animation-delay:  0.7s; opacity: .38; }
.cd-ff:nth-child(11) { left: 10%; top: 88%; animation: cdFfDrift  7.4s ease-in-out infinite alternate; animation-delay:  2.0s; opacity: .48; }
.cd-ff:nth-child(12) { left: 48%; top: 88%; animation: cdFfDrift  9.6s ease-in-out infinite alternate; animation-delay:  0.4s; opacity: .40; }
.cd-ff:nth-child(13) { left: 76%; top: 88%; animation: cdFfDrift  8.0s ease-in-out infinite alternate; animation-delay:  2.8s; opacity: .44; }
.cd-ff:nth-child(14) { left: 36%; top: 10%; animation: cdFfDrift  6.6s ease-in-out infinite alternate; animation-delay:  1.1s; opacity: .50; }

@keyframes cdFfDrift {
  0%   { transform: translate(0, 0) scale(1);       opacity: 0;   }
  15%  { opacity: 1; }
  50%  { transform: translate(7px, -10px) scale(1.12); }
  85%  { opacity: .7; }
  100% { transform: translate(-5px, 8px) scale(.88); opacity: 0;  }
}

/* ── UI Cluster — kicker + grid grouped at vertical center of section ── */
.cd-ui-cluster {
  position: absolute;
  left: 50%;
  /* Optical center: slightly below geometric center so cat territory above */
  top: 58%;
  transform: translate(-50%, -50%);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(8px, 1.8vw, 14px);
  pointer-events: none;
}

/* ── Kicker — now in-flow inside the cluster ── */
.countdown-kicker {
  /* Inherits cluster position — no independent absolute needed */
  position: relative;
  z-index: auto;
  top: auto; left: auto;
  transform: none;
  white-space: nowrap;
  font-family: var(--f-eyebrow);
  font-size: .60rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  /* XV_AWR_TEXT-R: dorado vivo, era .72 de opacidad — ahora pleno */
  color: var(--gold-bright);
  opacity: 1;
  margin: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 161, 90, .22);
  text-shadow:
    0 0 18px rgba(201, 161, 90, .55),
    0 0  8px rgba(2, 1, 6, .90),
    0 1px  3px rgba(0, 0, 0, .88);
}

/* ── Cheshire Presence — absolute, roams the FULL section box ── */
.cheshire-presence {
  position: absolute;
  /* Anchor at center; all waypoints offset from here via translate */
  left: 50%;
  top: 50%;
  z-index: 3;  /* below kicker(8) and grid(8) — cat passes behind UI */
  width: max-content;
  pointer-events: none;
  will-change: transform, opacity, filter;
  animation: cheshireRoam 26s ease-in-out infinite;
}

/*
  cheshireRoam 3-PASS FULL TERRITORY (26s cycle)
  Anchor: left:50% top:50% of section (~230px from top on 460px section)
  Face height ~120px (42vw on 390px = 164px wide, ~126px tall)
  Face half-height ~63px

  Vertical zones (offset from anchor 230px):
    UPPER  calc(-50% - 110px) → cat center at ~120px  → above kicker area
    CENTER calc(-50% - 10px)  → cat center at ~220px  → middle section
    LOWER  calc(-50% + 130px) → cat center at ~360px  → behind/below grid

  Horizontal range ±75px mobile, ±140px desktop (overridden in @media)

  Pass 1 (0-30%):  UPPER-LEFT → UPPER-RIGHT  (cat above everything)
  Gap  (30-38%):  invisible, jump to LOWER-RIGHT
  Pass 2 (38-65%): LOWER-RIGHT → LOWER-LEFT  (cat behind grid)
  Gap  (65-73%):  invisible, jump to CENTER-LEFT
  Pass 3 (73-97%): CENTER-LEFT → CENTER-RIGHT (cat through mid section)
  Return (97-100%): fade back to Pass 1 start
*/
@keyframes cheshireRoam {
  /* ─ PASS 1: UPPER zone, materialise left → drift right ─ */
  0%   { opacity: 0;   transform: translate(calc(-50% - 80px), calc(-50% - 165px)) scale(.88); filter: blur(7px);  }
  6%   { opacity: .84; transform: translate(calc(-50% - 58px), calc(-50% - 158px)) scale(1);   filter: blur(0);    }
  17%  { opacity: .80; transform: translate(calc(-50% + 10px), calc(-50% - 148px)) scale(1);   filter: blur(0);    }
  27%  { opacity: .32; transform: translate(calc(-50% + 70px), calc(-50% - 132px)) scale(.92); filter: blur(5px);  }
  31%  { opacity: 0;   transform: translate(calc(-50% + 85px), calc(-50% - 118px)) scale(.88); filter: blur(7px);  }
  /* ─ jump invisible to LOWER-RIGHT ─ */
  37%  { opacity: 0;   transform: translate(calc(-50% + 78px), calc(-50% + 148px)) scale(.88); filter: blur(7px);  }
  /* ─ PASS 2: LOWER zone (behind grid), materialise right → drift left ─ */
  43%  { opacity: .80; transform: translate(calc(-50% + 55px), calc(-50% + 140px)) scale(1);   filter: blur(0);    }
  55%  { opacity: .78; transform: translate(calc(-50% - 10px), calc(-50% + 145px)) scale(1);   filter: blur(0);    }
  63%  { opacity: .30; transform: translate(calc(-50% - 68px), calc(-50% + 138px)) scale(.92); filter: blur(5px);  }
  67%  { opacity: 0;   transform: translate(calc(-50% - 82px), calc(-50% + 125px)) scale(.88); filter: blur(7px);  }
  /* ─ jump invisible to CENTER-LEFT ─ */
  72%  { opacity: 0;   transform: translate(calc(-50% - 78px), calc(-50% - 5px))   scale(.88); filter: blur(7px);  }
  /* ─ PASS 3: CENTER zone, materialise left → drift right ─ */
  78%  { opacity: .82; transform: translate(calc(-50% - 52px), calc(-50% + 8px))   scale(1);   filter: blur(0);    }
  89%  { opacity: .78; transform: translate(calc(-50% + 40px), calc(-50% - 5px))   scale(1);   filter: blur(0);    }
  96%  { opacity: .22; transform: translate(calc(-50% + 72px), calc(-50% - 15px))  scale(.92); filter: blur(5px);  }
  /* ─ return to UPPER-LEFT start, cycle restarts ─ */
  100% { opacity: 0;   transform: translate(calc(-50% - 80px), calc(-50% - 165px)) scale(.88); filter: blur(7px);  }
}

/* ── Unified SVG face — compact, roaming ── */
.cheshire-face-svg {
  display: block;
  width: clamp(130px, 42vw, 210px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(2, 8, 6, .72));
}

/* Face volume — smoky dark ellipse suggesting head form */
.cheshire-face-volume {
  fill: rgba(4, 14, 10, .55);
}

/* Ears — barely visible shadow triangles */
.cheshire-ear {
  fill: rgba(6, 18, 12, .50);
}

/* Eyes — turquoise radial gradient */
.cheshire-iris {
  fill: url(#cheshireEyeGrad);  /* fallback: solid color below */
  fill: var(--cheshire-eye);
}

/* Richer eye: gradient via SVG filter simulation using two nested ellipses */
.cheshire-iris-l,
.cheshire-iris-r {
  fill: var(--cheshire-eye);
  /* Glow via filter shadow — contained */
  filter: drop-shadow(0 0 6px rgba(111, 227, 217, .55));
}

/* Pupil — dark vertical slit */
.cheshire-pupil {
  fill: var(--cheshire-pupil);
}

/* Glint — tiny white highlight */
.cheshire-glint {
  fill: rgba(255, 255, 255, .72);
}

/* Blink — both eyes simultaneously, .02s stagger max */
.cheshire-eye-l .cheshire-iris-l,
.cheshire-eye-l .cheshire-pupil,
.cheshire-eye-l .cheshire-glint {
  animation: cheshireBlinkSVG 10s ease-in-out infinite;
}
.cheshire-eye-r .cheshire-iris-r,
.cheshire-eye-r .cheshire-pupil,
.cheshire-eye-r .cheshire-glint {
  animation: cheshireBlinkSVG 10s ease-in-out infinite;
  animation-delay: .02s;  /* imperceptible offset — organic only */
}

@keyframes cheshireBlinkSVG {
  0%,  34%,  38%, 86%, 90%, 100% { transform: scaleY(1);    transform-origin: center 95px; }
  36%, 88%                       { transform: scaleY(0.05); transform-origin: center 95px; }
}

/* Nose — barely-there dark shadow */
.cheshire-nose {
  fill: rgba(2, 8, 6, .65);
}

/* Grin curve — drawn via dashoffset */
.cheshire-grin-curve {
  fill: none;
  stroke: var(--cheshire-grin-str);
  stroke-width: 1.6;
  stroke-linecap: round;
  /* Path length ~175 for the new symmetric arc */
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

/* Draw grin after face appears (section gets .in) */
.countdown-cheshire.in .cheshire-grin-curve {
  animation: cheshireGrinDraw .8s var(--ease-silk) forwards;
  animation-delay: .5s;
}
@keyframes cheshireGrinDraw { to { stroke-dashoffset: 0; } }

/* Teeth — tighter triangles, smaller */
.cheshire-teeth polygon {
  fill: var(--cheshire-teeth);
  opacity: 0;
}
.countdown-cheshire.in .cheshire-teeth polygon {
  animation: cheshireTeethFade .5s ease forwards;
}
.countdown-cheshire.in .cheshire-teeth polygon:nth-child(1) { animation-delay: .80s; }
.countdown-cheshire.in .cheshire-teeth polygon:nth-child(2) { animation-delay: .86s; }
.countdown-cheshire.in .cheshire-teeth polygon:nth-child(3) { animation-delay: .92s; }
.countdown-cheshire.in .cheshire-teeth polygon:nth-child(4) { animation-delay: .98s; }
.countdown-cheshire.in .cheshire-teeth polygon:nth-child(5) { animation-delay:1.04s; }
.countdown-cheshire.in .cheshire-teeth polygon:nth-child(6) { animation-delay:1.10s; }
.countdown-cheshire.in .cheshire-teeth polygon:nth-child(7) { animation-delay:1.16s; }
@keyframes cheshireTeethFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: .80; transform: translateY(0); }
}

/* Whiskers — very subtle SVG lines */
.cheshire-whisker-line {
  stroke: rgba(160, 185, 170, .16);
  stroke-width: .8;
  stroke-linecap: round;
}

/* ── Countdown grid — in-flow within .cd-ui-cluster ── */
.countdown-grid {
  position: relative;
  left: auto; bottom: auto;
  transform: none;
  z-index: auto;
  display: flex;
  justify-content: center;
  gap: clamp(6px, 2vw, 12px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .8s var(--ease-silk) .4s;
}
.countdown-cheshire.in .countdown-grid {
  opacity: 1;
}

/* ============================================================
   COUNTDOWN UNIT — Pocket Watch / Wonderland Clock-Face Redesign
   Concept: Each digit is a pocket-watch face from the White Rabbit.
   Design: octagonal clip, radial dark-green depth, gold hairlines,
           turquoise ambient glow, display numeral + ◆ gemmed label.
   ============================================================ */
.countdown-unit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: clamp(12px, 3vw, 18px) clamp(12px, 3.2vw, 18px) clamp(8px, 2vw, 12px);
  min-width: clamp(64px, 17vw, 86px);

  /* Clock-face radial background: dark forest-green center depth */
  background:
    radial-gradient(ellipse 80% 65% at 50% 35%,
      rgba(10, 32, 22, .94) 0%,
      rgba(5, 14, 10, .97)  52%,
      rgba(2, 6, 4,   .99)  100%
    );

  /* Octagonal clip = clock bezel / playing card feel */
  clip-path: polygon(
    0 7px, 7px 0,
    calc(100% - 7px) 0, 100% 7px,
    100% calc(100% - 7px), calc(100% - 7px) 100%,
    7px 100%, 0 calc(100% - 7px)
  );

  /* Depth + ambient: gold inner frame + turquoise luminosity */
  box-shadow:
    inset 0 0 0 1px rgba(201, 161, 90, .20),
    inset 0 0 18px rgba(111, 227, 217, .05),
    inset 0  1px 0  rgba(201, 161, 90, .28),
    inset 0 -1px 0  rgba(111, 227, 217, .08),
    0 8px 32px rgba(2, 4, 8, .70),
    0 0 0 1px rgba(201, 161, 90, .08);
}

/* Top hairline rule — gold, tapers to edges (clock bezel top) */
.countdown-unit::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201, 161, 90, .20) 15%,
    rgba(201, 161, 90, .55) 50%,
    rgba(201, 161, 90, .20) 85%,
    transparent 100%
  );
}

/* Bottom hairline rule — turquoise, subtler */
.countdown-unit::after {
  content: '';
  position: absolute;
  bottom: 10px;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(111, 227, 217, .22) 30%,
    rgba(111, 227, 217, .38) 50%,
    rgba(111, 227, 217, .22) 70%,
    transparent 100%
  );
}

/* ── Numeral — large, luminous, italic display ── */
.countdown-value {
  font-family: var(--f-display);
  font-size: clamp(2.0rem, 8.5vw, 2.8rem);
  font-weight: 400;
  font-style: italic;  /* Alice-in-Wonderland elegant tilt */
  color: var(--ivory);
  line-height: 1;
  letter-spacing: .01em;
  min-width: 2ch;
  display: block;
  text-align: center;
  padding: clamp(10px, 2.5vw, 14px) 0 clamp(5px, 1.2vw, 8px);
  text-shadow:
    0 0 30px rgba(111, 227, 217, .32),
    0 0  8px rgba(111, 227, 217, .16),
    0 2px 12px rgba(2, 4, 8, .92);
}

/* ── Label — gold with flanking gem diamonds ── */
.countdown-label {
  font-family: var(--f-eyebrow);
  font-size: .44rem;
  letter-spacing: .26em;
  color: var(--gold);
  text-transform: uppercase;
  opacity: .82;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

/* Ornamental gem diamonds flanking the label text */
.cd-lbl-gem {
  font-size: .30rem;
  color: rgba(201, 161, 90, .45);
  line-height: 1;
  letter-spacing: 0;
}

/* ── Desktop ── */
@media (min-width: 768px) {
  #countdown.countdown-cheshire {
    min-height: clamp(500px, 66vw, 640px);
    padding: 0;  /* all positioned absolutely — no dead-zone padding */
  }
  .cheshire-face-svg {
    width: clamp(160px, 22vw, 240px);
  }
  .countdown-unit {
    min-width: clamp(78px, 9vw, 100px);
  }
  /* Desktop: wider horizontal range, same 3-pass vertical structure */
  @keyframes cheshireRoam {
    /* ─ PASS 1: UPPER zone ─ */
    0%   { opacity: 0;   transform: translate(calc(-50% - 160px), calc(-50% - 195px)) scale(.88); filter: blur(7px);  }
    6%   { opacity: .84; transform: translate(calc(-50% - 130px), calc(-50% - 185px)) scale(1);   filter: blur(0);    }
    17%  { opacity: .80; transform: translate(calc(-50% +  20px), calc(-50% - 170px)) scale(1);   filter: blur(0);    }
    27%  { opacity: .32; transform: translate(calc(-50% + 140px), calc(-50% - 150px)) scale(.92); filter: blur(5px);  }
    31%  { opacity: 0;   transform: translate(calc(-50% + 175px), calc(-50% - 132px)) scale(.88); filter: blur(7px);  }
    /* ─ jump invisible to LOWER-RIGHT ─ */
    37%  { opacity: 0;   transform: translate(calc(-50% + 160px), calc(-50% + 170px)) scale(.88); filter: blur(7px);  }
    /* ─ PASS 2: LOWER zone (behind grid) ─ */
    43%  { opacity: .80; transform: translate(calc(-50% + 120px), calc(-50% + 158px)) scale(1);   filter: blur(0);    }
    55%  { opacity: .78; transform: translate(calc(-50% -  20px), calc(-50% + 164px)) scale(1);   filter: blur(0);    }
    63%  { opacity: .30; transform: translate(calc(-50% - 140px), calc(-50% + 155px)) scale(.92); filter: blur(5px);  }
    67%  { opacity: 0;   transform: translate(calc(-50% - 175px), calc(-50% + 140px)) scale(.88); filter: blur(7px);  }
    /* ─ jump invisible to CENTER-LEFT ─ */
    72%  { opacity: 0;   transform: translate(calc(-50% - 160px), calc(-50% -  8px))  scale(.88); filter: blur(7px);  }
    /* ─ PASS 3: CENTER zone ─ */
    78%  { opacity: .82; transform: translate(calc(-50% - 120px), calc(-50% + 10px))  scale(1);   filter: blur(0);    }
    89%  { opacity: .78; transform: translate(calc(-50% +  80px), calc(-50% -  5px))  scale(1);   filter: blur(0);    }
    96%  { opacity: .22; transform: translate(calc(-50% + 150px), calc(-50% - 18px))  scale(.92); filter: blur(5px);  }
    100% { opacity: 0;   transform: translate(calc(-50% - 160px), calc(-50% - 195px)) scale(.88); filter: blur(7px);  }
  }
}

/* ── Narrow: 2×2 on ≤360px ── */
@media (max-width: 360px) {
  .countdown-grid {
    flex-wrap: wrap;
    max-width: 268px;
  }
  .countdown-unit {
    flex: 0 0 calc(50% - 5px);
    min-width: auto;
  }
}

/* ── Reduced motion — cat centered, static, fully visible ── */
@media (prefers-reduced-motion: reduce) {
  .countdown-mist-layer        { animation: none !important; }
  .cheshire-presence {
    animation: none !important;
    opacity: .88;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) !important;
    filter: none;
  }
  .cheshire-eye-l .cheshire-iris-l,
  .cheshire-eye-l .cheshire-pupil,
  .cheshire-eye-l .cheshire-glint,
  .cheshire-eye-r .cheshire-iris-r,
  .cheshire-eye-r .cheshire-pupil,
  .cheshire-eye-r .cheshire-glint { animation: none !important; }
  .cheshire-grin-curve         { animation: none !important; stroke-dashoffset: 0; }
  .cheshire-teeth polygon      { animation: none !important; opacity: .80; }
  .countdown-grid              { transition: none !important; opacity: 1 !important; }
  .cd-ff                       { animation: none !important; opacity: 0; }
}


/* ================================================================
   PADRES PARCHMENT OVERLAY — XV_AWR_04C-B2R-R
   Asset: fotos/pergahong.jpg  1448x1086  ~4:3 horizontal
   Improvements: fog edges, fireflies, Pinyon Script title,
   dark ink colometry, 2-col parent grid, larger names.
   ================================================================ */

.padres-parchment-section {
  /* Safe area variables — horizontal format */
  --padres-text-left:   18%;
  --padres-text-top:    20%;
  --padres-text-width:  64%;
  --padres-text-height: 58%;

  position: relative;
  padding-block: 24px 20px;
  background: radial-gradient(
    ellipse 90% 70% at 50% 50%,
    rgba(6, 12, 9, 0.55),
    rgba(4, 8, 6, 0.90) 75%
  );
}

.padres-parchment-stage {
  position: relative;
  z-index: 1;
  width: min(94vw, 680px);
  margin-inline: auto;
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.65))
          drop-shadow(0  4px 10px rgba(0, 0, 0, 0.40));
}

.padres-parchment-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── NIEBLA: diluye los bordes del pergamino en el bosque ── */
.padres-parchment-fog {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    /* Capa 1: oscurece tantito el centro brillante — muy sutil */
    radial-gradient(
      ellipse 55% 50% at 50% 46%,
      rgba(2, 5, 3, 0.14) 0%,
      transparent 62%
    ),
    /* Capa 2: niebla suave en los bordes — NO negro total */
    radial-gradient(
      ellipse 66% 62% at 50% 50%,
      transparent 0%,
      transparent 52%,
      rgba(3, 7, 5, 0.08) 65%,
      rgba(3, 7, 5, 0.28) 78%,
      rgba(3, 7, 5, 0.50) 90%,
      rgba(3, 7, 5, 0.62) 100%
    );
}

/* ── Overlay text — z-index 3, above the fog ── */
.padres-parchment-text {
  position: absolute;
  left:   var(--padres-text-left);
  top:    var(--padres-text-top);
  width:  var(--padres-text-width);
  height: var(--padres-text-height);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(5px, 1.4vw, 10px);
  z-index: 3;
  overflow: hidden;
}

/* ── Eyebrow "Con la bendición de" — XV_AWR_TEXT-R3: ivory cálido tenue con sombra oscura ── */
.padres-eyebrow {
  font-family: var(--f-eyebrow);
  font-size: clamp(0.62rem, 2.1vw, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  margin: 0;
  /* Dorado suave — visible pero no agresivo */
  color: #F0DCA7;
  text-shadow:
    0 1px 3px  rgba(0, 0, 0, 0.98),
    0 2px 10px rgba(0, 0, 0, 0.88);
}

/* ── Título "Mis padres" — Pinyon Script, dorado ── */
.padres-title {
  font-family: 'Pinyon Script', 'Cormorant Garamond', cursive;
  font-size: clamp(2.0rem, 7.0vw, 2.8rem);
  font-weight: 400;
  margin: 0 0 clamp(4px, 1vw, 8px);
  line-height: 1.1;
  color: #ECD08E;
  text-shadow:
    0 1px 8px  rgba(0, 0, 0, 0.95),
    0 3px 18px rgba(0, 0, 0, 0.85),
    0 0  12px  rgba(201, 161, 90, 0.28);
}

/* ── Parent list: 2-column grid ── */
.parent-blessing-list {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0 clamp(6px, 2vw, 16px);
  width: 100%;
}

.parent-entry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

/* ── Roles "Mamá" / "Papá" — XV_AWR_TEXT-R3: dorado oscuro legible ── */
.parent-role {
  font-family: var(--f-eyebrow);
  font-size: clamp(0.62rem, 2.1vw, 0.76rem);
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  /* Dorado medio-oscuro: presencia sin competir con los nombres */
  color: #E8CE8A;
  text-shadow:
    0 1px 3px  rgba(0, 0, 0, 0.98),
    0 2px 9px  rgba(0, 0, 0, 0.88);
}

/* ── Nombres — KC Alice, XV_AWR_TEXT-R3: ivory cálido con trazo negro sutil ── */
.parent-name {
  font-family: 'KC Alice', serif;
  font-size: clamp(1.15rem, 4.5vw, 1.52rem);
  font-weight: 500;
  line-height: 1.25;
  margin: 0;
  /* Ivory cálido tenue — no tan blanco, más armónico con el pergamino */
  color: #E8D9B0;
  /* Trazo oscuro sutil + sombra profunda: legibles sin brillar demasiado */
  text-shadow:
    0 0  1px   rgba(0, 0, 0, 0.70),    /* trazo oscuro sutil */
    0 1px 4px  rgba(0, 0, 0, 0.92),
    0 2px 10px rgba(0, 0, 0, 0.85),
    0 4px 18px rgba(0, 0, 0, 0.65),
    0 0  8px   rgba(160, 130, 60, 0.18);
  max-width: 100%;
}

/* ── Vertical divider between the two parent entries ── */
.parent-divider.ornament {
  width: 1px;
  height: clamp(40px, 11vw, 60px);
  background: linear-gradient(
    180deg,
    transparent,
    rgba(55, 32, 10, 0.45) 20%,
    rgba(55, 32, 10, 0.58) 50%,
    rgba(55, 32, 10, 0.45) 80%,
    transparent
  );
  align-self: center;
  margin: 0;
}

/* ── Luciérnagas: 6 partículas ambientales ── */
.padres-ff-layer {
  position: absolute;
  inset: 0;
  z-index: 0;  /* behind parchment stage, in front of section bg */
  pointer-events: none;
  overflow: hidden;
}

.padres-ff {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(111, 227, 217, 0.88);
  box-shadow:
    0 0  6px 2px rgba(111, 227, 217, 0.55),
    0 0 12px 4px rgba(111, 227, 217, 0.22);
  opacity: 0;
  animation:
    padresFlicker var(--pff-dur, 4.5s) ease-in-out infinite,
    padresDrift   var(--pff-dur, 4.5s) ease-in-out infinite;
}

.padres-ff-1 { --pff-dur: 5.2s; top: 12%; left:  7%; animation-delay: 0.0s; }
.padres-ff-2 { --pff-dur: 4.8s; top: 75%; left: 90%; animation-delay: 1.3s; }
.padres-ff-3 { --pff-dur: 6.1s; top: 85%; left: 10%; animation-delay: 2.5s; }
.padres-ff-4 { --pff-dur: 4.3s; top: 20%; left: 93%; animation-delay: 0.8s; }
.padres-ff-5 { --pff-dur: 5.9s; top: 58%; left:  4%; animation-delay: 3.2s; }
.padres-ff-6 { --pff-dur: 4.0s; top: 90%; left: 74%; animation-delay: 1.9s; }

@keyframes padresFlicker {
  0%,  100% { opacity: 0;    }
  18%        { opacity: 0.82; }
  42%        { opacity: 0.55; }
  62%        { opacity: 0.90; }
  82%        { opacity: 0.38; }
}

@keyframes padresDrift {
  0%   { transform: translate(0px,  0px);  }
  33%  { transform: translate(5px, -8px);  }
  66%  { transform: translate(-6px, 5px);  }
  100% { transform: translate(0px,  0px);  }
}

/* ── Responsive breakpoints ── */
@media (min-width: 768px) {
  .padres-parchment-section { padding-block: 36px 28px; }
  .padres-parchment-stage   { max-width: 660px; }
}
@media (min-width: 1366px) {
  .padres-parchment-stage   { max-width: 700px; }
}
/* Narrowest: loosen safe area + reduce font before line-breaking names */
@media (max-width: 360px) {
  .padres-parchment-section {
    --padres-text-left:  14%;
    --padres-text-width: 72%;
  }
  .parent-name {
    font-size: clamp(0.82rem, 4.5vw, 0.95rem);
    letter-spacing: 0;
  }
}

/* ── UBICACIONES / FOREST PORTALS — XV_AWR_06B COMPACT ── */
/* Thesis: two talisman portals held in one misted clearing, never a second hero. */
.locations-forest {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 760px;
  padding: clamp(40px, 8vw, 62px) clamp(14px, 4vw, 30px) clamp(43px, 8vw, 66px);
  background:
    radial-gradient(ellipse 66% 42% at 50% 43%, rgba(91, 104, 66, .13), transparent 70%),
    linear-gradient(180deg, rgba(8, 10, 9, 0) 0%, #0a0d0a 13%, #10150f 50%, #0a0d0a 87%, rgba(8, 10, 9, 0) 100%);
}

.locations-forest > :not(.locations-haze) { position: relative; z-index: 1; }

/* Soft only at the entry/exit edges: it dissolves section cuts, not the content. */
.locations-haze,
.locations-forest::before,
.locations-forest::after {
  position: absolute;
  inset-inline: -12%;
  pointer-events: none;
}

.locations-haze {
  z-index: 0;
  inset-block: 0;
  background: radial-gradient(ellipse 44% 38% at 50% 50%, rgba(188, 150, 79, .055), transparent 72%);
}

.locations-forest::before,
.locations-forest::after {
  z-index: 0;
  height: 74px;
  content: '';
  filter: blur(12px);
}

.locations-forest::before {
  top: -31px;
  background: radial-gradient(ellipse 65% 100% at 50% 100%, rgba(160, 166, 121, .25), rgba(11, 15, 11, .08) 52%, transparent 78%);
}

.locations-forest::after {
  bottom: -33px;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(175, 142, 77, .19), rgba(10, 13, 10, .08) 50%, transparent 80%);
}

.locations-header {
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
}

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

.locations-title {
  margin-top: 6px;
  color: #f4ead7;
  font-family: 'KC Alice', var(--f-display);
  font-size: clamp(1.95rem, 8.5vw, 2.85rem);
  font-weight: 400;
  line-height: .96;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .74);
}

.locations-subtitle {
  margin: 8px auto 0;
  color: rgba(239, 230, 214, .80);
  font-family: var(--f-display);
  font-size: .9rem;
  font-style: italic;
  line-height: 1.22;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .88);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(9px, 2.8vw, 16px);
  max-width: 610px;
  margin: 19px auto 0;
}

.location-card {
  position: relative;
  display: flex;
  min-height: 212px;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  padding: 13px 9px 11px;
  color: var(--ivory);
  text-align: center;
  isolation: isolate;
  border: 1px solid rgba(209, 172, 100, .31);
  border-radius: 35px 35px 16px 16px / 20px 20px 12px 12px;
  background:
    radial-gradient(ellipse 68% 43% at 50% 0%, rgba(178, 143, 72, .14), transparent 76%),
    linear-gradient(150deg, rgba(31, 42, 29, .92), rgba(9, 12, 10, .97));
  box-shadow: inset 0 1px 0 rgba(246, 221, 156, .10), 0 10px 20px rgba(0, 0, 0, .21);
  transition: transform .28s var(--ease-silk), border-color .28s ease, box-shadow .28s ease;
}

.location-card::before,
.location-card::after {
  position: absolute;
  z-index: -1;
  content: '';
  pointer-events: none;
}

.location-card::before {
  inset: 5px;
  border: 1px solid rgba(221, 187, 114, .11);
  border-radius: inherit;
}

.location-card::after {
  top: -30px;
  width: 96px;
  height: 60px;
  border-radius: 50%;
  background: rgba(233, 190, 102, .10);
  filter: blur(12px);
}

.location-card-ceremony::after { left: -23px; }
.location-card-reception::after { right: -23px; }

.location-symbol {
  display: grid;
  width: 45px;
  height: 45px;
  flex: 0 0 auto;
  place-items: center;
  margin-bottom: 6px;
  border: 1px solid rgba(219, 183, 104, .36);
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(circle at 50% 28%, rgba(225, 181, 92, .16), rgba(22, 30, 23, .20) 67%);
  box-shadow: inset 0 0 15px rgba(211, 169, 83, .08), 0 0 14px rgba(193, 153, 71, .07);
}

.location-symbol svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: #d1ac64;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.25;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .8));
}

.location-type {
  color: #e1bd78;
  font-family: var(--f-eyebrow);
  font-size: .52rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.location-name {
  display: grid;
  min-height: 4.02em;
  align-items: center;
  margin: 5px auto 0;
  color: #f3ebdf;
  font-family: var(--f-display);
  font-size: clamp(.91rem, 4.1vw, 1.08rem);
  font-weight: 500;
  line-height: 1.005;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .88);
}

.location-time {
  margin-top: 5px;
  color: rgba(243, 224, 180, .90);
  font-family: var(--f-eyebrow);
  font-size: .61rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-shadow: 0 1px 9px #000;
}

.location-map-btn {
  display: inline-flex;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding: 8px 7px;
  color: #f3dfb1;
  font-family: var(--f-eyebrow);
  font-size: .51rem;
  font-weight: 600;
  letter-spacing: .11em;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid rgba(221, 181, 99, .61);
  border-radius: 999px;
  background: rgba(120, 93, 43, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 238, 192, .04);
  transition: color .28s ease, background .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}

.location-map-btn svg {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.location-card:hover { border-color: rgba(237, 201, 119, .6); box-shadow: inset 0 1px 0 rgba(255, 232, 173, .13), 0 13px 24px rgba(0, 0, 0, .28); transform: translateY(-2px); }
.location-map-btn:hover { color: #fff0cd; border-color: #edc977; background: rgba(183, 138, 62, .25); box-shadow: 0 0 16px rgba(208, 161, 75, .15); transform: translateY(-1px); }
.location-map-btn:focus-visible { outline: 2px solid #fff0cd; outline-offset: 3px; color: #fff0cd; border-color: #fff0cd; }

@media (min-width: 620px) {
  .locations-forest { padding-inline: clamp(24px, 5vw, 42px); }
  .locations-grid { gap: 17px; }
  .location-card { min-height: 220px; padding: 15px 14px 13px; }
  .location-symbol { width: 49px; height: 49px; }
  .location-symbol svg { width: 34px; height: 34px; }
  .location-name { font-size: 1.08rem; }
  .location-map-btn { max-width: 155px; align-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .location-card,
  .location-map-btn { 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: url('rabbithole.jpg') center 42% / cover no-repeat;
  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: 'KC Alice', var(--f-display);
  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);
}

/* ── HOSPEDAJE / ENCHANTED REFUGES — XV_AWR_06C ── */
/* Thesis: a warm traveler refuge after the Rabbit Hole, with photos as small glass talismans. */
.lodging-forest {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 820px;
  padding: clamp(46px, 9vw, 70px) clamp(16px, 5vw, 38px) clamp(50px, 9vw, 74px);
  background:
    radial-gradient(ellipse 70% 44% at 50% 48%, rgba(118, 96, 55, .11), transparent 72%),
    linear-gradient(180deg, rgba(8, 10, 9, 0) 0%, #0c100c 15%, #11160f 50%, #0a0d0a 86%, rgba(8, 10, 9, 0) 100%);
}

.lodging-forest > :not(.lodging-haze) { position: relative; z-index: 1; }

.lodging-haze,
.lodging-forest::before,
.lodging-forest::after {
  position: absolute;
  inset-inline: -12%;
  pointer-events: none;
}

.lodging-haze {
  z-index: 0;
  inset-block: 0;
  background: radial-gradient(ellipse 48% 45% at 50% 50%, rgba(205, 171, 102, .045), transparent 74%);
}

.lodging-forest::before,
.lodging-forest::after {
  z-index: 0;
  height: 78px;
  content: '';
  filter: blur(14px);
}

.lodging-forest::before {
  top: -34px;
  background: radial-gradient(ellipse 67% 100% at 50% 100%, rgba(112, 132, 91, .22), rgba(10, 13, 10, .08) 55%, transparent 79%);
}

.lodging-forest::after {
  bottom: -35px;
  background: radial-gradient(ellipse 68% 100% at 50% 0%, rgba(177, 142, 78, .16), rgba(8, 11, 9, .07) 53%, transparent 80%);
}

.lodging-header {
  max-width: 470px;
  margin: 0 auto;
  text-align: center;
}

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

.lodging-title {
  margin-top: 7px;
  color: #f4ead7;
  font-family: 'KC Alice', var(--f-display);
  font-size: clamp(2.05rem, 9vw, 3rem);
  font-weight: 400;
  line-height: .96;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .74);
}

.lodging-subtitle {
  max-width: 405px;
  margin: 9px auto 0;
  color: rgba(239, 230, 214, .82);
  font-family: var(--f-display);
  font-size: .91rem;
  font-style: italic;
  line-height: 1.28;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .88);
}

.lodging-grid {
  display: grid;
  gap: 14px;
  max-width: 680px;
  margin: 22px auto 0;
}

.lodging-card {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 13px;
  overflow: hidden;
  align-items: center;
  min-height: 179px;
  padding: 15px 14px 13px;
  isolation: isolate;
  border: 1px solid rgba(209, 172, 100, .30);
  border-radius: 28px 20px 24px 18px / 22px 24px 18px 22px;
  background:
    radial-gradient(ellipse 45% 62% at 8% 0%, rgba(194, 157, 83, .12), transparent 80%),
    linear-gradient(143deg, rgba(36, 46, 31, .92), rgba(10, 14, 11, .97));
  box-shadow: inset 0 1px 0 rgba(255, 228, 164, .09), 0 11px 24px rgba(0, 0, 0, .21);
  transition: transform .3s var(--ease-silk), border-color .3s ease, box-shadow .3s ease;
}

.lodging-card::before {
  position: absolute;
  z-index: -1;
  inset: 5px;
  content: '';
  border: 1px solid rgba(221, 187, 114, .10);
  border-radius: inherit;
  pointer-events: none;
}

.lodging-card::after {
  position: absolute;
  z-index: -1;
  top: -40px;
  width: 118px;
  height: 76px;
  content: '';
  border-radius: 50%;
  background: rgba(224, 181, 92, .09);
  filter: blur(13px);
}

.lodging-card-bedford::after { right: -34px; }
.lodging-card-ramada::after { left: -34px; }

.lodging-photo-drop {
  width: 92px;
  height: 116px;
  overflow: hidden;
  align-self: start;
  border: 1px solid rgba(224, 188, 111, .42);
  border-radius: 52% 48% 48% 52% / 42% 42% 58% 58%;
  background: rgba(17, 23, 17, .74);
  box-shadow: inset 0 0 0 4px rgba(245, 220, 162, .055), 0 0 18px rgba(194, 153, 77, .10);
  transform: rotate(-3deg);
}

.lodging-card-ramada .lodging-photo-drop { transform: rotate(3deg); }

.lodging-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.86) sepia(.08) brightness(.86);
  transform: scale(1.08);
}

.lodging-body { min-width: 0; align-self: start; padding-top: 5px; }

.lodging-name {
  color: #f3ebdf;
  font-family: var(--f-display);
  font-size: clamp(1.14rem, 5.3vw, 1.36rem);
  font-weight: 500;
  line-height: 1.02;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .88);
}

.lodging-code-label {
  margin-top: 11px;
  color: rgba(234, 213, 170, .72);
  font-family: var(--f-eyebrow);
  font-size: .53rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.lodging-code-value {
  display: inline-block;
  margin-top: 4px;
  padding: 5px 9px 4px;
  color: #f4d99b;
  font-family: var(--f-eyebrow);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .15em;
  border: 1px solid rgba(218, 179, 99, .42);
  border-radius: 5px 8px 5px 7px;
  background: rgba(137, 105, 51, .12);
}

.lodging-actions {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: 8px;
}

.lodging-map-btn,
.lodging-call-btn,
.lodging-whatsapp-btn {
  display: inline-flex;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  padding: 8px 9px;
  font-family: var(--f-eyebrow);
  font-size: .49rem;
  font-weight: 600;
  letter-spacing: .095em;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 13px 8px 13px 8px;
  transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.lodging-map-btn,
.lodging-call-btn {
  color: #ead3a0;
  border-color: rgba(218, 179, 99, .52);
  background: rgba(107, 85, 46, .12);
}

.lodging-whatsapp-btn {
  color: #e6efd8;
  border-color: rgba(139, 169, 103, .52);
  background: rgba(75, 104, 65, .15);
}

.lodging-card:hover { border-color: rgba(237, 201, 119, .58); box-shadow: inset 0 1px 0 rgba(255, 231, 173, .13), 0 14px 28px rgba(0, 0, 0, .28); transform: translateY(-2px); }
.lodging-map-btn:hover,
.lodging-call-btn:hover { color: #fff0cd; border-color: #edc977; background: rgba(168, 124, 53, .26); transform: translateY(-1px); }
.lodging-whatsapp-btn:hover { color: #f2f8e9; border-color: #9dc178; background: rgba(85, 125, 72, .31); box-shadow: 0 0 15px rgba(130, 170, 104, .13); transform: translateY(-1px); }
.lodging-map-btn:focus-visible,
.lodging-call-btn:focus-visible,
.lodging-whatsapp-btn:focus-visible { outline: 2px solid #fff0cd; outline-offset: 3px; }

@media (min-width: 700px) {
  .lodging-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .lodging-card { grid-template-columns: 100px minmax(0, 1fr); min-height: 190px; padding: 17px 15px 14px; }
  .lodging-photo-drop { width: 100px; height: 124px; }
  .lodging-name { font-size: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .lodging-card,
  .lodging-map-btn,
  .lodging-call-btn,
  .lodging-whatsapp-btn { transition: none; }
}

/* ================================================================
   DRESS CODE / ROYAL WARDROBE — XV_AWR_12C
   Cinematic editorial redesign: dress2.jpg dominant, misted edges,
   compact 3-rule stack. All rules scoped; no global selectors touched.
   ================================================================ */
#dresscode.dress-wardrobe {
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(54px, 10vw, 80px);
  padding-bottom: clamp(54px, 10vw, 80px);
  text-align: center;
  background:
    radial-gradient(ellipse 76% 50% at 50% 48%, rgba(58, 72, 43, .16), transparent 70%),
    linear-gradient(180deg, rgba(2, 8, 7, .18), rgba(5, 9, 7, .72));
}

#dresscode.dress-wardrobe .dress-haze {
  position: absolute;
  z-index: -1;
  inset: -12% -20%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 22% at 7% 2%, rgba(213, 186, 121, .09), transparent 72%),
    radial-gradient(ellipse 46% 18% at 92% 96%, rgba(113, 138, 93, .13), transparent 70%);
  filter: blur(18px);
}

#dresscode.dress-wardrobe .dress-header {
  position: relative;
  z-index: 1;
}

#dresscode.dress-wardrobe .dress-eyebrow,
#dresscode.dress-wardrobe .dress-rule-kicker {
  margin: 0;
  font-family: var(--f-eyebrow);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .22em;
  line-height: 1.25;
  text-transform: uppercase;
}

#dresscode.dress-wardrobe .dress-eyebrow { color: #d9bd7c; }

#dresscode.dress-wardrobe .dress-title {
  margin: 10px 0 0;
  color: #f3e6c9;
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 3.25rem);
  font-weight: 500;
  line-height: .98;
}

#dresscode.dress-wardrobe .dress-subtitle {
  max-width: 29rem;
  margin: 12px auto 0;
  color: rgba(235, 226, 203, .76);
  font-family: var(--f-body);
  font-size: .9rem;
  line-height: 1.58;
}

/* ── Editorial container: stacked on mobile, 2-col on desktop ── */
#dresscode.dress-wardrobe .dress-editorial {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 820px;
  margin: 28px auto 0;
}

/* ── Image column ── */
#dresscode.dress-wardrobe .dress-visual-wrap {
  position: relative;
  width: 100%;
}

/* Mobile: full-bleed — negative margins para no descentrar la imagen */
@media (max-width: 767px) {
  #dresscode.dress-wardrobe .dress-visual-wrap {
    margin-left: -22px;
    margin-right: -22px;
    width: calc(100% + 44px);
  }
  #dresscode.dress-wardrobe .dress-mist-frame {
    border-radius: 0;
    aspect-ratio: 3 / 4;
  }
}
#dresscode.dress-wardrobe .dress-mist-frame {
  position: relative;
  width: 100%;
  /* XV_AWR_DRESS-R: más cuadrada/wide en mobile — elimina espacios laterales vacíos */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 18px 6px 18px 6px;
}

#dresscode.dress-wardrobe .dress-hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Centra en la zona del vestido sin cortar cabeza */
  object-position: center 8%;
  border-radius: inherit;
}

/* Mist overlays */
#dresscode.dress-wardrobe .dress-mist-top,
#dresscode.dress-wardrobe .dress-mist-bottom,
#dresscode.dress-wardrobe .dress-mist-left,
#dresscode.dress-wardrobe .dress-mist-right,
#dresscode.dress-wardrobe .dress-mist-vignette {
  position: absolute;
  pointer-events: none;
  z-index: 2;
}

#dresscode.dress-wardrobe .dress-mist-top {
  inset: 0 0 auto 0;
  height: 22%;
  background: linear-gradient(to bottom,
    rgba(5, 9, 7, .88) 0%,
    rgba(5, 9, 7, .38) 60%,
    transparent 100%);
}

#dresscode.dress-wardrobe .dress-mist-bottom {
  inset: auto 0 0 0;
  height: 32%;
  background: linear-gradient(to top,
    rgba(5, 9, 7, .94) 0%,
    rgba(5, 9, 7, .52) 55%,
    transparent 100%);
}

#dresscode.dress-wardrobe .dress-mist-left {
  inset: 0 auto 0 0;
  width: 18%;
  background: linear-gradient(to right,
    rgba(5, 9, 7, .72) 0%,
    transparent 100%);
}

#dresscode.dress-wardrobe .dress-mist-right {
  inset: 0 0 0 auto;
  width: 18%;
  background: linear-gradient(to left,
    rgba(5, 9, 7, .72) 0%,
    transparent 100%);
}

#dresscode.dress-wardrobe .dress-mist-vignette {
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    transparent 55%,
    rgba(3, 7, 5, .32) 100%);
}

/* ── Content column ── */
#dresscode.dress-wardrobe .dress-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -46px;
  padding: 0 12px 4px;
}

/* ── Rule panel: compact forest surfaces that cross the image edge ── */
#dresscode.dress-wardrobe .dress-rules {
  width: 100%;
  max-width: 380px;
  display: grid;
  gap: 9px;
}

#dresscode.dress-wardrobe .dress-rule {
  position: relative;
  min-height: 66px;
  padding: 12px 22px 12px 29px;
  overflow: hidden;
  border: 1px solid rgba(234, 215, 166, .28);
  border-radius: 4px 15px 5px 13px;
  box-shadow: inset 0 1px 0 rgba(255, 247, 222, .13), 0 10px 20px rgba(2, 8, 5, .18);
  text-align: left;
}

#dresscode.dress-wardrobe .dress-rule::before {
  position: absolute;
  z-index: -1;
  top: -12%;
  bottom: -12%;
  left: -20px;
  width: 38px;
  border-radius: 50% 40% 42% 52%;
  background: linear-gradient(180deg, rgba(255, 246, 216, .95), rgba(221, 190, 123, .82));
  box-shadow: 8px 0 17px rgba(244, 219, 164, .16);
  content: '';
}

#dresscode.dress-wardrobe .dress-rule-formal {
  background:
    linear-gradient(108deg, rgba(218, 211, 177, .07), transparent 48%),
    linear-gradient(145deg, rgba(30, 42, 34, .82), rgba(9, 17, 13, .78));
}

#dresscode.dress-wardrobe .dress-rule-red {
  border-color: rgba(178, 113, 104, .42);
  background:
    linear-gradient(108deg, rgba(130, 67, 61, .16), transparent 50%),
    linear-gradient(145deg, rgba(46, 35, 32, .86), rgba(18, 19, 15, .8));
}

#dresscode.dress-wardrobe .dress-rule-red::before {
  background: linear-gradient(180deg, rgba(216, 159, 143, .9), rgba(122, 62, 57, .85));
  box-shadow: 8px 0 17px rgba(119, 56, 53, .18);
}

#dresscode.dress-wardrobe .dress-rule-kicker {
  display: block;
  color: rgba(237, 213, 160, .9);
  font-size: .54rem;
}

#dresscode.dress-wardrobe .dress-rule-red .dress-rule-kicker {
  color: rgba(232, 182, 166, .9);
}

#dresscode.dress-wardrobe .dress-rule-title {
  margin: 3px 0 0;
  color: #fff3d6;
  font-family: var(--f-display);
  font-size: clamp(1.02rem, 3.7vw, 1.18rem);
  font-weight: 500;
  line-height: 1.1;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .38);
}

/* A tiny dried-rose leaf cue, never a prohibitive notification marker. */
#dresscode.dress-wardrobe .dress-ribbon {
  position: absolute;
  right: 14px;
  top: 15px;
  width: 18px;
  height: 10px;
  border-top: 1px solid rgba(232, 181, 162, .58);
  border-radius: 50%;
  opacity: .72;
  transform: rotate(-26deg);
}

/* ── Closing note ── */
#dresscode.dress-wardrobe .dress-note {
  margin: 18px auto 0;
  color: rgba(222, 210, 178, .55);
  font-family: var(--f-body);
  font-size: .72rem;
  font-style: italic;
  line-height: 1.45;
}

/* ── Desktop: 2-column editorial ── */
@media (min-width: 700px) {
  #dresscode.dress-wardrobe .dress-editorial {
    grid-template-columns: 58% 1fr;
    gap: 32px;
    align-items: center;
    text-align: left;
  }

  #dresscode.dress-wardrobe .dress-header {
    text-align: left;
  }

  #dresscode.dress-wardrobe .dress-eyebrow {
    text-align: left;
  }

  #dresscode.dress-wardrobe .dress-title {
    text-align: left;
  }

  #dresscode.dress-wardrobe .dress-subtitle {
    margin: 12px 0 0;
    text-align: left;
  }

  #dresscode.dress-wardrobe .dress-mist-frame {
    aspect-ratio: 4 / 5;
    border-radius: 22px 8px 22px 8px;
    /* Override side mists: lighter on right (toward text), heavier on others */
  }

  #dresscode.dress-wardrobe .dress-mist-right {
    width: 28%;
    background: linear-gradient(to left,
      rgba(5, 9, 7, .88) 0%,
      rgba(5, 9, 7, .34) 60%,
      transparent 100%);
  }

  #dresscode.dress-wardrobe .dress-content {
    align-items: flex-start;
    margin-top: 0;
    margin-left: -58px;
    padding: 8px 0;
  }

  #dresscode.dress-wardrobe .dress-rules {
    max-width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  #dresscode.dress-wardrobe .dress-rule {
    min-height: 76px;
  }

  #dresscode.dress-wardrobe .dress-rule-red {
    grid-column: 1 / -1;
  }

  #dresscode.dress-wardrobe .dress-note {
    margin: 20px 0 0;
    text-align: left;
  }
}

/* ── Large desktop: contain width ── */
@media (min-width: 1100px) {
  #dresscode.dress-wardrobe .dress-editorial {
    grid-template-columns: 56% 1fr;
    gap: 40px;
    max-width: 860px;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  #dresscode.dress-wardrobe,
  #dresscode.dress-wardrobe * { transition: none !important; animation: none !important; }
}

/* Explicit, opt-in Alice heading language — never a global h2 override. */
#invitation .kc-alice-heading {
  font-family: 'KC Alice', var(--f-display), serif !important;
  font-style: normal;
  letter-spacing: -.015em;
  line-height: 1.05;
  overflow: visible;
  text-wrap: balance;
}

/* XV_AWR_12F — ritual cards: ink, bark and parchment; not generic green panels. */
#dresscode.dress-wardrobe .dress-rule {
  padding: 14px 44px 14px 48px;
  border-radius: 2px 20px 2px 16px;
  border-color: rgba(225, 205, 162, .38);
  box-shadow: inset 0 1px 0 rgba(255, 245, 218, .1), 0 14px 28px rgba(0, 0, 0, .28);
}
#dresscode.dress-wardrobe .dress-rule-formal {
  background: linear-gradient(112deg, rgba(113, 89, 72, .16), transparent 46%), linear-gradient(145deg, rgba(21, 17, 18, .88), rgba(8, 9, 10, .82));
}
#dresscode.dress-wardrobe .dress-rule-red {
  background: linear-gradient(112deg, rgba(137, 58, 67, .25), transparent 52%), linear-gradient(145deg, rgba(39, 19, 25, .92), rgba(12, 9, 11, .86));
}
#dresscode.dress-wardrobe .dress-rule::before { left:-25px; width:42px; background:linear-gradient(180deg,#f1dfbd,rgba(170,130,91,.82)); }
#dresscode.dress-wardrobe .dress-rule-red::before { background:linear-gradient(180deg,#d6a497,#713540); }
#dresscode.dress-wardrobe .dress-rule-sigil { position:absolute; left:17px; top:50%; width:23px; height:23px; color:#e7cfa1; transform:translateY(-50%); }
#dresscode.dress-wardrobe .dress-rule-sigil svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.45; stroke-linecap:round; stroke-linejoin:round; }
#dresscode.dress-wardrobe .dress-rule-red .dress-rule-sigil { color:#e2aaa1; }

#dresscode.dress-wardrobe .dress-rules {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
#dresscode.dress-wardrobe .dress-rule { min-width: 0; }
#dresscode.dress-wardrobe .dress-rule-red { grid-column: 1 / -1; }
#dresscode.dress-wardrobe .dress-rule-title { font-size: clamp(.96rem, 4.3vw, 1.18rem); }

/* .gallery-grid / .gallery-frame / @keyframes shimmer removed — XV_AWR_13B1-R1: legacy scaffold replaced by #galeria.gallery-cardstack (below) */

/* ================================================================
   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; }

/* ================================================================
   GIFT TABLE — ENVELOPE RAIN — XV_AWR_10B-R2
   Lluvia de sobres + CLABE BBVA revelable con sello elegante
   ================================================================ */

/* ── Sección root ── */
#regalos.gift-envelope-rain {
  isolation: isolate;
  overflow: hidden;
  position: relative;
  padding-top: clamp(60px, 11vw, 90px);
  padding-bottom: clamp(60px, 11vw, 88px);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 52%, rgba(91, 70, 38, .14), transparent 72%),
    linear-gradient(180deg, rgba(6, 8, 10, .50), rgba(4, 6, 8, .88));
}

/* Haze ambiental */
#regalos.gift-envelope-rain .gift-haze {
  position: absolute;
  z-index: 0;
  inset: -20% -20%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 30% 22% at 14% 18%, rgba(201, 161, 90, .10), transparent 72%),
    radial-gradient(ellipse 28% 20% at 86% 82%, rgba(111, 227, 217, .07), transparent 72%);
  filter: blur(20px);
}

/* ── Cielo de lluvia — contenedor de partículas ── */
.gift-envelope-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Sobre-partícula base */
.gift-env {
  position: absolute;
  display: block;
  opacity: 0;
  animation: envFall linear infinite;
  will-change: transform, opacity;
}

.gift-env svg {
  display: block;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gift-env .env-body { fill: rgba(38, 28, 12, 0.82); stroke: rgba(201, 161, 90, 0.55); stroke-width: 1.8; }
.gift-env .env-flap { fill: rgba(50, 36, 14, 0.72); stroke: rgba(201, 161, 90, 0.45); stroke-width: 1.5; }
.gift-env .env-seal { fill: none; stroke: rgba(236, 208, 142, 0.35); stroke-width: 1.2; }

/* Keyframe de caída — drift lateral + rotación + fade in/out */
@keyframes envFall {
  0%   { transform: translateY(-60px) rotate(0deg);   opacity: 0;   }
  8%   { opacity: 0.75; }
  85%  { opacity: 0.60; }
  100% { transform: translateY(110vh) rotate(var(--env-rot, 12deg)); opacity: 0; }
}

/* 12 sobres — posición horizontal + tamaño + velocidad aleatorios via CSS vars */
.gift-env-1  { --env-rot:  14deg; left:  5%; width: 38px; animation-duration: 7.2s;  animation-delay: 0.0s;  }
.gift-env-2  { --env-rot: -10deg; left: 14%; width: 26px; animation-duration: 9.5s;  animation-delay: 1.4s;  }
.gift-env-3  { --env-rot:  20deg; left: 22%; width: 44px; animation-duration: 8.1s;  animation-delay: 3.2s;  }
.gift-env-4  { --env-rot:  -8deg; left: 31%; width: 30px; animation-duration: 6.8s;  animation-delay: 0.8s;  }
.gift-env-5  { --env-rot:  16deg; left: 40%; width: 22px; animation-duration:10.3s;  animation-delay: 2.5s;  }
.gift-env-6  { --env-rot: -18deg; left: 50%; width: 40px; animation-duration: 7.7s;  animation-delay: 0.3s;  }
.gift-env-7  { --env-rot:  12deg; left: 59%; width: 28px; animation-duration: 9.0s;  animation-delay: 4.1s;  }
.gift-env-8  { --env-rot: -14deg; left: 67%; width: 36px; animation-duration: 8.4s;  animation-delay: 1.9s;  }
.gift-env-9  { --env-rot:  22deg; left: 75%; width: 24px; animation-duration:11.0s;  animation-delay: 0.6s;  }
.gift-env-10 { --env-rot:  -6deg; left: 82%; width: 42px; animation-duration: 7.5s;  animation-delay: 3.7s;  }
.gift-env-11 { --env-rot:  18deg; left: 89%; width: 32px; animation-duration: 9.8s;  animation-delay: 2.1s;  }
.gift-env-12 { --env-rot: -20deg; left: 95%; width: 20px; animation-duration: 6.4s;  animation-delay: 5.0s;  }

/* ── Sobre central — ES el botón. Dentro del gift-reveal-stage grid ── */
.gift-hero-envelope {
  position: relative;
  z-index: 4;           /* encima de la card que está oculta */
  margin: 0;            /* el grid centra automáticamente */
  width: clamp(130px, 42vw, 210px);
  align-self: center;
  justify-self: center;
  /* reset button defaults */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  animation: envFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 28px rgba(201, 161, 90, 0.22)) drop-shadow(0 2px 8px rgba(0,0,0,.65));
  transition: filter .25s ease, transform .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.gift-hero-envelope:hover,
.gift-hero-envelope:focus-visible {
  filter: drop-shadow(0 12px 36px rgba(201, 161, 90, 0.40)) drop-shadow(0 4px 14px rgba(0,0,0,.70));
  transform: scale(1.04);
}
.gift-hero-envelope:focus-visible {
  outline: 2px solid rgba(201, 161, 90, .6);
  outline-offset: 6px;
  border-radius: 4px;
}

/* Estado caída: cuando JS añade .is-falling */
.gift-hero-envelope.is-falling {
  animation: envHeroDrop .65s cubic-bezier(.55, 0, 1, .45) forwards !important;
  pointer-events: none;
}

@keyframes envHeroDrop {
  0%   { opacity: 1;   transform: translateY(0)   rotate(-1deg) scale(1); }
  40%  { opacity: 0.8; transform: translateY(20px) rotate(4deg)  scale(0.96); }
  100% { opacity: 0;   transform: translateY(120px) rotate(18deg) scale(0.7); }
}

/* Hint text bajo el sobre */
.gift-env-hint {
  font-family: var(--f-eyebrow);
  font-size: .54rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(236, 208, 142, .60);
  animation: flickerHint 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes flickerHint {
  0%, 100% { opacity: .55; }
  50%       { opacity: 1;   color: rgba(236, 208, 142, .90); }
}

.gift-hero-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

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

/* ── Card CLABE boscosa — diseño estilo dress-rule ── */
.gift-clabe-card {
  position: relative;
  z-index: 3;
  max-width: 360px;
  margin: 0 auto;
  min-height: 66px;
  padding: 16px 22px 16px 38px;
  overflow: hidden;
  border: 1px solid rgba(134, 168, 120, .38);   /* borde boscoso-verde */
  border-radius: 4px 18px 5px 16px;             /* asimétrico como dress-rule */
  box-shadow:
    inset 0 1px 0 rgba(180, 220, 160, .10),
    0 12px 26px rgba(2, 8, 5, .30);
  text-align: left;
  /* Fondo boscoso oscuro — mismo espacio que dress-rule-formal */
  background:
    linear-gradient(108deg, rgba(120, 160, 100, .09), transparent 52%),
    linear-gradient(145deg, rgba(22, 36, 24, .92), rgba(8, 16, 10, .88));
  animation: clabeCardReveal .5s var(--ease-silk) both;
}
.gift-clabe-card[hidden] { display: none; }

@keyframes clabeCardReveal {
  from { opacity: 0; transform: translateY(-12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Acento lateral vegetal — copia el ::before de dress-rule */
.gift-card-accent {
  position: absolute;
  z-index: 0;
  top: -12%;
  bottom: -12%;
  left: -18px;
  width: 36px;
  border-radius: 50% 40% 42% 52%;
  background: linear-gradient(180deg,
    rgba(140, 200, 120, .88) 0%,
    rgba(68, 120, 58, .78) 100%);
  box-shadow: 8px 0 18px rgba(100, 170, 80, .14);
  pointer-events: none;
}

/* Sigil-icon boscoso */
.gift-card-sigil {
  position: absolute;
  left: 15px;
  top: 50%;
  width: 22px;
  height: 22px;
  color: rgba(160, 220, 130, .80);
  transform: translateY(-50%);
}
.gift-card-sigil svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: rgba(80, 140, 60, .60);
  stroke-width: .8;
}

/* Kicker — ídem dress-rule-kicker */
.gift-card-kicker {
  display: block;
  font-family: var(--f-eyebrow);
  font-size: .54rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(160, 210, 140, .88);
  margin-bottom: 4px;
}

/* Label "Clabe interbancaria" */
.gift-card-clabe-label {
  font-family: var(--f-eyebrow);
  font-size: .50rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(160, 200, 140, .60);
  margin: 0 0 4px;
}

/* Número CLABE — grande y luminoso, ídem dress-rule-title */
.gift-card-clabe-num {
  margin: 0 0 14px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.05rem, 4.5vw, 1.38rem);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1.1;
  color: #e8f0d0;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .42);
}

/* ── Stage: sobre y card superpuestos en el mismo espacio (CSS Grid) ── */
.gift-reveal-stage {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  place-items: center;
  margin: 0 auto;
  max-width: 400px;
  /* Altura mínima: la que ocupe el sobre */
  min-height: 200px;
}
/* Ambos hijos en la misma celda grid — SIN width:100% para que el sobre no se estire */
.gift-reveal-stage > * {
  grid-row: 1;
  grid-column: 1;
}
/* Sólo la card toma ancho completo */
.gift-clabe-card {
  width: 100%;
}

/* ── Header de la sección regalos ── */
#regalos.gift-envelope-rain .gift-header {
  position: relative;
  z-index: 3;
  margin-bottom: 22px;
}
#regalos.gift-envelope-rain .gift-eyebrow {
  margin: 0 0 6px;
  color: #d6b36c;
  font-family: var(--f-eyebrow);
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .24em;
}
#regalos.gift-envelope-rain .gift-title {
  margin: 0 0 10px;
  color: #f1e3c6;
  font-family: var(--f-display);
  font-size: clamp(2rem, 9vw, 3.15rem);
  font-weight: 500;
  line-height: 1;
}
#regalos.gift-envelope-rain .gift-subtitle {
  max-width: 20rem;
  margin: 0 auto;
  color: rgba(235, 224, 198, .70);
  font-family: var(--f-body);
  font-size: .82rem;
  line-height: 1.55;
}

/* .gift-clabe-panel / .gift-bank-label / .gift-bank-icon / .gift-clabe-reveal /
   .gift-clabe-hidden / .gift-clabe-prompt / .gift-clabe-dots / @keyframes cladotPulse /
   .gift-clabe-shown removed — XV_AWR_13B1-R1: pre-R2 Gift panel replaced by envelope-rain + .gift-clabe-card
   @keyframes clabeReveal below is PRESERVED — still used by live .gift-clabe-card */
@keyframes clabeReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);    }
}
/* .gift-clabe-label + .gift-clabe-number removed — XV_AWR_13B1-R1: pre-R2 labels replaced by .gift-card-clabe-label / .gift-card-clabe-num */

/* Botón copiar */
.gift-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid rgba(201, 161, 90, .35);
  border-radius: 20px;
  background: rgba(201, 161, 90, .08);
  color: rgba(236, 208, 142, .80);
  font-family: var(--f-eyebrow);
  font-size: .52rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.gift-copy-btn:hover {
  background: rgba(201, 161, 90, .18);
  border-color: rgba(201, 161, 90, .60);
  color: #ECD08E;
}
.gift-copy-btn svg {
  width: 14px; height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.gift-copy-btn.copied {
  border-color: rgba(111, 227, 217, .50);
  color: rgba(111, 227, 217, .90);
  background: rgba(111, 227, 217, .08);
}

/* .gift-reveal-btn and child selectors removed — XV_AWR_13B1-R1: pre-R2 reveal button replaced by .gift-hero-envelope interaction */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gift-env         { animation: none !important; opacity: .25; }
  .gift-hero-envelope { animation: none !important; }
}

/* .rsvp-card / .rsvp-field / .rsvp-btn / .rsvp-note / .album-card removed — XV_AWR_13B1-R1: pre-RSVP-Star scaffold; RSVP Star uses kc-rsvp-star.css */

/* ================================================================
   CAPTURA EL MOMENTO — XV_AWR_13D-R4
   Shared Photo Album CTA · Wonderland nocturno elegante
   ================================================================ */

/* ── Section shell ── */
.captura-momento {
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 12vw, 96px) clamp(20px, 6vw, 48px);
  text-align: center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(30, 22, 8, .72), transparent 74%),
    linear-gradient(180deg, rgba(5, 4, 12, .88), rgba(8, 6, 16, .96));
  position: relative;
}

/* ── Ambient haze layer (mirrors secret-key-haze depth) ── */
.captura-haze {
  position: absolute;
  z-index: -1;
  inset: -15%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 32% 22% at 12% 72%, rgba(201, 161, 90, .08), transparent 70%),
    radial-gradient(ellipse 32% 22% at 88% 18%, rgba(105, 140, 128, .07), transparent 70%),
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(30, 22, 8, .55), transparent 75%);
  filter: blur(18px);
}

/* ── Camera SVG wrapper ── */
.captura-camera-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(24px, 5vw, 36px);
}
.captura-camera-svg {
  width: clamp(120px, 40vw, 188px);
  height: auto;
  overflow: visible;
  animation: envFloat 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(201, 161, 90, 0.18)) drop-shadow(0 2px 8px rgba(0,0,0,.55));
}

/* ── SVG element styles — gold fine-line strokes ── */
.cam-body {
  fill: none;
  stroke: rgba(201, 161, 90, .55);
  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: rgba(201, 161, 90, .60);
  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: rgba(201, 161, 90, .04);
  stroke: rgba(236, 208, 142, .55);
  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: 'KC Alice', var(--f-display), serif;
  font-size: clamp(1.6rem, 7vw, 2.4rem);
  font-weight: normal;
  color: var(--gold-bright);
  text-shadow:
    0 0 32px rgba(201, 161, 90, .45),
    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: var(--gold-bright);
  border: 1.4px solid rgba(201, 161, 90, .55);
  border-radius: 3px;
  background: rgba(201, 161, 90, .06);
  -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 rgba(201, 161, 90, .12), inset 0 0 0 0 rgba(201, 161, 90, .10);
}
.captura-cta:hover {
  background: rgba(201, 161, 90, .14);
  border-color: rgba(236, 208, 142, .80);
  color: #fff8e8;
  box-shadow: 0 0 28px rgba(201, 161, 90, .28), inset 0 0 12px rgba(201, 161, 90, .10);
}
.captura-cta:active {
  transform: scale(.96);
  background: rgba(201, 161, 90, .22);
  box-shadow: 0 0 12px rgba(201, 161, 90, .20);
}
.captura-cta:focus-visible {
  outline: 2px solid rgba(236, 208, 142, .80);
  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: rgba(201, 161, 90, .40);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .captura-copy,
  .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 54% 40% at 50% 42%,rgba(76,61,36,.15),transparent 72%),linear-gradient(180deg,rgba(5,7,7,.77),rgba(3,5,5,.92)); }
#secret-key.secret-key-finale .secret-key-haze { position:absolute; z-index:-1; inset:-20%; pointer-events:none; background:radial-gradient(ellipse 28% 18% at 15% 68%,rgba(105,140,128,.1),transparent 72%),radial-gradient(ellipse 28% 19% at 87% 16%,rgba(215,180,102,.1),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:87px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 7px 10px rgba(0,0,0,.38)); }
/* — Hat SVG element styles — */
#secret-key.secret-key-finale .secret-hat-svg { width: 110px; height: 130px; overflow: visible; animation: hatFloat 5.6s ease-in-out infinite, hatDrift 9s ease-in-out infinite; }
#secret-key.secret-key-finale .hat-shadow { fill: rgba(0,0,0,.38); animation: shadowBreathe 5.6s ease-in-out infinite; }
#secret-key.secret-key-finale .hat-brim { fill: #1a160e; stroke: #8a6c2a; stroke-width: 1.2; }
#secret-key.secret-key-finale .hat-brim-edge { fill: none; stroke: #c9a040; stroke-width: 1; opacity: .7; }
#secret-key.secret-key-finale .hat-crown { fill: #130f09; stroke: #7a5c20; stroke-width: 1.1; }
#secret-key.secret-key-finale .hat-crown-shade { fill: #c9a040; stroke: none; }
#secret-key.secret-key-finale .hat-ribbon { fill: #4a3518; stroke: #a07832; stroke-width: 1; }
#secret-key.secret-key-finale .hat-ticket { fill: #2a1f0d; stroke: #c9a040; stroke-width: .9; }
#secret-key.secret-key-finale .hat-ticket-text { fill: #e4c870; font-family: var(--f-eyebrow, serif); font-size: 4.2px; letter-spacing: .02em; }
#secret-key.secret-key-finale .hat-stitch { fill: none; stroke: rgba(200,160,60,.38); stroke-width: .85; stroke-dasharray: 2 2; }
#secret-key.secret-key-finale .hat-glow { fill: rgba(180,140,50,.07); stroke: rgba(218,185,108,.14); stroke-width: .8; animation: hatGlowPulse 4.2s ease-in-out infinite; }
#secret-key.secret-key-finale .hat-brim-dot { fill: rgba(200,160,60,.5); }
#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,rgba(38,29,19,.96),rgba(9,12,12,.97)); 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); }
#secret-key.secret-key-finale .secret-key-trigger:hover .secret-hat-svg { animation-play-state: paused; transform: translateY(-5px) rotate(2deg); transition: transform .22s ease; }
#rsvp .kc-rsvp-mushroom-1 { bottom: 1%; }
#rsvp .kc-rsvp-mushroom-3 { bottom: 2%; }

#rsvp .kc-rsvp-mushroom { filter: drop-shadow(0 7px 12px rgba(0,0,0,.55)); }

#secret-key.secret-key-finale { background:radial-gradient(ellipse 54% 46% at 50% 42%,rgba(89,39,61,.19),transparent 74%),linear-gradient(180deg,rgba(8,6,10,.84),rgba(4,4,7,.96)); }
#secret-key.secret-key-finale .secret-key-trigger { color:#d8c4d0; min-width:178px; min-height:170px; }
#secret-key.secret-key-finale .secret-hat-svg { width:126px; height:142px; filter:drop-shadow(0 14px 20px rgba(0,0,0,.62)); }
#secret-key.secret-key-finale .hat-brim { fill:#110b14; stroke:#a66a86; stroke-width:1.5; }
#secret-key.secret-key-finale .hat-brim-edge { stroke:#dec4d4; }
#secret-key.secret-key-finale .hat-crown { fill:#17101a; stroke:#936078; stroke-width:1.45; }
#secret-key.secret-key-finale .hat-crown-shade { fill:#79384f; }
#secret-key.secret-key-finale .hat-ribbon { fill:#54233c; stroke:#d5a8bc; }
#secret-key.secret-key-finale .hat-ticket { fill:#eee0d1; stroke:#703b55; }
#secret-key.secret-key-finale .hat-ticket-text { fill:#3b1728; font-size:4.8px; }
#secret-key.secret-key-finale .hat-stitch { stroke:rgba(229,190,210,.56); }
#secret-key.secret-key-finale .hat-glow { fill:rgba(189,94,138,.18); stroke:rgba(244,203,222,.42); }
#secret-key.secret-key-finale .hat-brim-dot { fill:rgba(240,199,220,.72); }
#secret-key.secret-key-finale .secret-key-hint { color:rgba(225,203,216,.78); }
#secret-key.secret-key-finale .secret-key-card { border-color:rgba(190,126,157,.52); background:linear-gradient(145deg,rgba(44,20,35,.97),rgba(9,7,12,.98)); }
#secret-key.secret-key-finale .secret-key-close { color:#e4bfd3; border-bottom-color:rgba(226,170,201,.7); }

#secret-key.secret-key-finale .secret-key-trigger:active .secret-hat-svg { transform: scale(.93) rotate(-2deg); transition: transform .1s ease; }

/* — Hat keyframe animations — */
@keyframes hatFloat {
  0%, 100% { transform: translateY(0px)   rotate(-0.6deg); }
  50%       { transform: translateY(-6px)  rotate(0.6deg);  }
}
@keyframes hatDrift {
  0%, 100% { transform: rotate(0deg); }
  30% { transform: rotate(.9deg); }
  70% { transform: rotate(-.7deg); }
}
@keyframes shadowBreathe {
  0%, 100% { transform: scaleX(1); opacity: .38; }
  50% { transform: scaleX(.82); opacity: .22; }
}
@keyframes hatGlowPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (prefers-reduced-motion:reduce) {
  #secret-key.secret-key-finale .secret-key-trigger { transition:none; }
  #secret-key.secret-key-finale .secret-hat-svg { animation: none; }
  #secret-key.secret-key-finale .hat-shadow { animation: none; }
  #secret-key.secret-key-finale .hat-glow { animation: none; }
}

/* ================================================================
   FOOTER / FOREST RELIC — XV_AWR_09B
   Compact closing seal, adapted from KC Style Kit reveal principles.
   ================================================================ */
.wonderland-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 58% 58% at 50% 110%, rgba(99, 83, 49, .15), transparent 72%),
    linear-gradient(180deg, rgba(5, 9, 8, .2), rgba(3, 5, 5, .8));
}
.wonderland-footer .footer-mist { position:absolute; z-index:-1; inset:-40% -25%; pointer-events:none; background:radial-gradient(ellipse 28% 20% at 16% 70%,rgba(95,128,117,.12),transparent 72%),radial-gradient(ellipse 32% 18% at 84% 20%,rgba(205,169,94,.11),transparent 72%); filter:blur(18px); }
.wonderland-footer .footer-relic { width:min(180px,58vw); margin:0 auto 14px; color:rgba(218,185,112,.65); }
.wonderland-footer .footer-relic svg { display:block; width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
.wonderland-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; }
.wonderland-footer .footer-family { margin:9px 0 0; color:rgba(223,205,166,.62); font-family:var(--f-eyebrow); font-size:.5rem; letter-spacing:.19em; text-transform:uppercase; }
.wonderland-footer .footer-kc-seal { display:flex; 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; }
.wonderland-footer .footer-kc-seal:hover { color:#f1d08a; }
.wonderland-footer .footer-kc-seal:focus-visible { outline:2px solid #fff0c9; outline-offset:4px; border-radius:3px; }
.wonderland-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; }
.wonderland-footer .footer-seal-line { width:clamp(28px,9vw,54px); height:1px; background:linear-gradient(90deg,transparent,rgba(220,185,109,.58)); }
.wonderland-footer .footer-seal-line:last-child { background:linear-gradient(90deg,rgba(220,185,109,.58),transparent); }
@media (prefers-reduced-motion:no-preference) {
  .wonderland-footer:not(.is-visible) .footer-relic,
  .wonderland-footer:not(.is-visible) .footer-whisper,
  .wonderland-footer:not(.is-visible) .footer-family,
  .wonderland-footer:not(.is-visible) .footer-kc-seal { opacity:0; transform:translateY(10px); }
  .wonderland-footer .footer-relic,
  .wonderland-footer .footer-whisper,
  .wonderland-footer .footer-family,
  .wonderland-footer .footer-kc-seal { transition:opacity .55s ease,transform .55s var(--ease-silk); }
  .wonderland-footer.is-visible .footer-whisper { transition-delay:.06s; }
  .wonderland-footer.is-visible .footer-family { transition-delay:.12s; }
  .wonderland-footer.is-visible .footer-kc-seal { transition-delay:.18s; }
}

/* ================================================================
   BROKEN POCKET WATCH MUSIC CONTROL — XV_AWR_09C
   Fixed below the gate (z-index 500); no wedding ring or glass widget.
   ================================================================ */
.pocket-watch-control {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 500;
  display: grid;
  width: 58px;
  height: 62px;
  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;
}
.pocket-watch-control::before { position:absolute; z-index:-1; inset:6px 4px 4px; border:1px solid rgba(219,179,97,.28); border-radius:50%; background:radial-gradient(circle at 40% 35%,rgba(244,228,187,.16),rgba(30,25,18,.94) 66%); content:''; }
.pocket-watch-control:hover { color:#f2d48e; filter:drop-shadow(0 8px 15px rgba(0,0,0,.58)); }
.pocket-watch-control:active { transform:scale(.94); }
.pocket-watch-control:focus-visible { outline:2px solid #fff0c9; outline-offset:4px; border-radius:50%; }
.pocket-watch-svg { position:relative; width:58px; height:62px; overflow:visible; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
.pocket-watch-svg .watch-crown { stroke-width:1.45; }
.pocket-watch-svg .watch-case { fill:rgba(68,51,28,.28); stroke-width:2.1; }
.pocket-watch-svg .watch-bezel { stroke:rgba(245,216,151,.72); stroke-width:.9; }
.pocket-watch-svg .watch-mark { stroke:rgba(242,218,168,.6); stroke-width:1.1; }
.pocket-watch-svg .watch-hand { stroke:#f0ce83; stroke-width:1.65; transform-box:view-box; transform-origin:36px 39px; }
.pocket-watch-svg .watch-crack { stroke:rgba(94,58,47,.9); stroke-width:1.25; }
.pocket-watch-svg .watch-pivot { fill:#e9c879; stroke:none; }
.pocket-watch-control.is-paused { color:rgba(171,135,80,.7); filter:drop-shadow(0 5px 9px rgba(0,0,0,.4)); }
.pocket-watch-control.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%); }
.pocket-watch-control.is-playing .watch-hand-minute { animation:watchMinute 8s steps(16,end) infinite; }
.pocket-watch-control.is-playing .watch-hand-hour { animation:watchHour 32s linear infinite; }
.pocket-watch-control.is-playing::after { position:absolute; z-index:-2; inset:1px; border:1px solid rgba(226,185,104,.27); border-radius:50%; content:''; animation:watchBreath 2.8s ease-in-out infinite alternate; }
@keyframes watchMinute { to { transform:rotate(360deg); } }
@keyframes watchHour { to { transform:rotate(90deg); } }
@keyframes watchBreath { from { opacity:.28; transform:scale(.92); } to { opacity:.72; transform:scale(1.05); } }
@media (prefers-reduced-motion:reduce) { .pocket-watch-control.is-playing .watch-hand-minute,.pocket-watch-control.is-playing .watch-hand-hour,.pocket-watch-control.is-playing::after { 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);
  }
}