/* KC-RSVP Diamond · Azula, la noche del baile real
   Arriba, fuera del pergamino: la identidad (fecha límite, nombre, pases) con su marco de invitación real.
   Abajo, la pregunta vive en un pergamino de hielo pintado con anidoodle (rollo con corona, cuerpo sin costura,
   rollo inferior) y la zapatilla de cristal descansa en el rollo. Los botones son de lápiz: su contorno se dibuja
   cuando aparecen o se eligen (button-linea, assets-kc-galery). El pase es el boleto del baile. Cero oro. */

#rsvp [hidden] { display: none !important; }
#rsvp :is(label, button, select) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* ── Identidad, fuera del pergamino: listón de divisor, nombre entre filetes, pases, fecha límite ── */
#rsvp .kc-rsvp-reservation { order: 1; display: grid; justify-items: center; gap: .3rem; margin: 0 0 .5rem; padding: 0; text-align: center; border: 0; }
#rsvp .kc-rsvp-reservation::before { content: ""; width: 74%; aspect-ratio: 390 / 46; margin-bottom: .3rem; background: url("assets/scroll/divider-ribbon.webp") center / contain no-repeat; }
#rsvp .kc-rsvp-reservation-eyebrow { margin: 0; font-variant: small-caps; text-transform: lowercase; letter-spacing: .26em; font-size: .9rem; color: var(--azu-glass); }
#rsvp .kc-rsvp-reservation-name { display: flex; align-items: center; gap: .7rem; width: 100%; margin: .1rem 0; font-family: var(--azu-font-serif); font-weight: 500; font-size: clamp(1.55rem, 6.8vw, 1.95rem); line-height: 1.15; color: var(--azu-silver-hi); text-shadow: 0 0 16px rgba(202, 236, 246, .4); overflow-wrap: anywhere; }
#rsvp .kc-rsvp-reservation-name::before, #rsvp .kc-rsvp-reservation-name::after { content: ""; flex: 1 1 0; min-width: 18px; height: 9px; background: radial-gradient(circle, var(--azu-glass) 0 1.6px, transparent 2.2px) 100% 50% / 9px 9px no-repeat, linear-gradient(90deg, rgba(201, 211, 221, 0), rgba(201, 211, 221, .75)) 0 50% / calc(100% - 12px) 1px no-repeat; }
#rsvp .kc-rsvp-reservation-name::after { transform: scaleX(-1); }
#rsvp .kc-rsvp-reservation-passes { margin: .15rem 0 0; padding: .32rem 1rem; border: 1px solid rgba(202, 236, 246, .5); border-radius: 999px; font-variant: small-caps; text-transform: lowercase; letter-spacing: .18em; font-size: .88rem; color: var(--azu-glass); white-space: nowrap; }
#rsvp .kc-rsvp-intro { order: 2; margin: .2rem auto 1.1rem; max-width: 30ch; text-align: center; font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--azu-silver); }
#rsvp #kc-rsvp-form { order: 3; }
#rsvp .kc-rsvp-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }   /* el core le da una superficie oscura: aquí no hay tarjeta, hay pergamino */

/* ── El pergamino: rollo con corona arriba, cuerpo sin costura, rollo abajo (assets/scroll/parchment-*.webp) ──
   El cuerpo se recorta al content-box: nunca asoma alrededor de la corona ni bajo los rollos. */
#rsvp #kc-rsvp-form {
  position: relative; margin: 0; padding: calc(33.846% - 1px) 0 calc(21.538% - 1px);   /* el % del padding se mide contra el ancho del padre: sin margen lateral, las piezas casan exacto */
  background:
    url("assets/scroll/parchment-top.webp") top center / 100% auto no-repeat border-box,
    url("assets/scroll/parchment-bot.webp") bottom center / 100% auto no-repeat border-box,
    url("assets/scroll/parchment-mid.webp") top center / 100% auto repeat-y content-box;
  filter: drop-shadow(0 18px 22px rgba(3, 6, 28, .45));
}
#rsvp #kc-rsvp-form > :not(.azu-rsvp-slipper) { margin-inline: 12%; }
#rsvp .azu-rsvp-slipper { top: 1%; right: 3%; width: 21%; max-width: 92px; }

