/* Albert Sans autoalojada (fuente variable, subconjunto latino, 31 KB): sin dependencia de Google Fonts
   ni de sus dos dominios; font-display swap evita texto invisible (auditoría 09-09) */
@font-face {
    font-family: 'Albert Sans';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url('../fonts/albert-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ══════════════════════════════════════════════════════════════════════════
   Tienda Multipartes — réplica fiel del look WoodMart Electronics 3
   Medidas tomadas de la demo real (viewport 1920):
   contenedor 1540px · fuente Albert Sans · títulos H2 36px/700 #242424
   texto #333 · secundario #767676 · grises #f5f5f5 · bordes rgba(0,0,0,.1)
   acento original #4933d1 (morado) → convertido a AZUL #2563eb
   ══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --title:      #242424;
    --ink:        #333333;
    --muted:      #767676;
    --line:       rgba(0, 0, 0, .1);
    --line-soft:  #ececec;
    --panel:      #f4f4f4;   /* gris exacto de la demo (marcas, bandas, footer) */
    --accent:     #2563eb;   /* azul (rol del morado #4933d1 del template) */
    --accent-2:   #1d4ed8;
    --price:      #2563eb;
    --ok:         #15803d;   /* 4.8:1 sobre blanco (antes #1fa653 = 3.2:1) */
    --muted-panel: #6b6b6b;  /* gris para texto sobre --panel (#767676 solo llega a 4.1:1 ahí) */
    --wa:         #25d366;
    --dark:       #242424;   /* negro de píldoras/botón categorías de la demo */
    --r-lg:       20px;      /* radio de tarjeta medido en la demo */
    --r-md:       20px;
    --pill:       35px;
    --shadow:     0 2px 10px rgba(33, 33, 33, .06);
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Albert Sans', Arial, Helvetica, sans-serif;
    background: #fff;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Contenedor: 1540px máx con 15px de padding, como la demo */
.wm-container { max-width: 1540px; margin: 0 auto; padding: 0 15px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.wm-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;   /* Raul probó gris y prefirió blanco (07-09) */
    box-shadow: 0 1px 0 var(--line-soft);
}
/* Raul 10-09: cabecera "cristal" estilo Apple: blanco casi opaco con desenfoque del contenido que pasa por detrás
   (escritorio, tablet y móvil). Navegadores sin backdrop-filter se quedan con el blanco sólido de arriba. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .wm-header { background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
}

.wm-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 24px;
    padding-bottom: 24px;
    position: relative;
    flex-wrap: wrap;
}

.wm-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.wm-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wm-brand-name { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: var(--title); }
.wm-dot { color: var(--accent); }

/* Botón Categorías: píldora oscura 50px como la demo */
.wm-cats-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--dark);
    color: #fff;
    border: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    height: 48px;
    padding: 0 22px;
    border-radius: 40px;
    cursor: pointer;
    transition: background .15s;
}
.wm-cats-btn:hover { background: #383838; color: #fff; }
.wm-cats-btn { text-decoration: none; white-space: nowrap; }   /* es un enlace a index.php?todo=1 (Raul 10-09: sin menú desplegable) */


/* Buscador: píldora 46px, borde suave, icono dentro a la derecha */
.wm-search {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--pill);
    height: 46px;
    padding-right: 3px;
    transition: border-color .15s;
}
/* Al escribir, el resalte sigue la forma de píldora del buscador: borde azul + halo suave (sin el rectángulo del outline) */
.wm-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.wm-search-input:focus, .wm-search-input:focus-visible { outline: none; }

.wm-search-input {
    flex: 1;
    border: none;
    outline: none;
    font: inherit;
    font-size: 16px; /* móvil: evita zoom iOS; desktop baja a 14 */
    padding: 0 5px 0 20px;
    color: var(--ink);
    background: transparent;
    min-width: 0;
}
.wm-search-input::placeholder { color: var(--muted); }

@media (min-width: 768px) {
    .wm-search-input { font-size: 14px; }
}

/* Botón lupa: círculo sólido de acento dentro del buscador, como la demo */
.wm-search-btn {
    background: var(--accent);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.wm-search-btn:hover { background: var(--accent-2); }

/* Círculo sólido de acento (rol del carrito del header de la demo) */
.wm-circle-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s;
}
.wm-circle-btn:hover { background: var(--accent-2); }

/* ── Hero: categorías 360 | slider | novedades 360, alto ~500 ──────────── */
.wm-hero {
    display: grid;
    grid-template-columns: 360px 1fr 360px;
    gap: 20px;
    padding-top: 24px;
}

/* Sin ofertas reales, la tarjeta "Ofertas y Descuentos" no se pinta y el
   slider ocupa también su columna (aparece sola cuando hay ofertas) */
.wm-hero.sin-ofertas { grid-template-columns: 360px 1fr; }
@media (max-width: 1280px) { .wm-hero.sin-ofertas { grid-template-columns: 300px 1fr; } }
@media (max-width: 1024px) { .wm-hero.sin-ofertas { grid-template-columns: 1fr; } }

/* Primera pantalla completa (escritorio): topbar + header + hero + fila de
   marcas llenan exactamente el alto de la ventana, sin que asome la sección
   "Productos destacados". Offset = header 97 + margen 20 + bloque "Cómo
   comprar" ~162 + respiro inferior 20 = 299px (el padding-top del hero ya va
   dentro de su min-height por box-sizing: border-box). Las tres tarjetas del
   hero se encogen lo necesario (mínimo 520px). */
@media (min-width: 1025px) {
    /* Piso 460px para laptops de poca altura; el alto real lo manda la ventana */
    .wm-hero { min-height: 560px; min-height: max(360px, calc(100vh - 217px)); }   /* header 97 + fila de marcas 20+80 + respiro 20: "Cómo comprar" queda FUERA de la primera pantalla */
    /* (más específico que el .wm-hero-banner { min-height:560px } base, que va después en el archivo) */
    .wm-hero .wm-hero-banner { min-height: 100%; }
    /* La columna de sistemas NUNCA fuerza el alto del hero: si no cabe, se desplaza dentro */
    .wm-hero .wm-hero-cat { min-height: 46px; }
    .wm-hero .wm-hero-cats { padding-top: 16px; padding-bottom: 16px; overflow-y: auto; min-height: 0; }
    .wm-hero .wm-hero-hot { min-height: 0; overflow: auto; }
}
/* Laptops bajas (≤ 820px de alto): ítems de sistemas más compactos para que quepan los 10 */
@media (min-width: 1025px) and (max-height: 760px) {
    .wm-hero .wm-hero-cat { min-height: 38px; font-size: 14px; gap: 12px; }
    .wm-hero .wm-hero-cats { padding-top: 10px; padding-bottom: 10px; }
    .wm-hero-banner h1, .wm-hero-banner .wm-h1 { font-size: 24px; font-size: clamp(24px, 2vw, 32px); }
    .wm-hero-banner p { font-size: 17px; margin-bottom: 18px; }
    .wm-hero-banner { min-height: 100%; }
}

.wm-hero-cats {
    background: var(--panel);
    border-radius: var(--r-lg);
    padding: 24px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;     /* ítems repartidos a lo alto, como la demo */
    gap: 2px;
}

.wm-hero-cat {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 54px;
    padding: 0 18px;
    border-radius: 50px;               /* píldora al hover, como la demo */
    font-size: 15px;
    font-weight: 600;
    color: var(--title);
    transition: background .12s, color .12s;
}
.wm-hero-cat:hover { background: #fff; color: var(--accent); }

/* Icono plano, sin caja blanca (en la demo son imágenes sueltas) */
.wm-hero-cat-ico {
    width: 26px;
    height: 26px;
    color: #555555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wm-hero-cat-ico svg { width: 22px; height: 22px; }
.wm-hero-cat:hover .wm-hero-cat-ico { color: var(--accent); }

/* Slider central: fondo gris claro, contenido CENTRADO como la demo */
.wm-hero-banner {
    position: relative;
    background: #1c1c1c;
    border-radius: var(--r-lg);
    overflow: hidden;
    min-height: 460px;
    min-height: min(560px, calc(100vh - 150px));   /* nunca más alto que la ventana (tablets y laptops bajas) */
}

/* Slider: cada diapositiva es una imagen de fondo a pantalla completa del
   cuadro con un velo oscuro para que el texto blanco se lea. Fundido 0.7s. */
.wm-slides { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

.wm-slide {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 44px 64px;
    opacity: 0;
    transition: opacity .7s ease;
    pointer-events: none;
}
.wm-slide.on { opacity: 1; pointer-events: auto; }
.wm-slide::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .28) 0%, rgba(0, 0, 0, .18) 50%, rgba(0, 0, 0, .45) 100%);
}

.wm-hero-banner-content { position: relative; z-index: 2; max-width: 620px; }

