/*
Theme Name: Base theme 
Theme URI: 
Author: 
Text Domain:  base
Version: 1.0
*/


::-moz-selection {
  background: #000000;
  color: #ffffff;
  text-shadow: none;
}

::selection {
  background: #000000;
  color: #ffffff;
  text-shadow: none;
}

:root {
	--color-primary: #000000;
	--color-secondary: #ffffff;
	--color-alt: #000000;
	--text-color: #000000;
	--gray: #565656;
	--darkgray: #242424;
	--lightgray: #E8E8E8;
	--px: 1rem;
	--py: 3rem;
	--main-font:  Arial, sans-serif;
	--heading-font: Arial, sans-serif;
	--main-bg: #ffffff;
	--header-height: 52px;
	--header-type-2-height: 52px;
	--header-type-3-height: 52px;
	--grid-limit: 1340px;
	--box-shadow: 0 0 10px 2px #ccc;
}


html {
	height:100%;
	font-size: 14px;
}

body {
	font-family: var(--main-font); 
	color:var(--text-color);
	background-color:var(--main-bg);
	font-weight: 300;
	line-height: 1.4;
}

button, .button, [type="submit"], a.button, .has-buttons a{
	border-radius: 2rem;
	color: #ffffff;
	font-weight: 600;
}

@media (max-width: 991px){
	.buttons.d-flex:not(.flex-wrap) .button{
		font-size: .9rem;
	}
}

@media (min-width: 992px){
	html{
		font-size: .95rem;
	}
	:root {
		--px: 3rem;
		--py: 4rem;
		--header-height: 75px;
		--header-type-3-height: 117px;
		--header-type-2-height: 149px;
	}
}


/****************************************************/
/* PRESENTATION */
/****************************************************/

.presentation{
}
.presentation .title{
	margin-bottom: 1rem;
}
.presentation .subtitle{margin-bottom: 1rem;}

@media (min-width: 992px){
	
}



/****************************************************/
/* CARDS */
/****************************************************/

.card{
	width: 100%;
}
.card.card-large{
	max-width: 400px;
}

@media (min-width: 992px){
	
}



/****************************************************/
/* BANNERS */
/****************************************************/


.banners{
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.banners > *:last-child{
	margin: 0;
}

.banners > *{
	padding: 1.4em;
	text-decoration: none;
	aspect-ratio: 1.1;
}

.banners .banner-title{
	font-size: 1.9rem;
}
.banners .text{
	font-size: 1.1rem;
}

/* TYPE 2*/


.banners.type2 {
}
	
.banners.type2 > *{
	padding: 2em;
	text-align: center;
}
	
.banners.type2 .banner-title{
	font-size: 2.1rem;
}
.banners.type2 .text{
	font-size: 1.4rem;
	text-align: center;
	margin: 0 0 1rem;
}
.banners.type2 .button,
.banners.type3 .button{
	background-color: #ffffff !important;
	color: var(--color-primary);
}


.banners.type3 > * img{
	border-radius: 2rem;
}

@media (min-width: 992px){
	
	/* TYPE 1*/
		
	.banners.type1 {
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  grid-gap: .7em;
	  overflow: hidden;
	}
	
		
	.banners.type1 > *{
		padding: 2em;
	}
		
	.banners.type1 .banner-title{
		font-size: 2.1rem;
	}
	.banners.type1 .text{
		font-size: 1.2rem;
	}
	
	.banners.type1 .button{
	}
	
	.banners.type1 > *:nth-child(3n+2) {
	  grid-row-end: span 2;
	  aspect-ratio: inherit;
	}
	
	.banners.type1 > *:nth-child(3n+1),
	.banners.type1 > *:nth-child(3n+3){
		aspect-ratio: 16/9;
	}
	
	
	/* TYPE 2*/
	
	
	.banners.type2 {
	  display: grid;
	  grid-template-columns: repeat(3, minmax(0, 1fr));
	  grid-gap: .7em;
	  overflow: hidden;
	}
		
	.banners.type2 > *{
	}
		
	.banners.type2 .banner-title{
	}
	.banners.type2 .text{
	}
	.banners.type2 .button{
	}
	
	
	/* TYPE 3*/
	
	.banners.type3{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
	}
	.banners.type3 > *{
		   aspect-ratio: 6.5/4;
	}
	.banners.type3 > *:nth-child(3n+1){
		   grid-column: span 2;
		   aspect-ratio: 13/4;
	}

	/* TYPE 4*/
	
	.banners.type4{
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-gap: 1rem;
	}

	/* CUSTOM */

	.banners.custom{
		display: flex;
		flex-wrap: wrap;
		gap: 2em;
		flex-direction: row;
	}
	.banners.custom > *{
		aspect-ratio: 16/9;
		padding: 2em;
	}
	.banners.custom .banner-w-100{ width: 100%; aspect-ratio: 3/1; }
	.banners.custom .banner-w-66{ width: calc(66.6666% - .35em); }
	.banners.custom .banner-w-50{width: calc(50% - 1em);}
	.banners.custom .banner-w-33{width: calc(33.3333% - 1.34em);}

}
.image-banners .thumb{
	min-height: 220px;
	width: 100%;
}
.image-banners .content{
	padding: 2rem;
	font-size: 1.3rem;
}

.image-banners .content a,
.image-banners .content a.button{
	background-color: #ffffff;
	color: var(--color-primary) !important;
}
.image-banners .content [class*="h"]:not(h1):not(.h1){
	font-weight: 300;
	margin-bottom: 1.4rem;
}

.image-banners:has(.content) .thumb{
	min-height: 420px;
}
body.home #head.type-3 + #main .image-banners:has(.content) .thumb {
	min-height: 550px;
}

.image-banners.type2,
.image-banners.type2 .banner{
	background: transparent !important;
}
.image-banners.type2 .thumb{
}
.image-banners.type2 .content{position: relative;}

@media (min-width: 992px){
	
	.image-banners .thumb{
	}
	.image-banners .content{
		max-width: 45%;
	}
	
	.image-banners:has(.content) .thumb{
	}	

	.image-banners.type2{}
	.image-banners.type2 .banner{
		display: flex;
		align-items: center;
	}
	.image-banners.type1 .thumb{
		width: 100%;
	}
	.image-banners.type2 .thumb{
		max-width: 50%;
	}
	.image-banners.type2 .content{
		max-width: 45%;
	}
}



/****************************************************/
/* UTILITIES */
/****************************************************/

.line-title{
	position: relative;
	overflow: hidden;
	display: flex;
	justify-content: center;
	margin-block: 1rem;
}
.line-title:before{
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	left: 0;
	top: 50%;
	background-color: var(--color-primary);
}
.line-title > *{
	background-color: var(--white);
	padding: .3rem 1.5rem;
	position: relative;
}

.button.icon-button{
	border-radius: 0;
	width: 100%;
	justify-content: center;
	line-height: 1.3;
	gap: 1rem;
	padding: 0.7rem;
	background-color: transparent !important;
}
.button.icon-button:hover{
	color: var(--color-alt) !important;
}
.icon-button span{}
.icon-button svg,
.icon-button img{
	min-width: 2rem;
	transition: all .3s;
}
.icon-button:hover svg,
.icon-button:hover img{
	filter: invert(1);;
}



.checks-list{
	list-style: none;
}
.checks-list > li{
	font-size: 0.9rem;
}
.checks-list > li svg,
.checks-list > li .icon{
	min-width: 1rem;
	margin-top: 0.3rem;
}
.checks-list > li span{
	display: flex;
	gap: .5rem;
	align-items: flex-start;
}


.checks-list.type-2 > li{
	padding-block: 0.6rem;
	align-items: center;
	gap: 1rem;
}
.checks-list.type-2 > li:not(:last-child){
	border-bottom: 1px solid;
}

.checks-list.type-2 > li strong{
	white-space: nowrap;
}


.has-decorated-titles h1,
.has-decorated-titles .h1,
.has-decorated-titles h2,
.has-decorated-titles .h2{
	position: relative;
}

.has-decorated-titles h1:after,
.has-decorated-titles .h1:after{
	content: '';
	display: block;
	width: 4rem;
	margin-block: 1.4rem 2rem;
	background-color: #ffffff;
	height: 3px;
}

ol.step-list {
  list-style-type: none;
  width: 100%;
  max-width: 37rem;
  margin: 3rem auto;
}

ol.step-list li {
  counter-increment: step-counter;
  position: relative;
  margin: 0;
  padding-left: 2.6rem;
  font-size: 1.2rem;
  padding-bottom: 2.4rem;
  overflow: hidden;
}

ol.step-list li::before {
  content: counter(step-counter);
  display: block;
  position: absolute;
  top: 0;
  /* Adjust < -number | number+ > */
  left: 0;
  width: 1.85rem;
  aspect-ratio: 1;
  background-color: var(--color-primary);
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
  text-align: center;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}


ol.step-list li:not(:last-child)::after {
	content: '';
	position: absolute;
	width: 1px;
	height: 150px;
	top: 1.7rem;
	background-color: var(--color-primary);
	left: 0.9rem;
}

/****************************************************/
/* BANNERS */
/****************************************************/


.features-list{
	display: flex;
	flex-direction: column;
	gap: 2.6rem;
	list-style: none;
	margin-block: 2rem;
	max-width: 370px;
	margin-inline: auto;
}
.features-list > *{
	gap: 1rem;
}


.features-list .icon{
	display: inline-block;
	aspect-ratio: 1;
	width: 4rem;
	min-width: 4rem;
	/* Icono como máscara: el color lo da background-color: currentColor, así se
	   recolorea por CSS con `color` (igual que .value-prop__icon). */
	background-color: currentColor;
	-webkit-mask: var(--icon-url) center / contain no-repeat;
	mask: var(--icon-url) center / contain no-repeat;
}
.features-list .content{}
.features-list .content .title{
	font-size: 1.3rem;
	margin-bottom: 0.6rem;
}
.features-list .content .text{
	font-size: 0.8rem;
}
.features-list .content .feature-more{
	display: inline-block;
	margin-bottom: 1.25rem;
	padding-inline: 1.75rem;
	cursor: pointer;
}


.features-list.type2 > *{
	position: relative;
	margin-bottom: 2rem;
	padding-bottom: 2rem;
}
.features-list.type2 .icon{padding: 0.7rem;}
.features-list.type2 .content{}
.features-list.type2 .content .title{
	font-size: 1.5rem;
	margin-bottom: 0.6rem;
}
.features-list.type2 .content .text{
	font-size: 0.8rem;
}
.features-list.type2 > *:not(:last-child):after{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	width: 1px;
	background-color: var(--color-primary);
	height: 3rem;
}

/* type4: barra de garantías (franja horizontal compacta con separadores).
   Colores desde las variables / currentColor (multimarca); nunca hex. */
.features-list.type4{
	max-width: none;
	gap: 1.75rem;
}
.features-list.type4 .icon{
	width: 3rem;
	min-width: 0;
	aspect-ratio: 1;
	margin-bottom: 0.6rem;
}
.features-list.type4 .content .title{
	font-size: 1rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin-bottom: 0.35rem;
}
.features-list.type4 .content .text{
	font-size: 0.85rem;
}

@media (min-width: 992px){
	.features-list.type4{
		gap: 0;
		align-items: stretch;
	}
	.features-list.type4 > *{
		width: auto;
		flex: 1 1 0;
		padding: 0 1.75rem;
		position: relative;
	}
	.features-list.type4 .icon{
		width: 3.25rem;
		aspect-ratio: 1;
		margin-bottom: 0.9rem;
	}
	.features-list.type4 .content .title{
		font-size: 1.05rem;
	}
	.features-list.type4 > *:not(:last-child):after{
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 64%;
		background-color: currentColor;
		opacity: 0.25;
	}
}

@media (min-width: 992px){
		
	
	.features-list{
		display: flex;
		gap: 2rem;
		flex-direction: row;
		max-width: none;
	}
	.features-list > *{width: calc(25% - 1.5rem);}
	
	
	.features-list .icon{
		width: 7.3rem;
		aspect-ratio: 1.8;
		margin-bottom: 1.1rem;
	}
	.features-list .content{
		text-align: center;
	}
	.features-list .content .title{
	font-size: 1.3rem;
}
	.features-list .content .text{
		font-size: 1.1rem;
	}
		
	.features-list.type2{
		width: 100%;
		padding-inline: 0;
		align-items: flex-start;
		margin-block: 0.3rem 0.6rem;
		gap: 3rem;
	}
	.features-list.type2 > *{
	padding: 0 1rem;
	width: calc(33.3333% - 2rem);
	margin: 0;
	}
	.features-list.type2 .icon{padding: 0.4rem;margin-bottom: 0;}
	.features-list.type2 .content{}
	.features-list.type2 .content .title{
		font-size: 1.4rem;
		margin-bottom: 0.6rem;
	}
	.features-list.type2 .content .text{
		font-size: 0.95rem;
		text-wrap: balance;
	}
	.features-list.type2 > *:not(:last-child):after{
		top: 60%;
		left: 100%;
		width: 3rem;
		height: 1px;
	}
}



/* type5: tarjetas con icono en recuadro y contenido alineado a la izquierda.
   Colores desde variables (multimarca); color-mix con fallback a color plano.
   El .icon pasa a ser el recuadro y el glifo lo pinta ::before con la máscara,
   reutilizando la --icon-url que el markup ya imprime en el elemento. */
/* Móvil: carrusel horizontal con scroll-snap (1 tarjeta + peek de la siguiente);
   en ≥768px vuelve a rejilla. */
.features-list.type5{
	display: flex;
	flex-direction: row;
	/* Anula la utilidad .justify-content-center del <ul> (lleva !important): en el
	   carrusel las tarjetas deben empezar a la izquierda, no centradas. */
	justify-content: flex-start !important;
	gap: 1rem;
	max-width: none;
	margin-inline: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.features-list.type5::-webkit-scrollbar{
	display: none;
}
.features-list.type5 > *{
	flex: 0 0 85%;
	box-sizing: border-box;
	scroll-snap-align: start;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 1.1rem;
	width: auto;
	margin: 0;
	padding: 1.75rem;
	border-radius: 1rem;
	background-color: var(--lightgray);
	background-color: color-mix(in srgb, var(--lightgray) 45%, #fff);
	border: 1px solid var(--lightgray);
	border: 1px solid color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.features-list.type5 .icon{
	width: 3.5rem;
	min-width: 0;
	aspect-ratio: 1;
	margin-bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.85rem;
	-webkit-mask: none;
	mask: none;
	color: var(--color-primary);
	background-color: var(--lightgray);
	background-color: color-mix(in srgb, var(--color-alt) 16%, #fff);
}
.features-list.type5 .icon::before{
	content: "";
	width: 52%;
	height: 52%;
	background-color: currentColor;
	-webkit-mask: var(--icon-url) center / contain no-repeat;
	mask: var(--icon-url) center / contain no-repeat;
}
.features-list.type5 .content{
	text-align: left;
}
.features-list.type5 .content .title{
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}
.features-list.type5 .content .text{
	font-size: 0.95rem;
	opacity: 0.7;
}

@media (min-width: 768px){
	.features-list.type5{
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		overflow: visible;
	}
	.features-list.type5 > *{
		flex: initial;
	}
}
@media (min-width: 992px){
	.features-list.type5{
		grid-template-columns: repeat(4, 1fr);
		gap: 1.5rem;
	}
	.features-list.type5 > *{
		width: auto;
	}
	.features-list.type5 .icon{
		width: 3.5rem;
		aspect-ratio: 1;
		margin-bottom: 0;
	}
	.features-list.type5 .content{
		text-align: left;
	}
}

/* Propuestas de valor (.features-list): en móvil, 2 por fila con icono arriba y texto
   centrado (cada <li> pasa a columna). Excluye type5, que ya es un carrusel con scroll
   y su propio layout. En type2 se anula la línea conectora (no aplica en rejilla). */
@media (max-width: 991.98px) {
	.features-list:not(.type5) {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1.5rem;
		max-width: none;
	}
	.features-list:not(.type5) > * {
		width: calc(50% - 0.75rem);
		box-sizing: border-box;
		flex-direction: column;
	}
	.features-list:not(.type5) .content {
		text-align: center;
	}
	/* Nº impar de propuestas: se oculta la última para que no quede una suelta en su
	   fila (solo filas completas de 2). :last-child en posición impar => total impar;
	   :not(:first-child) evita ocultarla cuando solo hay una propuesta. El !important
	   gana a la utilidad .d-flex del <li> (display: flex !important). */
	.features-list:not(.type5) > *:last-child:nth-child(odd):not(:first-child) {
		display: none !important;
	}
	.features-list.type2 > * {
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.features-list.type2 > *:not(:last-child)::after {
		display: none;
	}
}

/* Opción "Ajustar en una fila (escritorio)" (modificador --fit-row): fuerza que todas
   las propuestas quepan en una sola fila repartiéndose el ancho, con icono arriba y
   texto centrado debajo. El !important gana a la utilidad .flex-lg-wrap del <ul>. */
@media (min-width: 992px) {
	.features-list--fit-row {
		flex-wrap: nowrap !important;
	}
	.features-list--fit-row > * {
		flex: 1 1 0;
		width: auto;
		flex-direction: column;
	}
	.features-list--fit-row .content {
		text-align: center;
	}
}


/****************************************************/
/* COUNTDOWN (acf/countdown-block + layout flexible) */
/****************************************************/

.countdown-wrapper {
	padding: 2rem 0;
}

.countdown-title {
	margin-bottom: 2rem;
	font-size: clamp(1.5rem, 4vw, 2.5rem);
}

.countdown-container {
	max-width: 100%;
}

.countdown-items {
	gap: 1rem;
}

.countdown-item {
	background: var(--color-primary);
	color: #fff;
	padding: 1.5rem;
	border-radius: 0.5rem;
	min-width: 6rem;
	text-align: center;
	box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

.countdown-value {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: bold;
	line-height: 1;
	margin-bottom: 0.5rem;
}

.countdown-label {
	font-size: clamp(0.875rem, 2vw, 1rem);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	opacity: 0.9;
}

.countdown-end-message {
	margin-top: 2rem;
	padding: 2rem;
	background: var(--bs-light, #f8f9fa);
	border-radius: 0.5rem;
}

@media (max-width: 576px) {
	.countdown-item {
		min-width: 4.5rem;
		padding: 1rem;
	}

	.countdown-items {
		gap: 0.5rem;
	}
}



/****************************************************/
/* BRAND BANNER (layout flexible brand_banner_block) */
/****************************************************/

.brand-banner{
	position: relative;
}
.brand-banner__panel{
	position: relative;
	overflow: hidden;
	padding: 3rem var(--px);
}
.brand-banner__logo{
	position: absolute;
	top: 50%;
	right: -15%;
	width: 60%;
	height: auto;
	transform: translateY(-50%);
	opacity: .15;
	pointer-events: none;
}
.brand-banner__content{
	position: relative;
}
.brand-banner__cta-wrap{
	margin-top: 2rem;
	margin-bottom: 0;
}
.brand-banner .brand-banner__cta{
	background-color: #ffffff;
	color: var(--color-primary);
}
.brand-banner__img{
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 992px){
	.brand-banner{
		display: flex;
		align-items: center;
	}
	.brand-banner__panel{
		width: 57%;
		flex-shrink: 0;
		padding: 7rem 8%;
	}
	.brand-banner__logo{
		right: -6%;
		width: 38%;
	}
	.brand-banner__media{
		width: 44%;
		margin-left: -1%;
		transform: translateY(2.5rem);
	}
}


/****************************************************/
/* BREADCRUMB */
/****************************************************/

.breadcrumb{}
.breadcrumb > *{}
.breadcrumb > *:not(:last-child):after{
	content: '>';
	margin-inline: .5rem;
}


/****************************************************/
/* SINGLE VEHICULO */
/****************************************************/

.single-vehicle{}
.single-vehicle .content{
	margin-block: 1.3rem;
	box-shadow: var(--box-shadow);
	padding-block: 1rem;
}

.single-vehicle .content > *:not(.tabs){
	padding-inline: 1.5rem;
}
.single-vehicle .content .content-info.border-bottom{
	border-bottom: 2px solid var(--color-secondary);	
}


ul.tabs.styled-tabs{
	padding: 1rem 0;
}
ul.tabs.styled-tabs > li{
	padding: 0.8rem 1.3rem;
	list-style: none;
	text-align: center;
	cursor: pointer;
	transition: all .3s;
	/* white-space: nowrap; */
	background-color: #F3F3F3;
	font-size: 0.8rem;
	flex: 1;
	border-top: 3px solid transparent;
	user-select: none;
	line-height: 1.2;
	align-items: center;
	display: flex;
	flex-direction: column;
}
ul.tabs.styled-tabs > li.active{
	background-color: var(--white);
	border-top-color: var(--color-secondary, #000000);
}
ul.tabs.styled-tabs > li.active:first-child:last-child{
	background-color: #F3F3F3;
	border-top-color: var(--color-secondary, #000000);
}
ul.tabs.styled-tabs > li.active:first-child:last-child .h4{
	font-size: 2rem;
}
ul.tabs.styled-tabs > li:not(.active):hover{
	opacity: .7;
}

#main .tabs-content .form-content .gfield input{
	padding: 0;
}

@media (min-width: 992px){
	ul.tabs{}
}



.splide__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Single vehículo: sin imagen del vehículo → logo del concesionario centrado */
.gallery-wrap--no-image{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	background: var(--lightgray);
	border-radius: 0.5rem;
}
.vehicle-no-image{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 2rem;
}
.vehicle-no-image[hidden]{
	display: none;
}
.vehicle-no-image svg,
.vehicle-no-image img{
	width: 150px;
	max-width: 60%;
	height: auto;
}


.main-features{
	margin-block: 1rem;
}
.main-features > li{
	display: flex;
	gap: 1rem;
	margin-bottom: 1.3rem;
	align-items: flex-start;
	line-height: 1.3;
}

.main-features > li .icon{
	width: 2.3rem;
	height: 2.2rem;
	aspect-ratio: 1;
	object-fit: contain;
	min-width: 2.3rem;
}

.vehicle-measures{
	position: relative;
	padding-bottom: 0.9rem;
	margin-block: 1.7rem 3rem;
}
.vehicle-measures div{
	position: absolute;
	bottom: 0;
	padding-inline: .2rem;
	text-align: center;
	font-size: .8rem;
}
.vehicle-measures .ancho{
	width: 27.7%;
}
.vehicle-measures .largo{
	width: 59.5%;
	left: 32.2%;
}
.vehicle-features{
	padding-left: 2.4rem;
}
.vehicle-features > li{
	margin-bottom: .4rem;
}


#info-bar{
	padding: 1.2rem 1rem;
}
#info-bar .title {
	font-size: 1.5rem;
	margin: 0 0 1rem;
	line-height: 1;
}
#info-bar .h5 {
	font-size: 1rem;
	margin: 0 0 1rem;
	line-height: 1;
}


/****************************************************/
/* TEXT IMAGE BLOCK */
/****************************************************/


.text-image-content{}
.text-image-content h2,
.text-image-content .h2,
.text-image-content .h1{
	font-size: 3rem;
}
.text-image-content p{
	
}

/****************************************************/
/* VEHICLES CAROUSEL */
/****************************************************/

.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
	background-image: url(img/svg/angle_left_carousel.svg);
}

.vehicles-carousel{}


.vehicles-carousel a img{
	position: relative;
	display: block;
	height: auto;
}
.vehicles-carousel a .color{
	position: absolute;
	left: 50%;
	top: 0;
	width: 90%;
	height: 50%;
	transform: translateX(-50%);
}
.vehicles-carousel a .color{}
.splide__arrow{
	background-color: transparent !important;
	opacity: 1 !important; 
	
}


.splide .splide__arrow svg{
	fill: #fff;
	background-color: var(--color-primary);
	height: 1.7em;
	width: 1.7em;
	padding: 0.6rem;
	border-radius: 50%;
}
.splide .splide__arrow.splide__arrow--prev{
	left: 0rem;
}
.splide .splide__arrow.splide__arrow--next{
	right: 0;
}
.splide .splide__pagination{
	bottom: -10px;
	padding-block: 1rem;
}
.splide .splide__pagination li{}

.splide .splide__pagination__page{
	width: .8rem;
	height: .8rem;
	margin: 0rem 0.5rem;
	background-color: var(--color-primary);
	opacity: 1;
}
.splide .splide__pagination__page.is-active{
	background: var(--color-alt);
}
#vehicles-carousel-list > li{padding-block: 2rem;}
#vehicles-carousel-list > li a{
	text-decoration: none;
}

@media (min-width: 992px){
	
		
	.vehicles-carousel a:has(.color) > *{
	}
	.vehicles-carousel a .color{
		transition: all .3s;
	}
	.vehicles-carousel a:hover .color{
		height: 40%;
	}
	.vehicles-carousel a img{
		position: relative;
		display: block;
		transition: all .4s;
	}
	.vehicles-carousel a:hover img{
		transform: scale(1.08);
	}
		
}
@media (min-width: 1400px){
	
	
	.splide .splide__arrow.splide__arrow--prev{
		left: 2rem;
	}
	.splide .splide__arrow.splide__arrow--next{
		right: 2rem;
	}
}


/****************************************************/
/* CAROUSEL2 */
/****************************************************/



.vehicles-carousel2 {
  position: relative;
  overflow: hidden;
}


.vehicles-carousel2 {
  position: relative;
  cursor: none;
  margin-bottom: 40px !impoerant;
}
.vehicles-carousel2 .splide__slide.is-active {
  cursor: auto;
}


.vehicles-carousel2 .splide__slide:not(.is-active) {
  pointer-events: none;
}
.vehicles-carousel2:has(.splide__slide.is-active:hover) .custom-cursor,
.vehicles-carousel2:has(.splide__pagination:hover) .custom-cursor
{
	display: none !important;
	cursor: pointer;
}

.vehicles-carousel2 .custom-cursor {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  pointer-events: none;
  transform: translate(-50%, -50%);
  font-size: 1rem;
  z-index: 999;
  opacity: 0;
  transition: opacity 0.2s ease;
}


.vehicles-carousel2 .splide__track,
.vehicles-carousel2 .splide__list {
  overflow: visible;
}

.vehicles-carousel2 .splide__list {
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.vehicles-carousel2 .slide-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.vehicles-carousel2 .splide__slide:not(.is-active) .slide-inner {
  transform: scale(0.6);
  opacity: 0.5;
}

.vehicles-carousel2 .splide__slide.is-active .slide-inner {
  transform: scale(1);
  opacity: 1;
  z-index: 3;
}

@media (min-width: 992px){
	.vehicles-carousel2{
		margin-top: 0 !important;
	}
}

@media (min-width: 1601px) {
  .vehicles-carousel2 .splide__slide.is-prev + .splide__slide.is-prev .slide-inner,
  .vehicles-carousel2 .splide__slide.is-next + .splide__slide.is-next .slide-inner {
	transform: scale(0.3);
	opacity: 0.5;
	z-index: 1;
  }
}

.vehicles-carousel2 .slide-inner {
	position: relative;
	overflow: hidden
}

.vehicles-carousel2 .icon {
	position: absolute;
	top:5%;
	left: 0;
	z-index: 0;
	width: 80%;
	height: auto;
	z-index: -1;
	transition: all 1s;
	transform: translate3d(0,50%,0);
	opacity: 0;
}
.vehicles-carousel2 .splide__slide.is-active .slide-inner .icon{
	transform: translate3d(0,0,0);
	opacity: 1;
}




/****************************************************/
/* VEHICLES GRID */
/****************************************************/

.vehicles-grid{
	gap: 1rem;
}
.vehicles-grid li{
	list-style: none;
}
.vehicles-grid li a{
	display: block;
	padding-block: 0.3rem;
	text-decoration: none;
}
.vehicle-tag{
	text-transform: uppercase;
	text-align: center;
	font-size: .65rem;
	font-weight: bold;
	color: var(--color-primary);
	padding: 0.2rem .2rem 0;
	opacity: 0.7;
}
.vehicle-title{
	text-transform: uppercase;
	text-align: center;
	font-size: .8rem;
	font-weight: bold;
	color: var(--color-primary);
	padding: 0.4rem .2rem;
}
.vehicles-carousel2 .slide-inner{
	text-align: center;
}
.vehicles-carousel2 .slide-inner .vehicle-title{
	margin-bottom: 1rem;
	opacity: 1;
	visibility: visible;
	position: relative;
	top: -2rem;
	font-size: 2rem;
	text-decoration: none;
}
.vehicles-carousel2 .slide-inner .button{
	position: relative;
	top: -1.5rem;
	margin-bottom: 2rem;
}
.vehicles-carousel2 .slide-inner .vehicle-text{
	margin-bottom: 1rem;
}

.vehicles-carousel2 .splide .splide__pagination{}

.vehicles-carousel2 .slide-inner a{
	text-decoration: none;
}

@media (min-width: 992px){
		
	.vehicles-grid{
		gap: 2rem;
	}
	.vehicles-grid.vehicles-flex{}
	.vehicles-grid.vehicles-flex > *{
		width: 100%;
		max-width: 510px;
		text-align: center;
	}
	
	.vehicles-grid.vehicles-flex > * img{
		display: block;
		width: 100%;
	}
	.vehicles-grid li{
	position: relative;
	}
	.vehicles-grid li a{
		padding-block: 1.4rem;
	}
		
	.vehicles-grid li a img{
		transition: all .6s;
	}
	.vehicles-grid li:hover a img{
		transform: translate3d(-5px,0,0);
	}
	 .vehicles-grid li:not(:has(.button)) .vehicle-title{
		position: absolute;
		transition: all .6s 0s;
		transform: translate3d(10px,0,0);
		font-size: 1rem;
		visibility: hidden;
		width: 100%;
		text-align: center;
		left: 0;
		opacity: 0;
	}
	.vehicles-grid li:not(:has(.button)) li:hover a .vehicle-title{
		opacity: 1;
		visibility: visible;
		transform: translate3d(0px,0,0);
	}
	.vehicle-title{
		position: absolute;
		transition: all .6s 0s;
		transform: translate3d(10px,0,0);
		font-size: 1rem;
		visibility: hidden;
		width: 100%;
		text-align: center;
		left: 0;
		opacity: 0;
	}
	li:hover a .vehicle-title{
		opacity: 1;
		visibility: visible;
		transform: translate3d(0px,0,0);
	}

	.vehicles-carousel2 .slide-inner .vehicle-title {
		margin-bottom: 1rem;
		opacity: 1;
		visibility: visible;
		position: relative;
		top: -2rem;
		font-size: 3rem;
		text-decoration: none;
		margin: 0;
	}
	
	.vehicles-carousel2 .splide .splide__pagination{}
}

/****************************************************/
/* FILTERS */
/****************************************************/


#home-filters{
	padding-inline: 1rem;
	max-width: var(--grid-limit);
	margin: auto;
}

.trigger-advanced-fields{
	margin-bottom: 2rem;
	cursor: pointer;
}
.trigger-advanced-fields svg{}


.filters-content{
	width: 100%;
	gap: 2rem;
	padding-block: 2rem;
	align-items: center;
}

.filters-content > *:not(:last-child){
	width: 100%;
}

.filters-content > *.w-auto{
	width: auto !important;
}

#home-filters .search-filter-label{
	font-size: 0.9rem;
	margin: 0;
	width: 100%;
	text-align: center;
	display: block;
}
.search-filter-component-range-slider__range-text{
	order: 2;
	justify-content: space-between;
	font-size: 0.9rem;
}

.search-filter-component-range-slider .search-filter-component-range-slider__range-input.search-filter-component-range-slider__range-input--min,
.search-filter-component-range-slider .search-filter-component-range-slider__range-input.search-filter-component-range-slider__range-input--max {
	z-index: 1 !important;
}


#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{
	border: none;
	border-radius: 4px;
}

#home-filters  .search-filter-component-combobox__actions-input::placeholder{
	font-size: .9rem !important;
}


body .search-filter-component-combobox__selection span{
	font-size: .9rem;
}
body .search-filter-component-combobox .search-filter-component-combobox__actions .search-filter-component-combobox__actions-input{
	min-width: 220px;
	text-transform: uppercase;
}
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{
	font-size: 0.9rem;
}


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, #custom-submit{
	font-size: 0;
	aspect-ratio: 1;
	border-radius: 50%;
	background:  url(img/svg/icon_lens.svg) no-repeat center center;
	border: none;
	width: 3rem;
	background-size: 50%;
}

body .search-filter-style--control-submit .search-filter-input-button.search-filter-field__input:hover{
	opacity: .8;
}

body .search-filter-style--control-reset .search-filter-input-button.search-filter-field__input{
	-webkit-appearance: none;
	text-decoration: underline;
	padding: 0 1rem;
	border: none;
	font-size: .9rem;
}

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

#trigger-filters {
	width: 3rem;
	position: fixed;
	bottom: 0px;
	right: 0px;
	aspect-ratio: 1 / 1;
	background-color: rgb(255, 255, 255);
	box-shadow: 0px 0px 1px 1px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	padding: 0.7rem;
	margin: 1rem;
	z-index: 2;
	box-shadow: 1px 1px 4px 1px #ddd;
}


.search-filter-component-range-slider__range-text.search-filter-component-range-slider__range-text{
	font-size: .9rem;
	justify-content: space-between;
}
body .filter-wrapper{
	padding: 1rem 0;
	gap: 2rem;
	display: flex;
	flex-direction: column;
}

@media (min-width: 992px){
	body .filter-wrapper{
		padding: 1rem;
		flex-direction: row;
	}

}
body .filter-wrapper .search-filter-label{
	margin-bottom: 1.2rem;
}
body .filter-wrapper > *:not(.carroceria-filter){
	display: flex;
	width: 100%;
	max-width: 30rem;
	flex: 1;
}

body .search-filter-component-combobox-base{
	border: none;
	border-bottom: 1px solid;
	border-radius: 0;
	background: transparent;
}
body .search-filter-component-combobox-base__listbox{
	font-size: 1.1rem;
}

body .search-filter-component-combobox-base input::placeholder{
	font-size: 1.1rem !important;
}

body .search-filter-style--id-2.search-filter-style--control-sort {
	min-width: 200px;
}



body .search-filter-component-range-slider__range-input-progress{
	--range-color: var(--color-primary);}
body .search-filter-component-range-slider__range-input-wrapper::before{
	background: var(--color-primary);
}

body .search-filter-label{
	font-weight: bold;
	font-size: 1rem;
	text-transform: uppercase;
	color: var(--color-primary);
	margin: 0;
}

body .search-filter-input-group{
	display: flex;
	gap: 0rem 1rem;
	flex-wrap: wrap;
	justify-content: flex-start;
}
body .search-filter-input-group > *{}

body .search-filter-input-checkbox label span{
	font-size: 0.9rem;
}

.home-filters-form{
	width: 100%;
}

.home-filters__field{
	width: 100%;
}

.home-filters__select{
	width: 100%;
	border: none;
	border-radius: 0.2rem;
	background-color: var(--color-primary);
	padding: 0.7rem 2.2rem 0.7rem 1.2rem;
	font-size: 1rem;
	font-family: inherit;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url(
	"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 7'%3E%3Cpath fill='%23fff' d='M5.27 5.99l4.62-4.63a.5.5 0 10-.56-.55L5 5.16.66.81a.5.5 0 10-.55.56l4.62 4.62a.5.5 0 00.55 0z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 0.7rem auto;
	cursor: pointer;
	border-left: 1px solid rgba(0, 0, 0, 0.15);
}

.home-filters__select:focus{
	outline: none;
}

.home-filters__range{
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.home-filters__range-label{
	font-size: 0.9rem;
	text-align: center;
	color: inherit;
}

.home-filters__range-track{
	position: relative;
	height: 0.2rem;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 0.2rem;
	margin: 0.9rem 0.7rem 0.4rem;
}

.home-filters__range-progress{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #1d1d1d;
	border-radius: 0.2rem;
	pointer-events: none;
}

.home-filters__range-input{
	position: absolute;
	top: 50%;
	left: -0.7rem;
	right: -0.7rem;
	width: calc(100% + 1.4rem);
	height: 1.2rem;
	margin: 0;
	padding: 0;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	transform: translateY(-50%);
}

.home-filters__range-input::-webkit-slider-thumb{
	-webkit-appearance: none;
	appearance: none;
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #1d1d1d;
	cursor: pointer;
	pointer-events: auto;
	margin-top: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-filters__range-input::-moz-range-thumb{
	width: 1.2rem;
	height: 1.2rem;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid #1d1d1d;
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.home-filters__range-input::-webkit-slider-runnable-track{
	background: transparent;
	border: none;
}

.home-filters__range-input::-moz-range-track{
	background: transparent;
	border: none;
}

.home-filters__range-values{
	display: flex;
	justify-content: space-between;
	font-size: 0.85rem;
	padding: 0 0.2rem;
}

.home-filters__submit-wrap{
	display: flex;
	justify-content: center;
}

.home-filters__carrocerias{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	gap: 0.5rem;
}

.home-filters__carrocerias .search-filter-input-checkbox__input{
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.home-filters__carrocerias .search-filter-input-checkbox__container{
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}

@media (min-width: 992px){
	.filters-content > .home-filters__field{
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}

@media(max-width: 991px){

	#home-filters{
		position: fixed;
		left: 0;
		top: 0;
		background-color: #ffffff;
		z-index: 4;
		height: 100%;
		overflow-y: scroll;
		transition: all .4s;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}


#filter-section{
	background-color: var(--lightgray);
	padding: 4rem 1.3rem;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 11;
	height: 100%;
	width: 100%;
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition: all .5s;
	overflow-y: scroll;
}
#filter-section.active{
	pointer-events: all;
	visibility: visible;
	opacity: 1;
	transition: all .5s;
}
#close-filters{
	position: absolute;
	right: 0;
	top: 0;
	width: 3.6rem;
	z-index: 1;
	aspect-ratio: 1;
	padding: 0.6rem;
}

#close-filters svg{
	color: var(--color-primary);
	display: block;
}

#filter-section .close-filter svg{
	display: block;
	width: 100%;
}


#filter-tabs{
	padding: 0;
	margin: 0;
}
#filter-tabs > li{
	padding: 0.8rem 1.6rem;
	list-style: none;
	text-align: center;
	cursor: pointer;
	transition: all .3s;
	white-space: nowrap;
	font-size: 1.3rem;
	display: inline-flex;
	flex: 1;
	user-select: none;
	line-height: 1.2;
	align-items: center;
	justify-content: center;
}

