@import url("/assets/fonts.css");

:root{
  --color-white:#ffffff;
  --color-creme:#f4f3e8;
  --color-grey:#595a51;
  --color-grey-2:#404040;
  --color-black:#13140e;
  --color-black-2:#181813;
  --color-yellow:#ebfc72;
  --color-yellow-2:#bacd31;
  --color-red:#f1664d;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;
  --font-sans:"NB International Pro","Helvetica Neue",Inter,sans-serif;
  --ease:cubic-bezier(.165,.84,.44,1);
  --gutter:clamp(24px,5vw,96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--color-black);color:var(--color-creme);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
::selection{background:var(--color-yellow);color:var(--color-black)}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.hairline{border:0;border-top:1px solid var(--color-grey-2)}
.dotted{border:0;border-top:1px dotted var(--color-grey)}

/* ---------- nav (igual a home) ---------- */
.topnav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gutter);font-family:var(--font-mono);font-size:13px;text-transform:uppercase;letter-spacing:.04em;background:rgba(19,20,14,.72);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-grey-2)}
.topnav .brand{font-weight:700;letter-spacing:.14em;color:var(--color-creme);text-decoration:none}
.topnav nav{display:flex;gap:36px}
.topnav nav a{color:var(--color-creme);opacity:.7;text-decoration:none;transition:opacity .2s}
.topnav nav a:hover,.topnav nav a[aria-current]{opacity:1;color:var(--color-yellow)}
.topnav .cta{border:1px solid var(--color-yellow);color:var(--color-yellow);padding:9px 18px;text-decoration:none;transition:all .2s;white-space:nowrap}
.topnav .cta:hover{background:var(--color-yellow);color:var(--color-black)}
@media (max-width:920px){.topnav nav{display:none}}

.eyebrow{display:flex;align-items:center;color:var(--color-yellow);font-family:var(--font-mono);font-weight:300;font-size:15px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:22px}
.eyebrow::before{content:"";width:7px;height:7px;background:currentcolor;margin-right:14px;animation:flash 1.2s step-start infinite}
@keyframes flash{0%{opacity:0}50%{opacity:1}to{opacity:0}}
.btn{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:16px 28px;display:inline-flex;align-items:center;gap:10px;transition:all .25s var(--ease)}
.btn-primary{background:var(--color-yellow);color:var(--color-black)}
.btn-primary:hover{background:var(--color-creme)}
.btn-ghost{border:1px solid var(--color-grey-2);color:var(--color-creme)}
.btn-ghost:hover{border-color:var(--color-yellow);color:var(--color-yellow)}

/* ---------- cabecalho de pagina ---------- */
.pagehead{padding:180px 0 72px}
.pagehead h1{font-family:var(--font-sans);font-weight:400;font-size:clamp(40px,5.4vw,84px);letter-spacing:-.03em;line-height:.98;text-wrap:balance;max-width:16ch}
.pagehead .lede{font-size:clamp(17px,1.5vw,21px);line-height:1.65;opacity:.72;max-width:62ch;margin-top:28px}

/* ---------- lista de artigos ---------- */
.postlist{list-style:none;border-top:1px dotted var(--color-grey)}
.postlist li{border-bottom:1px dotted var(--color-grey)}
.postlist a{display:grid;grid-template-columns:74px 1fr 200px;gap:32px;align-items:baseline;padding:34px 0;text-decoration:none;transition:opacity .2s}
.postlist a:hover{opacity:.62}
.postlist .n{font-family:var(--font-mono);font-weight:300;font-size:15px;color:var(--color-yellow)}
.postlist h2{font-family:var(--font-sans);font-weight:400;font-size:clamp(21px,2.1vw,29px);letter-spacing:-.015em;line-height:1.22;text-wrap:balance}
.postlist p{font-size:16px;line-height:1.6;opacity:.62;margin-top:12px;max-width:64ch}
.postlist .meta{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;opacity:.5;text-align:right;line-height:1.9}
@media (max-width:900px){
  .postlist a{grid-template-columns:44px 1fr;gap:18px;padding:28px 0}
  .postlist .meta{grid-column:2;text-align:left;margin-top:12px}
}

/* ---------- artigo ---------- */
.article{padding:170px 0 0}
.article-head{max-width:46rem;margin:0 auto}
.article-head h1{font-family:var(--font-sans);font-weight:400;font-size:clamp(34px,4.4vw,62px);letter-spacing:-.03em;line-height:1.03;text-wrap:balance}
.article-head .lede{font-size:clamp(18px,1.6vw,22px);line-height:1.6;opacity:.74;margin-top:26px}
.article-meta{display:flex;flex-wrap:wrap;gap:22px;margin-top:34px;padding-top:22px;border-top:1px dotted var(--color-grey);font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;opacity:.5}

.prose{max-width:46rem;margin:0 auto;padding:56px 0 0;font-size:19px;line-height:1.78}
.prose > *{margin-bottom:1.35em}
.prose h2{font-family:var(--font-sans);font-weight:400;font-size:clamp(25px,2.6vw,35px);letter-spacing:-.02em;line-height:1.2;margin-top:2.4em;margin-bottom:.7em;text-wrap:balance;scroll-margin-top:110px}
.prose h3{font-family:var(--font-mono);font-weight:400;font-size:15px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-yellow);margin-top:2em;margin-bottom:.7em}
.prose strong{font-weight:400;color:var(--color-yellow)}
.prose em{font-style:italic;opacity:.9}
.prose a{color:var(--color-yellow);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{background:var(--color-yellow);color:var(--color-black);text-decoration:none}
.prose ul,.prose ol{padding-left:1.4em}
.prose li{margin-bottom:.6em}
.prose li::marker{color:var(--color-yellow)}
.prose blockquote{border-left:2px solid var(--color-yellow);padding:6px 0 6px 28px;margin:2em 0;font-size:clamp(21px,2.2vw,27px);line-height:1.42;letter-spacing:-.01em;color:var(--color-white);text-wrap:balance}
.prose hr{border:0;border-top:1px dotted var(--color-grey);margin:2.6em 0}
.prose img{margin:2em 0;border:1px solid var(--color-grey-2)}
@media (max-width:700px){.prose{font-size:17.5px;line-height:1.72}}

/* ---------- bloco de conversao ---------- */
.cta-block{max-width:46rem;margin:76px auto 0;border-top:2px solid var(--color-yellow);background:var(--color-black-2);padding:44px 40px}
.cta-block .k{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;color:var(--color-yellow);margin-bottom:18px}
.cta-block p{font-size:18px;line-height:1.65;opacity:.85;margin-bottom:26px;max-width:54ch}
@media (max-width:700px){.cta-block{padding:32px 24px}}

/* ---------- rodape do artigo ---------- */
.article-foot{max-width:46rem;margin:0 auto;padding:64px 0 0}
.fonte-nota{font-family:var(--font-mono);font-size:12.5px;line-height:1.75;text-transform:uppercase;letter-spacing:.02em;opacity:.45;border-top:1px dotted var(--color-grey);padding-top:20px}
.lacunas{border:1px dashed var(--color-red);color:#f5a08e;padding:18px 22px;margin-top:26px;font-family:var(--font-mono);font-size:13px;line-height:1.7}
.lacunas .k{color:var(--color-red);text-transform:uppercase;letter-spacing:.14em;font-size:11px;display:block;margin-bottom:8px}

.maisposts{padding:96px 0 0}
.maisposts .k{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.16em;opacity:.5;margin-bottom:28px}
.maisposts .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-grey-2)}
.maisposts .grid a{background:var(--color-black);padding:32px 28px;text-decoration:none;display:flex;flex-direction:column;gap:12px;transition:background .25s}
.maisposts .grid a:hover{background:var(--color-black-2)}
.maisposts .grid .t{font-size:19px;line-height:1.25;letter-spacing:-.01em}
.maisposts .grid .d{font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;opacity:.45}
@media (max-width:900px){.maisposts .grid{grid-template-columns:1fr}}

/* ---------- rodape global ---------- */
.sitefoot{margin-top:110px;border-top:1px solid var(--color-grey-2);padding:48px 0 60px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;opacity:.45;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sitefoot a{text-decoration:none}
.sitefoot a:hover{color:var(--color-yellow)}

/* ---------- destaque de numeros (ecoa a statstrip da home) ---------- */
.numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border-top:1px solid var(--color-grey-2);border-bottom:1px solid var(--color-grey-2);
  padding:34px 0;margin:2.6em 0}
.numeros > div{padding:0 28px;border-left:1px dotted var(--color-grey)}
.numeros > div:first-child{border-left:0;padding-left:0}
.numeros .n{display:block;font-family:var(--font-sans);font-size:clamp(27px,3vw,42px);
  letter-spacing:-.02em;color:var(--color-yellow);line-height:1}
.numeros .l{display:block;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;opacity:.55;margin-top:11px;line-height:1.5}
@media (max-width:640px){.numeros{grid-template-columns:1fr 1fr;row-gap:26px}
  .numeros > div{border-left:0;padding-left:0}}

/* ---------- figura e diagrama ---------- */
figure{margin:2.8em 0}
figure svg{display:block;width:100%;height:auto;border:1px solid var(--color-grey-2);background:var(--color-black-2)}
figure img{border:1px solid var(--color-grey-2)}
figcaption{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  opacity:.5;margin-top:14px;line-height:1.6}
.diagrama text{font-family:"JetBrains Mono",ui-monospace,monospace}

/* ---------- foto de topo do artigo ---------- */
.article-photo{margin:48px auto 0;max-width:1440px}
.article-photo .ph{aspect-ratio:21/9;overflow:hidden;border:1px solid var(--color-grey-2);background:var(--color-black-2)}
.article-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(.2) contrast(1.06)}
@media (max-width:700px){.article-photo .ph{aspect-ratio:3/2}}

/* ---------- diagramas em HTML: caixas, na linguagem do site ---------- */
.dg{margin:2.8em 0}
.dg-cap{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  opacity:.5;margin-top:16px;line-height:1.6}

/* comparacao de dois caminhos */
.dg-2col{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--color-grey-2);
  border:1px solid var(--color-grey-2)}
.dg-col{background:var(--color-black-2);padding:26px 24px}
.dg-col.alt{background:#151610}
.dg-col h4{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--color-yellow);margin-bottom:18px;font-weight:400}
.dg-col.neg h4{color:var(--color-red)}
.dg-step{font-size:15.5px;line-height:1.45;padding:11px 0 11px 22px;position:relative;opacity:.85}
.dg-step + .dg-step{border-top:1px dotted var(--color-grey)}
.dg-step::before{content:"\2193";position:absolute;left:0;top:11px;color:var(--color-yellow);
  font-family:var(--font-mono);font-size:13px}
.dg-col.neg .dg-step::before{color:var(--color-red)}
.dg-step:first-of-type::before{content:"\2022"}
.dg-origem{background:var(--color-black);border:1px solid var(--color-grey-2);border-bottom:0;
  padding:18px 24px;font-family:var(--font-mono);font-size:12.5px;text-transform:uppercase;
  letter-spacing:.04em;color:var(--color-creme);opacity:.75}
@media (max-width:640px){.dg-2col{grid-template-columns:1fr}}

/* escada de etapas */
.dg-escada{border:1px solid var(--color-grey-2);background:var(--color-black-2);padding:8px 0}
.dg-degrau{display:grid;grid-template-columns:56px 1fr;align-items:center;gap:18px;
  padding:16px 24px;border-bottom:1px dotted var(--color-grey)}
.dg-degrau:last-child{border-bottom:0}
.dg-degrau .lvl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--color-yellow);
  text-transform:uppercase;border:1px solid var(--color-grey-2);padding:6px 0;text-align:center}
.dg-degrau .txt{font-size:15.5px;line-height:1.45;opacity:.88}
.dg-teto{background:rgba(241,102,77,.09);border-top:1px solid var(--color-red);
  padding:14px 24px;font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.04em;color:#f5a08e}

/* matriz / tabela */
.dg-tab{width:100%;border-collapse:collapse;font-size:15px}
.dg-tab th{text-align:left;font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.05em;opacity:.5;padding:0 16px 14px 0;border-bottom:1px solid var(--color-grey-2);font-weight:400}
.dg-tab td{padding:18px 16px 18px 0;border-bottom:1px dotted var(--color-grey);vertical-align:top;line-height:1.45}
.dg-tab tr:last-child td{border-bottom:0}
.dg-tab .rot{font-family:var(--font-mono);font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;opacity:.75}
.dg-tab tr.escolhido td{background:rgba(235,252,114,.07)}
.dg-tab tr.escolhido .rot{color:var(--color-yellow);opacity:1}
.dg-wrap{overflow-x:auto}
@media (max-width:640px){.dg-tab{font-size:13.5px}.dg-tab td{padding:14px 12px 14px 0}}

/* tres colunas (tripe) */
.dg-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--color-grey-2);
  border:1px solid var(--color-grey-2)}
.dg-3col .dg-col{background:var(--color-black-2)}
.dg-3col .dg-col.aceso{background:rgba(235,252,114,.07);box-shadow:inset 0 2px 0 var(--color-yellow)}
.dg-col p{font-size:14.5px;line-height:1.5;opacity:.7;margin:0}
.dg-col .apagado{opacity:.32}
@media (max-width:640px){.dg-3col{grid-template-columns:1fr}}

/* matriz 2x2 */
.dg-m2{display:grid;grid-template-columns:96px 1fr 1fr;gap:1px;background:var(--color-grey-2);
  border:1px solid var(--color-grey-2)}
.dg-m2 > *{background:var(--color-black-2);padding:18px}
.dg-m2 .eixo{background:var(--color-black);font-family:var(--font-mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;opacity:.55;display:flex;align-items:center}
.dg-m2 .q{min-height:104px;display:flex;flex-direction:column;justify-content:center;gap:7px}
.dg-m2 .q b{font-weight:400;font-size:17px;line-height:1.25;color:var(--color-creme)}
.dg-m2 .q span{font-family:var(--font-mono);font-size:11.5px;opacity:.5;line-height:1.5}
.dg-m2 .q.alvo{background:rgba(235,252,114,.08)}
.dg-m2 .q.alvo b{color:var(--color-yellow)}
.dg-m2 .q.vazio b{opacity:.28}
@media (max-width:640px){.dg-m2{grid-template-columns:1fr}.dg-m2 .eixo{display:none}
  .dg-m2 .q{min-height:0}}

/* item fora da trilha */
.dg-fora{border:1px dashed var(--color-grey);background:transparent;margin-top:1px;
  padding:16px 24px;display:grid;grid-template-columns:56px 1fr;gap:18px;align-items:center}
.dg-fora .lvl{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--color-grey);
  text-transform:uppercase;text-align:center}
.dg-fora .txt{font-size:15.5px;line-height:1.45;opacity:.5}

/* ---------- hero do indice ---------- */
.blog-hero{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end;margin-bottom:64px}
.blog-hero .ph{aspect-ratio:4/5;overflow:hidden;border:1px solid var(--color-grey-2);background:var(--color-black-2)}
.blog-hero .ph img{width:100%;height:100%;object-fit:cover;object-position:center 18%;filter:grayscale(.15) contrast(1.05)}
@media (max-width:900px){.blog-hero{grid-template-columns:1fr;gap:36px}.blog-hero .ph{aspect-ratio:16/10}}

/* ---------- cartao do autor, junto da conversao ---------- */
.autor{max-width:46rem;margin:34px auto 0;display:grid;grid-template-columns:112px 1fr;gap:26px;
  align-items:center;border-top:1px dotted var(--color-grey);padding-top:30px}
.autor .ph{width:112px;height:112px;overflow:hidden;border:1px solid var(--color-grey-2);background:var(--color-black-2)}
.autor .ph img{width:100%;height:100%;object-fit:cover;object-position:center 16%;filter:grayscale(1) contrast(1.08)}
.autor .nome{font-size:20px;letter-spacing:-.01em;margin-bottom:8px}
.autor .cred{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.03em;
  opacity:.55;line-height:1.75}
@media (max-width:560px){.autor{grid-template-columns:84px 1fr;gap:18px}
  .autor .ph{width:84px;height:84px}}

/* ---------- cartao de origem do video ---------- */
.origem{max-width:46rem;margin:34px auto 0;border:1px solid var(--color-grey-2);
  background:var(--color-black-2);padding:22px 26px;display:grid;
  grid-template-columns:1fr auto;gap:24px;align-items:center}
.origem .k{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.18em;color:var(--color-yellow);margin-bottom:9px}
.origem .tit{font-size:16.5px;line-height:1.4;letter-spacing:-.005em;color:var(--color-creme)}
.origem .btn-yt{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.05em;text-decoration:none;border:1px solid var(--color-grey-2);
  padding:13px 20px;white-space:nowrap;display:inline-flex;align-items:center;gap:9px;
  transition:all .2s}
.origem .btn-yt:hover{border-color:var(--color-yellow);color:var(--color-yellow)}
@media (max-width:640px){.origem{grid-template-columns:1fr;gap:16px}
  .origem .btn-yt{justify-content:center}}