/* =====================================================================
   BR Cargo Logistica - site institucional v1.0
   Paleta: o AZUL e o LARANJA do logotipo da BR Cargo, medidos dentro do
   proprio arquivo do logo em 04/09/2026 - nao sao cores inventadas.
   ===================================================================== */

:root{
  --ink:#0D1316;
  --deep:#003388;
  --deep-2:#00266B;
  --amber:#E6860E;
  --amber-dim:#C06F0B;
  --paper:#F4F5F2;
  --white:#FFFFFF;
  --muted:#63706D;
  --line:#DDE1DC;
  --line-2:#C3C9C3;
  --sand:#EDEFE9;
  --ok:#1F6B4D;
  /* Arial e Verdana, que todo micro ja tem. Ate a v3.12 o site
     carregava Archivo, Source Serif e IBM Plex Mono do Google. Trio de
     agencia: fica com cara de modelo pronto, e ainda depende de um
     servidor de fora para o texto aparecer certo. */
  --disp:Arial,Helvetica,sans-serif;
  --serif:Arial,Helvetica,sans-serif;
  --mono:Verdana,Geneva,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--disp);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
h1,h2,h3,h4,h5{margin:0;letter-spacing:-.02em;font-weight:700}
p{margin:0 0 16px}

/* ---------- topo ----------
   Refeito em 04/09/2026 com a estetica do www.transportadorabr.com.br,
   que e do proprio Jose.
   O que veio de la, medido dentro dos arquivos originais:
     - o LOGOTIPO, recortado do Headline-com-74k_otimizado.jpg (780x187)
     - as cores : azul #003388 / #093C8B, laranja #E6860E, lilas #A8ADD5
     - a ONDA que separa o laranja do azul, cujo tracado foi lido ponto a
       ponto da imagem original (de y=95 em x=260 ate y=38 em x=780)
   O que NAO veio: a largura fixa de 780 px. Aquela faixa e de uma epoca
   sem celular. Aqui ela e um SVG que acompanha a largura da tela.
   ------------------------------------------------------------------ */
.topo{position:sticky;top:0;z-index:40;background:#FFFFFF}
.faixa-topo{position:relative;height:112px;overflow:hidden}
.faixa-topo>svg{position:absolute;top:0;left:0;width:100%;height:100%}
.topo-in{position:relative;max-width:1180px;margin:0 auto;height:100%;padding:0 22px;
         display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:block}
.marca img{height:76px;width:auto;display:block}
.topo-dir{text-align:right;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.topo-dir .cl{font-size:14px;margin-bottom:4px}
.fone-topo{font-family:var(--disp);font-size:26px;font-weight:700;line-height:1;color:#fff;white-space:nowrap}
nav.menu{background:var(--deep)}
.menu-in{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;flex-wrap:wrap}
nav.menu a{display:block;padding:12px 18px;color:#fff;font-size:14px;font-weight:600;
           border-right:1px solid rgba(255,255,255,.18)}
nav.menu a:hover{background:var(--deep-2)}
nav.menu a.on{background:#F0B000;color:#12181A}

.btn{display:inline-block;background:var(--amber);color:#fff;font-weight:700;font-size:13.5px;padding:11px 18px;border:0;cursor:pointer;font-family:var(--disp);text-align:center}
.btn:hover{background:var(--amber-dim)}
.btn.ghost{background:transparent;color:var(--deep);border:1.5px solid var(--line-2)}
.btn.ghost:hover{background:var(--sand)}
.btn.claro{background:transparent;color:#DCE7E4;border:1.5px solid rgba(234,240,238,.36)}
.btn.big{font-size:15px;padding:14px 26px}

/* ---------- estrutura ---------- */
.faixa{max-width:1180px;margin:0 auto;padding:60px 22px}
.faixa.fina{padding-top:42px;padding-bottom:42px}
.branca{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{font-size:13px;color:var(--amber-dim);font-weight:700;margin-bottom:10px}
.titulo{font-size:clamp(25px,3.2vw,36px);line-height:1.15}
.sub{font-size:16px;color:#3B4744;max-width:70ch;margin-top:12px}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--deep-2);color:#EAF0EE;overflow:hidden}
.hero-art{position:absolute;left:0;top:0;width:100%;height:100%}
.hero-in{position:relative;max-width:1180px;margin:0 auto;padding:70px 22px 62px;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
.hero h1{font-size:clamp(30px,4.3vw,52px);line-height:1.03;font-weight:800}
.hero .lede{font-size:17px;color:#CFD9E8;max-width:52ch;margin-top:16px}
.hero .eyebrow{color:#E2A05F}
.selos{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.selo{font-size:12px;border:1px solid rgba(255,255,255,.30);padding:5px 10px;color:#D6DEEC}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}

/* ---------- caixa de formulario ---------- */
.cx{background:var(--white);color:var(--ink);border-top:4px solid var(--amber);box-shadow:0 18px 44px rgba(0,0,0,.28);padding:24px}
.cx h2,.cx h3{font-size:17px;color:var(--ink);font-weight:700;margin-bottom:14px}
.campo{display:block;width:100%;font-family:var(--disp);font-size:14px;color:var(--ink);border:1px solid var(--line-2);background:#FCFDFC;padding:11px 12px;margin-bottom:10px}
.campo::placeholder{color:#98A29F}
.rot{display:block;font-size:13px;color:#41504D;margin-bottom:4px}
.dupla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cx .btn{width:100%;margin-top:6px}
.obs{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:11px;line-height:1.5}

/* ---------- numeros ---------- */
.numeros{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.numeros-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
.numeros-in div{padding:24px}
.numeros-in div+div{border-left:1px solid var(--line)}
.numeros b{display:block;font-size:26px;font-weight:800;color:var(--deep);letter-spacing:-.03em}
.numeros span{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* ---------- cards ---------- */
.grade{display:grid;gap:22px;margin-top:32px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--white);border:1px solid var(--line);padding:26px 24px}
.card svg{width:46px;height:46px;margin-bottom:14px}
.card h3,.card h4{font-size:18px;margin-bottom:8px}
.card p{font-size:15px;color:#3B4744;margin:0}
.card .mais{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--deep);border-bottom:1.5px solid var(--amber);padding-bottom:1px}

/* ---------- tabelas ---------- */
.tw{overflow-x:auto;border:1px solid var(--line);background:var(--white);margin-top:24px}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14.5px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;text-align:left;padding:12px 16px;background:var(--sand);border-bottom:1px solid var(--line-2)}
td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.n{font-family:var(--mono);white-space:nowrap;color:var(--deep)}

/* ---------- tabela de medidas dos volumes ---------- */
table.vol{min-width:0;width:100%;border-collapse:collapse;margin-top:4px}
table.vol th,table.vol td{border:1px solid var(--line-2);padding:5px 6px;font-size:12.5px;text-align:center;background:var(--white)}
table.vol th{background:var(--sand);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
table.vol input{border:1px solid var(--line);background:#FCFDFC;text-align:center;padding:5px;font-family:var(--disp);font-size:13px;width:100%}

/* ---------- tabela de totais da cotacao ----------
   O  table{min-width:520px}  la de cima e feito para as tabelas largas
   das paginas de seguro. Numa caixa de 265 px de um celular ele fazia
   esta tabela de duas colunas sair 520 px de largura : os valores
   ficavam FORA da tela. Corrigido em 03/09/2026, medido em 360, 375 e
   390 px.  min-width:0  desfaz a regra geral e  table-layout:fixed
   obriga a tabela a caber na caixa, quebrando o rotulo em duas linhas
   quando precisa. -------------------------------------------------- */
table.tot{min-width:0;width:100%;table-layout:fixed;border-collapse:collapse;
          margin-top:8px;font-size:14px}
table.tot td{padding:6px 0;border-bottom:1px solid var(--line);vertical-align:top;
             word-wrap:break-word}
table.tot td+td{width:34%;text-align:right;white-space:nowrap;padding-left:8px}
table.tot tr:last-child td{border-bottom:0}
/* variante  tot esq  : rotulo a esquerda e valor tambem a esquerda,
   usada no bloco de contato da home. O e-mail pode ser longo, entao
   ele quebra dentro da propria celula em vez de empurrar a pagina. */
table.tot.esq td:first-child{width:38%}
table.tot.esq td+td{width:auto;text-align:left;white-space:normal;
                    word-break:break-word;padding-left:8px}

/* ---------- texto editorial ---------- */
.texto{font-size:16px;color:#26312F;max-width:70ch}
.texto p{margin-bottom:18px}
.destaque{border-left:3px solid var(--amber);padding:4px 0 4px 20px;font-family:var(--serif);font-size:20px;color:var(--deep);margin:26px 0}
.duas{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line-2);margin-top:26px}
.faq details{border-bottom:1px solid var(--line);padding:16px 2px}
.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--amber);font-weight:700;margin-right:11px}
.faq details[open] summary:before{content:"\2013"}
.faq p{font-family:var(--serif);font-size:15.5px;color:#3B4744;margin:12px 0 0 24px}

/* ---------- linha do tempo ---------- */
.trilha{display:flex;flex-wrap:wrap;border:1px solid var(--line);background:var(--white);margin-top:24px}
.passo{flex:1 1 160px;padding:20px 18px;border-right:1px solid var(--line)}
.passo:last-child{border-right:0}
.passo .bola{width:12px;height:12px;border-radius:50%;background:var(--line-2);margin-bottom:12px}
.passo.feito .bola{background:var(--amber)}
.passo b{display:block;font-size:14.5px;margin-bottom:3px}
.passo span{font-family:var(--mono);font-size:11px;color:var(--muted);display:block;line-height:1.5}
.passo.feito b{color:var(--ink)}
.passo b,.passo.pendente b{color:#8A948F}
.passo.feito b{color:var(--ink)}

/* ---------- avisos ---------- */
.aviso{border-left:3px solid var(--amber);background:var(--white);padding:15px 18px;margin-top:22px;font-size:15px;color:#3B4744}
.erro{border:1px solid var(--amber-dim);background:#FBF1E6;padding:15px 18px;margin-top:22px;font-size:15px;color:#7A420A}

/* ---------- cta ---------- */
.cta{background:var(--deep);color:#DCE7E4}
.cta-in{max-width:1180px;margin:0 auto;padding:48px 22px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2,.cta h3{font-size:26px;color:#fff}
.cta p{font-family:var(--serif);color:#A9C0BC;margin:8px 0 0;max-width:48ch}

/* ---------- rodape ---------- */
.rodape{background:var(--ink);color:#93A09D;padding:44px 22px 28px;font-size:13.5px}
.rodape-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.rodape h5{font-size:12px;color:#8C9A97;font-weight:700;margin:0 0 12px}
.rodape a{display:block;color:#B8C4C1;margin-bottom:7px}
.rodape a:hover{color:var(--amber)}
.rodape .marca{font-weight:800;font-size:20px;letter-spacing:-.02em}
.rodape .marca .a{color:var(--amber)}
.rodape .marca .b{color:#93A09D}
.legal{max-width:1180px;margin:32px auto 0;padding-top:18px;border-top:1px solid #1E2A2D;font-family:var(--mono);font-size:11px;color:#67746F;display:flex;gap:10px 26px;flex-wrap:wrap;justify-content:space-between}

@media (max-width:940px){
  .hero-in{grid-template-columns:1fr;gap:32px;padding:56px 22px 62px}
  .g3{grid-template-columns:1fr 1fr}
  .duas{grid-template-columns:1fr;gap:26px}
  .numeros-in{grid-template-columns:1fr 1fr}
  .numeros-in div:nth-child(3){border-left:0}
  .rodape-in{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .faixa-topo{height:88px}
  .marca img{height:56px}
  .topo-dir .cl{display:none}
  .fone-topo{font-size:18px}
  nav.menu a{padding:10px 12px;font-size:13px}
}
@media (max-width:420px){
  .faixa-topo{height:76px}
  .marca img{height:46px}
  .fone-topo{font-size:15px}
  nav.menu a{padding:9px 10px;font-size:12.5px}
}
@media (max-width:660px){
  .topo-in{padding:0 16px}
  .g3,.g2,.dupla{grid-template-columns:1fr}
  .faixa{padding:42px 18px}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* a razao social que aparece embaixo do CNPJ, vinda da Receita */
.razao      { min-height:18px; margin-top:5px; font-size:13px; line-height:1.45 }
.rz_sim     { font-weight:700 }
.rz_nao     { color:#5C6866 }
.rz_esp     { color:#5C6866; font-style:italic }