/* ════════════════════════════════════════════════════════════
   COTIZAR.CSS
   Estilos específicos de la vista "Cotizar tu proyecto".

   Confía en global/componentes.css para:
   - Variables CSS (--color-bg, --color-bg-card, --color-accent,
     --color-accent-dark, --color-bg-cream, --color-green,
     --color-text-dark, --color-text-muted, --color-border-dark)
   - .btn / .btn--primario / .btn__arrow / .breadcrumb / .badge
     (--gris/--naranja/--verde) / .trust-bar

   NO redefine ninguno de esos componentes. Solo estiliza lo
   nuevo de esta vista (wizard, stepper, tarjetas, sidebar,
   panel Step 2).

   NOTA: --color-bg-card resultó ser un tono OSCURO en el sitio
   real, no claro. El panel principal y las tarjetas de producto
   deben ser BLANCOS, así que se usa #ffffff explícito en vez de
   esa variable. Reemplazar por el token real si existe uno para
   "blanco"/"tarjeta clara" en componentes.css.
   ════════════════════════════════════════════════════════════ */

.cotizar {
    background-color: var(--color-bg-cream);
    color: var(--color-text-dark);
}

.cotizar section {
    padding: 40px 56px;
}

/* ── COTIZAR-HERO ──
   Sección discreta: la jerarquía visual la tiene el wizard (sección
   siguiente). Tipografías del sistema de diseño (Barlow Condensed para el
   título, Inter para el cuerpo) y padding superior reducido. El selector
   .cotizar .cotizar-hero pisa el padding de ".cotizar section". */
.cotizar .cotizar-hero {
    padding-top: 8px;
    padding-bottom: 12px;
}

.cotizar-hero__titulo {
    font-family: var(--font-display);
    font-size: 3.2rem;
    line-height: 1.05;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 0.01em;
    color: var(--color-text-dark);
    margin: 0 0 6px;
}

.cotizar-hero__subtitulo {
    font-size: 0.98rem;
    color: var(--color-text-muted);
    margin: 0 0 14px;
}

/* ── Trust-bar del hero: chips (etiquetas) con el check, SIN fondo negro ──
   Override local de .trust-bar / .trust-bar__item (componentes.css), que
   por defecto traen fondo oscuro (#0D0D0D) e ítems en barra full-width.
   Aquí van como etiquetas compactas con borde, fondo blanco y check. */
.cotizar-hero__trust-bar {
    background-color: transparent;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.cotizar-hero__trust-bar .trust-bar__item {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: #ffffff;
    border: 1px solid var(--color-border-light);
    border-radius: 999px;
    color: var(--color-text-muted-2);
    font-size: 0.78rem;
    line-height: 1;
}

.cotizar-hero__trust-bar .trust-bar__item:last-child {
    border-right: 1px solid var(--color-border-light);
}

.cotizar-hero__trust-bar .trust-bar__icono {
    margin-right: 0;
}

/* ── Ícono dentro de .trust-bar__item (regla general: aplica a otras trust-bars) ── */
.trust-bar__icono {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-right: 8px;
}

/* ── WIZARD ── */
.cotizar .wizard {
    padding-top: 0;
}

.wizard__grid {
    display: grid;
    grid-template-columns: 2.0fr 0.8fr;
    align-items: stretch;
    gap: 32px;
}

.wizard__principal {
    background-color: #ffffff;
    border-top: 4px solid var(--color-accent);
    border-radius: 8px;
    padding: 28px 36px 32px;
}

/* ── STEPPER ── */
.stepper {
    display: flex;
    justify-content: space-between;
    margin-bottom: 26px;
}

.stepper__paso {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.stepper__paso:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 18px;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--color-border-dark, #d0d0d0);
    z-index: 0;
}

.stepper__paso--completado:not(:last-child)::after {
    background-color: var(--color-accent);
}

.stepper__numero {
    position: relative;
    z-index: 1;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--color-border-dark, #d0d0d0);
    background-color: #ffffff;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.stepper__numero-check {
    display: none;
}

.stepper__paso--activo .stepper__numero,
.stepper__paso--completado .stepper__numero {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

.stepper__paso--completado .stepper__numero-texto {
    display: none;
}

.stepper__paso--completado .stepper__numero-check {
    display: block;
}

.stepper__label {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.stepper__label-check {
    display: none;
    color: var(--color-accent);
}

.stepper__paso--completado .stepper__label-check {
    display: inline-block;
}

.stepper__paso--activo .stepper__label {
    color: var(--color-accent);
    font-weight: 700;
}

.stepper__paso--completado .stepper__label {
    color: var(--color-text-dark);
    font-weight: 700;
}

/* ── PANEL STEP 1 ── */
.wizard__panel-titulo {
    font-family: var(--font-display);
    font-size: 1.85rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-text-dark);
    margin: 0 0 6px;
    line-height: 1.1;
}

.wizard__panel-subtitulo {
    text-align: center;
    color: var(--color-text-muted);
    margin: 0 0 32px;
    font-size: 0.98rem;
}

.wizard__tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 28px;
}

.wizard__tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 22px 16px 20px;
    border: 1px solid var(--color-border-dark, #2a2a2a);
    border-radius: 8px;
    background-color: #141414;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ── "Primera capa" del home: overlay oscuro sobre la foto de fondo ──
   Cubre toda la tarjeta; al hover/select se aclara y revela la foto. */
.wizard__tarjeta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.88);
    transition: background 0.45s ease;
    z-index: 1;
    pointer-events: none;
}

/* ── Scrim inferior: degradado oscuro en la base de la tarjeta para que
   NOMBRE y DESCRIPCIÓN siempre se lean, incluso con la card seleccionada
   y la foto de fondo visible (el overlay general ::before se aclara a
   0.22). Mismo z-index que ::before pero pinta por encima (orden DOM) y
   por debajo del contenido (z-index: 2). Patrón estándar texto-sobre-
   imagen: la parte alta de la foto queda libre, la base queda oscura. ── */
.wizard__tarjeta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58%;
    background: linear-gradient(to top,
        rgba(13, 13, 13, 0.92) 0%,
        rgba(13, 13, 13, 0.55) 55%,
        rgba(13, 13, 13, 0) 100%);
    z-index: 1;
    pointer-events: none;
}

.wizard__tarjeta:hover {
    border-color: var(--color-accent);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.wizard__tarjeta:hover::before {
    background: rgba(13, 13, 13, 0.55);
}

/* Estado activo: sin layout-shift (box-shadow hace de "segundo borde"). */
.wizard__tarjeta--activa {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 1px var(--color-accent), 0 8px 20px rgba(245, 166, 35, 0.20);
}

.wizard__tarjeta--activa::before {
    background: rgba(13, 13, 13, 0.22);
}

.wizard__tarjeta--punteada {
    border-style: dashed;
}

.wizard__tarjeta--punteada.wizard__tarjeta--activa {
    border-style: solid;
}

/* La card "Otros productos" (--punteada) NO tiene foto de fondo ni
   animación de revelado: el overlay ::before se mantiene siempre oscuro
   y constante (no se aclara al hover/seleccionar como en las cards con
   foto). Sólo cambian el borde (discontinuo → sólido amber) y el check.
   Mayor especificidad + orden posterior => pisa a :hover::before y
   --activa::before generales. */
.wizard__tarjeta--punteada:hover::before,
.wizard__tarjeta--punteada.wizard__tarjeta--activa::before {
    background: rgba(13, 13, 13, 0.88);
}

/* ── Foto de fondo: cubre TODA la tarjeta (traída del home) ── */
.wizard__tarjeta-foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: opacity 0.4s ease;
}

/* ── Media: zona del sketch, transparente (la foto se ve detrás) ── */
.wizard__tarjeta-media {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 4px;
}

