/*
 * 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) */
    --vx-control-height: 2.6rem;
    --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: var(--vx-space-lg);
    }
    /* Sidebar STICKY (solo CSS): permanece visible al hacer scroll; scroll interno para listas largas. */
    .vectiss-catalogo .vectiss-catalogo-sidebar {
        flex: 0 0 290px;
        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;
    }
    .vectiss-catalogo .vectiss-catalogo-main { flex: 1 1 auto; }
    /* 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: var(--vx-font-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vx-ink-muted);
    margin: 0 0 var(--vx-space-sm);
}
.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);
    padding: var(--vx-catalogo-toolbar-padding, 0);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--vx-space-sm);
}

/* Chips de filtros activos. */
.vectiss-catalogo .vectiss-chips { display: flex; flex-wrap: wrap; gap: var(--vx-space-xs); }
.vectiss-catalogo .vectiss-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--vx-space-xs);
    font-size: var(--vx-font-sm);
    font-weight: 500;
    line-height: 1.2;
    color: var(--vx-ink);
    background: color-mix(in srgb, var(--vx-ink) 5%, var(--vx-surface));
    border: 1px solid var(--vx-line);
    border-radius: var(--vx-radius-pill);
    padding: .25rem .3rem .25rem .7rem;
}
.vectiss-catalogo .vectiss-chip-quitar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    color: var(--vx-ink-muted);
    text-decoration: none;
    font-size: .9rem;
    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: color-mix(in srgb, var(--vx-ink) 10%, transparent); color: var(--vx-ink); }

/* Contador de resultados: PROTAGONISTA (jerarquía; mismo texto/lógica). Vinculado a token (tematiza). */
.vectiss-catalogo .vectiss-contador { color: var(--vx-ink); font-size: var(--vx-font-lg); font-weight: 700; }

.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);
}

.vectiss-catalogo .vectiss-orden {
    color: var(--vx-catalogo-orden-color, var(--vectiss-text, var(--vx-ink)));
    background-color: var(--vx-catalogo-orden-bg, var(--vx-surface));
    border-color: var(--vx-catalogo-orden-border-color, var(--vectiss-border, var(--vx-line)));
    height: var(--vx-control-height);
}

/* 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);
}

.vectiss-catalogo .vectiss-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vx-catalogo-card-hover-shadow-x, 0) var(--vx-catalogo-card-hover-shadow-y, 16px) var(--vx-catalogo-card-hover-shadow-blur, 34px) var(--vx-catalogo-card-hover-shadow-spread, -12px) var(--vx-catalogo-card-hover-shadow-color, rgba(16, 24, 40, .18));
    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(-1px); }

/* 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);
    transition: transform .3s var(--vx-ease);
}

.vectiss-catalogo .vectiss-card:hover img { transform: scale(1.04); }

/* 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 */
.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, var(--vx-space-xl) var(--vx-space-md));
    color: var(--vx-catalogo-estado-vacio-color, var(--vectiss-text-2, var(--vx-ink-muted)));
}
.vectiss-catalogo .vectiss-vacio-icono { width: 3rem; height: 3rem; color: var(--vectiss-primary, #2563eb); opacity: .8; }
.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, 600);
    color: var(--vectiss-text, var(--vx-ink));
    margin: 0;
}
.vectiss-catalogo .vectiss-vacio-desc { max-width: 28rem; margin: 0; }
.vectiss-catalogo .vectiss-vacio-accion {
    margin-top: var(--vx-space-xs);
    height: var(--vx-control-height);
    font-size: var(--vx-font-md);
    font-weight: 600;
    color: #fff;
    background: var(--vectiss-btn-primary, var(--vectiss-primary, #2563eb));
    border-radius: var(--vx-radius-sm);
    padding: 0 1.35rem;
    transition: background var(--vx-dur) var(--vx-ease);
}
.vectiss-catalogo .vectiss-vacio-accion:hover { background: color-mix(in srgb, var(--vectiss-primary, #2563eb) 88%, #000); }

/* 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; gap: var(--vx-space-md); }
    .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(-6px); }
@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);
}