#filter-tabs > li > span{
	padding-right: 1rem;
	position: relative;
}
#filter-tabs > li.active{
	background-color: #dddddd;
}
#filter-tabs > li:not(.active):hover{
	/* opacity: .7; */
}

#filter-tabs-content{
}

#filter-tabs > li > *.search-filter-field.reset-button{}

#filter-tabs > li > *.search-filter-field.reset-button *{
}

#filter-tabs > li.option-tab{
	gap: 1rem;
}

#filter-tabs > li .trash-wrapper{
	width: 2rem;
	aspect-ratio: 1;
	overflow: hidden;
}
#filter-tabs > li .trash-wrapper > *:not(svg) {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	max-width: 100%;
	opacity: 0;
}
#filter-tabs > li .trash-wrapper svg{
	width: 100%;
}

#filter-tabs > li .trash-wrapper svg *{
	fill: var(--color-primary);
}

@media (max-width: 991px){
	
		
	#filter-tabs > li .trash-wrapper svg *{
		fill: #fff
	}
	
	#filter-tabs-content > *{
		display: block;
		border-bottom: 2px solid;
		padding: 0.6rem 0rem;
	}
	
	#filter-tabs > li{
		display: none;
	}
	#filter-tabs > li.option-tab{
		position: fixed;
		bottom: 0;
		width: 100%;
		background-color: var(--color-primary);
		left: 0;
		display: flex;
		justify-content: space-between;
		z-index: 2;
		gap: 1rem;
	}
	
	#filter-tabs > li.option-tab > *:not(.trash-wrapper){
		flex: 1;
		justify-content: center;
		gap: 0.3rem;
	}
	#filter-tabs > li.option-tab > * button.search-filter-input-button{
		width: 100%;
		padding: .4rem;
		font-size: 1rem;
		text-transform: uppercase;
		font-weight: 500;
		background: #ffffff;
		aspect-ratio: inherit;
		border-radius: 0.3rem;
	}
	
	
}

#results-count{
	-webkit-appearance: none;
	display: inline;
	border: none;
	padding: 0;
	margin: 0;
	width: 2.2rem;
	text-align: center;
	font-weight: bold;
	font-size: 1.1rem;
	outline: none;
	pointer-events: none;
}

@media (min-width: 992px){
	
	#filter-tabs{
		padding: 0;
	}
	
	#filter-tabs > li{
		position: relative;
	}
	#filter-tabs > li:not(:last-child) > span:before{
		content: '';
		position: absolute;
		height: 1rem;
		right: 0;
		top: 0.15rem;
		width: 1rem;
		background: url(img/svg/angle_down.svg) no-repeat right center;
		background-size: 0.9rem;
		transition: all .3s;
	}
	
	#filter-tabs > li:not(:last-child).active > span:before{
		transform: rotateX(180deg);
	}
	#filter-tabs > li:not(:last-child):after{
		content: '';
		position: absolute;
		width: 1px;
		background-color: #ffffff;
		height: 1rem;
		left: 100%;
	}
	#filter-section,
	#filter-section.active{
		position: relative;
		visibility: visible;
		opacity: 1;
		pointer-events: all;
		transform: none;
		transition: none;
		padding-block: 1rem;
		overflow: visible;
		z-index: 2;
	}
		
	#filter-tabs-content{
		max-width: var(--grid-limit);
		margin-inline: auto;
	}
	#filter-tabs > li{
		padding: 0.3rem 1.6rem;
		list-style: none;
		text-align: center;
		cursor: pointer;
		transition: all .3s;
		white-space: nowrap;
		font-size: 1.1rem;
		flex: 1;
		user-select: none;
		line-height: 1.2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	
	#filter-tabs > li > span{
		padding-right: 1.3rem;
	}
	#filter-tabs > li.active{
		background-color: #dddddd;
	}
	#filter-tabs > li:not(.active):hover{
	}
	
	#filter-tabs-content{
	position: absolute;
	top: 100%;
	width: 100%;
	background-color: #e8e8e8;
	left: 0;
	/* transform: translateX(-50%); */
	max-width: 100%;
	padding-inline: 3rem;
	}
}




#vehicles{
	gap: 1rem;
	list-style: none;
	padding: 0;
	margin: 0 0 3rem;
}
#vehicles > *{
	/* overflow: hidden; */
}

/* Bloque/sección de vehículos (.vehicles-list): en móvil, carrusel con scroll
   horizontal y snap (se ve 1 tarjeta y parte de la siguiente), igual que
   .benefits__grid. Acotado a .vehicles-list para NO afectar al archivo, a favoritos
   ni al AJAX de filtros, que comparten el id #vehicles fuera de esa sección. */
@media (max-width: 991.98px) {
	.vehicles-list #vehicles {
		flex-wrap: nowrap !important; /* gana a la utility .flex-wrap (!important) */
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none; /* Firefox: sin barra de scroll */
	}
	.vehicles-list #vehicles::-webkit-scrollbar {
		display: none; /* WebKit: sin barra de scroll */
	}
	.vehicles-list #vehicles > * {
		flex: 0 0 85%; /* 1 tarjeta visible + parte de la siguiente */
		box-sizing: border-box;
		scroll-snap-align: start;
	}
}

.item-vehicle{
	list-style: none;
	position: relative;
	margin-bottom: 1rem;
}
.item-vehicle .content{
	padding: 1rem 0 0;
}
.item-vehicle .thumb{
	aspect-ratio: 1.33;
	background-color: var(--lightgray);
}
.item-vehicle__no-image{
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1.33;
	background-color: var(--lightgray);
	padding: 1.5rem;
}
.item-vehicle__no-image[hidden]{
	display: none;
}
.item-vehicle__no-image svg,
.item-vehicle__no-image img{
	width: auto;
	max-width: 70%;
	max-height: 60%;
	height: auto;
}
.item-vehicle .tag{
	position: absolute;
	z-index: 1;
	right: 0;
	top: 0;
	padding: .1rem 1.1rem;
	margin: 0.7rem;
	border-radius: 20px;
	font-weight: 400;
}
.item-vehicle .tag--offer{
	right: auto;
	left: 0;
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: .45rem .95rem;
	background-color: var(--color-primary);
	color: #fff;
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
	border-radius: 2rem;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	background-color: red !important;
}

/* ===== Descuento: par de precios (original tachado + final) ===== */
.price-pair{
	display: inline-flex;
	flex-direction: column;
	line-height: 1.05;
}
.price-pair__old{
	display: block;
	font-size: .72em;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: line-through !important;
	text-decoration-thickness: 2px;
	color: red;
}
.price-pair__new{
	display: block;
	font-weight: 800;
	color: var(--text-color);
}
.price-pair--invert .price-pair__old{
	color: rgba(255, 255, 255, .75);
}
.price-pair--invert .price-pair__new{
	color: #fff;
}

/* ===== Banner de descuento (single vehículo) ===== */
.discount-banner{
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border-radius: .85rem;
	background-color: var(--lightgray);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
}
.discount-banner__badge{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	margin-right: -1rem;
	padding: .9rem 2rem .9rem 1.1rem;
	background-color: red;
	color: #fff;
	text-align: center;
	clip-path: polygon(0 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 0 100%);
}
.discount-banner__amount{
	display: block;
	font-weight: 800;
	font-size: clamp(1.5rem, 5vw, 2.4rem);
	line-height: 1;
}
.discount-banner__label{
	display: block;
	margin-top: .15rem;
	font-weight: 700;
	font-size: clamp(.6rem, 2vw, .8rem);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.discount-banner__prices{
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: .1rem;
	padding: .6rem 1.2rem .6rem 1.8rem;
}
.discount-banner__old{
	color: var(--color-primary);
	font-weight: 600;
	font-size: clamp(1rem, 3.5vw, 1.6rem);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	line-height: 1;
}
.discount-banner__new{
	color: var(--text-color);
	font-weight: 800;
	font-size: clamp(1.8rem, 6vw, 2.8rem);
	line-height: 1;
}
.item-vehicle .button{
	padding-block: .5rem;
}

.add-to-comparator{}
.add-to-comparator.added{
	background-color: #6ffb6f;
}
.item-vehicle .features{
	font-size: 0.7rem;
	color: #A5A5A5;
	font-weight: bold;
	text-align: center;
}

.item-vehicle .title .brand{
	overflow: hidden;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
.item-vehicle .title .desc{
	font-size: 0.9rem;
	text-transform: uppercase;
}

.item-actions{
	gap: .4rem;
}
.item-actions > *{
	min-width: 1.45rem;
}
.item-actions .add-to-favorites path{
	fill: #ffffff;
}
.item-actions .add-to-favorites.added path{
	fill: var(--color-primary);
}

.item-vehicle .extras{
	justify-content: center;
	gap: 1.5rem;
}
.item-vehicle .extras > * {
	width: 1.7rem;
}
.item-vehicle .extras img {
	display: block;
	width: 100%;
}
/*
#archive-banner1{
	order: 7;
}
#archive-banner2{
	order: 12;
}
#archive-banner3{
	order: 19;
}*/

@media (min-width: 992px){
	#vehicles{
		gap: 2rem;
	}

	#vehicles > *{
		width: calc(33.3333% - 1.5rem);
	}
	
	.item-vehicle .thumb-wrapper{
		display: block;
		position: relative;
	}
	
		
	.item-vehicle .thumb-wrapper:before {
	  content: "";
	  width: 100%;
	  height: 100%;
	  background: var(--color-alt);
	  transition: transform .6s;
	  transform: scale3d(1.9, 1.4, 1) rotate(45deg) translate3d(0, -100%, 0);
	  position: absolute;
	  left: 0;
	  top: 0;
	  z-index: 1;
	  mix-blend-mode: multiply;
	}
	
	.item-vehicle:hover .thumb-wrapper:before {
	  transform: scale3d(1.9, 1.4, 1) rotate(45deg) translate3d(0, 100%, 0)
	}
	.item-vehicle--no-link:hover .thumb-wrapper:before {
	  transform: scale3d(1.9, 1.4, 1) rotate(45deg) translate3d(0, -100%, 0);
	}
}
.item-vehicle--no-link,
.item-vehicle--no-link .thumb-wrapper,
.item-vehicle--no-link .title,
.item-vehicle--no-link .button {
	cursor: default;
}
@media (min-width: 1400px){
	#vehicles{
		gap: 2rem;
	}

	#vehicles > *{
		width: calc(25% - 1.5rem);
	}

	.item-vehicle .button-financiacion{
		font-size: .95rem
	}
	#vehicles > *.archive-banner-fullwidth{
		width: calc(100%);
	}
}


/****************************************************/
/* COMPARADOR */
/****************************************************/


#comparador{
	position: fixed;
	bottom: 0;
	background-color: #ffffff;
	width: 100%;
	padding: 1rem 0rem 1rem 0rem;
	text-align: center;
	z-index: 2;
	border-top: 3px solid var(--color-primary);
	transition: all .4s;
	visibility: hidden;
	opacity: 0;
	transform: translate3d(0,100%,0);
}

#comparador.active{
	visibility: visible;
	opacity: 1;
	transform: translate3d(0,0%,0);
}
#comparador .close-comparador{
	font-weight: bold;
	margin-bottom: 1rem;
	border: 1px solid;
	display: inline-flex;
	padding: 0.4rem 1rem;
	cursor: pointer;
}

#comparador .content{
	gap: 1rem;
	max-width: var(--grid-limit);
	margin: auto;
	flex-wrap: wrap;
}

#comparador .vehicles{
	gap: 0.5rem;
	width: 100%;
	padding-left: 1rem;
}
#comparador .vehicles .vehicle{
	width: 100%;
	border: 2px dashed;
	border: dashed;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	cursor: pointer;
	position: relative;
	min-height: 85px
}
#comparador .vehicles .vehicle .label{
	font-size: 0.7rem;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 1.2;
	display: block;
}
#comparador .vehicles .vehicle .vehicle-info{
	gap: 1rem;
	padding: 0.6rem 1rem;
	align-items: center;
}
#comparador .vehicles .vehicle .vehicle-info .thumb{
	width: 6rem;
	object-fit: contain;
	aspect-ratio: 16/12;
}
#comparador .vehicles .vehicle .content{
	text-align: left;
}
#comparador .vehicles .vehicle .content .year{
	color: var(--color-alt)
}
#comparador .vehicles .vehicle .content .brand{
	font-weight: bold;
}
#comparador .vehicles .vehicle .content .desc{
	font-size: 0.7rem;
}

 .vehicles .vehicle .empty-content{
	 text-align: center;
	 width: 100%;
	 padding: 1rem;
	}
 .vehicles .vehicle:has(.vehicle-info) .empty-content{
	 display: none;
 }

#comparador .vehicles .vehicle .reset{
	position: absolute;
	background-color: var(--color-primary);
	color: #ffffff;
	right: 0;
	top: 0;
	border-radius: 50%;
	aspect-ratio: 1;
	font-size: 0.8rem;
	width: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transform: translate(50%,-50%);
	transition: all .3s;
	display: none;
}
#comparador .vehicles .vehicle .reset:hover{
	background-color: var(--color-alt);
}

#comparador .vehicles .vehicle:has(.vehicle-info) .reset{
	display: flex;
}


#comparador .submit{
	display: block;
	min-width: 120px;
}

@media (min-width: 992px){
	#comparador .vehicles{
		gap: 2rem;
	}
	#comparador .vehicles .vehicle .label{
		font-size: 1rem;
	}
}


/****************************************************/
/* RESPONSIVE (768, 992) */
/****************************************************/


.hero-section{
	position: relative;
	aspect-ratio: 21/5.2;
	min-height: 290px;
	width: 100%;
}
.hero-section .thumb{}
.hero-section .content{
	position: relative;
	z-index: 1;
	padding: 1rem;
	width: 100%;
}


.hero-section .content > *{
	margin: 0;
	position: relative;
	z-index: 1;
	font-size: 2.1rem;
	max-width: 60%;
}

.animated-hero .thumb,
.animated-banner .thumb {
	transition: all 1.8s;
	transform: scale3d(1.1, 1.1, 1);
	filter: blur(7px);
	opacity: 0;
}

.loaded .animated-hero .thumb,
.loaded .animated-banner .thumb {
	transform: scale3d(1, 1, 1);
	filter: blur(0px);
	opacity: 1;
}

.animated-hero .content{
	transition: all 1.2s .5s ease;
	opacity: 0;
	transform: translate3d(0,10px,0);
}

.loaded .animated-hero .content{
	opacity: 1;
	transform: translate3d(0,0,0);
}

@media (min-width: 992px){
	
	.hero-section .content{
		position: relative;
		z-index: 1;
		padding: 2rem;
	}
	.hero-section .content > *{
		font-size: 2.8rem;
	}
}

	

/****************************************************/
/* CONCESIONARIOS */
/****************************************************/


.concesionario{}
.type1 .concesionario .embed-responsive{
	min-height: 300px;
}
.type1 .concesionario .embed-responsive iframe{
	-webkit-appearance: none;
	border: none;
}
.concesionario .content{
		padding: 2rem;
	}

.concesionario .icon{
	transition: all .3s;
}
.concesionario .icon:hover{
	transform: scale(1.1);
	color: var(--color-alt);
}
.type1 .concesionario .content{}
.type1 .concesionario .content .icon-link{}
.type1 .concesionario .content .icon-link svg{}
.type1 .concesionario .content .icon-link span{}
.type1 .concesionario .content p{
	margin-bottom: 1rem;
}
.concesionario .content strong{
}


.concesionarios.type2{}

@media (min-width: 992px){
	.type1 .concesionario .content{
		min-width: 35%;
		padding: 3rem;
	}
	
	.concesionarios.type2{
		gap: 3rem;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		justify-content: center;
	}
}

.concesionarios.type2{}



/****************************************************/
/* CONCESIONARIOS */
/****************************************************/

#comparator-modal{}
#comparator-modal > div > .content{
	overflow-x: auto;
	gap: 1rem;
}
#comparator-modal .vehicle{
	min-width: 250px;
	background-color: #ededed;
	padding: 2rem 1rem;
	width: 100%;
}
#comparator-modal .vehicle .vehicle-info{
	display: block !important;
}
#comparator-modal .vehicle .vehicle-info .thumb{
	aspect-ratio: 1.3;
	width: 100%;
	margin-bottom: 1.4rem;
}
#comparator-modal .vehicle .vehicle-info .content{}
#comparator-modal .vehicle .vehicle-info .content .year{
	display: inline-flex;
	padding: .3rem 1rem;
	background-color: var(--color-alt);
	font-weight: bold;
}

#comparator-modal .vehicle .vehicle-info ul{}
#comparator-modal .vehicle .vehicle-info ul li{
	list-style: none;
	margin-bottom: 1rem;
	border-bottom: 1px solid #cccccc;
	overflow: hidden;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	padding-bottom: 0.1rem;
	-webkit-line-clamp: 1;
	font-size: .9rem;
}
#comparator-modal .vehicle .vehicle-info .content .brand{
	font-weight: bold;
	font-size: 1.3rem;
	margin-block: 0.8rem;
	overflow: hidden;
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
#comparator-modal .vehicle .vehicle-info .content .desc{font-size: 0.8rem;overflow: hidden;display: -webkit-box !important;-webkit-box-orient: vertical;-webkit-line-clamp: 1;margin-bottom: 2rem;}
#comparator-modal .vehicle .empty-content{
	font-weight: bold;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	font-size: 0.9rem;
	text-transform: uppercase;
	max-width: 10rem;
	margin: auto;
	color: var(--color-primary);
}
#comparator-modal .vehicle:has(.vehicle-info) .empty-content{
	display: none;
}


.archive-actions{
	margin-block: 2rem 1rem;
	gap: 1.2rem;
}
.archive-actions > *{
	gap: 0.4rem;
	cursor: pointer;
}
.archive-actions > * svg{
	min-width: 20px;
}

.archive-actions > * svg.icon-heart *{
	fill: transparent;
}

.no-results-container{min-height: 300px;}

@media (min-width: 992px){
		
	.archive-actions{
		margin-block: 0rem;
	}
	.no-results-container{min-height: 400px;}
}


/****************************************************/
/* TOOLTIPS */
/****************************************************/

*:has( > .custom-tooltip){
	position: relative;
}
.custom-tooltip{
	position: absolute;
	font-size: .8rem;
	line-height: 1;
	background-color: var(--color-alt);
	color: var(--color-secondary);
	padding: 0.3rem .4rem;
	border-radius: 0.3rem;
	font-weight: 500;
	left: calc(100% + .8rem);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: 1;
	max-width: 150px;
	top: 50%;
	transform: translateY(-50%);
	min-width: 70px;
	display: none;
	pointer-events: none;
}
*:has( > .custom-tooltip):hover .custom-tooltip{
	opacity: 1;
	visibility: visible;
	transition: all .2s .3s;
}

