/* ==========================================================================
   Thiago Imports — sistema de design
   Tokens oficiais da marca. Estes valores mandam em qualquer decisão visual.
   Regras que não se quebram:
     1. O amarelo é ênfase, nunca estrutura. Preto e branco organizam.
     2. Texto sobre amarelo é sempre preto, nunca branco.
     3. Gradiente é apoio, nunca protagonista.
     4. Vidro é material da marca e mora em token, não em valor solto.
   ========================================================================== */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  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;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Marca */
  --amarelo:#FDD227;
  --amarelo-forte:#F48F03;
  /* Ambar escurecido para TEXTO sobre fundo claro. O --amarelo-forte foi feito
     para preencher forma, como a estrela, e mede so 2.39:1 no branco: como cor
     de letra ele reprova. Este mede 4.88:1 no branco e 4.51:1 no cinza claro
     das secoes. Sobre fundo escuro continua valendo o amarelo da marca. */
  --ambar-texto:#A85F00;
  --amarelo-medio:#F7BB05;
  --amarelo-claro:#FED140;

  /* Estrutura */
  --preto:#1A1A1A;
  --preto-suave:#333333;
  --cinza-texto:#5B5F66;
  --cinza-claro:#F5F6F8;
  --cinza-borda:#E2E4E8;
  --branco:#FFFFFF;

  /* Canal. O verde claro é para uso sobre fundo escuro; o escuro é para
     uso sobre branco, onde #25D366 quase desaparece. */
  --whatsapp:#25D366;
  --whatsapp-escuro:#128C7E;

  /* Forma */
  --raio:16px;
  --raio-btn:9999px;
  --sombra-1:0 2px 8px rgba(26,26,26,.06);
  --sombra-2:0 12px 32px rgba(26,26,26,.12);

  /* Vidro: o desfoque cresce com a elevação do elemento */
  --vidro-blur-sutil:10px;
  --vidro-blur:16px;
  --vidro-blur-painel:24px;
  --vidro-claro:rgba(255,255,255,.60);
  --vidro-claro-borda:rgba(255,255,255,.75);
  --vidro-sobre-escuro:rgba(255,255,255,.07);
  --vidro-sobre-escuro-borda:rgba(255,255,255,.28);
  --vidro-saturacao:170%;

  /* Layout: container 1120px, respiro 24px, espaçamento em múltiplos de 8 */
  --container:1120px;
  --respiro:24px;
  --secao-y:72px;

  /* Cabeçalho flutuante. O espaço é o que a primeira seção precisa reservar
     no topo para o conteúdo não passar por baixo da cápsula. */
  --topo-altura:60px;
  --topo-gap:12px;
  --topo-raio:999px;
  --topo-largura:960px;
  --topo-espaco:calc(var(--topo-altura) + var(--topo-gap) * 2);
}
/* O desfoque cai no celular porque compor vidro custa por pixel a cada quadro,
   e o aparelho que mais sofre com isso e justamente o mais comum aqui. */
@media(max-width:768px){
  :root{ --vidro-blur-sutil:8px; --vidro-blur:10px; --vidro-blur-painel:16px; }
}


@media(min-width:768px){
  :root{
    --secao-y:112px;
    --topo-altura:68px;
    --topo-gap:16px;
  }
}

/* Desfoque custa por pixel. No celular os valores caem. */
@media(max-width:767.98px){
  :root{
    --vidro-blur-sutil:8px;
    --vidro-blur:10px;
    --vidro-blur-painel:16px;
  }
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

body{
  margin:0;
  background:var(--branco);
  color:var(--preto);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

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

/* O atributo hidden vira display:none na folha do navegador, e qualquer
   display declarado por nos ganha dele. Sem esta linha, um .lojas com
   display:grid continua aparecendo mesmo marcado como hidden, que foi
   exatamente o que aconteceu no filtro da pagina de lojas. */
[hidden]{ display:none !important; }

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

h1,h2,h3,h4{
  margin:0;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.02em;
  text-wrap:balance;
}
p{ margin:0; }
figure,blockquote{ margin:0; }

h1{ font-size:28px; }
h2{ font-size:25px; }
h3{ font-size:18px; }
@media(min-width:768px){
  h1{ font-size:42px; }
  h2{ font-size:31px; }
  h3{ font-size:20px; }
}

/* Anel de foco em duas cores, e nao so amarelo.
   Medido na pagina: amarelo puro dava 1.46:1 sobre o branco e 1.35:1 sobre o
   cinza claro das secoes, contra o minimo de 3:1 que um indicador de foco
   precisa ter. Ou seja, 59 dos 79 elementos focaveis tinham anel praticamente
   invisivel para quem navega por teclado.
   Agora o amarelo fica por dentro e o preto por fora: sobre fundo claro quem
   aparece e o preto, sobre fundo escuro quem aparece e o amarelo. Sempre um
   dos dois separa.
   O border-radius:4px saiu daqui: ele mudava a forma do proprio elemento no
   momento do foco, e uma pilula chegava a virar quase quadrada. */
/* Some da tela, continua para leitor de tela. Usada nos rotulos de endereco
   e horario dos cards de loja, onde o icone basta no visual mas nao diz nada
   para quem ouve a pagina. */
.sr{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}

:focus-visible{
  outline:3px solid var(--preto);
  outline-offset:3px;
  box-shadow:0 0 0 3px var(--amarelo);
}
.secao--escura :focus-visible,
.rodape :focus-visible,
.assistencia :focus-visible,
.ajuda :focus-visible,
.at-drone :focus-visible,
.legal-topo :focus-visible,
.prova :focus-visible{
  outline-color:var(--branco);
}

.pular{
  position:absolute; left:-9999px;
  background:var(--preto); color:var(--branco);
  padding:12px 20px; border-radius:var(--raio-btn); z-index:200;
}
.pular:focus{ left:16px; top:16px; }

/* ---------- utilitários ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--respiro);
}

.secao{ padding-block:var(--secao-y); }
.secao--clara{ background:var(--cinza-claro); }
/* Duas secoes encostadas somam os dois respiros: 112 embaixo mais 112 em cima
   davam 229px de vazio entre o fim de um texto e o titulo do proximo. Onde a
   emenda e so uma troca de assunto, e nao de capitulo, o de cima basta.
   Modificador, e nao regra geral em .secao + .secao, para nao mexer no ritmo
   da home e das outras paginas sem necessidade. */
.secao--emenda{ padding-top:calc(var(--secao-y) * .45); }
/* A secao que vem ANTES da faixa escura de fecho nao precisa dos 112px de
   baixo: a faixa ja traz o proprio respiro, e somados eles deixavam uma tira
   morta de branco entre o ultimo produto e o fecho da pagina. */
.secao:has(+ .secao--escura .ajuda){ padding-bottom:56px; }
.secao--escura{ background:var(--preto); color:var(--branco); }

/* ---------- grafismo de fundo ----------
   O monograma da marca como textura. Três regras que mantêm ele apoio e
   não protagonista, que é o que o manual pede do gradiente e vale igual
   aqui:

   1. Opacidade baixíssima. Ele é para ser sentido, não lido.
   2. Sempre sangrando para fora da seção. Círculo inteiro e centralizado
      vira marca d'água de documento; cortado pela borda vira textura.
   3. Giro muito lento, uma volta em dois minutos. Rápido o bastante para a
      página respirar, lento o bastante para ninguém reparar de propósito. */
.com-grafismo{ position:relative; overflow:hidden; isolation:isolate; }
.com-grafismo > *{ position:relative; z-index:1; }

.grafismo{
  position:absolute;
  z-index:0;
  pointer-events:none;
  aspect-ratio:1;
  background-repeat:no-repeat;
  background-size:contain;
  animation:giraGrafismo 120s linear infinite;
}
/* Branco sobre preto precisa de mais opacidade que preto sobre claro para
   chegar na mesma presença: 5% de branco sobre #1A1A1A mal se distingue do
   fundo, enquanto 4,5% de preto sobre #F5F6F8 já se vê. */
.grafismo--claro{ background-image:url('/img/grafismo-branco.webp'); opacity:.075; }
.grafismo--escuro{ background-image:url('/img/grafismo-preto.webp'); opacity:.045; }

@keyframes giraGrafismo{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@media(prefers-reduced-motion:reduce){
  .grafismo{ animation:none; }
}
/* Este e o unico dos tres grafismos que passa por baixo da capsula do topo,
   que tem backdrop-filter. Girando, obriga o navegador a repintar o desfoque
   quadro a quadro, para sempre. Os outros dois continuam girando: eles nao
   ficam sob nada com vidro. */
.grafismo--hero{ animation:none; }

/* Posição por seção. Cada um sai por um lado diferente para o olho não
   perceber que é sempre a mesma peça. */
.grafismo--hero{    width:58%; right:-15%; top:-26%; }
/* À direita, não à esquerda: naquela seção a coluna da esquerda é ocupada
   pela foto do Thiago, e o grafismo ficava escondido atrás dela. */
.grafismo--motivos{ width:50%; right:-13%; top:-22%; animation-direction:reverse; }
.grafismo--rodape{  width:44%; right:-11%; top:-34%; }

@media(max-width:767.98px){
  .grafismo--hero{    width:96%; right:-34%; top:-6%; }
  .grafismo--motivos{ width:92%; right:-30%; top:-8%; }
  .grafismo--rodape{  width:88%; right:-30%; top:-14%; }
}

.rotulo{
  display:inline-block;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cinza-texto);
  margin-bottom:12px;
}
.secao--escura .rotulo{ color:var(--amarelo); }

.lead{
  font-size:16.5px;
  line-height:1.6;
  color:var(--cinza-texto);
  max-width:60ch;
}
.secao--escura .lead{ color:rgba(255,255,255,.72); }
@media(min-width:768px){ .lead{ font-size:19px; } }

/* h2 tem margin:0 no reset e .lead nao tinha margem de topo, entao o titulo
   da secao e o texto abaixo ficavam encostados, separados so pelo leading.
   Passava despercebido porque duas secoes tinham o remendo em estilo inline;
   agora a regra e uma so, no cabecalho da secao.

   O seletor cobre h1 e h2 porque as paginas internas abrem a secao com h1, e
   a versao presa a h2 deixava o lead colado no titulo: 0px de folga medidos
   na pagina de lojas. */
.cabecalho-secao{ margin-bottom:40px; }
.cabecalho-secao :is(h1,h2) + .lead{ margin-top:14px; }
@media(min-width:768px){
  .cabecalho-secao{ margin-bottom:56px; }
  .cabecalho-secao :is(h1,h2) + .lead{ margin-top:18px; }
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  border:1px solid transparent;
  border-radius:var(--raio-btn);
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn svg{ width:18px; height:18px; flex:none; }

/* Regra da marca: texto sobre amarelo é sempre preto. */
.btn--principal{ background:var(--amarelo); color:var(--preto); box-shadow:var(--sombra-1); }
/* Par de botoes no celular: um em cima do outro, ocupando a largura, com um
   teto para nao virarem duas barras enormes no tablet. Era a mesma regra
   escrita em quatro lugares diferentes do arquivo. .hero__acoes e
   .ficha__acoes ficam de fora porque cada um tem margem propria a resolver. */
@media(max-width:640px){
  .ajuda__acoes,
  .at-topo__acoes,
  .sb-topo__acoes,
  .pt-topo__acoes{ display:grid; grid-template-columns:1fr; max-width:420px; }
  .ajuda__acoes .btn,
  .at-topo__acoes .btn,
  .sb-topo__acoes .btn,
  .pt-topo__acoes .btn{ width:100%; }
}

/* O anel de foco do padrao e um box-shadow, e este .btn--principal declara o
   proprio box-shadow logo acima com a mesma especificidade. Empate resolvido
   por ordem de fonte, entao o anel amarelo simplesmente nunca era pintado
   neste botao. Aqui os dois convivem: anel primeiro, sombra depois.
   Vale para qualquer bloco escuro, presente ou futuro. */
.btn--principal:focus-visible{ box-shadow:0 0 0 3px var(--amarelo), var(--sombra-1); }
.btn--principal:hover{ background:var(--amarelo-claro); box-shadow:var(--sombra-2); }

.btn--contorno{ background:transparent; color:var(--preto); border-color:var(--cinza-borda); }
.btn--contorno:hover{ border-color:var(--preto); }

/* Botão de WhatsApp: pílula preta com o logo no verde oficial.
   Verde de fundo não fecha: com texto branco dá 1,98:1 e com texto preto o
   logo sai na cor errada, o que lê como defeito. Preto de fundo resolve os
   dois e deixa o verde fazer o que ele faz melhor, que é ser reconhecido. */
.btn--zap{ background:var(--preto); color:var(--branco); }
.btn--zap:hover{ background:#000; }
.btn--zap svg{ color:var(--whatsapp); }

/* Sobre fundo claro o verde puro fica fraco, então o logo usa o verde
   escuro do próprio WhatsApp, que passa em contraste sobre branco. */
/* O icone do WhatsApp segue a cor do texto do botao. O verde da marca so
   entra onde ele tem contraste de verdade: sobre a pilula preta e sobre o
   branco do botao de contorno.
   No botao amarelo o verde escuro caia para 2.84:1, abaixo do minimo de 3:1
   para elemento grafico, e o balao praticamente sumia dentro do amarelo.
   A regra antiga foi escrita pensando so na pilula preta e vazou para os
   outros botoes. */
.icone-zap{ color:currentColor; }
.btn--contorno .icone-zap{ color:var(--whatsapp-escuro); }


/* ---------- vidro escuro reaproveitavel ----------
   O vidro so vale onde passa conteudo por tras: e a refracao que faz o efeito.
   Sobre fundo chapado ele nao refrata nada e vira cinza sujo, entao nao entra.

   A receita e a mesma da capsula do topo, que ja funciona: desfoque, aumento
   de saturacao para a cor de tras nao lavar, um fio claro na borda de cima
   simulando o brilho especular, e sombra por fora para o objeto descolar.

   O tom escuro nao e enfeite: ele garante o contraste do texto branco mesmo
   quando o que passa por tras e claro. Sobre branco puro, o pior caso, a
   composicao da rgb(90,90,90) e o texto branco fica em 6.9:1. */
.vidro-escuro{
  background:rgba(26,26,26,.72);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-saturacao));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 10px 28px rgba(26,26,26,.30);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .vidro-escuro{ background:rgba(26,26,26,.94); }
}

.btn--vidro{
  background:var(--vidro-sobre-escuro);
  border-color:var(--vidro-sobre-escuro-borda);
  color:var(--branco);
  backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
}
.btn--vidro:hover{ background:rgba(255,255,255,.14); }

.btn--pequeno{ padding:11px 20px; font-size:14px; }

/* ---------- cabeçalho flutuante ----------
   O menu não encosta no topo: ele flutua como uma cápsula de vidro sobre o
   conteúdo. O vidro só funciona com informação atrás, então o conteúdo passa
   por baixo dele de propósito, e a primeira seção compensa com respiro extra.

   O estado muda com a rolagem por um motivo de leitura, não de enfeite: no
   topo o vidro é bem translúcido e deixa ver o hero; assim que o conteúdo
   escuro começa a passar por baixo, ele fica mais denso, senão o texto do
   menu cairia para menos de 3:1 sobre as seções pretas. */
.topo{
  position:fixed;
  top:var(--topo-gap); left:0; right:0;
  z-index:100;
  padding-inline:var(--respiro);
  pointer-events:none;
}
.topo__caixa{
  position:relative;
  max-width:var(--topo-largura);
  margin-inline:auto;
  pointer-events:auto;
  border-radius:var(--topo-raio);
  border:1px solid rgba(255,255,255,.55);
  background:linear-gradient(180deg, rgba(255,255,255,.70), rgba(255,255,255,.50));
  backdrop-filter:blur(var(--vidro-blur-painel)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur-painel)) saturate(var(--vidro-saturacao));
  /* A borda superior clara é o brilho especular: é o que faz o vidro parecer
     vidro e não um retângulo desfocado. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.30),
    0 1px 2px rgba(26,26,26,.04),
    0 10px 30px rgba(26,26,26,.10);
  /* Mesma duração e mesma curva da altura do menu, senão a forma e o
     tamanho terminam em momentos diferentes e parece defeito. */
  transition:background .28s cubic-bezier(.4,0,.2,1),
             box-shadow .28s cubic-bezier(.4,0,.2,1),
             border-radius .28s cubic-bezier(.4,0,.2,1);
}
/* Reflexo diagonal, bem discreto. Some no modo de movimento reduzido junto
   com o resto, e nunca captura clique. */
.topo__caixa::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  background:linear-gradient(104deg,
    transparent 28%,
    rgba(255,255,255,.40) 44%,
    rgba(255,255,255,.10) 54%,
    transparent 66%);
  opacity:.75;
  pointer-events:none;
}
.topo.rolou .topo__caixa{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(255,255,255,.40),
    0 2px 4px rgba(26,26,26,.05),
    0 14px 40px rgba(26,26,26,.16);
}
/* Sem backdrop-filter (navegador antigo) o vidro vira cinza sujo. Nesse caso
   o fundo fica sólido, que é o comportamento honesto. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topo__caixa{ background:rgba(255,255,255,.97); }
  .topo.rolou .topo__caixa{ background:#fff; }
}
/* Sem JavaScript a classe .rolou nunca é aplicada, e a cápsula translúcida
   sobre as seções pretas derrubaria o contraste do menu. Nesse caso ela já
   nasce densa: perde o efeito, mantém a leitura. */
@media (scripting:none){
  .topo__caixa{ background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.84)); }
}

.topo__interno{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:24px;
  min-height:var(--topo-altura);
  padding-inline:20px;
}
.topo__logo img{ width:132px; height:auto; }
.topo__nav{ display:none; gap:28px; }
.topo__nav a{
  font-size:15px; font-weight:600; color:var(--preto-suave);
  padding-block:6px; border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.topo__nav a[aria-current="page"]{
  color:var(--preto);
  border-bottom-color:var(--amarelo);
}
.topo__nav a:hover{ color:var(--preto); border-bottom-color:var(--amarelo); }
.topo__acoes{ margin-left:auto; display:flex; align-items:center; gap:12px; }
/* Botão do menu por extenso, não hambúrguer. Três traços num quadrado pesam
   demais ao lado do vidro e ainda dependem de o cliente decifrar o ícone.
   A palavra resolve as duas coisas, e a pílula é a forma da marca. */
.topo__menu{
  display:inline-flex; align-items:center; gap:9px;
  height:44px; padding:0 16px 0 18px;
  background:var(--preto); border:0;
  border-radius:var(--raio-btn);
  font-family:inherit; font-size:13.5px; font-weight:700;
  letter-spacing:.03em;
  color:var(--branco);
  cursor:pointer;
  transition:background-color .18s ease;
}
.topo__menu-tracos{
  display:inline-flex; flex-direction:column; justify-content:center; gap:4px;
  width:15px; height:15px;
}
.topo__menu-tracos i{
  display:block; height:2px; border-radius:2px;
  background:var(--amarelo);
  transition:transform .22s ease, width .22s ease;
}
.topo__menu-tracos i:first-child{ width:15px; }
.topo__menu-tracos i:last-child{ width:10px; }
/* Aberto, os dois traços viram um X e o rótulo passa a dizer Fechar. */
.topo__menu[aria-expanded="true"] .topo__menu-tracos i{ width:15px; }
.topo__menu[aria-expanded="true"] .topo__menu-tracos i:first-child{ transform:translateY(3px) rotate(45deg); }
.topo__menu[aria-expanded="true"] .topo__menu-tracos i:last-child{ transform:translateY(-3px) rotate(-45deg); }
.topo__cta{ display:none; }

/* No desktop a cápsula vira três colunas: logo, menu, ação.
   As colunas laterais são 1fr iguais, então o menu fica no centro ótico
   real da pílula, sem depender da largura do logo nem da do botão.
   O "Falar com a loja" fica sozinho na direita de propósito: ele é ação,
   não navegação, e separar os dois é o que faz o botão ser notado. */
@media(min-width:960px){
  .topo__interno{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    padding-inline:28px;
  }
  .topo__logo{ justify-self:start; }
  .topo__nav{ display:flex; justify-self:center; }
  .topo__acoes{ margin-left:0; justify-self:end; }
  .topo__menu{ display:none; }
  .topo__cta{ display:inline-flex; }
}

/* Menu do celular. Mora dentro da mesma cápsula de vidro, então quando abre
   a cápsula deixa de ser pílula e vira um painel arredondado.

   A altura anima junto com o raio, pelo truque de grid 0fr para 1fr. Sem
   isso a altura saltava na hora e o raio levava 250ms para acompanhar: por
   um quarto de segundo aparecia um painel de 430px com canto de 101px, o
   que lê como layout quebrado. Os dois agora levam o mesmo tempo. */
.menu-mobile{
  display:grid;
  /* 0fr para 1fr: o navegador interpola essa forma. Com minmax() ele não
     interpola e a abertura vira um salto seco.
     Chegar a zero de verdade depende do filho recortar (overflow:hidden) e
     de padding e borda morarem um nível abaixo, o que é o caso aqui. */
  grid-template-rows:0fr;
  position:relative; z-index:1;
  transition:grid-template-rows .28s cubic-bezier(.4,0,.2,1);
}
.menu-mobile.aberto{ grid-template-rows:1fr; }
/* Este nível só recorta. Padding e borda moram no filho, senão eles ficam
   fora do recorte e sobra uma faixa visível com o menu fechado. */
/* Nada de visibility aqui. Alternar visibility no mesmo quadro em que a
   faixa muda de 0fr para 1fr faz o navegador pular a transição de abertura
   (fechar animava, abrir não). O acesso por teclado com o menu fechado é
   resolvido com o atributo inert, aplicado pelo JavaScript. */
.menu-mobile__interno{
  overflow:hidden;
  min-height:0;
}
.menu-mobile__conteudo{
  padding:8px 20px 20px;
  border-top:1px solid rgba(26,26,26,.10);
}
@media(min-width:960px){ .menu-mobile{ display:none; } }
/* O painel aberto ERA vidro (fundo translúcido com desfoque), e o Rian achou
   ruim: dava pra ler o texto da seção de trás fantasmando por baixo dos
   links do menu ("Assistência Técnica", "R$ 0", "90 dias"...), que é
   informação de duas camadas competindo pela mesma leitura. Painel de
   navegação precisa ser opaco, ponto: aqui o conteúdo é a lista de links, e
   nada deveria disputar atenção com ela. O vidro continua valendo pra
   cápsula FECHADA (ali sim há informação por trás pra refratar, é o hero
   passando por baixo), só o painel aberto vira sólido. */
.topo:has(.menu-mobile.aberto) .topo__caixa{
  border-radius:28px;
  background:var(--branco);
  box-shadow:var(--sombra-2);
}
/* O :not(.btn) não é enfeite. Sem ele, '.menu-mobile a' (0,1,1) vence
   '.btn' (0,1,0) e zera o padding lateral do botão, jogando o ícone em
   cima da curva da pílula. Regra genérica de link nunca deve alcançar
   um componente que já tem forma própria. */
.menu-mobile a:not(.btn){
  display:block; padding:14px 0;
  font-size:16px; font-weight:600;
  border-bottom:1px solid rgba(26,26,26,.08);
}
.menu-mobile .btn{ width:100%; margin-top:16px; }

/* ---------- entrada dos links, quando o menu abre ----------
   A abertura só animava a ALTURA do painel crescendo (grid 0fr→1fr, técnica
   que continua, é o que dá a curva suave em vez de salto seco). O que
   estava ruim, e o Rian apontou, é que o conteúdo lá dentro não fazia nada:
   crescia junto com a caixa, plano, sem vida própria, então a abertura
   inteira lia como "uma caixa esticando", não como um menu aparecendo.

   Aqui cada link entra com um pequeno atraso em cascata, subindo 8px e
   ganhando opacidade, então a lista parece se ORGANIZAR na tela em vez de
   só estar lá quando a caixa termina de crescer. O atraso é curto (35ms por
   item) pra não competir com a animação da caixa nem fazer o menu parecer
   lento: em 6 itens a cascata inteira termina bem antes da caixa, que é o
   fator mais lento dos dois (280ms). */
.menu-mobile__conteudo > *{
  opacity:0;
  transform:translateY(8px);
}
.menu-mobile.aberto .menu-mobile__conteudo > *{
  animation:menuLinkEntra .32s cubic-bezier(.16,1,.3,1) forwards;
}
/* .menu-mobile.aberto na frente, e nao so .menu-mobile__conteudo, e
   obrigatorio aqui: o "animation" ali em cima e um ATALHO, e atalho zera
   pra o valor inicial (0s) todo sub-valor que ele nao escreve, inclusive
   animation-delay. Isso conta como uma declaracao normal pra fins de
   especificidade, e ".menu-mobile.aberto .menu-mobile__conteudo > *" tem
   TRES classes (0-3-0) contra as DUAS classes daqui (0-2-0) sem o prefixo.
   Escrito so com ".menu-mobile__conteudo > *:nth-child(n)", o atraso nunca
   vencia o 0s do atalho, nem vindo depois no arquivo: especificidade decide
   antes de ordem de fonte. Medido no navegador: todo item saia com
   animation-delay 0s, cascata nenhuma, so depois deste ajuste os numeros
   apareceram. */
.menu-mobile.aberto .menu-mobile__conteudo > *:nth-child(1){ animation-delay:.03s; }
.menu-mobile.aberto .menu-mobile__conteudo > *:nth-child(2){ animation-delay:.065s; }
.menu-mobile.aberto .menu-mobile__conteudo > *:nth-child(3){ animation-delay:.1s; }
.menu-mobile.aberto .menu-mobile__conteudo > *:nth-child(4){ animation-delay:.135s; }
.menu-mobile.aberto .menu-mobile__conteudo > *:nth-child(5){ animation-delay:.17s; }
.menu-mobile.aberto .menu-mobile__conteudo > *:nth-child(6){ animation-delay:.205s; }
.menu-mobile.aberto .menu-mobile__conteudo > *:nth-child(7){ animation-delay:.24s; }
@keyframes menuLinkEntra{
  to{ opacity:1; transform:translateY(0); }
}
/* Fechado o conteúdo não pode ficar preso em opacity:0 esperando a próxima
   abertura reanimar: sem isto, quem tem JavaScript desligado (a classe
   .aberto nunca chega a existir) nunca veria o menu, e é exatamente o tipo
   de acidente silencioso que quebra sem avisar. */
@media(scripting:none){
  .menu-mobile__conteudo > *{ opacity:1; transform:none; }
}
@media(prefers-reduced-motion:reduce){
  .menu-mobile__conteudo > *{ opacity:1; transform:none; animation:none; }
}

/* ---------- hero ---------- */
/* A primeira seção reserva no topo o espaço da cápsula flutuante, mas o
   fundo dela continua subindo até y=0: é esse fundo que dá informação para
   o vidro do menu ter o que refratar. */
.hero{
  position:relative;
  overflow:hidden;
  padding-block:calc(var(--topo-espaco) + 32px) 64px;
  /* Gradiente é apoio: uma lavagem sutil atrás do conteúdo, nunca protagonista. */
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(253,210,39,.22), transparent 62%),
    radial-gradient(680px 420px at 4% 8%, rgba(253,210,39,.09), transparent 60%),
    var(--branco);
}
@media(min-width:768px){ .hero{ padding-block:calc(var(--topo-espaco) + 56px) 96px; } }

