/* ============================================================
   inmersion.css · Landing estilo "racing" (ref. Lando Norris)
   BLANCO + ROJO · tipografía display gigante · lock-scroll
   ============================================================ */

:root {
	--wg-bg:    #faf8f4;   /* blanco roto cálido */
	--wg-bg-2:  #ffffff;
	--wg-fg:    #14110f;   /* casi negro cálido */
	--wg-muted: #6f6a64;
	--wg-red:   #e0231d;   /* rojo racing intenso */
	--wg-red-d: #b81810;
	--wg-line:  #e7e2da;
	--wg-ease:  cubic-bezier(.22,.61,.36,1);
}

html, body { overflow-x: hidden; background: var(--wg-bg); }
html.lenis { scroll-behavior: auto; }

.wg-root {
	background: var(--wg-bg);
	color: var(--wg-fg);
	font-family: 'Roboto', system-ui, sans-serif;
	overflow: hidden;
	position: relative;
}

/* Canvas WebGL: fixed, ENCIMA del contenido (z-index alto), transparente
   salvo donde pinta los planos de imagen (justo sobre cada __media oculto).
   pointer-events:none → el hover pasa a las cards DOM. El número (arriba) y
   el caption (abajo) están fuera del área de imagen → se ven a través del
   canvas transparente. */
.wg-canvas {
	position: fixed; inset: 0;
	width: 100%; height: 100%;
	z-index: 3; pointer-events: none; display: block;
}

/* ---- Tipografía ---- */
.wg-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: 'Roboto Mono', monospace;
	font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
	color: var(--wg-muted); margin: 0 0 28px; font-weight: 500;
}
.wg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wg-red); box-shadow: 0 0 0 0 rgba(224,35,29,.5); animation: wg-pulse 1.8s infinite; }
@keyframes wg-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(224,35,29,.5)} 50%{box-shadow:0 0 0 9px rgba(224,35,29,0)} }

/* Display gigante racing (Kanit italic) */
.wg-display {
	font-family: 'Kanit', sans-serif;
	font-style: italic;
	font-weight: 700;
	line-height: .9;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}
.wg-h2 {
	font-family: 'Kanit', sans-serif;
	font-style: italic; font-weight: 700;
	font-size: clamp(40px, 7vw, 110px);
	line-height: .92; letter-spacing: -0.02em; text-transform: uppercase;
	margin: 0;
}
.wg-h2 em, .wg-statement__big em, .wg-hero__name .wg-x { font-style: italic; color: var(--wg-red); }


/* ---- Botones ---- */
.wg-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
.wg-btn {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 30px; border-radius: 0;        /* esquinas rectas = racing */
	font-weight: 600; font-size: 14px; letter-spacing: .04em;
	text-transform: uppercase; text-decoration: none;
	transition: transform .25s var(--wg-ease), background .25s, color .25s;
	clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); /* corte diagonal */
}
.wg-btn--primary { background: var(--wg-red); color: #fff; }
.wg-btn--primary:hover { background: var(--wg-red-d); transform: translateX(4px); }
.wg-btn--ghost { background: var(--wg-fg); color: var(--wg-bg); }
.wg-btn--ghost:hover { transform: translateX(4px); }


/* ============================================================
   HERO
   ============================================================ */
.wg-hero {
	min-height: 100vh;
	display: flex; flex-direction: column; justify-content: center;
	padding: clamp(90px,12vh,140px) clamp(24px,5vw,80px) 60px;
	position: relative;
}
.wg-hero__grid {
	display: grid;
	grid-template-columns: 1.4fr .9fr;
	gap: clamp(32px,5vw,72px);
	align-items: center;
	width: 100%;
}
.wg-hero__name {
	font-family: 'Kanit', sans-serif;
	font-style: italic; font-weight: 700;
	font-size: clamp(64px, 14vw, 240px);
	line-height: .82; letter-spacing: -0.04em;
	margin: 0 0 24px; text-transform: uppercase;
}
.wg-hero__name .wg-x { color: var(--wg-red); }
.wg-hero__sub {
	font-size: clamp(17px, 1.6vw, 24px);
	line-height: 1.4; max-width: 480px; color: var(--wg-fg);
	font-weight: 500; margin: 0;
}
.wg-hero__media {
	position: relative; margin: 0;
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 4px;
}
.wg-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.wg-hero__tag {
	position: absolute; top: 16px; left: 16px;
	background: var(--wg-red); color: #fff;
	font-family: 'Roboto Mono', monospace; font-size: 10px;
	letter-spacing: .15em; padding: 6px 12px; text-transform: uppercase;
}
.wg-scroll-hint {
	position: absolute; bottom: 28px; left: clamp(24px,5vw,80px);
	font-family: 'Roboto Mono', monospace; font-size: 11px;
	letter-spacing: .3em; text-transform: uppercase; color: var(--wg-muted);
	animation: wg-bob 2s ease-in-out infinite;
}
@keyframes wg-bob { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(8px);opacity:.4} }


/* ============================================================
   MARQUEE
   ============================================================ */
