/* ----------------------------------------------------------
   QWOOD WIZARD — Bold Clean 60/30/10
   2026-04-03  ·  Tokens extraídos de qwood.es en producción
   - Montserrat 800+900 cargada explícitamente
   - Extra bold via -webkit-text-stroke en elementos clave
   - Pill buttons 999px, verde #1bcf17, weight 900
---------------------------------------------------------- */
/* Google Fonts Montserrat retirado 2026-04-24 — ver home.css nota. */

/* ==========================================================
   0. TOKENS — extraídos de la página real qwood.es
   ========================================================== */
:root{
  --qw-font-sans: var(--qwood-font-sans, "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  --qw-color-primary: var(--qwood-color-primary, #1bcf17);
  --qw-color-primary-dark: var(--qwood-color-primary-dark, #1bcf17);
  --qw-color-primary-soft: rgba(27,207,23,.08);
  --qw-color-accent: var(--qwood-color-primary, #1bcf17);
  --qw-color-text-main: var(--qwood-color-text, #0f172a);
  --qw-color-text-muted: var(--qwood-color-muted, rgba(15,23,42,.68));
  --qw-color-bg-card: var(--qwood-color-card-bg, #ffffff);
  --qw-color-bg-helper: var(--qwood-color-helper-bg, #f8fbf8);
  --qw-color-bg-summary: var(--qwood-color-bg-alt, #ffffff);
  --qw-color-border-soft: #e6ecf5;
  --qw-color-border-strong: rgba(27,207,23,.32);
  --qw-modal-max-width: 960px;
  --qw-radius-xl: 22px;
  --qw-radius-lg: 22px;
  --qw-radius-md: 16px;
  --qw-shadow-soft: 0 16px 38px rgba(15,23,42,.08);
  --qw-shadow-strong: 0 24px 60px rgba(15,23,42,.14);
  --qw-ease-out: var(--qwood-ease, cubic-bezier(.2,.8,.2,1));
  --qw-dur-1: var(--qwood-speed-fast, 140ms);
  --qw-dur-2: var(--qwood-speed, 220ms);
  --qw-dur-3: var(--qwood-speed-slow, 300ms);
  /* FIX 2026-08-06 (auditoría de regresión · P1): estaba HARDCODEADO y no
     referenciaba el SSOT, así que todo el configurador se quedó con el anillo
     invisible (1,17:1) pese al fix global. */
  --qw-ring: var(--qwood-ring, 0 0 0 2px #fff, 0 0 0 4px #0b6f0a);
  --qw-color-text-ultra-muted: rgba(15,23,42,.28);
  --qw-color-text-soft: rgba(15,23,42,.5);
  --qw-color-text-label: rgba(15,23,42,.38);
  --qw-color-primary-glow: rgba(27,207,23,.25);
  --qw-color-primary-ring: rgba(27,207,23,.15);
  --qw-color-primary-ring-strong: rgba(27,207,23,.25);
  --qw-color-border-card: #e6ecf5;
  --qw-color-border-card-selected: #1bcf17;
  --qw-radius-card: 22px;
  --qw-radius-pill: 14px;
  --qw-color-icon-gold: #ffcc00;
  --qw-color-icon-gold-bg: rgba(255,204,0,.1);
  --qw-color-icon-brown: #c8956c;
  --qw-color-icon-brown-bg: rgba(200,149,108,.1);
  --qw-color-icon-blue: #0ea5e9;
  --qw-color-icon-blue-bg: rgba(14, 165, 233,.1);
}

/* ==========================================================
   0.1 RESET SUAVE (solo wizard)
   ========================================================== */
#qw-overlay,
#qw-overlay *,
#qw-modal,
#qw-modal *{
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--qw-font-sans);
}

#qw-modal ::selection{
  background: rgba(27,207,23,.18);
}

/* Extra bold: text-stroke para superar el límite de weight 900 */
.qw-header__title,
.qw-phase-title,
.qw-step-indicator,
.qw-header__subtitle,
.qw-progress-dot,
.qw-adh-card__name,
.qw-adh-card__price,
.qw-prot-card strong,
.qw-summary h5,
.qw-summary-row__label,
.qw-summary-row__value,
.qw-total__label,
.qw-total__value,
.qw-total__breakdown,
.qw-summary-product__name,
#qw-modal .qw-btn-secondary{
  -webkit-text-stroke: .25px currentColor;
}
/* NO text-stroke en botones con texto blanco — distorsiona */
#qw-modal .qw-btn-primary{
  -webkit-text-stroke: 0;
}

#qw-modal :focus{ outline: none; }
#qw-modal :where(button,[role="button"],a,input,select,textarea):focus-visible{
  box-shadow: var(--qw-ring);
  border-color: rgba(27,207,23,.75);
}

/* Evitar desplazamiento horizontal global */
html, body, #qw-overlay, #qw-modal { overflow-x: hidden; }

/* ==========================================================
   1. OVERLAY + BLOQUEO FONDO
   ========================================================== */
#qw-overlay{
  position: fixed;
  inset: 0;
  z-index: 1000003;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 48px 24px;
  min-height: 100vh;
  box-sizing: border-box;

  background: rgba(15,23,42,.52);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* FIX 2026-08-06 (audit 5.ª pasada · [P0] «el foco nunca entra en el modal del
     wizard»). `visibility` se transicionaba junto a `opacity`, así que al abrir
     el overlay su visibility computada seguía siendo `hidden` durante la misma
     vuelta síncrona en la que openWizard() llama a .focus() — y el navegador
     ignora .focus() sobre un subárbol oculto. Resultado: el foco se quedaba en
     el botón que abrió el wizard, la trampa de foco (que solo actúa si el
     elemento activo es el primero o el último DEL OVERLAY) no se disparaba
     nunca, y con aria-modal="true" puesto el configurador —el embudo del
     dinero— era inutilizable por teclado y con lector de pantalla.
     Patrón estándar: al OCULTAR se retrasa visibility hasta que acaba el fundido
     (se conserva la animación de cierre); al MOSTRAR se aplica al instante. */
  transition: opacity var(--qw-dur-3) var(--qw-ease-out),
              visibility 0s linear var(--qw-dur-3);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}

/* Overlay limpio — backdrop-filter ya provee profundidad */
#qw-overlay::before{ content: none; }

#qw-overlay.is-open{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Sin retraso al abrir: visibility pasa a `visible` en el mismo instante en
     que se añade la clase, de modo que el .focus() posterior sí encuentra un
     subárbol visible. Ver el comentario del bloque base. */
  transition: opacity var(--qw-dur-3) var(--qw-ease-out),
              visibility 0s linear 0s;
}

.admin-bar #qw-overlay{ padding-top: 72px; padding-bottom: 56px; }

body.qw-modal-open{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

html.qw-html-lock,
html.qw-html-lock body{
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ==========================================================
   2. MODAL (fallback: scroll en modal)
   ========================================================== */
#qw-modal{
  width: 100%;
  max-width: var(--qw-modal-max-width);
  max-height: calc(100vh - 96px);
  display: flex;
  flex-direction: column;

  background: var(--qw-color-bg-card);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(15,23,42,.14); /* 2026-06-11 cero-gris: borde fuera, manda la sombra */

  color: var(--qw-color-text-main);
  font-size: 15px;
  line-height: 1.5;

  position: relative;
  z-index: 1000004;

  /* Fallback si NO existe wrapper .qw-scroll */
  overflow-y: auto;
  overflow-x: hidden;

  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  transform: translateY(20px) scale(.985);
  opacity: 0;
  transition: transform var(--qw-dur-3) var(--qw-ease-out),
              opacity var(--qw-dur-3) var(--qw-ease-out);
  isolation: isolate;
  contain: layout paint;
}

#qw-overlay.is-open #qw-modal{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Responsive */
@media (max-width: 980px){
  #qw-overlay{ align-items:flex-start; padding: 24px 16px; }
  #qw-modal{
    margin: 0 8px 28px;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    box-shadow: 0 18px 40px rgba(15,23,42,.18);
  }
}

/* ==========================================================
   2.1 SCROLL INTERNO REAL (si existe .qw-scroll)
   - Mantiene bordes redondos perfectos
   ========================================================== */
@supports selector(#qw-modal:has(.qw-scroll)){
  /* el modal recorta siempre */
  #qw-modal:has(.qw-scroll){ overflow: hidden; }

  /* el scroll vive en wrapper interno */
  #qw-modal:has(.qw-scroll) .qw-scroll{
    flex: 1 1 auto;
    min-height: 0;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  @media (max-width: 980px){
    #qw-modal:has(.qw-scroll) .qw-scroll{
      max-height: calc(100vh - 48px);
    }
  }
}

/* ==========================================================
   2.2 SCROLLBAR VERDE (aplica a .qw-scroll si existe, si no al modal)
   ========================================================== */
@media (max-width: 980px){
  #qw-modal{ scrollbar-width: none; }
  #qw-modal::-webkit-scrollbar{ width:0; height:0; }

  #qw-modal .qw-scroll{ scrollbar-width: none; }
  #qw-modal .qw-scroll::-webkit-scrollbar{ width:0; height:0; }
}