.hero__grade{ display:grid; gap:40px; align-items:center; }
/* A janela do vídeo pesa mais que o texto na divisão: ela é o elemento que
   o cliente veio ver, e a 474px parecia miniatura. minmax(0,...) impede que
   o texto longo force a coluna a crescer e roube largura do vídeo. */
@media(min-width:960px){
  .hero__grade{ grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); gap:40px; }
}

.hero__selo{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; margin-bottom:20px;
  background:var(--vidro-claro);
  border:1px solid var(--vidro-claro-borda);
  border-radius:var(--raio-btn);
  font-size:13px; font-weight:700; letter-spacing:.02em;
  color:var(--preto-suave);
  backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
  box-shadow:var(--sombra-1);
}
/* O G colorido no lugar da estrela amarela. A frase fala de avaliacao no
   Google, entao a marca reconhecivel vale mais que um icone generico, e ainda
   libera o amarelo, que aqui competia com o realce do titulo logo abaixo.
   Altura pela caixa da letra, nao pelo arquivo: o SVG e quase quadrado. */
.hero__selo-g{ width:17px; height:17px; flex:none; display:block; }

.hero h1{ margin-bottom:20px; }
/* A pergunta é a manchete e leva o realce; a resposta vem embaixo em corpo
   menor, como fecho. Separar em dois tamanhos também resolve a altura: numa
   linha só, a frase inteira ocupava cinco linhas e desequilibrava o hero.
   As duas continuam dentro do mesmo H1, então o Google lê a frase completa. */
.hero h1 .h1__apoio{
  display:block;
  margin-top:14px;
  font-size:.5em;
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.005em;
  color:var(--cinza-texto);
}
/* O amarelo é ênfase, e sobre amarelo o texto é preto. Marcar duas palavras
   é o uso certo dele aqui: destaca a virada da frase sem pintar seção.
   É span e não <mark>: o realce aqui é de marca, não de "trecho relevante
   na busca", que é o que o <mark> significa e o que leitor de tela anuncia. */
