/* ============================================================
   FONTE
   ------------------------------------------------------------
   Plus Jakarta Sans, licenca SIL OFL, servida DO PROPRIO SITE.

   Nao via Google Fonts de proposito: seria um terceiro no caminho
   critico, exigiria preconnect e obrigaria a reabrir o `font-src` e o
   `style-src` da CSP pra fonts.googleapis/gstatic. Aqui e um arquivo
   nosso, no mesmo dominio.

   E a fonte VARIAVEL, um arquivo so cobrindo os pesos 200 a 800: 27 KB
   no total, contra tres arquivos estaticos. Subset latino apenas, que
   ja cobre todo o portugues (conferido glifo a glifo antes de subir).

   `font-display: swap` pra o texto aparecer na fonte do sistema antes e
   trocar depois, em vez de ficar invisivel esperando o download.
   ============================================================ */
@font-face {
  font-family: 'Jakarta';
  src: url('/public/fontes/jakarta-latin.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Dallu Decor  -  folha unica
   ------------------------------------------------------------
   Sem fonte de terceiro: pilha do sistema. Google Fonts custaria
   preconnect + 2 requests + FOUT no 4G, e o publico chega de
   Android intermediario (P14). O CSP nem precisa liberar host de
   fonte por causa disso.

   Contraste: todo par texto/fundo daqui foi escolhido >= 4.5:1
   (WCAG AA, S9). Nao troque cor sem medir.
   ============================================================ */

:root {
  --tinta:      #1c1917;
  --tinta-2:    #44403c;
  --tinta-3:    #6b6360;
  --creme:      #faf7f2;
  --areia:      #f0e9df;
  --areia-2:    #e0d5c6;   /* divisoria decorativa: nao e limite de controle */
  /* WCAG 1.4.11 (non-text contrast, 3:1): borda de input e de botao sao o
     limite VISIVEL do controle e precisam de 3:1 contra o fundo. O --areia-2
     dava 1,45:1 contra branco e reprovava. Este da 3,55:1 (branco) e
     3,32:1 (creme), com o mesmo tom quente da paleta. */
  --borda-ctrl: #948674;
  /* ---- CORES DA MARCA ----
     Extraidas do logo oficial (dalludecor.com.br): laranja #F58634 e azul
     #3E4095. Os dois entram no site, mas NAO nas mesmas posicoes, porque
     falham em contraste onde nao devem:

     - o laranja puro como fundo de botao com texto branco da 2,52:1 e
       reprova (min 4,5). Por isso existe o --cta, que e o mesmo matiz e a
       mesma saturacao, so 32% mais escuro: 4,56:1.
     - o azul puro como texto sobre o rodape escuro da 2,12:1, tambem
       reprova. Por isso o rodape usa a versao clara do logo, com o "decor"
       em branco.

     O laranja puro fica onde ele brilha e passa: detalhe sobre fundo
     escuro (7,47:1). */
  /* PALETA OFICIAL, tirada do tema da loja deles em 25/08/2026
     (variaveis --color_* do dalludecor.com.br).

     O AZUL E O DELES, SEM AJUSTE: #0008a0 e o `color_button_buy_bg`, a cor
     do botao de comprar da loja. Da 13,62:1 sobre branco, entao passa em
     qualquer posicao, texto ou botao. Virou a cor de ACAO do site inteiro.

     O LARANJA DELES NAO PODE VIRAR BOTAO. O #f48b00 oficial da 2,46:1
     sobre branco: reprova ate no minimo de 3:1 de elemento nao textual.
     Na loja deles ele so aparece como filete no rodape, onde nao carrega
     informacao. Aqui ele fica no mesmo papel: acento de marca sobre fundo
     escuro e filete, nunca texto pequeno nem CTA. */
  --laranja:    #F58634;   /* marca, so sobre fundo escuro */
  --laranja-of: #f48b00;   /* laranja oficial deles, so como filete decorativo */
  --azul:       #0008a0;   /* oficial: cor de acao, botoes e links */
  --azul-2:     #00076b;   /* hover do CTA */
  --acao:       #0008a0;
  --acao-2:     #00076b;
  --verde:      #14584a;
  --branco:     #ffffff;

  --raio:       14px;
  --raio-p:     8px;
  --sombra:     0 1px 2px rgba(28,25,23,.06), 0 8px 24px rgba(28,25,23,.08);
  --wrap:       1120px;
  --gap:        clamp(1.5rem, 4vw, 3rem);

  --altura-topo: 69px;

  /* A pilha do sistema fica como reserva: se o woff2 nao carregar, o texto
     sai numa fonte parecida em vez de cair no Times. */
  --fonte: 'Jakarta', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
           "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

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

/* O atributo [hidden] TEM que vencer o display do autor.
   Sem esta linha, `.consent-categorias { display: grid }` e
   `.btn { display: inline-flex }` sobrepoem o [hidden] e o elemento aparece
   na tela mesmo escondido no HTML. Foi o que inchou o banner de cookies e
   fez ele cobrir o CTA do hero. Regra global porque o proximo componente
   com display no CSS cairia no mesmo buraco. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--tinta);
  background: var(--branco);
  /* espaco pro CTA fixo do mobile nao cobrir o rodape */
  padding-bottom: 0;
}
img, picture, svg { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .6em; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); letter-spacing: -.015em; }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 1em; }
a  { color: var(--azul); text-underline-offset: .18em; }
a:hover { color: var(--acao); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* o `*` abaixo zera animacao e transicao, mas NAO alcanca scroll-behavior:
     o carrossel continuaria deslizando pra quem pediu pra nao deslizar. */
  .lista-produtos, .gal-trilho, .depoimentos-trilho { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---------- foco visivel, nunca escondido atras do header ---------- */
:focus-visible {
  outline: 3px solid var(--acao);
  outline-offset: 3px;
  border-radius: 4px;
}
/* 2.4.11: o header e sticky, entao a ancora precisa de folga no scroll */
:target, section[id] { scroll-margin-top: 5.5rem; }

.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: -999px; top: 0; z-index: 200;
  background: var(--tinta); color: var(--branco);
  padding: .8rem 1.2rem; border-radius: 0 0 var(--raio-p) 0;
}
.pular:focus { left: 0; }

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

/* ---------- botoes ---------- */
.btn {
  font: inherit; font-weight: 650;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: .85rem 1.6rem;
  min-height: 48px;           /* 44px de alvo tatil + folga (P7/S21) */
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; text-align: center; text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn-primario {
  background: var(--acao); color: var(--branco);
  box-shadow: 0 4px 14px rgba(168,71,26,.28);
}
.btn-primario { position: relative; overflow: hidden; }
.btn-primario:hover {
  background: var(--acao-2); color: var(--branco);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(168,71,26,.36);
}
.btn-primario:active { transform: translateY(0); }
/* Reflexo que atravessa o botao no hover. `transform` puro, no compositor. */
@media (prefers-reduced-motion: no-preference) {
  .btn-primario::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
    left: -60%; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
    transform: skewX(-18deg);
  }
  .btn-primario:hover::after { animation: brilho .7s ease-out; }
  @keyframes brilho { to { left: 130%; } }
}

/* numeros que sobem: largura travada pelo JS antes de zerar, pra contagem
   nao mudar a largura do elemento e gerar CLS. */
.numero-valor { font-variant-numeric: tabular-nums; display: inline-block; }
.btn-linha {
  background: transparent; color: var(--tinta);
  border-color: var(--borda-ctrl);
}
.btn-linha:hover { background: var(--areia); color: var(--tinta); }
.btn-largo { width: 100%; }
.btn[disabled] { opacity: .65; cursor: progress; }

/* ---------- topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--areia-2);
  transition: box-shadow .25s ease, background-color .25s ease;
}
/* Ao sair do topo o header ganha sombra. NAO muda altura de proposito:
   header que encolhe ao rolar empurra a pagina inteira e vira CLS. */
.topo.rolou {
  background: rgba(255,255,255,.98);
  box-shadow: 0 4px 20px rgba(28,25,23,.10);
}
.topo-linha {
  display: flex; align-items: center; gap: 1rem;
  min-height: 68px; justify-content: space-between;
}
.marca { display: block; line-height: 0; }
.marca img { width: 150px; height: auto; }
@media (max-width: 520px) { .marca img { width: 128px; } }
.rodape-logo { width: 170px; height: auto; margin-bottom: .9rem; }
.marca-sub { color: var(--azul); margin-left: .18em; font-weight: 500; }
@media (max-width: 520px) { .topo .btn { display: none; } }

/* ---------- hero ---------- */
/* A foto e FUNDO, mas continua sendo um <img> no HTML (ver foto.php).
   Aqui ela e so posicionada por tras do conteudo. */
.hero {
  position: relative; isolation: isolate;
  display: grid; align-items: center;
  /* Tela cheia menos o header sticky, e so isso.
     Havia aqui um desconto extra de 48px pra faixa de provas que ficava
     logo abaixo. A faixa foi removida e o desconto ficou: era essa a sobra
     de tela vazia embaixo da hero. Se voltar alguma faixa fixa abaixo do
     hero, o desconto volta junto; sem ela, nao.

     `svh` no celular: o `vh` la inclui a barra do navegador que some ao
     rolar, e a hero ficaria maior que a tela, empurrando o CTA pra fora da
     primeira dobra. */
  min-height: calc(100vh - var(--altura-topo));
  min-height: calc(100svh - var(--altura-topo));
  padding: clamp(2.5rem, 6vw, 4rem) 0;
  color: var(--branco);
  background: var(--tinta);          /* cor de espera enquanto a foto carrega */
  overflow: hidden;
}
.hero-fundo { position: absolute; inset: 0; z-index: -2; }
.hero-fundo picture, .hero-fundo img { width: 100%; height: 100%; display: block; }
.hero-fundo img { object-fit: cover; object-position: center 62%; }
/* Sem foto (Belina): gradiente da marca no lugar, sem buraco. */
.hero-fundo-vazio {
  background:
    radial-gradient(70% 70% at 75% 20%, rgba(168,71,26,.55) 0%, rgba(168,71,26,0) 65%),
    linear-gradient(140deg, #2a2320 0%, var(--tinta) 55%, #100d0c 100%);
}
/*
  Vela sobre a foto. Sem ela NAO existe contraste garantido: a foto muda de
  modelo pra modelo e a maioria e clara. Este gradiente foi medido: no ponto
  mais claro que o texto ocupa, o branco fica acima de 4,5:1.
  Em telas largas escurece mais o lado esquerdo, onde o texto vive, e deixa a
  foto respirar a direita. No mobile o texto e centralizado, entao o veu e
  uniforme e um pouco mais forte.
*/
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,12,11,.62) 0%, rgba(15,12,11,.72) 100%);
}
@media (min-width: 900px) {
  .hero::before {
    background:
      linear-gradient(90deg,
        rgba(15,12,11,.86) 0%,
        rgba(15,12,11,.82) 38%,
        rgba(15,12,11,.72) 55%,
        rgba(15,12,11,.24) 78%,
        rgba(15,12,11,.04) 100%),
      linear-gradient(180deg, rgba(15,12,11,.18) 0%, rgba(15,12,11,.26) 100%);
  }
}

/* O .wrap ja centraliza a faixa de 1120px. Limitar a largura AQUI, com
   max-width, fazia o margin-inline:auto do proprio .wrap centralizar o bloco
   de 40rem no meio da tela, e o texto ia parar em cima da foto clara. Quem
   limita a largura sao os filhos: a faixa continua centralizada, o texto
   fica encostado a esquerda. */
.hero-conteudo { position: relative; }
@media (min-width: 900px) {
  .hero-conteudo > * { max-width: 40rem; }
  /* O teto de 34rem que havia aqui era de MEDIDA DE LEITURA, e linha de
     botao nao e texto corrido: nao existe conforto de leitura pra defender
     numa fileira de dois botoes. Medido: o par do Belina soma 562px contra
     544px de teto, estourava por 18px e caia um embaixo do outro; o Agata
     passava com 20px de sobra e o San Diego com 38px. Ou seja, o layout
     dependia do comprimento do nome do modelo.
     Com 40rem (640px) os cinco cabem, e ainda sobra folga pra um titulo
     mais longo aparecer amanha sem quebrar a fileira. */
  .hero-conteudo > .hero-botoes { max-width: 40rem; }
}

.eyebrow {
  font-size: .78rem; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; color: var(--laranja); margin-bottom: .9rem;
}
.hero h1 { color: var(--branco); text-shadow: 0 2px 18px rgba(0,0,0,.35); }
.hero-sub { font-size: 1.15rem; color: #ece5df; max-width: 34rem; }

.preco { margin: 1.6rem 0 1rem; }
.preco-de { margin: 0; color: #cfc7bf; font-size: .95rem; }
.preco-valor { margin: 0; font-size: clamp(1.9rem, 4.6vw, 2.6rem); font-weight: 800; letter-spacing: -.02em; }
.preco-cond { margin: .15rem 0 0; color: #ece5df; font-size: .98rem; }

.selo-frete {
  display: inline-block; margin: 0 0 1.4rem;
  background: rgba(230,242,238,.95); color: var(--verde);
  border: 1px solid #c2ded6; border-radius: 999px;
  padding: .45rem 1rem; font-size: .92rem; font-weight: 650;
}
.hero-botoes { display: flex; flex-wrap: wrap; gap: .8rem; }

/* Botao de contorno sobre foto: a borda bege sumia no escuro. */
.btn-claro { color: var(--branco); border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.06); }
.btn-claro:hover { background: rgba(255,255,255,.16); color: var(--branco); }

/* ---------- secoes ---------- */
.secao { padding: clamp(2.8rem, 6vw, 4.5rem) 0; }
/* --creme (#faf7f2) deixava o cartao branco a 1,07:1 do fundo: sem aresta.
   --areia (#f0e9df) leva pra 1,23:1, que ja da ao olho onde encostar. */
.secao-clara { background: var(--areia); }
.secao-escura { background: var(--tinta); color: var(--branco); }
.secao-escura h2 { color: var(--branco); }
/* ---------- fechamento ----------
   O FAQ e o fechamento tinham o MESMO fundo (#f0e9df) e viravam uma faixa
   bege continua: o CTA final, que e o momento mais importante da pagina,
   nao tinha onde comecar. Era o unico par colado do documento inteiro.

   A correcao e a ALTERNANCIA que a pagina ja usa em todo lugar: o
   fechamento fica branco, e o FAQ bege logo acima marca a virada.
   Cheguei a por o conteudo num painel com borda, e saiu: a pagina nao usa
   card em nenhuma outra secao, entao aquilo virou um objeto estranho no
   meio de um documento que nao tem esse recurso.
   O peso de "fim de pagina" vem da respiracao, nao de moldura. */
.secao-fechamento {
  background: var(--branco); text-align: center;
  padding-block: clamp(3.6rem, 8vw, 6rem);
}
.secao-fechamento .hero-botoes { justify-content: center; }
.secao-fechamento .selo-frete { margin-bottom: 1.6rem; }

/* cards da garantia */
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, 1fr); } }
.card {
  background: var(--branco); border: 1px solid var(--areia-2);
  border-radius: var(--raio); padding: 1.4rem; box-shadow: var(--sombra);
}
.card h3 { margin-bottom: .35rem; }
.card p  { margin: 0; color: var(--tinta-2); font-size: .96rem; }
.card-icone {
  display: block; width: 34px; height: 34px; margin-bottom: .8rem;
  border-radius: 10px; background: var(--areia);
  background-position: center; background-repeat: no-repeat; background-size: 20px 20px;
}
.card-icone[data-icone="escada"]    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C05709' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 21h4v-5h5v-5h5V6h4'/%3E%3C/svg%3E"); }
.card-icone[data-icone="chave"]     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C05709' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M14 7a4 4 0 1 0-3.5 4L4 17.5V21h3.5l1-1v-2h2v-2h2l1.5-1.5A4 4 0 0 0 14 7z'/%3E%3C/svg%3E"); }
.card-icone[data-icone="escudo"]    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C05709' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.2-7 10-4-1.8-7-5.5-7-10V6z'/%3E%3C/svg%3E"); }
.card-icone[data-icone="conferido"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C05709' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }

/* ---------- cabecalho de secao ----------
   Antes: 6 dos 8 titulos a esquerda e 2 centralizados, sem criterio nenhum.
   O wireframe do Ge centraliza todos, com um subtitulo curto embaixo. Isto
   uniformiza.

   O SELETOR E DE FILHO DIRETO (`>`), e isso importa: mantem de fora o titulo
   do carrossel de modelos (que vive num `.secao-topo` ao lado das setas e
   PRECISA ficar a esquerda) e o da secao da fabrica (que e um layout de duas
   colunas). Regra ampla demais quebraria os dois. */
.secao > .wrap > h2,
.secao > .wrap > .texto-grande { text-align: center; }
.secao > .wrap > h2 { text-wrap: balance; }

/* A legenda vira SUBTITULO: coluna mais estreita que o texto corrido, porque
   texto centralizado so funciona em bloco curto. A 36rem ela fecha em 3 ou 4
   linhas; larga, viravam 4 linhas soltas de ponta a ponta.
   `text-wrap: pretty` evita a ultima linha com uma palavra sozinha. */
.secao > .wrap > .texto-grande {
  max-width: 36rem; margin-inline: auto; margin-top: .7rem;
  font-size: 1.1rem; line-height: 1.62; color: var(--tinta-2);
  text-wrap: pretty;
}
.texto-grande { font-size: 1.1rem; color: var(--tinta-2); }

/* ---------- de onde sai o seu sofa ----------
   Texto a esquerda, fatos checaveis a direita. Em coluna unica no celular,
   com os fatos virando uma grade de 2. */
.origem { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .origem { grid-template-columns: 1.25fr 1fr; gap: 3rem; } }
.origem-texto { display: grid; gap: .9rem; max-width: 40rem; }
.origem-texto h2 { margin: 0; }
.origem-texto p { color: var(--tinta-2); }
.origem-texto strong { color: var(--tinta); font-weight: 700; }

.origem-fatos {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--areia-2); border: 1px solid var(--areia-2);
  border-radius: var(--raio); overflow: hidden;
}
.origem-fatos > div { background: var(--branco); padding: 1.1rem 1.2rem; display: grid; gap: .15rem; }
.origem-fatos dt {
  font-size: .74rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-2); font-weight: 700;
}
.origem-fatos dd { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--tinta); line-height: 1.25; }

/* ---------- ficha + visor de fotos ----------
   Pedido do Ge: clicar numa linha da ficha e ver a foto que mostra aquilo.
   No desktop as linhas ficam a esquerda e o visor a direita; no celular o
   visor some (nao ha coluna pra ele) e o clique abre o lightbox. */
.ficha-bloco { display: grid; gap: 1.4rem; }
@media (min-width: 1000px) {
  .ficha-bloco { grid-template-columns: 1.35fr 1fr; gap: 2rem; align-items: start; }
  .ficha-sem-visor { grid-template-columns: 1fr; }
}

