/* =========================================================
MOBILI CENTER: catálogo de alta conversão
========================================================= */

:root {
  --vermelho: #e11b22;
  --vermelho-cl: #ff3a41;
  --vermelho-esc: #b31419;
  --grafite: #1c1f24;
  --grafite-2: #545a63;
  --grafite-3: #878e99;
  --linha: #e6e9ee;
  --linha-2: #f0f2f5;
  --fundo: #f6f7f9;
  --branco: #fff;
  --zap: #25d366;
  --zap-esc: #1da851;

  --raio: 14px;
  --raio-g: 20px;

  /* profundidade em camadas: sombra curta para contorno, longa para elevação */
  --sombra-1: 0 1px 2px rgba(16, 20, 28, .04), 0 2px 6px rgba(16, 20, 28, .05);
  --sombra-2: 0 2px 6px rgba(16, 20, 28, .06), 0 14px 30px -10px rgba(16, 20, 28, .16);
  --sombra-3: 0 6px 16px rgba(16, 20, 28, .08), 0 28px 60px -16px rgba(16, 20, 28, .26);
  --sombra-vermelha: 0 6px 20px -6px rgba(225, 27, 34, .5);
  --sombra-zap: 0 6px 20px -6px rgba(37, 211, 102, .55);

  /* nomes antigos mantidos para não quebrar regras existentes */
  --sombra: var(--sombra-1);
  --sombra-alta: var(--sombra-3);

  --curva: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--grafite);
  background: var(--branco);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { letter-spacing: -.025em; }

::selection { background: rgba(225, 27, 34, .16); }

