/* ===== Rafael Viper — Blog v2 ===== */

/* ---- fontes hospedadas aqui, não no Google ----
   São fontes variáveis: um arquivo por família cobre toda a faixa de peso
   300–700, em vez de um arquivo por peso.

   Cada família tem dois recortes. O `latin` cobre português e o resto do
   alfabeto ocidental; o `latin-ext` traz acentos do leste europeu. O
   unicode-range faz o navegador baixar o `latin-ext` só se a página tiver
   algum caractere que precise dele — na prática, quase nunca.

   Licenças em docs/FONTES.md. */
/* Inter itálico — latin */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter-italic-latin.woff2?v=967f7469') format('woff2');
  font-style:italic; font-weight:300 700; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter itálico — latin-ext */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter-italic-latin-ext.woff2?v=3cd4ee51') format('woff2');
  font-style:italic; font-weight:300 700; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter-latin.woff2?v=f11d729b') format('woff2');
  font-style:normal; font-weight:300 700; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter — latin-ext */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/inter-latin-ext.woff2?v=cf3eb50f') format('woff2');
  font-style:normal; font-weight:300 700; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* JetBrains Mono — latin */
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono/jetbrains-mono-latin.woff2?v=e7277e71') format('woff2');
  font-style:normal; font-weight:300 700; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* JetBrains Mono — latin-ext */
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono/jetbrains-mono-latin-ext.woff2?v=1cb17b5a') format('woff2');
  font-style:normal; font-weight:300 700; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Grotesk — latin */
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk/space-grotesk-latin.woff2?v=c0781ea2') format('woff2');
  font-style:normal; font-weight:300 700; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Space Grotesk — latin-ext */
@font-face{
  font-family:'Space Grotesk';
  src:url('../fonts/space-grotesk/space-grotesk-latin-ext.woff2?v=1742d56d') format('woff2');
  font-style:normal; font-weight:300 700; font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* fonte própria da marca, usada só no nome grande da home */
@font-face{
  font-family:'Designer';
  src:url('../fonts/Designer/DesignerRegular.woff2?v=2150d382') format('woff2'),
      url('../fonts/Designer/DesignerRegular.woff?v=3102d2a6') format('woff'),
      url('../fonts/Designer/DesignerRegular.ttf?v=795bd76b') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  /* ---- paleta Apple HIG (modo dark) ---- */
  --bg:rgb(0,0,0);
  --surface:rgb(28,28,30);        /* dark gray-6 */
  --surface-2:rgb(44,44,46);      /* dark gray-5 */
  --border:rgb(44,44,46);         /* dark gray-5 */
  --border-strong:rgb(72,72,74);  /* dark gray-3 */
  --text:rgb(255,255,255);        /* branco puro — SÓ títulos e destaque */
  --text-leitura:rgb(223, 223, 223);/* branco suave — texto corrido, padrão do body */
  --text-soft:rgb(142,142,147);   /* gray-1 — texto secundário */
  --text-mute:rgb(99,99,102);     /* dark gray-2 — legendas e rótulos */
  /* ---- paleta de cores — 12 cores, cada uma com seu nome próprio.
         Não existe apelido por categoria: quem precisa de cor aponta
         para o nome da cor. Assim nenhuma cor aparece duas vezes. ---- */
  --red:rgb(255,66,69);      --red-tint:rgba(255,66,69,.12);
  --orange:rgb(255,146,48);  --orange-tint:rgba(255,146,48,.12);
  --yellow:rgb(255,214,0);   --yellow-tint:rgba(255,214,0,.12);
  --green:rgb(48,209,88);    --green-tint:rgba(48,209,88,.12);
  --mint:rgb(0,218,195);     --mint-tint:rgba(0,218,195,.12);
  --teal:rgb(0,210,224);     --teal-tint:rgba(0,210,224,.12);
  --cyan:rgb(60,211,254);    --cyan-tint:rgba(60,211,254,.12);
  --blue:rgb(0,145,255);     --blue-tint:rgba(0,145,255,.12);
  --indigo:rgb(109,124,255); --indigo-tint:rgba(109,124,255,.12);
  --purple:rgb(219,52,242);  --purple-tint:rgba(219,52,242,.12);
  --pink:rgb(255,55,95);     --pink-tint:rgba(255,55,95,.12);
  --brown:rgb(183,138,102);  --brown-tint:rgba(183,138,102,.12);

  /* cor de destaque do site — é a mint, apontada e não copiada */
  --accent:var(--mint);
  --accent-tint:var(--mint-tint);

  /* ---- famílias ---- */
  --f-primaria:'Space Grotesk', sans-serif;   /* títulos e números em destaque */
  --f-secundaria:'Inter', sans-serif;         /* todo o texto corrido */
  --f-mono:'JetBrains Mono', monospace;       /* labels, datas, tags, código */

  /* ---- tamanhos ---- */
  --fs-mini:.6875rem;   /* 11px — badges, pills, tags */
  --fs-micro:.75rem;    /* 12px — legendas, metadados */
  --fs-small:.8125rem;  /* 13px — texto pequeno, H6, nav */
  --fs-medio:.875rem;   /* 14px — descrições de card */
  --fs-texto:1rem;      /* 16px — corpo padrão */
  --fs-h5:1rem;
  --fs-h4:1.125rem;     /* 18px */
  --fs-h3:1.375rem;     /* 22px */
  --fs-h2:clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);   /* fluido: 21 → 30px */
  --fs-h1:clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);  /* fluido: 28 → 44px */

  /* ---- pesos ---- */
  --fw-leve:300;
  --fw-normal:400;
  --fw-medio:500;
  --fw-forte:600;
  --fw-bold:700;

  /* ---- altura de linha ---- */
  --lh-titulo:1.25;   /* títulos */
  --lh-normal:1.5;    /* interface */
  --lh-leitura:1.7;   /* texto corrido longo */

  /* ---- espaçamento entre letras ---- */
  --ls-titulo:-.015em;  /* títulos grandes fecham um pouco */
  --ls-label:.08em;     /* labels em caixa alta abrem */

  --radius-sm:8px;
  --radius-md:14px;
  --radius-lg:18px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--text-leitura); font-family:var(--f-secundaria);
  line-height:1.5; -webkit-font-smoothing:antialiased;
}
/* home (linktree): centraliza o cartão verticalmente em telas altas, em vez de encostar no topo */
body.linktree-page{display:flex; flex-direction:column; justify-content:center; min-height:100vh;}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1100px; margin:0 auto; padding:0 1.5rem;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* =========================================================
   TIPOGRAFIA
   Sistema completo. Se você não achar o nome aqui, ele não existe.

   FAMÍLIAS  .fonte-primaria  .fonte-secundaria  .fonte-mono
   TÍTULOS   h1..h6  (ou .h1 .. .h6 pra usar o visual em outra tag)
   TEXTO     .texto  .texto-forte  .texto-apoio  .realce  .small
   OUTROS    .link  .mono
   AUXILIAR  .maiusculas  .truncar  .cortar-2linhas
   ========================================================= */

/* ---- famílias ---- */
.fonte-primaria{font-family:var(--f-primaria);}
.fonte-secundaria{font-family:var(--f-secundaria);}
.fonte-mono{font-family:var(--f-mono);}

/* ---- títulos: h1..h6 já vêm estilizados; as classes .h1..h6 servem
        pra aplicar o visual de um nível em outra tag ---- */
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5{
  font-family:var(--f-primaria); line-height:var(--lh-titulo); margin:0 0 .6rem;
  color:var(--text); /* título = branco puro, contra o texto suave do body */
}
h1,.h1{font-size:var(--fs-h1); font-weight:var(--fw-bold); letter-spacing:var(--ls-titulo);}
h2,.h2{font-size:var(--fs-h2); font-weight:var(--fw-forte); letter-spacing:var(--ls-titulo);}
h3,.h3{font-size:var(--fs-h3); font-weight:var(--fw-forte);}
h4,.h4{font-size:var(--fs-h4); font-weight:var(--fw-forte);}
h5,.h5{font-size:var(--fs-h5); font-weight:var(--fw-forte);}
/* h6 é o "olho"/rótulo de seção: mono, caixa alta, discreto */
h6,.h6{
  font-family:var(--f-mono); font-size:var(--fs-small); font-weight:var(--fw-medio);
  line-height:var(--lh-normal); text-transform:uppercase; letter-spacing:var(--ls-label);
  color:var(--text-mute); margin:0 0 .6rem;
}

/* ---- texto ---- */
.texto{font-family:var(--f-secundaria); font-size:var(--fs-texto); font-weight:var(--fw-normal); line-height:var(--lh-leitura); color:var(--text-leitura);}
.texto-forte{font-family:var(--f-secundaria); font-size:var(--fs-texto); font-weight:var(--fw-medio); line-height:var(--lh-leitura); color:var(--text);}
.texto-apoio{font-family:var(--f-secundaria); font-size:var(--fs-texto); font-weight:var(--fw-leve); line-height:var(--lh-leitura); color:var(--text-soft);}
.realce{color:var(--accent); font-weight:var(--fw-medio);}

/* ---- cores do texto ----
   Uma classe por cor da paleta, para colorir uma palavra, uma frase ou um item
   de lista. Em item de lista o número também acompanha a cor.

   O par de seletores existe porque .article p e .article ol já declaram `color`,
   e uma classe sozinha perderia para elas por especificidade dentro de um post.

   Use com moderação: cor demais em texto corrido cansa e atrapalha a leitura. ---- */
.cor-red,.article .cor-red{       color:var(--red);}
.cor-orange,.article .cor-orange{ color:var(--orange);}
.cor-yellow,.article .cor-yellow{ color:var(--yellow);}
.cor-green,.article .cor-green{   color:var(--green);}
.cor-mint,.article .cor-mint{     color:var(--mint);}
.cor-teal,.article .cor-teal{     color:var(--teal);}
.cor-cyan,.article .cor-cyan{     color:var(--cyan);}
.cor-blue,.article .cor-blue{     color:var(--blue);}
.cor-indigo,.article .cor-indigo{ color:var(--indigo);}
.cor-purple,.article .cor-purple{ color:var(--purple);}
.cor-pink,.article .cor-pink{     color:var(--pink);}
.cor-brown,.article .cor-brown{   color:var(--brown);}
/* aponta para a cor de destaque do site, então acompanha se ela mudar */
.cor-accent,.article .cor-accent{ color:var(--accent);}
.small{font-family:var(--f-secundaria); font-size:var(--fs-small); line-height:var(--lh-normal); color:var(--text-soft);}

/* ---- outros ---- */
.link{
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--accent-tint); transition:text-decoration-color .15s;
}
.link:hover{text-decoration-color:var(--accent);}
.mono{font-family:var(--f-mono); font-size:var(--fs-small); letter-spacing:var(--ls-label); color:var(--text-soft);}

/* ---- auxiliares ---- */
.maiusculas{text-transform:uppercase; letter-spacing:var(--ls-label);}
.truncar{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cortar-2linhas{display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

/* ---------- header ---------- */
.site-header{
  border-bottom:1px solid var(--border); position:sticky; top:0; background:rgba(0,0,0,.82);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); z-index:20;
}
.site-header .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.5rem;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0;}
/* logo: altura fixa, largura proporcional; se faltar espaço encolhe sem distorcer */
.brand-logo{height:22px; width:auto; max-width:100%; object-fit:contain; object-position:left center;}
.nav{display:flex; gap:1.6rem; font-family:var(--f-mono); font-size:var(--fs-medio); color:var(--text-soft); flex-shrink:0;}
.nav a{text-decoration:none;}
.nav a.active,.nav a:hover{color:var(--accent);}
.nav-toggle{
  display:none; background:none; border:1px solid var(--border); border-radius:8px;
  width:38px; height:38px; align-items:center; justify-content:center; color:var(--text); cursor:pointer;
  transition:background .15s, border-color .15s, color .15s, transform .1s;
}
.nav-toggle:hover{border-color:var(--border-strong);}
/* afunda no toque: retorno imediato de que o botão registrou o clique */
.nav-toggle:active{transform:scale(.93);}
/* com o menu aberto o botão fica aceso. O aria-expanded já é trocado pelo
   JavaScript, então o estado visual sai de graça, sem classe extra. */
.nav-toggle[aria-expanded="true"]{background:var(--accent-tint); border-color:var(--accent); color:var(--accent);}

@media (max-width:720px){
  .nav-toggle{display:flex;}
  .brand-logo{height:18px;}
  .nav{
    position:fixed; inset:63px 0 auto 0; background:var(--bg); border-bottom:1px solid var(--border);
    flex-direction:column; gap:0; padding:.5rem 1.5rem 1.2rem; transform:translateY(-8px);
    opacity:0; pointer-events:none; transition:opacity .15s, transform .15s;
  }
  .nav.open{opacity:1; transform:translateY(0); pointer-events:auto;}
  .nav a{padding:.7rem 0; border-bottom:1px solid var(--border);}
}
@media (max-width:400px){
  .brand-logo{height:15px;}
}

/* ---------- hero ---------- */
.hero{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:2.6rem 2.4rem; margin:2.5rem 0 1rem; position:relative; overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(var(--accent) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg, black, transparent 85%);
  mask-image:linear-gradient(180deg, black, transparent 85%);
  opacity:.12; pointer-events:none;
}
.hero-inner{position:relative;}
.hero .eyebrow{font-family:var(--f-mono); font-size:var(--fs-small); color:var(--accent); margin:0 0 .6rem;}
.hero h1{
  font-family:var(--f-primaria); font-weight:var(--fw-bold); font-size:var(--fs-h1);
  line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo); margin:0 0 .5rem;
}
.hero p{
  color:var(--text-soft); margin:0 0 1.4rem; font-size:var(--fs-texto);
  font-weight:var(--fw-leve); line-height:var(--lh-leitura); max-width:520px;
}
.search{
  display:flex; align-items:center; gap:10px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:10px; padding:.7rem 1rem; max-width:420px;
}
.search input{
  background:none; border:none; outline:none; color:var(--text-leitura); font-family:var(--f-mono);
  font-size:.85rem; width:100%;
}
.search input::placeholder{color:var(--text-mute);}
/* O Safari do iPhone dá zoom na tela sempre que o campo focado tem fonte menor
   que 16px. Precisa vir depois da regra acima: media query não aumenta a
   especificidade, então quem decide é a ordem no arquivo. */
@media (max-width:720px){
  .search input{font-size:16px;}
}

/* ---------- tabs ---------- */
.tabs{display:flex; flex-wrap:wrap; gap:8px; margin:1.8rem 0;}
.tab{
  font-family:var(--f-mono); font-size:.78rem; background:var(--surface); color:var(--text-soft);
  border:1px solid var(--border); border-radius:20px; padding:7px 14px; cursor:pointer;
}
.tab:hover{color:var(--text);}
.tab.active,.cat-chip.is-active{
  border-color:var(--accent-c, var(--accent)); color:var(--accent-c, var(--accent));
  background:var(--accent-tint-c, var(--accent-tint));
}
a.tab{text-decoration:none; display:inline-flex; align-items:center;}

/* No celular as categorias viram uma fila única que se arrasta para o lado, em
   vez de empilhar em três linhas deixando a direita vazia.

   As margens negativas fazem a fila sangrar até a borda da tela, anulando o
   padding lateral do .wrap; o padding de volta realinha a primeira pílula com o
   texto da página. Sem isso a última pílula visível seria cortada no meio do
   caminho e pareceria defeito, em vez de conteúdo que continua.

   Fica depois de todas as regras .tabs/.tab de propósito: media query não
   aumenta a especificidade, então quem decide é a ordem no arquivo. */
@media (max-width:720px){
  .tabs{
    flex-wrap:nowrap; overflow-x:auto; gap:10px;
    margin-left:-1.5rem; margin-right:-1.5rem;
    padding-left:1.5rem; padding-right:1.5rem;
    scrollbar-width:none;             /* Firefox */
    -webkit-overflow-scrolling:touch; /* inércia no iOS */
  }
  .tabs::-webkit-scrollbar{display:none;}
  /* sem isso as pílulas se espremeriam para caber, em vez de rolar */
  .tab{flex-shrink:0;}
}

/* ---------- post grid / cards ---------- */
.post-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px,1fr)); gap:1.3rem;}
.post-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:var(--text-leitura);
  transition:border-color .15s, transform .15s;
}
.post-card:hover{border-color:var(--border-strong); transform:translateY(-2px);}
.thumb{
  aspect-ratio:16/9; width:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--tone-a), var(--tone-b));
}
.thumb i{font-size:56px; opacity:.9;}
.card-body{padding:1.1rem 1.15rem 1.2rem; display:flex; flex-direction:column; gap:.6rem; flex:1;}
.cat-pill{
  align-self:flex-start; font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase;
  letter-spacing:.04em; padding:3px 10px; border-radius:20px;
}
.post-card h3{font-family:var(--f-primaria); font-weight:600; font-size:1.08rem; margin:0; line-height:1.35;}
.post-card p{margin:0; font-size:.87rem; color:var(--text-soft); line-height:1.5; flex:1;}
.card-meta{
  font-family:var(--f-mono); font-size:.72rem; color:var(--text-mute);
  display:flex; gap:8px; align-items:center; padding-top:.4rem; border-top:1px solid var(--border);
}
.card-meta span + span::before{content:"•"; margin-right:8px; color:var(--text-mute);}

/* cada categoria aponta para uma cor da paleta — a cor não sabe que é
   "de categoria", então dá pra trocar aqui sem mexer em mais nada */
.cat-dev{background:var(--mint-tint); color:var(--mint);}
.cat-games{background:var(--pink-tint); color:var(--pink);}
.cat-help{background:var(--orange-tint); color:var(--orange);}
.cat-tech{background:var(--blue-tint); color:var(--blue);}
.cat-none{background:var(--brown-tint); color:var(--brown);}

.empty-state{
  text-align:center; padding:3.5rem 1rem; color:var(--text-soft); font-family:var(--f-mono); font-size:.85rem;
  display:none;
}
.empty-state.show{display:block;}

/* ---------- pagination ---------- */
.pagination{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; margin:3rem 0 1rem;}
.page-btn{
  font-family:var(--f-mono); font-size:.82rem; background:var(--surface); border:1px solid var(--border);
  color:var(--text-soft); border-radius:8px; padding:8px 13px; cursor:pointer; text-decoration:none;
}
.page-btn.active{color:var(--bg); background:var(--accent); border-color:var(--accent); font-weight:500;}
.page-btn[disabled]{opacity:.4; cursor:not-allowed;}
/* o display:flex acima vence o [hidden] que o navegador aplica sozinho */
.pagination[hidden]{display:none;}

/* ---------- post detail ---------- */
.breadcrumb{
  font-family:var(--f-mono); font-size:.78rem; color:var(--text-mute); margin:1.8rem 0 1rem;
  display:flex; flex-wrap:wrap; row-gap:4px; gap:8px; align-items:center;
}
.breadcrumb a,.breadcrumb span{white-space:nowrap;}
.breadcrumb a{text-decoration:none; color:var(--text-mute);}
.breadcrumb a:hover{color:var(--accent);}

@media (max-width:480px){
  .breadcrumb{font-size:.72rem; flex-wrap:nowrap;}
  /* o caminho fica em uma linha só: o último item — o título da página, que é o
     que costuma ser longo — encolhe e termina em reticências em vez de empurrar
     o resto para baixo. Nada se perde: o título inteiro está no <h1> logo abaixo. */
  .breadcrumb > :last-child{min-width:0; overflow:hidden; text-overflow:ellipsis;}
  .breadcrumb > :not(:last-child){flex-shrink:0;}
}
/* nas páginas com coluna estreita (post, privacidade) o breadcrumb acompanha essa largura */
.breadcrumb.narrow{max-width:760px; margin-left:auto; margin-right:auto;}

.post-detail{max-width:760px; margin:0 auto;}
.detail-hero{
  aspect-ratio:21/9; border-radius:var(--radius-lg); margin-bottom:1.6rem; display:flex;
  align-items:center; justify-content:center; background:linear-gradient(135deg, var(--tone-a), var(--tone-b));
}
.detail-hero i{font-size:110px; opacity:.9;}
.post-detail .cat-pill{display:inline-block; margin-bottom:1.8rem;}
.post-detail h1{
  font-family:var(--f-primaria); font-weight:var(--fw-bold); font-size:var(--fs-h1);
  line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo); margin:0 0 .9rem;
}
.detail-meta{
  display:flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:.78rem;
  color:var(--text-soft); margin-bottom:2rem; flex-wrap:wrap;
}
.detail-meta .who{color:var(--accent);}
.detail-meta span + span::before{content:"•"; margin-right:10px; color:var(--text-mute);}

.article{font-size:var(--fs-texto); line-height:var(--lh-leitura);}
.article h2{
  font-family:var(--f-primaria); font-weight:var(--fw-forte); font-size:var(--fs-h3);
  line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo); margin:2rem 0 .8rem;
}
.article h3{
  font-family:var(--f-primaria); font-weight:var(--fw-forte); font-size:var(--fs-h4);
  line-height:var(--lh-titulo); margin:1.6rem 0 .6rem;
}
.article h4{
  font-family:var(--f-mono); font-weight:var(--fw-medio); font-size:var(--fs-micro);
  text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-mute); margin:1.6rem 0 .5rem;
}
.article p{margin:0 0 1.1rem; color:var(--text-leitura);}
.article p.soft{color:var(--text-soft);}
.article p.lead-in{font-size:var(--fs-h4); font-weight:var(--fw-leve); color:var(--text-soft); line-height:var(--lh-leitura);}
.article strong{font-weight:var(--fw-forte); color:var(--text);}
.article em{font-style:italic;}
/* Links de texto dentro do artigo ganham cor e sublinhado. Os componentes que
   também são <a> (botões, linhas de link, ícones sociais, cards) ficam de fora,
   senão apareceriam sublinhados no meio de um post. */
.article a:not(.btn):not(.btn-primary):not(.link-row):not(.social-circle):not(.post-card):not(.back-link):not(.tab){
  color:var(--accent); text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--accent-tint); transition:text-decoration-color .15s;
}
.article a:not(.btn):not(.btn-primary):not(.link-row):not(.social-circle):not(.post-card):not(.back-link):not(.tab):hover{text-decoration-color:var(--accent);}
.article .dropcap::first-letter{
  font-family:var(--f-primaria); font-weight:var(--fw-bold); font-size:3.2rem; line-height:.85;
  float:left; padding:.1em .12em 0 0; color:var(--accent);
}
/* 1.6rem em vez de 1.3rem: com list-style-position padrão o marcador é desenhado
   à esquerda deste recuo, e 1.3rem não davam espaço nem para o número de um item
   de dois dígitos, que escapava para fora da coluna de texto. */
.article ul,.article ol{margin:0 0 1.1rem; padding-left:1.6rem; color:var(--text-leitura);}
/* Três hifens no Markdown viram <hr>. Sem esta regra ele sai com a linha
   cinza tridimensional padrão do navegador, que destoa do tema escuro. */
.article hr{height:1px; background:var(--border); border:none; margin:2.2rem 0;}
.article li{margin-bottom:.4rem;}
/* Quando há linha em branco entre os itens, ou um bloco de código dentro de um
   item, o Markdown embrulha o texto do item em <p>. Sem estas regras esse <p>
   herda a margem de .article p, os itens se espalham e a lista passa a parecer
   um punhado de parágrafos soltos em vez de uma lista. */
.article li > p{margin:0;}
.article li > p + p{margin-top:.5rem;}
.article li .code-wrap,.article li > pre{margin:.6rem 0;}
.article figure{margin:1.6rem 0;}
.article figcaption{font-family:var(--f-mono); font-size:.78rem; color:var(--text-mute); margin-top:.5rem; text-align:center;}
.article img{border-radius:var(--radius-md); border:1px solid var(--border);}

code.inline{font-family:var(--f-mono); background:var(--surface-2); padding:1px 6px; border-radius:4px; font-size:.9em; color:var(--accent);}
.codeblock{
  background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:1rem 1.2rem;
  font-family:var(--f-mono); font-size:.85rem; color:var(--text-soft); margin:1.4rem 0; overflow-x:auto;
}
.codeblock .prompt{color:var(--accent);}
blockquote{
  border-left:3px solid var(--accent); margin:1.6rem 0; padding:.2rem 1.2rem;
  color:var(--text-soft); font-size:1rem; font-style:italic;
}

.post-end{display:flex; align-items:center; gap:12px; margin:2.6rem 0 1.6rem;}
.post-end::before,.post-end::after{content:""; flex:1; height:1px; background:var(--border);}
.post-end-mark{width:7px; height:7px; border-radius:2px; background:var(--accent); flex-shrink:0;}

.back-link{
  display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:.8rem;
  color:var(--text-soft); text-decoration:none; margin-top:1rem;
}
.back-link:hover{color:var(--accent);}
/* depois do grid de posts (categoria) precisa de mais respiro do que depois do texto do artigo */
.post-grid ~ .back-link{margin-top:2.6rem;}

/* ---------- reading progress ---------- */
.progress{position:fixed; top:0; left:0; height:2px; background:var(--accent); width:0%; z-index:30; transition:width .1s linear;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border); margin-top:4rem;}
.footer-top{
  display:flex; flex-direction:column; align-items:center; gap:1.6rem;
  padding:2.8rem 0 2.4rem; text-align:center;
}
.footer-brand .brand-logo{height:18px; opacity:.85;}
.footer-social{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.footer-links{display:flex; gap:1.4rem; flex-wrap:wrap; justify-content:center;}
.footer-links a{font-family:var(--f-mono); font-size:var(--fs-small); color:var(--text-soft); text-decoration:none;}
.footer-links a:hover{color:var(--accent);}
.footer-bottom{border-top:1px solid var(--border); padding:1.2rem 0;}
.footer-bottom p{font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--text-mute); margin:0; text-align:center;}

@media (max-width:640px){
  .hero{padding:2rem 1.4rem;}
  .form-grid{grid-template-columns:1fr;}
}

/* ---------- home / linktree ---------- */
/* A home tem respiro próprio, em qualquer tamanho de tela: 20px no topo, 15px
   nas laterais e 50px embaixo. O topo é menor que a base porque o cartão já
   sobe sozinho em tela alta, pelo justify-content:center do body.
   Sobrepõe o padding padrão do .wrap (0 1.5rem). */
body.linktree-page .wrap{padding:20px 15px 50px;}

/* ---------- fundo animado da home ---------- */
/* Quatro camadas fixas atrás do cartão, de trás para frente:

     body.linktree-page::before   o padrão, rolando devagar
     .aurora::before              halo central, que respira
     .aurora::after               halo menor, que passeia
     body.linktree-page::after    vinheta e grão, que fecham as bordas

   Só a home usa: toda regra daqui pede body.linktree-page. A <div class="aurora">
   sai do base.njk quando a página liga `fundoAnimado: true` no front matter, e
   existe porque o body tem só dois pseudo-elementos para quatro camadas.

   Nada aqui recebe clique nem chega a leitor de tela: os pseudo-elementos têm
   pointer-events:none e a div é aria-hidden.

   Para calibrar o padrão, mexa nas variáveis --fundo-* logo abaixo. */

body.linktree-page{
  --fundo-imagem:url('../images/hero-tile.png?v=44d29182');
  --fundo-opacidade:.35;
  --fundo-velocidade:120s;      /* quanto maior, mais lento */
  --fundo-desloca-x:-900px;     /* distância percorrida em um ciclo */
  --fundo-desloca-y:-1000px;
  --fundo-giro-x:10deg;
  --fundo-giro-z:-10deg;
  --fundo-inclinacao:10deg;

  /* prende as camadas de z-index negativo atrás do conteúdo desta página */
  isolation:isolate;
}

/* O inset negativo estica a camada muito além da tela: sem essa folga a rotação
   deixaria canto vazio, e o repeat cobre a sobra. */
body.linktree-page::before{
  content:""; position:fixed; inset:-100%; z-index:-3; pointer-events:none;
  background:var(--fundo-imagem) repeat;
  opacity:var(--fundo-opacidade);
  transform:rotateX(var(--fundo-giro-x)) rotateZ(var(--fundo-giro-z)) skewX(var(--fundo-inclinacao));
  animation:fundo-rolando var(--fundo-velocidade) linear infinite;
}
@keyframes fundo-rolando{
  from{background-position:0 0;}
  to  {background-position:var(--fundo-desloca-x) var(--fundo-desloca-y);}
}

/* Os dois halos ficam centrados na horizontal, um sobre o outro, e o que os
   separa é a altura e a cor.

   Os halos usam --accent e --teal da paleta, então trocar a cor do site troca o
   fundo junto. A força fica no opacity, e não dentro de um rgba(), para a
   animação variar o brilho sem ter de repetir a cor em cada quadro. */
body.linktree-page .aurora{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  filter:blur(90px);
}
body.linktree-page .aurora::before,
body.linktree-page .aurora::after{
  content:""; position:absolute; border-radius:50%; mix-blend-mode:screen;
}
body.linktree-page .aurora::before{
  width:60vmax; height:60vmax; top:50%; left:50%; translate:-50% -50%;
  background:radial-gradient(circle, var(--accent), transparent 62%);
  opacity:.28;
  animation:halo-respira 14s ease-in-out infinite;
}
body.linktree-page .aurora::after{
  width:44vmax; height:44vmax; top:26%; left:50%; translate:-50% -50%;
  background:radial-gradient(circle, var(--teal), transparent 62%);
  opacity:.22;
  animation:halo-passeia 22s ease-in-out infinite alternate;
}
@keyframes halo-respira{
  0%,100%{opacity:.21; scale:1;}
  50%    {opacity:.28; scale:1.12;}
}
/* Só a vertical muda: mexer no eixo X puxaria a luz para um dos lados e
   desfaria a simetria. */
@keyframes halo-passeia{
  from{translate:-50% -50%;}
  to  {translate:-50% -14%;}
}

/* Vinheta e grão. O grão é um SVG embutido no próprio CSS, sem arquivo nem
   requisição, e tira o aspecto chapado que a cor sólida deixa. */
body.linktree-page::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.5) 75%, rgba(0,0,0,.85) 100%);
  background-size:180px 180px, cover;
}

/* Quem pediu menos movimento no sistema fica só com as camadas paradas: as cores
   e a vinheta continuam, o que se move é que para. Precisa vir depois das regras
   acima, senão não sobrepõe nada. */
@media (prefers-reduced-motion:reduce){
  body.linktree-page::before,
  body.linktree-page .aurora::before,
  body.linktree-page .aurora::after{
    animation:none;
  }
}

.profile-card{
  max-width:550px; margin:0 auto; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.6rem 2rem 2.2rem; text-align:center; position:relative; overflow:hidden;
}
/* No celular o cartão encosta mais nas bordas, para não sobrar só uma faixa
   estreita de conteúdo no meio. Topo e base continuam iguais. Precisa vir
   depois da regra acima, senão o atalho `padding` dela zera estes dois. */
@media (max-width:640px){
  .profile-card{padding-left:15px; padding-right:15px;}
}
.profile-card::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(var(--accent) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%, black, transparent 70%);
  mask-image:radial-gradient(circle at 50% 0%, black, transparent 70%);
  opacity:.1; pointer-events:none;
}
.profile-inner{position:relative;}
.avatar-ring{
  width:190px; height:190px; border-radius:50%; margin:0 auto 1.2rem; padding:3px;
}
.avatar-ring img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:var(--surface-2);}
.profile-name{margin:0 0 .8rem; display:flex; justify-content:center;}
.wordmark{
  font-family:'Designer', var(--f-primaria); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.45rem, 1.2rem + 1.1vw, 1.9rem); letter-spacing:.03em; color:var(--text); line-height:1;
}
.profile-tag{
  color:var(--text-soft); font-size:var(--fs-texto); font-weight:var(--fw-leve);
  line-height:var(--lh-leitura); margin:0 0 1.5rem;
}
.social-row{display:flex; justify-content:center; gap:10px; margin-bottom:1.7rem; flex-wrap:wrap;}
.social-circle{
  width:38px; height:38px; border-radius:50%; border:1px solid var(--border); display:flex;
  align-items:center; justify-content:center; color:var(--text-soft); text-decoration:none;
  transition:border-color .15s, color .15s;
}
.social-circle:hover{border-color:var(--accent); color:var(--accent);}
/* botão de destaque da home e das caixas de CTA — mais largo que o .btn comum */
.btn-primary{
  display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#04241E;
  font-family:var(--f-mono); font-weight:var(--fw-medio); font-size:var(--fs-small);
  text-transform:uppercase; letter-spacing:.04em; padding:11px 24px; /* mesmo tracking do .btn */
  border-radius:var(--radius-sm); text-decoration:none; border:none; cursor:pointer;
  transition:transform .1s, opacity .15s;
}
.btn-primary:hover{opacity:.9;}
.btn-primary:active{transform:translateY(1px);}
/* o respiro antes da lista de links é do contexto da home, não do botão */
.profile-inner .btn-primary{margin-bottom:2rem;}
.link-list{display:flex; flex-direction:column; gap:10px; text-align:left;}
.link-row{
  display:flex; align-items:center; justify-content:space-between; background:var(--surface-2);
  border:1px solid var(--border); border-left:3px solid var(--row-color); border-radius:var(--radius-sm);
  padding:13px 16px; text-decoration:none; color:var(--text);
  transition:transform .15s, color .15s, border-color .15s, background .15s;
}
/* Mesmo hover do .social-tile da página sobre: a linha inteira assume a cor do
   link. O --row-tint é rgba com alfa .12, então o quadradinho do ícone, que usa
   o mesmo tint, continua aparecendo por cima do fundo tingido em vez de sumir. */
.link-row:hover{
  transform:translateX(3px); color:var(--row-color);
  border-color:var(--row-color); background:var(--row-tint);
}
.link-row .label{font-family:var(--f-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.03em;}
.link-row .icon{
  width:28px; height:28px; border-radius:8px; background:var(--row-tint); color:var(--row-color);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ---------- sobre ---------- */
.about-hero{display:flex; gap:2.4rem; align-items:center; margin:3rem 0 2.6rem; flex-wrap:wrap;}
.about-hero .avatar-ring{width:190px; height:190px; margin:0; flex-shrink:0;}
.about-hero h1{
  font-family:var(--f-primaria); font-weight:var(--fw-bold); font-size:var(--fs-h1);
  line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo); margin:0 0 .7rem;
}
.about-hero p{
  color:var(--text-soft); max-width:480px; margin:0; font-size:var(--fs-texto);
  font-weight:var(--fw-leve); line-height:var(--lh-leitura);
}

.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1rem; margin:0 0 3rem;}
.stat-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.2rem; text-align:center;}
.stat-card .num{font-family:var(--f-primaria); font-weight:700; font-size:1.7rem; color:var(--accent);}
.stat-card .label{font-family:var(--f-mono); font-size:.7rem; color:var(--text-soft); text-transform:uppercase; margin-top:.3rem;}

.section-heading{
  font-family:var(--f-primaria); font-weight:var(--fw-forte); font-size:var(--fs-h3);
  line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo); margin:0 0 1.2rem;
}

.focus-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-bottom:3rem;}
.focus-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.4rem;}
.focus-card .icon-box{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  margin-bottom:.9rem; background:var(--box-tint); color:var(--box-color);
}
.focus-card h3{font-family:var(--f-primaria); font-size:1rem; margin:0 0 .4rem;}
.focus-card p{font-size:.85rem; color:var(--text-soft); margin:0; line-height:1.5;}

@media (max-width:640px){
  .about-hero{flex-direction:column; text-align:center;}
  .about-hero p{max-width:none;}
}

/* ================= GUIA DE ESTILO ================= */

/* layout do guia */
.guide-hero{padding:3rem 0 2rem;}
.guide-hero .eyebrow{font-family:var(--f-mono); font-size:var(--fs-small); color:var(--accent); margin:0 0 .6rem;}
.guide-hero h1{
  font-family:var(--f-primaria); font-weight:var(--fw-bold); font-size:var(--fs-h1);
  line-height:var(--lh-titulo); letter-spacing:var(--ls-titulo); margin:0 0 .7rem;
}
.guide-hero p{color:var(--text-soft); max-width:560px; margin:0; font-weight:var(--fw-leve); line-height:var(--lh-leitura);}
.guide-layout{display:flex; gap:2.5rem; align-items:flex-start; padding-bottom:6rem;}
.guide-nav{width:200px; flex-shrink:0; position:sticky; top:90px;}
.guide-nav a{
  display:block; padding:.4rem 0 .4rem .8rem; font-family:var(--f-mono); font-size:var(--fs-micro);
  color:var(--text-mute); text-decoration:none; border-left:2px solid transparent;
}
.guide-nav a:hover{color:var(--text-soft);}
.guide-nav a.active{color:var(--accent); border-left-color:var(--accent);}
.guide-content{flex:1; min-width:0;}
.guide-section{padding-top:1rem; margin-bottom:3.5rem; scroll-margin-top:90px;}
.guide-section h2{font-family:var(--f-primaria); font-weight:600; font-size:1.5rem; margin:0 0 .4rem;}
.guide-section .sub{color:var(--text-soft); font-size:.9rem; margin:0 0 1.6rem;}
.demo-block{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:1.6rem; margin-bottom:1.2rem;
}
.demo-block .demo-label{font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase; color:var(--text-mute); letter-spacing:.05em; margin:0 0 1rem;}
.demo-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center;}
@media (max-width:900px){
  .guide-layout{flex-direction:column;}
  .guide-nav{position:static; width:100%; display:flex; flex-wrap:wrap; gap:4px 16px;}
}

/* paleta de cores */
.swatch-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem;}
.swatch{border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--surface);}
.swatch-color{height:64px;}
.swatch-info{padding:.6rem .8rem;}
.swatch-info strong{display:block; font-family:var(--f-primaria); font-size:.82rem; margin-bottom:.15rem;}
.swatch-info span{display:block; font-family:var(--f-mono); font-size:.68rem; color:var(--text-mute);}

/* tipografia */
.type-row{display:flex; align-items:baseline; gap:1.2rem; padding:1rem 0; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.type-row:last-child{border-bottom:none;}
.type-row .meta{font-family:var(--f-mono); font-size:.72rem; color:var(--text-mute); white-space:nowrap; min-width:150px;}
.type-mono-sample{font-family:var(--f-mono); font-size:.85rem; color:var(--text-soft); background:var(--surface-2); padding:.9rem 1rem; border-radius:8px; display:block;}

/* botões */
.btn{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-weight:500;
  font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; padding:11px 22px;
  border-radius:var(--radius-sm); text-decoration:none; border:1px solid transparent;
  cursor:pointer; transition:transform .1s, border-color .15s, background .15s, opacity .15s;
}
.btn:active{transform:translateY(1px);}
.btn-accent{background:var(--accent); color:#04241E;}
.btn-secondary{background:var(--surface-2); color:var(--text); border-color:var(--border-strong);}
.btn-outline{background:transparent; color:var(--accent); border-color:var(--accent);}
.btn-ghost{background:transparent; color:var(--text-soft); border-color:transparent;}
.btn-ghost:hover{color:var(--text);}
.btn-danger{background:var(--red); color:#2E0A0A;}
.btn-sm{padding:7px 14px; font-size:.7rem;}
.btn-lg{padding:14px 28px; font-size:.88rem;}
.btn[disabled]{opacity:.35; cursor:not-allowed;}
.btn-icon{width:38px; height:38px; padding:0; justify-content:center;}

/* badges */
.badge{
  font-family:var(--f-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
  padding:4px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:6px;
}
.badge .dot{width:6px; height:6px; border-radius:50%; background:currentColor;}
.badge-success{background:var(--green-tint); color:var(--green);}
.badge-warning{background:var(--yellow-tint); color:var(--yellow);}
.badge-error{background:var(--red-tint); color:var(--red);}
.badge-info{background:var(--cyan-tint); color:var(--cyan);}
/* neutro não gasta cor da paleta: usa a superfície + o cinza de texto */
.badge-neutral{background:var(--surface-2); color:var(--text-soft);}

/* alertas */
.alert{display:flex; gap:12px; align-items:flex-start; padding:1rem 1.2rem; border-radius:var(--radius-md); border:1px solid; font-size:.88rem; margin-bottom:1rem;}
.alert i{flex-shrink:0; margin-top:2px;}
.alert-info{background:var(--cyan-tint); border-color:var(--cyan); color:var(--cyan);}
.alert-success{background:var(--green-tint); border-color:var(--green); color:var(--green);}
.alert-warning{background:var(--yellow-tint); border-color:var(--yellow); color:var(--yellow);}
.alert-error{background:var(--red-tint); border-color:var(--red); color:var(--red);}
.alert strong{display:block; margin-bottom:.2rem; font-family:var(--f-primaria); color:var(--text);}
.alert p{margin:0; color:var(--text-soft);}

/* tabela */
.data-table{width:100%; border-collapse:collapse; font-size:.87rem; border:1px solid var(--border);}
.data-table th{
  text-align:left; font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-mute); padding:.85rem 1rem;
  border-bottom:1px solid var(--border-strong); border-right:1px solid var(--border);
}
.data-table td{padding:.85rem 1rem; border-bottom:1px solid var(--border); border-right:1px solid var(--border); color:var(--text-soft);}
/* a última coluna não leva divisória: a borda externa da tabela já fecha ali */
.data-table th:last-child,.data-table td:last-child{border-right:none;}
.data-table tbody tr:last-child td{border-bottom:none;}
.data-table tr:hover td{background:var(--surface-2);}

/* accordion */
.accordion-item{border:1px solid var(--border); border-radius:var(--radius-md); margin-bottom:10px; overflow:hidden;}
.accordion-header{
  display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; cursor:pointer;
  font-family:var(--f-primaria); font-size:.92rem; background:var(--surface); user-select:none;
}
.accordion-header i{transition:transform .2s; flex-shrink:0; color:var(--text-soft);}
.accordion-item.open .accordion-header i{transform:rotate(180deg);}
.accordion-body{max-height:0; overflow:hidden; transition:max-height .25s ease; background:var(--surface);}
.accordion-body-inner{padding:0 1.2rem 1.1rem;}
.accordion-item.open .accordion-body{max-height:220px;}
.accordion-body p{color:var(--text-soft); font-size:.86rem; margin:0; line-height:1.6;}

/* tooltip */
.tooltip-demo{position:relative; display:inline-flex;}
.tooltip-demo .tip{
  position:absolute; bottom:130%; left:50%; transform:translateX(-50%); background:var(--surface-2);
  border:1px solid var(--border-strong); color:var(--text); font-family:var(--f-mono); font-size:.7rem;
  padding:6px 10px; border-radius:6px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s;
}
.tooltip-demo:hover .tip{opacity:1;}

/* divisores */
.divider{height:1px; background:var(--border); border:none; margin:0;}
.divider-dashed{border:none; border-top:1px dashed var(--border-strong); margin:0;}

/* avatares */
.avatar-set{display:flex; align-items:center; gap:14px;}
.avatar-plain{border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--blue)); display:flex; align-items:center; justify-content:center; font-family:var(--f-primaria); font-weight:700; color:#04241E; flex-shrink:0;}

/* icon grid */
.icon-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:10px;}
.icon-swatch{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:1rem .6rem;
  display:flex; flex-direction:column; align-items:center; gap:.6rem; color:var(--text-soft);
}
.icon-swatch span{font-family:var(--f-mono); font-size:.64rem; text-align:center;}

/* ---------- imagem ---------- */
.img-frame{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border);
  aspect-ratio:16/9;
}
.img-frame img{width:100%; height:100%; object-fit:cover; display:block;}
.img-frame .ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--tone-a), var(--tone-b));
}
.img-frame .ph i{font-size:64px; opacity:.85;}
.img-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.2rem .9rem;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.85));
  font-family:var(--f-mono); font-size:.76rem; color:var(--text);
}

/* ---------- mini galeria ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px;}
.gallery-item{
  aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border);
  cursor:pointer; position:relative;
}
.gallery-item img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .25s;}
.gallery-item .ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--tone-a), var(--tone-b)); transition:transform .25s;
}
.gallery-item .ph i{font-size:44px; opacity:.85;}
.gallery-item:hover img,.gallery-item:hover .ph{transform:scale(1.08);}
.gallery-item .gallery-tag{
  position:absolute; top:8px; left:8px; font-family:var(--f-mono); font-size:.62rem; text-transform:uppercase;
  background:rgba(0,0,0,.55); color:var(--text); padding:2px 7px; border-radius:20px; z-index:1;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}

/* ---------- slider / carrossel ---------- */
.slider{position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border);}
.slider-track{display:flex; transition:transform .35s ease;}
.slider-slide{min-width:100%; aspect-ratio:16/9; position:relative;}
.slider-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.slider-slide .ph{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--tone-a), var(--tone-b));
}
.slider-slide .ph i{font-size:64px; opacity:.85;}
.slider-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6rem 1.2rem 1rem;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.8));
  font-family:var(--f-primaria); font-weight:600; font-size:1rem; color:var(--text);
}
.slider-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.2); color:#fff; display:flex;
  align-items:center; justify-content:center; cursor:pointer; z-index:2;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.slider-prev{left:12px;}
.slider-next{right:12px;}
.slider-dots{position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:2;}
.slider-dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.4); cursor:pointer; transition:.2s; border:none; padding:0;}
.slider-dot.active{background:var(--accent); width:18px; border-radius:4px;}

/* ---------- ofertas ---------- */
/* auto-fill, e não auto-fit: o auto-fit colapsa as colunas que sobram, então uma
   oferta sozinha esticava para a largura inteira da página. Com auto-fill as
   colunas continuam existindo mesmo vazias, e o card mantém o tamanho normal.
   É o mesmo que o .post-grid já fazia. */
.offer-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1.3rem; margin-bottom:1rem;}
.offer-card{
  background:var(--surface); border:1px solid var(--border); border-top:3px solid var(--offer-color, var(--accent));
  border-radius:var(--radius-md); padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:.7rem;
  transition:border-color .15s, transform .15s;
}
.offer-card:hover{transform:translateY(-2px); border-color:var(--border-strong); border-top-color:var(--offer-color, var(--accent));}
.offer-head{display:flex; align-items:center; justify-content:space-between; gap:1rem;}
.offer-card .icon-box{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:var(--offer-tint, var(--accent-tint)); color:var(--offer-color, var(--accent)); flex-shrink:0;
}
.offer-off{
  font-family:var(--f-mono); font-size:var(--fs-mini); font-weight:var(--fw-bold); text-transform:uppercase;
  letter-spacing:var(--ls-label); padding:4px 10px; border-radius:20px;
  background:var(--offer-tint, var(--accent-tint)); color:var(--offer-color, var(--accent));
}
.offer-card h3{
  font-family:var(--f-primaria); font-weight:var(--fw-forte); font-size:var(--fs-h4);
  line-height:var(--lh-titulo); margin:0;
}
.offer-card p{font-size:var(--fs-medio); color:var(--text-soft); line-height:var(--lh-normal); margin:0; flex:1;}
.offer-price{display:flex; align-items:baseline; gap:.6rem; margin-top:.2rem;}
.offer-price .now{font-family:var(--f-primaria); font-weight:var(--fw-bold); font-size:var(--fs-h3); color:var(--text);}
.offer-price .was{font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--text-mute); text-decoration:line-through;}
.offer-coupon{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px dashed var(--border-strong); border-radius:var(--radius-sm); padding:.6rem .8rem;
  font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--text-soft);
}
.offer-coupon strong{color:var(--offer-color, var(--accent)); letter-spacing:var(--ls-label);}
.offer-note{
  font-family:var(--f-mono); font-size:var(--fs-micro); color:var(--text-mute);
  line-height:var(--lh-leitura); margin:2rem 0 0;
}

/* ---------- markdown do blog ----------
   Os posts são escritos em Markdown, que gera <code>, <pre><code>, <blockquote>
   e <table> sem classe nenhuma. Estas regras dão a eles o visual do site, para
   que quem escreve um post use só Markdown — nunca HTML com classe no texto. */
.article :not(pre) > code{
  font-family:var(--f-mono); background:var(--surface-2); padding:1px 6px; border-radius:4px;
  font-size:.9em; color:var(--accent);
}

/* Bloco de código. A barra da esquerda em cor de destaque identifica o bloco de
   longe — é o mesmo recurso que a citação usa, com a espessura da borda do site. */
.article pre{
  background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:10px; padding:1rem 1.2rem;
  font-family:var(--f-mono); font-size:.85rem; color:var(--text-soft); margin:1.4rem 0; overflow-x:auto;
}
.article pre code{background:none; padding:0; font:inherit; color:inherit;}

/* ---- realce de sintaxe ----------------------------------------------------
   As cores são aplicadas no build pelo plugin registrado em eleventy.config.js;
   nada aqui depende de JavaScript no navegador.

   O plugin envolve cada pedaço do código em <span class="token ...">, e é só
   isso que as regras abaixo pintam. Um bloco escrito sem a linguagem (só três
   crases) não ganha span nenhum e continua exatamente com a aparência de antes.

   Nenhuma cor nova foi inventada: as seis usadas aqui são da paleta de 12 do
   topo deste arquivo. Trocar qualquer uma delas é trocar o nome da variável.

     rosa    palavras-chave, tags        (if, function, <div>)
     ciano   nomes de atributo e classe  (href=, .minha-classe)
     verde   texto entre aspas           ("olá", 'bash')
     laranja números e booleanos         (42, true)
     azul    nomes de função             (console.log)
     mint    operadores e variáveis      (=, +, $VAR)

   Duas linguagens nomeiam a mesma coisa de outro jeito, e por isso .directive
   anda junto de .keyword e .command junto de .function: o Prism marca assim o
   #Requires e o SetTimer do AutoHotkey, o #include do C, o #region do C#. Sem
   essas duas, um script inteiro sai com string e número coloridos e todas as
   chamadas apagadas.
---------------------------------------------------------------------------- */

/* O texto sem cor própria fica mais claro que o de um bloco comum: num bloco
   colorido ele é a base sobre a qual as outras cores contrastam. */
.article pre code[class*="language-"]{color:var(--text-leitura);}

.article pre .token.comment,
.article pre .token.prolog,
.article pre .token.doctype,
.article pre .token.cdata{color:var(--text-mute); font-style:italic;}

.article pre .token.punctuation{color:var(--text-soft);}

.article pre .token.tag,
.article pre .token.selector,
.article pre .token.keyword,
.article pre .token.atrule,
.article pre .token.directive,
.article pre .token.deleted{color:var(--pink);}

.article pre .token.attr-name,
.article pre .token.property,
.article pre .token.class-name{color:var(--cyan);}

.article pre .token.string,
.article pre .token.attr-value,
.article pre .token.char,
.article pre .token.regex,
.article pre .token.inserted{color:var(--green);}

.article pre .token.number,
.article pre .token.boolean,
.article pre .token.constant,
.article pre .token.symbol{color:var(--orange);}

.article pre .token.function,
.article pre .token.builtin,
.article pre .token.command{color:var(--blue);}

.article pre .token.operator,
.article pre .token.entity,
.article pre .token.url,
.article pre .token.variable{color:var(--accent);}

/* O Prism marca com estes dois o que a própria linguagem já destaca — negrito
   de Markdown, !important de CSS. Aqui só o peso muda, a cor vem da regra acima. */
.article pre .token.important,
.article pre .token.bold{font-weight:700;}
.article pre .token.italic{font-style:italic;}

/* Prefixo de namespace (o "svg:" de svg:rect) fica de propósito mais apagado
   que o nome que vem depois dele. */
.article pre .token.namespace{opacity:.7;}

/* Botão de copiar. O JavaScript envolve cada <pre> em .code-wrap e injeta o
   botão; sem JavaScript o bloco continua igual, só sem o botão. O wrapper existe
   porque o <pre> rola na horizontal, e um botão dentro dele rolaria junto. */
.code-wrap{position:relative; margin:1.4rem 0;}
.code-wrap pre{margin:0;}
.code-copy{
  position:absolute; top:.5rem; right:.5rem; display:inline-flex; align-items:center; gap:6px;
  background:var(--surface-2); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  color:var(--text-soft); font-family:var(--f-mono); font-size:.68rem; letter-spacing:.04em;
  padding:5px 9px; cursor:pointer; opacity:.55;
  transition:opacity .15s, color .15s, border-color .15s;
}
/* fica discreto até o leitor se aproximar; no toque e no teclado aparece inteiro */
.code-wrap:hover .code-copy,.code-copy:focus-visible{opacity:1;}
.code-copy:hover{color:var(--accent); border-color:var(--accent);}
.code-copy.copiado{opacity:1; color:var(--accent); border-color:var(--accent);}

/* Citação. O Markdown gera <blockquote><p>…</p></blockquote>, e sem esta regra o
   <p> herda a margem inferior de .article p — o que abre um vão extra dentro da
   citação — e a cor de .article p sobrepõe a da própria citação, junto com o itálico. */
.article blockquote p{margin:0; color:var(--text-soft); font-style:italic;}
.article blockquote p + p{margin-top:.7rem;}

/* Tabela escrita em Markdown. Sem classe, então precisa das próprias regras.

   Quem rola no celular é o container, não a tabela: o eleventy.config.js
   envolve toda tabela do Markdown em <div class="table-scroll">, o mesmo
   container que a .data-table usa quando a tabela é escrita em HTML.

   Isso é o que mantém a tabela como tabela de verdade. Antes a rolagem vinha de
   um display:block aplicado no próprio <table>, e ali ele deixava de ser tabela:
   a borda externa esticava até o fim do texto enquanto as linhas de dentro
   paravam no fim do conteúdo, deixando uma sobra visível nas tabelas curtas. */
.article .table-scroll{overflow-x:auto; max-width:100%; margin:1.4rem 0;}
.article table{
  min-width:100%;
  border-collapse:collapse; font-size:.87rem; border:1px solid var(--border);
}
.article th{
  text-align:left; font-family:var(--f-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.04em; color:var(--text-mute); padding:.85rem 1rem; white-space:nowrap;
  border-bottom:1px solid var(--border-strong); border-right:1px solid var(--border);
}
.article td{
  padding:.85rem 1rem; color:var(--text-soft);
  border-bottom:1px solid var(--border); border-right:1px solid var(--border);
}
/* a última coluna e a última linha não levam divisória: a borda externa fecha ali */
.article th:last-child,.article td:last-child{border-right:none;}
.article tbody tr:last-child td{border-bottom:none;}
.article tbody tr:hover td{background:var(--surface-2);}

/* ---------- barra de rolagem do conteúdo largo ----------
   Bloco de código com linha comprida e tabela larga rolam na horizontal, e a
   barra que o navegador desenha vem com a cara do sistema operacional — clara
   e destoando do tema escuro.

   São duas sintaxes para o mesmo efeito, e as duas são necessárias: as
   propriedades `scrollbar-*` valem no Firefox e no Chrome recente, e os
   pseudo-elementos `::-webkit-scrollbar` cobrem o Safari e o Chrome antigo.

   O trilho fica transparente para o fundo do próprio bloco aparecer, e o polegar
   acende na cor de destaque quando o mouse encosta nele. */
.article pre,.codeblock,.article .table-scroll{
  scrollbar-width:thin;
  scrollbar-color:var(--border-strong) transparent;
}
/* o hover pelos pseudo-elementos não vale no Firefox; aqui ele vem pela
   propriedade padrão, aplicada no próprio bloco */
.article pre:hover,.codeblock:hover,.article .table-scroll:hover{
  scrollbar-color:var(--accent) transparent;
}
.article pre::-webkit-scrollbar,
.codeblock::-webkit-scrollbar,
.article .table-scroll::-webkit-scrollbar{height:9px;}
.article pre::-webkit-scrollbar-track,
.codeblock::-webkit-scrollbar-track,
.article .table-scroll::-webkit-scrollbar-track{background:transparent;}
.article pre::-webkit-scrollbar-thumb,
.codeblock::-webkit-scrollbar-thumb,
.article .table-scroll::-webkit-scrollbar-thumb{
  background:var(--border-strong); border-radius:20px;
}
.article pre:hover::-webkit-scrollbar-thumb,
.codeblock:hover::-webkit-scrollbar-thumb,
.article .table-scroll:hover::-webkit-scrollbar-thumb{background:var(--accent);}

/* ---------- redes sociais (página sobre) ----------
   Mesmo conceito do .icon-swatch do guia de estilo: quadrado, ícone e nome.
   A cor de hover de cada rede vem de --tile-color, definido no próprio elemento
   a partir de src/_data/site.json. */
.social-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:10px; margin-bottom:3rem;}
.social-tile{
  aspect-ratio:1; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.7rem;
  color:var(--text-soft); text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.social-tile span{font-family:var(--f-mono); font-size:.68rem; text-align:center;}
.social-tile:hover{color:var(--tile-color); border-color:var(--tile-color); background:var(--tile-tint);}

/* ---------- 404 ----------
   Vinha de um <style> dentro do próprio 404.html no site original. Agora mora
   aqui, junto com o resto do CSS, escopado em body.pagina-404 para não vazar
   para nenhuma outra página. */
body.pagina-404{display:flex; flex-direction:column; min-height:100vh;}
body.pagina-404 main.wrap{flex:1; display:flex; align-items:center; justify-content:center;}
.error-hero{max-width:640px; text-align:center; padding:3rem 2rem;}
.error-code{
  font-family:var(--f-primaria); font-weight:700; font-size:6.5rem; line-height:1;
  color:var(--accent); margin:0 0 .6rem; letter-spacing:-.02em;
}
.error-hero h1{font-family:var(--f-primaria); font-weight:600; font-size:1.5rem; margin:0 0 .8rem;}
.error-hero p{color:var(--text-soft); margin:0 0 2rem; font-size:.95rem;}
.error-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}