/* =====================================================================
   ARMADOR POR PESTAÑAS — hoja compartida por las tres marcas
   ---------------------------------------------------------------------
   Un solo camino de compra: Producto → Tu idea → Tallas → Tus datos.
   Una pantalla por pestaña. La usan modofan/arma-tu-pedido.html,
   rebxn/laboratorio.html y catalogo.html (Ensutex).

   Los colores salen de los tokens de cada marca (--b-*), con respaldo
   neutro para que también funcione sobre el sitio Ensutex.
   No agranda tipografías ni botones: las pestañas miden lo mismo que el
   texto de la casa, y el botón principal sigue siendo .b-btn.
   ===================================================================== */

/* Los tokens van en :root —y no sólo en .b-path— porque el resumen de escritorio
   y la barra del celular son hermanos del camino, no descendientes: viven fuera
   de .b-path en las tres páginas. Declarados sólo en .b-path, sus var() quedaban
   inválidas ahí (fondo transparente y borde sin color). `.b-path` los vuelve a
   declarar para que un contenedor con sus propios --b-* mande sobre el :root. */
:root {
  --b-path-surface: var(--b-surface, #ffffff);
  --b-path-text: var(--b-text, #16161a);
  --b-path-muted: var(--b-muted, #5c5c66);
  --b-path-line: var(--b-line, rgba(0, 0, 0, .12));
  --b-path-accent: var(--b-accent, #e20613);
  --b-path-accent-fg: var(--b-accent-fg, #ffffff);
  --b-path-radius: var(--b-radius, 14px);
}

.b-path {
  --b-path-surface: var(--b-surface, #ffffff);
  --b-path-text: var(--b-text, #16161a);
  --b-path-muted: var(--b-muted, #5c5c66);
  --b-path-line: var(--b-line, rgba(0, 0, 0, .12));
  --b-path-accent: var(--b-accent, #e20613);
  --b-path-accent-fg: var(--b-accent-fg, #ffffff);
  --b-path-radius: var(--b-radius, 14px);
  display: block;
}

/* ---------------------------------------------------------------------
   1 · Barra de pestañas: numerada, con el nombre, arriba de todo.
   --------------------------------------------------------------------- */
.b-path__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: b-path-tab;
}

.b-path__tab {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--b-path-line);
  border-radius: 999px;
  background: transparent;
  color: var(--b-path-muted);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.b-path__tab::before {
  counter-increment: b-path-tab;
  content: counter(b-path-tab);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: currentColor;
  color: var(--b-path-surface);
  font-size: .75rem;
  font-weight: 700;
}

.b-path__tab__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b-path__tab.is-current {
  border-color: var(--b-path-accent);
  color: var(--b-path-text);
  background: color-mix(in srgb, var(--b-path-accent) 12%, transparent);
}

.b-path__tab.is-done {
  border-color: color-mix(in srgb, var(--b-path-accent) 45%, var(--b-path-line));
  color: var(--b-path-text);
}

.b-path__tab.is-locked {
  opacity: .45;
  cursor: not-allowed;
}

.b-path__tab:focus-visible {
  outline: 2px solid var(--b-path-accent);
  outline-offset: 2px;
}

/* En pantallas angostas las cuatro pestañas siguen mostrando su nombre: el
   número arriba y el nombre abajo, en columna. No se agranda nada (el alto
   mínimo de 44 px se mantiene), solo se reparte el ancho. */
@media (max-width: 620px) {
  .b-path__tabs { gap: 5px; }
  .b-path__tab { flex-direction: column; align-items: flex-start; gap: 3px; padding: 7px 6px; font-size: .75rem; }
  .b-path__tab::before { width: 18px; height: 18px; font-size: .625rem; }
  .b-path__tab__name { width: 100%; }
}

/* ---------------------------------------------------------------------
   2 · Una pantalla por pestaña, nunca dos.
   --------------------------------------------------------------------- */
.b-path__screens { position: relative; }
.b-path__screen { display: none; }
.b-path__screen.is-active { display: block; }
/* Antes de que buy-path.js arme el camino (las pestañas todavía sin
   data-built), el primer paso ya ocupa su lugar y la barra de pestañas su
   alto. Así, al armarse, lo de abajo no salta: medido el 24-09-2026, el
   armado empujaba 850 px hacia abajo (CLS 0,33 en ModoFan, 0,17 en REBXN). */
.b-path__tabs:not([data-built]) { min-height: 44px; }
.b-path__tabs:not([data-built]) ~ .b-path__screens > .b-path__screen:first-child { display: block; }

.b-path__screen.is-leaving--fwd { animation: b-path-out-fwd .16s cubic-bezier(.4, 0, 1, 1) both; }
.b-path__screen.is-entering--fwd { animation: b-path-in-fwd .26s cubic-bezier(.22, 1, .36, 1) both; }
.b-path__screen.is-leaving--back { animation: b-path-out-back .16s cubic-bezier(.4, 0, 1, 1) both; }
.b-path__screen.is-entering--back { animation: b-path-in-back .26s cubic-bezier(.22, 1, .36, 1) both; }

@keyframes b-path-out-fwd { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-26px); } }
@keyframes b-path-in-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes b-path-out-back { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(26px); } }
@keyframes b-path-in-back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }

/* ---------------------------------------------------------------------
   3 · Resumen siempre visible.
   Escritorio (≥1080 px): columna derecha pegada, como cuarta área del
   grid de la página. Debajo: barra fija abajo, que se aparta sola para no
   tapar el botón principal.
   --------------------------------------------------------------------- */
.b-path__summary {
  position: sticky;
  top: 96px;
  display: none;
  border: 1px solid var(--b-path-line);
  border-radius: var(--b-path-radius);
  background: var(--b-path-surface);
  padding: 16px;
}

/* La columna derecha sólo existe donde el grid de marca tiene ancho para
   sostenerla; abajo de eso manda la barra. Las dos casas de marca usan su
   propio nombre para el mismo grid (brand-base.css: .b-order; modofan.css:
   .mf-order), así que el camino cubre las dos. */
.b-order--path .b-order__summary,
.mf-order--path .mf-order__summary { grid-area: summary; }

@media (min-width: 1080px) {
  .b-path__summary { display: block; }
  .b-order--path {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.15fr) minmax(186px, .5fr);
    grid-template-areas: "intro form summary" "facts form summary";
  }
  .mf-order--path {
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.15fr) minmax(186px, .5fr);
    grid-template-areas: "intro form summary" "facts form summary";
  }
}

.b-path__summary__title {
  margin: 0 0 10px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--b-path-muted);
}

.b-path__summary__line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 6px;
  font-size: .9375rem;
  color: var(--b-path-text);
}

.b-path__summary__line span:last-child { font-weight: 600; text-align: right; }

.b-path__summary__total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--b-path-line);
  font-size: 1rem;
  font-weight: 700;
  color: var(--b-path-text);
}

