/* ═══════════════════════════════════════════════════════════════════════════
   Visualizador Kober — capa de UI del flujo por pasos editables (§3.0).
   El motor (catálogo, reglas, apilado de capas) es agnóstico a este CSS.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Botones base ─────────────────────────────────────────────────────────── */
.k-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--k-space-2);
  padding: var(--k-space-3) var(--k-space-4);
  border-radius: var(--k-radius-md);
  font-weight: var(--k-fw-medium); font-size: var(--k-fs-400);
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease),
              transform var(--k-dur-fast) var(--k-ease);
}
.k-btn:active { transform: scale(.985); }
/* CTA primario = AZUL, nunca naranja (naranja sobre blanco reprueba AA, §2.7/RG-10) */
.k-btn--primary { background: var(--k-brand); color: var(--k-brand-ink); flex: 1; }
.k-btn--primary:hover { background: var(--k-brand-tint); }
.k-btn--ghost { background: var(--k-surface); color: var(--k-brand); border: 1px solid var(--k-line); }
.k-btn--ghost:hover { border-color: var(--k-brand); }
.k-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   Selector de distribución ('/cocina' · Escenas.cshtml).
   Movido desde el <style> inline de la página. Usa los tokens de marca de
   tokens.css (--k-brand, --k-accent, --k-ink, --k-ink-muted, --k-surface[-alt]).
   ═══════════════════════════════════════════════════════════════════════════ */
.k-picker,
.k-picker * {
  box-sizing: border-box;
}

.k-picker {
  min-height: 100svh;
  padding: clamp(26px, 3vw, 48px) clamp(18px, 4vw, 68px) clamp(32px, 4vw, 60px);
  color: var(--k-ink);
  background: var(--k-surface-alt);
  font-family: "Roboto", Arial, sans-serif;
}

.k-picker__container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
}

/* Encabezado */
.k-picker__head {
  display: grid;
  width: 100%;
  justify-items: center;
  margin: 0 auto clamp(26px, 3vw, 40px);
  text-align: center;
}

.k-picker__kicker {
  display: inline-block;
  margin: 0 0 14px;
  color: var(--k-brand);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
}

/* La línea se coloca encima para no desplazar visualmente el texto hacia un lado. */
.k-picker__kicker::before {
  display: block;
  width: 34px;
  height: 3px;
  margin: 0 auto 11px;
  background: var(--k-accent);
  border-radius: 999px;
  content: "";
}

.k-picker__title {
  width: 100%;
  max-width: 1200px;
  margin: 0;
  color: var(--k-brand);
  font-size: clamp(2.3rem, 3vw, 3.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-align: center;
  text-wrap: balance;
}

.k-picker__subtitle {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--k-ink-muted);
  font-size: clamp(1rem, 1.1vw, 1.12rem);
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

/* En escritorio, conservamos la pregunta en una línea */
@media (min-width: 900px) {
  .k-picker__title {
    white-space: nowrap;
  }
}

/* Mosaico */
.k-picker__grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
}

/* Tarjeta */
.k-pick-card {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  /* Más panorámica que 16:9 para que dos filas aprovechen mejor la altura del monitor. */
  aspect-ratio: 2 / 1;
  color: var(--k-surface);
  background: var(--k-brand);
  border: 2px solid transparent;
  border-radius: 18px;
  box-shadow: 0 4px 10px rgba(17, 24, 39, 0.08), 0 16px 38px rgba(17, 24, 39, 0.12);
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.k-pick-card__media {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
}

.k-pick-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 450ms ease, filter 220ms ease;
}

/* Gradiente inferior para garantizar que el nombre y el CTA se lean sobre cualquier fotografía. */
.k-pick-card__media::after {
  position: absolute;
  inset: 0;
  background: linear-gradient( 180deg, rgba(0, 36, 60, 0.02) 35%, rgba(0, 36, 60, 0.18) 62%, rgba(0, 24, 40, 0.9) 100% );
  content: "";
  pointer-events: none;
}

.k-pick-card__footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
}

