/* ══ Catálogo /vehiculos/ y sus categorías — propuesta 9 (2026-10-09) ══════════════════════
   Plantilla vehiculos/catalogo.html + parcial vehiculos/_catalogo_items.html.

   Todo cuelga de `.vc` y con prefijo `vc-`: en producción las clases de Tailwind se renombran
   (tailwindcss-patch) y una clase propia llamada `grid` o `hidden` se rompería.

   Sin JS: el panel de filtros es un <details>, el menú de listas y las versiones son radios que
   se leen con :has(). El JS (vehiculos-catalogo.js) solo evita la recarga al buscar, filtrar,
   ordenar y «Cargar más», y coloca las barras fijas bajo la cabecera del sitio.

   Colores: los de la paleta Pizarra de :root (style.css). Azul solo en enlaces destacados
   («Ver ficha →», «Más modelos … →») y en los hover; el resto, tinta, grises y el acento. */

.vc {
    --vc-ink: var(--ink);
    --vc-ink2: rgb(var(--gris-700));
    --vc-mute: var(--ink-2);
    --vc-soft: rgb(var(--gris-500));
    --vc-faint: rgb(var(--gris-400));
    --vc-bg: var(--surface);
    --vc-bg1: var(--ground);
    --vc-bg2: rgb(var(--gris-100));
    --vc-line: var(--hair);
    --vc-line2: rgb(var(--gris-100));
    --vc-azul: var(--azul);
    --vc-bev: var(--bev);
    --vc-bev-bg: rgb(var(--bev-rgb) / .08);
    /* Alto de la cabecera fija del sitio (h-20 + filete). El JS lo mide; este es el valor de
       partida. */
    --vc-top: 81px;

    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
    color: var(--vc-ink);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
@media (min-width: 640px) { .vc { padding: 0 24px; } }
@media (min-width: 1024px) { .vc { padding: 0 32px; } }
.vc a { color: inherit; text-decoration: none; }
.vc img { display: block; max-width: 100%; }
.vc [hidden] { display: none !important; }

.vc-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vc-bev); }
.vc .vc-more { font-size: 13px; font-weight: 600; color: var(--vc-azul); }
.vc .vc-more:hover { text-decoration: underline; }

/* ── H1 compacto con contador ── */
.vc-vh { padding: 24px 0 16px; }
.vc-cnt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vc-bev); }
.vc-vh h1 { font-size: 28px; line-height: 1.15; font-weight: 700; letter-spacing: -.02em; margin: 6px 0 0; }
@media (min-width: 1024px) { .vc-vh h1 { font-size: 32px; } }

/* ── Barra: buscador + «Filtros» ──
   Se desplaza con la página; `relative` es el contenedor de «Filtros» (absolute). */
