/* =====================================================================
   CAMINO DE COMPRA DE ENSUTEX — la capa de Ensutex sobre el camino comun
   ---------------------------------------------------------------------
   Un solo camino de compra: Producto → Tu idea → Tallas → Tus datos.
   La cascara (pestanas, pantallas, resumen, globo, boton que dice a donde
   lleva) la pone assets/brands/shared/buy-path.css; aca vive solo lo que
   es de Ensutex: su paleta, su grilla de prendas del catalogo, los
   colores del escudo y la lista de tallas por persona.

   Reglas que se respetan a proposito:
   · No se agranda la tipografia ni los botones (texto 0.9375–1rem, botones
     de 44 px hacia arriba, igual que el resto del sitio).
   · Todo lo tocable mide 44 px como minimo (tambien en celular).
   · El resumen nunca tapa el boton: en escritorio es columna derecha y en
     celular es la barra fija de abajo, que se aparta sola.
   ===================================================================== */

/* Tokens del camino, atados a la paleta de Ensutex. El resumen y la barra
   son hermanos del camino (no descendientes), por eso tambien se declaran
   en ellos. */
.camino-ensutex,
.b-path__summary.camino-ensutex__summary,
.b-path__bar.camino-ensutex__bar {
  --b-path-surface: #ffffff;
  --b-path-text: #191817;
  --b-path-muted: #5c5c66;
  --b-path-line: rgba(0, 0, 0, .12);
  --b-path-accent: #e20613;
  --b-path-accent-fg: #ffffff;
  --b-path-radius: 16px;
}

/* ---------------------------------------------------------------------
   1 · Cabecera de la seccion: el saludo y el contacto siguen estando, en
   dos columnas, para que el camino tenga todo el ancho de abajo.
   El look de los enlaces lo sigue poniendo catalog-premium-v2.css
   (#contacto > div > div:first-child a): aca solo se reparte el ancho.
   --------------------------------------------------------------------- */
.camino-ensutex__head {
  display: grid;
  gap: 8px;
  margin: 0 0 30px;
}

.camino-ensutex__head-copy h2 { margin: 0 0 12px; }

.camino-ensutex__head-copy p {
  margin: 0;
  max-width: 46ch;
  color: #5b5753;
  font-size: 1rem;
  line-height: 1.6;
}

.camino-ensutex__head-links { display: block; }

/* Los dos enlaces de contacto (correo e Instagram) conservan el look que les
   daba catalog-premium-v2.css con `#contacto > div > div:first-child a`:
   ese selector ya no los alcanza porque ahora viven en la segunda columna de
   la cabecera. En vez de tocar la hoja del catálogo entero, se replica acá
   con los mismos tokens (--catalog-ink, --catalog-line). */
.camino-ensutex__head-links a {
  padding: .55rem 0;
  margin: 0;
  border-bottom: 1px solid var(--catalog-line, rgba(14, 13, 12, .12));
  border-radius: 0;
}

.camino-ensutex__head-links a > div:first-child {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  background: transparent;
  color: var(--catalog-ink, #080807);
  box-shadow: none;
}


@media (min-width: 900px) {
  .camino-ensutex__head {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 340px);
    align-items: start;
    gap: 32px;
  }
}

/* El titulo de cada pantalla del camino. No se agranda: 1.125rem, el mismo
   tamano que los titulos del formulario. */
.camino-ensutex__title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #191817;
}

.camino-ensutex__title:focus { outline: none; }
.camino-ensutex__title:focus-visible { outline: 2px solid #e20613; outline-offset: 4px; }

/* ---------------------------------------------------------------------
   2 · Grilla: pantallas a la izquierda, resumen a la derecha.
   --------------------------------------------------------------------- */
/* El camino es ítem de esta grilla: sin min-width 0 se niega a encogerse por
   debajo del ancho de su contenido (la galería de estilos) y el carrusel no
   deslizaba: desbordaba la tarjeta. Mismo motivo que en brand-base.css. */
.camino-ensutex__layout { display: grid; gap: 26px; }
.camino-ensutex__layout > .b-path { min-width: 0; }

@media (min-width: 1080px) {
  .camino-ensutex__layout { grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); align-items: start; gap: 34px; }
}

.camino-ensutex__card {
  border: 1px solid var(--b-path-line);
  border-radius: var(--b-path-radius);
  background: #ffffff;
  padding: 20px;
}

@media (max-width: 620px) {
  .camino-ensutex__card { padding: 15px; }
}

