/* Ceres · soluções em tecnologia */

/* Grafite fosco, nao preto puro. O #0d0d0d antigo endurecia a pagina inteira.
   Este tom e claro o bastante para se ver a diferenca lado a lado com o preto
   antigo, e ainda mantem todo o texto, o amarelo da marca e o wordmark branco
   da logo acima de 10:1 (AAA). Ao mudar --preto, mudar junto o rgba do .topo
   e o meta theme-color do index.html, que nao usam a variavel. */
:root {
  --preto: #23262b;
  --superficie: #2d3138;
  --superficie-2: #30343b;
  --linha: #4a505a;
  --texto: #f4f5f6;
  --texto-2: #c3c8d0;
  --amarelo: #ffd400;
  --amarelo-escuro: #e6bf00;
  --sobre-amarelo: #1a1500;
  --max: 1120px;
  --raio: 8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

body {
  margin: 0;
  background: var(--preto);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  padding-bottom: 92px;
}

img, video { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
figcaption { color: var(--texto-2); font-size: 14px; margin-top: 10px; }

a, button { font: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
  border-radius: 4px;
}
.botao:focus-visible, .flutuante:focus-visible, .pular:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: -9999px;
  background: var(--amarelo);
  color: var(--sobre-amarelo);
  padding: 12px 18px;
  font-weight: 800;
  z-index: 100;
  min-height: 44px;
}
.pular:focus { left: 12px; top: 12px; }

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(35, 38, 43, .88);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* Sem suporte a backdrop-filter o topo precisa voltar a ser opaco,
   senao o conteudo passa por tras e o wordmark branco some. */
@supports not (backdrop-filter: blur(10px)) {
  .topo { background: rgba(35, 38, 43, .97); }
}

.faixa {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.marca {
  display: block;
  text-decoration: none;
  min-width: 128px;
}

/* Logo oficial da Ceres. O arquivo e o wordmark em branco sobre fundo
   transparente, entao ele so funciona sobre o preto da marca.
   O PNG estava com 866px de largura para aparecer a 143px, e o topo e fixo,
   entao ele pesava no primeiro paint. Agora sao 286px (2x do maior uso), em
   webp com o png ao lado como reserva. */
.marca picture { display: block; }
.marca-logo {
  display: block;
  width: auto;
  height: 52px;
}
.marca-logo-rodape { height: 46px; }

@media (max-width: 640px) {
  .marca-logo { height: 42px; }
  .marca-logo-rodape { height: 40px; }
}

.topo nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
}

.topo nav a,
.link-toque,
.rodape a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.topo nav a {
  color: var(--texto-2);
  text-decoration: none;
  font-size: 15px;
  padding: 8px 4px;
}
.topo nav a:hover { color: var(--amarelo); }

.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: 58px 20px 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 304px);
  gap: 42px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.06;
  letter-spacing: 0;
  margin: 0 0 12px;
}

.hero-local {
  color: var(--texto-2);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-bottom: 12px;
  text-decoration: none;
}
.hero-local:hover { color: var(--amarelo); }
.hero-local svg { width: 19px; height: 19px; color: var(--amarelo); flex: 0 0 auto; }

.linha-apoio {
  color: var(--texto-2);
  font-size: 19px;
  margin: 0 0 12px;
  max-width: 52ch;
}

.nota-google {
  color: var(--texto);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  text-decoration: none;
}
.nota-google:hover { color: var(--amarelo); }
.nota-google-hero { margin-bottom: 18px; }

.acoes-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.botao,
.botao-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 850;
  cursor: pointer;
}

.botao {
  background: var(--amarelo);
  color: var(--sobre-amarelo);
  border: 2px solid var(--amarelo);
}
.botao:hover {
  background: var(--amarelo-escuro);
  border-color: var(--amarelo-escuro);
}
.botao .ico, .flutuante .ico { width: 22px; height: 22px; fill: currentColor; }

.botao-secundario {
  background: transparent;
  color: var(--texto);
  border: 1px solid rgba(255,255,255,.14);
}
.botao-secundario:hover {
  color: var(--amarelo);
  border-color: var(--amarelo);
}
.botao-contorno { margin-top: 4px; }

