/* ============================================================
   LOJA DA SANDRA — Folha de estilo principal

   IDENTIDADE VISUAL
   O logo da loja é uma placa oval com um fio fino por dentro.
   O site nasce dessa ideia:
     - fios camelo finos separando seções e rotulando
     - o tom escuro como cor de superfície, não só de texto
     - imagens retas, apoiadas em sombra (nada arredondado)
     - fundo levemente rosado

   REGRA DE CONTRASTE (não quebrar)
   Cada cor clara tem um par escuro para quando virar texto:
     rosa   --rose (fundo)  /  --rose-texto (texto em fundo claro)
     camelo --ouro (fios)   /  --ouro-texto (texto em fundo claro)
   Fundo claro pede texto escuro. Fundo escuro pede texto claro.
   ============================================================ */

:root {
  /* --- Cores tiradas do logo real --- */
  --tinta: #2b2118;         /* marrom-camelo quase preto — textos */
  --marrom: #453626;        /* marrom-camelo escuro — superfícies */
  --marrom-claro: #5f4b36;  /* marrom-camelo para hover */
  --marrom-fundo: #1e1610;  /* o tom mais fundo — só o rodapé usa */
  --ouro: #a88a6f;          /* camelo escolhido pelo usuário — fios, molduras, faixas */
  --ouro-texto: #75603f;    /* camelo escuro — texto pequeno em fundo claro */
  --ouro-claro: #c9ae91;    /* camelo claro — texto pequeno sobre fundo escuro */
  --blush: #f9f1ef;         /* fundo do site, rosado bem claro */
  --papel: #ffffff;         /* cartões */

  /* --- Família do rosa ---
     O rosa claro escolhido (#c3969c) é lindo como SUPERFÍCIE
     (cabeçalho, botões, faixas), sempre com texto marrom escuro
     por cima: dá 7:1 de contraste, bem legível.

     Mas ele NÃO serve como cor de texto sobre fundo claro —
     rosa claro em fundo quase branco dá só 2,3:1 e some.
     Por isso existe o --rose-texto: mesmo tom, mais escuro,
     para links, preços em destaque e hover. */
  --rose: #c3969c;          /* rosa claro — superfícies */
  /* ⚠️ Rosa de PAREDE, só para a seção de avaliações. É o --rose
     escurecido e puxado para o quente, para conversar com o camelo e
     o marrom do resto do site — o usuário achou o --rose puro "muito
     rosa" numa parede inteira (27/08/2026).

     NÃO é o mesmo do botão, de propósito: peça pequena aguenta a cor
     viva, parede inteira não. Mexer aqui não mexe em botão nenhum.

     ⚠️ TETO MEDIDO: não dá para escurecer muito mais mantendo o texto
     escuro. A partir de ~#A07B80 a tinta cai abaixo de 4,5:1, e o
     creme só volta a passar lá em ~#7D6064 — entre os dois existe uma
     faixa morta onde NENHUMA das duas letras lê. E escurecer até lá
     derruba o degrau para o rodapé de 3,7:1 para 2,0:1, trazendo de
     volta o problema da divisa que sumia. */
  --rose-parede: #AD8A85;   /* rosa amadeirado — só a parede das avaliações */
  --rose-hover: #b68188;    /* rosa um pouco mais fechado */
  --rose-texto: #974e58;    /* mesmo tom, escuro — textos e links */

  /* --- Cores de apoio --- */
  --texto-suave: #7a6459;
  --linha: #e7d9d2;
  --sucesso: #2f6b4f;
  --erro: #a8323f;

  /* --- Fontes --- */
  /* Uma família só no site inteiro: Albert Sans (Google Fonts,
     gratuita, peso variável de 300 a 800 e itálico de verdade).
     Escolhida pelo usuário em 25/08/2026, no lugar de DM Sans +
     Fraunces. Os dois tokens continuam existindo para o dia em
     que os títulos ganharem uma fonte própria de novo. */
  --fonte-titulo: "Albert Sans", -apple-system, "Segoe UI", Arial, sans-serif;
  --fonte-texto: "Albert Sans", -apple-system, "Segoe UI", Arial, sans-serif;

  /* --- Medidas --- */
  --largura-max: 1180px;
  --altura-foto-mobile: max(46vh, 300px);
  --altura-cabecalho: 101px; /* o JS mede e corrige (comum.js) */
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  overflow-x: clip;
}

/* ⚠️ Barra de rolagem escondida, a pedido do usuário — a rolagem
   continua funcionando normal (mouse, roda, toque, teclado), só a
   faixinha cinza do lado direito não aparece mais. Precisa das duas
   regras: uma para Firefox/Edge, outra para Chrome/Safari (cada
   motor de navegador tem sua própria propriedade para isso). */
html {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Edge antigo */
}
html::-webkit-scrollbar {
  display: none; /* Chrome, Safari e outros baseados em WebKit/Blink */
}

body {
  font-family: var(--fonte-texto);
  background-color: var(--blush);
  color: var(--tinta);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
select {
  font-family: inherit;
  font-size: inherit;
}

/* Foco visível para quem navega pelo teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--rose-texto);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   TIPOGRAFIA
   ============================================================ */

/* ⚠️ Peso 600 e espacejamento negativo NÃO são enfeite — são o que
   a troca de fonte exigiu. A Fraunces era serifada e o peso 500 dela
   já tinha presença de título. A Albert Sans é geométrica: no mesmo
   500 os títulos ficam sem peso, com cara de texto grande em vez de
   título. E geométrica em corpo grande pede tracking negativo, senão
   as letras parecem soltas umas das outras.
   As antigas `font-variation-settings` saíram porque os eixos
   `opsz`, `SOFT` e `WONK` são da Fraunces — a Albert Sans só tem o
   eixo de peso, que o `font-weight` já controla. */
h1,
h2,
h3,
h4 {
  font-family: var(--fonte-titulo);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.018em;
}

/* Rótulo pequeno em maiúsculas, acompanhado de um fio dourado */
.olho {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fonte-texto);
  font-size: 11px;
  /* 600 e não 500: em maiúsculas de 11px a geométrica some no peso
     médio. O tracking largo continua — é ele que dá o ar de rótulo. */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ouro-texto);
  margin-bottom: 20px;
}

/* Sobre fundo escuro o camelo claro volta, porque ali ele lê bem.
   No hero é creme puro: o fundo camelo ficou claro demais para
   o --ouro-claro (daria 2,8:1). */
.prova-social .olho {
  color: var(--ouro-claro);
}

.hero .olho {
  color: rgba(249, 241, 239, 0.9);
}

.olho::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}

/* Versão centralizada, com fio dos dois lados */
.olho-centro {
  justify-content: center;
}

.olho-centro::before {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  max-width: 90px;
}

.olho-centro::after {
  max-width: 90px;
}

.titulo-seccao {
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.01em;
  text-align: center;
  margin-bottom: 14px;
}

.subtitulo-seccao {
  text-align: center;
  color: var(--texto-suave);
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto 48px;
}

/* ============================================================
   BOTÕES
   Formato de pílula, ecoando o oval do logo.
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s,
    transform 0.2s;
  text-align: center;
  line-height: 1.2;
}

.btn:active {
  transform: translateY(1px);
}

/* Botão principal: rosa claro com texto marrom escuro.
   Texto branco aqui daria só 2,6:1 de contraste — ilegível. */
.btn-principal {
  background-color: var(--rose);
  color: var(--tinta);
  font-weight: 500;
}

.btn-principal:hover {
  background-color: var(--rose-hover);
  color: var(--tinta);
}

.btn-escuro {
  background-color: var(--marrom);
  color: var(--blush);
}

.btn-escuro:hover {
  background-color: var(--marrom-claro);
}

/* Contorno claro — para usar sobre o marrom */
.btn-contorno-claro {
  border: 1px solid rgba(249, 241, 239, 0.45);
  color: var(--blush);
}

.btn-contorno-claro:hover {
  border-color: var(--blush);
  background-color: rgba(249, 241, 239, 0.1);
}

/* Contorno escuro — para usar sobre o fundo claro */
.btn-contorno {
  border: 1px solid var(--linha);
  color: var(--tinta);
  background-color: var(--papel);
}

.btn-contorno:hover {
  border-color: var(--rose-texto);
  color: var(--rose-texto);
}

.btn-bloco {
  display: flex;
  width: 100%;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ============================================================
   FAIXA DE AVISOS + CABEÇALHO
   ============================================================ */

/* Esta faixa usa o camelo #A88A6F puro que o usuário escolheu.
   Aqui ele funciona porque o texto por cima é escuro (4,9:1) —
   com texto claro daria 2,89:1 e reprovaria. */
.faixa-avisos {
  background-color: var(--ouro);
  color: var(--tinta);
  font-size: 12.5px;
  letter-spacing: 0.03em;
}

.faixa-avisos-interno {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 24px;
  flex-wrap: wrap;
  text-align: center;
}

/* Losango só de enfeite entre os avisos. É marcado como
   decoração no JS (aria-hidden), então o leitor de tela pula. */
.faixa-avisos .separador {
  color: rgba(43, 33, 24, 0.62);
  font-size: 9px;
}

/* O cabeçalho acompanha a rolagem: desce fixo junto com o cliente
   e fica sempre visível no topo da tela em todas as páginas. */
/* Texto que só o leitor de tela de quem enxerga pouco lê em voz
   alta. Some da tela, mas continua existindo para a acessibilidade
   — é o que dá nome aos botões que só têm desenho. */
.apenas-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.cabecalho {
  position: relative;
  width: 100%;
  z-index: 100;
  background-color: var(--marrom);
  border-bottom: 1px solid rgba(168, 138, 111, 0.22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Quando o cabeçalho fica fixo ao rolar a página */
.cabecalho.fixo {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1000 !important;
}

.cabecalho-interno {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 28px;
  padding-top: 14px;
  padding-bottom: 14px;
}

.logo {
  flex-shrink: 0;
}

.logo img {
  height: 72px;
  width: auto;
  object-fit: contain;
}

.menu {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-left: 16px;
}

.menu a {
  position: relative;
  font-size: 14px;
  color: var(--blush);
  padding: 4px 0;
  transition: color 0.2s;
}

/* Sublinhado ouro claro que cresce no hover */
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background-color: var(--ouro-claro);
  transition: width 0.25s ease;
}

.menu a:hover::after,
.menu a.ativo::after {
  width: 100%;
}

.menu a:hover,
.menu a.ativo {
  color: #ffffff;
}

/* Ações (Entrar e Carrinho) posicionadas logo após o "Ver tudo" */
.acoes-cabecalho {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 16px;
  flex-shrink: 0;
}

/* ⚠️ Creme, e não escuro: o cabeçalho é MARROM em todas as
   páginas (e na Home depois que a pessoa rola). Texto escuro
   aqui media 1,36:1 — sumia. A única exceção é o topo da Home,
   onde o cabeçalho é transparente sobre o branco da foto; lá
   uma regra mais específica devolve o tom escuro. */
.acoes-cabecalho a,
.acoes-cabecalho button {
  font-size: 14px;
  color: var(--blush);
  font-weight: 500;
  transition: color 0.2s;
  white-space: nowrap;
}

/* Com o gap em 4px (para os ícones ficarem juntos), o texto
   precisa do próprio respiro antes deles. */
.acoes-cabecalho > a {
  margin-right: 12px;
}

.acoes-cabecalho a:hover,
.acoes-cabecalho button:hover {
  color: var(--ouro-claro);
}

/* ---------- Botões de ícone do cabeçalho ----------
   Carrinho, lupa e menu. 44x44 porque é o tamanho mínimo de um alvo
   de toque no celular — o desenho tem 21px, o resto é área de
   folga em volta. */
.botao-icone {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: inherit;
}

.botao-icone svg {
  width: 21px;
  height: 21px;
  display: block;
}

/* Contagem do carrinho: selo na quina do ícone.
   ⚠️ Rosa com texto escuro, seguindo a regra da paleta — cor clara
   só como fundo. Antes o selo era marrom sobre um cabeçalho marrom,
   ou seja, não existia selo nenhum. */
.bolha-carrinho {
  position: absolute;
  top: 4px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  background-color: var(--rose);
  color: var(--tinta);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  border-radius: 999px;
}

/* Escondido no computador: lá o campo de busca já está à vista */
.btn-busca-mobile {
  display: none;
}

.btn-menu-mobile {
  display: none;
}

/* ---------- Campo de busca do cabeçalho ----------
   ⚠️ Fundo marrom CHEIO, de propósito. O cabeçalho é transparente no
   topo da Home (sobre o branco da foto) e marrom no resto — um campo
   translúcido teria contraste diferente em cada estado, e sobre o
   branco da foto o texto creme sumiria. Com o marrom cheio o campo
   lê em 10,43:1 em qualquer página e em qualquer estado. */
.busca-cabecalho {
  display: flex;
  align-items: center;
  gap: 4px;
  /* auto = encostada na ponta direita do cabeçalho. Ela é o último
     bloco da barra; o "auto" é o que empurra ela até lá. */
  margin-left: auto;
  padding: 0 6px 0 14px;
  background-color: var(--marrom);
  border: 1px solid rgba(168, 138, 111, 0.45);
  border-radius: 999px;
}

.busca-cabecalho input {
  width: 168px;
  height: 38px;
  border: none;
  background: none;
  color: var(--blush);
  font-family: inherit;
  font-size: 14px;
}

.busca-cabecalho input::placeholder {
  color: rgba(249, 241, 239, 0.7);
}

.busca-cabecalho input:focus {
  outline: none;
}

.busca-cabecalho:focus-within {
  border-color: var(--ouro-claro);
}

.busca-cabecalho button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--blush);
}

.busca-cabecalho button svg {
  width: 19px;
  height: 19px;
}

/* O X que alguns navegadores põem no type="search" */
.busca-cabecalho input::-webkit-search-cancel-button {
  filter: invert(1);
  opacity: 0.6;
}

/* ---------- Cabeçalho na Home (Início) ----------
   No topo absoluto da Home, o cabeçalho fica transparente
   sobre a área do hero. Ao rolar o scroll, ganha a classe
   .solido com a cor marrom inteira e acompanha a descida. */
body[data-pagina="inicio"] .cabecalho:not(.solido) {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
}

body[data-pagina="inicio"] .menu {
  margin-right: 0;
  margin-left: 20px;
}

/* ⚠️ "Entrar" e a sacola ficam em cima da parte BRANCA da foto, e
   o recuo que leva elas até lá é MEDIDO pelo JS
   (`alinharAcoesComAFoto`, em comum.js) e entregue aqui na variável
   `--recuo-acoes`. Não trocar por um número fixo: onde a foto começa
   muda com a largura da tela.
   O 76px do fallback é o valor medido em 1280px, para o caso de o JS
   ainda não ter rodado. */
body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho {
  margin-left: var(--recuo-acoes, 76px);
}

body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho a,
body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho button {
  color: var(--tinta);
  font-weight: 500;
}

body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho a:hover,
body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho button:hover {
  color: var(--marrom-claro);
}

body[data-pagina="inicio"] .cabecalho:not(.solido) .bolha-carrinho {
  background-color: var(--marrom);
  color: var(--blush);
}

/* ⚠️ ABAIXO DE 1180px A HOME NÃO PODE TER CABEÇALHO TRANSPARENTE.
   Bug real, achado medindo em 25/08/2026: o menu tem largura fixa
   (~548px com o logo), mas a foto do hero começa mais à esquerda
   conforme a tela encolhe. Entre ~940px e ~1100px o "Ver tudo"
   (creme) caía em cima do BRANCO da foto e sumia — medido em 1024px,
   um link inteiro invadindo.
   Acima de 1180px sobram 37px ou mais entre o fim do menu e a foto,
   e aí a transparência funciona. Abaixo disso o cabeçalho já começa
   marrom, como nas outras páginas: tudo lê em 10,43:1 e o problema
   deixa de existir. Se mexer no menu ou na largura da foto do hero,
   refazer essa conta. */
@media (max-width: 1180px) {
  body[data-pagina="inicio"] .cabecalho:not(.solido) {
    background-color: var(--marrom);
    border-bottom: 1px solid rgba(168, 138, 111, 0.22);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }

  body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho {
    margin-left: auto;
  }

  body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho a,
  body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho button {
    color: var(--blush);
  }

  body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho a:hover,
  body[data-pagina="inicio"] .cabecalho:not(.solido) .acoes-cabecalho button:hover {
    color: var(--ouro-claro);
  }

  body[data-pagina="inicio"] .cabecalho:not(.solido) .bolha-carrinho {
    background-color: var(--rose);
    color: var(--tinta);
  }

}


/* O hero sobe e passa por trás do cabeçalho inicial */
body[data-pagina="inicio"] .hero {
  margin-top: calc(-1 * var(--altura-cabecalho));
  padding-top: var(--altura-cabecalho);
}

body[data-pagina="inicio"] .hero-pilha {
  top: 0;
}

/* Abaixo de 1180px o cabecalho da Home ja e marrom solido (ver a
   media query mais acima). Entao o hero NAO pode mais subir por
   tras dele: o topo do hero ficaria escondido atras de uma barra
   opaca. Esta regra precisa vir DEPOIS da que faz o hero subir —
   as duas tem a mesma especificidade, e a ultima e que vale.
   (Ja me mordeu: com ela antes, o hero continuava subindo.) */
@media (max-width: 1180px) {
  body[data-pagina="inicio"] .hero {
    margin-top: 0;
    padding-top: 0;
  }
}

/* Cabeçalho sólido ao descer o scroll na Home */
body[data-pagina="inicio"] .cabecalho.solido {
  background-color: var(--marrom);
  border-bottom: 1px solid rgba(168, 138, 111, 0.22);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

body[data-pagina="inicio"] .cabecalho.solido .acoes-cabecalho a,
body[data-pagina="inicio"] .cabecalho.solido .acoes-cabecalho button {
  color: var(--blush);
}

body[data-pagina="inicio"] .cabecalho.solido .acoes-cabecalho a:hover,
body[data-pagina="inicio"] .cabecalho.solido .acoes-cabecalho button:hover {
  color: var(--ouro-claro);
}

body[data-pagina="inicio"] .cabecalho.solido .bolha-carrinho {
  background-color: var(--rose);
  color: var(--tinta);
}

/* ============================================================
   HERO — texto à esquerda, pilha de fotos colada no canto direito

   As fotos ficam empilhadas como um baralho: a da frente ocupa
   todo o canto direito, encostando no cabeçalho; a de trás
   escapa só uma tira pela esquerda. Clicar troca as duas.

   Sem véu por cima da foto — foi o que deixou a versão
   anterior com cara de desfocada. Aqui a foto fica limpa e
   quem segura o texto é o fundo escuro do lado esquerdo.
   ============================================================ */

.hero {
  position: relative;
  min-height: min(88vh, 800px);
  /* Degradê camelo, bem mais aberto que antes.
     Este é o limite: com o texto em creme puro, o tom mais
     claro (#75603F) ainda dá 4,8:1. Clarear mais reprova. */
  background: linear-gradient(
    100deg,
    #4a3b29 0%,
    #55442f 38%,
    #66523a 70%,
    #75603f 100%
  );
  color: var(--blush);
  overflow: hidden;
}

.hero-conteudo {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  min-height: min(88vh, 800px);
  pointer-events: none;
}

.hero-texto {
  width: 100%;
  max-width: 500px;
  padding: 90px 0;
}

.hero .olho {
  max-width: 330px;
}

/* Quanto maior o corpo, mais fechado o espacejamento: em 82px o
   -0,028em da serifada ainda deixava as letras soltas na geométrica. */
.hero-texto h1 {
  font-size: clamp(46px, 6.4vw, 82px);
  color: #fffaf7;
  letter-spacing: -0.036em;
  line-height: 1.03;
  font-weight: 700;
}

.hero-texto h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--rose);
}

