/* Corexa3D: grafito + un solo acento (el naranja de la boquilla caliente). */
:root {
  --fondo: #0e0f11;
  --superficie: #16181b;
  --texto: #ecedee;
  --tenue: #8d929a;
  --linea: rgba(255, 255, 255, 0.09);
  --acento: #f4622a;
  --claro: #e7e8ea;
  --claro-texto: #121316;
  --claro-tenue: #5b6068;

  --display: 'Archivo', system-ui, sans-serif;
  --cuerpo: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;

  --curva: cubic-bezier(0.32, 0.72, 0, 1);
  --radio: 28px;
  --margen: clamp(16px, 4vw, 56px);
  /* Capas: escena 0, rótulos 1, contenido 2, nav 10, cargador 20 */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.cargando { overflow: hidden; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

/* Grano fijo, sin repintar al hacer scroll */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.escena {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
}

main { position: relative; z-index: 2; }

/* ---------- Cargador ---------- */
.cargador {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--fondo);
  display: grid;
  place-items: center;
}
.cargador__centro { width: min(320px, 80vw); }
.cargador__etiqueta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tenue);
  letter-spacing: 0.04em;
}
.cargador__temp {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 300;
  font-size: clamp(64px, 12vw, 120px);
  line-height: 1;
  margin: 10px 0 22px;
  font-variant-numeric: tabular-nums;
}
.cargador__unidad { font-size: 0.35em; color: var(--acento); margin-left: 6px; vertical-align: top; }
.cargador__filamento { height: 2px; background: var(--linea); border-radius: 2px; overflow: hidden; }
.cargador__filamento span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--acento);
  transform-origin: left;
  transform: scaleX(0);
}

/* ---------- Navegación flotante ---------- */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: rgba(22, 24, 27, 0.62);
  border: 1px solid var(--linea);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  white-space: nowrap;
}
.nav__marca { display: flex; align-items: center; }
.nav__marca img { display: block; height: 30px; width: auto; }
.nav__links { display: flex; gap: 22px; font-size: 14px; color: var(--tenue); }
.nav__links a { transition: color 0.4s var(--curva); }
.nav__links a:hover { color: var(--texto); }

/* ---------- Botones (botón dentro de botón) ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 7px 7px 7px 24px;
  border-radius: 999px;
  background: var(--acento);
  color: #141210;
  font-weight: 600;
  font-size: 16px;
  white-space: nowrap;
  transition: transform 0.6s var(--curva), background-color 0.6s var(--curva);
}
.boton:hover { background: #ff7341; }
.boton:active { transform: scale(0.98); }
.boton__icono {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(20, 18, 16, 0.12);
  font-size: 18px;
  transition: transform 0.6s var(--curva);
}
.boton:hover .boton__icono { transform: translate(2px, -1px) scale(1.05); }
.boton--chico { font-size: 14px; padding: 5px 5px 5px 18px; gap: 10px; }
.boton--chico .boton__icono { width: 30px; height: 30px; font-size: 15px; }
.boton--fantasma {
  background: transparent;
  color: var(--texto);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 13px 24px;
  font-weight: 500;
}
.boton--fantasma:hover { background: rgba(255, 255, 255, 0.06); }
.boton--grande { font-size: 20px; padding: 10px 10px 10px 32px; }
.boton--grande .boton__icono { width: 52px; height: 52px; font-size: 24px; }

.titulo-seccion {
  font-family: var(--display);
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: 96px var(--margen) 48px;
  position: relative;
}
.hero__texto { max-width: 800px; }
.hero__titulo {
  font-family: var(--display);
  font-stretch: 116%;
  font-weight: 700;
  font-size: clamp(44px, min(6.1vw, 11.5vh), 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
}
.linea { display: block; overflow: hidden; padding-bottom: 0.06em; }
.linea > span { display: inline-block; }
.hero__sub {
  margin-top: 28px;
  max-width: 440px;
  color: var(--tenue);
  font-size: 18px;
}
.hero__acciones { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* Telemetría en vivo (datos reales de la animación) */
.telemetria { position: absolute; right: var(--margen); bottom: 32px; width: 318px; }
.telemetria__marco {
  padding: 6px;
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--linea);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.telemetria__nucleo {
  border-radius: calc(var(--radio) - 6px);
  background: rgba(14, 15, 17, 0.72);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08);
  padding: 16px 18px 18px;
}
.telemetria__cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.telemetria__vivo { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; color: var(--texto); font-weight: 500; }
.telemetria__vivo::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--acento);
  box-shadow: 0 0 0 0 rgba(244, 98, 42, 0.6);
  animation: latido 1.8s var(--curva) infinite;
}
@keyframes latido { 70% { box-shadow: 0 0 0 7px rgba(244, 98, 42, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 98, 42, 0); } }
.telemetria__pieza { white-space: nowrap; color: var(--tenue); font-family: var(--mono); font-size: 11px; }
.telemetria__cuerpo { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: center; margin-top: 14px; position: relative; }
.anillo { width: 92px; height: 92px; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 5; }
.anillo__pista { stroke: rgba(255, 255, 255, 0.07); }
.anillo__avance { stroke: var(--acento); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; }
.anillo__valor {
  position: absolute; left: 0; top: 0; width: 92px; height: 92px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums;
}
.anillo__valor small { font-size: 11px; color: var(--tenue); position: relative; top: -6px; }
.anillo__valor { grid-template-columns: auto auto; place-content: center; align-items: baseline; }
.telemetria__datos { margin: 0; display: grid; gap: 7px; }
.telemetria__datos div { display: flex; justify-content: space-between; font-size: 13px; }
.telemetria__datos dt { color: var(--tenue); }
.telemetria__datos dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ---------- Anatomía (cámara al cabezal) ---------- */
.anatomia { height: 320vh; }
.anatomia__fijo { position: sticky; top: 0; height: 100dvh; display: flex; align-items: flex-end; padding: 0 var(--margen) 64px; }
.anatomia__texto { max-width: 580px; }
.anatomia__texto p { margin-top: 18px; color: var(--tenue); max-width: 400px; }

