:root {
	--white: #ffffff;
	--black: #000000;
	--gray: #565656;
	--darkgray: #242424;
	/* --lightgray se define en style.css (#E8E8E8), que se encola después. Aquí
	   estaba declarada con otro valor (#CBCBCB) que nunca llegaba a aplicarse:
	   despistaba al leer sin cambiar nada. */
}

html {
	height:100%;
	font-size: 15px;
	margin: 0;
	padding: 0;
}

body {
	font-weight: 300;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

strong,b {
	font-weight: bold;
}

a {
	/* Era var(--color-text), una variable que no existe —la del tema es --text-color,
	   con las palabras al revés—, así que el color acababa heredándose del contenedor.
	   Se deja `inherit` explícito: es exactamente lo que venía pasando, y forzar aquí
	   --text-color pondría en negro los enlaces que hoy salen claros sobre fondos
	   oscuros. */
	color: inherit;
	outline:none;
}

img,svg {
	max-width:100%;
	height:auto;
}

p:has( >img.aligncenter) {
	text-align: center;
}

p {
	margin: 0 0 1.5rem;
}

hr {
	border-top-width:0;
	margin:30px 0;
}
.x-bordered{
	border-left: 1px solid;
	border-right: 1px solid;
}

.y-bordered{
	border-top: 1px solid;
	border-bottom: 1px solid;
}

.td-none,
.td-none * {
	text-decoration:none!important;
}
.grid-limit{
	max-width: var(--grid-limit);
	margin-inline: auto;
}
.wrap.grid-limit{
	padding-inline: 15px;
	margin-inline: auto;
}

.text-featured {
	font-size:larger;
}

small,.small-font {
	font-size:11px;
}
.static,
.position-static {
	position:static !important;
}
.relative, 
.position-relative{
	position:relative;
}

iframe {
	max-width:100%;
}

code {
	white-space:normal;
}

.border,
.bordered {
	border:1px solid !important;
}

.border-top {
	border-top:1px solid;
}

.border-bottom {
	border-bottom:1px solid;
}
.cursor-pointer{
	cursor: pointer !important;
}

.text-uppercase,
.uppercase {
	text-transform:uppercase;
}

.underline,
.text-underline {
/* text-decoration: underline; */
}

.h-screen {
	height:100vh;
}

.min-h-screen {
	min-height:100vh;
}

.min-h-halfscreen {
	min-height:50vh;
}

.td-none,
.decoration-none,
.text-decoration-none,
.decoration-none *,
.text-decoration-none * {
	text-decoration:none;
}

.no-scrollbars::-webkit-scrollbar {
  display: none;
}
.no-scrollbars {
  -ms-overflow-style: none;
  scrollbar-width: none; 
}

.w-100,
.w-full {
	width:100%!important;
}
.left-0{
	left: 0;
}
.top-0{
	top: 0;
}

.h-100,
.h-full {
	height:100%!important;
}

.text-underline,
.td-underline {
	text-decoration:underline;
}

.font-nowrap {
	white-space:nowrap;
}
.line-clamp,
.line-clamp-1{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}
.line-clamp-2{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.line-clamp-3{
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.justify,
.text-justify {
	text-align:justify;
}

.small-font,
.font-small {
	font-size: smaller;
}
.font-small p {
	margin-bottom: 1rem;
}
.overflow-scroll{
	overflow-x: scroll;
	overflow-y: hidden;
}
.rounded {
	border-radius: 1rem;
}
.absolute{
	position: absolute;
}
.inset-0{
	inset: 0;
}

.rounded-top {
	border-top-right-radius: 1rem;
	border-top-left-radius: 1rem;
}

.rounded-bottom {
	border-bottom-right-radius: 1rem;
	border-bottom-left-radius: 1rem;
}

.container {
	max-width: var(--grid-limit);
}
.box-shadow{
	box-shadow: var(--box-shadow);
}

.container-fluid {
	max-width:var(--grid-limit);
}

.px{
	padding-inline: var(--px);
}
.pl{
	padding-left: var(--px);
}
.pr{
	padding-right: var(--px);
}

.min-height-100vh {
	min-height:100vh!important;
}
.min-height-screen {
	max-width: 100%;
}

section {
	position:relative;
}
.smaller{
	font-size: smaller;
}
.smaller,
.text-smaller{
	font-size: smaller;
}

.py {
	padding-top: var(--py);
	padding-bottom: var(--py);
}
.py-extra{
	padding-top: calc(2*var(--py));
	padding-bottom: calc(2*var(--py));
}
.pt{
	padding-top: var(--py);
}
.pb{
	padding-bottom: var(--py);
}

.py.white-content +
.py.white-content {
	padding-top:0;
}

.thumb-container,
.thumb {
	display:block;
	text-decoration:none;
	position:relative;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
	object-fit: cover;
}

.thumb-container.absolute,
.thumb.absolute {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
.object-cover{
	object-fit: cover;
}
.object-contain{
	object-fit: contain;
}

/* COLORS

   Las declaraciones de color de abajo leen `var(--cdc-text, <lo de siempre>)` y
   `var(--cdc-bg, <lo de siempre>)`. Mientras nadie defina esas dos variables, `var()`
   resuelve al respaldo y el resultado es EXACTAMENTE el de antes: no es una
   equivalencia que haya que auditar página a página, es la definición de `var()`.

   Quien las define es css/block-colors.css, en el wrapper de un bloque. Ahí está el
   truco: una custom property redefinida en un ancestro gana para todo su subárbol sin
   importar el orden de los ficheros, la especificidad ni los `!important`. Por eso el
   color de un bloque puede mandar sobre el de la página sin quitar un solo
   `!important` de aquí —quitarlos cambiaría quién gana contra los brand.css de cada
   concesionario, que ni versionamos ni podemos leer.

   El `!important` deja así de ser el problema y pasa a ser la garantía: asegura que
   esta regla gana a la marca, y el VALOR lo decide el bloque. */

.white,.white a,a.white,.text-white,a.text-white, .text-white a {
	color:var(--cdc-text, var(--white));
}

.white-content, .bg-white, .button.bg-white {
	background-color:var(--cdc-bg, var(--white));
	color: var(--cdc-text, var(--color-primary));
}

.white-content .button {
}

.bg-transparent{
	background-color: transparent !important;
}
.black,.black a,a.black {
	color:var(--cdc-text, var(--black));
}

/* BACKGROUNDS */

.black-content,
.bg-black {
	background-color: var(--cdc-bg, var(--black)) !important;
}
.bg-gray{
	background-color: var(--cdc-bg, var(--gray)) !important;
}
.bg-darkgray{
	background-color: var(--cdc-bg, var(--darkgray)) !important;
}
.bg-transparent{
	background-color: transparent;
}
.bg-primary{
	background-color: var(--cdc-bg, var(--color-primary));
}
/* `bg-secundario` no es un descuido: los selects de ACF guardan la clave del color de
   fondo en castellano («secundario») y los bloques la concatenan tal cual
   (`$classes .= ' bg-' . $bg`), así que la clase que llega al HTML es esa. Como el CSS
   solo definía `.bg-secondary`, elegir «Secundario» en un bloque no pintaba nada.
   Se añade como alias en vez de renombrar la clave en los 27 field groups: el valor ya
   está guardado en la base de datos de cada concesionario y renombrarlo dejaría
   huérfanas todas las páginas que lo usan hoy. */
.bg-secondary,
.bg-secundario{
	background-color: var(--cdc-bg, var(--color-secondary));
}
.bg-alt{
	background-color: var(--cdc-bg, var(--color-alt));
}
.bg-lightgray{
	background-color: var(--cdc-bg, var(--lightgray)) !important;
}
/* Aquí había .bg-lightgray2 y .bg-dark, que apuntaban a --lightgray2 y --dark:
   variables que no existen en ningún sitio. No las usaba ninguna plantilla ni ningún
   select de ACF, así que se quitan en lugar de inventarles un valor. */

/* «Por defecto» en el selector de color de texto de los bloques. Era
   var(--color-text) —variable inexistente, ver el comentario del enlace de arriba—,
   de modo que la opción por defecto nunca ha forzado color. Se deja `inherit`
   explícito: además de conservar el comportamiento de siempre, es lo que
   semánticamente significa «por defecto». */
.text-color{
	color: inherit;
}

.text-primary, 
.text-primary a{
	color: var(--cdc-text, var(--color-primary)) !important;
}
.text-secondary, 
.text-secondary a{
	color: var(--cdc-text, var(--color-secondary)) !important;
}

.text-alt, 
.text-alt a{
	color: var(--cdc-text, var(--color-alt)) !important;
}

.text-gray,
.text-gray a{
	color: var(--cdc-text, var(--gray)) !important;
}
.text-lightgray,
.text-lightgray a{
	color: var(--cdc-text, var(--lightgray)) !important;
}
/* Aquí había .text-lightgray2 y .text-lightgray3 (con el selector escrito
   «lightgra2» y «lightgra3», sin la y). Apuntaban a variables inexistentes y no las
   usaba nada. */

.hover-effect {
	transition:all .3s;
}

.gap-1{
	gap: 1rem;
}
.gap-2{
	gap: 2rem;
}
.gap-3{
	gap: 3rem;
}
.gap-4{
	gap: 4rem;
}
.gap-5{
	gap: 5rem;
}

@media (min-width: 992px){
		
	.gap-lg-1{
		gap: 1rem;
	}
	.gap-lg-2{
		gap: 2rem;
	}
	.gap-lg-3{
		gap: 3rem;
	}
	.gap-lg-4{
		gap: 4rem;
	}
	.gap-lg-5{
		gap: 5rem;
	}
}


/* HEADINGS & FONTS CLASSES */

h1,h2,h3, .h1,.h2,.h3 {
	text-wrap: balance;
}

.h1,.h2,.h3,h1,h2,h3 {
	clear:both;
	line-height:1.2;
	font-weight: bold;
	display:block;
	font-family: var(--heading-font);
}
h1,h2,h3 {
	margin:0 0 1.3rem;
}

.h4,.h5,.h6,h4,h5,h6 {
	clear:both;
	line-height: 1.3;
	font-weight: bold;
	font-family: var(--heading-font);
}
h4,h5,h6 {
	margin:0 0 1rem;
}

h1,.h1 {
	font-size: 2.5rem;
	line-height:1.1;
}

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

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

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

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

h1 {
	margin: 0 0 1.1rem;
}

h2 {
	margin: 0 0 1rem;
}

h3 {
	margin: 0 0 1rem;
}

h4 {
	margin: 0 0 .8rem;
}

h5 {
	margin: 0 0 .8rem;
}

h6,.h6 {}

.title,
.heading-font{
	font-family: var(--heading-font);
}

.section-title{
	font-size: 2rem;
}

.small-font,
.font-smaller{
	font-size: smaller;
}

.font-heading, .heading-font{
	font-family: var(--heading-font);
}

.overflow-hidden {
	overflow:hidden;
}

.embed-responsive {
	position:relative;
	display:block;
	width:100%;
	padding:0;
	overflow:hidden;
}

.embed-responsive iframe {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
}

.embed-responsive::before {
	display:block;
	content:"";
}

.embed-responsive-16by9::before {
	padding-top:56.25%;
}

.embed-responsive-4by3::before {
	padding-top:75%;
}

.embed-responsive-21by9::before {
	padding-top:42.857143%;
}

.embed-responsive-1by1::before {
	padding-top:100%;
}

.aspect-video{
	aspect-ratio: 16/9;
}
.aspect-portrait{
	aspect-ratio: 9/16;
}
.aspect-square{
	aspect-ratio: 1;
}
.aspect-fullscreen,
.aspect-4-3{
	aspect-ratio: 4/3;
}
.aspect-threefour{
	aspect-ratio: 3/4;
}
.aspect-landscape{
	aspect-ratio: 30/9;
}
.aspect-wide{
	aspect-ratio: 21/11;
}

.text-nowrap {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.font-regular,.font-300 {
	font-weight:300!important;
}

.font-normal,.font-400 {
	font-weight:400!important;
}

.font-medium,.font-500 {
	font-weight:500!important;
}

.font-semibold {
	font-weight:500!important;
}
.font-bold, 
.text-bold,
.bold{
	font-weight: bold !important;
}

.text-balance{
	text-wrap: balance !important;
}
.text-pretty{
	text-wrap: pretty !important;
}
.list-style-none{
	list-style: none !important;
}
.sticky{
	position: sticky;
	top: var(--header-height);
}
.d-grid{
	display: grid;
}
.grid-cols-1{
	grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2{
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3{
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4{
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-5{
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6{
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.grid-cols-7{
	grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8{
	grid-template-columns: repeat(8, minmax(0, 1fr));
}
.grid-cols-9{
	grid-template-columns: repeat(9, minmax(0, 1fr));
}
.grid-cols-10{
	grid-template-columns: repeat(10, minmax(0, 1fr));
}
.grid-cols-11{
	grid-template-columns: repeat(11, minmax(0, 1fr));
}
.grid-cols-12{
	grid-template-columns: repeat(12, minmax(0, 1fr));
}
.grid-cols-none{
	grid-template-columns: none;	
}
.grid-cols-subgrid{
	grid-template-columns: subgrid;
}

@media (min-width: 992px){
	
	.rounded-lg {
		border-radius: 1rem;
	}
	.d-lg-box{
		display: -webkit-box !important;
	}
	.d-lg-grid{
		display: grid;
	}
	.grid-cols-lg-1{
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.grid-cols-lg-2{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.grid-cols-lg-3{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.grid-cols-lg-4{
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.grid-cols-lg-5{
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
	.grid-cols-lg-6{
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
	.grid-cols-lg-7{
		grid-template-columns: repeat(7, minmax(0, 1fr));
	}
	.grid-cols-lg-8{
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
	.grid-cols-lg-9{
		grid-template-columns: repeat(9, minmax(0, 1fr));
	}
	.grid-cols-lg-10{
		grid-template-columns: repeat(10, minmax(0, 1fr));
	}
	.grid-cols-lg-11{
		grid-template-columns: repeat(11, minmax(0, 1fr));
	}
	.grid-cols-lg-12{
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	.grid-cols-lg-none{
		grid-template-columns: none;	
	}
	.grid-cols-lg-subgrid{
		grid-template-columns: subgrid;
	}
		
	.sticky-lg{
		position: sticky;
		top: var(--header-height);
	}
}

/****************************************************/
/* BUTTONS */
/****************************************************/


/* `a.button` ya no está en esta lista, y no es un descuido.
 *
 * Era redundante —`.button` ya casa un <a class="button">— y su único efecto era
 * subir la especificidad de TODA la regla a (0,1,1) para los enlaces. Con eso le
 * ganaba a cualquier clase de componente, que son (0,1,0), y el resultado era que
 * el mismo botón se veía distinto según la etiqueta: el
 * <button class="button equipment-block__button"> salía con su borde de 1px y a
 * 1rem, y el <a> de al lado, idéntico en el diseño, sin borde y a 1.1rem.
 *
 * Ahora la regla es (0,1,0) para los enlaces, así que empata con las clases de
 * componente y decide el orden de carga: los css/block-*.css se encolan después
 * de este fichero, de modo que un bloque puede afinar su botón sin pelear.
 *
 * `.has-buttons a` sí se queda: ese casa enlaces SIN clase dentro de un contenedor
 * de botones, y no hay forma de expresarlo con menos especificidad. */
button,
.button,[type="submit"],
.has-buttons a {
	-webkit-appearance:none;
	-webkit-border-radius:0;
	outline:none;
	border:none;
	line-height:1;
	text-decoration:none;
	padding: 0.8rem 1.4rem;
	margin:0;
	text-align:center;
	transition:all .3s ease;
	white-space:nowrap;
	font-weight: 400;
	overflow:hidden;
	background-color: var(--color-primary);
	/* Era var(--text-secondary), que no existe: el texto del botón acababa heredando
	   y en un sitio sin overrides podía quedar oscuro sobre el fondo primario. La
	   variable de la paleta es --color-secondary. */
	color: var(--color-secondary);
	border-radius: 2rem;
	margin:  0;
	font-size: 1.1rem;
	width: auto;
	display: inline-flex;
	cursor: pointer;
}
.button.disabled{
	pointer-events: none;
	cursor: default;
	background-color: #BABABA;
	color: #ffffff;
}

.button.large-button {
	font-size: 1.4rem;
}

.button.small-button {
	font-size: .8rem;
	padding:.5rem 1rem;
}

.button.text-white:hover{
	background-color: var(--white) !important;
	color: var(--black) !important;
}
.button.text-primary:hover{
	background-color: var(--color-primary) !important;
	color: var(--color-secondary) !important;
	border-color: var(--color-primary) !important;
}
.button.bg-transparent.text-primary:hover{
	background-color: var(--color-primary) !important;
	color: var(--color-secondary) !important;
	border-color: var(--color-primary) !important;
}
.button.bg-hover-primary:hover{
	background-color: var(--color-primary) !important;
	border-color: var(--green) !important;
}



/* animated element */
.animated-element {
	opacity:0;
	-webkit-transform:translate3d(0,10px,0);
	-moz-transform:translate3d(0,10px,0);
	transform:translate3d(0,10px,0);
}

.animated-element.from-left {
	-webkit-transform:translate3d(-10px,0px,0);
	-moz-transform:translate3d(-10px,0px,0);
	transform:translate3d(-10px,0px,0);
}
.animated-element.from-right {
	-webkit-transform:translate3d(10px,0px,0);
	-moz-transform:translate3d(10px,0px,0);
	transform:translate3d(10px,0px,0);
}

.animated-element.visible {
	-webkit-animation:moveUp .6s ease forwards;
	-moz-animation:moveUp .6s ease forwards;
	-ms-animation:moveUp .6s ease forwards;
	animation:moveUp .6s ease forwards;
}

@-webkit-keyframes moveUp {
	0% {
	}
	
	100% {
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
		opacity:1;
	}
}

@-moz-keyframes moveUp {
	0% {
	}
	
	100% {
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
		opacity:1;
	}
}

@-ms-keyframes moveUp {
	0% {
	}
	
	100% {
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
		opacity:1;
	}
}

@keyframes moveUp {
	0% {
	}
	
	100% {
		-webkit-transform:translate3d(0,0,0);
		-moz-transform:translate3d(0,0,0);
		transform:translate3d(0,0,0);
		opacity:1;
	}
}

.animated-element.delay1{
	animation-delay: .2s;
}
.animated-element.delay2{
	animation-delay: .4s;
}
.animated-element.delay3{
	animation-delay: .6s;
}
.animated-element.delay4{
	animation-delay: .8s;
}
.animated-element.delay5{
	animation-delay: 1s;
}
.animated-element.delay6{
	animation-delay: 1.2s;
}

/****************************************************/
/* OWL CAROUSEL */
/****************************************************/

.owl-carousel {
	padding:0;
	margin:0;
}

.gallery-carousel.owl-carousel .owl-stage {
	display:flex;
	align-items:center;
}

.owl-carousel li {
	list-style:none;
}

.owl-dots {
	text-align:center;
	display: flex;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	justify-content: center;
	padding: 1rem;
}

.owl-dots .owl-dot {
	width: 1rem;
	height: 1rem;
	position:relative;
	border-radius:0;
	border:none;
	margin: 0 1rem 0 0;
	display:block;
	vertical-align:middle;
	border: 1px solid #fff;
	border-radius: 50%;
	transition: all .3s;
	background-color: var(--white);
	opacity: 0.3;
}

.owl-dots .owl-dot.active {
	opacity: 1;
}


.owl-nav {
	position: absolute;
	right: 0;
	bottom: 100%;
	display: flex;
	margin: 1rem 1rem;
	gap: 1rem;
}

.owl-carousel .owl-nav .owl-next,
.owl-carousel .owl-nav .owl-prev {
	top: 3px;
	width: 3.1rem;
	aspect-ratio: 1;
	border: 1px solid;
	background-image: url(img/svg/angle_left.svg);
	background-repeat:no-repeat;
	background-position:center;
	background-size: 30%;
	transition:all .3s;
	border-radius: 50%;
	font-size: 0;
	opacity: 0.4;
	transition: all .3s;
}
.owl-carousel .owl-nav > *:hover {
	opacity: 1;
}

.owl-carousel .owl-nav .owl-prev {
}

.owl-carousel .owl-nav .owl-next {
	transform: rotate(180deg);
}
.owl-carousel .owl-nav .owl-next.disabled,.owl-carousel .owl-nav .owl-prev.disabled {
	opacity:0;
	visibility:hidden;
}


@media (min-width: 992px){
	.owl-nav {
		margin: 0 0 1.5rem;
		gap: 1rem;
	}
	.owl-dots{
		bottom: 2rem;
	}
		
	
}

/****************************************************/
/* FORMS */
/****************************************************/

.form-group{
    margin: 0 0 1rem;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"],
.form-group textarea{
    -webkit-appearance: none;
    -webkit-border-radius: 0px;
    border: none;
    border: 1px solid;
    padding: 1rem 0em .4rem;
    display: block;
    width: 100%;
    outline: none;
    font-size: 1rem;
}

.form-group input::placeholder{
	color: var(--lightgray) ;
	font-size: 1.2rem;
}

/* ITEMS */

.item{
    background: var(--white);
    border-radius: 1rem;
    display: block;
}
.item .content{
    padding: 1rem;
}
.item .thumb{
}
.item .content .title{
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    line-height: 1.1;
}
.item-post .content .title{margin-bottom: 1.1em;font-weight: 600;}
.item .content .text{
    margin: 0 0 1.1rem;
    min-height: 4rem;
}


@media (min-width: 992px){
	.item .content{
		font-size: 1rem;
		padding: 1.4rem;
	}
	.item .content .title{
		font-size: 1.2rem;
	}
	.item-product .content .title{
		font-size: 1.2rem;
	}
	.item-post{
}
	.item-post .thumb{
		transition: all .7s;
		transform: scale3d(1,1,1);
	}
	.item-post:hover .thumb{
		transform: scale3d(1.3,1.3,1);
	}
}

/****************************************************/
/* COLLAPSE CONTENT */
/****************************************************/


.collapse-content{
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 500ms;
}
.collapse-content > div{
	overflow: hidden;
	font-size: 1rem;
	padding-inline: 1rem;
}
.expanded .collapse-content{
	grid-template-rows: 1fr;
}
.collapse-group .trigger.plus-trigger{
	position: relative;
	padding: 0.6rem 0 0.6rem 2.4rem;
	cursor: pointer;
	user-select: none;
	/* text-wrap: initial; */
	font-weight: bold;
	font-size: 1.3rem;
}
.collapse-group#need-filter:has(.active) .trigger{
	background-color: #f5f5f5
}
.collapse-group .trigger.plus-trigger:before,
.collapse-group .trigger.plus-trigger:after{
	position: absolute;
	content: '';
	width: 3px;
	height: 11px;
	background-color: #000000;
	left: 1rem;
	transition: all .3s;
	top: 1.1rem;
	border-radius: 1rem;
}

.collapse-group .trigger:after{
	transform: rotate(90deg);
}
.collapse-group.expanded .trigger:before{opacity: 0;transform: translate3d(0px,100%,0);}


/****************************************************/
/* THECONTENT */
/****************************************************/

.thecontent.right-placed{}


.thecontent {
}

.thecontent blockquote {
	text-align: left;
	font-size: 3.3rem;
	line-height: 1;
	margin: 1rem 0;
}
.thecontent blockquote *:last-child{
	margin: 0 
}

@media (min-width: 992px) {
	.thecontent:not(.font-small){
		font-size: 1.1rem;
	}
	.thecontent.right-placed > *:not(img):not(blockquote):not(figure){
		padding-left: 33.333%;
	}
		
	.thecontent figure + p{
		margin-top: 3rem;
	}
	.thecontent blockquote {
		left: -16%;
		font-size: 3.3rem;
		position: relative;
	}
	.wp-block-pullquote{
		padding: 1.5rem 0;
	}
}



/****************************************************/
/* HAMBURGER */
/****************************************************/


.hamburger{
	 font:inherit;
	 display:inline-block;
	 overflow:visible;
	 margin:0;
	 padding: 0;
	 cursor:pointer;
	 transition-timing-function:linear;
	 transition-duration:.15s;
	 transition-property:opacity,filter;
	 text-transform:none;
	 color:inherit;
	 border:0;
	 background-color:transparent;
	 height: 20px;
}
 .menu-active .hamburger:hover,.hamburger:hover{
	 opacity:.7
}
 .hamburger-box{
	 position:relative;
	 display:inline-block;
	 width: 2rem;
	 height: 2rem;
}
 .hamburger-inner{
	 top:50%;display:block;margin-top:-2px
}
 .hamburger-inner,.hamburger-inner:after,.hamburger-inner:before{
	 position:absolute;
	 width: 30px;
	 height: 2px;
	 transition-timing-function:ease;
	 transition-duration:.15s;
	 transition-property:transform;
	 border-radius: 0;
	 background-color: #000000;
}
 .hamburger-inner:after,.hamburger-inner:before{
	 display:block;content:""
}
 .hamburger-inner:before{
	 top:-10px
}
 .hamburger-inner:after{
	 bottom:-10px
}
 .hamburger--spring .hamburger-inner{
	 top:2px;transition:background-color 0s linear .13s
}
 .hamburger--spring .hamburger-inner:before{
	 top: 8px;
	 transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
}
 .hamburger--spring .hamburger-inner:after{
	 top: 16px;
	 transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
}
.menu-active  .hamburger--spring .hamburger-inner{
	 transition-delay:.22s;background-color:transparent!important
}
.menu-active  .hamburger--spring .hamburger-inner:before{
	 top:0;
	 transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;
	 transform:translate3d(0,10px,0) rotate(45deg);
}
.menu-active  .hamburger--spring .hamburger-inner:after{
	 top:0;
	 transition:top .2s cubic-bezier(.33333,0,.66667,.33333),transform .13s cubic-bezier(.215,.61,.355,1) .22s;
	 transform:translate3d(0,10px,0) rotate(-45deg);
}
 .hamburger--spring-r .hamburger-inner{
	 top:auto;bottom:0;transition-delay:0s;transition-timing-function:cubic-bezier(.55,.055,.675,.19);transition-duration:.13s
}
 .hamburger--spring-r .hamburger-inner:after{
	 top:-20px;transition:top .2s cubic-bezier(.33333,.66667,.66667,1) .2s,opacity 0s linear
}
 .hamburger--spring-r .hamburger-inner:before{
	 transition:top .1s cubic-bezier(.33333,.66667,.66667,1) .2s,transform .13s cubic-bezier(.55,.055,.675,.19)
}
 .hamburger--spring-r.is-active .hamburger-inner{
	 transition-delay:.22s;transition-timing-function:cubic-bezier(.215,.61,.355,1);transform:translate3d(0,-10px,0) rotate(-45deg)
}
 .hamburger--spring-r.is-active .hamburger-inner:after{
	 top:0;transition:top .2s cubic-bezier(.33333,0,.66667,.33333),opacity 0s linear .22s;opacity:0
}
 .hamburger--spring-r.is-active .hamburger-inner:before{
	 top:0;transition:top .1s cubic-bezier(.33333,0,.66667,.33333) .15s,transform .13s cubic-bezier(.215,.61,.355,1) .22s;transform:rotate(90deg)
}
 .hamburger--header{
	 margin-right:-5px;padding-right:0;padding-left:5px;cursor:default;vertical-align:middle
}
 .hamburger--header .hamburger-inner,.hamburger--header .hamburger-inner:after,.hamburger--header .hamburger-inner:before,.hamburger--header.is-active .hamburger-inner,.hamburger--header.is-active .hamburger-inner:after,.hamburger--header.is-active .hamburger-inner:before{
	 background-color:#222
}
 .hamburger--header.hamburger--elastic .hamburger-inner,.hamburger--header.hamburger--slider .hamburger-inner{
	 top:2px
}
 .hamburger--header:hover{
	 opacity:1
}
 .hamburger-wrap{
	 text-align:center
}
 .hamburger--accessible{
	 display:inline-block
}
 .hamburger--accessible .hamburger-box{
	 display:inline-block;vertical-align:middle
}
 .hamburger--accessible .hamburger-inner,.hamburger--accessible .hamburger-inner:after,.hamburger--accessible .hamburger-inner:before,.hamburger--accessible.is-active .hamburger-inner,.hamburger--accessible.is-active .hamburger-inner:after,.hamburger--accessible.is-active .hamburger-inner:before{
	 background-color:#222
}
 .hamburger-label{
	 font-weight:600;display:inline-block;margin-left:5px;vertical-align:middle;text-transform:uppercase
}
 .hamburger-label-hidden{
	 display:none
}



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

@media (min-width: 992px) {
	
	:root {
		--px: 3rem;
		--py: 4rem;
		--header-height: 6.1rem;
		--container-width: 110rem;
	}
	html{
		font-size: min(15px, 5.2vw);
	}
	body{
	}

	h1,.h1, .h-lg-1 {
		font-size: 3rem;
		line-height: 1.1;
	}
	h2,.h2 {
		font-size: 2rem;
		line-height: 1;
	}
	
	h3,.h3 {
		font-size: 1.8rem;
		line-height: 1.2;
	}
	
	h4,.h4 {
		font-size: 1.5rem;
	}
	
	h5,.h5 {
	}
	
	h6,.h6 {
	}
	.pl-lg{
		padding-left: var(--px);
	}
	.pr-lg{
		padding-right: var(--px);
	}
	.p-lg-x{
		padding-inline: var(--px);
	}
	.py{
		padding-top: var(--py);
		padding-bottom: var(--py);
	}
	.p-lg-y-extra{
		padding-top: calc(2*var(--py));
		padding-bottom: calc(2*var(--py));
	}
	.pt-lg-extra{
		padding-top: calc(2*var(--py));
	}
	.pb-lg-extra{
		padding-bottom: calc(2*var(--py));
	}
	
	.min-height-screen {
		min-height: calc(100vh - var(--header-height));
	}
	
	.text-featured {
	}
	
	.text-featured h1 {
	}
	
	/* `:where(p)` en vez de ` p`: :where() no suma especificidad, así que la regla
	   se queda en (0,1,0) en vez de (0,1,1) y deja de ganarle a cualquier elemento
	   con clase propia que lleve dentro.
	   El caso que lo destapó: el antetítulo del bloque «Imagen y texto». Su
	   .section-eyebrow pide 0.9rem (style.css) y salía a 1.6rem, casi el doble que
	   el mismo antetítulo del hero, que no va dentro de .text-featured. Ahora
	   empatan en especificidad y decide el orden de carga: style.css y los
	   css/block-*.css van después de este fichero, así que manda el componente.
	   El texto libre —los párrafos del wysiwyg, que no llevan clase— sigue
	   destacado, que es para lo que está la clase. */
	.text-featured :where(p) {
	font-size: 1.6rem;
	}
	.aspect-lg-square{
		aspect-ratio: 1 !important;
	}
	.aspect-lg-10-8{
		aspect-ratio: 10/8 !important;
	}
	.w-lg-auto{
		width: auto !important;
	}
	.w-lg-initial{
		width: initial !important;
	}
		
	.video-wrapper{
		aspect-ratio: 2.4;
	}
}


.tab-content{
	display: none;
}
.tab-content.active{
	display: block;
}

.scroll-list{
	overflow-x: scroll;
}

.custom-modal {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: scroll;
    padding-right: 15px;
    padding-left: 15px;
    padding-top: 45px;
    padding-bottom: 15px;
    z-index: 100000;
    transition: all 0.4s ease;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0,30px,0);
    background-color: rgba(0,0,0,.5)
}

.custom-modal>div {
    background: rgb(255 255 255 / 90%);
    backdrop-filter: blur(7px);
    width: 100%;
    padding: 2em;
    min-height: 0;
    position: relative;
    height: auto;
    width: 100%;
    justify-content: center;
    align-items: center;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    font-size: .8rem;
    max-width: calc(var(--grid-limit)/1.4);
}

.custom-modal.active {
    visibility: visible;
    opacity: 1;
    transform: translate3d(0,0,0)
}

.custom-modal .close {
	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;
}

.custom-modal .close:hover {
}


.custom-modal>div .title {
	
}
@media (min-width: 992px) {
}


.video-wrapper{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.video-wrapper > video{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%) scale(1);
	object-fit: cover;
}

.video-wrapper > iframe{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%,-50%);
	object-fit: cover;
	border-radius: 15px;
}
.video-wrapper:has(video).has-overlay:has(video):after{
	content: '';
	left: 0;
	top: 0;
	position: absolute;
	width: 100%;
	height: 100%;
	/*background: linear-gradient(0deg, rgba(245, 238, 236, 0.60) 0%, rgba(245, 238, 236, 0.60) 100%);*/
	background: url(../img/svg/icon_play.svg) no-repeat center center;
	background-size: 6rem;
	transition: all .6s;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.video-content .video-wrapper{
	overflow: hidden;
}
.video-content .trigger-video{
	cursor: pointer;
	transition: all .4s;
}
.video-content:not(.active):hover .trigger-video{
	transform: scale(1.05);
}
.video-content.active .video-wrapper.has-overlay:after{
	visibility: hidden;
	opacity: 0;
}


/*********** Baseline, reset styles ***********/
.single-vehicle input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}

/* Removes default focus */
.single-vehicle input[type="range"]:focus {
  outline: none;
}

/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
.single-vehicle input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--color-primary);
  border-radius: 0rem;
  height: 0.3rem;
}

/* slider thumb */
.single-vehicle input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  margin-top: -9.6px; /* Centers thumb on the track */
  background-color: var(--color-primary);
  border-radius: 50rem;
  height: 1.5rem;
  width: 1.5rem;
}

.single-vehicle input[type="range"]:focus::-webkit-slider-thumb {
  outline: 3px solid var(--color-primary);
  outline-offset: 0.125rem;
}

/*********** Firefox styles ***********/
/* slider track */
.single-vehicle input[type="range"]::-moz-range-track {
  background-color: var(--color-primary);
  border-radius: 0rem;
  height: 0.3rem;
}

/* slider thumb */
.single-vehicle input[type="range"]::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none; /*Removes extra border that FF applies*/
  border-radius: 50rem;
  height: 1.5rem;
  width: 1.5rem;
}

.single-vehicle input[type="range"]:focus::-moz-range-thumb{
  outline: 3px solid var(--color-primary);
  outline-offset: 0.125rem;
}



/****************************************************/
/* LENIS CSS */
/****************************************************/

html.lenis,html.lenis body{height:auto}.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}.lenis.lenis-stopped{overflow:clip}.lenis.lenis-smooth iframe{pointer-events:none}
/* ============================================================
   Encabezados escritos dentro de un campo de texto

   Traen jerarquía para el buscador y el lector de pantalla, y NADA de estilo:
   heredan el del elemento que los contiene, sea el titular de una sección o un
   cuerpo de texto. Así el SEO deja de depender del diseño.

   La pone cdc_texto() desde PHP. Los encabezados escritos en un campo wysiwyg
   no la llevan y conservan su estilo, que ahí sí es prosa de verdad.

   `display: inline` evita que rompa la línea o descoloque la caja flex que lo
   contiene, y `color: inherit` es obligatorio: el color del titular cambia con
   las clases text-* de la sección, así que ningún color fijo valdría.
   ============================================================ */

.cdc-plano {
	display: inline;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-wrap: inherit;
	overflow-wrap: inherit;
}

/* ============================================================
   Hueco de un campo vacío, SOLO en el editor de bloques

   Lo pinta cdc_hueco() desde PHP y nunca llega al front: sin él, un bloque
   recién insertado no tiene ningún elemento en el lienzo y no hay dónde
   pinchar para empezar a escribir.
   ============================================================ */

.cdc-hueco {
	margin: 0.5rem 0;
	padding: 0.75rem 1rem;
	border: 1px dashed currentColor;
	border-radius: 0.25rem;
	/* Un velo propio: el hueco cae a menudo sobre la foto del hero, y con solo
	   la opacidad se perdía contra la imagen. */
	background: rgba(127, 127, 127, 0.22);
	opacity: 0.8;
	font-size: 0.875rem;
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}
.cdc-hueco:hover {
	opacity: 1;
	background: rgba(127, 127, 127, 0.35);
}