.hero h1 .realce{
  background:var(--amarelo);
  color:var(--preto);
  padding:.02em .18em;
  border-radius:8px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.hero__lead{ margin-bottom:32px; }
/* Os botões fecham a coluna de texto, então sem margem sobrando embaixo. */
.hero__acoes{ display:flex; flex-wrap:wrap; gap:12px; }

/* No celular eles ocupam a largura inteira. Com a largura do próprio texto
   sobrava um vazio à direita que deixava o bloco solto, e o alvo de toque
   ficava menor do que precisa ser num botão principal. */
@media(max-width:640px){
  /* O teto de 420px evita o outro extremo: perto de 640px um botão de
     largura total daria quase 590px, o que vira uma barra, não um botão. */
  .hero__acoes{ display:grid; grid-template-columns:1fr; max-width:420px; }
  .hero__acoes .btn{ width:100%; }
}

/* ---------- janela de navegador (espaço do vídeo) ----------
   Moldura no espírito do Safari: cantos arredondados, barra clara com os
   três pontos, endereço ao centro. Não é cópia pixel a pixel, é a forma
   reconhecível, que aqui serve para dizer "isto é um vídeo nosso, no nosso
   endereço". */
/* O fundo branco saiu do container e foi so para a tela. Assim a barra pode
   ser translucida e deixar o grafismo do hero aparecer atras dela, que e como
   a barra do Safari se comporta no macOS. */
.janela{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(26,26,26,.12);
  box-shadow:
    0 1px 1px rgba(26,26,26,.04),
    0 18px 44px rgba(26,26,26,.18);
}
.janela__barra{
  display:flex; align-items:center; gap:14px;
  padding:0 14px;
  height:46px;
  background:linear-gradient(180deg, rgba(250,250,251,.82), rgba(238,238,240,.74));
  backdrop-filter:blur(var(--vidro-blur-painel)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur-painel)) saturate(var(--vidro-saturacao));
  border-bottom:1px solid rgba(26,26,26,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .janela__barra{ background:linear-gradient(180deg,#F7F7F8,#EDEDEF); }
}
/* As três zonas têm a mesma largura, então o campo de endereço fica no
   centro ótico da janela mesmo com quantidades diferentes de ícone dos
   lados. É assim que a barra do Safari se comporta. */
.janela__esq, .janela__dir{
  flex:1 1 0;
  display:inline-flex; align-items:center; gap:14px;
  min-width:0;
}
.janela__dir{ justify-content:flex-end; gap:16px; }

.janela__pontos{ display:inline-flex; gap:7px; flex:none; }
.janela__pontos i{ width:11px; height:11px; border-radius:50%; display:block; }
.janela__pontos i:nth-child(1){ background:#FF5F57; }
.janela__pontos i:nth-child(2){ background:#FEBC2E; }
.janela__pontos i:nth-child(3){ background:#28C840; }

.janela__setas{ display:inline-flex; gap:10px; color:rgba(26,26,26,.34); }
.janela__setas svg{ width:15px; height:15px; }
.janela__setas svg:last-child{ color:rgba(26,26,26,.22); }
.janela__dir svg{ width:15px; height:15px; color:rgba(26,26,26,.34); }

.janela__url{
  flex:0 1 auto;
  width:min(280px, 46%);
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:26px; padding:0 12px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(26,26,26,.10);
  border-radius:7px;
  font-size:12.5px; font-weight:600;
  color:var(--cinza-texto);
  white-space:nowrap; overflow:hidden;
}
.janela__url svg{ width:11px; height:11px; flex:none; opacity:.6; }

/* No celular a barra fica só com o endereço, centralizado. Sinaleiro e
   ícones de navegação são enfeite de janela de computador: no telefone eles
   só roubam espaço do que importa ali, que é o domínio. */
@media(max-width:560px){
  .janela__esq, .janela__setas, .janela__dir{ display:none; }
  .janela__barra{ justify-content:center; padding-inline:12px; }
  .janela__url{ flex:0 1 auto; width:auto; max-width:100%; }
}

.janela__tela{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  aspect-ratio:16/10;
  background:
    radial-gradient(120% 90% at 50% 0%, #2A2A2A, #171717 70%);
}
.janela__play{
  display:inline-flex; align-items:center; justify-content:center;
  width:62px; height:62px;
  border-radius:50%;
  background:var(--amarelo);
  box-shadow:0 10px 26px rgba(0,0,0,.4);
}
.janela__play svg{ width:26px; height:26px; color:var(--preto); margin-left:3px; }
.janela__aviso{
  font-size:12.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
/* Quando o vídeo entrar, ele ocupa a tela inteira da janela. */
.janela__tela video,
.janela__tela iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0; object-fit:cover;
}

/* ---------- faixa de prova ----------
   A versão anterior eram quatro pares de texto soltos no preto: sem
   estrutura, sem ícone e com rótulos de alturas diferentes, então a linha
   de base não batia. Agora é uma grade com fio de 1px entre as células, o
   que dá ordem sem precisar de caixa nem de mais cor. */
.prova{ background:var(--preto); color:var(--branco); }

/* Celular: esteira contínua. São duas listas idênticas lado a lado, as duas
   deslizando o equivalente à largura de uma. Quando a primeira sai inteira,
   a segunda está exatamente onde a primeira começou, então o laço não tem
   emenda. A cópia é aria-hidden para o leitor de tela não ler duas vezes. */
.prova__esteira{ display:flex; overflow:hidden; }
.prova__grade{
  flex:0 0 auto;
  display:flex;
  list-style:none; margin:0; padding:0;
  animation:esteira 24s linear infinite;
}
.prova__esteira:hover .prova__grade{ animation-play-state:paused; }

@keyframes esteira{
  from{ transform:translateX(0); }
  to{ transform:translateX(-100%); }
}

/* Desktop: volta a ser grade parada de quatro colunas e a cópia sai. */
@media(min-width:860px){
  .prova__esteira{ display:block; overflow:visible; }
  .prova__grade{
    display:grid; grid-template-columns:repeat(4,1fr);
    animation:none; transform:none;
  }
  .prova__grade--clone{ display:none; }
}

/* Sem movimento: a esteira vira rolagem lateral comum, controlada pela pessoa. */
@media(prefers-reduced-motion:reduce){
  .prova__grade{ animation:none; }
  .prova__esteira{ overflow-x:auto; }
  .prova__grade--clone{ display:none; }
}

.prova__item{
  background:var(--preto);
  display:flex; flex:0 0 auto;
  border-right:1px solid rgba(255,255,255,.11);
}
@media(min-width:860px){
  .prova__item{ flex:1 1 auto; }
  .prova__grade > .prova__item:last-child{ border-right:0; }
}
.prova__conteudo{
  flex:1;
  display:flex; flex-direction:column; align-items:center;
  gap:3px;
  /* Na esteira o respiro lateral é maior: é ele que separa um número do
     outro enquanto passam. */
  padding:22px 30px 20px;
  text-align:center;
}
@media(min-width:860px){ .prova__conteudo{ padding-inline:16px; } }

/* Ícone sem a bolha: o círculo engordava a faixa em quase 20px por linha
   sem acrescentar informação nenhuma. */
.prova__icone{
  display:inline-flex; align-items:center; justify-content:center;
  height:18px; margin-bottom:2px;
}
.prova__icone svg{ width:16px; height:16px; color:rgba(255,255,255,.45); }

.prova__n{
  font-size:27px; font-weight:800; letter-spacing:-.03em;
  color:var(--amarelo); line-height:1.15;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@media(min-width:860px){ .prova__n{ font-size:32px; } }

/* Rótulo em uma linha só. Se ele quebra, a faixa inteira cresce junto, e na
   esteira a quebra ainda faria os itens terem larguras diferentes. */
.prova__l{
  font-size:13px; line-height:1.4;
  color:rgba(255,255,255,.62);
  white-space:nowrap;
}

/* ---------- marcas ----------
   Marca é como o cliente procura ("quero um Xiaomi"); categoria é como a
   loja se organiza por dentro. Cada chip leva para o catálogo já filtrado.
   A grade iguala a largura de todos, senão nomes curtos como LG ficariam
   com chips minúsculos ao lado de Electrolux. */
/* Colunas fixas em 2, 3, 4 e 6, que são os divisores de 12. Com auto-fill a
   grade caía em 5 colunas em telas médias e a última fileira ficava com dois
   chips soltos. */
.marcas{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  list-style:none; margin:0; padding:0;
}
@media(min-width:520px){ .marcas{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:780px){ .marcas{ grid-template-columns:repeat(4,1fr); } }
@media(min-width:1040px){ .marcas{ grid-template-columns:repeat(6,1fr); } }
.marca{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
  padding:12px 14px;
  background:var(--branco);
  border:1px solid var(--cinza-borda);
  border-radius:var(--raio-btn);
  font-size:15.5px; font-weight:700; letter-spacing:-.01em;
  color:var(--preto);
  text-align:center;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* Os doze logos vieram monocromáticos em preto, então não precisam de
   dessaturação: basta o peso. Em repouso ficam a 78% para não competirem
   com o amarelo da marca, e firmam no hover.

   Já esteve em 62% e era baixo demais. Os wordmarks de traço fino, Sony,
   Garmin, Logitech e Amazon, viravam cinza claro e pareciam craquelados,
   principalmente em captura de tela reduzida, que é onde o traço de 1px
   some primeiro. Os arquivos são vetor puro e estavam certos o tempo todo:
   o problema era o peso do traço na tela, não a resolução.

   O dimensionamento separa os logos em dois tipos, porque tratá-los igual
   quebra um dos dois:

   Wordmark (proporção 3:1 ou mais: Electrolux, Samsung, Sony, Logitech,
   Garmin, Xiaomi, Amazon, realme). Todos com a MESMA LARGURA de 108px, o
   que alinha coluna a coluna na grade e deixa o conjunto uniforme. A altura
   sai da proporção de cada um.

   Símbolo compacto (Apple, LG, DJI, JBL). Estes não podem seguir a largura:
   a Apple, que é quase quadrada, teria 137px de altura e viraria um cartaz.
   Vão por altura, com teto de 40px. */
.marca img{
  width:auto; max-width:100%;
  object-fit:contain;
  opacity:.78;
  transition:opacity .18s ease;
}
.marca:hover img{ opacity:1; }

.marca[data-marca="apple"] img{ height:40px; }
.marca[data-marca="samsung"] img{ height:17px; }
.marca[data-marca="xiaomi"] img{ height:30px; }
.marca[data-marca="jbl"] img{ height:29px; }
.marca[data-marca="sony"] img{ height:19px; }
.marca[data-marca="lg"] img{ height:30px; }
.marca[data-marca="dji"] img{ height:30px; }
.marca[data-marca="garmin"] img{ height:29px; }
.marca[data-marca="realme"] img{ height:32px; }
.marca[data-marca="logitech"] img{ height:28px; }
.marca[data-marca="amazon"] img{ height:33px; }
.marca[data-marca="electrolux"] img{ height:14px; }

/* Só o logo dentro da cápsula: o nome da marca vive no atributo alt, que é
   o que leitor de tela e buscador leem. Sem o rótulo embaixo, a caixa
   encolhe e o logo pode crescer.
   Esta altura e a unica: a regra base ja declarou 54px e este valor sempre
   ganhava, entao o 54 era numero morto e foi removido de la. */
.marca{ min-height:78px; }

/* O cabeçalho desta seção fica mais perto dos chips que o padrão: eles são
   a continuação direta da frase "escolha a marca", não um bloco novo. */
.marcas-secao .cabecalho-secao{ margin-bottom:28px; }
@media(min-width:768px){ .marcas-secao .cabecalho-secao{ margin-bottom:36px; } }
.marca:hover{
  border-color:var(--amarelo);
  box-shadow:var(--sombra-1);
  transform:translateY(-2px);
}

/* O link mora fora do parágrafo. Dentro dele, quebrava no meio da frase e
   o rótulo aparecia partido em duas linhas ("Ver o" / "catálogo completo"). */
.marcas__rodape{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:6px 20px;
  margin-top:22px;
}
.marcas__nota{
  font-size:14.5px; line-height:1.6;
  color:var(--cinza-texto);
  max-width:68ch;
}
.marcas__link{
  display:inline-flex; align-items:center; gap:7px;
  font-size:14.5px; font-weight:700;
  color:var(--preto);
  white-space:nowrap;
  border-bottom:2px solid var(--amarelo);
  padding-bottom:1px;
  transition:border-color .18s ease;
}
.marcas__link:hover{ border-bottom-color:var(--preto); }
.marcas__link svg{ width:15px; height:15px; }

/* ---------- produtos ---------- */
/* ---------- esteira de produtos ----------
   Duas listas iguais deslizando o equivalente a uma, mais o vão entre elas,
   senão a volta dá um solavanco de 16px.

   Diferente da faixa de números, aqui os cards são clicáveis, e alvo que
   anda foge do dedo. Por isso a esteira para quando o ponteiro entra e
   quando o dedo encosta, e só volta depois que a pessoa sai. */
/* O iPhone 18 Pro Max fica FORA desta faixa, num card fixo ao lado (veja
   .produtos-linha e .produto--fixo, logo abaixo). O HTML e o comentário já
   diziam isso, mas faltava o CSS que de fato colocava um do lado do outro:
   sem ele os dois caíam em blocos empilhados, cada um na própria linha. */
.produtos-esteira{
  display:flex; gap:16px;
  overflow:hidden;
  flex:1 1 auto; min-width:0;
  /* Sangria só do lado direito, até a borda real da tela. Do lado esquerdo
     agora mora o card fixo, e sangrar pra lá também empurraria a esteira
     24px por baixo dele, descolando as duas colunas uma da outra. */
  margin-right:calc(var(--respiro) * -1);
  padding-right:var(--respiro);
  /* Sem a máscara, o card da ponta aparece cortado no meio e lê como
     defeito de layout. Com ela, some suave e o corte vira intenção. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  /* A mãozinha de "dá pra segurar" é o convite. Sem ela a pessoa não tem
     como adivinhar que a faixa aceita ser arrastada com o mouse. */
  cursor:grab;
}
.produtos-esteira.arrastando{ cursor:grabbing; }
/* Sem isto, segurar o mouse sobre um card puxa a imagem como se fosse
   soltar num lugar (o "fantasma" nativo de arrastar imagem/link do
   navegador) e o texto dos cards fica marcado de azul no meio do gesto.
   Os dois brigam com o arraste da própria esteira. */
.produtos-esteira img{ -webkit-user-drag:none; user-drag:none; }
.produtos-esteira.arrastando,
.produtos-esteira.arrastando *{
  user-select:none; -webkit-user-select:none;
}
/* A linha que junta o card fixo do lançamento com a faixa que desliza ao
   lado dele. Sem isto, .produto--fixo e .produtos-esteira eram dois irmãos
   soltos dentro de .produtos-linha, e um bloco caía embaixo do outro em vez
   de ficar lado a lado. */
.produtos-linha{
  display:flex;
  align-items:stretch;
  gap:16px;
}
.produto--fixo{
  /* Mesma largura dos cards que deslizam, senão o card fixo nasce do
     tamanho do próprio conteúdo (flex:0 1 auto padrão de .produto) e sai
     visivelmente mais estreito ou mais largo que os vizinhos que andam. */
  flex:0 0 260px;
}
@media(min-width:768px){ .produto--fixo{ flex:0 0 306px; } }

/* ---------- card fixo no celular: vira faixa, não coluna ----------
   O Rian testou no celular e achou ruim: 260px de card fixo numa tela de
   ~375px de largura não deixa quase nada pra esteira, e sobra só uma lasca
   do próximo produto espiando na borda. Testar essa combinação era
   justamente o que o painel de preview em largura de celular, aberto mais
   cedo, serviu pra descobrir.

   A troca é de coluna pra faixa só abaixo de 768px: .produtos-linha deita
   (column), o card fixo vira uma faixa HORIZONTAL curta acima da esteira
   (foto pequena à esquerda, texto e botão à direita, como um banner de
   app), e a esteira ganha a LARGURA INTEIRA da tela pra rolar embaixo.
   O card continua sendo o primeiro que a pessoa vê, só que não briga mais
   com o espaço dos outros produtos pra isso.

   flex:0 0 260px, herdado da regra acima, precisa ser anulado aqui: aquele
   260px é a largura no sentido HORIZONTAL da fileira. Quando a fileira
   deita (column), o mesmo eixo principal passa a ser vertical, e o mesmo
   número viraria ALTURA fixa de 260px pro card, não largura.

   .produto--fixo.produto, e não só .produto--fixo, no seletor de
   flex-direction: a regra base ".produto{ flex-direction:column }" (mais
   abaixo no arquivo) tem a MESMA especificidade de ".produto--fixo" sozinho,
   uma classe cada, e como vem depois no arquivo ela venceria por ordem de
   fonte, mesmo dentro do media query. O composto sobe a especificidade e
   garante que o card fixo deita de verdade no celular. */
@media(max-width:767px){
  .produtos-linha{ flex-direction:column; }
  .produto--fixo{
    flex:0 0 auto;
    width:100%;
  }
  .produto--fixo.produto{
    flex-direction:row;
    align-items:stretch;
  }
  /* O respiro era simetrico (16px nos quatro lados), e o selo "EM BREVE" e
     posicionado por cima da foto (top:12px, absolute). Numa faixa baixa a
     imagem ocupa quase toda a altura e sobe ate encostar no selo. A mesma
     ideia do card vertical (mais respiro em cima, pra abrir a faixa do
     selo) resolve aqui, so que escalada pro tamanho menor: o selo mede
     ~22px de altura, entao 34px de respiro no topo deixa a imagem descer e
     nao tocar nele. Tambem encolhi a coluna da foto de 118 pra 100px, pra
     sobrar largura pro botao ao lado, que e o proximo problema. */
  .produto--fixo .produto__foto{
    flex:0 0 100px;
    padding:42px 10px 10px;
  }
  /* O selo "EM BREVE" no tamanho normal (padding 5px/11px, fonte 11px) foi
     desenhado pro card vertical, onde ele tem uma foto larga inteira pra
     pousar em cima. Nesta faixa de 100px de largura ele ocupa quase a
     coluna toda e chama mais atenção que o próprio aparelho. Encolhido só
     aqui: ainda lê "EM BREVE" com folga, só para de competir com a foto. */
  .produto--fixo .produto__tag{
    left:8px; top:8px;
    padding:3px 8px;
    font-size:9px;
  }
  .produto--fixo .produto__corpo{
    justify-content:center;
    padding:14px 14px 14px 4px;
  }
  /* A pilula ja nasce ancorada no rodape via margin-top:auto, herdado de
     .produto__btn. Numa faixa baixa e larga isso sobra espaco embaixo do
     texto; aqui ela some e o botao fica logo depois do nome, como o resto
     do bloco.

     "Entrar na lista de espera" no tamanho normal da pilula (13.5px, 18px
     de respiro lateral, seta de 14px) nao cabe na largura que sobra depois
     da foto e quebra em duas linhas. Encolhido so aqui: fonte, respiro e
     seta menores, e nowrap pra garantir que nao volte a quebrar se o texto
     mudar de novo no futuro. */
  .produto--fixo .produto__btn--espera{
    margin-top:8px;
    padding:9px 12px;
    font-size:12px;
    gap:5px;
    white-space:nowrap;
  }
  .produto--fixo .produto__btn--espera svg{ width:11px; height:11px; }
}

.produtos{
  display:flex; gap:16px;
  flex:0 0 auto;
  animation:esteiraProdutos 48s linear infinite;
}

/* Grade parada do catalogo e do bloco "Da mesma marca".
   NAO reaproveitar .produtos aqui: aquilo e o trilho da esteira da home, vem
   com display:flex mais animacao infinita, e so e seguro dentro de
   .produtos-esteira, que tem overflow:hidden segurando a correia. Usado solto,
   o catalogo inteiro deslizava e a pagina rolava para o lado: medi 1992px de
   largura numa tela de 375. */
/* Contagem de coluna fixa, nao auto-fill.
   Com auto-fill o card crescia de 150px ate 154px por toda a faixa de celular
   e, em 768px exatos, saltava para 350px, mais que o dobro, voltando a 244px em
   820px. O motivo: a partir de 768 o minimo passava a 232px, e 232 so cabe duas
   vezes numa area de 720px. 768 e a largura do iPad em pe, das mais comuns que
   existem, e era justo ali que o catalogo ficava com cara de duas caixas
   gigantes. Medido em iframe, largura por largura.
   Fixando a contagem, a progressao fica 150, 165, 185, 212, 226, 244, 271, 312,
   233, 253: sobe e desce um degrau, nunca dobra. */
.grade-produtos{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
/* A grade responde a PROPRIA largura, e nao a da janela.
   Ela vive dentro da coluna de conteudo, que perde 304px para a coluna de
   filtro a partir de 900px. Medindo pela janela, os breakpoints erravam: em
   1280px o CSS mandava cinco colunas e a area real era de 768px, o que dava
   card de 141px. */
@container listagem (min-width:430px){
  .grade-produtos{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@container listagem (min-width:700px){
  .grade-produtos{ gap:20px; }
}
/* Quatro colunas so em tela larga de verdade, quando a area passa de 1000px.
   Os quatro varejos estudados ficam em tres com o filtro aberto, e o motivo e
   o mesmo: com centenas de itens o cliente precisa reduzir, nao ver mais. */
@container listagem (min-width:1000px){
  .grade-produtos{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}

/* A grade so muda de coluna dentro de um container chamado "listagem", e esse
   nome nasceu no catalogo. Na ficha de produto ele nao existia, entao NENHUMA
   das regras acima casava e a grade ficava presa nas duas colunas do celular:
   dois cards do tamanho de um monitor, um embaixo do outro em vez de lado a
   lado. Declarar o container aqui e o que faz a mesma grade responder tambem
   na ficha, sem duplicar breakpoint. */
.grade-relacionados{ container:listagem / inline-size; }

/* A largura fixa do card so vale dentro da esteira. Na grade ele acompanha
   a coluna. */
.grade-produtos .produto{ flex:none; width:auto; }
.produtos-esteira:hover .produtos,
.produtos-esteira.pausada .produtos{ animation-play-state:paused; }

@keyframes esteiraProdutos{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-100% - 16px)); }
}

.produtos .produto{ flex:0 0 232px; }
@media(min-width:768px){ .produtos .produto{ flex:0 0 258px; } }

/* Sem movimento, a esteira vira rolagem lateral no controle da pessoa. */
@media(prefers-reduced-motion:reduce){
  .produtos{ animation:none; }
  .produtos-esteira{ overflow-x:auto; scroll-snap-type:x mandatory; }
  .produtos-esteira > .produtos[aria-hidden]{ display:none; }
  .produtos .produto{ scroll-snap-align:start; }
}

/* O card inteiro é o link, não só o rótulo no rodapé dele. Antes o card era
   um <article> sem nenhuma âncora: parecia clicável, tinha até um botão
   desenhado, e não levava a lugar nenhum. */
.produto{
  display:flex; flex-direction:column;
  background:var(--branco);
  border:1px solid var(--cinza-borda);
  border-radius:var(--raio);
  overflow:hidden;
  color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.produto:hover{ transform:translateY(-4px); box-shadow:var(--sombra-2); border-color:#D5D8DE; }
.produto:focus-visible{ outline:3px solid var(--amarelo); outline-offset:3px; }

/* O respiro de cima é maior que o dos outros lados de propósito: é a faixa
   da etiqueta. Sem ela a etiqueta pousa em cima do aparelho, e não adianta
   só mandar a etiqueta para trás, porque aí o aparelho é que cobre ela.
   Com a faixa, as duas coisas convivem sem disputa. */
.produto__foto{
  position:relative;
  background:var(--cinza-claro);
  padding:46px 20px 20px;
  overflow:hidden;
}
.produto__foto img{
  width:100%; aspect-ratio:1/1; object-fit:contain;
  object-position:var(--pos-foto, center);
}
/* O PS5 não está centrado dentro do próprio arquivo: sobram 80px de vazio à
   esquerda e 55px à direita, o que joga o console 2,9% para o lado.
   object-fit centraliza o quadro, não o conteúdo dele, então a correção é
   pela posição. Os outros oito estão dentro de 0,5% e não precisam. */
.produto[data-produto="playstation-5-digital"] img{ --pos-foto:44% center; }

/* Calibragem de escala por produto. As fotos vieram de fontes diferentes e
   cada uma tem uma sobra de fundo própria: medido em canvas, o iPhone 18
   ocupava 99% do quadro e o iPhone 17 ocupava 80%, então lado a lado dois
   aparelhos do mesmo tamanho pareciam de tamanhos diferentes. Os fatores
   abaixo levam todos para os mesmos 88% de ocupação. */
.produto__foto img{ transform:scale(var(--escala-foto, 1)); }
/* O iPhone 18 fica de fora da normalização de propósito: ele é o destaque
   da fileira, então pode e deve ocupar mais quadro que os outros. */
/* Escala foto a foto. O critério não é "todos do mesmo tamanho", é o
   tamanho relativo bater com o do mundo real, ancorado nos iPhones.
   Normalizar tudo pela mesma altura fazia um estojo de AirPods ficar mais
   alto que um iPhone, o que o olho lê como erro na hora.
   Medido no navegador: altura renderizada de cada produto dentro do card.
   Atencao ao medir: transform:scale() ja entra no getBoundingClientRect,
   entao a medida do elemento JA inclui a escala. Multiplicar de novo aplica
   o fator ao quadrado e a conta sai errada. */
.produto[data-produto="iphone-17-pro-max"]      { --escala-foto:.99; }  /* âncora */
.produto[data-produto="iphone-17"]              { --escala-foto:.98; }  /* igual ao Pro Max */
.produto[data-produto="iphone-18-pro-max"]      { --escala-foto:.95; }  /* destaque, card maior */
.produto[data-produto="xiaomi-redmi-note-13-pro"]{ --escala-foto:.86; }
.produto[data-produto="playstation-5-digital"]  { --escala-foto:.97; }
.produto[data-produto="airpods-pro-3"]          { --escala-foto:.83; }  /* objeto pequeno */
.produto[data-produto="tv-lg-oled-c5-55"]       { --escala-foto:.93; }
.produto[data-produto="jbl-boombox-4"]          { --escala-foto:.93; }
.produto[data-produto="macbook-air-m5-13"]      { --escala-foto:1.06; }
/* Poco X8 Pro 12/512GB: a única foto oficial disponível é um render de
   GRUPO (as três cores juntas, ver nota em dados/produtos.json), não de um
   aparelho sozinho. Medido em canvas: o conteúdo real ocupa só 44% da
   altura do quadro, contra 82% do iPhone 17 Pro Max, porque o grupo vem
   centralizado numa tela quadrada grande. Escala calibrada para os mesmos
   82% de altura dos demais aparelhos. */
.produto:has(img[src="/img/catalogo/poco-x8-pro-12-512gb.webp"]) { --escala-foto:1.85; }
/* Note 15 4G 8/256GB: mesmo problema do Poco X8 Pro acima, a foto oficial
   vem com o aparelho pequeno no meio de um quadro grande. Medido em canvas:
   43% de altura, contra 82% do iPhone 17 Pro Max. */
.produto:has(img[src="/img/catalogo/note-15-4g-8-256gb-preto.webp"]) { --escala-foto:1.89; }
/* Mesmo problema, mesma causa (fotos oficiais Xiaomi com muita sobra de
   fundo): medido em canvas contra os 82% de altura do iPhone 17 Pro Max. */
.produto:has(img[src="/img/catalogo/redmi-15c-4-128gb-azul-luar.webp"]) { --escala-foto:1.78; }
.produto:has(img[src="/img/catalogo/redmi-15c-8-256gb-azul-luar.webp"]) { --escala-foto:1.78; }
.produto:has(img[src="/img/catalogo/redmi-15-6-128gb-roxo-areia.webp"]) { --escala-foto:1.39; }
.produto:has(img[src="/img/catalogo/redmi-15-8-256gb-roxo-areia.webp"]) { --escala-foto:1.39; }
/* O z-index não é decorativo, é obrigatório aqui. A foto ganhou
   transform:scale() para a calibragem de tamanho, e elemento com transform
   passa a pintar no mesmo nível de um posicionado com z-index 0. Como a
   imagem vem depois da etiqueta no HTML, ela cobria a etiqueta. */
.produto__tag{
  position:absolute; left:12px; top:12px;
  z-index:2;
  padding:5px 11px;
  background:var(--amarelo); color:var(--preto);
  border-radius:var(--raio-btn);
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
/* "Em breve" não é promoção, é expectativa. Em preto ela se separa das
   etiquetas amarelas de lançamento sem inventar uma cor nova. A etiqueta da
   unidade que ainda vai abrir segue a mesma regra. */
/* Lacrado e FATO, nao promocao, entao nao usa o amarelo.
   Amarelo e enfase e nunca estrutura, e se Lacrado fosse amarelo ele brigaria
   com Lancamento pelo mesmo sinal, no mesmo canto da foto. Aqui e vidro claro
   sobre a foto: le sem gritar, e cai bem sobre produto claro ou escuro. */
.produto__tag--lacrado{
  background:var(--vidro-claro);
  border:1px solid var(--vidro-claro-borda);
  -webkit-backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
  backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
  color:var(--preto);
}

.produto__tag--breve{ background:var(--preto); color:var(--branco); }
/* ---------- card em destaque ----------
   Preto no meio de cards brancos, e mais largo que eles. Assim o destaque é
   uma decisão de layout, não uma foto que por acaso ficou maior. As fotos
   têm fundo transparente, então o aparelho pousa direto no escuro. */
.produto--breve{
  background:var(--preto);
  border-color:var(--preto);
  color:var(--branco);
}
.produtos .produto--breve{ flex:0 0 260px; }
@media(min-width:768px){ .produtos .produto--breve{ flex:0 0 306px; } }

.produto--breve .produto__foto{
  background:radial-gradient(120% 90% at 50% 10%, #2E2E2E, #171717 72%);
}
.produto--breve .produto__tag{ background:var(--amarelo); color:var(--preto); }
.produto--breve .produto__marca{ color:rgba(255,255,255,.55); }
.produto--breve .produto__nome{ color:var(--branco); }


/* Tres linhas, cada uma com um papel:
   marca, nome e os dois atributos comparaveis do departamento.
   Antes marca e nome dividiam a mesma linha, e em card estreito a marca
   empurrava o nome para baixo no meio da frase. Separadas, cada uma tem a
   propria altura travada e a fileira inteira alinha. */
.produto__corpo{
  display:flex; flex-direction:column; gap:3px;
  padding:14px 16px 18px;
  flex:1;
}
.produto__marca{
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--cinza-texto);
}
/* Duas linhas no maximo. Sem trava, "MacBook Pro M5 Pro 16 polegadas 24GB 1TB"
   ocupa quatro linhas e desalinha a fileira toda, que foi o defeito que a
   pesquisa achou no Fast Shop. */
.produto__nome{
  font-size:14.5px; font-weight:700; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.produto__atrib{
  margin:2px 0 0; font-size:12.5px; line-height:1.4; color:var(--cinza-texto);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
/* O ponto entre os dois atributos e separador, nao enfase: fica claro e sem
   italico, senao ele compete com o proprio dado. */
.produto__atrib i{ font-style:normal; color:var(--cinza-borda); padding-inline:2px; }
.produto__preco{
  margin-top:auto; padding-top:14px;
  font-size:20px; font-weight:800; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* O card inteiro já é o link, então o rodapé dele não precisa de um botão
   cheio. Nove pílulas iguais empilhadas viravam ruído e engordavam o card.
   Vira rótulo de texto com seta, que anda no hover.

   Essa frase já estava escrita aqui, mas o CSS nunca chegou a ser feito: o
   span nascia sem nenhuma regra, texto solto herdando o tamanho do corpo.
   Dois problemas que o Rian apontou vêm dessa mesma lacuna:

   1) SEM SUBLINHADO NO HOVER. "Ver produto" não parecia link nenhum, só
      texto cinza qualquer. Some no hover do CARD inteiro (não só do próprio
      texto), porque o card inteiro é a área clicável, e é assim que o resto
      do site já avisa "isto é clicável" nesse cenário.

   2) BORDA GRANDE EMBAIXO DO BOTÃO. .produto__corpo é flex:1, então ele
      estica até a altura do card mais alto da fileira (o card mais alto é
      quem decide a altura de todos, por causa do align-items:stretch padrão
      da fileira). Sem nada ancorando o rodapé, quem sobrava dessa esticada
      ficava como vão vazio DEPOIS do texto, e não puxando o texto pra baixo.
      margin-top:auto resolve exatamente como já resolve em .produto__preco,
      um pouco acima: o espaço sobrando vai pra CIMA do texto, empurrando ele
      pro rodapé do card, que é onde a pílula do "Entrar na lista de espera"
      também pousa. */
.produto__btn{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:auto; padding-top:14px;
  font-size:13px; font-weight:700;
  color:var(--preto);
  text-decoration:underline; text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:text-decoration-color .18s ease;
}
/* Reage ao hover/foco do CARD, não do próprio span: a área clicável é o
   card inteiro, então o convite pro clique precisa acender em qualquer
   ponto que o mouse passe, não só bem em cima dessas duas palavras. */
.produto:hover .produto__btn,
.produto:focus-visible .produto__btn{
  text-decoration-color:currentColor;
}

/* ---------- exceção: "Entrar na lista de espera" ----------
   Único card da fileira que quebra a regra acima de propósito. O Rian pediu
   um botão de verdade, que chame atenção e fique se mexendo para convidar o
   clique, porque este é o card que a loja mais quer empurrar (o lançamento
   ainda nem chegou). Os outros continuam rótulo de texto: usar a mesma
   pílula chamativa em nove cards ao mesmo tempo devolveria o ruído que o
   comentário acima já resolveu uma vez.

   O movimento é uma respiração, não um tremor: escala e sombra crescem e
   voltam devagar, em vez de sacudir. "Calma" é uma das quatro diretrizes de
   tom de voz da marca, e um botão histérico brigaria com isso mesmo sendo
   só CSS, sem palavra nenhuma. */
.produto__btn--espera{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:10px;
  padding:11px 18px;
  border-radius:var(--raio-btn);
  background:var(--amarelo);
  color:var(--preto);                 /* regra da marca: texto sobre amarelo é sempre preto */
  font-size:13.5px; font-weight:800;
  /* .produto__btn (base) agora nasce com sublinhado-fantasma pro hover do
     "Ver produto". Essa pílula tem hover próprio (sobe, clareia, a seta
     anda), então o sublinhado herdado só sujaria o texto por cima da cor
     de fundo nova. */
  text-decoration:none;
  box-shadow:var(--sombra-1);
  animation:esperaRespira 2.4s ease-in-out infinite;
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.produto__btn--espera svg{
  width:14px; height:14px; flex:none;
  transition:transform .18s ease;
}
/* No hover a respiração cede lugar ao mesmo gesto dos outros botões do
   site (levantar 2px). "animation-play-state:paused" NÃO bastava aqui: uma
   animação pausada continua sendo dona do transform, no quadro em que
   parou, e a declaração de hover abaixo nunca chegava a se aplicar, então
   o botão não subia. É "animation:none" que devolve a propriedade pra
   regra comum. */
.produto--fixo:hover .produto__btn--espera{
  animation:none;
  transform:translateY(-2px);
  background:var(--amarelo-claro);
  box-shadow:var(--sombra-2);
}
.produto--fixo:hover .produto__btn--espera svg{ transform:translateX(3px); }

@keyframes esperaRespira{
  0%, 100%{ transform:scale(1); box-shadow:var(--sombra-1); }
  50%{
    transform:scale(1.045);
    box-shadow:0 0 0 7px rgba(253,210,39,.30), var(--sombra-1);
  }
}
/* Quem pediu menos movimento na tela nao devia ganhar um botao pulsando.
   Fica so a pilula amarela, parada, chamando atencao pela cor, nao pelo
   movimento. */
@media(prefers-reduced-motion:reduce){
  .produto__btn--espera{ animation:none; }
}

.acao-final{ margin-top:40px; text-align:center; }

/* ---------- por que comprar aqui ---------- */
/* A foto ocupa uma coluna inteira e as seis razões preenchem as outras três,
   duas linhas de três. Por isso a grade vira quatro colunas aqui: com três,
   sobraria uma célula vazia. */
.motivos{
  display:grid; gap:1px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--raio);
  overflow:hidden;
}
@media(min-width:640px){ .motivos{ grid-template-columns:repeat(2,1fr); } }
/* A coluna da foto e mais larga de proposito. Ela ocupa duas fileiras, entao
   com quatro colunas iguais a celula fica 267x610, proporcao 0.44, enquanto o
   arquivo e 0.67. O object-fit:cover jogava fora 205px dos 600 de largura,
   102px de cada lado, e a caixa que o Thiago segura na mao esquerda comeca em
   x=67: era cortada inteira. Em 1.65fr a celula chega a ~379px, proporcao
   0.556, e a janela do cover abre para 501px, o suficiente para os 486px de
   conteudo. O padding lateral do card caiu de 26 para 22px no mesmo movimento:
   sem isso o card estreitava, o titulo quebrava em mais uma linha, a fileira
   crescia e o corte voltava. Com 22px a largura util do texto fica em 185px,
   igual a de antes.
   O ponto de virada subiu de 960 para 1040 pelo mesmo motivo: abaixo disso a
   coluna da foto encolhe demais e o corte volta. */
@media(min-width:1040px){ .motivos{ grid-template-columns:1.65fr repeat(3,1fr); } }

.motivos__foto{
  margin:0;
  position:relative;
  background:var(--preto);
  display:flex; flex-direction:column;
}
/* A foto preenche a celula inteira, porque a legenda fica por cima dela.
   O corte foi resolvido pela largura da coluna, nao pela proporcao da imagem.
   Medido no arquivo de 600x900: o conteudo util vai de x=67 a x=552, ou seja
   486px de largura. Para caber inteiro, a janela do cover precisa ter pelo
   menos esses 486, o que exige proporcao de celula >= 0.54. Em quatro colunas
   iguais a celula ficava 0.44 e a janela caia para 395px: as duas caixas na
   mao do Thiago eram fatiadas.
   O object-position em 60% e calculado, nao chutado: o conteudo esta centrado
   em x=310 e nao em 300, entao a janela precisa andar um pouco para a direita
   para sobrar margem igual dos dois lados. */
.motivos__foto img{
  width:100%; height:100%;
  min-height:220px;
  object-fit:cover;
  object-position:60% center;
}
/* Legenda sobre a foto, com a sombra subindo do rodape. Cai na altura das
   pernas, entao nao cobre nem o rosto nem as caixas. */
.motivos__foto figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:44px 22px 18px;
  font-size:14px;
  letter-spacing:-.01em;
  line-height:1.45;
  color:rgba(255,255,255,.82);
  background:linear-gradient(180deg, rgba(26,26,26,0), rgba(26,26,26,.90) 58%);
}
.motivos__foto figcaption strong{
  display:block;
  font-size:15px; font-weight:800;
  color:var(--branco);
}
/* Duas colunas ou quatro, a foto sempre ocupa UMA coluna e duas fileiras.
   Ela atravessava as duas colunas no tablet, e com a proporcao travada isso
   virava uma imagem de 930x1395: meia tela de rosto. Numa coluna so ela fica
   350x525, e as fileiras de cards se esticam para acompanhar.
     [foto ] [card]
     [foto ] [card]
     [card ] [card]
     [card ] [card]  */
/* No celular a foto vira paisagem. Em 2:3 ela ocupava 488px de uma tela de
   812, quase dois tercos, so para mostrar o corpo inteiro. Deitada em 4:3 ela
   cai para 244px e continua mostrando o que importa, o rosto e as duas caixas,
   porque o corte e vertical e a largura inteira permanece. */
@media(max-width:639.98px){
  .motivos__foto img{ aspect-ratio:4/3; object-position:center 26%; }
}
@media(min-width:640px){
  .motivos__foto{ grid-column:1; grid-row:span 2; }
}

/* Os cards ficam em cima do grafismo que gira nesta secao, e eram pretos
   chapados: escondiam exatamente aquilo que poderiam refratar. Em vidro, a
   marca girando aparece por dentro deles.
   O tom de 82 por cento e alto de proposito. Aqui e texto corrido, nao rotulo:
   com menos tinta o desenho de tras comeca a disputar com a leitura. Medido,
   o paragrafo continua acima de 7:1. */
.motivo{
  background:rgba(26,26,26,.82);
  padding:28px 22px 30px;
  backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-saturacao));
}
.motivos__foto{ background:rgba(26,26,26,.82); }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .motivo, .motivos__foto{ background:var(--preto); }
}
.motivo__icone{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-bottom:16px;
  background:var(--vidro-sobre-escuro);
  border:1px solid var(--vidro-sobre-escuro-borda);
  border-radius:12px;
  backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
}
.motivo__icone svg{ width:21px; height:21px; color:var(--amarelo); }
/* Titulo com altura de duas linhas mesmo quando so ocupa uma. Sem isso o
   paragrafo de "Nota fiscal sempre" comecava 23px acima do paragrafo dos
   vizinhos na mesma fileira, e numa grade com divisoria visivel o desalinho
   salta. */
.motivo h3{ margin-bottom:8px; min-height:2lh; }
.motivo p{ font-size:15px; color:rgba(255,255,255,.68); }

/* No celular o icone senta ao lado do titulo, e nao acima dele.
   Empilhado ele custava 60px por card, so para ocupar uma linha propria: nos
   seis dava 360px, quase meia tela.
   O min-height de duas linhas do titulo tambem sai aqui. Ele existe para os
   paragrafos alinharem entre cards vizinhos, e no celular os cards estao um
   embaixo do outro: nao ha vizinho para alinhar, so linha vazia. */
@media(max-width:639.98px){
  .motivo{
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:center;
    gap:0 12px;
    padding:20px 18px 22px;
  }
  .motivo__icone{
    grid-column:1; grid-row:1;
    width:38px; height:38px;
    margin-bottom:0;
  }
  .motivo__icone svg{ width:18px; height:18px; }
  .motivo h3{
    grid-column:2; grid-row:1;
    min-height:0;
    margin-bottom:0;
  }
  .motivo p{
    grid-column:1 / -1; grid-row:2;
    margin-top:12px;
  }
}

/* No desktop .motivos__lista e invisivel pro layout: display:contents tira
   a caixa dele do meio, e os seis .motivo continuam item direto do grid de
   .motivos, exatamente como se o wrapper no HTML nao existisse. */
.motivos__lista{ display:contents; }

/* ---------- por que aqui, no celular: vira faixa que desliza ----------
   O Rian apontou que "Por que aqui" virava um poço de texto no celular: seis
   cards empilhados, cada um com titulo e paragrafo, cerca de 900px de
   rolagem so nesta secao, sem nenhuma pausa visual. A pessoa descia o site
   e so via bloco de texto atras de bloco de texto.

   A troca e a mesma ideia da esteira de produtos da home: os seis cards
   deixam de empilhar e viram uma faixa horizontal, com uma fatia do proximo
   card espiando na borda como convite pra arrastar. A foto do Thiago
   continua sozinha, em cima, largura inteira: ela e a abertura da secao, e
   nao devia competir por espaco com os cards nem entrar na faixa.

   O box/borda/fundo que dava o efeito de "grade seamless" no desktop
   (.motivos com border+background+overflow:hidden, gap:1px como linha
   divisoria) so fazia sentido quando FOTO e CARDS moravam na mesma grade
   visual. Aqui os dois se separam, entao essa moldura sai e cada peca
   ganha o proprio cantinho arredondado. */
@media(max-width:639.98px){
  .motivos{
    background:none; border:none; border-radius:0; overflow:visible;
    gap:20px;
  }
  .motivos__foto{ border-radius:var(--raio); overflow:hidden; }
  .motivos__lista{
    display:flex;
    gap:12px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    /* Sangra ate a borda real da tela, do mesmo jeito que a esteira de
       produtos da home: o card cortado na ponta e o que avisa "tem mais". */
    margin-inline:calc(var(--respiro) * -1);
    padding:2px var(--respiro) 6px;
  }
  .motivo{
    flex:0 0 82%;
    scroll-snap-align:start;
    border-radius:var(--raio);
  }
}

/* ---------- quem somos ---------- */
.quem__grade{ display:grid; gap:40px; align-items:center; }
@media(min-width:960px){ .quem__grade{ grid-template-columns:1fr 1fr; gap:64px; } }
.quem__texto p + p{ margin-top:16px; }
/* Esta secao nao usa .cabecalho-secao, entao a regra de respiro entre h2 e
   lead nao pega aqui. Antes o espaco vinha de um style inline no HTML. */
.quem__historia{ margin-top:20px; }

/* No celular esta secao abria com TRES paragrafos de historia antes de
   qualquer imagem, porque no HTML o texto vem primeiro e abaixo de 960px a
   grade empilha na propria ordem do documento. Lia como parede de texto
   logo de cara. "order" no grid inverte so a ORDEM VISUAL, sem tocar no
   HTML nem no desktop (que ja mostra as duas colunas lado a lado e nao usa
   este seletor): a foto do Thiago vira a primeira coisa que aparece, texto
   vem depois dela, com uma pausa visual entre o titulo e o parágrafo. */
@media(max-width:959.98px){
  .quem__midia{ order:-1; }
  .quem__texto p + p{ margin-top:20px; }
}
/* Retrato do fundador com a loja encaixada dentro dele. A composição é o
   próprio argumento da seção: existe uma pessoa e existe um endereço.
   A foto menor fica encostada por dentro, nunca com deslocamento negativo,
   para não criar rolagem lateral no celular. */
.quem__midia{ position:relative; }
.quem__retrato{
  margin:0;
  border-radius:var(--raio);
  overflow:hidden;
  box-shadow:var(--sombra-2);
}
.quem__retrato img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 22%;
}
.quem__loja{
  margin:0;
  position:absolute;
  right:16px; bottom:16px;
  width:44%; max-width:230px;
  background:var(--branco);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 28px rgba(26,26,26,.28);
}
.quem__loja img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.quem__loja figcaption{
  padding:7px 10px 8px;
  font-size:10.5px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--cinza-texto);
  text-align:center;
}
@media(max-width:520px){
  .quem__loja{ width:52%; right:12px; bottom:12px; }
}
/* Link de texto dentro de paragrafo, escuro e sublinhado. Estava como style
   inline na assinatura do fundador. */
.link-forte{
  font-weight:700;
  color:var(--preto);
  text-decoration:underline;
  text-underline-offset:2px;
}
.link-forte:hover{ text-decoration-thickness:2px; }

.quem__assinatura{
  margin-top:28px; padding-top:24px;
  border-top:1px solid var(--cinza-borda);
  font-size:15px; color:var(--cinza-texto);
}

/* ---------- entrada do hero, no carregamento ----------
   O hero e a unica parte que anima sozinha, sem depender de rolagem: ele ja
   esta na tela quando a pagina abre.

   Os atrasos sao curtos de proposito por causa do LCP. Elemento com opacity 0
   nao conta como pintado para o Google, entao cada milissegundo de atraso no
   h1 vira milissegundo de LCP. Por isso o h1 sai quase junto com o selo, e
   quem espera mais e o que nao e medido: botoes e a janela do video.

   Usa .anima, aplicada no head antes da primeira pintura, e nao .js, que so
   entra no fim do body. Com .js o hero piscava: aparecia, sumia e entrava de
   novo. Sao dois gatilhos porque tem dois modos de falha diferentes: esta
   animacao e CSS puro e sempre termina visivel, enquanto a entrada por
   rolagem depende de um observador que pode nao existir. */
@keyframes heroEntra{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}
.anima .hero__selo,
.anima .hero h1,
.anima .hero__lead,
.anima .hero__acoes,
.anima .hero .janela{
  opacity:0;
  animation:heroEntra .38s cubic-bezier(.22,.61,.36,1) forwards;
}
.anima .hero__selo { animation-delay:0s; }
.anima .hero h1    { animation-delay:.04s; }
.anima .hero__lead { animation-delay:.09s; }
.anima .hero__acoes{ animation-delay:.14s; }
.anima .hero .janela{ animation-delay:.19s; }
@media(prefers-reduced-motion:reduce){
  .anima .hero__selo, .anima .hero h1, .anima .hero__lead,
  .anima .hero__acoes, .anima .hero .janela{ opacity:1; animation:none; }
}

/* ---------- entrada dos blocos ao rolar ----------
   Nada aqui esconde por conta propria. Quem esconde e o JavaScript, bloco a
   bloco, na mesma linha em que manda vigiar aquele bloco.

   A versao anterior fazia o contrario, o CSS escondia e o JS revelava, e as
   duas metades sairam de sincronia: o CSS escondia .revela-grupo e a busca do
   JS so pegava .revela. As quatro grades da pagina ficaram invisiveis. Com o
   JS escondendo, ficar escondido sem estar sendo vigiado deixa de ser
   possivel, porque e a mesma linha de codigo. */
.oculto,
.oculto-grupo > *{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .38s ease, transform .38s cubic-bezier(.22,.61,.36,1);
}
.oculto.dentro,
.oculto-grupo.dentro > *{ opacity:1; transform:none; }

/* O nome tem que ser o mesmo que o HTML usa. Estas regras ja se chamaram
   .atraso-2 e .atraso-3, sobra de uma versao anterior do sistema de entrada,
   e o HTML nunca foi renomeado junto: o escalonamento simplesmente nao
   acontecia, e os blocos irmaos entravam todos ao mesmo tempo. */
.oculto.revela--2{ transition-delay:.05s; }
.oculto.revela--3{ transition-delay:.10s; }

/* Grades entram escalonadas: o conjunto chega como um bloco so, e nao como
   pecas soltas. O passo trava no oitavo item, senao a grade de 12 marcas
   colocaria a ultima muito depois da primeira e viraria lentidao. */
.oculto-grupo.dentro > :nth-child(2){ transition-delay:.03s; }
.oculto-grupo.dentro > :nth-child(3){ transition-delay:.06s; }
.oculto-grupo.dentro > :nth-child(4){ transition-delay:.09s; }
.oculto-grupo.dentro > :nth-child(5){ transition-delay:.115s; }
.oculto-grupo.dentro > :nth-child(6){ transition-delay:.14s; }
.oculto-grupo.dentro > :nth-child(7){ transition-delay:.165s; }
.oculto-grupo.dentro > :nth-child(n+8){ transition-delay:.19s; }

@media(prefers-reduced-motion:reduce){
  .oculto, .oculto-grupo > *{ opacity:1; transform:none; transition:none; }
}

/* ---------- avaliações ---------- */
/* Selo de nota no cabeçalho, igual ao da landing page da pré-venda: a nota
   sozinha vale mais que a frase, porque é número de terceiro.
   A palavra Google vira a logo assim que o designer mandar o SVG. */
.nota-google{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin-top:18px;
  font-size:14.5px; color:var(--cinza-texto);
}
/* Digito de largura fixa. Sem isso o "1" e mais estreito que o "7" e o
   numero treme enquanto sobe. */
.conta{ font-variant-numeric:tabular-nums; }

.nota-google__n{
  font-size:17px; font-weight:800; letter-spacing:-.01em;
  color:var(--preto);
}
/* O ponto separador é decorativo: entra pelo CSS para o leitor de tela ler
   "4,9 de 5" e "mais de 17 mil avaliações" como duas informações, sem um
   caractere solto no meio. */
.nota-google__fonte::before{ content:"·"; margin-right:10px; color:var(--cinza-texto); opacity:.55; }
/* A palavra Google virou a marca de verdade. Fica alinhada pela base do texto
   e nao pelo meio, senao ela flutua acima da linha. O alt e "Google", entao
   quem usa leitor de tela continua ouvindo a frase inteira. */
/* Segura a preposicao junto da marca. Sem isso a linha quebrava entre "no" e
   a logo, e a marca aparecia sozinha na linha de baixo, orfa. */
.nao-quebra{ white-space:nowrap; }
.logo-google{
  /* O reset da folha poe display:block em toda img, o que jogava a marca para
     uma linha so dela e anulava o nowrap acima. Aqui ela precisa correr junto
     com o texto. */
  display:inline-block;
  /* 1.15em dava 17px de altura, pequeno demais: o desenho e cheio de curva
     fina e nesse tamanho ele parece serrilhado, mesmo sendo vetor. O arquivo
     esta certo, a 400px sai perfeitamente liso. O que faltava era tamanho. */
  height:1.5em; width:auto;
  vertical-align:-.28em;
  margin-left:2px;
}

/* Esteira das avaliações. Mesma técnica da esteira de produtos: duas listas
   idênticas e um deslocamento de exatamente uma lista mais o gap, o que faz
   o laço fechar sem emenda.
   Ela sai do container de propósito, para os cards atravessarem a tela em vez
   de pararem na margem do texto. */
.avaliacoes-esteira{
  display:flex; gap:16px;
  overflow:hidden;
  padding-inline:var(--respiro);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.avaliacoes{
  display:flex; gap:16px;
  flex:0 0 auto;
  animation:esteiraAvaliacoes 64s linear infinite;
}
/* Pausa no hover e no foco. Aqui não é firula: é texto para ler, e texto que
   anda embaixo do olho não se lê. O foco também pausa, senão quem navega por
   teclado perde de vista o card que acabou de focar. */
.avaliacoes-esteira:hover .avaliacoes,
.avaliacoes-esteira:focus-within .avaliacoes{ animation-play-state:paused; }

@keyframes esteiraAvaliacoes{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-100% - 16px)); }
}
/* Sem a animacao, os cards fora da tela ficariam inalcancaveis. A esteira
   vira rolagem lateral com encaixe, e a copia sai de cena. Mesmo tratamento
   das outras duas esteiras da pagina. */
@media(prefers-reduced-motion:reduce){
  .avaliacoes{ animation:none; }
  .avaliacoes-esteira{ overflow-x:auto; scroll-snap-type:x mandatory; }
  .avaliacoes-esteira > .avaliacoes[aria-hidden]{ display:none; }
  .avaliacoes .avaliacao{ scroll-snap-align:start; }
}

.avaliacao{
  display:flex; flex-direction:column; gap:14px;
  flex:0 0 320px; width:320px;
  padding:26px 24px 24px;
  background:var(--branco);
  border:1px solid var(--cinza-borda);
  border-radius:var(--raio);
}
.estrelas{ display:inline-flex; gap:3px; }
.estrelas svg{ width:16px; height:16px; fill:var(--amarelo-forte); }
.avaliacao p{ font-size:15px; line-height:1.6; color:var(--preto-suave); flex:1; }
.avaliacao__autor{ display:flex; align-items:center; gap:12px; }
.avaliacao__autor img{
  width:40px; height:40px; border-radius:50%; object-fit:cover; flex:none;
}
/* Nome e origem empilhados. Eram dois span inline dentro de outro span, sem
   display:block, entao corriam na mesma linha e quebravam onde desse: o nome
   longo virava duas linhas com a origem grudada no fim da primeira. */
.avaliacao__autor > span{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.avaliacao__nome{ display:block; font-size:14.5px; font-weight:700; line-height:1.3; }
.avaliacao__fonte{ display:block; font-size:12.5px; color:var(--cinza-texto); }

/* ---------- unidades ---------- */
/* Tres colunas, nao quatro: sao 9 unidades e 9 nao divide por 4, o que
   deixaria a ultima fileira com um card solto. Em tres, fecha 3x3. */
.unidades{
  display:grid; gap:16px;
  grid-template-columns:1fr;
}
@media(min-width:600px){ .unidades{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:960px){ .unidades{ grid-template-columns:repeat(3,1fr); gap:20px; } }

/* ---------- onde estamos, no celular: mesma faixa de "por que aqui" ----------
   Nove cards de loja empilhados e a terceira parede de texto/card que o
   Rian apontou (as outras duas foram "Por que aqui" e "Quem e a Thiago
   Imports", ja corrigidas ali em cima com a mesma ideia). Cada card tem
   foto, mas nove em coluna unica ainda e MUITO scroll so pra passar pela
   secao. Vira faixa horizontal aqui tambem, mesma receita: card cortado na
   borda como convite pra arrastar, sem precisar de wrapper novo no HTML
   porque .unidades ja so contem os proprios cards, nada mais. */
@media(max-width:599.98px){
  .unidades{
    display:flex;
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    margin-inline:calc(var(--respiro) * -1);
    padding:2px var(--respiro) 6px;
  }
  .unidade{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
}

.unidade{
  display:flex; flex-direction:column;
  background:var(--branco);
  border:1px solid var(--cinza-borda);
  border-radius:var(--raio);
  overflow:hidden;
  text-decoration:none; color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.unidade:hover{
  border-color:var(--amarelo);
  box-shadow:var(--sombra-1);
  transform:translateY(-3px);
}

.unidade__foto{
  position:relative;
  aspect-ratio:16/10;
  background:var(--cinza-claro);
  overflow:hidden;
}
.unidade__foto img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
a.unidade:hover .unidade__foto img{ transform:scale(1.04); }


/* A etiqueta pousa em cima da foto da loja, entao aqui tem conteudo de
   verdade para o vidro refratar. */
.unidade__tag{
  position:absolute; left:12px; top:12px; z-index:2;
  padding:5px 11px;
  color:var(--branco);
  border-radius:var(--raio-btn);
  font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}

.unidade__corpo{
  display:flex; flex-direction:column; gap:5px;
  padding:18px 18px 18px;
  flex:1;
}
.unidade__uf{
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--cinza-texto);
}
.unidade__nome{ font-size:16px; font-weight:700; line-height:1.3; }
.unidade__end{ font-size:13.5px; color:var(--cinza-texto); line-height:1.5; }

/* O link fica colado no rodape do card para todos os cards terminarem na
   mesma linha, mesmo com nome de uma ou duas linhas. */
.unidade__link{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:auto; padding-top:12px;
  font-size:13.5px; font-weight:700;
  color:var(--preto);
}
.unidade__link svg{ width:15px; height:15px; transition:transform .18s ease; }
a.unidade:hover .unidade__link{ color:var(--ambar-texto); }
a.unidade:hover .unidade__link svg{ transform:translateX(3px); }

/* No celular o card deita: foto a esquerda, texto a direita.
   Empilhado, cada card passava de 390px e os nove somavam 3.500px, um quarto
   da pagina inteira. Deitado cada um fica em torno de 110px. E o mesmo
   conteudo, so que na proporcao que a tela estreita pede. */
@media(max-width:599.98px){
  .unidades{ gap:10px; }
  .unidade{ flex-direction:row; align-items:stretch; }
  /* Altura fixa da foto, e nao do card: assim os nove ficam do mesmo tamanho
     mesmo com um tendo linha de detalhe e outro nao. Sem isso a coluna
     alternava entre 95 e 136px e parecia desalinhada. */
  .unidade{ min-height:112px; }
  .unidade__foto{
    flex:0 0 116px;
    aspect-ratio:auto;
    align-self:stretch;
  }
  .unidade__foto img{ height:100%; }
  .unidade__tag{
    left:6px; top:6px;
    padding:3px 7px;
    font-size:9px; letter-spacing:.03em;
  }
  .unidade__corpo{ padding:12px 14px; gap:3px; justify-content:center; }
  .unidade__nome{ font-size:15px; }
  .unidade__end{ font-size:12.5px; }
  .unidade__link{ padding-top:6px; font-size:12.5px; }
  .unidade__link svg{ width:13px; height:13px; }
}

/* A unidade que ainda vai abrir nao e link: nao existe endereco nem pagina
   para mostrar. Fica visivelmente mais discreta que as que ja funcionam. */
.unidade--breve{ background:var(--cinza-claro); }
/* ---------- assistência ----------
   A secao era uma caixa escura com texto de um lado e quatro tiques do outro.
   Servia para qualquer coisa: newsletter, consultoria, plano de assinatura.
   Nada ali dizia conserto de aparelho, e o proprio texto prometia tres etapas
   que a secao nunca mostrava.
   Agora ela mostra: a fachada do laboratorio, o passo a passo numerado e os tres
   numeros que respondem o que quem quebrou o aparelho pergunta primeiro. */
.assistencia{
  padding:40px 24px;
  background:var(--preto); color:var(--branco);
  border-radius:calc(var(--raio) * 1.5);
}
@media(min-width:768px){ .assistencia{ padding:52px 44px; } }

/* O bloco e escuro mas mora dentro de uma secao clara, entao precisa
   redeclarar as cores. Sem isto o rotulo e o lead herdam o cinza da secao
   clara e caem para 2,7:1 sobre o preto. */
.assistencia .rotulo{ color:var(--amarelo); }
.assistencia .lead{ color:rgba(255,255,255,.72); margin-top:12px; max-width:56ch; }
.assistencia h2{ margin-bottom:0; }
.assistencia__topo{ margin-bottom:32px; }

.assistencia__grade{ display:grid; gap:28px; }
@media(min-width:900px){
  .assistencia__grade{ grid-template-columns:minmax(280px,.85fr) 1.15fr; gap:40px; align-items:start; }
}

/* A foto e a prova de que o laboratorio existe: a fachada tem "assistencia
   tecnica especializada" escrito nela e o numero da loja. */
.assistencia__foto{
  margin:0;
  border-radius:var(--raio);
  overflow:hidden;
  background:#000;
}
.assistencia__foto img{
  width:100%; display:block;
  aspect-ratio:4/3; object-fit:cover;
}
.assistencia__foto figcaption{
  padding:14px 16px 16px;
  font-size:13px; line-height:1.5;
  color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.05);
}
.assistencia__foto figcaption strong{
  display:block;
  font-size:14.5px; font-weight:800;
  color:var(--branco);
}

/* Passo a passo numerado. E o que faz a secao ler como servico e nao como
   anuncio: responde o que acontece com o aparelho, na ordem.

   A linha vertical ligando os quatro circulos e o toque que faltava: sem
   ela os passos liam como quatro itens soltos, um do lado do outro, em vez
   de UM caminho com quatro paradas. E um pseudo-elemento no proprio <ol>,
   nao em cada <li>: assim ela e uma linha continua atras de tudo, e nao
   quatro tracinhos que podem desalinhar se o texto de um passo quebrar em
   mais linhas que o vizinho. top/bottom:15px porque o circulo tem 30px de
   diametro, entao o centro dele fica exatamente a 15px da borda do <ol>. */
.assistencia__passos{
  list-style:none; margin:0; padding:0;
  display:grid; gap:20px;
  position:relative;
}
.assistencia__passos::before{
  content:'';
  position:absolute; left:15px; top:15px; bottom:15px;
  width:1px;
  background:rgba(255,255,255,.16);
}
.passo{ display:flex; align-items:flex-start; gap:14px; position:relative; }
.passo__n{
  flex:none;
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  border-radius:50%;
  background:var(--amarelo); color:var(--preto);
  font-size:14px; font-weight:800;
  font-variant-numeric:tabular-nums;
  /* Acima da linha na pintura: o circulo e o segmento que passa por tras
     dele nao podem disputar quem aparece por cima. position:relative sem
     z-index já bastaria (elemento posicionado pinta depois do ::before do
     pai), mas deixo explícito porque é o tipo de detalhe que quem mexer
     aqui depois vai querer conferir, não adivinhar. */
  z-index:1;
}
.passo__t{ font-size:16.5px; font-weight:700; line-height:1.3; margin-bottom:4px; }
.passo__d{ font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.68); }

/* Os tres numeros respondem, nessa ordem, as tres perguntas de quem acabou de
   quebrar o aparelho: quanto custa para descobrir o problema, o que acontece
   se o reparo falhar, e onde deixar.
   Regra do bloco: o rotulo tem que CONTINUAR o numero, formando uma frase
   quando lido de cima para baixo. "R$ 0 diagnostico e orcamento" nao fechava
   frase nenhuma e ainda repetia o jargao do passo 3. */
.assistencia__numeros{
  list-style:none; margin:36px 0 0; padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid; gap:20px;
}
@media(min-width:600px){ .assistencia__numeros{ grid-template-columns:repeat(3,1fr); gap:24px; } }
.assistencia__numeros li{ display:flex; flex-direction:column; gap:3px; }
.assistencia__n{
  font-size:24px; font-weight:800; letter-spacing:-.02em;
  color:var(--amarelo);
}
.assistencia__l{ font-size:13.5px; line-height:1.45; color:rgba(255,255,255,.68); }

.assistencia__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* ATUALIZADO em 24/08/2026: o Rian pediu de volta o preto, letra e balão do
   WhatsApp, igual aos outros botões amarelos do site.
   Historico, pra quem chegar aqui depois: entre 14/08 e hoje este botao
   ficou branco sobre amarelo por decisao consciente dele (contraste 1,46:1,
   contra 11,95:1 do preto), contrariando de proposito a regra do design
   system. A regra antiga dizia "nao tire de novo por conta propria,
   pergunte": isto aqui e essa pergunta sendo respondida por ele mesmo, em
   conversa, nao um reverto por conta propria. Sem override nenhum agora,
   este botao volta a herdar o preto direto de .btn--principal, que já é a
   regra da marca (texto sobre amarelo é sempre preto) e é o que os outros
   dois botões amarelos da página (catálogo no hero, endereços nas unidades)
   sempre usaram. */

/* ---------- rodapé ---------- */
/* O botão flutuante do WhatsApp fica sobre o canto inferior direito, então o
   rodapé precisa de folga extra para a última linha não sumir por baixo dele.
   A folga estava só até 520px, mas é acima dessa largura que a pílula fica
   mais larga, com o texto "Falar com a loja" ao lado do ícone: medido em
   1280x800, ela cobria a linha "Imagens meramente ilustrativas". Por isso a
   folga agora vale em qualquer largura. */
.rodape{ background:var(--preto); color:var(--branco); padding-block:64px 96px; }
.rodape__grade{ display:grid; gap:40px; }
@media(min-width:768px){ .rodape__grade{ grid-template-columns:1.5fr repeat(3,minmax(0,1fr)); gap:48px; } }
.rodape__logo img{ width:150px; margin-bottom:20px; }
.rodape__sobre{ font-size:14.5px; color:rgba(255,255,255,.68); max-width:38ch; }
.rodape__redes{ display:flex; gap:10px; margin-top:20px; }
.rodape__redes a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background:var(--vidro-sobre-escuro);
  border:1px solid var(--vidro-sobre-escuro-borda);
  border-radius:50%;
  /* Usavam a cor do vidro e nenhum desfoque: pareciam vidro sem refratar nada.
     O rodape tem o grafismo atras, entao agora eles refratam de verdade. */
  backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur-sutil)) saturate(var(--vidro-saturacao));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  transition:background-color .18s ease;
}
.rodape__redes a:hover{ background:var(--amarelo); color:var(--preto); }
.rodape__redes svg{ width:18px; height:18px; }

.rodape h3{
  font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--amarelo); margin-bottom:16px;
}
.rodape ul{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.rodape ul a{ display:inline-block; font-size:14.5px; color:rgba(255,255,255,.72); }
.rodape ul a:hover{ color:var(--branco); }

/* No celular o link do rodapé precisa ser alvo de dedo, não de mouse.
   Só o texto dá 18px de altura, menos da metade do mínimo confortável. */
@media(max-width:767.98px){
  /* Duas colunas de link, e nao uma fila de 17. Empilhados eles somavam 833px,
     quase metade do rodape, com a coluna direita vazia o tempo todo.
     O respiro caiu de 13 para 11px: o alvo continua em 45px, bem acima dos
     24px minimos, e ainda economiza altura. */
  .rodape ul{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px 16px; }
  .rodape ul a{ padding-block:11px; }
}

.rodape__legal{
  margin-top:36px; padding-top:28px;
  border-top:1px solid rgba(255,255,255,.14);
  display:flex; flex-direction:column; gap:16px;
  font-size:13px; color:rgba(255,255,255,.55);
  line-height:1.6;
}
@media(min-width:768px){
  .rodape__legal{ flex-direction:row; justify-content:space-between; align-items:flex-end; gap:32px; }
}

/* O versiculo estava solto no meio, em italico apagado, com a referencia
   grudada no fim da frase como se fosse parte dela. Numa empresa que se
   descreve construida sobre principios e fe, ele nao e sobra de espaco.
   Agora tem regra propria em cima, aspas de verdade e a referencia separada,
   e faz a passagem das colunas para o bloco legal. */
.rodape__versiculo{
  margin:44px auto 0;
  padding-top:32px;
  max-width:52ch;
  border-top:1px solid rgba(255,255,255,.14);
  text-align:center;
}
.rodape__versiculo p{
  font-size:15.5px; font-style:italic; line-height:1.6;
  color:rgba(255,255,255,.72);
}
/* As aspas entram pelo CSS: assim elas nao viram texto para o leitor de tela
   nem atrapalham quem for copiar a frase. */
.rodape__versiculo p::before{ content:"\201C"; }
.rodape__versiculo p::after{ content:"\201D"; }
.rodape__versiculo cite{
  display:block; margin-top:8px;
  font-size:12.5px; font-style:normal; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--amarelo);
}

/* Marca visualmente o que ainda precisa ser confirmado pelo Rian.
   Some do site quando a classe for removida. */
.conferir{
  background:rgba(253,210,39,.22);
  border-bottom:2px dotted var(--amarelo-forte);
  border-radius:3px;
  padding:0 3px;
}
/* Sobre fundo escuro o marcador fica discreto, para não sujar o contraste
   do texto que ele está apenas sinalizando. */
.secao--escura .conferir,
.prova .conferir,
.assistencia .conferir,
.rodape .conferir{
  background:rgba(253,210,39,.12);
  border-bottom-color:var(--amarelo);
}

/* ---------- botão flutuante do WhatsApp ---------- */
/* Botão flutuante do WhatsApp.
   Fundo verde com o logo em preto era o pior dos mundos: as cores do
   WhatsApp com o logo na cor errada, o que o olho lê como defeito. Branco
   sobre o verde também não serve, dá 1,98:1 e reprova.
   Solução: a pílula é preta (cor estrutural da marca, funciona sobre seção
   clara e escura), o texto é branco (16:1) e o logo fica no verde oficial
   do WhatsApp, que é o que dá o reconhecimento imediato. */
.zap-flutuante{
  /* env() para o botao nao pousar dentro da faixa do indicador de inicio do
     iPhone, que reserva 34px. Regra da casa: todo position:fixed encostado no
     rodape usa safe-area-inset-bottom. */
  position:fixed; right:20px; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); z-index:90;
  display:inline-flex; align-items:center; gap:10px;
  /* Numa pílula o raio é metade da altura (aqui 26px). Ícone a 15px da borda
     cai dentro da curva e parece que vai escapar. O respiro da esquerda
     precisa acompanhar o raio. */
  padding:13px 24px 13px 22px;
  /* Vidro aqui e o caso mais forte da pagina: ele fica fixo na tela e a home
     inteira passa por baixo dele enquanto a pessoa rola. */
  color:var(--branco);
  border-radius:var(--raio-btn);
  font-size:14.5px; font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease;
}
.zap-flutuante:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(26,26,26,.34); }
.zap-flutuante svg{ width:24px; height:24px; flex:none; color:var(--whatsapp); }
@media(max-width:520px){
  .zap-flutuante{ right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); padding:13px; }
  .zap-flutuante span{ display:none; }
  .zap-flutuante svg{ width:26px; height:26px; }
}

/* ==========================================================================
   Catálogo e ficha de produto
   Estas páginas são geradas por gerar.mjs a partir de dados/produtos.json.
   ========================================================================== */

/* A primeira seção destas páginas reserva o espaço da cápsula flutuante,
   igual à home. */
.produto-topo{ padding-top:calc(var(--topo-espaco) + 24px); }
@media(min-width:768px){ .produto-topo{ padding-top:calc(var(--topo-espaco) + 40px); } }


.ficha{ display:grid; gap:32px; align-items:start; }
@media(min-width:860px){ .ficha{ grid-template-columns:1fr 1fr; gap:56px; } }

.ficha__foto{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:28px;
  background:var(--cinza-claro);
  border:1px solid var(--cinza-borda);
  border-radius:calc(var(--raio) * 1.5);
}
@media(min-width:860px){ .ficha__foto{ padding:36px; } }
/* Enquanto a ficha e de uma coluna so, o quadro nao pode esticar com ela: a
   720px de largura no tablet, sobrava um retangulo cinza com um celular de
   500px no meio, 69% de ocupacao. Preso em 520 e centralizado, a moldura
   volta a ser moldura. */
@media(max-width:859px){ .ficha__foto{ max-width:520px; margin-inline:auto; } }
/* Era 420px de produto dentro de 508px de quadro: 82% de ocupacao, com muito
   cinza sobrando em volta do unico elemento que a pessoa veio ver. */
.ficha__foto img{ width:100%; max-width:500px; aspect-ratio:1/1; object-fit:contain; }

.ficha__marca{
  display:block; margin-bottom:10px;
  font-size:12px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--cinza-texto);
}
.ficha__resumo h1{ margin-bottom:14px; }
/* Teto de medida de leitura, em EM e nao em CH.
   A unidade ch mede a largura do digito zero, e no Inter o zero e tabular,
   28% mais largo que a letra media do texto corrido. Medi: a 19px, 1ch da
   11,99px e o caractere medio de uma frase em portugues da 9,33px. Ou seja,
   "max-width:60ch" nao entrega 60 caracteres, entrega 77, e foi por isso que
   o resumo continuou com 719px no tablet mesmo com o teto aplicado.
   32em da os 65 caracteres da regua da marca, e vale nos dois tamanhos de
   fonte do lead porque em acompanha a fonte. */
