/* Azula Calloway · «Érase una vez · Bosque Encantado» · theme (PIEL)
   La invitación es el libro de cuentos: el invitado camina el día de Blanca Nieves, del claro de la
   mañana al castillo bajo las estrellas, y las fotos de Azula cuelgan dentro de los lugares del cuento.
   Escenas pintadas con anidoodle (gouache), recortes de refes/ como acentos. Solo tokens + hooks. */

/* Alto de la vista para el ancho del espejo: svh donde existe (Safari 15.4+, Chrome 108+), vh antes */
:root { --mi-alto-vista: 100vh; }
@supports (height: 100svh) { :root { --mi-alto-vista: 100svh; } }

/* R3: al tocar no hay destello azul (Android/WebKit) ni contorno de foco por clic; el teclado conserva el suyo */
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
summary, button, a, .mi-jardin__pista, .mi-espejo-gate__liquido { touch-action: manipulation; }
/* R5: tocar y mantener ya no pinta azul (selección de texto/imagen ni menú de imagen); los campos del RSVP siguen escribibles */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
img { -webkit-user-drag: none; }

/* ── Escenas: cada sección lleva su lámina pintada detrás ─ */
.kc-hero,
.kc-section,
.kc-footer { position: relative; isolation: isolate; }
.mi-plate {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100% !important;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}
/* Secciones que cambian de alto (carta con puente, secreto abierto): la lámina cubre desde arriba */
#rsvp > .mi-plate,
#secreto > .mi-plate { object-fit: cover; object-position: 50% 0; }
/* Color de respaldo mientras la lámina carga: el tono medio de cada hora */
#hero { background: #E3EBDC; }
#dedicatoria { background: #E7E6CC; }
#counter { background: #ECE3C0; }
#familia { background: #EEDFB2; }
#historia { background: #EFD6AE; }
#ubicaciones { background: #B8939A; }
#itinerario { background: #463F6A; }
#vestimenta { background: #303E6A; }
#regalos { background: #283456; }
#rsvp,
#captura { background: #1C2646; }
#secreto { background: #161F3A; }

/* Neblina del bosque detrás del texto: clara de día, oscura de noche. Pintada en CSS, sin capas extra. */
#counter::after,
#familia::after,
#historia::after,
#ubicaciones::after,
#itinerario::after,
#regalos::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
#counter::after,
#historia::after {
  background:
    radial-gradient(ellipse 62% 15% at 50% 10%, rgba(251, 247, 230, 0.9), rgba(251, 247, 230, 0) 100%),
    radial-gradient(ellipse 72% 60% at 50% 42%, rgba(251, 247, 230, 0.78), rgba(251, 247, 230, 0.5) 45%, rgba(251, 247, 230, 0) 80%);
}
#counter::after {
  background:
    radial-gradient(ellipse 62% 16% at 50% 12%, rgba(251, 247, 230, 0.82), rgba(251, 247, 230, 0) 100%),
    radial-gradient(ellipse 72% 60% at 50% 42%, rgba(251, 247, 230, 0.78), rgba(251, 247, 230, 0.5) 45%, rgba(251, 247, 230, 0) 80%),
    radial-gradient(ellipse 70% 14% at 50% 88%, rgba(251, 247, 230, 0.85), rgba(251, 247, 230, 0) 100%);
}
#familia::after {
  background:
    radial-gradient(ellipse 74% 20% at 50% 14%, rgba(251, 247, 230, 0.9), rgba(251, 247, 230, 0) 100%),
    radial-gradient(ellipse 66% 26% at 50% 34%, rgba(251, 247, 230, 0.86), rgba(251, 247, 230, 0) 100%),
    radial-gradient(ellipse 72% 60% at 50% 42%, rgba(251, 247, 230, 0.78), rgba(251, 247, 230, 0.5) 45%, rgba(251, 247, 230, 0) 80%);
}
#ubicaciones::after {
  background:
    radial-gradient(ellipse 75% 16% at 50% 12%, rgba(252, 236, 214, 0.75), rgba(252, 236, 214, 0) 100%),
    radial-gradient(ellipse 80% 22% at 50% 88%, rgba(28, 22, 46, 0.6), rgba(28, 22, 46, 0) 100%);
}
#itinerario::after,
#regalos::after { background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(14, 16, 36, 0.45), rgba(14, 16, 36, 0) 80%); }

/* Mañana y tarde: tinta. Del ocaso a la noche: crema. */
#hero, #dedicatoria, #counter, #familia, #historia, #ubicaciones {
  --mi-texto: var(--kc-ink);
  --mi-acento: var(--mi-oro-tinta);
  --mi-halo: var(--mi-halo-claro);
}
#itinerario, #vestimenta, #regalos, #rsvp, #captura, #secreto, #kc-footer {
  --mi-texto: var(--mi-crema);
  --mi-acento: var(--mi-oro);
  --mi-halo: var(--mi-halo-noche);
  --kc-focus: var(--mi-oro);
}

/* ── Tipografía ────────────────────────────────────────── */
body { background: var(--mi-noche); font-family: var(--kc-font-body); font-weight: 500; }
.kc-hero,
.kc-section,
.kc-gate,
.kc-footer { text-align: center; color: var(--mi-texto, var(--kc-ink)); }
h1, h2, h3 { font-weight: 400; line-height: 1.15; }
.kc-eyebrow {
  font-family: var(--kc-font-body);
  font-style: italic;
  font-size: var(--kc-text-eyebrow);
  letter-spacing: var(--kc-tracking-eyebrow);
  color: var(--mi-acento);
  text-shadow: var(--mi-halo);
}
.kc-title {
  font-family: var(--kc-font-display);
  font-size: var(--kc-text-title);
  color: var(--mi-texto);
  text-shadow: var(--mi-halo);
}
.kc-body { color: var(--mi-texto); text-shadow: var(--mi-halo); }
/* R3 · la voz del cuento: los epígrafes de sección se escriben a mano, rojo manzana de día y oro de noche */
.kc-section .kc-eyebrow {
  margin-bottom: var(--kc-space-1);
  font-family: var(--mi-font-nombre);
  font-style: normal;
  font-size: clamp(1.95rem, 1.6rem + 1.5vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: 0;
  text-shadow: var(--mi-halo), var(--mi-halo);
}
#counter .kc-eyebrow,
#familia .kc-eyebrow,
#ubicaciones .kc-eyebrow { color: var(--mi-manzana-tinta); }
.kc-body:empty,
.kc-hero__place:empty,
.kc-story__year:empty,
.kc-location__address:empty,
.kc-location__time:empty,
.kc-family__group h3:empty,
.kc-footer__inner p:empty,
#vestimenta-swatches:empty { display: none; }
.kc-container { position: relative; }

/* ── Botones ───────────────────────────────────────────── */
.kc-gate__open,
.kc-captura__cta,
.kc-rsvp-submit,
.kc-map-link,
.kc-registry a,
.kc-photo-stack__next,
.kc-bank button[data-kc-copy] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--kc-space-3) var(--kc-space-6);
  border-radius: var(--kc-radius-pill);
  font-family: var(--kc-font-display);
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-align: center;
  transition: background-color 260ms var(--kc-ease), color 260ms var(--kc-ease), box-shadow 260ms var(--kc-ease), transform 260ms var(--kc-ease);
}
/* Lacre: rojo manzana con filo de oro */
.kc-gate__open,
.kc-map-link,
.kc-registry a,
.kc-rsvp-submit,
.kc-bank button[data-kc-copy] {
  border: 1px solid var(--mi-manzana-sombra);
  background: radial-gradient(circle at 30% 25%, #B04245, #993235 55%, #7A2629);
  color: var(--mi-crema);
  box-shadow: 0 0 0 2px rgba(239, 210, 90, 0.75), 0 8px 18px rgba(80, 20, 24, 0.32), inset 0 1px 2px rgba(255, 255, 255, 0.25);
}
.kc-map-link:hover,
.kc-registry a:hover,
.kc-rsvp-submit:hover { background: var(--mi-manzana-sombra); }
.kc-photo-stack__next { border: 1px solid var(--mi-oro-tinta); background: transparent; color: var(--mi-oro-tinta); }
.kc-bank button[data-kc-copied] { background: var(--mi-tinta); }
.kc-captura__cta { border: 1px solid rgba(251, 243, 222, 0.6); color: var(--mi-crema); background: transparent; }
.kc-captura__cta:disabled { cursor: not-allowed; opacity: 0.8; }

/* ── Gate · «El espejo se graba» ──────────────────────────
   El bosque cerrado y negro; el dosel se abre, entra la luna, el espejo se graba en oro y su vidrio es plata
   líquida. Al tocarlo la noche se deshace, el oro se desgraba y Azula se dibuja: el último cuadro ES el hero
   (el gate copia su caja: padding, columna, ancho del arte, tipografía). */
.kc-gate {
  --mi-art-w: min(84vw, 25rem, calc((var(--mi-alto-vista) - 13rem) * 0.82));
  --mi-texto: var(--mi-crema);
  --mi-acento: var(--mi-oro);
  --mi-halo: var(--mi-halo-noche);
  --kc-focus: var(--mi-oro);
  place-items: normal;
  align-content: center; /* Safari sin «safe»: igual que el hero */
  align-content: safe center;
  padding: var(--kc-space-7) 0 var(--kc-space-8);
  background-color: #141D36;
}
#gate.is-deshace { background-color: transparent; }

/* La escena y el dosel viven en la caja exacta de la lámina del hero (en escritorio, la columna) y recortan lo
   que se mueve fuera (dolly, niebla, copas): el gate nunca desborda */
.kc-gate__scene,
.mi-gate-dosel {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: var(--mi-hero-x, 0px);
  width: var(--mi-hero-w, 100%);
  height: var(--mi-hero-h, 100%);
  overflow: hidden;
  pointer-events: none;
}

/* El bosque de noche en tres hojas de profundidad, exactamente sobre la lámina del hero */
.mi-alba-capa {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  max-width: none;
  object-fit: fill;
  transform-origin: 50% 42%;
  pointer-events: none;
}
.mi-alba-capa--fondo { background: #22304F; animation: mi-dolly-fondo 3600ms cubic-bezier(0.2, 0.6, 0.25, 1) both; }
.mi-alba-capa--medio { animation: mi-dolly-medio 3600ms cubic-bezier(0.2, 0.6, 0.25, 1) both, mi-mece-medio 9s ease-in-out 3600ms infinite; }
.mi-alba-capa--frente { animation: mi-dolly-frente 3600ms cubic-bezier(0.2, 0.6, 0.25, 1) both, mi-mece-frente 7s ease-in-out 3600ms infinite; }
.mi-niebla { position: absolute; left: -30%; width: 160%; pointer-events: none; opacity: 0; }
.mi-niebla--lejos {
  top: 34%;
  height: 32%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(150, 170, 215, 0.24), rgba(150, 170, 215, 0) 70%);
  animation: mi-escarcha-total 2400ms ease 1200ms both, mi-deriva 26s ease-in-out 1200ms infinite alternate;
}
.mi-niebla--cerca {
  top: 68%;
  height: 28%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(170, 188, 228, 0.26), rgba(170, 188, 228, 0) 70%);
  animation: mi-escarcha-total 2400ms ease 1600ms both, mi-deriva-inv 19s ease-in-out 1600ms infinite alternate;
}
.mi-alba-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#gate.is-deshace .mi-alba-capa,
#gate.is-deshace .mi-niebla { visibility: hidden; }
/* Acto 0: el dosel tapa el cielo y se abre; el negro se retira */
.mi-dosel {
  position: absolute;
  top: -2%;
  width: 70.37%;
  max-width: none;
  height: auto;
  pointer-events: none;
}
.mi-dosel--izq { left: -16%; animation: mi-dosel-izq 2600ms cubic-bezier(0.55, 0, 0.25, 1) 1000ms both; }
.mi-dosel--der { left: 45.63%; animation: mi-dosel-der 2600ms cubic-bezier(0.55, 0, 0.25, 1) 1000ms both; }
.mi-velo { position: absolute; inset: 0; background: #04060C; pointer-events: none; animation: mi-gate-sale 1900ms ease-in-out 1200ms both; }
/* la luna se cuela entre las hojas antes de que se abran: las copas se recortan contra su luz */
.mi-luna {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 42% at 50% 6%, rgba(214, 226, 255, 0.55), rgba(150, 170, 220, 0.18) 45%, rgba(150, 170, 220, 0) 75%);
  pointer-events: none;
  animation: mi-luna 3600ms ease-in-out 200ms both;
}

