/*
 * SY R5 · Hero → Footer — el jardín de día del Gate.
 * Tesis: la noche del Gate amanece en un jardín verde claro pintado con la misma mano (acuarela, hiedra, jazmín,
 * lilas y mariposas lilas); los capítulos se leen como papelería de jardín y la noche vuelve solo al despedirse.
 * Silueta: ramos de esquina y rociados laterales que enmarcan títulos; polaroids que cruzan el ancho; ventanas en arco.
 * Ritmo: portada → deseo → cuenta → familia → recuerdos (horizontal) → misa/fiesta → guía → respuesta → noche.
 * Motivo: botánica pintada en anidoodle (assets/garden), corona de oro, filetes con rombo, cinta y nenúfar de pin.
 * Material: papel verde claro con lavados sage, tinta verde, oro antiguo con degradado, marfil de polaroid.
 * Movimiento: la botánica brota una vez al entrar; la polaroid activa se endereza; el footer enciende el cielo.
 * Tipografía: SY Display/medion (títulos y nombre) · SY Caps (etiquetas, fecha, números) · SY Text (lectura).
 */

/* SY-G R2: medion reemplaza a la cursiva. Se declara aquí y no en theme-esmeralda.css (congelado contra el template):
   el token --sy-font-script conserva su nombre para no tocar sus usos; 'SY Script' ya no se usa y no se descarga. */
@font-face { font-family: 'SY Display'; src: url('../../assets/fonts/sy-display.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: swap; }

:root {
  --sy-font-script: 'SY Display', 'SY Text', Georgia, serif;
  --sy-paper: #F6F7EC;
  --sy-paper-2: #EEF3E2;
  --sy-quiet: #E4ECD7;
  --sy-ink: #2F3B2A;
  --sy-green: #3E5A32;
  --sy-leaf: #5E8550;
  --sy-moss: #536845;
  --sy-sage: #A3C080;
  --sy-rule: #C8A659;
  --sy-gold-deep: #7E6228;
  --sy-lila: #8E78B8;
  --sy-lila-soft: #B9A3D6;
  --sy-border: #A9BC9C;
  --sy-ivory: #FFFEF8;
  --sy-night: #1B2338;
  --sy-cream: #F6F1DC;
  --sy-error: #70443B;
  --sy-error-paper: #F7EDE7;
  --sy-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .26 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── papel y escena ── */
#kc-main {
  --color-action: var(--sy-green);
  --color-focus: var(--sy-green);
  --color-canvas: var(--sy-paper);
  --color-ink: var(--sy-ink);
  --color-surface: var(--sy-ivory);
  --color-input: var(--sy-ivory);
  --color-input-ink: var(--sy-ink);
  --color-input-border: #728C6B;
  color: var(--sy-ink);
  background-color: var(--sy-paper);
  font-family: var(--sy-font-text);
}
body:not(.kc-locked) { background-color: var(--sy-paper); }
.sy-garden-scene[data-garden-scene] {
  --scene-bg: var(--sy-paper);
  position: relative;
  box-sizing: border-box;
  isolation: isolate;
  overflow: clip;
  color: var(--sy-ink);
  background:
    radial-gradient(70% 38% at 8% 0%, rgba(201, 218, 186, .5), transparent 72%),
    radial-gradient(60% 34% at 100% 100%, rgba(221, 231, 207, .75), transparent 70%),
    var(--scene-bg);
}
.sy-garden-scene[data-garden-scene]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sy-grain);
  opacity: .07;
  pointer-events: none;
}
#kc-countdown, #kc-gallery, #sy-reception, #kc-dresscode, #kc-capture { --scene-bg: var(--sy-paper-2); }
#kc-main > section.sy-garden-scene[data-garden-scene] {
  padding: clamp(4.4rem, 9vw, 6.5rem) clamp(1.15rem, 4.2vw, 2.4rem);
}
#kc-main .kc-section-inner {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding-inline: 0;
  text-align: center;
}
#kc-main .kc-section-title {
  margin: 0 0 1.1rem;
  color: var(--sy-green);
  font-family: var(--sy-font-script);
  font-size: clamp(2.8rem, 12.5vw, 4rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.08;
  text-align: center;
  text-transform: none;
}
#kc-main .kc-section-title em { color: inherit; font-family: inherit; font-size: 1em; font-style: normal; font-weight: inherit; }
#kc-main p, #kc-main li, #kc-main blockquote, #kc-main label, #kc-main a, #kc-main button { text-wrap: pretty; }
#kc-main :focus-visible,
#kc-footer :focus-visible,
.kc-audio-toggle:focus-visible { outline: 2px solid var(--sy-green); outline-offset: 3px; }
.sy-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* filete de oro con rombo: la referencia, sin clip-art */
.sy-rule { position: relative; width: min(72%, 22rem); height: 1px; margin: 1.6rem auto 0; background: linear-gradient(90deg, transparent, var(--sy-rule) 18%, var(--sy-rule) 82%, transparent); }
.sy-rule span { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; translate: -50% -50%; rotate: 45deg; background: linear-gradient(135deg, #F6E7AE, var(--sy-rule) 55%, var(--sy-gold-deep)); }

/* ── botánica pintada: masa de borde, nunca sobre los datos ── */
.sy-flora {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
  transition: opacity 1.1s ease, scale 1.3s cubic-bezier(.2, .8, .2, 1), rotate 1.3s cubic-bezier(.2, .8, .2, 1);
}
.sy-flora--tl { top: -2.6rem; left: -2.4rem; width: min(40vw, 17rem); transform-origin: 0 0; }
.sy-flora--br { bottom: -2.6rem; right: -2.4rem; width: min(40vw, 17rem); transform-origin: 100% 100%; }
.sy-flora--spray-r { top: -2.6rem; right: -3.4rem; width: min(30vw, 12rem); transform-origin: 100% 0; }
.sy-flora--spray-l { top: -2.6rem; left: -3.4rem; width: min(30vw, 12rem); transform: scaleX(-1); transform-origin: 0 0; }
.sy-flora--garland { left: 50%; width: min(88vw, 31rem); transform: translateX(-50%); transform-origin: 50% 0; }
.sy-flora--garland.sy-flora--top { top: .4rem; }
.sy-flora--bf { width: 3.4rem; }
.sy-garden-ready .sy-garden-scene:not(.garden-in-view) .sy-flora { opacity: 0; scale: .9; rotate: -3deg; }
.sy-garden-ready .sy-garden-scene:not(.garden-in-view) .sy-flora--bf { scale: .6; rotate: -18deg; }

/* ── 1 · portada ── */
#kc-hero.sy-garden-scene[data-garden-scene] {
  --scene-bg: var(--sy-paper);
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(4.6rem, 16vw, 6rem) 1.2rem 2.4rem;
  text-align: center;
  background:
    radial-gradient(55% 30% at 50% 0%, rgba(255, 255, 255, .8), transparent 75%),
    radial-gradient(80% 40% at 0% 0%, rgba(201, 218, 186, .6), transparent 72%),
    radial-gradient(70% 36% at 100% 100%, rgba(185, 163, 214, .16), transparent 72%),
    var(--sy-paper);
}
#kc-hero .sy-flora--hero-tl { top: -2.6rem; left: -3rem; width: min(46vw, 21rem); }
#kc-hero .sy-flora--hero-r { top: -1.6rem; right: -3.6rem; width: min(28vw, 11rem); }
#kc-hero .sy-flora--bf-hero { top: 27%; right: 3vw; width: 3.2rem; }
/* el Hero entra por su propia secuencia (sy-hero.js): la botánica no usa aquí el brote genérico */
#kc-hero.sy-garden-scene .sy-flora { opacity: 1; scale: none; rotate: none; transition: none; }
#kc-hero.sy-hero-await [data-hero-step] { opacity: 0; }
#kc-hero .sy-hero-layout { position: relative; z-index: 1; display: grid; justify-items: center; gap: 0; width: 100%; max-width: 40rem; }
#kc-hero .kc-hero-content { display: grid; justify-items: center; gap: 0; margin: 0; padding: 0; background: none; }
#kc-hero .sy-crown { display: block; width: clamp(8.4rem, 38vw, 11rem); height: auto; margin: 0 auto .1rem; filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 2px 3px rgba(140, 110, 46, .3)); }
#kc-hero .kc-hero-label { display: flex; align-items: baseline; justify-content: center; gap: .42em; margin: 0 0 .85rem; color: var(--sy-green); font-family: var(--sy-font-caps); font-size: clamp(1.25rem, 5.6vw, 1.7rem); letter-spacing: .08em; text-transform: none; line-height: 1.1; }
#kc-hero .sy-w { display: inline-block; font-family: var(--sy-font-text); font-size: 1.12em; letter-spacing: .02em; color: var(--sy-green); }
#kc-hero .sy-xv {
  display: inline-block;
  font-size: 1.75em;
  line-height: 1;
  letter-spacing: .04em;
  background: linear-gradient(180deg, #E8CC78 0%, #C49A3E 38%, #8E6A24 72%, #6A4E18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)) drop-shadow(0 2px 2px rgba(126, 98, 40, .35));
}
#kc-hero .kc-hero-title { margin: .2rem 0 0; color: var(--sy-green); font-family: var(--sy-font-script); font-size: clamp(3.9rem, 19vw, 6.6rem); font-weight: 400; line-height: 1.05; letter-spacing: 0; text-shadow: 0 1px 0 rgba(255, 255, 255, .7); outline: none; }
/* SY-G R2: el retrato mide ~1.1x la lámina 3 del libro (0.9 x --bw del Gate), así la cámara siempre entra, nunca se aleja */
#kc-hero .sy-hero-figure { position: relative; width: max(min(88vw, 25rem), min(87vw, 44.4vh)); width: max(min(88vw, 25rem), min(87vw, 44.4svh)); margin: .1rem auto 0; }
#kc-hero .sy-hero-halo { position: absolute; inset: -14% -18% -10%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(201, 218, 186, .85), rgba(221, 210, 238, .45) 55%, transparent 100%); }
#kc-hero .sy-hero-art { position: relative; display: block; width: 100%; height: auto; filter: none; }
#kc-hero .sy-hero-sprig { position: absolute; left: 50%; bottom: -9%; width: 128%; max-width: none; height: auto; translate: -50% 0; pointer-events: none; }
#kc-hero .sy-hero-details { display: grid; justify-items: center; gap: .15rem; margin-top: 1.4rem; }
.sy-date { display: grid; justify-items: center; gap: .1rem; color: var(--sy-green); font-family: var(--sy-font-caps); }
.sy-date-month { font-size: clamp(1rem, 4.4vw, 1.2rem); letter-spacing: .3em; padding-left: .3em; }
.sy-date-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .8rem; width: min(74vw, 17rem); }
.sy-date-side { padding: .28rem 0; border-block: 1px solid var(--sy-rule); font-size: clamp(.86rem, 3.8vw, 1rem); letter-spacing: .22em; padding-left: .22em; }
.sy-date-day { font-size: clamp(2.8rem, 13vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; }
.sy-date-year { font-size: clamp(.95rem, 4.2vw, 1.15rem); letter-spacing: .32em; padding-left: .32em; }
#kc-hero .kc-hero-venue { margin: .45rem 0 0; color: var(--sy-ink); font-family: var(--sy-font-text); font-size: 1.08rem; letter-spacing: .02em; }
#kc-hero .kc-scroll-hint {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  margin-top: 1.4rem;
  color: var(--sy-green);
  font-family: var(--sy-font-caps);
  font-size: .72rem;
  letter-spacing: .24em;
  text-decoration: none;
  border-bottom: 1px solid var(--sy-rule);
}

