/**
 * Plantilla «Temporada v1».
 *
 * Todo cuelga de `.iat-tpl--temporada-v1`, incluidas las variables de color y
 * el reinicio de márgenes. A diferencia de las calculadoras, esta plantilla
 * ocupa la página entera del archivo de la temporada —entre la cabecera y el
 * pie del tema—, así que el fondo llega al borde de la ventana; el contenido,
 * portada incluida, se queda dentro de `.iat-container`.
 *
 * @package InfoAsphaltTemplates
 */

.iat-tpl--temporada-v1 {
	--card: #73008F;
	--card-alt: #2b0038;
	--card-border: #B53EE4;
	/* Fondo de una fila de características y el de la fila de rango, que cierra
	   la tabla. Van como capa negra sobre la tarjeta en vez de como hexadecimal
	   propio: así siguen al color de la tarjeta si algún día cambia. */
	--fila: rgba(0, 0, 0, 0.18);
	--fila-total: rgba(0, 0, 0, 0.42);
	--accent: #d355ff;
	--accent-soft: #dc84ff;
	--verde: #00ff88;
	--rojo: #ff4d6d;
	--text: #ffffff;
	--text-soft: #c9a2d9;
	/* Contorno y texto de un chip en reposo. */
	--chip-linea: #B53EE4;
	/* Tinta oscura para el texto sobre un relleno claro. La calcula PHP por
	   cada tipo de evento y llega en `--iat-chip-ink`; ésta es la de los chips
	   que no tienen tipo detrás. */
	--tinta: #1a0022;
	--radius: 14px;
	/* Sin fondo propio: el de la página lo pone el tema, y la plantilla se
	   limita a poner sus tarjetas y sus secciones encima. */
	box-sizing: border-box;
	color: var(--text);
	line-height: normal;
	text-align: left;
	/* Aire por arriba para no quedar pegados a la cabecera del sitio, y otro
	   tanto por abajo para no quedar pegados al pie. */
	padding: 2rem 0 4rem;
	margin: 0;
}

/* 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 lo que separa la
   plantilla de la cabecera y del pie del tema. */
.iat-tpl--temporada-v1 *,
.iat-tpl--temporada-v1 *::before,
.iat-tpl--temporada-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--temporada-v1 button,
.iat-tpl--temporada-v1 input,
.iat-tpl--temporada-v1 select,
.iat-tpl--temporada-v1 textarea {
	font-family: inherit;
}

/* Sin margen lateral: a partir de 1200 px el propio `max-width` ya separa el
   contenido del borde de la ventana, y un `padding` ahí sólo estrecha la caja.
   Por debajo de ese ancho sí hace falta, o el texto acabaría pegado al canto de
   la pantalla; el respaldo está al final de la hoja, con el resto de reglas
   para pantallas estrechas. */
.iat-tpl--temporada-v1 .iat-container {
	max-width: 1200px;
	width: 100%;
	margin-inline: auto;
	min-width: 0;
}

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

.iat-tpl--temporada-v1 a {
	color: inherit;
	text-decoration: none;
}

.iat-tpl--temporada-v1 [hidden] {
	display: none !important;
}

/* Portada ----------------------------------------------------------------- */

/* La portada ocupa el ancho del contenido, no el de la ventana: vive dentro de
   `.iat-container` como todo lo demás, así que el recorte y las esquinas son
   suyos y no hay que compensar nada contra el borde de la pantalla. */
.iat-tpl--temporada-v1 .iat-portada {
	width: 100%;
	height: 250px;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--card-alt);
}

.iat-tpl--temporada-v1 .iat-portada__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Sin portada, el contenido arranca directamente en el canto de la caja y a
   partir de 1200 px el contenedor no pone margen lateral ninguno. Estos 25 px
   son ese aire, y se los lleva también la sección de pases, que se sale del
   contenedor para pintar a sangre y devuelve el ancho por su cuenta: si sólo lo
   llevara el contenedor, su título quedaría desalineado con el resto. */
.iat-tpl--temporada-v1.iat-tpl--sin-portada .iat-container,
.iat-tpl--temporada-v1.iat-tpl--sin-portada .iat-pases__inner {
	padding-inline: 25px;
}

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