.kc-gate__body {
  width: 100%;
  max-width: var(--kc-measure);
  margin-inline: auto;
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  gap: var(--kc-space-2);
}
#gate .mi-nombre { color: var(--mi-crema); text-shadow: var(--mi-halo-noche), var(--mi-halo-noche); }

/* El espejo: misma caja que la foto del hero; el marco vacío va registrado sobre el marco de hero.png */
.mi-espejo-gate {
  /* registro (.kc/gate/registro.json, .kc/tools/register-mirror.mjs): % de la caja de hero-espejo */
  --mi-marco-x: -6.022%; --mi-marco-y: -2.022%; --mi-marco-w: 111.873%; --mi-marco-h: 104.788%;
  --mi-vidrio-x: 14.33%; --mi-vidrio-y: 12.13%; --mi-vidrio-w: 70.68%; --mi-vidrio-h: 75.35%;
  position: relative;
  width: var(--mi-art-w);
  aspect-ratio: 900 / 1098;
}
.mi-espejo-gate__marco { position: absolute; left: var(--mi-marco-x); top: var(--mi-marco-y); width: var(--mi-marco-w); height: var(--mi-marco-h); }
.mi-espejo-gate__marco > img,
.mi-espejo-gate__marco > canvas,
.mi-espejo-gate__heroe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: none;
  pointer-events: none;
}
.mi-espejo-gate__relleno { opacity: 0.3; }
/* el vidrio: escarcha quieta (sin WebGL o movimiento reducido) o plata líquida que pide que la toquen */
.mi-espejo-gate__vidrio,
.mi-espejo-gate__liquido {
  position: absolute;
  left: var(--mi-vidrio-x);
  top: var(--mi-vidrio-y);
  width: var(--mi-vidrio-w);
  height: var(--mi-vidrio-h);
  border-radius: 50%;
}
.mi-espejo-gate__vidrio {
  background: radial-gradient(ellipse 70% 60% at 38% 30%, rgba(214, 226, 255, 0.16), rgba(214, 226, 255, 0.05) 55%, rgba(8, 12, 30, 0.22) 100%);
  box-shadow: inset 0 0 18px rgba(8, 12, 30, 0.45);
  pointer-events: none;
}
.mi-espejo-gate__liquido { opacity: 0; cursor: pointer; touch-action: manipulation; transition: opacity 1400ms var(--kc-ease); }
#gate.is-liquido .mi-espejo-gate__liquido { opacity: 1; }
.mi-gate-vivo #gate.is-liquido .mi-espejo-gate__vidrio { opacity: 0; transition: opacity 1400ms var(--kc-ease); }
/* El lacre vive donde el hero pondrá la fecha (la ranura guarda su alto exacto) */
.mi-ranura { position: relative; margin-top: var(--kc-space-2); }
.mi-ranura .kc-gate__date { margin-top: 0; visibility: hidden; }
.mi-ranura .kc-gate__open { position: absolute; left: 50%; top: 50%; translate: -50% -50%; white-space: nowrap; }

/* La entrada corre sola en CSS (termina visible aunque gate.mjs nunca corra) */
.kc-gate .kc-eyebrow { animation: mi-gate-entra 900ms var(--kc-ease) 3000ms both; }
#gate .mi-nombre {
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 250% 100%;
  mask-size: 250% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  animation: mi-tinta 1300ms ease-in-out 3500ms both;
}
.kc-gate__open { animation: mi-gate-entra 700ms var(--kc-ease) 4400ms both; }
/* la línea: si nadie la graba, aparece sola */
.mi-espejo-gate__linea { animation: mi-gate-sale 700ms var(--kc-ease) 4500ms reverse both; }
.mi-espejo-gate__relleno { animation: mi-escarcha 1400ms var(--kc-ease) 3600ms both; }
.mi-espejo-gate__vidrio { animation: mi-escarcha-total 1400ms var(--kc-ease) 4000ms both; }

/* ── El gate vivo (gate.mjs; sin JS o con movimiento reducido todo queda quieto y completo) ── */
.mi-gate-vivo #gate[data-gate-state="opening"] { opacity: 1; }
/* lo que el gate copia queda oculto debajo hasta el relevo, para que nunca se vea doble */
.mi-gate-vivo:not(.mi-espejo-listo) #hero .kc-hero__photo,
.mi-gate-vivo:not(.mi-espejo-listo) #hero .kc-eyebrow,
.mi-gate-vivo:not(.mi-espejo-listo) #hero .mi-nombre { visibility: hidden; }
.mi-gate-vivo:not(.mi-fecha) #hero .kc-hero__date { visibility: hidden; }
.mi-fecha #hero .kc-hero__date { animation: mi-gate-entra 800ms var(--kc-ease) both; }
.mi-gate-vivo .mi-espejo-gate__linea,
.mi-gate-vivo .mi-espejo-gate__relleno { animation: none; opacity: 0; transition: opacity 1400ms var(--kc-ease); }
.mi-gate-vivo #gate.is-grabado .mi-espejo-gate__linea { opacity: 1; transition: none; }
.mi-gate-vivo #gate.is-grabado .mi-espejo-gate__relleno { opacity: 0.3; }
.mi-gate-vivo .mi-espejo-gate__vidrio { animation: none; opacity: 0; transition: opacity 1200ms var(--kc-ease); }
.mi-gate-vivo #gate.is-grabado .mi-espejo-gate__vidrio { opacity: 1; }
/* Al tocar: el lacre se va, la noche se deshace, el oro se desgraba y Azula se dibuja */
#gate:not(.is-abriendo) .kc-gate__open:focus-visible { animation: none; }
#gate.is-abriendo .kc-gate__open { animation: mi-gate-sale 300ms var(--kc-ease) both; }
.mi-gate-vivo #gate.is-desgrabando .mi-espejo-gate__linea { opacity: 0; transition: none; } /* el lienzo la desgraba */
.mi-gate-vivo #gate.sin-pluma .mi-espejo-gate__linea { opacity: 0; transition: opacity 1000ms var(--kc-ease) 300ms; }
.mi-gate-vivo #gate.is-abriendo .mi-espejo-gate__relleno { opacity: 0; transition: opacity 900ms var(--kc-ease) 200ms; }
/* al tocar, el cristal se vuelve el vidrio celeste del hero: el papel donde Azula se dibuja (nunca un óvalo blanco) */
.mi-espejo-gate__vidrio::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse 60% 55% at 50% 44%, #EAF6FE, #E2F1FC 58%, #CFE6F8 84%, #A9CFEF);
  opacity: 0;
}
.mi-gate-vivo #gate.is-abriendo .mi-espejo-gate__vidrio { opacity: 1; transition: none; }
.mi-gate-vivo #gate.is-abriendo .mi-espejo-gate__vidrio::after { opacity: 1; transition: opacity 650ms var(--kc-ease) 250ms; }
#gate.is-abriendo .mi-niebla { animation: mi-gate-sale 900ms var(--kc-ease) both; }
.mi-espejo-listo .mi-espejo-gate__heroe,
.mi-espejo-listo .mi-espejo-gate__vidrio { visibility: hidden; }
/* la letra toma la luz de la mañana: al final es idéntica a la del hero, que está justo debajo */
#gate .kc-eyebrow,
#gate .mi-nombre { transition: color 520ms ease-in-out 560ms, text-shadow 520ms ease-in-out 560ms; }
#gate.is-alba .kc-eyebrow { color: var(--mi-oro-tinta); text-shadow: var(--mi-halo-claro), var(--mi-halo-claro); }
#gate.is-alba .mi-nombre { color: var(--kc-ink); text-shadow: var(--mi-halo-claro), var(--mi-halo-claro); }
/* un amanecer tibio pasa mientras la noche se deshace (nunca un gris lechoso) */
.kc-gate__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 55% at 50% 0%, rgba(255, 196, 140, 0.6), rgba(255, 176, 128, 0) 72%),
    linear-gradient(to bottom, rgba(255, 214, 168, 0.28), rgba(255, 214, 168, 0) 65%);
  opacity: 0;
  pointer-events: none;
}
#gate.is-alba .kc-gate__scene::after { animation: mi-sol 1800ms var(--kc-ease) both; }

