/* =========================================================================
 * V4 — OVERRIDES PROPIOS (NO los toca el maquetador)
 * =========================================================================
 *
 * Este archivo es NUESTRO, no del maquetador. Vive en la RAÍZ de
 * assets/themes/V4/ (hermano de css/ js/ img/) a propósito: el workflow de
 * sincronización del maquetador re-copia/espeja `webcrestanevada/css` →
 * `assets/themes/V4/css`, así que cualquier parche dentro de `css/` (incl.
 * `crestanevada-scss/main.css`) se PIERDE en la siguiente entrega. Aquí no.
 *
 * Se carga en themes/V4/header.php DESPUÉS de main.css y grid.css, por lo que
 * sus reglas ganan a igualdad de especificidad.
 *
 * REGLA: cada override lleva un comentario con el PORQUÉ. Si algún día el
 * maquetador corrige el origen, se borra el bloque correspondiente de aquí.
 * ------------------------------------------------------------------------- */

/* --- Botones renderizados como <a> -------------------------------------- *
 * El maquetador usa <button class="btn-*"> y nosotros, por lógica (enlaces a
 * URLs reales), usamos <a class="btn-*">. Las clases .btn-red/.btn-white/
 * .btn-green/.btn-black aplican `transform: skewX(-5deg)` y `padding`, pero
 * las TRANSFORMACIONES CSS NO se aplican a elementos inline, y el <a> es inline
 * por defecto (el <button> es inline-block). Resultado: el <a> sale sin sesgar
 * y con el padding mal. Forzando inline-block, el <a> se ve idéntico al <button>.
 * (Ej.: "Solicitar más información" en /conocenos/preguntas-frecuentes-...)    */
a.btn-red,
a.btn-white,
a.btn-green,
a.btn-black {
	display: inline-block;
	text-align: center;
}

/* --- Input con borde (clase reutilizable) -------------------------------- *
 * El reset global de main.css pone `border:0` a los <input>, así que por defecto
 * no tienen borde. Esta clase da el "look caja" estándar (borde #e7e7e7 + radius
 * + padding + ancho completo) a cualquier <input>/<textarea> que la lleve, para
 * poder reutilizarla en otros formularios. NO tocamos la `.input` del maquetador
 * (buscador), que usa otro borde y sin radius.
 * El maquetador además no incluyó campo mensaje en .contact, por eso el <textarea>
 * tampoco venía estilado; aquí queda cubierto por esta misma clase.             */
.input-bordered {
	width: 100%;
	padding: 1rem;
	border: 1px solid #e7e7e7;
	border-radius: 8px;
	font-family: "Exo", sans-serif;
	font-size: 1.6rem;
}

textarea.input-bordered {
	min-height: 80px;
	resize: vertical;
}

/* --- Validación de campos (réplica de la lógica .required/.error de v3) ---- *
 * revisar_formu() (JS inline en pages/contacto.php) añade .error al wrapper
 * .required cuando el campo es inválido. Aquí lo pintamos en rojo y mostramos
 * el .mensaje_error. Equivale al form_style.css de v3.                         */
.contact .mensaje_error {
	display: none;
	color: #E62439;
	font-size: 1.3rem;
	font-style: italic;
}

.contact .required.error .mensaje_error {
	display: block;
}

.contact .required.error input,
.contact .required.error textarea {
	border: 1px solid #E62439;
	box-shadow: 0 0 4px rgba(230, 36, 57, 0.5);
}

.contact .required.error label {
	color: #E62439;
}

/* --- Vídeo responsivo 16:9 ----------------------------------------------- *
 * El maquetador no definió .video-responsive, pero las vistas V4 que embeben
 * YouTube la usan (noticias/blog.php y ofertastrabajo/ofertaDetail.php). Sin esto
 * el <iframe> sale con tamaño fijo/0. Wrapper clásico de ratio fijo.            */
.video-responsive {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	overflow: hidden;
}

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

/* --- Iconos de etiqueta DGT en el filtro (/coches-segunda-mano) ----------- *
 * El panel de filtros está dentro de <main>, y main.css aplica el reset
 * `main img { max-width: 100% }`. Cada icono de etiqueta es un <img> dentro de
 * un <span> inline-block (shrink-to-fit): el 100% se resuelve contra el ancho
 * del span, que a su vez depende de la imagen → dependencia circular y la <img>
 * colapsa a 0×0 (no se veía ningún icono). Le damos tamaño fijo y quitamos el
 * max-width para romper el ciclo. (Combustible/Marca usan texto, no les afecta;
 * item-car pinta el icono con content:url() en CSS, por eso sí se ve allí.)    */
.filtro-etiquetas .filter-checkbox span img {
	width: 24px;
	height: 24px;
	max-width: none;
	vertical-align: middle;
}

/* --- Widget de tasación AutoUncle (/compramos-tu-coche) ------------------- *
 * main.css aplica `iframe { aspect-ratio:16/9; min-height:432px }` a TODOS los
 * iframes. AutoUncle (inline-form) inyecta su propio <iframe> y le va fijando la
 * altura por JS vía postMessage según crece el formulario; esa regla global lo
 * aplastaría a un alto fijo y cortaría las opciones. Aquí la anulamos para dejar
 * que AutoUncle controle su altura.                                            */
.au-trade-in-form-inline-auto iframe {
	aspect-ratio: auto;
	min-height: 0;
	width: 100%;
}

/* --- .contact sobre fondo oscuro/rojo (modificador .form-on-dark) ---------- *
 * En .contact el estado de error se pinta en rojo (#E62439): invisible sobre el
 * banner rojo de landings tipo /crestadays. Esta clase modificadora repinta el
 * error en claro (texto + borde blancos) para que se lea. Mayor especificidad
 * (.contact.form-on-dark = 2 clases) que las reglas base, así que gana sin
 * !important. Reutilizable en cualquier .contact que vaya sobre fondo oscuro.   */
.contact.form-on-dark .mensaje_error {
	color: #fff;
	font-weight: 700;
}

.contact.form-on-dark .required.error label {
	color: #fff;
}

.contact.form-on-dark .required.error input,
.contact.form-on-dark .required.error textarea {
	border: 1px solid #fff;
	box-shadow: 0 0 4px rgba(255, 255, 255, 0.7);
}

.contact.form-on-dark .required.error input[type="checkbox"] {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

/* Aviso de resultado del envío (éxito / error de red). Clase compartida por
 * los formularios .contact (contacto y la inscripción a ofertas de trabajo). */
.contact .form-feedback {
	margin-top: 1.5rem;
	padding: 1rem 1.5rem;
	border-radius: 8px;
	font-size: 1.5rem;
}

.contact .form-feedback.success {
	background: #e6f5e1;
	color: #2f7a12;
}

.contact .form-feedback.error {
	background: #fde8ea;
	color: #E62439;
}

/* --- Textos SEO de pie del listado de coches (.seo-pie) -------------------- *
 * Estos textos se cargan desde las vistas v3 y coches/parts/textos_seo.php les
 * QUITA todas las clases/estilos (preg_replace), así que llegan como etiquetas
 * "desnudas". Como `html,body { font-size:62.5% }` (1rem=10px) y sólo p/span/h*
 * tienen 1.6rem explícito, las <ul>/<li> (y cualquier texto suelto) heredan los
 * 10px del body y salen minúsculos. Reponemos aquí el tamaño y el aspecto de
 * lista, y el color rojo de los enlaces (en v3 era la clase .rojo, ya eliminada).
 * Todo acotado a .seo-pie para no afectar a otros bloques.                      */
.seo-pie ul,
.seo-pie ol,
.seo-pie li {
	font-size: 1.6rem;
	line-height: 1.5;
}

.seo-pie ul,
.seo-pie ol {
	list-style: disc;
	padding-left: 2rem;
}

.seo-pie li {
	margin-bottom: 0.5rem;
}

/* Enlaces del bloque SEO en rojo de marca (equivalente a la clase .rojo de v3). */
.seo-pie a {
	color: #E62439;
}

.seo-pie a:hover {
	text-decoration: underline;
}

/* --- Parrilla de imágenes SEO (tarjetas "vehiculo_shop" de v3) ------------- *
 * Algunos textos SEO incluyen una rejilla de tarjetas:
 *   <div>(contenedor) > <article> > <a> > <div>(imagen) > <div> > <img>
 *                                        > <div>(datos) > <p><span>nombre</span></p>
 * En v3 el contenedor era flex (.flex_wrap_centrado) y cada <article> era
 * .vehiculo_shop (33% + sombra). El strip de textos_seo.php elimina esas clases,
 * así que las imágenes (width:100%) salían apiladas a tamaño completo. Reponemos
 * la rejilla anclando por <article> (único dentro de .seo-pie) y por el contenedor
 * con :has(> article). Réplica de .vehiculo_shop / .vehiculo_shop_imagen de v3.   */
.seo-pie div:has(> article) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.6rem;
	margin-top: 3rem;
}

