/* =========================================================
   AJ Engenharia - site comercial
   Identidade: azul petróleo + latão (mesma do portal e do app)
   Tipografia: Archivo (títulos) · IBM Plex Sans (texto) · IBM Plex Mono (rótulos)
   ========================================================= */

:root {
    --petroleo: #123A5A;
    --petroleo-escuro: #0B2438;
    --petroleo-medio: #1D4C71;
    --petroleo-claro: #E6EDF2;

    --latao: #C9972B;
    --latao-escuro: #A97C1D;
    --latao-texto: #8A6619;   /* latão com contraste AA sobre fundo claro */
    --latao-claro: #E9D6A7;

    --papel: #F4F2ED;
    --branco: #FFFFFF;
    --tinta: #1C2329;
    --cinza: #56626C;
    --cinza-claro: #8A949C;
    --linha: #DCDFE2;
    --linha-escura: #2E5373;

    --sucesso: #1F6B45;
    --erro: #A3271F;

    --fonte-titulo: "Archivo", "Arial Narrow", Arial, sans-serif;
    --fonte-texto: "IBM Plex Sans", "Segoe UI", Arial, sans-serif;
    --fonte-mono: "IBM Plex Mono", Consolas, monospace;

    --raio: 3px;
    --largura: 1180px;
    --topo: 72px;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topo) + 16px); }

body {
    margin: 0;
    font-family: var(--fonte-texto);
    font-size: 17px;
    line-height: 1.6;
    color: var(--tinta);
    background: var(--branco);
    padding-top: var(--topo);
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--petroleo); text-underline-offset: 3px; }
a:hover { color: var(--petroleo-medio); }

h1, h2, h3, h4 {
    font-family: var(--fonte-titulo);
    color: var(--petroleo-escuro);
    line-height: 1.12;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; }
h3 { font-size: 1.3rem; font-weight: 700; }
h4 { font-size: 1.05rem; font-weight: 700; }

p { margin: 0 0 1em; }

.container {
    width: 100%;
    max-width: var(--largura);
    margin: 0 auto;
    padding: 0 24px;
}

.rotulo {
    display: inline-block;
    font-family: var(--fonte-mono);
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--latao-texto);
    margin-bottom: 12px;
}