.hero-texto .texto-apoio {
  margin-top: 26px;
  color: rgba(249, 241, 239, 0.82);
  max-width: 420px;
  font-size: 17px;
}

/* Linha que diz qual look está na frente */
/* Sem fio por cima: o hero já tinha linha demais.
   Sobrou só o traço curto ao lado do nome do look. */
.hero-legenda {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.hero-legenda .nome-look {
  font-family: var(--fonte-titulo);
  font-size: 21px;
  color: var(--blush);
  white-space: nowrap;
}

.hero-legenda .fio {
  flex: 1;
  height: 1px;
  background: rgba(201, 174, 145, 0.25);
}

.hero-legenda .contagem {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 0,85 e nao 0,72: este texto cai a 71% da altura do hero, onde o
     degrade ja clareou para rgb(104,84,59). Com 0,72 media 4,25:1 e
     reprovava; com 0,85 da 5,20:1. Medido no ponto exato, nao no
     tom medio do degrade. */
  color: rgba(249, 241, 239, 0.85);
  white-space: nowrap;
}

.hero-botoes {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  pointer-events: auto;
}

/* ---------- A pilha de fotos ----------
   Encostada no topo (no cabeçalho), no rodapé do hero e na
   borda direita. A de trás escapa pela esquerda. */
.hero-pilha {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
}

.hero-carta {
  position: absolute;
  inset: 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: none;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1),
    box-shadow 0.7s ease;
}

/* A da frente recua um pouco da borda, para a tira da de trás
   caber à direita dela. A sombra cai para a direita, sobre a
   foto de trás. */
.hero-carta.frente {
  z-index: 3;
  transform: translateX(-58px) scaleY(1);
  box-shadow: 20px 0 48px -14px rgba(0, 0, 0, 0.6);
}

/* A de trás encosta na borda direita e encolhe na vertical,
   aparecendo só como uma tira do lado direito */
.hero-carta.atras {
  z-index: 2;
  transform: translateX(0) scaleY(0.92);
  box-shadow: 10px 0 26px -12px rgba(0, 0, 0, 0.4);
}

/* ⚠️ A foto do hero vive dentro de um <picture> (o JS monta assim,
   para o computador receber a versão com folga em cima e o celular
   a versão crua — ver LOOKS em js/pagina-index.js).

   O <picture> nasce "inline" e SEM altura própria. Sem esta regra
   o height:100% da foto não teria contra o que medir e a imagem
   nascia com 0 de altura — a carta ficava vazia, sem erro nenhum
   no console. */
.hero-carta picture {
  position: absolute;
  inset: 0;
  display: block;
}

.hero-carta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
  transform: scale(1.05);
}

/* A foto da frente respira devagar. A de trás fica parada. */
@keyframes deriva-hero {
  0% {
    transform: scale(1.05) translate(0, 0);
  }
  50% {
    transform: scale(1.11) translate(-1.3%, -1.5%);
  }
  100% {
    transform: scale(1.05) translate(0, 0);
  }
}

.hero-carta.frente img {
  animation: deriva-hero 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero-carta.frente img {
    animation: none;
  }
}

/* Escurece a que está atrás, para não competir com a da frente */
.hero-carta .veu {
  position: absolute;
  inset: 0;
  background: #1c150e;
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
}

.hero-carta.atras .veu {
  opacity: 0.52;
}

/* Aviso de que a foto troca ao toque */
.hero-dica {
  position: absolute;
  z-index: 4;
  bottom: 34px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  letter-spacing: 0.05em;
  /* 0,92: esta e a linha mais baixa do hero (95% da altura), onde o
     degrade esta no ponto MAIS CLARO, rgb(115,94,62). Com 0,75 media
     3,93:1. O minimo para 4,5:1 ali e 0,85, que passa raspando —
     0,92 da 5,0:1 e ainda fica mais discreta que o texto principal. */
  color: rgba(249, 241, 239, 0.92);
  pointer-events: none;
}

.hero-dica svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* ============================================================
   SEÇÕES
   ============================================================ */

.secao {
  padding: 76px 0;
}

.secao-estreita {
  padding: 56px 0;
}

/* ---------- Categorias ----------
   Cartões retos, apoiados em sombra. A sombra é o que dá
   o destaque: parece uma foto pousada sobre a página. */
/* ⚠️ A sobra de baixo encolheu de 96 para 64px junto com o banner
   ficando mais alto (pedido do usuario em 27/08/2026: "esticados e
   maiores ate a outra secao"). Os dois somados descem o fim da
   grade em ~79px e encostam mais na secao das marcas.

   Nao foi a zero de proposito: o site inteiro respira ~80px entre
   secoes, e uma unica secao colada nas outras le como erro de
   montagem, nao como escolha. */
/* ⚠️ SÓ TOPO E BASE — mesmo bug do `.topo-catalogo`, `.checkout` e
   `.documento`: entra junto com `.container` (index.html) e o atalho
   `padding` apagaria o respiro lateral de 24px. */
.secao-categorias {
  padding-top: 86px;
  padding-bottom: 52px;
}

.grid-categorias {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* ⚠️ 26 -> 44px em 05/09/2026, a pedido do usuário ("aumentar a
     borda do card" = mais espaço em volta). O vão do celular, mais
     abaixo, continua em 14px: lá a tela é estreita e respiro grande
     come a foto, que é o que a pessoa veio ver. */
  gap: 44px;
}

.cartao-categoria-wrap {
  position: relative;
}

/* Dois cards por linha deixam a pessoa aparecer inteira, sem o corte
   apertado da grade anterior de quatro colunas. */
.cartao-categoria {
  position: relative;
  display: block;
  /* ⚠️ 2/3, e não mais 4/5 (05/09/2026, o usuário viu na tela).

     O corte é "cover": caixa mais LARGA que a foto corta em cima e
     embaixo — e em cima fica a cabeça da modelo. As fotos de
     conjunto vêm em duas proporções, 0,800 e 0,666; num cartão 4/5
     (0,800) as de 0,666 perdiam 8,3% de cada ponta.

     Eu tinha medido isso e concluído, olhando miniatura, que o que
     sumia era "fundo vazio". Estava errado: renderizando no tamanho
     real, a cabeça da modelo é cortada em `feminino-geometrica-1`,
     `feminino-folhagem-jeans-1` e nas infantis.

     Testei as três saídas lado a lado:
       • 4/5 no centro          -> corta a cabeça
       • 4/5 com topo em 12%    -> salva a cabeça e corta o pé e as
                                   sandálias do conjunto
       • 2/3                    -> não corta NADA

     2/3 é a proporção da foto mais estreita do acervo (0,666), então
     o corte passa a ser só na largura, onde sobra fundo. É a mesma
     conta — e agora a mesma proporção — do cartão da loja e da foto
     da página da peça.

     ⚠️ Se entrar foto mais estreita que 2/3, refazer a medição. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 4px;
  background-color: var(--marrom);
  box-shadow: 0 14px 34px -10px rgba(43, 33, 24, 0.32),
    0 4px 12px -4px rgba(43, 33, 24, 0.18);
  transition: transform 0.32s ease, box-shadow 0.32s ease;
}

.cartao-categoria:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 50px -12px rgba(43, 33, 24, 0.42),
    0 8px 18px -6px rgba(43, 33, 24, 0.22);
}

.cartao-categoria img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}

/* Nas fotos de roupa, a pessoa fica no lado direito da composição.
   O card mais largo permite mostrar esse lado sem cortar o rosto. */
.cartao-categoria[href*="categoria=masculino"] .vitrine > img,
.cartao-categoria[href*="categoria=infantil"] .vitrine > img {
  object-position: 78% top;
}

.cartao-categoria:hover img {
  transform: scale(1.07);
}

/* ⚠️ O VÉU É CLARO, E A LETRA É MARROM (05/09/2026, pedido do
   usuário: "as letras dos catálogos não aparecem, coloque letras
   marrom").

   Era o contrário — véu escuro e letra creme. Duas coisas:

   1. 🚨 O VÉU TINHA PARADO DE APARECER, E A CULPA É DE UM CONSERTO
      MEU. Em 05/09 pus `z-index: 2` em `.vitrine > img.ativa` para a
      foto que sai ficar por baixo da que entra. Só que `.vitrine`
      não cria contexto de empilhamento (é `position: absolute` sem
      z-index), então esse 2 vale no cartão inteiro — e passou a
      ganhar deste véu, que não tinha z-index nenhum. Resultado: a
      foto por cima do véu, o creme direto no branco da foto de
      catálogo, e o nome da categoria sumindo. Por isso os dois
      agora têm z-index explícito.

   2. Consertar o empilhamento devolveria o véu escuro, mas o usuário
      pediu letra marrom — e marrom quer fundo claro. É a regra da
      paleta que já vale no site inteiro: cor clara só como fundo,
      com texto escuro por cima.

   ⚠️ O véu é curto de propósito: forte nos 10% de baixo (onde o nome
   fica) e some aos 30%. O de antes ia até 62% da altura e escurecia
   mais da metade da foto.

   🔄 **O VÉU VOLTOU A SER MARROM em 05/09/2026** (o usuário: "está
   muito claro, dá pra colocar uma sombra marrom?"). Ele chegou a ser
   CLARO por algumas horas, no mesmo dia, quando o pedido foi "letras
   marrom" — mas um véu creme quase opaco vira um bloco pálido
   cobrindo o pé da foto, e foi isso que ele viu.

   ⚠️ **As duas coisas andam juntas e não dá para escolher meio a
   meio:** véu marrom pede letra CREME. Marrom sobre marrom não lê. Se
   um dia o véu clarear de novo, a letra tem que escurecer junto.

   ⚠️ E o que consertou de verdade a letra invisível não foi a cor: foi
   o `z-index`. Sem ele a foto (z-index 2) tapava o véu e o nome caía
   direto no branco da foto de catálogo — 1,11:1.

   🔄 **E O VÉU SAIU DE VEZ em 05/09/2026.** O usuário mostrou os dois
   cartões: *"veja como está cortado"*. Medindo, **nada estava
   cortado** — 100% da altura da foto aparece nas quatro. Era o véu:
   ele escurecia o quarto de baixo da imagem, e é exatamente ali que
   ficam as sandálias e os pés. As sandálias brancas do look terracota
   e o tênis branco do masculino **sumiam dentro do marrom**.

   Renderizei as três saídas no tamanho real e olhei:
     • véu atual (0,92)      -> sandálias e tênis afogados
     • placa + véu leve 0,32 -> aparecem, mas acinzentados
     • placa, SEM véu        -> foto limpa, branco continua branco

   ⚠️ A placa é a MESMA solução da seção da fachada ("A loja que te
   faz sentir bem"), e pelo mesmo motivo escrito lá: **quem segura o
   contraste é a placa, não o escurecimento da foto.** Fundo marrom
   cheio com letra creme lê 10,43:1 em cima de QUALQUER foto — não
   depende do que a Sandra fotografar amanhã.

   O elemento `.sombra` continua no HTML das quatro categorias, mas
   não pinta mais nada. Fica como gancho, caso um dia se queira um
   véu de novo.

   🔄 **E A PLACA FOI DESFEITA no mesmo dia.** Eu tinha lido "veja como
   está cortado" como "o véu está comendo o pé da foto" e trocado o
   letreiro por uma placa. O usuário corrigiu: *"não foi bem isso que
   eu pedi, eu pedi para aumentar a borda do card, esse letreiro tava
   bom daquele jeito"*. O letreiro voltou a ser este — texto creme
   sobre o degradê marrom. **O que ele quer maior é a moldura do
   cartão, não o letreiro.** */
.cartao-categoria .sombra {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to top,
    rgba(69, 54, 38, 0.92) 0%,
    rgba(69, 54, 38, 0.78) 10%,
    rgba(69, 54, 38, 0) 30%
  );
}

/* Nome da categoria, com um fio dourado curto por cima.
   O :not(.em-breve) evita pegar o aviso do card sem foto. */
/* O nome da categoria mora numa PLACA, não solto sobre a foto.

   ⚠️ Isto é o que permitiu apagar o véu. Enquanto o texto ficava
   solto, a única forma de ele ler era escurecer a foto inteira por
   baixo — e o escurecimento comia as sandálias. Com fundo próprio,
   ele lê **10,43:1 em cima de qualquer foto**, inclusive as que a
   Sandra ainda não tirou.

   É a mesma decisão da `.placa-loja`, na seção da fachada, e ecoa a
   placa esmaltada do logo. */
.cartao-categoria span:not(.em-breve) {
  position: absolute;
  bottom: 24px;
  left: 16px;
  right: 16px;
  /* ⚠️ Acima do véu (3), que por sua vez está acima da foto (2). */
  z-index: 4;
  text-align: center;
  /* ⚠️ CREME, porque o véu abaixo é marrom. Medido no ponto exato do
     texto, compondo o degradê com o pior fundo possível:
       foto totalmente BRANCA -> 5,92:1 (topo) e 7,23:1 (base)
       foto totalmente PRETA  -> 12,18:1 e 11,48:1
     Trocar por marrom sem clarear o véu junto deixa o nome invisível. */
  color: var(--blush);
  font-family: var(--fonte-titulo);
  font-size: 23px;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.cartao-categoria span:not(.em-breve)::before {
  content: "";
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 auto 13px;
  /* ⚠️ `--ouro-claro`, e não `--ouro`: o fio cai sobre o véu MARROM,
     e ali o camelo médio some (1,90:1 contra 2,90:1). É o par que o
     site usa no resto — `-claro` para o desenho pequeno em fundo
     escuro, `-texto` em fundo claro. */
  background-color: var(--ouro-claro);
  transition: width 0.32s ease;
}

.cartao-categoria:hover span:not(.em-breve)::before {
  width: 60px;
}

/* Cartão sem foto ainda — moldura dourada e aviso discreto */
.cartao-categoria.sem-imagem {
  background-color: var(--marrom);
}

.cartao-categoria.sem-imagem::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(168, 138, 111, 0.32);
  border-radius: 2px;
  pointer-events: none;
}

.cartao-categoria .em-breve {
  position: absolute;
  top: 46%;
  bottom: auto;
  left: 0;
  right: 0;
  z-index: 2;
  transform: translateY(-50%);
  text-align: center;
  color: var(--ouro-claro);
  font-family: var(--fonte-texto);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* ============================================================
   CANVAS INFINITO DAS MARCAS
   ------------------------------------------------------------
   O cérebro está em js/marcas.js. Aqui é só a aparência.
   ============================================================ */
.secao-marcas {
  padding: 74px 0 84px;
}

.secao-marcas .titulo-seccao {
  margin-bottom: 10px;
}

.secao-marcas .subtitulo-seccao {
  margin-bottom: 34px;
}

/* ⚠️ O marrom é uma CAIXA, não uma faixa de ponta a ponta.
   Como ela mora dentro do .container, tem a mesma largura do resto
   da página — o título, o texto e o canvas ficam na mesma coluna.
   E aqui a sombra FUNCIONA: a caixa é escura sobre o creme do
   fundo, ao contrário dos post-its e do rodapé, onde escuro em
   cima de escuro não aparece (1,1:1) e quem separa é o tom. */
.palco-marcas {
  position: relative;
  background-color: var(--marrom);
  border: 1px solid rgba(168, 138, 111, 0.35);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(30, 22, 16, 0.22);
}

/* ⚠️ touch-action: pan-y — e NÃO `none`, como no componente
   original. Com `none`, o dedo passando por cima desta seção
   deixaria de rolar a página e a pessoa ficaria presa aqui.
   Com pan-y: para cima e para baixo rola a página; para os
   lados arrasta o canvas. */
.canvas-marcas {
  position: relative;
  height: clamp(380px, 46vw, 560px);
  overflow: hidden;
  /* o mesmo arredondamento da caixa: sem isso, no Safari uma
     plaquinha com transform pode escapar pelo canto redondo */
  border-radius: inherit;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.canvas-marcas.arrastando {
  cursor: grabbing;
}

.cena-marcas {
  position: absolute;
  inset: 0;
}

/* Cada plaquinha. O JS escreve tamanho, posição, opacidade e o
   arredondamento — aqui fica só o que não muda. */
.placa-marca {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 0;
  will-change: transform, opacity;
  pointer-events: none;
  background-color: #ffffff;
  overflow: hidden;
  /* ⚠️ Sombra CURTA. O fundo é marrom escuro, e borrão grande em
     fundo escuro não aparece (medido nos post-its: 1,25:1). O que
     o olho enxerga é a linha de contato encostada na plaquinha. */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.45), 0 10px 20px rgba(0, 0, 0, 0.22);
}

/* ⚠️ SEM padding e SEM sobra: a plaquinha já nasce com a proporção
   do arquivo (quem faz essa conta é o js/marcas.js, lendo o tamanho
   real de cada foto), então a imagem preenche ela inteira.
   O `contain` fica de rede de segurança: se um arquivo não abrir e
   a proporção cair no padrão quadrado, o logo aparece menor — mas
   inteiro. Com `cover` nessa hora o nome da marca seria cortado. */
.placa-marca img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* ---------- As quatro bordas dissolvem ----------
   ⚠️ O componente original ocupa a tela inteira, então as beiradas
   nunca aparecem. Dentro de uma caixa elas aparecem, e a plaquinha
   que está passando fica cortada num fio reto — parece defeito.
   Os degradês (nas laterais, no palco; em cima e embaixo, no
   canvas) fazem ela sumir aos poucos.
   São 4 no total porque cada elemento só tem dois ::before/::after
   para dar. */
.palco-marcas::before,
.palco-marcas::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 64px;
  z-index: 200000;
  pointer-events: none;
}

.palco-marcas::before {
  left: 0;
  background: linear-gradient(to right, var(--marrom), transparent);
}

.palco-marcas::after {
  right: 0;
  background: linear-gradient(to left, var(--marrom), transparent);
}

.canvas-marcas::before,
.canvas-marcas::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 58px;
  z-index: 200000;
  pointer-events: none;
}

.canvas-marcas::before {
  top: 0;
  background: linear-gradient(to bottom, var(--marrom), transparent);
}

.canvas-marcas::after {
  bottom: 0;
  background: linear-gradient(to top, var(--marrom), transparent);
}

/* Mais e menos zoom, para quem não tem roda de mouse */
.zoom-marcas {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 200001;
  display: flex;
  gap: 8px;
}

.zoom-marcas button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--tinta);
  background-color: var(--blush);
  border: 1px solid rgba(168, 138, 111, 0.5);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(18, 12, 6, 0.3);
  transition: background-color 0.2s;
}

.zoom-marcas button:hover {
  background-color: #ffffff;
}

.zoom-marcas button svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 700px) {
  .secao-marcas {
    padding: 54px 0 60px;
  }

  .palco-marcas {
    border-radius: 16px;
  }

  .secao-marcas .subtitulo-seccao {
    margin-bottom: 26px;
  }

  .canvas-marcas {
    height: clamp(320px, 78vw, 420px);
  }

  /* Degradê mais curto: em 375px, 64px de cada lado comeria
     quase metade da caixa. */
  .palco-marcas::before,
  .palco-marcas::after {
    width: 26px;
  }

  .canvas-marcas::before,
  .canvas-marcas::after {
    height: 28px;
  }

  .zoom-marcas {
    right: 12px;
    bottom: 12px;
  }
}


/* ---------- História + onde fica (dois cartões marrons) ----------
   Substituiu a antiga faixa com a foto da fachada ao fundo. A foto
   com texto por cima nunca fechou: para o texto ler, o véu tinha que
   escurecer tanto que a loja sumia. Aqui a foto fica INTEIRA e LIMPA
   dentro do cartão, e o texto tem fundo próprio — cada um no seu
   lugar, sem disputar. Escolhido pelo usuário em 25/08/2026, a partir
   de uma referência que ele mandou. */
.secao-historia {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  /* stretch, e nao start: assim os dois cartoes terminam na mesma
     altura mesmo com textos de tamanhos diferentes. Quem ocupa a
     sobra no cartao da direita e o mapa (margin-top: auto). */
  align-items: stretch;
  /* ⚠️ SÓ TOPO E BASE — mesmo bug do `.topo-catalogo` e dos outros
     três acima: entra junto com `.container` (index.html) e o
     atalho `padding` apagaria o respiro lateral. Provado no
     navegador em 08/09/2026: o `.cartao-loja-grande` (a foto da
     fachada) tocava as DUAS bordas da tela, sem margem nenhuma. */
  padding-top: 74px;
  padding-bottom: 74px;
}

.cartao-loja-grande {
  display: flex;
  flex-direction: column;
  background-color: var(--marrom);
  color: var(--blush);
  border: 1px solid rgba(168, 138, 111, 0.4);
  border-radius: 22px;
  padding: 38px 36px 36px;
  box-shadow: 0 16px 38px rgba(43, 33, 24, 0.16);
}

.cartao-loja-grande h2 {
  font-size: clamp(25px, 2.6vw, 32px);
  margin-bottom: 18px;
}

.cartao-loja-grande p {
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(249, 241, 239, 0.86);
}

/* O versículo que a Sandra escolheu fecha a história.
   Fio camelo à esquerda em vez de itálico: itálico em texto pequeno
   sobre fundo escuro fica difícil de ler. */
.versiculo {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--ouro);
  font-size: 14.5px !important;
  color: var(--ouro-claro) !important;
}

.convite {
  margin-bottom: 26px;
}

/* ---------- A foto da fachada dentro do cartão ----------
   Aqui ela aparece INTEIRA e sem véu nenhum: quem segura o texto é
   o cartão, não a foto. A legenda tem fundo escuro próprio, porque
   a foto tem céu claro e parede clara — texto solto em cima dela
   não fecharia contraste em canto nenhum. */
.foto-da-fachada {
  position: relative;
  margin: 26px 0 0;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.foto-da-fachada img {
  width: 100%;
  height: auto;
  display: block;
}

.foto-da-fachada figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 28px);
  padding: 9px 14px;
  background-color: rgba(30, 22, 16, 0.9);
  color: var(--blush);
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.35;
}

/* ---------- Endereço e horário ---------- */
.dados-da-loja {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 26px;
}

.dados-da-loja li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(249, 241, 239, 0.86);
}

.dados-da-loja strong {
  color: var(--blush);
  font-weight: 700;
}

/* A bolinha do ícone */
.dados-da-loja .marcador {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background-color: rgba(168, 138, 111, 0.2);
  border: 1px solid rgba(168, 138, 111, 0.4);
  color: var(--ouro-claro);
}

.dados-da-loja .marcador svg {
  width: 17px;
  height: 17px;
}

/* ---------- O mapa ----------
   Empurrado para o pé do cartão com margin-top:auto, para os dois
   cartões terminarem alinhados mesmo com textos de tamanhos
   diferentes. O mapa vem do Google, num iframe. */
.mapa-da-loja {
  margin-top: auto;
  padding-top: 22px;
  border-radius: 14px;
  overflow: hidden;
  line-height: 0;
}

.mapa-da-loja iframe {
  width: 100%;
  height: 260px;
  border: 0;
  border-radius: 14px;
  display: block;
  /* O mapa do Google é claro e o cartão é marrom: a moldura evita
     o corte seco entre os dois. */
  box-shadow: 0 0 0 1px rgba(168, 138, 111, 0.4);
}

@media (max-width: 900px) {
  /* ⚠️ MESMO BUG DA REGRA BASE (lá em cima), só que aqui dentro do
     media query — por isso a correção de lá sozinha não bastava:
     abaixo de 900px esta é a que valia, e ela repetia o mesmo
     atalho `padding` zerando as laterais. SÓ TOPO E BASE aqui
     também. */
  .secao-historia {
    grid-template-columns: 1fr;
    gap: 22px;
    padding-top: 54px;
    padding-bottom: 54px;
  }

  .cartao-loja-grande {
    padding: 30px 24px 28px;
    border-radius: 18px;
  }

  .mapa-da-loja iframe {
    height: 220px;
  }
}


/* ---------- Prova social, sobre o marrom ---------- */
/* ⚠️ ROSA, e por isso TODO O TEXTO AQUI E ESCURO.
   O rosa e uma cor media: com o creme de antes ele media 2,31:1 e
   as estrelas douradas, 1,22:1 — praticamente invisiveis. E a regra
   da paleta do site, escrita la em cima: cor clara so como FUNDO,
   com texto escuro por cima. Com a tinta cheia da 6,12:1.

   Se um dia alguem devolver o creme aqui, a secao inteira reprova. */
.prova-social {
  background-color: var(--rose-parede);
  color: var(--tinta);
  padding: 86px 0;
  text-align: center;
}

.estrelas {
  /* Era --ouro-claro, que sobre o rosa dava 1,22:1: as estrelas
     sumiam. Tinta cheia da 6,12:1. */
  color: var(--tinta);
  font-size: 17px;
  letter-spacing: 4px;
  margin-bottom: 14px;
}

.nota-google {
  font-family: var(--fonte-titulo);
  font-size: 58px;
  line-height: 1;
  color: var(--tinta);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.nota-google-texto {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  /* ⚠️ Tinta CHEIA. A 90% ela dava 5,16:1 sobre o rosa claro, mas
     caiu para 4,37:1 quando a parede escureceu — abaixo do minimo de
     4,5 para texto pequeno. Cheia da 5,06:1.
     Ou seja: opacidade que passava numa parede nao passa na outra.
     Escureceu o fundo, refaz a conta dos textos. */
  color: var(--tinta);
  margin-top: 10px;
  margin-bottom: 44px;
}

/* ---------- Mural de recados (as avaliações do Google) ----------
   Cada avaliação é um papelzinho colado no mural, tipo post-it:
   papel claro, levemente torto, com a sombra caindo para baixo.

   ⚠️ Regra que não pode quebrar: o papel é sempre CLARO e a letra
   sempre ESCURA. Papel escuro com letra clara aqui reprovaria o
   contraste — e post-it de papel escuro nem parece post-it.

   O quanto cada papel está torto fica na variável --giro, para o
   passar o mouse conseguir levantar o papel sem desentortá-lo. */
.mural-recados {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  max-width: 940px;
  margin: 0 auto;
  padding: 8px 6px 10px;
  text-align: left;
}

.mural-recados > li {
  display: flex;
}

.recado {
  --giro: 0deg;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  min-height: 208px;
  margin: 0;
  padding: 26px 24px 24px;
  background-color: var(--blush);
  color: var(--tinta);
  border-radius: 2px;
  /* ⚠️ ESTA SOMBRA MUDOU DE REGRA em 27/08/2026, e vale entender
     por quê antes de mexer.

     Enquanto a parede era marrom ESCURO, sombra não aparecia:
     medido, preto puro a 75% sobre aquele marrom dava 1,66:1. Por
     isso a sombra era curta e colada — o que o olho via era a
     LINHA DE CONTATO na quina, não o borrão.

     Agora a parede é rosa CLARO, e sombra em fundo claro funciona
     de verdade. Então ela pode voltar a ser o que uma sombra de
     papel é: macia, aberta e caindo para baixo. É o que faz o
     recado parecer papel apoiado na parede, e não um retângulo
     desenhado nela.

     ⚠️ Se um dia a parede voltar a ser escura, esta sombra some e
     é preciso voltar à curta e colada. */
  box-shadow:
    0 1px 2px rgba(43, 33, 24, 0.16),
    0 10px 24px -6px rgba(43, 33, 24, 0.26);
  transform: rotate(var(--giro));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Sombrinha no pé do papel: dá o efeito de folha descolando */
.recado::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 28px;
  background: linear-gradient(to bottom,
    rgba(43, 33, 24, 0), rgba(43, 33, 24, 0.07));
  pointer-events: none;
}

.recado blockquote {
  flex: 1;
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: 17.5px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.recado figcaption {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 14px;
  border-top: 1px solid rgba(43, 33, 24, 0.14);
}

.recado-nome {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.recado-quando {
  font-size: 12.5px;
  /* ⚠️ Era var(--ouro-texto): esse tom mais claro passava nos
     papéis creme antigos (5,44 a 5,77:1), mas as cores de post-it
     de verdade pedidas pelo usuário em 28/08/2026 (amarelo, rosa,
     azul) são mais escuras em dois dos três casos — medido, o rosa
     dava 2,80:1 e o azul 3,85:1, os dois abaixo do mínimo de 4,5.
     var(--tinta) passa nos três (7,34 a 12,72:1). A diferença para
     o nome (que já usa --tinta, em negrito) continua vindo do peso
     e do tamanho, não mais da cor. */
  color: var(--tinta);
}

/* Cada papel de um tom e torto para um lado diferente.
   Se um dia entrar um 4º recado, ele volta ao 1º tom. */
/* ⚠️ COR DE POST-IT DE VERDADE, pedida pelo usuário em 28/08/2026 —
   antes eram três tons de creme quase iguais (o pedido foi
   justamente "mais distintos, cor de post-it de verdade": amarelo,
   rosa, azul).

   ⚠️ Isto NÃO foi só trocar a cor: o texto teve que ser reconferido
   inteiro, porque cor de post-it de verdade é bem mais escura do
   que o creme de antes.
     - blockquote e nome usam var(--tinta): passam nos três
       (7,34 a 12,72:1 — medido, não estimado).
     - a legenda "Avaliação no Google" usava var(--ouro-texto), um
       tom mais claro que passava no creme mas reprovava no rosa
       (2,80:1) e no azul (3,85:1) — foi trocada para var(--tinta)
       também (ver .recado-quando acima). */
.mural-recados > li:nth-child(3n + 1) .recado {
  --giro: -2deg;
  background-color: #FCE87B; /* amarelo */
}

.mural-recados > li:nth-child(3n + 2) .recado {
  --giro: 1.4deg;
  background-color: #FF8FAE; /* rosa */
  margin-top: 16px;
}

.mural-recados > li:nth-child(3n + 3) .recado {
  --giro: -0.9deg;
  background-color: #7FDBFF; /* azul */
}

/* Ao passar o mouse o papel sobe e a sombra se afasta da quina —
   é o afastamento que dá a sensação de levantar, não o borrão. */
.recado:hover {
  transform: rotate(var(--giro)) translateY(-6px);
  box-shadow:
    0 3px 5px rgba(43, 33, 24, 0.14),
    0 20px 38px -8px rgba(43, 33, 24, 0.3);
}

/* Cartão de visita da loja física */
.cartao-loja {
  margin-top: 56px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 34px;
  padding: 22px 34px;
  /* Borda e texto escurecidos junto com a parede. O creme de antes
     media 2,31:1 sobre o rosa; a tinta a 90% da 5,16:1. */
  border: 1px solid rgba(43, 33, 24, 0.5);
  border-radius: 999px;
  font-size: 14.5px;
  /* cheia pelo mesmo motivo do "26 avaliacoes" acima */
  color: var(--tinta);
}

.cartao-loja span {
  display: inline-flex;
  /* ⚠️ Era "center": no endereço, que quebra em duas linhas em
     telas estreitas, isso centralizava o rótulo "Endereço" no meio
     das duas linhas — parecia desalinhado (achado pelo usuário em
     28/08/2026). "flex-start" gruda o rótulo na PRIMEIRA linha, que
     é onde o olho espera encontrá-lo. Nos itens de uma linha só
     (Telefone, Retirada) não muda nada. */
  align-items: flex-start;
  gap: 8px;
}

/* 🚨 CONTRASTE 1,47:1 — praticamente ilegível. Achado medindo em
   08/09/2026, revisão pedida pelo usuário no celular.

   Quando a seção de avaliações virou rosé em 27/08/2026, o `.cartao-loja`
   (o pai) foi escurecido para `--tinta` — o comentário logo acima
   registra a conta (5,16:1). Mas o `.cartao-loja b`, que dá o negrito
   aos rótulos "Endereço" / "Telefone" / "Retirada", continuou com
   `--ouro-claro`: a cor certa para texto pequeno em FUNDO ESCURO,
   sobrando de quando esta parede ainda era marrom.

   ⚠️ `--ouro-texto` (a variante "para fundo claro") TAMBÉM falha aqui
   (1,93:1) — é a mesma "faixa morta" que este documento já registra
   para o tom `--rose-parede`: nem a variante clara nem a escura do
   camelo fecham contraste contra ele. Só o `--tinta` puro passa.

   Por isso: sem `color` nenhum aqui. O rótulo HERDA o `--tinta` do
   pai (5,06:1) — mesma cor do resto do texto — e o negrito continua
   vindo só do `font-weight`, que é o que sempre precisou existir
   para diferenciar "Endereço" do valor ao lado. */
.cartao-loja b {
  font-weight: 500;
}

/* ============================================================
   CATÁLOGO (loja.html)
   ============================================================ */

/* 🚨 O TÍTULO FICAVA COLADO NA BORDA, EM QUALQUER LARGURA — no
   computador e no celular. Achado medindo em 08/09/2026.

   `.container` (a regra geral) dá 24px de respiro nas laterais. Esta
   classe entra JUNTO, no mesmo elemento (`class="container
   topo-catalogo"`, em loja.html, produto.html, checkout.html e
   admin.html), só para dar espaço em cima/embaixo do título — mas o
   `padding` em forma curta ("46px 0 30px") também escreve ZERO nas
   laterais. As duas regras têm a MESMA especificidade (uma classe
   só), e esta vem DEPOIS de `.container` no arquivo — então ganha
   por ORDEM e apaga o respiro lateral do `.container` sem ninguém
   pedir. É a mesma armadilha que este documento já registra em
   outros pontos do CSS.

   ⚠️ Por isso a regra escreve SÓ TOPO e SÓ BASE, nunca o atalho
   `padding`. Assim ela nunca mexe nas laterais, não importa a ordem
   das duas regras no arquivo. */
.topo-catalogo {
  padding-top: 46px;
  padding-bottom: 30px;
}

.caminho {
  font-size: 13.5px;
  color: var(--texto-suave);
  margin-bottom: 18px;
}

.caminho a:hover {
  color: var(--rose-texto);
}

/* Etiqueta que aparece na loja quando a pessoa buscou alguma coisa */
.etiqueta-busca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 18px;
  font-size: 15px;
  color: var(--texto-suave);
}

.etiqueta-busca strong {
  color: var(--tinta);
}

.limpar-busca {
  font-size: 13.5px;
  color: var(--rose-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0;
}

.limpar-busca:hover {
  color: var(--marrom);
}

.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--linha);
  margin-bottom: 36px;
}

.grupo-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.filtro {
  padding: 9px 20px;
  font-size: 13.5px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--texto-suave);
  background-color: var(--papel);
  transition: all 0.2s;
}

.filtro:hover {
  border-color: var(--rose-texto);
  color: var(--rose-texto);
}

.filtro.ativo {
  background-color: var(--marrom);
  border-color: var(--marrom);
  color: var(--blush);
}

.contagem-produtos {
  font-size: 14px;
  color: var(--texto-suave);
}

.grid-produtos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 22px;
  padding-bottom: 80px;
}

.cartao-produto {
  display: flex;
  flex-direction: column;
}

.cartao-produto-imagem {
  position: relative;
  /* 2/3 no lugar de 3/4: a foto passou de 484 para 545px de altura
     em 1280px. A largura nao muda (sao 3 colunas), entao a peca
     aparece mais inteira sem caber menos peca por fileira. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 8px 8px 4px 4px;
  background-color: rgba(168, 138, 111, 0.13);
  margin-bottom: 14px;
}

.cartao-produto-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.cartao-produto:hover .cartao-produto-imagem img {
  transform: scale(1.05);
}

.sem-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ouro);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  padding: 16px;
}

/* Foto provisória: não cresce no hover, para não fingir
   que é uma foto de produto de verdade */
.cartao-produto:hover .foto-provisoria {
  transform: none;
}

.selo {
  position: absolute;
  top: 12px;
  left: 12px;
  background-color: var(--rose);
  color: var(--tinta);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 999px;
}

/* ⚠️ Mesma dupla de cores do selo "parado" (.selo-situacao.parado),
   usada nos pedidos cancelados/devolvidos — já testada e passa AA.
   Reaproveitar em vez de inventar um tom novo. */
.selo-esgotado {
  background-color: #e8e2dd;
  color: #5c4e42;
}

.cartao-produto-categoria {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ouro-texto);
  margin-bottom: 6px;
}

.cartao-produto-nome {
  font-family: var(--fonte-titulo);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.28;
  margin-bottom: 7px;
  /* ⚠️ Nomes com barra ("Estampado/Geometrica") não têm ponto de
     quebra para o navegador — ele trata como uma palavra só. Sem
     isto, essa palavra larga empurra a COLUNA inteira do grid (as
     duas colunas são 1fr, mas o mínimo de cada uma é o maior
     conteúdo que não quebra), e a foto da outra coluna — que segue
     a largura dela via aspect-ratio — fica com altura diferente.
     Achado pelo usuário em 09/09/2026: só a categoria Feminino tem
     nome assim, por isso só ela parecia desalinhada. */
  overflow-wrap: anywhere;
}

.cartao-produto-preco {
  font-size: 16px;
  font-weight: 500;
  color: var(--tinta);
  margin-bottom: 14px;
}

