/* ===========================================================================
   LP Embaixadores MABE — design system
   Paleta obrigatória do briefing: branco (base), preto (texto/contraste),
   amarelo (conversão), dourado (detalhes raros). Direção: premium/fashion,
   sem fundos escuros em excesso, sem elementos piscando.
   =========================================================================== */

:root{
  --amarelo: #FFB100;      /* puxado mais pra paleta oficial da logo MABE (pedido do Paulo, 01/09/2026) */
  --amarelo-claro: #FFCC5A;
  --amarelo-escuro: #DE9A00;
  /* Preto com leve viés quente (charcoal), não neutro puro — referência:
     marcas premium de óculos evitam preto 100% neutro por parecer "duro
     demais"; um charcoal sutil como este continua lendo como preto, mas
     fica mais orgânico ao lado do dourado. */
  --preto: #14120F;
  --preto-suave: #1C1A16;
  --preto-profundo: #0C0A08;
  --dourado: #A8802E;      /* acabamento raro, não compete com o amarelo */
  --dourado-claro: #C9A24A;
  --dourado-escuro: #7A5B1E;
  --branco: #FFFFFF;
  --cinza-claro: #F6F5F2;
  --cinza-borda: #E7E5DF;
  --cinza-texto: #4A4A48;
  --cinza-texto-suave: #767470;

  /* Gradientes premium — mesma paleta, tratamento "acabamento metálico"
     em vez de cor chapada, pro produto sentir mais joia/ótica fina do
     que e-commerce genérico. */
  --gradiente-amarelo: linear-gradient(135deg, var(--amarelo-claro) 0%, var(--amarelo) 55%, var(--amarelo-escuro) 100%);
  --gradiente-dourado: linear-gradient(135deg, var(--dourado-claro) 0%, var(--dourado) 55%, var(--dourado-escuro) 100%);
  --gradiente-preto: linear-gradient(165deg, var(--preto-suave) 0%, var(--preto-profundo) 100%);

  --fonte: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  /* Serifada de alto contraste (mesma família usada por Dior/Prada/Tiffany)
     só nos títulos — pesquisa pedida pelo Paulo (31/08/2026) sobre como
     fugir do "visual de site feito por IA": tipografia padrão de framework
     (Inter/Poppins puros, sem intenção) é um dos sinais mais citados.
     Serifada no título + sans-serif no corpo é o par clássico editorial de
     moda/luxo — Inter continua cuidando de UI/botões/corpo de texto. */
  --fonte-titulo: 'Bodoni Moda', 'Didot', 'Playfair Display', Georgia, serif;

  /* Raio bem mais contido — "arredondado em tudo" é outro sinal citado na
     mesma pesquisa. Cards/fotos ficam quase retos (estrutura editorial,
     "moldura de galeria"), só os elementos really interativos (botões,
     abas/pills) continuam com o pill de sempre — contraste deliberado em
     vez de tudo igualmente arredondado. */
  --raio: 3px;
  --raio-grande: 4px;
  /* Sombras com leve tingimento de cor (não preto puro) — sombra de
     verdade em fotografia de produto de luxo carrega a cor do ambiente,
     não é cinza neutro. */
  --sombra: 0 8px 30px rgba(58,46,20,0.08);
  --sombra-forte: 0 20px 48px -12px rgba(58,46,20,0.22);
  --sombra-dourada: 0 16px 40px -10px rgba(168,128,46,0.35);
  --sombra-amarela: 0 14px 34px -8px rgba(222,154,0,0.4);

  --largura-max: 1180px;

  /* Tokens semânticos do modo escuro (pedido do Paulo, 31/08/2026) — pesquisa
     de referências de dark mode premium (luxo/moda): texto NUNCA em branco
     puro (cansa e "brilha" demais sobre preto), continua um branco quente;
     dourado fica reservado a acabamento raro (rótulos/ícones), não vira cor
     de leitura corrida; fundo é charcoal (--preto já é, não é #000 puro);
     superfícies (cards/inputs) ficam um degrau mais claras que o fundo em
     vez de jogar tudo direto no preto ("elevação por camada"). No modo claro
     esses tokens só apontam pra paleta que já existia. */
  --cor-canvas: var(--branco);
  --cor-superficie-topo: var(--branco);
  --cor-superficie-base: var(--cinza-claro);
  --cor-texto: var(--preto);
  --cor-texto-suave: var(--cinza-texto);
  --cor-texto-mais-suave: var(--cinza-texto-suave);
  --cor-borda: var(--cinza-borda);
  --cor-placeholder-imagem: linear-gradient(150deg,#EDEBE4,#F8F7F3);
  --cor-pill-ativo-bg: var(--gradiente-preto);
  --cor-pill-ativo-texto: var(--branco);
  --cor-topo-fundo: rgba(255,255,255,.16);
  --cor-topo-borda: rgba(255,255,255,.5);
  --cor-seta-fundo: rgba(255,255,255,.85);

  /* Alpha dos radiais dourado/amarelo do fundo (body/.hero/.secao--clara) —
     calibrados pra ficarem sutis sobre BRANCO. Precisam de valor próprio
     no modo escuro, senão a mesma transparência vira um brilho bem mais
     forte por cima do preto (contraste muda de leitura sozinho — pedido
     do Paulo, 31/08/2026: "o dourado fica muito forte" no preto). */
  --alpha-fundo-dourado-1: .14;
  --alpha-fundo-dourado-2: .20;
  --alpha-clara-dourado: .08;
  --alpha-clara-amarelo: .09;
  --alpha-hero-amarelo: .18;
  --alpha-hero-dourado: .10;
}

:root[data-tema="escuro"]{
  --cor-canvas: var(--preto);
  --cor-superficie-topo: var(--preto-suave);
  --cor-superficie-base: #242019;
  --cor-texto: #F3EFE7;
  --cor-texto-suave: #C9C4B8;
  --cor-texto-mais-suave: #9A968C;
  --cor-borda: rgba(255,255,255,.12);
  --cor-placeholder-imagem: linear-gradient(150deg,#242019,#1C1A16);
  --cor-pill-ativo-bg: var(--gradiente-dourado);
  --cor-pill-ativo-texto: var(--preto-profundo);
  --cor-topo-fundo: rgba(20,18,15,.4);
  --cor-topo-borda: rgba(255,255,255,.1);
  --cor-seta-fundo: rgba(28,26,22,.82);

  --alpha-fundo-dourado-1: .05;
  --alpha-fundo-dourado-2: .07;
  --alpha-clara-dourado: .04;
  --alpha-clara-amarelo: .04;
  --alpha-hero-amarelo: .07;
  --alpha-hero-dourado: .05;
}

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

html{ scroll-behavior: smooth; }

/* Consistência entre iOS e Android (pedido do Paulo, 31/08/2026: "ambos os
   públicos podem olhar de celular diferente"):
   - tap-highlight transparente: o flash cinza padrão do Android some, fica
     igual ao toque discreto (sem flash) que o iOS já tem por padrão.
   - viewport-fit=cover (já configurado no <head>) deixa o conteúdo cobrir
     até embaixo da entalhe/ilha e da barra de gestos no iPhone — sem folga
     própria pra essas áreas o header e o rodapé ficavam colados nelas.
     env(safe-area-inset-*) é 0 no Android (sem notch do tipo iOS), então
     não muda nada lá — só corrige no iPhone. */
*{ -webkit-tap-highlight-color: transparent; }

body{
  margin: 0;
  font-family: var(--fonte);
  color: var(--cor-texto);
  transition: background-color .35s ease, color .35s ease;
  /* Branco deixa de ser chapado — gradiente perceptível (não só um traço),
     evita o efeito "papel de impressora" e dá sensação de superfície.
     Removida a curva escura à esquerda (pedido do Paulo, 31/08/2026: ainda
     lia como "parte escura de fundo") — só sobra o tom dourado/amarelo. */
  background-color: var(--cor-canvas);
  /* A posição Y do 2º radial usava "55%" — porcentagem da altura TOTAL do
     documento (não da tela). Como o corpo do site inteiro entra nessa
     conta, filtrar as unidades por estado (1 loja no Ceará vs. 14 em
     "Todas") muda a altura total da página, e esse "55%" passava a apontar
     pra um ponto diferente — o gradiente parecia mudar de cor sozinho ao
     trocar de região (pedido do Paulo, 31/08/2026, pra corrigir). Fixado em
     px a partir do topo, imune ao tamanho do conteúdo mais abaixo. */
  background-image:
    radial-gradient(1400px 700px at 12% 0%, rgba(168,128,46,var(--alpha-fundo-dourado-1)), transparent 55%),
    radial-gradient(1300px 1500px at 112% 640px, rgba(168,128,46,var(--alpha-fundo-dourado-2)), transparent 62%);
  /* "fixed" trava em scroll no Android fraco (repinta o fundo a cada frame
     de rolagem) — só em telas grandes, onde o aparelho aguenta (pedido do
     Paulo, 31/08/2026: travando num Galaxy A03 Core). */
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
@media (min-width: 900px){
  body{ background-attachment: fixed; }
}

img{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

button{ font-family: inherit; }

.container{
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.secao{ padding: 56px 0; position: relative; overflow: hidden; }

/* Traço dourado contínuo pelas bordas laterais da página — desligado
   (pedido do Paulo, 01/09/2026: remover qualquer coisa que "move a tela";
   este efeito existia justamente pra deslizar com o scroll, então sem
   movimento ele perde o sentido — desativado por completo em vez de
   deixar uma faixa dourada parada). Regras abaixo ficam de propósito
   (fáceis de reativar removendo só o display:none), markup/JS que
   atualiza --scroll-progresso continuam, inofensivos. */
:root{ --scroll-progresso: 0; }
.traco-lateral{
  display: none;
  position: fixed;
  top: -15vh;
  height: 130vh;
  width: 90px;
  pointer-events: none;
  z-index: 1;
  opacity: .5;
  filter: blur(24px);
  background-repeat: no-repeat;
  background-size: 100% 200vh;
  /* "screen" clareia em vez de misturar por transparência normal — por
     cima do preto, uma cor semi-transparente comum (mesmo clara) sempre
     escurece o que está atrás e lia como mancha suja (pedido do Paulo,
     31/08/2026, pra corrigir); com "screen" o traço sempre soma luz,
     nunca escurece, então funciona igual em cima do preto e do branco. */
  mix-blend-mode: screen;
}
.traco-lateral--esquerda{
  left: -58px;
  background-image: linear-gradient(180deg,
    transparent 0%,
    rgba(255,222,92,.4) 20%,
    transparent 42%,
    rgba(255,255,255,.3) 62%,
    transparent 84%);
  background-position-y: calc(var(--scroll-progresso) * -100vh);
}
.traco-lateral--direita{
  right: -58px;
  background-image: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.3) 26%,
    transparent 48%,
    rgba(255,222,92,.38) 68%,
    transparent 90%);
  background-position-y: calc(var(--scroll-progresso) * 100vh - 60vh);
}
/* Some em telas pequenas: como acompanha o scroll com blur + blend mode
   num elemento position:fixed, força reprocessar (não só compor) a cada
   frame de rolagem — pesado demais pra Android de entrada (pedido do
   Paulo, 31/08/2026: travando num Galaxy A03 Core). Fica só como um
   detalhe de tela grande, onde o aparelho aguenta. */
@media (max-width: 899px){
  .traco-lateral{ display: none; }
}
@media (prefers-reduced-motion: reduce){
  .traco-lateral{ display: none; }
}

.secao--clara{
  /* Antes era um background-color chapado preenchendo o retângulo inteiro
     da seção — criava uma quina dura contra o branco das seções vizinhas
     (body), o "esbranquiçado"/corte repentino de cor reportado pelo Paulo
     (01/09/2026) bem nas seções "Seu estilo, seu jeito de olhar." e "Oferta
     exclusiva". Trocado por um degradê vertical que nasce e morre em
     transparente (mesma cor por baixo, só sem quina) — a transição some. */
  background-color: transparent;
  /* Dourado bem mais fraco — a versão anterior (.22) lia como uma mancha
     escurecida no lado direito, principalmente na seção "Oferta
     exclusiva" (pedido do Paulo, 31/08/2026, pra deixar mais claro). */
  background-image:
    linear-gradient(180deg, transparent 0, var(--cor-superficie-base) 80px, var(--cor-superficie-base) calc(100% - 80px), transparent 100%),
    radial-gradient(1300px 1500px at 115% 45%, rgba(168,128,46,var(--alpha-clara-dourado)), transparent 62%),
    radial-gradient(1000px 500px at 0% 100%, rgba(255,177,0,var(--alpha-clara-amarelo)), transparent 60%);
}
/* Fundo preto tratado como joalheria/relojoaria premium, não "chapado
   digital": gradiente radial suave (não centralizado) + vinheta bem leve
   nas bordas + grão fotográfico quase imperceptível (mix-blend overlay)
   por cima. Pesquisa de referências (Cartier, Rolex, campanhas dark mode
   premium) pedida pelo Paulo (31/08/2026): "a parte preta não combina". */
.secao--preta{
  position: relative;
  background-color: var(--preto); color: var(--branco);
  background-image:
    radial-gradient(1100px 650px at 38% 22%, rgba(255,255,255,.025), transparent 65%),
    radial-gradient(950px 550px at 88% -8%, rgba(168,128,46,.09), transparent 68%),
    var(--gradiente-preto);
}
/* Filtro SVG (feTurbulence) + mix-blend-mode custam caro pra rasterizar
   em Android de entrada — só entra em telas grandes (pedido do Paulo,
   31/08/2026: travando num Galaxy A03 Core). */
@media (min-width: 900px){
  .secao--preta::before{
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .05;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
}

.hero__logo-dourada{
  height: 52px; width: auto; margin-bottom: 28px; display:block;
}
@media (min-width: 900px){ .hero__logo-dourada{ height: 64px; margin-bottom: 32px; } }

.rotulo{
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dourado);
  margin-bottom: 10px;
}

h1, h2, h3{ font-family: var(--fonte-titulo); font-weight: 700; letter-spacing: 0; margin: 0; text-wrap: balance; }
h1{ font-size: clamp(30px, 6.4vw, 50px); line-height: 1.08; }
h2{ font-size: clamp(26px, 4.8vw, 36px); line-height: 1.15; }
h3{ font-family: var(--fonte); font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }

p{ margin: 0; }
p.texto-apoio{ color: var(--cor-texto-suave); font-size: 16px; margin-top: 12px; max-width: 60ch; }
.secao--preta p.texto-apoio{ color: #D8D6D0; }

/* --- Botão principal (amarelo, texto preto — contraste exigido no briefing) */
.btn{
  -webkit-appearance: none; appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .01em;
  border: none;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.22,.61,.36,1), box-shadow .2s ease, filter .15s ease;
  white-space: nowrap;
  position: relative;
}
.btn:active{ filter: brightness(.96); }
/* Pulso de clique nos CTAs de retirar voucher — feedback imediato antes da
   rolagem até o formulário começar (pedido do Paulo, 31/08/2026). */
@keyframes mabe-cta-pulso{
  0%{ box-shadow: 0 0 0 0 rgba(222,154,0,.55); }
  100%{ box-shadow: 0 0 0 18px rgba(222,154,0,0); }
}
.cta-pulso{ animation: mabe-cta-pulso .6s ease-out; }
.btn--principal{
  background: var(--gradiente-amarelo);
  color: var(--preto);
  box-shadow: var(--sombra-amarela), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--principal:hover{ box-shadow: 0 20px 40px -10px rgba(222,154,0,0.5), inset 0 1px 0 rgba(255,255,255,.6); }
.btn--secundario{
  background: transparent;
  color: var(--cor-texto);
  border: 1.5px solid var(--cor-texto);
}
.secao--preta .btn--secundario{ color: var(--branco); border-color: var(--branco); }
.btn--secundario:hover{ background: rgba(17,17,17,.05); }
.secao--preta .btn--secundario:hover{ background: rgba(255,255,255,.08); }
:root[data-tema="escuro"] .btn--secundario:hover{ background: rgba(255,255,255,.08); }
.btn--bloco{ width: 100%; }
.btn[disabled]{ opacity: .5; cursor: not-allowed; }
.btn[disabled]:hover{ transform: none; }

/* =========================================================================
   HEADER
   ========================================================================= */
/* Vidro fosco translúcido, estilo barra de status/nav do iOS — pedido do
   Paulo (31/08/2026), "dá um aspecto mais premium". Volta a valer em
   qualquer largura de tela (mesmo depois do corte por performance no
   Android fraco) porque o pedido veio explícito; se voltar a travar em
   aparelho de entrada, é o primeiro efeito a cortar de novo. */
.topo{
  position: sticky; top: 0; z-index: 40;
  /* Bem mais forte — "quase água" (pedido do Paulo, 31/08/2026): opacidade
     baixa + blur pesado, o conteúdo por trás fica bem borrado/líquido em
     vez de só um leve embaçado. */
  background: var(--cor-topo-fundo);
  backdrop-filter: saturate(220%) blur(28px);
  -webkit-backdrop-filter: saturate(220%) blur(28px);
  border-bottom: 1px solid var(--cor-topo-borda);
  box-shadow: 0 1px 0 rgba(168,128,46,.18), inset 0 1px 0 rgba(255,255,255,.6);
  transition: background-color .35s ease, border-color .35s ease;
}
.topo .container{
  display: flex; align-items: center; justify-content: space-between;
  /* viewport-fit=cover deixa o conteúdo entrar embaixo do entalhe/ilha do
     iPhone; env() garante a folga certa lá e não muda nada no Android (que
     não tem essa área de sistema). */
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-bottom: 12px;
}
.topo img{ height: 30px; width: auto; transition: filter .3s ease; }
.topo__acoes{ display: flex; align-items: center; gap: 12px; }

/* Mini-contador do cabeçalho — só os números, translúcido, sem legenda
   (pedido do Paulo, 31/08/2026: "só a questão do limitador", benefício por
   tempo limitado, sem repetir o texto do bloco principal). */
.topo__contador{
  display: flex; align-items: center; justify-content: center; gap: 4px;
  padding-bottom: 10px;
}
.topo__contador-item{
  background: rgba(20,18,15,.5);
  color: var(--branco);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  min-width: 24px; text-align: center;
}
.topo__contador-dois-pontos{ color: var(--dourado-claro); font-weight: 800; font-size: 11px; }
:root[data-tema="escuro"] .topo__contador-item{ background: rgba(255,255,255,.14); }

/* Botão experimental de modo escuro — pesquisa de referências (dark mode
   premium/luxo) pedida pelo Paulo (31/08/2026): ícone sol/lua alternando,
   convenção quase universal, ao lado dos outros elementos utilitários do
   header. Um ícone some e o outro aparece via opacidade+giro, nunca os
   dois ao mesmo tempo. */
.topo__tema{
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%; padding: 0;
  border: 1.5px solid var(--cor-borda); background: var(--cor-superficie-topo);
  color: var(--cor-texto); cursor: pointer; flex-shrink: 0;
  transition: background-color .3s ease, border-color .3s ease;
}
.topo__tema-icone{
  width: 18px; height: 18px; position: absolute;
  transition: opacity .3s ease;
}
.topo__tema{ position: relative; }
.topo__tema-icone--sol{ opacity: 1; color: var(--dourado-escuro); }
.topo__tema-icone--lua{ opacity: 0; color: var(--dourado-claro); }
:root[data-tema="escuro"] .topo__tema-icone--sol{ opacity: 0; }
:root[data-tema="escuro"] .topo__tema-icone--lua{ opacity: 1; }


/* =========================================================================
   BLOCO 1 — HERO
   ========================================================================= */
.hero{
  padding: 32px 0 48px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(255,177,0,var(--alpha-hero-amarelo)), transparent 60%),
    radial-gradient(700px 400px at 5% 110%, rgba(168,128,46,var(--alpha-hero-dourado)), transparent 65%),
    var(--cor-canvas);
}
.hero__grade{
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px){
  .hero__grade{ grid-template-columns: 1.05fr .95fr; gap: 48px; }
}
.hero__imagem-wrap{ position: relative; }
/* Brilho ambiente ao redor da foto do hero — cópia da própria imagem,
   borrada e ampliada, sangrando pra fora da moldura (mesma ideia do "ambient
   mode" do YouTube/Ambilight: a luz ao redor da tela pega a cor da cena).
   Fica atrás da foto nítida (que continua opaca e recortada normalmente),
   só troca de cor junto quando o hero muda de modelo — não anima a cada
   quadro, é uma troca só por rotação (a cada 8s), então não pesa como um
   loop infinito custaria. */
.hero__brilho{
  position: absolute;
  inset: -8%;
  z-index: 0;
  border-radius: calc(var(--raio-grande) + 8%);
  background-image: var(--hero-brilho-url);
  background-size: cover;
  background-position: center 20%;
  filter: blur(48px) saturate(1.35) brightness(.92);
  opacity: .55;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){ .hero__brilho{ display: none; } }
.hero__imagem{
  border-radius: var(--raio-grande);
  overflow: hidden;
  aspect-ratio: 4/5;
  background: linear-gradient(160deg, var(--preto) 0%, #2b2b2b 55%, var(--dourado) 145%);
  box-shadow: var(--sombra-forte);
  position: relative;
  z-index: 1;
}
.hero__foto{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
  display: block;
  opacity: 0;
  z-index: 1;
  transition: opacity 650ms cubic-bezier(0.22,1,0.36,1);
}
.hero__foto.ativo{
  opacity: 1;
  z-index: 2;
}
@media (min-width: 900px){ .hero__imagem{ order: 2; } .hero__texto{ order: 1; } }

.hero__beneficio{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--gradiente-preto); color: var(--branco);
  box-shadow: var(--sombra), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 10px 18px; border-radius: 999px;
  font-weight: 700; font-size: 14px; margin-top: 18px;
}
.hero__beneficio strong{ color: var(--amarelo); }
.icone-inline{ width: 18px; height: 18px; flex-shrink: 0; }

.contador{
  margin-top: 22px;
  padding: 16px 18px;
  border: 1.5px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-superficie-topo);
}
.contador__legenda{ font-size: 13px; font-weight: 700; color: var(--cor-texto-suave); margin-bottom: 10px; }
.contador__grade{ display: flex; gap: 10px; }
.contador__item{
  flex: 1; text-align: center;
  background: var(--gradiente-preto); color: var(--branco);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: 10px; padding: 10px 4px;
}
.contador__numero{ font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.contador__rotulo{ font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #C9C9C9; margin-top: 2px; }
.contador--encerrado{ background: var(--cor-superficie-base); color: var(--cor-texto-suave); text-align:center; font-weight: 700; }

.hero__cta{ margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; }

/* Atalho pra seção de lojas — ação secundária, discreta de propósito, pra
   não competir com o CTA principal de conversão (pedido do Paulo,
   01/09/2026: "acha que ficaria bom adicionar um pino... pra ir direto"). */
.hero__link-lojas{
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 13px; font-weight: 700; color: var(--cor-texto-suave);
  text-decoration: none;
}
.hero__link-lojas svg{ width: 16px; height: 16px; flex-shrink: 0; }
.hero__link-lojas:hover{ color: var(--cor-texto); }

/* =========================================================================
   BLOCO 2 — PRESENÇA
   ========================================================================= */
.presenca{ text-align: center; }
.presenca__numeros{
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 30px;
}
@media (min-width: 640px){ .presenca__numeros{ grid-template-columns: repeat(3,1fr); } }
.presenca__card{
  background: linear-gradient(180deg, var(--cor-superficie-topo) 0%, var(--cor-superficie-base) 100%);
  border: 1.5px solid var(--cor-borda); border-radius: var(--raio);
  padding: 22px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease, background-color .35s ease;
}
.presenca__card:hover{ box-shadow: var(--sombra-dourada); border-color: rgba(168,128,46,.35); }
.presenca__card strong{ display:block; font-size: 34px; font-weight: 800; color: var(--cor-texto); line-height: 1.1; }
.presenca__card span{ font-size: 13px; color: var(--cor-texto-mais-suave); font-weight: 600; line-height: 1.3; }
/* "PA·AM·MA·CE" é a mais longa das três legendas — reduz um pouco mais e
   não deixa quebrar linha, pra não ficar desalinhada das outras duas
   (pedido do Paulo, 31/08/2026: "o texto não encaixou"). */
.presenca__estados{ font-size: 12px; white-space: nowrap; letter-spacing: -0.01em; }
.presenca__estrelas{ display:flex; flex-wrap: wrap; gap:3px; justify-content:center; }
.presenca__estrelas svg{ width: 22px; height: 22px; color: var(--dourado); flex-shrink: 0; }

@media (max-width: 640px){
  .presenca__card{ padding: 16px 6px; gap: 6px; }
  .presenca__card strong{ font-size: 22px; }
  .presenca__card span{ font-size: 11px; }
  .presenca__estados{ font-size: 10px; }
  .presenca__estrelas{ gap: 2px; }
  .presenca__estrelas svg{ width: 15px; height: 15px; }
}

/* =========================================================================
   BLOCO 3 — PRODUTOS
   ========================================================================= */
.produtos__tabs{ display:flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.produtos__tab{
  padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--cor-borda);
  font-weight: 700; font-size: 14px; cursor: pointer; background: var(--cor-superficie-topo); color: var(--cor-texto);
}
.produtos__tab.ativo{ background: var(--cor-pill-ativo-bg); color: var(--cor-pill-ativo-texto); border-color: transparent; box-shadow: var(--sombra); }

.produtos__grade{
  display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; margin-top: 22px;
}
@media (min-width: 720px){ .produtos__grade{ grid-template-columns: repeat(4,1fr); } }
.produto-card{
  border-radius: var(--raio); overflow: hidden;
  background: linear-gradient(180deg, var(--cor-superficie-topo) 0%, var(--cor-superficie-base) 100%);
  border: 1px solid var(--cor-borda);
}
.produto-card__imagem{
  aspect-ratio: 1/1;
  background: var(--cor-placeholder-imagem);
  display: flex; align-items: center; justify-content: center;
}
.produto-card__legenda{ padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--cor-texto-suave); }

.produtos__aviso{ margin-top: 18px; font-size: 13px; color: var(--cor-texto-mais-suave); }

/* --- Carrossel premium (crossfade + micro-scale) --- */
.carrossel{ margin-top: 26px; }
.carrossel__viewport{
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  max-width: 760px;
  margin: 0 auto;
  border-radius: var(--raio-grande);
  /* As fotos de produto têm fundo branco fixo (achatado de propósito, ver
     commit anterior) — o viewport precisa ser sempre branco também, mesmo
     no modo escuro, senão sobra aquela moldura escura em volta da foto
     branca (contraste feio, pedido do Paulo, 01/09/2026, pra corrigir).
     "Vitrine" clara sempre, como uma prateleira de estúdio, independente
     do tema do resto da página. */
  background: var(--branco);
  border: 1px solid var(--cinza-borda);
}
/* Maior — pedido do Paulo (31/08/2026): melhorar a visibilidade do formato
   dos óculos. */
@media (min-width: 640px){ .carrossel__viewport{ aspect-ratio: 16/10; } }
@media (min-width: 900px){ .carrossel__viewport{ max-width: 880px; } }
.carrossel__img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 20px;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.22,1,0.36,1);
  z-index: 1;
}
.carrossel__img.ativo{ opacity: 1; z-index: 2; }
.carrossel__img.saindo{ opacity: 0; z-index: 1; }

/* Troca manual (clique no indicador ou swipe) — crossfade simples, igual ao
   autoplay (pedido do Paulo, 01/09/2026: remover zoom e qualquer outra
   coisa que "mova a tela" — a versão anterior deslizava lateralmente). */
.carrossel__img.manual{
  transition: opacity 520ms cubic-bezier(0.22,1,0.36,1);
}

/* Setas de navegação — pedido do Paulo (31/08/2026): substituem/complementam
   o arrastar (swipe), útil em desktop (sem toque) e mais explícito no
   mobile também. Ficam por cima das imagens (z-index acima do .ativo). */
.carrossel__seta{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Sempre no tom claro (fixo, não pelos tokens de tema) — a seta fica por
     cima da foto, que tem fundo branco fixo; num viewport sempre branco,
     ela precisa ficar clara também, senão destoa (mesmo ajuste do
     viewport, pedido do Paulo 01/09/2026). */
  background: rgba(255,255,255,.85);
  border: 1px solid var(--cinza-borda);
  color: var(--preto);
  box-shadow: var(--sombra);
  cursor: pointer;
  z-index: 5;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.carrossel__seta svg{ width: 20px; height: 20px; }
.carrossel__seta:hover{ background: var(--branco); box-shadow: var(--sombra-dourada); }
.carrossel__seta:active{ filter: brightness(.94); }
.carrossel__seta--esquerda{ left: 10px; }
.carrossel__seta--direita{ right: 10px; }
@media (max-width: 640px){
  .carrossel__seta{ width: 34px; height: 34px; }
  .carrossel__seta svg{ width: 17px; height: 17px; }
  .carrossel__seta--esquerda{ left: 6px; }
  .carrossel__seta--direita{ right: 6px; }
}

.carrossel__indicadores{
  display: flex; justify-content: center; gap: 8px; margin-top: 16px;
}
.carrossel__ponto{
  width: 8px; height: 8px; border-radius: 50%;
  border: none; background: var(--cor-borda); cursor: pointer; padding: 0;
  transition: background-color .2s ease;
}
.carrossel__ponto.ativo{ background: var(--cor-texto); }

/* --- Vitrine dupla (só telas de PC) — pedido do Paulo (01/09/2026): mostrar
   óculos de sol e armações de grau ao mesmo tempo em telas largas, sem abas,
   já que sobra espaço; no mobile/tablet nada aqui muda (só o carrossel "sol"
   das abas aparece, igual já estava no ar). Ver carrossel-produtos-desktop.js. */
.carrossel__legenda{ display: none; }
.produtos__coluna--desktop{ display: none; }
@media (min-width: 900px){
  /* As abas escondidas levavam junto a margem que separava o título da
     seção dos carrosséis (margin-top delas) — o texto ficava colado
     (pedido do Paulo, 01/09/2026, pra corrigir). Repõe direto na vitrine. */
  .produtos__tabs{ display: none; }
  .produtos__vitrine{ display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; margin-top: 26px; }
  .produtos__coluna--desktop{ display: block; }
  .carrossel__legenda{
    display: block; font-family: var(--fonte-titulo); font-weight: 700; font-size: 20px;
    text-align: center; margin: 0 0 4px;
  }
  .produtos__vitrine .carrossel__viewport{ max-width: 100%; }
}

/* =========================================================================
   BLOCO 4 — LENTES
   ========================================================================= */
.lentes__grade{
  display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){ .lentes__grade{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 980px){ .lentes__grade{ grid-template-columns: repeat(3,1fr); } }
.lente-card{
  background: linear-gradient(180deg, var(--cor-superficie-topo) 0%, var(--cor-superficie-base) 100%);
  border: 1.5px solid var(--cor-borda); border-radius: var(--raio);
  padding: 20px;
}
.lente-card__icone{
  width: 44px; height: 44px; border-radius: 12px; background: var(--gradiente-preto);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), var(--sombra);
  display:flex; align-items:center; justify-content:center; margin-bottom: 14px;
}
.lente-card__icone svg{ width: 22px; height: 22px; }
.lente-card p{ color: var(--cor-texto-suave); font-size: 14px; margin-top: 6px; }
.lente-card .tag-pendente{
  display:inline-block; margin-top:10px; font-size:11px; font-weight:800; letter-spacing:.04em;
  color: var(--dourado); text-transform: uppercase;
}

/* =========================================================================
   BLOCO 5 — FORMULÁRIO
   ========================================================================= */
.form-wrap{
  max-width: 560px; margin: 0 auto;
  background: var(--cor-superficie-topo); border-radius: var(--raio-grande);
  border: 1.5px solid var(--cor-borda);
  box-shadow: var(--sombra);
  padding: 30px 26px;
  transition: background-color .35s ease, border-color .35s ease;
}
.form-etapas{ display:flex; gap:6px; margin-bottom: 22px; }
.form-etapas__item{ flex:1; height:4px; border-radius:2px; background: var(--cor-borda); }
.form-etapas__item.ativo{ background: var(--amarelo); }

.campo{ margin-bottom: 16px; }
.campo label{ display:block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.campo input, .campo select{
  width: 100%; padding: 13px 14px; border: 1.5px solid var(--cor-borda);
  border-radius: 10px; font-size: 16px; background: var(--cor-superficie-base); color: var(--cor-texto);
}
.campo input:focus, .campo select:focus{ outline:none; border-color: var(--dourado); }
/* Select nativo do iOS e do Android renderizam a caixa fechada de forma
   bem diferente por padrão (bordas, seta, sombra) — reseta o "appearance"
   dos dois e desenha uma seta própria, igual em qualquer aparelho (pedido
   do Paulo, 31/08/2026: consistência entre iOS/Android). */
.campo select{
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A4A48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 40px;
}
:root[data-tema="escuro"] .campo select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9C4B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.campo__erro{ display:none; color:#B3261E; font-size: 12px; margin-top: 6px; font-weight:600; }
.campo.com-erro input, .campo.com-erro select{ border-color:#B3261E; }
.campo.com-erro .campo__erro{ display:block; }

.campo-check{ display:flex; align-items:flex-start; gap:10px; margin: 18px 0; }
.campo-check input{
  -webkit-appearance: none; appearance: none;
  margin-top:3px; width:18px; height:18px; flex-shrink: 0;
  border: 1.5px solid var(--cor-borda); border-radius: 5px;
  background: var(--cor-superficie-base);
  position: relative; cursor: pointer;
}
.campo-check input:checked{ background: var(--gradiente-amarelo); border-color: transparent; }
.campo-check input:checked::after{
  content: '';
  position: absolute; left: 5px; top: 1px; width: 5px; height: 9px;
  border: solid var(--preto); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.campo-check label{ font-size: 13px; color: var(--cor-texto-suave); font-weight: 500; }


.form-msg{ margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 14px; display:none; }
.form-msg.mostrar{ display:block; }
.form-msg--erro{ background:#FDECEC; color:#8A2323; }
:root[data-tema="escuro"] .form-msg--erro{ background: rgba(179,38,30,.18); color: #FF8A80; }

/* --- Confirmação / Voucher --- */
.voucher{
  text-align:center;
}
/* Só aparece quando o cadastro foi simulado (preview estático sem PHP real,
   ver gerarVoucherDemo em app.js) — deixa claro que essa tela específica
   não veio de um cadastro de verdade, pra não confundir quem revisa o
   site publicado no Vercel (pedido do Paulo, 31/08/2026). */
.voucher__selo-demo{
  display: none;
  font-size: 12px; font-weight: 700; color: var(--dourado-escuro);
  background: #FBF3DE; border: 1px solid rgba(168,128,46,.3);
  border-radius: 999px; padding: 8px 14px; margin: 0 auto 18px; max-width: fit-content;
}
.voucher--demo .voucher__selo-demo{ display: block; }
.voucher__selo{
  width: 64px; height: 64px; border-radius: 50%; background: var(--gradiente-amarelo);
  box-shadow: var(--sombra-amarela), inset 0 1px 0 rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 16px;
}
.voucher__selo svg{ width: 30px; height: 30px;
}
.voucher__cartao{
  margin-top: 20px; background-color: var(--preto); color: var(--branco);
  border-radius: var(--raio-grande); padding: 26px 22px;
  background-image: radial-gradient(600px 200px at 100% 0%, rgba(255,177,0,.09), transparent 60%), var(--gradiente-preto);
  box-shadow: var(--sombra-forte), inset 0 1px 0 rgba(255,255,255,.05);
}
.voucher__codigo-rotulo{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#C9C9C9; font-weight:800; }
.voucher__codigo{ font-size: 30px; font-weight: 800; letter-spacing: .06em; margin-top: 6px; text-shadow: 0 0 18px rgba(255,177,0,.3); }
.voucher__detalhes{ text-align:left; margin-top: 18px; border-top:1px solid rgba(255,255,255,.15); padding-top:16px; }
.voucher__linha{ display:flex; justify-content:space-between; gap: 12px; padding: 6px 0; font-size: 14px; }
.voucher__linha span:first-child{ color:#C9C9C9; }
.voucher__acoes{ display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; justify-content:center; }
.voucher__qr{
  margin-top: 20px; padding: 20px; border: 1.5px solid var(--cor-borda); border-radius: var(--raio-grande);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.voucher__qr-imagem{ width: 200px; height: 200px; border-radius: 8px; }
.voucher__qr-legenda{ font-size: 13px; color: var(--cor-texto-mais-suave); max-width: 42ch; margin:0; }

/* =========================================================================
   BLOCO 6 — UNIDADES
   ========================================================================= */
.unidades__filtros{ display:flex; gap:8px; margin-top: 24px; flex-wrap: wrap; }
.unidades__filtro{
  padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--cor-borda);
  font-weight:700; font-size:13px; cursor:pointer; background: var(--cor-superficie-topo); color: var(--cor-texto);
}
.unidades__filtro.ativo{ background: var(--cor-pill-ativo-bg); color: var(--cor-pill-ativo-texto); border-color: transparent; box-shadow: var(--sombra); }

.unidades__lista{ display:grid; gap:14px; margin-top:22px; }
@media (min-width: 720px){ .unidades__lista{ grid-template-columns: repeat(2,1fr); } }
.unidade-card{
  border: 1.5px solid var(--cor-borda); border-radius: var(--raio); padding: 18px;
  background: linear-gradient(180deg, var(--cor-superficie-topo) 0%, var(--cor-superficie-base) 100%);
}
.unidade-card h3{ margin-bottom: 4px; }
.unidade-card__estado{ font-size:11px; font-weight:800; color:var(--dourado); text-transform:uppercase; letter-spacing:.05em; }
.unidade-card__endereco{ font-size:13px; color:var(--cor-texto-suave); margin-top:8px; }
.unidade-card__horario{ font-size:13px; color:var(--cor-texto-mais-suave); margin-top:4px; }
.unidade-card__acoes{ display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.unidade-card__acoes .btn{ padding: 10px 16px; font-size:13px; }

/* =========================================================================
   BLOCO 7 — CHAMADA FINAL / RODAPÉ
   ========================================================================= */
.chamada-final{ text-align:center; }
/* Transição suave na junção entre a seção clara de unidades e o preto da
   chamada final — sem isso é um corte seco branco→preto ao rolar, que lia
   como "contraste estranho" (pedido do Paulo, 31/08/2026). Fica no TOPO da
   chamada final (altura fixa), não mais grudado no fim da seção de
   unidades — lá a altura varia MUITO conforme o filtro de estado (1 loja
   no Ceará vs. 11 no Pará), então o fade proporcionalmente mudava de
   intensidade e "as cores mudavam" ao trocar de região (pedido do Paulo,
   31/08/2026, pra corrigir). Aqui a altura da chamada final é sempre a
   mesma, então o efeito fica idêntico não importa o filtro escolhido. */
.chamada-final::after{
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 200px;
  background: linear-gradient(180deg,
    rgba(255,255,255,.06) 0%,
    rgba(255,255,255,.02) 40%,
    transparent 70%);
  pointer-events: none;
}
/* Traço fino dourado — divisor editorial (referência: relojoarias/joalherias
   de luxo usam uma linha delicada em vez de ícone ou borda grossa). */
.chamada-final__traco{
  width: 56px; height: 1px; margin: 0 auto 22px;
  background: linear-gradient(90deg, transparent, rgba(201,162,74,.55), transparent);
}

.rodape{
  position: relative; background: var(--preto); color:#C9C9C9; font-size: 13px;
  padding: 40px 0 calc(26px + env(safe-area-inset-bottom));
}
@media (min-width: 900px){
  .rodape::before{
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .04;
    mix-blend-mode: overlay;
    pointer-events: none;
  }
}
.rodape .container{ position: relative; }
.rodape .container{ display:flex; flex-direction:column; gap: 14px; }
.rodape a{ color: var(--branco); }
.rodape__links{ display:flex; gap:16px; flex-wrap:wrap; }
.rodape__consentimento{ font-size: 12px; color: #9a9a9a; max-width: 60ch; }
.rodape__consentimento a{ text-decoration: underline; }
.rodape__logo{
  height: 26px; width: auto; align-self: flex-start; margin-bottom: 8px;
  filter: drop-shadow(0 0 8px rgba(255,177,0,.3));
}

/* --- Utilidades --- */
.somente-leitor{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0); }
.oculto{ display:none !important; }

/* =========================================================================
   MOTION — poucos momentos, propositais: revelar seções ao rolar, entrada
   suave do hero, micro-interação nos cards e botões. Nunca decorativo por
   decorativo — sempre guiando o olhar pro próximo ponto de interesse.
   ========================================================================= */
/* Removido o "zoom" e qualquer outro efeito que deslocava/escalava elementos
   (entrada do hero, hover dos cards, revelar ao rolar, troca de carrossel) —
   pedido do Paulo (01/09/2026). Ficam só fades de opacidade (não deslocam
   nada na tela) e mudanças de cor/sombra, sem transform. */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity: 0;
    transition: opacity .45s cubic-bezier(.22,.61,.36,1);
  }
  .reveal--visivel{ opacity: 1; }

  .hero__texto > *{
    opacity: 0;
    animation: mabe-entrada .7s cubic-bezier(.22,.61,.36,1) forwards;
  }
  .hero__texto > *:nth-child(1){ animation-delay: .05s; }
  .hero__texto > *:nth-child(2){ animation-delay: .12s; }
  .hero__texto > *:nth-child(3){ animation-delay: .19s; }
  .hero__texto > *:nth-child(4){ animation-delay: .26s; }
  .hero__texto > *:nth-child(5){ animation-delay: .33s; }
  .hero__texto > *:nth-child(6){ animation-delay: .40s; }
  .hero__imagem{
    opacity: 0;
    animation: mabe-entrada-imagem .8s .15s cubic-bezier(.22,.61,.36,1) forwards;
  }

  @keyframes mabe-entrada{
    to{ opacity: 1; }
  }
  @keyframes mabe-entrada-imagem{
    to{ opacity: 1; }
  }

  @keyframes mabe-respirar{
    0%, 100%{ opacity: 0; }
    50%{ opacity: 1; }
  }

  .produtos__tab, .unidades__filtro{
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
  }

  .unidade-card, .lente-card, .produto-card{
    transition: box-shadow .25s ease, border-color .25s ease;
  }
  .unidade-card:hover, .lente-card:hover{
    box-shadow: var(--sombra-dourada);
    border-color: rgba(168,128,46,.35);
  }
  .produto-card:hover{
    box-shadow: var(--sombra-dourada);
  }

  .voucher__cartao{
    animation: mabe-voucher-entrada .5s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes mabe-voucher-entrada{
    from{ opacity: 0; }
    to{ opacity: 1; }
  }

  .contador__numero{ transition: opacity .15s ease; }

  a, button{ transition: filter .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease; }
}

/* Animar box-shadow direto no botão força reprocessar (não só compor) a
   cada quadro do loop infinito — em Android de entrada isso sozinho já
   deixa a página travando (pedido do Paulo, 31/08/2026: Galaxy A03 Core),
   e mesmo só em telas grandes é um loop infinito rodando o tempo todo que
   o botão do hero está visível, sozinho ou somado a outros efeitos (header
   com blur, traço lateral, agora dois carrosséis com autoplay) — motivo
   real do "trava de vez em quando" relatado (pedido do Paulo, 01/09/2026,
   pra investigar). Corrigido na raiz: em vez de animar o box-shadow do
   próprio botão, anima a OPACIDADE de um ::after com o brilho já pronto —
   opacity é composto pela GPU sem forçar repaint do resto da página. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference){
  .hero__cta .btn--principal::after{
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: 0 18px 40px -8px rgba(222,154,0,0.55), inset 0 1px 0 rgba(255,255,255,.6);
    opacity: 0;
    pointer-events: none;
    animation: mabe-respirar 4s ease-in-out infinite;
  }
  .hero__cta .btn--principal:hover::after{
    animation-play-state: paused;
    opacity: 0;
  }
}

/* Barra de progresso de leitura — desligada (pedido do Paulo, 01/09/2026:
   remover qualquer coisa que "move a tela"; ela crescia continuamente
   junto com o scroll). Regra mantida, só com display:none, fácil de
   reativar depois. */
.barra-progresso{
  display: none;
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--amarelo), var(--dourado));
  z-index: 60;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .1s linear;
}