.ficha__resumo .lead{ margin-bottom:26px; max-width:32em; }

/* Tres fatos de tres palavras nao pedem tabela com borda, linha divisoria e
   14px de respiro em cada celula. Isso dava a Condicao, Garantia e Nota fiscal
   o peso visual de um bloco de conteudo, competindo com o botao logo abaixo.
   Agora sao etiquetas: mesma informacao, um terco da altura, e o CTA volta a
   ser o elemento mais forte da coluna. */
.ficha__selos{
  display:flex; flex-wrap:wrap; gap:8px;
  list-style:none; margin:0 0 26px; padding:0;
}
.ficha__selos li{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:7px 14px;
  background:var(--cinza-claro);
  border:1px solid var(--cinza-borda);
  border-radius:9999px;
  font-size:14px; color:var(--preto);
}
.ficha__selos strong{
  font-size:11px; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase;
  color:var(--cinza-texto);
}
.ficha__selos a{ color:var(--preto); border-bottom:1px solid var(--amarelo); }
.ficha__selos a:hover{ border-bottom-color:var(--preto); }

.ficha__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
@media(max-width:640px){
  .ficha__acoes{ display:grid; grid-template-columns:1fr; max-width:420px; }
  .ficha__acoes .btn{ width:100%; }
}
.ficha__aviso{ font-size:14px; line-height:1.6; color:var(--cinza-texto); max-width:52ch; }

