/* =============================================================================
   Base do site
   Meio Norte Express

   Substitui styles.css + styles-enhanced.css + styles-services-enhanced.css,
   que somavam ~250 KB e 108 !important acumulados em camadas de correção.
   Consome exclusivamente os tokens de tokens.css.
   ============================================================================= */

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: 88px;   /* o cabeçalho é fixo; âncora não fica embaixo dele */
}

body {
    margin: 0;
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--lh-corpo);
    color: var(--gray-700);
    background: var(--white-color);
    -webkit-font-smoothing: antialiased;
}

img, picture, video, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    margin: 0 0 var(--space-4);
    color: var(--gray-900);
    font-weight: var(--peso-titulo);
    text-wrap: balance;
}
h1 { font-size: var(--font-size-4xl); line-height: var(--lh-titulo); letter-spacing: -.02em; }
h2 { font-size: var(--font-size-3xl); line-height: var(--lh-titulo); letter-spacing: -.015em; }
h3 { font-size: var(--font-size-xl);  line-height: var(--lh-sub); }
h4 { font-size: var(--font-size-lg);  line-height: var(--lh-sub); font-weight: var(--peso-enfase); }

p { margin: 0 0 var(--space-4); max-width: var(--medida-leitura); }

a { color: var(--primary-color); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--primary-dark); text-decoration: underline; }

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li { margin-bottom: var(--space-2); }

/* --- Acessibilidade ------------------------------------------------------- */

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.pular {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--primary-dark); color: #fff;
    padding: var(--space-3) var(--space-5);
    border-radius: 0 0 var(--radius-md) 0;
}
.pular:focus { left: 0; }

:focus-visible {
    outline: 3px solid var(--primary-light);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* --- Estrutura ------------------------------------------------------------ */

.container {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.secao { padding: var(--gap-secao) 0; }
.secao--clara  { background: var(--gray-50); }

/* O petróleo chapado deixava a faixa escura sem profundidade — um retângulo
   de tinta única atrás do conteúdo. O halo é um brilho radial de baixa
   opacidade no canto superior direito, do laranja da marca: ele dá direção
   de luz à superfície sem virar cor de fundo. */
.secao--escura {
    background: var(--primary-dark);
    background-image: radial-gradient(120% 90% at 88% 0%, rgba(245, 162, 4, .13) 0%, transparent 58%);
    color: var(--gray-200);
}
.secao--escura h2, .secao--escura h3 { color: #fff; }
.secao--escura p  { color: var(--gray-200); }
.secao--escura a  { color: #fff; }

.secao__cabecalho { max-width: 62ch; margin-bottom: var(--gap-bloco); }
.secao--centrada .secao__cabecalho { margin-inline: auto; text-align: center; }

.eyebrow {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--peso-enfase);
    letter-spacing: .12em;
    text-transform: uppercase;
    line-height: var(--lh-rotulo);
    color: var(--primary-color);
    margin-bottom: var(--space-3);
}
.secao--escura .eyebrow { color: var(--marca-laranja); }

.subtitulo { font-size: var(--font-size-lg); color: var(--gray-600); }
.secao--escura .subtitulo { color: var(--gray-300); }

/* --- Botões --------------------------------------------------------------- */

/* `appearance: none` em TODO botão com estilo próprio.

   Sem isso o <button> continua sendo um widget nativo do sistema: o
   navegador desenha a caixa dele e descarta o `background` do autor. Medido
   num chip de filtro, a regra vencia a cascata e a cor não chegava à tela —
   e a mesma armadilha pegaria qualquer botão futuro. */
button, .botao {
    appearance: none;
    -webkit-appearance: none;
}

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 14px 26px;
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--peso-enfase);
    line-height: var(--lh-rotulo);
    text-align: center;
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), transform var(--transition-fast);
}
.botao:hover { text-decoration: none; transform: translateY(-1px); }

/* Petróleo, e não a menta: branco sobre #57c5b6 dá 2,09:1 — reprova na
   WCAG AA. Sobre #1a5f7a dá 7,09:1. */
.botao--primario { background: var(--primary-color); color: #fff; }
.botao--primario:hover { background: var(--primary-dark); color: #fff; }

.botao--secundario {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.botao--secundario:hover { background: var(--primary-color); color: #fff; }

.botao--claro { background: #fff; color: var(--primary-dark); }
.botao--claro:hover { background: var(--gray-100); color: var(--primary-dark); }

.botao--fantasma {
    background: transparent; color: #fff; border-color: rgba(255,255,255,.6);
}
.botao--fantasma:hover { background: rgba(255,255,255,.14); color: #fff; }

.botao--grande { padding: 17px 34px; font-size: var(--font-size-lg); }
.botao--bloco  { width: 100%; }
/* Para botões de apoio dentro de modal e cartão, onde a caixa cheia domina
   o bloco e rouba a atenção do que ali é a ação principal. */
.botao--pequeno { padding: 9px 16px; font-size: var(--font-size-sm); border-width: 1px; }

.acoes { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* --- Cabeçalho ------------------------------------------------------------ */

.cabecalho {
    position: sticky; top: 0; z-index: var(--z-fixed);
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gray-200);
}

.cabecalho__interno {
    max-width: 1160px;
    margin: 0 auto;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/* A logomarca é o único portador do nome: ela já o contém desenhado. Por
   isso ela é grande, e não há texto ao lado disputando a mesma informação. */
.marca {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    flex: 0 0 auto;
}
.marca:hover { text-decoration: none; }

/* 104px é o tamanho EM QUE OS ARQUIVOS FORAM GERADOS (marca-104/208/312).
   Qualquer outro número aqui volta a fazer o navegador reescalar o bitmap,
   que era a causa da marca borrada. */
.marca__simbolo {
    width: 104px; height: 104px;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-base);
    /* Impede que o navegador "suavize" ainda mais um bitmap que já está no
       tamanho certo. */
    image-rendering: -webkit-optimize-contrast;
}
.marca:hover .marca__simbolo { transform: scale(1.04); }

.marca--rodape .marca__simbolo { width: 112px; height: 112px; }

/* Em telas estreitas a marca desce para 78px. Aqui há reescalonamento, mas
   para BAIXO e a partir do 208 do 2x — redução mantém a nitidez, ampliação
   não. */
@media (max-width: 940px) {
    .marca__simbolo,
    .marca--rodape .marca__simbolo { width: 78px; height: 78px; }
}

.menu { margin-left: auto; display: flex; align-items: center; gap: var(--space-6); }
.menu ul { display: flex; gap: var(--space-5); list-style: none; margin: 0; padding: 0; }
.menu li { margin: 0; }
.menu a {
    font-size: var(--font-size-sm);
    font-weight: var(--peso-enfase);
    color: var(--gray-700);
    padding: var(--space-2) 0;
    border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--primary-color); text-decoration: none; border-bottom-color: var(--accent-color); }
.menu a[aria-current="page"] { color: var(--primary-color); border-bottom-color: var(--primary-color); }
/* As laterais estreitas faziam o CTA parecer apertado ao lado dos itens de
   menu, que não têm caixa. 28px dá respiro sem competir com o hero. */
.menu__cta { padding: 12px 28px; font-size: var(--font-size-sm); white-space: nowrap; }

/* --- Avatar --------------------------------------------------------------
   Usado no botão do cabeçalho, no painel e no modal de dados. Sem foto,
   mostra as iniciais — que identificam a pessoa melhor do que a silhueta
   genérica, e nunca aparecem quebradas como um <img> sem arquivo. */

.avatar {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--marca-laranja-veu, rgba(255,255,255,.22));
    color: currentColor;
    font-weight: var(--peso-titulo);
    line-height: 1;
    user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar__iniciais { font-size: .78em; letter-spacing: .02em; }

.avatar--pequeno { width: 32px; height: 32px; }
.avatar--medio   { width: 56px; height: 56px; font-size: 1.25rem; }
.avatar--grande  { width: 96px; height: 96px; font-size: 2rem; }

/* No botão do cabeçalho o avatar encosta na borda esquerda: o padding do
   botão é generoso e sobrava um vão que fazia a foto parecer solta. */
.menu__cta--painel {
    display: inline-flex; align-items: center; gap: var(--space-3);
    padding-left: 8px;
}
.menu__cta--painel .avatar {
    background: rgba(255, 255, 255, .24);
    border: 1px solid rgba(255, 255, 255, .38);
}

.menu-botao {
    display: none;
    margin-left: auto;
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    cursor: pointer;
    position: relative;
}
.menu-botao__traco,
.menu-botao__traco::before,
.menu-botao__traco::after {
    position: absolute; left: 12px;
    width: 20px; height: 2px;
    background: var(--gray-800);
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.menu-botao__traco { top: 21px; }
.menu-botao__traco::before { content: ''; top: -6px; left: 0; }
.menu-botao__traco::after  { content: ''; top:  6px; left: 0; }

.menu-botao[aria-expanded="true"] .menu-botao__traco { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__traco::before { transform: translateY(6px) rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__traco::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
    .menu-botao { display: block; }
    .menu {
        position: absolute; left: 0; right: 0; top: 100%;
        flex-direction: column; align-items: stretch;
        gap: 0;
        padding: var(--space-3) var(--space-5) var(--space-5);
        background: #fff;
        border-bottom: 1px solid var(--gray-200);
        box-shadow: var(--shadow-lg);
        display: none;
    }
    .menu.aberto { display: flex; }
    .menu ul { flex-direction: column; gap: 0; }
    .menu a {
        display: flex; align-items: center;
        min-height: 48px;
        border-bottom: 1px solid var(--gray-100);
        font-size: var(--font-size-base);
    }
    .menu a[aria-current="page"] { border-bottom-color: var(--gray-100); }
    .menu__cta { margin-top: var(--space-4); justify-content: center; }
}

/* --- Cartões -------------------------------------------------------------- */

.cartao {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
}
.cartao--destaque { border-left: 4px solid var(--primary-color); }

.grade {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grade--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

/* --- Selos de estado ------------------------------------------------------ */

.selo {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--peso-enfase);
    line-height: var(--lh-rotulo);
}
.selo--ok       { background: var(--success-light); color: var(--success-color); }
.selo--info     { background: var(--info-light);    color: var(--info-color); }
.selo--atencao  { background: var(--warning-light); color: var(--warning-color); }
.selo--critico  { background: var(--danger-light);  color: var(--danger-color); }
.selo--neutro   { background: var(--gray-100);      color: var(--gray-600); }

/* --- Formulários ---------------------------------------------------------- */

label { display: block; font-size: var(--font-size-sm); font-weight: var(--peso-enfase); margin-bottom: 6px; color: var(--gray-800); }

input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="password"], input[type="number"], input[type="date"], select, textarea {
    width: 100%;
    padding: 13px 15px;
    font-family: inherit;
    font-size: var(--font-size-base);
    color: var(--gray-900);
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(26, 95, 122, .14);
}
textarea { resize: vertical; min-height: 110px; }

.campo { margin-bottom: var(--space-4); }
.campo-invalido { border-color: var(--danger-color) !important; background: var(--danger-light); }
.erro-campo { display: block; margin-top: 5px; font-size: var(--font-size-xs); color: var(--danger-color); }
.ajuda-campo { display: block; margin-top: 5px; font-size: var(--font-size-xs); color: var(--gray-600); }

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

.rodape { background: var(--primary-dark); color: var(--gray-200); margin-top: var(--gap-secao); }

.rodape__interno {
    max-width: 1160px; margin: 0 auto;
    padding: var(--gap-bloco) var(--space-5) var(--space-8);
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: var(--space-8);
}

.rodape h2 { font-size: var(--font-size-xs); color: #fff; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--space-4); }

/* Faixa laranja no topo do rodapé: fecha a página com a cor da marca e marca
   a emenda entre o conteúdo e a assinatura. */
.rodape { border-top: 3px solid var(--marca-laranja); }
.rodape ul { list-style: none; padding: 0; margin: 0; }
.rodape li { margin-bottom: 6px; font-size: var(--font-size-xs); }
.rodape a { color: var(--gray-200); }
.rodape a:hover { color: #fff; }
.rodape p { font-size: var(--font-size-xs); color: var(--gray-300); line-height: var(--lh-apoio); }

.marca--rodape { margin-bottom: var(--space-4); }
.marca--rodape .marca__texto strong { color: #fff; }
.marca--rodape .marca__texto span   { color: var(--accent-color); }

.rodape__social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.rodape__social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,.1);
    font-size: 1.15rem; color: #fff;
}
/* Preenchimento laranja com o ícone quase-preto: 7,68:1. */
.rodape__social a:hover { background: var(--marca-laranja); color: var(--gray-900); }

.rodape__base {
    border-top: 1px solid rgba(255,255,255,.14);
    max-width: 1160px; margin: 0 auto;
    padding: var(--space-5);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); flex-wrap: wrap;
    font-size: var(--font-size-xs); color: var(--gray-300);
}
.rodape__legal { display: flex; gap: var(--space-5); }

@media (max-width: 900px) {
    .rodape__interno { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .rodape__interno { grid-template-columns: 1fr; gap: var(--space-6); }
    .rodape__base { flex-direction: column; text-align: center; }
}

/* --- WhatsApp flutuante --------------------------------------------------- */

.whatsapp-flutuante {
    position: fixed; right: 18px; bottom: 18px; z-index: var(--z-sticky);
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    border-radius: var(--radius-full);
    background: #128c4a;               /* escurecido: o #25d366 dá 1,98:1 com branco */
    color: #fff; font-size: 1.7rem;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-fast);
}
.whatsapp-flutuante:hover { transform: scale(1.06); color: #fff; }

/* --- Trilha --------------------------------------------------------------- */

.trilha { font-size: var(--font-size-xs); color: var(--gray-600); margin-bottom: var(--space-5); }
.trilha a { color: var(--gray-600); }
.trilha span[aria-hidden] { margin: 0 6px; opacity: .5; }

/* --- Alvos de toque ------------------------------------------------------- */

@media (pointer: coarse) {
    .menu a, .rodape a, .trilha a, .rodape__social a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =============================================================================
   Correções de especificidade

   Regra de contexto vence regra de componente quando tem mais peso. Três
   casos apareceram na medição, todos com o mesmo formato: o botão perdia a
   própria cor de texto para a cor de link do bloco onde estava.
   ============================================================================= */

/* `.menu a` (0-1-1) vencia `.botao--primario` (0-1-0): o CTA do menu ficava
   com texto cinza sobre o petróleo — 1,41:1. */
.menu .botao--primario,
.menu .botao--primario:hover {
    color: #fff;
    border-bottom-color: transparent;
}

/* `.secao--escura a` (0-2-0) vencia `.botao--claro` (0-1-0): botão branco
   com texto branco — 1,00:1. */
.secao--escura .botao--claro,
.secao--escura .botao--claro:hover { color: var(--primary-dark); }

.secao--escura .botao--fantasma,
.secao--escura .botao--fantasma:hover { color: #fff; }

/* O "EXPRESS" do lockup era #159895 sobre branco — 3,53:1, abaixo dos 4,5
   exigidos para texto pequeno. */
.marca__texto span { color: var(--secondary-forte); }

/* O hero pinta o fundo num filho posicionado (.hero__fundo). Sem uma cor
   sólida no próprio hero, o texto branco fica sobre o branco do body caso a
   imagem falhe — e a medição de contraste também lê branco sobre branco. */
.hero { background: var(--primary-dark); }

/* A marca do rodapé é maior: ali ela é a assinatura do documento. */
.marca--rodape { margin-bottom: var(--space-5); }
/* `.menu a` (0-1-1) vence `.menu__cta` (0-1-0) e o botão herdava o padding
   vertical dos itens de menu — laterais zeradas. Ancorar no contexto empata
   em 0-2-0 e o botão fica com a própria caixa. */
.menu .menu__cta {
    padding: 12px 28px;
    border-bottom: none;
}

/* Sem fundo branco: o quadro recortava a marca do rodapé escuro e criava um
   retângulo claro no meio da faixa. A marca tem fundo transparente. */
.marca--rodape .marca__simbolo {
    width: 104px; height: 104px;
    background: none;
    padding: 0;
}

/* =============================================================================
   Ritmo vertical mais apertado

   O espaçamento anterior somava altura sem acrescentar leitura: 5.318px de
   home para sete seções que já se distinguem por cor de fundo e fotografia.
   ============================================================================= */

.secao__cabecalho { margin-bottom: var(--space-6); }
.secao__cabecalho h2 { margin-bottom: var(--space-2); }
.secao__cabecalho .subtitulo { margin-bottom: 0; }

.eyebrow { margin-bottom: var(--space-2); }

h1, h2 { margin-bottom: var(--space-3); }
h3, h4 { margin-bottom: var(--space-2); }
p { margin-bottom: var(--space-3); }
p:last-child { margin-bottom: 0; }

.cartao { padding: var(--space-5); }

.rodape__interno {
    padding: var(--space-8) var(--space-5) var(--space-6);
    gap: var(--space-6);
}
.rodape h2 { margin-bottom: var(--space-3); }
.rodape__base { padding: var(--space-4) var(--space-5); }
.marca--rodape { margin-bottom: var(--space-3); }
.rodape__social { margin-top: var(--space-3); }
.rodape__social a { width: 36px; height: 36px; font-size: 1rem; }


/* =============================================================================
   FOTOGRAFIA DE FUNDO — tabela única

   As imagens estavam declaradas em home.css, presas a classes de seção
   (`.secao--foto-servicos`). A capa das páginas internas precisava das mesmas
   fotos e não tinha como alcançá-las sem repetir os seis blocos de
   `image-set()`.

   Agora a foto é um ATRIBUTO — `data-foto="servicos"` — e a mecânica (véu,
   cor do texto) é do componente que a hospeda. A mesma tabela serve seção e
   capa, e uma foto nova entra num lugar só.
   ============================================================================= */

[data-foto] { position: relative; isolation: isolate; }

[data-foto]::before {
    content: '';
    position: absolute; inset: 0; z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* O véu é o que torna o contraste previsível: sem ele o texto depende do
   trecho da foto que calhar atrás dele. */
[data-foto]::after {
    content: '';
    position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(15, 61, 82, .93) 0%, rgba(15, 61, 82, .88) 100%);
}

[data-foto="servicos"]::before {
    background-image: url('servicos.jpg');
    background-image: image-set(url('servicos.avif') type('image/avif'),
                                url('servicos.webp') type('image/webp'),
                                url('servicos.jpg')  type('image/jpeg'));
}
[data-foto="rastreamento"]::before {
    background-image: url('rastreamento.jpg');
    background-image: image-set(url('rastreamento.avif') type('image/avif'),
                                url('rastreamento.webp') type('image/webp'),
                                url('rastreamento.jpg')  type('image/jpeg'));
}
[data-foto="cliente"]::before {
    background-image: url('arecliente.jpg');
    background-image: image-set(url('arecliente.avif') type('image/avif'),
                                url('arecliente.webp') type('image/webp'),
                                url('arecliente.jpg')  type('image/jpeg'));
}
[data-foto="fachada"]::before {
    background-image: url('fachadamn.jpg');
    background-image: image-set(url('fachadamn.avif') type('image/avif'),
                                url('fachadamn.webp') type('image/webp'),
                                url('fachadamn.jpg')  type('image/jpeg'));
}
[data-foto="contato"]::before {
    background-image: url('contato.jpg');
    background-image: image-set(url('contato.avif') type('image/avif'),
                                url('contato.webp') type('image/webp'),
                                url('contato.jpg')  type('image/jpeg'));
}
/* Quadro do próprio vídeo institucional (10s): o caminhão com a marca contra
   o horizonte. É a imagem de "onde chegamos" — por isso assina rotas e
   cidades atendidas. */
[data-foto="rota"]::before {
    background-image: url('rota.jpg');
    background-image: image-set(url('rota.avif') type('image/avif'),
                                url('rota.webp') type('image/webp'),
                                url('rota.jpg')  type('image/jpeg'));
}

@media (max-width: 960px) {
    [data-foto="servicos"]::before {
        background-image: url('servicos-960.jpg');
        background-image: image-set(url('servicos-960.avif') type('image/avif'),
                                    url('servicos-960.webp') type('image/webp'),
                                    url('servicos-960.jpg')  type('image/jpeg'));
    }
    [data-foto="rastreamento"]::before {
        background-image: url('rastreamento-960.jpg');
        background-image: image-set(url('rastreamento-960.avif') type('image/avif'),
                                    url('rastreamento-960.webp') type('image/webp'),
                                    url('rastreamento-960.jpg')  type('image/jpeg'));
    }
    [data-foto="cliente"]::before {
        background-image: url('arecliente-960.jpg');
        background-image: image-set(url('arecliente-960.avif') type('image/avif'),
                                    url('arecliente-960.webp') type('image/webp'),
                                    url('arecliente-960.jpg')  type('image/jpeg'));
    }
    [data-foto="fachada"]::before {
        background-image: url('fachadamn-960.jpg');
        background-image: image-set(url('fachadamn-960.avif') type('image/avif'),
                                    url('fachadamn-960.webp') type('image/webp'),
                                    url('fachadamn-960.jpg')  type('image/jpeg'));
    }
    [data-foto="contato"]::before {
        background-image: url('contato-960.jpg');
        background-image: image-set(url('contato-960.avif') type('image/avif'),
                                    url('contato-960.webp') type('image/webp'),
                                    url('contato-960.jpg')  type('image/jpeg'));
    }
    [data-foto="rota"]::before {
        background-image: url('rota-960.jpg');
        background-image: image-set(url('rota-960.avif') type('image/avif'),
                                    url('rota-960.webp') type('image/webp'),
                                    url('rota-960.jpg')  type('image/jpeg'));
    }
}


/* =============================================================================
   CAPA das páginas internas

   Morava em conteudo.css, mas `/rastreamento` carrega home.css + rastreio.css
   e não aquele arquivo: a capa daquela página ficava SEM regra nenhuma —
   fundo branco herdado do body com `h1 { color: #fff }` pendurado na folha
   que não chegava. Como a capa é usada por sete páginas e o cabeçalho e o
   rodapé também vivem aqui, ela é estrutura, e estrutura mora na base.
   ============================================================================= */

.capa {
    background: var(--primary-dark);
    color: #fff;
    padding: var(--gap-bloco) 0 var(--gap-secao);
}
.capa h1 { color: #fff; }
.capa .trilha,
.capa .trilha a { color: rgba(255, 255, 255, .78); }

/* TODO LINK DENTRO DA CAPA, e não só o da trilha.
   ------------------------------------------------
   `a { color: var(--primary-color) }` é a regra global, e o petróleo é
   calibrado para fundo CLARO: sobre a capa escura ele dá 1,64:1 — medido
   nos links "consulta por protocolo" e "rastreamento por localizador" da
   área do cliente, que ficavam praticamente invisíveis.

   A regra anterior cobria só `.trilha a`, porque na época a capa não tinha
   texto corrido. Assim que passou a ter, o defeito apareceu. Cobrir a capa
   inteira fecha a classe de bug em vez do caso. */
.capa a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--marca-laranja);
}
.capa a:hover { color: var(--marca-laranja-claro); text-decoration-color: currentColor; }

/* A trilha é navegação, não texto corrido: sem sublinhado. */
.capa .trilha a { text-decoration: none; }
.capa .trilha a:hover { color: #fff; text-decoration: underline; }

/* Botão dentro da capa não é link de texto — a regra acima o sublinharia. */
.capa .botao { text-decoration: none; }
.capa .botao:hover { text-decoration: none; }
.capa__sub {
    font-size: var(--font-size-lg);
    color: rgba(255, 255, 255, .92);
    margin-bottom: 0;
}
.capa strong { color: #fff; }

/* O laranja da marca é o que acende a capa. O acento anterior era a menta,
   que sobre o petróleo lê como mais um tom da mesma família fria — a capa
   inteira ficava monocromática. */
.capa .eyebrow { color: var(--marca-laranja); }

/* Filete laranja no pé da capa: assina a divisão entre capa e conteúdo com a
   cor da marca, sem custar altura.

   Vai na borda do próprio elemento, e não num ::after: na variante com foto
   o ::after já é o véu (`inset: 0`), e uma borda ali empurraria a caixa do
   véu para fora da seção. */
.capa { border-bottom: 3px solid var(--marca-laranja); }

/* A capa com fotografia usa a mesma mecânica das seções; o véu é um pouco
   mais fechado porque aqui o texto é o título da página. */
.capa--foto::after {
    background: linear-gradient(170deg, rgba(15, 61, 82, .94) 0%, rgba(15, 61, 82, .86) 100%);
}
.capa--foto { background: var(--primary-dark); }