/* Guía de Web Strike: mismo mundo visual que el juego (arena, ámbar, VGUI del 1.6). Tema único oscuro, pintado explícito. */
:root{
  --bg:#0c0a07; --bg-2:#14100a; --panel:#18130c; --line:rgba(240,164,55,.24); --line-2:rgba(240,164,55,.5);
  --amber:#f0a437; --amber-dim:#a8752c; --sand:#d8b98a; --ink:#f3e9d6; --ink-dim:#b9a98c; --ct:#8fb7ff; --t:#ffb070; --green:#7cff6b;
  --display:'Black Ops One','Impact','Arial Black',sans-serif;
  --body:'Barlow','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'Share Tech Mono','SF Mono',Menlo,Consolas,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.62 var(--body)}
a{color:var(--amber);text-underline-offset:3px}
a:hover{color:var(--ink)}
a:focus-visible,summary:focus-visible,.cta:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.top{position:sticky;top:0;z-index:5;background:rgba(12,10,7,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:60px}
.brand{font:400 22px/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:.02em}
.top nav{display:flex;gap:16px;margin-left:auto;align-items:center;font:400 14px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em}
.top nav a{color:var(--ink-dim);text-decoration:none}
.top nav a:hover{color:var(--ink)}
.top nav a.cta{color:#1a1206}
.top nav a.cta:hover{color:var(--amber)}
.cta{display:inline-flex;align-items:center;gap:10px;background:var(--amber);color:#1a1206;font:400 15px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;text-decoration:none;padding:13px 18px;border:1px solid var(--amber);transition:background .15s,color .15s}
.cta:hover{background:transparent;color:var(--amber)}
.cta.sm{padding:10px 14px;font-size:13px}

.hero{position:relative;border-bottom:1px solid var(--line);overflow:hidden}
.hero picture img{width:100%;height:clamp(260px,46vw,520px);object-fit:cover;filter:saturate(.95)}
.hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,7,.72) 0%,rgba(12,10,7,.35) 55%,rgba(12,10,7,0) 80%),linear-gradient(180deg,rgba(12,10,7,0) 25%,rgba(12,10,7,.94) 94%)}
.hero .copy{position:absolute;left:0;right:0;bottom:0;padding-bottom:34px}
.eyebrow{font:400 13px/1 var(--mono);color:var(--amber);text-transform:uppercase;letter-spacing:.16em;margin:0 0 12px}
h1{font:400 clamp(34px,6vw,64px)/1.02 var(--display);margin:0 0 14px;text-wrap:balance;text-shadow:0 2px 0 rgba(0,0,0,.5)}
.lede{max-width:62ch;margin:0 0 22px;color:var(--ink);font-size:clamp(17px,2vw,20px)}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;border:1px solid var(--line);margin:34px 0 0;background:var(--bg-2)}
.facts div{padding:16px 18px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts b{display:block;font:400 22px/1.1 var(--display);color:var(--amber);margin-bottom:4px}
.facts span{font:400 14px/1.35 var(--mono);color:var(--ink-dim);text-transform:uppercase;letter-spacing:.05em}

main section{padding:46px 0 6px;scroll-margin-top:64px}
h2{font:400 clamp(26px,3.4vw,34px)/1.1 var(--display);margin:0 0 16px;text-wrap:balance}
h2 small{display:block;font:400 13px/1 var(--mono);color:var(--amber-dim);letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px}
h3{font:600 20px/1.3 var(--body);margin:0 0 6px;color:var(--ink)}
p{margin:0 0 14px;max-width:68ch}
.dim{color:var(--ink-dim)}

ol.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:12px;max-width:760px}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:14px 16px;background:var(--panel);border:1px solid var(--line)}
ol.steps li::before{content:counter(s);font:400 24px/1 var(--display);color:var(--amber);padding-top:2px}

.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 28px;margin:6px 0 0}
.keys dl{margin:0}
.keys .row{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line)}
.keys dt{display:flex;gap:6px;flex-wrap:wrap}
.keys dd{margin:0;color:var(--ink)}
kbd{display:inline-block;min-width:28px;text-align:center;font:400 14px/1 var(--mono);color:var(--ink);background:#221a10;border:1px solid var(--line-2);border-bottom-width:3px;padding:5px 7px;border-radius:3px}

.modes{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.mode{padding:18px;background:var(--panel);border:1px solid var(--line)}
.mode p{font-size:16px;margin:0}
.tag{display:inline-block;font:400 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--bg);background:var(--sand);padding:4px 6px;margin-bottom:10px}

.maps{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media (min-width:1000px){.maps,.modes{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.maps,.modes{grid-template-columns:1fr}}
.map{background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column}
.map img{aspect-ratio:16/9;object-fit:cover;width:100%;border-bottom:1px solid var(--line)}
.map .in{padding:14px 16px 16px}
.map h3{font:400 20px/1.1 var(--mono);color:var(--amber);letter-spacing:.02em}
.map p{font-size:16px;margin:0}

.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.box{padding:18px;border:1px solid var(--line);background:var(--bg-2)}
.box p:last-child{margin-bottom:0}
code{font:400 15px/1 var(--mono);color:var(--green);background:#10160c;padding:2px 6px;border:1px solid rgba(124,255,107,.2)}
table.rules{border-collapse:collapse;width:100%;max-width:640px;font-size:16px}
table.rules td{padding:9px 0;border-bottom:1px dashed var(--line);font-variant-numeric:tabular-nums}
table.rules td:last-child{text-align:right;font-family:var(--mono);color:var(--amber)}

.faq details{border-bottom:1px solid var(--line);max-width:820px}
.faq summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font:600 19px/1.35 var(--body);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:12px;font:400 24px/1 var(--mono);color:var(--amber)}
.faq details[open] summary::after{content:'–'}
.faq details p{color:var(--ink-dim)}

.band{margin:54px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.band .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;padding:28px 20px}
.band p{margin:0;font:400 clamp(22px,3vw,30px)/1.15 var(--display)}

footer{padding:30px 0 50px;color:var(--ink-dim);font-size:14px}
footer p{max-width:80ch}
footer .links{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em;font-size:13px;margin-bottom:14px}

@media (max-width:640px){
  body{font-size:17px}
  .top nav a:not(.cta){display:none}
  .facts div{border-right:0;border-bottom:1px solid var(--line)}
  .facts div:last-child{border-bottom:0}
  .keys .row{grid-template-columns:112px 1fr}
  .hero .copy{position:static;padding-top:18px}
  .hero .veil{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}