html,body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: taller de noche — grafito oscuro, rojo como color principal, dorado para acentos, azul solo en detalles de "HUD"; hero = red neuronal animada */
:root{
  --bg:#0F0E10; --surface:#18161A; --line:#2B272C;
  --fg:#F3EEE6; --muted:#A39A93;
  --red:#C8102E; --red-ink:#FF4D5E; --gold:#E2A93B; --arc:#7BE6F2;
  --on-red:#FFF7F0;
  --display:"Anton", Impact, "Arial Narrow", sans-serif;
  --body:"Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#F2F0EE; --surface:#FFFFFF; --line:#DAD5D1;
  --fg:#1A1618; --muted:#6B625E;
  --red:#B30E28; --red-ink:#B30E28; --gold:#99690F; --arc:#0A7F8C;
  --on-red:#FFF7F0; color-scheme:light;
}}
:root[data-theme="light"]{
  --bg:#F2F0EE; --surface:#FFFFFF; --line:#DAD5D1;
  --fg:#1A1618; --muted:#6B625E;
  --red:#B30E28; --red-ink:#B30E28; --gold:#99690F; --arc:#0A7F8C;
  --on-red:#FFF7F0; color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:400 17px/1.55 var(--body);}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));}
.label{font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{text-wrap:balance;margin:0}
:focus-visible{outline:2px solid var(--arc);outline-offset:3px}

/* Nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:10;background:var(--bg)}
header{position:sticky;top:env(safe-area-inset-top, 0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px;flex-wrap:wrap}
.brand{font:400 26px/1 var(--display);letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:10px}
.brand .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--arc);box-shadow:0 0 10px var(--arc)}
.brand small{font:400 13px/1 var(--mono);color:var(--muted);letter-spacing:.04em}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav a{font:600 15px/1 var(--body);text-decoration:none;padding:9px 12px;border-radius:6px;color:var(--muted)}
nav a:hover{color:var(--fg)}
nav a[aria-current="page"]{color:var(--on-red);background:var(--red)}

main{padding-block:40px 72px}
section[data-view]{display:grid;gap:48px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:center}
.hero h1{font:400 clamp(84px,15vw,168px)/.86 var(--display);letter-spacing:.005em;text-transform:uppercase}
.hero h1 span{color:var(--red-ink)}
.hero p{max-width:34ch;font-size:19px;margin:20px 0 0;color:var(--fg)}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.tag{font:600 12px/1 var(--mono);letter-spacing:.08em;padding:8px 10px;border:1px solid var(--line);border-radius:4px;color:var(--gold)}

.net{position:relative;width:100%;max-width:440px;aspect-ratio:1/1;justify-self:center}
.net canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.net .read{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--arc)}

/* Social */
.social{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.soc{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:8px;text-decoration:none;background:var(--surface)}
.soc:hover{border-color:var(--red)}
.soc b{font:400 30px/1 var(--display);text-transform:uppercase}
.soc span{font:400 14px/1.2 var(--mono);color:var(--muted)}
.soc em{font-style:normal;font:600 13px/1 var(--body);color:var(--red-ink)}

/* Latest */
.latest{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;align-items:center;border-top:3px solid var(--red);padding-top:28px}
.thumb{aspect-ratio:9/16;max-height:440px;max-width:100%;justify-self:center;width:100%;max-width:250px;border-radius:12px;position:relative;overflow:hidden;
  background:linear-gradient(160deg, var(--surface), var(--bg));border:1px solid var(--line);display:grid;place-items:center}
.thumb .play{width:64px;height:64px;border-radius:50%;background:var(--red);display:grid;place-items:center}
.thumb .play::after{content:"";border-left:20px solid var(--on-red);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.thumb .stamp{position:absolute;top:12px;left:12px;font:600 11px/1 var(--mono);color:var(--gold);letter-spacing:.1em}
.latest h2{font:400 clamp(36px,5vw,56px)/1 var(--display);text-transform:uppercase;margin:12px 0 14px}
.latest p{margin:0 0 18px;max-width:46ch;color:var(--muted)}
.stats{display:flex;gap:28px;flex-wrap:wrap;font-variant-numeric:tabular-nums;margin-bottom:22px}
.stats div{display:grid;gap:6px}
.stats b{font:400 30px/1 var(--display);color:var(--gold)}
.btn{display:inline-flex;align-items:center;gap:8px;font:700 15px/1 var(--body);padding:14px 18px;border-radius:6px;background:var(--red);color:var(--on-red);text-decoration:none;border:0;cursor:pointer}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.note{font:400 13px/1.4 var(--mono);color:var(--muted);border-left:2px solid var(--gold);padding-left:10px;margin-top:16px}

/* Page heads */
.phead{display:grid;gap:14px;border-bottom:1px solid var(--line);padding-bottom:26px}
.phead h1{font:400 clamp(64px,11vw,128px)/.88 var(--display);text-transform:uppercase}
.phead p{max-width:56ch;margin:0;color:var(--muted);font-size:18px}

/* Projects */
.projects{display:grid;gap:0}
.proj{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,260px);gap:24px;padding-block:28px;border-bottom:1px solid var(--line);align-items:start}
.proj .code{font:400 14px/1 var(--mono);color:var(--muted);padding-top:8px}
.proj h3{font:400 clamp(30px,4vw,42px)/1 var(--display);text-transform:uppercase;margin-bottom:10px}
.proj p{margin:0;max-width:56ch}
.status{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.status::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.s-done{color:var(--arc)} .s-wip{color:var(--gold)} .s-plan{color:var(--muted)}
.specs{list-style:none;margin:0;padding:14px;border:1px solid var(--line);border-radius:8px;background:var(--surface);display:grid;gap:10px;font-size:14px}
.specs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:8px}
.specs li:last-child{border-bottom:0;padding-bottom:0}
.specs span{color:var(--muted)}
.specs b{font-weight:600;text-align:right}

/* Recommendations */
.disclosure{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--gold);border-radius:8px;font-size:15px;max-width:720px}
.disclosure b{color:var(--gold);font:600 12px/1.6 var(--mono);letter-spacing:.1em;white-space:nowrap}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:600 14px/1 var(--body);padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--fg);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.gear{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.item{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.item .cat{color:var(--gold)}
.item h3{font:700 21px/1.2 var(--body)}
.item p{margin:0;color:var(--muted);font-size:15px;flex:1}
.item a{font:700 15px/1 var(--body);color:var(--red-ink);text-decoration:none;margin-top:6px}
.item a:hover{text-decoration:underline}

/* Files */
.files{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.file{display:grid;grid-template-columns:70px minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line)}
.file:last-child{border-bottom:0}
.ext{font:600 13px/1 var(--mono);letter-spacing:.06em;padding:8px 0;text-align:center;border-radius:4px;border:1px solid currentColor}
.ext.stl{color:var(--arc)} .ext.dxf{color:var(--gold)} .ext.pdf{color:var(--red-ink)}
.file h3{font:700 17px/1.3 var(--body)}
.file p{margin:4px 0 0;font-size:14px;color:var(--muted)}
.size{font:400 13px/1 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums}
.soon{font:600 13px/1 var(--body);color:var(--muted);border:1px dashed var(--line);padding:10px 12px;border-radius:6px;white-space:nowrap}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:24px}

@media (max-width:820px){
  .hero,.latest{grid-template-columns:minmax(0,1fr)}
  .net{max-width:340px;justify-self:start}
  .social{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gear{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proj{grid-template-columns:minmax(0,1fr)}
  .proj .code{padding-top:0}
}
@media (max-width:560px){
  .social,.gear{grid-template-columns:minmax(0,1fr)}
  .file{grid-template-columns:56px minmax(0,1fr)}
  .file .size,.file .soon{grid-column:2}
  .thumb{max-width:200px}
}

.thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}