/**
 * Audi Huertas Motor — capa de marca sobre el tema `base`.
 *
 * Los valores no son estimados: salen del CSS de producción de audi.com
 * (static.audi.com/assets/frontend-*.css) y del design system oficial
 * @audi/audi-ui. Se anotan con su nombre de token original para que el día que
 * Audi mueva un color se sepa qué se estaba copiando.
 *
 * Este fichero se encola DESPUÉS de utilities.css y style.css, así que sus
 * reglas de una sola clase ya ganan por orden de cascada sin forzar nada. Los
 * !important que quedan son puntuales y todos contra utilidades que ya vienen
 * con !important de fábrica (.text-white, .text-secondary, .text-alt). El que
 * sí desaparece es el `#footer *, #footer a { color: ... !important }` del
 * brand.css anterior: un selector universal que repintaba absolutamente todo
 * lo que hubiera dentro del footer, y que solo hacía falta porque el fondo
 * estaba puesto del color equivocado.
 *
 * Contrastes calculados sobre los fondos reales en los que se usa cada color,
 * criterio WCAG AA (4.5:1 texto normal, 3:1 texto grande y elementos gráficos).
 */

:root {

	/* ---- Paleta oficial Audi -------------------------------------------- */

	/* Progressive Red, el rojo de la marca desde el rebrand.
	   4.23:1 sobre blanco: vale para texto grande, iconos y elementos
	   gráficos, NO para texto pequeño. Para eso está --color-alt. */
	--audi-red: #f50537;          /* --color-progressive-red */
	--audi-red-200: #eb0d3f;      /* --color-red-200-solid */
	--audi-red-300: #cb0b36;      /* --color-red-300-solid */

	/* Los grises de Audi no son neutros: tiran a azul frío. Es justo lo que
	   separa su gama de un gris de plantilla, así que se respetan tal cual. */
	--audi-grey-10: #101319;      /* --color-grey-10-solid */
	--audi-grey-15: #181d25;
	--audi-grey-25: #2c343f;
	--audi-grey-40: #4d5766;
	--audi-grey-60: #808a99;
	--audi-grey-80: #b9c0cb;
	--audi-grey-90: #dbdfe6;
	--audi-grey-95: #eceff3;

	/* Curva de aceleración de Audi UI ($aui-easing). Arranca lenta y frena
	   tarde; es la que da la sensación «mecánica» de sus transiciones. */
	--audi-easing: cubic-bezier(0.75, 0.02, 0.5, 1);

	/* --border-radius-sm. Audi redondea poco y siempre igual: 10px en
	   botones y campos, 4px en piezas pequeñas. */
	--audi-radius: 10px;
	--audi-radius-xs: 4px;

	/* ---- Mapeo a los tokens del tema ------------------------------------ */

	/* El azul que había aquí (#001e50) es el de Volkswagen: este brand.css
	   venía copiado de otra marca del grupo y nunca se terminó de adaptar.
	   En Audi el color estructural es el negro; el rojo es acento, no fondo. */
	--color-primary: #000000;

	/* Ojo antes de tocarlo: --color-secondary no es «el segundo color de la
	   marca», es el color de TEXTO sobre --color-primary. El tema los usa
	   siempre en pareja (`bg-primary text-secondary` en los CTA de reserva,
	   en el breadcrumb del vehículo y en el footer), así que con primary
	   negro esto tiene que ser blanco. El uso como FONDO («Secundario» en
	   los selects de los bloques) se reconduce más abajo al gris Audi. */
	--color-secondary: #ffffff;

	/* Rojo de acento. Se usa el red-200 y no el Progressive Red porque
	   `text-alt` pinta texto pequeño (los consumos de la ficha de vehículo)
	   sobre blanco: #eb0d3f da 4.51:1 y pasa AA por los pelos, mientras que
	   #f50537 se queda en 4.23:1. Sobre negro da 4.66:1, así que también
	   aguanta en el footer y en los botones oscuros. */
	--color-alt: #f50537;

	--text-color: var(--audi-grey-10);
	--gray: var(--audi-grey-40);
	--darkgray: var(--audi-grey-15);
	--lightgray: var(--audi-grey-95);
	--main-bg: #ffffff;

	--main-font: "Audi Type", Arial, sans-serif;
	--heading-font: "Audi Type Extended", Arial, sans-serif;

	--px: 1.25rem;
	--py: 3.5rem;
	--header-height: 60px;
	--header-type-2-height: 60px;
	--grid-limit: 1340px;

	/* Audi no usa sombras difusas de color: usa sombra corta y muy tenue,
	   o ninguna. La que había (0 0 10px 2px #ccc) rodeaba la caja por los
	   cuatro lados y ensuciaba las tarjetas. */
	--box-shadow: 0 2px 12px rgba(16, 19, 25, .08);

	/* Las etiquetas de las tarjetas de vehículo llevan texto blanco encima,
	   así que la de oferta necesita el rojo oscuro: #cb0b36 da 5.77:1,
	   mientras que el Progressive Red se quedaría en 4.23:1. */
	--signal-offer: var(--audi-red-300);
	--signal-ring: var(--audi-red);
}