#head .actions .custom-tooltip{
	top: calc(100% + 10px);
	left: 50% !important;
	transform: translate(-50%,0);
}
#head .actions .custom-tooltip:before{
	right: 50%;
	top: -10px;
	left: inherit;
	transform: translate(-50%,0%) rotate(90deg);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 7px solid var(--color-alt);
	transform-origin: center;
	bottom: inherit !important;
}

.custom-tooltip:before{
	content: '';
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-right: 7px solid var(--color-alt);
}

.tooltip-wrapper{
	position: relative;
}
.tooltip-wrapper .icon-info{
	width: 100%;
}
.tooltip-wrapper .tooltip{
	position: absolute;
	opacity: 0;
	visibility: hidden;
	transition: all .3s;
	bottom: calc(100%);
	right: 0;
	border: 1px solid var(--color-primary);
}

.info-tooltip .tooltip{
	background-color: #ffffff;
	z-index: 1;
	padding: 1rem;
	font-size: 0.85rem;
	min-width: 18rem;
	text-align: center;
	border-radius: 0.6rem;
	box-shadow: 0 0 10px -2px #ccc;
}

	.tooltip-wrapper:hover .tooltip{
		opacity: 1;
		visibility: visible;
	}

@media (min-width: 992px){
	.custom-tooltip{
		display: block;
		text-align: center;
	}
		
	.tooltip-wrapper.active .tooltip{
		opacity: 1;
		visibility: visible;
	}
}

.info-tooltip{
	min-width: 2.1rem;
	padding: 0.2rem;
}
.info-tooltip ul{
	list-style: none;
	padding: 0;
}
.info-tooltip ul > li{}



body .carroceria-filter .search-filter-input-checkbox__label{
	width: 7rem;
	z-index: 1;
	background-repeat: no-repeat;
	background-size: 4rem;
	font-size: .8rem;
	white-space: nowrap;
	padding-top: 2.9rem;
	background-position: 0.7rem -4px;
	border-radius: .2rem
}
body .search-filter-input-checkbox{
	padding: .4rem;
	border-radius: 0.4rem;
}
body .search-filter-input-checkbox--is-active{
	background-color: var(--color-alt);
}

@media (min-width: 992px){
		
	.carroceria-filter{
		padding-inline: 1rem;
	}
}

body .carroceria-filter .search-filter-label{
	text-align: left !important;
	margin-bottom: 1rem !important;
}
body .search-filter-input-checkbox[data-option-value="BERLINA"] .search-filter-input-checkbox__label{
	background-image: url(img/vehicle-types/berlina.webp);
}
body .search-filter-input-checkbox[data-option-value="CABRIO"] .search-filter-input-checkbox__label{
	background-image: url(img/vehicle-types/cabrio.webp);
}
body .search-filter-input-checkbox[data-option-value="COUPE"] .search-filter-input-checkbox__label{
	background-image: url(img/vehicle-types/coupe.webp);
}
body .search-filter-input-checkbox[data-option-value="FAMILIAR (ES)"] .search-filter-input-checkbox__label{
	background-image: url(img/vehicle-types/familiar.webp);
}
body .search-filter-input-checkbox[data-option-value="MINICOCHE"] .search-filter-input-checkbox__label{
	background-image: url(img/vehicle-types/minicoche.webp);
}
body .search-filter-input-checkbox[data-option-value="MONOVOLUMEN"] .search-filter-input-checkbox__label{
	background-image: url(img/vehicle-types/monovolumen.webp);
}
body .search-filter-input-checkbox[data-option-value="SEDAN"] .search-filter-input-checkbox__label{
	background-image: url(img/vehicle-types/sedan.webp);
}
body .search-filter-input-checkbox[data-option-value="4X4"] .search-filter-input-checkbox__label{
	background-image: url(img/vehicle-types/todoterreno.webp);
}
body .search-filter-input-checkbox[data-option-value="SUV"] .search-filter-input-checkbox__label{
	background-image: url(img/vehicle-types/todoterreno.webp);
}


@media (min-width: 992px){
	.vehicle-wrap{
	  display: grid;
	  grid-template-columns: 1fr 1fr;
	  column-gap: 20px; 
	  align-items: start; 
	}	
	
	.vehicle-wrap > *{
		overflow: hidden;
	}
	.vehicle-wrap .gallery-wrap{
		 grid-column: 1; 
	}
	.vehicle-wrap .vehicle-content{
		grid-column: 2;
		position: sticky;
		top: 7rem;
		min-height: 200px;
		overflow: visible;
	}
	.vehicle-wrap .vehicle-wrap3{
		 grid-column: 1;
	}
	
}
@media (max-width: 991px){
	.vehicle-wrap .vehicle-wrap3{
		margin-top: 0 !important;
	}
	
}

/****************************************************/
/* COOKIEBOT */
/****************************************************/


#CybotCookiebotDialogBodyButtonsWrapper #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {

order: 1;

margin-right: 0.5em; /* Espaciado opcional entre botones */

}

#CybotCookiebotDialogBodyButtonsWrapper #CybotCookiebotDialogBodyLevelButtonCustomize {

order: 2;

}

#CybotCookiebotDialogBodyButtonsWrapper #CybotCookiebotDialogBodyButtonDecline {

order: 3;

}

#CybotCookiebotDialogBodyButtonsWrapper #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection {

order: 4;

}


/****************************************************/
/* HERO BANNER VEHICLE */
/****************************************************/

