/**
 * Plantilla «Comparador v1».
 *
 * Todo cuelga de `.iat-tpl--comparador-v1`, incluidas las variables de color y
 * el reinicio de márgenes: el comparador es una página del sitio y vive dentro
 * del contenido del tema, así que ninguno de los dos lados debe pisar al otro.
 *
 * La paleta es la de la ficha de coche a propósito: se entra desde ella y se
 * vuelve a ella, y son la misma cosa contada de dos maneras.
 *
 * @package InfoAsphaltTemplates
 */

.iat-tpl--comparador-v1 {
	--bg-top: #4a005e;
	--card: #8f00b5;
	--card-alt: #7a009c;
	--card-dark: #33003f;
	--card-border: #a437c9;
	--accent: #d355ff;
	--accent-soft: #e2a8f5;
	--gold: #ffc02e;
	--oc: #fe7112;
	--fila: rgba(0, 0, 0, 0.18);
	--fila-total: rgba(0, 0, 0, 0.42);
	/* Verde y rojo de las diferencias: relleno oscuro y borde vivo. El relleno es
	   oscuro a propósito —la cifra que se lee es la del coche, y la caja de al
	   lado sólo dice si gana o pierde— y el borde es el que da el color. */
	--mejor: #3D694E;
	--mejor-borde: #00D954;
	--peor: #712929;
	--peor-borde: #D90000;
	--ico-cabecera: #dc84ff;
	--tinta: #1a0022;
	/* Lo que reserva una cifra de una fila: de ahí sale que las cajas de colores
	   caigan en la misma vertical en vez de moverse con lo que mida cada número.
	   Da para la más larga de las que se comparan de frente —el rango y las
	   velocidades—; el coste, que es de ocho dígitos y va solo en su bloque,
	   toma lo que necesite. */
	--cifra: 4.4rem;
	--text: #ffffff;
	--text-soft: #dcb4ea;
	--radius: 14px;
	box-sizing: border-box;
	color: var(--text);
	line-height: normal;
	text-align: left;
	/* Aire por arriba, que aquí no lo pone nadie más: la página del comparador
	   lleva apagado el título del tema, y sin él Kadence deja el contenido
	   pegado a la cabecera —en el teléfono, donde el logotipo cuelga por debajo
	   de la barra, se le montaba encima—. En el teléfono un poco más, que es
	   donde el logotipo baja más. */
	padding: 2rem 0 3rem;
	margin: 0;
}

@media (max-width: 600px) {
	.iat-tpl--comparador-v1 {
		padding-top: 2.75rem;
	}
}

/* El reinicio es para lo de dentro. El contenedor queda fuera a propósito: si
   entrara, este `padding: 0` anularía el suyo, que es justo el aire que separa
   la plantilla de la cabecera del tema —y sin él, en el teléfono, el logotipo
   del sitio se montaba encima del enlace de volver—. */
.iat-tpl--comparador-v1 *,
.iat-tpl--comparador-v1 *::before,
.iat-tpl--comparador-v1 *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* La tipografía la pone el tema. Los controles de formulario no la heredan por
   sí solos, así que se les pide de forma explícita. */
.iat-tpl--comparador-v1 button,
.iat-tpl--comparador-v1 input {
	font-family: inherit;
}

.iat-tpl--comparador-v1 .iat-container {
	max-width: 1200px;
	width: 100%;
	margin-inline: auto;
	min-width: 0;
}

.iat-tpl--comparador-v1 .iat-container ul,
.iat-tpl--comparador-v1 .iat-container ol {
	padding-left: 0;
	list-style: none;
}

.iat-tpl--comparador-v1 .iat-oculto-visual {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Cabecera ---------------------------------------------------------------- */

.iat-tpl--comparador-v1 .iat-volver {
	display: inline-block;
	margin-bottom: 1.25rem;
	color: var(--text-soft);
	font-size: 0.8rem;
	font-weight: 900;
	text-decoration: underline;
}

.iat-tpl--comparador-v1 .iat-volver:hover {
	color: var(--text);
}

/* El título y el botón de compartir comparten franja —compartir es compartir
   esto, y el sitio donde se dice qué es esto es el título— y se centran uno con
   otro en cualquier pantalla: sin envolver, para que el botón no se caiga
   debajo, y con el título encogiendo si hace falta. */
.iat-tpl--comparador-v1 .iat-comp__titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: nowrap;
}