.wizard__tarjeta-sketch {
    position: relative;
    z-index: 2;
    width: 62%;
    max-width: 120px;
    height: auto;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.wizard__tarjeta:hover .wizard__tarjeta-sketch {
    opacity: 0.45;
}

/* Seleccionada: el sketch se desvanece para que se vea nítida la foto de fondo. */
.wizard__tarjeta--activa .wizard__tarjeta-sketch {
    opacity: 0;
}

/* Sketch +10% sólo en hangar, membrana y cubrimiento industrial. */
.wizard__tarjeta[for="tipo-hangar"] .wizard__tarjeta-sketch,
.wizard__tarjeta[for="tipo-membrana"] .wizard__tarjeta-sketch,
.wizard__tarjeta[for="tipo-industrial"] .wizard__tarjeta-sketch {
    width: 68%;
    max-width: 132px;
}

/* Variante "icono" (Proyecto Especial, sin foto): sólo SVG centrado. */
.wizard__tarjeta-media--icono {
    /* sin fondo: hereda el overlay oscuro de la tarjeta */
}

/* ── Variante "mosaico" (card "¿No sabes qué elegir?"): 2 imágenes de
   la sección Otros como adelanto ("hay más productos"), lado a lado y a
   tamaño completo (object-fit: contain, SIN recorte). Se usan sketches
   de FONDO NEGRO para que barrenen con la card oscura y el producto
   flote. La card es estática: sin foto de fondo ni revelado al
   seleccionar (ver override de --punteada más abajo). ── */
.wizard__tarjeta-media--mosaico {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 6px;
    padding: 0;
}

.wizard__mosaico-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 4px;
}

.wizard__tarjeta-icono {
    position: relative;
    z-index: 2;
    width: 52px;
    height: 52px;
    color: #ffffff;
    opacity: 0.9;
    transition: color 0.25s ease, opacity 0.25s ease;
}

.wizard__tarjeta:hover .wizard__tarjeta-icono,
.wizard__tarjeta--activa .wizard__tarjeta-icono {
    color: var(--color-accent);
    opacity: 1;
}

/* ── Cuerpo de texto (claro, sobre el fondo oscuro) ── */
.wizard__tarjeta-cuerpo {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.wizard__tarjeta-nombre {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.05;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
    transition: color 0.25s ease;
}

.wizard__tarjeta:hover .wizard__tarjeta-nombre,
.wizard__tarjeta--activa .wizard__tarjeta-nombre {
    color: var(--color-accent);
}

.wizard__tarjeta-desc {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.35;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75);
}

/* ── Check de selección (esquina superior derecha, dentro de la card) ── */
.wizard__tarjeta-check {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--color-accent);
    color: #ffffff;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.wizard__tarjeta--activa .wizard__tarjeta-check {
    display: flex;
}

.wizard__btn-siguiente,
.wizard__btn-siguiente-2,
.wizard__btn-enviar {
    width: 100%;
    justify-content: center;
    animation: wizard-btn-pulse 1.4s ease-out infinite;
}

/* Pulso AGRESIVO (botón grande): onda amber grande y opaca + flecha que
   rebota, para que el botón "Siguiente" sea imposible de pasar por alto.
   En hover se detienen ambas. Respeta prefers-reduced-motion (global). */
@keyframes wizard-btn-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.85), 0 8px 22px rgba(245, 166, 35, 0.35);
    }
    60% {
        box-shadow: 0 0 0 32px rgba(245, 166, 35, 0), 0 8px 22px rgba(245, 166, 35, 0.35);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(245, 166, 35, 0), 0 8px 22px rgba(245, 166, 35, 0.35);
    }
}

@keyframes wizard-btn-arrow {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(7px);
    }
}

.wizard__btn-siguiente .btn__arrow,
.wizard__btn-siguiente-2 .btn__arrow {
    font-size: 1.3rem;
    animation: wizard-btn-arrow 1.2s ease-in-out infinite;
}

.wizard__btn-siguiente:hover,
.wizard__btn-siguiente:hover .btn__arrow,
.wizard__btn-siguiente-2:hover,
.wizard__btn-siguiente-2:hover .btn__arrow {
    animation: none;
}

/* ── Utilidad: input real oculto, accesible (compartida por tarjetas, toggles, swatches, radios) ── */
.input-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── SIDEBAR OSCURA (contenedor) ── */
.wizard__sidebar {
    background-color: var(--color-bg-dark, #111111);
    color: #ffffff;
    border-radius: 8px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    /* Fija el sidebar mientras se desplaza la columna de datos. align-self
       evita que se estire (stretch del grid) y max-height + overflow le dan
       scroll propio si su contenido supera el viewport. top = altura del
       header (~75px) + margen. */
    position: sticky;
    top: 80px;
    align-self: start;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
}

.wizard__sidebar-titulo {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 0 20px;
    padding-bottom: 16px;
    border-bottom: 3px solid var(--color-accent);
}

/* Cabecera del panel "SU CONFIGURACIÓN": título + chip con la medida. */
.wizard__sidebar-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--color-accent);
}

.wizard__sidebar-cabecera .wizard__sidebar-titulo {
    margin: 0;
    padding: 0;
    border: none;
}

.wizard__sidebar-chip-medida {
    flex-shrink: 0;
    background-color: var(--color-accent);
    color: #1a1a1a;
    font-weight: 800;
    font-size: 0.85rem;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.btn--whatsapp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background-color: var(--color-green);
    color: #ffffff;
    margin-bottom: 28px;
}