.secao { padding: 88px 0; }
.secao--papel { background: var(--papel); }
.secao--escura { background: var(--petroleo-escuro); color: #D6E0E8; }
.secao--escura h2, .secao--escura h3 { color: var(--branco); }
.secao--escura .rotulo { color: var(--latao-claro); }

.secao__topo { max-width: 760px; margin-bottom: 44px; }
.secao__topo p { color: var(--cinza); font-size: 1.08rem; }
.secao--escura .secao__topo p { color: #B9C8D4; }

.secao__topo--linha {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    max-width: none;
}

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

/* ---------- Botões ---------- */
.btn-aj {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--raio);
    border: 1.5px solid transparent;
    font-family: var(--fonte-texto);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
    white-space: nowrap;
}

.btn-aj svg { width: 18px; height: 18px; flex: none; }

.btn-aj--primario { background: var(--latao); color: var(--petroleo-escuro); }
.btn-aj--primario:hover { background: var(--latao-escuro); color: var(--branco); }

.btn-aj--escuro { background: var(--petroleo); color: var(--branco); }
.btn-aj--escuro:hover { background: var(--petroleo-escuro); color: var(--branco); }

.btn-aj--contorno { border-color: var(--petroleo); color: var(--petroleo); background: transparent; }
.btn-aj--contorno:hover { background: var(--petroleo); color: var(--branco); }

.btn-aj--claro { border-color: rgba(255,255,255,.55); color: var(--branco); background: transparent; }
.btn-aj--claro:hover { background: var(--branco); color: var(--petroleo-escuro); }

.btn-aj--pequeno { min-height: 40px; padding: 0 16px; font-size: .92rem; }

.link-seta {
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.link-seta::after { content: "→"; transition: transform .15s; }
.link-seta:hover::after { transform: translateX(3px); }

.botoes { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Topo / navegação ---------- */
.topo {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--topo);
    background: var(--petroleo-escuro);
    border-bottom: 1px solid var(--linha-escura);
    z-index: 100;
}

.topo .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.topo__marca img { height: 44px; width: auto; }

.topo__menu {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.topo__menu a {
    display: block;
    padding: 8px 12px;
    color: #C9D6E1;
    text-decoration: none;
    font-weight: 500;
    font-size: .97rem;
    border-bottom: 2px solid transparent;
}

.topo__menu a:hover { color: var(--branco); }
.topo__menu a[aria-current="page"] { color: var(--branco); border-bottom-color: var(--latao); }

.topo__menu .topo__pdf a { color: var(--latao-claro); }
.topo__menu .topo__pdf a:hover { color: var(--branco); }

.topo__menu .topo__cta a {
    margin-left: 8px;
    background: var(--latao);
    color: var(--petroleo-escuro);
    border-radius: var(--raio);
    font-weight: 600;
    padding: 9px 16px;
    border: 0;
}
.topo__menu .topo__cta a:hover { background: var(--latao-claro); }

.topo__abrir {
    display: none;
    background: none;
    border: 1px solid var(--linha-escura);
    color: var(--branco);
    border-radius: var(--raio);
    width: 44px;
    height: 44px;
    cursor: pointer;
}
.topo__abrir span, .topo__abrir span::before, .topo__abrir span::after {
    display: block; width: 18px; height: 2px; background: currentColor; margin: 0 auto; position: relative;
}
.topo__abrir span::before, .topo__abrir span::after { content: ""; position: absolute; left: 0; }
.topo__abrir span::before { top: -6px; }
.topo__abrir span::after { top: 6px; }

/* ---------- Abertura (home) ---------- */
.abertura {
    background: var(--petroleo-escuro);
    color: #C9D6E1;
    padding: 72px 0 0;
    overflow: hidden;
}

.abertura__grade {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
    gap: 56px;
    align-items: start;
}

.abertura h1 { color: var(--branco); margin-bottom: 20px; }
.abertura h1 em { font-style: normal; color: var(--latao-claro); }

.abertura__texto > p { font-size: 1.15rem; max-width: 600px; margin-bottom: 30px; }

.abertura__fatos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
    font-size: .95rem;
    color: #AFC0CE;
}
.abertura__fatos li::before { content: "■"; color: var(--latao); font-size: .55rem; margin-right: 8px; vertical-align: 3px; }

.abertura__foto {
    margin-top: 56px;
    height: 340px;
    background-size: cover;
    background-position: center;
    border-top: 3px solid var(--latao);
}

/* Caixa de download do portfólio */
.caixa-pdf {
    background: var(--branco);
    color: var(--tinta);
    border-top: 4px solid var(--latao);
    padding: 26px 26px 22px;
    border-radius: 0 0 var(--raio) var(--raio);
}

.caixa-pdf h2 { font-size: 1.35rem; margin-bottom: 6px; }
.caixa-pdf > p { color: var(--cinza); font-size: .95rem; margin-bottom: 16px; }

.caixa-pdf__lista { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--linha); }
.caixa-pdf__lista li { border-bottom: 1px solid var(--linha); }
.caixa-pdf__lista a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 2px;
    text-decoration: none;
    color: var(--tinta);
    font-size: .97rem;
}
.caixa-pdf__lista a:hover { color: var(--petroleo); background: var(--papel); }
.caixa-pdf__lista .tam { font-family: var(--fonte-mono); font-size: .75rem; color: var(--cinza-claro); }
.caixa-pdf__lista svg { width: 16px; height: 16px; color: var(--latao-texto); flex: none; }

.caixa-pdf .btn-aj { width: 100%; }

/* Faixa de serviços abaixo da abertura */
.faixa-servicos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    border-top: 1px solid var(--linha-escura);
    margin-top: 64px;
}
.faixa-servicos a {
    padding: 18px 16px 20px;
    border-right: 1px solid var(--linha-escura);
    color: var(--branco);
    text-decoration: none;
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.3;
}
.faixa-servicos a:first-child { border-left: 1px solid var(--linha-escura); }
.faixa-servicos a span { display: block; font-family: var(--fonte-mono); font-size: .72rem; color: var(--latao-claro); margin-bottom: 6px; }
.faixa-servicos a:hover { background: var(--petroleo); }

/* ---------- Topo das páginas internas ---------- */
.pagina-topo {
    background: var(--petroleo-escuro);
    color: #C9D6E1;
    padding: 64px 0 56px;
}
.pagina-topo h1 { color: var(--branco); max-width: 900px; }
.pagina-topo .rotulo { color: var(--latao-claro); }
.pagina-topo__lead { font-size: 1.15rem; max-width: 720px; margin-bottom: 0; }
.pagina-topo .botoes { margin-top: 28px; }