/* Sin margen, forzado: el del tema para los encabezados cuelga por debajo del
   título y descentraba el botón, que se alineaba con el título más su margen. */
.iat-tpl--comparador-v1 .iat-comp__titulo .iat-titulo {
	flex: 1;
	min-width: 0;
	margin: 0 !important;
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	font-weight: 900;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -0.5px;
	color: var(--text);
}

.iat-tpl--comparador-v1 .iat-comp__compartir {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.25rem;
	border: 1px solid var(--text);
	border-radius: 9999px;
	background: transparent;
	color: var(--text);
	font-size: 0.8rem;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.iat-tpl--comparador-v1 .iat-comp__compartir[hidden] {
	display: none;
}

.iat-tpl--comparador-v1 .iat-comp__compartir:hover {
	background: var(--text);
	color: var(--tinta);
}

.iat-tpl--comparador-v1 .iat-comp__unidades {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 1.25rem 0 1.75rem;
}

/* Las flechas sólo cuando hay carrusel, y quien lo dice es el script midiendo
   si las tarjetas caben todas: en el escritorio caben las tres y sobran. */
.iat-tpl--comparador-v1 .iat-comp__flechas {
	display: none;
	gap: 0.5rem;
}

.iat-tpl--comparador-v1.is-carrusel .iat-comp__flechas {
	display: inline-flex;
}

.iat-tpl--comparador-v1 .iat-comp__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--card-border);
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	cursor: pointer;
	/* El apagado y el encendido tardan lo mismo que el carrusel en cambiar de
	   tarjeta: las dos cosas cuentan lo mismo —dónde se está y a dónde se puede
	   ir— y se ven a la vez. */
	transition: opacity 0.3s ease, background 0.15s ease, border-color 0.15s ease;
}

.iat-tpl--comparador-v1 .iat-comp__flecha:hover,
.iat-tpl--comparador-v1 .iat-comp__flecha:focus-visible {
	border-color: var(--accent);
	background: rgba(211, 85, 255, 0.18);
}

/* Apagada la que no lleva a ninguna parte: se ve, para que la fila no cambie de
   sitio, pero se nota que no hay nada al otro lado. */
.iat-tpl--comparador-v1 .iat-comp__flecha[disabled] {
	opacity: 0.2;
	cursor: default;
}

.iat-tpl--comparador-v1 .iat-comp__flecha[disabled]:hover {
	border-color: var(--card-border);
	background: transparent;
}

.iat-tpl--comparador-v1 .iat-comp__flecha svg {
	display: block;
}

.iat-tpl--comparador-v1 .iat-pills {
	display: inline-flex;
	padding: 3px;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.35);
}