@media (min-width: 981px){
  /* Firefox — subtle scrollbar, only visible on scroll */
  #qw-modal,
  #qw-modal .qw-scroll{
    scrollbar-width: thin;
    scrollbar-color: rgba(15,23,42,.12) transparent;
  }

  /* WebKit — thin, near-invisible scrollbar */
  #qw-modal::-webkit-scrollbar,
  #qw-modal .qw-scroll::-webkit-scrollbar{
    width: 6px;
  }
  #qw-modal::-webkit-scrollbar-track,
  #qw-modal .qw-scroll::-webkit-scrollbar-track{
    background: transparent;
    margin: 8px 0;
  }
  #qw-modal::-webkit-scrollbar-thumb,
  #qw-modal .qw-scroll::-webkit-scrollbar-thumb{
    border-radius: 999px;
    background: rgba(15,23,42,.1);
  }
  #qw-modal::-webkit-scrollbar-thumb:hover,
  #qw-modal .qw-scroll::-webkit-scrollbar-thumb:hover{
    background: rgba(27,207,23,.3);
  }
  #qw-modal::-webkit-scrollbar-corner,
  #qw-modal .qw-scroll::-webkit-scrollbar-corner{
    background: transparent;
  }
}

/* ==========================================================
   3. HEADER / PROGRESS / FOOTER (sticky dentro del scroll)
   ========================================================== */
/* --- Header: sticky top bar with title + close --- */
.qw-header{
  position: sticky;
  top: 0;
  z-index: 13;

  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;

  background: #ffffff;
  padding: 18px 28px 16px;
  border-top-left-radius: var(--qw-radius-xl);
  border-top-right-radius: var(--qw-radius-xl);
}

.qw-header__left{
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}