/* ---------- ficha técnica ---------- */
/* Uma tabela corrida, e nao cartoes por grupo.
   Em cartao, grupo de um item so fica ridiculo: "Desempenho" em caixa alta,
   com borda e 24px de respiro, para dizer "Chip: A19 Pro". So no 17 Pro Max
   eram tres grupos assim, e o titulo pesava mais que o dado. Em duas colunas
   de cartao o estrago dobrava, porque sobrava caixa vazia do lado.
   Corrida, a mesma ficha serve para grupo de um item e para grupo de dez: o
   nome do grupo vira divisa entre trechos, e nao moldura em volta de nada. */
/* Cabecalho a esquerda, tabela a direita.
   Antes a ficha era uma coluna de 760px dentro de um container de 1120, com
   360px de vazio a direita em toda a altura da tabela. Agora a largura sobrando
   passa a ser onde mora o titulo da secao, e a pagina para de parecer torta.
   O titulo gruda no alto enquanto a tabela rola: em ficha longa, a pessoa
   continua sabendo o que esta lendo. */
.ficha-tecnica{ display:grid; gap:32px; }
@media(min-width:900px){
  .ficha-tecnica{ grid-template-columns:300px minmax(0,1fr); gap:64px; align-items:start; }
  .ficha-tecnica .cabecalho-secao{ position:sticky; top:110px; margin-bottom:0; }
}
.ficha__specs{ max-width:760px; }
.especificacoes__bloco + .especificacoes__bloco{ margin-top:34px; }
.especificacoes__bloco h3{
  margin-bottom:4px;
  font-size:12px; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--cinza-texto);
}
.especificacoes__bloco dl{ margin:0; }
/* O Rian mandou print de linha "sobressaindo outra": "Recarga rápida" quebrando
   em "Recarga" / "rápida" e "NFC e Thread" quebrando palavra por palavra,
   espremidos contra a coluna do valor.
   A causa: a coluna do ROTULO (dt) era minmax(0,1fr) e a do VALOR (dd) era
   minmax(0,auto). 'auto' cresce ate o max-content do texto, e como o grid da
   prioridade a faixa nao-flexivel antes de sobrar espaco pro fr, um valor
   longo tipo "50% em 20 minutos com adaptador de 40W" tomava a largura que
   quisesse e empurrava o rotulo pra quase zero. Cada linha e o proprio grid
   (dl > div, nao dl), entao isso variava linha a linha, e piorava exatamente
   nas linhas de valor mais comprido.
   A troca: o ROTULO ganha piso (nunca fica menor que 96px, cabe "Banda
   ultralarga" numa linha) e teto (nunca passa de 40%, um rotulo excepcional
   de 40 caracteres nao consome a coluna toda). O VALOR fica com 1fr e quebra
   livre, que e o comportamento que ja funcionava bem sozinho. */
.especificacoes__bloco dl > div{
  display:grid; grid-template-columns:minmax(96px,40%) minmax(0,1fr); gap:24px;
  align-items:baseline;
  padding:13px 0;
  border-bottom:1px solid var(--cinza-borda);
}
.especificacoes__bloco dt{ font-size:15px; color:var(--cinza-texto); }
.especificacoes__bloco dd{
  margin:0; text-align:right;
  font-size:15px; font-weight:600; color:var(--preto);
  font-variant-numeric:tabular-nums;
}

/* Prova de procedencia na propria ficha. O argumento da marca e que o aparelho
   e original, tem nota e tem quem consertar, e ate aqui a pagina de produto nao
   dizia nada disso: quem entrava direto num produto pelo Google nao via.
   Fica depois do CTA, em texto pequeno, porque e apoio e nao chamada. */
.procedencia{
  display:grid; gap:11px;
  grid-template-columns:1fr;
  list-style:none; margin:24px 0 0; padding:20px 0 0;
  border-top:1px solid var(--cinza-borda);
}
@media(min-width:520px){ .procedencia{ grid-template-columns:1fr 1fr; gap:11px 20px; } }
.procedencia li{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--cinza-texto);
}
.procedencia svg{ width:17px; height:17px; flex:0 0 auto; color:var(--preto); }
.procedencia a{ color:var(--cinza-texto); border-bottom:1px solid var(--cinza-borda); }
.procedencia a:hover{ color:var(--preto); border-bottom-color:var(--amarelo); }

/* Seletor de cor, no alto da ficha e nao la embaixo: cor e decisao de compra,
   nao especificacao.

   O nome fica num rotulo unico que troca ao escolher, e nao ao lado de cada
   bolinha. Numa coluna estreita, cinco nomes lado a lado quebram em duas
   linhas e viram lista; um rotulo so mantem a linha e ainda diz em voz alta
   qual esta escolhida.

   A bolinha usa sombra interna translucida em vez de borda solida, senao cor
   clara (prata, branco) some no fundo do card e cor escura ganha um contorno
   que a suja. */
.ficha__cores{ margin-top:22px; }
.ficha__cores-rotulo{
  margin:0 0 10px;
  font-size:12px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--cinza-texto);
}
.ficha__cores-rotulo strong{
  color:var(--preto); font-weight:700;
  letter-spacing:normal; text-transform:none;
  font-size:14.5px; margin-left:6px;
}
/* Aviso de que a foto não troca de cor.
   Existe porque a bolinha promete uma coisa que o fabricante não entrega: a
   Xiaomi, a POCO e outras publicam um render só por produto, e clicar na cor
   trocava o nome e mantinha a imagem. Sem esta linha aquilo lê como defeito, e
   foi o que o Rian viu no Poco X6 Pro. Dizer antes é mais honesto que deixar a
   pessoa descobrir clicando. */
.ficha__cores-aviso{
  margin:10px 0 0;
  font-size:12.5px; line-height:1.45; color:var(--cinza-texto);
  max-width:34em;
}
/* Explica "Fly More Combo" e "com tela"/"sem tela" nos drones (ver notaTela
   em gerar.mjs). Fica entre o lead e os selos, como extensão do resumo, não
   como aviso de problema: por isso o tom neutro, sem fundo nem borda, igual
   ao ficha__cores-aviso logo abaixo.
   Pode sair como duas <p> seguidas (combo + tela): a de cima só respira
   embaixo o suficiente para separar da próxima linha de texto, e é a ÚLTIMA
   da dupla que abre o respiro maior antes das pílulas de Garantia/Nota
   fiscal — senão as duas margens somadas abririam um vão maior entre as
   duas frases do que entre elas e as pílulas. */
.ficha__nota-tela{
  margin:12px 0 6px;
  font-size:14.5px; line-height:1.6; color:var(--cinza-texto);
  max-width:52ch;
}
.ficha__nota-tela:last-of-type{ margin-bottom:22px; }
.ficha__nota-tela strong{ color:var(--preto); font-weight:600; }

.ficha__cores ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.ficha__cores .amostra{
  width:32px; height:32px; padding:0;
  border:0; border-radius:50%;
  background:var(--cor);
  box-shadow:inset 0 0 0 1px rgba(26,26,26,.16);
  cursor:default;
  transition:transform .18s ease, box-shadow .18s ease;
}
.ficha__cores .amostra:hover{ transform:scale(1.06); }
/* O anel de escolhida fica FORA da bolinha, com folga, para nao comer a cor.
   Preto e nao amarelo: sobre bolinha amarela ou clara o amarelo sumiria. */
.ficha__cores .amostra[aria-pressed="true"]{
  box-shadow:inset 0 0 0 1px rgba(26,26,26,.16), 0 0 0 2px var(--branco), 0 0 0 4px var(--preto);
}
.ficha__cores .amostra:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(26,26,26,.16), 0 0 0 2px var(--branco), 0 0 0 5px var(--amarelo);
}
/* Sem JavaScript o botao nao troca nada, entao ele nao finge ser clicavel: a
   mao so aparece depois que o script se anuncia com .ligado. */
.ficha__cores.ligado .amostra{ cursor:pointer; }

/* Fica logo abaixo da faixa de procedencia, que ja fecha com borda em cima.
   Uma segunda borda aqui empilharia dois filetes a 20px um do outro, entao
   este bloco so separa com respiro. */
.ficha__porloja{
  margin-top:16px;
  font-size:14.5px; line-height:1.55;
  color:var(--cinza-texto);
  max-width:62ch;
}
.ficha__porloja strong{ color:var(--preto); font-weight:600; }


/* ---------- página das lojas ----------
   A primeira versão era uma lista: nove linhas largas iguais, foto de 360px
   ao lado de uma coluna estreita de texto e um terço da largura sobrando
   vazia à direita. Ler nove daquelas é trabalho, não é escolher uma loja.

   Agora é grade agrupada por estado, que é como a pessoa realmente procura:
   ela sabe se está no DF ou em Goiás antes de saber o nome do shopping.
   O atalho de chips saiu junto: com os grupos nomeados, ele só fazia ler os
   mesmos nove nomes duas vezes. */

/* A home manda 8 links para /unidades/#slug e o cabeçalho é fixo. Sem folga,
   a âncora aterrissa embaixo dele. Vale para qualquer [id] das próximas
   páginas também. */
/* Sem scroll-margin-top aqui: o html ja tem scroll-padding-top, e os dois se
   SOMAM, porque a caixa de margem do alvo e alinhada a borda de padding do
   contenedor. Medido em 1200x800, a secao parava 236px abaixo do topo, com
   150px de faixa morta sob a capsula. Um recuo so, no html, resolve ancora,
   foco e Ctrl+F em todas as paginas. */

.uni-topo{ padding-block:calc(var(--topo-espaco) + 28px) 52px; }
@media(min-width:768px){ .uni-topo{ padding-block:calc(var(--topo-espaco) + 48px) 68px; } }
.uni-topo h1{ font-size:30px; }
@media(min-width:768px){ .uni-topo h1{ font-size:44px; } }

.uni-resumo{
  list-style:none; margin:32px 0 0; padding:24px 0 0;
  border-top:1px solid var(--cinza-borda);
  display:grid; gap:20px;
}
@media(min-width:600px){ .uni-resumo{ grid-template-columns:repeat(3,1fr); gap:24px; } }
.uni-resumo li{ display:flex; flex-direction:column; gap:2px; }
.uni-resumo__n{ font-size:26px; font-weight:800; letter-spacing:-.02em; }
.uni-resumo__l{ font-size:14px; color:var(--cinza-texto); line-height:1.45; }

/* ---- filtro de estado da página de lojas ----
   Três opções que se excluem, então é controle segmentado e não lista: as três
   cabem na tela e a comparação é entre elas, lado a lado.

   Este bloco estava FALTANDO. A página manda .filtro__b no HTML desde sempre e
   não havia regra nenhuma para essa classe em lugar nenhum do CSS, então os
   três botões saíam com o desenho padrão do navegador, de canto reto e borda
   cinza, no meio de uma página onde todo botão é pílula. O comentário da fita
   de departamentos (css:3440) ainda cita ".filtro traz margin-bottom:28px",
   prova de que a regra existiu em algum rascunho e se perdeu antes do primeiro
   commit.

   O escolhido segue a mesma decisão do filtro do catálogo: nada de barra preta.
   Fundo cinza-claro, negrito, e o amarelo entrando só como risco de ênfase. */
.filtro{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-bottom:28px;
}
.filtro__b{
  display:inline-flex; align-items:baseline; gap:7px;
  padding:8px 15px;
  border:1px solid var(--cinza-borda); background:var(--branco);
  border-radius:var(--raio-btn);
  font:inherit; font-size:13.5px; line-height:1.2; color:var(--preto-suave);
  cursor:pointer; transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.filtro__b span{
  font-size:12px; color:var(--cinza-texto);
  font-variant-numeric:tabular-nums;
}
.filtro__b:hover{ background:var(--cinza-claro); border-color:#d3d6dc; }
.filtro__b[aria-pressed="true"]{
  background:var(--cinza-claro); border-color:transparent;
  color:var(--preto); font-weight:700;
  box-shadow:inset 3px 0 0 var(--amarelo);
}
.filtro__b[aria-pressed="true"] span{ color:var(--preto); }
.filtro__b:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--amarelo); }

