/**
 * Inventario Toyocentro.
 *
 * Todo vive bajo .tc-scope (rejilla y filtros) o .tc-ficha, y usa variables
 * propias, para no heredar ni pisar estilos del theme Novaride ni de Elementor.
 */

/* Las variables viven en .tc-scope, no en un contenedor comun: en Elementor
   la rejilla y los filtros son widgets separados y cada uno debe poder
   redefinirlas por su cuenta desde el panel de estilo. */
.tc-scope,
.tc-ficha {
	--tc-rojo: #e30613;
	--tc-texto: #101114;
	--tc-suave: #616161;
	--tc-borde: #e0e0e0;
	--tc-fondo: #f7f7f7;
	--tc-radio: 10px;

	color: var(--tc-texto);
}

.tc-scope *,
.tc-scope *::before,
.tc-scope *::after {
	box-sizing: border-box;
}

/* Reset contra el theme.
   Novaride estiliza <button> y los encabezados a su manera: convierte los
   titulos de los acordeones en pildoras rojas y pone en mayusculas los h2.
   Sus reglas ganan por especificidad, asi que aqui hay que ser explicito.
   El !important queda acotado a elementos propios del plugin. */
.tc-scope button,
.tc-ficha button {
	font-family: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
	box-shadow: none;
	text-shadow: none;
	min-height: 0;
	width: auto;
}

/* Novaride pone en mayusculas sostenidas todos los h1-h6. */
.tc-scope .tc-filtro__titulo {
	background: none !important;
	color: inherit !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Novaride decora los <li> de las listas con una vinieta roja hecha con
   ::before. En las listas del plugin (opciones de filtro, colores, chips) esa
   vinieta aparece suelta y sin sentido, asi que se anula. */
.tc-scope ul,
.tc-scope ol,
.tc-ficha ul,
.tc-ficha ol {
	list-style: none;
}

.tc-scope ul > li::before,
.tc-scope ul > li::marker,
.tc-ficha ul > li::before,
.tc-ficha ul > li::marker {
	content: none !important;
	display: none !important;
}

/* Titulos de seccion: solo la inicial en mayuscula. */
.tc-specs__titulo,
.tc-similares__titulo,
.tc-carrusel__titulo {
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Disposicion de dos columnas: solo la usa el shortcode. Con los widgets de
   Elementor, las columnas las define el editor. */
.tc-inventario {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: 32px;
	align-items: start;
}

@media (max-width: 900px) {
	.tc-inventario {
		grid-template-columns: 1fr;
	}
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Barra lateral ------------------------------------------------------ */

.tc-filtros {
	background: #fff;
	border: 1px solid var(--tc-borde);
	border-radius: var(--tc-radio);
	overflow: hidden;
}

.tc-filtro {
	padding: 18px 20px;
	border-bottom: 1px solid var(--tc-borde);
}

.tc-filtro:last-of-type {
	border-bottom: 0;
}

/* El titulo ya no es un boton: los grupos van siempre abiertos. */
.tc-filtro__titulo {
	margin: 0 0 12px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--tc-texto);
}

.tc-filtro__panel {
	display: block;
}

/* Las listas largas se desplazan dentro de su grupo, en vez de estirar la
   columna: con ocho filtros abiertos, si no, la barra mide metros. */
.tc-opciones {
	margin: 0;
	padding: 0;
	list-style: none;
	max-height: 300px;
	overflow-y: auto;
	/* Sitio para la barra de scroll, para que no tape el contador. */
	padding-right: 8px;
	/* Al llegar al final de la lista, la rueda NO sigue moviendo la pagina.
	   Sin esto, buscar un modelo acaba lanzandote pagina abajo sin querer. */
	overscroll-behavior: contain;
	scrollbar-width: auto;
	scrollbar-color: #c4c7cc transparent;
}

/* Barra ancha y siempre visible. La fina de 6px habia que cazarla con el
   raton, y en una lista de veinte modelos eso se hace muchas veces. */
.tc-opciones::-webkit-scrollbar {
	width: 11px;
}

.tc-opciones::-webkit-scrollbar-track {
	background: #f1f1f2;
	border-radius: 6px;
}

.tc-opciones::-webkit-scrollbar-thumb {
	background: #c4c7cc;
	border: 2px solid #f1f1f2;
	border-radius: 6px;
}

.tc-opciones::-webkit-scrollbar-thumb:hover {
	background: var(--tc-suave);
}

/* Novaride decora los <li> con un punto rojo hecho con ::before, y list-style
   no lo quita porque no es un marcador de lista de verdad. */
.tc-opciones li {
	margin: 0;
	padding: 0;
}

.tc-opciones li::before,
.tc-opciones li::after {
	content: none !important;
	display: none !important;
}

.tc-opciones li::marker {
	content: "";
}

.tc-opcion {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 0;
	cursor: pointer;
	font-size: 14px;
	color: var(--tc-suave);
}

.tc-opcion:hover {
	color: var(--tc-texto);
}

.tc-opcion.is-activo {
	color: var(--tc-texto);
	font-weight: 600;
}

/* Una opcion sin resultados se apaga pero no se quita: si desapareciera, la
   lista daria saltos bajo el cursor en cada clic. */
.tc-opcion.is-vacio {
	opacity: 0.4;
	cursor: not-allowed;
}

.tc-opcion input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--tc-rojo);
	flex-shrink: 0;
	cursor: inherit;
}

.tc-opcion__muestra {
	width: 16px;
	height: 16px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 50%;
	background: var(--tc-swatch, #d9d9d9);
	flex-shrink: 0;
}

/* Una linea por opcion. "Fortuner SW4 SRX 4.0 6AT 4X4" no cabe en la columna
   y partirlo en dos desalineaba toda la lista; el nombre entero esta en el
   title, asi que pasar el raton lo enseña. */
.tc-opcion__nombre {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tc-opcion {
	font-size: 13.5px;
}

.tc-opcion__n {
	color: #9aa0a6;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* Va prefijado con .tc-scope a proposito: el reset de arriba (.tc-scope button)
   tiene mas peso que una sola clase y se comia el ancho y el tipo de letra. */
.tc-scope .tc-limpiar {
	display: block;
	width: 100%;
	margin: 0;
	padding: 13px 10px !important;
	border: 0 !important;
	border-top: 1px solid var(--tc-borde) !important;
	border-radius: 0 !important;
	background: #fafafa !important;
	color: var(--tc-suave) !important;
	font-size: 13px;
	font-weight: 600;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer;
}

.tc-scope .tc-limpiar:hover {
	background: #fff !important;
	color: var(--tc-rojo) !important;
}

/* --- Slider de precio --------------------------------------------------- */

.tc-precio__valores {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
	color: var(--tc-suave);
	margin-bottom: 18px;
}

.tc-slider {
	position: relative;
	height: 24px;
}

.tc-slider__pista,
.tc-slider__activo {
	position: absolute;
	top: 50%;
	height: 4px;
	border-radius: 2px;
	transform: translateY(-50%);
}

.tc-slider__pista {
	left: 0;
	right: 0;
	background: #d6d6d6;
}

.tc-slider__activo {
	background: var(--tc-rojo);
}

.tc-slider__input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 24px;
	margin: 0;
	background: none;
	appearance: none;
	-webkit-appearance: none;
	/* La pista no debe capturar el puntero o el pulgar de abajo queda muerto. */
	pointer-events: none;
}

.tc-slider__input::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: var(--tc-rojo);
	cursor: grab;
	pointer-events: auto;
}

.tc-slider__input::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: var(--tc-rojo);
	cursor: grab;
	pointer-events: auto;
}

/* --- Buscador ----------------------------------------------------------- */

.tc-buscador {
	position: relative;
	max-width: 400px;
	margin-bottom: 24px;
}

.tc-buscador input {
	width: 100%;
	padding: 10px 16px 10px 42px;
	border: 1px solid var(--tc-borde);
	border-radius: 999px;
	font-size: 15px;
	background: #fff;
}

.tc-buscador input:focus {
	outline: none;
	border-color: var(--tc-rojo);
}

.tc-buscador__icono {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	fill: none;
	stroke: var(--tc-suave);
	stroke-width: 2;
	stroke-linecap: round;
	pointer-events: none;
}

.tc-resultados {
	margin: 0 0 16px;
	font-size: 14px;
	color: var(--tc-suave);
}

.tc-resultados__n {
	font-weight: 700;
	color: var(--tc-texto);
}

/* --- Rejilla ------------------------------------------------------------ */

.tc-rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
	transition: opacity 0.15s;
}

.tc-rejilla[aria-busy="true"] {
	opacity: 0.45;
	pointer-events: none;
}

.tc-vacio {
	grid-column: 1 / -1;
	padding: 48px 0;
	text-align: center;
	color: var(--tc-suave);
}

/* --- Tarjeta ------------------------------------------------------------ */

/* Una sola superficie blanca con borde, igual que la barra de filtros.
   Antes la foto iba sobre blanco y el cuerpo sobre gris: sobre una pagina
   blanca, la mitad de arriba desaparecia y la tarjeta parecia empezar a la
   altura del texto. */
.tc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--tc-borde);
	border-radius: var(--tc-radio);
	overflow: hidden;
	background: #fff;
	transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}

.tc-card:hover {
	transform: translateY(-3px);
	border-color: #d5d7db;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

/* Gris muy suave bajo la foto: separa la imagen del texto sin partir la
   tarjeta en dos, y los recortes sobre fondo blanco se recortan mejor. */
.tc-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: #fafafa;
	border-bottom: 1px solid var(--tc-borde);
}

/* De vuelta a "contain".
   Probamos "cover" para que todas las fotos se vieran del mismo tamanio, pero
   recortaba los vehiculos altos: al Land Cruiser le cortaba techo y ruedas.
   Un coche cortado es peor que uno un poco mas pequenio, asi que se prioriza
   ver el vehiculo entero.
   La caja sigue midiendo lo mismo en todas las tarjetas; lo que varia es
   cuanto la llena cada foto, y eso viene del recorte original. */
.tc-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	/* Un poco de aire para que ninguna toque los bordes de la caja. */
	padding: 6px;
}

.tc-card__img--vacia {
	display: grid;
	place-items: center;
}

.tc-card__img--vacia svg {
	width: 56px;
	fill: none;
	stroke: #c9ccd1;
	stroke-width: 2;
	stroke-linecap: round;
}

.tc-card__cuerpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
	/* Separacion minima antes del boton: margin-top:auto lo pega al fondo,
	   pero en la tarjeta mas alta no dejaria aire ninguno. */
	row-gap: 4px;
}

