/*
 * Catálogo Vectiss — Design System (RFC 1.3A: consolidación de arquitectura visual).
 *
 * Arquitectura del archivo (de lo abstracto a lo concreto):
 *   1. Tokens primitivos    — escala cruda (space/radius/font/shadow/ease/dur).
 *   2. Tokens semánticos     — roles (ink/line/surface/elevation/control-height/field-pad).
 *   3. Tokens del componente — contrato Elementor (--vx-catalogo-*), inyectados en {{WRAPPER}}.
 *   4. Patrones reutilizables — campo y esqueleto de botón compartidos por varios bloques.
 *   5. Bloques del catálogo   — estructura, filtros, toolbar, tarjeta, paginación, vacío, aviso.
 *   6. Responsive.
 *   7. Accesibilidad.
 *
 * Reglas de oro:
 *   · Todo bajo .vectiss-catalogo → no afecta a Shortcodes::tarjeta() fuera (destacados/home).
 *   · Cada propiedad estilable consume var(--vx-catalogo-…, <token semántico>): Elementro puede
 *     sobrescribir; el token semántico es el valor premium por defecto. Sin literales sueltos.
 *   · El color PRIMARIO de marca (var(--vectiss-primary)) no se toca: vive fuera de los neutros.
 *   · Variantes futuras (dark/luxury/dealer/minimal) = una clase que redefine SOLO tokens.
 */

/* ════════════════════════ 1. TOKENS PRIMITIVOS ════════════════════════ */
:root {
    /* Espaciado */
    --vx-space-xs: .35rem;
    --vx-space-sm: .6rem;
    --vx-space-md: 1rem;
    --vx-space-lg: 1.5rem;
    --vx-space-xl: 2.25rem;

    /* Radios */
    --vx-radius-sm: 8px;
    --vx-radius-md: 12px;
    --vx-radius-lg: 16px;
    --vx-radius-pill: 999px;

    /* Escala tipográfica (6 pasos; reemplaza ~10 tamaños casi idénticos) */
    --vx-font-xs: .75rem;    /* etiquetas, badges, caption "Desde", "/ día" */
    --vx-font-sm: .85rem;    /* ubicación, segment control */
    --vx-font-md: .95rem;    /* campos, botones, paginación, aviso */
    --vx-font-lg: 1.08rem;   /* título de tarjeta */
    --vx-font-xl: 1.15rem;   /* título del estado vacío */
    --vx-font-2xl: 1.55rem;  /* precio */

    /* Sombras crudas */
    --vx-shadow-sm: 0 1px 3px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
    --vx-shadow-md: 0 6px 16px rgba(16, 24, 40, .08);
    --vx-shadow-lg: 0 14px 30px -12px rgba(16, 24, 40, .14);

    /* Movimiento */
    --vx-ease: cubic-bezier(.2, .7, .2, 1);
    --vx-dur: .18s;
}

/* ════════════════════════ 2. TOKENS SEMÁNTICOS ════════════════════════ */
:root {
    /* Tinta (texto) — 3 niveles, sustituyen ~5 grises sueltos */
    --vx-ink: #101828;        /* texto principal: título, precio, paginación */
    --vx-ink-muted: #667085;  /* secundario: ubicación, etiquetas, captions */
    --vx-ink-subtle: #98a2b3; /* terciario: iconos, placeholder */

    /* Líneas (bordes) — 2 niveles */
    --vx-line: #dcdfe3;       /* bordes de control y panel */
    --vx-line-soft: #eceef1;  /* borde de tarjeta (más suave) */

    /* Superficie */
    --vx-surface: #fff;

    /* Elevación (decisión única; las variantes la redefinen) */
    --vx-elevation-card: var(--vx-shadow-sm);     /* reposo / superficie elevada leve */
    --vx-elevation-floating: var(--vx-shadow-lg); /* hover / overlay (reservado a 1.3B/1.4) */

    /* Métricas de control (altura y padding de campos/botones) */
    /* Altura de control unificada con la marca (--vectiss-input-alto / --vectiss-btn-alto = 44px)
       para que campos/botones/selects del catálogo midan igual que los de Home y Ficha. */
    --vx-control-height: 44px;
    --vx-field-pad: .55rem .75rem;
}

/*
 * ════════════════════ 3. TOKENS DEL COMPONENTE (contrato Elementor) ════════════════════
 * Los tokens --vx-catalogo-{target}[-{estado}]-{prop} NO se declaran aquí: Elementor (RFC 1.1)
 * los inyecta en {{WRAPPER}} cuando el usuario edita un control. El CSS los consume como
 * var(--vx-catalogo-…, <token semántico>): si Elementor no los define, gana el valor por defecto
 * del Design System. Cambiar estos nombres rompería el adaptador → son intocables.
 */

/* ════════════════════════ 4. PATRONES REUTILIZABLES ════════════════════════ */

/* 4.1 Campo (select / input / selector de orden) — chrome unificado */
.vectiss-catalogo .vectiss-filtro select,
.vectiss-catalogo .vectiss-filtro input,
.vectiss-catalogo .vectiss-orden {
    font-family: var(--vx-catalogo-campo-font, inherit);
    font-size: var(--vx-catalogo-campo-size, var(--vx-font-md));
    color: var(--vx-catalogo-campo-color, var(--vectiss-text, var(--vx-ink)));
    background: var(--vx-catalogo-campo-bg, var(--vx-surface));
    border: 1px solid var(--vx-catalogo-campo-border-color, var(--vectiss-border, var(--vx-line)));
    border-radius: var(--vx-catalogo-campo-radius, var(--vx-radius-sm));
    padding: var(--vx-catalogo-campo-padding, var(--vx-field-pad));
    height: var(--vx-catalogo-campo-height, var(--vx-control-height));
    box-shadow: var(--vx-catalogo-campo-shadow-x, 0) var(--vx-catalogo-campo-shadow-y, 1px) var(--vx-catalogo-campo-shadow-blur, 2px) var(--vx-catalogo-campo-shadow-spread, 0) var(--vx-catalogo-campo-shadow-color, rgba(16, 24, 40, .04));
    transition: border-color var(--vx-dur) var(--vx-ease), box-shadow var(--vx-dur) var(--vx-ease);
}

.vectiss-catalogo .vectiss-filtro input::placeholder {
    color: var(--vx-catalogo-campo-placeholder-color, var(--vx-ink-subtle));
}

/* Los selects no deben verse nativos: chevron propio + sin flecha del SO. */
.vectiss-catalogo .vectiss-filtro select,
.vectiss-catalogo .vectiss-orden {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 2.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8rem center;
}

.vectiss-catalogo .vectiss-filtro select:hover,
.vectiss-catalogo .vectiss-filtro input:hover,
.vectiss-catalogo .vectiss-orden:hover {
    border-color: var(--vx-catalogo-campo-hover-border-color, var(--vectiss-primary, #2563eb));
}

.vectiss-catalogo .vectiss-filtro select:focus,
.vectiss-catalogo .vectiss-filtro input:focus,
.vectiss-catalogo .vectiss-orden:focus {
    outline: none;
    border-color: var(--vx-catalogo-campo-focus-border-color, var(--vectiss-primary, #2563eb));
    box-shadow: 0 0 0 3px var(--vx-catalogo-campo-focus-ring, color-mix(in srgb, var(--vectiss-primary, #2563eb) 18%, transparent));
}

/* 4.2 Botón — esqueleto de alineación compartido (estructura no tokenizada). */
.vectiss-catalogo .vectiss-filtro-btn,
.vectiss-catalogo .vectiss-filtro-limpiar,
.vectiss-catalogo .vectiss-vacio-accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ════════════════════════ 5. BLOQUES DEL CATÁLOGO ════════════════════════ */

/* 5.1 Estructura */
.vectiss-catalogo {
    background: var(--vx-catalogo-wrapper-bg, transparent);
    padding: var(--vx-catalogo-wrapper-padding, 0);
}

/* RFC 2.1-A — Layout preparado para Sidebar (desktop) / Drawer (tablet+móvil). Móvil/tablet: una columna
   (aside apilado sobre main). Desktop ≥1024: dos columnas con flex (si no hay aside, main ocupa todo). El
   diseño definitivo del sidebar (sticky/secciones) y el drawer pertenecen a fases B/C. */
.vectiss-catalogo .vectiss-catalogo-main { min-width: 0; }
/* RFC 2.1-B — offset del sticky respetando la barra de admin de WordPress (fija 32px en ≥1024). */
body.admin-bar .vectiss-catalogo { --sidebar-top: calc(32px + var(--vx-space-md)); }

@media (min-width: 1024px) {
    .vectiss-catalogo .vectiss-catalogo-layout {
        display: flex;
        align-items: flex-start;
        gap: 2.5rem;
    }
    /* Sidebar STICKY (solo CSS): permanece visible al hacer scroll; scroll interno para listas largas. */
    .vectiss-catalogo .vectiss-catalogo-sidebar {
        flex: 0 0 clamp(300px, 23%, 340px);
        position: sticky;
        top: var(--sidebar-top, var(--vx-space-md));
        max-height: calc(100vh - var(--sidebar-top, var(--vx-space-md)) - var(--vx-space-md));
        overflow-y: auto;
        /* Scroll premium (PARTE 6) */
        scrollbar-width: thin;
        scrollbar-color: var(--vx-line) transparent;
    }
    .vectiss-catalogo .vectiss-catalogo-sidebar::-webkit-scrollbar { width: 4px; }
    .vectiss-catalogo .vectiss-catalogo-sidebar::-webkit-scrollbar-thumb {
        background: var(--vx-line);
        border-radius: 4px;
    }
    .vectiss-catalogo .vectiss-catalogo-sidebar::-webkit-scrollbar-track { background: transparent; }
    .vectiss-catalogo .vectiss-catalogo-main { flex: 1 1 auto; min-width: 0; }
    /* Los filtros se apilan en el sidebar (la base los pone multi-columna). Solo layout. */
    .vectiss-catalogo .vectiss-catalogo-sidebar .vectiss-filtros { grid-template-columns: 1fr; }
}

/* RFC 2.1-B — Sidebar (visual en todos los tamaños; sticky solo en desktop, arriba). Cabecera por
   CSS-content (sin tocar el HTML de 2.1-A) + Limpiar separado y botones a ancho completo. */
.vectiss-catalogo .vectiss-catalogo-sidebar::before {
    content: "Filtros";
    display: block;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--vx-ink);
    padding-bottom: var(--vx-space-md);
    border-bottom: 1px solid var(--vx-line);
    margin-bottom: var(--vx-space-md);
}
.vectiss-catalogo .vectiss-catalogo-sidebar .vectiss-filtro-acciones {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vx-space-sm);
    margin-top: var(--vx-space-sm);
    padding-top: var(--vx-space-md);
    border-top: 1px solid var(--vx-line);
}

/* ════ RFC 2.1-C — Drawer móvil/tablet (progressive enhancement: SOLO con .vectiss-js). Desktop INTACTO. ════ */
/* Chrome del drawer oculto por defecto y SIEMPRE en desktop (≥1024). */
.vectiss-catalogo .vectiss-drawer-overlay,
.vectiss-catalogo .vectiss-drawer-header,
.vectiss-catalogo .vectiss-toolbar-filtros { display: none; }

@media (max-width: 1023px) {
    /* Botón "Filtros" (abre el drawer). */
    .vectiss-catalogo.vectiss-js .vectiss-toolbar-filtros {
        display: inline-flex;
        align-items: center;
        gap: var(--vx-space-xs);
        height: var(--vx-control-height);
        min-height: 44px;
        padding: 0 1rem;
        font-size: var(--vx-font-md);
        font-weight: 600;
        color: var(--vx-ink);
        background: var(--vx-surface);
        border: 1px solid var(--vx-line);
        border-radius: var(--vx-radius-sm);
        cursor: pointer;
    }
    /* Header FIJO del drawer (sustituye al ::before del sidebar de 2.1-B). */
    .vectiss-catalogo.vectiss-js .vectiss-catalogo-sidebar::before { display: none; }
    .vectiss-catalogo.vectiss-js .vectiss-drawer-header {
        display: flex;
        align-items: center;
        gap: var(--vx-space-sm);
        flex: 0 0 auto;
        padding: var(--vx-space-md);
        padding-top: calc(var(--vx-space-md) + env(safe-area-inset-top));
        border-bottom: 1px solid var(--vx-line);
    }
    .vectiss-catalogo.vectiss-js .vectiss-drawer-titulo { font-size: var(--vx-font-md); font-weight: 700; color: var(--vx-ink); }
    .vectiss-catalogo.vectiss-js .vectiss-drawer-cerrar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--vx-ink-muted);
        font-size: 1.6rem;
        line-height: 1;
        cursor: pointer;
    }
    /* Panel off-canvas: NUNCA display:none; solo transform/opacity (sin reflow del contenido). */
    .vectiss-catalogo.vectiss-js .vectiss-catalogo-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 90%;
        max-width: 380px;
        display: flex;
        flex-direction: column;
        background: var(--vx-surface);
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform var(--vx-dur) var(--vx-ease);
        overflow: hidden;
    }
    .vectiss-catalogo.vectiss-js.vectiss-drawer-abierto .vectiss-catalogo-sidebar { transform: translateX(0); box-shadow: var(--vx-shadow-lg); }
    /* CONTENIDO con scroll independiente; FOOTER (acciones) sticky abajo. */
    .vectiss-catalogo.vectiss-js .vectiss-catalogo-sidebar .vectiss-filtros {
        flex: 1 1 auto;
        overflow-y: auto;
        margin: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: var(--vx-space-md);
    }
    .vectiss-catalogo.vectiss-js .vectiss-catalogo-sidebar .vectiss-filtro-acciones {
        position: sticky;
        bottom: 0;
        flex-direction: row;
        gap: var(--vx-space-sm);
        margin: var(--vx-space-md) calc(-1 * var(--vx-space-md)) 0;
        padding: var(--vx-space-md);
        padding-bottom: calc(var(--vx-space-md) + env(safe-area-inset-bottom));
        background: var(--vx-surface);
        border-top: 1px solid var(--vx-line);
    }
    .vectiss-catalogo.vectiss-js .vectiss-catalogo-sidebar .vectiss-filtro-btn,
    .vectiss-catalogo.vectiss-js .vectiss-catalogo-sidebar .vectiss-filtro-limpiar { flex: 1; }
    /* Overlay oscuro detrás. */
    .vectiss-catalogo.vectiss-js .vectiss-drawer-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .5);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--vx-dur) var(--vx-ease);
        z-index: 1000;
    }
    .vectiss-catalogo.vectiss-js.vectiss-drawer-abierto .vectiss-drawer-overlay { opacity: 1; pointer-events: auto; }
}

/* COMÚN a las 4 vistas: solo fondo y gaps de la rejilla. La DENSIDAD (grid-template-columns) la define
   CADA vista (RFC 2.1-E) → ninguna hereda la de otra. */
.vectiss-catalogo .vectiss-grid {
    background: var(--vx-catalogo-grid-bg, transparent);
    row-gap: var(--vx-catalogo-grid-gap-row, var(--vx-space-lg));
    column-gap: var(--vx-catalogo-grid-gap-column, var(--vx-space-lg));
}

/* 5.2 Panel de filtros */
.vectiss-catalogo .vectiss-filtros {
    background: var(--vx-catalogo-filtros-bg, var(--vectiss-bg, var(--vx-surface)));
    border: 1px solid var(--vx-catalogo-filtros-border-color, var(--vectiss-border, var(--vx-line)));
    border-radius: var(--vx-catalogo-filtros-radius, var(--vx-radius-lg));
    padding: var(--vx-catalogo-filtros-padding, var(--vx-space-lg));
    margin: var(--vx-catalogo-filtros-margin, 0 0 var(--vx-space-lg));
    box-shadow: var(--vx-catalogo-filtros-shadow-x, 0) var(--vx-catalogo-filtros-shadow-y, 1px) var(--vx-catalogo-filtros-shadow-blur, 3px) var(--vx-catalogo-filtros-shadow-spread, 0) var(--vx-catalogo-filtros-shadow-color, rgba(16, 24, 40, .06));
    gap: var(--vx-space-md);
    align-items: end;
}

.vectiss-catalogo .vectiss-filtro label {
    font-family: var(--vx-catalogo-etiqueta-filtro-font, inherit);
    font-size: var(--vx-catalogo-etiqueta-filtro-size, var(--vx-font-xs));
    font-weight: var(--vx-catalogo-etiqueta-filtro-weight, 600);
    text-transform: var(--vx-catalogo-etiqueta-filtro-transform, uppercase);
    letter-spacing: var(--vx-catalogo-etiqueta-filtro-letter-spacing, .04em);
    line-height: var(--vx-catalogo-etiqueta-filtro-line-height, 1.4);
    color: var(--vx-catalogo-etiqueta-filtro-color, var(--vectiss-text-2, var(--vx-ink-muted)));
    margin: var(--vx-catalogo-etiqueta-filtro-margin, 0 0 var(--vx-space-xs));
}