/* ── La pregunta, en tinta navy sobre el pergamino ── */
#rsvp .kc-rsvp-attendance { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: .7rem; }
#rsvp .kc-rsvp-attendance legend { width: 100%; margin: 0 0 .5rem; padding: 0; text-align: center; font: 400 2.5rem / 1.15 var(--azu-font-script); color: var(--azu-night); }
#rsvp .kc-rsvp-attendance-hint, #rsvp .kc-rsvp-decline-note { margin: .3rem 0 0; text-align: center; font-size: 1.02rem; line-height: 1.5; color: var(--azu-navy); }

/* ── Botones de lápiz (button-linea): el contorno se dibuja arriba→derecha y abajo→izquierda ── */
#rsvp :where(.kc-radio-label, #kc-rsvp-submit, .kc-ticket-share-btn, .kc-rsvp-update) { --ink: var(--azu-night); position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; padding: .7rem 1.2rem; cursor: pointer; border: 0; border-radius: 3px; background: transparent; color: var(--ink); font: 500 1.1rem / 1.15 var(--azu-font-serif); letter-spacing: .06em; -webkit-user-select: none; user-select: none; transition: background-color .35s ease, color .35s ease; }
#rsvp :where(.kc-radio-label, #kc-rsvp-submit, .kc-ticket-share-btn, .kc-rsvp-update)::before,
#rsvp :where(.kc-radio-label, #kc-rsvp-submit, .kc-ticket-share-btn, .kc-rsvp-update)::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border: 0 solid var(--ink); border-radius: 3px; }
#rsvp :where(.kc-radio-label, #kc-rsvp-submit, .kc-ticket-share-btn, .kc-rsvp-update)::before { border-top-width: 2px; border-right-width: 2px; }
#rsvp :where(.kc-radio-label, #kc-rsvp-submit, .kc-ticket-share-btn, .kc-rsvp-update)::after { border-bottom-width: 2px; border-left-width: 2px; }
/* :where() deja la base en (1,0,0): cada estado de abajo la vence sin pelear especificidad */
/* Sí / No: en reposo, un hilo de lápiz; al elegir se dibuja el trazo, se lava de celeste y aparece el filete doble */
#rsvp .kc-radio-label { box-shadow: inset 0 0 0 1px rgba(33, 70, 111, .32); }
#rsvp .kc-radio-label::before, #rsvp .kc-radio-label::after { opacity: 0; }
#rsvp .kc-radio-label input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; clip-path: inset(50%); }   /* enfocable: nunca display:none */
#rsvp .kc-radio-label:has(input:checked) { box-shadow: none; background-color: rgba(154, 208, 230, .34); outline: 1px solid rgba(33, 70, 111, .4); outline-offset: 4px; }
#rsvp .kc-radio-label:has(input:checked)::before { opacity: 1; animation: azu-draw-tr .3s ease-out both; }
#rsvp .kc-radio-label:has(input:checked)::after { opacity: 1; animation: azu-draw-bl .3s .3s ease-out both; }
#rsvp .kc-radio-label:has(input:focus-visible) { outline: 2px solid var(--azu-night); outline-offset: 4px; }
/* Enviar: aparece cuando ella responde y su contorno se dibuja; al tocar se llena de tinta */
#rsvp #kc-rsvp-submit { margin-top: 1.5rem; letter-spacing: .12em; outline: 1px solid rgba(33, 70, 111, .4); outline-offset: 4px; }
#rsvp #kc-rsvp-submit::before { animation: azu-draw-tr .3s .15s ease-out both; }
#rsvp #kc-rsvp-submit::after { animation: azu-draw-bl .3s .45s ease-out both; }
#rsvp #kc-rsvp-submit:active { background-color: var(--azu-night); color: var(--azu-silver-hi); }
#rsvp #kc-rsvp-submit[aria-busy="true"], #rsvp #kc-rsvp-submit:disabled { cursor: progress; background-color: rgba(18, 41, 85, .12); }
#rsvp #kc-rsvp-submit:focus-visible { outline: 2px solid var(--azu-night); }
@keyframes azu-draw-tr { 0% { clip-path: inset(0 100% calc(100% - 2px) 0); } 50% { clip-path: inset(0 0 calc(100% - 2px) 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes azu-draw-bl { 0% { clip-path: inset(calc(100% - 2px) 0 0 100%); } 50% { clip-path: inset(calc(100% - 2px) 0 0 0); } 100% { clip-path: inset(0 0 0 0); } }

/* Con el pase o la despedida en pantalla, el estado queda solo para lector de pantalla (no se repite "Respuesta registrada"). */
#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; }
/* Despedida: el pergamino sigue, así que "Actualizar" se escribe en tinta navy */
#rsvp #kc-rsvp-form:not(:has(.kc-ticket)) .kc-rsvp-update { --ink: var(--azu-night); }

/* ── Campos: el lápiz subraya, sin cajas ── */
#rsvp :is(.kc-field, .kc-rsvp-field-group, .kc-rsvp-extra-field) { display: grid; gap: .35rem; margin-top: 1.15rem; }
#rsvp .kc-rsvp-extra { display: grid; gap: 0; }
#rsvp :is(.kc-field, .kc-rsvp-field-group, .kc-rsvp-extra-field) label { font-variant: small-caps; text-transform: lowercase; letter-spacing: .14em; font-size: .95rem; color: var(--azu-navy-wash); }
#rsvp #kc-rsvp-form :is(input:not([type="radio"]), select, textarea) {
  width: 100%; min-height: 48px; padding: .55rem .2rem; font: 500 16px / 1.4 var(--azu-font-serif); color: var(--azu-night);
  background: transparent; border: 0; border-bottom: 1.5px solid rgba(18, 41, 85, .55); border-radius: 0;
}
#rsvp #kc-rsvp-form select { -webkit-appearance: none; appearance: none; padding-right: 2rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23122955' stroke-width='1.6'/%3E%3C/svg%3E") right .3rem center / 12px 8px no-repeat; }
#rsvp #kc-rsvp-form textarea { min-height: 5.5rem; resize: vertical; }
#rsvp #kc-rsvp-form :is(input, textarea)::placeholder { color: #3F5C85; opacity: 1; }
#rsvp #kc-rsvp-form :is(input:not([type="radio"]), select, textarea):focus { outline: 2px solid rgba(18, 41, 85, .55); outline-offset: 3px; border-bottom-color: var(--azu-night); }
#rsvp #kc-rsvp-form :is(.kc-rsvp-allocation-note, .kc-status) { margin: .5rem 0 0; text-align: center; font-size: .98rem; line-height: 1.45; color: var(--azu-navy); }
#rsvp #kc-rsvp-form .kc-field-error { margin: .6rem 0 0; text-align: center; font-size: 1rem; color: #8A1F34; }

/* ── El pase: boleto del baile real ── */
#rsvp .kc-rsvp-ticket-host { margin-top: .4rem; }
/* confirmado: el pergamino se enrolla y el pase queda solo; nada compite con la recompensa */
#rsvp #kc-rsvp-form:has(.kc-ticket) { margin: 0; padding: 0; background: none; filter: none; }
#rsvp #kc-rsvp-form:has(.kc-ticket) > :not(.azu-rsvp-slipper) { margin-inline: 0; }
#rsvp #kc-rsvp-form:has(.kc-ticket) .azu-rsvp-slipper { display: none; }
#rsvp .kc-rsvp-ticket-host .kc-ticket {
  position: relative; overflow: hidden; padding: 2.4rem 1.3rem 1.5rem; text-align: center; color: var(--azu-silver-hi); border-radius: 18px;
  background: radial-gradient(90% 55% at 50% 0%, rgba(154, 208, 230, .26), transparent 62%), radial-gradient(70% 50% at 85% 100%, rgba(33, 70, 111, .7), transparent 70%), linear-gradient(180deg, #122955, #070A2F 70%);
  box-shadow: 0 26px 44px -20px rgba(3, 6, 28, .9), inset 0 0 0 1px rgba(201, 211, 221, .55);
  animation: azu-pass-in .5s cubic-bezier(.2, .9, .3, 1.1) both;
}
/* doble filete plata, como el marco del Gate */
#rsvp .kc-rsvp-ticket-host .kc-ticket::before { content: ""; position: absolute; inset: .55rem; border: 1px solid rgba(201, 211, 221, .6); border-radius: 12px; box-shadow: inset 0 0 0 4px rgba(7, 10, 47, .35), inset 0 0 0 5px rgba(202, 236, 246, .28); pointer-events: none; }
#rsvp .kc-ticket-particles { position: absolute; inset: 0; pointer-events: none; }
#rsvp .kc-tp { position: absolute; width: 9px; height: 9px; font-size: 0; background: var(--azu-glass); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: azu-pass-twinkle 2.6s ease-in-out infinite alternate; }
#rsvp .kc-tp-1 { left: 11%; top: 13%; }
#rsvp .kc-tp-2 { right: 12%; top: 27%; width: 6px; height: 6px; animation-delay: -.8s; }
#rsvp .kc-tp-3 { left: 15%; bottom: 31%; width: 6px; height: 6px; animation-delay: -1.6s; }
#rsvp .kc-tp-4 { right: 16%; bottom: 14%; animation-delay: -2.2s; }
#rsvp .kc-rsvp-ticket-host .kc-ticket > :not(.kc-ticket-particles) { position: relative; z-index: 1; }
/* cresta: la zapatilla de cristal sobre el título */
#rsvp .kc-ticket-header { display: grid; justify-items: center; gap: .35rem; margin: 0 0 .3rem; }
#rsvp .kc-ticket-header::before { content: ""; width: 58px; height: 58px; background: url("assets/scroll/slipper-icon.webp") center / contain no-repeat; filter: drop-shadow(0 0 10px rgba(154, 208, 230, .55)); }
#rsvp :is(.kc-ticket-crown-ornament, .kc-ticket-guest-label, .kc-ticket-qr-hint) { font-variant: small-caps; text-transform: lowercase; letter-spacing: .24em; font-size: .85rem; color: var(--azu-glass); }
#rsvp .kc-ticket-status { display: none; }
#rsvp .kc-ticket-event { margin: .1rem 0 0; font: 400 3.3rem / 1.1 var(--azu-font-script); color: var(--azu-silver-hi); text-shadow: 0 0 18px rgba(202, 236, 246, .55); white-space: nowrap; }
#rsvp .kc-ticket-celebrant { margin: 0; font-variant: small-caps; text-transform: lowercase; letter-spacing: .3em; font-size: 1rem; color: var(--azu-silver); }
#rsvp .kc-ticket-rule { margin: .9rem auto; width: 70%; height: 1px; font-size: 0; background: linear-gradient(90deg, transparent, rgba(201, 211, 221, .7), transparent); }
#rsvp .kc-ticket-guest-label { margin: 0; }
#rsvp .kc-ticket-guest { margin: .3rem 0 .15rem; font: 500 1.5rem / 1.2 var(--azu-font-serif); color: var(--azu-silver-hi); overflow-wrap: anywhere; }
#rsvp .kc-ticket-passes { display: inline-block; margin: .2rem 0 0; padding: .3rem .9rem; border: 1px solid rgba(202, 236, 246, .55); border-radius: 999px; font-variant: small-caps; text-transform: lowercase; letter-spacing: .16em; font-size: .9rem; color: var(--azu-glass); white-space: nowrap; }
#rsvp .kc-ticket-date { margin: .55rem 0 0; font-size: 1rem; letter-spacing: .06em; color: var(--azu-silver); }
#rsvp .kc-ticket-qr-wrap { margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px dashed rgba(201, 211, 221, .45); }
#rsvp .kc-ticket-qr-frame { display: inline-block; padding: .65rem; background: var(--azu-silver-hi); border-radius: 6px; box-shadow: 0 0 0 1px rgba(201, 211, 221, .9), 0 0 0 4px rgba(7, 10, 47, .65), 0 0 0 5px rgba(202, 236, 246, .5), 0 0 26px -4px rgba(154, 208, 230, .55); }
#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: .7rem 0 0; font-size: .8rem; letter-spacing: .22em; color: rgba(201, 211, 221, .7); }
#rsvp .kc-ticket-brand { margin: .8rem 0 0; font-variant: small-caps; text-transform: lowercase; letter-spacing: .26em; font-size: .72rem; color: rgba(201, 211, 221, .55); }

/* ── Guardar pase / actualizar respuesta: la misma gramática de lápiz, en plata sobre la noche ── */
#rsvp .kc-ticket-share { margin-top: 1rem; }
#rsvp :is(.kc-ticket-share-btn, .kc-rsvp-update) { --ink: var(--azu-silver-hi); }
#rsvp .kc-ticket-share-btn { outline: 1px solid rgba(201, 211, 221, .4); outline-offset: 4px; }
#rsvp .kc-ticket-share-btn::before, #rsvp .kc-rsvp-update::before { animation: azu-draw-tr .3s .2s ease-out both; }
#rsvp .kc-ticket-share-btn::after, #rsvp .kc-rsvp-update::after { animation: azu-draw-bl .3s .5s ease-out both; }
#rsvp .kc-rsvp-update { margin-top: .9rem; --ink: rgba(201, 211, 221, .7); }
#rsvp :is(.kc-ticket-share-btn, .kc-rsvp-update):active { background-color: var(--azu-silver-hi); color: var(--azu-night); }
#rsvp :is(.kc-ticket-share-btn, .kc-rsvp-update):focus-visible { outline: 2px solid var(--azu-silver-hi); outline-offset: 4px; }
#rsvp .kc-ticket-share-btn:disabled { opacity: .7; cursor: progress; }

/* ── "No podré" (queda en el pergamino, tinta navy) y cierre ── */
#rsvp :is(.kc-rsvp-farewell, .kc-rsvp-closed-note) { padding: .4rem 0 .6rem; text-align: center; color: var(--azu-night); }
#rsvp .kc-rsvp-farewell-eyebrow { margin: 0; font-variant: small-caps; text-transform: lowercase; letter-spacing: .2em; font-size: .95rem; color: var(--azu-navy-wash); }
#rsvp .kc-rsvp-farewell-guest { margin: .25rem 0 .3rem; font: 500 1.7rem / 1.2 var(--azu-font-serif); overflow-wrap: anywhere; }   /* nombres en mayúsculas se rompen en caligrafía: serif */
#rsvp :is(.kc-rsvp-farewell-body, .kc-rsvp-closed-note p) { margin: .4rem 0 0; font-size: 1.02rem; line-height: 1.55; color: var(--azu-navy); }
#rsvp .kc-rsvp-farewell-brand { margin: .8rem 0 0; font-variant: small-caps; text-transform: lowercase; letter-spacing: .26em; font-size: .72rem; color: var(--azu-steel); }
#rsvp .kc-rsvp-closed-note strong { display: block; font: 500 1.25rem / 1.3 var(--azu-font-serif); }

@keyframes azu-pass-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes azu-pass-twinkle { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #rsvp .kc-rsvp-ticket-host .kc-ticket, #rsvp .kc-tp { animation: none; }
  #rsvp :is(.kc-radio-label, #kc-rsvp-submit, .kc-ticket-share-btn, .kc-rsvp-update) { transition: none; }
  #rsvp :is(.kc-radio-label, #kc-rsvp-submit, .kc-ticket-share-btn, .kc-rsvp-update)::before, #rsvp :is(.kc-radio-label, #kc-rsvp-submit, .kc-ticket-share-btn, .kc-rsvp-update)::after { animation: none !important; clip-path: none; }
}

/* Export PNG del pase: sin estrellas ni sombras que el rasterizador ensucie. Sin scope: va en <html>. */
.kc-rsvp-capture-clean #rsvp .kc-rsvp-ticket-host .kc-ticket { animation: none; box-shadow: none; }
.kc-rsvp-capture-clean #rsvp .kc-ticket-particles { display: none; }
.kc-rsvp-capture-clean #rsvp .kc-ticket-header::before { display: none; }   /* el rasterizador no pinta el fondo del pseudo: mejor ausente que un hueco */
.kc-rsvp-capture-clean #rsvp .kc-rsvp-ticket-host .kc-ticket { border-radius: 0; }
.kc-rsvp-capture-clean #rsvp .kc-ticket-qr-frame { box-shadow: none; border: 2px solid #C9D3DD; }   /* WebKit ensucia los anillos de box-shadow en el PNG */