/* Azula Calloway XV · theme (PIEL «Lila & Plata», V3-03 «tapiz lila»)
   Tesis: una carta de pergamino sellada en cera lila, abierta sobre terciopelo. Su Canva da el orden y los objetos
   (foto con nombre en script, calendario con estrella, tarjetas sobre glitter con ramitas, ícono de vestimenta);
   KC traduce el glitter a satín, el oro a plata y la foto a un camafeo. Lo vaquero queda en un susurro:
   la silueta con sombrero, la estrella de sheriff del ring y la vaquera del footer.
   V3-03: como su Canva, la página va tapizada de glitter lila con brillos; el blanco ya no es fondo. */

:root {
  /* Banda piteada (rombos cosidos en hilo de plata), tile 48×24 */
  --br-piteado: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' fill='none' stroke='%23A9AEB8' stroke-linecap='round'%3E%3Cpath d='M0 3h48M0 21h48' stroke-width='1.3' stroke-dasharray='3 3'/%3E%3Cpath d='M24 6l9 6-9 6-9-6z' stroke-width='1.4'/%3E%3Cpath d='M24 9.5l3.6 2.5-3.6 2.5-3.6-2.5z' stroke-width='1.1'/%3E%3Cpath d='M0 12l4-3 4 3-4 3zM40 12l4-3 4 3-4 3z' stroke-width='1.1'/%3E%3C/svg%3E");
  /* Ramita de hojas de plata para las esquinas de las tarjetas (eco de las ramitas doradas del Canva); -r es su espejo */
  --br-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' fill='none' stroke='%239298A3' stroke-width='1.4' stroke-linecap='round'%3E%3Cg%3E%3Cpath d='M6 6c14 4 30 16 40 34 4 7 6 14 7 22'/%3E%3Cpath d='M16 9c3-6 10-7 13-3-4 4-9 5-13 3zM27 16c5-5 12-4 14 1-5 3-10 3-14-1zM36 26c6-3 12-1 13 4-6 2-10 1-13-4zM43 38c6-1 11 2 11 7-6 1-10-2-11-7z' fill='%23E6E8EC'/%3E%3Cpath d='M12 12c-6 2-8 8-5 11 4-3 5-7 5-11zM22 21c-6 3-7 9-3 12 3-4 4-8 3-12zM32 31c-5 4-5 10-1 12 2-4 2-8 1-12z' fill='%23E6E8EC'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23C9CDD5'/%3E%3C/g%3E%3C/svg%3E");
  --br-sprig-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' fill='none' stroke='%239298A3' stroke-width='1.4' stroke-linecap='round'%3E%3Cg transform='matrix(-1 0 0 1 72 0)'%3E%3Cpath d='M6 6c14 4 30 16 40 34 4 7 6 14 7 22'/%3E%3Cpath d='M16 9c3-6 10-7 13-3-4 4-9 5-13 3zM27 16c5-5 12-4 14 1-5 3-10 3-14-1zM36 26c6-3 12-1 13 4-6 2-10 1-13-4zM43 38c6-1 11 2 11 7-6 1-10-2-11-7z' fill='%23E6E8EC'/%3E%3Cpath d='M12 12c-6 2-8 8-5 11 4-3 5-7 5-11zM22 21c-6 3-7 9-3 12 3-4 4-8 3-12zM32 31c-5 4-5 10-1 12 2-4 2-8 1-12z' fill='%23E6E8EC'/%3E%3Ccircle cx='6' cy='6' r='2.2' fill='%23C9CDD5'/%3E%3C/g%3E%3C/svg%3E");
  --br-satin: url("../../assets/page/satin.webp");
  --br-glitter: url("../../assets/page/glitter.webp");
  --br-card-paper: url("../../assets/page/card-paper.webp");
  /* destello de 4 puntas para los brillitos que titilan sobre el tapiz */
  --br-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='5' fill='url(%23g)'/%3E%3Cpath d='M10 0Q10.9 9.1 20 10Q10.9 10.9 10 20Q9.1 10.9 0 10Q9.1 9.1 10 0z' fill='%23fff'/%3E%3C/svg%3E");
  --br-velvet-img: url("../../assets/gate/gate-bg.webp");
  --br-wax: #5B2E91;
}

/* ── Tipografía base ───────────────────────────────────── */
body { font-weight: 500; }
h1, h2, h3 { font-family: var(--kc-font-display); font-weight: 500; line-height: 1.15; color: var(--kc-ink); }
.kc-section, .kc-hero, .kc-gate, .kc-footer { text-align: center; }
.kc-section { position: relative; }
.kc-eyebrow {
  font-size: var(--kc-text-eyebrow);
  letter-spacing: var(--kc-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--kc-accent);
}
.kc-title {
  font-family: var(--br-font-script);
  font-weight: 400;
  font-size: var(--kc-text-title);
  line-height: 1.15;
  color: var(--kc-accent);
}
.kc-body { color: var(--kc-ink); }

/* Tapiz: glitter lila en todo main menos los dos actos de terciopelo (hero y vestimenta).
   Sobre el glitter la tinta se vuelve clara; dentro de las tarjetas vuelve a ciruela (ver .br-calendar…). */