.rotulos { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0; overflow: hidden; }
.rotulos__lineas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rotulos__lineas line { stroke: var(--acento); stroke-width: 1; }
.rotulos__lineas circle { fill: var(--acento); }
.rotulo {
  position: absolute;
  left: 0; top: 0;
  display: grid;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(14, 15, 17, 0.78);
  border: 1px solid rgba(244, 98, 42, 0.35);
  font-size: 12px;
  white-space: nowrap;
  will-change: transform;
}
.rotulo strong { font-family: var(--mono); font-weight: 500; font-size: 13px; }
.rotulo span { color: var(--tenue); }

/* ---------- Materiales ---------- */
.materiales { padding: 0 var(--margen); }
.materiales__panel {
  min-height: 100dvh;
  max-width: 470px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.18;
  transition: opacity 0.9s var(--curva);
}
.materiales__panel.activo { opacity: 1; }
.materiales__clave {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(72px, 11vw, 150px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
}
.materiales__panel.activo .materiales__clave { -webkit-text-stroke-color: var(--acento); }
.materiales__titulo { margin-top: 18px; font-family: var(--display); font-stretch: 110%; font-weight: 600; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.02em; }
.materiales__desc { margin-top: 12px; color: var(--tenue); }
.materiales__ficha { margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, auto); gap: 24px; justify-content: start; }
.materiales__ficha dt { font-size: 12px; color: var(--tenue); }
.materiales__ficha dd { margin: 2px 0 0; font-family: var(--mono); font-size: 15px; }

/* ---------- Proceso (sección clara) ---------- */
.proceso {
  background: var(--claro);
  color: var(--claro-texto);
  padding: clamp(96px, 14vw, 160px) var(--margen);
  border-radius: 40px 40px 0 0;
}
.proceso__cabeza p { margin-top: 18px; color: var(--claro-tenue); max-width: 420px; }
.proceso__pista { position: relative; margin-top: clamp(56px, 8vw, 96px); }
.proceso__trazo { width: 100%; height: 120px; display: block; }
.proceso__trazo path { fill: none; stroke: var(--acento); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.proceso__pasos {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 3vw, 48px);
}
.proceso__pasos i { font-size: 34px; color: var(--claro-texto); }
.proceso__pasos h3 { margin-top: 16px; font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 21px; letter-spacing: -0.01em; }
.proceso__pasos p { margin-top: 8px; color: var(--claro-tenue); font-size: 15px; max-width: 30ch; }

