/**
 * VO Reservas — sistema de diseño del frontend.
 *
 * Dirección: oscuro cinematográfico. Las fotos del vehículo son el elemento
 * principal y todo lo demás se aparta para dejarlas respirar. El fondo oscuro
 * no es solo estética: hace que fotos tomadas en el patio del concesionario,
 * sin luz de estudio, se vean mucho mejor de lo que se verían sobre blanco.
 *
 * No hereda variables del tema a propósito. El encargo era un diseño propio,
 * así que aquí se define todo y solo se respeta la cabecera y el pie.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

/**
 * Estos son los valores del tema «Nocturno ámbar», que es el de serie. Los
 * demás temas se sirven desde PHP como un bloque que redefine estas mismas
 * variables, así que aquí no hace falta declarar nada más: cualquier regla del
 * fichero que use un color debe hacerlo a través de un token de esta lista, o
 * al cambiar de tema quedará un híbrido a medias.
 *
 * Las variantes con sufijo -rgb existen para poder componer transparencias con
 * rgb(var(--x-rgb) / .3): sin ellas haría falta un token por cada nivel de
 * opacidad, y los degradados y velos se quedarían anclados al tema oscuro.
 */
.vor-theme {
	/* Superficies, de más profunda a más elevada. */
	--vor-bg: #08090b;
	--vor-bg-rgb: 8 9 11;
	--vor-surface: #101217;
	--vor-surface-2: #171a21;
	--vor-surface-3: #1f232c;
	--vor-surface-rgb: 23 26 33;

	/* Líneas: casi invisibles, solo para separar sin ruido. */
	--vor-line: #262b35;
	--vor-line-soft: #1a1e25;

	/* Texto. */
	--vor-ink: #f3f5f8;
	--vor-ink-2: #a9b1bc;
	--vor-ink-3: #818a98;
	--vor-ink-rgb: 243 245 248;

	/* Acento: reservado para la acción principal y los datos de precio. */
	--vor-accent: #d9a441;
	--vor-accent-rgb: 217 164 65;
	--vor-accent-hi: #f0c069;
	--vor-accent-ink: #0a0a0b;
	--vor-accent-glow: rgb(var(--vor-accent-rgb) / .22);

	/* Estados. */
	--vor-ok: #4ea87a;
	--vor-warn: #d98d41;
	--vor-off: #6d7684;

	/* Error: borde, velo y texto. */
	--vor-danger: #e0574d;
	--vor-danger-rgb: 224 87 77;
	--vor-danger-line: #8a3f3a;
	--vor-danger-ink: #f0a49e;

	/* Velos. El de arriba oscurece el fondo de un modal; el de abajo es el que
	   llevan las barras flotantes sobre las fotos. */
	--vor-overlay: rgb(var(--vor-bg-rgb) / .78);
	--vor-scrim: rgb(var(--vor-bg-rgb) / .72);
	--vor-scrim-fuerte: rgb(var(--vor-bg-rgb) / .88);

	/* Ritmo vertical y radios. */
	--vor-r-s: 8px;
	--vor-r-m: 14px;
	--vor-r-l: 20px;

	/* Sombras: profundas y suaves, nunca duras. En un tema claro el negro puro
	   ensucia, así que el color de la sombra también es un token. */
	--vor-shadow-rgb: 0 0 0;
	--vor-shadow: 0 2px 8px rgb(var(--vor-shadow-rgb) / .4), 0 16px 40px rgb(var(--vor-shadow-rgb) / .34);
	--vor-shadow-hi: 0 4px 14px rgb(var(--vor-shadow-rgb) / .5), 0 26px 60px rgb(var(--vor-shadow-rgb) / .45);

	/* Verde de WhatsApp. No es del tema: es la marca, y cambiarlo confundiría. */
	--vor-whatsapp: #25d366;
	--vor-whatsapp-rgb: 37 211 102;
	--vor-whatsapp-ink: #4ee08a;
	--vor-whatsapp-ink-hi: #6ee9a1;

	/* Tipografía: pila del sistema para no depender de una CDN externa. */
	--vor-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--vor-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   2. Lienzo a sangre
   ========================================================================== */

/**
 * Se libera el contenedor del tema y luego el lienzo ocupa el 100% de lo que
 * queda. Antes se usaba el truco de 100vw con margen negativo, pero los temas
 * de bloques (GeneratePress incluido, desde que usa plantillas de bloques)
 * centran los hijos de .is-layout-constrained con márgenes !important, así que
 * el margen negativo se ignoraba y el ancho de 100vw desbordaba la página.
 */
/**
 * El modelo de caja se declara aquí y no se hereda del tema.
 * Sin esto, .vor-wrap sumaba su relleno al 100% de ancho y provocaba 32 px de
 * desbordamiento horizontal en móvil: el ancho de la ventana más los dos
 * rellenos laterales.
 */
.vor-lienzo,
.vor-lienzo *,
.vor-lienzo *::before,
.vor-lienzo *::after {
	box-sizing: border-box;
}

.vor-lienzo {
	width: 100%;
	margin: 0;
	padding: 0;
	background: var(--vor-bg);
	color: var(--vor-ink);
	font-family: var(--vor-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/**
 * Nada de desplazamiento lateral accidental.
 *
 * Hace falta declararlo también en el elemento raíz: con overflow-x solo en el
 * body, el navegador lo propaga al viewport y el body deja de contener nada, de
 * modo que la columna fija de la tabla comparativa arrastraba la página entera
 * 132 px en móvil. Se usa clip en lugar de hidden para no crear un contenedor
 * de desplazamiento que rompería los elementos sticky de dentro.
 */
.vor-full-bleed { overflow-x: clip; }

html:has( > body.vor-full-bleed ) { overflow-x: clip; }

/**
 * Se elimina el mini-carrito de WooCommerce en nuestras pantallas.
 *
 * Su cajón lateral se renderiza en el HTML y, si su JavaScript no llega a
 * inicializarlo, queda visible como un panel semitransparente que tapa media
 * página. Además desbordaba el viewport en móvil. En un concesionario que solo
 * cobra señales de reserva no aporta nada: se reserva un coche y se pasa
 * directo al pago, sin carrito de por medio.
 */
.vor-full-bleed .wp-block-woocommerce-mini-cart-contents,
.vor-full-bleed .wc-block-mini-cart__template-part,
.vor-full-bleed .wc-block-components-drawer,
.vor-full-bleed .wc-block-components-drawer__screen-overlay,
.vor-full-bleed .wc-block-components-drawer__content,
.vor-full-bleed .wc-block-components-drawer__close-wrapper,
.vor-full-bleed .wp-block-woocommerce-mini-cart,
.vor-full-bleed .wc-block-mini-cart {
	display: none !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/**
 * Neutraliza los contenedores del tema, tanto los clásicos como los de bloques.
 * Las clases has-global-padding y is-layout-constrained son las que imponen
 * ancho y relleno en las plantillas de bloques.
 */
.vor-full-bleed .site-content,
.vor-full-bleed .content-area,
.vor-full-bleed .site-main,
.vor-full-bleed .entry-content,
.vor-full-bleed .wp-block-post-content,
.vor-full-bleed .has-global-padding,
.vor-full-bleed .is-layout-constrained,
.vor-full-bleed .wp-site-blocks,
.vor-full-bleed article.post,
.vor-full-bleed article.page,
.vor-full-bleed article.product,
.vor-full-bleed .inside-article {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: none !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* WordPress centra los hijos del layout con !important: hay que ganarle. */
.vor-full-bleed .is-layout-constrained > .vor-lienzo,
.vor-full-bleed .is-layout-flow > .vor-lienzo,
.vor-full-bleed .entry-content > .vor-lienzo {
	max-width: none !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/**
 * El título y los espaciadores del tema se ocultan porque el diseño trae su
 * propia cabecera: si no, el título sale dos veces seguidas.
 */
.vor-full-bleed .entry-header,
.vor-full-bleed .wp-block-post-title,
.vor-full-bleed .page-header-image,
.vor-full-bleed nav.woocommerce-breadcrumb,
.vor-full-bleed .product_meta,
.vor-full-bleed .woocommerce-tabs {
	display: none !important;
}

.vor-full-bleed .site-main > .woocommerce-notices-wrapper {
	max-width: 1320px;
	margin: 0 auto;
	padding: 16px 24px 0;
}

/* Caja interior: todo el contenido legible vive dentro de este ancho. */
.vor-wrap {
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 24px;
}

@media (max-width: 640px) {
	.vor-wrap { padding: 0 16px; }
}

/* ==========================================================================
   3. Tipografía
   ========================================================================== */

/**
 * Base de los títulos dentro del lienzo.
 *
 * El margen se pone a cero para neutralizar el del tema, que en los temas de
 * bloques viene de theme.json y no se puede prever. Pero ojo con la
 * especificidad: este selector es (0,1,1) y gana a cualquier regla de una sola
 * clase aunque esté escrita después. Un `.vor-mi-titulo { margin-bottom: 26px }`
 * NO tiene efecto aquí; hay que escribirlo como `.vor-lienzo .vor-mi-titulo`
 * para que pase por delante. Ya pasó una vez con el título de sección, que se
 * quedó pegado al contenido durante semanas declarando un margen que nunca se
 * aplicaba.
 */
.vor-lienzo h1,
.vor-lienzo h2,
.vor-lienzo h3 {
	color: var(--vor-ink);
	font-family: var(--vor-font);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.08;
	margin: 0;
}

.vor-lienzo p { color: var(--vor-ink-2); }

.vor-display {
	font-size: clamp(2rem, 5vw, 3.4rem);
	letter-spacing: -.035em;
}

.vor-eyebrow {
	display: inline-block;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--vor-accent);
}

.vor-num {
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

/* ==========================================================================
   4. Botones
   ========================================================================== */

.vor-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 13px 22px;
	border: 1px solid transparent;
	border-radius: var(--vor-r-s);
	font-family: var(--vor-font);
	font-size: .9rem;
	font-weight: 650;
	letter-spacing: .01em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s var(--vor-ease), background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}

/*
 * Doble clase, y no por gusto: cuando el botón es un enlace, los temas lo pintan
 * con su color de enlace de contenido. GeneratePress lo hace con
 * «.inside-article a», que es (0,1,1) y le gana a una sola clase. El síntoma es
 * de los que no se ven leyendo el código —el texto del botón sale del color del
 * fondo del propio botón, o sea invisible— y solo aparece con los temas que
 * declaran ese selector. Es la misma precaución que ya llevan .vor-input y los
 * títulos, por el mismo motivo.
 */
.vor-btn.vor-btn--primario {
	background: var(--vor-accent);
	color: var(--vor-accent-ink);
	box-shadow: 0 0 0 0 var(--vor-accent-glow);
}

.vor-btn.vor-btn--primario:hover,
.vor-btn.vor-btn--primario:focus-visible {
	background: var(--vor-accent-hi);
	color: var(--vor-accent-ink);
	transform: translateY(-1px);
	box-shadow: 0 8px 26px var(--vor-accent-glow);
}

.vor-btn.vor-btn--fantasma {
	background: transparent;
	border-color: var(--vor-line);
	color: var(--vor-ink);
}

.vor-btn.vor-btn--fantasma:hover,
.vor-btn.vor-btn--fantasma:focus-visible {
	border-color: var(--vor-ink-3);
	background: var(--vor-surface-2);
	color: var(--vor-ink);
}

.vor-btn.vor-btn--texto {
	background: none;
	padding: 8px 4px;
	color: var(--vor-ink-2);
	font-weight: 550;
}

.vor-btn.vor-btn--texto:hover { color: var(--vor-accent); }

.vor-btn--bloque { width: 100%; }

.vor-btn--xl {
	padding: 17px 28px;
	font-size: 1rem;
}

.vor-btn.vor-btn--inactivo {
	background: var(--vor-surface-3);
	color: var(--vor-ink-3);
	cursor: not-allowed;
	pointer-events: none;
}

.vor-lienzo :focus-visible {
	outline: 2px solid var(--vor-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

/* ==========================================================================
   5. Cabecera del catálogo
   ========================================================================== */

.vor-hero {
	position: relative;
	padding: 64px 0 40px;
	border-bottom: 1px solid var(--vor-line-soft);
	/* Halo ámbar muy tenue: da profundidad sin llamar la atención. */
	background:
		radial-gradient(1200px 380px at 15% -10%, rgb(var(--vor-accent-rgb) / .07), transparent 60%),
		radial-gradient(900px 300px at 90% 0%, rgb(var(--vor-accent-rgb) / .04), transparent 55%);
}

.vor-hero__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}

.vor-hero__texto { max-width: 620px; }

.vor-hero h1 { margin: 10px 0 12px; }

.vor-hero p {
	font-size: 1.05rem;
	line-height: 1.6;
	margin: 0;
}

.vor-hero__stats {
	display: flex;
	gap: 36px;
	flex-wrap: wrap;
}

.vor-stat__valor {
	display: block;
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--vor-ink);
	line-height: 1;
}

.vor-stat__label {
	display: block;
	margin-top: 6px;
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vor-ink-3);
}

/* ==========================================================================
   6. Rejilla y barra de control
   ========================================================================== */

.vor-catalogo { padding: 0 0 80px; }

.vor-barra {
	position: sticky;
	top: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding: 16px 0;
	margin-bottom: 8px;
	background: rgb(var(--vor-bg-rgb) / .88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--vor-line-soft);
}

.vor-barra__izq,
.vor-barra__der {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.vor-contador {
	margin: 0;
	font-size: .92rem;
	color: var(--vor-ink-2);
}

.vor-contador strong {
	color: var(--vor-ink);
	font-size: 1.05rem;
}

/* Mismo motivo que .vor-input: los temas estilan `select` por elemento. */
.vor-lienzo .vor-select {
	appearance: none;
	padding: 10px 38px 10px 14px;
	border: 1px solid var(--vor-line);
	border-radius: var(--vor-r-s);
	background: var(--vor-surface-2);
	background-image: linear-gradient(45deg, transparent 50%, var(--vor-ink-2) 50%), linear-gradient(135deg, var(--vor-ink-2) 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	color: var(--vor-ink);
	font-family: var(--vor-font);
	font-size: .88rem;
	cursor: pointer;
}

.vor-lienzo .vor-select:hover { border-color: var(--vor-ink-3); }

/* Fichas de filtro activo: dan sensación de control y son fáciles de deshacer. */
.vor-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	padding: 0 0 16px;
	list-style: none;
	margin: 0;
}

.vor-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 13px;
	border: 1px solid var(--vor-line);
	border-radius: 100px;
	background: var(--vor-surface-2);
	font-size: .82rem;
	color: var(--vor-ink);
}

.vor-chip button {
	display: grid;
	place-items: center;
	width: 17px;
	height: 17px;
	border: 0;
	border-radius: 50%;
	background: var(--vor-surface-3);
	color: var(--vor-ink-2);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

.vor-chip button:hover {
	background: var(--vor-accent);
	color: var(--vor-accent-ink);
}

.vor-layout {
	display: grid;
	grid-template-columns: 272px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	padding-top: 24px;
}

.vor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 26px;
}

/* ==========================================================================
   7. Tarjeta de vehículo
   ========================================================================== */

.vor-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--vor-surface);
	border: 1px solid var(--vor-line-soft);
	border-radius: var(--vor-r-m);
	overflow: hidden;
	transition: transform .35s var(--vor-ease), border-color .35s, box-shadow .35s;
}

.vor-card:hover,
.vor-card:focus-within {
	transform: translateY(-4px);
	border-color: var(--vor-line);
	box-shadow: var(--vor-shadow-hi);
}

.vor-card--vendido { opacity: .58; }
.vor-card--vendido:hover { transform: none; }

.vor-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	background: var(--vor-surface-3);
	overflow: hidden;
}

.vor-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .7s var(--vor-ease);
}

