@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
}
/* Quantum Kernel Flow — Ultra-Taste Design Engineering Standard.
   Tokens del Figma "Asistencias" (PXjTdAxeDkffJovTDWtpuJ · 2630:2053), ajustados al
   Figma "Ajustes asistencias" (6X8i4LnBk0nQATrcYhlgPc · 126:24804, Sept 2026).
   Curvatura continua C² (corner-smoothing: 100%), física hidráulica sin sobreimpulso
   y continuidad de viewport total en móvil y escritorio. */

.qk {
  --qk-bg: #141519;
  --qk-card: #1e2025;
  --qk-card-hover: #24272e;
  --qk-field: #383a41;
  --qk-text: #fcfcfe;
  --qk-muted: #9e9ea7;
  --qk-accent: #5fe08a;
  --qk-accent-mid: #7bf7a2;
  --qk-accent-gradient: linear-gradient(135deg, #DFF2A8 0%, #00AA50 100%);
  --qk-cta: linear-gradient(90deg, #e6c023 0%, #eeae27 100%);
  --qk-on-cta: #fff;
  --qk-yellow: #f5d03a;
  --qk-yellow-glow: rgba(245, 208, 58, 0.28);
  --qk-bubble-bg: var(--qk-card, #343434);
  --qk-bubble-border: var(--qk-border, rgba(255, 255, 255, 0.08));
  --qk-success: #5fe08a;
  --qk-error: #ff7b73;
  --qk-line: rgba(255, 255, 255, 0.08);
  --qk-border: rgba(255, 255, 255, 0.08);
  --qk-border-grad: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.10) 100%);
  --qk-border-grad-hover: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.04) 48%, rgba(237, 199, 41, 0.22) 100%);
  --qk-border-grad-accent: linear-gradient(135deg, color-mix(in srgb, var(--qk-accent, #5fe08a) 45%, transparent) 0%, rgba(255, 255, 255, 0.03) 48%, rgba(237, 199, 41, 0.22) 100%);
  --qk-card-specular: rgba(255, 255, 255, 0.14);
  --qk-glass: rgba(26, 28, 33, 0.72);
  --qk-field-hover: #3f424b;
  --qk-field-focus: #3a3c44;
  --qk-placeholder: #7d8088;
  --qk-btn-pending-bg: #33353a;
  --qk-btn-pending-text: #a7a9b2;
  --qk-btn-pending-hover-bg: #3a3c42;
  --qk-btn-pending-hover-text: #fcfcfe;
  color-scheme: dark;
  --qk-note: #3e3514;
  --qk-note-border: rgba(237, 199, 41, 0.32);
  --qk-ease: cubic-bezier(0.16, 1, 0.3, 1);
  
  /* C² Continuous Curvature Tokens (Exaggerated Squircle Ultra-Taste) */
  --radius-squircle-xs: calc(12px * var(--qk-r, 1));
  --radius-squircle-sm: calc(18px * var(--qk-r, 1));
  --radius-squircle-md: calc(26px * var(--qk-r, 1));
  --radius-squircle-lg: calc(34px * var(--qk-r, 1));
  --radius-squircle-xl: calc(44px * var(--qk-r, 1));
  --radius-pill: 9999px;

  /* Amortiguador hidráulico crítico Butter (zeta = 1.06, 0% overshoot, luxury glide) */
  --qk-hidraulico: linear(
    0, 0.015, 0.06 2.5%, 0.134 5.2%, 0.234 8.2%, 0.354 11.6%,
    0.488 15.4%, 0.627 19.8%, 0.76 25%, 0.867 31.4%,
    0.938 38.6%, 0.978 47.4%, 0.995 58.6%, 1 100%
  );
  --ease-hydraulic-butter: var(--qk-hidraulico);
  --duration-snappy: 220ms;
  --duration-glide: 280ms;
  --qk-press: 120ms;
  --qk-glide: 280ms;
  --duration-hover: 260ms;

  /* Elevación flotante ultra-limpia sin sombras pesadas ni opacidad turbia */
  --qk-shadow-sm: none;
  --qk-shadow-md: none;
  --qk-shadow-card: none;

  /* Alturas de lo que vive pegado: las usa el contenido para no quedar debajo. */
  --qk-sheet: 0px;
  --qk-dock: 0px;
  --qk-safe: env(safe-area-inset-bottom, 0px);

  box-sizing: border-box;
  position: relative;
  background-color: var(--qk-bg);
  background-image: 
    radial-gradient(ellipse 70% 50% at 50% -10%, var(--qk-accent-soft, rgba(249, 120, 190, 0.12)), transparent 70%);
  background-attachment: fixed;
  color: var(--qk-text);
  font-family: Montserrat, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 18px 16px 140px;
  scroll-padding-block: 96px calc(120px + var(--qk-safe));
  overflow-x: hidden;
  overflow-x: clip; /* clip no crea contenedor de scroll: sin él, el sticky de «Tus respuestas» nunca se pegaba en escritorio */
  container-type: inline-size;
  container-name: qk;
}

/* Modo Claro / Light Theme (Sincronizado con app.woowtodobien.com y preferencias del usuario) */
.qk[data-theme="light"],
.qk.qk--light,
[data-theme="light"] .qk {
  --qk-bg: #f8f9fb;
  --qk-card: #ffffff;
  --qk-card-hover: #f3f4f6;
  --qk-field: #eef1f5;
  --qk-field-hover: #e4e7ed;
  --qk-field-focus: #ffffff;
  --qk-placeholder: #5f6c7b;
  --qk-text: #141519;
  --qk-muted: #52525b;
  --qk-line: rgba(0, 0, 0, 0.07);
  --qk-border: rgba(0, 0, 0, 0.08);
  --qk-border-hover: rgba(0, 0, 0, 0.18);
  --qk-border-grad: linear-gradient(135deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.02) 45%, rgba(0, 0, 0, 0.07) 100%);
  --qk-border-grad-hover: linear-gradient(135deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.04) 45%, rgba(0, 0, 0, 0.12) 100%);
  --qk-card-specular: rgba(0, 0, 0, 0.04);
  --qk-glass: rgba(255, 255, 255, 0.88);
  --qk-btn-pending-bg: #e5e7eb;
  --qk-btn-pending-text: #4b5563;
  --qk-btn-pending-hover-bg: #d1d5db;
  --qk-btn-pending-hover-text: #1f2937;
  color-scheme: light;
  --qk-bubble-bg: #ffffff;
  --qk-bubble-border: rgba(0, 0, 0, 0.08);
  --qk-accent: #047857;
  --qk-accent-mid: #047857;
  --qk-accent-soft: rgba(4, 120, 87, 0.10);
  --qk-yellow: #a16207;
  --qk-price: var(--qk-text); /* en claro el ámbar oscuro se lee café: el precio va en tinta */
  --qk-on-cta: #fff;
  --qk-note: #fef9c3;
  --qk-note-border: rgba(202, 138, 4, 0.35);
  --qk-shadow-sm: none;
  --qk-shadow-md: none;
  --qk-shadow-card: none;
  background-image:
    radial-gradient(ellipse 70% 50% at 50% -10%, var(--qk-accent-soft, rgba(4, 120, 87, 0.08)), transparent 70%);
}

.qk *,
.qk *::before,
.qk *::after {
  box-sizing: inherit;
  -webkit-tap-highlight-color: transparent;
}
.qk [hidden] { display: none !important; }
.qk :is(button, a, summary, .qk-top, .qk-head, .qk-bubble, .qk-actions, .qk-label, .qk-radio, .qk-plan, .qk-service) {
  -webkit-user-select: none;
  user-select: none;
}
.qk :is(input, textarea) {
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
.qk :is(button, a, summary):focus-visible {
  outline: 2px solid var(--qk-accent-mid);
  outline-offset: 2px;
}
.qk :is(input, select, textarea):focus-visible {
  outline: none;
}
.qk [data-focus]:focus { outline: none; }

/* Invariante Anti-Autofill Slop: elimina el destello azul claro de WebKit en fondos oscuros y claros */
.qk-input:-webkit-autofill,
.qk-input:-webkit-autofill:hover,
.qk-input:-webkit-autofill:focus,
.qk-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #383a41 inset !important;
  -webkit-text-fill-color: #fcfcfe !important;
  caret-color: #fcfcfe !important;
  transition: background-color 5000s ease-in-out 0s;
}
.qk[data-theme="light"] .qk-input:-webkit-autofill,
.qk[data-theme="light"] .qk-input:-webkit-autofill:hover,
.qk[data-theme="light"] .qk-input:-webkit-autofill:focus,
.qk[data-theme="light"] .qk-input:-webkit-autofill:active,
.qk.qk--light .qk-input:-webkit-autofill,
.qk.qk--light .qk-input:-webkit-autofill:hover,
.qk.qk--light .qk-input:-webkit-autofill:focus,
.qk.qk--light .qk-input:-webkit-autofill:active,
[data-theme="light"] .qk .qk-input:-webkit-autofill,
[data-theme="light"] .qk .qk-input:-webkit-autofill:hover,
[data-theme="light"] .qk .qk-input:-webkit-autofill:focus,
[data-theme="light"] .qk .qk-input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #eef1f5 inset !important;
  -webkit-text-fill-color: #141519 !important;
  caret-color: #141519 !important;
}
.qk-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.qk-shell {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  max-inline-size: 560px;
  margin-inline: auto;
  min-inline-size: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.qk-main {
  display: grid;
  gap: 20px;
  padding-bottom: 24px;
  inline-size: 100%;
  transition: min-height 320ms var(--qk-hidraulico);
  will-change: min-height;
  /* El view-transition-name de .qk-main lo vuelve contexto de apilamiento: sin z-index propio, el botón fijo (z 50) queda debajo de «Tus respuestas» (z 2) */
  z-index: 3;
}
.qk-step {
  display: grid;
  gap: 20px;
}

/* Stagger Children — Cascada secuencial para evitar desorientación al cambiar de paso */
@keyframes qk-stagger-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.994);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 7. Ficha PDP: cada bloque entra 55 ms después del anterior. Si viene de la tarjeta del lobby (.qk-step--morph) la portada
   ya llegó volando (qk-cover) y el resto espera a que asiente. */
.qk-pdp > * {
  animation: qk-stagger-in 340ms var(--qk-hidraulico) calc(40ms + var(--qk-i, 0) * 55ms) both;
}
.qk-pdp > :nth-child(2) { --qk-i: 1; }
.qk-pdp > :nth-child(3) { --qk-i: 2; }
.qk-pdp > :nth-child(4) { --qk-i: 3; }
.qk-pdp > :nth-child(5) { --qk-i: 4; }
.qk-pdp > :nth-child(6) { --qk-i: 5; }
.qk-pdp > :nth-child(n+7) { --qk-i: 6; }
.qk-step--morph .qk-pdp > * { animation-delay: calc(230ms + var(--qk-i, 0) * 55ms); }
.qk-step--morph .qk-pdp > .qk-pdp-cover { animation: none; }

/* 8. Botones de acción y pie */
.qk-pdp-foot {
  animation: qk-stagger-in 320ms var(--qk-hidraulico) 210ms both !important;
}
.qk-step--morph > .qk-pdp-foot { animation-delay: 380ms !important; }

/* 9. Ticket de confirmación */
.qk-ticket > * {
  animation: qk-stagger-in 300ms var(--qk-hidraulico) backwards;
}
.qk-ticket > *:nth-child(1) { animation-delay: 30ms; }
.qk-ticket > *:nth-child(2) { animation-delay: 75ms; }
.qk-ticket > *:nth-child(3) { animation-delay: 120ms; }
.qk-ticket > *:nth-child(4) { animation-delay: 165ms; }
.qk-ticket > *:nth-child(5) { animation-delay: 210ms; }
.qk-ticket > *:nth-child(n+6) { animation-delay: 255ms; }

/* La misma pantalla repintada (p. ej. con errores) no vuelve a entrar: solo tiembla lo que hay que corregir */
.qk-step.qk-step--same,
.qk-step--same > *,
.qk-step--same :is(.qk-form > *, .qk-card > *, .qk-choice-option, .qk-plan, .qk-bubble, .qk-bubble-text, .qk-summary div, .qk-medal) {
  animation: none !important;
}
.qk-step--same :is(.qk-input, .qk-choice)[aria-invalid="true"] {
  animation: qk-shake 380ms var(--qk-ease) both !important;
}
@keyframes qk-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

/* Bloqueo estricto de pointer-events y cursor de espera durante interacciones ocupadas (delay de 0.8s) */
.qk-main[aria-busy="true"]:not(.qk-shell--lobby .qk-main),
.qk-main[aria-busy="true"]:not(.qk-shell--lobby .qk-main) * {
  pointer-events: none !important;
}
.qk-main[aria-busy="true"]:not(.qk-shell--lobby .qk-main) {
  cursor: wait !important;
}
.qk-main[aria-busy="true"] .qk-head,
.qk-main[aria-busy="true"] .qk-back,
.qk-main[aria-busy="true"] .qk-close {
  pointer-events: auto !important;
  cursor: pointer !important;
}

@media (prefers-reduced-motion: reduce) {
  .qk-step,
  .qk-step > *,
  .qk-form > *,
  .qk-card > *,
  .qk-choice-option,
  .qk-service,
  .qk-plan,
  .qk-pdp > *,
  .qk-actions,
  .qk-pdp-foot,
  .qk-ticket > * {
    animation: none !important;
    transform: none !important;
  }
  /* En movimiento reducido, preservar transiciones suaves de opacidad y color (evitar destellos instantáneos a 0ms que aturden en TDAH) */
  .qk :is(.qk-choice-option, .qk-row, .qk-tile, .qk-plan, .qk-cta, .qk-secondary, .qk-chip, .qk-back, .qk-theme-toggle) {
    transition: opacity 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease !important;
  }
}

/* Encabezado y progreso: pegados arriba */
.qk-top {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  display: grid;
  gap: 10px;
  margin-inline: -16px;
  padding: 0 16px 10px;
  background: var(--qk-bg);
}
/* Barra de navegación del Figma: flecha, título en oración, ⓧ y divisoria */
.qk-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  margin-inline: -16px;
  padding: 4px 16px;
}
.qk-top:has(.qk-progress) .qk-head { margin-block-end: 4px; }
.qk-back {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--qk-text);
  cursor: pointer;
  transition: background-color 160ms var(--qk-ease), transform var(--qk-press) var(--qk-hidraulico);
}
.qk-back::after { content: ""; position: absolute; inset: -4px; }
.qk-back:active { transform: scale(0.92); }
@media (hover: hover) {
  .qk-back:hover { background: rgba(255, 255, 255, 0.08); }
  .qk[data-theme="light"] .qk-back:hover,
  .qk.qk--light .qk-back:hover,
  [data-theme="light"] .qk .qk-back:hover { background: rgba(0, 0, 0, 0.06); }
}
.qk-title {
  grid-column: 2;
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  text-wrap: balance;
}
.qk-head-actions {
  grid-column: 3;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-self: end;
}
.qk-theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--qk-muted);
  cursor: pointer;
  transition: background-color 160ms var(--qk-ease), color 160ms var(--qk-ease), transform var(--qk-press) var(--qk-hidraulico);
}
.qk-theme-toggle::after { content: ""; position: absolute; inset: -4px; }
@media (hover: hover) {
  .qk-theme-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--qk-text);
  }
  .qk[data-theme="light"] .qk-theme-toggle:hover,
  .qk.qk--light .qk-theme-toggle:hover,
  [data-theme="light"] .qk .qk-theme-toggle:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--qk-text);
  }
}
.qk-theme-toggle:active { transform: scale(0.92); }
.qk-back-placeholder { grid-column: 1; inline-size: 36px; block-size: 36px; display: block; }
.qk-head:not(:has(.qk-back)) { grid-template-columns: minmax(0, 1fr) auto; }
.qk-head:not(:has(.qk-back)) .qk-title { grid-column: 1; text-align: left; }

.qk-progress { display: flex; align-items: center; gap: 8px; margin-block-end: 2px; }
.qk-progress-track {
  flex: 1;
  block-size: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.qk-progress-fill {
  position: relative;
  block-size: 100%;
  background: var(--qk-accent-gradient);
  border-radius: 999px;
  transform-origin: left;
  transition: transform 360ms var(--qk-hidraulico);
  overflow: hidden;
}

/* Cabecera conversacional flotante con globito y piquito SVG */
.qk-bubble {
  position: relative;
  overflow: visible;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 2px 8px;
  min-inline-size: 0;
  animation: qk-bubble-enter 380ms var(--qk-hidraulico) both;
  transition: opacity 360ms var(--qk-hidraulico), transform 360ms var(--qk-hidraulico);
}
@keyframes qk-bubble-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.qk-avatar {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 50%;
  background: #25272e;
  border: 1.5px solid var(--qk-accent-mid);
  color: var(--qk-text);
  flex: none;
  transition: inline-size 360ms var(--qk-hidraulico),
              block-size 360ms var(--qk-hidraulico),
              transform 360ms var(--qk-hidraulico),
              box-shadow 360ms ease;
  z-index: 2;
}
.qk-avatar::after {
  content: "";
  position: absolute;
  inset: auto -1px -1px auto;
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  background: #3ecf6e;
  border: 2px solid var(--qk-bg);
  pointer-events: none;
}
.qk-avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Globito estilo WhatsApp / Linear con piquito SVG */
.qk-bubble-balloon {
  position: relative;
  flex: 1;
  min-inline-size: 0;
  padding: 12px 18px;
  border-radius: var(--radius-squircle-sm, 18px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-bubble-bg, #343434);
  border: 1px solid var(--qk-bubble-border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 6px 14px -6px rgba(0, 0, 0, 0.22);
  transition: transform 320ms var(--qk-hidraulico),
              border-color 320ms ease,
              background 320ms ease,
              box-shadow 320ms ease;
}

/* Piquito del globito SVG (WhatsApp WDS curvature) */
.qk-bubble-tail {
  position: absolute;
  left: -8px;
  top: 13px;
  inline-size: 9px;
  block-size: 14px;
  pointer-events: none;
  z-index: 3;
  transition: opacity 280ms ease, transform 280ms var(--qk-hidraulico);
}
.qk-bubble-tail path.qk-bubble-tail-bg {
  fill: var(--qk-bubble-bg);
}
.qk-bubble-tail path.qk-bubble-tail-border {
  stroke: var(--qk-bubble-border);
}

.qk-bubble-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.qk-bubble-kicker {
  display: block;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: var(--qk-accent, #5FE08A);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.95;
  -webkit-font-smoothing: antialiased;
}
.qk-bubble-text {
  margin: 0;
  font-size: 15.5px;
  line-height: 22px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--qk-text);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: qk-text-enter 320ms var(--qk-hidraulico) both;
}
@keyframes qk-text-enter {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.qk-step.qk-step--revealed .qk-bubble {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
}
.qk-step.qk-step--revealed .qk-avatar {
  inline-size: 40px;
  block-size: 40px;
  transform: scale(1);
}
.qk-step.qk-step--revealed .qk-bubble-tail {
  opacity: 1;
  transform: scale(1) translateX(0);
}
.qk-step.qk-step--revealed .qk-bubble-content {
  align-items: flex-start;
}

/* Escena bajo el globito, como WOOW 2.0 (/vertical/autos): la ilustración abajo, el asesor y su globito arriba */
/* La franja manda el ALTO (el svg siempre mide 136 px pegado abajo): el héroe mide lo mismo en celular y escritorio
   y nunca se recorta; lo que sobra a los lados lo llena el mosaico de la propia escena. Ver rive/scene_kit.py */
.qk-scene {
  position: absolute;
  inset: auto -16px 0;
  block-size: 136px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}
.qk-scene:empty { display: none; }
.qk-scene > svg { position: absolute; inset-inline: 0; inset-block-end: 0; inline-size: 100%; block-size: 136px; }
/* El globito nunca se encima: la escena vive en su propia franja debajo */
.qk-bubble.has-scene { padding-block-end: 140px; }
.qk-bubble.has-scene > :not(.qk-scene) { position: relative; z-index: 1; }
/* Con campos que escribir, los campos mandan: la franja se acorta y solo se ve la parte de abajo de la escena */
.qk-step:has(.qk-form .qk-input) .qk-bubble.has-scene { padding-block-end: 96px; }
.qk-step:has(.qk-form .qk-input) .qk-scene {
  block-size: 92px;
  -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
/* Pantallas bajas (iPhone SE, Android chicos): la elección tiene que verse sin scroll, así que la franja se acorta igual que con campos */
@media (max-height: 740px) {
  .qk-bubble.has-scene { padding-block-end: 96px; }
  .qk-scene {
    block-size: 92px;
    -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  }
}
/* Escena de auto: en asistencias (cambio de llanta, paso de corriente, gasolina) el auto hereda el degradado rosa */
.qk[data-process="asistencias"] #auto-g stop:first-child {
  stop-color: var(--qk-scene-start, #FF6EA7);
}
.qk[data-process="asistencias"] #auto-g stop:last-child {
  stop-color: var(--qk-scene-end, #D82574);
}
.qk[data-process="asistencias"][data-theme="light"] #auto-g stop:first-child,
.qk[data-process="asistencias"].qk--light #auto-g stop:first-child {
  stop-color: var(--qk-scene-light-start, #F35797);
}
.qk[data-process="asistencias"][data-theme="light"] #auto-g stop:last-child,
.qk[data-process="asistencias"].qk--light #auto-g stop:last-child {
  stop-color: var(--qk-scene-light-end, #D62573);
}

/* Aviso amarillo (p. ej. la llamada desde la Ciudad de México — Figma 164:33031) */
.qk-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-squircle-sm);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-note);
  color: var(--qk-text);
  font-size: 13px;
  line-height: 19px;
  font-weight: 500;
}
.qk-note .qk-icon {
  color: var(--qk-yellow);
}
.qk-note p { margin: 0; text-wrap: pretty; }
.qk-note ul { margin: 6px 0 0; padding-inline-start: 18px; }

/* Tarjeta de formulario — Floating Surface Minimalista */
.qk-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 16px;
  padding: 22px 20px;
  border-radius: var(--radius-squircle-md, 24px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-card);
}
.qk-form > .qk-card {
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
}
.qk-card > * {
  position: relative;
  z-index: 1;
}
.qk-required-note {
  margin: 0;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--qk-muted);
  text-align: right;
  font-weight: 500;
}
.qk-field { display: grid; gap: 6px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
/* Pantallas largas en bloques (domicilio, beneficiario): la sección la dice el proceso, no el front */
.qk-fieldset { display: grid; gap: 16px; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.qk-fieldset-title {
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qk-muted, #94a3b8);
}
.qk-label {
  padding: 0;
  font-size: 14px;
  line-height: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--qk-text);
  -webkit-font-smoothing: antialiased;
}
.qk-required {
  color: var(--qk-accent);
  margin-inline-start: 3px;
  font-weight: 500;
  opacity: 0.85;
}
.qk-input {
  inline-size: 100%;
  min-block-size: 50px;
  block-size: 50px;
  padding: 12px 18px;
  border-radius: var(--radius-squircle-sm, 16px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-field);
  border: 1px solid transparent;
  color: var(--qk-text);
  font: inherit;
  font-size: 16px; /* con menos, iOS hace zoom al enfocar */
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration-snappy) var(--qk-ease),
              border-color var(--duration-snappy) var(--qk-ease),
              box-shadow var(--duration-snappy) var(--qk-ease);
}
.qk-input:focus {
  --fill: var(--qk-field-focus);
  outline: 1.5px solid transparent !important; /* transparente: sigue visible en modo de alto contraste */
  background: var(--qk-wash) padding-box, linear-gradient(var(--fill), var(--fill)) padding-box, var(--qk-edge) border-box, linear-gradient(var(--fill), var(--fill)) border-box;
}
.qk-input::placeholder { color: var(--qk-placeholder); opacity: 1; }
.qk-input[aria-invalid="true"] {
  --qk-edge: linear-gradient(var(--qk-error), var(--qk-error));
  border-color: var(--qk-error);
  outline: 0;
}
.qk-textarea { min-block-size: 112px; resize: vertical; block-size: auto; }
.qk-error { margin: 0; font-size: 13px; line-height: 18px; color: var(--qk-error); font-weight: 500; }
/* Micro-detalles de campo (29-sep): sin resplandor de color (se veía viejo): el foco es UN trazo nítido; la etiqueta y el cursor toman el acento;
   el error crece con la altura en vez de empujar el layout de golpe. */