.hero-banner-vehicle{
	position: relative;
	width: 100%;
	min-height: 320px;
}
.hero-banner-vehicle__bg{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}
.hero-banner-vehicle__content{
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 2.5rem var(--px);
	color: #fff;
	margin: 0 auto;
}
.hero-banner-vehicle__left{
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.hero-banner-vehicle__modelo-row{
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex-wrap: wrap;
}
.hero-banner-vehicle__modelo{
	font-size: 2rem;
	font-weight: 400;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
	line-height: 1.1;
}
.hero-banner-vehicle__etiqueta{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #fff;
	border-radius: 6px;
	padding: 2px 8px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.hero-banner-vehicle__legal{
	font-size: 0.9rem;
	color: #fff;
	margin: 0;
	line-height: 1.4;
}
.hero-banner-vehicle__ctas{
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.hero-banner-vehicle__cta{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 2.5rem;
	border-radius: 6px;
	font-size: 1rem;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity .2s;
}
.hero-banner-vehicle__cta:hover{
	opacity: .85;
}
.hero-banner-vehicle__cta--primary{
	background: #fff;
	color: #000;
}
.hero-banner-vehicle__cta--outline{
	background: transparent;
	border: 1px solid #fff;
	color: #fff;
}
.hero-banner-vehicle__right{
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.hero-banner-vehicle__precio-block{
	display: flex;
	flex-direction: column;
}
.hero-banner-vehicle__precio-prefijo{
	font-size: 0.9rem;
	text-transform: uppercase;
}
.hero-banner-vehicle__precio{
	font-size: 2.2rem;
	line-height: 1.1;
}
.hero-banner-vehicle__promo{
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hero-banner-vehicle__promo-line1{
	font-size: 1rem;
	text-transform: uppercase;
	margin: 0;
}
.hero-banner-vehicle__promo-line2{
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	margin: 0;
}

@media (min-width:992px){
	.hero-banner-vehicle{
		min-height: 420px;
		aspect-ratio: 2.5;
		max-height: 70vh;
	}
	.hero-banner-vehicle__content{
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		padding: 5rem var(--px);
		height: 100%;
	}
	.hero-banner-vehicle__left{
		gap: 2.5rem;
		max-width: 500px;
	}
	.hero-banner-vehicle__modelo{
		font-size: 2.8rem;
	}
	.hero-banner-vehicle__cta{
		padding: 0.5rem 3.5rem;
		font-size: 1.1rem;
	}
	.hero-banner-vehicle__right{
		max-width: 330px;
		gap: 0.6rem;
	}
	.hero-banner-vehicle__precio{
		font-size: 2.8rem;
	}
}

/****************************************************/
/* SINGLE VEHICLE */
/****************************************************/

.hero-vehicle{
	padding-block: 3rem;
}
.hero-vehicle .content{}
.hero-vehicle .content h1{}
.hero-vehicle .content p{}

.hero-vehicle-features{
	z-index: 1;
}
.hero-vehicle-features ul{
	padding-block: 1rem;
	justify-content: space-between !important;
	list-style: none;
	background-color: var(--lightgray);
}
.hero-vehicle-features ul li{
	width: 50%;
	padding: 0.4rem 0.3rem;
	text-align: center;
}
.hero-vehicle-features ul li label{font-size: 0.9rem;line-height: 1.2;display: block;}
.hero-vehicle-features ul li .text{
	font-weight: bold;
	font-size: 1.1rem;
}

.claim-section .h1{
	padding-block: 2rem;
}


@media (min-width:992px){
	
	.hero-vehicle{
		padding-block: 3rem;
		aspect-ratio: 2.2;
		max-height: 70vh;
		width: 100%;
		min-height: 500px;
	}
	.hero-vehicle .content{}
	.hero-vehicle .content h1{
	font-size: 4rem;
}
	.hero-vehicle .content p{
	font-size: 2rem;
}
	
	.hero-vehicle-features{
	}
	.hero-vehicle-features ul{
	background-color: transparent;
	padding-block: 0;
	}
	.hero-vehicle-features ul li{
		padding: 1rem 1rem 1rem 0rem;
		text-align: left;
		width: 100%;
	}
	.hero-vehicle-features ul li label{
	font-size: 1rem;
	}
	.hero-vehicle-features ul li .text{
		font-size: 1.3rem;
	}

		
	.claim-section .h1{
		padding-block: 4rem;
	}
	
}

/****************************************************/
/* CUSTOM TABS */
/****************************************************/


.custom-tabs{}
.custom-tabs .normal-tabs{
	margin-block: 2rem;
}

ul.tabs.normal-tabs.d-flex.p-0.gap-1.gap-lg-2.w-full.justify-content-center.py {}
.custom-tabs .normal-tabs > li{
	background-color: #ffffff;
	color: var(--color-primary);
	border: none !important;
}
.custom-tabs .normal-tabs > li.active{
	background-color: var(--color-alt);
	color: #fff;
}
.custom-tabs .tab-content{}
.custom-tabs .tab-content .thumb{}
.custom-tabs .tab-content .content{
	padding: 1rem;
}

.custom-tabs .tab-content .content ul{
	padding: 0;
	list-style: none;
}

.custom-tabs .tab-content .content ul li{
	margin-bottom: .4rem;
}

@media (min-width:992px){
	
	.custom-tabs{}
	.custom-tabs .normal-tabs{
	}
	
	ul.tabs.normal-tabs.d-flex.p-0.gap-1.gap-lg-2.w-full.justify-content-center.py {}
	.custom-tabs .normal-tabs > li{
}
	.custom-tabs .normal-tabs > li.active{
	}
	.custom-tabs .tab-content{}
	.custom-tabs .tab-content .thumb{
	width: 50%;
}
	.custom-tabs .tab-content .content{
	}
}


/****************************************************/
/* CITA ACTIVA */
/****************************************************/

.step-1.alt-style{}
.step-1.alt-style label{}
.step-1.alt-style .form-group{
	margin: 0 0 1rem;
	position: relative;
	width: -webkit-fill-available;
}
.step-1.alt-style .form-group .validator-tag{
	position: absolute;
	font-size: 0.7rem;
	top: 100%;
	margin-top: 0.4rem;
}

.step-1.alt-style input[type="text"]{
	padding: 1rem;
	border-radius: 0.4rem;
	font-size: 1.1rem;
	display: block;
	width: 100%;
}
	.step-1.alt-style input[type="text"]:placeholder{
		font-size: 1.1rem;
	}
.step-1.alt-style .button{
	padding: 0.9rem 5rem;
}

@media (min-width: 992px){
	.step-1.alt-style{}
	.step-1.alt-style label{}
	.step-1.alt-style .form-group{
		margin: 0;
		width: auto;
	}
	.step-1.alt-style input[type="text"]{
		padding: 1rem;
		border-radius: 0.4rem;
		font-size: .8rem;
		display: block;
		width: 15rem;
		font-size: 1.1rem;
	}
	.step-1.alt-style .button{
		padding-inline: 3rem;
	}
}


/****************************************************/
/* PÁGINA 404 */
/****************************************************/

.error-404{
	display: flex;
	align-items: center;
	min-height: 70vh;
	padding-block: var(--py);
}
.error-404__inner{
	max-width: 34rem;
	margin-inline: auto;
}
.error-404__code{
	margin: 0;
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.04em;
	font-size: clamp(6rem, 22vw, 12rem);
	color: var(--color-primary);
}
.error-404__title{
	margin: 0.5rem 0 0;
}
.error-404__text{
	margin: 1rem auto 2rem;
	max-width: 28rem;
	color: var(--gray);
}
.error-404__cta{
	text-transform: uppercase;
}


/****************************************************/
/* GALERÍA DE IMÁGENES (bloque/layout gallery_block) */
/****************************************************/

.gallery-block .gallery-item{
	margin: 0;
	overflow: hidden;
}
.gallery-block .gallery-item a{
	display: block;
	height: 100%;
}
.gallery-block .gallery-item img{
	display: block;
	width: 100%;
	height: auto;
}

/* Proporción fija: recorta con object-fit */
.gallery-block:not(.ratio-auto) .gallery-item img{
	height: 100%;
	object-fit: cover;
}
.gallery-block.ratio-1-1 .gallery-item{ aspect-ratio: 1 / 1; }
.gallery-block.ratio-4-3 .gallery-item{ aspect-ratio: 4 / 3; }
.gallery-block.ratio-16-9 .gallery-item{ aspect-ratio: 16 / 9; }
.gallery-block.ratio-3-4 .gallery-item{ aspect-ratio: 3 / 4; }

/* Rejilla */
.gallery-block .gallery-grid{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gallery-gap, 1rem);
}

/* Mosaico (masonry con CSS columns) */
.gallery-block .gallery-masonry{
	column-count: 2;
	column-gap: var(--gallery-gap, 1rem);
}
.gallery-block .gallery-masonry .gallery-item{
	margin-bottom: var(--gallery-gap, 1rem);
	break-inside: avoid;
}

@media (min-width: 992px){
	.gallery-block .gallery-grid{
		grid-template-columns: repeat(var(--gallery-cols, 3), 1fr);
	}
	.gallery-block .gallery-masonry{
		column-count: var(--gallery-cols, 3);
	}
}

/* Carrusel (Splide) */
.gallery-block.gallery-carousel{
	margin-block: 1rem;
}
.gallery-block.gallery-carousel .gallery-item{
	height: 100%;
}

/* Lightbox: afordancia al pasar el ratón */
.gallery-block .gallery-item a[data-fancybox]{
	cursor: zoom-in;
}
.gallery-block .gallery-item a[data-fancybox] img{
	transition: transform 0.4s ease;
}
.gallery-block .gallery-item a[data-fancybox]:hover img{
	transform: scale(1.04);
}


.section-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-alt);
}

.value-props {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1rem;
	margin-block: 3rem 3rem;
	padding: 0;
	list-style: none;
}

/* En móvil las propuestas de valor van de 2 en 2 (2 columnas). En ≥992px el media
   de abajo las devuelve a fila de ancho natural (flex: 0 1 auto). */
.value-prop {
	flex: 0 0 calc(50% - 0.5rem);
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.value-prop__icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 2rem;
	height: 2rem;
	/* El icono (SVG/PNG) se pinta como máscara y el color lo da background-color:
	   currentColor; así se recolorea por CSS con `color`. Ej.:
	   .value-prop__icon { color: var(--color-alt); } */
	background-color: currentColor;
	-webkit-mask: var(--vp-icon-url) center / contain no-repeat;
	mask: var(--vp-icon-url) center / contain no-repeat;
}

.value-prop__text {
	font-size: 0.95rem;
}

.value-prop__text p {
	margin: 0;
}

@media (min-width: 992px) {
	.value-props {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 1.25rem 2rem;
	}

	.value-prop {
		flex: 0 1 auto;
	}
}

/* Propuestas de valor: icono a la izquierda y texto a la derecha (opción del bloque,
   válida con cualquier tipo). El <li> queda en fila al no llevar .flex-lg-column. */
.features-list--icon-left .content {
	text-align: left;
}
.features-list--icon-left .icon {
	width: 3.5rem;
	min-width: 3.5rem;
	aspect-ratio: 1;
	margin-bottom: 0;
}

/* Propuestas de valor: opción «Con borde». Recuadra cada propuesta; el color del
   borde deriva del texto (currentColor) para adaptarse a cualquier fondo y marca,
   atenuado con color-mix para un trazo sutil. Válido con cualquier tipo. */
.features-list--bordered > * {
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: 0.75rem;
	padding: 1.5rem;
}

/* Estado de carga del filtrado AJAX de archivos (#vehicles.is-loading) */
.product-list.is-loading {
	position: relative;
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.product-list.is-loading::after {
	content: "";
	position: absolute;
	top: 40px;
	left: 50%;
	width: 40px;
	height: 40px;
	margin-left: -20px;
	border: 3px solid color-mix(in srgb, currentColor 20%, transparent);
	border-top-color: currentColor;
	border-radius: 50%;
	animation: cdc-spin 0.7s linear infinite;
}
@keyframes cdc-spin {
	to { transform: rotate(360deg); }
}

/* Chips de filtros activos del archivo */
.cdc-active-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1.25rem;
}
.cdc-active-filters:empty { display: none; }
.cdc-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	max-width: 100%;
	padding: 0.4rem 0.5rem 0.4rem 0.9rem;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
	font-size: 0.9rem;
	line-height: 1;
}
.cdc-chip__label {
	font-weight: 600;
	color: #1d2327;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cdc-chip__remove {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	color: #d63638;
	font-size: 1.2rem;
	line-height: 1;
	text-decoration: none;
}
.cdc-chip__remove:hover { background: rgba(214, 54, 56, 0.12); color: #a00; }
.cdc-chip-clear {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: #e2e6e9;
	color: #4a5560;
	transition: background 0.15s ease;
}
.cdc-chip-clear:hover { background: #cdd4d9; color: #1d2327; }
@media (max-width: 575px) {
	.cdc-active-filters { gap: 0.4rem; margin-bottom: 1rem; }
	.cdc-chip { font-size: 0.82rem; padding: 0.35rem 0.4rem 0.35rem 0.75rem; }
}

/* Filtro carrocería: el label es un <span> inline, así que el bg/width/padding no
   aplicaban → inline-block. Y en desktop ensanchamos el grupo para 2 filas (5+4). */
body .carroceria-filter .search-filter-input-checkbox__label {
	display: inline-block;
}
@media (min-width: 992px) {
	body .carroceria-filter {
		width: 100%;
	}
	body .carroceria-filter .search-filter-input-group {
		max-width: 45rem;
	}
}

/* Selector de "Ordenar" del archivo */
.cdc-sort {
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
	border-radius: 0.4rem;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666666' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 0.7rem;
	padding: 0.55rem 2.1rem 0.55rem 0.9rem;
	font-size: 0.9rem;
	line-height: 1.2;
	color: #1d2327;
	cursor: pointer;
}
.cdc-sort:hover {
	border-color: var(--color-primary);
}
.cdc-sort:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 20%, transparent);
}