/* ============================================================
   TIBATRON — TEMA ESCURO DO SITE
   ------------------------------------------------------------
   A home (_templates/pages/home.php) foi redesenhada em 2026 como página
   AUTOCONTIDA: traz o próprio cabeçalho, rodapé e estilo, e termina com exit,
   então o layout global nunca roda para ela. Todo o resto do site — blog,
   sobre, contato, máquinas, central técnica e as páginas de erro — continuou
   no style.css antigo, claro e azul.

   Resultado: quem clicava em "Blog" saía de um site escuro e caía num site
   branco, com outro menu e outra cara.

   Este arquivo alinha o resto ao tema da home. Ele entra DEPOIS do style.css e
   trabalha em duas camadas:

     1. REMAPEIA AS VARIÁVEIS. O style.css é dirigido por variáveis — 494
        regras apoiadas num :root. Trocar a paleta aqui vira o site quase
        inteiro sem tocar naquele arquivo, que continua servindo de base.

     2. CORRIGE OS BRANCOS ESCRITOS NA MÃO. Umas vinte regras têm #fff direto
        no lugar da variável; essas precisam de override nominal.

   A LOJA NÃO É AFETADA: ela tem folha própria e fica branca de propósito,
   porque catálogo se navega melhor em fundo claro.

   Paleta copiada da home, para as duas nunca divergirem.
   ============================================================ */

:root {
  /* ---- a paleta nova, com os nomes que a home usa ---- */
  --void:     #0A0611;   /* fundo da página            */
  --steel:    #140C20;   /* cartão, superfície elevada */
  --plate:    #1B0F2C;   /* segundo nível              */
  --edge:     #2C1B42;   /* borda                      */
  --arc:      #8B2FC9;   /* roxo da marca              */
  --arc-soft: rgba(139,47,201,.16);
  --arc-lig:  #B45FE0;
  --arc-deep: #4A0878;
  --spark:    #FFD100;   /* amarelo — o botão Loja     */
  --ink:      #F1EAF8;   /* texto                      */
  --ink-2:    #B199C7;
  --ink-3:    #7A6491;

  /* Largura do miolo. Estava definida SÓ dentro do home.php, e o cabeçalho
     compartilhado usa .wrap{max-width:var(--wrap)}. Fora da home a variável
     não existia, a declaração inteira era descartada e o cabeçalho esticava
     até a borda da tela — por isso o logo e o botão Loja ficavam nos extremos
     no /sobre, /blog e /contato, e alinhados só na home.
     Mesmo valor da home e do .container do style.css. */
  --wrap:     1200px;

  /* ---- os nomes ANTIGOS apontando para a paleta nova ----
     É isto que faz as 494 regras do style.css virarem escuras de uma vez.
     Cada linha é uma tradução: o que era claro vira a superfície escura
     equivalente, o que era azul vira o roxo da marca. */
  --white:        #0A0611;              /* era o fundo branco do body   */
  --text:         #F1EAF8;
  --text2:        #B199C7;
  --gray:         #7A6491;
  --gray-light:   #7A6491;
  --gray-border:  #2C1B42;
  --gray-pale:    #140C20;              /* fundo "cinza claro" de seção */

  --dark:         #140C20;              /* topo e rodapé continuam escuros */
  --dark2:        #1B0F2C;
  --dark3:        #2C1B42;

  --blue:         #8B2FC9;
  --blue-dark:    #4A0878;
  --blue-light:   #B45FE0;
  --blue-pale:    rgba(139,47,201,.16);
  --accent:       #B45FE0;

  --gold:         #FFD100;
  --gold-pale:    rgba(255,209,0,.14);
  --gold-light:   #FFE04D;

  /* sombra no escuro precisa ser mais funda para aparecer */
  --sh:    0 1px 3px rgba(0,0,0,.5);
  --sh-md: 0 6px 18px rgba(0,0,0,.55);
  --sh-lg: 0 18px 44px rgba(0,0,0,.6);
}

html { background: var(--void); }
body { background: var(--void); color: var(--ink); }


/* ---- CABEÇALHO ----
   ANULA O .nav DO style.css ANTIGO. Lá ele é a própria barra: sticky, branca e
   com borda. Aqui ele é só o miolo do <header>, que é quem pinta — igual à
   home. Sem zerar, sobrava uma faixa de tom diferente do fundo. */
.nav {
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
  position: static;
  backdrop-filter: none;
  padding: 0;
}

/* (regras copiadas da home abaixo)
   Copiado do home.php pelo mesmo motivo do resto deste arquivo: o site
   tinha dois menus diferentes. Estas regras servem o parcial
   partials/cabecalho.php, que agora vale para todas as páginas. */
.wrap { width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-body);font-weight:600;font-size:15px;padding:15px 26px;border-radius:10px;border:1px solid transparent;transition:transform .18s,background .18s,border-color .18s;cursor:pointer;white-space:nowrap }
.btn:hover { transform:translateY(-2px) }
header { position:sticky;top:0;z-index:60;background:rgba(10,6,17,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--edge) }

/* ── FILETE ANIMADO SOB O CABEÇALHO ──
   O mesmo efeito da .beam da home: um trecho roxo→amarelo que atravessa
   a cada 7s. Aqui o que anda é o background-position, e não `left`: a
   barra ocupa a largura da tela, e um elemento indo até left:103% jogaria
   conteúdo para fora e criaria rolagem lateral. Assim nada sai da caixa. */
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;
  pointer-events:none;border-radius:3px;
  background:linear-gradient(90deg,transparent,var(--arc),var(--spark),transparent) no-repeat;
  background-size:22% 100%;
  animation:tbSweep 7s cubic-bezier(.6,0,.4,1) infinite}
@keyframes tbSweep{0%{background-position:-25% 0}55%{background-position:125% 0}100%{background-position:125% 0}}
@media(prefers-reduced-motion:reduce){header::after{animation:none;background-position:-25% 0}}
.nav { display:flex;align-items:center;justify-content:space-between;height:66px }
.brand { display:flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:800;letter-spacing:.18em;font-size:15px }
.brand i { width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--arc),var(--arc-deep));display:grid;place-items:center;font-style:normal;padding:5px }
.brand i svg { width:100%;height:100%;display:block }
.brand .wm{height:22px;width:auto;display:block;flex:0 0 auto}
.nav-links { display:flex;gap:28px }
.nav-links a { font-size:14.5px;color:var(--ink-2);transition:color .15s }
.nav-links a:hover { color:var(--ink) }
/* item da página atual — roxo aceso. #B45FE0 sobre o fundo do
   cabeçalho dá 5,4:1, passa no AA. */
.nav-links a[aria-current="page"] { color:var(--arc-lig);font-weight:600 }
.nav-cta { display:flex;gap:10px }
.burger { display:none;background:none;border:1px solid var(--edge);border-radius:8px;color:var(--ink);padding:8px 12px;font-size:15px;cursor:pointer;line-height:1 }
.menu-mob { display:none;border-top:1px solid var(--edge);background:rgba(10,6,17,.97);backdrop-filter:blur(14px) }
.menu-mob .wrap { display:flex;flex-direction:column;padding-top:6px;padding-bottom:16px }
.menu-mob a { padding:14px 2px;font-size:15.5px;color:var(--ink-2);border-bottom:1px solid var(--edge) }
.menu-mob a:hover { color:var(--ink) }
.menu-mob .mm-wa { margin-top:14px;background:var(--wa);color:#04210F;font-weight:700;text-align:center;border-radius:10px;padding:14px;border-bottom:0 }

/* ── CABEÇALHO NO CELULAR ─────────────────────────────────────────────
   Esta media query tinha se perdido: as regras abaixo estavam SOLTAS no
   arquivo, valendo em qualquer largura. Sem ela o cabeçalho nunca se
   adaptava — logo + 4 links + botão Loja somam ~572px numa tela de 390px, e
   o overflow-x:hidden do body escondia o estouro em vez de rolar. Resultado:
   o botão Loja saía da tela.

   Os 4 links descem para uma segunda linha em vez de virar hambúrguer: o
   hambúrguer foi removido em 11/08/2026 porque nunca funcionou (não havia
   JavaScript escutando o clique). Segunda linha não depende de script. */
@media (max-width: 900px){
  .nav{height:auto;flex-wrap:wrap;padding:10px 0;row-gap:2px}
  .nav-cta{gap:8px}
  .brand i{width:30px;height:30px}
  .brand .wm{height:19px}
  .nav-links{order:3;width:100%;justify-content:space-between;gap:12px;
    padding-top:9px;margin-top:2px;border-top:1px solid var(--edge)}
  .nav-links a{font-size:13.5px}
}
@media (max-width: 520px){
  .wrap{padding:0 18px}
  .nav-links a{font-size:12.5px}
  .brand .wm{height:17px}
  .brand i{width:28px;height:28px}
}

/* ---- SUPERFÍCIES QUE ESTAVAM COM #fff NA MÃO ----
   Cartão claro sobre página escura é o erro mais visível de um tema
   convertido pela metade, então vão todas juntas. */
.cat-card, .m-card, .p-card, .calc-card, .blog-card, .ct-item, .ct-form,
.tech-card, .sidebar-card, .stat-card, .contact-card, .calculator-card,
.guia-card, .mob-menu, .frete-opt, .post-card, .card {
  background: var(--steel);
  border-color: var(--edge);
  color: var(--ink);
}
.specs-grid, .faq-q, .capacity-table tr:hover td { background: var(--plate); }

/* campo de formulário: fundo escuro e texto claro, senão fica texto branco
   em caixa branca — invisível */
.f-group input, .f-group select, .f-group textarea,
.frete-row input, input[type=text], input[type=email], input[type=tel],
input[type=search], select, textarea {
  background: var(--steel);
  border-color: var(--edge);
  color: var(--ink);
}
::placeholder { color: var(--ink-3); }

/* ---- TIPOGRAFIA ---- */
h1, h2, h3, h4, h5, h6 { color: var(--ink); }
p, li, td, dd, figcaption { color: var(--ink-2); }
a { color: var(--arc-lig); }
a:hover { color: var(--spark); }
hr, .divider { border-color: var(--edge); }

/* ---- BOTÕES ----
   Mesmos pesos da home: roxo para ação, amarelo para a Loja, verde no
   WhatsApp, e o fantasma virando contorno claro. */
.btn-primary, .btn-blue { background: var(--arc); color: #fff; border-color: var(--arc); }
.btn-primary:hover, .btn-blue:hover { background: var(--arc-lig); }

.btn-shop {
  background: var(--spark);
  color: #221904;
  border-color: var(--spark);
  font-weight: 700;
}
.btn-shop:hover { background: #FFDD3C; }

.btn-wa { background: var(--wa); color: #05261A; }
.btn-wa:hover { background: #1EB759; }

.btn-ghost, .btn-outline {
  background: rgba(255,255,255,.06);
  border-color: var(--edge);
  color: var(--ink);
}
.btn-ghost:hover, .btn-outline:hover { background: rgba(255,255,255,.12); }

/* ---- FONTES DA CASA ----
   O style.css antigo so conhece --font e --mono. A home usa tres famílias, e
   é delas que vem metade da identidade: Archivo pesado nos títulos, mono nos
   rótulos. Sem isto o site fica escuro mas com cara de outro site. */
:root {
  --f-display: 'Archivo', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-data:    'IBM Plex Mono', ui-monospace, monospace;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -.028em;
  line-height: 1.06;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: clamp(32px, 4.4vw, 52px); }
h2 { font-size: clamp(26px, 3vw, 40px); }
h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.2; }
/* na home, o <em> do título recebe o roxo claro */
h1 em, h2 em, h3 em { font-style: normal; color: var(--arc-lig); }

/* ---- ABERTURA DE PÁGINA ----
   Mesmo respiro da home: muito ar em cima, título curto, linha de apoio
   discreta. O antigo era um bloco azul chapado. */
.page-hero {
  background: linear-gradient(180deg, var(--steel), var(--void));
  border-bottom: 1px solid var(--edge);
  padding: 74px 0 58px;
  text-align: center;
}
.page-hero h1 { margin: 0 auto; max-width: 20ch; }
.page-hero p {
  color: var(--ink-2);
  font-size: 17px;
  line-height: 1.6;
  max-width: 62ch;
  margin: 18px auto 0;
}
.section-pad { padding: 62px 0; }

/* ---- LISTAGEM DO BLOG ----
   A GRADE FAZ A BORDA. gap:1px sobre fundo --edge desenha o fio entre os
   cartões; cada cartão fica chapado, sem borda e sem sombra. É o truque que
   dá à home aquele ar de painel, e é o que mais diferencia do tema antigo. */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  background: transparent;   /* ver comentario abaixo */
  border: 0;
}
/* A BORDA E DE CADA CARTAO, nao da grade.
   Antes o fio saia de gap:1px sobre fundo --edge. Bonito enquanto a linha
   fecha; com 8 posts em 3 colunas sobra um espaco na ultima linha, e esse
   espaco aparecia pintado -- um retangulo roxo do lado do ultimo post. */
.blog-card { border: 1px solid var(--edge); }
@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: var(--steel);
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  transition: background .2s;
}
.blog-card:hover { background: var(--plate); transform: none; }

/* A CAPA VAZIA É O CASO NORMAL: o post entra sem imagem e recebe a foto
   depois. Sem altura fixa e sem fundo, o card abria com um buraco e o texto
   alt aparecia solto -- foi o que o dono viu no print. */
.blog-card-img {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--plate);
  overflow: hidden;
  position: relative;
}
.blog-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  color: transparent;            /* esconde o texto alt quando falta a imagem */
}
.blog-card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }

/* rótulo em mono, caixa alta e entreletra larga — a marca da casa */
.blog-category {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--f-data);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--spark);
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 12px;
}
.blog-card h2 {
  font-size: 19px;
  line-height: 1.22;
  margin: 0 0 10px;
}
.blog-card h2 a { color: var(--ink); text-decoration: none; }
.blog-card h2 a:hover { color: var(--arc-lig); }
.blog-card p { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin: 0; }

.blog-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
}
.blog-card-meta time {
  font-family: var(--f-data);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: .06em;
}
.read-more {
  font-size: 13px;
  font-weight: 700;
  color: var(--arc-lig);
  text-decoration: none;
  white-space: nowrap;
}
.read-more:hover { color: var(--spark); }

/* ---- ARTIGO ---- */
.post-body { color: var(--ink-2); font-size: 16.5px; line-height: 1.75; }
.post-body h2, .post-body h3 { color: var(--ink); margin-top: 1.8em; }
.post-body a { color: var(--arc-lig); }
.post-body a:hover { color: var(--spark); }
.post-body blockquote {
  border-left: 2px solid var(--arc);
  background: var(--steel);
  color: var(--ink-2);
  padding: 16px 20px;
  margin: 24px 0;
}
.post-body code, .post-body pre {
  font-family: var(--f-data);
  background: var(--plate);
  border: 1px solid var(--edge);
  color: var(--ink);
}
.post-body img { border: 1px solid var(--edge); }
.post-body table th { background: var(--plate); color: var(--ink); font-family: var(--f-data); }
.post-body table td { border-color: var(--edge); }
.post-meta, .post-date { font-family: var(--f-data); color: var(--ink-3); letter-spacing: .06em; }

.empty-state {
  background: var(--steel);
  border: 1px solid var(--edge);
  color: var(--ink-2);
  padding: 48px 24px;
  text-align: center;
}

/* ---- PÁGINA DE ERRO ----
   Era o pior lugar para o cliente cair num site de outra cor: já está perdido,
   e a troca de tema faz parecer que saiu do site. */
.erro-404, .page-404, .not-found { background: var(--void); color: var(--ink); }

/* ---- TABELAS E LISTAS ---- */
table th { background: var(--plate); color: var(--ink); }
table td { border-color: var(--edge); }
tr:hover td { background: rgba(255,255,255,.03); }

/* ---- SELEÇÃO E FOCO ---- */
::selection { background: var(--arc); color: #fff; }
:focus-visible { outline: 2px solid var(--arc-lig); outline-offset: 2px; }

/* O botao da Loja nao veio na copia automatica das regras do cabecalho.
   E o unico amarelo do menu e o atalho mais clicado do site. */
.btn-loja, .btn-spark {
  background: var(--spark);
  color: #221904;
  font-weight: 700;
  border-color: var(--spark);
}
.btn-loja:hover, .btn-spark:hover { background: #FFDD3C; }