/* Step indicator: "PASO X DE 4" */
.qw-step-indicator,
.qw-header__subtitle{
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0ea5e9;
  margin-bottom: 3px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Reset old grid/pill styles */
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.qw-step-indicator::before{ content: none; }
.qw-step-indicator:hover{
  transform: none;
  box-shadow: none;
}

/* Header title: "Configura tu parquet" */
.qw-header__title{
  font-size: 22px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -.02em;
}

/* Product chip (hidden in new design, kept for compat) */
.qw-chip{
  display: none;
}

/* Close button — white frosted with soft shadow (no border) */
.qw-close{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #ffffff;
  border: none;
  color: #0f172a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  font-weight: 900;
  padding: 0;
  transition: background .15s ease, box-shadow .18s ease, transform .18s ease;
  appearance: none;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
  gap: 0;
}
.qw-close:hover{
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px -8px rgba(15,23,42,.28),
    0 4px 10px -4px rgba(15,23,42,.18);
}
.qw-close:active{
  transform: translateY(0);
  box-shadow:
    0 4px 10px -4px rgba(15,23,42,.20);
}

/* --- Progress / Stepper ---
   2026-06-12 (owner mockup): stepper compacto — círculos 28px conectados por
   línea de progreso, completados y activo en verde sólido, label sentence-case
   debajo (el activo en verde bold). Sin halos. */
.qw-progress-wrap{
  padding: 8px 28px 30px;
  background: #ffffff;
  overflow: visible !important;
  position: relative;
  z-index: 12;
  margin-top: 0;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.qw-progress-header{ display:none; }

/* Hide old bar-style progress elements */
.qw-progress{
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  overflow: visible;
}
.qw-progress-inner{ display: none; }

/* Bold stepper: flex row — centered */
.qw-progress-steps,
.qw-progress--bold .qw-progress-steps{
  position: relative;
  left: auto; right: auto;
  top: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  pointer-events: auto;
  overflow: visible !important;
}

/* Dot base: perfect circles — numbers centered */
.qw-progress-dot,
.qw-progress--bold .qw-progress-dot{
  pointer-events: auto;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  max-height: 28px;
  border-radius: 50%;
  padding: 0 !important;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.02em;

  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  border: none;
  background: #ffffff;
  color: rgba(15,23,42,.45);

  box-shadow:
    0 2px 8px -2px rgba(15,23,42,.18),
    0 1px 3px rgba(15,23,42,.10);
  animation: none;
  transform: none;

  transition: all .25s var(--qw-ease-out);
}

/* Label below pill via data-label */
.qw-progress-dot::after,
.qw-progress--bold .qw-progress-dot::after{
  content: attr(data-label) !important;
  display: block !important;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 7px;

  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;

  color: var(--qw-color-text-ultra-muted);
}

/* Dot number span */
.qw-progress-dot span,
.qw-progress--bold .qw-progress-dot span{
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  line-height: 1;
}

/* Active: verde sólido plano, un punto más grande que el resto (cue no-color) */
.qw-progress-dot.is-active,
.qw-progress--bold .qw-progress-dot.is-active{
  width: 32px !important;
  height: 32px !important;
  min-width: 32px;
  max-width: 32px;
  min-height: 32px;
  max-height: 32px;
  background: #1bcf17;
  border-color: #1bcf17;
  color: #fff;
  box-shadow: 0 3px 10px -2px rgba(27,207,23,.45);
  transform: none;
  animation: none;
}
.qw-progress-dot.is-active::after,
.qw-progress--bold .qw-progress-dot.is-active::after{
  color: #1bcf17;
  font-weight: 800;
}

/* Completed step: verde sólido (mockup) — la línea llena conecta con él */
.qw-progress--bold .qw-progress-dot.is-done:not(.is-active){
  background: #1bcf17;
  border: none;
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(27,207,23,.35);
  transform: none;
  animation: none;
}
.qw-progress--bold .qw-progress-dot.is-done:not(.is-active)::after{
  color: var(--qw-color-text-ultra-muted);
}

/* Active pill — always wins over is-done */
.qw-progress--bold .qw-progress-dot.is-active.is-done{
  background: #1bcf17 !important;
  border-color: #1bcf17 !important;
  color: #fff !important;
  box-shadow: 0 3px 10px -2px rgba(27,207,23,.45) !important;
}
.qw-progress--bold .qw-progress-dot.is-active.is-done::after{
  color: #1bcf17 !important;
}

/* Connector lines between pills
   2026-06-12 (owner mockup): vuelve la pista visible — tramo pendiente en
   slate muy suave, tramo completado en verde sólido (reemplaza la decisión
   2026-06-07 de pista transparente). */
.qw-progress-connector,
.qw-progress--bold .qw-progress-connector{
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(15,23,42,.08);
  min-width: 18px;
  align-self: center;
  margin-top: 0; /* centered by parent align-items:center */
  transition: background .4s var(--qw-ease-out);
}
.qw-progress-connector.is-filled,
.qw-progress--bold .qw-progress-connector.is-filled{
  background: #1bcf17;
}

/* Clean separator — solid, no LED/glow */
.qw-header__glow{
  position: relative;
  width: 100%;
  height: 1px;
  background: #e6ecf5;
  z-index: 11;
  flex-shrink: 0;
}

@media (hover:hover){
  .qw-progress-dot:hover{
    transform: none;
  }
}

/* Floating step chip — hidden by default; solo visible en mobile (≤700px,
   ver bloque dentro del media query). Razón: en desktop el header es
   visible siempre, el chip sería redundante. */
.qw-floating-step{
  display: none;
}

/* --- Footer --- */
.qw-footer{
  position: sticky;
  bottom: 0;
  z-index: 13;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;

  padding: 14px 28px 20px;

  background: #ffffff;

  border-top: none; /* 2026-06-07 (owner): quitar la línea gris encima del footer */
}

.qw-footer-left,
.qw-footer-right{ display:flex; align-items:center; gap:10px; }
.qw-footer-left{ justify-content:flex-start; }
.qw-footer-right{ justify-content:flex-end; }

/* --- Header + Stepper + Footer mobile --- */
@media (max-width: 700px){
  /* === FULL-SCREEN MODAL en mobile ===
     2026-05-01: extendido desde 380px a 700px porque la mayoría de smartphones
     tienen viewport ≥390px (iPhone 12-15, Galaxy S, Pixel) y el modal se
     veía con márgenes y gaps blancos arriba/abajo. Ahora cubre todo el
     viewport edge-to-edge en cualquier mobile. */
  /* 2026-05-01 (R2): user reportó gap inferior (botones flotando sobre
     la barra de Safari) + "PASO 1 DE 4" cortado arriba. Fixes:
     • Overlay y modal a 100dvh (dynamic viewport) — se adapta cuando la
       address bar de iOS Safari colapsa al hacer scroll. Antes vh estático
       creaba modal más alto que el viewport visible → footer salía abajo;
       svh creaba modal más corto que el viewport sin barras → gap abajo.
       dvh es el sweet spot.
     • align-items: stretch con !important para vencer cascada del
       bloque ≤980px que pone flex-start (causa gap arriba).
     • padding-top env(safe-area-inset-top) para evitar que el notch oculte
       la kicker "PASO X DE 4". */
  #qw-overlay{
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  /* !important para vencer responsive-surfaces.css que define
     max-height: 84vh en ≤420px y max-height: min(88vh, 960px) en ≤760px
     con misma especificidad (#qw-modal) — pero responsive-surfaces.css se
     carga DESPUÉS de wizard.css, así que sin !important gana cascade. */
  #qw-modal{
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: 0 !important;
    /* Padding superior para evitar que el notch / status bar de iOS
       Safari oculte la kicker "PASO X DE 4". */
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  #qw-modal:has(.qw-scroll) .qw-scroll{
    flex: 1 1 0;
    min-height: 0;
    max-height: unset;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Reservar espacio bajo el footer fixed para que la última card no
       quede oculta tras los botones. footer.qw-footer ≈ 76px sin extras. */
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }

  /* 2026-05-01 (R5): nada sticky en mobile (decisión user). Header y
     progress son normal-flow → scrollean fuera al hacer scroll y aparecen
     al volver arriba. Para mantener el control siempre accesible, los
     botones de call (📞) y close (X) se sacan visualmente del header y
     quedan FIXED en la esquina superior derecha — siempre visibles. */
  .qw-header{
    position: static !important;
    padding: 10px 64px 0 20px;
    flex-wrap: nowrap;
    border-bottom: none;
  }
  .qw-header__title{
    font-size: 18px;
    margin-top: 2px;
  }
  /* Reducir gap entre kicker "PASO X DE 4" y el título */
  .qw-step-indicator,
  .qw-header__subtitle{
    margin-bottom: 0 !important;
    line-height: 1.2;
  }
  .qw-progress-wrap{
    position: static !important;
    padding: 6px 20px 12px;
    background: transparent;
    box-shadow: none;
  }
  /* === FLOATING TRIO — chip + call + close ===
     Design pass 2026-05-01: trio coordinado con misma altura (38px),
     mismo sistema de elevación (3-layer shadow + frosted glass) y ritmo
     de spacing consistente (16px desde edge, 10px entre elementos).
     Cada pieza mantiene su rol semántico: chip informativo (dark),
     botones de acción (white frosted). */

  /* Base compartida: alineación vertical, blur, shadow stack */
  .qw-floating-step,
  #qw-modal .qw-header .qw-close,
  #qw-modal .qw-header .qw-header__help{
    position: fixed !important;
    height: 38px !important;
    top: max(14px, calc(14px + env(safe-area-inset-top, 0px))) !important;
    z-index: 1000005 !important;
    backdrop-filter: blur(14px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.10) inset,
      0 10px 28px -12px rgba(15,23,42,.22),
      0 4px 12px -6px rgba(15,23,42,.14) !important;
    transition:
      transform .18s cubic-bezier(.2,.8,.2,1),
      box-shadow .18s ease,
      background-color .18s ease !important;
  }

  /* Botones de acción — círculos frosted white de 38px */
  #qw-modal .qw-header .qw-close,
  #qw-modal .qw-header .qw-header__help{
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important; /* 2026-06-11: target táctil (la base compartida fija 38px) */
    border-radius: 50% !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid rgba(15,23,42,.08) !important;
    color: #0f172a !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Posición — ritmo 16/10/10 desde edge derecho */
  #qw-modal .qw-header .qw-close{
    right: 16px !important;
  }
  #qw-modal .qw-header .qw-header__help{
    right: 64px !important; /* 16 + 38 + 10 */
  }

  /* Hover/active solo con pointer fino (no en touch) */
  @media (hover: hover) and (pointer: fine){
    #qw-modal .qw-header .qw-close:hover,
    #qw-modal .qw-header .qw-header__help:hover{
      background: #ffffff !important;
      transform: translateY(-1px) !important;
      box-shadow:
        0 1px 0 rgba(255,255,255,.14) inset,
        0 14px 32px -12px rgba(15,23,42,.30),
        0 6px 16px -6px rgba(15,23,42,.18) !important;
    }
  }
  #qw-modal .qw-header .qw-close:active,
  #qw-modal .qw-header .qw-header__help:active{
    transform: translateY(0) !important;
    box-shadow:
      0 1px 0 rgba(255,255,255,.06) inset,
      0 4px 10px -4px rgba(15,23,42,.22) !important;
  }
  /* Ocultar m² chip en mobile — el dato ya aparece en el sumatorio y en los
     cálculos. Antes solo se ocultaba en ≤380px; al subir el breakpoint y
     hacer flotantes los botones de call+close, el "40 M²" quedaba pegado
     contra el botón flotante creando ruido visual. */
  .qw-header__m2{
    display: none !important;
  }

  /* === FLOATING STEP CHIP "X / 4" ===
     2026-05-01 (R6): chip compacto siempre visible junto al call+close para
     que el user sepa siempre en qué paso está, incluso cuando scrolla y el
     header desaparece. Validación UX/CRO: progress concreto ("3 / 4") tiene
     más impacto en completion rate que dots abstractos (Baymard, Stripe).
     2026-05-10: en viewports ≤460px el chip se solapaba con el título
     "Configura tu parquet" (overlay z=1000005 sobre título z=auto). Los
     dots de progreso bajo el header ya cubren el rol, así que ocultamos
     el chip en narrow phones (iPhone 12-15 = 390-430). Se mantiene en
     461-700px donde sí hay espacio horizontal. */
  /* === STEP CHIP — informativo, dark, tipografía con tabular numbers ===
     Hereda height/top/blur/shadow del bloque "trio" arriba; aquí solo
     definimos lo específico: ancho auto, padding horizontal, color/fuente. */
  .qw-floating-step{
    display: inline-flex !important;
    align-items: center !important;
    right: 122px !important; /* 64 (call) + 38 + 10 + 10 buffer del padding */
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: rgba(15,23,42,.92) !important;
    color: #ffffff !important;
    font-family: var(--qw-font-sans, "Montserrat", system-ui, sans-serif) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    line-height: 1 !important;
    border: 1px solid rgba(255,255,255,.06) !important;
    pointer-events: none;
    user-select: none;
    /* Tabular numbers — los dígitos no se desalinean al cambiar de paso */
    font-variant-numeric: tabular-nums;
    -webkit-font-feature-settings: 'tnum' on, 'lnum' on;
    font-feature-settings: 'tnum' on, 'lnum' on;
  }
  .qw-floating-step__current{
    color: #ffffff;
    font-weight: 900;
  }
  .qw-floating-step__sep{
    color: rgba(255,255,255,.36); /* sep más sutil → "3 / 4" se lee como unidad */
    font-weight: 400;
    margin: 0 6px;
  }
  .qw-floating-step__total{
    color: rgba(255,255,255,.62);
    font-weight: 700;
  }
  .qw-progress-dot,
  .qw-progress--bold .qw-progress-dot{
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    max-width: 28px;
    min-height: 28px;
    max-height: 28px;
    font-size: 13px;
    border-radius: 50%;
    padding: 0 !important;
  }
  .qw-progress-dot.is-active,
  .qw-progress--bold .qw-progress-dot.is-active{
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
  }
  /* Hide labels on mobile */
  .qw-progress-dot::after,
  .qw-progress--bold .qw-progress-dot::after{
    display: none !important;
  }
  .qw-progress-connector,
  .qw-progress--bold .qw-progress-connector{
    margin-top: 0;
    align-self: center;
  }
  .qw-header__glow{
    height: 1px;
  }

  /* === FIX containing-block trap ===
     `.qw-step` usa transform Y will-change:transform para la animación
     de entrada, ambos crean containing-block para descendientes fixed.
     Resultado: el footer fixed se posicionaba respecto al step (no
     respecto al viewport) → bottom:0 pegaba al final del contenido del
     step en vez del viewport bottom. Solución: en mobile usamos opacity
     SOLA para la animación y eliminamos cualquier transform/will-change
     que pueda crear containing block. !important para vencer overrides
     cascade del bloque original. También `contain: none` por si acaso. */
  .qw-step,
  .qw-step.qw-step-active{
    transform: none !important;
    will-change: opacity !important;
    contain: none !important;
    perspective: none !important;
    filter: none !important;
  }
  /* contain del modal también — si crea containing block, el fixed footer
     se referencia al modal (que ahora es 100dvh) en vez del viewport real
     incluyendo safe-area. Quitarlo es más seguro en mobile. */
  #qw-modal{
    contain: none !important;
    isolation: auto !important;
  }

  /* === FOOTER FIXED al viewport bottom ===
     2026-05-01: Antes era position:sticky dentro de .qw-step (con transform
     creando containing block, sticky se rompía respecto al scroll ancestor).
     Resultado: botones flotaban en medio del contenido (screenshot del
     usuario sobre iPhone+Safari). Fix: position:fixed al viewport bottom,
     respetando safe-area-inset-bottom (home indicator iOS).
     Specificidad subida con #qw-overlay para vencer responsive-surfaces.css
     (#qw-modal .qw-footer flex-direction:column en ≤760px). */
  #qw-overlay .qw-footer,
  #qw-modal .qw-footer{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 10px 16px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
    box-shadow: 0 -8px 24px rgba(15,23,42,.08) !important;
    z-index: 1000005 !important;
    background: #ffffff !important;
  }
  /* Solo el footer del step activo es visible (los demás están en
     display:none vía .qw-d-none, pero por seguridad ocultamos también
     cualquier .qw-footer fuera del step activo). */
  .qw-step:not(.qw-step-active) .qw-footer{
    display: none !important;
  }
  #qw-overlay .qw-footer .qw-btn,
  #qw-modal .qw-footer .qw-btn{
    flex: 1;
    min-width: 0;
    text-align: center;
    justify-content: center;
    padding: 14px 16px;
    font-size: 14px;
  }
}

@media (max-width: 980px){
  .qw-footer .qw-btn{ min-width:0; }
}

/* ==========================================================
   4. CUERPO / SIDEBAR / SECCIONES
   ========================================================== */
.qw-section{ background: transparent; padding-bottom: 0 !important; }

