/*
  DevUp Sistemas: estilos do site inteiro (HTML estático, sem framework e sem build).

  COMO MONTAR UMA PÁGINA INTERNA (ex.: automacao-com-ia.html, automacao-com-ia/contabilidade.html)
  -------------------------------------------------------------------------------------------------
  VERSÃO NA URL: as páginas chamam /assets/site.css?v=<8 primeiros caracteres do sha256 do arquivo> (o mesmo
  para o site.js). Em produção, CSS e JS ficam 1 dia em cache; mudou um dos dois, troque o ?v= em todas as páginas,
  senão quem voltou ao site recebe o HTML novo com o CSS velho. Conta: sha256sum devup/assets/site.css | cut -c1-8

  Copie o <head> do index.html e troque: <title>, meta description, canonical, og:url, og:title (= H1),
  og:description (= meta) e o JSON-LD da ficha (dateModified "2026-10-27"). Caminhos sempre a partir
  da raiz ("/assets/site.css", "/fontes/...", "/favicon.svg"), porque a página pode estar numa subpasta.

  Esqueleto:

    <body>
    <a class="pular" href="#conteudo">Pular para o conteúdo</a>
    <header class="cabecalho"> ... copie de uma página interna: no menu, "/#o-que-fazemos" etc., e "Caso" leva a "/caso".
       O botão "Pedir diagnóstico" do cabeçalho leva a mensagem de WhatsApp da página. </header>
    No <head>, o site.js leva onerror="document.documentElement.className='no-js'": se ele não carregar,
    o menu volta ao modo sem JavaScript (aberto, em linhas) em vez de ficar escondido atrás de um botão morto.
    <main id="conteudo">
      <section class="topo-pagina" aria-labelledby="titulo">      faixa marinho do título
        <svg class="topo-pagina__anel" viewBox="0 0 100 100" aria-hidden="true" focusable="false"><use href="#icone-devup"></use></svg>
        <div class="container topo-pagina__conteudo">
          <nav class="trilha" aria-label="Trilha">
            <ol><li><a href="/">Início</a></li><li><a href="/automacao-com-ia">Automação com IA</a></li>
                <li><span aria-current="page">Contabilidade</span></li></ol>
          </nav>
          <h1 id="titulo" class="topo-pagina__titulo">...</h1>
          <p class="topo-pagina__lead">...</p>
          <div class="acoes"><a class="botao botao--claro" href="https://wa.me/...">Pedir diagnóstico gratuito</a>
                             <a class="botao botao--contorno-claro" href="/caso">Ver o caso</a></div>
        </div>
      </section>

      <section class="secao"><div class="container texto"> h2, h3, p, ul, ol ... </div></section>
        .texto              bloco de leitura (máx. 44rem). Dentro dele, h2/h3/p/ul/ol já têm ritmo.
        .ressalva           caixa "Antes de tudo: o que já fazemos e o que não"
        .lista-passos       <ol class="lista-passos"><li><span class="num" aria-hidden="true">1</span>
                            <div><h3>Lançar a cobrança</h3><p>... <span class="etiqueta etiqueta--ja">Já fazemos.</span></p></div></li></ol>
                            etiquetas: .etiqueta--ja ("Já fazemos.") e .etiqueta--pode ("Podemos construir.")
        .ilustracao         tela ilustrativa em HTML: <figure class="ilustracao"><figcaption class="ilustracao__legenda">
                            Ilustração. Empresa, pessoa e valores fictícios.</figcaption>
                            <div class="balao balao--empresa"><p class="balao__autor">Consultoria Exemplo <span class="balao__hora">9h00</span></p><p>...</p></div>
                            <div class="balao"> ... </div></figure>
        .faq                FAQ aberto (sem <details>): <div class="faq"><div class="faq__item"><h3 class="faq__pergunta">...</h3><p>...</p></div></div>
        .tabela-rolagem     <div class="tabela-rolagem"><table class="tabela">...</table></div> (rola sozinha no celular)
      Bloco A (caso):       <section class="secao"><div class="container"><div class="bloco-caso"> <h2>Um caso real</h2> <p>...</p>
                            <p class="bloco-caso__sigilo">Nome e setor do cliente sob sigilo.</p> <a class="link-claro" href="/caso">Ver o caso</a></div></div></section>
      Bloco B (BuildBot):   <div class="painel-buildbot painel-buildbot--compacto"> igual ao da home, com o texto do nicho.
      Bloco C (chamada):    <section class="secao secao--clara"><div class="container chamada"><h2 class="chamada__titulo">...</h2>
                            <p class="chamada__texto">...</p><a class="botao botao--principal" href="https://wa.me/...">Pedir diagnóstico gratuito no WhatsApp</a></div></section>
      A linha "Atualizado em 27/10/2026. Equipe DevUp Sistemas." fica no rodapé (.rodape__base), como na home.

      Também usados nas páginas internas (fim deste arquivo):
        .topo-pagina__grade texto à esquerda e, no desktop, a figura própria da página à direita (no celular, depois dos botões)
        .quadro             figura discreta sobre o marinho, em HTML e CSS. Miolos: .fluxo (passos ligados; .fluxo--feito com tique),
                            .docs (documentos por cliente), .tela (sistema e celular) e .mapa (SVG de Marília e região)
        .selo               etiqueta pequena dentro do quadro (.selo--auto, .selo--ia, .selo--feito)
        .grade-itens        lista de itens com título e texto, em 2 colunas (.grade-itens--3: 3 colunas no desktop)
        .blocos-fim         Bloco A e Bloco B empilhados na mesma seção
        .painel-buildbot__titulo  H2 dentro do painel da BuildBot; links do painel em dourado claro
        .veja               linha "Veja também" com links internos
        No /caso, a .escada da home vai dentro do .topo-pagina, com os H2 do desafio, do que fizemos e do resultado.
    </main>
    <footer class="rodape"> ... copie de uma página interna (na .rodape__base: "Atualizado em ... Equipe DevUp Sistemas.") </footer>
    <svg class="simbolos"> ... copie do index.html (ícones da DevUp e da BuildBot usados por <use>) </svg>

  Faixas: o cabeçalho fica por cima da primeira faixa marinho (.topo ou .topo-pagina), que já reserva o espaço dele.
  Só duas faixas marinho por página: o título e o caso. Fundo claro no resto (.secao, .secao--clara).
  Botões: raio de 6 px (regra 2: nada de pílula).
    .botao--principal       royal com texto branco, sobre fundo claro
    .botao--claro           celeste escuro (#0077B6) com texto branco, sobre o marinho: 4,9:1 no texto (AA) e 3,3:1
                            do botão contra o marinho (contraste de componente). No hover, celeste da marca.
    .botao--contorno-claro  contorno branco, sobre o marinho
    .botao--contorno        contorno royal, sobre fundo claro
    .botao--ouro            só no painel da BuildBot (carvão e dourado são dela)
  Movimento: só a linha da seta no topo da home (cerca de 1,2 s, uma vez). Nada de entrada animada por seção.
*/

