/* ==========================================================================
   VISUAL NOVO — camada por cima (branch visual-novo)
   --------------------------------------------------------------------------
   Este arquivo NÃO substitui o css/estilo.css: ele entra depois e vence só
   onde muda. Para voltar ao visual de hoje, apague a linha que carrega este
   arquivo nos HTMLs. Nada mais.

   A REFERÊNCIA
   ------------
   Feito a partir do site que o Pedro mandou (Primmor). O que faz aquele site
   parecer caro NÃO é minimalismo — é o contrário: site comercial completo e
   denso. Capa com foto e botão, onda emendando as seções, título de seção
   centralizado com texto, grade de 4 colunas, etiqueta sobre a foto, preço
   em negrito e botão em cada produto.

   Nas quatro tentativas anteriores eu fui deixando a página mais vazia a cada
   rodada. Era a direção contrária. Aqui a página fica MAIS cheia, não menos.

   As cores continuam as da marca. Da referência veio só a estrutura.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) CAPA
   -------------------------------------------------------------------------- */

.capa {
  position: relative;
  isolation: isolate;
  background: var(--cor-primaria-escura);
  padding: 62px 0 92px;
  overflow: hidden;
}

.capa__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

/* O véu garante a leitura do texto branco por cima de QUALQUER foto que a
   dona subir — clara, escura, cheia ou vazia. Sem ele, a capa fica refém da
   foto do dia. */
.capa__veu {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 0,72 nao foi no olho: calculei. Com foto BRANCA (o pior caso), abaixo
     de 0,70 o texto da capa cai para 3,1:1 — ilegivel. A foto de hoje e
     escura e disfarcava; a proxima que a dona subir pode nao ser. */
  background: linear-gradient(180deg, rgba(36, 27, 19, .72) 0%, rgba(36, 27, 19, .84) 100%);
}

.capa__texto { position: relative; text-align: center; }

.capa__olho {
  margin: 0 0 10px;
  font-size: .95rem;
  color: #e8dccb;
}

.capa #titulo-loja {
  margin: 0;
  font-size: clamp(2.2rem, 9vw, 3.6rem);
  line-height: 1.06;
  color: #fff;
}

.capa #frase-vitrine {
  margin: 14px auto 0;
  max-width: 52ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #ece3d6;
}

.capa__botao { margin-top: 26px; }

/* A onda que emenda a capa com o creme. É o detalhe que mais diz
   "alguém desenhou isto" na referência. */
.capa__onda {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 60px;
  display: block;
  fill: var(--cor-fundo);
}

/* --------------------------------------------------------------------------
   2) TÍTULO DE SEÇÃO
   -------------------------------------------------------------------------- */

.secao {
  text-align: center;
  padding: 40px 0 24px;
}

.secao__titulo {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: clamp(1.7rem, 6.5vw, 2.3rem);
  line-height: 1.15;
  color: var(--cor-texto);
}

.secao__texto {
  margin: 12px auto 0;
  max-width: 58ch;
  font-size: .98rem;
  line-height: 1.6;
  color: var(--cor-texto-suave);
}

/* --------------------------------------------------------------------------
   3) GRADE E CARDS
   -------------------------------------------------------------------------- */

.grade {
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch;
  padding-bottom: 56px;
}

@media (min-width: 700px)  { .grade { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .grade { grid-template-columns: repeat(4, 1fr); gap: 22px; } }

.cartao {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}

.cartao:hover {
  box-shadow: var(--sombra-forte);
  transform: translateY(-3px);
}

/* A PROPORCAO VOLTOU PARA 4/5.
   Eu tinha posto 1/1 copiando a referencia, e o Pedro apontou o efeito
   colateral olhando o resultado: quadrado corta a cestinha em cima e
   embaixo, e a foto e justamente o que vende o produto. A referencia vende
   caneca e mochila, que cabem num quadrado; cestinha e alta. */
.cartao__foto {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 0;
}

.cartao__foto img { transition: transform .5s ease; }
.cartao:hover .cartao__foto img { transform: scale(1.05); }

.cartao__corpo {
  padding: 14px 14px 16px;
  gap: 4px;
  text-align: left;
}

.cartao__nome {
  font-size: 1rem;
  line-height: 1.28;
  color: var(--cor-texto);
}

.cartao__preco {
  margin-top: 2px;
  padding-top: 0;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cor-texto);
}

.cartao__preco small {
  text-transform: none;
  letter-spacing: 0;
  font-size: .74rem;
  font-weight: 400;
}

/* Cestinha ainda sem foto: numa grade densa o quadrado bege inteiro fica
   pesado, então o ícone encolhe. */
.foto-vazia { background-size: 46%; }

@media (prefers-reduced-motion: reduce) {
  .cartao,
  .cartao__foto img,
  .cartao:hover { transform: none; }
  .cartao:hover .cartao__foto img { transform: none; }
}

/* --------------------------------------------------------------------------
   4) SELETOR DE MOVIMENTO — só aparece em localhost
   --------------------------------------------------------------------------
   O js/anim.js confere o endereço antes de criar isto. No site publicado
   ele não existe.
   -------------------------------------------------------------------------- */