.qk-input { caret-color: var(--qk-accent-mid); }
/* Aviso que deja seguir («…toca Continuar.»): información en ámbar, no error en rojo; todo lo que pinta el error usa --qk-error. */
.qk-field:has(.qk-error--aviso) { --qk-error: #ffb454; }
.qk.qk--light .qk-field:has(.qk-error--aviso), [data-theme="light"] .qk .qk-field:has(.qk-error--aviso) { --qk-error: #9a5a00; }
.qk-field:has(.qk-error--aviso) .qk-choice[aria-invalid="true"] .qk-choice-option:not(:has(:checked)) { border-color: transparent; } /* el aviso no acusa a la opción no elegida */
.qk-label { transition: color var(--duration-snappy) var(--qk-ease); }
.qk-field:focus-within > .qk-label { color: var(--qk-accent-mid); }
:root:has(.qk-form) { scroll-padding-block: 96px 148px; }
html:has(.qk), body:has(.qk) { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; } /* hidden de respaldo: navegadores sin clip dejaban la página mover de lado */
@media (prefers-reduced-motion: no-preference) {
  @keyframes qk-crece { from { opacity: 0; transform: translateY(-4px); } }
  .qk-error { animation: qk-crece 260ms var(--qk-hidraulico) both; }
  @supports (interpolate-size: allow-keywords) {
    @keyframes qk-crece { from { opacity: 0; block-size: 0; transform: translateY(-4px); } }
    .qk-error { interpolate-size: allow-keywords; overflow: clip; }
  }
}
.qk-inline-action {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 32px;
  padding: 4px 12px;
  border-radius: var(--radius-squircle-xs, 8px);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--qk-muted, #94a3b8);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.qk-inline-action:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--qk-text);
}
.qk-coords {
  display: none !important;
}

/* Cartera WOOW (1-clic hydration) */
.qk-wallet-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  padding: 12px 16px;
  margin-block-end: 14px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-squircle-sm, 14px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
}
.qk-wallet-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 200px;
  min-inline-size: 0;
  overflow: hidden;
}
.qk-wallet-icon {
  display: grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--qk-accent-soft, rgba(235, 10, 127, 0.12));
  color: var(--qk-accent-mid, #ed65ae);
  font-size: 16px;
}
.qk-wallet-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.qk-wallet-kicker {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--qk-accent-mid, #ed65ae);
}
.qk-wallet-title {
  font-size: 13.5px;
  line-height: 17px;
  font-weight: 600;
  color: var(--qk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-font-smoothing: antialiased;
}
.qk-wallet-meta {
  font-size: 11px;
  line-height: 14px;
  color: var(--qk-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qk-wallet-btn {
  flex: none;
  margin-inline-start: auto;
  border: 0;
  background: var(--qk-accent);
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 9999px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 240ms var(--qk-hidraulico);
  white-space: nowrap;
}
.qk-wallet-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.qk-wallet-btn:active {
  transform: scale(0.97);
}

/* Rounded Flotante Search Autocomplete Directions */
.qk-location-field {
  position: relative;
  z-index: 40;
}
.qk-search-pill-wrap {
  position: relative;
  inline-size: 100%;
  z-index: 50;
}
.qk-search-pill {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qk-autocomplete-list {
  position: absolute;
  top: 52px;
  inset-inline: 0;
  z-index: 1000;
  margin: 0;
  padding: 8px 6px;
  list-style: none;
  background: var(--qk-card);
  border: 1px solid var(--qk-border);
  border-radius: var(--radius-squircle-md, 16px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  box-shadow: var(--qk-shadow-card);
  max-block-size: 260px;
  overflow-y: auto;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.qk-autocomplete-list.hidden { display: none; }
.qk-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-squircle-xs, 8px);
  cursor: pointer;
  font-size: 13px;
  color: var(--qk-text);
  transition: background 120ms ease;
}
.qk-autocomplete-item:hover,
.qk-autocomplete-item--active {
  background: var(--qk-card-hover);
}
.qk-autocomplete-pin {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--qk-muted, #94a3b8);
}
.qk-autocomplete-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}
.qk-autocomplete-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--qk-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qk-autocomplete-sub {
  font-size: 11px;
  color: var(--qk-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qk-map {
  margin-block-start: 12px;
  border-radius: var(--radius-squircle-md, 18px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  background: #121316;
  block-size: 250px;
  min-block-size: 250px;
  position: relative;
  transition: opacity 240ms var(--qk-ease), transform 240ms var(--qk-hidraulico);
}
.qk-map[hidden] { display: none !important; }
.qk-map-canvas {
  inline-size: 100%;
  block-size: 100%;
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #121316;
}
.qk-map-frame {
  inline-size: 100%;
  block-size: calc(100% + 44px);
  margin-block-end: -44px;
  border: 0;
  display: block;
  /* Fallback dark mode filter */
  filter: invert(90%) hue-rotate(180deg) brightness(92%) contrast(115%);
  pointer-events: auto;
}
.qk-map:has(.leaflet-container) .qk-map-frame {
  display: none !important;
}

/* Leaflet Container & Controls (Aesthetic Dark Grayscale) */
.qk-map,
.qk-map-canvas,
.qk-map .leaflet-container {
  touch-action: pan-y !important;
}
.qk-leaflet-marker-wrap,
.qk-map-pin {
  touch-action: none !important;
}
.qk-map .leaflet-container {
  inline-size: 100%;
  block-size: 100%;
  background: #121316;
  font-family: inherit;
  outline: 0;
}
.qk-map .leaflet-control-zoom {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
  border-radius: var(--radius-squircle-xs, 8px) !important;
  overflow: hidden;
  margin: 12px !important;
}
.qk-map .leaflet-control-zoom-in,
.qk-map .leaflet-control-zoom-out {
  background: rgba(26, 28, 34, 0.9) !important;
  color: #fcfcfe !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
  transition: background 140ms ease, color 140ms ease;
}
.qk-map .leaflet-control-zoom-in:hover,
.qk-map .leaflet-control-zoom-out:hover {
  background: rgba(45, 48, 58, 0.98) !important;
  color: #ffffff !important;
}
.qk-map .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.4) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  font-size: 9px !important;
  backdrop-filter: blur(4px);
  padding: 2px 6px !important;
  border-radius: 4px 0 0 0;
}
.qk-map .leaflet-control-attribution a {
  color: rgba(255, 255, 255, 0.5) !important;
  text-decoration: none;
}

/* Custom Marker — WOOW Accent Pin (Sin verde, Drag & Drop táctil) */
.qk-leaflet-marker-wrap {
  background: transparent !important;
  border: 0 !important;
}
.qk-map-pin {
  position: relative;
  inline-size: 34px;
  block-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.qk-map-pin:active {
  cursor: grabbing;
}
.qk-map-pin-pulse {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 6px;
  background: rgba(235, 10, 127, 0.45);
  border-radius: 50%;
  filter: blur(1px);
  animation: qk-pin-pulse-anim 2s infinite ease-out;
  pointer-events: none;
}
@keyframes qk-pin-pulse-anim {
  0% { transform: translateX(-50%) scale(0.6); opacity: 0.9; }
  70% { transform: translateX(-50%) scale(2.4); opacity: 0; }
  100% { transform: translateX(-50%) scale(2.4); opacity: 0; }
}
.qk-map-pin-svg {
  width: 32px;
  height: 40px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
  transition: transform 160ms var(--qk-ease);
  pointer-events: auto;
}
.qk-map-pin:hover .qk-map-pin-svg {
  transform: translateY(-2px) scale(1.08);
}
.qk-input:is([type="date"], select) { color-scheme: inherit; }

/* Opciones cortas: una fila por opción con radio de alta precisión */
/* Opciones cortas: una fila por opción con radio de alta precisión */
.qk-choice { display: grid; gap: 10px; }
.qk-choice--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qk-choice-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: 52px;
  block-size: auto;
  padding: 13px 18px;
  border-radius: var(--radius-squircle-sm, 16px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-field);
  border: 1px solid transparent;
  color: var(--qk-text);
  cursor: pointer;
  transition: transform 260ms var(--qk-hidraulico),
              background-color 260ms var(--qk-ease),
              border-color 260ms var(--qk-ease),
              box-shadow 260ms var(--qk-ease),
              opacity 260ms var(--qk-ease);
  will-change: transform;
}
@media (hover: hover) {
  .qk-choice-option:not(:has(:checked)):hover {
    transform: translateY(-1.5px);
    background: var(--qk-field-hover, color-mix(in oklab, var(--qk-text) 6%, var(--qk-field)));
    border-color: color-mix(in oklab, var(--qk-text) 16%, transparent);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.12);
  }
  .qk[data-theme="light"] .qk-choice-option:not(:has(:checked)):hover,
  .qk.qk--light .qk-choice-option:not(:has(:checked)):hover,
  [data-theme="light"] .qk .qk-choice-option:not(:has(:checked)):hover {
    background: #f0f2f5;
    border-color: rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, 0.05);
  }
}
.qk-choice-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-inline-size: 0;
  flex: 1;
}
.qk-choice-ico {
  flex: none;
  color: var(--qk-accent, #5fe08a);
  opacity: 0.9;
  display: inline-flex;
}
.qk-choice-text {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--qk-text);
  -webkit-font-smoothing: antialiased;
}
.qk-choice-option input {
  position: absolute;
  inset: 0;
  /* El área de toque de la fila: `inset: 0` NO estira un elemento reemplazado en WebKit (el input se queda
     en su tamaño de origen, ~12×12), así que en iPhone sólo el puntito del radio elegía la opción. Con tamaño
     explícito la fila entera la elige en los dos motores. */
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.qk-radio {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  border: 1.5px solid var(--qk-yellow, #f5d03a); /* Figma 164:33002: radios con aro amarillo */
  border-radius: 50%;
  transition: background-color 160ms var(--qk-ease), border-color 160ms var(--qk-ease), transform 160ms var(--qk-ease);
}
.qk[data-theme="light"] .qk-radio,
.qk.qk--light .qk-radio,
[data-theme="light"] .qk .qk-radio {
  border-color: rgba(0, 0, 0, 0.25);
}
.qk-choice-option:is(:has(:checked), :has(:focus-visible)) {
  --fill: var(--qk-field-focus);
  border-color: transparent;
  background: var(--qk-wash) padding-box, linear-gradient(var(--fill), var(--fill)) padding-box, var(--qk-edge) border-box, linear-gradient(var(--fill), var(--fill)) border-box;
  box-shadow: var(--qk-aura, 0 0 0 0 transparent);
}
.qk-choice-option:not(:has(:checked)) .qk-choice-ico { color: var(--qk-muted); opacity: 0.7; } /* el ✓ del «Sí» no parece elegido */
.qk-choice-option:has(:checked) .qk-radio {
  border-color: var(--qk-accent);
  background: var(--qk-accent);
  outline: 3.5px solid var(--qk-field-focus);
  outline-offset: -3.5px;
  transform: scale(1.05);
}
.qk-choice-option:has(:focus-visible) { --qk-edge: linear-gradient(var(--qk-accent-mid), var(--qk-accent-mid)); --qk-aura: 0 0 0 4px color-mix(in oklab, var(--qk-accent-mid) 16%, transparent); outline: 2px solid transparent; }
.qk-choice-option:active { transform: scale(0.985) translateY(0.5px); transition-duration: var(--qk-press); }
.qk-choice[aria-invalid="true"] .qk-choice-option:not(:has(:checked)) { border-color: color-mix(in oklab, var(--qk-error) 55%, transparent); } /* pregunta sin contestar: trazo tenue, el mensaje lleva el peso */
/* Una sola pregunta sin «Continuar» lleva el mismo círculo que todas (QA 6-oct: la flecha parecía abrir otra pantalla).
   La opción tocada gira mientras responde el kernel. */
.qk-step .qk-choice-option.is-loading .qk-radio {
  display: block;
  inline-size: 18px;
  block-size: 18px;
  margin: 0;
  border: 2px solid color-mix(in srgb, var(--qk-accent) 25%, transparent);
  border-block-start-color: var(--qk-accent);
  border-radius: 50%;
  background: none;
  outline: 0;
  animation: qk-spin 0.7s linear infinite;
}

/* Paquetes: una tarjeta por nivel con su medalla; Mensual/Anual arriba (la mitad de tarjetas, la misma decisión).
   Se elige y luego "Continuar": una compra no se decide con un toque accidental al hacer scroll. */
.qk-periods {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--qk-field);
}
.qk-period {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-block-size: 44px;
  border: 0;
  border-radius: var(--radius-pill, 9999px);
  background: none;
  color: color-mix(in srgb, var(--qk-text) 78%, transparent);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms var(--qk-ease), color 160ms var(--qk-ease), box-shadow 160ms var(--qk-ease);
}
.qk-period[aria-pressed="true"] {
  background: var(--qk-accent-soft);
  color: var(--qk-text);
}
.qk-save {
  padding: 1px 7px;
  border-radius: var(--radius-pill, 9999px);
  background: var(--qk-yellow, #f5d03a);
  color: #141519;
  font-size: 11px;
  font-weight: 700;
}
.qk-plans {
  display: grid;
  gap: 12px;
  min-inline-size: 0;
  margin: 0;
  padding: 4px 0 0;
  border: 0;
}
.qk-plans[data-period="Mensual"] .qk-plan:not([data-period="Mensual"]),
.qk-plans[data-period="Anual"] .qk-plan:not([data-period="Anual"]) { display: none; }
.qk-plan {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-block-size: 84px;
  padding: 15px 17px 17px 13px;
  border: 1px solid transparent;
  overflow: hidden;
  border-radius: var(--radius-squircle-md, 26px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-card);
  color: var(--qk-text);
  cursor: pointer;
  transition: transform 120ms var(--qk-hidraulico), box-shadow var(--duration-snappy) var(--qk-ease), background-color var(--duration-snappy) var(--qk-ease);
}
.qk-plan input {
  position: absolute;
  inset: 0;
  /* Misma razón que en `.qk-choice-option input`: `inset: 0` no estira un input en WebKit (se queda en ~12×12),
     así que en iPhone las tarjetas de paquete solo se elegían tocando ese puntito. */
  inline-size: 100%;
  block-size: 100%;
  z-index: 1;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
@media (hover: hover) {
  .qk-plan:hover { background-color: var(--qk-card-hover); }
}
.qk-plan:is(:has(:checked), :has(:focus-visible)) {
  --fill: var(--qk-card-hover);
  background: var(--qk-wash) padding-box, linear-gradient(var(--fill), var(--fill)) padding-box, var(--qk-edge) border-box, linear-gradient(var(--fill), var(--fill)) border-box;
  box-shadow: var(--qk-aura, 0 0 0 0 transparent);
}
.qk-plan:has(:focus-visible) { --qk-edge: linear-gradient(var(--qk-accent-mid), var(--qk-accent-mid)); --qk-aura: 0 0 0 4px color-mix(in oklab, var(--qk-accent-mid) 16%, transparent); outline: 2px solid transparent; }
.qk-plan:active { transform: scale(0.985); transition-duration: 80ms; }
/* Oferta de una aseguradora: su logo sobre chip claro en lugar del escudo (solo si el plan no tiene medalla de nivel). */
:is(.qk-plan:not([class*="qk-plan--"])[data-base^="ana" i], .qk-plan:not([class*="qk-plan--"])[data-base^="chubb" i], .qk-plan:not([class*="qk-plan--"])[data-base^="gnp" i], .qk-plan:not([class*="qk-plan--"])[data-base^="hdi" i], .qk-plan:not([class*="qk-plan--"])[data-base^="qualitas" i], .qk-plan:not([class*="qk-plan--"])[data-base^="zurich" i]) .qk-plan-medal {
  inline-size: 64px;
  border-radius: var(--radius-squircle-xs, 12px);
  background: #fff var(--ins) center / 52px 32px no-repeat;
}
.qk-plan:not([class*="qk-plan--"]):is([data-base^="ana" i], [data-base^="chubb" i], [data-base^="gnp" i], [data-base^="hdi" i], [data-base^="qualitas" i], [data-base^="zurich" i]) { grid-template-columns: 64px minmax(0, 1fr) auto; }
.qk-plan[data-base^="chubb" i] { --ins: var(--ins-chubb); }
.qk-plan[data-base^="gnp" i] { --ins: var(--ins-gnp); }
.qk-plan[data-base^="hdi" i] { --ins: var(--ins-hdi); }
.qk-plan[data-base^="qualitas" i] { --ins: var(--ins-qualitas); }
.qk-plan[data-base^="zurich" i] { --ins: var(--ins-zurich); }
.qk-plan[data-base^="ana" i] { --ins: var(--ins-ana); }
.qk-plan:not([class*="qk-plan--"])[data-base]:is([data-base^="ana" i], [data-base^="chubb" i], [data-base^="gnp" i], [data-base^="hdi" i], [data-base^="qualitas" i], [data-base^="zurich" i]) .qk-plan-medal > svg { display: none; } /* el escudo es un .qk-icon dentro de la medalla: se pintaba encima del logo */
.qk-plan-medal {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  color: var(--qk-accent);
}
.qk-plan:has(:checked) .qk-medal { animation: qk-medal-pop 420ms var(--qk-hidraulico); }
@keyframes qk-medal-pop {
  0% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.14) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }
}
.qk-plan-info { display: grid; gap: 2px; min-inline-size: 0; }
.qk-plan-name {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--qk-text);
}
.qk-plan-meta { font-size: 12.5px; line-height: 16px; font-weight: 500; color: var(--qk-muted); }
.qk-plan-meta--save { color: var(--qk-accent-mid, var(--qk-accent)); font-weight: 600; }
.qk-plan-price { display: grid; justify-items: end; gap: 2px; }
.qk-plan-price strong {
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--qk-yellow, #edc729);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
/* El amarillo sobre blanco no se lee: en claro, oro oscuro */
.qk[data-theme="light"] .qk-plan-price strong,
.qk.qk--light .qk-plan-price strong { color: #a87c00; }
.qk-plan-price small { font-size: 12px; line-height: 14px; font-weight: 500; color: var(--qk-muted); }
.qk-plan-badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  padding: 4px 12px;
  border-end-start-radius: 12px;
  background: var(--qk-accent-gradient);
  color: #141519;
  font-size: 10.5px;
  line-height: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Qué incluye cada paquete (renglones que manda el API del cotizador; sin renglones no se pinta nada). Palomita dorada como en «Qué incluye» de la ficha. */
.qk-plan-inc { grid-column: 1 / -1; display: grid; gap: 6px; margin-block-start: 2px; font-size: 12.5px; line-height: 16px; color: var(--qk-muted); text-wrap: pretty; }
.qk-plan-inc > span { display: flex; align-items: flex-start; gap: 8px; }
.qk-plan-inc > span::before { content: ''; flex: none; inline-size: 16px; block-size: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3ClinearGradient id='g'%3E%3Cstop offset='0' stop-color='%23e6c023'/%3E%3Cstop offset='1' stop-color='%23eeae27'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='8' r='8' fill='url(%23g)'/%3E%3Cpath d='M4.6 8.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Medallas: listón, disco con canto, anillo y estrella (colores por nivel) */
.qk-medal { overflow: visible; }
.qk-medal-strap-l { fill: var(--m-strap-dark); }
.qk-medal-strap-r { fill: var(--m-strap); }
.qk-medal-lip { fill: var(--m-dark); }
.qk-medal-disc { fill: var(--m-main); }
.qk-medal-ring { stroke: var(--m-dark); opacity: 0.55; }
.qk-medal-star { fill: var(--m-star, #fff); }
.qk-medal-shine { stroke: #fff; opacity: 0.6; }
.qk-medal-spark { fill: var(--m-strap); }
.qk-medal--bronce { --m-main: #eaa566; --m-dark: #b76a30; --m-strap: #e0574f; --m-strap-dark: #b8403a; }
.qk-medal--plata { --m-main: #e2e6ec; --m-dark: #97a3b0; --m-strap: #5aa9e6; --m-strap-dark: #3f86c0; --m-star: #97a3b0; }
.qk-medal--oro { --m-main: #f5d03a; --m-dark: #c99a06; --m-strap: #e0574f; --m-strap-dark: #b8403a; }
.qk-medal--platino { --m-main: #d9e6f6; --m-dark: #7d9cc6; --m-strap: #5aa9e6; --m-strap-dark: #3f86c0; --m-star: #7d9cc6; }
.qk-medal--diamante { --m-main: #8fe3ff; --m-dark: #2aa8d8; --m-strap: #8e84f5; --m-strap-dark: #6c63d4; }

/* Ficha del servicio (PDP) — Figma 175:37569 · 126:25680: la foto se funde con el fondo y el título va encima.
   Todo el contenido sale de las fichas del módulo (las edita quien no programa, en HubSpot). */
.qk-pdp { display: grid; gap: 16px; align-content: start; }
.qk-pdp-cover { position: relative; display: grid; }
.qk-pdp-hero {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 16px 48px 16px 16px;
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 56%, transparent 100%);
  object-position: 50% 0%; /* las caras van arriba: al recortar se pierde el piso, no las cabezas */
}
.qk-pdp-hero--icon { display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--qk-card); -webkit-mask-image: none; mask-image: none; }
.qk-pdp-hero--scene {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 16px 48px 16px 16px;
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-card);
  border: 1px solid var(--qk-border, rgba(255, 255, 255, 0.08));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform 300ms var(--qk-hidraulico), box-shadow 300ms var(--qk-hidraulico);
}
.qk-pdp-hero--scene:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}
.qk-pdp-hero--scene:active {
  transform: translateY(1px) scale(0.99);
}
.qk-pdp-hero--scene .qk-scene {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  block-size: 100%;
  inline-size: 100%;
  pointer-events: none;
}
.qk-pdp-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-squircle-xs, 12px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: rgba(22, 23, 25, 0.65);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 2;
  pointer-events: none;
}
.qk[data-theme="light"] .qk-pdp-badge,
.qk.qk--light .qk-pdp-badge,
[data-theme="light"] .qk .qk-pdp-badge {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.06);
}
.qk-pdp-badge img {
  inline-size: 30px;
  block-size: 30px;
  object-fit: contain;
}
.qk-pdp-header { position: relative; display: grid; gap: 6px; justify-items: start; margin-block-start: -62px; padding: 0 16px 4px; }
/* «~» y no «+»: entre la imagen y la cabecera puede ir la etiqueta. */
.qk-pdp-hero--icon ~ .qk-pdp-header,
.qk-pdp-hero--scene ~ .qk-pdp-header { margin-block-start: 16px; padding-inline: 0; }
.qk-pdp-category { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--qk-text); }
.qk-pdp-title { margin: 0; font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; inline-size: fit-content; max-inline-size: 100%; background: var(--qk-accent-gradient, var(--qk-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.qk-pdp-lead { margin: 0; font-size: 15px; line-height: 22px; color: var(--qk-text); opacity: 0.88; text-wrap: pretty; }
.qk-pdp-price { margin: 0; font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--qk-price, var(--qk-yellow)); font-variant-numeric: tabular-nums; }
.qk-pdp-price sup { font-size: 0.6em; vertical-align: super; margin-left: 1px; }

/* Qué incluye: checks amarillos como el Figma */
.qk-pdp-inclusions { padding-block-start: 12px; }
.qk-pdp-heading { margin: 0 0 14px; font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--qk-text, #fff); }
.qk-pdp-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 21px; }
.qk-pdp-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.qk-pdp-check { flex: none; inline-size: 22px; block-size: 22px; padding: 4px; border-radius: 50%; background: var(--qk-yellow); color: #1c1605; }
.qk-pdp-help { margin: 0; text-align: center; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--qk-text); }
.qk-pdp-help a { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 4px; color: var(--qk-yellow); text-decoration: underline; text-underline-offset: 3px; }

.qk-pdp-foot {
  display: grid;
  gap: 16px;
  margin-inline: -16px;
  padding: 16px 16px calc(20px + var(--qk-safe));
}
.qk-pdp-foot .qk-cta { font-size: 14px; letter-spacing: 0.02em; }
.qk-pdp-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; font-size: 13px; line-height: 19px; color: var(--qk-muted); text-wrap: pretty; }

/* Servicios */
.qk-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
/* Portada del selector (Figma "Asistencias"): título rosa, texto y encabezado de la cuadrícula. */
.qk-intro { display: grid; gap: 8px; }
.qk-intro-title { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--qk-accent-mid); text-wrap: balance; }
.qk-intro-lead { margin: 0; font-size: 14px; line-height: 20px; text-wrap: pretty; }
.qk-intro-heading { margin: 16px 0 0; font-size: 16px; line-height: 24px; font-weight: 600; }
.qk-step:has(.qk-intro) { gap: 16px; }

.qk-service {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  min-block-size: 140px;
  padding: 16px 12px 22px;
  overflow: hidden;
  border: 1px solid var(--qk-border);
  border-radius: var(--radius-squircle-sm, 18px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  color: var(--qk-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: transform 200ms var(--qk-ease), box-shadow 200ms var(--qk-ease);
}
.qk-service::after { content: ""; position: absolute; inset: auto 0 0; block-size: 6px; background: var(--qk-accent-gradient); }
.qk-service:active { transform: scale(0.975) translateY(0.5px); transition-duration: var(--qk-press); }
.qk-service:disabled { cursor: progress; }
.qk-service-icon { inline-size: 56px; block-size: 56px; }
.qk-service-name { font-size: 16px; line-height: 20px; font-weight: 400; text-wrap: balance; }
.qk-service-name strong { display: block; font-weight: 700; }
@media (hover: hover) { .qk-service:hover { transform: translateY(-2px); box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08); } }

/* Botones de acción táctil Ultra-Taste (Figma 126:24804) */
.qk-cta,
.qk-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 52px;
  padding: 15px 28px;
  border-radius: var(--radius-squircle-sm, 16px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  font: inherit;
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: filter var(--duration-snappy) linear,
              background var(--duration-snappy) linear,
              transform 100ms var(--qk-hidraulico);
  will-change: transform;
}
.qk-cta {
  border: 0;
  background: var(--qk-cta, linear-gradient(90deg, #e6c023 0%, #eeae27 100%));
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}
.qk-secondary {
  border: 0;
  background: color-mix(in srgb, var(--qk-accent, #5fe08a) 9%, transparent);
  color: var(--qk-text);
}
/* Figma / Ultra-Taste: interactivo pero atenuado mientras falta algo del paso (Figma 164:33065) */
.qk-cta[data-pending] {
  background: var(--qk-btn-pending-bg);
  color: var(--qk-btn-pending-text) !important;
  text-shadow: none;
  border: 0;
  box-shadow: none;
}
@media (hover: hover) {
  .qk-cta[data-pending]:hover {
    background: var(--qk-btn-pending-hover-bg);
    color: var(--qk-btn-pending-hover-text) !important;
  }
}
.qk-link {
  display: grid;
  place-content: center;
  min-block-size: 44px;
  color: var(--qk-text);
  opacity: 0.8;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 140ms var(--qk-ease);
}
@media (hover: hover) {
  .qk-link:hover { text-decoration: underline; text-underline-offset: 4px; opacity: 1; }
  .qk-cta:hover:not(:disabled):not([data-pending]) {
    filter: brightness(1.05);
    transform: translateY(-1px);
  }
  .qk-secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--qk-accent, #5fe08a) 12%, rgba(255, 255, 255, 0.08));
    border-color: color-mix(in srgb, var(--qk-accent, #5fe08a) 40%, rgba(255, 255, 255, 0.2));
  }
}
.qk-cta:active,
.qk-secondary:active {
  transform: scale(0.98) translateY(0.5px);
  transition-duration: var(--qk-press);
}
.qk-cta:disabled,
.qk-secondary:disabled,
.qk-cta.is-loading,
.qk-secondary.is-loading {
  opacity: 0.5;
  cursor: progress;
}

/* Con algo pegado abajo el aire de reserva sobra: el botón se aleja del pulgar y deja un hueco */
.qk:has(.qk-actions),
.qk:has(.qk-pdp-foot) { padding-block-end: calc(96px + var(--qk-safe)); }
.qk:has(.qk-actions) .qk-main,
.qk:has(.qk-pdp-foot) .qk-main { padding-block-end: 0; }

/* Lo que se toca para avanzar vive pegado abajo (fácil acceso al pulgar independientemente del scroll) */
.qk-actions {
  display: grid;
  gap: 12px;
  margin-inline: -16px;
  padding: 16px 16px calc(16px + var(--qk-safe) + var(--qk-kb-pad, 0px));
  background: var(--qk-bg);
  position: sticky;
  bottom: 0;
  z-index: 15;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  transition: padding-bottom 180ms ease-out;
}
.qk.qk-has-keyboard .qk-actions,
.qk.qk-has-keyboard .qk-pdp-foot {
  padding-block-end: calc(16px + var(--qk-safe) + var(--qk-kb-pad, 16px));
}

/* WoowPay Checkout Embebido y Pasarela Segura — Ultra-Taste Edge-to-Edge Bleed Architecture */
.qk-card--payment {
  gap: 16px;
  padding: 22px 20px 20px;
  overflow: hidden;
}
@media (min-width: 640px) {
  .qk-card--payment {
    padding: 26px 24px 24px;
  }
}
.qk-payment-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  inline-size: 100%;
}
.qk-payment-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-bottom: 2px;
}
.qk-payment-popout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--qk-muted);
  text-decoration: none;
  transition: color 140ms ease;
  white-space: nowrap;
}
.qk-payment-popout:hover {
  color: var(--qk-text);
  text-decoration: underline;
}
/* Negative margin wrapper so the embedded iframe bleeds edge-to-edge naturally */
.qk-woowpay {
  position: relative;
  display: block;
  margin-inline: -20px;
  inline-size: calc(100% + 40px);
  background: var(--qk-card, #1e2025);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: clip; /* un solo scroll: el de la pantalla. El marco crece a su contenido (`iframe-height`), no scrollea por dentro */
}
@media (min-width: 640px) {
  .qk-woowpay {
    margin-inline: -24px;
    inline-size: calc(100% + 48px);
  }
}
.qk[data-theme="light"] .qk-woowpay {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
}
.qk-woowpay-frame {
  inline-size: 100%;
  block-size: 780px; /* hasta que la pasarela avise su alto real */
  min-block-size: 520px;
  border: 0;
  outline: none;
  background: transparent;
  display: block;
}
.qk-payment-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--qk-card, #1e2025);
  z-index: 2;
  transition: opacity 220ms ease;
}
.qk[data-theme="light"] .qk-payment-loader {
  background: #ffffff;
}
.qk-spinner-ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.1);
  border-top-color: var(--qk-yellow, #edc729);
  animation: qk-spin 0.8s linear infinite;
}
@keyframes qk-spin {
  to { transform: rotate(360deg); }
}
.qk-loader-msg {
  font-size: 13px;
  color: var(--qk-muted);
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* «Ya pagaste» no es un CTA: el de pagar vive en la pasarela. Solo aparece si hubo un problema (el motor rechazó la confirmación, la
   pasarela avisó un error, se abrió en otra pestaña) o si a los 60 s el pago no avanza solo (la pasarela avisa `checkout-complete`). */
.qk-woowpay-actions {
  display: flex; flex-direction: column; align-items: center; gap: 6px; inline-size: 100%; padding-block-start: 4px;
  visibility: hidden; opacity: 0; animation: qk-paid-aparece 320ms var(--qk-hidraulico) 60s forwards;
}
.qk-woowpay-actions[data-show] { visibility: visible; opacity: 1; animation: none; }
.qk-paid {
  background: none; border: 0; padding: 10px 6px; font: inherit; font-size: 13px; color: var(--qk-muted);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-block-size: 44px;
}
.qk-paid:hover { color: var(--qk-text); }
@keyframes qk-paid-aparece { to { visibility: visible; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qk-woowpay-actions { animation-duration: 1ms; } }
/* En teléfono móvil el paso es una pantalla nativa (100dvh): encabezado arriba, campos con su propio
   scroll y el botón abajo en la zona del pulgar (thumb zone). */
@media (max-width: 640px) {
  /* En móvil, cualquier paso del flujo, PDP o trámite es una pantalla completa nativa (100dvh) */
  .qk:has(.qk-step, .qk-pdp) {
    padding-block: 0;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    block-size: 100vh;
    block-size: 100dvh;
    overflow: hidden;
  }
  .qk:has(.qk-step, .qk-pdp) .qk-step { margin-block: 0; }
  .qk:has(.qk-top) { padding-block-start: 0; }
  .qk:has(.qk-step, .qk-pdp) .qk-main { gap: 0; padding-block-end: 0; }
  .qk:has(.qk-step, .qk-pdp) .qk-shell {
    block-size: 100vh;
    block-size: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0 auto;
    max-inline-size: 100%;
  }
  .qk:has(.qk-step, .qk-pdp) .qk-main {
    block-size: auto;
    flex: 1 1 0;
    min-block-size: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .qk-step {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-block-size: 0;
    gap: 0;
    overflow: hidden;
    overflow: clip;
  }
  .qk-step > :is(.qk-top, .qk-bubble, .qk-actions, .qk-pdp-foot) { flex: none; }
  .qk-step > .qk-bubble {
    margin-inline: 16px;
    margin-block: 10px 6px;
  }
  /* Áreas intermedias scrolleables independientes */
  .qk-form,
  .qk-pdp,
  .qk-step > .qk-services {
    flex: 1 1 0;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding-block: 12px;
  }
  .qk-step > .qk-card {
    flex: 1 1 0;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .qk-form::-webkit-scrollbar,
  .qk-pdp::-webkit-scrollbar,
  .qk-step > .qk-services::-webkit-scrollbar,
  .qk-step > .qk-card::-webkit-scrollbar {
    display: none;
  }
  .qk-step > .qk-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .qk-step > .qk-services > :first-child {
    margin-block-start: auto;
  }
  /* 6-oct (QA): el botón ya no es fixed. Fixed tapaba «Tus respuestas» (que vive debajo, en el shell) y el final de cada
     área con scroll («Qué no cubre», el último campo). Ahora es el último hijo del paso: sticky al fondo del área visible
     del paso, ocupa su propio alto (nada queda debajo) y «Tus respuestas» sigue abajo de él. El safe-area lo pone quien
     toca el borde: el botón si no hay «Tus respuestas», si no ella. */
  .qk-actions,
  .qk-pdp-foot {
    position: sticky;
    bottom: 0;
    flex: none;
    margin-block-start: auto;
    margin-inline: 0;
    padding: 12px 0 calc(14px + var(--qk-kb-pad, 0px)); /* en el flujo ya va dentro del margen de .qk: el botón alinea con los campos */
    background: color-mix(in srgb, var(--qk-bg) 92%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 50;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    transition: padding-bottom 180ms ease-out;
  }
  .qk-shell:not(:has(.qk-answers)) .qk-actions,
  .qk-shell:not(:has(.qk-answers)) .qk-pdp-foot {
    padding-block-end: calc(14px + var(--qk-safe) + var(--qk-kb-pad, 0px));
  }
  .qk.qk-has-keyboard .qk-actions,
  .qk.qk-has-keyboard .qk-pdp-foot {
    padding-block-end: calc(14px + var(--qk-safe) + var(--qk-kb-pad, 16px));
  }
  .qk-step:has(.qk-form) .qk-bubble { margin-block-end: 8px; }
}
.qk-form { display: grid; gap: 16px; align-content: start; }

/* Resumen, alertas y carga */
.qk-summary { display: grid; gap: 0; margin: 0; padding: 2px 0; }
.qk-summary div {
  display: grid;
  gap: 2px;
  padding-block: 10px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  animation: qk-stagger-in 280ms var(--qk-hidraulico) both;
}
.qk-summary div:first-child {
  padding-block-start: 0;
}
.qk-summary div:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}
.qk-summary div:nth-child(1) { animation-delay: 60ms; }
.qk-summary div:nth-child(2) { animation-delay: 110ms; }
.qk-summary div:nth-child(3) { animation-delay: 160ms; }
.qk-summary div:nth-child(4) { animation-delay: 210ms; }
.qk-summary div:nth-child(5) { animation-delay: 260ms; }
.qk-summary div:nth-child(n+6) { animation-delay: 310ms; }
.qk--light .qk-summary div,
.qk[data-theme="light"] .qk-summary div,
[data-theme="light"] .qk .qk-summary div {
  border-block-end-color: rgba(0, 0, 0, 0.08);
}
.qk-summary dt {
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--qk-muted);
}
.qk-summary dd {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: var(--qk-text);
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
.qk-summary .qk-summary-row--editable {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
}
.qk-summary-row--editable dt { grid-column: 1; grid-row: 1; }
.qk-summary-row--editable dd { grid-column: 1; grid-row: 2; }
.qk-summary-row--editable .qk-summary-edit { grid-column: 2; grid-row: 1 / span 2; }
.qk-summary-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid color-mix(in oklab, var(--qk-text) 14%, transparent);
  background: color-mix(in oklab, var(--qk-text) 5%, transparent);
  color: var(--qk-tint, #8E84F5);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: all 180ms cubic-bezier(0.2, 0, 0, 1);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.qk-summary-edit:hover {
  background: color-mix(in oklab, var(--qk-tint, #8E84F5) 15%, transparent);
  border-color: color-mix(in oklab, var(--qk-tint, #8E84F5) 35%, transparent);
}
.qk-summary-edit:active {
  transform: scale(0.96);
}
.qk-summary-edit.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.qk--light .qk-summary-edit,
.qk[data-theme="light"] .qk-summary-edit,
[data-theme="light"] .qk .qk-summary-edit {
  border-color: color-mix(in oklab, var(--qk-text) 12%, transparent);
  background: color-mix(in oklab, var(--qk-text) 4%, transparent);
}
.qk-alert { display: grid; gap: 16px; margin: 0; padding: 24px; border-radius: var(--radius-squircle-md, 26px); background: var(--qk-card); box-shadow: inset 4px 0 0 var(--qk-error); }
.qk-alert p { margin: 0; font-size: 15px; line-height: 1.5; }
.qk-alert-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-block-start: 4px; }
.qk-skeleton {
  position: relative;
  overflow: hidden;
  block-size: 44px;
  border-radius: var(--radius-squircle-sm, 16px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-card);
  border: 1px solid var(--qk-border);
}
/* Renglones del globito mientras responde el kernel: reservan el alto real del texto (sin brincos) */
.qk-skeleton--linea { display: block; block-size: 14px; inline-size: 88%; border-radius: 7px; }
.qk-skeleton--corta { inline-size: 58%; margin-block-start: 8px; }

/* Pantalla de carga con la forma real: una línea que pulsa dentro del globito */
.qk-step--loading .qk-bubble-text:empty::before {
  content: "";
  display: block;
  inline-size: min(220px, 60vw);
  block-size: 14px;
  margin-block: 4px;
  border-radius: 7px;
  background: var(--qk-field);
  animation: qk-loading-pulse 1.2s var(--qk-ease) infinite alternate;
}
@keyframes qk-loading-pulse { from { opacity: 0.45; } to { opacity: 1; } }
.qk-step--loading > .qk-skeleton { margin: 12px 16px 0; }
.qk-skeleton--tall {
  block-size: 360px;
  border-radius: var(--radius-squircle-lg, 30px);
}
.qk-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.02) 25%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.02) 75%,
    transparent 100%
  );
  animation: qk-skeleton-shimmer 1.8s var(--qk-hidraulico) infinite;
  pointer-events: none;
}
@keyframes qk-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* Tus respuestas: en móvil, hoja apilada al pie debajo de las acciones (Figma 164:33241);
   en escritorio, panel lateral sticky. */
.qk-answers {
  position: static;
  flex: none;
  z-index: 2;
  border-radius: var(--radius-squircle-sm, 18px) var(--radius-squircle-sm, 18px) 0 0;
  background: var(--qk-card);
  box-shadow: none;
  padding-bottom: env(safe-area-inset-bottom);
}
.qk-answers summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 52px;
  padding: 0 20px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  color: var(--qk-text);
}
.qk-answers summary::-webkit-details-marker { display: none; }
.qk-answers .qk-chevron { transition: transform 360ms var(--qk-hidraulico); }
.qk-answers[open] .qk-chevron { transform: rotate(180deg) scale(1.08); }
.qk-answers .qk-summary { max-block-size: 38vh; max-block-size: 38svh; overflow: auto; padding: 12px 20px 24px; }

/* Ticket de cierre con bordes dentados */
.qk-ticket {
  --qk-zig: 28px;
  display: grid;
  gap: 24px;
  padding: 56px 16px;
  background: var(--qk-card);
  -webkit-mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--qk-zig) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--qk-zig) 51% repeat-x;
  mask:
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--qk-zig) 51% repeat-x,
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--qk-zig) 51% repeat-x;
  animation: qk-in 320ms var(--qk-ease) both;
}
.qk-ticket-title { margin: 0; font-size: clamp(24px, 6.5vw, 30px); line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; text-align: center; text-wrap: balance; }
.qk-ticket-lead { margin: 0; color: var(--qk-muted); text-align: center; text-wrap: pretty; }
.qk-ticket-icon {
  justify-self: center;
  display: grid;
  place-items: center;
  inline-size: 56px;
  block-size: 56px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--qk-success);
  color: #fff;
}
.qk-divider { margin: 0; border: 0; border-top: 1px solid var(--qk-line); }
.qk-thanks { margin: 0; font-size: 24px; line-height: 32px; font-weight: 600; text-align: center; text-wrap: balance; }
.qk-ticket-support {
  padding: 16px 18px;
  background: var(--qk-field, #191a1e);
  border-radius: var(--radius-squircle-sm);
  text-align: center;
  margin-block: 8px 0;
}
.qk-support-heading {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--qk-text);
}
.qk-support-text {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--qk-muted);
}
.qk-support-phone {
  color: var(--qk-yellow);
  font-weight: 700;
  text-decoration: none;
}
.qk-lobby-brand {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-block-end: 24px;
  min-block-size: 44px;
}
.qk-brand-logo {
  inline-size: auto;
  block-size: 38px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  margin-inline: auto;
}
.qk-lobby-brand .qk-theme-toggle {
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px de toque, del mismo alto que «Entrar» (a 38 px quedaba por debajo del mínimo y el ::after
     que lo estiraba se recortaba contra el borde de la barra). */
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border-radius: var(--radius-squircle-sm, 18px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-field);
  border: 1px solid var(--qk-border);
  color: var(--qk-text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: transform var(--duration-snappy) var(--qk-hidraulico),
              background-color var(--duration-snappy) var(--qk-ease),
              border-color var(--duration-snappy) var(--qk-ease);
}
.qk-lobby-brand .qk-theme-toggle:hover {
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(255, 255, 255, 0.22);
}
.qk-lobby-brand .qk-theme-toggle:active {
  transform: translateY(-50%) scale(0.94);
  transition-duration: var(--qk-press);
}

.qk[data-theme="light"] .qk-brand-logo,
.qk.qk--light .qk-brand-logo,
[data-theme="light"] .qk .qk-brand-logo {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.12));
}
.qk[data-theme="light"] .qk-lobby-brand .qk-theme-toggle,
.qk.qk--light .qk-lobby-brand .qk-theme-toggle,
[data-theme="light"] .qk .qk-lobby-brand .qk-theme-toggle {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.09);
  color: #141519;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.qk[data-theme="light"] .qk-lobby-brand .qk-theme-toggle:hover,
.qk.qk--light .qk-lobby-brand .qk-theme-toggle:hover,
[data-theme="light"] .qk .qk-lobby-brand .qk-theme-toggle:hover {
  border-color: rgba(0, 0, 0, 0.2);
}

@media (min-width: 641px) {
  .qk {
    padding: 20px 24px 32px;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    overflow-y: visible; /* auto convertía .qk en el contenedor del sticky de «Tus respuestas» y nunca se pegaba */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .qk-shell {
    margin-block: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    inline-size: 100%;
    max-inline-size: 560px;
    margin-inline: auto;
  }
  .qk-shell:has(.qk-answers) {
    max-inline-size: 560px;
  }
  .qk-shell--lobby {
    max-inline-size: 1080px;
    display: block;
  }
  .qk-main {
    inline-size: 100%;
    max-inline-size: 560px;
    justify-self: center;
    overflow: visible !important;
  }
  .qk-step {
    gap: 20px;
    overflow: visible !important;
  }
  .qk-step > .qk-services > :first-child {
    margin-block-start: 0;
  }
  .qk-step > .qk-services,
  .qk-step > .qk-card {
    overflow: visible !important;
    max-block-size: none !important;
  }
  .qk-step > .qk-services {
    padding-block: 0;
  }
  .qk-card {
    padding: 38px 32px;
    gap: 24px;
  }
  .qk-form {
    overflow: visible !important;
    max-block-size: none !important;
  }
  .qk-pdp-hero {
    max-block-size: 240px;
    border-radius: var(--radius-squircle-md);
  }
  .qk-services { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* En escritorio el paso vuelve a ser página: sin alto fijo ni scroll propio, botón estático */
  .qk-actions {
    position: static !important;
    inset: auto !important;
    margin-inline: 0;
    padding: 12px 0 0;
    gap: 8px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .qk-cta {
    min-block-size: 46px;
    padding: 12px 20px;
    font-size: 14.5px;
    letter-spacing: 0.04em;
  }
  .qk-secondary {
    min-block-size: 36px;
    padding: 8px 16px;
    font-size: 13px;
    opacity: 0.85;
  }
  .qk-secondary:hover {
    opacity: 1;
  }
  .qk-pdp-foot {
    position: static !important;
    inset: auto !important;
    margin-inline: 0;
    padding: 16px 0 0;
    background: transparent !important;
    border: 0 !important;
  }
  .qk-top {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 8px;
    margin-inline: 0;
    margin-block-start: 0;
    padding: 0 0 10px;
    background: transparent;
    border: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
  }
  .qk-head {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-block-size: 36px;
    margin-inline: 0;
    padding: 0 0 6px;
  }
  .qk-head-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: end;
  }
  .qk-back,
  .qk-head .qk-close {
    inline-size: 32px;
    block-size: 32px;
  }
  .qk-back-placeholder {
    inline-size: 32px;
    block-size: 32px;
  }
  .qk-head .qk-icon {
    inline-size: 20px;
    block-size: 20px;
  }
  .qk-title {
    font-size: 14px;
    line-height: 18px;
  }
  .qk-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    padding: 0;
    border-radius: var(--radius-squircle-sm, 8px);
    corner-smoothing: 100%;
    -webkit-corner-smoothing: 100%;
    background-image: 
      linear-gradient(var(--qk-field), var(--qk-field)),
      var(--qk-border-grad);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    color: var(--qk-text);
    cursor: pointer;
    transition: transform 140ms var(--qk-hidraulico), opacity 140ms var(--qk-ease);
  }
  .qk-theme-toggle:hover {
    transform: scale(1.06);
    opacity: 0.9;
  }
  .qk-theme-toggle:active {
    transform: scale(0.94);
  }
  .qk-progress {
    gap: 8px;
    margin-block-end: 0;
  }
  .qk-progress-track {
    block-size: 3px;
  }
  .qk-bubble {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 8px 14px;
    border-radius: var(--radius-squircle-sm, 14px);
  }
  .qk-avatar {
    inline-size: 36px;
    block-size: 36px;
  }
  .qk-bubble-text {
    font-size: 14.5px;
    line-height: 20px;
  }
  .qk-top:has(.qk-progress) .qk-head { margin-block-end: 0; }
}

@media (min-width: 1024px) {
  .qk-shell:has(.qk-answers) {
    display: grid;
    grid-template-columns: minmax(0, 560px) 320px;
    gap: 32px;
    align-items: start;
    inline-size: 100%;
    max-inline-size: 912px;
    margin-inline: auto;
  }
  .qk-answers {
    position: sticky;
    inset-block-start: 24px;
    border-radius: var(--radius-squircle-md);
    corner-smoothing: 100%;
    -webkit-corner-smoothing: 100%;
    background-image: 
      linear-gradient(var(--qk-card), var(--qk-card)),
      var(--qk-border-grad);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
    border: 1px solid transparent;
    box-shadow: var(--qk-shadow-card);
    overflow: hidden;
  }
  .qk-answers summary {
    min-block-size: 52px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    pointer-events: none;
    color: var(--qk-text);
    border-bottom: 1px solid var(--qk-line);
  }
  .qk-answers .qk-chevron { display: none; }
  .qk-answers .qk-summary {
    max-block-size: calc(100vh - 160px);
    max-block-size: calc(100svh - 160px);
    padding: 16px 20px;
    display: grid;
    gap: 12px;
    overflow-y: auto;
  }
  .qk-answers .qk-summary div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0;
    padding: 10px 4px;
  }
  .qk-answers .qk-summary div:last-child {
    border-bottom: none;
  }
  .qk-answers .qk-summary dt {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--qk-muted);
  }
  .qk-answers .qk-summary dd {
    font-size: 14px;
    line-height: 20px;
    color: var(--qk-text);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qk *,
  .qk *::before,
  .qk *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* Lobby: catálogo interactivo WOOW */
.qk-shell.qk-shell--lobby { display: block; max-inline-size: 100%; margin-inline: auto; }
@media (min-width: 641px) {
  .qk-shell.qk-shell--lobby { max-inline-size: 840px; }
}
@media (min-width: 1024px) {
  .qk-shell.qk-shell--lobby { max-inline-size: 960px; }
}
.qk-shell--lobby .qk-main { max-inline-size: none; }
.qk-lobby { display: grid; gap: 28px; }
.qk-lobby-title {
  margin: 0;
  font-size: clamp(26px, 4.5vw, 34px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.qk-search { position: relative; margin: 0; }
.qk-search .qk-icon {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 20px;
  margin-block: auto;
  color: var(--qk-muted);
  pointer-events: none;
}
.qk-search .qk-input {
  min-block-size: 58px;
  padding-inline-start: 56px;
  border-radius: var(--radius-squircle-lg, 30px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    0 1px 2px -1px rgba(0, 0, 0, 0.4),
    0 4px 14px -2px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: border-color var(--duration-snappy) var(--qk-ease),
              box-shadow var(--duration-snappy) var(--qk-ease);
}
.qk-search .qk-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--qk-accent, #5fe08a) 70%, rgba(255, 255, 255, 0.2));
  box-shadow: 
    0 2px 6px -1px rgba(0, 0, 0, 0.35),
    0 6px 18px -2px rgba(0, 0, 0, 0.2),
    0 0 0 2px color-mix(in srgb, var(--qk-accent, #5fe08a) 35%, transparent),
    0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}

.qk[data-theme="light"] .qk-search .qk-input,
.qk.qk--light .qk-search .qk-input,
[data-theme="light"] .qk .qk-search .qk-input {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #141519;
  box-shadow: 
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 4px 12px -2px rgba(0, 0, 0, 0.04),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}
.qk[data-theme="light"] .qk-search .qk-input:focus,
.qk.qk--light .qk-search .qk-input:focus,
[data-theme="light"] .qk .qk-search .qk-input:focus {
  border-color: var(--qk-accent);
  box-shadow: 
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 4px 16px -2px rgba(0, 0, 0, 0.06),
    0 0 0 2px color-mix(in srgb, var(--qk-accent) 25%, transparent);
}

/* ── WOOWSH Concierge Inteligente en el Lobby ──────────────────────────────── */
.qk-woowsh-lobby {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border-radius: var(--radius-squircle-lg, 24px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  margin: 0;
  animation: qk-woowsh-enter 360ms cubic-bezier(0.05, 0.7, 0.1, 1.0) both;
}
@keyframes qk-woowsh-enter {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .qk-woowsh-lobby { animation: none; }
}
.qk[data-theme="light"] .qk-woowsh-lobby,
.qk.qk--light .qk-woowsh-lobby,
[data-theme="light"] .qk .qk-woowsh-lobby {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
}
.qk-woowsh-orb-wrap {
  flex-shrink: 0;
  inline-size: 44px;
  block-size: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.qk-woowsh-canvas {
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  filter: drop-shadow(0 0 8px rgba(255, 196, 50, 0.28));
}
.qk-woowsh-content {
  flex: 1;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.qk-woowsh-lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--qk-text, #1C1C1E);
}
.qk[data-theme="dark"] .qk-woowsh-lead,
[data-theme="dark"] .qk .qk-woowsh-lead {
  color: rgba(255, 255, 255, 0.88);
}
.qk-woowsh-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.qk-woowsh-chip {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.04);
  color: var(--qk-text, #1C1C1E);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 9999px;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 140ms cubic-bezier(0.2, 0, 0, 1), background-color 140ms ease, border-color 140ms ease;
}
.qk[data-theme="dark"] .qk-woowsh-chip,
[data-theme="dark"] .qk .qk-woowsh-chip {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.9);
}
.qk-woowsh-chip:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.12);
}
.qk[data-theme="dark"] .qk-woowsh-chip:hover,
[data-theme="dark"] .qk .qk-woowsh-chip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
}
.qk-woowsh-chip:active {
  transform: scale(0.96);
}
.qk[data-solo] .qk-woowsh-lobby {
  display: none;
}
@media (max-width: 640px) {
  .qk-woowsh-lobby {
    padding: 10px 14px;
    gap: 12px;
  }
  .qk-woowsh-orb-wrap, .qk-woowsh-canvas {
    inline-size: 40px;
    block-size: 40px;
  }
  .qk-woowsh-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .qk-woowsh-chips {
    inline-size: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-block-end: 2px;
  }
  .qk-woowsh-chips::-webkit-scrollbar {
    display: none;
  }
}

/* Chips de categorías con amortiguamiento */
.qk-chips {
  display: flex;
  gap: 10px;
  margin-inline: -16px;
  padding-inline: 16px 36px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), #0000);
  mask-image: linear-gradient(90deg, #000 calc(100% - 36px), #0000);
}
.qk-chips::-webkit-scrollbar { display: none; }
.qk-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.01) 100%);
  color: var(--qk-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 240ms var(--qk-ease),
              color 240ms var(--qk-ease),
              border-color 240ms var(--qk-ease),
              box-shadow 240ms var(--qk-ease),
              transform 240ms var(--qk-hidraulico);
}
.qk-chip:has(img) { padding-inline-start: 14px; }
.qk-chip[aria-pressed="true"] {
  background: #ffffff;
  color: #121316;
  font-weight: 700;
  border-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15);
}
.qk-chip:active { transform: scale(0.975); }
@media (hover: hover) {
  .qk-chip[aria-pressed="false"]:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
  }
}

