/*
 * Estilo do site Esquadrilar. Escrito do zero: nenhuma regra vem do CSS do
 * site antigo (WordPress/Elementor) — cores, tipografia e medidas foram
 * medidas nas capturas de tela em ref/ e no site ao vivo, nunca copiadas.
 *
 * Cores medidas com Pillow em ref/contato-desktop.png e ref/home-desktop.png:
 *   vermelho de destaque (botoes, titulos curtos, icones) -> rgb(209,38,30)
 *   texto de titulo                                        -> rgb(34,34,34)
 *   texto secundario/corpo no rodape                       -> rgb(107,107,107)
 *   fundo alternativo claro (rodape)                       -> rgb(251,250,250)
 *
 * Fontes: o site antigo carregava 4 familias do Google (Poppins, Raleway,
 * Roboto Slab, Roboto) em 18 pesos — ver docs/design.md, correcao 1. Esta
 * tarefa (motor + cabecalho/rodape) ja declara as familias que ficam nos
 * títulos e no corpo, mas AINDA NAO auto-hospeda os arquivos de fonte (isso
 * nao fazia parte do inventario de ativos das Tarefas 1-5, so imagens). Ate
 * la, o navegador cai no fallback do sistema — nada de CDN externa do
 * Google, que violaria a regra de dominio unico. Ver relatorio.
 */

:root {
  --cor-vermelho: #d1261e;
  --cor-vermelho-escuro: #a91e17;
  --cor-texto: #222222;
  --cor-texto-claro: #6b6b6b;
  --cor-branco: #ffffff;
  --cor-fundo-alt: #fbfafa;
  --cor-borda: #e6e4e4;

  --fonte-titulo: Helvetica, Arial, sans-serif;   /* medido: titulos em Helvetica 900 */
  --fonte-corpo: 'Poppins', 'Segoe UI', Arial, sans-serif;  /* medido: textos em Poppins */
  /* So o titulo de "Excelencia nos Servicos" usa esta familia: e a unica
   * peca de texto da home (Tarefa 7) com letras de slab-serif (terminais
   * retos, tipicos da Roboto Slab) em vez da Poppins geometrica usada em
   * todo o resto — confirmado ampliando ref/home-desktop.png (Pillow) na
   * faixa do titulo. Ainda cai no fallback do sistema ate a Tarefa 12
   * auto-hospedar as fontes (ver comentario no topo do arquivo). */
  --fonte-titulo-slab: 'Roboto Slab', Georgia, 'Times New Roman', serif;

  --largura-conteudo: 1168px;  /* 1120px uteis + 2x24 de respiro: medido, o original alinha o conteudo em x=160 a 1440px */
  --altura-topo: 44px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 116px; /* nao esconder o titulo da secao atras do cabecalho fixo */
}

body {
  margin: 0;
  font-family: var(--fonte-corpo);
  color: var(--cor-texto);
  background: var(--cor-branco);
  line-height: 1.55;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 .6em;
}

p {
  margin: 0 0 1em;
}

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

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

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

.botao {
  display: inline-block;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px 28px;
  border-radius: 2px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.botao--vermelho {
  background: var(--cor-vermelho);
  color: var(--cor-branco);
}

.botao--vermelho:hover,
.botao--vermelho:focus-visible {
  background: var(--cor-vermelho-escuro);
}

.botao--contorno {
  background: transparent;
  color: var(--cor-branco);
  border-color: var(--cor-vermelho);
}

.botao--contorno:hover,
.botao--contorno:focus-visible {
  background: var(--cor-vermelho);
}

/* ------------------------------------------------------------------ */
/* Cabecalho                                                           */
/* ------------------------------------------------------------------ */

.cabecalho {
  position: relative;
  z-index: 40;
}

.cabecalho__topo {
  background: var(--cor-branco);
  border-bottom: 1px solid var(--cor-borda);
}

.cabecalho__topo-caixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--altura-topo);
  padding-top: 14px;
  padding-bottom: 14px;
}

.cabecalho__logo img {
  height: 56px;
  width: auto;
}

.cabecalho__contatos-rapidos {
  display: flex;
  align-items: center;
  gap: 28px;
}

.cabecalho__contato-rapido {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .875rem;
  color: var(--cor-texto);
}

.cabecalho__contato-rapido svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--cor-vermelho);
}

.cabecalho__contato-rapido strong {
  display: block;
  font-weight: 700;
}

.cabecalho__menu {
  /* Traslucido, nao solido: medido em ref/home-desktop.png com Pillow
   * (build/montar.py nao participa dessa medida, foi feito ao vivo na
   * investigacao desta tarefa). Amostrando a faixa do menu numa linha
   * horizontal (y=130/150/180/200), a cor variou de (15,21,21) a
   * (130,141,142) na MESMA linha — um fundo solido #222222 daria o
   * mesmo pixel em toda a largura. A variacao bate com o desenho da
   * varanda/vidro da foto do hero aparecendo por tras: o cabecalho
   * (so a faixa do menu, nao a faixa branca de cima) fica sobreposto a
   * imagem de fundo do hero, nao empurra ela pra baixo. Decisao
   * registrada no relatorio da Tarefa 7, com a evidencia completa. */
  background: rgba(34, 34, 34, .6);
}

.cabecalho__menu-caixa {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
}

.cabecalho__lista {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cabecalho__divisor {
  display: none;
}

.cabecalho__cta {
  white-space: nowrap;
  padding: 12px 24px;
}

@media (min-width: 861px) {
  .cabecalho__divisor {
    display: block;
    width: 1px;
    align-self: stretch;
    margin: 14px 0 14px auto;
    background: var(--cor-vermelho);
  }
}

.cabecalho__link {
  display: block;
  padding: 18px 16px;
  color: var(--cor-branco);
  font-family: var(--fonte-titulo);
  font-weight: 600;
  font-size: .9375rem;
}

.cabecalho__link:hover,
.cabecalho__link:focus-visible {
  color: var(--cor-vermelho);
}

.cabecalho__sanfona {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cabecalho__sanfona span {
  display: block;
  height: 2px;
  background: var(--cor-branco);
  border-radius: 1px;
}

@media (max-width: 860px) {
  .cabecalho__topo-caixa {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .cabecalho__contatos-rapidos {
    gap: 18px;
    font-size: .8125rem;
  }

  .cabecalho__sanfona {
    display: flex;
    order: 1;
  }

  .cabecalho__menu-caixa {
    flex-wrap: wrap;
  }

  .cabecalho__cta {
    order: 2;
    margin-left: auto;
    padding: 8px 16px;
    font-size: .75rem;
  }

  .cabecalho__lista {
    order: 3;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
  }

  .cabecalho__menu.esta-aberto .cabecalho__lista {
    max-height: 320px;
  }

  .cabecalho__link {
    padding: 14px 4px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
}

/* ------------------------------------------------------------------ */
/* Rodape                                                              */
/* ------------------------------------------------------------------ */

.rodape {
  background: var(--cor-fundo-alt);
  padding-top: 56px;
}

.rodape__principal {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  align-items: start;
  padding-bottom: 40px;
}

.rodape__logo {
  height: 60px;
  width: auto;
}

.rodape__titulo {
  color: var(--cor-vermelho);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .75em;
}

.rodape__coluna p {
  color: var(--cor-texto-claro);
  font-size: .9375rem;
}

.rodape__coluna a:hover,
.rodape__coluna a:focus-visible {
  color: var(--cor-vermelho);
}

.rodape__horario-lista li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--cor-texto-claro);
  font-size: .9375rem;
  margin-bottom: .4em;
}

.rodape__horario-lista li::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid var(--cor-vermelho);
  border-radius: 50%;
}

.rodape__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--cor-borda);
  padding: 20px 0;
  flex-wrap: wrap;
}

.rodape__copyright {
  margin: 0;
  color: var(--cor-texto-claro);
  font-size: .8125rem;
}

.rodape__selo img {
  height: 28px;
  width: auto;
}

@media (max-width: 860px) {
  .rodape__principal {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: left;
  }

  .rodape__base {
    justify-content: center;
    text-align: center;
  }
}

.whatsapp-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
}

.whatsapp-flutuante__balao {
  background: var(--cor-branco);
  color: var(--cor-texto);
  font-size: .8125rem;
  padding: 8px 14px;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
}

.whatsapp-flutuante__icone {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.whatsapp-flutuante__icone svg {
  width: 28px;
  height: 28px;
  color: var(--cor-branco);
}

@media (max-width: 480px) {
  .whatsapp-flutuante__balao {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Conteudo principal                                                  */
/* ------------------------------------------------------------------ */

#conteudo-principal {
  /* flow-root cria um novo contexto de formatacao de bloco: a margem
   * negativa de .hero (abaixo) fica CONTIDA dentro de <main>, sem
   * "vazar" e colapsar com a margem do <body> (o que empurraria a
   * pagina inteira, cabecalho incluso, para cima). Sem isso, o truque
   * de sobrepor o hero ao cabecalho quebraria a pagina toda. */
  display: flow-root;
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero {
  position: relative;
  /* Sobe o hero por baixo do cabecalho: 73px da faixa branca
   * (--altura-topo 44px + 14px+14px de padding + 1px de borda) + 60px
   * da faixa do menu (.cabecalho__menu-caixa min-height) = 133px. So
   * a faixa do menu e traslucida (ver comentario acima) — a faixa
   * branca continua solida e cobre o topo da foto normalmente. */
  margin-top: -133px;
  /* 304px de padding-top: medido em ref/home-desktop.png (Pillow),
   * onde o texto "FABRICAÇÃO PRÓPRIA" comeca a aparecer em y≈304 a
   * partir do topo da pagina — que e o mesmo y=0 do proprio .hero,
   * ja que a margem negativa acima o alinha com o topo do cabecalho. */
  padding: 304px 0 220px;
  min-height: 820px;
  background-color: var(--cor-texto);
  background-size: cover;
  background-position: center;
  color: var(--cor-branco);
}

.hero__caixa {
  max-width: 640px;
}

.hero__chapeu {
  margin: 0 0 .85em;
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero__titulo {
  margin: 0 0 .55em;
  font-size: 2.75rem;
  text-transform: uppercase;
  color: var(--cor-branco);
}

@media (min-width: 640px) {
  .hero__titulo {
    font-size: 3.375rem;
  }
}

@media (max-width: 860px) {
  .hero {
    /* No celular a faixa do topo quebra em duas linhas (contatos
     * rapidos abaixo do logo) — mais alta que os 73px do desktop.
     * Medido em ref/home-mobile.png: a faixa de menu (sanfona +
     * FALE CONOSCO) comeca por volta de y=95 e o titulo do hero em
     * y≈390. */
    margin-top: -95px;
    padding: 210px 0 140px;
    min-height: 700px;
  }

  .hero__titulo {
    font-size: 2rem;
  }
}

/* ------------------------------------------------------------------ */
/* Sobre (#sobre)                                                      */
/* ------------------------------------------------------------------ */

.sobre {
  padding: 72px 0;
}

.sobre__caixa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.sobre__chapeu {
  margin: 0 0 .5em;
  color: var(--cor-vermelho);
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sobre__titulo {
  font-size: 2rem;
}

.sobre__texto p {
  color: var(--cor-texto-claro);
}

.sobre__foto img {
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.diferenciais {
  margin-top: 1.5em;
}

.diferenciais__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: .6em;
}

.diferenciais__icone {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--cor-vermelho);
}

@media (max-width: 860px) {
  .sobre__caixa {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ------------------------------------------------------------------ */
/* Excelencia nos Servicos (linhas de produto)                         */
/* ------------------------------------------------------------------ */

.servicos {
  position: relative;
  padding: 72px 0 150px;
  background-color: var(--cor-texto);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  /* Divisor diagonal em V na borda de baixo desta secao (correcao 1 da
   * Tarefa 7) — medido em ref/home-desktop.png: o fundo escuro desce ate
   * um bico no centro (x=50%) e sobe pras bordas (x=0/100%). Altura da
   * secao escura na referencia: 631px nas bordas (y 1408->2039), 727px
   * no bico central (y 1408->2135) -> 631/727 = 86,8%, arredondado pra
   * 87%. O padding-bottom extra (150px) garante que o botao
   * "VEJA NOSSOS SERVICOS REALIZADOS" fique acima do corte, nunca
   * cortado por ele. */
  clip-path: polygon(0 0, 100% 0, 100% 87%, 50% 100%, 0 87%);
}

.servicos::before {
  /* Tinta escura por cima da foto de fundo — a foto (predio/vidro)
   * fica so como textura, nunca legivel por cima do texto branco.
   * Cor e opacidade medidas em ref/home-desktop.png (regiao entre os
   * cards, fora do texto). */
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 15, .82);
}

.servicos__caixa {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--cor-branco);
}

.servicos__titulo {
  color: var(--cor-branco);
  font-family: var(--fonte-titulo-slab);
  font-size: 2.25rem;
}

.servicos__texto {
  max-width: 640px;
  margin: 0 auto 40px;
  color: var(--cor-branco);
  opacity: .85;
}

.servicos__linhas {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.linha-produto {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 16px;
  border: 1px solid rgba(209, 38, 30, .55);
  background: rgba(0, 0, 0, .2);
  transition: background-color .15s ease, border-color .15s ease;
}

.linha-produto:hover,
.linha-produto:focus-visible {
  background: rgba(209, 38, 30, .18);
  border-color: var(--cor-vermelho);
}

.linha-produto__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 14px;
}

.linha-produto__icone::before {
  /* Bolinha vermelha decorativa acima do icone, vista nos 5 cards da
   * referencia — puramente ornamental, por isso em CSS, nao em SVG. */
  content: '';
  position: absolute;
  top: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cor-vermelho);
}

.linha-produto__icone img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.linha-produto__nome {
  font-family: var(--fonte-titulo);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--cor-branco);
}

@media (max-width: 980px) {
  .servicos__linhas {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 860px) {
  .servicos__titulo {
    font-size: 1.75rem;
  }

  .servicos__linhas {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ------------------------------------------------------------------ */
/* Marco de lugar temporario                                           */
/*                                                                      */
/* So existe para as 3 paginas-molde que provam o motor (Tarefa 6)      */
/* funcionando de ponta a ponta. Tarefas 7 a 10 substituem o conteudo   */
/* de cada pagina e esta regra pode ser removida quando nenhum molde    */
/* mais usar a classe.                                                 */
/* ------------------------------------------------------------------ */
.marco-lugar {
  padding: 96px 24px;
  text-align: center;
  color: var(--cor-texto-claro);
  font-size: 1.0625rem;
}

/* ------------------------------------------------------------------
   Fidelidade ao site atual: ícones e proporções do topo e do rodapé.
   Medido lado a lado com ref/home-desktop.png e ref/contato-desktop.png.
   ------------------------------------------------------------------ */
.cabecalho__logo img { height: 73px; }            /* ~256px de largura, como no site atual */
.cabecalho__contato-rapido { color: var(--cor-texto-claro); line-height: 1.35; }
.cabecalho__contato-rapido strong { color: var(--cor-texto); }
.cabecalho__contato-rapido svg { width: 28px; height: 28px; }

.rodape__contatos { list-style: none; margin: 0; padding: 0; }
.rodape__contatos li {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: .55em; color: var(--cor-texto-claro); font-size: .9375rem;
}
.rodape__contatos a { color: inherit; }
.rodape__contatos a:hover { color: var(--cor-vermelho); }
.rodape__contatos svg,
.rodape__horario-lista svg { flex: none; width: 16px; height: 16px; color: var(--cor-vermelho); }
.rodape__horario-lista li::before { content: none; }  /* o circulo vazado deu lugar ao relogio */

.whatsapp-flutuante__icone { position: relative; }
.whatsapp-flutuante__aviso {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #e0141e; color: #fff;
  font: 700 11px/20px system-ui, sans-serif; text-align: center;
}

/* O botao flutuante e fixo no canto: sem essa folga, no fim da pagina ele
   cobre o selo "Feito por: Conexa". */
@media (min-width: 861px) {
  .rodape__base { padding-right: 260px; }
}
@media (max-width: 860px) {
  .cabecalho__logo img { height: 52px; }
  .cabecalho__contato-rapido svg { width: 22px; height: 22px; }
  .rodape__base { padding-bottom: 84px; }
}

/* Os logos encolhiam: o img global tem max-width:100% e o item flex cedia
   espaco. Tamanhos medidos na captura do site atual. */
.cabecalho__logo, .rodape__coluna--marca { flex: none; }
.cabecalho__logo img, .rodape__logo { max-width: none; }
.rodape__logo { height: 61px; }                  /* ~214px de largura */
.rodape__selo img { height: 34px; }

/* ==================================================================
   Segunda metade da home — medida em ref/home-desktop.png
   ================================================================== */

/* --- Seu projeto saindo do papel! --- */
.projeto { padding: 96px 0; background: var(--cor-branco); }
.projeto__caixa { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.projeto__video { position: relative; display: block; border-radius: 14px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.projeto__video img { display: block; width: 100%; height: auto; aspect-ratio: 31 / 20; object-fit: cover; transition: transform .4s ease; }
.projeto__video:hover img { transform: scale(1.03); }
.projeto__play {
  position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; background: rgba(255,255,255,.35); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; color: var(--cor-branco);
  transition: background .2s ease;
}
.projeto__play svg { width: 34px; height: 34px; margin-left: 4px; }
.projeto__video:hover .projeto__play,
.projeto__video:focus-visible .projeto__play { background: var(--cor-vermelho); }
.projeto__chapeu { color: var(--cor-vermelho); font-family: var(--fonte-titulo); font-weight: 700; font-size: .9375rem; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 6px; }
.projeto__titulo { font-family: var(--fonte-titulo); font-weight: 900; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.12; color: var(--cor-texto); margin: 0 0 14px; }
.projeto__descricao { color: var(--cor-texto-claro); font-size: .9375rem; margin: 0 0 18px; }

.numeros { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 210px)); }
.numeros__item { display: flex; flex-direction: column; align-items: center; padding: 14px 10px; text-align: center; }
/* as divisorias da grade 2x2, como no site atual */
.numeros__item:nth-child(odd) { border-right: 1px solid var(--cor-borda); }
.numeros__item:nth-child(-n+2) { border-bottom: 1px solid var(--cor-borda); }
.numeros__valor { color: var(--cor-vermelho); font-family: var(--fonte-titulo); font-weight: 400; font-size: 3rem; line-height: 1.1; }
.numeros__rotulo { color: var(--cor-vermelho); font-size: .875rem; font-weight: 500; margin-top: 4px; }

/* --- Vamos começar o seu projeto? --- */
.chamada {
  position: relative; padding: 110px 0; text-align: center; color: var(--cor-branco);
  background-color: var(--cor-texto); background-size: cover; background-position: center;
}
.chamada::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.chamada__caixa { position: relative; }
.chamada__titulo { font-family: var(--fonte-titulo); font-weight: 900; font-size: clamp(1.8rem, 3.2vw, 2.7rem); margin: 0 0 10px; }
.chamada__texto { margin: 0 0 26px; font-size: .9375rem; }

/* --- O que dizem nossos clientes --- */
.avaliacoes { padding: 90px 0; background: var(--cor-branco); text-align: center; }
.avaliacoes__titulo { font-family: var(--fonte-titulo); font-weight: 900; font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--cor-texto); margin: 0 0 10px; }
.avaliacoes__texto { color: var(--cor-texto-claro); font-size: .9375rem; margin: 0 0 30px; }
.avaliacoes__resumo { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 28px; font-size: .875rem; color: var(--cor-texto); }
.avaliacoes__nota { font-family: var(--fonte-titulo); font-size: 1.25rem; text-transform: uppercase; letter-spacing: .02em; }
.estrelas { display: inline-flex; gap: 2px; color: #f6bb06; }
.estrelas svg { width: 26px; height: 26px; }
.estrelas--pequenas svg { width: 16px; height: 16px; }

.avaliacoes__carrossel { position: relative; }
.avaliacoes__lista {
  list-style: none; margin: 0; padding: 4px 2px 12px; display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 20px) / 3); gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
}
.avaliacoes__lista::-webkit-scrollbar { display: none; }
.avaliacao { scroll-snap-align: start; background: #f4f4f4; border-radius: 10px; padding: 20px; text-align: left; }
.avaliacao__topo { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.avaliacao__inicial {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: var(--cor-vermelho); color: var(--cor-branco);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.avaliacao__nome { display: block; font-size: .875rem; color: var(--cor-texto); }
.avaliacao__data { display: block; font-size: .75rem; color: var(--cor-texto-claro); }
.avaliacao__texto { font-size: .875rem; color: var(--cor-texto); margin: 8px 0 0; line-height: 1.5; }
.avaliacoes__seta {
  position: absolute; top: 50%; z-index: 2; width: 38px; height: 38px; margin-top: -26px;
  border: 0; border-radius: 50%; background: var(--cor-branco); color: var(--cor-texto);
  box-shadow: 0 2px 10px rgba(0,0,0,.18); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.avaliacoes__seta svg { width: 22px; height: 22px; }
.avaliacoes__seta--anterior { left: -18px; }
.avaliacoes__seta--proxima { right: -18px; }
.avaliacoes__seta:disabled { opacity: 0; pointer-events: none; }
.avaliacoes__todas { display: inline-block; margin-top: 18px; font-size: .875rem; color: var(--cor-vermelho); font-weight: 500; }

/* --- Vamos falar do seu projeto hoje! --- */
.conversa { padding: 80px 0; color: var(--cor-branco); background: linear-gradient(180deg, #1b2130 0%, #2c3240 100%); }
.conversa__caixa { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.conversa__titulo { font-family: var(--fonte-titulo); font-weight: 900; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.12; margin: 0 0 12px; }
.conversa__texto p { margin: 0; font-size: .875rem; opacity: .9; max-width: 540px; }
.conversa__contatos { list-style: none; margin: 0; padding: 0; }
.conversa__contatos li { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 1.125rem; }
.conversa__contatos a { color: var(--cor-branco); }
.conversa__contatos a:hover { color: #ffb4ae; }
.conversa__contatos svg { flex: none; width: 20px; height: 20px; color: var(--cor-vermelho); }

/* --- Curiosidades --- */
.curiosidades { padding: 70px 0 90px; background: var(--cor-branco); }
.curiosidades__caixa { max-width: 1110px; }
.curiosidades__titulo {
  display: inline-block; font-family: var(--fonte-titulo); font-weight: 900;
  font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--cor-texto);
  margin: 0 0 28px; padding-bottom: 6px; border-bottom: 3px solid var(--cor-vermelho);
}
.faq { background: #f5f5f5; margin-bottom: 14px; }
.faq summary {
  display: flex; align-items: center; gap: 14px; padding: 18px 22px; cursor: pointer;
  list-style: none; font-weight: 700; font-size: .9375rem; color: var(--cor-texto);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; font-size: 1.4rem; font-weight: 300; color: var(--cor-texto-claro); transition: transform .2s ease; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--cor-vermelho); outline-offset: -2px; }
.faq__icone { flex: none; display: flex; color: var(--cor-vermelho); }
.faq__icone svg { width: 18px; height: 18px; }
.faq__resposta { padding: 0 22px 20px 54px; color: var(--cor-texto-claro); font-size: .9375rem; line-height: 1.65; }
.faq__resposta p { margin: 0; }

@media (max-width: 860px) {
  .projeto { padding: 64px 0; }
  .projeto__caixa, .conversa__caixa { grid-template-columns: 1fr; gap: 28px; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros__valor { font-size: 2.4rem; }
  .avaliacoes__lista { grid-auto-columns: 86%; }
  .avaliacoes__seta { display: none; }
  .chamada { padding: 80px 0; }
  .faq summary { padding: 16px; }
  .faq__resposta { padding: 0 16px 18px 48px; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .avaliacoes__lista { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .projeto__video img, .faq summary::after { transition: none; }
  .avaliacoes__lista { scroll-behavior: auto; }
}

/* Ajuste fino contra a captura: o botao fica centralizado sob a grade de
   numeros; os contatos da faixa escura sao maiores; o "+" e mais escuro. */
.projeto__numeros { display: inline-flex; flex-direction: column; align-items: center; }
.projeto__botao { font-size: .75rem; padding: 10px 18px; }
.conversa__contatos li { font-size: 1.3rem; }
.faq summary::after { color: var(--cor-texto); font-weight: 400; }

/* O e-mail e longo e nao quebra sozinho: no celular ele empurrava a coluna
   da faixa "Vamos falar" 18px para fora da tela (rolagem lateral). */
.conversa__caixa > * { min-width: 0; }
.conversa__contatos a { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .conversa__contatos li { font-size: 1rem; }
}

/* ==================================================================
   Pagina /servicos/ — medida em ref/servicos-desktop.png
   ================================================================== */

/* Faixa de titulo: foto escura, "SERVICOS" em branco, borda de baixo inclinada */
.faixa-titulo {
  position: relative; padding: 150px 0 110px; color: var(--cor-branco);
  background-color: var(--cor-texto); background-size: cover; background-position: center;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 82%);
}
.faixa-titulo::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.faixa-titulo .container { position: relative; }
.faixa-titulo__texto {
  margin: 0; font-family: var(--fonte-titulo); font-weight: 900;
  font-size: clamp(2.4rem, 5vw, 4rem); text-transform: uppercase; letter-spacing: .01em;
}

.galeria { padding: 60px 0 100px; background: var(--cor-branco); text-align: center; }
.galeria__titulo { font-family: var(--fonte-titulo); font-weight: 900; font-size: clamp(1.8rem, 3.2vw, 2.7rem); color: var(--cor-texto); margin: 0 0 12px; }
.galeria__texto { color: var(--cor-texto-claro); font-size: .9375rem; margin: 0 auto 56px; max-width: 900px; }

.galeria__filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin-bottom: 44px; }
.galeria__filtro {
  border: 0; background: none; padding: 4px 2px; cursor: pointer;
  font-family: 'Oswald', 'Roboto Condensed', 'Arial Narrow', var(--fonte-titulo);
  font-stretch: condensed; font-weight: 700; font-size: 1.9rem; color: var(--cor-vermelho);
  border-bottom: 3px solid transparent; transition: border-color .2s ease, color .2s ease;
}
.galeria__filtro:hover { color: var(--cor-vermelho-escuro); }
.galeria__filtro[aria-pressed="true"] { border-bottom-color: var(--cor-vermelho); }
.galeria__filtro:focus-visible { outline: 2px solid var(--cor-vermelho); outline-offset: 4px; }

.galeria__grade {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1140px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
}
.galeria__item[hidden] { display: none; }
.galeria__link { display: block; overflow: hidden; background: #eee; }
.galeria__link img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  transition: transform .4s ease, opacity .2s ease;
}
.galeria__link:hover img { transform: scale(1.05); }
.galeria__link:focus-visible { outline: 3px solid var(--cor-vermelho); outline-offset: 3px; }

/* Visor de tela cheia */
.visor {
  position: fixed; inset: 0; z-index: 100; background: rgba(10,10,12,.94);
  display: flex; align-items: center; justify-content: center; padding: 56px 72px;
}
.visor[hidden] { display: none; }
.visor__figura { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.visor__imagem { max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; }
.visor__legenda { color: #ddd; font-size: .875rem; margin-top: 12px; text-align: center; }
.visor__fechar, .visor__seta {
  position: absolute; border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.visor__fechar { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 2rem; line-height: 1; }
.visor__seta { top: 50%; width: 48px; height: 48px; margin-top: -24px; }
.visor__seta svg { width: 28px; height: 28px; }
.visor__seta--anterior { left: 14px; }
.visor__seta--proxima { right: 14px; }
.visor__fechar:hover, .visor__seta:hover { background: var(--cor-vermelho); }
.visor__fechar:focus-visible, .visor__seta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.visor-aberto { overflow: hidden; }

@media (max-width: 860px) {
  .faixa-titulo { padding: 110px 0 80px; }
  .galeria__grade { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .galeria__filtros { gap: 8px 22px; }
  .galeria__filtro { font-size: 1.35rem; }
  .galeria__texto { margin-bottom: 36px; }
  .visor { padding: 56px 8px; }
  .visor__seta { top: auto; bottom: 14px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .galeria__link img { transition: none; }
}

/* item do menu da pagina em que se esta, em vermelho como no site atual */
.cabecalho__link[aria-current="page"] { color: var(--cor-vermelho); }

/* A faixa de titulo passa por baixo da barra do menu, como o hero da home e
   como no site atual (a barra e translucida sobre a foto). */
.faixa-titulo { margin-top: -133px; padding: 215px 0 110px; }
.galeria__texto { max-width: none; }               /* uma linha so, como no original */
@media (max-width: 860px) {
  .faixa-titulo { margin-top: -95px; padding: 170px 0 70px; }
}

/* Foto de fundo na faixa "Vamos falar" (acrescimo pedido, nao existe no site
   atual). O degrade do original fica por cima, quase opaco, para o texto
   continuar legivel. */
.conversa { position: relative; background-color: #1b2130; background-size: cover; background-position: center; }
.conversa::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(41,45,56,.70) 0%, rgba(12,14,20,.84) 100%);
}
.conversa__caixa { position: relative; }

/* Quando o widget da Trustindex se desenha, a reserva em texto some. Se o
   widget nao carregar (Trustindex fora do ar, bloqueador), a reserva fica. */
.avaliacoes__widget:has(.ti-widget) .avaliacoes__estatico { display: none; }

/* ------------------------------------------------------------------
   Tipografia medida no site atual (getComputedStyle, 18/09/2026):
   titulos Helvetica 900, texto Poppins, menu Poppins 600, perguntas do
   FAQ Helvetica 600, nomes das linhas Helvetica 400 em caixa alta,
   contadores Poppins 400, filtros da galeria Oswald 700, botoes na fonte
   do sistema.
   ------------------------------------------------------------------ */
body { font-family: var(--fonte-corpo); }
.cabecalho__link { font-family: var(--fonte-corpo); font-weight: 600; }
.numeros__valor { font-family: var(--fonte-corpo); font-weight: 400; }
.numeros__rotulo { font-family: var(--fonte-corpo); font-weight: 600; }
.faq summary { font-family: var(--fonte-titulo); font-weight: 600; }
.linha-produto__nome { font-family: var(--fonte-titulo); font-weight: 400; text-transform: uppercase; }
.botao { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }

/* chapeus e texto corrido, medidos no site atual */
.hero__chapeu, .sobre__chapeu, .projeto__chapeu {
  font-family: var(--fonte-titulo); font-weight: 900; font-size: 1.1875rem; text-transform: uppercase;
}
.sobre__texto p:not(.sobre__chapeu), .projeto__descricao, .servicos__texto, .galeria__texto,
.avaliacoes__texto, .chamada__texto, .conversa__texto p,
.rodape__contatos li, .rodape__horario-lista li, .rodape__coluna p { font-size: .875rem; }

/* Metade de cima da home: valores exatos medidos no site atual
   (getComputedStyle a 1440px). */
.hero__caixa { max-width: var(--largura-conteudo); }   /* era 640px no conteiner: centralizava o texto */
.hero__titulo, .hero__chapeu, .hero__botao { max-width: 640px; }
.hero__chapeu, .sobre__chapeu, .projeto__chapeu { letter-spacing: normal; line-height: 1; }
.sobre__texto .sobre__chapeu { color: var(--cor-vermelho); }  /* ".sobre__texto p" pintava de cinza */
.sobre__titulo, .servicos__titulo {
  font-family: var(--fonte-titulo); font-weight: 900; line-height: 1; margin-bottom: .45em;
}
.sobre__titulo { text-transform: uppercase; }            /* no original o texto ja vem em caixa alta */
.servicos__texto { max-width: none; }
.linha-produto__nome { font-size: 1.125rem; letter-spacing: normal; }
@media (min-width: 861px) {
  .hero__titulo { font-size: 4.375rem; line-height: 1; }  /* 70px */
  .sobre__titulo, .servicos__titulo { font-size: 2.8125rem; } /* 45px */
}
@media (max-width: 860px) {
  .hero__titulo { font-size: 2.5rem; line-height: 1.05; }
  .sobre__titulo, .servicos__titulo { font-size: 1.9rem; }
  .linha-produto__nome { font-size: 1rem; }
}

.hero__titulo { font-weight: 900; }   /* uma regra geral de h1 impunha 700 */

@media (min-width: 861px) {
  /* No original as 5 caixas vao de ponta a ponta da tela (20px de margem). A
     secao ja tem overflow:hidden, entao 100vw nao cria rolagem lateral. */
  .servicos__linhas {
    width: calc(100vw - 40px); position: relative; left: 50%; transform: translateX(-50%);
  }
  /* base do hero inclinada, descendo da esquerda para a direita, como no original */
  .hero { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 64px)); }
}

/* Janela do video: toca sobre a pagina, sem sair do site */
.janela-video {
  position: fixed; inset: 0; z-index: 100; background: rgba(10,10,12,.92);
  display: flex; align-items: center; justify-content: center; padding: 56px 24px;
}
.janela-video[hidden] { display: none; }
.janela-video__quadro { width: min(960px, 100%); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.janela-video__quadro iframe { display: block; width: 100%; height: 100%; border: 0; }
.janela-video__fechar {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.janela-video__fechar:hover { background: var(--cor-vermelho); }
.janela-video__fechar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }