@charset "utf-8";

/****

Expo Motores 2026 — tema del proyecto
Basado en WebSet 3.1.0

Este es el único archivo que se toca al arrancar un proyecto: define la paleta,
la tipografía y el CSS ad-hoc del diseño. common.css no se edita nunca.

Los tokens van en tres capas:
  1. La paleta de la marca, con nombres de color.
  2. Los roles: qué hace cada color en el sistema.
  3. Los pares: con qué color se escribe encima de cada superficie.

****/


/**** Tipografía ****/

/* REM (SIL OFL 1.1, Google Fonts), la tipografía de la marca. Auto-hospedada,
   solo el subset latin; es variable, un archivo por estilo cubre de 400 a 800. */
@font-face {
	font-family: "REM";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/rem.woff2") format("woff2");
}
@font-face {
	font-family: "REM";
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/rem-italic.woff2") format("woff2");
}


/**** 1. Paleta de la marca ****/

:root {
	--rojo:         #ed1c24;   /* el rojo del logo */
	--rojo-vivo:    #d71920;
	--rojo-hondo:   #9f1115;
	--rojo-fondo:   #7a0d11;
	--negro:        #231f20;
	--gris-papel:   #f1f1f2;
	--gris-medio:   #c9c9cb;
	--blanco:       #ffffff;
}


/**** 2. Roles ****/

:root {
	--page-w: 75.5rem;

	--fon-t: "REM", system-ui, sans-serif;
	--fon-h: var(--fon-t);

	--sca-t: clamp(1rem, .93rem + .3vw, 1.125rem);
	--sca-lh: 1.15em;
	--sca-mar: 1rem;
	--sca-pad: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem);

	--fon-w1: 400;
	--fon-w5: 500;
	--fon-w7: 700;
	--fon-w9: 800;

	/* Contraste sobre --surface (#f1f1f2):
	   negro 15,6:1  ·  rojo-vivo 5,2:1 (texto de acento) */
	--text:            var(--negro);
	--text-muted:      #5a5658;
	--surface:         var(--gris-papel);
	--surface-alt:     color-mix(in srgb, var(--negro) 6%, transparent);
	--surface-inverse: var(--rojo-hondo);
	--border:          var(--gris-medio);
	--accent:          var(--rojo-vivo);
	--accent-fill:     var(--rojo-vivo);

	--critical: #b3261e;
	--positive: #1b7f4a;

	--rad-s: 0;
	--rad-m: 0;
	--rad-l: 0;
	--rad-bt: 0;

	--sha-s: none;
	--sha-m: none;
	--sha-l: none;

	--ani-f: 500ms cubic-bezier(.7, 0, .3, 1);
}


/**** 3. Pares fondo / texto ****/

:root {
	--on-inverse:     var(--blanco);   /* sobre --surface-inverse */
	--on-accent-fill: var(--blanco);   /* sobre un botón */
	--on-media:       var(--blanco);   /* sobre una foto */
}


/**** Ajustes de diseño ****/

/* Los títulos de la marca van en cursiva y mayúsculas, como en el PDF */
:is(.main, .hero) :is(h1, h2) {
	font-style: italic;
	text-transform: uppercase;
}

/* Fondo rojo de las secciones oscuras: el degradé del PDF */
.section.bg {
	background-image: linear-gradient(180deg, var(--rojo-vivo), var(--rojo-fondo));
}

/* Portada: la tapa del PDF. Todo se ubica en porcentajes de un recuadro con
   la proporción de la página (595 x 842), para que la composición escale
   entera. El rojo y el gris corren de borde a borde; el recuadro va centrado. */
.header.transparent + .hero.portada {
	min-block-size: 0;
	margin-block-start: 0;
}
.portada {
	display: block;
	background: linear-gradient(180deg, #e4e4e5 40%, #fff);
	color: var(--text);

	/* El tajo rojo en diagonal de la tapa */
	&::before {
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(180deg, var(--rojo-vivo), var(--rojo-hondo) 60%);
		clip-path: polygon(0 0, 100% 0, 100% 52.7%, 0 61.7%);
	}
	& .arte {
		container-type: inline-size;
		position: relative;
		aspect-ratio: 595 / 930;
		inline-size: min(100%, 46rem);
		margin-inline: auto;
	}
	& .arte > img {
		position: absolute;
		block-size: auto;
		max-inline-size: none;
	}
	& .arte > img.espejo {
		scale: -1 1;
	}
	/* Fecha y bajada, entre el logo y los vehículos */
	& .datos {
		position: absolute;
		inset: 43.2% 0 auto;
		padding-inline: 6%;
		color: var(--blanco);
	}
	& h1 {
		margin: 0;
		color: var(--blanco);
		font-size: 4.4cqi;
	}
	& .datos p {
		margin: .5em 0 0;
		font-size: 2.6cqi;
		text-wrap: balance;
	}
}

/* Logo del header y el footer */
.header .branding img,
.footer .branding img {
	block-size: 2.25rem;
	inline-size: auto;
}

/* Íconos de las cards y columnas: los del PDF del cliente, tal cual */
.main :is(.card, .col, .col3) > img.icon {
	inline-size: auto;
	block-size: 6rem;
	margin-inline: auto;
}
.col3 {
	text-align: center;
}

/* Experiencia Racing: la composición del PDF. Las tres fotos se superponen
   (la fórmula arriba) y las motos van espejadas, como en el original. Las
   medidas son porcentajes del recuadro, que mantiene la proporción del PDF. */
.section.bg.racing {
	background: #9f1115 url("../images/fondo-racing.webp") center / cover no-repeat;
}
.racing .composicion {
	position: relative;
	inline-size: min(100%, 42rem);
	margin-inline: auto;
	aspect-ratio: 595 / 383;
	overflow: clip;
	margin-block-start: var(--flow);

	& > img {
		position: absolute;
		block-size: auto;
	}
	& > img:nth-child(1) { inset: 2.7% auto auto -2.5%; inline-size: 65.7%; }
	& > img:nth-child(2) { inset: 0 auto auto 51.2%; inline-size: 63.2%; scale: -1 1; }
	& > img:nth-child(3) { inset: 15.4% auto auto -3.1%; inline-size: 101.4%; }
}

.card:not(.bg) {
	background: transparent;
	border-color: transparent;
	box-shadow: none;
}
.main picture > img {
	box-shadow: none;
}

/* Auspiciantes: logos en blanco sobre el rojo */
.sponsors .row {
	align-items: center;
}
.sponsors .col > img {
	block-size: 4rem;
	inline-size: auto;
	margin-inline: auto;
}

/* Por qué vale la pena venir y Cómo llegar: títulos en color de acento */
:is(.razones, .destacados) h3 {
	color: var(--accent);
}

/* Botón flotante de WhatsApp */
.whatsapp {
	position: fixed;
	inset: auto 1.25rem 1.25rem auto;
	z-index: var(--z-header);
	display: grid;
	place-items: center;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border-radius: 50%;
	color: var(--blanco);
	background: #128c4a;
	box-shadow: 0 .25rem .75rem rgb(0 0 0 / .3);
	transition: scale var(--ani-f);

	&:hover {
		scale: 1.08;
	}
	& .icon {
		inline-size: 1.75rem;
		block-size: 1.75rem;
	}
}

/* Footer: aire entre el logo y el texto */
.footer .branding + p {
	margin-block-start: 1.5rem;
}
/* El footer va pegado al mapa; y deja lugar al botón flotante al final */
.section:has(> .map) {
	padding-block-end: 0;
}
.footer {
	padding-block-end: 5.5rem;
}

/* Header sobre rojo: el botón del menú va en blanco (el acento es rojo también)
   y el nav desplegable no lleva el filete gris de arriba */
.header.bg .bt-menu {
	color: var(--on-inverse);
}
@media (width <= 960px) {
	.header.bg nav {
		border-block-start-color: transparent;
	}
}