.iat-tpl--comparador-v1 .iat-pill {
	padding: 0.4rem 1.1rem;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: var(--text);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.5px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.iat-tpl--comparador-v1 .iat-pill.is-on {
	background: #ffffff;
	color: #6b0088;
	font-weight: 900;
}

/* Huecos ------------------------------------------------------------------ */

/* Splide esconde su contenedor hasta que lo monta. Aquí el carrusel es cosa
   del teléfono y la página tiene que verse igual sin él —y también si el
   script no llega—, así que se le devuelve la visibilidad. */
.iat-tpl--comparador-v1 .splide {
	visibility: visible;
}

/* Con el carrusel desmontado —que es lo que pasa en el escritorio— la tira la
   coloca esta hoja. Las cuatro clases del selector son a propósito: Splide trae
   una regla suya de tres (`.splide.is-initialized:not(.is-active) .splide__list`)
   que ganaba a la nuestra, y las columnas se apilaban a lo alto en una sola. */
.iat-tpl--comparador-v1 .iat-comp__carrusel.splide .iat-comp__huecos {
	display: flex;
	align-items: flex-start;
}

/* La separación entre columnas, sólo cuando no hay carrusel: montado, la pone
   Splide con un margen en cada diapositiva, y las dos juntas sumaban el doble —
   la última columna se salía de la pista por la derecha justo un hueco. */
.iat-tpl--comparador-v1 .iat-comp__carrusel.splide:not(.is-active) .iat-comp__huecos {
	gap: 1rem;
}

.iat-tpl--comparador-v1 .iat-comp__hueco {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

/* El ancho de las columnas lo reparte esta hoja mientras el carrusel no esté
   montado: en el escritorio, donde se desmonta, y también si el script no llega.

   Y sólo entonces, que es lo que arregla el corte de la última tarjeta en las
   pantallas intermedias: montado, Splide le pone a cada diapositiva su ancho y
   un margen detrás, y una base de `flex` nuestra le ganaba al ancho pero no
   descontaba ese margen — la tira acababa midiendo un hueco de más y la última
   columna se salía por la derecha. */
.iat-tpl--comparador-v1 .iat-comp__carrusel:not(.is-active) .iat-comp__hueco {
	flex: 0 0 calc((100% - 2rem) / 3);
}

.iat-tpl--comparador-v1 .iat-comp__cuerpo {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.iat-tpl--comparador-v1 .iat-comp__hueco.is-cargando .iat-comp__cuerpo {
	opacity: 0.4;
}

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

/* Una tarjeta sin coche es su cabecera y nada más: el renglón donde luego irá el
   nombre lo ocupa mientras tanto el buscador. */
/* Con la clase de la tarjeta delante: el relleno de una tarjeta se declara más
   abajo, y a igualdad de peso ganaba el de allí. */
.iat-tpl--comparador-v1 .iat-comp__tarjeta.iat-comp__tarjeta--vacia {
	min-height: 220px;
	border: 2px dashed var(--card-border);
	background: rgba(0, 0, 0, 0.12);
}

.iat-tpl--comparador-v1 .iat-comp__tarjeta--vacia .iat-comp__cab {
	background: transparent;
}

.iat-tpl--comparador-v1 .iat-comp__buscador {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1;
	min-width: 0;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--card-border);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.25);
}

/* Con el nombre de etiqueta delante y forzando el cromo entero: el tema viste
   los campos de texto del contenido —tinta oscura, fondo blanco, su borde y su
   relleno— pensando en fondos claros, y aquí el campo va dentro de una caja
   oscura que ya pone todo eso. Forzar sólo el color dejaría la tinta blanca
   sobre el fondo blanco del tema. */
.iat-tpl--comparador-v1 input.iat-comp__input {
	flex: 1;
	min-width: 0;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: var(--text) !important;
	font-size: 0.9rem;
	line-height: 1.4;
}

.iat-tpl--comparador-v1 input.iat-comp__input:focus {
	outline: none;
	box-shadow: none !important;
}

.iat-tpl--comparador-v1 input.iat-comp__input::placeholder {
	color: var(--text-soft);
	opacity: 1;
}

/* En la esquina de arriba a la derecha, que es el final de la cabecera. El
   nombre se recorta antes de llegar hasta aquí, así que nunca la tapa. */
.iat-tpl--comparador-v1 .iat-comp__quitar {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: auto;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--text);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.iat-tpl--comparador-v1 .iat-comp__quitar:hover,
.iat-tpl--comparador-v1 .iat-comp__quitar:focus-visible {
	background: rgba(0, 0, 0, 0.3);
	opacity: 1;
}

/* La lista de resultados, con el aire y el fondo oscuro del desplegable de
   tipos de evento: es el mismo gesto y se reconoce igual. Cinco a la vista y
   el resto desplazando, que es cuando se piden los siguientes. */
.iat-tpl--comparador-v1 .iat-comp__resultados {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	width: 100%;
	/* Cinco a la vista y el resto desplazando: la altura sale de las cinco filas
	   más el relleno de la caja, para que la sexta se asome y se entienda que
	   hay más. */
	max-height: calc(5 * 32px + 12px);
	padding: 6px;
	overflow-y: auto;
	border: 1px solid var(--card-border);
	border-radius: 14px;
	background: #17001d;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
	scrollbar-width: thin;
	scrollbar-color: var(--accent) transparent;
}

.iat-tpl--comparador-v1 .iat-comp__resultados[hidden] {
	display: none;
}

.iat-tpl--comparador-v1 .iat-comp__resultado {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0.6rem;
	border-radius: 10px;
	color: var(--text);
	font-size: 0.85rem;
	cursor: pointer;
}

.iat-tpl--comparador-v1 .iat-comp__resultado:hover,
.iat-tpl--comparador-v1 .iat-comp__resultado.is-activo {
	background: rgba(211, 85, 255, 0.25);
}

.iat-tpl--comparador-v1 .iat-comp__resultado--vacio {
	color: var(--text-soft);
	cursor: default;
}

.iat-tpl--comparador-v1 .iat-comp__resultado--vacio:hover {
	background: transparent;
}

.iat-tpl--comparador-v1 .iat-comp__resultado-clase {
	flex: none;
	width: 22px;
	height: auto;
}

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

.iat-tpl--comparador-v1 .iat-comp__tarjeta {
	border-radius: var(--radius);
	background: var(--card);
	overflow: hidden;
}

.iat-tpl--comparador-v1 .iat-comp__cab {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.75rem;
	background: var(--card-alt);
}

/* Los de élite se distinguen por el fondo de su cabecera, como en el listado
   se distinguen por el borde: es el mismo distintivo dicho donde cabe. */
.iat-tpl--comparador-v1 .iat-comp__tarjeta.is-elite .iat-comp__cab {
	background: #a800d4;
}

.iat-tpl--comparador-v1 .iat-comp__nombre,
.iat-tpl--comparador-v1 .iat-comp__panel-titulo,
.iat-tpl--comparador-v1 .iat-comp__panel-aviso {
	margin-bottom: 0;
}

.iat-tpl--comparador-v1 .iat-comp__nombre {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	font-size: 1rem;
	font-weight: 900;
	line-height: 1.2;
}

.iat-tpl--comparador-v1 .iat-comp__nombre a {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* El nombre enlaza a la ficha, pero se lee como un título: blanco y sin
   subrayado, y al pasar por encima cambia de color en vez de subrayarse, igual
   que en las tarjetas del listado.
   
   Se le quita todo lo que el tema le pone a un enlace del contenido, y no sólo
   el color: Kadence dibuja el subrayado unas veces con `text-decoration`, otras
   con un borde y otras con una sombra interior, y el resalte del ratón con un
   fondo. Quitar sólo el subrayado dejaba el enlace azul en unas tarjetas y con
   fondo al pasar por encima en otras. */
.iat-tpl--comparador-v1 .iat-comp__nombre a,
.iat-tpl--comparador-v1 .iat-comp__nombre a:link,
.iat-tpl--comparador-v1 .iat-comp__nombre a:visited,
.iat-tpl--comparador-v1 .iat-comp__nombre a:hover,
.iat-tpl--comparador-v1 .iat-comp__nombre a:focus,
.iat-tpl--comparador-v1 .iat-comp__nombre a:focus-visible,
.iat-tpl--comparador-v1 .iat-comp__nombre a:active {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--text) !important;
	-webkit-text-decoration: none !important;
	text-decoration: none !important;
	text-decoration-line: none !important;
	text-underline-offset: 0 !important;
}

.iat-tpl--comparador-v1 .iat-comp__nombre a:hover,
.iat-tpl--comparador-v1 .iat-comp__nombre a:focus,
.iat-tpl--comparador-v1 .iat-comp__nombre a:focus-visible {
	color: var(--accent-soft) !important;
}

.iat-tpl--comparador-v1 .iat-etiqueta {
	border-radius: 999px;
	padding: 0.25rem 0.6rem;
	background: #ff4fed;
	color: var(--text);
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.iat-tpl--comparador-v1 .iat-evo {
	border-radius: 6px;
	padding: 0.15rem 0.45rem;
	background: var(--accent);
	color: var(--tinta);
	font-size: 0.65rem;
	font-weight: 900;
}

/* Estrellas y overclock --------------------------------------------------- */

.iat-tpl--comparador-v1 .iat-comp__mandos {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	background: var(--card-alt);
}

.iat-tpl--comparador-v1 .iat-comp__estrellas {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--text);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.28);
}

