/* skin: F4 · world. Láminas «grabar e iluminar» y la reimpresión del idioma. */

/* ── Láminas ──────────────────────────────────────────── */
.ni-plate img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

/* La línea de grabado está siempre debajo; el color la inunda desde una mancha de acuarela.
   La máscara crece desde ~35 % 30 % y termina centrada en esa misma mancha (posición animada junto al tamaño).
   340 % × 340 % del propio alto y ancho: en una lámina vertical la mancha es una elipse vertical que sí llega a las esquinas. */
.ni-plate .ni-plate__color {
  opacity: 1;
  -webkit-mask-image: url('../../../assets/page/bloom-mask.webp');
  mask-image: url('../../../assets/page/bloom-mask.webp');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0% 0%;
  mask-size: 0% 0%;
  -webkit-mask-position: 35% 30%;
  mask-position: 35% 30%;
}
.ni-plate.is-lit .ni-plate__color {
  -webkit-mask-size: 400% 400%;
  mask-size: 400% 400%;
  -webkit-mask-position: 58% 54%;
  mask-position: 58% 54%;
  transition: -webkit-mask-size 1800ms cubic-bezier(0.3, 0.6, 0.3, 1), -webkit-mask-position 1800ms cubic-bezier(0.3, 0.6, 0.3, 1),
    mask-size 1800ms cubic-bezier(0.3, 0.6, 0.3, 1), mask-position 1800ms cubic-bezier(0.3, 0.6, 0.3, 1);
}
/* Sin movimiento: el color directo, sin máscara */
.ni-plate.is-static .ni-plate__color {
  -webkit-mask-image: none;
  mask-image: none;
  transition: none;
}

/* ── Reimpresión: pliego húmedo + rodillo ─────────────── */
.ni-reprint__sheet {
  /* La banda de tinta verde se dibuja en el borde inferior del recorte, justo bajo el rodillo */
  background:
    linear-gradient(180deg, transparent calc(var(--ni-sweep, 0%) - 13px), #1F332B calc(var(--ni-sweep, 0%) - 13px) calc(var(--ni-sweep, 0%) - 3px), #2D4A3F calc(var(--ni-sweep, 0%) - 3px) var(--ni-sweep, 0%)),
    repeating-linear-gradient(180deg, rgba(40, 58, 52, 0.07) 0 1px, transparent 1px 6px),
    url('../../../assets/page/paper.webp') 0 0 / 256px 256px repeat,
    var(--kc-canvas);
}
.ni-reprint__roller {
  inset-inline: 0;
  width: min(100vw, 720px);
  max-width: none;
  margin-inline: auto;
  filter: drop-shadow(0 7px 8px rgba(30, 36, 51, 0.4));
}

/* Tinta fresca: el texto reimpreso se asienta en 700 ms. Lo aún no revelado queda como está. */
body.ni-fresh-ink main :is(h1, h2, h3, p, li, dt, dd, a, button, blockquote, span):not([data-reveal]:not(.is-revealed)) {
  animation: ni-ink-settle 700ms ease-out;
}
@keyframes ni-ink-settle {
  from { opacity: 0.82; text-shadow: 0 0 0.5px currentColor, 0 0 3px rgba(40, 58, 52, 0.35); }
}
body.ni-reprint-fade main { opacity: 0.6; transition: opacity 75ms linear; }

@media (prefers-reduced-motion: reduce) {
  .ni-plate.is-lit .ni-plate__color { transition: none; }
  body.ni-fresh-ink main :is(h1, h2, h3, p, li, dt, dd, a, button, blockquote, span) { animation: none; }
}

/* ══ Secciones sobre láminas ═════════════════════════════
   Cada lámina mide 810 de ancho: --ni-ar = alto/ancho. Las bandas (--pt arriba, --pb abajo) son fracciones del alto de la lámina
   y dejan el texto en el campo abierto; si el texto es más alto, la sección crece y la lámina (cover) escala un poco. */
:is(#dedicatoria, #counter, #familia, #historia, #itinerario, #vestimenta, #regalos, #rsvp, #captura, #secreto) {
  --ni-h: calc(var(--col) * var(--ni-ar));
  min-height: var(--ni-h);
  padding-block: calc(var(--ni-h) * var(--pt) + 12px) calc(var(--ni-h) * var(--pb) + 12px);
  display: grid;
  align-content: center;
}
#dedicatoria { --ni-ar: 1.4815; --pt: 0.27; --pb: 0.34; }
#counter { --ni-ar: 1.6667; --pt: 0.2; --pb: 0.22; }
#familia { --ni-ar: 2.5926; --pt: 0.17; --pb: 0.2; }
#historia { --ni-ar: 2.642; --pt: 0.15; --pb: 0.17; }
#itinerario { --ni-ar: 2.5926; --pt: 0.19; --pb: 0.2; }
#vestimenta { --ni-ar: 1.4815; --pt: 0.33; --pb: 0.38; }
@media (max-width: 360px) { #vestimenta { --pt: 0.4; } } /* a 320 el faldón del cortinaje baja más que el texto */
#regalos { --ni-ar: 1.9136; --pt: 0.26; --pb: 0.27; }
#rsvp { --ni-ar: 1.4815; --pt: 0.17; --pb: 0.42; }
#captura { --ni-ar: 1.358; --pt: 0.37; --pb: 0.3; }
#secreto { --ni-ar: 1.7284; --pt: 0.26; --pb: 0.28; }
/* Si el texto es más alto que la lámina, la lámina se estira con la sección (fill) y las bandas de arte conservan su proporción: el texto nunca pisa el arte */
:is(#familia, #historia, #itinerario, #regalos, #rsvp, #secreto, #vestimenta, #captura, #dedicatoria, #counter) .ni-plate img { object-fit: fill; }

/* ── Costuras: una ramita cosida a caballo sobre 3 uniones (no en todas) ── */
:is(#dedicatoria, #ubicaciones, #rsvp)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 190px;
  aspect-ratio: 360 / 220;
  translate: -50% -52%;
  background: url('../../../assets/page/sprig.webp') center / contain no-repeat;
  opacity: 0.7;
  pointer-events: none;
}
#ubicaciones { position: relative; isolation: isolate; }

/* ── Hero ya está en theme.css ── */

/* ── Dedicatoria: columna de lectura ── */
#dedicatoria .kc-container { max-width: 27rem; }
#dedicatoria .kc-dedication { text-align: left; hyphens: auto; text-wrap: pretty; }

/* ── Counter: cartela dorada de reloj de repisa (Regencia), numerales Bodoni entre rombos ── */
#counter .kc-countdown {
  position: relative;
  box-sizing: border-box;
  width: min(92%, 30rem);
  margin-inline: auto;
  aspect-ratio: 840 / 460;
  padding: 14.6% 11.4% 13.4%;
  align-content: center;
  align-items: center;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: url('../../../assets/page/counter-cartouche.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(0 10px 12px rgba(70, 60, 40, 0.22));
}
#counter .kc-countdown__unit { position: relative; padding: 0; gap: 4px; }
#counter .kc-countdown__unit + .kc-countdown__unit { border: 0; }
/* Dos rombos de latón, como dos puntos de reloj, entre unidad y unidad: dibujados en CSS */
#counter .kc-countdown__unit + .kc-countdown__unit::before,
#counter .kc-countdown__unit + .kc-countdown__unit::after {
  content: "";
  position: absolute;
  left: 0;
  width: 6px;
  height: 6px;
  translate: -50% -50%;
  rotate: 45deg;
  background: linear-gradient(135deg, #F0DCA6, #C9A45C 55%, #7A5A2C);
  box-shadow: 0 0 0 0.5px rgba(40, 58, 52, 0.7);
}
#counter .kc-countdown__unit + .kc-countdown__unit::before { top: 22%; }
#counter .kc-countdown__unit + .kc-countdown__unit::after { top: 52%; }
#counter .kc-countdown__value { font-size: clamp(1.7rem, 1rem + 3.8vw, 2.9rem); color: var(--kc-ink); text-shadow: 0 1px 0 rgba(255, 252, 244, 0.8); }
#counter .kc-countdown__label { font-variant: small-caps; text-transform: none; font-size: clamp(0.78rem, 0.7rem + 0.4vw, 0.9rem); font-weight: 700; letter-spacing: 0.14em; color: var(--kc-ink-muted); }
@media (max-width: 360px) { #counter .kc-countdown__label { letter-spacing: 0.05em; font-size: 0.74rem; } }
#counter .kc-countdown__status { font-style: italic; font-size: 1.15rem; color: var(--kc-ink); }
#counter .kc-note { color: var(--kc-ink); font-size: 1.02rem; text-align: center; border: 0; padding: 0; margin-block: var(--kc-space-3) 0; }

/* ── Familia: cada grupo en un óvalo de camafeo horizontal ── */
#familia .kc-family { justify-items: center; gap: var(--kc-space-3); }
#familia .kc-family + .kc-family { margin-top: var(--kc-space-3); }
#familia .kc-family__group {
  width: min(100%, 21rem);
  aspect-ratio: 1.62;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 0 14.5%;
  background: url('../../../assets/page/cameo-frame.webp') center / 100% 100% no-repeat;
}
#familia .kc-family__group h3 { font-size: 0.74rem; letter-spacing: 0.14em; margin-bottom: 2px; text-wrap: balance; }
#familia .kc-family__group ul { display: grid; gap: 0; }
#familia .kc-family__group li { font-size: 1.08rem; line-height: 1.25; text-wrap: balance; }

/* ── Historia: galería de retratos del palacio; tres marcos dorados colgados en el muro ── */
#historia .kc-galeria { border-block-start: 0; padding-block-start: 0; }
/* Marco dorado sobre la foto: el marco (PNG) va delante, la foto detrás recortada a la abertura. Mientras falta la foto, damasco marfil con un camafeo tenue. */
.ni-portrait {
  --ni-frame: url('../../../assets/page/frame-oval.webp');
  --ni-ix: 11.4%;
  --ni-iy: 9%;
  --ni-rad: 50%;
  position: relative;
  display: block;
  margin: 0;
  overflow: visible;
  aspect-ratio: 440 / 550;
  isolation: isolate;
}
.ni-portrait[data-kc-photo]:empty { display: block; }
.ni-portrait--rect { --ni-frame: url('../../../assets/page/frame-rect.webp'); --ni-ix: 9%; --ni-iy: 11.6%; --ni-rad: 4px; aspect-ratio: 600 / 450; }
.ni-portrait::before {
  content: "";
  position: absolute;
  inset: var(--ni-iy) var(--ni-ix);
  z-index: -1;
  border-radius: var(--ni-rad);
  background:
    linear-gradient(rgba(246, 241, 228, 0.66), rgba(246, 241, 228, 0.66)),
    url('../../../assets/gate/cameo.webp') center / 64% auto no-repeat,
    radial-gradient(circle at 25% 25%, rgba(174, 185, 204, 0.4) 0 2.2px, transparent 2.6px) 0 0 / 18px 18px,
    radial-gradient(circle at 25% 25%, rgba(174, 185, 204, 0.4) 0 2.2px, transparent 2.6px) 9px 9px / 18px 18px,
    #F3EEE1;
  box-shadow: inset 0 3px 8px rgba(60, 50, 30, 0.28);
}
.ni-portrait--rect::before { background-size: auto, auto 62%, 18px 18px, 18px 18px, auto; }
.ni-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ni-frame) center / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 9px rgba(40, 50, 80, 0.38));
  pointer-events: none;
}
.ni-portrait img {
  position: absolute;
  inset: var(--ni-iy) var(--ni-ix);
  z-index: 0;
  width: calc(100% - 2 * var(--ni-ix));
  height: calc(100% - 2 * var(--ni-iy));
  object-fit: cover;
  border-radius: var(--ni-rad);
}
/* Colgado «salón»: los marcos se corren a la izquierda y dejan el hueco de la ventana al otro lado */
.ni-gallery { position: relative; display: grid; justify-items: center; gap: var(--kc-space-5); margin-block-start: calc(var(--kc-space-5) + 30px); padding-inline: 2rem 5rem; box-sizing: border-box; width: 100%; min-width: 0; }
.ni-gallery > .ni-portrait--rect { width: min(66vw, 290px); }
.ni-gallery__row { display: flex; justify-content: center; align-items: flex-start; gap: 6px; width: 100%; }
.ni-gallery__row .ni-portrait { width: min(29vw, 150px); }
.ni-gallery__row .ni-portrait:first-child { rotate: -1.2deg; margin-block-start: 6px; }
.ni-gallery__row .ni-portrait:last-child { rotate: 0.9deg; margin-block-start: -4px; }
/* El clavo y el cordón del retrato grande: una V fina de hilo que sale de un clavo de latón */
.ni-gallery::before {
  content: "";
  position: absolute;
  top: -30px;
  left: calc(50% - 6.5%);
  width: min(44vw, 200px);
  height: 36px;
  translate: -50% 0;
  background:
    radial-gradient(circle at 50% 3px, #F0DCA6 0 2px, #7A5A2C 2.6px 3.4px, transparent 3.8px),
    linear-gradient(to top left, transparent calc(50% - 0.7px), #5C4426 calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)) left bottom / 50% calc(100% - 4px) no-repeat,
    linear-gradient(to top right, transparent calc(50% - 0.7px), #5C4426 calc(50% - 0.7px) calc(50% + 0.7px), transparent calc(50% + 0.7px)) right bottom / 50% calc(100% - 4px) no-repeat;
  pointer-events: none;
}
/* Sobre el muro azul polvo (#C3CCDA) el latón de las sobrecejas no llega a 4.5:1: tinta */
#historia .kc-eyebrow, #historia .kc-story__year { color: var(--kc-ink); }

/* ── Ubicaciones: tarjetas de visita con su viñeta ovalada ── */
#ubicaciones {
  background: url('../../../assets/page/ubicaciones.webp') center / cover no-repeat var(--ni-s5);
  padding-block: calc(var(--col) * 0.3) calc(var(--col) * 0.3);
  min-height: calc(var(--col) * 1.358);
}
#ubicaciones .kc-locations { gap: var(--kc-space-5); }
.kc-location {
  position: relative;
  padding: var(--kc-space-4) var(--kc-space-4) var(--kc-space-5);
  border: 1px solid rgba(40, 58, 52, 0.75);
  border-radius: 1px;
  background: url('../../../assets/page/paper.webp') 0 0 / 256px 256px repeat var(--kc-canvas);
  box-shadow: 0 14px 28px rgba(60, 40, 20, 0.2), 0 2px 5px rgba(60, 40, 20, 0.18);
  gap: 4px;
}
/* Filete punteado 6 px adentro: el pliego de las tarjetas de visita */
.kc-location::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px dotted rgba(40, 58, 52, 0.6);
  pointer-events: none;
}
.kc-location::before {
  content: "";
  display: block;
  width: min(100%, 250px);
  aspect-ratio: 600 / 420;
  margin-bottom: 4px;
  background: url('../../../assets/page/capilla.webp') center / contain no-repeat;
}
.kc-location:nth-child(2)::before { background-image: url('../../../assets/page/pabellon.webp'); }
.kc-location__title { margin: 0; }
.kc-location h3 { font-size: 1.2rem; text-wrap: balance; }
.kc-location__address { font-size: 1.1rem; color: var(--kc-ink); }
.kc-map-link { justify-self: center; margin-top: var(--kc-space-2); }

/* ── Itinerario: La Gaceta de Lady KC (folleto de sociedad, tall rack card) ── */
/* La lámina del itinerario va en dos mitades a tamaño nativo (arriba / abajo) y el durazno liso del medio se alarga: la gaceta alta no estira linternas ni balaustrada */
#itinerario { background-color: #F2E2C2; }
#itinerario .ni-plate { inset: 0 0 auto 0; height: var(--ni-h); -webkit-mask-image: linear-gradient(180deg, #000 36%, transparent 58%); mask-image: linear-gradient(180deg, #000 36%, transparent 58%); }
#itinerario .ni-plate--base { inset: auto 0 0 0; -webkit-mask-image: linear-gradient(0deg, #000 36%, transparent 58%); mask-image: linear-gradient(0deg, #000 36%, transparent 58%); }
#itinerario .kc-note { color: var(--kc-ink); text-align: center; border: 0; padding: 0; margin-bottom: var(--kc-space-4); }
.ni-gazette {
  --gz-ink: var(--kc-ink);
  position: relative;
  width: min(84vw, 380px);
  margin: 0 auto;
  padding: 30px 30px 28px;
  display: grid;
  justify-items: center;
  text-align: center;
  color: var(--gz-ink);
  /* Papel de trapo: foxing y vejez tenues sobre el mosaico, orilla más oscura por dentro y sombra suave al caer */
  background:
    radial-gradient(ellipse 34% 5% at 9% 6%, rgba(158, 118, 64, 0.1), transparent 72%),
    radial-gradient(ellipse 26% 4% at 93% 31%, rgba(158, 118, 64, 0.08), transparent 72%),
    radial-gradient(ellipse 40% 5% at 22% 93%, rgba(158, 118, 64, 0.1), transparent 72%),
    radial-gradient(ellipse 22% 3% at 88% 78%, rgba(158, 118, 64, 0.07), transparent 72%),
    linear-gradient(180deg, rgba(150, 112, 60, 0.07), transparent 14%, transparent 84%, rgba(150, 112, 60, 0.1)),
    url('../../../assets/page/paper.webp') 0 0 / 256px 256px repeat var(--kc-canvas);
  border: 1px solid rgba(40, 58, 52, 0.85);
  box-shadow:
    inset 0 0 26px rgba(120, 88, 46, 0.2), inset 0 0 3px rgba(60, 44, 24, 0.3),
    0 0 0 3px rgba(247, 244, 238, 0.35), 0 20px 38px rgba(60, 40, 20, 0.27), 0 3px 7px rgba(60, 40, 20, 0.22);
  /* La línea interior punteada (la de afuera es ::before y el filete doble ::after) */
  outline: 1px dotted rgba(40, 58, 52, 0.75);
  outline-offset: -19px;
}
.ni-gazette::before,
.ni-gazette::after { content: ""; position: absolute; pointer-events: none; }
.ni-gazette::before { inset: 6px; border: 1px dotted rgba(40, 58, 52, 0.75); }
.ni-gazette::after { inset: 11px; border: 3px double rgba(40, 58, 52, 0.9); }
.ni-gazette > * { margin: 0; position: relative; }
.ni-gazette__cameo { width: 88px; height: auto; filter: drop-shadow(0 2px 3px rgba(40, 58, 52, 0.22)); }
.ni-gazette__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
  padding-bottom: 9px;
  align-self: stretch;
  border-bottom: 3px double rgba(40, 58, 52, 0.9);
  line-height: 1.08;
}
.ni-gazette__caps { font-family: var(--kc-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: 0.22em; padding-inline-start: 0.22em; text-transform: uppercase; }
.ni-gazette__script { font-family: var(--kc-font-display); font-style: italic; font-weight: 500; font-size: 1.5rem; letter-spacing: 0.01em; }
/* En inglés el nombre va arriba («Lady KC's» / GAZETTE), como en el folleto de referencia */
.ni-gazette__title:lang(en) { flex-direction: column-reverse; }
.ni-gazette__sub {
  align-self: stretch;
  margin-top: 9px;
  padding: 6px 8px;
  border: 1px solid var(--gz-ink);
  box-shadow: inset 0 0 0 2px var(--kc-canvas), inset 0 0 0 3px rgba(40, 58, 52, 0.85);
  font-family: var(--kc-font-display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  line-height: 1.5;
  text-transform: uppercase;
  text-wrap: balance;
}
.ni-gazette__dateline {
  margin-top: 8px;
  font-family: var(--kc-font-display);
  font-weight: 600;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ni-gazette #itinerario-list {
  align-self: stretch;
  margin: 8px 0 0;
  padding: 6px 0 0;
  border-top: 1px dotted rgba(40, 58, 52, 0.7);
  gap: 0;
  text-align: left;
}
#itinerario-list .kc-stop {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-block: 8px;
  border-bottom: 0;
  opacity: 1;
  transform: none;
  transition: none;
}
/* Cada renglón es una entrada de la gaceta: hora en versalitas Bodoni, punteado y el acontecimiento en Cormorant */
#itinerario-list .kc-stop__time {
  order: 1;
  white-space: nowrap;
  font-family: var(--kc-font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kc-ink);
}
#itinerario-list .kc-stop::after { content: ""; order: 2; flex: 1 1 10px; min-width: 10px; border-bottom: 1px dotted rgba(40, 58, 52, 0.7); translate: 0 -3px; }
/* El renglón largo se ajusta en dos líneas alineadas a la izquierda: sangría colgante */
#itinerario-list .kc-stop__label { order: 3; flex: 0 1 56%; text-align: left; font-size: 1.14rem; line-height: 1.15; text-wrap: balance; }
.ni-gazette__sign {
  align-self: end;
  justify-self: end;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(40, 58, 52, 0.7);
  width: 100%;
  text-align: right;
  font-family: var(--ni-font-script);
  font-size: 1.9rem;
  line-height: 1.05;
}
.ni-gazette__imprint {
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--kc-ink-muted);
}

