/* ═══════════════════════════════════════════════════════════════════
   ABABI & MIMOS — sistema visual v3
   Direção: loja de verdade, a foto manda.

   PALETA: preto + ROSA CREME + TERRA, sobre papel rosé acinzentado.
   A estrutura preta vem do restyle da Angel & Home (gosto do Gui já
   aprovado e no ar), mas o acento dourado de lá foi trocado por rosa
   creme a pedido dele. O rosa também é o da moldura do logotipo dela,
   então tem origem na marca.
   O TERRA é a terceira cor, de 13/09: com preto e rosa só existiam dois
   estados, claro demais ou preto absoluto, e faltava o degrau do meio.
   ⛔ BANIDOS: o malva/roxo da v1 (ele odiou), o dourado da v3 inicial e
      FUNDO CREME/BEGE (regra `cream-palette` do impeccable — ver o
      comentário do `--papel`).

   ⚠️ O rosa creme é CLARO: serve para fio, ornamento, número e fundo.
   Para TEXTO existe `--rosa-esc`, que é o único tom que passa no
   contraste 4.5:1 sobre o papel. Nunca escrever com `--rosa` puro.

   O que diferencia daqui da Angel: lá é Playfair em tudo. Aqui o
   display é serifado e a ESTRUTURA (rótulo, menu, botão, nome de peça)
   é condensada em caixa alta — é o que dá cara de loja, não de blog.

   Cada seção da página tem tratamento próprio. Cartão pode existir,
   mas não pode ser a única coisa que existe.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* 13/09: o papel ABAIXOU. Antes era quase branco de tela (#FCFAF9) e o
     site inteiro brilhava; o Gui pediu para tirar "esse claro forte".
     Agora o fundo tem cor de papel de verdade e o cartão branco passa a
     SEPARAR do fundo em vez de sumir nele.

     ⚠️ E o tom é ROSÉ ACINZENTADO, não creme/bege. Não é preciosismo: o
     `impeccable` tem uma regra `cream-palette` que reprova fundo creme,
     porque virou a superfície "de bom gosto" padrão de site gerado por
     IA. Testei quatro tons — o que passa é o que tem o azul perto do
     verde (R≥G≈B, matiz do rosa da marca) em vez do bege amarelado
     (R>G>B). Mesma escuridão, origem diferente: este vem da paleta. */
  --papel:     #EDE9E9;
  --papel-2:   #E4DEDE;   /* alternância com um sussurro de rosa */
  --carta:     #FFFFFF;
  --tinta:     #1A1A1A;
  --preto:     #0D0D0D;

  /* ⭐ O TERCEIRO TOM (13/09). Preto e rosa creme sozinhos deixavam a
     página em dois estados: claro demais ou preto absoluto. O terra é um
     marrom quente escuro que quebra as faixas claras sem virar preto:
     ele aquece onde o preto endurece, e é o que dá profundidade ao meio
     da página. Vem do mesmo lugar da marca que o rosa (a moldura do
     logotipo dela tem o rosa sobre marrom). */
  --terra:     #2B2320;
  --terra-2:   #3B302B;   /* fio e hover DENTRO das faixas terra */

  --rosa:      #EFC9C2;   /* decorativo: fio, ornamento, número, fundo */
  --rosa-claro:#F9E7E2;   /* mais leve ainda, para faixa e realce */
  --rosa-esc:  #8F5148;   /* o ÚNICO que serve para TEXTO. Escurecido depois
                             do QA: o tom anterior passava sobre o papel base
                             mas REPROVAVA sobre as superfícies rosadas
                             (3,9:1). Este dá 5,1:1 na mais clara delas. */

  /* ⚠️ Estes três SUBIRAM junto com o escurecimento do papel. Medido
     sobre o papel novo: .72 dá 9,9:1, .65 dá 5,0:1 e .45 dá 2,6:1. Os
     dois primeiros passam em texto; o `--tinta-30` ficou reservado para
     o que é DECORAÇÃO (fio, traço, número de apoio), nunca para uma
     frase que precise ser lida. */
  --tinta-70:  rgba(26,26,26,.72);
  --tinta-50:  rgba(26,26,26,.65);
  --tinta-30:  rgba(26,26,26,.45);
  --claro-72:  rgba(255,255,255,.72);
  --claro-46:  rgba(255,255,255,.46);

  /* fios mais finos que na v3: é parte do "mais delicado" */
  --fio:       rgba(26,26,26,.085);
  --fio-forte: rgba(26,26,26,.18);
  --fio-rosa:  rgba(239,201,194,.72);
  --fio-claro: rgba(255,255,255,.18);

  --erro:      #A8322C;

  /* Newsreader = display serifado. Archivo = estrutura condensada em
     caixa alta. Duas famílias, dois papéis que não se confundem. */
  --serif:  'Newsreader', 'Iowan Old Style', Georgia, serif;
  --estru:  'Archivo', 'Helvetica Neue', Arial, sans-serif;

  --curva: cubic-bezier(.32,.72,0,1);
  --pad: 24px;
  --env: 1480px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--estru);
  font-size:16px; font-weight:400; line-height:1.65;
  font-variation-settings:'wdth' 100;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ⚠️⚠️ ESTA LINHA VALE MAIS DO QUE PARECE (15/09).
   `[hidden]{display:none}` é regra do NAVEGADOR (origem UA), e regra de
   autor SEMPRE vence origem UA — não importa a especificidade. Ou seja:
   qualquer `.classe{ display:flex }` nossa faz um elemento com o
   atributo `hidden` continuar VISÍVEL na tela.

   Não é teoria: no formulário, `campoFaixa.hidden = true` não escondia
   nada, porque `.campo{ display:flex }` atropelava. O resultado era o
   campo "Quantidade estimada" aparecendo no modo Presente pessoal com
   a lista DESABILITADA — parecia um botão quebrado, e foi exatamente
   assim que o Gui reportou. O mesmo valia para `.fp-minis`.

   O `!important` aqui é legítimo: é o jeito recomendado de devolver ao
   atributo `hidden` a força que o HTML promete. Quem precisa mostrar um
   elemento tira o atributo, não briga com o CSS. */
[hidden]{ display:none !important; }

img, video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--rosa); color:var(--tinta); }

.env{ width:100%; max-width:var(--env); margin:0 auto; padding:0 var(--pad); }
.env-estreito{ width:100%; max-width:1000px; margin:0 auto; padding:0 var(--pad); }

/* ══ TIPOGRAFIA ════════════════════════════════════════════════════ */
.t1{
  font-family:var(--serif); font-weight:200;
  font-size:clamp(2.7rem, 7.4vw, 6.6rem);
  line-height:1.08; letter-spacing:-.03em;
  font-variation-settings:'opsz' 72;
}
.t2{
  font-family:var(--serif); font-weight:200;
  /* 1.16 e não 1.08: a máscara do SplitText recorta na caixa da
     linha, e com entrelinha apertada o topo das letras some. */
  font-size:clamp(2rem, 4.8vw, 3.9rem);
  line-height:1.16; letter-spacing:-.022em;
  font-variation-settings:'opsz' 48;
}
.t3{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.25rem, 1.9vw, 1.6rem);
  line-height:1.2; letter-spacing:-.015em;
}
/* o itálico serifado é o único traço "afetivo" que sobrou da marca */
.italico{ font-style:italic; }
.rosa{ color:var(--rosa); }