/* ---- cabeçalho de cada estado ---- */
.grupo{ margin-bottom:22px; }
.grupo + .lojas{ margin-bottom:56px; }
.grupo__titulo{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:12px;
  font-size:24px;
}
@media(min-width:768px){ .grupo__titulo{ font-size:28px; } }
.grupo__conta{
  padding:4px 11px;
  background:var(--amarelo); color:var(--preto);
  border-radius:var(--raio-btn);
  font-size:11.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
.grupo__sub{ margin-top:6px; font-size:15px; color:var(--cinza-texto); }

/* ---- a grade ---- */
.lojas{ display:grid; gap:20px; }
@media(min-width:640px){ .lojas{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1040px){ .lojas{ grid-template-columns:repeat(3,1fr); gap:24px; } }

.loja{
  display:flex; flex-direction:column;
  background:var(--branco);
  border:1px solid var(--cinza-borda);
  border-radius:var(--raio);
  overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.loja:hover{ border-color:#D5D8DE; box-shadow:var(--sombra-2); transform:translateY(-3px); }

.loja__foto{ margin:0; position:relative; background:var(--cinza-claro); overflow:hidden; }
.loja__foto img{
  width:100%; display:block;
  aspect-ratio:16/10; object-fit:cover;
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.loja:hover .loja__foto img{ transform:scale(1.05); }

.loja__selo{
  position:absolute; left:12px; top:12px; z-index:2;
  padding:5px 11px;
  background:var(--amarelo); color:var(--preto);
  border-radius:var(--raio-btn);
  font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
}
/* "Em breve" em vidro escuro: pousa sobre a foto do tapume e segue a
   convenção do site, preto para expectativa e amarelo para destaque. */
.loja__selo--breve{
  background:rgba(26,26,26,.72); color:var(--branco);
  backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-saturacao));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .loja__selo--breve{ background:rgba(26,26,26,.94); }
}

.loja__corpo{ display:flex; flex-direction:column; flex:1; padding:20px 20px 20px; }
.loja__cidade{
  font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--cinza-texto);
}
.loja__nome{ font-size:19px; line-height:1.25; margin:5px 0 16px; }

/* Endereço e horário lado a lado do ícone, com o ícone como rótulo. Poupa a
   palavra "Endereço" e "Horário" no visual, mas ela continua existindo para
   leitor de tela na classe .sr. */
.loja__info{ margin:0; display:grid; gap:12px; }
.loja__campo{ display:flex; align-items:flex-start; gap:10px; }
.loja__rot{ flex:none; margin-top:2px; }
.loja__rot svg{ width:16px; height:16px; color:var(--cinza-texto); display:block; }
.loja__campo dd{ margin:0; font-size:14px; line-height:1.5; color:var(--preto-suave); }
.loja__campo address{ font-style:normal; }
.loja__cep{ display:block; margin-top:2px; font-size:12.5px; color:var(--cinza-texto); }
.loja__horas div{ display:flex; flex-wrap:wrap; gap:0 6px; }
.loja__horas dt{ font-weight:700; }
.loja__horas dt::after{ content:":"; }
.loja__horas dd{ margin:0; color:var(--cinza-texto); }

.loja__servicos{
  list-style:none; margin:14px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.loja__servicos li{
  padding:4px 10px;
  background:var(--cinza-claro);
  border-radius:var(--raio-btn);
  font-size:11.5px; font-weight:700;
  color:var(--preto-suave);
}

.loja__aviso{ font-size:14px; line-height:1.55; color:var(--cinza-texto); }

/* margin-top:auto cola as ações no rodapé: numa fileira de três, os botões
   terminam na mesma linha mesmo com endereços de tamanhos diferentes. */
.loja__acoes{
  margin-top:auto; padding-top:18px;
  display:flex; flex-direction:column; gap:8px;
}
.loja__zap{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 16px;
  background:var(--preto); color:var(--branco);
  border-radius:var(--raio-btn);
  font-size:14px; font-weight:700;
  transition:background-color .18s ease;
}
.loja__zap svg{ width:17px; height:17px; color:var(--whatsapp); flex:none; }
.loja__zap:hover{ background:#000; }
.loja__mapa{
  text-align:center;
  font-size:13.5px; font-weight:700;
  color:var(--cinza-texto);
  text-decoration:underline; text-underline-offset:3px;
}
.loja__mapa:hover{ color:var(--preto); }

/* A que ainda vai abrir fica visivelmente mais discreta, para ninguém sair de
   casa à toa. */
.loja--breve{ background:var(--cinza-claro); }
.loja--breve .loja__zap{ background:var(--preto-suave); }

/* ---- caixa de ajuda no fim ----
   Forma igual à do bloco da assistência, mas classe própria: .assistencia
   carrega a decisão de texto branco sobre amarelo, tomada só para aquele
   botão da home, e ela não vale aqui. */
/* O bloco "Nao achou?" era um cartao preto arredondado DENTRO de uma secao
   branca. Duas coisas davam errado, e o Rian pegou as duas na mesma frase.

   Ele nao se lia como parte do site: em toda outra pagina, bloco escuro e
   secao inteira sangrando de ponta a ponta, com grafismo. Aqui era um retangulo
   solto no meio do branco, com raio de 24px, sem parentesco com nada.

   E antes dele sobravam 224px de branco, os dois respiros somados: 112 do fim
   da secao anterior mais 112 do comeco desta. Num catalogo de 43 mil pixels de
   altura, a pagina terminava com um buraco.

   Agora o proprio SECTION carrega o preto, entao ele fecha a pagina em vez de
   flutuar nela, e o vazio desaparece porque o escuro comeca onde o branco
   acaba. As regras de dentro seguem iguais, porque o conteudo nao mudou. */
/* Faixa de fecho da pagina.
   Era um cartao preto solto no branco. Virou secao, e ai virou uma laje: texto
   no canto de cima e a metade direita vazia, porque o conteudo continuava
   empilhado como estava dentro do cartao, so que agora num container de 1120.

   Agora e composicao de duas colunas: o recado a esquerda com medida de
   leitura, as acoes a direita, alinhados pelo topo. A largura passa a ser
   usada, e o botao fica na altura do olho de quem acabou de ler a frase.

   Empilha abaixo de 860px, e ai os botoes ocupam a linha inteira, que e o
   alvo de toque certo no celular. */
.ajuda{ padding:0; display:grid; gap:28px; }
@media(min-width:860px){
  .ajuda{ grid-template-columns:minmax(0,1fr) auto; gap:56px; align-items:start; }
}
/* A faixa e CLARA, e nao escura.
   Escura, ela ficava colada num rodape que tambem e preto, com a mesma
   estrutura: rotulo amarelo em caixa alta, texto a esquerda, conteudo a
   direita. Eram mil e duzentos pixels de escuro lendo como o mesmo bloco
   repetido duas vezes.
   Clara, a pagina fecha em tres tempos: branco no conteudo, cinza na chamada,
   preto no rodape. E o rodape volta a ser o unico bloco escuro, que e onde
   escuro pertence. */
.secao--clara:has(.ajuda){ padding-block:64px; }
/* A FAIXA DE FECHO NUNCA REPETE O FUNDO DA SEÇÃO DE CIMA.
   Em sete páginas ela vinha com .secao--clara logo depois de outra
   .secao--clara: 112px de respiro embaixo mais 64px em cima, tudo no mesmo
   #F5F6F8, sem nenhuma linha entre um assunto e o outro. Lido de longe são
   176px de cinza parado e duas seções diferentes emendadas numa só.
   A regra é a mesma que resolveu o fecho da ficha de produto: o fecho é o
   neutro OPOSTO ao de cima. Onde o conteúdo é branco, o fecho é cinza; onde o
   conteúdo é cinza, o fecho é branco. Nos dois casos o rodapé preto fecha, e a
   página desce em três degraus em vez de dois.
   O :has(.ajuda) é o que separa este fecho do .secao--emenda que a ficha de
   produto usa nos relacionados, que não é fecho e continua como está. */
.secao--clara + .secao--emenda:has(.ajuda){ background:var(--branco); }
/* MAS TROCAR O FUNDO NÃO BASTA, e eu já entreguei errado uma vez por causa
   disso: #F5F6F8 para #FFFFFF são 2% de diferença, que no papel é uma troca de
   fundo e na tela é nada. Duas seções continuavam parecendo uma só, agora com
   um degrau invisível no meio.
   Quem faz a separação aqui é o FIO. Um traço de 1px na cor de borda do site,
   que é a mesma marca de fim de assunto usada na ficha de produto acima da
   linha de confiança. Discreto, mas existe. */
.secao--emenda:has(.ajuda){ border-top:1px solid var(--cinza-borda); }
/* E some com o respiro dobrado. Sem isto sobravam 112px embaixo mais 64px em
   cima do mesmo cinza: 176px de vazio parado entre um assunto e o outro, que
   é a metade do problema que o fundo igual causava. */
.secao:has(+ .secao--emenda .ajuda){ padding-bottom:64px; }
/* Sobre claro, o rotulo amarelo sumiria e ainda repetiria o padrao do rodape,
   entao ele volta ao cinza de rotulo do resto do site. */
.ajuda .lead{ color:var(--cinza-texto); margin-top:12px; max-width:46ch; }
.ajuda h2{ margin-bottom:0; }
.ajuda__topo{ margin-bottom:0; }
.ajuda__acoes{ display:flex; flex-wrap:wrap; gap:12px; align-content:start; }
@media(min-width:860px){
  /* Desce os botoes ate a linha de base do titulo, senao eles flutuam colados
     no rotulo, que e a linha mais leve do bloco. */
  .ajuda__acoes{ padding-top:34px; }
}
@media(max-width:520px){
  .ajuda__acoes{ display:grid; grid-template-columns:1fr; }
  .ajuda__acoes .btn{ width:100%; }
}
/* O .btn é nowrap, então um rótulo longo como "Me indicar a unidade mais
   próxima" não encolhe e vaza para fora do painel preto. Mesmo tratamento
   que .hero__acoes e .ficha__acoes já recebem. */


/* Filtro por estado na página de lojas.
   Nasce com o atributo hidden e o script tira: botão que não funciona é pior
   que botão que não existe. Sem JavaScript a pessoa vê as nove lojas, que já
   estão agrupadas por estado no próprio HTML. */


/* O estado escolhido usa o amarelo da marca com texto preto, que é a regra da
   identidade, e não uma cor nova só para isto.

   Os dois seletores moram na MESMA regra de propósito. A fita de departamentos
   do catálogo precisa ser <a> para funcionar sem script, e aria-pressed não
   vale em link: ela usa aria-current. Se as duas metades morassem em regras
   separadas, uma acabaria mudando sem a outra, que é exatamente o defeito que
   este arquivo já registrou uma vez com o escalonamento da entrada. */


/* Entrada dos blocos ao trocar o filtro.
   Sem isso o conteúdo troca de um quadro para o outro e o olho perde a
   referência: some meia página e o resto salta para cima. Com a chegada
   escalonada, quem está olhando acompanha o que mudou. */
@keyframes filtroEntra{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}
.entrando{ animation:filtroEntra .34s cubic-bezier(.22,.61,.36,1) both; }
/* Os cards chegam em sequência curta dentro do bloco que entrou. Trava no
   sexto: numa grade de sete, atrasar todos faria a última parecer travada. */
.lojas.entrando > .loja{ animation:filtroEntra .34s cubic-bezier(.22,.61,.36,1) both; }
.lojas.entrando > .loja:nth-child(2){ animation-delay:.04s; }
.lojas.entrando > .loja:nth-child(3){ animation-delay:.08s; }
.lojas.entrando > .loja:nth-child(4){ animation-delay:.12s; }
.lojas.entrando > .loja:nth-child(5){ animation-delay:.16s; }
.lojas.entrando > .loja:nth-child(n+6){ animation-delay:.2s; }
@media(prefers-reduced-motion:reduce){
  .entrando, .lojas.entrando > .loja{ animation:none; }
}

/* O botão do filtro afunda um pouco no clique. É o retorno tátil que diz
   "recebi", antes mesmo de o conteúdo trocar. */


/* Dígito de largura fixa nos números do topo, senão o texto ao lado treme
   enquanto a contagem sobe. */
.uni-resumo__n{ font-variant-numeric:tabular-nums; }

/* Transição de view no filtro das lojas.
   Onde o navegador tem, os cards deslizam da posição antiga para a nova em vez
   de sumir e aparecer. Onde não tem, nada disso é lido e vale a animação
   .entrando logo acima. */
@media(prefers-reduced-motion:no-preference){
  ::view-transition-group(*){
    animation-duration:.4s;
    animation-timing-function:cubic-bezier(.22,.61,.36,1);
  }
  /* O que sai desaparece antes; o que entra chega depois. Cruzar os dois no
     mesmo instante deixa a tela suja no meio da troca. */
  ::view-transition-old(*){ animation-duration:.22s; }
  ::view-transition-new(*){ animation-duration:.34s; animation-delay:.06s; }
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none; }
}

/* Os dois elementos fixos ficam FORA da transição.
   Durante uma transição de view o navegador troca a página viva por um
   retrato dela, e tudo que não tem nome próprio entra num retrato só, o
   "root". Cabeçalho e pílula do WhatsApp são fixos, mas estavam dentro desse
   retrato: no clique do filtro os dois sumiam junto com o resto e voltavam
   depois, que foi exatamente o piscar relatado.

   Dar um nome próprio a cada um tira os dois do retrato do root e faz deles
   elementos independentes. Como a posição não muda entre o antes e o depois,
   o certo é não animar nada: eles ficam parados na tela enquanto os cards
   trocam de lugar por baixo.

   O retrato antigo é escondido em vez de ficar empilhado sobre o novo. Com os
   dois visíveis ao mesmo tempo, o desfoque de vidro da cápsula do topo seria
   aplicado duas vezes e daria um escurecimento no meio da troca, trocando um
   piscar por outro. */
.topo{ view-transition-name:topo; }
.zap-flutuante{ view-transition-name:zap-flutuante; }
::view-transition-group(topo),
::view-transition-group(zap-flutuante){ animation:none; }
::view-transition-old(topo),
::view-transition-old(zap-flutuante){ animation:none; opacity:0; }
::view-transition-new(topo),
::view-transition-new(zap-flutuante){ animation:none; opacity:1; mix-blend-mode:normal; }

/* ============================================================
   PÁGINAS LEGAIS (privacidade, trocas e garantia)

   Texto longo que ninguém lê por prazer. As decisões aqui são todas
   sobre reduzir o esforço de achar a resposta: uma coluna estreita
   para a linha não cansar, um índice que acompanha a rolagem no
   desktop, e um resumo em linguagem de gente antes do texto formal.
   ============================================================ */

.legal-topo{ padding-block:calc(var(--topo-espaco) + 28px) 48px; }
@media(min-width:768px){ .legal-topo{ padding-block:calc(var(--topo-espaco) + 44px) 60px; } }
.legal-topo h1{ font-size:30px; }
@media(min-width:768px){ .legal-topo h1{ font-size:42px; } }

/* A data de atualização é o dado que dá ou tira a validade do documento
   inteiro, então fica no topo e não escondida no rodapé da página. */
.legal-topo__data{
  margin-top:26px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:14px; color:rgba(255,255,255,.72);
}
.legal-topo__data strong{ color:var(--branco); font-weight:600; }

.legal{ padding-block:56px 72px; }
@media(min-width:768px){ .legal{ padding-block:64px 88px; } }

.legal__grade{ display:grid; gap:40px; }
/* A lateral so entra onde a coluna de texto ainda cabe inteira ao lado dela.
   Com 200px de indice e 40px de respiro, a conta fecha a partir de 1000px:
   1000 - 48 de respiro - 200 - 40 = 712, acima dos 686 do max-width de 68ch.
   Entrando antes disso, alargar a janela ESTREITAVA a leitura, que e o
   contrario do que a pessoa espera ao aumentar a tela. */
@media(min-width:1000px){
  .legal__grade{ grid-template-columns:200px minmax(0,1fr); gap:40px; align-items:start; }
}
@media(min-width:1120px){
  .legal__grade{ grid-template-columns:250px minmax(0,1fr); gap:56px; }
}

/* O índice só vira barra lateral fixa onde existe altura para isso. No
   celular ele é uma lista comum no começo da página, que é o lugar onde
   um sumário faz sentido quando não pode acompanhar a rolagem. */
.legal__indice{ position:static; }
/* Doze itens em coluna unica ocupavam quase uma tela inteira antes de o texto
   comecar. Em duas colunas o sumario cabe sem esconder nada de quem usa
   leitor de tela, que e o que um <details> fechado faria. */
@media(max-width:999.98px){
  .legal__indice ol{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 10px; }
  .legal__indice a{ padding:7px 10px; }
}
@media(min-width:1000px){
  .legal__indice{ position:sticky; top:calc(var(--topo-espaco) + 16px); }
}
.legal__indice h2{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--cinza-texto); margin:0 0 14px; font-weight:700;
}
.legal__indice ol{
  list-style:none; margin:0; padding:0;
  display:grid; gap:2px;
  counter-reset:sumario;
}
.legal__indice a{
  display:block; padding:8px 12px; border-radius:10px;
  font-size:14px; line-height:1.45; color:var(--preto-suave);
  text-decoration:none; border-left:2px solid transparent;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.legal__indice a::before{
  counter-increment:sumario; content:counter(sumario) ". ";
  color:var(--cinza-texto); font-variant-numeric:tabular-nums;
}
.legal__indice a:hover{ background:var(--branco); color:var(--preto); }
/* Marca no índice a seção que está na tela. Quem escreve é o script; se ele
   não rodar, o índice continua sendo uma lista de links que funcionam. */
.legal__indice a[aria-current="true"]{
  background:var(--branco); color:var(--preto); font-weight:600;
  border-left-color:var(--amarelo);
  box-shadow:var(--sombra-1);
}

.legal__texto{ max-width:68ch; }

/* Resumo em vidro. Fica sobre o cinza da seção, que passa por trás e é
   justamente o que dá o que refratar. */
.legal__resumo{
  padding:22px; border-radius:var(--raio); margin-bottom:44px;
  background:var(--vidro-claro);
  border:1px solid var(--vidro-claro-borda);
  backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-saturacao));
  -webkit-backdrop-filter:blur(var(--vidro-blur)) saturate(var(--vidro-saturacao));
  box-shadow:var(--sombra-1), inset 0 1px 0 rgba(255,255,255,.7);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .legal__resumo{ background:rgba(255,255,255,.94); }
}
@media(min-width:768px){ .legal__resumo{ padding:26px 28px; } }
.legal__resumo h2{
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  margin:0 0 14px; color:var(--preto);
}
.legal__resumo ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.legal__resumo li{
  position:relative; padding-left:26px;
  font-size:15px; line-height:1.6; color:var(--preto-suave);
}
.legal__resumo li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:9px; height:9px; border-radius:50%;
  background:var(--amarelo); box-shadow:0 0 0 3px rgba(253,210,39,.28);
}

.legal__bloco{ margin-bottom:40px; }
.legal__bloco:last-child{ margin-bottom:0; }
/* Sem scroll-margin-top aqui tambem, pela mesma razao: o scroll-padding-top do
   html ja recua o alvo, e somar os dois empurraria o bloco para baixo demais. */
.legal__bloco h2{
  font-size:21px; line-height:1.3; margin:0 0 14px;
  padding-top:14px; border-top:1px solid var(--cinza-borda);
}
@media(min-width:768px){ .legal__bloco h2{ font-size:24px; } }
.legal__bloco h3{
  font-size:16px; margin:24px 0 8px; font-weight:600;
}
.legal__bloco p{
  margin:0 0 14px; font-size:16px; line-height:1.72; color:var(--preto-suave);
}
.legal__bloco p:last-child{ margin-bottom:0; }
.legal__bloco a{ color:var(--preto); text-decoration:underline; text-underline-offset:3px; }
.legal__bloco a:hover{ color:var(--ambar-texto); }
.legal__bloco ul{ margin:0 0 14px; padding-left:22px; display:grid; gap:9px; }
.legal__bloco li{ font-size:16px; line-height:1.65; color:var(--preto-suave); }
.legal__bloco li::marker{ color:var(--amarelo-forte); }
/* Vale para o resumo tambem, que antes herdava o 700 do reset e destoava. */
.legal__texto strong{ color:var(--preto); font-weight:600; }

/* Caixa de destaque para o que tem consequência prática: prazo que corre,
   direito que expira, coisa que a pessoa precisa guardar. */
.legal__aviso{
  margin:0 0 16px; padding:16px 18px;
  border-radius:12px; border-left:3px solid var(--amarelo);
  background:var(--branco); box-shadow:var(--sombra-1);
}
.legal__aviso p{ margin:0; font-size:15px; }
.legal__aviso p + p{ margin-top:10px; }

/* Tabela de prazos. Vira lista de blocos no celular, senão as colunas
   se espremem até a leitura virar adivinhação. */
.legal__tabela{ margin:0 0 16px; display:grid; gap:10px; }
.legal__tabela > div{
  background:var(--branco); border:1px solid var(--cinza-borda);
  border-radius:12px; padding:14px 16px;
}
.legal__tabela dt{
  font-size:13px; letter-spacing:.03em; text-transform:uppercase;
  color:var(--cinza-texto); font-weight:700; margin-bottom:5px;
}
.legal__tabela dd{ margin:0; font-size:15px; line-height:1.6; color:var(--preto-suave); }
@media(min-width:600px){
  .legal__tabela{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ============================================================
   ASSISTÊNCIA TÉCNICA (/assistencia-tecnica/)

   A pagina existe para tirar duvida antes de a pessoa entregar um
   aparelho caro para um estranho. A ordem responde as perguntas na
   sequencia em que elas aparecem: voces consertam a minha coisa?
   como funciona? quem paga? o que faco antes?

   Sobre ritmo: a primeira versao tinha cinco secoes seguidas com a
   mesma forma, rotulo + titulo + lead + grade de cartoes, e quase
   tudo em cinza claro depois do topo. Ficou monotona. Agora cada
   secao muda de forma e de fundo em relacao a vizinha: foto ao lado
   do texto no topo, grade de cartoes, faixa escura com quatro
   colunas, dois cartoes grandes, e texto ao lado de lista numerada.
   ============================================================ */

.at-topo{ padding-block:calc(var(--topo-espaco) + 28px) 48px; }
@media(min-width:768px){ .at-topo{ padding-block:calc(var(--topo-espaco) + 44px) 56px; } }
.at-topo h1{ font-size:30px; }
@media(min-width:768px){ .at-topo h1{ font-size:44px; } }
.at-topo .cabecalho-secao{ margin-bottom:0; }

/* A foto sobe para o topo porque era o unico material visual da pagina e
   estava enterrada no meio. No topo ela prova, na primeira tela, que existe
   um lugar fisico para onde o aparelho vai. */
.at-topo__grade{ display:grid; gap:32px; align-items:center; }
@media(min-width:900px){
  .at-topo__grade{ grid-template-columns:1.05fr .95fr; gap:52px; }
}
.at-topo__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }


/* Moldura de figura com legenda por cima. Tres blocos usavam o mesmo desenho:
   o laboratorio na assistencia, o retrato na Sobre e o rosto no Portal. */
.at-laboratorio,
.sb-retrato,
.pt-rosto{ margin:0; border-radius:var(--raio); overflow:hidden; position:relative; }
.at-laboratorio img{ width:100%; height:auto; display:block; }
/* A legenda entra por cima da foto, com a sombra subindo do rodape dela. Foi
   a escolha do Rian no bloco equivalente da home. */
.at-laboratorio figcaption,
.sb-retrato figcaption{
  position:absolute; left:0; right:0; bottom:0;
  /* Respiro proporcional a foto. Fixo em 48px, a legenda cobria mais da
     metade da imagem em telas de 320px. */
  padding:clamp(18px, 8vw, 48px) 20px 18px;
  background:linear-gradient(to top, rgba(26,26,26,.94) 32%, rgba(26,26,26,0));
  font-size:14px; line-height:1.5; color:rgba(255,255,255,.80);
}
.at-laboratorio figcaption strong,
.sb-retrato figcaption strong{
  display:block; margin-bottom:3px;
  font-size:15.5px; font-weight:700; color:var(--branco);
}

.at-numeros,
.sb-numeros{
  list-style:none; margin:40px 0 0; padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:grid; gap:22px;
}
@media(min-width:600px){ .at-numeros, .sb-numeros{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
@media(min-width:900px){ .at-numeros, .sb-numeros{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.at-numeros__n,
.sb-numeros__n{
  display:block; font-size:30px; font-weight:800; letter-spacing:-.02em;
  color:var(--amarelo); font-variant-numeric:tabular-nums;
}
.at-numeros__l,
.sb-numeros__l{
  display:block; margin-top:6px;
  font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.72);
}

/* ---------- o que entra no laboratorio ---------- */
.at-servicos{ display:grid; gap:14px; }
@media(min-width:620px){ .at-servicos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media(min-width:980px){ .at-servicos{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.at-servico{
  background:var(--branco); border:1px solid var(--cinza-borda);
  border-radius:var(--raio); padding:22px;
}
.at-servico__icone{
  display:grid; place-items:center;
  width:42px; height:42px; margin-bottom:14px;
  border-radius:12px; background:var(--amarelo);
}
.at-servico__icone svg{ width:21px; height:21px; color:var(--preto); }
.at-servico h3{ font-size:16.5px; margin-bottom:6px; }
.at-servico p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--cinza-texto); }

/* O bloco dos drones e escuro porque e a unica coisa desta pagina que a
   concorrencia da regiao normalmente nao faz. Contraste de fundo e o que
   separa "mais um servico da lista" de "o motivo de voce vir ate aqui". */
.at-drone{
  margin-top:20px;
  background:var(--preto); color:var(--branco);
  border-radius:calc(var(--raio) * 1.5);
  padding:28px 24px;
  display:grid; gap:22px;
}
@media(min-width:820px){
  .at-drone{ grid-template-columns:1fr auto; align-items:center; padding:34px 40px; gap:36px; }
}

/* A foto so entra a partir de 1040px. Testei em 820 e o resultado foi ruim:
   com foto, texto e botao dividindo a linha, a coluna de leitura caia para
   ~285px, tres ou quatro palavras por linha. Abaixo disso ela fica de fora,
   e o bloco continua funcionando sem ela. */
.at-drone__foto{ display:none; margin:0; }
@media(min-width:1040px){
  .at-drone{ grid-template-columns:auto minmax(38ch,1fr) auto; gap:40px; }
  .at-drone__foto{ display:block; }
  .at-drone__foto img{
    width:210px; height:250px; display:block;
    border-radius:var(--raio); object-fit:cover; object-position:50% 24%;
  }
}
.at-drone .rotulo{ color:var(--amarelo); }
.at-drone h3{ font-size:23px; margin:10px 0 12px; }
@media(min-width:768px){ .at-drone h3{ font-size:27px; } }
.at-drone p{ margin:0; font-size:15.5px; line-height:1.65; color:rgba(255,255,255,.72); max-width:60ch; }
@media(max-width:640px){ .at-drone .btn{ width:100%; } }

/* ---------- como funciona ---------- */
/* Quatro colunas numa faixa escura. E a forma mais diferente possivel da
   grade de cartoes claros logo acima, e e o que quebra a sequencia de
   secoes cinzas que deixava a pagina monotona. */
.at-fluxo__passos{
  list-style:none; margin:0; padding:0;
  display:grid; gap:28px;
}
@media(min-width:680px){ .at-fluxo__passos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 36px; } }
@media(min-width:1000px){ .at-fluxo__passos{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; } }
.at-fluxo__passos li{ position:relative; padding-top:18px; }
/* A linha em cima de cada passo faz as quatro colunas lerem como uma
   sequencia, e nao como quatro coisas soltas. */
.at-fluxo__passos li::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:2px; background:rgba(255,255,255,.16);
}
.at-fluxo__passos li:first-child::before{ background:var(--amarelo); }
.at-fluxo__n{
  display:block; margin-bottom:10px;
  font-size:13px; font-weight:800; letter-spacing:.08em;
  color:var(--amarelo); font-variant-numeric:tabular-nums;
}
.at-fluxo__passos h3{ font-size:17px; margin-bottom:8px; }
.at-fluxo__passos p{ margin:0; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.68); }

/* ---------- em garantia x pago ---------- */
.at-dupla{ display:grid; gap:20px; }
@media(min-width:820px){ .at-dupla{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }

.at-caso{
  background:var(--branco); border:1px solid var(--cinza-borda);
  border-radius:var(--raio); padding:24px;
  display:flex; flex-direction:column;
}
@media(min-width:768px){ .at-caso{ padding:30px; } }
/* O caso sem custo e o desfecho que a pessoa torce para ter, entao ganha o
   destaque. A borda amarela e reforco, nao o unico sinal: a tag escrita
   "Sem custo" diz a mesma coisa em texto. */
.at-caso--destaque{ border-color:var(--amarelo); box-shadow:var(--sombra-1); }
.at-caso__tag{
  align-self:flex-start; margin-bottom:14px;
  padding:5px 12px; border-radius:var(--raio-btn);
  background:var(--amarelo); color:var(--preto);
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
}
.at-caso__tag--neutra{ background:var(--cinza-claro); color:var(--cinza-texto); }
.at-caso h3{ font-size:19px; margin-bottom:10px; }
.at-caso > p{ font-size:15.5px; line-height:1.65; color:var(--preto-suave); margin:0 0 18px; }

.at-caso__lista{ margin:0 0 18px; display:grid; gap:14px; }
.at-caso__lista dt{
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cinza-texto); font-weight:700; margin-bottom:4px;
}
.at-caso__lista dd{ margin:0; font-size:15px; line-height:1.6; color:var(--preto-suave); }
/* Empurra a nota para o rodape do cartao, para os dois terminarem alinhados
   mesmo com quantidade de texto diferente. */
.at-caso__nota{
  margin:auto 0 0; padding-top:16px; border-top:1px solid var(--cinza-borda);
  font-size:14.5px; line-height:1.6; color:var(--cinza-texto);
}
.at-caso__nota a{ color:var(--preto); text-decoration:underline; text-underline-offset:3px; }
.at-caso__nota a:hover{ color:var(--ambar-texto); }

/* ---------- antes de entregar ---------- */
/* Texto a esquerda e lista numerada a direita. E a quinta forma diferente
   da pagina, e evita mais uma grade de cartoes. */
.at-preparo__grade{ display:grid; gap:32px; }
@media(min-width:900px){
  .at-preparo__grade{ grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; }
}
.at-preparo__topo .lead{ margin-top:14px; }
.at-preparo__aviso{
  margin:22px 0 0; padding:16px 18px;
  border-radius:12px; border-left:3px solid var(--amarelo);
  background:var(--branco); box-shadow:var(--sombra-1);
  font-size:14.5px; line-height:1.6; color:var(--cinza-texto);
}
.at-preparo__aviso strong{ color:var(--preto); font-weight:600; }

.at-preparo__lista{
  list-style:none; margin:0; padding:0;
  counter-reset:preparo;
}
.at-preparo__lista li{
  position:relative;
  padding:18px 0 18px 52px;
  border-top:1px solid var(--cinza-borda);
}
.at-preparo__lista li:first-child{ border-top:0; padding-top:0; }
.at-preparo__lista li:first-child::before{ top:0; }
.at-preparo__lista li:last-child{ padding-bottom:0; }
.at-preparo__lista li::before{
  counter-increment:preparo; content:counter(preparo);
  position:absolute; left:0; top:18px;
  width:32px; height:32px; border-radius:50%;
  background:var(--amarelo); color:var(--preto);
  display:grid; place-items:center;
  font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums;
}
.at-preparo__lista h3{ font-size:16.5px; margin-bottom:5px; }
.at-preparo__lista p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--cinza-texto); }

/* ============================================================
   CORRECOES DA REVISAO DAS PAGINAS INTERNAS (14/08/2026)
   ============================================================ */

/* A pilula do WhatsApp e vidro escuro, entao o anel de foco preto do padrao
   sumia dentro dela. Ela e um elemento solto no canto da tela, fora de
   qualquer container escuro, por isso nao pegava a regra da lista la em cima. */
.zap-flutuante:focus-visible{ outline-color:var(--branco); }

/* Em janela baixa, ou com zoom alto, o indice grudado ficava mais alto que a
   tela e os ultimos itens ficavam cortados sem forma nenhuma de alcancar. */