.qk[data-theme="light"] .qk-chip[aria-pressed="false"],
.qk.qk--light .qk-chip[aria-pressed="false"],
[data-theme="light"] .qk .qk-chip[aria-pressed="false"] {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.08);
  color: #141519;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
.qk[data-theme="light"] .qk-chip[aria-pressed="false"]:hover,
.qk.qk--light .qk-chip[aria-pressed="false"]:hover,
[data-theme="light"] .qk .qk-chip[aria-pressed="false"]:hover {
  background: #f3f4f6;
  border-color: rgba(0, 0, 0, 0.16);
}
.qk[data-theme="light"] .qk-chip[aria-pressed="true"],
.qk.qk--light .qk-chip[aria-pressed="true"],
[data-theme="light"] .qk .qk-chip[aria-pressed="true"] {
  background: #141519;
  color: #ffffff;
  font-weight: 700;
  border-color: #141519;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.qk-results { display: grid; gap: 36px; inline-size: 100%; }
.qk-group { display: grid; gap: 18px; inline-size: 100%; }
.qk-group-all {
  display: inline-flex; align-items: center; justify-self: start; margin: -8px 0 -4px; padding: 0 18px; min-block-size: 44px; border: 0; border-radius: 999px;
  background: var(--qk-surface, transparent); box-shadow: inset 0 0 0 1px var(--qk-border, rgba(128, 128, 128, 0.35));
  font: inherit; font-size: 15px; font-weight: 600; color: var(--qk-text); text-align: start; cursor: pointer; transition: transform 140ms var(--qk-hidraulico);
}
.qk-group-all::after { content: '→'; margin-inline-start: 8px; color: var(--qk-accent); }
.qk-group-all:active { transform: scale(0.97); }
.qk-group-all:focus-visible { outline: 2px solid var(--qk-accent); outline-offset: 2px; }
.qk-group-title {
  margin: 0;
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--qk-text);
  text-wrap: balance;
}

/* Bento Squircle Product Card Grid — Identical to app.woowtodobien.com, Mobile-First */
.qk-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
@media (max-width: 360px) {
  .qk-rows {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
@media (min-width: 640px) {
  .qk-rows {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
  }
}
@media (min-width: 1024px) {
  .qk-rows {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
  }
}

.qk-row-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  min-inline-size: 0;
  cursor: pointer;
  transition: transform 240ms var(--qk-hidraulico);
}

.qk-row {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  gap: 14px;
  inline-size: 100%;
  min-block-size: 156px;
  padding: 22px 16px 18px;
  border-radius: var(--radius-squircle-md, 24px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.008) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 
    0 1px 2px -1px rgba(0, 0, 0, 0.3),
    0 6px 18px -2px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  color: var(--qk-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: transform 280ms var(--qk-hidraulico),
              box-shadow 280ms var(--qk-ease),
              border-color 280ms var(--qk-ease),
              background-color 280ms var(--qk-ease);
  will-change: transform, box-shadow;
}

.qk[data-theme="light"] .qk-row,
.qk.qk--light .qk-row,
[data-theme="light"] .qk .qk-row {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.07);
  box-shadow: 
    0 1px 2px -1px rgba(0, 0, 0, 0.04),
    0 4px 14px -2px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(255, 255, 255, 0.9) inset;
}

.qk-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  pointer-events: none;
}
.qk-row::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  block-size: 2.5px;
  background: var(--qk-tint, var(--qk-accent));
  opacity: 0.65;
  transition: opacity 280ms var(--qk-ease), transform 280ms var(--qk-hidraulico);
}

.qk-row-icon {
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border-radius: var(--radius-squircle-md, 20px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: color-mix(in srgb, var(--qk-tint) 14%, rgba(255, 255, 255, 0.03));
  border: 1px solid color-mix(in srgb, var(--qk-tint) 30%, transparent);
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--qk-tint) 20%, transparent);
  flex: none;
}
.qk-row-icon img {
  inline-size: 30px;
  block-size: 30px;
  object-fit: contain;
}

.qk[data-theme="light"] .qk-row-icon,
.qk.qk--light .qk-row-icon,
[data-theme="light"] .qk .qk-row-icon {
  background: color-mix(in srgb, var(--qk-tint) 12%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--qk-tint) 25%, transparent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.qk-row-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  inline-size: 100%;
  flex: 1;
}

.qk-row-name {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--qk-text);
  text-wrap: balance;
}

.qk-row-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  line-height: 14px;
  font-weight: 600;
  color: var(--qk-muted);
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.qk-row-hint .qk-icon { flex: none; }
.qk-row--here .qk-row-hint {
  color: var(--qk-yellow);
  background: rgba(237, 199, 41, 0.12);
  border: 1px solid rgba(237, 199, 41, 0.25);
}

.qk[data-theme="light"] .qk-row-hint,
.qk.qk--light .qk-row-hint,
[data-theme="light"] .qk .qk-row-hint {
  background: rgba(0, 0, 0, 0.04);
  color: var(--qk-muted);
}
.qk[data-theme="light"] .qk-row--here .qk-row-hint,
.qk.qk--light .qk-row--here .qk-row-hint,
[data-theme="light"] .qk .qk-row--here .qk-row-hint {
  color: #92400e;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.28);
}

.qk-row-go { display: none; }

/* Subtle Linear Hydraulic Elevation (/smooth-as-butter standard) */
@media (hover: hover) {
  .qk-row:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--qk-tint, var(--qk-accent)) 40%, rgba(255, 255, 255, 0.15));
    box-shadow: 
      0 4px 12px -2px rgba(0, 0, 0, 0.35),
      0 12px 28px -4px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  }
  .qk[data-theme="light"] .qk-row:hover,
  .qk.qk--light .qk-row:hover,
  [data-theme="light"] .qk .qk-row:hover {
    border-color: color-mix(in srgb, var(--qk-tint, var(--qk-accent)) 45%, rgba(0, 0, 0, 0.15));
    box-shadow: 
      0 3px 8px -1px rgba(0, 0, 0, 0.05),
      0 10px 22px -3px rgba(0, 0, 0, 0.08),
      0 0 0 1px rgba(255, 255, 255, 1) inset;
  }
  .qk-row:hover::after {
    opacity: 1;
    transform: scaleY(1.15);
  }
}
.qk-row:active {
  transform: scale(0.975);
  transition-duration: var(--duration-press, 140ms);
}

.qk-empty {
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: var(--radius-squircle-md);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-card);
  border: 1px solid var(--qk-line);
}
.qk-empty p { margin: 0; text-wrap: pretty; }

@media (min-width: 768px) {
  .qk-lobby-title { font-size: 34px; line-height: 42px; }
  .qk-chips { flex-wrap: wrap; margin-inline: 0; padding-inline: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
}

/* Container Queries: adaptación fluida según el ancho asignado al módulo en el CMS */
@container qk (max-width: 440px) {
  .qk-main { gap: 24px; padding-bottom: 24px; }
  .qk-map { block-size: 200px; min-block-size: 200px; }
  .qk-alert { padding: 16px; border-radius: var(--radius-squircle-xs, 12px); }
}

@container qk (min-width: 680px) {
  .qk-shell--lobby { max-inline-size: 840px; }
  .qk-rows { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
}

@container qk (min-width: 960px) {
  .qk-shell--lobby { max-inline-size: 960px; }
  .qk-rows { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
}

/* Ocultar el widget invasivo flotante de WhatsApp durante trámites, formularios y PDP para que no tape botones ni inputs */
body:has(.qk-form, .qk-actions, .qk-pdp-foot, .qk-ticket, .qk-pdp, .qk-step) .contenedor-div-wa-woow {
  display: none !important;
}

.contenedor-div-wa-woow {
  z-index: 10 !important;
}

/* ── Capa suave (23-sep): cero sombras proyectadas. La profundidad sale de un degradado de dos tonos
   del mismo material y un filo de 1px; el color de marca solo tiñe, nunca ensucia el contraste. ── */
.qk {
  --qk-hair: inset 0 0 0 1px var(--qk-border);
  --qk-surface: linear-gradient(180deg, var(--qk-card) 0%, color-mix(in oklab, var(--qk-card) 82%, var(--qk-bg)) 100%);
  --qk-note: linear-gradient(135deg, color-mix(in oklab, var(--qk-yellow) 16%, var(--qk-card)) 0%, color-mix(in oklab, var(--qk-yellow) 7%, var(--qk-card)) 100%);
}
.qk[data-theme="light"], .qk.qk--light, [data-theme="light"] .qk {
  --qk-note: linear-gradient(135deg, #fdf6d8 0%, #fefbef 100%);
}
.qk.qk :is(.qk-bubble-balloon, .qk-service, .qk-row, .qk-chip, .qk-answers, .qk-autocomplete-list,
  .qk-map, .qk-map .leaflet-control-zoom, .qk-lobby-brand .qk-theme-toggle, .qk-search .qk-input, .qk-note) {
  box-shadow: var(--qk-hair) !important;
}
.qk.qk :is(.qk-bubble-balloon, .qk-service, .qk-row, .qk-answers) { background: var(--qk-surface); }
.qk.qk .qk-chip[aria-pressed="true"] { box-shadow: none !important; }
.qk.qk .qk-search .qk-input:focus { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--qk-accent) 55%, transparent) !important; }
/* El CTA amarillo conserva su degradado; en vez de sombra, un brillo interno de 1px arriba. */
.qk.qk .qk-cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35) !important; }
.qk.qk .qk-cta:disabled, .qk.qk .qk-cta[aria-disabled="true"] { box-shadow: none !important; }
@media (hover: hover) {
  .qk.qk :is(.qk-row, .qk-service):hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--qk-text) 24%, transparent) !important; } /* neutro: el acento verde del catálogo chocaba con los íconos rosas */
}

/* Checks de la ficha: amarillo de marca como tinte, no como disco sólido. */
.qk.qk .qk-pdp-check {
  background: linear-gradient(135deg, color-mix(in oklab, var(--qk-yellow) 26%, var(--qk-card)), color-mix(in oklab, var(--qk-yellow) 12%, var(--qk-card)));
  color: var(--qk-yellow);
}
/* La marca de color de la tarjeta del lobby: un filo, no una franja. */
.qk.qk .qk-service::after { block-size: 3px; opacity: 0.85; }
/* «Continuar» mientras falta algo: mismo material que los campos (degradado + filo), no un bloque gris. */
.qk.qk .qk-cta[data-pending] {
  background: linear-gradient(180deg, var(--qk-field) 0%, color-mix(in oklab, var(--qk-field) 70%, var(--qk-bg)) 100%);
  color: var(--qk-muted) !important;
  box-shadow: var(--qk-hair) !important;
}
@media (hover: hover) {
  .qk.qk .qk-cta[data-pending]:hover { background: var(--qk-field-hover); color: var(--qk-text) !important; }
}

/* WhatsApp flotante del sitio (pie global): dentro de un trámite ya hay ayuda por WhatsApp y el botón fijo;
   en el lobby solo queda el ícono (el texto blanco sobre verde mide 2.1:1 y tapa las tarjetas). */
/* 23-sep: tampoco en el lobby — la app no lo tiene y tapaba tarjetas; la ayuda por WhatsApp vive en la ficha y el encabezado. */
body:has(.qk-shell) .contenedor-div-wa-woow { display: none; }
/* La liga de ayuda es texto de 20 px de alto: el área de toque crece sin mover el renglón. */
.qk .qk-pdp-help a { padding-block: 12px; margin-block: -12px; }
/* Áreas que scrollean bajo un pie fijo: un desvanecido de 24 px al borde dice «hay más» sin sombra ni flecha. */
@media (max-width: 767px) {
  .qk :is(.qk-form, .qk-pdp) {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent);
    padding-block-end: 28px;
  }
}
/* Pantallas bajas (SE, o 13 con barras del navegador): la imagen de la ficha cede alto para que asome «¿Qué incluye?». */
@media (max-height: 740px) {
  .qk .qk-pdp-hero--icon { aspect-ratio: 16 / 6; }
  .qk .qk-pdp-hero:not(.qk-pdp-hero--icon) { aspect-ratio: 16 / 8; }
}
@media (max-height: 600px) { .qk .qk-pdp-hero--icon { aspect-ratio: 16 / 5; } }