.k-pick-card__name {
  min-width: 0;
  color: var(--k-surface);
  font-size: clamp(1.05rem, 1.3vw, 1.3rem);
  font-weight: 700;
  line-height: 1.25;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.k-pick-card__action {
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 17px;
  color: var(--k-brand);
  background: rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(8px);
  transition: color 220ms ease, background-color 220ms ease, transform 220ms ease;
}

.k-pick-card__arrow {
  display: inline-block;
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 220ms ease;
}

/* Interacción con mouse */
@media (hover: hover) and (pointer: fine) {
  .k-pick-card:hover {
    border-color: var(--k-accent);
    box-shadow: 0 8px 18px rgba(17, 24, 39, 0.12), 0 24px 48px rgba(17, 24, 39, 0.18);
    transform: translateY(-5px);
  }

  .k-pick-card:hover .k-pick-card__image {
    transform: scale(1.035);
  }

  .k-pick-card:hover .k-pick-card__action {
    color: var(--k-surface);
    background: var(--k-accent);
    transform: translateX(-2px);
  }

  .k-pick-card:hover .k-pick-card__arrow {
    transform: translateX(4px);
  }
}

/* Navegación con teclado */
.k-pick-card:focus-visible {
  border-color: var(--k-accent);
  outline: 3px solid rgba(242, 92, 5, 0.38);
  outline-offset: 4px;
  box-shadow: 0 0 0 4px var(--k-surface-alt), 0 22px 46px rgba(17, 24, 39, 0.18);
}

.k-pick-card:focus-visible .k-pick-card__action {
  color: var(--k-surface);
  background: var(--k-accent);
}

/* Respuesta al presionar */
.k-pick-card:active {
  transform: translateY(-1px) scale(0.992);
}

/* Laptop y tablet */
@media (max-width: 1050px) {
  .k-picker {
    padding: 30px 22px 44px;
  }

  .k-picker__head {
    margin-bottom: 28px;
  }

  .k-picker__grid {
    gap: 18px;
  }

  .k-pick-card {
    aspect-ratio: 16 / 9;
  }

  .k-pick-card__footer {
    min-height: 78px;
    padding: 15px 16px;
  }
}

/* Ajuste a una sola pantalla (escritorio/laptop, ≥681px): todo el paso 1 cabe en
   el viewport sin scroll, sea cual sea la resolución. La rejilla llena el alto que
   deja el encabezado y las tarjetas se ajustan a esa altura en vez de imponerla con
   aspect-ratio. Las fotos siguen con object-fit: cover, así que no se deforman. */
@media (min-width: 681px) {
  .k-picker {
    display: flex;
    flex-direction: column;
    height: 100svh;
    min-height: 0;
    overflow: hidden;
  }

  .k-picker__container {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }

  .k-picker__head {
    flex: 0 0 auto;
  }

  .k-picker__grid {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .k-pick-card {
    aspect-ratio: auto;
    height: 100%;
    min-height: 0;
  }
}

/* Teléfono */
@media (max-width: 680px) {
  .k-picker {
    padding: 25px 16px 34px;
  }

  .k-picker__head {
    margin-bottom: 24px;
  }

  .k-picker__kicker {
    margin-bottom: 12px;
    font-size: 0.68rem;
    letter-spacing: 0.11em;
  }

  .k-picker__title {
    font-size: clamp(2rem, 10vw, 2.75rem);
    line-height: 1.05;
    letter-spacing: -0.025em;
    white-space: normal;
  }

  .k-picker__subtitle {
    margin-top: 14px;
    font-size: 0.96rem;
    line-height: 1.5;
  }

  .k-picker__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .k-pick-card {
    aspect-ratio: 16 / 10;
    border-radius: 15px;
  }

  .k-pick-card__footer {
    min-height: 74px;
    gap: 12px;
    padding: 14px;
  }

  .k-pick-card__name {
    font-size: 1rem;
  }

  .k-pick-card__action {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.87rem;
  }
}

/* Teléfonos muy pequeños */
@media (max-width: 390px) {
  .k-pick-card__footer {
    align-items: flex-end;
  }

  .k-pick-card__action {
    padding-inline: 12px;
  }
}

/* Preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  .k-pick-card,
  .k-pick-card__image,
  .k-pick-card__action,
  .k-pick-card__arrow {
    transition: none;
  }
}

/* Paso 1 del visualizador: mismas tarjetas del selector /cocina (foto + gradiente + nombre),
   en versión compacta para el panel, con estado "seleccionada". */
.k-dist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k-space-3); }
.k-pick-card--panel { aspect-ratio: 16 / 10; border-radius: var(--k-radius-md); box-shadow: var(--k-shadow-1); }
.k-pick-card--panel .k-pick-card__footer { min-height: 0; padding: var(--k-space-2) var(--k-space-3); gap: var(--k-space-2); }
.k-pick-card--panel .k-pick-card__name { font-size: var(--k-fs-300); }
.k-pick-card--panel.is-selected { border-color: var(--k-accent); }
.k-pick-card__badge { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: .6rem; font-weight: var(--k-fw-bold); text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--k-accent); padding: 3px 8px; border-radius: 999px; }

/* Paso 2 · Línea. Hermana de las tarjetas del paso 1 —misma rejilla, mismo radio, mismo
   estado seleccionado— pero con el texto FUERA de la foto: la diferencia entre las dos líneas
   se explica con palabras, y sobre el gradiente de .k-pick-card no cabrían legibles. */
.k-line-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k-space-3); }

.k-line-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  text-align: left;
  background: var(--k-surface);
  border: 2px solid var(--k-line);
  border-radius: var(--k-radius-md);
  box-shadow: var(--k-shadow-1);
  cursor: pointer;
  transition: border-color 180ms var(--k-ease), box-shadow 180ms var(--k-ease);
}
.k-line-card:hover { border-color: var(--k-ink-muted); }
.k-line-card:focus-visible { outline: 3px solid var(--k-focus); outline-offset: 2px; }
.k-line-card.is-selected { border-color: var(--k-accent); }

.k-line-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--k-surface-alt); }
.k-line-card__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

.k-line-card__body {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--k-space-3);
}
.k-line-card__eyebrow {
  color: var(--k-ink-muted); font-size: .6rem; font-weight: var(--k-fw-medium);
  text-transform: uppercase; letter-spacing: .09em;
}
.k-line-card__name { color: var(--k-ink); font-size: var(--k-fs-400); font-weight: var(--k-fw-bold); line-height: 1.25; }
.k-line-card__tagline { color: var(--k-ink-muted); font-size: var(--k-fs-300); font-style: italic; line-height: 1.35; }

.k-line-card__badge {
  position: absolute; top: var(--k-space-2); right: var(--k-space-2);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .6rem; font-weight: var(--k-fw-bold); text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--k-accent); padding: 3px 8px; border-radius: 999px;
}

/* Por debajo de ~420px dos columnas dejan el tagline en cuatro líneas y la foto en una franja:
   se apilan. */
@media (max-width: 26.25rem) {
  .k-line-grid { grid-template-columns: 1fr; }
}

/* ── Portada ('/') — bienvenida + puerta de verificación ──────────────────── */
.k-intro {
  position: relative; min-height: 100dvh; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: var(--k-space-8);
  background: var(--k-brand); color: var(--k-brand-ink);
}
/* Capa de contenido. Al salir hacia el telón NO se desvanece sin más: cae con impulso, que
   es el gesto del logo de la portada del portal de clientes (`back.in(1.5)` en GSAP). La
   curva, al arrancar con pendiente negativa, tira primero del lockup hacia arriba y sólo
   después lo suelta — de ahí que se lea como una toma de impulso y no como un desplome.
   El fondo azul de .k-intro no se toca: lo que queda es una pantalla azul llena, la misma
   con la que el telón de /cocina continúa sin costura.

   La opacidad va 100ms POR DELANTE del movimiento, y no es un descuido. El telón vive en la
   otra página, así que el relevo pasa por una navegación y hay un instante en que el lockup
   deja de estar. Terminando el desvanecido antes que el desplazamiento, ese corte cae cuando
   ya no hay nada que cortar: a los 500ms el lockup es invisible aunque le queden 100ms de
   caída que nadie va a ver. Las dos usan la misma curva, así que el gesto no se deshace. */
.k-intro__content {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--k-space-8); text-align: center;
  transition: opacity 500ms var(--k-ease-in-back), transform 600ms var(--k-ease-in-back);
}
.k-intro.is-leaving .k-intro__content { opacity: 0; transform: translateY(150px) scale(.8); }