@media (prefers-reduced-motion: no-preference) {
  /* El folleto cayó apenas torcido; sin movimiento, derecho */
  .ni-gazette { rotate: -0.6deg; }
  /* Cada renglón se escribe de izquierda a derecha, como a lápiz, cuando la lista se revela */
  #itinerario-list .kc-stop { clip-path: inset(0 100% 0 0); }
  #itinerario-list.is-revealed .kc-stop { animation: ni-write 700ms cubic-bezier(0.4, 0, 0.3, 1) both; }
  #itinerario-list.is-revealed .kc-stop:nth-child(1) { animation-delay: 300ms; }
  #itinerario-list.is-revealed .kc-stop:nth-child(2) { animation-delay: 420ms; }
  #itinerario-list.is-revealed .kc-stop:nth-child(3) { animation-delay: 540ms; }
  #itinerario-list.is-revealed .kc-stop:nth-child(4) { animation-delay: 660ms; }
  #itinerario-list.is-revealed .kc-stop:nth-child(5) { animation-delay: 780ms; }
  #itinerario-list.is-revealed .kc-stop:nth-child(6) { animation-delay: 900ms; }
  #itinerario-list.is-revealed .kc-stop:nth-child(n + 7) { animation-delay: 1020ms; }
}
@keyframes ni-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(-8px -8px -8px 0); } }

