/* ==========================================================================
   MGS Gutter Systems
   Reconstruido a partir de _captura/ (elementor2html).
   Origem: WordPress + Elementor 4.1.4, tema hello-elementor.
   Cores, tamanhos e geometria saíram do CSS computado do site.

   As fontes sao servidas daqui de dentro de proposito: no site de origem o
   CSS aponta para contabilidadecontales.com.br e as requisicoes falham, entao
   o site no ar renderiza em fonte de sistema. Ver a nota no fim do index.html.
   ========================================================================== */

/* Sao variaveis: um arquivo por familia cobre a faixa inteira de peso. */
@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/montserrat-4e656f04-fdc996.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/opensans-8a8b2b0f-d7a547.woff2") format("woff2");
}

@font-face {
  font-family: Roboto;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/roboto-fb5169d9-20b535.woff2") format("woff2");
}

:root {
  --azul: #2c3e97;          /* titulo de secao e destaque */
  --azul-escuro: #2c4098;   /* inicio do gradiente do hero */
  --azul-claro: #2899ce;    /* fim do gradiente do hero */
  --laranja: #f58025;       /* botao, icone, numero */
  --rosa: #cc3366;          /* link da barra de contato */
  --tinta: #333;            /* texto corrido */
  --cinza: #7a7a7a;         /* placeholder */
  --cinza-claro: #ccc;      /* texto do rodape */
  --borda: rgba(0, 0, 0, .1);
  --largura: 1140px;
  --raio: 9px;
}

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

body {
  margin: 0;
  font-family: "Open Sans", Roboto, system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tinta);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, blockquote, figure { margin: 0; }
button { font: inherit; }

.container {
  width: min(100%, var(--largura));
  margin-inline: auto;
  padding-inline: 20px;
}

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

.pular-para-conteudo {
  position: absolute;
  left: -9999px;
}

.pular-para-conteudo:focus {
  left: 5px;
  top: 5px;
  z-index: 100000;
  padding: 12px 24px;
  background: #fff;
  color: var(--azul);
}

/* --------------------------------------------------------------------------
   Botoes
   -------------------------------------------------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: 0;
  border-radius: 3px;
  background: var(--laranja);
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 15px;
  color: #fff;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.botao:hover { background: #d96a13; }

.botao--contorno {
  background: transparent;
  border: 1px solid #fff;    /* medido: branco cheio, e o canto tem 9px */
  border-radius: 9px;
  font-size: 20px;
  font-weight: 500;
  line-height: 20px;
}

.botao--contorno:hover { background: rgba(255, 255, 255, .12); }

/* --------------------------------------------------------------------------
   Cabecalho
   -------------------------------------------------------------------------- */
/* medido no original: barra de contato laranja com 40px, barra do menu azul
   com 97px, texto branco e icone rosa */

/* DIFERENTE DO ORIGINAL, a pedido do Bruno: o menu gruda no topo ao rolar.
   O sticky vai no header inteiro, e nao na barra azul, porque `sticky` so
   gruda dentro do proprio pai: na barra sozinha ele so valeria dentro dos
   137px do cabecalho. O `top` negativo e a altura da faixa de contato, que
   assim rola embora e deixa so o menu colado. E `sticky` nao tira o elemento
   do fluxo, entao a altura das paginas nao muda. */
.cabecalho {
  position: sticky;
  top: -40px;
  z-index: 50;
}

.cabecalho__faixa-contato { background: var(--laranja); }

.cabecalho__faixa-menu {
  background: var(--azul);
  transition: box-shadow .2s;
}

.cabecalho__faixa-menu.grudou { box-shadow: 0 2px 12px rgba(0, 0, 0, .18); }

.cabecalho__contato {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 40px;
  font-size: 13px;
  line-height: 19.5px;
  color: #fff;
}

.cabecalho__contato a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  transition: opacity .2s;
}

.cabecalho__contato a:hover { opacity: .82; }

/* o quadrado do icone e rosa no CSS, mas o desenho em si e pintado de branco */
.cabecalho__contato svg { flex: none; width: 14px; height: 14px; color: #fff; }

.cabecalho__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 115px;   /* no celular a barra e a logo sao maiores que no desktop */
}

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

.cabecalho__nav { display: none; }

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

.cabecalho__nav a {
  display: block;
  padding: 10px 20px;
  font-family: Montserrat, sans-serif;
  font-size: 15px;
  line-height: 20px;
  color: #fff;
  transition: color .2s;
}

.cabecalho__nav a:hover,
.cabecalho__nav a[aria-current="page"] { color: var(--laranja); }

.cabecalho__acoes { display: flex; align-items: center; gap: 12px; }

/* o botao laranja acompanha o menu em toda largura, como no original */
.cabecalho__cotacao { display: inline-flex; }

.cabecalho__menu {
  display: inline-flex;
  padding: 8px;
  border: 0;
  background: none;
  color: #fff;          /* a barra e azul: icone azul aqui some */
  cursor: pointer;
}

/* gaveta do mobile */
.gaveta {
  position: fixed;
  inset: 0;
  z-index: 60;
  visibility: hidden;
}

.gaveta.aberta { visibility: visible; }

.gaveta__fundo {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, .45);
  opacity: 0;
  cursor: default;
  transition: opacity .3s;
}

.gaveta.aberta .gaveta__fundo { opacity: 1; }

/* abre pela esquerda, escolha do Bruno */
.gaveta__painel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  margin-right: auto;
  padding: 24px;
  background: #fff;
  transform: translateX(-100%);
  transition: transform .3s ease;
}

.gaveta.aberta .gaveta__painel { transform: translateX(0); }

/* a gaveta abre pela esquerda: o X acompanha, no canto de dentro */
.gaveta__fechar {
  align-self: flex-end;
  padding: 0;
  border: 0;
  background: none;
  color: var(--azul);
  cursor: pointer;
}

.gaveta__painel nav { margin-top: 24px; }
.gaveta__painel nav ul { list-style: none; margin: 0; padding: 0; }

.gaveta__painel nav a {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--borda);
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  color: var(--tinta);
}

.gaveta__painel nav a:hover { color: var(--laranja); }

.gaveta__painel .botao { margin-top: 24px; }

body.gaveta-aberta { overflow: hidden; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 630px;
  padding: 40px 10px;
  background-image: linear-gradient(169deg, var(--azul-escuro) 0%, var(--azul-claro) 100%);
  color: #fff;
}

/* medido no site no ar em 1440: o conteudo do hero tem 1120px, o titulo
   comeca em 50, o subtitulo em 130 e a grade em 192, e a secao fecha em 656 */
.hero > .container { width: min(100%, var(--largura)); padding-inline: 0; }

.hero h1 {
  font-family: Montserrat, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.hero__texto {
  margin-top: 16px;
  font-size: 14.4px;
  font-weight: 400;
  line-height: 1.45;
  color: #fff;
}

.hero__texto strong { font-weight: 700; }

.hero__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  /* center, e nao start, para a coluna da esquerda ficar centralizada na
     altura em relacao ao formulario, igual ao .dupla da pagina contact */
  align-items: center;
  margin-top: 20px;
  padding-block: 10px;
}

/* coluna da esquerda do hero: botao em cima, video embaixo */
.hero__coluna { text-align: center; }

/* o video fica dentro de uma moldura branca de 10px, com canto de 12 */
.hero__video {
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.hero__video video {
  display: block;
  width: 100%;
  aspect-ratio: 638 / 359;   /* 16:9, medido no original */
  height: auto;
  border-radius: 0;          /* o canto arredondado e da moldura, nao do video */
  background: #000;
}

/* --------------------------------------------------------------------------
   Formulario de cotacao
   -------------------------------------------------------------------------- */
/* cartao branco, como no original */
.cotacao {
  padding: 15px 15px 5px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
}

.cotacao h2 {
  margin-bottom: 20px;
  font-family: Montserrat, sans-serif;
  font-size: 21px;
  font-weight: 700;
  line-height: 25px;      /* medido: 25 no celular, 32 no desktop */
  color: var(--azul);
  text-align: center;
}

.cotacao__campos { display: grid; gap: 10px; }

/* a borda cinza clara e medida: rgba(83,83,83,.13). Ja esteve escrita numa
   regra `.cotacao input` menos especifica que esta, e sumia da tela. */
.cotacao input[type="text"],
.cotacao input[type="email"],
.cotacao input[type="tel"] {
  width: 100%;
  padding: 8px 16px;
  border: 1px solid rgba(83, 83, 83, .13);
  border-radius: var(--raio);
  font: inherit;
  font-size: 15px;
  line-height: 22px;      /* com o padding e a borda fecha os 40 medidos */
  color: var(--tinta);
  background: #fff;
}

.cotacao input::placeholder { color: var(--cinza); }

.cotacao input:focus-visible { outline: 2px solid var(--laranja); }

.cotacao__consentimento {
  display: flex;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
}

.cotacao__consentimento input { flex: none; margin-top: 3px; }

/* medido: 95 de largura e 40 de altura, nao ocupa a linha toda */
.cotacao .botao { padding: 0 24px; min-height: 40px; font-weight: 500; }

.cotacao__aviso {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .75);
}

/* --------------------------------------------------------------------------
   Secoes de conteudo
   -------------------------------------------------------------------------- */
/* o respiro lateral e do container, nao da secao: dobrado, a foto larga deixa
   de encostar na borda em tela entre 768 e 1140 */
.secao { padding-block: 48px; }

.secao--creme { background: #f7f7f9; }

.titulo {
  font-family: Montserrat, sans-serif;
  font-size: 25px;
  line-height: 1;
  font-weight: 600;
  color: var(--azul);
  text-align: center;
}

.titulo--claro { color: #fff; }

/* No original a foto e uma faixa larga recortada, nao a imagem inteira. */
.secao__figura {
  margin: 20px auto 0;
  height: 246px;   /* altura fixa: 246 tanto em 1440 quanto em 390 */
  border-radius: 4px;
  overflow: hidden;
}

.secao__figura img { width: 100%; height: 100%; object-fit: cover; }

/* Entre o titulo e os cartoes o original tem dois containers do Elementor com
   IMAGEM DE FUNDO, nao vazios: o fundo so entra quando o lazy-load do
   Elementor marca a secao com .e-lazyloaded. Medido: fotos de 550x308 em
   112, cartoes em 450. */
.vitrine {
  display: grid;
  gap: 20px;
  margin-top: 20px;
  margin-inline: -10px;   /* no celular a faixa e mais larga que o texto */
  padding: 10px;
}

/* no celular o original centraliza o recorte, e a segunda foto vira cover */
.vitrine__foto {
  height: 300px;
  border-radius: 15px;
  background-position: 50% 50%;
}

.vitrine__foto--a { background-image: url("assets/insta2-79442f.webp"); }
.vitrine__foto--b {
  background-image: url("assets/insta3-c312f7.webp");
  background-size: cover;
}
/* Caixas de icone. A geometria e a mesma nas duas secoes que as usam: cartao
   com 20 de folga em cima e embaixo, icone de 50, 23 ate o titulo, 16 do
   titulo ate o texto. So o numero de linhas do texto muda. */
.beneficios {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;              /* no celular os cartoes ficam mais juntos */
  margin-top: 20px;
}

.beneficio { padding-block: 20px; text-align: center; }

.beneficio__icone {
  display: flex;
  justify-content: center;
  margin-bottom: 23px;
  color: var(--laranja);
}

.beneficio__icone svg { width: 50px; height: 50px; }

.beneficio h3 {
  margin-bottom: 16px;
  font-family: Montserrat, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--azul);
}

.beneficio p { font-size: 15px; line-height: 1.6; color: var(--tinta); }

/* --------------------------------------------------------------------------
   Chamada intermediaria
   -------------------------------------------------------------------------- */
/* o post-7.css do Elementor traz um gradiente de uma cor so: azul claro chapado */
.chamada {
  padding-block: 48px;
  background: #289acf;   /* um fio diferente do azul-claro do hero (#2899ce) */
  color: #fff;
  text-align: center;
}

/* medido no ar: duas linhas de 17px dentro de 547 de largura, com 20 de
   respiro em cima e embaixo */
.chamada__texto {
  max-width: 547px;
  margin: 20px auto;
  font-size: 17px;
  font-weight: 400;
  line-height: 17px;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Depoimentos
   -------------------------------------------------------------------------- */
.depoimentos { padding-block: 50px; }   /* o respiro lateral vem do container */

/* Carrossel. Medido com o Swiper montado: slide de 373 dentro de 1140, ou seja
   tres colunas com 10 de vao; barra laranja de 3px e 10 de recuo interno. */
.carrossel { position: relative; margin-top: 20px; }

.carrossel__janela { overflow: hidden; }

.carrossel__trilho {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.depoimento {
  flex: 0 0 auto;
  width: 100%;
  padding: 0 10px;
  border-left: 3px solid var(--laranja);
}

/* as setas ficam nas bordas do container, por cima do slide */
.carrossel__seta {
  position: absolute;
  top: calc(50% - 8px);
  z-index: 2;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(237, 237, 237, .9);
  font-size: 25px;
  line-height: 25px;
  cursor: pointer;
  transition: color .2s;
}

.carrossel__seta:hover { color: rgba(160, 160, 160, .9); }
.carrossel__seta--anterior { left: 0; }
.carrossel__seta--proxima { right: 0; }

.carrossel__bolinhas {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.carrossel__bolinha {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  opacity: .2;
  cursor: pointer;
  transition: opacity .2s;
}

.carrossel__bolinha[aria-current="true"] { opacity: 1; }

.depoimento blockquote {
  margin-bottom: 20px;
  font-size: 16px;
  font-weight: 400;
  line-height: 25.6px;
  color: var(--tinta);
}

.depoimento figcaption {
  font-size: 16px;
  font-weight: 600;
  line-height: 25.6px;
  color: var(--tinta);
}

/* --------------------------------------------------------------------------
   Rodape
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Foto que aparece ao entrar na tela
   -------------------------------------------------------------------------- */
/* A classe so e ligada pelo JavaScript: sem script, a foto fica visivel do
   mesmo jeito, que e o comportamento seguro. */
.aparece {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.aparece--visivel {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .aparece, .aparece--visivel {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   Paginas internas
   -------------------------------------------------------------------------- */
/* faixa azul logo abaixo do menu, com a frase de abertura da pagina */
.faixa-titulo {
  padding-block: 50px;
  background: var(--azul);
  text-align: center;
}

.faixa-titulo p {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  color: #fff;
}

/* duas colunas de 550 com 20 de vao, texto de um lado e foto do outro */
.dupla {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  /* no celular a coluna e mais larga que o texto do resto da pagina: 370
     numa tela de 390, igual a faixa de fotos da home */
  margin-inline: -10px;
}

.dupla__foto {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.dupla h1, .dupla h2 { margin-bottom: 20px; }
.dupla p { margin-bottom: 14px; font-size: 16px; line-height: 24px; }
.dupla p:last-child { margin-bottom: 0; }

/* lista de vantagens, com recuo de 40 e marcador redondo */
.lista-marcada {
  margin-top: 6px;
  padding-left: 40px;
}

.lista-marcada li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  line-height: 24px;
  color: var(--tinta);
}

.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--laranja);
}

/* bloco de titulo e texto centralizados, sem foto. O respiro de baixo e maior
   que o de cima: 50 em cima, 88 embaixo, nas duas telas. */
.texto-centro { padding-bottom: 88px; text-align: center; }

/* medido: 707 dentro de 1140 e 217 dentro de 350, a mesma proporcao */
.texto-centro p {
  max-width: 62%;
  margin: 20px auto 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--tinta);
}

/* texto corrido de politica e termos. Medidas do original: o miolo tem 1120
   dentro dos 1140, o titulo fecha em 33 e cada subtitulo em 34. */
/* no celular o miolo tambem estoura o container: 370 numa tela de 390 */
.texto-corrido { padding: 10px; margin-inline: -20px; }

.texto-corrido h1, .texto-corrido h2 {
  margin-bottom: 20px;
  font-family: Montserrat, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 26px;
  color: var(--azul);
}

/* medido: 28px de Open Sans com peso 500, nao Montserrat. Em 940 o subtitulo
   mais longo quebra em duas linhas por causa disso. */
.texto-corrido h3 {
  margin: 14px 0 16px;
  font-family: "Open Sans", sans-serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 33.6px;
  color: var(--azul);
}

.texto-corrido p,
.texto-corrido li {
  margin-bottom: 14px;   /* medido: 14 entre paragrafos */
  font-size: 16px;
  line-height: 24px;
  color: var(--tinta);
}

.texto-corrido ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.texto-corrido li { margin-bottom: 0; }
/* nas politicas cada item traz um paragrafo dentro, e ai o passo vai a 38;
   nas listas da pagina de servicos os itens se encostam */
.texto-corrido li > p { margin: 0 0 14px; }
.texto-corrido a { color: var(--azul); text-decoration: underline; }

/* Galeria de fotos de obra, cada uma abre o arquivo cheio. Medido: 3 colunas
   de 373x249 em 1440, 2 de 465x310 em 940 e 1 de 390x260 em 390. A proporcao
   e sempre 3:2 e no celular ela ocupa a tela inteira. */
.galeria {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 20px;
  margin-inline: -20px;
}

.galeria a { display: block; }

.galeria img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* video de apoio no meio do texto */
/* medido: 798 dentro de 1140 e 658 dentro de 940, sempre 70% do container */
.video-apoio {
  display: block;          /* sem isto o margin auto nao centraliza */
  width: min(70%, 798px);
  margin: 0 auto 30px;   /* medido: 40 do video ate o primeiro titulo */
  aspect-ratio: 798 / 449;
  border-radius: 4px;
  background: #000;
}

/* mapa do endereco */
.mapa {
  width: 100%;
  height: 475px;
  margin-top: 20px;
  border: 0;
}

/* lista de telefone, email, endereco e horario da pagina de contato */
.contatos { margin-top: 34px; }

.contatos li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 16px;
  line-height: 24px;
  color: var(--tinta);
}

.contatos svg {
  flex: none;
  width: 18px;
  height: 14px;
  margin-top: 5px;
  color: var(--azul);
}

.contatos a { color: var(--tinta); transition: color .2s; }
.contatos a:hover { color: var(--laranja); }

/* botao que ocupa a linha, acima do titulo da coluna */
.botao--bloco { margin-bottom: 20px; font-weight: 500; }

/* o formulario da pagina de contato nao tem cartao branco: ele mora direto
   sobre o fundo da secao e os campos ocupam a coluna inteira */
.cotacao--larga {
  width: 100%;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* pagina de obrigado: mesma faixa em degrade do hero */
.obrigado {
  padding: 50px 10px;
  background-image: linear-gradient(169deg, var(--azul-escuro) 0%, var(--azul-claro) 100%);
  color: #fff;
  text-align: center;
}

.obrigado h1 {
  font-family: Montserrat, sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

.obrigado__texto {
  margin-top: 40px;
  font-size: 21px;
  line-height: 21px;
  color: #fff;
}

.obrigado__ligar { margin-top: 45px; }

.obrigado__video {
  width: min(100%, 1060px);
  margin-top: 63px;
  aspect-ratio: 1060 / 596;
  border-radius: 4px;
  background: #000;
}

/* aviso de consentimento do formulario de contato */
.consentimento {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  font-size: 12px;
  line-height: 18px;
  color: var(--tinta);
}

.consentimento input { flex: none; width: 13px; height: 13px; margin-top: 3px; }

.aviso-legal {
  margin-top: 14px;
  font-size: 12px;
  line-height: 18px;
  color: var(--tinta);
}

.aviso-legal a { color: #0d6efd; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Rodape
   -------------------------------------------------------------------------- */
/* medido no original: quase preto, nao azul */
/* sem folga lateral propria: quem da o respiro e o container, senao a coluna
   vem 40 mais estreita que no original e o texto ganha uma linha */
.rodape {
  background: rgb(31, 31, 31);
  color: #fff;
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-block: 50px;
}

.rodape__grade > div { padding: 10px; }

.rodape h2 {
  margin-bottom: 20px;   /* medido: titulo 60-79, conteudo comeca em 99 */
  font-family: Montserrat, sans-serif;
  font-size: 19.2px;
  font-weight: 400;
  line-height: 19.2px;
  color: #fff;
}

.rodape p, .rodape li, .rodape a { font-size: 16px; line-height: 25px; }

.rodape__sobre { font-weight: 600; color: var(--cinza-claro); }

/* medido: os itens se encostam, a altura da linha e que da o respiro */
.rodape__lista li, .rodape__lista a { line-height: 26px; }

.rodape__lista a { color: #fff; transition: color .2s; }
.rodape__lista a:hover { color: var(--laranja); }

.rodape__contato li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
}

.rodape__contato li, .rodape__contato a, .rodape__contato span { line-height: 24px; }

/* medido: os icones do rodape sao laranja, so o texto e branco */
.rodape__contato svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 5px;
  color: var(--laranja);
}

.rodape__contato a { color: #fff; transition: color .2s; }
.rodape__contato a:hover { color: var(--laranja); }

/* faixa propria, um tom mais clara que o rodape */
.rodape__base {
  padding: 16px 20px;
  background: rgb(48, 48, 48);
  text-align: center;
  font-size: 16px;
  line-height: 25px;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Botao flutuante de WhatsApp (joinchat no original)
   -------------------------------------------------------------------------- */
.whatsapp {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 1px 6px 24px rgba(7, 94, 84, .24);
  transition: transform .2s;
}

.whatsapp:hover { transform: scale(1.06); }

.whatsapp svg { width: 32px; height: 32px; }

/* ==========================================================================
   Pontos de quebra do original: 767 e 1024
   ========================================================================== */

@media (min-width: 768px) {
  /* medidos contra o site no ar, secao a secao */
  .secao { padding-block: 50px; }
  /* medido: de 768 pra cima o container vai a 1140 ou encosta na tela, sem
     folga lateral. O respiro de 20px so existe abaixo de 768. */
  .container { padding-inline: 0; }

  /* 1fr 1fr com 20 de gap dentro de 10 de folga: 550 em 1440, 450 em 940 */
  .vitrine { grid-template-columns: 1fr 1fr; margin-inline: 0; }
  .vitrine__foto { height: 308px; background-position: 0 0; }
  .vitrine__foto--b { background-size: auto; }
  .chamada { padding-block: 60px; }
  .depoimentos { padding-block: 50px; }
  /* dois por vez no tablet, tres a partir de 1025 (breakpoint do Elementor) */
  .depoimento { width: calc((100% - 10px) / 2); }

  /* tudo medido no site no ar, elemento a elemento */
  .hero { padding: 50px 0 40px; justify-content: flex-start; }
  .hero h1 { font-size: 40px; line-height: 40px; }
  .hero__texto { margin-top: 40px; font-size: 21px; line-height: 21px; }
  /* Era 678fr/402fr, a proporcao medida no original. Passou para a mesma
     conta da pagina contact (1fr 1fr, gap 20, recuo 20) porque o formulario
     do GHL tem largura fixa de 400 mais 16 de padding de cada lado, e nao
     cabia nos 402. Em 1140 isto da 530 por coluna, identico ao .dupla. */
  .hero__grade { grid-template-columns: 1fr 1fr; gap: 0; padding-inline: 0; }
  /* medido: o video fica dentro de dois embrulhos, 10 em cima e 15 embaixo */
  /* a coluna do video tem 678: moldura de 658 com 10 de folga, 15 embaixo */
  .hero__video { margin: 10px 0 15px; }
  /* o cartao tem um embrulho de 10px no original: 402 por fora, 382 o cartao */
  .cotacao { width: min(100%, 382px); margin: 10px auto; padding: 30px; }
  .cotacao h2 { line-height: 32px; }
  /* precisa repetir aqui: a regra do cartao do hero vem depois no arquivo */
  .cotacao--larga { width: 100%; margin: 0; padding: 0; }

  .cabecalho__barra { min-height: 97px; }
  .cabecalho__logo img { width: 84px; }

  .titulo { font-size: 32px; }

  .beneficios { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .beneficios--tres { grid-template-columns: repeat(3, 1fr); }

  .chamada__texto { font-size: 17px; }

  /* tres colunas de 380 no original, com 10px de respiro interno */
  .rodape__grade { grid-template-columns: repeat(3, 1fr); gap: 0; }
}

/* Este bloco fecha o que e das paginas internas a partir de 768. Precisa vir
   ANTES do bloco de 1025, senao sobrescreve o que la esta decidido: foi assim
   que a galeria de servicos voltou a duas colunas no desktop e a pagina
   cresceu 618px. */
@media (min-width: 768px) {
  /* medido: colunas de 550 com 20 de vao dentro dos 1140 */
  .dupla { grid-template-columns: 1fr 1fr; gap: 20px; margin-inline: 0; padding-inline: 10px; }
  .dupla--invertida .dupla__texto { order: 2; }
  .galeria { grid-template-columns: 1fr 1fr; margin-inline: 0; }
  /* precisam vir depois de .secao, que redefine o padding-block */
  .secao--dupla { padding-block: 60px; }
  .texto-centro { padding-bottom: 88px; }
  .texto-corrido { margin-inline: 0; }
  .texto-corrido h1, .texto-corrido h2 { font-size: 32px; line-height: 33px; }

  /* medido: o titulo da coluna do formulario e centralizado */
  .titulo--centro-coluna { text-align: center; }
  .titulo--esquerda { text-align: left; }

  .obrigado h1 { font-size: 40px; line-height: 40px; }
}

@media (min-width: 1025px) {
  .cabecalho__nav { display: block; }
  .cabecalho__cotacao { display: inline-flex; }
  .cabecalho__menu { display: none; }
  .gaveta { display: none; }

  /* medido: 373 de slide dentro de 1140, tres por vez */
  .depoimento { width: calc((100% - 20px) / 3); }

  /* tres colunas de 373x249 no desktop */
  .galeria { grid-template-columns: repeat(3, 1fr); }
}

/* O formulario e um iframe do GHL. O card vira so moldura: sem padding e sem
   titulo local, para o conteudo do GHL encostar na borda branca. O overflow
   recorta o iframe no canto arredondado, e o display:block mata a folga de
   linha de base que iframe herda por ser inline.
   O width e o margin repetem o que o .cotacao--larga faz na contact, para
   anular o "width: min(100%, 382px)" que o desktop impoe ao .cotacao. Sem
   isso o card fica em 382 e espreme os 432 que o formulario ocupa. */
.cotacao--ghl {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* sem cartao branco: o proprio formulario do GHL ja traz o fundo dele, e o
     cartao virava uma segunda moldura em volta. Mesmo tratamento do
     .cotacao--larga na pagina contact. */
  background: none;
  box-shadow: none;
  /* O documento dentro do iframe pinta o proprio fundo de branco opaco
     (body { background-color: #fff }), e por ser cross-origin nenhum CSS
     daqui alcanca. Encolher o iframe para os 432px exatos do formulario
     (400 de largura + 16 de padding de cada lado) faz o branco sobrando
     desaparecer, porque a moldura passa a ter o tamanho do conteudo. */
  max-width: 432px;
  margin-inline: auto;
}
.cotacao--ghl iframe { display: block; }

/* --------------------------------------------------------------------------
   Lupa da galeria
   -------------------------------------------------------------------------- */
/* A foto abre ampliada sobre a propria pagina, em vez de ir para outra aba.
   Clicar em qualquer lugar fecha. O <a> continua apontando para o arquivo:
   se o JS nao rodar, o comportamento antigo volta e nada quebra. */
.lupa {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .85);
  cursor: zoom-out;
}

.lupa.aberta { display: flex; }

.lupa img {
  max-width: min(100%, 1400px);
  max-height: 90vh;
  width: auto;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

.lupa__fechar {
  position: absolute;
  top: 16px;
  right: 20px;
  padding: 6px 14px;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, .15);
  font-size: 26px;
  line-height: 1.2;
  color: #fff;
  cursor: pointer;
}

.lupa__fechar:hover { background: rgba(255, 255, 255, .28); }

.galeria a { cursor: zoom-in; }

/* trava a rolagem do fundo enquanto a foto esta aberta */
body.lupa-aberta { overflow: hidden; }