/* ==========================================================
   BLACKTINT CHILD · blacktint.css · v0.1.3 · 2026-10-29
   Prefijo: bt-  ·  Colores medidos en el logo BlackTint by Alfa 2000
   Aquí solo va el motor: tokens, base y las piezas que crea blacktint.js.
   El diseño de cada sección vive en su widget HTML de Elementor.
   ========================================================== */

/* El reset de Hello Elementor, dentro de una capa: normaliza, pero cualquier
   CSS fuera de capa (el nuestro, el de Elementor) le gana siempre.
   Tiene que ser la primera regla del archivo. */
@import url("../../../hello-elementor/assets/css/reset.css") layer(hello-reset);

:root {
	/* Del logo (medidos en Logo-BlackTint-by-Alfa-2000.webp) */
	--bt-tinta: #0A0C0E;      /* letras "Black" */
	--bt-plata: #A3A4A8;      /* parte alta de "Tint" */
	--bt-grafito: #515858;    /* parte baja de "Tint" */
	--bt-gris: #6D6F73;       /* "BY ALFA 2000" */

	/* Escena: el estudio de la foto del hero */
	--bt-estudio: #0A0B0E;
	--bt-cromo: #E6E8EA;
	--bt-niebla: #8D939A;
	--bt-claro: #F4F6F8;      /* secciones claras */
	--bt-cognac: #B5703F;     /* interior del auto; solo como acento de "Calor" */

	/* Firma de marca: el degradado de "Tint" */
	--bt-metal: linear-gradient(180deg, var(--bt-plata), var(--bt-grafito));

	--bt-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bt-ancho: "wdth" 125;   /* Archivo ancha: eco del logo */
	--bt-gutter: clamp(16px, 4vw, 64px);
}

html,
body {
	background: var(--bt-estudio);
}
body {
	color: var(--bt-cromo);
	font-family: var(--bt-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	caret-color: var(--bt-plata);
}
/* Hello/Elementor activan el scroll suave en <html>; con ScrollTrigger provoca saltos al recalcular */
:root {
	scroll-behavior: auto;
}

/* Superficies del navegador con la marca: selección y barra de scroll */
::selection {
	background: var(--bt-plata);
	color: var(--bt-tinta);
}
html {
	scrollbar-color: var(--bt-grafito) var(--bt-estudio);
}
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: var(--bt-estudio);
}
::-webkit-scrollbar-thumb {
	background: var(--bt-grafito);
	border: 2px solid var(--bt-estudio);
	border-radius: 999px;
}

/* ── Hero: piezas que crea blacktint.js ─────────────────── */
.bt-hero__cam {
	position: absolute;
	inset: 0;
	z-index: 0;
	/* Bordes laterales desvanecidos: al alejarse la cámara no se ve la caja del cuadro */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.bt-hero__cam canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}
.bt-hero__laminas {
	position: absolute;
	overflow: visible;
	pointer-events: none;
}
.bt-hero__laminas use {
	vector-effect: non-scaling-stroke;
}
.bt-hero__velo-arriba,
.bt-hero__velo-abajo {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 0;
	pointer-events: none;
}
.bt-hero__velo-arriba {
	top: 0;
	height: 46%;
	background: linear-gradient(to bottom, rgba(10, 11, 14, .72), transparent);
}
.bt-hero__velo-abajo {
	bottom: 0;
	height: 18%;
	background: linear-gradient(to bottom, transparent, var(--bt-estudio));
}
.bt-hero__carga {
	position: absolute;
	right: var(--bt-gutter);
	bottom: 28px;
	z-index: 2;
	margin: 0;
	font: 500 13px/1 var(--bt-sans);
	color: var(--bt-niebla);
	transition: opacity .4s;
}
.bt-hero__carga[hidden] {
	display: block;
	opacity: 0;
}
/* Sin JS o con movimiento reducido: el auto ya polarizado, a pantalla completa */
.bt-hero__fija {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}