/* Lopes Campos — variação institucional
   Mesma identidade da versão principal (azul Lopes, chapa #E8E0DC, Archivo + Inter),
   com estrutura direta e micro-animações discretas: resposta ao toque, a cena 3D de entrada
   no hero (a mesma da principal) e indicador da seção atual. Tema único: as seções alternam
   azul-noite e branco, separadas por uma linha fina no azul da marca onde a cor muda.
   Sem animações disparadas pela rolagem. */

/* ---------- Fontes ---------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext-standard-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-standard-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ---------- Tokens ---------- */
:root {
  --f-display: "Archivo", "Inter", system-ui, sans-serif;
  --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(20px, 4vw, 56px);
  --largura: 1240px;
  --raio: 4px;
  --secao: clamp(88px, 11vw, 152px);
  --topo-altura: 76px;
  --barra-altura: 40px;

  /* Curvas: saída forte para entradas, in-out para movimento na tela, gaveta para painéis */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-gaveta: cubic-bezier(0.32, 0.72, 0, 1);

  /* Tom escuro (padrão: barra, cabeçalho, hero e seções .tom-escuro) */
  --escuro: #121b3a;
  --claro: #ffffff;
  --bg: #121b3a;
  --superficie: #1b2753;
  --linha: rgb(232 224 220 / 0.12);
  --linha-forte: rgb(232 224 220 / 0.26);
  --texto: #e8e0dc;
  --texto-2: #a7afcb;
  --texto-3: #8a93b3;
  --destaque: #8fa3e0;
  --azul: #233369;
  --botao-bg: #e8e0dc;
  --botao-texto: #121b3a;
  --botao-hover: #ffffff;
  --erro: #ffa08f;
  --ok: #9fd8b4;

  /* Logo oficial: texto branco sobre o azul-noite */
  --logo-marca: #ffffff;
  --logo-descritor: #ffffff;

  /* Altura do esmaecimento da cena 3D na base do hero */
  --fusao: clamp(40px, 5vw, 72px);
  /* Linha que separa seções de cores diferentes (azul-noite e branco) */
  --linha-troca: #3a52a8;

  color-scheme: dark;
}

/* Tons das seções: escuro (azul-noite) e claro (branco), alternados ao longo da página */
.tom-escuro {
  color: var(--texto);
}
.tom-claro {
  --bg: #ffffff;
  --superficie: #f4f6fa;
  --linha: rgb(35 51 105 / 0.12);
  --linha-forte: rgb(35 51 105 / 0.28);
  --texto: #141e3d;
  --texto-2: #474f6e;
  --texto-3: #5f6785;
  --destaque: #233369;
  --botao-bg: #233369;
  --botao-texto: #ffffff;
  --botao-hover: #1b2851;
  --erro: #b42318;
  --ok: #1d7a45;
  color: var(--texto);
  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-altura) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html.trava-rolagem {
  overflow: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
address {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

address {
  font-style: normal;
}

::selection {
  background: #3a52a8;
  color: #fff;
}

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

.pular {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--botao-bg);
  color: var(--botao-texto);
  border-radius: var(--raio);
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}
.pular:focus-visible {
  transform: none;
}

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

/* Fotos de obra: tom unificado, sem exagero */
.foto img,
.dupla-foto img,
.servico img {
  filter: saturate(0.88) contrast(1.04);
}

/* ---------- Tipografia ---------- */
/* Tracking por tamanho: negativo nos títulos, neutro no corpo, levemente positivo no texto pequeno */
.titulo-secao {
  font-family: var(--f-display);
  font-weight: 620;
  font-stretch: 104%;
  font-size: clamp(1.875rem, 1.15rem + 2.1vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.intro {
  margin-top: 16px;
  max-width: 52ch;
  color: var(--texto-2);
  font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  line-height: 1.55;
}

.cabeca-secao {
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* ---------- Botões ---------- */
.botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 24px;
  border-radius: var(--raio);
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 0.9375rem;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    transform 140ms var(--ease-out);
}
/* Resposta no toque: o botão cede um pouco, na hora */
.botao:active {
  transform: scale(0.97);
}
.botao-cheio {
  background: var(--botao-bg);
  color: var(--botao-texto);
}
.botao-contorno {
  border: 1px solid var(--linha-forte);
  color: var(--texto);
}
.botao-pequeno {
  height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
}
.botao svg {
  width: 18px;
  height: 18px;
  flex: none;
}
@media (hover: hover) and (pointer: fine) {
  .botao-cheio:hover {
    background: var(--botao-hover);
  }
  .botao-contorno:hover {
    border-color: var(--texto);
  }
}

/* Link com sublinhado que corre da esquerda para a direita */
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 0.9375rem;
}
.link::before,
.link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--linha-forte);
}
.link::after {
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 420ms var(--ease-out);
}