.b-path__summary__steps { margin: 12px 0 0; padding: 0; list-style: none; }
.b-path__summary__steps li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  font-size: .875rem;
  color: var(--b-path-muted);
}
.b-path__summary__steps li[data-filled="si"] { color: var(--b-path-text); }

/* Barra de celular */
.b-path__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px max(14px, env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--b-path-line);
  background: color-mix(in srgb, var(--b-path-surface) 94%, transparent);
  backdrop-filter: blur(12px);
  transform: translateY(110%);
  transition: transform .22s cubic-bezier(.22, 1, .36, 1);
}

.b-path__bar[data-state="on"] { transform: translateY(0); }
.b-path__bar__text { min-width: 0; }
.b-path__bar__text strong { display: block; font-size: .9375rem; color: var(--b-path-text); }
.b-path__bar__text span { display: block; font-size: .8125rem; color: var(--b-path-muted); }

@media (max-width: 1079px) {
  .b-path__bar { display: flex; }
  /* Aire abajo para que la barra nunca tape el botón principal. */
  .b-path[data-bar="on"] .b-builder__nav { padding-bottom: 76px; }
  /* Mismo aire y mismo alto de pestañas mientras el camino se arma: en
     celular la barra nace encendida, y reservarlo evita el salto. */
  .b-path:not([data-bar]) .b-builder__nav { padding-bottom: 76px; }
  .b-path__tabs:not([data-built]) { min-height: 51px; }
  body:has(.b-path__bar[data-state="on"]) { padding-bottom: 68px; }
}

/* ---------------------------------------------------------------------
   4 · Globo del asistente: anclado al contenido, antes del botón.
   --------------------------------------------------------------------- */
.b-help {
  margin: 18px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--b-path-line);
  border-left: 3px solid var(--b-path-accent);
  border-radius: var(--b-path-radius);
  background: color-mix(in srgb, var(--b-path-accent) 6%, var(--b-path-surface));
  animation: b-help-in .26s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes b-help-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.b-help__head { display: flex; align-items: flex-start; gap: 10px; }
.b-help__line { flex: 1; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--b-path-text); }

.b-help__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px -10px 0 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--b-path-muted);
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.b-help__close:hover { color: var(--b-path-text); }
.b-help__close:focus-visible { outline: 2px solid var(--b-path-accent); outline-offset: 2px; }

.b-help__qs { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }

.b-help__q {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--b-path-line);
  border-radius: 999px;
  background: var(--b-path-surface);
  color: var(--b-path-text);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.b-help__q:hover { border-color: var(--b-path-accent); }