/* ── Vestimenta: texto corto con su ramita ── */
#vestimenta .kc-container { max-width: 26rem; }
#vestimenta .kc-container::after {
  content: "";
  display: block;
  width: 150px;
  aspect-ratio: 360 / 220;
  margin: var(--kc-space-4) auto 0;
  background: url('../../../assets/page/sprig.webp') center / contain no-repeat;
  opacity: 0.7;
}

/* ── Regalos: el sobre ── */
#regalos .kc-container { max-width: 28rem; }
.kc-envelopes {
  position: relative;
  max-width: 21rem;
  margin: 70px auto 0;
  padding: 74px 22px 26px;
  border: 1px solid rgba(40, 58, 52, 0.8);
  border-top-style: solid;
  background: url('../../../assets/page/paper.webp') 0 0 / 256px 256px repeat var(--kc-canvas);
  box-shadow: 0 14px 26px rgba(60, 40, 20, 0.2), 0 2px 4px rgba(60, 40, 20, 0.18);
  text-align: center;
}
.kc-envelopes > * { margin: 0; }
.kc-envelopes h3 { font-size: 1.3rem; }
.kc-envelopes p { color: var(--kc-ink); font-size: 1.1rem; }
/* Solapa en V: el triángulo se recorta con clip-path y su filete va en un lienzo ligeramente mayor */
.kc-envelopes::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 64px;
  background: var(--kc-ink);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 1px;
}
.kc-envelopes::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 4px;
  right: 4px;
  height: 56px;
  background: #EFE7DA url('../../../assets/page/paper.webp') 0 0 / 256px 256px repeat;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% -5px;
  pointer-events: none;
}
/* El lacre en la punta de la solapa */
.kc-envelopes > h3::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  margin-left: -23px;
  background: url('../../../assets/page/seal-secret.webp') center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(40, 24, 24, 0.35));
}
@media (prefers-reduced-motion: no-preference) {
  .kc-envelopes.is-revealed::before,
  .kc-envelopes.is-revealed::after { animation: ni-flap 1100ms cubic-bezier(0.5, 0, 0.2, 1) 600ms both; }
  .kc-envelopes.is-revealed > h3::before { animation: ni-wax-lift 1100ms ease 600ms both; }
}
@keyframes ni-flap {
  from { transform: perspective(520px) rotateX(0deg); }
  to { transform: perspective(520px) rotateX(-178deg); }
}
@keyframes ni-wax-lift { to { opacity: 0; translate: 0 -22px; } }
@media (prefers-reduced-motion: reduce) {
  .kc-envelopes::before, .kc-envelopes::after { transform: perspective(520px) rotateX(-178deg); }
  .kc-envelopes > h3::before { opacity: 0; }
}
.kc-bank { background: url('../../../assets/page/paper.webp') 0 0 / 256px 256px repeat var(--kc-canvas); }