/* ---------- Barra de contatos ---------- */
.barra {
  background: #0e1631;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: #c3c9de;
}
.barra .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--barra-altura);
}
.barra-contatos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
}
.barra a {
  transition: color 160ms ease;
}
.barra a:hover {
  color: #ffffff;
}
.redes {
  display: flex;
  gap: 4px;
}
.redes a {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--raio);
  transition:
    color 160ms ease,
    background-color 160ms ease;
}
.redes a:hover {
  background: rgb(232 224 220 / 0.08);
}
.redes svg {
  width: 17px;
  height: 17px;
}
/* Número único: telefone e WhatsApp lado a lado. O ícone do WhatsApp leva a cor da marca
   (mais clara na barra escura, mais fechada no fundo branco, para manter o contraste). */
.fone-zap {
  --zap: #1a9a4b;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}
.barra .fone-zap {
  --zap: #25d366;
  gap: 4px;
}
.fone-zap a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fone-zap svg {
  width: 15px;
  height: 15px;
  flex: none;
}
.fone-zap .ico-wa {
  width: 17px;
  height: 17px;
  color: var(--zap);
}
.barra .fone-zap-wa {
  width: 32px;
  height: 32px;
  justify-content: center;
  border-radius: var(--raio);
  transition: background-color 160ms ease;
}
.barra .fone-zap-wa:hover {
  background: rgb(232 224 220 / 0.08);
}

/* ---------- Cabeçalho (material translúcido; a borda só aparece quando há conteúdo por baixo) ---------- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Sempre azul-noite e quase opaco: passa sobre as seções brancas sem clarear demais */
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition:
    border-color 240ms ease,
    background-color 240ms ease;
}
.topo[data-rolado] {
  border-bottom-color: var(--linha);
}
.topo .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--topo-altura);
}
.marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
/* Logo oficial (símbolos SVG no topo do HTML): horizontal no cabeçalho, vertical no rodapé */
.logo {
  display: block;
  flex: none;
}
.logo-horizontal {
  height: 46px;
  aspect-ratio: 4.171;
}
.logo-vertical {
  height: 140px;
  aspect-ratio: 1.7095;
  max-width: 100%;
}

.navegacao {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
}
.navegacao ul {
  display: flex;
  align-items: center;
  gap: 26px;
}
.navegacao ul a {
  position: relative;
  display: inline-block;
  padding-block: 6px;
  font-family: var(--f-display);
  font-weight: 560;
  font-stretch: 104%;
  font-size: 0.9375rem;
  color: var(--texto-2);
  transition: color 160ms ease;
}
/* Indicador da seção atual: responde "onde estou" durante a rolagem */
.navegacao ul a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--destaque);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.navegacao ul a[aria-current] {
  color: var(--texto);
}
.navegacao ul a[aria-current]::after {
  transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
  .navegacao ul a:hover {
    color: var(--texto);
  }
}
.topo-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icone-botao {
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--raio);
  color: var(--texto);
  transition:
    background-color 160ms ease,
    transform 140ms var(--ease-out);
}
.icone-botao:active {
  transform: scale(0.94);
}
.icone-botao svg {
  width: 20px;
  height: 20px;
}
@media (hover: hover) and (pointer: fine) {
  .icone-botao:hover {
    background: var(--linha);
  }
}
.menu-botao {
  display: none;
}
/* Três traços que viram um X */
.menu-botao path {
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 280ms var(--ease-out),
    opacity 160ms ease;
}
.menu-botao[aria-expanded="true"] .traco-1 {
  transform: translateY(5px) rotate(45deg);
}
.menu-botao[aria-expanded="true"] .traco-2 {
  opacity: 0;
}
.menu-botao[aria-expanded="true"] .traco-3 {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---------- Hero: a estrutura metálica se monta do desenho ao aço (cena 3D da versão principal) ---------- */
.hero {
  position: relative;
  min-height: clamp(620px, calc(100svh - var(--barra-altura) - var(--topo-altura)), 960px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(52% 58% at 70% 46%, rgb(58 82 168 / 0.3) 0%, transparent 72%),
    var(--escuro);
}
.hero-cena {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.hero-cena canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero-cena[data-pronta] canvas {
  opacity: 1;
}
/* Véu à esquerda: o título continua legível quando cruza a estrutura */
.hero-cena::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(18 27 58 / 0.88) 0%, rgb(18 27 58 / 0.62) 34%, transparent 64%);
}
/* Sem WebGL: foto real da estrutura como fundo */
.hero-cena[data-sem-3d] {
  background:
    linear-gradient(90deg, #121b3a 18%, rgb(18 27 58 / 0.4) 60%, rgb(18 27 58 / 0.55)),
    url("../img/estrutura-ceu.webp") center / cover no-repeat;
}
/* Base do hero: a cena se dissolve no azul-noite e segue direto para a próxima seção escura */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  height: calc(var(--fusao) * 0.6);
  pointer-events: none;
  background: linear-gradient(rgb(18 27 58 / 0), var(--escuro));
}

.hero-conteudo {
  padding-top: clamp(56px, 9vh, 120px);
  padding-bottom: clamp(48px, 7vh, 80px);
  pointer-events: none;
}
.hero-conteudo > * {
  pointer-events: auto;
}
.hero-titulo {
  font-family: var(--f-display);
  font-weight: 640;
  font-stretch: 106%;
  font-size: clamp(2.4rem, 1.15rem + 4.1vw, 4.75rem);
  line-height: 1.01;
  letter-spacing: -0.036em;
}
/* Cada linha do título sobe de dentro de uma máscara */
.hero-titulo .linha {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.hero-titulo .linha > span {
  display: inline-block;
}
.hero-texto {
  margin-top: 24px;
  max-width: 46ch;
  color: var(--texto-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}
.hero-ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Base do hero: credenciais e o medidor da montagem */
.hero-base {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px clamp(32px, 4vw, 64px);
}
.hero-credenciais {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px clamp(24px, 3vw, 48px);
}
.hero-credenciais li {
  position: relative;
  padding-top: 18px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--texto-2);
  max-width: 30ch;
}
.hero-credenciais li::before,
.hero-credenciais li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 1px;
}
.hero-credenciais li::before {
  right: 0;
  background: var(--linha-forte);
}
.hero-credenciais li::after {
  width: 48px;
  height: 2px;
  top: -0.5px;
  background: var(--destaque);
  transform-origin: left;
}
.hero-credenciais strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--texto);
  margin-bottom: 2px;
}