/* Cada estrella lleva las dos imágenes y se enseña la que toca: encenderlas es
   cambiar una clase y no cambiar el `src`, que dejaría un parpadeo al pulsar. */
.iat-tpl--comparador-v1 .iat-comp__estrella {
	position: relative;
	width: 22px;
	height: 22px;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

.iat-tpl--comparador-v1 .iat-comp__estrella img {
	position: absolute;
	inset: 0;
	width: 20px;
	height: 20px;
	margin: auto;
}

.iat-tpl--comparador-v1 .iat-comp__estrella .iat-comp__estrella-off {
	opacity: 1;
}

.iat-tpl--comparador-v1 .iat-comp__estrella.is-on .iat-comp__estrella-off {
	opacity: 0;
}

.iat-tpl--comparador-v1 .iat-comp__estrella:not(.is-on) img:first-of-type {
	opacity: 0;
}

/* Con épicas o sin ellas, al lado de las estrellas: las dos cosas dicen en qué
   estado se está mirando el coche. Apagado se queda a media luz, que es como se
   lee que eso que nombra no está puesto. */
.iat-tpl--comparador-v1 .iat-comp__epicas {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	flex: none;
	padding: 0.35rem 0.6rem;
	border: 1px solid var(--text);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.28);
	color: var(--text);
	font-size: 0.68rem;
	font-weight: 800;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.iat-tpl--comparador-v1 .iat-comp__epicas.is-on {
	opacity: 1;
}

.iat-tpl--comparador-v1 .iat-comp__epicas img {
	flex: none;
}

/* El overclock apagado es blanco, pero no del todo: al pasar por encima se
   termina de encender, que es lo que dice que se puede pulsar. */
.iat-tpl--comparador-v1 .iat-comp__oc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	/* A la derecha del todo: las estrellas y las épicas dicen cómo está el
	   coche, y esto es lo único que se le añade. */
	margin-left: auto;
	border: 1px solid var(--text);
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.28);
	color: #ffffff;
	opacity: 0.8;
	cursor: pointer;
	transition: opacity 0.15s ease, color 0.15s ease;
}

