/*
 * Componente "Vehículos" (widget de Elementor). Reutiliza el Design System (vectiss-grid, vectiss-card,
 * vectiss-vacio, vectiss-aviso, vectiss-btn-ver-todos) y SOLO expone los tokens --vx-vehiculos-* que los
 * controles de la pestaña Estilo sobrescriben por instancia, más unas pocas reglas estructurales
 * (columnas responsive, alineación, tratamiento de imagen, estados) que no existen en la base.
 *
 * Cada propiedad ligada a un token lo usa SIN fallback: si el diseñador no lo toca, `var(--token)` es
 * inválido y la propiedad se ignora → manda el Design System. Todo está SCOPED a .vectiss-vehiculos
 * (no afecta al catálogo ni a los destacados). Sin JS: hover/zoom/overlay/aspecto son CSS puro. Depende
 * de 'vectiss-autos' (se encola después) para ganar la cascada.
 */

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.vectiss-vehiculos .vectiss-vehiculos-titulo {
    font-family: var(--vx-vehiculos-titulo-font);
    font-size: var(--vx-vehiculos-titulo-size);
    font-weight: var(--vx-vehiculos-titulo-weight);
    text-transform: var(--vx-vehiculos-titulo-transform);
    letter-spacing: var(--vx-vehiculos-titulo-letter-spacing);
    line-height: var(--vx-vehiculos-titulo-line-height);
    color: var(--vx-vehiculos-titulo-color);
    margin: var(--vx-vehiculos-titulo-margin);
}
.vectiss-vehiculos-titulo--izquierda { text-align: left; }
.vectiss-vehiculos-titulo--centro { text-align: center; }
.vectiss-vehiculos-titulo--derecha { text-align: right; }

.vectiss-vehiculos .vectiss-vehiculos-desc {
    font-family: var(--vx-vehiculos-descripcion-font);
    font-size: var(--vx-vehiculos-descripcion-size);
    line-height: var(--vx-vehiculos-descripcion-line-height);
    color: var(--vx-vehiculos-descripcion-color);
    margin: var(--vx-vehiculos-descripcion-margin);
}

