/*
 * Automotora OS - Conector — estilos de la página de stock y ficha de
 * vehículo. Clases con prefijo "aos-" a propósito, para no chocar con el CSS
 * del tema del sitio.
 *
 * Arquitectura de tokens en 3 capas (primitivo → semántico → componente):
 * los primitivos son la paleta cruda (nunca se usan directo en un
 * componente); lo semántico les da significado ("primary", "border",
 * "muted"); lo de componente resuelve casos puntuales (tarjeta, botón,
 * insignia). Cambiar el look del sitio entero es cambiar los valores acá
 * arriba, nunca tocar cada regla suelta.
 *
 * Paleta: tinta cálida casi negra + papel cálido + un acento cobre/ámbar
 * (evita el azul genérico de SaaS — más cercano a cromo/cuero).
 *
 * ESTOS VALORES SON AHORA LA MARCA DE EMSA, no criterio propio: el usuario
 * los confirmó como los colores oficiales el 2026-08-22, y el ERP interno se
 * alineó a ellos (ver `src/app/globals.css`, que replica los 4 primitivos
 * `--aos-copper-*` como `--brand-copper-*`). Si cambian acá, hay que
 * cambiarlos allá también — son un solo sistema con dos implementaciones.
 *
 * Pendiente real: todavía no se recibió el archivo del logo de EMSA. Si sus
 * colores no coinciden con estos, mandan los del logo (ver PRODUCT.md
 * § Brand Commitments).
 */