@media (min-width: 992px) {

	:root {
		--px: 3rem;
		--py: 5rem;
		--header-height: 80px;
		--header-type-2-height: 138px;
	}
}


/****************************************************/
/* TIPOGRAFÍA                                       */
/****************************************************/

/* El tema arranca en 14px y el brand.css anterior lo bajaba a .95rem en
   escritorio (≈15.2px). Audi trabaja sobre 16px. Como todo el tema está en
   unidades relativas, subir la raíz escala texto y espaciado a la vez. */
html {
	font-size: 15px;
}

/* Audi Type solo trae Normal (400) y Bold (700). El `font-weight: 300` del
   tema no existe en la familia, así que el navegador lo sintetizaba
   adelgazando el trazo y el texto perdía definición en pantalla. */
body {
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* utilities.css limita `img, svg` al ancho del contenedor, pero deja fuera el
   vídeo. El <video class="thumb"> del hero se renderiza entonces a su tamaño
   intrínseco (402px) y saca la página entera del viewport en móvil: el
   documento medía 410px con un viewport de 390 y aparecía scroll horizontal en
   TODA la home, no solo en el hero. */
video {
	max-width: 100%;
	height: auto;
}

/* Audi Type Extended es una tipografía ancha: a tamaño de titular necesita
   que se le cierre un poco el tracking, o las palabras largas («Concesionario»,
   «financiación») se descuelgan. */
.h1, .h2, .h3, h1, h2, h3 {
	letter-spacing: -0.015em;
}

h1, .h1 {
	font-size: 2.4rem;
	line-height: 1.08;
}

/* 24.75px. Bajarlo desde los 28px del tema no es solo cuestión de gusto: a
   27.75px el titular de Audi Selection dejaba el «:plus» —que viene en su
   propio <span> desde el editor— fuera de la caja, y el h2 terminaba con
   scrollWidth 395 sobre un clientWidth de 360. Eso sacaba el documento a 410px
   en un viewport de 390 y provocaba scroll horizontal en toda la home, no solo
   en ese bloque. Forzarlo con `overflow-wrap: break-word` lo arreglaba, pero
   partía la palabra por la mitad («:pl / us»), así que se corrige por tamaño.
   Medido con getBoundingClientRect a 390px. */
h2, .h2 {
	font-size: 1.65rem;
	line-height: 1.15;
}

h3, .h3 {
	font-size: 1.4rem;
	line-height: 1.2;
}

h4, .h4 {
	font-size: 1.2rem;
	line-height: 1.25;
}

h5, .h5 {
	font-size: 1.05rem;
}

h6, .h6 {
	font-size: 1rem;
}

.h4, .h5, .h6, h4, h5, h6 {
	font-weight: 700;
	letter-spacing: -0.005em;
}

@media (min-width: 992px) {

	html {
		font-size: 16px;
	}

	/* Escala 48 / 30.4 / 24 / 20 / 18 / 16 px. Lo que se corrige no es el
	   tamaño suelto de cada nivel, sino la separación entre ellos: antes h1
	   (45.6px) y h2 (30.4px) iban seguidos de un h3 de 27.4px, así que un
	   titular de sección y un subtítulo se confundían. Ahora cada salto ronda
	   1.25, la razón de la escala modular «huge» de Audi UI
	   ($aui-modular-scale: base 20px, ratio 1.25).

	   El h2 se queda clavado en sus 30.4px de siempre (1.9rem sobre la base
	   de 16px) y no es un descuido: los bloques de contenido libre lo usan
	   como titular dentro de una col-lg-6 sobre imagen —«Tu Audi Selection
	   :plus, ahora con unas condiciones irrepetibles»— y en Audi Type
	   Extended, que es muy ancha, ese texto va justísimo a dos líneas. Con
	   solo un 5% más pasa a tres, y entonces el subtítulo baja hasta quedar
	   sobre el capó del coche, donde ya no se lee. Comprobado en captura. */
	h1, .h1, .h-lg-1 {
		font-size: 3rem;
		line-height: 1.05;
	}

	h2, .h2 {
		font-size: 1.9rem;
		line-height: 1.1;
	}

	h3, .h3 {
		font-size: 1.5rem;
	}

	h4, .h4 {
		font-size: 1.25rem;
	}

	h5, .h5 {
		font-size: 1.125rem;
	}
}


/****************************************************/
/* BOTONES / CTA                                    */
/****************************************************/

/* Los CTA de Audi son sobrios: radio de 10px, texto en caja baja, peso normal
   y 15px de cuerpo. El estilo anterior gritaba —mayúsculas, negrita, borde
   azul VW de 2px y dos `border-radius` peleándose en la misma regla— y no se
   parecía a nada de audi.com. */
button, .button, [type="submit"], a.button, .has-buttons a {
	background-color: var(--color-alt);
	color: var(--color-primary);
	text-align: center;
	justify-content: center;
	padding-block: 1rem;
	border-radius: var(--audi-radius);
}

/* Variantes «outline» de los bloques: fondo transparente y color heredado del
   contexto. La regla de arriba fija el color y brand.css se encola después de
   los CSS de bloque, así que hay que devolverles el inherit explícitamente. */
a.equipment-block__button,
.equipment-block__button,
.hero-landing__button--outline {
	background-color: transparent;
	color: inherit;
}

/* El relleno por defecto solo se aplica si el botón NO trae ya una utilidad
   `bg-*` del tema. Sin el :not(), este bloque se cargaría por orden de cascada
   los `bg-alt`, `bg-lightgray` y demás que las plantillas ponen a mano, porque
   brand.css se encola después de utilities.css y ambos pesan lo mismo. */
button:not([class*="bg-"]),
.button:not([class*="bg-"]),
[type="submit"]:not([class*="bg-"]),
a.button:not([class*="bg-"]),
.has-buttons a:not([class*="bg-"]) {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}

button:not([class*="bg-"]):hover,
.button:not([class*="bg-"]):hover,
[type="submit"]:not([class*="bg-"]):hover,
a.button:not([class*="bg-"]):hover,
.has-buttons a:not([class*="bg-"]):hover {
	background-color: var(--audi-grey-25);
	border-color: var(--audi-grey-25);
	color: #ffffff;
}

/* Los que sí traen fondo de utilidad solo necesitan el matiz de interacción.
   Audi no cambia el color en hover, lo oscurece: baja un escalón de gris. */
.button[class*="bg-"]:hover,
a.button[class*="bg-"]:hover {
	opacity: .85;
}

/* Variante secundaria de Audi: sin relleno, borde fino y texto oscuro. Es la
   que usan para la acción no principal («Más información» junto a «Reservar»). */
.button.button-outline,
.button.bg-transparent {
	background-color: transparent;
	border-color: currentColor;
	color: var(--color-primary);
}

.bg-primary .button.button-outline,
.bg-primary .button.bg-transparent{
	border: 1px solid #ffffff !important;
	padding-inline:1rem;
	color: #ffffff;
}

.button.button-outline:hover,
.button.bg-transparent:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
	opacity: 1;
}

/* Foco visible para teclado. El tema no lo definía en ningún sitio y con
   `outline: 0` heredado de los resets el tabulado se perdía por completo. */
button:focus-visible,
.button:focus-visible,
[type="submit"]:focus-visible,
a.button:focus-visible {
	outline: 2px solid var(--audi-red);
	outline-offset: 3px;
}

/* El botón de icono es circular por diseño; que no le entre el radio de 10px. */
/*.button.icon-button {
	border-radius: 50%;
	padding: 0;
}*/


/****************************************************/
/* ENLACES Y FOCO GENERAL                           */
/****************************************************/

a {
	transition: color .25s var(--audi-easing);
}

a:not(.button):focus-visible {
	outline: 2px solid var(--audi-red);
	outline-offset: 2px;
}

.skip-link:focus {
	background-color: var(--color-primary);
	color: #ffffff;
	padding: .75rem 1.25rem;
	border-radius: var(--audi-radius-xs);
}

/* `bg-secundario` (con la clave en castellano que guardan los selects de ACF)
   es una opción de FONDO de bloque. Como --color-secondary tiene que valer
   blanco para el texto sobre negro, aquí se reconduce al gris frío de Audi,
   que es lo que ellos usan para alternar secciones. */
.bg-secondary,
.bg-secundario {
	background-color: var(--audi-grey-95);
}


/****************************************************/
/* HERO SECTION                                     */
/****************************************************/

.hero-section .content > * {
	color: #ffffff;
}

.hero-section.animated-hero .thumb {
	border-radius: 0;
}

@media (min-width: 992px) {

	.hero-section {
		align-items: flex-start !important;
		aspect-ratio: 3.2;
	}
}


/****************************************************/
/* BLOQUES                                          */
/****************************************************/

/* Audi no redondea las fotos de producto: el coche va a sangre. */
.image-text-block img,
.img-wrap img {
	border-radius: 0;
}

.image-text-block .content {
	padding: 1.5rem 1.5rem 2rem;
}

/* Cabecera de vídeo de la portada. Tenía un tope fijo de 350px: en pantallas
   grandes quedaba una franja (7:1 a 2560px) y el encuadre cambiaba con cada
   ancho, cortando los aros del vídeo. Desde escritorio, el alto pasa a ser una
   proporción del ancho, la de la cabecera de la web anterior (38 %), con esos
   350px (21.875rem) de mínimo y sin pasar del alto de la pantalla. En móvil y
   tableta, como estaba. */
.image-banners.type1 video.thumb {
	max-height: 21.875rem;
}

@media (min-width: 992px) {
	.image-banners.type1 video.thumb {
		height: max(38vw, 21.875rem);
		max-height: calc(100svh - var(--header-height));
	}
}

/* Banner «Tu Audi Selection :plus» de la portada: la sección que lleva los aros
   (.aros-audi, clase de la imagen en el contenido). Medía lo que su texto, unos
   290px a cualquier ancho, y la foto de fondo salía cortada por abajo: los
   coches, sin ruedas. Con el alto de la proporción de la foto (2,37:1, 42vw) se
   ven enteros. */
#blocks > section:has(.aros-audi) {
	min-height: 42vw;
}

/* Por debajo de 1440px el texto y el botón llegan a la altura de los techos
   (a 1280px, hasta la mitad de la foto) y caían encima de los coches. Ahí la
   foto va entera en una franja al pie, a todo el ancho, y el texto encima,
   sobre el blanco. */
@media (max-width: 1439.98px) {
	#blocks > section:has(.aros-audi) {
		padding-bottom: calc(42vw + 1.5rem);
	}

	#blocks > section:has(.aros-audi) > .thumb-container {
		background-size: 100% auto;
		background-position: center bottom;
	}
}

/* Los aros, pequeños y arriba a la derecha, como en las piezas de Audi. En móvil
   su columna sube por encima del titular. */
.aros-audi {
	display: block;
	width: clamp(5.5rem, 12vw, 12rem);
	height: auto;
	margin: 0 0 0 auto;
}

.col-12:has(.aros-audi) {
	order: -1;
}

@media (min-width: 992px) {
	.col-12:has(.aros-audi) {
		order: 0;
	}
}

/* Páginas con texto de entrada y bloques (Contacto, Calidad, Nuestra historia):
   la sección del texto (.py) y la primera de bloques (.pt) sumaban 80 + 80px de
   hueco entre las dos. */
#main > section.py + #blocks > section.pt:first-child {
	padding-top: 0;
}

/* La sección de ventajas («Elige tu coche ideal») tenía el título a 2.3rem,
   más grande que muchos h2 de la página, y competía con el titular de sección.
   Se baja a escala de h4 real y se deja que mande el titular. */
.features-list .content .title {
	font-size: 1.15rem;
	line-height: 1.25;
	letter-spacing: -0.005em;
	margin-bottom: .65rem;
}

/* El gris de cuerpo solo vale sobre fondo claro: son 7.3:1 sobre blanco, pero
   en las landings de esquema oscuro (`body.bg-primary`, la plantilla Days) cae
   a 2.87:1 contra el negro y la descripción de cada ventaja deja de leerse.
   Allí manda la sección de landings, que pone el texto en blanco. */
body:not(.bg-primary) .features-list .content p {
	color: var(--gray);
}

.presentation .title {
	margin-bottom: .75rem;
}

.presentation .subtitle {
	color: var(--gray);
	font-size: 1.05rem;
}

/* Regla horizontal en gris Audi en lugar del gris del navegador. */
hr {
	border: 0;
	border-top: 1px solid var(--audi-grey-90);
	opacity: 1;
}

.brand-banner__cta {
	align-self: flex-start;
}

@media (min-width: 992px) {

	.image-text-block .content {
		padding: 2rem 2.5rem;
	}

	/* El `min-height: 2lh` se mantiene: es lo que alinea los cuatro títulos
	   de la fila de ventajas cuando uno ocupa dos líneas y otro una. */
	.features-list .content .title {
		font-size: 1.5rem;
		min-height: 2lh;
	}
}


/****************************************************/
/* CONTENIDO HEREDADO DE OXYGEN                     */
/****************************************************/

/* La web viva (audihuertasmotor.com) se montó con Oxygen, y al migrar el
   contenido a bloques ACF vinieron con él las clases de Oxygen. Dos de ellas se
   quedaron sin CSS que las respalde, porque el que las pintaba vivía en
   uploads/oxygen/css/. Aquí se recuperan: son seis elementos en todo el sitio,
   ninguno inventado, todos comprobados contra el CSS de producción. */

/* En Oxygen cada uno lleva su regla por id (#span-255-47 { color:#f50537 } y
   compañía). Son exactamente seis en la base de datos: tres «Audi» y tres
   «:plus», es decir los términos de marca dentro de los titulares. De ahí que
   valga la clase entera sin miedo a pintar de rojo algo que no toque. */
.ct-span {
	color: var(--color-alt);
}

/* Producción las resuelve como 'AudiTypeExtendedNormal' y
   'AudiTypeExtendedBold', dos familias que aquí no existen: el fonts.css de
   este sitio registra "Audi Type Extended" con sus dos pesos. Sin este mapeo
   las clases no hacen nada y los subtítulos («Aprovéchalas y haz tu reserva
   para llevártelo sin esperas») caen a la Audi Type estrecha, cuando en la web
   viva van en la ancha. Los tres h2 que llevan la variante bold ya salían bien
   de rebote, porque el tema les da --heading-font por ser encabezados. */
.audi-font-extended,
.audi-font-extended-bold {
	font-family: var(--heading-font);
}

.audi-font-extended {
	font-weight: 400;
}

.audi-font-extended-bold {
	font-weight: 700;
}


/****************************************************/
/* HOME — FILTROS                                   */
/****************************************************/

#home-filters {
	margin-block: 2.5rem;
	padding-bottom: 1rem;
	color: var(--color-primary);
}

#home-filters span {
	font-size: 1rem;
}

#home-filters .title {
	padding-top: 2rem;
	color: var(--color-primary);
}

.home-filters__range-input::-webkit-slider-thumb {
	background-color: var(--color-primary);
}

.trigger-advanced-fields span {
	color: var(--color-primary);
}

/* Campos con el gris frío de Audi y su radio de 10px, en lugar del #F1F1F1
   neutro y los 4px de antes. */
#home-filters .search-filter-field--width-100 .search-filter-field__input,
#home-filters .search-filter-field--width-100 .search-filter-label,
#home-filters .search-filter-field--width-100 .search-filter-description {
	background-color: var(--audi-grey-95);
	border: none;
	border-radius: var(--audi-radius);
}

#home-filters .search-filter-label {
	text-transform: none;
	font-weight: 400;
	color: var(--gray);
}

#home-filters .search-filter-component-range-slider {
	color: var(--color-primary);
}

#home-filters .search-filter-component-combobox__selection span,
.search-filter-component-combobox .search-filter-component-combobox__listbox-toggle svg {
	color: var(--color-primary);
	fill: var(--color-primary);
}

body .search-filter-component-range-slider__range-input-progress {
	--range-color: var(--audi-red);
}

body .search-filter-component-combobox .search-filter-component-combobox__actions .search-filter-component-combobox__actions-input,
body .search-filter-component-combobox .search-filter-component-combobox__actions .search-filter-component-combobox__actions-input::placeholder {
	color: var(--color-primary);
}

body .search-filter-style--control-submit .search-filter-input-button.search-filter-field__input,
body .search-filter-style--control-submit .search-filter-input-button.search-filter-field__input:hover {
	font-size: 0;
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--color-primary) url(img/svg/icon_lens.svg) no-repeat center center;
	border: none;
	width: 3rem;
	background-size: 50%;
	transition: background-color .3s var(--audi-easing);
}

body .search-filter-style--control-submit .search-filter-input-button.search-filter-field__input:hover {
	background-color: var(--audi-grey-25);
	opacity: 1;
}

body .search-filter-style--control-reset .search-filter-input-button.search-filter-field__input {
	-webkit-appearance: none;
	text-decoration: underline;
	text-underline-offset: .25em;
	padding: 0 1rem;
	border: none;
	background: transparent;
	color: var(--gray);
	font-size: .9rem;
}

body .search-filter-component-combobox-base__listbox-option {
	font-size: 1rem;
}

body .search-filter-component-combobox-base__listbox-option--selected {
	background-color: var(--color-primary);
	color: #ffffff;
}

.vehicle-title,
.vehicles-grid li:not(:has(.button)) .vehicle-title {
	opacity: 1;
	transform: none;
	visibility: visible;
}

@media (min-width: 992px) {

	#custom-submit {
		position: absolute;
		right: 4.8rem;
		bottom: 1.8rem;
	}
}


/****************************************************/
/* LISTADO DE VEHÍCULOS                             */
/****************************************************/

.item-vehicle .title {
	font-family: var(--main-font);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: -0.005em;
}

.item-vehicle .title .desc {
	text-transform: none;
	font-family: var(--main-font);
	font-weight: 400;
	color: var(--gray);
	font-size: .85rem;
}

/* Contado y financiación son dos caminos de compra, no una jerarquía: el
   primario va en negro Audi y el otro en rojo de marca, ambos con texto
   blanco (4.5:1 y 4.66:1 sobre sus fondos). */