.qw-step{
  display:block;
  opacity:0;
  transform: translateY(10px);
  transition: opacity var(--qw-dur-3) var(--qw-ease-out),
              transform var(--qw-dur-3) var(--qw-ease-out);
}
.qw-step.qw-step-active{
  opacity:1;
  transform: translateY(0) scale(1);
  will-change: opacity, transform;
}
.qw-d-none{ display:none !important; }

.qw-body{
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 28px 28px 32px;
}

@media (max-width: 700px){
  .qw-body{
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px 16px 24px;
  }
}

.qw-sidebar{
  display:flex;
  flex-direction: column;
  gap: 12px;
  align-self: flex-start;
  position: sticky;
  top: 20px;
}
@media (max-width: 700px){
  .qw-sidebar{ position: static; top: auto; }
}

.qw-phase-title{
  margin: 2px 0 4px;
  font-size: 24px;
  color: #0f172a;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.2;
  display: block;
}
.qw-phase-title::before{
  content: none;
}

.qw-helper{
  background: transparent;
  border: none;
  border-left: none;
  padding: 0;
  border-radius: 0;
  color: rgba(15,23,42,.45);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
  margin-bottom: 20px;
  box-shadow: none;
  position: relative;
}
.qw-helper::before{
  content: none;
}

/* ==========================================================
   5. CARDS — Premium Natural Bold
   ========================================================== */
.qw-helper-manual-note{
  margin-top: 6px;
}

.qw-helper-spaced{
  margin-top: 6px;
}

/* Lista compacta dentro de .qw-helper (para los desgloses de coste por
   adhesivo en step 3). 2026-05-01. */
.qw-helper-list{
  list-style: none;
  margin: 6px 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qw-helper-list li{
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.62);
  line-height: 1.45;
}
.qw-helper-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--qw-color-primary, #1bcf17);
  font-weight: 900;
}
.qw-helper-list li strong{
  color: rgba(15,23,42,.92);
  font-weight: 900;
}

/* --- M2 bar (above adhesive cards) --- */
.qw-m2-bar{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: rgba(27,207,23,.04);
  border: 1px solid rgba(27,207,23,.12);
  border-radius: 14px;
}
.qw-m2-bar label{
  font-size: 13px;
  font-weight: 900;
  color: #0f172a;
  white-space: nowrap;
  margin: 0;
}
.qw-m2-bar input[type="text"]{
  /* FIX 2026-08-04 (audit UI/UX · P1): 16px — por debajo de ese tamaño Safari
     iOS hace zoom al enfocar. Este es el campo de metros cuadrados: el input
     más importante del embudo de compra. */
  font-size: 16px;
  font-weight: 900;
  color: #1bcf17;
  background: transparent;
  border: none;
  outline: none;
  width: 100px;
  padding: 0;
  font-family: inherit;
}

.qw-maps-consent{
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qw-card{
  background: #ffffff;
  border: none;
  border-radius: 22px;
  padding: 18px 20px;

  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
  position: relative;
  overflow: visible;
  margin-bottom: 12px;

  cursor: pointer;
  transition: box-shadow .2s var(--qw-ease-out),
              transform .15s var(--qw-ease-out);
}

/* Remove old watermark pseudo-elements */
.qw-card::before{ content: none !important; }
.qw-card::after{ content: none !important; }

.qw-card h4{
  margin: 0 0 12px;
  font-size: .98rem;
  color: var(--qw-color-text-main);
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qw-card h4::after{
  content:"";
  flex: 1;
  height: 1px;
  background: var(--qw-color-border-soft);
}

@media (hover:hover){
  .qw-card:hover{
    box-shadow:
      0 12px 28px -10px rgba(15,23,42,.26),
      0 4px 10px -4px rgba(15,23,42,.16);
    transform: translateY(-1px);
  }
}

/* ==========================================================
   6. FORMULARIOS (inputs verdes, sin beige)
   ========================================================== */
.qw-form-row{ margin-bottom: 12px; }

.qw-form-row label{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: .95rem;
  color: var(--qw-color-text-main);
  margin-bottom: 6px;
}

.qw-form-row select,
.qw-form-row input[type="text"],
.qw-form-row input[type="date"],
.qw-form-row input[type="tel"],
.qw-form-row textarea{
  width: 100%;
  padding: 11px 12px;

  border: none;
  border-radius: var(--qw-radius-md);

  font-size: .96rem;
  color: rgba(75,85,99,.98);
  background: #ffffff;

  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);

  transition: box-shadow var(--qw-dur-2) var(--qw-ease-out);
}

@media (hover:hover){
  .qw-form-row select:hover,
  .qw-form-row input[type="text"]:hover,
  .qw-form-row input[type="date"]:hover,
  .qw-form-row input[type="tel"]:hover,
  .qw-form-row textarea:hover{
    box-shadow:
      0 10px 24px -8px rgba(15,23,42,.28),
      0 4px 10px -4px rgba(15,23,42,.18);
  }
}

.qw-form-row select:focus,
.qw-form-row input[type="text"]:focus,
.qw-form-row input[type="date"]:focus,
.qw-form-row input[type="tel"]:focus,
.qw-form-row textarea:focus{
  box-shadow:
    0 0 0 2.5px rgba(27,207,23,.72),
    0 10px 24px -8px rgba(27,207,23,.28),
    0 4px 10px -4px rgba(15,23,42,.18);
  outline: none;
}

.qw-form-row input::placeholder,
.qw-form-row textarea::placeholder{ color: rgba(107,114,128,.72); }

.qw-form-row input:disabled,
.qw-form-row select:disabled,
.qw-form-row textarea:disabled{
  background: #ffffff;
  color: rgba(107,114,128,.85);
}

#qw-m2-display[readonly]{
  background: #ffffff;
  color: var(--qw-color-text-main);
  font-weight: 700;
}

/* Select flecha */
.qw-form-row select{
  appearance: none;
  padding-right: 2.6rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='%231bcf17' d='M1.2 1.5a1 1 0 0 1 1.4 0L7 5l4.4-3.5a1 1 0 1 1 1.2 1.6l-5 4a1 1 0 0 1-1.2 0l-5-4a1 1 0 0 1 0-1.6Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: 14px 9px;
}

/* Errores */
.qw-form-row.qw-error select,
.qw-form-row.qw-error input[type="text"],
.qw-form-row.qw-error input[type="date"],
.qw-form-row.qw-error input[type="tel"],
.qw-form-row.qw-error textarea,
.qw-field-error{
  border-color: rgba(220,38,38,.55) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.08);
  background: rgba(254,242,242,.80);
}
.qw-error-msg,.qw-error-text{
  margin-top: 5px;
  font-size: .82rem;
  font-weight: 700;
  color: rgba(185,28,28,.88);
  padding-left: 2px;
}

/* ==========================================================
   7. RADIOS COMO PILLS (seleccionado con verde)
   ========================================================== */
.qw-radio-group{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

.qw-radio-group label{
  display:inline-flex;
  align-items:center;
  gap: 8px;

  padding: 7px 12px;
  border-radius: 999px;
  min-height: 44px; /* 2026-06-11: target táctil */

  background: #ffffff;
  border: 1px solid transparent; /* 2026-06-11 cero-gris; selected pinta border-color verde */
  box-shadow: 0 1px 3px rgba(15,23,42,.08);

  color: rgba(75,85,99,.95);
  font-size: .95rem;

  transition: transform var(--qw-dur-2) var(--qw-ease-out),
              box-shadow var(--qw-dur-2) var(--qw-ease-out),
              border-color var(--qw-dur-2) var(--qw-ease-out),
              background var(--qw-dur-2) var(--qw-ease-out);
}

@media (hover:hover){
  .qw-radio-group label:hover{
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15,23,42,.06);
  }
}

.qw-radio-group input[type="radio"]{ transform: scale(1.05); margin-right: 4px; }

.qw-radio-group label:has(input[type="radio"]:checked),
.qw-radio-group label.is-selected{
  border-color: rgba(27,207,23,.65);
  box-shadow: 0 12px 28px rgba(27,207,23,.14);
  background: #ffffff;
  font-weight: 800;
  animation: qw-slot-pop .28s var(--qwood-ease-spring, cubic-bezier(.34,1.56,.64,1));
}

#label-install-yes.qw-disabled{ opacity:.45; cursor:not-allowed; }

/* Info btn */
.qw-info-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 24px;
  height: 24px;
  border-radius: 10px;

  background: rgba(225,247,223,.85);
  border: 1px solid rgba(27,207,23,.38);
  color: rgba(27, 207, 23,.98);

  cursor:pointer;
  font-weight: 900;

  transition: transform var(--qw-dur-2) var(--qw-ease-out),
              background var(--qw-dur-2) var(--qw-ease-out),
              border-color var(--qw-dur-2) var(--qw-ease-out);
}
.qw-info-btn:hover{
  background: rgba(225,247,223,.98);
  border-color: rgba(27,207,23,.55);
  transform: translateY(-1px);
}
.qw-info-box{
  display:none;
  background: #ffffff;
  border: none;
  color: rgba(17,24,39,.78);
  border-radius: 16px;
  padding: 12px 14px;
  font-size: .9rem;
  line-height: 1.55;
  margin: 8px 0 12px;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
}
.qw-info-box.is-open{
  display:block;
  animation: qw-infobox-in .3s var(--qw-ease-out) both;
}
@keyframes qw-infobox-in{
  from{ opacity:0; transform:translateY(-4px); }
  to{ opacity:1; transform:translateY(0); }
}