#dedicatoria, #counter, #familia, #historia, #ubicaciones, #regalos, #rsvp, #captura {
  --kc-ink: var(--br-on-velvet);
  --kc-ink-muted: #EDE3F8;
  --kc-accent: #FFFFFF;
  background: #7553A6 var(--br-glitter) 0 0 / 320px repeat;
  overflow-x: clip;
  color: var(--kc-ink);
  text-shadow: 0 1px 2px rgba(44, 25, 64, 0.85), 0 0 6px rgba(44, 25, 64, 0.7), 0 0 18px rgba(44, 25, 64, 0.5);
}
#dedicatoria .kc-eyebrow, #counter .kc-eyebrow, #familia .kc-eyebrow, #historia .kc-eyebrow,
#ubicaciones .kc-eyebrow, #regalos .kc-eyebrow, #rsvp .kc-eyebrow, #captura .kc-eyebrow {
  /* la versalita chica no compite con el glitter: va en una cinta ciruela con filete de plata */
  width: fit-content;
  margin-inline: auto;
  padding: 0.3em 0.6em 0.3em 0.95em;
  border-radius: var(--kc-radius-pill);
  background: rgba(44, 25, 64, 0.72);
  box-shadow: 0 0 0 1px rgba(201, 205, 213, 0.45);
  color: var(--br-plata-100);
  text-shadow: none;
}
/* Brillitos: una capa de destellos por sección que titila desfasada (solo opacity) */
#dedicatoria::after, #counter::after, #familia::after, #historia::after,
#ubicaciones::after, #regalos::after, #rsvp::after, #captura::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    var(--br-spark) 7% 9% / 16px no-repeat, var(--br-spark) 91% 6% / 11px no-repeat,
    var(--br-spark) 84% 31% / 18px no-repeat, var(--br-spark) 12% 46% / 10px no-repeat,
    var(--br-spark) 94% 63% / 13px no-repeat, var(--br-spark) 5% 78% / 17px no-repeat,
    var(--br-spark) 78% 92% / 12px no-repeat, var(--br-spark) 30% 97% / 9px no-repeat;
  pointer-events: none;
  animation: br-twinkle 3.8s ease-in-out infinite alternate;
}
#counter::after, #historia::after, #regalos::after, #captura::after { animation-duration: 4.6s; animation-delay: -2.1s; background-position: 88% 8%, 9% 14%, 15% 33%, 90% 47%, 6% 62%, 93% 80%, 20% 91%, 64% 97%; }
#familia::after, #rsvp::after { animation-duration: 5.2s; animation-delay: -1.2s; }
@keyframes br-twinkle { 0% { opacity: 0.15; } 55% { opacity: 1; } 100% { opacity: 0.35; } }
.kc-section > .kc-container { position: relative; z-index: 1; }
/* velo ciruela detrás de los textos largos: el glitter brilla alrededor y la lectura queda limpia */
#dedicatoria .kc-container::before, #familia .kc-container::before, #regalos .kc-container::before, #captura .kc-container::before {
  content: "";
  position: absolute;
  inset: -8% 0;
  z-index: -1;
  background: radial-gradient(farthest-side, rgba(44, 25, 64, 0.74), rgba(44, 25, 64, 0.55) 70%, transparent);
  pointer-events: none;
}
/* V3-05: la dedicatoria lleva la frase de invitación; velo más hondo para que el glitter no se coma la plata */
#dedicatoria .kc-container::before { background: radial-gradient(farthest-side, rgba(44, 25, 64, 0.86), rgba(44, 25, 64, 0.7) 70%, transparent); }

/* Costuras: la banda piteada solo en los cambios de acto */
#vestimenta::before,
#vestimenta::after,
.kc-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 24px;
  background: var(--br-piteado) center / 48px 24px repeat-x;
  pointer-events: none;
  z-index: 2;
}
#vestimenta::after { top: auto; bottom: -12px; }

/* Rosas lila claro (pintadas en .kc/roses.mjs): franja en la costura Hero→Dedicatoria, como las flores bajo la foto del Canva */
#dedicatoria { --br-roses-h: clamp(5.5rem, 26vw, 8.5rem); padding-top: calc(var(--kc-section-pad) + var(--br-roses-h) * 0.45); }
#dedicatoria::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--br-roses-h) * -0.5);
  z-index: 2;
  height: var(--br-roses-h);
  background: url("../../assets/page/roses-band.webp") 50% 100% / auto 100% repeat-x;
  filter: drop-shadow(0 8px 10px rgba(30, 16, 41, 0.45));
  pointer-events: none;
}
/* racimo en la esquina: calendario a la izquierda, lugares a la derecha (espejo) */
.br-calendar::after,
.kc-location::after {
  content: "";
  position: absolute;
  top: -1.9rem;
  left: -0.9rem;
  z-index: 2;
  width: 7.5rem;
  height: 7.5rem;
  background: url("../../assets/page/roses-corner.webp") 0 0 / contain no-repeat;
  pointer-events: none;
}
.kc-location::after { left: auto; right: -0.9rem; scale: -1 1; }

.br-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--kc-space-3);
  fill: none;
  stroke: var(--br-plata-700);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tarjeta KC (calendario, lugares, RSVP): papel acuarela lila (la card rosa del Canva) en bisel de plata grueso,
   filete interior y tinta ciruela otra vez */
.br-calendar,
.kc-location,
.kc-rsvp-form {
  --kc-ink: var(--br-plum);
  --kc-ink-muted: var(--br-plum-soft);
  --kc-accent: var(--br-lila-700);
  position: relative;
  isolation: isolate;
  border: 8px solid transparent;
  background: var(--br-card-paper) center / cover padding-box, var(--br-foil) border-box;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 3px 14px rgba(63, 38, 86, 0.28),
    0 0 0 1px var(--br-plata-700),
    0 26px 44px -22px rgba(30, 16, 41, 0.75);
  color: var(--kc-ink);
  text-shadow: none;
}
.br-calendar::before,
.kc-location::before,
.kc-rsvp-form::before {
  content: "";
  position: absolute;
  inset: 6px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 0 1px rgba(107, 71, 150, 0.25);
  pointer-events: none;
}
.kc-rsvp-form::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: -1;
  background: var(--br-sprig) left top / 60px 60px no-repeat, var(--br-sprig-r) right top / 60px 60px no-repeat;
  pointer-events: none;
}

/* ── Gate: carta sellada sobre terciopelo ──────────────── */
.kc-gate {
  padding: max(var(--kc-space-5), env(safe-area-inset-top)) var(--kc-space-4) max(var(--kc-space-5), env(safe-area-inset-bottom));
  background: var(--br-velvet-deep) var(--br-velvet-img) center / cover no-repeat;
  color: var(--br-on-velvet);
}
/* la revelación la hace el despixelado (gate.mjs), no el fundido del core */
.kc-gate[data-gate-state="opening"] { opacity: 1; transition: none; }
.kc-gate.is-pixelating { background: transparent; }
.br-gate__frame {
  position: absolute;
  inset: 10px;
  border: 1px solid var(--br-plata-300);
  opacity: 0.55;
}
.br-gate__frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--br-plata-500); }
.br-gate__pixels {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.kc-gate .kc-eyebrow { margin: 0; color: var(--br-plata-300); }
.kc-gate__body { gap: var(--kc-space-1); width: 100%; }
.kc-gate__name {
  position: relative;
  z-index: 2;
  font-family: var(--br-font-script);
  font-size: clamp(2.6rem, 1.8rem + 5.6vw, 4.2rem);
  line-height: 1.1;
  color: var(--br-on-velvet);
  text-shadow: 0 2px 18px rgba(20, 10, 30, 0.55);
}
.kc-gate__date { font-size: var(--kc-text-eyebrow); letter-spacing: 0.22em; color: var(--br-plata-300); }
.br-gate__hint { margin-top: var(--kc-space-2); font-style: italic; font-weight: 400; font-size: 1.1rem; color: var(--br-plata-100); }

/* Sobre: sprites de la vaquera en la caja del grupo (719 × 751 del plate original) */
.br-envelope {
  --env-w: min(88vw, 23rem, 46svh);
  position: relative;
  width: var(--env-w);
  aspect-ratio: 719 / 751;
  margin-top: calc(var(--env-w) * -0.3);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.br-envelope__shake { position: absolute; inset: 0; display: block; filter: drop-shadow(0 26px 30px rgba(10, 4, 18, 0.55)); }
.br-env { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.br-env--in { left: 0; top: 34.75%; width: 100%; height: 65.11%; z-index: 1; }
.br-env--flap-in { left: 0.417%; top: 0; width: 99.17%; height: 36.88%; z-index: 2; transform: scaleY(0); transform-origin: bottom; }
.br-letter { left: 4.59%; top: 36.88%; width: 91.1%; height: 60.85%; z-index: 3; container-type: inline-size; }
.br-letter img { position: absolute; inset: 0; width: 100%; height: 100%; }
.br-env--pocket { left: 0; top: 34.89%; width: 100%; height: 65.11%; z-index: 4; }
.br-env--flap-out { left: 0.417%; top: 34.75%; width: 99.58%; height: 41.01%; z-index: 5; transform-origin: top; }
.br-seal { left: 36.44%; top: 55.26%; width: 28.37%; height: 28.23%; z-index: 6; }
.br-seal--top, .br-seal--bot { z-index: 7; opacity: 0; }
.br-seal--top { transform-origin: 50% -68.4%; }
.kc-gate.is-held .br-seal:not(.br-seal--top):not(.br-seal--bot) { animation: br-seal-breathe 2.6s ease-in-out infinite; }
@keyframes br-seal-breathe { 50% { scale: 1.045; } }
.br-envelope:focus-visible { outline: none; }
.br-envelope:focus-visible .br-seal { outline: 2px solid var(--br-plata-100); outline-offset: 4px; border-radius: 50%; }
.br-crumb {
  position: absolute;
  z-index: 8;
  width: 2.2%;
  height: 1.4%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 32% 28%, #C7B0E3 0 20%, var(--br-wax) 58% 100%);
  box-shadow: 0 1px 2px rgba(58, 36, 87, 0.3);
  opacity: 0;
}
.br-crumb:nth-of-type(1) { left: 45%; top: 79%; }
.br-crumb:nth-of-type(2) { left: 48.5%; top: 80.5%; }
.br-crumb:nth-of-type(3) { left: 51.5%; top: 79.6%; }
.br-crumb:nth-of-type(4) { left: 54.5%; top: 80.2%; }
.br-crumb:nth-of-type(5) { left: 42%; top: 72%; width: 1.6%; height: 1%; }
/* texto de la carta: se lee cuando sube */
.br-letter > span {
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  width: 84%;
  line-height: 1.05;
  white-space: nowrap;
}
.br-letter__xv { top: 26%; font-size: 4.4cqw; letter-spacing: 0.36em; text-transform: uppercase; color: var(--br-plum-soft); }
.br-letter__name { top: 51%; font-family: var(--br-font-script); font-size: 12.5cqw; color: var(--br-lila-700); }
.br-letter__date { top: 75%; font-size: 3.8cqw; letter-spacing: 0.24em; color: var(--br-plum); }

/* ── Hero: camafeo de plata sobre terciopelo ───────────── */
.kc-hero {
  position: relative;
  /* el aviso de música vive abajo a la derecha: la fecha queda por encima */
  padding-block: max(var(--kc-space-7), env(safe-area-inset-top)) calc(var(--kc-ring-size) + 7.5rem);
  background:
    radial-gradient(60% 38% at 50% 34%, rgba(183, 154, 217, 0.38) 0%, transparent 72%),
    var(--br-velvet-deep) var(--br-velvet-img) center / cover no-repeat;
  color: var(--br-on-velvet);
  overflow: hidden;
}
.kc-hero .kc-container { position: relative; z-index: 1; gap: var(--kc-space-2); }
.br-cameo { position: relative; display: grid; justify-items: center; gap: var(--kc-space-2); width: min(62vw, 16rem, 34svh); margin-bottom: var(--kc-space-4); }
/* brillitos alrededor del camafeo */
.br-cameo::after {
  content: "";
  position: absolute;
  inset: -12% -22%;
  background:
    var(--br-spark) 4% 22% / 15px no-repeat, var(--br-spark) 96% 14% / 19px no-repeat,
    var(--br-spark) 0 64% / 10px no-repeat, var(--br-spark) 100% 58% / 12px no-repeat,
    var(--br-spark) 12% 92% / 13px no-repeat, var(--br-spark) 88% 88% / 9px no-repeat;
  pointer-events: none;
  animation: br-twinkle 3.4s ease-in-out infinite alternate;
}
.br-cameo__ornament { width: 72%; height: auto; fill: none; stroke: var(--br-plata-300); stroke-width: 1.4; stroke-linecap: round; }
.br-cameo__ornament .is-star { fill: var(--br-plata-100); stroke: var(--br-plata-500); }
.br-cameo__window {
  width: 100%;
  max-width: none;
  border: 7px solid transparent;
  border-radius: 50%;
  background:
    radial-gradient(70% 60% at 50% 36%, #FBF6FE 0%, #E6D8F3 46%, #BFA2DE 100%) padding-box,
    var(--br-foil) border-box;
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.55),
    inset 0 -24px 40px -10px rgba(63, 38, 86, 0.25),
    0 0 0 5px rgba(44, 25, 64, 0.65),
    0 0 0 6px var(--br-plata-500),
    0 30px 50px -20px rgba(10, 4, 18, 0.7);
}
.kc-hero__photo.br-cameo__window img { object-position: 50% 100%; }
.kc-hero h1 {
  font-family: var(--br-font-script);
  font-weight: 400;
  /* una sola línea, como el nombre del gate; el tope en vw la sostiene hasta 320 px */
  font-size: min(clamp(2.6rem, 1.8rem + 5.6vw, 4.2rem), 11.6vw);
  line-height: 1.1;
  white-space: nowrap;
  color: var(--br-on-velvet);
  text-shadow: 0 3px 18px rgba(10, 4, 18, 0.6);
}
.br-hero__xv {
  margin-bottom: var(--kc-space-3);
  font-family: var(--br-font-script);
  font-size: clamp(2.2rem, 1.9rem + 1.6vw, 2.8rem);
  line-height: 1.1;
  word-spacing: 0.14em;
  color: var(--br-plata-100);
  text-shadow: 0 2px 14px rgba(10, 4, 18, 0.6);
}
.kc-hero__date { margin-top: var(--kc-space-3); font-size: var(--kc-text-eyebrow); letter-spacing: 0.22em; color: var(--br-plata-100); }
.kc-hero__place { font-style: italic; font-weight: 400; color: var(--br-plata-300); }
.kc-hero h1:focus { outline: none; }
/* espera del despixelado (theme.mjs quita la clase al revelar) */
.br-hero-wait #hero .br-cameo > *,
.br-hero-wait #hero .br-cameo::after,
.br-hero-wait #hero .kc-container > :not(.br-cameo) { opacity: 0; }

/* ── Dedicatoria: texto entre filigranas ───────────────── */
.br-flourish { display: block; width: min(15rem, 70%); height: auto; margin: 0 auto var(--kc-space-5); fill: none; stroke: var(--br-plata-100); stroke-width: 1.3; stroke-linecap: round; }
.br-flourish .is-star { fill: var(--br-lila-300); stroke: var(--br-lila-500); }
.br-flourish--end { margin: var(--kc-space-5) auto 0; transform: scaleY(-1); }
.kc-dedication {
  max-width: 26rem;
  margin-inline: auto;
  white-space: pre-line;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 1.2rem + 0.8vw, 1.65rem);
  line-height: 1.6;
  color: var(--kc-ink);
}
/* La invitación: placa ciruela con canto de plata y colas de cinta; la frase en lila→plata se escribe sola,
   luego le pasa un brillo lento y el halo lila respira. Placa y frase van separadas: el clip de la letra no recorta la placa. */
.br-call {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: min(100%, 30rem);
  margin: var(--kc-space-6) auto 0;
  padding: 0.85rem clamp(0.9rem, 3vw, 1.6rem) 0.95rem;
  border: 1px solid var(--br-plata-300);
  border-radius: 2px;
  background: linear-gradient(180deg, #4A2D66 0%, var(--br-plum) 45%, #2C1940 100%);
  box-shadow: inset 0 0 0 4px rgba(44, 25, 64, 0.9), inset 0 0 0 5px rgba(201, 205, 213, 0.5), 0 14px 30px -12px rgba(10, 4, 18, 0.75);
}
/* colas de cinta en cola de golondrina, detrás de la placa */
.br-call::before,
.br-call::after {
  content: "";
  position: absolute;
  top: 22%;
  z-index: -1;
  width: 1.5rem;
  height: 56%;
  background: linear-gradient(180deg, #3A2152, #24142F);
  border-block: 1px solid rgba(201, 205, 213, 0.55);
}
.br-call::before { left: -1.1rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 38% 50%); }
.br-call::after { right: -1.1rem; clip-path: polygon(0 0, 100% 0, 62% 50%, 100% 100%, 0 100%); }
.br-call__star {
  position: absolute;
  top: 50%;
  left: -0.55rem;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: -0.55rem;
  fill: #EBDDFB;
  filter: drop-shadow(0 0 5px rgba(201, 174, 226, 0.9));
}
.br-call__star--end { left: auto; right: -0.55rem; }
.br-call[data-reveal] { transform: scale(0.96); }
.br-call[data-reveal].is-revealed { transform: none; }
.br-call.is-revealed .br-call__star { animation: br-call-twinkle 3.2s ease-in-out 2s infinite alternate; }
.br-call.is-revealed .br-call__star--end { animation-delay: 3.1s; }
@keyframes br-call-twinkle { from { opacity: 0.55; scale: 0.85; } to { opacity: 1; scale: 1.1; } }
.br-dedication__call {
  font-family: var(--br-font-script);
  font-size: clamp(1.8rem, 1.3rem + 2.8vw, 2.8rem);
  line-height: 1.2;
  color: #EBDDFB;
  background: linear-gradient(105deg, #C9AEE2 0%, #EBDDFB 20%, #FFFFFF 32%, #D9C6F2 46%, #E6E8EC 62%, #F5EEFF 78%, #C9AEE2 100%) 0 0 / 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* halo por filter: un text-shadow (el tapiz lo hereda) se ve a través del relleno transparente */
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(201, 174, 226, 0.45));
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.8s cubic-bezier(.45, .05, .25, 1) 0.45s;
}
.br-dedication__call span { display: block; font-size: 1.2em; }
.br-call.is-revealed .br-dedication__call {
  clip-path: inset(-0.3em -0.6em);
  animation: br-foil-sweep 6.5s ease-in-out 2.4s infinite, br-call-glow 3.25s ease-in-out 2.4s infinite alternate;
}
@keyframes br-foil-sweep { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 0; } }
@keyframes br-call-glow { from { filter: drop-shadow(0 0 6px rgba(201, 174, 226, 0.35)); } to { filter: drop-shadow(0 0 14px rgba(227, 210, 247, 0.8)); } }

/* ── Counter: Aparta la fecha + calendario + medallones ─── */
.br-save__title { font-size: clamp(3rem, 2.4rem + 3vw, 4rem); margin-bottom: var(--kc-space-6); }
.br-calendar {
  max-width: 22rem;
  margin: 0 auto var(--kc-space-7);
  padding: var(--kc-space-6) var(--kc-space-5) var(--kc-space-6);
}
.br-calendar__month { font-family: var(--br-font-script); font-size: clamp(3.4rem, 2.8rem + 3vw, 4.2rem); line-height: 1; color: var(--kc-accent); }
.br-calendar__year { margin-top: var(--kc-space-1); letter-spacing: 0.5em; font-size: 1rem; color: var(--kc-ink-muted); }
.br-calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  row-gap: var(--kc-space-2);
  margin-top: var(--kc-space-5);
  font-variant-numeric: tabular-nums;
}
.br-calendar__grid i { padding-bottom: var(--kc-space-2); border-bottom: 1px solid var(--br-plata-300); font-style: normal; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kc-ink-muted); }
.br-calendar__grid span { position: relative; display: grid; place-items: center; min-height: 2.1rem; font-size: 1.1rem; color: var(--kc-ink); }
.br-calendar__grid .is-day b { position: relative; z-index: 1; font-weight: 500; color: var(--br-plum); }
.br-calendar__star {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.2rem;
  height: 3.2rem;
  translate: -50% -54%;
  fill: rgba(201, 174, 226, 0.45);
  stroke: var(--br-plata-500);
  stroke-width: 4;
  stroke-linejoin: round;
}
.br-calendar__star path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s var(--kc-ease) 0.5s; }
.br-calendar.is-revealed .br-calendar__star path { stroke-dashoffset: 0; }

