/* ==========================================================================
   A TAMPA — a marca da Lembrarê na VITRINE  (css/marca.css)
   --------------------------------------------------------------------------
   Direção "A tampa", escolhida pelo Pedro em 25/09/2026.

   A IDEIA
   O site passa a se parecer com o presente que a cliente vai receber: a
   caixa preta com o nome estampado em cobre, e dentro, o papel de seda.
   A capa é a FOTO que a dona escolhe no painel com a etiqueta nude por
   cima; o catálogo é o que tem dentro; o rodapé é o fundo da caixa.
   (Até 26/09 a capa era um bloco preto com o logo gigante. O Pedro não
   gostou do "quadrado preto enorme" e a pesquisa confirmou: as lojas de
   referência abrem com foto do produto — ver a seção 3.)

   DE ONDE VEIO CADA COISA (nada inventado)
   - O logo é o arquivo oficial que a dona mandou, vetorizado (img/*.svg).
   - O cobre #B27B45 é a tinta exata desse arquivo (121.750 pixels).
   - O preto da tampa e o nude saíram das fotos das caixas dela.
   - Gambetta nos títulos: a serifa macia que conversa com as pontas
     arredondadas do logo sem competir com ele. Satoshi no resto: a sans mais
     parecida com o "PRESENTES AFETIVOS" do logo (geométrica, O redondo).
     Escolhidas lado a lado com o logo, com conteúdo real.

   CONTRASTE (medido, não estimado)
     tinta / seda ............ 11,14:1     texto suave / seda ...... 5,74:1
     cobre escuro / seda ...... 5,23:1     cobre / seda (≥ 24 px) .. 3,22:1
     papel / tampa ........... 14,40:1     cobre / tampa ........... 4,92:1
     borda de campo / seda .... 3,77:1     branco / cobre do botão . 4,60:1

   OS TRÊS ARQUIVOS DA MARCA
   - css/marca-base.css: a IDENTIDADE (fontes, cores, tipografia, foco,
     botões). Carregado pelas páginas da vitrine E pelo painel da dona —
     assim as duas partes nunca ficam com marcas diferentes.
   - css/marca.css (este): só o que é da vitrine (capa, cartões, página
     da cestinha, Monte, rodapé).
   - css/marca-admin.css: a identidade aplicada ao painel.
   A ordem importa: marca-base.css vem ANTES deste.
   ========================================================================== */


/* Os títulos da vitrine que não são h1/h2/h3 também vão na Gambetta (os
   h1/h2/h3 já vêm do marca-base.css). */
.secao__titulo, .cartao__nome {
  font-family: var(--fonte-titulo);
}

/* Os títulos das páginas internas vinham em cobre; na vitrine estão em
   tinta. Uma página só, uma regra só. */
.apresentacao h1,
.apresentacao--monte h1,
.texto-longo h1 {
  font-weight: 500;
  font-size: clamp(2rem, 6vw, 2.9rem);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--tinta);
}
.texto-longo h2 {
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--tinta);
}

/* "Horário de atendimento" em frase comum, como o resto da página (o CSS
   antigo punha em CAIXA-ALTA espaçada). Em tinta: é o título do bloco. */
.destaque-horario strong {
  font-size: .9rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--tinta);
}

/* O BOTÃO PRINCIPAL, COM LETRA BRANCA (pedido do Pedro, 06/10/2026).
   No marca-base.css ele nasce com letra preta sobre o cobre do logo, e o
   painel continua assim. Na vitrine a letra é branca — só que branco sobre o
   cobre do logo dá 3,61:1 e reprova para letra de 16 px (o mínimo é 4,5:1;
   os 3:1 só valem a partir de 24 px, ou 18,5 px em negrito: W3C, critério
   1.4.3). Por isso o fundo é o MESMO cobre do logo (mesma cor, mesma
   saturação) um tom mais escuro: 4,60:1. Ao passar o mouse ele escurece mais
   um pouco (cobre escuro, 5,86:1) em vez de clarear como antes. O ícone do
   WhatsApp vai junto com a letra (currentColor). */
