@charset "utf-8";

/* ============================================================ fontes
   Self-hosted. Nada de CDN: o WebView do WhatsApp bloqueia recurso
   externo e o site abre sem fonte para quem chega por link. */

@font-face {
  font-family: 'Bricolage';
  src: url('../fonts/bricolage-400-800.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-display: swap;
}
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('../fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

/* ============================================================ tokens */

:root {
  --marca: #1a73e8;
  --marca-claro: #57a0ff;
  --marca-fundo: rgba(26, 115, 232, .12);

  --fundo: #070d16;
  --fundo-2: #0c1524;
  --fundo-3: #111d30;
  --borda: rgba(148, 176, 214, .16);
  --borda-viva: rgba(87, 160, 255, .42);

  --txt: #e9f0fa;
  --txt-2: #96a8c2;
  --txt-3: #7a8ea8;   /* clareado: #64778f dava 4.25 de contraste, abaixo do AA */

  --zap: #25d366;

  --display: 'Bricolage', 'Poppins', system-ui, sans-serif;
  --texto: 'Poppins', system-ui, -apple-system, sans-serif;

  --r: 16px;
  --r-g: 26px;
  --wrap: 1200px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================ reset
   `clip` e não `hidden`: hidden cria contexto de scroll e mata
   position:sticky em qualquer descendente. */

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

html, body { overflow-x: clip; }

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--txt);
  font: 400 clamp(1rem, .96rem + .2vw, 1.075rem)/1.65 var(--texto);
  -webkit-font-smoothing: antialiased;
}

/* dl/dd/dt e figure entram no reset: a margem padrão do <dl> escapa por
   margin-collapsing e abre faixa da cor do body entre duas seções. */
h1, h2, h3, h4, p, ul, ol, dl, dd, dt, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[hidden] { display: none !important; }

::selection { background: var(--marca); color: #fff; }

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

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--marca); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 10px 0;
}
.pular:focus { left: 0; }

/* ============================================================ tipografia */

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }

.secao__titulo {
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem);
  margin-bottom: .7rem;
}
.secao__linha {
  color: var(--txt-2); max-width: 58ch; font-size: 1.05rem; margin-bottom: 2.8rem;
}

