/* KC-RSVP Diamond · Executive Meridian
   Tesis: confirmar es firmar el registro de la generación. La inscripción se
   vuelve un acta marfil con tinta azul profunda; el pase es una credencial
   navy grabada. KC-Center pone la lógica, aquí solo vive el vestuario. */

#rsvp {
  --acta-paper: #f9ebdf;
  --acta-ink: #071524;
  --acta-ink-soft: #1e3653;
  --acta-walnut: #864c2c;
  --acta-mahogany: #6e3115;
  --acta-blue: #305b7e;
  --acta-line: rgba(7, 21, 36, .26);
  --acta-cut: .9rem;
}

/* The bridge drives everything through [hidden]; nothing here may resurrect it. */
#rsvp [hidden] { display: none !important; }

/* ── El acta: la inscripción autoral pasa a ser papel de registro ── */
#rsvp .kc-rsvp-register {
  position: relative;
  align-items: stretch;
  width: 100%;
  max-width: 30rem;
  padding: clamp(1.6rem, 6vw, 2.4rem) clamp(1.15rem, 5vw, 2.1rem) clamp(1.5rem, 5vw, 2.1rem);
  border-left: 0;
  color: var(--acta-ink);
  background:
    repeating-linear-gradient(0deg, rgba(134, 76, 44, .035) 0 1px, transparent 1px 4px),
    var(--acta-paper);
  clip-path: polygon(var(--acta-cut) 0, calc(100% - var(--acta-cut)) 0, 100% var(--acta-cut), 100% calc(100% - var(--acta-cut)), calc(100% - var(--acta-cut)) 100%, var(--acta-cut) 100%, 0 calc(100% - var(--acta-cut)), 0 var(--acta-cut));
}
/* Marco grabado interior + marcas cardinales del meridiano. */
#rsvp .kc-rsvp-register::before {
  content: "";
  position: absolute;
  inset: .45rem;
  border: 1px solid rgba(134, 76, 44, .42);
  clip-path: polygon(.55rem 0, calc(100% - .55rem) 0, 100% .55rem, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, .55rem 100%, 0 calc(100% - .55rem), 0 .55rem);
  pointer-events: none;
}
#rsvp .kc-rsvp-register::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--acta-ink), var(--acta-ink)) top center / 1px .8rem no-repeat,
    linear-gradient(var(--acta-ink), var(--acta-ink)) bottom center / 1px .8rem no-repeat;
  pointer-events: none;
}
#rsvp .kc-rsvp-register > * { position: relative; }
#rsvp .kc-rsvp-register .rsvp-meridian-mark { stroke: var(--acta-ink); filter: none; }
#rsvp .kc-rsvp-register .rsvp-meridian-mark circle { fill: var(--acta-walnut); }

/* ── Renglón de reservación (lo construye el bridge) ── */
#rsvp .kc-rsvp-reservation {
  display: grid;
  gap: .2rem;
  margin: 0 0 1.25rem;
  padding: .85rem 0 .9rem;
  border-top: 3px double var(--acta-line);
  border-bottom: 1px solid var(--acta-line);
}
#rsvp .kc-rsvp-reservation-eyebrow,
#rsvp .kc-rsvp-reservation-passes {
  margin: 0;
  color: var(--acta-walnut);
  font: 700 .62rem/1.4 var(--sans);
  letter-spacing: .16em;
}
#rsvp .kc-rsvp-reservation-name {
  margin: 0;
  color: var(--acta-ink);
  font: normal clamp(1.4rem, 5.6vw, 1.75rem)/1.15 var(--serif);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
#rsvp .kc-rsvp-reservation-passes { color: var(--acta-ink-soft); }