/* Medidor de fase: acompanha a cena 3D, da linha de projeto ao aço montado */
.fase {
  --p: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 2px;
  font-family: var(--f-display);
  font-weight: 560;
  font-stretch: 106%;
  font-size: 0.8125rem;
  white-space: nowrap;
  color: var(--texto-3);
}
.fase span {
  transition: color 400ms ease;
}
.fase[data-etapa="planejamento"] .fase-plan,
.fase[data-etapa="montagem"] .fase-mont {
  color: var(--texto);
}
.fase-trilho {
  position: relative;
  width: clamp(72px, 9vw, 140px);
  height: 2px;
  background: var(--linha-forte);
}
.fase-trilho::before,
.fase-trilho::after {
  content: "";
  position: absolute;
  top: -4px;
  width: 1px;
  height: 10px;
  background: var(--linha-forte);
}
.fase-trilho::before {
  left: 0;
}
.fase-trilho::after {
  right: 0;
}
.fase-trilho i {
  position: absolute;
  inset: 0;
  background: var(--destaque);
  transform-origin: left;
  transform: scaleX(var(--p));
}

/* Celular e tablet em pé: a estrutura ocupa a faixa de cima e o texto começa abaixo dela */
@media (max-width: 720px), (max-width: 1100px) and (orientation: portrait) {
  .hero-cena::after {
    background: linear-gradient(0deg, #121b3a 0%, rgb(18 27 58 / 0.7) 40%, transparent 56%);
  }
  .hero-conteudo {
    padding-top: calc(20px + 34svh);
  }
}

/* ---------- Seções ---------- */
.secao {
  padding-block: var(--secao);
}
/* Os tons vêm em pares (duas seções escuras, duas claras). Onde a cor muda, a troca é seca e
   marcada por uma linha fina no azul da marca; entre seções do mesmo tom, o fundo segue liso.
   Para reordenar, basta trocar as classes .tom-claro / .tom-escuro. */
.secao {
  background: var(--escuro);
}
.secao.tom-claro {
  background: var(--claro);
}
.tom-escuro + .secao.tom-claro,
.tom-claro + .secao.tom-escuro {
  border-top: 2px solid var(--linha-troca);
}
/* Cada seção avança 1px sobre a anterior: em posições fracionárias (zoom, telas de densidade
   fracionária) não sobra fresta mostrando o fundo da página como um fio. */
main > section + section,
main + .rodape {
  margin-top: -1px;
}
/* A última seção segue direto para o rodapé branco */
main > .secao:last-child {
  padding-bottom: calc(var(--secao) * 0.6);
}
/* Segunda seção do mesmo tom: respiro menor em cima, para o par ler como um bloco só */
.tom-escuro + .secao.tom-escuro,
.tom-claro + .secao.tom-claro {
  padding-top: calc(var(--secao) * 0.55);
}

/* Cabeçalho de seção com texto de apoio: título à esquerda, apoio à direita */
@media (min-width: 961px) {
  .cabeca-secao:has(.intro) {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: last baseline;
    gap: 32px;
  }
  .cabeca-secao:has(.intro) .intro {
    margin-top: 0;
  }
}

/* ---------- Serviços ---------- */
.servicos-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.servicos-grade > li {
  display: grid;
}
.servico {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
  transition:
    border-color 200ms ease,
    transform 160ms var(--ease-out);
}
.servico:active {
  transform: scale(0.985);
}
.servico-imagem {
  overflow: hidden;
}
.servico img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 800ms var(--ease-out);
}
.servico-corpo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px 22px;
}
.servico h3 {
  font-family: var(--f-display);
  font-weight: 620;
  font-stretch: 104%;
  font-size: 1.25rem;
  line-height: 1.22;
  letter-spacing: -0.016em;
  text-wrap: balance;
}
.servico .link {
  align-self: flex-start;
  color: var(--texto-2);
  transition: color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .servico:hover {
    border-color: var(--linha-forte);
  }
  .servico:hover img {
    transform: scale(1.04);
  }
  .servico:hover .link,
  .link:hover {
    color: var(--texto);
  }
  .servico:hover .link::after,
  .link:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}

/* ---------- Planejamento ---------- */
.dupla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.dupla-foto {
  border-radius: var(--raio);
  overflow: hidden;
}
.dupla-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.dupla-texto .intro {
  margin-top: 20px;
}

/* ---------- Portfólio: carrossel de casos ---------- */
/* Cabeçalho em grade: título com contador, pausa e setas na mesma linha; a dica de arraste logo
   abaixo; e a faixa com os nomes dos casos na largura toda, numa linha só que rola de lado.
   Sem JavaScript (ou com um caso só) a navegação não aparece; o trilho continua rolando de lado. */
.portfolio-cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(16px, 3vw, 32px);
}
.portfolio-titulo,
.carrossel-navegacao[data-ativa] {
  display: contents;
}
.portfolio-cabeca .titulo-secao {
  grid-column: 1;
  grid-row: 1;
}
.portfolio-dica {
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: start;
}
.carrossel-navegacao {
  display: none;
}
.carrossel-setas {
  grid-column: 2;
  grid-row: 1;
}
.carrossel-abas {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: clamp(16px, 2.6vw, 28px);
  border-bottom: 1px solid var(--linha);
  position: relative;
  min-width: 0;
  display: flex;
  gap: clamp(20px, 2.4vw, 36px);
  align-items: flex-end;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.carrossel-abas::-webkit-scrollbar {
  display: none;
}
/* Esmaece a borda onde há mais abas escondidas */
.carrossel-abas[data-corte="fim"] {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.carrossel-abas[data-corte="inicio"] {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent);
}
.carrossel-abas[data-corte="ambos"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.carrossel-abas button {
  position: relative;
  flex: none;
  white-space: nowrap;
  padding-block: 16px;
  font-family: var(--f-display);
  font-weight: 560;
  font-stretch: 104%;
  font-size: 0.9375rem;
  color: var(--texto-3);
  transition: color 160ms ease;
}
.carrossel-abas button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--destaque);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--ease-out);
}
.carrossel-abas button[aria-current="true"] {
  color: var(--texto);
}
.carrossel-abas button[aria-current="true"]::after {
  transform: scaleX(1);
}
@media (hover: hover) and (pointer: fine) {
  .carrossel-abas button:hover {
    color: var(--texto);
  }
}
.carrossel-setas {
  display: flex;
  align-items: center;
  gap: 8px;
}
.carrossel-contador {
  margin-right: 8px;
  font-family: var(--f-display);
  font-weight: 560;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}
.carrossel-setas .icone-botao {
  width: 48px;
  height: 48px;
  border: 1px solid var(--linha-forte);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    opacity 160ms ease,
    transform 140ms var(--ease-out);
}
/* Passagem automática: o traço da aba atual enche no tempo de cada caso; pausado, ele congela */
@keyframes progresso-caso {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
.carrossel-abas[data-auto] button[aria-current="true"]::after {
  transition: none;
  animation: progresso-caso var(--tempo-caso, 7s) linear both;
}
.carrossel-abas[data-auto="pausado"] button[aria-current="true"]::after {
  animation-play-state: paused;
}
.carrossel-setas .icone-botao:disabled {
  opacity: 0.32;
  cursor: default;
  transform: none;
}
@media (hover: hover) and (pointer: fine) {
  .carrossel-setas .icone-botao:not(:disabled):hover {
    border-color: var(--texto);
  }
}

/* Dica de arraste logo abaixo do título */
.portfolio-dica {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  font-family: var(--f-display);
  font-weight: 540;
  font-stretch: 104%;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  color: var(--texto-2);
}
.portfolio-dica svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--destaque);
}
@media (prefers-reduced-motion: no-preference) {
  .anima .portfolio-dica svg {
    animation: dica-arraste 2.8s var(--ease-in-out) 1s infinite;
  }
}
@keyframes dica-arraste {
  0%,
  60%,
  100% {
    transform: none;
  }
  20% {
    transform: translateX(4px);
  }
  40% {
    transform: translateX(-4px);
  }
}

/* Arrastar com o mouse (no toque, o arraste já é nativo) */
@media (hover: hover) and (pointer: fine) {
  .carrossel-trilho,
  .carrossel-abas {
    cursor: grab;
  }
  .carrossel-trilho[data-arrastando],
  .carrossel-abas[data-arrastando],
  .carrossel-abas[data-arrastando] button {
    cursor: grabbing;
    user-select: none;
  }
  /* Durante o arraste, nada reage ao cursor passando (zoom das fotos, sublinhados) */
  .carrossel-trilho[data-arrastando] * {
    pointer-events: none;
  }
}

/* Trilho: um caso por vez, com encaixe; a altura é ajustada pelo JavaScript durante o arraste */
.carrossel-trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  align-items: start;
  column-gap: var(--gutter);
  overflow: auto hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
/* Fim de um gesto com o dedo: a altura chega à do caso atual sem salto */
.carrossel-trilho[data-suave] {
  transition: height 400ms var(--ease-out);
}
.carrossel-trilho::-webkit-scrollbar {
  display: none;
}
.caso-slide {
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.caso {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: stretch;
}
.caso-nome {
  font-family: var(--f-display);
  font-weight: 640;
  font-stretch: 104%;
  font-size: clamp(1.625rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin-bottom: 20px;
}
.caso-texto {
  display: grid;
  gap: 14px;
  color: var(--texto-2);
}
.caso-texto p:first-child {
  color: var(--texto);
}
.fatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 32px;
  border-top: 1px solid var(--linha);
}
.fato {
  display: grid;
  gap: 2px;
  padding-top: 20px;
}
.fato dd {
  font-family: var(--f-display);
  font-weight: 640;
  font-stretch: 104%;
  font-size: 2rem;
  line-height: 1.1;
  letter-spacing: -0.022em;
  font-variant-numeric: tabular-nums;
  order: -1;
}
.fato dt {
  font-size: 0.9375rem;
  color: var(--texto-2);
}

.foto {
  position: relative;
  display: block;
  width: 100%;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--superficie);
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 800ms var(--ease-out),
    scale 1600ms var(--ease-out);
}
button.foto {
  cursor: zoom-in;
  transition: transform 160ms var(--ease-out);
}
button.foto:active {
  transform: scale(0.985);
}
@media (hover: hover) and (pointer: fine) {
  button.foto:hover img {
    transform: scale(1.05);
  }
}
/* Foto de destaque: acompanha a altura do texto ao lado (casos longos ganham foto em pé) */
.caso-destaque {
  min-height: clamp(300px, 34vw, 480px);
}
.caso-destaque img {
  position: absolute;
  inset: 0;
}
.galeria {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
.galeria img {
  aspect-ratio: 1;
}
/* Galerias longas: seis miniaturas; as demais fotos abrem no visualizador */
.galeria > li:nth-child(n + 7) {
  display: none;
}
.foto[data-mais]::after {
  content: attr(data-mais);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(18 27 58 / 0.6);
  color: #ffffff;
  font-family: var(--f-display);
  font-weight: 600;
  font-stretch: 104%;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
  letter-spacing: -0.01em;
  transition: background-color 200ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .foto[data-mais]:hover::after {
    background: rgb(18 27 58 / 0.48);
  }
}

/* Dados do cliente e ficha técnica dos casos */
/* Cliente e local, em negrito, logo abaixo do nome da obra */
.caso-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: -8px 0 20px;
  font-size: 0.9375rem;
  font-weight: 650;
  color: var(--texto);
}
.caso-meta span + span {
  position: relative;
}
.caso-meta span + span::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 0.3em;
  bottom: 0.3em;
  width: 1px;
  background: var(--linha-forte);
}
/* Lista de escopo: mesmas linhas da ficha, com um traço de destaque em cada item */
.caso-lista {
  display: grid;
  border-top: 1px solid var(--linha);
}
.caso-lista li {
  position: relative;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid var(--linha);
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--texto);
}
.caso-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(10px + 0.72em);
  width: 10px;
  height: 2px;
  background: var(--destaque);
}
.caso-ficha {
  display: grid;
  border-top: 1px solid var(--linha);
}
.caso-ficha div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 20px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.9375rem;
  line-height: 1.45;
}
.caso-ficha dt {
  color: var(--texto-2);
}
.caso-ficha dd {
  font-family: var(--f-display);
  font-weight: 560;
  font-stretch: 104%;
  color: var(--texto);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Clientes: faixa de logos em rolagem contínua ---------- */
/* Três logos nítidos no centro; os mais distantes ficam desfocados e somem nas pontas.
   --celula: largura de cada logo; --nitido: faixa central nítida; --transicao: passagem entre as duas. */
.clientes-carrossel {
  --celula: clamp(104px, 17vw, 232px);
  --nitido: calc(var(--celula) * 3);
  --transicao: calc(var(--celula) * 0.5);
  --duracao-clientes: 54s;
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
/* As máscaras ficam nas camadas paradas; só a faixa de dentro se move */
.clientes-camada {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent calc(50% - var(--nitido) / 2 - var(--transicao)),
    #000 calc(50% - var(--nitido) / 2),
    #000 calc(50% + var(--nitido) / 2),
    transparent calc(50% + var(--nitido) / 2 + var(--transicao))
  );
  mask-image: linear-gradient(
    to right,
    transparent calc(50% - var(--nitido) / 2 - var(--transicao)),
    #000 calc(50% - var(--nitido) / 2),
    #000 calc(50% + var(--nitido) / 2),
    transparent calc(50% + var(--nitido) / 2 + var(--transicao))
  );
}
.clientes-camada-desfocada {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    to right,
    #000 calc(50% - var(--nitido) / 2 - var(--transicao)),
    transparent calc(50% - var(--nitido) / 2),
    transparent calc(50% + var(--nitido) / 2),
    #000 calc(50% + var(--nitido) / 2 + var(--transicao))
  );
  mask-image: linear-gradient(
    to right,
    #000 calc(50% - var(--nitido) / 2 - var(--transicao)),
    transparent calc(50% - var(--nitido) / 2),
    transparent calc(50% + var(--nitido) / 2),
    #000 calc(50% + var(--nitido) / 2 + var(--transicao))
  );
}
.clientes-camada-desfocada .clientes-faixa {
  filter: blur(3px);
}
.clientes-faixa {
  display: flex;
  width: max-content;
  animation: clientes-rolar var(--duracao-clientes) linear infinite;
}
.clientes-carrossel[data-pausado] .clientes-faixa {
  animation-play-state: paused;
}
/* A lista vem repetida uma vez: andar metade da faixa leva ao mesmo ponto, sem emenda */
@keyframes clientes-rolar {
  to {
    transform: translateX(-50%);
  }
}
.clientes-faixa li {
  flex: none;
  width: var(--celula);
  height: clamp(88px, 9vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(12px, 1.6vw, 24px);
}
.logo-cliente {
  display: block;
  width: var(--w);
  height: var(--h);
  max-width: 100%;
  background: var(--texto);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* Celular: a faixa vai de borda a borda da tela */
@media (max-width: 640px) {
  .clientes-carrossel {
    --celula: 26vw;
    --transicao: calc(var(--celula) * 0.3);
    margin-inline: calc(var(--gutter) * -1);
  }
}

/* ---------- Quem somos ---------- */
.sobre-texto {
  display: grid;
  gap: 16px;
  color: var(--texto-2);
}
.sobre-texto .titulo-secao {
  margin-bottom: 8px;
  color: var(--texto);
}
.sobre-texto .lead {
  color: var(--texto);
  font-size: clamp(1.125rem, 1rem + 0.35vw, 1.25rem);
  line-height: 1.55;
}
.valores {
  margin-top: clamp(56px, 8vw, 96px);
  padding-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--linha);
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(32px, 5vw, 72px);
}
.valores-lista {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.valores-lista p {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texto-2);
  padding-left: 20px;
  border-left: 2px solid var(--destaque);
}

/* ---------- Contato ---------- */
.contato-grade {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: stretch;
}
.contato-dados {
  display: grid;
  gap: 22px;
  margin-top: 36px;
}
.contato-dados dt {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--texto-3);
  margin-bottom: 2px;
}
.contato-dados dd {
  line-height: 1.55;
}
.contato-dados a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 420ms var(--ease-out);
}
.contato-dados a:hover {
  background-size: 100% 1px;
}
.telefones,
.emails {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
}

/* Chamada para o WhatsApp: painel azul-noite ao lado dos dados de contato */
.contato-chamada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-content: end;
  gap: 16px;
  min-height: 100%;
  padding: clamp(28px, 4vw, 52px);
  border-radius: var(--raio);
  background: var(--escuro);
  color: #e8e0dc;
}
/* Malha de vigas ao fundo, esmaecendo para o canto do texto */
.contato-chamada::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(143 163 224 / 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgb(143 163 224 / 0.14) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  -webkit-mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
  mask-image: linear-gradient(200deg, #000 0%, transparent 62%);
}
.chamada-rotulo {
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: #8fa3e0;
}
.chamada-titulo {
  font-family: var(--f-display);
  font-weight: 620;
  font-stretch: 104%;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
  max-width: 20ch;
}
.chamada-texto {
  max-width: 44ch;
  color: #a7afcb;
  line-height: 1.6;
}
.chamada-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 12px;
}
.botao-zap {
  background: #e8e0dc;
  color: #121b3a;
}
.botao-zap svg {
  color: #1a9a4b;
}
.chamada-fone {
  font-size: 0.9375rem;
  color: #a7afcb;
  transition: color 160ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .botao-zap:hover {
    background: #ffffff;
  }
  .chamada-fone:hover {
    color: #e8e0dc;
  }
}

/* ---------- Rodapé ---------- */
/* Branco, na sequência do contato: separado só por um fio, com a logo nas cores positivas */
.rodape {
  background: var(--claro);
  color: var(--texto-2);
  --logo-marca: #606062;
  --logo-descritor: #373435;
}
.rodape-grade {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 40px 32px;
  padding-block: clamp(56px, 8vw, 88px);
}
.rodape-grade::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--linha);
}
.rodape .marca {
  color: var(--texto);
}
.rodape-marca p {
  margin-top: 20px;
  max-width: 32ch;
  font-size: 0.9375rem;
}
.rodape h2 {
  font-family: var(--f-display);
  font-size: 0.875rem;
  font-weight: 600;
  font-stretch: 104%;
  color: var(--texto);
  margin-bottom: 14px;
}
.rodape ul {
  display: grid;
  gap: 8px;
  font-size: 0.9375rem;
}
.rodape li a {
  transition: color 160ms ease;
}
.rodape li a:hover {
  color: var(--texto);
}
.rodape-direitos {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding-block: 22px;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--texto-3);
}
.rodape-direitos::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 1px;
  background: var(--linha);
}

/* ---------- Visualizador de fotos (modal: centrado, entra 240ms, sai 160ms) ---------- */
.visualizador {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: rgb(10 16 38 / 0.95);
  color: #e8e0dc;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 160ms ease,
    visibility 0s linear 160ms;
}
.visualizador[data-aberto] {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 240ms ease,
    visibility 0s;
}
.visualizador-topo,
.visualizador-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--gutter);
  font-family: var(--f-display);
  font-size: 0.9375rem;
}
.visualizador-contador {
  font-variant-numeric: tabular-nums;
  color: #a7afcb;
}
/* Linha e coluna de tamanho definido: a foto encolhe para caber, inclusive as verticais */
.visualizador figure {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  min-height: 0;
  padding: 0 var(--gutter);
}
.visualizador img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--raio);
  opacity: 0;
  transform: scale(0.97);
  transition:
    opacity 260ms ease,
    transform 360ms var(--ease-out),
    filter 260ms ease;
}
.visualizador[data-aberto] img[data-pronta] {
  opacity: 1;
  transform: none;
}
/* Troca de foto: um leve desfoque disfarça a sobreposição das duas imagens */
.visualizador img[data-trocando] {
  opacity: 0.25;
  filter: blur(6px);
  transform: none;
  transition-duration: 120ms;
}
.visualizador .icone-botao {
  color: #e8e0dc;
}
.visualizador-navegacao {
  display: flex;
  gap: 8px;
}
.visualizador-navegacao .icone-botao {
  width: 48px;
  height: 48px;
  border: 1px solid rgb(232 224 220 / 0.24);
}

/* ---------- Entradas (só com JS e sem movimento reduzido: classe .anima no <html>) ---------- */
/* Carregamento: um único momento orquestrado no hero, junto com a montagem da estrutura */
.anima .hero-titulo .linha > span {
  transform: translateY(108%);
  animation: subir 1100ms var(--ease-out) forwards;
  animation-delay: calc(180ms + var(--i) * 110ms);
}
@keyframes subir {
  to {
    transform: translateY(0);
  }
}
.anima [data-entrada] {
  animation: entrar 900ms var(--ease-out) both;
  animation-delay: calc(260ms + var(--i, 0) * 120ms);
}
@keyframes entrar {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
.anima .hero-credenciais li::after {
  animation: tracar 900ms var(--ease-in-out) both;
  animation-delay: calc(1000ms + var(--i, 0) * 110ms);
}
@keyframes tracar {
  from {
    transform: scaleX(0);
  }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .navegacao ul {
    gap: 20px;
  }
  .hero-texto {
    max-width: 42ch;
  }
  .navegacao .item-secundario {
    display: none;
  }
}

@media (max-width: 960px) {
  /* Menu do celular: painel que desce do cabeçalho e volta pelo mesmo caminho */
  .navegacao {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 8px var(--gutter) 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--linha);
    box-shadow: 0 24px 48px rgb(5 10 30 / 0.28);
    visibility: hidden;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition:
      clip-path 220ms var(--ease-out),
      opacity 160ms ease,
      visibility 0s linear 220ms;
  }
  .navegacao[data-aberta] {
    visibility: visible;
    opacity: 1;
    clip-path: inset(0 0 -60px 0);
    transition:
      clip-path 420ms var(--ease-gaveta),
      opacity 200ms ease,
      visibility 0s;
  }
  .navegacao ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .navegacao li,
  .navegacao > .botao {
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity 140ms ease,
      transform 140ms ease;
  }
  .navegacao[data-aberta] li,
  .navegacao[data-aberta] > .botao {
    opacity: 1;
    transform: none;
    transition:
      opacity 320ms ease calc(60ms + var(--i, 0) * 35ms),
      transform 420ms var(--ease-out) calc(60ms + var(--i, 0) * 35ms);
  }
  .navegacao ul a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--linha);
    font-size: 1.0625rem;
    color: var(--texto);
  }
  .navegacao ul a::after {
    display: none;
  }
  .navegacao ul a[aria-current] {
    color: var(--destaque);
  }
  .navegacao .item-secundario {
    display: block;
  }
  .navegacao .botao {
    width: 100%;
  }
  .menu-botao {
    display: inline-grid;
  }
  .servicos-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
  .hero-base {
    grid-template-columns: 1fr;
  }
  .fase {
    display: none;
  }
  .dupla,
  .caso,
  .contato-grade {
    grid-template-columns: 1fr;
  }
  .caso-destaque {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .valores {
    grid-template-columns: 1fr;
  }
  .rodape-grade {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .rodape-marca {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .hero-credenciais {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

@media (max-width: 640px) {
  :root {
    --topo-altura: 68px;
  }
  body {
    font-size: 1rem;
  }
  .barra-contatos li:nth-child(n + 3) {
    display: none;
  }
  .topo .logo-horizontal {
    height: 38px;
  }
  .hero-ctas .botao {
    flex: 1 1 auto;
  }
  /* Serviços no celular: lista compacta, foto à esquerda e nome à direita */
  .servicos-grade {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .servico {
    grid-template-columns: 124px minmax(0, 1fr);
    grid-template-rows: none;
  }
  .servico-imagem img {
    height: 100%;
    min-height: 88px;
    aspect-ratio: auto;
  }
  .servico-corpo {
    justify-content: center;
    gap: 6px;
    padding: 14px 16px;
  }
  .servico h3 {
    font-size: 1.0625rem;
  }
  .servico .link {
    font-size: 0.875rem;
  }
  .galeria {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .caso-ficha div {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .caso-ficha dd {
    text-align: left;
  }
  .carrossel-setas {
    gap: 4px;
  }
  .carrossel-contador {
    display: none;
  }
  .carrossel-setas .icone-botao {
    width: 42px;
    height: 42px;
  }
  .valores-lista {
    grid-template-columns: 1fr;
  }
  .chamada-acoes .botao {
    width: 100%;
  }
  .rodape-grade {
    grid-template-columns: 1fr 1fr;
  }
  .rodape-contato {
    grid-column: 1 / -1;
  }
}

/* Telas muito estreitas */
@media (max-width: 400px) {
  .barra-contatos li:nth-child(n + 2) {
    display: none;
  }
  .topo .container {
    gap: 12px;
  }
  .marca {
    gap: 10px;
  }
  .topo .logo-horizontal {
    height: 33px;
  }
  .topo-acoes {
    gap: 2px;
  }
  .icone-botao {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 340px) {
  .topo .logo-horizontal {
    height: 28px;
  }
}

/* ---------- Preferências de acessibilidade ---------- */
/* Movimento reduzido: sem deslocamentos; ficam só mudanças de cor e opacidade curtas */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .botao:active,
  .icone-botao:active,
  .servico:active,
  button.foto:active {
    transform: none;
  }
  .servico:hover img,
  button.foto:hover img {
    transform: none !important;
  }
  .navegacao,
  .navegacao[data-aberta] {
    clip-path: none !important;
    transition: opacity 160ms ease, visibility 0s linear 160ms !important;
  }
  .navegacao li,
  .navegacao > .botao {
    transform: none !important;
    opacity: 1 !important;
  }
  .visualizador img {
    transform: none !important;
  }
}
/* Transparência reduzida: cabeçalho sólido */
@media (prefers-reduced-transparency: reduce) {
  .topo {
    background: var(--bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* Contraste maior: linhas mais firmes */
@media (prefers-contrast: more) {
  :root {
    --linha: rgb(232 224 220 / 0.3);
    --linha-forte: rgb(232 224 220 / 0.55);
  }
  .tom-claro {
    --linha: rgb(35 51 105 / 0.35);
    --linha-forte: rgb(35 51 105 / 0.6);
  }
}