/* Lockup de marca: logo + submarca juntos y compactos. */
.k-intro__brand { display: flex; flex-direction: column; align-items: center; gap: var(--k-space-2); }
.k-intro__logo { width: min(220px, 58vw); height: auto; }
.k-intro__kicker {
  font-size: .82rem; font-weight: var(--k-fw-bold);
  letter-spacing: .34em; text-transform: uppercase; color: #9fbdd2;
}
/* Más pequeño que antes y al 80% (via alpha del color, no opacity: la animación de entrada
   controla opacity y lo dejaría al 100%). Apoya al logo, no compite con él. */
.k-intro__slogan {
  max-width: 40ch;
  margin: 0;
  line-height: 1.35;
  text-wrap: balance;
  font-size: 1.1rem;
  font-weight: var(--k-fw-regular);
  color: rgb(234 241 246 / .8);
}
/* CTA blanco sobre azul: 15.9:1 (AAA). Nunca naranja+blanco (falla AA, RG-10). */
.k-intro__cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 var(--k-space-8); margin-top: var(--k-space-2);
  border: 0; cursor: pointer;
  background: #fff; color: var(--k-brand); border-radius: 999px;
  /* Peso Medium (no Bold): hace mejor juego con las líneas finas del logo. */
  font-size: var(--k-fs-400); font-weight: var(--k-fw-medium); text-decoration: none;
  box-shadow: 0 10px 30px rgb(0 0 0 / .28);
  transition: transform var(--k-dur-fast) var(--k-ease), box-shadow var(--k-dur-fast) var(--k-ease);
}
.k-intro__cta-label { position: relative; z-index: 2; }
/* Overlay de tinte que aparece al hover (da "vida" al botón). */
.k-intro__cta::before {
  content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit;
  background: linear-gradient(180deg, rgb(0 36 60 / .05), rgb(0 36 60 / .12));
  opacity: 0; transition: opacity var(--k-dur-base) var(--k-ease);
}
/* Barrido de brillo que cruza el botón al pasar el mouse. */
.k-intro__cta::after {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -75%; width: 45%; z-index: 1;
  background: linear-gradient(90deg, transparent, rgb(0 36 60 / .14), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left 700ms var(--k-ease);
}
@media (hover: hover) and (pointer: fine) {
  .k-intro__cta:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgb(0 0 0 / .34); }
  .k-intro__cta:hover::before { opacity: 1; }
  .k-intro__cta:hover::after { left: 145%; }
}
.k-intro__cta:focus-visible { outline: 3px solid var(--k-accent); outline-offset: 3px; }

/* "Preparando todo…" DENTRO del propio botón: al pulsarlo se bloquea y su fill se va
   pintando de izquierda a derecha, como una barra de carga integrada. */
.k-intro__cta-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 1;
  background: rgb(0 36 60 / .14);          /* banda gris-azul sobre el botón blanco (sin naranja) */
  transition: width 1.6s cubic-bezier(.2, .6, .2, 1);
  pointer-events: none;
}
/* Estado ocupado: el botón queda bloqueado (sin re-clic ni hover). */
.k-intro__cta.is-busy { cursor: default; pointer-events: none; }

/* ── Entrada: la misma coreografía que la portada del portal de clientes ──────
   Allá es una línea de tiempo de GSAP; aquí son animaciones con el retardo ya calculado,
   que es lo mismo contado de otra forma. Dos tiempos:

     1) el logo entra solo, creciendo desde el 90% (1s, power2.out);
     2) submarca, eslogan y botón suben en cascada de 0.15s (1s, power3.out).

   Lo único que no se copia es la salida del logo: en el portal es un rótulo de intro que se
   va para dejar ver el hero, y aquí es el encabezado de la propia portada. Se queda, y el
   resto del lockup aparece debajo de él.

   backwards (no forwards): la animación cubre la entrada y el retardo, pero al terminar NO
   retiene el transform, para no bloquear el translateY del :hover del botón. El estado
   oculto vive en el keyframe `from`, no en el estilo base. */
