/*
	tvc.css — la hoja del tema entera.

	Un solo fichero a proposito. El tema viejo tenia skin-custom.css con 450 KB
	repartidos en cosas que nadie sabia si se usaban; aqui cabe de un vistazo y
	se puede borrar lo que sobre sin miedo.

	Orden: fichas (variables), base, piezas que se repiten, y luego cada
	plantilla. Nada de utilidades sueltas tipo .mt-3: si hace falta un hueco, va
	en la pieza que lo necesita.
*/

/* ------------------------------------------------------------ variables */

:root {
	--azul:      #003399;   /* titulares, fondos oscuros */
	--azul-vivo: #178BFF;   /* SOLO lo que se puede pulsar */
	--oro:       #E0BE15;   /* SOLO posiciones de ranking */
	--tinta:     #0B1220;
	--gris:      #5B6677;
	--linea:     #E4E9F0;
	--fondo:     #F4F6FA;

	--verde:  #1E8E4A;
	--rojo:   #C0392B;
	--ambar:  #B4621A;

	--ancho:  1200px;
	--radio:  18px;
	--radio-s: 12px;

	--sombra: 0 18px 50px rgba(10, 25, 60, .12);
}

/* ---------------------------------------------------------------- base */

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

body {
	margin: 0;
	background: #fff;
	color: var(--tinta);
	font-family: Rubik, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.03em;
}

h1 { font-size: clamp(32px, 5vw, 46px); }
h2 { font-size: clamp(24px, 3.4vw, 30px); }
h3 { font-size: clamp(19px, 2.4vw, 22px); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--azul); text-decoration: none; }
a:hover { color: var(--azul-vivo); text-decoration: underline; }

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

/* El foco se ve. Lo contrario deja la web inutilizable con teclado. */
:focus-visible {
	outline: 3px solid var(--azul-vivo);
	outline-offset: 2px;
	border-radius: 4px;
}

.solo-lectores {
	position: absolute; width: 1px; height: 1px;
	margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.ancho {
	max-width: var(--ancho);
	margin: 0 auto;
	padding: 0 24px;
}

/* -------------------------------------------------------------- piezas */

.tarjeta {
	background: #fff;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--fondo);
	color: var(--gris);
	font-size: 13px;
	font-weight: 500;
}

.chip--oro { background: var(--oro); color: #3A2F00; font-weight: 600; }

.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: var(--radio-s);
	background: var(--azul-vivo);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.boton:hover { background: #0F74DB; color: #fff; text-decoration: none; }

.boton--suave {
	background: #fff;
	color: var(--azul);
	border: 1.5px solid var(--linea);
	min-height: 44px;
	font-size: 15px;
}
.boton--suave:hover { background: var(--fondo); color: var(--azul); }

.etiqueta-seccion {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--azul-vivo);
}

/* Distintivos de la DGT. El color solo no basta: cada uno lleva su texto. */
.dgt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px; height: 22px;
	padding: 0 5px;
	border-radius: 999px;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.dgt--0   { background: #0A66C2; }
.dgt--eco { background: #0F7A3D; font-size: 9px; }
.dgt--c   { background: #1E8E4A; }
.dgt--b   { background: #8A6B00; }

/* ------------------------------------------------------------ cabecera */

.cabecera { background: #001234; }

.cabecera__barra {
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 72px;
	flex-wrap: wrap;
	padding-top: 10px;
	padding-bottom: 10px;
}

.marca {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
}
.marca:hover { color: #fff; text-decoration: none; }
.marca b { color: var(--oro); font-weight: 700; }

.menu { display: flex; flex-wrap: wrap; gap: 22px; margin: 0; padding: 0; list-style: none; }
.menu a { color: #C6D2E6; font-size: 15px; font-weight: 500; text-decoration: none; }
.menu a:hover, .menu .current-menu-item > a { color: #fff; text-decoration: none; }

.buscador-cabecera {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 230px;
	height: 42px;
	padding: 0 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .10);
	color: #9FB3D4;
	font-size: 14px;
}
.buscador-cabecera input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	color: #fff;
	font: inherit;
}
.buscador-cabecera input::placeholder { color: #9FB3D4; }
.buscador-cabecera button { border: 0; background: none; color: #9FB3D4; cursor: pointer; padding: 0; line-height: 0; }

/* ----------------------------------------------------------------- pie */

.pie { margin-top: 72px; background: #001234; color: #B9C9E6; }
.pie__cols {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: 32px;
	padding: 44px 24px;
}
.pie a { color: #B9C9E6; text-decoration: none; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie h2 { color: #fff; font-size: 15px; margin-bottom: 10px; }
.pie ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 14px; }
.pie__legal { padding: 0 24px 32px; font-size: 13px; color: #7E90AE; }

/* ------------------------------------------------------- huecos de publi */

/*
	Los contenedores de publicidad los rellena un script externo por ID. Aqui
	solo se les reserva sitio para que la pagina no pegue un salto cuando
	aparezca el anuncio.
*/
#mega-sup { min-height: 90px; margin: 20px 0; text-align: center; }
#roba1, #roba2 { min-height: 250px; margin-bottom: 16px; text-align: center; }
#botones-hc { margin: 30px auto 20px; text-align: center; overflow: hidden; }
.botones-hc-mobile { height: 115px; }
#widget { margin: 28px 0; text-align: center; }
.sidebar__inner { width: 100%; margin: 0 auto; }
.centrado { text-align: center; }

@media (max-width: 782px) {
	#mega-sup { min-height: 50px; }
}

/* ===================================================== tarjeta de coche */

/*
	La misma pieza sirve para un modelo del ranking, una alternativa y un
	resultado de busqueda. Cambia el contenido, no el molde.
*/
.coche {
	display: block;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	transition: box-shadow .15s, transform .15s;
}
.coche:hover {
	color: inherit;
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(10, 25, 60, .12);
	transform: translateY(-2px);
}
.coche--podio { border-color: #F0E3AE; }
.coche--sinficha { opacity: .72; cursor: default; }
.coche--sinficha:hover { box-shadow: none; transform: none; }

.coche__foto {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--fondo);
	display: flex;
	align-items: center;
	justify-content: center;
}
.coche__foto img { width: 100%; height: 100%; object-fit: cover; }

.coche__puesto {
	position: absolute;
	top: 10px; left: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px; height: 28px;
	padding: 0 7px;
	border-radius: 9px;
	background: #fff;
	border: 1px solid var(--linea);
	color: var(--gris);
	font-size: 14px;
	font-weight: 700;
}
.coche__puesto--oro { background: var(--oro); border-color: var(--oro); color: #3A2F00; }

.coche__cuerpo { padding: 14px; }
.coche__marca {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--azul-vivo);
}
.coche__modelo { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.coche__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin: 6px 0 0;
	font-size: 13px;
	color: var(--gris);
}
.coche__datos {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--linea);
}
.coche__cifra { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.coche__uds { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.coche__que { font-size: 12px; color: var(--gris); }

/*
	El precio va debajo de las unidades en los rankings, donde la cifra que
	ordena es la de ventas. Cuando no hay ventas que ensenar (alternativas,
	listados, resultados de busqueda) pasa a ser el dato principal y crece.
*/
.coche__precio {
	display: flex;
	align-items: baseline;
	gap: 5px;
	flex-wrap: wrap;
	margin: 2px 0 0;
	font-size: 15px;
	color: var(--tinta);
}
.coche__precio strong { font-weight: 600; }
.coche__desde { font-size: 12px; color: var(--gris); }
.coche__tachado { font-size: 12px; color: var(--gris); text-decoration: line-through; }

.coche__precio--solo { margin: 0; font-size: 19px; }
.coche__precio--solo strong { font-weight: 700; letter-spacing: -0.03em; }

.sube  { color: var(--verde); font-weight: 600; font-size: 13px; }
.baja  { color: var(--rojo);  font-weight: 600; font-size: 13px; }

.rejilla-coches {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
}

/* ============================================== bloque de matriculaciones */

.matris__cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.dato {
	padding: 18px;
	border-radius: 14px;
	background: var(--fondo);
}
.dato--destacado { background: var(--azul); color: #fff; }
.dato__que { margin: 0; font-size: 13px; color: var(--gris); }
.dato--destacado .dato__que { color: #A8C4F2; }
.dato__cuanto { margin: 0; font-size: 36px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; }
.dato__nota { margin: 0; font-size: 14px; color: var(--gris); }
.dato--destacado .dato__nota { color: #D3E2FB; }

/* Grafico de doce meses. Barras con CSS: no hace falta una libreria. */
.barras {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	height: 174px;
	margin-top: 18px;
}

.barras__mes {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	flex: 1;
	min-width: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	cursor: default;
}

.barras__barra {
	display: block;
	background: #C9D7EC;
	border-radius: 5px 5px 0 0;
	transition: background .15s;
}
.barras__mes--max .barras__barra    { background: var(--azul-vivo); }
.barras__mes--ultimo .barras__barra { background: var(--azul); }

.barras__nombre { margin-top: 6px; font-size: 11px; color: var(--gris); text-align: center; }
.barras__mes--ultimo .barras__nombre { color: var(--tinta); font-weight: 600; }

/*
	La cifra del mes, al pasar por encima o al tabular.

	Ocupa sitio siempre (visibility, no display) para que al aparecer no
	empuje la barra hacia abajo y el grafico no de un salto.
*/
.barras__dato {
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--tinta);
	visibility: hidden;
}
.barras__mes:hover .barras__dato,
.barras__mes:focus-visible .barras__dato { visibility: visible; }

.barras__mes:hover .barras__barra  { background: var(--azul); }
.barras__mes--max:hover .barras__barra,
.barras__mes--ultimo:hover .barras__barra { background: #0F74DB; }

/* ================================================================ tablas */

.tvc-tabla, .tabla {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}
.tabla thead th {
	padding: 13px 16px;
	background: var(--fondo);
	text-align: left;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gris);
}
.tabla td { padding: 13px 16px; border-top: 1px solid var(--linea); }
.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla tr.destacada { background: #EEF5FF; }
.tabla tr.recomendada { background: #FFFBEB; }

/* Una tabla ancha en un movil se desliza, no desborda la pagina */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla-scroll > table { min-width: 560px; }

/*
	Las tablas que vienen dentro del texto.

	Se viste CUALQUIER <table> del contenido, no solo las que llevan clase. De
	los 725 contenidos con tabla que hay publicados, 698 usan <table> pelado y
	exactamente uno lleva .tvc-tabla: esperar una clase era esperar sentado.

	Y la cabecera se marca por posicion, no por etiqueta: hay tablas con <td>
	dentro del <thead> (las comparativas, sin ir mas lejos). Un td ahi dentro
	es una cabecera aunque no lo diga.
*/
.contenido table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
	font-size: 15px;
	background: #fff;
	border: 1px solid var(--linea);
	border-radius: var(--radio-s);
	overflow: hidden;
}

.contenido table th,
.contenido table td {
	padding: 11px 14px;
	border-top: 1px solid var(--linea);
	text-align: left;
	vertical-align: top;
}

.contenido table thead th,
.contenido table thead td {
	background: var(--fondo);
	border-top: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--tinta);
}

/* La primera columna suele ser el concepto: se lee mejor marcada */
.contenido table tbody td:first-child,
.contenido table tbody th:first-child { font-weight: 500; }

.contenido table tbody tr:nth-child(even) { background: #FBFCFE; }

/*
	El width="186" que arrastran 39 contenidos de la epoca de Word. Se ignora:
	las columnas se reparten solas y en movil no caben de otra forma.
*/
.contenido table [width] { width: auto !important; }

.contenido table caption {
	caption-side: top;
	padding: 0 0 10px;
	text-align: left;
	font-size: 13px;
	color: var(--gris);
}

/* ============================================================= contenido */

.contenido { font-size: 17px; line-height: 1.8; color: #27343F; }
.contenido > * { max-width: 72ch; }
.contenido > .tvc-tabla,
.contenido > figure,
.contenido > .tabla-scroll { max-width: none; }
.contenido h2 { margin: 36px 0 14px; }
.contenido h3 { margin: 28px 0 12px; }
.contenido ul, .contenido ol { padding-left: 22px; }
.contenido li { margin-bottom: 8px; }
.contenido strong { font-weight: 600; }
.contenido blockquote {
	margin: 30px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--azul-vivo);
	font-size: 21px;
	line-height: 1.5;
	font-weight: 500;
	color: var(--tinta);
}
.contenido img { border-radius: var(--radio-s); }

/* ================================================================ ficha */

.ficha__migas { padding-top: 20px; font-size: 13px; color: var(--gris); }
.ficha__migas a { color: var(--gris); }

.ficha__titular {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-top: 14px;
}
.ficha__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ficha__marca {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--azul-vivo);
}
.ficha__h1 { display: flex; align-items: center; gap: .45em; margin-top: 4px; flex-wrap: wrap; }
.ficha__logo { height: .9em; width: auto; }
.ficha__desde { text-align: right; }
.ficha__precio { margin: 0; font-size: clamp(26px, 4vw, 34px); font-weight: 700; letter-spacing: -0.04em; }
.ficha__gama { margin: 0; font-size: 14px; color: var(--gris); }

.ficha__cuerpo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 36px;
	align-items: start;
	padding-top: 26px;
}
.ficha__lado { position: sticky; top: 20px; }

.ficha__foto {
	aspect-ratio: 16 / 9;
	border-radius: var(--radio);
	overflow: hidden;
	background: var(--fondo);
	border: 1px solid var(--linea);
	display: flex;
	align-items: center;
	justify-content: center;
}
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }

.galeria { margin-top: 8px; }
.galeria__fotos {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.galeria__fotos a {
	display: block;
	aspect-ratio: 3 / 2;
	border-radius: 10px;
	overflow: hidden;
	background: var(--fondo);
}
.galeria__fotos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .15s;
}
.galeria__fotos a:hover img { transform: scale(1.04); }

/* Valoracion */
.nota { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px; }
.nota__global {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 86px; height: 86px;
	border-radius: 22px;
	background: var(--azul);
	color: #fff;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: -0.04em;
}
.nota__ejes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px 28px; }
.eje { display: flex; align-items: center; gap: 12px; }
.eje__que { width: 108px; flex-shrink: 0; font-size: 14px; color: var(--gris); }
.eje__barra { flex: 1; height: 8px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.eje__relleno { display: block; height: 100%; background: var(--azul-vivo); border-radius: 999px; }
.eje__nota { width: 26px; text-align: right; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* A destacar / A mejorar */
.juicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 34px; }
.juicio__caja { padding: 22px; border-radius: var(--radio); border: 1px solid; }
.juicio__caja--bien { border-color: #CFE6D4; background: #F3FBF5; }
.juicio__caja--mal  { border-color: #F2DCC2; background: #FFF9F2; }
.juicio__caja ul { margin: 12px 0 0; padding-left: 20px; }
.juicio__caja li { margin-bottom: 6px; line-height: 1.7; }

.seccion { margin-top: 52px; }
.seccion__cabecera {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

/* Ficha tecnica */
.tecnica { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tecnica__dato { padding: 18px; border: 1px solid var(--linea); border-radius: var(--radio-s); }
.tecnica__que { margin: 0; font-size: 13px; color: var(--gris); }
.tecnica__cuanto { margin: 3px 0 0; font-size: 19px; font-weight: 600; }

/* Formulario de la columna */
.lead { overflow: hidden; }
.lead__pestanas { display: flex; border-bottom: 1px solid var(--linea); }
.lead__pestana {
	flex: 1;
	padding: 13px 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 500;
	color: var(--gris);
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.lead__pestana[aria-selected="true"] { color: var(--azul); font-weight: 600; border-bottom-color: var(--azul); }
.lead__oferta {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 20px;
	background: var(--fondo);
}
.lead__modelo { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.3; }
.lead__ahorro { margin: 0; font-size: 12px; font-weight: 600; color: var(--verde); }
.lead__precio { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.lead form { display: grid; gap: 10px; padding: 18px 20px; }
.lead label { display: block; font-size: 12px; color: var(--gris); }
.lead input[type=text], .lead input[type=email], .lead input[type=tel] {
	width: 100%;
	height: 44px;
	margin-top: 4px;
	padding: 0 12px;
	border: 1px solid var(--linea);
	border-radius: 10px;
	font: inherit;
	font-size: 15px;
}
.lead__par { display: grid; grid-template-columns: 1.6fr 1fr; gap: 10px; }
.lead__acepto { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--gris); line-height: 1.5; }
.lead__letra { margin: 0; font-size: 11px; color: var(--gris); line-height: 1.5; }

/* Barra fija de movil */
.barra-movil { display: none; }

/* ============================================================== portada */

.hero {
	background: linear-gradient(155deg, #001234 0%, #002A7A 60%, #003399 100%);
	padding: 52px 0 88px;
	position: relative;
	overflow: hidden;
}
.hero::after {
	content: "";
	position: absolute;
	top: -140px; right: -100px;
	width: 540px; height: 540px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(23, 139, 255, .32), transparent 70%);
	pointer-events: none;
}
.hero > .ancho { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 740px; }
.hero__entradilla { margin-top: 14px; font-size: 19px; line-height: 1.55; color: #B9C9E6; max-width: 620px; }

.buscador {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: 10px;
	margin-top: 30px;
	padding: 14px;
	background: #fff;
	border-radius: var(--radio);
	box-shadow: 0 20px 50px rgba(0, 10, 40, .3);
}
.buscador label { display: block; }
.buscador .que {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris);
}
.buscador select {
	width: 100%;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--linea);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 15px;
	color: var(--tinta);
}
.buscador .boton { align-self: end; }

.pulso {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 26px;
	color: #DCE6F7;
	font-size: 15px;
}
.pulso b { font-size: 20px; color: #fff; }
.pulso .sube { color: #7FE3A6; }

.encabalgado { margin-top: -44px; position: relative; z-index: 2; }
.panel { padding: 30px; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: var(--sombra); }

.ranking-marcas { display: grid; gap: 14px; }
.marca-fila { display: flex; align-items: center; gap: 16px; }
.marca-fila__puesto { width: 24px; font-size: 14px; color: var(--gris); }
.marca-fila__nombre { width: 130px; font-size: 15px; font-weight: 600; }
.marca-fila__barra { flex: 1; height: 12px; border-radius: 999px; background: var(--fondo); overflow: hidden; }
.marca-fila__relleno { display: block; height: 100%; background: var(--azul-vivo); border-radius: 999px; }
.marca-fila:first-child .marca-fila__relleno { background: var(--azul); }
.marca-fila__uds { width: 72px; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ============================================= articulo y texto legal */

.entrada__cabecera { max-width: 820px; padding-top: 28px; }
.entrada__entradilla { margin-top: 16px; font-size: 21px; line-height: 1.55; color: var(--gris); }
.entrada__firma { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linea); }
.entrada__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; padding-top: 36px; }

.legal { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 36px; }
.legal__indice { position: sticky; top: 24px; }
.legal__indice ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 14px; line-height: 1.45; }
.legal__indice a { color: var(--gris); padding-left: 14px; display: block; }
.legal__indice a:hover { color: var(--azul); }
.legal__fecha { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--linea); font-style: italic; color: #6B7684; font-size: 15px; }

.tarjetas-noticias { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.noticia { display: block; overflow: hidden; color: inherit; text-decoration: none; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.noticia:hover { color: inherit; text-decoration: none; box-shadow: 0 10px 28px rgba(10, 25, 60, .12); }
.noticia__foto { aspect-ratio: 16 / 9; background: var(--fondo); }
.noticia__foto img { width: 100%; height: 100%; object-fit: cover; }
.noticia__cuerpo { padding: 18px; }
.noticia__titular { margin: 10px 0 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.noticia__fecha { margin: 12px 0 0; font-size: 12px; color: var(--gris); }

/* ================================================================ movil */

@media (max-width: 980px) {
	.ficha__cuerpo,
	.entrada__cuerpo,
	.legal { grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.ficha__lado, .legal__indice { position: static; }
	.pie__cols { grid-template-columns: repeat(2, 1fr); }
	.buscador { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.buscador .boton { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
	body { font-size: 16px; }
	.ancho { padding: 0 16px; }
	.pie__cols { grid-template-columns: 1fr; gap: 24px; }
	.buscador { grid-template-columns: 1fr; }
	.nota { grid-template-columns: 1fr; text-align: center; }
	.nota__ejes { text-align: left; }
	.ficha__desde { text-align: left; }
	.rejilla-coches { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.menu { gap: 16px; font-size: 14px; }

	/* El precio y el boton vuelven abajo, siempre a la vista */
	.barra-movil {
		display: flex;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 60;
		align-items: center;
		gap: 12px;
		padding: 10px 16px;
		background: #fff;
		border-top: 1px solid var(--linea);
		box-shadow: 0 -6px 20px rgba(10, 25, 60, .08);
	}
	.barra-movil .boton { flex: 1; }
	.barra-movil__que { margin: 0; font-size: 11px; color: var(--gris); }
	.barra-movil__precio { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
	body.single-listings { padding-bottom: 80px; }
}

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

/*
	Los robas intercalados solo existen en movil. En escritorio viven en la
	columna, asi que aqui se ocultan en vez de pintarlos dos veces.
*/
/*
	El hueco al que el JavaScript lleva el roba en movil. Vacio no ocupa nada;
	cuando recibe el anuncio, se separa del texto.
*/
.destino-roba:not(:empty) { margin: 28px 0; text-align: center; }

/*
	La silueta de relleno. Ancho relativo para que se vea igual de bien en una
	tarjeta de 190 px que en la foto grande de la ficha.
*/
.silueta { width: 42%; max-width: 280px; height: auto; }

/* ===================================== secciones plegables del contenido */

/*
	Vienen del atajo [toggle] del tema viejo. Se pintan con <details>, asi que
	el triangulito lo pone el navegador; lo quitamos y ponemos el nuestro para
	que no cambie de forma entre Chrome y Safari.
*/
.plegable { margin: 32px 0; border-top: 1px solid var(--linea); }
.plegable__titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 0 0;
	cursor: pointer;
	list-style: none;
}
.plegable__titulo::-webkit-details-marker { display: none; }
.plegable__titulo h2 { margin: 0; flex: 1; }
.plegable__titulo::after {
	content: "";
	flex-shrink: 0;
	width: 10px; height: 10px;
	border-right: 2px solid var(--gris);
	border-bottom: 2px solid var(--gris);
	transform: rotate(45deg);
	transition: transform .15s;
}
.plegable[open] .plegable__titulo::after { transform: rotate(-135deg); }
.plegable__cuerpo { padding-top: 10px; }
.plegable__cuerpo > *:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------- paginacion */

.paginacion {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
	margin: 44px 0 0;
}
.paginacion .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--linea);
	border-radius: 10px;
	color: var(--tinta);
	font-size: 15px;
	text-decoration: none;
}
.paginacion .page-numbers:hover { background: var(--fondo); text-decoration: none; }
.paginacion .page-numbers.current { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.paginacion .dots { border: 0; }

/* ------------------------------------------------- filtros del listado */

/*
	El buscador se repite arriba del listado para poder afinar sin volver a la
	portada. Alli va sobre fondo oscuro; aqui sobre blanco, asi que necesita
	borde en vez de sombra.
*/
.buscador-listado { margin-top: 24px; }
.buscador-listado .buscador {
	box-shadow: none;
	border: 1px solid var(--linea);
	background: var(--fondo);
}

.filtros-puestos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.chip--quitar {
	background: var(--azul);
	color: #fff;
	text-decoration: none;
	font-weight: 500;
}
.chip--quitar:hover { background: var(--azul-vivo); color: #fff; text-decoration: none; }
.chip--quitar span[aria-hidden] { font-size: 15px; line-height: 1; opacity: .8; }
.filtros-puestos__todos { font-size: 13px; color: var(--gris); }

/*
	El logo lleva width y height en el HTML para que el navegador reserve sitio,
	pero el tamano real lo manda el CSS: alto relativo al titular y ancho libre,
	porque los logos no son cuadrados ni entre ellos se parecen.
*/
.ficha__logo { height: .9em; width: auto; max-width: 2.2em; object-fit: contain; }

/*
	La caja que desliza las tablas del contenido. El borde solo aparece cuando
	de verdad hay algo que desplazar, que lo resuelve el navegador con
	scroll-marker; mientras tanto, nada que distraiga.
*/
.contenido .tabla-scroll { margin: 28px 0; max-width: none; }
.contenido .tabla-scroll > table { margin: 0; min-width: 480px; }
.contenido .tabla-scroll:focus-visible { outline: 3px solid var(--azul-vivo); outline-offset: 2px; }

/* --------------------------------------------- pastillas de filtro rapido */

.pastillas { display: grid; gap: 16px; margin-top: 20px; }
.pastillas__grupo { display: grid; gap: 8px; }
.pastillas__que {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris);
}
.pastillas__fila { display: flex; flex-wrap: wrap; gap: 8px; }

.pastilla {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--linea);
	border-radius: 999px;
	background: #fff;
	color: var(--tinta);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
}
.pastilla:hover { border-color: var(--azul-vivo); color: var(--tinta); text-decoration: none; }

.pastilla--puesta { background: var(--azul); border-color: var(--azul); color: #fff; }
.pastilla--puesta:hover { background: var(--azul-vivo); border-color: var(--azul-vivo); color: #fff; }

/* Sin resultados: se ve que existe, pero no se puede pulsar */
.pastilla--vacia { opacity: .45; cursor: not-allowed; }

.pastilla__n {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--gris);
}
.pastilla--puesta .pastilla__n { color: #C6D9F7; }

/* Los huecos reservan sitio para que la pagina no salte al llegar el anuncio */
#widget { min-height: 110px; }

/*
	El cierre de la ficha, ya sin columna.

	La parte de arriba lleva el formulario pegado al scroll y por eso va a dos
	columnas; de alternativas en adelante se abre a todo el ancho, que es donde
	las tarjetas respiran. El margen de la primera seccion lo pone el propio
	.seccion, asi que aqui solo se separa del bloque anterior.
*/
.ficha__cierre { margin-top: 8px; }
.ficha__cierre .rejilla-coches { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ficha__cierre .tarjetas-noticias { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* -------------------------------------------------- selector de orden */

.orden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; }
.orden__que {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--gris);
}
.orden__opciones { display: flex; flex-wrap: wrap; gap: 4px; }
.orden__opcion {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	border-radius: 8px;
	color: var(--gris);
	font-size: 14px;
	text-decoration: none;
}
.orden__opcion:hover { background: var(--fondo); color: var(--tinta); text-decoration: none; }
.orden__opcion--puesta { background: var(--fondo); color: var(--tinta); font-weight: 600; }
.orden__nota { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--gris); }

/* ======================================================= visor de fotos */

.visor {
	width: 100%;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;

	/*
		El fondo va en el propio dialogo y no solo en ::backdrop. El backdrop
		funciona, pero deja pasar lo que hay detras y en una galeria se veian
		las miniaturas de la pagina a traves de la foto. Opaco del todo, que es
		lo que se espera al abrir una foto a pantalla completa.
	*/
	background: #070C16;
	color: #fff;
}
.visor::backdrop { background: #070C16; }

.visor[open] {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 16px;
}

.visor__marco { margin: 0; display: grid; justify-items: center; gap: 12px; min-width: 0; }
.visor__foto {
	max-width: 100%;
	max-height: calc(100vh - 110px);
	width: auto;
	border-radius: var(--radio-s);
	background: #0B1220;
}
.visor__pie { color: #C6D2E6; font-size: 14px; }

.visor__flecha,
.visor__cerrar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	cursor: pointer;
}
.visor__flecha:hover,
.visor__cerrar:hover { background: rgba(255, 255, 255, .24); }

.visor__cerrar {
	position: absolute;
	top: 14px; right: 14px;
	font-size: 28px;
	line-height: 1;
}

@media (max-width: 680px) {
	/*
		En movil las flechas se bajan sobre la foto: a los lados dejarian la
		imagen en un canuto de 200 px. Para pasar foto esta el deslizar.
	*/
	.visor[open] { grid-template-columns: 1fr; }
	.visor__flecha { position: absolute; bottom: 22px; }
	.visor__flecha--atras { left: 22px; }
	.visor__flecha--adelante { right: 22px; }
	.visor__foto { max-height: calc(100vh - 150px); }
}

/* Se nota que la miniatura abre algo */
.galeria__fotos a { cursor: zoom-in; }

/*
	En modo filtro el boton se esconde con el atributo hidden desde el JS, asi
	que la rejilla tiene que recolocarse sin el.
*/
.buscador--filtro:has(.buscador__ir[hidden]) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/*
	Cualquier cosa con hidden se esconde, aunque tenga display propio.

	.boton lleva display:inline-flex y eso le gana al [hidden]{display:none} de
	la hoja del navegador: el boton de buscar seguia a la vista despues de que
	el JavaScript lo escondiera.
*/
[hidden] { display: none !important; }

/* ============================================ pagina de matriculaciones */

.hero--corto { padding: 40px 0 70px; }
.hero--corto h1 { color: #fff; }

.meses { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 22px; }
.meses__ir {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .12);
	color: #DCE6F7;
	font-size: 14px;
	text-decoration: none;
}
.meses__ir:hover { background: rgba(255, 255, 255, .22); color: #fff; text-decoration: none; }
.meses__selector select {
	height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	font: inherit;
	font-size: 14px;
	color: var(--tinta);
}

/* La tabla larga: cabecera pegada arriba al desplazar */
.tabla--ranking thead th {
	position: sticky;
	top: 0;
	z-index: 1;
}
.tabla--ranking td { padding-top: 11px; padding-bottom: 11px; }
.tabla--ranking tbody tr:hover { background: var(--fondo); }

.ver-mas { margin: 0; padding: 16px; border-top: 1px solid var(--linea); text-align: center; }

/* Los textos legales de las marcas, dentro de la politica de privacidad */
.legal-marcas { margin: 20px 0; padding-left: 22px; }
.legal-marcas li { margin-bottom: 14px; line-height: 1.7; }

/* ------------------------------------------- cabeceras que ordenan */

.tabla--ranking th { padding: 0; }
.ordena {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 13px 16px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gris);
	cursor: pointer;
}
.ordena:hover { color: var(--tinta); }

/* Las columnas de cifras se leen pegadas a la derecha */
.tabla--ranking th[style*="right"] .ordena { justify-content: flex-end; }

/*
	La flecha solo aparece en la columna por la que se esta ordenando. Un
	triangulito en todas no dice cual manda.
*/
.ordena__flecha { width: 8px; height: 8px; }
th[aria-sort="ascending"] .ordena,
th[aria-sort="descending"] .ordena { color: var(--azul); }
th[aria-sort="ascending"] .ordena__flecha,
th[aria-sort="descending"] .ordena__flecha {
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
th[aria-sort="ascending"] .ordena__flecha  { border-bottom: 5px solid currentColor; }
th[aria-sort="descending"] .ordena__flecha { border-top: 5px solid currentColor; }

/* ------------------------------------------------- banner de campana */

.campana { text-align: center; }
.campana__enlace { display: block; }
.campana__enlace img { width: 100%; height: auto; border-radius: var(--radio-s); }
.campana__aviso {
	margin: 6px 0 0;
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gris);
}

/* El aviso de cesion bajo el boton: letra pequena pero legible, no escondida */
.lead__cesion { margin-top: 10px; }

/* Errores de validacion del formulario y el acuse de recibo */
.lead__aviso { margin: 10px 0 0; font-size: .875rem; }
.lead__aviso--error { color: #b3261e; font-weight: 600; }

.lead__gracias { padding: 24px 4px; text-align: center; }
.lead__gracias-titular { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; color: var(--azul); }