.seo-pie article {
	width: calc(33.333% - 1.6rem);
	background: #fff;
	box-shadow: 0 0 29px 0 rgba(0, 0, 0, 0.16);
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}

.seo-pie article a {
	display: block;
	color: inherit;
	/* anula el rojo de .seo-pie a para las tarjetas */
}

.seo-pie article a:hover {
	text-decoration: none;
}

.seo-pie article img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.39, 0.58, 0.57, 1);
}

.seo-pie article:hover img {
	transform: scale(1.1);
}

.seo-pie article p {
	text-align: center;
	padding: 1rem;
	margin: 0;
}

.seo-pie article p span {
	font-size: 1.4rem;
	color: #555;
}

@media screen and (max-width: 767px) {
	.seo-pie article {
		width: 100%;
	}

	.seo-pie article img {
		height: 200px;
	}
}

/* --- Validación de los forms de la ficha de vehículo ----------------------- *
 * #form-info-vehiculo (coches/parts/sidebar_resumen.php) y #form-te-llamamos
 * (coches/parts/contacto.php) replican el patrón .required/.error del form de
 * contacto: el JS marca .error en cada .required inválido y aquí lo pintamos
 * (campo en rojo, label/checkbox en rojo y se muestra el .mensaje_error).
 * Acotado a esos ids para no tocar otros formularios.                          */
#form-info-vehiculo .required,
#form-te-llamamos .required {
	position: relative;
}

#form-info-vehiculo .required>input[type="text"],
#form-info-vehiculo .required>input[type="tel"],
#form-te-llamamos .required>input[type="tel"] {
	width: 100%;
}

#form-info-vehiculo .mensaje_error,
#form-te-llamamos .mensaje_error {
	display: none;
	color: #E62439;
	font-size: 1.3rem;
	font-style: italic;
}

#form-info-vehiculo .required.error .mensaje_error,
#form-te-llamamos .required.error .mensaje_error {
	display: block;
}

#form-info-vehiculo .required.error input,
#form-info-vehiculo .required.error textarea,
#form-te-llamamos .required.error input,
#form-te-llamamos .required.error textarea {
	border: 1px solid #E62439;
	box-shadow: 0 0 4px rgba(230, 36, 57, 0.5);
}

#form-info-vehiculo .required.error input[type="checkbox"],
#form-te-llamamos .required.error input[type="checkbox"] {
	outline: 2px solid #E62439;
	outline-offset: 1px;
}

#form-info-vehiculo .required.error label,
#form-te-llamamos .required.error label {
	color: #E62439;
}

/* Carruseles de iconos de la home (tipos / categorías / modelos): el <a> del maquetador
   es display:inline y su caja no cubre el icono+texto, dejando "huecos" dentro del <li>
   donde el click no cae en ningún enlace (parece que "no hace nada"). Lo pasamos a bloque
   para que toda la tarjeta sea clicable. (El click final lo resuelve además el workaround
   de pointer-capture de bxSlider en themes/V4/footer.php.) */
.carousel-types a,
.carousel-categories a,
.carousel-models a {
	display: block;
}

/* Tarjetas de coche (.selection / .carousel_selection: home "coches destacados" y "similares"
   de la ficha). La <img> de .card-image es position:absolute, así que el <a> que la envuelve
   colapsaba a 0x0 y la FOTO no navegaba al pulsarla (sólo el título y "Ver detalles"). Hacemos
   que el <a> cubra el área de la imagen (la <img> sigue posicionándose igual dentro de él). */
.selection .card-image {
	position: relative;
}