#seletor-mov {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-radius: 999px;
  background: rgba(28, 22, 17, .93);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .3);
  font-size: .78rem;
}
/* Nas páginas com a barra fixa do WhatsApp ele ficava EM CIMA do botão de
   pedir. Como a dona testa no localhost, ela via a barra de teste no lugar do
   botão dela. Sobe a altura da barra (~72px) e os dois cabem.
   Só no celular: no computador a barra fixa não existe (some em 900px). */
@media (max-width: 899px) {
  .com-barra-fixa #seletor-mov { bottom: 88px; }
}

#seletor-mov span { color: #cfc4b6; padding: 0 6px; }
#seletor-mov button {
  border: 0;
  border-radius: 999px;
  padding: 8px 13px;
  min-height: 40px;
  font-family: inherit;
  font-size: .78rem;
  color: #f0ede4;
  background: transparent;
  cursor: pointer;
}
#seletor-mov button[aria-current="true"] { background: var(--cor-primaria-escura); }

/* ==========================================================================
   5) ACABAMENTO
   --------------------------------------------------------------------------
   Detalhes que ninguém nota quando estão lá e todo mundo sente quando faltam.
   ========================================================================== */

/* --- Texto que quebra bonito -------------------------------------------
   O navegador quebra linha na primeira que couber, e sobra uma palavra
   sozinha na última — a "viúva". O text-wrap: balance reequilibra as linhas
   de um título. Só vale para textos curtos, por isso não vai nos parágrafos
   longos, que usam "pretty" (só cuida da última linha). */
h1, h2, h3,
.secao__titulo,
.cartao__nome,
.capa #titulo-loja { text-wrap: balance; }

.secao__texto,
.capa #frase-vitrine { text-wrap: pretty; }

/* Nome de cestinha muito comprido não pode furar o card. */
.cartao__nome { overflow-wrap: anywhere; }

/* Fraunces muda o desenho conforme o tamanho (eixo óptico). Deixar
   automático faz o título grande ter serifa mais fina e o texto pequeno mais
   robusta — que é como uma fonte de livro se comporta. */
.capa #titulo-loja,
.secao__titulo,
.cartao__nome { font-optical-sizing: auto; }

/* --- Toque no celular ---------------------------------------------------
   99% das clientes abrem pelo celular, e lá não existe "hover": o cartão
   nunca ganha o realce que ele tem no computador. Em compensação o Android
   pinta um retângulo cinza por cima do card a cada toque. Aqui a gente troca
   esse retângulo por uma resposta de verdade. */
:root { -webkit-tap-highlight-color: transparent; }

.cartao:active { transform: scale(.985); }
.botao:active { transform: scale(.98); }

/* --- Foco de teclado ----------------------------------------------------
   Quem navega por Tab precisa ver onde está. O anel segue a cor da marca e
   ganha um respiro para não encostar no conteúdo. */
.cartao:focus-visible,
.botao:focus-visible,
.cartao--nada:focus-visible {
  outline: 3px solid var(--cor-primaria-escura);
  outline-offset: 3px;
  border-radius: var(--raio);
}

/* --- Seleção de texto na cor da marca ---------------------------------- */
::selection { background: var(--cor-primaria-suave); color: var(--cor-texto); }

/* --- Barra de rolagem discreta (só onde o navegador aceita) ------------- */
html { scrollbar-color: var(--cor-primaria) var(--cor-fundo); scrollbar-width: thin; }

/* --- Grão na capa -------------------------------------------------------
   Uma textura quase invisível sobre a foto. É o truque mais antigo de
   direção de arte: tira o aspecto "digital liso" da imagem e dá sensação de
   papel. Fica em 3,5% de opacidade — se você percebe, está forte demais.
   Feito com SVG embutido: zero requisição, zero arquivo. */
.capa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* --- Esqueleto no formato do card novo ---------------------------------
   Enquanto o banco responde, o lugar da cestinha tem que ter a MESMA forma
   do card que vai chegar. Se a forma muda, a página "pula" na cara da
   cliente — e pulo de layout é a coisa que mais faz um site parecer barato. */