/* ── RSVP: la carta de respuesta ── */
#rsvp .kc-container { max-width: 28rem; }
.kc-rsvp-form {
  padding: 26px 22px 22px;
  border: 1px solid rgba(40, 58, 52, 0.8);
  border-radius: 0;
  outline: 1px dotted rgba(40, 58, 52, 0.65);
  outline-offset: -6px;
  background: url('../../../assets/page/paper.webp') 0 0 / 256px 256px repeat var(--kc-canvas);
  box-shadow: 0 14px 28px rgba(50, 30, 40, 0.22), 0 2px 5px rgba(50, 30, 40, 0.2);
}
#rsvp .kc-eyebrow, #captura .kc-eyebrow { color: var(--kc-ink); }
#rsvp .kc-rsvp-deadline { color: var(--kc-ink); }
.kc-rsvp-offline {
  max-width: 24rem;
  margin-inline: auto;
  padding: 0.6rem 1rem;
  color: var(--kc-ink);
  font-style: italic;
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(247, 244, 238, 0.82), rgba(247, 244, 238, 0.5) 65%, rgba(247, 244, 238, 0));
}

/* ── Captura: compacta y callada ── */
#captura .kc-container { max-width: 24rem; }
#captura .kc-title { font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.2rem); margin-bottom: var(--kc-space-3); }
#captura .kc-body { color: var(--kc-ink); font-size: 1.05rem; }
#captura .kc-echoes-cam { display: block; width: 170px; height: auto; margin: 0 auto var(--kc-space-3); overflow: visible; filter: drop-shadow(0 8px 10px rgba(40, 58, 70, 0.25)); animation: kc-echoes-levita 4.6s ease-in-out infinite; }
@keyframes kc-echoes-levita { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@media (prefers-reduced-motion: reduce) { #captura .kc-echoes-cam { animation: none; } }
#captura .kc-captura__cta { margin-top: var(--kc-space-4); color: var(--kc-ink-muted); background: rgba(247, 244, 238, 0.7); }

/* ── Secreto: el sello se parte, revela la carta y vuelve a cerrarla ── */
#secreto .kc-container { max-width: 26rem; }
#secreto .kc-secret { max-width: 26rem; margin-inline: auto; }
#secreto .kc-secret[open] .kc-secret__hint { visibility: hidden; }
#secreto .kc-secret__seal {
  position: relative;
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 0;
  background: url('../../../assets/page/seal-secret.webp') center / contain no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 3px 4px rgba(40, 24, 24, .35));
  transform-origin: center;
}
#secreto .kc-secret__seal::before,
#secreto .kc-secret__seal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url('../../../assets/page/seal-secret.webp') center / contain no-repeat;
  opacity: 0;
}
#secreto .kc-secret__seal::before { clip-path: polygon(0 0, 52% 0, 46% 17%, 55% 33%, 47% 50%, 54% 67%, 48% 84%, 53% 100%, 0 100%); }
#secreto .kc-secret__seal::after { clip-path: polygon(52% 0, 100% 0, 100% 100%, 53% 100%, 48% 84%, 54% 67%, 47% 50%, 55% 33%, 46% 17%); }
#secreto .kc-secret[open] .kc-secret__seal { background: none; animation: none; }
#secreto .kc-secret__card {
  position: relative;
  margin-top: var(--kc-space-5);
  padding: var(--kc-space-6) var(--kc-space-5);
  border: 1px solid rgba(40, 58, 52, .8);
  border-radius: 0;
  border-radius: 0;
  outline: 1px dotted rgba(40, 58, 52, .65);
  outline-offset: -6px;
  background: url('../../../assets/page/paper.webp') 0 0 / 256px 256px repeat var(--kc-canvas);
  color: var(--kc-ink);
  box-shadow: 0 16px 30px rgba(40, 30, 60, .28), 0 2px 5px rgba(40, 30, 60, .2);
  transform-origin: 50% 0;
}
#secreto .kc-secret__card h2 { margin-bottom: var(--kc-space-4); font-size: var(--kc-text-title); color: var(--kc-ink); }
#secreto .kc-secret__message { color: var(--kc-ink); font-size: 1.25rem; font-style: italic; line-height: 1.5; }
#secreto .kc-secret__signature { margin-top: var(--kc-space-4); color: var(--kc-accent); font-family: var(--ni-font-script); font-size: 1.9rem; line-height: 1.1; }
#secreto .kc-secret:not([open]):not(.is-returning) .kc-secret__seal { animation: ni-secret-levitate 3.2s ease-in-out infinite; }
#secreto .kc-secret.is-returning .kc-secret__seal { animation: ni-secret-return 400ms ease both, ni-secret-levitate 3.2s ease-in-out 400ms infinite; }
#secreto .kc-secret.is-closing[open] .kc-secret__card { animation: ni-secret-fold 600ms cubic-bezier(.2, .7, .2, 1) both; }