.tamanhos {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.tamanho {
  min-width: 36px;
  padding: 6px 9px;
  font-size: 12.5px;
  text-align: center;
  border: 1px solid var(--linha);
  border-radius: 999px;
  color: var(--texto-suave);
  background-color: var(--papel);
  transition: all 0.15s;
}

.tamanho:hover {
  border-color: var(--rose-texto);
  color: var(--rose-texto);
}

.tamanho.ativo {
  background-color: var(--marrom);
  border-color: var(--marrom);
  color: var(--blush);
}

/* Tamanho esgotado na página da peça: aparece riscado e apagado,
   mas continua clicável — é assim que a pessoa recebe o aviso
   "esse tamanho acabou" em vez de só um botão sem reação nenhuma.
   Especificidade (0,3,0) vence o .tamanho:hover (0,2,0) de propósito:
   passar o mouse não pode sugerir que dá para escolher. */
.tamanho.indisponivel,
.tamanho.indisponivel:hover {
  color: var(--texto-suave);
  background-color: var(--blush);
  border-color: var(--linha);
  text-decoration: line-through;
  opacity: 0.65;
  cursor: not-allowed;
}

.btn-comprar {
  margin-top: auto;
  padding: 12px;
  font-size: 13.5px;
  font-weight: 500;
  background-color: var(--marrom);
  color: var(--blush);
  border-radius: 999px;
  transition: background-color 0.2s;
}

.btn-comprar:hover:not(:disabled) {
  background-color: var(--rose);
  color: var(--tinta);
}

.btn-comprar:disabled {
  background-color: transparent;
  border: 1px solid var(--linha);
  color: var(--texto-suave);
  cursor: not-allowed;
}

.aviso-vazio {
  grid-column: 1 / -1;
  text-align: center;
  padding: 70px 0;
  color: var(--texto-suave);
}

/* ============================================================
   PÁGINA DE PRODUTO (produto.html)
   ------------------------------------------------------------
   Layout em duas colunas: galeria à esquerda, detalhes à direita.
   No celular empilha (galeria em cima, detalhes embaixo).
   ============================================================ */

.pd-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 52px;
  padding: 10px 0 90px;
  align-items: start;
}

/* ---------- Galeria ---------- */
.pd-galeria {
  position: sticky;
  top: 120px;
}

.pd-foto-principal {
  position: relative;
  /* ⚠️ 2/3, e não mais 3/4 (04/09/2026). O corte é "cover", então
     a caixa mais larga que a foto corta EM CIMA E EMBAIXO — e é
     em cima que fica a cabeça da modelo.

     Medido foto por foto: nas fotos de catálogo a folga acima da
     cabeça é de 1,6% a 4,3% da altura, e abaixo dos pés chega a
     ser 0%. Um 3/4 aqui cortava 5,6% de cada lado, ou seja, comia
     o topo do cabelo em quase todas e o pé de algumas.

     A foto mais estreita do acervo é 0,666 (2/3). Nesta proporção
     nenhuma foto perde altura: o corte passa a ser só na largura,
     que é onde sobra fundo. É a mesma proporção do cartão da loja,
     que já estava certa.

     ⚠️ Se um dia entrar foto mais estreita que 2/3, esta conta
     muda — refazer a medição antes de mexer. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 8px;
  background-color: rgba(168, 138, 111, 0.1);
  margin-bottom: 12px;
}

.pd-foto-principal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

.pd-seta {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(249, 241, 239, 0.8);
  border-radius: 50%;
  background: rgba(43, 33, 24, 0.62);
  color: var(--blush);
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  transform: translateY(-50%);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.pd-seta:hover,
.pd-seta:focus-visible {
  background: var(--marrom);
}

.pd-seta-anterior {
  left: 16px;
}

.pd-seta-proxima {
  right: 16px;
}

.pd-seta-anterior:hover,
.pd-seta-anterior:focus-visible {
  transform: translate(-3px, -50%);
}

.pd-seta-proxima:hover,
.pd-seta-proxima:focus-visible {
  transform: translate(3px, -50%);
}

.pd-foto-principal .selo {
  top: 16px;
  left: 16px;
  font-size: 11.5px;
  padding: 6px 14px;
}

.pd-miniaturas {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.pd-miniatura {
  flex-shrink: 0;
  width: 72px;
  height: 92px;
  border-radius: 5px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s;
  background: none;
}

.pd-miniatura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-miniatura:hover {
  border-color: var(--ouro);
}

.pd-miniatura.ativa {
  border-color: var(--marrom);
}

/* ---------- Detalhes ---------- */
.pd-detalhes {
  padding-top: 8px;
}

.pd-categoria {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ouro-texto);
  margin-bottom: 10px;
}

/* O estoque do tamanho escolhido, ao lado da categoria. Sem
   maiúscula forçada nem o mesmo espaçamento largo — é informação
   complementar, não é o rótulo principal da linha. */
.pd-estoque {
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  color: var(--texto-suave);
}

.pd-nome {
  font-family: var(--fonte-titulo);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--tinta);
  margin-bottom: 18px;
}

.pd-precos {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}

.pd-preco {
  font-family: var(--fonte-titulo);
  font-size: 30px;
  font-weight: 500;
  color: var(--tinta);
}

.pd-preco-antigo {
  font-size: 17px;
  color: var(--texto-suave);
  text-decoration: line-through;
}

.pd-parcelamento {
  font-size: 13.5px;
  color: var(--texto-suave);
  margin-bottom: 26px;
}

.pd-descricao {
  padding: 22px 0;
  border-top: 1px solid var(--linha);
  margin-bottom: 4px;
}

.pd-descricao p {
  font-size: 15px;
  color: var(--texto-suave);
  line-height: 1.7;
}

.pd-secao {
  padding: 20px 0;
  border-top: 1px solid var(--linha);
}

.pd-rotulo {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tinta);
  margin-bottom: 12px;
}

.pd-esgotado-aviso {
  font-size: 14.5px;
  color: var(--texto-suave);
  margin: 0 0 12px;
}

/* Aviso de "esse tamanho acabou", ao tentar escolher um tamanho
   esgotado. Mesmo token de cor dos erros de formulário do site. */
.pd-tamanho-aviso {
  font-size: 13.5px;
  color: var(--erro);
  margin: 10px 0 0;
}

.pd-detalhes .tamanhos {
  margin-bottom: 0;
}

.pd-detalhes .tamanho {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
}

.pd-btn-comprar {
  width: 100%;
  margin-top: 24px;
  padding: 16px;
  font-size: 15.5px;
}

.pd-btn-whatsapp {
  width: 100%;
  margin-top: 10px;
  padding: 14px;
  font-size: 14px;
  color: var(--sucesso);
  border-color: var(--sucesso);
  background-color: var(--papel);
}

.pd-btn-whatsapp:hover {
  background-color: rgba(47, 107, 79, 0.06);
  border-color: var(--sucesso);
  color: var(--sucesso);
}

.pd-btn-whatsapp svg {
  flex-shrink: 0;
}

.pd-extras {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--linha);
  border-radius: 8px;
  background-color: var(--papel);
}

.pd-extras p {
  font-size: 13.5px;
  color: var(--texto-suave);
  line-height: 2.1;
}

/* ============================================================
   CARRINHO LATERAL
   ============================================================ */

.fundo-escuro {
  position: fixed;
  inset: 0;
  background-color: rgba(43, 33, 24, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s, visibility 0.28s;
  z-index: 200;
}

.fundo-escuro.aberto {
  opacity: 1;
  visibility: visible;
}

.carrinho {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 420px;
  max-width: 92vw;
  background-color: var(--blush);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 32px rgba(43, 33, 24, 0.16);
}

.carrinho.aberto {
  transform: translateX(0);
}

.carrinho-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border-bottom: 1px solid var(--linha);
}

.carrinho-topo h2 {
  font-size: 22px;
}

.btn-fechar {
  font-size: 26px;
  line-height: 1;
  color: var(--texto-suave);
}

.btn-fechar:hover {
  color: var(--rose-texto);
}

/* Mesma dupla de cor do .aviso-pendencia e do selo "espera" —
   já testada, passa AA. Some sozinho depois de alguns segundos. */
.carrinho-aviso {
  margin: 14px 26px 0;
  padding: 12px 14px;
  background-color: #f7ebd6;
  color: #6b4a12;
  border-radius: 6px;
  font-size: 13.5px;
  line-height: 1.5;
}

.carrinho-itens {
  flex: 1;
  overflow-y: auto;
  padding: 18px 26px;
}

.carrinho-vazio {
  text-align: center;
  color: var(--texto-suave);
  padding: 56px 0;
  font-size: 15px;
}

.item-carrinho {
  display: flex;
  gap: 15px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}

.item-carrinho-imagem {
  width: 74px;
  height: 96px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 5px;
  background-color: rgba(168, 138, 111, 0.18);
}

.item-carrinho-info {
  flex: 1;
  min-width: 0;
}

.item-carrinho-nome {
  font-size: 14.5px;
  margin-bottom: 3px;
}

.item-carrinho-detalhe {
  font-size: 12.5px;
  color: var(--texto-suave);
  margin-bottom: 8px;
}

.item-carrinho-preco {
  font-size: 14.5px;
  font-weight: 500;
}

.controle-quantidade {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
}

/* ⚠️ `:not(.btn-remover)`: sem isso esta regra também prende o botão
   "remover" — que é um <button> comum dentro de `.controle-quantidade`
   — numa caixa quadrada de 27px, onde a palavra não cabe numa linha
   só. Corrigido junto com a versão de 780px (ver o comentário lá,
   é a mesma causa). */
.controle-quantidade button:not(.btn-remover) {
  width: 27px;
  height: 27px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  background-color: var(--papel);
}

.controle-quantidade button:hover {
  border-color: var(--rose-texto);
  color: var(--rose-texto);
}

.controle-quantidade span {
  font-size: 14px;
  min-width: 18px;
  text-align: center;
}

.btn-remover {
  font-size: 12.5px;
  color: var(--texto-suave);
  text-decoration: underline;
  margin-left: auto;
}

.btn-remover:hover {
  color: var(--rose-texto);
}

.carrinho-rodape {
  padding: 20px 26px;
  border-top: 1px solid var(--linha);
  background-color: var(--papel);
}

.linha-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
  font-size: 16px;
}

.linha-total strong {
  font-family: var(--fonte-titulo);
  font-size: 25px;
}

.aviso-parcelamento {
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 16px;
}

/* ============================================================
   FORMULÁRIOS (checkout e conta)
   ============================================================ */

.bloco-form {
  background-color: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 20px;
}

.bloco-form h2 {
  font-size: 22px;
  margin-bottom: 22px;
}

.campo {
  margin-bottom: 18px;
}

.campo label {
  display: block;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--tinta);
  margin-bottom: 7px;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 13px 15px;
  font-size: 15.5px;
  color: var(--tinta);
  background-color: var(--blush);
  border: 1px solid var(--linha);
  border-radius: 7px;
  transition: border-color 0.2s, background-color 0.2s;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: #b9a79e;
}

.campo textarea {
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--rose-texto);
  background-color: var(--papel);
}

.campo input[aria-invalid="true"] {
  border-color: var(--erro);
}

.campo .ajuda {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--texto-suave);
}

.campo .erro-campo {
  display: none;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--erro);
}

.campo .erro-campo.visivel {
  display: block;
}

.linha-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

/* ---------- Checkout ---------- */
/* ⚠️ SÓ TOPO E BASE — nunca o atalho `padding`. Este elemento
   entra junto com `.container` no HTML ("container checkout"); o
   atalho escreveria zero nas laterais e apagaria o respiro de 24px
   do `.container` (achado em 08/09/2026 no mesmo bug que já tinha
   quebrado `.topo-catalogo` — ver o comentário lá). */
.checkout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 44px;
  padding-top: 20px;
  padding-bottom: 90px;
  align-items: start;
}

/* ------------------------------------------------------------
   PAGAMENTO — o cliente paga na tela da InfinitePay
   ------------------------------------------------------------
   ⚠️ Aqui NÃO existe (e não pode existir) estilo de campo de cartão.
   O cartão é digitado no site da InfinitePay. Se um dia aparecer um
   `.campo-cartao` neste arquivo, alguém quebrou a regra.
   ------------------------------------------------------------ */
.pagamento-explica {
  font-size: 15px;
  line-height: 1.65;
  color: var(--tinta);
  margin: 0 0 14px;
}

.pagamento-selo {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ouro-texto);
  background-color: rgba(168, 138, 111, 0.09);
  border-left: 2px solid var(--ouro);
  padding: 11px 14px;
  border-radius: 0 4px 4px 0;
  margin: 0;
}

.pagamento-selo strong {
  color: var(--tinta);
  font-weight: 600;
}

/* O recado de erro do pagamento. Fundo claro e tinta escura: o
   contrário reprovaria contraste, como em todo selo do site. */
.erro-pagamento {
  margin: 14px 0 0;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #7a1f28;
  background-color: #fbeaec;
  border: 1px solid rgba(122, 31, 40, 0.22);
  border-radius: 4px;
}

.resumo {
  position: sticky;
  top: 110px;
  background-color: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 30px;
}

.resumo h2 {
  font-size: 22px;
  margin-bottom: 22px;
}

.resumo-itens {
  margin-bottom: 20px;
}

.resumo-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
}

.resumo-item-nome {
  color: var(--texto-suave);
}

.resumo-linha {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  margin-bottom: 11px;
}

.resumo-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 17px;
  margin-top: 6px;
  border-top: 1px solid var(--linha);
  font-size: 16.5px;
}

.resumo-total strong {
  font-size: 27px;
  font-family: var(--fonte-titulo);
}

.selos-confianca {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
  font-size: 13.5px;
  color: var(--texto-suave);
  line-height: 2;
}

/* Aviso (info / atenção) */
.aviso {
  padding: 16px 18px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.55;
  background-color: rgba(168, 138, 111, 0.14);
  border: 1px solid rgba(168, 138, 111, 0.4);
  color: var(--tinta);
}

.aviso strong {
  font-weight: 500;
}

/* ============================================================
   PÁGINA DE CONTA (login / cadastro)
   ============================================================ */

.pagina-conta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px 90px;
}

.caixa-conta {
  width: 100%;
  max-width: 460px;
}

.conta-topo {
  text-align: center;
  margin-bottom: 28px;
}

.conta-topo img {
  height: 78px;
  width: auto;
  margin: 0 auto 18px;
}

.conta-topo h1 {
  font-size: 31px;
  margin-bottom: 8px;
}

.conta-topo p {
  color: var(--texto-suave);
  font-size: 15px;
}

/* Abas Entrar / Criar conta */
.abas {
  display: flex;
  gap: 6px;
  padding: 5px;
  background-color: rgba(168, 138, 111, 0.14);
  border-radius: 999px;
  margin-bottom: 26px;
}

.aba {
  flex: 1;
  padding: 11px;
  font-size: 14.5px;
  font-weight: 500;
  border-radius: 999px;
  color: #6b5449; /* um pouco mais escuro que o texto-suave, para ler sobre a faixa dourada */
  transition: background-color 0.2s, color 0.2s;
}

.aba.ativa {
  background-color: var(--papel);
  color: var(--tinta);
  box-shadow: 0 1px 4px rgba(43, 33, 24, 0.09);
}

/* Botões sociais */
.botoes-sociais {
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 24px;
}

.btn-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 13px;
  font-size: 15px;
  font-weight: 500;
  background-color: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 999px;
  transition: border-color 0.2s, background-color 0.2s;
}

.btn-social:hover {
  border-color: var(--ouro);
  background-color: #fffdfc;
}

.btn-social svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* Divisor "ou" */
.divisor {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--texto-suave);
}

.divisor::before,
.divisor::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: var(--linha);
}

.esqueci {
  display: block;
  text-align: right;
  font-size: 13.5px;
  color: var(--texto-suave);
  margin-top: -8px;
  margin-bottom: 18px;
}

.esqueci:hover {
  color: var(--rose-texto);
}

.rodape-form {
  margin-top: 20px;
  text-align: center;
  font-size: 14px;
  color: var(--texto-suave);
}

.rodape-form button {
  color: var(--rose-texto);
  font-weight: 500;
  text-decoration: underline;
}

.termos {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--texto-suave);
  text-align: center;
  line-height: 1.6;
}

/* Mensagens de retorno do formulário */
.mensagem {
  display: none;
  padding: 13px 16px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.mensagem.visivel {
  display: block;
}

.mensagem.erro {
  background-color: rgba(168, 50, 63, 0.09);
  border: 1px solid rgba(168, 50, 63, 0.3);
  color: var(--erro);
}

.mensagem.sucesso {
  background-color: rgba(47, 107, 79, 0.09);
  border: 1px solid rgba(47, 107, 79, 0.3);
  color: var(--sucesso);
}

/* Painel de quem já está logado */
.painel-logado {
  text-align: center;
}

.avatar-conta {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background-color: var(--marrom);
  color: var(--blush);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fonte-titulo);
  font-size: 30px;
}

.dados-conta {
  margin: 22px 0 26px;
  text-align: left;
  font-size: 14.5px;
}

.dados-conta div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--linha);
}

.dados-conta dt {
  color: var(--texto-suave);
}

.dados-conta dd {
  text-align: right;
  word-break: break-word;
}

/* Estado de carregando dentro do botão */
.btn.carregando {
  pointer-events: none;
  opacity: 0.7;
}

/* ============================================================
   RODAPÉ
   ============================================================ */

/* ---------- Rodapé ----------
   ⚠️ O rodapé é MAIS FUNDO que a seção acima dele, e isso não é
   enfeite. A prova social também é `--marrom`: com o rodapé no mesmo
   tom, os dois viravam **1262px de marrom seguido** (1,4 tela) sem
   nenhuma divisa — a diferença entre eles media 1,00:1, ou seja, não
   existia. Com `--marrom-fundo` o degrau vai a 1,54:1 e dá para ver
   onde um acaba e o outro começa.

   Escurecer o fundo só melhora o texto: sobre `--marrom-fundo` o
   titulinho camelo passa de 5,50 para 8,45:1, o texto de 6,27 para
   8,72:1, a linha do copyright de 4,89 para 6,41:1 e o link no hover
   de 4,51 para 6,93:1. */
/* ⚠️ VOLTOU A SER --marrom, e agora PODE.
   Este arquivo dizia que o rodape nao podia ser --marrom, e estava
   certo NAQUELE contexto: a secao de cima tambem era marrom, os
   dois no mesmo tom viravam 1262px de escuro seguido e a diferenca
   entre eles media 1,00:1 — nao existia divisa.

   Com a secao de avaliacoes em ROSA, o problema deixou de existir:
   o degrau entre ela e este rodape mede 4,51:1, contra os 1,54:1
   que o --marrom-fundo conseguia. A cor especial nao e mais
   necessaria AQUI.

   ⚠️ Se um dia a secao de cima voltar a ser escura, este rodape
   tem que voltar para --marrom-fundo — senao a divisa some de novo. */
.rodape {
  position: relative;
  background-color: var(--marrom);
  color: var(--blush);
  margin-top: 0;
}

/* ⚠️ O gradiente de passagem foi REMOVIDO em 27/08/2026.
   Ele existia para amaciar um degrau que quase nao existia (marrom
   sobre marrom, 1,54:1). Agora a secao de cima e rosa clara e o
   degrau mede 4,51:1 — ele se ve sozinho. Um borrao preto entre uma
   parede rosa e um rodape marrom nao amacia nada: sujaria a divisa.

   Se a secao de cima voltar a ser escura, este gradiente volta. */

/* ⚠️ Encolheu de novo em 27/08/2026 (pedido do usuario). Ja tinha
   ido de 514 para 419px em 25/08; agora o respiro de cima cai de 44
   para 34, o de baixo de 30 para 22, o vao de 38 para 32 e o logo
   de 50 para 44px.

   ⚠️ O que NAO encolhe e a altura de toque dos links: no celular
   eles precisam continuar com 44px. Mexeu aqui, confere la. */
