body {
    font-family: 'Inter', sans-serif;
}

/* Custom range slider styling */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: #e2e8f0;
    outline: none;
}

.dark input[type="range"] {
    background: #334155;
}

/* Second slider (max) should have transparent track so it doesn't cover the min thumb */
input[type="range"]#price-max-slider {
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.4);
    transition: transform 0.15s;
    position: relative;
    z-index: 2;
}

input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(37, 99, 235, 0.4);
    transition: transform 0.15s;
    position: relative;
    z-index: 2;
}

/* Firefox: make max slider track transparent */
input[type="range"]#price-max-slider::-moz-range-track {
    background: transparent;
}

input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.2);
}

/* Fade-in animation for product cards */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card-animate {
    animation: fadeInUp 0.3s ease both;
}

/* Skeleton loading */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 0.75rem;
}

.dark .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}

/* Active category filter pill */
.cat-btn.active {
    background: linear-gradient(to right, #2563eb, #4f46e5) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3) !important;
    font-weight: 700 !important;
}

.dark .cat-btn.active {
    background: linear-gradient(to right, #3b82f6, #6366f1) !important;
}

/* Badge de conteo dentro de categoria activa: visible sobre fondo gradiente */
.cat-btn.active > span:last-child {
    background: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
}

/* Hide scrollbar for modern horizontal scrolling */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    body {
        padding-bottom: 4.5rem;
    }

    .whatsapp-float {
        display: none;
    }
}

/* ==========================================================================
   COLLECTION HEADER — "Blueprint Deck" (zona "Todos los Productos")
   Reemplaza la banda oscura del hero. Estilos en CSS crudo (no build:css):
   colores de marca del landing (#0bc5f3/#2563eb/#7c3aed/#1473dc/#26a2d0).
   Doc: doc-oficial/catalogo.md
   ========================================================================== */

/* Banda Blueprint: dot-grid técnico + glow de esquina + sheen + frame hairline */
.blueprint-band {
    position: relative;
    overflow: hidden;
    background-color: #f8fafc;
    border-top: 1px solid rgba(20, 115, 220, 0.18);
    border-bottom: 1px solid rgba(20, 115, 220, 0.12);
    /* Padding en CSS real (no Tailwind): pt-9/pb-7 estaban purgadas del compilado.
       pt despeja el navbar fixed (64/80px) + aire; pb da respiro a la toolbar. */
    padding-top: 6rem;
    padding-bottom: 2rem;
}
@media (min-width: 768px) {
    .blueprint-band { padding-top: 7rem; }
}
@media (min-width: 1024px) {
    .blueprint-band { padding-bottom: 2.75rem; }
}
.dark .blueprint-band {
    background-color: #0a0f1e;
    border-top-color: rgba(11, 197, 243, 0.20);
    border-bottom-color: rgba(11, 197, 243, 0.12);
}
.blueprint-band::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(circle, rgba(20, 115, 220, 0.15) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
}
.dark .blueprint-band::before {
    background-image: radial-gradient(circle, rgba(11, 197, 243, 0.13) 1.2px, transparent 1.2px);
}
.blueprint-band::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 55% 130% at 88% -25%, rgba(38, 162, 208, 0.18) 0%, transparent 60%);
}
.dark .blueprint-band::after {
    background: radial-gradient(ellipse 55% 130% at 88% -25%, rgba(11, 197, 243, 0.20) 0%, transparent 60%);
}
/* Capa de barrido de luz (sheen) — elemento aparte para animar sin tapar contenido */
.blueprint-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(11, 197, 243, 0.10) 47%, rgba(124, 58, 237, 0.08) 53%, transparent 66%);
    background-size: 260% 100%;
    animation: bpSheen 9s linear infinite;
    mix-blend-mode: plus-lighter;
}
@keyframes bpSheen {
    0%   { background-position: 130% 0; }
    100% { background-position: -30% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .blueprint-sheen { animation: none; }
}
/* El contenido del header va sobre las capas decorativas */
.blueprint-content { position: relative; z-index: 1; }

/* Eyebrow mono (etiqueta técnica) */
.bp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
    border: 1px solid rgba(37, 99, 235, 0.20);
}
.dark .bp-eyebrow {
    color: #0bc5f3;
    background: rgba(11, 197, 243, 0.10);
    border-color: rgba(11, 197, 243, 0.25);
}
.bp-eyebrow .dot {
    width: 6px; height: 6px; border-radius: 9999px;
    background: #0bc5f3; box-shadow: 0 0 8px #0bc5f3;
}