/* ── Como app.woowtodobien.com (23-sep, medido en la app con sesión) ───────────────────────────────── */
/* Oscuro de la app: gris neutro (#242424 / tarjetas #343434), no pizarra. El claro no cambia. */
.qk { --qk-bg: #242424; --qk-card: #343434; --qk-card-hover: #3b3b3b; --qk-bubble-bg: var(--qk-card); --qk-bubble-border: var(--qk-border); }

/* CTA de marca (Alberto; Obed lo repitió 30-sep): amarillo de izquierda a derecha, TEXTO BLANCO, mayúsculas, tracking 2 px; idéntico en claro y oscuro.
   No regresarlo a texto oscuro aunque el contraste medido sea bajo: es decisión de marca, y la app es igual. */
.qk.qk .qk-cta { border-radius: calc(16px * var(--qk-r, 1)); font-weight: 600; letter-spacing: 2px; text-transform: uppercase; }
.qk.qk .qk-cta:not([data-pending]) { background: linear-gradient(90deg, #e6c023 0%, #eeae27 100%); color: #fff !important; }

/* Categorías: mosaico de cuadros (ícono y nombre en dos renglones); tocar el activo quita el filtro.
   La curvatura sale de la escala squircle: el navegador con `corner-shape: squircle` lo pinta como superelipse.
   Se ENVUELVE, no se desliza de lado (7-oct): en un celular 9 de 12 categorías quedaban fuera de la vista con
   nada más que un desvanecido de 36 px, así que se podía recorrer el catálogo entero creyendo que «Gastos
   Médicos» era la única. Ahora entra todo a la vista, sin gesto que descubrir. */
.qk .qk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; margin: 0; padding: 0; }
.qk .qk-tile {
  display: grid; place-items: center; align-content: center; gap: 6px; padding: 8px 6px; aspect-ratio: 1;
  border: 0; border-radius: var(--radius-squircle-md, 26px); background: var(--qk-surface); box-shadow: var(--qk-hair);
  color: var(--qk-text); font: inherit; font-size: 12.5px; line-height: 15px; text-align: center; cursor: pointer;
  transition: transform var(--qk-press) var(--qk-hidraulico);
}
.qk .qk-tile img { inline-size: 40px; block-size: 40px; }
.qk .qk-tile-name, .qk .qk-row-name { display: grid; }
.qk .qk-tile-name strong, .qk .qk-row-name strong { font-weight: 700; }
/* Categoría elegida (7-oct): con solo el filo amarillo el mosaico activo se perdía entre doce. La tarjeta se
   pinta con el degradado dorado de la marca (--qk-cta, el del CTA) y el nombre se asienta: mismo dorado en claro
   y en oscuro, como el botón. El texto va en tinta oscura, no en blanco: aquí la letra es de 12.5 px y el blanco
   sobre el dorado no se lee (en el CTA sí, que es decisión de marca). */
.qk.qk .qk-tile[aria-pressed="true"] {
  background: var(--qk-cta);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, #fff 55%, transparent);
  color: #1c1605;
}
.qk .qk-tile[aria-pressed="true"] .qk-tile-name { font-weight: 600; }
.qk .qk-tile {
  transition: transform 260ms var(--qk-hidraulico),
              background-color 260ms var(--qk-ease),
              border-color 260ms var(--qk-ease),
              box-shadow 260ms var(--qk-ease);
}
.qk .qk-tile:active { transform: scale(0.975); }
@media (hover: hover) {
  .qk .qk-tile:hover:not([aria-pressed="true"]) {
    transform: translateY(-2px);
    background-color: var(--qk-field-hover);
    box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.16);
  }
  .qk[data-theme="light"] .qk .qk-tile:hover:not([aria-pressed="true"]),
  .qk.qk--light .qk-tile:hover:not([aria-pressed="true"]),
  [data-theme="light"] .qk .qk-tile:hover:not([aria-pressed="true"]) {
    background-color: #f0f2f5;
    box-shadow: 0 2px 8px -1px rgba(0, 0, 0, 0.06);
  }
}

/* Producto: tarjeta de la app — ícono de 45 px sin círculo, nombre en dos renglones, esquinas de la escala
   squircle (chicas arriba, medianas abajo), sin franja. */
.qk .qk-row { min-block-size: 140px; justify-content: center; gap: 10px; padding: 20px 12px; border-radius: var(--radius-squircle-sm, 18px) var(--radius-squircle-sm, 18px) var(--radius-squircle-md, 26px) var(--radius-squircle-md, 26px); backdrop-filter: none; -webkit-backdrop-filter: none; }
.qk .qk-row::before, .qk .qk-row::after { display: none; }
.qk.qk .qk-row-icon { inline-size: auto; block-size: auto; background: none; border: 0; box-shadow: none !important; }
.qk .qk-row-icon img { inline-size: 45px; block-size: 45px; }
.qk .qk-row-name { font-size: 14px; font-weight: 400; line-height: 18px; letter-spacing: 0; }
/* Lo que no se resuelve aquí (otra pestaña, con cuenta): solo un glifo en la esquina, el texto va al lector de pantalla. */
.qk.qk .qk-row-hint { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; padding: 0; background: none; border: 0; color: var(--qk-muted); }

/* «Retoma tu cotización» (como la app): el último trámite empezado, sin datos personales guardados. */
.qk .qk-retoma {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px 14px;
  padding: 16px; border-radius: var(--radius-squircle-md, 26px); background: var(--qk-surface); box-shadow: var(--qk-hair);
}
.qk .qk-retoma-text { display: grid; gap: 2px; padding-inline-end: 28px; font-size: 13px; color: var(--qk-muted); }
.qk .qk-retoma-text strong { font-size: 15px; color: var(--qk-text); }
.qk .qk-retoma .qk-cta { grid-column: 1 / -1; min-block-size: 44px; }
.qk .qk-retoma-x { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; color: var(--qk-muted); }
/* «-5%» del Anual en claro: el amarillo oscuro de claro con texto negro no llegaba a 4.5:1. Tinte suave + ámbar profundo (≈7:1). */
.qk[data-theme="light"] .qk-save, .qk.qk--light .qk-save, [data-theme="light"] .qk .qk-save { background: #fdf0c4; color: #7a4a05; }
/* La ficha scrollea y ahora recibe foco con teclado: su anillo, no el del navegador. */
.qk .qk-pdp:focus { outline: none; }
.qk .qk-pdp:focus-visible { outline: 2px solid color-mix(in oklab, var(--qk-accent) 60%, transparent); outline-offset: -2px; border-radius: var(--radius-squircle-md, 26px); }

/* Woowsh: el listón de luz de los hero banners (2026). Colores medidos del banner. El dorado es el distintivo de marca: el mismo en claro y en oscuro. */
.qk { --qk-ww-top: #FFF6B8; --qk-ww-low: #E3C22A; --qk-ww-body: #F7E046; --qk-ww-sheen: #FFF2A0; --qk-ww-halo: #F2D52A; }
.qk-ww { position: absolute; pointer-events: none; overflow: visible; }
.qk-ww path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.qk-ww .t { stroke: var(--qk-ww-top); }
.qk-ww .l { stroke: var(--qk-ww-low); }
.qk-ww .b { stroke: var(--qk-ww-body); }
.qk-ww .s { stroke: var(--qk-ww-sheen); }
.qk-ww .h { stroke: var(--qk-ww-halo); }
/* profundidad al envolver: lo de enfrente es luz más clara, lo de atrás se apaga */
.qk-ww [data-front] .b { stroke: var(--qk-ww-sheen); }
.qk-ww [data-back] { opacity: 0.7; }
/* mientras el listón lo envuelve el botón no se apaga: el listón ya dice que está trabajando */
.qk-cta.is-woowsh, .qk-cta.is-woowsh:disabled { position: relative; opacity: 1; overflow: visible; z-index: 1; }
.qk-woowsh { position: relative; inline-size: min(200px, 56%); aspect-ratio: 5 / 2; margin: 4px auto 0; }
.qk-woowsh .qk-ww { position: static; display: block; inline-size: 100%; block-size: 100%; }
.qk-woowsh[data-fail] { display: none; } /* si woowsh.js no cargó, el héroe no deja un hueco vacío */

/* Ubicación (grúa y asistencias): el GPS va primero; el mapa aparece solo con una ubicación real
   (GPS, sugerencia o pin), nunca con un pin por defecto en CDMX. Invisible, no display:none: Leaflet conserva su tamaño. */
.qk-location-field :is(.qk-search-pill-wrap, .qk-search-pill) { display: contents; }
.qk-location-field .qk-autocomplete-list { position: static; }
.qk-location-field .qk-map { order: 1; margin-block-start: 4px; box-shadow: none; border-color: var(--qk-border); }
.qk-form:not([data-lat]) .qk-location-field .qk-map { position: absolute; inset: 0 0 auto; visibility: hidden; pointer-events: none; }
/* QA 6-oct (plomería): mover el pin costaba. En el teléfono el mapa crece con la pantalla (svh: no brinca con la barra
   del navegador) y el pin se agarra con el dedo, no con la punta: 58×68 de área táctil sin cambiar su dibujo. */
@media (max-width: 640px) {
  .qk-location-field .qk-map { block-size: 280px; block-size: clamp(280px, 46svh, 420px); min-block-size: 280px; }
}
.qk-map-pin::after { content: ""; position: absolute; inset: -12px; }
.qk-location-field [data-locate] {
  order: -1;
  justify-content: center;
  inline-size: 100%;
  min-block-size: 48px;
  margin-block-end: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-squircle-sm, 14px);
  border: 1px solid var(--qk-accent-border, var(--qk-border));
  background: var(--qk-accent-soft, var(--qk-field));
  color: var(--qk-text);
  font-size: 15px;
  font-weight: 600;
  transition: transform 240ms var(--qk-hidraulico);
}
.qk-location-field [data-locate]::before {
  content: "";
  inline-size: 18px;
  block-size: 18px;
  background: var(--qk-accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.qk-location-field [data-locate]:active { transform: scale(0.98) translateY(0.5px); }
.qk-location-field [data-locate]:disabled { cursor: progress; opacity: 0.7; }
.qk-form[data-lat] .qk-location-field [data-locate] { background: transparent; border-color: var(--qk-border); color: var(--qk-muted); }
/* Teselas oscuras de ArcGIS invertidas en claro: el filtro va en cada tesela (en el panel, WebKit lo ignora). */
:is(.qk[data-theme="light"], .qk.qk--light, [data-theme="light"] .qk) :is(.qk-map, .qk-map .leaflet-container) { background: #e9eaec; }
:is(.qk[data-theme="light"], .qk.qk--light, [data-theme="light"] .qk) .qk-map .leaflet-tile { filter: invert(1) hue-rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .qk-location-field [data-locate] { transition: none; } }

/* Listas largas (año, marca, modelo, color, colonia) en mosaico: un toque elige y, si es lo único del paso, avanza.
   Sin <select>: la rueda nativa de iOS tapa media pantalla y pide dos toques más. Buscador arriba con más de 20. */
.qk-choice--grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr));
  gap: 8px;
  max-block-size: min(52vh, 460px);
  max-block-size: min(52svh, 460px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y proximity;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 199, 41, 0.35) transparent;
}
.qk-choice--grid::-webkit-scrollbar { inline-size: 5px; }
.qk-choice--grid::-webkit-scrollbar-thumb { background: rgba(237, 199, 41, 0.35); border-radius: 999px; }
@media (max-width: 640px) {
  .qk-choice--grid { max-block-size: none; overflow: visible; }
}
/* Listas largas de texto completo (versiones de moto/auto, opciones extensas): columna vertical legible con scroll */
.qk-choice--list {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px;
  max-block-size: min(52vh, 460px);
  max-block-size: min(52svh, 460px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(237, 199, 41, 0.35) transparent;
}
.qk-choice--list::-webkit-scrollbar { inline-size: 5px; }
.qk-choice--list::-webkit-scrollbar-thumb { background: rgba(237, 199, 41, 0.35); border-radius: 999px; }
.qk-choice--list .qk-choice-option {
  min-block-size: 52px !important;
  padding: 12px 18px !important;
  justify-content: space-between !important;
  text-align: start !important;
}
.qk-choice--list .qk-choice-content {
  flex: 1 1 auto;
  justify-content: flex-start;
  text-align: start;
}
.qk-choice--list .qk-choice-text {
  font-size: 15px !important;
  line-height: 20px !important;
  white-space: normal;
  overflow-wrap: break-word;
}
.qk-choice--grid .qk-choice-option {
  justify-content: center;
  min-block-size: 48px;
  padding: 10px 14px;
  border-radius: var(--radius-squircle-sm, 16px);
  text-align: center;
  scroll-snap-align: start;
  transition: transform 260ms var(--qk-hidraulico),
              background-color 260ms var(--qk-ease),
              border-color 260ms var(--qk-ease),
              box-shadow 260ms var(--qk-hidraulico);
}
.qk-choice--grid .qk-choice-content { flex: 0 1 auto; justify-content: center; gap: 8px; }
.qk-choice--grid .qk-choice-text { font-size: 14px; line-height: 18px; overflow-wrap: break-word; }
.qk-choice--grid .qk-radio,
.qk-choice--grid .qk-choice-option.is-loading .qk-radio {
  display: none !important;
}
/* Elegido: superficie continua de un solo trazo, geometría squircle estable sin rebote ni doble contorno */
.qk-choice--grid .qk-choice-option:has(:checked) {
  border-radius: var(--radius-squircle-sm, 16px);
  --fill: color-mix(in oklab, var(--qk-accent) 6%, var(--qk-field-focus));
  box-shadow: var(--qk-aura, 0 0 0 0 transparent), 0 4px 12px -4px color-mix(in oklab, var(--qk-accent) 35%, transparent);
}
.qk-choice--grid .qk-choice-option:active { transform: scale(0.985) translateY(0.5px); }

.qk-swatch {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  border-radius: 50%;
  background: var(--sw);
  border: 1px solid color-mix(in srgb, var(--qk-text) 24%, transparent);
}
.qk-filter { margin-block-end: 10px; -webkit-appearance: none; appearance: none; }
.qk-filter::-webkit-search-decoration { -webkit-appearance: none; }
.qk-input[autocapitalize="characters"]:not(:placeholder-shown) { text-transform: uppercase; }

/* Dedo, no ratón: doble toque sin zoom, dos dedos sobre opciones no amplían, mantener presionado no abre menú ni lupa. */
.qk { touch-action: pan-y pinch-zoom; } /* un dedo solo desplaza hacia arriba/abajo: nada arrastra la página de lado */
.qk :is(.qk-choice, .qk-plans, .qk-actions, .qk-heros, .qk-chips) { touch-action: pan-x pan-y; } /* los carruseles sí van de lado */
.qk :is(button, a, label, .qk-choice-option, .qk-plan) { -webkit-touch-callout: none; }
.qk .qk-choice-option { -webkit-user-select: none; user-select: none; }
@media (prefers-reduced-motion: reduce) { .qk-choice--grid .qk-choice-option { transition: none; } }

/* Opción con detalle y etiqueta (membresía de asistencias: «Ahorras $501.00», «Solo $49.00 más»): chip nítido y legible. */
.qk-choice-badge {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 170, 80, 0.12);
  color: #047857;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  vertical-align: middle;
  white-space: nowrap;
}
.qk[data-theme="dark"] .qk-choice-badge,
.qk:not([data-theme="light"]):not(.qk--light) .qk-choice-badge {
  background: rgba(95, 224, 138, 0.18);
  color: #7bf7a2;
}
.qk-choice-sub {
  display: block;
  margin-block-start: 4px;
  color: var(--qk-muted);
  font-size: 12.5px;
  line-height: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-wrap: pretty;
  opacity: 0.92;
}

/* Heros del sitio en el lobby: carrusel nativo (scroll-snap), foto 16:9 con la promesa encima, como www.woowtodobien.com. */
.qk-heros {
  display: flex; gap: 12px; margin-inline: -16px; padding: 2px 16px 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.qk-heros::-webkit-scrollbar { display: none; }
.qk-hero {
  position: relative; flex: 0 0 min(86%, 420px); aspect-ratio: 720 / 393; overflow: hidden; scroll-snap-align: start;
  border: 0; border-radius: var(--radius-squircle-sm, 18px) calc(46px * var(--qk-r, 1)) var(--radius-squircle-sm, 18px) var(--radius-squircle-sm, 18px); padding: 0; background: var(--qk-surface, #2c2c2c); box-shadow: var(--qk-hair);
  color: #fff; font: inherit; text-align: start; text-decoration: none; cursor: pointer;
  transition: transform var(--qk-press, 120ms) var(--qk-hidraulico, ease);
}
.qk-hero:active { transform: scale(0.98); }
.qk-hero:focus-visible { outline: 2px solid var(--qk-yellow); outline-offset: 2px; }
.qk-hero img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.qk-hero-txt {
  position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 40px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.45) 55%, transparent);
}
.qk-hero-txt strong { font-size: 17px; line-height: 21px; font-weight: 700; letter-spacing: -0.01em; }
.qk-hero-txt small { font-size: 13px; line-height: 17px; opacity: 0.92; }
.qk-hero-txt b { color: var(--qk-yellow, #EDC729); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .qk-hero { transition: none; } }



/* Menos a la vista (25-sep): marcas comunes primero (el gateway manda `top`), el resto con «Ver más» o el buscador.
   Si lo elegido está entre las demás (regresar), se ven todas. */
.qk-field:not(.is-all, :has(.qk-filter:not(:placeholder-shown), [data-more] :checked)) [data-more],
.qk-field:is(.is-all, :has(.qk-filter:not(:placeholder-shown), [data-more] :checked)) .qk-more { display: none; }
.qk-more {
  justify-self: center;
  min-block-size: 44px;
  margin-block-start: 10px;
  padding: 0 20px;
  border: 1px solid var(--qk-border);
  border-radius: 999px;
  background: transparent;
  color: var(--qk-text);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--qk-press, 120ms) var(--qk-ease), transform var(--qk-press, 120ms) var(--qk-hidraulico);
}
.qk-more:hover { background: var(--qk-field-hover); }
.qk-more:active { transform: scale(0.96); }
.qk-more:focus-visible { outline: 2px solid var(--qk-accent); outline-offset: 2px; }
.qk-field.is-all [data-more] { animation: qk-stagger-in 260ms var(--qk-hidraulico) both; }

/* Escritorio: el mosaico scrollea dentro; su orilla inferior se funde en vez de cortar una fila a la mitad. */
@media (min-width: 641px) {
  .qk-choice--grid {
    padding-block-end: 28px;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  }
}

/* WOOWSH a un toque en cada paso: aparece después de la pregunta y las opciones, para quien se detiene a dudar. */
.qk-bubble-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
@media (prefers-reduced-motion: reduce) { .qk-field.is-all [data-more] { animation: none; } }

/* ── Coreografía entre pantallas (25-sep, medida cuadro por cuadro con /tmp/e2e/frames.py) ──────────────────────
   1. Salida: la pantalla anterior se desvanece 180 ms ENCIMA de la nueva. Lo que no cambia (encabezado, asesor, escena)
      queda en el mismo lugar en las dos, así que se ve quieto; solo se mueve lo distinto. Nada se vuelve a animar al final.
   2. El asesor habla: el globito sube (80–400 ms) y su texto entra 60 ms después; la escena se desliza a su nuevo alto.
   3. Tiempo de lectura (--qk-read) y luego las respuestas en cascada, 40 ms entre cada una; al final «Continuar».
   El DOM sale completo en un solo render (sin fase en JS): la espera es solo animation-delay, transform + opacity (60 fps). */
/* La salida va en .qk-main (grupo con nombre), no en root: el resto de la página no parpadea. Sin var(): los pseudos cuelgan de <html>. */
.qk-main { view-transition-name: qk-main; }
::view-transition-group(root), ::view-transition-group(qk-main) { animation-duration: 0s; }
::view-transition-old(root), ::view-transition-new(root), ::view-transition-new(qk-main) { animation: none; }
::view-transition-old(qk-main) { animation: qk-salida 160ms cubic-bezier(0.4, 0, 1, 1) both; }
/* La escena es la misma ciudad en cada paso (solo cambia su alto, 136 → 92 px con campos): se desliza, no se duplica. */
.qk-bubble > .qk-scene { view-transition-name: qk-scene; }
::view-transition-group(qk-scene) { animation-duration: 320ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes qk-salida { to { opacity: 0; transform: translateY(-6px); } }

.qk-step { --qk-read: 520ms; }
.qk-step:has(.qk-bubble-kicker) { --qk-read: 820ms; }          /* frase + pregunta: más que leer */
.qk-step:not(:has(.qk-bubble-text)) { --qk-read: 60ms; }       /* sin globito (intro, ficha, fin): directo */

.qk-bubble { animation: none; }
.qk-step .qk-bubble-balloon { animation: qk-rise 320ms var(--qk-hidraulico) 80ms both; }  /* entra cuando la pregunta anterior ya casi se fue */
.qk-step .qk-bubble-text { animation: qk-text-enter 320ms var(--qk-hidraulico) 140ms both; }

.qk-step :is(.qk-card > .qk-field:not(:has(.qk-choice)), .qk-field:has(.qk-choice) > :not(.qk-choice, .qk-error),
  .qk-choice > .qk-choice-option, .qk-plans > .qk-plan, .qk-periods, .qk-services > .qk-service, .qk-intro, .qk-form > .qk-note, .qk-wallet) {
  animation: qk-rise 340ms var(--qk-hidraulico) calc(var(--qk-read) + var(--qk-i, 0) * 40ms) both;
}
.qk-step :is(.qk-card > *, .qk-choice > *, .qk-plans > *, .qk-services > *):nth-child(2) { --qk-i: 1; }
.qk-step :is(.qk-card > *, .qk-choice > *, .qk-plans > *, .qk-services > *):nth-child(3) { --qk-i: 2; }
.qk-step :is(.qk-card > *, .qk-choice > *, .qk-plans > *, .qk-services > *):nth-child(4) { --qk-i: 3; }
.qk-step :is(.qk-card > *, .qk-choice > *, .qk-plans > *, .qk-services > *):nth-child(5) { --qk-i: 4; }
.qk-step :is(.qk-card > *, .qk-choice > *, .qk-plans > *, .qk-services > *):nth-child(6) { --qk-i: 5; }
.qk-step :is(.qk-card > *, .qk-choice > *, .qk-plans > *, .qk-services > *):nth-child(7) { --qk-i: 6; }
.qk-step :is(.qk-card > *, .qk-choice > *, .qk-plans > *, .qk-services > *):nth-child(n+8) { --qk-i: 7; }
.qk-step .qk-actions { animation: qk-rise 340ms var(--qk-hidraulico) calc(var(--qk-read) + 240ms) both; }
@keyframes qk-rise { from { opacity: 0; transform: translateY(10px); } }
/* «Tus respuestas» nace con la primera respuesta: entra cuando el pie de la ficha ya se fue (si no, sus textos se enciman). */
.qk-answers { animation: qk-rise 300ms var(--qk-hidraulico) 160ms both; }

/* Repintar la misma pantalla (errores) no vuelve a entrar: solo tiembla lo que hay que corregir. */
.qk-step--same *, .qk-step--same { animation: none !important; }
.qk-step--same :is(.qk-input, .qk-choice)[aria-invalid="true"] { animation: qk-shake 380ms var(--qk-ease) both !important; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(qk-main), ::view-transition-group(qk-scene) { animation: none; }
  .qk-step *, .qk-answers, .qk-choice--grid .qk-choice-option:has(:checked) { animation: none !important; }
}

/* ── Plano (25-sep, «menos sombras suaves»): como app.woowtodobien.com — superficie sólida y UNA orilla de 1 px.
   Borde + filo interno + degradado hacia el fondo se leía como sombra difusa; el logo con drop-shadow se veía borroso.
   Solo queda el tinte del producto arriba del fondo (identidad), sin manchas extra. */
.qk { --qk-surface: var(--qk-card); --qk-hair: inset 0 0 0 1px var(--qk-border); }
.qk.qk .qk-brand-logo { filter: none; }
.qk.qk .qk-row { border: 0; background: var(--qk-card); box-shadow: var(--qk-hair) !important; }
.qk.qk :is(.qk-tile, .qk-hero) { box-shadow: var(--qk-hair); }

/* Cuenta WOOW en el lobby: a la izquierda del logo, del mismo alto que el botón de tema (44 px de toque). */
.qk-lobby-brand .qk-cuenta {
  position: absolute; inset-inline-start: 0; min-block-size: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: var(--qk-card); box-shadow: var(--qk-hair); color: var(--qk-text); font: inherit; font-size: 14px; font-weight: 600;
  max-inline-size: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  transition: transform var(--qk-press, 120ms) var(--qk-hidraulico);
}
.qk-lobby-brand .qk-cuenta:active { transform: scale(0.96); }
.qk-lobby-brand .qk-cuenta:focus-visible { outline: 2px solid var(--qk-accent); outline-offset: 2px; }
.qk-head-actions .qk-cuenta {
  min-block-size: 44px; padding: 0 12px; /* 44 px de toque, como la del lobby (un ::after no sirve: overflow: hidden lo recorta) */ border: 0; border-radius: 999px;
  background: var(--qk-card); box-shadow: var(--qk-hair); color: var(--qk-text); font: inherit; font-size: 13px; font-weight: 600;
  max-inline-size: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;
  transition: transform var(--qk-press, 120ms) var(--qk-hidraulico);
}
.qk-head-actions .qk-cuenta:active { transform: scale(0.96); }
.qk-head-actions .qk-cuenta:focus-visible { outline: 2px solid var(--qk-accent); outline-offset: 2px; }

/* ── Ficha y botones (Safari móvil y desktop Ultra-Taste) ─────────────────────────────────────────── */
/* Sombra ámbar de 1 px: la letra blanca se despega del amarillo sin oscurecerlo. */
.qk.qk .qk-cta:not([data-pending]) { text-shadow: 0 1px 1px rgb(128 78 0 / 0.42), 0 0 6px rgb(128 78 0 / 0.16) !important; }
/* El tinte de marca arriba del fondo se veía como franja rosa bajo un encabezado opaco. En móvil el contenido
   scrollea en su propia caja y nada pasa por debajo del encabezado: puede ser transparente. */
@media (max-width: 640px) { .qk .qk-step > .qk-top { background: transparent; } }
/* Ficha: el pie no parte el botón en dos renglones. */
.qk .qk-pdp-foot .qk-cta { padding-inline: 16px; text-wrap: balance; }
.qk .qk-pdp-category { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.02em; }
/* El título de la barra repite el de la foto: aparece solo cuando el de la foto ya se fue (como iOS). */
@supports (animation-timeline: scroll()) {
  .qk-step:has(> .qk-pdp) { timeline-scope: --qk-pdp-t; }
  .qk-step > .qk-pdp .qk-pdp-title { view-timeline: --qk-pdp-t block; }
  .qk-step:has(> .qk-pdp) .qk-head .qk-title { animation: qk-title-in linear both; animation-timeline: --qk-pdp-t; animation-range: exit 0% exit 100%; }
  @keyframes qk-title-in { from { opacity: 0; transform: translateY(6px); } }
}

/* Woowsh que recorre el botón elegido mientras carga: una sola luz del listón viaja por la orilla.
   Solo CSS (sin runtime): @property anima el ángulo; la máscara deja 2 px de orilla. Sin movimiento: orilla quieta. */
@property --qk-ww-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.qk .qk-cta.is-loading, .qk .qk-choice-option.is-loading { position: relative; opacity: 1; }
.qk .qk-cta.is-loading::after, .qk .qk-choice-option.is-loading::after {
  content: ''; position: absolute; inset: 0; z-index: 1; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--qk-ww-a), transparent 0 50%, var(--qk-ww-low) 66%, var(--qk-ww-body) 80%, var(--qk-ww-top) 88%, var(--qk-ww-sheen) 92%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: qk-ww-run 1.1s linear infinite;
}
/* En la opción el listón viaja sobre el trazo de la opción (caja del borde, 1.5 px) y el trazo fijo baja a un hilo (ver «Sobriedad»): nunca dos anillos. */
.qk .qk-choice-option.is-loading::after { inset: -1px; padding: 1.5px; }
/* Sobre el amarillo del CTA la luz tiene que ser blanca para verse. */
.qk .qk-cta.is-loading::after { --qk-ww-low: rgb(255 255 255 / 0.3); --qk-ww-body: rgb(255 255 255 / 0.75); --qk-ww-top: #fff; --qk-ww-sheen: #fff; }
.qk .qk-cta.is-loading { cursor: progress; }
@keyframes qk-ww-run { to { --qk-ww-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .qk .qk-cta.is-loading::after, .qk .qk-choice-option.is-loading::after { animation: none; } }

/* Pregunta con una sola respuesta posible (p. ej. «Área abierta»): va marcada desde module.js y no se le pregunta a nadie. */
.qk-field:has(> .qk-choice > .qk-choice-option:only-child) { display: none; }

/* Campo con foco nunca debajo del botón fijo: medido en el relato con el teclado arriba (humano.py «focoTapado»). */
.qk-form :is(input, textarea, select) { scroll-margin-block-end: calc(var(--qk-dock, 0px) + 16px); }

/* 28-sep (Aldo): en el teléfono, un paso con formulario se recorre como página. La barra se queda arriba (translúcida);
   globito, escena, campos y botón se desplazan juntos. Antes la escena y el botón iban fijos y a los campos les tocaban
   ~150 px de 664 (medido en ubicación y agenda). El botón queda al final de la lista o abajo si el paso es corto. */
@media (max-width: 640px) {
  .qk .qk-step:has(> .qk-form, > .qk-card--payment) {
    overflow-x: clip;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .qk .qk-step:has(> .qk-form, > .qk-card--payment)::-webkit-scrollbar { display: none; }
  .qk .qk-step:has(> .qk-form, > .qk-card--payment) > .qk-top {
    position: sticky;
    inset-block-start: 0;
    background: color-mix(in oklab, var(--qk-bg) 94%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  .qk .qk-step:has(> .qk-form, > .qk-card--payment) > :is(.qk-form, .qk-card) { flex: none; min-block-size: auto; overflow: visible; }
  .qk .qk-step:has(> .qk-form, > .qk-card--payment) > .qk-actions { margin-block-start: auto; }
}
/* iOS: el input de fecha trae ancho y alto propios: se salía a lo ancho (scroll horizontal) y quedaba alto y vacío. */
.qk-input[type="date"] { -webkit-appearance: none; appearance: none; min-inline-size: 0; display: block; }
.qk-input[type="date"]::-webkit-date-and-time-value { text-align: start; }

/* 28-sep: recibo del cobro sobre la pasarela (grúa: km × tarifa). Tokens del tema; el total va en tinta, no en ámbar. */
.qk-fare {
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border-radius: var(--radius-squircle-sm, 16px);
  corner-smoothing: 100%;
  -webkit-corner-smoothing: 100%;
  background: var(--qk-field);
  animation: qk-stagger-in 360ms var(--qk-hidraulico) both;
}
.qk-fare-rows { display: grid; gap: 10px; margin: 0; }
.qk-fare-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qk-fare-row dt { display: flex; align-items: center; gap: 10px; color: var(--qk-muted); font-size: 14px; line-height: 20px; }
.qk-fare-row dd { margin: 0; color: var(--qk-text); font-size: 15px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qk-fare-route { display: inline-flex; align-items: center; inline-size: 44px; flex: none; }
.qk-fare-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--qk-muted); flex: none; }
.qk-fare-line {
  flex: 1;
  block-size: 0;
  border-block-start: 2px dashed var(--qk-accent, var(--qk-yellow));
  transform-origin: left center;
  animation: qk-fare-draw 720ms 160ms var(--qk-hidraulico) both;
}
.qk-fare-pin {
  inline-size: 9px;
  block-size: 9px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--qk-accent, var(--qk-yellow));
  flex: none;
  animation: qk-fare-drop 420ms 620ms var(--qk-hidraulico) both;
}
.qk-fare-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block-start: 12px;
  border-block-start: 1px dashed color-mix(in oklab, var(--qk-muted) 45%, transparent);
}
.qk-fare-total span { color: var(--qk-muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.qk-fare-total strong { color: var(--qk-text); font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@keyframes qk-fare-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes qk-fare-drop { from { opacity: 0; transform: translateY(-6px) rotate(-45deg) scale(0.6); } to { opacity: 1; transform: translateY(0) rotate(-45deg) scale(1); } }
@media (prefers-reduced-motion: reduce) { .qk-fare, .qk-fare-line, .qk-fare-pin { animation: none; } }

/* ── Ficha v2 (29-sep) ─────────────────────────────────────────────────────────────────────────────────────────────
   Portada que se abre desde la tarjeta del lobby (y regresa a ella), etiqueta, datos rápidos, pasos y preguntas.
   Todo el texto lo edita quien no programa en HubSpot (fichas › etiqueta, datos, pasos, preguntas); vacío = no se pinta.
   La transición es «layoutId» nativo: la tarjeta y la portada comparten `view-transition-name: qk-cover` solo mientras dura
   (module.js › morph). Sin var() en los ::view-transition-*: cuelgan de <html>, fuera de .qk. */
.qk--shared .qk-pdp-cover { view-transition-name: qk-cover; }
::view-transition-group(qk-cover) { animation-duration: 460ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); overflow: clip; border-radius: var(--radius-squircle-md, 26px); }
::view-transition-old(qk-cover), ::view-transition-new(qk-cover) { inline-size: 100%; block-size: 100%; object-fit: cover; }
:root:has(.qk--shared)::view-transition-old(qk-main) { animation: none; opacity: 0; }
:root:has(.qk--shared)::view-transition-new(qk-main) { animation: qk-entra 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes qk-entra { from { opacity: 0; } }

.qk-pdp-cover:has(> img) { overflow: clip; } /* la foto se escala al bajar (parallax): que no se salga */
img.qk-pdp-hero ~ .qk-pdp-header .qk-pdp-category {
  padding: 3px 10px; border-radius: 999px; font-size: 12px; line-height: 16px; letter-spacing: 0.02em; color: #fff;
  background: rgba(22, 23, 25, 0.55); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.qk-pdp-tag {
  position: absolute; inset-block-start: 12px; inset-inline-start: 12px; z-index: 2;
  padding: 5px 12px; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: #fff; background: rgba(22, 23, 25, 0.62); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}

/* Precio: «Desde» es la etiqueta, la cifra manda. */
.qk-pdp-price { font-size: 28px; line-height: 34px; }
.qk-pdp-price small { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 0; color: var(--qk-muted); }

/* Datos rápidos: hasta 4 fichas chicas (45 min · Llegada promedio). */
.qk-pdp-facts { display: flex; margin: 0; padding: 0; list-style: none; border-radius: var(--radius-squircle-sm, 18px); background: var(--qk-card); box-shadow: var(--qk-hair); overflow: clip; }
.qk-pdp-facts li { flex: 1 1 0; min-inline-size: 0; display: grid; gap: 1px; padding: 10px 6px; text-align: center; }
.qk-pdp-facts li + li { border-inline-start: 1px solid var(--qk-border); }
.qk-pdp-facts :is(strong, span) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qk-pdp-facts strong { font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--qk-text); font-variant-numeric: tabular-nums; }
.qk-pdp-facts span { font-size: 11px; line-height: 14px; color: var(--qk-muted); }

/* Cómo funciona: línea de tiempo con el hilo amarillo. */
.qk-pdp-steps { padding-block-start: 12px; }
.qk-pdp-steps ol { counter-reset: paso; display: grid; margin: 0; padding: 0; list-style: none; }
.qk-pdp-steps li { counter-increment: paso; position: relative; display: grid; gap: 2px; padding: 4px 0 22px 46px; font-size: 15px; line-height: 21px; }
.qk-pdp-steps li:last-child { padding-block-end: 0; }
.qk-pdp-steps li::before {
  content: counter(paso); position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 1;
  display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in oklab, var(--qk-yellow) 26%, var(--qk-card)), color-mix(in oklab, var(--qk-yellow) 12%, var(--qk-card)));
  color: var(--qk-yellow); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; /* como el check de «Qué incluye»: legible en claro y oscuro */
}
.qk-pdp-steps li:not(:last-child)::after {
  content: ''; position: absolute; inset-block: 36px 4px; inset-inline-start: 15px; inline-size: 2px; border-radius: 1px;
  background: color-mix(in oklab, var(--qk-yellow) 45%, transparent); transform-origin: top;
}
.qk-pdp-steps strong { font-weight: 700; color: var(--qk-text); }
.qk-pdp-steps span { color: var(--qk-muted); font-size: 14px; line-height: 20px; text-wrap: pretty; }

/* Preguntas frecuentes: <details name> = una abierta a la vez, nativo (teclado y lector de pantalla gratis). */
.qk-pdp-faq { display: grid; gap: 8px; padding-block-start: 12px; }
.qk-pdp-faq .qk-pdp-heading { margin-block-end: 6px; }
.qk-pdp-q { border-radius: var(--radius-squircle-md, 26px); background: var(--qk-card); box-shadow: var(--qk-hair); overflow: clip; }
.qk-pdp-q summary {
  box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 52px; padding: 12px 16px;
  font-size: 15px; line-height: 21px; font-weight: 600; color: var(--qk-text); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.qk-pdp-q summary::-webkit-details-marker { display: none; }
.qk-pdp-q summary:focus-visible { outline: 2px solid var(--qk-accent); outline-offset: -2px; border-radius: var(--radius-squircle-md, 26px); }
.qk-pdp-q .qk-chevron { flex: none; color: var(--qk-muted); transition: transform 260ms var(--qk-hidraulico); }
.qk-pdp-q[open] .qk-chevron { transform: rotate(180deg) scale(1.08); }
/* Una sola columna de campos (Obed 30-sep, carga cognitiva): los apellidos ya no comparten renglón. */
.qk-form { container: qk-form / inline-size; }
/* Qué no cubre: lo que hoy termina en rechazo se dice antes de pedir (sin rojo: es información, no error). */
.qk-pdp-no { counter-reset: no; display: grid; gap: 12px; margin: 0; padding: 0 16px 16px; list-style: none; font-size: 14px; line-height: 20px; }
.qk-pdp-no li { counter-increment: no; position: relative; display: grid; gap: 1px; padding-inline-start: 28px; }
.qk-pdp-no li::before { content: counter(no); position: absolute; inset: 1px auto auto 0; display: grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--qk-border); color: var(--qk-muted); font-size: 12px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.qk-pdp-q summary small { margin-inline-end: auto; padding: 1px 8px; border-radius: 999px; background: var(--qk-border); color: var(--qk-muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qk-pdp-no strong { font-weight: 600; color: var(--qk-text); }
.qk-pdp-no span { color: var(--qk-muted); text-wrap: pretty; }
.qk-pdp-q p { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 21px; color: var(--qk-text); opacity: 0.86; text-wrap: pretty; }
@supports (interpolate-size: allow-keywords) {
  .qk-pdp-q { interpolate-size: allow-keywords; }
  .qk-pdp-q::details-content { block-size: 0; overflow: clip; transition: block-size 300ms var(--qk-hidraulico), content-visibility 300ms allow-discrete; }
  .qk-pdp-q[open]::details-content { block-size: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Los checks se dibujan uno tras otro. */
  .qk-pdp-check path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: qk-draw 420ms var(--qk-hidraulico) calc(260ms + var(--n, 0) * 80ms) forwards; }
  .qk-step--morph .qk-pdp-check path { animation-delay: calc(520ms + var(--n, 0) * 80ms); }
  .qk-pdp-list li:nth-child(2) { --n: 1; }
  .qk-pdp-list li:nth-child(3) { --n: 2; }
  .qk-pdp-list li:nth-child(4) { --n: 3; }
  .qk-pdp-list li:nth-child(n+5) { --n: 4; }
  @keyframes qk-draw { to { stroke-dashoffset: 0; } }

  /* Scroll-driven (Chrome/Safari 26): la foto se aleja un poco al bajar; pasos y preguntas aparecen al entrar; el hilo se dibuja. */
  @supports (animation-timeline: view()) {
    .qk-pdp-hero:not(.qk-pdp-hero--scene) { animation: qk-parallax linear both; animation-timeline: scroll(nearest); animation-range: 0 240px; }
    .qk-pdp-steps li, .qk-pdp-q { animation: qk-reveal linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .qk-pdp-steps li:not(:last-child)::after { animation: qk-thread linear both; animation-timeline: view(); animation-range: entry 40% cover 55%; }
    @keyframes qk-parallax { to { transform: translateY(5%) scale(1.08); } }
    @keyframes qk-reveal { from { opacity: 0; transform: translateY(14px); } }
    @keyframes qk-thread { from { transform: scaleY(0); } }
  }
}

/* ── Bordes y esquinas coherentes (29-sep) ─────────────────────────────────────────────────────────────────────────
   Un solo trazo por superficie: degradado del acento del servicio que nace en la esquina de arriba y se disuelve a transparente
   (--qk-edge), sobre un lavado suave del mismo color (--qk-wash). El foco NO es otra línea: es un aura de 4 px al 16 %.
   El woowsh de carga viaja sobre ese mismo trazo. Antes se apilaban borde + inset + outline + anillo y, con el amarillo del
   woowsh sobre el rosa, quedaba café. */
.qk {
  /* Sólidos (30-sep, Obed): nada de trazo que se vuelve transparente ni lavado en degradado; como en las landings y la app. */
  --qk-edge: linear-gradient(var(--qk-accent-mid), var(--qk-accent-mid));
  --qk-wash: linear-gradient(color-mix(in oklab, var(--qk-accent) 10%, transparent), color-mix(in oklab, var(--qk-accent) 10%, transparent));
}
/* Squircle de verdad (superelipse), donde el navegador lo sabe; `corner-smoothing` no lo implementa nadie. Sin él, el radio normal. */
@supports (corner-shape: squircle) {
  /* El buscador del lobby, el interruptor de tema, «Entrar», «Retoma», las pastillas y las alertas también son
     superficies de la página: mismas esquinas que el resto, no círculos de radio suelto. */
  .qk :is(.qk-bubble-balloon, .qk-note, .qk-card, .qk-input, .qk-wallet-card, .qk-autocomplete-list, .qk-map, .qk-choice-option, .qk-plan,
    .qk-pdp-hero, .qk-pdp-badge, .qk-service, .qk-skeleton, .qk-answers, .qk-row, .qk-row-icon, .qk-empty, .qk-fare, .qk-hero, .qk-tile, .qk-pdp-facts, .qk-pdp-q, .qk-pdp-cover,
    .qk-theme-toggle, .qk-cuenta, .qk-retoma, .qk-alert, .qk-land-memb, .qk-cta, .qk-secondary, .qk-group-all) { corner-shape: squircle; }
  .qk .qk-choice-option.is-loading::after { corner-shape: inherit; }
  ::view-transition-group(qk-cover) { corner-shape: squircle; }
}

/* ── Voz del relato: orbe WOOWSH que escucha (voz.js). --lvl (0..1) = nivel de la voz. ─────────────────────── */
.qk-voz { display: grid; justify-items: center; gap: 12px; margin-block-end: 16px; }
.qk-voz-orb {
  position: relative; inline-size: 148px; block-size: 148px; border: 0; padding: 0; cursor: pointer; background: none; border-radius: 50%;
  display: grid; place-items: center; color: #fff; -webkit-tap-highlight-color: transparent;
}
/* El listón WOOWSH (orbe.mp4, dorado sobre negro) se pinta en un canvas con el brillo convertido en transparencia (voz.js); el video queda oculto.
   La máscara radial borra cualquier resto del cuadro. */
.qk-voz-orb video { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.qk-voz-orb canvas {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 78%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 78%, transparent 100%);
  transform: scale(var(--s, 1)); transition: transform 120ms linear, opacity 240ms;
}
/* Modo claro: el listón es luz sobre negro. En vez de teñirlo, se le pone detrás el mismo fondo oscuro de siempre (se ve igual que en modo oscuro). */
.qk[data-theme="light"] .qk-voz-orb, .qk.qk--light .qk-voz-orb { background: radial-gradient(circle closest-side, #1f1f22 76%, rgba(31, 31, 34, 0) 90%); }
.qk-voz-orb svg { position: relative; filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.55)); transition: opacity 200ms; }
.qk-voz-orb:active canvas { --s: 0.94; }
.qk-voz-orb:focus-visible { outline: 2px solid var(--qk-accent); outline-offset: 2px; }
.qk-voz { --s: 1; }
.qk-voz[data-state="idle"] canvas { animation: qk-voz-respira 3.2s ease-in-out infinite; }
.qk-voz[data-state="rec"] canvas { --s: calc(1 + var(--lvl, 0) * 0.16); }
.qk-voz[data-state="wait"] canvas { opacity: 0.75; }
.qk-voz[data-state="wait"] svg { opacity: 0.35; }
.qk-voz[data-state="rec"] svg { opacity: 0.9; }
.qk-voz-hint { margin: 0; min-block-size: 20px; text-align: center; font-size: 14px; line-height: 20px; color: var(--qk-text); }
.qk-voz[data-state="err"] .qk-voz-hint { color: var(--qk-error); }
@keyframes qk-voz-respira { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .qk-voz-orb canvas { animation: none !important; transition: none; } }

/* ── Página de categoría (landing.js): intro, membresía, cómo funciona, preguntas. Pasos y preguntas reusan .qk-pdp-steps/.qk-pdp-faq. ── */
[data-land="top"]:not(:empty) { display: grid; gap: 14px; margin-block-end: 18px; }
.qk-land-lead { margin: 0; font-size: 16px; line-height: 24px; color: var(--qk-muted); text-wrap: pretty; max-inline-size: 60ch; }
.qk-land-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qk-land-pill { display: inline-flex; align-items: center; padding: 10px 16px; min-block-size: 44px; border: 0; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--qk-text); background: var(--qk-card); box-shadow: var(--qk-hair, inset 0 0 0 1px var(--qk-border)); touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: transform 140ms var(--qk-resorte, ease-out), background-color 140ms, color 140ms; }
button.qk-land-pill { cursor: pointer; }
.qk-land-pill:active { transform: scale(0.96); }
.qk-land-pill[aria-pressed="true"] { background: var(--qk-cta); color: var(--qk-on-cta); box-shadow: none; }
.qk-land-pills .qk-land-pill:focus-visible { outline: 2px solid var(--qk-accent-mid); outline-offset: 2px; }
.qk-row-wrap[hidden], .qk-group[hidden] { display: none; }
[data-land="bottom"]:not(:empty) { display: grid; gap: 26px; margin-block-start: 28px; }
.qk-land-memb { display: grid; gap: 8px; padding: 22px 20px; border-radius: var(--radius-squircle-md, 26px); background: var(--qk-card); box-shadow: inset 0 0 0 1px var(--qk-accent-border, var(--qk-border)); }
.qk-land-memb h2 { margin: 0; font-size: 18px; line-height: 24px; }
.qk-land-memb strong { font-size: 26px; line-height: 32px; letter-spacing: -0.02em; color: var(--qk-yellow); }
.qk-land-memb p { margin: 0 0 6px; font-size: 14px; line-height: 21px; color: var(--qk-muted); text-wrap: pretty; }
.qk-land-memb .qk-cta { justify-self: stretch; text-align: center; text-decoration: none; }
@media (min-width: 720px) {
  .qk-land-memb { grid-template-columns: 1fr auto; column-gap: 28px; align-items: center; }
  .qk-land-memb > :is(h2, strong, p) { grid-column: 1; }
  .qk-land-memb .qk-cta { grid-column: 2; grid-row: 1 / span 3; padding-inline: 28px; }
}
[data-land="top"]:not(:empty) + .qk-results > .qk-group > .qk-group-title { display: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════
   WOOW 2026 · escritorio y microinteracciones. ADN de app.woowtodobien.com (carbón #242424, dorado en degradado, CTA en
   mayúsculas con tracking) y de las landings /seguros (negro cálido, tarjetas #140f0b, esquina grande asimétrica 16/48,
   Montserrat 700). Todo con container queries de `.qk`: el módulo se adapta al ancho que le dé la página de HubSpot.
   Solo transform/opacity se animan; reduced-motion lo apaga todo. Radios con tokens (--qk-r escala los squircle).
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.qk { --qk-r: 1; --qk-gleam: rgba(255, 255, 255, 0.55); --qk-spot: rgba(237, 199, 41, 0.16); }
.qk[data-theme="light"], .qk.qk--light { --qk-spot: rgba(237, 199, 41, 0.26); }

/* CTA: amarillo de marca de izquierda a derecha, texto blanco (mismos tonos en claro y oscuro) + barrido de luz al pasar el mouse. */
.qk.qk .qk-cta:not(:disabled):not([data-pending]):not(.is-loading) {
  background: linear-gradient(90deg, #e6c023 0%, #eeae27 100%);
  color: #fff !important;
  text-shadow: 0 1px 1px rgb(128 78 0 / 0.42), 0 0 6px rgb(128 78 0 / 0.16) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28) !important;
  position: relative;
}
.qk .qk-cta:not(:disabled):not([data-pending])::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent 34%, var(--qk-gleam) 50%, transparent 66%) 130% 0 / 260% 100% no-repeat;
  transition: background-position 700ms var(--qk-hidraulico);
}
@media (hover: hover) { .qk .qk-cta:hover:not(:disabled):not([data-pending])::before { background-position: -30% 0; } }

/* Luz que sigue al cursor (fx.js pone --mx/--my). */
.qk .qk-row::before, .qk .qk-hero::before, .qk .qk-tile::before, .qk .qk-land-memb::before, .qk .qk-pdp-q::before {
  display: block; content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 0%), var(--qk-spot), transparent 70%);
  opacity: 0; transition: opacity 240ms ease;
}
.qk .qk-tile, .qk .qk-land-memb, .qk .qk-pdp-q { position: relative; }
@media (hover: hover) { .qk .qk-row:hover::before, .qk .qk-hero:hover::before, .qk .qk-tile:hover::before, .qk .qk-land-memb:hover::before, .qk .qk-pdp-q:hover::before { opacity: 1; } }

/* ── Lobby en escritorio ── */
@container qk (min-width: 960px) {
  .qk-shell.qk-shell--lobby { max-inline-size: min(1240px, 100%); }
  .qk-lobby { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 30px; align-items: start; }
  .qk-lobby > * { grid-column: 1 / -1; }
  .qk-lobby-brand { margin: 0; }
  .qk-lobby-title { grid-column: 1 / span 6; align-self: end; font-size: clamp(40px, 3.6cqi, 54px); line-height: 1.04; letter-spacing: -0.045em; }
  .qk-search { grid-column: 7 / -1; align-self: end; }
  .qk-search .qk-input { min-block-size: 62px; }
  /* Destacados: bento 62/38 (uno grande + dos apilados), esquina grande asimétrica como las landings. */
  .qk-heros { display: grid; grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; gap: 18px; margin: 0; padding: 0; overflow: visible; block-size: clamp(400px, 34cqi, 500px); }
  .qk-hero { flex: none; aspect-ratio: auto; inline-size: 100%; block-size: 100%; border-radius: 18px calc(56px * var(--qk-r)) 18px 18px; transition: transform 420ms var(--qk-hidraulico); }
  .qk-hero:first-child { grid-row: 1 / span 2; border-radius: 22px calc(72px * var(--qk-r)) 22px 22px; }
  .qk-hero:nth-child(n+4) { display: none; }
  .qk-hero img { transition: transform 900ms var(--qk-hidraulico); will-change: transform; }
  .qk-hero:hover img { transform: scale(1.045); }
  .qk-hero:first-child .qk-hero-txt { padding: 96px 28px 26px; }
  .qk-hero:first-child .qk-hero-txt strong { font-size: clamp(26px, 2.4cqi, 36px); line-height: 1.08; letter-spacing: -0.03em; }
  .qk-hero:first-child .qk-hero-txt small { font-size: 15px; line-height: 20px; }
  /* Categorías: una sola fila de 12. */
  /* Misma retícula que en móvil: con 92 px la fila de doce no cabía en el ancho de la página y saltaba a dos renglones. */
  .qk-chips.qk-tiles { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 12px; }
  .qk-rows { grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 18px; }
}
@media (prefers-reduced-motion: reduce) { .qk .qk-cta::before, .qk .qk-row::before, .qk .qk-hero::before { transition: none; } .qk-hero img { transition: none !important; transform: none !important; } }

@container qk (min-width: 960px) {
  /* Resultados: título de categoría a la izquierda (editorial), tarjetas a la derecha. */
  .qk-results { display: grid; gap: 44px; }
  .qk-group { grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 32px; row-gap: 14px; align-items: start; }
  .qk-group-title { grid-column: 1; grid-row: 1; margin: 0; font-size: 22px; line-height: 28px; letter-spacing: -0.03em; }
  .qk-group-all { grid-column: 1; grid-row: 2; justify-self: start; margin: 0; padding: 0 16px 0 18px; white-space: nowrap; font-size: 14px; line-height: 1; }
  .qk-group-all::after { margin-inline-start: 10px; }
  /* «Retoma tu cotización»: una sola línea (icono · texto · botón · cerrar), no una barra a todo el ancho. */
  .qk .qk-retoma { grid-template-columns: 48px minmax(0, 1fr) auto 36px; gap: 18px; padding: 14px 14px 14px 20px; border-radius: var(--radius-squircle-md, 26px); }
  .qk .qk-retoma > img { inline-size: 48px; block-size: 48px; }
  .qk .qk-retoma-text { padding-inline-end: 0; gap: 3px; font-size: 14px; }
  .qk .qk-retoma-text strong { font-size: 17px; }
  .qk .qk-retoma .qk-cta { grid-column: auto; inline-size: auto; min-inline-size: 200px; min-block-size: 48px; padding-inline: 32px; }
  .qk .qk-retoma-x { position: static; inset: auto; align-self: center; justify-self: center; }
  .qk-group > .qk-rows { grid-column: 2; grid-row: 1 / span 3; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); }
  [data-land="top"]:not(:empty) + .qk-results .qk-group { grid-template-columns: minmax(0, 1fr); }
  [data-land="top"]:not(:empty) + .qk-results .qk-group > .qk-rows { grid-column: 1; grid-row: auto; }
  .qk-row { min-block-size: 168px; transition-duration: 280ms; }
  @media (hover: hover) { .qk-row:hover { transform: translateY(-2px); } }
}

/* ── Ficha (PDP) en escritorio: portada grande fija a la izquierda, compra a la derecha ── */
@container qk (min-width: 960px) {
  .qk-shell:has(.qk-pdp) { max-inline-size: min(1180px, 100%); }
  .qk-shell:has(.qk-pdp) .qk-main { max-inline-size: none; }
  .qk-step:has(> .qk-pdp) { grid-template-columns: minmax(0, 1.12fr) minmax(380px, 0.88fr); column-gap: clamp(32px, 4cqi, 64px); row-gap: 0; align-items: start; }
  .qk-step:has(> .qk-pdp) > .qk-top { order: -9; grid-column: 1 / -1; grid-row: 1; margin-block-end: 20px; }
  .qk-step:has(> .qk-pdp) > .qk-pdp { display: contents; }
  .qk-step:has(> .qk-pdp) .qk-pdp-cover { order: -3; grid-column: 1; grid-row: 2 / span 40; position: sticky; inset-block-start: 24px; }
  .qk-step:has(> .qk-pdp) .qk-pdp-cover .qk-pdp-hero { aspect-ratio: 1 / 1.04; max-block-size: min(84vh, 780px); border-radius: 28px calc(92px * var(--qk-r)) 28px 28px; object-position: 26% 0%; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
  .qk-step:has(> .qk-pdp) .qk-pdp-cover .qk-pdp-hero { aspect-ratio: 1 / 1.04; max-block-size: min(84svh, 780px); border-radius: 28px calc(92px * var(--qk-r)) 28px 28px; object-position: 26% 0%; -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
  .qk-step:has(> .qk-pdp) > .qk-pdp > :not(.qk-pdp-cover), .qk-step:has(> .qk-pdp) > .qk-pdp-foot { grid-column: 2; }
  .qk-step:has(> .qk-pdp) .qk-pdp-title { font-size: clamp(34px, 3.3cqi, 50px); line-height: 1.04; letter-spacing: -0.04em; }
  .qk-step:has(> .qk-pdp) .qk-pdp-lead { order: -2; font-size: 18px; line-height: 27px; margin: 0 0 18px; }
  .qk-step:has(> .qk-pdp) .qk-pdp-price { order: -2; margin: 0 0 18px; }
  .qk-step:has(> .qk-pdp) > .qk-pdp-foot { order: -2; margin: 0 0 30px; position: sticky; inset-block-start: 16px; z-index: 3; }
  .qk-step:has(> .qk-pdp) > .qk-pdp > section, .qk-step:has(> .qk-pdp) > .qk-pdp > p.qk-pdp-note { margin-block-end: 22px; }
}

/* ── Trámite en escritorio: escenario a la izquierda (pregunta + ilustración del servicio), formulario a la derecha, resumen al costado ── */
@container qk (min-width: 960px) {
  .qk-shell:has(.qk-answers) { grid-template-columns: minmax(0, 1fr) 300px; max-inline-size: min(1180px, 100%); gap: 28px; }
  .qk-shell:has(.qk-answers) .qk-main { max-inline-size: none; }
  .qk-step:has(> .qk-bubble) { grid-template-columns: minmax(300px, 0.74fr) minmax(0, 1.26fr); column-gap: 36px; row-gap: 20px; align-items: start; }
  .qk-step:has(> .qk-bubble) > .qk-top { order: -9; grid-column: 1 / -1; grid-row: 1; }
  .qk-step:has(> .qk-bubble) > .qk-bubble {
    order: -8; grid-column: 1; grid-row: 2 / span 14; position: sticky; inset-block-start: 24px; align-self: start; flex-direction: column; align-items: stretch; gap: 16px;
    min-block-size: clamp(400px, 52vh, 520px); padding: 24px 22px 200px; border-radius: 28px calc(72px * var(--qk-r)) 28px 28px; overflow: hidden;
    min-block-size: clamp(400px, 52svh, 520px); padding: 24px 22px 200px; border-radius: 28px calc(72px * var(--qk-r)) 28px 28px; overflow: hidden;
    background: linear-gradient(165deg, var(--qk-accent-soft, transparent), transparent 62%), var(--qk-card);
    box-shadow: inset 0 0 0 1px var(--qk-border), inset 0 1px 0 rgb(255 255 255 / 0.06);
  }
  .qk-step:has(> .qk-bubble) > .qk-bubble.has-scene { padding-block-end: 200px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-avatar { inline-size: 52px; block-size: 52px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-balloon { flex: none; padding: 18px 22px; border-radius: 22px 22px 22px 6px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-tail { display: none; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-text { font-size: 19px; line-height: 27px; letter-spacing: -0.015em; }
  .qk-step:has(> .qk-bubble) .qk-scene { inset: auto 0 0; block-size: 200px; }
  .qk-step:has(> .qk-bubble) .qk-scene > svg { block-size: 200px; }
  .qk-step:has(> .qk-bubble) > :not(.qk-top):not(.qk-bubble) { grid-column: 2; }
}

@container qk (min-width: 960px) {
  /* Opciones de un toque: tarjetas grandes en dos columnas (sin color al pasar el mouse: solo levantan). */
  .qk-step:has(> .qk-bubble) .qk-choice:not(.qk-choice--grid):not(:has(.qk-choice-badge)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .qk-step:has(> .qk-bubble) .qk-choice:not(.qk-choice--grid) .qk-choice-option { min-block-size: 88px; padding: 18px 22px; font-size: 17px; font-weight: 600; border-radius: calc(22px * var(--qk-r)); }
  @media (hover: hover) { .qk-step:has(> .qk-bubble) .qk-choice-option:hover { transform: translateY(-2px); } }
}

/* ── Página de Asistencias (landing.js): banda dorada de membresía + pasos en fila + preguntas en dos columnas ── */
.qk .qk-land-memb { background: linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 50%), radial-gradient(90% 140% at 8% -30%, rgb(255 255 255 / 0.5), transparent 58%), linear-gradient(135deg, #ecc91f 0%, #efae24 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55); color: #1c1605; border-radius: 26px calc(72px * var(--qk-r)) 26px 26px; padding: 26px 24px; }
.qk .qk-land-memb h2, .qk .qk-land-memb p { color: #1c1605; }
.qk .qk-land-memb p { opacity: 0.78; }
.qk .qk-land-memb strong { color: #1c1605; font-size: clamp(28px, 3cqi, 40px); line-height: 1.05; letter-spacing: -0.04em; }
.qk .qk-land-memb .qk-cta { background: #1c1a17 !important; color: #f6d33a !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12) !important; }
.qk .qk-land-memb .qk-cta::before { display: none; }
@container qk (min-width: 900px) {
  [data-land="bottom"] .qk-pdp-steps ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; counter-reset: paso; }
  [data-land="bottom"] .qk-pdp-steps li { padding: 52px 18px 18px 0; }
  [data-land="bottom"] .qk-pdp-steps li:not(:last-child)::after { inset-block: 15px auto; inset-inline: 40px 0; inline-size: auto; block-size: 2px; background: linear-gradient(90deg, color-mix(in oklab, var(--qk-yellow) 45%, transparent), transparent); }
  [data-land="bottom"] .qk-pdp-steps strong { font-size: 17px; }
  [data-land="bottom"] .qk-pdp-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 16px; }
  [data-land="bottom"] .qk-pdp-faq > .qk-pdp-heading { grid-column: 1 / -1; }
  [data-land="bottom"] .qk-pdp-q summary { font-size: 15px; line-height: 21px; }
  [data-land="top"]:not(:empty) { grid-template-columns: minmax(0, 1fr); }
  .qk-land-lead { font-size: 19px; line-height: 29px; }
}

/* Ajuste 30-sep (escritorio, trámite): jerarquía y balance. La pregunta es el titular del escenario, el bloque se centra en la
   pantalla cuando el paso es corto y el resumen se alinea con el escenario. */
@container qk (min-width: 960px) {
  .qk-shell:has(.qk-answers) { min-block-size: min(100vh, 860px); min-block-size: min(100dvh, 860px); align-content: center; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-balloon { padding: 0; background: none !important; border: 0; box-shadow: none !important; border-radius: 0; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-text, .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-balloon p { font-size: clamp(26px, 2.3cqi, 34px); line-height: 1.12; letter-spacing: -0.035em; font-weight: 700; text-wrap: balance; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-kicker { font-size: 12px; letter-spacing: 0.08em; }
  .qk-step:has(> .qk-bubble) > .qk-bubble { padding-block-start: 28px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble :is(.qk-bubble-content, .qk-bubble-text, .qk-bubble-balloon p) { border: 0; background: none; box-shadow: none; outline: 0; padding: 0; }
  .qk-shell:has(.qk-answers) > .qk-answers { margin-block-start: 82px; }
  .qk-step:has(> .qk-bubble) .qk-choice:not(.qk-choice--grid) .qk-choice-option { min-block-size: 96px; }
}

/* Anchuras fijas del trámite en escritorio (30-sep): la carcasa, el escenario y el formulario miden lo mismo en TODOS los pasos
   (antes la carcasa era 560 px, el formulario 224 y las tarjetas de plan se partían). 360 + 40 + 560 = 960. Con «Tus respuestas»
   manda la rejilla de arriba (1180 = escenario 360 + formulario fluido + resumen 300). */
@container qk (min-width: 960px) {
  .qk-shell:not(.qk-shell--lobby) { max-inline-size: min(1180px, 100%); }   /* la carcasa mide lo mismo cargando, en la ficha y en cada paso: no se mueve */
  .qk-shell:not(.qk-shell--lobby) .qk-main { max-inline-size: none; }
  .qk-shell:not(:has(.qk-answers)) .qk-step:is(:has(> .qk-bubble), .qk-step--loading) { inline-size: 100%; max-inline-size: 960px; margin-inline: auto; }
  .qk-step:has(> .qk-bubble) { grid-template-columns: 360px minmax(0, 1fr); column-gap: 40px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble { block-size: 460px; min-block-size: 0; }
  .qk-step:has(> .qk-bubble) .qk-plan-name { text-wrap: pretty; overflow-wrap: anywhere; }
}

/* Plan con sello «Más protección»: 92 px en todos, así el sello (22 px) nunca pisa el precio (centrado, 40 px) y las tarjetas miden igual. */
.qk-plan { min-block-size: 92px; }
.qk-plan:has(.qk-plan-badge) { padding-block-start: 28px; } /* con renglones de «qué incluye» la fila del precio ya no es la única: sin aire extra el sello se encimaba en el precio */
.qk-plan-badge { line-height: 12px; padding-block: 5px; }

/* Paquetes en escritorio (30-sep): dos columnas de tarjetas verticales como /seguros: medalla arriba, nombre, precio grande. El sello
   «Más protección» vive en la esquina y nunca toca el precio (está en otra fila). */
@container qk (min-width: 960px) {
  .qk-step:has(> .qk-bubble) .qk-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan {
    grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; align-content: space-between; justify-items: start; gap: 14px;
    min-block-size: 168px; padding: 18px 20px 20px;
  }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan .qk-plan-medal { inline-size: 48px; block-size: 48px; }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan .qk-plan-price { display: flex; align-items: baseline; justify-items: start; gap: 6px; }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan .qk-plan-price strong { font-size: 26px; line-height: 30px; letter-spacing: -0.03em; }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan .qk-plan-name { font-size: 16px; }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan .qk-plan-badge { inset-block-start: 14px; inset-inline-end: 14px; border-radius: 999px; padding: 4px 10px; }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan:has(:checked) { transform: translateY(-2px); }
}

/* Atrás ágil: al regresar no hay «tiempo de lectura» (ya leyó esa pantalla) y todo entra de una. */
.qk-step--backward { --qk-read: 0ms !important; }
.qk-step--backward :is(.qk-bubble-balloon, .qk-bubble-text, .qk-actions, .qk-card > *, .qk-choice > *, .qk-plans > *, .qk-services > *, .qk-periods, .qk-field > *) { animation-duration: 160ms !important; animation-delay: 0ms !important; }

/* Escenario del trámite como superficie squircle. */
@supports (corner-shape: squircle) {
  .qk .qk-step > .qk-bubble { corner-shape: squircle; }
}

/* El escenario no salta de altura entre pasos: el bloque se queda arriba (antes se centraba y cada paso corto lo bajaba 40 px). */
@container qk (min-width: 960px) {
  .qk-shell:has(.qk-answers) { min-block-size: 0; align-content: start; }
  .qk-shell:has(.qk-answers) > .qk-answers { margin-block-start: 99px; }
}

/* Escritorio sin scroll de más (30-sep): el escenario se ajusta al alto de la ventana (fijo dentro de ella, igual en todos los pasos),
   se quita la reserva de 96 px para una barra de acciones que en escritorio no es fija, y «Tus respuestas» se vuelve compacta:
   antes crecía un renglón de ~85 px por respuesta y era lo que alargaba la página. */
@container qk (min-width: 960px) {
  .qk:has(.qk-step > .qk-bubble) { padding-block-end: 24px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble { block-size: clamp(340px, calc(100vh - 190px), 500px); }
  .qk-step:has(> .qk-bubble) > .qk-bubble { block-size: clamp(340px, calc(100svh - 190px), 500px); }
  .qk-shell:has(.qk-answers) > .qk-answers { max-block-size: calc(100vh - 120px); display: flex; flex-direction: column; overflow: hidden; }
  .qk-shell:has(.qk-answers) > .qk-answers { max-block-size: calc(100svh - 120px); display: flex; flex-direction: column; overflow: hidden; }
  .qk-answers summary { min-block-size: 44px; flex: none; }
  .qk-answers .qk-summary { padding: 12px 18px 18px; gap: 0; min-block-size: 0; max-block-size: none; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
  .qk-answers .qk-summary div { padding: 7px 2px; gap: 1px; }
  .qk-answers .qk-summary dt { font-size: 10px; line-height: 13px; letter-spacing: 0.06em; }
  .qk-answers .qk-summary dd { font-size: 13px; line-height: 18px; overflow-wrap: anywhere; }
}

/* El trazo del vehículo sale del color elegido en TODA escena pintable. La lista de escenas vivía aquí (auto y moto) y cambio_llanta,
   que comparte carrocería, se quedó con el degradado del servicio sobre cualquier color (5-oct). Ahora lo decide la escena: si trae
   piel (-skin), su héroe se tiñe. Lo que toca el fondo contrasta con el fondo; lo dibujado sobre la carrocería, con la carrocería
   (un auto blanco en oscuro o negro en claro perdía sus líneas): más oscuro que la pintura, o más claro si la pintura ya es oscura.
   El umbral depende del tema: sobre fondo claro casi todo se delinea hacia oscuro (un café con orilla clara parecía tener halo). */
.qk { --qk-car-umbral: 0.48; }
.qk[data-theme="light"], .qk.qk--light { --qk-car-umbral: 0.3; }
.qk[style*="--qk-car"] .qk-scene-svg :is(.moto-hero, [class$="-hero"]:has([class$="-skin"])) { stroke: color-mix(in oklab, var(--qk-car) 55%, var(--qk-text)); transition: stroke 0.5s 0.2s; }
@supports (color: oklch(from red l c h)) {
  .qk[style*="--qk-car"] .qk-scene-svg [class$="-body"]:has(> [class$="-skin"]) { stroke: oklch(from var(--qk-car) calc(l - 0.26 + 0.58 * clamp(0, (var(--qk-car-umbral) - l) * 999, 1)) c h); transition: stroke 0.5s 0.2s; }
}

/* Las 14 filas que ocupa el escenario llevaban 20 px de separación cada una (260 px fantasma): con muchos hijos la página crecía sin motivo. */
@container qk (min-width: 960px) {
  .qk-step:has(> .qk-bubble) { row-gap: 0; }
  .qk-step:has(> .qk-bubble) > .qk-top { margin-block-end: 20px; }
  .qk-step:has(> .qk-bubble) > :not(.qk-top):not(.qk-bubble) { margin-block-end: 20px; }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan { min-block-size: 148px; }
}
@container qk (min-width: 960px) {
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan { gap: 10px; padding: 16px 18px 16px; min-block-size: 0; }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan .qk-plan-medal { inline-size: 40px; block-size: 40px; }
  .qk-step:has(> .qk-bubble) .qk-plans > .qk-plan .qk-plan-meta:not(.qk-plan-meta--save) { display: none; } /* «Un solo pago al año» ya lo dice el «/año» del precio */
}


/* Botón cargando (30-sep): el texto se desvanece y en su lugar sube desde abajo un ícono giratorio, sin cambiar el tamaño del botón
   (cero layout shift). El listón de WOOWSH sigue recorriendo el borde. */
@property --qk-spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.qk.qk .qk-cta { transition: color 180ms var(--qk-ease), text-shadow 180ms var(--qk-ease), filter var(--duration-snappy) linear, background var(--duration-snappy) linear, transform 100ms var(--qk-hidraulico); }
.qk.qk .qk-cta.is-loading:not([data-pending]) { color: transparent !important; text-shadow: none !important; overflow: hidden; }
.qk.qk .qk-cta.is-loading.is-woowsh:not([data-pending]) { overflow: visible; } /* el listón envuelve el botón: no se recorta en su borde */
.qk.qk .qk-cta.is-loading::before {
  content: ''; position: absolute; inset: 50% auto auto 50%; inline-size: 22px; block-size: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  background: conic-gradient(from var(--qk-spin), rgb(255 255 255 / 0) 0 8%, rgb(255 255 255 / 0.35) 40%, #fff 100%) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2.5px));
  opacity: 1; transition: none;
  animation: qk-icon-up 280ms var(--qk-hidraulico) both, qk-spin 0.8s linear infinite;
}
.qk.qk .qk-cta.is-loading[data-pending]::before { background: conic-gradient(from var(--qk-spin), transparent 0 8%, color-mix(in oklab, var(--qk-text) 35%, transparent) 40%, var(--qk-text) 100%) !important; }
@keyframes qk-icon-up { from { opacity: 0; translate: 0 14px; } }
@keyframes qk-spin { to { --qk-spin: 360deg; } }
@media (prefers-reduced-motion: reduce) { .qk.qk .qk-cta.is-loading::before { animation: qk-icon-up 1ms both; background: radial-gradient(circle, #fff 0 3px, transparent 4px) !important; -webkit-mask: none; mask: none; } }


/* Opciones con explicación (membresía vs solo este servicio): una columna, a lo ancho; en dos columnas el texto se partía en 5 renglones. */
@container qk (min-width: 960px) {
  .qk-step:has(> .qk-bubble) .qk-choice:has(.qk-choice-sub) { grid-template-columns: minmax(0, 1fr) !important; }
  .qk-step:has(> .qk-bubble) .qk-choice-option:has(.qk-choice-sub) { min-block-size: 84px; padding: 16px 20px; }
  .qk-step:has(> .qk-bubble) .qk-choice-sub { font-size: 14px; line-height: 20px; text-wrap: pretty; }
}
/* Pantallas anchas (≥1440): la carcasa crece a 1320 y el formulario gana el espacio (antes quedaba apretado entre el escenario y «Tus respuestas»). */
@container qk (min-width: 1440px) {
  .qk-shell:not(.qk-shell--lobby) { max-inline-size: min(1320px, 100%); }
  .qk-step:has(> .qk-bubble) { grid-template-columns: 400px minmax(0, 1fr); column-gap: 48px; }
  .qk-shell:not(:has(.qk-answers)) .qk-step:is(:has(> .qk-bubble), .qk-step--loading) { max-inline-size: 1040px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble { block-size: clamp(380px, calc(100vh - 190px), 560px); }
  .qk-step:has(> .qk-bubble) > .qk-bubble { block-size: clamp(380px, calc(100svh - 190px), 560px); }
}

/* ── Sobriedad (30-sep, Obed): un solo color por producto. El dorado es del CTA; todo lo demás dentro de un trámite o ficha usa el acento del
   servicio (rosa, verde, violeta…): radios, palomitas, precios, ligas y el listón de carga. Sin resplandores de color: el foco es un
   contorno de 2 px y lo elegido un trazo de degradado de dos tonos del mismo matiz sobre el relleno, como en las landings. ── */
.qk:has(.qk-step, .qk-pdp) { --qk-yellow: var(--qk-accent-mid); } /* el woowsh NO se tiñe: amarillo con destellos blancos en todos los productos (Obed 30-sep) */
.qk:has(.qk-step, .qk-pdp) :is(.qk-pdp-check, .qk-pdp-steps li::before) { color: #fff; }
.qk .qk-radio { border-color: color-mix(in oklab, var(--qk-text) 30%, transparent); }
.qk .qk-choice-option:has(:checked) .qk-radio { border-color: var(--qk-accent-mid); background: var(--qk-accent-mid); }
/* El precio de la ficha NO cambia de color (Obed): el de siempre, amarillo en oscuro y tinta en claro. */
.qk .qk-pdp-price { color: var(--qk-price, #f5d03a); }
.qk .qk-plan-price strong { color: var(--qk-accent-mid); }
.qk :is(.qk-pdp-q, .qk-tile, .qk-row):focus-visible,
.qk :is(.qk-choice-option, .qk-plan):not(:has(:checked)):is(:focus-visible, :has(:focus-visible)) {
  box-shadow: none !important;
  outline: 2px solid var(--qk-accent-mid) !important;
  outline-offset: -1px !important;
}
.qk .qk-input:focus { outline: 0 !important; }
.qk .qk-choice--grid .qk-choice-option:has(:checked) { box-shadow: none; outline: none !important; }
.qk :is(.qk-choice-option, .qk-plan):has(:checked) {
  outline: none !important;
  box-shadow: none !important;
  --qk-edge: linear-gradient(135deg, color-mix(in oklab, var(--qk-accent-mid) 55%, #fff) 0%, var(--qk-accent-mid) 100%);
  --qk-wash: linear-gradient(color-mix(in oklab, var(--qk-accent) 9%, transparent), color-mix(in oklab, var(--qk-accent) 9%, transparent));
}
.qk .qk-choice-option.is-loading { --qk-edge: linear-gradient(color-mix(in oklab, var(--qk-accent-mid) 22%, transparent), color-mix(in oklab, var(--qk-accent-mid) 22%, transparent)); } /* hilo tenue: el listón amarillo corre encima y no se mezcla con el acento (café) */
.qk .qk-choice-option.is-loading::after { --qk-ww-top: #fff; --qk-ww-sheen: #fff; } /* puntas blancas */

/* ── Ticket de cierre (30-sep): papel de ancho fijo que «se imprime» saliendo de una ranura; en escritorio va en dos columnas
   (mensaje a la izquierda, resumen a la derecha) y cabe en la ventana sin scroll de página. ── */
.qk-step:has(.qk-ticket) { position: relative; overflow: hidden auto; overscroll-behavior: contain; padding-block-start: 10px; } /* hidden en X recorta el papel que entra; auto en Y: con resumen largo en móvil el botón «Ir a mi WOOW» queda alcanzable */
.qk-step:has(.qk-ticket) > .qk-ticket { flex: none; }
.qk-step:has(.qk-ticket)::before { content: ''; position: absolute; inset: 0 max(0px, calc(50% - 270px)) auto; block-size: 10px; z-index: 2; border-radius: 6px; background: color-mix(in oklab, var(--qk-text) 22%, var(--qk-card)); }
.qk-ticket { inline-size: 100%; max-inline-size: 520px; margin-inline: auto; transform-origin: top; animation: qk-print 1300ms steps(26, end) 420ms both; }
@keyframes qk-print { from { translate: 0 -100%; } to { translate: 0 0; } }
.qk-ticket > * { animation-delay: calc(1000ms + var(--qk-t, 0) * 60ms) !important; animation-fill-mode: both; }
.qk-ticket > :nth-child(2) { --qk-t: 1; } .qk-ticket > :nth-child(3) { --qk-t: 2; } .qk-ticket > :nth-child(4) { --qk-t: 3; }
.qk-ticket > :nth-child(5) { --qk-t: 4; } .qk-ticket > :nth-child(6) { --qk-t: 5; } .qk-ticket > :nth-child(n+7) { --qk-t: 6; }
.qk-ticket .qk-summary div { animation: qk-rise 260ms var(--qk-hidraulico) calc(800ms + var(--qk-r, 0) * 110ms) both; }
.qk-ticket .qk-summary div:nth-child(2) { --qk-r: 1; } .qk-ticket .qk-summary div:nth-child(3) { --qk-r: 2; } .qk-ticket .qk-summary div:nth-child(4) { --qk-r: 3; }
.qk-ticket .qk-summary div:nth-child(5) { --qk-r: 4; } .qk-ticket .qk-summary div:nth-child(6) { --qk-r: 5; } .qk-ticket .qk-summary div:nth-child(7) { --qk-r: 6; }
.qk-ticket .qk-summary div:nth-child(8) { --qk-r: 7; } .qk-ticket .qk-summary div:nth-child(n+9) { --qk-r: 8; }
.qk-ticket-estado { justify-self: center; margin: 0; padding: 4px 12px; border: 1px solid var(--qk-line); border-radius: var(--radius-squircle-sm); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.qk-ticket .qk-woowsh { margin-block: 0; inline-size: min(280px, 84%); } /* la liga de pago NO es un pago hecho: en lugar de la palomita verde va el listón (siempre amarillo, sin destellos encima) */
@media (max-height: 600px) { .qk-ticket .qk-woowsh { display: none; } } /* pantallas muy bajitas: el botón de pagar va primero, sin bajar el pliegue */
.qk-ticket > .qk-link { text-align: center; font-weight: 500; } /* «¿Problemas para pagar?»: ayuda discreta bajo el botón, no otro botón */
.qk-ticket-icon { animation: qk-check-pop 520ms var(--qk-hidraulico) 1500ms both !important; }
@keyframes qk-check-pop { from { scale: 0.4; opacity: 0; } 60% { scale: 1.12; } to { scale: 1; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qk-ticket, .qk-ticket > *, .qk-ticket .qk-summary div, .qk-ticket-icon { animation: none !important; } .qk-step:has(.qk-ticket)::before { display: none; } }
@container qk (min-width: 720px) {
  .qk-ticket { max-inline-size: 900px; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); column-gap: 48px; row-gap: 14px; padding: 60px 40px 64px; align-items: start; align-content: start; }
  .qk-step:has(.qk-ticket)::before { inset-inline: max(0px, calc(50% - 450px)); }
  .qk-ticket > * { grid-column: 1; }
  .qk-ticket > .qk-summary { grid-column: 2; grid-row: 1 / span 12; margin: 0; max-block-size: calc(100vh - 190px); max-block-size: calc(100svh - 190px); overflow: auto; overscroll-behavior: contain; padding: 0; }
  .qk-ticket > .qk-divider { display: none; }
  .qk-ticket-title, .qk-ticket-lead, .qk-thanks { text-align: start; }
  .qk-ticket-title { font-size: clamp(26px, 3cqi, 38px); }
  .qk-ticket-icon, .qk-ticket-estado { justify-self: start; }
  .qk-ticket .qk-woowsh { margin-inline: 0; }
  .qk-ticket > .qk-link { text-align: start; place-content: center start; }
  .qk-ticket .qk-summary div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 16px; align-items: baseline; padding: 10px 0; border-block-end: 1px dashed color-mix(in oklab, var(--qk-muted) 35%, transparent); }
  .qk-ticket .qk-summary div:last-child { border-block-end: 0; }
  .qk-ticket .qk-summary dt { font-size: 11px; line-height: 15px; letter-spacing: 0.06em; }
  .qk-ticket .qk-summary dd { font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
}
@container qk (max-width: 719px) {
  .qk-ticket { gap: 14px; padding: 48px 18px 56px; }
  .qk-ticket .qk-summary { padding: 0; }
  .qk-ticket .qk-summary div { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr); column-gap: 12px; align-items: baseline; padding: 9px 0; border-block-end: 1px dashed color-mix(in oklab, var(--qk-muted) 35%, transparent); }
  .qk-ticket .qk-summary div:last-child { border-block-end: 0; }
  .qk-ticket .qk-summary dt { font-size: 10.5px; line-height: 14px; letter-spacing: 0.05em; }
  .qk-ticket .qk-summary dd { font-size: 14px; line-height: 19px; overflow-wrap: anywhere; }
  .qk-ticket > .qk-cta { position: sticky; inset-block-end: 12px; z-index: 3; }
}
/* Modo claro = los mismos colores de cada vertical que en oscuro (Obed): sin versiones «oscurecidas». */

/* Ficha (PDP) en escritorio (30-sep): la foto respeta su proporción original (las de asistencias son 16:9; antes se recortaba a casi cuadrada
   y se veía el 40 % de la escena) y ocupa la columna ancha; la compra queda a la derecha. «Qué incluye» usa el degradado del botón. */
.qk.qk .qk-pdp-check { background: linear-gradient(90deg, #e6c023 0%, #eeae27 100%); color: #fff; }
@container qk (min-width: 960px) {
  .qk-step:has(> .qk-pdp) { grid-template-columns: minmax(0, 1.9fr) minmax(360px, 1fr); column-gap: 48px; }
  .qk-step:has(> .qk-pdp) .qk-pdp-cover .qk-pdp-hero:is(img) { aspect-ratio: auto; inline-size: 100%; block-size: auto; max-block-size: calc(100vh - 170px); max-block-size: calc(100svh - 170px); object-fit: cover; object-position: 50% 30%; }
}
@container qk (min-width: 1536px) {
  .qk-shell:not(.qk-shell--lobby) { max-inline-size: min(1480px, 100%); }
  .qk-step:has(> .qk-bubble) { grid-template-columns: 400px minmax(0, 620px); justify-content: center; }
  .qk-shell:not(:has(.qk-answers)) .qk-step:is(:has(> .qk-bubble), .qk-step--loading) { max-inline-size: 1068px; }
}

/* ── Una cosa a la vez (30-sep, Obed: sin campos en dos columnas; pensado para ADHD: poca carga visual, objetivos grandes, ritmo parejo) ── */
/* Opciones de un toque: en dos columnas solo si son exactamente dos (Sí/No, Para mí/Para alguien más); tres o más van en una sola columna. */
@container qk (min-width: 960px) {
  .qk-step:has(> .qk-bubble) .qk-choice:not(.qk-choice--grid):has(> :nth-child(3)) { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
/* Campos: una columna, más aire y objetivos de 56 px; la etiqueta es la pregunta y se lee primero. */
.qk-step:has(> .qk-bubble) .qk-card { gap: 22px; }
.qk-step:has(> .qk-bubble) .qk-field { gap: 8px; }
.qk-step:has(> .qk-bubble) .qk-label { font-size: 15px; line-height: 21px; }
.qk-step:has(> .qk-bubble) .qk-input:not(.qk-textarea):not([type="search"]) { min-block-size: 56px; block-size: 56px; font-size: 17px; }
/* «Tus respuestas» se vuelve un resumen discreto: sin tarjeta, en segundo plano (el ojo se queda en la pregunta). */
@container qk (min-width: 960px) {
  .qk-shell:has(.qk-answers) > .qk-answers { background: none !important; box-shadow: none; border-color: transparent; opacity: 0.78; transition: opacity 200ms var(--qk-ease); }
  .qk-shell:has(.qk-answers) > .qk-answers:hover, .qk-shell:has(.qk-answers) > .qk-answers:focus-within { opacity: 1; }
  .qk-answers summary { border-block-end-color: var(--qk-line); font-size: 13px; color: var(--qk-muted); }
}

/* Halo neutro: la luz que sigue al cursor ya no es dorada sobre íconos rosas. */
.qk { --qk-spot: rgb(255 255 255 / 0.07); }
.qk[data-theme="light"], .qk.qk--light { --qk-spot: rgb(0 0 0 / 0.05); }

/* Alertas (30-sep): con la pantalla pintada son un aviso fijo abajo, visible con cualquier scroll; en móvil queda sobre la barra del botón. */
.qk > .qk-alert { position: sticky; inset-block-end: calc(16px + var(--qk-safe, 0px)); z-index: 60; inline-size: min(560px, calc(100% - 32px)); margin: 0 auto; padding: 16px 18px; background: var(--qk-card); border-radius: 18px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.28), inset 0 0 0 1px var(--qk-border); animation: qk-toast-in 320ms var(--qk-hidraulico) both; }
@keyframes qk-toast-in { from { opacity: 0; translate: 0 16px; } }
.qk-alert-actions .qk-secondary { inline-size: auto; min-block-size: 44px; padding: 10px 16px; }
.qk-alert-actions .qk-link { min-block-size: 44px; }
@media (max-width: 640px) { .qk > .qk-alert { position: fixed; inset-inline: 12px; inline-size: auto; inset-block-end: calc(104px + var(--qk-safe, 0px)); } }
@media (prefers-reduced-motion: reduce) { .qk > .qk-alert { animation: none; } }

/* ── Ultra-taste (30-sep): tipografía, selección, scroll ───────────────────────────────────────────────────────────────────────── */
/* Montserrat Light (300): la variable del sitio se declara 400–700, así que el ligero no existía. Mismo archivo, rango 100–399 solo aquí. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 399; font-display: swap; src: url('/hubfs/raw_assets/public/quantum_kernel_fonts/montserrat-latin-var.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Contraste por peso: titulares y etiquetas en semibold 600, texto corrido y secundarios en ligero 300; campos y valores en 400. */
.qk :is(.qk-pdp-title, .qk-bubble-text, .qk-ticket-title, .qk-lobby-title, .qk-thanks, .qk-group-title, .qk-land-memb h2) { font-weight: 600; }
.qk :is(.qk-pdp-lead, .qk-ticket-lead, .qk-land-lead, .qk-support-text, .qk-choice-sub, .qk-plan-meta:not(.qk-plan-meta--save), .qk-pdp-note, .qk-note, .qk-pdp-q p, .qk-pdp-faq p, .qk-row-sub, .qk-hero-txt small, .qk-fare-row dt, .qk-empty p) { font-weight: 300; letter-spacing: 0; }
.qk :is(.qk-label, .qk-choice-text, .qk-plan-name, .qk-support-heading, .qk-summary dt) { font-weight: 600; }
.qk :is(.qk-input, .qk-summary dd, .qk-ticket .qk-summary dd) { font-weight: 400; }
.qk :is(.qk-plan-price strong, .qk-pdp-price, .qk-fare-total strong) { font-variant-numeric: tabular-nums; }
.qk { font-synthesis: none; text-rendering: optimizeLegibility; }

/* Clics y selección: lo que se toca no se selecciona ni abre menú de arrastre; lo que se lee (valores, folio) sí se copia. */
.qk { -webkit-tap-highlight-color: transparent; }
.qk :is(button, summary, .qk-cta, .qk-secondary, .qk-choice-option, .qk-plan, .qk-row, .qk-hero, .qk-tile, .qk-service, .qk-chip, .qk-back, .qk-close, .qk-theme-toggle, .qk-radio) { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.qk :is(img, svg, .qk-scene) { -webkit-user-drag: none; user-select: none; }
.qk :is(.qk-input, .qk-textarea, .qk-summary dd, .qk-ticket-lead, .qk-pdp-price, .qk-pdp-lead) { -webkit-user-select: text; user-select: text; }
.qk ::selection { background: color-mix(in oklab, var(--qk-accent-mid) 30%, transparent); color: inherit; }
.qk :is(.qk-cta, .qk-secondary, .qk-choice-option, .qk-plan, .qk-row, .qk-hero, .qk-tile, .qk-chip):active { transition-duration: var(--qk-press, 140ms); }
.qk :is(.qk-row, .qk-hero, .qk-tile, .qk-service):active { transform: scale(0.98); }
.qk :is(a, button, summary, input, textarea, select):focus:not(:focus-visible) { outline: 0; }

/* Áreas con scroll: delgado, sin salto de ancho al aparecer la barra, sin encadenar el scroll al resto de la página. */
.qk :is(.qk-summary, .qk-choice--grid, .qk-choice--list, .qk-autocomplete-list, .qk-step, .qk-ticket > .qk-summary, .qk-answers, textarea) { scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--qk-text) 24%, transparent) transparent; overscroll-behavior: contain; }
.qk :is(.qk-summary, .qk-choice--grid, .qk-choice--list, .qk-autocomplete-list, .qk-ticket > .qk-summary) { scrollbar-gutter: stable; scroll-padding-block: 12px; }
.qk :is(.qk-step, .qk-form, .qk-card) { scroll-padding-block: 96px; } /* el foco/ancla no queda bajo el encabezado ni la barra del botón */
@media (hover: none) { .qk :is(.qk-summary, .qk-choice--grid, .qk-choice--list, .qk-ticket > .qk-summary) { scrollbar-width: none; } }

/* Escritorio, escenario del trámite (30-sep): la tarjeta izquierda NO cambia de tamaño, no se mueve ni «se refresca» entre pasos.
   Antes: (1) la franja de la escena alternaba 200 ↔ 92 px según el paso tuviera campos de texto (la regla de campos pesaba más que la
   de escritorio) y la ilustración subía y bajaba; (2) cada render re-animaba el globito (entrada de 10 px) y la salida de .qk-main
   (-6 px) arrastraba la escena; (3) la ilustración daba un brinco de 10 px al elegir/continuar; (4) con scrollbar clásico la columna
   se corría ~15 px al aparecer. Aquí todo es constante: 200 px de escena siempre, solo se desvanece el texto. */
@container qk (min-width: 960px) {
  .qk .qk-step:has(> .qk-bubble) > .qk-bubble .qk-scene {
    block-size: 200px;
    -webkit-mask: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    mask: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%), linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
  }
  .qk .qk-step:has(> .qk-bubble) > .qk-bubble .qk-scene :is(svg, canvas) { block-size: 200px !important; }
  /* el escenario es una pieza aparte: la salida del paso no lo sube ni lo funde, y su caja nunca se interpola */
  .qk-step:has(> .qk-bubble) > .qk-bubble { view-transition-name: qk-stage; animation: none; }
  .qk-step .qk-bubble-balloon { animation: none; }
  .qk-step .qk-bubble-text { animation: qk-text-lift 460ms var(--qk-hidraulico) 70ms both; }   /* solo el texto sube 6 px; la tarjeta no se mueve */
}
@keyframes qk-stage-fade { from { opacity: 0; } }
::view-transition-group(qk-stage) { animation-duration: 0s; }
::view-transition-old(qk-stage) { animation: none; }   /* la tarjeta vieja queda debajo y la nueva se funde encima: el fondo nunca parpadea */
::view-transition-new(qk-stage) { animation: qk-stage-fade 180ms ease-out both; }
/* Con scrollbar clásico (Windows, ratón en macOS) el carril va reservado: el contenido no se corre al aparecer */
html:has(.qk-shell) { scrollbar-gutter: stable; }
@media (prefers-reduced-motion: reduce) { .qk-step .qk-bubble-balloon, .qk-step .qk-bubble-text { animation: none !important; } }

/* ── Microinteracciones (30-sep): cada acción responde, apenas se nota, y todo es transform/opacity (cero layout shift).
   Una sola idea: AVANZAR se siente. Barra que destella, texto que se asienta, opción que se confirma con un resorte,
   botón que «se arma» al estar listo, escena que reacciona sin subir ni bajar, respuesta que aterriza en el resumen. ── */
@media (prefers-reduced-motion: no-preference) {
  .qk { --qk-resorte: linear(0, 0.3 5%, 0.74 12%, 1.03 21%, 1.075 27%, 1.05 34%, 1.012 46%, 0.998 60%, 1); }

  /* 1 · La barra de avance deja un destello en la punta cada vez que crece */
  .qk-progress-fill::after {
    content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 56px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.9)); opacity: 0;
    animation: qk-fill-glint 820ms var(--qk-ease) 360ms both;
  }
  @keyframes qk-fill-glint { 0% { opacity: 0; translate: -70% 0; } 35% { opacity: 1; } 100% { opacity: 0; translate: 0 0; } }

  /* 2 · Texto de la pregunta: se asienta (6 px) en vez de aparecer de golpe */
  @keyframes qk-text-lift { from { opacity: 0; translate: 0 6px; } }

  /* 3 · Al regresar, el contenido entra desde arriba: la dirección se siente */
  @keyframes qk-rise-back { from { opacity: 0; transform: translateY(-8px); } }
  .qk-step--backward :is(.qk-bubble-balloon, .qk-bubble-text, .qk-actions, .qk-card > *, .qk-choice > *, .qk-plans > *, .qk-services > *, .qk-periods, .qk-field > *) { animation-name: qk-rise-back !important; }

  /* 4 · Elegir: el punto de la opción aparece con un rebote corto de resorte */
  .qk-choice-option:has(:checked) .qk-radio { animation: qk-punto 420ms var(--qk-resorte) both; }
  @keyframes qk-punto { from { scale: 0.4; } }

  /* 5 · «Continuar» se arma: pendiente = un pelo más chico; al quedar listo regresa a 1 con resorte (solo al cambiar, no al cargar) */
  .qk.qk .qk-actions .qk-cta { transition: color 180ms var(--qk-ease), text-shadow 180ms var(--qk-ease), filter var(--duration-snappy) linear, background var(--duration-snappy) linear, transform 100ms var(--qk-hidraulico), scale 520ms var(--qk-resorte); }
  .qk .qk-actions .qk-cta[data-pending] { scale: 0.985; }

  /* 6 · La escena reacciona al avanzar: la ilustración se inclina hacia adelante (escala, sin subir ni bajar) y pasa un destello.
         Sustituye el brinco de 10 px con squash. */
  @keyframes qk-hero-lean { 0% { transform: none; } 38% { transform: scale(1.04); } 100% { transform: none; } }
  .qk .qk-scene-svg.is-jump [class*="-hero"] { animation: qk-hero-lean 560ms cubic-bezier(0.3, 0.7, 0.3, 1) both !important; }
  .qk-scene:has(.is-jump)::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; translate: -100% 0;
    background: linear-gradient(100deg, transparent 38%, color-mix(in oklab, var(--qk-accent, #fff) 24%, transparent) 50%, transparent 62%);
    animation: qk-scene-glint 900ms var(--qk-ease) both;
  }
  @keyframes qk-scene-glint { to { translate: 100% 0; } }

  /* 7 · La respuesta nueva aterriza en «Tus respuestas»: una orilla de acento que se apaga */
  .qk-answers .qk-summary div:last-child { animation: qk-stagger-in 280ms var(--qk-hidraulico) 160ms both, qk-resp-nueva 1300ms var(--qk-ease) 160ms both; }
  @keyframes qk-resp-nueva { from { box-shadow: inset 2px 0 0 var(--qk-accent, currentColor); } to { box-shadow: inset 2px 0 0 transparent; } }

  /* 8 · Lobby: el toque se siente (las tarjetas ceden al presionar y vuelven con resorte al soltar) */
  .qk .qk-row, .qk .qk-hero, .qk .qk-tile { transition-timing-function: var(--qk-resorte); }
  .qk .qk-row:active, .qk .qk-hero:active { transform: scale(0.972) !important; }

  /* 9 · Campos: la etiqueta del campo con foco toma el acento, sin mover nada */
  .qk .qk-field:focus-within > .qk-label { color: var(--qk-accent-mid, var(--qk-accent)); transition: color 200ms var(--qk-ease); }
}

/* Escritorio: la escena llena el escenario. La ilustración mide 330×131 (relación 2.52) y la franja es de 360×200, así que a ancho
   completo flotaba chica con aire arriba. Al 139.95 % del ancho su alto es exactamente 200 px: el auto/objeto crece ×1.4 y los lados
   de la ciudad (que ya se desvanecen con la máscara) salen del marco. El héroe está en el centro (x=165): sigue centrado. */
@container qk (min-width: 960px) {
  .qk .qk-step:has(> .qk-bubble) > .qk-bubble .qk-scene > :is(svg, canvas) { inline-size: 139.95% !important; inset-inline: -19.97% !important; block-size: 200px !important; }
}

/* ── Feedback inmediato y sutil (1-oct, Alberto) ───────────────────────────────────────────── */
/* Mosaico (Modelo): columnas más anchas y palabras largas que parten en vez de salirse de la ficha. */
.qk-choice--grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 120px), 1fr)); }
.qk-choice--grid .qk-choice-option { min-inline-size: 0; padding-inline: 8px; }
.qk-choice--grid .qk-choice-content { min-inline-size: 0; max-inline-size: 100%; }
.qk-choice--grid .qk-choice-text { min-inline-size: 0; font-size: clamp(12px, 3.4vw, 14px); letter-spacing: 0; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }

/* Flecha de regreso: al tocarla se desliza hacia atrás y suelta un círculo que se desvanece al soltar. */
.qk-back svg { transition: translate 220ms var(--qk-hidraulico); }
.qk-back::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor; opacity: 0; scale: 1.5; pointer-events: none; transition: opacity 380ms var(--qk-ease), scale 380ms var(--qk-hidraulico); }
.qk-back:active svg { translate: -3px 0; }
.qk-back:active::before { opacity: 0.18; scale: 0.9; transition-duration: 60ms; }

/* Optimista: el paso cede al instante (aria-busy se pone en el mismo tap), sin esperar a la red. */
.qk-main[aria-busy="true"]:not(.qk-shell--lobby .qk-main) .qk-step { opacity: 0.55; translate: 0 4px; transition: opacity 160ms var(--qk-ease), translate 160ms var(--qk-hidraulico); }

/* Espera: nada de cursor de reloj ni congelar la vista; el listón del botón ya dice «estoy en eso». */
.qk-main[aria-busy="true"]:not(.qk-shell--lobby .qk-main) { cursor: progress !important; }

/* Con «reducir movimiento» el círculo del botón respira (opacidad/tamaño suaves) en vez de quedarse fijo. */
@media (prefers-reduced-motion: reduce) {
  .qk.qk .qk-cta.is-loading::before { animation: qk-icon-up 1ms both, qk-breathe 1.2s ease-in-out infinite; }
  .qk-main[aria-busy="true"]:not(.qk-shell--lobby .qk-main) .qk-step { transition: none; translate: none; }
}
@keyframes qk-breathe { 50% { opacity: 0.35; scale: 0.8; } }

/* Ayuda por WhatsApp apagada (interruptor «Ayuda por WhatsApp» del módulo): los trámites no la ofrecen y queda el teléfono.
   Los productos del catálogo que se atienden por WhatsApp no cambian. */
.qk[data-wa="0"] :is(.qk-help, .qk-pdp-help, .qk-ticket-support, .qk-ticket a[href^="https://wa.me"], .qk-alert a[href^="https://wa.me"]) { display: none; }

/* Falla (1-oct): alto total. Sin personaje ni formulario detrás y sin scroll: qué pasó, a dónde llamar y reintentar.
   El aviso inferior pasaba inadvertido: quien no lee el globito no se enteraba de que el trámite ya se había detenido. */
:root:has(.qk > .qk-alert) { overflow: hidden; }
.qk:has(> .qk-alert) { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; min-block-size: 100vh; min-block-size: 100dvh; }
.qk:has(> .qk-alert) > .qk-shell, .qk-step:has(> .qk-alert) > :not(.qk-alert), .qk-main:has(> .qk-alert) > :not(.qk-alert) { display: none; }
.qk.qk .qk-alert { position: static; display: grid; justify-items: center; gap: 20px; inline-size: min(400px, calc(100% - 48px)); margin: auto; padding: 32px 0; text-align: center; background: none; box-shadow: none; }
.qk .qk-alert::before { content: ""; inline-size: 56px; aspect-ratio: 1; background: var(--qk-error); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.86 2h8.28L22 7.86v8.28L16.14 22H7.86L2 16.14V7.86z'/%3E%3Cpath d='m15 9-6 6m0-6 6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.qk .qk-alert p { font-size: 20px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; text-wrap: balance; }
.qk .qk-alert-actions { flex-direction: column; align-items: stretch; gap: 8px; inline-size: 100%; margin-block-start: 8px; }
.qk .qk-alert-actions .qk-secondary { inline-size: 100%; min-block-size: 52px; }
/* El teléfono es la acción principal: mismo botón que el resto del trámite. */
.qk .qk-alert-actions [href^="tel:"] { order: -1; display: flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 52px; border-radius: calc(16px * var(--qk-r, 1)); background: var(--qk-cta, linear-gradient(90deg, #e6c023 0%, #eeae27 100%)); color: #fff; opacity: 1; font-size: 17px; font-weight: 600; letter-spacing: 1px; text-decoration: none; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.22) inset; transition: transform 100ms var(--qk-hidraulico); }
.qk .qk-alert-actions [href^="tel:"]::before { content: ""; inline-size: 18px; aspect-ratio: 1; background: currentColor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat; }
.qk .qk-alert-actions [href^="tel:"]:active { transform: scale(0.97); }

/* ═══ Pulido oct-2026 ═══
   Medido con e2e-lobby/fps.py (CPU 4×) y humano.py; cada regla lleva su porqué. */

/* 1 · Barra superior sólida en pasos de formulario (móvil). Tenía blur(14px) permanente sobre un fondo ya 94 % opaco: no se veía y
   costaba repintado en cada cambio de paso. Probado: un vidrio con animation-timeline sobre ::before CRASHEA WebKit (iOS), así que no. */
@media (max-width: 640px) {
  .qk .qk-step:has(> .qk-form, > .qk-card--payment) > .qk-top {
    background: var(--qk-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* 2 · Relato (y cualquier textarea): sin el asa de arrastre de escritorio. No crece solo (field-sizing): el paso tiene alto fijo y un
   campo que crece empuja «Continuar» detrás de «Tus respuestas» (probado); scrolla por dentro. */
.qk-textarea { resize: none; overflow-y: auto; }

/* 3 · Forma al tocar (Material Expressive): el botón se redondea más mientras se presiona y vuelve con el mismo resorte; es transición
   (no keyframes), así que se puede interrumpir a media vuelta sin salto. Las etiquetas se centran por la altura de la letra
   (text-box), no por el interlineado: mejor centrado óptico de MAYÚSCULAS. Los selectores igualan a los del CTA vigente
   (.qk.qk .qk-cta y el del dock) porque ganan por especificidad. */
.qk.qk :is(.qk-cta, .qk-secondary), .qk.qk .qk-actions .qk-cta {
  transition: color 180ms var(--qk-ease), text-shadow 180ms var(--qk-ease), filter var(--duration-snappy) linear,
              background var(--duration-snappy) linear, transform 100ms var(--qk-hidraulico),
              scale 520ms var(--qk-resorte), border-radius 280ms var(--qk-hidraulico);
  text-box: trim-both cap alphabetic;
}
.qk.qk .qk-cta:active { border-radius: calc(24px * var(--qk-r, 1)); }
.qk.qk .qk-secondary:active { border-radius: calc(var(--radius-squircle-sm, 16px) * 1.5); }

/* 4 · Márgenes laterales seguros (celular en horizontal con muesca): el contenido no se pega a la muesca. */
@media (orientation: landscape) and (max-height: 520px) {
  .qk { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
}
@media (prefers-reduced-motion: reduce) {
  .qk.qk :is(.qk-cta, .qk-secondary), .qk.qk .qk-actions .qk-cta { transition-property: color, text-shadow, filter, background, transform, scale; }
  .qk.qk .qk-cta:active { border-radius: calc(16px * var(--qk-r, 1)); }
  .qk.qk .qk-secondary:active { border-radius: var(--radius-squircle-sm, 16px); }
}

/* 5 · /asistencias (data-solo, lo pone module.html): la página es solo el mosaico de lo que se pide aquí mismo. Sin título del catálogo,
   buscador, destacados, categorías, «Retoma» ni cuenta: nada que lleve a otro producto o al lobby completo. */
.qk[data-solo] :is(.qk-lobby-title, .qk-search, .qk-heros, .qk-chips, .qk-retoma, .qk-cuenta) { display: none; }
/* Compacto: el mosaico entero cabe en una pantalla de celular (4 filas de 2), así que no hay nada que deslizar hacia el resto de la página. */
.qk[data-solo]:has(.qk-shell--lobby) { padding-block-end: 24px; }
.qk[data-solo] .qk-lobby { gap: 14px; }
.qk[data-solo] .qk-lobby-brand { margin-block-end: 0; }
.qk[data-solo] .qk-lobby .qk-row { min-block-size: 0; padding-block: 12px; }

/* 6 · Fecha (iOS la deja como una barra vacía sin pista): ícono de calendario a la derecha; el gris medio se lee en claro y en oscuro. */
.qk-input[type="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  padding-inline-end: 16px;
}
/* Chrome/Edge pintan su propio ícono: queda invisible justo encima del nuestro (sigue abriendo el calendario al tocarlo). */
.qk-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; }
.qk-input[data-kind="date"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 20px;
  padding-inline-end: 44px;
  font-variant-numeric: tabular-nums;
}

/* 7 · Horarios: los dígitos de ancho fijo hacen que todos los botones partan en el mismo punto («11:00 a 12:00» cabía en una línea y
   los demás en dos), y nueve horarios van en 3 × 3 en vez de 4 + 4 + 1 huérfano. */
.qk-choice--grid .qk-choice-text { font-variant-numeric: tabular-nums; }
.qk-choice--grid:has(> :nth-child(9):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* «Tus respuestas» y las sugerencias de dirección también responden al toque (el resto de lo tocable ya lo hace). */
.qk-answers summary { transition: opacity 120ms var(--qk-ease); }
.qk-answers summary:active { opacity: 0.7; }
.qk-autocomplete-item:active { background: color-mix(in oklab, var(--qk-accent) 14%, transparent); }

/* ═══ Movimiento sin freno (5-oct) ═══
   Pedido: «que el usuario no sienta que lo detenemos a cada rato», salida y entrada sincronizadas, esperas sutiles, a prueba de balas.
   Medido en el sitio vivo cuadro por cuadro: al tocar, el paso ENTERO bajaba a 55 % y un cuadro antes de salir volvía a 100 %
   (parpadeo); la columna de respuestas quedaba vacía ~400 ms por un «tiempo de lectura» fijo; encabezado, barra y texto del asesor
   salían dobles (viejo y nuevo encimados). Todo aquí es transform/opacity y no agrega una sola espera. */

/* 1 · Sin tiempo muerto: las respuestas entran en cuanto el asesor empieza a hablar (antes 520–820 ms después), con cascada más corta.
       El orden se conserva (pregunta → respuestas → botón); lo que se quita es el hueco. */
.qk-step { --qk-read: 110ms; }
.qk-step:has(.qk-bubble-kicker) { --qk-read: 170ms; }
.qk-step:not(:has(.qk-bubble-text)) { --qk-read: 40ms; }
.qk-step :is(.qk-card > .qk-field:not(:has(.qk-choice)), .qk-field:has(.qk-choice) > :not(.qk-choice, .qk-error),
  .qk-choice > .qk-choice-option, .qk-plans > .qk-plan, .qk-periods, .qk-services > .qk-service, .qk-intro, .qk-form > .qk-note, .qk-wallet) {
  animation-duration: 300ms; animation-delay: calc(var(--qk-read) + var(--qk-i, 0) * 28ms);
}
.qk-step .qk-actions { animation-duration: 300ms; animation-delay: calc(var(--qk-read) + 150ms); }

/* 2 · Tocar no apaga la pantalla. El control tocado ya dice «estoy en eso» (hilo amarillo en su orilla) y la pantalla sigue legible.
       Solo si la respuesta tarda (> 0.4 s) lo no elegido cede; cuelga de .is-loading, que vive hasta que la pantalla se reemplaza:
       así la salida arranca desde ese estado y no hay parpadeo a 100 % (aria-busy se quita un cuadro antes de la captura). */
.qk-main[aria-busy="true"]:not(.qk-shell--lobby .qk-main) .qk-step { opacity: 1; translate: none; transition: none; }
.qk-choice:has(> .is-loading) > .qk-choice-option:not(.is-loading),
.qk-step:has(> .qk-actions .qk-cta.is-loading) > .qk-form { opacity: 0.42; transition: opacity 320ms var(--qk-ease) 420ms; }
/* …y la barra de avance «piensa»: una luz la recorre mientras llega la respuesta (tras 0.3 s; un turno rápido nunca la ve). */
.qk-progress-track { position: relative; }
.qk-main[aria-busy="true"] .qk-progress-track::after {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 36%; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--qk-accent-mid, currentColor) 55%, #fff), transparent);
  animation: qk-cometa 1150ms cubic-bezier(0.4, 0, 0.6, 1) 300ms infinite;
}
@keyframes qk-cometa { from { opacity: 0.9; translate: -100% 0; } to { opacity: 0.9; translate: 280% 0; } }
@media (prefers-reduced-motion: reduce) {
  .qk-main[aria-busy="true"] .qk-progress-track::after { inline-size: 100%; animation: qk-loading-pulse 1.2s ease-in-out 300ms infinite alternate; }
}

/* 3 · Salida y entrada sincronizadas (lo que en React haría AnimatePresence): lo que NO cambia entre pasos no participa en la salida.
       Encabezado y barra son una pieza aparte que se queda quieta (antes se veían dobles, corridos 6 px, durante la salida)… */
.qk-step:has(> .qk-bubble) > .qk-top { view-transition-name: qk-top; }
::view-transition-group(qk-top) { animation-duration: 0s; }
::view-transition-old(qk-top) { display: none; }
::view-transition-new(qk-top) { animation: none; }
/* …el texto del asesor (escritorio) se releva: el viejo se va en 100 ms y entonces entra el nuevo, nunca los dos a la vez… */
@container qk (min-width: 960px) {
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-content { view-transition-name: qk-say; }
  .qk-step--backward .qk-bubble-text { animation-delay: 90ms !important; }   /* al regresar también espera su turno (entraba en 0 ms, encima del viejo) */
}
::view-transition-group(qk-say) { animation-duration: 0s; }
::view-transition-old(qk-say) { animation: qk-fuera 100ms linear both; }
::view-transition-new(qk-say) { animation: none; }
@keyframes qk-fuera { to { opacity: 0; } }
/* …la dirección se siente en los dos sentidos: al regresar lo viejo sale hacia abajo (lo nuevo ya entraba desde arriba)… */
:root:has(.qk-step--backward)::view-transition-old(qk-main) { animation-name: qk-salida-atras; }
@keyframes qk-salida-atras { to { opacity: 0; transform: translateY(6px); } }
/* …y «Tus respuestas» no vuelve a entrar completo en cada paso: solo aterriza el renglón nuevo. */
.qk-answers .qk-summary div:not(:last-child) { animation: none; }

/* 4 · La voz del asesor: la pregunta se descubre en el sentido de la lectura (una máscara que barre) en vez de aparecer pareja.
       La máscara vive dentro de los keyframes y el relleno es «backwards»: en reposo el texto no lleva nada encima. Sin var() en la
       máscara (probado: un degradado con una propiedad animada dentro de keyframes no se actualiza y el texto salía de golpe al final):
       el degradado es fijo, tres veces más ancho que el texto, y lo que se mueve es su posición. Al regresar no se usa. */
@media (prefers-reduced-motion: no-preference) {
  .qk-step:not(.qk-step--backward, .qk-step--same) .qk-bubble-text { animation: qk-voz 440ms cubic-bezier(0.3, 0.1, 0.2, 1) 90ms backwards; }
  @keyframes qk-voz {
    from {
      translate: 0 4px;
      -webkit-mask: linear-gradient(100deg, #000 42%, transparent 58%) 100% 0 / 300% 100% no-repeat;
      mask: linear-gradient(100deg, #000 42%, transparent 58%) 100% 0 / 300% 100% no-repeat;
    }
    to {
      translate: 0 0;
      -webkit-mask: linear-gradient(100deg, #000 42%, transparent 58%) 0% 0 / 300% 100% no-repeat;
      mask: linear-gradient(100deg, #000 42%, transparent 58%) 0% 0 / 300% 100% no-repeat;
    }
  }
}

/* 5 · Esqueletos: el brillo se ve en claro y en oscuro (era blanco al 7 %: invisible sobre blanco), barre parejo (no frena en cada
       vuelta) y no parpadea en cargas rápidas (entra tras 140 ms). */
.qk-skeleton::after { background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--qk-text) 7%, transparent) 50%, transparent); animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1); }
.qk-step--loading > .qk-skeleton { animation: qk-stage-fade 240ms linear 140ms both; }
.qk-step--loading > .qk-skeleton + .qk-skeleton { animation-delay: 200ms; }

/* 6 · Pintura (fx.js): al elegir color una gota sale de la muestra y la pintura nueva corre de la trompa a la cola. La máscara es la
       carrocería misma (clipPath) y lo que se mueve es transform. Sin fx.js o con movimiento reducido el color cambia como siempre. */
.qk-gota { position: fixed; z-index: 2147483000; margin: 0; border-radius: 50%; pointer-events: none; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.14), 0 2px 6px rgb(0 0 0 / 0.18); }
.qk-scene-svg .qk-coat { stroke: none; }
.qk-scene-svg .qk-coat-luz { fill: #fff; opacity: 0.5; }

/* 7 · Guiños (fx.js): detalles que solo ve quien se fija. Negro enciende los faros, rojo deja estelas, rosa suelta un corazón y
       dorado se lustra; todos finitos (pasan dos o tres veces y se quedan quietos). Tocar la ilustración la hace brincar; a la quinta
       seguida, una pirueta. Tocar al asesor: asiente. Nada de esto cambia datos ni estorba el trámite. */
.qk-scene-svg .qk-guino { opacity: 0; fill: none; stroke-width: 1.3; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .qk[style*="--qk-car"] .qk-scene-svg[data-car="negro"] .qk-guino--faros { animation: qk-faros 720ms linear 620ms both; }
  @keyframes qk-faros { 0% { opacity: 0; } 14% { opacity: 0.9; } 26% { opacity: 0.15; } 40%, 100% { opacity: 0.85; } }
  .qk[style*="--qk-car"] .qk-scene-svg[data-car="rojo"] .qk-guino--veloz { animation: qk-veloz 640ms cubic-bezier(0.3, 0, 0.6, 1) 700ms 3 both; }
  .qk-scene-svg .qk-guino--veloz + .qk-guino--veloz { animation-delay: 790ms !important; }
  .qk-scene-svg .qk-guino--veloz + .qk-guino--veloz + .qk-guino--veloz { animation-delay: 880ms !important; }
  @keyframes qk-veloz { 0% { opacity: 0; translate: 7px 0; } 30% { opacity: 0.9; } 100% { opacity: 0; translate: -9px 0; } }
  .qk[style*="--qk-car"] .qk-scene-svg[data-car="rosa"] .qk-guino--amor { fill: var(--qk-car); stroke: none; transform-box: fill-box; transform-origin: 50% 100%; animation: qk-amor 1500ms cubic-bezier(0.3, 0.6, 0.4, 1) 760ms 2 both; }
  @keyframes qk-amor { 0% { opacity: 0; transform: translateY(2px) scale(0.3); } 22% { opacity: 1; transform: translateY(-3px) scale(1); } 100% { opacity: 0; transform: translateY(-15px) scale(0.9); } }
  .qk[style*="--qk-car"] .qk-scene-svg[data-car="dorado"] .qk-guino--lustre { fill: #fff; stroke: none; animation: qk-lustre 1100ms cubic-bezier(0.4, 0, 0.6, 1) 900ms 2 both; }
  @keyframes qk-lustre { 0% { opacity: 0; translate: 0 0; } 15%, 85% { opacity: 0.45; } 100% { opacity: 0; translate: var(--qk-largo, 100px) 0; } }

  @keyframes qk-brinco {
    0% { transform: none; animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
    14% { transform: scale(1.06, 0.9); animation-timing-function: cubic-bezier(0.2, 0.7, 0.35, 1); }
    46% { transform: translateY(-9px) scale(0.97, 1.04); animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.35); }
    76% { transform: scale(1.05, 0.93); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
    100% { transform: none; }
  }
  .qk .qk-scene-svg.is-poke [class$="-hero"] { animation: qk-brinco 620ms both !important; }
  @keyframes qk-pirueta {
    0% { transform: translateY(0) rotate(0deg) scale(1, 1); animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1); }
    12% { transform: translateY(2px) rotate(0deg) scale(1.06, 0.9); animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
    50% { transform: translateY(-24px) rotate(-190deg) scale(1, 1); animation-timing-function: cubic-bezier(0.5, 0, 0.8, 0.5); }
    84% { transform: translateY(1px) rotate(-360deg) scale(1.05, 0.93); animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1); }
    100% { transform: translateY(0) rotate(-360deg) scale(1, 1); }
  }
  .qk .qk-scene-svg.is-flip [class$="-hero"] { transform-box: fill-box; transform-origin: 50% 55%; animation: qk-pirueta 940ms both !important; }

  .qk-avatar.is-hola img { animation: qk-hola 640ms var(--qk-hidraulico) both; }
  @keyframes qk-hola { 30% { rotate: -9deg; scale: 1.06; } 64% { rotate: 6deg; scale: 1.02; } }
  .qk-avatar.is-hola::after { animation: qk-ping 760ms var(--qk-ease) both; }
  @keyframes qk-ping { from { box-shadow: 0 0 0 0 rgb(62 207 110 / 0.55); } to { box-shadow: 0 0 0 9px rgb(62 207 110 / 0); } }
}

/* 8 · El listón amarillo nunca flota solo (Obed 5-oct: «¿qué hace ahí flotando sin contexto? debería envolver algo»). En la espera
       larga el hilo recorre la orilla de lo que se está preparando (la primera tarjeta), igual que en el botón y en la opción tocados;
       en la liga de pago queda solo la vuelta al botón de pagar. Los anfitriones sueltos se ocultan: sin caja, woowsh.js ni se anima. */
.qk-step--loading > .qk-woowsh, .qk-ticket .qk-woowsh { display: none; }
.qk-step--loading > .qk-woowsh + .qk-skeleton::before {
  content: ''; position: absolute; inset: 0; z-index: 1; padding: 2px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--qk-ww-a), transparent 0 50%, var(--qk-ww-low) 66%, var(--qk-ww-body) 80%, var(--qk-ww-top) 88%, var(--qk-ww-sheen) 92%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: qk-ww-run 1.6s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .qk-step--loading > .qk-woowsh + .qk-skeleton::before { animation: none; } }

/* ── Cotización inteligente (6-oct) ─────────────────────────────────────────────────────────────────────────────────────────────
   Autos pregunta «¿qué te importa más?» mientras las aseguradoras cotizan en segundo plano; el motor ordena las ofertas y manda
   sus sellos (`fields.<cards>.sello`). Aquí solo se pinta: el orden, la recomendación y los textos son del motor. */
.qk {
  --qk-i-precio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.6 2.6A2 2 0 0 0 11.2 2H4a2 2 0 0 0-2 2v7.2a2 2 0 0 0 .6 1.4l8.7 8.7a2.4 2.4 0 0 0 3.4 0l6.6-6.6a2.4 2.4 0 0 0 0-3.4z'/%3E%3Ccircle cx='7.5' cy='7.5' r='.6' fill='%23000'/%3E%3C/svg%3E");
  --qk-i-equilibrio: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 16 3-8 3 8c-.9.6-1.900 1-3 1s-2.100-.400-3-1M2 16l3-8 3 8c-.9.6-1.900 1-3 1s-2.100-.400-3-1M7 21h10M12 3v18M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2'/%3E%3C/svg%3E");
  --qk-i-proteccion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.500 7.500-7.700 9a1 1 0 0 1-.6 0C7.500 20.500 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.500-1.200 6.200-2.700a1.200 1.200 0 0 1 1.600 0C14.500 3.800 16.500 5 19 5a1 1 0 0 1 1 1zM9 12l2 2 4-4'/%3E%3C/svg%3E");
}
/* 1 · La pregunta: cada opción con su ícono (el valor es la clave que manda el motor). */
.qk-choice-option:has(> input[name="prioridad"]) .qk-choice-content::before {
  content: ''; flex: none; inline-size: 24px; block-size: 24px; background: var(--qk-accent-mid); opacity: 0.9;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
}
.qk-choice-option:has(> input[value="precio"]) { --i: var(--qk-i-precio); }
.qk-choice-option:has(> input[value="equilibrio"]) { --i: var(--qk-i-equilibrio); }
.qk-choice-option:has(> input[value="proteccion"]) { --i: var(--qk-i-proteccion); }

/* 2 · Las ofertas ordenadas: las tres primeras llevan su lugar sobre el logo (oro, plata, bronce: los colores de las medallas de los
       paquetes); la primera, además, el filo del acento, porque es la recomendada. Los demás sellos son discretos, para comparar. */
.qk-plans:has(.qk-sello) { counter-reset: qk-lugar; }
.qk-plans:has(.qk-sello) > .qk-plan { counter-increment: qk-lugar; }
.qk-plans:has(.qk-sello) > .qk-plan:nth-of-type(-n+3) .qk-plan-medal { position: relative; }
.qk-plans:has(.qk-sello) > .qk-plan:nth-of-type(-n+3) .qk-plan-medal::after {
  content: counter(qk-lugar); position: absolute; inset-block-end: -7px; inset-inline-end: -7px; display: grid; place-items: center;
  inline-size: 22px; block-size: 22px; border-radius: 50%; border: 2px solid var(--qk-card); background: var(--m, #f5d03a); color: #141519;
  font-size: 11px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums;
}
.qk-plans:has(.qk-sello) > .qk-plan:nth-of-type(2) { --m: #c9ced6; }
.qk-plans:has(.qk-sello) > .qk-plan:nth-of-type(3) { --m: #d89a6a; }
.qk-plans:has(.qk-sello) > .qk-plan:first-of-type:not(:has(:checked)) {
  background: linear-gradient(var(--qk-card), var(--qk-card)) padding-box, var(--qk-accent-gradient) border-box;
}
@media (hover: hover) {
  .qk-plans:has(.qk-sello) > .qk-plan:first-of-type:not(:has(:checked)):hover { background: linear-gradient(var(--qk-card-hover), var(--qk-card-hover)) padding-box, var(--qk-accent-gradient) border-box; }
}
.qk-plan:not(:first-of-type) > .qk-sello { background: color-mix(in oklab, var(--qk-text) 8%, transparent); color: var(--qk-text); }

/* Logo de la aseguradora completo en escritorio (el chip de 48 px de las medallas lo recortaba). */
.qk-step:has(> .qk-bubble) .qk-plans:has(.qk-sello) > .qk-plan .qk-plan-medal { inline-size: 76px; block-size: 46px; background-size: 58px 32px; }

/* 3 · La espera se juega (fx.js §4), como el dinosaurio del navegador: vienen conos y un toque los brinca. Sin instrucciones fijas (el
       vehículo brinca solo los dos primeros y así enseña el toque) y sin castigo: si pega, el cono sale volando y la racha vuelve a cero.
       Solo aparece si la espera pasa de 3 s. Lo único que se agrega a la pantalla es la ficha con la racha, bajo el mensaje. */
.qk[data-juego] .qk-step--loading:has(> .qk-woowsh):has(.is-juego) { cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; }
.qk-juego-cuenta {
  display: flex; align-items: baseline; gap: 7px; inline-size: fit-content; margin-block-start: 14px; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in oklab, var(--qk-text) 8%, transparent); color: var(--qk-text); font-size: 13px; line-height: 18px; letter-spacing: 0;
  animation: qk-stage-fade 240ms linear both;
}
.qk-juego-cuenta > b { min-inline-size: 1ch; font-weight: 600; font-variant-numeric: tabular-nums; }
.qk-juego-cuenta > span { color: var(--qk-muted); font-weight: 400; }
.qk-juego-cuenta.is-mas > b { animation: qk-juego-mas 260ms cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes qk-juego-mas { 40% { transform: translateY(-3px) scale(1.25); } }
.qk-scene-svg.is-juego :is([class$="-hero"], [class$="-kh"], [class$="-ko"], mask[id$="-ko"] > g, mask[id$="-bk"] > g) { transform-box: fill-box; transform-origin: 50% 100%; }
.qk-juego { pointer-events: none; }
.qk-juego-cono { stroke: var(--qk-text); stroke-width: 1.7; fill: none; opacity: 0.9; transform-box: fill-box; transform-origin: 50% 100%; }
.qk-juego-cono.is-pum { animation: qk-juego-pum 420ms cubic-bezier(0.2, 0.6, 0.4, 1) both; }
@keyframes qk-juego-pum { to { transform: translate(26px, -22px) rotate(70deg); opacity: 0; } }

/* 4 · «layoutId» de la oferta elegida: la tarjeta crece hasta volverse el ticket (fx.js §5 les pone el mismo nombre solo en ese relevo).
       El ticket no se «imprime» esa vez: ya llegó, y su contenido entra en cuanto la tarjeta termina de crecer. */
.qk-ticket.is-elegida { view-transition-name: qk-elegida; animation: none; }
.qk-step:has(> .qk-ticket.is-elegida)::before { display: none; }
.qk-ticket.is-elegida > * { animation-delay: calc(220ms + var(--qk-t, 0) * 45ms) !important; }
.qk-ticket.is-elegida .qk-summary div { animation-delay: calc(300ms + var(--qk-r, 0) * 35ms); }
::view-transition-group(qk-elegida) { animation-duration: 440ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); overflow: clip; border-radius: 22px; }
::view-transition-old(qk-elegida), ::view-transition-new(qk-elegida) { inline-size: 100%; block-size: 100%; object-fit: none; object-position: top left; }
::view-transition-old(qk-elegida) { animation: qk-fuera 140ms linear both; }
::view-transition-new(qk-elegida) { animation: qk-stage-fade 260ms linear 120ms both; }
/* El panel del asesor no existe en el ticket: sin esto su foto vieja se queda encima los 440 ms que dura el relevo. */
:root:has(.qk-ticket.is-elegida)::view-transition-old(qk-stage), :root:has(.qk-ticket.is-elegida)::view-transition-old(qk-scene) { animation: qk-fuera 110ms linear both; }

/* 5 · Comparar paquetes (todas las líneas: autos, motos, mascotas, accidentes…). Cuando el motor dice qué incluye cada opción
       (`incluye`), las tarjetas se vuelven columnas de una misma tabla en un carrusel horizontal: mismos renglones, misma altura,
       deslizar para comparar (scroll nativo con imán: el gesto es del navegador, no de un script). En escritorio caben varias a la
       vez y pasar el cursor por un renglón lo marca en todas. fx.js §6 parte cada renglón en concepto + valor; sin él, se lee igual. */
.qk-plans:has(.qk-plan-inc) {
  display: flex; align-items: stretch; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  margin-inline: -16px; padding: 6px 16px 16px; scroll-padding-inline: 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.qk-plans:has(.qk-plan-inc)::-webkit-scrollbar { display: none; }
.qk-plans:has(.qk-plan-inc).is-arrastre { scroll-snap-type: none; cursor: grabbing; }
.qk-plans:has(.qk-plan-inc) > .qk-plan {
  flex: 0 0 min(76%, 272px); scroll-snap-align: start; grid-template-columns: auto minmax(0, 1fr) !important; grid-auto-flow: row; align-content: start !important; justify-items: start;
  gap: 12px 12px; min-block-size: 0 !important; padding: 18px 18px 14px !important;
}
.qk-plans:has(.qk-plan-inc) > .qk-plan .qk-plan-price { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 6px; }
.qk-plans:has(.qk-plan-inc) > .qk-plan .qk-plan-price strong { font-size: 26px; line-height: 30px; letter-spacing: -0.03em; }
.qk-plans:has(.qk-plan-inc) > .qk-plan .qk-plan-info { align-self: center; }
/* Franja de arriba igual en todas (con sello o sin él): así los renglones de una tarjeta quedan a la altura de los de la otra. */
.qk-plans:has(.qk-plan-inc) > .qk-plan { padding-block-start: 48px !important; }
.qk-plans:has(.qk-plan-inc) > .qk-plan .qk-plan-badge { inset-block-start: 14px !important; inset-inline: 18px auto !important; border-radius: 999px; padding: 4px 10px; }
.qk-plans:has(.qk-plan-inc) > .qk-plan .qk-plan-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; }
.qk-plans:has(.qk-plan-inc) > .qk-plan .qk-lig { display: block; font-size: 13.5px; }
.qk-plans:has(.qk-plan-inc) > .qk-plan .qk-sep { display: none; }
.qk-plans:has(.qk-plan-inc) .qk-plan-inc { inline-size: 100%; gap: 0; margin-block-start: 2px; font-size: 13px; line-height: 17px; color: var(--qk-text); }
.qk-plans:has(.qk-plan-inc) .qk-plan-inc > span {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); align-content: center; align-items: center; column-gap: 10px; min-block-size: 55px; padding-block: 6px;
  border-block-start: 1px solid var(--qk-line); font-weight: 300;
}
.qk-plans:has(.qk-plan-inc) .qk-plan-inc > span > b { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.qk-plans:has(.qk-plan-inc) .qk-plan-inc > span > i { grid-column: 2; font-style: normal; }
.qk-plans:has(.qk-plan-inc) .qk-plan-inc > span > b { grid-column: 2; }
.qk-plans:has(.qk-plan-inc) .qk-plan-inc > span::before { grid-row: 1 / span 2; }
.qk-plan-inc > span.is-no { color: var(--qk-muted); }
.qk-plan-inc > span.is-no::before { background: none; block-size: 1.5px; inline-size: 10px; margin-inline: 3px; border-radius: 1px; background-color: color-mix(in oklab, var(--qk-muted) 60%, transparent); }
/* Escritorio: comparar pide ancho. En esa pantalla el escenario se vuelve un encabezado (asesor + pregunta), «Tus respuestas» cede su
   columna y el carrusel toma todo: cuatro o cinco columnas a la vista, el resto asoma a la derecha y se arrastra. */
@container qk (min-width: 960px) {
  .qk-shell:has(.qk-plan-inc) { grid-template-columns: minmax(0, 1fr); }
  .qk-shell:has(.qk-plan-inc) > .qk-answers { display: none; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-bubble {
    grid-row: auto; position: static; flex-direction: row; align-items: center; gap: 18px; min-block-size: 0; block-size: auto; padding: 4px 2px 0 !important; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-bubble > .qk-scene { display: none; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-bubble .qk-bubble-balloon { padding: 0; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > :is(.qk-form, .qk-actions) { grid-column: 1; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-actions { inline-size: min(420px, 100%); justify-self: center; }
  .qk-step:has(> .qk-bubble) .qk-plans:has(.qk-plan-inc) { margin-inline: 0; padding-inline: 2px 48px; scroll-padding-inline: 2px; cursor: grab;
    -webkit-mask: linear-gradient(90deg, #000 calc(100% - 56px), #0000); mask: linear-gradient(90deg, #000 calc(100% - 56px), #0000); }
  /* Pocas opciones (dos o tres paquetes): columnas más anchas y al centro. Muchas (aseguradoras × paquetes): angostas, para que quepan más. */
  .qk-step:has(> .qk-bubble) .qk-plans:has(.qk-plan-inc) { justify-content: safe center; }
  .qk-step:has(> .qk-bubble) .qk-plans:has(.qk-plan-inc) > .qk-plan { flex-basis: 312px; }
  .qk-step:has(> .qk-bubble) .qk-plans:has(.qk-plan-inc):has(> .qk-plan:nth-of-type(7)) { justify-content: flex-start; }
  .qk-step:has(> .qk-bubble) .qk-plans:has(.qk-plan-inc):has(> .qk-plan:nth-of-type(7)) > .qk-plan { flex-basis: 232px; }
}
@media (hover: hover) {
  .qk-plans:has(.qk-plan-inc > span:nth-child(1):hover) .qk-plan-inc > span:nth-child(1), .qk-plans:has(.qk-plan-inc > span:nth-child(2):hover) .qk-plan-inc > span:nth-child(2),
  .qk-plans:has(.qk-plan-inc > span:nth-child(3):hover) .qk-plan-inc > span:nth-child(3), .qk-plans:has(.qk-plan-inc > span:nth-child(4):hover) .qk-plan-inc > span:nth-child(4),
  .qk-plans:has(.qk-plan-inc > span:nth-child(5):hover) .qk-plan-inc > span:nth-child(5), .qk-plans:has(.qk-plan-inc > span:nth-child(6):hover) .qk-plan-inc > span:nth-child(6) {
    background: color-mix(in oklab, var(--qk-accent-mid) 9%, transparent); box-shadow: 0 0 0 100vmax color-mix(in oklab, var(--qk-accent-mid) 9%, transparent); clip-path: inset(0 -18px);
  }
}

/* 6 · Cifras y pesos (fx.js §6): centavos chicos y ligeros junto al entero firme; «Marca · Paquete» con la marca firme y el paquete
       ligero; en escritorio la pregunta grande va ligera y lo que se toca, firme. Montserrat variable ya trae el 300. */
.qk-cts { font-size: 0.54em; font-weight: 300; letter-spacing: 0; vertical-align: 0.66em; margin-inline-start: 1px; }
.qk-plan-price strong { font-weight: 600; }
.qk-lig { font-weight: 300; }
.qk-choice-sub { font-weight: 300; }
.qk-ticket-lead { font-weight: 300; }
@container qk (min-width: 960px) {
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-text, .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-balloon p { font-weight: 300; letter-spacing: -0.03em; }
}

/* 7 · Un campo opcional no lleva asterisco (número interior, homoclave en la contratación de autos): el motor lo manda `optional`. */
.qk-field:has(> :is(input, .qk-input-wrap input):not([required], [type="radio"], [type="search"])) > .qk-label > span[aria-hidden] { display: none; }

/* ── Todos los anchos (6-oct, 6.ª ronda) ────────────────────────────────────────────────────────────────────────────────────────
   Medido con e2e-lobby/breakpoints.py en 11 tamaños (320 → 2560, horizontal y vertical). Lo que no se veía bien:
   · las consultas de contenedor miden la caja de contenido (viewport − 48 px de padding): el escritorio empezaba en 1072 px, así que un iPad
     horizontal o una ventana de 1024 recibían el celular estirado con «Tus respuestas» al lado. Ahora arrancan en 960 (viewport 1008).
   · celular horizontal (390 px de alto): una sola columna con la escena ocupando media pantalla; ahora escenario a la izquierda, contenido a la derecha. */

/* 1 · Tocar: el área de la cabecera llega a 44 px (la flecha, el sol y la ⓧ medían 40). */
@media (pointer: coarse) { .qk :is(.qk-back, .qk-theme-toggle)::after { inset: -6px; } }

/* 2 · Comparar en celular: la tabla manda. Con alto de sobra la escena se acorta; en pantallas bajas desaparece. */
@container qk (max-width: 959px) {
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-bubble.has-scene { padding-block-end: 64px; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) .qk-scene { block-size: 60px; }
}
@media (max-height: 700px) {
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-bubble.has-scene { padding-block-end: 0; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) .qk-scene { display: none; }
}

/* 3 · Celular horizontal: escenario (asesor + pregunta + ilustración) a la izquierda, lo que se llena a la derecha. */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 600px) {
  .qk-step:has(> .qk-bubble) { grid-template-columns: minmax(210px, 0.62fr) minmax(0, 1.38fr); column-gap: 18px; row-gap: 6px; align-items: start; }
  .qk-step:has(> .qk-bubble) > .qk-top { order: -9; grid-column: 1 / -1; grid-row: 1; }
  .qk-step:has(> .qk-bubble) > .qk-bubble {
    order: -8; grid-column: 1; grid-row: 2 / span 14; position: sticky; inset-block-start: 62px; align-self: start; flex-direction: column; align-items: stretch; gap: 8px;
    min-block-size: 0; block-size: calc(100vh - 76px); block-size: calc(100svh - 76px); max-block-size: 300px; padding: 12px 12px 110px; border-radius: 20px calc(44px * var(--qk-r)) 20px 20px; overflow: hidden;
    background: linear-gradient(165deg, var(--qk-accent-soft, transparent), transparent 62%), var(--qk-card);
    box-shadow: inset 0 0 0 1px var(--qk-border);
  }
  .qk-step:has(> .qk-bubble) > .qk-bubble.has-scene { padding-block-end: 110px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-avatar { inline-size: 36px; block-size: 36px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-balloon { flex: none; padding: 10px 14px; border-radius: 16px 16px 16px 5px; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-tail { display: none; }
  .qk-step:has(> .qk-bubble) > .qk-bubble .qk-bubble-text { font-size: 15px; line-height: 21px; }
  .qk-step:has(> .qk-bubble) .qk-scene { inset: auto 0 0; block-size: 104px; }
  .qk-step:has(> .qk-bubble) .qk-scene > svg { block-size: 104px; }
  .qk-step:has(> .qk-bubble) > :not(.qk-top):not(.qk-bubble) { grid-column: 2; }
  /* Comparar: la pregunta queda en una línea arriba y las columnas toman todo el ancho */
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) { grid-template-columns: minmax(0, 1fr); }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-bubble {
    grid-row: auto; position: static; flex-direction: row; align-items: center; gap: 12px; block-size: auto; max-block-size: none; padding: 0 !important; border-radius: 0; background: none; box-shadow: none; overflow: visible;
  }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-bubble > .qk-scene { display: none; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-bubble .qk-bubble-balloon { padding: 0; background: none; box-shadow: none; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > :is(.qk-form, .qk-actions) { grid-column: 1; }
  .qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-actions { inline-size: min(360px, 100%); justify-self: center; }
  .qk-step:has(> .qk-bubble) .qk-plans:has(.qk-plan-inc) > .qk-plan { flex-basis: 236px; }
}
.qk-step:has(> .qk-bubble):has(.qk-plan-inc) > .qk-bubble .qk-bubble-balloon { border: 0; box-shadow: none; outline: 0; }

/* 4 · Pantallas grandes: el diseño se escala entero (tipografía, tarjetas, juego) en vez de dejar una isla pequeña en un mar oscuro. */
@media (min-width: 1800px) and (min-height: 1000px) { .qk { zoom: 1.2; } }
@media (min-width: 2300px) and (min-height: 1300px) { .qk { zoom: 1.5; } }

/* 5 · Lo mejor de cada renglón (fx.js §6): en color, sin leer cifra por cifra. */
.qk-plan-inc > span > b.is-top { color: color-mix(in oklab, var(--qk-accent-mid, #3bd2f0) 78%, var(--qk-text)); }

/* 6 · Flechas del carrusel con mouse (fx.js §8): dos botones sobre los bordes; en táctil no existen (se desliza). */
.qk-flechas { display: none; }
@media (hover: hover) and (min-width: 700px) {
  .qk-step:has(.qk-plans:has(.qk-plan-inc)) { position: relative; }
  .qk-flechas { display: contents; }  /* sin caja propia: los botones se ubican contra el paso entero, no contra una celda de su rejilla */
  .qk-flechas button {
    position: absolute; inset-block-start: var(--qk-fl-y, 50%); translate: 0 -50%; inline-size: 44px; block-size: 44px; border: 0; border-radius: 50%; display: grid; place-items: center; padding: 0; z-index: 4; cursor: pointer;
    background: color-mix(in oklab, var(--qk-card, #2a2a2a) 80%, #fff 8%); color: var(--qk-text); box-shadow: 0 6px 20px rgb(0 0 0 / 0.35), inset 0 0 0 1px var(--qk-border);
    transition: scale 160ms var(--qk-ease), opacity 200ms var(--qk-ease);
  }
  .qk-flechas button svg { inline-size: 20px; block-size: 20px; }
  .qk-flechas button:hover { scale: 1.08; }
  .qk-flechas button:active { scale: 0.94; }
  .qk-flechas button[hidden] { display: grid; opacity: 0; pointer-events: none; }
  .qk-flechas [data-fl="atras"] { inset-inline-start: 6px; }
  .qk-flechas [data-fl="sigue"] { inset-inline-end: 6px; }
}

/* 7 · Alto de pantalla (celular vertical): el espacio que sobra se reparte en aire y tamaño táctil, no se queda como un hueco al final.
       --qk-v vale 0 en una pantalla de 568 de alto y crece hasta 24 px hacia 880; con él crecen la separación entre campos, la altura de
       campos y opciones. Una pantalla de una sola decisión (sin campos que escribir) centra sus opciones en el espacio libre: al alcance del pulgar. */
@media (max-width: 640px) {
  .qk-step { --qk-v: clamp(0px, calc((100svh - 600px) / 12), 24px); }
  .qk-form { gap: calc(16px + var(--qk-v)); }
  .qk-field { gap: calc(6px + var(--qk-v) / 4); }
  .qk-input { min-block-size: calc(50px + var(--qk-v) / 2); block-size: calc(50px + var(--qk-v) / 2); }
  .qk-input:is(textarea) { block-size: auto; }
  .qk-choice { gap: calc(10px + var(--qk-v) / 2); }
  .qk-choice:not(.qk-choice--grid) > .qk-choice-option { min-block-size: calc(52px + var(--qk-v)); }
  .qk-step > .qk-bubble { margin-block: calc(10px + var(--qk-v) / 3) calc(6px + var(--qk-v) / 3); }
  /* Sin min-block-size: 0. Con varias preguntas de opciones (gasolina, grúa) el formulario se encogía al alto libre y
     las preguntas de abajo quedaban fuera de su caja: en blanco y sin poder tocarse (QA 6-oct). Crece, nunca encoge. */
  .qk-step:has(.qk-choice):not(:has(.qk-input, textarea, .qk-plans)) > .qk-form { flex: 1 1 auto; align-content: safe center; padding-block-end: calc(var(--qk-v) * 2); }
}
/* El texto de apoyo de los campos y las insignias no baja de 11 px. */
.qk-plan-badge { font-size: 11px; }
/* Tableta vertical (iPad mini/Air, 744–834 de ancho y más de 1000 de alto): la columna de 560 px se veía como una tira en una pantalla enorme. */
@media (min-width: 641px) and (max-width: 959px) and (min-height: 1000px) { .qk { zoom: 1.2; } }


/* ── Integración (6-oct): dentro de un iframe el módulo no gasta pantalla en márgenes (data-embed lo pone module.js cuando window.self !== window.top).
   El fondo sigue siendo el del módulo (transparente se leería mal sobre cualquier página que no sea del mismo tema); las barras pegadas pasan a
   vidrio para que el contenido se vea pasar por debajo. Nada de esto aplica fuera de un iframe. */
.qk[data-embed] { padding: 0 0 calc(72px + var(--qk-safe, 0px)); }
.qk[data-embed] .qk-shell { max-inline-size: none; }
.qk[data-embed] .qk-top { margin-inline: 0; padding-inline: 16px; background: color-mix(in oklab, var(--qk-bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.qk[data-embed] .qk-actions { margin-inline: 0; padding-inline: 16px; background: color-mix(in oklab, var(--qk-bg) 78%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: none; }
.qk[data-embed] :is(.qk-top, .qk-actions)::before { content: ''; position: absolute; inset-inline: 0; block-size: 1px; background: var(--qk-line); inset-block-start: auto; inset-block-end: 0; }
.qk[data-embed] .qk-actions::before { inset-block-start: 0; inset-block-end: auto; }
@media (max-width: 640px) { .qk[data-embed] .qk-main { padding-inline: 12px; } .qk[data-embed] .qk-actions { padding-inline: 0; } }
@media (min-width: 960px) { .qk[data-embed] .qk-actions::before { display: none; } }


/* ── Selector de pago y precio pegados (6-oct) ──
   El selector (Mensual · Anual / Contado · Mensual) se queda bajo el encabezado al bajar por las tarjetas; su «pastilla» se desliza con el resorte
   del módulo (sin rebote: es movimiento espacial) en vez de pintar el fondo de cada botón. La barra de abajo repite nombre y precio de lo elegido. */
.qk-periods { position: sticky; inset-block-start: calc(var(--qk-top-h, 0px) + 8px); z-index: 2; isolation: isolate; --seg: 0;
  background: color-mix(in oklab, var(--qk-field) 86%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--qk-hair, inset 0 0 0 1px var(--qk-border)); }
.qk-periods:has(.qk-period:nth-child(2)[aria-pressed="true"]) { --seg: 1; }
.qk-periods:has(.qk-period:nth-child(3)[aria-pressed="true"]) { --seg: 2; }
.qk-periods::before { content: ''; position: absolute; z-index: -1; inset-block: 4px; inset-inline-start: 4px; border-radius: inherit; background: var(--qk-accent-soft); box-shadow: var(--qk-hair, inset 0 0 0 1px var(--qk-border));
  inline-size: calc((100% - 8px - 4px * (var(--n, 2) - 1)) / var(--n, 2)); translate: calc(var(--seg) * (100% + 4px)) 0; transition: translate 380ms var(--qk-hidraulico); }
.qk-periods:has(.qk-period:nth-child(3)) { --n: 3; }
.qk-period[aria-pressed="true"] { background: none; }
.qk-pp { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-inline: 4px; font-size: 13px; line-height: 18px; color: var(--qk-muted); }
.qk-pp[hidden] { display: none; }
.qk-pp b { color: var(--qk-text); font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.qk-pp small { margin-inline-start: 2px; font-size: 12px; font-weight: 400; color: var(--qk-muted); }
@media (prefers-reduced-motion: reduce) { .qk-periods::before { transition: none; } }

/* Microinteracciones de ubicación y color: entrada/salida de lista (AnimatePresence), mapa que se abre, pin que se levanta, color que rebota. Solo con movimiento permitido. */
@media (prefers-reduced-motion: no-preference) {
  .qk-autocomplete-list {
    transform-origin: top center;
    transition: opacity 180ms var(--qk-ease), transform 240ms var(--qk-hidraulico), display 240ms;
    transition-behavior: allow-discrete;
  }
  .qk-autocomplete-list.hidden { opacity: 0; transform: translateY(-6px) scale(0.98); pointer-events: none; }
  @starting-style { .qk-autocomplete-list { opacity: 0; transform: translateY(-6px) scale(0.98); } }
  .qk-autocomplete-item:active { transform: scale(0.98); transition-duration: var(--qk-press); }
  .qk-autocomplete-item { transition: background 120ms ease, transform 160ms var(--qk-hidraulico); }

  .qk-map {
    transition: opacity 280ms var(--qk-ease), block-size 360ms var(--qk-hidraulico), min-block-size 360ms var(--qk-hidraulico), margin-block-start 360ms var(--qk-hidraulico), display 360ms;
    transition-behavior: allow-discrete;
  }
  .qk-map[hidden] { opacity: 0; block-size: 0; min-block-size: 0; margin-block-start: 0; }
  @starting-style { .qk-map { opacity: 0; block-size: 0; min-block-size: 0; margin-block-start: 0; } }

  /* mientras se arrastra, el pin se levanta y su sombra se ensancha */
  .qk-map-pin:active .qk-map-pin-svg { transform: translateY(-7px) scale(1.12); }
  .qk-map-pin:active .qk-map-pin-pulse { transform: translateX(-50%) scale(1.8); opacity: 0.35; animation: none; }

  @keyframes qk-swatch-pop { 40% { transform: scale(1.35); } }
  .qk-choice-option:has(:checked) .qk-swatch { animation: qk-swatch-pop 360ms var(--qk-hidraulico); }
}

/* Sin resultados / sin red al buscar dirección: aviso en la misma lista, no seleccionable. */
.qk-autocomplete-empty { padding: 10px 12px; font-size: 13px; color: var(--qk-muted, #94a3b8); list-style: none; }
/* ── Ultra-taste: Animación nativa de <details> y padding ── */
@supports (interpolate-size: allow-keywords) {
  .qk-answers { interpolate-size: allow-keywords; }
  .qk-answers::details-content {
    height: 0;
    overflow: clip;
    transition: height 360ms var(--qk-hidraulico), content-visibility 360ms var(--qk-hidraulico);
    transition-behavior: allow-discrete;
  }
  .qk-answers[open]::details-content {
    height: auto;
  }
}