/* ⚠️ SÓ TOPO E BASE — mesmo bug do `.topo-catalogo`, `.checkout`,
   `.documento`, `.secao-categorias` e `.secao-historia` (ver os
   comentários deles): entra junto com `.container` no HTML
   ("container rodape-grid") e o atalho `padding` apagaria o respiro
   lateral. Achado de novo pelo usuário em 08/09/2026 — o rodapé
   inteiro colava nas duas bordas. */
.rodape-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
  padding-top: 34px;
  padding-bottom: 22px;
}

.rodape-logo {
  height: 44px;
  width: auto;
  margin-bottom: 11px;
}

.rodape h4 {
  font-family: var(--fonte-texto);
  font-size: 11.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ouro-claro);
  margin-bottom: 12px;
}

.rodape p,
.rodape a {
  font-size: 14.5px;
  color: rgba(249, 241, 239, 0.72);
  line-height: 1.6;
}

.rodape a {
  display: block;
  transition: color 0.2s;
}

.rodape a:hover {
  color: var(--rose);
}

/* Opacidade 0,6 e não menos: em 0,45 a linha do rodapé media
   3,46:1 sobre o marrom e reprovava. Hoje, sobre o `--marrom-fundo`,
   os mesmos 0,6 dão 6,41:1. */
.rodape-base {
  border-top: 1px solid rgba(249, 241, 239, 0.12);
  padding: 12px 0;
  text-align: center;
  font-size: 12.5px;
  color: rgba(249, 241, 239, 0.6);
}

/* ============================================================
   BOTÃO FLUTUANTE (WhatsApp / contato)
   ============================================================ */

.btn-flutuante {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 150;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background-color: var(--rose);
  color: var(--tinta);
  padding: 13px 22px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: 0 8px 26px rgba(43, 33, 24, 0.26);
  transition: background-color 0.2s, transform 0.2s;
}

.btn-flutuante:hover {
  background-color: var(--marrom);
  color: var(--blush);
  transform: translateY(-2px);
}

/* Escondido enquanto o cliente está no topo da Home
   (ver prepararBotaoContato em js/comum.js) */
.btn-flutuante.escondido {
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  pointer-events: none;
}

/* ============================================================
   PÁGINA EM CONSTRUÇÃO
   ============================================================ */

.em-construcao {
  text-align: center;
  padding: 110px 24px;
}

.em-construcao h1 {
  font-size: 36px;
  margin-bottom: 16px;
}

.em-construcao p {
  color: var(--texto-suave);
  max-width: 460px;
  margin: 0 auto;
}

/* ============================================================
   ANIMAÇÃO DE ENTRADA
   ============================================================ */

@keyframes surgir {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.surge {
  animation: surgir 0.7s ease both;
}

.surge-2 {
  animation-delay: 0.1s;
}

.surge-3 {
  animation-delay: 0.2s;
}

/* Respeita quem prefere menos animação */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   RESPONSIVO
   ============================================================ */

@media (max-width: 1300px) {
  /* A foto estreita já em 1300 (e não 1150) porque, com o menu
     agrupado à esquerda na Home, entre 1150 e 1300 ele encostava
     na foto — medido: -2px de folga aos 1160.
     Lembrar: a media query mede a janela inteira e o layout usa a
     largura útil, sem a barra de rolagem (~15px de diferença). */
  .hero-texto {
    max-width: 400px;
  }

  .hero-pilha {
    width: 42%;
  }

  .grid-produtos {
    grid-template-columns: repeat(3, 1fr);
  }

}

/* O hero empilha antes das outras seções: com a foto colada na
   direita e a tira de trás escapando 62px, o texto já não cabe
   ao lado abaixo de ~940px. Medido: aos 880px encostava. */
@media (max-width: 940px) {
  /* No celular o hero empilha: a pilha de fotos vira uma faixa
     larga em cima (ainda encostando no cabeçalho) e o texto
     desce para baixo dela, em fundo escuro. */
  .hero {
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
  }

  .hero-conteudo {
    min-height: 0;
  }

  .hero-texto {
    max-width: 100%;
    padding: 40px 0 56px;
  }

  .hero-texto .texto-apoio {
    max-width: 100%;
  }

  .hero-pilha {
    position: relative;
    width: 100%;
    height: var(--altura-foto-mobile);
  }

  /* A foto sobe por trás do cabeçalho aqui também: assim o
     cabeçalho fica sempre sobre a foto (clareada no topo) e
     nunca sobre o degradê escuro, onde o texto escuro sumiria */
  body[data-pagina="inicio"] .hero {
    padding-top: 0;
  }

  body[data-pagina="inicio"] .hero-pilha {
    margin-top: 0;
  }

  /* No celular não sobra espaço para a tira aparecer: qualquer
     deslocamento some atrás do cabeçalho ou da borda. Então aqui
     as fotos só se cruzam. O nome do look e o "Um de dois" logo
     abaixo é que avisam que existe mais de uma. */
  .hero-carta {
    transition: opacity 0.6s ease;
  }

  .hero-carta.atras {
    transform: none;
    opacity: 0;
    pointer-events: none;
  }

  .hero-carta.frente {
    transform: none;
    opacity: 1;
    box-shadow: none;
  }

  .hero-carta.atras .veu {
    opacity: 0;
  }

  .hero-carta img {
    object-position: 50% 10%;
  }

  .hero::before {
    display: none;
  }

  /* A dica não cabe junto da faixa de foto */
  .hero-dica {
    display: none;
  }
}

/* ⚠️ A busca sai da barra em 900px, e não nos 700px do menu.
   Entre 700 e 900 o cabeçalho ainda mostra os 5 links de categoria;
   com o campo de busca junto, o conjunto passava da largura e
   empurrava as ações para fora. Medido, não chutado. */
@media (max-width: 900px) {
  .btn-busca-mobile {
    display: inline-flex;
  }

  /* Escondida por padrão; a lupa põe a classe .aberta e ela
     aparece numa faixa própria, por baixo do cabeçalho.

     ⚠️ Era "calc(100% + 14px)" — o mesmo bug que já tinha sido
     achado e corrigido no `.menu` em 28/08/2026 (ver o comentário
     lá), só que nunca replicado aqui: sobrava uma tira do fundo da
     página entre o cabeçalho e a busca, e ela parecia um painel
     solto em vez de uma continuação do cabeçalho. Achado de novo
     pelo usuário em 08/09/2026. Encostado (100%), vira extensão
     direta do cabeçalho — igual ao menu. */
  .busca-cabecalho {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    padding: 10px 24px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top-color: rgba(168, 138, 111, 0.22);
    border-bottom-color: rgba(168, 138, 111, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }

  /* Na Home o cabeçalho é transparente no topo: a faixa da busca
     precisa do marrom cheio por baixo, senão o campo fica sobre a
     foto e o texto some. */
  body[data-pagina="inicio"] .cabecalho:not(.solido) .busca-cabecalho {
    margin-left: 0;
    background-color: var(--marrom);
  }

  .busca-cabecalho.aberta {
    display: flex;
  }

  .busca-cabecalho input {
    width: 100%;
    height: 44px;
    /* 16px obrigatorio: campo com fonte menor que isso faz o iPhone
       dar zoom sozinho quando a pessoa toca para digitar, e a pagina
       fica torta. No computador o campo continua com 14px. */
    font-size: 16px;
  }
}

@media (max-width: 860px) {
  /* Os três papéis viram uma pilha só. Entortar pouco aqui:
     torto demais numa coluna só encosta a quina de um no outro. */
  .mural-recados {
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 460px;
  }

  .mural-recados > li:nth-child(3n + 1) .recado {
    --giro: -1.2deg;
  }

  .mural-recados > li:nth-child(3n + 2) .recado {
    --giro: 0.9deg;
    margin-top: 0;
  }

  .mural-recados > li:nth-child(3n + 3) .recado {
    --giro: -0.6deg;
  }

  .recado {
    min-height: 0;
  }

  .pd-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 0;
  }

  .pd-galeria {
    position: relative;
    top: 0;
  }

  /* ⚠️ AQUI TINHA UM aspect-ratio: 4/5 QUE FOI REMOVIDO
     (04/09/2026). Ele era MAIS LARGO que o do computador (0,80
     contra 0,75), apesar do comentário antigo dizer "mais alta" —
     e num corte "cover" mais largo significa cortar mais em cima e
     embaixo. Medido: comia 8,3% de cada ponta, ou seja, o topo da
     cabeça e o pé da modelo, justamente no aparelho em que a foto
     é a coisa principal da tela.

     Agora a proporção é uma só (2/3, lá em cima), em um lugar só.
     Duas definições da mesma propriedade em blocos diferentes é
     como o rodapé quebrou em 28/08: a de baixo vence por ordem, e
     alguém descobre meses depois. */

  .olho {
    justify-content: center;
  }

  .olho::before {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
    max-width: 70px;
  }

  .olho::after {
    max-width: 70px;
  }

  .hero-texto .texto-apoio {
    margin-left: auto;
    margin-right: auto;
  }

  .hero-botoes {
    justify-content: center;
    padding-bottom: 44px;
  }

  .checkout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .resumo {
    position: static;
  }
}

@media (max-width: 700px) {
  .cabecalho-interno {
    justify-content: space-between;
    gap: 14px;
  }

  .botao-icone {
    width: 44px;
    height: 44px;
  }


  .logo img {
    height: 56px;
  }

  .acoes-cabecalho {
    gap: 14px;
    margin-right: 0 !important;
  }

  .secao {
    padding: 54px 0;
  }

  .grid-categorias {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .grid-produtos {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 14px;
  }

  .prova-social {
    padding: 62px 0;
  }

  /* 🚨 "Endereço" / "Telefone" / "Retirada" não formavam uma lista
     alinhada — cada um começava numa coluna X diferente. Achado pelo
     usuário no celular em 08/09/2026, e medido: em 375px "Endereço"
     começava em x=49, "Telefone" em x=102, "Retirada" em x=134.

     ⚠️ A primeira suspeita foi o `justify-content: center` da regra
     base — mas mudar ele não mudou nada na tela. A causa de
     verdade estava AQUI: com `flex-direction: column`, o eixo que
     `align-items` controla deixa de ser o vertical e passa a ser o
     HORIZONTAL. `center` centralizava cada linha (Endereço,
     Telefone, Retirada) por conta própria — e como elas têm
     larguras diferentes, cada uma começava num X diferente.
     `flex-start` alinha as três à esquerda, formando a lista. */
  .cartao-loja {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    border-radius: 18px;
    padding: 20px 24px;
  }

  .linha-campos {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* 16px evita que o iPhone dê zoom sozinho ao tocar no campo */
  .campo input,
  .campo select,
  .campo textarea {
    font-size: 16px;
  }

  .bloco-form,
  .resumo {
    padding: 22px;
  }

  /* ⚠️ Mesmo bug da regra base: SÓ TOPO E BASE, nunca o atalho. */
  .rodape-grid {
    grid-template-columns: 1fr;
    gap: 26px;
    padding-top: 36px;
    padding-bottom: 26px;
  }

  /* ⚠️ 44px de altura em cada link do rodapé: no dedo, um link de
     23px é quase impossível de acertar. Em coluna única os 6 links
     esticariam o rodapé em ~126px, então os de categoria viram DUAS
     colunas — assim o alvo cresce e a altura fica quase igual. */
  .rodape a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .rodape-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
  }

  .rodape-links h4 {
    grid-column: 1 / -1;
  }

  .btn-flutuante {
    bottom: 16px;
    right: 16px;
    padding: 12px 18px;
    font-size: 13.5px;
  }

  .faixa-avisos {
    font-size: 11.5px;
  }
}

/* Só em telas bem pequenas o catálogo vira uma coluna.
   Nos celulares comuns, duas colunas rendem mais na hora de olhar. */
@media (max-width: 340px) {
  .grid-produtos {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   PAINEL DA LOJA (admin.html)
   ------------------------------------------------------------
   Pensado para a Sandra usar no CELULAR, dentro da loja:
   botões grandes, uma coluna, nada de arrastar coisinha.

   As cores seguem a regra da paleta: rosa e camelo só como
   FUNDO com texto escuro; para texto em fundo claro usa-se a
   variante -texto.
   ============================================================ */

/* Atalho para o painel, no topo do site. Só aparece para
   quem cuida da loja (o JS decide). */
.link-painel {
  font-weight: 500;
}

.cabecalho .link-painel {
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.admin-aviso {
  padding: 60px 0;
  text-align: center;
  color: var(--texto-suave);
  font-size: 15px;
}

/* ---------- Barra de cima: filtros + nova peça ---------- */
.admin-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--linha);
}

.admin-contagem {
  margin: 16px 0 20px;
  font-size: 13.5px;
  color: var(--texto-suave);
}

/* ---------- Lista das peças ---------- */
.admin-lista {
  display: grid;
  gap: 14px;
  padding-bottom: 60px;
}

.admin-item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  padding: 14px;
  background-color: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(43, 33, 24, 0.05);
}

.admin-item-foto {
  width: 88px;
  height: 112px;
  object-fit: cover;
  border-radius: 4px;
  background-color: var(--blush);
}

.admin-item-sem-foto .admin-item-foto {
  opacity: 0.55;
}

.admin-item-categoria {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ouro-texto);
}

.admin-selo-fora {
  background-color: var(--marrom);
  color: var(--blush);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
}

.admin-item-nome {
  font-family: var(--fonte-titulo);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  margin: 5px 0 4px;
}

.admin-item-preco {
  font-size: 15px;
  font-weight: 700;
  color: var(--tinta);
}

.admin-item-tamanhos {
  margin-top: 5px;
  font-size: 12.5px;
  color: var(--texto-suave);
}

.admin-item-acoes {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--linha);
}

.admin-item-acoes .btn {
  padding: 9px 20px;
  font-size: 13.5px;
}

/* ---------- Botão só de texto ---------- */
.btn-texto {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--rose-texto);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 2px;
}

.btn-texto:hover {
  color: var(--marrom);
}

.btn-apagar {
  color: var(--erro);
}

/* ---------- Formulário ---------- */
.admin-form {
  padding-bottom: 80px;
}

.admin-form-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.admin-form-topo h2 {
  font-family: var(--fonte-titulo);
  font-size: 24px;
  font-weight: 500;
}

.admin-dica {
  font-size: 13px;
  line-height: 1.55;
  color: var(--texto-suave);
  margin-bottom: 14px;
}

.admin-status {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--ouro-texto);
  min-height: 20px;
}

.admin-erro {
  background-color: #fbecee;
  border-left: 3px solid var(--erro);
  color: var(--erro);
  padding: 14px 16px;
  border-radius: 4px;
  font-size: 14.5px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ---------- Fotos ---------- */
.admin-fotos {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-sem-foto {
  margin: 0;
}

.admin-foto {
  position: relative;
  width: 108px;
}

.admin-foto img {
  width: 108px;
  height: 140px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--linha);
  background-color: var(--blush);
}

.admin-foto-capa {
  position: absolute;
  top: 6px;
  left: 6px;
  background-color: var(--rose);
  color: var(--tinta);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
}

.admin-foto-acoes {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}

.admin-foto-acoes button {
  flex: 1;
  min-height: 34px;
  font-size: 15px;
  line-height: 1;
  color: var(--tinta);
  background-color: var(--blush);
  border: 1px solid var(--linha);
  border-radius: 4px;
  cursor: pointer;
}

.admin-foto-acoes button:hover {
  background-color: var(--papel);
  border-color: var(--ouro);
}

.admin-enviar-foto {
  display: block;
  padding: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--rose-texto);
  background-color: var(--blush);
  border: 2px dashed var(--ouro);
  border-radius: 6px;
  cursor: pointer;
}

.admin-enviar-foto:hover {
  background-color: var(--papel);
}

/* ---------- Tamanhos ---------- */
.admin-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.admin-grade-tamanhos {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.admin-tamanho-linha {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-tamanho-linha .tamanho {
  min-width: 56px;
  min-height: 44px;
}

.admin-estoque {
  width: 56px;
  padding: 7px 8px;
  font-size: 14px;
  text-align: center;
  color: var(--tinta);
  background-color: var(--blush);
  border: 1px solid var(--linha);
  border-radius: 6px;
}

.admin-tamanho-livre {
  margin-bottom: 18px;
}

/* A caixinha de "Frete padrão", no topo da aba Produtos.
   ⚠️ Leva a classe "campo" também (no HTML), para o rótulo e o
   campo de texto usarem o mesmo estilo do resto do formulário —
   sem repetir essas regras aqui. */
.admin-frete {
  background-color: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 22px;
}

.admin-linha-botao {
  display: flex;
  gap: 10px;
}

.admin-linha-botao input {
  flex: 1;
}

.admin-linha-botao .btn {
  white-space: nowrap;
  padding: 12px 20px;
}

/* ---------- Caixinhas de marcar ---------- */
.admin-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  font-size: 15px;
  cursor: pointer;
}

.admin-checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--rose-texto);
  flex-shrink: 0;
}

/* ---------- Rodapé do formulário ---------- */
.admin-rodape-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
}

.admin-rodape-form .btn-apagar {
  margin-left: auto;
}

.admin-acoes-topo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ---------- Telas maiores: a lista vira duas colunas ---------- */
@media (min-width: 760px) {
  .admin-lista {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .admin-barra {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-barra .btn {
    width: 100%;
  }

  .admin-rodape-form .btn {
    flex: 1;
  }

  .admin-rodape-form .btn-apagar {
    margin-left: 0;
    width: 100%;
    text-align: center;
    padding-top: 14px;
  }
}

/* ============================================================
   PAINEL — ABAS E PEDIDOS
   ------------------------------------------------------------
   ⚠️ As cores dos selos de situação são tintas ESCURAS sobre
   fundos CLAROS. Não inverter: o contraste medido depende disso,
   e é a mesma razão pela qual a paleta do site tem três tons de
   cada cor (ver a tabela no CLAUDE.md).
   ============================================================ */
.admin-abas {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(168, 138, 111, 0.4);
  margin-bottom: 26px;
}

.admin-aba {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--fonte-texto);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--ouro-texto);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  /* 44px de altura mínima: é alvo de toque */
  min-height: 44px;
}

.admin-aba:hover {
  color: var(--tinta);
}

.admin-aba.ativa {
  color: var(--tinta);
  border-bottom-color: var(--marrom);
}

/* O número de pedidos novos, em cima da aba */
.admin-aba-selo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--tinta);
  background-color: var(--rose);
  border-radius: 999px;
}

/* ---------- Uma linha da lista de pedidos ---------- */
.pedido-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 16px 18px;
  background-color: #fff;
  border: 1px solid rgba(168, 138, 111, 0.32);
  border-radius: 4px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.pedido-linha:hover {
  border-color: var(--ouro);
  box-shadow: 0 2px 10px rgba(30, 22, 16, 0.08);
}

.pedido-linha-topo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}

.pedido-numero {
  font-size: 13px;
  font-weight: 700;
  color: var(--ouro-texto);
  font-variant-numeric: tabular-nums;
}

.pedido-cliente {
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta);
  margin: 0;
}