.iat-tpl--comparador-v1 .iat-comp__oc:hover {
	opacity: 1;
}

.iat-tpl--comparador-v1 .iat-comp__oc.is-on {
	color: var(--oc);
	opacity: 1;
}

.iat-tpl--comparador-v1 .iat-comp__oc-ico svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Foto y píldoras --------------------------------------------------------- */

.iat-tpl--comparador-v1 .iat-comp__foto img {
	display: block;
	width: 100%;
	height: auto;
}

.iat-tpl--comparador-v1 .iat-comp__pildoras {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.75rem;
}

/* El tema le pone margen inferior a todo párrafo del contenido, y su regla pesa
   más que el reinicio de la plantilla, que va por `*`. Aquí el margen rompe la
   fila de píldoras, así que se fuerza. */
.iat-tpl--comparador-v1 .iat-comp__pildora {
	margin-bottom: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.55rem;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.28);
	font-size: 0.85rem;
	font-weight: 700;
}

/* En las píldoras la caja de la diferencia va detrás de la cifra y no delante:
   aquí la cifra manda —son planos y piezas que hay que reunir— y la caja
   acompaña. */
.iat-tpl--comparador-v1 .iat-comp__pildora .iat-comp__cifra {
	flex-direction: row-reverse;
}

.iat-tpl--comparador-v1 .iat-comp__pildora-ico,
.iat-tpl--comparador-v1 .iat-comp__llave {
	flex: none;
}

/* Bloques y filas --------------------------------------------------------- */

.iat-tpl--comparador-v1 .iat-comp__bloque {
	padding: 0 0.75rem 0.75rem;
}

.iat-tpl--comparador-v1 .iat-comp__bloque-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.35rem 0;
	color: var(--accent-soft);
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

/* La cabecera de la columna dice con cuántas estrellas se está mirando: «3x» y
   la estrella, o la estrella sola cuando es una. */
.iat-tpl--comparador-v1 .iat-comp__cabestrella {
	display: inline-flex;
	align-items: center;
	gap: 0.1rem;
}

.iat-tpl--comparador-v1 .iat-comp__cabestrella img[hidden] {
	display: none;
}

.iat-tpl--comparador-v1 .iat-comp__filas li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	min-height: 32px;
	padding: 0.25rem 0.5rem;
	border-radius: 8px;
	font-size: 0.8rem;
	font-weight: 700;
}