.botao--principal { background: var(--cobre-botao); color: #fff; }
.botao--principal:hover { background: var(--cobre-escuro); color: #fff; }

/* O cabeçalho gruda no topo. Sem folga, voltar com Shift+Tab deixa o
   elemento focado embaixo dele (WCAG 2.4.11). A folga vai em cada coisa
   focável do CONTEÚDO e do rodapé, não na página inteira: com
   scroll-padding-top no <html>, cada link do próprio cabeçalho que recebia
   o foco empurrava a página 458 px para cima (medido: 1638 → 1180 → 722 →
   264, com e sem Lenis). A altura vem medida pelo js/anim.js; o número de
   reserva é a altura dele no computador. */
#principal,
#principal :is(a, button, input, select, textarea, [tabindex]),
#texto-regras h2,
.rodape a {
  scroll-margin-top: calc(var(--altura-cabecalho, 72px) + 16px);
}
/* O mesmo embaixo, nas páginas com barra fixa (cestinha e Monte): a altura
   da barra vem medida pelo js/anim.js (zero quando ela está escondida). */
.com-barra-fixa #principal :is(a, button, input, select, textarea, [tabindex]),
.com-barra-fixa .rodape a {
  scroll-margin-bottom: calc(var(--altura-barra, 0px) + 12px);
}

/* --------------------------------------------------------------------------
   2) CABEÇALHO
   -------------------------------------------------------------------------- */

.cabecalho {
  background: var(--seda);
  border-bottom: 1px solid var(--fio);
  box-shadow: none;
}
/* O cabeçalho é montado pelo JavaScript (util.js). Antes disso ele é uma
   caixa vazia de 1 px; quando ganha os 65 px, empurra a página inteira para
   baixo (medido: CLS 0,041 no computador e 0,075 no celular, com a capa
   agora embaixo dele). A reserva guarda o lugar desde a primeira pintura.
   65 px em todas as larguras (medido de 320 a 1440 px). */
.cabecalho:empty { height: 65px; box-sizing: border-box; }

/* Logo no eixo, um link de cada lado (pesquisa: Diptyque, Chanel, Dior).
   Três colunas 1fr · auto · 1fr: as laterais têm SEMPRE a mesma largura,
   então o logo fica no centro exato mesmo com "Cestinhas" e "Como
   funciona" tendo tamanhos diferentes. */
.cabecalho__interno--centro {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
.cabecalho__interno--centro .menu__vitrine { justify-self: start; }
.cabecalho__interno--centro .marca { justify-self: center; }
.cabecalho__interno--centro .menu__como { justify-self: end; }

.marca { gap: 0; }
.marca__svg {
  display: block;
  height: 30px;
  width: auto;
}

.menu__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: .9rem;
  letter-spacing: .02em;
  color: var(--tinta-suave);
  text-decoration: none;
}
.menu__link:hover { color: var(--tinta); }
.menu__link[aria-current="page"] {
  color: var(--tinta);
  text-decoration: underline;
  text-decoration-color: var(--cobre);
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

/* CELULAR E TABLET EM PÉ: SIMÉTRICO.
   "Cestinhas" (60 px) e "Como funciona" (95 px) têm larguras diferentes.
   Presos às bordas da tela, a folga de cada um até o logo ficava 47 px de
   um lado e 12 do outro — o Pedro viu torto (26/09). Agora o conjunto
   inteiro fica no centro: a MESMA folga dos dois lados do logo e a MESMA
   margem até a borda (medido). O preço: o logo fica ~17 px à esquerda do
   centro exato da tela, o que não se vê — o olho lê o conjunto. A outra
   saída simétrica (logo em cima, links embaixo) subia o cabeçalho de 65
   para 105 px no celular.
   No computador as folgas são enormes (370 e 333 px) e a diferença some:
   lá os links continuam nas bordas. */
@media (max-width: 699px) {
  .cabecalho__interno--centro {
    grid-template-columns: auto auto auto;
    justify-content: center;
    column-gap: clamp(14px, 5.6vw, 28px);
  }
  .cabecalho__interno--centro .menu__vitrine,
  .cabecalho__interno--centro .marca,
  .cabecalho__interno--centro .menu__como { justify-self: center; }
}
/* No celular os dois links cabem (o estilo antigo escondia o "Cestinhas"
   abaixo de 430 px). */
@media (max-width: 430px) {
  .cabecalho__interno--centro .menu__vitrine { display: inline-flex; }
  .menu__link { font-size: .84rem; letter-spacing: .01em; }
  /* Se ainda assim quebrar (tela bem estreita), quebra centrado. */
  .menu__vitrine,
  .menu__como { text-align: center; }
  /* Logo de 24 px: com a folga dos dois lados, o conjunto cabe numa linha
     a partir de 360 px de tela. */
  .marca__svg { height: 24px; }
}
/* Android estreito (360 px é comum): letra, logo e folga um passo menores. */
@media (max-width: 370px) {
  .cabecalho__interno--centro { column-gap: 14px; }
  .menu__link { font-size: .78rem; }
  .marca__svg { height: 22px; }
}

/* O cabeçalho é o mesmo em todas as páginas, também na vitrine: papel, com
   o logo em cobre sempre à vista. É o que as lojas de referência fazem (o
   logo pequeno no alto, a foto logo abaixo). Antes, sobre a capa preta, ele
   ficava preto e escondia o logo — isso saiu com a capa preta. */

/* --------------------------------------------------------------------------
   3) A CAPA DA VITRINE: a foto de fundo, a apresentação e as pétalas
   --------------------------------------------------------------------------
   Desde 06/10/2026, a pedido do Pedro e da dona ("não gostei do carrossel...
   deixe a página inicial apenas com a foto de fundo e a introdução com o
   nome"): saíram as fotos das cestinhas que passavam para o lado. A capa é a
   "foto de fundo do topo" do painel (hoje, o papel de flores) de borda a
   borda, com a apresentação no meio: o coração e a frase pequena, o nome da
   loja, a frase e os dois botões.

   O FUNDO fica a 70% sobre o papel de seda (era 42%: sem as fotos das
   cestinhas, é ele que dá o visual), com um véu de seda por cima — mais
   forte no meio, atrás do texto, e fraco nas bordas, onde a foto aparece.
   Todo o texto da capa é em tinta. A conta do pior caso (uma foto de fundo
   toda preta): 70% de foto com 56% de véu ou mais deixam o fundo claro o
   bastante para a tinta ficar acima de 4,5:1; a medida nos pixels está no
   AUDITORIA.md.

   O MOVIMENTO QUE RODA SOZINHO (pedido dele: "uma animação que não necessite
   de interação... para ficar bonito e visual para o cliente"):
     - o papel respira: o fundo se aproxima 6% e desliza bem devagar (56 s);
     - pétalas na cor das flores do papel caem com vento e balanço, em três
       camadas de profundidade, PASSANDO ATRÁS DO TEXTO (nunca na frente);
     - o coração da frase pequena bate devagar.
   Pesquisa de 06/10, com print e vídeo: sakura.js (40 pétalas de 10 a 20 px,
   6 a 9 s para cair, vento e balanço somados) e o Sakura Petals do Framer
   (três camadas; a pétala gira até ficar de perfil). As nossas levam de 21 a
   46 s e são poucas: o Pedro viu a versão mais cheia e pediu "mais calma".

   AS TRAVAS: só "transform" e "opacity"; nada se mexe antes de o
   js/tampa.js pôr .tampa--viva (depois da primeira pintura); com "reduzir
   movimento" a capa nasce parada; o botão do canto pausa tudo (WCAG 2.2.2)
   e a escolha fica guardada; fora da tela, tudo descansa.

   (De 02/10 a 06/10 a capa tinha o texto à esquerda e as fotos das cestinhas
   passando à direita; até 01/10, a foto de borda a borda com a etiqueta
   nude; antes de 26/09, a capa preta com o logo gigante.)
   -------------------------------------------------------------------------- */

.tampa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  align-items: center;
  min-height: clamp(440px, 72vh, 700px);    /* navegador sem "svh" */
  min-height: clamp(440px, 72svh, 700px);   /* a altura da tela com as barras do celular à mostra */
  padding: clamp(44px, 8vh, 88px) 0 clamp(60px, 9vh, 96px);
  background: var(--seda);
  /* As pétalas: a família do cobre da marca, do tom claro das flores do
     papel (as de longe) a um cobre suave (as de perto). O ponto foi achado
     em três tentativas (06/10/2026): toda no tom claro, sumia no papel
     creme (mudava 0,14 por décimo de segundo na gravação); com as da frente
     em cobre cheio e 38 pétalas (0,28) o Pedro pediu "mais calma"; ficou
     no meio — 24 pétalas, mais claras e mais lentas. */
  --petala-longe-a: #F5D3B6;
  --petala-longe-b: #EABB98;
  --petala-meio-a: #F1C7A4;
  --petala-meio-b: #E2AC85;
  --petala-perto-a: #EDBE9A;
  --petala-perto-b: #DBA277;   /* o mais escuro: a tinta do texto dá 5,6:1 em cima dele */
}

/* O CÉU: a foto de fundo dentro de uma moldura. O respiro mexe na moldura;
   o gesto da rolagem (js/tampa.js, com GSAP) mexe na foto. */
.tampa__ceu {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.tampa__fundo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* o ponto de foco da dona vem do vitrine.js */
  opacity: .7;
}

/* O véu de seda por cima da foto. No celular o texto vai de lado a lado:
   o véu é quase igual na tela toda, mais forte no meio. */
.tampa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(247, 241, 235, .56) 0%, rgba(247, 241, 235, .72) 50%, rgba(247, 241, 235, .6) 100%);
  pointer-events: none;
}
/* No computador o texto ocupa o meio: o véu é uma mancha larga e sem
   contorno atrás dele, e a foto aparece em volta. */
@media (min-width: 900px) {
  .tampa::before {
    background: radial-gradient(ellipse 62% 80% at 50% 50%,
      rgba(247, 241, 235, .8) 0%,
      rgba(247, 241, 235, .76) 34%,
      rgba(247, 241, 235, .6) 58%,
      rgba(247, 241, 235, .4) 80%,
      rgba(247, 241, 235, .26) 100%);
  }
}

.tampa__texto { text-align: center; }

.tampa__olho {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--tinta);
}
.tampa__coracao { width: 13px; height: 13px; flex: none; color: var(--cobre); transform-origin: 50% 62%; }

.tampa__nome {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: clamp(3rem, 12vw, 5.6rem);
  line-height: 1.02;
  letter-spacing: -.01em;
  color: var(--tinta);
}

.tampa .frase {
  max-width: 42ch;
  margin: 16px auto 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--tinta);
}

.tampa__acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
/* O botão de contorno ganha fundo de seda: fica legível sobre qualquer foto. */
.tampa .botao--secundario { background: rgba(247, 241, 235, .88); }
@media (max-width: 559px) {
  .tampa__acoes { flex-direction: column; align-items: center; }
  .tampa__acoes .botao { width: min(100%, 300px); }
}
.tampa :focus-visible { outline-color: var(--cobre-escuro); }

/* ---------- as pétalas ---------- */

/* A camada do vento: acima do véu (vem depois dele no HTML), atrás do texto. */
.tampa__vento {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}
/* Cada pétala é uma PISTA da altura da capa (e um pouco mais), com a pétala
   no topo: descer 100% da pista é atravessar a capa inteira. Assim a queda é
   só "transform", sem conta em JavaScript e sem depender da altura da tela. */
.petala {
  position: absolute;
  top: -8%;
  left: var(--x);
  width: var(--t);
  height: 116%;
  opacity: 0;                 /* sem o movimento ligado, não aparece */
  transition: opacity .5s ease;
}
.petala__corpo {
  display: block;
  width: var(--t);
  height: var(--t);
  border-radius: 82% 0 82% 0;
  background: linear-gradient(135deg, var(--petala-meio-a), var(--petala-meio-b));
}
.petala--longe .petala__corpo {
  background: linear-gradient(135deg, var(--petala-longe-a), var(--petala-longe-b));
  filter: blur(.5px);
}
.petala--perto .petala__corpo { background: linear-gradient(135deg, var(--petala-perto-a), var(--petala-perto-b)); }

.tampa--viva .tampa__ceu { animation: capa-respira 56s ease-in-out infinite alternate; }
.tampa--viva .petala {
  opacity: var(--o);
  will-change: transform;
  animation: petala-cai var(--d) linear var(--a) infinite;
}
.tampa--viva .petala__corpo {
  animation: petala-balanca var(--b) ease-in-out var(--a) infinite alternate;
}
.tampa--viva .tampa__coracao { animation: capa-coracao 4.8s ease-in-out infinite; }

@keyframes capa-respira {
  from { transform: scale(1.03) translate3d(-1%, -.8%, 0); }
  to   { transform: scale(1.09) translate3d(1.1%, .9%, 0); }
}
@keyframes petala-cai {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--vento), 100%, 0); }
}
/* O balanço: vai de um lado ao outro girando, e vira até ficar quase de
   perfil (o rotateY sem perspectiva só estreita a pétala). */
@keyframes petala-balanca {
  from { transform: translate3d(-12px, 0, 0) rotate(var(--g0)) rotateY(0deg); }
  to   { transform: translate3d(14px, 0, 0) rotate(var(--g1)) rotateY(150deg); }
}
/* Duas batidas e um descanso, como coração de verdade. */
@keyframes capa-coracao {
  0%, 32%, 100% { transform: scale(1); }
  8%  { transform: scale(1.24); }
  16% { transform: scale(1.04); }
  24% { transform: scale(1.16); }
}

/* PAUSADO (no botão, ou porque o aparelho pede menos movimento): as pétalas
   somem e o papel e o coração param onde estão. */
.tampa--parada .tampa__ceu,
.tampa--parada .petala,
.tampa--parada .petala__corpo,
.tampa--parada .tampa__coracao { animation-play-state: paused; }
.tampa--parada .petala { opacity: 0; }

/* FORA DA TELA: tudo descansa (o js/tampa.js vigia). */
.tampa--fora .tampa__ceu,
.tampa--fora .petala,
.tampa--fora .petala__corpo,
.tampa--fora .tampa__coracao { animation-play-state: paused; }

/* "REDUZIR MOVIMENTO" no aparelho: parado, mesmo se o JavaScript falhar em
   avisar. Só anda de novo se ela ligar no botão (.tampa--forcada). */
@media (prefers-reduced-motion: reduce) {
  .tampa:not(.tampa--forcada) .tampa__ceu,
  .tampa:not(.tampa--forcada) .petala,
  .tampa:not(.tampa--forcada) .petala__corpo,
  .tampa:not(.tampa--forcada) .tampa__coracao { animation-play-state: paused; }
  .tampa:not(.tampa--forcada) .petala { opacity: 0; transition: none; }
}

/* ---------- o botão de pausar ---------- */

.tampa__pausa {
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 44px;
  height: 44px;               /* o mínimo de toque */
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 241, 235, .82);
  color: var(--tinta);
  cursor: pointer;
}
.tampa__pausa[hidden] { display: none; }
.tampa__pausa svg { width: 14px; height: 14px; }
.tampa__pausa-toca { display: none; }
.tampa--parada .tampa__pausa-pausa { display: none; }
.tampa--parada .tampa__pausa-toca { display: block; }
@media (hover: hover) and (pointer: fine) {
  .tampa__pausa:hover { background: var(--seda); }
}

/* O FILETE DOURADO onde a capa encontra o papel (a borda dourada da tampa). */
.tampa::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cobre) 18%, var(--cobre-claro) 50%, var(--cobre) 82%, transparent);
  opacity: .8;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3b) A DATA ESPECIAL  (13/10/2026; desenho "Cartaz" desde 14/10/2026)
   --------------------------------------------------------------------------
   Pedido do Pedro: as cesteiras vendem muito em épocas do ano (Dia dos
   Professores, Natal, Dia dos Namorados) e a data precisa aparecer na página
   principal, "destacada em carrossel e descrita". A dona cria e liga no
   painel; ligada, o bloco aparece logo depois da capa (index.html,
   #data-especial; quem preenche é o js/vitrine.js).

   AS ESCOLHAS DELE: as cestas trocam devagar, sozinhas (cerca de 6 s), com
   botão de pausar, e param quando a cliente toca; um prazo escrito por ela,
   se quiser. A primeira faixa (cobre cheio) ele reprovou em 14/10: "uma linha
   crua e reta... cadê as animações". Das 3 caras novas escolheu o CARTAZ: o
   nome da data em letra enorme, as fotos sobre uma faixa nude, a cesta
   abrindo o bloco sendo a 1ª da lista da data.

   SIMETRIA (14/10/2026). A primeira versão do Cartaz ele achou "tudo torto,
   mal recortado, falta simetria": fotos em escada, de tamanhos diferentes,
   uma foto cobrindo a letra do título, uma lasca cortada na borda esquerda
   depois da troca e, com uma cesta só, um vazio de um lado. Agora:
   - tudo no mesmo eixo, no meio da tela: título, frase, prazo, fotos,
     traços, teclas e botão;
   - as fotos são todas do mesmo tamanho, na mesma altura, e nenhuma passa
     por cima do título;
   - a cesta da vez fica SEMPRE no centro. A fileira dá a volta (depois da
     última vem a primeira), então as vizinhas aparecem por igual dos dois
     lados: no celular um pedaço igual de cada uma, no computador três
     inteiras. As que esperam fora disso somem antes de chegar à borda: não
     sobra lasca cortada;
   - uma cesta fica sozinha no meio; duas, lado a lado no meio; no
     computador, até três, paradas, todas à vista.

   UMA COR SÓ: o cobre escuro no título e no prazo (5,23:1 sobre a seda), a
   tinta no resto e o cobre do botão com letra branca (4,60:1). Na faixa
   nude o nome e o preço vão em tinta (9,3:1): o cobre escuro ficaria em
   4,37:1, abaixo dos 4,5:1 da WCAG 1.4.3.

   O QUE SE MEXE (só "transform", "opacity" e "clip-path"):
   - a chegada, uma vez, quando o bloco aparece: o título sobe palavra por
     palavra de dentro de uma janela, a frase e o prazo acendem, o
     sublinhado do prazo cresce do meio para os lados, as fotos abrem de
     baixo para cima (a do meio primeiro, as duas vizinhas juntas);
   - o título anda um pouco mais devagar que a página (uns 20 px);
   - a fileira desliza devagar a cada 6 s, segue o dedo, e a foto aproxima
     de leve com o mouse em cima;
   - com "reduzir movimento" nada disso: tudo já nasce no lugar, a troca é
     sem deslize e só acontece pelas setas.
   -------------------------------------------------------------------------- */

.data-especial {
  --data-curva: cubic-bezier(.22, 1, .36, 1);   /* sai rápido e pousa devagar */
  position: relative;
  padding: 58px 0 54px;
  background: var(--seda);
  color: var(--tinta);
  border-top: 1px solid var(--fio);
  /* "clip", e não só "hidden": as cestas que esperam fora da tela não abrem
     uma rolagem escondida, e o Tab até uma delas não empurra a seção de lado
     (o js/vitrine.js traz a cesta focada para o meio). "hidden" fica para o
     navegador que ainda não conhece o "clip". */
  overflow: hidden;
  overflow: clip;
}
.data-especial[hidden] { display: none; }
.data-especial__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 34px;
  text-align: center;
}
/* Sem isto, a fileira alargaria a coluna da grade. */
.data-especial__grade > * { min-width: 0; }

.data-especial__texto {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 100%;
}
/* O nome da data é o cartaz. O tamanho vem daqui; se a palavra mais comprida
   não couber na largura (Professores, Namorados), o js/vitrine.js diminui a
   letra até caber, em vez de quebrar a palavra no meio. */
.data-especial__titulo {
  max-width: 100%;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  /* O teto (6rem) emenda com o do computador (5,5rem aos 700 px): sem ele,
     um tablet em pé tinha o título maior que um deitado (120 px contra 80). */
  font-size: clamp(3.4rem, 19vw, 6rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--cobre-escuro);
  text-wrap: balance;
}
/* Cada palavra numa janela: na chegada ela sobe de dentro dela. A folga em
   volta guarda o acento de cima (Mães, Páscoa) e a perna de baixo do "g". */
.data-especial__palavra {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: .12em .03em .16em;
  margin: -.12em -.03em -.16em;
}
.data-especial__palavra > span { display: inline-block; }

.data-especial__frase {
  max-width: 34ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  text-wrap: balance;               /* linhas do mesmo tamanho, sem palavra sozinha */
  overflow-wrap: anywhere;
}
/* O prazo: a data-limite é o que faz a cliente decidir hoje. Em cobre
   escuro, com um sublinhado cobre claro que cresce do meio na chegada. */
.data-especial__prazo {
  max-width: 40ch;
  margin: 0;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--cobre-escuro);
  overflow-wrap: anywhere;
}
.data-especial__prazo span {
  padding-bottom: 3px;
  background: linear-gradient(var(--cobre-claro), var(--cobre-claro)) no-repeat 50% 100% / 100% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;      /* em duas linhas, cada uma com o seu traço */
}
.data-especial__frase[hidden],
.data-especial__prazo[hidden] { display: none; }

/* O botão da loja (cobre com letra branca), reto como as teclas. */
.data-especial__botao {
  min-height: 48px;
  padding: 13px 30px;
  background: var(--cobre-botao);
  color: #fff;
  border: 0;
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  letter-spacing: .03em;
  transition: background-color .45s ease, transform .2s ease;
}
.data-especial__botao:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .data-especial__botao:hover { background: var(--cobre-escuro); color: #fff; }   /* 5,86:1 */
}
.data-especial :is(a, button) { -webkit-tap-highlight-color: transparent; }
/* O cabeçalho gruda no topo (seção 1): a mesma folga para o foco daqui. */
.data-especial :is(a, button) {
  scroll-margin-top: calc(var(--altura-cabecalho, 72px) + 16px);
}

/* ---------- a fileira das cestas ---------- */

.data-especial__vitrine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
}
/* Parada (até três no computador, uma ou duas no celular): as cestas lado a
   lado, no meio. Rodando, a fileira vira o LAÇO logo abaixo. */
.data-especial__trilho {
  --data-w: min(64vw, 300px);       /* a largura de cada cesta: no celular sobram 59 px de cada lado para as vizinhas (designer, 14/10/2026) */
  order: 1;
  position: relative;
  isolation: isolate;               /* a faixa nude fica atrás das fotos, não atrás da página */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  column-gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0 0 28px;
  list-style: none;
}
/* A faixa nude, de ponta a ponta da tela, atrás da metade de baixo das
   fotos e dos nomes: a prateleira das cestas. O js/vitrine.js mede onde fica
   o meio da foto (--data-faixa). */
.data-especial__trilho::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--data-faixa, 50%);
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--nude);
}
.data-especial__item {
  flex: 0 1 var(--data-w);
  min-width: 0;
}
/* O LAÇO: todas as cestas no mesmo lugar, no meio, e o js/vitrine.js empurra
   cada uma para o lado dela ("transform"). A da vez fica no centro; as
   vizinhas, a uma largura de distância, uma de cada lado. */
.data-especial--laco .data-especial__trilho {
  display: grid;
  justify-items: center;
  touch-action: pan-y;              /* de cima para baixo é a página; de lado, a fileira */
  -webkit-user-select: none;
  user-select: none;
}
.data-especial--laco .data-especial__item {
  grid-area: 1 / 1;
  width: var(--data-w);
}
/* A volta da fileira e o "Ver todas" pelo Tab: a que está escondida não
   recebe toque nem clique (js/vitrine.js, desenhar). */
.data-especial__item--longe { pointer-events: none; }

.data-especial__cartao {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--tinta);
  text-align: center;
  text-decoration: none;
}
/* O anel do teclado contorna a cesta inteira (foto, nome e preço). O
   contorno comum ficava por baixo da foto e só aparecia em volta do nome. */