@media (prefers-reduced-motion: no-preference) {
  #secreto .kc-secret[open] .kc-secret__seal::before { animation: ni-secret-split-left 700ms cubic-bezier(.2, .7, .3, 1) both; }
  #secreto .kc-secret[open] .kc-secret__seal::after { animation: ni-secret-split-right 700ms cubic-bezier(.2, .7, .3, 1) both; }
  #secreto .kc-secret[open] .kc-secret__card { animation: ni-secret-unfold 760ms cubic-bezier(.2, .7, .2, 1) 180ms both; }
}
@media (prefers-reduced-motion: reduce) {
  #secreto .kc-secret:not([open]) .kc-secret__seal { animation: none; }
  #secreto .kc-secret[open] .kc-secret__seal::before,
  #secreto .kc-secret[open] .kc-secret__seal::after { opacity: 0; }
  #secreto .kc-secret[open] .kc-secret__card { animation: none; }
  #secreto .kc-secret.is-closing[open] .kc-secret__card { animation: none; }
}
@keyframes ni-secret-levitate {
  0%, 100% { transform: translateY(0); filter: drop-shadow(0 4px 5px rgba(12, 16, 28, .4)); }
  50% { transform: translateY(-6px); filter: drop-shadow(0 1px 2px rgba(12, 16, 28, .28)); }
}
@keyframes ni-secret-return { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes ni-secret-split-left {
  0% { opacity: 1; transform: none; }
  42% { opacity: 1; transform: translate(-12px, 2px) rotate(-8deg); }
  100% { opacity: 0; transform: translate(-15px, 2px) rotate(-9deg); }
}
@keyframes ni-secret-split-right {
  0% { opacity: 1; transform: none; }
  42% { opacity: 1; transform: translate(12px, 3px) rotate(8deg); }
  100% { opacity: 0; transform: translate(15px, 3px) rotate(9deg); }
}
@keyframes ni-secret-unfold {
  from { opacity: 0; transform: perspective(700px) rotateX(-70deg) scaleY(.6); }
  to { opacity: 1; transform: none; }
}
@keyframes ni-secret-fold {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: perspective(700px) rotateX(-70deg) scaleY(.6); }
}

