/* Catalogo de unidades. Diginova INV, 31-jul-2026.
   1) La foto se ajusta completa dentro del cuadro, sin recortar ni deformar.
   2) Linea de version debajo del titulo.

   El nombre lleva numero porque el CDN de Hostinger cachea los assets una
   semana e ignora el ?ver=: para publicar un cambio se sube mm-catalogo-14.css
   y se actualiza el mu-plugin multimarcas-catalogo.php. */

/* ---------- 1. Foto completa ----------
   Motors traia object-fit:cover con alto fijo, que recorta el frente y la cola
   del vehiculo y ademas estira las fotos chicas. Con contain la imagen se ve
   completa y conserva su proporcion; el espacio sobrante queda blanco, igual
   que el fondo de las fotos de catalogo. */
/* Especificidad alta a proposito: el style.css del child trae reglas con
   object-fit:cover !important y hay que ganarles. La fuente ya quedo corregida;
   esto cubre el periodo en que el CDN de Hostinger siga sirviendo la version
   anterior de style.css, que cachea una semana e ignora el ?ver=. */
.listing-list-loop.stm-isotope-listing-item .image .image-inner img.img-responsive,
.stm-directory-grid-loop.stm-isotope-listing-item .image .image-inner img.img-responsive,
.stm-isotope-listing-item .image .image-inner img.img-responsive,
.stm-directory-grid-loop .image-inner img.img-responsive,
.listing-list-loop .image .image-inner img {
	object-fit: contain !important;
	object-position: center center !important;
	width: 100% !important;
	height: 100% !important;
	background: #fff;
}

/* El contenedor tiene el alto fijo y recorta lo que sobresale: se le da fondo
   blanco para que el aire alrededor del vehiculo no se vea como un hueco. */
.stm-isotope-listing-item .image,
.stm-isotope-listing-item .image-inner,
.listing-list-loop .image,
.listing-list-loop .image-inner {
	background: #fff;
}

/* Un poco mas de alto para que el vehiculo complete se vea con aire, como en
   las paginas de las marcas, sin que la tarjeta crezca de mas. */
.listing-list-loop .image-inner,
.listing-list-loop .image-inner img {
	height: 200px !important;
}

.listing-list-loop .image {
	height: auto !important;
	padding-bottom: 6px;
}

/* ---------- 2. Version ---------- */
.mm-version {
	display: block;
	margin-top: 6px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.35;
	font-weight: 400;
	color: #6b6b6b;
	letter-spacing: 0;
	text-transform: none;
}

.mm-version span {
	color: #b8945a;
	font-weight: 600;
}

/* En la ficha de la unidad el titulo es mas grande: la version acompana. */
.single-car-title .mm-version,
.listing-title .mm-version {
	font-size: 15px;
	margin-top: 8px;
}

@media (max-width: 767px) {
	.listing-list-loop .image-inner,
	.listing-list-loop .image-inner img {
		height: 180px !important;
	}
	.mm-version {
		font-size: 13px;
	}
}


/* ---------- 3. Leyenda de precios ----------
   En /nuevos/ la plantilla es de ancho completo, asi que la leyenda salia
   pegada al borde izquierdo de la pantalla y al ras del menu. Se le da el
   mismo ancho y centrado que el contenido del inventario (1270 px) y aire
   arriba y abajo. */
.mm-price-legend {
	box-sizing: border-box;
	max-width: 1270px;
	margin: 30px auto 22px !important;
	padding: 14px 20px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #5a5a5a;
	background: #f6f6f4;
	border-left: 3px solid #c8a96e;
	border-radius: 4px;
}

/* Dentro de la ficha de la unidad ya hay un contenedor con margenes propios:
   ahi la leyenda solo necesita separacion vertical. */
.single-listings .mm-price-legend,
.listing-content .mm-price-legend {
	max-width: none;
	margin: 22px 0 !important;
}

@media (max-width: 1340px) {
	.mm-price-legend {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}
}

@media (max-width: 767px) {
	.mm-price-legend {
		margin: 20px 16px !important;
		padding: 12px 15px;
		font-size: 13px;
	}
}


/* ---------- 4. Ficha tecnica de la unidad ----------
   Datos que ya teniamos de las paginas de las marcas (motor completo,
   potencia) y que la tabla lateral de Motors no muestra. */
.mm-ficha {
	margin: 28px 0 8px;
	padding-top: 22px;
	border-top: 1px solid #e6e2da;
}

.mm-ficha-titulo {
	margin: 0 0 16px;
	font-size: 19px;
	line-height: 1.25;
	font-weight: 600;
	color: #1a1a1a;
	letter-spacing: .2px;
}

.mm-ficha-lista {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 34px;
	margin: 0;
}