.vc-bar { position: relative; background: var(--vc-bg); border-bottom: 1px solid var(--vc-line); }
.vc-bar-in { display: flex; gap: 8px; align-items: center; padding: 12px 96px 12px 0; }
.vc-search { display: flex; gap: 8px; flex: 1; min-width: 0; }
.vc-search input { flex: 1; min-width: 0; height: 44px; font: inherit; font-size: 15px; color: var(--vc-ink); padding: 10px 14px; border: 1px solid var(--vc-line); border-radius: 8px; background: var(--vc-bg); }
.vc-search input:focus { outline: 2px solid var(--vc-bev); outline-offset: -1px; border-color: transparent; }
.vc-search button { font: inherit; font-size: 13px; font-weight: 600; color: #fff; background: var(--vc-ink); border: 0; border-radius: 8px; padding: 0 16px; cursor: pointer; }
.vc-flt summary { position: absolute; top: 12px; right: 0; width: 88px; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--vc-ink); background: var(--vc-bg); border: 1px solid var(--vc-line); border-radius: 8px; }
.vc-flt summary::-webkit-details-marker { display: none; }
.vc-flt summary::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.vc-flt summary:hover { border-color: var(--vc-ink2); }
.vc-flt[open] summary { border-color: var(--vc-ink); }
.vc-flt[open] summary::before { transform: translateY(2px) rotate(-135deg); }
.vc-flt summary:focus-visible { outline: 2px solid var(--vc-bev); outline-offset: 2px; }
/* Punto en «Filtros» cuando hay alguno aplicado. */
.vc-flt:has(option:checked:not([value=""])) summary::after { content: ""; position: absolute; top: -4px; right: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--vc-bev); border: 2px solid var(--vc-bg); }
.vc-bar:has(.vc-flt[open]) + .vc-mnav { display: none; }
.vc-panel { padding: 4px 0 16px; }
.vc-fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 639px) { .vc-fs:last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 640px) { .vc-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vc-fgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.vc-fs { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vc-fs span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vc-soft); }
.vc-fs select { -webkit-appearance: none; appearance: none; width: 100%; font: inherit; font-size: 13px; color: var(--vc-ink); background: var(--vc-bg); border: 1px solid var(--vc-line); border-radius: 6px; padding: 9px 30px 9px 12px; cursor: pointer; text-overflow: ellipsis; }
.vc-fs::after { content: ""; position: absolute; right: 13px; bottom: 17px; width: 6px; height: 6px; border: solid var(--vc-ink2); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.vc-fs select:hover { border-color: var(--vc-ink2); }
.vc-fs select:focus-visible { outline: 2px solid var(--vc-bev); outline-offset: -1px; }
.vc-fs:has(option:checked:not([value=""])) select { border-color: var(--vc-ink); font-weight: 600; }
.vc-fact { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
.vc-fact button { font: inherit; font-size: 13px; font-weight: 600; border-radius: 8px; cursor: pointer; padding: 10px 20px; }
.vc-fact .vc-rst { color: var(--vc-soft); background: none; border: 0; padding: 10px 8px; }
.vc-fact .vc-rst:hover { color: var(--vc-ink); }
.vc-fact .vc-apl { color: #fff; background: var(--vc-ink); border: 0; }
.vc-fact .vc-apl:hover { background: var(--vc-bev); }
@media (max-width: 639px) {
    .vc-fact { justify-content: space-between; }
    .vc-fact .vc-apl { flex: 1; }
    /* Por debajo de 16px, Safari de iOS amplía la página al enfocar el campo. */
    .vc-search input, .vc-fs select { font-size: 16px; }
}

/* ── Menú de listas hermanas (solo en las categorías) ──
   Se desplaza con la página, como la barra del buscador. */
.vc-mnav { padding: 0 0 10px; background: var(--vc-bg); border-bottom: 1px solid var(--vc-line); }
@media (min-width: 640px) {
    .vc-bar--menu { border-bottom: 0; }
}
.vc-mtabs { display: flex; gap: 20px; overflow-x: auto; border-bottom: 1px solid var(--vc-line); margin-bottom: 12px; scrollbar-width: none; }
.vc-mtabs::-webkit-scrollbar { display: none; }
.vc-mtabs input { position: absolute; opacity: 0; pointer-events: none; }
.vc-mtabs label { flex: none; font-size: 13px; font-weight: 600; color: var(--vc-soft); padding: 10px 0; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.vc-mtabs label:hover { color: var(--vc-ink); }
.vc-mtabs input:checked + label { color: var(--vc-ink); border-color: var(--vc-ink); }
.vc-mtabs input:focus-visible + label { outline: 2px solid var(--vc-bev); }
.vc-mp { display: none; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.vc-mp::-webkit-scrollbar { display: none; }
.vc-mp a, .vc-mp span { flex: none; font-size: 12.5px; font-weight: 600; color: var(--vc-ink2); background: var(--vc-bg1); border: 1px solid var(--vc-line2); border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.vc-mp a:hover { color: var(--vc-bev); border-color: var(--vc-bev); }
.vc-mp .vc-on { background: var(--vc-ink); color: #fff; border-color: var(--vc-ink); }
.vc-mnav:has(#vc-mg0:checked) .vc-mp0, .vc-mnav:has(#vc-mg1:checked) .vc-mp1,
.vc-mnav:has(#vc-mg2:checked) .vc-mp2, .vc-mnav:has(#vc-mg3:checked) .vc-mp3,
.vc-mnav:has(#vc-mg4:checked) .vc-mp4, .vc-mnav:has(#vc-mg5:checked) .vc-mp5 { display: flex; }

/* ── Resultados y orden ── */
.vc-resbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 0; }
.vc-resbar p { font-size: 13px; color: var(--vc-soft); }
.vc-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--vc-soft); }
.vc-sort select { font: inherit; font-size: 13px; color: var(--vc-ink); border: 1px solid var(--vc-line); border-radius: 6px; padding: 6px 8px; background: var(--vc-bg); }
.vc-sort button { font: inherit; font-size: 12.5px; font-weight: 600; color: var(--vc-bev); background: none; border: 0; cursor: pointer; }
@media (max-width: 639px) { .vc-sort label { display: none; } }

/* ── Imagen con logo y carrocería ── */
.vc-pic { position: relative; display: block; overflow: hidden; background: var(--vc-bg2); }
.vc-pic > img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.vc-bn { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; background: var(--vc-bg); border-radius: 6px; padding: 3px 8px 3px 4px; font-size: 11.5px; font-weight: 600; color: var(--vc-ink2); line-height: 1.4; }
.vc-bn img { height: 18px; width: auto; max-width: 44px; object-fit: contain; }
.vc-bn--t { padding: 3px 8px; }

/* ── Rejilla de modelos ──
   `dense`: el panel de versiones va detrás de su tarjeta en el HTML y ocupa la fila entera;
   las tarjetas siguientes rellenan el hueco de la fila de arriba, así el panel cae justo
   debajo de la fila de la tarjeta abierta. */
.vc-grid { display: grid; gap: 40px 24px; grid-template-columns: minmax(0, 1fr); grid-auto-flow: row dense; }
@media (min-width: 640px) { .vc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vc-grid > * { min-width: 0; }
.vc-grid[aria-busy="true"] { opacity: .55; transition: opacity .15s; }
.vc-car { display: flex; flex-direction: column; container-type: inline-size; }
.vc-car .vc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 14px; padding-inline: 16px; }
.vc-car h3 { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; flex: 1; min-width: 0; padding-top: 4px; }
.vc-car h3 a:hover { text-decoration: underline; }

/* Seis datos. Sangrado lateral como el cuerpo de las tarjetas de /marcas (.mi-b): con margen y
   no con padding, que dejaría ver el gris del fondo que dibuja las líneas entre celdas. */
.vc-k6 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 12px 16px 0; background: var(--vc-line); border-block: 1px solid var(--vc-line); }
@media (max-width: 639px) { .vc-car .vc-top { padding-inline: 14px; } .vc-k6 { margin-inline: 14px; } }
.vc-k6 div { display: flex; flex-direction: column; justify-content: center; background: var(--vc-bg); padding: 10px 8px; min-width: 0; text-align: center; }
.vc-k6 dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--vc-soft); line-height: 1.4; }
.vc-k6 dt small { font-size: 9.5px; letter-spacing: .04em; color: var(--vc-faint); }
.vc-k6 dd { font-size: 14px; font-weight: 700; color: var(--vc-ink); line-height: 1.3; margin-top: 2px; font-variant-numeric: tabular-nums; }
@container (max-width: 340px) { .vc-k6 div { padding: 10px 4px; } .vc-k6 dd { font-size: 13px; } }
@container (max-width: 300px) { .vc-k6 dd { font-size: 12.5px; } }

/* «Comparar»: alimenta el comparador del sitio (store `compareBar` de compare_bar.js, máx. 3
   versiones). El estado lo pone Alpine con `is-on`. */
.vc-cmp { flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--vc-mute); border: 1px solid var(--vc-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; background: var(--vc-bg); }
.vc-cmp::before { content: ""; width: 12px; height: 12px; border: 1.5px solid var(--vc-faint); border-radius: 3px; box-sizing: border-box; }
.vc-cmp:hover { border-color: var(--vc-bev); color: var(--vc-bev); }
.vc-cmp.is-on { border-color: var(--vc-bev); color: var(--vc-bev); background: var(--vc-bev-bg); }
.vc-cmp.is-on::before { background: var(--vc-bev); border-color: var(--vc-bev); }
.vc-cmp:focus-visible { outline: 2px solid var(--vc-bev); outline-offset: 2px; }
.vc-cmp:disabled { opacity: .45; cursor: not-allowed; }
.vc-cmp:disabled:hover { border-color: var(--vc-line); color: var(--vc-mute); }
.vc-cmp .vc-on { display: none; }
.vc-cmp.is-on .vc-on { display: inline; }
.vc-cmp.is-on .vc-off { display: none; }

/* Botón de versiones + «Ver modelo» */
.vc-acts { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.vc-vt-in { position: absolute; opacity: 0; pointer-events: none; }
.vc-vt { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--vc-line); background: var(--vc-bg1); border-radius: 6px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--vc-ink2); cursor: pointer; white-space: nowrap; }
.vc-vt::before { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); margin: 0 2px; }
.vc-vt:hover { border-color: var(--vc-bev); color: var(--vc-bev); }
.vc-vt-on { display: none; }
.vc-vt-in:checked + .vc-vt { display: none; }
.vc-vt-in:checked + .vc-vt + .vc-vt-on { display: inline-flex; background: var(--vc-ink); border-color: var(--vc-ink); color: #fff; }
.vc-vt-on::before { transform: translateY(2px) rotate(-135deg); }
.vc-vt-in:focus-visible + .vc-vt, .vc-vt-in:focus-visible + .vc-vt + .vc-vt-on { outline: 2px solid var(--vc-bev); outline-offset: 2px; }
#v-none:focus-visible + .vc-grid > .vc-car:first-child .vc-vt { outline: 2px solid var(--vc-bev); outline-offset: 2px; }
.vc-acts .vc-go { flex: 1; min-width: 0; text-align: center; border: 1px solid var(--vc-ink); border-radius: 6px; padding: 10px; font-size: 13px; font-weight: 600; color: var(--vc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-acts .vc-go:hover { border-color: var(--vc-bev); color: var(--vc-bev); }

/* ── Panel de versiones bajo la fila ── */
.vc-vp { display: none; position: relative; grid-column: 1 / -1; margin-top: -16px; background: var(--vc-bg1); border: 1px solid var(--vc-line); border-radius: 8px; padding: 20px 20px 24px; scroll-margin-top: calc(var(--vc-top) + 16px); }
.vc-car:has(.vc-vt-in:checked) + .vc-vp { display: block; }
@media (max-width: 639px) { .vc-vp { margin: -16px -16px 0; border-radius: 0; border-width: 1px 0; padding: 20px 16px 24px; } }
.vc-vp-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.vc-vp-hd h3 { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; margin-top: 4px; }
.vc-vp-hd .vc-n { font-size: 13px; color: var(--vc-soft); }
.vc-vp .vc-x { flex: none; font-size: 13px; font-weight: 600; color: var(--vc-mute); background: var(--vc-bg); border: 1px solid var(--vc-line); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.vc-vp .vc-x:hover { color: var(--vc-ink); border-color: var(--vc-ink); }
.vc-vp-ft { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--vc-line); font-size: 13px; color: var(--vc-soft); }
.vc-vr { position: absolute; opacity: 0; pointer-events: none; }
.vc-vp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.vc-vcmp { min-width: 0; }
@media (min-width: 1024px) { .vc-vp-body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; align-items: start; } }
.vc-vsel { position: relative; min-width: 0; }
@media (min-width: 640px) and (max-width: 1023px) { .vc-vsel { max-width: 480px; } }
.vc-vx { display: none; }
.vc-vch-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; }
.vc-vch-row::-webkit-scrollbar { display: none; }
.vc-vch { flex: none; font-size: 12.5px; font-weight: 600; color: var(--vc-ink2); background: var(--vc-bg); border: 1px solid var(--vc-line); border-radius: 999px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.vc-vch:hover { border-color: var(--vc-bev); color: var(--vc-bev); }
@media (min-width: 1024px) { .vc-vch-row { display: none; } }
.vc-vinf .vc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-top: 14px; }
.vc-vinf .vc-nm { min-width: 0; }
.vc-vinf h4 { font-size: 18px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; padding-top: 4px; }
.vc-vinf h4 a:hover { text-decoration: underline; }
.vc-vinf .vc-sub { font-size: 12.5px; color: var(--vc-soft); }
.vc-go-btn { display: block; text-align: center; padding-top: 14px; }
.vc-go-btn a { display: block; border: 1px solid var(--vc-ink); border-radius: 6px; padding: 10px; font-size: 13px; font-weight: 600; color: var(--vc-ink); background: var(--vc-bg); }
.vc-go-btn a:hover { border-color: var(--vc-bev); color: var(--vc-bev); }

/* Tabla comparativa entre versiones */
.vc-vhint { font-size: 12.5px; color: var(--vc-soft); margin-bottom: 8px; }
.vc-vtab-wrap { overflow-x: auto; }
.vc-vtab { border-collapse: collapse; width: 100%; }
.vc-vtab th, .vc-vtab td { padding: 10px 12px; border-bottom: 1px solid var(--vc-line); text-align: left; vertical-align: middle; }
.vc-vtab thead th { padding: 0 6px 10px; border-bottom-color: var(--vc-ink2); }
.vc-vtab thead label { display: block; text-align: center; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--vc-ink2); background: var(--vc-bg); border: 1px solid var(--vc-line); border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.vc-vtab thead label:hover { border-color: var(--vc-bev); color: var(--vc-bev); }
.vc-vtab thead td, .vc-vtab tbody th, .vc-vtab .vc-lk td:first-child { position: sticky; left: 0; z-index: 1; background: var(--vc-bg1); padding-left: 0; width: 88px; min-width: 88px; }
.vc-vtab tbody th { font-size: 12px; font-weight: 400; color: var(--vc-soft); line-height: 1.3; }
.vc-vtab td { font-size: 14px; font-weight: 700; color: var(--vc-ink); white-space: nowrap; min-width: 112px; text-align: center; font-variant-numeric: tabular-nums; }
.vc-vtab td.vc-b::after { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vc-bev); margin: 0 -12px 0 6px; vertical-align: 2px; }
.vc-vtab .vc-lk th, .vc-vtab .vc-lk td { border-bottom: 0; font-weight: 600; }
.vc-vtab .vc-lk .vc-more { display: inline-block; font-size: 12.5px; margin-top: 8px; }
.vc-vlg { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--vc-soft); margin-top: 10px; }
.vc-vlg::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--vc-bev); }