.k-intro__logo { animation: k-logo-in 1s var(--k-ease-out-cubic) backwards; }
@keyframes k-logo-in {
  from { opacity: 0; transform: translateY(20px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
.k-intro__item { animation: k-rise 1s var(--k-ease-out-quart) backwards; }
.k-intro__item--1 { animation-delay: .70s; }
.k-intro__item--2 { animation-delay: .85s; }
.k-intro__item--3 { animation-delay: 1s; }
@keyframes k-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

/* ── Telón / párpado: revela /cocina al llegar desde la portada ───────────── */
/* Sólo se pinta cuando el <head> marcó html.k-reveal (venimos de la portada). */
html.k-reveal { background: var(--k-brand); }        /* evita cualquier flash de borde */
.k-curtain { position: fixed; inset: 0; z-index: 9999; display: none; pointer-events: none; }
html.k-reveal .k-curtain { display: block; }
/* Un pixel de más en cada hoja: a 50% exacto, en pantallas con escalado fraccionario, el
   redondeo deja ver una línea de la página por la juntura antes de que nada se mueva. */
.k-curtain__half { position: absolute; left: 0; right: 0; height: calc(50% + 1px); background: var(--k-brand); will-change: transform; }
.k-curtain__half--top { top: 0; }
.k-curtain__half--bottom { bottom: 0; }
/* El párpado se abre solo, con CSS (robusto: no depende de JS). Duración y curva son las del
   portal de clientes: 1.1s con power4.inOut, que sale muy despacio, cruza deprisa y frena
   largo.

   Sin retardo: arranca en el primer fotograma pintado. El respiro que antes daba un delay de
   180ms lo da ya la propia curva —a los 100ms lleva medio punto porcentual recorrido, así que
   la vista tiene su margen para pintar igualmente— y esos 180ms se sumaban al salto de red
   como un tiempo muerto de azul entre que el lockup se iba y el telón empezaba. */
html.k-reveal .k-curtain__half--top { animation: k-eyelid-top 1100ms var(--k-ease-inout-quint) both; }
html.k-reveal .k-curtain__half--bottom { animation: k-eyelid-bottom 1100ms var(--k-ease-inout-quint) both; }
@keyframes k-eyelid-top { to { transform: translateY(-100%); } }
@keyframes k-eyelid-bottom { to { transform: translateY(100%); } }

/* La vista se revela MIENTRAS el telón se abre, no después: la cascada arranca 0.8s antes de
   que las hojas terminen de salir (1100ms − 800ms), igual que en el portal. Sólo ocurre bajo
   html.k-reveal: quien llega a /cocina por un enlace directo no viene de ningún telón y no
   hay nada que revelar, así que su contenido se pinta tal cual. */
html.k-reveal .k-reveal-item { animation: k-rise 1s var(--k-ease-out-quart) backwards; }
html.k-reveal .k-reveal-item--1 { animation-delay: .30s; }
html.k-reveal .k-reveal-item--2 { animation-delay: .42s; }
html.k-reveal .k-reveal-item--3 { animation-delay: .54s; }
/* Las tarjetas van más juntas (0.08s) para que la cascada no se alargue con el número de
   distribuciones: el índice lo pone la vista, así que añadir una escena no toca este CSS. */
html.k-reveal .k-reveal-card { animation: k-rise 1s var(--k-ease-out-quart) backwards;
  animation-delay: calc(.66s + var(--k-reveal-i, 0) * .08s); }

@media (prefers-reduced-motion: reduce) {
  .k-intro__logo,
  .k-intro__item { animation: none; opacity: 1; transform: none; }
  .k-intro__content { transition: none; }            /* sin caída de salida */
  html.k-reveal .k-curtain { display: none; }        /* sin párpado: contenido directo */
  html.k-reveal .k-reveal-item,
  html.k-reveal .k-reveal-card { animation: none; }  /* ni cascada al llegar */
}


/* ═══════════════════════════════════════════════════════════════════════════
   Aplicación
   ═══════════════════════════════════════════════════════════════════════════ */
.k-app { display: flex; flex-direction: column; min-height: 100dvh; background: var(--k-surface); }

.k-appbar {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--k-space-4);
  padding: var(--k-space-3) var(--k-space-4);
  background: var(--k-brand); color: var(--k-brand-ink);
}
.k-appbar__brand { display: inline-flex; align-items: center; }
.k-appbar__logo { display: block; height: 50px; width: auto; }
.k-appbar__kicker { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #9fbdd2; }
.k-appbar__spacer { flex: 1; }

/* Acciones del header: iconos SVG monocromáticos pintados de blanco con máscara CSS
   (el SVG aporta la silueta; el color lo pone background-color, así ignoramos su fill gris). */
.k-appbar__tools { display: inline-flex; align-items: center; gap: var(--k-space-1); }
.k-appbar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;                 /* objetivo táctil ≥44px */
  border: none; background: transparent; border-radius: var(--k-radius-md);
  cursor: pointer; padding: 0; text-decoration: none;
  transition: background-color var(--k-dur-fast) var(--k-ease);
}
.k-appbar__icon::before {
  content: ""; width: 48px; height: 48px;
  background-color: var(--k-brand-ink);      /* icono blanco */
  -webkit-mask: var(--k-icon) center / contain no-repeat;
  mask: var(--k-icon) center / contain no-repeat;
  transition: background-color var(--k-dur-fast) var(--k-ease);
}
.k-appbar__icon--share    { --k-icon: url("/Img/Iconos/icono-compartir.svg"); }
.k-appbar__icon--download { --k-icon: url("/Img/Iconos/icono-descargar.svg"); }
.k-appbar__icon--location { --k-icon: url("/Img/Iconos/icono-ubicacion.svg"); }
@media (hover: hover) and (pointer: fine) {
  .k-appbar__icon:hover { background: rgb(255 255 255 / .10); }
  .k-appbar__icon:hover::before { background-color: var(--k-accent); }
}
.k-appbar__icon:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }

/* ── Layout 63/37 (escritorio) / apilado (móvil) ──────────────────────────── */
.k-layout { flex: 1; display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }

/* ── Stage — estático, imagen sin distorsión (contain), la más grande que quepa ── */
.k-stage-col { position: relative; background: #0c1a24; display: flex; align-items: center; justify-content: center; min-height: 0; overflow: hidden; }
.k-stage {
  position: relative; width: 100%; aspect-ratio: var(--k-stage-ratio);
  margin: 0 auto; max-width: 1000px;
  /* Contexto de apilado propio: contiene los z-index de las capas (0..10) para que no
     compitan con los controles hermanos (botón expandir, chip, indicador), que deben
     quedar por encima del stage completo y recibir sus clics en toda su área. */
  z-index: 0;
}
.k-stage .layer-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center;
  opacity: 0; transition: opacity var(--k-dur-base) var(--k-ease); }
.k-stage .layer-img.is-ready { opacity: 1; }

/* La cocina PARECE una imagen, pero son hasta once PNG apilados. Con las capas como blanco
   del puntero, «Guardar imagen como…» se lleva UNA — un PNG transparente con sólo la cubierta,
   que no es lo que el visitante creía estar guardando. Lo mismo al arrastrarla al escritorio.

   Sacarlas del alcance del puntero deja el menú contextual sobre el contenedor, que no ofrece
   ninguna opción de imagen. El menú sigue abriéndose: cancelarlo entero se siente roto, y
   además no protegería nada — las URLs de las capas están a la vista de cualquiera que abra
   las herramientas de desarrollador. Esto no es candado, es quitar una opción que engaña.

   Ninguna capa escucha eventos (`layer-stack.js` sólo cambia `src`), así que no se pierde
   nada. Los controles del stage son hermanos, no descendientes: siguen recibiendo sus clics. */
.k-stage .layer-img,
.k-lightbox__frame .layer-img {
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}
/* iOS Safari: sin esto, la pulsación larga abre igual su hoja de «Guardar en Fotos». */
.k-stage, .k-lightbox__frame { -webkit-touch-callout: none; }

.k-stage-chip {
  position: absolute; left: var(--k-space-3); bottom: var(--k-space-3); z-index: 3;
  display: inline-flex; align-items: center; gap: var(--k-space-2);
  background: rgb(0 36 60 / .82); color: #fff; backdrop-filter: blur(6px);
  padding: .5rem .5rem .5rem .75rem; border-radius: 999px; font-size: var(--k-fs-300);
  box-shadow: 0 4px 16px rgb(0 0 0 / .25);
}
.k-stage-chip b { font-weight: var(--k-fw-medium); }
.k-stage-chip__edit { color: var(--k-accent); font-weight: var(--k-fw-medium); text-decoration: none;
  border-left: 1px solid rgb(255 255 255 / .25); padding-left: var(--k-space-2); }
.k-stage-expand {
  position: absolute; top: var(--k-space-3); right: var(--k-space-3); z-index: 3;
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--k-radius-md);
  background: rgb(0 36 60 / .7); color: #fff; font-size: 1.1rem;
}
.k-stage-updating {
  position: absolute; top: var(--k-space-3); left: var(--k-space-3); z-index: 3;
  display: none; align-items: center; gap: var(--k-space-2);
  font-size: var(--k-fs-300); color: #fff; background: rgb(0 36 60 / .7);
  padding: .35rem .75rem; border-radius: 999px;
}
.k-stage-updating.is-on { display: inline-flex; }
.k-stage-updating__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--k-accent); animation: k-pulse 1s infinite; }