/* Pantallas bajas (celular acostado): el lacre baja a la esquina */
@media (max-height: 32rem) {
  .mi-ranura .kc-gate__open {
    position: fixed;
    left: auto;
    top: auto;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    translate: none;
  }
}

/* ── Hero · el espejo en el claro de la mañana ─────────── */
/* R3: el hero es su propia capa: sus animaciones infinitas (pétalos, copas, pajaritos) ya no hacen que el navegador
   junte toda la página en capas gigantes por «solapamiento» (la trampa de Camila: 80 Mpx en un teléfono) */
#hero { will-change: transform; }
.kc-hero {
  --mi-art-w: min(84vw, 25rem, calc((var(--mi-alto-vista) - 13rem) * 0.82));
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: var(--kc-space-7) var(--kc-space-8);
  overflow: hidden;
}
.kc-hero .kc-container { gap: var(--kc-space-2); }
.kc-hero .kc-container::before {
  content: "";
  position: absolute;
  inset: auto -10% -2rem;
  height: 15rem;
  z-index: -1;
  background: radial-gradient(ellipse 55% 50% at 50% 50%, rgba(251, 248, 234, 0.8), rgba(251, 248, 234, 0) 100%);
  pointer-events: none;
}
/* una neblina de mañana detrás de «Mis XV años»: arriba del espejo pisa las copas */
.kc-hero .kc-container::after {
  content: "";
  position: absolute;
  top: -1.4rem;
  left: 8%;
  right: 8%;
  height: 5rem;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(251, 248, 234, 0.85), rgba(251, 248, 234, 0) 100%);
  pointer-events: none;
}
.kc-hero__photo {
  position: relative;
  width: var(--mi-art-w);
  max-width: none;
  overflow: visible;
}
.kc-hero__photo img { object-fit: contain; }
/* «Mis XV años» arriba del espejo, grande */
.kc-hero .kc-eyebrow,
.kc-gate .kc-eyebrow {
  order: -1;
  text-shadow: var(--mi-halo), var(--mi-halo); /* arriba del espejo pisa las copas: halo doble */
  margin: 0 0 var(--kc-space-1);
  font-size: clamp(2rem, 1.4rem + 3vw, 2.6rem);
  letter-spacing: 0.03em;
}
/* El nombre completo vive en el h1 (lectores, foco, datos); a la vista solo «Azula Calloway» */
.kc-hero__title,
.kc-gate__name {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.mi-nombre {
  padding-inline: 0.3em; /* los remates de la script caben en la caja (la máscara de tinta del gate no los corta) */
  font-family: var(--mi-font-nombre);
  font-size: var(--kc-text-hero);
  line-height: 1.02;
  color: var(--kc-ink);
  text-wrap: balance;
  text-shadow: var(--mi-halo-claro), var(--mi-halo-claro);
  max-width: 100%; /* nombre corto: una línea siempre que quepa */
}
/* La fecha va sobre el listón amarillo del espejo */
.kc-hero__date,
.kc-gate__date {
  margin-top: var(--kc-space-2);
  padding: 0.95rem clamp(2.3rem, 0.4rem + 8vw, 3.4rem) 1.05rem;
  background: url('../../assets/page/prop/liston.webp') center / 100% 100% no-repeat;
  font-family: var(--kc-font-display);
  font-size: clamp(0.76rem, 0.55rem + 1vw, 0.92rem);
  letter-spacing: 0.08em;
  color: #2E1F04;
  white-space: nowrap;
}
/* La luz de la mañana entra una sola vez cuando se abre la invitación */
.kc-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 45% at 30% 0%, rgba(255, 246, 207, 0.85), rgba(255, 246, 207, 0) 70%),
    radial-gradient(ellipse 85% 20% at 50% 76%, rgba(251, 248, 234, 0.95), rgba(251, 248, 234, 0) 100%);
  opacity: 0.35;
  pointer-events: none;
}
body.is-gate-open .kc-hero::after,
.mi-amanece .kc-hero::after { animation: mi-amanecer 2600ms var(--kc-ease) 300ms 1 both; }

/* ── Hero vivo: cuando el gate se va, el claro respira ──
   Las tres hojas de la lámina del hero (idénticas en reposo) entran sin verse y se mecen; la niebla deriva, la luz
   respira y caen pétalos de manzano. Los pajaritos llegan volando y se posan arriba del marco (pagina.mjs). */