/* ==========================================================
   8. SUMATORIO — Opción B (doble columna €/m² + subtotal)
   ========================================================== */
.qw-summary{
  background: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 22px;
  position: sticky;
  top: 20px;
  align-self: start;
  box-shadow:
    0 10px 28px -10px rgba(15,23,42,.20),
    0 4px 10px -4px rgba(15,23,42,.12);
}

.qw-summary h5{
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qw-summary h5::before{
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1bcf17;
  box-shadow: 0 0 8px rgba(27,207,23,.45);
}

.qw-tax-note{
  font-size: 11px;
  font-weight: 900;
  color: rgba(15,23,42,.4);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 16px;
}

/* Summary rows — Option B: €/m² left, subtotal right */
.qw-summary-row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.qw-summary-row:last-of-type{ border-bottom: none; }

.qw-summary-row__label{
  font-size: 14px;
  font-weight: 900;
  color: rgba(15,23,42,.65);
  display: flex;
  align-items: center;
  gap: 5px;
}
.qw-summary-row__m2{
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.3);
  margin-top: 2px;
  margin-left: 19px;
}
.qw-summary-row__value{
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* Fix 2026-05-19 (audit): impedir que el € caiga a la línea siguiente cuando
     el sumatorio side panel es estrecho (~70px). Antes "8.020,67 €" se partía
     en "8.020,67\n€" porque el span del precio era apenas el ancho del valor. */
  white-space: nowrap;
}
.qw-summary-row__value--green{ color: var(--qwood-color-primary-aa, #1bcf17); }
.qw-summary-row__value--muted{ color: rgba(15,23,42,.62); font-weight: 700; }
/* Subtext "× X m²" por fila — OCULTO desde audit 2026-05-07.
   Ahora se muestra una sola vez en .qw-summary-m2 (head). */
.qw-summary-row__sub{
  display: none !important;
}

/* Head del sumatorio — título + indicador m² total a la derecha */
.qw-summary-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.qw-summary-head h5{
  margin: 0;
}
.qw-summary-m2{
  font-size: 16px;
  font-weight: 900;
  color: var(--qwood-color-primary-aa, #1bcf17);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  white-space: nowrap;
}

/* Bloque qw-summary-product redundante — el nombre vive en la row "Parquet base" */
.qw-summary-product{ display: none !important; }

.qw-summary-row .s-check{
  color: #1bcf17;
  font-weight: 900;
  font-size: 13px;
}
.qw-summary-row .s-pending{
  color: rgba(15,23,42,.2);
  font-size: 13px;
}

/* Total box — white card with soft shadow (no border) */
.qw-summary-row.qw-total{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
  padding: 14px;
  background: #ffffff;
  border: none;
  border-radius: 14px;
  box-shadow:
    0 8px 22px -10px rgba(15,23,42,.18),
    0 3px 8px -3px rgba(15,23,42,.10);
}
.qw-total__label{
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #0f172a;
}
.qw-total__value{
  font-size: 20px;
  font-weight: 900;
  color: var(--qwood-color-primary-aa, #1bcf17);
  letter-spacing: -.03em;
  white-space: nowrap;
}
.qw-total__breakdown{
  text-align: right;
  font-size: 12px;
  font-weight: 900;
  color: rgba(15,23,42,.45);
  margin-top: 3px;
}

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

/* ==========================================================
   9. BOTONES — Premium Natural Bold (pill, 900, no shimmer)
   ========================================================== */
.qw-btn{
  border: none;
  cursor: pointer;
  border-radius: 999px;
  font-weight: 900 !important;
  font-size: 14px;
  font-family: var(--qw-font-sans) !important;
  letter-spacing: -.01em;
  min-height: 44px;
  min-width: 130px;
  padding: 14px 32px;

  transition: transform .15s var(--qw-ease-out),
              box-shadow .15s var(--qw-ease-out),
              background var(--qw-dur-2) var(--qw-ease-out);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

.qw-btn-mini{
  min-height: 44px; /* WCAG 2.5.8 tap target floor (2026-06-11) */
  min-width: auto;
  padding: 9px 16px;
  font-size: .84rem;
}

/* No shimmer effect */
.qw-btn::after{ content: none; }

.qw-btn-secondary{
  background: #ffffff;
  color: #0f172a;
  border: none;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
  transition: box-shadow .18s ease, transform .18s ease;
}
.qw-btn-secondary:hover{
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px -8px rgba(15,23,42,.28),
    0 4px 10px -4px rgba(15,23,42,.18);
}

.qw-btn-primary{
  background: var(--qwood-color-primary-aa, #1bcf17);
  color: #ffffff;
  border: none;
  box-shadow: 0 6px 20px rgba(27,207,23,.35);
  font-size: 15px;
  padding: 15px 36px;
}
.qw-btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(27,207,23,.4);
}

.qw-btn-primary:active,
.qw-btn-secondary:active{
  transform: translateY(0) scale(.995);
  box-shadow: 0 4px 12px rgba(15,23,42,.12);
}

.qw-btn[disabled],
.qw-btn.qw-btn-disabled{
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}
.qw-btn[disabled]::after{ display: none; }

/* ==========================================================
   10. TOASTS (sin beige)
   ========================================================== */
.qw-alert-stack{
  position: fixed;
  z-index: 100000;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 10px;
  max-width: min(420px, 100% - 32px);
  pointer-events:none;
}
.qw-alert{
  background: #ffffff;
  border: 1px solid transparent; /* 2026-06-11 cero-gris */
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15,23,42,.24);
  padding: 0;
  opacity: 0;
  transform: translateY(16px) scale(.97) translateZ(0);
  transition: opacity var(--qw-dur-3) var(--qw-ease-out),
              transform var(--qw-dur-3) var(--qwood-ease-spring, cubic-bezier(.34,1.56,.64,1));
  pointer-events:auto;
}
.qw-alert.is-visible{ opacity:1; transform: translateY(0) scale(1) translateZ(0); }

.qw-alert__content{ display:flex; align-items:flex-start; gap:10px; padding: 8px 10px 7px; }
.qw-alert__icon{
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 999px;
  margin-top: 3px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.8);
}
.qw-alert__text{ flex:1 1 auto; font-size:.86rem; line-height:1.45; color: var(--qw-color-text-main); }
.qw-alert__close{
  border: none;
  background: transparent;
  color: rgba(75,85,99,.85);
  font-size: 1.05rem;
  line-height: 1;
  padding: 0;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 999px;
  flex: 0 0 auto;
}
.qw-alert__close:hover{ background: rgba(243,244,246,.92); color: var(--qw-color-text-main); }

.qw-alert--info .qw-alert__icon{ background: var(--qw-color-primary); }
.qw-alert--success .qw-alert__icon{ background: var(--qw-color-primary-dark); }
.qw-alert--warning .qw-alert__icon{ background: #e0a03a; }
.qw-alert--error .qw-alert__icon{ background: #d65353; }

/* ==========================================================
   11. PLACE PICKER (z-index)
   ========================================================== */
[gmpx-popup-root]{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 2147483000 !important;
  pointer-events:none !important;
  overflow: visible !important;
  isolation: isolate !important;
}
[gmpx-popup-root] *{
  pointer-events:auto !important;
  z-index: 2147483001 !important;
}
.pac-container,
.gm-style .pac-container{
  z-index: 2147483001 !important;
  position: fixed !important;
}

/* ==========================================================
   12. BOTÓN ABRIR WIZARD (si lo usas)
   ========================================================== */
.qw-open-wizard-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 8px 16px 0;
  padding: 13px 20px;
  min-height: 48px;
  border-radius: var(--qwood-radius-pill, 999px);
  border: 1px solid rgba(27,207,23,.32);
  background: var(--qw-color-primary);
  color: #ffffff;
  cursor: not-allowed;
  opacity: 1;
  font-weight: 900;
  letter-spacing: .02em;
  box-shadow: 0 14px 28px rgba(27,207,23,.18);
  transition: transform var(--qw-dur-2) var(--qw-ease-out),
              box-shadow var(--qw-dur-2) var(--qw-ease-out),
              background-color var(--qw-dur-2) var(--qw-ease-out),
              border-color var(--qw-dur-2) var(--qw-ease-out),
              color var(--qw-dur-2) var(--qw-ease-out);
}
.qw-open-wizard-btn[aria-disabled="false"],
.qw-open-wizard-btn[data-qw-enabled="1"]{
  cursor: pointer;
  opacity: 1;
  background: var(--qw-color-primary);
}
.qw-open-wizard-btn[aria-disabled="false"]:hover,
.qw-open-wizard-btn[data-qw-enabled="1"]:hover{
  background: var(--qw-color-primary-dark);
  border-color: rgba(27, 207, 23,.42);
  transform: translateY(-1px);
  box-shadow: 0 18px 32px rgba(27,207,23,.22);
}
.qw-open-wizard-btn[aria-disabled="true"],
.qw-open-wizard-btn[disabled],
.qw-open-wizard-btn[data-qw-enabled="0"]{
  background: #eef6ee;
  color: rgba(11,42,18,.72);
  border-color: rgba(27,207,23,.18);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}

/* ==========================================================
   13. PREFERS REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ==========================================================
   14. FIX MÓVIL: evita saltos por transforms en focus
   ========================================================== */
@media (max-width: 980px){
  .qw-form-row select:focus,
  .qw-form-row input[type="text"]:focus,
  .qw-form-row input[type="date"]:focus,
  .qw-form-row input[type="tel"]:focus,
  .qw-form-row textarea:focus{
    transform: none !important;
  }
}





/* ==========================================================
   PATCH — Paso 3 Disponibilidad (Días + aviso + chips)
   (Pegar al FINAL del CSS del wizard)
   ========================================================== */

/* Aviso superior "Importante" */
#qw-modal .qw-info-note{
  background: #ffffff;
  border: none;
  padding: 10px 12px;
  border-radius: 16px;
  color: rgba(17,24,39,.76);
  font-size: .92rem;
  margin: 0 0 12px;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
}
#qw-modal .qw-info-note strong{
  color: rgba(17,24,39,.92);
  font-weight: 900;
}

/* Chips: contenedor */
#qw-modal .qw-slot-group{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
}

/* Chips: base (usado en HORARIO y DÍAS) */
#qw-modal .qw-slot{
  appearance: none;
  border: 1px solid transparent; /* 2026-06-11 cero-gris: contraste por sombra; selected pinta border-color */
  background: #ffffff;
  color: rgba(75,85,99,.95);

  padding: 9px 12px;
  border-radius: 999px;
  min-height: 44px; /* 2026-06-11: target táctil */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-weight: 800;
  font-size: .92rem;
  line-height: 1;

  cursor: pointer;
  user-select: none;

  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  transition: transform var(--qw-dur-2) var(--qw-ease-out),
              box-shadow var(--qw-dur-2) var(--qw-ease-out),
              border-color var(--qw-dur-2) var(--qw-ease-out),
              background var(--qw-dur-2) var(--qw-ease-out),
              color var(--qw-dur-2) var(--qw-ease-out);
}