.data-especial__cartao:focus-visible { outline: none; }
.data-especial__cartao:focus-visible::after {
  content: '';
  position: absolute;
  inset: -5px;                      /* na moldura de 5 px: mais para fora, a vizinha (12 px) cobriria */
  border: 2px solid var(--cobre-escuro);
  border-radius: 3px;
  pointer-events: none;
}
.data-especial__foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;              /* a mesma moldura da grade: o enquadramento da dona vale igual */
  overflow: hidden;
  background: var(--nude);
  border-radius: 2px;
  /* A moldura de papel: na faixa nude, a foto se solta com uma borda seda. */
  box-shadow: 0 0 0 5px var(--seda);
}
.data-especial__foto img,
.data-especial__foto .foto-vazia {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.data-especial__foto img {
  -webkit-user-drag: none;          /* arrastar a fileira não arrasta a foto */
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
/* O nome tem sempre o lugar de duas linhas e encosta no preço: lado a lado,
   os preços ficam na mesma altura (um nome de uma linha e outro de duas
   deixavam os preços desencontrados), e no laço a altura não pula quando a
   cesta da vez troca. */
.data-especial__legenda {
  --data-nome: 1.12rem;
  display: grid;
  grid-template-rows: minmax(calc(var(--data-nome) * 1.22 * 2), auto) auto;
  justify-items: center;
  align-items: end;
  gap: 4px;
  margin-top: 16px;
  transition: opacity .45s ease;
}
.data-especial__nome {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;            /* no máximo duas linhas: as fotos ficam na mesma altura */
  overflow: hidden;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: var(--data-nome);
  line-height: 1.22;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.data-especial__preco {
  font-size: .95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (pointer: fine) {
  .data-especial__cartao:hover .data-especial__foto img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
}
/* No celular aparece uma cesta por vez, com um pedaço igual das vizinhas:
   só a da vez mostra o nome e o preço (o da vizinha sairia cortado). */
.data-especial--uma .data-especial__item:not(.data-especial__item--vez) .data-especial__legenda { opacity: 0; }
/* O nome da que chega aparece na segunda metade do deslize, com a foto já
   perto do meio: antes ele surgia cortado na beirada da tela. O atraso é a
   metade do tempo do deslize (js/vitrine.js); o da que sai some na hora. */
.data-especial--uma .data-especial__item--vez .data-especial__legenda { transition-delay: var(--nome-atraso, 0ms); }

/* O último cartão, quando a data tem mais cestas do que a fileira leva: a
   mesma moldura, em papel, com o convite escrito dentro. */
.data-especial__todas .data-especial__foto {
  display: grid;
  place-items: center;
  padding: 18px;
  background: var(--seda);
  box-shadow: inset 0 0 0 1px rgba(63, 49, 40, .28), 0 0 0 5px var(--seda);
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--tinta);
  text-wrap: balance;
  transition: background-color .45s ease;
}
.data-especial__todas .data-especial__foto > span {
  display: grid;
  justify-items: center;
  gap: 12px;
  transition: opacity .45s ease;
}
/* No celular o convite segue a regra do nome: só a da vez escreve. Na
   vizinha sobrava o "tas" cortado na beirada (print de 14/10/2026). */
.data-especial--uma .data-especial__item:not(.data-especial__item--vez) .data-especial__todas .data-especial__foto > span { opacity: 0; }
.data-especial--uma .data-especial__item--vez .data-especial__todas .data-especial__foto > span { transition-delay: var(--nome-atraso, 0ms); }
/* A seta diz que o cartão leva a outro lugar (achado do designer, 14/10/2026). */
.data-especial__todas svg {
  width: 26px;
  height: 26px;
  color: var(--cobre-escuro);
  transition: transform .45s ease;
}
@media (hover: hover) and (pointer: fine) {
  .data-especial__todas:hover .data-especial__foto { background: #fff; }
  .data-especial__todas:hover svg { transform: translateX(4px); }
}

/* ---------- os traços e as teclas ---------- */

/* Embaixo das fotos: os traços no meio e, embaixo deles, [anterior] [pausar]
   [próxima], também no meio. As setas ficam à vista no celular: arrastar é o
   controle que menos gente usa (estudo da Smashing Magazine apontado no
   r/web_design, pacote do designer de 13/10/2026). No HTML o botão de pausar
   vem antes (teclado, W3C APG); a grade o põe entre as setas. */
.data-especial__controles {
  order: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(3, 44px) minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  row-gap: 20px;
  width: 100%;
}
.data-especial__controles[hidden] { display: none; }
.data-especial__passos {
  grid-row: 1;
  grid-column: 1 / -1;
  justify-self: center;
  display: flex;
  gap: 6px;
  max-width: 100%;
}
#data-antes { grid-row: 2; grid-column: 2; }
.data-especial__pausa { grid-row: 2; grid-column: 3; }
#data-depois { grid-row: 2; grid-column: 4; }

/* A largura vai em "width", e não em "flex-basis": a fileira de traços se
   mede pelo conteúdo (com "flex-basis" o traço vazio contava como 8 px).
   Com muitas cestas na tela estreita, cada traço encolhe até 8 px. */
.data-especial__passo {
  flex: 0 1 auto;
  width: 26px;
  min-width: 8px;
  height: 2px;
  background: rgba(63, 49, 40, .18);
  overflow: hidden;
}
.data-especial__passo i {
  display: block;
  height: 100%;
  background: var(--cobre-escuro);
  transform: scaleX(0);
  transform-origin: left center;
}
/* As que já passaram ficam cheias; a da vez, parada, também (mostra onde está). */
.data-especial__passo--feito i,
.data-especial__passo--vez i { transform: scaleX(1); }
/* Rodando, o traço da vez enche no tempo da cesta: é o relógio da troca (o
   js/vitrine.js anda a fileira quando esta animação termina). */
.data-especial--rodando .data-especial__passo--vez i {
  animation: data-enche var(--data-tempo, 6s) linear both;
}
.data-especial--espera .data-especial__passo--vez i { animation-play-state: paused; }
@keyframes data-enche {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* As teclas: quadradas, com um fio em volta (o mesmo raio do botão). */
.data-especial__tecla {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;                     /* o mínimo de toque */
  padding: 0;
  border: 1px solid rgba(63, 49, 40, .3);
  border-radius: 2px;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, transform .2s ease;
}
.data-especial__tecla svg { width: 18px; height: 18px; }
.data-especial__pausa svg { width: 14px; height: 14px; }
.data-especial__tecla:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .data-especial__tecla:hover { background: rgba(63, 49, 40, .06); border-color: rgba(63, 49, 40, .55); }
}
.data-especial__pausa-toca { display: none; }
/* Parada, o botão mostra o "tocar". (O nome que o leitor de tela lê muda
   junto, "Pausar…" / "Ligar…", como pede o W3C APG para o botão de pausar
   carrossel; por isso sem aria-pressed, que diria "Ligar, pressionado".) */
.data-especial__pausa[data-parada] .data-especial__pausa-pausa { display: none; }
.data-especial__pausa[data-parada] .data-especial__pausa-toca { display: block; }

/* ---------- a chegada (uma vez, quando o bloco aparece) ----------
   O js/vitrine.js liga o "--anima" ao montar (só com movimento liberado),
   o "--entrou" quando o título aparece, o "--fotos" quando a fileira
   aparece, e tira os três quando a chegada acaba: daí em diante valem só
   as regras de cima. */
.data-especial--anima .data-especial__palavra > span { transform: translate3d(0, 112%, 0); }
.data-especial--anima.data-especial--entrou .data-especial__palavra > span {
  transform: none;
  transition: transform 1.1s var(--data-curva) calc(var(--w, 0) * 90ms);
}
.data-especial--anima :is(.data-especial__frase, .data-especial__prazo, .data-especial__legenda, .data-especial__controles, .data-especial__botao) { opacity: 0; }
.data-especial--anima.data-especial--entrou :is(.data-especial__frase, .data-especial__prazo) {
  opacity: 1;
  transition: opacity .9s ease var(--data-atraso, 0ms);
}
/* A parte de baixo conta o tempo a partir das fotos, não do título. O
   --data-depois (js/vitrine.js) é a espera quando as duas chegam juntas. */
.data-especial--anima.data-especial--fotos :is(.data-especial__legenda, .data-especial__controles, .data-especial__botao) {
  opacity: 1;
  transition: opacity .9s ease calc(var(--data-atraso, 0ms) + var(--data-depois, 0ms));
}
.data-especial__frase { --data-atraso: 380ms; }
.data-especial__prazo { --data-atraso: 500ms; }
.data-especial__legenda { --data-atraso: 700ms; }
.data-especial__controles { --data-atraso: 850ms; }
.data-especial__botao { --data-atraso: 950ms; }
.data-especial--anima .data-especial__prazo span { background-size: 0% 2px; }
.data-especial--anima.data-especial--entrou .data-especial__prazo span {
  background-size: 100% 2px;
  transition: background-size 1s var(--data-curva) 900ms;
}
/* A foto abre de baixo para cima. A janela vai 6 px além da foto: senão ela
   cortaria a moldura seda (box-shadow) depois de aberta. */
.data-especial--anima .data-especial__foto { clip-path: inset(100% -6px -6px -6px); }
.data-especial--anima.data-especial--fotos .data-especial__foto {
  clip-path: inset(-6px);
  transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1) calc(var(--c, 0) * 150ms + 120ms + var(--data-depois, 0ms));
}

@media (min-width: 700px) {
  .data-especial { padding: 96px 0 88px; }
  .data-especial__grade { gap: 46px; }
  .data-especial__texto { gap: 20px; }
  .data-especial__titulo { font-size: clamp(5.5rem, 12vw, 8.5rem); }
  .data-especial__frase { max-width: 44ch; font-size: 1.06rem; }
  .data-especial__prazo { font-size: .95rem; }
  /* Três cestas inteiras à vista, a da vez no meio. */
  .data-especial__trilho {
    --data-w: clamp(200px, 26vw, 300px);
    column-gap: clamp(24px, 3vw, 40px);
    padding-bottom: 34px;
  }
  .data-especial__legenda { --data-nome: 1.2rem; }
  .data-especial__passo { width: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .data-especial__botao,
  .data-especial__tecla,
  .data-especial__legenda,
  .data-especial__todas .data-especial__foto,
  .data-especial__todas .data-especial__foto > span,
  .data-especial__todas svg,
  .data-especial__foto img { transition: none; }
  .data-especial__cartao:hover .data-especial__foto img { transform: scale(var(--zoom, 1)); }
  .data-especial__botao:active,
  .data-especial__tecla:active { transform: none; }
}

/* --------------------------------------------------------------------------
   4) SEÇÃO E FILTROS
   --------------------------------------------------------------------------
   Título e texto no eixo da página, com muito ar em volta (o porquê está
   logo abaixo). Os filtros viram abas e campos de linha. ------------------ */

/* CENTRALIZADO E COM AR.
   Na pesquisa, título de seção de marca de luxo é serifa, no eixo da
   página, com um parágrafo curto e muito espaço em volta (Diptyque). Espaço
   em branco é o sinal mais barato de "caro": diz que ninguém está com pressa
   de te vender nada. */
.secao {
  text-align: center;
  padding: 92px 0 38px;
}
.secao__titulo {
  font-weight: 500;   /* a serifa num peso só em todo o site (era 400 só aqui: 20 KB a mais) */
  font-size: clamp(2.2rem, 7vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--tinta);
  margin: 0;
}
.secao__texto {
  margin: 18px auto 0;
  max-width: 46ch;
  font-size: 1rem;
  color: var(--tinta-suave);
}

/* Campos com linha embaixo, não caixa: é o formulário de papelaria fina. A
   linha tem 3,77:1 sobre a seda — o mínimo para campo é 3:1. */
.campo-busca input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--borda-campo);
  border-radius: 0;
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: .95rem;
  box-shadow: none;
}
/* O foco dos campos. O CSS base apaga o contorno e põe um brilho cobre; a
   regra de cima zera o brilho — e o campo focado ficava igual ao parado
   (achado no teste de teclado). Agora é o mesmo anel de todo controle. */
.campo-busca input:focus-visible,
.filtros select:focus-visible {
  outline: 2px solid var(--cobre-escuro);
  outline-offset: 4px;
}
.campo-busca svg { color: var(--tinta-suave); }
.campo-busca input::placeholder { color: var(--tinta-suave); opacity: 1; }

/* O FILTRO DE PREÇO (09/10/2026). Era um campo de linha igual à busca, logo
   embaixo dela, e não parecia filtro. Agora é um controle à parte: contorno
   inteiro (3,77:1 sobre a seda; o mínimo de contorno de controle é 3:1),
   fundo nude, o funil na frente, a frase "Filtrar por preço" e a seta no fim.
   A busca continua só com a linha: os dois ficam diferentes à primeira vista.
   O select do navegador continua por baixo: no iPhone abre a roda do próprio
   aparelho. Ligado, a borda e o funil ficam cobre e aparece o "Limpar". */
.filtro-preco {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.filtro-preco__campo {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.filtros .filtro-preco select {
  -webkit-appearance: none;
  appearance: none;
  min-height: 44px;
  padding: 0 40px 0 42px;
  background: var(--nude);
  border: 1px solid var(--borda-campo);
  border-radius: 10px;
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-size: .95rem;
  font-weight: 500;
  box-shadow: none;
  cursor: pointer;
  text-overflow: ellipsis;
}
.filtro-preco__icone,
.filtro-preco__seta {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  color: var(--tinta);
  pointer-events: none;
}
.filtro-preco__icone { left: 14px; }
.filtro-preco__seta { right: 14px; color: var(--tinta-suave); }
.filtro-preco--ligado .filtro-preco__campo select { border-color: var(--cobre-escuro); }
.filtro-preco--ligado .filtro-preco__icone,
.filtro-preco--ligado .filtro-preco__seta { color: var(--cobre-escuro); }
.filtro-preco__limpar {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  color: var(--cobre-escuro);
  font-family: var(--fonte-corpo);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.filtro-preco__limpar:focus-visible {
  outline: 2px solid var(--cobre-escuro);
  outline-offset: 2px;
}
/* Escondido de verdade: um "display" qualquer do CSS venceria o hidden. */
.filtro-preco__limpar[hidden] { display: none; }
/* No computador o filtro fica ao lado da busca, do tamanho do que ele diz
   (a coluna fixa de 240 px do CSS antigo cortava a frase com o "Limpar"). */
@media (min-width: 640px) {
  .filtros { grid-template-columns: minmax(0, 1fr) auto; }
}

/* Categorias como abas com um fio embaixo da escolhida (Diptyque), não
   pílulas. A pílula preta cheia chamava mais atenção que os produtos. */
.categorias { gap: 4px 26px; justify-content: center; }
.chip {
  min-height: 44px;
  padding: 0 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--tinta-suave);
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .02em;
}
.chip:hover { color: var(--tinta); }
.chip[aria-pressed="true"] {
  background: transparent;
  color: var(--tinta);
  border-bottom-color: var(--cobre);
}
/* A data especial no ar (13/10/2026): entra na fileira logo depois de
   "Todas", com o coração da marca na frente. Mesma cor das outras (uma cor
   só); o coração é o que diz que ela não é uma categoria. */
.chip--data {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip--data svg {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--cobre);
}

.contagem { color: var(--tinta-suave); font-size: .86rem; text-align: center; }

@media (max-width: 699px) {
  .secao { padding: 54px 0 26px; }
  /* No celular as abas rolam de lado: centralizar esconderia a primeira. */
  .categorias { justify-content: flex-start; }
}

/* --------------------------------------------------------------------------
   5) A GRADE E OS CARTÕES
   --------------------------------------------------------------------------
   A foto é o objeto; não há caixa em volta dela. O cartão antigo (fundo
   branco, borda, sombra, a categoria em caixa-alta em cima do nome) era o
   "kit de cartões" que a skill aponta como cara de página gerada. Três
   colunas no computador em vez de quatro: foto maior, que é o que vende.
   -------------------------------------------------------------------------- */

.grade {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 14px;
  padding-bottom: 72px;
}
@media (min-width: 700px) {
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 32px; }
}
@media (min-width: 1000px) {
  .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px 44px; padding-bottom: 110px; }
}

.cartao {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.cartao:hover { box-shadow: none; transform: none; }

.cartao__foto {
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--nude);
}

/* Passar o mouse: a foto se aproxima MUITO devagar e muito pouco (2,5%,
   1,2 s). A pesquisa de luxo pede microinteração "lenta e macia"; o zoom
   antigo (5% em meio segundo) era de vitrine de promoção. */
.cartao__foto img {
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
/* Multiplica o zoom que a dona escolheu no painel (--zoom, marca-base.css,
   seção 7): um "scale(1.025)" seco apagaria o enquadramento dela no hover. */
.cartao:hover .cartao__foto img { transform: scale(calc(var(--zoom, 1) * 1.025)); }
@media (prefers-reduced-motion: reduce) {
  .cartao__foto img { transition: none; }
  .cartao:hover .cartao__foto img { transform: scale(var(--zoom, 1)); }
}

/* O texto no eixo da foto, como nas vitrines de luxo: o produto é o
   centro, o nome e o preço são a legenda dele. */
.cartao__corpo {
  padding: 16px 2px 0;
  gap: 3px;
  align-items: center;
  text-align: center;
}

/* A categoria sai do cartão: os filtros lá em cima já dizem a categoria, e
   a tarja em caixa-alta acima de cada nome era um dos vícios da lista. */
.cartao__categoria { display: none; }

.cartao__nome {
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.22;
  color: var(--tinta);
}

/* Preço e "Quero esta" descem juntos para o pé do cartão. Quando um nome
   quebra em duas linhas ("Box Primeiro Encontro"), o preço dele descia e a
   fileira ficava em zigue-zague — a regra antiga (css/novo.css) alinhava o
   botão com margin-top: auto, e o margin-top do "Quero esta" daqui a
   desfazia. Agora a fileira alinha preço E ação. */
.cartao__preco {
  margin-top: auto;
  padding-top: 1px;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: 1rem;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.cartao__preco small {
  display: inline;
  margin-right: 4px;
  font-size: .82rem;
  font-weight: 400;
  color: var(--tinta-suave);
  text-transform: none;
  letter-spacing: 0;
}

/* O "Quero esta" que a dona pediu: discreto, sublinhado, em cobre escuro.
   O cartão inteiro já é o link; isto só diz o que acontece ao tocar. */
.cartao__acao {
  display: inline-block;
  min-height: 0;
  margin-top: 6px;
  padding: 0;
  border: 0;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: .9rem;
  color: var(--cobre-escuro);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.cartao:hover .cartao__acao { color: var(--tinta); }

/* Cestinha com versões (09/10/2026, escolha do Pedro entre texto, miniatura
   e os dois): a primeira foto de cada versão em miniatura redonda, no canto
   de baixo da foto do cartão, uma encostada na outra, com um aro de papel
   para descolar da foto. As regras de cima ("a foto enche o cartão" e
   "aproxima com o mouse") pegariam estas imagens também: por isso os
   seletores mais compridos aqui. */
.cartao__foto .versoes-pilha {
  position: absolute;
  left: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.cartao__foto .versoes-pilha img,
.cartao__foto .versoes-pilha__vazia,
.cartao__foto .versoes-pilha__mais {
  width: 30px;
  height: 30px;
  border: 2px solid var(--seda);
  border-radius: 50%;
  background: var(--nude);
  object-fit: cover;
  transform: none;
  transition: none;
}
.cartao__foto .versoes-pilha > * + * { margin-left: -10px; }
.cartao__foto .versoes-pilha__mais {
  display: inline-grid;
  place-items: center;
  font-family: var(--fonte-corpo);
  font-size: .66rem;
  font-weight: 600;
  color: var(--tinta);
}
.cartao:hover .cartao__foto .versoes-pilha img { transform: none; }
@media (min-width: 700px) {
  .cartao__foto .versoes-pilha { left: 12px; bottom: 12px; }
  .cartao__foto .versoes-pilha img,
  .cartao__foto .versoes-pilha__vazia,
  .cartao__foto .versoes-pilha__mais { width: 32px; height: 32px; }
  .cartao__foto .versoes-pilha > * + * { margin-left: -11px; }
}

/* Destaque: uma etiqueta preta pequena no canto da foto, como a tag da caixa. */
.selo {
  background: var(--tampa);
  color: var(--papel);
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: .75rem;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: 2px;
  box-shadow: none;
}
.selo svg { color: var(--cobre-claro); }

/* O cartão do "Monte sua cesta" sem foto: o desenho de cesta em cobre sobre
   o nude, no lugar do caramelo antigo. */
.cartao--monte .cartao__foto { background: var(--nude); color: var(--cobre-escuro); }

@media (max-width: 699px) {
  .cartao__nome { font-size: 1.02rem; }
  .cartao__preco { font-size: .94rem; }
  .cartao__acao { font-size: .85rem; margin-top: 4px; }
}

/* --------------------------------------------------------------------------
   7) PÁGINA DA CESTINHA
   -------------------------------------------------------------------------- */

.voltar { color: var(--tinta-suave); font-weight: 500; }
.voltar:hover { color: var(--tinta); }

.produto__foto {
  border: 0;
  box-shadow: none;
  border-radius: var(--raio);
  background: var(--nude);
}

.produto__categoria {
  background: var(--nude);
  color: var(--tinta);
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: .8rem;
  letter-spacing: .02em;
  text-transform: none;
  border-radius: 2px;
}

.produto h1 {
  font-weight: 500;
  font-size: clamp(1.9rem, 5.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--tinta);
}

/* O preço na cor do logo (pedido do Pedro, 26/09). O cobre sobre a seda dá
   3,22:1 — só vale para texto GRANDE (24 px ou mais pede 3:1). Por isso o
   tamanho não desce de 24 px em tela nenhuma; a linha pequena de "itens a
   mais" embaixo dele continua em tinta suave. */
.produto__preco {
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: max(1.5rem, 24px);
  color: var(--cobre);
  font-variant-numeric: tabular-nums;
}

.produto__descricao { color: var(--tinta-suave); }

/* AS VERSÕES DA CESTINHA (09/10/2026): o nome da escolhida escrito, uma
   miniatura de cada versão com o nome embaixo, a escolhida com um anel cobre
   POR FORA (o mesmo das miniaturas das fotos; cobre sobre a seda dá 3,22:1, o
   mínimo de contorno de controle é 3:1) e, embaixo, a frase do que muda.
   O rádio de verdade fica escondido, mas continua focável pelo teclado.
   O produto é a referência de posição da troca cruzada de fotos: a coluna
   antiga fica parada por cima da nova, dentro dele, enquanto some. */
.produto { position: relative; }
.versoes {
  border: 0;
  margin: 16px 0 8px;
  padding: 0;
  min-width: 0;
}
.versoes__rotulo {
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--fonte-corpo);
  font-size: .92rem;
  font-weight: 500;
  color: var(--tinta-suave);
}
.versoes__rotulo strong { color: var(--tinta); font-weight: 500; }
.versoes__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}
.versao__escolha {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
}
.versao {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  width: 64px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.versao__foto {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--nude);
  box-shadow: 0 0 0 1px var(--fio);
  transition: box-shadow .2s ease;
}
.versao__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.versao__nome {
  max-width: 100%;
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
  color: var(--tinta-suave);
  overflow-wrap: anywhere;
}
.versao__escolha:checked + .versao .versao__foto {
  box-shadow: 0 0 0 2px var(--seda), 0 0 0 4px var(--cobre);
}
.versao__escolha:checked + .versao .versao__nome { color: var(--tinta); font-weight: 500; }
.versao__escolha:focus-visible + .versao .versao__foto {
  outline: 2px solid var(--cobre-escuro);
  outline-offset: 6px;
}
@media (hover: hover) and (pointer: fine) {
  .versao__escolha:not(:checked) + .versao:hover .versao__foto { box-shadow: 0 0 0 1px var(--borda-campo); }
}
@media (prefers-reduced-motion: reduce) {
  .versao__foto { transition: none; }
}
.versoes__nota {
  margin: 12px 0 0;
  font-size: .9rem;
  color: var(--tinta-suave);
}

/* Blocos planos: um filete em cima separa, sem caixa dentro de caixa. */
.bloco {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fio);
  border-radius: 0;
  box-shadow: none;
  padding: 22px 0 6px;
}
.bloco h2 {
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--tinta);
}
.bloco h2 svg { color: var(--cobre); }

/* A lista respirava demais no computador (~48 px por item): com a linha
   plana, sem caixa em volta, o espaço entre itens pode ser bem menor. */
.itens { gap: 4px; }
.itens li { padding: 5px 0; }

.itens li::before {
  background-color: var(--nude);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5A2E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* Itens a mais: linhas com divisória, não cartões empilhados. */
#bloco-extras > div { gap: 0; }
.extra {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fio);
  border-radius: 0;
  padding: 10px 0;
}
.extra--escolhido {
  background: linear-gradient(90deg, var(--nude), transparent 85%);
  border-bottom-color: var(--fio);
}
.extra__preco { color: var(--cobre-escuro); font-family: var(--fonte-corpo); font-weight: 500; }
.extras__regra--cheio { color: var(--cobre-escuro); }
.produto__extras { color: var(--tinta-suave); }

.passo__botao {
  background: transparent;
  border: 1px solid var(--borda-campo);
  color: var(--tinta);
}
.passo__botao--mais {
  background: var(--tampa);
  border-color: var(--tampa);
  color: var(--papel);
}
.passo__botao:disabled { opacity: .35; }

/* A barra fixa (no celular, em todas as páginas; no Monte, também no
   computador): papel OPACO com filete, o botão é a caixa. A do CSS antigo
   era creme translúcido com desfoque, e no Monte do computador uma regra
   mais específica dele vencia esta: a barra saía no creme velho. Opaca, o
   texto dela não depende do que passa por trás (com o creme translúcido
   sobre as fotos, a medição deu 4,78:1 — passava raspando). */
.barra-fixa,
.pagina-monte .barra-fixa {
  background: var(--seda);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid var(--fio);
  box-shadow: none;
}

/* Rótulo em frase comum, não em CAIXA-ALTA espaçada — o CSS antigo ainda
   fazia isso aqui ("3 DE 8 ITENS + CESTA"), e rótulo em caixa-alta é um dos
   sinais de página gerada que a frontend-design aponta. */
.barra-total__rotulo {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: .86rem;
  color: var(--tinta-suave);
}
/* A LINHA DO TOTAL, QUE CRESCE (09/10/2026). Antes ela surgia de um quadro
   para o outro e a barra pulava para cima: o Pedro chamou de "sobe seca", e o
   texto ("cestinha + 1 item", pequeno e claro) de "cru". Agora a altura vai de
   zero ao tamanho dela com a opacidade junto; o botão fica no lugar e a barra
   sobe devagar por cima dele. A primeira conta (240 ms, ease-out forte)
   terminava o movimento em uns 110 ms visíveis, medido pelo designer: seco de
   novo. Agora 340 ms em easeOutCubic (80% do caminho perto de 150 ms, medido). O
   espaço embaixo do texto mora DENTRO da parte que encolhe: margem do lado de
   fora sobraria com a linha fechada. Pesquisa: pacote do designer de
   09/10/2026, "barra, filtro e versões" (a folha de quadros da barra antiga). */
.barra-conta {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 340ms cubic-bezier(.33, 1, .68, 1),
              opacity 260ms cubic-bezier(.33, 1, .68, 1);
}
.barra-conta__dentro { min-height: 0; overflow: hidden; }
.barra-fixa--com-conta .barra-conta { grid-template-rows: 1fr; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .barra-conta { transition: none; }
}

/* Seletores com ".barra-extras" na frente: o CSS antigo (estilo.css) pinta
   todo "span" da linha de cinza pequeno em minúsculas, e venceria. */
.barra-fixa .barra-extras {
  align-items: center;
  margin: 0;
  padding-bottom: 10px;
}
.barra-extras .barra-extras__texto {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-transform: none;
}
.barra-extras .barra-extras__rotulo {
  font-family: var(--fonte-corpo);
  font-size: .92rem;
  font-weight: 500;
  color: var(--tinta);
  text-transform: none;
}
.barra-extras .barra-extras__conta {
  font-size: .76rem;
  color: var(--tinta-suave);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.barra-extras .barra-extras__total {
  font-family: var(--fonte-corpo);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Celular estreito (320 px): "Cestinha + 3 itens a mais" quebrava em duas
   linhas e a barra chegava a 152 px numa tela de 640 (medido pelo designer). */
@media (max-width: 340px) {
  .barra-extras .barra-extras__rotulo { font-size: .84rem; }
  .barra-extras .barra-extras__total { font-size: 1.12rem; }
}

/* A folga no pé da página acompanha a altura de verdade da barra (medida pelo
   js/anim.js em --altura-barra): com a linha do total aberta, a barra passa de
   73 para 128 px, e a folga fixa de 112 px deixava o último link do rodapé
   embaixo dela (achado do revisor, 09/10/2026). Só onde a barra existe. */
@media (max-width: 899px) {
  .com-barra-fixa .rodape { padding-bottom: calc(var(--altura-barra, 112px) + 20px); }
}

/* --------------------------------------------------------------------------
   7b) AS FOTOS DA CESTINHA (08/10/2026)
   --------------------------------------------------------------------------
   Com duas fotos ou mais, a foto vira um trilho que a cliente arrasta (a
   rolagem do próprio navegador, que encaixa uma foto por vez) e ganha as
   miniaturas, numa coluna à ESQUERDA da foto (Baymard: miniaturas, não
   bolinhas; a Giuliana Flores usa a coluna). Embaixo não dá: no celular elas
   empurrariam o preço para trás da barra do WhatsApp; no computador a coluna
   da foto, que fica grudada no topo enquanto a página rola, passaria de 631
   px e as miniaturas ficariam escondidas num notebook de 1366 x 768 (a
   janela útil tem uns 640). Na lateral, a foto tem o mesmo tamanho de antes.
   -------------------------------------------------------------------------- */

.galeria {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 8px;
}
.galeria .produto__foto { max-width: none; margin: 0; border-radius: 0; }

.galeria__palco { position: relative; min-width: 0; }

.galeria__trilho {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--raio);
  background: var(--nude);
}
.galeria__trilho::-webkit-scrollbar { display: none; }

.galeria__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* O trilho corta o que passa da borda, inclusive o contorno do foco. Por
   padrão o anel vai por DENTRO da foto, o que vale em qualquer navegador.
   Onde existe :has(), ele vai para a moldura em volta, que não corta nada.
   (Antes o anel de dentro era apagado para todos, e navegador sem :has()
   ficava sem anel nenhum: achado do revisor, 09/10/2026.) */
.galeria .produto__foto--abre:focus-visible {
  outline: 3px solid var(--cobre-escuro);
  outline-offset: -3px;
}
@supports selector(:has(a)) {
  .galeria .produto__foto--abre:focus-visible { outline: none; }
  .galeria__palco:has(.produto__foto--abre:focus-visible) {
    outline: 2px solid var(--cobre-escuro);
    outline-offset: 3px;
    border-radius: var(--raio);
  }
}

/* As setas: só onde existe mouse. No celular a cliente arrasta. */
.galeria__seta {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(247, 241, 235, .94);
  color: var(--tinta);
  box-shadow: 0 2px 10px rgba(28, 23, 20, .16);
  cursor: pointer;
  transition: opacity .25s ease;
}
.galeria__seta svg { width: 20px; height: 20px; }
.galeria__seta--antes { left: 10px; }
.galeria__seta--depois { right: 10px; }
/* Sem ter para onde ir, a seta some — mas continua sendo um botão
   (aria-disabled, não disabled): quem chegou nela pelo teclado não perde o
   lugar, e ela reaparece apagada enquanto estiver com o foco. */
.galeria__seta[aria-disabled="true"] { opacity: 0; pointer-events: none; }
.galeria__seta[aria-disabled="true"]:focus-visible { opacity: .55; }
@media (hover: none), (pointer: coarse) {
  .galeria__seta { display: none; }
}

/* As miniaturas. A escolhida ganha o anel de cobre por FORA (5,23:1 sobre
   o papel de seda) — por dentro ele brigaria com as cores de cada foto. A
   fila tem a altura da foto: com mais fotos do que cabem, ela rola. */
.galeria__palco { grid-column: 2; grid-row: 1; }
.galeria__miniaturas { grid-column: 1; grid-row: 1; position: relative; min-width: 0; }
.galeria__fila {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px;
  overflow-y: auto;
  scrollbar-width: none;
}
.galeria__fila::-webkit-scrollbar { display: none; }
.galeria__mini {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
  background: var(--nude);
  cursor: pointer;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .2s ease;
}
.galeria__mini img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galeria__mini[aria-current="true"] { outline-color: var(--cobre-escuro); }
/* 3 + 1 = os 4 px de folga da fila: com 2 de distância, 1 px do anel era
   cortado pela borda da fila (ela rola, então corta o que passa). */
.galeria__mini:focus-visible { outline: 3px solid var(--tinta); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
  .galeria__mini:not([aria-current="true"]):hover { outline-color: var(--fio); }
}

/* Celular e tablet: a foto com a mesma largura de antes (38% da altura da
   tela, em 4:5), e o par (miniaturas + foto) no meio da tela. */
@media (max-width: 899px) {
  .galeria {
    grid-template-columns: 52px minmax(0, calc(38vh * .8));
    justify-content: center;
  }
}
@media (max-width: 899px) and (max-height: 520px) {
  .galeria { grid-template-columns: 52px minmax(0, 220px); }
}

/* Computador: a coluna da foto ganha a largura das miniaturas (420 + 80),
   para a foto continuar com os 420 px de sempre. Navegador sem :has() fica
   com a coluna de 420 e a foto um pouco menor — nada quebra. */
@media (min-width: 900px) {
  .produto:has(.galeria) { grid-template-columns: minmax(0, 500px) minmax(0, 1fr); }
  .galeria { grid-template-columns: 72px minmax(0, 420px); }
}

/* A FOTO GRANDE com várias fotos: um trilho de tela inteira. */
.foto-grande--varias { padding: 0; place-items: stretch; }
.foto-grande__trilho {
  display: flex;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.foto-grande__trilho::-webkit-scrollbar { display: none; }
.foto-grande__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);   /* ver .foto-grande no estilo.css */
  place-items: center;
  padding: 60px 12px 64px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.foto-grande__seta {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* Escuro, não claro: com foto deitada a seta fica POR CIMA da foto, e a
     branca num círculo claro sobre foto branca dava 1,03:1 (some). Com a
     tampa a 62%: 4,99:1 sobre foto branca, 17,3:1 sobre o véu (medido). */
  background: rgba(28, 23, 20, .62);
  color: #fff;
  cursor: pointer;
}
.foto-grande__seta svg { width: 24px; height: 24px; }
.foto-grande__seta--antes { left: 14px; }
.foto-grande__seta--depois { right: 14px; }
.foto-grande__seta[aria-disabled="true"] { opacity: .25; cursor: default; }
.foto-grande__seta[aria-disabled="true"]:focus-visible { opacity: .6; }
.foto-grande__seta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
@media (hover: none), (pointer: coarse) {
  .foto-grande__seta { display: none; }
}
.foto-grande__contador {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  margin: 0;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(239, 230, 220, .16);
  color: #fff;
  font-family: var(--fonte-corpo);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .galeria__seta,
  .galeria__mini { transition: none; }
}

/* --------------------------------------------------------------------------
   8) MONTE SUA CESTA E COMO FUNCIONA
   -------------------------------------------------------------------------- */

.item-monte {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--fio);
  border-radius: 0;
  box-shadow: none;
}
.item-monte.escolhido {
  background: linear-gradient(90deg, var(--nude), transparent 85%);
  border-color: var(--fio);
}
.item-monte__preco { color: var(--cobre-escuro); font-family: var(--fonte-corpo); font-weight: 500; }

.barra-total__valor { font-family: var(--fonte-corpo); font-weight: 500; color: var(--tinta); }

/* --------------------------------------------------------------------------
   8b) O RODAPÉ NÃO PULA QUANDO O CONTEÚDO CHEGA (05/10/2026)
   --------------------------------------------------------------------------
   O miolo da cestinha, do Monte e do "Como funciona" vem do banco. Enquanto
   ele não chegava, a página era só o cabeçalho e o rodapé; quando chegava,
   o rodapé era empurrado tela abaixo. Pulo de layout medido na 1ª visita em
   4G lento: 0,505 na cestinha, 0,674 no Monte e 0,657 no "Como funciona"
   (o bom é até 0,1), e continuava assim com o banco demorando.
   Com o miolo ocupando pelo menos uma tela desde o começo, o rodapé já
   nasce abaixo da dobra: não há o que pular, com o banco rápido ou lento.
   (svh = a altura da tela do celular com as barras do navegador à mostra.)
   Na vitrine não precisa: a capa já ocupa a primeira tela.
   -------------------------------------------------------------------------- */
#principal { min-height: 100vh; min-height: 100svh; }
.tampa ~ #principal { min-height: 0; }

/* --------------------------------------------------------------------------
   9) RODAPÉ — o fundo da caixa
   --------------------------------------------------------------------------
   O Pedro achou o rodapé antigo "péssimo" (26/09): uma pilha centralizada,
   sem título nem grupo. PESQUISA (lojas abertas no navegador): Diptyque, Le
   Labo, Dengo e Bloom & Wild usam COLUNAS COM TÍTULO, texto à esquerda, um
   bloco de atendimento com horário e botão de contato, e uma linha final
   com o © e o que é interno. NN/g: agrupar com títulos que mostram a
   hierarquia, letra legível. Baymard: seções com nome claro, links diretos
   para entrega e trocas, e o interno (Painel da loja) longe dos caminhos
   da cliente.

   Continua preto — o fundo da caixa, como a Dengo —, com o grão do
   papelão e o filete cobre em cima, os mesmos da marca.
   Cores medidas sobre o preto: papel 14,40:1 (links), cobre claro 7,54:1
   (títulos), papel suave 7,84:1 (horário e ©).
   -------------------------------------------------------------------------- */

.rodape {
  position: relative;
  isolation: isolate;
  margin-top: 0;
  padding-top: 72px;
  background: var(--tampa);
  color: var(--papel);
  border-top: 0;
  text-align: left;
  font-size: .95rem;
}
/* O grão do papelão, igual ao da marca. */
.rodape::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .07;
  background-image: var(--grao);
  pointer-events: none;
}
/* O filete cobre onde o papel encontra o fundo da caixa. */
.rodape::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cobre) 18%, var(--cobre-claro) 50%, var(--cobre) 82%, transparent);
  opacity: .8;
  pointer-events: none;
}

.rodape__grade {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.15fr 1.35fr;
  gap: 40px 48px;
  padding-bottom: 56px;
}

.rodape__logo {
  display: block;
  height: 30px;
  width: auto;
  margin: 0;
}
.rodape__olho {
  max-width: 16ch;
  margin: 16px 0 0;
  font-family: var(--fonte-titulo);
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--papel);
}

/* Título de coluna: frase comum em cobre claro — nada de caixa-alta
   espaçada (sinal de página gerada). */
.rodape__titulo {
  margin: 0 0 8px;
  font-family: var(--fonte-corpo);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .01em;
  color: var(--cobre-claro);
}

.rodape ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Cada link com 40 px de altura: dá para tocar com o dedo sem acertar o
   vizinho, e a lista continua compacta. */
.rodape .rodape__coluna a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0;
  color: var(--papel);
  font-weight: 400;
  text-decoration: none;
}
.rodape .rodape__coluna a:hover {
  color: var(--cobre-claro);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.rodape__horario {
  max-width: 30ch;
  margin: 0;
  line-height: 1.6;
  color: var(--papel-suave);
}
/* O contato é um botão de contorno (como o "Contact us" da Diptyque): o
   botão cheio, em cobre, fica para a ação principal de cada página.
   "a." na frente de propósito: a regra antiga ".rodape a" do estilo.css
   (classe + elemento) vencia a classe sozinha e pintava a letra de marrom
   escuro sobre o preto, com o ícone fora do lugar (visto no print). */
.rodape a.rodape__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 18px;
  padding: 0 20px;
  border: 1px solid var(--cobre-claro);
  border-radius: 2px;
  color: var(--papel);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}
.rodape a.rodape__whatsapp svg { width: 18px; height: 18px; flex: none; }
.rodape a.rodape__whatsapp:hover { background: var(--papel); color: var(--tampa); }

/* A linha final: o © e o Painel da loja, separados dos caminhos da cliente. */
.rodape__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  padding-top: 12px;
  padding-bottom: 20px;
  /* O fio de cima só na largura do TEXTO (a caixa de conteúdo), não na
     folga lateral do container: com border-top ele passava 24 px do
     alinhamento das colunas em cada lado. */
  background: linear-gradient(#3D3632, #3D3632) top / 100% 1px no-repeat;
  background-origin: content-box;
  background-clip: content-box;
  color: var(--papel-suave);
  font-size: .85rem;
}
.rodape__base p { margin: 0; }
.rodape a.rodape__painel {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--papel-suave);
  font-weight: 400;
  text-decoration: none;
}
.rodape a.rodape__painel:hover { color: var(--papel); text-decoration: underline; text-underline-offset: 4px; }

.rodape :focus-visible { outline-color: var(--cobre-claro); }

/* Tablet: duas colunas. */
@media (max-width: 899px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}
/* Celular: a marca e o contato na largura toda; as duas listas lado a lado,
   como a Dengo. Poucos links: nada de sanfona escondendo o que cabe à vista. */
@media (max-width: 599px) {
  .rodape { padding-top: 52px; }
  .rodape__grade { gap: 32px 20px; padding-bottom: 40px; }
  .rodape__marca,
  .rodape__contato { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   10) MOVIMENTO REDUZIDO
   --------------------------------------------------------------------------
   O gesto da rolagem (js/tampa.js) não liga com movimento reduzido, e o
   movimento que roda sozinho na capa tem as regras dele na seção 3. Aqui, só
   a troca de cor do botão do rodapé (a do botão principal está no
   marca-base.css). */
@media (prefers-reduced-motion: reduce) {
  .rodape a.rodape__whatsapp { transition: none; }
}