/* Versión elegida (radio N ↔ imagen, ficha, columna y chip N). Reglas de la 1 a la 20, el tope
   de MAX_VERSIONES en vehiculos/catalogo.py. */
.vc-vp:has(.vc-vr-1:checked) .vc-vx-1, .vc-vp:has(.vc-vr-2:checked) .vc-vx-2,
.vc-vp:has(.vc-vr-3:checked) .vc-vx-3, .vc-vp:has(.vc-vr-4:checked) .vc-vx-4,
.vc-vp:has(.vc-vr-5:checked) .vc-vx-5, .vc-vp:has(.vc-vr-6:checked) .vc-vx-6,
.vc-vp:has(.vc-vr-7:checked) .vc-vx-7, .vc-vp:has(.vc-vr-8:checked) .vc-vx-8,
.vc-vp:has(.vc-vr-9:checked) .vc-vx-9, .vc-vp:has(.vc-vr-10:checked) .vc-vx-10,
.vc-vp:has(.vc-vr-11:checked) .vc-vx-11, .vc-vp:has(.vc-vr-12:checked) .vc-vx-12,
.vc-vp:has(.vc-vr-13:checked) .vc-vx-13, .vc-vp:has(.vc-vr-14:checked) .vc-vx-14,
.vc-vp:has(.vc-vr-15:checked) .vc-vx-15, .vc-vp:has(.vc-vr-16:checked) .vc-vx-16,
.vc-vp:has(.vc-vr-17:checked) .vc-vx-17, .vc-vp:has(.vc-vr-18:checked) .vc-vx-18,
.vc-vp:has(.vc-vr-19:checked) .vc-vx-19, .vc-vp:has(.vc-vr-20:checked) .vc-vx-20 { display: block; }

.vc-vp:has(.vc-vr-1:checked) .vc-c-1, .vc-vp:has(.vc-vr-2:checked) .vc-c-2,
.vc-vp:has(.vc-vr-3:checked) .vc-c-3, .vc-vp:has(.vc-vr-4:checked) .vc-c-4,
.vc-vp:has(.vc-vr-5:checked) .vc-c-5, .vc-vp:has(.vc-vr-6:checked) .vc-c-6,
.vc-vp:has(.vc-vr-7:checked) .vc-c-7, .vc-vp:has(.vc-vr-8:checked) .vc-c-8,
.vc-vp:has(.vc-vr-9:checked) .vc-c-9, .vc-vp:has(.vc-vr-10:checked) .vc-c-10,
.vc-vp:has(.vc-vr-11:checked) .vc-c-11, .vc-vp:has(.vc-vr-12:checked) .vc-c-12,
.vc-vp:has(.vc-vr-13:checked) .vc-c-13, .vc-vp:has(.vc-vr-14:checked) .vc-c-14,
.vc-vp:has(.vc-vr-15:checked) .vc-c-15, .vc-vp:has(.vc-vr-16:checked) .vc-c-16,
.vc-vp:has(.vc-vr-17:checked) .vc-c-17, .vc-vp:has(.vc-vr-18:checked) .vc-c-18,
.vc-vp:has(.vc-vr-19:checked) .vc-c-19, .vc-vp:has(.vc-vr-20:checked) .vc-c-20 { background: var(--vc-bev-bg); }