.trilha { font-size: .88rem; margin-bottom: 18px; color: #93A7B8; }
.trilha a { color: #C9D6E1; }

/* ---------- Lista de serviços (home) ---------- */
.servicos-lista { border-top: 1px solid var(--linha); }

.servico-linha {
    display: grid;
    grid-template-columns: 64px minmax(0, 1.1fr) minmax(0, 1.4fr) auto;
    gap: 24px;
    align-items: baseline;
    padding: 26px 0;
    border-bottom: 1px solid var(--linha);
}
.servico-linha__cod { font-family: var(--fonte-mono); color: var(--latao-texto); font-size: .9rem; }
.servico-linha h3 { margin: 0; font-size: 1.3rem; }
.servico-linha h3 a { color: inherit; text-decoration: none; }
.servico-linha h3 a:hover { color: var(--petroleo-medio); }
.servico-linha p { margin: 0; color: var(--cinza); }
.servico-linha__acoes { display: flex; gap: 18px; white-space: nowrap; font-size: .95rem; }
.servico-linha__acoes a { font-weight: 600; }

/* ---------- Cards de trabalho ---------- */
.grade-trabalhos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.trabalho {
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    overflow: hidden;
    text-decoration: none;
    color: var(--tinta);
    transition: border-color .15s;
}
.trabalho:hover { border-color: var(--petroleo); color: var(--tinta); }

.trabalho__foto {
    aspect-ratio: 4 / 3;
    background: var(--petroleo-claro);
    overflow: hidden;
}
.trabalho__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.trabalho:hover .trabalho__foto img { transform: scale(1.03); }

.trabalho__sem-foto {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--fonte-mono); font-size: .8rem; color: var(--cinza);
    background: repeating-linear-gradient(135deg, var(--petroleo-claro) 0 12px, #DCE5EC 12px 13px);
}

.trabalho__corpo { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.trabalho__servico { font-family: var(--fonte-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--latao-texto); margin-bottom: 8px; }
.trabalho h3 { font-size: 1.15rem; margin-bottom: 8px; }
.trabalho p { color: var(--cinza); font-size: .95rem; margin-bottom: 14px; }
.trabalho__meta { margin-top: auto; font-size: .85rem; color: var(--cinza-claro); }

.etiqueta {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 2px;
    background: var(--petroleo-claro);
    color: var(--petroleo);
    margin-left: 6px;
    vertical-align: 2px;
}

.vazio {
    border: 1px dashed var(--linha);
    padding: 40px 28px;
    text-align: center;
    color: var(--cinza);
    background: var(--branco);
}
.vazio h3 { color: var(--tinta); }

/* ---------- Processo ---------- */
.passos {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    counter-reset: passo;
    list-style: none;
    margin: 0;
    padding: 0;
}
.passos li {
    border-top: 2px solid var(--latao);
    padding: 22px 26px 0 0;
}
.passos li::before {
    counter-increment: passo;
    content: "0" counter(passo);
    font-family: var(--fonte-mono);
    font-size: .85rem;
    color: var(--latao-claro);
    display: block;
    margin-bottom: 10px;
}
.secao:not(.secao--escura) .passos li::before { color: var(--latao-texto); }
.passos h3 { font-size: 1.15rem; }
.passos p { font-size: .97rem; margin: 0; }

/* ---------- Bloco "para orçar" ---------- */
.orcar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}
.lista-traco { list-style: none; padding: 0; margin: 0 0 24px; }
.lista-traco li { padding: 9px 0 9px 26px; border-bottom: 1px solid var(--linha); position: relative; }
.lista-traco li::before { content: "—"; position: absolute; left: 0; color: var(--latao-texto); }

.chamada-final {
    background: var(--petroleo);
    color: #D6E0E8;
    padding: 36px;
    border-radius: var(--raio);
}
.chamada-final h2 { color: var(--branco); font-size: 1.7rem; }
.chamada-final p { margin-bottom: 22px; }
.chamada-final small { display: block; margin-top: 16px; color: #A9BBCB; }

/* ---------- Página de serviços ---------- */
.servicos-pagina {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

.indice {
    position: sticky;
    top: calc(var(--topo) + 28px);
    border-left: 1px solid var(--linha);
}
.indice ol { list-style: none; margin: 0; padding: 0; }
.indice a {
    display: block;
    padding: 8px 0 8px 16px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--cinza);
    text-decoration: none;
    font-size: .95rem;
    line-height: 1.35;
}
.indice a:hover, .indice a.ativo { color: var(--petroleo-escuro); border-left-color: var(--latao); }
.indice__pdf { padding: 18px 0 0 16px; }

.servico {
    padding: 0 0 64px;
    margin-bottom: 64px;
    border-bottom: 1px solid var(--linha);
}
.servico:last-child { border-bottom: 0; margin-bottom: 0; }
.servico__chamada { font-size: 1.2rem; color: var(--petroleo); font-weight: 500; }
.servico__imagem { margin: 24px 0; aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--raio); }
.servico__imagem img { width: 100%; height: 100%; object-fit: cover; }

.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin: 28px 0; }
.duas-colunas h3 {
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--latao);
}
.duas-colunas .lista-traco li { font-size: .97rem; }

.normas { font-size: .95rem; color: var(--cinza); }
.normas strong { color: var(--tinta); }

.servico__acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 26px; }

/* ---------- Portfólio ---------- */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}
.filtros a {
    padding: 8px 14px;
    border: 1px solid var(--linha);
    border-radius: 2px;
    text-decoration: none;
    color: var(--tinta);
    font-size: .93rem;
    background: var(--branco);
}
.filtros a span { color: var(--cinza-claro); font-family: var(--fonte-mono); font-size: .8rem; margin-left: 4px; }
.filtros a:hover { border-color: var(--petroleo); }
.filtros a[aria-current="true"] { background: var(--petroleo); border-color: var(--petroleo); color: var(--branco); }
.filtros a[aria-current="true"] span { color: var(--latao-claro); }

.barra-pdf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: var(--branco);
    border: 1px solid var(--linha);
    border-left: 4px solid var(--latao);
    margin-bottom: 36px;
}
.barra-pdf p { margin: 0; }
.barra-pdf strong { display: block; font-family: var(--fonte-titulo); font-size: 1.1rem; color: var(--petroleo-escuro); }
.barra-pdf span { color: var(--cinza); font-size: .95rem; }

/* Detalhe */
.detalhe {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 56px;
    align-items: start;
}
.detalhe__capa { border-radius: var(--raio); overflow: hidden; margin-bottom: 36px; }
.detalhe__bloco { margin-bottom: 36px; }
.detalhe__bloco h2 { font-size: 1.35rem; padding-bottom: 8px; border-bottom: 1px solid var(--linha); }
.detalhe__bloco ul { padding-left: 20px; }

.galeria { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.galeria figure { margin: 0; }
.galeria img { border-radius: var(--raio); width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.galeria figcaption { font-size: .88rem; color: var(--cinza); padding-top: 6px; }

.ficha {
    position: sticky;
    top: calc(var(--topo) + 24px);
    background: var(--papel);
    padding: 26px;
    border-radius: var(--raio);
}
.ficha h2 { font-size: 1.1rem; }
.ficha dl { margin: 0 0 22px; }
.ficha dt { font-family: var(--fonte-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); margin-top: 14px; }
.ficha dd { margin: 2px 0 0; font-weight: 500; }
.ficha .btn-aj { width: 100%; margin-top: 10px; }

/* ---------- Sobre ---------- */
.sobre-grade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.sobre-grade .lead { font-size: 1.2rem; color: var(--petroleo-escuro); }

.tabela-setores { width: 100%; border-collapse: collapse; }
.tabela-setores th, .tabela-setores td { text-align: left; padding: 14px 0; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tabela-setores th { width: 38%; font-family: var(--fonte-titulo); color: var(--petroleo-escuro); padding-right: 18px; }
.tabela-setores td { color: var(--cinza); }

.compromissos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.compromissos h3 { font-size: 1.1rem; }
.compromissos p { color: var(--cinza); margin: 0; }
.secao--escura .compromissos p { color: #B9C8D4; }

/* ---------- Contato ---------- */
.contato-grade { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }

.form-aj { background: var(--branco); }
.form-aj .linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-weight: 600; font-size: .93rem; margin-bottom: 6px; }
.campo label small { font-weight: 400; color: var(--cinza); }
.campo input, .campo select, .campo textarea {
    width: 100%;
    font: inherit;
    font-size: 1rem;
    padding: 12px 14px;
    border: 1px solid #C3C9CE;
    border-radius: var(--raio);
    background: var(--branco);
    color: var(--tinta);
}
.campo textarea { min-height: 150px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: 2px solid var(--petroleo);
    outline-offset: 1px;
    border-color: var(--petroleo);
}
.campo .ajuda { font-size: .85rem; color: var(--cinza); margin-top: 6px; }
.campo--isca { position: absolute; left: -9999px; }

.aviso {
    padding: 14px 18px;
    border-radius: var(--raio);
    margin-bottom: 22px;
    font-weight: 500;
}
.aviso--ok { background: #E7F2EC; color: var(--sucesso); border-left: 4px solid var(--sucesso); }
.aviso--erro { background: #F8E9E7; color: var(--erro); border-left: 4px solid var(--erro); }

.canais { border-top: 2px solid var(--petroleo); }
.canal { padding: 18px 0; border-bottom: 1px solid var(--linha); }
.canal span { display: block; font-family: var(--fonte-mono); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cinza); }
.canal a, .canal strong { font-size: 1.1rem; font-weight: 600; color: var(--petroleo-escuro); text-decoration: none; }
.canal a:hover { text-decoration: underline; }

/* ---------- Rodapé ---------- */
.rodape {
    background: var(--petroleo-escuro);
    color: #AFC0CE;
    padding: 64px 0 28px;
    font-size: .95rem;
}
.rodape__grade { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; }
.rodape img { height: 46px; width: auto; margin-bottom: 18px; }
.rodape h2 { font-size: .8rem; font-family: var(--fonte-mono); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--latao-claro); margin-bottom: 14px; }
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 8px; }
.rodape a { color: #DCE5EC; text-decoration: none; }
.rodape a:hover { color: var(--branco); text-decoration: underline; }
.rodape__redes { display: flex; gap: 16px; margin-top: 16px; }
.rodape__base {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--linha-escura);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: .85rem;
    color: #8299AB;
}

/* Botão flutuante de WhatsApp (só celular) */
.whats-flutuante {
    display: none;
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 90;
    background: #1F7A4D;
    color: var(--branco);
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
    align-items: center;
    gap: 8px;
}
.whats-flutuante svg { width: 20px; height: 20px; }
.whats-flutuante:hover { color: var(--branco); background: #17603C; }

/* ---------- Responsivo ---------- */
@media (max-width: 1080px) {
    .faixa-servicos { grid-template-columns: repeat(3, 1fr); }
    .faixa-servicos a:nth-child(4) { border-left: 1px solid var(--linha-escura); }
    .faixa-servicos a:nth-child(-n+3) { border-bottom: 1px solid var(--linha-escura); }
    .servico-linha { grid-template-columns: 48px 1fr; }
    .servico-linha p, .servico-linha__acoes { grid-column: 2; }
}

@media (max-width: 960px) {
    :root { --topo: 64px; }
    body { font-size: 16px; }
    .topo__marca img { height: 38px; }
    .topo__abrir { display: block; }
    .topo__menu {
        display: none;
        position: absolute;
        top: var(--topo);
        left: 0; right: 0;
        flex-direction: column;
        align-items: stretch;
        background: var(--petroleo-escuro);
        border-bottom: 1px solid var(--linha-escura);
        padding: 8px 16px 20px;
        gap: 0;
    }
    .topo__menu.aberto { display: flex; }
    .topo__menu a { padding: 13px 4px; border-bottom: 1px solid var(--linha-escura); }
    .topo__menu a[aria-current="page"] { border-bottom-color: var(--linha-escura); color: var(--latao-claro); }
    .topo__menu .topo__cta a { margin: 14px 0 0; text-align: center; }

    .abertura { padding-top: 48px; }
    .abertura__grade, .orcar, .servicos-pagina, .detalhe, .sobre-grade, .contato-grade { grid-template-columns: 1fr; gap: 40px; }
    .indice { display: none; }
    .ficha { position: static; }
    .grade-trabalhos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .passos { grid-template-columns: 1fr 1fr; row-gap: 32px; }
    .compromissos { grid-template-columns: 1fr; gap: 24px; }
    .rodape__grade { grid-template-columns: 1fr 1fr; }
    .secao { padding: 64px 0; }
    .whats-flutuante { display: inline-flex; }
    .secao__topo--linha { flex-direction: column; align-items: start; }
}

@media (max-width: 640px) {
    .container { padding: 0 16px; }
    .faixa-servicos { grid-template-columns: 1fr 1fr; }
    .faixa-servicos a, .faixa-servicos a:first-child, .faixa-servicos a:nth-child(4) { border-left: 0; border-right: 0; border-bottom: 1px solid var(--linha-escura); }
    .faixa-servicos a:nth-child(odd) { border-right: 1px solid var(--linha-escura); }
    .grade-trabalhos, .passos, .duas-colunas, .galeria, .rodape__grade, .form-aj .linha2 { grid-template-columns: 1fr; }
    .servico-linha { grid-template-columns: 1fr; gap: 8px; }
    .servico-linha p, .servico-linha__acoes { grid-column: 1; }
    .botoes .btn-aj { width: 100%; }
    .barra-pdf .btn-aj { width: 100%; }
    .chamada-final { padding: 26px 22px; }
    .abertura__foto { height: 220px; }
    .tabela-setores th { width: auto; display: block; padding-bottom: 0; border: 0; }
    .tabela-setores td { display: block; padding-top: 4px; }
}

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

@media (max-width: 960px) {
    .topo .container { gap: 0; }
    .topo__abrir { margin-left: auto; }
}

/* =========================================================
   Visual com fotos de campo (26/10)
   ========================================================= */

/* Capa da home */
.capa {
    position: relative;
    min-height: min(88vh, 760px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #E3EAF0;
    background:
        linear-gradient(90deg, rgba(8, 26, 41, .92) 0%, rgba(8, 26, 41, .72) 42%, rgba(8, 26, 41, .15) 100%),
        var(--capa-foto) center 35% / cover no-repeat,
        var(--petroleo-escuro);
}
.capa__conteudo { padding-top: 96px; padding-bottom: 72px; }
.capa .rotulo { color: var(--latao-claro); }
.capa h1 { color: var(--branco); max-width: 720px; font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin-bottom: 18px; }
.capa p { font-size: 1.2rem; max-width: 560px; margin-bottom: 30px; }
.capa__servicos { background: rgba(8, 26, 41, .82); border-top: 1px solid rgba(255,255,255,.12); }
.capa__servicos .container { display: flex; flex-wrap: wrap; }
.capa__servicos a {
    flex: 1 1 0;
    min-width: 140px;
    padding: 18px 14px;
    color: var(--branco);
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    border-right: 1px solid rgba(255,255,255,.12);
    text-align: center;
}
.capa__servicos a:first-child { border-left: 1px solid rgba(255,255,255,.12); }
.capa__servicos a:hover { background: var(--latao); color: var(--petroleo-escuro); }

/* Cartões de serviço com foto */
.cartoes-servico { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cartao-servico {
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: var(--tinta);
    box-shadow: 0 1px 2px rgba(11,36,56,.08), 0 8px 24px rgba(11,36,56,.08);
    transition: transform .2s, box-shadow .2s;
}
.cartao-servico:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(11,36,56,.1), 0 16px 36px rgba(11,36,56,.16); color: var(--tinta); }
.cartao-servico__foto { aspect-ratio: 16 / 10; background: var(--petroleo-claro); overflow: hidden; }
.cartao-servico__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.cartao-servico:hover .cartao-servico__foto img { transform: scale(1.05); }
.cartao-servico__texto { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; border-top: 3px solid var(--latao); }
.cartao-servico h3 { font-size: 1.2rem; margin-bottom: 8px; }
.cartao-servico p { color: var(--cinza); font-size: .97rem; margin-bottom: 14px; }
.cartao-servico__mais { margin-top: auto; font-weight: 600; color: var(--petroleo); }
.cartao-servico__mais::after { content: " →"; }

/* Mosaico de fotos de campo */
.secao--campo { padding-bottom: 96px; }
.mosaico {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 240px 240px;
    gap: 12px;
}
.mosaico__item { position: relative; margin: 0; overflow: hidden; border-radius: 4px; background: var(--petroleo); }
.mosaico__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.mosaico__item:hover img { transform: scale(1.04); }
.mosaico__item--1 { grid-column: span 2; grid-row: span 2; }
.mosaico__item figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 28px 14px 12px;
    font-size: .88rem; color: var(--branco);
    background: linear-gradient(transparent, rgba(8,26,41,.85));
}

/* Foto + texto lado a lado */
.dividido { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.dividido__foto img { width: 100%; border-radius: 6px; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 16px 40px rgba(11,36,56,.18); }
.passos-lista { list-style: none; counter-reset: p; margin: 24px 0 0; padding: 0; }
.passos-lista li { counter-increment: p; position: relative; padding: 14px 0 14px 56px; border-bottom: 1px solid var(--linha); color: var(--cinza); }
.passos-lista li::before {
    content: counter(p);
    position: absolute; left: 0; top: 12px;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--petroleo); color: var(--branco);
    font-family: var(--fonte-titulo); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.passos-lista strong { display: block; color: var(--petroleo-escuro); font-family: var(--fonte-titulo); font-size: 1.08rem; }

/* Faixa com foto de fundo */
.faixa-foto {
    color: #DCE5EC;
    background:
        linear-gradient(90deg, rgba(8,26,41,.94), rgba(18,58,90,.8)),
        var(--faixa-foto) center / cover no-repeat,
        var(--petroleo-escuro);
    padding: 80px 0;
}
.faixa-foto__conteudo { display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.faixa-foto h2 { color: var(--branco); max-width: 620px; }
.faixa-foto .rotulo { color: var(--latao-claro); }
.faixa-foto p { margin: 0; font-size: 1.08rem; }
.faixa-foto__acoes { display: flex; flex-direction: column; gap: 12px; min-width: 280px; }
.seletor-pdf { display: flex; gap: 8px; }
.seletor-pdf select {
    flex: 1; min-height: 48px; padding: 0 12px; font: inherit;
    border-radius: var(--raio); border: 1.5px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.08); color: var(--branco);
}
.seletor-pdf option { color: var(--tinta); }

/* Topo das páginas internas com foto */
.pagina-topo--foto {
    background:
        linear-gradient(90deg, rgba(8,26,41,.93) 0%, rgba(8,26,41,.75) 55%, rgba(8,26,41,.35) 100%),
        var(--topo-foto) center / cover no-repeat,
        var(--petroleo-escuro);
    padding: 96px 0 80px;
}

/* Bloco de orçamento com foto */
.chamada-final--foto {
    background:
        linear-gradient(rgba(18,58,90,.88), rgba(11,36,56,.94)),
        var(--chamada-foto) center / cover no-repeat,
        var(--petroleo);
}

/* Serviços: linhas alternadas foto/texto */
.servico-bloco { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 56px 0; border-bottom: 1px solid var(--linha); }
.servico-bloco:last-child { border-bottom: 0; }
.servico-bloco:nth-child(even) .servico-bloco__foto { order: 2; }
.servico-bloco__foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 16px 40px rgba(11,36,56,.16); }
.servico-bloco h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.servico-bloco details { margin: 16px 0 0; border-top: 1px solid var(--linha); }
.servico-bloco summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--petroleo); list-style: none; }
.servico-bloco summary::-webkit-details-marker { display: none; }
.servico-bloco summary::after { content: " +"; }
.servico-bloco details[open] summary::after { content: " −"; }
.servico-bloco .duas-colunas { margin: 4px 0 8px; }

@media (max-width: 960px) {
    .cartoes-servico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 260px 180px 180px; }
    .mosaico__item--1 { grid-column: span 2; grid-row: span 1; }

    .dividido, .servico-bloco { grid-template-columns: 1fr; gap: 28px; }
    .servico-bloco:nth-child(even) .servico-bloco__foto { order: 0; }
    .capa { min-height: 620px; }
    .capa__servicos a { min-width: 33%; flex: 1 1 33%; border-bottom: 1px solid rgba(255,255,255,.12); }
}
@media (max-width: 640px) {
    .cartoes-servico { grid-template-columns: 1fr; }
    .capa { min-height: 560px; background-position: 70% center; }
    .capa__conteudo { padding-top: 64px; padding-bottom: 48px; }
    .capa__servicos a { min-width: 50%; flex-basis: 50%; font-size: .88rem; padding: 14px 8px; }
    .mosaico { grid-template-rows: 220px 150px 150px; gap: 8px; }
    .faixa-foto__acoes { min-width: 0; width: 100%; }
    .seletor-pdf .btn-aj { width: auto; }
}