#kc-hero.sy-hero-in .sy-flora--bf-hero { animation: sy-flap 2.6s ease-in-out infinite; }
#kc-hero.sy-hero-in .sy-crown { animation: sy-gleam 6s ease-in-out infinite; }
@keyframes sy-flap { 0%, 100% { scale: 1 1; } 50% { scale: .8 1; } }
@keyframes sy-gleam { 0%, 80%, 100% { filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 2px 3px rgba(140, 110, 46, .3)); } 88% { filter: drop-shadow(0 0 6px rgba(247, 230, 120, .9)) drop-shadow(0 2px 3px rgba(140, 110, 46, .3)) brightness(1.15); } }

/* ── 2 · deseo ── */
#kc-narrative.sy-garden-scene[data-garden-scene] { padding-top: clamp(9.5rem, 36vw, 11rem); }
#kc-narrative .sy-flora--bf-narrative { right: 9vw; bottom: 2.4rem; rotate: -10deg; }
#kc-main .kc-narrative-quote {
  max-width: 33rem;
  margin: 0 auto;
  padding: 0;
  border: 0;
  color: var(--sy-ink);
  font-family: var(--sy-font-text);
  font-size: clamp(1.12rem, 4.6vw, 1.3rem);
  font-style: normal;
  line-height: 1.75;
  text-align: center;
}
#kc-main .kc-narrative-quote::before, #kc-main .kc-narrative-quote::after { content: none; }
#kc-main .kc-narrative-firma { margin: 1.1rem 0 0; color: var(--sy-green); font-family: var(--sy-font-script); font-size: clamp(2.4rem, 10vw, 3rem); line-height: 1; }

/* ── 3 · cuenta regresiva ── */
#kc-countdown .kc-countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; max-width: 30rem; margin: 0 auto; }
#kc-countdown .kc-unit { position: relative; display: grid; justify-items: center; gap: .3rem; padding: .3rem .2rem; background: none; border: 0; box-shadow: none; }
#kc-countdown .kc-unit::before { content: none; display: none; }
#kc-countdown .kc-unit + .kc-unit::after { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(transparent, var(--sy-rule), transparent); }
#kc-countdown .kc-num { color: var(--sy-green); font-family: var(--sy-font-caps); font-size: clamp(2.1rem, 10vw, 3rem); font-weight: 400; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
#kc-countdown .kc-unit-label { color: var(--sy-moss); font-family: var(--sy-font-caps); font-size: clamp(.6rem, 2.6vw, .72rem); letter-spacing: .2em; text-transform: uppercase; }

/* ── 4 · familia ── */
#kc-protocol-social .kc-familia-pair-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; max-width: 34rem; margin: 1.4rem auto 0; }
#kc-protocol-social .kc-familia-column { padding: 0; background: none; border: 0; box-shadow: none; }
#kc-protocol-social .kc-familia-column h3 { margin: 0 0 .55rem; color: var(--sy-moss); font-family: var(--sy-font-caps); font-size: .82rem; font-weight: 400; letter-spacing: .26em; text-transform: uppercase; }
#kc-protocol-social .kc-familia-column ul { margin: 0; padding: 0; list-style: none; }
#kc-protocol-social .kc-familia-column li { color: var(--sy-ink); font-family: var(--sy-font-text); font-size: 1.22rem; line-height: 1.6; }
@media (min-width: 560px) { #kc-protocol-social .kc-familia-pair-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; column-gap: 2.4rem; } }

/* ── 5 · mi historia: polaroids horizontales ── */
#kc-gallery.sy-garden-scene[data-garden-scene] { padding-inline: 0; }
#kc-gallery .sy-flora--gallery { width: min(34vw, 14rem); }
#kc-gallery .sy-history-lead { margin: 0; color: var(--sy-moss); font-family: var(--sy-font-caps); font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; }
.sy-polaroids {
  position: relative;
  z-index: 1;
  margin: .8rem 0 0;
  padding: 2.6rem 0 2.4rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sy-polaroids::-webkit-scrollbar { display: none; }
.sy-polaroids:focus-visible { outline: 2px solid var(--sy-green); outline-offset: -4px; }
.sy-polaroid-rail { display: flex; align-items: center; gap: 2.6rem; width: max-content; margin: 0; padding: 0 15vw; list-style: none; }
.sy-polaroid {
  position: relative;
  flex: 0 0 min(68vw, 16.5rem);
  box-sizing: border-box;
  margin: 0;
  padding: .7rem .7rem 0;
  background: var(--sy-ivory);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 1px rgba(47, 59, 42, .08), 0 12px 24px -10px rgba(47, 59, 42, .32);
  scroll-snap-align: center;
  transform: rotate(var(--tilt, 0deg));
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s ease;
}
.sy-polaroid.is-active { transform: rotate(0deg) translateY(-6px); box-shadow: 0 2px 2px rgba(47, 59, 42, .08), 0 22px 34px -14px rgba(47, 59, 42, .38); }
.sy-polaroid .kc-memory-photo-wrap { aspect-ratio: 1; overflow: hidden; background: #E6ECDD; }
.sy-polaroid .kc-memory-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: none; }
.sy-polaroid .kc-memory-caption { margin: 0; padding: .65rem .3rem 1.05rem; color: var(--sy-green); font-family: var(--sy-font-script); font-size: clamp(1.5rem, 6.4vw, 1.75rem); line-height: 1.1; text-align: center; }
.sy-polaroid-tape {
  position: absolute;
  z-index: 2;
  top: -12px;
  left: 50%;
  width: 5.4rem;
  height: 1.55rem;
  translate: -50% 0;
  rotate: -4deg;
  background: linear-gradient(180deg, rgba(214, 228, 196, .92), rgba(176, 202, 145, .86));
  clip-path: polygon(0 8%, 4% 0, 8% 10%, 12% 0, 88% 0, 92% 10%, 96% 0, 100% 8%, 100% 92%, 96% 100%, 92% 90%, 88% 100%, 12% 100%, 8% 90%, 4% 100%, 0 92%);
  box-shadow: 0 1px 2px rgba(47, 59, 42, .14);
}
.sy-polaroid--lilac .sy-polaroid-tape { background: linear-gradient(180deg, rgba(222, 210, 240, .94), rgba(196, 178, 226, .88)); rotate: 5deg; }
.sy-polaroid-pin { position: absolute; z-index: 2; top: -1.5rem; right: -1rem; width: 5.6rem; height: auto; rotate: 10deg; pointer-events: none; }
.sy-polaroid-bf { position: absolute; z-index: 2; top: -1.6rem; left: -1rem; width: 3.6rem; height: auto; rotate: -14deg; pointer-events: none; }
.sy-polaroid-hint { position: relative; z-index: 1; margin: 0; color: var(--sy-moss); font-family: var(--sy-font-caps); font-size: .66rem; letter-spacing: .26em; text-align: center; text-transform: uppercase; }
.sy-polaroid-hint::after { content: ""; display: inline-block; width: 1.6rem; height: 1px; margin-left: .6rem; vertical-align: middle; background: var(--sy-rule); }
@media (min-width: 1080px) { .sy-polaroid { flex-basis: 15rem; } }
/* R4: las 4 fotos reales caben centradas desde 1200; abajo de eso el riel corre con su pista.
   El theme vuelve grid de 2 columnas a .kc-memory-wall desde 768: el riel es su único hijo, va en bloque */
#kc-gallery .sy-polaroids { display: block; }
@media (min-width: 1200px) {
  .sy-polaroid-rail { width: max-content; margin-inline: auto; padding: 0 2rem; }
  .sy-polaroid-hint { display: none; }
}

/* ── 6 · misa y fiesta: ventanas en arco ── */
#kc-event-info.sy-garden-scene[data-garden-scene] { padding-top: clamp(9.5rem, 36vw, 11rem); }
#kc-event-info .kc-cards-grid, #sy-reception .kc-cards-grid { display: grid; justify-items: center; gap: 0; margin: .6rem auto 0; }
#kc-event-info .kc-card, #sy-reception .kc-card {
  display: grid;
  justify-items: center;
  gap: .45rem;
  width: min(100%, 25rem);
  box-sizing: border-box;
  padding: 1.2rem 1.2rem 1.5rem;
  background: var(--sy-ivory);
  border: 1px solid rgba(200, 166, 89, .5);
  border-radius: 0;
  box-shadow: 0 0 0 6px var(--sy-ivory), 0 0 0 7px rgba(200, 166, 89, .3), 0 22px 34px -22px rgba(47, 59, 42, .4);
  text-align: center;
}
#kc-main .kc-card .kc-card-title { order: 2; margin: .3rem 0 0; color: var(--sy-green); font-family: var(--sy-font-text); font-size: 1.38rem; font-weight: 400; line-height: 1.25; }
#kc-main .kc-card .kc-card-time { order: 3; margin: 0; color: var(--sy-gold-deep); font-family: var(--sy-font-caps); font-size: 1.05rem; letter-spacing: .2em; }
#kc-main .kc-card img { order: 1; display: block; width: 100%; aspect-ratio: 4 / 4.4; height: auto; object-fit: cover; border-radius: 999px 999px 4px 4px; filter: none; }
#kc-main .kc-card .kc-card-desc { order: 4; margin: 0; color: var(--sy-ink); font-family: var(--sy-font-text); font-size: 1.02rem; }
#kc-main .kc-card .kc-btn { order: 5; margin-top: .5rem; }

/* ── 7 · itinerario: un tallo con hojas ── */
#kc-itinerary .kc-itinerary-toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .45rem 1.2rem;
  color: var(--sy-green);
  background: transparent;
  border: 1px solid rgba(94, 133, 80, .55);
  border-radius: 999px;
  font-family: var(--sy-font-caps);
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
}
#kc-itinerary .kc-toggle-arrow { font-size: .6rem; }
#kc-itinerary .kc-itinerary-body { margin-top: 1.4rem; }
#kc-itinerary .kc-timeline { position: relative; display: grid; gap: 1.15rem; max-width: 22rem; margin: 0 auto; padding: .4rem 0 .4rem 2.2rem; list-style: none; text-align: left; }
#kc-itinerary .kc-timeline::before { content: ""; position: absolute; left: .62rem; top: 0; bottom: 0; width: 2px; border-radius: 2px; background: linear-gradient(180deg, transparent, var(--sy-leaf) 8%, var(--sy-sage) 92%, transparent); }
#kc-itinerary .kc-timeline li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .1rem; margin: 0; padding: 0; background: none; border: 0; }
#kc-itinerary .kc-timeline li::before { content: ""; position: absolute; left: -1.95rem; top: .2rem; width: .9rem; height: .9rem; border-radius: 0 70% 0 70%; rotate: -20deg; background: linear-gradient(135deg, #A9C77E, var(--sy-leaf)); box-shadow: 0 1px 2px rgba(47, 59, 42, .25); }
#kc-itinerary .kc-tl-time { justify-self: start; text-align: left; color: var(--sy-gold-deep); font-family: var(--sy-font-caps); font-size: .92rem; letter-spacing: .14em; }
#kc-itinerary .kc-tl-label { justify-self: start; text-align: left; color: var(--sy-ink); font-family: var(--sy-font-text); font-size: 1.22rem; line-height: 1.35; }

/* ── 8 · vestimenta ── */
#kc-dresscode .sy-flora--bf-dress { top: 2rem; right: 7vw; rotate: 16deg; }
#kc-dresscode .sy-guide-emblem { display: grid; place-items: center; width: 4.4rem; aspect-ratio: 1; margin: 0 auto 1rem; border: 1px solid rgba(200, 166, 89, .7); border-radius: 50%; color: var(--sy-green); background: var(--sy-ivory); }
#kc-dresscode .sy-guide-emblem svg { width: 2.6rem; height: 2.6rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#kc-dresscode .kc-dc-wrap { max-width: 30rem; margin: 0 auto; padding: 0; background: none; border: 0; }
#kc-dresscode .kc-dc-theme { margin: 0; color: var(--sy-green); font-family: var(--sy-font-text); font-size: clamp(1.25rem, 5vw, 1.45rem); line-height: 1.45; }
#kc-dresscode .kc-dc-avoid { margin: .8rem 0 0; color: var(--sy-moss); font-family: var(--sy-font-text); font-size: 1.02rem; line-height: 1.5; }
#kc-dresscode .kc-dc-palette:empty { display: none; }

/* ── 9 · un detalle ── */
#kc-gifts .sy-envelope-emblem { display: block; width: 6.4rem; height: auto; margin: 0 auto 1rem; color: var(--sy-green); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#kc-gifts .kc-gifts-card { max-width: 30rem; margin: 0 auto; padding: 0; background: none; border: 0; box-shadow: none; }
#kc-gifts .kc-gifts-note { margin: 0; color: var(--sy-ink); font-family: var(--sy-font-text); font-size: clamp(1.2rem, 5vw, 1.4rem); line-height: 1.5; }
#kc-gifts .sy-gift-name { margin: .3rem 0 0; color: var(--sy-green); font-family: var(--sy-font-script); font-weight: 400; font-size: clamp(1.55rem, 6.8vw, 1.9rem); line-height: 1.1; text-transform: none; }
#kc-gifts .sy-gift-desc { margin: .5rem 0 0; color: var(--sy-ink); font-family: var(--sy-font-text); font-style: italic; font-size: clamp(1.05rem, 4.4vw, 1.2rem); line-height: 1.5; }

/* RSVP — sage canvas around one ivory letter, with its own restrained double edge. */
#kc-rsvp.sy-garden-scene[data-garden-scene] { background-color: #E8EFDD; }
#kc-rsvp .kc-section-inner { max-width: 42rem; }
#kc-rsvp .kc-rsvp-deadline {
  color: var(--sy-ink);
  font-size: 1.0625rem;
  line-height: 1.5;
}
#kc-rsvp .kc-rsvp-card {
  position: relative;
  z-index: 1;
  overflow: visible;
  padding: clamp(1.2rem, 5vw, 2rem);
  color: var(--sy-ink);
  background: var(--sy-paper);
  border: 1px solid var(--sy-border);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#kc-rsvp .kc-rsvp-card::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: .35rem;
  border: 1px solid rgba(181,154,82,.65);
  pointer-events: none;
}
#kc-rsvp .kc-rsvp-card::after { content: none; }
#kc-rsvp .kc-rsvp-card > * { position: relative; z-index: 1; }
#kc-rsvp .kc-rsvp-card .sy-rsvp-seal,
#kc-rsvp .sy-rsvp-seal {
  display: grid;
  place-items: center;
  width: 3.6rem;
  aspect-ratio: 1;
  margin: 0 auto 1rem;
  border: 1px solid rgba(181,154,82,.8);
  border-radius: 50%;
  background: var(--sy-quiet);
  color: var(--sy-green);
}
#kc-rsvp .sy-rsvp-seal svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linecap: round; stroke-linejoin: round; }
#kc-rsvp .kc-field { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 1rem; }
#kc-rsvp .kc-field label,
#kc-rsvp .kc-field-label,
#kc-rsvp .kc-optional-badge,
#kc-rsvp .kc-field-hint,
#kc-rsvp .kc-field-hint strong {
  color: var(--sy-ink);
  font-size: 1.0625rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
}
#kc-rsvp .kc-field input[type='text'],
#kc-rsvp .kc-field input[type='number'],
#kc-rsvp .kc-field input[type='email'],
#kc-rsvp .kc-field select,
#kc-rsvp #kc-field-passes,
#kc-rsvp .kc-companion-name {
  box-sizing: border-box;
  width: 100%;
  min-height: 48px;
  padding: .65rem .8rem;
  color: var(--sy-ink);
  background: #FFFDF7;
  border: 1px solid #728C6B;
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--sy-font-text);
  font-size: 1.125rem;
  line-height: 1.35;
  letter-spacing: 0;
}
#kc-rsvp .kc-field input::placeholder,
#kc-rsvp .kc-companion-name::placeholder { color: #385C3A; opacity: 1; font-style: normal; }
#kc-rsvp .kc-field input:focus-visible,
#kc-rsvp .kc-field select:focus-visible,
#kc-rsvp #kc-field-passes:focus-visible,
#kc-rsvp .kc-companion-name:focus-visible {
  border-color: var(--sy-green);
  outline: 2px solid var(--sy-green);
  outline-offset: 2px;
  box-shadow: none;
}
#kc-rsvp .kc-field-hint { display: block; margin-top: .25rem; }
#kc-rsvp .kc-radio-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
#kc-rsvp .kc-radio-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  min-height: 48px;
  padding: .65rem .8rem;
  color: var(--sy-ink);
  background: #FFFDF7;
  border: 1px solid var(--sy-border);
  border-radius: 2px;
  box-shadow: none;
}
#kc-rsvp .kc-radio-label:hover { color: var(--sy-ink); background: var(--sy-quiet); border-color: var(--sy-green); }
#kc-rsvp .kc-radio-label span {
  color: var(--sy-ink);
  font-family: var(--sy-font-text);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
}
#kc-rsvp .kc-radio-label::before {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--sy-green);
  border-radius: 50%;
  background: var(--sy-paper);
  box-shadow: none;
}
#kc-rsvp .kc-radio-label:has(input:checked),
#kc-rsvp .kc-radio-label.kc-radio-checked {
  color: var(--sy-ink);
  background: #E3EED9;
  border-color: var(--sy-green);
  box-shadow: none;
}
#kc-rsvp .kc-radio-label:has(input:checked)::before,
#kc-rsvp .kc-radio-label.kc-radio-checked::before {
  background: var(--sy-green);
  border-color: var(--sy-green);
  box-shadow: inset 0 0 0 3px #E3EED9;
}
#kc-rsvp .kc-radio-label:has(input:focus-visible) { outline: 2px solid var(--sy-green); outline-offset: 2px; }
#kc-rsvp-submit,
#kc-main #kc-rsvp-submit,
#kc-rsvp-submit.is-forging {
  min-height: 48px;
  padding: .7rem 1rem;
  color: var(--sy-paper);
  background: var(--sy-green);
  border: 1px solid var(--sy-green);
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--sy-font-text);
  font-size: 1.125rem;
  letter-spacing: .02em;
  text-shadow: none;
  animation: none;
  transform: none;
}
#kc-rsvp-submit:hover:not(:disabled) { color: var(--sy-paper); background: var(--sy-green); box-shadow: none; transform: none; }
#kc-rsvp-submit:disabled,
#kc-rsvp-submit[disabled] {
  color: var(--sy-green);
  background: #D8E3CE;
  border-color: #D8E3CE;
  box-shadow: none;
  opacity: 1;
  transform: none;
}
#kc-rsvp .kc-rsvp-msg,
#kc-rsvp #kc-rsvp-error,
#kc-rsvp .kc-field-error,
#kc-rsvp [role='alert'] {
  color: var(--sy-error);
  background: var(--sy-error-paper);
  border-color: var(--sy-error);
  font-size: 1rem;
  line-height: 1.5;
}
#kc-rsvp .kc-rsvp-reset-demo {
  color: var(--sy-green);
  background: var(--sy-paper);
  border: 1px solid var(--sy-border);
  border-radius: 2px;
  font-size: 1rem;
}
#kc-capture.sy-garden-scene[data-garden-scene] { background-color: #F1F4E7; }
#kc-capture .kc-narrative-quote {
  max-width: 38rem;
  margin: 1.2rem auto 1rem;
  color: var(--color-ink);
  font-size: clamp(1.125rem, 3.9vw, 1.35rem);
  line-height: 1.65;
}
#kc-main .kc-field-hint {
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45;
  opacity: 1;
}
#kc-main .kc-field-hint strong { color: var(--color-action); }
#kc-capture #captura-cta:disabled {
  color: var(--color-action);
  background: var(--sy-quiet);
  border-color: var(--sy-border);
  border-style: dashed;
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
  transform: none;
}
#kc-secret.sy-garden-scene[data-garden-scene] { background-color: #EAF0E1; }
.sy-guide-butterfly { position: absolute; z-index: 0; width: 2.8rem; height: auto; pointer-events: none; }
#kc-capture .sy-guide-butterfly { top: 2rem; right: 1.5rem; width: 3rem; }
#kc-secret .sy-guide-butterfly--secret { top: 2rem; right: 1.5rem; width: 2.8rem; }