/* La cuenta atrás se alinea arriba, a la altura del overline, no con la línea
   de fechas: es un dato del estado de la temporada, no un pie del título. */
.iat-tpl--temporada-v1 .iat-cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.75rem 2.5rem;
}

/* Que encoja en lugar de empujar. Con la base en `auto` un título largo reclama
   el ancho de su línea más larga —el reparto en filas de un flex se decide con
   la base, antes de encoger nada—, la fila se queda sin sitio y la cuenta atrás
   cae debajo; el menú de anclas, que se coloca contando desde el final de la
   cabecera, se le montaba encima. Con la base a cero el título envuelve dentro
   de su columna y la cuenta atrás no se mueve de la esquina. */
.iat-tpl--temporada-v1 .iat-cabecera__texto {
	flex: 1 1 0;
	min-width: 0;
}

.iat-tpl--temporada-v1 .iat-overline {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--accent-soft);
}

.iat-tpl--temporada-v1 .iat-titulo {
	font-size: clamp(1.9rem, 5vw, 2.8rem);
	font-weight: 900;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -1px;
	margin-block: 0.35rem 0.3rem;
	color: var(--text);
}

.iat-tpl--temporada-v1 .iat-fechas {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--text);
}

/* Cuenta atrás ------------------------------------------------------------ */

.iat-tpl--temporada-v1 .iat-cuenta {
	display: inline-flex;
	align-items: baseline;
	gap: 0.45rem;
	flex: none;
	padding: 0.5rem 1rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	/* Sin ancho fijo por dígito, la píldora entera cambiaría de tamaño al pasar
	   el contador de 10 a 9. */
	font-variant-numeric: tabular-nums;
}

.iat-tpl--temporada-v1 .iat-cuenta--upcoming {
	color: var(--verde);
	background: rgba(0, 255, 136, 0.1);
}

.iat-tpl--temporada-v1 .iat-cuenta--ongoing {
	color: var(--rojo);
	background: rgba(255, 77, 109, 0.12);
}

.iat-tpl--temporada-v1 .iat-cuenta--finalizada {
	color: var(--text-soft);
	background: rgba(255, 255, 255, 0.06);
}

.iat-tpl--temporada-v1 .iat-cuenta__etiqueta {
	opacity: 0.8;
	font-weight: 700;
}

/* Enlaces rápidos --------------------------------------------------------- */

/* Se queda arriba mientras se recorre la página. Va colgado del contenedor y no
   de la cabecera porque un `sticky` sólo se despega dentro de la caja de su
   padre. `top` deja un dedo de aire para que flote en vez de quedar pegado al
   canto.

   `width: fit-content` con `margin-left: auto` es lo que clava el borde derecho:
   ahí está la clave del efecto, porque el rótulo que se abre no puede crecer
   hacia la derecha y empuja hacia la izquierda a los iconos que tenga delante,
   sin que ninguno de ellos necesite animación propia. */
.iat-tpl--temporada-v1 .iat-anclas {
	/* Alto del menú fijo del tema, que es por debajo de donde tiene que quedarse
	   éste. Vale para las dos anchuras —la cabecera del tema mide lo mismo en el
	   móvil—, así que si cambia de alto se ajusta sólo aquí. */
	--iat-tema-alto: 50px;
	/* Lo que sube para colocarse bajo la cuenta atrás en lugar de quedar
	   suelto debajo de la cabecera. Es la distancia que separa la cuenta del
	   final de la cabecera: el padding inferior de ésta más el hueco que deja la
	   columna derecha cuando el título ocupa una línea. */
	--iat-anclas-subida: 5.25rem;
	position: sticky;
	top: var(--iat-tema-alto);
	z-index: 20;
	width: fit-content;
	margin-left: auto;
	margin-top: calc(-1 * var(--iat-anclas-subida));
	/* Devuelve abajo lo que ha subido, menos su propio alto (3.1rem) y más el
	   margen que la primera sección ya traía (3rem). Ese último sumando no
	   sobra: los márgenes verticales contiguos se funden y gana el mayor, así
	   que sin él el de la sección se comía la compensación y todo lo de abajo
	   subía. Con esto el menú se mete en un hueco que ya estaba vacío y no
	   mueve ni un píxel de lo que viene después. */
	margin-bottom: calc(var(--iat-anclas-subida) - 3.1rem + 3rem);
	display: flex;
	align-items: center;
	gap: 0.85rem;
	/* Fondo propio: por debajo pasa el contenido de la página, y sin él los
	   iconos se leerían encima de una tarjeta. */
	padding: 0.6rem 1rem;
	border-radius: 999px;
	background: rgba(28, 0, 47, 0.82);
	border: 1px solid rgba(220, 132, 255, 0.25);
	backdrop-filter: blur(10px);
}