@font-face {
  font-family: "Red Hat Display";
  src: url("/fontes/red-hat-display.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Red Hat Text";
  src: url("/fontes/red-hat-text.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
/* Bricolage só para a palavra "BuildBot" do painel: subconjunto com as letras B, u, i, l, d, o, t no peso 800 (1,3 KB).
   Para usar outra palavra nesta fonte, gere o subconjunto de novo a partir da fonte inteira, que está em
   buildbot/fontes/bricolage-grotesque.woff2 (licença OFL, sem nome reservado). */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fontes/bricolage-buildbot.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Marca (docs/design-devup.md) */
  --marinho: #0A1E4F;
  --royal: #1F5AA6;
  --celeste: #0089C8;
  --papel: #F4F6F9;
  --tinta: #0F1B2D;
  --nevoa: #5A6A80;

  /* Derivados */
  --branco: #FFFFFF;
  --royal-escuro: #174884;
  --royal-claro: #E4EDF8;
  --celeste-claro: #33A3D6;
  --celeste-escuro: #0077B6; /* botão principal sobre o marinho, com texto branco (4,9:1) */
  --linha: #D6DDE7;
  --linha-forte: #B5C1D1;
  --sobre-marinho: #D3DCEA;
  --sobre-marinho-2: #AFC0DA;
  --marinho-linha: #24396E;
  --marinho-linha-forte: #34508C;
  --marinho-quadro: #0F275E;

  /* BuildBot (docs/design-buildbot.md), só no painel do produto */
  --bb-carvao: #17140F;
  --bb-grafite: #221E17;
  --bb-linha: #3A3328;
  --bb-marfim: #F3ECDD;
  --bb-areia: #A99F8B;
  --bb-ouro: #E3B552;
  --bb-ouro-claro: #F4D47E;

  /* Tipografia: razão 1,25 */
  --f-titulo: "Red Hat Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-texto: "Red Hat Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-21: 1.3125rem;
  --t-26: 1.625rem;
  --t-33: 2.0625rem;
  --t-41: 2.5625rem;
  --t-52: 3.25rem;
  --t-60: 3.75rem;

  /* Espaço */
  --largura: 1120px;
  --gutter: 20px;
  --cabecalho: 76px;
  --raio: 6px;
  --secao: clamp(64px, 8vw, 112px);
}
@media (min-width: 720px) {
  :root { --gutter: 32px; }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
  background: var(--papel);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-17);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h3, h4 { letter-spacing: -0.005em; }

/* Na Red Hat Display, o espaço entre palavras sai estreito (cerca de 0,17em) e, em tela 1x, as palavras
   parecem coladas. Um pouco mais de espaço em tudo que usa a fonte de títulos. */
h1, h2, h3, h4,
.botao, .link-forte, .link-claro, .segmento__nome, .topo__tipo,
.quadro__titulo, .rodape__titulo, .legal__indice-titulo, .mapa__texto--forte {
  word-spacing: 0.06em;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

img, svg { display: block; max-width: 100%; }

a {
  color: var(--royal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--celeste);
  outline-offset: 3px;
  border-radius: 2px;
}
.cabecalho :focus-visible,
.topo :focus-visible,
.topo-pagina :focus-visible,
.faixa-caso :focus-visible,
.bloco-caso :focus-visible {
  outline-color: var(--branco);
}
.painel-buildbot :focus-visible { outline-color: var(--bb-ouro-claro); }

.pular {
  position: absolute;
  left: 12px;
  top: -200px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--raio);
  background: var(--branco);
  color: var(--marinho);
  font-weight: 700;
  text-decoration: none;
}
.pular:focus { top: 12px; }

.container {
  width: 100%;
  max-width: calc(var(--largura) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.simbolos {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Botões e links ---------- */

.acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
}

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 11px 22px;
  border: 2px solid transparent;
  border-radius: var(--raio);
  font-family: var(--f-titulo);
  font-size: var(--t-17);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.botao--principal { background: var(--royal); color: var(--branco); }
.botao--principal:hover { background: var(--royal-escuro); }

.botao--claro {
  background: var(--celeste-escuro);
  color: var(--branco);
  font-size: 1.1875rem; /* 19 px em 700: o CTA principal um pouco maior que o secundário */
}
.botao--claro:hover { background: var(--celeste); } /* 3,9:1 com branco: passa por ser texto grande */

.botao--contorno-claro {
  border-color: var(--sobre-marinho-2);
  color: var(--branco);
}
.botao--contorno-claro:hover { border-color: var(--branco); }

.botao--contorno {
  border-color: var(--royal);
  color: var(--royal);
}
.botao--contorno:hover { background: var(--royal-claro); }

.botao--ouro { background: var(--bb-ouro); color: var(--bb-carvao); }
.botao--ouro:hover { background: var(--bb-ouro-claro); }

.link-forte {
  font-family: var(--f-titulo);
  font-weight: 700;
  color: var(--royal);
}

.link-claro {
  color: var(--branco);
  font-family: var(--f-titulo);
  font-weight: 700;
  text-decoration-color: var(--celeste);
  text-decoration-thickness: 2px;
}
.link-claro:hover { text-decoration-color: var(--branco); }

/* Links soltos (fora de frase): área de toque de pelo menos 44 px de altura, sem mudar o desenho */
.link-claro,
.link-forte,
.contato__dados a,
.dados-empresa a {
  display: inline-block;
  padding-block: 9px;
}
/* Nos dados de contato a área de toque cresce para fora, sem mudar o ritmo da lista */
.contato__dados a,
.dados-empresa a { margin-block: -9px; }

/* ---------- Marca (ícone em SVG + nome em HTML, como no logo) ---------- */

.marca {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 6px;
  color: var(--royal);
  text-decoration: none;
}
/* Proporções do logo (img/devup-sistemas-logo.png): o "D" tem 58% da altura do ícone,
   e "sistemas", fino e espaçado, termina embaixo do "U". */
.marca__icone {
  flex: none;
  width: 44px;
  height: 44px;
  color: var(--royal);
}
.marca__nome {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  padding-top: 2px;
}
.marca__devup {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.marca__sistemas {
  margin-top: 4px;
  padding-left: 1px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.62em;
}
.marca--clara { color: var(--branco); }
.marca--clara .marca__icone { color: var(--celeste); }

/* ---------- Cabeçalho (fica por cima da faixa marinho do topo) ---------- */

.cabecalho {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  color: var(--branco);
}
.cabecalho__linha {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--cabecalho);
}

.menu {
  display: flex;
  align-items: center;
  gap: 28px;
}
.menu__lista {
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__lista a {
  color: var(--branco);
  font-size: var(--t-15);
  font-weight: 500;
  text-decoration: none;
}
.menu__lista a:hover { text-decoration: underline; text-decoration-color: var(--celeste); text-decoration-thickness: 2px; }
.menu__lista a[aria-current] { text-decoration: underline; text-decoration-color: var(--celeste); text-decoration-thickness: 2px; }
.menu__acao { min-height: 44px; padding: 8px 18px; }

.menu-botao {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1.5px solid var(--sobre-marinho-2);
  border-radius: var(--raio);
  background: transparent;
  color: var(--branco);
  font: 600 var(--t-15)/1 var(--f-texto);
  cursor: pointer;
}
.menu-botao svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

@media (max-width: 1039px) {
  .js .menu-botao { display: inline-flex; }
  .js .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 4px var(--gutter) 24px;
    background: var(--marinho);
    border-top: 1px solid var(--marinho-linha);
    border-bottom: 1px solid var(--marinho-linha);
  }
  .js .menu-botao[aria-expanded="true"] + .menu { display: flex; }
  .js .menu__lista { flex-direction: column; gap: 0; }
  .js .menu__lista a {
    display: block;
    padding: 14px 0;
    font-size: var(--t-17);
    border-bottom: 1px solid var(--marinho-linha);
  }

  /* Sem JavaScript: o menu aparece aberto, em linhas, embaixo do logo */
  .no-js .cabecalho__linha { flex-wrap: wrap; padding-block: 16px; }
  .no-js .menu { flex-wrap: wrap; gap: 12px 20px; width: 100%; }
  .no-js .menu__lista { flex-wrap: wrap; gap: 6px 18px; }
  .no-js .topo,
  .no-js .topo-pagina { padding-top: calc(var(--cabecalho) + 150px); }
}

/* ---------- Topo da home (faixa marinho com o anel da marca) ---------- */

.topo {
  position: relative;
  overflow: hidden;
  padding: calc(var(--cabecalho) + 48px) 0 72px;
  background: var(--marinho);
  color: var(--branco);
}
.topo__conteudo { position: relative; z-index: 1; }

.topo__tipo {
  margin-bottom: 16px;
  color: var(--sobre-marinho-2);
  font-family: var(--f-titulo);
  font-size: var(--t-17);
  font-weight: 600;
  letter-spacing: 0;
}
.topo__titulo {
  max-width: 15.2em;
  font-size: clamp(var(--t-33), 1.35rem + 2.6vw, var(--t-52));
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.02em;
}
.topo__titulo-fim { display: block; margin-top: 0.22em; }
.topo__lead {
  max-width: 34em;
  margin-top: 24px;
  color: var(--sobre-marinho);
  font-size: clamp(var(--t-17), 1rem + 0.35vw, 1.1875rem);
  line-height: 1.6;
}
.topo .acoes { margin-top: 32px; }
.topo__nota {
  margin-top: 22px;
  color: var(--sobre-marinho-2);
  font-size: var(--t-15);
}

/* O anel com a seta do logo, grande e cortado pela borda direita. A diagonal da seta vira uma linha fina,
   desenhada uma vez no carregamento. Com movimento reduzido, aparece pronta. */
.topo__arte {
  /* --anel = tamanho do anel na tela. O SVG é 2,5 vezes maior para a linha caber inteira nele
     (viewBox de -150 a 100): nada é desenhado fora da caixa do SVG. */
  --anel: 300px;
  position: absolute;
  z-index: 0;
  top: 0;
  right: -112px;
  width: calc(var(--anel) * 2.5);
  height: calc(var(--anel) * 2.5);
  max-width: none;
  pointer-events: none;
}
.topo__anel { color: var(--celeste); opacity: 0.12; }
.topo__trajeto,
.topo__ponta {
  fill: none;
  stroke: var(--celeste);
  stroke-width: 0.22;
  stroke-linecap: butt;
}
/* No celular e no tablet o texto passa por cima do anel: fica só o anel, sem a linha fina. */
.topo__trajeto,
.topo__ponta { display: none; }

@media (min-width: 720px) {
  .topo__arte { --anel: 420px; right: -170px; top: 40px; }
}
@media (min-width: 1040px) {
  .topo { padding: calc(var(--cabecalho) + 72px) 0 104px; }
  .topo__arte {
    --anel: 740px;
    top: 50%;
    right: -210px;
    transform: translateY(calc(var(--anel) * -0.44));
  }
  .topo__anel { opacity: 0.16; }
  .topo__trajeto--longo,
  .topo__ponta { display: inline; }
}

/* A linha fica pronta no estilo base; a animação só sai do "apagado" (fill backwards),
   então nada depende de o navegador segurar o estado final. */
.topo__trajeto,
.topo__ponta {
  stroke-dasharray: calc(var(--len) * 1px);
  stroke-dashoffset: 0;
}
/* A classe "tracar" entra no <html> pelo script do <head> e sai no fim do desenho (site.js).
   O trajeto começa bem abaixo da faixa (para sair pela borda de baixo em qualquer altura do topo até cerca
   de 1.080 px). Os primeiros 60% ficariam fora da faixa: a animação já parte deles, e o que se vê é a linha
   entrando pela borda de baixo e subindo até o anel. A ponta são dois traços que saem do vértice da seta. */
@media (prefers-reduced-motion: no-preference) {
  .tracar .topo__trajeto { animation: tracar-trajeto 0.85s cubic-bezier(0.3, 0.1, 0.3, 1) 0.15s backwards; }
  .tracar .topo__ponta { animation: tracar 0.3s ease-out 1s backwards; }
}
@keyframes tracar { from { stroke-dashoffset: calc(var(--len) * 1px); } }
@keyframes tracar-trajeto { from { stroke-dashoffset: calc(var(--len) * 0.4px); } }

/* ---------- Seções em fundo claro ---------- */

.secao { padding-block: var(--secao); }
.secao + .secao { border-top: 1px solid var(--linha); }
.secao--sem-linha { border-top: 0 !important; }
.secao--clara { background: var(--branco); }

.titulo-secao {
  max-width: 24em;
  margin-bottom: clamp(28px, 4vw, 48px);
  font-size: clamp(var(--t-26), 1.2rem + 1.3vw, var(--t-33));
  font-weight: 800;
}

.texto-apoio { max-width: 34em; }

/* O que fazemos: lista com descrição e prova, não cartões */
.servicos {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--tinta);
}
.servico {
  display: grid;
  gap: 12px;
  padding: 28px 0;
  border-bottom: 1px solid var(--linha);
}
.servico__nome { font-size: var(--t-21); font-weight: 700; }
.servico__corpo,
.servico__prova { max-width: 38rem; }
.servico__corpo p { margin-bottom: 2px; }
.servico__prova {
  align-self: start;
  margin: 4px 0 0;
  padding-left: 16px;
  border-left: 2px solid var(--celeste);
  font-size: var(--t-15);
  line-height: 1.55;
}
.servico__prova strong { color: var(--marinho); }

@media (min-width: 900px) {
  .servico {
    grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
    gap: 40px;
    padding: 34px 0;
  }
  .servico__nome { font-size: var(--t-21); padding-top: 1px; }
  .servico__prova { margin-top: 3px; }
}

/* Duas colunas: título e apoio de um lado, conteúdo do outro */
.duas-colunas { display: grid; gap: 28px; }
.duas-colunas__lado .titulo-secao { margin-bottom: 16px; }
@media (min-width: 900px) {
  .duas-colunas {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 72px;
  }
}

/* Soluções por segmento */
.segmentos {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--tinta);
}
.segmento {
  padding: 16px 0 22px;
  border-bottom: 1px solid var(--linha);
}
.segmento__nome {
  display: inline-block;
  padding-block: 6px;
  font-family: var(--f-titulo);
  font-size: var(--t-21);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.segmento p { margin-top: 0; }
.segmentos__fim { margin-top: 24px; max-width: 34em; }

/* Painel da BuildBot: a única peça carvão e dourado do site */
.painel-buildbot {
  display: grid;
  gap: 28px;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 10px;
  background: var(--bb-carvao);
  color: var(--bb-marfim);
}
.painel-buildbot__marca {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 22px);
}
.painel-buildbot__icone {
  flex: none;
  width: clamp(64px, 8vw, 104px);
  height: clamp(64px, 8vw, 104px);
}
.painel-buildbot__nome {
  margin: 0;
  font-family: "Bricolage Grotesque", var(--f-titulo);
  font-size: clamp(var(--t-41), 1.6rem + 2.4vw, var(--t-60));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.painel-buildbot__texto p {
  max-width: 34em;
  font-size: clamp(var(--t-17), 1rem + 0.3vw, 1.1875rem);
}
.painel-buildbot__nota {
  color: var(--bb-areia);
  font-size: var(--t-15) !important;
}
.painel-buildbot .botao { margin-top: 8px; }
@media (min-width: 900px) {
  .painel-buildbot {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: 64px;
  }
}
.painel-buildbot--compacto { padding: clamp(24px, 4vw, 40px); gap: 20px; }
.painel-buildbot--compacto .painel-buildbot__icone { width: 56px; height: 56px; }
.painel-buildbot--compacto .painel-buildbot__nome { font-size: var(--t-33); }
@media (min-width: 900px) {
  .painel-buildbot--compacto { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; }
}

/* Como trabalhamos: sequência real, numerada */
.etapas {
  display: grid;
  gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.etapa {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  align-content: start; /* na grade de 2 colunas o item estica; as linhas internas não podem se repartir */
}
.etapa__marca { grid-row: span 2; }
.etapa__marca,
.num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1.5px solid var(--royal);
  border-radius: 2px;
  color: var(--royal);
  font-family: var(--f-titulo);
  font-size: var(--t-17);
  font-weight: 700;
  line-height: 1;
}
.etapa__titulo { margin: 8px 0 8px; font-size: var(--t-21); }
@media (min-width: 720px) {
  .etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 48px; }
}
@media (min-width: 1040px) {
  .etapa { display: block; }
  .etapa__titulo { margin-top: 18px; }
  /* Só onde algum título quebra em 2 linhas (home): reserva a 2ª linha para os textos começarem alinhados */
  .etapas--alinhar .etapa__titulo { min-height: 2.3em; }
}
@media (min-width: 1040px) {
  .etapas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
  .etapa:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 19.25px;
    left: 48px;
    right: -32px;
    height: 1.5px;
    background: var(--linha-forte);
  }
}

/* Chamada para o diagnóstico e contato */
.chamada-contato { display: grid; gap: 56px; }
.chamada__titulo {
  max-width: 13em;
  font-size: clamp(var(--t-33), 1.3rem + 2.4vw, var(--t-52));
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.02em;
}
.chamada__texto {
  max-width: 30em;
  margin: 20px 0 28px;
  font-size: clamp(var(--t-17), 1rem + 0.35vw, 1.1875rem);
}
.contato {
  padding-top: 28px;
  border-top: 1px solid var(--linha);
}
.contato__titulo { margin-bottom: 14px; font-size: var(--t-26); font-weight: 800; }
.contato__dados {
  display: grid;
  gap: 14px;
  margin: 22px 0 0;
}
.contato__dados div { display: grid; gap: 2px; }
.contato__dados dt {
  color: var(--nevoa);
  font-size: var(--t-15);
  font-weight: 600;
}
.contato__dados dd { margin: 0; }
@media (min-width: 900px) {
  .chamada-contato {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 80px;
    align-items: start;
  }
  .contato {
    padding: 0 0 0 40px;
    border-top: 0;
    border-left: 1px solid var(--linha);
  }
}

/* ---------- Faixa do caso (marinho), com a linha de 45 graus ---------- */

.faixa-caso {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 120px);
  background: var(--marinho);
  color: var(--branco);
}
.faixa-caso__cabeca { margin-bottom: 48px; }
.faixa-caso .titulo-secao {
  margin-bottom: 10px;
  color: var(--branco);
  font-size: clamp(var(--t-33), 1.5rem + 1.8vw, var(--t-41));
}
.faixa-caso__abertura {
  color: var(--sobre-marinho);
  font-size: clamp(var(--t-17), 1rem + 0.5vw, var(--t-21));
}
.faixa-caso__sigilo {
  margin: 40px 0 0;
  color: var(--sobre-marinho-2);
  font-size: var(--t-15);
}
.faixa-caso .acoes { margin-top: 20px; gap: 16px 28px; }