/* Anio y estado comparten linea, encima del titulo.
   Antes el badge iba al lado del titulo y le robaba el ancho: con estados
   largos como "In Transit to Pto Cabello" el titulo se partia en una palabra
   por linea y la tarjeta se estiraba hasta abajo. */
.tc-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
	min-height: 18px;
}

.tc-card__anio {
	font-size: 13px;
	color: var(--tc-suave);
}

.tc-card__encabezado {
	/* Empuja precio y boton al pie para que las tarjetas queden alineadas
	   aunque los titulos ocupen distinto numero de lineas. */
	margin-bottom: auto;
}

.tc-card__titulo {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	/* Sin esto, un nombre largo se parte por cualquier sitio. */
	overflow-wrap: break-word;
	hyphens: none;
}

.tc-card__titulo a {
	color: inherit;
	text-decoration: none;
}

.tc-card__estado {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tc-texto);
	/* Si aun asi no cabe, se recorta con puntos suspensivos antes que romper
	   la maquetacion de la tarjeta. */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tc-card__estado svg {
	flex-shrink: 0;
}

.tc-card__estado svg {
	width: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.tc-card__precio {
	margin: 18px 0 0;
	font-size: 21px;
	font-weight: 700;
}

/* "Consultar precio" ocupa el sitio del precio pero no compite con el: mas
   pequenio y en gris, para que no se lea como una cifra. */
.tc-card__precio--consultar {
	font-size: 16px;
	color: var(--tc-suave);
}

.tc-card__chevron {
	color: var(--tc-rojo);
}

.tc-card__nota {
	margin: 2px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--tc-suave);
}

.tc-card__stock,
.tc-card__llegada {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--tc-suave);
}

/* margin-top:auto empuja el boton al fondo de la tarjeta. Las que traen
   "2 colores disponibles" son mas altas, y sin esto los botones quedaban a
   distintas alturas en la misma fila. */
.tc-card__boton {
	display: inline-block;
	align-self: flex-start;
	margin-top: auto;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--tc-rojo);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
}

.tc-card__boton:hover {
	background: #b80015;
	color: #fff;
}

/* --- Paginacion --------------------------------------------------------- */

.tc-paginacion {
	margin-top: 32px;
	text-align: center;
}

.tc-mas {
	padding: 12px 30px !important;
	border: 1px solid var(--tc-rojo) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--tc-rojo) !important;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	cursor: pointer;
}

.tc-mas:hover {
	background: var(--tc-rojo) !important;
	color: #fff !important;
}

.tc-mas[hidden] {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.tc-inventario * {
		transition: none !important;
	}
}

/* =======================================================================
   Ficha individual  ->  /vehiculo/<slug>
   ======================================================================= */

.tc-ficha {
	--tc-rojo: #e30613;
	--tc-texto: #101114;
	--tc-suave: #616161;
	--tc-borde: #e0e0e0;
	--tc-fondo: #f7f7f7;
	--tc-radio: 12px;

	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 16px 72px;
	color: var(--tc-texto);
}

.tc-ficha *,
.tc-ficha *::before,
.tc-ficha *::after {
	box-sizing: border-box;
}

/* --- Migas con VIN y SKU ------------------------------------------------ */

.tc-migas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	padding-bottom: 18px;
	margin-bottom: 28px;
	border-bottom: 1px solid var(--tc-borde);
	font-size: 13px;
}

.tc-migas__volver {
	color: var(--tc-texto);
	font-weight: 600;
	text-decoration: none;
}

.tc-migas__volver:hover {
	color: var(--tc-rojo);
}

.tc-migas__dato {
	color: var(--tc-suave);
	/* El VIN son 17 caracteres sin espacios. */
	word-break: break-all;
}

.tc-migas__dato span {
	margin-right: 4px;
	font-weight: 700;
	color: var(--tc-texto);
}

/* --- Dos columnas: datos a la izquierda, galeria a la derecha ----------- */

.tc-ficha__principal {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 48px;
	align-items: start;
}

@media (max-width: 900px) {
	.tc-ficha__principal {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	/* En movil la foto va primero: es lo que engancha. */
	.tc-ficha__datos {
		order: 2;
	}

	.tc-ficha .tc-galeria {
		order: 1;
	}
}

/* Un nombre de modelo completo ocupa tres lineas a 42px y se come la pagina.
   A 32px cabe en dos y deja respirar al precio, que es lo que se va a mirar. */
.tc-ficha__titulo {
	margin: 0 0 14px;
	font-size: clamp( 24px, 2.6vw, 32px );
	font-weight: 700;
	line-height: 1.2;
}

.tc-ficha__estado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 26px;
	font-size: 13px;
}

.tc-ficha__chip {
	padding: 5px 12px;
	border-radius: 999px;
	background: #15171a;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tc-ficha__llegada,
.tc-ficha__stock {
	color: var(--tc-suave);
}

.tc-ficha__llegada.is-firme {
	color: var(--tc-texto);
	font-weight: 600;
}

/* --- Caja de precio y CTA, en linea como en la referencia --------------- */

/* align-items: center y no stretch. Con stretch, el boton se estiraba hasta
   igualar la altura de la caja del precio y salia un ladrillo rojo enorme. */
.tc-ficha__compra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}

.tc-ficha__caja-precio {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 14px 22px;
	border: 1px solid var(--tc-borde);
	border-radius: 10px;
	background: #fff;
}

.tc-ficha__precio {
	font-size: clamp( 26px, 3vw, 34px );
	font-weight: 800;
	line-height: 1.1;
	color: var(--tc-texto);
}

/* Sin precio la caja mantiene su sitio, pero el texto baja de tamanio: a 34px
   "Consultar precio" grita mas que cualquier cifra de la pagina. */
.tc-ficha__caja-precio.is-consultar {
	background: #fafafa;
}

.tc-ficha__caja-precio.is-consultar .tc-ficha__precio {
	font-size: clamp( 18px, 2vw, 22px );
	font-weight: 700;
	color: var(--tc-suave);
}

.tc-ficha__precio-nota {
	margin-top: 2px;
	font-size: 11px;
	color: var(--tc-suave);
}

.tc-ficha__cta {
	display: inline-flex;
	align-items: center;
	/* Altura propia, marcada por su relleno: no la hereda de la fila. */
	padding: 14px 26px;
	border-radius: 8px;
	background: var(--tc-rojo);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s;
}

.tc-ficha__cta:hover {
	background: #b80015;
	color: #fff;
}

.tc-ficha__nota {
	margin: 0 0 28px;
	font-size: 12px;
	font-style: italic;
	color: var(--tc-suave);
}

/* --- Tira de datos con icono ------------------------------------------- */

.tc-rapidos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 16px 24px;
	margin: 0 0 30px;
	padding: 22px 0;
	border-top: 1px solid var(--tc-borde);
	border-bottom: 1px solid var(--tc-borde);
	list-style: none;
}

.tc-rapidos li {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.tc-rapidos__icono svg {
	display: block;
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--tc-suave);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tc-rapidos__muestra {
	width: 22px;
	height: 22px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 50%;
	background: var(--tc-swatch, #d9d9d9);
	flex-shrink: 0;
}

.tc-rapidos__texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
	font-size: 14px;
}

.tc-rapidos__texto strong {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tc-suave);
}

/* --- Colores disponibles ----------------------------------------------- */

.tc-ficha__colores {
	margin: 0 0 26px;
}

.tc-ficha__colores-titulo {
	display: block;
	margin-bottom: 10px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--tc-suave);
}

.tc-ficha__enlace {
	margin: 0;
	font-size: 14px;
}

.tc-ficha__enlace a {
	color: var(--tc-suave);
}

/* --- Galeria ----------------------------------------------------------- */

.tc-galeria__escenario {
	position: relative;
	background: var(--tc-fondo);
	border-radius: var(--tc-radio);
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.tc-galeria__pieza {
	position: absolute;
	inset: 0;
	display: none;
	margin: 0;
	place-items: center;
}

.tc-galeria__pieza.is-activa {
	display: grid;
}

.tc-galeria__pieza img,
.tc-galeria__pieza video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tc-galeria__flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	cursor: pointer;
	transform: translateY(-50%);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
}

.tc-galeria__flecha:hover {
	background: #fff;
}

.tc-galeria__flecha svg {
	width: 17px;
	fill: none;
	stroke: var(--tc-texto);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tc-galeria__flecha--izq {
	left: 12px;
}

.tc-galeria__flecha--der {
	right: 12px;
}

.tc-galeria__contador {
	position: absolute;
	right: 14px;
	bottom: 12px;
	margin: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

.tc-galeria__vacia {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	background: var(--tc-fondo);
	border-radius: var(--tc-radio);
}

.tc-galeria__vacia svg {
	width: 96px;
	fill: none;
	stroke: #c9ccd1;
	stroke-width: 2;
	stroke-linecap: round;
}

.tc-galeria__miniaturas {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	overflow-x: auto;
	scrollbar-width: none;
}

.tc-galeria__miniaturas::-webkit-scrollbar {
	display: none;
}

.tc-miniatura {
	flex: 0 0 auto;
	width: 82px;
	height: 62px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	background: var(--tc-fondo);
	cursor: pointer;
	overflow: hidden;
}

.tc-miniatura img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tc-miniatura.is-activa {
	border-color: var(--tc-rojo);
}

.tc-miniatura:focus-visible {
	outline: 2px solid var(--tc-rojo);
	outline-offset: 2px;
}

/* --- Especificaciones --------------------------------------------------- */

.tc-specs {
	margin-top: 56px;
	padding: 32px;
	background: var(--tc-fondo);
	border-radius: var(--tc-radio);
}

.tc-specs__titulo,
.tc-similares__titulo {
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 12px;
	/* Sin text-transform: en mayusculas sostenidas un titulo largo como
	   "Otros vehiculos que te pueden interesar" se lee mucho peor. */
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0;
}

.tc-specs__titulo::after,
.tc-similares__titulo::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 64px;
	height: 3px;
	background: var(--tc-rojo);
}

.tc-specs__lista {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0 40px;
	margin: 0;
}

.tc-specs__fila {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--tc-borde);
}

.tc-specs__fila dt {
	color: var(--tc-suave);
	font-size: 14px;
}

.tc-specs__fila dd {
	margin: 0;
	font-weight: 600;
	font-size: 14px;
	text-align: right;
	word-break: break-all;
}

.tc-specs__texto {
	margin-top: 28px;
	line-height: 1.75;
}

/* --- Vehiculos similares ------------------------------------------------ */

.tc-similares {
	margin-top: 56px;
}