.mm-ficha-item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid #efece6;
}

.mm-ficha-item dt {
	flex: 0 0 auto;
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #8a8578;
}

.mm-ficha-item dd {
	flex: 1 1 auto;
	margin: 0;
	text-align: right;
	font-size: 14.5px;
	line-height: 1.4;
	font-weight: 600;
	color: #1a1a1a;
	word-break: break-word;
}

@media (max-width: 767px) {
	.mm-ficha-lista { grid-template-columns: 1fr; gap: 0; }
	.mm-ficha-titulo { font-size: 17px; }
	.mm-ficha-item dd { font-size: 14px; }
}


/* ---------- 5. Boton de prueba de manejo por WhatsApp ----------
   Motors pinta de dorado el texto y el icono al pasar el cursor. Como el fondo
   tambien se vuelve dorado, el texto desaparecia: hay que forzar el blanco en
   el enlace Y en sus hijos (el span del titulo y el icono). */
.mm-btn-wa {
	border-color: #c8a96e !important;
}

.mm-btn-wa:hover,
.mm-btn-wa:focus {
	background: #c8a96e !important;
}

.mm-btn-wa:hover,
.mm-btn-wa:hover span,
.mm-btn-wa:hover i,
.mm-btn-wa:hover [class*="stm-item-title"],
.mm-btn-wa:focus,
.mm-btn-wa:focus span,
.mm-btn-wa:focus i {
	color: #fff !important;
}


/* ---------- 6. Carrusel del pie de la ficha ----------
   Antes cortaba el titulo a 35 caracteres con PHP y cuatro versiones del mismo
   modelo salian identicas. Ahora va el nombre completo (recortado por CSS a dos
   lineas) y la version debajo. */
.mm-carrusel-titulo {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.32;
	min-height: 2.64em;
}

.mm-carrusel-version {
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.35;
	font-weight: 400;
	color: #6b6b6b;
	text-transform: none;
	letter-spacing: 0;
}

.mm-carrusel-version span {
	color: #b8945a;
	font-weight: 600;
}


/* ---------- 7. Ficha de la unidad en dos columnas ----------
   Izquierda: foto, galeria y descripcion. Derecha: precio y ficha tecnica.
   Antes la informacion salia dos veces (tabla de Motors arriba y ficha tecnica
   abajo) y en movil se repetia igual, una debajo de otra. */

/* El vendedor sale como "diginovadesign / Vendedor Privado": es el autor
   interno del contenido, no informacion para el cliente. */
.stm_single_car_side .stm-listing-car-dealer-info {
	display: none !important;
}

.mm-ficha-side {
	margin-top: 14px;
	padding: 18px 16px 6px;
	background: #fff;
	border: 1px solid #eceae4;
	border-radius: 6px;
}

.mm-ficha-side .mm-ficha-titulo {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: #1a1a1a;
}

/* En la columna estrecha va a una sola columna, etiqueta arriba y dato abajo,
   para que no se aprieten valores largos como el motor. */
.mm-ficha-lista-side {
	display: block;
	margin: 0;
}

.mm-ficha-lista-side .mm-ficha-item {
	display: block;
	padding: 9px 0;
	border-bottom: 1px solid #f1efe9;
}

.mm-ficha-lista-side .mm-ficha-item:last-child {
	border-bottom: 0;
}

.mm-ficha-lista-side dt {
	margin-bottom: 2px;
	font-size: 11px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #8a8578;
	font-weight: 600;
}

.mm-ficha-lista-side dd {
	margin: 0;
	text-align: left;
	font-size: 14.5px;
	line-height: 1.35;
	font-weight: 600;
	color: #1a1a1a;
	word-break: break-word;
}

/* Movil: la columna derecha pasa debajo de la foto, ya sin duplicados. */
@media (max-width: 991px) {
	.mm-ficha-side {
		margin-top: 18px;
		padding: 16px 14px 4px;
	}
	.mm-ficha-lista-side dd { font-size: 14px; }
}


/* En movil la columna derecha se apilaba ARRIBA: el precio y la ficha salian
   antes que el titulo y la foto. Con flex + order se invierte el orden sin
   tocar el HTML del plugin. */
@media (max-width: 991px) {
	.stm_single_car_row {
		display: flex !important;
		flex-direction: column;
	}
	.stm_single_car_row .stm_single_car_content { order: 1; }
	.stm_single_car_row .stm_single_car_side { order: 2; }
}


/* ---------- 8. Foto principal de la ficha ----------
   Motors la mostraba con object-fit:cover dentro de una caja mas cuadrada que
   la foto: en las imagenes panoramicas (el Audi A1 mide 969x352 y la caja
   900x518) recortaba los lados y solo se veia el centro del auto, sin frente
   ni cola. Con contain se ve completa y sin deformar. */
