/* Lab Extremo — design system v2 (navy + âmbar). Sem dependências além da fonte Bricolage Grotesque (Google Fonts). */
:root{
  --bg:#0d1226;--bg2:#0a0f20;--surf:#171d3a;--surf2:#202851;--ink:#eef0fa;--mute:#a4abd0;
  --amber:#ffc23d;--amber2:#ffd36e;--teal:#3de0c3;--red:#ff6a55;--line:#2b3566;
  --radius:20px;--max:1160px;--ease:cubic-bezier(.2,.7,.2,1);
  --font:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* aliases usados pelas páginas antigas */
  --y:var(--amber);--y2:var(--amber2);--txt:var(--ink);--muted:var(--mute);--card:var(--surf);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font);overflow-x:hidden;
  background-image:radial-gradient(1200px 600px at 85% -10%,rgba(61,224,195,.08),transparent 60%),radial-gradient(900px 500px at -10% 10%,rgba(255,194,61,.06),transparent 60%);background-repeat:no-repeat}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--amber)}
a:hover{color:var(--amber2)}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:6px}
::selection{background:var(--amber);color:#1a1300}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--amber);color:#000;padding:8px 12px;z-index:99;border-radius:8px}
h1,h2,h3{letter-spacing:-.02em;line-height:1.08}

/* Header (vidro) */
.site-header{position:sticky;top:0;z-index:50;background:rgba(13,18,38,.72);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid rgba(43,53,102,.7)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.logo{font-weight:800;font-size:20px;text-decoration:none;color:var(--ink);letter-spacing:-.01em;display:inline-flex;align-items:center;gap:10px}
.logo i{color:var(--amber);font-style:normal}
.logo .dot{width:12px;height:12px;border-radius:50%;background:conic-gradient(var(--amber),var(--teal),var(--amber));box-shadow:0 0 14px rgba(255,194,61,.6)}
.logo:hover{color:var(--ink)}
.nav-toggle{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--ink);border-radius:999px;padding:8px 14px;font:600 15px var(--font);cursor:pointer}
.nav{display:none;position:absolute;top:64px;left:0;right:0;background:rgba(13,18,38,.97);border-bottom:1px solid var(--line);padding:8px 20px 18px}
.nav.open{display:block}
.nav a{display:block;padding:11px 0;color:var(--mute);text-decoration:none;font-weight:600;font-size:16px}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav .btn{margin-top:8px;text-align:center;color:#1a1300}
@media(min-width:880px){
  .nav-toggle{display:none}
  .nav{display:flex!important;position:static;background:none;border:0;padding:0;gap:26px;align-items:center}
  .nav a{padding:0;font-size:15px}
  .nav .btn{margin:0;padding:10px 18px}
}

/* Botões */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--amber);color:#1a1300!important;font:800 16px var(--font);padding:12px 22px;border-radius:999px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,background .2s;box-shadow:0 8px 24px -10px rgba(255,194,61,.7)}
.btn:hover{transform:translateY(-2px);background:var(--amber2);box-shadow:0 14px 30px -12px rgba(255,194,61,.85)}
.btn-ghost,.btn.ghost{background:rgba(255,255,255,.03);color:var(--ink)!important;border:1.5px solid var(--line);box-shadow:none}
.btn-ghost:hover,.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:var(--mute)}

/* Seções */
section{padding:72px 0}
.section-title{font-size:clamp(30px,4.6vw,48px);font-weight:800;margin:0 0 10px}
.section-sub{color:var(--mute);margin:0 0 30px;max-width:38em}
.eyebrow{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.tag{display:inline-block;align-self:flex-start;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);border:1px solid rgba(255,194,61,.4);border-radius:999px;padding:3px 10px}

/* Anúncio (placeholder) */
.ad-slot{margin:28px auto;border:1.5px dashed #3b4680;border-radius:16px;color:#7f88b8;background:repeating-linear-gradient(45deg,rgba(23,29,58,.9),rgba(23,29,58,.9) 10px,rgba(32,40,81,.6) 10px,rgba(32,40,81,.6) 20px);display:grid;place-items:center;text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;min-height:100px;padding:12px}
.ad-slot small{display:block;font-weight:500;text-transform:none;letter-spacing:0;margin-top:4px}
.ad-slot.ad-inarticle{min-height:250px}
.ad-slot.ad-sidebar{min-height:250px;max-width:300px}

/* Newsletter */
.newsletter{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--surf2),var(--surf));border:1px solid var(--line);border-radius:28px;padding:36px 26px}
.newsletter::after{content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(255,194,61,.22),transparent 70%);pointer-events:none}
.newsletter h2{margin:0 0 8px;font-size:clamp(26px,3.6vw,36px);font-weight:800}
.newsletter h2 span{color:var(--amber)}
.newsletter p{color:var(--mute);margin:0 0 18px;max-width:40em}
.form-row{display:flex;flex-direction:column;gap:10px;max-width:560px}
@media(min-width:560px){.form-row{flex-direction:row}}
input,textarea,select{width:100%;background:rgba(10,15,32,.8);border:1px solid var(--line);color:var(--ink);border-radius:14px;padding:13px 16px;font:inherit}
input:focus,textarea:focus,select:focus{outline:2px solid var(--amber);border-color:transparent}
label{font-weight:700;display:block;margin-bottom:6px}
.field{margin-bottom:16px}
.hint{font-size:13px;color:var(--mute)}
.form-msg{margin-top:12px;font-weight:700;color:var(--teal);min-height:1em}
.hp{position:absolute;left:-9999px}

/* Placeholders visíveis */
.ph{background:rgba(255,194,61,.1);color:var(--amber);border:1px dashed var(--amber);border-radius:6px;padding:0 6px;font-size:.82em;font-weight:700}
.ph-box{border:1px dashed var(--amber);background:rgba(255,194,61,.06);border-radius:12px;padding:12px 14px;font-size:14px;color:var(--amber2)}

/* Artigo */
.article{padding:28px 0 10px}
.breadcrumb{font-size:14px;color:var(--mute);margin-bottom:18px}
.breadcrumb a{color:var(--mute);text-decoration:none}.breadcrumb a:hover{color:var(--ink)}
.article-hero{position:relative;margin:0 0 26px;border-radius:24px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:var(--surf)}
.article-hero img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.2s var(--ease)}
.article-hero:hover img{transform:scale(1.08)}
.article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(13,18,38,.85))}
.article-hero figcaption{position:absolute;left:16px;bottom:12px;z-index:1;font-size:12px;color:#cfd3ea}
.article h1{font-size:clamp(32px,6vw,54px);margin:12px 0 14px;font-weight:800}
.article .lead,.lead{font-size:20px;color:#cfd3ea}
.article-layout{display:grid;gap:32px}
@media(min-width:980px){.article-layout{grid-template-columns:1fr 320px}}
.prose{max-width:740px}
.prose h2{font-size:clamp(24px,3vw,30px);margin:38px 0 10px;color:var(--ink)}
.prose h2::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--amber);margin-right:12px;vertical-align:middle;box-shadow:0 0 12px rgba(255,194,61,.7)}
.prose p,.prose li{font-size:18px;color:#d9dcef}
.prose strong{color:var(--ink)}
.prose blockquote{margin:24px 0;border-left:4px solid var(--teal);padding:14px 20px;background:var(--surf);border-radius:0 16px 16px 0;color:var(--ink)}
.short-embed{position:relative;width:100%;max-width:340px;aspect-ratio:9/16;margin:26px auto;border-radius:22px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.short-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.short-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px;text-align:center;padding:24px;color:#d9dcef;background:radial-gradient(circle at 50% 40%,#202851,#0a0f20) center/cover}
.short-ph::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,18,38,.15),rgba(13,18,38,.9))}
.short-ph>*{position:relative}
.short-ph .play{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:#14123a;font-size:28px;margin-bottom:auto;margin-top:auto}
.sources{margin-top:40px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surf)}
.sources h2{margin-top:0!important}
.sources ol{padding-left:20px}
.sources li{font-size:15px;margin-bottom:8px}
.aside-box{background:var(--surf);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px}
.aside-box h3{margin-top:0;font-size:17px;color:var(--amber)}
.aside-box ul{padding-left:18px;margin:0}
.aside-box a{color:var(--ink)}
.affiliate{border-color:rgba(255,194,61,.35)}
.disclaimer{font-size:12px;color:var(--mute)}
@media(min-width:980px){.article-layout aside{position:sticky;top:84px;align-self:start}}

/* Páginas estáticas */
.page{padding:44px 0}
.page h1{font-size:clamp(34px,6vw,56px);font-weight:800;margin:0 0 16px}
.page h2{color:var(--ink);margin-top:32px}
.page .prose{max-width:780px}

/* Rodapé */
.site-footer{margin-top:40px;border-top:1px solid var(--line);background:var(--bg2);padding:44px 0 36px;font-size:14px;color:var(--mute)}
.footer-grid{display:grid;gap:26px}
@media(min-width:760px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.site-footer strong{color:var(--ink);display:block;margin-bottom:10px}
.site-footer a{color:var(--mute);text-decoration:none}
.site-footer a:hover{color:var(--amber)}
.site-footer .logo{color:var(--ink)}
.site-footer ul{list-style:none;padding:0;margin:0}
.site-footer li{margin-bottom:8px}
.footer-bottom{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}
.credits{font-size:12px;color:#7f88b8}

/* Revelar ao rolar (só com JS) */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