.ficha-visor {
  display: none; margin: 0;
  border: 1px solid var(--areia-2); border-radius: var(--raio);
  background: var(--branco); overflow: hidden;
  position: sticky; top: calc(var(--altura-topo) + 1rem);
}
@media (min-width: 1000px) { .ficha-visor { display: block; } }
.ficha-visor picture, .ficha-visor img { display: block; width: 100%; }
.ficha-visor img { aspect-ratio: 1 / 1; object-fit: cover; }
/* A troca e um fade curto: sem ele a foto pisca de uma pra outra. Curto de
   proposito, porque aqui a pessoa esta comparando medida, nao contemplando. */
.ficha-visor img { transition: opacity .22s ease; }
.ficha-visor.trocando img { opacity: 0; }
.ficha-visor figcaption {
  padding: .8rem 1rem 1rem; font-size: .88rem; color: var(--tinta-2);
  border-top: 1px solid var(--areia-2); line-height: 1.45;
}

/* ---------- cards da ficha ----------
   A <dl> corrida lia como paragrafo e ninguem varria. Em card, "Baú" ou
   "Altura" aparecem de relance. A marcacao continua dl/dt/dd. */
.ficha {
  margin: 0; padding: 0;
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
@media (min-width: 1000px) {
  /* Duas colunas ao lado do visor. Em quatro, como era quando a ficha
     ocupava a faixa inteira, cada cartao ficaria com 130px. */
  .ficha { grid-template-columns: 1fr 1fr; }
}

/* A linha que tem foto vira alvo de clique. O botao cobre o cartao por
   `::after`: um alvo grande, em vez de um link de texto minusculo. Ele mora
   dentro do <dd> porque `dl > div` so aceita dt e dd. */
.ficha-card-clicavel { cursor: pointer; }
.ficha-ver {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; background: none; padding: 0; cursor: pointer;
}
/* NO FLUXO, e nao absoluta. Absoluta no canto ela sobrepunha o valor sempre
   que o texto quebrava ate ali (o caso do "sem caixa, madeira de eucalipto
   reflorestado"). Como bloco, o espaco fica reservado o tempo todo: ela
   aparece e some por opacidade, entao nada se mexe nem se cobre. */
.ficha-ver-dica {
  display: block; margin-top: .45rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--acao);
  opacity: 0; transition: opacity .2s ease;
}
.ficha-card-clicavel:hover .ficha-ver-dica,
.ficha-card-clicavel:focus-within .ficha-ver-dica { opacity: 1; }
/* EM TOQUE ELA FICA SEMPRE VISIVEL. `:hover` no celular ou nao dispara ou
   dispara so depois do primeiro toque - tarde demais, porque o toque ja foi
   o clique. Sem a dica, nada indicava que o cartao abre foto, que e
   justamente o pedido do Gleydson. O espaco dela ja esta reservado no fluxo,
   entao mostrar sempre nao mexe em nada do layout. */
@media (hover: none) {
  .ficha-ver-dica { opacity: 1; }
}
.ficha-ver:focus-visible { outline: 3px solid var(--acao); outline-offset: -3px; border-radius: var(--raio-p); }
/* A linha ativa fica marcada: sem isso, depois de clicar tres vezes a pessoa
   nao sabe qual foto esta no visor. */
.ficha-card-clicavel[aria-current="true"] {
  border-color: var(--acao);
  box-shadow: inset 0 0 0 1px var(--acao);
}
.ficha-card {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem;
  align-items: start;
  background: var(--branco); border: 1px solid var(--areia-2);
  border-radius: var(--raio-p); padding: .9rem 1rem;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ficha-card:hover {
  transform: translateY(-2px); border-color: var(--borda-ctrl);
  box-shadow: 0 8px 22px rgba(28,25,23,.09);
}
.ficha-icone {
  grid-row: 1 / span 2; align-self: center;
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 10px; background: var(--areia); color: var(--acao);
}
.ficha-icone svg { width: 21px; height: 21px; }
.ficha dt { font-weight: 700; margin: 0; font-size: .92rem; }
.ficha dd { margin: 0; color: var(--tinta-2); font-size: .95rem; line-height: 1.45; }

/* passos */
.passos { list-style: none; counter-reset: p; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 800px) { .passos { grid-template-columns: repeat(3, 1fr); } }
.passos li { background: var(--branco); border: 1px solid var(--areia-2); border-radius: var(--raio); padding: 1.4rem; }
.passo-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--acao); color: var(--branco); font-weight: 800; margin-bottom: .7rem;
}
.passos h3 { margin-bottom: .3rem; }
.passos p  { margin: 0; color: var(--tinta-2); }

/* ---------- numeros ----------
   Era so tres numeros soltos num retangulo preto, com um vazio grande
   embaixo: parecia buraco na pagina em vez de bloco de prova. Agora tem
   titulo, divisoria entre os numeros e respiro proporcional. */
.secao-numeros {
  padding: clamp(2.6rem, 5vw, 3.6rem) 0;
  background:
    radial-gradient(60% 120% at 50% 0%, rgba(168,71,26,.20) 0%, rgba(168,71,26,0) 70%),
    var(--tinta);
  border-top: 1px solid #332e2b;
  border-bottom: 1px solid #332e2b;
}
.numeros-titulo {
  text-align: center; font-size: .78rem; font-weight: 750;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--laranja); margin-bottom: 1.8rem;
}
.numeros {
  list-style: none; margin: 0 auto 1.4rem; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  max-width: 52rem; text-align: center;
}
.numeros li { display: flex; flex-direction: column; gap: .35rem; padding: 0 .6rem; }
/* divisoria entre as colunas, sem elemento extra no HTML */
.numeros li + li { border-left: 1px solid #3d3733; }
.numero-valor {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.numero-rotulo { color: #cfc7bf; font-size: .92rem; line-height: 1.3; }
.numeros-apoio {
  margin: 0; text-align: center; color: #a89f98; font-size: .9rem;
}
.secao-numeros .cta-secao { margin-top: 1.8rem; }

@media (max-width: 560px) {
  .numeros { grid-template-columns: 1fr; gap: 1.4rem; max-width: 18rem; }
  .numeros li + li { border-left: 0; border-top: 1px solid #3d3733; padding-top: 1.4rem; }
}

/* Entrada dos numeros: SO visual. O texto nunca e tocado por JS, entao nao
   existe o risco de congelar exibindo um valor errado (ver app.js secao 7). */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .revelar-fila.visivel .numero-valor { animation: numero-entra .6s cubic-bezier(.2,.9,.3,1.2) both; }
  .js-anim .revelar-fila.visivel li:nth-child(2) .numero-valor { animation-delay: .09s; }
  .js-anim .revelar-fila.visivel li:nth-child(3) .numero-valor { animation-delay: .18s; }
  @keyframes numero-entra {
    from { opacity: 0; transform: scale(.72); }
    60%  { opacity: 1; transform: scale(1.06); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/* depoimento */
/* ---------- depoimentos ----------
   Cards sem foto: no lugar do retrato vai a inicial do nome num circulo.
   As aspas grandes sao `::before` decorativo e nao entram no texto lido. */
/* Trilho do carrossel. Era uma grade de 2 colunas; com 12 depoimentos de
   tamanhos muito diferentes ela abria vao branco ao lado dos curtos.
   O padding vertical NAO e enfeite: o card tem sombra e o overflow-x
   cortaria ela em cima e embaixo. */
.depoimentos-trilho {
  list-style: none; margin: 0;
  display: flex; gap: 1rem;
  overflow-x: auto;
  /* SEM scroll-snap aqui de proposito: encaixe e rolagem continua brigam.
     O snap puxaria a faixa de volta pro cartao mais proximo a cada quadro e
     o giro viraria um tremor. Volta a encaixar depois que a pessoa para o
     giro, pelo atributo abaixo. */
  padding: .4rem .25rem 1.2rem;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.depoimentos-trilho[data-parado] { scroll-snap-type: x proximity; scroll-behavior: smooth; }
.depoimentos-trilho[data-parado] > li { scroll-snap-align: start; }
.depoimentos-trilho::-webkit-scrollbar { display: none; }
.depoimentos-trilho:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }
.depoimentos-trilho > li {
  margin: 0; display: flex;
  flex: 0 0 auto; width: min(23rem, 84vw);
}

/* Enquanto a mao esta na faixa, o cursor conta que da pra arrastar. */
.depoimentos-trilho, .lista-produtos { cursor: grab; }
/* Trava o arrasto nativo de imagem e link dentro das faixas: sem isso o
   navegador sequestra o gesto e mostra o fantasma da foto com a URL. */
.depoimentos-trilho img, .depoimentos-trilho a,
.lista-produtos img, .lista-produtos a { -webkit-user-drag: none; user-drag: none; }
.depoimentos-trilho.arrastando, .lista-produtos.arrastando {
  cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto;
  user-select: none;   /* senao o arrasto vira selecao de texto */
}

.depoimento {
  margin: 0; background: var(--branco);
  border: 1px solid var(--areia-2); border-radius: var(--raio);
  padding: 1.45rem 1.5rem 1.25rem;
  display: flex; flex-direction: column; gap: .95rem; flex: 1;
  text-align: left;   /* o bloco do celular centraliza a secao; citacao lida melhor alinhada */
  position: relative;
}
.depoimento::before {
  content: "“";                     /* aspa de abertura, so desenho */
  position: absolute; top: .1rem; right: .9rem;
  font-size: 3.4rem; line-height: 1; color: var(--areia-2);
  font-family: Georgia, "Times New Roman", serif; pointer-events: none;
}
.depoimento blockquote { margin: 0; flex: 1; }
.depoimento p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tinta); }
.depoimento figcaption {
  display: flex; align-items: center; gap: .7rem;
  padding-top: .95rem; border-top: 1px solid var(--areia-2);
}
.dep-inicial {
  flex: 0 0 auto; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acao); color: #fff;
  font-weight: 700; font-size: 1rem; line-height: 1;
}
.dep-quem { display: grid; gap: .05rem; min-width: 0; }
.dep-quem b { font-size: .95rem; color: var(--tinta); font-weight: 700; }
.dep-quem small { font-size: .78rem; color: var(--tinta-2); line-height: 1.35; }

/* faq */
.faq details { background: var(--branco); border: 1px solid var(--areia-2); border-radius: var(--raio-p); margin-bottom: .7rem; }
.faq summary {
  cursor: pointer; padding: 1rem 1.2rem; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.02rem; }
.faq summary::after { content: "+"; font-size: 1.5rem; color: var(--acao); line-height: 1; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 1.2rem 1.1rem; color: var(--tinta-2); }

/* ---------- CTA de fim de secao ---------- */
.cta-secao { margin-top: 2.2rem; text-align: center; }
.cta-secao-apoio { margin: 0 0 .8rem; color: var(--tinta-2); font-size: .98rem; }
.secao-escura .cta-secao-apoio { color: #d6cfc7; }
.cta-secao .btn { min-width: 16rem; }
@media (max-width: 520px) { .cta-secao .btn { width: 100%; min-width: 0; } }

/* fechamento */
.fechamento-chamada {
  max-width: 34rem; margin: 0 auto 1.4rem;
  font-size: 1.05rem; color: var(--tinta-2);
}
.btn-grande { padding: 1.05rem 2.4rem; font-size: 1.06rem; min-height: 56px; }

/* ---------- rodape ---------- */
/* O padding de baixo existe SO pra reservar espaco pro CTA fixo, e o CTA fixo
   so aparece ate 760px. No desktop ele virava um vao preto morto de 120px.
   Agora o reforco vem do media query la embaixo, junto com o proprio CTA. */
.rodape {
  background: #141110;              /* um tom abaixo do --tinta da secao de numeros */
  border-top: 3px solid var(--laranja-of); /* filete laranja, igual ao rodape da loja deles */
  color: #d6cfc7;
  padding: 3rem 0;
  font-size: .95rem;
}
.rodape a { color: var(--branco); }
/* WCAG 2.5.8 (target size 24px): link de rodape em lista nao e "inline em
   frase", entao precisa dos 24px de altura. Sem o padding a linha fica com
   20px e o alvo reprova. */
.rodape-modelos a, .rodape-empresa a, .rodape-legal a {
  display: inline-block; padding-block: .22rem; min-height: 24px;
}
.rodape-titulo { color: var(--branco); font-size: 1rem; margin-bottom: .6rem; }
/* 3 numa coluna e 2 na de baixo, a pedido. `grid-auto-flow: column` com
   3 linhas preenche de cima pra baixo e so entao pula pra segunda coluna. */
.rodape-modelos ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem .5rem; }
@media (min-width: 420px) {
  .rodape-modelos ul {
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    justify-content: start;
    column-gap: 2rem;
  }
}
.rodape-empresa p, .rodape-contato p { margin: 0 0 .25rem; }

/* Em coluna unica o rodape ficava encostado na esquerda com metade da faixa
   vazia. Tres colunas usam a largura e encurtam a altura do bloco. */
.rodape-grade { display: grid; gap: 2rem; }
@media (min-width: 760px) {
  .rodape-grade { grid-template-columns: 1fr 1fr auto; gap: 2.5rem; }
}
.rodape-razao { color: var(--branco); font-weight: 700; }
.rodape-redes {
  list-style: none; padding: 0; margin: 1rem 0 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; font-size: .9rem;
}
.rodape-redes a { display: inline-block; padding-block: .22rem; min-height: 24px; }

/* ---------- sub-rodape ---------- */
.rodape-fim {
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid #332e2b;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  align-items: baseline; justify-content: space-between;
  font-size: .875rem;
}
.rodape-copy, .rodape-assinatura { margin: 0; }
.rodape-copy a, .rodape-assinatura a { color: #d6cfc7; text-decoration: underline; }
.rodape-copy a:hover, .rodape-assinatura a:hover { color: var(--branco); }
/* o separador entre os links e enfeite, some do leitor de tela pelo aria-hidden */
/* o separador e decorativo e tem aria-hidden, entao seria isento do
   contraste; clarear custa uma linha e tira o apontamento da lista. */
.rodape-copy span { color: #948b84; margin: 0 .15rem; }


/* ---------- CTA fixo mobile ---------- */
/* A BARRA DE CTA FIXA DO CELULAR FOI REMOVIDA (24/08/2026, a pedido).
   O que sobra de contato permanente no celular e o botao flutuante do
   WhatsApp, mais abaixo. Se um dia voltar: ela precisa nascer abaixada e so
   subir quando nenhum CTA da pagina estiver na tela, senao vira o mesmo
   botao duas vezes no topo. Detalhes em ENTREGA.md. */

/* O rodape reservava 7.5rem pra barra. Sem ela, sobra so o necessario pro
   flutuante do WhatsApp nao sentar em cima da ultima linha do rodape. */
@media (max-width: 760px) {
  .rodape { padding-bottom: 5rem; }
}


/* ---------- entrada do hero ----------
   Anima SO o texto. A foto de fundo, que e o elemento de LCP, nao entra:
   animar opacidade do que o navegador mede como LCP atrasa a nota.
   CSS puro, sem esperar JS, pra comecar no primeiro frame. */
@media (prefers-reduced-motion: no-preference) {
  .hero-conteudo > * { animation: sobe .62s cubic-bezier(.22,.61,.36,1) both; }
  .hero-conteudo > *:nth-child(1) { animation-delay: .05s; }
  .hero-conteudo > *:nth-child(2) { animation-delay: .12s; }
  .hero-conteudo > *:nth-child(3) { animation-delay: .19s; }
  .hero-conteudo > *:nth-child(4) { animation-delay: .26s; }
  .hero-conteudo > *:nth-child(5) { animation-delay: .33s; }
  .hero-conteudo > *:nth-child(6) { animation-delay: .40s; }
  .hero-conteudo > *:nth-child(7) { animation-delay: .47s; }
  @keyframes sobe { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

  /* Entrada da foto do hero: abre ampliada e recua ate o enquadramento
     final. Roda UMA vez e para (sem `infinite`): animacao eterna mantem a
     GPU acordada e come bateria.

     ERA 18s COM scale(1.08), o que na pratica e imperceptivel: 8% diluidos
     em 18 segundos nao leem como movimento, leem como nada. Agora sao 1,9s
     com 14%, que e o tempo em que a pessoa ainda esta olhando a dobra.

     SO `transform`, NUNCA `opacity`. Esta e a imagem de LCP da pagina: se
     ela comecar transparente, o navegador nao conta como pintada e o LCP
     piora justamente na metrica que a auditoria cobra. Escala nao afeta
     essa conta. */
  .hero-fundo img { animation: aproxima 1.9s cubic-bezier(.16,.84,.44,1) both; }
  @keyframes aproxima { from { transform: scale(1.14); } to { transform: scale(1); } }
}

/* ---------- botao flutuante de WhatsApp ---------- */
.wpp-flutuante {
  position: fixed; right: 1.1rem; z-index: 50;
  bottom: calc(1.1rem + env(safe-area-inset-bottom));
  width: 58px; height: 58px; border-radius: 50%;
  border: 0; cursor: pointer;
  display: grid; place-items: center;
  /* Verde do WhatsApp escurecido. O #25D366 oficial da 1,98:1 com o icone
     branco e reprova no contraste de elemento nao textual (WCAG 1.4.11,
     minimo 3:1). Este da 3,06:1 e continua sendo lido como WhatsApp. */
  background: #1EA952; color: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.28);
  transition: transform .15s ease, background-color .15s ease;
}
.wpp-flutuante:hover { background: #17914a; transform: translateY(-2px); }
.wpp-flutuante:active { transform: translateY(0); }
/* No celular ele fica menor e encostado no canto de baixo, sem recuo
   nenhum. Ja teve `bottom: 5.4rem` fixo aqui pra desviar da barra de CTA
   que existia antes; com a barra removida esse recuo so deixava o botao
   boiando a 86px do fim da tela com nada embaixo. */
@media (max-width: 760px) {
  .wpp-flutuante { width: 52px; height: 52px; }
  /* No celular o banner de cookies ocupa quase a largura toda e o flutuante
     cairia em cima dele. Some ate a escolha ser feita. No desktop nao
     acontece: o banner fica a esquerda e o botao a direita. */
  body.consent-aberto .wpp-flutuante { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wpp-flutuante { transition: none; } }

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal-fundo { position: absolute; inset: 0; background: rgba(28,25,23,.62); }
.modal-caixa {
  position: relative; z-index: 1;
  width: min(100%, 30rem); max-height: calc(100vh - 2rem); overflow-y: auto;
  background: var(--branco); border-radius: var(--raio); padding: 1.8rem 1.5rem 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.modal-fechar {
  position: absolute; top: .5rem; right: .5rem;
  width: 44px; height: 44px; border: 0; background: transparent;
  font-size: 1.8rem; line-height: 1; cursor: pointer; color: var(--tinta-2); border-radius: 50%;
}
.modal-fechar:hover { background: var(--areia); }
.modal-titulo { font-size: 1.4rem; margin-bottom: .4rem; padding-right: 2.5rem; }
.modal-linha { color: var(--tinta-2); font-size: .95rem; margin-bottom: 1.2rem; }

.campo { margin-bottom: 1rem; }
.campo label { display: block; font-weight: 650; font-size: .93rem; margin-bottom: .3rem; }
.campo input, .campo select {
  font: inherit; width: 100%; padding: .75rem .85rem; min-height: 48px;
  border: 2px solid var(--borda-ctrl); border-radius: var(--raio-p);
  background: var(--branco); color: var(--tinta);
}
.campo input:focus-visible, .campo select:focus-visible { border-color: var(--acao); }
.campo [aria-invalid="true"] { border-color: #a3231b; }
.erro { display: block; margin-top: .3rem; color: #a3231b; font-size: .875rem; font-weight: 600; }
.consent { margin: .9rem 0 0; font-size: .82rem; color: var(--tinta-2); text-align: center; }
.form-status { margin: .8rem 0 0; font-size: .92rem; font-weight: 600; text-align: center; }
.form-status[data-tipo="erro"] { color: #a3231b; }
.form-status[data-tipo="ok"] { color: var(--verde); }

/* honeypot: fora da tela, mas ENVIADO junto (o JS usa FormData do proprio form) */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- banner de consentimento ---------- */
/* Card FLUTUANTE, nao faixa colada na borda: a faixa de largura total virava
   um retangulo preto atravessando a tela e comia a dobra. Continua `fixed`
   (nao empurra layout, P9) e continua com "Recusar tudo" do mesmo tamanho do
   "Aceitar tudo", que e exigencia do Guia da ANPD. */
.consent-banner {
  position: fixed; z-index: 90;
  left: 1rem; right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
  pointer-events: none;                 /* so o card recebe clique */
}
/* No desktop encosta no canto: centralizado ele tapava a foto do produto e
   chegava perto do CTA do hero. */
@media (min-width: 761px) {
  .consent-banner { left: 1.5rem; right: auto; bottom: 1.5rem; justify-content: flex-start; }
}
/* O `bottom: 5.6rem` que morava aqui desviava da barra fixa de CTA. A barra
   foi removida, e o recuo sobreviveu a ela: o banner subia 90px do fim da
   tela e, em telas curtas, sentava em cima do CTA do hero e do selo de frete.
   O botao flutuante do WhatsApp nao e motivo pra manter o recuo - ele se
   esconde sozinho enquanto o banner esta aberto (regra logo acima).
   E o mesmo resto que ja tinha sido tirado do .wpp-flutuante. */
.consent-banner[hidden] { display: none; }
.consent-caixa {
  pointer-events: auto;
  width: min(100%, 27rem);
  background: rgba(20,17,16,.97);
  color: var(--branco);
  border: 1px solid #332e2b;
  border-radius: var(--raio);
  box-shadow: 0 18px 50px rgba(0,0,0,.4);
  padding: 1.1rem 1.2rem 1.2rem;
}
.consent-caixa h2 { font-size: 1rem; color: var(--branco); margin-bottom: .35rem; }
.consent-caixa p  { font-size: .875rem; line-height: 1.5; color: #cfc7bf; margin-bottom: .9rem; }
.consent-caixa a  { color: var(--branco); }
.consent-categorias { display: grid; gap: .35rem; margin-bottom: .9rem; font-size: .875rem; }
.consent-categorias label { display: flex; align-items: center; gap: .6rem; min-height: 32px; cursor: pointer; }
.consent-categorias input { width: 20px; height: 20px; accent-color: var(--acao); }
.consent-botoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.consent-botoes .btn {
  flex: 1 1 auto; padding: .55rem 1rem; min-height: 44px;
  font-size: .9rem; border-radius: 10px;
}
.consent-botoes .btn-linha { color: var(--branco); border-color: #4a423d; }
.consent-botoes .btn-linha:hover { background: #2a2522; color: var(--branco); }
/* "Recusar tudo" com o MESMO peso de "Aceitar tudo" (Guia ANPD): mesmo tamanho,
   mesma altura, so o tom muda pra distinguir a acao. */
#consent-recusar { background: #4a423d; box-shadow: none; }
#consent-recusar:hover { background: #5c534d; }
/* "Escolher" e acao secundaria: pode ser menor sem ferir a regra, porque a
   recusa direta continua a um clique e do mesmo tamanho do aceite. */
#consent-escolher, #consent-salvar { flex: 0 1 auto; }

/* ---------- home e blog ---------- */
/* ---------- carrossel de modelos ----------
   Scroll-snap nativo, sem biblioteca. O arrasto e o proprio scroll do
   sistema, entao ja funciona no dedo, no trackpad e no Tab.

   O padding vertical do scroller NAO e enfeite: o cartao levanta 4px no
   hover e tem sombra embaixo. Sem essa folga o overflow-x corta os dois. */
/* A FAIXA SANGRA ATE A BORDA DA TELA.
   Antes ela terminava na largura do .wrap e o ultimo cartao aparecia cortado
   por uma parede invisivel no meio da pagina, o que le como defeito. Cortado
   na BORDA DA TELA le como "continua pra la", que e a verdade.
   O padding recompoe o alinhamento do primeiro cartao com o titulo. */
.carrossel { position: relative; }
/* SEM SANGRIA, E CARTAO QUE FECHA A CONTA.
   Tentei antes sangrar a faixa ate a borda da tela pra o corte parecer
   proposital. Em monitor largo ficou pior: o site inteiro usa uma coluna de
   1120px, entao sobrava 393px de nada na esquerda (20% da tela em 1920) e os
   cartoes fugiam pela direita. Assimetrico e estranho.

   A saida foi tirar o problema em vez de disfarcar: o cartao passa a ser
   uma FRACAO EXATA da coluna, entao no desktop cabem 3 inteiros e nao sobra
   pedaco cortado nenhum. Quem conta que ha mais e a seta e o arrasto.

   No celular a fatia do proximo continua, e ali ela e util: e o que ensina
   que da pra arrastar, num aparelho onde nao existe hover. */
.lista-produtos > .produto-card {
  --cartoes: 3;
  --vao: 1.2rem;
  width: calc((100% - (var(--cartoes) - 1) * var(--vao)) / var(--cartoes));
}
/* A fatia de 1,15 cartao so faz sentido em celular. Ela estava entrando a
   700px e o cartao INCHAVA pra 551px, ficando maior do que era a 900px:
   a conta e 1,15 cartao numa faixa larga. Agora ela so entra em 520px. */
@media (max-width: 1000px) { .lista-produtos > .produto-card { --cartoes: 2; } }
@media (max-width: 520px)  { .lista-produtos > .produto-card { --cartoes: 1.15; } }

.lista-produtos {
  list-style: none; margin: 0;
  display: flex; gap: 1.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: .25rem;
  padding: .5rem .25rem 1.6rem;
  overscroll-behavior-x: contain;   /* nao dispara o "voltar pagina" do navegador */
  scrollbar-width: none;
}
.lista-produtos::-webkit-scrollbar { display: none; }
.lista-produtos:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }

.lista-produtos > .produto-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

/* Aqui havia um `mask-image` degrade nas duas pontas pra sugerir "tem mais
   pro lado". Saiu: ele desbotava o cartao da borda e a seção inteira ficava
   com cara de foto mal renderizada. A fatia do proximo cartao, cortada
   limpa, ja diz a mesma coisa sem sujar nada. */

/* Cabecalho da secao: titulo a esquerda, setas a direita. Fora do caminho
   das fotos e sem sombra flutuante. */
.secao-topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.secao-topo h2 { margin: 0; }
/* Comeca escondido e o JS liga quando confirma que ha o que rolar.
   Sem JS, seta nenhuma aparece: botao que nao faz nada e pior que ausente.
   Isso substitui um `:has()` que eu tinha escrito aqui e que era fragil, e
   um seletor de irmao que nem funcionava (as setas vem ANTES do carrossel
   no HTML). */
.carrossel-setas { display: none; gap: .5rem; }
.carrossel-setas.ativa { display: flex; }

.carrossel-seta {
  width: 2.75rem; height: 2.75rem; border-radius: 10px;  /* 44px: minimo de alvo de toque */
  display: grid; place-items: center;
  background: transparent; color: var(--tinta);
  border: 1px solid var(--borda-ctrl); cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.carrossel-seta svg { width: 1.15rem; height: 1.15rem; }
.carrossel-seta:hover { background: var(--acao); color: #fff; border-color: var(--acao); }
.carrossel-seta:focus-visible { outline: 3px solid var(--acao); outline-offset: 3px; }

/* Ponta da lista: a seta fica DESABILITADA, nao escondida.
   Escondida ela some do Tab com o foco dentro (o foco cai no <body>) e ainda
   empurra a irma de lugar. `aria-disabled` mantem o botao no lugar e no Tab,
   avisa o leitor de tela que nao da pra usar, e o JS ignora o clique. */
.carrossel-seta[aria-disabled="true"] {
  opacity: .3; cursor: default; background: transparent; color: var(--tinta);
  border-color: var(--borda-ctrl);
}

@media (max-width: 640px) {
  .secao-topo { margin-bottom: 1.1rem; }
}

/* ---------- card de modelo ----------
   Antes era so texto: nome, preco e um link no rodape. Cartao de sofa sem
   foto do sofa nao tem como funcionar. Agora tem capa, e o cartao INTEIRO e
   clicavel, com um alvo so em vez de um link de texto pequeno. */
/* SEPARACAO DO CARD.
   Media antes: card #ffffff sobre a secao #faf7f2 = 1,07:1, com borda de
   1,45:1 e sombra de 5%. Na pratica o cartao nao tinha aresta: numa faixa
   grande e clara, com foto de sofa branco em parede branca, o olho nao
   achava onde uma coisa termina e a outra comeca, e a secao inteira lia
   como fora de foco. Nao era nitidez de pixel: medi o texto com e sem a
   animacao de scroll e a diferenca foi 0,0%.
   Agora: borda mais firme e sombra que existe. A secao tambem escureceu
   (ver .secao-clara logo abaixo), levando a separacao pra 1,23:1. */
.produto-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--branco); border: 1px solid #d2c3ae;
  border-radius: var(--raio); overflow: hidden;
  box-shadow: 0 1px 2px rgba(28,25,23,.06), 0 10px 24px rgba(28,25,23,.10);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.produto-card:hover {
  transform: translateY(-4px); border-color: var(--borda-ctrl);
  box-shadow: 0 16px 36px rgba(28,25,23,.14);
}
/* o foco do teclado precisa aparecer no CARTAO, nao so no link invisivel */
.produto-card:has(.produto-link:focus-visible) {
  outline: 3px solid var(--acao); outline-offset: 3px;
}

/* 3:2, a proporcao nativa das fotos de estudio: em 4:3 o corte comia
   as pontas do sofa. */
/* O filete embaixo separa a foto do bloco de texto. Sem ele, sofa claro
   sobre parede clara escorre direto pro fundo branco do cartao. */
.produto-foto {
  background: var(--creme); aspect-ratio: 3 / 2; overflow: hidden;
  border-bottom: 1px solid #e6dccb;
}
.produto-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.produto-card:hover .produto-foto img { transform: scale(1.05); }
.produto-foto-vazia {
  width: 100%; height: 100%; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--areia) 0%, var(--areia-2) 100%);
  color: var(--tinta-2); font-weight: 700;
}

.produto-texto { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.produto-texto h3 { margin: 0; font-size: 1.08rem; }
.produto-link { color: var(--tinta); text-decoration: none; }
.produto-link:hover { color: var(--tinta); }
/* estica o link por cima do cartao inteiro */
.produto-link::after { content: ""; position: absolute; inset: 0; }
.produto-desc { margin: 0; color: var(--tinta-2); font-size: .93rem; line-height: 1.45; }
.produto-preco { margin: .2rem 0 0; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.produto-preco span { display: block; font-weight: 500; font-size: .82rem; color: var(--tinta-2); letter-spacing: 0; }
.produto-cta {
  margin-top: auto; padding-top: .7rem;
  color: var(--acao); font-weight: 700; font-size: .92rem;
}
.produto-cta::after { content: " →"; }

.lista-posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .lista-posts { grid-template-columns: repeat(2, 1fr); } }
.post-card { background: var(--branco); border: 1px solid var(--areia-2); border-radius: var(--raio); padding: 1.3rem; }
.post-card h3 { margin-bottom: .35rem; font-size: 1.08rem; }
.post-card h3 a { color: var(--tinta); text-decoration: none; }
.post-card h3 a:hover { color: var(--acao-2); text-decoration: underline; }
.post-card p { margin: 0; color: var(--tinta-2); font-size: .95rem; }
.post-meta { font-size: .82rem; color: var(--tinta-2); margin-top: .5rem; }

.artigo { padding: clamp(2rem, 5vw, 3.5rem) 0; }
.artigo-corpo { max-width: 42rem; }
.artigo-corpo h2 { margin-top: 2rem; }
.artigo-corpo h3 { margin-top: 1.5rem; }
.artigo-corpo ul, .artigo-corpo ol { padding-left: 1.3rem; }
.artigo-corpo li { margin-bottom: .4rem; }
.artigo-corpo table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: .95rem; }
.artigo-corpo th, .artigo-corpo td { border: 1px solid var(--areia-2); padding: .6rem .7rem; text-align: left; }
.artigo-corpo th { background: var(--areia); }
.tabela-rolavel { overflow-x: auto; }
.migalhas { font-size: .875rem; color: var(--tinta-2); margin-bottom: 1rem; }
.migalhas a { color: var(--tinta-2); }
.caixa-cta {
  background: var(--areia); border-radius: var(--raio); padding: 1.5rem; margin: 2rem 0 0;
}
.caixa-cta h2 { font-size: 1.2rem; margin-bottom: .4rem; }
.relacionados { margin-top: 2.5rem; }
.relacionados ul { padding-left: 1.2rem; }

/* ---------- galeria do produto ---------- */
/* ---------- cores de pronta entrega ---------- */
/* Herda o cabecalho da galeria (mesmo tamanho, mesmo centro) porque as duas
   sao blocos irmaos dentro de #produto e alinhar meio a meio e o que faz a
   secao parecer uma so. */
.cores { margin-top: 2.6rem; }
.cores-titulo { font-size: 1.15rem; margin-bottom: .3rem; text-align: center; }
.cores-linha {
  color: var(--tinta-2); font-size: .95rem; margin-bottom: 1.1rem;
  text-align: center; max-width: 44rem; margin-inline: auto; text-wrap: pretty;
}
.cores-linha strong { color: var(--tinta); font-weight: 700; }

/* Duas colunas no celular e tres a partir de 620px. Sao TRES cores: a grade
   de tres so cabe quando ha largura, e em duas colunas a terceira desce
   sozinha, o que aqui e aceitavel porque cada item se explica pelo rotulo. */
.cores-lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 620px) { .cores-lista { grid-template-columns: repeat(3, 1fr); } }

.cores-item { display: grid; gap: .5rem; }
.cores-abrir {
  display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
  background: none; border-radius: var(--raio-p); overflow: hidden;
  line-height: 0;
}
.cores-abrir img {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--raio-p);
  transition: transform .35s ease;
}
.cores-abrir:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .cores-abrir img { transition: none; }
  .cores-abrir:hover img { transform: none; }
}
/* O rotulo e o dado, nao legenda decorativa: e por ele que a pessoa fala
   "quero o bege marfim" no WhatsApp. Por isso vai escuro e em peso 700. */
.cores-rotulo {
  margin: 0; text-align: center; font-size: .9rem; font-weight: 700;
  color: var(--tinta); line-height: 1.3;
}

.galeria { margin-top: 2.6rem; }
/* A galeria vem num .wrap proprio, logo apos a coluna estreita do texto:
   sem esta folga o titulo dela encosta na caixa de destaque. */
.secao-estreita + .wrap .galeria { margin-top: 2rem; }
/* Centralizados tambem no desktop: a secao #produto inteira passou a ter o
   cabecalho no centro, e este subtitulo da galeria era o unico item a
   esquerda no meio dela. No celular ja era centralizado. */
.galeria-titulo { font-size: 1.15rem; margin-bottom: .3rem; text-align: center; }
.galeria-linha {
  color: var(--tinta-2); font-size: .95rem; margin-bottom: 1.1rem;
  text-align: center; max-width: 44rem; margin-inline: auto; text-wrap: pretty;
}

/* A MESMA MARCACAO SERVE AOS DOIS DESENHOS, so muda o CSS:
     - desktop: grade de miniaturas, como sempre foi
     - celular: uma foto por vez, com setas e pontinhos
   Um markup so evita duplicar as sete fotos no HTML e evita o lightbox
   ter que saber de qual dos dois veio o clique. */

/* ---- desktop: sanfona de fotos ----
   Referencia que o Ge mandou (21st.dev): tiras lado a lado, e a que recebe o
   ponteiro abre e empurra as outras. O componente original e React com
   Tailwind; aqui e o mesmo efeito em CSS, porque o truque e so `flex-grow`
   com transicao. Nao instalei nada.

   TRES COISAS QUE O ORIGINAL NAO TEM e que entraram:

   1. TECLADO. O original abre so no `:hover`, entao quem navega por Tab
      nunca ve a foto inteira. `:focus-within` abre igual.
   2. NENHUMA FICA MINUSCULA. `flex-basis` garante um minimo pra tira
      fechada: nossas fotos sao de SOFA, que e um objeto largo. Espremido em
      60px vira um borrao, e a pessoa nao sabe no que esta clicando.
   3. `prefers-reduced-motion` desliga a animacao. */
/* Grade de miniaturas ate 999px. A sanfona so entra de 1000px pra cima:
   medido, a 761px cada tira fechada ficava com 110px, uma lasca onde nao se
   reconhece nada. Sofa e objeto largo; tira estreita nao conta historia. */
.gal-trilho {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
@media (min-width: 1000px) {
  .gal-trilho { display: flex; gap: .6rem; height: clamp(340px, 30vw, 420px); }
}
.gal-slide {
  margin: 0; position: relative; min-width: 0;
  border: 1px solid var(--areia-2); border-radius: var(--raio-p);
  /* Fundo BRANCO, nao creme: metade das fotos sao recortes em fundo branco,
     e sobre creme aparecia um retangulo mais claro no card. */
  overflow: hidden; background: var(--branco);
  /* 0,45s era o tempo de um clique; a tira abria num pulo. 0,8s com uma
     curva que desacelera no fim faz o movimento parecer intencional em vez
     de reativo.

     O ATRASO DE 80ms na abertura NAO e enfeite: sem ele, passar o mouse por
     cima a caminho de outra coisa dispara a sanfona inteira e a seção fica
     saltando sozinha. Com o atraso, so abre quando a pessoa PARA na tira.
     Fechar continua imediato, senao ficaria duas abertas ao mesmo tempo. */
  transition: flex-grow .8s cubic-bezier(.25,.8,.25,1);
}
@media (min-width: 1000px) {
  .gal-slide { flex: 1 1 0; }

  /* ESPECIFICIDADE ALTA DE PROPOSITO, e isso nao e capricho.
     A entrada das secoes usa `.js-anim .revelar-fila.visivel > *`, que
     REDECLARA o `transition` inteiro (shorthand apaga o que havia antes) e
     matava o `flex-grow` desta sanfona. Resultado medido: a tira abria em
     0ms, num pulo, com a duracao computada saindo 0,5s da OUTRA regra.
     Aqui as tres propriedades convivem: as duas da entrada e a da sanfona. */
  .js-anim .gal-trilho.revelar-fila > .gal-slide,
  .gal-trilho > .gal-slide {
    transition: opacity .5s cubic-bezier(.22,.61,.36,1),
                transform .5s cubic-bezier(.22,.61,.36,1),
                flex-grow .8s cubic-bezier(.25,.8,.25,1);
  }

  .gal-trilho:hover .gal-slide { flex-grow: .7; }        /* as outras cedem espaco */
  .gal-trilho > .gal-slide:hover,
  .gal-trilho > .gal-slide:focus-within {
    flex-grow: 2.6;
    transition-delay: 0s, 0s, 80ms;   /* o atraso e so do flex-grow */
  }
}

/* A CADEIA INTEIRA precisa de altura, e nao so a <img>. Entre o <li> e a
   imagem existe o <button> e o <picture>; `height: 100%` na img resolve
   contra o pai IMEDIATO, e o <picture> ficava com altura automatica. Sem
   isto a foto ficava no meio da tira, com branco em cima e embaixo. */
/* Fora da sanfona a foto volta a ser QUADRADA. Sem isto ela herdava a altura
   fixa da faixa e o quadrado virava retangulo cortado, inclusive no celular. */
.gal-slide img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }

@media (min-width: 1000px) {
  /* A CADEIA INTEIRA precisa de altura, e nao so a <img>. Entre o <li> e a
     imagem existe o <button> e o <picture>; `height: 100%` na img resolve
     contra o pai IMEDIATO, e o <picture> ficava com altura automatica. Sem
     isto a foto ficava no meio da tira, com branco em cima e embaixo. */
  .gal-slide .galeria-abrir,
  .gal-slide picture { height: 100%; display: block; }
  .gal-slide img { height: 100%; aspect-ratio: auto; object-position: center; }
}
@media (prefers-reduced-motion: reduce) {
  .gal-slide { transition: none; }
}

/* A foto e um <button> (abre o lightbox): resetar o desenho padrao. */
.galeria-abrir {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; position: relative; line-height: 0;
}
/* Lupa dizendo que da pra ampliar. No desktop aparece no hover/foco; no
   celular fica sempre visivel, porque la nao existe hover pra revelar. */
.galeria-abrir::after {
  content: ""; position: absolute; right: .5rem; bottom: .5rem;
  width: 30px; height: 30px; border-radius: 50%; pointer-events: none;
  background: rgba(28,25,23,.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E")
    no-repeat center / 17px 17px;
  opacity: 0; transition: opacity .2s ease, background-color .2s ease;
}
.gal-slide:hover .galeria-abrir::after,
.galeria-abrir:focus-visible::after { opacity: 1; }

/* Setas, pontinhos e legenda so existem no carrossel do celular. */
.gal-seta, .gal-pontos, .gal-legenda { display: none; }

/* ---- celular: uma foto por vez ---- */
@media (max-width: 760px) {
  /* 34rem de teto porque a foto e QUADRADA: solta na largura do container
     ela viraria um quadrado altissimo e empurraria a pagina pra fora. */
  .gal { max-width: 34rem; margin-inline: auto; }
  .gal-palco {
    position: relative;
    border: 1px solid var(--areia-2); border-radius: var(--raio);
    background: var(--branco); overflow: hidden;
  }
  .gal-trilho {
    display: flex; gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;   /* nao dispara o "voltar pagina" */
    scrollbar-width: none;
  }
  .gal-trilho::-webkit-scrollbar { display: none; }
  .gal-trilho:focus-visible { outline: 3px solid var(--acao); outline-offset: -3px; }
  .gal-slide {
    flex: 0 0 100%; scroll-snap-align: center;
    border: 0; border-radius: 0; box-shadow: none; transform: none;
  }
  .gal-slide:hover { transform: none; box-shadow: none; }
  .gal-slide:hover img { transform: none; }
  /* No toque nao ha hover: a lupa fica sempre a mostra. */
  .galeria-abrir::after { opacity: 1; width: 34px; height: 34px; background-size: 19px 19px; right: .6rem; bottom: .6rem; }

  .gal-seta {
    display: grid; place-items: center;
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: rgba(255,255,255,.92); color: var(--tinta);
    border: 1px solid var(--borda-ctrl); cursor: pointer;
    box-shadow: 0 4px 14px rgba(28,25,23,.18);
    transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
  }
  .gal-seta svg { width: 1.15rem; height: 1.15rem; }
  .gal-anterior { left: .7rem; }
  .gal-proxima  { right: .7rem; }
  .gal-seta:focus-visible { outline: 3px solid var(--acao); outline-offset: 2px; }
  /* Na ponta ela e DESABILITADA, nao escondida: sumir com o foco dentro joga
     o foco no <body> e quem usa teclado perde o lugar. */
  .gal-seta[aria-disabled="true"] { opacity: .25; cursor: default; }

  .gal-legenda {
    display: block; margin: .8rem 0 0; text-align: center;
    color: var(--tinta-2); font-size: .9rem; line-height: 1.45; min-height: 2.6em;
  }
  .gal-pontos {
    display: flex; justify-content: center; flex-wrap: wrap; gap: .1rem;
    list-style: none; margin: .5rem 0 0; padding: 0;
  }
  .gal-pontos button {
    /* Alvo de 28px (minimo de toque) com um ponto desenhado de 8px: o resto
       e area clicavel invisivel. Ponto de 28px viraria bolota. */
    width: 28px; height: 28px; padding: 0; border: 0; background: none;
    cursor: pointer; display: grid; place-items: center;
  }
  .gal-pontos button::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--borda-ctrl); transition: background .2s ease, transform .2s ease;
  }
  .gal-pontos button[aria-current="true"]::before { background: var(--acao); transform: scale(1.35); }
  .gal-pontos button:focus-visible { outline: 3px solid var(--acao); outline-offset: -2px; border-radius: 50%; }

  /* Sem JS nao ha o que comandar; o arrasto e a rolagem seguem funcionando. */
  .gal:not([data-pronto]) .gal-seta,
  .gal:not([data-pronto]) .gal-pontos { display: none; }
}

/* ============================================================
   MOBILE: conteudo centralizado
   ------------------------------------------------------------
   Ate 760px o texto vai pro centro e os botoes ocupam a largura toda.
   Em tela estreita, texto alinhado a esquerda com o botao solto do lado
   deixa a coluna torta; centralizado o olho desce reto do titulo ao CTA.
   Vale so no mobile: em desktop texto longo centralizado cansa a leitura.
   ============================================================ */
@media (max-width: 760px) {
  .hero-conteudo { text-align: center; margin-inline: auto; }
  .hero-sub { margin-inline: auto; }
  .hero-botoes { justify-content: center; }
  .hero-botoes .btn { width: 100%; }

  .secao h2, .secao > .wrap > .texto-grande { text-align: center; }
  .secao-estreita { text-align: center; }
  /* ficha, faq, galeria e depoimento voltam pra esquerda: leitura de lista
     e de pergunta-resposta centralizada fica ruim de acompanhar. */
  .ficha, .faq, .galeria, .depoimento, .artigo-corpo, .rodape,
  .galeria-titulo, .galeria-linha { text-align: center; }

  .cards, .passos { text-align: center; }
  .card-icone, .passo-num { margin-inline: auto; }

  .rodape-grade { text-align: center; }
  .rodape-legal, .rodape-fim { justify-content: center; }
  .rodape-fim { text-align: center; }

  /* `justify-items` centra cada link DENTRO da celula; `justify-content`
     centra o par de colunas dentro da faixa. Faltava o segundo, e as duas
     colunas ficavam grudadas na esquerda com meia tela vazia do lado.
     A divisao 3 + 2 continua, so muda de lugar. */
  .rodape-modelos ul { justify-items: center; justify-content: center; }

  /* O reset da folha (`img, picture, svg { display: block }`) tira a imagem
     do fluxo de texto, entao `text-align: center` do pai NAO a alcanca.
     Bloco se centra por margem. Era o logo torto no canto esquerdo. */
  .rodape-logo { margin-inline: auto; }
}

/* ============================================================
   ANIMACOES
   ------------------------------------------------------------
   Regras que segui:
   - Nada anima no hero. Ele carrega o elemento de LCP, e animar opacidade
     do que o navegador mede como LCP atrasa a nota.
   - Nada anima altura nem margem, so `opacity` e `transform`, que rodam no
     compositor e nao disparam recalculo de layout (INP).
   - O estado inicial fica numa classe posta pelo JS (`.js-anim`). Sem JS o
     conteudo aparece normal, nunca invisivel.
   - `prefers-reduced-motion` ja desliga tudo na regra global la em cima.
   ============================================================ */
.js-anim .revelar { opacity: 0; transform: translateY(14px); }
.js-anim .revelar.visivel {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.22,.61,.36,1),
              transform .55s cubic-bezier(.22,.61,.36,1);
}
/* itens em fila entram em cascata curta */
.js-anim .revelar-fila > * { opacity: 0; transform: translateY(14px); }
.js-anim .revelar-fila.visivel > * {
  opacity: 1; transform: none;
  transition: opacity .5s cubic-bezier(.22,.61,.36,1),
              transform .5s cubic-bezier(.22,.61,.36,1);
}
.js-anim .revelar-fila.visivel > *:nth-child(2) { transition-delay: .07s; }
.js-anim .revelar-fila.visivel > *:nth-child(3) { transition-delay: .14s; }
.js-anim .revelar-fila.visivel > *:nth-child(4) { transition-delay: .21s; }
.js-anim .revelar-fila.visivel > *:nth-child(5) { transition-delay: .28s; }
.js-anim .revelar-fila.visivel > *:nth-child(6) { transition-delay: .35s; }
.js-anim .revelar-fila.visivel > *:nth-child(7) { transition-delay: .42s; }

/* micro-interacoes */
.card, .passos li, .produto-card, .post-card {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover, .passos li:hover, .produto-card:hover, .post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(28,25,23,.10);
  border-color: var(--areia-2);
}

/* FAQ: o <details> nao anima sozinho. Animar a resposta em opacity+transform
   nao mexe na altura, entao abre suave sem empurrar o resto com solavanco. */
.faq details[open] > p { animation: faq-abre .28s cubic-bezier(.22,.61,.36,1); }
@keyframes faq-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.faq summary::after { transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(180deg); }

/* Botao flutuante: uma pulsacao curta ao aparecer, so pra ser notado. */
@media (prefers-reduced-motion: no-preference) {
  .wpp-flutuante::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(30,169,82,.55);
    animation: wpp-pulso 2.6s ease-out 3;
  }
  @keyframes wpp-pulso {
    0%   { box-shadow: 0 0 0 0 rgba(30,169,82,.55); }
    70%  { box-shadow: 0 0 0 14px rgba(30,169,82,0); }
    100% { box-shadow: 0 0 0 0 rgba(30,169,82,0); }
  }
}

/* ============================================================
   /links/  -  pagina de links da bio
   ============================================================ */
.pagina-links { background: var(--creme); padding: clamp(2rem, 5vw, 3rem) 0 3rem; }
.links-wrap { max-width: 34rem; }

.links-topo { text-align: center; margin-bottom: 2rem; }
.links-arroba { color: var(--azul); font-weight: 700; margin-bottom: .3rem; }
.links-topo h1 { font-size: clamp(1.5rem, 5vw, 2rem); margin-bottom: .5rem; }
.links-sub { color: var(--tinta-2); margin: 0; }

.links-grupo {
  font-size: .78rem; font-weight: 750; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-2);
  margin: 2rem 0 .8rem; text-align: center;
}
.links-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }

.link-botao {
  /* `button` e `a` no mesmo visual: o de orcamento abre o modal, os outros
     navegam. Reset explicito porque button nao herda fonte nem largura. */
  font: inherit; text-align: center; text-decoration: none; cursor: pointer;
  width: 100%; display: grid; gap: .15rem;
  padding: .95rem 1.1rem; min-height: 56px;
  background: var(--branco); color: var(--tinta);
  border: 2px solid var(--areia-2); border-radius: 14px;
  box-shadow: 0 2px 8px rgba(28,25,23,.05);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.link-botao:hover {
  transform: translateY(-2px); color: var(--tinta);
  border-color: var(--borda-ctrl);
  box-shadow: 0 10px 26px rgba(28,25,23,.12);
}
.link-titulo { font-weight: 700; }
.link-apoio { font-size: .85rem; color: var(--tinta-2); }

/* Verde do WhatsApp escurecido ate 4,58:1 com o branco.
   ATENCAO A DIFERENCA: o botao flutuante usa #1EA952, que da 3,06:1, e la
   ESTA CERTO, porque o conteudo dele e so o icone e o minimo pra elemento
   nao textual e 3:1. Aqui tem TEXTO, e texto exige 4,5:1. Usar o mesmo
   verde nos dois lugares reprovaria neste. */
.link-zap { background: #188741; border-color: #188741; color: #fff; }
.link-zap:hover { background: #157639; border-color: #157639; color: #fff; }
.link-zap .link-apoio { color: #fff; }

.link-orcamento { background: var(--acao); border-color: var(--acao); color: #fff; }
.link-orcamento:hover { background: var(--acao-2); border-color: var(--acao-2); color: #fff; }
.link-orcamento .link-apoio { color: #fff; }

.links-rodape {
  margin: 2.2rem 0 0; text-align: center;
  font-size: .82rem; color: var(--tinta-2); line-height: 1.6;
}

/* ============================================================
   LIGHTBOX
   ------------------------------------------------------------
   <dialog> nativo: o foco preso, o Esc e o retorno de foco sao do
   navegador. Aqui so o desenho.
   ============================================================ */
.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; max-height: 100vh; width: 100%; height: 100%;
  display: none; place-items: center; overflow: hidden;
}
.lightbox[open] { display: grid; }
.lightbox::backdrop { background: rgba(15,12,11,.88); }
@media (prefers-reduced-motion: no-preference) {
  .lightbox[open] { animation: lb-entra .22s ease-out; }
  @keyframes lb-entra { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
}
.lightbox-figura {
  margin: 0; display: grid; gap: .8rem; justify-items: center;
  max-width: min(92vw, 46rem); padding: 1rem;
}
.lightbox-figura img {
  max-width: 100%; max-height: 76vh; width: auto; height: auto;
  border-radius: var(--raio); background: var(--branco);
}
.lightbox-figura figcaption {
  color: #ece5df; font-size: .92rem; text-align: center; max-width: 34rem;
}
.lightbox-fechar, .lightbox-nav {
  position: fixed; z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(28,25,23,.72); color: #fff;
  font-size: 1.8rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color .16s ease;
}
.lightbox-fechar:hover, .lightbox-nav:hover { background: rgba(28,25,23,.95); }
.lightbox-fechar { top: 1rem; right: 1rem; }
.lightbox-anterior { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-proxima  { right: 1rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
  .lightbox-anterior { left: .5rem; }
  .lightbox-proxima  { right: .5rem; }
  .lightbox-figura img { max-height: 66vh; }
}

/* ============================================================
   MOVIMENTO GUIADO PELA ROLAGEM
   ------------------------------------------------------------
   `animation-timeline` liga a animacao ao scroll SEM JavaScript: nada de
   listener de rolagem, nada entrando na conta de INP, tudo no compositor.
   Onde o navegador nao suporta, a regra e simplesmente ignorada e a pagina
   fica como estava. Por isso vai dentro de @supports: e melhoria, nao
   requisito.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {

    /* Barra de progresso da leitura, no topo. E o movimento mais visivel do
       site: acompanha o dedo o tempo todo. */
    .topo::after {
      content: ""; position: absolute; left: 0; bottom: -1px; height: 3px;
      width: 100%; transform-origin: 0 50%; transform: scaleX(0);
      background: linear-gradient(90deg, var(--acao), #4b53c9);
      animation: progresso linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes progresso { to { transform: scaleX(1); } }

    /* Parallax: a foto do hero sobe mais devagar que a pagina.

       DUAS ARMADILHAS AQUI, as duas ja custaram uma linha marrom no topo:

       1. PRECISA DE FOLGA. Deslocar a foto sem ela ser maior que o hero so
          arrasta a borda pra dentro da tela e mostra o fundo de espera
          atras (`--tinta`, marrom escuro). Por isso o `.hero-fundo` cresce
          8% pra cima e 8% pra baixo, e o `overflow:hidden` do hero apara o
          que sobra. O deslocamento maximo (6% de 116% = ~7% do hero) cabe
          dentro dessa folga com margem.

       2. NAO PODE DIVIDIR O `transform` COM O ZOOM. O `aproxima` (scale) e
          o parallax (translate) animam a MESMA propriedade; empilhados no
          mesmo elemento um atropela o outro. Entao cada um vai no seu:
          translate no `.hero-fundo`, scale na `img` de dentro.

       3. `view()` NAO SERVE AQUI. Ele se ancora no scroller mais proximo, e
          o `overflow:hidden` do proprio `.hero` JA E um scroller. Como esse
          scroller nunca rola, a timeline nasce inativa e o progresso trava
          em 0,5 pra sempre, em qualquer posicao da pagina. Foi isso o tempo
          todo: o `translateY(9%)` de antes nao era parallax nenhum, era um
          empurrao FIXO de 4,5% pra baixo. Medido: 45,5px de deslocamento
          com o scroll parado no topo.
          Por isso aqui o timeline e `scroll(root block)`, que aponta pro
          scroller da PAGINA de forma explicita, com o intervalo em altura de
          tela. Mesmo padrao da barra de progresso do topo, que funciona.

       O intervalo e simetrico (-6% a +6%) pra foto passar centrada no meio
       do caminho em vez de viver deslocada pra um lado so. */
    .hero-fundo {
      inset: -10% 0;
      animation: parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
    }
    /* Conta da folga, pra quem for mexer: a sobra de cada lado e
       `folga x altura_do_hero - deslocamento x altura_do_fundo`, ou seja
       10% - 5% x 120% = 4% da altura do hero. Uns 28px no celular.
       NAO contar com o zoom da `img` pra fechar essa conta: ele termina em
       18s e depois disso a escala volta a 1, sem sobra nenhuma. */
    @keyframes parallax {
      from { transform: translateY(-5%); }
      to   { transform: translateY(5%); }
    }


    /* AQUI HAVIA UMA ENTRADA EM ESCALA NOS CARDS (`cresce`), e ela saiu.
       Motivo: animacao ligada a `animation-timeline` com `both` NUNCA
       TERMINA. Ela fica ativa pra sempre, e enquanto esta ativa o navegador
       mantem o elemento numa camada composta a parte. Numa LP isso eram 12
       cards presos em camada (8 da ficha + 4 dos cards), mais 8 secoes: 22
       animacoes de rolagem vivas ao mesmo tempo numa pagina so.

       Camada composta muda como o texto e desenhado (perde o antisserrilhado
       de subpixel) e e o que produz aquele arrasto ao rolar. A entrada das
       secoes passou a ser feita pelo IntersectionObserver do app.js: e uma
       transicao que ACABA, e quando acaba o navegador devolve o elemento
       pro desenho normal.

       Sobraram duas animacoes de rolagem na pagina: a barra de progresso do
       topo e o parallax do hero. */
  }
}