.mi-hero-vivo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 900ms var(--kc-ease); }
.mi-hero-vivo.is-listo { opacity: 1; }
.mi-hero-capa { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; object-fit: fill; transform-origin: 50% 42%; }
.mi-hero-capa:not([src]) { display: none; }
.mi-hero-niebla { position: absolute; left: -30%; top: 55%; width: 160%; height: 24%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 252, 240, 0.45), rgba(255, 252, 240, 0) 70%); }
.mi-hero-vivo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, rgba(255, 250, 222, 0) 18%, rgba(255, 250, 222, 0.32) 24%, rgba(255, 250, 222, 0) 31%),
    linear-gradient(104deg, rgba(255, 250, 222, 0) 52%, rgba(255, 250, 222, 0.26) 58%, rgba(255, 250, 222, 0) 64%);
  opacity: 0.4;
}
.mi-petalo { position: absolute; top: -3%; width: 0.75rem; height: 0.5rem; border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #FDE3EA, #EE9BB3); opacity: 0; }
/* R4: el primer <span> de la capa es la niebla, así que los pétalos son los span 2 a 6 (con nth-of-type(1) el quinto
   pétalo se quedaba sin --d y nunca caía) */
.mi-petalo:nth-of-type(2) { left: 8%; --d: 0s; --x: 5rem; }
.mi-petalo:nth-of-type(3) { left: 30%; --d: 3.2s; --x: 3rem; scale: 0.8; }
.mi-petalo:nth-of-type(4) { left: 62%; --d: 6.1s; --x: 6rem; }
.mi-petalo:nth-of-type(5) { left: 82%; --d: 1.7s; --x: -4rem; scale: 0.7; }
.mi-petalo:nth-of-type(6) { left: 48%; --d: 8.4s; --x: -3rem; }
#hero.mi-en-vista .mi-hero-vivo.is-listo .mi-hero-capa--medio { animation: mi-mece-medio 9s ease-in-out infinite; }
#hero.mi-en-vista .mi-hero-vivo.is-listo .mi-hero-capa--frente { animation: mi-mece-frente 7s ease-in-out infinite; }
#hero.mi-en-vista .mi-hero-vivo.is-listo .mi-hero-niebla { animation: mi-deriva 24s ease-in-out infinite alternate; }
#hero.mi-en-vista .mi-hero-vivo.is-listo::after { animation: mi-respira 8s ease-in-out infinite; }
#hero.mi-en-vista .mi-hero-vivo.is-listo .mi-petalo { animation: mi-petalo 12s linear var(--d) infinite; }
/* los pajaritos del marco: aterrizan en el borde, junto al moño (donde estaban en el dibujo) */
.mi-aves-hero { position: absolute; z-index: 2; pointer-events: none; }
.mi-gate-vivo:not(.mi-espejo-listo) .mi-aves-hero { visibility: hidden; }
.mi-aves-hero .mi-ave-hero { position: absolute; z-index: 2; width: 17%; max-width: none; height: auto; object-fit: contain; pointer-events: none; opacity: 0; transform-origin: 50% 100%; }
.mi-ave-hero--izq { left: 19.8%; top: 1.4%; }
.mi-ave-hero--der { left: 63.2%; top: 1%; }
.mi-aves-hero .mi-ave-hero.is-posada { opacity: 1; }
#hero.mi-en-vista .mi-ave-hero.is-posada { animation: mi-ave-reposa 4.2s ease-in-out infinite; }
#hero.mi-en-vista .mi-ave-hero--der.is-posada { animation-delay: 1.3s; }
/* las letras que anime.js escribe (gemelos decorativos del gate y del hero, misma estructura en los dos) */
.mi-palabra { display: inline-block; white-space: nowrap; }
.mi-letra { display: inline-block; }
.mi-letras #gate .kc-eyebrow,
.mi-letras #gate .mi-nombre { animation: none; -webkit-mask-image: none; mask-image: none; }
.mi-letras #gate .mi-letra { opacity: 0; }

/* ── Dedicatoria · la primera página del libro ─────────── */
.mi-libro {
  max-width: min(26rem, 100%);
  margin-inline: auto;
  padding: 2.7rem 2.5rem 3.8rem; /* R3: sin epígrafe, «Érase una vez» sube */
  background: url('../../assets/page/prop/libro.webp') center / 100% 100% no-repeat;
  color: var(--kc-ink);
}
.mi-libro .kc-title { text-shadow: none; }
.mi-libro .kc-title { margin-bottom: var(--kc-space-4); }
/* La foto pegada en la página con esquineros */
.mi-libro__foto {
  position: relative;
  width: 90%;
  margin: 0 auto var(--kc-space-5);
  padding: 7px;
  background: #FFFDF6;
  box-shadow: 0 6px 14px rgba(60, 40, 20, 0.28);
  transform: rotate(-1.4deg);
}
.mi-libro__foto img { width: 100%; height: 100%; object-fit: cover; }
.mi-libro__foto::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  background:
    linear-gradient(135deg, #3E2A16 0 22px, transparent 22px) top left / 32px 32px no-repeat,
    linear-gradient(225deg, #3E2A16 0 22px, transparent 22px) top right / 32px 32px no-repeat,
    linear-gradient(45deg, #3E2A16 0 22px, transparent 22px) bottom left / 32px 32px no-repeat,
    linear-gradient(315deg, #3E2A16 0 22px, transparent 22px) bottom right / 32px 32px no-repeat;
  opacity: 0.88;
}
.kc-dedication {
  font-size: 1.17rem;
  line-height: 1.62;
  text-align: left;
  text-wrap: pretty;
  hyphens: manual;
}
/* Capitular iluminada: la «H» de «Hoy abro un nuevo capítulo» */
.kc-dedication::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  font-family: var(--kc-font-display);
  font-size: 3.4em;
  line-height: 0.85;
  color: var(--mi-manzana-tinta);
  text-shadow: 1px 1px 0 var(--mi-oro);
}

/* ── Cuenta regresiva · la bruja le pregunta al espejo ─────
   El mismo espejo que el gate grabó en oro, ahora en marfil y oro viejo; su cristal es el espejo mágico de la
   reina: humo oscuro donde los números responden. La bruja se asoma desde la esquina. */
.mi-espejo {
  position: relative;
  width: min(80vw, 20rem);
  aspect-ratio: 640 / 732;
  margin: 0 auto var(--kc-space-4);
}
.mi-espejo__marco { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; z-index: 1; pointer-events: none; }
/* el cristal: la elipse del marco (registro del gate pasado a la caja del marco) */
.mi-espejo__cristal {
  position: absolute;
  left: 18.2%;
  top: 13.5%;
  width: 63.2%;
  height: 71.9%;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-content: center;
  gap: 0.2rem;
  background:
    radial-gradient(ellipse 60% 34% at 34% 22%, rgba(220, 230, 255, 0.2), rgba(220, 230, 255, 0) 70%),
    radial-gradient(ellipse 80% 70% at 50% 55%, #2B2754, #17142F 62%, #0B0A1A);
  box-shadow: inset 0 0 22px rgba(4, 3, 14, 0.85), inset 0 0 2px rgba(255, 236, 190, 0.5);
  color: var(--mi-crema);
}
/* el humo verde de la reina gira despacio detrás de los números */
.mi-espejo__cristal::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(ellipse 30% 22% at 35% 40%, rgba(110, 200, 170, 0.22), rgba(110, 200, 170, 0) 70%),
    radial-gradient(ellipse 26% 30% at 66% 62%, rgba(150, 110, 210, 0.24), rgba(150, 110, 210, 0) 70%);
  animation: mi-humo 18s linear infinite paused;
}
/* cada segundo el cristal responde con una onda */
.mi-espejo__cristal::after {
  content: "";
  position: absolute;
  inset: 22% 18%;
  border-radius: 50%;
  border: 1px solid rgba(243, 213, 138, 0.5);
  opacity: 0;
  pointer-events: none;
  animation: mi-onda 1s ease-out infinite paused;
}
.mi-en-vista .mi-espejo__cristal::before,
.mi-en-vista .mi-espejo__cristal::after { animation-play-state: running; }
.mi-espejo__cristal > * { position: relative; }
/* los días grandes; horas, minutos y segundos debajo */
#counter .kc-countdown { grid-template-columns: repeat(3, auto); justify-content: center; gap: 0.1rem 0.75rem; }
#counter .kc-countdown__unit:first-child { grid-column: 1 / -1; margin-bottom: 0.25rem; }
#counter .kc-countdown__value {
  font-family: var(--kc-font-display);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.6rem);
  line-height: 1;
  color: #F3D58A;
  text-shadow: 0 0 10px rgba(243, 213, 138, 0.45), 0 1px 0 rgba(0, 0, 0, 0.6);
}
#counter .kc-countdown__unit:first-child .kc-countdown__value { font-size: clamp(3.1rem, 2.6rem + 2vw, 3.6rem); }
#counter .kc-countdown__label { font-size: 0.88rem; font-style: italic; color: #FBF3DE; line-height: 1.1; }
.kc-countdown__status { color: var(--mi-crema); font-size: 0.95rem; max-width: 9rem; text-wrap: balance; }
.kc-countdown__status:empty { display: none; }
.mi-espejo__fecha {
  margin-top: 0.35rem;
  font-family: var(--kc-font-display);
  font-size: clamp(0.7rem, 0.62rem + 0.3vw, 0.8rem);
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: #F7E3A8;
  text-shadow: 0 1px 2px rgba(4, 3, 14, 0.9);
}
/* la bruja: se asoma por la esquina del marco y se inclina hacia el cristal */
.mi-bruja {
  position: absolute;
  z-index: 2;
  left: -9%;
  bottom: -6%;
  width: 33%;
  max-width: none;
  transform-origin: 50% 100%;
  background: radial-gradient(ellipse 40% 4% at 50% 98%, rgba(24, 16, 8, 0.4), rgba(24, 16, 8, 0) 100%);
  padding-bottom: 0.2rem;
}
.mi-espejo.is-revealed .mi-bruja { animation: mi-bruja-sale 1400ms var(--kc-ease) 300ms both, mi-bruja-mira 6s ease-in-out 1700ms infinite paused; }
.mi-en-vista .mi-espejo.is-revealed .mi-bruja { animation-play-state: running, running; }
#counter:has(.kc-countdown:not([hidden])) #mi-counter-pending { display: none; }
#mi-counter-pending { max-width: 16rem; margin-inline: auto; font-style: italic; }

/* ── Familia · el letrero de la cabaña ─────────────────── */
#familia .kc-title { max-width: 21rem; margin-inline: auto; line-height: 1.28; letter-spacing: 0.02em; } /* R3: sin apretar */
#familia-padres {
  width: min(100%, 22rem);
  margin-inline: auto;
  padding: 3.7rem 2rem 1.9rem;
  background: url('../../assets/page/prop/letrero.webp') center / 100% 100% no-repeat;
}
#familia-padres ul,
#familia-padrinos ul { display: grid; gap: 0.15rem; }
#familia-padres li {
  font-family: var(--mi-font-nombre);
  font-size: clamp(1.8rem, 1.5rem + 1.2vw, 2.2rem);
  line-height: 1.15;
  color: #FBF1D8;
  text-shadow: 0 -1px 0 rgba(30, 18, 6, 0.9), 0 1px 1px rgba(255, 230, 190, 0.25);
}
#familia-padres li + li::before {
  content: "y";
  content: "y" / "";
  display: block;
  font-family: var(--mi-font-nombre);
  font-size: 1.5rem;
  line-height: 0.9;
  color: #FCE9AE;
}
#familia-padrinos li { font-family: var(--kc-font-display); color: var(--kc-ink); }

/* ── Historia · las fotos cuelgan de la rama ───────────── */
.kc-story { margin-bottom: var(--kc-space-4); }
.kc-story__item h3 { font-family: var(--kc-font-display); font-size: 1.15rem; color: var(--kc-ink); text-shadow: var(--mi-halo-claro); }
.kc-story__item p { max-width: 19rem; margin-inline: auto; font-style: italic; font-size: 1.15rem; color: var(--kc-ink); text-shadow: var(--mi-halo-claro); }
/* El jardín de los enanos: se camina de lado. Las fotos viven en polaroids que ellos tallaron (tablones clavados,
   una gema de la mina, una enredadera con rosas) y clavaron en el pasto; Tontín recibe, el conejo se asoma, los
   pajaritos se posan, Dormilón duerme en la hierba y Gruñón cuida el final. */
.mi-jardin { position: relative; margin-top: var(--kc-space-2); }
/* R3: la historia es solo la invitación a caminar el jardín */
#historia .kc-story { margin-bottom: 0; }
#historia .kc-story__item h3:empty { display: none; }
#historia .kc-story__item p { max-width: none; font-size: 1.3rem; text-shadow: var(--mi-halo-claro), var(--mi-halo-claro); }
#historia .kc-story__item p::after { content: " →"; content: " →" / ""; font-style: normal; }
.mi-jardin__pista {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mi-jardin__pista::-webkit-scrollbar { display: none; }
.mi-jardin__pista:focus-visible { outline: 3px solid var(--mi-azul-tinta); outline-offset: -3px; }
.mi-jardin__suelo {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 1.6rem;
  width: max-content;
  height: 31rem;
  padding: 0 3rem 4.2rem 2rem;
}
.mi-jardin__fondo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
  pointer-events: none;
  /* la banda se funde con la lámina de la sección arriba y abajo: sin rectángulo */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 90%, transparent);
}
.mi-polaroid {
  --r: -2.5deg;
  position: relative;
  z-index: 1;
  flex: none;
  width: 16rem;
  aspect-ratio: 392 / 490;
  scroll-snap-align: center;
  rotate: var(--r);
  transform-origin: 50% 120%;
}
.mi-polaroid:nth-of-type(2n) { --r: 2deg; margin-bottom: 0.6rem; }
.mi-polaroid:nth-of-type(3n) { --r: -1deg; margin-bottom: -0.4rem; }
/* la estaca que los enanos clavaron en el pasto */
.mi-polaroid::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 95%;
  width: 0.9rem;
  height: 3.8rem;
  translate: -50% 0;
  border-radius: 0 0 45% 45%;
  background: linear-gradient(90deg, #4A3018, #8A6038 45%, #5A3B20);
}
.mi-polaroid > figure { position: absolute; left: 11.8%; right: 11.8%; top: 9.4%; bottom: 29.4%; overflow: hidden; background: #2A2018; }
.mi-polaroid > figure img { width: 100%; height: 100%; object-fit: cover; }
.mi-polaroid__marco { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; pointer-events: none; }
.mi-polaroid__pie {
  position: absolute;
  left: 13%;
  right: 13%;
  top: 72%;
  bottom: 9%;
  display: grid;
  place-items: center;
  font-family: var(--mi-font-nombre);
  font-size: 1.85rem;
  line-height: 1;
  color: #3A2716;
}
/* las fotos de pie: la isa1 y la isa6 son horizontales */
.mi-polaroid > figure img { object-position: 50% 35%; }
.mi-jardin__pj { position: relative; z-index: 2; flex: none; max-width: none; background: radial-gradient(ellipse 38% 5% at 50% 97%, rgba(24, 16, 8, 0.38), rgba(24, 16, 8, 0) 100%); padding-bottom: 0.2rem; }
.mi-jardin__pj--tontin { height: 12rem; width: auto; margin-bottom: -1.2rem; scroll-snap-align: start; scroll-margin-left: 1rem; }
.mi-jardin__pj--conejo { height: 8rem; width: auto; margin: 0 -0.6rem -1.4rem; }
.mi-jardin__pj--grunon { height: 12rem; width: auto; margin-bottom: -1.2rem; }
.mi-jardin__pj--dormilon { position: absolute; left: -36%; bottom: -5.3rem; width: 12rem; height: auto; rotate: 2.5deg; }
.mi-jardin__ave { position: absolute; z-index: 2; max-width: none; height: auto; pointer-events: none; }
.mi-jardin__ave--a { top: -3.7rem; right: 4%; width: 4.1rem; rotate: 8deg; }
.mi-jardin__ave--b { top: -2.9rem; left: 2%; width: 5.2rem; rotate: -6deg; }
/* el jardín va apareciendo mientras se camina (pagina.mjs; sin JS todo queda puesto) */
.mi-jardin--vivo .mi-jardin__suelo > :not(.mi-jardin__fondo) { opacity: 0; translate: 0 1.6rem; transition: opacity 600ms var(--kc-ease), translate 900ms var(--kc-ease); }
.mi-jardin--vivo .mi-jardin__suelo > .is-visto { opacity: 1; translate: none; }
#historia.mi-en-vista .is-visto .mi-jardin__ave { animation: mi-ave-reposa 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
#historia.mi-en-vista .is-visto .mi-jardin__pj--dormilon { animation: mi-ronca 3.4s ease-in-out infinite; transform-origin: 50% 100%; }
#historia.mi-en-vista .mi-jardin__pj--tontin.is-visto { animation: mi-saluda 2.8s ease-in-out 600ms infinite; transform-origin: 50% 100%; }
#historia.mi-en-vista .mi-jardin__pj--conejo.is-visto { animation: mi-brinca 4.5s ease-in-out 400ms infinite; transform-origin: 50% 100%; }
.mi-jardin__flecha {
  position: absolute;
  z-index: 3;
  top: 2.2rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--mi-oro-tinta);
  border-radius: 50%;
  background: rgba(251, 247, 230, 0.9);
  color: var(--mi-tinta);
  box-shadow: 0 4px 12px rgba(60, 40, 10, 0.25);
  cursor: pointer;
}
.mi-jardin__flecha[hidden] { display: none; }
.mi-jardin__flecha:disabled { opacity: 0; pointer-events: none; }
.mi-jardin__flecha--izq { left: 8px; }
.mi-jardin__flecha--der { right: 8px; }
.mi-jardin__flecha svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mi-jardin__flecha:focus-visible { outline: 3px solid var(--mi-azul-tinta); outline-offset: 2px; }

/* ── Ubicaciones · bajo el castillo al atardecer ───────── */
#ubicaciones .kc-title { margin-bottom: clamp(13.5rem, 12rem + 6vw, 15rem); }
.kc-location {
  width: min(21rem, 100%); /* R3: la placa de «sin niños» comparte este ancho */
  margin-inline: auto;
  padding: 2.4rem 1.8rem 2.2rem;
  background: url('../../assets/page/prop/papel.webp') center / 100% 100% no-repeat;
  color: var(--kc-ink);
  justify-items: center;
}
.kc-location:only-child { grid-column: 1 / -1; }
.kc-location__title { font-style: italic; font-size: 1.1rem; color: var(--mi-oro-tinta); }
.kc-location h3 { font-family: var(--kc-font-display); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.3rem); color: var(--kc-ink); margin-bottom: var(--kc-space-3); }
.kc-location .kc-map-link { justify-self: center; }
.kc-location__time { margin: -0.4rem 0 var(--kc-space-2); font-family: var(--kc-font-display); font-size: 1.15rem; letter-spacing: 0.04em; color: var(--mi-oro-tinta); }
/* R4 · la nota de «sin niños» es un pergamino enrollado del cuento, sellado con lacre de manzana */
#ubicaciones > .kc-container > .kc-body {
  max-width: min(21rem, 100%);
  margin: var(--kc-space-6) auto 0;
  padding: 4.3rem 1.9rem 2.9rem;
  background: url('../../assets/page/prop/pergamino.webp') center / 100% 100% no-repeat;
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--kc-ink);
  text-shadow: none;
}

/* ── Itinerario · el sendero de faroles ────────────────── */
#itinerario .kc-title { max-width: 16rem; margin-inline: auto; }
/* La mina de los enanos: una línea de oro baja con el scroll y cada evento es un diamante que se enciende cuando
   la línea lo alcanza; al pie, la pirámide de los siete: Tontín, arriba, recibe la línea. */
.mi-mina { position: relative; max-width: 21rem; margin-inline: auto; --mi-linea: 1; }
.mi-mina::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0.4rem;
  height: calc(100% - var(--mi-pie, 12rem));
  width: 3px;
  translate: -50% 0;
  border-radius: 3px;
  background: linear-gradient(to bottom, #FCEBB4, #E2B95A 55%, #C1913A);
  box-shadow: 0 0 10px rgba(247, 214, 120, 0.6);
  transform-origin: 50% 0;
  transform: scaleY(var(--mi-linea));
}
.kc-schedule { position: relative; max-width: none; margin-inline: auto; gap: 0; }
.kc-stop {
  display: grid;
  grid-template-columns: 1fr 3rem 1fr;
  align-items: center;
  gap: var(--kc-space-3);
  min-height: 4.6rem;
}
/* el diamante de la mina: talla brillante, facetas de hielo, engaste de oro */
.kc-stop::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  width: 2.6rem;
  height: 2.3rem;
  justify-self: center;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='.45' stop-color='%23D6EEFF'/%3E%3Cstop offset='1' stop-color='%2384B9E8'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14 4h36l12 14-30 34L2 18z' fill='url(%23g)' stroke='%23E2B95A' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M2 18h60M14 4l6 14 12-14 12 14 6-14M20 18l12 34 12-34' fill='none' stroke='%235E8FBF' stroke-width='1.5' stroke-linejoin='round' opacity='.7'/%3E%3Cpath d='M20 18l12-14 12 14z' fill='%23fff' opacity='.6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: opacity 500ms var(--kc-ease), scale 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* el destello del diamante encendido */
.kc-stop::after {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 238, 255, 0.55), rgba(214, 238, 255, 0) 65%);
  z-index: -1;
  transition: opacity 700ms var(--kc-ease);
}
/* R3 · la última parada es el rubí de la manzana: el final de la fiesta */
.kc-stop:last-child::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 56'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE3E3'/%3E%3Cstop offset='.42' stop-color='%23E0474C'/%3E%3Cstop offset='1' stop-color='%237E1A22'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M14 4h36l12 14-30 34L2 18z' fill='url(%23g)' stroke='%23E2B95A' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M2 18h60M14 4l6 14 12-14 12 14 6-14M20 18l12 34 12-34' fill='none' stroke='%236E1F24' stroke-width='1.5' stroke-linejoin='round' opacity='.7'/%3E%3Cpath d='M20 18l12-14 12 14z' fill='%23fff' opacity='.5'/%3E%3C/svg%3E"); }
.kc-stop:last-child::after { background: radial-gradient(circle, rgba(255, 140, 140, 0.55), rgba(255, 140, 140, 0) 65%); }
/* con pagina.mjs la mina se enciende diamante por diamante; sin JS todo queda encendido */
.mi-mina--viva .kc-stop:not(.is-lit)::before { opacity: 0.3; scale: 0.7; }
.mi-mina--viva .kc-stop:not(.is-lit)::after { opacity: 0; }
.kc-stop__time { grid-column: 1; grid-row: 1; justify-self: end; font-family: var(--kc-font-display); font-size: 1.35rem; color: var(--mi-oro); text-shadow: var(--mi-halo-noche); }
.kc-stop__label { grid-column: 3; grid-row: 1; justify-self: start; text-align: left; font-size: 1.18rem; line-height: 1.25; color: var(--mi-crema); text-shadow: var(--mi-halo-noche); }
.kc-stop__time,
.kc-stop__label { transition: opacity 500ms var(--kc-ease); }
.mi-mina--viva .kc-stop:not(.is-lit) .kc-stop__time,
.mi-mina--viva .kc-stop:not(.is-lit) .kc-stop__label { opacity: 0.55; }
.mi-enanos { position: relative; display: block; width: min(56vw, 13.5rem); margin: -1.8rem auto 0; /* R4: la mano de Tontín toca el rubí; su sombrero libra la hora */ translate: var(--mi-enanos-x, -19%) 0; z-index: 1; }
/* R4 · el piso de los enanos: un montículo de roca y pasto a la luz de la luna, con cristales de la mina */
.mi-monticulo { position: absolute; z-index: 0; left: 50%; bottom: -3.2rem; width: min(82vw, 20rem); max-width: none; height: auto; translate: calc(-50% - min(56vw, 13.5rem) * 0.19) 0; pointer-events: none; }
/* la pirámide cierra la sección parada en su montículo (sin hueco antes de Vestimenta) */
#itinerario { padding-bottom: 3.4rem; } /* R4: el montículo cabe debajo de los pies */

/* ── Vestimenta · la etiqueta en el listón ─────────────── */
#vestimenta .kc-title {
  display: inline-block;
  margin-inline: auto;
  padding: 1.15rem 3.6rem 1.3rem;
  background: url('../../assets/page/prop/liston.webp') center / 100% 100% no-repeat;
  font-size: clamp(1.05rem, 0.95rem + 0.6vw, 1.3rem);
  color: #2E1F04;
  text-shadow: none;
}

/* Blanca Nieves y el príncipe: la etiqueta de gala, bailando */
.mi-pareja { width: min(62vw, 15rem); margin: var(--kc-space-4) auto 0; transform-origin: 50% 100%; background: radial-gradient(ellipse 42% 4% at 50% 98%, rgba(4, 6, 16, 0.55), rgba(4, 6, 16, 0) 100%); padding-bottom: 0.3rem; }
.mi-pareja.is-revealed { animation: mi-vals 1600ms var(--kc-ease) both; }
#vestimenta.mi-en-vista .mi-pareja.is-revealed { animation: mi-vals 1600ms var(--kc-ease) both, mi-mece-pareja 5s ease-in-out 1600ms infinite; }

/* ── Regalos · el pozo de los deseos ───────────────────── */
#regalos .kc-title { max-width: 18rem; margin-inline: auto; }
/* El pozo de los deseos abierto, con su árbol: los sobres llueven y caen dentro (detrás del borde de enfrente) */
.mi-pozo { position: relative; width: min(74vw, 18rem); aspect-ratio: 760 / 1212; margin: 0 auto var(--kc-space-3); background: radial-gradient(ellipse 46% 5% at 52% 96%, rgba(4, 6, 16, 0.5), rgba(4, 6, 16, 0) 100%); }
.mi-pozo__img,
.mi-pozo__frente { position: absolute; inset: 0; width: 100%; height: 100% !important; max-width: none; pointer-events: none; }
/* la boca del pozo: centro 52.6 % / 61.9 %, ancho 22.8 % */
.mi-lluvia { position: absolute; left: 44%; width: 17.5%; top: -2%; height: 64.4%; container-type: size; }
.mi-sobre {
  position: absolute;
  top: 0;
  left: var(--x, 30%);
  width: 2.1rem;
  aspect-ratio: 180 / 130;
  translate: -50% -100%;
  background: url('../../assets/page/prop/sobre.webp') center / contain no-repeat;
  opacity: 0;
}
.mi-sobre:nth-child(1) { --x: 20%; --d: 0s; --g: -14deg; }
.mi-sobre:nth-child(2) { --x: 70%; --d: 0.7s; --g: 12deg; }
.mi-sobre:nth-child(3) { --x: 45%; --d: 1.4s; --g: -6deg; }
.mi-sobre:nth-child(4) { --x: 85%; --d: 2.1s; --g: 18deg; }
.mi-sobre:nth-child(5) { --x: 30%; --d: 2.8s; --g: 8deg; }
.mi-sobre:nth-child(6) { --x: 60%; --d: 3.5s; --g: -16deg; }
.mi-sobre:nth-child(7) { --x: 50%; --d: 4.2s; --g: 4deg; }
#regalos.mi-en-vista .mi-pozo.is-revealed .mi-sobre { animation: mi-al-pozo 4.9s cubic-bezier(0.45, 0.05, 0.7, 0.6) var(--d) infinite; }
.kc-envelopes h3 { font-family: var(--kc-font-display); font-size: 1.3rem; color: var(--mi-crema); text-shadow: var(--mi-halo-noche); }
.kc-envelopes p { max-width: 19rem; margin-inline: auto; font-style: italic; font-size: 1.15rem; color: var(--mi-crema); text-shadow: var(--mi-halo-noche); }

/* ── RSVP · la carta real bajo las estrellas ───────────── */
.mi-heraldos { background: radial-gradient(circle at 50% 50%, rgba(239, 210, 90, 0.22), rgba(239, 210, 90, 0) 34%); display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-bottom: var(--kc-space-4); }
.mi-emblema { width: 4.6rem; }
.mi-ave { width: 4.2rem; }
.mi-ave--izq { margin-top: -1.2rem; }
.mi-ave--der { margin-top: 0.6rem; }
.mi-heraldos.is-revealed .mi-ave--izq { animation: mi-vuelo-izq 1300ms var(--kc-ease) both; }
.mi-heraldos.is-revealed .mi-ave--der { animation: mi-vuelo-der 1300ms var(--kc-ease) 150ms both; }
#rsvp .kc-eyebrow { display: none; }
.kc-rsvp-deadline:has(span:empty) { display: none; }
.kc-rsvp-deadline { color: var(--mi-crema); font-style: italic; text-wrap: balance; }
.kc-rsvp-offline,
.kc-rsvp-form {
  max-width: min(26rem, 100%);
  margin: var(--kc-space-3) auto 0;
  padding: 2.6rem 2rem 2.4rem;
  background: url('../../assets/page/prop/papel.webp') center / 100% 100% no-repeat;
  color: var(--kc-ink);
  --kc-focus: var(--mi-azul-tinta);
}
.kc-rsvp-offline { font-size: 1.2rem; font-style: italic; }
.kc-rsvp-form { text-align: left; }
.kc-rsvp-attendance legend,
.kc-field > label { font-family: var(--kc-font-body); font-size: 1.05rem; color: var(--kc-ink); margin-bottom: var(--kc-space-1); }
.kc-rsvp-attendance legend { width: 100%; text-align: center; font-family: var(--kc-font-display); font-size: 1.15rem; }
.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: #FFFCF2;
  color: var(--mi-tinta);
  font-family: var(--mi-font-ui);
}
/* Las respuestas son etiquetas de pergamino con filo de oro; la elegida se sella con lacre */
.kc-rsvp-attendance-face {
  min-height: 48px;
  padding: var(--kc-space-2) var(--kc-space-4);
  border: 1.5px solid var(--kc-line);
  border-radius: 6px;
  background: linear-gradient(to bottom, #FFF8E6, #F3E6C4);
  box-shadow: inset 0 1px 0 #FFFFFF, 0 2px 5px rgba(60, 40, 10, 0.18);
  font-size: 1.12rem;
  color: var(--mi-tinta);
  transition: background-color 240ms var(--kc-ease), color 240ms var(--kc-ease), box-shadow 240ms var(--kc-ease);
}
.kc-rsvp-attendance-option:has(input:checked) .kc-rsvp-attendance-face {
  border-color: var(--mi-manzana-sombra);
  background: radial-gradient(circle at 30% 25%, #B04245, #993235 55%, #7A2629);
  color: var(--mi-crema);
  box-shadow: 0 0 0 2px rgba(239, 210, 90, 0.75), 0 4px 10px rgba(80, 20, 24, 0.3);
}
.kc-rsvp-attendance-hint,
.kc-rsvp-decline-note,
.kc-rsvp-allocation-note { font-size: 1rem; font-style: italic; color: var(--kc-ink-muted); text-align: center; text-wrap: balance; }
.kc-rsvp-submit { min-height: 48px; }
.kc-rsvp-submit:disabled { background: var(--kc-ink-muted); box-shadow: none; cursor: not-allowed; }
.kc-rsvp-error { color: var(--kc-error); text-align: center; }
.kc-rsvp-status { color: var(--kc-ink); text-align: center; }
.kc-rsvp-status:empty { display: none; }

/* ── Captura ───────────────────────────────────────────── */
@keyframes kc-echoes-levita{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
.mi-echoes-cam { display: flex; justify-content: center; margin: var(--kc-space-4) auto; }
.mi-echoes-cam__svg { width: 150px; height: auto; overflow: visible; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45)); animation: kc-echoes-levita 4.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .mi-echoes-cam__svg { animation: none; } }
#captura .kc-body { max-width: 20rem; margin-inline: auto; font-style: italic; }

/* ── Secreto · muerde la manzana ───────────────────────── */
.kc-secret { max-width: 26rem; margin-inline: auto; }
.kc-secret > summary { display: grid; justify-items: center; gap: var(--kc-space-2); background: radial-gradient(circle at 50% 38%, rgba(196, 90, 90, 0.28), rgba(196, 90, 90, 0) 42%); }
.kc-secret__seal {
  width: 7.5rem;
  aspect-ratio: 520 / 560;
  background: url('../../assets/page/prop/manzana.webp') center / contain no-repeat;
  transition: transform 420ms var(--kc-ease);
}
.kc-secret > summary:hover .kc-secret__seal { transform: rotate(-6deg) scale(1.04); }
.kc-secret[open] .kc-secret__seal { background-image: url('../../assets/page/prop/manzana-mordida.webp'); animation: mi-mordida 600ms var(--kc-ease) both; }
.kc-secret__hint { font-style: italic; font-size: 1.15rem; color: var(--mi-crema); text-shadow: var(--mi-halo-noche); }
.kc-secret__card {
  padding: 2.4rem 1.9rem 2.2rem;
  background: url('../../assets/page/prop/papel.webp') center / 100% 100% no-repeat;
  color: var(--kc-ink);
}
.kc-secret[open] .kc-secret__card { animation: mi-iris 1000ms var(--kc-ease) both; }
.mi-secreto-vivo[open] > summary { display: none; }
.mi-secreto-vivo.is-mordida .kc-secret__seal,
.mi-secreto-vivo.is-mordiendo .kc-secret__seal { background-image: url('../../assets/page/prop/manzana-mordida.webp'); }
.mi-secreto-vivo.is-mordiendo .kc-secret__seal { animation: mi-mordida 450ms var(--kc-ease) both; }
.mi-secreto-vivo.is-yendo .kc-secret__seal { transform: scale(0.15) rotate(-20deg); opacity: 0; transition: transform 350ms ease-in, opacity 350ms ease-in; }
.mi-secreto-vivo.is-cerrando .kc-secret__card { animation: none; opacity: 0; transform: scale(0.96); transition: opacity 500ms var(--kc-ease), transform 500ms var(--kc-ease); }
.mi-secreto-vivo.is-vuelve .kc-secret__seal { animation: mi-manzana-vuelve 700ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.kc-secret__card:focus { outline: none; }
.kc-secret__card h2 { font-family: var(--kc-font-display); font-size: 1.4rem; color: var(--kc-ink); margin-bottom: var(--kc-space-3); text-shadow: none; }
.kc-secret__message { font-size: 1.15rem; line-height: 1.6; color: var(--kc-ink); }
.kc-secret__signature { margin-top: var(--kc-space-3); font-family: var(--mi-font-nombre); font-size: 1.9rem; color: var(--mi-manzana-tinta); }

/* ── Footer · el castillo de noche ─────────────────────── */
.kc-footer { padding: 7.5rem 0 calc(var(--kc-space-3) + env(safe-area-inset-bottom)); background: var(--mi-noche); color: var(--kc-footer-ink); }
/* R4: el castillo entero se alza sobre la lámina del secreto, nunca debajo de ella: el secreto deja de ser su propia capa,
   su lámina queda al fondo (z -1), el castillo del footer encima y el contenido del secreto (z 1) siempre al frente. El
   aire de abajo deja que las agujas suban sin tocar «Muerde la manzana». */
#secreto { isolation: auto; background: none; padding-bottom: 6.5rem; }
#secreto > .kc-container { z-index: 1; }
#secreto > .mi-plate {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 6rem), transparent);
}
#kc-footer > .mi-plate {
  z-index: -3; /* lámina, castillo (-2) y velo (-1): el velo sí oscurece la base del castillo */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5rem);
  mask-image: linear-gradient(to bottom, transparent, #000 5rem);
}
/* un velo de noche detrás del texto: se lee sobre la aldea y el puente */
#kc-footer .kc-footer__inner::before {
  content: "";
  position: absolute;
  inset: -2.5rem 0 -1rem;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(8, 11, 28, 0), rgba(8, 11, 28, 0.56) 30%, rgba(8, 11, 28, 0.74) 70%);
  pointer-events: none;
}
#kc-footer .kc-footer__mark,
#kc-footer .kc-footer__inner p,
#kc-footer .kc-footer__link { text-shadow: 0 0 6px rgba(6, 9, 22, 0.95), 0 0 2px rgba(6, 9, 22, 1), 0 0 3px rgba(6, 9, 22, 1), 0 1px 14px rgba(6, 9, 22, 0.9); }
.kc-footer :focus-visible { outline-color: var(--mi-oro); }
/* el castillo de la reina a la luz de la luna es el fondo del final: su base toca el borde, el texto va encima y
   sus agujas suben, enteras, hasta la noche del secreto. */