.vc-vp:has(.vc-vr-1:checked) :is(.vc-c-1 label, .vc-vch-1), .vc-vp:has(.vc-vr-2:checked) :is(.vc-c-2 label, .vc-vch-2),
.vc-vp:has(.vc-vr-3:checked) :is(.vc-c-3 label, .vc-vch-3), .vc-vp:has(.vc-vr-4:checked) :is(.vc-c-4 label, .vc-vch-4),
.vc-vp:has(.vc-vr-5:checked) :is(.vc-c-5 label, .vc-vch-5), .vc-vp:has(.vc-vr-6:checked) :is(.vc-c-6 label, .vc-vch-6),
.vc-vp:has(.vc-vr-7:checked) :is(.vc-c-7 label, .vc-vch-7), .vc-vp:has(.vc-vr-8:checked) :is(.vc-c-8 label, .vc-vch-8),
.vc-vp:has(.vc-vr-9:checked) :is(.vc-c-9 label, .vc-vch-9), .vc-vp:has(.vc-vr-10:checked) :is(.vc-c-10 label, .vc-vch-10),
.vc-vp:has(.vc-vr-11:checked) :is(.vc-c-11 label, .vc-vch-11), .vc-vp:has(.vc-vr-12:checked) :is(.vc-c-12 label, .vc-vch-12),
.vc-vp:has(.vc-vr-13:checked) :is(.vc-c-13 label, .vc-vch-13), .vc-vp:has(.vc-vr-14:checked) :is(.vc-c-14 label, .vc-vch-14),
.vc-vp:has(.vc-vr-15:checked) :is(.vc-c-15 label, .vc-vch-15), .vc-vp:has(.vc-vr-16:checked) :is(.vc-c-16 label, .vc-vch-16),
.vc-vp:has(.vc-vr-17:checked) :is(.vc-c-17 label, .vc-vch-17), .vc-vp:has(.vc-vr-18:checked) :is(.vc-c-18 label, .vc-vch-18),
.vc-vp:has(.vc-vr-19:checked) :is(.vc-c-19 label, .vc-vch-19), .vc-vp:has(.vc-vr-20:checked) :is(.vc-c-20 label, .vc-vch-20) { background: var(--vc-ink); border-color: var(--vc-ink); color: #fff; }

.vc-vp:has(.vc-vr-1:focus-visible) :is(.vc-c-1 label, .vc-vch-1), .vc-vp:has(.vc-vr-2:focus-visible) :is(.vc-c-2 label, .vc-vch-2),
.vc-vp:has(.vc-vr-3:focus-visible) :is(.vc-c-3 label, .vc-vch-3), .vc-vp:has(.vc-vr-4:focus-visible) :is(.vc-c-4 label, .vc-vch-4),
.vc-vp:has(.vc-vr-5:focus-visible) :is(.vc-c-5 label, .vc-vch-5), .vc-vp:has(.vc-vr-6:focus-visible) :is(.vc-c-6 label, .vc-vch-6),
.vc-vp:has(.vc-vr-7:focus-visible) :is(.vc-c-7 label, .vc-vch-7), .vc-vp:has(.vc-vr-8:focus-visible) :is(.vc-c-8 label, .vc-vch-8),
.vc-vp:has(.vc-vr-9:focus-visible) :is(.vc-c-9 label, .vc-vch-9), .vc-vp:has(.vc-vr-10:focus-visible) :is(.vc-c-10 label, .vc-vch-10),
.vc-vp:has(.vc-vr-11:focus-visible) :is(.vc-c-11 label, .vc-vch-11), .vc-vp:has(.vc-vr-12:focus-visible) :is(.vc-c-12 label, .vc-vch-12),
.vc-vp:has(.vc-vr-13:focus-visible) :is(.vc-c-13 label, .vc-vch-13), .vc-vp:has(.vc-vr-14:focus-visible) :is(.vc-c-14 label, .vc-vch-14),
.vc-vp:has(.vc-vr-15:focus-visible) :is(.vc-c-15 label, .vc-vch-15), .vc-vp:has(.vc-vr-16:focus-visible) :is(.vc-c-16 label, .vc-vch-16),
.vc-vp:has(.vc-vr-17:focus-visible) :is(.vc-c-17 label, .vc-vch-17), .vc-vp:has(.vc-vr-18:focus-visible) :is(.vc-c-18 label, .vc-vch-18),
.vc-vp:has(.vc-vr-19:focus-visible) :is(.vc-c-19 label, .vc-vch-19), .vc-vp:has(.vc-vr-20:focus-visible) :is(.vc-c-20 label, .vc-vch-20) { outline: 2px solid var(--vc-bev); outline-offset: 2px; }

/* ── Publicidad: 300×250 en móvil, 970×250 en tablet y escritorio ── */
.vc-ad { flex-direction: column; align-items: center; gap: 6px; background: var(--vc-bg1); border-radius: 8px; padding: 12px 16px 16px; grid-column: 1 / -1; }
.vc-ad span { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vc-faint); }
.vc-ad .vc-slot { width: 300px; max-width: 100%; height: 250px; background: var(--vc-bg); border: 1px solid var(--vc-line2); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--vc-faint); }
.vc-ad-m { display: flex; display:none}
.vc-ad-d { display: none; }
@media (min-width: 640px) { .vc-ad-m { display: none; } .vc-ad-d { display: flex; display:none} }
@media (min-width: 1024px) { .vc-ad-d .vc-slot { width: 970px; } }
@media (max-width: 639px) { .vc-ad { margin: 0 -16px; border-radius: 0; } }

