/* ==========================================================================
   Solmais Engenharia
   Implementação do frame "v1" do Figma (desktop, 1920px).
   As medidas em px vêm direto do Figma. Os tamanhos fluidos usam clamp()
   e chegam ao valor exato do Figma em 1920px.
   ========================================================================== */

/* Fontes ------------------------------------------------------------------
   Os mesmos arquivos do Google Fonts (subconjunto latino), servidos pelo
   próprio site: sem as duas conexões externas que seguravam a primeira
   pintura no celular. A Inter é variável (um arquivo para 400 a 600) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  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: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/poppins-400-latin.woff2") format("woff2");
  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: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../assets/fonts/poppins-500-latin.woff2") format("woff2");
  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;
}

/* Negrito da Poppins: só em Serviços ("Na prática") */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/fonts/poppins-700-latin.woff2") format("woff2");
  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;
}

/* Tokens ------------------------------------------------------------------ */
:root {
  /* Cores */
  --cor-fundo: #f2f2f2;
  --cor-preto: #000;
  --cor-branco: #fff;
  --cor-amarelo: #e9d510;          /* botões */
  --cor-amarelo-vivo: #ffe700;     /* destaques, pontos e barras */
  --cor-cinza-escuro: #393939;     /* pills e cards sobre fundo preto */
  --cor-trilho: #616161;           /* fundo das barras de progresso */
  --cor-texto-suave: #696969;
  --cor-texto-apagado: #9a9a9a;
  --cor-contador: #aaa;
  --cor-divisor: #ebebeb;
  --cor-menu: rgba(2, 41, 78, 0.3);
  --cor-azul: #02294e;             /* azul da marca (páginas internas) */

  /* Tipografia */
  --fonte-inter: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-poppins: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-h1: clamp(34px, calc(24px + 2.0834vw), 64px);
  --fs-h2: clamp(28px, calc(20px + 1.0417vw), 40px);
  --fs-texto-grande: clamp(32px, calc(19.77px + 1.272vw), 40px); /* 40px ≥ 1590, 32px ≤ 961 */
  --fs-numero: clamp(32px, calc(22px + 1.0417vw), 42px);
  --fs-titulo-grande: clamp(32px, calc(22px + 1.5625vw), 52px); /* 52px em 1920 */
  --fs-corpo: 18px;
  --lh-corpo: 28px;

  /* Layout */
  --largura: 1680px;
  --margem: 30px;            /* laterais mínimas do conteúdo (120px em 1920) */
  --margem-card: 30px;       /* laterais do conteúdo dentro dos cards */
  --espaco-secao: clamp(80px, 7.8125vw, 150px); /* 150px em 1920 */
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-preto);
  font-family: var(--fonte-inter);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, p, ul, dl, dd {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

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

button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cor-preto);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--cor-branco);
}

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

.container {
  width: min(var(--largura), 100% - 2 * var(--margem));
  margin-inline: auto;
}

/* Componentes ------------------------------------------------------------- */

/* Títulos de seção (40/58) */
.titulo-secao {
  font-size: var(--fs-h2);
  line-height: 1.45;
  font-weight: 500;
}

/* Títulos grandes dos cards escuros das páginas internas (52/62) */
.titulo-grande {
  font-size: var(--fs-titulo-grande);
  line-height: 1.1923;
  font-weight: 500;
}

.destaque {
  color: var(--cor-amarelo-vivo);
}

.destaque--amarelo {
  color: var(--cor-amarelo);
}

/* Ponto amarelo (Ellipse 1) */
.ponto {
  flex: none;
  width: 11px;
  height: 11px;
}

/* Rótulo com ponto sobre fundo claro ("Sobre Nós", "Obras") */
.rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: var(--cor-texto-suave);
}

.rotulo--pequeno {
  font-size: 16px;
  line-height: 24px;
}

/* Pills */
.pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.pill--vidro {
  gap: 15px;
  height: 40px;
  padding: 0 18px;
  border-radius: 30px;
  background: rgba(129, 129, 129, 0.16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(254, 251, 251, 0.2);
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
}

.pill--vidro img {
  flex: none;
  width: 12px;
  height: 20px;
}

.pill--escura {
  gap: 12px;
  padding: 8px 30px 8px 20px;
  border-radius: 30px;
  background: var(--cor-cinza-escuro);
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  color: var(--cor-branco);
}

.pill--grande {
  padding: 8px 20px;
  border-radius: 60px;
  font-size: 20px;
}

/* Botões (Botão v1 e v3) */
.botao {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 60px;
  font-family: var(--fonte-inter);
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.botao--primario {
  padding: 8px 8px 8px 20px;
  background: var(--cor-amarelo);
  color: var(--cor-preto);
}

.botao--primario:hover {
  background: var(--cor-amarelo-vivo);
}

.botao__seta {
  flex: none;
  width: 30px;
  height: 30px;
  transition: transform 0.2s ease;
}

.botao:hover .botao__seta {
  transform: translateX(3px);
}

/* Imagem do botão de menu do Figma mobile; fora do celular usam-se as linhas */
.menu__botao-img {
  display: none;
}

.botao--claro {
  padding: 10px 30px;
  background: var(--cor-branco);
  color: rgba(0, 0, 0, 0.7);
}

.botao--claro:hover {
  color: var(--cor-preto);
}

/* Controles dos carrosséis (Contador, Setas e Barra) */
.controles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
}

.contador {
  display: flex;
  font-weight: 500;
  color: var(--cor-branco);
}

.contador__atual {
  font-size: 30px;
  line-height: 40px;
}

.contador__total {
  display: flex;
  align-items: center;
  padding-top: 9px;
  font-size: 14px;
  line-height: 20px;
  color: var(--cor-contador);
}

.setas {
  display: flex;
  gap: 8px;
}

.seta {
  position: relative;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.seta:hover {
  transform: scale(1.08);
}

.seta img {
  width: 30px;
  height: 30px;
}

/* No Figma, a "Seta esquerda" é o SVG da seta para a direita (31×31, com
   contorno) espelhado horizontalmente */
.seta--esquerda img {
  position: absolute;
  inset: -0.5px;
  width: 31px;
  height: 31px;
  max-width: none;
  transform: scaleX(-1);
}

.barra {
  height: 6px;
  margin-top: 4px;
  border-radius: 6px;
  background: var(--cor-trilho);
}

.barra__preenchimento {
  width: 0;
  height: 100%;
  border-radius: 6px;
  background: var(--cor-amarelo-vivo);
  transition: width 0.4s ease;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  --hero-recuo: 16px;
  --hero-h: clamp(640px, calc(100vh - 2 * var(--hero-recuo)), 878px);
  /* A cena tem a proporção da foto no Figma (1888 × 1141,93) e cobre o hero
     como um object-fit: cover ancorado embaixo */
  --cena-w: max(100%, var(--hero-h) * 1.65334);

  position: relative;
  display: flex;
  flex-direction: column;
  /* Acima de 1920px o hero para em 1888px, como no Figma */
  width: min(1888px, 100% - 2 * var(--hero-recuo));
  height: var(--hero-h);
  margin: var(--hero-recuo) auto 0;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: #6f9fd8;
}

/* Alinhado ao conteúdo da página e nunca a menos de --margem-card da borda */
.hero .container {
  width: min(var(--largura), 100% - 2 * var(--margem-card));
}

/* Sem z-index na cena: os filhos se intercalam com as camadas do hero
   (foto → sombra → SOLMAIS → quadros → recorte → conteúdo) */
.hero__cena {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--cena-w);
  margin-left: calc(var(--cena-w) / -2);
  aspect-ratio: 1888 / 1141.93;
  pointer-events: none;
}

.hero__foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.hero__sombra {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(-90deg, rgba(0, 0, 0, 0) 41.827%, rgba(0, 0, 0, 0.2) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 59.073%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* Marca d'água: 280px em 1920px, alinhada ao conteúdo
   (o -0.068em compensa o respiro lateral da letra S) */
.hero__marca {
  position: absolute;
  top: 97px;
  left: calc(max(var(--margem-card), (100% - var(--largura)) / 2) - 0.068em);
  z-index: 2;
  font-size: min(280px, (100vw - 2 * var(--hero-recuo)) * 0.148305);
  line-height: 1;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.12);
  white-space: nowrap;
  pointer-events: none;
}

.hero__quadros {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 43.767%;
  height: auto;
  max-width: none;
}

.hero__recorte {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: 99.126%;
  height: auto;
  max-width: none;
}

/* Cabeçalho */
.cabecalho {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-top: 14px;
}

.cabecalho__logo {
  flex: none;
  border-radius: 8px;
}

.cabecalho__logo img {
  width: 47.333px;
  height: 48.0007px;
}

.menu {
  position: relative;
}

.menu__painel {
  display: flex;
  align-items: center;
  gap: 87px;
  height: 60px;
  padding: 9px 9px 9px 22px;
  border-radius: 50px;
  background: var(--cor-menu);
}

.menu__lista {
  display: flex;
  align-items: center;
  gap: 15px;
}

.menu__link {
  display: flex;
  padding: 10px;
  border-radius: 60px;
  font-size: 18px;
  line-height: 22px;
  color: var(--cor-branco);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.menu__link:hover {
  background: rgba(255, 255, 255, 0.12);
}

.menu__botao {
  display: none;
}

/* Copy do hero */
.hero__conteudo {
  position: relative;
  z-index: 4;
  margin-top: auto;
  padding-bottom: 60px;
}

.hero__titulo {
  max-width: 13.3em; /* Figma: 829px em 64px, com folga para a fonte do navegador */
  margin-top: 20px;
  font-size: var(--fs-h1);
  line-height: 1.125;
  font-weight: 500;
  color: var(--cor-branco);
  text-shadow: 0 0 50px rgba(0, 0, 0, 0.7);
}

.hero__titulo strong {
  font-weight: 600;
  color: var(--cor-amarelo-vivo);
}

.hero__texto {
  max-width: 536px;
  margin-top: 20px;
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: var(--cor-branco);
}

.hero__botoes {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 30px;
}

/* ==========================================================================
   ABERTURA DAS PÁGINAS INTERNAS (Serviços e Obras)
   Card escuro com foto, sombras e o cabeçalho da Home; o texto fica no pé.
   Cada página define o recorte da foto, as sombras e o arranjo do texto
   ========================================================================== */
.abertura {
  --abertura-recuo: 16px;

  position: relative;
  display: flex;
  flex-direction: column;
  /* Acima de 1920px para em 1888px, como o hero da Home */
  width: min(1888px, 100% - 2 * var(--abertura-recuo));
  margin: var(--abertura-recuo) auto 0;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-preto);
  color: var(--cor-branco);
}

/* Alinhado ao conteúdo da página e nunca a menos de --margem-card da borda */
.abertura .container {
  width: min(var(--largura), 100% - 2 * var(--margem-card));
}

.abertura__foto {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.abertura__sombra {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* Menu em pílula mais escuro, com borda e desfoque (só no desktop: até
   960px, sem JS, o painel vira a lista empilhada da Home) */
@media (min-width: 961px) {
  .abertura .menu__painel {
    padding: 8px 8px 8px 21px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(2, 41, 78, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

.abertura__conteudo {
  position: relative;
  display: flex;
  margin-top: auto;
  padding-block: 64px;
}

.abertura__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.abertura__titulo {
  font-size: var(--fs-h1);
  line-height: 1.1875; /* 76/64 */
  font-weight: 500;
}

.abertura__texto {
  font-family: var(--fonte-poppins);
  font-size: 20px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.9);
}

/* Variante com o texto centralizado no pé de um card de 640px (Obras e
   Sobre). As sombras e o recorte da foto continuam em cada página */
.abertura--centrada {
  min-height: 640px;
}

.abertura--centrada .abertura__conteudo {
  justify-content: center;
  padding-block: 64px 72px;
}

.abertura--centrada .abertura__copy {
  flex: 0 1 1240px;
  align-items: center;
  text-align: center;
}

.abertura--centrada .abertura__titulo {
  max-width: 1022px;
}

.abertura--centrada .abertura__texto {
  max-width: 760px;
}

/* No celular o Figma alinha esse mesmo texto à esquerda */
@media (max-width: 767px) {
  .abertura--centrada .abertura__conteudo {
    justify-content: flex-start;
    padding-block: 40px 24px;
  }

  .abertura--centrada .abertura__copy {
    align-items: flex-start;
    text-align: left;
  }

  .abertura--centrada .abertura__titulo,
  .abertura--centrada .abertura__texto {
    max-width: none;
  }
}

/* ==========================================================================
   FECHAMENTO: chamada centralizada em azul (Obras e Sobre)
   ========================================================================== */
.convite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-top: 24px;
  padding: 96px 80px;
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-azul);
  color: var(--cor-branco);
  text-align: center;
}

/* Quadros no canto superior direito (o desenho do Figma girado -90°) */
.convite__quadros {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 500px;
  height: 500px;
  pointer-events: none;
}

.convite__quadros img {
  width: 100%;
  height: 100%;
  max-width: none;
  transform: rotate(-90deg);
}

.convite__texto {
  max-width: 720px;
  font-family: var(--fonte-poppins);
  font-size: 20px;
  line-height: 30px;
  color: rgba(255, 255, 255, 0.88);
}

/* "Espaço" de 8px do Figma entre o texto e o botão, além dos vãos */
.convite .botao {
  margin-top: 32px;
}

/* ==========================================================================
   ENDEREÇO, CANAIS E MAPA (Sobre e Contato): texto à esquerda, mapa à direita
   ========================================================================== */
.local {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-top: var(--espaco-secao);
}

.local__texto {
  display: flex;
  flex: 0 1 760px;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.local__cabecalho {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.local__endereco {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-style: normal;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}

.local__bairro {
  color: rgba(0, 0, 0, 0.7);
}

/* O CEP não quebra no hífen: se faltar espaço, desce inteiro */
.local__cep {
  white-space: nowrap;
}

/* Canais: rótulo à esquerda e contato à direita, entre filetes */
.canal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.canal:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.canal dt {
  font-family: var(--fonte-poppins);
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

.canal dd {
  min-width: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .canal a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
}

/* Mapa: o desenho do Figma (ruas, quadras, marcador e rótulo) fica de capa
   enquanto o Google Maps não chega; o iframe entra quando a seção se
   aproxima da tela e aparece por cima quando termina de carregar (main.js,
   data-mapa) */
.mapa {
  position: relative;
  flex: 1 1 840px;
  min-width: 0;
  height: 600px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background: #e8ecef;
}

.mapa__capa {
  position: absolute;
  inset: 0;
}

/* As ruas ficam presas ao canto superior esquerdo, como no Figma: o card
   menor (celular) mostra só um pedaço do mesmo desenho */
.mapa__ruas {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 800px;
  max-width: none;
}

/* O SVG do marcador tem 96px com a sombra; o círculo de 56px começa 12px
   abaixo do topo. Marcador e rótulo ficam centralizados no card */
.mapa__marcador {
  position: absolute;
  top: calc(50% - 84px);
  left: 50%;
  width: 96px;
  height: 96px;
  max-width: none;
  transform: translateX(-50%);
}

.mapa__rotulo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--cor-branco);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  white-space: nowrap;
  transform: translateX(calc(-50% + 33px)); /* no Figma desktop, 33px à direita */
}

.mapa__nome {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.mapa__predio {
  font-family: var(--fonte-poppins);
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

/* "Abrir no Google Maps": na linha de baixo, como no Figma, mas à esquerda
   do botão de tela cheia que o Google Maps põe no canto (40px + 10px) */
.mapa__abrir {
  position: absolute;
  right: 62px;
  bottom: 24px;
  z-index: 2;
  padding: 10px 16px;
  border-radius: 60px;
  background: var(--cor-preto);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  color: var(--cor-branco);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  .mapa__abrir:hover {
    background: var(--cor-azul);
  }
}

.mapa__iframe {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.mapa.is-carregado .mapa__iframe {
  opacity: 1;
}

/* ==========================================================================
   PROVA + SOBRE
   ========================================================================== */
.sobre {
  display: grid;
  grid-template-columns: minmax(0, 468fr) minmax(0, 1034fr);
  column-gap: 10.595%; /* 178px em 1680px */
  margin-top: clamp(56px, 6.25vw, 120px);
}

.prova {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.prova__item {
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

.prova__item + .prova__item {
  padding-top: 28px;
  border-top: 2px solid var(--cor-divisor);
}

.prova__numero {
  font-size: var(--fs-numero);
  line-height: 1.2381; /* 52/42 */
  font-weight: 600;
}

.prova__legenda {
  font-family: var(--fonte-poppins);
  font-size: 20px;
  line-height: 28px;
  color: var(--cor-texto-suave);
}

/* Cópias criadas pelo JS para a faixa contínua: só aparecem no celular */
.prova__item.is-copia {
  display: none;
}

@keyframes faixa-continua {
  to {
    transform: translateX(-50%);
  }
}

.sobre__corpo {
  padding-top: 20px;
}

.sobre__texto {
  margin-top: 30px;
  font-size: var(--fs-texto-grande);
  line-height: 1.45;
  font-weight: 500;
}

/* Foto em pílula no meio do texto (123 × 52 em 40px). Com JS, ela começa
   fechada e abre da esquerda para a direita quando o texto entra na tela,
   empurrando as palavras */
.sobre__foto {
  position: relative;
  display: inline-block;
  width: 3.075em;
  height: 1.3em;
  margin-inline: 0.18em;
  border-radius: 0.75em;
  overflow: hidden;
  vertical-align: -0.33em;
  transition:
    width 1.1s cubic-bezier(0.65, 0, 0.35, 1),
    margin 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}

.sobre__foto img {
  position: absolute;
  top: -14.13%;
  left: 0;
  width: 3.075em; /* largura final fixa: a foto é revelada, não espremida */
  height: 158.08%;
  max-width: none;
}

/* Fechada: largura zero e margens negativas que anulam um dos dois espaços
   em volta (1 espaço da Inter = 0,2666em), sobrando um espaço normal */
@media (prefers-reduced-motion: no-preference) {
  .js .sobre__foto:not(.is-aberta) {
    width: 0;
    margin-inline: -0.1333em;
  }
}

/* Efeito de revelar o texto na rolagem (ativado pelo JS) */
.revelar-palavra {
  white-space: nowrap;
}

.is-revelando .revelar-letra {
  color: var(--cor-texto-apagado);
  transition: color 0.25s ease;
}

.is-revelando .revelar-letra.is-on {
  color: var(--cor-preto);
}

.sobre__botao {
  margin-top: 30px;
}

/* ==========================================================================
   SERVIÇOS
   ========================================================================== */
.servicos {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 40px;
  min-height: 600px;
  margin-top: var(--espaco-secao);
  padding: 30px calc(2 * var(--margem-card)) 30px var(--margem-card);
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-preto);
  color: var(--cor-branco);
}

/* Quadros decorativos: 600px como no Figma, encolhendo até a largura do
   card em telas estreitas para o desenho não ser cortado */
.servicos__quadros {
  position: absolute;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(600px, 100%);
  aspect-ratio: 600 / 599.985;
  pointer-events: none;
}

.servicos__quadros img {
  flex: none;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Esquerda presa na base; direita presa no topo */
.servicos__quadros--esquerda {
  bottom: 0;
  left: 0;
}

.servicos__quadros--esquerda img {
  transform: rotate(90deg);
}

.servicos__quadros--direita {
  top: 0;
  right: 0;
}

.servicos__quadros--direita img {
  transform: rotate(-90deg);
}

/* Pill e copy juntos: 20px do pill para o título */
.servicos__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.servicos__titulo {
  max-width: 13em; /* Figma: 503px em 40px */
}

.servicos__texto {
  max-width: 467px;
  margin-top: 30px;
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: rgba(255, 255, 255, 0.9);
}

.servicos__copy .botao {
  margin-top: 30px;
}

.servicos__carrossel {
  flex: none;
  align-self: flex-start;
  width: 410px;
}

.servicos__janela {
  height: 482px;
  margin-bottom: 8px;
  border-radius: 16px;
  overflow: hidden;
  touch-action: pan-y;
}

.servicos__trilho {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Card de serviço (Card 1–7) */
.servico {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  height: 100%;
  padding: 10px;
  border-radius: 16px;
  background: var(--cor-cinza-escuro);
}

.servico__imagem {
  position: relative;
  flex: none;
  aspect-ratio: 390 / 180;
  border-radius: 10px;
  overflow: hidden;
}

.servico__imagem--fundo {
  background: #4d4d4d;
}

.servico__imagem > img {
  position: absolute;
  top: var(--y, 0%);
  left: var(--x, 0%);
  width: var(--w, 100%);
  height: var(--h, 100%);
  max-width: none;
}

.servico__icone {
  position: absolute;
  bottom: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--cor-amarelo);
}

.servico__icone img {
  width: 24px;
  height: 24px;
}

.servico__conteudo {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 14px 10px;
}

.servico__titulo {
  margin: 0;
  font-size: 22px;
  line-height: 28px;
  font-weight: 500;
}

.servico__descricao,
.servico__entregaveis {
  font-family: var(--fonte-poppins);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.servico__descricao {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.7);
}

.servico__entrega {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.servico__rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.servico__rotulo img {
  flex: none;
  width: 7px;
  height: 7px;
}

.servico__entregaveis {
  color: rgba(255, 255, 255, 0.95);
}

/* ==========================================================================
   OBRAS
   ========================================================================== */
.obras {
  margin-top: var(--espaco-secao);
}

.obras__topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.obras__titulo {
  max-width: 16em; /* Figma: 599px em 40px */
  margin-top: 20px;
}

.obras__texto {
  max-width: 591px;
  margin-top: 20px;
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: rgba(0, 0, 0, 0.9);
}

/* Carrossel que começa alinhado ao conteúdo e vaza até a borda da tela.
   Rolagem livre: para exatamente onde o usuário soltar */
.obras__carrossel {
  --recuo: max(var(--margem), (100% - var(--largura)) / 2);

  display: flex;
  gap: 30px;
  margin-top: 40px;
  padding-inline: var(--recuo);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.obras__carrossel::-webkit-scrollbar {
  display: none;
}

.obras__carrossel.is-arrastando {
  cursor: grabbing;
}

.obra {
  position: relative;
  flex: none;
  width: 440px;
  aspect-ratio: 440 / 248;
  border-radius: 16px;
  overflow: hidden;
}

.obra img {
  position: absolute;
  top: var(--y, 0%);
  left: var(--x, 0%);
  width: var(--w, 100%);
  height: var(--h, 100%);
  max-width: none;
  pointer-events: none;
}

.obra--cobrir img {
  object-fit: cover;
}

.obra__legenda {
  position: absolute;
  bottom: 16px;
  left: 16px;
  padding: 8px 14px;
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  pointer-events: none;
}

/* ==========================================================================
   COMERCIAL + RESIDENCIAL
   ========================================================================== */
.segmentos {
  position: relative;
  margin-top: var(--espaco-secao);
  border-radius: 30px;
  overflow: hidden;
  isolation: isolate;
  background: var(--cor-preto);
  color: var(--cor-branco);
}

/* Os slides ocupam a mesma célula do grid: a altura acompanha o maior */
.segmentos__slides {
  display: grid;
  touch-action: pan-y;
}

.segmento {
  position: relative;
  grid-area: 1 / 1;
  min-height: 700px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.segmento.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease, visibility 0s;
}

.segmento__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* object-position reproduz o recorte do Figma (imagem com 135% de altura) */
.segmento--residencial .segmento__foto {
  object-position: 50% 42.03%;
}

.segmento--comercial .segmento__foto {
  object-position: 50% 77.97%;
}

.segmento__sombra {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--cor-preto) 0%, rgba(0, 0, 0, 0) 70.089%);
}

.segmento__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 30px var(--margem-card) 120px;
}

.segmento__titulo {
  margin-top: 20px;
}

.segmento--residencial .segmento__titulo {
  max-width: 15em; /* Figma: 552px em 40px */
}

.segmento--comercial .segmento__titulo {
  max-width: 12.5em; /* Figma: 457px em 40px */
}

.segmento__texto,
.segmento__lista {
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: rgba(255, 255, 255, 0.9);
}

.segmento__texto {
  margin-top: 19px;
}

.segmento--residencial .segmento__texto {
  max-width: 486px;
}

.segmento--comercial .segmento__texto {
  max-width: 522px;
}

.segmento__lista {
  max-width: 522px;
  margin-top: 16px;
}

.segmento--residencial .segmento__lista {
  max-width: 464px;
}

.segmento__copy .botao {
  margin-top: 30px;
}

/* Sombra controles (Figma): fica entre a foto e o texto de cada slide e
   escurece a base sob o contador e as setas */
.segmento__sombra-base {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  pointer-events: none;
}

.segmentos__controles {
  position: absolute;
  right: var(--margem-card);
  bottom: 30px;
  left: var(--margem-card);
  z-index: 2;
}


/* ==========================================================================
   RESPONSABILIDADE TÉCNICA
   ========================================================================== */
/* Figma 1920: foto de 640px, 100px de respiro e a coluna de texto em 940px,
   centrada na altura da foto */
.responsavel {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5.2083vw, 100px); /* 100px em 1920 */
  margin-top: var(--espaco-secao);
}

.responsavel__foto {
  position: relative;
  flex: 0 0 38.0952%; /* 640px em 1680px */
  aspect-ratio: 640 / 760;
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
}

.responsavel__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
}

.responsavel__foto::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(98, 91, 91, 0) 82.862%, var(--cor-preto) 100%);
  content: "";
}

/* Legenda no canto de baixo da foto: nome e cargo */
.responsavel__legenda {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.7);
  white-space: nowrap;
}

.responsavel__legenda-nome {
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--cor-branco);
}

.responsavel__legenda-cargo {
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.responsavel__corpo {
  display: flex;
  flex: 1 1 0; /* 940px em 1920: o que sobra da linha depois da foto */
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}

.responsavel__cabecalho {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.responsavel__titulo {
  margin: 0;
}

/* Nome e CREA na primeira linha, cargo na segunda, entre dois filetes.
   O cargo ocupa a linha inteira, então sempre começa numa linha nova (e o
   CREA desce sozinho quando não couber ao lado do nome) */
.responsavel__identificacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 14px;
  row-gap: 6px;
  padding-block: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.responsavel__nome {
  font-size: 26px;
  line-height: 34px;
  font-weight: 500;
}

.responsavel__crea {
  padding: 4px 12px;
  border-radius: 60px;
  background: var(--cor-amarelo);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--cor-azul);
  white-space: nowrap;
}

.responsavel__cargo {
  flex-basis: 100%;
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
}

.responsavel__formacao {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.responsavel__rotulo {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.responsavel__texto {
  font-family: var(--fonte-poppins);
  font-size: 19px;
  line-height: 31px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}

/* Credenciais: pastilhas brancas que quebram linha conforme a largura */
.credenciais {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.credencial {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 14px;
  border-radius: 60px;
  background: var(--cor-branco);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  clip-path: inset(0 0 0 0 round 60px);
  transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--atraso, 0s);
}

.credencial__ponto {
  flex: none;
  width: 8px;
  height: 8px;
}

/* Uma pastilha depois da outra, da esquerda para a direita */
.credencial:nth-child(2) { --atraso: 0.08s; }
.credencial:nth-child(3) { --atraso: 0.16s; }
.credencial:nth-child(4) { --atraso: 0.24s; }
.credencial:nth-child(5) { --atraso: 0.32s; }

/* Antes de aparecer na tela: recortada até a base, como uma barra vazia.
   O JS adiciona .is-visivel quando a seção chega na tela */
@media (prefers-reduced-motion: no-preference) {
  .js .credenciais:not(.is-visivel) .credencial {
    clip-path: inset(100% 0 0 0 round 60px);
  }
}

/* ==========================================================================
   DÚVIDAS
   ========================================================================== */
.duvidas {
  display: grid;
  grid-template-columns: minmax(0, 620fr) minmax(0, 940fr);
  column-gap: 7.143%; /* 120px em 1680px */
  margin-top: var(--espaco-secao);
}

.duvidas__lateral {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
}

.duvidas__cabecalho .titulo-secao {
  margin-top: 20px;
}

.duvidas__subtitulo {
  max-width: 431px;
  margin-top: 20px;
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: rgba(0, 0, 0, 0.9);
}

.duvidas__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 510px;
  padding: 40px;
  border-radius: 24px;
  background: var(--cor-branco);
}

.duvidas__card-titulo {
  margin: 0;
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
}

.duvidas__card-texto {
  max-width: 437px;
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: rgba(0, 0, 0, 0.7);
}

.duvidas__card .botao {
  margin-top: 24px; /* "Espaço" de 12px + os gaps do Figma */
}

/* Acordeão */
.acordeao {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.acordeao__item {
  border: 1px solid #dbdbdb;
  border-radius: 24px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.acordeao__item:not(.is-open):hover {
  border-color: #c2c2c2;
}

.acordeao__item.is-open {
  border-color: transparent;
  background: var(--cor-branco);
}

.acordeao__pergunta {
  margin: 0;
  font: inherit;
}

.acordeao__botao {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 28px 28px 28px 32px;
  border-radius: 24px;
  font-size: 20px; /* Figma: 22px, reduzido a pedido */
  line-height: 28px;
  font-weight: 500;
  text-align: left;
  transition: padding-bottom 0.35s ease;
}

/* Aberta não tem borda no Figma: 1px a menos de respiro compensa a borda transparente */
.acordeao__item.is-open .acordeao__botao {
  padding: 27px 28px 16px 31px;
}

.acordeao__botao > span:first-child {
  flex: 1;
}

/* Ícone mais/menos: a barra vertical gira e vira o sinal de menos */
.acordeao__icone {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cor-fundo);
  transition: background-color 0.3s ease;
}

.acordeao__icone::before,
.acordeao__icone::after {
  position: absolute;
  top: 19px;
  left: 13px;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: var(--cor-preto);
  transition: transform 0.3s ease, background-color 0.3s ease;
  content: "";
}

.acordeao__icone::after {
  transform: rotate(90deg);
}

.acordeao__item.is-open .acordeao__icone {
  background: var(--cor-preto);
}

.acordeao__item.is-open .acordeao__icone::before,
.acordeao__item.is-open .acordeao__icone::after {
  background: var(--cor-branco);
}

.acordeao__item.is-open .acordeao__icone::after {
  transform: rotate(0deg);
}

.acordeao__resposta {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.35s ease;
}

.js .acordeao__item:not(.is-open) .acordeao__resposta {
  grid-template-rows: 0fr;
}

.acordeao__conteudo {
  min-height: 0;
  overflow: hidden;
}

.acordeao__conteudo p {
  max-width: 840px; /* 780px de texto + respiros */
  padding: 0 27px 27px 31px;
  font-family: var(--fonte-poppins);
  font-size: 17px; /* Figma: 18px, reduzido a pedido */
  line-height: 28px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}

.acordeao__link {
  font-weight: 500;
  color: var(--cor-preto);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   FECHAMENTO
   ========================================================================== */
.fechamento {
  display: grid;
  grid-template-columns: minmax(0, 660fr) minmax(0, 820fr);
  gap: 80px;
  margin-top: var(--espaco-secao);
  padding: 60px;
  border-radius: 30px;
  background: var(--cor-preto);
  color: var(--cor-branco);
}

.fechamento__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.fechamento__texto {
  font-family: var(--fonte-poppins);
  font-size: var(--fs-corpo);
  line-height: var(--lh-corpo);
  color: rgba(255, 255, 255, 0.9);
}

.fechamento__texto--forte {
  color: var(--cor-branco);
}

.fechamento__micro {
  margin-top: 64px; /* "Espaço" de 40px do Figma + o gap */
  font-family: var(--fonte-poppins);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

/* Formulário */
.formulario {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  border-radius: 24px;
  background: #181818;
}

.formulario__linha {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.campo__rotulo {
  font-size: 15px;
  line-height: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

.campo__controle {
  width: 100%;
  margin: 0;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: #252525;
  color: var(--cor-branco);
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  transition: border-color 0.2s ease;
}

.campo__controle::placeholder {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.campo__controle:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.campo__controle:focus {
  border-color: var(--cor-amarelo);
  outline: none;
}

.campo__controle[aria-invalid="true"] {
  border-color: #ff7a7a;
}

.campo__controle--texto {
  display: block;
  height: 120px;
  resize: none;
}

.campo__select {
  position: relative;
}

.campo__select .campo__controle {
  padding-right: 48px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* Enquanto nada foi escolhido, o select usa a cor de placeholder */
.campo__select .campo__controle:has(option[value=""]:checked) {
  color: rgba(255, 255, 255, 0.4);
}

.campo__select option {
  background: #252525;
  color: var(--cor-branco);
}

.campo__chevron {
  position: absolute;
  top: calc(50% - 3.8px);
  right: 18.2px;
  width: 13.6px;
  height: 7.931px;
  max-width: none;
  pointer-events: none;
}

.formulario .botao {
  align-self: flex-start;
}

.formulario__status {
  font-family: var(--fonte-poppins);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
}

.formulario__status:empty {
  display: none;
}

/* ==========================================================================
   RODAPÉ
   ========================================================================== */
.rodape {
  position: relative;
  margin-top: 10px;
  padding: 280px 0 60px;
  overflow: hidden;
}

/* Foto de fundo: o scale e a origem reproduzem o zoom e o recorte do Figma */
.rodape__fundo {
  position: absolute;
  top: 153px;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}

.rodape__fundo img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 100%;
  transform: scale(1.1661);
  transform-origin: 61.18% 100%;
}

/* Acima de 1920px a foto cresce com a largura e fica presa pelo topo, na
   mesma proporção do Figma (116,61% de largura, -10,16% à esquerda,
   topo em -14,026% da largura); o excesso é cortado embaixo */
@media (min-width: 1921px) {
  .rodape__fundo img {
    position: absolute;
    top: 0;
    left: -10.16%;
    width: 116.61%;
    height: auto;
    margin-top: -14.026%; /* margem em % usa a largura da caixa */
    object-fit: fill;
    transform: none;
  }
}

.rodape__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 60px 60px 0;
  border-radius: 32px;
  background: var(--cor-branco);
  overflow: hidden;
  container-type: inline-size;
}

.rodape__topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 48px 72px;
}

.rodape__marca {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 440px;
  max-width: 100%;
}

.rodape__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: 8px;
}

.rodape__logo img {
  width: 47.333px;
  height: 48.0007px;
}

.rodape__nome {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.rodape__nome-principal {
  font-size: 24px;
  line-height: 26px;
  font-weight: 500;
}

.rodape__nome-secundario {
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--cor-texto-suave);
}

.rodape__descricao {
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}

.rodape__colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
}

.rodape__coluna {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.rodape__coluna--endereco {
  width: 330px;
  max-width: 100%;
}

.rodape__links,
.rodape__contatos,
.rodape__itens {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rodape__links a,
.rodape__contatos a {
  border-radius: 4px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
}

.rodape__links a:hover,
.rodape__contatos a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rodape__contatos li,
.rodape__atuacao {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rodape__legenda {
  font-family: var(--fonte-poppins);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.55);
}

.rodape__endereco {
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  font-style: normal;
}

.rodape__atuacao {
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 26px;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.7);
}

.rodape__base {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 28px;
  border-top: 1px solid #e0e0e0;
  font-family: var(--fonte-poppins);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
}

.rodape__credenciais {
  color: rgba(0, 0, 0, 0.7);
}

.rodape__copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  color: rgba(0, 0, 0, 0.55);
}

/* Marca d'água: 362px sobre 1560px de largura útil (23,205% do card) */
.rodape__marca-dagua {
  position: relative;
  height: 0.6906em;
  font-size: 23.205cqw;
  overflow: hidden;
}

.rodape__marca-dagua span {
  position: absolute;
  top: -0.0552em;
  left: 1px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  background: linear-gradient(180deg, #e2e2e2 0%, var(--cor-branco) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   MENU EM TELA CHEIA (Figma: Mobile 420px e Tablete 1280px)
   ========================================================================== */
.menu-tela {
  --menu-azul: #02294e;
  --menu-linha: rgba(255, 255, 255, 0.14);

  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 20px 20px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--menu-azul);
  color: var(--cor-branco);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.menu-tela.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0s;
}

/* Trava a rolagem da página com o menu aberto */
html.menu-aberto {
  overflow: hidden;
}

.menu-tela a:focus-visible,
.menu-tela button:focus-visible {
  outline: 2px solid var(--cor-amarelo-vivo);
  outline-offset: 3px;
  box-shadow: none;
}

/* Topo: logo + fechar */
.menu-tela__topo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-tela__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 6px;
}

.menu-tela__logo img {
  width: 35.5px;
  height: 36px;
}

.menu-tela__nome {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

.menu-tela__nome-principal {
  font-size: 18px;
  line-height: 20px;
  font-weight: 500;
}

.menu-tela__nome-secundario {
  font-size: 12px;
  line-height: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}

.menu-tela__fechar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.menu-tela__fechar:hover {
  transform: rotate(90deg);
}

.menu-tela__fechar img {
  width: 44px;
  height: 44px;
}

/* No celular o corpo some: navegação e rodapé viram filhos diretos da tela
   e ficam distribuídos entre o topo e a base */
.menu-tela__corpo {
  display: contents;
}

/* Navegação */
.menu-tela__nav {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-tela__pill {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.menu-tela__pill img {
  flex: none;
  width: 8px;
  height: 8px;
}

.menu-tela__itens {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-tela__itens li {
  border-top: 1px solid var(--menu-linha);
}

.menu-tela__itens li:last-child {
  border-bottom: 1px solid var(--menu-linha);
}

/* Os itens entram de baixo para cima, um de cada vez */
.menu-tela__itens li {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.menu-tela.is-open .menu-tela__itens li {
  opacity: 1;
  transform: none;
}

.menu-tela.is-open .menu-tela__itens li:nth-child(2) { transition-delay: 0.05s; }
.menu-tela.is-open .menu-tela__itens li:nth-child(3) { transition-delay: 0.1s; }
.menu-tela.is-open .menu-tela__itens li:nth-child(4) { transition-delay: 0.15s; }
.menu-tela.is-open .menu-tela__itens li:nth-child(5) { transition-delay: 0.2s; }

.menu-tela__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}

.menu-tela__numero {
  flex: none;
  width: 22px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease;
}

.menu-tela__rotulo {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  font-size: 34px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.menu-tela__contagem {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.5);
}

/* Seta: contorno normal; amarela na seção atual e no hover/foco */
.menu-tela__seta {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
}

.menu-tela__seta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s ease;
}

.menu-tela__seta-ativa {
  opacity: 0;
}

.menu-tela__link.is-atual .menu-tela__numero,
.menu-tela__link:hover .menu-tela__numero,
.menu-tela__link:focus-visible .menu-tela__numero {
  color: var(--cor-amarelo-vivo);
}

.menu-tela__link.is-atual .menu-tela__seta-ativa,
.menu-tela__link:hover .menu-tela__seta-ativa,
.menu-tela__link:focus-visible .menu-tela__seta-ativa {
  opacity: 1;
}

/* Rodapé do menu: contatos + CTA */
.menu-tela__info {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.menu-tela__rodape {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.menu-tela__contatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  margin: 0;
}

.menu-tela__contatos div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.menu-tela__contatos dt {
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.menu-tela__contatos dd {
  margin: 0;
  font-family: var(--fonte-poppins);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

.menu-tela__contatos a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.menu-tela__email {
  grid-column: 1 / -1;
}

.menu-tela__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 8px 8px 24px;
  border-radius: 60px;
  background: var(--cor-amarelo);
  font-size: 18px;
  line-height: 22px;
  font-weight: 500;
  color: var(--cor-preto);
  transition: background-color 0.2s ease;
}

.menu-tela__cta:hover {
  background: var(--cor-amarelo-vivo);
}

.menu-tela__cta img {
  flex: none;
  width: 44px;
  height: 44px;
  transition: transform 0.2s ease;
}

.menu-tela__cta:hover img {
  transform: translateX(3px);
}

/* Itens só do tablet */
.menu-tela__quadros,
.menu-tela__prova,
.menu-tela__divisor,
.menu-tela__contatos .menu-tela__email,
.menu-tela__linha-final {
  display: none;
}

.menu-tela__prova {
  flex-direction: column;
  gap: 2px;
}

.menu-tela__prova-numero {
  font-size: 56px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.menu-tela__prova-texto {
  font-family: var(--fonte-poppins);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
}

.menu-tela__divisor {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--menu-linha);
}

.menu-tela__linha-final {
  position: relative;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
  font-family: var(--fonte-poppins);
  font-size: 13px;
  line-height: 20px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}

/* Tablet (Figma: Tablete) */
@media (min-width: 768px) {
  .menu-tela {
    padding: 32px 48px;
  }

  .menu-tela__quadros {
    position: absolute;
    right: -150px;
    bottom: -150px;
    display: block;
    width: 620px;
    height: 620px;
    max-width: none;
    pointer-events: none;
  }

  .menu-tela__corpo {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 80px;
  }

  .menu-tela__nav {
    flex: 1;
    min-width: 0;
  }

  .menu-tela__link {
    padding: 14px 0;
  }

  .menu-tela__numero {
    width: 28px;
    font-size: 14px;
  }

  .menu-tela__rotulo {
    font-size: 52px;
    line-height: 60px;
  }

  .menu-tela__contagem {
    font-size: 16px;
  }

  .menu-tela__seta {
    width: 52px;
    height: 52px;
  }

  .menu-tela__info {
    flex: none;
    width: 420px;
    padding: 32px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.06);
  }

  .menu-tela__prova,
  .menu-tela__contatos .menu-tela__email,
  .menu-tela__linha-final {
    display: flex;
  }

  .menu-tela__divisor {
    display: block;
  }
}

/* Tablet em pé: o card vai para baixo da lista */
@media (min-width: 768px) and (max-width: 1023px) {
  .menu-tela__corpo {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .menu-tela__info {
    width: auto;
  }
}

/* Acima de 1280px volta o menu em pílula */
@media (min-width: 1281px) {
  .menu-tela {
    display: none;
  }
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
/* Até 1280px (tablet e celular): o menu em pílula dá lugar ao hambúrguer,
   que abre o menu em tela cheia */
@media (max-width: 1280px) {
  .js .menu__painel {
    display: none;
  }

  .js .menu__botao {
    position: relative;
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--cor-menu);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--cor-branco);
  }

  .menu__icone,
  .menu__icone::before,
  .menu__icone::after {
    position: absolute;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
  }

  .menu__icone {
    top: 25px;
    left: 16px;
  }

  .menu__icone::before,
  .menu__icone::after {
    left: 0;
    content: "";
  }

  .menu__icone::before {
    top: -6px;
  }

  .menu__icone::after {
    top: 6px;
  }

  .convite {
    padding: 72px 40px;
  }
}

/* Tablet e notebooks pequenos: laterais de 30px (padrão) e cards com 24px */
@media (max-width: 960px) {
  :root {
    --fs-corpo: 16px;
    --lh-corpo: 26px;
    --margem-card: 24px;
  }

  /* Hero: a foto vira um cover simples e o recorte sai de cena */
  .hero {
    height: auto;
    min-height: 640px;
    min-height: calc(100svh - 2 * var(--hero-recuo));
  }

  .hero__cena {
    inset: 0;
    width: auto;
    margin-left: 0;
    aspect-ratio: auto;
  }

  .hero__foto {
    object-position: 70% 100%;
  }

  .hero__recorte {
    display: none;
  }

  .hero__marca {
    display: none;
  }

  .hero__sombra {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.7) 100%);
  }

  .hero__conteudo {
    padding-top: 64px;
    padding-bottom: 32px;
  }

  .hero__botoes {
    gap: 16px;
  }

  /* Sem JS, o menu em pílula vira uma lista empilhada */
  .menu__painel {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    height: auto;
    margin-top: 12px;
    padding: 16px;
    border-radius: 20px;
    background: rgba(2, 41, 78, 0.92);
  }

  .menu__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }

  .menu__link {
    padding: 12px 14px;
  }

  /* Prova + Sobre */
  .sobre {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
  }

  .prova {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
  }

  .prova__item {
    padding-right: 16px;
  }

  .prova__item + .prova__item {
    padding-top: 0;
    padding-left: 20px;
    border-top: 0;
    border-left: 2px solid var(--cor-divisor);
  }

  .sobre__corpo {
    padding-top: 0;
  }

  /* Serviços */
  .servicos {
    flex-direction: column;
    min-height: 0;
    padding: 24px var(--margem-card);
  }

  .servicos__carrossel {
    width: min(100%, 410px);
  }

  /* Os cards passam a ter a altura do conteúdo (a do maior card) */
  .servicos__janela {
    height: auto;
  }

  .servicos__trilho,
  .servico {
    height: auto;
  }

  /* Obras */
  .obras__topo {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .obra {
    width: min(440px, 78vw);
  }

  /* Comercial + Residencial */
  .segmento {
    min-height: 640px;
  }

  .segmento__copy {
    padding-top: 24px;
  }

  .segmento__sombra {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 55%, rgba(0, 0, 0, 0.35) 100%);
  }

  .segmentos__controles {
    bottom: 24px;
  }
}

/* Seções novas: tablet e notebooks pequenos */
@media (max-width: 960px) {
  /* Endereço, canais e mapa: uma coluna só, com o mapa no meio dela (o
     texto vira "contents"; cada página decide o que vem antes do mapa) */
  .local {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .local__texto {
    display: contents;
  }

  .local__texto > * {
    order: 1;
  }

  .local__cabecalho {
    order: -1;
  }

  .mapa {
    flex: none;
    height: 420px;
  }

  .convite {
    padding: 56px var(--margem-card);
  }

  /* Dúvidas: pergunta e resposta menores */
  .acordeao__botao {
    font-size: 19px;
    line-height: 26px;
  }

  .acordeao__conteudo p {
    font-size: 16px;
    line-height: 26px;
  }

  /* Responsabilidade técnica: uma coluna só, com o título antes da foto
     (o corpo vira "contents" para os blocos entrarem na mesma pilha) */
  .responsavel {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }

  .responsavel__foto {
    flex: none;
    width: min(100%, 560px);
  }

  .responsavel__corpo {
    display: contents;
  }

  .responsavel__cabecalho {
    order: -1;
  }

  /* Dúvidas: cabeçalho, perguntas e, por último, o card de contato */
  .duvidas {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 40px;
  }

  .duvidas__lateral {
    display: contents;
  }

  .duvidas__cabecalho {
    order: 1;
  }

  .acordeao {
    order: 2;
  }

  .duvidas__card {
    order: 3;
    max-width: none;
  }

  /* Fechamento */
  .fechamento {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    padding: 40px var(--margem-card);
  }

  .fechamento__micro {
    margin-top: 0;
  }

  .formulario {
    padding: 24px;
  }

  /* Rodapé */
  .rodape {
    padding-top: 200px;
  }

  .rodape__fundo {
    top: 100px;
  }

  .rodape__card {
    gap: 40px;
    padding: 40px var(--margem-card) 0;
  }
}

/* ==========================================================================
   LAYOUT MOBILE (Figma: Mobile, 420px) — até 767px
   Cards escuros a 8px da borda, conteúdo a 20px e 72px entre as seções
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --margem: 20px;
    --margem-card: 20px;
    --espaco-secao: 72px;
    --fs-texto-grande: 28px;
    --fs-titulo-grande: 32px;
  }

  /* Componentes ---------------------------------------------------------- */
  .titulo-secao {
    font-size: 30px;
    line-height: 38px;
  }

  .titulo-grande {
    line-height: 40px;
  }

  /* Fechamento das páginas internas: card de 8px da borda, sem os quadros */
  .convite {
    gap: 18px;
    width: auto;
    margin: 12px 8px 0;
    padding: 48px 24px;
    border-radius: 20px;
  }

  .convite__quadros {
    display: none;
  }

  .convite__titulo {
    font-size: 30px;
    line-height: 38px;
  }

  .convite__titulo br {
    display: none;
  }

  .convite__texto {
    font-size: 15px;
    line-height: 24px;
  }

  .convite .botao {
    margin-top: 0;
  }

  .ponto {
    width: 9px;
    height: 9px;
  }

  .rotulo {
    gap: 10px;
    font-size: 16px;
    line-height: 22px;
  }

  .pill--escura {
    gap: 10px;
    padding: 6px 14px;
    border-radius: 60px;
    font-size: 14px;
    line-height: 20px;
  }

  /* Hero (Figma: Abertura) ----------------------------------------------- */
  .hero {
    --hero-recuo: 8px;
    min-height: 700px;
  }

  /* Foto ampliada (123,14% da altura do hero) e presa na base. O ponto a
     62,01% da largura da foto fica no centro do hero: em 404px de largura
     reproduz o Figma (left -168,71%, top -23,14%) e cobre qualquer celular */
  .hero__foto {
    inset: auto;
    bottom: 0;
    left: 50%;
    width: auto;
    height: 123.14%;
    object-fit: fill;
    transform: translateX(-62.01%);
  }

  .hero__quadros {
    display: none;
  }

  .hero__sombra {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.495) 0%, rgba(2, 41, 78, 0.135) 22%, rgba(1, 18, 36, 0.495) 50%, rgba(0, 0, 0, 0.828) 78%);
  }

  .cabecalho {
    padding-top: 16px;
  }

  .cabecalho__logo img {
    width: 35.5px;
    height: 36px;
  }

  /* Botão de menu desenhado no Figma (48px) no lugar das linhas em CSS */
  .js .menu__botao {
    width: 48px;
    height: 48px;
    background: none;
  }

  .menu__icone {
    display: none;
  }

  .menu__botao-img {
    display: block;
    width: 48px;
    height: 48px;
  }

  .hero__conteudo {
    padding-top: 40px;
    padding-bottom: 24px;
  }

  .pill--vidro {
    gap: 8px;
    height: auto;
    padding: 6px 14px 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    font-family: var(--fonte-inter);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
    color: var(--cor-branco);
    text-shadow: none;
  }

  .pill--vidro img {
    width: 11px;
    height: 16px;
  }

  .hero__titulo {
    max-width: none;
    margin-top: 16px;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.01em;
    text-shadow: none;
  }

  .hero__titulo strong {
    font-weight: 500;
  }

  /* O título corre contínuo, sem a quebra depois de "compra." */
  .hero__titulo br {
    display: none;
  }

  .hero__texto {
    max-width: none;
    margin-top: 16px;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
  }

  .hero__botoes {
    gap: 10px;
    margin-top: 28px;
  }

  /* Abertura das páginas internas ----------------------------------------- */
  .abertura {
    --abertura-recuo: 8px;
  }

  .abertura__copy {
    gap: 16px;
  }

  .abertura__titulo {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.01em;
  }

  .abertura__texto {
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
  }

  /* Prova + Sobre -------------------------------------------------------- */
  .sobre {
    row-gap: 40px;
    margin-top: var(--espaco-secao);
  }

  /* Números em faixa contínua de borda a borda: número ao lado da legenda
     e um ponto amarelo entre os itens. O JS duplica os itens e a faixa anda
     metade da largura (um conjunto inteiro), por isso o loop não tem emenda */
  .sobre__prova {
    margin-inline: calc(-1 * var(--margem));
    overflow: hidden;
  }

  .prova {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: max-content;
    padding-block: 20px;
    animation: faixa-continua 18s linear infinite;
  }

  .prova__item,
  .prova__item + .prova__item,
  .prova__item.is-copia {
    display: flex;
    flex: none;
    flex-direction: row-reverse; /* número (dd) antes da legenda (dt) */
    align-items: center;
    gap: 10px;
    margin-right: 28px; /* margem (e não gap) para os dois conjuntos terem a mesma largura */
    padding: 0;
    border: 0;
  }

  /* Separador: com row-reverse o ::before aparece depois da legenda */
  .prova__item::before {
    width: 8px;
    height: 8px;
    margin-left: 18px; /* 28px até a legenda, somando o gap */
    background: url("../assets/icons/menu-ponto.svg") center / 8px 8px no-repeat;
    content: "";
  }

  .prova__numero {
    font-size: 34px;
    line-height: 40px;
    font-weight: 500;
    white-space: nowrap;
  }

  .prova__legenda {
    max-width: 96px;
    font-size: 13px;
    line-height: 17px;
    color: rgba(0, 0, 0, 0.6);
  }

  .sobre__texto {
    margin-top: 28px;
  }

  .sobre__botao {
    margin-top: 28px;
  }

  /* Serviços ------------------------------------------------------------- */
  .servicos {
    align-items: flex-start;
    gap: 0;
    width: auto;
    margin-inline: 8px;
    padding: 40px 0 40px 20px;
    border-radius: 20px;
  }

  .servicos__quadros {
    display: none;
  }

  /* Pill, título, texto, carrossel e, por último, o botão */
  .servicos__intro,
  .servicos__copy {
    display: contents;
  }

  .servicos__titulo {
    order: 1;
    max-width: none;
    margin: 16px 20px 0 0;
  }

  .servicos__texto {
    order: 2;
    max-width: none;
    margin: 16px 20px 0 0;
    font-size: 15px;
    line-height: 24px;
  }

  .servicos__carrossel {
    order: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: stretch;
    column-gap: 16px;
    width: auto;
    margin-top: 28px;
    padding-right: 20px;
  }

  .servicos__copy .botao {
    order: 4;
    margin-top: 28px;
  }

  .servicos .setas {
    order: 3;
  }

  /* Carrossel de arrastar: cards de 300px que vazam até a borda do card */
  .servicos__janela {
    flex: 0 0 calc(100% + 20px);
    margin: 0 -20px 28px 0;
    border-radius: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .servicos__janela::-webkit-scrollbar {
    display: none;
  }

  .servicos__trilho {
    gap: 12px;
    width: max-content;
    padding-right: 20px;
    transform: none !important;
    transition: none;
  }

  .servico {
    flex: 0 0 300px;
    height: 500px;
    scroll-snap-align: start;
  }

  .servico__imagem {
    height: 150px;
    aspect-ratio: auto;
  }

  /* No celular a área da foto é mais baixa: cover com o mesmo enquadramento */
  .servico__imagem > img {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% var(--py, 50%);
  }

  .servicos .controles {
    display: contents;
  }

  /* Contador, barra e setas na mesma linha */
  .servicos .contador {
    order: 1;
  }

  .servicos .barra {
    order: 2;
    flex: 1;
    height: 4px;
    margin-top: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.2);
  }

  /* Contador (Serviços e Segmentos) */
  .contador {
    align-items: baseline;
    gap: 2px;
  }

  .contador__atual {
    font-size: 22px;
    line-height: 28px;
  }

  .contador__total {
    padding-top: 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.6);
  }

  .barra__preenchimento {
    border-radius: 3px;
  }

  /* Obras ---------------------------------------------------------------- */
  .obras {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  /* Texto, fotos e, por último, o botão */
  .obras__topo {
    display: contents;
  }

  .obras__topo > div {
    order: 1;
    padding-inline: var(--margem);
  }

  .obras__titulo {
    max-width: none;
    margin-top: 14px;
  }

  .obras__texto {
    max-width: none;
    margin-top: 14px;
    font-size: 15px;
    line-height: 24px;
  }

  .obras__carrossel {
    order: 2;
    align-self: stretch;
    gap: 10px;
    margin-top: 24px;
  }

  .obras__topo .botao {
    order: 3;
    margin: 24px var(--margem) 0;
  }

  .obra {
    width: 290px;
    border-radius: 10.5px;
  }

  .obra__legenda {
    bottom: 10px;
    left: 10.5px;
    padding: 5px 9px;
    border-radius: 26px;
    font-size: 10.5px;
    line-height: 14.5px;
  }

  /* Comercial + Residencial ---------------------------------------------- */
  .segmentos {
    width: auto;
    margin-inline: 8px;
    border-radius: 20px;
  }

  .segmento {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 640px;
  }

  .segmento--residencial .segmento__foto,
  .segmento--comercial .segmento__foto {
    object-position: 50% 50%;
  }

  .segmento__sombra {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.35) 18%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0.94) 100%);
  }

  .segmento__sombra-base {
    display: none;
  }

  /* Texto no pé do slide; os controles ocupam os 70px abaixo do botão */
  .segmento__copy {
    gap: 16px;
    padding: 24px 20px 114px;
  }

  .segmento__copy > * {
    margin-top: 0;
  }

  .segmento__copy .segmento__titulo {
    margin-top: 0;
  }

  .segmentos .pill--escura {
    background: rgba(255, 255, 255, 0.14);
  }

  .segmento__titulo,
  .segmento--residencial .segmento__titulo,
  .segmento--comercial .segmento__titulo {
    max-width: none;
    font-size: 28px;
    line-height: 36px;
  }

  .segmento--comercial .destaque {
    color: var(--cor-amarelo);
  }

  .segmento__texto,
  .segmento--residencial .segmento__texto,
  .segmento--comercial .segmento__texto {
    max-width: none;
    margin-top: 0;
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.88);
  }

  .segmento__lista,
  .segmento--residencial .segmento__lista {
    max-width: none;
    margin-top: 0;
    font-family: var(--fonte-inter);
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
  }

  .segmento__copy .botao {
    margin-top: 0;
  }

  .segmentos__controles {
    right: 20px;
    bottom: 28px;
    left: 20px;
  }

  .segmentos .contador__atual {
    font-size: 24px;
    line-height: 30px;
  }

  .segmentos .barra {
    height: 4px;
    margin-top: 14px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
  }

  /* Setas de 40px do Figma mobile (a esquerda já vem desenhada) */
  .servicos .seta,
  .servicos .seta img,
  .servicos .seta--esquerda img,
  .segmentos .seta,
  .segmentos .seta img,
  .segmentos .seta--esquerda img {
    position: static;
    width: 40px;
    height: 40px;
    transform: none;
  }

  /* Responsabilidade técnica (Figma Mobile 297:121) ---------------------- */
  .responsavel {
    gap: 22px;
  }

  .responsavel__cabecalho {
    gap: 22px;
  }

  .responsavel__titulo {
    font-size: 30px;
    line-height: 38px;
  }

  .responsavel__foto {
    width: 100%;
    height: 460px;
    aspect-ratio: auto;
  }

  .responsavel__legenda {
    bottom: 16px;
    left: 16px;
    padding: 10px 14px;
    border-radius: 10px;
  }

  .responsavel__legenda-nome {
    font-size: 14px;
    line-height: 20px;
  }

  .responsavel__legenda-cargo {
    font-size: 12px;
    line-height: 16px;
  }

  /* Nome sozinho na primeira linha; CREA e cargo lado a lado na segunda */
  .responsavel__identificacao {
    column-gap: 10px;
    row-gap: 8px;
    padding-block: 18px;
  }

  .responsavel__nome {
    flex-basis: 100%;
    font-size: 20px;
    line-height: 26px;
  }

  .responsavel__crea {
    padding: 3px 10px;
    font-size: 13px;
    line-height: 18px;
  }

  .responsavel__cargo {
    flex-basis: auto;
    font-size: 13px;
    line-height: 18px;
  }

  .responsavel__formacao {
    gap: 10px;
  }

  .responsavel__rotulo {
    font-size: 11px;
    line-height: 14px;
  }

  .responsavel__texto {
    font-size: 16px;
    line-height: 26px;
  }

  /* Credenciais: uma por linha, em cartões de canto menos arredondado */
  .credenciais {
    flex-direction: column;
  }

  .credencial {
    padding: 12px 14px;
    border-radius: 12px;
    clip-path: inset(0 0 0 0 round 12px);
  }

  @media (prefers-reduced-motion: no-preference) {
    .js .credenciais:not(.is-visivel) .credencial {
      clip-path: inset(100% 0 0 0 round 12px);
    }
  }

  /* Dúvidas -------------------------------------------------------------- */
  .duvidas {
    row-gap: 24px;
  }

  .duvidas__cabecalho .titulo-secao {
    margin-top: 14px;
  }

  .duvidas__subtitulo {
    max-width: none;
    margin-top: 14px;
    font-size: 15px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
  }

  .acordeao {
    gap: 10px;
  }

  .somente-desktop {
    display: none;
  }

  .acordeao__item {
    border-color: rgba(0, 0, 0, 0.1);
    border-radius: 16px;
  }

  .acordeao__botao {
    gap: 14px;
    padding: 20px 16px 20px 18px;
    border-radius: 16px;
    font-size: 17px;
    line-height: 24px;
  }

  /* Aberta não tem borda no Figma: 1px a menos compensa a borda transparente */
  .acordeao__item.is-open .acordeao__botao {
    padding: 19px 15px 12px 17px;
  }

  .acordeao__icone {
    width: 32px;
    height: 32px;
    background: var(--cor-branco);
  }

  .acordeao__icone::before,
  .acordeao__icone::after {
    top: 15.1px;
    left: 10px;
    width: 12px;
    height: 1.8px;
  }

  .acordeao__conteudo p {
    padding: 0 15px 19px 17px;
    font-size: 15px;
    line-height: 24px;
  }

  .duvidas__card {
    gap: 10px;
    padding: 28px 24px;
    border-radius: 20px;
  }

  .duvidas__card-titulo {
    font-size: 22px;
    line-height: 30px;
  }

  .duvidas__card-texto {
    font-size: 15px;
    line-height: 24px;
  }

  .duvidas__card .botao {
    margin-top: 16px; /* "Espaço" de 6px + gaps */
  }

  /* Fechamento: texto, formulário e o "Retorno em até 24h" por último ---- */
  .fechamento {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    width: auto;
    margin-inline: 8px;
    padding: 40px 20px;
    border-radius: 20px;
  }

  .fechamento__copy {
    display: contents;
  }

  .fechamento .pill--grande {
    padding: 6px 14px;
    font-size: 14px;
    line-height: 20px;
  }

  #contato-titulo {
    font-size: 32px;
    line-height: 40px;
  }

  .fechamento__texto {
    font-size: 15px;
    line-height: 24px;
    color: rgba(255, 255, 255, 0.85);
  }

  .fechamento__texto--forte {
    color: var(--cor-branco);
  }

  .formulario {
    order: 1;
    align-self: stretch;
    gap: 16px;
    margin-top: 12px; /* 28px com o gap */
    padding: 24px 18px;
    border-radius: 16px;
  }

  .formulario__linha {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .campo__rotulo {
    font-size: 14px;
    line-height: 18px;
  }

  .campo__controle {
    padding: 14px 16px;
    font-size: 15px;
    line-height: 22px;
  }

  .campo__select .campo__controle {
    padding-right: 44px;
  }

  .campo__chevron {
    right: 16.2px;
  }

  .campo__controle--texto {
    height: 110px;
  }

  .formulario .botao {
    align-self: stretch;
    justify-content: space-between;
  }

  .fechamento__micro {
    order: 2;
    margin-top: 12px; /* 28px com o gap */
    font-size: 13px;
    line-height: 20px;
  }

  /* Rodapé --------------------------------------------------------------- */
  .rodape {
    margin-top: var(--espaco-secao);
    padding: 180px 8px 8px;
  }

  .rodape__fundo {
    top: 0;
  }

  .rodape__card {
    gap: 28px;
    width: auto;
    padding: 28px 22px 0;
    border-radius: 20px;
  }

  .rodape__topo {
    flex-direction: column;
    gap: 28px;
  }

  .rodape__marca {
    gap: 16px;
    width: auto;
  }

  .rodape__logo {
    gap: 12px;
  }

  .rodape__logo img {
    width: 39.444px;
    height: 40px;
  }

  .rodape__nome-principal {
    font-size: 20px;
    line-height: 22px;
  }

  .rodape__nome-secundario {
    font-size: 13px;
    line-height: 16px;
  }

  .rodape__descricao {
    font-size: 14px;
    line-height: 22px;
  }

  /* Navegue e Contato lado a lado; Endereço embaixo, entre divisórias */
  .rodape__colunas {
    gap: 28px 24px;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .rodape__coluna {
    gap: 12px;
  }

  .rodape__colunas > .rodape__coluna:first-child {
    gap: 14px;
    width: 110px;
  }

  .rodape__colunas > .rodape__coluna:nth-child(2) {
    flex: 1;
    min-width: 0;
  }

  .rodape__coluna--endereco {
    flex-basis: 100%;
    width: auto;
    padding-top: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }

  .rotulo--pequeno {
    font-size: 14px;
    line-height: 20px;
  }

  .rodape__links {
    gap: 14px;
  }

  .rodape__links a {
    font-size: 16px;
    line-height: 22px;
  }

  .rodape__contatos,
  .rodape__itens {
    gap: 12px;
  }

  .rodape__contatos a {
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
  }

  .rodape__contatos a[href^="mailto:"] {
    font-size: 13px;
  }

  .rodape__legenda {
    font-size: 12px;
    line-height: 18px;
  }

  .rodape__endereco,
  .rodape__atuacao {
    font-size: 14px;
    line-height: 22px;
  }

  .rodape__base {
    gap: 8px;
    padding-top: 28px;
    border-top-color: rgba(0, 0, 0, 0.1);
    font-size: 12px;
    line-height: 19px;
  }

  .rodape__credenciais,
  .rodape__copyright {
    color: rgba(0, 0, 0, 0.6);
  }

  .rodape__copyright {
    flex-direction: column;
    gap: 8px;
  }

  /* Marca d'água: 83px e 60px de altura em 360px de largura útil */
  .rodape__marca-dagua {
    height: 0.7229em;
  }

  .rodape__marca-dagua span {
    top: -0.0843em;
  }

  /* Endereço, canais e mapa (Sobre e Contato) ---------------------------- */
  .local,
  .local__cabecalho {
    gap: 20px;
  }

  .local__titulo {
    font-size: 30px;
    line-height: 38px;
  }

  .canal {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding-block: 14px;
  }

  .canal dt {
    font-size: 13px;
    line-height: 18px;
  }

  .canal dd {
    font-size: 17px;
    line-height: 24px;
  }

  .mapa {
    height: 300px;
  }

  .mapa__marcador {
    top: calc(50% - 72px);
  }

  .mapa__rotulo {
    top: calc(50% + 8px);
    transform: translateX(-50%);
  }

  .mapa__abrir {
    right: 60px;
    bottom: 16px;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .sobre__prova {
    overflow-x: auto;
  }

  .prova {
    animation: none;
  }

  .prova__item.is-copia {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}