/* =========================================================
   PHARMA FIT — Saúde · Performance · Bem-estar
   Folha de estilo principal (mobile-first)
   ========================================================= */

:root{
  --gold:#b08c4a;
  --gold-2:#c9a863;
  --gold-3:#e7ce9b;
  --gold-soft:#e6d7ba;

  --ink:#101010;
  --ink-2:#2b2b2b;
  --muted:#6e6a64;
  /* o cinza mais claro, para nota de pé e ícone dentro de campo */
  --muted-2:#98928a;

  --cream:#f6f2ec;
  --cream-2:#fbf9f5;
  --card:#ffffff;
  --line:#e8e1d6;
  --black:#0c0c0c;

  --shell:520px;
  /* A ALTURA DA BARRA DE BAIXO, MEDIDA NO NAVEGADOR (71px).
     Ela aparece em três contas: o espaço que o conteúdo reserva, a
     altura de onde o recado (toast) nasce, e o rolar até uma âncora. Eu
     tinha escrito 62 de cabeça nas duas primeiras, e a barra tem 71 —
     três pixels de folga. Num lugar só, elas não têm como discordar. */
  --barra-pe:71px;
  --radius:18px;
  --radius-lg:24px;

  /* A FONTE DOS TÍTULOS.

     Brian, 19/09/2026, com a foto do título da home: "Onde tiver essa
     fonte troque, nao gosto dela". A fonte era a Playfair Display, a
     serifada que estava aqui desde o começo — e ela estava em 44 lugares
     entre o site e o painel, do título da home ao total do carrinho.

     No lugar dela, a mesma Inter do resto do site, em peso 600. É a
     segunda vez que ele pede isso: em 18/09 o nome do produto no cartão
     já tinha saído da serifada por pedido dele ("texto normal"). Duas
     vezes é preferência, não acaso.

     POR QUE A VARIÁVEL CONTINUA EXISTINDO, se ela virou cópia da
     `--sans`: porque ela diz QUAL É O PAPEL do texto, não qual é o
     desenho da letra. Enquanto as 44 regras apontarem para cá, trocar a
     fonte dos títulos — de novo — é mexer nesta linha e em mais nenhuma.
     Se ela sumisse, a próxima troca seria caçar 44 lugares outra vez.

     O peso vive nas regras, e não aqui, porque `font-family` não carrega
     peso. Todas as 44 foram para 600: a Inter 500 num título de 50px sai
     apagada do lado do traço grosso que a Playfair tinha. */
  --titulo:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;
  --sans:"Inter","Helvetica Neue",Arial,system-ui,sans-serif;

  --shadow-sm:0 6px 18px rgba(40,30,10,.06);
  --shadow-md:0 14px 34px rgba(40,30,10,.10);
  --shadow-lg:0 24px 60px rgba(40,30,10,.14);

  --nav-h:74px;

  /* A COR DO FUNDO DA FOTO DO PRODUTO, na moldura da vitrine.
     Branco é o padrão; quem troca por cartão é o JavaScript, depois de
     ler os quatro cantos da foto (ver `.product__media--foto`). Ela é
     DECLARADA aqui de propósito: sem isto, `var(--fundo-foto,#fff)`
     seria uma reserva escondendo uma variável que não existe em lugar
     nenhum — e foi exatamente isso que o meu conferidor de CSS apontou
     quando eu escrevi a regra sem esta linha. */
  --fundo-foto:#fff;

  /* ---- uma cor para cada categoria do catalogo ----------------
     Escolhidas para conviver com o creme e o dourado da casa: sao
     tons fundos e quebrados, nao cores puras. Cor pura ao lado de
     dourado briga e deixa a vitrine com cara de promocao de
     supermercado.

     O tom 1 e o cheio (fundo do chip marcado) e o 2 e o mais claro
     (topo do degrade), para o chip marcado ter volume.

     Sao QUATRO para tres categorias de proposito: no dia em que
     entrar uma quarta, ela ja tem cor. Da quinta em diante o
     rodizio recomeca, e nenhuma fica sem cor definida. */
  --cat1:#2f6f62;  --cat1-2:#3f8b7a;   /* verde fundo    */
  --cat2:#a4552f;  --cat2-2:#c06a3d;   /* terracota      */
  --cat3:#6a4270;  --cat3-2:#85558b;   /* ameixa         */
  --cat4:#3a5a7a;  --cat4-2:#4d739a;   /* azul ardosia   */
}

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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}

/* ---------- shell / container ---------- */

.shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  background:linear-gradient(180deg,#f8f5f0 0%,#f4efe7 42%,#f7f3ed 100%);
  min-height:100vh;
  position:relative;
  /* `clip` E NÃO `hidden` — ISTO CONSERTA A BARRA DE CIMA.
   *
   * A barra é `position:sticky` desde sempre, com fundo translúcido e
   * desfoque: ela foi DESENHADA para ficar grudada no alto enquanto a
   * pessoa rola. E ela nunca grudou.
   *
   * O culpado era o `overflow-x:hidden` aqui. Esconder a rolagem em um
   * eixo faz o navegador criar uma CAIXA DE ROLAGEM neste elemento (o
   * outro eixo vira `auto`), e um `sticky` gruda em relação à caixa de
   * rolagem mais próxima — que passava a ser esta, e não a janela. A
   * página rola na janela, então a barra subia junto e ia embora.
   * Medido em 18/09/2026: rolando 900px, a barra ficava 900px acima do
   * alto da tela, nas quatro páginas que eu olhei.
   *
   * `overflow-x:clip` corta a mesma coisa (nada vaza para o lado) SEM
   * criar caixa de rolagem — então o sticky volta a se medir pela
   * janela. As duas linhas ficam: navegador antigo que não conhece
   * `clip` ignora a segunda e segue com `hidden`, como era.
   *
   * ISSO APARECEU POR CAUSA DO CARRINHO NO TOPO. O Brian pôs um ícone
   * de carrinho ali e pediu a foto voando até ele; com a barra
   * escapando, o alvo do voo estava fora da tela e a animação
   * acontecia onde ninguém vê. Um pedido de enfeite achou um defeito
   * de navegação: o carrinho e o menu só eram alcançáveis no alto da
   * página. */
  overflow-x:hidden;
  overflow-x:clip;
  box-shadow:0 0 60px rgba(60,45,20,.07);
}

.wrap{padding-inline:20px}

/* ---------- topbar ---------- */

.topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 20px 12px;
  background:rgba(250,247,242,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* NA PÁGINA DA FOTO, A BARRA DE CIMA É BRANCA.
 *
 * O topo dessa página é branco (é o fundo da foto virando fundo da
 * página), e a barra é creme a 86%: dava uma faixa de outra cor
 * exatamente na emenda, e no desenho dele a barra e a foto são a mesma
 * superfície. A foto entra por TRÁS da barra, então a barra tem de
 * desaparecer nela.
 *
 * Amarrado à presença da foto, e não a uma lista de páginas: quem
 * tiver a foto do topo ganha a barra branca, quem não tiver continua
 * com o creme das outras quinze. Lista de páginas escrita à mão é o que
 * já me custou o menu e os scripts. */
body:has(.hero__art--foto) .topbar{
  background:rgba(253,253,253,.9);
}

/* `min-width:0` NAO e enfeite aqui.
   Sem ele, a marca e um item de flex que nao encolhe abaixo do proprio
   conteudo, e o texto dela invadia os icones do topo — medido: 85px de
   invasao em 375px, em TODAS as paginas. Era o coracao e o carrinho
   sentados em cima de "BEM-ESTAR", e foi a foto da tela que me mostrou.
   E a mesma familia do `1fr` que escondeu metade dos numeros do painel:
   o padrao do flex e do grid e "nao encolho", e a correcao e dizer que
   pode. */
/* `flex:1 1 0` e nao `1 1 auto`: assim a largura da marca e exatamente o
   espaco que sobrou depois dos icones, sem depender do texto de dentro —
   e e isso que deixa a propria marca ser medida (o `container-type`
   abaixo pede que a largura dela nao venha do conteudo). */
.brand{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 0;
  container-type:inline-size}
.brand__mark{width:46px;height:46px;flex:none}

.brand__type{display:flex;flex-direction:column;gap:4px;min-width:0}
.brand__name{
  /* o nome encurta com reticencias em vez de passar por cima do resto */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:20px;
  font-weight:600;
  letter-spacing:.26em;
  line-height:1;
  color:var(--ink);
}
.brand__tag{
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:7px;
  letter-spacing:.24em;
  color:var(--muted);
  white-space:nowrap;
}
.brand__tag::before,
.brand__tag::after{
  content:"";
  height:1px;
  width:14px;
  background:var(--gold);
  opacity:.7;
}

/* QUANDO O NOME NAO CABE, ELE SAI — NAO FICA CORTADO.
 *
 * Eu tinha resolvido a sobreposicao pondo reticencias no nome. Parou de
 * invadir os icones, e eu chamei de consertado. A foto da tela mostrou o
 * resultado: "PHARM…" na barra. Medido depois, em toda largura de
 * celular comum:
 *
 *     320px  o nome precisa de 116px e tem  38  -> cortado
 *     375px  precisa 124, tem  93              -> cortado
 *     390px  precisa 124, tem 108             -> cortado
 *     414px  precisa 124, tem 124             -> inteiro
 *     600px  precisa 175, tem 163             -> cortado (aqui entra
 *                                                mais um botao no canto)
 *
 * Marca cortada e pior que marca so com o monograma: o PF e a logo, diz
 * a mesma coisa e cabe. Quem usa leitor de tela nao perde nada — o
 * proprio link da barra tem o nome escrito por inteiro no aria-label.
 *
 * A pergunta e feita ao espaco QUE A MARCA RECEBEU (@container), e nao a
 * largura da tela. E de proposito: a largura da tela nao sabe quantos
 * icones o canto tem, e sao 182px numa pagina e 247px noutra — foi
 * exatamente essa diferenca que cortou o nome em 600px enquanto 520px
 * estava inteiro. Foi o mesmo erro que cortou os interesses na tela de
 * atendimento, e agora as duas coisas perguntam para o lugar certo.
 *
 * Os numeros (58 = monograma 46 + vao 12):
 *   nome inteiro   58 + 124 = 182px de marca
 *   com a etiqueta 58 + 216 = 274px de marca
 *
 * Navegador antigo, sem @container, fica com o de hoje: nome visivel com
 * reticencias se faltar espaco. Nao melhora, mas tambem nao piora.
 *
 * As regras ESCONDEM (e nao mostram) de proposito: mais abaixo no
 * arquivo existe um `@media` que esconde a etiqueta abaixo de 520px, e
 * quem vem depois ganha. Escrita como "esconder", a regra de container
 * concorda com ele em vez de brigar; escrita como "mostrar", perderia.
 *
 * E a FONTE tambem pergunta ao espaco. Na primeira versao eu pus so o
 * limite de 181px e fui medir: em 600px a marca recebe 221px, o que
 * passa de 181 — mas ali a fonte e de 20px, o nome pede 175 e com o
 * monograma sao 233. Cortava por 12px. O tamanho da letra vinha de um
 * `@media`, ou seja, da tela, enquanto o espaco vinha do cartao: dois
 * donos para a mesma conta, e por isso a conta nao fechava. Agora os
 * dois saem do mesmo lugar. */
@container (max-width:233px){
  .brand__name{font-size:16px}
}
@container (max-width:181px){
  .brand__name{display:none}
}
@container (max-width:273px){
  .brand__tag{display:none}
}

.topbar__actions{
  flex:none;display:flex;align-items:center;gap:8px}

/* ---- botão de conta, no canto superior direito ----------------
   Mostra "Entrar" para quem o site ainda não conhece, e o primeiro
   nome de quem já se identificou. O nome é o que diz à pessoa que o
   aparelho lembra dela — mais útil que um ícone de bonequinho. */
.btn-conta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:38px;
  padding:0 14px;
  border:1px solid var(--gold);
  border-radius:999px;
  color:var(--gold);
  background:transparent;
  font-size:13.5px;
  font-weight:500;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.btn-conta svg{flex:none}
.btn-conta:hover{background:rgba(176,140,74,.1)}
.btn-conta:active{transform:scale(.97)}

/* Identificada, ela ganha o fundo cheio: é um estado diferente, e
   estado diferente tem de parecer diferente. */
.btn-conta.is-dentro{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#fff;
  border-color:transparent;
  box-shadow:0 6px 16px rgba(176,140,74,.26);
}

.btn-conta__nome{
  max-width:11ch;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Em tela estreita o texto sai e fica só o desenho: na barra de cima
   cabem poucas coisas, e o nome do site vem antes do meu botão. */
@media (max-width:560px){
  .btn-conta{padding:0;width:38px;justify-content:center;gap:0}
  .btn-conta__nome{display:none}
}

.icon-btn{
  width:44px;height:44px;
  display:grid;place-items:center;
  border-radius:50%;
  border:1px solid var(--gold-soft);
  color:var(--gold);
  background:rgba(255,255,255,.55);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.icon-btn:hover{background:#fff;border-color:var(--gold);transform:translateY(-1px)}
.icon-btn--bare{border-color:transparent;background:transparent}

/* O NÚMERO DO CARRINHO NO ITEM DA GAVETA.
   O `.carrinho-contador` já existe e já se posiciona sozinho dentro do
   botão redondo do menu. Aqui dentro da gaveta ele é outra coisa: uma
   continha ao lado do nome, alinhada à direita da linha. */
.drawer__nav a{position:relative}
.drawer__conta{
  margin-left:auto;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background:var(--gold);
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  display:grid;
  place-items:center;
}

/* ---------- hero ---------- */

/* O TOPO É BRANCO INTEIRO, E O CREME COMEÇA NOS CARTÕES.
 *
 * "Ainda não está igual a foto que eu te mostrei" — dava para ver o
 * retângulo da foto: uma linha atravessando embaixo dela.
 *
 * Medi as duas superfícies em vez de adivinhar. A foto é branco 253 em
 * TODAS as bordas, inclusive na última linha (248). O creme da página é
 * 246,242,236 — pouca diferença no vermelho, muita no azul, e o olho
 * desenha a borda com isso. Não há recorte a fazer: basta a página ser
 * branca onde a foto está.
 *
 * DUAS TENTATIVAS ERRADAS, E POR QUE CADA UMA FALHOU
 *
 *   1. degradê na ALTURA do bloco (`#fff 0%, #fff 62%, creme 100%`).
 *      A altura do bloco depende do texto: com o título em quatro
 *      linhas, os 62% caíam exatamente no fim da foto, então o creme
 *      começava JUNTO com a borda dela.
 *   2. um bloco branco com `padding-top:100%`, medido pela LARGURA.
 *      Resolveu em 320 e 390, e apareceu em 520: o bloco ficava mais
 *      alto que o topo, e o `overflow:hidden` cortava o degradê no
 *      meio — sobrava um degrau de 19 na emenda. Medido.
 *
 * O jeito certo não depende de altura NENHUMA: o topo é branco do
 * começo ao fim, e quem faz a passagem para o creme é o bloco de
 * baixo, em pixels fixos. Assim não existe número que dependa de
 * quantas linhas o texto tem.
 *
 * `overflow:hidden` porque a foto encosta na direita e, se um dia
 * passar dela, tem de ser cortada e não virar rolagem lateral — que é
 * o defeito mais chato de celular. */
.hero{
  padding:6px 20px 8px;
  position:relative;
  overflow:hidden;
  background:#fdfdfd;
  /* O TEXTO FICA NO MEIO DA ALTURA, e não colado no alto.
     Brian, 18/09/2026: "Melhore essas letras ali do lado, pra nao ficar
     esse espaco em branco ali".
     O vão nasceu de duas coisas boas: o parágrafo de apoio saiu do topo
     (pedido dele) e o bloco ganhou altura para a foto caber inteira
     (também pedido dele). Sobrou o título encostado no alto e, medido
     num celular de 390px, 103px de branco embaixo dele.
     Centrar na vertical transforma aquele vão de "faltou algo no fim"
     em margem nas duas pontas — que é o que equilibra o título com a
     foto ao lado. O resto do vão eu tiro aumentando a letra, logo
     abaixo. */
  display:flex;
  align-items:center;
}

.hero__grid{display:block;width:100%;min-width:0}

.hero__title{
  font-family:var(--titulo);
  font-weight:600;
  /* O TAMANHO É REFÉM DE UMA PALAVRA: "performance".
     Ela não parte, e a coluna do título é estreita de propósito (a
     agulha da foto começa logo depois — ver o `max-width` abaixo). Se
     ela não couber, o navegador não reclama nem quebra: deixa a
     palavra VAZAR por cima da foto. Já aconteceu duas vezes aqui.

     A segunda foi agora, com a troca da Playfair pela Inter: a Inter é
     ~20% mais larga na mesma altura de letra, e "performance", que em
     Playfair 28,5px media 141px numa coluna de 152, passou a medir
     169px e saiu em cima da agulha em TODAS as larguras.

     Os números novos, medidos no navegador com a Inter 600 já
     carregada (largura da tela → coluna do título → palavra):
       320 → 119 → 116     390 → 152 → 141     520 → 213 → 188
       360 → 137 → 130     430 → 170 → 156     700 → 213 → 204
     A menor folga é a de 320px, com 3px. O piso de 19,5px é onde ela
     acaba: abaixo disso a palavra encosta na agulha de novo.

     Parece menor que os 23px de antes e não é — a Inter tem a altura
     de x bem maior que a Playfair, então 19,5px dela lê do mesmo
     tamanho que 23px da outra. E o título continua em QUATRO linhas,
     como no desenho, em todas as larguras testadas.

     O teto de 35px, e não 40: a coluna do site para em 520px, e daí
     para cima a tela cresce mas a foto não. Em 40px a palavra media
     233px numa coluna que trava em 213 — vazava de novo, só que
     no computador. */
  font-size:clamp(19.5px,6.2vw,35px);
  /* 1,02 SAIU DA FOTO DELE. As quatro linhas do título dele estão a
     61px uma da outra numa tela de 900 — 26,4px num celular de 390,
     com fonte de 26px. Entrelinha 1,02, bem mais fechada que a 1,14
     que eu tinha.
     Isto não é detalhe de gosto: com o título mais alto, o texto
     começava 35px mais abaixo que no desenho — e nessa altura o corpo
     da seringa já entrou pela esquerda, então as duas primeiras linhas
     caíam sobre ela. Medido nos pixels: o mais escuro atrás da linha
     ia a 149. Fechando a entrelinha, o texto sobe para onde ele está
     no desenho, onde a seringa ainda está mais à direita. */
  line-height:1.02;
  /* -.02em e não -.01em: a Inter pede um aperto maior que a Playfair
     nos tamanhos de título, e aqui ele ainda devolve 2px de folga na
     tela de 320px — onde a conta inteira acima é decidida. */
  letter-spacing:-.02em;
  margin:6px 0 0;
  /* ESTREITO, E ISSO NÃO É GOSTO: É ONDE A SERINGA COMEÇA.
     A foto ocupa a direita, e a ponta da agulha entra a 40% da
     largura da tela. Título mais largo que isso passa POR CIMA dela —
     é o que estava acontecendo, com o título indo até 57%. No desenho
     dele o título termina a 42% e a agulha começa a 45%: ele deixou a
     folga de propósito.
     Por isso a fonte encolheu junto: em 30px "performance" não cabe em
     38% de largura e o título viraria seis linhas. No desenho dele são
     quatro. */
  /* A LARGURA VEM DA RÉGUA DA FOTO, e é PORCENTAGEM DA COLUNA — não
     `vw`, e não `40%`.
     · `40%` parecia 158px e não era: 40% de uma coluna de 350 (390
       menos as margens) dá 140, e com a letra maior o título passou a
       quebrar em SEIS linhas em vez de quatro. Foi o primeiro
       resultado desta mudança.
     · `vw` acerta no celular e erra depois: a coluna do site para em
       520px, então acima disso a tela cresce e a foto não — a conta em
       `vw` deixaria o título invadir a agulha entre 560 e 900px.
     Medido escondendo o texto e varrendo o pixel: a foto começa em
     47,5% da largura do bloco (153px num bloco de 320, 186 em 390, 203
     em 430). Em porcentagem da coluna isso é 47% menos a folga para a
     agulha — e vale em toda largura, porque a coluna e a foto crescem
     juntas.
     A FOLGA É DE 13px, E O NÚMERO FOI MEDIDO DUAS VEZES: com 9px a
     conta fechava em todas as telas menos a menor — num celular de
     320px sobravam 2px entre o "performance" e a ponta da agulha, que
     é dentro da margem de erro do próprio desenho da foto. Com 13 a
     folga vai a 6px ali e a 13 num celular comum. O piso da letra foi
     ajustado junto — hoje 19,5px, pela conta que está lá em cima —,
     senão "performance" não cabe nessa largura menor e o título
     quebra em cinco linhas. */
  max-width:calc(47% - 13px);
  position:relative;
  z-index:2;
}
.hero__title em{font-style:normal;color:var(--gold)}

.rule{
  width:56px;height:3px;
  background:var(--gold);
  border-radius:2px;
  margin:22px 0 20px;
}

.hero__text{
  /* 12,5px SAIU DA FOTO DELE, medida na foto e não escolhida por mim.
     A linha mais longa do desenho é "e acompanhamento especializado":
     ela ocupa 47,8% da largura da tela. Trinta letras em 47,8% de
     390px dão 6,2px por letra, que é uma fonte de 12,4px.
     É pequeno para ler no celular, e eu disse isso a ele. Ele
     respondeu "tudo 100% igual" — é a tela dele, é a decisão dele, e
     com esta medida o texto fecha nas cinco linhas do desenho em vez
     de sete. */
  font-size:12.5px;
  line-height:1.62;
  color:var(--ink-2);
  /* MAIS LARGO QUE O TÍTULO, e por uma razão de medida.
     Eu havia apertado o texto em 40% da largura: virou OITO linhas, e
     o bloco ficou muito mais alto que o desenho dele, que tem cinco.
     Depois medi onde a foto acaba — 76,9% da largura, ou 300px num
     celular de 390 — e o texto começa aos 244px. Quer dizer: só as
     DUAS primeiras linhas ficam ao lado da foto; da terceira em
     diante não há foto nenhuma para desviar.
     Então a largura não precisa caber na sobra da foto inteira, só na
     parte clara de baixo dela. Isso está medido nos pixels atrás de
     cada linha (`foto-do-topo.mjs` + `fundo-do-texto.py`): nenhuma
     letra cai sobre o vidro do frasco nem sobre o corpo da seringa. */
  /* 176px, E O NÚMERO ANTERIOR (203px) ESTAVA ERRADO.
     Brian, 17/09/2026: "a foto ali ta invadindo o texto e nao ta
     legal". Ele está certo, e a medição que eu tinha aqui não pegava
     isso: ela media se a letra fica LEGÍVEL sobre o fundo (contraste
     de 4,5:1), e isso continuava passando — o mármore atrás é claro.
     Só que legível não é a mesma coisa que bonito: o corpo da seringa
     cruzava as linhas "acompanhamento especializado" e "para
     transformar seu corpo", e a agulha passava por "começa aqui".
     Dava para ler e ficava feio.

     A medição nova pergunta outra coisa: ONDE O ASSUNTO DA FOTO
     COMEÇA em cada altura de linha. Escondo o texto, fotografo o topo
     e ando da esquerda para a direita dentro da foto até achar o
     primeiro pixel que não é mármore claro. Aquele x é o limite; a
     linha de texto tem de terminar antes dele, com 8px de folga.
     (`invasao-da-foto.mjs` + `invasao.py`.)

     E a geometria da foto é estável: o assunto começa sempre a 28,6%
     da largura dela, em qualquer tela. Com a foto em 70% e o
     parágrafo em 176px a pior folga, entre 320 e 480px, é de 16,7px.
     Medi sete combinações; esta é a que mexe menos no desenho dele. */
  max-width:min(48%,176px);
  margin:0;
  position:relative;
  z-index:2;
}
.hero__text b{font-weight:500;color:var(--gold)}

.hero__art{
  position:absolute;
  top:-18px;
  right:-30px;
  width:78%;
  max-width:390px;
  pointer-events:none;
  z-index:0;
}

.hero__copy{position:relative;z-index:2}

.hero__cta{margin:18px 0 4px;position:relative;z-index:2}

/* O RISQUINHO DOURADO DO TOPO SAIU (18/09/2026, "Tire essa linha"), e
   com ele esta regra: ela só existia para apertar a margem dele neste
   bloco. Nas outras páginas o `.rule` continua, com a margem de
   sempre. */

/* O BOTÃO DO TOPO NÃO ATRAVESSA A TELA.
   `.btn--primary` tem `min-width:min(100%,300px)`, que é o certo no
   carrinho e nos formulários — botão de confirmar deve ser largo. No
   topo isso o fazia chegar a 75% da tela e passar por cima da ponta
   dourada da seringa, que entra a 74%. No desenho dele o botão termina
   pouco depois do texto.

   O `min-width:0` sozinho não resolveu: 75% ERA a largura natural do
   botão, com a fonte de 17,5px e a bolinha da flecha de 38px. Então
   aqui os dois encolhem — o botão passa a ter o tamanho do que está
   escrito nele, e o que está escrito ocupa menos. */
.hero__cta .btn--primary{
  min-width:0;
  font-size:15px;
  padding:11px 11px 11px 20px;
  gap:12px;
}
.hero__cta .btn__arrow{width:32px;height:32px}

/* ---------- botões ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-radius:999px;
  font-weight:600;
  /* `background` SAIU DA LISTA: o botão principal tem fundo de
     GRADIENTE, e gradiente não é animável — a transição estava ali
     prometendo uma suavidade que o navegador nunca fez (64 botões em
     16 páginas, medido pelo varredor de promessas do CSS). O que
     muda de verdade no hover é a sombra, e ela continua na lista.
     Para os botões de fundo CHAPADO a transição segue valendo: eles
     mudam `color` e `border-color`, que estão aqui. */
  transition:transform .18s ease,box-shadow .18s ease,
             border-color .18s ease,color .18s ease;
}
.btn:active{transform:translateY(1px)}

.btn--primary{
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,#9a7739);
  color:#fff;
  font-size:17.5px;
  padding:12px 12px 12px 26px;
  min-width:min(100%,300px);
  box-shadow:0 16px 30px rgba(176,140,74,.32);
}
.btn--primary:hover{box-shadow:0 20px 40px rgba(176,140,74,.42)}
.btn__arrow{
  width:38px;height:38px;flex:none;
  border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.42);
}

.btn--ghost{
  border:1px solid var(--gold);
  color:var(--gold);
  padding:11px 22px;
  font-size:15px;
  gap:10px;
  background:transparent;
}
.btn--ghost:hover{background:var(--gold);color:#fff}

.btn--outline{
  width:100%;
  border:1px solid var(--line);
  color:var(--ink-2);
  padding:11px 16px;
  font-size:14px;
  font-weight:500;
  background:#fff;
}
.btn--outline:hover{border-color:var(--gold);color:var(--gold)}

.link-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--gold);
  font-size:14px;
  font-weight:500;
  border-bottom:1px solid var(--gold);
  padding-bottom:2px;
}

/* ---------- os ícones das categorias ----------

   Este bloco era `.features`, os quatro cartões de diferenciais que o
   Brian mandou tirar em 18/09/2026 ("deixe icones de cada categoria de
   produtos"). Não é CSS novo ao lado do antigo: é o MESMO bloco, com o
   nome do que ele mostra agora. Deixar `.features` aqui sem ninguém
   usando seria peso morto, e no dia de mexer alguém leria as duas
   coisas sem saber qual vale.

   QUANTAS COLUNAS: o número de categorias vem do catálogo e pode
   mudar. `auto-fit` com largura mínima resolve sem eu escrever uma
   regra por quantidade — três categorias viram três colunas, cinco
   viram duas fileiras, e nenhuma fica estreita demais para o nome
   caber. */

/* ---- a faixa dos dois países, logo abaixo do topo ----

   A EMENDA DO DEGRADÊ MUDOU DE DONO, e é a única coisa que esta faixa
   tirou de alguém. O degradê de branco para creme era o `.categorias`
   que carregava, porque ele era o primeiro bloco depois da foto do
   topo. Agora quem vem primeiro é esta faixa — se o degradê tivesse
   ficado lá, apareceria uma linha branca entre a foto e a faixa e um
   segundo degradê começando no meio do caminho.

   Continua em pixels fixos (46px a partir do alto deste bloco) e não em
   porcentagem: nenhuma conta dependendo de quantas linhas o texto do
   topo tem. Foi isso que fez errar duas vezes quando o degradê nasceu. */
.rota{
  padding:14px 20px 0;
  background:linear-gradient(180deg,#fdfdfd 0,var(--cream) 46px);
}

.categorias{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:10px;
  /* 14px em cima, e não os 26px de antes: a faixa acima já dá o
     respiro que separava isto da foto do topo. */
  padding:14px 20px 6px;
}

.categoria{
  background:var(--card);
  border-radius:16px;
  padding:16px 8px 14px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  min-width:0;
  color:inherit;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease;
}
.categoria:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.categoria:active{transform:translateY(-1px)}

/* O ÍCONE MORA NUM DISCO CHEIO DE COR, e não solto sobre o branco.

   Brian, 18/09/2026, com a foto de uma loja concorrente: "deixe os
   icones da parte inicial assim, so mude os icones".

   O que aquela foto tem e o cartão daqui não tinha é o disco: um
   círculo de cor cheia com o desenho branco dentro. Solto, o desenho
   era um risco dourado fino no meio de um cartão branco — do tamanho
   que ele tem no celular (23px), quase não se via. O disco dá ao
   desenho um fundo com que ele contrasta, e dá ao cartão uma âncora
   que o olho pega antes de ler o nome.

   A COR É A DA CASA, não a da foto. Lá são vermelho, verde e azul
   puros; aqui são os mesmos quatro tons quebrados que já pintam os
   chips da lista de produtos (`--cat1..4`), pelo mesmo índice. Cor
   pura ao lado do dourado briga, e a mesma categoria mudar de cor
   entre a página inicial e a lista faria a cor não significar nada.

   `--c`/`--c2` caem no dourado quando nenhum `data-cor` vem — melhor
   um disco dourado que um disco transparente. */
.categoria{--c:var(--gold);--c2:var(--gold-2)}
.categoria[data-cor="1"]{--c:var(--cat1);--c2:var(--cat1-2)}
.categoria[data-cor="2"]{--c:var(--cat2);--c2:var(--cat2-2)}
.categoria[data-cor="3"]{--c:var(--cat3);--c2:var(--cat3-2)}
.categoria[data-cor="4"]{--c:var(--cat4);--c2:var(--cat4-2)}

.categoria__ico{
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:0;
  color:#fff;
  background:linear-gradient(160deg,var(--c2) 0,var(--c) 100%);
  /* A sombra é da COR do disco, não cinza: por baixo do disco o creme
     da página continua aparecendo, e uma sombra cinza ali suja o tom
     em vez de assentar o círculo. */
  box-shadow:0 7px 16px color-mix(in srgb,var(--c) 30%,transparent);
  transition:transform .2s ease;
}
/* O disco cresce um tiquinho junto com o cartão que sobe — o toque
   responde no lugar onde o dedo estava mirando. */
.categoria:hover .categoria__ico{transform:scale(1.06)}

.categoria__nome{
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  color:var(--ink);
  max-width:100%;
  overflow-wrap:break-word;
}
.categoria__conta{font-size:10.5px;line-height:1.2;color:var(--muted)}

/* Onde `color-mix` não existe, a sombra colorida vira a sombra de
   sempre da casa: o disco continua com cor e volume, só não pinta o
   creme embaixo dele. */
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .categoria__ico{box-shadow:var(--shadow-sm)}
}

/* ---------- seções ---------- */

/* O BLOCO DE "EM DESTAQUE" É BRANCO, como os outros cartões da página.
   Brian, 19/09/2026: "Deixe essa parte dos produtos em destaque branco
   igual nas outras barras, ela esta meio bege".
   Ele estava usando `--cream-2` (#fbf9f5), que é o quase-branco da
   casa; os cartões vizinhos — o dos dois países e os três de categoria
   — usam `--card` (#ffffff). Lado a lado, a diferença de 5 pontos de
   cinza aparece, e era a única caixa grande da página que não era
   branca. */
.panel{
  background:var(--card);
  border-radius:26px 26px 0 0;
  margin-top:22px;
  padding:26px 0 0;
  box-shadow:0 -10px 30px rgba(60,45,20,.05);
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:0 20px 18px;
}
.section-title{
  font-family:var(--titulo);
  font-weight:600;letter-spacing:-.02em;
  font-size:27px;
  line-height:1.15;
  margin:0;
}
.section-sub{
  margin:4px 0 0;
  font-size:14px;
  color:var(--gold);
}

/* ---------- carrossel de protocolos ---------- */

/* TRÊS CARTÕES NA TELA, NÃO UM.
   Brian, 18/09/2026: "Deixe esses cards aqui com as fotos menores e um
   tamanho menor, quero que de ve pra ver 3 ali".

   Era um cartão de 92% da largura, deitado (foto à esquerda, texto à
   direita) e com a faixa dos três benefícios embaixo. Agora são três
   cartões em pé, e a largura sai de uma CONTA, não de um número
   escolhido: o espaço útil menos os dois vãos, dividido por três.
   Assim cabem exatamente três, em qualquer tela, sem eu escrever uma
   medida por aparelho.

   O que saiu do cartão — descrição, parcelamento e os três benefícios
   — está todo na página do produto, a um toque daqui. Em 110px não
   cabia: "Acompanhamento" sozinho pede 70px, e numa coluna de 33px
   voltaria a quebrar no meio da palavra.

   O carrossel continua rolando, e isso é de propósito: hoje são três
   produtos em destaque e não há o que rolar, mas se um dia forem cinco
   os outros dois entram arrastando, sem eu mexer aqui. */

.carousel{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:2px 20px 4px;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}

.protocol{
  flex:0 0 calc((100% - 20px) / 3);
  scroll-snap-align:start;
  /* é uma âncora: o cartão inteiro leva à página do produto */
  color:inherit;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  min-width:0;
  background:var(--card);
  border-radius:16px;
  overflow:hidden;
  /* UM FIO EM VOLTA, e ele nasceu de uma conta.
     O bloco atrás desta fila era quase-branco e virou branco puro
     (19/09/2026, "deixe essa parte... branco igual nas outras barras").
     Com isso o cartão — que também é branco — passou a dissolver no
     fundo: medido no pixel, na altura do preço a maior diferença entre
     dois pixels vizinhos na borda do cartão era 11 de 255, ou seja,
     aresta nenhuma. Os cartões de categoria não têm este problema
     porque estão sobre o creme da página.
     O fio vai no `box-shadow` e não em `border` de propósito: assim
     ele não muda o tamanho do cartão nem empurra os três na fila. */
  box-shadow:0 0 0 1px var(--line),var(--shadow-md);
}

/* A FOTO EM CIMA, QUADRADA.
   `aspect-ratio` e não altura fixa: os três cartões ficam com a foto
   do mesmo tamanho em qualquer largura de tela, e quem define a altura
   do cartão é o conteúdo. */
/* A FOTO NO MESMO CREME DA VITRINE, E NÃO EM PRETO.
   Brian, 18/09/2026, com a foto da fila "Em destaque": "Essa parte aqui
   nao ficou legal".

   O DEFEITO NÃO É DE GOSTO, É DE VER OU NÃO VER: o fundo era #0e0e0e e
   as embalagens dos produtos SÃO caixas preta — o Tirzec Pen era uma
   caixa preta sobre um fundo quase preto, e no cartão só aparecia a
   caneta. Medido: o mesmo produto tem fundo creme na vitrine de
   Produtos (um gradiente de #f7f4ef para #efeae1) e preto aqui, no
   mesmo site e a uma rolagem de distância.

   Agora é o MESMO gradiente da vitrine, escrito uma vez e usado pelos
   dois — no dia em que um mudar, os dois mudam juntos. */
.protocol__media{
  position:relative;
  aspect-ratio:1 / 1;
  /* o mesmo branco da moldura da vitrine, pelo mesmo motivo: foto de
     produto vem com fundo branco. Ver `.product__media`. */
  background:#fff;
  border-bottom:1px solid #f2ece2;
  display:grid;
  place-items:center;
  /* o respiro também voltou aqui, pelo mesmo motivo da vitrine: com a
     moldura da cor do fundo da foto, a faixa não aparece mais */
  padding:8px;
}
.protocol__media img{width:100%;height:100%;object-fit:contain}

.badge{
  position:absolute;
  top:6px;left:6px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#fff;
  font-size:6.5px;
  font-weight:700;
  letter-spacing:.04em;
  white-space:nowrap;
  padding:3px 5px;
  border-radius:999px;
  /* A SOMBRA ERA PRETA E FICOU PESADA quando a foto deixou de ser
     preta: sobre o creme, `rgba(0,0,0,.28)` desenhava um halo cinza em
     volta da pílula. Agora ela é do próprio dourado, mais curta — ela
     serve para a etiqueta não colar na foto, não para ela gritar. */
  box-shadow:0 2px 6px rgba(140,104,40,.28);
}
.badge svg{width:7px;height:7px;flex:none}

/* `min-width:0` É O CONSERTO DO TEXTO CORTADO.
   Num item de flex ou de grid o filho não encolhe abaixo do conteúdo
   dele por padrão: o nome do produto esticava a coluna, saía do cartão
   e o `overflow:hidden` cortava o resto. É o mesmo alfinete de sempre,
   e já apareceu na barra do topo, nos interesses do atendimento e na
   faixa dos benefícios. */
.protocol__body{
  padding:9px 9px 11px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
/* MESMA LETRA DO NOME NA LISTA DE PRODUTOS, e por isso mudou junto.
   Quando o cartão da lista trocou a serifada por texto normal
   (18/09/2026, "texto normal"), este ficou para trás — e os dois
   aparecem na MESMA tela: o carrossel de "Em destaque" logo abaixo das
   categorias, e a lista a um toque dali. Dois nomes de produto em
   letras diferentes, na mesma página, parece defeito mesmo quando cada
   um está certo sozinho. */
.protocol__name{
  font-family:var(--sans);
  font-weight:600;
  /* 12,5px E DUAS LINHAS FIXAS, e os dois números vêm da mesma
     medição. Em 13px o nome mais longo do catálogo ("Tirzedral 15 mg —
     4 ampolas") passou a ocupar TRÊS linhas e o cartão cresceu de 179
     para 201px de altura — contra o que ele pediu para esta fila
     ("um tamanho menor, quero que de ve pra ver 3 ali").
     Com o corte em duas linhas a altura do cartão deixa de depender do
     tamanho do nome: os três ficam iguais, com ou sem nome comprido, e
     o nome que não cabe termina em "…" — a página do produto está a um
     toque, com o nome inteiro. */
  font-size:12.5px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:0;
  min-width:0;
  overflow-wrap:break-word;
}
.protocol__valor{
  /* `margin-top:auto` encosta o preço no pé do cartão, então os três
     ficam com o preço na MESMA altura mesmo quando um nome ocupa uma
     linha e o outro duas. É o que faz a fileira parecer alinhada. */
  margin:0;
  margin-top:auto;
  /* 15px, E NÃO 12,5. Medido lado a lado: o mesmo preço tem 18px no
     cartão da vitrine e tinha 12,5 aqui — era a letra do rodapé
     anunciando o produto em destaque da página inicial. A coluna do
     cartão tem 92px e "R$ 1.099,00" pede 60 em 15px, então cabe com
     folga. Não vai a 18 porque o cartão tem 110px de largura (ele
     pediu três na tela) e aí o preço passaria a mandar mais que o
     nome do produto. */
  font-size:15px;
  font-weight:700;
  color:var(--gold);
  line-height:1.2;
}

.dots{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0;
  padding:8px 0 14px;
}

/* A bolinha é pequena de propósito, mas a área de toque não pode
   ser. O botão tem 40px de altura e largura fixa: só a marca de
   dentro cresce ao ficar ativa, então nada se desloca embaixo do
   dedo quando o carrossel passa de um slide para o outro. */
.dot{
  flex:none;
  width:28px;height:40px;
  padding:0;
  background:none;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.dot::before{
  content:'';
  display:block;
  width:7px;height:7px;
  border-radius:999px;
  background:#ddd5c7;
  transition:width .2s ease,background .2s ease;
}
.dot.is-active::before{background:var(--gold);width:18px}

/* ---------- página de produtos ---------- */

.page-head{padding:14px 20px 0}
.page-title{
  font-family:var(--titulo);
  font-weight:600;letter-spacing:-.02em;
  font-size:clamp(40px,11vw,50px);
  line-height:1;
  margin:8px 0 0;
}
.page-lead{
  font-size:15px;
  line-height:1.55;
  color:var(--ink-2);
  margin:0;
  max-width:34ch;
}

.chips{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:22px 20px 14px;
  scrollbar-width:none;
}
.chips::-webkit-scrollbar{display:none}

.chip{
  flex:none;
  /* --c e --c2 sao a cor DESTE chip. O "Todos" fica no dourado da
     casa; cada categoria recebe a sua em data-cor, logo abaixo. */
  --c:var(--gold);
  --c2:var(--gold-2);
  /* `relative` + `isolation` por causa da pílula colorida: ela é um
     elemento dentro do botão, atrás do texto (`z-index:-1`), e o
     isolamento prende esse "atrás" ao próprio chip. Sem ele, a pílula
     iria para trás do fundo da página e sumiria. */
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
  color:color-mix(in srgb,var(--c) 84%,#1c1a17);
  /* Um véu da própria cor no chip NÃO marcado.
     Antes era transparente, e a fila virava contorno vazio sobre
     creme — na foto do Brian ela parecia uma linha de campos de
     formulário, não uma escolha. */
  background:color-mix(in srgb,var(--c) 7%,#fff);
  border-radius:999px;
  padding:8px 15px;
  font-size:13.5px;
  white-space:nowrap;
  /* border-color e box-shadow entraram na lista: sem eles, a borda e a
     sombra trocavam de uma vez enquanto o resto ia devagar, e o chip
     dava um "pulo" no meio da transicao. */
  transition:background .24s ease,color .24s ease,
             border-color .24s ease,box-shadow .24s ease,
             transform .12s ease;
}

/* O DESENHO DA CATEGORIA, DENTRO DO CHIP.
   É o mesmo desenho dos ícones da página inicial, vindo do mesmo mapa
   em `loja.js` — a mesma categoria não pode ter dois desenhos no
   mesmo site. */
.chip__ico{flex:none;opacity:.9;transition:opacity .2s ease,transform .26s ease}
.chip.is-active .chip__ico{opacity:1}
.chip__nome{min-width:0}

/* A PÍLULA COLORIDA DO CHIP MARCADO.
   Ela é um elemento próprio, e não o fundo do botão, por um motivo
   prático: `linear-gradient` não é animável, então trocar o fundo do
   botão acontecia de um quadro para o outro, por mais `transition` que
   houvesse na regra. Num elemento separado eu animo a OPACIDADE dele,
   que o navegador interpola — e as duas pílulas (a que sai e a que
   entra) se cruzam no meio, junto com a cor das duas letras.
   Também dá o "pop" de entrada, com escala: o chip marcado dá um
   pequeno salto que o olho segue de um botão para o outro. */
.chip__fundo{
  position:absolute;
  /* -1px cobre a borda do botão, senão fica um fio da cor antiga em
     volta da pílula */
  inset:-1px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--c2),var(--c));
  box-shadow:0 4px 12px color-mix(in srgb,var(--c) 16%,transparent);
  opacity:0;
  z-index:-1;
  transition:opacity .26s ease;
}
.chip.is-active .chip__fundo{
  opacity:1;
  animation:chipPop .3s cubic-bezier(.3,1.5,.5,1);
}
@keyframes chipPop{
  from{transform:scale(.82)}
  to{transform:scale(1)}
}

/* A cor entra por indice, e nao pelo nome da categoria: assim voce pode
   renomear "Peptideos" amanha sem que a cor troque de lugar. */
.chip[data-cor="1"]{--c:var(--cat1);--c2:var(--cat1-2)}
.chip[data-cor="2"]{--c:var(--cat2);--c2:var(--cat2-2)}
.chip[data-cor="3"]{--c:var(--cat3);--c2:var(--cat3-2)}
.chip[data-cor="4"]{--c:var(--cat4);--c2:var(--cat4-2)}

/* AQUI HAVIA UM PONTO COLORIDO antes do texto, escondido no chip
   marcado. Ele existia como substituto de ícone, para a fila ser
   legível como "categorias diferentes" antes de tocar em nada. Saiu
   porque agora existe o ícone de verdade: ponto e desenho juntos eram
   duas marcas dizendo a mesma coisa, e o chip ficava comprido. */

.chip:hover{background:color-mix(in srgb,var(--c) 14%,#fff)}
.chip:active{transform:scale(.97)}

.chip.is-active{
  color:#fff;
  border-color:transparent;
  background:transparent;   /* a cor agora é a pílula, logo acima */
}

/* color-mix e recente. Onde nao existir, cai para um cinza-dourado
   discreto em vez de ficar sem nada — e o chip marcado precisa da cor
   CHEIA de volta, porque ali a pílula é que tinha a cor. */
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .chip{background:#fff;border-color:rgba(120,100,60,.3);color:#3a3630}
  .chip:hover{background:rgba(176,140,74,.1)}
  .chip__fundo{box-shadow:0 8px 18px rgba(40,30,10,.22)}
}

/* ---------- a fila que não cabe na tela ----------

   Na foto que o Brian mandou, o "Peptídeos" estava cortado no meio da
   palavra pela borda da tela, sem nada dizendo que havia mais coisa à
   direita: parece defeito, e não fila que rola.

   As classes vêm de `loja.js`, por MEDIDA: `is-corta-direita` só entra
   quando de fato sobra conteúdo para aquele lado. Numa tela larga,
   onde os quatro chips cabem, nenhuma das duas aparece — se o
   esmaecido fosse fixo, o último chip ficaria apagado sem razão. */
.chips.is-corta-direita{
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
}
.chips.is-corta-esquerda{
  mask-image:linear-gradient(to right,transparent,#000 34px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34px);
}
.chips.is-corta-esquerda.is-corta-direita{
  mask-image:linear-gradient(to right,transparent,#000 34px,
    #000 calc(100% - 34px),transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34px,
    #000 calc(100% - 34px),transparent);
}

.promo{
  position:relative;
  margin:0 20px 18px;
  border-radius:16px;
  overflow:hidden;
  background:linear-gradient(120deg,#0b0b0b 0%,#161412 55%,#0a0a0a 100%);
  color:#fff;
  min-height:210px;
  display:flex;
  align-items:center;
}
.promo__art{
  position:absolute;
  right:-6px;bottom:0;top:0;
  width:58%;
  height:100%;
  object-fit:contain;
}
.promo__body{position:relative;z-index:1;padding:22px 18px;max-width:64%}
.promo__eyebrow{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--gold-3);
  font-size:10px;
  font-weight:600;
  letter-spacing:.18em;
  margin-bottom:10px;
}
.promo__title{
  font-family:var(--titulo);
  font-weight:600;letter-spacing:-.02em;
  font-size:30px;
  margin:0 0 8px;
}
.promo__text{
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.76);
  margin:0 0 16px;
  max-width:26ch;
}
.promo .btn--ghost{border-color:var(--gold-3);color:var(--gold-3)}
.promo .btn--ghost:hover{background:var(--gold-3);color:#111}

.grid-products{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  padding:0 20px 26px;
}

.product{
  position:relative;
  background:var(--card);
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease;
}
.product:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}

/* A FOTO MENOR, que é de onde vinha a maior parte da altura.
   Era 1/0,86 — quase quadrada, 144px de altura num cartão de 168px de
   largura. Em 1/0,66 ela fica em 111px e o cartão encurta 33px sem que
   o produto fique pequeno na tela: o desenho do produto é vertical e
   continua caber inteiro, porque a imagem é `object-fit` centralizada.
   Brian, 18/09/2026: "Aqui esta muito grande o cards... deixe menor". */
.product__media{
  /* BRANCA, E NÃO CREME, DESDE QUE EXISTEM FOTOS DE VERDADE.
     Brian, 19/09/2026: "As fotos tao ficando bugadas".
     Parte do "bugado" era isto: foto de produto vem com FUNDO BRANCO
     (é assim que se fotografa catálogo), e a moldura era um creme
     degradê. Cada foto virava uma ilha branca dentro da moldura, com a
     emenda visível em volta — foi o que apareceu no recorte dele, no
     cartão do TG.
     Com a moldura branca a foto não tem emenda nenhuma. Os desenhos
     que os produtos sem foto usam continuam certos: eles têm fundo
     transparente e uma sombra cinza clara por baixo, que sobre branco
     fica igual ou melhor do que sobre creme.
     O fio embaixo devolve a estrutura que o creme dava ao cartão: sem
     ele, foto e texto viram um bloco branco só. */
  background:#fff;
  border-bottom:1px solid #f2ece2;
  /* a moldura desfocada mora num `::before` dentro dela */
  position:relative;
  /* 1/0,8 E NÃO 1/0,66, e os 14px que o cartão cresce foram pesados.
     As fotos de produto que o Brian subiu são retratos de estúdio, ou
     seja, quadrados ou quase. Numa moldura de 1/0,66 (168×111) uma foto
     quadrada é limitada pela ALTURA e sai com 91px, deixando 28px de
     creme de cada lado — o produto fica pequeno no meio de sobra.
     Em 1/0,8 (168×134) a mesma foto sai com 122px: 34% maior, com 23px
     a mais de cartão. Não vai a 1/1 porque ali a moldura sozinha teria
     168px e o cartão passaria de 375 de altura — ele pediu cartões
     menores em 18/09, e isso vale mais que a foto crescer 20%. */
  aspect-ratio:1/.8;
  display:flex;
  align-items:center;
  justify-content:center;
  /* O RESPIRO VOLTOU, E AGORA ELE É SEGURO.
     Eu tinha zerado o respiro porque aquela faixa era a cor da moldura
     em volta da foto — ou seja, a borda de que ele reclamou. Sem
     respiro, o produto passou a ENCOSTAR nas bordas do cartão: na foto
     do Lipoland a caixa preta tocava os dois lados, e ele disse "ainda
     bugado" (19/09/2026).
     Com a moldura tomando a cor do fundo da própria foto, a faixa
     deixou de ser visível: ela tem exatamente a cor do que está ao lado
     dela. Então o respiro volta — o produto ganha ar e a borda continua
     não existindo. Medido: emenda 0 de 255 com os 10px de volta. */
  padding:10px;
  min-height:0;
  overflow:hidden;
}
/* ---------- A MOLDURA TOMA A COR DO FUNDO DA FOTO ----------
   Brian, 19/09/2026: "Alguns produtos ainda estao com a borda, nao
   quero que isso aconteca nem que isso se repita".

   A foto quase nunca tem o formato exato da moldura, e o que sobra nas
   laterais (ou em cima) é a cor da moldura. Foto de catálogo tem fundo
   branco OU QUASE branco — medi 247,247,247 numa e 252,252,250 noutra —
   e a moldura é branca puro: dá um degrau de 5 a 8 tons numa linha reta
   de 134px, que é pouco no número e bem visível no olho. É a borda que
   ele viu no TG, no Gluconex e no Lipoland.

   EU TENTEI PRIMEIRO PINTAR A MOLDURA COM A PRÓPRIA FOTO DESFOCADA, e
   MEDI ANTES DE ACREDITAR: ficou pior. O desfoque é um recorte que
   preenche a moldura, então numa foto em pé ele mostra a parte escura
   do produto ampliada, enquanto a foto de verdade tem margem branca ao
   lado — a emenda subiu de 8 para 191 tons. Ideia bonita, número
   ruim, ideia fora.

   O QUE RESOLVE: a moldura toma a COR DO FUNDO DA PRÓPRIA FOTO, lida
   dos quatro cantos dela pelo JavaScript (`--fundo-foto`). A sobra fica
   exatamente da cor do que está ao lado dela, e não existe emenda para
   se ver — com qualquer foto, de qualquer formato, hoje e nas
   próximas, sem ninguém subir foto de novo.

   O branco continua sendo o padrão: quando a leitura não dá (foto que
   não permite ler os pixels, ou fundo que não é uniforme), a moldura
   fica branca e a emenda volta a ser aqueles 5 a 8 tons — o pior caso
   é o que já existia. */
.product__media--foto,
.protocol__media--foto,
/* a foto grande da página do produto e a miniatura do carrinho usam a
   MESMA conta; a marca `data-fundo-da-foto` é posta pelo JavaScript só
   quando a imagem é foto de verdade */
.ficha__foto[data-fundo-da-foto],
.carrinho__foto[data-fundo-da-foto]{
  background:var(--fundo-foto);
}


/* O ENCAIXE NÃO PODE DEPENDER DO TAMANHO DO ARQUIVO.
   Era `width:auto;height:auto;max-width:100%;max-height:100%`: uma foto
   MENOR que a moldura ficava no tamanho original dela, então duas fotos
   do mesmo produto em tamanhos de arquivo diferentes apareciam em
   tamanhos diferentes na tela. Medido: um arquivo de 220×220 saía com
   91px, do mesmo jeito que um de 1000×1000 — por coincidência, porque
   os dois batiam no mesmo limite de altura; um de 150×150 sairia com
   150 e estouraria.
   Com 100%/100% e `contain`, a moldura manda e o arquivo só decide a
   nitidez. */
.product__media img{
  width:100%;
  height:100%;
  object-fit:contain;
}


.product__badge{
  position:absolute;
  top:0;left:0;
  /* SEM ISTO A ETIQUETA SOME NOS CARTÕES COM FOTO DE VERDADE.
     Achado ao caçar a borda da foto, em 19/09/2026: nos dois cartões
     que o Brian mandou não havia etiqueta nenhuma, e eu tinha lido
     aquilo como "estes produtos não têm destaque". Não era.

     A moldura da foto (`.product__media--foto`) é posicionada e vem
     DEPOIS desta etiqueta no HTML. Entre dois elementos posicionados
     sem `z-index`, quem vem por último pinta por cima — e o fundo
     opaco da moldura cobria a pílula dourada inteira. Só nos cartões
     com foto: no desenho genérico a moldura não ganha `--foto`, e por
     isso a etiqueta aparecia nos testes e sumia no site.

     2, o mesmo do coração: as duas coisas flutuam sobre a foto e
     precisam ficar acima dela e da sombra do link (que é 1). */
  z-index:2;
  /* Este dourado é o padrão de quem não tem sufixo: hoje só o
     "SEM ESTOQUE", que repinta de cinza logo abaixo. */
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#fff;
  /* `inline-flex` e `gap` entraram com o ícone. Antes era texto solto
     num retângulo; agora tem a estrela (mais vendido) ou o sinal de
     por cento (promoção) na frente, e sem isto os dois ficariam
     colados e desalinhados na vertical. */
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  padding:6px 11px;
  border-radius:0 0 12px 0;
}
.product__badge svg{width:9px;height:9px;flex:none}

/* =========================================================
   AS DUAS ETIQUETAS: COR E MOVIMENTO

   Brian, 18/09/2026: "deixe a de promocao mais chamativa e vermelha
   tambem, a de mais vendido em um dourado com animacao em destaque".

   As duas formas de etiqueta do site — a pílula sobre a foto, no
   carrossel (`.badge`), e a faixa de canto, na lista
   (`.product__badge`) — recebem cor e movimento NO MESMO LUGAR, pelo
   sufixo. Sem isso a promoção seria vermelha num cartão e dourada no
   outro, e ninguém perceberia até um cliente perguntar.

   O MOVIMENTO SÓ USA `transform` E `opacity`, de propósito: são as
   duas coisas que o navegador anima sem recalcular a página. Animar
   cor ou sombra faria a vitrine repintar num laço infinito, e num
   celular modesto isso aparece como a lista engasgando ao rolar.

   E ESTE BLOCO MORA AQUI, DEPOIS DE `.product__badge`, POR CAUSA DA
   ORDEM. Ele estava trezentas linhas acima, junto do `.badge` do
   carrossel, e a etiqueta de promoção saía DOURADA na lista de
   produtos: `.product__badge` tem o dourado padrão e vem depois, e
   entre duas regras de mesmo peso o navegador obedece a última. No
   carrossel funcionava, porque lá a ordem calhava de ser a outra — o
   defeito aparecia numa tela só. Medido em 18/09/2026, antes de o
   Brian ver: `rgb(201, 168, 99)` onde eu esperava vermelho.
   ========================================================= */

/* O conteúdo sobe acima do brilho, que é desenhado no `::after`. */
.badge svg,.badge span,
.product__badge svg,.product__badge span{position:relative;z-index:1}

/* O brilho é recortado pela forma da etiqueta. */
.badge,.product__badge{overflow:hidden}

/* ---------- promoção: vermelha ---------- */
.badge--promo,
.product__badge--promo{
  background:linear-gradient(135deg,#e5493b,#b01608);
  box-shadow:0 4px 14px rgba(176,22,8,.42);
}
/* O clarão branco que atravessa a etiqueta de vez em quando. Ela fica
   parada 70% do tempo: piscar sem parar vira enfeite de loja barata, e
   o olho aprende a ignorar o que pisca sempre. */
.badge--promo::after,
.product__badge--promo::after{
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  opacity:0;
  animation:etiquetaPisca 3.4s ease-in-out infinite;
}
@keyframes etiquetaPisca{
  0%,70%,100%{opacity:0}
  82%{opacity:.3}
}

/* ---------- mais vendido: dourada, com o brilho passando ---------- */
.badge--vendido,
.product__badge--vendido{
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  box-shadow:0 4px 14px rgba(120,88,30,.42);
}
.badge--vendido::after,
.product__badge--vendido::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    transparent 34%,rgba(255,255,255,.6) 50%,transparent 66%);
  transform:translateX(-130%);
  animation:etiquetaBrilho 3.4s ease-in-out infinite;
}
@keyframes etiquetaBrilho{
  0%,62%{transform:translateX(-130%)}
  100%{transform:translateX(130%)}
}

/* O CARTÃO DA VITRINE, MENOR.
   Brian, 18/09/2026: "Aqui esta muito grande o cards, tire 'ver
   detalhes' e deixe menor". O "Ver detalhes" saiu do HTML (o cartão
   inteiro já é link desde ontem); o resto do tamanho vinha de respiro
   e de letra grande — nome em 21px de serifa num cartão de 168px é
   quase sempre duas linhas.
   As medidas novas saíram da medição, não do gosto: o nome continua
   caber sem quebrar no meio da palavra, e o cartão encurtou ~90px. */
.product__body{padding:11px 11px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
/* O NOME DO PRODUTO EM TEXTO NORMAL.
   Brian, 18/09/2026: "texto normal". Era Playfair (a serifada da
   marca), 16px.

   No cartão a serifada atrapalhava — "BIOGENISES GHK-CU 100MG" em
   serifada, com o corpo miúdo de um cartão de 146px, vira ornamento em
   cima de informação técnica. Nome de produto é dado: peso, dose,
   quantidade. Lê-se melhor na mesma letra do resto da tela.

   Em 19/09/2026 esta regra deixou de ser a exceção e virou a regra da
   casa: ele pediu a mesma coisa para o resto ("Onde tiver essa fonte
   troque, nao gosto dela") e a serifada saiu do site inteiro. Esta
   linha fica porque o cartão pede um peso próprio, não porque a fonte
   aqui é diferente — hoje ela é a mesma de todo lugar.

   600 e não 700: precisa pesar mais que a descrição e menos que o
   preço, que é quem manda no cartão. */
.product__name{
  font-family:var(--sans);
  font-weight:600;
  font-size:14px;
  line-height:1.3;
  letter-spacing:-.01em;
  margin:0;
  min-width:0;
  overflow-wrap:break-word;
}

/* O CARTÃO INTEIRO CLICA, E OS BOTÕES CONTINUAM BOTÕES.
   Brian, 17/09/2026: "Tem que dar pra clicar no produto e ver tudo
   sobre ele". Aqui já havia link, mas só em duas coisinhas: no NOME
   (as letras, nada mais) e no "Ver detalhes". A foto — que é onde a
   pessoa toca primeiro — não fazia nada, e nem a descrição, nem o
   preço.

   O jeito de resolver isto NÃO é envolver o cartão num `<a>`: dentro
   dele há botões (carrinho, coração, avise-me), e link com botão
   dentro é HTML inválido, o navegador desmonta e o leitor de tela
   anuncia uma confusão.

   Então o link do nome ganha uma sombra que cobre o cartão todo
   (`::after` esticado). Continua sendo UM link, anunciado uma vez,
   com o texto certo — e a área de toque passa a ser o cartão.
   Os botões sobem para cima dessa sombra com `z-index`, senão ela os
   engoliria e "Adicionar" viraria "ir para a página". */
.product__name a{color:inherit;text-decoration:none}
.product__name a::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
}
/* o coração já é `position:absolute` com z-index 2, então está acima */
/* O "Avise-me quando chegar" NA ESCALA DO CARTÃO.
   Ele nunca passou pelo enxugamento que o "Adicionar" levou em
   18/09/2026 (o "botao esta gigante" do Brian): herdava o `.btn` cheio
   e ocupava três linhas num cartão de 146px. Enquanto o outro botão
   existia do lado, dava para não ver; agora que o carrinho virou uma
   bolinha, ele ficou sendo a coisa mais pesada do cartão — e ele é a
   ação do produto que NÃO está à venda.
   Só dentro do cartão: na página do produto o botão é o principal da
   tela e continua grande. */
.product .btn--espera{
  position:relative;
  z-index:2;
  width:100%;
  font-size:12px;
  padding:10px 12px;
  gap:6px;
  margin-top:6px;
}
.product .btn--espera svg{width:12px;height:12px}
/* A DESCRIÇÃO COM MAIS DESTAQUE.
   Brian, 18/09/2026: "Deixe a descricao do produto com mais destaque
   ali". Medido antes: 11,5px, quase o tamanho do rodapé, na mesma cor
   de qualquer texto secundário — e é ela que diz O QUE a pessoa está
   comprando ("Caneta aplicadora de tirzepatida 15 mg, pronta para
   uso"). Num cartão de vitrine isso não é letra miúda.
   12,5px com entrelinha mais aberta, e duas linhas continuam sendo
   duas: o cartão ele já pediu menor no dia 18, e três linhas o
   devolveriam para o tamanho de que ele reclamou. A frase inteira
   está na página do produto, a um toque daqui. */
.product__desc{
  font-size:12.5px;
  line-height:1.45;
  color:var(--ink-2);
  margin:0;
  /* DUAS LINHAS, E O `flex:1` TINHA DE SAIR PARA ISSO FUNCIONAR.
     Ele estava aqui para empurrar o botão para o pé do cartão, e fazia
     isso esticando a descrição — que é justamente o que anula o corte
     de duas linhas: a caixa cresce, o texto preenche, e o corte nunca
     chega. Medido: 73px de descrição, cinco linhas, num cartão que o
     Brian pediu menor.
     Quem empurra o botão para baixo agora é o próprio botão, com
     `margin-top:auto` — que é o jeito de fazer isso sem mexer no
     tamanho de mais ninguém.
     A frase inteira está na página do produto, a um toque daqui. */
  /* ESTE `display:-webkit-box` APARECE COMO `flow-root` NO VALOR
     CALCULADO, e isso NÃO é defeito — eu quase "consertei" o que
     estava certo.
     Um varredor novo meu (18/09/2026) acusou "corte de linha sem
     efeito" nos 15 cartões, porque ele exigia `display:-webkit-box`
     no valor calculado. Fui olhar o PIXEL antes de acreditar: o texto
     está cortado em duas linhas E COM O "…" no fim, como tem de ser.
     Este Chromium mapeia o valor legado para `flow-root` e continua
     aplicando o corte. A régua do varredor estava errada, não o site;
     ele passou a medir o RESULTADO (a caixa tem a altura de duas
     linhas?) em vez do mecanismo. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* ---------- O PREÇO, COM DESTAQUE ----------
   Brian, 18/09/2026: "Deixe essa parte dos precos ali mais bonita, com
   mais destaque, ali onde fala da parcela tambem deixe mais bonito".

   O QUE ESTAVA FRACO, medido: o preço em 16px disputava tamanho com o
   nome do produto (13px) e perdia para a foto; a parcela em 10px era a
   menor letra do cartão inteiro, cinza, colada no preço; e o preço
   antigo ficava numa linha solta, com o selo de desconto do mesmo peso
   visual que ele.

   AGORA É UM BLOCO, e ele se lê de cima para baixo em três degraus:
   o que era (pequeno, riscado, com o selo vermelho ao lado), o que é
   (grande, 21px, o número mais forte do cartão) e como pagar (a
   parcela, com o "3x" em destaque). */
.product__antes{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 1px;
  font-size:11.5px;
  color:var(--muted-2);
}
.product__antes s{text-decoration:line-through;text-decoration-color:#c0392b}

/* ---- o pé do cartão: o valor de um lado, o carrinho do outro ----

   Brian, 18/09/2026: "em baixo o preco, e do lado o simbolo de jogar
   pro carrinho". Antes o botão era uma faixa escrita "Adicionar",
   ocupando uma linha inteira embaixo do preço.

   Só o PREÇO divide a linha com o botão; o preço antigo fica acima e o
   parcelamento abaixo, cada um com a largura inteira do cartão. O
   motivo está em `blocoPe()`, no loja.js, e é de régua: o botão come
   46px dos 146 do cartão, e a linha das parcelas já usava 140 deles.

   `margin-top:auto` é quem empurra este bloco para o pé do cartão —
   era o que o botão de largura inteira fazia antes de virar símbolo.
   Sem isso, cartões com descrição curta ficariam com o preço no meio e
   a fila perderia a linha de base. */
.product__pe{
  display:flex;
  align-items:center;
  /* ELE PODE QUEBRAR, E TEM DE PODER. Medido em 18/09/2026 às 23h: o
     cartão tem 146px de conteúdo num celular de 390px, mas só 111px
     num de 320. Com a bolinha e o vão, sobram 61px para o preço — e
     "R$ 1.099,00" pede 84px até no tamanho antigo de 16px. Ou seja: na
     tela pequena o preço vazava POR BAIXO da bolinha, e vazava antes
     de eu mexer em nada.
     Com `wrap` e um mínimo no preço, a bolinha desce para a linha de
     baixo quando não cabe ao lado, encostada à direita, em vez de o
     preço passar por cima dela. */
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  margin-top:auto;
  padding-top:4px;
}
/* O MÍNIMO É O QUE O MAIOR PREÇO DO CATÁLOGO PEDE: "R$ 1.099,00" mede
   95px em 18px. É ele que decide se a bolinha fica ao lado (146 - 42 -
   8 = 96, cabe) ou desce (111 - 42 - 8 = 61, não cabe). */
.product__pe .product__price{flex:1 1 95px;min-width:95px}

.product__carrinho{
  flex:none;
  /* 42px E NÃO 38. Este é o botão de comprar, e abaixo de 40px o
     polegar começa a errar — o próprio raciocínio que manteve o botão
     escrito em 42px quando ele foi diminuído, mais cedo no mesmo dia.
     Como símbolo ele tinha voltado para 38. */
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  box-shadow:0 6px 14px rgba(176,140,74,.3);
  /* Acima da sombra do link que cobre o cartão inteiro (ver
     `.product__name a::after`): sem isto, tocar na bolinha abriria a
     página do produto em vez de pôr no carrinho. */
  position:relative;
  z-index:2;
  transition:transform .18s ease,box-shadow .18s ease,background .25s ease;
}
.product__carrinho:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(176,140,74,.38)}
.product__carrinho:active{transform:scale(.94)}

/* ---------- A BOLINHA DO CARRINHO, COM GRAÇA ----------
   Brian, 18/09/2026: "o carrinho nos produtos ali ta muito sem graca,
   nao estou gostando de como ele esta, de uma melhorada por favor".

   ELA ERA UM DISCO DOURADO CHAPADO com um carrinho de traço dentro. O
   que faltava não era tamanho: era relevo e reação. Três coisas, e
   todas se medem:

     1. VOLUME — o gradiente num ângulo mais raso, um fio claro por
        dentro no alto (o brilho de peça metálica) e um fio escuro
        embaixo. Sem isto era uma cor lisa.
     2. REAÇÃO — o clarão atravessa quando o dedo chega. Um botão de
        compra que não responde parece travado, e a pessoa toca de novo
        e leva dois.
     3. O CARRINHO ANDA — o desenho desliza um fio para a direita no
        toque. É o movimento de pôr algo dentro, e é o que dá sentido
        ao desenho em vez de ele ser enfeite.

   `prefers-reduced-motion` desliga o movimento; o relevo fica. */
.product__carrinho{
  overflow:hidden;
  background:linear-gradient(118deg,var(--gold-2),var(--gold) 52%,#9a7739);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),
             inset 0 -1px 0 rgba(0,0,0,.10),
             0 6px 14px rgba(176,140,74,.30);
}
.product__carrinho:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
             inset 0 -1px 0 rgba(0,0,0,.10),
             0 10px 20px rgba(176,140,74,.38);
}

/* o clarão: parado até alguém chegar perto */
.product__carrinho-luz{
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-140%);
  pointer-events:none;
}
.product__carrinho:hover .product__carrinho-luz,
.product__carrinho:active .product__carrinho-luz{
  animation:carrinhoLuz .6s ease-out;
}
@keyframes carrinhoLuz{
  from{transform:translateX(-140%)}
  to{transform:translateX(140%)}
}

/* o desenho fica acima do clarão, e anda */
.product__carrinho > svg{
  position:relative;
  z-index:1;
  transition:transform .18s ease;
}
.product__carrinho:hover > svg{transform:translateX(2px)}
.product__carrinho:active > svg{transform:translateX(3px)}

@media (prefers-reduced-motion:reduce){
  .product__carrinho:hover .product__carrinho-luz,
  .product__carrinho:active .product__carrinho-luz{animation:none}
  .product__carrinho:hover > svg,
  .product__carrinho:active > svg{transform:none}
}

/* O MESMO VERDE DO "No carrinho" que o botão escrito já usava. O aviso
   importa mais aqui do que importava lá: o botão de texto trocava a
   palavra para "No carrinho", e um botão só de símbolo não tem palavra
   para trocar — sobra a cor para dizer que deu certo. */
.product__carrinho.is-feito{
  background:linear-gradient(135deg,#3f8b7a,#2f6f62);
  box-shadow:0 6px 14px rgba(47,111,98,.32);
}

.product__price{
  /* 18px, E O NÚMERO SAIU DA RÉGUA, não do gosto. Eu havia posto 21px
     quando o preço tinha a linha inteira; depois o carrinho veio para o
     lado dele (pedido do Brian, com foto) e a conta mudou: sobram 96px
     dos 146 do cartão, e "R$ 1.099,00" pede 110px em 21px — ele passava
     10px POR BAIXO da bolinha. Em 18px pede 95 e cabe com folga.
     Continua sendo o maior número do cartão (o nome do produto tem 16)
     e ainda é 12% maior que os 16px de antes.
     `tabular-nums` para os dígitos não dançarem de um cartão para o
     outro na mesma fileira. */
  font-size:18px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  color:var(--gold);
  margin:0;
}
/* Em promoção o preço fica em tinta escura, não em dourado: ao lado do
   selo vermelho e do preço riscado, o dourado sobre dourado tirava o
   contraste justo da peça que tem de gritar. */
.product--promo .product__price{color:var(--ink)}
/* A PARCELA. Ela era a menor letra do cartão (10px, cinza, colada no
   preço) para caber numa linha: "ou até 3x sem juros de R$ 366,33"
   mede 147px e a coluna tem 146.
   A saída não é aumentar a letra e estourar a linha — é dar ar e
   destacar O QUE IMPORTA nela. O "3x" e o "sem juros" saem em
   negrito escuro pelo JavaScript (`<b>`), o resto fica leve, e a linha
   ganha 5px de respiro em cima para desencostar do preço. */
.product__installment{
  font-size:10.5px;
  line-height:1.35;
  color:var(--muted);
  margin:5px 0 2px;
}
/* O CHIP DO "3x SEM JUROS". Ele é o que faz a linha da parcela parar
   de ser rodapé: um selo claro com o dourado da casa, e o valor ao
   lado em letra leve. */
.parcela{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  flex-wrap:wrap;
}
.parcela__chip{
  display:inline-block;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(176,140,74,.12);
  color:#8a6b2f;
  font-size:10px;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
}
.parcela__valor{color:var(--muted);white-space:nowrap}

/* ---------- O SELO DE DESCONTO ----------
   Brian, 18/09/2026: "De mais enfase nessa promocoes ai, deixe animacao
   e uma forma mais bonita".

   Era um retângulo vermelho chapado de 10,5px. Agora é um selo com
   volume (gradiente e sombra da própria cor) e um clarão que atravessa
   — e SÓ nos cortes de 20% ou mais, que é o que a classe `--forte`
   marca. Desconto de 8% e desconto de 31% não podem chamar o olho do
   mesmo jeito: se tudo pisca, nada chama.

   `prefers-reduced-motion` desliga a animação. Quem pediu ao aparelho
   para parar de mexer as coisas tem de ser atendido, e o selo continua
   legível parado — a informação está no número, não no movimento. */
.selo-off{
  position:relative;
  overflow:hidden;
  display:inline-block;
  background:linear-gradient(135deg,#e5493b,#b01608);
  color:#fff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  padding:3px 8px;
  border-radius:7px;
  box-shadow:0 2px 8px rgba(176,22,8,.34);
}
/* o texto sobe acima do clarão */
.selo-off > span{position:relative;z-index:1}
.selo-off--forte::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(100deg,
    transparent 36%,rgba(255,255,255,.55) 50%,transparent 64%);
  transform:translateX(-130%);
  animation:seloBrilho 3.4s ease-in-out infinite;
}
@keyframes seloBrilho{
  0%,64%{transform:translateX(-130%)}
  100%{transform:translateX(130%)}
}

/* O CARTÃO EM OFERTA GANHA UM FIO VERMELHO NO ALTO. É o sinal que se
   vê de longe, com a vitrine em duas colunas e o olho correndo: a
   etiqueta de canto e o selo pedem leitura, o fio não. */
.product--promo{box-shadow:var(--shadow-sm),inset 0 3px 0 #d8392b}

@media (prefers-reduced-motion:reduce){
  .selo-off--forte::after{animation:none}
}

.protocol__preco{margin:-6px 0 16px;display:flex;flex-direction:column;gap:6px}
.protocol__preco .product__price{font-size:20px}

/* ---------- barra de confiança ---------- */

.trustbar{
  position:sticky;
  bottom:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  gap:6px;
  background:linear-gradient(180deg,#111,#050505);
  color:#fff;
  padding:14px 12px calc(14px + env(safe-area-inset-bottom));
}
.trust{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:left;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.05em;
  line-height:1.2;
}
.trust + .trust{border-left:1px solid rgba(255,255,255,.14)}
.trust svg{color:var(--gold-2);flex:none}

/* ---------- navegação inferior ---------- */

/* A BARRA DE BAIXO AGORA FICA MESMO NA TELA.
 *
 * Ela era `position:sticky`, e o Brian disse que "falta uma barra
 * inferior na versão mobile". Ele estava certo, e a medição mostrou o
 * tamanho do problema: em index, produtos e atendimento, no topo E no
 * meio da rolagem, a barra estava FORA DA TELA — ela só aparecia depois
 * de rolar a página inteira até o fim. Existia no código das 16 páginas
 * e não existia para o visitante.
 *
 * A culpada é uma linha do `.shell`, setecentas acima: `overflow-x:
 * hidden`. Ancestral com overflow diferente de `visible` passa a ser o
 * dono da rolagem do sticky, e sticky preso a um ancestral que não rola
 * nunca cola em lugar nenhum. Não dá erro nem aviso: simplesmente não
 * funciona. E aquele `overflow-x:hidden` está lá por bom motivo (cortar
 * rolagem lateral), então quem muda é a barra.
 *
 * `fixed` não depende de ancestral nenhum. Centrada na largura do
 * `shell`, para acompanhar o site no computador, e com a área segura do
 * iPhone somada embaixo — senão ela fica debaixo da barrinha do sistema.
 */
.tabbar{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  width:calc(min(var(--shell), 100vw) - 24px);
  bottom:calc(10px + env(safe-area-inset-bottom));
  z-index:45;
  margin:0;
  background:#111;
  border-radius:26px;
  /* AS COLUNAS SEGUEM AS ABAS, E NÃO UM NÚMERO ESCRITO AQUI.
   *
   * Aqui estava `grid-template-columns:repeat(5,1fr)`. Eram 5 abas
   * quando isso foi escrito. Em 17/09/2026 a aba "Pedidos" saiu, a
   * pedido do Brian, e este 5 ficou: quatro abas em cinco colunas, com
   * a quinta VAZIA. As abas ficaram todas empurradas para a esquerda e
   * sobrou um buraco preto de 77px à direita no celular, 108px no
   * computador. Nada de errado acontecia — a barra simplesmente ficava
   * torta, e foi o Brian que viu na tela.
   *
   * Contar as abas na mão é a mesma doença dos menus escritos em 16
   * páginas: um dia alguém mexe num lado e esquece o outro. Com
   * `auto-flow:column` + `auto-columns:1fr` o número de colunas é o
   * número de abas, sempre, e tirar ou pôr uma aba não deixa buraco. */
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  padding:9px 6px 8px;
  box-shadow:0 18px 40px rgba(0,0,0,.3);
}
.tab{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  color:rgba(255,255,255,.72);
  font-size:11px;
  transition:color .2s ease;
}
.tab:hover{color:#fff}
.tab.is-active{color:var(--gold-2)}
.tab__ico{display:grid;place-items:center;height:24px}

/* A BARRINHA DECORATIVA SAIU.
   Ela imitava o risquinho de baixo do iPhone, e fazia sentido quando a
   barra vinha no fim da página. Agora que ela fica fixa na tela, esses
   28px são 28px tirados de TODA página, para sempre, para desenhar um
   enfeite — e ainda por cima um enfeite repetido, porque o risquinho de
   verdade do aparelho fica logo embaixo. */
.tabbar__handle{display:none}

/* ---------- menu lateral ---------- */

.drawer{
  position:fixed;
  inset:0;
  z-index:80;
  visibility:hidden;
  pointer-events:none;
  /* A VISIBILIDADE ESPERA A ANIMAÇÃO TERMINAR.
     Sem este atraso, fechar o menu era instantâneo: a classe saía, a
     visibilidade virava "hidden" no mesmo quadro e o painel desaparecia
     sem deslizar. Ele abria bonito e fechava de um golpe — e ninguém
     percebe que o defeito é esse, só sente que o menu é seco. */
  transition:visibility 0s linear .3s;
}
.drawer.is-open{
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s;
}

.drawer__scrim{
  position:absolute;
  inset:0;
  background:rgba(12,10,6,.5);
  opacity:0;
  transition:opacity .25s ease;
}
.drawer.is-open .drawer__scrim{opacity:1}

.drawer__panel{
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(330px,86%);
  background:var(--cream-2);
  padding:calc(20px + env(safe-area-inset-top,0px)) 0
          calc(24px + env(safe-area-inset-bottom,0px));
  transform:translateX(100%);
  /* Sai um pouco mais devagar do que entra. Abrir é a pessoa pedindo
     para ver; fechar é ela já ter decidido — e movimento de saída
     apressado parece que o site engoliu o menu. */
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  box-shadow:-20px 0 50px rgba(0,0,0,.18);
  /* Um respiro dourado quase invisível no alto — 3% de dourado que
     desaparece em 220px. É o que faz o cartão branco de "quem está
     usando" parecer pousado em cima de algo, em vez de um retângulo
     branco num retângulo branco. */
  background-image:linear-gradient(180deg,rgba(176,140,74,.06),rgba(176,140,74,0) 220px);
  background-repeat:no-repeat;
}
.drawer.is-open .drawer__panel{transform:none}

.drawer__top{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 16px 16px;
}
/* A MARCA NO ALTO DA GAVETA.
   O nome sozinho em 15px era a única aparição da marca no site sem o
   desenho dela. Aqui ele vem com a logo, e o conjunto é um link para a
   inicial — que é o que a marca faz em qualquer site. */
.drawer__marca{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:4px;
  border-radius:14px;
  transition:background .16s ease;
}
.drawer__marca:hover{background:rgba(176,140,74,.07)}
.drawer__logo{width:38px;height:38px;flex:none}
.drawer__marca-nome{
  font-size:14px;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* O RISCO QUE SEPARA O TOPO virou um fio com degradê: dourado no meio,
   apagando nas duas pontas — separa sem cortar a gaveta em duas caixas.
   Ele é `::after` do próprio topo, ancorado no `position:relative` dele
   logo acima. A primeira versão media a altura do topo à mão
   (`top:74px` escondido numa reserva de variável), e o conferidor de
   CSS me pegou: número de cabeça no lugar onde o navegador já sabe a
   conta. */
.drawer__top::after{
  content:"";
  position:absolute;
  left:16px;right:16px;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-soft),transparent);
}

/* ---- quem está usando, no alto do menu ---- */
.drawer__quem{
  display:flex;
  align-items:center;
  gap:12px;
  margin:4px 12px 8px;
  padding:11px 14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(16,16,16,.04);
  text-align:left;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.drawer__quem:hover{
  border-color:var(--gold-soft);
  box-shadow:0 4px 14px rgba(176,140,74,.14);
  transform:translateY(-1px);
}
.drawer__quem-seta{flex:none;color:var(--muted-2);margin-left:auto}
.drawer__quem:hover .drawer__quem-seta{color:var(--gold)}
.drawer__inicial{
  flex:none;
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#fff;
  font-size:15px;
  font-weight:700;
}
/* Quem o site NÃO conhece vê o desenho de pessoa num círculo mais
   discreto — o dourado cheio é para quem tem nome ali. */
.drawer__inicial:not(.tem-letra){
  background:var(--cream);
  border:1px solid var(--gold-soft);
  color:var(--gold);
}
.drawer__inicial.tem-letra .drawer__inicial-ico{display:none}
.drawer__inicial:not(.tem-letra) .drawer__inicial-letra{display:none}
.drawer__quem-texto{min-width:0;display:block}

/* `display:block` nas duas: são <span>, porque parágrafo dentro de <a>
   é HTML inválido, e span é inline. Sem isto o nome e o "Ver meus
   pedidos" saem GRUDADOS na mesma linha.
   
   Eu já tinha cometido e escrito este mesmo erro na lista do painel
   algumas horas antes, e cometi de novo aqui. Escrever a lição num
   arquivo não impede de repetir noutro: o que pegou foi abrir a tela e
   olhar. */
.drawer__quem-nome,
.drawer__quem-pe{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.drawer__quem-nome{
  font-size:15.5px;
  font-weight:600;
  margin:0;
}
.drawer__quem-pe{
  font-size:12.5px;
  color:var(--muted);
  margin:2px 0 0;
}

/* Os títulos dos três grupos. A regra existia desde a primeira versão
   da gaveta e nunca tinha sido usada — a lista era corrida. */
.drawer__secao{
  margin:9px 0 3px;
  padding:0 22px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted-2);
}
.drawer__nav .drawer__secao:first-child{margin-top:4px}

.drawer__nav{display:flex;flex-direction:column}
.drawer__nav a{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 12px;
  /* A ALTURA DE CADA LINHA É CONTADA, não escolhida de olho: 30px da
     pastilha + 6 de folga em cima e embaixo = 42, acima dos 40 que o
     polegar pede. Eu tinha posto 8 de folga e uma pastilha de 34, e a
     gaveta passou a ter 907px de conteúdo — 63 a mais que a tela de um
     iPhone 14. O menu inteiro tem de caber sem rolar, senão o
     "Atendimento" e a troca de idioma ficam abaixo da dobra. */
  padding:6px 10px;
  border-radius:14px;
  font-size:15px;
  color:var(--ink-2);
  transition:background .16s ease,color .16s ease;
  /* Entram em cascata quando o menu abre. O atraso vem do JS, que
     numera os itens. */
  opacity:0;
  transform:translateX(14px);
}
/* O DESENHO DE CADA ITEM DENTRO DE UMA PASTILHA.
   `padding` e `background` num `<svg>` funcionam: ele é elemento
   substituído, mas aceita caixa. Assim a pastilha sai sem precisar de
   um `<span>` em volta de cada um dos nove itens, em dezesseis
   páginas. `box-sizing:content-box` é o que mantém o desenho em 18px
   com a pastilha em 34. */
.drawer__nav a svg{
  flex:none;
  box-sizing:content-box;
  padding:6px;
  border-radius:10px;
  background:var(--cream);
  border:1px solid var(--line);
  color:var(--muted);
  transition:color .16s ease,background .16s ease,border-color .16s ease;
}
.drawer__nav a:hover{color:var(--gold);background:rgba(176,140,74,.07)}
.drawer__nav a:hover svg{color:var(--gold);background:#fff;border-color:var(--gold-soft)}

/* A página em que a pessoa já está. Sem isto, o menu de dez itens não
   diz onde ela está, e é fácil clicar no que já está aberto. */
.drawer__nav a[aria-current="page"]{
  color:var(--gold);
  font-weight:600;
  /* O RISCO DOURADO DA ESQUERDA SAIU: com a pastilha arredondada ele
     ficava um traço reto encostado numa curva. Quem marca a página
     agora é o fundo branco com sombra e a pastilha do desenho em
     dourado — o item parece levantado, e não riscado. */
  background:var(--card);
  border:1px solid var(--gold-soft);
  box-shadow:0 2px 10px rgba(176,140,74,.16);
}
.drawer__nav a[aria-current="page"] svg{
  color:#fff;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  border-color:transparent;
}

.drawer.is-open .drawer__nav a{
  animation:entraItem .34s cubic-bezier(.22,.7,.3,1) forwards;
  animation-delay:calc(var(--i,0) * 32ms + 60ms);
}
@keyframes entraItem{to{opacity:1;transform:none}}

.drawer__foot{
  margin-top:auto;
  padding:12px 20px 8px;
  font-size:11px;
  letter-spacing:.06em;
  text-align:center;
  color:var(--muted-2);
  line-height:1.6;
}
.drawer__foot::before{
  content:"";
  display:block;
  height:1px;
  margin:0 0 10px;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* Quem pediu menos movimento no sistema abre e fecha sem deslizar —
   mas continua abrindo e fechando. */
@media (prefers-reduced-motion:reduce){
  .drawer,.drawer__panel,.drawer__scrim{transition:none}
  .drawer__panel{transform:none}
  .drawer__nav a{opacity:1;transform:none}
  .drawer.is-open .drawer__nav a{animation:none}
  .btn-conta:active{transform:none}
}

/* ---------- busca ---------- */

.searchbar{
  padding:0 20px;
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease,padding .25s ease;
}
.searchbar.is-open{max-height:80px;padding-block:6px 10px}
.searchbar input{
  width:100%;
  border:1px solid var(--line);
  border-radius:999px;
  padding:12px 18px;
  font-size:14px;
  font-family:inherit;
  background:#fff;
  outline:none;
}
.searchbar input:focus{border-color:var(--gold)}

/* ---------- rodapé ---------- */

.footnote{
  padding:22px 20px 8px;
  font-size:11px;
  line-height:1.6;
  color:var(--muted);
  text-align:center;
}

.is-hidden{display:none !important}

/* ---- a troca de categoria tem movimento -----------------------
   O filtro esconde com `display:none`, e display NAO transiciona: nao
   existe meio caminho entre "na tela" e "fora do layout". Entao a
   animacao nao e na saida, e na ENTRADA — quem fica visivel entra de
   novo, com um atraso crescente que faz a grade se montar em cascata
   em vez de piscar toda de uma vez.

   O atraso e limitado no JS: numa vitrine grande, o ultimo cartao
   apareceria segundos depois, e ai o site parece travado. */
@keyframes entraCartao{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to  {opacity:1;transform:none}
}

.product.is-entrando{
  animation:entraCartao .34s cubic-bezier(.22,.7,.3,1) backwards;
  animation-delay:calc(var(--i,0) * 26ms);
}

/* Quem pediu menos movimento no sistema nao recebe nenhum. Nao e
   enfeite opcional: animacao em quem tem enjoo de movimento passa mal
   de verdade. */
@media (prefers-reduced-motion:reduce){
  .product.is-entrando{animation:none}
  .chip{transition:none}
  .chip:active{transform:none}
  .chip__fundo{transition:none;animation:none}
  /* As etiquetas param de piscar e de brilhar. A COR fica: ela é
     informação (vermelho = promoção), não movimento. */
  .badge--promo::after,.product__badge--promo::after,
  .badge--vendido::after,.product__badge--vendido::after{
    animation:none;
    opacity:0;
  }
}
[hidden]{display:none !important}

/* ---------- campos de formulário ---------- */

.field{display:flex;flex-direction:column;gap:7px}
.field__label{
  font-size:12px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
}
.field__box{position:relative;display:flex;align-items:center}
.field__box input,
.field__box select{
  width:100%;
  font:inherit;
  font-size:15px;
  color:var(--ink);
  background:#fbf9f5;
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 14px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field__box input:focus,
.field__box select:focus{
  border-color:var(--gold);
  background:#fff;
  box-shadow:0 0 0 3px rgba(176,140,74,.14);
}
.field__box input[type=password]{letter-spacing:.08em}
.field__box:has(.field__eye) input{padding-right:48px}

.field__box select{
  appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6a64' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
}

.field__eye{
  position:absolute;
  right:8px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:9px;
  color:var(--muted);
  transition:color .2s ease,background .2s ease;
}
.field__eye:hover{color:var(--gold);background:rgba(176,140,74,.1)}

/* ---------- janela modal ---------- */

.modal{
  position:fixed;
  inset:0;
  z-index:90;
  visibility:hidden;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.modal.is-open{visibility:visible;pointer-events:auto}

.modal__scrim{
  position:absolute;
  inset:0;
  background:rgba(12,10,6,.5);
  opacity:0;
  transition:opacity .22s ease;
}
.modal.is-open .modal__scrim{opacity:1}

.modal__card{
  position:relative;
  width:100%;
  max-width:420px;
  max-height:90vh;
  overflow-y:auto;
  background:var(--card);
  border-radius:20px;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  box-shadow:var(--shadow-lg);
  transform:translateY(14px) scale(.98);
  opacity:0;
  transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .24s ease;
}
.modal.is-open .modal__card{transform:none;opacity:1}

.modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.modal__title{font-family:var(--titulo);font-weight:600;letter-spacing:-.02em;font-size:24px;margin:0}
.modal__lead{margin:-6px 0 2px;font-size:13px;line-height:1.5;color:var(--muted)}

.modal__acoes{display:flex;gap:10px;margin-top:6px}
.modal__acoes .btn--outline{width:auto;flex:none;padding-inline:20px}
.modal__acoes .btn--primary{flex:1;font-size:15px;padding:13px 18px;min-width:0;justify-content:center;gap:10px}

/* ---------- aviso flutuante ---------- */

.toast{
  position:fixed;
  left:50%;
  /* acima da barra de baixo, que agora é fixa: no lugar antigo (24px) o
     recado nascia atrás dela */
  bottom:calc(var(--barra-pe) + 26px + env(safe-area-inset-bottom));
  transform:translate(-50%,20px);
  z-index:95;
  max-width:min(420px,calc(100% - 32px));
  background:#111;
  color:#fff;
  font-size:13.5px;
  line-height:1.45;
  padding:13px 18px;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(0,0,0,.3);
  opacity:0;
  pointer-events:none;
  transition:opacity .24s ease,transform .24s ease;
}
.toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* ---------- desktop ---------- */

@media (min-width:900px){
  :root{--shell:1120px}

  .shell{box-shadow:none}
  /* `.rota` entrou nesta lista junto com a faixa dos dois países: sem
     ela, a faixa ficaria com 20px de margem enquanto as categorias
     logo abaixo teriam 48, e o desalinhamento entre duas caixas
     empilhadas é do tipo que se vê sem saber nomear. */
  .wrap,.hero,.rota,.categorias,.section-head,.carousel,.grid-products,.chips,.page-head{padding-inline:48px}
  .promo{margin-inline:48px}

  .hero{padding-top:24px}
  .hero__grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:30px;
  }
  .hero__title{font-size:60px;max-width:none}
  .hero__text{font-size:18px}
  .hero__art{
    position:static;
    width:100%;
    max-width:520px;
    margin-inline:auto;
  }

  .categorias{gap:18px;padding-top:36px}
  .categoria{padding:24px 14px}
  /* Na tela grande o cartão tem o dobro do respiro; o disco acompanha,
     senão ele vira um botão pequeno perdido no meio de um cartão. */
  .categoria__ico{width:56px;height:56px}
  .categoria__ico svg{width:28px;height:28px}
  .categoria__nome{font-size:13.5px}
  .categoria__conta{font-size:12px}

  /* NO COMPUTADOR TAMBÉM SÃO TRÊS.
     Esta linha punha DOIS por tela, de quando o cartão era grande e
     deitado — e num monitor de 1280 isso dava cartões de 498px com
     foto de 498px, um exagero. O pedido do Brian ("ver 3") vale em
     qualquer tela, então aqui sobra só o teto: sem ele, três cartões
     esticariam até 400px cada numa tela larga. 260px é o tamanho em que
     a foto do produto ainda respira sem virar um pôster. */
  .protocol{max-width:260px}
  .grid-products{grid-template-columns:repeat(4,1fr);gap:20px}
  .promo{min-height:280px}
  .promo__title{font-size:38px}

  .tabbar{
    position:fixed;
    left:50%;
    bottom:14px;
    transform:translateX(-50%);
    width:min(520px,calc(100% - 24px));
    margin:0;
  }
  .trustbar{padding-inline:48px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}

/* =========================================================
   Quiz, favoritos, formulários e fila de interesse
   ========================================================= */

/* ---------- coração de favorito ---------- */

.fav{
  position:absolute;
  top:8px;right:8px;
  z-index:2;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--muted);
  box-shadow:var(--shadow-sm);
  transition:color .2s ease,transform .2s ease,background .2s ease;
}
.fav:hover{color:var(--gold);transform:scale(1.06)}
.fav.is-salvo{color:#c0392b}

/* A BATIDA DO CORAÇÃO AO SALVAR.
   Ela entrou no lugar da tarja preta que o Brian mandou tirar ("tire
   isso", 18/09/2026, com a foto do "salvo nos favoritos" cobrindo a
   vitrine). O coração já ficava vermelho na hora, mas uma cor que muda
   sem movimento passa desapercebida no canto de um cartão pequeno; a
   batida faz o olho ir até lá — e acontece NO PRÓPRIO cartão, sem
   cobrir nada. */
.fav.is-batendo{animation:favBate .42s cubic-bezier(.3,1.5,.5,1)}
@keyframes favBate{
  0%{transform:scale(1)}
  38%{transform:scale(1.3)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .fav.is-batendo{animation:none}
}

.fav-contador{
  position:absolute;
  top:2px;right:0;
  min-width:17px;height:17px;
  padding:0 4px;
  display:grid;place-items:center;
  border-radius:999px;
  background:var(--gold);
  color:#fff;
  font-size:10px;
  font-weight:700;
}
.topbar__actions .icon-btn{position:relative}

/* ---------- produto indisponível ---------- */

.product.is-indisponivel .product__media{opacity:.55;filter:grayscale(.25)}
.product__badge--off{background:#5b5b5b}
.btn--espera{border-color:var(--gold);color:var(--gold)}
.btn--espera:hover{background:var(--gold);color:#fff}

/* ---------- quiz ---------- */

.quiz-area{padding-block:8px 26px}

.quiz__barra{
  height:5px;
  border-radius:3px;
  background:#eae3d6;
  overflow:hidden;
  margin-bottom:10px;
}
.quiz__barra span{
  display:block;
  height:100%;
  width:0;
  border-radius:3px;
  background:linear-gradient(90deg,var(--gold-2),var(--gold));
  transition:width .35s cubic-bezier(.22,.61,.36,1);
}
.quiz__etapa{
  margin:0 0 16px;
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
}

.quiz-card{
  background:var(--card);
  border-radius:22px;
  padding:24px 20px 20px;
  box-shadow:var(--shadow-md);
}

.quiz__selo{
  display:inline-block;
  margin:0 0 10px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--gold);
  border:1px solid var(--gold-soft);
  border-radius:999px;
  padding:5px 12px;
}
.quiz__titulo{
  font-family:var(--titulo);
  font-weight:600;letter-spacing:-.02em;
  font-size:27px;
  line-height:1.15;
  margin:0 0 8px;
}
.quiz__ajuda{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--muted)}

.quiz__opcoes{display:flex;flex-direction:column;gap:10px}

.quiz__op{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:15px 16px;
  border:1px solid var(--line);
  border-radius:15px;
  background:#fbf9f5;
  transition:border-color .2s ease,background .2s ease,transform .15s ease;
}
.quiz__op:hover{border-color:var(--gold);background:#fff;transform:translateY(-2px)}
.quiz__op-nome{font-size:15.5px;font-weight:600;grid-column:1}
.quiz__op-detalhe{grid-column:1;font-size:12.5px;color:var(--muted);margin-top:3px}
.quiz__op-seta{grid-column:2;grid-row:1/3;color:var(--gold)}

.quiz__voltar{
  margin-top:18px;
  font-size:13.5px;
  color:var(--muted);
}
.quiz__voltar:hover{color:var(--gold)}

.quiz__produto{
  display:grid;
  grid-template-columns:120px 1fr;
  gap:14px;
  align-items:center;
  background:#fbf9f5;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  margin-bottom:20px;
}
.quiz__produto-img{background:#fff;border-radius:12px;padding:6px}
.quiz__produto-nome{font-family:var(--titulo);font-weight:600;font-size:20px;margin:0 0 4px}
.quiz__produto-desc{font-size:12.5px;line-height:1.45;color:var(--muted);margin:0 0 8px}

.quiz__acoes{display:flex;flex-direction:column;gap:10px}
.quiz__acoes .btn--outline{justify-content:center}

/* ---------- formulários públicos ---------- */

.form-card{
  background:var(--card);
  border-radius:20px;
  padding:22px 20px;
  box-shadow:var(--shadow-md);
  display:flex;
  flex-direction:column;
  gap:15px;
  margin-bottom:10px;
}
.form-card__linha{display:grid;grid-template-columns:1fr;gap:15px}
.form-card__nota{margin:0;font-size:12px;line-height:1.5;color:var(--muted);text-align:center}

.form-card__ok{
  margin:0;
  background:#eef7f0;
  color:#2c6338;
  border:1px solid #cfe6d6;
  border-radius:12px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.5;
}

.field__box textarea{
  width:100%;
  font:inherit;
  font-size:15px;
  color:var(--ink);
  background:#fbf9f5;
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 14px;
  outline:none;
  resize:vertical;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.field__box textarea:focus{
  border-color:var(--gold);
  background:#fff;
  box-shadow:0 0 0 3px rgba(176,140,74,.14);
}

.vantagens{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:18px;
}
.vantagem{
  background:var(--card);
  border-radius:14px;
  padding:14px 10px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  font-size:12px;
  line-height:1.35;
}
.vantagem b{display:block;font-size:13px;margin-bottom:3px}
.vantagem span{color:var(--muted)}

/* ---------- estado vazio ---------- */

.vazio-bloco{
  margin:10px 20px 20px;
  background:var(--card);
  border-radius:20px;
  padding:34px 24px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.vazio-bloco svg{color:var(--gold-soft)}
.vazio-bloco__titulo{font-family:var(--titulo);font-weight:600;font-size:21px;margin:6px 0 0}
.vazio-bloco__texto{font-size:13.5px;color:var(--muted);margin:0 0 8px;max-width:32ch}
.vazio-bloco .btn{max-width:280px}

/* ---------- atalhos na home ---------- */

.atalhos{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding:22px 20px 4px;
}
.atalho{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--card);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease,box-shadow .2s ease;
}
.atalho:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.atalho__ico{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  border-radius:13px;
  background:#f6efe3;
  color:var(--gold);
}
.atalho__texto{flex:1}
.atalho__texto b{display:block;font-size:15px;margin-bottom:2px}
.atalho__texto span{font-size:12.5px;color:var(--muted);line-height:1.4}
.atalho__seta{color:var(--gold);flex:none}

@media (min-width:700px){
  .form-card__linha{grid-template-columns:1fr 1fr}
  .atalhos{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:900px){
  .quiz-card{padding:34px 32px 28px}
  .quiz__titulo{font-size:34px}
  .form-card{padding:30px 28px}
}

/* =========================================================
   Atendimento, pedidos, conta e textos
   ========================================================= */

.atalhos--dentro{padding-inline:0;padding-top:0}

.cartao-zap{
  display:flex;
  align-items:center;
  gap:14px;
  background:linear-gradient(135deg,#1f7a44,#166534);
  color:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 14px 30px rgba(22,101,52,.24);
  margin-bottom:18px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.cartao-zap:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(22,101,52,.32)}
.cartao-zap__ico{
  width:46px;height:46px;flex:none;
  display:grid;place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.16);
}
.cartao-zap__texto{flex:1;line-height:1.35}
.cartao-zap__texto b{display:block;font-size:15.5px}
.cartao-zap__texto span{font-size:12.5px;color:rgba(255,255,255,.82)}
.cartao-zap .atalho__seta{color:rgba(255,255,255,.8)}

.secao-titulo{
  font-family:var(--titulo);
  font-weight:600;letter-spacing:-.02em;
  font-size:24px;
  margin:26px 0 14px;
}

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

.passos{display:flex;flex-direction:column;gap:10px;counter-reset:passo}
.passo{
  display:flex;
  gap:13px;
  background:var(--card);
  border-radius:15px;
  padding:15px 16px;
  box-shadow:var(--shadow-sm);
  font-size:13.5px;
  line-height:1.45;
}
.passo__n{
  width:28px;height:28px;flex:none;
  display:grid;place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#fff;
  font-weight:700;
  font-size:13px;
}
.passo b{display:block;font-size:15px;margin-bottom:2px}
.passo span{color:var(--muted)}

/* ---------- perguntas frequentes ---------- */

.faq{display:flex;flex-direction:column;gap:8px}
.faq__item{
  background:var(--card);
  border-radius:15px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.faq__pergunta{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  text-align:left;
  padding:15px 16px;
  font-size:14.5px;
  font-weight:500;
}
.faq__mais{
  width:18px;height:18px;flex:none;
  position:relative;
}
.faq__mais::before,
.faq__mais::after{
  content:"";
  position:absolute;
  background:var(--gold);
  border-radius:2px;
  transition:transform .25s ease,opacity .2s ease;
}
.faq__mais::before{top:8px;left:0;width:18px;height:2px}
.faq__mais::after{left:8px;top:0;width:2px;height:18px}
.faq__item.is-aberto .faq__mais::after{transform:rotate(90deg);opacity:0}

.faq__resposta{
  max-height:0;
  overflow:hidden;
  transition:max-height .28s ease;
}
.faq__item.is-aberto .faq__resposta{max-height:340px}
.faq__resposta p{
  margin:0;
  padding:0 16px 16px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-2);
}

/* ---------- meus pedidos ---------- */

.aviso-local{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--gold-soft);
  border-left:4px solid var(--gold);
  border-radius:12px;
  padding:13px 15px;
  font-size:12.5px;
  line-height:1.5;
  color:var(--ink-2);
  margin-bottom:16px;
}
.aviso-local svg{color:var(--gold);flex:none;margin-top:1px}

.lista-pedidos{display:flex;flex-direction:column;gap:12px}

.pedido{
  background:var(--card);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow-sm);
}
.pedido__topo{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pedido__nome{margin:0;font-family:var(--titulo);font-weight:600;font-size:19px}
.pedido__qtd{
  font-size:11.5px;
  font-weight:700;
  color:var(--gold);
  background:#f6efe3;
  border-radius:999px;
  padding:4px 10px;
  white-space:nowrap;
}
.pedido__data{margin:6px 0 0;font-size:12px;color:var(--muted)}
/* O andamento, que só existe quando o pedido veio da CONTA (é o banco que
   sabe se a equipe já confirmou). Em dourado porque é a informação que a
   pessoa abriu esta tela para ver. */
.pedido__estado{
  margin:5px 0 0;
  font-size:12.5px;
  font-weight:600;
  color:var(--gold);
}
.pedido__endereco{margin:6px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.45}
.pedido__acoes{margin-top:12px}
.pedido__acoes .btn{width:100%;justify-content:center}

.acao-discreta{text-align:center;margin:16px 0 0}

/* ---------- minha conta ---------- */

.resumo-conta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:16px;
}
.resumo-item{
  background:var(--card);
  border-radius:15px;
  padding:16px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease;
}
.resumo-item:hover{transform:translateY(-2px)}
.resumo-item b{display:block;font-family:var(--titulo);font-weight:600;letter-spacing:-.02em;font-size:27px;color:var(--gold)}
.resumo-item span{font-size:12.5px;color:var(--muted)}

/* ---------- texto corrido ---------- */

.texto-longo h2{
  font-family:var(--titulo);
  font-weight:600;
  font-size:21px;
  margin:24px 0 8px;
}
.texto-longo h2:first-child{margin-top:6px}
.texto-longo p{
  margin:0;
  font-size:14px;
  line-height:1.65;
  color:var(--ink-2);
}

/* ESPAÇO PARA A BARRA INFERIOR NÃO COBRIR O CONTEÚDO.
   Estava 0 — e estava certo enquanto a barra vinha no fim da página, em
   fluxo. Agora ela é fixa e flutua sobre tudo: sem este espaço, o
   último item de cada página (o rodapé, o botão de enviar de um
   formulário) fica escondido atrás dela, e ninguém descobre que
   escondeu porque a barra é opaca. */
.shell{padding-bottom:calc(var(--barra-pe) + 26px + env(safe-area-inset-bottom))}

/* =========================================================
   Alvos de toque e foco — acabamento de acessibilidade
   ========================================================= */

.fav{width:40px;height:40px}

.dot{
  position:relative;
  padding:0;
}
.dot::after{
  content:"";
  position:absolute;
  inset:-14px;
}

.link-more{padding:8px 0 6px}

/* ---------- a tela de atendimento ----------

   Montada a partir da foto do Brian: chamada com a arte à direita,
   formulário em duas colunas, os interesses, o cartão do Paraguai, os
   três passos, o botão e o aviso de privacidade. */

.atend-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  padding-top:22px;
  position:relative;
}
/* 72% e nao 60%: com 60% o "Seu atendimento" quebrava em duas linhas e
   o titulo saia com tres, e a foto tem duas. A arte fica atras, entao
   dividir a largura ao meio nao e necessario. */
.atend-hero__texto{position:relative;z-index:1;max-width:72%}

.atend-hero__titulo{
  font-family:var(--titulo);
  /* clamp em vez de tamanho fixo: o título tem duas linhas longas e a
     medida certa muda muito entre 320 e 430px. */
  /* 7.6vw: em 375px da 28.5px, e "Seu atendimento" cabe numa linha.
     Com 8.4vw dava 31.5px e quebrava. Medido, nao estimado. */
  font-size:clamp(25px,7.6vw,40px);
  line-height:1.12;
  font-weight:600;
  letter-spacing:-.015em;
  margin:0;
}
.atend-hero__titulo em{
  display:block;
  font-style:normal;
  color:var(--gold);
}
.atend-hero__lead{
  font-size:14px;
  line-height:1.6;
  color:var(--muted);
  margin:14px 0 0;
  max-width:34ch;
}

/* A arte fica ATRÁS do texto, e não ao lado: no celular não há largura
   para as duas coisas, e a foto do Brian mostra exatamente isso — o
   frasco aparecendo por trás e à direita da chamada. */
.atend-hero__arte{
  position:absolute;
  top:-6px;
  right:-26px;
  width:52%;
  max-width:230px;
  z-index:0;
  pointer-events:none;
}
.atend-hero__arte img{width:100%;height:auto;display:block;position:relative;z-index:1}

/* o arco dourado, desenhado aqui */
.atend-hero__arco{
  position:absolute;
  top:-14%;
  right:-18%;
  width:118%;
  aspect-ratio:1;
  border-radius:50%;
  border:1.5px solid var(--gold-soft);
  /* só a parte de cima do círculo, como na foto */
  clip-path:inset(0 0 42% 0);
}

@media (min-width:760px){
  .atend-hero{grid-template-columns:1fr 1fr;align-items:center;gap:30px;padding-top:34px}
  .atend-hero__texto{max-width:none}
  .atend-hero__arte{position:static;width:100%;max-width:360px;margin-left:auto}
  .atend-hero__arco{top:2%;right:2%;width:92%;clip-path:none}
}

/* ---- o formulário ---- */

/* O <form> nao e mais o cartao: na foto do Brian o cartao do Paraguai e
   o dos passos sao cartoes SEPARADOS, do tamanho da pagina, e nao caixas
   dentro de outra caixa. O form so agrupa, para o envio funcionar. */
.atend-form{margin-top:20px}

.atend-form__cartao{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow-sm);
  /* O cartao se declara mensuravel: assim as grades de dentro perguntam
     a largura DELE, e nao a da tela. Foi confundir as duas que cortou
     os nomes dos interesses entre 660 e 1023px — ali a tela cresce e o
     cartao fica parado em 478px. */
  container-type:inline-size;
}
/* UM CAMPO POR LINHA no celular, dois a partir de 430px.
   A foto mostra duas colunas. Medido num telefone de 375px: metade da
   largura da o campo com 141px, e o texto de dica "Seu nome completo"
   precisa de 163px — sairia "Seu nome comp". Dica cortada num campo e
   pior que campo de largura cheia, porque a pessoa nao sabe o que
   escrever ali.

   A conta por coluna vem de medicao corrigida: pela dica mais larga eu
   tinha 180px e pus o limiar em 470 — e em 470 exatos o SELETOR ainda
   cortava por 5px, porque ele gasta mais 42px com o icone e a seta.
   151 + 42 = 193px por coluna, logo duas colunas pedem
   2x193 + 12 de vao = 398px DE CARTAO.

   398 de cartao, e nao 500 de tela. Era @media (min-width:500px) aqui,
   e funcionava por sorte: a mesma confusao entre a largura da tela e a
   largura do cartao cortou os nomes dos interesses logo abaixo. A tela
   cresce; o cartao, nao. Quem manda no campo e o cartao.

   Duas colunas no maximo, como na foto — nunca quatro campos numa
   linha, mesmo num cartao largo.

   Navegador que nao entende @container fica com uma coluna: mais
   comprido, e nada cortado.

   `minmax(0,1fr)` e nao `1fr`: com `1fr` a coluna nao encolhe abaixo do
   conteudo e o campo empurra a grade fora da tela. */
.atend-form__linhas{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}
@container (min-width:398px){
  .atend-form__linhas{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* campo com ícone dentro */
.field__box--icone{position:relative}
.field__box--icone input,
.field__box--icone select{padding-left:33px}

/* Em duas colunas o campo fica com ~140px. Com a fonte de sempre o
   "Seu nome completo" e o "(xx) xxxxx-xxxx" saiam cortados — medido na
   foto da tela, nao estimado. */
.atend-form__linhas .field__label{font-size:11px;letter-spacing:.06em}
.field__icone{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted-2);
  pointer-events:none;
  display:block;
}

/* ---- os interesses ---- */

.atend-inter{border:0;margin:16px 0 0;padding:0}
/* QUANTOS CABEM POR LINHA, POR CONTA E NAO POR CHUTE.

   A foto mostra os quatro em uma linha. Eu pus quatro a partir de 430px
   e fui medir: a caixa saiu com 82px e o texto "Emagrecimento" precisa
   de 91px — vazava em tres dos quatro. Em 560px ainda vazava. E dois
   por dois em 320px tambem vazava.

   A conta, com a etiqueta mais larga ("Emagrecimento", 91px), o icone
   (16), o vao do icone (7) e o recuo da caixa (26) = 140px por
   interesse.

   POR QUE NAO TEM MAIS @media AQUI

   Eu tinha escrito 1 / 2 / 4 colunas em 363 / 364 / 660px de TELA, e
   entre 660 e 1023px os quatro nomes sairam cortados. O motivo: o
   @media pergunta a largura da TELA, e os interesses nao moram na tela
   — moram dentro do cartao do formulario, que fica parado em 478px
   nessa faixa toda. Quatro colunas de um cartao de 478px dao 105px por
   chip, 54px para o texto, e "Emagrecimento" precisa de 91px. Medido:
   em 660px e em 820px, todos os quatro cortados.

   Agora quem conta e a propria grade: `auto-fit` com minimo de 140px
   poe quantas colunas couberem NO CARTAO, seja ele qual for. Medido
   depois da troca — cartao 242px: 1 por linha · 297px: 2 · 442px: 3 ·
   890px: 4, e nenhum texto cortado em nenhuma largura. Nao ha mais
   numero de tela para eu errar. */
.atend-inter__lista{
  display:grid;
  /* O que vale em qualquer navegador: cabe quem couber, nada cortado.
     Num cartao de 442px isso da 3 numa linha e 1 na outra — legivel,
     mas torto. */
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  margin-top:8px;
}
/* E aqui o acerto do desenho: 1, 2 ou 4 por linha — nunca 3+1. As
   contas sao da largura do CARTAO (2x140+8=288 · 4x140+24=584), nao da
   tela. Navegador antigo que nao entende @container simplesmente fica
   com o auto-fit de cima, que ja e seguro: nenhum texto cortado. */
@container (min-width:288px){
  .atend-inter__lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container (min-width:584px){
  .atend-inter__lista{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.atend-chip{
  display:flex;
  align-items:center;
  gap:7px;
  /* 42px: alvo de dedo. Os botões do site chegaram a 16px de altura
     antes da varredura de celular, e esta tela nasce certa. */
  min-height:42px;
  padding:0 13px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  font-size:13px;
  font-weight:500;
  color:var(--muted);
  cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.atend-chip svg{flex:none}
/* Rede de seguranca: se um dia a etiqueta crescer, ela encurta com
   reticencias DENTRO da caixa em vez de passar por cima do vizinho.
   `min-width:0` e o que permite encolher — sem ele o flex nao cede. */
.atend-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.atend-chip:hover{border-color:var(--gold-soft)}
.atend-chip.is-vale{
  border-color:var(--gold);
  color:var(--gold);
  background:#fdfaf4;
}

/* ---- o cartão do Paraguai ---- */

.atend-pais{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:14px;
  background:var(--card);
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
}
.atend-pais__ico{
  flex:none;
  width:36px;height:36px;
  border-radius:11px;
  background:var(--card);
  color:var(--gold);
  display:grid;place-items:center;
  border:1px solid var(--gold-soft);
}
.atend-pais__corpo{flex:1;min-width:0}
.atend-pais__titulo{font-size:14px;font-weight:600;margin:0}
.atend-pais__texto{font-size:12.5px;line-height:1.55;color:var(--muted);margin:4px 0 0}
.atend-pais__bandeira{
  flex:none;
  width:30px;height:21px;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}
.atend-pais__bandeira svg{display:block;width:100%;height:100%}

/* ---- o mesmo cartão, na página inicial: dois países em vez de um ----

   `--rota` muda três coisas, e só elas:

   1. `align-items:center` — com duas bandeiras e a seta, o grupo da
      direita fica alto; alinhado ao topo, ele encostava no título e
      sobrava um vão embaixo. Na página de Atendimento o cartão continua
      alinhado ao topo, onde o texto tem três linhas e é isso que se
      quer.
   2. a sombra no lugar da borda — este cartão pousa sobre o degradê da
      entrada, e ali um traço de 1px lê como risco na tela; no
      Atendimento ele pousa sobre o creme chapado, onde a borda define.
   3. `margin-top:0` — quem dá o respiro aqui é o `.rota`, acima.

   O resto (o escudo, os tamanhos de letra, o raio, as cores) vem da
   classe compartilhada. É de propósito: mudar o cartão é mudar num
   lugar só. */
.atend-pais--rota{
  align-items:center;
  margin-top:0;
  border-color:transparent;
  box-shadow:var(--shadow-sm);
}

.atend-pais__rota{
  flex:none;
  display:flex;
  align-items:center;
  gap:6px;
  /* O tracinho que separa o texto das bandeiras, como na foto. Ele é
     `border-left` e não um elemento: uma linha não precisa de caixa. */
  padding-left:11px;
  border-left:1px solid var(--line);
  color:var(--muted);
}
.atend-pais__seta{flex:none}

/* NO CELULAR ESTREITO, TUDO ENCOLHE MENOS O TEXTO.
   Num aparelho de 390px o cartão tem 322px por dentro, e o escudo, o
   tracinho e as duas bandeiras comiam 156 deles — sobravam 166 para a
   frase, que quebrava em cinco linhas. Aqui o que é enfeite cede
   espaço para o que é palavra: o escudo cai para 30px, as bandeiras
   para 24, e os respiros apertam. O texto não muda de tamanho — é ele
   que a pessoa lê. */
@media (max-width:430px){
  .atend-pais--rota{gap:9px;padding:12px}
  .atend-pais--rota .atend-pais__ico{width:30px;height:30px;border-radius:9px}
  .atend-pais--rota .atend-pais__ico svg{width:17px;height:17px}
  .atend-pais--rota .atend-pais__bandeira{width:24px;height:17px}
  .atend-pais__rota{gap:4px;padding-left:8px}
  .atend-pais__seta{width:11px;height:11px}
}

/* ---- os três passos ---- */

.atend-passos{
  list-style:none;
  margin:14px 0 0;
  background:var(--card);
  padding:16px 4px 4px;
  border:1px solid var(--line);
  border-radius:14px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
  position:relative;
}
/* a linha que liga os três números, como na foto. Ela para nas bordas
   dos números laterais em vez de atravessar a caixa inteira. */
.atend-passos::before{
  content:"";
  position:absolute;
  top:29px;
  left:calc(16.6% + 14px);
  right:calc(16.6% + 14px);
  height:1px;
  background:var(--gold-soft);
}
.atend-passo{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:5px;
  padding:0 4px;
  position:relative;
  z-index:1;
}
.atend-passo__n{
  width:26px;height:26px;
  border-radius:50%;
  background:var(--gold);
  color:#fff;
  font-size:12.5px;
  font-weight:600;
  display:grid;place-items:center;
}
.atend-passo__ico{color:var(--gold);display:block}
.atend-passo__nome{font-size:12.5px;font-weight:600;line-height:1.25}
.atend-passo__pe{font-size:11px;line-height:1.4;color:var(--muted)}

/* ---- o botão e o aviso ---- */

.atend-enviar{
  margin-top:18px;
  position:relative;
  justify-content:center;
  gap:10px;
}
.atend-enviar__seta{
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  width:30px;height:30px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  display:grid;place-items:center;
}
.atend-enviar.is-feito{background:#1f7a4d;border-color:#1f7a4d}

.atend-seguro{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:12px 0 0;
  font-size:11.5px;
  color:var(--muted-2);
  text-align:center;
}

/* ---------- as duas línguas, na barra lateral ----------

   Dois botões em pílula, e um retângulo que DESLIZA de um para o
   outro. O deslizante é um elemento só: ele move, e não aparece e
   desaparece. É o que faz a troca parecer um interruptor em vez de
   dois botões piscando.

   A posição vem de `data-vale` no pai, escrito pelo JavaScript. Sem
   JavaScript os botões não aparecem — e isso está certo: sem ele a
   troca não funcionaria, e botão que não funciona não deve estar na
   tela. */
.idiomas{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  /* A margem de baixo era 4px porque esta caixa ficava no MEIO da
     gaveta, com o rodapé embaixo dela. Desde 17/09/2026 ela é a última
     coisa da gaveta, e 4px deixava os botões encostados na borda: num
     iPhone, colados na barrinha do sistema. O painel da gaveta já
     reserva o vão do aparelho; estes 14px são o respiro de dentro. */
  margin:14px 18px;
  padding:4px;
  border-radius:14px;
  background:var(--cream);
  border:1px solid var(--line);
}

.idiomas__deslizante{
  position:absolute;
  top:4px;
  left:4px;
  width:calc(50% - 4px);
  height:calc(100% - 8px);
  border-radius:11px;
  background:var(--card);
  box-shadow:0 1px 4px rgba(60,45,20,.12);
  /* cubic-bezier com um empurrãozinho no fim: o movimento acompanha
     o dedo em vez de parar seco. */
  transition:transform .32s cubic-bezier(.32,.72,0,1);
}
.idiomas[data-vale="es"] .idiomas__deslizante{transform:translateX(100%)}

.idiomas__opcao{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  /* 44px de altura: é um alvo de dedo, e foi a medida que faltou nos
     links do site até hoje. */
  min-height:44px;
  padding:0 8px;
  border-radius:11px;
  font-size:13.5px;
  font-weight:500;
  color:var(--muted);
  cursor:pointer;
  transition:color .22s ease;
}
.idiomas__opcao.is-vale{color:var(--ink)}

.idiomas__bandeira{
  flex:none;
  width:22px;height:16px;
  border-radius:3px;
  overflow:hidden;
  display:block;
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
  /* a bandeira de quem não está valendo fica de lado, sem sumir:
     a pessoa precisa vê-la para saber que dá para trocar */
  opacity:.55;
  transition:opacity .22s ease,transform .22s ease;
}
.idiomas__opcao.is-vale .idiomas__bandeira{opacity:1;transform:scale(1.06)}
.idiomas__bandeira svg{display:block;width:100%;height:100%}

.idiomas__nome{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Em tela bem estreita o nome sai e ficam as bandeiras, que é o que
   a pessoa reconhece mais rápido de qualquer jeito. */
@media (max-width:339px){
  .idiomas__nome{display:none}
  .idiomas__bandeira{width:26px;height:19px}
}

/* A troca de língua: o conteúdo dá um passo curto e volta. Curto de
   propósito — quem trocou quer ler, não assistir. */
@keyframes trocaIdioma{
  0%   {opacity:1;   transform:translateY(0)}
  22%  {opacity:.25; transform:translateY(5px)}
  100% {opacity:1;   transform:translateY(0)}
}
.is-trocando-idioma{animation:trocaIdioma .44s ease}

@media (prefers-reduced-motion:reduce){
  .idiomas__deslizante{transition:none}
  .is-trocando-idioma{animation:none}
}

/* ---------- três classes que moravam na folha errada ----------

   Estas existiam só em gestao/assets/gestao.css. O site público não
   carrega aquela folha, então quem usava estas classes aqui ficava sem
   regra nenhuma — o mesmo caso do `.linkish` logo abaixo. Medido:

   · .btn--block      o botão "Pedir orçamento" em atacado.html saía com
                      295px dentro de um formulário de 335px, 40px mais
                      curto que todos os outros botões de enviar do site.
                      Também é o botão "Confirmar" das caixas de
                      confirmação, que aparecem nas 16 páginas.
   · .empty           o recado "Você ainda não fez pedidos por aqui." em
                      conta.html saía como texto cru, sem recuo nem cor.
   · .visually-hidden é o texto que só o leitor de tela deve ouvir. Sem
                      regra ele não esconde nada; hoje o pai está com
                      `hidden` e por isso ninguém viu, mas era questão
                      de tempo. */
.btn--block{width:100%}
.empty{padding:22px 18px;font-size:13.5px;color:var(--muted)}
.visually-hidden{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* O "Tentar de novo" dentro do aviso.
   flex-basis:100% joga ele para a linha de baixo, inteiro — dentro de um
   flex row ele ficaria colado no texto, e um <br> ali não teria efeito
   nenhum. */
/* O BOTÃO DO AVISO OCUPA A LINHA DE BAIXO INTEIRA. São dois nomes
   para a mesma forma de propósito: `__tentar` é o "tentar de novo" de
   um formulário que falhou, e `__acao` é o botão de um aviso que deu
   certo (o "Limpar o carrinho" depois do pedido enviado). Chamar o
   segundo de "tentar" faria o próximo leitor procurar um erro que não
   existe. */
.aviso-forma__tentar{flex-basis:100%;margin-top:2px;text-align:left}
/* O `__acao` NÃO leva `flex-basis:100%`: com ele, o botão virava uma
   barra branca de ponta a ponta dentro da caixa verde, do tamanho do
   aviso e não do tamanho do que ele faz. Sem ele o botão cai sozinho na
   linha de baixo (o texto do aviso já ocupa a linha inteira) e fica do
   tamanho da própria frase. */
/* `width:auto` porque `.btn--outline` nasce com `width:100%` — foi ele
   que esticava o botão de ponta a ponta dentro da caixa verde, e eu
   estava culpando o `flex-basis`. Medido: 294px de largura para uma
   frase de 130. */
.aviso-forma__acao{margin-top:6px;margin-left:26px;width:auto}

/* ---------- link discreto (.linkish) ----------

   Ele aparece nas 16 páginas: "Criar conta", "Esqueci minha senha",
   "Limpar o carrinho", "Compartilhar", "Pedir orçamento de atacado" e o
   número do WhatsApp.

   A regra dele só existia em gestao/assets/gestao.css — a folha do
   PAINEL, que o site público não carrega. Medido no navegador, cada um
   desses links saía com a mesma cor do texto ao redor, sem sublinhado,
   sem peso e sem fundo. O único sinal era `cursor:pointer`, e no
   celular não existe cursor: eles funcionavam e pareciam texto morto.
   Em entrar.html, "Criar conta" é o único caminho para o cadastro.

   O sublinhado fica sempre à vista, e não só no hover, justamente
   porque no celular ninguém passa o mouse em nada.

   O `display` fica `inline`. Com `inline-block`, o link "Ver o que
   fazemos com seus dados" virou uma palavra só de 191px: caberia hoje e
   estouraria no dia em que o texto crescesse. Assim ele quebra de linha
   como qualquer texto, e quem precisa de caixa própria pede
   `inline-block` logo abaixo.

   O risco é `text-decoration`, e não `border-bottom`: a borda fica na
   beirada da caixa, então nos links com área de toque grande ela
   aparecia solta, 10px abaixo da palavra e mais larga que ela. O
   sublinhado de texto acompanha a letra e quebra junto com a linha. */
.linkish{
  display:inline;
  color:var(--gold);
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:var(--gold-soft);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  cursor:pointer;
  transition:color .18s ease,text-decoration-color .18s ease;
}
.linkish:hover{color:var(--gold-2);text-decoration-color:var(--gold-2)}

/* Altura de dedo só para os .linkish que são um controle por si, fora
   do meio de uma frase. Os que ficam dentro de um parágrafo continuam
   do tamanho do texto de propósito: para crescer, a área de toque
   precisaria invadir a linha vizinha, e aí o dedo cai no link errado.
   No carrinho o vizinho é "Limpar o carrinho". */
.entrada__pe .linkish,
.entrada__troca .linkish,
.ficha__acoes .linkish,
.carrinho__acoes .linkish{display:inline-block;padding:11px 10px 10px}

.footnote .linkish{display:inline-block;padding:8px 4px}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:10px;
}

@media (pointer:coarse){
  .quiz__voltar,
  .acao-discreta .linkish{display:inline-block;padding-block:10px}
  .chip{padding-block:12px}
  .tab{padding-block:4px}
}

/* ---------- erro embaixo do campo ---------- */

.field--erro .field__box input,
.field--erro .field__box select,
.field--erro .field__box textarea{
  border-color:#c0392b;
  background:#fdf7f6;
}
.field--erro .field__box input:focus,
.field--erro .field__box textarea:focus{
  box-shadow:0 0 0 3px rgba(192,57,43,.13);
}
.field__erro{
  margin:0;
  font-size:12.5px;
  line-height:1.4;
  color:#c0392b;
  display:flex;
  align-items:flex-start;
  gap:6px;
}
.field__erro::before{content:"!";font-weight:700;flex:none}

.vazio-bloco--enxuto{padding:26px 20px;margin-top:0}

/* ---------- a porta da gestão, na Conta ----------
   Este cartão é a única coisa daquela tela que NÃO é do cliente: é a
   porta dos bastidores para quem é da equipe. Nasce escondido no HTML;
   quem o acende é o banco.

   ELE JÁ FOI UMA TARJA PRETA, e o Brian reclamou (18/09/2026: "muito
   feio"). O recorte dele era de computador, e o número explica: 1024px
   de largura por 71px de altura, o texto encostado na esquerda e a
   setinha sozinha a 660px de distância. Some a isso ser o único bloco
   escuro entre dois cartões brancos numa página creme — parecia faixa
   de propaganda colada no site.

   O CONSERTO TEM DUAS PARTES, e as duas são medíveis:
     1. ELE PASSOU A PERTENCER. Branco como os vizinhos, com um fio
        dourado e um leve banho de dourado no fundo. O que diz "aqui é
        outra coisa" agora é o dourado, não o preto.
     2. O LADO DIREITO GANHOU PESO. Em vez da seta perdida, um botão de
        verdade — "Abrir o painel". Em tela larga ele segura a ponta
        direita do cartão; em celular ele desce e ocupa a linha inteira,
        que é alvo maior para o dedo do que uma seta de 17px. */
.porta-gestao{
  display:block;
  margin:14px 0 22px;
  padding:18px;
  border-radius:var(--radius-lg);
  background:
    linear-gradient(135deg,rgba(176,140,74,.07),rgba(176,140,74,.02)),
    var(--card);
  border:1px solid var(--gold-soft);
  box-shadow:var(--shadow-sm);
  color:var(--ink);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.porta-gestao:hover{
  transform:translateY(-1px);
  border-color:var(--gold-2);
  box-shadow:var(--shadow-md);
}

.porta-gestao__topo{
  display:flex;
  align-items:center;
  gap:14px;
}

.porta-gestao__selo{
  flex:none;
  width:46px;height:46px;
  display:grid;place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
  color:#fff;
  /* um fio claro por dentro e uma sombra curta por fora: é o que separa
     "quadrado dourado com um desenho" de um selo feito de propósito */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),
             0 3px 10px rgba(176,140,74,.30);
}

.porta-gestao__texto{display:flex;flex-direction:column;gap:3px;min-width:0}
.porta-gestao__tag{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
  line-height:1;
}
.porta-gestao__titulo{
  font-family:var(--titulo);
  font-size:18px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:-.01em;
}
.porta-gestao__pe{
  font-size:12.5px;
  color:var(--muted);
  /* o pé é longo e a tela é estreita: corta com "…" em vez de empurrar
     o botão para fora */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* O FIO E A LINHA DE BAIXO, como no cartão de cima desta página.
   Com o botão ao lado do texto, no computador o cartão media 1024 × 90:
   onze vezes mais largo do que alto, ou seja, ainda uma tarja. Em linha
   própria ele fica na proporção dos vizinhos, e o botão ganha a ponta
   direita para si. */
.porta-gestao__acao{
  display:flex;
  justify-content:flex-end;
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid var(--line);
}

.porta-gestao__botao{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:42px;
  padding:0 16px;
  border-radius:999px;
  background:var(--gold);
  color:#fff;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 4px 12px rgba(176,140,74,.28);
  transition:background .16s ease;
}
.porta-gestao:hover .porta-gestao__botao{background:#9c7a3e}

/* No celular o botão ocupa a largura toda: numa tela de 320px um pílula
   de 142px encostada na direita é alvo pequeno e fica desequilibrada. */
@media (max-width:520px){
  .porta-gestao__botao{width:100%}
}

/* =========================================================
   Ajuste fino para telas estreitas (iPhone SE, 12 mini…)
   ========================================================= */

@media (max-width:430px){
  /* a marca precisa caber sem empurrar os botões para fora */
  .topbar{gap:8px}
  .brand{min-width:0;flex:1}
  .brand__mark{width:40px;height:40px}
  /* Quando o nome sai (marca com menos de 182px de espaco), o monograma
     fica sozinho no canto: 44px iguala a altura dos botoes redondos do
     outro lado e a barra volta a ficar equilibrada, em vez de ter uma
     marquinha perdida na esquerda.
     Esta regra mora AQUI DENTRO de proposito: escrita lá em cima, junto
     das outras de container, ela existia e nao valia — a linha de 40px
     acima vem depois no arquivo e ganhava. Regra morta e pior que regra
     nenhuma, porque parece resolvido. */
  @container (max-width:181px){
    .brand__mark{width:44px;height:44px}
  }
  .brand__name{font-size:16px;letter-spacing:.16em}
  .brand__tag{font-size:6.5px;letter-spacing:.16em}
  .brand__tag::before,.brand__tag::after{width:10px}
  .topbar__actions{flex:none}
  .icon-btn{width:40px;height:40px}

  /* DIFERENCIAIS: QUATRO NUMA LINHA, COMO NO DESENHO DELE.
     Aqui estava `repeat(2,1fr)` com o comentário "dois por linha
     respiram melhor que quatro". Respiram mesmo — mas o desenho que
     ele mandou em 17/09/2026 tem os quatro numa linha, e o pedido foi
     "tudo 100% igual".
     O preço disso é a letra: em 390px cada cartão fica com 84px, e
     "Acompanhamento" (14 letras) não cabe em 13px. A letra cai para
     10,5px e o padding aperta, que é o que o desenho dele mostra. */
  /* No celular estreito: colunas mais magras, respiro menor e letra
     menor — as medidas saíram da medição de largura de palavra, a
     mesma regra da faixa do cartão. */
  .categorias{grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:7px;padding-inline:14px}
  .categoria{padding:14px 5px 12px;gap:7px;border-radius:14px}
  /* O disco encolhe junto com o cartão, mas menos que ele: com 84px de
     cartão ainda sobram 5px de respiro de cada lado do círculo. */
  .categoria__ico{width:40px;height:40px}
  .categoria__ico svg{width:21px;height:21px}
  .categoria__nome{font-size:10.5px;line-height:1.2}
  .categoria__conta{font-size:9.5px}

  /* AQUI HAVIA `.hero__title{font-size:30px}` E ELE MANDAVA EM TUDO.
     Esta faixa é `max-width:430px`, então ela vale em QUALQUER celular
     — e um número fixo aqui apagava o `clamp()` lá de cima sem
     aparecer. Eu passei a fonte do título para 26px no clamp e ela
     continuou saindo 30px; medi, e era esta linha.
     Ela sai: o `clamp(24px,6.6vw,28px)` já encolhe sozinho conforme a
     tela, e é ele que mantém o título em quatro linhas ao lado da
     foto. Regra fixa dentro de faixa de celular é o jeito mais fácil
     de ter uma medida que não obedece a ninguém. */

  /* CINCO ABAS EM 320px CUSTAM LETRA.
     Com cinco abas, cada uma fica com 57px numa tela de 320 —
     "Atendimento" em 11px mede 62px e era CORTADO (a medição pegou;
     no olho parecia só apertado). Em 9,5px ela mede 52px e cabe.
     É o preço de ter cinco abas em vez de quatro, e o desenho dele
     pede cinco. */
  /* O SELO NUMA TELA DE 320px.
     A coluna preta tem 110px aqui, e em 8px o selo ainda precisava de
     105px com a estrela e o respiro — quebrava em duas linhas de novo.
     Em 7px ele mede 85px e fica na linha, que é como está na foto. */
  .badge{font-size:7px;letter-spacing:.02em;padding:4px 7px}
  .badge svg{width:8px;height:8px}

  .tab{font-size:9.5px;gap:4px}

  /* A foto NÃO muda de proporção em tela estreita: ela vale 75,2% da
     largura, e 75,2% de 320px é menor em pixel mas igual em desenho.
     Mexer só aqui faria a tela estreita ficar com outra composição, e
     o pedido dele é uma só. Esta linha era do desenho de vetor antigo;
     a regra `.hero__art--foto` vem depois no arquivo e manda. */
  .hero__art{right:0}

  .section-title{font-size:24px}
  .page-title{font-size:38px}
}

/* O SUBTITULO SO APARECE DE 520px PARA CIMA.
   Ele estava escondido abaixo de 360 e, de 375 a 470, saia CORTADO no
   meio da palavra ("SAUDE · PERFORMANCE · BEM-ESTA") — porque eu havia
   posto reticencias nele para parar de invadir os icones. Medido: ele
   precisa de 166px e so tem 93 em 375px; cabe inteiro a partir de 520.
   Frase cortada no meio parece site quebrado; ausente nao parece nada. */
@media (max-width:519px){
  .brand__tag{display:none}
}

@media (max-width:360px){
  .brand__name{font-size:15px}
}

/* ---------- garantias em linha, sem peso visual ---------- */

.garantias{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:4px 0 6px;
  border-top:1px solid var(--line);
  padding-top:18px;
}
.garantias li{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--muted);
}
.garantias svg{color:var(--gold);flex:none}

/* ---------- toque confortável no celular (sem depender de hover) ---------- */

@media (max-width:720px){
  .acao-discreta .linkish,
  .quiz__voltar{display:inline-block;padding:10px 8px}
  .modal .icon-btn{width:44px;height:44px}
  .footnote .linkish{padding:10px 6px}
}

/* ---------- resumo do produto dentro do pedido ---------- */

.resumo-produto{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:12px;
  align-items:center;
  background:#fbf9f5;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
}
.resumo-produto img{
  width:76px;height:76px;
  object-fit:contain;
  background:#fff;
  border-radius:10px;
  padding:4px;
}
.resumo-produto__nome{
  margin:0 0 4px;
  font-family:var(--titulo);
  font-weight:600;
  font-size:17px;
  line-height:1.2;
}
.resumo-produto .product__price{font-size:17px}
.resumo-produto .product__antes{font-size:11.5px;margin-bottom:0}
.resumo-produto .product__installment{font-size:11px;margin:2px 0 0}

/* =========================================================
   Área do cliente: protocolo e blocos
   ========================================================= */

.bloco-cliente{margin-bottom:20px}
.secao-titulo--enxuto{font-size:20px;margin:22px 0 12px}

.protocolo{
  background:var(--card);
  border-radius:20px;
  padding:20px;
  box-shadow:var(--shadow-md);
  border-top:4px solid var(--gold);
}
.protocolo--hoje{border-top-color:#2c6338}
.protocolo--atrasado{border-top-color:#c0392b}
.protocolo--vazio{border-top-color:var(--gold-soft);text-align:center}

.protocolo__cabeca{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:16px;
}
.protocolo__rotulo{
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.protocolo__data{
  margin:0;
  font-family:var(--titulo);
  font-weight:600;
  letter-spacing:-.02em;
  font-size:32px;
  line-height:1;
}
.protocolo__data span{
  display:block;
  font-family:var(--sans);
  font-size:12.5px;
  color:var(--muted);
  margin-top:5px;
}
.protocolo__selo{
  font-size:12px;
  font-weight:600;
  padding:7px 12px;
  border-radius:999px;
  background:#f3ede2;
  color:var(--gold);
  white-space:nowrap;
}
.protocolo--hoje .protocolo__selo{background:#eef7f0;color:#2c6338}
.protocolo--atrasado .protocolo__selo{background:#fdeeee;color:#c0392b}

.protocolo__linha{
  display:flex;
  flex-wrap:wrap;
  gap:6px 16px;
  padding:12px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:12.5px;
  color:var(--muted);
}

.protocolo__historico{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:14px 0 0;
}
.protocolo__historico li{
  font-size:11.5px;
  color:var(--muted);
  background:#fbf9f5;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 11px;
}

.protocolo__acoes{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:16px;
}
.protocolo__acoes .btn--primary{flex:1;justify-content:center;min-width:0;font-size:15px;padding:13px 20px}

.protocolo__intervalo{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:12.5px;
  color:var(--muted);
}
.protocolo__intervalo select{
  font:inherit;
  font-size:13px;
  color:var(--ink);
  background:#fbf9f5;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
}

.protocolo--vazio .protocolo__titulo{
  font-family:var(--titulo);
  font-weight:600;
  font-size:21px;
  margin:0 0 8px;
}
.protocolo--vazio .protocolo__texto{
  font-size:13.5px;
  line-height:1.55;
  color:var(--muted);
  margin:0 0 16px;
}

.resumo-conta{grid-template-columns:repeat(3,1fr)}
.pedido--enxuto{box-shadow:none;border:1px solid var(--line);margin-bottom:10px}
#ultimos-pedidos .linkish{display:inline-block;margin-top:4px}

/* botão discreto de desfazer, abaixo das ações do protocolo */
.protocolo__desfazer{
  display:block;
  margin:10px auto 0;
  padding:12px 10px;
  font-size:13px;
}
.protocolo__acoes .btn--outline{flex:1;justify-content:center;min-width:0;font-size:15px;padding:13px 20px}
.protocolo__intervalo select{min-height:42px;padding-inline:12px}

/* ---------- ordenar a vitrine ---------- */

/* ---------- ordenar a vitrine ----------
   Brian, 18/09/2026: "Esse 'ordernar por' ta muito feio, ta no meio do
   celular, nao gostei de como ele ta".

   ERA DUAS PEÇAS SOLTAS: o texto "ORDENAR POR" flutuando no meio da
   tela e um `select` cru do lado, com a setinha que o sistema desenha —
   a única coisa da vitrine que não tinha desenho nosso.

   AGORA É UMA PÍLULA SÓ, encostada na direita, com a mesma altura e o
   mesmo feitio dos chips de categoria que estão logo acima: ícone de
   ordenar, o texto do que está escolhido, e o chevron da casa. O
   `select` continua sendo o `select` de verdade por baixo — é ele que
   abre a roda do sistema no celular, e nenhuma lista feita à mão chega
   perto disso no dedo —, só invisível: sem aparência própria, sem
   fundo, sem seta, esticado sobre a pílula inteira para que o toque em
   qualquer ponto dela abra a escolha. */
.ordenar{
  display:flex;
  justify-content:flex-end;
  padding:0 20px 16px;
}

.ordenar__pilula{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:42px;
  padding:0 12px 0 14px;
  border-radius:999px;
  background:var(--card);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  font-size:13.5px;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.ordenar__pilula:hover{border-color:var(--gold-soft)}
/* o anel de foco tem de nascer na PÍLULA, não no `select` invisível:
   o select não tem borda nem fundo, então um `outline` nele apareceria
   como um retângulo solto em volta de nada */
.ordenar__pilula:focus-within{
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(176,140,74,.16);
}

.ordenar__ico{flex:none;color:var(--gold)}
.ordenar__seta{flex:none;color:var(--muted-2)}

.ordenar select{
  /* invisível, mas é ele que manda: cobre a pílula toda para o toque
     cair nele em qualquer ponto.
     `-1px` E NÃO `0`: com `inset:0` o select para na borda interna, e
     ficava uma faixa de 1px em volta — a borda da pílula — que não
     abria nada. Medido: pílula de 162×42, select de 160×40. */
  position:absolute;
  inset:-1px;
  opacity:0;
  font:inherit;
  border:0;
  cursor:pointer;
}
/* O TEXTO DO QUE ESTÁ ESCOLHIDO. O `select` está invisível, então quem
   mostra a escolha é este pedaço — e ele fica ENTRE o ícone e o
   chevron, que é a ordem que a pílula pede. */
.ordenar__valor{
  white-space:nowrap;
  font-weight:500;
}

/* confirmação do site, no lugar do confirm() do navegador */
.confirmacao-site .modal__card{max-width:380px;gap:12px}
.confirmacao-site .modal__title{font-size:21px}
.confirmacao-site .modal__lead{margin:0}
.modal__acoes--empilha{flex-direction:column;align-items:stretch;gap:8px}
.modal__acoes--empilha .linkish{align-self:center;padding:10px 6px}

/* repetir um pedido */
.pedido__acoes .btn--primary{flex:1;justify-content:center;min-width:0}
.linkish--repetir{display:inline-block;margin-top:10px;padding:8px 2px;font-size:13px}

/* ---------- confirmação depois de enviar o pedido ---------- */

.sucesso__marca{
  width:52px;height:52px;
  margin:0 auto 4px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e8f3ec;
  color:#2c6338;
}

#pd-sucesso .modal__lead{text-align:center;font-size:15.5px;color:var(--ink)}

.sucesso__aviso{
  margin:0;
  padding:12px 14px;
  border-radius:12px;
  background:#fbf7ef;
  border-left:3px solid var(--gold);
  font-size:13px;
  line-height:1.55;
  color:var(--muted);
}

/* ---------- área do parceiro ---------- */

.parceiro__aviso{
  padding:14px 16px;
  border-radius:14px;
  background:#fbf8f2;
  border-left:3px solid var(--gold);
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
  margin-bottom:18px;
}

/* A CAIXA BRANCA COM AS LINHAS DENTRO, na área do parceiro.
   Ela se chamava `.carrinho`, e a PÁGINA do carrinho usa esse mesmo
   nome — então a página do carrinho ganhava esta caixa branca de
   brinde, e desde que cada produto virou um cartão próprio
   (18/09/2026) o resultado era cartão dentro de cartão: dois brancos
   um sobre o outro, com duas bordas e duas sombras. Era boa parte do
   "esta muito feia".
   Aqui ela fica com o nome do que é — uma lista em cartão —, e quem a
   usa é a área do parceiro, onde as linhas separadas por fio são o
   desenho certo. */
.lista-cartao{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

.linha-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-top:1px solid var(--line);
}
.linha-item:first-child{border-top:0}
.linha-item.is-escolhido{background:#fdfbf7}

.linha-item__info{min-width:0}
.linha-item__nome{
  margin:0;
  font-size:14.5px;
  font-weight:500;
  line-height:1.3;
}
.linha-item__preco{
  margin:4px 0 0;
  font-size:13px;
  color:var(--gold);
  font-weight:600;
}
.linha-item__preco span{color:var(--muted);font-weight:400;font-size:11.5px}

.contador-qtd{
  display:flex;
  align-items:center;
  gap:2px;
  flex:none;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  padding:2px;
}
.contador-qtd__btn{
  width:40px;height:40px;
  border-radius:50%;
  font-size:18px;
  line-height:1;
  color:var(--gold);
  display:grid;
  place-items:center;
}
.contador-qtd__btn:hover{background:var(--cream)}
.contador-qtd__campo{
  width:46px;
  border:0;
  background:none;
  text-align:center;
  font:inherit;
  font-size:15px;
  font-weight:600;
  min-height:40px;
  -moz-appearance:textfield;
}
.contador-qtd__campo::-webkit-outer-spin-button,
.contador-qtd__campo::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* barra fixa com o total */
.carrinho__barra{
  position:sticky;
  bottom:calc(var(--nav-h) + env(safe-area-inset-bottom));
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 20px 0;
  padding:12px 14px 12px 18px;
  border-radius:16px;
  background:var(--black);
  color:#fff;
  box-shadow:var(--shadow-lg);
}
.carrinho__resumo{display:flex;flex-direction:column;gap:2px;min-width:0}
.carrinho__resumo b{font-size:14px}
.carrinho__resumo span{font-size:12px;opacity:.7}
.carrinho__barra .btn{flex:none;padding:11px 20px;font-size:14px}

.form-card__titulo{
  font-family:var(--titulo);
  font-weight:600;
  font-size:22px;
  margin:0 0 4px;
}

.carrinho__conferir{
  margin:6px 0 4px;
  padding:14px 16px;
  border-radius:14px;
  background:var(--cream-2);
  border:1px solid var(--line);
}
.carrinho__titulo{
  margin:0 0 10px;
  font-size:11.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.carrinho__lista{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.carrinho__lista li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  font-size:13.5px;
}
.carrinho__lista b{color:var(--gold);white-space:nowrap}
.carrinho__total{
  margin:12px 0 0;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}

@media (max-width:400px){
  .linha-item{flex-direction:column;align-items:stretch;gap:10px}
  .contador-qtd{align-self:flex-end}
}

/* =========================================================
   Entrar e criar conta
   ========================================================= */

.entrada{
  max-width:430px;
  margin:0 auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 22px 24px;
  box-shadow:var(--shadow-sm);
}

.entrada__form{display:flex;flex-direction:column;gap:16px}

/* A dica embaixo do campo. Sem esta classe ela saía no tamanho do texto
   corrido, competindo com o rótulo em vez de ajudar — apareceu na foto
   da tela de criar conta. */
.field__hint{
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted);
}

.entrada__pe{margin:2px 0 0;text-align:center}
.entrada__troca{
  margin:20px 0 0;
  padding-top:18px;
  border-top:1px solid var(--line);
  text-align:center;
  font-size:14px;
  color:var(--muted);
}
.entrada__nota{
  margin:14px 0 0;
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  text-align:center;
}

/* O recado de erro ou de sucesso do formulário. O site não tinha um
   (o `.alert` é da folha da gestão), e recado de erro é justamente o
   que não pode ficar sem desenho: ele aparece na pior hora. */
.aviso-forma{
  display:flex;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:9px;
  font-size:13.5px;
  line-height:1.5;
  border-radius:12px;
  padding:12px 14px;
  margin-bottom:18px;
}
.aviso-forma--erro{background:#fdeeee;color:#8f2b2b;border:1px solid #f3d4d4}
.aviso-forma--ok{background:#eef7f0;color:#2c6338;border:1px solid #cfe6d6}
.aviso-forma svg{flex:none;margin-top:1px}

/* O botão enquanto espera o servidor. Sem isto a pessoa toca em
   "Entrar" e nada parece acontecer, então ela toca de novo — e duas
   tentativas seguidas caem no limite do servidor. */
.btn[aria-busy="true"]{opacity:.7;pointer-events:none}

/* =========================================================
   Carrinho
   ========================================================= */

/* AQUI MORAVA `.product__acoes`, a faixa de botões do cartão de
   produto, e com ela o "Adicionar" enxugado que o Brian pediu em
   18/09/2026 ("o botao de 'adicionar esta gigante, deixe um pouco
   menor"). As duas coisas saíram no dia seguinte, quando ele mandou a
   foto de outro cartão: "em baixo o preco, e do lado o simbolo de
   jogar pro carrinho".

   O botão escrito virou a bolinha `.product__carrinho`, que mora ao
   lado do preço e está lá em cima, junto do resto do cartão. Não
   sobrou nada aqui: um seletor que nenhum HTML usa é pior que seletor
   nenhum — no dia de mexer, alguém o edita achando que está mudando a
   tela.

   A LIÇÃO DAQUELE DIA FICOU, e é o motivo de este parágrafo existir: o
   botão era "gigante" porque herdava o `.btn--primary` inteiro, o
   mesmo do convite grande da página inicial — 17,5px de letra e sombra
   de 30px dentro de um cartão de 146px. Quem for pôr outro botão num
   cartão, herde do cartão, não da página. */

/* O `.btn--carrinho` continua vivo: é o "Adicionar ao carrinho" da
   PÁGINA DO PRODUTO (produto.html), onde o botão é o principal da tela
   e tem largura para o texto. */
.btn--carrinho{gap:8px}
.btn--carrinho svg{flex:none}

/* O BOTÃO DE LARGURA INTEIRA "ADICIONAR" NÃO EXISTE MAIS NO CARTÃO.
   Ele virou a bolinha do carrinho ao lado do preço, a pedido do Brian
   com a foto de outra loja (18/09/2026). O CSS dele saiu inteiro daqui
   — inclusive o relevo e o clarão que eu tinha escrito para ele na
   mesma noite: esse trabalho foi para `.product__carrinho`, que é onde
   o carrinho vive agora. */

/* O botão diz que deu certo, no próprio botão. Um item somado ao
   carrinho sem nenhum sinal deixa a pessoa clicando de novo. */
.btn--carrinho.is-feito{
  background:linear-gradient(135deg,#3f8b7a,#2f6f62);
  border-color:transparent;
}

/* ---- a bolinha do carrinho no topo ---- */
.carrinho-contador{
  position:absolute;
  top:2px;right:0;
  min-width:17px;height:17px;
  padding:0 4px;
  display:grid;place-items:center;
  border-radius:999px;
  background:var(--gold);
  color:#fff;
  font-size:10px;
  font-weight:700;
}

/* ---- a foto voando até o carrinho ----
   Brian, 18/09/2026: "quero uma animacao muito foda ao adicionar no
   carrinho". Quem move é o JavaScript (`app.js`), porque as duas
   pontas — de onde a foto sai e onde o ícone está — só se sabem na
   hora do toque. O CSS aqui é só a aparência do que voa, e as duas
   regras estão FORA do fluxo da página: nada do que voa empurra
   nada. */
.voo-carrinho{
  position:fixed;
  z-index:120;
  pointer-events:none;
  object-fit:contain;
  border-radius:14px;
  background:var(--card);
  border:1px solid var(--gold-soft);
  padding:5px;
  box-shadow:0 16px 34px rgba(40,30,10,.3);
  will-change:transform,opacity;
}
.anel-carrinho{
  position:fixed;
  z-index:119;
  pointer-events:none;
  border-radius:50%;
  border:2px solid var(--gold);
  will-change:transform,opacity;
}

/* O NÚMERO ENTRA QUICANDO quando a foto chega.
   Ele aparecia no mesmo instante, mas parado — a única parte imóvel
   de uma cena em movimento, e justamente a que diz o resultado. */
.carrinho-contador.is-quicando{
  animation:contadorQuica .46s cubic-bezier(.3,1.6,.5,1);
}
@keyframes contadorQuica{
  0%{transform:scale(.2)}
  55%{transform:scale(1.45)}
  100%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .carrinho-contador.is-quicando{animation:none}
}

/* ---- a página do carrinho ---- */
.carrinho{max-width:680px;margin:0 auto}

/* CADA PRODUTO NUM CARTÃO, E A LINHA É UMA GRADE.

   Brian, 18/09/2026: "a parte de 'meu carrinho' esta muito feia, faca
   algo mais bonito".

   Tinha um defeito de verdade junto do feio, e está na foto que ele
   mandou: O PREÇO SAÍA PELA BORDA DA TELA. A linha era uma fila —
   foto, corpo, lado —, e a coluna do preço não encolhe (um número não
   quebra em duas linhas): "R$ 2.198,00" em 19px de serifa pede 112px,
   e com a foto de 76px e o respiro não sobrava tanto num celular de
   390. O "tirar" ia embora com ele.

   Agora são duas colunas — a foto e o resto, que ENCOLHE — e a
   quantidade e o preço num rodapé da própria linha, um em cada ponta.
   Nada disputa espaço com o nome, e a soma nunca passa da largura.

   O resto do "mais bonito" é isto: cada produto num cartão com borda e
   sombra (antes era uma listinha separada por fio), a foto maior, o
   "tirar" escrito virou um × discreto no canto (era a única ação
   destrutiva e ficava colada no preço) e a caixa verde do atacado
   virou uma linha dourada de uma linha. */

#itens{display:flex;flex-direction:column;gap:10px}

.carrinho__item{
  position:relative;          /* o × mora no canto */
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  grid-template-areas:
    "foto nome"
    "foto meta"
    "pe   pe";
  column-gap:12px;
  row-gap:6px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
}

.carrinho__foto{
  grid-area:foto;
  align-self:start;
  width:64px;height:64px;
  object-fit:contain;
  border-radius:12px;
  background:var(--cream);
  padding:6px;
}

.carrinho__nome{
  grid-area:nome;
  align-self:end;
  /* espaço do × à direita, para o nome comprido não passar embaixo dele */
  padding-right:28px;
  font-size:14.5px;
  font-weight:600;
  margin:0;
  line-height:1.3;
  min-width:0;
}
.carrinho__meta{grid-area:meta;align-self:start;min-width:0}
.carrinho__unidade{font-size:12.5px;color:var(--muted);margin:0}

/* A linha do atacado: uma etiqueta dourada e o texto, sem caixa. */
.carrinho__faixa{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin:5px 0 0;
  font-size:11.5px;
  line-height:1.45;
  color:var(--gold);
}
.carrinho__faixa svg{flex:none;margin-top:1px}
.carrinho__faixa span{min-width:0}

/* O rodapé da linha: quantidade à esquerda, preço à direita. */
.carrinho__pe{
  grid-area:pe;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
}

.carrinho__quantidade{
  display:inline-flex;
  align-items:center;
  flex:none;
  border:1px solid var(--line);
  border-radius:999px;
  overflow:hidden;
  background:var(--card);
}
.carrinho__qbtn{
  width:34px;height:34px;
  display:grid;place-items:center;
  color:var(--ink-2);
  transition:background .16s ease;
}
.carrinho__qbtn:hover{background:var(--cream)}
.carrinho__qbtn[disabled]{opacity:.35;pointer-events:none}
.carrinho__qnum{
  min-width:34px;
  text-align:center;
  font-size:14.5px;
  font-weight:600;
}

.carrinho__lado{
  min-width:0;
  text-align:right;
}
.carrinho__subtotal{
  font-family:var(--titulo);
  font-weight:600;
  font-size:18px;
  margin:0;
  white-space:nowrap;
}
.carrinho__cada{font-size:11.5px;color:var(--muted);margin:1px 0 0;white-space:nowrap}

/* O × DE TIRAR, no canto do cartão.
   Tirar um item é destrutivo e o alvo antigo media 34×22 — pequeno
   para acertar de propósito e fácil de acertar sem querer. Aqui ele
   tem 34×34 num canto onde não há mais nada para tocar por engano, e
   só fica vermelho quando o dedo está nele. */
.carrinho__tirar{
  position:absolute;
  top:8px;right:8px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:50%;
  color:var(--muted);
  transition:background .18s ease,color .18s ease;
}
.carrinho__tirar:hover{background:#fbeceb;color:#8f2b2b}

.carrinho__acoes{
  margin:14px 0 0;
  display:flex;
  gap:8px;
}
.carrinho__acoes .btn{flex:1 1 0;min-width:0;justify-content:center;text-align:center}

/* Botão secundário pequeno: o do carrinho e onde mais precisar. */
.btn--mini{
  font-size:12.5px;
  padding:10px 12px;
  gap:6px;
  font-weight:500;
}

/* O botão de fechar o pedido leva o desenho do WhatsApp.
   Ele abre uma conversa, e dizer isso com o ícone custa nada — quem
   está com o dedo em cima sabe para onde vai antes de tocar. */
.btn--zap{justify-content:center;gap:10px}
.btn--zap svg{flex:none}
/* Em duas linhas (celular estreito) o texto ficava alinhado à
   esquerda dentro do botão centralizado: a segunda linha é mais curta,
   e o conjunto parecia torto. */
.btn--zap span{text-align:center;line-height:1.3}
/* EM 320px A CONTA NÃO FECHAVA.
   "Fechar pedido no WhatsApp" pede 230px em 17,5px de letra; dentro do
   resumo (20px de respiro de cada lado, dentro de uma página com
   outros 20) sobravam 210px para o texto, e com o ícone e o vão
   quebrava em duas linhas.
   Três dedos de espaço resolvem sem mexer na frase: letra em 15,5px
   (mede 200), respiro do botão em 12 e o do resumo em 16 — este
   último ajuda todas as linhas do resumo, não só o botão. */
.zap-curto{display:none}
@media (max-width:360px){
  .btn--zap{font-size:15.5px;padding-inline:12px}
  /* mais específico que `.resumo{padding:20px}`, que vem depois daqui
     no arquivo e ganharia de uma regra de uma classe só */
  .carrinho .resumo{padding:16px}
  .zap-curto{display:inline}
  .zap-longo{display:none}
}

.carrinho__atacado{margin:18px 0 0;text-align:center;font-size:13px;color:var(--muted)}
/* ALVO DE DEDO NO LINK DO ATACADO.
   Ele nasceu com 15px de altura — é a altura da letra, e é o que
   acontece quando um link fica no meio de um parágrafo. Quinze pixels
   "funciona" com mouse e erra com o polegar, e este link é o caminho
   de quem vai comprar em QUANTIDADE, que é o pedido grande. Com o
   `padding` ele vai para 44px, e `inline-block` é o que faz o padding
   valer em cima e embaixo num link de texto corrido. */
.carrinho__atacado .linkish{
  display:inline-block;
  padding:12px 6px;
}

/* ---- para quem e para onde vai o pedido ----
   Mesma caixa do resumo (fundo de cartão, borda, mesmo raio), porque as
   duas coisas são o mesmo pedido lido de dois jeitos: o que vai e para
   quem vai. Fica ACIMA do resumo de propósito — quem chega aqui lê de
   cima para baixo e a última coisa antes do dedo tem de ser o total e o
   botão, não um campo de texto. */
.contato{
  margin-top:22px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
  display:grid;
  gap:14px;
}
.contato__titulo{
  font-family:var(--titulo);
  font-size:20px;
  font-weight:600;
  margin:0;
}
.contato__texto{
  margin:-6px 0 2px;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

@media (max-width:360px){
  .carrinho .contato{padding:16px}
}

/* ---- o resumo ---- */
.resumo{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow-sm);
}
.resumo__titulo{
  font-family:var(--titulo);
  font-size:20px;
  font-weight:600;
  margin:0 0 16px;
}
.resumo__linha{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  padding:7px 0;
}
.resumo__linha span:last-child{font-weight:600;white-space:nowrap}
.resumo__total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.resumo__total-rotulo{font-size:15px;font-weight:600}
.resumo__total-valor{
  font-family:var(--titulo);
  font-weight:600;
  letter-spacing:-.02em;
  font-size:clamp(22px,6.5vw,28px);
  white-space:nowrap;
}

/* As outras moedas. Aparecem só quando a cotação está preenchida no
   painel — sem cotação, nenhuma linha, em vez de "G$ 0". */
.resumo__moedas{
  margin:12px 0 0;
  padding-top:12px;
  border-top:1px dashed var(--line);
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  font-size:13px;
  color:var(--muted);
}
.resumo__moeda b{color:var(--ink-2);font-weight:600}
.resumo__cotacao{
  margin:8px 0 0;
  font-size:11.5px;
  color:var(--muted);
  line-height:1.5;
}

.resumo__aviso{
  margin:14px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--muted);
  background:var(--cream);
  border-radius:10px;
  padding:11px 13px;
}

@media (max-width:640px){
  .carrinho__foto{width:62px;height:62px}
  .carrinho__item{gap:11px}
}

/* =========================================================
   Página de um produto
   ========================================================= */

.caminho{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  padding:16px 20px 0;
  font-size:12.5px;
  color:var(--muted);
}
.caminho a{color:var(--muted)}
.caminho a:hover{color:var(--gold)}
.caminho span[aria-hidden]{opacity:.5}

.osso-linha{
  background:linear-gradient(90deg,var(--line) 25%,var(--cream-2) 50%,var(--line) 75%);
  background-size:220% 100%;
  animation:brilhoLinha 1.3s ease-in-out infinite;
  border-radius:8px;
}
@keyframes brilhoLinha{from{background-position:120% 0}to{background-position:-20% 0}}

.ficha{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
  align-items:start;
}
@media (min-width:860px){
  .ficha{grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px}
}

.ficha__foto{
  position:relative;
  background:var(--cream-2);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:22px;
  display:grid;
  place-items:center;
}
.ficha__foto img{width:100%;max-width:340px;height:auto}

.ficha__categoria{
  font-size:11.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 7px;
}
.ficha__nome{
  font-family:var(--titulo);
  font-weight:600;letter-spacing:-.02em;
  font-size:clamp(24px,6.4vw,33px);
  line-height:1.15;
  margin:0;
}
.ficha__desc{
  font-size:14.5px;
  line-height:1.6;
  color:var(--ink-2);
  margin:12px 0 0;
}

/* A FAIXA DOS TRÊS BENEFÍCIOS NA PÁGINA DO PRODUTO.
   Mesma faixa do cartão da vitrine, com mais ar: aqui a coluna tem o
   dobro da largura, então nada aperta e a letra pode ser a do resto da
   página. As duas linhas finas separam o "o que é" do "quanto custa",
   que é a ordem em que a pessoa lê. */
.ficha__beneficios{
  margin:16px 0 4px;
  padding:15px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.ficha__beneficios .mini span{font-size:11.5px;line-height:1.35}

/* ---- as faixas de preço, lado a lado ---- */

/* TRÊS FAIXAS, TRÊS COLUNAS — E NÃO DUAS E UMA ÓRFÃ.

   Brian, 18/09/2026: "Essa parte aqui nao ta bonita, ta feia", com a
   foto desta parte.

   A regra era `auto-fit` com mínimo de 150px: num celular de 390 cabem
   duas colunas de 150, então a terceira faixa caía sozinha na linha de
   baixo com metade da largura vazia ao lado. Era a coisa mais torta da
   tela.

   Agora são SEMPRE três colunas, e isso só fecha porque eu encurtei o
   texto de baixo junto: "1 a 4 unid." virava 76px e não cabia numa
   coluna de 88px com respiro; "1 a 4 un." mede 48. A conta, em 320px:
   (280 - 2×8 de vão - 3×16 de respiro) / 3 = 72px por coluna de
   conteúdo, e "R$ 1.099,00" em 13px de Inter 600, com o aperto de
   -.02em, mede 68 — medido no navegador em 19/09/2026, depois da troca
   da fonte. Na Playfair de antes eram os mesmos 68 em 14px: a Inter é
   mais larga, então o tamanho desceu meio pixel para a conta continuar
   fechando. */
.faixas{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:20px 0 0;
}

.faixa{
  min-width:0;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 8px;
  background:var(--card);
  text-align:center;
  transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.faixa__nome{
  font-size:9px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.faixa__valor{
  font-family:var(--titulo);
  font-weight:600;
  /* O PISO DESCEU DE 13,5 PARA 13px, E O APERTO ENTROU JUNTO, na troca
     da Playfair pela Inter. O valor é `nowrap` — ele não quebra, ele
     VAZA a coluna —, e numa tela de 320px a coluna tem 70px: a Inter
     600 escrevia "R$ 1.099,00" em 73,6 e passava por cima da borda do
     cartão do meio. Com 13px e -.02em ela mede 68 e sobram 2px. */
  font-size:clamp(13px,3.8vw,17px);
  letter-spacing:-.02em;
  margin:0;
  line-height:1.15;
  white-space:nowrap;
}
.faixa__quantas{font-size:9.5px;color:var(--muted);margin:3px 0 0;white-space:nowrap}

/* A faixa que vale para a quantidade escolhida. Sem esta marca, três
   preços na tela é confusão em vez de informação: a pessoa não sabe
   qual é o dela. */
.faixa.is-valendo{
  border-color:var(--gold);
  background:rgba(176,140,74,.09);
  box-shadow:0 0 0 1px var(--gold),0 6px 16px rgba(176,140,74,.18);
}
.faixa.is-valendo .faixa__nome{color:var(--gold)}
/* o preço da faixa que vale também fica dourado: é o número que a
   pessoa vai pagar, e ele tem de ser o que salta entre os três */
.faixa.is-valendo .faixa__valor{color:var(--gold-2)}

/* ---- preço, quando não há faixas ---- */

.ficha__preco{margin:20px 0 0}
.ficha__antes{
  font-size:14px;
  color:var(--muted);
  text-decoration:line-through;
  margin:0 0 3px;
}
.ficha__valor{
  font-family:var(--titulo);
  font-weight:600;
  letter-spacing:-.02em;
  font-size:clamp(26px,7.2vw,34px);
  line-height:1.05;
  margin:0;
}
.ficha__parcelas{font-size:13px;color:var(--muted);margin:5px 0 0}

.ficha__moedas{
  margin:12px 0 0;
  font-size:13px;
  color:var(--muted);
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  align-items:baseline;
}
.ficha__moedas b{color:var(--ink-2);font-weight:600}
.ficha__sep{opacity:.45}

/* ---- quantidade ---- */

/* O CARTÃO DA COMPRA: quantas de um lado, quanto do outro.

   Eram dois blocos soltos — a linha da quantidade com um fio em cima,
   e uma caixa cinza com o total embaixo — e a caixa cinza, sem borda,
   parecia um campo desabilitado. É uma conta só (quantas × quanto), e
   agora é um cartão só, com as duas pontas na mesma linha. */
.ficha__compra{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
  gap:10px 12px;
  margin:20px 0 0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
  box-shadow:var(--shadow-sm);
}
.ficha__compra-lado{display:flex;flex-direction:column;gap:6px;min-width:0}
.ficha__qrotulo{
  font-size:9.5px;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}
.ficha__estoque{font-size:11px;color:var(--muted)}

.ficha__conta{
  min-width:0;
  text-align:right;
}
.ficha__conta-linha{font-size:11.5px;color:var(--muted);margin:0;white-space:nowrap}
.ficha__conta-total{
  font-family:var(--titulo);
  font-weight:600;
  letter-spacing:-.02em;
  /* 20px no celular estreito: "R$ 10.494,00" em 27px pedia 150px e a
     coluna tem 110. Cresce com a tela. */
  font-size:clamp(20px,5.4vw,26px);
  margin:1px 0 0;
  line-height:1.1;
  white-space:nowrap;
}
/* a linha do atacado atravessa o cartão inteiro, embaixo das duas */
.ficha__compra .carrinho__faixa{grid-column:1 / -1;margin:2px 0 0}

/* ---- botões ---- */

.ficha__acoes .linkish{align-self:center;margin-top:4px}
.ficha__acoes .btn.is-salvo{border-color:#e0b4b4;color:#c0392b}

/* =========================================================
   O CARTÃO DO PROTOCOLO NO CELULAR

   Aqui havia um bloco grande espremendo o cartão deitado: foto de 40%,
   descrição em duas linhas com reticências, os três benefícios numa
   faixa, o selo em 8px para caber numa linha. Todo esse aperto existia
   porque o cartão era UM, com 92% da tela.

   Brian, 18/09/2026: "Deixe esses cards aqui com as fotos menores e um
   tamanho menor, quero que de ve pra ver 3 ali". Com três cartões o
   cartão tem 110px, e nada daquilo cabe — nem faz falta: descrição,
   parcelamento e benefícios estão na página do produto, que é onde o
   cartão leva com um toque.

   Então o bloco todo saiu, e sobrou só o que muda com a largura: a
   letra. Os números vêm da medição (`cartao-pequeno.mjs`), que compara
   a largura da coluna com a largura REAL da palavra mais comprida do
   nome — se a palavra couber, é impossível quebrar no meio.
   ========================================================= */
@media (max-width:359px){
  .carousel{gap:8px;padding-inline:14px}
  .protocol{flex-basis:calc((100% - 16px) / 3)}
  .protocol__body{padding:7px 7px 9px}
  .protocol__name{font-size:10.5px}
  .protocol__valor{font-size:11px}
  .badge{font-size:5.5px;padding:2px 5px;gap:2px}
  .badge svg{width:6px;height:6px}
}

/* NO CELULAR MAIS ESTREITO, A FAIXA APERTA.
   Em 320px a coluna fica com 73,9px e "Acompanhamento" mede 81,2px em
   10px de letra: não cabe, e voltava a quebrar no meio da palavra —
   que é exatamente o que eu estava consertando. Com menos respiro e
   9px de letra a coluna vai a 77,2px e a palavra a 73,1px: cabe, com
   4px de sobra. Os números saíram da medição, não do gosto
   (`faixa-do-cartao.mjs` mede a palavra desenhada na fonte real).
   339px e não 320: entre 320 e 340 a conta dá o mesmo aperto. */
@media (max-width:339px){
  .protocol .mini-list{gap:4px;padding:10px 9px 12px}
  .protocol .mini svg{width:17px;height:17px}
  .protocol .mini span{font-size:9px}
}

/* ---------------------------------------------------------
   SAIR DA CONTA

   Aparece só para quem está logado. Fica no fim da página de
   conta, depois dos atalhos: sair é a última coisa que se faz
   ali, e ação de saída no meio da tela é convite a errar o
   toque.

   O botão é o discreto (`btn--ghost`), e não o dourado: sair
   não é o que a pessoa veio fazer, é o que ela precisa poder
   fazer. Quem grita na tela é "Salvar", não "Sair".
   --------------------------------------------------------- */

.sair-conta{
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
  text-align:center;
}

/* ---------------------------------------------------------
   A PÁGINA DE CONTA

   "Faça uma parte de conta bem feita, isso aqui tá horrível" —
   17/09/2026, com a foto da tela.

   Ele estava certo, e o defeito vem de como eu trabalhei: ele
   mandou tirar três coisas daqui e eu tirei sem pôr nada no
   lugar. A tela ficou com dois números brancos soltos, uma
   frase dizendo que não havia pedido nenhum e um botão de sair
   no meio de meia tela vazia.

   O que entra aqui são os blocos que faltavam. Nenhum deles é
   enfeite: a ficha diz em que conta a pessoa está (o e-mail só
   aparecia na letra miúda do botão de sair), o vazio dos
   pedidos ganhou um caminho para a loja, e as linhas de ação
   só aparecem quando existe a ação.
   --------------------------------------------------------- */

.ficha-conta{
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:18px 18px 6px;
  margin-bottom:22px;
}
.ficha-conta__topo{
  display:flex;
  align-items:center;
  gap:14px;
  /* min-width:0 no filho é o que permite o e-mail longo quebrar
     em vez de esticar a ficha para fora da tela */
  min-width:0;
}
.ficha-conta__inicial{
  width:54px;height:54px;flex:none;
  border-radius:50%;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 60%,#9a7739);
  color:#fff;
  font-family:var(--titulo);
  font-weight:600;
  letter-spacing:-.02em;
  font-size:25px;
  line-height:1;
  display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(176,140,74,.28);
}
.ficha-conta__quem{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ficha-conta__nome{
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  line-height:1.2;
}
.ficha-conta__email{
  font-size:13.5px;
  color:var(--muted);
  /* e-mail é uma palavra só e comprida: sem isto ele empurra a
     ficha e a página passa a rolar para o lado */
  overflow-wrap:anywhere;
}
.ficha-conta__desde{
  font-size:12px;
  color:var(--muted-2);
  margin-top:2px;
}

/* os dois números, agora como pé da ficha e não soltos na página */
.ficha-conta__numeros{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  margin-top:16px;
  border-top:1px solid var(--line);
}
.ficha-conta__numeros--solto{
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  border-top:0;
  margin:0 0 22px;
}
.ficha-conta__num{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  padding:13px 6px;
  border-radius:12px;
  transition:background .18s ease;
}
.ficha-conta__num + .ficha-conta__num{border-left:1px solid var(--line)}
.ficha-conta__num:hover{background:var(--cream-2)}
.ficha-conta__num b{
  font-family:var(--titulo);
  font-size:23px;
  font-weight:600;
  color:var(--gold);
  line-height:1.1;
}
.ficha-conta__num span{
  font-size:12px;
  color:var(--muted);
}

/* ---- sem conta: o convite ---- */

.ficha-conta--convite{
  text-align:center;
  padding:26px 20px 24px;
}
.ficha-conta__inicial--vazia{
  background:var(--cream);
  color:var(--gold);
  box-shadow:none;
  margin:0 auto 14px;
}
.ficha-conta__chamada{
  margin:0 0 6px;
  font-family:var(--titulo);
  font-size:22px;
  font-weight:600;
  color:var(--ink);
}
.ficha-conta__ajuda{
  margin:0 0 18px;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
}
.ficha-conta__botoes{
  display:grid;
  gap:10px;
}
.ficha-conta__botoes .btn{
  min-width:0;
  justify-content:center;
  padding:13px 18px;
  font-size:16px;
}
.ficha-conta__semconta{
  /* ALVO DE DEDO, e não só texto sublinhado.
     Ele nasceu com 152x20px — a medição de celular pegou. Vinte pixels
     de altura num link que a pessoa toca com o polegar é o tipo de
     coisa que "funciona" para quem clica com mouse e falha no
     telefone. Com o `padding` ele passa de 20 para 44px, que é o
     mínimo que uma mão acerta. */
  display:inline-block;
  margin-top:8px;
  padding:12px 8px;
  font-size:13.5px;
}

/* ---- o vazio dos pedidos, com saída ---- */

.vazio-conta{
  background:var(--card);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:30px 22px 26px;
  text-align:center;
}
.vazio-conta__ico{
  width:58px;height:58px;
  border-radius:50%;
  background:var(--cream);
  color:var(--gold);
  display:grid;place-items:center;
  margin:0 auto 14px;
}
.vazio-conta__titulo{
  margin:0 0 6px;
  font-family:var(--titulo);
  font-size:19px;
  font-weight:600;
  color:var(--ink);
}
.vazio-conta__texto{
  margin:0 auto 18px;
  max-width:34ch;
  font-size:14px;
  line-height:1.55;
  color:var(--muted);
}
.vazio-conta .btn{
  min-width:0;
  justify-content:center;
  padding:13px 22px;
  font-size:16px;
}

/* AQUI FICAVA A LINHA "TROCAR MINHA SENHA" (`.acoes-conta`,
   `.linha-conta*`). Ele mandou tirar a linha em 17/09/2026 e o estilo
   foi com ela: regra de CSS para algo que não existe mais é lixo que o
   próximo a mexer aqui vai tentar entender. */

/* ---------------------------------------------------------
   A FOTO DO TOPO DA PÁGINA INICIAL

   A arte antiga era um desenho de linha com fundo
   transparente, e por isso podia ficar ATRÁS do título,
   sangrando pela direita. A foto que entrou em 17/09/2026 é
   uma composição de estúdio com fundo branco próprio: no
   mesmo lugar, ela viraria uma caixa branca em cima do creme,
   com o título escrito por cima do frasco.

   EU ESTAVA ERRADO, E ELE MOSTROU A IMAGEM DO QUE QUERIA.
   "A parte inicial com aquela foto lá tem que ficar exatamente
   assim, e está muito muito diferente" — 17/09/2026, com o
   desenho da tela em anexo.

   Nele a foto NÃO é um cartão embaixo do texto: ela é o FUNDO do
   topo. Entra por trás da barra de cima, vai até a borda direita
   da tela, e o título e o texto ficam POR CIMA dela, na metade
   esquerda — que na foto é branco limpo. Foi para isso que a
   composição foi feita: o branco da esquerda existe para o texto
   morar nele.

   O que eu achava impossível (o recorte do fundo) não era
   necessário: ninguém precisa recortar nada. O fundo da foto é
   branco, então a PÁGINA fica branca onde a foto está, e as duas
   viram a mesma coisa sem emenda. O creme volta mais abaixo.

   AS MEDIDAS SAÍRAM DA IMAGEM DELE, não do meu gosto. Medindo
   pontos que dão para reconhecer nas duas (o arco do anel, a
   borda do frasco, a folha cortada na direita, a base de
   mármore), a foto está em 75,2% da largura da tela, encostada
   na direita, começando 3,8% da largura ACIMA do começo do
   bloco — isto é, atrás da barra de cima.

   Tudo aqui é proporção, não pixel: o `translate` em
   porcentagem se mede pela ALTURA da própria foto, que é
   proporcional à largura dela. Então a mesma regra serve para
   320px e para 520px sem eu escrever um número para cada tela.
   --------------------------------------------------------- */

.hero__art--foto{
  position:absolute;
  /* acima do bloco branco do `.hero::before`, abaixo do texto */
  z-index:1;
  right:0;
  top:0;
  /* 70%, E NÃO 75,2%. O 75,2% saiu do desenho dele, mas nesta medida
     o corpo da seringa cruzava as linhas do parágrafo — "a foto ali
     ta invadindo o texto", 17/09/2026. O assunto da foto começa
     sempre a 28,6% da largura dela, então encolher a foto empurra a
     seringa para a direita: a 70% ela sai de cima do texto e a foto
     continua sendo o fundo do topo, do jeito que ele desenhou.
     O porquê completo está no comentário do `.hero__text`. */
  width:70%;
  max-width:none;
  height:auto;
  margin:0;
  border-radius:0;
  box-shadow:none;
  /* A FOTO INTEIRA, SEM SUBIR PARA TRÁS DA BARRA DE CIMA.
     Brian, 18/09/2026: "volte com a imagem ali, deixe ela inteira como
     tava antes".

     Aqui havia `transform:translateY(-9.4%)`. Aquele número saiu do
     desenho que ele mandou em 17/09 — nele o topo da foto fica atrás
     da barra de cima —, e o `overflow:hidden` do `.hero` fazia o resto:
     medido, 9,3% do alto da foto era CORTADO (18px a 320px, 22px a
     390px, 25px a 430px). É o arco dourado do anel e a tampa do frasco
     que iam embora, que é justamente o que dá acabamento à composição.

     Sem o deslocamento a foto começa no alto do bloco e aparece
     inteira. Ela continua encostada na direita e continua sendo o
     fundo do topo, com o texto por cima do branco da esquerda — o
     desenho dele não se perde, só deixa de ser cortado. */
  transform:none;
  /* a foto é cenário: o dedo tem de chegar no que está por cima */
  pointer-events:none;
}

/* E O BLOCO TEM DE TER ALTURA PARA A FOTO INTEIRA CABER.
   Sem esta linha, devolver a foto inteira só trocava o corte de lugar:
   medido, a 520px ela passava 32px do pé do bloco e o `overflow:hidden`
   comia o mármore de baixo.
   A conta: a foto ocupa 70% da largura do bloco e a altura dela é
   86,57% da própria largura (1348x1167 do arquivo) — logo 60,6% da
   largura do bloco. O `min()` para no 315px porque a coluna do site
   para em 520px: acima disso a foto não cresce mais, e sem o teto o
   bloco continuaria esticando em tela grande com o vão vazio embaixo. */
@media (max-width:899px){
  .hero{min-height:min(60.6vw,315px)}
}

@media (min-width:900px){
  /* NO COMPUTADOR A COMPOSIÇÃO É OUTRA, e tem de ser.
     O desenho do Brian é de celular: lá a foto é o fundo e o texto vem
     por cima. No computador o topo já é de duas colunas — texto à
     esquerda, foto à direita — e a foto volta a ser um bloco com
     moldura. Sem os cantos e a sombra ela fica um retângulo cortado no
     meio do branco, que foi o que eu deixei acontecer ao mexer só na
     regra de cima.

     E as larguras de texto voltam ao normal: os 158px e 196px de lá
     existem para o texto não encostar na seringa. Aqui a seringa está
     na outra coluna, e aquele limite deixava um parágrafo de 196px ao
     lado de um título de 60px — apertado sem motivo. */
  .hero__art--foto{
    position:static;
    width:100%;
    max-width:520px;
    transform:none;
    border-radius:20px;
    box-shadow:var(--shadow-md);
  }
  .hero__text{max-width:38ch}
  .hero__cta .btn--primary{
    font-size:17.5px;
    padding:12px 12px 12px 26px;
    gap:16px;
  }
  .hero__cta .btn__arrow{width:38px;height:38px}
}

/* =========================================================
   A PÁGINA DO PRODUTO — AVISO, AÇÕES, TARJAS E SANFONAS

   Brian mandou a página de produto de outro site como referência:
   "faca igual mas nao copie tudo e faca a mesma coisa, tente pegar a
   referencia e fazer uma coisa melhor".

   O que eu peguei de lá: o aviso de como o pedido é confirmado em cima
   dos botões, os botões do mesmo tamanho em duas linhas, a fileira de
   tarjas curtas e as sanfonas de texto. O que eu NÃO peguei: as cores
   e as palavras deles, e as duas sanfonas cujo conteúdo eu não tenho
   (o porquê está escrito no HTML, ao lado de cada uma).
   ========================================================= */

/* ---- o aviso de como o pedido anda ---- */
.ficha__aviso{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:14px 0 0;
  padding:12px 13px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--cream);
}
.ficha__aviso > svg{flex:none;margin-top:1px;color:var(--gold)}
.ficha__aviso > span{display:flex;flex-direction:column;gap:2px;min-width:0}
.ficha__aviso b{font-size:13px;font-weight:600;color:var(--ink)}

/* A VERSÃO QUIETA: sem caixa, sem borda.
   Ele era um retângulo com borda e fundo entre o preço e os botões, e
   caixa com moldura ali significa "atenção, problema" — este aviso é
   uma boa notícia (não se paga nada no site). Sem a moldura ele
   informa em vez de alarmar, e o dourado do escudo já o marca. */
.ficha__aviso--quieto{
  border:0;
  background:none;
  padding:2px 2px 0;
  margin:14px 0 0;
}
.ficha__aviso span span{font-size:11.5px;line-height:1.45;color:var(--ink-2)}

/* ---- os botões, dois por linha ----
   Dois por linha e do mesmo tamanho, como na referência. Era um botão
   largo, dois médios e um link de texto solto no fim — o
   "Compartilhar" parecia rodapé e não ação.
   `min-width:0` porque "Pedir no WhatsApp" é comprido e, sem ele, o
   item da grade não encolhe abaixo do conteúdo e empurra a coluna
   vizinha (o mesmo alfinete de sempre em grid). */
/* OS BOTÕES EM TRÊS NÍVEIS, E NÃO QUATRO IGUAIS.

   Eram quatro do mesmo tamanho numa grade 2×2 — parecia teclado, e o
   dourado gritava no meio dos três brancos sem que a ordem das coisas
   ficasse clara. Agora a tela diz o que fazer:

     1. Adicionar — largura inteira, dourado. É A ação.
     2. Pedir no WhatsApp — largura inteira, contorno. É o outro
        caminho de compra, para quem prefere conversar.
     3. Favoritar e Compartilhar — pequenos, lado a lado. São
        secundários de verdade e agora parecem.

   O alvo de dedo dos dois pequenos continua acima de 40px: eles
   encolheram na letra e no respiro lateral, não na altura. */
.ficha__acoes{
  display:flex;
  flex-direction:column;
  gap:9px;
  margin-top:14px;
}
.ficha__acoes .btn{
  min-width:0;
  justify-content:center;
  gap:8px;
  padding-inline:12px;
}
.ficha__acoes .btn > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* o principal e o do WhatsApp ocupam a linha */
.ficha__acoes > .btn{width:100%}

/* os dois pequenos, lado a lado */
.ficha__acoes-menores{display:flex;gap:9px}
.ficha__acoes-menores .btn{
  flex:1 1 0;
  min-width:0;
  justify-content:center;
  padding-block:11px;
}

/* ---- AQUI MORAVAM AS QUATRO TARJAS E AS DUAS SANFONAS ----
   Brian, 18/09/2026: "tire tudo isso da foto que te mandei, ao entrar
   no pedido". Saíram do HTML, e o CSS sai com elas: regra sem elemento
   é peso que todo visitante baixa para nada, e daqui a um mês ninguém
   sabe mais se ela está em uso.
   Havia medida ganha nesses dois blocos — as tarjas eram duas colunas
   no celular porque "Acompanhamento" mede 83px e não cabe em coluna de
   62px. Está registrado aqui, em uma linha, para o dia em que uma
   fileira de quatro colunas voltar a ser desenhada em qualquer lugar
   do site. O resto está no histórico do arquivo. */

/* ---- produtos da mesma linha ---- */
.relacionados{margin-top:8px}
.relacionados .section-head{padding-bottom:12px}
.relacionados .section-title{font-size:20px}

/* Da tela grande para cima as quatro entram na mesma fileira: a coluna
   passa de 110px e "Acompanhamento" (83px) cabe inteira. */
@media (min-width:520px){
  .ficha__tarjas{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* =========================================================
   ANIMAÇÃO AO TROCAR DE TELA

   Brian, 18/09/2026: "Deixe animacao legal ao entrar e sair de um
   produto, animacao ao trocar de aba, ao trocar de categoria na aba de
   produtos".

   QUEM FAZ O TRABALHO É O NAVEGADOR, não uma biblioteca. Estas duas
   linhas ligam a transição de navegação: ao sair de uma página para
   outra do mesmo site, em vez do pisca branco, ele cruza as duas telas.
   Vale para tudo de uma vez — entrar num produto, voltar, trocar de aba
   na barra de baixo — sem um script por caminho.

   ONDE NÃO EXISTE, NÃO ACONTECE NADA. Navegador antigo ignora a regra e
   navega como sempre: ninguém fica com a tela travada esperando uma
   animação que aquele aparelho não sabe fazer. É o motivo de eu não ter
   escrito isso à mão com JavaScript.

   E QUEM PEDIU MENOS MOVIMENTO não recebe movimento: quem liga
   "reduzir animações" no celular costuma ter tontura ou enjoo com isso,
   e a regra de baixo desliga a transição inteira para essa pessoa.
   ========================================================= */

@view-transition{ navigation: auto; }

/* O tempo e a curva. 220ms é o que dá para perceber sem esperar. */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:220ms;
  animation-timing-function:cubic-bezier(.4,0,.2,1);
}

/* A FOTO DO PRODUTO ATRAVESSA AS DUAS TELAS.
   Esta é a parte "legal" do pedido dele: ao tocar num produto, a foto
   do cartão não pisca e reaparece — ela VOA da vitrine para a página do
   produto e cresce no caminho. O truque é dar o mesmo nome à foto nas
   duas telas; o navegador entende que é a mesma coisa e faz o resto.
   Quem põe o nome no cartão tocado é o `app.js`, no clique — só num
   cartão por vez, porque dois elementos com o mesmo nome cancelam a
   transição. */
.ficha__foto img[data-foto]{ view-transition-name: produto-foto; }

::view-transition-group(produto-foto){
  animation-duration:340ms;
  animation-timing-function:cubic-bezier(.32,.72,0,1);
}

/* A barra de baixo e a de cima FICAM PARADAS enquanto o resto cruza.
   Sem isto elas também cruzam consigo mesmas e dá um tremor esquisito
   justamente no que não mudou de lugar. */
.topbar{ view-transition-name: barra-de-cima; }
.tabbar{ view-transition-name: barra-de-baixo; }
::view-transition-old(barra-de-cima),
::view-transition-new(barra-de-cima),
::view-transition-old(barra-de-baixo),
::view-transition-new(barra-de-baixo){
  animation:none;
  mix-blend-mode:normal;
}

@media (prefers-reduced-motion:reduce){
  @view-transition{ navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}

/* ---------- o botão de voltar na página do produto ----------
   A barra de cima é "marca à esquerda, menu à direita". Com o voltar,
   ela passa a ter três coisas, e a marca não pode deixar de ser o
   centro: então a marca vira o item que ESTICA e os dois botões ficam
   nas pontas, cada um com o seu tamanho.
   O alvo tem 40px, que é o mesmo do botão de menu — dedo não sabe que
   um é seta e o outro é traço. */
.topbar--com-voltar{gap:8px}
.topbar--com-voltar .brand{flex:1;min-width:0}
.icon-btn--voltar{flex:none}

/* =========================================================
   PAGAR NO SITE, COM PIX

   Nasce escondido no HTML e só é mostrado quando o servidor
   responde que o gateway está de pé (`pagamento.js`).

   O "ou pague agora" é um divisor com o texto no meio: as duas
   linhas são `::before`/`::after` para não haver elemento vazio
   no HTML só para desenhar risco.
   ========================================================= */
.pagar{margin-top:16px}
.pagar__ou{
  display:flex;align-items:center;gap:10px;
  margin:0 0 12px;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)
}
.pagar__ou::before,.pagar__ou::after{
  content:"";flex:1 1 0;height:1px;background:var(--line)
}
.btn--pix{justify-content:center;gap:10px}
.btn--pix svg{flex:none}
.pagar__nota{margin:9px 0 0;font-size:12.5px;color:var(--muted);text-align:center}

.pix{
  margin-top:16px;padding:16px;
  background:var(--card);border:1px solid var(--gold-soft);border-radius:14px
}
.pix__valor{
  margin:0 0 12px;font-size:21px;font-weight:700;text-align:center;color:var(--ink)
}
.pix__valor:empty{display:none}

/* O QR EM CIMA DE BRANCO, SEMPRE.
   O cartão é creme, e leitor de QR erra quando o quiet zone tem
   cor. O fundo branco com respiro é o que garante a leitura. */
.pix__qr{
  display:block;width:100%;max-width:224px;margin:0 auto 14px;
  background:#fff;padding:10px;border-radius:10px;
  border:1px solid var(--line);image-rendering:pixelated
}

.pix__codigo{display:flex;flex-direction:column;gap:9px}
.pix__codigo code{
  display:block;padding:10px 11px;
  background:var(--cream-2);border:1px solid var(--line);border-radius:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  line-height:1.5;color:var(--ink);
  /* o código PIX é uma linha só de 100+ caracteres: sem isto ele
     estoura a largura do celular e empurra a página de lado */
  word-break:break-all;max-height:84px;overflow:auto
}
.pix__codigo code:empty{display:none}
.pix__codigo .btn{align-self:center}

.pix__estado{
  margin:13px 0 0;font-size:13.5px;text-align:center;color:var(--muted)
}
.pix__estado--pago{
  color:#1c7a45;font-weight:600;font-size:15px
}
.pix__estado--frio{color:#a8331f}
.pix__prazo{margin:6px 0 0;font-size:12px;text-align:center;color:var(--muted)}