.vor-card:hover .vor-card__media img { transform: scale(1.06); }

/* Degradado inferior: asienta la foto y deja legible lo que va encima. */
.vor-card__media::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 55%;
	background: linear-gradient(to top, rgb(var(--vor-bg-rgb) / .92), transparent);
	pointer-events: none;
}

.vor-card__sinfoto {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var(--vor-ink-3);
	font-size: .82rem;
}

.vor-card__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px 20px;
	flex: 1 1 auto;
}

.vor-card__titulo {
	font-size: 1.12rem;
	line-height: 1.25;
	margin: 0;
}

.vor-card__titulo a {
	color: var(--vor-ink);
	text-decoration: none;
}

/* El enlace cubre toda la tarjeta: más superficie de clic, sobre todo en móvil. */
.vor-card__titulo a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vor-card:hover .vor-card__titulo a { color: var(--vor-accent-hi); }

.vor-card__version {
	display: block;
	margin-top: 3px;
	font-size: .86rem;
	font-weight: 400;
	color: var(--vor-ink-3);
}

.vor-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .84rem;
	color: var(--vor-ink-2);
}

.vor-specs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vor-specs li + li::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--vor-ink-3);
	margin-right: 8px;
}

.vor-card__pie {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--vor-line-soft);
}

.vor-card__pie .vor-btn {
	position: relative;
	z-index: 2;
}