/* ── Footer: la noche, con el farol del gate encendido ── */
.kc-footer {
  /* Lámina 810×930: baja y centrada. El texto queda al centro exacto aunque pise lo dibujado */
  --ni-h: calc(var(--col) * 1.1481);
  position: relative;
  min-height: var(--ni-h);
  padding-block: 18px;
  display: grid;
  align-content: center;
  background-color: var(--ni-s13);
}
.kc-footer .ni-plate img { object-fit: fill; }
/* Resplandor del farol pintado (la llama está en ~13.3 % / 84 % de la lámina): respira despacio */
#kc-footer .ni-plate::after {
  content: "";
  position: absolute;
  left: 13.3%;
  top: 84.2%;
  width: 54%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 214, 140, 0.5) 0%, rgba(255, 190, 110, 0.22) 32%, rgba(255, 170, 90, 0) 68%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
#kc-footer .ni-plate.is-lit::after { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  #kc-footer .ni-plate.is-lit::after { animation: ni-lantern 3s ease-in-out infinite alternate; }
}
@keyframes ni-lantern { from { opacity: 0.7; } to { opacity: 1; } }
.kc-footer__inner p { color: var(--kc-footer-ink); font-size: 1.1rem; }
.ni-imprint {
  font-size: 0.78rem !important;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kc-footer-muted) !important;
}
.kc-footer__inner { text-shadow: 0 0 10px rgba(20, 24, 40, 0.8); }