/* caixa alta condensada: rótulo, nome de peça, botão, menu */
.cond{
  font-family:var(--estru);
  font-variation-settings:'wdth' 82;
  font-weight:600; text-transform:uppercase; letter-spacing:.14em;
}

.texto{ font-size:clamp(.97rem, 1.05vw, 1.06rem); line-height:1.72; color:var(--tinta-70); max-width:58ch; }
.texto-min{ font-size:.85rem; line-height:1.65; color:var(--tinta-50); }

/* rótulo de seção: fio + texto. NUNCA pílula em cima de H1. */
/* ⛔ O RÓTULO NÃO TEM MAIS O FIO NA FRENTE.
   Veredito do Gui em 14/09, dado duas vezes apontando seções
   diferentes: "tira esse traço, é coisa de IA". O fiozinho de 38px
   antes de um rótulo em caixa alta é assinatura de página gerada, e
   isso vale para os 14 rótulos do site, não só para os que ele viu.

   O `display:flex` fica: é o que permite centralizar o rótulo nas
   seções centradas (`.cat-topo .rotulo{ justify-content:center }`). */
.rotulo{
  display:flex; align-items:center;
  font-family:var(--estru); font-variation-settings:'wdth' 85;
  font-size:13px; font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  color:var(--pulso-a); margin-bottom:22px;
  /* os dois pontos do pulso, para o fundo CLARO */
  --pulso-a:var(--rosa-esc);
  --pulso-b:#6E3B34;
  animation:pulsoRotulo 3.8s ease-in-out infinite;
}

/* ── O PULSO DOS RÓTULOS ───────────────────────────────────────────
   ⚠️⚠️ O ciclo é UM SÓ, mas os dois tons saem de variáveis, porque cada
   fundo exige um sentido diferente:

   · sobre o papel claro o tom é o `--rosa-esc`, o único rosa que passa
     em contraste ali (foi escurecido para isso em 13/09). O pulso vai
     para um tom MAIS ESCURO: clarear reprovaria a legibilidade em
     metade do tempo. Medido: 5,07:1 no ponto claro, 7,46:1 no escuro.
   · sobre faixa escura é o contrário: a cor clara é que tem contraste,
     então o pulso vai para o `--rosa-claro`, ainda mais claro (10,1:1 e
     12,9:1 sobre o `--terra`). Escurecer ali seria o mesmo erro
     espelhado.

   ⛔⛔ POR ISSO A COR NÃO PODE SER ESCRITA DENTRO DO `@keyframes`.
   Animação vence declaração normal: com a cor fixa no keyframe, um
   `.etapas .rotulo{ color:var(--rosa) }` de seção seria ignorado e o
   rótulo pulsaria ESCURO SOBRE FUNDO ESCURO. Foi o que aconteceu na
   primeira versão. Seção de fundo escuro redefine `--pulso-a` e
   `--pulso-b`, nunca `color`. */
@keyframes pulsoRotulo{
  0%, 100%{ color:var(--pulso-a); }
  50%     { color:var(--pulso-b); }
}
/* o par para QUALQUER rótulo sobre fundo escuro */
.rotulo-claro,
.rotulo-escuro{ --pulso-a:var(--rosa); --pulso-b:var(--rosa-claro); }

@media (prefers-reduced-motion:reduce){
  .rotulo{ animation:none; }
}

/* ornamento — ◆ — : a assinatura que o Gui já usa na Angel & Home */
.ornamento{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:26px 0 0;
}
.ornamento::before, .ornamento::after{
  content:""; height:1px; width:clamp(48px,8vw,112px);
}
.ornamento::before{ background:linear-gradient(90deg, transparent, var(--fio-rosa)); }
.ornamento::after{ background:linear-gradient(90deg, var(--fio-rosa), transparent); }
.ornamento i{ width:6px; height:6px; background:var(--rosa); transform:rotate(45deg); display:block; }
.ornamento-esq{ justify-content:flex-start; }
.ornamento-esq::before{ display:none; }

/* número dourado editorial: estrutura sem caixa. Mesmo recurso que ele
   escolheu para os benefícios da Angel & Home. */
.num{
  font-family:var(--serif); font-weight:200;
  font-size:clamp(2.6rem,5vw,4.2rem); line-height:.85;
  color:var(--rosa);
  font-feature-settings:"lnum";
}

/* ══ BOTÕES — retos, com a divisória do ícone ══════════════════════ */
.bt{
  display:inline-flex; align-items:stretch;
  padding:0; border:none; background:none; cursor:pointer;
  font-family:var(--estru); font-variation-settings:'wdth' 84;
  font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  line-height:1; border-radius:2px; overflow:hidden;
}
.bt span{ padding:21px 32px; display:flex; align-items:center;
  transition:background .45s var(--curva), color .45s var(--curva); }
.bt i{
  display:flex; align-items:center; justify-content:center; width:54px;
  border-left:1px solid currentColor;
  transition:background .45s var(--curva), color .45s var(--curva);
}
.bt i svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.3;
  transition:transform .45s var(--curva); }
.bt:hover i svg{ transform:translateX(4px); }

.bt-tinta{ background:var(--tinta); color:var(--papel); }
/* o primário da página clara é o rosa; o preto vira secundário de peso */
.bt-tinta:hover span, .bt-tinta:hover i{ background:var(--rosa); color:var(--tinta); }
.bt-rosa{ background:var(--rosa); color:var(--tinta); }
.bt-rosa:hover span, .bt-rosa:hover i{ background:var(--tinta); color:var(--rosa); }
.bt-fio{ color:var(--tinta); box-shadow:inset 0 0 0 1px var(--fio-forte); }
.bt-fio:hover span, .bt-fio:hover i{ background:var(--tinta); color:var(--papel); }
.bt-claro{ background:var(--papel); color:var(--tinta); }
.bt-claro:hover span, .bt-claro:hover i{ background:var(--rosa); }
.bt-fio-claro{ color:#fff; box-shadow:inset 0 0 0 1px var(--fio-claro); }
.bt-fio-claro:hover span, .bt-fio-claro:hover i{ background:var(--rosa); color:var(--tinta); }

.link{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--estru); font-variation-settings:'wdth' 86;
  font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  position:relative; padding-bottom:6px; color:var(--tinta);
}
.link::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--rosa); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--curva);
}
.link:hover{ color:var(--rosa-esc); }
.link:hover::after{ transform:scaleX(1); }
.link svg{ width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.4; }

/* ══ NAVEGAÇÃO ═════════════════════════════════════════════════════ */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:100;
  border-bottom:1px solid transparent; color:#fff;
  transition:background .5s var(--curva), border-color .5s var(--curva),
             color .5s var(--curva), transform .5s var(--curva);
}
.barra-in{
  max-width:var(--env); margin:0 auto; padding:0 var(--pad);
  height:74px; display:flex; align-items:center; justify-content:space-between; gap:20px;
  /* ancora do menu centrado, abaixo */
  position:relative;
}
.barra.solida{
  background:rgba(237,233,233,.95);   /* = --papel com véu */
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom-color:var(--fio); color:var(--tinta);
}
.barra.oculta{ transform:translateY(-100%); }
.barra-marca{ display:flex; align-items:center; gap:11px; }
.barra-marca img{
  width:40px; height:40px; object-fit:contain;
  background:#fff; border-radius:50%; padding:3px;
  transition:background .5s var(--curva), padding .5s var(--curva);
}
.barra.solida .barra-marca img{ background:transparent; padding:0; }
.barra-marca b{
  font-family:var(--serif); font-weight:400; font-size:1.08rem; letter-spacing:-.01em;
  white-space:nowrap;
}
/* O menu fica no centro OTICO da barra, e nao no meio do espaco que
   sobra. Antes ele era o item do meio de um `space-between` de tres, e
   quem segurava a terceira ponta era o botao WHATSAPP. Com o botao
   fora (14/09), `space-between` de dois jogaria o menu para a direita.
   Posicionar no centro absoluto resolve sem depender de quantos itens
   existem nas pontas. Abaixo de 1024px ele nao aparece. */
.barra-nav{
  display:flex; align-items:center; gap:32px;
  position:absolute; left:50%; transform:translateX(-50%);
}
.barra-nav a{
  font-family:var(--estru); font-variation-settings:'wdth' 86;
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  opacity:.8; position:relative; padding:5px 0;
  transition:opacity .3s var(--curva), color .3s var(--curva);
}
.barra-nav a:hover{ opacity:1; color:var(--rosa); }
.barra-nav a.atual{ opacity:1; color:var(--rosa); }
.barra-nav a.atual::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--rosa);
}
.burger{ display:none; width:44px; height:44px; position:relative; background:none; border:none; cursor:pointer; flex-shrink:0; }
.burger i{
  position:absolute; left:11px; width:22px; height:1.5px; background:currentColor;
  transition:transform .45s var(--curva), opacity .25s var(--curva);
}
.burger i:nth-child(1){ top:17px; }
.burger i:nth-child(2){ top:22px; }
.burger i:nth-child(3){ top:27px; }
.burger.on i:nth-child(1){ top:22px; transform:rotate(45deg); }
.burger.on i:nth-child(2){ opacity:0; }
.burger.on i:nth-child(3){ top:22px; transform:rotate(-45deg); }

.veu{
  position:fixed; inset:0; z-index:99; background:var(--preto); color:#fff;
  display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--curva), visibility .5s var(--curva);
}
.veu.on{ opacity:1; visibility:visible; }
.veu-nav{ max-width:var(--env); margin:0 auto; width:100%; }
.veu-nav a{
  display:flex; align-items:baseline; gap:20px; padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.9rem,7.4vw,3.2rem); line-height:1;
  opacity:0; transform:translateY(34px);
  transition:opacity .6s var(--curva), transform .6s var(--curva), color .3s var(--curva);
}
.veu-nav a em{
  font-family:var(--estru); font-variation-settings:'wdth' 82; font-style:normal;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; color:var(--rosa);
}
.veu.on .veu-nav a{ opacity:1; transform:none; }
.veu.on .veu-nav a:nth-child(1){ transition-delay:.08s; }
.veu.on .veu-nav a:nth-child(2){ transition-delay:.15s; }
.veu.on .veu-nav a:nth-child(3){ transition-delay:.22s; }
.veu.on .veu-nav a:nth-child(4){ transition-delay:.29s; }
.veu-nav a:hover{ color:var(--rosa); }
.veu-pe{
  max-width:var(--env); margin:44px auto 0; width:100%;
  display:flex; flex-wrap:wrap; gap:10px 30px;
  font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--claro-46);
  opacity:0; transition:opacity .6s var(--curva) .4s;
}
.veu.on .veu-pe{ opacity:1; }

/* ══ RODAPÉ — preto com títulos dourados (igual Angel) ═════════════ */
.rodape{ background:var(--preto); color:var(--claro-72); padding:0 0 0; }
.rodape-topo{
  max-width:var(--env); margin:0 auto; padding:clamp(72px,9vw,116px) var(--pad);
  border-bottom:1px solid rgba(255,255,255,.12); text-align:center;
}
.rodape-topo h2{ color:#fff; max-width:22ch; margin:0 auto; }
.rodape-topo .bt{ margin-top:38px; }
.rodape-in{
  max-width:var(--env); margin:0 auto; padding:clamp(48px,6vw,76px) var(--pad) 0;
  display:grid; grid-template-columns:1.25fr .8fr .8fr 1.15fr; gap:44px;
}
/* sem o bloco de chamada acima (pagina que ja fecha com o dela), o
   rodape precisa do respiro que o `.rodape-topo` dava */
.rodape-in:first-child{ padding-top:clamp(70px,8vw,110px); }
.rodape-marca img{ width:58px; height:58px; object-fit:contain; background:#fff; padding:7px; }
.rodape-marca b{
  display:block; margin-top:18px;
  font-family:var(--serif); font-weight:400; font-size:1.2rem; color:#fff;
}
.rodape p{ font-size:.88rem; line-height:1.75; margin:12px 0 0; max-width:34ch; }
.rodape-tit{
  font-family:var(--estru); font-variation-settings:'wdth' 84;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rosa); margin:0 0 20px;
}
/* ── as colunas são `<details>` ──────────────────────────────────
   No desktop elas nascem abertas (o `base.js` põe o `open`) e nada
   denuncia que são sanfona: o sinal de mais some e o título não recebe
   clique. Quem vira sanfona de verdade é só o celular, lá embaixo. */
.rodape-bloco summary{ list-style:none; pointer-events:none; }
.rodape-bloco summary::-webkit-details-marker{ display:none; }
.rodape-bloco summary i{ display:none; }

.rodape-lista{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.rodape-lista a, .rodape-lista span.fixo{
  font-size:.88rem; color:var(--claro-72); transition:color .3s var(--curva);
}
.rodape-lista a:hover{ color:var(--rosa); }
/* ── coluna de atendimento ────────────────────────────────────────
   Ícone + texto em grade de duas colunas (e não `flex` com `gap`):
   assim a segunda linha de um item longo alinha com a primeira letra,
   não com o ícone. */
.rodape-contato a, .rodape-contato span.fixo{
  display:grid; grid-template-columns:16px 1fr; align-items:start;
  gap:0 10px; line-height:1.5;
}
.rodape-contato i{ display:block; padding-top:2px; }
.rodape-contato svg{ width:13px; height:13px; fill:var(--rosa); }
.rodape-contato span.fixo svg{ fill:rgba(255,255,255,.34); }

/* ── faixa "Nós aceitamos" ────────────────────────────────────────
   As bandeiras são SVG inline (ver `BANDEIRAS` no base.js): nenhuma
   requisição de rede, nenhum salto de layout, e nítidas em qualquer
   tela. ⚠️ O cartão branco de cada selo vem DENTRO do próprio SVG (é
   assim que as marcas oficiais são distribuídas — elas foram desenhadas
   para fundo claro e sobre o preto do rodapé Visa e Diners sumiriam),
   então aqui o `.bandeira` é só a caixa de tamanho: pôr fundo ou sombra
   de novo faria moldura dupla. A proporção 52x33 é a do viewBox 38x24
   das marcas; esticar mudaria o desenho delas. */
.rodape-pag{
  max-width:var(--env); margin:clamp(44px,5vw,64px) auto 0;
  padding:clamp(30px,3.4vw,42px) var(--pad) 0;
  border-top:1px solid rgba(255,255,255,.12); text-align:center;
}
.rodape-pag-tit{
  display:block;
  font-family:var(--estru); font-variation-settings:'wdth' 84;
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--rosa); margin-bottom:18px;
}
.rodape-pag-lista{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.bandeira{ display:block; width:52px; height:33px; }
.bandeira svg{ width:100%; height:100%; display:block; }
/* `.rodape p` já define tamanho, margem e `max-width:34ch` para o
   parágrafo da marca; o seletor com dois níveis vence sem `!important` */
.rodape .rodape-pag-nota{
  margin:18px auto 0; max-width:56ch;
  font-size:.78rem; color:rgba(255,255,255,.5);
}
.rodape-pag-nota b{ color:var(--claro-72); font-weight:500; }

.rodape-fim{
  max-width:var(--env); margin:clamp(48px,6vw,72px) auto 0; padding:24px var(--pad);
  border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.36);
}
.rodape-fim a{ color:var(--rosa); }

/* ══ WHATSAPP ══════════════════════════════════════════════════════ */
/* ══ WHATSAPP FLUTUANTE ════════════════════════════════════════════
   15/09: era um quadrado da cor da tinta com o ícone rosa, encostado
   no canto. Virou o botão que as pessoas já sabem o que é — redondo e
   no verde do WhatsApp (#25D366, a cor da marca deles, não um verde
   escolhido por mim) — e ganhou respiro da borda. */
.zap{
  position:fixed; right:22px; bottom:22px; z-index:98; width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:#25D366; color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:background .4s var(--curva), color .4s var(--curva), transform .4s var(--curva);
}
/* ── o pulso ────────────────────────────────────────────────────────
   Dois anéis verdes que nascem no botão e se abrem para fora, com o
   segundo atrasado em metade do ciclo — assim existe sempre um anel em
   algum ponto da expansão e o chamado não tem buraco.

   Fica em `::before`/`::after` e não no botão: animar o botão em si
   mexeria no alvo do clique. Os anéis não recebem ponteiro. */
.zap::before, .zap::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:#25D366; z-index:-1; pointer-events:none;
  animation:pulsoZap 2.6s var(--curva) infinite;
}
.zap::after{ animation-delay:1.3s; }
@keyframes pulsoZap{
  0%  { transform:scale(1);    opacity:.55; }
  100%{ transform:scale(1.85); opacity:0;   }
}
/* com o cursor em cima o pulso para: quem já achou o botão não precisa
   mais ser chamado */