:root {
	/* Primitivos — tinta (grises cálidos) */
	--aos-ink-950: #17130F;
	--aos-ink-800: #2B241D;
	--aos-ink-600: #5C5148;
	--aos-ink-400: #948A7E;
	--aos-ink-200: #E4DDD3;
	--aos-ink-100: #EFEAE2;
	--aos-ink-50:  #FAF7F2;

	/* Primitivos — acento cobre/ámbar */
	--aos-copper-400: #E08A4F;
	--aos-copper-500: #C96A32;
	--aos-copper-600: #B0561F;
	/* Paso nuevo: el 600 pasó a ser el cobre "de texto" (ver semánticos más
	   abajo), así que el hover necesitaba un escalón propio más oscuro. */
	--aos-copper-700: #8F4518;
	--aos-copper-100: #FBEADD;

	/* Primitivos — confianza (azul petróleo).
	   Acompaña al cobre, no lo reemplaza: el cobre vende (precio, CTA) y este
	   respalda (documentos, ubicación). Verificado: 7.06:1 con texto blanco
	   encima, sobra para AA. */
	--aos-trust-700: #164C61;
	--aos-trust-600: #1F5F7A;
	--aos-trust-500: #2C7C9C;
	--aos-trust-100: #E4F0F5;

	/* Primitivos — estado */
	--aos-green-600: #1F7A4D;
	--aos-green-700: #175E3C;
	--aos-red-600: #C43D3D;

	/* Primitivos — espaciado (base 4px) */
	--aos-space-1: 0.25rem;
	--aos-space-2: 0.5rem;
	--aos-space-3: 0.75rem;
	--aos-space-4: 1rem;
	--aos-space-5: 1.25rem;
	--aos-space-6: 1.5rem;
	--aos-space-8: 2rem;
	--aos-space-10: 2.5rem;
	--aos-space-12: 3rem;
	--aos-space-16: 4rem;

	/* Primitivos — tipografía */
	--aos-text-xs: 0.75rem;
	--aos-text-sm: 0.875rem;
	--aos-text-base: 1rem;
	--aos-text-lg: 1.125rem;
	--aos-text-xl: 1.25rem;
	--aos-text-2xl: 1.5rem;
	--aos-text-3xl: 1.875rem;
	--aos-text-4xl: 2.5rem;

	/* Primitivos — radio y sombra */
	--aos-radius-md: 0.5rem;
	--aos-radius-lg: 0.875rem;
	--aos-radius-full: 9999px;
	--aos-shadow-sm: 0 1px 2px rgb(23 19 15 / 0.06);
	--aos-shadow-md: 0 8px 20px -6px rgb(23 19 15 / 0.14), 0 2px 6px -2px rgb(23 19 15 / 0.08);
	--aos-shadow-lg: 0 24px 48px -16px rgb(23 19 15 / 0.28), 0 4px 12px -4px rgb(23 19 15 / 0.1);
	--aos-duration: 180ms;
	--aos-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Semánticos */
	--aos-color-bg: #fff;
	--aos-color-surface: var(--aos-ink-50);
	--aos-color-surface-raised: var(--aos-ink-100);
	--aos-color-fg: var(--aos-ink-950);
	--aos-color-muted-fg: var(--aos-ink-600);
	--aos-color-border: var(--aos-ink-200);
	/* El semántico apunta al 600 y no al 500 — corrección de contraste, no de
	   gusto: con texto blanco encima el 500 daba 3.76:1 y reprobaba AA en los
	   tres botones de contacto de la ficha (Enviar, Llamar, WhatsApp) y en los
	   links de filtro. El 600 da 5.00:1. Es la misma decisión que ya tomó el
	   ERP en src/app/globals.css, así que además deja los dos codebases
	   apuntando al mismo cobre. El 500 sigue siendo un primitivo de marca y
	   sigue usándose donde no lleva texto encima (selección, acentos). */
	--aos-color-primary: var(--aos-copper-600);
	--aos-color-primary-hover: var(--aos-copper-700);
	--aos-color-primary-soft: var(--aos-copper-100);
	--aos-color-primary-bright: var(--aos-copper-500);
	--aos-color-price: var(--aos-green-700);
	/* Verde más profundo que el anterior (#22A559): con texto blanco daba
	   3.18:1. Este da 5.00:1 y sigue leyéndose como el verde de WhatsApp,
	   sobre todo con el logo al lado. */
	--aos-color-whatsapp: #17803F;
	--aos-color-whatsapp-hover: #0F7A3C;
	--aos-color-error: var(--aos-red-600);
	--aos-color-trust: var(--aos-trust-600);
	--aos-color-trust-hover: var(--aos-trust-700);
	--aos-color-trust-soft: var(--aos-trust-100);

	/* ------------------------------------------------------------------ */
	/* Componente — vidrio esmerilado                                     */
	/* ------------------------------------------------------------------ */
	/*
	 * El vidrio es la única capa donde un valor mal elegido rompe la
	 * accesibilidad EN SILENCIO: el texto queda sobre un fondo que depende de
	 * lo que haya detrás. Por eso acá hay una regla dura y no una preferencia:
	 *
	 *   el blanco del vidrio NUNCA baja de 0.62 de opacidad, y el ambiente de
	 *   atrás son SOLO tintes muy claros.
	 *
	 * Con eso, el peor caso medido (vidrio al 0.62 sobre el tinte más
	 * saturado) da 17.2:1 para el texto principal y 7.2:1 para el secundario
	 * — muy por encima del 4.5:1 que pide AA. Si alguien satura el ambiente o
	 * baja la opacidad, esa garantía se cae y hay que volver a medirla.
	 *
	 * El "saturate" es lo que lo hace leer como vidrio y no como un velo
	 * blanco: intensifica lo que pasa por detrás en vez de solo desenfocarlo.
	 */
	--aos-glass-alpha: 0.74;
	--aos-glass-bg: rgb(255 255 255 / var(--aos-glass-alpha));
	--aos-glass-bg-raised: rgb(255 255 255 / calc(var(--aos-glass-alpha) + 0.12));
	--aos-glass-border: rgb(255 255 255 / 0.7);
	--aos-glass-blur: 14px;
	--aos-glass-saturate: 1.5;
	/* Más difusa y con algo de la tinta cálida adentro: una sombra gris pura
	   sobre vidrio se ve sucia. */
	--aos-glass-shadow: 0 10px 30px -12px rgb(23 19 15 / 0.18), 0 2px 8px -4px rgb(23 19 15 / 0.08);
	--aos-glass-shadow-lg: 0 28px 56px -20px rgb(23 19 15 / 0.3), 0 8px 20px -10px rgb(23 19 15 / 0.14);

	/* Ambiente: los dos halos de color que le dan al vidrio algo que
	   refractar. Sin esto, vidrio sobre blanco plano es invisible. */
	--aos-ambient-1: var(--aos-color-primary-soft);
	--aos-ambient-2: var(--aos-color-trust-soft);
}

/* ---------------------------------------------------------------------- */
/* Superficies del navegador — un sitio "armado" no las deja en default   */
/* ---------------------------------------------------------------------- */

.aos-stock-page ::selection,
.aos-single ::selection {
	background: var(--aos-copper-500);
	color: #fff;
}