/* ── Formulario ── */
#rsvp .kc-rsvp-form { width: 100%; }
#rsvp .kc-rsvp-attendance { margin: 0; padding: 0; border: 0; min-width: 0; }
#rsvp .kc-rsvp-attendance legend {
  margin: 0 0 .8rem;
  padding: 0;
  color: var(--acta-ink);
  font: normal clamp(1.3rem, 5vw, 1.55rem)/1.2 var(--serif);
}
#rsvp .kc-rsvp-attendance-options { display: grid; gap: .55rem; }
#rsvp .kc-rsvp-attendance-option { position: relative; display: block; cursor: pointer; }
/* Hidden radio stays focusable: clip, never display:none. */
#rsvp .kc-rsvp-attendance-option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  clip-path: inset(50%);
}
#rsvp .kc-rsvp-attendance-face {
  display: flex;
  align-items: center;
  gap: .9rem;
  min-height: 3.25rem;
  padding: .8rem 1rem;
  border: 1px solid var(--acta-line);
  border-radius: var(--radius-detail);
  color: var(--acta-ink);
  font: 700 .74rem/1.3 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background-color var(--duration-short) var(--ease), color var(--duration-short) var(--ease), border-color var(--duration-short) var(--ease);
}
/* Rombo meridiano: vacío hasta que firmas. */
#rsvp .kc-rsvp-attendance-face i {
  flex: none;
  width: .62rem;
  height: .62rem;
  border: 1px solid currentColor;
  transform: rotate(45deg);
  transition: background-color var(--duration-short) var(--ease), box-shadow var(--duration-short) var(--ease);
}
#rsvp .kc-rsvp-attendance-option:hover .kc-rsvp-attendance-face { border-color: var(--acta-ink); }
#rsvp .kc-rsvp-attendance-option input:checked + .kc-rsvp-attendance-face {
  border-color: var(--acta-ink);
  background: var(--acta-ink);
  color: var(--acta-paper);
}
#rsvp .kc-rsvp-attendance-option input:checked + .kc-rsvp-attendance-face i {
  background: var(--acta-paper);
  box-shadow: 0 0 0 3px var(--acta-ink), 0 0 0 4px var(--acta-paper);
}
#rsvp .kc-rsvp-attendance-option input:focus-visible + .kc-rsvp-attendance-face {
  outline: 3px solid var(--acta-blue);
  outline-offset: 3px;
}
#rsvp .kc-rsvp-attendance-hint,
#rsvp .kc-rsvp-decline-note {
  margin: .85rem 0 0;
  color: var(--acta-ink-soft);
  font: normal .98rem/1.55 var(--serif);
}
#rsvp .kc-rsvp-decline-note { color: var(--acta-walnut); }

#rsvp .kc-rsvp-field-group:not(.kc-rsvp-attendance),
#rsvp .kc-rsvp-extra { margin-top: 1.15rem; }
#rsvp .kc-rsvp-extra { display: grid; gap: 1.15rem; }
#rsvp .kc-rsvp-extra .kc-rsvp-field-group { margin-top: 0; }
#rsvp .kc-rsvp-field-group label {
  display: block;
  margin: 0 0 .35rem;
  color: var(--acta-walnut);
  font: 700 .64rem/1.4 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
}
#rsvp .kc-rsvp-field-group :is(input, select, textarea) {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: .7rem .35rem;
  border: 0;
  border-bottom: 1px solid rgba(7, 21, 36, .45);
  border-radius: 0;
  background: rgba(255, 255, 255, .38);
  color: var(--acta-ink);
  font: normal 1rem/1.4 var(--serif);
  appearance: none;
}
#rsvp .kc-rsvp-field-group select {
  padding-right: 2rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23071524' stroke-width='1.3'/%3E%3C/svg%3E") right .5rem center / .75rem no-repeat,
    rgba(255, 255, 255, .38);
}
#rsvp .kc-rsvp-field-group textarea { min-height: 5.5rem; resize: vertical; }
#rsvp .kc-rsvp-field-group :is(input, select, textarea)::placeholder { color: rgba(30, 54, 83, .62); }
#rsvp .kc-rsvp-field-group :is(input, select, textarea):focus-visible {
  outline: 3px solid var(--acta-blue);
  outline-offset: 2px;
  border-bottom-color: var(--acta-blue);
}