.escada {
  --s: 56px;  /* quanto cada passo sobe */
  --m: 40px;  /* tamanho da marca */
  --g: 48px;  /* espaço entre colunas */
  display: grid;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.escada__passo {
  position: relative;
  display: grid;
  grid-template-columns: var(--m) minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}
.escada__marca {
  position: relative;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: var(--m);
  height: var(--m);
  border: 1.5px solid var(--celeste);
  border-radius: 2px;
  color: var(--branco);
  font-family: var(--f-titulo);
  font-size: var(--t-17);
  font-weight: 700;
  line-height: 1;
}
.escada__passo:last-child .escada__marca {
  border-color: var(--celeste-escuro);
  background: var(--celeste-escuro);
  color: var(--branco);
}

/* Celular e tablet: as marcas ficam ligadas por um filete vertical, e a do resultado sai em 45 graus,
   com a ponta da seta. É a mesma trajetória do desktop, em coluna. */
@media (max-width: 959px) {
  .escada__passo:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--m) / 2 - 0.75px);
    top: var(--m);
    bottom: -32px;
    width: 1.5px;
    background: var(--celeste);
  }
  .escada__passo:last-child .escada__marca::after {
    content: "";
    position: absolute;
    top: -0.75px;
    left: 100%;
    width: 24px;
    height: 1.5px;
    background: var(--celeste);
    transform-origin: 0 50%;
    transform: rotate(-45deg);
  }
  .escada__passo:last-child .escada__marca::before {
    content: "";
    position: absolute;
    top: -17.75px;
    left: calc(100% + 17px - 9px + 0.75px);
    width: 9px;
    height: 9px;
    border-top: 1.5px solid var(--celeste);
    border-right: 1.5px solid var(--celeste);
  }
}
.escada__titulo { margin: 8px 0 8px; font-size: var(--t-21); }
.escada__passo p { color: var(--sobre-marinho); }
.escada__passo strong { color: var(--branco); }

@media (min-width: 960px) {
  .escada {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--g);
  }
  .escada__passo { display: block; }
  .escada__passo:nth-child(1) { margin-top: calc(var(--s) * 2); }
  .escada__passo:nth-child(2) { margin-top: var(--s); }
  .escada__titulo { margin-top: 22px; }

  /* trecho reto até perto da próxima coluna, depois 45 graus até a próxima marca */
  .escada__passo:not(:last-child)::before,
  .escada__passo:not(:last-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--m) / 2 - 0.75px);
    height: 1.5px;
    background: var(--celeste);
  }
  .escada__passo:not(:last-child)::before {
    left: var(--m);
    width: calc(100% + var(--g) - var(--s) - var(--m));
  }
  .escada__passo:not(:last-child)::after {
    left: calc(100% + var(--g) - var(--s));
    width: calc(var(--s) * 1.41421);
    transform-origin: 0 50%;
    transform: rotate(-45deg);
  }
  /* a linha entra pela esquerda da faixa */
  .escada__passo:first-child .escada__marca::before {
    content: "";
    position: absolute;
    top: calc(50% - 0.75px);
    right: 100%;
    width: 100vw;
    height: 1.5px;
    background: var(--celeste);
    opacity: 0.55;
  }
  /* e sai pela ponta da seta, depois do resultado */
  .escada__passo:last-child .escada__marca::after {
    content: "";
    position: absolute;
    top: -0.75px;
    left: 100%;
    width: calc(var(--s) * 1.41421);
    height: 1.5px;
    background: var(--celeste);
    transform-origin: 0 50%;
    transform: rotate(-45deg);
  }
  .escada__passo:last-child .escada__marca::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--s) - 0.75px);
    left: calc(100% + var(--s) - 16px + 0.75px);
    width: 16px;
    height: 16px;
    border-top: 1.5px solid var(--celeste);
    border-right: 1.5px solid var(--celeste);
  }
}

/* ---------- Páginas internas ---------- */

.topo-pagina {
  position: relative;
  overflow: hidden;
  padding: calc(var(--cabecalho) + 40px) 0 clamp(56px, 7vw, 88px);
  background: var(--marinho);
  color: var(--branco);
}
.topo-pagina__conteudo { position: relative; z-index: 1; }
.topo-pagina__anel {
  position: absolute;
  z-index: 0;
  top: 40px;
  right: -90px;
  width: 260px;
  height: 260px;
  color: var(--celeste);
  opacity: 0.12;
  pointer-events: none;
}
@media (min-width: 1040px) {
  .topo-pagina__anel { top: 50%; right: -120px; width: 480px; height: 480px; transform: translateY(-42%); }
  /* Com figura à direita (.topo-pagina--figura), o anel sobe e apaga mais, para não aparecer em pedaços em volta do quadro */
  .topo-pagina--figura .topo-pagina__anel { top: 0; transform: translateY(-26%); opacity: 0.08; }
  /* No /caso, o anel fica no alto, menor, longe da escada e da seta fina do resultado */
  .topo-pagina--caso .topo-pagina__anel { top: 24px; right: -140px; width: 360px; height: 360px; transform: none; }
}
.topo-pagina__titulo {
  max-width: 18em;
  font-size: clamp(var(--t-33), 1.3rem + 2.2vw, var(--t-52));
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.topo-pagina__lead {
  max-width: 38em;
  margin-top: 20px;
  color: var(--sobre-marinho);
  font-size: clamp(var(--t-17), 1rem + 0.35vw, 1.1875rem);
}
.topo-pagina .acoes { margin-top: 28px; }
.topo-pagina__nota {
  margin-top: 18px;
  color: var(--sobre-marinho-2);
  font-size: var(--t-15);
}
.topo-pagina__nota a { color: var(--branco); }

.trilha { margin: -10px 0 12px; font-size: var(--t-15); }
.trilha ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.trilha li { display: inline-flex; align-items: center; gap: 10px; }
.trilha li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--sobre-marinho-2);
  border-right: 1.5px solid var(--sobre-marinho-2);
  transform: rotate(45deg);
}
.trilha a { display: inline-block; padding-block: 10px; color: var(--branco); }
.trilha [aria-current] { color: var(--sobre-marinho-2); }

/* Bloco de leitura: alinhado à esquerda, linhas de no máximo 44rem (pode ir junto com .container) */
.texto > * { max-width: 44rem; }
.texto > :first-child { margin-top: 0; }
.texto h2 {
  margin: 64px 0 16px;
  font-size: clamp(var(--t-26), 1.2rem + 1.3vw, var(--t-33));
  font-weight: 800;
}
.texto h3 { margin: 36px 0 8px; font-size: var(--t-21); }
.texto h2 + h3 { margin-top: 20px; }
.texto ul,
.texto ol { margin: 0 0 1.2em; padding-left: 1.25em; }
.texto li + li { margin-top: 0.45em; }
.texto ul li::marker { color: var(--royal); }
.texto ol li::marker { color: var(--royal); font-family: var(--f-titulo); font-weight: 700; }

.ressalva {
  max-width: 44rem;
  margin: 0 0 32px;
  padding: 24px 28px;
  border-left: 3px solid var(--celeste);
  border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--branco);
}
.ressalva h2 { margin-top: 0 !important; font-size: var(--t-26) !important; }

.lista-passos {
  display: grid;
  gap: 28px;
  margin: 24px 0 32px !important;
  padding: 0 !important;
  list-style: none;
}
.lista-passos > li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: 18px;
  margin: 0 !important;
}
.lista-passos h3 { margin: 7px 0 6px; font-size: var(--t-21); }

.etiqueta {
  display: inline-block;
  margin-left: 2px;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: var(--t-15);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.etiqueta--ja { background: var(--royal-claro); color: var(--royal-escuro); }
.etiqueta--pode { border-color: var(--linha-forte); background: var(--branco); color: var(--nevoa); }

.ilustracao {
  max-width: 34rem;
  margin: 24px 0 32px;
  padding: 20px;
  border: 1px solid var(--linha);
  border-radius: 10px;
  background: var(--branco);
}
.ilustracao__legenda {
  margin-bottom: 16px;
  color: var(--nevoa);
  font-size: var(--t-15);
  font-style: italic;
}
.balao {
  max-width: 86%;
  margin-bottom: 12px;
  padding: 10px 14px;
  border-radius: 10px 10px 10px 2px;
  background: var(--papel);
  font-size: var(--t-15);
  line-height: 1.5;
}
.balao--empresa {
  margin-left: auto;
  border-radius: 10px 10px 2px 10px;
  background: var(--royal-claro);
}
.balao p { margin: 0; }
.balao__autor { margin-bottom: 2px !important; font-weight: 700; }
.balao__hora { margin-left: 6px; color: var(--nevoa); font-weight: 400; }

.faq { max-width: 44rem; border-top: 1.5px solid var(--tinta); }
.faq__item { padding: 24px 0; border-bottom: 1px solid var(--linha); }
.faq__pergunta { margin: 0 0 8px !important; font-size: var(--t-21); }

.tabela-rolagem { max-width: 100%; margin: 24px 0 32px; overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t-15); }
.tabela th,
.tabela td {
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--linha);
  text-align: left;
  vertical-align: top;
}
.tabela th { font-family: var(--f-titulo); font-weight: 700; border-bottom: 1.5px solid var(--tinta); }

.bloco-caso {
  position: relative;
  overflow: hidden;
  max-width: 52rem;
  padding: clamp(28px, 4vw, 48px);
  padding-right: clamp(28px, 10vw, 140px);
  border-radius: 10px;
  background: var(--marinho);
  color: var(--branco);
}
.bloco-caso h2 { margin: 0 0 14px; font-size: var(--t-26); font-weight: 800; }
.bloco-caso p { color: var(--sobre-marinho); }
.bloco-caso strong { color: var(--branco); }
.bloco-caso__sigilo { color: var(--sobre-marinho-2) !important; font-size: var(--t-15); }
.bloco-caso::before,
.bloco-caso::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.bloco-caso::before {
  top: 34px;
  right: 30px;
  width: 92px;
  height: 1.5px;
  background: var(--celeste);
  transform-origin: 100% 50%;
  transform: rotate(-45deg);
}
.bloco-caso::after {
  top: 33.25px;
  right: 30px;
  width: 16px;
  height: 16px;
  border-top: 1.5px solid var(--celeste);
  border-right: 1.5px solid var(--celeste);
}

/* ---------- Páginas legais ---------- */

.legal { max-width: 46rem; }
.legal > p:first-child { margin-top: 0; }
.legal h2 {
  margin: 56px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  font-size: var(--t-21);
  font-weight: 800;
  letter-spacing: 0;
}
.legal h3 { margin: 28px 0 8px; font-size: var(--t-17); font-weight: 700; letter-spacing: 0; }
.legal ul { margin: 0 0 1.2em; padding-left: 1.25em; }
.legal li + li { margin-top: 0.45em; }
.legal ul li::marker { color: var(--royal); }
.legal__lista-simples { list-style: none; padding-left: 0 !important; }
.legal__destaque {
  margin: 0 0 1.2em;
  padding: 14px 18px;
  border-left: 3px solid var(--royal);
  border-radius: 0 var(--raio) var(--raio) 0;
  background: var(--branco);
  font-weight: 600;
}
.legal__fecho {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1.5px solid var(--tinta);
}
.legal__fecho p { margin-bottom: 0.3em; }
.legal__veja {
  margin-top: 48px;
  padding: 20px 24px;
  border-radius: var(--raio);
  background: var(--branco);
  border: 1px solid var(--linha);
}

/* ---------- Rodapé ---------- */

.rodape {
  padding: 56px 0 28px;
  border-top: 1px solid var(--linha);
  background: var(--papel);
  font-size: var(--t-15);
}
.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px 24px;
}
.rodape__empresa { grid-column: 1 / -1; }
.rodape .marca__icone { width: 40px; height: 40px; }
.rodape .marca__devup { font-size: 29px; }
.rodape .marca__sistemas { font-size: 8.75px; }
.rodape__dados { margin-top: 18px; line-height: 1.75; }
.rodape__titulo {
  margin-bottom: 10px;
  font-family: var(--f-titulo);
  font-size: var(--t-15);
  font-weight: 700;
}
.rodape ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rodape li a { display: inline-block; padding-block: 10px; } /* 44 px de área de toque */
.rodape__titulo + ul { margin-top: -10px; }
.rodape__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  margin-top: 44px;
  padding-top: 20px;
  color: var(--nevoa);
}
.rodape__base::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  border-top: 1px solid var(--linha);
}
.rodape__base p { margin: 0; }
@media (min-width: 720px) {
  .rodape__grade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .rodape__empresa { grid-column: auto; }
}

@media print {
  .cabecalho, .topo__arte, .topo-pagina__anel, .acoes { display: none; }
  .topo, .topo-pagina, .faixa-caso { background: none; color: #000; padding-top: 24px; }
}

/* ---------- 404 ---------- */
.topo-pagina--404 {
  min-height: min(78vh, 720px);
  display: flex;
  align-items: center;
  padding-bottom: 96px;
}
.topo-pagina--404 .topo-pagina__lead { font-size: var(--t-21); }

/* Índice das páginas legais. Vem antes do texto no HTML (teclado e leitor de tela chegam nele primeiro).
   No celular, fica em cima do texto; no desktop, numa coluna fixa ao lado. */
.legal-grade { display: block; }
.legal__indice {
  max-width: 46rem;
  margin: 0 0 40px;
  padding: 14px 20px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--branco);
  font-size: var(--t-15);
}
.legal__indice-titulo {
  margin-bottom: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
}
.legal__indice ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.legal__indice a { display: inline-block; padding-block: 10px; color: var(--tinta); text-decoration-color: var(--linha-forte); }
.legal__indice a:hover { color: var(--royal); text-decoration-color: var(--royal); }
@media (min-width: 1040px) {
  .legal-grade {
    display: grid;
    grid-template-columns: minmax(0, 46rem) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }
  .legal { grid-column: 1; grid-row: 1; }
  .legal__indice {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 24px;
    margin: 0;
    padding: 0 0 0 24px;
    border: 0;
    border-left: 1px solid var(--linha);
    border-radius: 0;
    background: none;
  }
  .legal__indice-titulo { margin-bottom: 4px; }
  .legal__indice a { padding-block: 5px; }
}

/* ---------- Páginas internas: figura do topo, itens em grade e blocos do fim ---------- */

/* Topo com figura: texto à esquerda; no desktop, a figura da página à direita.
   No celular e no tablet, a figura vem depois dos botões. */
.topo-pagina__grade { display: grid; gap: 40px; }
@media (min-width: 1040px) {
  .topo-pagina__grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
    column-gap: 64px;
    align-items: end;
  }
}

/* Quadro: figura discreta sobre o marinho, desenhada em HTML e CSS (sem foto e sem emoji).
   Cada página usa um miolo próprio, ligado ao assunto dela. */
.quadro {
  max-width: 400px;
  margin: 0;
  padding: 20px 22px 22px;
  border: 1px solid var(--marinho-linha);
  border-radius: 10px;
  background: var(--marinho-quadro);
  color: var(--sobre-marinho);
  font-size: var(--t-15);
  line-height: 1.5;
}
.quadro__legenda {
  margin: 0 0 14px;
  color: var(--sobre-marinho-2);
  font-style: italic;
}
.quadro__titulo {
  margin: 0;
  color: var(--branco);
  font-family: var(--f-titulo);
  font-size: var(--t-17);
  font-weight: 700;
  line-height: 1.3;
}
.quadro__sub { margin: 2px 0 12px; color: var(--sobre-marinho-2); }

.selo {
  flex: none;
  display: inline-block;
  padding: 0 8px;
  border: 1px solid var(--sobre-marinho-2);
  border-radius: 4px;
  color: var(--branco);
  line-height: 1.6;
  white-space: nowrap;
}
.selo--auto { border-color: var(--celeste-claro); }
.selo--ia,
.selo--feito {
  border-color: var(--celeste-claro);
  background: var(--celeste-claro);
  color: var(--marinho);
  font-weight: 700;
}

/* .fluxo: passos ligados por um filete, com a marca quadrada do site. O último é cheio, como no caso da home. */
.fluxo { margin: 0; padding: 0; list-style: none; }
.fluxo li {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0 6px 30px;
}
.fluxo li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 1.5px solid var(--celeste-claro);
  border-radius: 2px;
}
.fluxo li:last-child::before { background: var(--celeste-claro); }
.fluxo li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7.25px;
  top: calc(50% + 8px);
  width: 1.5px;
  height: calc(100% - 16px);
  background: var(--marinho-linha-forte);
}
/* passos já feitos: tique dentro da marca */
.fluxo--feito li::before {
  background: var(--celeste-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5.2' fill='none' stroke='%230A1E4F' stroke-width='1.9'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* .docs: documentos recebidos por cliente (cheio = recebido, vazio = falta) */
.docs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--marinho-linha);
}
.docs li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 6.2em;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--marinho-linha);
}
.docs__nome { color: var(--branco); }
.docs .selo { justify-self: end; }
.docs__marcas { display: flex; gap: 4px; }
.docs__marcas span {
  width: 12px;
  height: 15px;
  border: 1.5px solid var(--sobre-marinho-2);
  border-radius: 2px;
}
.docs__marcas .ok { border-color: var(--celeste-claro); background: var(--celeste-claro); }

/* .tela: um painel de sistema e um celular, só em formas */
.tela { position: relative; padding-bottom: 14px; }
.tela__janela {
  margin-right: 60px;
  overflow: hidden;
  border: 1px solid var(--marinho-linha-forte);
  border-radius: 8px;
  background: var(--marinho);
}
.tela__barra {
  display: flex;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--marinho-linha);
}
.tela__barra span { width: 7px; height: 7px; border-radius: 50%; background: var(--marinho-linha-forte); }
.tela__corpo { display: grid; grid-template-columns: 46px minmax(0, 1fr); min-height: 156px; }
.tela__menu {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 12px 9px;
  border-right: 1px solid var(--marinho-linha);
}
.tela__menu span { height: 6px; border-radius: 2px; background: var(--marinho-linha-forte); }
.tela__menu span:first-child { background: var(--celeste-claro); }
.tela__area { display: grid; align-content: start; gap: 12px; padding: 12px; }
.tela__cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tela__cartoes span { height: 28px; border: 1px solid var(--marinho-linha-forte); border-radius: 4px; }
.tela__barras {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 70px;
  border-bottom: 1px solid var(--marinho-linha-forte);
}
.tela__barras span { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: var(--celeste-claro); }
.tela__celular {
  position: absolute;
  right: 0;
  bottom: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  width: 86px;
  height: 156px;
  padding: 18px 10px;
  border: 1.5px solid var(--sobre-marinho-2);
  border-radius: 12px;
  background: var(--marinho-quadro);
}
.tela__celular span { height: 6px; border-radius: 2px; background: var(--marinho-linha-forte); }
.tela__celular .tela__campo { height: 20px; border: 1px solid var(--marinho-linha-forte); background: none; }
.tela__celular .tela__salvo {
  justify-self: start;
  width: 22px;
  height: 22px;
  margin-top: 4px;
  background: var(--celeste-claro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.3l2.4 2.4 4.8-5.2' fill='none' stroke='%230A1E4F' stroke-width='1.9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* .mapa: Marília no centro, a região em volta e outras cidades a distância */
.mapa { width: 100%; height: auto; }
.mapa__anel { fill: none; stroke: var(--marinho-linha-forte); stroke-width: 1.5; }
.mapa__anel--fora { stroke-dasharray: 3 5; }
.mapa__icone { color: var(--celeste-claro); }
.mapa__traco { fill: none; stroke: var(--celeste-claro); stroke-width: 1.5; stroke-dasharray: 4 4; }
.mapa__tela { fill: none; stroke: var(--sobre-marinho-2); stroke-width: 1.5; }
.mapa__texto { fill: var(--sobre-marinho); font-family: var(--f-texto); font-size: 15px; }
.mapa__texto--forte { fill: var(--branco); font-family: var(--f-titulo); font-size: 16px; font-weight: 700; }

/* No /caso, a escada da home vai dentro do topo */
.topo-pagina .escada { margin-top: clamp(48px, 6vw, 80px); }
.topo-pagina--caso .acoes { margin-top: clamp(40px, 5vw, 64px); }
.escada__passo ul { margin: 0; padding-left: 1.1em; color: var(--sobre-marinho); }
.escada__passo li + li { margin-top: 0.35em; }
.escada__passo li::marker { color: var(--celeste-claro); }

/* Itens em grade: título curto e texto, com filete em cima (como "O que fazemos" da home) */
.grade-itens {
  display: grid;
  column-gap: 48px;
  margin: 24px 0 40px;
  padding: 0;
  list-style: none;
  border-top: 1.5px solid var(--tinta);
}
.grade-itens > li { padding: 22px 0 24px; border-bottom: 1px solid var(--linha); }
.grade-itens h3 { margin: 0 0 6px; font-size: var(--t-21); }
.grade-itens p { margin: 0; }
.texto > .grade-itens { max-width: none; padding-left: 0; }
.texto .grade-itens > li { margin-top: 0; }
.texto .grade-itens h3 { margin: 0 0 6px; }
@media (min-width: 720px) {
  .grade-itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
  .grade-itens--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* No celular, a seta do Bloco A fica menor, ao lado do título, para não cortar o texto */
@media (max-width: 719px) {
  .bloco-caso::before { top: 30px; right: 24px; width: 46px; }
  .bloco-caso::after { top: 29.25px; right: 24px; width: 12px; height: 12px; }
}

/* Bloco A (caso) e Bloco B (BuildBot) na mesma seção: empilhados no celular, lado a lado no desktop */
.blocos-fim { display: grid; gap: 24px; }
@media (min-width: 1040px) {
  .blocos-fim { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .blocos-fim .bloco-caso { max-width: none; padding-right: clamp(28px, 7vw, 100px); }
  .blocos-fim .painel-buildbot--compacto { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; }
}

.painel-buildbot__titulo {
  margin: 0 0 12px;
  color: var(--bb-marfim);
  font-size: var(--t-26);
  font-weight: 800;
}
.painel-buildbot__texto a:not(.botao) {
  color: var(--bb-ouro-claro);
  text-decoration-color: var(--bb-ouro);
}

.veja { max-width: 44rem; margin-top: 32px; }

/* Nome que não pode quebrar no hífen (ex.: Marília-SP no título) */
.sem-quebra { white-space: nowrap; }

/* Dados da empresa (Marília) */
.dados-empresa { display: grid; gap: 12px; margin: 16px 0 0; }
.dados-empresa div { display: grid; gap: 2px; }
.dados-empresa dt { color: var(--nevoa); font-size: var(--t-15); font-weight: 600; }
.dados-empresa dd { margin: 0; }
@media (min-width: 720px) {
  .dados-empresa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px; }
}

/* Links e conversas das ilustrações: parecem link e anexo, mas não são clicáveis */
.balao__link { color: var(--royal-escuro); text-decoration: underline; text-underline-offset: 0.2em; }
.balao__anexo {
  display: inline-block;
  margin: 2px 0;
  padding: 2px 10px 2px 8px;
  border: 1px solid var(--linha-forte);
  border-radius: 4px;
  background: var(--branco);
  font-size: var(--t-15);
}