.wg-marquee {
	background: var(--wg-red);
	color: #fff;
	overflow: hidden;
	padding: 18px 0;
	transform: rotate(-1.5deg) scale(1.03);   /* leve inclinación racing */
	margin: 40px 0;
}
.wg-marquee__track {
	display: flex; align-items: center; gap: 28px;
	width: max-content;
	animation: wg-marq 26s linear infinite;
}
@keyframes wg-marq { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.wg-marquee__track span {
	font-family: 'Kanit', sans-serif; font-style: italic; font-weight: 700;
	font-size: clamp(26px, 3.5vw, 52px); text-transform: uppercase; white-space: nowrap;
}
.wg-marquee__track i { font-style: normal; opacity: .6; font-size: 20px; }


/* ============================================================
   STATEMENT
   ============================================================ */
.wg-statement {
	min-height: 80vh;
	display: grid; place-items: center;
	padding: clamp(80px,12vw,180px) clamp(24px,5vw,80px);
}
.wg-statement--red { background: var(--wg-fg); color: var(--wg-bg); }
.wg-statement--red .wg-statement__big em { color: var(--wg-red); }
.wg-statement__big {
	font-family: 'Kanit', sans-serif; font-style: italic; font-weight: 700;
	font-size: clamp(42px, 9vw, 150px);
	line-height: .9; letter-spacing: -0.03em; text-transform: uppercase;
	margin: 0; max-width: 14ch;
}


/* ============================================================
   GALERÍA HORIZONTAL (lock-scroll)
   ============================================================ */
/* Galería = exactamente 100vh durante el pin → lock-scroll limpio.
   Estructura: head arriba (auto) + track que ocupa el resto, centrado. */
.wg-gallery {
	background: var(--wg-bg-2);
	border-top: 2px solid var(--wg-fg);
	border-bottom: 2px solid var(--wg-fg);
	overflow: hidden;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.wg-gallery__head {
	flex-shrink: 0;
	padding: clamp(40px,5vw,72px) clamp(24px,5vw,80px) clamp(20px,3vw,36px);
	position: relative;
}
.wg-gallery__hint {
	position: absolute; right: clamp(24px,5vw,80px); bottom: clamp(20px,3vw,36px);
	font-family: 'Roboto Mono', monospace; font-size: 12px;
	letter-spacing: .2em; text-transform: uppercase; color: var(--wg-red);
}

/* El track ocupa el alto restante y centra las cards verticalmente */
.wg-track {
	flex: 1;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-height: 0;
}
.wg-track__inner {
	display: flex;
	gap: clamp(20px, 3vw, 48px);
	padding: 0 clamp(24px,5vw,80px);
	width: max-content;
	will-change: transform;
}
.wg-card {
	position: relative; margin: 0;
	width: clamp(240px, 28vw, 400px);
	flex-shrink: 0;
}
.wg-card__num {
	font-family: 'Kanit', sans-serif; font-style: italic; font-weight: 700;
	font-size: clamp(40px, 5vw, 80px);
	color: var(--wg-red); line-height: 1;
	display: block; margin-bottom: 10px;
}
.wg-card__media {
	position: relative;
	/* altura controlada para que toda la card quepa en el viewport */
	height: min(58vh, 520px);
	overflow: hidden; border-radius: 4px;
}
.wg-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Cuando WebGL arranca, oculta la <img> DOM (la pinta el canvas). */
.wg-on .wg-img { opacity: 0; }
.wg-card__cap { padding: 14px 2px 0; }
.wg-card__cap b { display: block; font-size: 18px; font-weight: 700; }
.wg-card__cap span { display: block; font-size: 13px; color: var(--wg-muted); margin-top: 2px; }

/* En móvil (sin pin): scroll horizontal nativo, alto auto */
@media (max-width: 900px) {
	.wg-gallery { height: auto; }
	.wg-track { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.wg-track__inner { padding-bottom: 40px; }
	.wg-card__media { height: 60vh; }
}


/* ============================================================
   STATS GIGANTES
   ============================================================ */
.wg-stats {
	display: grid; grid-template-columns: repeat(3, 1fr);
	border-bottom: 2px solid var(--wg-fg);
}
.wg-stat {
	padding: clamp(50px,7vw,100px) clamp(20px,3vw,48px);
	text-align: center;
	border-right: 2px solid var(--wg-fg);
}
.wg-stat:last-child { border-right: none; }
.wg-stat__num {
	display: block;
	font-family: 'Kanit', sans-serif; font-style: italic; font-weight: 700;
	font-size: clamp(56px, 9vw, 150px);
	line-height: .9; letter-spacing: -0.03em; color: var(--wg-fg);
}
.wg-stat__num em { font-style: italic; color: var(--wg-red); }
.wg-stat__label {
	display: block; margin-top: 14px;
	font-size: 14px; letter-spacing: .04em; color: var(--wg-muted);
	text-transform: uppercase;
}


/* ============================================================
   OUTRO
   ============================================================ */
.wg-outro {
	min-height: 80vh;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: clamp(80px,12vw,180px) 24px;
}
.wg-outro .wg-cta-row { justify-content: center; }


/* ============================================================
   Reveal
   ============================================================ */
[data-reveal] { opacity: 0; transform: translateY(40px); will-change: transform, opacity; }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .9s var(--wg-ease), transform .9s var(--wg-ease); }


/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
	.wg-hero__grid { grid-template-columns: 1fr; gap: 40px; }
	.wg-hero__media { aspect-ratio: 16/10; max-height: 50vh; }
	.wg-stats { grid-template-columns: 1fr; }
	.wg-stat { border-right: none; border-bottom: 2px solid var(--wg-fg); }
	.wg-stat:last-child { border-bottom: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wg-dot, .wg-scroll-hint, .wg-marquee__track { animation: none; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.wg-on .wg-img { opacity: 1; }
}