.kc-countdown { max-width: 22rem; margin: 0 auto; gap: var(--kc-space-3); }
.kc-countdown__unit {
  align-content: center;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 50%;
  --kc-ink-muted: var(--br-plum-soft);
  border-width: 3px;
  background: var(--br-card-paper) center / 300% padding-box, var(--br-foil) border-box;
  box-shadow: inset 0 2px 8px rgba(63, 38, 86, 0.3), 0 0 0 1px var(--br-plata-700), 0 14px 22px -12px rgba(30, 16, 41, 0.7);
  text-shadow: none;
}
.kc-countdown__value { font-size: clamp(1.5rem, 1.3rem + 1vw, 1.9rem); line-height: 1; color: var(--br-plum); }
.kc-countdown__label { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kc-ink-muted); }
.kc-countdown__status { margin-top: var(--kc-space-4); font-style: italic; font-weight: 400; color: var(--kc-ink-muted); }
.br-save-date {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-space-2);
  min-height: 48px;
  margin-top: var(--kc-space-6);
  padding: 0 var(--kc-space-5);
  border-radius: var(--kc-radius-pill);
  background: linear-gradient(180deg, #55357A 0%, var(--br-plum) 100%);
  box-shadow: 0 0 0 2px var(--br-plata-300), 0 0 0 3px var(--br-plata-700), 0 14px 24px -12px rgba(20, 10, 30, 0.75);
  text-shadow: none;
  color: #FFFFFF;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 200ms var(--kc-ease);
}
.br-save-date svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.br-save-date:active { transform: scale(0.97); }
.br-save-date:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 6px; }