.hero-chips {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hero-chips li {
  color: var(--texto);
  border: 1px solid rgba(255,255,255,.14);
  background: transparent;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 15px;
}

/* O video do hero e vertical 9:16. A 304px de largura ele fecha em 540px de
   altura, que e o teto antes de empurrar o h1 e os botoes para fora da dobra. */
.hero-video {
  width: min(100%, 304px);
  justify-self: end;
}
.hero-video .video-facade {
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--superficie);
}
.hero-video figcaption {
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--texto-2);
}

.secao {
  max-width: var(--max);
  margin: 0 auto;
  padding: 64px 20px;
}

/* A faixa alternada sangra na largura toda, mas o conteudo dela tem que cair
   na mesma coluna das outras secoes. Antes isso era feito com max-width e
   margem automatica em cada filho, e qualquer regra posterior com `margin:`
   abreviado zerava essas margens: o h2 e o texto de apoio iam para a borda e
   ficavam 140px fora da coluna do resto. Centralizar pelo padding do proprio
   container nao tem esse efeito colateral. */
.secao-alt {
  background: var(--superficie-2);
  max-width: none;
  padding-left: max(20px, calc((100% - var(--max)) / 2 + 20px));
  padding-right: max(20px, calc((100% - var(--max)) / 2 + 20px));
}

.secao h2,
.chamada-final h2 {
  font-size: clamp(26px, 3.4vw, 36px);
  line-height: 1.14;
  letter-spacing: 0;
  margin: 0 0 10px;
}

.secao h2::after,
.chamada-final h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  background: var(--amarelo);
  margin-top: 12px;
  border-radius: 2px;
}

.secao-apoio {
  color: var(--texto-2);
  margin: 16px 0 30px;
  max-width: 62ch;
}

.cartoes,
.passos {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.cartao,
.passos li,
.onde-card,
.avaliacao-card,
.video-card {
  background: var(--superficie);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}

.cartao,
.passos li,
.onde-card,
.avaliacao-card {
  padding: 20px;
}

.ico-cartao {
  width: 30px;
  height: 30px;
  color: var(--amarelo);
  margin-bottom: 12px;
}
.cartao h3,
.passos h3,
.onde-card h3 {
  margin: 0 0 6px;
  font-size: 19px;
}
.cartao p,
.passos p,
.sobre-texto p,
.texto-secundario,
.avaliacao-topo p,
.avaliacoes-resumo p {
  margin: 0;
  color: var(--texto-2);
  font-size: 16px;
}
.passos p + p { margin-top: 12px; }

.link-servico {
  border-top: 1px solid var(--linha);
  color: var(--amarelo);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 18px;
  padding-top: 12px;
  text-decoration: none;
  font-weight: 800;
}
.link-servico:hover { color: var(--texto); }

/* Sao 7 servicos num grid de 3 colunas: o setimo caia sozinho na ultima linha
   com dois vaos vazios ao lado. Ele passa a ocupar a linha inteira e vira um
   cartao deitado, com o texto a esquerda e a chamada a direita. */
.cartao-largo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.cartao-largo .ico-cartao {
  margin-bottom: 0;
  flex: 0 0 auto;
}
.cartao-largo .cartao-corpo { flex: 1 1 380px; }
.cartao-largo .link-servico {
  flex: 0 0 auto;
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
.link-servico svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex: 0 0 auto;
}

/* Tres videos a 300px ocupam 940px dos 1120px da faixa. Com dois videos a
   232px sobravam 320px de vao de cada lado, que era o problema. Video 9:16
   ganha 1,8px de altura para cada 1px de largura, entao 300px e o ponto em
   que a faixa fica cheia sem a secao voltar aos 900px de antes. */
.videos-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 300px));
  gap: 20px;
  justify-content: center;
}

.video-card {
  overflow: hidden;
  max-width: 300px;
  display: flex;
  flex-direction: column;
}
.video-card figcaption {
  padding: 12px 14px 14px;
  margin-top: 0;
  font-size: 13px;
  line-height: 1.35;
  min-height: 52px;
  display: flex;
  align-items: center;
}
.video-facade,
.video-card video,
.hero-video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--preto);
}
/* O JS troca o botao por um <video> de verdade no clique. No hero ele precisa
   herdar a moldura do botao, senao a borda e o raio somem no play. */
.hero-video video {
  border-radius: var(--raio);
  border: 1px solid rgba(255,255,255,.14);
  object-fit: cover;
}
.video-facade {
  position: relative;
  border: 0;
  padding: 0;
  color: var(--amarelo);
  cursor: pointer;
}
.video-facade img,
.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* No canto, e nao no centro. Centralizado, o triangulo caia em cima do
   assunto de todo quadro: as maos na bancada num video, e o texto da placa
   que aparece nos vídeos. O disco escuro garante o contraste sobre
   qualquer imagem, sem precisar escurecer o quadro inteiro. */
.play {
  position: absolute;
  inset: auto auto 12px 12px;
  display: grid;
}
.play::before {
  content: "";
  grid-area: 1 / 1;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(13, 15, 18, .62);
  box-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.play svg {
  grid-area: 1 / 1;
  place-self: center;
  width: 26px;
  height: 26px;
  margin-left: 3px;
  fill: var(--amarelo);
}
.video-facade:hover .play::before { background: rgba(13, 15, 18, .82); }

.num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid var(--amarelo);
  background: transparent;
  color: var(--amarelo);
  font-weight: 850;
  font-size: 18px;
  margin-bottom: 12px;
}

.onde-grade {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  gap: 18px;
}
address {
  color: var(--texto);
  font-style: normal;
  margin: 8px 0 14px;
}
.links-mapa {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
}
/* O mapa vem carregado, sem clique. O overflow hidden e necessario porque o
   iframe do Google nao respeita o border-radius do pai sozinho. */
.mapa-quadro {
  aspect-ratio: 16 / 10;
  background: var(--superficie-2);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  overflow: hidden;
}
.mapa-quadro iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.avaliacoes-resumo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 26px 0 18px;
}
.avaliacoes-resumo > strong {
  color: var(--texto);
  font-size: clamp(44px, 8vw, 64px);
  line-height: .95;
}
/* Seis avaliacoes em tres colunas: duas linhas cheias, sem cartao orfao. Os
   textos tem tamanhos bem diferentes, entao o cartao vira coluna flex e a data
   e empurrada para o rodape, para as linhas fecharem no mesmo lugar. */
.avaliacoes-grade {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 28px;
}
.avaliacao-card {
  display: flex;
  flex-direction: column;
}
.avaliacao-card blockquote { flex: 1 1 auto; }
.avaliacao-topo {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
}
.avaliacao-topo cite {
  color: var(--texto);
  display: block;
  font-style: normal;
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
}
/* Em coluna de ~350px o corpo padrao de 17px fica pesado e a linha de meta
   compete com o nome. */
.avaliacao-topo p { font-size: 13px; margin-top: 3px; }
.avaliacao-card blockquote p { font-size: 15px; line-height: 1.5; }
.avaliacao-card .estrelas svg { width: 15px; height: 15px; }
.estrelas {
  display: flex;
  gap: 3px;
  color: var(--amarelo);
}
.estrelas svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}
.estrelas-preenchidas svg {
  fill: currentColor;
  stroke: none;
}
blockquote {
  margin: 0;
  color: var(--texto);
}
blockquote p {
  margin: 0;
}
.avaliacao-data {
  color: var(--texto-2);
  font-size: 14px;
  margin: 16px 0 0;
}

/* O texto do "Sobre" sao dois paragrafos curtos. Ao lado da galeria em duas
   colunas ele deixava uns 900px de vao vazio a esquerda, entao os dois blocos
   viraram um embaixo do outro e a galeria ocupa a largura inteira.
   O max-width vai no paragrafo, e nao no bloco: estreitar o bloco jogaria o
   texto para o meio da faixa, desalinhado do h2. */
.sobre-texto { margin-bottom: 30px; }
.sobre-texto p { max-width: 62ch; }
.sobre-texto p + p { margin-top: 14px; }

/* As quatro fotos foram recortadas para 3:4 no arquivo-fonte, entao a fileira
   fecha sem corte nenhum do object-fit. */
.galeria {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}
.galeria figure {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.galeria img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--raio);
  border: 1px solid var(--linha);
}
.galeria figcaption {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
}

.link {
  color: var(--amarelo);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 750;
}
.link:hover { color: var(--texto); }

.chamada-final {
  background: var(--preto);
  padding: 64px 20px;
}
/* Menos 40px porque aqui o padding lateral fica no container, e nao dentro da
   caixa de 1120px como nas .secao. Sem isso a chamada final nasce 20px a
   esquerda de todo o resto da pagina. */
.chamada-final > div {
  max-width: calc(var(--max) - 40px);
  margin: 0 auto;
}
.chamada-final p {
  color: var(--texto-2);
  max-width: 56ch;
}

.rodape {
  border-top: 1px solid rgba(255,255,255,.14);
  background: var(--preto);
  color: var(--texto);
}
.rodape-grade {
  max-width: var(--max);
  margin: 0 auto;
  padding: 34px 20px 16px;
  display: flex;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.credito {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px 42px;
  color: var(--texto-2);
  font-size: 14px;
}
/* Sem esta regra o link nasce no azul padrao do navegador, que sobre o
   grafite fica ilegivel. Discreto no repouso, porque e credito e nao CTA. */
.credito a {
  color: var(--texto-2);
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.credito a:hover,
.credito a:focus-visible { color: var(--amarelo); }

/* So o icone, em botao redondo. Com a palavra "WhatsApp" escrita, o pulso
   acompanhava a pilula inteira e ficava chamativo demais para um elemento
   que fica fixo na tela a pagina toda. O texto continua no HTML como .sr,
   entao leitor de tela e busca continuam encontrando. */
.flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--amarelo);
  color: var(--sobre-amarelo);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.34);
}
.flutuante .ico { width: 28px; height: 28px; }

/* Pulso do botao flutuante. O anel e um ::before atras do botao, e nao um
   box-shadow animado, porque animar box-shadow repinta a cada quadro; assim
   so transform e opacity mudam, que a GPU resolve sozinha.
   Fica em pausa no hover e no foco, para nao piscar debaixo do cursor.
   O bloco de prefers-reduced-motion la em cima ja desliga a animacao. */
.flutuante::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--amarelo);
  z-index: -1;
  animation: pulso-whatsapp 2.4s cubic-bezier(.22, .61, .36, 1) infinite;
}
.flutuante:hover::before,
.flutuante:focus-visible::before { animation-play-state: paused; }

@keyframes pulso-whatsapp {
  0%   { transform: scale(1);    opacity: .45; }
  65%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (max-width: 920px) {
  .faixa {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
  .topo nav { justify-content: flex-start; }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 34px;
  }
  /* No mobile o video entra depois de todo o texto do hero. A 300px ele
     acrescenta 533px de rolagem antes de "Serviços", entao encolhe junto
     com a viewport. */
  .hero-video {
    justify-self: center;
    width: min(78vw, 300px);
  }
  .cartoes,
  .passos,
  .onde-grade {
    grid-template-columns: 1fr;
  }
  /* Os tres videos continuam em fileira e so encolhem juntos: cair para duas
     colunas deixaria o terceiro sozinho na segunda linha. */
  .videos-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-card { max-width: none; }
  .galeria,
  .avaliacoes-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .faixa,
  .hero,
  .secao,
  .chamada-final,
  .rodape-grade,
  .credito {
    padding-left: 16px;
    padding-right: 16px;
  }
  .hero h1 { font-size: clamp(31px, 10vw, 40px); }
  .linha-apoio { font-size: 17px; }
  .acoes-hero,
  .links-mapa {
    align-items: stretch;
    flex-direction: column;
  }
  .botao,
  .botao-secundario {
    width: 100%;
  }
  .videos-grade {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  /* Em coluna unica, tres videos 9:16 empilhados viram rolagem demais, entao
     aqui a largura fica menor do que no desktop. */
  .video-card {
    width: min(100%, 270px);
    max-width: none;
  }
  .mapa-quadro { aspect-ratio: 4 / 3; }
  .avaliacoes-grade { grid-template-columns: minmax(0, 1fr); }
  .flutuante {
    right: 12px;
    bottom: 12px;
  }
}