.mi-castillo {
  position: absolute;
  z-index: -2;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  display: block;
  width: min(100%, 24rem);
  max-width: none;
  height: auto;
  /* entero y nítido hasta la última aguja; solo el lado del puente sale de la noche, y abajo toca el borde */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 9%);
  mask-image: linear-gradient(to right, transparent, #000 9%);
}
#kc-footer .kc-footer__inner { gap: 0.3rem; }
.kc-footer__mark { font-family: var(--kc-font-display); font-size: 0.82rem; letter-spacing: 0.12em; color: var(--mi-oro); }
.kc-footer__icon { position: relative; border: 1px solid currentColor; border-radius: 50%; }
.kc-footer__icon::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; }
.kc-footer__inner p { color: var(--mi-crema); font-size: 1rem; text-shadow: var(--mi-halo-noche); }
.kc-footer__inner p:first-of-type { margin-top: var(--kc-space-1); font-family: var(--mi-font-nombre); font-size: 1.5rem; line-height: 1.15; color: var(--kc-footer-ink); text-wrap: balance; }
.kc-footer__link { color: var(--mi-crema); text-decoration: none; font-size: 0.95rem; }

/* ── Ring musical · la manzana dorada ──────────────────
   El sello de la invitación (la manzana con la reina y Blanca Nieves) suelto, sin disco ni órbita. Sonando se mece
   colgada del tallo, un brillo de oro la recorre y respira un halo tibio; en pausa queda quieta y apagada. */
.kc-ring {
  --mi-manzana-img: url('../../assets/page/cut/emblema.webp');
  overflow: visible;
  transition: transform 260ms var(--kc-ease);
}
.kc-ring:active { transform: scale(0.94); }
.kc-ring__emblem-slot {
  position: absolute;
  inset: 0;
  background: var(--mi-manzana-img) center / contain no-repeat;
  transform-origin: 58% 6%; /* cuelga del tallo */
  /* legible sobre la mañana clara y sobre la noche: sombra oscura fina + filo crema */
  filter: drop-shadow(0 0 1.5px rgba(255, 246, 220, 0.9)) drop-shadow(0 3px 5px rgba(10, 12, 28, 0.55));
  transition: filter 400ms var(--kc-ease);
}
/* el brillo: una banda de luz recortada a la forma de la manzana */
.kc-ring__emblem-slot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 248, 214, 0) 35%, rgba(255, 248, 214, 0.85) 50%, rgba(255, 248, 214, 0) 65%) -160% 0 / 250% 100% no-repeat;
  -webkit-mask: var(--mi-manzana-img) center / contain no-repeat;
  mask: var(--mi-manzana-img) center / contain no-repeat;
  opacity: 0;
}
/* el halo tibio detrás */
.kc-ring::before {
  content: "";
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(247, 214, 120, 0.5), rgba(247, 214, 120, 0) 66%);
  opacity: 0;
  pointer-events: none;
}
/* en pausa: quieta y apagada, pero entera (sin transparencia fantasma) */
.kc-ring[data-kc-state="paused"] .kc-ring__emblem-slot { filter: saturate(0.3) brightness(0.78) drop-shadow(0 0 1.5px rgba(255, 246, 220, 0.9)) drop-shadow(0 3px 5px rgba(10, 12, 28, 0.55)); }
/* R3: la música empieza con el toque del espejo, pero la manzana llega al final del hero, cuando los pajaritos se
   posan (pagina.mjs pone .mi-ring-listo). Su etiqueta es de la piel; la del core no se usa. Sin pagina.mjs la manzana
   aparece sola 6 s después de abrir. */
#music-toast { display: none !important; }
html:not(.mi-ring-listo) .kc-ring { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.mi-pagina) body.is-gate-open .kc-ring { animation: mi-aparece 1ms 6s both; }
.mi-ring-listo .kc-ring { transform-origin: 58% 6%; animation: mi-manzana-llega 1000ms var(--kc-ease) both; }
.kc-ring[data-kc-state="playing"] .kc-ring__emblem-slot { animation: mi-manzana-mece 3.2s ease-in-out infinite; }
.kc-ring[data-kc-state="playing"] .kc-ring__emblem-slot::after { opacity: 1; animation: mi-manzana-brillo 3.8s ease-in-out infinite; }
.kc-ring[data-kc-state="playing"]::before { animation: mi-manzana-halo 3.2s ease-in-out infinite; }
/* el aviso: una etiqueta de pergamino colgada de la manzana */
.kc-music-toast {
  /* al lado de la manzana, no encima: así nunca tapa el listón de la fecha del hero */
  right: calc(max(16px, env(safe-area-inset-right)) + var(--kc-ring-size) + 14px);
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 2px);
  max-width: min(15rem, calc(100vw - var(--kc-ring-size) - 46px));
  padding: 0.7rem 0.95rem;
  border-radius: 4px;
  background: url('../../assets/page/prop/papel.webp') center / 100% 100% no-repeat, #F4E9CF;
  color: var(--kc-ink);
  font-size: 1.02rem;
  font-style: italic;
  line-height: 1.3;
  box-shadow: 0 6px 16px rgba(10, 12, 28, 0.35);
}
@media (max-height: 760px) { .kc-music-toast { padding: 0.45rem 0.75rem; font-size: 0.9rem; line-height: 1.22; } }
.kc-music-toast::after { /* el hilo hasta la manzana */
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--mi-oro-tinta);
}