.pedido-resumo {
  font-size: 13.5px;
  color: var(--texto-suave);
  margin: 0;
}

.pedido-total {
  grid-row: 2 / 4;
  grid-column: 2;
  align-self: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--tinta);
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Selo da situação ---------- */
.selo-situacao {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 3px;
  white-space: nowrap;
}

.selo-situacao.espera     { background-color: #f7ebd6; color: #6b4a12; }
.selo-situacao.novo       { background-color: var(--rose); color: var(--tinta); }
.selo-situacao.andamento  { background-color: #ede3d8; color: #5f4b36; }
.selo-situacao.pronto     { background-color: #dfede4; color: #24583f; }
.selo-situacao.parado     { background-color: #e8e2dd; color: #5c4e42; }

/* ---------- Um pedido aberto ---------- */
.pedido-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(168, 138, 111, 0.35);
  margin-bottom: 22px;
}

.pedido-blocos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}

.pedido-bloco {
  background-color: #fff;
  border: 1px solid rgba(168, 138, 111, 0.32);
  border-radius: 4px;
  padding: 16px 18px;
}

.pedido-bloco h3 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ouro-texto);
  margin: 0 0 8px;
}

.pedido-bloco p {
  font-size: 15px;
  color: var(--tinta);
  margin: 0;
  line-height: 1.55;
}

.pedido-bloco small {
  font-size: 13px;
  color: var(--texto-suave);
}

.pedido-item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 15px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(168, 138, 111, 0.22);
}

.pedido-item:last-child {
  border-bottom: none;
}

.pedido-item small {
  color: var(--texto-suave);
  font-size: 13px;
}

.pedido-item-total {
  font-weight: 700;
  font-size: 16.5px;
  border-top: 1px solid rgba(168, 138, 111, 0.4);
  margin-top: 4px;
  padding-top: 12px;
}

.pedido-acoes {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 24px;
}

@media (max-width: 700px) {
  .admin-aba {
    padding: 12px 14px;
    font-size: 14.5px;
  }

  .pedido-linha {
    grid-template-columns: 1fr;
  }

  /* No celular o total vai para baixo, em linha própria */
  .pedido-total {
    grid-row: auto;
    grid-column: 1;
    align-self: start;
    margin-top: 6px;
  }

  .pedido-acoes .btn {
    width: 100%;
  }
}

/* ============================================================
   PÁGINA DO PEDIDO (pedido.html)
   ------------------------------------------------------------
   É para onde a InfinitePay devolve o cliente depois de pagar.
   ============================================================ */
.pedido-pronto {
  max-width: 640px;
  margin: 0 auto;
  padding: 46px 0 90px;
  text-align: center;
}

.pedido-marca {
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dfede4;
  color: #24583f;
}

.pedido-marca.esperando {
  background-color: #f7ebd6;
  color: #6b4a12;
}

/* Mesmas duplas de cor do .selo-situacao (já testadas, passam AA) */
.pedido-marca.andamento {
  background-color: #ede3d8;
  color: #5f4b36;
}

.pedido-marca.parado {
  background-color: #e8e2dd;
  color: #5c4e42;
}

.pedido-marca svg {
  width: 32px;
  height: 32px;
}

.pedido-pronto h1 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  text-wrap: balance;
}

.pedido-pronto > p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto-suave);
  margin: 0 auto 26px;
  max-width: 460px;
}

.pedido-numero-grande {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ouro-texto);
  border: 1px solid var(--ouro);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 26px;
  font-variant-numeric: tabular-nums;
}

.pedido-resumo-caixa {
  text-align: left;
  background-color: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 22px 24px;
  margin-bottom: 26px;
}

.pedido-resumo-caixa h2 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ouro-texto);
  margin: 0 0 14px;
}

.pedido-acoes-pronto {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .pedido-pronto {
    padding: 32px 0 70px;
  }

  .pedido-pronto h1 {
    font-size: 26px;
  }

  .pedido-acoes-pronto .btn {
    width: 100%;
  }
}

/* ---------- Trilha de etapas (Pago / Em preparo / Enviado / Entregue) ---------- */
.trilha-pedido {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
}

.trilha-etapa {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
  text-align: center;
}

/* A linha ligando uma etapa à próxima, atrás da marca redonda */
.trilha-etapa:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  width: 100%;
  height: 2px;
  background-color: var(--linha);
  z-index: 0;
}

.trilha-etapa.feito:not(:last-child)::after {
  background-color: var(--rose-texto);
}

.trilha-marca {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e8e2dd;
  color: #5c4e42;
  font-size: 13px;
  font-weight: 700;
}

.trilha-marca svg {
  width: 15px;
  height: 15px;
}

.trilha-etapa.feito .trilha-marca {
  background-color: var(--rose);
  color: var(--tinta);
}

.trilha-etapa.atual .trilha-marca {
  background-color: var(--marrom);
  color: var(--blush);
}

.trilha-nome {
  font-size: 12px;
  color: var(--texto-suave);
}

.trilha-etapa.atual .trilha-nome {
  color: var(--tinta);
  font-weight: 600;
}

@media (max-width: 480px) {
  .trilha-nome {
    font-size: 10.5px;
  }
}

/* ---------- Código de rastreio ---------- */
.rastreio-codigo {
  text-align: center;
  background-color: var(--papel);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 22px;
}

.rastreio-codigo-rotulo {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ouro-texto);
  margin: 0 0 8px;
}

.rastreio-codigo-valor {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--tinta);
  background-color: var(--blush);
  border: 1px solid var(--linha);
  border-radius: 6px;
  padding: 8px 14px;
  word-break: break-all;
}

/* ============================================================
   PÁGINAS DE POLÍTICA (privacidade.html, trocas.html)
   ------------------------------------------------------------
   Texto para ser LIDO, não escaneado: coluna estreita, entrelinha
   folgada e hierarquia clara. A largura de 720px existe para a linha
   ficar perto de 70 caracteres — linha longa demais faz o olho perder
   a próxima ao voltar.
   ============================================================ */
/* ⚠️ SÓ TOPO E BASE — mesmo motivo do `.checkout` e do
   `.topo-catalogo`: entra junto com `.container` (privacidade.html
   e trocas.html), e o atalho `padding` zeraria o respiro lateral. */
.documento {
  max-width: 720px;
  padding-top: 26px;
  padding-bottom: 90px;
}

.documento h1 {
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 8px;
  text-wrap: balance;
}

.documento-data {
  font-size: 13.5px;
  color: var(--ouro-texto);
  margin: 0 0 28px;
}

/* O resumo em linguagem de gente, antes do texto formal */
.documento-resumo {
  font-size: 17.5px;
  line-height: 1.65;
  color: var(--tinta);
  background-color: rgba(168, 138, 111, 0.1);
  border-left: 3px solid var(--ouro);
  border-radius: 0 6px 6px 0;
  padding: 18px 22px;
  margin: 0 0 38px;
}

.documento h2 {
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 38px 0 12px;
  padding-top: 20px;
  border-top: 1px solid rgba(168, 138, 111, 0.28);
}

.documento h2:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 30px;
}

.documento p,
.documento li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--tinta);
}

.documento p {
  margin: 0 0 14px;
}

.documento ul,
.documento ol {
  margin: 0 0 18px;
  padding-left: 22px;
}

.documento li {
  margin-bottom: 9px;
}

.documento li::marker {
  color: var(--ouro-texto);
}

.documento a {
  color: var(--rose-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.documento a:hover {
  color: var(--tinta);
}

.documento code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 0.9em;
  background-color: rgba(168, 138, 111, 0.16);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Um ponto que merece parar e ler */
.documento-destaque {
  background-color: rgba(168, 138, 111, 0.1);
  border-left: 3px solid var(--ouro);
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  margin: 0 0 18px;
}

/* ------------------------------------------------------------
   ⚠️ AVISO DE PENDÊNCIA — para aparecer, não para enfeitar
   ------------------------------------------------------------
   Aparece no lugar de informação que a lei exige e que ainda não foi
   preenchida (CNPJ, razão social, regra de troca). É feio de
   propósito: um campo vazio passa despercebido e o site vai ao ar
   irregular; um bloco âmbar no meio do texto, não.
   Contraste medido: 6,81:1 — passa AA.
   ------------------------------------------------------------ */
.aviso-pendencia {
  background-color: #f7ebd6;
  border: 1px solid rgba(107, 74, 18, 0.3);
  border-left: 4px solid #6b4a12;
  border-radius: 0 6px 6px 0;
  color: #6b4a12;
  font-size: 15.5px;
  line-height: 1.7;
  padding: 16px 20px;
  margin: 0 0 20px;
}

.aviso-pendencia strong {
  color: #4d350d;
}

/* ------------------------------------------------------------
   Links das políticas no rodapé
   ------------------------------------------------------------ */
.rodape-legal {
  display: flex;
  gap: 10px 22px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ⚠️ Creme quase cheio, não os 60% do copyright ao lado: link que a
   lei obriga a mostrar precisa ser LEGÍVEL, não sussurrado.
   Sobre o --marrom-fundo isto lê 8,72:1; a 60% cairia para 6,4:1. */
.rodape-legal a {
  color: rgba(249, 241, 239, 0.86);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  /* 44px de alvo de toque sem esticar o rodapé: o padding vertical
     entra como area clicavel, e a margem negativa devolve o espaco. */
  padding: 12px 0;
  margin: -12px 0;
}

.rodape-legal a:hover {
  color: var(--blush);
}

@media (max-width: 700px) {
  /* ⚠️ Mesmo bug do `.secao-historia` acima: a base foi corrigida,
     mas este media query repetia o atalho `padding` zerando as
     laterais. SÓ TOPO E BASE aqui também. */
  .documento {
    padding-top: 18px;
    padding-bottom: 70px;
  }

  .documento h1 {
    font-size: 29px;
  }

  .documento h2 {
    font-size: 19px;
  }

  .documento-resumo {
    font-size: 16.5px;
    padding: 16px 18px;
  }
}

/* ------------------------------------------------------------
   CAIXA DE ACEITE DAS POLÍTICAS (conta.html)
   ------------------------------------------------------------
   ⚠️ A área clicável é o RÓTULO INTEIRO, não só o quadradinho.
   Quadradinho de 18px é alvo de 18px: no celular, quem tenta marcar
   erra, tenta de novo, e desiste do cadastro. Com o rótulo inteiro
   clicável o alvo passa de 44px em qualquer tela.
   ------------------------------------------------------------ */
.campo-aceite {
  margin-top: 22px;
}

/* ⚠️ O seletor é `.campo-aceite label.aceite`, e não só `.aceite`, por um
   motivo medido: `.campo label { display: block }` existe lá em cima e tem
   especificidade 0,2,0 — maior que `.aceite` (0,1,0). Com o seletor curto o
   `display: flex` NUNCA era aplicado, e o quadradinho ficava empilhado em
   cima do texto. Conferido no navegador: getComputedStyle devolvia
   `display: block`.
   Vencer por ORDEM no arquivo resolveria hoje e quebraria no dia em que
   alguém movesse o bloco. Vencer por especificidade resolve sempre.
   Pelo mesmo motivo, os três valores herdados de `.campo label`
   (tamanho, peso e margem) são desfeitos aqui de propósito. */
.campo-aceite label.aceite {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  /* padding generoso = alvo de toque grande */
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 7px;
  transition: background-color 0.15s;

  /* desfaz o que vem de `.campo label` */
  font-size: inherit;
  font-weight: 400;
  margin-bottom: 0;
}

.campo-aceite label.aceite:hover {
  background-color: rgba(168, 138, 111, 0.09);
}

.campo-aceite .aceite input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--rose-texto);
  cursor: pointer;
  /* alinha o quadradinho com a primeira linha do texto */
  margin-top: 2px;
}

.campo-aceite .aceite span {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--tinta);
}

.campo-aceite .aceite a {
  color: var(--rose-texto);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.campo-aceite .aceite a:hover {
  color: var(--tinta);
}

/* Quem navega pelo teclado precisa VER onde está */
.campo-aceite .aceite input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--rose-texto);
  outline-offset: 3px;
}

/* Não aceitou e tentou enviar: o bloco todo se acende */
.campo-aceite .erro-campo.visivel ~ * ,
.campo-aceite:has(.erro-campo.visivel) .aceite {
  background-color: #fbeaec;
  box-shadow: inset 0 0 0 1px rgba(122, 31, 40, 0.28);
}

/* ============================================================
   VERIFICAÇÃO EM DUAS ETAPAS (conta.html)
   ============================================================ */
.bloco-seguranca {
  text-align: left;
  border-top: 1px solid rgba(168, 138, 111, 0.3);
  margin-top: 26px;
  margin-bottom: 22px;
  padding-top: 22px;
}

.bloco-seguranca h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--tinta);
  margin: 0 0 10px;
}

.seguranca-explica {
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0 0 14px;
}

.seguranca-ok {
  font-size: 14.5px;
  font-weight: 600;
  color: #24583f;
  background-color: #dfede4;
  border-radius: 5px;
  padding: 9px 13px;
  margin: 0 0 12px;
}

.seguranca-passos {
  font-size: 14px;
  line-height: 1.65;
  color: var(--tinta);
  margin: 0 0 18px;
  padding-left: 20px;
}

.seguranca-passos li {
  margin-bottom: 7px;
}

/* ⚠️ Fundo BRANCO e cheio atrás do QR Code, sempre. O leitor do
   celular precisa de contraste alto entre o desenho e o fundo; um
   quadrado creme ou translúcido faz a câmera falhar em luz fraca —
   e a pessoa desiste de ligar a proteção. */
.qr-caixa {
  display: flex;
  justify-content: center;
  background-color: #fff;
  border: 1px solid var(--linha);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 14px;
}

.qr-caixa img {
  width: 190px;
  height: 190px;
  display: block;
}

.seguranca-segredo {
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-suave);
  text-align: center;
  margin: 0 0 16px;
}

.seguranca-segredo code {
  display: inline-block;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 13.5px;
  letter-spacing: 0.06em;
  color: var(--tinta);
  background-color: rgba(168, 138, 111, 0.16);
  padding: 5px 9px;
  border-radius: 4px;
  margin-top: 5px;
  /* o segredo é longo: deixa quebrar em vez de vazar da caixa */
  word-break: break-all;
}

/* O campo do código: números grandes e espaçados, para conferir
   dígito a dígito com o celular na outra mão. */
#codigo-2fa,
#codigo-login {
  font-size: 22px;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CELULAR — o acerto de 27/08/2026
   ------------------------------------------------------------
   O que estava errado, medido em 375x812 e nao no olho:

   1. O cabecalho ESTOURAVA a tela quando a pessoa estava logada.
      Com "Ola, thiagoosortudo+admin" no lugar do "Entrar", as acoes
      iam de 113px ate 566px numa tela de 375px: a sacola comecava em
      464px e o menu em 522px, ou seja, os dois FORA da tela e
      impossiveis de tocar. Nao dava rolagem lateral porque algo
      cortava por cima — o pior tipo de bug, o que some calado.

   2. A faixa de avisos ia a 93px, porque os tres recados quebravam
      em tres linhas. Com o cabecalho (85px) davam 178px: 22% da
      altura da tela gasta antes de aparecer qualquer coisa da loja.

   3. O botao "Fale com a gente" cobria o rodape. Medido: ficava em
      cima do link "Trocas e devolucoes" — visivel e nao clicavel,
      num link que a lei obriga a mostrar.

   4. Botoes de texto com 16px de altura de toque (o minimo e 44).

   A CONTA QUE MANDA AQUI: em 375px sobram 238px para as acoes do
   cabecalho (327 uteis menos 75 do logo e 14 do vao). Quatro botoes
   de 44px com tres vaos de 14 dao 218px — cabem, com 20px de folga.
   CINCO nao cabem (276px). Por isso o "Painel" foi para o menu e a
   saudacao virou desenho. Mexeu em tamanho ou vao, refaz a conta.
   ============================================================ */

@media (max-width: 700px) {

  /* ---------- 1. Cabecalho: quatro icones e nada mais ---------- */


  /* ⚠️ Sem isto os icones ENCOLHEM em vez de a barra transbordar, e
     o alvo de toque cai abaixo dos 44px sem ninguem perceber. */
  .acoes-cabecalho .botao-icone,
  .acoes-cabecalho .link-conta {
    flex-shrink: 0;
  }

  /* ---------- 2. Faixa de avisos: uma linha ---------- */
  .faixa-avisos-interno {
    padding: 9px 16px;
  }
}

/* ⚠️ As duas condicoes na MESMA regra, de proposito. O JS decide
   girar com a mesma pergunta (celular E aceita movimento). Se o CSS
   escondesse os avisos e o JS resolvesse nao girar, a faixa ficaria
   em branco — os dois lados nunca podem se desencontrar. */
@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {

  /* Grade de uma celula so: os tres recados ocupam o MESMO lugar, um
     por cima do outro, e a faixa fica com a altura de um. */
  .faixa-avisos-interno {
    display: grid;
    grid-template-areas: "recado";
    justify-items: center;
  }

  .faixa-avisos-interno > span {
    grid-area: recado;
  }

  /* Sem os tres lado a lado, o losango nao separa nada. */
  .faixa-avisos .separador {
    display: none;
  }

  .faixa-avisos .recado-faixa {
    opacity: 0;
    transition: opacity 0.45s ease;
  }

  .faixa-avisos .recado-faixa.ativo {
    opacity: 1;
  }
}

@media (max-width: 700px) {

  /* ---------- 3. O botao de contato vira bolinha ---------- */
  .btn-flutuante {
    bottom: 14px;
    right: 14px;
    width: 54px;
    height: 54px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }

  .btn-flutuante .rotulo-flutuante {
    display: none;
  }

  /* ⚠️ A bolinha e "fixed": ela flutua sobre a TELA, nao sobre a
     pagina. Encolher ajuda, mas no fim da pagina ela ainda cairia em
     cima dos links legais. Esta folga empurra o fim do rodape para
     cima da bolinha. 54 do botao + 14 de baixo + 12 de respiro. */
  .rodape-base {
    padding-bottom: 80px;
  }

  /* ---------- 4. Alvos de toque ---------- */

  /* Botoes escritos como texto ("Esqueci minha senha", "Criar
     conta"): mediam 16px de altura. O padding entra como area
     clicavel e a margem negativa devolve o espaco, entao o
     formulario nao estica. */
  .rodape-form button,
  .esqueci {
    display: inline-block;
    padding: 14px 6px;
    margin: -14px -6px;
  }

  /* O "x" que fecha o carrinho media 14x26. */
  .btn-fechar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
  }
}

/* No computador a pessoinha nao aparece: la o texto cabe e diz
   mais ("Ola, Maria" e melhor do que um desenho generico). */
.link-conta .icone-conta {
  display: none;
}

/* ⚠️ O WhatsApp aparece NOS DOIS: no computador ao lado do texto,
   no celular sozinho no botao redondo. E o desenho que diz para
   onde o botao leva — no celular nao ha texto nenhum para dizer. */