.iat-tpl--temporada-v1 .iat-ancla {
	display: inline-flex;
	align-items: center;
	/* Sin `gap`: el hueco entre icono y rótulo lo pone el propio rótulo con su
	   padding, que queda recortado mientras está colapsado. Con `gap` quedaría
	   un vacío permanente al lado de cada icono. */
	gap: 0;
	color: var(--accent-soft);
	text-decoration: none;
	border-radius: 999px;
	transition: color 0.25s ease-in-out;
}

.iat-tpl--temporada-v1 .iat-ancla__icono {
	display: inline-flex;
	width: 1.75rem;
	height: 1.75rem;
	flex: none;
}

.iat-tpl--temporada-v1 .iat-ancla__icono svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* `0fr` a `1fr` en lugar de un `max-width` con una cifra inventada: la columna
   se abre exactamente hasta lo que mide el texto, así que la curva de la
   transición se reparte por el recorrido real y no termina a media animación
   en los rótulos cortos. */
.iat-tpl--temporada-v1 .iat-ancla__texto {
	display: grid;
	grid-template-columns: 0fr;
	opacity: 0;
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	white-space: nowrap;
	transition:
		grid-template-columns 0.35s ease-in-out,
		opacity 0.25s ease-in-out;
}

.iat-tpl--temporada-v1 .iat-ancla__texto > span {
	overflow: hidden;
	padding-left: 0;
	transition: padding-left 0.35s ease-in-out;
}

.iat-tpl--temporada-v1 .iat-ancla:hover,
.iat-tpl--temporada-v1 .iat-ancla:focus-visible {
	color: var(--text);
}

.iat-tpl--temporada-v1 .iat-ancla:hover .iat-ancla__texto,
.iat-tpl--temporada-v1 .iat-ancla:focus-visible .iat-ancla__texto {
	grid-template-columns: 1fr;
	opacity: 1;
}

.iat-tpl--temporada-v1 .iat-ancla:hover .iat-ancla__texto > span,
.iat-tpl--temporada-v1 .iat-ancla:focus-visible .iat-ancla__texto > span {
	padding-left: 0.5rem;
}

/* Donde no hay puntero no hay hover, y un menú de cuatro iconos sin rótulo no
   se entiende. En pantalla táctil los rótulos salen puestos. */
@media (hover: none) {
	.iat-tpl--temporada-v1 .iat-anclas {
		flex-wrap: wrap;
	}

	.iat-tpl--temporada-v1 .iat-ancla__texto {
		grid-template-columns: 1fr;
		opacity: 1;
	}

	.iat-tpl--temporada-v1 .iat-ancla__texto > span {
		padding-left: 0.5rem;
	}
}

/* Quien pide menos movimiento sigue viendo el rótulo al pasar por encima; lo
   que se va es el deslizamiento, que es lo que molesta. */
@media (prefers-reduced-motion: reduce) {
	.iat-tpl--temporada-v1 .iat-ancla,
	.iat-tpl--temporada-v1 .iat-ancla__texto,
	.iat-tpl--temporada-v1 .iat-ancla__texto > span {
		transition: none;
	}
}

/* En el móvil el menú es sólo iconos, centrado. Cuatro rótulos no caben a lo
   ancho, y dejarlos puestos partía la píldora en tres líneas.

   Va después del bloque de `hover: none` para ganarle: un teléfono cumple las
   dos condiciones, y aquí manda el ancho. */