.selection .card-image>a {
	display: block;
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* REGRESIÓN del maquetador (entrega "Nueva maquetación", 2026-06-06): al refactorizar
   `.card-actions` a `.card-actions button { margin-left:12px }` perdió el `text-align:right`
   que tenía antes, dejando los botones fav/share alineados a la IZQUIERDA. La regla sigue
   (muerta) en `css/main.css` legacy, que nadie carga. La restauramos aquí tal cual estaba.
   Si el maquetador la repone en su SCSS, este bloque se puede borrar. */
.card-actions {
	text-align: right;
	margin-right: 5px;
	margin-bottom: 5px;
}

/* Reseñas de Google en la home (home/google_reviews.php). El maquetador dejó un
   placeholder (imagen) donde iba un slider de opiniones; aquí pintamos las REALES
   (Places API) en un slider bxSlider. Si el maquetador entrega su propio diseño de
   reseñas, este bloque se puede borrar. */
#google-reviews .carousel_reviews,
#google-reviews .carousel_reviews>li {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Antes de que bxSlider envuelva el <ul>, ocultamos las slides extra para que no
   aparezcan apiladas un instante (FOUC). bxSlider las saca de .carousel_reviews. */
#google-reviews .carousel_reviews>li:not(:first-child) {
	display: none;
}

#google-reviews .bx-viewport .carousel_reviews>li {
	display: block;
}

#google-reviews .gr-card {
	background: #fff;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 180px;
}

/* Las flechas del slider traen fondo blanco (#fff) de main.css y sobre el rojo del
   bloque se ven raras; aquí (y solo aquí) las dejamos con fondo transparente. */
#google-reviews .bx-prev,
#google-reviews .bx-next {
	background-color: transparent;
}

#google-reviews .gr-stars {
	color: #fbbc04;
	font-size: 18px;
	letter-spacing: 2px;
	line-height: 1;
}

#google-reviews .gr-text {
	color: #333;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#google-reviews .gr-author {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
}

#google-reviews .gr-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

#google-reviews .gr-author span {
	color: #555;
	font-size: 13px;
}

/* Marca de agua del logo al hover en el LISTADO de coches (item-car dentro de .selection).
   El maquetador la centra a top:7% y a veces tapa el coche → la subimos y la desplazamos un
   poco a la izquierda. Scope .listado-coches para no afectar al carrusel de destacados de la
   home. Ajusta top/translateX a gusto. */
.listado-coches li:hover .logo-white {
	top: 4%;
}

/* Variantes responsive sin hover (el maquetador las pone a top:7% en crestanevada-scss/main.css):
   en táctil el logo se muestra cuando la tarjeta es visible/activa. Las igualamos a 4%. */
@media screen and (max-width: 768px) {
	.listado-coches .item.is-visible .logo-white {
		top: 4%;
	}
}

@media screen and (max-width: 560px) {
	.listado-coches .item[aria-hidden=false] .logo-white {
		top: 4%;
	}
}

/* Desplazamiento a la izquierda SOLO en escritorio (hover). En móvil/táctil (≤768px)
   se queda centrado como en la maqueta original. */
@media screen and (min-width: 769px) {
	.listado-coches .logo-white img {
		transform: translateX(-10%);
	}
}

/* Logo de marca de agua para MOTOS (item-car añade .logo-white--moto cuando es moto).
   Preparado para afinar tamaño/posición del logo de motos cuando se suba el real a
   assets/themes/V4/img-propias/logo-white-moto.png. */
.logo-white--moto img {
	/* width: 38.66%; */
}

/* Fila de datos del item-car (.data): acabado (.motor) · año (.year) · km (.km).
   El maquetador pone el ellipsis en el DIV contenedor, pero el texto va en el <p> hijo,
   y text-overflow no recorta bloques hijos → cuando el acabado es muy largo se monta
   encima del año. Aquí:
     - El .motor recorta con "…" de verdad y cede espacio (flex:1, min-width:0).
     - .year y .km no encogen (flex-shrink:0), así no los pisa el acabado.
     - Más aire entre año y km para que no se peguen. */
.card-summary .data .justify-start {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.card-summary .data .motor {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.card-summary .data .year,
.card-summary .data .justify-end {
	flex: 0 0 auto;
}

.card-summary .year {
	margin-right: 18px;
}

.card-summary .km {
	margin-left: 6px;
}

/* Icono de combustible GAS en el item-car. El maquetador sólo trae electric/diesel/gasolina
   (crestanevada-scss/_cards.scss); item-car ahora pinta data-type="gas" para coches de gas.
   El SVG está en css/assets/icono-gas.svg (lo subió el usuario). */
p[data-type="gas"]::before {
	content: url(css/assets/icono-gas.svg);
	margin-right: 5px;
}

/* Blog (.posts): la caja de imagen del post es un <a class="cont-img relative hidden">.
   El sistema de ratio fijo (.cont-img:after { padding-top:57.5% } + overflow:hidden) sólo
   funciona si el <a> es de bloque, pero el reset lo deja inline → con imágenes muy verticales
   la altura natural se desborda y tapa el título. Lo forzamos a bloque con ratio y recorte,
   y hacemos que la imagen cubra el hueco (object-fit:cover) en vez de crecer a su alto real.
   Acotado a .posts .post para no tocar los item-car de coches ni otros usos de .cont-img. */
.posts .post .cont-img {
	display: block;
	width: 100%;
	overflow: hidden;
}

.posts .post .cont-img .img-cover {
	width: 100%;
	height: 100%;
	min-height: 0;
	max-width: none;
	object-fit: cover;
	object-position: center;
}

/* --- Icono propio para Híbrido (item-car) -------------------------------- *
 * El maquetador sólo trae iconos de combustible para electric/diesel/gasolina
 * en css/style.css (p[data-type=...]::before). Los híbridos reutilizaban el de
 * "electric" por no tener uno propio. Aquí les damos su SVG, que vive en
 * img-propias/ (raíz, NO en css/assets/) para que el sync del maquetador no lo
 * pise. El slug 'hibrido' lo emite themes/V4/coches/item-car.php.
 * Si el maquetador algún día añade el icono en su SCSS, borrar este bloque.    */
p[data-type="hibrido"]::before {
	content: url(img-propias/icono-hibrido.svg);
	margin-right: 5px;
}

/* ============================================================================
 * Ficha V4 — configurador de precio (PIVE + transferencia).
 * Parciales: themes/V4/coches/parts/precio_coche|financiacion|moto.php
 * Sin font-size propio el <label> heredaba 10px (html { font-size: 62.5% }),
 * por eso el texto de los checkbox salía diminuto. Y dejamos que el texto
 * largo ("Transferencia, preparación y gest. administrativas") haga wrap en
 * su columna en lugar de empujar al precio.
 * ========================================================================== */
#precio-configurador .flex {
	align-items: flex-start;
}

#precio-configurador .justify-start {
	flex: 1 1 auto;
	min-width: 0;
	padding-right: 12px;
}

#precio-configurador .justify-end {
	flex: 0 0 auto;
	white-space: nowrap;
}

#precio-configurador label,
#precio-configurador .justify-start p {
	font-size: var(--fs-base);
	line-height: 1.4;
	color: var(--color-black);
}

#precio-configurador label {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

#precio-configurador input[type="checkbox"] {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
}

/* Icono "?" con los requisitos de cada Plan Pive (portado de v3 .icon-interroga):
 * tooltip rojo que aparece al pasar por encima o, en táctil, al pulsar (.active). */
#precio-configurador .justify-end {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#precio-configurador .icon-interroga {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border: solid 2px #eb3838;
	border-radius: 100%;
	font-size: 12px;
	line-height: 1;
	color: #eb3838;
	cursor: pointer;
}

#precio-configurador .icon-interroga .information {
	display: none;
	position: absolute;
	left: 0;
	bottom: 24px;
	width: 220px;
	max-width: 70vw;
	padding: 10px 14px;
	border-radius: 4px;
	background: linear-gradient(to right, #920000, #eb3838 97%);
	color: #fff;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	white-space: normal;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	z-index: 10;
}

#precio-configurador .icon-interroga .information::after {
	content: " ";
	position: absolute;
	left: 0;
	bottom: -8px;
	width: 0;
	height: 0;
	border-left: solid 10px #c11d1d;
	border-bottom: solid 10px transparent;
}

#precio-configurador .icon-interroga:hover .information,
#precio-configurador .icon-interroga .information.active {
	display: block;
}

/* ============================================================================
 * "Nuestros clientes" (conocenos/nuestros_clientes.php) — centrar verticalmente
 * las fotos de las entregas. La .img-cover va en position:absolute sin top/left,
 * así que la foto se anclaba arriba y recortaba por abajo dentro de la caja de
 * ratio fijo (.cont-img:after { padding-top:57.5% }). La centramos en su caja.
 * Acotado a .galeria_clientes para no afectar a otros usos de .cont-img.
 * ========================================================================== */