.b-help__q:focus-visible { outline: 2px solid var(--b-path-accent); outline-offset: 2px; }

.b-help__a {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: var(--b-path-radius);
  background: var(--b-path-surface);
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--b-path-text);
}

.b-help__free {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}.b-help__free input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--b-path-line);
  border-radius: 999px;
  background: var(--b-path-surface);
  color: var(--b-path-text);
  font: inherit;
  font-size: .9375rem;
}
.b-help__free button {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--b-path-accent);
  color: var(--b-path-accent-fg);
  font: inherit;
  font-size: .9375rem;
  font-weight: 700;
  cursor: pointer;
}
/* Mientras Asu responde el botón queda apagado, con el mismo tamaño. */
.b-help__free button[disabled] { opacity: .55; cursor: default; }

/* Hilo de la conversación: la pregunta del cliente y, debajo, la respuesta de
   Asu (ModoFan y REBXN, que no tienen el chat en la esquina). Misma letra que
   el resto del globo: nada más grande. */
.b-help__hilo { display: grid; gap: 6px; margin-top: 12px; }
.b-help__a--pregunta { background: color-mix(in srgb, var(--b-path-accent) 14%, var(--b-path-surface)); font-weight: 600; }
.b-help__a--respuesta { border: 1px solid var(--b-path-line); }
.b-help__a--espera,
.b-help__a--aviso { background: transparent; color: var(--b-path-muted); }
.b-help__a--espera { font-style: italic; }

/* En celular el globo vive en la mitad inferior, sobre el pulgar. */
@media (max-width: 860px) {
  .b-help { margin-top: 22px; }
}

/* ---------------------------------------------------------------------
   5 · Galerías por capas (pestaña "Tu idea").
   --------------------------------------------------------------------- */
.b-layers { display: block; }

.b-layer + .b-layer {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--b-path-line);
}

.b-layer__mini {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.b-layer__mini li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--b-path-line);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--b-path-muted);
}
.b-layer__mini li[data-state="done"] { border-color: color-mix(in srgb, var(--b-path-accent) 45%, var(--b-path-line)); color: var(--b-path-text); }
.b-layer__mini li[data-state="current"] { border-color: var(--b-path-accent); color: var(--b-path-text); }

.b-layer__head { margin: 0 0 4px; }
.b-layer__step { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b-path-muted); }
.b-layer__name { margin: 2px 0 0; font-size: 1.0625rem; font-weight: 700; color: var(--b-path-text); }
.b-layer__help { margin: 6px 0 0; font-size: .875rem; color: var(--b-path-muted); }

/* La galería es un fieldset: la regla de la casa (.b-builder fieldset) la
   pondría en una columna. El motor de capas la vuelve a su forma con la
   especificidad de .b-idea (dos clases le ganan a una clase + un tipo). */
.b-idea .b-gallery,
.b-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.b-gallery__item { position: relative; }

.b-gallery__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.b-gallery__item label {
  display: block;
  cursor: pointer;
  border: 2px solid var(--b-path-line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--b-path-surface);
  transition: border-color .16s ease, transform .16s ease;
}

.b-gallery__item label:hover { border-color: color-mix(in srgb, var(--b-path-accent) 55%, var(--b-path-line)); }

.b-gallery__item img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.b-gallery__item strong {
  display: block;
  padding: 7px 8px;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--b-path-text);
}

.b-gallery__item input:checked + label {
  border-color: var(--b-path-accent);
  transform: translateY(-2px);
}

.b-gallery__item input:checked + label::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--b-path-accent);
  color: var(--b-path-accent-fg);
  font-size: .75rem;
  font-weight: 700;
}

.b-gallery__item input:focus-visible + label { outline: 2px solid var(--b-path-accent); outline-offset: 2px; }

.b-gallery__skip { grid-column: 1 / -1; }

.b-layer__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.b-layer__pick { margin: 0; flex: 1; min-width: 180px; font-size: .875rem; color: var(--b-path-muted); }

/* Subir mi imagen */
.b-upload { margin-top: 14px; }

.b-upload__drop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px dashed var(--b-path-line);
  border-radius: var(--b-path-radius);
  font-size: .9375rem;
  color: var(--b-path-muted);
}

/* El control del navegador se lee "Choose File" en inglés: se oculta (sigue
   alcanzable con el teclado) y manda el botón propio, en español. */
.b-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.b-upload__btn {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 8px 14px;
  border: 1px solid var(--b-path-line);
  border-radius: 999px;
  color: var(--b-path-text);
  font-size: .875rem;
  font-weight: 600;
}

.b-upload__drop { cursor: pointer; flex-wrap: wrap; }
.b-upload__drop:hover .b-upload__btn,
.b-upload__drop:focus-within .b-upload__btn { border-color: var(--b-path-accent); }
.b-upload__drop:focus-within { outline: 2px solid var(--b-path-accent); outline-offset: 2px; }

.b-upload__preview { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.b-upload__preview img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--b-path-line);
}
.b-upload__preview p { margin: 0; font-size: .875rem; color: var(--b-path-text); }
.b-upload__clear {
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: var(--b-path-muted);
  font: inherit;
  font-size: .8125rem;
  text-decoration: underline;
  cursor: pointer;
}

.b-upload__error { margin: 8px 0 0; font-size: .875rem; color: var(--b-path-accent); }

/* Cierre de capas */
.b-layers__done { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--b-path-line); border-radius: var(--b-path-radius); }
.b-layers__done h3 { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--b-path-muted); }
.b-layers__done ul { margin: 0; padding: 0; list-style: none; }
.b-layers__done li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: .875rem; color: var(--b-path-text); }
.b-layers__done li span:last-child { color: var(--b-path-muted); text-align: right; }

/* ---------------------------------------------------------------------
   5b · Las cuatro capas nuevas: estilo, diseño, colores e identidad.
   Una capa a la vez, con mini-avance, saltables, y la vista previa viva.
   Todos los toques miden 44 px o más y ninguna tipografía se agranda.
   --------------------------------------------------------------------- */
/* 5 · Vista previa de verdad: en escritorio va a la izquierda y la capa a
   la derecha (dos columnas) si cabe; en celular, una tarjeta pegada arriba
   de ~150 px con la prenda grande a la izquierda y "Capa 2 de 4 · lo que
   falta" a la derecha. El dibujo es el modelo real elegido en Producto. */
/* min-width: 0 en el propio contenedor: el fieldset de la pestaña es una
   grilla y, sin esto, la galería del carrusel lo estiraba a su ancho natural
   (los 8 estilos) y el deslizamiento no existía. */
.b-idea { display: block; min-width: 0; }
.b-idea__aside { margin: 0 0 16px; min-width: 0; }
.b-idea__main { min-width: 0; }

.b-preview {
  padding: 12px;
  border: 1px solid var(--b-path-line);
  border-radius: var(--b-path-radius);
  background: color-mix(in srgb, var(--b-path-accent) 4%, var(--b-path-surface));
}
.b-preview__frame {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--b-path-text) 5%, transparent);
  border-radius: 12px;
  overflow: hidden;
}
.b-preview svg { display: block; width: 100%; max-width: 240px; height: auto; }
.b-preview__meta { margin-top: 8px; }
.b-preview__name { margin: 0; font-size: .875rem; font-weight: 700; color: var(--b-path-text); }
.b-preview__hint { margin: 2px 0 0; font-size: .75rem; color: var(--b-path-muted); }
.b-preview__count {
  margin: 0 0 4px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--b-path-muted);
}
.b-preview__missing { margin: 4px 0 0; font-size: .8125rem; font-weight: 700; color: var(--b-path-text); }

/* Pulso suave al cambiar un color (260 ms): la zona respira, no se mueve. */
.b-preview__frame.is-pulsing { animation: b-preview-pulse 260ms var(--b-ease); }
@keyframes b-preview-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

@media (min-width: 768px) {
  .b-idea { display: grid; grid-template-columns: minmax(220px, 0.85fr) minmax(0, 1.15fr); gap: 22px; align-items: start; }
  .b-idea__aside { margin: 0; position: sticky; top: 12px; }
}

@media (max-width: 767px) {
  /* Tarjeta pegada arriba, compacta: prenda grande a la izquierda, la capa
     y lo que falta a la derecha. */
  .b-idea__aside { position: sticky; top: 0; z-index: 6; padding: 6px 0; background: var(--b-path-surface); }
  .b-preview { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
  .b-preview__frame { flex: 0 0 96px; width: 96px; height: 128px; }
  .b-preview svg { max-width: 84px; max-height: 124px; }
  .b-preview__meta { margin-top: 0; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .b-preview__frame.is-pulsing { animation: none; }
}

/* Mini-avance: "Capa 2 de 4" y los puntos que se llenan. */
.b-step { margin: 0 0 14px; }
.b-step__count { margin: 0 0 6px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--b-path-muted); }
.b-step__dots { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.b-step__dots li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--b-path-line); border-radius: 999px; font-size: .75rem; font-weight: 600; color: var(--b-path-muted); }
.b-step__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--b-path-line); }
.b-step__dots li[data-state="done"] { border-color: color-mix(in srgb, var(--b-path-accent) 45%, var(--b-path-line)); color: var(--b-path-text); }
.b-step__dots li[data-state="done"] .b-step__dot { background: var(--b-path-accent); }
.b-step__dots li[data-state="current"] { border-color: var(--b-path-accent); color: var(--b-path-text); }
.b-step__dots li[data-state="current"] .b-step__dot { background: var(--b-path-accent); }

.b-layer[hidden] { display: none; }
.b-layer__name { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--b-path-text); }
.b-layer__help { margin: 6px 0 0; font-size: .875rem; color: var(--b-path-muted); }
.b-layer__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.b-layer__skip,
.b-layer__go {
  min-height: 44px; padding: 8px 16px; border-radius: 999px;
  font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
}
.b-layer__skip { border: 1px solid var(--b-path-line); background: transparent; color: var(--b-path-muted); }
.b-layer__skip:hover { color: var(--b-path-text); border-color: var(--b-path-accent); }
.b-layer__go { border: 0; background: var(--b-path-accent); color: var(--b-path-accent-fg); }
.b-layer__go:hover { filter: brightness(1.06); }
.b-layer__skip:focus-visible, .b-layer__go:focus-visible { outline: 2px solid var(--b-path-accent); outline-offset: 2px; }

.b-block { margin: 0 0 18px; }
.b-block > h4 { margin: 0 0 8px; font-size: .9375rem; font-weight: 700; color: var(--b-path-text); }
.b-small { font-size: .8125rem; color: var(--b-path-muted); }
.b-conteo { margin: 8px 0 0; font-size: .875rem; color: var(--b-path-muted); }
.b-nota { margin: 12px 0 0; font-size: .8125rem; color: var(--b-path-muted); }
.b-field { margin: 0 0 16px; }
.b-field > label { display: block; margin: 0 0 6px; font-size: .9375rem; font-weight: 600; color: var(--b-path-text); }
.b-field > input[type="text"],
.b-field > input[type="url"],
.b-field > input[type="number"] {
  width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--b-path-line);
  border-radius: 10px; background: var(--b-path-surface); color: var(--b-path-text); font: inherit; font-size: 1rem;
}
.b-zonas { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .b-zonas { grid-template-columns: repeat(3, 1fr); } }

/* Chips (gusta, símbolo, sí/no) */
.b-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; padding: 0; border: 0; }
.b-chips > legend { width: 100%; margin: 0 0 6px; font-size: .9375rem; font-weight: 600; color: var(--b-path-text); }
.b-chip { position: relative; display: inline-flex; }
.b-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.b-chip label {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--b-path-line); border-radius: 999px; background: var(--b-path-surface);
  color: var(--b-path-text); font-size: .875rem; font-weight: 600; cursor: pointer;
}
.b-chip input:checked + label { border-color: var(--b-path-accent); background: color-mix(in srgb, var(--b-path-accent) 14%, transparent); }
.b-chip input:focus-visible + label { outline: 2px solid var(--b-path-accent); outline-offset: 2px; }
.b-choices-inline { display: flex; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.b-stepper { display: inline-flex; align-items: center; gap: 8px; }
.b-stepper button { min-width: 44px; min-height: 44px; border: 1px solid var(--b-path-line); border-radius: 10px; background: var(--b-path-surface); color: var(--b-path-text); font: inherit; font-size: 1.1rem; cursor: pointer; }
.b-stepper input { width: 64px; min-height: 44px; text-align: center; border: 1px solid var(--b-path-line); border-radius: 10px; font: inherit; font-size: 1rem; color: var(--b-path-text); }

/* Paleta: toques que suman y quitan, con el orden del color principal. */
.b-paleta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.b-swatch {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 6px 12px 6px 6px; border: 2px solid var(--b-path-line);
  border-radius: 999px; background: var(--b-path-surface); color: var(--b-path-text);
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
}
.b-swatch i { width: 26px; height: 26px; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .18); }
.b-swatch[aria-pressed="true"] { border-color: var(--b-path-accent); }
.b-swatch[aria-pressed="true"]::after {
  content: attr(data-order); position: absolute; top: -6px; right: -4px;
  display: grid; place-items: center; width: 20px; height: 20px; border-radius: 999px;
  background: var(--b-path-accent); color: var(--b-path-accent-fg); font-size: .7rem; font-weight: 800;
}
.b-swatch--no[aria-pressed="true"] { border-color: var(--b-path-text); }
.b-swatch--no[aria-pressed="true"] i { background-image: linear-gradient(135deg, transparent 45%, var(--b-path-text) 45%, var(--b-path-text) 55%, transparent 55%); }

/* Pinterest y campo de enlace */
.b-pin { margin: 0 0 14px; }
.b-pin__title { margin: 0 0 6px; font-size: .875rem; font-weight: 700; color: var(--b-path-text); }
.b-pin__row { display: flex; flex-wrap: wrap; gap: 8px; }
.b-pin__btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border: 1px solid var(--b-path-line); border-radius: 999px; background: var(--b-path-surface);
  color: var(--b-path-text); font-size: .8125rem; font-weight: 600; text-decoration: none;
}
.b-pin__btn:hover { border-color: var(--b-path-accent); }

/* Cierre de capas: tarjeta "Tu brief" */
.b-brief { margin-top: 4px; padding: 16px; border: 1px solid var(--b-path-line); border-radius: var(--b-path-radius); }
.b-brief__title { margin: 0 0 10px; font-size: 1rem; font-weight: 800; color: var(--b-path-text); }
.b-brief__rows { margin: 0; padding: 0; list-style: none; }
.b-brief__rows li { margin: 0; }
.b-brief__rows button {
  display: flex; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px;
  padding: 8px 4px; border: 0; border-bottom: 1px solid var(--b-path-line);
  background: transparent; color: var(--b-path-text); font: inherit; font-size: .875rem; text-align: left; cursor: pointer;
}
.b-brief__rows button span:last-child { color: var(--b-path-muted); text-align: right; }
.b-brief__rows button:hover span:last-child { color: var(--b-path-accent); }
.b-brief__missing { margin: 12px 0 0; font-size: .875rem; font-weight: 700; color: var(--b-path-text); }
.b-brief__ok { margin: 12px 0 0; font-size: .875rem; color: var(--b-path-muted); }
.b-brief__restart {
  margin-top: 14px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--b-path-line);
  border-radius: 999px; background: transparent; color: var(--b-path-text); font: inherit; font-size: .875rem; font-weight: 700; cursor: pointer;
}

/* ---------------------------------------------------------------------
   5c · Correcciones de "Tu idea" (revisión de Claude).
   La casa de marca pone sus fieldset en una columna (.b-builder fieldset);
   como los chips, la paleta y la galería del motor SON fieldsets, esa regla
   los estiraba uno por línea. Acá se devuelven a fila con la especificidad
   de .b-idea, y se compactan los colores y la galería para el celular.
   --------------------------------------------------------------------- */

/* Los fieldset del motor (chips, paleta y galería) no deben medir su
   min-content: fieldsets nacen con min-width min-content y eso estiraba la
   galería del carrusel. En ModoFan/REBXN lo tapaba `.b-builder fieldset`; en
   el cotizador de Ensutex no existe esa regla, así que se fija acá. */
.b-idea .b-chips,
.b-idea .b-paleta,
.b-idea .b-gallery,
.b-idea .b-choices-inline { min-width: 0; }

/* 1 · Chips en fila (gusta, símbolos, sí/no, tema y para quién). */
.b-idea .b-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}
.b-idea .b-choices-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}

/* 6 · Elegido = encendido: fondo del acento de la marca y texto con
   contraste AA (el color de texto del acento lo fija cada marca). */
.b-idea .b-chip input:checked + label {
  background: var(--b-path-accent);
  border-color: var(--b-path-accent);
  color: var(--b-path-accent-fg);
}
.b-idea .b-chip input:checked + label::after {
  content: "✓";
  margin-left: 6px;
  font-weight: 800;
}

/* 2 · Colores compactos: grilla de círculos de 44 px a lo ancho de la
   tarjeta (6 por fila a 390 px), con el nombre chico debajo. La marca de
   orden (1, 2, 3) queda como insignia sobre el círculo. En escritorio
   vuelven a ser chips con nombre. */
.b-idea .b-paleta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  gap: 10px 6px;
  justify-items: center;
  margin: 0;
  padding: 0;
  border: 0;
}
.b-idea .b-swatch {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  max-width: 56px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--b-path-text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.b-idea .b-swatch i {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 2px solid var(--b-path-line);
}
.b-idea .b-swatch span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 600;
  color: var(--b-path-muted);
}
.b-idea .b-swatch[aria-pressed="true"] i { border-color: var(--b-path-accent); box-shadow: inset 0 0 0 3px var(--b-path-surface); }
.b-idea .b-swatch[aria-pressed="true"] span { color: var(--b-path-text); }
.b-idea .b-swatch[aria-pressed="true"]::after {
  content: attr(data-order);
  position: absolute;
  top: -4px;
  right: calc(50% - 24px);
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--b-path-accent);
  color: var(--b-path-accent-fg);
  font-size: .7rem;
  font-weight: 800;
}
.b-idea .b-swatch--no[aria-pressed="true"] i {
  border-color: var(--b-path-text);
  background-image: linear-gradient(135deg, transparent 44%, var(--b-path-text) 44%, var(--b-path-text) 56%, transparent 56%);
}
.b-idea .b-swatch--no[aria-pressed="true"]::after { content: none; }