/* ---------- Trabajos (abanico de tarjetas) ---------- */
.trabajos { background: var(--fondo); height: 170vh; }
.trabajos__fijo { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
.trabajos__titulo { position: absolute; left: var(--margen); top: clamp(96px, 14vh, 140px); }
.abanico { position: relative; width: 214px; height: 310px; margin-top: 150px; }
.tarjeta {
  position: absolute;
  inset: 0;
  padding: 22px;
  border-radius: var(--radio);
  background:
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 7px),
    var(--superficie);
  border: 1px solid var(--linea);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.07), 0 30px 60px -30px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  will-change: transform;
}
.tarjeta i { font-size: 38px; margin-bottom: auto; }
.tarjeta h3 { font-family: var(--display); font-stretch: 108%; font-weight: 600; font-size: 21px; line-height: 1.05; letter-spacing: -0.015em; }
.tarjeta p { margin-top: 10px; color: var(--tenue); font-size: 14px; line-height: 1.45; }
.tarjeta--c {
  background:
    repeating-linear-gradient(to bottom, rgba(20, 18, 16, 0.1) 0 1px, transparent 1px 7px),
    var(--acento);
  color: #141210;
  border-color: transparent;
}
.tarjeta--c p { color: rgba(20, 18, 16, 0.72); }

/* ---------- Cierre ---------- */
.cierre {
  background: var(--claro);
  color: var(--claro-texto);
  padding: clamp(96px, 14vw, 170px) var(--margen) 32px;
}
.cierre__grande h2 {
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 800;
  font-size: clamp(40px, 11.5vw, 210px);
  line-height: 0.9;
  letter-spacing: -0.045em;
}
.cierre__grande h2 span { color: var(--acento); }
.cierre__acciones { margin-top: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }
.cierre__insta { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 500; }
.cierre__insta i { font-size: 26px; }

.preguntas {
  margin-top: clamp(96px, 12vw, 150px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(24px, 5vw, 80px);
}
.preguntas details { border-top: 1px solid rgba(18, 19, 22, 0.14); padding: 22px 0; }
.preguntas summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-weight: 500;
  font-size: 18px;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: '+'; font-family: var(--mono); color: var(--acento); transition: transform 0.5s var(--curva); }
.preguntas details[open] summary::after { transform: rotate(45deg); }
.preguntas details p { margin-top: 12px; color: var(--claro-tenue); max-width: 52ch; }

.pie {
  margin-top: 96px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: var(--claro-tenue);
}

/* ---------- Móvil ---------- */
@media (max-width: 860px) {
  .nav { gap: 14px; padding-left: 16px; }
  .nav__links { display: none; }
  .hero { align-items: flex-start; padding-top: 112px; }
  .telemetria { display: none; }
  .anatomia__fijo, .materiales__panel {
    background: linear-gradient(to top, rgba(14, 15, 17, 0.92) 0, rgba(14, 15, 17, 0.7) 32%, transparent 58%);
  }
  .anatomia__fijo { padding-bottom: 32px; }
  .materiales { padding: 0; }
  .materiales__panel { max-width: none; justify-content: flex-end; padding: 0 var(--margen) 56px; }
  .materiales__ficha { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .proceso { border-radius: 28px 28px 0 0; }
  .proceso__trazo { display: none; }
  .proceso__pasos { grid-template-columns: 1fr; gap: 40px; border-left: 2px solid var(--acento); padding-left: 24px; }
  .trabajos { height: auto; }
  .trabajos__fijo { position: static; height: auto; display: block; padding: 96px 16px; overflow: visible; }
  .trabajos__titulo { position: static; margin-bottom: 40px; }
  .abanico { width: auto; height: auto; margin: 0; display: grid; gap: 14px; }
  .tarjeta { position: relative; inset: auto; min-height: 220px; }
  .preguntas { grid-template-columns: 1fr; }
}

/* Respaldo sin WebGL: capas de color en lugar de la escena */
.sin-3d .escena, .sin-3d .rotulos, .sin-3d .telemetria { display: none; }
.sin-3d .hero {
  background:
    radial-gradient(60% 50% at 78% 60%, rgba(244, 98, 42, 0.22), transparent 70%),
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 9px);
}
.sin-3d .anatomia { height: auto; }
.sin-3d .anatomia__fijo { position: static; height: auto; padding-top: 96px; }
.sin-3d .materiales__panel { opacity: 1; min-height: 70dvh; }

@media (prefers-reduced-motion: reduce) {
  .telemetria__vivo::before { animation: none; }
  .materiales__panel { opacity: 1; }
}