/* Ticket keeps its operational scan field pure black/white and its canvas quiet. */
#kc-ticket.sy-garden-scene[data-garden-scene] { background-color: #FBF9F1; }
#kc-ticket .kc-section-title em { color: var(--sy-green); }
#kc-ticket .kc-ticket-card,
#kc-ticket-standalone-card,
#kc-ticket-overlay .kc-ticket-card {
  color: var(--sy-ink);
  background: var(--sy-paper);
  border: 1px solid var(--sy-green);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  text-shadow: none;
}
#kc-ticket .kc-ticket-card::before,
#kc-ticket .kc-ticket-card::after,
#kc-ticket-standalone-card::before,
#kc-ticket-standalone-card::after,
#kc-ticket-overlay .kc-ticket-card::before,
#kc-ticket-overlay .kc-ticket-card::after { content: none; }
#kc-ticket .kc-ticket-card *,
#kc-ticket-standalone-card *,
#kc-ticket-overlay .kc-ticket-card * { color: var(--sy-ink); text-shadow: none; }
#kc-ticket .kc-ticket-divider,
#kc-ticket-standalone-card .kc-ticket-divider,
#kc-ticket-overlay .kc-ticket-divider { border-color: var(--sy-border); }
#kc-ticket .kc-ticket-qr-container,
#kc-ticket-standalone-card .kc-ticket-qr-container,
#kc-ticket-overlay .kc-ticket-qr-container {
  box-sizing: content-box;
  padding: 8px;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#kc-ticket .kc-ticket-qr-container::before,
#kc-ticket .kc-ticket-qr-container::after,
#kc-ticket-standalone-card .kc-ticket-qr-container::before,
#kc-ticket-standalone-card .kc-ticket-qr-container::after,
#kc-ticket-overlay .kc-ticket-qr-container::before,
#kc-ticket-overlay .kc-ticket-qr-container::after { content: none; }
#kc-ticket .kc-ticket-qr-container img,
#kc-ticket .kc-ticket-qr-container canvas,
#kc-ticket-standalone-card .kc-ticket-qr-container img,
#kc-ticket-standalone-card .kc-ticket-qr-container canvas,
#kc-ticket-overlay .kc-ticket-qr-container img,
#kc-ticket-overlay .kc-ticket-qr-container canvas { filter: none; }
#kc-ticket-standalone-link,
#kc-ticket-map-link,
#kc-ticket-map-link-inline {
  min-height: 44px;
  color: var(--sy-green);
  background: var(--sy-paper);
  border: 1px solid var(--sy-green);
  border-radius: 2px;
  font-family: var(--sy-font-text);
  font-size: 1.0625rem;
  text-decoration: underline;
  text-underline-offset: .2em;
}
#kc-ticket-overlay,
#kc-map-overlay {
  color: var(--sy-ink);
  background: var(--sy-paper);
  background-image: none;
}
#kc-ticket-overlay .kc-standalone-back,
#kc-map-overlay .kc-standalone-back,
#kc-map-overlay .kc-btn-outline {
  min-height: 44px;
  color: var(--sy-green);
  background: var(--sy-paper);
  border: 1px solid var(--sy-green);
  border-radius: 2px;
  font-size: 1.0625rem;
  box-shadow: none;
}
#kc-map-overlay .kc-location-card {
  color: var(--sy-ink);
  background: var(--sy-paper);
  border-color: var(--sy-border);
  box-shadow: none;
}

/* Shared functional links/buttons retain readable type and 44px targets. */
#kc-main .kc-btn,
#kc-main .kc-btn-outline,
#kc-main .kc-btn-secondary,
#kc-main .kc-btn-primary,
#kc-main .kc-secret-trigger,
#kc-main .kc-rsvp-reset-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .5rem .85rem;
  border-radius: 2px;
  font-family: var(--sy-font-text);
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: .02em;
  box-shadow: none;
  text-shadow: none;
}
#kc-main .kc-btn-outline,
#kc-main .kc-btn-secondary,
#kc-main .kc-secret-trigger {
  color: var(--sy-green);
  background: transparent;
  border: 1px solid var(--sy-green);
}
#kc-main .kc-btn-primary {
  color: var(--sy-paper);
  background: var(--sy-green);
  border: 1px solid var(--sy-green);
}
#kc-main .kc-btn:hover,
#kc-main .kc-btn-outline:hover,
#kc-main .kc-btn-secondary:hover,
#kc-main .kc-btn-primary:hover,
#kc-main .kc-secret-trigger:hover {
  border-color: var(--sy-green);
  box-shadow: none;
  transform: none;
}
#kc-main .kc-btn-outline:hover,
#kc-main .kc-btn-secondary:hover,
#kc-main .kc-secret-trigger:hover { color: var(--sy-green); background: var(--sy-quiet); }
#kc-main .kc-btn-primary:hover { color: var(--sy-paper); background: var(--sy-green); }
#kc-main .kc-secret-trigger::before { content: none; }
#kc-secret .kc-secret-trigger { gap: .55rem; }
#kc-secret .sy-secret-lily {
  display: block;
  flex: 0 0 auto;
  width: 2rem;
  height: 1.5rem;
  color: var(--sy-green);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#kc-main .kc-secret-msg {
  max-width: 38rem;
  margin: 1.2rem auto 0;
  padding: 1rem 0 0;
  color: var(--sy-ink);
  background: transparent;
  border: 0;
  border-top: 1px solid rgba(181,154,82,.6);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
#kc-main .kc-secret-msg h3 { color: var(--sy-green); font-family: var(--sy-font-text); font-size: 1.35rem; }
#kc-main .kc-secret-msg blockquote { color: var(--sy-ink); font-size: 1.1875rem; line-height: 1.6; }