@media (hover:hover){
  #qw-modal .qw-slot:hover{
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 12px 26px rgba(15,23,42,.10);
  }
}

/* Estado seleccionado */
#qw-modal .qw-slot.is-selected,
#qw-modal .qw-slot[aria-checked="true"]{
  background: var(--qw-color-primary);
  border-color: rgba(27,207,23,.52);
  color: #ffffff;
  box-shadow: 0 12px 26px rgba(27,207,23,.18);
  animation: qw-slot-pop .28s var(--qwood-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
@keyframes qw-slot-pop{
  0%{ transform: scale(.95); }
  100%{ transform: scale(1); }
}

/* Estado “pressed” */
#qw-modal .qw-slot:active{
  transform: translateY(0) scale(.995);
  box-shadow: 0 8px 18px rgba(15,23,42,.10);
}

/* Ajuste: en móvil, que no se desborden */
@media (max-width: 520px){
  #qw-modal .qw-slot{
    padding: 9px 10px;
    font-size: .9rem;
  }
}

/* Input “Días a evitar” (ligero toque premium) */
#qw-modal #qw-evitar-dias{
  background: #ffffff;
}

/* (Opcional) separar mejor el bloque de disponibilidad */
#qw-modal #qw-disponibilidad{
  padding-top: 2px;
}

/* ==========================================================
   CTA AUTHORITY — Bold Clean 60/30/10 (black border buttons)
   ========================================================== */
#qw-modal .qw-btn{
  font-weight: 900 !important;
  font-family: var(--qw-font-sans) !important;
  border-radius: 999px !important;
  letter-spacing: -.01em !important;
  font-size: 15px !important;
}
#qw-modal .qw-btn-primary{
  background: #1bcf17 !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(27,207,23,.35) !important;
  font-size: 15px !important;
  padding: 15px 36px !important;
}
#qw-modal .qw-btn-secondary{
  background: #ffffff !important;
  color: #0f172a !important;
  border: none !important;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14) !important;
}

#qw-overlay .qw-footer .qw-btn,
#qw-modal .qw-footer .qw-btn{
  pointer-events: auto;
}

/* ==========================================================
   RESPONSIVE — Premium Natural Bold breakpoints
   ========================================================== */

/* 700px: primary mobile breakpoint (header/stepper/footer handled above) */
@media (max-width: 700px){
  /* Cards: compact */
  .qw-card{
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 16px;
  }
  .qw-adh-card,
  .qw-prot-card{
    padding: 14px;
    gap: 10px;
  }
  .qw-adh-card__icon,
  .qw-prot-card__icon{
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .qw-adh-card__name,
  .qw-prot-card__info strong{
    font-size: 14px;
  }
  .qw-adh-card__desc,
  .qw-prot-card__desc{
    font-size: 11px;
  }
  .qw-adh-card__price,
  .qw-prot-card__price{
    font-size: 15px;
  }
  .qw-adh-card__check,
  .qw-prot-card__check{
    width: 24px;
    height: 24px;
  }
  .qw-adh-card__badge,
  .qw-adh-card__label{
    font-size: 9px;
    padding: 4px 10px;
    right: 12px;
  }

  /* Buttons: compact on mobile */
  .qw-btn{
    padding: 10px 18px;
    font-size: .82rem;
    min-height: 44px; /* 2026-06-11: no eliminar el suelo táctil */
  }
  .qw-btn-primary{
    padding: 12px 28px;
    font-size: 14px;
  }
  .qw-footer{
    gap: 8px;
  }

  /* Summary: compact + full-width centrado en sidebar.
     2026-05-10: en desktop el sumatorio usa align-self:start para anclarse al
     top del 2-column grid sin estirar verticalmente. En mobile el grid colapsa
     a 1 col y align-self:start se traduce a NO estirar horizontalmente,
     dejando el bloque pegado a la izquierda con ~40px de hueco a la derecha
     ("no centrado"). Override: align-self:stretch + width:100% para que el
     sumatorio ocupe todo el ancho disponible del sidebar. */
  .qw-summary{
    padding: 18px 16px;
    border-radius: 16px;
    position: static;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
  }
  .qw-summary-row span:first-child{ font-size: 12px; }
  .qw-summary-row span:last-child{ font-size: 13px; text-align: right; }
  .qw-summary-row span:last-child small{ font-size: 10px; }
  .qw-summary-row.qw-total{ padding: 12px 14px; }
  .qw-total{ font-size: 19px; }
}

/* 520px: chip ajustes (modal/overlay overrides eliminados 2026-05-01 —
   el ≤700px ya define full-screen edge-to-edge consistente). */
@media (max-width: 520px){
  #qw-modal .qw-slot{
    padding: 8px 9px;
    font-size: .86rem;
  }
}

/* 460px: hide floating step chip — solapa con el título en iPhone 12-15
   (390-430). Los dots de progreso debajo del header ya muestran el paso. */
@media (max-width: 460px){
  .qw-floating-step{
    display: none !important;
  }
  /* Sin chip, los botones flotantes ya no chocan con el heading: subimos
     el padding-right del header para que el título tampoco caiga bajo
     el área del help button (right=64 + 38 = posición x=288 en 390). */
  #qw-overlay .qw-header,
  #qw-modal .qw-header{
    padding-right: 116px !important; /* 64 (help right) + 38 (help w) + 14 gap */
  }
  /* Safety net: si el título es más largo del esperado, truncar en lugar
     de saltar bajo los botones flotantes. */
  .qw-header__title{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
}

/* 420px: minimal padding (modal/overlay overrides eliminados 2026-05-01) */
@media (max-width: 420px){
  .qw-header{
    padding: 14px 14px 0;
  }
  .qw-header__title{
    font-size: 17px;
  }
  .qw-progress-wrap{
    padding: 0 14px 14px;
  }
  .qw-footer{
    padding: 8px 12px 10px;
  }
  .qw-btn{
    padding: 9px 14px;
    font-size: .8rem;
  }
  .qw-btn-primary{
    padding: 11px 22px;
    font-size: 13px;
  }
  #qw-modal .qw-btn-primary{
    padding: 11px 22px !important;
    font-size: 13px !important;
    min-height: 44px !important; /* 2026-06-11: target táctil */
  }
  #qw-modal .qw-slot{
    padding: 7px 8px;
    font-size: .82rem;
    border-radius: 12px;
  }

}

/* 390px: price/total squeeze */
@media (max-width: 390px){
  .qw-adh-card__price,
  .qw-prot-card__price{
    font-size: 14px;
  }
  .qw-total{
    font-size: 17px;
  }
  .qw-phase-title{
    font-size: 18px;
  }
}

/* 380px: ajustes finos para pantallas muy pequeñas (modal/overlay
   full-screen ya cubierto por el ≤700px). */