.zap:hover::before, .zap:hover::after{ animation-play-state:paused; opacity:0; }
.zap svg{ width:23px; height:23px; fill:currentColor; }
.zap:hover{ background:#1FB855; color:#fff; transform:scale(1.06); }

/* ══ SETAS DE ROLAGEM ══════════════════════════════════════════════
   O bloquinho escuro que mora em cima do WhatsApp (15/09, pedido dele).
   Mesmo eixo do botão verde: os `right` de cada largura são calculados
   para que os dois centros fiquem na mesma vertical.

   Fica ABAIXO do `.zap` no `z-index` de propósito: os anéis do pulso
   chegam a 1,85x e passam por trás do bloco, nunca por cima dele. */
.rolar{
  position:fixed; right:29px; bottom:104px; z-index:97;
  display:flex; flex-direction:column; align-items:stretch;
  width:46px; overflow:hidden;
  background:rgba(18,16,16,.88);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.14); border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.28);
  transition:opacity .4s var(--curva), transform .4s var(--curva), visibility .4s var(--curva);
}
/* página que cabe inteira na tela: as duas setas não teriam para onde
   levar, então o bloco inteiro sai */
.rolar.oculto{ opacity:0; visibility:hidden; transform:translateY(10px) scale(.94); }

.rolar-bt{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  height:42px; flex:none;
  display:flex; align-items:center; justify-content:center;
  color:var(--claro-72);
  transition:height .38s var(--curva), opacity .3s var(--curva),
             color .3s var(--curva), background .3s var(--curva);
}
.rolar-bt:hover{ color:var(--rosa); background:rgba(255,255,255,.07); }
.rolar-bt:focus-visible{ outline:2px solid var(--rosa); outline-offset:-3px; }
/* uma seta só no sprite: a de subir é a mesma girada, e a de descer
   também — assim o desenho da ponta é idêntico nas duas */
.rolar-bt svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.5; }
.rolar-cima  svg{ transform:rotate(-90deg); }
.rolar-baixo svg{ transform:rotate(90deg); }

.rolar-fio{ display:block; height:1px; background:rgba(255,255,255,.14); flex:none; }

/* no topo some a de subir, no fim some a de descer — e o fio do meio
   sai junto, senão sobra um risco na borda do bloco */
.rolar.so-baixo .rolar-cima,
.rolar.so-cima  .rolar-baixo{ height:0; opacity:0; pointer-events:none; }
.rolar.so-baixo .rolar-fio,
.rolar.so-cima  .rolar-fio{ display:none; }

/* ══ LUPA ══════════════════════════════════════════════════════════ */
.lupa{
  position:fixed; inset:0; z-index:150; background:rgba(8,8,8,.96);
  display:flex; align-items:center; justify-content:center; padding:4vw;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--curva), visibility .4s var(--curva);
}
.lupa.on{ opacity:1; visibility:visible; }
.lupa img{ max-width:min(92vw,1040px); max-height:88vh; object-fit:contain; }
.lupa-x{
  position:absolute; top:0; right:0; width:64px; height:64px;
  background:none; border:none; cursor:pointer; color:var(--rosa);
  display:flex; align-items:center; justify-content:center;
}
.lupa-x svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.4; }

/* ══ CATÁLOGO — peça, arara e barra de categorias ══════════════════
   Mora aqui porque duas páginas usam: a home (só as 3 primeiras de
   cada categoria) e `catalogo.html` (a categoria inteira). Um lugar
   só para o desenho da peça evita as duas telas divergirem. */
/* ── A BARRA DE CATEGORIAS ─────────────────────────────────────────
   Ela continua `sticky`, mas NÃO fica pendurada o tempo todo: desce
   junto com a barra do topo quando a pessoa rola para baixo e volta
   quando rola para cima (a classe `.oculta` é posta pelo `base.js`, o
   mesmo gatilho que já governava a barra principal). Some junto e volta
   junto, senão sobra um vão de 74px onde a barra do topo estava.

   ⚠️ O `overflow-x:auto` com `overflow-y:hidden` é obrigatório aqui e
   NÃO deve virar `touch-action:pan-x`: essa proíbe o gesto vertical no
   elemento e nos ancestrais. */