.stm-single-image img,
.stm_light_gallery img,
.stm-big-car-gallery img,
.single-car-gallery img {
	object-fit: contain !important;
	object-position: center center !important;
	background: #fff;
}

/* La caja se adapta a la proporcion de la foto en vez de imponer una altura
   fija, asi no queda una franja blanca enorme arriba y abajo. */
.stm-big-car-gallery .stm_light_gallery,
.stm-single-image {
	background: #fff;
}


/* ---------- 9. Dos vistas del vehiculo lado a lado ----------
   Las dos primeras fotos en cuadricula; si la unidad solo tiene una, ocupa
   todo el ancho para que el bloque mida siempre igual y ninguna ficha quede
   con un hueco. */
.mm-fotos-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-items: stretch;
}

.mm-fotos-grid.mm-una-foto {
	grid-template-columns: 1fr;
}

/* Motors deja los items del carrusel en visibility:hidden, opacity:0 y
   position:absolute (solo muestra el activo). Como aqui es una cuadricula y no
   un slider, hay que devolverlos a la normalidad o solo se veria la primera. */
.mm-fotos-grid .stm-single-image {
	position: relative !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	left: auto !important;
	top: auto !important;
	margin: 0;
	background: #fff;
	border: 1px solid #f0ede7;
	border-radius: 6px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}

.mm-fotos-grid.mm-una-foto .stm-single-image {
	aspect-ratio: 16 / 9;
}

.mm-fotos-grid .stm-single-image a,
.mm-fotos-grid .stm-single-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.mm-fotos-grid .stm-single-image img {
	object-fit: contain !important;
	object-position: center center !important;
	background: #fff;
}

/* Enlaces tecnicos para que el visor liste el resto de fotos: no se ven. */
.mm-foto-oculta {
	display: none !important;
}

/* Miniaturas: fila simple, sin carrusel. */
.mm-miniaturas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

/* Mismo caso que la cuadricula: Motors deja ocultas todas menos la primera. */
.mm-miniaturas .stm-single-image {
	position: relative !important;
	visibility: visible !important;
	opacity: 1 !important;
	transform: none !important;
	left: auto !important;
	top: auto !important;
	flex: 0 0 calc((100% - 40px) / 5);
	max-width: 150px;
	margin: 0;
	background: #fff;
	border: 1px solid #f0ede7;
	border-radius: 5px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	cursor: pointer;
	transition: border-color .2s;
}

.mm-miniaturas .stm-single-image:hover {
	border-color: #c8a96e;
}

.mm-miniaturas .stm-single-image img {
	width: 100%;
	height: 100%;
	object-fit: contain !important;
	background: #fff;
}

@media (max-width: 767px) {
	.mm-fotos-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.mm-fotos-grid .stm-single-image,
	.mm-fotos-grid.mm-una-foto .stm-single-image {
		aspect-ratio: 16 / 10;
	}
	.mm-miniaturas .stm-single-image {
		flex: 0 0 calc((100% - 20px) / 3);
	}
}

/* ---------- Carrusel "Resultados de la busqueda" del pie de cada ficha ----------
   Diginova INV, 4-ago-2026. Aqui las fotos salian cortadas: Motors pone
   object-fit:cover en una caja de 264x150 y las fotos del catalogo miden
   969x352, asi que se comian el frente y la cola del vehiculo, justo lo que ya
   se habia corregido arriba en el catalogo. Mismo criterio: la unidad completa,
   con su proporcion, y el aire sobrante en blanco. */
/* El selector de Motors es este, con el envoltorio .stm-isearch-...: sin ese
   prefijo la regla pierde por especificidad aunque lleve !important. */
.stm-isearch-results-carousel-wrap .stm-template-front-loop .image img,
.stm-isearch-results-carousel-wrap .stm-template-front-loop.current .image img,
.media-carousel-item .image img,
.stm-template-front-loop .image img {
	object-fit: contain !important;
	object-position: center center !important;
	width: 100% !important;
	height: 100% !important;
	background: #fff;
}

.stm-isearch-results-carousel-wrap .stm-template-front-loop .image,
.stm-isearch-results-carousel-wrap .stm-template-front-loop .image-inner,
.media-carousel-item .image,
.stm-template-front-loop .image {
	background: #fff;
}

/* Motors le pone max-height:150px a la imagen; con contain eso deja la unidad
   diminuta dentro de una caja de 200. Se iguala el alto para que aproveche
   todo el cuadro. */
.stm-isearch-results-carousel-wrap .stm-template-front-loop .image img {
	max-height: none !important;
	max-width: 100% !important;
}