/* Sobre el durazno de la tarde el latón claro queda justo: un tono más profundo para las sobrecejas */
:is(#itinerario, #vestimenta, #regalos) .kc-eyebrow { color: #6B4F2A; }

/* ── Halo de legibilidad: el papel (o la noche) respira detrás del texto sobre lámina, sin cajas ── */
:is(#hero, .kc-section) :is(.kc-eyebrow, .kc-note, .kc-hero__note, .kc-hero__place, .kc-captura__cta) {
  text-shadow: 0 0 2px var(--kc-canvas), 0 0 8px var(--kc-canvas), 0 0 16px rgba(247, 244, 238, 0.85);
}
#kc-footer .kc-footer__inner {
  text-shadow: 0 0 2px var(--kc-footer-bg), 0 0 10px var(--kc-footer-bg), 0 0 20px rgba(30, 36, 51, 0.9);
}

/* El halo del farol no puede alargar la página bajo la noche (dejaba una franja crema). */
#kc-footer { overflow: clip; }

/* ── La noche empieza en «Captura el momento»: secreto es crepúsculo hondo y su texto va en color papel ── */
#secreto { --ni-night-ink: #F7F4EE; }
#secreto .kc-eyebrow, #secreto .kc-secret__hint {
  color: var(--ni-night-ink);
  text-shadow: 0 0 2px rgba(30, 36, 60, 0.95), 0 0 9px rgba(30, 36, 60, 0.85), 0 0 18px rgba(30, 36, 60, 0.6);
}

/* Láminas de noche: la mancha de acuarela debe pasar del borde (si no, el papel claro asoma en las esquinas oscuras) */
:is(#captura, #secreto, #kc-footer) .ni-plate.is-lit .ni-plate__color {
  -webkit-mask-size: 1000% 1000%;
  mask-size: 1000% 1000%;
}