/* ── Familia: todos los nombres con el mismo tamaño y letra ── */
#familia .kc-title {
  max-width: 22rem;
  margin-inline: auto;
  font-family: var(--kc-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 1.25rem + 0.8vw, 1.7rem);
  line-height: 1.4;
  color: var(--kc-ink);
}
.kc-family { gap: var(--kc-space-6); }
.kc-family__group { gap: var(--kc-space-2); }
.kc-family__group h3 { font-size: var(--kc-text-eyebrow); letter-spacing: var(--kc-tracking-eyebrow); text-transform: uppercase; color: var(--kc-accent); }
.kc-family__group li { font-family: var(--br-font-script); font-size: clamp(1.6rem, 1.4rem + 1.2vw, 2.1rem); line-height: 1.35; text-wrap: balance; color: var(--kc-ink); }
.kc-family__group + .kc-family__group::before {
  content: "";
  justify-self: center;
  width: 4.5rem;
  height: 9px;
  margin-bottom: var(--kc-space-3);
  background: radial-gradient(circle, #FFFFFF 0 3px, transparent 3.5px) center / 9px 9px no-repeat, linear-gradient(var(--br-plata-100), var(--br-plata-100)) center / 100% 1px no-repeat;
}

/* ── Mi historia: carril horizontal de polaroids colgadas de un hilo de plata ──
   El core arma un card-stack (photos.mjs); la piel lo vuelve un camino que se desliza a la derecha.
   Se ignoran --kc-stack-i / .is-front del core; su swipe solo movería la cuenta, que va oculta. */
.kc-photo-stack-host { position: relative; }
.kc-photo-stack {
  --br-polaroid-w: min(68vw, 17rem);
  display: flex;
  align-items: flex-start;
  justify-content: safe center;
  gap: clamp(1.25rem, 5vw, 2.25rem);
  max-width: none;
  margin-inline: calc(50% - 50vw);
  padding: 2.6rem calc(50vw - var(--br-polaroid-w) / 2) 2.4rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* el hilo: se mueve con el scroll (local) y cruza todo el carril */
  background: linear-gradient(180deg, transparent 1.15rem, rgba(230, 232, 236, 0.85) 1.15rem, rgba(169, 174, 184, 0.85) calc(1.15rem + 2px), transparent calc(1.15rem + 2px)) 0 0 / 100% 100% local no-repeat;
}
.kc-photo-stack::-webkit-scrollbar { display: none; }
.kc-photo-stack:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -6px; }
.kc-photo-stack__card {
  --br-tilt: -3deg;
  grid-area: auto;
  z-index: auto;
  flex: 0 0 var(--br-polaroid-w);
  overflow: visible;
  aspect-ratio: auto;
  padding: 0.85rem 0.85rem 3.4rem;
  background: #F1E9F9 var(--br-card-paper) center / 260%;
  background-blend-mode: soft-light;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6), 0 2px 3px rgba(30, 16, 41, 0.25), 0 22px 30px -16px rgba(30, 16, 41, 0.75);
  transform: rotate(var(--br-tilt));
  transform-origin: 50% -1.4rem;
  scroll-snap-align: center;
  text-shadow: none;
}
.kc-photo-stack__card:nth-child(even) { --br-tilt: 2.6deg; }
.kc-photo-stack__card:nth-child(3n) { --br-tilt: -1.6deg; }
.kc-photo-stack__card img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  box-shadow: inset 0 0 0 1px rgba(63, 38, 86, 0.2);
  filter: drop-shadow(0 1px 2px rgba(63, 38, 86, 0.25));
}
/* pinza de plata: el muelle sobre el hilo y las dos patas que muerden el borde */
.kc-photo-stack__card::before {
  content: "";
  position: absolute;
  top: -1.75rem;
  left: 50%;
  z-index: 2;
  width: 0.9rem;
  height: 2.6rem;
  translate: -50% 0;
  border-radius: 0.2rem;
  background:
    radial-gradient(circle at 50% 0.85rem, #6B4796 0 0.16rem, transparent 0.18rem),
    radial-gradient(circle at 50% 0.85rem, transparent 0.3rem, rgba(63, 38, 86, 0.35) 0.31rem 0.34rem, transparent 0.35rem),
    var(--br-foil);
  box-shadow: 0 2px 4px rgba(30, 16, 41, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.kc-photo-stack__next,
.kc-photo-stack__count { display: none; }
.kc-photo-stack-host.is-revealed .kc-photo-stack__card { animation: br-swing 2.6s cubic-bezier(.3, .6, .4, 1) both; }
.kc-photo-stack-host.is-revealed .kc-photo-stack__card:nth-child(2) { animation-delay: 140ms; }
.kc-photo-stack-host.is-revealed .kc-photo-stack__card:nth-child(3) { animation-delay: 280ms; }
/* pista de que el camino sigue */
.kc-photo-stack-host::after {
  content: "Desliza  →";
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.3em 0.75em 0.3em 1em;
  border-radius: var(--kc-radius-pill);
  background: rgba(44, 25, 64, 0.72);
  box-shadow: 0 0 0 1px rgba(201, 205, 213, 0.45);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: pre;
  color: var(--br-plata-100);
  text-shadow: none;
}
@media (min-width: 60rem) {
  .kc-photo-stack { padding-inline: 2rem; }
  .kc-photo-stack-host::after { display: none; }
}

/* ── Ubicaciones: tarjetas como su Canva (ícono, nombre en script, sede, hora, dirección, Cómo llegar) ── */
.kc-locations { gap: var(--kc-space-7); }
.kc-location {
  justify-items: center;
  gap: var(--kc-space-2);
  padding: var(--kc-space-6) var(--kc-space-5);
}
.kc-location .br-icon { width: 52px; height: 52px; margin-bottom: 0; stroke: var(--br-lila-700); stroke-width: 1.8; }
.kc-location__title { font-family: var(--br-font-script); font-size: 2.6rem; line-height: 1.1; color: var(--kc-accent); }
.kc-location h3 { font-size: 1.15rem; letter-spacing: 0.14em; text-transform: uppercase; text-wrap: balance; color: var(--br-plum); }
.kc-location__time { order: 1; font-weight: 500; font-size: 1.05rem; letter-spacing: 0.18em; color: var(--br-plum); }
.kc-location__time::before { content: "Hora · "; }
.kc-location__address { order: 2; font-style: italic; font-weight: 400; color: var(--kc-ink-muted); text-wrap: balance; }
.kc-map-link {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: var(--kc-space-2);
  margin-top: var(--kc-space-3);
  padding: 0 var(--kc-space-5);
  border: 1px solid var(--br-plum);
  border-radius: var(--kc-radius-pill);
  background: var(--br-plum);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 10px 18px -10px rgba(30, 16, 41, 0.7);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  transition: background-color 240ms var(--kc-ease), color 240ms var(--kc-ease);
}
.kc-map-link svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.kc-map-link:active { background: var(--br-lila-700); }
@media (hover: hover) { .kc-map-link:hover { background: var(--br-lila-700); } }

/* ── Vestimenta: terciopelo, ícono vestido + traje, etiquetas de boutique ── */
#vestimenta { background: var(--br-velvet-deep) var(--br-velvet-img) center / cover no-repeat; color: var(--br-on-velvet); }
/* atuendo en punta de plata: la pluma lo dibuja al entrar (ink-reveal.mjs); sin JS queda el still */
.br-drawing { position: relative; width: min(10.5rem, 48%); margin: 0 auto var(--kc-space-3); }
.br-drawing__final, .br-drawing__layer { display: block; width: 100%; height: auto; }
.br-drawing__layer { position: absolute; inset: 0; pointer-events: none; }
.br-drawing.is-armed .br-drawing__final { visibility: hidden; }
.br-dress__script { font-family: var(--br-font-script); font-size: clamp(2.4rem, 2rem + 2vw, 3rem); line-height: 1.15; color: var(--br-on-velvet); }
.br-dress__title { margin: var(--kc-space-2) 0 var(--kc-space-3); font-size: clamp(1.15rem, 1rem + 1.2vw, 1.5rem); letter-spacing: 0.28em; text-indent: 0.28em; text-transform: uppercase; color: var(--br-plata-100); }
#vestimenta .kc-body { max-width: 21rem; margin-inline: auto; font-style: italic; font-weight: 400; font-size: 1.25rem; color: var(--br-on-velvet); }
.br-dress__reserved {
  display: flex;
  align-items: center;
  gap: var(--kc-space-3);
  max-width: 21rem;
  margin: var(--kc-space-6) auto 0;
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--br-plata-300);
}
.br-dress__reserved::before,
.br-dress__reserved::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--br-plata-500)); }
.br-dress__reserved::after { background: linear-gradient(90deg, var(--br-plata-500), transparent); }