/* ── Indicador de scroll: sale justo después de la fecha, cede su lugar mientras cuelga la etiqueta de la música y
   se va con el primer scroll ── */
.mi-desliza {
  position: fixed;
  z-index: 49;
  left: 50%;
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 2px);
  translate: -50% 0;
  display: grid;
  justify-items: center;
  min-height: 44px;
  padding: 0.4rem 1.1rem 0.15rem;
  border: 1px solid rgba(90, 65, 12, 0.35);
  border-radius: 1.4rem;
  background: rgba(251, 247, 230, 0.93);
  box-shadow: 0 6px 16px rgba(30, 40, 20, 0.28);
  color: var(--kc-ink);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms var(--kc-ease), visibility 0s linear 600ms;
}
html:not(.mi-pagina) body.is-gate-open .mi-desliza { animation: mi-aparece 1ms 12s both; } /* sin pagina.mjs */
.mi-desliza-lista .mi-desliza:not(.is-ido, .is-cede) { opacity: 1; visibility: visible; transition: opacity 600ms var(--kc-ease); }
.mi-desliza__flecha { width: 1.5rem; height: 1.5rem; fill: none; stroke: var(--mi-manzana-tinta); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mi-desliza-lista .mi-desliza__flecha { animation: mi-desliza 1.6s ease-in-out infinite; }

/* ── Escritorio: el libro abierto al centro de la noche ── */
@media (min-width: 48rem) {
  /* antes de que gate.mjs mida: la escena ya nace en la columna (sin salto al cargar) */
  .kc-gate { --mi-hero-x: calc(50vw - 15rem); --mi-hero-w: 30rem; }
  body { background: radial-gradient(ellipse at 50% 20%, #1F2A4C, var(--mi-noche) 70%); }
  #invitation-content,
  #kc-footer { max-width: 30rem; margin-inline: auto; box-shadow: 0 0 90px rgba(0, 0, 0, 0.55); }
  .kc-hero,
  .kc-gate { --mi-art-w: min(24rem, calc((var(--mi-alto-vista) - 13rem) * 0.82)); --kc-text-hero: 3.3rem; }
  .kc-gate__body { max-width: 30rem; }
  .mi-espejo { width: 20rem; }
  .mi-pozo { width: 18rem; }
}

/* ── Movimiento ────────────────────────────────────────── */
@keyframes mi-gate-entra { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } }
@keyframes mi-gate-sale { from { opacity: 1; } to { opacity: 0; } }
@keyframes mi-escarcha { from { opacity: 0; } to { opacity: 0.3; } }
@keyframes mi-tinta { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes mi-dolly-fondo { from { transform: scale(1.03); } to { transform: none; } }
@keyframes mi-dolly-medio { from { transform: scale(1.1); } to { transform: none; } }
@keyframes mi-dolly-frente { from { transform: scale(1.22); } to { transform: none; } }
@keyframes mi-mece-medio { 0%, 100% { transform: none; } 50% { transform: translateX(2px) rotate(0.12deg); } }
@keyframes mi-mece-frente { 0%, 100% { transform: none; } 50% { transform: translate(-3px, 1px) rotate(-0.15deg); } }
@keyframes mi-deriva { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
@keyframes mi-deriva-inv { from { transform: translateX(7%); } to { transform: translateX(-7%); } }
@keyframes mi-escarcha-total { from { opacity: 0; } to { opacity: 1; } }
@keyframes mi-luna { 0% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 0.8; } 100% { opacity: 0; } }
@keyframes mi-dosel-izq { from { transform: none; } to { transform: translate(-88%, -48%) rotate(-9deg); } }
@keyframes mi-dosel-der { from { transform: none; } to { transform: translate(88%, -48%) rotate(9deg); } }
@keyframes mi-sol { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mi-amanecer { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0.35; } }
@keyframes mi-iris { from { clip-path: ellipse(0% 0% at 50% 20%); } to { clip-path: ellipse(150% 150% at 50% 20%); } }
@keyframes mi-mordida { 0% { transform: scale(1); } 35% { transform: scale(0.9) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
@keyframes mi-al-pozo {
  0% { transform: translateY(0) rotate(var(--g)); opacity: 0; }
  10% { opacity: 1; }
  45% { transform: translateY(45cqh) translateX(-0.4rem) rotate(calc(var(--g) * -1)); }
  86% { opacity: 1; }
  100% { transform: translateY(100cqh) translateX(0.2rem) rotate(var(--g)) scale(0.6); opacity: 1; }
}
@keyframes mi-manzana-mece { 0%, 100% { rotate: -7deg; } 50% { rotate: 7deg; } }
@keyframes mi-manzana-brillo { 0%, 30% { background-position: -160% 0; } 75%, 100% { background-position: 260% 0; } }
@keyframes mi-manzana-halo { 0%, 100% { opacity: 0.35; transform: scale(0.92); } 50% { opacity: 0.85; transform: scale(1.06); } }
@keyframes mi-respira { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.75; } }
@keyframes mi-petalo { 0% { opacity: 0; transform: none; } 8% { opacity: 0.9; } 85% { opacity: 0.85; } 100% { opacity: 0; transform: translate(var(--x), 100vh) rotate(560deg); } }
@keyframes mi-ave-reposa { 0%, 100% { transform: none; } 35% { transform: translateY(-6%) rotate(-4deg); } 50% { transform: rotate(5deg); } 60% { transform: none; } }
@keyframes mi-ronca { 0%, 100% { transform: none; } 50% { transform: scaleY(1.035) translateY(-1%); } }
@keyframes mi-saluda { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-4deg); } 86% { transform: rotate(3deg); } 93% { transform: rotate(-2deg); } }
@keyframes mi-brinca { 0%, 80%, 100% { transform: none; } 86% { transform: translateY(-14%) rotate(-3deg); } 92% { transform: none; } 95% { transform: translateY(-5%); } }
@keyframes mi-vals { from { transform: rotate(-8deg) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mi-mece-pareja { 0%, 100% { transform: none; } 50% { transform: rotate(2deg) translateX(2%); } }
@keyframes mi-humo { to { transform: rotate(360deg); } }
@keyframes mi-onda { 0% { transform: scale(0.35); opacity: 0.55; } 100% { transform: scale(1.25); opacity: 0; } }
@keyframes mi-bruja-sale { from { transform: translateX(-35%) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mi-bruja-mira { 0%, 100% { transform: none; } 50% { transform: rotate(2.5deg) translateX(3%); } }
@keyframes mi-vuelo-izq { from { transform: translate(-2.5rem, -1rem); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mi-aparece { to { opacity: 1; visibility: visible; pointer-events: auto; } }
@keyframes mi-manzana-llega {
  0% { opacity: 0; translate: 0 -2.6rem; rotate: -16deg; }
  45% { opacity: 1; translate: 0 0.25rem; rotate: 9deg; }
  68% { rotate: -5deg; translate: none; }
  86% { rotate: 2deg; }
  100% { opacity: 1; visibility: visible; translate: none; rotate: none; }
}
@keyframes mi-manzana-vuelve { 0% { opacity: 0; transform: scale(0.3); } 100% { opacity: 1; transform: none; } }
@keyframes mi-desliza { 0%, 100% { translate: 0 -2px; opacity: 0.75; } 50% { translate: 0 4px; opacity: 1; } }
@keyframes mi-vuelo-der { from { transform: translate(2.5rem, -1.2rem); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .mi-dosel,
  .mi-velo,
  .mi-luna { display: none; }
  .mi-espejo-gate__vidrio,
  .mi-alba-capa,
  .mi-niebla { animation: none; }
  .mi-niebla { opacity: 1; }
  .kc-gate .kc-eyebrow,
  #gate .mi-nombre,
  .kc-gate__date,
  .kc-gate__open,
  .mi-espejo-gate__linea,
  .mi-espejo-gate__relleno { animation: none; }
  body.is-gate-open .kc-hero::after,
  .mi-amanece .kc-hero::after,
  .mi-pareja.is-revealed,
  .mi-heraldos.is-revealed .mi-ave,
  .kc-secret[open] .kc-secret__seal,
  .kc-secret[open] .kc-secret__card { animation: none; }
  #regalos .mi-pozo.is-revealed .mi-sobre { animation: none; }
  .mi-espejo__cristal::before,
  .mi-espejo__cristal::after,
  .mi-espejo.is-revealed .mi-bruja,
  #hero .mi-hero-vivo *,
  #hero .mi-hero-vivo::after,
  .mi-aves-hero .mi-ave-hero,
  #historia .mi-jardin *,
  #vestimenta .mi-pareja.is-revealed,
  .kc-ring .kc-ring__emblem-slot,
  .kc-ring .kc-ring__emblem-slot::after,
  .kc-ring::before,
  .mi-ring-listo .kc-ring,
  .mi-desliza__flecha,
  .mi-secreto-vivo .kc-secret__seal { animation: none !important; }
  .mi-desliza,
  .mi-secreto-vivo .kc-secret__seal,
  .mi-secreto-vivo .kc-secret__card { transition: none !important; }
  .kc-ring[data-kc-state="playing"]::before { opacity: 0.6; }
  .mi-petalo { display: none; }
  .mi-sobre:nth-child(-n+2) { opacity: 1; transform: translateY(96cqh) rotate(var(--g)); }
  .kc-secret__seal,
  .kc-gate__open,
  .kc-captura__cta,
  .kc-rsvp-submit,
  .kc-map-link,
  .kc-registry a,
  .kc-photo-stack__next,
  .kc-bank button[data-kc-copy],
  .kc-rsvp-attendance-face { transition: none; }
}