/* 4 · Galería de estilos en carrusel en celular; grilla de 4 en escritorio. */
@media (max-width: 767px) {
  .b-idea .b-gallery {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .b-idea .b-gallery__item {
    flex: 0 0 clamp(104px, 40vw, 128px);
    scroll-snap-align: start;
  }
  .b-idea .b-gallery__skip { flex: 0 0 128px; }
}
.b-gallery__hint {
  margin: 6px 0 0;
  font-size: .8125rem;
  color: var(--b-path-muted);
}
@media (min-width: 768px) {
  .b-gallery__hint { display: none; }
  /* En escritorio los colores vuelven a ser chips con el nombre al lado. */
  .b-idea .b-paleta { display: flex; flex-wrap: wrap; gap: 8px; justify-items: stretch; }
  .b-idea .b-swatch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    max-width: none;
    min-height: 44px;
    padding: 6px 12px 6px 6px;
    border: 2px solid var(--b-path-line);
    border-radius: 999px;
    background: var(--b-path-surface);
  }
  .b-idea .b-swatch i { width: 26px; height: 26px; border-width: 1px; }
  .b-idea .b-swatch span { max-width: 150px; font-size: .8125rem; color: var(--b-path-text); }
  .b-idea .b-swatch[aria-pressed="true"] i { box-shadow: none; }
  .b-idea .b-swatch[aria-pressed="true"]::after { top: -6px; right: -4px; }
}

/* 7 · Alto por capa: en 390×844 ninguna capa pasa de 1,6 pantallas (~1350
   px) sin contar la vista previa. Se recorta el aire que sobra: la galería y
   la paleta ya no ocupan filas enteras, los chips van más juntos y los
   bloques no dejan tanto espacio. No se achica ninguna tipografía ni los
   toques de 44 px. */
@media (max-width: 767px) {
  .b-idea .b-layer__help { margin-top: 4px; }
  .b-idea .b-block { margin-bottom: 10px; }
  .b-idea .b-block > h4 { margin-bottom: 4px; }
  .b-idea .b-chips { gap: 6px; margin-bottom: 10px; }
  .b-idea .b-choices-inline { margin-bottom: 8px; }
  .b-idea .b-upload { margin-top: 8px; }
  .b-idea .b-upload__drop { padding: 10px 12px; }
  .b-idea .b-upload__preview { margin-top: 6px; }
  .b-idea .b-upload__preview img { width: 56px; height: 56px; }
  .b-idea .b-field { margin-bottom: 10px; }
  .b-idea .b-pin { margin-bottom: 10px; }
  .b-idea .b-pin__row { gap: 6px; }
  .b-idea .b-nota, .b-idea .b-conteo { margin-top: 6px; }
  .b-idea .b-layer__nav { margin-top: 12px; }
}

/* ---------------------------------------------------------------------
   6 · Cola local de archivos que aún no se pudieron subir.
   --------------------------------------------------------------------- */
.b-queue { margin-top: 10px; font-size: .875rem; color: var(--b-path-muted); }

/* ---------------------------------------------------------------------
   7 · Borrador guardado y cierre por WhatsApp (las tres marcas).
   El bloque de la pantalla de gracias: la referencia del pedido con su
   botón Copiar y, si hay número configurado, "Seguir por WhatsApp".
   Mismos tamaños de la casa —ni tipografías ni botones más grandes— y los
   objetivos táctiles de 44 px del resto del camino. Los colores salen de
   los tokens de cada marca, con respaldo neutro para Ensutex.
   --------------------------------------------------------------------- */
.b-borrador {
  display: grid;
  gap: 10px;
  justify-items: start;
  margin: 0 0 22px;
  padding: 14px 16px;
  text-align: left;
  background: var(--b-path-surface);
  border: 1px solid var(--b-path-line);
  border-radius: var(--b-path-radius);
}
.b-borrador[data-state="error"] { border-color: var(--b-path-accent); }
.b-borrador__label {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--b-path-muted);
}
.b-borrador__prueba {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--b-path-accent);
}
.b-borrador__ref {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.b-borrador__ref strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--b-path-text);
  word-break: break-all;
}
.b-borrador__copiar,
.b-borrador__reintentar,
.b-borrador__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  font: inherit;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 999px;
  cursor: pointer;
}
.b-borrador__copiar {
  border: 1px solid var(--b-path-line);
  background: transparent;
  color: var(--b-path-text);
}
.b-borrador__reintentar,
.b-borrador__wa {
  border: 0;
  background: var(--b-path-text);
  color: var(--b-path-surface);
}
.b-borrador__copiar:hover,
.b-borrador__reintentar:hover,
.b-borrador__wa:hover {
  background: var(--b-path-accent);
  color: var(--b-path-accent-fg);
  border-color: var(--b-path-accent);
}
.b-borrador__reintentar[disabled] { opacity: .55; cursor: not-allowed; }
.b-borrador__aviso { margin: 0; font-size: .85rem; font-weight: 700; color: var(--b-path-text); }
.b-borrador__nota { margin: 0; font-size: .75rem; line-height: 1.45; color: var(--b-path-muted); }
.b-borrador__nota a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------------
   7b · La tela aparece después del modelo: entrada propia y tarjetas.
   El paso de la tela no existe en pantalla hasta que hay un modelo
   elegido; cuando aparece, se desliza 12-16 px y se funde en 260 ms con
   la misma curva que el cambio de pestaña.
   --------------------------------------------------------------------- */