@media (max-width: 380px){
  .qw-header{
    padding: 10px 12px 0;
  }
  .qw-header__title{
    font-size: 15px;
  }
  .qw-header__m2{
    display: none !important;
  }
  .qw-step-indicator,
  .qw-header__subtitle{
    font-size: 11px;
    margin-bottom: 1px;
  }
  .qw-progress-wrap{
    padding: 0 12px 8px;
  }
  .qw-progress-dot,
  .qw-progress--bold .qw-progress-dot{
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    max-width: 26px;
    min-height: 26px;
    max-height: 26px;
    font-size: 12px;
    border-radius: 50%;
    padding: 0 !important;
  }
  .qw-progress-dot.is-active,
  .qw-progress--bold .qw-progress-dot.is-active{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    max-width: 30px;
    min-height: 30px;
    max-height: 30px;
  }
  .qw-footer{
    padding: 8px 12px 10px;
  }
  .qw-footer .qw-btn{
    padding: 12px 14px;
    font-size: 13px;
  }
  .qw-phase-title{
    font-size: 17px;
  }
  .qw-helper{
    font-size: 12px;
  }
  .qw-body{
    padding: 14px 12px 18px;
  }
  .qw-body > *{
    min-width: 0;
    overflow: hidden;
  }
  .qw-close{
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}


/* ==========================================================
   WIZARD REDESIGN — ADHESIVE + PROTECTION CARDS
   Premium Natural Bold · 2026-04-03
   ========================================================== */

/* --- SR-only (hidden but accessible) --- */
.qw-sr-only{
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* --- Adhesive Cards --- */
.qw-adh-cards{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qw-adh-card{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: #ffffff;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  font-family: var(--qw-font-sans);
  text-align: left;
  position: relative;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
  transition: box-shadow .25s ease, transform .18s ease;
}
@media (hover:hover){
  .qw-adh-card:hover{
    transform: translateY(-1px);
    box-shadow:
      0 12px 28px -10px rgba(15,23,42,.26),
      0 4px 10px -4px rgba(15,23,42,.16);
  }
}
/* Pressed: verde Q ring via box-shadow (sin border, layout estable) */
.qw-adh-card[aria-pressed="true"]{
  box-shadow:
    0 0 0 2.5px #1bcf17,
    0 10px 28px -10px rgba(27,207,23,.40),
    0 4px 10px -4px rgba(27,207,23,.20);
}
.qw-adh-card[aria-pressed="true"]:hover{
  transform: none;
}
.qw-adh-card--muted{
  opacity: .6;
}
.qw-adh-card--muted[aria-pressed="true"]{
  opacity: 1;
}

/* Badge: tab hanging from top border */
.qw-adh-card__badge{
  position: absolute;
  top: -1px;
  right: 20px;
  background: #1bcf17;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
/* Label: Premium (dark) */
.qw-adh-card__label{
  position: absolute;
  top: -1px;
  right: 20px;
  background: #0f172a;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 5px 14px;
  border-radius: 0 0 10px 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
}
/* Label: muted variant (solo lamas, etc.) */
.qw-adh-card__badge--muted{
  background: rgba(15,23,42,.15);
  color: var(--qw-color-text-soft);
}

/* Badge "Económico" en cola de contacto — celeste brand */
.qw-adh-card__badge--cola{
  background: #0ea5e9;
  color: #fff;
}

/* Icon — bold SVG · white container with soft shadow (no border).
   2026-05-09: alineado al patrón visual unificado del wizard. Las variantes
   --premium/--cola/--none/--crepe heredan el blanco; la diferenciación de tipo
   queda en el SVG icon + el badge PREMIUM/ECONÓMICO/etc. */
.qw-adh-card__icon{
  width: 44px;
  height: 44px;
  border-radius: var(--qw-radius-pill);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--qw-color-primary);
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
}
.qw-adh-card__icon svg,
.qw-prot-card__icon svg{
  stroke-width: 3;
}
.qw-adh-card__icon--premium,
.qw-adh-card__icon--cola{
  background: #ffffff;
}
.qw-adh-card__icon--none{
  background: #ffffff;
  color: #94a3b8;
}
.qw-prot-card__icon--crepe{
  background: #ffffff;
}

/* Info */
.qw-adh-card__info{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qw-adh-card__name{
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
}
.qw-adh-card__desc{
  font-size: 12px;
  font-weight: 800;
  color: var(--qw-color-text-soft);
  line-height: 1.3;
}

/* Price */
.qw-adh-card__price{
  font-size: 19px;
  font-weight: 900;
  color: #0f172a;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Check indicator — unpressed: white + soft shadow (no border).
   Pressed: verde Q sólido (signal de selección preserved). */
.qw-adh-card__check{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.qw-adh-card[aria-pressed="true"] .qw-adh-card__check{
  background: #1bcf17;
  color: #fff;
  box-shadow:
    0 6px 16px -6px rgba(27,207,23,.40),
    0 2px 6px -2px rgba(27,207,23,.24);
}

/* --- Protection Cards (reuse adhesive pattern) --- */
.qw-prot-cards{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qw-prot-card{
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: #ffffff;
  border: none;
  border-radius: 22px;
  cursor: pointer;
  font-family: var(--qw-font-sans);
  text-align: left;
  position: relative;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
  transition: box-shadow .25s ease, transform .18s ease;
}
@media (hover:hover){
  .qw-prot-card:hover{
    transform: translateY(-1px);
    box-shadow:
      0 12px 28px -10px rgba(15,23,42,.26),
      0 4px 10px -4px rgba(15,23,42,.16);
  }
}
.qw-prot-card[aria-pressed="true"]{
  box-shadow:
    0 0 0 2.5px #1bcf17,
    0 10px 28px -10px rgba(27,207,23,.40),
    0 4px 10px -4px rgba(27,207,23,.20);
}
.qw-prot-card[aria-pressed="true"]:hover{
  transform: none;
}
.qw-prot-card--muted{
  opacity: .6;
}
.qw-prot-card--muted[aria-pressed="true"]{
  opacity: 1;
}
.qw-prot-card__icon{
  width: 44px;
  height: 44px;
  border-radius: var(--qw-radius-pill);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--qw-color-primary);
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
}
.qw-prot-card__icon--none{
  background: #ffffff;
  color: #94a3b8;
}
.qw-prot-card__info{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qw-prot-card__info strong{
  font-size: 15px;
  font-weight: 900;
  color: #0f172a;
}
.qw-prot-card__desc{
  font-size: 12px;
  font-weight: 600;
  color: var(--qw-color-text-soft);
  line-height: 1.3;
}
.qw-prot-card__price{
  font-size: 17px;
  font-weight: 900;
  color: #0f172a;
  white-space: nowrap;
  flex-shrink: 0;
}
.qw-prot-card__check{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.qw-prot-card[aria-pressed="true"] .qw-prot-card__check{
  background: #1bcf17;
  color: #fff;
  box-shadow:
    0 6px 16px -6px rgba(27,207,23,.40),
    0 2px 6px -2px rgba(27,207,23,.24);
}

/* ==========================================================
   RESPONSIVE CARD GRID — must come AFTER card base styles
   Switches flex→grid at narrow viewports.
   Row 1: icon + name/desc.  Row 2: price + check.
   ========================================================== */

@media (max-width: 420px){
  .qw-adh-card,
  .qw-prot-card{
    display: grid;
    grid-template-columns: 34px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    padding: 12px 14px;
    align-items: center;
  }
  .qw-adh-card__icon,
  .qw-prot-card__icon{
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 34px;
    height: 34px;
  }
  .qw-adh-card__info,
  .qw-prot-card__info{
    grid-column: 2 / -1;
    grid-row: 1;
    min-width: 0;
  }
  .qw-adh-card__name,
  .qw-prot-card__info strong{
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .qw-adh-card__desc,
  .qw-prot-card__desc{
    font-size: 11px;
    overflow-wrap: anywhere;
  }
  .qw-adh-card__price,
  .qw-prot-card__price{
    grid-column: 2;
    grid-row: 2;
    font-size: 15px;
    white-space: nowrap;
  }
  .qw-adh-card__check,
  .qw-prot-card__check{
    grid-column: 3;
    grid-row: 2;
    width: 22px;
    height: 22px;
    justify-self: end;
    align-self: center;
  }
  .qw-adh-card__badge,
  .qw-adh-card__label{
    font-size: 9px;
    padding: 4px 10px;
    right: 10px;
  }
}

@media (max-width: 380px){
  .qw-adh-card,
  .qw-prot-card{
    grid-template-columns: 28px 1fr auto;
    gap: 3px 8px;
    padding: 10px 12px;
  }
  .qw-adh-card__icon,
  .qw-prot-card__icon{
    width: 28px;
    height: 28px;
  }
  .qw-adh-card__name,
  .qw-prot-card__info strong{
    font-size: 13px;
  }
  .qw-adh-card__desc,
  .qw-prot-card__desc{
    font-size: 10px;
  }
  .qw-adh-card__price,
  .qw-prot-card__price{
    font-size: 14px;
  }
  .qw-adh-card__check,
  .qw-prot-card__check{
    width: 20px;
    height: 20px;
  }
  .qw-adh-card__badge,
  .qw-adh-card__label{
    font-size: 8px;
    padding: 3px 8px;
    right: 8px;
  }
}

/* ============================================================
   Header m² chip — white pill with soft shadow (no border).
   2026-05-09: alineado al patrón visual de .qw-header__help y
   .qw-close. Override !important porque wizard.php imprime
   estilos inline en este elemento (color/letter-spacing/etc).
   2026-05-10: SCOPED a desktop (≥701px) — en mobile ya hay regla
   `display:none !important` (línea ~758) que debe ganar. Sin este
   media query el chip "40 M²" reaparecía sobre iPhone (390-460px)
   creando un cuarto elemento en el header → cluttering visual.
   ============================================================ */
@media (min-width: 701px){
  .qw-header__m2{
    display: inline-flex !important;
    align-items: center !important;
    align-self: center !important;
    padding: 8px 14px !important;
    margin-right: 6px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: none !important;
    color: #0f172a !important;
    font-size: 12.5px !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    line-height: 1 !important;
    box-shadow:
      0 6px 16px -6px rgba(15,23,42,.22),
      0 2px 6px -2px rgba(15,23,42,.14) !important;
  }
}

/* ============================================================
   Contact CTAs — wizard header + step 4 sidebar (2026-04-19)
   ============================================================
   Editorial-tight. Header help stays as a compact pill in the
   top bar (persistent across 4 steps). Step 4 help uses the
   left-accent stripe pattern shared with other QWOOD nudges.
   WA text forced white at anchor-level to beat theme overrides.
   ============================================================ */
.qw-header__help,
a.qw-header__help {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: center;
  padding: 8px 14px;
  margin-right: 6px;
  border-radius: 999px;
  background: #ffffff;
  color: #1bcf17 !important;
  font-weight: 800;
  font-size: 12.5px;
  text-decoration: none;
  line-height: 1;
  border: none;
  box-shadow:
    0 6px 16px -6px rgba(15,23,42,.22),
    0 2px 6px -2px rgba(15,23,42,.14);
  transition: box-shadow .18s ease, transform .18s ease, color .15s ease;
}
.qw-header__help:hover,
.qw-header__help:focus-visible,
a.qw-header__help:hover,
a.qw-header__help:focus-visible {
  background: #ffffff;
  color: #1bcf17 !important;
  outline: none;
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px -8px rgba(15,23,42,.28),
    0 4px 10px -4px rgba(15,23,42,.18);
}
.qw-header__help svg { flex: 0 0 auto; }

@media (max-width: 520px) {
  .qw-header__help-label { display: none; }
  .qw-header__help { padding: 7px; }
}

.qw-summary-help {
  margin-top: 0.8rem;
  padding: 0.7rem 0.85rem 0.75rem 0.9rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 10px;
  background: #ffffff;
}
.qw-summary-help__msg {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.35;
}
.qw-summary-help__wa,
a.qw-summary-help__wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 9px 14px;
  background: #1bcf17;
  color: #ffffff !important;
  font-weight: 800;
  font-size: 0.83rem;
  border-radius: 999px;
  text-decoration: none;
  border: 1.5px solid #1bcf17;
  line-height: 1;
  box-shadow: none;
}
.qw-summary-help__wa:hover,
.qw-summary-help__wa:focus-visible,
a.qw-summary-help__wa:hover,
a.qw-summary-help__wa:focus-visible {
  background: #1bcf17;
  border-color: #1bcf17;
  color: #ffffff !important;
  outline: none;
}
.qw-summary-help__wa svg,
a.qw-summary-help__wa svg {
  flex: 0 0 auto;
  fill: #ffffff;
  color: #ffffff;
}

/* ============================================================
   FIX 2026-04-29 — A11y WCAG 2.2 wizard adhesivos
   ============================================================ */

/* P0: focus visible coherente verde brand en TODO el wizard */
#qw-overlay button:focus-visible,
#qw-overlay [role="button"]:focus-visible,
#qw-overlay [role="radio"]:focus-visible,
#qw-overlay input:focus-visible,
#qw-overlay select:focus-visible,
#qw-overlay textarea:focus-visible,
#qw-overlay a:focus-visible,
.qw-progress-dot:focus-visible,
.qw-adh-card:focus-visible,
.qw-slot:focus-visible {
  outline: 3px solid #1bcf17;
  outline-offset: 2px;
  border-radius: 8px;
}

/* P1: anti-zoom iOS en inputs (≥16px) — sin alterar UI desktop */
#qw-overlay input[type="number"],
#qw-overlay input[type="tel"],
#qw-overlay input[type="text"],
#qw-overlay input[type="email"],
#qw-overlay input[type="date"],
#qw-overlay textarea,
#qw-overlay select {
  font-size: 16px;
}

/* P1: contraste muted text — sube de rgba(15,23,42,.28) a .54 (≥4.5:1 AA) */
#qw-overlay .qw-muted,
#qw-overlay .qw-help,
#qw-overlay .qw-step-help,
#qw-overlay .qw-tag,
#qw-overlay small.qw-hint {
  color: rgba(15, 23, 42, 0.62);
}

/* P1: disabled inputs distinguibles más allá de opacidad */
#qw-overlay input:disabled,
#qw-overlay select:disabled,
#qw-overlay textarea:disabled,
#qw-overlay button:disabled {
  background: #f1f5f4 !important;
  color: rgba(15, 23, 42, 0.5);
  cursor: not-allowed;
  opacity: 0.85;
}

/* P0: estado error coherente con icono — no solo color */
#qw-overlay .qw-input--error,
#qw-overlay [aria-invalid="true"] {
  border-color: #dc2626 !important;
  background: rgba(220, 38, 38, 0.05);
}
#qw-overlay .qw-error-msg {
  color: #b91c1c;
  font-size: 14px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
#qw-overlay .qw-error-msg::before {
  content: "⚠";
  font-size: 14px;
}

/* P0: prefers-reduced-motion — respetar preferencia OS */
@media (prefers-reduced-motion: reduce) {
  #qw-overlay,
  #qw-overlay *,
  #qw-overlay *::before,
  #qw-overlay *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* P1: live region helper SR-only */
.qw-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* P0: aria-current=step — cue visual no-color ahora es el TAMAÑO (32px vs 28px,
   ver .is-active) + label bold. El anillo ::before anterior chocaba con el
   hit-area táctil de -8px (mismo pseudo-elemento) y agrandaba el stepper. */

/* P0 fix: <ol> introduce numeración automática "1." en items — quitar
   list-style ya que los dots tienen su propio numeric span aria-hidden */
.qw-progress-steps,
ol.qw-progress-steps,
ol.qw-progress-steps > li {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
ol.qw-progress-steps > li::marker,
ol.qw-progress-steps > li::before {
  content: none !important;
  display: none !important;
}

/* P2: high zoom (200%) — modal no overflow */
@media (max-width: 480px) {
  #qw-modal {
    max-width: 100vw !important;
    width: 100% !important;
  }
}

/* ============================================================
   FIX 2026-04-29 — Responsive polish wizard
   ============================================================ */

/* TABLET (≤768): forzar layout 1-col porque sidebar Sumatorio queda apretado */
@media (max-width: 900px) {
  #qw-overlay .qw-body {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  #qw-overlay .qw-summary,
  #qw-overlay aside.qw-summary {
    position: static !important;
    margin-top: 8px;
  }
  /* Cards adhesivo más anchas: nombre y descripción no rompen líneas raras */
  #qw-overlay .qw-adh-card__name,
  #qw-overlay .qw-prot-card__name {
    font-size: 15px;
    line-height: 1.25;
  }
}

/* MOBILE (≤480): polish UX */
@media (max-width: 480px) {
  /* 2026-05-01: bloque "Modal full-width sin gap lateral" eliminado.
     Antes hacía bottom-sheet (margin-top:auto, max-height:95vh) y
     position:sticky en .qw-footer — ambos chocaban con el full-screen +
     position:fixed que ahora aplica el media query 700px de arriba.
     El layout en mobile ahora es full-viewport con footer fixed-bottom. */

  /* Disabled "Siguiente" más visible — no solo opacity */
  #qw-overlay .qw-btn:disabled,
  #qw-overlay .qw-btn-disabled,
  #qw-overlay button:disabled {
    background: #ffffff !important;
    color: #94a3b8 !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.10) !important;
    opacity: 1 !important;
  }

  /* Cards adhesivo: 2 líneas max para descripción */
  #qw-overlay .qw-adh-card__desc,
  #qw-overlay .qw-prot-card__desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px;
  }

  /* Header compacto: ocultar 40 m² si falta espacio, mantener accesible */
  #qw-overlay .qw-m2-chip {
    font-size: 12px;
    padding: 4px 8px;
  }

  /* Sumatorio sticky-bottom mini-resumen mobile (siempre visible totales) */
  #qw-overlay .qw-summary {
    border-radius: 12px;
    padding: 12px;
  }
  #qw-overlay .qw-summary__total {
    font-size: 18px;
  }

  /* Step labels ocultos en XS, solo número visible */
  #qw-overlay .qw-progress-dot[data-label]::after {
    display: none;
  }
}

/* MOBILE XS (≤360): aún más compacto */
@media (max-width: 360px) {
  #qw-overlay h2.qw-phase-title {
    font-size: 16px !important;
  }
  #qw-overlay .qw-helper {
    font-size: 13px !important;
  }
  #qw-overlay .qw-adh-card,
  #qw-overlay .qw-prot-card {
    padding: 10px 12px !important;
  }
}


/* 2026-06-11 — targets táctiles y teclado móvil
   Dots de progreso: hit-area extendida sin cambiar el tamaño visual.
   (::after lo usan las labels de desktop; ::before está libre.) */
#qw-modal .qw-progress-dot { position: relative; }
#qw-modal .qw-progress-dot::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; } /* 2026-06-12: -9px → 28px dot = 46px, 26px dot (≤380) = 44px */
/* Evita que el teclado iOS tape inputs cercanos al footer fixed */
#qw-modal input, #qw-modal select, #qw-modal textarea { scroll-margin-bottom: 120px; }

/* 2026-06-12 — estado de envío del wizard (go() ya no cierra antes del submit) */
#qw-overlay.qw-overlay--busy #qw-modal { opacity: .7; pointer-events: none; }