/* Tokens: docs/marca/tokens.json */
:root{
  --surface:#f4f7f7; --surface-raised:#ffffff; --line:#d5dfe1;
  --ink:#0f2a33; --ink-muted:#4f6670;
  --petroleo:#0f3440; --on-petroleo:#ffffff;
  --frio:#076f91; --on-frio:#ffffff; --frio-soft:#ddf1f8;
  --frio-brilho:#4fc3e8;
  --brasa:#d9731f;
  --radius-sm:2px; --radius-md:6px; --radius-lg:12px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
  --shadow-sm:0 1px 2px #0f2a3314, 0 2px 6px #0f2a3314;
  --focus-ring:0 0 0 2px #f4f7f7, 0 0 0 4px #076f91;
  --focus-ring-escuro:0 0 0 2px #0f3440, 0 0 0 4px #4fc3e8;
  --fonte-display:Archivo, "Arial Narrow", Arial, sans-serif;
  --fonte-texto:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --fonte-mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --erro:#a12a12; --erro-soft:#fbe9e5;
  --regua-cor:var(--frio-soft);
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{display:flex;flex-direction:column;min-height:100vh;margin:0;background:var(--surface);color:var(--ink);font:400 16px/24px var(--fonte-texto)}
main{flex:1}
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--frio)}
ul{margin:0;padding:0;list-style:none}
p{margin:0 0 var(--space-4)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* Tipografia */
.display,.titulo{font-family:var(--fonte-display);font-weight:700;font-stretch:112%}
.display{margin:var(--space-2) 0 var(--space-4);font-size:32px;line-height:38px;letter-spacing:-.01em}
.titulo{margin:0 0 var(--space-4);font-size:26px;line-height:32px}
.rotulo{margin:0 0 var(--space-2);font:600 12px/16px var(--fonte-texto);letter-spacing:.14em;text-transform:uppercase}
.subtitulo{margin:0 0 var(--space-3);font:600 18px/26px var(--fonte-texto)}
.legenda{font:500 13px/18px var(--fonte-texto);color:var(--ink-muted)}
.dado{font:500 14px/20px var(--fonte-mono)}

/* Estrutura */
.conteiner{width:100%;max-width:1120px;margin-inline:auto;padding-inline:var(--space-4)}
.secao{padding-block:var(--space-8)}
.grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6)}

/* Faixas */
.faixa-petroleo{position:relative;overflow:hidden;background:var(--petroleo);color:var(--on-petroleo);--regua-cor:var(--frio-brilho)}
.faixa-suave{position:relative;overflow:hidden;background:var(--frio-soft)}
.faixa-petroleo a:not(.botao){color:var(--on-petroleo)}
.faixa-petroleo .rotulo{color:var(--frio-brilho)}
.faixa-petroleo .legenda{color:var(--on-petroleo)}
.faixa-petroleo :focus-visible{box-shadow:var(--focus-ring-escuro)}

/* Botões */
.botao{display:inline-block;padding:var(--space-3) var(--space-4);border:2px solid var(--frio);border-radius:var(--radius-md);background:var(--frio);color:var(--on-frio);font:600 16px/24px var(--fonte-texto);text-decoration:none;cursor:pointer}
.botao:hover{border-color:var(--petroleo);background:var(--petroleo)}
.botao-secundario{background:transparent;color:var(--frio)}
.botao-secundario:hover{border-color:var(--frio);background:var(--frio-soft);color:var(--frio)}
.faixa-petroleo .botao{border-color:var(--on-petroleo);background:var(--on-petroleo);color:var(--petroleo)}
.faixa-petroleo .botao:hover{border-color:var(--frio-soft);background:var(--frio-soft)}
.faixa-petroleo .botao-secundario{background:transparent;color:var(--on-petroleo)}
.faixa-petroleo .botao-secundario:hover{border-color:var(--frio-brilho);background:transparent;color:var(--on-petroleo)}
.botoes{display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* Cartões */
.cartao{padding:var(--space-6);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);box-shadow:var(--shadow-sm)}
.cartao > :last-child{margin-bottom:0}
.cartao-icone{margin-bottom:var(--space-3)}