.wizard__sidebar-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wizard__sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wizard__sidebar-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.wizard__sidebar-icono {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard__sidebar-texto {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wizard__sidebar-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.wizard__sidebar-valor {
    font-weight: 700;
    color: #ffffff;
}

/* ── TRUST-BAR-FOOTER ── */
.cotizar-footer-trust {
    padding-top: 0;
}

/* Trust-bar del footer: fondo blanco (no negro), textos e iconos más
   grandes y en tonos oscuros para leer sobre blanco. Override local de
   .trust-bar / .trust-bar__item (componentes.css). */
.cotizar-footer-trust .trust-bar {
    background-color: #ffffff;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

.cotizar-footer-trust .trust-bar__item {
    border-right-color: var(--color-border-light);
    color: var(--color-text-dark);
    font-size: 0.95rem;
}

.cotizar-footer-trust .trust-bar__item:last-child {
    border-right-color: var(--color-border-light);
}

.cotizar-footer-trust .trust-bar__item svg {
    width: 24px;
    height: 24px;
}


/* ════════════════════════════════════════════════════════════
   STEP 2 — DATOS DEL PROYECTO (variante Kiosco Plegable)
   ════════════════════════════════════════════════════════════ */

/* ── Numeración automática de campos del Step 2 (2A y 2B) ──
   Con contadores CSS: al ocultar el campo "ventana" (display:none) no
   incrementa el contador y la numeración se reajusta sola (Color pasa de
   5 a 4, etc.). */
.wizard__panel[data-variante-producto="kiosco-plegable"],
.wizard__panel[data-variante-producto="kiosco-desarmable"] {
    counter-reset: campo;
}

.wizard__panel[data-variante-producto="kiosco-plegable"] .wizard__campo,
.wizard__panel[data-variante-producto="kiosco-desarmable"] .wizard__campo {
    counter-increment: campo;
}

.wizard__panel[data-variante-producto="kiosco-plegable"] .wizard__campo-titulo::before,
.wizard__panel[data-variante-producto="kiosco-desarmable"] .wizard__campo-titulo::before {
    content: counter(campo) ". ";
    color: var(--color-accent);
    font-weight: 800;
    margin-right: 2px;
}

/* ── Filas de campos (grids con proporciones aproximadas al mockup) ── */
.wizard__fila {
    display: grid;
    gap: 20px;
    margin-bottom: 22px;
}

/* Cuando se oculta "ventana", la fila de 3 columnas pasa a 2. */
.wizard__fila--sin-ventana {
    grid-template-columns: 1fr 1fr;
}

/* ── Cantidad de paredes (1-4), visible sólo si "¿Desea paredes?" = Sí ── */
.paredes-cantidad {
    margin-top: 12px;
}

.paredes-cantidad[hidden] {
    display: none;
}

.paredes-cantidad__label {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.paredes-cantidad__opciones {
    display: flex;
    gap: 8px;
}

.paredes-cantidad__opcion {
    flex: 1;
}

.paredes-cantidad__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border: 1px solid var(--color-border-dark, #e2e2e2);
    border-radius: 6px;
    background-color: #ffffff;
    font-weight: 700;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.paredes-cantidad__opcion:hover .paredes-cantidad__btn {
    border-color: var(--color-accent);
}

.paredes-cantidad__btn--activa {
    border-color: var(--color-accent);
    background-color: rgba(230, 126, 34, 0.10);
    color: var(--color-accent-dark);
}

/* ── Selector de lado de cada pared (sólo para 2×3) ── */
.paredes-lados {
    margin-top: 12px;
}

.paredes-lados[hidden] {
    display: none;
}

.paredes-lados__label {
    display: block;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.paredes-lados__lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.paredes-lados__fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.85rem;
}

.paredes-lados__fila span {
    color: var(--color-text-muted);
}

.paredes-lados__fila select {
    min-width: 130px;
    padding: 6px 10px;
    border: 1px solid var(--color-border-light-2);
    border-radius: 6px;
    font-size: 0.85rem;
    font-family: inherit;
    background-color: #ffffff;
    color: var(--color-text-dark);
    cursor: pointer;
}

.wizard__fila--2col {
    grid-template-columns: 1fr 1.3fr;
}

.wizard__fila--3col-a {
    grid-template-columns: 1fr 1fr 1.2fr;
}

.wizard__fila--3col-b {
    grid-template-columns: 1fr 1fr 1.2fr;
}

/* Fila 3 del 2A (kiosco-plegable): el campo "Estampado" es alto por su
   dropzone, así que ocupa toda la columna izquierda; "Cantidad" y
   "Algo adicional" se apilan a la derecha aprovechando el hueco bajo el
   stepper. Reemplaza al layout de 3 columnas original (que ocupaba
   "Ciudad de entrega", ya fuera de este step). */
.wizard__fila--stack-der {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "stack-1 stack-2"
        "stack-1 stack-3";
    align-items: start;
}

.wizard__fila--stack-der > .wizard__campo:nth-child(1) {
    grid-area: stack-1;
}

.wizard__fila--stack-der > .wizard__campo:nth-child(2) {
    grid-area: stack-2;
}

.wizard__fila--stack-der > .wizard__campo:nth-child(3) {
    grid-area: stack-3;
}

/* Variante del stack-der con sólo 2 campos (tarimas: Estampado + Notas,
   sin Cantidad): el 2º campo (Notas) abarca las 2 filas de la derecha
   para no dejar hueco vacío abajo. */
.wizard__fila--stack-der--2 {
    grid-template-areas:
        "stack-1 stack-2"
        "stack-1 stack-2";
}

/* Campo cuyo control estira para llenar el alto (ej. textarea de Notas
   en tarimas): el campo es columna flex y el textarea ocupa lo que sobre. */
.wizard__campo--estirable {
    display: flex;
    flex-direction: column;
}

.wizard__campo--estirable .wizard__textarea {
    flex: 1;
    min-height: 120px;
}

.wizard__campo-titulo {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 8px;
}

.wizard__campo-opcional {
    font-weight: 400;
    color: var(--color-text-muted);
}

.wizard__campo-ayuda {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin: 8px 0 0;
}

.wizard__campo--full {
    margin-bottom: 20px;
}

/* ── Banner de producto seleccionado ── */
.producto-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: rgba(230, 126, 34, 0.08);
    border: 1px solid rgba(230, 126, 34, 0.25);
    border-radius: 6px;
    padding: 12px 16px;
    margin-bottom: 20px;
}

.producto-banner__icono {
    width: 26px;
    height: 26px;
    color: var(--color-accent);
    flex-shrink: 0;
}

/* El banner de los paneles con imagen-sketch (a-medida / membrana-tensada)
   lleva la imagen como franja inicial absoluta: position:relative +
   overflow:hidden para que ocupe toda la altura del banner de borde a borde
   sin crecer la barra, y padding-left reserva la franja para el texto. */
.wizard__panel[data-step="3"] .producto-banner,
.wizard__panel[data-variante-producto="a-medida"] .producto-banner,
.wizard__panel[data-variante-producto="membrana-tensada"] .producto-banner,
.wizard__panel[data-variante-producto="cubrimiento-industrial"] .producto-banner,
.wizard__panel[data-variante-producto="carpa-estrella"] .producto-banner,
.wizard__panel[data-variante-producto="tarimas-lona"] .producto-banner,
.wizard__panel[data-variante-producto="sombrilla"] .producto-banner,
.wizard__panel[data-variante-producto="carpa-inflable"] .producto-banner,
.wizard__panel[data-variante-producto="arco-inflable"] .producto-banner,
.wizard__panel[data-variante-producto="dummies"] .producto-banner {
    position: relative;
    overflow: hidden;
    padding-left: 72px;
}

/* Imagen (sketch técnico) ocupando todo el inicio del banner: posición
   absoluta con top/bottom/left:0 y height:100% → ocupa toda la altura del
   banner (borde a borde). La altura del banner la sigue definiendo el texto,
   así la barra no crece. object-fit: contain muestra la imagen COMPLETA y
   normal (sin recortar ni deformar), centrada en la franja. */
.producto-banner__icono--img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 64px;
    height: 100%;
    object-fit: contain;
    object-position: center;
    border-radius: 6px 0 0 6px;
}

/* Dummies: su sketch es vertical/alto; al ocupar toda la altura del banner se
   ve apretado y las puntas parecen recortadas. Se le da margen arriba/abajo
   (inset) para que se muestre completo y con aire, en vez de borde a borde. */
.wizard__panel[data-variante-producto="dummies"] .producto-banner__icono--img {
    top: 6px;
    bottom: 6px;
    height: auto;
}

/* ── Aviso membrana tensada: fondo verde sutil + chulo verde (izq) y
   destacado de renders en naranja de marca (der). ── */
.aviso-membrana {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 14px 18px;
    margin-bottom: 28px;
    background-color: rgba(82, 183, 136, 0.12);
    border: 1px solid rgba(82, 183, 136, 0.32);
    border-radius: 6px;
}

.aviso-membrana__principal {
    display: flex;
    align-items: center;
    gap: 11px;
    flex: 1;
    min-width: 0;
}

.aviso-membrana__icono {
    flex-shrink: 0;
    color: var(--color-green);
}

.aviso-membrana__principal span {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-text-dark);
}

.aviso-membrana__destacado {
    flex-shrink: 0;
    max-width: 280px;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-accent);
    text-align: right;
    /* Máximo dos renglones. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ════════════════════════════════════════════════════════════
   GALERÍA PREMIUM — Carpa Arco (panel a-medida, columna derecha)
   Rotación automática cada ~2.7s con crossfade + Ken Burns.
   Firma visual de la web: esquina cortada, borde amber, frame-corner.
   ════════════════════════════════════════════════════════════ */
.galeria-premium {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: stretch;
}

.galeria-premium__ventana {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 360px;
    overflow: hidden;
    background-color: var(--color-bg-card);
    border: 2px solid var(--color-accent);
    /* Esquina inferior-derecha cortada (firma de la web) */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(245, 166, 35, 0.18);
}

.galeria-premium__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transform: scale(1);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s ease;
    will-change: opacity, transform;
}

/* Slide activa: entra con crossfade y hace un zoom lento (Ken Burns)
   durante el tiempo que está visible. */
.galeria-premium__slide--activa {
    opacity: 1;
    transform: scale(1.08);
    transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), transform 3.4s ease-out;
    z-index: 1;
}

/* Las esquinas amber sobresalen del marco (estilo .frame-corner base). */
.galeria-premium__esquina {
    z-index: 3;
}