@media (max-width: 600px) {
	/* Aquí sí queremos que la cuenta atrás baje a su propia fila: no caben las
	   dos cosas a lo ancho de un teléfono. */
	.iat-tpl--temporada-v1 .iat-cabecera__texto {
		flex-basis: 100%;
	}

	.iat-tpl--temporada-v1 .iat-anclas {
		/* Aquí no sube: con la cabecera partida en dos filas, la cuenta atrás
		   ya no deja hueco al lado que aprovechar. */
		--iat-anclas-subida: 0px;
		margin-inline: auto;
		margin-bottom: 1.5rem;
		justify-content: center;
	}

	/* Escondido para la vista, no para quien lee la página en voz alta: el
	   icono es `aria-hidden`, así que este texto es el único nombre que tiene
	   el enlace. Con `display: none` serían cuatro enlaces sin nombre. */
	.iat-tpl--temporada-v1 .iat-ancla__texto {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		opacity: 1;
	}
}

/* Secciones --------------------------------------------------------------- */

/* Aire por arriba al saltar desde el menú: por encima del destino se quedan el
   menú fijo del tema (40px) y, debajo, la propia píldora (3.1rem), así que el
   destino tiene que caer más abajo que los dos juntos. Los 40px sueltos son el
   aire que se le añade encima: sin ellos el título aterriza justo al canto de la
   píldora y —sobre todo en el móvil, donde va centrada y a todo lo ancho— queda
   tapado por ella. La cuenta es la misma en las dos anchuras porque la cabecera
   del tema ya mide igual en las dos.

   Va como `scroll-padding-top` del contenedor de scroll y no como
   `scroll-margin-top` de cada destino porque el margen hay que acertar a
   ponérselo al elemento exacto, y el padding se lo pide al que scrollea, que es
   siempre el mismo: vale para cualquier destino sin saber cómo está montada la
   página. La hoja sólo se carga donde hay menú, así que no toca ninguna otra.

   Esto es la red, no el salto de verdad. Un tema que se quede los clics en los
   enlaces `#` y calcule el destino a su manera se salta esta medida entera, y es
   lo que pasa aquí: de eso se ocupa `anclas.js`, que mide la píldora en vivo. Lo
   de abajo es lo que vale al entrar por una URL con `#` y lo que queda si el
   script no llega a cargar, así que la cifra sigue haciendo falta. */
:root {
	scroll-padding-top: calc(40px + 3.1rem + 40px);
}

.iat-tpl--temporada-v1 .iat-seccion {
	margin-top: 3rem;
}

.iat-tpl--temporada-v1 .iat-seccion__titulo {
	font-size: 1.4rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 1.25rem;
	color: var(--text);
}

/* Filtros ----------------------------------------------------------------- */

.iat-tpl--temporada-v1 .iat-filtros {
	margin-bottom: 1.25rem;
}

.iat-tpl--temporada-v1 .iat-filtros__titulo {
	display: block;
	margin-bottom: 0.5rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--text-soft);
}

.iat-tpl--temporada-v1 .iat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

/* El grupo de tipo de evento no va en chips sino en el desplegable compartido de
   InfoAsphalt, el mismo que el filtro del calendario: con más de una docena de
   tipos, la fila se desbordaba a dos líneas y ocupaba más que la rejilla que
   filtra. Aquí sólo va su paleta, que es todo lo que esa hoja pide.

   Sobre la raíz de la plantilla, que envuelve al control: la hoja compartida
   lleva sus valores neutros como reserva de cada `var()` justamente para que
   vestirlo desde un ancestro funcione. */
.iat-tpl--temporada-v1 {
	--ia-select-edge: var(--chip-linea);
	--ia-select-edge-hover: var(--accent-soft);
	--ia-select-bg: var(--card-alt);
	--ia-select-ink: var(--text);
	--ia-select-apagado: var(--text-soft);
}

/* En reposo todos los chips son iguales: sin fondo, contorno y texto en el
   morado de la plantilla. El color del tipo de evento sólo aparece al señalarlo
   o al activarlo, que es cuando dice algo — así una fila de nueve filtros no es
   nueve colores compitiendo entre sí. */