:focus-visible {
  outline: 3px solid rgba(225, 27, 34, .35);
  outline-offset: 2px;
  border-radius: 6px;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

.container {
  width: min(1240px, 100% - 40px);
  margin-inline: auto;
}

/* ---------------- botões ---------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 12px 22px;
  font-weight: 650;
  font-size: 15px;
  line-height: 1.2;
  overflow: hidden;
  transition: transform .18s var(--curva), box-shadow .18s var(--curva),
              background .18s, border-color .18s, color .18s;
}

/* brilho que atravessa o botão ao passar o mouse */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28) 50%, transparent 80%);
  transform: translateX(-120%);
  transition: transform .6s var(--curva);
}
.btn:hover::after { transform: translateX(120%); }

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-zap {
  background: linear-gradient(180deg, #2ee06f, var(--zap));
  color: #fff;
  box-shadow: var(--sombra-zap);
}
.btn-zap:hover { background: linear-gradient(180deg, var(--zap), var(--zap-esc)); box-shadow: 0 10px 26px -6px rgba(37,211,102,.65); }

.btn-vermelho {
  background: linear-gradient(180deg, var(--vermelho-cl), var(--vermelho));
  color: #fff;
  box-shadow: var(--sombra-vermelha);
}
.btn-vermelho:hover { background: linear-gradient(180deg, var(--vermelho), var(--vermelho-esc)); box-shadow: 0 10px 26px -6px rgba(225,27,34,.6); }

.btn-linha {
  background: #fff;
  color: var(--grafite);
  border-color: var(--linha);
  box-shadow: var(--sombra-1);
}
.btn-linha:hover { border-color: var(--grafite-3); box-shadow: var(--sombra-2); }
.btn-linha::after { display: none; }

.btn-bloco { width: 100%; }

/* ---------------- topo ---------------- */
.topbar {
  background: var(--grafite);
  color: #cfd3d8;
  font-size: 13.5px;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 48px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.topbar-contatos { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar a:hover { color: #fff; }

/* Instagram nas cores da marca, já em repouso, para ler como botão */
.topbar-insta {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 18px 7px 14px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 650;
  font-size: 13.5px;
  line-height: 1;
  background: linear-gradient(105deg,
    #feda75 0%, #fa7e1e 22%, #d62976 54%, #962fbf 78%, #4f5bd5 100%);
  box-shadow: 0 4px 14px -5px rgba(214, 41, 118, .8),
              inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .18s var(--curva), box-shadow .18s, filter .18s;
}
.topbar-insta svg { flex: none; }
.topbar-insta:hover {
  color: #fff;
  transform: translateY(-1px);
  filter: saturate(1.15) brightness(1.07);
  box-shadow: 0 8px 22px -5px rgba(214, 41, 118, .95),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
/* ganha contorno e sombra só depois que a página rola */
.cabecalho.rolado {
  border-bottom-color: var(--linha);
  box-shadow: 0 4px 24px -12px rgba(16, 20, 28, .3);
  background: rgba(255, 255, 255, .93);
}
.cabecalho .container {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 78px;
}
.logo img { height: 44px; width: auto; }

.nav { display: flex; gap: 26px; margin-left: 8px; }
.nav a {
  font-size: 15px;
  font-weight: 550;
  color: var(--grafite-2);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--grafite); border-bottom-color: var(--vermelho); }
.nav a.atual { color: var(--grafite); border-bottom-color: var(--vermelho); }

.cabecalho-acoes { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.btn-orcamento { position: relative; }
.btn-orcamento .contador {
  background: var(--vermelho);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

.menu-toggle { display: none; background: none; border: 0; padding: 8px; }

/* ---------------- hero ---------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0%, #fbfbfc 45%, var(--fundo) 100%);
  border-bottom: 1px solid var(--linha);
  padding: 66px 0 58px;
  text-align: center;
}

/* halo vermelho difuso atrás do título */
.hero::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: -260px;
  left: 50%;
  width: 900px;
  height: 620px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(225, 27, 34, .13), transparent 72%);
  pointer-events: none;
}

/* malha discreta, dá textura sem competir com o conteúdo */
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background-image:
    linear-gradient(rgba(28, 31, 36, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 31, 36, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 78%);
  pointer-events: none;
}

.hero h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.1;
  letter-spacing: -.035em;
  font-weight: 800;
}
.hero h1 .destaque {
  background: linear-gradient(120deg, var(--vermelho-cl), var(--vermelho) 55%, var(--vermelho-esc));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .sub {
  margin: 0 auto 30px;
  max-width: 660px;
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--grafite-2);
}

/* ---------------- busca ---------------- */
.busca-caixa { max-width: 720px; margin: 0 auto; }
.busca-campo {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 16px;
  box-shadow: var(--sombra-2);
  transition: border-color .2s, box-shadow .2s var(--curva), transform .2s var(--curva);
}
.busca-campo:hover { box-shadow: var(--sombra-3); }
.busca-campo:focus-within {
  border-color: var(--vermelho);
  box-shadow: 0 0 0 4px rgba(225, 27, 34, .13), var(--sombra-3);
  transform: translateY(-1px);
}
.busca-campo:focus-within svg { color: var(--vermelho); }
.busca-campo svg { transition: color .2s; }
.busca-campo svg { margin-left: 18px; flex: none; color: var(--grafite-3); }
.busca-campo input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  padding: 18px 14px;
  font-size: 17px;
  color: var(--grafite);
  min-width: 0;
}
.busca-campo input::placeholder { color: var(--grafite-3); }
.busca-limpar {
  border: 0;
  background: none;
  color: var(--grafite-3);
  padding: 10px 14px;
  font-size: 20px;
  line-height: 1;
  display: none;
}
.busca-limpar:hover { color: var(--grafite); }
.busca-campo.tem-texto .busca-limpar { display: block; }

.sugestoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}
.sugestoes span { font-size: 14px; color: var(--grafite-3); align-self: center; margin-right: 4px; }
.chip-sug {
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  color: var(--grafite-2);
  transition: border-color .15s, color .15s;
}
.chip-sug:hover { border-color: var(--vermelho); color: var(--vermelho); }

/* ---------------- barra de confiança ---------------- */
.confianca { border-bottom: 1px solid var(--linha); background: #fff; }
.confianca .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 22px 0;
}
.confianca .item { display: flex; gap: 12px; align-items: flex-start; }
.confianca .icone { color: var(--vermelho); flex: none; margin-top: 2px; }
.confianca strong { display: block; font-size: 15px; }
.confianca small { color: var(--grafite-2); font-size: 13.5px; line-height: 1.4; display: block; }

/* ---------------- catálogo ---------------- */
.catalogo { padding: 40px 0 80px; }

.catalogo-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.catalogo-topo h1 { margin: 0; font-size: clamp(22px, 2.6vw, 28px); letter-spacing: -.02em; }
.contagem { color: var(--grafite-2); font-size: 14.5px; }
.contagem b { color: var(--grafite); }

.filtros { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.filtro-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* a linha de categorias vira blocos por família, com um traço separando */
#filtro-tipo { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; }

.cat-grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  position: relative;
  padding-left: 18px;
}
.cat-grupo:first-child { padding-left: 0; }
.cat-grupo:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  border-left: 1px solid var(--linha);
}
.cat-grupo-nome {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grafite-3);
  margin-right: 2px;
}
.filtro-rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grafite-3);
  font-weight: 700;
  margin-right: 4px;
  min-width: 74px;
}
.chip {
  border: 1px solid var(--linha);
  background: #fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--grafite-2);
  font-weight: 550;
  box-shadow: var(--sombra-1);
  transition: transform .18s var(--curva), box-shadow .18s, border-color .18s, background .18s, color .18s;
}
.chip:hover {
  border-color: var(--grafite-3);
  transform: translateY(-1px);
  box-shadow: var(--sombra-2);
}
.chip.ativo {
  background: linear-gradient(180deg, #34383f, var(--grafite));
  border-color: var(--grafite);
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(28, 31, 36, .55);
}
.chip .n { opacity: .55; font-size: 12.5px; margin-left: 3px; }

/* ---------------- grade de produtos ---------------- */
.grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 20px;
}

.card {
  position: relative;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-1);
  transition: box-shadow .28s var(--curva), border-color .28s, transform .28s var(--curva);
}
.card:hover {
  box-shadow: var(--sombra-3);
  border-color: rgba(225, 27, 34, .3);
  transform: translateY(-6px);
}

/* fio vermelho que cresce no topo do cartão */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2;
  background: linear-gradient(90deg, var(--vermelho-cl), var(--vermelho));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--curva);
}
.card:hover::before { transform: scaleX(1); }

.card-foto {
  position: relative;
  aspect-ratio: 1;
  background: linear-gradient(155deg, #fcfcfd 0%, #eef0f4 100%);
  padding: 14px;
  display: block;
  overflow: hidden;
}
.card-foto img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform .5s var(--curva);
}
.card:hover .card-foto img { transform: scale(1.07); }

.card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  background: rgba(28, 31, 36, .72);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 5px 11px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .28s;
}
.card:hover .card-tag { background: rgba(225, 27, 34, .92); }
.card-corpo {
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.card-nome {
  font-size: 15px;
  font-weight: 650;
  line-height: 1.32;
  margin: 0;
}
.card-nome a:hover { color: var(--vermelho); }
.card-nome mark { background: #ffe9a8; color: inherit; padding: 0 1px; border-radius: 2px; }
.card-acoes { margin-top: auto; display: flex; gap: 8px; }
.card-acoes .btn { padding: 9px 12px; font-size: 13.5px; flex: 1; }
.btn-add {
  flex: none !important;
  width: 42px;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}
.btn-add.dentro {
  background: var(--grafite);
  border-color: var(--grafite);
  color: #fff;
}

/* ---------------- vazio (converte busca sem resultado) ---------------- */
.vazio {
  border: 2px dashed var(--linha);
  border-radius: 16px;
  padding: 48px 28px;
  text-align: center;
  background: var(--fundo);
}
.vazio .emoji { font-size: 38px; line-height: 1; margin-bottom: 12px; }
.vazio h1, .vazio h2, .vazio h3 { margin: 0 0 8px; font-size: 21px; }
.vazio p { margin: 0 auto 22px; max-width: 520px; color: var(--grafite-2); }
.vazio .termo { color: var(--vermelho); font-weight: 700; }
.vazio-acoes { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------------- seção sobre ---------------- */
.sobre { background: var(--fundo); border-top: 1px solid var(--linha); padding: 66px 0; }
.sobre-texto { max-width: 800px; }
.sobre .numeros { margin-top: 46px; padding-top: 38px; border-top: 1px solid var(--linha); }
.sobre h2 { margin: 0 0 16px; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.02em; }
.sobre p { color: var(--grafite-2); margin: 0 0 14px; }
/* ---------------- linha do tempo ----------------
   Eixo horizontal com os cards alternando acima e abaixo.
   No celular vira uma lista vertical com o eixo à esquerda. */
.trajetoria { position: relative; }

/* o eixo fica exatamente no centro, pois as faixas de cima e de baixo
   são 1fr cada e a linha dos pontos ocupa a faixa do meio */
.trajetoria::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2px solid var(--linha);
}

.linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr auto 1fr;
  column-gap: 20px;
  min-height: 288px;
  position: relative;
}
.linha-tempo > li { display: contents; }

.linha-tempo > li:nth-child(1) > * { grid-column: 1; }
.linha-tempo > li:nth-child(2) > * { grid-column: 2; }
.linha-tempo > li:nth-child(3) > * { grid-column: 3; }
.linha-tempo > li:nth-child(4) > * { grid-column: 4; }

.js .marco-card {
  grid-row: 1;
  align-self: end;
  margin-bottom: 13px;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: 12px;
  padding: 14px 15px;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease, box-shadow .18s, border-color .18s;
}
.marco-ponto {
  grid-row: 2;
  justify-self: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--vermelho);
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--linha);
  transition: transform .2s, box-shadow .2s;
}
.js .marco-fase {
  grid-row: 3;
  align-self: start;
  margin-top: 13px;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--vermelho);
  opacity: 0;
  transition: opacity .5s ease;
}

/* pares invertem: rótulo em cima, card embaixo */
.linha-tempo > li:nth-child(even) .marco-card {
  grid-row: 3;
  align-self: start;
  margin-bottom: 0;
  margin-top: 13px;
  transform: translateY(-12px);
}
.linha-tempo > li:nth-child(even) .marco-fase {
  grid-row: 1;
  align-self: end;
  margin-top: 0;
  margin-bottom: 13px;
}

.linha-tempo > li:nth-child(2) .marco-card,
.linha-tempo > li:nth-child(2) .marco-fase { transition-delay: .12s; }
.linha-tempo > li:nth-child(3) .marco-card,
.linha-tempo > li:nth-child(3) .marco-fase { transition-delay: .24s; }
.linha-tempo > li:nth-child(4) .marco-card,
.linha-tempo > li:nth-child(4) .marco-fase { transition-delay: .36s; }

.linha-tempo .visivel { opacity: 1; transform: none; }

.marco-card strong { display: block; font-size: 16px; line-height: 1.3; margin-bottom: 3px; }
.marco-card em {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 650;
  color: var(--vermelho);
  margin-bottom: 8px;
}
.marco-card p { margin: 0; font-size: 14px; color: var(--grafite-2); line-height: 1.45; }

.marco-card:hover { box-shadow: var(--sombra-alta); border-color: #d3d8de; }

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

/* no celular o eixo vai para a esquerda e os marcos empilham */
@media (max-width: 880px) {
  .trajetoria::before { display: none; }
  .linha-tempo {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    min-height: 0;
    padding-left: 30px;
    margin-left: 7px;
    border-left: 2px solid var(--linha);
  }
  .linha-tempo > li { display: block; position: relative; padding-bottom: 26px; }
  .linha-tempo > li:last-child { padding-bottom: 0; }
  .linha-tempo > li > * { grid-column: auto; grid-row: auto; }
  .linha-tempo > li .marco-card,
  .linha-tempo > li:nth-child(even) .marco-card {
    margin: 0;
    text-align: left;
    transform: translateY(10px);
  }
  .linha-tempo > li .marco-fase,
  .linha-tempo > li:nth-child(even) .marco-fase {
    margin: 0 0 8px;
    text-align: left;
  }
  .linha-tempo .visivel { transform: none; }
  .marco-ponto { position: absolute; left: -38px; top: 3px; }
}

/* ---------------- faixa de números ----------------
   Ocupa a largura da página, quatro colunas centralizadas.
   Os itens sobem ao aparecer na tela, um após o outro, e os
   valores numéricos contam de zero até o total. */
.numeros-faixa {
  background: var(--fundo);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  padding: 40px 0;
}

.numeros {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.js .numeros li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 7px;
  padding: 4px 6px;
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.numeros li.visivel { opacity: 1; transform: none; }
.numeros li:nth-child(2) { transition-delay: .1s; }
.numeros li:nth-child(3) { transition-delay: .2s; }
.numeros li:nth-child(4) { transition-delay: .3s; }

/* separador entre colunas, some na primeira */
.numeros li + li::after {
  content: "";
  position: absolute;
  left: -10px;
  top: 14%;
  height: 72%;
  border-left: 1px solid var(--linha);
}

.numeros li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vermelho);
  transition: transform .2s, box-shadow .2s;
}
.numeros li:hover::before {
  transform: scale(1.5);
  box-shadow: 0 0 0 5px rgba(225, 27, 34, .14);
}

.numeros b {
  font-size: clamp(28px, 3.4vw, 37px);
  line-height: 1;
  color: var(--vermelho);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  transition: transform .2s;
}
.numeros li:hover b { transform: translateY(-2px); }
.numeros span { font-size: 14px; color: var(--grafite-2); max-width: 170px; }

@media (prefers-reduced-motion: reduce) {
  .numeros li { opacity: 1; transform: none; transition: none; }
}

/* ---------------- rodapé ---------------- */
/* rodapé claro: o único bloco escuro da home é a faixa "Fábrica própria" */
.rodape {
  background: var(--branco);
  color: var(--grafite-2);
  border-top: 1px solid var(--linha);
  padding: 56px 0 26px;
  font-size: 14.5px;
}
.rodape .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.rodape h4 { color: var(--grafite); font-size: 15px; margin: 0 0 14px; letter-spacing: -.01em; }
.rodape a { transition: color .16s; }
.rodape a:hover { color: var(--vermelho); }
.rodape ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.rodape-logo { display: inline-block; margin-bottom: 16px; }
.rodape-logo img { height: 40px; }
.rodape-fim {
  border-top: 1px solid var(--linha);
  margin-top: 38px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--grafite-3);
}

/* ---------------- flutuantes ---------------- */
.zap-flutuante {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--zap);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .42);
  transition: transform .16s;
}
.zap-flutuante:hover { transform: scale(1.07); }

.barra-orcamento {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 150%);
  z-index: 75;
  width: min(680px, calc(100% - 40px));
  background: var(--grafite);
  color: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra-alta);
  padding: 12px 12px 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.barra-orcamento.visivel { transform: translate(-50%, 0); }
.barra-orcamento .texto { flex: 1; min-width: 0; }
.barra-orcamento strong { display: block; font-size: 15px; }
.barra-orcamento small { color: #b9bec5; font-size: 13px; }
.barra-orcamento .btn { white-space: nowrap; }
.barra-limpar { background: none; border: 0; color: #b9bec5; font-size: 13px; text-decoration: underline; padding: 6px; }
.barra-limpar:hover { color: #fff; }

/* ---------------- seções genéricas ---------------- */
.secao { padding: 56px 0; }
.secao-cinza { background: var(--fundo); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.secao-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.secao-topo h2 { margin: 0; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: -.02em; }
.secao-sub { margin: 6px 0 0; color: var(--grafite-2); font-size: 15px; }
.secao-sub b { color: var(--grafite); }

/* ---------------- vitrine de categorias ----------------
Cartão deitado: a foto é uma miniatura ao lado do texto, então
três por linha deixam a imagem menor, não maior. */
.cat-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cat-card {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  transition: box-shadow .16s, border-color .16s, transform .16s;
}
.cat-card:hover {
  box-shadow: var(--sombra);
  border-color: var(--vermelho);
  transform: translateY(-1px);
}
.cat-foto {
  flex: none;
  width: 74px;
  height: 74px;
  background: var(--fundo);
  border-radius: 8px;
  padding: 6px;
}
.cat-foto img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cat-texto strong { font-size: 15px; line-height: 1.28; }
.cat-texto span { font-size: 13px; color: var(--grafite-3); }
.cat-card:hover .cat-texto strong { color: var(--vermelho); }
.cat-seta { flex: none; color: var(--grafite-3); transition: transform .16s, color .16s; }
.cat-card:hover .cat-seta { color: var(--vermelho); transform: translateX(3px); }

/* ---------------- faixa de busca (página de produtos) ---------------- */
.faixa-busca {
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
  padding: 26px 0;
}
.faixa-busca .busca-caixa { max-width: 780px; }

.busca-enviar {
  margin: 6px;
  padding: 11px 22px !important;
  border-radius: 9px;
  flex: none;
}

/* ---------------- trilha de navegação ---------------- */
.trilha-faixa { border-bottom: 1px solid var(--linha); background: #fff; }
.trilha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 14px 0;
  font-size: 13.5px;
  color: var(--grafite-3);
}
.trilha a { color: var(--grafite-2); }
.trilha a:hover { color: var(--vermelho); }
.trilha strong { color: var(--grafite); font-weight: 600; }

/* ---------------- página de produto ---------------- */
.produto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 40px 0 56px;
  align-items: start;
}
.produto-foto {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 36px;
  display: grid;
  place-items: center;
  position: sticky;
  top: 100px;
}
.produto-foto img { max-height: 440px; width: auto; object-fit: contain; mix-blend-mode: multiply; }

.produto-tag {
  display: inline-block;
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--grafite-2);
  padding: 5px 12px;
  margin-bottom: 14px;
}
.produto-tag:hover { border-color: var(--vermelho); color: var(--vermelho); }
.produto-info h1 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.16;
  letter-spacing: -.02em;
}
.produto-desc { color: var(--grafite-2); margin: 0 0 22px; font-size: 16px; }

.produto-preco {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 16px 18px;
  margin-bottom: 18px;
}
.produto-preco strong { display: block; font-size: 17px; margin-bottom: 4px; }
.produto-preco span { font-size: 14px; color: var(--grafite-2); }

.produto-acoes { display: grid; gap: 10px; margin-bottom: 22px; }

.produto-selos {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 13.5px;
  color: var(--grafite-2);
}
.produto-selos li::before { content: "✓"; color: var(--vermelho); font-weight: 700; margin-right: 6px; }

.bloco-titulo {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--grafite-3);
  margin: 0 0 12px;
}

.especs { border-top: 1px solid var(--linha); margin: 0 0 30px; }
.especs div {
  display: grid;
  grid-template-columns: 116px 1fr;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 14.5px;
}
.especs dt { color: var(--grafite-3); font-weight: 600; }
.especs dd { margin: 0; color: var(--grafite-2); }

.cores { display: grid; gap: 16px; }
.cores-grupo { display: grid; gap: 8px; }
.cores-rotulo { font-size: 13px; font-weight: 700; color: var(--grafite-2); }
.cores-lista { display: flex; flex-wrap: wrap; gap: 7px; }
.cor {
  border: 1px solid var(--linha);
  background: #fff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13px;
  color: var(--grafite-2);
}

/* ---------------- páginas de conteúdo (sobre, contato) ---------------- */
.pagina-topo {
  background: var(--fundo);
  border-bottom: 1px solid var(--linha);
  padding: 46px 0;
}
.pagina-topo h1 {
  margin: 0 0 12px;
  font-size: clamp(26px, 3.8vw, 40px);
  line-height: 1.15;
  letter-spacing: -.02em;
  max-width: 820px;
}
.pagina-sub {
  margin: 0;
  max-width: 680px;
  font-size: clamp(15px, 1.7vw, 18px);
  color: var(--grafite-2);
}

.pagina { padding: 48px 0 70px; }
.pagina-grade { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: start; }
.coluna-texto { max-width: 800px; margin-inline: auto; }

.secao-topo.centralizado { justify-content: center; text-align: center; margin-bottom: 26px; }
.secao-topo.centralizado .secao-sub { margin-inline: auto; }

/* dentro da faixa, os números ficam abaixo da linha do tempo */
.numeros-faixa .numeros {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
}

.pagina .texto h2 {
  margin: 34px 0 12px;
  font-size: 22px;
  letter-spacing: -.01em;
}
.pagina .texto h2:first-child { margin-top: 0; }
.pagina .texto p { margin: 0 0 14px; color: var(--grafite-2); font-size: 16px; }

.lateral { display: grid; gap: 18px; position: sticky; top: 100px; }

.ficha {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 20px;
  background: #fff;
}
.ficha h3 { margin: 0 0 12px; font-size: 16px; }
.ficha .especs { margin-bottom: 16px; }
.ficha .especs div { grid-template-columns: 92px 1fr; font-size: 13.5px; }

.cta-bloco {
  background: var(--fundo);
  border: 1px solid var(--linha);
  border-radius: 14px;
  padding: 34px 28px;
  margin-top: 38px;
  text-align: center;
}
.cta-bloco.largo { margin-top: 44px; }
.cta-bloco h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.01em; }

/* o segundo seletor precisa existir para vencer ".pagina .texto p",
   que é mais específico e reimporia margin-left: 0, jogando a caixa
   do parágrafo para a esquerda mesmo com o texto centralizado */
.cta-bloco p,
.pagina .texto .cta-bloco p {
  margin: 0 auto 20px;
  color: var(--grafite-2);
  max-width: 520px;
}

/* fora do bloco de destaque (ex.: "Onde estamos"), os botões seguem à esquerda */
.cta-acoes { display: flex; gap: 10px; flex-wrap: wrap; }
.cta-bloco .cta-acoes { justify-content: center; }

/* ---------------- contato ---------------- */
.contato-grade {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 52px;
}
.contato-card {
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: 22px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: box-shadow .16s, border-color .16s, transform .16s;
}
.contato-card:hover {
  box-shadow: var(--sombra-alta);
  border-color: #d3d8de;
  transform: translateY(-2px);
}
.contato-card svg { color: var(--grafite-3); margin-bottom: 10px; }
.contato-card.destaque svg { color: var(--zap); }
.contato-card strong { font-size: 15px; }
.contato-card span { font-size: 17px; font-weight: 650; color: var(--vermelho); }
.contato-card em { font-style: normal; font-size: 13px; color: var(--grafite-3); margin-top: 4px; }

.contato-endereco {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
}
.contato-endereco h2 { margin: 0 0 14px; font-size: 24px; letter-spacing: -.01em; }
.contato-endereco p { color: var(--grafite-2); margin: 0 0 16px; }
.endereco strong { color: var(--grafite); }
.mapa {
  border: 1px solid var(--linha);
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--fundo);
}
.mapa iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   CAMADA DE ACABAMENTO
   Profundidade, movimento e revelação ao rolar.
   ========================================================= */

/* ---------------- revelação ao rolar ----------------
   REGRA DE OURO: nada é escondido a menos que o JS tenha assumido
   a responsabilidade de mostrar de volta. A classe .js só entra no
   <html> se o script rodar, então sem JS o conteúdo aparece normal. */
.js .a-revelar {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--curva), transform .6s var(--curva);
}
.a-revelar.visivel { opacity: 1; transform: none; }

.js .a-revelar:nth-child(2) { transition-delay: .06s; }
.js .a-revelar:nth-child(3) { transition-delay: .12s; }
.js .a-revelar:nth-child(4) { transition-delay: .18s; }
.js .a-revelar:nth-child(5) { transition-delay: .24s; }
.js .a-revelar:nth-child(6) { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .js .a-revelar { opacity: 1; transform: none; transition: none; }
}

/* ---------------- atalhos de busca ---------------- */
.chip-sug {
  box-shadow: var(--sombra-1);
  transition: transform .18s var(--curva), box-shadow .18s, border-color .18s, color .18s;
}
.chip-sug:hover {
  transform: translateY(-2px);
  box-shadow: var(--sombra-2);
  border-color: rgba(225, 27, 34, .45);
}

/* ---------------- barra de confiança ---------------- */
.confianca .item {
  padding: 14px;
  border-radius: var(--raio);
  transition: background .22s, transform .22s var(--curva);
}
.confianca .item:hover { background: var(--fundo); transform: translateY(-2px); }
/* o padding encolhe a caixa de conteúdo do SVG (box-sizing: border-box),
   então o desenho fica no tamanho original dentro de um quadro maior */
.confianca .icone {
  width: 42px;
  height: 42px;
  padding: 10px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(225,27,34,.14), rgba(225,27,34,.05));
  margin-top: 0;
  transition: transform .22s var(--curva);
}
.confianca .item:hover .icone { transform: scale(1.08) rotate(-3deg); }

/* ---------------- cartões de categoria ---------------- */
.cat-card { box-shadow: var(--sombra-1); border-radius: var(--raio); }
.cat-card:hover { box-shadow: var(--sombra-2); transform: translateY(-3px); }
.cat-foto {
  background: linear-gradient(155deg, #fcfcfd, #eef0f4);
  transition: transform .35s var(--curva);
}
.cat-card:hover .cat-foto { transform: scale(1.05); }

/* ---------------- cartões de contato ---------------- */
.contato-card { border-radius: var(--raio-g); box-shadow: var(--sombra-1); position: relative; overflow: hidden; }
.contato-card:hover { box-shadow: var(--sombra-3); transform: translateY(-4px); border-color: rgba(225,27,34,.28); }
.contato-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 160px at 0% 0%, rgba(225,27,34,.07), transparent 70%);
  opacity: 0;
  transition: opacity .3s;
}
.contato-card:hover::before { opacity: 1; }
.contato-card > * { position: relative; }

/* ---------------- ficha e página de produto ---------------- */
.ficha { border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.produto-foto {
  border-radius: var(--raio-g);
  background: linear-gradient(155deg, #fcfcfd, #edeff3);
  box-shadow: var(--sombra-1);
}
.produto-preco { border-radius: var(--raio); }
.marco-card { border-radius: var(--raio); box-shadow: var(--sombra-1); }
.marco-card:hover { transform: translateY(-3px); }
.cta-bloco { border-radius: var(--raio-g); }
.mapa { border-radius: var(--raio-g); box-shadow: var(--sombra-1); }
.vazio { border-radius: var(--raio-g); }

/* ---------------- flutuantes ---------------- */
.zap-flutuante {
  box-shadow: 0 10px 30px -8px rgba(37, 211, 102, .7);
  transition: transform .22s var(--curva), box-shadow .22s;
}
.zap-flutuante::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, .5);
  animation: pulso 2.6s var(--curva) infinite;
}
@keyframes pulso {
  0% { transform: scale(1); opacity: .8; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zap-flutuante::before { animation: none; }
}

.barra-orcamento {
  border-radius: 18px;
  background: linear-gradient(180deg, #292d33, var(--grafite));
  box-shadow: 0 18px 50px -14px rgba(16, 20, 28, .7);
  border: 1px solid rgba(255, 255, 255, .08);
}

.btn-orcamento .contador { box-shadow: var(--sombra-vermelha); }

/* ---------------- projetos entregues ---------------- */
.projetos-grade {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.projeto {
  position: relative;
  margin: 0;
  border-radius: var(--raio-g);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--grafite);
  box-shadow: var(--sombra-1);
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
}
.projeto:hover { transform: translateY(-5px); box-shadow: var(--sombra-3); }

.projeto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--curva), filter .35s;
}
.projeto:hover img { transform: scale(1.08); }

/* véu escuro para o nome ficar legível sobre qualquer foto */
.projeto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 14, 18, .85) 0%, rgba(12, 14, 18, .25) 38%, transparent 62%);
  transition: opacity .35s;
}
.projeto:hover::after { opacity: .92; }

.projeto figcaption {
  position: absolute;
  z-index: 2;
  left: 16px;
  right: 16px;
  bottom: 14px;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
  transition: transform .35s var(--curva);
}
.projeto:hover figcaption { transform: translateY(-3px); }

/* sem barrinha aqui também: o destaque vem do véu e do zoom da foto */

/* ---------------- chamada final da home ----------------
   Faixa escura: fecha a página inicial com peso e não se parece
   com nenhuma seção da página institucional. */
.chamada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(160deg, #23272e 0%, var(--grafite) 55%, #14171b 100%);
  color: #fff;
  padding: 74px 0;
  text-align: center;
}
.chamada::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -180px;
  left: 50%;
  width: 760px;
  height: 520px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(225, 27, 34, .3), transparent 70%);
  pointer-events: none;
}
.chamada h2 {
  margin: 0 auto 14px;
  max-width: 720px;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.15;
  font-weight: 800;
}
.chamada p {
  margin: 0 auto 26px;
  max-width: 640px;
  color: #b6bcc5;
  font-size: 16.5px;
  line-height: 1.62;
}
.chamada .cta-acoes { justify-content: center; }
.chamada .olho { background: rgba(255, 255, 255, .1); color: #ff8a8f; }
.chamada .btn-linha {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .28);
  box-shadow: none;
}
.chamada .btn-linha:hover { border-color: #fff; background: rgba(255, 255, 255, .07); }

/* ---------------- botão que fecha uma seção ---------------- */
.secao-acao {
  display: flex;
  justify-content: center;
  margin-top: 34px;
}
.secao-acao .btn { padding: 14px 30px; font-size: 15.5px; }
.secao-acao .btn b { font-weight: 800; }
.secao-acao .btn svg { transition: transform .2s var(--curva); }
.secao-acao .btn:hover svg { transform: translateX(3px); }

/* ---------------- rótulo acima do título da seção ---------------- */
/* sem barrinha antes do texto: ela era lida como travessão */
.olho {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--vermelho);
  background: rgba(225, 27, 34, .09);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 12px;
}

/* =========================================================
   PROFUNDIDADE
   Elevação já em repouso, brilho interno nas superfícies claras
   e sombra de apoio sob os produtos recortados.
   ========================================================= */

:root {
  /* cartão já nasce elevado, não só no hover */
  --sombra-card: 0 1px 2px rgba(16, 20, 28, .05),
                 0 8px 20px -8px rgba(16, 20, 28, .18);
  --sombra-card-alta: 0 2px 4px rgba(16, 20, 28, .06),
                      0 18px 34px -10px rgba(16, 20, 28, .22),
                      0 40px 70px -24px rgba(16, 20, 28, .3);
  /* fio branco no topo, simula luz batendo na borda superior */
  --luz-topo: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.card,
.cat-card,
.contato-card,
.ficha,
.marco-card {
  box-shadow: var(--sombra-card), var(--luz-topo);
}
.card:hover,
.contato-card:hover,
.cat-card:hover,
.marco-card:hover { box-shadow: var(--sombra-card-alta), var(--luz-topo); }

/* a foto ocupa o bloco inteiro, então nada de fio branco no topo aqui */
.projeto { box-shadow: var(--sombra-card); }
.projeto:hover { box-shadow: var(--sombra-card-alta); }

.btn-linha, .chip, .chip-sug {
  box-shadow: 0 1px 2px rgba(16, 20, 28, .05),
              0 4px 10px -4px rgba(16, 20, 28, .14),
              var(--luz-topo);
}
.btn-linha:hover, .chip:hover, .chip-sug:hover {
  box-shadow: 0 2px 4px rgba(16, 20, 28, .07),
              0 10px 20px -6px rgba(16, 20, 28, .2),
              var(--luz-topo);
}

.busca-campo { box-shadow: var(--sombra-card-alta), var(--luz-topo); }
.busca-campo:focus-within {
  box-shadow: 0 0 0 4px rgba(225, 27, 34, .13), var(--sombra-card-alta), var(--luz-topo);
}

/* ---------------- sombra de apoio sob o produto ----------------
   As fotos são recortes em fundo transparente, então o produto
   parece flutuar. Uma elipse borrada embaixo dá chão a ele. */
.card-foto::after,
.produto-foto::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 11%;
  width: 62%;
  height: 9%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16, 20, 28, .22), transparent 72%);
  filter: blur(7px);
  z-index: 0;
  pointer-events: none;
  transition: transform .5s var(--curva), opacity .5s;
}
.card-foto img, .produto-foto img { position: relative; z-index: 1; }
.card:hover .card-foto::after {
  transform: translateX(-50%) scale(1.12) translateY(3px);
  opacity: .75;
}

.produto-foto { position: relative; overflow: hidden; }
.produto-foto::after { bottom: 13%; width: 55%; height: 7%; filter: blur(10px); }

/* ---------------- separação entre faixas ---------------- */
.faixa-busca,
.trilha-faixa,
.confianca {
  box-shadow: inset 0 -1px 0 var(--linha), inset 0 12px 22px -18px rgba(16, 20, 28, .35);
}

.secao-cinza, .numeros-faixa {
  box-shadow: inset 0 14px 26px -20px rgba(16, 20, 28, .4),
              inset 0 -14px 26px -20px rgba(16, 20, 28, .4);
}

.rodape { box-shadow: inset 0 14px 26px -20px rgba(16, 20, 28, .35); }

.produto-preco, .cta-bloco, .vazio {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
              0 2px 10px -6px rgba(16, 20, 28, .18);
}

.zap-flutuante {
  box-shadow: 0 4px 10px rgba(16, 20, 28, .18),
              0 14px 34px -8px rgba(37, 211, 102, .75),
              inset 0 1px 0 rgba(255, 255, 255, .35);
}

.numeros { background: transparent; }


/* =========================================================
   BLOG
   Usado pelo tema WordPress, que carrega este mesmo arquivo
   para o blog ficar idêntico ao resto do site.
   ========================================================= */

.blog-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  overflow: hidden;
  box-shadow: var(--sombra-card), var(--luz-topo);
  transition: transform .28s var(--curva), box-shadow .28s var(--curva), border-color .28s;
}
.post-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--sombra-card-alta), var(--luz-topo);
  border-color: rgba(225, 27, 34, .3);
}
.post-card-foto { aspect-ratio: 16 / 9; overflow: hidden; background: var(--fundo); }
.post-card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--curva); }
.post-card:hover .post-card-foto img { transform: scale(1.06); }

.post-card-corpo { padding: 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-data { font-size: 12.5px; color: var(--grafite-3); font-weight: 600; }
.post-card h2, .post-card h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.post-card h2 a:hover, .post-card h3 a:hover { color: var(--vermelho); }
.post-resumo { margin: 0; font-size: 14.5px; color: var(--grafite-2); }
.post-card .post-leia { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--vermelho); }

/* ---------------- artigo ---------------- */
.artigo { max-width: 760px; margin-inline: auto; padding: 40px 0 60px; }
.artigo-topo { margin-bottom: 26px; }
.artigo h1 {
  margin: 10px 0 12px;
  font-size: clamp(26px, 3.8vw, 40px);
  line-height: 1.16;
  letter-spacing: -.03em;
}
.artigo-meta { font-size: 13.5px; color: var(--grafite-3); }
.artigo-capa { border-radius: var(--raio-g); overflow: hidden; margin-bottom: 30px; box-shadow: var(--sombra-card); }

.artigo-corpo { font-size: 16.5px; line-height: 1.72; }
.artigo-corpo p { margin: 0 0 18px; color: var(--grafite-2); }
.artigo-corpo h2 { margin: 34px 0 12px; font-size: 24px; }
.artigo-corpo h3 { margin: 28px 0 10px; font-size: 19px; }
.artigo-corpo ul, .artigo-corpo ol { margin: 0 0 20px; padding-left: 24px; display: grid; gap: 8px; }
.artigo-corpo li { color: var(--grafite-2); }
.artigo-corpo img { border-radius: var(--raio); margin: 22px 0; }
.artigo-corpo a { color: var(--vermelho); text-decoration: underline; text-underline-offset: 3px; }
.artigo-corpo strong { color: var(--grafite); }
.artigo-corpo blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--vermelho);
  color: var(--grafite-2);
  font-style: italic;
}

/* chamada para o catálogo dentro do artigo */
.artigo-cta {
  margin-top: 40px;
  padding: 30px 26px;
  border-radius: var(--raio-g);
  background: var(--fundo);
  border: 1px solid var(--linha);
  text-align: center;
}
.artigo-cta h2 { margin: 0 0 8px; font-size: 21px; }
.artigo-cta p { margin: 0 auto 18px; max-width: 460px; color: var(--grafite-2); font-size: 15px; }
.artigo-cta .cta-acoes { justify-content: center; }

.paginacao { display: flex; justify-content: center; gap: 10px; margin-top: 40px; flex-wrap: wrap; }
.paginacao .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--linha);
  border-radius: 11px;
  background: #fff;
  font-weight: 650;
  font-size: 14.5px;
  color: var(--grafite-2);
  box-shadow: var(--sombra-1);
  transition: all .16s;
}
.paginacao .page-numbers:hover { border-color: var(--grafite-3); }
.paginacao .page-numbers.current {
  background: linear-gradient(180deg, var(--vermelho-cl), var(--vermelho));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--sombra-vermelha);
}

@media (max-width: 640px) {
  .blog-grade { grid-template-columns: 1fr; gap: 16px; }
  .artigo { padding: 26px 0 44px; }
  .artigo-corpo { font-size: 16px; }
}

/* ---------------- responsivo ---------------- */
@media (max-width: 980px) {
  .numeros { grid-template-columns: repeat(2, 1fr); row-gap: 34px; }
  .numeros li + li::after { display: none; }
  .confianca .container { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .rodape .container { grid-template-columns: 1fr 1fr; }
  .produto { grid-template-columns: 1fr; gap: 28px; padding: 28px 0 44px; }
  .produto-foto { position: static; padding: 24px; }
  .produto-foto img { max-height: 300px; }
  .cat-grade { grid-template-columns: repeat(2, 1fr); }
  .pagina-grade { grid-template-columns: 1fr; gap: 36px; }
  .lateral { position: static; }
  .contato-grade { grid-template-columns: repeat(2, 1fr); }
  .projetos-grade { grid-template-columns: repeat(2, 1fr); }
  .contato-endereco { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 820px) {
  .nav { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  .cabecalho-acoes { margin-left: 0; }
  .cabecalho-acoes .btn-zap span { display: none; }
  .cabecalho-acoes .btn-zap { width: 44px; padding: 0; height: 44px; }
  .nav.aberto {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--linha);
    flex-direction: column;
    gap: 0;
    padding: 8px 20px 16px;
    box-shadow: var(--sombra);
  }
  .nav.aberto a { padding: 12px 0; border-bottom: 1px solid var(--linha); }
}

@media (max-width: 640px) {
  .container { width: calc(100% - 32px); }
  .topbar { display: none; }
  .hero { padding: 36px 0 32px; }
  .busca-campo input { font-size: 16px; padding: 15px 10px; }
  .grade { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card-corpo { padding: 4px 10px 10px; }
  .card-nome { font-size: 13.5px; }
  .card-acoes .btn { font-size: 12.5px; padding: 8px 8px; }
  .btn-add { width: 38px; }
  .cat-grade { grid-template-columns: 1fr; gap: 10px; }
  .cat-foto { width: 62px; height: 62px; }
  .contato-grade { grid-template-columns: 1fr; }
  .chamada { padding: 52px 0; }
  .chamada .cta-acoes .btn { flex: 1; min-width: 160px; }
  .projetos-grade { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .projeto figcaption { font-size: 12.5px; left: 11px; right: 11px; bottom: 10px; }
  .pagina { padding: 32px 0 50px; }
  .pagina-topo { padding: 32px 0; }
  .cta-bloco { padding: 26px 20px; }
  .cta-bloco .cta-acoes .btn { flex: 1; min-width: 150px; }
  .filtro-rotulo { min-width: 100%; margin-bottom: -4px; }
  .rodape .container { grid-template-columns: 1fr; gap: 30px; }
  .barra-orcamento { padding: 10px 10px 10px 16px; gap: 10px; }
  .barra-orcamento small { display: none; }
  .barra-limpar { display: none; }
  .zap-flutuante { bottom: 88px; width: 52px; height: 52px; }
}