/* ── Vista ampliada del stage (lightbox / galería) ────────────────────────── */
/* Cerrado no pinta nada (display:none) para no desenfocar la app cuando no toca. */
.k-lightbox {
  position: fixed; inset: 0; z-index: 100; display: none; place-items: center;
  padding: 4vmin; background: rgb(3 12 20 / .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.k-lightbox.is-open { display: grid; animation: k-fade var(--k-dur-base) var(--k-ease); }
body.k-lightbox-open { overflow: hidden; }
/* Marco a proporción del stage: se escala para caber SIN deformar ni recortar. */
.k-lightbox__frame {
  position: relative; aspect-ratio: var(--k-stage-ratio);
  width: min(92vw, calc(92vh * 1200 / 750)); max-width: 1600px;
  background: #0c1a24; border-radius: var(--k-radius-md); overflow: hidden;
  box-shadow: 0 24px 80px rgb(0 0 0 / .5);
}
/* Las capas clonadas: mismo apilado y encuadre que en el stage (object-fit: contain). */
.k-lightbox__frame .layer-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center; opacity: 1;
}
.k-lightbox__close {
  position: absolute; top: 3vmin; right: 3vmin; z-index: 2;
  width: 48px; height: 48px; display: grid; place-items: center;
  border: none; cursor: pointer; border-radius: 50%;
  background: rgb(0 36 60 / .8); color: #fff; font-size: 1.6rem; line-height: 1;
  transition: background-color var(--k-dur-fast) var(--k-ease);
}
@media (hover: hover) and (pointer: fine) {
  .k-lightbox__close:hover { background: var(--k-accent); }
}
.k-lightbox__close:focus-visible { outline: 2px solid var(--k-accent); outline-offset: 2px; }
@keyframes k-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

/* ── Panel ────────────────────────────────────────────────────────────────── */
.k-panel-col { display: flex; flex-direction: column; min-height: 0; background: var(--k-surface); }

/* Stepper — SIEMPRE muestra todos los pasos, nunca los esconde (obs. #3). Cuántos son lo
   decide el catálogo: cinco, o seis cuando hay más de una línea activa (buildSteps). */
.k-stepper-head { flex: 0 0 auto; padding: var(--k-space-4) var(--k-space-4) 0; border-bottom: 1px solid var(--k-line); }
.k-eyebrow { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--k-accent-text); font-weight: var(--k-fw-bold); font-variant-numeric: tabular-nums; }
.k-stepper { display: flex; align-items: flex-start; gap: var(--k-space-1); margin-top: var(--k-space-2); }
.k-step {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: var(--k-space-2) .2rem var(--k-space-3); position: relative; color: var(--k-ink-muted);
  border-radius: var(--k-radius-sm) var(--k-radius-sm) 0 0;
}
.k-step:hover { background: var(--k-surface-alt); }
.k-step__num {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: .8125rem; font-weight: var(--k-fw-bold); font-variant-numeric: tabular-nums;
  background: var(--k-surface-alt); color: var(--k-ink-muted); border: 1px solid var(--k-line);
  transition: all var(--k-dur-fast) var(--k-ease);
}
.k-step__label { font-size: .6875rem; font-weight: var(--k-fw-medium); line-height: 1.15; text-align: center;
  max-width: 8ch; overflow: hidden; text-overflow: ellipsis; }
.k-step__opt { display: block; font-size: .5625rem; text-transform: uppercase; letter-spacing: .06em; color: var(--k-ink-muted); }
.k-step[aria-selected="true"] { color: var(--k-brand); }
.k-step[aria-selected="true"] .k-step__label { font-weight: var(--k-fw-bold); }
.k-step[aria-selected="true"] .k-step__num { background: var(--k-brand); color: #fff; border-color: var(--k-brand); }
.k-step[aria-selected="true"]::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: 0; height: 3px;
  background: var(--k-accent); border-radius: 999px;
}
.k-step[data-done="true"] .k-step__num { background: var(--k-brand); color: #fff; border-color: var(--k-brand); }

/* Cuerpo del paso. En móvil hace scroll natural; en escritorio queda acotado y el scroll
   pasa a las cajas internas (ver media query de escritorio). */
.k-step-body { flex: 1 1 auto; overflow-y: auto; padding: var(--k-space-4); min-height: 0; }
/* La animación de entrada corre SÓLO al cambiar de paso (.k-pane--enter), nunca en cada
   re-render por selección — así elegir un color/perfil/complemento no produce "flashazo".
   Keyframes propios: compartir el nombre `k-fade` con el lightbox hacía que la última
   definición del archivo ganara y la vista ampliada entrara también desplazándose. */
.k-pane--enter { animation: k-pane-enter var(--k-dur-base) var(--k-ease); }
@keyframes k-pane-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Contenedor de flujo de un paso: en escritorio se vuelve columna flex acotada, de modo que
   los labels de campo quedan fijos y sólo las cajas de opciones (.k-scrollarea) hacen scroll. */
.k-pane__flow { display: block; }
/* Caja de opciones con scroll interno propio (obs. #3: cada bloque su propio scroll). */
.k-scrollarea { display: block; }

.k-pane__head { display: flex; align-items: flex-start; gap: var(--k-space-2); }
.k-pane__head-main { flex: 1; min-width: 0; }
.k-pane__title { font-size: var(--k-fs-600); letter-spacing: -.01em; margin-top: var(--k-space-1); text-wrap: balance; }
.k-pane__sub { color: var(--k-ink-muted); font-size: var(--k-fs-300); margin: var(--k-space-1) 0 var(--k-space-4); }
.k-pane__sub b { color: var(--k-ink); font-weight: var(--k-fw-medium); }

/* Etiqueta "Producto Kober" */
.k-tag {
  display: inline-flex; align-items: center; gap: var(--k-space-1);
  font-size: .625rem; font-weight: var(--k-fw-bold); letter-spacing: .1em; text-transform: uppercase;
  color: var(--k-brand); background: color-mix(in srgb, var(--k-accent) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--k-accent) 40%, #fff);
  padding: .2rem .55rem .2rem .4rem; border-radius: 999px;
}
.k-tag__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--k-accent); }

.k-info-btn {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--k-line); background: var(--k-surface); color: var(--k-ink-muted);
  font-weight: var(--k-fw-bold); font-size: .8125rem; font-style: italic; display: grid; place-items: center;
}
.k-info-btn:hover { border-color: var(--k-accent); color: var(--k-accent-text); }

/* Subpestañas / pills (Cubierta·Barra, Diseño·Estilo, Puertas·Pisos·Muros).
   Diseño de selección clara (propuesta del usuario): contenedor elevado; pills con forma de
   botón (relleno suave + borde) para que se sientan clickables; la seleccionada en azul con
   sombra táctil y check; hover con cambio de tono para feedback inmediato. */
.k-subtabs {
  display: inline-flex; flex-wrap: wrap; gap: var(--k-space-1);
  padding: 4px; border-radius: 999px;
  background: var(--k-surface); border: 1px solid var(--k-line);
  box-shadow: var(--k-shadow-1);
  margin-bottom: var(--k-space-4);
}
.k-subtab {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--k-fs-300); font-weight: var(--k-fw-medium); color: var(--k-brand);
  padding: .45rem 1rem; border-radius: 999px;
  background: var(--k-surface-alt); border: 1px solid var(--k-line);
  transition: background var(--k-dur-fast) var(--k-ease), color var(--k-dur-fast) var(--k-ease),
              border-color var(--k-dur-fast) var(--k-ease), box-shadow var(--k-dur-fast) var(--k-ease);
}
.k-subtab:hover {
  background: color-mix(in srgb, var(--k-brand) 8%, var(--k-surface));
  border-color: color-mix(in srgb, var(--k-brand) 35%, var(--k-line));
}
.k-subtab[aria-selected="true"] {
  background: var(--k-brand); color: var(--k-brand-ink); border-color: var(--k-brand);
  font-weight: var(--k-fw-bold); box-shadow: 0 2px 8px rgb(0 36 60 / .28);
}
.k-subtab[aria-selected="true"]::before { content: "✓"; font-size: .85em; font-weight: 700; }
.k-subtab[aria-selected="true"]:hover { background: var(--k-brand-tint); }

/* Etiqueta de campo */
.k-field { margin: var(--k-space-4) 0 var(--k-space-2); font-size: .75rem; font-weight: var(--k-fw-bold);
  text-transform: uppercase; letter-spacing: .07em; color: var(--k-ink-muted);
  display: flex; align-items: baseline; gap: var(--k-space-2); }
.k-field:first-child { margin-top: 0; }
.k-field__hint { font-weight: var(--k-fw-regular); text-transform: none; letter-spacing: 0; opacity: .8; }

/* ── Mosaico de opciones (perfil, barra, ambientación) — grid, scroll ABAJO ── */
.k-mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--k-space-2); }
.k-optcard {
  position: relative; text-align: left; background: var(--k-surface);
  border: 2px solid var(--k-line); border-radius: var(--k-radius-md); overflow: hidden;
  transition: border-color var(--k-dur-fast) var(--k-ease), transform var(--k-dur-fast) var(--k-ease);
}
.k-optcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--k-brand) 30%, var(--k-line)); }
.k-optcard__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; background: var(--k-surface-alt); }
.k-optcard__cap { padding: .4rem .55rem; }
.k-optcard__cap b { display: block; font-size: .8125rem; font-weight: var(--k-fw-medium); color: var(--k-ink); }
.k-optcard__cap small { font-size: .6875rem; color: var(--k-ink-muted); }
.k-optcard[aria-checked="true"] { border-color: var(--k-brand); }
.k-optcard__check {
  position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--k-accent); color: #fff; display: none; place-items: center; font-size: .8125rem; font-weight: var(--k-fw-bold);
  box-shadow: 0 2px 6px rgb(0 0 0 / .3);
}
.k-optcard[aria-checked="true"] .k-optcard__check { display: grid; animation: k-pop var(--k-dur-base) var(--k-ease); }
@keyframes k-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* ── Grilla de acabados (swatches) — también mosaico vertical ──────────────── */
.k-swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--k-space-3); }
.k-swatch { position: relative; text-align: center; }
.k-swatch__chip { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--k-radius-sm);
  background-size: cover; background-position: center; background-color: var(--k-surface-alt);
  border: 2px solid var(--k-line); transition: border-color var(--k-dur-fast) var(--k-ease); }
.k-swatch[aria-checked="true"] .k-swatch__chip { border-color: var(--k-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-accent) 22%, transparent); }
.k-swatch__label { font-size: .6875rem; color: var(--k-ink-muted); margin-top: .3rem; line-height: 1.2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.k-swatch[aria-checked="true"] .k-swatch__label { color: var(--k-ink); font-weight: var(--k-fw-medium); }
.k-swatch__check { position: absolute; top: 5px; right: 5px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--k-accent); color: #fff; display: none; place-items: center; font-size: .75rem; font-weight: var(--k-fw-bold); }
.k-swatch[aria-checked="true"] .k-swatch__check { display: grid; animation: k-pop var(--k-dur-base) var(--k-ease); }

/* ── Soluciones / complementos (toggle) ───────────────────────────────────── */
.k-sol-list { display: flex; flex-direction: column; gap: var(--k-space-2); }
.k-sol {
  display: flex; align-items: center; gap: var(--k-space-3);
  padding: var(--k-space-3); border: 1.5px solid var(--k-line); border-radius: var(--k-radius-md);
  background: var(--k-surface); text-align: left; width: 100%;
  transition: border-color var(--k-dur-fast) var(--k-ease), background var(--k-dur-fast) var(--k-ease);
}
/* Miniatura 1:1 del complemento, como avatar cuadrado a la izquierda de la fila. */
.k-sol__thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: var(--k-radius-sm);
  object-fit: cover; background: var(--k-surface-alt); }
