/*! BaseBlue — base. Designed and developed by Luis Koepke — https://www.luiskoepke.com */

/* ==========================================================================
   BASE DEL SITIO

   La única fuente de tokens del sitio estático y el reinicio. La cargan
   todas las páginas, antes que nada: la cabecera (`header.css`), la
   secuencia de la portada (`sequence.css`), el sistema (`site.css`) y las
   piezas de página leen de aquí sus colores, su escala y su rejilla. Una
   sección nunca define su propio azul ni su propio cuerpo de letra.

   El panel no carga este archivo (trae un reinicio de página de tinta):
   carga `tokens.css`, que repite estos valores con los nombres `--bb-*`.
   Si cambia un color aquí, cambia también allí.
   ========================================================================== */

@font-face {
	font-family: "Outfit";
	src: url("../fonts/outfit-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* ----------------------------------------------------------------- Tokens */

:root {
	/* ANCHO DE DISEÑO. El Figma está dibujado sobre un lienzo de 1728 px, así
	   que cada medida se expresa como su fracción de ese lienzo. El tope de
	   192 rem es lo que impide que en un Studio Display de 2560 la tipografía
	   siga creciendo: a partir de ahí solo aparece más aire a los lados. */
	--w: min(100vw, 192rem);

	/* Superficies. El papel es neutro: con el tinte azul de antes, sumado al
	   segundo plano azulado, la página se leía «lavada» (HOME-V3 §5). */
	--bb-ink: #0e0e0e;
	--bb-ink-2: #15171a;           /* solo la tarjeta de dato (Home 40): tono sobre tinta */
	--bb-navy: #0a1b2b;
	--bb-paper: #f4f4f2;
	--bb-paper-2: #ebebe8;         /* solo marcador de carga de imagen; nunca fondo de bloque */
	--bb-flood: #0055b7;
	--bb-pale: #dee3eb;
	--bb-sky: #bbddff;

	/* El color con el que se tiñe el documento. Lo escriben `site.js` y la
	   secuencia; el montaje pone el de la superficie inicial en <html>. */
	--page-bg: #0e0e0e;

	/* Tintas por superficie: metadatos al 64 %, lectura al 80 %, filetes al
	   12 %. Las tres pasan AA sobre #f4f4f2 y sobre #0e0e0e. */
	--muted-paper: rgba(10, 27, 43, 0.64);
	--muted-ink: rgba(222, 227, 235, 0.64);
	--text2-paper: rgba(10, 27, 43, 0.8);
	--text2-ink: rgba(222, 227, 235, 0.8);
	--rule-paper: rgba(10, 27, 43, 0.12);
	--rule-ink: rgba(222, 227, 235, 0.12);

	/* Error de formulario (fix de integración, revisión del sitio): un solo rojo
	   funcional, nunca decorativo. Las dos variantes pasan AA sobre su papel. */
	--error-paper: #b3261e;
	--error-ink: #ff8a80;

	/* Esquinas: las piezas se separan del fondo por el aire, no por una línea.
	   Tres radios y ya (RONDA4 §2.4): s = controles, m = todo medio
	   recortado, l = lo que tiene fondo propio (tarjeta de dato, lámina
	   «Join us», escenario del hero de página, panel del menú). Los nombres
	   viejos quedan como alias para no romper parciales de otras manos. */
	--r-s: 0.8rem;
	--r-m: clamp(1.2rem, calc(var(--w) * 0.0087), 1.8rem);
	--r-l: clamp(1.4rem, calc(var(--w) * 0.0104), 2rem);
	--r-btn: var(--r-s);
	--r-media: var(--r-m);
	--r-card: var(--r-l);
	/* Relleno de la única familia de tarjetas con fondo. */
	--card-pad: clamp(2.4rem, calc(var(--w) * 0.033), 4.8rem);

	/* Rejilla y aire */
	--max: 192rem;
	--cols: 12;
	--gutter: clamp(1.2rem, calc(var(--w) * 0.0104), 2rem);
	--margin: calc(var(--w) * 0.048);
	--sec-pad: clamp(9.6rem, 15svh, 19.2rem);
	/* Unión de dos secciones de la MISMA superficie: el color no separa, así
	   que separa un filete y algo más de medio relleno (RONDA4 §2.1; 0,6 y
	   no 0,55: tras el hero de página la junta caía por debajo de 190 px). */
	--sec-join: calc(var(--sec-pad) * 0.6);
	/* Único margen de una lámina separada del borde de la ventana. */
	--edge: 1.6rem;
	/* Título → componente, y componente → nota. */
	--p-space: clamp(4.8rem, 9svh, 11rem);
	--p-space-s: clamp(2.4rem, 4.4svh, 5.2rem);
	--head-gap: clamp(2rem, 3.2svh, 3.2rem);        /* titular → texto */
	--block-gap: clamp(4.8rem, 8svh, 9.6rem);       /* bloque de texto → imagen o lista */

	/* Cabecera. La marca firma, no anuncia: unos 150 px en un portátil de
	   1440, con suelo y techo. El alto se proporciona a la marca: con 11 svh
	   la franja crecía sin control en pantallas altas. */
	--header-h: clamp(6.4rem, 9svh, 8.8rem);
	--logo-w: clamp(12rem, calc(var(--w) * 0.104), 16rem);
	--burger-w: 2.4rem;

	/* Tipografía de la secuencia. El titular del hero conserva «Powering the
	   Future» (lo pidió el cliente y está en su Figma), a un cuerpo que ya no
	   se come la escena; la línea de valor de debajo sube al cuerpo de
	   entrada. Cada tamaño lleva un tope por ALTURA: el recorrido vive dentro
	   de una pantalla y en un portátil bajo no puede desbordarla. */
	--t-hero: min(calc(var(--w) * 0.085), 15svh);
	--t-hero-sub: var(--t-lead);
	--t-phrase: min(calc(var(--w) * 0.0417), 8svh);
	--t-phrase-sub: min(calc(var(--w) * 0.0139), 2.6svh);
	--t-cta: clamp(1.35rem, calc(var(--w) * 0.0096), 1.6rem);
	--t-menu: min(calc(var(--w) * 0.03), 5.6svh);
	/* Rótulos de la cabecera y del pie del hero: en caja de frase y sin
	   tracking necesitan el cuerpo de los rótulos de sección. */
	--t-micro: clamp(1.25rem, calc(var(--w) * 0.009), 1.4rem);

	/* Tipografía de sección. Escala editorial: el titular manda por aire y
	   por peso, no por tamaño. Fuera de la secuencia nada pasa de 50 px a
	   1440 (HOME-V3 §10.1): el display y la cifra llevan tope, y el H2 lo
	   acompaña para no alcanzar al display en un Studio Display. */
	--t-display: clamp(3.4rem, calc(var(--w) * 0.0347), 5.6rem);
	/* H1 de página: un escalón sobre el display, muy por debajo del hero. */
	--t-page: clamp(3.8rem, calc(var(--w) * 0.0417), 6rem);
	--t-h2: min(calc(var(--w) * 0.0278), 6svh, 4.4rem);
	--t-h3: clamp(1.9rem, calc(var(--w) * 0.0153), 2.6rem);
	--t-lead: clamp(1.65rem, calc(var(--w) * 0.0135), 2.2rem);
	--t-body: clamp(1.55rem, calc(var(--w) * 0.0111), 1.8rem);
	--t-small: clamp(1.3rem, calc(var(--w) * 0.0094), 1.5rem);
	--t-eyebrow: clamp(1.25rem, calc(var(--w) * 0.009), 1.4rem);
	/* La única medida en mayúsculas (`.caps`). */
	--t-caps: 1.25rem; /* el mínimo del sitio (RONDA4 §2.3) */
	/* Una cifra acompaña al titular, no lo supera. */
	--t-num: clamp(3.2rem, calc(var(--w) * 0.0306), 4.4rem);

	/* MOVIMIENTO (RONDA4 §2.6). Cuatro duraciones, dos curvas y un
	   escalonado para todo el sitio: así cada sección late al mismo tempo.
	   Nada pasa de `--dur-4` salvo el asentamiento de la imagen. `site.js`
	   repite estos valores en `BB.dur` para GSAP y los bucles. */
	--dur-1: 0.2s;    /* color, opacidad de interfaz */
	--dur-2: 0.45s;   /* hover de forma, menús, paneles pequeños */
	--dur-3: 0.8s;    /* entradas de texto */
	--dur-4: 1.1s;    /* recortes de imagen, filetes que se dibujan */
	--dur-settle: 1.4s; /* la escala interior de una imagen al asentarse */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* toda entrada y todo hover */
	--ease-io: cubic-bezier(0.65, 0, 0.35, 1);   /* recortes, trazos, cruces */
	--ease: var(--ease-out);                     /* alias: no usar en código nuevo */
	--stagger: 60ms;  /* listas y líneas; como mucho seis pasos */
	--stagger-w: 20ms; /* palabras */
	--rise: 2.4rem;   /* distancia de `rv-up` */
}

/* RETRATO. La referencia no reescala su portada en vertical: cambia de
   componente, con otras cifras. Esta tanda es su equivalente tipográfico y
   cubre iPhone, iPad en vertical y el iPad en multitarea. */
@media (orientation: portrait) {
	:root {
		--margin: 5.4vw;
		--sec-pad: clamp(7.2rem, 12svh, 14rem);
		--edge: 0.8rem;
		--rise: 1.6rem;
		--head-gap: 1.6rem;
		--block-gap: clamp(3.6rem, 6svh, 5.6rem);

		--header-h: clamp(5.6rem, 7.6svh, 7.2rem);
		/* ~30 % del ancho de un iPhone, con techo para el iPad. */
		--logo-w: min(30vw, 12rem);
		--burger-w: 2.2rem;

		--t-hero: min(14vw, 12svh);
		--t-phrase: min(8.6vw, 7svh);
		--t-phrase-sub: clamp(1.4rem, 4.1vw, 2rem);
		--t-cta: clamp(1.3rem, 3.4vw, 1.6rem);
		--t-menu: min(9vw, 5.4svh, 4.8rem); /* el iPad vertical no supera al portátil */
		--t-micro: clamp(1.2rem, 3.3vw, 1.35rem);

		/* El tercer tope solo actúa en tableta: en un iPad vertical el vw
		   daría titulares y cifras más grandes que en el portátil. En el
		   iPhone manda siempre el vw. */
		--t-display: min(8vw, 6svh, 4.8rem);
		--t-h2: min(6.6vw, 5svh, 3.6rem);
		--t-h3: clamp(1.8rem, 4.8vw, 2.4rem);
		--t-lead: clamp(1.55rem, 4.2vw, 2rem);
		--t-body: clamp(1.5rem, 4vw, 1.7rem);
		--t-small: clamp(1.25rem, 3.3vw, 1.45rem);
		--t-eyebrow: clamp(1.2rem, 3.3vw, 1.35rem);
		--t-num: min(9.2vw, 6svh, 4.4rem);
	}
}

/* Retrato o ventana estrecha: el título de página y el aire del kit
   cambian con la rejilla (4 columnas), no solo con la orientación. */
@media (orientation: portrait), (max-width: 899px) {
	:root {
		--t-page: min(10.2vw, 7.4svh, 5.6rem);
		--p-space: clamp(4rem, 7svh, 8rem);
	}
}

/* Apaisado muy bajo (el móvil girado): la misma marca que en vertical y una
   franja que no se coma la poca altura que hay. */
@media (orientation: landscape) and (max-height: 520px) {
	:root {
		--header-h: clamp(5.2rem, 14svh, 6.4rem);
		--logo-w: 11.6rem;
	}
}

/* ------------------------------------------------------------------ Reset */

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

html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	background: var(--page-bg);
	/* El scroll del navegador (validación, foco, anclas) deja libre la cabecera. */
	scroll-padding-top: calc(var(--header-h) + 2.4rem);
	/* Cada control dibuja su propio estado pulsado: fuera el recuadro gris de iOS. */
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	background: transparent;
	color: var(--bb-pale);
	font-family: "Outfit", system-ui, sans-serif;
	font-size: 1.6rem;
	font-weight: 300;
	line-height: 1.45;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

h1, h2, p { margin: 0; font-weight: inherit; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

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

/* Saltar al contenido: primer Tab de cada página, visible solo con foco. */
.skip {
	position: fixed;
	top: 0.8rem;
	left: 0.8rem;
	z-index: 100;
	padding: 1rem 1.6rem;
	border-radius: var(--r-s);
	background: var(--bb-flood);
	color: #fff;
	font-size: var(--t-small);
	font-weight: 400;
	transform: translateY(calc(-100% - 1.6rem));
}
.skip:focus-visible { transform: none; outline-color: #fff; outline-offset: -4px; }
main:focus { outline: none; }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }