/* OPTIMUS x TSLA - direccion "Acero": carbon, plano de ingenieria, rojo Tesla a cuentagotas */

:root{
  --bg:#0B0C0E;
  --bg-2:#0F1114;
  --card:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.05);
  --ink:#E8E9EB;
  --dim:#8B8F96;
  --red:#E82127;
  --red-deep:#B3161B;
  --steel-hi:#F2F3F5;
  --steel-lo:#AEB2B9;
  --font-d:"Archivo",system-ui,sans-serif;
  --font-b:"Inter",system-ui,sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,monospace;
  --pad:clamp(20px,5vw,72px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* retiicula de plano, fija, apenas visible */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    repeating-linear-gradient(to right,transparent 0 119px,rgba(255,255,255,.028) 119px 120px),
    repeating-linear-gradient(to bottom,transparent 0 119px,rgba(255,255,255,.028) 119px 120px);
}
main,footer,header{position:relative;z-index:1}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--font-m)}
h1,h2,h3{font-family:var(--font-d);font-stretch:125%;line-height:1.05;letter-spacing:-.01em}
h2{font-size:clamp(30px,4.4vw,54px);font-weight:800}
h3{font-size:20px;font-weight:700;font-stretch:110%}

.kicker{font-size:12px;letter-spacing:.14em;color:var(--dim);margin-bottom:14px}
.kicker::before{content:"";display:inline-block;width:22px;height:1px;background:var(--red);vertical-align:middle;margin-right:10px}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-d);font-stretch:110%;font-weight:700;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;
  padding:13px 26px;border:1px solid transparent;cursor:pointer;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-deep)}
.btn-ghost{border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--dim)}
.btn[data-disabled="true"]{background:var(--card);color:var(--dim);border:1px solid var(--line);cursor:default}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;gap:32px;
  padding:0 var(--pad);height:64px;
  border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease;
}
.nav.scrolled{background:rgba(11,12,14,.86);backdrop-filter:blur(10px);border-color:var(--line-soft)}
.nav-mark{font-family:var(--font-d);font-stretch:125%;font-weight:900;font-size:16px;letter-spacing:.02em}
.nav-mark .x{color:var(--red);font-weight:700;margin:0 1px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{font-size:13.5px;color:var(--dim);letter-spacing:.02em;transition:color .15s}
.nav-links a:hover{color:var(--ink)}
.nav-buy{padding:9px 20px}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:grayscale(.5) contrast(1.06) brightness(.55)}
.hero-veil{position:absolute;inset:0;background:
  radial-gradient(ellipse 72% 48% at 50% 44%,rgba(11,12,14,.55) 0%,rgba(11,12,14,.28) 45%,transparent 74%),
  linear-gradient(rgba(11,12,14,.35),rgba(11,12,14,.35)),
  radial-gradient(ellipse 90% 70% at 50% 42%,transparent 0%,rgba(11,12,14,.55) 62%,rgba(11,12,14,.96) 100%),
  linear-gradient(to bottom,rgba(11,12,14,.55),transparent 30%,transparent 55%,var(--bg) 96%)}
.hero-blueprint{position:absolute;inset:0;width:100%;height:100%;color:var(--dim);opacity:.5;pointer-events:none}
.hero-blueprint .bp line{stroke-dasharray:1000;stroke-dashoffset:1000}
.hero-blueprint .bp-labels{opacity:0}

.hero-core{position:relative;text-align:center;padding:120px var(--pad) 40px;max-width:1600px}
.hero-kicker{font-size:11.5px;letter-spacing:.22em;color:var(--dim);margin-bottom:22px}
.hero-title{
  font-size:clamp(62px,13.8vw,188px);font-weight:900;letter-spacing:-.015em;line-height:.94;
  background:linear-gradient(178deg,var(--steel-hi) 30%,var(--steel-lo) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{max-width:600px;margin:26px auto 0;color:var(--dim);font-size:17px}
.hero-pair{margin-top:22px;font-size:13px;color:var(--dim);letter-spacing:.04em}
.hero-pair b{color:var(--ink);font-weight:600}
.hero-pair .sep{margin:0 12px;color:var(--red)}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}

.hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font-size:10px;letter-spacing:.3em;color:var(--dim)}
.hero-scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--dim),transparent)}
.hero-credit{position:absolute;bottom:26px;right:var(--pad);font-size:10px;letter-spacing:.08em;color:var(--dim)}

/* orquestacion de entrada (una sola vez) */
@media (prefers-reduced-motion:no-preference){
  .hero-kicker,.hero-title,.hero-sub,.hero-pair,.hero-cta{opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.65,.25,1) forwards}
  .hero-title{animation-delay:.15s}
  .hero-kicker{animation-delay:.55s}
  .hero-sub{animation-delay:.7s}
  .hero-pair{animation-delay:.85s}
  .hero-cta{animation-delay:1s}
  .hero-bg img{transform:scale(1.05);animation:settle 2.2s cubic-bezier(.2,.6,.3,1) forwards}
  .hero-blueprint .bp line{animation:draw 1.4s ease forwards}
  .hero-blueprint .d1{animation-delay:.9s}.hero-blueprint .d2{animation-delay:1.1s}.hero-blueprint .d3{animation-delay:1.15s}
  .hero-blueprint .d4{animation-delay:1.05s}.hero-blueprint .d5{animation-delay:1.25s}.hero-blueprint .d6{animation-delay:1.3s}
  .hero-blueprint .d7{animation-delay:1.2s}.hero-blueprint .d8{animation-delay:1.4s}.hero-blueprint .d9{animation-delay:1.45s}
  .hero-blueprint .bp-labels{animation:fade .8s ease 1.7s forwards}
  .hero-scroll{opacity:0;animation:fade .8s ease 2s forwards}
}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes settle{to{transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* ---------- stats ---------- */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.stat{padding:34px var(--pad);border-left:1px solid var(--line)}
.stat:first-child{border-left:none}
.stat b{display:block;font-size:clamp(26px,3vw,40px);font-weight:600;color:var(--ink)}
.stat b i{font-style:normal;font-size:.5em;color:var(--red);margin-left:4px}
.stat span{font-size:13px;color:var(--dim)}

/* ---------- machine ---------- */
.machine{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,90px);padding:clamp(80px,12vh,140px) var(--pad);max-width:1400px;margin:0 auto;align-items:center}
.machine-text p{color:var(--dim);margin-top:18px;max-width:56ch}
.machine-text h2{color:var(--ink)}
.machine-list{list-style:none;margin-top:30px;border-top:1px solid var(--line)}
.machine-list li{display:flex;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.machine-list span{color:var(--red);min-width:64px;letter-spacing:.08em}
.machine-list em{font-style:normal;color:var(--ink);letter-spacing:.02em}
.machine-photo{position:relative}
.machine-photo img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(.2) contrast(1.03);border:1px solid var(--line)}
.machine-photo figcaption{margin-top:10px;font-size:10.5px;letter-spacing:.1em;color:var(--dim)}

/* ---------- story (timeline horizontal) ----------
   Base: tira deslizable (movil y usuarios con movimiento reducido).
   Solo escritorio SIN movimiento reducido: seccion alta + sticky + track guiado por scroll. */
.story{position:relative}
.story-sticky{padding:90px 0 40px}
.story-head{padding:0 var(--pad);margin-bottom:44px}
.story-track{
  display:flex;gap:clamp(18px,2.4vw,34px);padding:0 var(--pad) 16px;will-change:transform;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.story-track::-webkit-scrollbar{height:4px}
.story-track::-webkit-scrollbar-thumb{background:var(--line)}
.card{scroll-snap-align:start}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .js .story{height:440vh}
  .js .story-sticky{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .js .story-track{overflow:visible;scroll-snap-type:none;padding-bottom:0}
}
.card{
  flex:0 0 auto;width:min(400px,80vw);
  background:var(--card);border:1px solid var(--line);
  padding:28px;display:flex;flex-direction:column;gap:10px;
}
.card.has-photo{padding-top:0}
.card.has-photo img{margin:0 -0px 14px;width:calc(100% + 0px);height:190px;object-fit:cover;object-position:center 22%;filter:grayscale(.35) contrast(1.04);margin-left:-28px;margin-right:-28px;width:calc(100% + 56px)}
.card-year{font-size:clamp(38px,3.4vw,52px);font-weight:600;color:var(--ink);line-height:1}
.card-date{font-size:11px;letter-spacing:.14em;color:var(--red)}
.card h3{margin-top:2px}
.card p:not(.mono){font-size:14.5px;color:var(--dim)}
.story-bar{display:none;height:2px;background:var(--line-soft);margin:44px var(--pad) 0;position:relative}
#story-progress{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);transition:width .1s linear}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){.js .story-bar{display:block}}

/* ---------- specs ---------- */
.specs{padding:clamp(80px,12vh,140px) var(--pad);max-width:1400px;margin:0 auto}
.specs-head{margin-bottom:52px}
.specs-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:start}
.specs-photo{position:relative}
.specs-photo img{width:100%;filter:grayscale(.25) contrast(1.05);border:1px solid var(--line)}
.specs-photo figcaption{margin-top:10px;font-size:10.5px;letter-spacing:.1em;color:var(--dim)}
.callout{position:absolute;display:flex;align-items:center;gap:0;font-size:10px;letter-spacing:.08em;color:var(--ink)}
.callout i{width:7px;height:7px;border:1px solid var(--red);background:rgba(232,33,39,.25);border-radius:50%;flex:0 0 auto}
.callout span{border-bottom:1px solid var(--line);padding:0 8px 3px;white-space:nowrap;background:rgba(11,12,14,.55)}
.co-1{top:7%;left:52%}
.co-2{top:32%;left:8%}
.co-3{top:52%;left:48%}
.co-4{top:74%;left:8%}
@media (max-width:900px){.callout{display:none}}

.specs-table{overflow-x:auto}
.specs-table table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:560px}
.specs-table th{font-weight:600;text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink);font-size:13px}
.specs-table th em{display:block;font-style:normal;font-size:9.5px;color:var(--red);letter-spacing:.12em;margin-top:2px}
.specs-table td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--dim)}
.specs-table td:first-child{color:var(--ink);letter-spacing:.08em;font-size:11px}
.specs-table tr:hover td{background:var(--card)}
.specs-note{margin-top:18px;font-size:12.5px;color:var(--dim);max-width:64ch}

/* ---------- roadmap ---------- */
.roadmap{padding:clamp(80px,12vh,140px) var(--pad);max-width:1200px;margin:0 auto}
.roadmap-head{margin-bottom:52px}
.roadmap-list{list-style:none}
.roadmap-list li{
  display:grid;grid-template-columns:clamp(120px,16vw,200px) 1fr;gap:clamp(18px,4vw,60px);
  padding:34px 0;border-top:1px solid var(--line);align-items:start;
}
.roadmap-list li:last-child{border-bottom:1px solid var(--line)}
.rm-year{font-size:clamp(30px,4vw,54px);font-weight:600;color:var(--ink);line-height:1;letter-spacing:-.02em}
.roadmap-list h3{margin-bottom:8px}
.roadmap-list p{color:var(--dim);max-width:62ch;font-size:15px}
.rm-src{display:inline-block;margin-top:12px;font-size:10px;letter-spacing:.14em;color:var(--red)}
.roadmap-note{margin-top:34px;font-size:14px;color:var(--dim);max-width:70ch;border-left:2px solid var(--red);padding-left:18px}

/* ---------- token ---------- */
.token{padding:clamp(80px,12vh,140px) var(--pad);background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.token-head{max-width:1200px;margin:0 auto}
.token-lead{margin-top:18px;color:var(--dim);max-width:62ch;font-size:17px}
.token-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);max-width:1200px;margin:52px auto 0;align-items:center}
.token-pair svg{width:100%;max-width:440px;color:var(--ink)}
.token-ca{display:flex;align-items:center;gap:14px;margin-top:26px;border:1px solid var(--line);background:var(--card);padding:14px 18px;font-size:12px}
.token-ca span{color:var(--dim);letter-spacing:.12em;font-size:10px}
.token-ca b{color:var(--ink);font-weight:500;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ca-copy{background:none;border:1px solid var(--line);color:var(--dim);padding:6px 8px;cursor:pointer;margin-left:auto;transition:color .15s,border-color .15s}
.ca-copy:hover{color:var(--ink);border-color:var(--dim)}
.token-steps{list-style:none;display:flex;flex-direction:column;gap:0}
.token-steps li{display:flex;gap:22px;padding:20px 0;border-top:1px solid var(--line)}
.token-steps li:last-child{border-bottom:1px solid var(--line)}
.token-steps li>span{color:var(--red);font-size:13px;padding-top:3px}
.token-steps p{color:var(--dim);font-size:14px;margin-top:4px}
.token-links{display:flex;align-items:center;gap:14px;max-width:1200px;margin:44px auto 0;flex-wrap:wrap}
.sock{padding:12px 20px;gap:9px}
.token-soon{font-size:10.5px;letter-spacing:.16em;color:var(--dim)}

/* ---------- gallery ---------- */
.gallery{padding:clamp(80px,12vh,140px) var(--pad);max-width:1500px;margin:0 auto}
.gallery-head{margin-bottom:52px}
.gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;grid-auto-flow:dense;gap:14px}
.gallery-grid figure{position:relative;overflow:hidden;border:1px solid var(--line)}
.gallery-grid .tall{grid-row:span 2}
.gallery-grid .wide{grid-column:span 2}
.gallery-grid img{width:100%;height:100%;object-fit:cover;filter:grayscale(.55) contrast(1.04);transition:filter .45s ease,transform .6s ease}
.gallery-grid figure:hover img{filter:grayscale(0) contrast(1.02);transform:scale(1.025)}
.gallery-grid figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 14px 10px;
  font-size:9.5px;letter-spacing:.1em;color:var(--ink);
  background:linear-gradient(transparent,rgba(11,12,14,.85));
}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding:56px var(--pad) 64px;max-width:1500px;margin:0 auto}
.footer-top{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:26px}
#footer-domain{font-size:11px;letter-spacing:.18em;color:var(--dim)}
.footer-disc{font-size:12.5px;color:var(--dim);max-width:100ch;line-height:1.7}
.footer-cred{margin-top:18px;font-size:10px;letter-spacing:.06em;color:var(--dim);line-height:1.9}

/* ---------- reveals (solo con JS presente; sin JS todo visible) ---------- */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.65,.25,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .nav-links{display:none}
  .nav-buy{margin-left:auto}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-left:none;border-top:1px solid var(--line)}
  .stat:nth-child(-n+2){border-top:none}
  .stat:nth-child(even){border-left:1px solid var(--line)}
  .machine{grid-template-columns:1fr}
  .specs-grid{grid-template-columns:1fr}
  .specs-photo{max-width:480px}
  .token-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
}
@media (max-width:560px){
  .roadmap-list li{grid-template-columns:1fr;gap:10px}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:260px}
  .gallery-grid .wide{grid-column:span 1}
  .hero-credit{display:none}
}
@media (max-height:760px){
  .hero-scroll{display:none}
}
@media (max-width:560px){
  .hero-title{font-size:clamp(42px,13.8vw,62px)}
  .hero-kicker{font-size:10px;letter-spacing:.12em;padding:0 6px}
  .hero-sub{font-size:15.5px}
}
@media (max-width:900px){
  .hero-blueprint{display:none}
}