.k-sol[data-disabled="true"] .k-sol__thumb { filter: grayscale(1); opacity: .7; }
.k-sol:hover { border-color: color-mix(in srgb, var(--k-brand) 30%, var(--k-line)); }
.k-sol__tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--k-radius-sm);
  border: 2px solid var(--k-line); display: grid; place-items: center; color: #fff; font-size: .8125rem; font-weight: var(--k-fw-bold); }
.k-sol[aria-checked="true"] { border-color: var(--k-brand); background: color-mix(in srgb, var(--k-brand) 4%, #fff); }
.k-sol[aria-checked="true"] .k-sol__tick { background: var(--k-accent); border-color: var(--k-accent); }
.k-sol__body { flex: 1; min-width: 0; text-align: left; }
.k-sol__body b { font-size: var(--k-fs-400); font-weight: var(--k-fw-medium); display: flex; align-items: center; gap: var(--k-space-2); flex-wrap: wrap; }
.k-sol__body p { margin-top: .15rem; font-size: var(--k-fs-300); color: var(--k-ink-muted); }
.k-sol__flag { font-size: .625rem; text-transform: uppercase; letter-spacing: .06em; color: var(--k-ink-muted);
  border: 1px solid var(--k-line); border-radius: 999px; padding: .05rem .45rem; }
.k-sol--mono { border-color: color-mix(in srgb, var(--k-accent) 45%, #fff); background: color-mix(in srgb, var(--k-accent) 6%, #fff); }
.k-sol__note { display: flex; gap: var(--k-space-2); margin-top: var(--k-space-2); font-size: var(--k-fs-300);
  color: var(--k-accent-text); background: color-mix(in srgb, var(--k-accent) 10%, #fff); padding: .5rem .6rem; border-radius: var(--k-radius-sm); line-height: 1.35; }
/* Variante intro: introduce la sección de monolitos, colocada sobre las tarjetas. */
.k-sol__note--intro { margin-top: 0; margin-bottom: var(--k-space-3); }
/* Chevron de expandir/contraer el acordeón (separado del check — punto 4). Grande y visible. */
.k-sol__chevron { flex: 0 0 auto; align-self: center; width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--k-brand); font-size: 1.35rem; line-height: 1; border-radius: var(--k-radius-sm); }
.k-sol__chevron:hover { background: var(--k-surface-alt); color: var(--k-accent-text); }
/* Complemento que las reglas no permiten con la configuración actual. Se marca con borde
   punteado y fondo apagado en vez de bajar la opacidad: el motivo tiene que seguir
   leyéndose con contraste suficiente — es justo lo que el visitante necesita leer. */
.k-sol[data-disabled="true"] { background: var(--k-surface-alt); border-style: dashed; }
.k-sol[data-disabled="true"]:hover { border-color: var(--k-line); }
.k-sol[data-disabled="true"] .k-sol__tick { border-style: dashed; background: transparent; cursor: not-allowed; }
.k-sol[data-disabled="true"] .k-sol__body b { color: var(--k-ink-muted); }
.k-sol__why { font-size: var(--k-fs-300); color: var(--k-ink-muted); }
.k-sol__why button { color: var(--k-accent-text); font-weight: var(--k-fw-medium); text-decoration: underline; }
.k-sol__why button:hover { color: var(--k-brand); }
/* Sub-opciones reveladas al activar un complemento (acabado propio, variantes) — acordeón.
   Su lista interna nunca empuja el layout: altura máxima + scroll propio (obs. punto 4). */
.k-sol-extra { margin: calc(-1 * var(--k-space-1)) 0 var(--k-space-2); padding: 0 0 0 calc(22px + var(--k-space-3)); }
.k-sol-extra .k-swatch-grid,
.k-sol-extra .k-mosaic { max-height: 30vh; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--k-space-1); }

/* Banner de "opcional" (paso 4) */
.k-opt-banner { display: flex; gap: var(--k-space-3); align-items: flex-start; padding: var(--k-space-3);
  border-radius: var(--k-radius-md); background: var(--k-surface-alt); border: 1px dashed var(--k-line);
  margin-bottom: var(--k-space-4); font-size: var(--k-fs-300); color: var(--k-ink-muted); }
.k-opt-banner b { color: var(--k-ink); font-weight: var(--k-fw-medium); }
.k-opt-banner__ic { color: var(--k-accent-text); font-weight: var(--k-fw-bold); font-size: 1.1rem; line-height: 1; }

/* ── Resumen (último paso) ────────────────────────────────────────────────── */
.k-sum-block { border: 1px solid var(--k-line); border-radius: var(--k-radius-md); overflow: hidden; margin-bottom: var(--k-space-3); }
.k-sum-block__h { margin: 0; padding: .65rem var(--k-space-3); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em;
  display: flex; align-items: center; gap: var(--k-space-2); }
.k-sum-block--kober .k-sum-block__h { background: var(--k-brand); color: #fff; }
.k-sum-block--amb .k-sum-block__h { background: var(--k-surface-alt); color: var(--k-ink-muted); }
.k-sum-row { display: flex; justify-content: space-between; gap: var(--k-space-3); padding: .55rem var(--k-space-3);
  border-top: 1px solid var(--k-line); font-size: var(--k-fs-300); }
.k-sum-row span:first-child { color: var(--k-ink-muted); }
.k-sum-row span:last-child { font-weight: var(--k-fw-medium); text-align: right; }
.k-sum-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-space-2); margin-top: var(--k-space-3); }
.k-sum-actions .k-btn--primary { grid-column: 1 / -1; }

/* ── Pie del panel ────────────────────────────────────────────────────────── */
.k-panel-foot { flex: 0 0 auto; display: flex; gap: var(--k-space-2); padding: var(--k-space-3) var(--k-space-4);
  border-top: 1px solid var(--k-line); background: var(--k-surface); }

/* ── Ayuda contextual (popover por tap) ───────────────────────────────────── */
.k-help { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: var(--k-space-4);
  background: rgb(0 20 34 / .5); }
.k-help.is-open { display: grid; }
.k-help__card { background: var(--k-surface); max-width: 420px; width: 100%; border-radius: var(--k-radius-lg);
  overflow: hidden; box-shadow: 0 20px 60px rgb(0 36 60 / .3); }
.k-help__h { margin: 0; padding: var(--k-space-4); background: var(--k-brand); color: #fff; font-size: var(--k-fs-400);
  display: flex; align-items: center; gap: var(--k-space-2); }
.k-help__close { margin-left: auto; color: #fff; font-size: 1.4rem; line-height: 1; }
.k-help__body { padding: var(--k-space-4); font-size: var(--k-fs-400); color: var(--k-ink-muted); line-height: 1.55; }
.k-help__body b { color: var(--k-ink); }

/* ── Toasts ───────────────────────────────────────────────────────────────── */
.k-toast-region { position: fixed; left: 50%; bottom: var(--k-space-6); transform: translateX(-50%);
  z-index: 100; display: flex; flex-direction: column; gap: var(--k-space-2); pointer-events: none; }
.k-toast { background: var(--k-brand); color: var(--k-brand-ink); padding: var(--k-space-2) var(--k-space-4);
  border-radius: var(--k-radius-md); font-size: var(--k-fs-300); box-shadow: var(--k-shadow-1);
  opacity: 0; transition: opacity var(--k-dur-base) var(--k-ease); }
.k-toast.is-visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   Escritorio: split 63/37, stage a la izquierda, panel a la derecha
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 960px) {
  /* La app ocupa EXACTAMENTE el alto de la ventana: nada de scroll global (punto 2). */
  .k-app { height: 100dvh; overflow: hidden; }
  .k-layout { grid-template-columns: 63% 37%; grid-template-rows: 1fr; min-height: 0; }

  /* Columna izquierda estática: la imagen es la más grande que quepa sin distorsión. */
  .k-stage-col { padding: var(--k-space-6); }
  .k-stage { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; }

  .k-panel-col { border-left: 1px solid var(--k-line); min-height: 0; }
  .k-step__label { font-size: .75rem; max-width: none; }

  /* El cuerpo del paso es una columna flex acotada. En pantallas normales no hay scroll
     global (cada caja scrollea sola); en laptops muy bajitas, si aun con la caja principal
     en su altura mínima no cabe todo, el panel derecho scrollea como red de seguridad. */
  .k-step-body { display: flex; flex-direction: column; overflow-y: auto; }
  .k-pane { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  .k-pane__flow { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }

  /* Cada caja de opciones tiene su propio scroll interno (punto 3). */
  .k-scrollarea { overflow-y: auto; overscroll-behavior: contain; padding-right: var(--k-space-1); }
  /* Cajas secundarias (perfiles, variantes): tope de altura razonable. */
  .k-scrollarea:not(.k-grow) { max-height: 30vh; }
  /* Caja principal del paso (acabados, lista de soluciones, resumen): llena el resto y scrollea.
     min-height evita que se colapse/esconda en laptops pequeñas (punto 1). */
  .k-scrollarea.k-grow { flex: 1 1 0; min-height: 150px; max-height: none; }

  /* Ritmo vertical compacto en escritorio: deja el máximo de alto para la caja de acabados. */
  .k-pane__flow .k-field { margin: var(--k-space-2) 0 var(--k-space-1); }
  .k-scrollarea:not(.k-grow) { max-height: 26vh; }
  .k-stepper-head { padding-top: var(--k-space-3); }
  .k-step { padding-top: var(--k-space-1); padding-bottom: var(--k-space-2); }
  .k-pane__sub { margin-bottom: var(--k-space-3); }
}

/* Móvil: stage protagonista arriba, panel como hoja inferior */
@media (max-width: 959px) {
  .k-stage-col { position: sticky; top: 0; }
  .k-stage { max-height: 42dvh; }
  .k-panel-col { border-radius: var(--k-radius-lg) var(--k-radius-lg) 0 0; margin-top: -14px;
    position: relative; z-index: 4; box-shadow: 0 -8px 24px rgb(0 36 60 / .1); }
  .k-panel-foot { position: sticky; bottom: 0; }
}

/* ── Puerta de verificación (§4.6) ──────────────────────────────────────────
   El botón de la portada muestra "Preparando todo…" mientras Turnstile evalúa. */
.k-spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: k-spin 700ms linear infinite;
}

.k-button.is-busy {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    pointer-events: none;
}

@keyframes k-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .k-spinner { animation: none; }
}

/* ── Formulario de asesoría (§4.7) ────────────────────────────────────────── */
.k-contact {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    margin-top: var(--k-space-6);
    padding: var(--k-space-4);
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-md);
    background: var(--k-surface-alt);
}

.k-contact__intro {
    margin: 0;
    color: var(--k-ink-muted);
    font-size: var(--k-fs-300);
}

/* Campos del formulario, con nombre propio: antes se llamaban `.k-field` igual que las
   etiquetas de campo del panel de pasos, y al ser los últimos del archivo les imponían
   `flex-direction: column` — la etiqueta y su pista («FAMILIA · Diseño y Estilo son las dos
   familias de acabado») se apilaban en vez de ir en una línea. */
.k-contact__field {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
}

.k-contact__label {
    font-size: var(--k-fs-300);
    font-weight: var(--k-fw-medium);
    color: var(--k-ink);
}

.k-contact__input {
    padding: var(--k-space-2) var(--k-space-3);
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius-sm);
    background: var(--k-surface);
    font: inherit;
    color: var(--k-ink);
    /* 16px evita el zoom automático de iOS al enfocar. */
    font-size: 1rem;
}

.k-contact__input:focus-visible {
    outline: 2px solid var(--k-focus);
    outline-offset: 1px;
}

.k-contact__status:empty {
    display: none;
}

.k-contact__status {
    margin: 0;
    font-size: var(--k-fs-300);
    color: var(--k-accent-text);
}

.k-contact__ok {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}

.k-contact__ok p {
    margin: 0;
    color: var(--k-ink-muted);
    font-size: var(--k-fs-300);
}