.iat-tpl--comparador-v1 .iat-comp__filas li:nth-child(odd) {
	background: var(--fila);
}

.iat-tpl--comparador-v1 .iat-comp__fila--total {
	background: var(--fila-total) !important;
	text-transform: uppercase;
}

.iat-tpl--comparador-v1 .iat-comp__fila-nombre {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.iat-tpl--comparador-v1 .iat-comp__ico {
	display: inline-flex;
	flex: none;
	color: var(--ico-cabecera);
}

.iat-tpl--comparador-v1 .iat-comp__ico svg {
	display: block;
	width: 16px;
	height: 16px;
}

.iat-tpl--comparador-v1 .iat-comp__nitro {
	flex: none;
}

.iat-tpl--comparador-v1 .iat-unidad {
	color: var(--text-soft);
	font-size: 0.62rem;
	font-weight: 700;
}

/* Cifras y diferencias ---------------------------------------------------- */

.iat-tpl--comparador-v1 .iat-comp__cifra {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem;
	flex: none;
	white-space: nowrap;
}

.iat-tpl--comparador-v1 .iat-comp__num {
	font-variant-numeric: tabular-nums;
}

.iat-tpl--comparador-v1 .iat-comp__valor {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	/* Poco, y a propósito: el distintivo de overclock acompaña a la cifra y se
	   lee con ella, no al lado. */
	gap: 0.25rem;
}

/* La caja de la cifra ocupa siempre lo mismo y se lee pegada a la derecha, que
   es lo que deja las cajas de colores una debajo de otra en vez de bailando con
   lo que mida cada número. */
.iat-tpl--comparador-v1 .iat-comp__filas .iat-comp__valor {
	min-width: var(--cifra);
}

.iat-tpl--comparador-v1 .iat-comp__num {
	text-align: right;
}

.iat-tpl--comparador-v1 .iat-comp__num[hidden] {
	display: none;
}

/* Con el overclock puesto, las cifras que cambian se tiñen y estrenan su
   distintivo, igual que en la ficha del coche y en el listado: así se lee de un
   vistazo cuáles son las que lo llevan sumado. */
.iat-tpl--comparador-v1 .iat-comp__oc-marca {
	display: none;
	flex: none;
}

.iat-tpl--comparador-v1 .iat-comp__tarjeta.is-overclock .iat-comp__oc-marca {
	display: inline-block;
}

.iat-tpl--comparador-v1 .iat-comp__tarjeta.is-overclock .iat-comp__cifra--oc .iat-comp__num {
	color: var(--oc, #fe7112);
}

/* La caja de la diferencia va delante del número y sólo aparece cuando hay con
   quién comparar: verde en el que gana, roja en el que pierde. */
.iat-tpl--comparador-v1 .iat-comp__dif {
	display: inline-block;
	min-width: 52px;
	padding: 0.15rem 0.4rem;
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 0.72rem;
	font-weight: 800;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.iat-tpl--comparador-v1 .iat-comp__dif[hidden] {
	display: none;
}

.iat-tpl--comparador-v1 .iat-comp__dif.is-mejor {
	border-color: var(--mejor-borde);
	background: var(--mejor);
	color: #ffffff;
}

.iat-tpl--comparador-v1 .iat-comp__dif.is-peor {
	border-color: var(--peor-borde);
	background: var(--peor);
	color: #ffffff;
}

.iat-tpl--comparador-v1 .iat-comp__coste {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

/* Añadir y compartir ------------------------------------------------------ */

/* Añadir un coche es una columna más, a la derecha de la última tarjeta: es
   justo donde va a caer el coche que abre. Se alinea con las tarjetas y no con
   los buscadores, así que se aparta la altura de uno de ellos. */
.iat-tpl--comparador-v1 .iat-comp__hueco--anadir {
	/* Tan alta como la tarjeta más alta, para que la fila no termine en un
	   escalón. El relleno de arriba es el que le deja sitio al buscador que
	   llevan las demás columnas. */
	align-self: stretch;
}

.iat-tpl--comparador-v1 .iat-comp__anadir-boton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	flex: 1;
	width: 100%;
	min-height: 220px;
	padding: 0.7rem 1.4rem;
	border: 2px dashed var(--card-border);
	border-radius: var(--radius);
	background: rgba(0, 0, 0, 0.12);
	color: var(--text);
	font-size: 0.85rem;
	font-weight: 800;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.iat-tpl--comparador-v1 .iat-comp__anadir-boton:hover {
	border-color: var(--accent);
	background: rgba(211, 85, 255, 0.12);
}

.iat-tpl--comparador-v1 .iat-comp__panel {
	position: fixed;
	z-index: 40;
	right: 1rem;
	bottom: 1rem;
	max-width: 320px;
	padding: 1rem;
	border: 1px solid var(--card-border);
	border-radius: 14px;
	background: #17001d;
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

.iat-tpl--comparador-v1 .iat-comp__panel[hidden] {
	display: none;
}

.iat-tpl--comparador-v1 .iat-comp__panel-titulo {
	margin-bottom: 0.75rem;
	font-size: 0.8rem;
	font-weight: 900;
	text-transform: uppercase;
}

.iat-tpl--comparador-v1 .iat-comp__panel-destinos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.iat-tpl--comparador-v1 .iat-comp__destino {
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--card-border);
	border-radius: 999px;
	background: transparent;
	color: var(--text);
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.iat-tpl--comparador-v1 .iat-comp__destino:hover {
	border-color: var(--accent);
	background: rgba(211, 85, 255, 0.15);
}

.iat-tpl--comparador-v1 .iat-comp__panel-aviso {
	margin-top: 0.6rem;
	color: var(--accent-soft);
	font-size: 0.75rem;
}

.iat-tpl--comparador-v1 .iat-comp__panel-aviso[hidden] {
	display: none;
}

/* Puntos del carrusel. Splide ya los esconde cuando las tarjetas caben todas,
   pero en el escritorio se apagan igual y a mano: allí caben las tres siempre
   —tres es el máximo— y unos puntos dirían que hay algo más que ver. */
.iat-tpl--comparador-v1 .splide__pagination {
	gap: 6px;
	margin-top: 1rem;
}

@media (min-width: 1025px) {
	.iat-tpl--comparador-v1 .splide__pagination {
		display: none;
	}
}

.iat-tpl--comparador-v1 .splide__pagination__page {
	width: 8px;
	height: 8px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
	cursor: pointer;
}

.iat-tpl--comparador-v1 .splide__pagination__page.is-active {
	background: var(--accent);
}

/* Teléfono ---------------------------------------------------------------- */

/* En el escritorio las columnas se ven una al lado de otra, así que un hueco a
   medio llenar deja un escalón al final de la fila: el que está vacío se estira
   hasta donde llegue la tarjeta más alta. En el teléfono no hace falta, porque
   sólo se ve una columna cada vez. */
@media (min-width: 1025px) {
	.iat-tpl--comparador-v1 .iat-comp__hueco {
		align-self: stretch;
	}

	.iat-tpl--comparador-v1 .iat-comp__cuerpo:empty {
		flex: 1;
	}
}

/* Con las tres columnas puestas el sitio es justo, así que las filas se aprietan
   un poco antes de que la cifra y su caja empiecen a pelearse por el ancho. */
@media (min-width: 1025px) and (max-width: 1280px) {
	.iat-tpl--comparador-v1 .iat-comp__filas li {
		padding-inline: 0.35rem;
		font-size: 0.74rem;
	}

	.iat-tpl--comparador-v1 .iat-comp__dif {
		min-width: 44px;
		padding-inline: 0.3rem;
		font-size: 0.66rem;
	}

	.iat-tpl--comparador-v1 .iat-comp__fila-nombre {
		gap: 0.3rem;
	}

	.iat-tpl--comparador-v1 {
		--cifra: 4rem;
	}
}

@media (max-width: 1024px) {
	.iat-tpl--comparador-v1 .iat-comp__carrusel:not(.is-active) .iat-comp__hueco {
		flex-basis: calc((100% - 1rem) / 2);
	}
}

@media (max-width: 700px) {
	.iat-tpl--comparador-v1 .iat-comp__carrusel:not(.is-active) .iat-comp__hueco {
		flex-basis: 100%;
	}

	.iat-tpl--comparador-v1 .iat-comp__panel {
		right: 1rem;
		left: 1rem;
		max-width: none;
	}
}