/* Contador "1 / 13" abajo-izquierda (libre de esquina cortada y frame-corners). */
.galeria-premium__cuenta {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: baseline;
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #ffffff;
    background-color: rgba(13, 13, 13, 0.62);
    padding: 3px 9px;
    border-radius: 4px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.galeria-premium__cuenta-sep {
    color: var(--color-accent);
    margin: 0 1px;
}

/* Dots de progreso: el activo se alarga en píldora amber. */
.galeria-premium__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
}

.galeria-premium__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: var(--color-border-dark);
    cursor: pointer;
    transition: background-color 0.3s ease, width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.4s ease;
}

.galeria-premium__dot:hover {
    background-color: var(--color-accent-dark);
}

.galeria-premium__dot--activo {
    background-color: var(--color-accent);
    width: 24px;
    border-radius: 5px;
}

.producto-banner__texto {
    flex: 1;
    color: var(--color-text-dark);
}

.producto-banner__cambiar {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    text-decoration: underline;
    white-space: nowrap;
}

.producto-banner__cambiar:hover {
    color: var(--color-accent);
}

/* ── Campo 1: Medida del kiosco ── */
/* Campo flex para que .medida-tarjetas se estire e iguale la altura del
   campo de la derecha (Tipo de lona) en la fila de 2 columnas. */
.wizard__fila--2col .wizard__campo {
    display: flex;
    flex-direction: column;
}

.medida-tarjetas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    flex: 1;
}

/* display: grid del base le gana al [hidden] del navegador; esta regla
   asegura que el grid se oculte de verdad al activar el mostrador (2B). */
.medida-tarjetas[hidden] {
    display: none;
}

.medida-tarjeta {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    min-height: 120px;
    padding: 16px 8px;
    border: 1px solid var(--color-border-dark, #e2e2e2);
    border-radius: 6px;
    background-color: #141414;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

/* Imagen de fondo de cada medida (ruta relativa al CSS). */
.medida-tarjeta[for="medida-2x2"] {
    background-image: url("../assets/img/cotizar/2x2.webp");
}

.medida-tarjeta[for="medida-2x3"] {
    background-image: url("../assets/img/cotizar/3x2.webp");
}

.medida-tarjeta[for="medida-3x3"] {
    background-image: url("../assets/img/cotizar/3x3.webp");
}

/* Velo oscuro para que el texto se lea sobre la foto (se aclara al
   interactuar, para revelar la imagen). */
.medida-tarjeta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.45);
    transition: background 0.2s ease;
    z-index: 0;
}

.medida-tarjeta:hover {
    border-color: var(--color-accent);
}

.medida-tarjeta:hover::before {
    background: rgba(13, 13, 13, 0.30);
}

.medida-tarjeta--activa {
    border: 2px solid var(--color-accent);
}

.medida-tarjeta--activa::before {
    background: rgba(13, 13, 13, 0.28);
}

/* ── Campo 1 del 2A: animación de "card seleccionada se expande" ──
   Al elegir una medida, esa tarjeta crece (flex-grow mayor) para revelar
   su foto y las demás se minimizan hacia los lados. Todo dentro del mismo
   espacio del campo (el contenedor no cambia de tamaño). Sólo aplica al
   2A (kiosco-plegable); el 2B usa el grid de 5 columnas y no se toca. */
.wizard__panel[data-variante-producto="kiosco-plegable"] .medida-tarjetas {
    display: flex;
}

.wizard__panel[data-variante-producto="kiosco-plegable"] .medida-tarjeta {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    transition: flex-grow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.wizard__panel[data-variante-producto="kiosco-plegable"] .medida-tarjeta--activa {
    flex-grow: 2.6;
}

/* En las cards minimizadas se funde el subtítulo (queda sólo el título,
// p.ej. "2×2"); en la activa se revela. Coordinado con la expansión. */
.wizard__panel[data-variante-producto="kiosco-plegable"] .medida-tarjeta .medida-tarjeta__sub {
    opacity: 0;
    transition: opacity 0.25s ease;
}

.wizard__panel[data-variante-producto="kiosco-plegable"] .medida-tarjeta--activa .medida-tarjeta__sub {
    opacity: 1;
    transition: opacity 0.25s ease 0.15s;
}

/* ── Campo 1 del 2B (desarmable) ── */
/* Las cards van sin subtítulo (sólo la medida): ahorran espacio vertical. */
.wizard__panel[data-variante-producto="kiosco-desarmable"] .medida-tarjeta__sub {
    display: none;
}

/* Tratamiento "banda amber inferior": sin scale (scale 0.7 / 1.28 eliminados).
   El tamaño de cada celda es fijo → respeta los márgenes del campo y de los
   vecinos. La card activa se distingue por: borde amber (regla global
   .medida-tarjeta--activa), velo un poco más claro, título en amber y una
   franja de 4px en el borde inferior. */
.wizard__panel[data-variante-producto="kiosco-desarmable"] .medida-tarjeta {
    transition: border-color 0.2s ease;
}

/* Banda amber inferior: siempre renderizada (height 4px), se funde con
   opacity al seleccionar la card (mejor que animar la altura). */
.wizard__panel[data-variante-producto="kiosco-desarmable"] .medida-tarjeta::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--color-accent);
    z-index: 1;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wizard__panel[data-variante-producto="kiosco-desarmable"] .medida-tarjeta__titulo {
    transition: color 0.2s ease;
}

.wizard__panel[data-variante-producto="kiosco-desarmable"] .medida-tarjeta--activa::before {
    background: rgba(13, 13, 13, 0.38);
}

.wizard__panel[data-variante-producto="kiosco-desarmable"] .medida-tarjeta--activa .medida-tarjeta__titulo {
    color: var(--color-accent);
}

.wizard__panel[data-variante-producto="kiosco-desarmable"] .medida-tarjeta--activa::after {
    opacity: 1;
}

/* Las cards del 2B van con fondo negro por ahora (sin imagen). Las imágenes
   propias del desarmable se asignarán cuando estén disponibles. */

.medida-tarjeta__titulo {
    position: relative;
    z-index: 1;
    font-weight: 700;
    color: #ffffff;
}

.medida-tarjeta__sub {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
}

/* ── Campo 2: Tipo de lona ── */
.lona-tarjetas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lona-tarjeta {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--color-border-dark, #e2e2e2);
    border-radius: 6px;
    background-color: #ffffff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

/* Imagen de la lona en la esquina superior derecha, a color real (nítida,
   sin velos ni capas). No altera el tamaño del contenido. Rutas relativas
   al CSS; incluye las variantes "-desarmable" del Step 2B. */
.lona-tarjeta[for="lona-flexible"]::after,
.lona-tarjeta[for="lona-flexible-desarmable"]::after,
.lona-tarjeta[for="lona-flexible-estrella"]::after {
    background-image: url("../assets/img/cotizar/lona-flexible-pvc.webp");
}

.lona-tarjeta[for="lona-termosellada"]::after,
.lona-tarjeta[for="lona-termosellada-desarmable"]::after,
.lona-tarjeta[for="lona-termosellada-estrella"]::after {
    background-image: url("../assets/img/cotizar/lona-pvc-termosellada.webp");
}

/* Variantes del Step 2B: Lona Verano y Lona Fiesta (imágenes propias del
   desarmable, en /step-3-desarmable/). */
.lona-tarjeta[for="lona-verano-desarmable"]::after {
    background-image: url("../assets/img/cotizar/step-3-desarmable/verano.webp");
}

.lona-tarjeta[for="lona-fiesta-desarmable"]::after {
    background-image: url("../assets/img/cotizar/step-3-desarmable/fiesta.webp");
}

.lona-tarjeta::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 90px;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 0;
}

/* Contenido por encima de la imagen de la esquina. */
.lona-tarjeta__radio,
.lona-tarjeta__cuerpo {
    position: relative;
    z-index: 1;
}

.lona-tarjeta:hover {
    border-color: var(--color-accent);
}

.lona-tarjeta--activa {
    border: 2px solid var(--color-accent);
}

.lona-tarjeta__radio {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--color-border-dark, #c9c9c9);
    margin-top: 2px;
    position: relative;
}