.galeria_clientes .cont-img .img-cover {
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	object-position: center;
}

/* ============================================================================
 * Suavizar (no quitar) la máscara de degradado de las imágenes de coche.
 * La del tema (crestanevada-scss/main.css) funde demasiado: ~8% arriba, ~15%
 * abajo y ~6% a los lados, e intersecta ambos degradados (esquinas muy
 * comidas). Aquí la dejamos con bandas mucho más estrechas (~2-3%), así el
 * desvanecido sigue existiendo pero apenas ocupa borde. Mismos selectores; al
 * cargar este fichero después, gana sin !important.
 * ========================================================================== */
.selection .card-image img {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%),
		linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0%, black 5%, black 95%, transparent 100%), linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
	mask-composite: intersect;
}

.gallery-car .card-image .card-img-exterior {
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 2%, black 97%, transparent 100%),
		linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(to bottom, transparent 0%, black 2%, black 97%, transparent 100%),
		linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
	mask-composite: intersect;
}

/* ============================================================================
 * Galería ficha vehículo: que la foto del coche se ajuste SIEMPRE dentro de la
 * caja 4:3 sin recortar ni deformar. En main.css la imagen tiene height:70% fijo,
 * así que una foto muy ancha desborda y overflow:hidden la recorta. Aquí dejamos
 * que la proporción mande: las anchas las limita max-width, las altas/normales
 * el max-height (se mantiene el 70% de antes). Si hace falta, ajustar el 70%.
 * ========================================================================== */
.gallery-car .card-image .card-img-exterior {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 70%;
}
/* ============================================================================
 * Banner de consentimiento de cookies (tema V4)
 * ----------------------------------------------------------------------------
 * Estilos del partial themes/V4/parts/cookies_banner.php (portado desde el
 * cookieBanner de v3, mismo comportamiento pero maquetado a V4). Va aquí y no
 * en el SCSS del maquetador porque el banner es NUESTRO (v3 no lo entregó el
 * maquetador). Modal centrado con backdrop, tipografía Exo y botones .btn-*.
 * ========================================================================== */
.cnet-cookies {
	position: fixed;
	inset: 0;
	/* Por encima de TODO: el #header de V4 usa z-index 99999999999999 (y el sticky
	 * móvil #head_cont_sticky 9999999999). Los navegadores recortan el z-index al
	 * máximo de int32 (2147483647), así que igualamos ese máximo; al ir el partial
	 * al final del <body>, en caso de empate el banner gana por orden de pintado. */
	z-index: 2147483647;
	background: rgba(0, 0, 0, 0.55);
	padding: 1.5rem;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	align-items: center;
	justify-content: center;
	font-family: "Exo", sans-serif;
}
.cnet-cookies.none { display: none; }
.cnet-cookies.flex { display: flex; }

.cnet-cookies__card {
	background: #ffffff;
	width: 100%;
	max-width: 720px;
	margin: auto;
	border-radius: 6px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.30);
	padding: 2.4rem;
	text-align: left;
}

.cnet-cookies__title {
	color: #E62439;
	margin: 0 0 1rem;
}

.cnet-cookies__text {
	color: #383B41;
	font-size: 1.5rem;
	line-height: 1.55;
	margin: 0 0 1.6rem;
}

.cnet-cookies__link {
	color: #E62439;
	text-decoration: underline;
	white-space: nowrap;
}
.cnet-cookies__link:hover { color: #b81b2c; }

/* Botonera */
.cnet-cookies__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.6rem;
}
.cnet-cookies__actions.none { display: none; }
.cnet-cookies__actions .btn-red,
.cnet-cookies__actions .btn-white,
.cnet-cookies__actions .btn-black {
	flex: 1 1 auto;
	text-align: center;
}
.cnet-cookies__actions .btn-white {
	border: 1px solid #E62439;
	color: #E62439;
}

/* "Configurar": enlace discreto, sin skew, alineado con el resto */
.cnet-cookies__config-toggle {
	background: none;
	border: 0;
	color: #636363;
	font-family: "Exo", sans-serif;
	font-size: 1.5rem;
	font-style: italic;
	text-decoration: underline;
	cursor: pointer;
	padding: 1em 0.5em;
	flex: 0 0 auto;
}
.cnet-cookies__config-toggle:hover { color: #000000; }

/* Panel de configuración detallada */
.cnet-cookies__config {
	margin-top: 1.6rem;
	border-top: 1px solid #D9D9D9;
	padding-top: 1.6rem;
}
.cnet-cookies__config.none { display: none; }

.cnet-cookies__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-top: 1.2rem;
}
.cnet-cookies__row-label {
	color: #E62439;
	font-size: 1.5rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.cnet-cookies__row-label input[type="checkbox"] {
	width: 1.6rem;
	height: 1.6rem;
	accent-color: #E62439;
	cursor: pointer;
}
.cnet-cookies__row-note {
	color: #636363;
	font-size: 1.2rem;
}
.cnet-cookies__row-desc {
	color: #636363;
	font-size: 1.35rem;
	line-height: 1.5;
	margin: 0.4rem 0 0;
}
.cnet-cookies__row-desc--clickable { cursor: pointer; }

/* --- Equipo de sede con UN SOLO trabajador (coches/parts/sede_landing.php) ---- *
 * El equipo se pinta como carrusel bxSlider (.carousel_equipo, lo arranca main.js).
 * Con una sola slide, bxSlider igualmente genera las flechas de navegación (posición
 * absoluta) que acaban montándose sobre el título "Nuestro equipo". Cuando sólo hay un
 * trabajador, la vista NO usa .carousel_equipo (así main.js no inicializa slider ni
 * flechas) sino .equipo-single, que estilamos aquí como una tarjeta estática del mismo
 * ancho que una slide (slideWidth:200 en main.js), sin viñeta de lista.                */
#equipo .equipo-single {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: flex-start;
	text-align: left;
}

#equipo .equipo-single > li {
	width: 200px;
	max-width: 100%;
	margin: 0;
	text-align: left;
}

#equipo .equipo-single > li .full-width {
	width: 100%;
}

/* Móvil: botones a ancho completo y algo menos de padding */
@media (max-width: 640px) {
	.cnet-cookies__card { padding: 1.8rem; }
	.cnet-cookies__actions .btn-red,
	.cnet-cookies__actions .btn-white,
	.cnet-cookies__actions .btn-black,
	.cnet-cookies__config-toggle {
		flex: 1 1 100%;
	}
}

/* ============================================================================
 * Concesionarios de la home (home/concesionarios.php) — SIEMPRE 3 por fila.
 * ----------------------------------------------------------------------------
 * El maquetador da `.dealership { flex: 1 0 32% }` (crestanevada-scss/
 * _dealerships.scss). El `flex-grow: 1` hace que las tarjetas CREZCAN para
 * rellenar la fila: con 1 centro sale a pantalla completa, con 2 a media, y
 * el "sobrante" de una fila incompleta (p.ej. la 4ª tarjeta) se estira a todo
 * el ancho. Aquí anulamos el grow y fijamos el ancho a un tercio real
 * (descontando los 2 gaps de 20px), de modo que todas las tarjetas midan
 * igual —como "3 por fila"— sin importar cuántas haya; las filas incompletas
 * quedan alineadas a la izquierda con su tamaño normal.
 * Se mantiene el min-width del maquetador para que en pantallas estrechas
 * bajen a 2/1 columnas (responsive). Si el maquetador corrige el origen,
 * borrar este bloque.
 *
 * Dimensionado por cantidad de tarjetas VISIBLES en la provincia seleccionada:
 *   - 1 centro  → tamaño de "2 por fila" (media anchura, no pantalla completa).
 *   - 2 centros → 2 por fila.
 *   - 3 o más   → 3 por fila (regla base).
 * OJO: no se pueden usar quantity queries (:only-child / :nth-last-child) porque
 * el filtro por provincia oculta tarjetas con display:none pero siguen en el DOM,
 * así que contarían de más. En su lugar, parts/sedes_filter.php escribe en el
 * <ul.dealerships> un data-visible con el nº de tarjetas realmente visibles y
 * aquí dimensionamos según ese valor.
 * ========================================================================== */
.dealerships .dealership {
	flex: 0 1 calc((100% - 40px) / 3);
}

/* 1 o 2 centros visibles → tamaño de 2 por fila (1 gap de 20px). */
.dealerships[data-visible="1"] .dealership,
.dealerships[data-visible="2"] .dealership {
	flex-basis: calc((100% - 20px) / 2);
}