/* ── Rejilla: columnas responsive + gaps + alineación ─────────────────────── */
.vectiss-vehiculos .vectiss-grid {
    grid-template-columns: repeat(var(--vx-vehiculos-cols, 3), minmax(0, 1fr));
    row-gap: var(--vx-vehiculos-grid-gap-row, 1.75rem);
    column-gap: var(--vx-vehiculos-grid-gap-column, 1.5rem);
    padding: var(--vx-vehiculos-grid-padding);
}
@media (max-width: 1024px) {
    .vectiss-vehiculos .vectiss-grid { grid-template-columns: repeat(var(--vx-vehiculos-cols-tablet, 2), minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .vectiss-vehiculos .vectiss-grid { grid-template-columns: repeat(var(--vx-vehiculos-cols-mobile, 1), minmax(0, 1fr)); }
}
.vectiss-vehiculos--align-stretch .vectiss-grid { align-items: stretch; }
.vectiss-vehiculos--align-top .vectiss-grid { align-items: start; }
.vectiss-vehiculos--align-center .vectiss-grid { align-items: center; }

/* ── Tarjeta (tokens + hover) ─────────────────────────────────────────────── */
.vectiss-vehiculos .vectiss-card {
    background: var(--vx-vehiculos-card-bg, #ffffff);
    border-color: var(--vx-vehiculos-card-border-color, rgba(0, 0, 0, .07));
    border-width: var(--vx-vehiculos-card-border-width, 1px);
    border-radius: var(--vx-vehiculos-card-radius, 18px);
    padding: var(--vx-vehiculos-card-padding, 0);
}
.vectiss-vehiculos .vectiss-card:hover {
    background: var(--vx-vehiculos-card-hover-bg, #ffffff);
    border-color: var(--vx-vehiculos-card-hover-border-color, rgba(37, 99, 235, .22));
}

/* ── Imagen: token de radio + aspecto/zoom/overlay (clases emitidas por la tarjeta) ── */
.vectiss-vehiculos .vectiss-card-media {
    border-radius: var(--vx-vehiculos-imagen-radius, 18px 18px 0 0);
    aspect-ratio: 16 / 9;   /* default; las clases --ar-* y los renderers lo sobreescriben */
    overflow: hidden;
    position: relative;     /* ancla badges en overlay y ::after del overlay */
}
.vectiss-vehiculos .vectiss-card-media--ar-16-9,
.vectiss-vehiculos .vectiss-card-media--ar-4-3,
.vectiss-vehiculos .vectiss-card-media--ar-1-1 { position: relative; overflow: hidden; }
.vectiss-vehiculos .vectiss-card-media--ar-16-9 { aspect-ratio: 16 / 9; }
.vectiss-vehiculos .vectiss-card-media--ar-4-3 { aspect-ratio: 4 / 3; }
.vectiss-vehiculos .vectiss-card-media--ar-1-1 { aspect-ratio: 1 / 1; }
.vectiss-vehiculos .vectiss-card-media--ar-16-9 img,
.vectiss-vehiculos .vectiss-card-media--ar-4-3 img,
.vectiss-vehiculos .vectiss-card-media--ar-1-1 img { width: 100%; height: 100%; object-fit: cover; }

.vectiss-vehiculos .vectiss-card-media--zoom { overflow: hidden; }
.vectiss-vehiculos .vectiss-card-media--zoom img { transition: transform .35s ease; }
.vectiss-vehiculos .vectiss-card:hover .vectiss-card-media--zoom img { transform: scale(1.06); }

.vectiss-vehiculos .vectiss-card-media--overlay::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 55%);
}

/* ── Precio / Badges (tokens) ─────────────────────────────────────────────── */
.vectiss-vehiculos .vectiss-precio {
    font-family: var(--vx-vehiculos-precio-font);
    font-size: var(--vx-vehiculos-precio-size, 1.45rem);
    font-weight: var(--vx-vehiculos-precio-weight, 800);
    color: var(--vx-vehiculos-precio-color, #0f172a);
}
.vectiss-vehiculos .vectiss-badge {
    font-size: var(--vx-vehiculos-badge-size, .72rem);
    font-weight: var(--vx-vehiculos-badge-weight, 600);
    color: var(--vx-vehiculos-badge-color, #475569);
    background: var(--vx-vehiculos-badge-bg, #f1f5f9);
    border-radius: var(--vx-vehiculos-badge-radius, 999px);
}
.vectiss-vehiculos .vectiss-card-disponible {
    margin: .25rem 0 0; font-size: .8rem; font-weight: 600; color: #1a7f37;
}

/* ── CTA inferior: botón y link (tokens + hover) ──────────────────────────── */
.vectiss-vehiculos .vectiss-btn-ver-todos {
    font-family: var(--vx-vehiculos-cta-font);
    font-size: var(--vx-vehiculos-cta-size);
    color: var(--vx-vehiculos-cta-color, #ffffff);
    background: var(--vx-vehiculos-cta-bg, #2563eb);
    border-color: var(--vx-vehiculos-cta-border-color);
    border-radius: var(--vx-vehiculos-cta-radius, 999px);
    padding: var(--vx-vehiculos-cta-padding, .6rem 1.45rem);
}
.vectiss-vehiculos .vectiss-btn-ver-todos:hover {
    color: var(--vx-vehiculos-cta-hover-color, #ffffff);
    background: var(--vx-vehiculos-cta-hover-bg, #1d4ed8);
}
.vectiss-vehiculos .vectiss-vehiculos-link {
    display: inline-flex; align-items: center; gap: .35rem; font-weight: 600;
    color: var(--vx-vehiculos-cta-color, var(--vectiss-primary, #2563eb));
    text-decoration: none;
}
.vectiss-vehiculos .vectiss-vehiculos-link:hover { text-decoration: underline; }

/* ── Estado vacío (reutiliza el patrón .vectiss-vacio, aquí scoped) ────────── */
.vectiss-vehiculos .vectiss-vacio {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center;
    gap: .6rem; text-align: center; padding: 2.5rem 1rem; color: #475569;
}
.vectiss-vehiculos .vectiss-vacio-emoji { font-size: 2.5rem; line-height: 1; }
.vectiss-vehiculos .vectiss-vacio-desc { max-width: 28rem; margin: 0; }
.vectiss-vehiculos .vectiss-vacio-accion {
    display: inline-block; margin-top: .4rem; padding: .55rem 1.1rem; border-radius: 8px;
    background: var(--vectiss-primary, #2563eb); color: #fff; text-decoration: none; font-weight: 600;
}
.vectiss-vehiculos .vectiss-vacio-accion:hover { filter: brightness(.92); }

/* ── Estado de error (reutiliza .vectiss-aviso) ───────────────────────────── */
.vectiss-vehiculos .vectiss-vehiculos-error { text-align: center; }

/* ===========================================================================
 * Sprint Loop Grid — plantillas, carrusel, destacado, animaciones, header/footer,
 * skeleton y accesibilidad. Todo scoped a .vectiss-vehiculos; reutiliza .vectiss-card.
 * =========================================================================== */

/* ── Header del widget (estilo Posts: título + botón derecho) ─────────────── */
.vectiss-vehiculos-header { margin-bottom: 1rem; }
.vectiss-vehiculos-header--con-boton {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.vectiss-vehiculos-header-main { min-width: 0; }
.vectiss-vehiculos-header-btn { flex: none; }

/* ── Ítem de la rejilla (envuelve cada tarjeta; permite destacado y animación) ── */
.vectiss-vehiculos-item { display: flex; }
.vectiss-vehiculos-item > .vectiss-card { width: 100%; }

/* ── Destacado: la tarjeta marcada ocupa el doble (estilo Airbnb), en grid ── */
.vectiss-vehiculos:not(.vectiss-vehiculos--carrusel) .vectiss-vehiculos-item.is-destacado { grid-column: span 2; }
@media (max-width: 767px) {
    .vectiss-vehiculos:not(.vectiss-vehiculos--carrusel) .vectiss-vehiculos-item.is-destacado { grid-column: span 1; }
}

/* ── Enlaces accesibles de la tarjeta + CTA inteligente (botón) ───────────── */
.vectiss-vehiculos .vectiss-card-media-link { display: block; }
.vectiss-vehiculos .vectiss-card-titulo-link { color: inherit; text-decoration: none; }
.vectiss-vehiculos .vectiss-card-titulo-link:hover { text-decoration: underline; }
.vectiss-vehiculos .vectiss-card-boton {
    display: inline-block; margin-top: .5rem; padding: .5rem 1rem; border-radius: 8px;
    background: var(--vx-vehiculos-cta-bg, var(--vectiss-primary, #2563eb));
    color: var(--vx-vehiculos-cta-color, #fff); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.vectiss-vehiculos .vectiss-card-boton:hover { filter: brightness(.92); }
.vectiss-vehiculos .vectiss-card-fila-pie {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap;
}

/* ── Plantillas ───────────────────────────────────────────────────────────── */
.vectiss-vehiculos .vectiss-card--horizontal { display: grid; grid-template-columns: 42% 1fr; overflow: hidden; }
.vectiss-vehiculos .vectiss-card--horizontal .vectiss-card-media-link,
.vectiss-vehiculos .vectiss-card--horizontal .vectiss-card-media { height: 100%; }
.vectiss-vehiculos .vectiss-card--horizontal .vectiss-card-media img { height: 100%; object-fit: cover; }
@media (max-width: 600px) { .vectiss-vehiculos .vectiss-card--horizontal { grid-template-columns: 1fr; } }

.vectiss-vehiculos .vectiss-card--luxury { position: relative; }
.vectiss-vehiculos .vectiss-card--luxury .vectiss-card-overlay-body { position: absolute; inset: auto 0 0 0; padding: 1rem; color: #fff; }
.vectiss-vehiculos .vectiss-card--luxury .vectiss-card-overlay-body h3,
.vectiss-vehiculos .vectiss-card--luxury .vectiss-card-overlay-body .vectiss-precio { color: #fff; }

.vectiss-vehiculos .vectiss-card--compacto .vectiss-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.vectiss-vehiculos .vectiss-card--compacto .vectiss-card-body { padding: .6rem .7rem; }
.vectiss-vehiculos .vectiss-card--premium { box-shadow: 0 6px 24px rgba(0, 0, 0, .08); }

/* ── Carrusel (CSS Scroll Snap; sin librerías) ────────────────────────────── */
.vectiss-vehiculos-carrusel {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: .5rem; scrollbar-width: thin;
}
.vectiss-vehiculos-carrusel .vectiss-vehiculos-item {
    flex: 0 0 calc((100% - (var(--vx-vehiculos-carrusel-visibles, 3) - 1) * 1rem) / var(--vx-vehiculos-carrusel-visibles, 3));
    scroll-snap-align: start;
}
@media (max-width: 767px) {
    .vectiss-vehiculos-carrusel .vectiss-vehiculos-item { flex-basis: 82%; }
}
.vectiss-carrusel-nav { display: none; }
.vectiss-vehiculos--carrusel.vectiss-js .vectiss-carrusel-nav { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.vectiss-carrusel-flecha {
    width: 2.2rem; height: 2.2rem; border-radius: 999px; border: 1px solid #d4d9e0; background: #fff;
    cursor: pointer; font-size: 1.2rem; line-height: 1; color: #334155;
}
.vectiss-carrusel-flecha:hover { background: #f1f5f9; }

/* ── Animaciones (solo CSS; respeta reduce-motion) ────────────────────────── */
@keyframes vxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vxSlide { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.vectiss-vehiculos--anim-fade .vectiss-vehiculos-item { animation: vxFade .5s ease both; }
.vectiss-vehiculos--anim-slide .vectiss-vehiculos-item { animation: vxSlide .5s ease both; }
.vectiss-vehiculos--anim-lift .vectiss-card { transition: transform .25s ease, box-shadow .25s ease; }
.vectiss-vehiculos--anim-lift .vectiss-vehiculos-item:hover .vectiss-card { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
.vectiss-vehiculos--anim-scale .vectiss-card { transition: transform .25s ease; }
.vectiss-vehiculos--anim-scale .vectiss-vehiculos-item:hover .vectiss-card { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
    .vectiss-vehiculos-item, .vectiss-vehiculos--anim-lift .vectiss-card, .vectiss-vehiculos--anim-scale .vectiss-card { animation: none !important; transition: none !important; }
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.vectiss-vehiculos-footer { margin-top: 1rem; display: flex; align-items: center; gap: .6rem; color: #475569; font-size: .9rem; }

/* ── Skeleton (Fase 9, preparado; sin JS) ─────────────────────────────────── */
@keyframes vxShimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.vectiss-skeleton .vectiss-skeleton-media, .vectiss-skeleton-linea {
    background: #e9eef5; background-image: linear-gradient(90deg, #e9eef5, #f4f7fb, #e9eef5);
    background-size: 200px 100%; background-repeat: no-repeat; animation: vxShimmer 1.2s infinite; border-radius: 8px;
}
.vectiss-skeleton-media { height: 160px; margin-bottom: .7rem; }
.vectiss-skeleton-linea { height: 12px; margin: .4rem 0; }
.vectiss-skeleton-linea--titulo { width: 70%; height: 16px; }
.vectiss-skeleton-linea--corta { width: 40%; }
.vectiss-skeleton-linea--precio { width: 30%; }

/* ── Accesibilidad: foco visible para teclado (Fase 10) ───────────────────── */
.vectiss-vehiculos a:focus-visible,
.vectiss-vehiculos button:focus-visible,
.vectiss-vehiculos-track:focus-visible { outline: 2px solid var(--vectiss-primary, #2563eb); outline-offset: 2px; }

/* ===========================================================================
 * SPRINT FINAL — Pulido Visual de Primer Nivel
 * Modern (default) · Luxury · Minimal
 * Solo CSS · Compatible con Elementor, Gutenberg, Shortcodes y todos los renderers
 * =========================================================================== */

/* ── TEMA MODERN — sin declaración intermedia ────────────────────────────────
 * Los defaults del tema Modern NO se declaran sobre .vectiss-vehiculos: hacerlo
 * interceptaba la herencia de los tokens que Elementor inyecta en {{WRAPPER}}
 * (un ancestro de .vectiss-vehiculos), dejando los Style Controls inertes. Igual
 * que Hero y Catálogo, cada default vive ahora como fallback de su var() en el
 * punto de consumo: Elementor gana cuando define un token, y el Modern se ve
 * idéntico cuando no lo hace. Luxury/Minimal siguen redefiniendo tokens sobre su
 * propia clase (opt-in vía CSS Classes), sin declaración sobre .vectiss-vehiculos.
 */

/* ── Cabecera: más aire, letra apretada ──────────────────────────────────── */
.vectiss-vehiculos-header                   { margin-bottom: 1.75rem; }
.vectiss-vehiculos .vectiss-vehiculos-titulo { letter-spacing: -.025em; }
.vectiss-vehiculos .vectiss-vehiculos-desc   { margin-top: .35rem; opacity: .7; }

/* ── Tarjeta: elevación suave, borde explícito, flex-column ─────────────── */
.vectiss-vehiculos .vectiss-card {
    border-style: solid;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05), 0 2px 8px rgba(0, 0, 0, .04);
    transition: transform .28s cubic-bezier(.25, .46, .45, .94),
                box-shadow .28s cubic-bezier(.25, .46, .45, .94),
                border-color .2s ease;
}
/* Solo los no-horizontales reciben flex-column (horizontal usa display:grid) */
.vectiss-vehiculos .vectiss-card:not(.vectiss-card--horizontal) {
    display: flex;
    flex-direction: column;
}
.vectiss-vehiculos .vectiss-vehiculos-item > .vectiss-card:not(.vectiss-card--horizontal) { height: 100%; }
.vectiss-vehiculos .vectiss-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .12), 0 4px 12px rgba(0, 0, 0, .06);
}

/* ── Imagen: zoom elegante; luxury y horizontal no heredan aspect-ratio ──── */
.vectiss-vehiculos .vectiss-card-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .45s cubic-bezier(.25, .46, .45, .94);
}
.vectiss-vehiculos .vectiss-card:hover .vectiss-card-media img { transform: scale(1.045); }
/* --zoom tiene mayor especificidad; su transition se respeta */
.vectiss-vehiculos .vectiss-card-media--zoom img { transition: transform .35s ease; }
/* Luxury: imagen llena la tarjeta por altura, no por aspect-ratio */
.vectiss-vehiculos .vectiss-card--luxury    .vectiss-card-media { aspect-ratio: unset; height: 100%; }
/* Horizontal: la imagen llena la columna en el grid de la tarjeta */
.vectiss-vehiculos .vectiss-card--horizontal .vectiss-card-media { aspect-ratio: unset; height: 100%; border-radius: 0; }
.vectiss-vehiculos .vectiss-card--horizontal                     { border-radius: var(--vx-vehiculos-card-radius, 18px); overflow: hidden; }

/* ── Cuerpo de tarjeta ────────────────────────────────────────────────────── */
.vectiss-vehiculos .vectiss-card-body {
    padding: var(--vx-vehiculos-cuerpo-padding, 1rem 1.25rem 1.35rem);
    display: flex; flex-direction: column; row-gap: var(--vx-vehiculos-cuerpo-gap-row, .45rem); column-gap: var(--vx-vehiculos-cuerpo-gap-column, .45rem); flex: 1;
}
.vectiss-vehiculos .vectiss-card--compacto .vectiss-card-body { padding: .6rem .9rem .75rem; }

/* ── Título: letra apretada, hover de color ──────────────────────────────── */
.vectiss-vehiculos .vectiss-card-body h3 {
    margin: 0;
    font-family: var(--vx-vehiculos-titulo-card-font, inherit);
    font-size: var(--vx-vehiculos-titulo-card-size, 1rem);
    font-weight: var(--vx-vehiculos-titulo-card-weight, 700);
    line-height: var(--vx-vehiculos-titulo-card-line-height, 1.3);
    letter-spacing: var(--vx-vehiculos-titulo-card-letter-spacing, -.012em);
    color: var(--vx-vehiculos-titulo-card-color, #0f172a);
}
.vectiss-vehiculos .vectiss-card-titulo-link       { color: var(--vx-vehiculos-titulo-card-color, #0f172a); text-decoration: none; }
.vectiss-vehiculos .vectiss-card-titulo-link:hover { color: var(--vx-vehiculos-titulo-card-hover-color, #2563eb); text-decoration: none; }

/* ── Sucursal con pin ────────────────────────────────────────────────────── */
.vectiss-vehiculos .vectiss-card-sucursal {
    display: flex; align-items: center; gap: .3rem;
    font-size: .78rem; color: #64748b; margin: 0; line-height: 1.4;
}
.vectiss-vehiculos .vectiss-pin { width: 12px; height: 12px; flex-shrink: 0; }

/* ── Mini especificaciones: punto medio como separador ───────────────────── */
.vectiss-vehiculos .vectiss-mini-specs {
    display: flex; flex-wrap: wrap; gap: 0;
    font-size: .78rem; color: #64748b; line-height: 1.4; margin: 0;
}
.vectiss-vehiculos .vectiss-mini-specs span { display: inline-flex; align-items: center; gap: .2rem; }
.vectiss-vehiculos .vectiss-mini-specs span + span::before {
    content: "·"; margin: 0 .4rem; opacity: .35; font-size: 1rem; line-height: 1;
}
.vectiss-vehiculos .vectiss-mini-specs .vectiss-ico,
.vectiss-vehiculos .vectiss-mini-specs svg { width: 12px; height: 12px; flex-shrink: 0; opacity: .55; }

/* ── Badges: chips con colores suaves y semántica clara ──────────────────── */
.vectiss-vehiculos .vectiss-badges { display: flex; flex-wrap: wrap; gap: .3rem; }
.vectiss-vehiculos .vectiss-badge  {
    display: inline-flex; align-items: center;
    padding: .25rem .75rem; line-height: 1.5;
    white-space: nowrap; letter-spacing: .01em;
}
.vectiss-vehiculos .vectiss-badge--nuevo      { background: #fef9c3; color: #92400e; }
.vectiss-vehiculos .vectiss-badge--oferta     { background: #fee2e2; color: #991b1b; }
.vectiss-vehiculos .vectiss-badge--destacado  { background: #ede9fe; color: #5b21b6; }
.vectiss-vehiculos .vectiss-badge--disponible { background: #dcfce7; color: #166534; }
.vectiss-vehiculos .vectiss-badge--reserva    { background: #dbeafe; color: #1e40af; }
/* Badges en overlay: posicionados arriba-izquierda de la imagen */
.vectiss-vehiculos .vectiss-card-badges { position: absolute; top: .75rem; left: .75rem; z-index: 2; }

/* ── Precio: protagonista, anclado al fondo de la tarjeta ───────────────── */
.vectiss-vehiculos .vectiss-precio {
    display: flex; align-items: baseline; gap: .25rem;
    line-height: 1.1; margin: 0;
    margin-top: auto;   /* empuja precio + CTA al fondo sin importar cuánto contenido haya arriba */
    padding-top: .5rem;
}
.vectiss-vehiculos .vectiss-precio > span {
    font-size: .7rem; font-weight: 500; color: #94a3b8;
    align-self: flex-end; padding-bottom: .1rem;
}
.vectiss-vehiculos .vectiss-precio small { font-size: .72rem; font-weight: 400; color: #94a3b8; }
/* Fila pie (Compacto / Horizontal): también al fondo */
.vectiss-vehiculos .vectiss-card-fila-pie { margin-top: auto; padding-top: .5rem; }

/* ── CTA botón: pill premium con flecha animada ──────────────────────────── */
.vectiss-vehiculos .vectiss-card-boton {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .65rem; align-self: flex-start;
    font-size: .875rem; font-weight: 600; letter-spacing: .01em;
    border-radius: var(--vx-vehiculos-cta-radius, 999px);
    padding: var(--vx-vehiculos-cta-padding, .6rem 1.45rem);
    background: var(--vx-vehiculos-cta-bg, #2563eb);
    color: var(--vx-vehiculos-cta-color, #fff);
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(37, 99, 235, .22);
    transition: background .18s ease, box-shadow .2s ease, transform .15s ease;
}
.vectiss-vehiculos .vectiss-card-boton::after {
    content: "→"; display: inline-block; font-size: .9em;
    transition: transform .22s cubic-bezier(.25, .46, .45, .94);
}
.vectiss-vehiculos .vectiss-card-boton:hover {
    background: var(--vx-vehiculos-cta-hover-bg, #1d4ed8);
    color: var(--vx-vehiculos-cta-hover-color, #fff);
    box-shadow: 0 5px 16px rgba(37, 99, 235, .35);
    transform: translateY(-1px);
    filter: unset;
}
.vectiss-vehiculos .vectiss-card-boton:hover::after { transform: translateX(4px); }
.vectiss-vehiculos .vectiss-card-boton:active        { transform: translateY(0); box-shadow: none; }

/* ── Luxury renderer: imagen ocupa toda la tarjeta, gradiente profundo ───── */
.vectiss-vehiculos .vectiss-card--luxury { min-height: 300px; overflow: hidden; }
.vectiss-vehiculos .vectiss-card--luxury .vectiss-card-media-link { flex: 1; display: flex; flex-direction: column; }
.vectiss-vehiculos .vectiss-card--luxury .vectiss-card-overlay-body {
    display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem 1.35rem;
}
/* Gradiente más profundo → texto legible sin importar la foto */
.vectiss-vehiculos .vectiss-card--luxury .vectiss-card-media--overlay::after {
    background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, .12) 55%, transparent 100%);
}

/* ── CTA del footer ───────────────────────────────────────────────────────── */
.vectiss-vehiculos-footer                         { margin-top: 1.5rem; }
.vectiss-vehiculos .vectiss-vehiculos-link span   { display: inline-block; transition: transform .22s ease; }
.vectiss-vehiculos .vectiss-vehiculos-link:hover  { text-decoration: none; }
.vectiss-vehiculos .vectiss-vehiculos-link:hover span { transform: translateX(4px); }

/* ── Carrusel: flechas más refinadas ─────────────────────────────────────── */
.vectiss-carrusel-flecha {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.vectiss-carrusel-flecha:hover {
    background: #f8fafc; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transform: scale(1.06);
}

/* ── Skeleton: 16:9 para coincidir con el aspect-ratio por defecto ────────── */
.vectiss-skeleton-media { height: 0; padding-bottom: 56.25%; margin-bottom: .7rem; }

/* ── Estado vacío: elegante y aireado ────────────────────────────────────── */
.vectiss-vehiculos .vectiss-vacio {
    padding: 3.5rem 2rem;
    background: #fafafa; border: 1.5px dashed #e2e8f0; border-radius: 20px;
}
.vectiss-vehiculos .vectiss-vacio-emoji  { font-size: 3.5rem; }
.vectiss-vehiculos .vectiss-vacio-desc   { font-size: .95rem; color: #64748b; }
.vectiss-vehiculos .vectiss-vacio-accion {
    border-radius: 999px; padding: .65rem 1.5rem; font-size: .9rem; font-weight: 600;
    transition: filter .18s ease, transform .15s ease;
}
.vectiss-vehiculos .vectiss-vacio-accion:hover { filter: brightness(.92); transform: translateY(-1px); }

/* ── Estado de error ──────────────────────────────────────────────────────── */
.vectiss-vehiculos .vectiss-vehiculos-error {
    padding: 1.25rem 1.25rem; text-align: center;
    background: #fef2f2; border: 1px solid #fecaca;
    border-radius: 14px; color: #991b1b; font-size: .9rem;
}

/* ===========================================================================
 * TEMA: LUXURY — Negro profundo · Detalles champagne · Concesionario premium
 * Activar: añadir clase "vectiss-vehiculos--luxury" en CSS Classes del widget
 * =========================================================================== */
.vectiss-vehiculos--luxury {
    --vx-vehiculos-card-bg:                 #0f0f0f;
    --vx-vehiculos-card-border-color:       rgba(255, 255, 255, .06);
    --vx-vehiculos-card-border-width:       1px;
    --vx-vehiculos-card-radius:             20px;
    --vx-vehiculos-card-padding:            0;
    --vx-vehiculos-card-hover-bg:           #161616;
    --vx-vehiculos-card-hover-border-color: rgba(184, 161, 122, .4);
    --vx-vehiculos-imagen-radius:           20px 20px 0 0;
    --vx-vehiculos-precio-size:             1.5rem;
    --vx-vehiculos-precio-color:            #b8a17a;
    --vx-vehiculos-badge-bg:                rgba(255, 255, 255, .07);
    --vx-vehiculos-badge-color:             rgba(248, 248, 248, .75);
    --vx-vehiculos-cta-bg:                  #b8a17a;
    --vx-vehiculos-cta-color:               #0f0f0f;
    --vx-vehiculos-cta-hover-bg:            #cdb99a;
    --vx-vehiculos-cta-hover-color:         #0f0f0f;
    --vx-vehiculos-grid-gap-row:            2rem;
    --vx-vehiculos-grid-gap-column:         1.5rem;
}
.vectiss-vehiculos--luxury .vectiss-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, .5), 0 2px 6px rgba(0, 0, 0, .35);
}
.vectiss-vehiculos--luxury .vectiss-card:hover {
    box-shadow: 0 24px 64px rgba(0, 0, 0, .6), 0 8px 24px rgba(0, 0, 0, .4);
}
.vectiss-vehiculos--luxury .vectiss-card-body h3,
.vectiss-vehiculos--luxury .vectiss-card-titulo-link       { color: #f0ede8; letter-spacing: -.01em; }
.vectiss-vehiculos--luxury .vectiss-card-titulo-link:hover { color: #b8a17a; }
.vectiss-vehiculos--luxury .vectiss-mini-specs,
.vectiss-vehiculos--luxury .vectiss-card-sucursal          { color: rgba(240, 237, 232, .4); }
.vectiss-vehiculos--luxury .vectiss-mini-specs span + span::before { color: rgba(240, 237, 232, .2); }
.vectiss-vehiculos--luxury .vectiss-precio > span,
.vectiss-vehiculos--luxury .vectiss-precio small           { color: rgba(184, 161, 122, .5); }
.vectiss-vehiculos--luxury .vectiss-badge--nuevo      { background: rgba(254, 249, 195, .08); color: #e6c87a; }
.vectiss-vehiculos--luxury .vectiss-badge--oferta     { background: rgba(254, 226, 226, .08); color: #f4a0a0; }
.vectiss-vehiculos--luxury .vectiss-badge--destacado  { background: rgba(237, 233, 254, .08); color: #c4b5fd; }
.vectiss-vehiculos--luxury .vectiss-badge--disponible { background: rgba(220, 252, 231, .08); color: #86efac; }
.vectiss-vehiculos--luxury .vectiss-badge--reserva    { background: rgba(219, 234, 254, .08); color: #93c5fd; }
.vectiss-vehiculos--luxury .vectiss-vehiculos-titulo  { color: #f0ede8; letter-spacing: -.02em; }
.vectiss-vehiculos--luxury .vectiss-vehiculos-desc    { color: rgba(240, 237, 232, .45); }
.vectiss-vehiculos--luxury .vectiss-vehiculos-link    { color: #b8a17a; }
.vectiss-vehiculos--luxury .vectiss-card-boton        { box-shadow: 0 2px 8px rgba(184, 161, 122, .2); }
.vectiss-vehiculos--luxury .vectiss-card-boton:hover  { box-shadow: 0 4px 18px rgba(184, 161, 122, .35); }
.vectiss-vehiculos--luxury .vectiss-vacio             { background: rgba(255, 255, 255, .02); border-color: rgba(255, 255, 255, .08); color: rgba(240, 237, 232, .5); }
.vectiss-vehiculos--luxury .vectiss-vacio-desc        { color: rgba(240, 237, 232, .5); }

/* ===========================================================================
 * TEMA: MINIMAL — Apple. Blanco total · Mucho aire · Solo lo esencial
 * Activar: añadir clase "vectiss-vehiculos--minimal" en CSS Classes del widget
 * =========================================================================== */
.vectiss-vehiculos--minimal {
    --vx-vehiculos-card-bg:                 transparent;
    --vx-vehiculos-card-border-color:       #e5e7eb;
    --vx-vehiculos-card-border-width:       1px;
    --vx-vehiculos-card-radius:             12px;
    --vx-vehiculos-card-padding:            0;
    --vx-vehiculos-card-hover-bg:           #fafafa;
    --vx-vehiculos-card-hover-border-color: #d1d5db;
    --vx-vehiculos-imagen-radius:           12px 12px 0 0;
    --vx-vehiculos-precio-size:             1.6rem;
    --vx-vehiculos-precio-weight:           700;
    --vx-vehiculos-precio-color:            #111827;
    --vx-vehiculos-badge-bg:                #f3f4f6;
    --vx-vehiculos-badge-color:             #374151;
    --vx-vehiculos-badge-size:              .7rem;
    --vx-vehiculos-cta-bg:                  transparent;
    --vx-vehiculos-cta-color:               #111827;
    --vx-vehiculos-cta-radius:              0;
    --vx-vehiculos-cta-padding:             0;
    --vx-vehiculos-cta-hover-bg:            transparent;
    --vx-vehiculos-cta-hover-color:         #374151;
    --vx-vehiculos-grid-gap-row:            2.5rem;
    --vx-vehiculos-grid-gap-column:         2rem;
}
.vectiss-vehiculos--minimal .vectiss-card               { box-shadow: none; }
.vectiss-vehiculos--minimal .vectiss-card:hover         { transform: none; box-shadow: none; }
.vectiss-vehiculos--minimal .vectiss-card-body          { gap: .55rem; padding: 1.1rem 1.35rem 1.4rem; }
.vectiss-vehiculos--minimal .vectiss-card-body h3       { font-size: 1.05rem; letter-spacing: -.02em; }
.vectiss-vehiculos--minimal .vectiss-mini-specs         { color: #9ca3af; }
.vectiss-vehiculos--minimal .vectiss-card-sucursal      { color: #9ca3af; }
.vectiss-vehiculos--minimal .vectiss-precio > span,
.vectiss-vehiculos--minimal .vectiss-precio small       { color: #9ca3af; }
/* CTA textual estilo Apple: línea inferior, sin fondo */
.vectiss-vehiculos--minimal .vectiss-card-boton {
    background: transparent; color: #111827; border-radius: 0;
    padding: 0; box-shadow: none; margin-top: .75rem;
    border-bottom: 1.5px solid #111827;
    font-size: .875rem; font-weight: 500; letter-spacing: .005em; line-height: 1.8;
    transition: color .15s ease, border-color .15s ease;
}
.vectiss-vehiculos--minimal .vectiss-card-boton::after  { content: " →"; }
.vectiss-vehiculos--minimal .vectiss-card-boton:hover {
    background: transparent; color: #374151; border-color: #374151;
    box-shadow: none; transform: none;
}
.vectiss-vehiculos--minimal .vectiss-card-boton:hover::after { transform: translateX(5px); }
/* Badges outline en Minimal */
.vectiss-vehiculos--minimal .vectiss-badge {
    background: transparent; border: 1px solid #d1d5db; padding: .18rem .55rem; color: #6b7280;
}
.vectiss-vehiculos--minimal .vectiss-badge--nuevo      { border-color: #fde68a; color: #92400e; }
.vectiss-vehiculos--minimal .vectiss-badge--oferta     { border-color: #fca5a5; color: #b91c1c; }
.vectiss-vehiculos--minimal .vectiss-badge--destacado  { border-color: #c4b5fd; color: #5b21b6; }
.vectiss-vehiculos--minimal .vectiss-badge--disponible { border-color: #86efac; color: #15803d; }
.vectiss-vehiculos--minimal .vectiss-badge--reserva    { border-color: #93c5fd; color: #1d4ed8; }
.vectiss-vehiculos--minimal .vectiss-vehiculos-titulo  { font-weight: 600; letter-spacing: -.025em; }
.vectiss-vehiculos--minimal .vectiss-vacio             { background: transparent; border-color: #e5e7eb; }

/* ── prefers-reduced-motion: todos los nuevos transitions en un bloque ───── */
@media (prefers-reduced-motion: reduce) {
    .vectiss-vehiculos .vectiss-card,
    .vectiss-vehiculos .vectiss-card-media img,
    .vectiss-vehiculos .vectiss-card-boton,
    .vectiss-vehiculos .vectiss-card-boton::after,
    .vectiss-vehiculos .vectiss-vehiculos-link span,
    .vectiss-vehiculos .vectiss-vacio-accion,
    .vectiss-carrusel-flecha { transition: none !important; animation: none !important; }
    .vectiss-vehiculos .vectiss-card:hover                         { transform: none; }
    .vectiss-vehiculos .vectiss-card:hover .vectiss-card-media img { transform: none; }
    .vectiss-vehiculos .vectiss-card-boton:hover                   { transform: none; }
    .vectiss-vehiculos--minimal .vectiss-card-boton:hover::after   { transform: none; }
}