.wm-hero-banner h1, .wm-hero-banner .wm-h1 {
    font-size: 26px; font-size: clamp(26px, 2.4vw, 40px);
    font-weight: 700;
    color: #fff;
    letter-spacing: -.01em;
    line-height: 1.2;
    margin-bottom: 10px;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

/* Subtítulo 22px/600, como la demo, en blanco suave sobre la foto */
.wm-hero-banner p {
    color: rgba(255, 255, 255, .88);
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 26px;
    text-shadow: 0 1px 10px rgba(0, 0, 0, .35);
}

.wm-hero-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Botón principal: 42px alto, píldora, como el "Buy Now" */
.wm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    height: 42px;
    padding: 0 24px;
    border-radius: var(--pill);
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.wm-btn:hover { background: var(--accent-2); }

.wm-btn-ghost { background: #fff; color: var(--title); }
.wm-btn-ghost:hover { background: var(--dark); color: #fff; }

/* Flechas del slider: círculos blancos translúcidos a los lados */
.wm-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .85);
    color: var(--title);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    opacity: 0;
    transition: opacity .2s, background .15s;
}
.wm-slider-prev { left: 18px; }
.wm-slider-next { right: 18px; }
.wm-slider:hover .wm-slider-arrow { opacity: 1; }
.wm-slider-arrow:hover { background: #fff; }

/* Pestañas centradas al pie del slider (una por diapositiva), activa en blanco */
.wm-hero-tabs {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    display: flex;
    justify-content: center;
    gap: 30px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, .65);
    z-index: 3;
    cursor: pointer;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}
/* Inactivas subrayadas en gris, activa subrayada en oscuro — como la demo */
.wm-hero-tabs span, .wm-hero-tabs button { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; border-bottom: 1px solid rgba(255, 255, 255, .45); padding-bottom: 3px; transition: color .15s; }
.wm-hero-tabs span:hover, .wm-hero-tabs button:hover { color: #fff; }
.wm-hero-tabs .on { color: #fff; border-bottom: 2px solid #fff; padding-bottom: 2px; }

/* Columna derecha: Novedades (rol del "Hot Deals") */
.wm-hero-hot {
    border: 1px solid rgba(0, 0, 0, .11);
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wm-hot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wm-hot-head h2 { font-size: 22px; font-weight: 700; color: var(--title); }

.wm-hot-main {
    background: var(--panel);
    border-radius: var(--r-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: box-shadow .15s;
}
.wm-hot-main:hover { box-shadow: var(--shadow); }
.wm-hot-main strong { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }

/* Modelo de moto al que corresponde la pieza (Novedades) */
.wm-hot-modelo { display: block; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.wm-hot-mini-txt .wm-hot-modelo { font-size: 11.5px; }

.wm-hot-main-img {
    aspect-ratio: 16 / 10;
    border-radius: 9px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 4px;
}
.wm-hot-main-img img { width: 100%; height: 100%; object-fit: cover; }

.wm-hot-mini {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 4px;
    border-radius: 10px;
    transition: background .12s;
}
.wm-hot-mini:hover { background: var(--panel); }

.wm-hot-mini-img {
    width: 56px;
    height: 56px;
    border-radius: 9px;
    background: var(--panel);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}
.wm-hot-mini-img img { width: 100%; height: 100%; object-fit: cover; }

.wm-hot-mini-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wm-hot-mini-txt strong {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Precios: 16px/600 en el azul de acento (rol del morado de la demo) */
.wm-precio { color: var(--price); font-weight: 600; font-size: 16px; }
.wm-precio-sm { color: var(--price); font-weight: 600; font-size: 14px; }

.wm-noimg { color: #c9c9c9; }

/* ── Marcas: fila de tarjetas grises bajo el hero, ~90px de alto ────────── */
.wm-brands {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    padding-top: 20px;
}

.wm-brand-card {
    background: var(--panel);
    border-radius: 20px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: .01em;
    color: #616161;
    transition: color .15s, background .15s;
}
.wm-brand-card:hover { color: var(--accent); background: #eef3fe; }

/* ── Cabeceras de sección: H2 36px/700 #242424 ──────────────────────────── */
.wm-section-head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    flex-wrap: wrap;
    padding: 64px 0 24px;
}
.wm-mt { padding-top: 64px; }

.wm-section-head h2 {
    font-size: 24px; font-size: clamp(24px, 2.2vw, 36px);
    font-weight: 700;
    color: var(--title);
    letter-spacing: -.01em;
}
.wm-count { color: var(--muted); font-size: 14px; font-weight: 500; }

.wm-all-link { margin-left: auto; color: var(--muted); font-size: 14px; font-weight: 600; transition: color .15s; }
.wm-all-link:hover { color: var(--accent); }

/* ── Grid de productos: 6 columnas en desktop, gap 20 ───────────────────── */
.wm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 20px;
}

.wm-card {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow .15s, border-color .15s;
}
.wm-card:hover { box-shadow: 0 8px 26px rgba(33, 33, 33, .1); border-color: #dedede; }
.wm-card.agotado { opacity: .72; }

.wm-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* La foto se posiciona por los 4 lados dentro del recuadro (16px = el padding) en vez de width/height 100%:
   en iPhone/Safari el height:100% dentro de la caja cuadrada (aspect-ratio + flex) se resolvía mal y la foto salía más ancha
   que el recuadro, pegada a la derecha y cortada (captura de Raul 10-09). Sin usar `inset` (WebView viejos). */
.wm-card-img img { position: absolute; top: 16px; right: 16px; bottom: 16px; left: 16px; width: auto; height: auto; max-width: calc(100% - 32px); max-height: calc(100% - 32px); margin: auto; object-fit: contain; border-radius: 0; }   /* esquinas rectas en la foto (Raul 10-09) */

.wm-tag-agotado {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--pill);
}

.wm-card-info { padding: 2px 16px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }

/* Categoría 13px gris + estado, como la fila "Smartphones ····· 5.0★" */
.wm-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
.wm-card-cat {
    color: var(--muted);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wm-dispo { color: var(--ok); font-weight: 600; font-size: 11.5px; white-space: nowrap; }

/* Nombre 16px/600 #333 */
.wm-card-nombre {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

.wm-card-codigo {
    font-size: 12.5px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pie con línea divisoria: precio izquierda + botón carrito derecha */
.wm-card-foot {
    border-top: 1px solid var(--line-soft);
    padding: 11px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wm-cart-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    border: 1px solid var(--line);
    color: var(--title);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, color .15s, border-color .15s;
}
.wm-cart-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Vacío / paginación ─────────────────────────────────────────────────── */
.wm-vacio {
    background: var(--panel);
    border-radius: var(--r-lg);
    text-align: center;
    padding: 50px 20px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.wm-paginacion {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 30px 0 4px;
}

.wm-pag-btn {
    border: 1px solid var(--line);
    border-radius: var(--pill);
    height: 42px;
    display: inline-flex;
    align-items: center;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 600;
    transition: border-color .15s, color .15s;
}
.wm-pag-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Banner oscuro (rol del banner negro de la demo) ────────────────────── */
.wm-dark-banner {
    margin-top: 54px;
    background: #000;
    color: #fff;
    border-radius: var(--r-lg);
    padding: 46px 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
}

.wm-dark-kicker {
    display: inline-block;
    color: #9db2ff;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.wm-dark-banner h2 { font-size: 24px; font-size: clamp(24px, 2.2vw, 34px); font-weight: 700; letter-spacing: -.01em; margin-bottom: 8px; }
.wm-dark-banner p { color: #a8a8a8; max-width: 560px; }

/* ── Footer CLARO #f4f4f4, títulos en acento, como la demo ─────────────── */
.wm-footer { background: var(--panel); color: var(--ink); font-size: 14px; margin-top: 64px;   /* separación de la última grilla de piezas (antes la daba la franja gris) */ }

.wm-footer-cols {
    display: grid;
    grid-template-columns: 1.2fr .8fr 1fr 1fr 1.3fr;   /* Contacto · Menú · Enlaces útiles · Categorías · Novedades */
    gap: 30px;
    padding-top: 50px;
    padding-bottom: 44px;
}

.wm-brand-foot .wm-brand-name { color: var(--title); font-size: 23px; }
.wm-footer-label { margin-top: 18px; font-weight: 700; color: var(--title); margin-bottom: 6px; }
.wm-footer-plain { color: var(--muted); }

/* Títulos de columna en el color de acento, 17.6px/700 como la demo */
.wm-footer h4 {
    color: var(--accent);
    font-size: 17.5px;
    font-weight: 700;
    margin-bottom: 16px;
}

.wm-footer ul { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.wm-footer ul a { color: var(--ink); transition: color .15s; }
.wm-footer ul a:hover { color: var(--accent); }

/* Tarjeta de novedades: bloque de acento radio 20 padding 30, título 30/700 */
.wm-news-card {
    background: var(--accent);
    color: #fff;
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    align-self: start;
}
.wm-news-card h3 { font-size: 22px; font-size: clamp(22px, 1.8vw, 30px); font-weight: 700; line-height: 1.2; }
.wm-news-card p { color: rgba(255, 255, 255, .85); font-size: 14px; }

.wm-news-btn {
    margin-top: 6px;
    background: #fff;
    color: var(--accent);
    font-size: 14px;
    font-weight: 700;
    height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 22px;
    border-radius: 10px;
    transition: filter .15s;
}
.wm-news-btn:hover { filter: brightness(.94); }

.wm-footer-bottom {
    background: #fff;
    border-top: 1px solid var(--line-soft);
    padding: 18px 0;
    font-size: 13px;
    color: var(--muted);
}
.wm-footer-bottom-inner { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; }   /* Raul 10-09: centrado, con línea entre © y "Precios en USD" */
.wm-footer-bottom-inner > span { padding: 0 16px; }
.wm-footer-bottom-inner > span + span { border-left: 1px solid #d4d4d4; }
.wm-footer-aviso { margin: 6px auto 0; text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--muted); opacity: .85; }   /* Raul 08-10: aviso de negocio independiente */

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
    .wm-hero { grid-template-columns: 300px 1fr 300px; }
}

@media (max-width: 1024px) {
    .wm-hero { grid-template-columns: 1fr 300px; }
    .wm-hero-cats { display: none; }
    .wm-footer-cols { grid-template-columns: 1fr 1fr 1fr; }
}

/* Tablet: el header cabe en una fila si se quita la píldora "Catálogo"
   (el catálogo se abre desde "Ver catálogo" del slider o desde Categorías) */
@media (max-width: 1024px) {
    .wm-header-inner { gap: 12px; padding-top: 16px; padding-bottom: 16px; }
    .wm-search { min-width: 200px; }
    .wm-cats-btn { padding: 0 16px; }
}
/* Tablet (07-10): con el icono de «Mi cuenta» ya no cabía ES/EN en la fila; «Catálogo completo» pasa a solo icono, como en el móvil */
@media (min-width: 721px) and (max-width: 1024px) {
    .wm-cats-btn { height: 46px; width: 46px; padding: 0; font-size: 0; gap: 0; justify-content: center; border-radius: 50%; flex: 0 0 auto; }
    .wm-cats-btn svg { width: 18px; height: 18px; }
    .wm-search { min-width: 160px; flex: 1 1 160px; }
}

/* Celular: fila 1 = logo · Categorías · carrito · WhatsApp; fila 2 = buscador a lo ancho */
@media (max-width: 720px) {
    .wm-header-inner { gap: 8px; padding-top: 10px; padding-bottom: 10px; }
    .wm-brand-name { font-size: 19px; }
    .wm-logo { width: 34px; height: 34px; }
    /* Categorías solo con icono para que logo · categorías · carrito · WhatsApp quepan en una fila */
    .wm-cats-btn { height: 40px; width: 40px; padding: 0; font-size: 0; gap: 0; margin-left: auto; justify-content: center; border-radius: 50%; }
    .wm-cats-btn svg { width: 18px; height: 18px; }
    .wm-cart-head, .wm-circle-btn { width: 40px; height: 40px; }
    .wm-search { order: 5; flex-basis: 100%; height: 42px; min-width: 0; }

    .wm-hero { grid-template-columns: 1fr; }
    /* Raul 10-09: en móvil el slide + la fila de marcas llenan la primera pantalla; "¿Cómo comprar?" aparece al deslizar
       (header 110 + aire del hero 24 + marcas 86 + respiro 14 = 234) */
    .wm-hero-banner { min-height: 340px; }
    .wm-slide { padding: 38px 22px 58px; }
    .wm-hero-banner p { font-size: 16px; }
    .wm-slider-arrow { opacity: 1; width: 36px; height: 36px; }
    .wm-slider-prev { left: 10px; }
    .wm-slider-next { right: 10px; }

    /* Raul 10-09: en móvil se ven DOS tarjetas y se desliza para ver las demás (scroll-snap) */
    .wm-brands { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 15px; scroll-padding-right: 15px; gap: 10px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }   /* scroll-padding: la 1ª tarjeta no queda cortada por el margen del contenedor */
    .wm-brands::-webkit-scrollbar { display: none; }
    .wm-brand-card { flex: 0 0 calc(50% - 5px); scroll-snap-align: start; min-height: 62px; font-size: 14px; }

    .wm-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
    .wm-card-nombre { font-size: 13.5px; }
    .wm-precio { font-size: 14.5px; }
    .wm-card-info, .wm-card-foot { padding-left: 12px; padding-right: 12px; }

    .wm-dark-banner { padding: 30px 22px; }
    .wm-footer-cols { grid-template-columns: 1fr; gap: 24px; }
    .wm-news-card { width: 100%; }
}

.wm-precio-stack { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   V2 — navegación práctica: moto · sistema · marca, tarjetas claras,
   sugerencias del buscador y "Mi lista de piezas" (carrito → WhatsApp)
   ══════════════════════════════════════════════════════════════════════════ */

/* El atributo hidden debe ganar siempre a los display:flex de abajo */
[hidden] { display: none !important; }

/* ── Buscador: sugerencias ─────────────────────────────────────────────── */
.wm-search { position: relative; }
.wm-sugs {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: 16px;
    box-shadow: 0 14px 40px rgba(33, 33, 33, .13);
    padding: 6px;
    z-index: 80;
    max-height: 420px;
    overflow: auto;
}
.wm-sug {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    transition: background .12s;
}
.wm-sug:hover { background: var(--panel); }
.wm-sug-txt { display: flex; flex-direction: column; min-width: 0; }
.wm-sug-txt strong { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-sug-txt small { color: var(--muted); font-size: 12px; }
.wm-sug-precio { color: var(--price); font-weight: 600; white-space: nowrap; }
.wm-sug-precio em { color: #b91c1c; font-style: normal; font-size: 11px; font-weight: 600; }
.wm-sug-atajo { background: #e8efff; }
.wm-sug-atajo:hover { background: #dbe6ff; }
.wm-sug-atajo .wm-sug-txt strong { color: var(--accent); }
.wm-sug-atajo .wm-sug-precio { color: var(--accent); font-size: 18px; }
.wm-sug-all { justify-content: center; color: var(--accent); font-weight: 600; font-size: 13px; border-top: 1px solid var(--line-soft); border-radius: 0; margin-top: 4px; }

/* ── Header: botón "Mi lista" con contador ─────────────────────────────── */
.wm-cart-head {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid var(--accent);
    background: #fff;
    color: var(--accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}
.wm-cart-head:hover { background: var(--accent); color: #fff; }
.wm-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: #242424;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.wm-filtro-activos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-top: 1px solid #e3e3e3; margin-top: 2px; padding-top: 12px; }
.wm-fx {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    background: #e8efff;
    border-radius: 30px;
    padding: 5px 12px;
}
.wm-fx:hover { background: var(--accent); color: #fff; }
.wm-fx-all { background: transparent; color: var(--muted); }
.wm-fx-all:hover { color: #b91c1c; background: transparent; }

/* ── Tarjeta: modelo visible, marca y botón + ──────────────────────────── */
.wm-card-img { text-decoration: none; }
.wm-tag-modelo {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #242424;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 3px 10px;
    border-radius: var(--pill);
}
.wm-card-codigo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm-card-marca {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    background: var(--panel);
    padding: 2px 8px;
    border-radius: 20px;
}
.wm-card-marca.orig { background: #e8efff; color: var(--accent); }
.wm-card-cod { color: var(--muted); }
.wm-add.en-lista { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Mi lista de piezas (drawer) ───────────────────────────────────────── */
.wm-cart-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, .45); z-index: 100; }
.wm-cart {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%; max-width: 440px;
    width: min(440px, 100%);
    background: #fff;
    z-index: 101;
    display: flex;
    flex-direction: column;
    box-shadow: -10px 0 40px rgba(0, 0, 0, .15);
}
.wm-cart-abierto { overflow: hidden; }
.wm-cart .wm-cart-panel-head {
    width: auto; height: auto; border: none; border-radius: 0; background: #fff; color: var(--title); cursor: default;
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 22px; border-bottom: 1px solid var(--line-soft);
}
.wm-cart .wm-cart-panel-head h3 { font-size: 20px; font-weight: 700; }
.wm-cart-close { border: none; background: var(--panel); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 15px; color: var(--ink); }
.wm-cart-close:hover { background: #e4e4e4; }
.wm-cart-items { flex: 1; overflow: auto; padding: 10px 22px; }
.wm-cart-empty { padding: 40px 28px; text-align: center; color: var(--muted); }
.wm-cart-empty p:first-child { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.wm-cart-hint { font-size: 13px; color: var(--muted); line-height: 1.5; }

.wm-ci {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    grid-template-areas: "img txt del" "img qty sub";
    gap: 6px 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--line-soft);
}
.wm-ci-img { grid-area: img; width: 56px; height: 56px; border-radius: 10px; background: var(--panel); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wm-ci-img img { width: 100%; height: 100%; object-fit: contain; }
.wm-ci-txt { grid-area: txt; display: flex; flex-direction: column; min-width: 0; }
.wm-ci-txt strong { font-size: 14px; font-weight: 600; line-height: 1.3; }
.wm-ci-meta { font-size: 12px; color: var(--muted); }
.wm-ci-precio { font-size: 12.5px; color: var(--muted); }
.wm-ci-qty { grid-area: qty; display: inline-flex; align-items: center; border: 1px solid var(--line-soft); border-radius: 30px; overflow: hidden; width: max-content; }
.wm-ci-btn { width: 32px; height: 32px; border: none; background: #fff; cursor: pointer; font-size: 17px; color: var(--ink); }
.wm-ci-btn:hover { background: var(--panel); }
.wm-ci-num { width: 44px; height: 32px; border: none; text-align: center; font: inherit; font-weight: 600; -moz-appearance: textfield; }
.wm-ci-num::-webkit-outer-spin-button, .wm-ci-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wm-ci-sub { grid-area: sub; font-weight: 700; color: var(--price); font-size: 15px; text-align: right; }
.wm-ci-del { grid-area: del; border: none; background: transparent; color: #999; cursor: pointer; font-size: 14px; justify-self: end; }
.wm-ci-del:hover { color: #b91c1c; }

.wm-cart-foot { padding: 16px 22px 20px; border-top: 1px solid var(--line-soft); background: #fff; display: flex; flex-direction: column; gap: 10px; }
.wm-cart-total { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.wm-cart-total strong { font-size: 24px; font-weight: 700; color: var(--title); }
.wm-cart-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wm-cart-input { height: 42px; border: 1px solid var(--line); border-radius: 12px; padding: 0 14px; font: inherit; font-size: 14px; min-width: 0; }
.wm-cart-input:focus { outline: none; border-color: var(--accent); }
.wm-btn-wa { background: var(--wa); width: 100%; height: 48px; font-size: 15px; }
.wm-btn-wa:hover { background: #1fb457; }
.wm-cart-clear { border: none; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.wm-cart-clear:hover { color: #b91c1c; }
.wm-cart-msg { font-size: 13px; line-height: 1.45; padding: 10px 12px; border-radius: 10px; }
.wm-cart-msg.ok { background: #e6f7ec; color: #166534; }
.wm-cart-msg.warn { background: #fff4e0; color: #92400e; }
.wm-cart-msg ul { margin: 6px 0 0; padding-left: 18px; }   /* lista de errores del formulario (29-09) */
.wm-cart-msg li { margin: 2px 0; }

/* Registrar pedido + confirmación con código */
.wm-btn-registrar { background: var(--accent); width: 100%; height: 48px; font-size: 15px; }
.wm-btn-registrar:disabled { opacity: .6; cursor: wait; }
.wm-cart-ok { flex: 1; overflow: auto; padding: 36px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.wm-ok-ico { width: 64px; height: 64px; border-radius: 50%; background: #e6f7ec; color: #166534; font-size: 30px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.wm-cart-ok h4 { font-size: 21px; font-weight: 700; color: var(--title); }
.wm-ok-sub { color: var(--muted); font-size: 14px; }
.wm-ok-codigo {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: .06em;
    color: var(--accent);
    background: #e8efff;
    border: 2px dashed var(--accent);
    border-radius: 16px;
    padding: 14px 26px;
    user-select: all;
}
.wm-ok-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 4px 0 2px; }
.wm-ok-datos div { background: var(--panel); border-radius: 12px; padding: 10px 12px; text-align: center; }
.wm-ok-datos dt { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wm-ok-datos dd { font-size: 14.5px; font-weight: 600; color: var(--title); margin-top: 2px; overflow-wrap: anywhere; }
.wm-ok-copiar { height: 42px; }
.wm-ok-nota { font-size: 12.5px; color: var(--muted); background: var(--panel); border-radius: 10px; padding: 8px 12px; margin: 0; }
.wm-ok-cambios { margin: 6px 0 8px; padding-left: 18px; text-align: left; list-style: disc; }
.wm-ok-cambios li { margin: 2px 0; }
.wm-ok-vendedor { width: 100%; background: #e6f7ec; border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.wm-ok-vend-lbl { font-size: 11px; font-weight: 700; color: #166534; text-transform: uppercase; letter-spacing: .05em; }
.wm-ok-vend-num { font-size: 22px; font-weight: 800; color: #166534; letter-spacing: .02em; }
.wm-ok-vend-num:hover { text-decoration: underline; }
.wm-ok-vend-pend { font-size: 12.5px; color: var(--muted); font-style: italic; }
.wm-ok-txt { font-size: 14px; line-height: 1.55; color: var(--ink); margin-top: 6px; }
.wm-ok-resumen { font-size: 13px; color: var(--muted); }
.wm-cart-ok .wm-btn-wa { width: 100%; }

/* ── Cómo comprar: un solo bloque con título y 4 pasos, bajo el hero ────── */
.wm-pasos-compra {
    position: relative;   /* para el enlace "Ver video" en la esquina */
    margin-top: 20px;
    background: var(--panel);
    border-radius: 20px;
    padding: 18px 22px 20px;
}
.wm-pc-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.wm-pc-head h2 { font-size: 22px; font-weight: 700; color: var(--title); letter-spacing: -.01em; }
.wm-pc-head span { font-size: 13px; color: var(--muted); font-weight: 500; }
/* "Ver video" (Raul 13-09): enlace en la esquina superior derecha del bloque de pasos; abre un modal con el video (vertical en celular) */
.wm-pc-head { padding-right: 120px; }
.wm-pc-video { position: absolute; top: 16px; right: 18px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px 7px 9px; border-radius: 999px; background: #111; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; line-height: 1; white-space: nowrap; transition: background .15s, transform .15s; }
.wm-pc-video:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.wm-pc-video svg { flex-shrink: 0; }
.wm-pc-video svg circle { fill: var(--accent); }
.wm-pc-video:hover svg circle { fill: #fff; }
.wm-pc-video svg path { fill: #fff; }
.wm-pc-video:hover svg path { fill: var(--accent); }
.wm-video-modal { position: fixed; inset: 0; z-index: 1200; background: rgba(0, 0, 0, .86); display: flex; align-items: center; justify-content: center; padding: 16px; }
.wm-video-modal[hidden] { display: none; }
.wm-video-box { position: relative; width: min(1100px, 96vw, calc(86vh * 16 / 9)); }
.wm-video-vertical .wm-video-box { width: min(430px, 92vw, calc(86vh * 9 / 16)); }
.wm-video-box iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: #000; border-radius: 12px; }
.wm-video-vertical .wm-video-box iframe { aspect-ratio: 9 / 16; }
.wm-video-close { position: absolute; top: -14px; right: -14px; width: 38px; height: 38px; border-radius: 50%; border: none; background: #fff; color: #111; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); z-index: 1; display: flex; align-items: center; justify-content: center; }
body.wm-video-abierto { overflow: hidden; }
@media (max-width: 720px) {
    .wm-pc-head { padding-right: 0; padding-top: 34px; }
    .wm-pc-video { top: 12px; right: 12px; padding: 6px 12px 6px 8px; font-size: 12.5px; }
    .wm-video-close { top: -10px; right: -6px; width: 34px; height: 34px; }
}
/* Los 4 pasos van sobre el mismo gris del bloque, separados solo por líneas */
.wm-pc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.wm-pc {
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 1px solid #dcdcdc;
}
.wm-pc:first-child { border-left: none; padding-left: 0; }
.wm-pc-num {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wm-pc h3 { font-size: 14.5px; font-weight: 700; color: var(--title); line-height: 1.2; }
.wm-pc p { font-size: 12.5px; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.wm-pc p strong { color: var(--accent); }
@media (max-width: 1024px) {
    .wm-pc-grid { grid-template-columns: repeat(2, 1fr); }
    .wm-pc { padding: 10px 14px; }
    .wm-pc:nth-child(odd) { border-left: none; padding-left: 0; }
    .wm-pc:nth-child(n+3) { border-top: 1px solid #dcdcdc; }
}
@media (max-width: 720px) {
    .wm-pc-grid { grid-template-columns: 1fr; }
    .wm-pc { border-left: none; padding: 10px 0; }
    .wm-pc + .wm-pc { border-top: 1px solid #dcdcdc; }
    .wm-pasos-compra { padding: 14px 14px 16px; }
}

/* Botón flotante (móvil) y aviso al agregar */
.wm-cart-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 90;
    height: 52px;
    padding: 0 18px 0 14px;
    border-radius: 30px;
    border: none;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    display: none;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(37, 99, 235, .35);
    cursor: pointer;
}
.wm-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 20px);
    background: #242424;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 30px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
    z-index: 95;
}
.wm-toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
    .wm-cart-head { width: 40px; height: 40px; }
    .wm-cart-fab:not([hidden]) { display: inline-flex; }
    .wm-cart-datos { grid-template-columns: 1fr; }
}

/* ── Ofertas: precio normal tachado + etiqueta ─────────────────────────── */
.wm-precio-antes { color: var(--muted); font-weight: 500; font-size: .85em; text-decoration: line-through; margin-right: 2px; }
.wm-tag-oferta {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #dc2626;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: var(--pill);
}
.wm-card.agotado .wm-tag-oferta { top: 38px; }

/* "Catálogo completo" al pie de la lista de sistemas (sustituye al botón del header) */
/* La línea separadora va en un ::before, no en el borde del enlace, para que el
   hover conserve la píldora completa como el resto de ítems */
.wm-hero-cat-todo { position: relative; margin-top: 10px; color: var(--accent); font-weight: 700; }
.wm-hero-cat-todo::before { content: ''; position: absolute; left: 14px; right: 14px; top: -5px; height: 1px; background: #e2e2e2; }
.wm-hero-cat-todo:hover { background: #fff; color: var(--accent); }
.wm-hero-cat-todo .wm-hero-cat-ico { color: var(--accent); }

/* Cantidad de artículos junto a cada sistema en la columna del hero */
.wm-hero-cat-n { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }

/* Logos en las tarjetas de marca (img/marcas/<marca>.svg|png); sin logo, el nombre */
.wm-brand-card.con-logo { padding: 14px 26px; }
.wm-brand-card.con-logo img { max-height: 44px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
.wm-brand-card.con-logo:hover img { transform: scale(1.04); transition: transform .15s; }
@media (max-width: 720px) { .wm-brand-card.con-logo img { max-height: 32px; max-width: 110px; } }

/* ── Páginas informativas (política de privacidad / devoluciones) ──────── */
.pg { max-width: 860px; padding-top: 40px; padding-bottom: 40px; }
.pg h1 { font-size: 26px; font-size: clamp(26px, 2.4vw, 36px); font-weight: 700; color: var(--title); letter-spacing: -.01em; }
.pg-sub { color: var(--muted); font-size: 16px; margin: 6px 0 26px; }
.pg-body { background: var(--panel); border-radius: 20px; padding: 28px 30px; }
.pg-body h2 { font-size: 17px; font-weight: 700; color: var(--title); margin: 22px 0 8px; }
.pg-body h2:first-child { margin-top: 0; }
.pg-body p, .pg-body li { font-size: 15px; line-height: 1.65; color: var(--ink); }
.pg-body ul { list-style: disc; padding-left: 22px; margin: 6px 0; }
.pg-body li + li { margin-top: 4px; }
.pg-fecha { color: var(--muted); font-size: 13px; margin-top: 22px; }
.pg-links { margin-top: 22px; font-size: 14px; color: var(--muted); }
.pg-links a { color: var(--accent); font-weight: 600; }
.wm-footer-tel a { color: var(--accent); font-weight: 700; }
@media (max-width: 720px) { .pg-body { padding: 20px 18px; } }

/* ══════════════════════════════════════════════════════════════════════════
   Página de catálogo (categoría / marca / modelo / búsqueda) — réplica de la
   demo WoodMart "brand/acer": migas 16px #767676 · sidebar 377px gris #f4f4f4
   radio 20 padding 30 · widgets h5 16/600 #333 · enlaces 16/400 #767676 con
   contador píldora 12px borde rgba(0,0,0,.106) · título 30/700 · toolbar
   "Mostrar : 9 / 12 / 18 / 24" 16/600 + select 42px radio 30 · grid 4 col gap 20
   ══════════════════════════════════════════════════════════════════════════ */
.wm-cat { padding-top: 28px; }

.wm-bc { font-size: 16px; color: var(--muted); margin-bottom: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wm-bc a { color: var(--muted); }
.wm-bc a:hover { color: var(--accent); }
.wm-bc-sep { color: #bdbdbd; }
.wm-bc-act { color: var(--title); font-weight: 600; }

.wm-cat-layout { display: grid; grid-template-columns: 377px minmax(0, 1fr); gap: 40px; align-items: start; }

/* Sidebar */
.wm-side { background: var(--panel); border-radius: 20px; padding: 30px; }
.wm-widget + .wm-widget { margin-top: 26px; padding-top: 26px; border-top: 1px solid rgba(0, 0, 0, .09); }
.wm-widget h2.wm-widget-t, .wm-widget h5 { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.wm-widget ul { list-style: none; }
.wm-widget li a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 0; font-size: 16px; font-weight: 400; color: var(--muted); line-height: 1.4;
    transition: color .12s;
}
.wm-widget li a:hover { color: var(--title); }
.wm-widget li a.on { color: var(--title); font-weight: 600; }
.wm-widget .count {
    font-size: 12px; font-weight: 400; color: var(--muted); line-height: 18px; height: 20px; min-width: 30px;
    padding: 0 5px; border: 1px solid rgba(0, 0, 0, .106); border-radius: 35px; text-align: center; flex-shrink: 0;
}
.wm-widget li a.on .count { border-color: var(--title); color: var(--title); }
.wm-check { justify-content: flex-start !important; }
.wm-check-box { width: 18px; height: 18px; border: 1px solid rgba(0, 0, 0, .2); border-radius: 4px; background: #fff; flex-shrink: 0; position: relative; }
.wm-check.on .wm-check-box { background: var(--accent); border-color: var(--accent); }
.wm-check.on .wm-check-box::after { content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.wm-widget-activos .wm-filtro-activos { border-top: none; padding-top: 0; margin-top: 0; }
.wm-widget-activos + .wm-widget { margin-top: 22px; padding-top: 22px; }

/* Cabecera del contenido */
.wm-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.wm-cat-title { font-size: 30px; font-weight: 700; color: var(--title); letter-spacing: -.01em; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.wm-cat-n { font-size: 14px; font-weight: 500; color: var(--muted); }
.wm-cat-tools { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.wm-cat-pp { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.wm-cat-pp a { color: var(--muted); }
.wm-cat-pp a:hover, .wm-cat-pp a.on { color: var(--title); }
.wm-cat-pp i { color: #bdbdbd; font-style: normal; }
.wm-cat-orden {
    height: 42px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 30px; background: #fff; padding: 0 36px 0 15px;
    font: inherit; font-size: 14px; color: var(--ink); appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; min-width: 208px;
}
.wm-cat-orden:focus { outline: none; border-color: rgba(0, 0, 0, .3); }

.wm-side-toggle { display: none; }

@media (max-width: 1280px) { .wm-cat-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 24px; } .wm-side { padding: 22px; } }
@media (max-width: 1024px) {
    .wm-cat-layout { grid-template-columns: 1fr; }
    .wm-side { display: none; }
    .wm-side.open { display: block; margin-bottom: 20px; }
    .wm-side-toggle {
        display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 30px;
        border: 1px solid rgba(0, 0, 0, .15); background: #fff; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink);
        cursor: pointer; margin-bottom: 16px;
    }
    .wm-side-toggle[aria-expanded="true"] { background: var(--dark); color: #fff; border-color: var(--dark); }
}
@media (max-width: 720px) {
    .wm-cat { padding-top: 16px; }
    .wm-bc { font-size: 14px; margin-bottom: 14px; }
    .wm-cat-title { font-size: 24px; }
    .wm-cat-tools { width: 100%; justify-content: space-between; gap: 10px; }
    .wm-cat-orden { min-width: 0; flex: 1; }
    .wm-widget li a { font-size: 15px; padding: 7px 0; }
}

/* Cantidad junto al botón + de cada tarjeta (por defecto 1) */
.wm-card-foot { gap: 6px; }
.wm-qty-wrap { margin-left: auto; }
.wm-qty {
    width: 52px; height: 38px; border: 1px solid var(--line-soft); border-radius: 30px; text-align: center;
    font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; -moz-appearance: textfield;
}
.wm-qty::-webkit-outer-spin-button, .wm-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wm-qty:focus { outline: none; border-color: var(--accent); }
@media (max-width: 720px) { .wm-qty { width: 44px; height: 34px; font-size: 13px; } }

/* ── Original + genérica en una tarjeta: una fila por opción ───────────── */
.wm-card-marca.dual { background: #fff4e0; color: #92400e; }

/* ── Ficha de pieza (pieza.php) ─────────────────────────────────────────── */
.wm-card-nombre a { color: inherit; }
.wm-card-nombre a:hover { color: var(--accent); }
.wm-pz { padding-top: 28px; }
.wm-pz-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.wm-pz-foto {
    position: relative; background: var(--panel); border-radius: 20px; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center; padding: 28px; overflow: hidden;
}
.wm-pz-foto img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
/* Fotos de la tienda (Raul 10-09): las miniaturas van limpias pero NO se pueden abrir en otra pestaña, guardar con clic derecho
   ni arrastrar (el clic pasa al enlace de la tarjeta). La foto grande de la ficha sí se puede abrir: ya lleva la marca de agua. */
body img { pointer-events: none; -webkit-user-drag: none; user-drag: none; user-select: none; -webkit-user-select: none; }
.wm-pz-foto img { pointer-events: auto; }
.wm-pz-nofoto { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #b5b5b5; font-size: 14px; font-weight: 600; }
.wm-pz-foto .wm-tag-modelo { top: 16px; right: 16px; font-size: 12px; padding: 5px 12px; }
.wm-pz-foto .wm-tag-oferta { top: 16px; left: 16px; font-size: 12px; padding: 5px 12px; }

.wm-pz-cat { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.wm-pz-cat:hover { color: var(--accent); }
.wm-pz-nombre { font-size: 24px; font-size: clamp(24px, 2.2vw, 32px); font-weight: 700; color: var(--title); letter-spacing: -.01em; line-height: 1.2; margin: 6px 0 4px; }
.wm-pz-catalogo { font-size: 13px; color: var(--muted); }
.wm-pz-datos { display: grid; grid-template-columns: repeat(3, auto); gap: 10px 22px; margin: 18px 0 20px; padding: 14px 18px; background: var(--panel); border-radius: 14px; width: max-content; max-width: 100%; }
.wm-pz-datos dt { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wm-pz-datos dd { font-size: 14.5px; font-weight: 600; color: var(--title); margin-top: 2px; }
.wm-pz-datos dd small { font-weight: 500; color: var(--muted); }

.wm-pz-opciones { display: flex; flex-direction: column; gap: 10px; }
.wm-pz-op {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "txt precio" "add add";
    gap: 10px 16px; align-items: center; border: 1px solid var(--line-soft); border-radius: 16px; padding: 14px 18px;
}
.wm-pz-op.orig { border-color: #c7d7ff; background: #f5f8ff; }
.wm-pz-op.agotada { opacity: .6; }
.wm-pz-op-txt { grid-area: txt; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wm-pz-op-lbl { font-size: 16px; font-weight: 700; color: var(--title); }
.wm-pz-op.orig .wm-pz-op-lbl { color: var(--accent); }
.wm-pz-op-sub { font-size: 13px; color: var(--muted); }
.wm-pz-op-sub .ok { color: var(--ok); font-weight: 700; }
.wm-pz-op-sub .no { color: #b91c1c; font-weight: 700; }
.wm-pz-op-precio { grid-area: precio; font-size: 24px; font-weight: 700; color: var(--price); white-space: nowrap; }
.wm-pz-op-precio .wm-precio-antes { font-size: 15px; }
.wm-pz-op-add { grid-area: add; display: flex; align-items: center; gap: 8px; }
.wm-pz-op-add .wm-qty { width: 64px; height: 44px; font-size: 15px; }
.wm-pz-btn { height: 44px; padding: 0 20px; flex: 1; justify-content: center; }
.wm-pz-btn.en-lista { background: var(--accent-2); }

.wm-pz-desc { margin-top: 22px; }
.wm-pz-desc h3 { font-size: 15px; font-weight: 700; color: var(--title); margin-bottom: 6px; }
.wm-pz-desc p { font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.wm-pz-ayuda { margin-top: 22px; padding: 14px 18px; border-radius: 14px; background: #fff8ec; font-size: 13.5px; line-height: 1.55; color: #5b4a2a; }
.wm-pz-ayuda strong { color: #92400e; }
.wm-pz-wa { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 600; }
.wm-pz-rel-head { padding-top: 56px; }

@media (max-width: 1024px) { .wm-pz-layout { gap: 24px; } }
@media (max-width: 720px) {
    .wm-pz { padding-top: 16px; }
    .wm-pz-layout { grid-template-columns: 1fr; gap: 18px; }
    .wm-pz-foto { padding: 18px; }
    .wm-pz-datos { grid-template-columns: 1fr 1fr; width: auto; }
    .wm-pz-op { padding: 12px 14px; }
    .wm-pz-op-precio { font-size: 20px; }
    .wm-pz-rel-head { padding-top: 36px; }
}

/* ── Página ¿Cómo comprar? ───────────────────────────────────────────── */
.pg-resumen { background: #eef3ff; border-left: 4px solid var(--accent); border-radius: 12px; padding: 14px 18px; font-size: 15px; line-height: 1.6; color: var(--ink); margin-bottom: 8px; }
/* ── Mi cuenta (29-09) ── */
.wm-cuenta-head { position: relative; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--accent); background: #fff; color: var(--accent); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .15s, color .15s; }
.wm-cuenta-head:hover { background: var(--accent); color: #fff; }
.wm-cuenta-head.on::after { content: ''; position: absolute; top: 1px; right: 1px; width: 11px; height: 11px; border-radius: 50%; background: #16a34a; border: 2px solid #fff; }
@media (max-width: 720px) { .wm-cuenta-head { width: 40px; height: 40px; } }
.wm-cuenta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; align-items: start; margin-top: 18px; }
@media (max-width: 820px) { .wm-cuenta-grid { grid-template-columns: 1fr; } }
.wm-cuenta-card h2 { font-size: 19px; margin: 0 0 14px; }
.wm-cuenta-form { display: flex; flex-direction: column; gap: 12px; }
.wm-cuenta-form .wm-btn { align-self: flex-start; }
.wm-cuenta-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .wm-cuenta-2 { grid-template-columns: 1fr; } }
.wm-cuenta-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wm-cuenta-salir { background: none; border: 1px solid var(--line, #e5e7eb); border-radius: 30px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; }
.wm-cuenta-salir:hover { color: var(--ink); border-color: var(--ink); }
.wm-cuenta-lista { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.wm-cuenta-lista a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 6px 16px; align-items: center; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line, #e5e7eb); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.wm-cuenta-lista a:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(15, 23, 42, .06); }
.wm-cuenta-cod { font-weight: 800; font-size: 16px; color: var(--title, var(--ink)); letter-spacing: .02em; }
.wm-cuenta-meta { font-size: 13.5px; color: var(--muted); }
.wm-cuenta-ver { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 30px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
@media (max-width: 560px) { .wm-cuenta-lista a { grid-template-columns: minmax(0, 1fr) auto; } .wm-cuenta-meta { grid-column: 1 / -1; grid-row: 2; } .wm-cuenta-ver { grid-column: 1 / -1; grid-row: 3; justify-self: start; } }
.wm-cuenta-vacio { margin-top: 16px; }
.wm-cuenta-volver { margin: 0 0 12px; }
.wm-cuenta-volver a { color: var(--accent); font-weight: 600; text-decoration: none; }
.wm-cuenta-sola { max-width: 520px; margin: 18px auto 0; }
.wm-cuenta-sola h1 { font-size: 24px; margin: 0 0 14px; }
.wm-cuenta-cambio { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line, #e5e7eb); font-size: 14.5px; }
.wm-cuenta-cambio a { color: var(--accent); font-weight: 700; }
.wm-cuenta-link { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); cursor: pointer; text-decoration: underline; }
.wm-cuenta-reenviar { margin: 12px 0 0; }
.wm-cuenta-olvido { margin: 12px 0 4px; }
.wm-cuenta-nivel { margin: 8px 0 0; display: inline-block; padding: 7px 14px; border-radius: 30px; background: #e6f7ec; color: #166534; font-size: 14px; }
.wm-cuenta-olvido a { color: var(--accent); font-weight: 600; font-size: 14px; }
.wm-cuenta-acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin-left: auto; }
.wm-cuenta-salir { display: inline-flex; align-items: center; gap: 7px; }
.wm-cuenta-top > div:first-child { flex: 1 1 320px; min-width: 0; }
.wm-cuenta-top .wm-cuenta-acciones { flex: 0 0 auto; padding-top: 6px; }
/* Panel del cliente en tablet y móvil (Raul 07-10: «no está optimizado») */
.wm-txt-corto { display: none; }
@media (max-width: 899px) {
    .wm-cuenta-top .wm-cuenta-acciones { flex: 1 1 100%; justify-content: flex-start; margin-left: 0; padding-top: 0; }
}
@media (max-width: 560px) {
    .wm-txt-largo { display: none; }
    .wm-txt-corto { display: inline; }
    .wm-cuenta-top h1 { font-size: 24px; margin-bottom: 4px; }
    .wm-cuenta-acciones { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; width: 100%; }
    .wm-cuenta-acciones > a, .wm-cuenta-acciones form, .wm-cuenta-acciones form button { width: 100%; justify-content: center; }
    .wm-cuenta-salir { padding: 9px 12px; font-size: 13.5px; }
    .wm-seg-datos.wm-cuenta-datos { grid-template-columns: 1fr; }
    .wm-cuenta-lista a { padding: 12px 14px; gap: 6px 10px; }
    .wm-cuenta-card { padding: 18px 16px; }
    /* Piezas del pedido en móvil: cada pieza en bloque (nombre arriba; código · × cantidad · subtotal debajo) */
    .wm-seg-tabla thead { display: none; }
    .wm-seg-tabla tbody tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "p p p" "c q s"; gap: 3px 10px; padding: 11px 2px; border-bottom: 1px solid var(--line); }
    .wm-seg-tabla tbody td { border: 0; padding: 0; font-size: 13.5px; }
    .wm-seg-tabla tbody td:nth-child(1) { grid-area: c; color: var(--muted); font-size: 12.5px; }
    .wm-seg-tabla tbody td:nth-child(2) { grid-area: p; font-weight: 600; color: var(--title); }
    .wm-seg-tabla tbody td:nth-child(3) { grid-area: q; text-align: left; color: var(--muted); font-size: 12.5px; }
    .wm-seg-tabla tbody td:nth-child(3)::before { content: '× '; }
    .wm-seg-tabla tbody td:nth-child(4) { grid-area: s; font-weight: 600; }
    .wm-seg-tabla tfoot tr { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 12px 2px 0; }
    .wm-seg-tabla tfoot td { padding: 0; }
}
.wm-seg-tabla td:first-child { white-space: nowrap; }
@media (min-width: 900px) { .wm-cuenta-top { flex-wrap: nowrap; } .wm-cuenta-top > div:first-child { flex: 1 1 auto; } .wm-cuenta-top .wm-cuenta-acciones { flex-wrap: nowrap; } }
.wm-cuenta-salir-btn { color: #c0392b; border-color: #f5c6c6; background: #fdecec; }
.wm-cuenta-salir-btn:hover { color: #a93226; border-color: #e8a5a5; background: #f9d6d6; }
.wm-cuenta-acciones a.wm-cuenta-salir { text-decoration: none; display: inline-flex; align-items: center; }
.wm-cuenta-datos { margin: 10px 0 0; }
.wm-cuenta-peligro h2 { color: #b91c1c; }
.wm-btn.wm-btn-peligro { background: #b91c1c; border-color: #b91c1c; }
.wm-btn.wm-btn-peligro:hover { background: #991b1b; }
.wm-cart-encuenta { margin: 4px 0 10px; }
.wm-cart-encuenta a { color: var(--accent); font-weight: 600; }
.pg-video { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 6px; }   /* botón del vídeo en «Cómo comprar» (29-09) */
.pg-video .pg-video-btn { display: inline-flex; align-items: center; gap: 8px; }
.pg-video span { font-size: 13.5px; color: var(--muted); }
.pg-tip { background: #fff8ec; border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.55; color: #5b4a2a; margin: 10px 0 4px; }
.pg-body h3 { font-size: 15px; font-weight: 700; color: var(--title); margin: 16px 0 4px; }

.wm-footer-tagline { font-size: 14px; line-height: 1.5; color: var(--ink); font-weight: 600; margin: 10px 0 14px; }

/* ── Respiro uniforme del bloque "¿Cómo comprar?": 44px arriba y abajo ─────── */
#como-comprar .wm-pasos-compra { margin-top: 44px; }
#como-comprar + main > .wm-section-head:first-child { padding-top: 44px; }
@media (max-width: 720px) {
    #como-comprar .wm-pasos-compra { margin-top: 28px; }
    #como-comprar + main > .wm-section-head:first-child { padding-top: 28px; }
}

/* ── Portada: rejillas de 2 FILAS COMPLETAS (columnas fijas por ancho; lo que sobra se oculta) ── */
@media (min-width: 1440px) {
    .wm-grid.wm-grid-2f { grid-template-columns: repeat(6, 1fr); }
    .wm-grid.wm-grid-2f > :nth-child(n+13) { display: none; }
}
@media (min-width: 1200px) and (max-width: 1439.98px) {
    .wm-grid.wm-grid-2f { grid-template-columns: repeat(5, 1fr); }
    .wm-grid.wm-grid-2f > :nth-child(n+11) { display: none; }
}
@media (min-width: 960px) and (max-width: 1199.98px) {
    .wm-grid.wm-grid-2f { grid-template-columns: repeat(4, 1fr); }
    .wm-grid.wm-grid-2f > :nth-child(n+9) { display: none; }
}
@media (min-width: 721px) and (max-width: 959.98px) {
    .wm-grid.wm-grid-2f { grid-template-columns: repeat(3, 1fr); }
    .wm-grid.wm-grid-2f > :nth-child(n+7) { display: none; }
}

/* ── Portada: secciones "Piezas para <modelo>" = 1 FILA completa (mismas columnas que .wm-grid-2f) ── */
@media (min-width: 1440px) { .wm-grid.wm-grid-1f { grid-template-columns: repeat(6, 1fr); } .wm-grid.wm-grid-1f > :nth-child(n+7) { display: none; } }
@media (min-width: 1200px) and (max-width: 1439.98px) { .wm-grid.wm-grid-1f { grid-template-columns: repeat(5, 1fr); } .wm-grid.wm-grid-1f > :nth-child(n+6) { display: none; } }
@media (min-width: 960px) and (max-width: 1199.98px) { .wm-grid.wm-grid-1f { grid-template-columns: repeat(4, 1fr); } .wm-grid.wm-grid-1f > :nth-child(n+5) { display: none; } }
@media (min-width: 721px) and (max-width: 959.98px) { .wm-grid.wm-grid-1f { grid-template-columns: repeat(3, 1fr); } .wm-grid.wm-grid-1f > :nth-child(n+4) { display: none; } }

/* ── Tarjeta: línea "Para <marca y modelo del vehículo>" bajo el nombre (Raul 09-09) ── */
.wm-card-para { font-size: 12.5px; color: var(--muted); line-height: 1.3; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wm-card-para strong { color: var(--title); font-weight: 600; }
.wm-card-para span { color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   AUDITORÍA 09-09 — Lote 2: compatibilidad, accesibilidad, contraste, hero ligero
   ═══════════════════════════════════════════════════════════════════════════ */

/* Saltar al contenido (teclado / lector de pantalla) */
.wm-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 30px; font-weight: 600; }
.wm-skip:focus { left: 12px; outline: 2px solid #fff; }
#wm-main { display: block; height: 0; }
/* Foco visible en todo control interactivo */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wm-search-input:focus-visible { outline: none; }   /* el buscador resalta con su propia píldora (.wm-search:focus-within) */
.wm-hero-tabs button:focus-visible { outline-color: #fff; }

/* Moneda explícita junto al precio */
.wm-usd { font-size: .62em; font-weight: 600; color: var(--muted); letter-spacing: .02em; vertical-align: 1px; }
.wm-precio .wm-usd, .wm-pz-op-precio .wm-usd { margin-left: 1px; }

/* Hero: la imagen es un <img> real (preload + srcset), no un background */
.wm-slide-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wm-slide::before { z-index: 1; }
.wm-hero-banner-content { position: relative; z-index: 2; }
.wm-slide { background-image: none !important; }

/* Fila de marcas: sin columnas vacías (auto-fit) y sin tarjetas gigantes */
/* (la fila de marcas conserva su rejilla original: Raul 09-09 "ponla como estaba") */
.wm-brand-card.con-logo img { height: 44px; width: auto; }

/* Columna de sistemas: el aire sobrante se reparte ENTRE los enlaces (margen auto en cada uno = space-evenly),
   y cuando no cabe, los márgenes auto valen 0 y se desplaza desde el PRIMER ítem (Raul 09-09: sin huecos al inicio/final) */
@media (min-width: 1025px) {
    .wm-hero .wm-hero-cats { justify-content: flex-start; }
    .wm-hero .wm-hero-cats > .wm-hero-cat { margin-top: auto; margin-bottom: auto; }
}

/* Contraste AA sobre paneles grises */
.wm-widget li a, .wm-hero-cat-n, .wm-pc p, .wm-footer-plain, .wm-footer-plain li, .wm-cat-n { color: var(--muted-panel); }
.wm-pz-nofoto { color: #6b6b6b; }
.wm-ci-del { color: #767676; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.wm-ci-del:hover { background: var(--panel); color: #b91c1c; }

/* Tarjeta: cantidad y botón + con la misma altura y forma (también en móvil) */
.wm-card-foot .wm-qty, .wm-card-foot .wm-cart-btn { height: 40px; }
.wm-card-foot .wm-cart-btn { width: 40px; border-radius: 30px; }
@media (max-width: 720px) { .wm-card-foot .wm-qty { width: 46px; height: 40px; } }

/* Carrito: campos con etiqueta visible, 16px (sin zoom en iOS), estado de error, último pedido, confirmación de vaciar */
.wm-cart-datos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }   /* minmax(0): los campos no se salen del panel (Raul 09-09: "pegados al borde derecho") */
.wm-cart-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wm-cart-campo .wm-cart-input { width: 100%; box-sizing: border-box; }
.wm-cart-campo > span { font-size: 12px; font-weight: 600; color: var(--muted-panel); }
.wm-cart-campo > span b { color: #b91c1c; font-weight: 700; }
.wm-cart .wm-cart-input { font-size: 16px; height: 44px; }
select.wm-cart-input { appearance: auto; -webkit-appearance: auto; padding-right: 8px; background: #fff; }
.wm-cart-input.invalido { border-color: #b91c1c; box-shadow: 0 0 0 2px rgba(185, 28, 28, .15); }
.wm-cart-ultimo { margin: 12px 18px 0; padding: 12px 14px; border-radius: 14px; background: #eef3ff; border: 1px solid #c7d7ff; display: grid; gap: 4px; }
.wm-ultimo-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); }
.wm-ultimo-cod { font-size: 22px; font-weight: 800; color: var(--title); letter-spacing: .02em; }
.wm-ultimo-meta { font-size: 12.5px; color: var(--muted-panel); }
.wm-ultimo-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.wm-ultimo-btn { height: 34px; padding: 0 12px; border-radius: 30px; border: 1px solid var(--accent); background: #fff; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; }
.wm-ultimo-btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.wm-cart-vaciar.confirmar { color: #b91c1c; font-weight: 700; }
.wm-cart-hint { color: var(--muted-panel); }
@media (max-width: 720px) {
    .wm-cart-datos { grid-template-columns: 1fr; }
    .wm-ok-datos { grid-template-columns: 1fr; }
}

/* Header móvil: el botón "Catálogo completo" conserva su texto (un icono suelto no se entiende); solo icono a ≤400px */
@media (max-width: 720px) {
    .wm-header .wm-cats-btn { width: auto; height: 40px; padding: 0 12px; font-size: 13px; gap: 6px; border-radius: 30px; }
}
@media (max-width: 400px) { .wm-header .wm-brand-name { font-size: 17px; } }   /* Raul 10-09: el nombre se ve siempre junto al logo */

/* Panel de categorías: nunca más alto que la ventana */

/* Hero en móvil: la diapositiva activa fluye (el banner crece con el texto, nada se recorta) */
@media (max-width: 720px) {
    .wm-hero-banner { min-height: 0; }
    .wm-hero .wm-hero-banner { min-height: 0; }
    .wm-slides { position: relative; top: auto; right: auto; bottom: auto; left: auto; }
    /* Raul 10-09: el slide + la fila de marcas llenan la primera pantalla y "¿Cómo comprar?" queda al deslizar
       (header 110 + aire 24 + marcas 86 + respiro 14 = 234). El texto va centrado en el alto disponible. */
    .wm-slide.on { position: relative; min-height: calc(100vh - 234px); min-height: calc(100svh - 234px); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; }
    .wm-slide { padding-bottom: 64px; }
}

/* Footer: escalón intermedio (5 columnas no caben entre 1025 y 1280) y tarjeta azul a todo el ancho cuando sobra */
@media (min-width: 1025px) and (max-width: 1280px) {
    .wm-footer-cols { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .wm-footer-cols .wm-news-card { grid-column: 1 / -1; }
}
@media (min-width: 721px) and (max-width: 1024px) { .wm-footer-cols .wm-news-card { grid-column: 1 / -1; } }
.wm-news-btn { height: auto; min-height: 44px; padding: 10px 22px; white-space: normal; text-align: center; }

/* Ficha: la foto no crece más allá de su resolución real */
@media (min-width: 1025px) { .wm-pz-layout { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); } }

/* Paginación numerada */
.wm-pag-num { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 30px; border: 1px solid var(--line-soft); font-weight: 600; font-size: 14px; color: var(--title); }
.wm-pag-num:hover { border-color: var(--accent); color: var(--accent); }
.wm-pag-num.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.wm-pag-dots { color: var(--muted); padding: 0 2px; }

/* ── Fallbacks para navegadores sin gap en flex (Chrome < 84) ni aspect-ratio (Chrome < 88) ── */
@supports not (gap: 1px) {
    .wm-header-inner > * + * { margin-left: 20px; }
    .wm-brand > * + * { margin-left: 10px; }
    .wm-card-foot > * + * { margin-left: 6px; }
    .wm-hero-banner-actions > * + * { margin-left: 10px; }
    .wm-ultimo-acts > * + * { margin-left: 8px; }
}
@supports not (aspect-ratio: 1 / 1) {
    .wm-card-img { height: 0; padding-bottom: 100%; }
    .wm-card-img img { top: 12px; right: 12px; bottom: 12px; left: 12px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); }
    .wm-card-img .wm-noimg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 12px; }
    .wm-pz-foto { height: 0; padding-bottom: 100%; }
    .wm-pz-foto img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 28px; }
}
/* Sugerencias del buscador con miniatura (Raul 09-09) */
.wm-sug { gap: 12px; }
.wm-sug-img { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; background: var(--panel); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.wm-sug-img img { width: 100%; height: 100%; object-fit: contain; }
.wm-sug-noimg { width: 16px; height: 16px; border: 2px solid #c9c9c9; border-radius: 50%; }
.wm-sug-txt { flex: 1 1 auto; }

/* ── Validación de diseño 09-09 ─────────────────────────────────────────── */
/* P-3 paginación: envuelve en móvil, nunca desborda */
.wm-paginacion { flex-wrap: wrap; gap: 8px; }
@media (max-width: 720px) { .wm-pag-btn { padding: 0 12px; } .wm-pag-num { min-width: 34px; height: 34px; padding: 0 6px; } }
/* P-5 hero móvil: las diapositivas se apilan en la misma celda → el banner mide siempre la más alta, sin saltos */
@media (max-width: 720px) {
    .wm-slides { display: grid; }
    .wm-slide, .wm-slide.on { position: relative; grid-area: 1 / 1; }
    .wm-slide:not(.on) { pointer-events: none; }
}
/* Pausa del carrusel (WCAG 2.2.2) */

/* Opción de filtro sin piezas con los filtros actuales: atenuada (el número ya dice 0) */
.wm-widget a.wm-cero { opacity: .45; }
.wm-widget a.wm-cero:hover { opacity: .8; }

/* ── Dos personas en el pedido (09-09): "la recibe otra persona" + quién paga ── */
.wm-cart-campo-full { grid-column: 1 / -1; }
.wm-cart-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); cursor: pointer; padding: 2px 0; }
.wm-cart-check input { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; flex-shrink: 0; }
.wm-cart-otra { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; background: var(--panel); border-radius: 14px; padding: 12px; box-sizing: border-box; min-width: 0; max-width: 100%; }
.wm-cart-otra .wm-cart-input { width: 100%; box-sizing: border-box; }
.wm-cart-paga { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--muted-panel); }
.wm-pill { position: relative; cursor: pointer; }
.wm-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wm-pill span { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 30px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink); transition: background .12s, color .12s, border-color .12s; }
.wm-pill input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.wm-pill input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.wm-ok-seg { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 30px; border: 1px solid var(--accent); color: var(--accent); font-weight: 600; font-size: 14px; }
.wm-ok-seg:hover { background: #eef3ff; }
@media (max-width: 480px) { .wm-cart-otra { grid-template-columns: 1fr; } }

/* ── Seguimiento de pedido (09-09) ── */
.wm-seg-form { display: grid; grid-template-columns: 1.1fr 1.5fr .9fr auto; gap: 10px; align-items: end; background: var(--panel); border-radius: 16px; padding: 16px; margin: 6px 0 18px; }
.wm-seg-form .wm-cart-input { height: 44px; font-size: 16px; background: #fff; }
.wm-seg-btn { height: 44px; }
.wm-seg-msg { margin: 0 0 16px; }
.wm-seg-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px; display: grid; gap: 18px; }
.wm-seg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wm-seg-lbl { display: block; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wm-seg-cod { font-size: 26px; font-weight: 800; letter-spacing: .04em; color: var(--title); }
.wm-seg-fecha { display: block; font-size: 13px; color: var(--muted); }
.wm-seg-estado { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 30px; font-weight: 700; font-size: 13px; background: #fff8ec; color: #92400e; }
.wm-seg-estado.e-por_facturar { background: #eef3ff; color: #1d4ed8; }
.wm-seg-estado.e-activa { background: #e6f7ec; color: #166534; }
.wm-seg-estado.e-entregado { background: #166534; color: #fff; }
.wm-seg-estado.cancelado { background: #fee2e2; color: #991b1b; }
.wm-seg-cancel { margin: 0; background: #fee2e2; color: #7f1d1d; border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.wm-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; position: relative; }
.wm-track li { position: relative; padding-top: 26px; }
.wm-track li::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 3px; background: var(--line); }
.wm-track li.hecho::before { background: var(--ok); }
.wm-track-dot { position: absolute; top: 3px; left: 50%; width: 15px; height: 15px; margin-left: -8px; border-radius: 50%; background: #fff; border: 3px solid var(--line); box-sizing: border-box; }
.wm-track li.hecho .wm-track-dot { background: var(--ok); border-color: var(--ok); }
.wm-track li.actual .wm-track-dot { box-shadow: 0 0 0 4px rgba(21, 128, 61, .18); }
.wm-track-txt { display: grid; gap: 2px; text-align: center; padding: 0 4px; }
.wm-track-txt strong { font-size: 14px; color: var(--muted); }
.wm-track li.hecho .wm-track-txt strong { color: var(--title); }
.wm-track li.actual .wm-track-txt strong { color: var(--ok); }
.wm-track-txt time { font-size: 12px; color: var(--ink); font-weight: 600; }
.wm-track-txt small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.wm-seg-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
.wm-seg-datos div { background: var(--panel); border-radius: 12px; padding: 10px 12px; }
.wm-seg-datos dt { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wm-seg-datos dd { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; color: var(--title); overflow-wrap: anywhere; }
.wm-seg-tel { font-weight: 500; color: var(--muted); font-size: 13px; }
.wm-seg-tabla-wrap { overflow-x: auto; }
.wm-seg-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.wm-seg-tabla th, .wm-seg-tabla td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.wm-seg-tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wm-seg-tabla .r { text-align: right; white-space: nowrap; }
.wm-seg-tabla tr.anulada td { color: var(--muted); text-decoration: line-through; }
.wm-seg-tabla tr.anulada em { text-decoration: none; font-style: normal; font-size: 12px; }
.wm-seg-tabla tfoot td { border-bottom: 0; font-size: 15px; padding-top: 12px; }
.wm-seg-acts { margin: 0; }
.wm-seg-nota { margin-top: 18px; }
@media (max-width: 720px) {
    .wm-seg-form { grid-template-columns: 1fr; }
    .wm-track { grid-template-columns: 1fr; gap: 0; }
    .wm-track li { padding: 0 0 18px 30px; }
    .wm-track li::before { top: 8px; bottom: -8px; left: 6px; right: auto; width: 3px; height: auto; }
    .wm-track li:last-child::before { display: none; }
    .wm-track-dot { left: 0; top: 2px; margin-left: 0; }
    .wm-track-txt { text-align: left; padding: 0; }
}

/* ── Botón flotante de WhatsApp (09-09): borde inferior derecho; en móvil sube para no tapar el botón de la lista ── */
.wm-wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 94; width: 56px; height: 56px; border-radius: 50%; background: var(--wa); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(37, 211, 102, .45); transition: transform .15s, box-shadow .15s; }
.wm-wa-fab:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(37, 211, 102, .55); color: #fff; }
.wm-wa-fab:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (max-width: 720px) { .wm-wa-fab { right: 14px; bottom: 84px; width: 50px; height: 50px; } body.wm-cart-abierto .wm-wa-fab { display: none; } }   /* móvil: a la derecha, encima del botón de la lista (Raul 10-09: "muévelo a donde estaba") */
@media print { .wm-wa-fab, .wm-cart-fab { display: none !important; } }

/* ── "¿Cómo comprar?": <details> — escritorio siempre abierto (sin clic), móvil acordeón ── */
.wm-pc { display: block; }
.wm-pc summary { display: flex; align-items: center; gap: 12px; list-style: none; cursor: default; }
.wm-pc summary::-webkit-details-marker { display: none; }
.wm-pc summary h3 { flex: 1; }
.wm-pc-chev { display: none; }
.wm-pc > p { margin-left: 46px; margin-top: 2px; }
@media (min-width: 721px) { .wm-pc summary { pointer-events: none; } }
@media (max-width: 720px) {
    .wm-pc summary { cursor: pointer; padding: 4px 0; }
    .wm-pc-chev { display: inline-block; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
    .wm-pc[open] .wm-pc-chev { transform: rotate(-135deg); }
    .wm-pc > p { margin: 0 0 6px 46px; }
}

/* ── Pie: columnas <details> (escritorio abiertas sin clic; móvil acordeón) + bloques centrados en móvil (Raul 10-09) ── */
.wm-foot-col summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: default; }
.wm-foot-col summary::-webkit-details-marker { display: none; }
.wm-foot-col summary .wm-pc-chev { display: none; }
@media (min-width: 721px) { .wm-foot-col summary { pointer-events: none; } }
@media (max-width: 720px) {
    .wm-footer-cols { gap: 0; padding-top: 30px; padding-bottom: 20px; }
    .wm-footer-brand { text-align: center; padding-bottom: 18px; }
    .wm-footer-brand .wm-brand-foot { justify-content: center; }
    .wm-footer-brand .wm-brand { display: inline-flex; }
    .wm-foot-col { border-top: 1px solid var(--line); }
    .wm-foot-col summary { cursor: pointer; padding: 14px 0; }
    .wm-foot-col summary h4 { margin: 0; }
    .wm-foot-col summary .wm-pc-chev { display: inline-block; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; margin-right: 6px; }
    .wm-foot-col[open] summary .wm-pc-chev { transform: rotate(-135deg); }
    .wm-foot-col ul { padding: 0 0 16px; }
    .wm-foot-col:last-of-type { border-bottom: 1px solid var(--line); margin-bottom: 20px; }
    .wm-footer-bottom-inner { flex-direction: column; justify-content: center; text-align: center; gap: 4px; }
    .wm-footer-bottom-inner > span { padding: 0; }
    .wm-footer-bottom-inner > span + span { border-left: 0; }   /* en móvil van en dos líneas, sin divisoria */
}

/* ── Selector de idioma ES / EN (Raul 10-09) ── */
.wm-lang { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; flex-shrink: 0; }
.wm-lang a { color: var(--muted); padding: 4px 2px; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s; }
.wm-lang a.on { color: var(--title); border-bottom-color: var(--accent); }
.wm-lang a:hover { color: var(--accent); }
@media (max-width: 720px) { .wm-lang { font-size: 12px; gap: 2px; } }
@media (max-width: 400px) { .wm-header .wm-cats-btn { width: 40px; padding: 0; font-size: 0; gap: 0; border-radius: 50%; } .wm-header .wm-cats-btn span { display: none; } }

/* ── Paquetes con descuento (Raul 10-09, estilo tarjeta Amazon): fondo de color, título grande, mosaico 2×2 de fotos en tiles blancos ── */
.wm-kits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wm-kit { --kit-bg: var(--accent); position: relative; background: var(--kit-bg); color: #fff; border-radius: 20px; padding: 22px 24px 20px; display: grid; grid-template-columns: minmax(0, 1fr) 236px; grid-template-rows: auto 1fr; gap: 12px 22px; min-height: 300px; overflow: hidden; }
.wm-kit::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 260px; height: 260px; border-radius: 50%; background: rgba(255, 255, 255, .08); pointer-events: none; }
.wm-kit.agotado { filter: saturate(.4); }
.wm-kit-pct { position: absolute; top: 16px; right: 16px; background: #fff; color: var(--kit-bg); font-weight: 800; font-size: 15px; padding: 6px 12px; border-radius: 30px; z-index: 2; }
.wm-kit-head { grid-column: 1; display: flex; flex-direction: column; gap: 6px; padding-right: 70px; }
.wm-kit-kicker { font-size: 12.5px; font-weight: 600; opacity: .9; }
.wm-kit-head h2 { font-size: 27px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.wm-kit-desc { font-size: 14px; line-height: 1.4; opacity: .92; }
.wm-kit-tiles { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; align-self: stretch; z-index: 1; }
.wm-kit-tile { background: #fff; border-radius: 14px; display: flex; align-items: center; justify-content: center; padding: 8px; min-height: 96px; animation: wm-kit-float 3.6s ease-in-out infinite; }
.wm-kit-tile img { width: 100%; height: 100%; max-height: 110px; object-fit: contain; }
.wm-kit-tile em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.25; }
.wm-kit-tile strong { font-size: 26px; font-weight: 800; color: var(--kit-bg); }
.wm-kit-tile img.wm-kit-cambio { animation: wm-kit-fade .6s ease; }
@keyframes wm-kit-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wm-kit-fade { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.wm-kit-foot { grid-column: 1; align-self: end; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wm-kit-precio { display: flex; flex-direction: column; line-height: 1.15; }
.wm-kit-precio s { opacity: .75; font-size: 13px; }
.wm-kit-precio-now { display: flex; align-items: baseline; gap: 6px; }
.wm-kit-precio strong { font-size: 28px; font-weight: 800; color: #fff; }
.wm-kit-precio .wm-usd { color: rgba(255, 255, 255, .85); }
.wm-kit-precio small { font-size: 12px; font-weight: 600; opacity: .9; }
.wm-kit-add { height: 44px; background: #fff; color: var(--kit-bg); }
.wm-kit-add:hover { background: #fff; color: var(--kit-bg); filter: brightness(.95); }
.wm-kit-nodisp { font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .2); border-radius: 30px; padding: 10px 14px; }
@media (max-width: 1024px) { .wm-kits { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
    .wm-kit { grid-template-columns: 1fr; grid-template-rows: auto auto auto; padding: 18px 16px 16px; min-height: 0; }
    .wm-kit-tiles { grid-column: 1; grid-row: 2; }
    .wm-kit-tile { min-height: 84px; }
    .wm-kit-head { padding-right: 60px; }
    .wm-kit-head h2 { font-size: 22px; }
    .wm-kit-foot { grid-row: 3; }
}
@media (prefers-reduced-motion: reduce) { .wm-kit-tile { animation: none; } }
.wm-kit-tile .wm-kit-mas { font-size: 30px; }

/* Descuento por paquete dentro de la lista (vista previa; el servidor lo aplica en la prefactura) */
.wm-cart-desc { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ok); background: #e6f7ec; border-radius: 10px; padding: 8px 12px; }
.wm-cart-desc strong { white-space: nowrap; }
.wm-kit-cuenta { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: rgba(255, 255, 255, .18); border-radius: 30px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; }
.wm-kit-cuenta b { font-variant-numeric: tabular-nums; font-size: 14px; }
.wm-kit-cuenta.fin { background: #fff; color: #b91c1c; }

/* Ficha del paquete (paquete.php) y enlace "Ver todo lo que incluye" en la tarjeta */
.wm-kit-ver { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 700; color: #fff; text-decoration: underline; text-underline-offset: 3px; opacity: .95; }
.wm-kit-ver:hover { opacity: 1; }
a.wm-kit-tiles { text-decoration: none; }
.wm-kit-page { grid-template-columns: 1fr; margin-bottom: 26px; min-height: 0; }
.wm-kit-page h1 { font-size: 30px; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: #fff; }
.wm-kit-page .wm-kit-foot { grid-row: auto; }
.wm-pq-tabla-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 6px 14px; margin-bottom: 30px; }
.wm-pq-tabla td, .wm-pq-tabla th { vertical-align: middle; }
.wm-pq-foto img, .wm-pq-nofoto { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: var(--panel); display: block; }
.wm-pq-tabla tr.agotada td { opacity: .6; }
.wm-pq-tabla tfoot td { border-bottom: 0; padding-top: 8px; padding-bottom: 4px; color: var(--muted); }
.wm-pq-tabla tfoot .wm-pq-total td { font-size: 16px; color: var(--title); padding-top: 10px; padding-bottom: 12px; border-top: 1px solid var(--line); }
.wm-pq-tabla b.no { color: #b91c1c; }
@media (max-width: 720px) { .wm-kit-page h1 { font-size: 24px; } }

/* ── Cantidad con flechas (Raul 11-09): píldora [input][▲▼] con el MISMO ancho total que antes (cabe en móvil) ── */
.wm-qty-wrap { display: inline-flex; align-items: stretch; height: 38px; border: 1px solid var(--line-soft); border-radius: 30px; background: #fff; overflow: hidden; }
.wm-qty-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.wm-qty-wrap .wm-qty, .wm-card-foot .wm-qty, .wm-pz-op-add .wm-qty { width: 34px; height: 100%; min-width: 0; border: 0; border-radius: 0; padding: 0 0 0 4px; background: transparent; }
.wm-qty-wrap .wm-qty:focus { outline: none; border: 0; }
.wm-qty-arrows { display: flex; flex-direction: column; width: 18px; border-left: 1px solid var(--line-soft); }
.wm-qty-arrows button { flex: 1 1 50%; border: 0; padding: 0; margin: 0; background: #f6f6f6; color: #555; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.wm-qty-arrows button + button { border-top: 1px solid var(--line-soft); }
.wm-qty-arrows button:hover { background: var(--accent); color: #fff; }
.wm-qty-arrows button:active { background: #1d4ed8; color: #fff; }
.wm-card-foot .wm-qty-wrap { height: 40px; }
.wm-pz-op-add .wm-qty-wrap { height: 44px; }
.wm-pz-op-add .wm-qty-wrap .wm-qty { width: 44px; font-size: 15px; }
.wm-pz-op-add .wm-qty-arrows { width: 24px; }
.wm-pz-op-add .wm-qty-arrows svg { width: 12px; height: 12px; }
@media (max-width: 720px) {
    .wm-card-foot .wm-qty-wrap { height: 40px; }
    .wm-card-foot .wm-qty-wrap .wm-qty { width: 28px; font-size: 13px; padding-left: 2px; }
    .wm-qty-arrows { width: 16px; }
}

/* Raul 11-09: campo de cantidad un poco más ancho (flechas con más espacio) y botón de carrito en la tarjeta */
.wm-qty-wrap .wm-qty, .wm-card-foot .wm-qty { width: 38px; }
.wm-qty-arrows { width: 24px; }
.wm-qty-arrows svg { width: 11px; height: 11px; }
.wm-pz-op-add .wm-qty-wrap .wm-qty { width: 48px; }
.wm-pz-op-add .wm-qty-arrows { width: 28px; }
.wm-card-foot .wm-cart-btn { width: 42px; }
@media (max-width: 720px) {
    .wm-card-foot .wm-qty-wrap .wm-qty { width: 30px; }
    .wm-qty-arrows { width: 20px; }
    .wm-card-foot .wm-cart-btn { width: 38px; }
}

/* ── Lista de piezas: el panel entero hace scroll (Raul 11-09: en móvil no se veían las piezas, el pie con el formulario
   dejaba la zona de ítems a 0px de alto). Antes solo la zona de ítems era desplazable. ── */
.wm-cart { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wm-cart .wm-cart-items { flex: 0 0 auto; overflow: visible; max-height: none; }
.wm-cart .wm-cart-foot { flex: 0 0 auto; }
.wm-cart .wm-cart-panel-head { flex: 0 0 auto; position: sticky; top: 0; z-index: 2; background: #fff; }

/* ── Cantidad en móvil: flechas GRANDES en horizontal [−][n][+] (Raul 11-09: "se ven pequeños, difícil de usar") ── */
@media (max-width: 720px) {
    .wm-card-foot { flex-wrap: wrap; row-gap: 8px; }
    .wm-card-foot .wm-precio-stack { flex: 1 0 100%; }
    .wm-card-foot .wm-qty-wrap { margin-left: 0; height: 40px; }
    .wm-card-foot .wm-qty-arrows { display: contents; }
    .wm-card-foot .wm-qty-arrows button { width: 30px; height: 40px; flex: 0 0 30px; border: 0; border-top: 0; background: #f6f6f6; font: inherit; font-size: 18px; font-weight: 600; color: var(--ink); }
    .wm-card-foot .wm-qty-arrows button + button { border-top: 0; }
    .wm-card-foot .wm-qty-arrows svg { display: none; }              /* en horizontal se entiende mejor − y + que ▼ ▲ */
    .wm-card-foot .wm-qty-down::before { content: '−'; }
    .wm-card-foot .wm-qty-up::before { content: '+'; }
    .wm-card-foot .wm-qty-down { order: 0; border-right: 1px solid var(--line-soft); }
    .wm-card-foot .wm-qty-wrap .wm-qty { order: 1; width: 30px; padding: 0; font-size: 14px; }
    .wm-card-foot .wm-qty-up { order: 2; border-left: 1px solid var(--line-soft); }
    .wm-card-foot .wm-cart-btn { width: 40px; height: 40px; margin-left: auto; flex: 0 0 40px; }
    /* ficha: mismo esquema horizontal */
    .wm-pz-op-add .wm-qty-arrows { display: contents; }
    .wm-pz-op-add .wm-qty-arrows button { width: 40px; height: 44px; flex: 0 0 40px; border: 0; background: #f6f6f6; font: inherit; font-size: 20px; font-weight: 600; color: var(--ink); }
    .wm-pz-op-add .wm-qty-arrows svg { display: none; }
    .wm-pz-op-add .wm-qty-down::before { content: '−'; }
    .wm-pz-op-add .wm-qty-up::before { content: '+'; }
    .wm-pz-op-add .wm-qty-down { order: 0; border-right: 1px solid var(--line-soft); }
    .wm-pz-op-add .wm-qty-wrap .wm-qty { order: 1; width: 40px; padding: 0; }
    .wm-pz-op-add .wm-qty-up { order: 2; border-left: 1px solid var(--line-soft); }
}

/* Teléfono con prefijo de país (Raul 13-09): select + número como un solo campo */
.wm-tel { display: flex; gap: 6px; min-width: 0; }
.wm-tel .wm-tel-pre { flex: 0 0 150px; width: 150px; padding-left: 10px; padding-right: 26px; appearance: auto; -webkit-appearance: auto; background: #fff; font-size: 14px; }
.wm-tel .wm-tel-num { flex: 1 1 auto; min-width: 0; }
@media (max-width: 400px) { .wm-tel .wm-tel-pre { flex-basis: 128px; width: 128px; font-size: 13px; } }

/* ── Código de promoción en la lista de piezas (Raul 25-09) ─────────────────────────────── */
.wm-promo { display: flex; flex-direction: column; gap: 6px; }
.wm-promo-row { display: flex; gap: 8px; }
.wm-promo-row .wm-cart-input { flex: 1 1 auto; min-width: 0; text-transform: uppercase; }
.wm-promo-btn { flex: 0 0 auto; padding: 0 16px; height: 42px; border-radius: 35px; font-size: 14px; }
.wm-promo-ok { position: relative; padding-right: 36px; }
.wm-promo-quitar { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: var(--muted); cursor: pointer; font-size: 13px; }
.wm-promo-quitar:hover { background: rgba(0, 0, 0, .12); color: #111; }
.wm-promo-msg { margin: 0; font-size: 12.5px; line-height: 1.4; }
.wm-promo-msg.warn { color: #b45309; }
.wm-promo-msg.ok { color: var(--muted); }


/* Ayuda bajo el campo de identificación (28-09) */
.wm-cart-ayuda { margin: -4px 0 6px; font-size: 12px; line-height: 1.45; color: var(--muted-panel, #6b6b6b); }