.lona-tarjeta--activa .lona-tarjeta__radio {
    border-color: var(--color-accent);
}

.lona-tarjeta--activa .lona-tarjeta__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

.lona-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lona-tarjeta__encabezado {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lona-tarjeta__nombre {
    font-weight: 700;
    color: var(--color-text-dark);
}

.lona-tarjeta__desc {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* Variante "única" (tarimas: una sola lona, la profesional): la única
   card estira para igualar la altura de la galería de la izquierda y
   queda con el contenido centrado verticalmente. No altera márgenes ni
   el resto de variantes (kiosco/estrella siguen con 2 cards). */
.lona-tarjetas--unica {
    flex: 1;
}

.lona-tarjetas--unica .lona-tarjeta {
    flex: 1;
    align-items: center;
    padding-right: 42%;
    overflow: hidden;
}

/* La imagen de la lona pasa de thumbnail en esquina a panel lateral
   derecho (40% del ancho) con un divisor sutil: diseño más presente que
   aprovecha el alto de la card única (sólo tarimas). El background-image
   lo sigue definiendo el selector [for="lona-termosellada-tarima"]. */
.lona-tarjetas--unica .lona-tarjeta::after {
    width: 40%;
    border-left: 1px solid rgba(0, 0, 0, 0.07);
}

.wizard__link-comparativa {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--color-accent-dark, var(--color-accent));
}

/* ── Alerta informativa (paredes) ── */
.alerta-info {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background-color: rgba(230, 126, 34, 0.08);
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 0.82rem;
    color: var(--color-text-dark);
    margin-bottom: 12px;
}

.alerta-info__icono {
    color: var(--color-accent);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Toggle Sí / No (paredes, ventana, estampado) ── */
.toggle-si-no {
    display: flex;
    gap: 10px;
}

.toggle-si-no__opcion {
    cursor: pointer;
}

.toggle-si-no__btn {
    display: inline-block;
    min-width: 64px;
    text-align: center;
    padding: 8px 18px;
    border-radius: 6px;
    border: 1px solid var(--color-border-dark, #d0d0d0);
    background-color: #ffffff;
    color: var(--color-text-dark);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}

.toggle-si-no__btn--activo {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
}

/* ── Campo 5: Color de la lona ── */
.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.color-swatch {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--color-swatch);
    border: 2px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-swatch--activo {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--color-accent);
}

.color-swatch__check {
    display: none;
    color: #ffffff;
    mix-blend-mode: difference;
}

.color-swatch--activo .color-swatch__check {
    display: flex;
}

.wizard__input-texto {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border-dark, #d0d0d0);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--color-text-dark);
    background-color: #ffffff;
}

/* Asterisco de campo obligatorio (Step 3). */
.wizard__campo-obligatorio {
    color: #d33;
    margin-left: 2px;
}

/* Grupo teléfono: prefijo +57 fijo pegado al input (Step 3). */
.tel-grupo {
    display: flex;
    align-items: stretch;
}
.tel-grupo__prefijo {
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid var(--color-border-dark, #d0d0d0);
    border-right: none;
    border-radius: 6px 0 0 6px;
    background-color: #f3f3f3;
    color: var(--color-text-dark);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}
.tel-grupo .wizard__input-texto {
    border-radius: 0 6px 6px 0;
}

.wizard__input-texto:disabled {
    background-color: rgba(0, 0, 0, 0.03);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

/* ── Campo 6: Dropzone de logo ── */
.dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    border: 1px dashed var(--color-accent);
    border-radius: 6px;
    padding: 18px 12px;
    margin-top: 14px;
    cursor: pointer;
    color: var(--color-text-dark);
    transition: background-color 0.15s ease;
}

.dropzone:hover,
.dropzone--dragover {
    background-color: rgba(230, 126, 34, 0.06);
}

.dropzone__icono {
    color: var(--color-accent);
    margin-bottom: 4px;
}

.dropzone__titulo {
    font-weight: 700;
    font-size: 0.85rem;
}

.dropzone__sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* ── Campo 7: Cantidad ── */
.cantidad-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-dark, #d0d0d0);
    border-radius: 6px;
    overflow: hidden;
}

.cantidad-stepper__btn {
    width: 38px;
    height: 38px;
    background-color: #ffffff;
    border: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-dark);
    cursor: pointer;
}

.cantidad-stepper__btn:hover {
    background-color: rgba(230, 126, 34, 0.08);
    color: var(--color-accent);
}

.cantidad-stepper__valor {
    width: 44px;
    text-align: center;
    font-weight: 700;
    color: var(--color-text-dark);
    border-left: 1px solid var(--color-border-dark, #d0d0d0);
    border-right: 1px solid var(--color-border-dark, #d0d0d0);
    padding: 8px 0;
}

/* ── Campo 8: Ciudad de entrega ── */
.ciudad-opciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.ciudad-opcion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--color-border-dark, #d0d0d0);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.ciudad-opcion:hover {
    border-color: var(--color-accent);
}

.ciudad-opcion--activa {
    border-color: var(--color-accent);
    background-color: rgba(230, 126, 34, 0.08);
    font-weight: 700;
}

.ciudad-opcion__radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--color-border-dark, #c9c9c9);
    position: relative;
    flex-shrink: 0;
}

.ciudad-opcion--activa .ciudad-opcion__radio {
    border-color: var(--color-accent);
}

.ciudad-opcion--activa .ciudad-opcion__radio::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background-color: var(--color-accent);
}

/* ── Campo 9: Textarea ── */
.wizard__textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--color-border-dark, #d0d0d0);
    border-radius: 6px;
    font-size: 0.9rem;
    color: var(--color-text-dark);
    background-color: #ffffff;
    resize: vertical;
    font-family: inherit;
}

/* ── Navegación inferior del panel Step 2 ── */
.wizard__nav-inferior {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wizard__link-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
}

.wizard__link-volver:hover {
    color: var(--color-accent);
}

/* ── Sidebar: paneles por step ── */
.wizard__sidebar-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* display:flex de arriba anulaba el atributo [hidden] de HTML y mostraba
   todos los paneles (Step 1, Step 2, Step 3) apilados a la vez. Esto lo
   corrige: un panel oculto no se renderiza. */
.wizard__sidebar-panel[hidden] {
    display: none;
}

/* ── Asesora: rellena el hueco inferior del sidebar Step 1 ──
   flex:1 hace que crezca y ocupe el espacio que sobra bajo la lista,
   tapando el hueco vacío. La imagen es retrato con fondo negro, así que
   encaja con el sidebar; el texto va sobre un degradado en la base. */
.wizard__sidebar-asesora {
    position: relative;
    flex: 1;
    min-height: 180px;
    width: 100%;
    margin-top: 16px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border-dark);
}

.wizard__sidebar-asesora-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.wizard__sidebar-asesora-texto {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: linear-gradient(to top, rgba(13, 13, 13, 0.96) 35%, rgba(13, 13, 13, 0) 100%);
}

.wizard__sidebar-asesora-titulo {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.05;
}

.wizard__sidebar-asesora-desc {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.35;
}

/* ── Sidebar Step 2: resumen de configuración ── */
.config-resumen {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Tabla de 3 columnas de ancho FIJO: característica (izq) · resultado (centro)
   · valor/precio (der). Ancho fijo (1fr 1fr 1fr) para que todas las filas
   queden perfectamente alineadas entre sí. */
.config-resumen__item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 8px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Variantes sin precio de catálogo (carpa-estrella y futuros "Otros"):
   se ocultan la columna "Valor/precio" y el bloque "Estimado de
   referencia". La tabla pasa de 3 a 2 columnas (característica · resultado)
   para que no quede hueco a la derecha. La clase la toggla el JS
   (sincronizarSidebarStep2) según la variante activa. */
.wizard__sidebar-panel--sin-precio .config-resumen__item {
    grid-template-columns: 1fr 1fr;
}
.wizard__sidebar-panel--sin-precio .config-resumen__precio {
    display: none;
}
.wizard__sidebar-panel--sin-precio .estimado-referencia {
    display: none;
}
/* carpa-estrella no maneja estructura ni paredes: oculta esas dos filas
   del resumen (seleccionadas por el data-config-precio que contienen). */
.wizard__sidebar-panel--sin-precio .config-resumen__item:has([data-config-precio="estructura"]),
.wizard__sidebar-panel--sin-precio .config-resumen__item:has([data-config-precio="paredes"]) {
    display: none;
}

/* Sidebar "SU PROYECTO" (a-medida): 3 columnas independientes —
   ícono · característica · respuesta. Redefine el grid de la tabla
   (que por defecto es 1fr 1fr 1fr para el sidebar de kioscos 2A/2B). */
.config-resumen--proyecto .config-resumen__item {
    grid-template-columns: 38px 1fr 1.5fr;
    gap: 12px;
}

.config-resumen--proyecto .config-resumen__valor {
    text-align: right;
}

/* Íconos premium: cada ícono va dentro de un "chip" amber (caja redondeada
   con fondo translúcido y borde), como las fichas de marca. */
.config-resumen--proyecto .config-resumen__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 8px;
    box-sizing: border-box;
    color: var(--color-accent);
    background-color: rgba(245, 166, 35, 0.14);
    border: 1px solid rgba(245, 166, 35, 0.32);
    border-radius: 9px;
}

/* Fila de encabezado: nombres de columna (Característica · Resultado · Valor). */
.config-resumen__item--cabecera {
    padding: 0 0 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.config-resumen__item--cabecera .config-resumen__label,
.config-resumen__item--cabecera .config-resumen__valor,
.config-resumen__precio--cabecera {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

.config-resumen__item:last-child {
    border-bottom: none;
}

.config-resumen__caracteristica {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
}

.config-resumen__icono {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--color-accent);
}

/* Muestra de color en forma de gota (icono "mejor" que el círculo simple). */
.config-resumen__icono--color {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.config-resumen__label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.config-resumen__valor {
    font-weight: 700;
    color: #ffffff;
    font-size: 0.82rem;
    text-align: center;
}

.config-resumen__precio {
    font-weight: 700;
    color: var(--color-accent);
    font-size: 0.82rem;
    white-space: nowrap;
    text-align: right;
}

/* Frase "Costo adicional según diseño" del estampado. */
.config-resumen__precio--nota {
    font-weight: 600;
    font-size: 0.66rem;
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.55);
    white-space: normal;
    max-width: 92px;
    text-align: right;
}

/* ── Sidebar Step 2: estimado de referencia ── */
.estimado-referencia {
    background-color: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
    text-align: center;
}

.estimado-referencia__label {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 6px;
}

.estimado-referencia__precio {
    display: block;
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--color-accent);
    margin-bottom: 6px;
    animation: estimado-pulse 1.7s ease-in-out infinite;
}

/* Pulso e-commerce: el total "respira" y brilla para captar la atención. */
@keyframes estimado-pulse {
    0%, 100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(245, 166, 35, 0);
    }
    50% {
        transform: scale(1.05);
        text-shadow: 0 0 18px rgba(245, 166, 35, 0.5);
    }
}

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

/* ── Imagen de la estructura (según la medida) + valor + video ──
   Ocupa el espacio libre bajo la nota de seguridad. El panel 2A/2B se
   vuelve columna flexible para empujar este bloque al final. */
/* :not([hidden]) es CLAVE: sin él, este display:flex anularía el
   display:none del atributo [hidden] y el panel se mostraría también en
   el Step 1. Así el flex sólo aplica cuando el panel está visible. */
.wizard__sidebar-panel[data-variante-producto="kiosco-plegable kiosco-desarmable"]:not([hidden]) {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sidebar-estructura {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* [hidden] debe poder ocultar el bloque pese a su display:flex; si no, el
   display:flex anularía el display:none del atributo y se vería en desarmable. */
.sidebar-estructura[hidden] {
    display: none;
}

.sidebar-estructura__img {
    width: 100%;
    max-height: 190px;
    object-fit: contain;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.04);
}

.sidebar-estructura__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sidebar-estructura__valor {
    font-weight: 800;
    color: var(--color-accent);
    font-size: 1.05rem;
}

.sidebar-estructura__video {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #ff3b3b;
    text-decoration: none;
}

.sidebar-estructura__video:hover {
    text-decoration: underline;
}

.estimado-referencia__nota {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    line-height: 1.4;
}

/* ── Sidebar Step 2: variante de botón WhatsApp (dos líneas) ── */
.btn--whatsapp--variante {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 12px 16px;
}

.btn--whatsapp__texto {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.btn--whatsapp__pregunta {
    font-size: 0.78rem;
    font-weight: 400;
}

.btn--whatsapp__accion {
    font-weight: 800;
}

.wizard__sidebar-seguridad {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 16px 0 0;
    line-height: 1.4;
}

.wizard__sidebar-seguridad svg {
    flex-shrink: 0;
    margin-top: 1px;
}


/* ════════════════════════════════════════════════════════════
   STEP 2B — DATOS DEL PROYECTO (variante Kiosco Desarmable)

   Solo se agregan aquí las reglas EXCLUSIVAS de esta variante:
   grid de 6 medidas, link de "medida especial", estado bloqueado
   de la tarjeta de lona industrial y el badge oscuro (con símbolo
   de precio) que solo aplica en este panel. Todo lo demás (filas,
   toggles, swatches, ciudad, dropzone, cantidad, textarea, nav
   inferior) reutiliza tal cual las reglas de Step 2 ya definidas
   arriba, porque el HTML de 2B usa las mismas clases que 2A.
   ════════════════════════════════════════════════════════════ */

/* ── Campo 1: grid de 6 medidas (2A usa 3 vía .medida-tarjetas base) ── */
.medida-tarjetas--6col {
    grid-template-columns: repeat(6, 1fr);
}

/* ── Campo 1: imagen de fondo de cada medida (2B desarmable).
   Las fotos propias del desarmable viven en /step-3-desarmable/.
   La card 4x5 usa el archivo 5x4 (mismo rectángulo 4.00 × 5.00 m). ── */
.medida-tarjeta[for="medida-1x1-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/1x1-desarmable.webp");
}

.medida-tarjeta[for="medida-2x2-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/2x2-desarmable.webp");
}

.medida-tarjeta[for="medida-2x3-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/2x3-desarmable.webp");
}

.medida-tarjeta[for="medida-3x3-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/3x3-desarmable.webp");
}

.medida-tarjeta[for="medida-3x4-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/3x4-desarmable.webp");
}

.medida-tarjeta[for="medida-4x4-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/4x4-desarmable.webp");
}

.medida-tarjeta[for="medida-4x5-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/5x4-desarmable.webp");
}

.medida-tarjeta[for="medida-4x6-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/4x6-desarmable.webp");
}

.medida-tarjeta[for="medida-5x5-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/5x5-desarmable.webp");
}

.medida-tarjeta[for="medida-5x6-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/5x6-desarmable.webp");
}

.medida-tarjeta[for="medida-6x6-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/6x6-desarmable.webp");
}

.medida-tarjeta[for="medida-2x4-desarmable"] {
    background-image: url("../assets/img/cotizar/step-3-desarmable/2x4-desarmable.webp");
}

/* ── Campo 1: link "Solicitar medida especial a pedido" ── */
.wizard__link-medida-especial {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 0;
    background: none;
    border: none;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent);
    cursor: pointer;
}

.wizard__link-medida-especial:hover {
    text-decoration: underline;
}

.wizard__link-medida-especial__icono {
    font-weight: 800;
}

.medida-especial-campo {
    margin-top: 10px;
}

/* ── Campo 2: badge oscuro exclusivo de este panel (nivel INDUSTRIAL con
   símbolo de precio). .badge, .badge--gris y .badge--naranja ya existen
   en global/componentes.css y se reutilizan tal cual arriba; --oscuro es
   nuevo porque este tercer nivel es exclusivo de 2B. Si componentes.css
   ya define un modificador equivalente, reemplazar esta regla por esa
   clase. ── */