.link-forte {
  color: var(--marca-claro); font-weight: 600;
  border-bottom: 1px solid var(--borda-viva); padding-bottom: 2px;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.link-forte:hover { color: #fff; border-color: #fff; }

/* ============================================================ botões */

.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .82rem 1.35rem; border-radius: 999px;
  font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn--g { padding: 1.05rem 1.9rem; font-size: 1.02rem; }

.btn--zap { background: var(--zap); color: #062b13; }
.btn--zap:hover { background: #34e678; box-shadow: 0 10px 34px -12px rgba(37, 211, 102, .8); }

.btn--vazado { border-color: var(--borda); color: var(--txt); background: rgba(255, 255, 255, .02); }

/* Botão do topo: branco com o ícone verde. A ação existe, mas não disputa
   atenção com o CTA verde cheio do hero. */
.btn--contato { background: #fff; color: #0d1b2a; }
.btn--contato .btn__ico { background: var(--zap); }
.btn--contato:hover { background: #eef3fa; box-shadow: 0 10px 30px -14px rgba(255, 255, 255, .5); }
.btn--vazado:hover { border-color: var(--borda-viva); background: rgba(87, 160, 255, .08); }

/* Ícone do WhatsApp por mask: uma cor só, escala sem perder nitidez,
   e sem precisar de arquivo externo. */
.btn__ico {
  width: 1.15em; height: 1.15em; flex: none; background: currentColor;
  -webkit-mask: var(--zap-svg) center/contain no-repeat;
  mask: var(--zap-svg) center/contain no-repeat;
}
:root {
  --zap-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.47 14.38c-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.94 1.17-.17.2-.35.22-.65.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.76-1.66-2.06-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.61-.92-2.21-.24-.58-.49-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.3 1.26.49 1.69.63.71.22 1.36.19 1.87.12.57-.09 1.76-.72 2.01-1.41.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35zM12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.87 9.87 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.82 9.82 0 0 0 12.04 2zm0 18.02h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.2-.31a8.17 8.17 0 0 1-1.26-4.38c0-4.53 3.7-8.22 8.24-8.22 2.2 0 4.27.86 5.82 2.42a8.17 8.17 0 0 1 2.41 5.81c0 4.54-3.7 8.23-8.24 8.23z'/%3E%3C/svg%3E");
}

/* ============================================================ topo */

.topo {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7, 13, 22, .72);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.topo.rolou { border-bottom-color: var(--borda); background: rgba(7, 13, 22, .93); }

.topo__linha { display: flex; align-items: center; gap: 1.6rem; height: 78px; }
.marca img { width: 152px; height: auto; }

.nav { display: flex; gap: 1.35rem; margin-left: auto; font-size: .94rem; font-weight: 500; }
.nav a { color: var(--txt-2); position: relative; padding: .3rem 0; transition: color .22s var(--ease); }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--marca-claro); transition: right .3s var(--ease);
}
.nav a:hover { color: var(--txt); }
.nav a:hover::after { right: 0; }

.hamburguer { display: none; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto; }
.hamburguer span { display: block; height: 2px; width: 22px; background: var(--txt); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.hamburguer[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguer[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguer[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-movel { display: none; }

@media (max-width: 1150px) {
  .nav, .topo__cta { display: none; }
  .hamburguer { display: flex; }
  .menu-movel {
    display: flex; flex-direction: column; gap: .3rem;
    padding: .5rem 1.25rem 1.6rem; border-top: 1px solid var(--borda);
  }
  .menu-movel a { padding: .9rem .2rem; color: var(--txt-2); border-bottom: 1px solid var(--borda); font-weight: 500; }
  .menu-movel .btn { margin-top: 1rem; justify-content: center; border-bottom: 0; color: #062b13; }
}

/* ============================================================ hero */

.hero { position: relative; padding: clamp(3.5rem, 2rem + 8vw, 7rem) 0 0; overflow: clip; }
.hero--interno { padding-bottom: clamp(2.5rem, 1rem + 5vw, 4.5rem); }
.hero--curto { padding-bottom: clamp(2rem, 1rem + 3vw, 3rem); }

/* Luz da marca atrás do texto — dá profundidade sem imagem de fundo. */
.hero__luz {
  position: absolute; inset: -30% -10% auto; height: 78vh; pointer-events: none;
  background:
    radial-gradient(52% 46% at 22% 34%, rgba(26, 115, 232, .30), transparent 68%),
    radial-gradient(40% 40% at 78% 18%, rgba(87, 160, 255, .16), transparent 70%);
  filter: blur(6px);
}

.hero__conteudo { position: relative; }

/* ---------------------------------------------------------- hero da home */

.hero--home { padding-bottom: 0; }

.hero__grade { position: relative; }

@media (min-width: 1000px) {
  .hero__grade {
    display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, .78fr);
    gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: center;
    /* teto em px: só com vh, numa janela alta o hero virava uma tela e meia */
    min-height: min(64vh, 600px);
  }
}

/* Mosaico decorativo: duas colunas correndo em sentidos opostos, inclinadas.
   É enfeite — se a animação não rodar, as telas continuam visíveis e paradas. */
.mosaico {
  display: none;
  grid-template-columns: 1fr 1fr; gap: 1rem;
  height: clamp(460px, 62vh, 600px);
  overflow: hidden;
  transform: perspective(1500px) rotateY(-16deg) rotateX(5deg) rotateZ(-2.5deg) scale(1.06);
  transform-origin: left center;
  -webkit-mask: linear-gradient(transparent, #000 14%, #000 80%, transparent);
  mask: linear-gradient(transparent, #000 14%, #000 80%, transparent);
}
@media (min-width: 1000px) { .mosaico { display: grid; } }

.mosaico__col { display: flex; flex-direction: column; gap: 1rem; }
.mosaico__col--a { animation: mosaico-sobe 58s linear infinite; }
.mosaico__col--b { animation: mosaico-desce 58s linear infinite; }

.mosaico img {
  width: 100%; height: auto; flex: none;
  border-radius: 12px; border: 1px solid rgba(148, 176, 214, .18);
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .95);
}

/* -50% porque cada coluna traz a lista duplicada: o loop é contínuo */
@keyframes mosaico-sobe  { from { transform: translateY(0); }    to { transform: translateY(-50%); } }
@keyframes mosaico-desce { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* ---------------------------------------------------------- vitrine */

.vitrine { padding: clamp(2.5rem, 2rem + 2vw, 4rem) 0 clamp(2.5rem, 2rem + 2vw, 4rem); }

.hero__olho {
  display: inline-block; font-size: .82rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--marca-claro); margin-bottom: 1.4rem;
}

/* Sem max-width aqui: o <br> do texto é que define a quebra, e um limite em ch
   fazia a linha quebrar antes dele, deixando "fazem" órfão numa linha só. */
.hero__titulo {
  font-size: clamp(2.6rem, 1.1rem + 5.6vw, 5rem);
}
/* na home o texto divide a dobra com o mosaico: fonte menor para a primeira
   linha caber até o <br> e o título continuar em duas linhas */
.hero--home .hero__titulo {
  /* calibrado para "Sites e sistemas que fazem" caber inteiro na primeira
     linha da coluna: acima disso, "fazem" cai sozinha e fica órfã */
  font-size: clamp(2.5rem, .9rem + 3vw, 3.5rem);
  letter-spacing: -.045em; margin-bottom: 1.5rem;
}
.hero__titulo--m { font-size: clamp(2.3rem, 1.1rem + 5vw, 4.4rem); max-width: 19ch; }
/* cursor só enquanto o JS está escrevendo; sem JS não aparece nada */
.hero__titulo em.escrevendo::after {
  content: ''; display: inline-block; width: .06em; height: .78em;
  /* a margem negativa devolve o espaço que o cursor ocupa, senão o ponto
     final da frase fica solto a meio caractere de distância */
  margin: 0 -.12em 0 .06em; vertical-align: baseline;
  background: var(--marca-claro); animation: piscar 1.05s steps(1) infinite;
}
@keyframes piscar { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* a frase troca de largura: reservar a linha evita o texto abaixo pular */
.hero__titulo em { min-height: 1em; }

.hero__titulo em {
  /* Sem sublinhado: com a expressão inteira trocando em azul, o traço virava
     ruído — e mudava de largura a cada frase. */
  font-style: normal; color: var(--marca-claro);
}

.hero__texto { color: var(--txt-2); font-size: clamp(1.02rem, .95rem + .4vw, 1.2rem); max-width: 58ch; margin-bottom: 2.2rem; }
.hero__acoes { display: flex; flex-wrap: wrap; gap: .9rem; }

.migalha { font-size: .86rem; color: var(--txt-3); margin-bottom: 1.6rem; display: flex; gap: .55rem; flex-wrap: wrap; }
.migalha a { color: var(--txt-2); }
.migalha a:hover { color: var(--marca-claro); }

/* ---------------------------------------------------------- esteira */

.esteira {
  /* sem overflow o trilho vaza da caixa e a máscara não alcança as pontas */
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.esteira__trilho {
  display: flex; gap: 1.2rem; width: max-content;
  animation: correr 88s linear infinite;
}
/* O CSS NUNCA esconde as telas: quem aplica o estado inicial da cascata é o
   JS, que também o remove — inclusive por um timer de segurança. Assim nenhum
   cenário em que a animação não roda (aba em segundo plano, por exemplo) deixa
   a prova da hero invisível. */
.esteira img { transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .esteira .esteira__trilho { animation-play-state: paused; }
.js .esteira.entrou .esteira__trilho { animation-play-state: running; }
.esteira__trilho img {
  width: clamp(230px, 26vw, 380px); height: auto; flex: none;
  border-radius: 12px; border: 1px solid var(--borda);
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .9);
}
@keyframes correr { to { transform: translateX(-50%); } }

.esteira__legenda {
  text-align: center; color: var(--txt-3); font-size: .84rem; margin-top: 1.2rem;
}

/* ============================================================ números */

.numeros { border-block: 1px solid var(--borda); background: var(--fundo-2); }
.numeros__grade {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: clamp(2rem, 1rem + 2.5vw, 3.2rem) 0;
}
.numeros__grade > div { text-align: center; padding: .4rem 1rem; }
.numeros__grade > div + div { border-left: 1px solid var(--borda); }
.numeros dt {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 2.6vw, 3.2rem); letter-spacing: -.045em;
  color: var(--marca-claro); line-height: 1;
}
.numeros dd { color: var(--txt-2); font-size: .88rem; margin-top: .55rem; }

@media (max-width: 720px) {
  .numeros__grade { grid-template-columns: repeat(2, 1fr); gap: 1.8rem 0; }
  .numeros__grade > div:nth-child(odd) { border-left: 0; }
  .numeros__grade > div:nth-child(n+3) { border-top: 1px solid var(--borda); padding-top: 1.8rem; }
}

/* ============================================================ seções */

section { padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0; }
.hero { padding-top: clamp(3rem, 2rem + 4vw, 5rem); }

/* ---------------------------------------------------------- serviços */

.servicos__lista { border-top: 1px solid var(--borda); }

.serv {
  display: grid; grid-template-columns: auto 1fr auto; align-items: start;
  gap: clamp(1rem, .5rem + 2vw, 2.6rem);
  padding: clamp(1.6rem, 1rem + 1.6vw, 2.4rem) 0;
  border-bottom: 1px solid var(--borda);
  position: relative; transition: padding-left .35s var(--ease);
}
.serv::before {
  content: ''; position: absolute; inset: 0 -1.5rem; border-radius: var(--r);
  background: linear-gradient(90deg, rgba(26, 115, 232, .10), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease); z-index: -1;
}
.serv:hover::before { opacity: 1; }
.serv:hover { padding-left: 1.2rem; }

.serv__num {
  font-family: var(--display); font-weight: 600; font-size: .95rem;
  color: var(--txt-3); padding-top: .55rem; font-variant-numeric: tabular-nums;
}
.serv__nome {
  display: block; font-family: var(--display); font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.15rem); letter-spacing: -.035em;
  line-height: 1.1; margin-bottom: .5rem;
}
.serv__dor { display: block; color: var(--marca-claro); font-size: .95rem; margin-bottom: .35rem; }
.serv__resumo { display: block; color: var(--txt-2); max-width: 62ch; font-size: .98rem; }

.serv__seta {
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borda);
  align-self: center; flex: none; position: relative;
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.serv__seta::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px;
  border-top: 2px solid var(--txt-2); border-right: 2px solid var(--txt-2);
  transform: rotate(45deg) translate(-1px, 1px);
  transition: border-color .3s var(--ease);
}
.serv:hover .serv__seta { border-color: var(--marca-claro); background: var(--marca-fundo); transform: translateX(4px); }
.serv:hover .serv__seta::after { border-color: var(--marca-claro); }

@media (max-width: 640px) {
  .serv { grid-template-columns: auto 1fr; }
  .serv__seta { display: none; }
}

/* ---------------------------------------------------------- projetos */

.projetos__grade {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
}
.projetos__grade--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.proj {
  background: var(--fundo-2); border: 1px solid var(--borda); border-radius: var(--r-g);
  overflow: hidden; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.proj:hover { transform: translateY(-6px); border-color: var(--borda-viva); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95); }

.proj__tela { display: block; position: relative; overflow: hidden; background: var(--fundo-3); }
.proj__tela img {
  width: 100%; aspect-ratio: 1200 / 750; object-fit: cover; object-position: top center;
  transition: transform .6s var(--ease), filter .4s var(--ease);
  filter: saturate(.94);
}
.proj:hover .proj__tela img { transform: scale(1.035); filter: saturate(1.05); }

.proj__abrir {
  position: absolute; right: .85rem; bottom: .85rem;
  background: rgba(7, 13, 22, .84); backdrop-filter: blur(6px);
  /* cor fixa: o fundo desta etiqueta é sempre escuro (fica sobre o print), então
     ela não pode herdar o azul escuro que o bloco claro define para --marca-claro */
  border: 1px solid rgba(87, 160, 255, .5); color: #7db4ff;
  font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem .75rem; border-radius: 999px;
  opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.proj:hover .proj__abrir { opacity: 1; transform: none; }

.proj__info { padding: 1.35rem 1.5rem 1.6rem; }
.proj__info h3 { font-size: 1.18rem; letter-spacing: -.025em; }
.proj__meta { color: var(--marca-claro); font-size: .8rem; font-weight: 500; margin: .3rem 0 .7rem; }
.proj__nota { color: var(--txt-2); font-size: .92rem; line-height: 1.6; }

.projetos__mais { margin-top: 2.6rem; }

/* ---------------------------------------------------------- motivos */

.motivos { background: var(--fundo-2); border-block: 1px solid var(--borda); }
.motivos__grade {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(1.6rem, 1rem + 2vw, 2.8rem);
}
.motivos__grade--2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.motivos article { border-top: 2px solid var(--marca); padding-top: 1.3rem; }
.motivos h3 { font-size: 1.24rem; margin-bottom: .6rem; letter-spacing: -.03em; }
.motivos p { color: var(--txt-2); font-size: .96rem; }

/* ---------------------------------------------------------- passos */

.passos__lista { counter-reset: p; display: grid; gap: 0; border-top: 1px solid var(--borda); }
.passos__lista li {
  counter-increment: p; display: grid; grid-template-columns: 5rem 1fr;
  column-gap: 1.2rem; row-gap: .4rem; padding: 1.8rem 0;
  border-bottom: 1px solid var(--borda);
}
.passos__lista li::before {
  content: counter(p, decimal-leading-zero);
  font-family: var(--display); font-weight: 700; font-size: 1.9rem;
  color: var(--marca); letter-spacing: -.04em; line-height: 1;
  grid-row: 1;
}
/* O <li> tem três filhos de grade (o número, o h3 e o p). Sem isto o parágrafo
   cai na coluna do número — 5rem de largura, uma palavra por linha. */
.passos__lista li > * { grid-column: 2; }
.passos h3 { font-size: 1.22rem; margin-bottom: .45rem; }
.passos p { color: var(--txt-2); font-size: .97rem; max-width: 66ch; }

@media (max-width: 560px) {
  .passos__lista li { grid-template-columns: 1fr; gap: .5rem; }
}

/* ---------------------------------------------------------- destaque de texto */

.destaque-texto { padding-block: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.destaque-texto__caixa {
  border-left: 3px solid var(--marca); padding: .3rem 0 .3rem clamp(1.2rem, .8rem + 1.6vw, 2.4rem);
  max-width: 74ch;
}
.destaque-texto h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); margin-bottom: .9rem; }
.destaque-texto p { color: var(--txt-2); }
.destaque-texto p + p { margin-top: .9rem; }
.destaque-texto__bairros { color: var(--txt-3); font-size: .95rem; }

/* ---------------------------------------------------------- entrega */

.entrega { background: var(--fundo-2); border-block: 1px solid var(--borda); }
.entrega__lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem 2.4rem; }
.entrega__lista li {
  position: relative; padding-left: 2rem; color: var(--txt-2);
  padding-block: .7rem; border-bottom: 1px solid var(--borda);
}
.entrega__lista li::before {
  content: ''; position: absolute; left: 0; top: 1.15rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--marca); box-shadow: 0 0 0 4px var(--marca-fundo);
}

/* ---------------------------------------------------------- cidades */

.cidades__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .9rem; }

.cid {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; border: 1px solid var(--borda); border-radius: var(--r);
  background: var(--fundo-2);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.cid:hover { border-color: var(--borda-viva); transform: translateY(-3px); }

/* Cores intercaladas em ciclo de 3, não em par/ímpar: com par/ímpar o padrão
   vira xadrez e se desfaz quando o número de colunas muda no responsivo. */
.cid:nth-child(3n-1) { background: rgba(26, 115, 232, .14); border-color: rgba(26, 115, 232, .3); }
.cid:nth-child(3n)   { background: var(--fundo-3); }
.cid:nth-child(3n-1):hover { background: rgba(26, 115, 232, .22); }
.cid:nth-child(3n):hover   { background: #16263d; }
.cid:nth-child(3n-2):hover { background: var(--fundo-3); }

.cid__nome { font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -.025em; }
.cid__uf { color: var(--txt-3); font-size: .78rem; font-weight: 600; flex: none; }

/* ---------------------------------------------------------- vizinhas */

.vizinhas { padding-block: clamp(2.5rem, 1.5rem + 2vw, 3.5rem); border-top: 1px solid var(--borda); }
.vizinhas__titulo { font-size: 1rem; color: var(--txt-3); font-weight: 600; margin-bottom: 1.1rem; letter-spacing: 0; }
.vizinhas__lista { display: flex; flex-wrap: wrap; gap: .55rem; }
.vizinhas__lista a {
  border: 1px solid var(--borda); border-radius: 999px; padding: .5rem 1rem;
  font-size: .88rem; color: var(--txt-2);
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.vizinhas__lista a span { color: var(--txt-3); font-size: .78rem; }
.vizinhas__lista a:hover { border-color: var(--borda-viva); color: var(--txt); background: var(--marca-fundo); }

/* ---------------------------------------------------------- faq */

.faq { background: var(--fundo-2); border-block: 1px solid var(--borda); }
.faq__lista { border-top: 1px solid var(--borda); max-width: 900px; }

.faq__item { border-bottom: 1px solid var(--borda); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  letter-spacing: -.025em; transition: color .25s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--marca-claro); }

.faq__mais { position: relative; width: 20px; height: 20px; flex: none; }
.faq__mais::before, .faq__mais::after {
  content: ''; position: absolute; inset: 0; margin: auto; background: var(--marca-claro);
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.faq__mais::before { width: 15px; height: 2px; }
.faq__mais::after { width: 2px; height: 15px; }
.faq__item[open] .faq__mais::after { transform: rotate(90deg); opacity: 0; }

.faq__resp { padding-bottom: 1.5rem; color: var(--txt-2); max-width: 70ch; }

/* ---------------------------------------------------------- cta final */

.cta-final { padding-block: clamp(3rem, 2rem + 3vw, 5rem); }
.cta-final__caixa {
  border: 1px solid var(--borda-viva); border-radius: var(--r-g);
  background:
    radial-gradient(80% 130% at 50% 0%, rgba(26, 115, 232, .22), transparent 68%),
    var(--fundo-2);
  padding: clamp(2.4rem, 1.5rem + 4vw, 4.5rem) clamp(1.4rem, 1rem + 3vw, 3.5rem);
  text-align: center;
}
.cta-final h2 { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.2rem); margin-bottom: .9rem; }
.cta-final p { color: var(--txt-2); max-width: 54ch; margin: 0 auto 2rem; }
.cta-final__nota { color: var(--txt-3); font-size: .86rem; margin: 1.4rem auto 0; }

/* ============================================================ blocos claros
   O site inteiro escuro pesa numa página longa. As seções alternam em blocos:
   redefinir os tokens dentro de `.claro` reaproveita todo o CSS existente,
   sem duplicar regra nenhuma. */

.claro {
  --txt: #10233a;
  --txt-2: #4b5f78;
  --txt-3: #566982;   /* escurecido: o UF dos cards ficava em 4,34 sobre o azul claro */
  --borda: rgba(16, 35, 58, .13);
  --borda-viva: rgba(26, 115, 232, .5);
  --fundo-2: #ffffff;
  --fundo-3: #e8eff8;
  /* o azul claro do tema escuro não tem contraste em fundo claro */
  --marca-claro: #0b57c9;
  --marca-fundo: rgba(26, 115, 232, .09);
  background: #f3f7fc;
  color: var(--txt);
}
.claro--branco { background: #ffffff; }

.claro .proj { box-shadow: 0 2px 4px -2px rgba(16, 35, 58, .10); }
.claro .proj:hover { box-shadow: 0 26px 50px -30px rgba(16, 35, 58, .5); }
.claro .serv::before { background: linear-gradient(90deg, rgba(26, 115, 232, .09), transparent 62%); }
.claro .cid:nth-child(3n-1) { background: rgba(26, 115, 232, .10); }
.claro .cid:nth-child(3n)   { background: var(--fundo-3); }
.claro .cid:nth-child(3n):hover   { background: #dde7f4; }
.claro .cid:nth-child(3n-2):hover { background: var(--fundo-3); }
.claro .motivos, .claro .faq, .claro .entrega { background: transparent; border-block: 0; }
.claro .motivos article { border-top-color: var(--marca); }

/* ============================================================ rodapé */

.rodape {
  position: relative; overflow: hidden;
  background: var(--fundo-2);
  border-top: 1px solid var(--borda);
  padding-top: clamp(3.5rem, 2rem + 4vw, 5.5rem);
}

/* luz da marca vazando do topo — amarra o rodapé ao hero sem repetir o gradiente */
.rodape__brilho {
  position: absolute; inset: 0; pointer-events: none;
  /* centro no topo do próprio elemento e esmaecendo para dentro: com o centro
     na borda inferior, o gradiente ainda tinha cor onde a caixa terminava e
     desenhava uma diagonal dura atrás da logo. */
  background: radial-gradient(64% 74% at 24% 0%, rgba(26, 115, 232, .20), transparent 68%);
}
.rodape__conteudo { position: relative; }

.rodape__topo {
  display: grid; grid-template-columns: 1.35fr .8fr 1.5fr;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem);
}

.rodape__marca img { width: 178px; margin-bottom: 1.3rem; }
.rodape__marca p { color: var(--txt-2); font-size: .93rem; max-width: 38ch; margin-bottom: 1.8rem; }

/* contato como bloco, não como botão: o rodapé não precisa de mais um verde cheio */
.rodape__zap {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: .85rem 1.25rem .85rem 1rem;
  border: 1px solid rgba(37, 211, 102, .35); border-radius: var(--r);
  background: rgba(37, 211, 102, .07);
  transition: border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.rodape__zap:hover { border-color: var(--zap); background: rgba(37, 211, 102, .13); transform: translateY(-2px); }
.rodape__zap .btn__ico { width: 26px; height: 26px; background: var(--zap); flex: none; }
.rodape__zap strong { display: block; font-family: var(--display); font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em; }
.rodape__zap em { display: block; font-style: normal; color: var(--txt-3); font-size: .78rem; margin-top: 1px; }

.rodape__col h3 {
  font-family: var(--texto); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em; color: var(--txt-3);
  margin-bottom: 1.2rem;
}
.rodape__col > a {
  display: block; color: var(--txt-2); font-size: .94rem; padding: .34rem 0;
  transition: color .2s var(--ease), transform .2s var(--ease);
}
.rodape__col > a:hover { color: var(--txt); transform: translateX(3px); }

/* cidades como pílulas: 13 links em lista dupla viravam parede de texto */
.rodape__cidades { display: flex; flex-wrap: wrap; gap: .45rem; }
.rodape__cidades a {
  display: inline-flex; align-items: baseline; gap: .3rem;
  border: 1px solid var(--borda); border-radius: 999px;
  padding: .42rem .85rem; font-size: .86rem; color: var(--txt-2);
  transition: border-color .25s var(--ease), color .25s var(--ease), background-color .25s var(--ease);
}
.rodape__cidades a span { color: var(--txt-3); font-size: .68rem; font-weight: 600; letter-spacing: .04em; }
.rodape__cidades a:hover { border-color: var(--borda-viva); color: var(--txt); background: var(--marca-fundo); }

.rodape__marcas {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem;
  padding: 1.5rem 0; border-top: 1px solid var(--borda);
  font-size: .88rem;
}
.rodape__marcas span { color: var(--txt-3); font-size: .74rem; text-transform: uppercase; letter-spacing: .12em; }
.rodape__marcas a { color: var(--txt-2); transition: color .2s var(--ease); }
.rodape__marcas a:hover { color: var(--marca-claro); }

.rodape__base {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between;
  padding: 1.3rem 0 2.2rem; border-top: 1px solid var(--borda);
  color: var(--txt-3); font-size: .8rem;
}

@media (max-width: 900px) {
  .rodape__topo { grid-template-columns: 1fr 1fr; }
  .rodape__marca { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .rodape__topo { grid-template-columns: 1fr; gap: 2.2rem; }
}

/* ============================================================ whatsapp flutuante
   Link de verdade, não onclick: no celular o toque precisa cair no <a>. */

.zap-flutua {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; padding: 0;
  background: var(--zap); color: #062b13; border-radius: 50%;
  box-shadow: 0 14px 40px -14px rgba(37, 211, 102, .75);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.zap-flutua .btn__ico { width: 30px; height: 30px; }
.zap-flutua:hover { transform: translateY(-3px); box-shadow: 0 20px 50px -16px rgba(37, 211, 102, .9); }

/* Entra só depois que o CTA do topo da página saiu da tela, e sai quando o CTA
   final aparece — para nunca haver dois botões verdes competindo ao mesmo tempo. */
.js .zap-flutua { opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; }
.js .zap-flutua.aparece {
  opacity: 1; visibility: visible; transform: none; pointer-events: auto;
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.zap-flutua .btn__ico { width: 1.5em; height: 1.5em; }

@media (max-width: 560px) {
  .zap-flutua { width: 54px; height: 54px; right: .9rem; bottom: .9rem; }
}

/* ============================================================ revelação
   Estado base VISÍVEL. A animação é enfeite, nunca condição de leitura:
   se o observer não disparar, o conteúdo continua lá. */

[data-revelar] { opacity: 1; }

.js [data-revelar] { opacity: 0; transform: translateY(22px); }
.js [data-revelar].dentro {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .esteira__trilho { animation: none; transform: none; }
  .mosaico__col { animation: none; }
  .esteira img { transition: none; }
  .hero__titulo em.escrevendo::after { display: none; }
  .js [data-revelar] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------- ramos da cidade */

.ramos__grade { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 3rem; }
.ramo {
  border: 1px solid var(--borda); border-radius: 999px; padding: .6rem 1.15rem;
  font-size: .92rem; color: var(--txt-2); background: var(--fundo-2);
}
.ramos__texto {
  border-left: 3px solid var(--marca);
  padding-left: clamp(1.2rem, .8rem + 1.6vw, 2.4rem); max-width: 74ch;
}
.ramos__texto h2, .ramos__texto h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.95rem); margin-bottom: .8rem; }
.ramos__texto p { color: var(--txt-2); }
.ramos__texto--solo .ramos__grade { margin: 1.8rem 0 0; }

/* ---------------------------------------------------------- fotos de campo */

.campo__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; }
.campo__item {
  margin: 0; border-radius: var(--r-g); overflow: hidden;
  background: var(--fundo-2); border: 1px solid var(--borda);
  transition: transform .4s var(--ease), border-color .4s var(--ease);
}
.campo__item:hover { transform: translateY(-5px); border-color: var(--borda-viva); }
.campo__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.campo__item figcaption { padding: 1.1rem 1.3rem 1.35rem; }
.campo__item strong { display: block; font-family: var(--display); font-size: 1.05rem; letter-spacing: -.02em; }
.campo__item span { display: block; color: var(--marca-claro); font-size: .82rem; font-weight: 500; margin-top: .25rem; }