/* ============================================
   V RACING — sistema de diseño
   Color:  extraído del logo real
   --void       #0A0B0C  fondo base
   --graphite   #17181B  paneles
   --steel      #444D50  bordes / divisores
   --fog        #B4B8B9  texto secundario / plata
   --red        #E20A16  acento de marca
   --titanium   #F5F5F3  texto principal
   Tipografía:
   --display    'Barlow Condensed'  titulares, condensada, actitud de librea
   --body       'Inter'             cuerpo de texto
   --mono       'JetBrains Mono'    telemetría / datos / etiquetas
   ============================================ */

:root{
  --void: #0A0B0C;
  --graphite: #17181B;
  --graphite-2: #1F2124;
  --steel: #444D50;
  --steel-dim: #2A2D30;
  --fog: #B4B8B9;
  --red: #E20A16;
  --red-dim: #7A0A10;
  --titanium: #F5F5F3;

  --display: 'Barlow Condensed', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'JetBrains Mono', monospace;

  --nav-h: 84px;
  --ease: cubic-bezier(.16,.8,.24,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  background:var(--void);
  color:var(--titanium);
  font-family:var(--body);
  line-height:1.5;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ max-width:100%; display:block; }
code{ font-family:var(--mono); background:var(--graphite-2); padding:.15em .4em; border-radius:3px; font-size:.85em; }

::selection{ background:var(--red); color:var(--titanium); }

:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

.mono-small{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fog);
}

.eyebrow-mono{
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--red);
  margin-bottom:1rem;
}

.section-title{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  font-size:clamp(2.4rem, 5vw, 4.2rem);
  line-height:.98;
  letter-spacing:-.01em;
}

.section-sub{
  color:var(--fog);
  max-width:46ch;
  margin-top:.9rem;
  font-size:1.02rem;
}

.stage-head{
  padding:0 clamp(1.5rem, 5vw, 4rem);
  margin-bottom:3rem;
}

.btn-primary{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  background:var(--red);
  color:var(--titanium);
  font-family:var(--mono);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.95rem 1.6rem;
  border-radius:2px;
  transition:transform .35s var(--ease), background .35s var(--ease);
  border:1px solid var(--red);
}
.btn-primary:hover{ background:transparent; }
.btn-primary .arrow{ transition:transform .3s var(--ease); }
.btn-primary:hover .arrow{ transform:translateX(4px); }

/* ===== loader ===== */
#loader{
  position:fixed; inset:0; z-index:9999;
  background:var(--void);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.2rem;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
#loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-mark{
  font-family:var(--display); font-weight:800; font-size:3rem; color:var(--red);
  letter-spacing:.05em;
}
.loader-track{ width:200px; height:2px; background:var(--steel-dim); }
.loader-bar{ height:100%; width:0%; background:var(--red); transition:width .2s linear; }
.loader-pct{ font-family:var(--mono); font-size:.75rem; color:var(--fog); letter-spacing:.1em; }

/* ===== telemetry strip ===== */
.telemetry-strip{
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:28px;
  display:flex; align-items:center; justify-content:center; gap:.7rem;
  background:var(--void);
  border-bottom:1px solid var(--steel-dim);
  font-family:var(--mono);
  font-size:.68rem;
  letter-spacing:.1em;
  color:var(--fog);
}
.telemetry-strip .dot{ color:var(--red); }

/* ===== nav ===== */
.nav{
  position:fixed; top:28px; left:0; right:0; z-index:400;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(1.2rem, 4vw, 3rem);
  transition:background .4s var(--ease), height .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,11,12,.85);
  backdrop-filter:blur(10px);
  height:64px;
  border-color:var(--steel-dim);
}
.nav-logo img{ height:34px; width:auto; }
.nav-links{ display:flex; gap:2.2rem; }
.nav-links a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--fog); position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--red);
  transition:width .3s var(--ease);
}
.nav-links a:hover{ color:var(--titanium); }
.nav-links a:hover::after{ width:100%; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; }
.nav-toggle span{ width:24px; height:2px; background:var(--titanium); }

/* ===== hero ===== */
.hero{
  position:relative;
  height:100vh; min-height:640px;
  display:flex; flex-direction:column; justify-content:flex-end;
  overflow:hidden;
}
.hero-video-layer{ position:absolute; inset:0; z-index:0; background:var(--void); }
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.2s var(--ease);
}
.hero-video.active{ opacity:1; }

.hero-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(226,10,22,.18), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(180,184,185,.10), transparent 50%),
    linear-gradient(160deg, #0A0B0C 0%, #16181A 55%, #0A0B0C 100%);
  opacity:1;
}
.hero-fallback.hide{ opacity:0; }

.hero-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(180,184,185,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(180,184,185,.05) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, black 0%, transparent 75%);
}

.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,12,.35) 0%, rgba(10,11,12,.25) 40%, rgba(10,11,12,.92) 100%);
}

.hero-content{
  position:relative; z-index:2;
  padding:0 clamp(1.5rem, 5vw, 4rem) clamp(4rem, 9vw, 6.5rem);
  max-width:1100px;
}
.hero-title{
  font-family:var(--display);
  font-weight:800;
  text-transform:uppercase;
  font-size:clamp(3.2rem, 10vw, 8rem);
  line-height:.9;
  letter-spacing:-.01em;
  display:flex; flex-direction:column;
}
.hero-title .outline{
  color:transparent;
  -webkit-text-stroke:1.5px var(--titanium);
}
.hero-sub{
  margin-top:1.6rem; max-width:46ch;
  color:var(--fog); font-size:1.08rem;
}
.hero-content .btn-primary{ margin-top:2.2rem; }

.hero-index{
  position:absolute; right:clamp(1.2rem,4vw,3rem); bottom:3rem; z-index:2;
  display:flex; flex-direction:column; gap:.7rem;
}
.hero-dot{
  width:9px; height:9px; border-radius:50%; border:1px solid var(--fog); background:transparent;
  transition:all .3s var(--ease);
}
.hero-dot.active{ background:var(--red); border-color:var(--red); transform:scale(1.2); }

.scroll-cue{
  position:absolute; left:clamp(1.2rem,4vw,3rem); bottom:3rem; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.scroll-cue span{ font-family:var(--mono); font-size:.65rem; letter-spacing:.15em; color:var(--fog); }
.scroll-line{ width:1px; height:36px; background:linear-gradient(var(--red), transparent); animation:scrollpulse 1.8s ease-in-out infinite; }
@keyframes scrollpulse{ 0%,100%{ opacity:.3 } 50%{ opacity:1 } }

/* ===== stage / 3D ===== */
.stage-section{ padding:clamp(5rem,10vw,8rem) 0 6rem; }

.stage-frame{
  margin:0 clamp(1.5rem, 5vw, 4rem);
  border:1px solid var(--steel-dim);
  background:var(--graphite);
  border-radius:4px;
  overflow:hidden;
}

.stage-canvas-wrap{
  position:relative;
  height:min(62vw, 620px);
  min-height:340px;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(226,10,22,.06), transparent 60%),
    var(--graphite);
}
#carCanvas{ width:100%; height:100%; display:block; touch-action:none; }

.stage-hint{
  position:absolute; top:1.2rem; left:1.2rem;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; color:var(--fog);
  display:flex; align-items:center; gap:.4rem;
  pointer-events:none;
  animation:fadeout-hint 5s forwards;
}
.hint-icon{ display:inline-block; animation:spin-hint 2.4s linear infinite; }
@keyframes spin-hint{ to{ transform:rotate(360deg) } }
@keyframes fadeout-hint{ 0%,70%{ opacity:1 } 100%{ opacity:0 } }

.stage-placeholder-msg{
  position:absolute; inset:0; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:.6rem;
  text-align:center; padding:2rem;
  color:var(--fog);
}
.stage-placeholder-msg.show{ display:flex; }
.stage-placeholder-msg p{ max-width:34ch; font-size:.92rem; }

.stage-loading{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:var(--graphite);
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.stage-loading.hide{ opacity:0; visibility:hidden; }
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:2px solid var(--steel-dim); border-top-color:var(--red);
  animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

.telemetry-panel{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.6rem clamp(1.2rem,3vw,2.4rem);
  border-top:1px solid var(--steel-dim);
  background:var(--graphite-2);
}
.tp-block{ display:flex; flex-direction:column; gap:.6rem; }
.tp-label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fog); }
.swatches{ display:flex; gap:.6rem; }
.swatch{
  width:26px; height:26px; border-radius:50%;
  background:var(--sw); border:2px solid transparent; box-shadow:0 0 0 1px var(--steel);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.swatch:hover{ transform:translateY(-2px); }
.swatch.active{ box-shadow:0 0 0 2px var(--void), 0 0 0 3px var(--titanium); }

.tp-divider{ width:1px; align-self:stretch; background:var(--steel-dim); display:none; }

.tp-specs{ flex-direction:row; gap:clamp(1.4rem,4vw,3.2rem); flex-wrap:wrap; }
.spec{ display:flex; flex-direction:column; gap:.15rem; }
.spec-val{
  font-family:var(--mono); font-weight:500; font-size:1.6rem; color:var(--titanium);
}
.spec-unit{ font-family:var(--mono); font-size:.7rem; color:var(--red); letter-spacing:.06em; }
.spec-label{ font-family:var(--mono); font-size:.65rem; color:var(--fog); letter-spacing:.08em; text-transform:uppercase; margin-top:.15rem; }

@media(min-width:900px){ .tp-divider{ display:block; } }

/* ===== gallery ===== */
.gallery-section{ padding:2rem 0 7rem; }

.filter-bar{
  display:flex; gap:.7rem; flex-wrap:wrap;
  padding:0 clamp(1.5rem, 5vw, 4rem);
  margin-bottom:2rem;
}
.filter-chip{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--fog); background:transparent; border:1px solid var(--steel-dim);
  padding:.55rem 1.1rem; border-radius:20px;
  transition:all .25s var(--ease);
}
.filter-chip:hover{ border-color:var(--fog); color:var(--titanium); }
.filter-chip.active{ background:var(--red); border-color:var(--red); color:var(--titanium); }

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1px;
  background:var(--steel-dim);
  margin:0 clamp(1.5rem, 5vw, 4rem);
  border:1px solid var(--steel-dim);
}
.gallery-item{
  position:relative;
  aspect-ratio:4/3;
  background:var(--graphite);
  overflow:hidden;
  cursor:pointer;
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s var(--ease), opacity .4s;
}
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .gi-tag{
  position:absolute; left:.9rem; bottom:.9rem; z-index:2;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--titanium); background:rgba(10,11,12,.65); padding:.3rem .6rem; backdrop-filter:blur(4px);
}
.gallery-item .gi-scrim{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(10,11,12,.85));
  z-index:1;
}
.gallery-item.placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.5rem;
  border:1px dashed var(--steel);
  color:var(--steel);
}
.gallery-item.placeholder .gi-plus{ font-size:1.6rem; font-family:var(--display); color:var(--fog); }
.gallery-item.placeholder p{ font-family:var(--mono); font-size:.65rem; letter-spacing:.08em; color:var(--fog); text-align:center; max-width:20ch; text-transform:uppercase; }
.gallery-item.hidden{ display:none; }

/* ===== philosophy ===== */
.philosophy-section{ padding:2rem 0 7rem; }
.disciplines{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:1px; background:var(--steel-dim);
  margin:0 clamp(1.5rem, 5vw, 4rem);
  border:1px solid var(--steel-dim);
}
.discipline{
  background:var(--void); padding:2.4rem 2rem;
  display:flex; flex-direction:column; gap:1rem; min-height:260px;
}
.discipline h3{
  font-family:var(--display); text-transform:uppercase; font-weight:700;
  font-size:1.9rem; color:var(--titanium);
}
.discipline p{ color:var(--fog); font-size:.95rem; flex:1; }

/* ===== footer ===== */
.footer{ padding:clamp(4rem,8vw,7rem) clamp(1.5rem,5vw,4rem) 2rem; border-top:1px solid var(--steel-dim); }
.footer-top{
  display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:2rem;
  padding-bottom:3rem; margin-bottom:2rem; border-bottom:1px solid var(--steel-dim);
}
.footer-cta{
  font-family:var(--display); text-transform:uppercase; font-weight:700;
  font-size:clamp(2.2rem,6vw,4rem); line-height:.98;
}
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footer-logo{ height:26px; opacity:.7; }

/* ===== lightbox ===== */
.lightbox{
  position:fixed; inset:0; z-index:2000; background:rgba(10,11,12,.96);
  display:none; align-items:center; justify-content:center; padding:4vw;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:88vh; border:1px solid var(--steel-dim); }
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem; background:none; border:none; color:var(--titanium);
  font-size:1.4rem;
}

/* ===== responsive ===== */
@media(max-width:820px){
  .nav-links{
    position:fixed; top:calc(var(--nav-h) + 28px); left:0; right:0;
    background:var(--void); flex-direction:column; gap:0;
    border-bottom:1px solid var(--steel-dim);
    transform:translateY(-110%); transition:transform .4s var(--ease);
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:1.1rem 1.5rem; border-top:1px solid var(--steel-dim); width:100%; }
  .nav-toggle{ display:flex; }
  .telemetry-strip{ font-size:.6rem; gap:.4rem; padding:0 .5rem; overflow:hidden; white-space:nowrap; }
}