.aos-stock-page,
.aos-single {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------- */
/* Vidrio esmerilado — la pieza compartida                                */
/* ---------------------------------------------------------------------- */

/*
 * Una sola definición para todas las superficies de vidrio (tarjetas, barra
 * de filtros, panel de la ficha). Antes cada componente traía su propio
 * fondo; ahora cambian todos desde los tokens de arriba.
 *
 * Los tres guardas de abajo NO son opcionales — sin ellos el vidrio es un
 * problema de accesibilidad, no un efecto:
 *
 * 1. @supports  — Firefox tuvo backdrop-filter detrás de una bandera durante
 *                 años. Sin desenfoque, un fondo al 74 % es un velo turbio;
 *                 el fallback lo vuelve opaco.
 * 2. reduced-transparency — hay gente que lo pide por mareo o por dificultad
 *                 de lectura. Es una preferencia del sistema operativo, no un
 *                 capricho: se respeta.
 * 3. forced-colors — en modo alto contraste de Windows el navegador reemplaza
 *                 los colores. El borde translúcido desaparece y la tarjeta
 *                 se funde con la página; hay que devolverle un borde real.
 */
.aos-glass {
	background: var(--aos-glass-bg);
	border: 1px solid var(--aos-glass-border);
	/* El "inset" del canto superior es el que hace la diferencia entre una
	   lámina de vidrio y una tarjeta blanca: es el reflejo del borde. Sin él
	   el desenfoque está pero no se lee (verificado mirando la maqueta
	   renderizada, no de memoria). */
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75), var(--aos-glass-shadow);
	-webkit-backdrop-filter: blur(var(--aos-glass-blur)) saturate(var(--aos-glass-saturate));
	backdrop-filter: blur(var(--aos-glass-blur)) saturate(var(--aos-glass-saturate));
}

/*
 * Los dos apagados van por el TOKEN de opacidad y no por el fondo de
 * .aos-glass, y la diferencia importa: la tarjeta cambia de fondo al pasar el
 * mouse (.aos-vehicle-card:hover) y esa regla tiene más especificidad que
 * .aos-glass. Apagando solo .aos-glass, el vidrio volvía a aparecer con el
 * mouse encima — justo para quien pidió que no hubiera transparencias.
 * Poniendo el token en 1, todo lo que se deriva de él queda opaco de una vez.
 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root {
		--aos-glass-alpha: 1;
	}

	.aos-glass {
		border-color: var(--aos-color-border);
	}
}

@media (prefers-reduced-transparency: reduce) {
	:root {
		--aos-glass-alpha: 1;
	}

	.aos-glass {
		border-color: var(--aos-color-border);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.aos-stock-page::before,
	.aos-single::before {
		display: none;
	}
}

@media (forced-colors: active) {
	.aos-glass {
		border-color: CanvasText;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Layout general                                                        */
/* ---------------------------------------------------------------------- */

/*
 * El ambiente: dos halos muy tenues del acento y del color de confianza,
 * fijos detrás del contenido. Existen para que el vidrio tenga algo que
 * refractar — sobre blanco plano, un backdrop-filter no se distingue de un
 * fondo blanco y todo el efecto se pierde.
 *
 * Van en un ::before con position: fixed y no en el body: el plugin vive
 * dentro del tema de otro, y pintarle el fondo al sitio entero sería pasarse
 * de lo que este plugin puede decidir.
 */
.aos-stock-page,
.aos-single {
	position: relative;
	isolation: isolate;
}

.aos-stock-page::before,
.aos-single::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60rem 40rem at 12% -8%, var(--aos-ambient-1) 0%, transparent 58%),
		radial-gradient(50rem 36rem at 92% 6%, var(--aos-ambient-2) 0%, transparent 60%),
		/* Tercer halo, bajo y ancho: sin él el degradado moría a media pantalla
		   y las tarjetas quedaban sobre blanco plano — o sea, sin nada que
		   refractar y sin efecto de vidrio. Se vio en la maqueta renderizada. */
		radial-gradient(70rem 46rem at 40% 78%, var(--aos-ambient-2) 0%, transparent 62%);
	/* Se apaga recién al final, para no ensuciar el pie de página del tema. */
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
	/*
	 * 0.55 y no 1: a plena intensidad el tinte se cuela por el 74 % del vidrio
	 * y el CUERPO de la tarjeta se ve apagado, como si la foto estuviera
	 * desvaída. No era un problema de contraste —el texto se mantenía en
	 * rgb(23,19,15) y en 17:1— sino de aspecto: tarjetas sucias en vez de
	 * nítidas. Se ajustó mirando el render, no de memoria.
	 */
	opacity: 0.55;
}

.aos-stock-page {
	max-width: 1240px;
	margin: 0 auto;
	padding: var(--aos-space-10) var(--aos-space-4) var(--aos-space-16);
	color: var(--aos-color-fg);
}

.aos-stock-page--embed {
	padding-top: 0;
}

.aos-stock-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--aos-space-2);
	margin-bottom: var(--aos-space-8);
}

.aos-stock-title {
	font-size: var(--aos-text-4xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
}

.aos-stock-count {
	margin: 0 0 var(--aos-space-4);
	color: var(--aos-color-muted-fg);
	font-size: var(--aos-text-sm);
}

/* ---------------------------------------------------------------------- */
/* Filtros                                                                */
/* ---------------------------------------------------------------------- */

/* Fondo/borde/sombra: .aos-glass. */
.aos-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	gap: var(--aos-space-4);
	border-radius: var(--aos-radius-lg);
	padding: var(--aos-space-4);
	margin-bottom: var(--aos-space-8);
}

/* Los controles dentro del vidrio necesitan ser opacos: un select
   semitransparente sobre vidrio es ilegible en cuanto pasa una foto por
   detrás. */
.aos-filters select {
	background-color: var(--aos-color-bg);
}

.aos-filters__field {
	display: flex;
	flex-direction: column;
	gap: var(--aos-space-1);
}

.aos-filters__field label {
	font-size: var(--aos-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aos-color-muted-fg);
}

.aos-filters select {
	height: 42px;
	padding: 0 var(--aos-space-3);
	border: 1px solid var(--aos-color-border);
	border-radius: var(--aos-radius-md);
	background: var(--aos-color-bg);
	color: var(--aos-color-fg);
	font-size: var(--aos-text-sm);
	min-width: 200px;
	transition: border-color var(--aos-duration) var(--aos-ease);
}

.aos-filters select:hover {
	border-color: var(--aos-ink-400);
}

.aos-filters select:focus-visible,
.aos-filters__submit:focus-visible,
.aos-btn:focus-visible,
.aos-contact-form input:focus-visible,
.aos-contact-form textarea:focus-visible,
.aos-vehicle-card:focus-visible,
.aos-breadcrumb a:focus-visible {
	outline: 2px solid var(--aos-color-primary);
	outline-offset: 2px;
}

.aos-filters__submit {
	height: 42px;
	padding: 0 var(--aos-space-4);
	border: none;
	border-radius: var(--aos-radius-md);
	background: var(--aos-color-primary);
	color: #fff;
	font-size: var(--aos-text-sm);
	font-weight: 600;
	cursor: pointer;
}

.aos-filters__clear {
	font-size: var(--aos-text-sm);
	color: var(--aos-color-primary);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------- */
/* Grilla y tarjeta de vehículo                                           */
/* ---------------------------------------------------------------------- */

.aos-vehicle-empty {
	padding: var(--aos-space-12) 0;
	text-align: center;
	color: var(--aos-color-muted-fg);
}

.aos-vehicle-empty a {
	color: var(--aos-color-primary);
}

.aos-vehicle-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
	gap: var(--aos-space-6);
}

/* El fondo, el borde y la sombra los pone .aos-glass (ver arriba) — acá
   queda solo lo que es propio de la tarjeta. La clase la agrega el PHP que
   la renderiza, no el CSS, para que exista un solo lugar donde se decide qué
   superficie es de vidrio. */
.aos-vehicle-card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--aos-radius-lg);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow var(--aos-duration) var(--aos-ease), transform var(--aos-duration) var(--aos-ease);
}

/*
 * El acento vibrante: una línea de luz en el borde superior, que aparece al
 * pasar por encima.
 *
 * Va acá y no en un botón por una razón medida, no estética: el cobre claro
 * (--aos-color-primary-bright) da 3.76:1 con texto blanco encima y reprueba
 * AA. Como acento sin texto es perfectamente válido y es donde puede ser
 * todo lo vibrante que quiera. La misma regla vale para cualquier acento que
 * se agregue después.
 */
.aos-vehicle-card::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--aos-color-primary-bright),
		var(--aos-color-primary),
		var(--aos-color-trust)
	);
	opacity: 0;
	transition: opacity var(--aos-duration) var(--aos-ease);
}

.aos-vehicle-card:hover,
.aos-vehicle-card:focus-visible {
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), var(--aos-glass-shadow-lg);
	transform: translateY(-4px);
	background: var(--aos-glass-bg-raised);
}

.aos-vehicle-card:hover::after,
.aos-vehicle-card:focus-visible::after {
	opacity: 1;
}

.aos-vehicle-card__img-wrap {
	aspect-ratio: 4 / 3;
	background: var(--aos-color-surface);
	overflow: hidden;
}

.aos-vehicle-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 420ms var(--aos-ease);
}

.aos-vehicle-card:hover .aos-vehicle-card__img {
	transform: scale(1.05);
}

.aos-vehicle-card__img-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--aos-color-muted-fg);
	font-size: var(--aos-text-sm);
}

.aos-vehicle-card__body {
	padding: var(--aos-space-4) var(--aos-space-4) var(--aos-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--aos-space-2);
}

.aos-vehicle-card__title {
	font-size: var(--aos-text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0;
	line-height: 1.3;
}

.aos-vehicle-card__specs {
	margin: var(--aos-space-1) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--aos-space-1) var(--aos-space-2);
}

.aos-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	padding: 0.25rem 0.6rem;
	border-radius: var(--aos-radius-full);
	background: var(--aos-color-surface);
	color: var(--aos-color-muted-fg);
	font-size: var(--aos-text-xs);
	font-weight: 500;
	white-space: nowrap;
}

.aos-icon {
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -0.15em;
}

.aos-chip .aos-icon {
	width: 0.95em;
	height: 0.95em;
	color: var(--aos-color-primary);
}

.aos-price {
	font-size: var(--aos-text-xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--aos-color-price);
}

.aos-price--big {
	font-size: var(--aos-text-4xl);
	letter-spacing: -0.02em;
	/* El precio es lo primero que se busca en una ficha: se le da aire y una
	   línea de acento debajo en vez de dejarlo como un párrafo más. */
	padding-bottom: var(--aos-space-3);
	border-bottom: 2px solid var(--aos-color-primary-bright);
	margin-bottom: var(--aos-space-2);
}

.aos-pagination {
	margin-top: var(--aos-space-10);
	display: flex;
	justify-content: center;
	gap: var(--aos-space-2);
}

/*
 * Un solo momento de movimiento autoral: las tarjetas del stock entran con
 * un fundido + leve ascenso al aparecer en pantalla — nada de scroll-jacking
 * ni efectos repetidos por sección. Progressive enhancement genuino: sin la
 * clase "aos-js" en <html> (que solo pone assets/aos-connector.js, de forma
 * síncrona, antes de que el body pinte) las tarjetas quedan visibles de
 * entrada — nunca dependen de que el JS corra para poder verse.
 */
html.aos-js .aos-vehicle-card {
	opacity: 0;
	transform: translateY(14px);
}

html.aos-js .aos-vehicle-card.aos-in-view {
	animation: aos-rise 560ms var(--aos-ease) forwards;
}

@keyframes aos-rise {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	html.aos-js .aos-vehicle-card {
		opacity: 1;
		transform: none;
		animation: none;
	}
}

/* ---------------------------------------------------------------------- */
/* Ficha de un vehículo                                                   */
/* ---------------------------------------------------------------------- */

.aos-single {
	max-width: 1120px;
	margin: 0 auto;
	padding: var(--aos-space-8) var(--aos-space-4) var(--aos-space-16);
	color: var(--aos-color-fg);
}

.aos-breadcrumb {
	margin: 0 0 var(--aos-space-6);
}

.aos-breadcrumb a {
	display: inline-flex;
	align-items: center;
	gap: var(--aos-space-1);
	color: var(--aos-color-muted-fg);
	text-decoration: none;
	font-size: var(--aos-text-sm);
	font-weight: 500;
	border-radius: var(--aos-radius-md);
}

.aos-breadcrumb a:hover {
	color: var(--aos-color-primary);
}

/*
 * El orden en celular es galería → panel → detalles, y NO galería →
 * detalles → panel como estaba. Medido en el render: con el panel al final,
 * el precio quedaba a 1.1 pantallas de scroll y el botón de WhatsApp a 1.5 —
 * y eso con una descripción corta; un auto con descripción larga,
 * equipamiento completo, documentos, video y mapa lo empujaba mucho más
 * abajo. El precio y el contacto son lo que el cliente vino a buscar, así que
 * van apenas terminan las fotos.
 *
 * En escritorio no cambia nada: las áreas nombradas rearman las dos columnas
 * de siempre, con el panel pegajoso a la derecha ocupando ambas filas.
 */
.aos-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--aos-space-10);
}

.aos-single__gallery {
	order: 1;
}

.aos-single__panel {
	order: 2;
}

.aos-single__details {
	order: 3;
}

/* La primera sección de detalles ya está separada por el gap de la grilla. */
.aos-single__details > .aos-single__section:first-child {
	margin-top: 0;
}

/* Galería primero, panel de precio/specs/contacto segundo — mismo orden en celular y en escritorio (el HTML ya viene en ese orden, no hace falta reordenar por CSS). */
@media (min-width: 900px) {
	.aos-single__layout {
		grid-template-columns: minmax(0, 1fr) 360px;
		grid-template-areas:
			"galeria panel"
			"detalles panel";
		align-items: start;
	}

	.aos-single__gallery {
		grid-area: galeria;
	}

	.aos-single__details {
		grid-area: detalles;
	}

	.aos-single__panel {
		grid-area: panel;
		position: sticky;
		top: var(--aos-space-6);
	}
}

.aos-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--aos-space-2);
	margin-bottom: var(--aos-space-8);
}

.aos-gallery--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background: var(--aos-color-surface);
	border-radius: var(--aos-radius-lg);
	color: var(--aos-color-muted-fg);
}

.aos-gallery__item {
	display: block;
	border-radius: var(--aos-radius-md);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	box-shadow: var(--aos-shadow-sm);
	cursor: zoom-in;
}

.aos-gallery__item--main {
	grid-column: 1 / -1;
	aspect-ratio: 16 / 10;
	box-shadow: var(--aos-shadow-md);
}

.aos-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 420ms var(--aos-ease);
}

.aos-gallery__item:hover .aos-gallery__img {
	transform: scale(1.03);
}

/* Variante: carrusel (deslizar) */
.aos-gallery--carousel {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: var(--aos-space-2);
	grid-template-columns: none;
	scrollbar-width: thin;
	scrollbar-color: var(--aos-ink-400) transparent;
	padding-bottom: var(--aos-space-2);
}

.aos-gallery--carousel::-webkit-scrollbar {
	height: 8px;
}

.aos-gallery--carousel::-webkit-scrollbar-thumb {
	background: var(--aos-ink-400);
	border-radius: var(--aos-radius-full);
}

.aos-gallery--carousel .aos-gallery__item {
	flex: 0 0 85%;
	scroll-snap-align: start;
	aspect-ratio: 16 / 10;
}

@media (min-width: 700px) {
	.aos-gallery--carousel .aos-gallery__item {
		flex-basis: 60%;
	}
}

/* Variante: masonry (mosaico) */
.aos-gallery--masonry {
	display: block;
	columns: 2;
	column-gap: var(--aos-space-2);
	grid-template-columns: none;
}

.aos-gallery--masonry .aos-gallery__item {
	display: block;
	aspect-ratio: auto;
	break-inside: avoid;
	margin-bottom: var(--aos-space-2);
}

@media (min-width: 700px) {
	.aos-gallery--masonry {
		columns: 3;
	}
}

.aos-single__section {
	margin-top: var(--aos-space-10);
}

.aos-single__section h2 {
	display: flex;
	align-items: center;
	gap: var(--aos-space-2);
	font-size: var(--aos-text-lg);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 var(--aos-space-3);
}

.aos-single__description {
	line-height: 1.65;
	max-width: 68ch;
}

/* ---------------------------------------------------------------------- */
/* Equipamiento, video, mapa                                             */
/* ---------------------------------------------------------------------- */

.aos-features {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: var(--aos-space-2) var(--aos-space-4);
}

.aos-features li {
	position: relative;
	padding-left: var(--aos-space-5);
	font-size: var(--aos-text-sm);
}

.aos-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 6px;
	height: 6px;
	border-radius: var(--aos-radius-full);
	background: var(--aos-color-primary);
}

.aos-documents {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--aos-space-2);
}

.aos-documents a {
	display: flex;
	align-items: center;
	gap: var(--aos-space-3);
	padding: var(--aos-space-3) var(--aos-space-4);
	border: 1px solid var(--aos-color-border);
	border-radius: var(--aos-radius-md);
	text-decoration: none;
	color: var(--aos-color-fg);
	font-size: var(--aos-text-sm);
	font-weight: 500;
	transition: border-color var(--aos-duration) var(--aos-ease), background var(--aos-duration) var(--aos-ease);
}

/*
 * Los documentos van en el color de CONFIANZA y no en el de acento, y es una
 * distinción de significado, no de gusto: el cobre es el color de vender
 * (precio, botones, CTA) y este es el de respaldar. Que un papel del auto se
 * vea igual que un botón de "comprar" mezcla las dos cosas.
 *
 * Importante: el color marca documentos que EXISTEN de verdad (los que
 * subieron al vehículo). No hay ninguna insignia de "documentación al día"
 * ni nada por el estilo — eso sería afirmar algo que el sistema no sabe.
 */
.aos-documents a:hover {
	border-color: var(--aos-color-trust);
	background: var(--aos-color-trust-soft);
	color: var(--aos-color-trust-hover);
}

.aos-documents .aos-icon {
	color: var(--aos-color-trust);
	width: 1.1rem;
	height: 1.1rem;
}

.aos-video,
.aos-map {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--aos-radius-lg);
	overflow: hidden;
	background: var(--aos-color-surface);
	box-shadow: var(--aos-shadow-sm);
}

.aos-video iframe,
.aos-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------------- */
/* Panel lateral: precio, specs, acciones                                 */
/* ---------------------------------------------------------------------- */

/*
 * El fondo, el borde y la sombra los pone .aos-glass — acá quedan solo la
 * caja y el espaciado.
 *
 * OJO: hay OTRA regla .aos-single__panel más arriba (la del orden en celular).
 * Esta, por venir después, es la que manda en lo visual. Al pasar el panel a
 * vidrio la primera vez toqué la de arriba y el panel siguió opaco, porque
 * este "background" le ganaba a .aos-glass por orden de aparición. Se
 * descubrió midiendo el píxel renderizado, no leyendo el archivo.
 */
.aos-single__panel {
	display: flex;
	flex-direction: column;
	gap: var(--aos-space-5);
	border-radius: var(--aos-radius-lg);
	padding: var(--aos-space-6);
}

.aos-single__title {
	font-size: var(--aos-text-2xl);
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0;
	line-height: 1.25;
}

.aos-specs {
	list-style: none;
	margin: 0;
	padding: var(--aos-space-4) 0;
	display: flex;
	flex-direction: column;
	gap: var(--aos-space-3);
	border-top: 1px solid var(--aos-color-border);
}

.aos-specs__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--aos-space-3);
	font-size: var(--aos-text-sm);
}

.aos-specs dt {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--aos-color-muted-fg);
	font-weight: 500;
}

.aos-specs dt .aos-icon {
	color: var(--aos-color-primary);
}

.aos-specs dd {
	margin: 0;
	font-weight: 600;
	text-align: right;
}

/* ---------------------------------------------------------------------- */
/* Botones                                                                */
/* ---------------------------------------------------------------------- */

.aos-single__actions {
	display: flex;
	gap: var(--aos-space-3);
}

.aos-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--aos-space-2);
	height: 48px;
	padding: 0 var(--aos-space-6);
	border: none;
	border-radius: var(--aos-radius-md);
	font-size: var(--aos-text-base);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--aos-duration) var(--aos-ease), transform var(--aos-duration) var(--aos-ease), box-shadow var(--aos-duration) var(--aos-ease);
}

/* "flex: 1" vive acá y no en .aos-btn, que es donde estaba antes: en esta
   fila horizontal reparte el ancho entre WhatsApp y Llamar, que es lo que se
   buscaba. Pero .aos-contact-form es un flex COLUMN, y ahí ese mismo
   "flex: 1" fijaba flex-basis: 0% sobre el ALTO y le ganaba al height: 48px.
   Resultado: el botón Enviar —el principal de toda la página— colapsaba a
   18px, una tira con el texto pegado a los bordes. Bug pre-existente, no
   introducido por esta pasada; encontrado midiendo el render, no leyendo. */
.aos-single__actions .aos-btn {
	flex: 1;
}

.aos-btn:active {
	transform: translateY(1px);
}

.aos-btn--whatsapp {
	background: var(--aos-color-whatsapp);
	color: #fff;
	box-shadow: var(--aos-shadow-sm);
}

.aos-btn--whatsapp:hover {
	background: var(--aos-color-whatsapp-hover);
	color: #fff;
	box-shadow: var(--aos-shadow-md);
}

.aos-btn--call {
	background: var(--aos-color-bg);
	color: var(--aos-color-primary);
	border: 1px solid var(--aos-color-primary);
}

/* El texto se oscurece junto con el fondo: cobre-600 sobre el tinte suave
   se quedaba en 4.27:1, apenas bajo AA. Con el 700 sube a 5.91:1. */
.aos-btn--call:hover {
	background: var(--aos-color-primary-soft);
	color: var(--aos-color-primary-hover);
}

.aos-btn--primary {
	background: var(--aos-color-primary);
	color: #fff;
	width: 100%;
	box-shadow: var(--aos-shadow-sm);
}

.aos-btn--primary:hover {
	background: var(--aos-color-primary-hover);
	color: #fff;
	box-shadow: var(--aos-shadow-md);
}

.aos-btn:disabled {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---------------------------------------------------------------------- */
/* Formulario de contacto                                                 */
/* ---------------------------------------------------------------------- */

.aos-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--aos-space-3);
	padding-top: var(--aos-space-4);
	border-top: 1px solid var(--aos-color-border);
}

.aos-contact-form h2 {
	font-size: var(--aos-text-base);
	font-weight: 600;
	margin: 0;
}

.aos-contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.aos-contact-form__field label {
	font-size: var(--aos-text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--aos-color-muted-fg);
}

.aos-contact-form__field label span {
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.8;
}

.aos-contact-form input[type="text"],
.aos-contact-form input[type="email"],
.aos-contact-form input[type="tel"],
.aos-contact-form textarea {
	width: 100%;
	padding: var(--aos-space-2) var(--aos-space-3);
	border: 1px solid var(--aos-color-border);
	border-radius: var(--aos-radius-md);
	/* 16px en celular a propósito: bajo eso, iOS hace zoom a la página al
	   enfocar el campo y el cliente pierde de vista el auto que estaba
	   mirando. Recién en pantalla ancha baja al tamaño compacto. */
	font-size: var(--aos-text-base);
	/* 44px de superficie táctil. Los campos medían 37px, el único control del
	   plugin por debajo de su propia escala (los select de filtro miden 42px y
	   los botones 48px). */
	min-height: 44px;
	font-family: inherit;
	background: var(--aos-color-bg);
	color: var(--aos-color-fg);
	box-sizing: border-box;
	transition: border-color var(--aos-duration) var(--aos-ease);
}

@media (min-width: 700px) {
	.aos-contact-form input[type="text"],
	.aos-contact-form input[type="email"],
	.aos-contact-form input[type="tel"],
	.aos-contact-form textarea {
		font-size: var(--aos-text-sm);
	}
}

/* ink-600 y no ink-400: el 400 daba 3.36:1 sobre blanco, bajo el mínimo de
   4.5:1 para texto. Importaba el doble mientras el placeholder era la única
   etiqueta que tenía el campo. */
.aos-contact-form input::placeholder,
.aos-contact-form textarea::placeholder {
	color: var(--aos-color-muted-fg);
}

.aos-contact-form input[type="tel"]:hover,
.aos-contact-form input:hover,
.aos-contact-form textarea:hover {
	border-color: var(--aos-ink-400);
}

.aos-contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.aos-contact-form__success {
	color: var(--aos-color-price);
	font-size: var(--aos-text-sm);
	margin: 0;
}

.aos-contact-form__error {
	color: var(--aos-color-error);
	font-size: var(--aos-text-sm);
	margin: 0;
}

@media (max-width: 480px) {
	.aos-gallery,
	.aos-gallery--masonry {
		grid-template-columns: repeat(2, 1fr);
		columns: 2;
	}

	.aos-stock-title {
		font-size: var(--aos-text-3xl);
	}

	.aos-price--big {
		font-size: var(--aos-text-3xl);
	}
}

/* ---------------------------------------------------------------------- */
/* Lightbox de fotos (ficha de vehículo) — sobre <dialog> nativo, sin JS   */
/* de terceros. Ver aosInitLightbox() en aos-connector.js.                */
/* ---------------------------------------------------------------------- */

.aos-lightbox {
	border: none;
	padding: 0;
	background: transparent;
	max-width: 92vw;
	max-height: 92vh;
	margin: auto;
}

.aos-lightbox::backdrop {
	background: rgb(23 19 15 / 0.86);
}

.aos-lightbox[open] {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: aos-lightbox-in 220ms var(--aos-ease);
}

@keyframes aos-lightbox-in {
	from {
		opacity: 0;
		transform: scale(0.97);
	}
}

.aos-lightbox__img {
	max-width: 92vw;
	max-height: 92vh;
	display: block;
	border-radius: var(--aos-radius-md);
	box-shadow: var(--aos-shadow-lg);
}

.aos-lightbox__close,
.aos-lightbox__nav {
	position: fixed;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: none;
	border-radius: var(--aos-radius-full);
	background: rgb(250 247 242 / 0.14);
	color: #fff;
	cursor: pointer;
	transition: background var(--aos-duration) var(--aos-ease);
}

.aos-lightbox__close:hover,
.aos-lightbox__nav:hover {
	background: rgb(250 247 242 / 0.28);
}

.aos-lightbox__close:focus-visible,
.aos-lightbox__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.aos-lightbox__close .aos-icon,
.aos-lightbox__nav .aos-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.aos-lightbox__close {
	top: var(--aos-space-4);
	right: var(--aos-space-4);
}

.aos-lightbox__nav--prev {
	left: var(--aos-space-4);
	top: 50%;
	transform: translateY(-50%);
}

.aos-lightbox__nav--next {
	right: var(--aos-space-4);
	top: 50%;
	transform: translateY(-50%);
}

@media (max-width: 640px) {
	.aos-lightbox__close,
	.aos-lightbox__nav {
		width: 38px;
		height: 38px;
	}
}