/* Gradiente de texto de marca (la palabra clave del título) */
.grad-brand {
    background: linear-gradient(135deg, #1473dc 0%, #26a2d0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Lectura mono del contador de stock */
.bp-readout { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bp-readout .num { color: #2563eb; }
.dark .bp-readout .num { color: #0bc5f3; }

/* ===== Toolbar deck (panel glass que agrupa los filtros) ===== */
.filter-deck {
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.80);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.70);
    box-shadow: 0 18px 40px -12px rgba(37, 99, 235, 0.10);
}
.dark .filter-deck {
    background: rgba(15, 23, 42, 0.55);
    border-color: rgba(255, 255, 255, 0.10);
}

/* ===== Category chip (selector de categoría — lenguaje desktop) =====
   Markup: <button class="cat-btn cat-chip" data-cat="..."> (cat-btn = contrato JS).
   Estado activo: lo togglea catalogo.js con .active. */
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem 0.375rem 0.375rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.80);
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
    flex-shrink: 0;
}
.dark .cat-chip {
    border-color: rgba(255, 255, 255, 0.10);
    background: rgba(30, 41, 59, 0.60);
    color: #cbd5e1;
}
.cat-chip:hover { border-color: rgba(38, 162, 208, 0.55); color: #2563eb; }
.dark .cat-chip:hover { color: #0bc5f3; }
.cat-chip__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.5rem;
    color: #fff;
    background: linear-gradient(135deg, #3c52bb, #26a2d0);
    box-shadow: 0 2px 6px rgba(38, 162, 208, 0.30);
    flex-shrink: 0;
}
.cat-chip__count {
    font-size: 0.625rem;
    font-weight: 700;
    padding: 0.125rem 0.375rem;
    border-radius: 9999px;
    background: #f1f5f9;
    color: #64748b;
}
.dark .cat-chip__count { background: #334155; color: #cbd5e1; }

/* Estado activo del chip (gana al .cat-btn.active genérico por especificidad) */
.cat-btn.cat-chip.active {
    background: linear-gradient(135deg, #3c52bb, #26a2d0) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 6px 14px -4px rgba(38, 162, 208, 0.45) !important;
}
.cat-btn.cat-chip.active .cat-chip__ico { background: rgba(255, 255, 255, 0.20); box-shadow: none; }
.cat-btn.cat-chip.active .cat-chip__count { background: rgba(255, 255, 255, 0.25) !important; color: #fff !important; }

/* ===== Botones de filtro de la toolbar (Precio / Stock) ===== */
.filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    background: rgba(255, 255, 255, 0.80);
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
}
.dark .filter-btn { border-color: rgba(255, 255, 255, 0.10); background: rgba(30, 41, 59, 0.60); color: #cbd5e1; }
.filter-btn:hover { border-color: rgba(38, 162, 208, 0.55); }
.filter-btn.active { border-color: rgba(38, 162, 208, 0.60); color: #2563eb; }
.dark .filter-btn.active { color: #0bc5f3; }

/* Checkbox del filtro de stock */
.stock-box {
    width: 1rem; height: 1rem; border-radius: 5px;
    border: 2px solid #cbd5e1; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.dark .stock-box { border-color: #64748b; }
.filter-btn.active .stock-box {
    background: linear-gradient(135deg, #3c52bb, #26a2d0);
    border-color: transparent;
}
.filter-btn.active .stock-box svg { display: block; }
.stock-box svg { display: none; }

/* ===== Filter panel (precio + stock) =====
   Mobile: bloque colapsable in-page (sobre la grilla). Desktop: popover anclado. */
.filter-panel {
    display: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.dark .filter-panel {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.10);
}
.filter-panel.open { display: block; }

@media (min-width: 1024px) {
    /* Desktop: popover anclado (catalogo.js setea top/right). Fixed, fuera de flujo. */
    .filter-panel {
        display: block;
        position: fixed;
        z-index: 60;
        width: 20rem;
        margin-bottom: 0;
        box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition: opacity 0.18s, transform 0.18s;
    }
    .filter-panel.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
}

/* Chevron del botón "Filtros" mobile: rota cuando el panel está abierto */
.filter-chevron { transition: transform 0.2s; }
#filter-toggle-mobile[aria-expanded="true"] .filter-chevron { transform: rotate(180deg); }

/* Dual-range overlap dentro del panel: ambos sliders apilados, el track solo
   captura el thumb (no el riel) para que se puedan arrastrar los dos extremos. */
.filter-panel .range-wrap { position: relative; height: 0.5rem; width: 100%; }
.filter-panel .range-wrap input[type="range"] {
    position: absolute; left: 0; top: 0; width: 100%; margin: 0;
    pointer-events: none; background: transparent;
}
.filter-panel .range-wrap input[type="range"]::-webkit-slider-thumb { pointer-events: auto; }
.filter-panel .range-wrap input[type="range"]::-moz-range-thumb { pointer-events: auto; }
/* El riel visible lo pinta el slider min (debajo); el max va con track transparente. */
.filter-panel .range-wrap input#price-min-slider { background: #e2e8f0; }
.dark .filter-panel .range-wrap input#price-min-slider { background: #334155; }

/* Filtro botón a ancho completo (stock dentro del panel mobile) */
.filter-btn.w-full { width: 100%; justify-content: flex-start; }