.cat-nav{
  position:sticky; top:74px; z-index:60;
  background:rgba(237,233,233,.96);   /* = --papel com véu */
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--fio);
  transition:transform .5s var(--curva), box-shadow .5s var(--curva);
}
/* ⚠️⚠️ O ESCONDER SÓ VALE QUANDO ELA ESTÁ GRUDADA (`.flutuando`).
   `sticky` é assim: enquanto a página não a alcança, ela é um elemento
   NORMAL no fluxo, no lugar dela. Aplicar a translação nesse estado não
   a esconde, ela SOBE por cima da seção de cima. Foi o que aconteceu: a
   barra montava em cima do parágrafo do "Escolha o modelo" ao rolar.

   Por isso as duas classes juntas no seletor. Sem `.flutuando`, rolar
   para baixo não faz nada com ela, que é o certo: ela ainda nem começou
   a acompanhar a rolagem.

   E a distância é calculada, não chutada: a própria altura mais os 74px
   do `top`, que é o quanto ela precisa andar para sair inteira da tela. */
.cat-nav.flutuando.oculta{ transform:translateY(calc(-100% - 80px)); }
/* a sombra só nasce quando ela está de fato flutuando sobre o conteúdo,
   e é rosada em vez de cinza para não sujar o papel */
.cat-nav.flutuando{ box-shadow:0 10px 26px -18px rgba(143,81,72,.45); }

.cat-nav-in{
  position:relative;
  max-width:var(--env); margin:0 auto; padding:0 var(--pad);
  display:flex; align-items:stretch; gap:30px;
  /* centrado quando a fila cabe. O `safe` é obrigatório: num contêiner
     rolável, `center` puro empurra o começo da fila para fora do
     alcance quando ela NÃO cabe, e as primeiras categorias ficam
     impossíveis de alcançar no celular. Com `safe`, o navegador volta
     sozinho para o começo quando há transbordo. */
  justify-content:flex-start;
  justify-content:safe center;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  /* esmaece as pontas: mostra que a fila continua para os lados sem
     precisar de seta nem de barra de rolagem */
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.cat-nav-in::-webkit-scrollbar{ display:none; }
.cat-nav a{
  position:relative;
  padding:18px 0 17px; white-space:nowrap;
  font-family:var(--estru); font-variation-settings:'wdth' 84;
  font-size:.7rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-30);
  transition:color .3s var(--curva);
}
.cat-nav a:hover{ color:var(--tinta-70); }
.cat-nav a.ativa{ color:var(--tinta); }

/* ── O FIO QUE VIAJA ───────────────────────────────────────────────
   Antes cada item tinha o seu próprio fio, que aparecia e sumia. Agora
   existe UM fio só, que desliza de uma categoria para a outra conforme
   a rolagem troca a ativa. É a animação com significado desta barra: ela
   mostra onde você está no catálogo, em vez de só piscar.

   ⭐ `width` e `transform` têm durações DIFERENTES de propósito. Iguais,
   o fio anda como um bloco rígido; com a largura chegando antes, ele
   estica na saída e recolhe na chegada, que é o que dá elasticidade. */
.cat-nav-fio{
  position:absolute; left:0; bottom:0; height:2px; width:0;
  background:var(--rosa); pointer-events:none;
  transform:translateX(0);
  transition:transform .55s var(--curva), width .42s var(--curva), opacity .3s linear;
}
/* antes da primeira medida ele não existe visualmente, para não piscar
   no canto esquerdo durante o carregamento */
.cat-nav-fio:not(.pronto){ opacity:0; }

@media (prefers-reduced-motion:reduce){
  .cat-nav-fio{ transition:none; }
}

/* 1px de gap: as fotos se encostam, como arara de loja.
   A linha vem de um `outline` em cada peça, NÃO de um fundo na grade:
   com fundo, a categoria que não fecha a linha (2 de 4, 5 de 8) deixa
   células cinzas vazias na tela. `outline` não ocupa layout, preenche
   o gap e simplesmente não existe onde não há peça. */
.trilho{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; }
.trilho-3{ grid-template-columns:repeat(3,1fr); }
.trilho-2{ grid-template-columns:repeat(2,1fr); }
.trilho-1{ grid-template-columns:1fr; }
.item{
  background:var(--papel); display:flex; flex-direction:column;
  outline:1px solid var(--fio);
}
.item-foto{ overflow:hidden; background:var(--papel-2); cursor:zoom-in; }
/* o hover de escala é feito pelo GSAP (base.js), para não
   competir com a transição do CSS no mesmo `transform` */
.item-foto img{ width:100%; aspect-ratio:1/1; object-fit:cover; }
.item-corpo{ padding:18px 18px 22px; display:flex; flex-direction:column; gap:7px; flex:1; }
.item-nome{
  font-family:var(--estru); font-variation-settings:'wdth' 86;
  font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; line-height:1.35;
}
.item-det{ margin:0; font-size:.8rem; line-height:1.55; color:var(--tinta-50); flex:1; }
.item-corpo .link{ margin-top:8px; align-self:flex-start; }
/* o <picture> dos banners nao pode virar uma caixa entre o slot e a
   <img>: sem isso o `object-fit` da imagem passa a medir o <picture>
   e o enquadramento sai errado */
picture{ display:contents; }
/* ── o "Pedir esta" nao se repete 65 vezes em pe na pagina ─────────
   O rotulo continua existindo e continua sendo o mesmo link: ele so
   nao fica impresso embaixo de cada uma das pecas ao mesmo tempo.
   Aparece no cartao apontado (ou focado pelo teclado), que e quando
   ele serve para alguma coisa. Onde nao ha ponteiro fino (celular,
   tablet) ele fica visivel sempre, senao nao haveria como chamar. */
@media (hover:hover) and (pointer:fine){
  .item-corpo .link{
    opacity:0; transform:translateY(5px);
    transition:opacity .35s var(--curva), transform .35s var(--curva);
  }
  .item:hover .item-corpo .link,
  .item:focus-within .item-corpo .link{ opacity:1; transform:none; }
}
.arrasta{ display:none; }

@media (max-width:1023px){
  .trilho{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:767px){
  .cat-nav{ top:64px; }
  .cat-nav a{ padding:13px 0; margin-right:20px; }

  /* ── ARARA NO CELULAR — receita fechada ─────────────────────────
     `overflow-y:hidden` EXPLÍCITO é obrigatório: quando um eixo deixa
     de ser `visible`, o CSS promove o outro a `auto` sozinho, e essa
     sobra vertical engole o gesto de descer a página no iOS.
     E NUNCA `touch-action:pan-x` — ela não delega o vertical pra
     página, ela PROÍBE o gesto vertical no elemento e nos ancestrais. */
  .trilho{
    display:flex; grid-template-columns:none; gap:1px;
    overflow-x:auto; overflow-y:hidden;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity; scroll-padding-left:var(--pad);
    margin:0 calc(-1 * var(--pad)); padding:0 var(--pad);
    scrollbar-width:none;
  }
  .trilho::-webkit-scrollbar{ display:none; }
  .trilho > .item{ flex:0 0 76%; scroll-snap-align:start; }
  .trilho > .item.rv{ transform:none; }
  .item-foto img{ -webkit-user-drag:none; user-select:none; }

  .arrasta{
    display:flex; align-items:center; gap:10px; margin:14px 0 0;
    font-family:var(--estru); font-variation-settings:'wdth' 86;
    /* tracking baixo de propósito: é frase corrida, não rótulo em caixa
       alta — acima de .05em o olho perde o agrupamento das palavras */
    font-size:.76rem; font-weight:500; letter-spacing:.02em; color:var(--tinta-50);
  }
  .arrasta span{ width:30px; height:1px; background:var(--rosa); }
}

/* ══ A FICHA DA PEÇA — o painel que abre por cima ══════════════════
   ⚠️⚠️ O prefixo é `fp-` e NÃO `ficha-` por um motivo concreto: o
   `catalogo.html` já tem uma seção `.ficha` desde 13/09 (o cabeçalho da
   categoria, com `.ficha-in`, `.ficha-lado`, `.ficha-conta`). Na
   primeira versão eu batizei este painel de `.ficha` e o
   `position:fixed` daqui caiu em cima daquele cabeçalho: o título
   "Vestuário" foi parar por cima das fotos. Nome novo em CSS global
   pede um grep antes.
   Foto grande à esquerda com as miniaturas de cor embaixo, texto e
   pedido à direita. Sem preço, sem carrinho: aqui é orçamento. */
.fp{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--pad); }
/* (a regra global `[hidden]` acima já cobre este caso; mantida só como
   lembrete de que o painel abre e fecha pelo atributo, não por classe) */