.item-vehicle .button-contado {
	background-color: var(--color-primary) !important;
	color: #ffffff !important;
	padding-inline: .6rem;
	border-radius: var(--audi-radius-xs);
}

.item-vehicle .button-financiacion {
	background-color: var(--color-alt) !important;
	color: #ffffff !important;
	padding-inline: .6rem;
	border-radius: var(--audi-radius-xs);
}

.item-vehicle .tag {
	color: #ffffff !important;
	background-color: var(--color-alt);
	border-radius: var(--audi-radius-xs);
	font-size: .8rem;
	letter-spacing: .01em;
}

.item-vehicle {
	transition: box-shadow .3s var(--audi-easing), transform .3s var(--audi-easing);
}

.item-vehicle:hover {
	box-shadow: var(--box-shadow);
}


/****************************************************/
/* BLOG                                             */
/****************************************************/

.item-post .content .title {
	font-size: 1.3rem;
	letter-spacing: -0.01em;
}

.item-post .content .excerpt {
	font-size: 1rem;
	color: var(--gray);
}


/****************************************************/
/* GRAVITY FORMS                                    */
/****************************************************/

#main .form-content input[type="submit"] {
	border-color: var(--color-primary);
}

/* Campos alineados con los filtros: mismo gris, mismo radio, y foco marcado
   con el rojo de marca en vez del azul por defecto del navegador. */
body .form-content input[type="text"],
body .form-content input[type="email"],
body .form-content input[type="tel"],
body .form-content input[type="number"],
body .form-content select,
body .form-content textarea {
	border-radius: var(--audi-radius);
	border: 1px solid var(--audi-grey-90);
	transition: border-color .25s var(--audi-easing), box-shadow .25s var(--audi-easing);
}

body .form-content input[type="text"]:focus,
body .form-content input[type="email"]:focus,
body .form-content input[type="tel"]:focus,
body .form-content input[type="number"]:focus,
body .form-content select:focus,
body .form-content textarea:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(245, 5, 55, .15);
	outline: none;
}


/****************************************************/
/* HEADER                                           */
/****************************************************/

/* Filo inferior en gris frío: separa la cabecera del contenido sin recurrir a
   una sombra, que es como lo resuelve audi.com. */
#head {
	border-bottom: 1px solid var(--audi-grey-90);
}

/* El logo se sale del móvil si no se le pone ancho aquí, y es un desbordamiento
   de toda la página, no solo de la cabecera. El markup es un <img> sin atributo
   width dentro de un `.col-auto`, que por definición se ajusta a su contenido:
   el `img { max-width: 100% }` de utilities.css se resuelve entonces contra una
   columna que ya mide lo que el fichero, 904px. El brand.css anterior solo
   declaraba el ancho dentro del @media de escritorio, así que por debajo de
   992px no lo limitaba nada. El vw es el tope para pantallas muy estrechas. */
#head .logo {
	display: block;
	width: 10rem;
	max-width: 45vw;
}

ul.main-menu > li > a {
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0;
	transition: color .25s var(--audi-easing);
}

/* El activo va en rojo Y subrayado, como en audihuertasmotor.com: un trazo
   grueso, separado de la palabra. El subrayado no es decoración: deja el estado
   «estás aquí» marcado por algo más que el color (WCAG 1.4.1) y ese rojo sobre
   blanco se queda en 4.23:1. */
ul.main-menu > li.current-menu-item > a,
ul.main-menu > li.current-menu-ancestor > a {
	color: var(--color-alt);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .45em;
}

ul.main-menu > li:not(.current-menu-item):hover > a {
	color: var(--color-alt);
}

#head.type-2 .actions * {
	font-weight: 400;
}

#head.type-2 .actions .action-favoritos svg * {
	stroke: var(--color-alt);
}

#head.type-2 .actions .action-favoritos {
	color: var(--color-alt);
}

.favorites-count span {
	background-color: var(--color-alt);
	color: #ffffff;
}

@media (min-width: 992px) {

	#head .logo {
		display: block;
		width: 200px;
	}

	#head.type-2 .logo {
		width: 15rem;
	}
}


/****************************************************/
/* FOOTER                                           */
/****************************************************/

/* El footer vuelve al negro. No es un capricho estético: el markup de
   footer.php ya está escrito para fondo oscuro (los teléfonos, el copyright y
   el menú legal llevan `text-white` en la plantilla). El brand.css anterior lo
   pintaba de azul VW claro y luego tenía que repintar TODO el contenido con
   `#footer *, #footer a { color: ... !important }` para que se leyera. Al
   devolverle el fondo oscuro que espera, ese !important sobra. */
#footer {
	margin-top: 0;
	background-color: var(--color-primary);
	color: var(--audi-grey-90);
}

#footer a {
	color: var(--audi-grey-90);
}

#footer a:hover {
	color: #ffffff;
}

/* El logo es un WEBP sin canal alfa: fondo blanco opaco y marca en negro. Sobre
   el footer oscuro se veía como un recorte blanco. Invirtiéndolo, el fondo pasa
   a negro (se funde con el footer) y la marca a blanco. */
#footer .logo img {
	filter: invert(1);
}

/* Más grande: la plantilla lo deja en 180px, menos que el de la cabecera. */
#footer .logo img {
	width: 13rem;
	height: auto;
}

@media (min-width: 992px) {
	#footer .logo img {
		width: 18rem;
	}
}

/* Nombre y ciudad de cada concesionario: 15.7:1 sobre negro. */
#footer .concesionario .text-secondary {
	color: var(--audi-grey-90) !important;
	font-weight: 400;
	letter-spacing: -0.005em;
}

#footer .concesionario .icon svg * {
	stroke: var(--audi-grey-80);
	transition: stroke .25s var(--audi-easing);
}

#footer .concesionario .icon:hover svg * {
	stroke: var(--audi-red);
}

#footer hr {
	border-top-color: rgba(255, 255, 255, .15);
	margin-block: 2rem;
}

/* 6.01:1 sobre negro: letra pequeña legible sin robarle peso al resto. */
#footer .copyright,
#footer ul.menu-legal > li a {
	color: var(--audi-grey-60) !important;
	font-size: .875rem;
}

#footer ul.menu-legal > li a:hover {
	color: #ffffff !important;
}

#footer .social-links li a img {
	filter: invert(1);
	opacity: .8;
	transition: opacity .25s var(--audi-easing);
}

#footer .social-links li a:hover img {
	opacity: 1;
}

#footer .form-content input[type="email"] {
	border-radius: var(--audi-radius);
	border: 1px solid rgba(255, 255, 255, .25);
	background-color: rgba(255, 255, 255, .06);
	color: #ffffff;
}

#footer .form-content input[type="email"]::placeholder {
	color: var(--audi-grey-60);
}

/* Sobre el footer negro el CTA se invierte: relleno blanco y texto negro.
   Es el patrón de Audi para acciones sobre fondo oscuro. */
#footer .form-content input[type="submit"] {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--color-primary);
}

#footer .form-content input[type="submit"]:hover {
	background-color: var(--audi-grey-90);
	border-color: var(--audi-grey-90);
	color: var(--color-primary);
}

.concesionario a.button strong {
	font-weight: 400 !important;
}

/* «Cómo llegar» (bloque Concesionarios: Nuestra historia y Contacto). La
   plantilla lo marca bg-primary text-white, pero la regla general de botones,
   más específica que las utilidades, lo dejaba rojo con el texto negro. */
.concesionario a.button.bg-primary {
	background-color: var(--color-primary);
	color: #ffffff;
}


/****************************************************/
/* FICHA DE VEHÍCULO                                */
/****************************************************/

#info-bar {
	border-radius: 0;
}

/* En la ficha, el precio es el dato que se busca: se le da el peso de la
   tipografía ancha y el rojo se reserva para la etiqueta de oferta. */
#info-bar .price,
.vehicle-price {
	font-family: var(--heading-font);
	letter-spacing: -0.02em;
}


/* >>> landings-modulares (generado, no editar a mano) */
/****************************************************/
/* LANDINGS MODULARES (plantilla «Libre (bloques)») */
/****************************************************/

/* Bloque agnóstico de marca: se pega tal cual al final del brand.css de cualquier
   sitio. Todo sale de --color-primary / --color-alt / --lightgray, que cada marca
   define en su :root y en la página de opciones, así que no hay colores fijos.

   Dos esquemas conviven y se eligen por landing en «Opciones de landing»
   (landing_bg_color / landing_text_color, que functions.php vuelca al <body>):

	 · CLARO  → sin color de fondo. Fondo blanco, texto var(--text-color).
	 · OSCURO → landing_bg_color: primary + landing_text_color: white.
				El <body> queda .bg-primary.text-white.

   Regla de contraste: --color-alt suele ser un tono claro de marca. Se usa como
   FONDO con texto en --color-primary, o como texto/icono sobre el primario
   oscuro. Nunca como color de texto sobre fondo claro. */

:root {
	/* Superficie translúcida y halo del esquema oscuro. */
	--landing-panel: color-mix(in srgb, var(--color-primary) 70%, transparent);
	--landing-glow: color-mix(in srgb, var(--color-alt) 22%, transparent);
}


/* ---------------- Común a los dos esquemas ---------------- */

/* Envío del formulario de Gravity Forms dentro de la landing. */
.post-template-template-libre .form-content input[type="submit"],
.page-template-template-libre .form-content input[type="submit"] {
	width: 100%;
	background-color: var(--color-alt);
	color: var(--color-primary);
	border: none;
	padding-block: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-weight: 700;
}