.tc-similares .tc-rejilla {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

/* =======================================================================
   Carrusel del home
   ======================================================================= */

.tc-carrusel {
	/* 1320 y no 1200: con 1200 quedaba mucho margen a los lados. El widget
	   de Elementor puede cambiarlo en "Ancho maximo del carrusel". */
	max-width: 1320px;
	margin: 0 auto;
}

.tc-carrusel__titulo {
	margin: 0 0 12px;
	font-size: clamp( 28px, 4vw, 46px );
	font-weight: 400;
	line-height: 1.15;
	text-align: center;
}

.tc-carrusel__subtitulo {
	max-width: 680px;
	margin: 0 auto 32px;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	color: var(--tc-suave);
}

/* --- Pestañas por modelo ------------------------------------------------ */

.tc-pestanas {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 8px;
	margin-bottom: 28px;
	overflow-x: auto;
	/* En movil la tira de modelos no cabe: se desliza en vez de romperse. */
	scrollbar-width: none;
}

.tc-pestanas::-webkit-scrollbar {
	display: none;
}

.tc-pestana {
	position: relative;
	flex: 0 0 auto;
	padding: 10px 14px;
	border: 0;
	background: none;
	color: var(--tc-suave);
	font-size: 15px;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s;
}

.tc-pestana:hover {
	color: var(--tc-texto);
}

.tc-pestana.is-activa {
	color: var(--tc-texto);
	font-weight: 600;
}

.tc-pestana.is-activa::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 14px;
	right: 14px;
	height: 2px;
	background: var(--tc-rojo);
}

/* --- Pista -------------------------------------------------------------- */

.tc-carrusel__marco {
	position: relative;
}

.tc-pista {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 4px;
	padding-bottom: 8px;
	scrollbar-width: none;
	transition: opacity 0.15s;
}

.tc-pista::-webkit-scrollbar {
	display: none;
}

.tc-pista[aria-busy="true"] {
	opacity: 0.45;
	pointer-events: none;
}

.tc-flecha {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--tc-borde);
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	transform: translateY(-50%);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.tc-flecha:hover {
	border-color: var(--tc-rojo);
}

.tc-flecha svg {
	width: 18px;
	fill: none;
	stroke: var(--tc-texto);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tc-flecha--izq {
	left: -18px;
}

.tc-flecha--der {
	right: -18px;
}

.tc-flecha[hidden] {
	display: none;
}

/* --- Tarjeta del carrusel ----------------------------------------------- */

.tc-mini {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 0 0 400px;
	padding: 16px;
	border-radius: var(--tc-radio);
	background: var(--tc-fondo);
	scroll-snap-align: start;
}

.tc-mini__media {
	flex: 0 0 38%;
	aspect-ratio: 4 / 3;
	display: block;
}

.tc-mini__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.tc-mini__img--vacia {
	display: grid;
	place-items: center;
}

.tc-mini__img--vacia svg {
	width: 48px;
	fill: none;
	stroke: #c9ccd1;
	stroke-width: 2;
	stroke-linecap: round;
}

.tc-mini__cuerpo {
	flex: 1;
	min-width: 0;
}

.tc-mini__titulo {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.tc-mini__titulo a {
	color: inherit;
	text-decoration: none;
}

.tc-mini__precio {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: var(--tc-rojo);
}

.tc-mini__nota {
	margin: 2px 0 14px;
	font-size: 12px;
	color: var(--tc-suave);
}

.tc-mini__boton {
	display: inline-block;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--tc-rojo);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.tc-mini__boton:hover {
	background: #b80015;
	color: #fff;
}

/* --- Pie ---------------------------------------------------------------- */

.tc-carrusel__pie {
	margin-top: 36px;
	text-align: center;
}

.tc-carrusel__cta {
	display: inline-block;
	padding: 15px 34px;
	border: 1px solid var(--tc-texto);
	border-radius: 999px;
	color: var(--tc-texto);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.tc-carrusel__cta:hover {
	background: var(--tc-texto);
	color: #fff;
}

@media (max-width: 640px) {
	.tc-mini {
		flex: 0 0 85vw;
	}

	.tc-flecha {
		display: none;
	}

	.tc-pestanas {
		justify-content: flex-start;
	}
}

/* --- Campos Min/Max del precio ------------------------------------------ */

.tc-precio__campos {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
}

/* Las dos cajas reparten el ancho a partes iguales: el <label> que las envuelve
   se encogeria al contenido y el input quedaria diminuto. */
.tc-precio__campos label {
	flex: 1;
	min-width: 0;
}

.tc-precio__campo {
	width: 100%;
	min-width: 0;
	padding: 8px 10px;
	border: 1px solid var(--tc-borde);
	border-radius: 6px;
	background: #fff;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	/* Las flechitas del input number roban ancho y no aportan nada aqui. */
	-moz-appearance: textfield;
}

.tc-precio__campo::-webkit-outer-spin-button,
.tc-precio__campo::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tc-precio__campo:focus {
	outline: none;
	border-color: var(--tc-rojo);
}

.tc-precio__guion {
	color: var(--tc-suave);
	flex-shrink: 0;
}

/* --- Chips de filtros activos ------------------------------------------- */

.tc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tc-chips:not(:empty) {
	margin-bottom: 18px;
}

.tc-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--tc-borde);
	border-radius: 999px;
	background: #fff;
	color: var(--tc-texto);
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s;
}

.tc-chip:hover {
	border-color: var(--tc-rojo);
}

.tc-chip__x {
	color: var(--tc-suave);
	font-size: 16px;
	line-height: 1;
}

.tc-chip:hover .tc-chip__x {
	color: var(--tc-rojo);
}

.tc-chip--limpiar {
	border-color: transparent;
	background: transparent;
	color: var(--tc-rojo);
	text-decoration: underline;
}

/* --- Cabecera: contador y orden ----------------------------------------- */

.tc-cabecera {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}

.tc-cabecera .tc-resultados {
	margin: 0;
}

.tc-orden__select {
	padding: 9px 14px;
	border: 1px solid var(--tc-borde);
	border-radius: 8px;
	background: #fff;
	color: var(--tc-texto);
	font-size: 14px;
	cursor: pointer;
	max-width: 100%;
}

.tc-orden__select:focus {
	outline: none;
	border-color: var(--tc-rojo);
}

/* --- SKU y VIN en la tarjeta -------------------------------------------- */

.tc-card__ids {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	line-height: 1.6;
	color: var(--tc-suave);
	/* El VIN son 17 caracteres sin espacios: sin esto desborda la tarjeta. */
	word-break: break-all;
}

.tc-card__ids span {
	display: inline-block;
	min-width: 30px;
	font-weight: 700;
	color: var(--tc-texto);
}

/* --- Colores disponibles ------------------------------------------------ */

.tc-card__colores {
	margin-top: 14px;
}

.tc-card__colores-titulo {
	display: block;
	margin-bottom: 7px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--tc-suave);
}

.tc-card__colores ul,
.tc-ficha__colores ul {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* El <span> es la variante agrupada, donde la muestra solo informa. */
.tc-card__colores a,
.tc-card__colores li > span,
.tc-ficha__colores a {
	display: block;
	width: 20px;
	height: 20px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 50%;
	background: var(--tc-swatch, #d9d9d9);
	transition: transform 0.12s, box-shadow 0.12s;
}

.tc-card__colores a:hover,
.tc-ficha__colores a:hover {
	transform: scale(1.18);
}

/* El color de la unidad que se esta viendo va anillado. */
.tc-ficha__colores a.is-actual {
	/* Anillo fino: a 4px la muestra parecia el doble de grande. */
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--tc-rojo);
	cursor: default;
}

/* Una fecha de llegada confirmada se distingue de la estimada: es una promesa
   firme al cliente, no un rango orientativo. */
.tc-card__llegada.is-firme,
.tc-ficha__llegada.is-firme {
	color: var(--tc-texto);
	font-weight: 600;
}

/* --- Enlace a la ficha tecnica ------------------------------------------ */

.tc-ficha__ficha-tecnica {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 1px solid var(--tc-borde);
	border-radius: 8px;
	color: var(--tc-rojo);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s, background 0.15s;
}

.tc-ficha__ficha-tecnica:hover {
	border-color: var(--tc-rojo);
	background: rgba(226, 0, 26, 0.05);
	color: var(--tc-rojo);
}

.tc-ficha__icono-doc {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* -----------------------------------------------------------------------
   Listado por defecto de /inventario/
   Solo el ancho y el aire: lo de dentro ya lo resuelve .tc-inventario.
   ----------------------------------------------------------------------- */

.tc-archivo {
	max-width: 1320px;
	margin: 0 auto;
	padding: 32px 16px 56px;
}

.tc-archivo__cab { margin-bottom: 24px; }

.tc-archivo__titulo {
	margin: 0;
	font-size: 30px;
	line-height: 1.2;
	/* Novaride pone todos los titulos en mayusculas sostenidas. */
	text-transform: none !important;
}

/* Selector de color en modo consolidado -----------------------------------
   Deja de ser "disponible tambien en" y pasa a ser un control: se marca mas
   el elegido y se enseña su nombre al lado del titulo del bloque. */

.tc-ficha__colores.is-conmutable .tc-ficha__colores-titulo {
	display: block;
	margin-bottom: 8px;
}

.tc-ficha__colores.is-conmutable .tc-ficha__color-elegido {
	color: var(--tc-texto);
	font-weight: 600;
}

.tc-ficha__colores.is-conmutable a {
	cursor: pointer;
	transition: box-shadow .15s, transform .15s;
}

.tc-ficha__colores.is-conmutable a:hover {
	transform: translateY(-1px);
}

.tc-ficha__colores.is-conmutable a.is-actual {
	/* Anillo fino: a 4px la muestra parecia el doble de grande. */
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--tc-rojo);
}

/* El circulo del color que se esta viendo en la tarjeta. */
.tc-card__colores a.is-actual {
	/* Anillo fino: a 4px la muestra parecia el doble de grande. */
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--tc-rojo);
}

.tc-card__colores a {
	cursor: pointer;
}

/* El SKU y el VIN pueden esconderse al cambiar de color. */
.tc-card__ids li[hidden] {
	display: none;
}

/* =========================================================================
   Carrusel: defensa contra Novaride
   -------------------------------------------------------------------------
   El tema pinta TODOS los <button> como pildoras rojas en mayusculas y tine
   de rojo los encabezados. Sus reglas ganan por especificidad, asi que las
   pestanias salian como botones rojos gigantes y los titulos de las tarjetas
   en rojo a triple tamanio.

   El reset general (.tc-scope button) solo arregla tipografia y mayusculas;
   el fondo, el borde y el color hay que decirlos aqui y con !important. Queda
   acotado a clases propias del plugin: no toca nada del tema.
   ====================================================================== */

.tc-scope .tc-pestana {
	padding: 10px 14px !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	color: var(--tc-suave) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
}