/* ── R5 · botones en píldora, RSVP con ramos pintados, álbum y secreto ── */
#kc-main .kc-btn-outline,
#kc-main .kc-btn-secondary,
#kc-main .kc-btn-primary,
#kc-main .kc-secret-trigger,
#kc-main .kc-rsvp-reset-demo { min-height: 46px; padding: .55rem 1.35rem; border-radius: 999px; font-family: var(--sy-font-text); letter-spacing: .03em; }
#kc-main .kc-btn-primary { color: var(--sy-cream); background: var(--sy-green); border-color: var(--sy-green); box-shadow: 0 8px 18px -10px rgba(47, 59, 42, .55); }
#kc-main .kc-btn-primary:hover { background: #34502A; }
#kc-main .kc-btn-primary:disabled { opacity: .55; }
#kc-rsvp.sy-garden-scene[data-garden-scene] { --scene-bg: #E8EFDD; }
#kc-rsvp .sy-flora--rsvp { top: -2.8rem; left: -2.8rem; width: min(36vw, 15rem); }
#kc-rsvp .sy-flora--rsvp-br { bottom: -2.8rem; right: -2.8rem; width: min(36vw, 15rem); }
#kc-rsvp .kc-section-inner { text-align: left; }
#kc-rsvp .kc-section-title { text-align: center; }
#kc-capture .sy-flora--bf-capture { top: 1.2rem; right: 6vw; left: auto; rotate: 14deg; }
#kc-capture .kc-field-hint { color: var(--sy-moss); }
#kc-secret.sy-garden-scene[data-garden-scene] { padding-bottom: 4.5rem; }
#kc-secret .kc-secret-trigger { gap: .7rem; padding-left: .8rem; }
#kc-secret .sy-secret-lily { display: block; flex: 0 0 auto; width: 3.4rem; height: auto; margin-block: -.4rem; }

/* ── pase: papelería de jardín con filete de oro; el QR queda blanco y limpio ── */
#kc-ticket .kc-ticket-card,
#kc-ticket-standalone-card,
#kc-ticket-overlay .kc-ticket-card {
  background: var(--sy-ivory);
  border: 1px solid rgba(200, 166, 89, .7);
  box-shadow: 0 0 0 6px var(--sy-ivory), 0 0 0 7px rgba(200, 166, 89, .35), 0 24px 40px -24px rgba(47, 59, 42, .45);
}
#kc-ticket .kc-ticket-label, #kc-ticket-overlay .kc-ticket-label,
#kc-ticket .kc-ticket-guest-label, #kc-ticket-overlay .kc-ticket-guest-label { font-family: var(--sy-font-caps); letter-spacing: .3em; color: var(--sy-moss); }
#kc-ticket-event-inline, #kc-ticket-event { font-family: var(--sy-font-caps); font-weight: 400; letter-spacing: .28em; text-transform: uppercase; font-size: 1rem; }
#kc-ticket-hosts-inline, #kc-ticket-hosts { margin: .1rem 0 .3rem; font-family: var(--sy-font-script); font-size: clamp(2.8rem, 12vw, 3.4rem); line-height: 1.05; color: var(--sy-green) !important; }
#kc-ticket-passes-inline, #kc-ticket-passes { font-family: var(--sy-font-caps); letter-spacing: .2em; }
#kc-ticket-standalone-link,
#kc-ticket-map-link,
#kc-ticket-map-link-inline { border-radius: 999px; text-decoration: none; padding-inline: 1.3rem; }

/* encabezados que reciben foco programático (tabindex -1): sin anillo, no son controles */
#kc-ticket-event:focus, #kc-ticket-event-inline:focus, #kc-ticket-inline-heading:focus, #kc-map-title:focus { outline: none; }
#kc-map-overlay #kc-map-title { color: var(--sy-green); font-family: var(--sy-font-script); font-size: clamp(3rem, 13vw, 3.8rem); font-weight: 400; border: 0; }
#kc-map-overlay .kc-location-card { background: var(--sy-ivory); border: 1px solid rgba(200, 166, 89, .5); border-radius: 0; box-shadow: 0 0 0 5px var(--sy-ivory), 0 0 0 6px rgba(200, 166, 89, .3); }
#kc-map-overlay .kc-location-overline { font-family: var(--sy-font-caps); letter-spacing: .26em; color: var(--sy-moss); }
#kc-map-overlay .kc-location-time { font-family: var(--sy-font-caps); letter-spacing: .14em; color: var(--sy-gold-deep); }
#kc-map-overlay .kc-btn-outline, #kc-map-overlay .kc-standalone-back, #kc-ticket-overlay .kc-standalone-back { border-radius: 999px; text-decoration: none; }

}

/* Persistent audio control: static thumb-safe rail; no scroll-chasing code. */
.kc-audio-toggle {
  position: fixed;
  z-index: 100;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  color: var(--sy-green);
  background: var(--sy-paper);
  border: 1px solid var(--sy-green);
  border-radius: 50%;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.kc-audio-icon { color: var(--sy-green); }
.kc-audio-bars span { background: var(--sy-green); }
/* Reserve the fixed audio hit area only beside actions, never beside whole chapters. */
@media (max-width: 700px) {
  #kc-main #kc-rsvp-submit {
    width: calc(100% - 56px);
    min-width: 0;
  }
  #kc-footer .kc-footer-brand {
    grid-column: 1 / -1;
    grid-row: 5;
    max-width: calc(100% - 56px);
    margin-top: .75rem;
    overflow-wrap: anywhere;
  }
}
/* ── escritorio: la botánica crece con el lienzo, el contenido no ── */
@media (min-width: 900px) {
  #kc-hero .sy-flora--hero-tl { width: 34rem; top: -3rem; left: -3rem; }
  #kc-hero .sy-flora--hero-r { width: 20rem; top: -2rem; right: -4rem; }
  #kc-hero .sy-flora--bf-hero { right: 18vw; width: 4rem; }
  .sy-flora--tl, .sy-flora--br { width: 24rem; }
  .sy-flora--spray-r, .sy-flora--spray-l { width: 17rem; }
  .sy-flora--garland { width: 40rem; }
  .sy-flora--bf { width: 4.2rem; }
  #kc-main .kc-section-title { font-size: 4.4rem; }
  #kc-footer .kc-footer-dedication, #kc-footer .kc-footer-date { font-size: 1.2rem; }
}

/* ════════ R6 ════════ */

/* rendimiento: las escenas fuera de pantalla no se maquetan ni pintan al abrir el Gate (el commit revela todo main de golpe) */
#kc-main > section.sy-garden-scene:not(#kc-hero):not(#kc-narrative),
#kc-main > footer.sy-garden-scene { content-visibility: auto; contain-intrinsic-size: auto 820px; }

/* ── 2 · deseo: una carta de pergamino, lejos de la guirnalda ── */
#kc-narrative.sy-garden-scene[data-garden-scene] { padding-top: clamp(11.5rem, 44vw, 13rem); }
#kc-narrative .kc-narrative-inner {
  box-sizing: border-box;
  max-width: 31rem;
  margin-inline: auto;
  padding: .6rem .4rem .4rem;
  border-style: solid;
  border-width: 46px;
  border-image: url("../../assets/garden/parchment.webp?v=r6b") 120 fill / 46px stretch; /* sombra horneada en el PNG: un filter aquí rompía WebKit */
}
#kc-narrative .kc-section-title { margin-top: -.4rem; }
#kc-narrative .sy-flora--bf-narrative { bottom: 1.4rem; }

/* ── 3 · cuenta: un estanque de día; los números sobre nenúfares, los sapos mirando la cuenta ── */
#kc-countdown .sy-pads { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .25rem; max-width: 26rem; margin: 0 auto; }
#kc-countdown .sy-pads .kc-unit { position: relative; display: grid; place-content: center; justify-items: center; gap: 0; aspect-ratio: 1.2 / 1; padding: 0; }
#kc-countdown .sy-pads .kc-unit::after { content: none; display: none; }
#kc-countdown .sy-pads .kc-unit:nth-child(1), #kc-countdown .sy-pads .kc-unit:nth-child(4) { margin-top: .9rem; }
#kc-countdown .sy-pad { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* sin filter: WebKit pierde teselas con demasiadas capas filtradas */
#kc-countdown .sy-pads .kc-num { position: relative; z-index: 1; color: #24381F; font-size: clamp(1.45rem, 7vw, 2.1rem); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }
#kc-countdown .sy-pads .kc-unit-label { position: relative; z-index: 1; color: #24381F; font-size: clamp(.5rem, 2.2vw, .62rem); letter-spacing: .14em; }
}

/* ── 5 · mi historia: el jardín que se arma al recorrer el riel ── */
.sy-polaroid-rail { position: relative; isolation: isolate; }
.sy-polaroid { z-index: 1; }
.sy-garden-bed { position: absolute; inset: -2.6rem 0 -2.4rem; pointer-events: none; }
.sy-bed-piece { position: absolute; display: block; height: auto; max-width: none; pointer-events: none; transform-origin: 50% 100%; opacity: 0; }
.sy-bed-piece.is-front { z-index: 2; }
.sy-bed-piece.is-hang { transform-origin: 50% 0; }
.sy-garden-static .sy-bed-piece, .sy-bed-piece.is-in { opacity: 1; }
.sy-polaroid-pin { top: -1.9rem; right: -1.2rem; width: 4.4rem; rotate: 8deg; }
.sy-polaroids { padding-block: 3.2rem 3rem; }