/* ── Firmar ── */
#rsvp .kc-rsvp-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.4rem;
  margin-top: 1.35rem;
  padding: .9rem 1.2rem;
  border: 0;
  border-radius: var(--radius-detail);
  background: var(--acta-ink);
  color: var(--acta-paper);
  font: 700 .76rem/1.2 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--duration-short) var(--ease);
}
#rsvp .kc-rsvp-submit::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(240, 212, 191, .34);
  pointer-events: none;
}
#rsvp .kc-rsvp-submit:hover:not(:disabled) { background: var(--acta-ink-soft); }
#rsvp .kc-rsvp-submit:focus-visible { outline: 3px solid var(--acta-blue); outline-offset: 3px; }
#rsvp .kc-rsvp-submit:disabled { cursor: not-allowed; }
/* Firmar: el botón se llena de tinta azul mientras KC-Center registra; al sellar llega
   al tope y el pase sale de golpe (el bridge sostiene el ritual con submitRitualMs). */
#rsvp .kc-rsvp-submit-label { position: relative; z-index: 1; }
#rsvp .kc-rsvp-form[aria-busy="true"] .kc-rsvp-submit { cursor: progress; }
#rsvp .kc-rsvp-form[aria-busy="true"] .kc-rsvp-submit::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--acta-blue);
  animation: acta-fill 1.1s cubic-bezier(.45, .1, .4, 1) forwards;
}
#rsvp .kc-rsvp-form[data-kc-sealed] .kc-rsvp-submit::before { animation: acta-seal 200ms ease-out forwards; }
#rsvp .kc-rsvp-update {
  background: transparent;
  color: var(--acta-ink);
  box-shadow: inset 0 0 0 1px var(--acta-ink);
}
#rsvp .kc-rsvp-update::after { display: none; }
#rsvp .kc-rsvp-update:hover:not(:disabled) { background: rgba(7, 21, 36, .06); }

#rsvp .kc-rsvp-status {
  margin: .75rem 0 0;
  color: var(--acta-ink-soft);
  font: 700 .66rem/1.5 var(--sans);
  letter-spacing: .12em;
  text-transform: uppercase;
}
#rsvp .kc-rsvp-status:empty { display: none; }
/* With an outcome on the page the pass/farewell already says it; keep the live
   announcement for screen readers, drop the duplicate line for the eye. */
#rsvp .kc-rsvp-form:has(#kc-rsvp-ticket-host:not([hidden])) .kc-rsvp-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#rsvp .kc-rsvp-error {
  margin: .9rem 0 0;
  padding: .7rem .9rem;
  border-left: 3px solid var(--acta-mahogany);
  background: rgba(110, 49, 21, .08);
  color: var(--acta-mahogany);
  font: normal .95rem/1.5 var(--serif);
}

/* Revelado progresivo: cada renglón aparece cuando la respuesta lo pide. */
#rsvp :is(#kc-rsvp-passes-group, .kc-rsvp-extra, .kc-rsvp-submit, .kc-rsvp-decline-note):not([hidden]) {
  animation: acta-line-in 520ms var(--ease) both;
}
#rsvp .kc-rsvp-ticket-host:not([hidden]) { animation: acta-pass-in 260ms cubic-bezier(.2, .9, .3, 1.2) both; }
#rsvp .kc-rsvp-extra:not([hidden]) { animation-delay: 70ms; }
#rsvp .kc-rsvp-submit:not([hidden]) { animation-delay: 140ms; }

/* ── La credencial ── */
#rsvp .kc-rsvp-ticket-host { margin-top: .25rem; }
#rsvp .kc-ticket {
  position: relative;
  padding: 1.7rem 1.25rem 1.4rem;
  color: var(--acta-paper);
  text-align: center;
  background:
    radial-gradient(circle at 14% 0, rgba(48, 91, 126, .55), transparent 46%),
    radial-gradient(circle at 92% 100%, rgba(79, 33, 13, .5), transparent 42%),
    var(--acta-ink);
  clip-path: polygon(.8rem 0, calc(100% - .8rem) 0, 100% .8rem, 100% calc(100% - .8rem), calc(100% - .8rem) 100%, .8rem 100%, 0 calc(100% - .8rem), 0 .8rem);
}
#rsvp .kc-ticket::before {
  content: "";
  position: absolute;
  inset: .4rem;
  border: 1px solid rgba(240, 212, 191, .3);
  clip-path: polygon(.5rem 0, calc(100% - .5rem) 0, 100% .5rem, 100% calc(100% - .5rem), calc(100% - .5rem) 100%, .5rem 100%, 0 calc(100% - .5rem), 0 .5rem);
  pointer-events: none;
}
#rsvp .kc-ticket > * { position: relative; }
#rsvp .kc-ticket-particles { display: none; }
#rsvp .kc-ticket-header { margin: 0 0 .9rem; }
#rsvp .kc-ticket-crown-ornament,
#rsvp .kc-ticket-guest-label,
#rsvp .kc-ticket-qr-hint {
  color: rgba(249, 235, 223, .78);
  font: 700 .6rem/1.4 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
}
/* El pase habla solo: "PASE DE ADMISIÓN" basta, sin la línea de estado del bridge. */
#rsvp .kc-ticket-status { display: none; }
#rsvp .kc-ticket-event {
  margin: .55rem 0 .2rem;
  color: var(--acta-paper);
  font: normal clamp(1.35rem, 5.4vw, 1.65rem)/1.15 var(--serif);
}
#rsvp .kc-ticket-celebrant {
  margin: 0;
  color: rgba(249, 235, 223, .82);
  font: 700 .66rem/1.4 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
}
#rsvp .kc-ticket-rule { margin: .9rem 0; color: rgba(240, 212, 191, .6); font-size: .7rem; letter-spacing: .3em; }
#rsvp .kc-ticket-guest-label { margin: 0; }
#rsvp .kc-ticket-guest {
  margin: .3rem 0 .15rem;
  font: normal clamp(1.25rem, 5vw, 1.5rem)/1.2 var(--serif);
  overflow-wrap: anywhere;
}
#rsvp .kc-ticket-passes { margin: 0; color: var(--ivory); font: 700 .72rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
#rsvp .kc-ticket-date { margin: .35rem 0 0; font: normal .98rem/1.4 var(--serif); letter-spacing: .06em; }
#rsvp .kc-ticket-qr-wrap { margin: 1.15rem 0 0; }
#rsvp .kc-ticket-qr-frame {
  display: inline-block;
  padding: .55rem;
  background: var(--acta-paper);
  box-shadow: 0 0 0 1px rgba(240, 212, 191, .5), 0 0 0 5px var(--acta-ink), 0 0 0 6px rgba(240, 212, 191, .3);
}
#rsvp .kc-ticket-qr-img svg { display: block; width: min(11rem, 52vw); height: auto; }
#rsvp .kc-ticket-qr-hint { margin: .85rem 0 0; }
#rsvp .kc-ticket-id { margin: .8rem 0 0; color: rgba(249, 235, 223, .66); font: 700 .66rem/1 "Courier New", monospace; letter-spacing: .22em; }
#rsvp .kc-ticket-brand { margin: .9rem 0 0; color: rgba(249, 235, 223, .5); font: 700 .55rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
#rsvp .kc-ticket-share { margin-top: .8rem; }
#rsvp .kc-ticket-share-btn {
  width: 100%;
  min-height: 3rem;
  padding: .75rem 1rem;
  border: 0;
  border-radius: var(--radius-detail);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--acta-ink);
  color: var(--acta-ink);
  font: 700 .72rem/1.2 var(--sans);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
}
#rsvp .kc-ticket-share-btn:hover:not(:disabled) { background: rgba(7, 21, 36, .06); }
#rsvp .kc-ticket-share-btn:focus-visible { outline: 3px solid var(--acta-blue); outline-offset: 3px; }
#rsvp .kc-ticket-share-btn:disabled { opacity: .6; cursor: progress; }
#rsvp .kc-rsvp-update { margin-top: .6rem; }