/* ── Sin resultados ── */
.vc-empty { padding: 48px 0; text-align: center; border-block: 1px solid var(--vc-line); }
.vc-empty h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.vc-empty p { font-size: 13.5px; color: var(--vc-soft); margin-top: 6px; }

/* ── Cargar más ── */
.vc-lm { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 48px auto 0; text-align: center; }
@media (min-width: 640px) { .vc-lm { max-width: 320px; } }
.vc-lm p { font-size: 13px; color: var(--vc-soft); }
.vc-lm p b { font-weight: 600; color: var(--vc-ink); }
.vc-lm-bar { display: block; width: 100%; height: 3px; border-radius: 2px; background: var(--vc-bg2); overflow: hidden; }
.vc-lm-bar i { display: block; height: 100%; background: var(--vc-bev); }
.vc-more-btn { display: block; width: 100%; font: inherit; border: 1px solid var(--vc-ink); border-radius: 6px; padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--vc-ink); background: var(--vc-bg); cursor: pointer; }
.vc-more-btn:hover { border-color: var(--vc-bev); color: var(--vc-bev); }
.vc-more-btn:disabled { opacity: .6; cursor: progress; }

/* ── Sigue explorando ── */
.vc-expl { padding-top: 56px; }
.vc-expl h2 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 4px 0 16px; }
.vc-expl .vc-list { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--vc-line); }
@media (min-width: 768px) { .vc-expl .vc-list { grid-template-columns: 1fr 1fr; column-gap: 32px; } }
.vc-expl a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--vc-line); }
.vc-expl b { display: block; font-size: 13.5px; font-weight: 600; }
.vc-expl small { font-size: 12px; color: var(--vc-soft); }
.vc-expl i { font-style: normal; color: var(--vc-faint); }
.vc-expl a:hover b { text-decoration: underline; }
.vc-expl a:hover i { color: var(--vc-ink); }

/* ── Texto de la página, al pie ── */
.vc-about { max-width: 768px; padding: 56px 0 80px; font-size: 13.5px; color: var(--vc-mute); line-height: 1.6; }
.vc-about h2 { font-size: 15px; font-weight: 700; color: var(--vc-ink); margin-bottom: 6px; }
.vc-about strong { color: var(--vc-ink2); font-weight: 600; }