/* ⚠️⚠️ SEM `backdrop-filter` AQUI, e é o motivo de o painel ter ficado
   pesado ao abrir na primeira versão.

   `backdrop-filter` num elemento fixo de tela cheia obriga o navegador a
   FOTOGRAFAR e BORRAR tudo o que está atrás, a cada quadro. E atrás
   deste véu existe um documento de ~15.800px com 70 imagens e um canvas
   WebGL que continua desenhando. Cada quadro do canvas invalidava o
   fundo e forçava um novo borrão da viewport inteira, 60 vezes por
   segundo, para um efeito que ninguém enxerga sob um véu de 68%.

   A compensação é só um pouco mais de opacidade. */
.fp-veu{ position:absolute; inset:0; background:rgba(10,10,10,.68); }
.fp-caixa{
  position:relative; z-index:1;
  width:min(1040px, 100%); max-height:min(88vh, 760px); overflow:auto;
  background:var(--papel); border:1px solid var(--fio);
  display:grid; grid-template-columns:1.05fr .95fr;
  animation:fpEntra .5s var(--curva);
}
@keyframes fpEntra{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .fp-caixa{ animation:none; } }

.fp-x{
  position:absolute; top:12px; right:12px; z-index:2;
  width:40px; height:40px; display:grid; place-items:center;
  background:var(--papel); border:1px solid var(--fio); color:var(--tinta); cursor:pointer;
  transition:background .3s var(--curva), border-color .3s var(--curva);
}
.fp-x:hover{ background:var(--rosa); border-color:var(--rosa); }
.fp-x svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5; }

.fp-visual{ background:var(--papel-2); padding:clamp(18px,2.4vw,30px); }
.fp-foto{ background:var(--papel); overflow:hidden; }
.fp-foto img{ display:block; width:100%; aspect-ratio:1/1; object-fit:cover; }
.fp-minis{ display:flex; gap:9px; margin-top:12px; flex-wrap:wrap; }
.fp-mini{
  width:64px; height:64px; padding:0; cursor:pointer;
  background:var(--papel); border:1px solid var(--fio); overflow:hidden;
  transition:border-color .3s var(--curva), transform .3s var(--curva);
}
.fp-mini img{ display:block; width:100%; height:100%; object-fit:cover; }
.fp-mini:hover{ transform:translateY(-2px); }
.fp-mini.ativa{ border-color:var(--rosa-esc); border-width:2px; }

.fp-texto{ padding:clamp(28px,3.4vw,48px) clamp(24px,3vw,44px); display:flex; flex-direction:column; align-items:flex-start; }
.fp-texto h2{ margin:0 0 14px; }
.fp-det{ margin:0 0 22px; font-size:.95rem; line-height:1.7; color:var(--tinta-70); }
.fp-cores{ margin:0 0 26px; }
.fp-cores-rot{
  font-family:var(--estru); font-variation-settings:'wdth' 86;
  font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-50);
}
.fp-cores-rot b{ color:var(--tinta); font-weight:600; }
.fp-nota{ margin:16px 0 0; font-size:.8rem; line-height:1.6; color:var(--tinta-50); max-width:36ch; }

/* o cartão e a foto do catálogo viraram BOTÃO para abrir a ficha: sem
   este reset eles herdam a aparência de botão do navegador */
.peca, .item-foto{
  font:inherit; color:inherit; text-align:inherit;
  border:0; padding:0; background:none; width:100%; display:block; cursor:pointer;
}
.peca{ outline:1px solid var(--fio); }
.peca:focus-visible, .item-foto:focus-visible{ outline:2px solid var(--rosa-esc); outline-offset:2px; }
.peca-cores{
  display:block; margin-top:5px; font-style:normal;
  font-size:.64rem; font-weight:500; letter-spacing:.14em; color:var(--rosa);
}

@media (max-width:767px){
  .fp{ padding:0; place-items:stretch; }
  .fp-caixa{ grid-template-columns:1fr; max-height:100%; height:100%; border:0; }
  .fp-foto img{ aspect-ratio:4/3; }
}

/* ══ CARTÃO — existe, mas não é o único recurso da página ══════════ */
.carta{
  background:var(--carta); border:1px solid var(--fio);
  display:flex; flex-direction:column;
  transition:border-color .45s var(--curva), transform .45s var(--curva);
}
.carta:hover{ border-color:var(--fio-rosa); transform:translateY(-2px); }

/* ═══════════ TABLET ═══════════ */
@media (max-width:1023px){
  .barra-nav{ display:none; }
  .burger{ display:block; }
  .rodape-in{ grid-template-columns:1fr 1fr; gap:40px; }
}