/* ── 6 · ubicaciones compactas ── */
#kc-event-info.sy-garden-scene[data-garden-scene] { padding-top: clamp(4.4rem, 9vw, 6rem); }
#kc-event-info .sy-places { display: grid; gap: .9rem; max-width: 30rem; margin: .4rem auto 0; justify-items: stretch; }
#kc-event-info .sy-place {
  display: grid;
  grid-template-columns: 5.8rem minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: .95rem;
  width: auto;
  padding: .75rem .9rem .75rem .75rem;
  text-align: left;
  box-shadow: 0 0 0 4px var(--sy-ivory), 0 0 0 5px rgba(200, 166, 89, .3), 0 14px 24px -18px rgba(47, 59, 42, .45);
}
#kc-main #kc-event-info .sy-place img { order: 0; width: 5.8rem; height: 7rem; aspect-ratio: auto; object-fit: cover; border-radius: 999px 999px 4px 4px; }
#kc-event-info .sy-place-text { display: grid; gap: .1rem; min-width: 0; }
#kc-main #kc-event-info .sy-place .kc-card-time { order: 0; font-size: .8rem; letter-spacing: .16em; }
#kc-main #kc-event-info .sy-place .kc-card-time span { color: var(--sy-moss); }
#kc-main #kc-event-info .sy-place .kc-card-title { order: 0; margin: .1rem 0 0; font-size: 1.12rem; line-height: 1.25; }
#kc-main #kc-event-info .sy-place .kc-card-desc { order: 0; font-size: .92rem; color: var(--sy-moss); }
#kc-main #kc-event-info .sy-place .kc-btn { order: 0; justify-self: start; min-height: 40px; margin-top: .4rem; padding: .35rem 1.05rem; font-size: .95rem; }

/* ── 7 · itinerario: el tallo crece con el scroll, las paradas brotan a su lado ── */
#kc-itinerary .sy-itinerary { position: relative; max-width: 27rem; margin: .8rem auto 0; padding: 0; }
#kc-itinerary .sy-stem { position: absolute; left: 50%; top: 0; width: 40px; height: var(--stem-h, 100%); translate: -50% 0; overflow: visible; z-index: 0; }
#kc-itinerary .sy-stem path { fill: none; stroke: var(--sy-leaf); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--tl-progress, 1)); vector-effect: non-scaling-stroke; }
#kc-itinerary .kc-timeline { position: relative; z-index: 1; display: grid; gap: 1.7rem; max-width: none; margin: 0; padding: .6rem 0 0; list-style: none; text-align: left; }
#kc-itinerary .kc-timeline::before { content: none; display: none; }
#kc-itinerary .kc-timeline li { position: relative; width: calc(50% - 1.4rem); display: grid; gap: .15rem; }
#kc-itinerary .kc-timeline li:nth-child(odd) { justify-self: start; justify-items: end; text-align: right; }
#kc-itinerary .kc-timeline li:nth-child(even) { justify-self: end; justify-items: start; text-align: left; }
#kc-itinerary .kc-timeline li::before { top: .6rem; width: 1rem; height: 1rem; }
#kc-itinerary .kc-timeline li:nth-child(odd)::before { left: auto; right: -1.95rem; rotate: 20deg; border-radius: 70% 0 70% 0; }
#kc-itinerary .kc-timeline li:nth-child(even)::before { left: -1.95rem; }
#kc-itinerary .kc-tl-time, #kc-itinerary .kc-tl-label { justify-self: auto; text-align: inherit; }
#kc-itinerary .kc-tl-label { font-size: 1.12rem; }
#kc-itinerary .sy-tl-icon { display: block; width: 2.1rem; height: 2.1rem; color: var(--sy-gold-deep); }
#kc-itinerary .sy-tl-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#kc-itinerary .kc-timeline li.is-pre { opacity: 0; }
#kc-itinerary .sy-serenade { position: relative; z-index: 1; width: min(76vw, 19rem); aspect-ratio: 591 / 588; margin: 1.6rem auto 0; }
#kc-itinerary .sy-serenade.is-pre { opacity: 0; }
#kc-itinerary .sy-serenade svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── 8 · vestimenta: los ganchos se mecen en su rama ── */
#kc-dresscode .sy-dress-art { position: relative; display: block; width: min(74vw, 19.5rem); margin: .2rem auto 1rem; transform-origin: 50% 6%; }
#kc-dresscode .sy-dress-art img { display: block; width: 100%; height: auto; }
/* la etiqueta cuelga del gancho con hilo de oro */
#kc-dresscode .sy-dress-string { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#kc-dresscode .sy-dress-string path { fill: none; stroke: #B8963F; stroke-width: 1.6; stroke-linecap: round; }
#kc-dresscode .sy-dress-tag {
  position: absolute; left: 66.2%; top: 32.8%;
  padding: .3rem .75rem .3rem 1.15rem;
  border: 1px solid rgba(184, 150, 63, .8); border-radius: 3px 12px 12px 3px;
  background: var(--sy-ivory); color: var(--sy-rosa);
  font-family: var(--sy-font-script); font-size: clamp(.95rem, 4.2vw, 1.12rem); line-height: 1.1; white-space: nowrap;
  rotate: 9deg; transform-origin: .45rem 50%; translate: -.45rem -50%;
  box-shadow: 0 2px 6px rgba(80, 60, 30, .16);
}
#kc-dresscode .sy-dress-tag::before { content: ""; position: absolute; left: .32rem; top: 50%; width: .3rem; height: .3rem; margin-top: -.15rem; border-radius: 50%; border: 1px solid #B8963F; background: var(--sy-paper); }
#kc-dresscode.is-visible .sy-dress-art { animation: sy-sway 7s ease-in-out infinite; }
@keyframes sy-sway { 0%, 100% { rotate: -.6deg; } 50% { rotate: .6deg; } }

/* ── 9 · regalos: el sobre principal y una lluvia de sobres chicos ── */
#kc-gifts .sy-envelopes { position: relative; width: 100%; height: clamp(15rem, 62vw, 18rem); max-width: 26rem; margin: 0 auto .6rem; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
#kc-gifts .sy-envelope-main { position: absolute; z-index: 2; left: 50%; top: .6rem; width: min(62vw, 15rem); height: auto; translate: -50% 0; filter: drop-shadow(0 10px 12px rgba(80, 60, 30, .2)); }
#kc-gifts .sy-envelope-rain { position: absolute; inset: 0; z-index: 1; }
#kc-gifts .sy-envelope-rain img { position: absolute; top: 3rem; left: var(--x); width: calc(26rem * var(--s)); max-width: 32%; height: auto; opacity: 0; rotate: var(--r); }
#kc-gifts.is-visible .sy-envelope-rain img { animation: sy-fall var(--t) linear var(--d) infinite; }
#kc-gifts.is-visible .sy-envelope-main { animation: sy-float 5s ease-in-out infinite; }
@keyframes sy-fall { 0% { translate: 0 -2rem; rotate: var(--r); opacity: 0; } 12% { opacity: .95; } 50% { translate: 1rem 5rem; rotate: calc(var(--r) * -1); } 85% { opacity: .9; } 100% { translate: -.4rem 12rem; rotate: var(--r); opacity: 0; } }
@keyframes sy-float { 0%, 100% { translate: -50% 0; } 50% { translate: -50% -6px; } }

/* ── 10 · álbum: la cámara flota y a veces dispara su flash ── */
#kc-capture .sy-camera { display: block; width: min(44vw, 10rem); height: auto; margin: .4rem auto 1.1rem; overflow: visible; animation: kc-echoes-levita 4.6s ease-in-out infinite; }
#kc-capture .sy-camera-flash { animation: sy-flash 6s ease-in-out infinite; }
@keyframes kc-echoes-levita{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
#kc-capture .kc-location-overline { margin: 0 0 .3rem; font-family: var(--sy-font-caps); font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--sy-moss); }
@keyframes sy-flash { 0%, 86%, 100% { fill: #F7E678; filter: none; } 90% { fill: #FFFFFF; filter: drop-shadow(0 0 10px #FFF6B8) drop-shadow(0 0 22px #F7E678); } }
#kc-capture #captura-cta:disabled { opacity: 1; color: var(--sy-moss); border-style: dashed; }

/* ── nenúfar vectorizado ── */
#kc-secret .sy-secret-lily { width: 2.6rem; margin-block: -.3rem; }

/* ════════ R7 ════════ */

/* pergamino compartido: marfil verdoso del tema; el borde se repite (round), nunca se estira */
/* el shorthand `border` de las reglas viejas borraba el border-image: aquí gana por especificidad y orden */
#kc-main .sy-parchment, #kc-main #kc-narrative .kc-narrative-inner, #kc-main #kc-event-info .sy-place.sy-parchment, #kc-main #kc-secret .kc-secret-msg.sy-parchment, #kc-main #kc-dresscode .kc-dc-wrap.sy-parchment {
  box-sizing: border-box;
  border-style: solid;
  border-width: clamp(30px, 8vw, 44px);
  border-image: url("../../assets/garden/parchment.webp?v=r7b") 120 fill / clamp(30px, 8vw, 44px) round;
  background: none;
  box-shadow: none;
}
#kc-narrative .kc-narrative-inner { padding: .6rem .5rem .5rem; }

/* contador: números arriba, sapos abajo en su orilla */
.sy-pond { position: relative; max-width: 30rem; margin: .4rem auto 0; padding: 0; }
.sy-frog-bank { position: relative; width: min(92vw, 26rem); margin: .6rem auto 0; aspect-ratio: 760 / 330; }
.sy-frog-bank-ground { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.sy-frog-bank .sy-pond-frogs { position: absolute; z-index: 1; left: 50%; bottom: 34%; top: auto; width: 46%; height: auto; translate: -50% 0; filter: none; }

/* itinerario: la serenata vive detrás de la lista, no debajo */
#kc-itinerary .sy-itinerary { min-height: min(84vw, 23rem); }
#kc-itinerary .sy-serenade { position: absolute; z-index: 0; left: 50%; bottom: -2.2rem; width: min(100%, 25rem); margin: 0; translate: -50% 0; opacity: .32; pointer-events: none; }
#kc-itinerary .sy-serenade::before { content: ""; position: absolute; inset: 40% -12% -6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(176, 210, 200, .5), transparent); z-index: -1; }
#kc-itinerary .kc-timeline { z-index: 1; }
#kc-itinerary .kc-tl-time, #kc-itinerary .kc-tl-label { text-shadow: 0 0 6px var(--sy-paper), 0 0 2px var(--sy-paper); }

/* vestimenta en pergamino */
#kc-dresscode .kc-dc-wrap.sy-parchment { max-width: 26rem; margin-inline: auto; padding: .3rem .4rem; }

/* regalos: una lluvia sutil por toda la sección, detrás del contenido */
#kc-gifts .sy-envelopes { height: clamp(11rem, 46vw, 13rem); -webkit-mask-image: none; mask-image: none; overflow: visible; }
#kc-gifts > .sy-envelope-rain { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#kc-gifts > .sy-envelope-rain img { position: absolute; top: -3rem; left: var(--x); width: var(--w); max-width: none; height: auto; opacity: 0; rotate: var(--r); }
#kc-gifts.is-visible > .sy-envelope-rain img { animation: sy-rain var(--t) linear var(--d) infinite; }
@keyframes sy-rain { 0% { translate: 0 0; rotate: var(--r); opacity: 0; } 8% { opacity: var(--o); } 50% { translate: .9rem calc(var(--fall, 40rem) * .5); rotate: calc(var(--r) * -1); } 92% { opacity: var(--o); } 100% { translate: -.4rem calc(var(--fall, 40rem) + 3rem); rotate: var(--r); opacity: 0; } }

/* ubicaciones: pergamino y un poco más de cuerpo */
#kc-event-info .sy-places { gap: 1.1rem; max-width: 31rem; grid-template-columns: 1fr; }
#kc-main #kc-event-info .sy-place.sy-parchment { grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: .3rem .4rem .3rem .2rem; }
#kc-main #kc-event-info .sy-place img { width: 7rem; height: 8.4rem; }
#kc-main #kc-event-info .sy-place .kc-card-title { font-size: 1.22rem; }
#kc-main #kc-event-info .sy-place .kc-card-time { font-size: .86rem; }
#kc-main #kc-event-info .sy-place .kc-card-desc { font-size: .98rem; }

/* mensaje secreto: el nenúfar flota libre, se hunde al tocarlo y vuelve cuando el mensaje se cierra */
#kc-secret .kc-section-inner { display: grid; justify-items: center; }
#kc-main #kc-secret .sy-lotus { display: grid; justify-items: center; gap: .35rem; min-height: 0; padding: .4rem; color: var(--sy-moss); background: none; border: 0; border-radius: 50%; cursor: pointer; transition: opacity .5s ease, scale .6s cubic-bezier(.5, 0, .7, .2), visibility 0s linear .6s; }
#kc-main #kc-secret .sy-lotus:hover { background: none; }
#kc-secret .sy-lotus .sy-secret-lily { width: 5.6rem; height: auto; margin: 0; animation: sy-lotus-bob 5s ease-in-out infinite; }
#kc-secret .sy-lotus-hint { font-family: var(--sy-font-caps); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; }
#kc-main #kc-secret .sy-lotus[aria-expanded="true"] { opacity: 0; scale: .6; visibility: hidden; pointer-events: none; }
#kc-main #kc-secret .sy-lotus[aria-expanded="false"] { transition: opacity .6s ease .1s, scale .7s cubic-bezier(.2, .8, .2, 1.2) .1s, visibility 0s; }
@keyframes sy-lotus-bob { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -7px; rotate: 3deg; } }
#kc-main #kc-secret .kc-secret-msg.sy-parchment { max-width: 26rem; margin: .2rem auto 0; padding: .4rem .6rem .5rem; text-align: center; }
#kc-main #kc-secret .kc-secret-msg h3 { font-family: var(--sy-font-script); font-size: 2.1rem; font-weight: 400; margin: 0 0 .3rem; }
#kc-secret .sy-secret-close { margin-top: .6rem; min-height: 40px; padding: .3rem 1rem; color: var(--sy-green); background: none; border: 1px solid rgba(94, 133, 80, .5); border-radius: 999px; font-family: var(--sy-font-text); font-size: .95rem; cursor: pointer; }

/* footer: un estanque nocturno chico; solo agua, luna y luciérnagas */
#kc-footer.sy-night.sy-garden-scene[data-garden-scene] {
  position: relative;
  display: grid;
  align-items: end;
  justify-items: center;
  min-height: 0;
  padding: 7.5rem 1.2rem 2.4rem;
  overflow: hidden;
  color: var(--sy-cream);
  background: linear-gradient(180deg, var(--sy-paper) 0, #C9D6C2 2.6rem, #415568 6rem, #1B2638 8rem) top / 100% 8rem no-repeat, #14222A;
}
#kc-footer.sy-night::after { opacity: .05; }
#kc-footer .sy-night-pond-art { position: absolute; left: 0; right: 0; top: 7.2rem; bottom: 0; z-index: 0; background: url("../../assets/footer/night-pond.webp?v=r7") center top / cover no-repeat; }
#kc-footer .sy-night-flies { position: absolute; left: 0; right: 0; top: 7.2rem; bottom: 0; width: 100%; height: calc(100% - 7.2rem); z-index: 1; pointer-events: none; }
#kc-footer .kc-footer-inner { position: relative; z-index: 2; gap: .2rem; padding-bottom: .4rem; }
#kc-footer .kc-footer-inner { display: grid; justify-items: center; max-width: 34rem; text-align: center; }
#kc-footer .kc-footer-dedication, #kc-footer .kc-footer-date { margin: 0; color: rgba(246, 241, 220, .92); font-family: var(--sy-font-text); font-size: .98rem; line-height: 1.5; text-shadow: 0 1px 8px rgba(10, 14, 26, .85); }
#kc-footer .kc-footer-brand { display: inline-flex; align-items: center; min-height: 44px; color: #E5D99D; font-family: var(--sy-font-caps); font-size: .68rem; letter-spacing: .22em; text-decoration: none; text-shadow: 0 1px 6px rgba(10, 14, 26, .85); }
#kc-footer .kc-footer-brand { margin-top: .4rem; gap: .45rem; padding: 0; color: #F7ECB8; font-size: .8rem; letter-spacing: .14em; white-space: nowrap; text-shadow: 0 0 10px rgba(10, 14, 26, .9), 0 1px 6px rgba(10, 14, 26, .85), 0 0 14px rgba(229, 217, 157, .25); transition: color .2s; }
#kc-footer .kc-footer-brand > span { text-decoration: underline; text-decoration-color: rgba(229, 217, 157, .65); text-decoration-thickness: 1px; text-underline-offset: .35em; }
#kc-footer .kc-footer-brand:hover, #kc-footer .kc-footer-brand:active { color: #FFF6CC; }
#kc-footer .kc-footer-brand:hover > span { text-decoration-color: #FFF6CC; }
#kc-footer .kc-footer-brand:focus-visible { outline: 2px solid #E5D99D; outline-offset: 3px; }
#kc-footer .kc-footer-brand__ig { width: 1.1rem; height: 1.1rem; flex: none; }
@media (min-width: 900px) {
  #kc-footer.sy-night.sy-garden-scene[data-garden-scene] { padding-top: 9rem; padding-bottom: 3rem; }
}

/* ── movimiento: finito y con verbo (brotar, enderezar, respirar); quieto en reduced motion ── */
@keyframes sy-firefly-breathe {
  0%, 100% { opacity: .75; scale: .9; }
  50% { opacity: 1; scale: 1.12; }
}
@media (prefers-reduced-motion: reduce) {
  #kc-secret .sy-lotus .sy-secret-lily { animation: none; }
  #kc-gifts > .sy-envelope-rain img { animation: none !important; opacity: var(--o); translate: 0 calc(var(--d) * 1.6rem); }
  #kc-dresscode .sy-dress-art, #kc-gifts .sy-envelope-main, #kc-capture .sy-camera, #kc-capture .sy-camera-flash { animation: none !important; }
  #kc-gifts .sy-envelope-rain img { animation: none !important; opacity: .85; translate: 0 calc(var(--d) * 1.4rem); }
  .sy-flora { transition: none !important; }
  .sy-garden-ready .sy-garden-scene:not(.garden-in-view) .sy-flora { opacity: 1; scale: 1; rotate: 0deg; }
  .sy-polaroid { transition: none; }
  .sy-polaroids { scroll-behavior: auto; }
}

/* ───────── Ring musical · nenúfar de flor-agua (portado de sy-sapo) ─────────
   core-logic.js maneja play/pause y data-kc-state; aquí solo vive el objeto. Sin marco: el nenúfar flota libre. */
#kc-audio-toggle.kc-audio-toggle {
  inset-inline-end: max(14px, env(safe-area-inset-right)); inset-block-end: max(14px, env(safe-area-inset-bottom));
  width: 62px; height: 62px; min-width: 62px; min-height: 62px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; box-shadow: none; cursor: pointer;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  -webkit-tap-highlight-color: transparent;
}
#kc-audio-toggle .kc-float-lotus {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); transition: filter 300ms ease, transform 300ms ease;
}
#kc-audio-toggle[data-kc-state="paused"] .kc-float-lotus { filter: saturate(.45) brightness(.85) drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); transform: scale(.94); }
#kc-audio-toggle.kc-audio-toggle:hover { transform: none; }
#kc-audio-toggle:focus-visible { outline: 2px solid var(--sy-green); outline-offset: 4px; }
#kc-audio-toggle:active { transform: scale(.95); }
.kc-float-legend {
  /* Encima del ring, alineada a la derecha: nunca tapa «Continuar» ni el submit. */
  position: fixed; z-index: 99; inset-inline-end: max(12px, env(safe-area-inset-right));
  inset-block-end: calc(max(14px, env(safe-area-inset-bottom)) + 74px); margin: 0; padding: .5rem .85rem .55rem;
  display: grid; gap: .1rem; text-align: right; pointer-events: none; opacity: 0; transform: translateY(8px);
  border-radius: 14px; color: #F3EAD2; font-family: "Fraunces", Georgia, serif;
  background: linear-gradient(160deg, rgba(39, 60, 92, .94), rgba(22, 30, 40, .94));
  box-shadow: 0 12px 26px -12px rgba(0, 0, 0, .7), 0 0 0 1px rgba(236, 201, 146, .4) inset;
}
.kc-float-legend::after {
  content: ""; position: absolute; right: 24px; bottom: -6px; width: 12px; height: 12px; rotate: 45deg;
  background: rgba(22, 30, 40, .94); box-shadow: 1px 1px 0 rgba(236, 201, 146, .4);
}
.kc-float-legend span:first-child { font: italic 500 .98rem / 1.2 "Fraunces", Georgia, serif; }
.kc-float-legend span:last-child { font-size: .74rem; letter-spacing: .06em; color: #ECC992; }
#kc-audio-toggle[hidden] + .kc-float-legend,
body.kc-mode-ticket .kc-float-legend, body.kc-mode-map .kc-float-legend, body.kc-capturing .kc-float-legend { display: none; }
#kc-audio-toggle[data-kc-state="playing"] + .kc-float-legend { animation: legend-in 6s ease both .6s; }
@keyframes legend-in { 0% { opacity: 0; transform: translateY(8px); } 9%, 82% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: no-preference) {
  #kc-audio-toggle[data-kc-state="playing"] .kc-float-lotus { animation: lotus-breathe 3.2s ease-in-out infinite; }
}
@keyframes lotus-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05) translateY(-1px); } }