/* Precio -------------------------------------------------------------- */

.vor-precio { line-height: 1.15; }

.vor-precio__antes {
	display: block;
	font-size: .8rem;
	color: var(--vor-ink-3);
	text-decoration: line-through;
}

.vor-precio__ahora {
	display: block;
	font-size: 1.45rem;
	font-weight: 700;
	color: var(--vor-ink);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
}

.vor-precio__xl {
	font-size: clamp(2.2rem, 4.5vw, 3rem);
	font-weight: 750;
	letter-spacing: -.04em;
	color: var(--vor-ink);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.vor-precio__nota {
	font-size: .78rem;
	color: var(--vor-ink-3);
}

/* Insignias ----------------------------------------------------------- */

.vor-badges {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.vor-badge {
	padding: 5px 11px;
	border-radius: 100px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: rgb(var(--vor-bg-rgb) / .72);
	border: 1px solid rgb(var(--vor-ink-rgb) / .1);
	color: var(--vor-ink);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.vor-badge--destacado {
	background: var(--vor-accent);
	border-color: transparent;
	color: var(--vor-accent-ink);
}

.vor-badge--reservado { color: var(--vor-warn); }
.vor-badge--vendido { color: var(--vor-ink-2); }
.vor-badge--eco { color: var(--vor-ok); }

.vor-badge--xl {
	font-size: .8rem;
	padding: 8px 16px;
}

/* Favorito y comparar -------------------------------------------------- */

.vor-fav {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgb(var(--vor-ink-rgb) / .12);
	border-radius: 50%;
	background: rgb(var(--vor-bg-rgb) / .6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: pointer;
	padding: 0;
	transition: background-color .2s, transform .2s var(--vor-ease);
}

.vor-fav:hover { transform: scale(1.08); }

.vor-fav svg path {
	fill: none;
	stroke: var(--vor-ink);
	stroke-width: 1.7;
	transition: fill .2s, stroke .2s;
}

.vor-fav[aria-pressed="true"] svg path {
	fill: var(--vor-accent);
	stroke: var(--vor-accent);
}

/**
 * Botón de guardar de la ficha: icono más texto.
 *
 * El estado pulsado tiene que notarse. Guardaba bien en el navegador, pero sin
 * cambiar de aspecto ni de texto, así que desde fuera parecía que el botón no
 * hacía nada.
 */
.vor-btn--fav svg path {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	transition: fill .2s, stroke .2s;
}

.vor-btn--fav[aria-pressed="true"] {
	border-color: var(--vor-accent);
	color: var(--vor-accent-hi);
}

.vor-btn--fav[aria-pressed="true"] svg path {
	fill: var(--vor-accent);
	stroke: var(--vor-accent);
}

.vor-comparar {
	position: relative;
	z-index: 2;
	align-self: flex-start;
	border: 0;
	background: none;
	padding: 0;
	font-family: var(--vor-font);
	font-size: .8rem;
	color: var(--vor-ink-3);
	cursor: pointer;
	transition: color .2s;
}

.vor-comparar:hover { color: var(--vor-accent); }
.vor-comparar[aria-pressed="true"] { color: var(--vor-accent); font-weight: 600; }

/* ==========================================================================
   8. Panel de filtros
   ========================================================================== */

/**
 * Panel de filtros.
 *
 * Sin scroll interno a propósito. Antes tenía max-height con overflow y el
 * recorte caía a media opción —o peor, justo bajo el encabezado de un grupo,
 * que quedaba huérfano y parecía roto—. Cada lista larga ya trae su propio
 * scroll (.vor-lista), así que el panel completo se mantiene corto y puede
 * crecer sin recortes; si supera la altura de la ventana, sticky deja de
 * pegarse y el panel simplemente acompaña al scroll de la página.
 */
.vor-filtros {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 6px 20px 20px;
	background: var(--vor-surface);
	border: 1px solid var(--vor-line-soft);
	border-radius: var(--vor-r-m);
}

.vor-campo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 0;
	border-bottom: 1px solid var(--vor-line-soft);
	margin: 0;
	border-left: 0;
	border-right: 0;
	border-top: 0;
}

.vor-campo:last-of-type { border-bottom: 0; }

.vor-campo > legend,
.vor-campo > label:first-child {
	padding: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vor-ink-3);
}

/* Con el prefijo del lienzo, igual que el título de sección: muchos temas
   estilan `input[type="text"]` y `select`, que son (0,1,1) y le ganan a una
   sola clase aunque esté escrita después. GeneratePress lo hacía y el buscador
   del catálogo salía con fondo blanco sobre el lienzo oscuro. */
.vor-lienzo .vor-input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--vor-line);
	border-radius: var(--vor-r-s);
	background: var(--vor-surface-2);
	color: var(--vor-ink);
	font-family: var(--vor-font);
	font-size: .9rem;
	transition: border-color .2s, background-color .2s;
}

.vor-lienzo .vor-input::placeholder { color: var(--vor-ink-3); }

.vor-lienzo .vor-input:focus {
	border-color: var(--vor-accent);
	background: var(--vor-surface-3);
	outline: none;
}

/* Oculta las flechas del input numérico: aquí solo estorban. */
.vor-lienzo .vor-input[type="number"]::-webkit-outer-spin-button,
.vor-lienzo .vor-input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.vor-lienzo .vor-input[type="number"] { -moz-appearance: textfield; }

.vor-lista {
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-height: 178px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--vor-line) transparent;
}

.vor-lista::-webkit-scrollbar { width: 6px; }
.vor-lista::-webkit-scrollbar-thumb { background: var(--vor-line); border-radius: 3px; }

.vor-opcion {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 6px;
	font-size: .88rem;
	color: var(--vor-ink-2);
	cursor: pointer;
	transition: background-color .15s, color .15s;
}

.vor-opcion:hover {
	background: var(--vor-surface-2);
	color: var(--vor-ink);
}

/* Casilla propia: la nativa no se puede estilar y desentona sobre oscuro. */
.vor-opcion input {
	appearance: none;
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 0;
	border: 1.5px solid var(--vor-line);
	border-radius: 4px;
	background: var(--vor-surface-2);
	cursor: pointer;
	position: relative;
	transition: background-color .15s, border-color .15s;
}

.vor-opcion input:checked {
	background: var(--vor-accent);
	border-color: var(--vor-accent);
}

.vor-opcion input:checked::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 4px;
	height: 9px;
	border: solid var(--vor-accent-ink);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.vor-opcion__txt { flex: 1 1 auto; }

.vor-opcion__n {
	font-size: .78rem;
	color: var(--vor-ink-3);
	font-variant-numeric: tabular-nums;
}

.vor-rango {
	display: grid;
	grid-template-columns: 1fr 12px 1fr;
	align-items: center;
	gap: 8px;
}

.vor-rango__sep {
	color: var(--vor-ink-3);
	text-align: center;
}

/**
 * Barra de acciones al final del panel.
 *
 * Ya no es sticky: el panel no tiene scroll interno, así que anclarla abajo
 * solo servía para tapar el último grupo de filtros.
 */
.vor-filtros__acciones {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 18px;
	margin-top: 4px;
	border-top: 1px solid var(--vor-line);
}

/* Un grupo sin opciones visibles se oculta entero desde el JS, para no dejar
   su encabezado suelto. */
.vor-campo[hidden] { display: none !important; }

/* Disparador móvil ----------------------------------------------------- */

.vor-filtros-movil {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 13px;
	border: 1px solid var(--vor-line);
	border-radius: var(--vor-r-s);
	background: var(--vor-surface-2);
	color: var(--vor-ink);
	font-family: var(--vor-font);
	font-size: .92rem;
	font-weight: 600;
	cursor: pointer;
}

.vor-filtros-movil__n {
	display: grid;
	place-items: center;
	min-width: 21px;
	height: 21px;
	padding: 0 6px;
	border-radius: 100px;
	background: var(--vor-accent);
	color: var(--vor-accent-ink);
	font-size: .74rem;
	font-weight: 700;
}

/* ==========================================================================
   9. Ficha de vehículo
   ========================================================================== */

.vor-ficha { padding-bottom: 80px; }

.vor-ficha__migas {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 22px 0 18px;
	font-size: .82rem;
	color: var(--vor-ink-3);
	flex-wrap: wrap;
}

.vor-ficha__migas a {
	color: var(--vor-ink-3);
	text-decoration: none;
}

.vor-ficha__migas a:hover { color: var(--vor-accent); }

.vor-ficha__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(340px, 1fr);
	gap: 44px;
	align-items: start;
}

/* Galería -------------------------------------------------------------- */

.vor-galeria__marco {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--vor-surface-3);
	border-radius: var(--vor-r-l);
	overflow: hidden;
	cursor: zoom-in;
}

.vor-galeria__marco img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Vehículo aún sin fotos: el marco se queda como marcador, sin lupa. */
.vor-galeria__marco--vacio {
	display: grid;
	place-items: center;
	cursor: default;
}

.vor-galeria__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid rgb(var(--vor-ink-rgb) / .12);
	border-radius: 50%;
	background: rgb(var(--vor-bg-rgb) / .62);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--vor-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s, background-color .2s;
}

.vor-galeria__marco:hover .vor-galeria__nav,
.vor-galeria__nav:focus-visible { opacity: 1; }

.vor-galeria__nav:hover { background: rgb(var(--vor-bg-rgb) / .88); }
.vor-galeria__nav--prev { left: 14px; }
.vor-galeria__nav--next { right: 14px; }

.vor-galeria__contador {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 5px 12px;
	border-radius: 100px;
	background: rgb(var(--vor-bg-rgb) / .72);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	color: var(--vor-ink);
}

.vor-galeria__tiras {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 96px;
	gap: 10px;
	margin: 12px 0 0;
	padding: 2px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--vor-line) transparent;
}

.vor-galeria__tiras::-webkit-scrollbar { height: 6px; }
.vor-galeria__tiras::-webkit-scrollbar-thumb { background: var(--vor-line); border-radius: 3px; }

.vor-mini {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--vor-r-s);
	overflow: hidden;
	background: var(--vor-surface-3);
	cursor: pointer;
	opacity: .55;
	transition: opacity .2s, border-color .2s;
}

.vor-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vor-mini:hover { opacity: .85; }
.vor-mini.is-activa { opacity: 1; border-color: var(--vor-accent); }

/* Panel de reserva ------------------------------------------------------ */

.vor-panel {
	position: sticky;
	top: 28px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 28px;
	background: var(--vor-surface);
	border: 1px solid var(--vor-line);
	border-radius: var(--vor-r-l);
	box-shadow: var(--vor-shadow);
}

.vor-panel__cab { display: flex; flex-direction: column; gap: 8px; }

/**
 * Titular de la ficha: un único H1 con marca, modelo, versión y año.
 *
 * Todo va dentro del mismo H1 por SEO —es lo que distingue una ficha de otra
 * del mismo modelo— y la jerarquía se consigue con los tamaños de los span, no
 * partiéndolo en etiquetas distintas.
 */
.vor-panel__titulo {
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.14;
}

.vor-panel__modelo {
	font-weight: 700;
	letter-spacing: -.025em;
}

.vor-panel__version {
	font-size: .95rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--vor-ink-2);
}


.vor-panel__precio {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--vor-line-soft);
}

/* Datos clave en rejilla: escaneables de un vistazo, que es como se leen. */
.vor-clave {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 18px 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vor-clave__label {
	display: block;
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vor-ink-3);
	margin-bottom: 5px;
}

.vor-clave__valor {
	display: block;
	font-size: 1rem;
	font-weight: 650;
	color: var(--vor-ink);
}

/* Bloque de reserva: el elemento más importante de toda la página. */
.vor-reserva {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	margin: 0 -4px;
	background: linear-gradient(180deg, rgb(var(--vor-accent-rgb) / .09), rgb(var(--vor-accent-rgb) / .03));
	border: 1px solid rgb(var(--vor-accent-rgb) / .24);
	border-radius: var(--vor-r-m);
}

.vor-reserva__senal {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: .9rem;
	color: var(--vor-ink-2);
}

.vor-reserva__senal strong {
	font-size: 1.25rem;
	color: var(--vor-accent-hi);
	font-variant-numeric: tabular-nums;
}

.vor-reserva__puntos {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--vor-ink-2);
}

.vor-reserva__puntos li {
	display: grid;
	grid-template-columns: 16px 1fr;
	gap: 9px;
	align-items: start;
}

.vor-reserva__puntos svg {
	margin-top: 2px;
	color: var(--vor-accent);
	flex: 0 0 auto;
}

/**
 * Condiciones de la reserva.
 *
 * Plegadas por defecto: quien las quiere leer las abre sin salir de la página,
 * y quien no, no se encuentra un muro de texto legal entre el precio y el
 * botón de reservar.
 */
.vor-condiciones {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgb(var(--vor-accent-rgb) / .22);
}

.vor-condiciones > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	font-size: .82rem;
	font-weight: 600;
	color: var(--vor-accent);
	list-style: none;
}

.vor-condiciones > summary::-webkit-details-marker { display: none; }

.vor-condiciones > summary::after {
	content: "";
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform .2s var(--vor-ease);
}

.vor-condiciones[open] > summary::after { transform: rotate(225deg) translateY(-1px); }

.vor-condiciones > summary:hover { color: var(--vor-accent-hi); }

.vor-condiciones__cuerpo {
	margin-top: 10px;
	max-height: 300px;
	overflow-y: auto;
	font-size: .82rem;
	line-height: 1.6;
	color: var(--vor-ink-2);
}

.vor-condiciones__cuerpo p:first-child { margin-top: 0; }
.vor-condiciones__cuerpo p:last-child { margin-bottom: 0; }

.vor-condiciones__cuerpo ul,
.vor-condiciones__cuerpo ol {
	margin: 0 0 10px;
	padding-left: 20px;
}

/* En el checkout hereda los colores del tema, no los del lienzo oscuro. */
.vor-condiciones--checkout {
	border-top-color: rgb(var(--vor-accent-rgb) / .3);
}

.vor-condiciones--checkout > summary { color: var(--vor-accent); }
.vor-condiciones--checkout .vor-condiciones__cuerpo { color: var(--vor-ink-2); }

.vor-aviso {
	padding: 16px 18px;
	background: var(--vor-surface-2);
	border-left: 2px solid var(--vor-ink-3);
	border-radius: var(--vor-r-s);
	font-size: .88rem;
	line-height: 1.55;
	color: var(--vor-ink-2);
	margin: 0;
}

.vor-aviso strong { color: var(--vor-ink); }
.vor-aviso--vendido { border-left-color: var(--vor-off); }
.vor-aviso--reservado { border-left-color: var(--vor-warn); }

/**
 * Contacto directo: llamar y WhatsApp.
 *
 * Van juntos y a media anchura cada uno porque son las dos vías por las que
 * entra un comprador que no quiere reservar todavía.
 */
.vor-panel__contacto {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.vor-panel__contacto .vor-btn {
	flex: 1 1 140px;
	white-space: nowrap;
}

/* Guardar y compartir: acciones de apoyo, más discretas. */
.vor-panel__acciones {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-top: -8px;
}

.vor-panel__acciones .vor-btn {
	flex: 1 1 auto;
	font-size: .85rem;
	padding: 10px 14px;
}

/**
 * WhatsApp con su color de marca.
 *
 * Es el único botón fuera de la paleta: se reconoce por el color antes que por
 * el texto, y en venta de coches es por donde entra la mayoría de contactos.
 * No compite con el ámbar de reservar porque no lleva relleno sólido.
 */
.vor-btn.vor-btn--whatsapp {
	background: rgb(var(--vor-whatsapp-rgb) / .1);
	border-color: rgb(var(--vor-whatsapp-rgb) / .38);
	color: var(--vor-whatsapp-ink);
}

.vor-btn.vor-btn--whatsapp:hover,
.vor-btn.vor-btn--whatsapp:focus-visible {
	background: rgb(var(--vor-whatsapp-rgb) / .18);
	border-color: var(--vor-whatsapp);
	color: var(--vor-whatsapp-ink-hi);
}

/* Confirmación tras copiar el enlace. */
.vor-btn.is-hecho {
	border-color: var(--vor-accent);
	color: var(--vor-accent-hi);
}

/* Financiación ---------------------------------------------------------- */

.vor-fin {
	border: 1px solid var(--vor-line-soft);
	border-radius: var(--vor-r-m);
	overflow: hidden;
	background: var(--vor-surface-2);
}

.vor-fin > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 15px 18px;
	cursor: pointer;
	font-size: .92rem;
	color: var(--vor-ink-2);
	list-style: none;
}

.vor-fin > summary::-webkit-details-marker { display: none; }
.vor-fin > summary strong { color: var(--vor-accent-hi); }

.vor-fin[open] > summary { border-bottom: 1px solid var(--vor-line-soft); }

.vor-fin__cuerpo {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 20px 18px;
}

.vor-fin__campo {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: .86rem;
	color: var(--vor-ink-2);
}

.vor-fin__campo > span:first-child {
	display: flex;
	justify-content: space-between;
	gap: 10px;
}

.vor-fin__campo output {
	color: var(--vor-ink);
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

/* Deslizador propio: el nativo es distinto en cada navegador. */
.vor-slider {
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: var(--vor-surface-3);
	cursor: pointer;
}

.vor-slider::-webkit-slider-thumb {
	appearance: none;
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--vor-accent);
	border: 3px solid var(--vor-surface);
	box-shadow: 0 0 0 1px var(--vor-accent);
	cursor: grab;
}

.vor-slider::-moz-range-thumb {
	width: 17px;
	height: 17px;
	border-radius: 50%;
	background: var(--vor-accent);
	border: 3px solid var(--vor-surface);
	box-shadow: 0 0 0 1px var(--vor-accent);
	cursor: grab;
}

.vor-fin__resultado {
	display: flex;
	align-items: baseline;
	gap: 9px;
	padding-top: 16px;
	border-top: 1px solid var(--vor-line-soft);
	margin: 0;
}

.vor-fin__cuota {
	font-size: 1.9rem;
	font-weight: 700;
	color: var(--vor-accent-hi);
	letter-spacing: -.03em;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.vor-fin__legal {
	margin: 0;
	font-size: .74rem;
	line-height: 1.5;
	color: var(--vor-ink-3);
}

/* Ficha técnica --------------------------------------------------------- */

.vor-seccion { padding-top: 72px; }

/* Con el prefijo del lienzo para ganar al reset de títulos: sin él el margen
   inferior se quedaba en cero y el título tocaba el contenido. */
.vor-lienzo .vor-seccion__titulo {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 30px;
	font-size: 1.5rem;
}

/* La línea que continúa el título hasta el borde. Va en el color de acento, así
   que cambia con el tema igual que el resto: dorado en el nocturno, azul en el
   grafito, teja en el arena. */
.vor-seccion__titulo::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--vor-accent);
}

.vor-tecnica {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
	gap: 32px;
}

.vor-tecnica h3 {
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--vor-accent);
	margin-bottom: 14px;
}

.vor-tecnica dl { margin: 0; }

.vor-tecnica__fila {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	padding: 10px 0;
	border-bottom: 1px solid var(--vor-line-soft);
	font-size: .89rem;
}

.vor-tecnica__fila dt { color: var(--vor-ink-3); }

.vor-tecnica__fila dd {
	margin: 0;
	color: var(--vor-ink);
	font-weight: 600;
	text-align: right;
}

.vor-descripcion {
	max-width: 720px;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--vor-ink-2);
}

/* ==========================================================================
   10. Estados vacíos y carga
   ========================================================================== */

.vor-vacio {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 90px 24px;
	text-align: center;
	color: var(--vor-ink-3);
}

.vor-vacio h3 {
	font-size: 1.2rem;
	color: var(--vor-ink);
}

.vor-vacio p { max-width: 420px; margin: 0; }

/* Esqueletos de carga: mantienen la altura y evitan el salto del layout. */
.vor-skel {
	background: var(--vor-surface);
	border: 1px solid var(--vor-line-soft);
	border-radius: var(--vor-r-m);
	overflow: hidden;
	min-height: 340px;
}

.vor-skel__img {
	aspect-ratio: 16 / 11;
	background: linear-gradient(90deg, var(--vor-surface-2) 25%, var(--vor-surface-3) 50%, var(--vor-surface-2) 75%);
	background-size: 200% 100%;
	animation: vor-brillo 1.4s infinite;
}

.vor-skel__linea {
	height: 12px;
	margin: 16px 20px;
	border-radius: 4px;
	background: linear-gradient(90deg, var(--vor-surface-2) 25%, var(--vor-surface-3) 50%, var(--vor-surface-2) 75%);
	background-size: 200% 100%;
	animation: vor-brillo 1.4s infinite;
}

.vor-skel__linea--corta { width: 45%; }

@keyframes vor-brillo {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

[data-vor-resultados][aria-busy="true"] .vor-card {
	opacity: .3;
	transition: opacity .2s;
}

/* Aparición escalonada de las tarjetas al filtrar. */
@keyframes vor-entra {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

.vor-grid > .vor-card {
	animation: vor-entra .45s var(--vor-ease) backwards;
}

.vor-grid > .vor-card:nth-child(1) { animation-delay: .02s; }
.vor-grid > .vor-card:nth-child(2) { animation-delay: .06s; }
.vor-grid > .vor-card:nth-child(3) { animation-delay: .1s; }
.vor-grid > .vor-card:nth-child(4) { animation-delay: .14s; }
.vor-grid > .vor-card:nth-child(5) { animation-delay: .18s; }
.vor-grid > .vor-card:nth-child(6) { animation-delay: .22s; }

/* ==========================================================================
   11. Paginación
   ========================================================================== */

.vor-paginacion {
	display: flex;
	justify-content: center;
	gap: 7px;
	margin-top: 56px;
	flex-wrap: wrap;
}

.vor-paginacion .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	border: 1px solid var(--vor-line-soft);
	border-radius: var(--vor-r-s);
	background: var(--vor-surface);
	color: var(--vor-ink-2);
	text-decoration: none;
	font-size: .9rem;
	font-variant-numeric: tabular-nums;
	transition: border-color .2s, color .2s, background-color .2s;
}

.vor-paginacion .page-numbers:hover {
	border-color: var(--vor-line);
	color: var(--vor-ink);
}

.vor-paginacion .page-numbers.current {
	background: var(--vor-accent);
	border-color: var(--vor-accent);
	color: var(--vor-accent-ink);
	font-weight: 700;
}

/* ==========================================================================
   12. Comparador y visor de fotos
   ========================================================================== */

.vor-barra-cmp {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 95;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 12px 12px 22px;
	background: rgb(var(--vor-surface-rgb) / .94);
	border: 1px solid var(--vor-line);
	border-radius: 100px;
	box-shadow: var(--vor-shadow-hi);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	font-size: .88rem;
	color: var(--vor-ink);
	animation: vor-sube .35s var(--vor-ease);
}

@keyframes vor-sube {
	from { opacity: 0; transform: translate(-50%, 16px); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

/**
 * El atributo hidden se respeta de forma explícita.
 *
 * Es imprescindible: hidden aplica display:none desde la hoja de estilos del
 * navegador, y cualquier regla de autor que declare display (aquí grid y flex)
 * lo sobrescribe. Sin esto, el modal del comparador y el visor de fotos se
 * mostraban desde el primer momento, con su fondo semitransparente tapando
 * media página.
 */
.vor-modal[hidden],
.vor-barra-cmp[hidden],
.vor-lienzo [hidden] {
	display: none !important;
}

.vor-modal {
	position: fixed;
	inset: 0;
	z-index: 120;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgb(var(--vor-bg-rgb) / .9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	animation: vor-aparece .25s var(--vor-ease);
}

@keyframes vor-aparece { from { opacity: 0; } to { opacity: 1; } }

.vor-modal__caja {
	position: relative;
	width: min(1100px, 100%);
	max-height: 88vh;
	overflow: auto;
	padding: 32px;
	background: var(--vor-surface);
	border: 1px solid var(--vor-line);
	border-radius: var(--vor-r-l);
	color: var(--vor-ink);
}

.vor-modal__cerrar {
	position: absolute;
	top: 14px;
	right: 16px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--vor-line);
	border-radius: 50%;
	background: var(--vor-surface-2);
	color: var(--vor-ink-2);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

.vor-modal__cerrar:hover { color: var(--vor-ink); border-color: var(--vor-ink-3); }

/* Visor a pantalla completa de la galería. */
.vor-visor { padding: 0; background: rgb(var(--vor-bg-rgb) / .97); }

.vor-visor img {
	max-width: min(1500px, 94vw);
	max-height: 88vh;
	object-fit: contain;
	border-radius: var(--vor-r-m);
}

.vor-visor__cerrar {
	position: fixed;
	top: 22px;
	right: 24px;
}

/**
 * Tabla comparativa.
 *
 * Con border-collapse: collapse los navegadores no aplican bien position:
 * sticky a las celdas: la columna de etiquetas se escapaba del contenedor de
 * scroll y arrastraba a toda la página, provocando desplazamiento lateral en
 * móvil. Con separate y border-spacing a cero el resultado visual es idéntico,
 * porque los bordes ya se pintan con border-bottom en cada celda.
 */
.vor-tabla-cmp {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: .89rem;
}

.vor-tabla-cmp th,
.vor-tabla-cmp td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--vor-line-soft);
	text-align: left;
}

.vor-tabla-cmp thead th { vertical-align: top; }
.vor-tabla-cmp td { color: var(--vor-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/**
 * Columna de etiquetas, anclada al arrastrar la tabla.
 *
 * En móvil la tabla no cabe y hay que desplazarla en horizontal: sin esto, al
 * llegar a la tercera columna ya no se ve el nombre de la fila y no se sabe qué
 * se está comparando. Funciona gracias al contain del envoltorio; sin él, el
 * sticky arrastraba la página entera.
 */
.vor-tabla-cmp tbody th {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 118px;
	background: var(--vor-surface);
	color: var(--vor-ink-3);
	font-weight: 500;
	/* Sombra tenue que insinúa que hay más tabla a la izquierda. */
	box-shadow: 6px 0 10px -8px rgb(var(--vor-shadow-rgb) / .85);
}

/* Solo se resalta cuando hay un ganador único; el empate no destaca nada. */
.vor-tabla-cmp__mejor {
	color: var(--vor-accent-hi) !important;
}

/**
 * Celda de resumen: la única con texto corrido.
 *
 * Va en peso normal y con interlineado propio para que no compita con las
 * cifras, que son lo que de verdad se compara de un vistazo.
 */
.vor-tabla-cmp__texto {
	font-weight: 400 !important;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--vor-ink-2) !important;
	max-width: 280px;
	vertical-align: top;
}

/**
 * Descripción completa desplegable dentro de la celda.
 *
 * Colapsada por defecto para que la tabla siga siendo escaneable, y abrible en
 * las tres columnas a la vez: leer las descripciones en paralelo es justo lo
 * que un modal impediría.
 */
/* Sin texto delante, el desplegable ya no necesita separación superior. */
.vor-cmp-desc {
	margin-top: 0;
}

.vor-cmp-desc > summary {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	cursor: pointer;
	font-size: .78rem;
	font-weight: 600;
	color: var(--vor-accent);
	list-style: none;
}

.vor-cmp-desc > summary::-webkit-details-marker { display: none; }

.vor-cmp-desc > summary::after {
	content: "";
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-1px);
	transition: transform .2s var(--vor-ease);
}

.vor-cmp-desc[open] > summary::after {
	transform: rotate(225deg) translateY(-1px);
}

.vor-cmp-desc > summary:hover { color: var(--vor-accent-hi); }

.vor-cmp-desc__cuerpo {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--vor-line-soft);
}

.vor-cmp-desc__cuerpo p {
	margin: 0 0 8px;
	font-size: .82rem;
	line-height: 1.55;
}

.vor-cmp-desc__cuerpo p:last-child { margin-bottom: 0; }

/**
 * Miniatura de cada vehículo en la cabecera de la comparativa.
 *
 * Necesita height y object-fit: al declarar solo width, la altura seguía
 * mandándola el atributo height del HTML que genera WooCommerce y la foto
 * salía estirada. Con la proporción fija todas las columnas quedan además a la
 * misma altura, que es lo que hace legible una tabla comparativa.
 */
.vor-tabla-cmp thead img {
	width: 100%;
	max-width: 158px;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--vor-surface-3);
	border-radius: var(--vor-r-s);
	margin-bottom: 8px;
	display: block;
}

.vor-tabla-cmp a { color: var(--vor-ink); text-decoration: none; }
.vor-tabla-cmp a:hover { color: var(--vor-accent); }

/**
 * Botón de quitar de cada columna.
 *
 * Antes usaba el estilo de enlace y quedaba pegado al nombre del vehículo, de
 * modo que parecía parte del título en lugar de algo pulsable. Ahora tiene
 * forma de botón, su icono y separación propia.
 */
.vor-cmp-quitar {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 10px;
	padding: 5px 11px;
	border: 1px solid var(--vor-line);
	border-radius: 100px;
	background: var(--vor-surface-2);
	color: var(--vor-ink-2);
	font-family: var(--vor-font);
	font-size: .74rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s, color .15s, background-color .15s;
}

.vor-cmp-quitar:hover,
.vor-cmp-quitar:focus-visible {
	border-color: var(--vor-danger-line);
	background: rgb(var(--vor-danger-rgb) / .16);
	color: var(--vor-danger-ink);
}

/**
 * Envoltorio con desplazamiento de la tabla comparativa.
 *
 * El contain es imprescindible, no una optimización. Con solo overflow-x, el
 * ancho de la tabla (572 px con tres vehículos) se propagaba al documento y
 * arrastraba la página entera 132 px en móvil, aunque el desplazamiento
 * pareciera contenido aquí dentro. Se comprobó por descarte: ni limitar el
 * ancho del envoltorio ni quitar min-width a las celdas lo evitaban, y
 * table-layout: fixed lo arreglaba a costa de comprimir las columnas.
 */
.vor-cmp-envoltorio {
	overflow-x: auto;
	contain: paint;
}

/**
 * Páginas de guardados y comparativa.
 *
 * Reutilizan el lienzo y la cabecera del catálogo para que no parezcan de otra
 * web, pero con una cabecera más baja: aquí no hay contadores de stock que
 * mostrar, solo el titular y una línea de contexto.
 */
.vor-hero--compacto { padding: 48px 0 34px; }

.vor-seccion-pagina { padding: 40px 0 80px; }

/* En estas páginas la tabla comparativa va sobre el lienzo, no en un modal. */
.vor-comparador .vor-tabla-cmp thead th { padding-top: 0; }

/* ==========================================================================
   13. Checkout
   ========================================================================== */

.vor-checkout-aviso {
	margin: 0 0 26px;
	padding: 22px 24px;
	background: var(--vor-surface);
	border: 1px solid rgb(var(--vor-accent-rgb) / .3);
	border-radius: 14px;
	color: var(--vor-ink);
}

.vor-checkout-aviso h3 {
	margin: 0 0 12px;
	font-size: 1.1rem;
	color: var(--vor-ink);
	letter-spacing: -.02em;
}

.vor-checkout-aviso ul {
	margin: 0 0 16px;
	padding-left: 20px;
	font-size: .9rem;
	line-height: 1.65;
	color: var(--vor-ink-2);
}

.vor-checkout-aviso strong { color: var(--vor-accent-hi); }

.vor-checkout-aviso__acepto {
	margin: 18px 0 0;
	padding: 14px 16px;
	background: rgb(var(--vor-accent-rgb) / .07);
	border: 1px solid rgb(var(--vor-accent-rgb) / .28);
	border-radius: 10px;
}

.vor-checkout-aviso__acepto label {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin: 0;
	font-size: .9rem;
	line-height: 1.55;
	font-weight: 600;
	color: var(--vor-ink);
	cursor: pointer;
}

.vor-checkout-aviso__acepto input[type="checkbox"] {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--vor-accent);
	cursor: pointer;
}

.vor-checkout-aviso__acepto abbr.required {
	border: 0;
	color: var(--vor-accent-hi);
	text-decoration: none;
}

/* WooCommerce marca el error moviendo esta clase al contenedor del campo. */
.vor-checkout-aviso__acepto.woocommerce-invalid {
	border-color: var(--vor-danger);
	background: rgb(var(--vor-danger-rgb) / .1);
}

/* Enlace «Ver condiciones».
   Hereda el color del texto que lo rodea a propósito: aparece tanto sobre el
   aviso oscuro del checkout clásico como sobre el formulario claro del de
   bloques, y un color fijo quedaría ilegible en uno de los dos. El subrayado y
   la negrita son los que lo señalan como enlace. */
.vor-condiciones-enlace {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 700;
}

.vor-condiciones-enlace:hover,
.vor-condiciones-enlace:focus-visible { text-decoration-thickness: 2px; }

/* Sobre los fondos oscuros del plugin sí conviene el dorado de la marca. */
.vor-checkout-aviso .vor-condiciones-enlace { color: var(--vor-accent-hi); }

/* Panel de condiciones. Cerrado por defecto y abierto por :target, sin
   JavaScript: en la página de pago no puede depender de que cargue un script. */
.vor-condiciones-panel {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	padding: 24px;
	overflow-y: auto;
	background: rgb(var(--vor-bg-rgb) / .78);
	backdrop-filter: blur(3px);
}

.vor-condiciones-panel:target { display: grid; place-items: center; }

.vor-condiciones-panel__caja {
	width: min(560px, 100%);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 26px 28px;
	background: var(--vor-surface);
	border: 1px solid rgb(var(--vor-accent-rgb) / .32);
	border-radius: 16px;
	box-shadow: 0 24px 60px rgb(var(--vor-shadow-rgb) / .5);
	color: var(--vor-ink);
}

.vor-condiciones-panel__caja h4 {
	margin: 0 0 14px;
	font-size: 1.05rem;
	color: var(--vor-ink);
	letter-spacing: -.01em;
}

.vor-condiciones-panel__cuerpo {
	font-size: .9rem;
	line-height: 1.7;
	color: var(--vor-ink-2);
}

.vor-condiciones-panel__cuerpo :is(p, ul, ol):last-child { margin-bottom: 0; }
.vor-condiciones-panel__cuerpo strong { color: var(--vor-accent-hi); }

.vor-condiciones-panel__cerrar {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 20px;
	background: var(--vor-accent);
	border-radius: 999px;
	color: var(--vor-accent-ink);
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
}

.vor-condiciones-panel__cerrar:hover,
.vor-condiciones-panel__cerrar:focus-visible { background: var(--vor-accent-hi); color: var(--vor-accent-ink); }

/* La casilla del checkout de bloques la pinta WooCommerce con sus clases, así
   que el enlace se hereda pero el hueco para pulsar hay que darlo aquí. */
.wc-block-components-checkbox__label .vor-condiciones-enlace { white-space: nowrap; }

/* ==========================================================================
   14. Adaptación a pantallas menores
   ========================================================================== */

@media (max-width: 1080px) {
	.vor-ficha__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.vor-panel { position: static; }
}

@media (max-width: 900px) {
	.vor-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.vor-filtros-movil { display: flex; }

	.vor-filtros {
		position: static;
		display: none;
		max-height: none;
	}

	.vor-filtros.is-abierto { display: flex; }

	.vor-hero { padding: 40px 0 28px; }
	.vor-hero__stats { gap: 26px; }
	.vor-stat__valor { font-size: 1.5rem; }
}

@media (max-width: 640px) {
	.vor-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.vor-panel { padding: 22px 18px; }
	.vor-seccion { padding-top: 48px; }
	.vor-modal__caja { padding: 22px 16px; }

	.vor-barra {
		gap: 10px;
		padding: 12px 0;
	}

	.vor-barra__izq,
	.vor-barra__der { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   15. Preferencias del usuario
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.vor-lienzo *,
	.vor-lienzo *::before,
	.vor-lienzo *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.vor-card:hover { transform: none; }
	.vor-card:hover .vor-card__media img { transform: none; }
}

@media print {
	.vor-filtros,
	.vor-barra,
	.vor-barra-cmp,
	.vor-fav,
	.vor-comparar { display: none !important; }

	.vor-lienzo {
		background: #fff;
		color: #000;
	}
}

/* ==========================================================================
   15. Ventajas incluidas
   ========================================================================== */

/**
 * Lista de lo que va incluido con cualquier coche.
 *
 * Como máximo tres columnas, aunque haya sitio para más: con cuatro, frases de
 * ocho palabras como «Precio con TODOS los trámites incluidos» se partían en
 * dos líneas y el bloque pasaba de leerse a escanearse a duras penas. En móvil
 * baja a una sola.
 */
.vor-ventajas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 14px 34px;
	max-width: 1120px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vor-ventajas__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 11px;
	align-items: start;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--vor-ink);
}

/* El icono se alinea con la primera línea del texto, no con el centro del
   bloque: con frases de dos líneas se descolocaba. */
.vor-ventajas__icono {
	flex: 0 0 auto;
	margin-top: .18em;
	color: var(--vor-ok);
}

/* Avisos de WooCommerce dentro del panel de reserva. Los pinta WooCommerce con
   su propio marcado, así que solo se les da el color del tema. */
.vor-avisos-wc {
	margin: 0 0 18px;
}

.vor-avisos-wc .woocommerce-error,
.vor-avisos-wc .woocommerce-message,
.vor-avisos-wc .woocommerce-info {
	margin: 0 0 10px;
	padding: 12px 14px;
	border-radius: var(--vor-r-s);
	border: 1px solid var(--vor-line);
	background: var(--vor-surface-2);
	color: var(--vor-ink);
	font-size: .88rem;
	line-height: 1.55;
	list-style: none;
}

.vor-avisos-wc .woocommerce-error {
	border-color: var(--vor-danger-line);
	background: rgb(var(--vor-danger-rgb) / .1);
	color: var(--vor-danger-ink);
}

/* WooCommerce mete un «Ver carrito» en algunos avisos; aquí el carrito no es un
   destino, así que se oculta en lugar de mandar a una página que redirige. */
.vor-avisos-wc .button,
.vor-avisos-wc .wc-forward {
	display: none;
}