.badge--oscuro {
    background-color: var(--color-bg-dark, #111111);
    color: #ffffff;
}

/* ── Campo 2: estado bloqueado de la tarjeta de lona industrial.
   Se activa/desactiva vía JS según la medida elegida en el campo 1
   (ver cotizar.js). ── */
.lona-tarjeta--bloqueada {
    cursor: not-allowed;
    opacity: 0.55;
    background-color: rgba(0, 0, 0, 0.03);
}

.lona-tarjeta--bloqueada:hover {
    border-color: var(--color-border-dark, #e2e2e2);
}

.lona-tarjeta__candado {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-accent);
}

.lona-tarjeta__candado-icono {
    flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   STEP 2B — MOSTRADOR DE GALERÍA (medida seleccionada)
   Al clicar una medida, el grid 6×2 se oculta y aparece este
   mostrador: caja grande con la imagen (abajo-derecha) + 6 botones
   miniatura arriba + 5 a la izquierda. Modo persistente (sin volver).
   ──────────────────────────────────────────────────────────── */
.galeria-mostrador {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto repeat(5, 1fr);
    grid-template-areas:
        "b1  b2  b3  b4  b5  b6"
        "b7  caja caja caja caja caja"
        "b8  caja caja caja caja caja"
        "b9  caja caja caja caja caja"
        "b10 caja caja caja caja caja"
        "b11 caja caja caja caja caja";
    gap: 8px;
    /* Mantiene la altura cercana al grid 6×2 para no alterar el campo. */
    min-height: 252px;
}

.galeria-mostrador[hidden] {
    display: none;
}

/* Caja grande: imagen de la medida seleccionada. */
.galeria-mostrador__caja {
    position: relative;
    grid-area: caja;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--color-border-dark, #2a2a2a);
    background-color: #141414;
}

.galeria-mostrador__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
}

/* Velo degradado inferior para legibilidad del título. */
.galeria-mostrador__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(13, 13, 13, 0.6) 0%, rgba(13, 13, 13, 0) 50%);
    pointer-events: none;
}

.galeria-mostrador__titulo {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 2;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 0.5px;
    color: #ffffff;
}

/* Botones (miniaturas). */
.galeria-mostrador__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 0;
    border: 1px solid var(--color-border-dark, #2a2a2a);
    border-radius: 6px;
    background-color: #141414;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.galeria-mostrador__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(13, 13, 13, 0.5);
    transition: background 0.2s ease;
}

.galeria-mostrador__btn:hover {
    border-color: var(--color-accent);
}

.galeria-mostrador__btn:hover::before {
    background: rgba(13, 13, 13, 0.3);
}

.galeria-mostrador__btn-label {
    position: relative;
    z-index: 1;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
}


/* ════════════════════════════════════════════════════════════
   STEP 2C — DATOS DEL PROYECTO (variante "a medida": Hangar en
   Lona, Membrana Tensada, Cubrimiento Industrial, Proyecto Especial)

   Panel único compartido por los 4 tipos de proyecto "a medida".
   Reutiliza filas/toggles/dropzone/ciudad ya definidos arriba; aquí
   solo se agregan las reglas EXCLUSIVAS de este panel: variante de
   fila 1fr/1fr, aviso de ancho completo, textarea con contador,
   grupo de dimensiones, selector de chips, select nativo y la caja
   de confirmación de renders.
   ════════════════════════════════════════════════════════════ */

/* ── Variante de fila a 2 columnas iguales (campos 1 y 2) ── */
.wizard__fila--2col-b {
    grid-template-columns: 1fr 1fr;
}

/* ── Aviso informativo de ancho completo (mismo estilo que .alerta-info,
   usado en 2A/2B para el aviso de "paredes", pero ocupando toda la fila) ── */
.alerta-info--full {
    width: 100%;
    padding: 16px 20px;
    margin-bottom: 28px;
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── Campo 1: textarea con contador de caracteres ── */
.textarea-contador {
    position: relative;
}

.textarea-contador .wizard__textarea {
    padding-bottom: 26px;
}

.textarea-contador__valor {
    position: absolute;
    right: 12px;
    bottom: 10px;
    padding: 0 4px;
    font-size: 0.78rem;
    color: var(--color-text-muted, #8a8a8a);
    background-color: rgba(255, 255, 255, 0.9);
    pointer-events: none;
}

/* ── Campo 2: grupo de 3 inputs numéricos (Ancho x Largo x Alto) ── */
.dimensiones-grupo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dimensiones-grupo__campo {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 10px 14px;
    border: 1px solid var(--color-border-dark, #d0d0d0);
    border-radius: 6px;
    background-color: #ffffff;
}

.dimensiones-grupo__input {
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text-dark);
}

.dimensiones-grupo__input:focus {
    outline: none;
}

.dimensiones-grupo__input::-webkit-outer-spin-button,
.dimensiones-grupo__input::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.dimensiones-grupo__input[type="number"] {
    -moz-appearance: textfield;
}

.dimensiones-grupo__unidad {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted, #8a8a8a);
}

.dimensiones-grupo__x {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--color-text-muted, #8a8a8a);
}

/* ── Campo 3: selector de chips (checkboxes reales ocultos, multi-selección) ── */
.chip-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip-selector__opcion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--color-border-dark, #d0d0d0);
    border-radius: 20px;
    background-color: #ffffff;
    color: var(--color-text-dark);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.chip-selector__opcion:hover {
    border-color: var(--color-accent);
}

.chip-selector__opcion--activa {
    border-color: var(--color-accent);
    background-color: rgba(230, 126, 34, 0.08);
    color: var(--color-accent);
}

.chip-selector__icono {
    flex-shrink: 0;
}

/* ── Campo 3 (cubrimiento industrial): "Condiciones del espacio" ──
   Tabla compacta de 4 condiciones (piso, estructura perimetral, acceso
   de vehículos, ventilación): una fila por pregunta con <select> nativo
   a la derecha. Refinada para integrarse con la firma visual de la
   vista: selects con flecha custom (se quita la nativa), hover y foco
   amber (color de marca) y la pregunta se oscurece al pasar el cursor.
   El "Otro" de tipo de piso revela un campo de texto (ver cotizar.js). */
.condiciones-tabla {
    width: 100%;
    border-collapse: collapse;
}

.condiciones-tabla th,
.condiciones-tabla td {
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border-light, #E0E0E0);
    text-align: left;
    vertical-align: middle;
}

.condiciones-tabla tbody tr:first-child th,
.condiciones-tabla tbody tr:first-child td {
    padding-top: 4px;
}

.condiciones-tabla tbody tr:last-child th,
.condiciones-tabla tbody tr:last-child td {
    border-bottom: none;
    padding-bottom: 2px;
}

.condiciones-tabla th {
    width: 42%;
    padding-right: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-muted-2);
    line-height: 1.35;
    transition: color 0.15s ease;
}

/* Al pasar por una fila, su pregunta se oscurece para ligarla con el control. */
.condiciones-tabla tbody tr:hover th {
    color: var(--color-text-dark);
}

/* Selects de la tabla: se quita la flecha nativa y se pone un chevron
   custom (gris), con hueco a la derecha para que no se solape el texto.
   Scopeado a .condiciones-tabla para no tocar el select de plazo. */
.condiciones-tabla .wizard__select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.condiciones-tabla .wizard__select:hover {
    border-color: var(--color-accent);
}

.condiciones-tabla .wizard__select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
    /* El chevron pasa a amber al enfocar, reforzando el color de marca. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F5A623' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.condicion-otro {
    margin-top: 8px;
}

/* ── Campo 5: select nativo de plazo ── */
.wizard__select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--color-border-dark, #d0d0d0);
    border-radius: 6px;
    background-color: #ffffff;
    color: var(--color-text-dark);
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
}

/* ── Campo 7: caja de confirmación de renders (condicional, ver cotizar.js) ── */
.confirmacion-renders {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 12px 14px;
    background-color: rgba(31, 122, 61, 0.08);
    border: 1px solid rgba(31, 122, 61, 0.25);
    border-radius: 6px;
    color: var(--color-green, #1f7a3d);
    font-size: 0.85rem;
}

.confirmacion-renders__icono {
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Sidebar "SU PROYECTO:" — párrafo fijo bajo la lista de resumen ── */
.wizard__sidebar-nota {
    margin: 4px 0 24px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

.wizard__sidebar-nota strong {
    display: block;
    margin-bottom: 4px;
    font-weight: 800;
}

/* ════════════════════════════════════════════════════════════
   STEP 4 — CONFIRMACIÓN (mensaje de envío de cotización)
   Vista de COLUMNA ÚNICA (sin sidebar). Reutiliza .wizard__panel,
   .config-resumen--proyecto y .btn--whatsapp. Estiliza lo nuevo:
   hero de éxito, bloque resumen oscuro, tracker horizontal,
   tarjetas "mientras tanto" y banda CTA oscura.
   ════════════════════════════════════════════════════════════ */

/* El Step 4 oculta el sidebar y centra el contenido en una sola columna. */
.wizard--confirmacion .wizard__sidebar {
    display: none;
}

.wizard--confirmacion .wizard__grid {
    grid-template-columns: 1fr;
}

.wizard--confirmacion .wizard__principal {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Hero de éxito ── */
.confirmacion-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 8px 0 28px;
    margin-bottom: 8px;
}

.confirmacion-hero__check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 18px;
    border-radius: 50%;
    background-color: var(--color-green, #52B788);
    color: #ffffff;
    box-shadow: 0 0 0 8px rgba(82, 183, 136, 0.15), 0 14px 30px rgba(82, 183, 136, 0.35);
}

@keyframes confirmacion-check-pop {
    0% { transform: scale(0.6); opacity: 0; }
    60% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: no-preference) {
    .confirmacion-hero__check {
        animation: confirmacion-check-pop 0.5s ease-out;
    }
}

.confirmacion-hero__eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-green, #2f9e63);
    margin-bottom: 6px;
}

.confirmacion-hero__titulo {
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    color: var(--color-text-dark);
    margin: 0 0 8px;
}

.confirmacion-hero__subtitulo {
    font-size: 1rem;
    color: var(--color-text-muted, #666666);
    max-width: 520px;
    margin: 0 0 20px;
}

.confirmacion-hero__subtitulo strong {
    color: var(--color-text-dark);
}

.confirmacion-hero__ref {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 24px;
    background-color: var(--color-bg-dark, #0D0D0D);
    border: 1px solid rgba(245, 166, 35, 0.4);
    border-radius: 999px;
    color: #ffffff;
}

.confirmacion-hero__ref-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.6);
}

.confirmacion-hero__ref-valor {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}

/* ── Bloque resumen oscuro ── */
.confirmacion-resumen {
    background-color: var(--color-bg-dark, #0D0D0D);
    color: #ffffff;
    border-top: 4px solid var(--color-accent);
    border-radius: 8px;
    padding: 26px 28px;
    margin-bottom: 28px;
}

.confirmacion-resumen__titulo {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ffffff;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

/* El resumen hereda .config-resumen--proyecto (chips amber + textos blancos)
   y se dispone en 2 columnas para aprovechar el ancho de la columna única. */
.config-resumen--confirmacion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 28px;
    margin-bottom: 0;
}

/* ── Próximos pasos (tracker horizontal con línea conectora) ── */
.confirmacion-proceso {
    margin-bottom: 32px;
}

.confirmacion-proceso__titulo {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-dark);
    margin: 0 0 18px;
}

.proceso-tracker {
    list-style: none;
    margin: 0;
    padding: 0;
}

.proceso-tracker--horizontal {
    display: flex;
    justify-content: space-between;
    gap: 0;
}

.proceso-tracker--horizontal .proceso-tracker__paso {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 0 8px;
    position: relative;
}

/* Línea conectora entre círculos (no en el último). */
.proceso-tracker--horizontal .proceso-tracker__paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px;
    left: calc(50% + 24px);
    right: calc(-50% + 24px);
    height: 3px;
    background-color: var(--color-border-dark, #d0d0d0);
    border-radius: 2px;
    z-index: 0;
}

.proceso-tracker--horizontal .proceso-tracker__paso--completado:not(:last-child)::after {
    background-color: var(--color-green, #52B788);
}

.proceso-tracker__numero {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 1.1rem;
    border: 2px solid var(--color-border-dark, #d0d0d0);
    color: var(--color-text-muted, #AAAAAA);
    background-color: #ffffff;
    position: relative;
    z-index: 1;
}

.proceso-tracker__paso--completado .proceso-tracker__numero {
    background-color: var(--color-green, #52B788);
    border-color: var(--color-green, #52B788);
    color: #ffffff;
}

.proceso-tracker__paso--activo .proceso-tracker__numero {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #1a1a1a;
    box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.18);
}

.proceso-tracker__label {
    font-weight: 700;
    color: var(--color-text-dark);
    font-size: 0.95rem;
}

.proceso-tracker__estado {
    font-size: 0.8rem;
    color: var(--color-text-muted, #666666);
}

.proceso-tracker__paso--completado .proceso-tracker__estado {
    color: var(--color-green, #2f9e63);
    font-weight: 600;
}

.proceso-tracker__paso--activo .proceso-tracker__estado {
    color: var(--color-accent-dark, #D48B0F);
    font-weight: 600;
}

/* ── "Mientras tanto, conozca más" ── */
.confirmacion-bloque-titulo {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-text-dark);
    margin: 0 0 14px;
}

.mientras-tanto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.mientras-tanto__tarjeta {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 18px;
    background-color: var(--color-bg-cream, #F5F5F0);
    border: 1px solid var(--color-border-dark, #2A2A2A);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-dark);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.mientras-tanto__tarjeta:hover {
    border-color: var(--color-accent);
    box-shadow: 0 10px 22px rgba(245, 166, 35, 0.18);
    transform: translateY(-2px);
}

.mientras-tanto__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(245, 166, 35, 0.14);
    color: var(--color-accent);
}

.mientras-tanto__titulo {
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-dark);
}

.mientras-tanto__accion {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent);
}

/* ── Banda CTA oscura (contacto inmediato) ── */
.confirmacion-cta {
    background-color: var(--color-bg-dark, #0D0D0D);
    border-top: 4px solid var(--color-accent);
    border-radius: 8px;
    padding: 26px 28px;
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    color: #ffffff;
}

.confirmacion-cta__texto {
    flex: 1 1 280px;
}

.confirmacion-cta__titulo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: #ffffff;
}

.confirmacion-cta__sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.92rem;
    margin: 0;
}

.confirmacion-cta__acciones {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.confirmacion-cta__wa {
    width: 100%;
}

.confirmacion-cta__tel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.92rem;
}

.confirmacion-cta__tel strong {
    color: var(--color-accent);
}

.confirmacion-cta__tel:hover strong {
    text-decoration: underline;
}

.confirmacion-cta__reset {
    text-align: center;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.85rem;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.confirmacion-cta__reset:hover {
    color: var(--color-accent);
}

/* Detiene el pulso infinito del botón Enviar cuando el Step 3 está oculto. */
.wizard__panel[hidden] .wizard__btn-enviar {
    animation: none;
}

/* ── Responsive Step 4 ── */
@media (max-width: 900px) {
    .mientras-tanto {
        grid-template-columns: 1fr;
    }

    .config-resumen--confirmacion {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .confirmacion-hero__titulo {
        font-size: 2.1rem;
    }

    /* El tracker horizontal pasa a vertical (stack) sin conectores. */
    .proceso-tracker--horizontal {
        flex-direction: column;
        gap: 16px;
    }

    .proceso-tracker--horizontal .proceso-tracker__paso {
        flex-direction: row;
        align-items: center;
        text-align: left;
        gap: 14px;
    }

    .proceso-tracker--horizontal .proceso-tracker__paso::after {
        display: none;
    }
}