.tc-scope .tc-pestana:hover,
.tc-scope .tc-pestana.is-activa {
	background: none !important;
	color: var(--tc-texto) !important;
}

.tc-scope .tc-pestana.is-activa {
	font-weight: 600 !important;
}

/* Titulo de la tarjeta: negro, no rojo, y a su tamanio. */
.tc-scope .tc-mini__titulo,
.tc-scope .tc-mini__titulo a {
	color: var(--tc-texto) !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.tc-scope .tc-mini__precio {
	color: var(--tc-rojo) !important;
	font-size: 19px !important;
}

/* El texto del boton se veia blanco sobre rojo pero apagado por el tema. */
.tc-scope .tc-mini__boton {
	background: var(--tc-rojo) !important;
	color: #fff !important;
	border: 0 !important;
}

.tc-scope .tc-mini__boton:hover {
	background: #b80015 !important;
	color: #fff !important;
}

/* Con las pestanias ya como texto la fila cabe; si aun no, se desliza sin
   cortar la primera ni la ultima. */
.tc-pestanas {
	padding: 0 4px;
	scroll-padding-inline: 4px;
}

/* "Consultar precio" ocupa el sitio del precio sin gritar como una cifra. */
.tc-scope .tc-mini__precio--consultar {
	color: var(--tc-suave) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
}

/* --- Carrusel: flechas fuera de las tarjetas -----------------------------
   Estaban montadas encima de la primera y la ultima tarjeta y tapaban el
   precio y el boton. Ahora el marco reserva un carril a cada lado y las
   flechas viven ahi. */

.tc-carrusel__marco {
	padding: 0 56px;
}

.tc-flecha--izq { left: 0; }
.tc-flecha--der { right: 0; }

/* En pantallas estrechas no hay sitio para los carriles: la pista se desliza
   con el dedo y las flechas sobran. */
@media (max-width: 782px) {
	.tc-carrusel__marco { padding: 0; }
	.tc-flecha { display: none !important; }
}

/* --- Carrusel: colores disponibles --------------------------------------- */

.tc-mini__colores {
	margin: 0 0 12px;
}

.tc-mini__colores-titulo {
	display: block;
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	color: var(--tc-suave);
}

.tc-mini__colores ul {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tc-scope .tc-mini__colores a {
	display: block;
	width: 18px;
	height: 18px;
	border: 1px solid rgba(0, 0, 0, 0.18) !important;
	border-radius: 50%;
	background: var(--tc-swatch, #d9d9d9) !important;
	cursor: pointer;
	transition: box-shadow .12s;
}

.tc-scope .tc-mini__colores a.is-actual {
	box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--tc-rojo);
}

/* --- Carrusel: tarjeta mas ancha y mas baja ------------------------------
   Las tarjetas salian casi cuadradas y el titulo se partia en tres lineas.
   Mas ancho y menos alto: cabe el titulo en dos lineas, la foto se ve mayor
   y la fila entera ocupa menos pantalla. */

.tc-mini {
	flex: 0 0 440px;
	gap: 18px;
	padding: 14px 18px;
	align-items: center;
}

.tc-mini__media {
	/* 16/10 en vez de 4/3: la misma proporcion que la foto del vehiculo, asi
	   no sobra franja arriba y abajo. */
	flex: 0 0 44%;
	aspect-ratio: 16 / 10;
}

.tc-mini__titulo {
	margin: 0 0 8px;
}

.tc-scope .tc-mini__titulo,
.tc-scope .tc-mini__titulo a {
	font-size: 16px !important;
}

.tc-mini__colores { margin: 0 0 8px; }
.tc-mini__nota { margin: 2px 0 10px; }

.tc-scope .tc-mini__boton {
	padding: 8px 18px;
	font-size: 10px;
}

@media (max-width: 640px) {
	.tc-mini { flex: 0 0 85vw; }
}

/* --- Carrusel: flechas debajo -------------------------------------------
   A los lados tapaban la primera y la ultima tarjeta y estorbaban al leer.
   Debajo y centradas son un control claro y no compiten con el contenido. */

.tc-carrusel__marco {
	padding: 0;
}

.tc-carrusel__controles {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}

.tc-scope .tc-flecha {
	position: static;
	transform: none;
	width: 40px;
	height: 40px;
	box-shadow: none;
	background: #fff !important;
	border: 1px solid var(--tc-borde) !important;
}

.tc-scope .tc-flecha:hover {
	border-color: var(--tc-rojo) !important;
}

/* Cuando no hay a donde ir, el boton se apaga en vez de desaparecer: si
   desapareciera, el otro saltaria de sitio. */
.tc-scope .tc-flecha[hidden] {
	display: grid !important;
	opacity: .35;
	pointer-events: none;
}

@media (max-width: 782px) {
	.tc-carrusel__controles { display: none; }
}

/* =========================================================================
   Ajustes finales de carrusel y chips
   Casi todo es defensa contra Novaride otra vez: son <button>, y el tema los
   pinta como pildoras rojas en mayusculas. Hay que decirlo con !important.
   ====================================================================== */

/* --- Chips de filtros seleccionados: discretos --------------------------- */

.tc-scope .tc-chip {
	padding: 5px 10px 5px 12px !important;
	border: 1px solid var(--tc-borde) !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--tc-texto) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	box-shadow: none !important;
	min-height: 0 !important;
	height: auto !important;
}

.tc-scope .tc-chip:hover {
	border-color: var(--tc-rojo) !important;
	color: var(--tc-rojo) !important;
	background: #fff !important;
}

.tc-scope .tc-chip--limpiar {
	border-color: transparent !important;
	background: transparent !important;
	color: var(--tc-suave) !important;
	text-decoration: underline !important;
}

.tc-scope .tc-chip--limpiar:hover {
	color: var(--tc-rojo) !important;
}

/* --- Flechas: circulo, no pildora --------------------------------------- */

.tc-scope .tc-flecha {
	width: 38px !important;
	height: 38px !important;
	padding: 0 !important;
	border-radius: 50% !important;
	flex: 0 0 38px;
}

/* --- "Ver mas": mas pequenio -------------------------------------------- */

.tc-scope .tc-mini__boton {
	padding: 7px 16px !important;
	font-size: 10px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.05em !important;
}

/* --- Tarjeta del carrusel: mas baja -------------------------------------- */

.tc-mini {
	padding: 12px 14px;
	gap: 14px;
}

.tc-mini__media {
	/* 2/1: la foto de un coche de perfil es asi de ancha; con mas alto solo
	   se anadia franja vacia arriba y abajo, y con ella crecia la tarjeta. */
	aspect-ratio: 2 / 1;
	flex: 0 0 42%;
}

.tc-mini__titulo { margin: 0 0 6px; }
.tc-mini__colores { margin: 0 0 6px; }
.tc-mini__nota { margin: 1px 0 8px; }

.tc-scope .tc-mini__precio {
	font-size: 16px !important;
}

.tc-mini__colores-titulo {
	margin-bottom: 4px;
}

.tc-scope .tc-mini__colores a {
	width: 15px;
	height: 15px;
}

.tc-carrusel__controles {
	margin-top: 14px;
}

/* --- Rejilla de un modelo (widget de pagina de modelo) --------------------
   A diferencia del inventario general, aqui el numero de columnas lo decide
   quien monta la pagina: en una pagina de modelo puede querer 3 tarjetas
   anchas o 4 estrechas segun el hueco que tenga. */

.tc-rejilla--fija {
	grid-template-columns: repeat(var(--tc-columnas, 4), minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.tc-rejilla--fija {
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}
}

@media (max-width: 560px) {
	.tc-rejilla--fija {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
   Catalogo de modelos
   Una tarjeta por modelo, no por vehiculo. Sobria a proposito: aqui lo unico
   que importa es reconocer el coche y su nombre.
   ====================================================================== */

.tc-catalogo__rejilla {
	display: grid;
	grid-template-columns: repeat(var(--tc-columnas, 4), minmax(0, 1fr));
	gap: 20px;
}

@media (max-width: 1100px) {
	.tc-catalogo__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	.tc-catalogo__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}

.tc-modelo {
	border: 1px solid var(--tc-borde);
	border-radius: var(--tc-radio);
	background: #fff;
	overflow: hidden;
	transition: box-shadow .18s, transform .18s, border-color .18s;
}

.tc-modelo:hover {
	transform: translateY(-3px);
	border-color: #d5d7db;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .1);
}

.tc-scope .tc-modelo__enlace {
	display: block;
	text-decoration: none !important;
	color: inherit !important;
}

.tc-modelo__media {
	display: block;
	aspect-ratio: 16 / 10;
	background: #fafafa;
	border-bottom: 1px solid var(--tc-borde);
}

.tc-modelo__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8px;
}

.tc-modelo__img--vacia {
	display: grid;
	place-items: center;
}

.tc-modelo__img--vacia svg {
	width: 56px;
	fill: none;
	stroke: #c9ccd1;
	stroke-width: 2;
	stroke-linecap: round;
}

.tc-modelo__cuerpo {
	display: block;
	padding: 14px 16px 16px;
	text-align: center;
}

.tc-scope .tc-modelo__titulo {
	display: block;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.3;
	color: var(--tc-texto) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.tc-modelo__n {
	display: block;
	margin-top: 3px;
	font-size: 12px;
	color: var(--tc-suave);
}

.tc-modelo:hover .tc-modelo__titulo {
	color: var(--tc-rojo) !important;
}

/* --- Catalogo: todas las fotos del mismo tamanio -------------------------
   Novaride fuerza height:auto en las <img>, asi que "height:100%" se perdia y
   cada caja crecia segun la foto: el Land Cruiser salia enorme y el Corolla
   pequenio, y las tarjetas de una misma fila acababan de distinta altura.

   Altura fija en pixeles en vez de aspect-ratio, y las medidas de la imagen
   con !important. Asi la caja mide lo mismo siempre y dentro cada coche se
   ajusta sin recortarse. */

.tc-scope .tc-modelo__media {
	height: 190px;
	aspect-ratio: auto;
}

.tc-scope .tc-modelo__img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: contain !important;
	padding: 14px;
	display: block;
}

/* La tarjeta en columna: el nombre queda abajo y todas las de una fila miden
   igual aunque un modelo tenga el nombre en dos lineas. */
.tc-modelo {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tc-scope .tc-modelo__enlace {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tc-modelo__cuerpo {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 782px) {
	.tc-scope .tc-modelo__media { height: 140px; }
}

/* --- Catalogo: cambio de imagen al pasar el raton -------------------------
   La foto de perfil se desvanece y aparece la diagonal. Antes esto se hacia
   con CSS pegado a cada widget de Elementor y una URL escrita a mano; ahora
   la segunda imagen se elige en el termino del modelo y vale para todos. */

.tc-modelo__media.tiene-hover {
	position: relative;
}

.tc-scope .tc-modelo__img--hover {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .45s ease-in-out;
}

.tc-scope .tc-modelo__media.tiene-hover img:not(.tc-modelo__img--hover) {
	transition: opacity .45s ease-in-out;
}

.tc-modelo:hover .tc-modelo__img--hover {
	opacity: 1;
}

.tc-modelo:hover .tc-modelo__media.tiene-hover img:not(.tc-modelo__img--hover) {
	opacity: 0;
}

/* Quien tenga activado "reducir movimiento" no necesita el desvanecido. */
@media (prefers-reduced-motion: reduce) {
	.tc-scope .tc-modelo__img--hover,
	.tc-scope .tc-modelo__media.tiene-hover img {
		transition: none;
	}
}

/* --- Unidades de una oferta ----------------------------------------------
   Varios coches distintos del mismo modelo, año y color comparten ficha.
   Cada uno sale en su fila con su SKU y su VIN, que es lo que el comprador
   tiene que citar al preguntar por uno concreto. */

.tc-unidades {
	margin: 0 0 26px;
	border: 1px solid var(--tc-borde);
	border-radius: var(--tc-radio);
	background: #fff;
}

/* Cabecera clicable del desplegable. */
.tc-unidades__resumen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.tc-unidades__resumen::-webkit-details-marker { display: none; }
.tc-unidades__resumen::marker { content: ''; }

.tc-unidades__resumen:focus-visible {
	outline: 2px solid var(--tc-rojo);
	outline-offset: 2px;
	border-radius: var(--tc-radio);
}

.tc-unidades__cabeza {
	display: grid;
	gap: 2px;
}

.tc-ficha .tc-unidades__titulo {
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

.tc-unidades__pista {
	font-size: 12px;
	color: var(--tc-suave);
}

.tc-unidades__flecha {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .2s;
}

.tc-unidades[open] .tc-unidades__flecha { transform: rotate(180deg); }
.tc-unidades[open] .tc-unidades__pista { display: none; }

.tc-unidades__nota {
	margin: 0 18px 6px !important;
	font-size: 12px !important;
	color: var(--tc-suave);
}

.tc-unidades__lista {
	margin: 0 !important;
	padding: 0 8px 8px !important;
	list-style: none !important;
}

/* Una fila por unidad: SKU | llegada | enlace. */
.tc-unidad {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 12px;
	margin: 0 !important;
	padding: 8px 10px;
	border-top: 1px solid #f0f0f1;
	border-radius: 6px;
	font-size: 13px;
	transition: background .3s;
}

.tc-unidad:first-child { border-top: 0; }

/* La unidad a la que se llego desde su URL propia queda resaltada. */
.tc-unidad:target {
	background: #fdf1f1;
	box-shadow: inset 3px 0 0 var(--tc-rojo);
}

.tc-unidad__ids {
	display: grid;
	gap: 1px;
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.tc-unidad__ids strong {
	margin-right: 4px;
	font-size: 11px;
	color: var(--tc-texto);
}

.tc-unidad__vin {
	font-size: 11px;
	color: var(--tc-suave);
}

.tc-unidad__llegada {
	font-size: 12px;
	color: var(--tc-suave);
}

.tc-unidad__llegada.is-firme {
	color: var(--tc-texto);
	font-weight: 600;
}

@media (max-width: 480px) {
	.tc-unidad {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.tc-unidad__llegada {
		grid-column: 1;
		grid-row: 2;
	}
}

/* "+2 unidades mas" en las migas. */
.tc-migas__mas {
	font-size: 12px;
	font-weight: 600;
	color: var(--tc-rojo);
	text-decoration: none;
}

.tc-migas__mas:hover { text-decoration: underline; }

/* La unidad de la pagina en la que estas, y el enlace a las demas. */
.tc-unidad.is-actual {
	background: var(--tc-fondo);
}

.tc-unidad__actual {
	font-size: 12px;
	font-weight: 600;
	color: var(--tc-texto);
	white-space: nowrap;
}

.tc-scope .tc-unidad__ver,
.tc-ficha .tc-unidad__ver {
	font-size: 12px;
	font-weight: 600;
	color: var(--tc-rojo) !important;
	text-decoration: none !important;
	white-space: nowrap;
}

.tc-ficha .tc-unidad__ver:hover {
	text-decoration: underline !important;
}

/* Galeria fija al bajar en escritorio: la columna de datos es mucho mas
   larga que la foto, y sin esto la mitad derecha queda en blanco. */
@media (min-width: 901px) {
	.tc-ficha .tc-galeria {
		position: sticky;
		top: var(--tc-sticky-top, 110px);
	}
}

/* Fecha de actualizacion: discreta, pero en texto y a la vista. */
.tc-ficha .tc-ficha__actualizado,
.tc-specs .tc-specs__actualizado {
	margin: 8px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #6b6b6b !important;
}

.tc-specs .tc-specs__actualizado {
	margin-top: 16px !important;
}

/* El atributo hidden tiene que ganar al display que ponga el tema. */
.tc-scope [hidden],
.tc-ficha [hidden] {
	display: none !important;
}

/* El texto de la tarjeta del carrusel, siempre centrado en alto. */
.tc-mini {
	align-items: center !important;
}

.tc-mini__cuerpo {
	align-self: center;
}

/* --- Carrusel: tarjetas que caben enteras --------------------------------
   Con un ancho fijo de 440px, tres tarjetas y sus huecos pedian ~1360px, y en
   un contenedor de 1200 la tercera salia cortada. Ahora el ancho sale de
   cuantas caben: se reparte el ancho del carrusel entre las columnas.
   --tc-carrusel-columnas se puede cambiar desde Elementor (CSS personalizado)
   sin tocar el plugin. */

.tc-carrusel {
	--tc-carrusel-columnas: 3;
	--tc-carrusel-hueco: 20px;
}

.tc-pista {
	gap: var(--tc-carrusel-hueco);
}

.tc-pista > .tc-mini {
	/* !important: el CSS que Elementor genero con el ajuste viejo "Ancho de
	   la tarjeta" (flex-basis: 400px) sigue en cache hasta regenerarlo, y
	   le ganaba a esta regla. El ancho ahora se controla con las variables. */
	flex: 0 0 calc( ( 100% - ( var(--tc-carrusel-columnas) - 1 ) * var(--tc-carrusel-hueco) ) / var(--tc-carrusel-columnas) ) !important;
	min-width: 0;
}

@media (max-width: 1100px) {
	.tc-carrusel { --tc-carrusel-columnas: 2; }
}

/* En movil, una y un trozo de la siguiente: asi se ve que se puede deslizar. */
@media (max-width: 640px) {
	.tc-carrusel {
		--tc-carrusel-columnas: 1.15;
		--tc-carrusel-hueco: 14px;
	}
}

/* Extracto: entradilla bajo el titulo. */
.tc-ficha .tc-ficha__extracto {
	margin: -4px 0 16px !important;
	max-width: 60ch;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--tc-suave) !important;
}

/* Descripcion del editor: texto con aire, no una tabla. */
.tc-descripcion .tc-specs__texto {
	max-width: 75ch;
	font-size: 15px;
	line-height: 1.65;
}

.tc-descripcion .tc-specs__texto > :first-child { margin-top: 0; }
.tc-descripcion .tc-specs__texto > :last-child { margin-bottom: 0; }

.tc-descripcion + .tc-specs {
	margin-top: 24px;
}

/* Disponibilidad: botones de opcion unica con el mismo aspecto que las casillas. */
.tc-scope .tc-opcion--radio input[type="radio"] {
	accent-color: var(--tc-rojo);
}

/* --- Precio de la ficha: franja compacta ---------------------------------
   Antes era una caja con la cifra a 34px y la nota suelta debajo: ocupaba
   tanto como el titulo. Ahora es una franja con etiqueta, cifra y nota en
   un bloque, y el boton al lado. */

.tc-ficha .tc-ficha__compra {
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
	margin: 4px 0 6px;
	padding: 14px 0;
	border-top: 1px solid var(--tc-borde);
	border-bottom: 1px solid var(--tc-borde);
}

.tc-ficha .tc-ficha__caja-precio,
.tc-ficha .tc-ficha__caja-precio.is-consultar {
	gap: 1px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.tc-ficha .tc-ficha__precio-etiqueta {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tc-suave);
}

.tc-ficha .tc-ficha__precio {
	font-size: clamp( 22px, 2.2vw, 26px );
	font-weight: 800;
	line-height: 1.15;
}

.tc-ficha .tc-ficha__caja-precio.is-consultar .tc-ficha__precio {
	font-size: 20px;
}

.tc-ficha .tc-ficha__precio-nota {
	margin-top: 2px;
	font-size: 11.5px;
}

.tc-ficha .tc-ficha__cta {
	padding: 12px 22px;
}

.tc-ficha .tc-ficha__actualizado {
	margin: 0 0 18px !important;
	font-size: 12px !important;
}

@media (max-width: 480px) {
	.tc-ficha .tc-ficha__cta {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* Tarjetas: la cifra un punto mas contenida. */
.tc-scope .tc-card__precio:not(.tc-card__precio--consultar) {
	font-size: 20px !important;
}

/* --- Filtro de precio, mas moderno ----------------------------------------
   Pista fina, pulgares blancos con borde rojo y cajas bajas con "$" dentro.
   Con !important: el tema fija alto y relleno a todos los input. */

.tc-scope .tc-filtro--precio .tc-slider {
	height: 22px;
	margin: 6px 0 2px;
}

.tc-scope .tc-slider__pista,
.tc-scope .tc-slider__activo {
	height: 4px;
	border-radius: 999px;
}

.tc-scope .tc-slider__pista {
	left: 9px;
	right: 9px;
	background: #e6e6e6;
}

.tc-scope .tc-slider__input {
	height: 22px !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

.tc-scope .tc-slider__input::-webkit-slider-thumb {
	width: 18px;
	height: 18px;
	border: 2px solid var(--tc-rojo);
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
	transition: transform .12s, box-shadow .12s;
}

.tc-scope .tc-slider__input::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid var(--tc-rojo);
	background: #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.tc-scope .tc-slider__input:active::-webkit-slider-thumb,
.tc-scope .tc-slider__input:focus-visible::-webkit-slider-thumb {
	transform: scale(1.12);
	box-shadow: 0 0 0 5px rgba(235, 10, 30, .14);
	cursor: grabbing;
}

.tc-scope .tc-precio__campos {
	align-items: flex-end;
	gap: 8px;
	margin-top: 12px;
}

.tc-scope .tc-precio__campos label {
	position: relative;
	display: grid;
	gap: 3px;
}

.tc-scope .tc-precio__rotulo {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--tc-suave);
}

/* El "$" dentro de la caja, a la izquierda. */
.tc-scope .tc-precio__campos label::after {
	content: '$';
	position: absolute;
	left: 10px;
	bottom: 8px;
	font-size: 13px;
	line-height: 1;
	color: var(--tc-suave);
	pointer-events: none;
}

.tc-scope input.tc-precio__campo {
	height: 32px !important;
	min-height: 0 !important;
	padding: 0 8px 0 20px !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	background: #f4f4f5 !important;
	box-shadow: none !important;
	font-size: 13px !important;
	line-height: 32px !important;
	color: var(--tc-texto) !important;
}

.tc-scope input.tc-precio__campo:focus {
	border-color: var(--tc-rojo) !important;
	background: #fff !important;
}

.tc-scope .tc-precio__guion {
	padding-bottom: 7px;
	font-size: 12px;
}

/* --- Filtro de color: pastillas en vez de lista con casillas --------------
   El color se elige mirando, no leyendo: la muestra manda y el nombre la
   acompaña. Varias por fila, asi que la lista ya no necesita scroll. La
   casilla sigue ahi (oculta a la vista, no a los lectores de pantalla ni al
   teclado): el JS de filtros no cambia. */

.tc-scope .tc-filtro--color .tc-opciones {
	display: flex !important;
	flex-wrap: wrap;
	gap: 6px;
	max-height: none !important;
	overflow: visible !important;
	padding: 2px 0 !important;
}

.tc-scope .tc-filtro--color .tc-opciones li {
	margin: 0 !important;
}

.tc-scope .tc-filtro--color .tc-opcion {
	position: relative;
	gap: 6px;
	padding: 4px 10px 4px 5px;
	border: 1px solid var(--tc-borde);
	border-radius: 999px;
	background: #fff;
	font-size: 12.5px;
	line-height: 1.2;
	color: var(--tc-texto);
	transition: border-color .15s, background .15s, box-shadow .15s;
}

.tc-scope .tc-filtro--color .tc-opcion:hover {
	border-color: #bfc3c8;
}

.tc-scope .tc-filtro--color .tc-opcion.is-activo {
	border-color: var(--tc-rojo);
	background: #fff3f4;
	font-weight: 600;
}

.tc-scope .tc-filtro--color .tc-opcion.is-vacio {
	opacity: .38;
}

.tc-scope .tc-filtro--color .tc-opcion input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}

.tc-scope .tc-filtro--color .tc-opcion:has(input:focus-visible) {
	box-shadow: 0 0 0 3px rgba(235, 10, 30, .18);
}

.tc-scope .tc-filtro--color .tc-opcion__muestra {
	width: 18px;
	height: 18px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
	border: 0;
}

/* Marcado: la muestra lleva un anillo rojo alrededor. */
.tc-scope .tc-filtro--color .tc-opcion.is-activo .tc-opcion__muestra {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), 0 0 0 2px #fff, 0 0 0 3px var(--tc-rojo);
}

.tc-scope .tc-filtro--color .tc-opcion__nombre {
	flex: none;
	overflow: visible;
}

.tc-scope .tc-filtro--color .tc-opcion__n {
	font-size: 11px;
}

/* --- Carrusel en movil: tarjeta en vertical --------------------------------
   Foto al lado y texto al lado no caben en ~300px: el titulo se cortaba a
   media palabra. En vertical la foto va arriba a todo lo ancho. */
@media (max-width: 640px) {
	.tc-pista > .tc-mini {
		flex-direction: column;
		align-items: stretch !important;
		gap: 10px;
		padding: 12px;
	}

	.tc-pista > .tc-mini .tc-mini__media {
		flex: none;
		width: 100%;
		aspect-ratio: 2 / 1;
	}

	.tc-pista > .tc-mini .tc-mini__cuerpo {
		align-self: stretch;
	}

	.tc-scope .tc-pista > .tc-mini .tc-mini__titulo,
	.tc-scope .tc-pista > .tc-mini .tc-mini__titulo a {
		font-size: 15px !important;
	}
}

/* --- Tarjeta: fecha de llegada bajo el estado -----------------------------
   Discreta y pegada al "En transito", que es lo que explica. Antes iba al
   pie, junto al boton, y se leia como un dato suelto. */

.tc-card__meta {
	align-items: flex-start;
}

.tc-card__disponibilidad {
	display: grid;
	justify-items: end;
	gap: 2px;
	min-width: 0;
	text-align: right;
}

.tc-scope .tc-card__disponibilidad .tc-card__llegada {
	margin: 0 !important;
	font-size: 11px;
	line-height: 1.3;
	color: var(--tc-suave);
}

.tc-scope .tc-card__disponibilidad .tc-card__llegada[hidden] {
	display: none !important;
}

/* Boton de la tarjeta del inventario: mismo tamano que el del carrusel.
   Con !important porque el tema le da alto y relleno propios a los enlaces-boton. */
.tc-scope .tc-card__boton {
	height: auto !important;
	min-height: 0 !important;
	padding: 7px 16px !important;
	font-size: 10px !important;
	line-height: 1.4 !important;
	letter-spacing: 0.05em !important;
}

/* La llegada ya va sin abreviar y es mas larga: puede ocupar dos lineas,
   siempre alineada a la derecha bajo el "En transito". */
.tc-scope .tc-card__disponibilidad {
	max-width: 70%;
}

.tc-scope .tc-card__disponibilidad .tc-card__llegada {
	white-space: normal;
	overflow-wrap: break-word;
}

/* Llegada confirmada y estimada con el mismo peso: la diferencia ya la dice
   el texto ("Llega el 21 de septiembre" frente a "Mes estimado de llegada").
   Antes la confirmada iba en negrita y mas oscura y parecia otro tipo de dato. */
.tc-scope .tc-card__llegada.is-firme,
.tc-card__llegada.is-firme,
.tc-ficha__llegada.is-firme,
.tc-unidad__llegada.is-firme {
	font-weight: 400 !important;
	color: var(--tc-suave) !important;
}

/* "En transito" / "En concesionario" sin mayusculas sostenidas ni negrita:
   en mayusculas y en 700 pesaba mas que el nombre del vehiculo y cargaba la
   tarjeta. Ahora es un dato secundario, igual que la llegada de debajo. */
.tc-scope .tc-card__estado {
	font-size: 12.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--tc-suave) !important;
}

.tc-scope .tc-card__estado svg {
	width: 15px;
	stroke-width: 1.5;
}

.tc-scope .tc-card__disponibilidad .tc-card__llegada {
	font-size: 12px !important;
	font-weight: 400 !important;
}

/* Galeria de la ficha: el tema pinta todos los <button> como sus botones
   rojos redondeados, y las miniaturas y flechas salian como pastillas rojas.
   Se fuerza el diseño propio: miniatura sobre fondo claro con borde rojo solo
   en la activa, y flechas blancas redondas. */
.tc-scope .tc-galeria .tc-miniatura,
.tc-galeria .tc-miniatura {
	flex: 0 0 auto !important;
	width: 82px !important;
	height: 62px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 2px solid transparent !important;
	border-radius: 8px !important;
	background: #f4f4f5 !important;
	box-shadow: none !important;
	color: inherit !important;
	line-height: 0 !important;
	overflow: hidden !important;
	transition: border-color .15s ease, opacity .15s ease;
	opacity: .75;
}

.tc-scope .tc-galeria .tc-miniatura:hover,
.tc-galeria .tc-miniatura:hover {
	background: #f4f4f5 !important;
	opacity: 1;
}

.tc-scope .tc-galeria .tc-miniatura.is-activa,
.tc-galeria .tc-miniatura.is-activa {
	border-color: var(--tc-rojo) !important;
	opacity: 1;
}

.tc-galeria .tc-miniatura img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	border-radius: 0 !important;
}

.tc-scope .tc-galeria .tc-galeria__flecha,
.tc-galeria .tc-galeria__flecha {
	width: 40px !important;
	height: 40px !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .95) !important;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .15) !important;
	color: var(--tc-texto) !important;
	line-height: 0 !important;
}

.tc-scope .tc-galeria .tc-galeria__flecha:hover,
.tc-galeria .tc-galeria__flecha:hover {
	background: #fff !important;
}

.tc-galeria .tc-galeria__flecha svg {
	stroke: var(--tc-texto) !important;
}

/* Imagenes a todo el recuadro.
   Fotos (.jpg/.jpeg): llenan la caja de borde a borde (cover); son escenas,
   recortar un poco los bordes no quita nada.
   Recortes del coche sobre fondo transparente (.png/.webp, los renders de las
   paginas de modelo): ocupan todo el ancho sin margen, pero nunca se cortan
   (contain), que es lo que le pasaba al Land Cruiser con cover. La caja
   tiene la proporcion de esos renders (~2:1) para que casi no quede hueco. */
.tc-scope .tc-card__media {
	aspect-ratio: 16 / 9 !important;
	overflow: hidden;
}

.tc-scope .tc-card__img {
	padding: 0 !important;
	object-fit: contain !important;
}

.tc-scope .tc-card__img[src*=".jpg"],
.tc-scope .tc-card__img[src*=".jpeg"],
.tc-scope .tc-card__img[src*=".JPG"],
.tc-scope .tc-card__img[src*=".JPEG"] {
	object-fit: cover !important;
}

.tc-galeria__escenario {
	aspect-ratio: 16 / 10;
}

.tc-galeria__pieza img[src*=".jpg"],
.tc-galeria__pieza img[src*=".jpeg"],
.tc-galeria__pieza img[src*=".JPG"],
.tc-galeria__pieza img[src*=".JPEG"] {
	object-fit: cover !important;
}

/* Los renders, a todo el ancho del escenario con un respiro abajo para la
   sombra y los puntos. */
.tc-galeria__pieza img[src*=".png"],
.tc-galeria__pieza img[src*=".webp"] {
	object-fit: contain !important;
	padding: 0 2% !important;
}

/* Miniaturas: los renders enteros, las fotos llenando. */
.tc-galeria .tc-miniatura img[src*=".png"],
.tc-galeria .tc-miniatura img[src*=".webp"] {
	object-fit: contain !important;
	padding: 2px !important;
}

.tc-scope .tc-mini__img {
	padding: 0 !important;
	object-fit: contain !important;
}

.tc-scope .tc-mini__img[src*=".jpg"],
.tc-scope .tc-mini__img[src*=".jpeg"] {
	object-fit: cover !important;
}

/* Precio del carrusel igual que el de las tarjetas del inventario: en el
   color del texto, no en rojo. El rojo queda para el boton. */
.tc-scope .tc-mini__precio:not(.tc-mini__precio--consultar) {
	color: var(--tc-texto) !important;
	font-weight: 700 !important;
}

/* Widget "Vehiculos de un modelo": tarjetas del mismo tamano que las del
   inventario. A todo el ancho de la pagina se estiraban hasta casi el doble
   y la foto, el titulo y el precio se veian desproporcionados. */
.tc-scope.tc-vehiculos .tc-rejilla--fija {
	grid-template-columns: repeat(var(--tc-columnas, 3), minmax(0, 330px)) !important;
	justify-content: center;
	gap: 24px;
}

@media (max-width: 1100px) {
	.tc-scope.tc-vehiculos .tc-rejilla--fija {
		grid-template-columns: repeat(2, minmax(0, 330px)) !important;
	}
}

@media (max-width: 640px) {
	.tc-scope.tc-vehiculos .tc-rejilla--fija {
		grid-template-columns: minmax(0, 1fr) !important;
	}
}

/* --- Widget "Vehiculos de un modelo" en carrusel ---------------------------
   Pista con scroll-snap: se desliza con el dedo; flechas y puntos debajo,
   con el mismo aspecto que el carrusel del home. */
.tc-vcar {
	--tc-vcar-hueco: 24px;
	position: relative;
	max-width: calc(var(--tc-columnas, 3) * 330px + (var(--tc-columnas, 3) - 1) * var(--tc-vcar-hueco));
	margin: 0 auto;
}

.tc-vcar__pista {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--tc-columnas, 3) - 1) * var(--tc-vcar-hueco)) / var(--tc-columnas, 3));
	gap: var(--tc-vcar-hueco);
	padding: 6px 2px 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	outline: none;
}

.tc-vcar__pista::-webkit-scrollbar {
	display: none;
}

.tc-vcar__item {
	display: flex;
	scroll-snap-align: start;
}

.tc-vcar__item > .tc-card {
	width: 100%;
}

.tc-vcar__controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 10px;
}

.tc-vcar.is-una-pagina .tc-vcar__controles {
	display: none;
}

.tc-scope .tc-vcar__flecha {
	display: grid !important;
	place-items: center;
	width: 42px !important;
	height: 42px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--tc-borde) !important;
	border-radius: 50% !important;
	background: #fff !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .08) !important;
	color: var(--tc-texto) !important;
	line-height: 0 !important;
	cursor: pointer;
}

.tc-scope .tc-vcar__flecha:hover {
	border-color: var(--tc-rojo) !important;
	color: var(--tc-rojo) !important;
}

.tc-vcar__flecha svg {
	width: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tc-vcar__puntos {
	display: flex;
	gap: 8px;
}

.tc-scope .tc-vcar__punto {
	width: 9px !important;
	height: 9px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: #d3d4d8 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: width .2s ease, background .2s ease;
}

.tc-scope .tc-vcar__punto.is-activo {
	width: 26px !important;
	background: var(--tc-rojo) !important;
}

@media (max-width: 1100px) {
	.tc-vcar { --tc-columnas: 2 !important; }
}

/* En el movil se ve una tarjeta y asoma la siguiente: invita a deslizar. */
@media (max-width: 640px) {
	.tc-vcar { --tc-columnas: 1 !important; max-width: none; }
	.tc-vcar__pista { grid-auto-columns: 84%; }
}

/* =========================================================================
 * Movil
 * ====================================================================== */

/* Ficha del vehiculo: nada mas ancho que la pantalla. La columna usaba "1fr",
   que se estira hasta el contenido mas ancho (la fila de miniaturas), y
   empujaba titulo, boton y precio fuera de la pantalla. */
@media (max-width: 900px) {
	.tc-ficha__principal,
	.tc-inventario {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	.tc-ficha,
	.tc-ficha__principal > *,
	.tc-ficha__datos,
	.tc-galeria,
	.tc-galeria__escenario {
		min-width: 0;
		max-width: 100%;
	}

	.tc-ficha {
		overflow-x: clip;
	}

	.tc-ficha__titulo {
		font-size: 26px !important;
		line-height: 1.2 !important;
		overflow-wrap: anywhere;
	}

	.tc-ficha__estado {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 10px;
	}

	.tc-ficha__llegada {
		white-space: normal !important;
	}

	.tc-scope .tc-ficha__cta,
	.tc-ficha__cta {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		white-space: normal !important;
		text-align: center;
	}

	.tc-ficha__precio-nota {
		display: block;
		white-space: normal;
	}

	.tc-galeria__miniaturas {
		max-width: 100%;
	}
}

/* --- Filtros en el movil: boton flotante + panel lateral ----------------- */

.tc-fm-boton,
.tc-fm-velo,
.tc-fm-cab,
.tc-fm-pie {
	display: none;
}

@media (max-width: 900px) {
	.tc-scope.tc-filtros {
		position: fixed !important;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 100002;
		box-sizing: border-box;
		width: min(88vw, 380px) !important;
		max-width: none !important;
		max-height: none !important;
		margin: 0 !important;
		padding: 68px 18px 96px !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: #fff !important;
		overflow-y: auto;
		overscroll-behavior: contain;
		transform: translateX(-105%);
		transition: transform .3s ease;
		box-shadow: 8px 0 30px rgba(0, 0, 0, .18);
	}

	body.tc-filtros-abiertos .tc-scope.tc-filtros {
		transform: none;
	}

	body.tc-filtros-abiertos {
		overflow: hidden;
	}

	.tc-fm-boton {
		position: fixed;
		left: 16px;
		bottom: 20px;
		z-index: 99990;
		display: inline-flex !important;
		align-items: center;
		gap: 8px;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 12px 18px !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: #101114 !important;
		color: #fff !important;
		box-shadow: 0 6px 20px rgba(0, 0, 0, .25) !important;
		font-family: inherit;
		font-size: 14px !important;
		font-weight: 600 !important;
		line-height: 1 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		cursor: pointer;
	}

	.tc-fm-boton svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
	}

	.tc-fm-n {
		display: inline-grid;
		place-items: center;
		min-width: 20px;
		height: 20px;
		padding: 0 6px;
		border-radius: 999px;
		background: #e30613;
		font-size: 11px;
		font-weight: 700;
	}

	.tc-fm-n[hidden] {
		display: none;
	}

	body.tc-filtros-abiertos .tc-fm-boton {
		opacity: 0;
		pointer-events: none;
	}

	.tc-fm-velo {
		position: fixed;
		inset: 0;
		z-index: 100001;
		display: block;
		background: rgba(16, 17, 20, .45);
		opacity: 0;
		pointer-events: none;
		transition: opacity .3s ease;
	}

	body.tc-filtros-abiertos .tc-fm-velo {
		opacity: 1;
		pointer-events: auto;
	}

	.tc-fm-cab,
	.tc-fm-pie {
		position: fixed;
		left: 0;
		z-index: 100003;
		box-sizing: border-box;
		width: min(88vw, 380px);
		background: #fff;
		transform: translateX(-105%);
		transition: transform .3s ease;
	}

	body.tc-filtros-abiertos .tc-fm-cab,
	body.tc-filtros-abiertos .tc-fm-pie {
		transform: none;
	}

	.tc-fm-cab {
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 60px;
		padding: 0 10px 0 18px;
		border-bottom: 1px solid #ececee;
		font-size: 17px;
	}

	.tc-fm-cerrar {
		display: grid !important;
		place-items: center;
		width: 40px !important;
		height: 40px !important;
		min-height: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		border-radius: 50% !important;
		background: transparent !important;
		box-shadow: none !important;
		color: #101114 !important;
		cursor: pointer;
	}

	.tc-fm-cerrar svg {
		width: 22px;
		height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
	}

	.tc-fm-pie {
		bottom: 0;
		display: block;
		padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
		border-top: 1px solid #ececee;
	}

	.tc-fm-ver {
		width: 100%;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 14px 18px !important;
		border: 0 !important;
		border-radius: 999px !important;
		background: #e30613 !important;
		color: #fff !important;
		font-family: inherit;
		font-size: 14px !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		letter-spacing: 0 !important;
		text-transform: none !important;
		cursor: pointer;
	}
}

/* =========================================================================
 * Tarjeta mas compacta
 * ====================================================================== */

/* Anio y estado en una fila; la llegada debajo, en una sola linea a todo el
   ancho. Antes iba en una columna estrecha a la derecha y ocupaba tres. */
.tc-scope .tc-card__cuerpo {
	padding: 16px 18px 18px !important;
	row-gap: 0 !important;
}

.tc-scope .tc-card__meta {
	display: grid !important;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 2px 10px;
	margin-bottom: 8px;
}

.tc-scope .tc-card__disponibilidad {
	display: contents !important;
}

.tc-scope .tc-card__estado {
	justify-self: end;
}

.tc-scope .tc-card__disponibilidad .tc-card__llegada {
	grid-column: 1 / -1;
	justify-self: start;
	max-width: none;
	text-align: left;
	font-size: 12px !important;
	line-height: 1.35 !important;
}

/* Nombre: como mucho dos lineas. */
.tc-scope .tc-card__titulo {
	font-size: 17px !important;
	line-height: 1.3 !important;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tc-scope .tc-card__colores {
	margin-top: 10px !important;
}

.tc-scope .tc-card__precio {
	margin-top: 12px !important;
	font-size: 20px !important;
}

.tc-scope .tc-card__nota {
	margin: 1px 0 0 !important;
	font-size: 11.5px !important;
	font-weight: 500 !important;
}

/* Pie: SKU y unidades a la izquierda, boton a la derecha. Empuja al fondo
   (margin-top:auto) para que los botones de una fila queden alineados. */
.tc-card__pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
}

.tc-card__pie-datos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	min-width: 0;
	font-size: 12px;
}

.tc-scope .tc-card__pie .tc-card__ids {
	margin: 0 !important;
}

.tc-scope .tc-card__pie .tc-card__stock {
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--tc-suave);
}


.tc-scope .tc-card__pie .tc-card__boton {
	flex-shrink: 0;
	margin: 0 !important;
}

/* =========================================================================
 * Datos del vehiculo
 * ====================================================================== */

/* Los valores solo se cortan entre palabras; un codigo largo sin espacios
   (un VIN) si puede partirse para no desbordar. Antes "word-break:
   break-all" partia cualquier palabra: "(estimad" / "a)". */
.tc-specs__fila dd {
	word-break: normal !important;
	overflow-wrap: anywhere;
}

.tc-specs__fila dt {
	flex-shrink: 0;
	white-space: nowrap;
}

/* =========================================================================
 * Lightbox de la galeria
 * ====================================================================== */

html.tc-modal-abierto,
html.tc-modal-abierto body {
	overflow: hidden !important;
}

.tc-galeria.tiene-lightbox .tc-galeria__pieza img {
	cursor: zoom-in;
}

.tc-lb {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto auto;
	padding: 56px 16px 16px;
	background: rgba(10, 11, 13, .94);
	color: #fff;
}

.tc-lb[hidden],
.tc-pdf[hidden] {
	display: none !important;
}

.tc-lb__escena {
	display: grid;
	place-items: center;
	min-height: 0;
}

.tc-lb__medio {
	max-width: min(1400px, 100%);
	max-height: 100%;
	object-fit: contain;
	border-radius: 6px;
	user-select: none;
}

.tc-lb button {
	display: grid;
	place-items: center;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	line-height: 0 !important;
}

.tc-lb svg,
.tc-pdf svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tc-lb .tc-lb__cerrar {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .12) !important;
	color: #fff !important;
}

.tc-lb .tc-lb__flecha {
	position: absolute;
	top: 50%;
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .92) !important;
	color: #101114 !important;
	transform: translateY(-50%);
}

.tc-lb__flecha--izq { left: 16px; }
.tc-lb__flecha--der { right: 16px; }

.tc-lb.is-unica .tc-lb__flecha,
.tc-lb.is-unica .tc-lb__minis {
	display: none !important;
}

.tc-lb__contador {
	margin: 10px 0 8px;
	text-align: center;
	font-size: 13px;
	opacity: .8;
}

.tc-lb__minis {
	display: flex;
	justify-content: center;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
}

.tc-lb .tc-lb__mini {
	flex: 0 0 auto;
	width: 72px !important;
	height: 52px !important;
	border: 2px solid transparent !important;
	border-radius: 6px !important;
	background: #222 !important;
	overflow: hidden;
	opacity: .55;
}

.tc-lb .tc-lb__mini.is-activa {
	border-color: #e30613 !important;
	opacity: 1;
}

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

@media (max-width: 640px) {
	.tc-lb { padding: 56px 0 12px; }
	.tc-lb .tc-lb__flecha { display: none !important; }
	.tc-lb__medio { border-radius: 0; }
}

/* =========================================================================
 * Ficha tecnica (PDF) en una ventana
 * ====================================================================== */

.tc-pdf {
	position: fixed;
	inset: 0;
	z-index: 100010;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(10, 11, 13, .7);
}

.tc-pdf__caja {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	width: min(1100px, 100%);
	height: min(92vh, 1000px);
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

.tc-pdf__cab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 10px 12px 10px 20px;
	border-bottom: 1px solid #ececee;
	font-size: 15px;
	color: #101114;
}

.tc-pdf__acciones {
	display: flex;
	align-items: center;
	gap: 6px;
}

.tc-pdf__accion {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 999px;
	color: #101114 !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
}

.tc-pdf__accion:hover {
	background: #f4f4f5;
}

.tc-pdf__accion svg {
	width: 17px;
	height: 17px;
}

.tc-pdf .tc-pdf__cerrar {
	display: grid !important;
	place-items: center;
	width: 40px !important;
	height: 40px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: #f4f4f5 !important;
	box-shadow: none !important;
	color: #101114 !important;
	cursor: pointer;
	line-height: 0 !important;
}

.tc-pdf__marco {
	width: 100%;
	height: 100%;
	border: 0;
	background: #525659;
}

@media (max-width: 640px) {
	.tc-pdf { padding: 0; }
	.tc-pdf__caja { width: 100%; height: 100%; border-radius: 0; }
	.tc-pdf__accion span { display: none; }
}

/* =========================================================================
 * Llegada en dos lineas: "Llegada estimada:" y debajo los meses
 * ====================================================================== */

.tc-llegada__et,
.tc-llegada__fecha {
	display: block;
}

.tc-llegada__fecha {
	color: var(--tc-texto);
	font-weight: 500;
}

/* Lista "Hay N unidades como esta": columnas fijas en todas las filas, para
   que la llegada empiece a la misma altura aunque una fila diga "Ver" y otra
   "Estas viendo esta". */
.tc-unidad {
	grid-template-columns: minmax(110px, .8fr) minmax(0, 1.4fr) 122px !important;
	gap: 4px 16px !important;
	padding: 10px 12px !important;
}

.tc-unidad__llegada {
	line-height: 1.4;
	text-align: left;
}

.tc-unidad > :last-child {
	justify-self: end;
	text-align: right;
}

@media (max-width: 480px) {
	.tc-unidad {
		grid-template-columns: minmax(0, 1fr) auto !important;
	}
}

/* =========================================================================
 * "Otros vehiculos que te pueden interesar" en carrusel
 * ====================================================================== */

.tc-similares__cab {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.tc-similares__cab .tc-similares__titulo {
	margin-bottom: 0;
}

.tc-similares__flechas {
	display: flex;
	gap: 10px;
	flex-shrink: 0;
}

.tc-similares.is-una-pagina .tc-similares__flechas {
	display: none;
}

.tc-similares .tc-similares__carrusel {
	max-width: none;
}

.tc-similares__pie {
	display: flex;
	justify-content: center;
	margin-top: 22px;
}

.tc-scope .tc-similares__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 28px;
	border: 2px solid var(--tc-texto);
	border-radius: 999px;
	background: transparent;
	color: var(--tc-texto) !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .5px;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background .15s, color .15s;
}

.tc-scope .tc-similares__cta:hover {
	background: var(--tc-texto);
	color: #fff !important;
}

.tc-similares__cta svg {
	width: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 640px) {
	.tc-similares__cab { align-items: center; }
	.tc-similares__cab .tc-similares__titulo { font-size: 19px; }
	.tc-similares__cta { width: 100%; justify-content: center; }
}

/* =========================================================================
 * Fotos verticales (las de los usados, hechas con el movil)
 * Enteras, sobre un fondo difuminado de la misma foto: con "cover" se veia
 * el techo del concesionario y el coche cortado.
 * ====================================================================== */

.tc-galeria__pieza.is-vertical,
.tc-scope .tc-card__media.is-vertical {
	position: relative;
	overflow: hidden;
	background: #1d1e21;
}

.tc-galeria__pieza.is-vertical {
	position: absolute;
}

.tc-galeria__pieza.is-vertical::before,
.tc-scope .tc-card__media.is-vertical::before {
	content: "";
	position: absolute;
	inset: -24px;
	background: var(--tc-foto) center / cover no-repeat;
	filter: blur(22px) brightness(.85);
	transform: scale(1.05);
}

.tc-galeria .tc-galeria__pieza.is-vertical img,
.tc-scope .tc-galeria .tc-galeria__pieza.is-vertical img,
.tc-scope .tc-card__media.is-vertical .tc-card__img {
	position: relative;
	z-index: 1;
	width: 100% !important;
	height: 100% !important;
	max-height: 100% !important;
	object-fit: contain !important;
	padding: 0 !important;
}

.tc-card__ico {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* La foto vertical de la galeria, al tamano exacto del escenario: en una
   rejilla con filas automaticas crecia hasta su alto natural. */
.tc-galeria .tc-galeria__pieza.is-vertical img {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

/* Lightbox: la foto siempre entera en la pantalla, sea horizontal o
   vertical. Con max-height:100% dentro de la rejilla, las verticales crecian
   hasta su alto natural y se salian por abajo. */
.tc-lb .tc-lb__escena {
	position: relative;
	min-height: 0;
	overflow: hidden;
}

.tc-lb img.tc-lb__medio,
.tc-lb video.tc-lb__medio {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: contain !important;
	border-radius: 0 !important;
	background: transparent !important;
}

/* Tarjeta de usado: kilometraje, combustible y transmision bajo el nombre */
.tc-scope .tc-card__usado {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.tc-scope .tc-card__usado li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 !important;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--tc-fondo, #f4f4f5);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--tc-texto);
}

.tc-scope .tc-card__usado svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .75;
}

/* Tarjeta de usado: kilometraje y combustible en una linea discreta, sin
   fondos, en el gris del anio. Sustituye a las pastillas. */
.tc-scope .tc-card__usado {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 12px;
	margin: 8px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.tc-scope .tc-card__usado li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0;
	background: none !important;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--tc-suave, #6b6e75);
}

.tc-scope .tc-card__usado svg {
	width: 15px;
	height: 15px;
	opacity: 1;
}

/* =========================================================================
 * Tarjeta de usado
 * ====================================================================== */

/* Foto mas alta: las de los usados son verticales y en 16:9 quedaba mucha
   franja difuminada a los lados. */
.tc-scope .tc-card--usado .tc-card__media {
	position: relative;
	aspect-ratio: 4 / 3 !important;
}

/* "11 fotos" sobre la imagen. */
.tc-scope .tc-card__fotos {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px;
	border-radius: 999px;
	background: rgba(16, 17, 20, .72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	pointer-events: none;
}

.tc-scope .tc-card__fotos svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

/* "Consultar" a la izquierda del boton, donde los nuevos llevan el SKU. */
.tc-scope .tc-card__consultar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--tc-texto) !important;
	text-decoration: none !important;
}

.tc-scope .tc-card__consultar:hover {
	color: var(--tc-rojo) !important;
}

.tc-scope .tc-card__consultar svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

/* Usados: "Ver vehiculo" a todo el ancho de la tarjeta (sin SKU a la izquierda). */
.tc-scope .tc-card--usado .tc-card__pie-datos:not(:has(*)) {
	display: none;
}

.tc-scope .tc-card--usado .tc-card__pie .tc-card__boton {
	flex: 1 1 auto;
	text-align: center;
	justify-content: center;
}

/* Fotos de la tarjeta de usado: flechas sobre la imagen */
.tc-scope .tc-card__galeria {
	position: relative;
}

.tc-scope .tc-card__flecha {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: grid !important;
	place-items: center;
	width: 32px !important;
	height: 32px !important;
	min-height: 0 !important;
	margin: -16px 0 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .92) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18) !important;
	color: var(--tc-texto) !important;
	line-height: 0 !important;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s;
}

.tc-scope .tc-card__flecha--ant { left: 10px; }
.tc-scope .tc-card__flecha--sig { right: 10px; }

.tc-scope .tc-card__galeria:hover .tc-card__flecha,
.tc-scope .tc-card__flecha:focus-visible {
	opacity: 1;
}

.tc-scope .tc-card__flecha:hover {
	background: #fff !important;
}

.tc-scope .tc-card__flecha svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* En el movil (sin raton) las flechas se ven siempre, mas discretas. */
@media (hover: none) {
	.tc-scope .tc-card__flecha {
		opacity: .85;
		width: 28px !important;
		height: 28px !important;
		margin-top: -14px !important;
	}
}