/* Botón Filtrar — acción primaria; misma altura que los campos para alinear la fila. */
.vectiss-catalogo .vectiss-filtro-btn {
    font-family: var(--vx-catalogo-boton-filtrar-font, inherit);
    font-size: var(--vx-catalogo-boton-filtrar-size, var(--vx-font-md));
    font-weight: var(--vx-catalogo-boton-filtrar-weight, 600);
    color: var(--vx-catalogo-boton-filtrar-color, #fff);
    background: var(--vx-catalogo-boton-filtrar-bg, var(--vectiss-btn-primary, var(--vectiss-primary, #2563eb)));
    border: var(--vx-catalogo-boton-filtrar-border-width, 0) solid var(--vx-catalogo-boton-filtrar-border-color, transparent);
    border-radius: var(--vx-catalogo-boton-filtrar-radius, var(--vx-radius-sm));
    padding: var(--vx-catalogo-boton-filtrar-padding, 0 1.35rem);
    height: var(--vx-catalogo-boton-filtrar-height, var(--vx-control-height));
    box-shadow: var(--vx-catalogo-boton-filtrar-shadow-x, 0) var(--vx-catalogo-boton-filtrar-shadow-y, 1px) var(--vx-catalogo-boton-filtrar-shadow-blur, 2px) var(--vx-catalogo-boton-filtrar-shadow-spread, 0) var(--vx-catalogo-boton-filtrar-shadow-color, rgba(16, 24, 40, .10));
    transition: background var(--vx-dur) var(--vx-ease), box-shadow var(--vx-dur) var(--vx-ease), transform var(--vx-dur) var(--vx-ease);
}

.vectiss-catalogo .vectiss-filtro-btn:hover {
    background: var(--vx-catalogo-boton-filtrar-hover-bg, color-mix(in srgb, var(--vectiss-primary, #2563eb) 88%, #000));
    transform: translateY(-1px);
}

.vectiss-catalogo .vectiss-filtro-btn:active {
    background: var(--vx-catalogo-boton-filtrar-active-bg, color-mix(in srgb, var(--vectiss-primary, #2563eb) 78%, #000));
    transform: translateY(0);
}

/* Limpiar — acción secundaria (ghost) del mismo sistema, alineada con el primario. */
.vectiss-catalogo .vectiss-filtro-limpiar {
    height: var(--vx-control-height);
    padding: 0 1rem;
    font-size: var(--vx-font-md);
    font-weight: 600;
    color: var(--vectiss-text-2, var(--vx-ink-muted));
    background: transparent;
    border: 1px solid var(--vectiss-border, var(--vx-line));
    border-radius: var(--vx-radius-sm);
    transition: background var(--vx-dur) var(--vx-ease), color var(--vx-dur) var(--vx-ease), border-color var(--vx-dur) var(--vx-ease);
}
.vectiss-catalogo .vectiss-filtro-limpiar:hover {
    color: var(--vectiss-text, var(--vx-ink));
    background: color-mix(in srgb, var(--vectiss-text, var(--vx-ink)) 5%, transparent);
    border-color: color-mix(in srgb, var(--vectiss-text, var(--vx-ink)) 22%, transparent);
}

/* Drawer de filtros: por defecto (desktop/tablet) el resumen se oculta y el panel se ve siempre,
   aunque <details> esté cerrado. En móvil (§6) el resumen aparece y el panel colapsa. */
.vectiss-catalogo .vectiss-filtros-resumen { display: none; }
@media (min-width: 769px) {
    .vectiss-catalogo .vectiss-filtros-drawer > .vectiss-filtros { display: grid !important; }
}

/* 5.3 Toolbar (RFC 2.1-A): ÚNICA fila — contador (izq.) · chips (centro) · orden (der.). Móvil/tablet:
   apilado (contador ↓ chips ↓ orden); desktop ≥1024 pasa a fila (§6). */
.vectiss-catalogo .vectiss-toolbar {
    background: var(--vx-catalogo-toolbar-bg, transparent);
    border: var(--vx-catalogo-toolbar-border-width, 0) solid var(--vx-catalogo-toolbar-border-color, transparent);
    border-radius: var(--vx-catalogo-toolbar-radius, 0);
    padding: var(--vx-catalogo-toolbar-padding, 0);
    box-shadow: var(--vx-catalogo-toolbar-shadow-x, 0) var(--vx-catalogo-toolbar-shadow-y, 0) var(--vx-catalogo-toolbar-shadow-blur, 0) var(--vx-catalogo-toolbar-shadow-spread, 0) var(--vx-catalogo-toolbar-shadow-color, transparent);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--vx-catalogo-toolbar-gap-row, var(--vx-space-sm)) var(--vx-catalogo-toolbar-gap-column, var(--vx-space-sm));
}

/* Chips de filtros activos — estilo Booking (PARTE 4): misma altura que los controles (44px), radio
   pill, hover elegante. Todo editable por Elementor (namespace --vx-catalogo-chip-*). */
.vectiss-catalogo .vectiss-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--vx-catalogo-chips-gap-row, var(--vx-space-sm)) var(--vx-catalogo-chips-gap-column, var(--vx-space-sm));
}
.vectiss-catalogo .vectiss-chip {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    font-family: var(--vx-catalogo-chip-font, inherit);
    font-size: var(--vx-catalogo-chip-size, var(--vx-font-sm));
    font-weight: var(--vx-catalogo-chip-weight, 600);
    text-transform: var(--vx-catalogo-chip-transform, none);
    letter-spacing: var(--vx-catalogo-chip-letter-spacing, normal);
    line-height: var(--vx-catalogo-chip-line-height, 1.2);
    width: var(--vx-catalogo-chip-width, auto);
    min-width: var(--vx-catalogo-chip-min-width, 0);
    max-width: var(--vx-catalogo-chip-max-width, none);
    height: var(--vx-catalogo-chip-height, var(--vx-control-height));
    color: var(--vx-catalogo-chip-color, var(--vx-ink));
    background: var(--vx-catalogo-chip-bg, var(--vx-surface));
    border: var(--vx-catalogo-chip-border-width, 1px) solid var(--vx-catalogo-chip-border-color, var(--vx-line));
    border-radius: var(--vx-catalogo-chip-radius, var(--vx-radius-pill));
    padding: var(--vx-catalogo-chip-padding, 0 .4rem 0 .9rem);
    box-shadow: var(--vx-catalogo-chip-shadow-x, 0) var(--vx-catalogo-chip-shadow-y, 1px) var(--vx-catalogo-chip-shadow-blur, 3px) var(--vx-catalogo-chip-shadow-spread, 0) var(--vx-catalogo-chip-shadow-color, rgba(16, 24, 40, .06));
    transition: border-color var(--vx-dur) var(--vx-ease), box-shadow var(--vx-dur) var(--vx-ease), background var(--vx-dur) var(--vx-ease), color var(--vx-dur) var(--vx-ease);
}
.vectiss-catalogo .vectiss-chip:hover {
    color: var(--vx-catalogo-chip-hover-color, var(--vx-ink));
    background: var(--vx-catalogo-chip-hover-bg, var(--vx-surface));
    border-color: var(--vx-catalogo-chip-hover-border-color, color-mix(in srgb, var(--vx-ink) 22%, transparent));
    box-shadow: var(--vx-catalogo-chip-hover-shadow-x, 0) var(--vx-catalogo-chip-hover-shadow-y, 6px) var(--vx-catalogo-chip-hover-shadow-blur, 16px) var(--vx-catalogo-chip-hover-shadow-spread, 0) var(--vx-catalogo-chip-hover-shadow-color, rgba(16, 24, 40, .08));
}
.vectiss-catalogo .vectiss-chip-quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--vx-catalogo-chip-icono-width, 1.3rem);
    height: var(--vx-catalogo-chip-icono-height, 1.3rem);
    border-radius: 50%;
    color: var(--vx-catalogo-chip-icono-color, var(--vx-ink-muted));
    background: var(--vx-catalogo-chip-icono-bg, transparent);
    text-decoration: none;
    font-size: 1rem;
    line-height: 1;
    transition: background var(--vx-dur) var(--vx-ease), color var(--vx-dur) var(--vx-ease);
}
.vectiss-catalogo .vectiss-chip-quitar:hover {
    background: var(--vx-catalogo-chip-icono-hover-bg, color-mix(in srgb, var(--vx-ink) 10%, transparent));
    color: var(--vx-catalogo-chip-icono-hover-color, var(--vx-ink));
}
/* × perfectamente centrado: neutraliza el line-height del glifo. */
.vectiss-catalogo .vectiss-chip-quitar > span { display: block; margin-top: -1px; }

/* Contador de resultados: PROTAGONISTA (jerarquía; mismo texto/lógica). Editable por Elementor. */
.vectiss-catalogo .vectiss-contador {
    font-family: var(--vx-catalogo-contador-font, inherit);
    font-size: var(--vx-catalogo-contador-size, var(--vx-font-lg));
    font-weight: var(--vx-catalogo-contador-weight, 700);
    text-transform: var(--vx-catalogo-contador-transform, none);
    letter-spacing: var(--vx-catalogo-contador-letter-spacing, normal);
    line-height: var(--vx-catalogo-contador-line-height, 1.4);
    color: var(--vx-catalogo-contador-color, var(--vx-ink));
    padding: var(--vx-catalogo-contador-padding, 0);
}

.vectiss-catalogo .vectiss-vistas {
    background: color-mix(in srgb, var(--vectiss-text, var(--vx-ink)) 5%, transparent);
    border-radius: var(--vx-radius-pill);
    padding: 3px;
    gap: 0;
}

.vectiss-catalogo .vectiss-vistas button {
    font-family: var(--vx-catalogo-segmento-font, inherit);
    font-size: var(--vx-catalogo-segmento-size, var(--vx-font-sm));
    font-weight: var(--vx-catalogo-segmento-weight, 600);
    color: var(--vx-catalogo-segmento-color, var(--vectiss-text-2, var(--vx-ink-muted)));
    background: var(--vx-catalogo-segmento-bg, transparent);
    border: 0;
    border-radius: var(--vx-radius-pill);
    padding: var(--vx-catalogo-segmento-padding, .4rem 1rem);
    cursor: pointer;
    transition: background var(--vx-dur) var(--vx-ease), color var(--vx-dur) var(--vx-ease);
}

.vectiss-catalogo .vectiss-vistas button:hover {
    color: var(--vx-catalogo-segmento-hover-color, var(--vectiss-text, var(--vx-ink)));
    background: var(--vx-catalogo-segmento-hover-bg, color-mix(in srgb, var(--vectiss-text, var(--vx-ink)) 6%, transparent));
}

.vectiss-catalogo .vectiss-vistas button.activo {
    color: var(--vx-catalogo-segmento-active-color, var(--vectiss-text, var(--vx-ink)));
    background: var(--vx-catalogo-segmento-active-bg, var(--vx-surface));
    box-shadow: var(--vx-elevation-card);
}

/* El selector de orden es parte del patrón "campo" (§4.1); este bloque le da su PROPIO namespace
   (--vx-catalogo-orden-*) encadenado a campo como fallback, para que tipografía/relleno/radio/alto/
   borde sean editables desde Elementor sin que el patrón compartido los pise. Cero regresión: cada
   fallback = valor efectivo actual. */
.vectiss-catalogo .vectiss-orden {
    font-family: var(--vx-catalogo-orden-font, var(--vx-catalogo-campo-font, inherit));
    font-size: var(--vx-catalogo-orden-size, var(--vx-catalogo-campo-size, var(--vx-font-md)));
    font-weight: var(--vx-catalogo-orden-weight, 400);
    text-transform: var(--vx-catalogo-orden-transform, none);
    letter-spacing: var(--vx-catalogo-orden-letter-spacing, normal);
    line-height: var(--vx-catalogo-orden-line-height, normal);
    color: var(--vx-catalogo-orden-color, var(--vectiss-text, var(--vx-ink)));
    background-color: var(--vx-catalogo-orden-bg, var(--vx-surface));
    border-width: var(--vx-catalogo-orden-border-width, 1px);
    border-color: var(--vx-catalogo-orden-border-color, var(--vectiss-border, var(--vx-line)));
    border-radius: var(--vx-catalogo-orden-radius, var(--vx-catalogo-campo-radius, var(--vx-radius-sm)));
    padding: var(--vx-catalogo-orden-padding, var(--vx-catalogo-campo-padding, var(--vx-field-pad)));
    padding-right: 2.1rem;   /* espacio reservado para el chevron propio (§4.1) */
    height: var(--vx-catalogo-orden-height, var(--vx-catalogo-campo-height, var(--vx-control-height)));
    width: var(--vx-catalogo-orden-width, auto);
    min-width: var(--vx-catalogo-orden-min-width, 0);
    max-width: var(--vx-catalogo-orden-max-width, none);
}

/* 5.4 Tarjeta */
.vectiss-catalogo .vectiss-card {
    position: relative;
    background: var(--vx-catalogo-card-bg, var(--vectiss-card, var(--vx-surface)));
    border: 1px solid var(--vx-catalogo-card-border-color, var(--vectiss-card-border, var(--vx-line-soft)));
    border-radius: var(--vx-catalogo-card-radius, var(--vx-radius-lg));
    padding: var(--vx-catalogo-card-padding, 0);
    overflow: hidden;
    /* RFC 2.1-D — "card premium": ligera elevación en reposo (sobre claro; en Dark la define el borde),
       hover elevado, active "pulsado". Jerarquía clara reposo < hover > active. */
    box-shadow: var(--vx-catalogo-card-shadow-x, 0) var(--vx-catalogo-card-shadow-y, 1px) var(--vx-catalogo-card-shadow-blur, 3px) var(--vx-catalogo-card-shadow-spread, 0) var(--vx-catalogo-card-shadow-color, rgba(16, 24, 40, .07));
    transition: box-shadow var(--vx-dur) var(--vx-ease), transform var(--vx-dur) var(--vx-ease), border-color var(--vx-dur) var(--vx-ease);
}

/* PARTE 6 — hover sobrio: -2px (antes -4px), sombra ligeramente mayor que en reposo. */
.vectiss-catalogo .vectiss-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vx-catalogo-card-hover-shadow-x, 0) var(--vx-catalogo-card-hover-shadow-y, 14px) var(--vx-catalogo-card-hover-shadow-blur, 30px) var(--vx-catalogo-card-hover-shadow-spread, -14px) var(--vx-catalogo-card-hover-shadow-color, rgba(16, 24, 40, .16));
    border-color: var(--vx-catalogo-card-hover-border-color, transparent);
}
/* Active: "pulsado" (menos elevación que el hover) → feedback táctil/click. */
.vectiss-catalogo .vectiss-card:active { transform: translateY(0); }

/* Imagen protagonista. */
.vectiss-catalogo .vectiss-card img {
    width: 100%;
    aspect-ratio: var(--vx-catalogo-imagen-aspect, 16 / 10);
    object-fit: cover;
    display: block;
    border: var(--vx-catalogo-imagen-border-width, 0) solid var(--vx-catalogo-imagen-border-color, transparent);
    border-radius: var(--vx-catalogo-imagen-radius, 0);
    margin: var(--vx-catalogo-imagen-margin, 0);
    /* PARTE 7 — transición unificada (var(--vx-dur) = 180ms, misma curva que el resto). */
    transition: transform var(--vx-dur) var(--vx-ease);
}

/* PARTE 6 — zoom sutil máximo 1.02. */
.vectiss-catalogo .vectiss-card:hover img { transform: scale(1.02); }

/* Media: ancla el overlay de badges (solo existe cuando hay imagen → ver tarjeta()). */
.vectiss-catalogo .vectiss-card-media { position: relative; }
/* Badges en overlay: esquina superior izquierda, separación por tokens. Sin gradiente: los chips son
   opacos y legibles por sí mismos. Es hermano de <img>, así que el zoom de la imagen no los desplaza. */
.vectiss-catalogo .vectiss-card-badges {
    position: absolute;
    top: var(--vx-space-sm);
    left: var(--vx-space-sm);
    z-index: 2;
}
.vectiss-catalogo .vectiss-card-media .vectiss-badges { margin: 0; }

/* Ritmo vertical por márgenes inferiores (gap:0). RFC 2.1-D: padding inferior más ajustado → menos altura. */
.vectiss-catalogo .vectiss-card-body { padding: var(--vx-space-md); gap: 0; }

/* Título. */
.vectiss-catalogo .vectiss-card h3 {
    font-family: var(--vx-catalogo-titulo-font, inherit);
    font-size: var(--vx-catalogo-titulo-size, var(--vx-font-lg));
    font-weight: var(--vx-catalogo-titulo-weight, 700);
    text-transform: var(--vx-catalogo-titulo-transform, none);
    letter-spacing: var(--vx-catalogo-titulo-letter-spacing, -.015em);
    line-height: var(--vx-catalogo-titulo-line-height, 1.3);
    color: var(--vx-catalogo-titulo-color, var(--vectiss-text, var(--vx-ink)));
    margin: var(--vx-catalogo-titulo-margin, 0 0 var(--vx-space-xs));
}

/* Ubicación. */
.vectiss-catalogo .vectiss-card-sucursal {
    display: flex;
    align-items: center;
    gap: var(--vx-space-xs);
    font-family: var(--vx-catalogo-ubicacion-font, inherit);
    font-size: var(--vx-catalogo-ubicacion-size, var(--vx-font-sm));
    font-weight: var(--vx-catalogo-ubicacion-weight, 500);
    line-height: var(--vx-catalogo-ubicacion-line-height, 1.3);
    color: var(--vx-catalogo-ubicacion-color, var(--vectiss-text-2, var(--vx-ink-muted)));
    margin: var(--vx-catalogo-ubicacion-margin, 0 0 var(--vx-space-sm));
}

/* Iconos: acompañan al texto, no compiten → tono neutro (el color se reserva para la acción). */
.vectiss-catalogo .vectiss-mini-specs svg,
.vectiss-catalogo .vectiss-pin {
    width: var(--vx-catalogo-icono-width, 1rem);
    height: var(--vx-catalogo-icono-height, 1rem);
    color: var(--vx-catalogo-icono-color, var(--vectiss-text-3, var(--vx-ink-subtle)));
    flex: none;
}
.vectiss-catalogo .vectiss-mini-specs { gap: var(--vx-space-md); margin: 0 0 var(--vx-space-sm); }
.vectiss-catalogo .vectiss-mini-specs span { display: inline-flex; align-items: center; gap: var(--vx-catalogo-icono-spacing, var(--vx-space-xs)); }

/* Precio: PUNTO FOCAL (RFC 2.1-D) — mayor peso (2xl) y más separación respecto al resto. Por tokens. */
.vectiss-catalogo .vectiss-precio {
    font-family: var(--vx-catalogo-precio-font, inherit);
    font-size: var(--vx-catalogo-precio-size, var(--vx-font-2xl));
    font-weight: var(--vx-catalogo-precio-weight, 800);
    line-height: 1.05;
    color: var(--vx-catalogo-precio-color, var(--vectiss-text, var(--vx-ink)));
    margin: var(--vx-catalogo-precio-margin, var(--vx-space-sm) 0 var(--vx-space-md));
}
.vectiss-catalogo .vectiss-precio span { font-size: var(--vx-font-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--vectiss-text-2, var(--vx-ink-muted)); display: block; }
.vectiss-catalogo .vectiss-precio small { font-size: var(--vx-font-xs); font-weight: 500; color: var(--vectiss-text-2, var(--vx-ink-muted)); }

/* Badges como chips. RFC 2.1-D: padding/peso/separación afinados; misma posición y lógica. */
.vectiss-catalogo .vectiss-badges { gap: var(--vx-space-xs); margin: 0 0 var(--vx-space-sm); }
.vectiss-catalogo .vectiss-badge {
    font-family: var(--vx-catalogo-badges-font, inherit);
    font-size: var(--vx-catalogo-badges-size, var(--vx-font-xs));
    font-weight: var(--vx-catalogo-badges-weight, 700);
    letter-spacing: .02em;
    /* Chip genérico neutro: el color de marca se reserva al CTA. Los modificadores semánticos (abajo) sí llevan color. */
    color: var(--vx-catalogo-badges-color, var(--vx-ink));
    background: var(--vx-catalogo-badges-bg, color-mix(in srgb, var(--vx-ink) 6%, var(--vx-surface)));
    border: var(--vx-catalogo-badges-border-width, 0) solid var(--vx-catalogo-badges-border-color, transparent);
    border-radius: var(--vx-catalogo-badges-radius, var(--vx-radius-pill));
    padding: var(--vx-catalogo-badges-padding, .3rem .65rem);
    box-shadow: var(--vx-catalogo-badges-shadow-x, 0) var(--vx-catalogo-badges-shadow-y, 0) var(--vx-catalogo-badges-shadow-blur, 0) var(--vx-catalogo-badges-shadow-spread, 0) var(--vx-catalogo-badges-shadow-color, transparent);
}
/* Badges sobre la imagen (overlay): sombra sutil para separarlos de fotos con cualquier fondo. */
.vectiss-catalogo .vectiss-card-media .vectiss-badge { box-shadow: 0 1px 3px rgba(16, 24, 40, .22); }
/* Modificadores semánticos (se re-declaran para preservar la cascada). */
.vectiss-catalogo .vectiss-badge--premium { background: var(--vectiss-badge-premium); color: #fff; }
.vectiss-catalogo .vectiss-badge--oferta { background: var(--vectiss-badge-oferta); color: #fff; }
.vectiss-catalogo .vectiss-badge--nuevo { background: var(--vectiss-badge-nuevo); color: #fff; }
.vectiss-catalogo .vectiss-badge--destacado { background: color-mix(in srgb, var(--vectiss-accent) 18%, transparent); color: var(--vectiss-accent); }

/* CTA — acción principal de la tarjeta. RFC 2.1-D: patrón comercial SÓLIDO (más presencia, invita al clic).
   Por tokens → cada preset redefine el color; el Dark conserva su tratamiento propio (override de preset). */
.vectiss-catalogo .vectiss-card-cta {
    display: block;
    text-align: center;
    margin-top: auto;
    font-family: var(--vx-catalogo-boton-font, inherit);
    font-size: var(--vx-catalogo-boton-size, var(--vx-font-md));
    font-weight: var(--vx-catalogo-boton-weight, 700);
    color: var(--vx-catalogo-boton-color, var(--vectiss-btn-text, #fff));
    background: var(--vx-catalogo-boton-bg, var(--vectiss-btn-primary, var(--vectiss-primary, #2563eb)));
    border: var(--vx-catalogo-boton-border-width, 0) solid var(--vx-catalogo-boton-border-color, transparent);
    border-radius: var(--vx-catalogo-boton-radius, var(--vx-radius-sm));
    padding: var(--vx-catalogo-boton-padding, .85rem 1rem);
    box-shadow: var(--vx-catalogo-boton-shadow-x, 0) var(--vx-catalogo-boton-shadow-y, 0) var(--vx-catalogo-boton-shadow-blur, 0) var(--vx-catalogo-boton-shadow-spread, 0) var(--vx-catalogo-boton-shadow-color, transparent);
    transition: background var(--vx-dur) var(--vx-ease), color var(--vx-dur) var(--vx-ease), box-shadow var(--vx-dur) var(--vx-ease);
}
.vectiss-catalogo .vectiss-card:hover .vectiss-card-cta {
    color: var(--vx-catalogo-boton-hover-color, #fff);
    background: var(--vx-catalogo-boton-hover-bg, color-mix(in srgb, var(--vectiss-primary, #2563eb) 88%, #000));
}

/* 5.5 Paginación */
.vectiss-catalogo .vectiss-paginacion { gap: var(--vx-space-xs); margin-top: var(--vx-space-xl); }
.vectiss-catalogo .vectiss-paginacion a {
    font-family: var(--vx-catalogo-paginacion-font, inherit);
    font-size: var(--vx-catalogo-paginacion-size, var(--vx-font-md));
    font-weight: var(--vx-catalogo-paginacion-weight, 600);
    color: var(--vx-catalogo-paginacion-color, var(--vectiss-text, var(--vx-ink)));
    background: var(--vx-catalogo-paginacion-bg, var(--vx-surface));
    border: 1px solid var(--vx-catalogo-paginacion-border-color, var(--vectiss-border, var(--vx-line)));
    border-radius: var(--vx-catalogo-paginacion-radius, var(--vx-radius-sm));
    padding: var(--vx-catalogo-paginacion-padding, .45rem .8rem);
    min-width: 2.4rem;
    text-align: center;
    transition: background var(--vx-dur) var(--vx-ease), color var(--vx-dur) var(--vx-ease), border-color var(--vx-dur) var(--vx-ease);
}
.vectiss-catalogo .vectiss-paginacion a:hover {
    color: var(--vx-catalogo-paginacion-hover-color, var(--vectiss-primary, #2563eb));
    background: var(--vx-catalogo-paginacion-hover-bg, color-mix(in srgb, var(--vectiss-primary, #2563eb) 8%, var(--vx-surface)));
    border-color: var(--vx-catalogo-paginacion-hover-border-color, var(--vectiss-primary, #2563eb));
}
.vectiss-catalogo .vectiss-paginacion a.activo {
    color: var(--vx-catalogo-paginacion-active-color, #fff);
    background: var(--vx-catalogo-paginacion-active-bg, var(--vectiss-primary, #2563eb));
    border-color: var(--vx-catalogo-paginacion-active-border-color, var(--vectiss-primary, #2563eb));
}

/* 5.6 Estado vacío — premium (icono en marco + título + descripción + dos acciones). */
.vectiss-catalogo .vectiss-grid .vectiss-vacio { grid-column: 1 / -1; }
.vectiss-catalogo .vectiss-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--vx-catalogo-estado-vacio-gap, var(--vx-space-sm));
    padding: var(--vx-catalogo-estado-vacio-padding, calc(var(--vx-space-xl) + var(--vx-space-md)) var(--vx-space-md));
    color: var(--vx-catalogo-estado-vacio-color, var(--vectiss-text-2, var(--vx-ink-muted)));
}
/* Marco redondeado suave alrededor del icono → aire Airbnb, sin colores nuevos (tinte del primario). */
.vectiss-catalogo .vectiss-vacio-icono-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: var(--vx-space-xs);
    border-radius: 50%;
    background: color-mix(in srgb, var(--vectiss-primary, #2563eb) 8%, transparent);
    color: var(--vectiss-primary, #2563eb);
}
.vectiss-catalogo .vectiss-vacio-icono { width: 2rem; height: 2rem; }
.vectiss-catalogo .vectiss-vacio-titulo {
    font-family: var(--vx-catalogo-estado-vacio-font, inherit);
    font-size: var(--vx-catalogo-estado-vacio-size, var(--vx-font-xl));
    font-weight: var(--vx-catalogo-estado-vacio-weight, 700);
    letter-spacing: -.015em;
    color: var(--vectiss-text, var(--vx-ink));
    margin: 0;
}
.vectiss-catalogo .vectiss-vacio-desc { max-width: 28rem; margin: 0; line-height: 1.5; }
/* Dos acciones lado a lado (envuelven en móvil). */
.vectiss-catalogo .vectiss-vacio-acciones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--vx-space-sm);
    margin-top: var(--vx-space-sm);
}
.vectiss-catalogo .vectiss-vacio-accion {
    height: var(--vx-control-height);
    font-size: var(--vx-font-md);
    font-weight: 600;
    color: var(--vectiss-btn-text, #fff);
    background: var(--vectiss-btn-primary, var(--vectiss-primary, #2563eb));
    border: 1px solid transparent;
    border-radius: var(--vx-radius-sm);
    padding: 0 1.35rem;
    transition: background var(--vx-dur) var(--vx-ease), color var(--vx-dur) var(--vx-ease), border-color var(--vx-dur) var(--vx-ease);
}
.vectiss-catalogo .vectiss-vacio-accion:hover { background: color-mix(in srgb, var(--vectiss-primary, #2563eb) 88%, #000); }
/* Secundaria (ghost): mismo sistema, sin relleno de color. */
.vectiss-catalogo .vectiss-vacio-accion--ghost {
    color: var(--vectiss-text-2, var(--vx-ink-muted));
    background: transparent;
    border-color: var(--vectiss-border, var(--vx-line));
}
.vectiss-catalogo .vectiss-vacio-accion--ghost:hover {
    color: var(--vectiss-text, var(--vx-ink));
    background: color-mix(in srgb, var(--vx-ink) 5%, transparent);
    border-color: color-mix(in srgb, var(--vx-ink) 22%, transparent);
}

/* 5.7 Aviso */
.vectiss-catalogo .vectiss-aviso {
    font-family: var(--vx-catalogo-aviso-font, inherit);
    font-size: var(--vx-catalogo-aviso-size, var(--vx-font-md));
    background: var(--vx-catalogo-aviso-bg, color-mix(in srgb, var(--vectiss-error, #d92d20) 8%, var(--vectiss-bg, var(--vx-surface))));
    color: var(--vx-catalogo-aviso-color, var(--vectiss-text, var(--vx-ink)));
    border-left-color: var(--vx-catalogo-aviso-border-color, var(--vectiss-error, #d92d20));
    border-radius: var(--vx-radius-md);
}

/* ════════════════════════ 6. RESPONSIVE (reorganiza, no encoge) ════════════════════════ */
/* La densidad responsive de la rejilla la define CADA vista (§ Vistas), no esta base común. */

/* Tablet: equilibrio propio (no es desktop encogido). Filtros (en el aside a ancho completo) a 3 columnas. */
@media (min-width: 769px) and (max-width: 1024px) {
    .vectiss-catalogo .vectiss-filtros { grid-template-columns: repeat(3, 1fr); }
}

/* Toolbar en FILA a partir de desktop: contador (izq.) · chips (centro, crece) · orden (der., auto-margin). */
@media (min-width: 1024px) {
    .vectiss-catalogo .vectiss-toolbar {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--vx-space-md);
        /* PARTE 3 — Sticky: la barra acompaña el scroll. Offset consciente de la admin bar de WP
           (--sidebar-top = 32px + gap cuando hay admin bar; si no, solo el gap). z-index por debajo
           del drawer (1000) para no taparlo. Fondo translúcido con blur → no oculta el listado detrás. */
        position: sticky;
        top: var(--sidebar-top, var(--vx-space-md));
        z-index: 20;
        /* Tokens de Elementor ganan también en desktop; fallback = aspecto sticky actual. */
        padding: var(--vx-catalogo-toolbar-padding, var(--vx-space-sm) 0);
        margin-bottom: var(--vx-space-md);
        background: var(--vx-catalogo-toolbar-bg, color-mix(in srgb, var(--vectiss-bg, var(--vx-surface)) 85%, transparent));
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border-bottom: var(--vx-catalogo-toolbar-border-width, 1px) solid var(--vx-catalogo-toolbar-border-color, var(--vx-line-soft));
    }
    .vectiss-catalogo .vectiss-toolbar .vectiss-chips { flex: 1 1 auto; justify-content: center; }
    .vectiss-catalogo .vectiss-toolbar .vectiss-orden { margin-left: auto; }
}

@media (max-width: 768px) {
    /* Drawer: el resumen "Filtros" se muestra y el panel colapsa (cerrado por defecto). */
    .vectiss-catalogo .vectiss-filtros-resumen {
        display: flex;
        align-items: center;
        justify-content: space-between;
        list-style: none;
        cursor: pointer;
        height: var(--vx-control-height);
        padding: 0 1rem;
        margin: 0 0 var(--vx-space-md);
        font-size: var(--vx-font-md);
        font-weight: 600;
        color: var(--vx-ink);
        background: var(--vx-surface);
        border: 1px solid var(--vx-line);
        border-radius: var(--vx-radius-sm);
    }
    .vectiss-catalogo .vectiss-filtros-resumen::-webkit-details-marker { display: none; }
    .vectiss-catalogo .vectiss-filtros-resumen::after {
        content: "";
        width: .55rem;
        height: .55rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--vx-dur) var(--vx-ease);
    }
    .vectiss-catalogo .vectiss-filtros-drawer[open] .vectiss-filtros-resumen::after { transform: rotate(-135deg); }
    /* Filtros apilados a ancho completo. */
    .vectiss-catalogo .vectiss-filtros { grid-template-columns: 1fr; padding: var(--vx-space-md); }
    .vectiss-catalogo .vectiss-filtro select,
    .vectiss-catalogo .vectiss-filtro input { width: 100%; }
    /* Áreas táctiles cómodas (≥44px) en campos y controles. */
    .vectiss-catalogo .vectiss-filtro select,
    .vectiss-catalogo .vectiss-filtro input,
    .vectiss-catalogo .vectiss-orden,
    .vectiss-catalogo .vectiss-filtro-btn,
    .vectiss-catalogo .vectiss-filtro-limpiar { min-height: 44px; }
    /* Fila de acciones: Filtrar y Limpiar comparten el ancho. */
    .vectiss-catalogo .vectiss-filtro-btn,
    .vectiss-catalogo .vectiss-filtro-limpiar { flex: 1; }
    /* La toolbar ya es columna por defecto (contador ↓ chips ↓ orden). */
    .vectiss-catalogo .vectiss-paginacion a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ════════════════════════ 7. ACCESIBILIDAD ════════════════════════ */
.vectiss-catalogo .vectiss-vistas button:focus-visible,
.vectiss-catalogo .vectiss-paginacion a:focus-visible,
.vectiss-catalogo .vectiss-filtro-btn:focus-visible,
.vectiss-catalogo .vectiss-filtro-limpiar:focus-visible,
.vectiss-catalogo .vectiss-vacio-accion:focus-visible,
.vectiss-catalogo .vectiss-chip-quitar:focus-visible,
.vectiss-catalogo .vectiss-filtros-resumen:focus-visible {
    outline: 2px solid var(--vectiss-primary, #2563eb);
    outline-offset: 2px;
}

/* Enlace de la tarjeta: foco hacia adentro (el overflow:hidden recortaría un outline exterior). */
.vectiss-catalogo .vectiss-card-link:focus-visible {
    outline: 2px solid var(--vectiss-primary, #2563eb);
    outline-offset: -2px;
    border-radius: var(--vx-catalogo-card-radius, var(--vx-radius-lg));
}

@media (prefers-reduced-motion: reduce) {
    .vectiss-catalogo *, .vectiss-catalogo *::before, .vectiss-catalogo *::after { transition: none !important; }
    .vectiss-catalogo .vectiss-card:hover,
    .vectiss-catalogo .vectiss-card:active { transform: none; }
    .vectiss-catalogo .vectiss-card:hover img { transform: none; }
}

/* ════════════════════════ 7.5 VISTAS — 4 contratos independientes (RFC 2.1-E) ════════════════════════ */
/*
 * Común a las 4: solo el "chasis" de tarjeta (§5.4: borde/fondo/imagen/badges/iconos/foco/colores por
 * token). NINGUNA vista depende de otra: cada una define su DENSIDAD, layout de tarjeta, espaciados,
 * jerarquía, hover y responsive. Tamaños por token (presets/Dark/Typography intactos). El visitante no
 * conmuta vista (la fija el widget); cada contrato debe verse correcto de forma aislada.
 */

/* ── GRID — referencia comercial (tarjeta vertical). Aquí solo su densidad; el resto = chasis común. ── */
.vectiss-catalogo .vectiss-vista-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
@media (max-width: 1024px) { .vectiss-catalogo .vectiss-vista-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (max-width: 600px) { .vectiss-catalogo .vectiss-vista-grid { grid-template-columns: 1fr; } }

/* ── COMPACT — máxima cantidad por pantalla: densa, padding mínimo, jerarquía simplificada (sin perder info). ── */
.vectiss-catalogo .vectiss-vista-compacta { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); row-gap: var(--vx-space-md); column-gap: var(--vx-space-md); }
.vectiss-catalogo .vectiss-vista-compacta .vectiss-card-body { padding: var(--vx-space-sm); }
.vectiss-catalogo .vectiss-vista-compacta .vectiss-card h3 { font-size: var(--vx-font-md); margin-bottom: 2px; }
.vectiss-catalogo .vectiss-vista-compacta .vectiss-card-sucursal,
.vectiss-catalogo .vectiss-vista-compacta .vectiss-mini-specs { margin-bottom: var(--vx-space-xs); }
.vectiss-catalogo .vectiss-vista-compacta .vectiss-precio { font-size: var(--vx-font-lg); font-weight: 800; margin: var(--vx-space-xs) 0; }
.vectiss-catalogo .vectiss-vista-compacta .vectiss-card-cta { padding: .65rem .75rem; font-size: var(--vx-font-sm); }
@media (max-width: 1024px) { .vectiss-catalogo .vectiss-vista-compacta { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } }
@media (max-width: 600px) { .vectiss-catalogo .vectiss-vista-compacta { grid-template-columns: 1fr 1fr; } .vectiss-catalogo .vectiss-vista-compacta .vectiss-card-cta { min-height: 44px; } }

/* ── PREMIUM — exclusiva: más respiración, imagen protagonista (4/3), precio mayor, hover elegante. ── */
.vectiss-catalogo .vectiss-vista-premium { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); row-gap: var(--vx-space-xl); column-gap: var(--vx-space-xl); }
.vectiss-catalogo .vectiss-vista-premium .vectiss-card img { aspect-ratio: var(--vx-catalogo-imagen-aspect, 4 / 3); }
.vectiss-catalogo .vectiss-vista-premium .vectiss-card-body { padding: var(--vx-space-lg); }
.vectiss-catalogo .vectiss-vista-premium .vectiss-card h3 { font-size: var(--vx-font-xl); }
.vectiss-catalogo .vectiss-vista-premium .vectiss-precio { font-size: var(--vx-font-2xl); margin-top: var(--vx-space-md); }
.vectiss-catalogo .vectiss-vista-premium .vectiss-card:hover { transform: translateY(-3px); }
@media (max-width: 1024px) { .vectiss-catalogo .vectiss-vista-premium { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (max-width: 600px) { .vectiss-catalogo .vectiss-vista-premium { grid-template-columns: 1fr; } }

/* ── LISTA — comparar vehículos: imagen IZQUIERDA, contenido DERECHA (mismo HTML; layout horizontal por CSS). ── */
.vectiss-catalogo .vectiss-vista-lista { grid-template-columns: 1fr; }
.vectiss-catalogo .vectiss-vista-lista .vectiss-card-link { display: grid; grid-template-columns: 300px 1fr; }
.vectiss-catalogo .vectiss-vista-lista .vectiss-card-link:not(:has(.vectiss-card-media)) { grid-template-columns: 1fr; } /* sin imagen → una columna */
.vectiss-catalogo .vectiss-vista-lista .vectiss-card-media { height: 100%; }
.vectiss-catalogo .vectiss-vista-lista .vectiss-card img { aspect-ratio: auto; height: 100%; min-height: 210px; }
.vectiss-catalogo .vectiss-vista-lista .vectiss-card-body { padding: var(--vx-space-lg); }
@media (max-width: 700px) {
    .vectiss-catalogo .vectiss-vista-lista .vectiss-card-link,
    .vectiss-catalogo .vectiss-vista-lista .vectiss-card-link:not(:has(.vectiss-card-media)) { grid-template-columns: 1fr; }
    .vectiss-catalogo .vectiss-vista-lista .vectiss-card img { aspect-ratio: var(--vx-catalogo-imagen-aspect, 16 / 10); height: auto; min-height: 0; }
}

/* ════════════════════════ 8. PRESETS (solo redefinición de tokens) ════════════════════════ */
/*
 * Sistema oficial de presets (RFC 2.0-A). Cada preset = UNA clase .vectiss-catalogo--{nombre} que
 * SOLO redefine tokens; NINGÚN preset contiene reglas de tarjeta/botón/filtro. Toda regla del
 * componente es la misma — cambia porque consume estos tokens. Se redefinen DOS capas: marca
 * (--vectiss-*, primarios en las cadenas var()) y semánticos del DS (--vx-*, consumidos en directo
 * por chips/CTA tonal/badges/contador). 'classic' = sin clase = base. El diseñador lo elige en el
 * widget (control 'Preset visual'); el visitante nunca lo ve.
 *
 * Dark (Stripe/Linear/Vercel/GitHub Dark).
 */
.vectiss-catalogo--dark {
    /* Marca (primarios en las cadenas var(--vectiss-…, fallback)) */
    --vectiss-bg: #161b22;
    --vectiss-bg-2: #21262d;
    --vectiss-card: #1c2128;
    --vectiss-card-border: #30363d;
    --vectiss-border: #30363d;
    --vectiss-text: #e6edf3;
    --vectiss-text-2: #9da7b3;
    --vectiss-text-3: #6e7681;
    --vectiss-primary: #4493f8;
    --vectiss-btn-primary: #4493f8;
    --vectiss-btn-text: #ffffff;
    --vectiss-error: #f85149;
    --vectiss-accent: #e3b341;
    --vectiss-badge-premium: #a371f7;
    --vectiss-badge-oferta: #f85149;
    --vectiss-badge-nuevo: #3fb950;

    /* Semánticos del DS (chips, CTA tonal, badges y contador los consumen en directo) */
    --vx-ink: #e6edf3;
    --vx-ink-muted: #9da7b3;
    --vx-ink-subtle: #6e7681;
    --vx-line: #30363d;
    --vx-line-soft: #262c36;
    --vx-surface: #1c2128;
    --vx-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --vx-shadow-md: 0 6px 16px rgba(0, 0, 0, .45);
    --vx-shadow-lg: 0 14px 30px -12px rgba(0, 0, 0, .6);

    /* Ajustes finos por token (sin tocar reglas): el dark necesita otra calibración en algunos sitios. */
    --vx-catalogo-wrapper-bg: #0d1117;                                                  /* área del catálogo cohesiva aunque la página sea clara */
    --vx-catalogo-boton-bg: color-mix(in srgb, var(--vectiss-primary) 16%, var(--vx-surface)); /* CTA tonal con más presencia sobre oscuro */
    --vx-catalogo-boton-color: #79c0ff;                                                 /* texto del CTA tonal con contraste AA sobre el tinte */
    --vx-catalogo-card-hover-border-color: #484f58;                                     /* la tarjeta mantiene su borde al hover (no se "apaga") */
    --vx-catalogo-card-hover-shadow-color: rgba(0, 0, 0, .5);                           /* sombra de elevación visible sobre oscuro */
}

/* Minimal — plano, monocromo, sin sombras, líneas finas, radios ajustados. */
.vectiss-catalogo--minimal {
    --vectiss-primary: #111827;          /* acción en casi-negro → monocromo elegante */
    --vectiss-accent: #111827;
    --vectiss-border: #ececec;
    --vectiss-card-border: #ececec;
    --vx-line: #ececec;
    --vx-line-soft: #f3f3f3;
    --vx-radius-sm: 6px;
    --vx-radius-md: 8px;
    --vx-radius-lg: 10px;
    --vx-shadow-sm: none;                 /* el segment activo queda plano */
    --vx-shadow-md: none;
    --vx-shadow-lg: 0 8px 22px -16px rgba(16, 24, 40, .16);
    --vx-catalogo-card-hover-shadow-color: rgba(16, 24, 40, .06); /* hover apenas perceptible */
}

/* Dealer — confiable y comercial: azul fuerte, CTA SÓLIDO, sombras sobrias. */
.vectiss-catalogo--dealer {
    --vectiss-primary: #1e5fbf;
    --vectiss-accent: #1e5fbf;
    --vx-radius-sm: 6px;
    --vx-radius-md: 8px;
    --vx-radius-lg: 12px;
    --vx-shadow-lg: 0 10px 24px -12px rgba(30, 95, 191, .22);
    --vx-catalogo-card-hover-shadow-color: rgba(30, 95, 191, .18);
    /* CTA sólido (no tonal): el concesionario quiere una llamada a la acción contundente. */
    --vx-catalogo-boton-bg: var(--vectiss-primary);
    --vx-catalogo-boton-color: #ffffff;
}

/* Luxury — cálido y generoso: superficie crema, neutros tibios, acento dorado, radios amplios. */
.vectiss-catalogo--luxury {
    --vectiss-bg: #fbfaf7;
    --vectiss-card: #ffffff;
    --vectiss-card-border: #ece7df;
    --vectiss-border: #ece7df;
    --vectiss-text: #2a2620;
    --vectiss-text-2: #6b6358;
    --vectiss-text-3: #a89f90;
    --vectiss-primary: #b08d57;          /* dorado */
    --vectiss-accent: #b08d57;
    --vx-ink: #2a2620;
    --vx-ink-muted: #6b6358;
    --vx-ink-subtle: #a89f90;
    --vx-line: #ece7df;
    --vx-line-soft: #f3efe8;
    --vx-surface: #fbfaf7;
    --vx-radius-sm: 10px;
    --vx-radius-md: 14px;
    --vx-radius-lg: 20px;
    --vx-shadow-sm: 0 1px 3px rgba(80, 60, 30, .06);
    --vx-shadow-lg: 0 20px 44px -20px rgba(80, 60, 30, .22);
    --vx-catalogo-card-hover-shadow-color: rgba(80, 60, 30, .18);
}

/* Corporate — sobrio y de alto contraste: azul corporativo, neutros fríos, radios ajustados. */
.vectiss-catalogo--corporate {
    --vectiss-card-border: #eef2f6;
    --vectiss-border: #e2e8f0;
    --vectiss-text: #0f172a;
    --vectiss-text-2: #475569;
    --vectiss-text-3: #94a3b8;
    --vectiss-primary: #1c4ed8;
    --vectiss-accent: #1c4ed8;
    --vx-ink: #0f172a;
    --vx-ink-muted: #475569;
    --vx-ink-subtle: #94a3b8;
    --vx-line: #e2e8f0;
    --vx-line-soft: #eef2f6;
    --vx-radius-sm: 6px;
    --vx-radius-md: 8px;
    --vx-radius-lg: 12px;
    --vx-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --vx-shadow-lg: 0 12px 28px -14px rgba(15, 23, 42, .16);
    --vx-catalogo-card-hover-shadow-color: rgba(15, 23, 42, .14);
}

/* ════════════════════════════════════════════════════════════════
 * SPRINT UX PREMIUM — Buscador · Toolbar · Filtros · Scroll · Cards
 * Todo scoped a .vectiss-catalogo; reutiliza tokens del DS.
 * ════════════════════════════════════════════════════════════════ */

/* ── PARTE 4+7 — Buscador live: CAMPO FLEX (ícono con espacio reservado + input) ──
 * El ícono es un HIJO FLEX real (no absoluto) → ocupa su propio espacio y el texto NUNCA puede
 * escribirse encima (patrón Booking/Airbnb). El "chrome" del campo (fondo/borde/radio/alto/relleno)
 * vive en el WRAP; el input es transparente y sin borde. El solape es imposible por construcción,
 * independientemente del tamaño del ícono o de los tokens que edite Elementor. */
.vectiss-busqueda-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    /* Base flexible = width (si se define) → min-width → 220px. Sin nada seteado = idéntico a hoy. */
    flex: 1 1 var(--vx-catalogo-buscador-width, var(--vx-catalogo-buscador-min-width, 220px));
    min-width: var(--vx-catalogo-buscador-min-width, 0);
    max-width: var(--vx-catalogo-buscador-max-width, 340px);
    height: var(--vx-catalogo-buscador-height, var(--vx-control-height));
    padding: var(--vx-catalogo-buscador-padding, 0 .9rem);
    /* Namespace propio del buscador encadenado a 'campo': si solo se edita Campos, el buscador sigue;
       si se edita Buscador, gana. Cero regresión (fallback final = valor actual). */
    background: var(--vx-catalogo-buscador-bg, var(--vx-catalogo-campo-bg, var(--vx-surface)));
    border: var(--vx-catalogo-buscador-border-width, 1px) solid var(--vx-catalogo-buscador-border-color, var(--vx-catalogo-campo-border-color, var(--vectiss-border, var(--vx-line))));
    border-radius: var(--vx-catalogo-buscador-radius, var(--vx-catalogo-campo-radius, var(--vx-radius-sm)));
    transition: border-color var(--vx-dur) var(--vx-ease), box-shadow var(--vx-dur) var(--vx-ease);
}
.vectiss-busqueda-wrap:hover {
    border-color: var(--vx-catalogo-buscador-hover-border-color, var(--vx-catalogo-campo-hover-border-color, var(--vectiss-primary, #2563eb)));
}
.vectiss-busqueda-wrap:focus-within {
    border-color: var(--vx-catalogo-buscador-focus-border-color, var(--vx-catalogo-campo-focus-border-color, var(--vectiss-primary, #2563eb)));
    box-shadow: 0 0 0 3px var(--vx-catalogo-campo-focus-ring, color-mix(in srgb, var(--vectiss-primary, #2563eb) 18%, transparent));
}
.vectiss-busqueda-ico {
    flex: none;   /* espacio reservado: el input jamás lo invade */
    width: var(--vx-catalogo-buscador-icono-width, 15px);
    height: var(--vx-catalogo-buscador-icono-height, 15px);
    color: var(--vx-catalogo-buscador-icono-color, var(--vx-ink-subtle));
    pointer-events: none;
}
.vectiss-buscador {
    flex: 1 1 auto;
    min-width: 0;   /* permite encoger sin desbordar el flex */
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    font-family: var(--vx-catalogo-buscador-font, inherit);
    font-size: var(--vx-catalogo-buscador-size, var(--vx-font-md));
    color: var(--vx-catalogo-buscador-color, var(--vx-catalogo-campo-color, var(--vectiss-text, var(--vx-ink))));
    appearance: none;
}
.vectiss-buscador:focus { outline: none; }
.vectiss-buscador::placeholder { color: var(--vx-ink-subtle); }
.vectiss-buscador::-webkit-search-cancel-button {
    appearance: none;
    width: 14px;
    height: 14px;
    margin-right: .1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    cursor: pointer;
    opacity: .7;
}
.vectiss-buscador::-webkit-search-cancel-button:hover { opacity: 1; }

/* ── PARTE 7 — Toolbar: limpiar + reorganización ─────────────── */
.vectiss-toolbar-limpiar {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: var(--vx-control-height);
    padding: var(--vx-catalogo-limpiar-padding, 0 .9rem);
    font-family: var(--vx-catalogo-limpiar-font, inherit);
    font-size: var(--vx-catalogo-limpiar-size, var(--vx-font-sm));
    font-weight: var(--vx-catalogo-limpiar-weight, 600);
    text-transform: var(--vx-catalogo-limpiar-transform, none);
    letter-spacing: var(--vx-catalogo-limpiar-letter-spacing, normal);
    color: var(--vx-catalogo-limpiar-color, var(--vx-ink-muted));
    background: var(--vx-catalogo-limpiar-bg, transparent);
    border: var(--vx-catalogo-limpiar-border-width, 1px) solid var(--vx-catalogo-limpiar-border-color, var(--vx-line));
    border-radius: var(--vx-catalogo-limpiar-radius, var(--vx-radius-sm));
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--vx-dur) var(--vx-ease), background var(--vx-dur) var(--vx-ease), border-color var(--vx-dur) var(--vx-ease);
}
.vectiss-toolbar-limpiar:hover {
    color: var(--vx-catalogo-limpiar-hover-color, var(--vx-ink));
    background: var(--vx-catalogo-limpiar-hover-bg, color-mix(in srgb, var(--vx-ink) 5%, transparent));
    border-color: var(--vx-catalogo-limpiar-hover-border-color, color-mix(in srgb, var(--vx-ink) 18%, transparent));
}
/* Contador: en desktop la buscador toma el flex; contador queda compacto */
.vectiss-catalogo .vectiss-toolbar .vectiss-contador {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ── PARTE 5 — Panel de filtros premium ──────────────────────── */
.vectiss-catalogo .vectiss-filtro {
    display: flex;
    flex-direction: column;
}
/* Separador entre grupos de filtros (solo en el sidebar) */
.vectiss-catalogo .vectiss-catalogo-sidebar .vectiss-filtro + .vectiss-filtro {
    padding-top: var(--vx-space-md);
    border-top: 1px solid var(--vx-line-soft);
}
/* Label con icono */
.vectiss-catalogo .vectiss-filtro label {
    display: flex;
    align-items: center;
    gap: .4rem;
}
.vectiss-filtro-ico {
    flex-shrink: 0;
    opacity: .55;
    transition: opacity var(--vx-dur) var(--vx-ease);
}
.vectiss-catalogo .vectiss-filtro:focus-within .vectiss-filtro-ico { opacity: .9; }

/* Acciones en sidebar: botón Filtrar más llamativo */
.vectiss-catalogo .vectiss-catalogo-sidebar .vectiss-filtro-btn {
    width: 100%;
    justify-content: center;
}
.vectiss-catalogo .vectiss-catalogo-sidebar .vectiss-filtro-limpiar {
    width: 100%;
    justify-content: center;
    text-align: center;
}

/* ── PARTE 8 — Tarjetas: micro-mejoras ───────────────────────── */
.vectiss-catalogo .vectiss-card-body {
    padding: var(--vx-catalogo-card-padding-override, var(--vx-space-md) var(--vx-space-md) calc(var(--vx-space-md) + .25rem));
}

/* ── PARTE 2 — Skeleton loading (placeholders + shimmer sutil) ─
 * El JS reemplaza el contenido de .vectiss-grid por estas tarjetas al navegar
 * (submit de filtros / cambio de orden / paginación). Solo CSS, sin librerías. */
@keyframes vxCatShimmer {
    0%   { background-position: -180px 0; }
    100% { background-position: calc(180px + 100%) 0; }
}
.vectiss-catalogo .vectiss-sk-card {
    background: var(--vx-catalogo-card-bg, var(--vectiss-card, var(--vx-surface)));
    border: 1px solid var(--vx-catalogo-card-border-color, var(--vectiss-card-border, var(--vx-line-soft)));
    border-radius: var(--vx-catalogo-card-radius, var(--vx-radius-lg));
    overflow: hidden;
}
.vectiss-catalogo .vectiss-sk-media {
    width: 100%;
    aspect-ratio: var(--vx-catalogo-imagen-aspect, 16 / 10);
}
.vectiss-catalogo .vectiss-sk-body {
    display: flex;
    flex-direction: column;
    gap: var(--vx-space-sm);
    padding: var(--vx-space-md);
}
.vectiss-catalogo .vectiss-sk-line { height: 12px; border-radius: var(--vx-radius-sm); }
.vectiss-catalogo .vectiss-sk-line--title { width: 70%; height: 16px; }
.vectiss-catalogo .vectiss-sk-line--sm { width: 45%; }
.vectiss-catalogo .vectiss-sk-line--price { width: 35%; height: 22px; margin-top: var(--vx-space-xs); }
.vectiss-catalogo .vectiss-sk-line--btn { width: 100%; height: var(--vx-control-height); margin-top: var(--vx-space-xs); }
/* Superficie base + shimmer (piezas que "cargan"). */
.vectiss-catalogo .vectiss-sk-media,
.vectiss-catalogo .vectiss-sk-line {
    background-color: color-mix(in srgb, var(--vx-ink) 8%, var(--vx-surface));
    background-image: linear-gradient(90deg,
        color-mix(in srgb, var(--vx-ink) 8%, var(--vx-surface)),
        color-mix(in srgb, var(--vx-ink) 4%, var(--vx-surface)),
        color-mix(in srgb, var(--vx-ink) 8%, var(--vx-surface)));
    background-size: 180px 100%;
    background-repeat: no-repeat;
    animation: vxCatShimmer 1.15s ease-in-out infinite;
}
/* Reduced-motion: solo placeholders, sin shimmer (PARTE 2 explícito). */
@media (prefers-reduced-motion: reduce) {
    .vectiss-catalogo .vectiss-sk-media,
    .vectiss-catalogo .vectiss-sk-line { animation: none; background-image: none; }
}

/* ── Dark preset: buscador adaptado ─────────────────────────── */
.vectiss-catalogo--dark .vectiss-buscador {
    color-scheme: dark;
}
.vectiss-catalogo--dark .vectiss-toolbar-limpiar {
    border-color: var(--vx-line);
    color: var(--vx-ink-muted);
}

/* ── Responsive PARTE 9 ──────────────────────────────────────── */
@media (max-width: 1023px) {
    /* El buscador toma todo el ancho en móvil/tablet */
    .vectiss-busqueda-wrap {
        max-width: 100%;
        flex-basis: 100%;
        order: -1;
    }
}
@media (min-width: 1024px) {
    /* Desktop: buscador al inicio, chips en el centro, orden+limpiar al final */
    .vectiss-busqueda-wrap { order: 0; }
    .vectiss-catalogo .vectiss-toolbar .vectiss-chips { order: 1; flex: 1 1 auto; }
    .vectiss-catalogo .vectiss-toolbar .vectiss-toolbar-filtros { order: 2; }
    .vectiss-catalogo .vectiss-toolbar .vectiss-toolbar-limpiar { order: 3; }
    .vectiss-catalogo .vectiss-toolbar .vectiss-orden { order: 4; }
}

/* ── PARTE 8 — Estados de botones (consistencia; NO cambia comportamiento) ──
 * Normal/hover/focus ya cubiertos por sus reglas base y §7. Aquí se añade el
 * soporte VISUAL de disabled y loading, homogéneo para todos los botones. */
.vectiss-catalogo .vectiss-filtro-btn:disabled,
.vectiss-catalogo .vectiss-filtro-btn[aria-disabled="true"],
.vectiss-catalogo .vectiss-vacio-accion[aria-disabled="true"],
.vectiss-catalogo .vectiss-toolbar-limpiar[aria-disabled="true"],
.vectiss-catalogo .vectiss-filtro-limpiar[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    pointer-events: none;
}
/* Loading: el botón oculta su texto y muestra un spinner (se activa con .es-cargando). */
.vectiss-catalogo .vectiss-filtro-btn.es-cargando,
.vectiss-catalogo .vectiss-vacio-accion.es-cargando {
    color: transparent !important;
    pointer-events: none;
    position: relative;
}
.vectiss-catalogo .vectiss-filtro-btn.es-cargando::after,
.vectiss-catalogo .vectiss-vacio-accion.es-cargando::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.05em;
    height: 1.05em;
    margin: -.525em 0 0 -.525em;
    border: 2px solid color-mix(in srgb, var(--vectiss-btn-text, #fff) 45%, transparent);
    border-top-color: var(--vectiss-btn-text, #fff);
    border-radius: 50%;
    animation: vxSpin .6s linear infinite;
}
@keyframes vxSpin { to { transform: rotate(360deg); } }

/* ── PARTE 9 — focus-visible de los controles nuevos (teclado) ──
 * El buscador ya recibe su anillo de foco vía .vectiss-busqueda-wrap:focus-within (box-shadow,
 * igual que el resto de campos), por eso no se lista aquí: evita un doble anillo. */
.vectiss-catalogo .vectiss-toolbar-limpiar:focus-visible,
.vectiss-catalogo .vectiss-toolbar-filtros:focus-visible {
    outline: 2px solid var(--vectiss-primary, #2563eb);
    outline-offset: 2px;
}

/* ── PARTE 7 — reduced-motion: apaga spinner y shimmer añadidos ── */
@media (prefers-reduced-motion: reduce) {
    .vectiss-catalogo .es-cargando::after { animation: none; }
    .vectiss-catalogo .vectiss-buscador,
    .vectiss-catalogo .vectiss-toolbar-limpiar,
    .vectiss-catalogo .vectiss-chip,
    .vectiss-catalogo .vectiss-chip-quitar,
    .vectiss-catalogo .vectiss-vacio-accion { transition: none !important; }
}