.cartao-esqueleto {
  background: #fff;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.cartao-esqueleto .cartao__foto { aspect-ratio: 1 / 1; }

/* --- Mais contraste para quem pede ------------------------------------- */
@media (prefers-contrast: more) {
  .cartao { border-color: var(--cor-texto-suave); }
  .capa__veu { background: rgba(28, 21, 15, .9); }
}

/* ==========================================================================
   6) CABEÇALHO QUE REAGE À ROLAGEM
   --------------------------------------------------------------------------
   Sobre a capa ele é invisível e a capa aparece inteira, de ponta a ponta.
   Assim que a pessoa rola, ele ganha fundo translúcido e a linha embaixo.
   É o detalhe que mais diz "site profissional" e quase ninguém percebe
   conscientemente.

   SE O JAVASCRIPT FALHAR: a variável --altura-cabecalho fica em 0, a capa
   não sobe, o cabeçalho continua opaco e o site fica igual ao de hoje.
   Nada quebra — só deixa de ter o efeito.
   ========================================================================== */

body:has(.capa) .capa {
  margin-top: calc(-1 * var(--altura-cabecalho, 0px));
  padding-top: calc(62px + var(--altura-cabecalho, 0px));
}

body:has(.capa) .cabecalho {
  background: transparent;
  border-bottom-color: transparent;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}

body:has(.capa) .cabecalho .marca__nome { color: #fff; }
body:has(.capa) .cabecalho .menu a { color: #ece3d6; }

body:has(.capa) .cabecalho.rolou {
  background: rgba(250, 248, 243, .88);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom-color: var(--cor-borda);
}

body:has(.capa) .cabecalho.rolou .marca__nome { color: var(--cor-primaria-escura); }
body:has(.capa) .cabecalho.rolou .menu a { color: var(--cor-texto-suave); }
body:has(.capa) .cabecalho.rolou .menu__vitrine[aria-current="page"] { color: var(--cor-texto); }

@media (prefers-reduced-motion: reduce) {
  body:has(.capa) .cabecalho { transition: none; }
}

/* --- Botões alinhados na fileira ---------------------------------------
   Uma cestinha com variações mostra "a partir de" e ganha uma linha a mais
   que as outras. Sem isto, o botão dela desce e a fileira fica com os
   botões em alturas diferentes — o tipo de desalinho que ninguém sabe
   nomear mas todo mundo sente. O "auto" empurra o botão para o rodapé do
   card, e como os cards da fileira têm a mesma altura, todos batem. */
/* A grade estica o <li>, mas o link do card fica com a altura do proprio
   conteudo. Sem esta linha o "margin-top: auto" nao tem folga para empurrar
   nada, porque o card nao chega ate o fim da linha. */
.grade > li { display: flex; }
.cartao { display: flex; flex-direction: column; flex: 1; }
.cartao__corpo { display: flex; flex-direction: column; flex: 1; }
/* --- A onda, agora desenhada à mão --------------------------------------
   A massa é o creme que emenda com a página. Os fios são a hachura: mesma
   cor da marca, ficando mais fracos conforme sobem, como traço de lápis que
   perde pressão. */
.capa__onda { height: 92px; }
.onda__massa { fill: var(--cor-fundo); }
.onda__fios path { stroke: var(--cor-primaria); stroke-width: 1.9; }
.onda__fios path:nth-child(1) { opacity: .78; }
.onda__fios path:nth-child(2) { opacity: .52; }
.onda__fios path:nth-child(3) { opacity: .3; stroke-width: 1.4; }

/* ==========================================================================
   7) TRÊS AJUSTES PEDIDOS OLHANDO A TELA
   ========================================================================== */

/* --- O item ativo do menu sobre a foto ----------------------------------
   O CSS antigo pinta a página atual com uma pílula clara e texto escuro.
   Isso funciona sobre o creme, mas sobre a foto o cabeçalho fica
   transparente e a pílula clara com texto claro some — o Pedro não
   conseguia ler "Cestinhas".
   Sobre a foto ela vira texto simples, igual ao "Como funciona". Quando a
   pessoa rola e o cabeçalho ganha corpo, a pílula volta. */
body:has(.capa) .cabecalho:not(.rolou) .menu a[aria-current="page"] {
  background: transparent;
  color: #fff;
  font-weight: 700;
}

/* --- Preço com destaque -------------------------------------------------
   Caramelo escuro, não o claro. Medi os dois sobre o branco do card:
   o claro dá 3,64:1 e só passa porque o preço é grande e negrito; o escuro
   dá 5,07:1 e passa até no critério estrito. Mesmo tom, sem o risco. */
.cartao__preco { color: var(--cor-primaria-escura); }

/* --- Botão discreto -----------------------------------------------------
   Sem o retângulo cheio, que poluía. Um fio separa a ação do preço e o
   texto fica em caramelo. A altura de 44px é o alvo de toque: no celular
   ninguém acerta menos que isso com o polegar. */
.cartao__acao {
  display: flex;
  align-items: center;
  margin-top: 12px;
  padding-top: 11px;
  min-height: 44px;
  border-top: 1px solid var(--cor-borda);
  color: var(--cor-primaria-escura);
  font-family: var(--fonte-corpo);
  font-size: .88rem;
  font-weight: 700;
  transition: color .18s ease;
}

.cartao:hover .cartao__acao,
.cartao:active .cartao__acao { color: var(--cor-texto); }

/* Empurra a ação para o rodapé do card, para todas as fileiras baterem. */
.grade > li { display: flex; }
.cartao { display: flex; flex-direction: column; flex: 1; }
.cartao__corpo { display: flex; flex-direction: column; flex: 1; }
.cartao__acao { margin-top: auto; }
/* A caixa de aviso (busca sem resultado, loja que nao carregou) tambem e um
   <li> da grade, mas nao e card: o "display: flex" acima a deixava em colunas
   espremidas (titulo, texto e botoes lado a lado). Visto em 05/10/2026. */
.grade > li.vazio { display: block; }

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