.kc-swatches { margin-top: var(--kc-space-5); padding-top: var(--kc-space-5); gap: var(--kc-space-5) clamp(0.6rem, 3vw, var(--kc-space-5)); }
.kc-swatch {
  position: relative;
  isolation: isolate;
  gap: var(--kc-space-2);
  width: clamp(4.6rem, 21vw, 5.6rem);
  padding: 1.9rem 0.45rem 0.7rem;
  /* ojal: el centro deja ver el terciopelo */
  background: radial-gradient(circle at 50% 0.8rem, transparent 0.2rem, var(--br-plata-300) 0.22rem 0.34rem, transparent 0.36rem) no-repeat;
  transform-origin: 50% -2rem;
  filter: drop-shadow(0 14px 16px rgba(10, 4, 18, 0.5));
}
.kc-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #D6C1EC var(--br-card-paper) center / 400%;
  clip-path: polygon(22% 0, 78% 0, 100% 1.35rem, 100% 100%, 0 100%, 0 1.35rem);
  -webkit-mask: radial-gradient(circle at 50% 0.8rem, transparent 0.34rem, #000 0.36rem);
  mask: radial-gradient(circle at 50% 0.8rem, transparent 0.34rem, #000 0.36rem);
}
/* hilo de plata del que cuelga cada etiqueta */
.kc-swatch::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% - 0.8rem);
  width: 1px;
  height: 2.1rem;
  background: linear-gradient(180deg, transparent, var(--br-plata-300));
}
.kc-swatch__drop {
  width: 100%;
  height: 2.7rem;
  border-radius: 1px;
  outline: 1px dashed rgba(255, 255, 255, 0.7);
  outline-offset: -4px;
  box-shadow: inset 0 -6px 10px rgba(44, 25, 64, 0.25);
}
.kc-swatch:nth-child(1) .kc-swatch__drop { background: linear-gradient(115deg, #9C78C6 0%, #D3BEEC 38%, #A584CF 58%, #C9AEE2 80%, #9673C2 100%); }
.kc-swatch:nth-child(2) .kc-swatch__drop { background: linear-gradient(115deg, #4E2A7A 0%, #8D62C2 36%, #5E3592 56%, #7B52B0 78%, #46246F 100%); }
.kc-swatch:nth-child(3) .kc-swatch__drop {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 3px),
    var(--br-satin) 0 0 / 120px,
    var(--br-foil);
  background-blend-mode: normal, multiply, normal;
}
.kc-swatch__label { font-size: clamp(0.6rem, 0.52rem + 0.4vw, 0.7rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--br-plum); }
#vestimenta-swatches.is-revealed .kc-swatch { animation: br-swing 2.6s cubic-bezier(.3, .6, .4, 1) both; }
#vestimenta-swatches.is-revealed .kc-swatch:nth-child(2) { animation-delay: 160ms; }
#vestimenta-swatches.is-revealed .kc-swatch:nth-child(3) { animation-delay: 320ms; }
@keyframes br-swing { 0% { rotate: 9deg; } 25% { rotate: -6deg; } 50% { rotate: 3.5deg; } 75% { rotate: -1.5deg; } 100% { rotate: 0deg; } }

/* ── Regalos: lluvia de sobres ─────────────────────────── */
#regalos .br-icon { stroke: var(--br-plata-100); stroke-width: 1.8; }
#regalos .kc-body { max-width: 24rem; margin-inline: auto; }
.kc-envelopes { margin-top: var(--kc-space-5); gap: var(--kc-space-1); }
.kc-envelopes h3 { font-family: var(--br-font-script); font-weight: 400; font-size: 2.3rem; color: var(--kc-accent); }
.kc-envelopes p { font-style: italic; font-weight: 400; color: var(--kc-ink-muted); }

/* ── RSVP: tarjeta KC (el puente de KC-Center la despierta) ── */
.kc-rsvp-deadline,
.kc-rsvp-attendance-hint,
.kc-rsvp-decline-note,
.kc-rsvp-allocation-note,
.kc-rsvp-offline { font-size: 1rem; font-style: italic; font-weight: 400; color: var(--kc-ink-muted); }
.kc-rsvp-form { padding: var(--kc-space-7) var(--kc-space-5) var(--kc-space-6); text-align: left; }
.kc-rsvp-attendance legend,
.kc-field > label { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kc-ink); margin-bottom: var(--kc-space-2); }
.kc-field input:not([type="radio"]),
.kc-field select {
  padding: 0 var(--kc-space-3);
  border: 1px solid var(--kc-field-line);
  border-radius: var(--kc-radius-sm);
  background: var(--br-lila-50);
  color: var(--kc-ink);
}
.kc-rsvp-attendance-face {
  padding: var(--kc-space-2) var(--kc-space-4);
  border: 1px solid var(--kc-field-line);
  border-radius: var(--kc-radius-pill);
  background: rgba(244, 237, 249, 0.75);
  color: var(--kc-ink);
  transition: background-color 240ms var(--kc-ease), color 240ms var(--kc-ease), border-color 240ms var(--kc-ease);
}
.kc-rsvp-attendance-option:has(input:checked) .kc-rsvp-attendance-face { background: var(--kc-accent); border-color: var(--kc-accent); color: var(--kc-on-accent); }
.kc-rsvp-attendance-hint,
.kc-rsvp-decline-note,
.kc-rsvp-allocation-note,
.kc-rsvp-error,
.kc-rsvp-status { text-align: center; }
.kc-rsvp-error { color: var(--kc-error); }
.kc-rsvp-submit {
  border: 1px solid var(--kc-accent);
  border-radius: var(--kc-radius-pill);
  background: var(--kc-accent);
  color: var(--kc-on-accent);
  font-size: 0.9rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.kc-rsvp-submit:disabled { background: var(--kc-ink-muted); border-color: var(--kc-ink-muted); cursor: not-allowed; }
.kc-rsvp-offline { width: fit-content; margin: var(--kc-space-5) auto 0; padding: 0.4rem 1rem; border-radius: var(--kc-radius-pill); background: rgba(44, 25, 64, 0.7); text-shadow: none; }

/* ── Captura ───────────────────────────────────────────── */
/* cámara de plata y piel lila: flota, la sombra respira debajo, el dije se mece y el flash dispara */
.br-cam { display: block; width: min(11rem, 50vw); height: auto; margin: 0 auto var(--kc-space-3); overflow: visible; animation: br-cam-float 5s ease-in-out infinite; }
.br-cam .brcam-shadow { transform-box: fill-box; transform-origin: center; animation: br-cam-shadow 5s ease-in-out infinite; }
.br-cam .brcam-charm { transform-origin: 216px 65px; animation: br-cam-charm 5s ease-in-out infinite; }
.br-cam .brcam-fire { animation: br-cam-flash 6.5s ease-out 1.5s infinite; }
@keyframes br-cam-float { 50% { transform: translateY(-9px) rotate(-1.6deg); } }
@keyframes br-cam-shadow { 50% { transform: translateY(12px) scale(0.82); opacity: 0.6; } }
@keyframes br-cam-charm { 0%, 100% { rotate: 6deg; } 50% { rotate: -7deg; } }
@keyframes br-cam-flash { 0%, 86% { opacity: 0; } 88% { opacity: 1; } 96%, 100% { opacity: 0; } }
#captura .kc-title { font-size: clamp(2rem, 1.7rem + 1.6vw, 2.6rem); }
#captura .kc-body { font-style: italic; font-weight: 400; color: var(--kc-ink-muted); }
.kc-captura__cta {
  margin-top: var(--kc-space-4);
  padding: 0 var(--kc-space-5);
  border: 1px solid var(--br-plum);
  border-radius: var(--kc-radius-pill);
  background: linear-gradient(180deg, #55357A 0%, var(--br-plum) 100%);
  box-shadow: 0 0 0 2px var(--br-plata-300), 0 0 0 3px var(--br-plata-700);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-shadow: none;
  color: var(--br-on-velvet);
}

/* ── Footer KC-Universe: noche lila con estrellas sobre el atardecer de la vaquera ── */
/* V3-02 medía 338 px de texto; V3-03, 435 px (el paisaje en cover a todo lo ancho). V3-04d: el paisaje va arriba,
   el texto abajo, a un tamaño legible (piso 0.72rem). El paisaje es una franja de 38rem como máximo. */
.kc-footer {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-block: 0 calc(1rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, #1E1029 0%, var(--br-velvet-deep) 45%, #34204B 70%, #1E1029 100%);
  color: var(--kc-footer-ink);
}
.br-footer__sky {
  position: absolute;
  inset: 0 0 35%;
  background:
    radial-gradient(1.2px 1.2px at 9% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 14% 46%, #fff 50%, transparent),
    radial-gradient(1.4px 1.4px at 4% 70%, #fff 50%, transparent), radial-gradient(1px 1px at 87% 12%, #fff 50%, transparent),
    radial-gradient(1.3px 1.3px at 95% 34%, #fff 50%, transparent), radial-gradient(1px 1px at 89% 58%, #fff 50%, transparent),
    radial-gradient(1px 1px at 2% 32%, #fff 50%, transparent), radial-gradient(1.2px 1.2px at 98% 76%, #fff 50%, transparent);
  pointer-events: none;
}
.br-footer__sky::before,
.br-footer__sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--br-spark) 6% 26% / 12px no-repeat, var(--br-spark) 93% 20% / 15px no-repeat, var(--br-spark) 90% 66% / 9px no-repeat;
  animation: br-twinkle 3.2s ease-in-out infinite alternate;
}
.br-footer__sky::after { background-position: 12% 60%, 97% 46%, 3% 8%; animation-duration: 4.4s; animation-delay: -1.6s; }
.kc-footer :focus-visible { outline-color: var(--kc-footer-ink); }
.kc-footer__inner { position: relative; z-index: 1; order: 2; margin-top: -2.5rem; gap: 0.15rem; text-shadow: 0 1px 3px rgba(20, 8, 31, 0.85); }
.kc-footer__mark { font-size: 0.72rem; line-height: 1.2; letter-spacing: 0.3em; text-transform: uppercase; color: var(--br-plata-300); margin-bottom: 0.25rem; }
.kc-footer__icon { position: relative; width: 0.85rem; height: 0.85rem; border: 1px solid currentColor; border-radius: 50%; }
.kc-footer__icon::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: currentColor; }
.kc-footer__inner p { font-size: 0.8rem; line-height: 1.35; letter-spacing: 0.2em; text-transform: uppercase; color: var(--br-plata-100); }
.kc-footer__inner p:first-of-type { font-size: 1.05rem; line-height: 1.3; letter-spacing: 0; text-transform: none; color: var(--kc-footer-ink); font-style: italic; font-weight: 400; margin-bottom: 0; }
.kc-footer__inner p:first-of-type span { display: block; font-family: var(--br-font-script); font-style: normal; font-size: 2.1rem; line-height: 1.1; }
.kc-footer__link { position: relative; margin-top: 0.2rem; line-height: 1.2; color: var(--kc-footer-ink); text-decoration: none; font-size: 0.85rem; letter-spacing: 0.08em; }
/* área táctil de 44 px sin estirar el layout */
.kc-footer__link::before { content: ""; position: absolute; inset: -14px -12px; }
.kc-footer__link svg { width: 1rem; height: 1rem; }
.br-footer__scene {
  position: relative;
  order: 1;
  display: block;
  width: 100%;
  max-width: 38rem;
  height: auto;
  margin: -1rem auto 0;
  pointer-events: none;
  /* la base del paisaje se funde con la noche: sin costura antes del texto */
  -webkit-mask: linear-gradient(180deg, #000 82%, transparent);
  mask: linear-gradient(180deg, #000 82%, transparent);
}
/* en pantalla ancha la franja también se funde a los lados con la noche */
@media (min-width: 38rem) {
  .br-footer__scene {
    -webkit-mask: linear-gradient(180deg, #000 82%, transparent), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    -webkit-mask-composite: source-in;
    mask: linear-gradient(180deg, #000 82%, transparent), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-composite: intersect;
  }
}

/* ── Ring: la estrella de sheriff de la vaquera, suelta (receta OP10) ── */
.kc-ring__emblem {
  inset: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  border-radius: 0;
  object-fit: contain;
  rotate: -8deg;
  filter: drop-shadow(0 4px 8px rgba(30, 16, 41, 0.5));
  animation: br-star-sway 3.6s ease-in-out infinite;
  animation-play-state: paused;
}
/* destello lila que cruza la estrella: la propia estrella es la máscara */
.kc-ring[data-ring="sello"]::after {
  content: "";
  position: absolute;
  inset: -5px;
  rotate: -8deg;
  background: linear-gradient(115deg, transparent 38%, rgba(201, 174, 226, 0.85) 50%, transparent 62%) 160% 0 / 250% 100% no-repeat;
  -webkit-mask: url("../../assets/page/star.webp") center / contain no-repeat;
  mask: url("../../assets/page/star.webp") center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
}
.kc-ring[data-kc-state="playing"] .kc-ring__emblem { animation-play-state: running; }
.kc-ring[data-kc-state="playing"]::after { opacity: 1; animation: br-star-glint 4.2s ease-in-out infinite; }
.kc-ring[data-kc-state="paused"] .kc-ring__emblem { filter: grayscale(0.7) brightness(0.85) drop-shadow(0 4px 8px rgba(30, 16, 41, 0.35)); }
@keyframes br-star-sway { 0%, 100% { rotate: -8deg; } 50% { rotate: 3deg; } }
@keyframes br-star-glint { 0%, 45% { background-position: 160% 0; } 75%, 100% { background-position: -60% 0; } }
.kc-music-toast {
  padding: 0.6rem 0.9rem;
  border-radius: 3px;
  background: var(--br-plum);
  color: var(--br-on-velvet);
  font-style: italic;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.3;
  box-shadow: 0 0 0 1px var(--br-plata-500), 0 10px 24px -10px rgba(20, 10, 30, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .kc-gate.is-held .br-seal { animation: none !important; }
  .br-calendar__star path { stroke-dashoffset: 0; transition: none; }
  .br-dedication__call, .br-call.is-revealed .br-dedication__call, .br-call.is-revealed .br-call__star { clip-path: none; animation: none; transition: none; }
  .br-call[data-reveal] { transform: none; }
  #vestimenta-swatches.is-revealed .kc-swatch,
  .kc-photo-stack-host.is-revealed .kc-photo-stack__card { animation: none; }
  .kc-section::after, .br-cameo::after, .br-footer__sky::before, .br-footer__sky::after { animation: none; opacity: 0.8; }
  .br-cam, .br-cam .brcam-shadow, .br-cam .brcam-charm, .br-cam .brcam-fire, .kc-ring__emblem, .kc-ring::after { animation: none !important; }
}

/* ── Pantalla ancha: las tarjetas respiran en dos columnas ── */
@media (min-width: 48rem) {
  #ubicaciones .kc-container { max-width: 50rem; }
}