.b-fabrics__card {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: min(240px, 100%);
  padding: 1rem;
  border: 1px solid var(--b-path-line);
  border-radius: var(--b-path-radius);
  background: color-mix(in srgb, var(--b-path-text) 4%, transparent);
  cursor: pointer;
  transition: border-color 200ms cubic-bezier(.22, 1, .36, 1),
              background-color 200ms cubic-bezier(.22, 1, .36, 1);
}
/* La tarjeta entera es el objetivo: la etiqueta es sólo el nombre, sin borde
   propio, así el tacto y el precio también se pueden tocar. */
.b-fabrics__card label {
  padding: 0;
  border: 0;
  min-height: 0;
  background: none;
  color: inherit;
  font-size: 1rem;
  font-weight: 700;
}
.b-fabrics__card .b-fabrics__note { font-size: .85rem; line-height: 1.45; color: var(--b-path-muted); }
.b-fabrics__card span { font-size: .85rem; line-height: 1.45; color: var(--b-path-muted); }
.b-fabrics__card em {
  margin-top: .35rem;
  font-style: normal;
  font-weight: 800;
  font-size: .9rem;
  color: var(--b-path-text);
}
/* Elegida: el borde de toda la tarjeta, con el color de la marca. */
.b-chip.b-fabrics__card:has(input:checked) {
  border-color: var(--b-path-accent);
  background: color-mix(in srgb, var(--b-path-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px var(--b-path-accent);
}
/* Respaldo para un navegador sin :has(): el nombre también se pinta. */
.b-fabrics__card input:checked + label { color: var(--b-path-text); }
/* La regla general de chips (brand-base y rebxn) pinta el nombre elegido
   como píldora blanca; en la tarjeta de tela lo que se enciende es la
   tarjeta entera, así que el nombre queda sin fondo y legible. */
.b-chip.b-fabrics__card input:checked + label,
.rx .b-chip.b-fabrics__card input:checked + label {
  background: none;
  border-color: transparent;
  box-shadow: none;
  color: var(--b-path-text);
}
.b-fabric-reveal { animation: b-fabric-in .26s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes b-fabric-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
/* La línea que avisa que la tela elegida no va con el modelo nuevo. */
.b-tela-aviso {
  margin: 0;
  font-size: .875rem;
  font-weight: 700;
  color: var(--b-path-text);
}
.b-tela-aviso[hidden] { display: none; }

/* ---------------------------------------------------------------------
   8 · Movimiento reducido: solo desvanecido, nada se desplaza.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .b-help { animation: b-path-fade .2s ease both; }
  .b-fabric-reveal { animation: b-path-fade .2s ease both; }
  .b-path__screen.is-leaving--fwd,
  .b-path__screen.is-leaving--back { animation: b-path-fade-out .12s ease both; }
  .b-path__screen.is-entering--fwd,
  .b-path__screen.is-entering--back { animation: b-path-fade .2s ease both; }
  .b-path__bar { transition: none; }
  .b-gallery__item input:checked + label { transform: none; }
  @keyframes b-path-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes b-path-fade-out { from { opacity: 1; } to { opacity: 0; } }
}

/* El bloque de telas recibe el foco al aparecer (para el lector de
   pantalla); no se dibuja anillo porque no es un control. */
.b-fabric-reveal[tabindex="-1"]:focus,
[data-fabrics][tabindex="-1"]:focus { outline: none; }

/* 27-sep-2026 · Las pantallas del camino nunca llevan el efecto de aparición al hacer scroll. animations.js le pone
   .scene-reveal (opacidad 0) a toda <section> y la regla que las volvía a mostrar (.scene-reveal--in) se perdió el
   17-jul (ce046ed): en escritorio, la pestaña «Producto» del catálogo salía en blanco (medido en ensutex.com). Las
   muestra y esconde la cáscara del camino (display), no el scroll. */
.b-path__screen.scene-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }