/* Ponte Bootstrap 5 -> tokens da Ukari.
 *
 * O Bootstrap fica: ele resolve grade, navbar e offcanvas, e trocá-lo custaria
 * uma reescrita de todos os templates sem ganho para o usuário. O que muda é a
 * COR: as variáveis `--bs-*` passam a ler os tokens, e o site inteiro ganha
 * claro/escuro sem que nenhum template saiba disso.
 *
 * Sem esta ponte, o Bootstrap continuaria pintando `#fff` fixo e o tema escuro
 * apareceria só nas partes que escrevemos à mão — que é pior que não ter tema.
 */

:root {
  --bs-body-bg: var(--kv-bg);
  --bs-body-color: var(--kv-ink);
  --bs-secondary-color: var(--kv-ink-muted);
  --bs-border-color: var(--kv-line);
  --bs-emphasis-color: var(--kv-ink);
  --bs-link-color: var(--kv-brand-strong);
  --bs-link-hover-color: var(--kv-brand);
  --bs-heading-color: var(--kv-ink);

  /* Os nomes antigos do site continuam valendo, agora apontando para os tokens.
     Assim o CSS embutido no base.html não precisa ser reescrito de uma vez. */
  /* O nome antigo era literal: a ação da marca já foi laranja. Hoje ela é
     violeta, e um token chamado `orange` guardando violeta engana quem ler o
     nome. Os dois ficam apontando para o mesmo lugar até o resto do site usar
     só `--kv-acento`. */
  --kv-acento: var(--st-brand);
  --kv-acento-forte: var(--st-brand-strong);
  --kv-orange: var(--kv-acento);
  --kv-orange-dark: var(--kv-acento-forte);
  --kv-black: var(--st-ink);
  --kv-muted: var(--st-ink-muted);
}

body { background: var(--kv-bg); color: var(--kv-ink); }

.navbar.bg-white { background: var(--kv-surface) !important; border-color: var(--kv-line) !important; }

/* O menu suspenso do Bootstrap tem fundo branco fixo, e o texto dele herda a
   cor do corpo. No tema escuro isso da texto claro sobre fundo branco: o menu
   existe, abre, e nao se le uma palavra. Nao e um caso de contraste ruim — e
   um caso de conteudo invisivel, e so aparece em quem usa o tema escuro. */
.dropdown-menu {
  background: var(--kv-surface-raised);
  border-color: var(--kv-line);
  color: var(--kv-ink);
  box-shadow: var(--kv-shadow);
}
.dropdown-item { color: var(--kv-ink); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--kv-bg-sunken); color: var(--kv-ink); }
.dropdown-divider { border-color: var(--kv-line); }
.border-bottom, .border-top { border-color: var(--kv-line) !important; }
.text-secondary { color: var(--kv-ink-muted) !important; }
.bg-white { background: var(--kv-surface) !important; }

/* Superfícies do site que eram brancas fixas. */
.work-card, .contact-panel, .datalog-mermaid, .datalog-chart-wrap,
.plano, .bloco-seg, .limite, .produto-item, .produto-faixa {
  background: var(--kv-surface);
  border-color: var(--kv-line);
  color: var(--kv-ink);
}
.tabela-seg td, .tabela-seg th { border-color: var(--kv-line); }
.plano li.falta, .tabela-seg th { color: var(--kv-ink-faint); }
.produto-faixa, .plano.destaque {
  border-color: var(--kv-line-strong);
  box-shadow: 8px 8px 0 var(--kv-brand);
}
.solid-section { background: var(--kv-bg-sunken); border-color: var(--kv-line); }
.article-frame { border-left-color: var(--kv-ink); }
.contact-panel { border: 2px solid var(--kv-ink); box-shadow: 8px 8px 0 var(--kv-line-strong); }

/* O herói é superfície de MARCA, não de leitura: fica escuro nos dois temas,
   com as próprias cores de texto declaradas.
 *
 * A versão anterior o fazia seguir os tokens de tema, e tinha um defeito grave:
 * a regra `:root:not([data-bs-theme="light"])` ficou FORA da media query, então
 * casava também no tema claro. Resultado: fundo `#0b0d0e` com texto `#17191b`
 * — preto sobre preto, título ilegível.
 *
 * A lição que fica na regra: superfície de marca não deve depender do tema.
 * Fixar as duas cores juntas torna impossível uma delas mudar sem a outra. */
.industrial-hero {
  background: #0d0d0f;
  color: #ffffff;
  /* O halo do satélite no logotipo tem de virar a cor DESTA superfície, não a
     do tema: sem isto o satélite ganha um contorno claro no meio do preto. */
  --ukari-halo: #0d0d0f;
}
.industrial-hero .hero-title,
.industrial-hero h1, .industrial-hero h2 { color: #ffffff; }
.industrial-hero .hero-lead,
.industrial-hero .lead { color: #c8cccf; }
.industrial-hero .eyebrow-dark, .st-dark .eyebrow-dark { color: #b9b9c0; }
.industrial-hero a:not(.btn) { color: #ffffff; }
/* Contraste do botão secundário sobre o herói escuro: `btn-outline-light` do
   Bootstrap some quando o tema claro repinta a borda. */
.industrial-hero .btn-outline-light {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .45);
}
.industrial-hero .btn-outline-light:hover { background: rgba(255, 255, 255, .12); color: #ffffff; }

/* O painel dentro do herói também é superfície de marca. */
.industrial-hero .plant-panel { background: #151517; border-color: #33333a; color: #ffffff; }
.industrial-hero .plant-panel .kv-technical { color: #ffffff; }

.article-content pre { background: var(--kv-bg-sunken); color: var(--kv-ink); border: 1px solid var(--kv-line); }
.article-content code { color: var(--kv-brand-strong); }
.article-content th, .article-content td, .article-content table { border-color: var(--kv-line); }
.article-content blockquote { color: var(--kv-ink-muted); border-left-color: var(--kv-line-strong); }

.btn-outline-dark { color: var(--kv-ink); border-color: var(--kv-line-strong); }
.btn-outline-dark:hover, .btn-outline-dark.active { background: var(--kv-ink); color: var(--kv-bg); }

/* Controles de tema e idioma na barra. */
.kv-chrome { display: flex; align-items: center; gap: .4rem; }
.kv-chrome button, .kv-chrome select {
  min-height: 38px; padding: .3rem .6rem; font-size: .82rem;
  color: var(--kv-ink-muted); background: var(--kv-bg-sunken);
  border: 1px solid var(--kv-line); border-radius: .5rem; cursor: pointer;
}
.kv-chrome button:hover, .kv-chrome select:hover { color: var(--kv-ink); }


/* ------------------------------------------------------------------------
   MOBILE
   O site quebrava em telas estreitas. Três causas distintas, cada uma com a
   sua correção — não um `overflow: hidden` global, que esconde o sintoma e
   deixa o conteúdo inalcançável.
   ------------------------------------------------------------------------ */

/* 1. Palavra longa sem ponto de quebra. Em inglês há termos como
      "operations" e "infrastructure" que, no tamanho do título, são mais
      largos que um telefone. Sem isto o texto vaza para fora da tela. */
h1, h2, h3, .hero-title, .display-6 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* 2. O título usava `6vw` com entrelinha de .94 e espaçamento negativo forte —
      medidas pensadas para telas largas. Em 360px isso produz uma linha só,
      gigante, que empurra a página. */
@media (max-width: 575.98px) {
  .hero-title {
    font-size: clamp(1.9rem, 8.5vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -.035em;
  }
  .display-6 { font-size: 1.6rem; }
  .hero-lead, .lead { font-size: 1rem; }
  .industrial-hero { padding-top: 2rem !important; padding-bottom: 2rem !important; }
  .contact-panel { box-shadow: 5px 5px 0 var(--kv-line-strong); }
}

/* 3. A faixa de tema e idioma era um flex sem quebra: quatro controles em
      linha não cabem em 360px e empurravam a largura do documento inteiro. */
.kv-chrome { flex-wrap: wrap; row-gap: .5rem; }
.kv-chrome select { max-width: 100%; }

/* Rede de segurança: nada deve poder alargar o documento. Aplicado no eixo X
   apenas — `overflow: hidden` nos dois eixos quebraria posicionamento fixo.

   `clip`, E NÃO `hidden`. Aqui morava um defeito que custou a seção mais cara
   da home. Pelo spec, `overflow-x: hidden` com `overflow-y: visible` faz o
   eixo Y computar para `auto`: o `body` vira CONTÊINER DE ROLAGEM. E um
   contêiner de rolagem entre um `position: sticky` e a janela desliga o grude
   — o `body` não rola (a rolagem é do viewport), então o elemento nunca tem de
   que se prender. Some a barra de navegação presa no topo e some a cena presa
   de "Um dia na loja": os quatro quadros continuavam trocando, só que fora da
   tela, acima do leitor. O sintoma era "travou no primeiro".

   `overflow: clip` corta a mesma coisa e NÃO cria contêiner de rolagem — é
   para exatamente este caso que ele existe, e é por isso que também aceita
   conviver com `visible` no outro eixo. Chrome 90+, Firefox 81+, Safari 16+;
   em navegador anterior a declaração é descartada e voltamos ao estado sem
   rede — degrada, não quebra. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, table, pre { max-width: 100%; }
pre { overflow-x: auto; }

/* Alvo de toque de 44px: abaixo disso o polegar erra, e este site é lido
   majoritariamente no celular. */
@media (max-width: 991.98px) {
  .btn, .kv-chrome button, .kv-chrome select { min-height: 44px; }
}


/* ------------------------------------------------------------------------
   Regras que o <style> embutido do base.html fixa em cor absoluta.
   A ponte e carregada DEPOIS dele justamente para poder vencer aqui.
   ------------------------------------------------------------------------ */

/* A causa raiz do "tema escuro nao muda nada": `body { background: #fff }`
   embutido, vencendo por ordem no documento. */
body { background: var(--kv-bg) !important; color: var(--kv-ink) !important; }

/* Botao primario: a tinta da marca, que inverte junto com o tema. O texto vem
   de `--st-on-brand` e nao de `#fff` fixo — foi o `#fff` fixo aqui que ja
   produziu botao branco com texto branco no tema escuro. */
.btn-kv { background: var(--st-brand); border-color: var(--st-brand); color: var(--st-on-brand); }
.btn-kv:hover, .btn-kv:focus { background: var(--st-brand-strong); border-color: var(--st-brand-strong); color: var(--st-on-brand); }

/* Superficies de conteudo: seguem o tema. */
.work-card { background: var(--kv-surface); border-color: var(--kv-line); color: var(--kv-ink); }
.work-card h2, .work-card h3, .work-card .h4 { color: var(--kv-ink); }
.work-card:hover { box-shadow: var(--kv-shadow); }
/* Os rótulos de seção eram o acento colorido da marca antiga. Sem acento, o
   que os separa do texto é o desenho — monoespaçada, caixa alta, entreletra
   aberta — e um cinza que fica abaixo do título na hierarquia sem sumir. */
.section-kicker, .number-tag { color: var(--st-ink-muted); }

/* Menu lateral do celular — era branco fixo e ficava ilegivel no escuro. */
.public-navigation, .offcanvas { background: var(--kv-surface); color: var(--kv-ink); }
.public-navigation .offcanvas-header { border-color: var(--kv-line); }
.public-navigation .nav-link { color: var(--kv-ink); border-color: var(--kv-line); }
.public-navigation .nav-link:active { background: var(--kv-brand-wash); }

/* Formularios. */
.form-control, .form-select {
  background: var(--kv-surface); color: var(--kv-ink); border-color: var(--kv-line);
}
.form-control::placeholder { color: var(--kv-ink-faint); }
.form-control:focus, .form-select:focus {
  background: var(--kv-surface); color: var(--kv-ink);
  border-color: var(--st-ink); box-shadow: 0 0 0 .2rem var(--st-brand-wash);
}

/* Bootstrap components that still expose literal light-theme defaults. */
.card, .accordion-item, .accordion-button, .modal-content, .list-group-item {
  background-color: var(--kv-surface);
  border-color: var(--kv-line);
  color: var(--kv-ink);
}
.accordion-button:not(.collapsed) { background-color: var(--st-brand-wash); color: var(--st-ink); }
/* A pergunta fechada saía no azul de link padrão do Bootstrap — a única cor
   restante numa página inteira em preto e branco, e logo no FAQ, que é onde a
   pessoa lê antes de comprar. A seta é um SVG embutido no CSS do Bootstrap com
   a cor dentro do arquivo: só um filtro alcança. */
.accordion-button { color: var(--st-ink); box-shadow: none; }
.accordion-button:focus { box-shadow: none; border-color: var(--st-line); }
.accordion-button::after { filter: grayscale(1) brightness(0); }
:root[data-bs-theme="dark"] .accordion-button::after { filter: grayscale(1) brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) .accordion-button::after { filter: grayscale(1) brightness(0) invert(1); }
}
.alert-light { background-color: var(--kv-surface-raised); border-color: var(--kv-line); color: var(--kv-ink); }