.iat-tpl--temporada-v1 .iat-chip {
	/* Los chips sin tipo detrás —«Ver todos», los estados de evento— se rellenan
	   de blanco al activarse, que es el contraste máximo sobre el fondo. */
	--iat-chip-color: var(--text);
	--iat-chip-ink: var(--tinta);
	border: 1px solid var(--chip-linea);
	background: transparent;
	color: var(--chip-linea);
	border-radius: 999px;
	padding: 0.35rem 0.85rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.iat-tpl--temporada-v1 .iat-chip:hover,
.iat-tpl--temporada-v1 .iat-chip.is-on {
	background: var(--iat-chip-color);
	border-color: var(--iat-chip-color);
	color: var(--iat-chip-ink);
}

.iat-tpl--temporada-v1 .iat-vacio {
	padding: 1.5rem 0;
	color: var(--text-soft);
	font-size: 0.9rem;
}

/* Rejillas ---------------------------------------------------------------- */

.iat-tpl--temporada-v1 .iat-rejilla {
	display: grid;
	gap: 1rem;
}

.iat-tpl--temporada-v1 .iat-rejilla--coches {
	grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
}

.iat-tpl--temporada-v1 .iat-rejilla--eventos {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Tarjeta de coche -------------------------------------------------------- */

/* La tarjeta la pinta el partial compartido y la viste `tarjeta-coche.css`, que
   se encola antes que esta hoja; lo único que pone la temporada son las
   variables de color de arriba, con las que la tarjeta se tiñe. */

/* Botones ----------------------------------------------------------------- */

.iat-tpl--temporada-v1 .iat-boton {
	display: block;
	margin-top: auto;
	padding: 0.7rem 1rem;
	border: 1px solid var(--text);
	border-radius: 999px;
	text-align: center;
	font-size: 0.85rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	color: var(--text);
	transition: background-color 0.15s ease, color 0.15s ease;
}

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

/* Barra de desplazamiento ---------------------------------------------------
   Fina y rosa sobre pista transparente, en todo lo que desplace dentro del
   bloque. `scrollbar-width` y `scrollbar-color` se heredan, así que declararlas
   en la raíz alcanza a lo que hay hoy y a lo que se añada mañana; los
   pseudoelementos de WebKit no heredan y hay que nombrarlos aparte, y siguen
   haciendo falta mientras haya Safari sin las propiedades estándar. */
.iat-tpl--temporada-v1 {
	scrollbar-width: thin;
	scrollbar-color: var( --ia-scroll, #DC84FF ) transparent;
}

.iat-tpl--temporada-v1::-webkit-scrollbar,
.iat-tpl--temporada-v1 *::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.iat-tpl--temporada-v1::-webkit-scrollbar-track,
.iat-tpl--temporada-v1 *::-webkit-scrollbar-track {
	background: transparent;
}

.iat-tpl--temporada-v1::-webkit-scrollbar-thumb,
.iat-tpl--temporada-v1 *::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: var( --ia-scroll, #DC84FF );
}

/* Tarjeta de evento ------------------------------------------------------- */

.iat-tpl--temporada-v1 .iat-evento {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem;
	background: var(--card);
	/* El color del tipo de evento entra por el borde izquierdo: es lo que deja
	   agrupar la rejilla de un vistazo sin repetir la etiqueta en cada línea.
	   Al costado y no arriba porque así lo lleva también la tarjeta de ranking,
	   y las dos rejillas conviven en la misma página. */
	border: 1px solid var(--card-border);
	border-left: 3px solid var(--iat-evento-color, var(--accent));
	border-radius: var(--radius);
}

/* El estado a la izquierda y el tipo a la derecha, como en la tarjeta de coche:
   la etiqueta de color cae en la misma esquina en las dos rejillas. */
.iat-tpl--temporada-v1 .iat-evento__cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.iat-tpl--temporada-v1 .iat-evento__cab .iat-etiquetas {
	justify-content: flex-end;
}

.iat-tpl--temporada-v1 .iat-estado {
	flex: none;
	border-radius: 999px;
	padding: 0.15rem 0.5rem;
	font-size: 0.6rem;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: rgba(255, 255, 255, 0.08);
	color: var(--text-soft);
}

.iat-tpl--temporada-v1 .iat-estado--ongoing {
	background: rgba(0, 255, 136, 0.15);
	color: var(--verde);
}

.iat-tpl--temporada-v1 .iat-estado--upcoming {
	background: rgba(211, 85, 255, 0.18);
	color: var(--accent-soft);
}

/* El título va en blanco enlace o no: que un evento tenga a dónde apuntar no
   debería cambiar cómo se lee su nombre en la rejilla. */
.iat-tpl--temporada-v1 .iat-evento__nombre,
.iat-tpl--temporada-v1 .iat-evento__nombre a {
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--text);
}

.iat-tpl--temporada-v1 .iat-evento__nombre a:hover {
	color: var(--accent-soft);
}

/* En la tarjeta de un evento las fechas son un dato secundario bajo el título,
   no la línea de cabecera de la página, así que se quedan apagadas. */
.iat-tpl--temporada-v1 .iat-fechas--evento {
	font-size: 0.75rem;
	color: var(--text-soft);
}

.iat-tpl--temporada-v1 .iat-evento__foto {
	background: var(--card-alt);
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}

.iat-tpl--temporada-v1 .iat-evento__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.iat-tpl--temporada-v1 .iat-evento__coches {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	font-size: 0.78rem;
	/* En redonda: la negrita se reserva para el coche principal, que es lo que
	   la lista tiene que distinguir de un vistazo. */
	font-weight: 400;
}

.iat-tpl--temporada-v1 .iat-evento__coche.is-principal {
	font-weight: 800;
}

.iat-tpl--temporada-v1 .iat-evento__coches a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

/* El mismo icono de clase que la tarjeta de coche, delante del nombre. */
.iat-tpl--temporada-v1 .iat-evento__clase {
	flex: none;
	width: 24px;
	height: auto;
}

/* El punto de siempre, para los coches cuya clase no tiene dibujo: ocupa lo
   mismo que el icono, así que la lista sigue alineada aunque se mezclen. */
.iat-tpl--temporada-v1 .iat-evento__punto {
	flex: none;
	width: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.iat-tpl--temporada-v1 .iat-evento__punto::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--iat-evento-color, var(--accent));
}

.iat-tpl--temporada-v1 .iat-evento__coches a:hover {
	color: var(--accent-soft);
}

/* Otra información -------------------------------------------------------- */

.iat-tpl--temporada-v1 .iat-notas {
	background: var(--card);
	border: 1px solid var(--card-border);
	border-radius: var(--radius);
	padding: 1.5rem;
	line-height: 1.6;
	font-size: 0.95rem;
	color: var(--text);
}

.iat-tpl--temporada-v1 .iat-notas > * + * {
	margin-top: 1rem;
}

.iat-tpl--temporada-v1 .iat-notas h1,
.iat-tpl--temporada-v1 .iat-notas h2,
.iat-tpl--temporada-v1 .iat-notas h3,
.iat-tpl--temporada-v1 .iat-notas h4 {
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	line-height: 1.2;
	color: var(--accent-soft);
	margin-top: 1.75rem;
}

.iat-tpl--temporada-v1 .iat-notas h1 { font-size: 1.3rem; }
.iat-tpl--temporada-v1 .iat-notas h2 { font-size: 1.15rem; }
.iat-tpl--temporada-v1 .iat-notas h3 { font-size: 1rem; }
.iat-tpl--temporada-v1 .iat-notas h4 { font-size: 0.9rem; }

.iat-tpl--temporada-v1 .iat-notas ul,
.iat-tpl--temporada-v1 .iat-notas ol {
	padding-left: 1.25rem;
}

.iat-tpl--temporada-v1 .iat-notas li + li {
	margin-top: 0.35rem;
}

.iat-tpl--temporada-v1 .iat-notas a {
	color: var(--accent-soft);
	text-decoration: underline;
}

.iat-tpl--temporada-v1 .iat-notas img,
.iat-tpl--temporada-v1 .iat-notas iframe,
.iat-tpl--temporada-v1 .iat-notas video {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

/* Un embed de WordPress trae su propia proporción; lo único que hace falta es
   que no se salga del ancho de la tarjeta. */
.iat-tpl--temporada-v1 .iat-notas .wp-video,
.iat-tpl--temporada-v1 .iat-notas .wp-embedded-content,
.iat-tpl--temporada-v1 .iat-notas iframe {
	max-width: 100%;
}

/* Pantallas estrechas ----------------------------------------------------- */

/* En cuanto la ventana baja del ancho del contenedor, el margen que antes ponía
   el `max-width` desaparece y hay que devolvérselo al contenido. */
@media (max-width: 1200px) {
	.iat-tpl--temporada-v1 .iat-container {
		padding-inline: 1rem;
	}
}

@media (max-width: 600px) {
	.iat-tpl--temporada-v1 .iat-portada {
		height: 170px;
	}

	.iat-tpl--temporada-v1 .iat-notas {
		padding: 1rem;
	}
}

/* Pases de temporada ------------------------------------------------------ */

/* La única sección con fondo propio, y a sangre: se sale del contenedor por
   los lados para pintar de borde a borde de la ventana, y devuelve el ancho
   dentro. `100vw` incluye la barra de desplazamiento, así que el margen se
   calcula contra el ancho del propio elemento y no contra el de la ventana. */
.iat-tpl--temporada-v1 .iat-pases {
	margin-inline: calc(50% - 50vw);
	padding: 2.5rem 0 3rem;
	background: #1C002F;
}

/* El mismo ancho que `.iat-container`, y por debajo de 1200 px también su mismo
   margen lateral: la sección se sale del contenedor para pintar a sangre, y con
   ella se lleva el `padding` que separa el contenido del canto de la pantalla.
   Sin devolverlo aquí, el título y las tarjetas quedaban pegados a los bordes. */
.iat-tpl--temporada-v1 .iat-pases__inner {
	max-width: 1200px;
	margin-inline: auto;
}

@media (max-width: 1200px) {
	.iat-tpl--temporada-v1 .iat-pases__inner {
		padding-inline: 1rem;
	}
}

/* Las tarjetas se ajustan a su contenido: el pase con un coche queda estrecho
   y el de dos, ancho, como en el juego. */
.iat-tpl--temporada-v1 .iat-pases__lista {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	align-items: stretch;
}

.iat-tpl--temporada-v1 .iat-pase {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	border: 1px solid #73008F;
	border-radius: var(--radius);
	background: #510066;
}

.iat-tpl--temporada-v1 .iat-pase__nombre {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1.05rem;
	font-weight: 800;
	color: var(--text);
}

/* El icono hereda el color del título, que es lo que distingue los dos pases. */
.iat-tpl--temporada-v1 .iat-pase__nombre .iat-asset--svg svg {
	display: block;
	width: 22px;
	height: 22px;
}

.iat-tpl--temporada-v1 .iat-pase--ultimate .iat-pase__nombre {
	color: #FFF9AC;
}

.iat-tpl--temporada-v1 .iat-pase__coches {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.iat-tpl--temporada-v1 .iat-pase__coche {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 18.5rem;
	max-width: 100%;
}

.iat-tpl--temporada-v1 .iat-pase__imagen {
	display: block;
	overflow: hidden;
	border-radius: calc(var(--radius) - 4px);
	line-height: 0;
}

.iat-tpl--temporada-v1 .iat-pase__imagen img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.iat-tpl--temporada-v1 .iat-pase__rotulo {
	margin: 0;
	color: var(--accent-soft);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.iat-tpl--temporada-v1 .iat-pase__coche-nombre {
	margin: 0;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.25;
}

.iat-tpl--temporada-v1 .iat-pase__coche-nombre a {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--text);
	text-decoration: none;
}

/* El mismo icono de clase que la tarjeta de coche y que la lista de premios de
   un evento. Algo mayor que allí porque aquí el nombre también lo es. */
.iat-tpl--temporada-v1 .iat-pase__clase {
	flex: none;
	width: 28px;
	height: auto;
}

.iat-tpl--temporada-v1 .iat-pase__coche-nombre a:hover,
.iat-tpl--temporada-v1 .iat-pase__coche-nombre a:focus-visible {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.iat-tpl--temporada-v1 .iat-pase,
	.iat-tpl--temporada-v1 .iat-pase__coche {
		width: 100%;
	}
}