@media(min-width:1000px){
  .legal__indice{
    max-height:calc(100vh - var(--topo-espaco) - 32px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

/* Resolve foco, ancora e Ctrl+F de uma vez: sem isso o alvo para embaixo da
   capsula fixa, e quem chega pelo teclado nao ve onde caiu. */
html{ scroll-padding-top:calc(var(--topo-espaco) + 16px); }

/* Abaixo de ~346px uteis o e-mail do rodape estourava o container e era
   cortado em silencio pelo overflow:hidden da secao. */
.rodape a[href^="mailto:"]{ overflow-wrap:anywhere; }

/* Impressao e PDF.
   A entrada por rolagem deixa os blocos em opacity 0 ate serem vistos, e
   quem imprime ou salva em PDF nunca rolou a pagina: as politicas saiam com
   pagina em branco no meio. Documento juridico precisa imprimir inteiro. */
@media print{
  .oculto, .oculto-grupo > *{ opacity:1 !important; transform:none !important; }
  .topo, .zap-flutuante, .menu-mobile, .pular, .grafismo{ display:none !important; }
  .legal__indice{ position:static; max-height:none; }
  .secao{ padding-block:16px; }
  .secao--escura, .rodape, .ajuda, .at-drone{
    background:#fff !important; color:#000 !important;
  }
  .secao--escura *, .rodape *, .ajuda *, .at-drone *{ color:#000 !important; }
  /* O amarelo da marca some no papel comum, entao rotulo e numero viram
     preto tambem, senao imprimem quase em branco. */
  .rotulo, .sb-numeros__n, .at-numeros__n, .pt-selos__n,
  .sb-regras__n, .at-fluxo__n{ color:#000 !important; }
  .legal__bloco{ break-inside:avoid; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:11px; }
}

/* ============================================================
   SOBRE (/sobre/)

   A pagina existe porque o argumento do site inteiro e confianca, e
   confianca precisa de origem. O material veio do relatorio estrategico
   da marca: a trajetoria, as crencas e as descrencas.

   Decisao de conteudo que vale registrar: o formato Missao/Visao/Valores
   do site no ar foi jogado fora e o conteudo dele aproveitado. Ninguem le
   tres paragrafos de virtude corporativa. O que prende e a historia
   concreta, o "a gente recusa" ao lado do "a gente defende", e o dado
   que pode ser conferido.
   ============================================================ */

.sb-topo{ padding-block:calc(var(--topo-espaco) + 28px) 48px; }
@media(min-width:768px){ .sb-topo{ padding-block:calc(var(--topo-espaco) + 44px) 56px; } }
.sb-topo h1{ font-size:30px; }
@media(min-width:768px){ .sb-topo h1{ font-size:44px; } }
.sb-topo .cabecalho-secao{ margin-bottom:0; }

.sb-topo__grade{ display:grid; gap:32px; align-items:center; }
@media(min-width:900px){
  .sb-topo__grade{ grid-template-columns:1.15fr .85fr; gap:52px; }
}

/* O retrato e vertical (800x1200) e ficaria alto demais ao lado do texto.
   O aspect-ratio corta a sobra por cima e por baixo em vez de esticar a
   coluna inteira. */
.sb-retrato img{
  width:100%; height:auto; display:block;
  aspect-ratio:4/3; object-fit:cover; object-position:50% 28%;
}
@media(min-width:900px){ .sb-retrato img{ aspect-ratio:5/6; } }

.sb-topo__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }


/* A regua de numeros e identica a da assistencia; as duas ficam agrupadas
   la em cima, em .at-numeros. Aqui so o que muda. */

/* ---------- a historia ---------- */
/* Tres paragrafos sozinhos deixavam metade da tela vazia no desktop. A foto
   dos aparelhos lacrados estava no projeto sem uso e ilustra exatamente o
   que o texto conta, entao ela entra ao lado em vez de mais espaco branco. */
.sb-historia{ display:grid; gap:32px; }
@media(min-width:900px){
  .sb-historia{ grid-template-columns:1.25fr .75fr; gap:56px; align-items:start; }
}
.sb-lacrados{ margin:0; }
.sb-lacrados img{
  width:100%; height:auto; display:block;
  border-radius:var(--raio);
  aspect-ratio:4/3; object-fit:cover; object-position:50% 30%;
}
@media(min-width:900px){
  .sb-lacrados img{ aspect-ratio:3/4; }
}
/* Sem margin-top de 64px aqui. Era numero magico tentando alinhar a foto com
   o primeiro paragrafo, e ele so acertava quando o h2 ocupava exatamente duas
   linhas: em qualquer outra largura, errava. O align-items:start da grade ja
   alinha os dois topos, que e o alinhamento que se sustenta sozinho. */
.sb-lacrados figcaption{
  margin-top:12px; font-size:14px; line-height:1.55; color:var(--cinza-texto);
}

.sb-texto{ max-width:68ch; }
.sb-texto h2{ margin:10px 0 18px; }
.sb-texto p{ margin:0 0 16px; font-size:17px; line-height:1.72; color:var(--preto-suave); }
.sb-texto p:last-child{ margin-bottom:0; }
.sb-texto strong{ color:var(--preto); font-weight:600; }

/* ---------- linha do tempo ---------- */
/* Um traco vertical liga os marcos, senao sao cartoes soltos e a ideia de
   trajetoria se perde. */
.sb-linha{ list-style:none; margin:0; padding:0; }
.sb-linha li{
  position:relative; padding:0 0 28px 34px;
  border-left:2px solid var(--cinza-borda);
}
.sb-linha li:last-child{ padding-bottom:0; border-left-color:transparent; }
.sb-linha li::before{
  content:""; position:absolute; left:-7px; top:4px;
  width:12px; height:12px; border-radius:50%;
  background:var(--amarelo); box-shadow:0 0 0 4px var(--cinza-claro);
}
.sb-linha__marco{
  display:block; margin-bottom:5px;
  font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ambar-texto);
}
.sb-linha h3{ font-size:17.5px; margin-bottom:6px; }
.sb-linha p{ margin:0; font-size:15px; line-height:1.62; color:var(--cinza-texto); max-width:52ch; }

/* A versao em quatro colunas foi abandonada: com sete marcos ela quebrava em
   4 mais 3, e o traco de cada item virava um risco solto. Sem linha continua
   ligando os pontos, nao le como trajetoria, le como grade de cartoes.
   Vertical em qualquer largura resolve, e o titulo gruda ao lado no desktop
   para a secao nao virar uma coluna magra no meio da tela. */
.sb-trajetoria__grade{ display:grid; gap:32px; }
@media(min-width:900px){
  .sb-trajetoria__grade{ grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }
  .sb-trajetoria__topo{ position:sticky; top:calc(var(--topo-espaco) + 24px); }
}
.sb-trajetoria__topo h2{ margin:10px 0 0; }
.sb-trajetoria__topo .lead{ margin-top:14px; }

/* O ultimo marco fecha com o ponto cheio em amarelo: e o "hoje". */
.sb-linha li:last-child::before{
  box-shadow:0 0 0 4px var(--cinza-claro), 0 0 0 6px var(--amarelo);
}

/* ---------- as quatro regras ---------- */
.sb-regras__lista{ list-style:none; margin:0; padding:0; display:grid; gap:26px; }
@media(min-width:680px){ .sb-regras__lista{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px 36px; } }
@media(min-width:1000px){ .sb-regras__lista{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; } }
.sb-regras__lista li{ position:relative; padding-top:18px; }
.sb-regras__lista li::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:2px; background:rgba(255,255,255,.16);
}
.sb-regras__lista li:first-child::before{ background:var(--amarelo); }
.sb-regras__n{
  display:block; margin-bottom:10px;
  font-size:13px; font-weight:800; letter-spacing:.08em;
  color:var(--amarelo); font-variant-numeric:tabular-nums;
}
.sb-regras__lista h3{ font-size:17px; margin-bottom:8px; }
.sb-regras__lista p{ margin:0; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.68); }
.sb-regras__saida{ margin:36px 0 0; }

/* ---------- crenças e descrenças ---------- */
.sb-crencas{ display:grid; gap:20px; }
@media(min-width:860px){ .sb-crencas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
.sb-crencas__col{
  border-radius:var(--raio); padding:26px 24px;
  border:1px solid var(--cinza-borda); background:var(--branco);
}
@media(min-width:768px){ .sb-crencas__col{ padding:30px; } }
/* A coluna do "defende" leva a marca; a do "recusa" fica sobria de proposito.
   Se as duas gritassem, a segunda pareceria ataque em vez de limite. */
.sb-crencas__col--sim{ border-color:var(--amarelo); box-shadow:var(--sombra-1); }
.sb-crencas__col--nao{ background:var(--cinza-claro); }
.sb-crencas__col h3{
  font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  margin-bottom:18px; padding-bottom:14px;
  border-bottom:1px solid var(--cinza-borda);
}
.sb-crencas__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.sb-crencas__col li{
  position:relative; padding-left:26px;
  font-size:15px; line-height:1.6; color:var(--cinza-texto);
}
.sb-crencas__col strong{ color:var(--preto); font-weight:600; }
.sb-crencas__col--sim li::before{
  content:""; position:absolute; left:2px; top:.42em;
  width:9px; height:5px; border-left:2px solid var(--preto); border-bottom:2px solid var(--preto);
  transform:rotate(-45deg);
}
.sb-crencas__col--nao li::before{
  content:""; position:absolute; left:2px; top:.62em;
  width:10px; height:2px; background:var(--cinza-texto);
}

/* ---------- as três essências ---------- */
.sb-essencias{ display:grid; gap:16px; }
/* Um degrau de duas colunas antes das tres. Ir de 1 para 3 em 760px deixava
   o texto em ~22 caracteres por linha, e e o mesmo padrao que .sb-crencas e
   .at-servicos ja usam nesta pagina e na assistencia. */
@media(min-width:620px){ .sb-essencias{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media(min-width:980px){ .sb-essencias{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sb-essencias > div{
  background:var(--branco); border:1px solid var(--cinza-borda);
  border-radius:var(--raio); padding:26px 24px;
}
.sb-essencias h3{
  font-size:19px; margin-bottom:10px;
  padding-bottom:12px; border-bottom:3px solid var(--amarelo);
  display:inline-block;
}
.sb-essencias p{ margin:0; font-size:15px; line-height:1.65; color:var(--cinza-texto); }

/* ---------- o versículo ---------- */
/* Solto no branco ele parecia legenda de outra coisa. Num painel de lavagem
   amarela ele vira parada, sem precisar de uma terceira faixa preta na
   pagina, que ja tem duas. */
.sb-fe__painel{
  border-radius:calc(var(--raio) * 1.5);
  padding:32px 24px;
  background:
    radial-gradient(760px 320px at 88% -20%, rgba(253,210,39,.30), transparent 62%),
    var(--cinza-claro);
  border:1px solid var(--cinza-borda);
}
@media(min-width:768px){ .sb-fe__painel{ padding:48px 44px; } }

.sb-fe__caixa{
  margin:0; padding:0 0 0 20px;
  border-left:3px solid var(--amarelo);
  max-width:60ch;
}
@media(min-width:768px){ .sb-fe__caixa{ padding-left:26px; } }
.sb-fe__caixa p{
  margin:0 0 10px; font-size:22px; line-height:1.45;
  font-weight:700; letter-spacing:-.01em; color:var(--preto);
  text-wrap:balance;
}
@media(min-width:768px){ .sb-fe__caixa p{ font-size:27px; } }
.sb-fe__caixa cite{
  font-style:normal; font-size:14px; font-weight:600; color:var(--cinza-texto);
}
.sb-fe__nota{
  margin:24px 0 0; max-width:60ch;
  font-size:15.5px; line-height:1.68; color:var(--cinza-texto);
}

/* ---------- dados da empresa ---------- */
.sb-dados{ margin:0; display:grid; gap:14px; }
@media(min-width:680px){ .sb-dados{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } }
@media(min-width:1000px){ .sb-dados{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sb-dados > div{
  background:var(--branco); border:1px solid var(--cinza-borda);
  border-radius:12px; padding:18px 20px;
}
.sb-dados dt{
  font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--cinza-texto); font-weight:700; margin-bottom:6px;
}
.sb-dados dd{ margin:0; font-size:15px; line-height:1.6; color:var(--preto-suave); }
.sb-dados a{ color:var(--preto); text-decoration:underline; text-underline-offset:3px; }
.sb-dados a:hover{ color:var(--ambar-texto); }

/* ============================================================
   PORTAL DA TRANSPARENCIA (/portal-da-transparencia/)

   E um canal de ouvidoria: quem chega aqui ja esta chateado. Por isso
   a pagina nao vende nada, abre com a acao logo no topo, e a maior
   peca dela e uma carta assinada em primeira pessoa. Alguem irritado
   quer falar com uma pessoa, nao com uma empresa.

   A ultima secao existe para o portal NAO virar caixa de entrada
   generica: quem quer comprar, consertar ou ler a garantia e mandado
   para o caminho mais curto antes de abrir um caso.
   ============================================================ */

.pt-topo{ padding-block:calc(var(--topo-espaco) + 28px) 48px; }
@media(min-width:768px){ .pt-topo{ padding-block:calc(var(--topo-espaco) + 48px) 56px; } }
.pt-topo h1{ font-size:32px; }
@media(min-width:768px){ .pt-topo h1{ font-size:48px; } }
.pt-topo .cabecalho-secao{ margin-bottom:0; }
/* Era a unica primeira tela do site sem ancora visual: so parede escura e
   texto. Numa pagina de ouvidoria isso e o contrario do que se quer, porque
   quem chega esta chateado e precisa ver que tem gente do outro lado.
   O arquivo e o mesmo retrato usado na Sobre e na home, mas o corte aqui e
   fechado no rosto, entao le como outra foto em vez de repeticao. */
.pt-topo__grade{ display:grid; gap:32px; align-items:center; }
@media(min-width:900px){
  .pt-topo__grade{ grid-template-columns:1.35fr .65fr; gap:52px; }
}
.pt-rosto img{
  width:100%; height:auto; display:block;
  border-radius:var(--raio);
  aspect-ratio:4/3; object-fit:cover; object-position:50% 42%;
}
@media(min-width:900px){ .pt-rosto img{ aspect-ratio:4/5; } }
.pt-rosto figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:44px 18px 16px;
  background:linear-gradient(to top, rgba(26,26,26,.94) 34%, rgba(26,26,26,0));
  font-size:14.5px; font-weight:600; color:var(--branco);
}
.pt-topo__acoes{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }


.pt-selos{
  list-style:none; margin:40px 0 0; padding:26px 0 0;
  border-top:1px solid rgba(255,255,255,.16);
  display:grid; gap:22px;
}
@media(min-width:600px){ .pt-selos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; } }
@media(min-width:900px){ .pt-selos{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.pt-selos__n{
  display:block; font-size:22px; font-weight:800; letter-spacing:-.01em;
  color:var(--amarelo);
}
.pt-selos__l{
  display:block; margin-top:6px;
  font-size:14.5px; line-height:1.45; color:rgba(255,255,255,.72);
}

/* ---------- os tres passos ---------- */
/* Tres cartoes brancos soltos nao diziam que um passo vem depois do outro.
   O traco no topo de cada um, com o primeiro em amarelo, e o mesmo recurso
   usado no fluxo da assistencia: mesma ideia, mesma leitura. */
.pt-passos{ list-style:none; margin:0; padding:0; display:grid; gap:26px; }
@media(min-width:820px){ .pt-passos{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } }
.pt-passos li{ position:relative; padding-top:20px; border-top:2px solid var(--cinza-borda); }
.pt-passos li:first-child{ border-top-color:var(--amarelo); }
.pt-passos__n{
  display:grid; place-items:center;
  width:32px; height:32px; margin-bottom:14px;
  border-radius:50%; background:var(--amarelo); color:var(--preto);
  font-size:14.5px; font-weight:800; font-variant-numeric:tabular-nums;
}
.pt-passos h3{ font-size:17.5px; margin-bottom:8px; }
.pt-passos p{ margin:0; font-size:15px; line-height:1.62; color:var(--cinza-texto); }

/* ---------- a carta ---------- */
/* Carta e texto, e texto de carta se le melhor numa coluna so. A foto que
   estava aqui saiu para o topo: mantida nos dois lugares, ela viraria a
   terceira aparicao do mesmo retrato na mesma navegacao.
   O painel existe para a carta parecer um documento assinado, e nao mais um
   bloco de copy no meio da pagina. */
.pt-carta__painel{
  max-width:74ch; margin:0 auto;
  border-radius:calc(var(--raio) * 1.5);
  padding:32px 24px;
  background:
    radial-gradient(680px 300px at 92% -18%, rgba(253,210,39,.26), transparent 60%),
    var(--cinza-claro);
  border:1px solid var(--cinza-borda);
}
@media(min-width:768px){ .pt-carta__painel{ padding:48px 52px; } }

.pt-carta__texto{ margin:0; padding:0; }
.pt-carta__texto p{ margin:0 0 16px; font-size:16.5px; line-height:1.72; color:var(--preto-suave); }
/* A primeira frase e a que prende, entao sai do corpo do texto. */
.pt-carta__abre{
  font-size:21px !important; line-height:1.45 !important;
  font-weight:700; letter-spacing:-.01em; color:var(--preto) !important;
  text-wrap:balance;
}
@media(min-width:768px){ .pt-carta__abre{ font-size:25px !important; } }
.pt-carta__texto strong{ color:var(--preto); font-weight:700; }
.pt-carta__assina{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--cinza-borda);
  font-size:14px; line-height:1.5; color:var(--cinza-texto);
}
.pt-carta__assina span{
  display:block; font-size:17px; font-weight:800; color:var(--preto);
  letter-spacing:-.01em; margin-bottom:2px;
}

/* ---------- as seis regras ---------- */
.pt-regras{ margin:0; display:grid; gap:16px; }
@media(min-width:700px){ .pt-regras{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
@media(min-width:1040px){ .pt-regras{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.pt-regras > div{
  padding-top:18px; border-top:2px solid rgba(255,255,255,.16);
}
.pt-regras > div:first-child{ border-top-color:var(--amarelo); }
.pt-regras dt{ font-size:16.5px; font-weight:700; line-height:1.35; margin-bottom:8px; }
.pt-regras dd{ margin:0; font-size:14.5px; line-height:1.62; color:rgba(255,255,255,.68); }
.pt-regras a{ color:var(--amarelo); text-decoration:underline; text-underline-offset:3px; }
.pt-regras a:hover{ color:var(--amarelo-claro); }

/* ---------- para onde ir em vez de abrir caso ---------- */
/* Era o QUARTO "titulo grudado ao lado de uma lista" do site, depois das duas
   politicas e da trajetoria da Sobre. Virou grade de quatro atalhos, que e
   forma diferente e, aqui, mais util: sao quatro saidas equivalentes, e nao
   uma sequencia. */
.pt-rotas{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
@media(min-width:700px){ .pt-rotas{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; } }
.pt-rotas li{
  background:var(--cinza-claro); border:1px solid var(--cinza-borda);
  border-radius:var(--raio); padding:24px;
  display:flex; flex-direction:column;
}
.pt-rotas h3{ font-size:17px; margin-bottom:6px; }
.pt-rotas p{ margin:0 0 16px; font-size:15px; line-height:1.6; color:var(--cinza-texto); }
/* Empurra o link para o rodape do cartao, para os quatro terminarem alinhados
   mesmo com quantidade de texto diferente. */
.pt-rotas a{ margin-top:auto; align-self:flex-start; }
.pt-rotas a{
  font-size:14.5px; font-weight:600; color:var(--preto);
  text-decoration:underline; text-underline-offset:4px;
}
.pt-rotas a:hover{ color:var(--ambar-texto); }

/* Foto dentro de bloco de texto legal. Uma so, e na secao que fala de um
   objeto fisico: sem ela, "aparelho lacrado" e abstrato para quem nunca
   comprou assim. Nas outras secoes nao entra foto, porque documento
   juridico com ilustracao a cada topico vira folheto. */
.legal__foto{
  margin:0 0 18px; float:none;
  border-radius:12px; overflow:hidden;
}
.legal__foto img{
  width:100%; height:auto; display:block;
  aspect-ratio:16/9; object-fit:cover; object-position:50% 26%;
}
.legal__foto figcaption{
  padding:10px 2px 0;
  font-size:13.5px; line-height:1.5; color:var(--cinza-texto);
}
@media(min-width:620px){
  /* Ao lado do texto, e nao empurrando ele para baixo. */
  .legal__foto{ float:right; width:44%; margin:4px 0 16px 22px; }
  .legal__foto img{ aspect-ratio:3/4; }
}

/* ---------- catalogo ---------- */
/* Aviso de quantos produtos sobraram no filtro. Vive para leitor de tela,
   mas fica visivel tambem: quem filtrou quer saber quantos restaram. */

.catalogo__vazio{
  margin:0; padding:32px 24px; text-align:center;
  background:var(--cinza-claro); border-radius:var(--raio);
  font-size:16px; line-height:1.6; color:var(--cinza-texto);
}
.catalogo__vazio a{ color:var(--preto); text-decoration:underline; text-underline-offset:3px; }
.catalogo__vazio a:hover{ color:var(--ambar-texto); }


/* ============================================================
   CATALOGO DE 335 PRODUTOS (/loja/)

   Desenho escolhido entre cinco propostas independentes, cada uma feita por
   uma lente diferente (quem ja sabe o que quer, quem esta passeando, celular
   ruim em 4G, acessibilidade, e quem atende no WhatsApp), julgadas por tres
   juizes cada.

   A ideia central: os 335 cards nascem AGRUPADOS em 12 secoes de
   departamento, com ancora propria. Sem JavaScript isso ja e navegacao
   utilizavel. Com JavaScript, a mesma fita de chips vira filtro, e marca e
   condicao entram num painel separado.

   Por que o painel nao fica dentro da barra grudada: 41 pilulas de marca num
   sticky de 375px viram parede que cobre a lista.
   ============================================================ */
/* ==========================================================================
   CATÁLOGO com 335 produtos
   Só o que não dá para reaproveitar. Ficam como estão: .grade-produtos
   (css:1011), .produto e toda a família (css:1047 a 1174), .filtro e


/* ---------- 2. ROLAGEM SECA NESTA PÁGINA ----------
   css:106 tem scroll-behavior:smooth. Num documento de 40 mil pixels, cada
   clique na fita atravessa a página inteira animando e dispara o lazy-load
   de tudo que passa pelo caminho, o que derruba justamente a economia que
   esta página inteira está tentando fazer. Aqui a âncora salta.
   :has não suportado cai no comportamento de hoje, que é o pior caso
   aceitável. */
:root:has(.catalogo){ scroll-behavior:auto; }


/* ---------- 3. CABEÇALHO MENOR ----------
   .cabecalho-secao respira 40px (css:292). Numa página em que a ferramenta é
   o conteúdo, isso empurra a busca para fora da primeira tela do celular. */
.cabecalho-secao--curto{ margin-bottom:20px; }
@media(min-width:768px){ .cabecalho-secao--curto{ margin-bottom:28px; } }


/* ---------- 4. BARRA GRUDADA ----------
   UMA linha. Medido: 10 de respiro + 44 do campo + 10 + 1 da borda = 65px,
   8% de uma tela de 812. A fita fica de fora, porque fita mais barra dariam
   109px permanentes num celular de 375px cujos cards têm 150px de largura.

   z-index 80: abaixo do topo fixo (100) e abaixo do .zap-flutuante (90), que
   continua por cima porque é o caminho para a venda.

   SEM backdrop-filter. A barra fica na tela enquanto 335 cards passam por
   baixo, e desfoque custa por pixel a cada quadro. Fundo sólido resolve
   igual e não repinta nada.

   Sangra o respiro para os dois lados para cobrir os cards que passam por
   baixo, mesmo padrão de css:992. */
.catalogo__barra{
  position:sticky;
  top:var(--topo-espaco);
  z-index:80;
  display:flex; align-items:center; gap:8px;
  margin-inline:calc(var(--respiro) * -1);
  padding:10px var(--respiro);
  background:var(--branco);
  border-bottom:1px solid var(--cinza-borda);
}
@media(min-width:768px){
  .catalogo__barra{ gap:12px; }
}

.busca{ position:relative; flex:1; min-width:0; display:flex; align-items:center; }
.busca__lupa{
  position:absolute; left:13px;
  width:18px; height:18px;
  color:var(--cinza-texto);
  pointer-events:none;
}
.busca__campo{
  width:100%; height:44px;
  padding:0 42px 0 39px;
  font-family:inherit; font-weight:600;
  /* 16px não é escolha de estilo: abaixo disso o Safari do iPhone dá zoom ao
     focar o campo, e a página volta desalinhada. */
  font-size:16px;
  color:var(--preto);
  background:var(--branco);
  border:1px solid var(--cinza-borda);
  border-radius:var(--raio-btn);
  -webkit-appearance:none; appearance:none;
}
.busca__campo::placeholder{ color:var(--cinza-texto); font-weight:500; }
/* O X nativo do type=search não é estilizável e some no fundo branco. O nosso
   tem 32px de alvo e um rótulo para leitor de tela. */
.busca__campo::-webkit-search-cancel-button,
.busca__campo::-webkit-search-decoration{ -webkit-appearance:none; }
.busca__limpar{
  position:absolute; right:6px;
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  background:var(--cinza-claro);
  border:0; border-radius:999px;
  font-size:17px; line-height:1; color:var(--cinza-texto);
  cursor:pointer;
}
.busca__limpar:hover{ color:var(--preto); }


/* O contador de filtros ativos só aparece quando existe filtro ativo. */


/* ---------- 5. FITA DE DEPARTAMENTOS ----------
   Uma linha que rola de lado no celular, nunca duas: a altura dela precisa
   ser constante para o topo da página não pular quando o texto do sistema
   estiver maior. Acima de 768px sobra largura e ela quebra em linhas.
   Não usa .filtro porque .filtro traz margin-bottom:28px (css:2209). */


@media(min-width:768px){

}


/* ---------- 6. PAINEL DE MARCA E CONDIÇÃO ----------
   FORA da barra grudada. Aberto com 41 pílulas de marca numa tela de 375px,
   dentro do sticky ele viraria uma parede que cobre a lista ou empurra o
   primeiro card para fora da tela.

   No celular é folha de baixo, com altura máxima e rolagem própria, então a
   lista continua atrás dele e a pessoa vê o resultado mudar.

   z-index 95 é deliberado: fica acima do .zap-flutuante (90), porque a
   pílula do WhatsApp é fixed no canto inferior direito e pousaria em cima
   dos chips da folha. Continua abaixo do topo (100). */

.catalogo__fundo{
  position:fixed; inset:0; z-index:94;
  background:rgba(26,26,26,.42);
}
.catalogo__fechar{
  width:100%; margin-top:18px; padding:13px 20px;
  background:var(--preto); color:var(--branco);
  border:0; border-radius:var(--raio-btn);
  font-family:inherit; font-size:15px; font-weight:700;
  cursor:pointer;
}
@media(min-width:768px){

  .catalogo__fundo, .catalogo__fechar{ display:none; }
}

/* Cada eixo é uma linha com rótulo à esquerda no desktop e em cima no
   celular, para as pílulas de marca não começarem no meio da largura. */


/* A pílula que abre as 31 marcas restantes é ação, não estado: fica sem
   fundo para não competir com a marca selecionada. */


/* Combinação que zera. Some do alcance do toque e do tab, mas continua
   legível: a contagem em zero é informação, "a Sony não tem
   eletrodoméstico" é uma resposta. */


/* ---------- 7. LINHA DE RESULTADO ---------- */


/* ============ LISTAGEM DO CATALOGO ============
   Coluna de filtro a esquerda e grade a direita, que e como Mercado Livre,
   Amazon, Magazine Luiza e Fast Shop resolvem listagem grande. Os quatro
   aceitam perder uma coluna de produto para manter o filtro a vista, porque
   com centenas de itens o problema de quem chega e REDUZIR, e nao ver mais.

   Antes disto a pagina empilhava 12 departamentos com os 330 produtos de uma
   vez, e tinha 43.572px, quarenta e oito telas. Agora sao 60 por pagina. */
.listagem{ display:grid; gap:24px; align-items:start; }
@media(min-width:900px){
  .listagem{ grid-template-columns:264px minmax(0,1fr); gap:40px; }
}

/* ---------- coluna de filtro ---------- */
.listagem__lado{ display:flex; flex-direction:column; gap:22px; }
@media(min-width:900px){
  .listagem__lado{ position:sticky; top:var(--topo-espaco); max-height:calc(100vh - var(--topo-espaco) - 24px); overflow-y:auto; padding-right:4px; }
}
.lado__topo{ display:flex; align-items:center; justify-content:space-between; }
.lado__t{ font-size:13px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--cinza-texto); margin:0; }
.lado__fechar, .lado__ver{ display:none; }

.facet{ border-top:1px solid var(--cinza-borda); }
/* O cabecalho e o <summary>: e ele que abre e fecha, entao precisa de area de
   clique inteira, mao de ponteiro e o marcador nativo removido. */
.facet__t{
  display:flex; align-items:center; gap:8px;
  padding:13px 0; margin:0;
  font-size:11.5px; font-weight:800;
  letter-spacing:.07em; text-transform:uppercase; color:var(--cinza-texto);
  cursor:pointer; list-style:none;
}
.facet__t::-webkit-details-marker{ display:none; }
.facet__t:hover{ color:var(--preto); }
.facet__t:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--amarelo); border-radius:6px; }
.facet__nome{ flex:0 0 auto; }
/* O valor escolhido aparece no cabecalho fechado: da para ver o que esta
   filtrado sem abrir os quatro grupos. */
.facet__eco{
  flex:1 1 auto; min-width:0;
  font-size:13px; font-weight:600; letter-spacing:normal; text-transform:none;
  color:var(--preto);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.facet__eco:not(:empty)::before{ content:"· "; color:var(--cinza-borda); }
.facet__seta{
  flex:0 0 auto; width:15px; height:15px; margin-left:auto;
  transition:transform .18s var(--curva, ease);
}
.facet[open] .facet__seta{ transform:rotate(180deg); }
.facet[open] .facet__t{ color:var(--preto); }
.facet__v{ padding-bottom:14px; }
.facet__v{ display:flex; flex-direction:column; padding-bottom:14px; }
/* Valor de filtro e LINHA, e nao pilula: doze departamentos em pilula viram
   duas fileiras que quebram sozinhas e nao alinham a contagem. Em linha, a
   contagem fica na mesma coluna a direita e o olho compara de cima a baixo. */
.facet__b{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:5px 10px 5px 12px; margin-inline:-12px;
  border:0; background:none; border-radius:7px;
  font-size:13.5px; line-height:1.35; color:var(--preto-suave); text-align:left;
  cursor:pointer; transition:background .16s ease, color .16s ease;
}
.facet__b span{ font-size:12px; color:var(--cinza-texto); font-variant-numeric:tabular-nums; }
.facet__b:hover{ background:var(--cinza-claro); }
/* O escolhido NAO e mais uma barra preta de ponta a ponta.
   Aquilo dava a um filtro o peso de um botao de acao, e como o valor escolhido
   ja aparece em chip acima da grade, a coluna estava dizendo a mesma coisa duas
   vezes, uma delas gritando. Agora e negrito com um risco amarelo na entrada,
   que e o amarelo fazendo o que o manual manda: enfase, nao estrutura. */
.facet__b[aria-pressed="true"]{
  background:var(--cinza-claro);
  color:var(--preto); font-weight:700;
  box-shadow:inset 3px 0 0 var(--amarelo);
}
.facet__b[aria-pressed="true"] span{ color:var(--preto); }
.facet__b:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--amarelo); }

/* Lista longa fica cortada, com "Ver todos".
   A Marca tem 40 valores e sozinha dava 1.339px: a coluna inteira chegava a
   2.404px, quase tres telas, e um filtro que exige rolar nao reduz nada. O
   Mercado Livre corta em 9 e o Magazine Luiza em 5. O Fast Shop nao corta e a
   coluna dele tem 4.683px, mais alta que a propria grade de produto. */
.facet--cortado .facet__b:nth-of-type(n+14){ display:none; }
.facet--cortado.facet--aberto .facet__b:nth-of-type(n+14){ display:flex; }
.facet__mais{
  margin:6px 0 0; padding:4px 0; border:0; background:none;
  font:inherit; font-size:12.5px; font-weight:700; color:var(--cinza-texto);
  text-align:left; cursor:pointer; border-bottom:1px solid transparent;
}
.facet__mais:hover{ color:var(--preto); border-bottom-color:var(--amarelo); }
.facet__mais:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--amarelo); border-radius:4px; }

/* ---------- barra de cima ---------- */
.listagem__corpo{ container:listagem / inline-size; }
.listagem__barra{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--cinza-borda);
}
.listagem__conta{ margin:0; font-size:14.5px; font-weight:600; color:var(--preto); font-variant-numeric:tabular-nums; }
.listagem__ferramentas{ display:flex; align-items:center; gap:10px; }
.listagem__abrir{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 16px; border-radius:9999px;
  border:1px solid var(--cinza-borda); background:var(--branco);
  font-size:14px; font-weight:600; color:var(--preto); cursor:pointer;
}
.listagem__abrir svg{ width:16px; height:16px; }
@media(min-width:900px){ .listagem__abrir{ display:none !important; } }
.listagem__select{
  appearance:none; -webkit-appearance:none;
  padding:9px 34px 9px 14px; border-radius:9999px;
  border:1px solid var(--cinza-borda); background:var(--branco);
  font:inherit; font-size:14px; font-weight:600; color:var(--preto); cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
}
.listagem__select:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--amarelo); }

/* ---------- chips do que esta filtrado ---------- */
.listagem__ativos{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.ativo{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px; border-radius:9999px;
  border:1px solid var(--cinza-borda); background:var(--cinza-claro);
  font-size:13.5px; font-weight:600; color:var(--preto); cursor:pointer;
}
.ativo span{ color:var(--cinza-texto); font-size:15px; line-height:1; }
.ativo:hover{ border-color:var(--preto); }
.ativo--limpa{ background:none; border-style:dashed; color:var(--cinza-texto); }
.ativo:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--amarelo); }

/* A frase do preco fica UMA vez aqui, e nao repetida nos 330 cards. */
.listagem__aviso{
  margin:14px 0 0; font-size:13.5px; line-height:1.5;
  color:var(--cinza-texto); max-width:60ch;
}
.grade-produtos{ margin-top:22px; }

/* ---------- paginacao ---------- */
.paginacao{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:40px; }
.pag{
  min-width:40px; padding:9px 13px; border-radius:9999px;
  border:1px solid var(--cinza-borda); background:var(--branco);
  font:inherit; font-size:14px; font-weight:600; color:var(--preto);
  cursor:pointer; font-variant-numeric:tabular-nums;
  transition:border-color .16s ease, background .16s ease;
}
.pag:hover:not(:disabled){ border-color:var(--preto); }
.pag--atual{ background:var(--preto); color:var(--branco); border-color:var(--preto); }
.pag:disabled{ opacity:.4; cursor:default; }
.pag:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--amarelo); }

/* ---------- painel de filtro no celular ---------- */
@media(max-width:899px){
  /* O painel some com display e nao com visibility.
     Animar visibility parece elegante e da problema: o valor e discreto, a
     transicao dele briga com a do transform e o painel fica montado, ocupando
     ordem de foco e leitura, mesmo fechado. Com [hidden] ele sai da arvore de
     verdade, e quem usa leitor de tela nao passeia por dentro de um filtro
     fechado. A animacao fica so no transform e no opacity, que sao continuos. */
  /* z-index 110 porque o painel e modal: ele precisa cobrir a capsula do topo
     (100) e a pilula do WhatsApp (90). Com 80 os dois passavam por cima do
     titulo do proprio painel. */
  .listagem__lado{
    position:fixed; inset:0; z-index:110;
    background:var(--branco); padding:20px 24px 108px;
    overflow-y:auto; gap:18px;
  }
  /* A pilula do WhatsApp sai de cena enquanto o painel esta aberto: as duas
     moram no mesmo canto de baixo e disputavam o polegar. */
  .filtros-abertos .zap-flutuante{ display:none; }
  .listagem__lado[hidden]{ display:none; }
  .listagem__lado--aberto{
    animation:painelEntra .28s cubic-bezier(.22,.61,.36,1);
  }
  @keyframes painelEntra{
    from{ transform:translateY(16px); opacity:0 }
    to{ transform:none; opacity:1 }
  }
  .lado__topo{ position:sticky; top:-20px; background:var(--branco); padding-block:8px; z-index:1; }
  .lado__t{ font-size:18px; letter-spacing:-.01em; text-transform:none; color:var(--preto); }
  .lado__fechar{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; margin-right:-8px;
    border:0; background:none; font-size:26px; line-height:1; color:var(--preto); cursor:pointer;
  }
  .lado__ver{
    display:block; position:fixed; left:24px; right:24px; bottom:24px;
    padding:15px; border:0; border-radius:9999px;
    background:var(--amarelo); color:var(--preto);
    font:inherit; font-size:15px; font-weight:700; cursor:pointer;
    box-shadow:var(--sombra-2);
  }
  /* Trava a pagina atras do painel, senao o dedo rola o catalogo por baixo. */
  .filtros-abertos body{ overflow:hidden; }
}


/* ---------- 9. ESTADO VAZIO ----------
   .catalogo__vazio já existe (css:3156). Só falta a linha de ações. */
.catalogo__vazio-t{ margin:0 0 18px; font-weight:600; color:var(--preto); }
.catalogo__vazio-a{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}