/* Ícones: traço em ink, um detalhe em frio */
.icone{flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icone .detalhe{stroke:var(--frio)}
.faixa-petroleo .icone .detalhe{stroke:var(--frio-brilho)}

/* Régua do termômetro: a cada 4 traços, um longo */
.regua,.com-regua::after{background:
  repeating-linear-gradient(to bottom,var(--regua-cor) 0 2px,transparent 2px 32px) left top/100% 100% no-repeat,
  repeating-linear-gradient(to bottom,var(--regua-cor) 0 2px,transparent 2px 8px) right top/50% 100% no-repeat}
.regua{display:block;width:32px;height:98px}
.com-regua{position:relative}
.com-regua::after{content:"";position:absolute;top:var(--space-6);right:0;width:32px;height:130px;pointer-events:none}

/* Um traço de brasa por seção, no máximo */
.traco-brasa::after{content:"";display:block;width:40px;height:3px;margin-top:var(--space-3);background:var(--brasa)}

/* Selo */
.selo{width:112px;min-width:96px;height:auto}
.faixa-selo{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-1) var(--space-3);margin:0;padding:var(--space-4);text-align:center}
.faixa-selo .rotulo{margin:0}
.faixa-selo-escura{border-top:1px solid #ffffff33}
.faixa-selo-clara{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface-raised);color:var(--petroleo)}

/* Lugar de foto enquanto não há fotos reais */
.bloco-foto{display:grid;place-items:center;min-height:240px;padding:var(--space-6);border-radius:var(--radius-md);background:var(--petroleo);color:var(--on-petroleo);--regua-cor:var(--frio-brilho)}
.bloco-foto .rotulo{margin:0}

/* Formulários */
.campo{margin-bottom:var(--space-4)}
.campo label{display:block;margin-bottom:var(--space-1);font-weight:500}
.campo input,.campo select,.campo textarea{width:100%;min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--ink-muted);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--ink);font:400 16px/24px var(--fonte-texto)}
.campo textarea{min-height:120px;resize:vertical}
.campo-ajuda{margin:var(--space-1) 0 0}
.campo-erro{margin:var(--space-1) 0 0;color:var(--erro);font:500 13px/18px var(--fonte-texto)}
.campo [aria-invalid="true"]{border-color:var(--erro)}
.aviso{margin-bottom:var(--space-4);padding:var(--space-3) var(--space-4);border-left:3px solid var(--frio);border-radius:var(--radius-sm);background:var(--frio-soft)}
.aviso-erro{border-left-color:var(--erro);background:var(--erro-soft)}

/* Conteúdo das páginas */
.hero{display:grid;gap:var(--space-6);align-items:center}
.hero .subtitulo{font-weight:400}
.selo-grande{width:160px}
.faixa-selo-area{padding-top:var(--space-6)}
.depois-grade{margin:var(--space-6) 0 0}
.grade-servicos{margin-top:var(--space-6)}
@media (min-width:760px){.grade-servicos{grid-template-columns:repeat(2,1fr)}}
.duas-colunas{display:grid;gap:var(--space-8)}
.formulario-coluna{max-width:720px}
.texto-longo{max-width:760px}
.texto-longo .titulo{margin-top:var(--space-8)}
.lista{margin-bottom:var(--space-4)}
.lista li{position:relative;padding-left:var(--space-6);margin-bottom:var(--space-2)}
.lista li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:2px;background:var(--frio)}
.faixa-petroleo .lista li::before{background:var(--frio-brilho)}
.lista-numerada{margin:0 0 var(--space-4);padding:0;list-style:none}
.lista-numerada li{display:flex;gap:var(--space-3)}
.lista-numerada .dado{padding-top:2px;color:var(--frio)}
.valores{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-6)}
.valor{display:flex;gap:var(--space-3)}
.valor img{flex:none;width:32px;height:32px}
.valor .subtitulo{margin-bottom:var(--space-1)}
.valor p{margin:0}
.contatos li{display:flex;align-items:flex-start;gap:var(--space-2);margin-bottom:var(--space-3)}
.campo-oculto{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.formulario-coluna form,.cartao form{margin-top:var(--space-4)}

/* Painel */
.painel-estreito{max-width:440px}
.painel-linha{flex-wrap:wrap}
.abas{display:flex;flex-wrap:wrap;gap:var(--space-1);order:3;flex-basis:100%}
.abas a{padding:var(--space-2) var(--space-3);color:var(--ink);text-decoration:none}
.abas a[aria-current="page"]{color:var(--frio);font-weight:600}
.botao-pequeno{padding:var(--space-1) var(--space-3);font-size:14px}
.botao-perigo{border-color:var(--erro);background:var(--erro)}
.botao-perigo:hover{border-color:var(--ink);background:var(--ink)}
.filtros{display:grid;gap:var(--space-3);align-items:end;margin-bottom:var(--space-4)}
.filtros .campo{margin:0}
.mensagem{margin-bottom:var(--space-4)}
.mensagem-texto{white-space:pre-line;overflow-wrap:anywhere}
.paginacao{display:flex;gap:var(--space-4);align-items:center;justify-content:center;margin-top:var(--space-6)}
.tabela-rolagem{overflow-x:auto;margin-bottom:var(--space-4)}
.tabela{width:100%;border-collapse:collapse;background:var(--surface-raised)}
.tabela th,.tabela td{padding:var(--space-2) var(--space-3);border:1px solid var(--line);text-align:left;white-space:nowrap}
.tabela th{font-weight:600}

/* Pular navegação */
.pular{position:absolute;left:var(--space-2);top:-64px;z-index:2;padding:var(--space-2) var(--space-3);background:var(--surface-raised)}
.pular:focus{top:var(--space-2)}

/* Cabeçalho */
.cabecalho{background:var(--surface-raised);border-bottom:1px solid var(--line)}
.cabecalho-linha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-3)}
.logo img{width:150px}
.cabecalho-acao{display:none}
.menu-botao{padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-md);background:none;color:var(--ink);font:600 16px/24px var(--fonte-texto);cursor:pointer}
.menu{display:none;flex-basis:100%}
.menu.aberto{display:block}
.menu a{display:block;padding:var(--space-2) var(--space-3);color:var(--ink);text-decoration:none}
.menu a:hover{color:var(--frio)}
.menu a[aria-current="page"]{color:var(--frio);font-weight:600}

/* Rodapé */
.rodape{padding-block:var(--space-8)}
.rodape .rotulo{margin-bottom:var(--space-3)}
.rodape p{margin-bottom:var(--space-2)}
.rodape-colunas{display:grid;gap:var(--space-6);margin-bottom:var(--space-6)}
.rodape-colunas img{width:170px;margin-bottom:var(--space-3)}
.rodape-contato{display:flex;align-items:flex-start;gap:var(--space-2)}
.rodape-contato .icone{margin-top:3px}

/* WhatsApp flutuante */
.whatsapp-flutuante{position:fixed;right:var(--space-4);bottom:var(--space-4);z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--frio);color:var(--on-frio);box-shadow:0 0 0 2px var(--on-frio),var(--shadow-sm)}
.whatsapp-flutuante:hover{background:var(--petroleo)}
.whatsapp-flutuante:focus-visible{border-radius:50%;box-shadow:0 0 0 2px var(--on-frio),0 0 0 4px var(--frio)}

@media (min-width:600px){
  .display{font-size:44px;line-height:48px}
}

@media (min-width:900px){
  .secao{padding-block:calc(var(--space-8) * 2)}
  .cabecalho-linha{flex-wrap:nowrap}
  .cabecalho-acao{display:inline-block}
  .menu-botao{display:none}
  .menu{display:block;flex-basis:auto}
  .menu ul{display:flex;gap:var(--space-1)}
  .rodape-colunas{grid-template-columns:repeat(3,1fr)}
  .hero{grid-template-columns:1fr auto;gap:var(--space-8)}
  .selo-grande{width:200px;margin-right:var(--space-8)}
  .duas-colunas{grid-template-columns:1fr 1fr}
  .abas{order:0;flex-basis:auto}
  .filtros{grid-template-columns:200px 1fr auto}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}