.post-template-template-libre .features-list.type4 .content .title {
	letter-spacing: 0.04em;
}

.post-template-template-libre .vehicle-card {
	border-radius: 0.9rem;
	overflow: hidden;
}


/* ---------------- Esquema CLARO ---------------- */

/* Panel de contacto. Ojo: contact-block.php coloca .wrap.grid-limit FUERA del
   wrapper del bloque, así que este panel nunca sangra a todo el ancho: se
   estiliza como tarjeta y el bg-* del bloque apenas se ve. */
.post-template-template-libre .contact-block__grid {
	border-radius: 0.9rem;
	padding-block: 2.5rem;
}


/* ---------------- Esquema OSCURO (body.bg-primary) ---------------- */

/* Los features-block se guardan con text_color: primary, que sobre el fondo
   primario sería invisible: aquí pasan a blanco. */
body.bg-primary.post-template-template-libre .text-primary,
body.bg-primary.post-template-template-libre .text-primary a {
	color: #ffffff !important;
}

/* El icono de la barra type4 es una máscara CSS que hereda currentColor; sobre
   el fondo oscuro pasa al color de acento, que ahí sí tiene contraste. */
body.bg-primary.post-template-template-libre .features-list.type4 .icon {
	background-color: var(--color-alt);
}

/* Superficies translúcidas con halo: propuestas con borde, tarjetas de vehículo
   (listado y manuales) y panel de contacto. */
body.bg-primary.post-template-template-libre .features-list.type4.features-list--bordered,
body.bg-primary.post-template-template-libre .item-vehicle .content,
body.bg-primary.post-template-template-libre .vehicle-card,
body.bg-primary.post-template-template-libre .contact-block__grid {
	background-color: var(--landing-panel) !important;
	border: none;
	border-radius: 0.9rem;
	box-shadow: 0 0 1.7rem 0.3rem var(--landing-glow);
}
body.bg-primary.post-template-template-libre .features-list.type4.features-list--bordered {
	padding-block: 2.4rem 1.6rem;
	margin-block: 0;
}
body.bg-primary.post-template-template-libre .features-list.type4.features-list--bordered > * {
	border: none;
}
@media (max-width: 991px) {
	body.bg-primary.post-template-template-libre .features-list.type4.features-list--bordered > * {
		padding-block: 0;
	}
}

/* Formulario en variante oscura sobre el fondo primario: se separa con el gris
   más oscuro de la paleta para que no se funda con el body. */
body.bg-primary.post-template-template-libre #main .form-content.form-dark {
	background: var(--darkgray);
	color: #ffffff;
}

body.bg-primary.post-template-template-libre .contact-block__eyebrow {
	color: var(--color-alt);
}

/* Tarjetas de vehículo del listado: precios y CTA legibles sobre el fondo oscuro. */
body.bg-primary.post-template-template-libre .price-pair__new {
	color: #ffffff !important;
}
body.bg-primary.post-template-template-libre .item-vehicle .button-contado {
	border-color: var(--color-alt) !important;
	color: #ffffff !important;
	padding-block: 0.8rem;
}
body.bg-primary.post-template-template-libre .item-vehicle .extras img {
	filter: invert(1);
}

/* Tarjetas de vehículo manuales. */
body.bg-primary.post-template-template-libre .vehicle-card__price-amount {
	color: var(--color-alt);
}
body.bg-primary.post-template-template-libre .vehicle-card__highlight {
	border-color: var(--color-alt);
	color: var(--color-alt);
}
/* <<< landings-modulares */


/****************************************************/
/* LANDINGS: AJUSTES DE AUDI                        */
/****************************************************/

/* Van fuera del bloque generado de arriba para que no se pierdan si se vuelve
   a generar. */

/* Esquema claro: el CTA de las opiniones de Trikomer, negro con texto blanco
   como el resto de CTA de Audi, no rojo con texto negro. Su estilo va en un
   <style> con !important dentro del contenido de cada landing, así que aquí
   hacen falta más especificidad y también !important. */
body:not(.bg-primary).post-template-template-libre #trikomeropinionesdestacadas .tk_gmb_botonmas a {
	background-color: var(--color-primary) !important;
	color: #ffffff !important;
}

body:not(.bg-primary).post-template-template-libre #trikomeropinionesdestacadas .tk_gmb_botonmas a:hover {
	background-color: var(--audi-grey-25) !important;
}

/* Esquema oscuro (Audi Days), tarjetas de vehículo manuales: el precio en
   blanco. El rojo se queda en lo demás (ahorro, checks y botón): todo en rojo
   era demasiado. */
body.bg-primary.post-template-template-libre .vehicle-card__price-amount {
	color: #ffffff;
}