/* ── Respuesta "no podré" y cierre ── */
#rsvp .kc-rsvp-farewell,
#rsvp .kc-rsvp-closed-note {
  padding: 1.1rem 0 1.2rem;
  border-top: 3px double var(--acta-line);
  border-bottom: 1px solid var(--acta-line);
}
#rsvp .kc-rsvp-farewell-eyebrow { margin: 0; color: var(--acta-walnut); font: 700 .62rem/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
#rsvp .kc-rsvp-farewell-guest { margin: .35rem 0 .3rem; font: normal 1.4rem/1.2 var(--serif); overflow-wrap: anywhere; }
#rsvp .kc-rsvp-farewell-body,
#rsvp .kc-rsvp-closed-note p { margin: .4rem 0 0; color: var(--acta-ink-soft); font: normal .98rem/1.55 var(--serif); }
#rsvp .kc-rsvp-farewell-brand { margin: .8rem 0 0; color: rgba(7, 21, 36, .5); font: 700 .55rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; }
#rsvp .kc-rsvp-closed-note strong { display: block; font: normal 1.2rem/1.3 var(--serif); }

/* Móvil: el resto de las escenas reserva un riel a la derecha para el botón de música;
   la card del RSVP se centra con márgenes simétricos para no flotar contra la izquierda. */
@media (max-width: 649px) {
  #rsvp .rsvp-inner { width: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; }
  #rsvp .rsvp-inscription.kc-rsvp-register { margin-inline: auto; }
}
@media (min-width: 650px) {
  #rsvp .rsvp-inscription.kc-rsvp-register { width: min(100%, 30rem); }
}

@keyframes acta-line-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes acta-fill { from { width: 0; } to { width: 92%; } }
@keyframes acta-seal { from { width: 92%; } to { width: 100%; } }
@keyframes acta-pass-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #rsvp :is(#kc-rsvp-passes-group, .kc-rsvp-extra, .kc-rsvp-submit, .kc-rsvp-decline-note, .kc-rsvp-ticket-host):not([hidden]) { animation: none; }
  #rsvp .kc-rsvp-form[aria-busy="true"] .kc-rsvp-submit::before { animation: none; width: 100%; }
}

/* ── KC-Gallery en "Captura el momento": la puerta de la cámara, grabada como el resto ── */
#capture-moment .kc-gallery-cta[hidden] { display: none; }
#capture-moment .kc-gallery-cta {
  width: min(100% - 2 * var(--gutter), 22rem);
  margin: 0 auto;
  padding: 0 0 2.1rem;
}
#capture-moment .kc-gallery-cta__link {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 3.25rem;
  border: 0;
  border-radius: var(--radius-detail);
  background: var(--ivory-light);
  color: var(--navy-950);
  font: 700 .74rem/1.2 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 1;
}
#capture-moment .kc-gallery-cta__link::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(7, 21, 36, .3);
  pointer-events: none;
}
#capture-moment .kc-gallery-cta__link:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
#capture-moment .kc-gallery-cta__hint { color: rgba(249, 235, 223, .72); font: normal .9rem/1.5 var(--serif); opacity: 1; }

/* Android pinta un flash azul al tocar; los estados :checked ya dan la respuesta. */
#rsvp :is(label, button), #capture-moment a { -webkit-tap-highlight-color: transparent; }

/* Export PNG del pase: sin recortes ni marcos que el rasterizador ensucie. */
.kc-rsvp-capture-clean #rsvp .kc-ticket { clip-path: none; }
.kc-rsvp-capture-clean #rsvp .kc-ticket::before { display: none; }