/* ---------------------------------------------------------------------
   3 · Botones del camino (Ensutex no usa .b-btn, que es de las casas de
   marca). Mismo alto y mismo texto que el resto del sitio.
   --------------------------------------------------------------------- */
.camino-ensutex__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
}

.camino-ensutex__nav .camino-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: .9375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
  background-image: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}

.camino-btn--primary { background: #191817; color: #fff; }
.camino-btn--primary:hover { background: #e20613; }
.camino-btn--primary:active { transform: scale(.985); }
.camino-btn--ghost { background: transparent; border-color: rgba(0, 0, 0, .18); color: #191817; order: -1; }
.camino-btn--ghost:hover { border-color: #191817; }
.camino-ensutex__nav [hidden] { display: none !important; }

/* La barra del celular no puede tapar el boton principal: se le deja aire
   abajo igual que en las casas de marca (.b-builder__nav). */
@media (max-width: 1079px) {
  .b-path.camino-ensutex[data-bar="on"] .camino-ensutex__nav { padding-bottom: 76px; }
}

/* ---------------------------------------------------------------------
   4 · Pestaña 1: prendas del catalogo (con su precio unitario) + tela +
   cantidad. El minimo de 8 prendas se dice desde aca, no al final.
   --------------------------------------------------------------------- */
.camino-ensutex__lead {
  margin: 0 0 14px;
  font-size: .9375rem;
  line-height: 1.5;
  color: #5b5753;
}

.camino-ensutex__lead strong { color: #191817; }

.camino-estimacion {
  display: grid;
  gap: 10px;
  margin: 16px 0;
  padding: 4px 0 4px 14px;
  border-left: 3px solid #e20613;
}

.camino-estimacion p {
  margin: 0;
  color: #5b5753;
  font-size: .9375rem;
  line-height: 1.5;
}

.camino-estimacion strong { color: #191817; }

.camino-prendas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* La grilla de modelos en celular no se toca acá: la fija quote-refresh.css, que
   carga después en catalogo.html (línea 402) y gana por especificidad. Una regla
   con #contacto puesta acá abajo se declara pero no se pinta —y el 04-oct una de
   esas (tres columnas) alargó la lista a 1.323px y voló el presupuesto del
   control D3 (≤1.050px). El tamaño de la letra y el número de columnas viven
   juntos, en el mismo archivo, para que no vuelvan a separarse. */

.camino-prenda { position: relative; }

.camino-prenda input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.camino-prenda label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  min-height: 44px;
  padding: 8px;
  border: 1px solid var(--b-path-line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.camino-prenda label:hover { border-color: rgba(226, 6, 19, .45); }
.camino-prenda input:focus-visible + label { outline: 2px solid #e20613; outline-offset: 2px; }

.camino-prenda input:checked + label {
  border-color: #e20613;
  box-shadow: inset 0 0 0 1px #e20613;
}

.camino-prenda img {
  width: 100%;
  height: 74px;
  object-fit: contain;
  background: #f9f8f8;
  border-radius: 8px;
}

.camino-prenda strong { font-size: .8125rem; font-weight: 700; line-height: 1.25; color: #191817; }
.camino-prenda span { font-size: .75rem; color: #5c5c66; }

.camino-prenda input:checked + label strong::after {
  content: " ✓";
  color: #e20613;
}

/* Precio y cantidad por prenda elegida */
.camino-lineas { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.camino-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 14px;
  border: 1px solid var(--b-path-line);
  border-radius: 12px;
  background: #fbfbfc;
}

.camino-linea__name { font-size: .9375rem; font-weight: 700; color: #191817; }
.camino-linea__meta { display: block; font-size: .8125rem; color: #5c5c66; }
.camino-linea__qty { display: flex; align-items: center; gap: 8px; font-size: .8125rem; font-weight: 700; color: #5c5c66; }

.camino-linea__qty input {
  width: 5.5rem;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 10px;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  color: #191817;
}

/* Cantidad − / número / +. Se eligió stepper y no barra de rango porque un
   pedido real lleva cifras exactas (23 prendas): la barra no las da con el
   pulgar y aquí además se puede escribir. Los dos botones y el campo miden
   44 px de alto, el mínimo táctil. */
.camino-step {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.camino-linea__qty .camino-step input {
  width: 3.75rem;
  border: 0;
  border-left: 1px solid rgba(0, 0, 0, .10);
  border-right: 1px solid rgba(0, 0, 0, .10);
  border-radius: 0;
}

.camino-step__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #191817;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.camino-step__btn:hover:not(:disabled) { background: rgba(0, 0, 0, .06); }
.camino-step__btn:active:not(:disabled) { background: rgba(0, 0, 0, .12); }
.camino-step__btn:disabled { opacity: .35; cursor: not-allowed; }

/* El foco va por dentro: el contenedor recorta, y un outline con desplazamiento
   positivo quedaría cortado en los bordes. */
.camino-step__btn:focus-visible { outline: 2px solid #e20613; outline-offset: -2px; }
.camino-linea__qty .camino-step input:focus { outline: 2px solid #e20613; outline-offset: -2px; }

.camino-linea__quitar {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: #b0000d;
  font: inherit;
  font-size: .8125rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Tela */
.camino-telas { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.camino-telas[hidden] { display: none !important; }
.camino-telas legend { width: 100%; padding: 0 0 4px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #5c5c66; }

.camino-tela { position: relative; flex: 1 1 240px; max-width: 100%; }
.camino-tela input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.camino-tela label {
  display: grid;
  gap: 2px;
  align-content: start;
  height: 100%;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--b-path-line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.camino-tela label strong { font-size: .9375rem; font-weight: 800; color: #191817; }
.camino-tela label span { font-size: .75rem; font-weight: 600; line-height: 1.45; color: #5c5c66; }
/* El precio de esta tela para el modelo elegido: la cifra viva del motor. */
.camino-tela label em {
  margin-top: 6px;
  font-style: normal;
  font-weight: 800;
  font-size: .8125rem;
  color: #191817;
}
.camino-tela input:checked + label { border-color: #e20613; box-shadow: inset 0 0 0 1px #e20613; }
.camino-tela input:focus-visible + label { outline: 2px solid #e20613; outline-offset: 2px; }

/* La línea que avisa que la tela elegida no va con el modelo nuevo. */
.camino-tela-aviso { margin: 10px 0 0; font-size: .875rem; font-weight: 700; color: #b0000d; }
.camino-tela-aviso[hidden] { display: none !important; }

/* Contador del minimo */
.camino-minimo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--b-path-line);
  border-left: 4px solid #5c5c66;
  border-radius: 10px;
  background: #f9f8f8;
  font-size: .875rem;
  font-weight: 700;
  color: #191817;
}

.camino-minimo[data-state="ok"] { border-left-color: #15803d; background: #f8f6f5; }
.camino-minimo[data-state="falta"] { border-left-color: #e20613; background: #fbfaf9; }
.camino-minimo span { font-weight: 600; color: #5c5c66; }

/* ---------------------------------------------------------------------
   5 · Pestaña 2: escudo, colores y referencias.
   --------------------------------------------------------------------- */
.camino-bloque { margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.camino-bloque:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 8px; }
.camino-bloque > h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: #191817; }
.camino-bloque > p { margin: 0 0 12px; font-size: .875rem; line-height: 1.55; color: #5c5c66; }

.camino-opciones { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.camino-opcion { position: relative; }
.camino-opcion input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.camino-opcion label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--b-path-line);
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 700;
  color: #191817;
  cursor: pointer;
}

.camino-opcion input:checked + label { border-color: #e20613; box-shadow: inset 0 0 0 1px #e20613; }
.camino-opcion input:focus-visible + label { outline: 2px solid #e20613; outline-offset: 2px; }

/* Paleta: bloques de color, no imagenes de terceros. */
.camino-paleta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }

.camino-swatch { position: relative; }
.camino-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.camino-swatch label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 68px;
  min-height: 44px;
  padding: 8px 6px;
  border: 1px solid var(--b-path-line);
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 700;
  color: #191817;
  cursor: pointer;
}

.camino-swatch i {
  display: block;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 999px;
}

.camino-swatch input:checked + label { border-color: #e20613; box-shadow: inset 0 0 0 1px #e20613; }
.camino-swatch input:focus-visible + label { outline: 2px solid #e20613; outline-offset: 2px; }
.camino-swatch input:disabled + label { opacity: .45; cursor: not-allowed; }

.camino-conteo { margin: 10px 0 0; font-size: .8125rem; font-weight: 700; color: #5c5c66; }

.camino-texto {
  width: 100%;
  min-height: 96px;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  color: #191817;
  resize: vertical;
}

.camino-campo {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 12px;
  font: inherit;
  font-size: 1rem;
  color: #191817;
}

.camino-texto:focus, .camino-campo:focus, .camino-linea__qty input:focus { outline: 2px solid #e20613; outline-offset: 1px; }

.camino-ayuda { margin: 8px 0 0; font-size: .8125rem; line-height: 1.5; color: #5c5c66; }
.camino-ayuda a { color: #191817; font-weight: 700; }

/* Título de cada grupo dentro de una pestaña (prendas, escudo, colores...). */
.camino-grupo {
  margin: 0 0 8px;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5c5c66;
}

/* Los errores salen bajo el campo, en el momento, nunca al final del camino. */
.camino-error { margin: 8px 0 0; font-size: .875rem; font-weight: 700; color: #b0000d; }
.camino-error:empty { display: none; }

/* Etiquetas de los campos de una pestaña, caja que se abre y aviso de la
   cola local de imágenes. */
.camino-etiqueta {
  display: block;
  margin: 14px 0 6px;
  font-size: .8125rem;
  font-weight: 700;
  color: #191817;
}

.camino-bloque__caja { margin-top: 4px; }

.camino-cola {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--b-path-line);
  border-radius: 10px;
  background: #f9f8f8;
  font-size: .8125rem;
  line-height: 1.5;
  color: #5c5c66;
}

/* ---------------------------------------------------------------------
   6 · Pestaña 3: lista por persona (nombre y talla de cada una).
   --------------------------------------------------------------------- */
.camino-personas { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.camino-persona {
  display: grid;
  grid-template-columns: auto minmax(0, 1.2fr) minmax(0, .9fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--b-path-line);
  border-radius: 12px;
  background: #fbfbfc;
}

.camino-persona__n { font-size: .8125rem; font-weight: 800; color: #5c5c66; min-width: 2ch; }
.camino-persona input, .camino-persona select {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, .16);
  border-radius: 10px;
  font: inherit;
  font-size: .9375rem;
  color: #191817;
  background: #fff;
}

@media (max-width: 560px) {
  .camino-persona { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n nombre" "n talla"; }
  .camino-persona__n { grid-area: n; }
  .camino-persona__nombre { grid-area: nombre; }
  .camino-persona__talla { grid-area: talla; }
}

.camino-tallas-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 0; }
.camino-tallas-acciones select { min-height: 44px; padding: 8px 12px; border: 1px solid rgba(0, 0, 0, .16); border-radius: 10px; font: inherit; font-size: .9375rem; background: #fff; color: #191817; }

.camino-tallas-acciones button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: .875rem;
  font-weight: 800;
  color: #191817;
  cursor: pointer;
}

.camino-tallas-acciones button:hover { border-color: #191817; }

.camino-conteo[data-state="ok"] { color: #15803d; }
.camino-conteo[data-state="falta"] { color: #b0000d; }

/* ---------------------------------------------------------------------
   7 · Pestaña 4: el formulario de siempre, sin su marco doble.
   --------------------------------------------------------------------- */
.camino-ensutex [data-path-screen="datos"] #form-cotizador {
  border: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

.camino-ensutex [data-path-screen="datos"] #form-cotizador h3 { font-size: 1.125rem; }

/* Tres datos de contacto y consentimiento de uso; sin alta promocional. */
.camino-ensutex [data-path-screen="datos"] #form-cotizador > div:has(> #quote-team),
.camino-ensutex [data-path-screen="datos"] #form-cotizador > div:has(> #quote-responsible),
.camino-ensutex [data-path-screen="datos"] #form-cotizador > div:has(> #quote-email) { margin: 0; }
.camino-ensutex [data-path-screen="datos"] #form-cotizador :is(#quote-team, #quote-responsible, #quote-email) {
  min-height: 48px; border-radius: 10px; font-size: 16px;
}
.camino-ensutex [data-path-screen="datos"] #form-cotizador > label:has(#quote-data-consent) {
  border-radius: 12px; border: 1px solid rgba(0,0,0,.12); background: #faf9f7; padding: 12px;
}
.quote-payment-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; width: 100%; }
.quote-payment-summary p { display: grid; gap: 2px; margin: 0; font-size: 12px; line-height: 1.3; }
.quote-payment-summary p strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.quote-payment-summary p span { color: #5c5c66; }
.quote-request-success { display: grid; gap: 10px; padding: 14px; border: 1px solid #2b7a46; border-radius: 14px; background: #f2fbf5; color: #183f25; }
.quote-request-success p { margin: 0; font-size: 14px; line-height: 1.45; }
.quote-canonical-summary { display: grid; gap: 5px; padding: 12px; border-radius: 10px; background: #fff; color: #191817; }
.quote-canonical-summary > strong { font-size: 14px; }
.quote-canonical-summary p { font-size: 13px; }
.quote-request-success [data-quote-private-link],
.quote-request-success [data-quote-whatsapp] { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 16px; border-radius: 999px; background: #191817; color: white; font-weight: 800; text-decoration: none; }
.quote-reference-upload input { min-height: 48px; border-radius: 10px; font-size: 14px; }
.quote-design-services { display: grid; gap: 8px; margin: 12px 0; padding: 14px; border: 1px solid rgba(0,0,0,.14); border-radius: 14px; }
.quote-design-services legend { padding: 0 5px; font-size: 13px; font-weight: 800; }
.quote-design-services > label { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 10px; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; cursor: pointer; }
.quote-design-services input { width: 20px; height: 20px; margin-top: 2px; accent-color: #e20613; flex: 0 0 auto; }
.quote-design-services label span { display: grid; gap: 4px; font-size: 14px; line-height: 1.35; }
.quote-design-services label small { font-size: 12px; color: #5c5c66; }
.quote-design-services > p { margin: 0; font-size: 12px; line-height: 1.45; color: #5c5c66; }
.camino-prev-order { display: grid; gap: .45rem; margin: .75rem 0; color: #252321; font-size: .85rem; font-weight: 750; }
.camino-prev-order input { min-height: 44px; width: 100%; box-sizing: border-box; border: 1px solid #cfcac4; border-radius: .7rem; padding: .65rem .8rem; font: inherit; font-weight: 500; }
.camino-prev-order small { color: #625f5b; font-size: .75rem; font-weight: 450; line-height: 1.4; }
.quote-payment-summary__full { grid-column: 1 / -1; }
.quote-payment-summary__stop { grid-column: 1 / -1; padding: 10px; border: 1px solid #ad2c24; border-radius: 10px; color: #84251e; }

/* ---------------------------------------------------------------------
   8 · El Cotizador Express deja de ser un segundo camino: el armador le
   pide a catalogo.js que en su lugar ponga una puerta de entrada al camino
   unico de 4 pestañas (renderWizard()).
   --------------------------------------------------------------------- */
.camino-ensutex__puerta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.camino-ensutex__puerta p {
  margin: 0;
  max-width: 60ch;
  color: #a1a1aa;
  font-size: .9375rem;
  line-height: 1.6;
}

.camino-ensutex__puerta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  background: #fff;
  color: #191817;
  font-size: .9375rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
}

.camino-ensutex__puerta a:hover { background: #e20613; color: #fff; }

@media (max-width: 600px) {
  .quote-payment-summary { grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  .quote-payment-summary p { font-size: 11px; }
  .quote-payment-summary p strong { font-size: 13px; }
}

/* ---------------------------------------------------------------------
   9 · El resumen vive dentro de #contacto, y catalog-premium-v2.css le pone
   `#contacto h2 { font-size: clamp(2.4rem, …) !important }` al encabezado del
   resumen (que viene como h2 del armador compartido). Se devuelve a su tamano
   de etiqueta: el resumen es una ficha, no un titulo de seccion.
   --------------------------------------------------------------------- */
#contacto .b-path__summary__title {
  margin: 0 0 10px !important;
  font-size: .75rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
}

/* ---------------------------------------------------------------------
   10 · Dentro del camino manda la barra del resumen: la barra de cotizacion
   del catalogo se aparta, igual que cuando el formulario entra en pantalla
   (inbound-flow.css: body.lead-form-in-view #sticky-cta-mobile). Dos barras
   fijas abajo serian una encima de la otra.
   --------------------------------------------------------------------- */
@media (max-width: 1079px) {
  body.camino-en-curso #sticky-cta-mobile {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(120%) !important;
  }
}

/* ---------------------------------------------------------------------
   11 · Movimiento reducido: nada se desplaza, todo se funde.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .camino-prenda label,
  .camino-linea,
  .camino-btn,
  .camino-swatch label { transition: none; }
  .camino-btn--primary:active { transform: none; }
}

/* Casilla de reposición (mínimo 5 desde el segundo pedido). Toque de 44 px. */
.camino-reposicion { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0 14px; font-size: .9375rem; line-height: 1.4; color: inherit; cursor: pointer; }
.camino-reposicion input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: #e20613; }