/* ═══════════ CELULAR ═══════════ */
@media (max-width:767px){
  :root{ --pad:20px; }
  .barra-in{ height:64px; }
  /* ── RODAPÉ SANFONA (15/09) ──────────────────────────────────────
     Empilhadas e abertas, as três colunas davam um rodapé de quase três
     telas. Fechadas, cabem em pouco mais de uma. Abre só a primeira; o
     `base.js` decide isso, e devolve todas abertas se a tela crescer. */
  .rodape-in{ grid-template-columns:1fr; gap:0; }
  .rodape-bloco{ border-top:1px solid rgba(255,255,255,.12); }
  .rodape-bloco:last-of-type{ border-bottom:1px solid rgba(255,255,255,.12); }
  .rodape-bloco summary{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:20px 2px; margin:0; cursor:pointer; pointer-events:auto;
  }
  .rodape-bloco[open] summary{ padding-bottom:16px; }
  /* o mesmo sinal do FAQ: um mais que perde a barra de pé e vira menos */
  .rodape-bloco summary i{
    display:block; position:relative; width:14px; height:14px; flex-shrink:0;
  }
  .rodape-bloco summary i::before, .rodape-bloco summary i::after{
    content:""; position:absolute; inset:0; margin:auto; background:var(--rosa);
    transition:transform .4s var(--curva), opacity .4s var(--curva);
  }
  .rodape-bloco summary i::before{ width:14px; height:1.5px; }
  .rodape-bloco summary i::after { width:1.5px; height:14px; }
  .rodape-bloco[open] summary i::after{ transform:scaleY(0); opacity:0; }
  .rodape-bloco .rodape-lista{ padding:0 2px 24px; }
  /* a marca continua solta no topo, sem borda e com respiro próprio —
     e CENTRADA (pedido dele): empilhada, a coluna ocupa a largura toda,
     e o texto encostado na esquerda ficava torto em cima da sanfona */
  .rodape-in > div:first-child{ margin-bottom:30px; text-align:center; }
  /* ⚠️ o `text-align` acima NÃO centra a logo: o reset do site põe
     `display:block` em toda `<img>`, e bloco só se centra com margem
     automática. O parágrafo tem `max-width:34ch` e precisa do mesmo. */
  .rodape-marca img{ margin-inline:auto; }
  .rodape-in > div:first-child p{ margin-inline:auto; }
  .rodape-fim{ justify-content:flex-start; }
  /* a última sanfona já fecha com um fio; o do "Nós aceitamos" faria
     duas linhas coladas. O bloco continua CENTRADO no celular (pedido
     dele): com os selos alinhados à esquerda a faixa ficava torta
     debaixo do título, que é curto. */
  .rodape-pag{ border-top:none; margin-top:clamp(30px,6vw,44px); }
  /* 7 selos numa linha só: 7x42 + 6x6 de vão = 330px, dentro dos 350
     que sobram a 390px de tela. Um selo sozinho na segunda linha fica
     pior do que todos um pouco menores. */
  .rodape-pag-lista{ gap:6px; }
  .bandeira{ width:42px; height:27px; }
  .zap{ width:54px; height:54px; right:16px; bottom:16px; }
  /* mesmo eixo do botão verde: centro do zap = 16 + 27 = 43px da borda,
     então o bloco de 42px de largura começa a 22px */
  .rolar{ right:22px; bottom:86px; width:42px; border-radius:14px; }
  .rolar-bt{ height:38px; }
  .bt span{ padding:18px 22px; font-size:.7rem; }
  .bt i{ width:48px; }
  /* A duração da faixa rolante saiu daqui em 15/09: agora o base.js
     calcula o tempo a partir da distância real da trilha, para o ritmo
     ficar igual em qualquer largura. Um valor fixo aqui seria ignorado. */
}

/* ═══════════ MENOS MOVIMENTO ═══════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation:none !important; }
  .bt span, .bt i, .bt i svg, .link::after, .veu, .veu-nav a, .veu-pe,
  .lupa, .barra, .zap, .carta{ transition:none !important; }
  .veu-nav a, .veu-pe{ opacity:1; transform:none; }
}

/* ══ CURSOR DA CASA ════════════════════════════════════════════════
   Um losango rosa creme — a mesma forma do ornamento `— ◆ —` da marca,
   então o ponteiro faz parte do desenho em vez de ser enfeite genérico.

   Só em quem tem ponteiro de verdade (`hover:hover` + `pointer:fine`):
   em toque não existe cursor, e trocar por um falso só atrapalharia.

   ⚠️ 15/09: o ponteiro do sistema NÃO volta mais em campo de texto.
   Antes voltava, com o argumento de que a barra de digitação diz onde
   o texto vai cair — mas o efeito prático era o que o Gui relatou duas
   vezes: *"o cursor aparece no formato padrão toda hora que clico na
   parte de texto, nos botões e nas setinhas de quantidade"*. Num
   formulário inteiro de campos, isso é o cursor da casa piscando fora
   metade do tempo. O recado da barra de texto não se perdeu: o losango
   AFINA e vira uma barra vertical sobre campo de digitação (`.escrita`
   mais abaixo), que diz a mesma coisa sem trocar de ponteiro. */
@media (hover:hover) and (pointer:fine){
  /* ⚠️ `html.tem-cursor body *` e não `html.tem-cursor *`, e a razão é
     especificidade pura. A versão antiga pesava (0,1,1) e EMPATAVA com
     qualquer regra de componente do tipo `.faq-item summary` ou
     `.abas button` — no empate ganha quem vem depois, e o CSS de página
     vem depois do compartilhado. Resultado: em botão, link, summary e
     cartão o ponteiro do sistema voltava por baixo do losango e a
     mãozinha aparecia junto com ele. Com `body` no meio a regra sobe
     para (0,1,2) e cobre o site inteiro. */
  html.tem-cursor, html.tem-cursor body *{ cursor:none; }
  /* ⛔ NÃO reabrir exceção para `input`/`textarea`/`select` aqui. Era
     isto que fazia o ponteiro do sistema reaparecer a cada campo.
     Quem informa "aqui se digita" agora é a forma do próprio losango. */

  /* ⚠️⚠️ AS PEÇAS QUE O NAVEGADOR DESENHA POR DENTRO DO CAMPO não
     herdam o `cursor` do campo: elas moram numa shadow DOM do próprio
     navegador e precisam ser nomeadas uma a uma. Eram as setinhas de
     "quantas unidades" e o ícone de calendário — os dois últimos
     lugares onde o ponteiro do sistema ainda aparecia, e o Gui achou os
     dois. Se um dia entrar campo de busca ou de arquivo, os
     pseudo-elementos deles entram nesta lista também. */
  html.tem-cursor body input[type="number"]::-webkit-inner-spin-button,
  html.tem-cursor body input[type="number"]::-webkit-outer-spin-button,
  html.tem-cursor body input[type="date"]::-webkit-calendar-picker-indicator,
  html.tem-cursor body input[type="date"]::-webkit-datetime-edit,
  html.tem-cursor body input[type="date"]::-webkit-datetime-edit-fields-wrapper,
  html.tem-cursor body input[type="search"]::-webkit-search-cancel-button,
  html.tem-cursor body input[type="file"]::-webkit-file-upload-button,
  html.tem-cursor body ::-webkit-resizer{ cursor:none; }

  .cursor{
    position:fixed; top:0; left:0; z-index:300;
    pointer-events:none; opacity:0;
    transition:opacity .35s var(--curva);
    will-change:transform;
  }
  .cursor.visivel{ opacity:1; }

  /* o losango que segue com atraso */
  .cursor-losango{
    position:absolute; top:0; left:0;
    width:26px; height:26px; margin:-13px 0 0 -13px;
    border:1px solid var(--rosa-esc);
    /* a rotação de 45° é aplicada pelo GSAP, não aqui: ele reescreve o
       `transform` inteiro ao animar x/y e a rotação do CSS se perderia */
    transition:width .45s var(--curva), height .45s var(--curva),
               margin .45s var(--curva), background .45s var(--curva),
               border-color .45s var(--curva), opacity .3s var(--curva);
  }
  /* o ponto que fica exatamente onde o dedo aponta */
  .cursor-ponto{
    position:absolute; top:0; left:0;
    width:4px; height:4px; margin:-2px 0 0 -2px;
    background:var(--rosa-esc);
    transition:opacity .3s var(--curva);
  }

  /* ── sobre algo clicável o losango cresce e se preenche ───────────
     ⚠️⚠️ O PREENCHIMENTO É TINTA ESCURA A 16%, NÃO ROSA CREME. Era
     `rgba(239,201,194,.22)` — o próprio `--rosa` — e sobre um botão da
     cor `--rosa` isso dá **1,00:1 de contraste**: o cursor sumia por
     igualdade de cor, não por defeito de posição. Foi o que o Gui
     relatou ("o cursor fica invisível quando vai sobre qualquer
     botão"), e é a mesma armadilha do traço neon que sumiu no cartão
     branco.

     Medido com o tom escuro: 1,22:1 no branco, 1,18:1 no botão rosa,
     1,20:1 na escolha marcada e no papel. Um véu escuro ESCURECE o que
     está atrás, seja o que for — por isso funciona em qualquer fundo
     claro, enquanto um véu claro só funciona sobre o que é mais escuro
     que ele. */
  .cursor.cur-ativo .cursor-losango{
    width:52px; height:52px; margin:-26px 0 0 -26px;
    background:rgba(143,81,72,.16); border-color:var(--rosa-esc);
  }
  .cursor.cur-ativo .cursor-ponto{ opacity:0; }

  /* ⚠️⚠️⚠️ TODO ESTADO DO CURSOR LEVA O PREFIXO `cur-`, E NÃO É
     CAPRICHO. As classes de estado entram no `#cursor`, que vive no
     mesmo espaço de nomes de QUALQUER componente da página. A skin de
     escolha chamava-se `escolha`; o `pedido.html` tem
     `.escolha span{ padding:13px 20px; border:1px solid ... }` para os
     botões de opção — e o `.cursor-losango` e o `.cursor-ponto` SÃO
     `<span>` dentro de um elemento que passou a ter a classe `escolha`.
     Resultado: o cursor herdava o desenho do botão de opção e virava um
     retângulo pálido, que foi o "o cursor fica invisível sobre qualquer
     botão" que ele relatou.

     A regra geral: componente que estiliza descendente por TAG
     (`.algo span`, `.algo i`) captura as peças do cursor se os nomes
     baterem. Prefixo resolve de uma vez, inclusive para nomes que ainda
     não existem.

  ══ AS SKINS ═════════════════════════════════════════════════════
     Uma forma para cada tipo de campo, em vez do mesmo losango para
     tudo (pedido dele em 15/09). Quem escolhe a classe é a lista
     `SKINS` no `base.js`, e só uma vale por vez.

     A MARCA é o glifo. Ela não é tocada pelo GSAP (que reescreve o
     `transform` do losango e do ponto a cada movimento), então é o
     único lugar onde um `rotate` de CSS sobrevive. */
  .cursor-marca{
    position:absolute; top:0; left:0; opacity:0;
    color:var(--rosa-esc);
    transition:opacity .3s var(--curva);
  }
  .cursor.cur-claro .cursor-marca{ color:var(--rosa); }

  /* ── LISTA (select e data): círculo com uma seta para baixo ─────── */
  .cursor.cur-lista .cursor-losango{
    width:44px; height:44px; margin:-22px 0 0 -22px;
    border-radius:50%; background:rgba(143,81,72,.16);
  }
  .cursor.cur-lista .cursor-ponto{ opacity:0; }
  .cursor.cur-lista .cursor-marca{
    opacity:1; width:9px; height:9px; margin:-7px 0 0 -4.5px;
    border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
    transform:rotate(45deg);
  }

  /* ── NÚMERO: círculo com as duas setinhas do campo ──────────────── */
  .cursor.cur-numero .cursor-losango{
    width:44px; height:44px; margin:-22px 0 0 -22px;
    border-radius:50%; background:rgba(143,81,72,.16);
  }
  .cursor.cur-numero .cursor-ponto{ opacity:0; }
  .cursor.cur-numero .cursor-marca{ opacity:1; width:0; height:0; margin:0; }
  /* dois triângulos em borda, um para cada sentido do contador */
  .cursor.cur-numero .cursor-marca::before,
  .cursor.cur-numero .cursor-marca::after{
    content:""; position:absolute; left:-4px;
    border-left:4px solid transparent; border-right:4px solid transparent;
  }
  .cursor.cur-numero .cursor-marca::before{ top:-9px; border-bottom:5px solid currentColor; }
  .cursor.cur-numero .cursor-marca::after { top:4px;  border-top:5px solid currentColor; }

  /* ── ESCOLHA (radio e caixa de marcar): anel com o miolo ────────── */
  /* ⚠️ esta era a mais fraca: anel fino e `background:transparent`, ou
     seja, nada de véu. Ganhou o mesmo preenchimento das outras — skin
     diferente é para ter FORMA diferente, não peso diferente. */
  .cursor.cur-escolha .cursor-losango{
    width:42px; height:42px; margin:-21px 0 0 -21px;
    border-radius:50%; border-width:1.5px; background:rgba(143,81,72,.16);
  }
  .cursor.cur-escolha .cursor-ponto{
    opacity:1; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%;
  }

  /* ── sobre campo de digitação: o losango vira barra de texto ──────
     Mesma função do "I-beam" do sistema, desenhado na linguagem da
     casa. Fino e alto, para dizer onde a letra vai cair; o ponto some,
     porque a própria barra já marca o lugar. */
  .cursor.cur-escrita .cursor-losango{
    width:3px; height:28px; margin:-14px 0 0 -1.5px;
    background:var(--rosa-esc); border-color:transparent;
  }
  .cursor.cur-escrita .cursor-ponto{ opacity:0; }
  .cursor.cur-claro.cur-escrita .cursor-losango{ background:var(--rosa); }

  /* sobre foto ampliável ele vira o alvo da lupa */
  .cursor.cur-lupa .cursor-losango{
    width:64px; height:64px; margin:-32px 0 0 -32px;
    background:rgba(239,201,194,.14);
  }

  /* em faixa escura o traço claro lê melhor que o escuro */
  /* em faixa escura o raciocínio se inverte: ali quem contrasta é o
     véu CLARO. Por isso a regra do claro vem depois e sobrescreve o
     preenchimento escuro de todas as skins. */
  .cursor.cur-claro .cursor-losango{ border-color:var(--rosa); background:rgba(239,201,194,.2); }
  .cursor.cur-claro .cursor-ponto{ background:var(--rosa); }
}

/* Sem cursor falso para quem pediu menos movimento: o ponteiro do
   sistema volta inteiro. */
@media (prefers-reduced-motion:reduce){
  html.tem-cursor, html.tem-cursor body *{ cursor:auto; }
  .cursor{ display:none; }
}


/* ── barra de busca (catálogo de presentes e catálogo corporativo) ──
   23/09. Mesma peça nas duas páginas. */
.cat-busca{ display:flex; align-items:center; gap:12px; border:1px solid var(--fio); background:var(--carta);
  padding:0 18px; height:54px; transition:border-color .3s; }
.cat-busca:focus-within{ border-color:var(--rosa-esc); }
.cat-busca svg{ width:20px; height:20px; flex-shrink:0; fill:none; stroke:var(--tinta-50); stroke-width:1.6; stroke-linecap:round; }
.cat-busca input{ flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:.95rem; color:var(--tinta); }
.cat-busca input::placeholder{ color:var(--tinta-50); }