/* ⚠️ TAMANHO DO ICONE DO WHATSAPP — DEFINIDO SO AQUI.
   Ele ja esteve em dois lugares e o de baixo vencia o de cima por
   ORDEM no arquivo: o celular pedia 26px e recebia os 19px do
   computador. Regras de mesma especificidade brigam por posicao, e
   posicao muda quando alguem move um bloco.

   A regra do celular vem LOGO DEPOIS da do computador, de proposito:
   assim a ordem trabalha a favor e nao contra. */
.btn-flutuante .icone-flutuante {
  display: block;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

.btn-flutuante .icone-flutuante svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* No celular o botao e redondo e o desenho fica sozinho: precisa
   crescer, porque nao ha texto nenhum ao lado dele. */
@media (max-width: 700px) {
  .btn-flutuante .icone-flutuante {
    width: 26px;
    height: 26px;
  }
}

/* O atalho do painel dentro do menu. Nasce escondido: quem o mostra
   e o bloco de 780px, junto com o menu virando hamburguer.
   Em destaque de proposito — e o atalho de trabalho da Sandra, nao
   mais um link de categoria. */
.link-painel-menu {
  display: none;
  color: var(--ouro-claro) !important;
  font-weight: 600;
}

@media (max-width: 700px) {
  /* O caminho ("Inicio / Loja / Peca") media 16px de altura de
     toque. O padding entra como area clicavel e a margem negativa
     devolve o espaco, entao a linha nao estica e o layout nao muda —
     o dedo e que passa a acertar. */
  .caminho a {
    display: inline-block;
    /* ⚠️ Folga so na VERTICAL. Com padding/margem negativa tambem
       na horizontal, o primeiro link saia da coluna: medido,
       "Inicio" comecava em -4px e desalinhava do conteudo. */
    padding: 13px 0;
    margin: -13px 0;
  }

}

@media (max-width: 700px) {
  /* O link do recado de lista vazia ("Volte para a loja") media
     19px de altura. Mesma receita do caminho: padding vira area
     de toque, margem negativa devolve o espaco. */
  .aviso-vazio a {
    display: inline-block;
    padding: 13px 0;
    margin: -13px 0;
  }
}

/* ============================================================
   TELAS PEQUENAS (ate 360px) — iPhone SE e Androids de entrada
   ------------------------------------------------------------
   A CONTA, de novo, porque ela e o que manda aqui:

     largura util = tela - 2x o respiro do container
     sobra para as acoes = util - logo - vao do cabecalho
     4 botoes de 44px + 3 vaos precisam caber nessa sobra

   Em 375px, com respiro de 24 e vao de 14, a sobra e 238 e os
   botoes pedem 218 — cabem. Em 320px a sobra cai para 183 e os
   mesmos 218 NAO cabem: medido, o botao do menu ia de 287 a 331
   numa tela de 320, ou seja, ficava para fora e sem toque.

   Aqui o respiro cai para 16, o vao para 8 e o logo para 48px de
   altura. Em 320px: util 288, sobra 204, botoes 200 — cabem.

   ⚠️ Os 44px dos botoes NAO encolhem. Eles sao o minimo do dedo;
   quem cede espaco e o respiro e o logo, nunca o alvo de toque.
   ============================================================ */
@media (max-width: 360px) {
  .container {
    padding: 0 16px;
  }

  .cabecalho-interno {
    gap: 10px;
  }

  .acoes-cabecalho {
    gap: 8px;
  }

  .logo img {
    height: 48px;
  }

  /* O respiro menor tambem serve a faixa de avisos, senao o recado
     mais comprido quebraria em duas linhas de novo. */
  .faixa-avisos-interno {
    padding: 9px 10px;
  }

  .faixa-avisos {
    font-size: 11px;
  }
}

/* ============================================================
   A saudacao vira desenho ja em 900px
   ------------------------------------------------------------
   Entre 701 e 900px o menu de categorias ainda esta na barra
   (so a busca ja saiu, aos 900). Com "Ola, Fulano" ali no meio,
   medido em 753px com um admin logado:

     logo      24..120
     menu     168..520
     Painel   548..613
     saudacao 629..760   <- ja passava da tela
     CARRINHO 820..860   <- fora, impossivel de tocar

   Trocando o texto pela pessoinha sobra folga: o carrinho volta
   para dentro com mais de 30px de sobra. O nome continua no
   conta.html, que e onde ele serve para alguma coisa.

   ⚠️ 900px, e nao 700, de proposito: e o MESMO ponto em que a
   busca sai da barra. Dois pontos de quebra diferentes para o
   mesmo aperto de espaco so criariam uma faixa quebrada no meio.
   ============================================================ */
@media (max-width: 900px) {
  .link-conta .rotulo-conta {
    display: none;
  }

  .link-conta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    /* zera o respiro que o texto precisava no computador */
    margin-right: 0 !important;
  }

  .link-conta .icone-conta {
    display: block;
    width: 22px;
    height: 22px;
  }

  .link-conta .icone-conta svg {
    width: 100%;
    height: 100%;
    display: block;
  }
}

/* Entre 701 e 900px a barra fica no limite: o menu de categorias
   ocupa 352px fixos e nao encolhe. Medido em 753px, mesmo com a
   saudacao ja virada em desenho, o carrinho terminava em 761 —
   8px para fora. Estes tres cortes devolvem 18px, e o carrinho
   passa a sobrar dentro da tela.

   ⚠️ Quem cede espaco aqui e o RESPIRO, nunca o alvo de toque:
   os botoes continuam com 40px ou mais. */
@media (max-width: 900px) {
  .acoes-cabecalho {
    margin-left: 8px;
  }

  .acoes-cabecalho > a {
    margin-right: 6px;
  }

  .cabecalho .link-painel {
    padding: 4px 10px;
  }

  .menu {
    gap: 20px;
  }
}

/* ============================================================
   MENU DE CATEGORIAS VIRA HAMBURGUER A 780px
   ------------------------------------------------------------
   Era 700px. Os cinco links do menu deitado ocupam ~336px FIXOS
   e nao encolhem; abaixo de 780 nao sobra largura para eles mais
   o logo, o Painel e os icones.

   Medido em 716px com um admin logado, ANTES: o carrinho ia de
   695 a 735 numa tela de 716 — 19px para fora, impossivel de
   tocar. E nao dava rolagem lateral: sumia calado.

   ⚠️ O Painel acompanha o menu. Ele so faz sentido no topo
   enquanto o menu esta deitado; assim que vira hamburguer, o
   lugar dele e dentro do menu, junto dos outros destinos.
   ============================================================ */
@media (max-width: 780px) {
  .btn-menu-mobile {
    display: inline-flex;
  }

  .menu {
    display: none;
    position: absolute;
    /* ⚠️ Era "calc(100% + 14px)": sobrava uma tira do fundo da
       página entre o cabeçalho e o menu, e o menu parecia um painel
       solto, não uma continuação do cabeçalho (achado pelo usuário
       em 28/08/2026). Encostado (100%), ele vira uma extensão direta
       do cabeçalho. */
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--marrom);
    border-top: 1px solid rgba(168, 138, 111, 0.22);
    border-bottom: 1px solid rgba(168, 138, 111, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    padding: 6px 24px 14px;
  }

  body[data-pagina="inicio"] .menu {
    margin-left: 0;
    margin-right: 0;
    background-color: var(--marrom);
    border-top-color: rgba(168, 138, 111, 0.22);
    border-bottom-color: rgba(168, 138, 111, 0.22);
  }

  .menu.aberto {
    display: flex;
  }

  .menu a {
    color: var(--blush);
    padding: 13px 0;
    border-bottom: 1px solid rgba(249, 241, 239, 0.1);
  }

  .menu a:last-child {
    border-bottom: none;
  }

  .menu a:hover,
  .menu a.ativo {
    color: #ffffff;
  }

  .menu a::after {
    display: none;
  }
  /* O Painel sai do topo e reaparece dentro do menu. */
  .cabecalho .link-painel {
    display: none;
  }

  .link-painel-menu {
    display: block;
  }
}

@media (max-width: 700px) {
  /* Os filtros de categoria mediam 36px de altura. Aqui eles nao
     podem ganhar folga por margem negativa: sao botoes com fundo e
     borda, entao a caixa TEM que crescer de verdade. */
  .filtro {
    min-height: 44px;
  }
}

@media (max-width: 700px) {
  /* Os botoes de TAMANHO mediam 36x29. Sao o controle mais
     importante do cartao — sem escolher tamanho nao da para
     comprar —, e 29px de altura erra o dedo com facilidade.

     ⚠️ Aqui a caixa precisa crescer DE VERDADE (nao serve a
     receita de padding + margem negativa dos links de texto):
     estes botoes tem fundo e borda, entao a area de toque e a
     area que se enxerga. Se so a area invisivel crescesse, dois
     botoes vizinhos passariam a se sobrepor. */
  .tamanho {
    min-width: 44px;
    min-height: 44px;
    padding: 6px 12px;
  }
}

/* ============================================================
   VITRINE — as fotos se revezando
   ------------------------------------------------------------
   Vale para os banners de categoria e para os cartoes da loja.
   O motor esta em ligarVitrines(), no js/comum.js.

   As fotos ficam EMPILHADAS no mesmo lugar (position: absolute) e
   so a que tem a classe "ativa" aparece. A troca e uma passagem de
   opacidade — sem deslizar, sem virar: numa grade com varios
   cartoes, movimento lateral em todos ao mesmo tempo embrulha o
   estomago de quem so queria olhar roupa.
   ============================================================ */
.vitrine {
  position: relative;
}

/* ⚠️ A vitrine dentro do banner de categoria PRECISA se esticar
   sozinha. Todas as fotos dela sao absolutas, entao ela nao tem
   altura nenhuma por conta propria: medido, a caixa deu 276x0 e a
   foto dentro dela tambem — o banner aparecia so com o fundo
   marrom, sem foto. Quem tem altura ali e o cartao (aspect-ratio),
   entao a vitrine se cola nele.

   No cartao da loja isso nao acontece: la o proprio <a> e a
   vitrine, e ele ja tem aspect-ratio. */
.cartao-categoria .vitrine {
  position: absolute;
  inset: 0;
}

.vitrine > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}

.vitrine > img.ativa {
  opacity: 1;
  z-index: 2;
}

/* ⚠️ A FOTO QUE ESTÁ SAINDO CONTINUA OPACA, POR BAIXO.

   Antes as duas desbotavam ao mesmo tempo: a que sai ia de 1 para 0
   e a que entra de 0 para 1. No meio do caminho as duas ficavam em
   0,5 — e, como elas são empilhadas, o que aparecia era a modelo que
   sai, as peças, a modelo que entra E O FUNDO ROSA DO SITE, tudo
   sobreposto. Medido: o cartão CLAREAVA 14 pontos de brilho no meio
   da passagem. Era o "atrapalhado" que o usuário viu (05/09/2026) —
   e o "um saindo na hora que o outro sai" era isso ao pé da letra.

   Agora a que sai fica em opacidade 1, numa camada abaixo, e só a
   que entra desbota por cima. O fundo do site não vaza mais: em
   qualquer instante o cartão está cheio de foto.

   A classe é tirada pelo JS quando a passagem termina (ver
   trocarFotoDaVitrine em js/comum.js). Ela NÃO pode ter transição:
   ao ser removida, a foto precisa sumir na hora — e nesse momento a
   de cima já está opaca, então ninguém vê. */
.vitrine > img.saindo {
  opacity: 1;
  z-index: 1;
  transition: none !important;
}

/* ⚠️ Especificidade de proposito (0,2,1). As duas regras que ja
   existiam — ".cartao-categoria img" e ".cartao-produto-imagem img" —
   tambem valem 0,1,1, empatariam com ".vitrine > img" e a briga
   seria decidida por ORDEM no arquivo. Isso funciona hoje e quebra
   no dia em que alguem mover um bloco. Aqui a vitoria e explicita.

   O "transform" precisa continuar na conta: e ele que faz a foto
   crescer quando o mouse passa por cima. */
/* ⚠️ 0,25s, e não mais 0,7s.

   As duas fotos de uma peça são coisas bem diferentes: uma tem as
   peças à esquerda e a modelo à direita, a outra tem só a modelo, em
   outra posição. Dissolver uma na outra SEMPRE vai sobrepor figuras
   — não existe ajuste de opacidade que resolva isso.

   O que dá para fazer é encurtar o cruzamento até ele virar um
   piscar em vez de um borrão: com 0,7s o meio da passagem ficava
   ~0,35s na tela, tempo de sobra para o olho ler "três mulheres";
   com 0,25s são ~0,12s, que o olho lê como "a foto mudou".

   O `transform` continua em 0,55s: ele é o zoom do hover, não tem
   nada a ver com a troca de foto. */
.cartao-categoria .vitrine > img,
.cartao-produto-imagem.vitrine > img {
  transition: opacity 0.25s ease, transform 0.55s ease;
}

/* Os pontinhos que dizem quantas fotos a peca tem e em qual ela
   esta. So aparecem quando ha mais de uma (quem decide e o JS).

   ⚠️ Sao SO AVISO, nao botao: levam aria-hidden e nao recebem
   clique. Pontinho clicavel num cartao teria 8px de alvo — abaixo
   de qualquer minimo de toque — e roubaria o clique de quem so
   queria abrir a peca. Para ver as fotos com calma existe a pagina
   da peca. */
.pontos-vitrine {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.pontos-vitrine i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(249, 241, 239, 0.55);
  /* ⚠️ A sombra e o que segura o pontinho em foto clara. Sem ela,
     creme sobre o fundo branco das fotos de catalogo desaparece. */
  box-shadow: 0 0 0 1px rgba(43, 33, 24, 0.35);
  transition: background-color 0.4s ease;
}

.pontos-vitrine i.ativo {
  background-color: var(--blush);
}

/* ⚠️ Quem pediu menos movimento no sistema nao ve troca nenhuma: o
   JS nem liga o rodizio, e aqui a passagem suave sai junto para o
   caso de a classe "ativa" ser mexida por outro caminho. */
/* ⚠️ A VITRINE MANTÉM O ESMAECIMENTO MESMO COM "MENOS MOVIMENTO".

   Aqui havia `transition: none`, e junto com a regra geral lá de
   cima (`* { transition-duration: 0.01ms !important }`) o resultado
   era o PIOR dos dois mundos: em 05/09/2026 a vitrine passou a girar
   para quem pede menos movimento — porque ela é conteúdo, são as
   fotos da peça —, mas continuava girando com CORTE SECO. Quinze
   cartões pipocando pela grade, sem passagem nenhuma. Foi isso que o
   usuário chamou de "atrapalhado", e ele estava certo: um corte seco
   chama muito mais atenção do que um esmaecimento.

   A decisão de deixar a vitrine girar e a de deixá-la esmaecer são a
   MESMA decisão, e agora as duas moram do mesmo lado. Esmaecer não é
   movimento: nada desliza, nada dá zoom, nada se desloca — que é o
   que a preferência existe para evitar.

   ⚠️ O `!important` é necessário para vencer o `*` lá de cima, que
   também é `!important`. Quem decide é a especificidade: 0,1,1
   contra 0,0,0. */
@media (prefers-reduced-motion: reduce) {
  .vitrine > img {
    transition-duration: 0.25s !important;
  }

  /* A que está saindo continua sem transição: ela precisa sumir na
     hora em que o JS tira a classe. */
  .vitrine > img.saindo {
    transition-duration: 0s !important;
  }
}

/* ⚠️ O rodape so vira DUAS colunas a 780px — era a 1300px.

   Motivo medido: em 1265px as tres colunas ficam com 384px cada, e a
   linha mais longa (o endereco) mede ~250px — cabiam folgadas. Com
   duas colunas o rodape quebrava em DUAS LINHAS e ia de ~273 para
   427px de altura: 56% mais alto sem ganhar legibilidade nenhuma.

   Foi o que apareceu quando o usuario pediu "diminuir um pouco desse
   rodape": a maior parte da altura nao vinha de respiro sobrando,
   vinha de uma quebra de coluna cedo demais.

   Abaixo de 780 duas colunas fazem sentido; abaixo de 700 vira uma
   so (regra mais adiante no arquivo). */
/* ⚠️ A FAIXA E FECHADA DOS DOIS LADOS (701 a 780), e isso NAO e
   detalhe. Sem o min-width, esta regra tambem valia em 375px — e
   como ela mora depois no arquivo, VENCIA POR ORDEM a regra de uma
   coluna do bloco de 700px, que tem a mesma especificidade.

   Resultado no celular: rodape em duas colunas espremidas, com o
   endereco quebrando em "R. Pernambuco, / 510 — Vila Santa / Rosa".
   Foi o proprio usuario que viu, em 28/08/2026.

   ⚠️ Eu ja tinha escrito neste arquivo que vencer por ORDEM resolve
   hoje e quebra no dia em que alguem mover um bloco — e cai nessa
   mesma armadilha uma hora depois. Media query que so tem teto
   pega TODAS as telas menores, inclusive as que ja tem regra
   propria mais abaixo. */
@media (min-width: 701px) and (max-width: 780px) {
  .rodape-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

/* ============================================================
   AJUSTES DE CELULAR — 28/08/2026
   ============================================================ */
@media (max-width: 700px) {

  /* ---- 1. A faixa de avisos sai do celular ----
     Pedido do usuario. Ela custava 36px do alto da tela e, somada ao
     cabecalho, comia 121px antes de aparecer qualquer coisa da loja.

     ⚠️ O que ela dizia NAO se perde todo: o parcelamento aparece na
     pagina da peca e no checkout, e a retirada na loja esta no
     rodape e na secao "A gente e daqui". No computador a faixa
     continua. */
  .faixa-avisos {
    display: none;
  }

  /* ---- 2. Mais ar entre o hero e as categorias ----
     Media antes: 72px de creme entre o fim do texto do hero e o
     rotulo "PARA QUEM VOCE PROCURA". Com o bloco escuro do hero
     logo acima, 72px le como encostado. */
  .secao-categorias {
    padding-top: 112px;
  }

  /* ---- 3. Mais ar antes das avaliacoes ----
     O cartao do mapa terminava a 54px do rosa, e a divisa de cor
     faz a distancia parecer menor do que e. */
  .secao-historia {
    padding-bottom: 84px;
  }

  /* ---- 4. A legenda SAI DE CIMA da foto da loja ----
     ⚠️ No computador ela e uma pilula pequena no canto da foto e
     nao atrapalha. No celular o endereco quebra em duas linhas, a
     pilula engorda e passa a tapar a fachada — que e justamente o
     que a foto existe para mostrar.

     Aqui ela desce para DEBAIXO da foto: a foto fica inteira e o
     endereco continua legivel. Sem fundo escuro porque ja nao esta
     sobre imagem: fica sobre o marrom do cartao, onde le 8,18:1. */
  .foto-da-fachada figcaption {
    position: static;
    display: flex;
    max-width: none;
    margin-top: 10px;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
    color: rgba(249, 241, 239, 0.86);
    font-size: 13.5px;
  }

  /* A foto tinha line-height 0 para nao sobrar folga embaixo dela;
     com a legenda fora, o bloco precisa respirar de novo. */
  .foto-da-fachada {
    line-height: 1.5;
    overflow: visible;
  }

  .foto-da-fachada img {
    border-radius: 14px;
  }
}


/* ============================================================
   LOOK — duas ou mais peças na mesma página, cada uma no seu bloco
   ------------------------------------------------------------
   Pedido do usuário em 05/09/2026: poder comprar a blusa sozinha,
   o short sozinho, ou os dois juntos — cada um com o tamanho dele.

   ⚠️ O bloco é o que carrega a ideia toda. Sem uma moldura em volta
   de cada peça, os dois preços e as duas grades de tamanho viram
   uma lista só e ninguém sabe qual tamanho pertence a qual peça.
   É por isso que existe borda, e não só um espaço entre eles.
   ============================================================ */
.pd-look-explica {
  font-size: 14px;
  line-height: 1.55;
  color: var(--texto-suave);
  margin: -4px 0 22px;
}

.pd-peca {
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 18px 18px 20px;
  margin-bottom: 16px;
  background-color: rgba(255, 255, 255, 0.45);
}

.pd-peca-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.pd-peca-nome {
  font-family: var(--fonte-titulo);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.2;
  color: var(--tinta);
}

.pd-peca-preco {
  font-size: 17px;
  font-weight: 600;
  color: var(--tinta);
  white-space: nowrap;
}

.pd-peca-descricao {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-suave);
  margin-bottom: 14px;
}

.pd-peca .pd-rotulo {
  margin-bottom: 8px;
}

.pd-peca .tamanhos {
  margin-bottom: 10px;
}

.pd-btn-peca {
  width: 100%;
  margin-top: 4px;
  font-size: 13.5px;
}

/* ---------- O botão do conjunto ----------
   ⚠️ Ele é o BOTÃO PRINCIPAL da tela e os das peças são de
   contorno. Não é hierarquia à toa: o cliente que abriu a foto do
   look normalmente quer o look. Quem quer uma peça só continua com
   o botão dela, à vista, dentro do bloco — não escondido atrás de
   um "ver mais". */
.pd-look-junto {
  margin-top: 6px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}

.pd-btn-look {
  width: 100%;
}

.pd-look-total {
  font-size: 13px;
  color: var(--texto-suave);
  text-align: center;
  margin-top: 10px;
}

/* ---------- O cartão do look, na grade da loja ---------- */
.cartao-look-junto {
  font-size: 12.5px;
  color: var(--ouro-texto);
  margin: -10px 0 14px;
}

.preco-rotulo {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--texto-suave);
}

/* ⚠️ É um <a>, não um <button>: o cartão do look não compra, ele
   leva para a página onde os tamanhos são escolhidos. Precisa
   destes três para parecer (e medir) o mesmo que os outros botões
   da grade. */
.btn-ver-look {
  display: block;
  text-align: center;
  text-decoration: none;
}

.selo-look {
  background-color: var(--marrom);
  color: var(--blush);
}

@media (max-width: 700px) {
  .pd-peca {
    padding: 15px 14px 17px;
  }
  /* Em coluna estreita o preço não cabe do lado do nome sem apertar
     os dois. */
  .pd-peca-topo {
    flex-direction: column;
    gap: 2px;
  }
}

/* A miniatura da peca sozinha, no cabecalho do bloco.
   ⚠️ E a MESMA foto que vai para o carrinho: o que a pessoa ve aqui
   e o que vai chegar la. */
.pd-peca-cabeca {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.pd-peca-mini {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--linha);
  background-color: #fff;
}

.pd-peca-cabeca .pd-peca-topo {
  flex: 1;
  margin-bottom: 0;
}

/* ============================================================
   OS BOTOES DA PAGINA DA PECA (05/09/2026, pedido do usuario)
   ------------------------------------------------------------
   "vamos deixar todos esses botoes em marrom igual o cabecalho, e o
   rosa somente para quando forem pegar as duas pecas"

   Vira uma regra de significado, nao so de cor:
     MARROM = por no carrinho (uma peca)   -> .pd-btn-peca, .pd-btn-comprar
     ROSA   = levar o look inteiro         -> .pd-btn-look

   Com o rosa aparecendo uma vez so na tela, ele passa a QUERER DIZER
   alguma coisa. Antes o botao de comprar tambem era rosa, e o do
   conjunto se perdia no meio.

   Contraste: marrom com creme 10,43:1; rosa com tinta 6,12:1.
   ⚠️ O rosa so aceita texto ESCURO — e a regra da paleta que vale no
   site inteiro. Texto claro sobre o rosa da 2,6:1.
   ============================================================ */

/* 🚨 O BOTAO DESLIGADO ESTAVA ILEGIVEL, E JA ESTAVA ANTES DESTA MUDANCA.
   `.btn:disabled` so baixa a opacidade para 0,45 — e isso desbota o
   fundo E o texto na mesma direcao, os dois indo para a cor da
   pagina. Medido sobre o fundo do bloco:
       rosa + tinta a 45%   -> 1,87:1   (o que estava no ar)
       marrom + creme a 45% -> 2,36:1
   Nao e detalhe de acabamento: e justamente no estado desligado que
   o botao carrega a INSTRUCAO — "Escolha o tamanho", "Falta o
   tamanho: short". O texto que a pessoa precisa ler era o que nao
   dava para ler.

   Aqui ele vira um botao fantasma, como o da grade da loja: sem
   fundo, com contorno e texto suave. Le em 5,21:1.

   ⚠️ Especificidade de proposito (0,3,0) contra os (0,2,0) de
   `.btn:disabled`. Vencer por ORDEM funcionaria hoje e quebraria no
   dia em que alguem movesse o bloco. */
.pd-detalhes .pd-btn-peca:disabled,
.pd-detalhes .pd-btn-comprar:disabled,
.pd-detalhes .pd-btn-look:disabled {
  opacity: 1;
  background-color: transparent;
  border: 1px solid var(--linha);
  color: var(--texto-suave);
  cursor: not-allowed;
}

/* ============================================================
   O CARTAO DE CATEGORIA TEM QUE CABER NA TELA (05/09/2026)
   ------------------------------------------------------------
   O usuario: "esses card deveria ser menor, veja que esta cortando a
   cabeca da modelo, preciso que o usuario pare nessa secao e veja o
   que esta escrito embaixo e o todo da foto".

   🚨 MEDIDO ANTES DE MEXER, E O DIAGNOSTICO E OUTRO: o CSS corta
   0,0% DA ALTURA. As fotos sao 0,800 e o cartao e 0,667, entao o
   `cover` corta so na largura (16,7%), onde sobra fundo. Nao ha
   recorte nenhum na cabeca.

   O que corta a cabeca e a BORDA DO MONITOR: em 1280x800 o cartao
   media 577x866 — 66px mais alto que a janela INTEIRA, antes ainda
   de descontar a barra do navegador. Nunca dava para ver a foto toda
   e o nome da categoria ao mesmo tempo.

   ⚠️ Por isso a solucao NAO e mudar a proporcao. Achatar o cartao
   faria a foto passar a ser cortada na altura — criaria de verdade o
   corte que o usuario achou que estava vendo. Ja aconteceu neste
   projeto (o cartao 4/5, em 05/09 de manha, cortava cabeca mesmo).

   A largura e que passa a ser limitada PELA ALTURA DA TELA: com
   `2/3` de 66vh, a altura do cartao nunca passa de 66% da janela.
   Sobra espaco para o titulo da secao e para o nome da categoria.

   Em tela alta o cartao volta a crescer sozinho — o teto de 577px e
   o tamanho que ele tinha antes, entao ele nunca fica MAIOR do que
   ja era.
   ============================================================ */
@media (min-width: 780px) {
  /* ⚠️ O TETO VAI NA GRADE, NÃO EM CADA CARTÃO.

     A primeira versão limitava a largura do `.cartao-categoria-wrap`
     e centralizava com `justify-items: center`. A coluna continuava
     com metade da largura disponível, e a sobra dela virava espaço
     dos DOIS lados de cada cartão — medido, o vão entre os dois
     ficou em **196px** em vez dos 44 pedidos, e eles pareciam duas
     seções separadas em vez de um par.

     Limitando a grade inteira, cada coluna já nasce do tamanho do
     cartão: o vão é exatamente o `gap`, e a sobra vai toda para fora
     do par, que é onde ela deve ficar. */
  .grid-categorias {
    max-width: calc(2 * (78vh * 2 / 3) + 44px);
    margin-left: auto;
    margin-right: auto;
  }
}


/* ============================================================
   ALVOS DE TOQUE QUE ESTAVAM ABAIXO DE 44px (05/09/2026)
   ------------------------------------------------------------
   Achados medindo o site inteiro em 375x812. A regra do projeto:
   "Quem cede espaco e sempre o respiro e o logo, nunca o alvo de
   toque. Os 44px sao o tamanho do dedo e nao sao negociaveis."

   ⚠️ So no CELULAR. No computador o ponteiro e preciso e um alvo de
   27px nao atrapalha ninguem — e o carrinho lateral e estreito, um
   botao de 44px ali rouba espaco do nome da peca. E a mesma divisao
   que o cabecalho ja usa (40px no mouse, 44px no toque).
   ============================================================ */
@media (max-width: 780px) {
  /* 🚨 REGRESSÃO MINHA, achada pelo usuário no celular em
     08/09/2026: o "remover" saía cortado na borda do carrinho.

     A causa: `.btn-remover` também É um <button>, e mora DENTRO de
     `.controle-quantidade` — então esta regra (pensada só para o
     "−" e o "+") batia nele também, e ganhava por especificidade
     (0,1,1 contra o 0,1,0 do `.btn-remover` sozinho, duas regras
     abaixo). Forçava a palavra "remover" — 7 letras — dentro de uma
     caixa quadrada de 44px. Ela não cabe numa linha só, e como o
     botão é o último item da fileira, bem perto da borda do painel,
     o excesso vazava para fora e ficava cortado.

     Provado no navegador: tirando o width/height forçado, o botão
     volta a crescer sozinho (79px) e cabe inteiro dentro do painel.

     ⚠️ Os "-" e "+" do carrinho mediam 27x27 — o menor alvo de
     compra do site, e o unico jeito de mudar a quantidade. */
  .controle-quantidade button:not(.btn-remover) {
    width: 44px;
    height: 44px;
    font-size: 17px;
  }

  /* "remover" era um link de texto de 27px de altura. Ganha area por
     padding, com margin negativa para o layout nao mudar — a receita
     que o projeto ja usa em "Esqueci minha senha". */
  .btn-remover {
    padding: 13px 6px;
    margin-top: -13px;
    margin-bottom: -13px;
  }

  /* O botao de compra do cartao da loja media 157x42. Faltavam 2px. */
  .btn-comprar {
    padding: 13px 12px;
    min-height: 44px;
  }

  /* As abas "Entrar" e "Criar conta" mediam 40px, e sao os dois
     primeiros alvos de quem vai comprar pela primeira vez. */
  .aba {
    min-height: 44px;
  }

  /* Link solto dentro de aviso. O "Entrar" de meus-pedidos.html
     media 18px — era o menor alvo do site inteiro, e a unica saida
     da pagina para quem chega deslogado.
     ⚠️ Sao TRES classes de aviso diferentes no projeto
     (.aviso-vazio, .aviso e .admin-aviso). Cobri so as duas
     primeiras na primeira tentativa e o "Entrar" continuou em 18px —
     achado remedindo, nao lendo. */
  .aviso-vazio a,
  .aviso a,
  .admin-aviso a {
    display: inline-block;
    padding: 13px 4px;
    margin-top: -13px;
    margin-bottom: -13px;
  }
}

/* ============================================================
   SELETOR DE COR DENTRO DO BLOCO DA PECA (05/09/2026)
   ------------------------------------------------------------
   Pedido do usuario: nas fotos de kit masculino a composicao mostra
   TRES camisetas mais uma calca. Em vez de tres cartoes na loja, um
   cartao so — e aqui dentro a pessoa escolhe a cor.

   ⚠️ O botao mostra a FOTO da cor, nao um circulo colorido. Duas das
   camisetas tem estampa ("Leave a Legacy", "GANGSTER"): um circulo
   vermelho e um preto nao diriam qual e qual. A foto diz.
   ============================================================ */
.pd-cores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.pd-cor {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background-color: var(--papel);
  font-size: 13px;
  color: var(--tinta);
  /* ⚠️ 44px de alvo de toque, como todo o resto do site. */
  min-height: 44px;
  transition: border-color 0.2s, background-color 0.2s;
}

.pd-cor img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 50%;
  background-color: #fff;
}

.pd-cor:hover {
  border-color: var(--ouro);
}

/* ⚠️ A cor escolhida fica MARROM CHEIA com texto creme (10,43:1), e
   nao so com a borda mais grossa: numa fila de tres pilulas quase
   iguais, mudar so a borda e facil de nao ver. */
.pd-cor.ativa {
  background-color: var(--marrom);
  border-color: var(--marrom);
  color: var(--blush);
  font-weight: 500;
}

/* ============================================================
   VER A FOTO GRANDE NO PAINEL (a "lupa")
   ------------------------------------------------------------
   Pedido da Sandra em 08/09/2026: olhar a peça de perto enquanto
   escreve a descrição. As miniaturas têm 108px — dá para saber que
   a foto está lá, não para ver a estampa.

   ⚠️ É uma CAMADA por cima do formulário, não outra tela. O que ela
   digitou continua atrás, intacto. Um link para a foto levaria a
   página para segundo plano no celular, que é exatamente o que
   fazia o painel se perder antes.
   ============================================================ */
.admin-foto-abrir {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: 4px;
}

.admin-foto-abrir:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 2px;
}

/* Trava a rolagem do que está atrás enquanto a foto está aberta:
   sem isto, arrastar em cima da foto rola o formulário e a pessoa
   perde o lugar onde estava escrevendo. */
body.com-lupa {
  overflow: hidden;
}

.admin-lupa {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* O fundo é um <button> de verdade para que tocar fora feche —
   é o gesto que todo mundo tenta primeiro. */
.admin-lupa-fundo {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background-color: rgba(30, 22, 16, 0.92);
  cursor: zoom-out;
}

.admin-lupa-caixa {
  position: relative;
  margin: 0;
  max-width: min(900px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  pointer-events: none; /* o clique atravessa para o fundo e fecha */
}

.admin-lupa-caixa img {
  max-width: 100%;
  /* Desconta a legenda e o respiro, senão a foto passa da tela e as
     setas de passar foto saem para fora em tela baixa. */
  max-height: calc(100vh - 130px);
  object-fit: contain;
  border-radius: 6px;
  background-color: var(--blush);
}

.admin-lupa-legenda {
  color: var(--ouro-claro);
  font-size: 13px;
  text-align: center;
}

.admin-lupa-fechar,
.admin-lupa-passo {
  position: absolute;
  z-index: 1;
  /* 44px é o tamanho do dedo, e aqui não é negociável: a Sandra usa
     o painel no celular, dentro da loja. */
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blush);
  background-color: rgba(69, 54, 38, 0.9);
  border: 1px solid var(--ouro-texto);
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}

.admin-lupa-fechar {
  top: 14px;
  right: 14px;
  font-size: 26px;
}

.admin-lupa-passo {
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
}

.admin-lupa-antes { left: 14px; }
.admin-lupa-depois { right: 14px; }

.admin-lupa-fechar:hover,
.admin-lupa-passo:hover {
  background-color: var(--marrom-claro);
  border-color: var(--ouro);
}

.admin-lupa-fechar:focus-visible,
.admin-lupa-passo:focus-visible {
  outline: 3px solid var(--ouro);
  outline-offset: 2px;
}

@media (max-width: 780px) {
  .admin-lupa { padding: 12px; }

  /* Em tela estreita as setas ficariam em cima da foto. Descem para
     o pé, lado a lado com o dedo, e a foto fica limpa. */
  .admin-lupa-passo { top: auto; bottom: 16px; transform: none; }
  .admin-lupa-antes { left: 22%; }
  .admin-lupa-depois { right: 22%; }
  .admin-lupa-caixa img { max-height: calc(100vh - 180px); }

  /* ⚠️ Os botões de mover e remover foto tinham 34px — abaixo do
     dedo, e é no celular que a Sandra cadastra as peças. */
  .admin-foto-acoes button { min-height: 44px; }
}

/* ⚠️ O botão do WhatsApp é `fixed` e continua na tela quando a foto
   abre. Ele fica ATRÁS do véu (z-index 150 contra 3000), então não
   rouba o toque — mas aparece desbotado bem ao lado da seta de
   passar foto, e no celular isso se lê como mais um controle.
   Enquanto a foto está aberta, ele sai. */
body.com-lupa .btn-flutuante {
  display: none;
}

/* 🚨 O `hidden` NÃO ESCONDE QUEM TEM `display` NUMA CLASSE.
   ------------------------------------------------------------
   `[hidden] { display: none }` é regra do NAVEGADOR, e QUALQUER
   regra de autor ganha dela — não importa a especificidade. Então
   todo elemento que tem `display` numa classe e é ligado/desligado
   pelo `hidden` fica VISÍVEL o tempo todo, em silêncio.

   Isto não é teoria: em 08/09/2026 mordeu três vezes no mesmo dia.
     1. `.admin-lupa` (display:flex) — o visor de foto nascia ABERTO
        por cima do painel e não dava para clicar em mais nada. Foi
        o usuário que viu, na tela dele.
     2. `.admin-abas` (display:flex) — as abas Pedidos/Produtos
        apareciam para quem NÃO estava logado, e davam clique.
     3. `.admin-aba-selo` (display:inline-flex) — o selo vermelho de
        pedidos novos ficava para sempre na tela escrito "0".

   ⚠️ As duas últimas eram ANTIGAS. Ninguém tinha percebido porque
   o defeito não dá erro: o atributo está certo, o JavaScript está
   certo, e só a tela está errada.

   ⚠️ POR QUE UMA REGRA GERAL, E NÃO UMA PARA CADA:
   consertar caso a caso deixa a armadilha armada para o próximo
   elemento — e o próximo não avisa. Antes de pôr esta regra, varri
   as páginas procurando elemento com `hidden` que estivesse
   aparecendo: fora os três acima, NENHUM. Ou seja, ela não esconde
   nada que hoje apareça de propósito.

   ⚠️ O `!important` é necessário: sem ele, `.admin-lupa` (0,1,0)
   empataria com `[hidden]` (0,1,0) e venceria por vir depois no
   arquivo — voltando a depender da ORDEM, que é justamente o que
   este projeto já registrou como fonte de bug três vezes.

   Para mostrar algo, tire o atributo (`el.hidden = false`), nunca
   force `display` por cima.
   ------------------------------------------------------------ */
[hidden] {
  display: none !important;
}

/* ---------- O preço dividido, no bloco de cada peça do look ----------
   O preço e o "6x de ..." empilhados e alinhados à direita, ao lado
   do nome da peça. */
.pd-peca-valores {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}

.pd-peca-parcela {
  font-size: 12.5px;
  font-weight: 400;
  /* ⚠️ --ouro-texto, e não --ouro: o camelo médio sobre o fundo
     claro do bloco não fecha contraste (a regra dos três tons da
     paleta). Assim lê 4,74:1. */
  color: var(--ouro-texto);
}

@media (max-width: 700px) {
  /* Em coluna o bloco inteiro alinha à esquerda, senão o preço fica
     solto na ponta direita, longe do nome a que pertence. */
  .pd-peca-valores {
    align-items: flex-start;
  }
}