/* ════════ SY01 · Azula & Luna: dos voces. El verde de la casa es Luna, el rosa es Azula ════════ */
:root {
  --sy-rosa: #A8405F;
  --sy-rosa-soft: #F2B6C4;
  --sy-rosa-mist: rgba(242, 182, 196, .5);
  --sy-amp: #9A7A35;
}
/* Gate: el nombre doble cabe en 390 px */
#kc-gate .kc-gate-name { font-size: clamp(2.7rem, 12.6vw, 4.8rem); padding-inline: 1rem; }
@media (min-aspect-ratio: 4/5) { #kc-gate .kc-gate-name { font-size: clamp(2.4rem, 5.6svh, 3.6rem); } }
#kc-gate .sy-amp { font-family: var(--sy-font-text); font-style: italic; font-size: .5em; color: #F2DE9C; vertical-align: .32em; }
/* Hero: Azula en rosa, Luna en verde, el & en oro entre las dos */
#kc-hero .kc-hero-title.sy-duo { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .2em; margin: .7rem 0 0; font-size: clamp(2.45rem, 11.4vw, 3.9rem); line-height: 1.04; }
#kc-hero .sy-duo-name--azula { color: var(--sy-rosa); }
#kc-hero .sy-duo-name--luna { color: var(--sy-green); }
#kc-hero .sy-duo .sy-amp { display: inline; margin: 0; font-family: var(--sy-font-script); font-style: normal; font-size: .82em; line-height: 1; color: var(--sy-amp); }
#kc-hero .sy-hero-halo { background: radial-gradient(closest-side, rgba(201, 218, 186, .85), var(--sy-rosa-mist) 58%, transparent 100%); }
.sy-date--pending .sy-date-soon { font-family: var(--sy-font-script); font-size: clamp(2.3rem, 10.5vw, 3rem); letter-spacing: 0; color: var(--sy-rosa); }
/* Countdown sin fecha: el estanque se queda, los números no mienten */
#kc-countdown .sy-countdown-soon { display: none; margin: -.2rem 0 1.2rem; color: var(--sy-green); font-family: var(--sy-font-text); font-size: 1.15rem; }
#kc-countdown .sy-countdown-soon em { margin-left: .18em; color: var(--sy-rosa); font-family: var(--sy-font-script); font-style: normal; font-size: 1.9em; }
#kc-countdown[data-kc-date="pending"] .sy-countdown-soon { display: block; }
#kc-countdown[data-kc-date="pending"] .kc-countdown-grid { display: none; }
/* la voz rosa en los acentos */
#kc-main .kc-section-title em { color: var(--sy-rosa); }
.sy-polaroid--rose .sy-polaroid-tape { background: linear-gradient(180deg, rgba(250, 218, 226, .94), rgba(238, 172, 190, .88)); rotate: 5deg; }
#kc-narrative .kc-narrative-firma, #kc-secret .kc-secret-firma { color: var(--sy-rosa); }
/* ring sin canción: quieto y tenue, no promete música */
#kc-audio-toggle[data-kc-audio="pending"] { opacity: .55; cursor: default; }
#kc-audio-toggle[data-kc-audio="pending"] .kc-float-lotus { animation: none !important; }

/* ───────── R3 · padrinos, fotos reales, firma KC – Universe ───────── */
/* padrinos: dos parejas, un respiro entre ellas */
#kc-protocol-social .kc-familia-column li.sy-pair-next { margin-top: .7rem; }
/* polaroids con fotos reales: formato instax (4:5), la foto completa, sin recorte extra */
.sy-polaroid--real .kc-memory-photo-wrap { aspect-ratio: 4 / 5; background: #EFE6D6; }
.sy-polaroid--real .kc-memory-photo { object-position: center; }
/* footer: sin el «Te esperamos» gigante; la firma es una estrella y su nombre, chiquitos */
#kc-footer .kc-footer__mark { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 .5rem; color: #E5D99D; font-family: var(--sy-font-caps); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(10, 14, 26, .9); }
#kc-footer .kc-footer__mark span:last-child { padding-left: .3em; }
#kc-footer .kc-footer__icon { position: relative; display: inline-block; width: 1.55rem; height: 1.55rem; }
#kc-footer .kc-footer__icon svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#kc-footer .sy-star-halo { opacity: .55; }
#kc-footer .sy-star-mini { transform-box: fill-box; transform-origin: center; }
@keyframes sy-star-twinkle { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes sy-star-mini { 0%, 100% { opacity: .15; } 45% { opacity: .95; } }
@media (prefers-reduced-motion: no-preference) {
  #kc-footer .kc-footer__icon svg { animation: sy-star-twinkle 4.2s ease-in-out infinite; }
  #kc-footer .sy-star-mini { animation: sy-star-mini 4.2s ease-in-out .9s infinite; }
}
/* «Hecho con [nenúfar] para…»: el nenúfar del ring, tamaño de letra */
#kc-footer .sy-made-lily { display: inline-block; width: 1.35em; height: 1.35em; margin: 0 .12em; vertical-align: -.36em; }
/* R4 · el cielo vuelve: el texto baja al agua y arriba quedan el degradado, las nubes, las montañas y unas estrellas */
#kc-footer.sy-night.sy-garden-scene[data-garden-scene] { padding-top: calc(7.2rem + min(26vw, 24rem)); }
#kc-footer .sy-night-stars { position: absolute; left: 0; right: 0; top: 4.6rem; height: calc(2.6rem + min(9vw, 8rem)); z-index: 1; pointer-events: none; }
#kc-footer .sy-night-stars::before,
#kc-footer .sy-night-stars::after { content: ""; position: absolute; inset: 0; }
#kc-footer .sy-night-stars::before {
  background:
    radial-gradient(1.4px 1.4px at 12% 38%, #FFF8DA 60%, transparent 100%),
    radial-gradient(1.1px 1.1px at 27% 70%, #FFF3C4 60%, transparent 100%),
    radial-gradient(1.6px 1.6px at 46% 24%, #FFFBEA 60%, transparent 100%),
    radial-gradient(1.1px 1.1px at 63% 58%, #F7E6A0 60%, transparent 100%),
    radial-gradient(1.3px 1.3px at 81% 30%, #FFF8DA 60%, transparent 100%);
}
#kc-footer .sy-night-stars::after {
  background:
    radial-gradient(1px 1px at 6% 72%, #FFF3C4 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 37% 48%, #FFFBEA 60%, transparent 100%),
    radial-gradient(1px 1px at 55% 82%, #F7E6A0 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 16%, #FFF8DA 60%, transparent 100%),
    radial-gradient(1px 1px at 93% 62%, #FFF3C4 60%, transparent 100%);
  opacity: .7;
}
@keyframes sy-sky-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  #kc-footer .sy-night-stars::before { animation: sy-sky-twinkle 5.2s ease-in-out infinite; }
  #kc-footer .sy-night-stars::after { animation: sy-sky-twinkle 6.6s ease-in-out -3.1s infinite; }
}
/* R4 · móvil: sin destello azul al tocar (Android/iOS) y sin espera de doble toque; los anillos :focus-visible se quedan */
html { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, [role="button"], input, select, textarea { touch-action: manipulation; }
/* R4 · capa propia para el Hero: sus loops infinitos (mariposa, corona) ya no arrastran una capa de 390×8054 px
   al fondo de la página (59.9 → 37.4 Mpx a DPR3, medido con .kc/qa/syg-layers.cjs). Nada fixed vive dentro del Hero. */
#kc-hero { will-change: transform; }
/* R4 · viewport-fit=cover: el pase y el mapa sueltos no empiezan bajo la isla/notch ni terminan bajo la barra de inicio */
.kc-standalone-overlay {
  padding-top: max(1.5rem, env(safe-area-inset-top)); padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
  padding-left: max(1.5rem, env(safe-area-inset-left)); padding-right: max(1.5rem, env(safe-area-inset-right));
}