/* ==========================================================================
   WMC Distribuidora — Telas
   ========================================================================== */

/* ==========================================================================
   Abertura: preloader + verificação de idade
   ========================================================================== */

.boot {
  position: fixed; inset: 0;
  z-index: var(--z-boot);
  display: grid; place-items: center;
  padding: var(--gutter);
  overflow: hidden;
}
/* Painel sólido que sobe na saída. Cor chapada, sem degradê. */
.boot__panel { position: absolute; inset: 0; background: var(--ink-900); }

.boot__inner,
.boot__gate,
.boot__negado {
  grid-area: 1 / 1; /* os três ocupam a mesma célula: sobrepõem, não empilham */
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.boot__inner { gap: var(--s-5); }

.boot__ring {
  position: absolute; top: 50%; left: 50%;
  width: 240px; height: 240px;
  transform: translate(-50%, -50%) rotate(-90deg);
  pointer-events: none;
}
.boot__ring circle {
  fill: none;
  stroke: var(--amber);
  stroke-width: 1.5;
}
.boot__logo { width: 132px; height: 132px; }
/* Telas internas não repetem a abertura da home: marca menor, saída curta. */
.boot--rapido .boot__logo { width: 88px; height: 88px; }

.boot__meta { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); }
.boot__label {
  font-size: var(--fs-eyebrow); font-weight: 600;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--muted);
}
.boot__count {
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 800;
  letter-spacing: -0.02em; color: var(--amber);
}
.boot__count::after { content: '%'; font-size: 0.6em; margin-left: 2px; }

.boot__gate, .boot__negado {
  gap: var(--s-4);
  max-width: 440px;
}
.boot__gate h2, .boot__negado h2 { font-size: var(--fs-xl); }
.boot__gate p, .boot__negado p { font-size: var(--fs-sm); color: var(--muted); }
.boot__gate-acoes { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; margin-top: var(--s-3); }
.boot__gate-legal { font-size: var(--fs-xs); color: var(--faint); margin-top: var(--s-3); }

/* ==========================================================================
   Hero da home
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 76px;
  overflow: hidden;
}

/* Imagem cobrindo a tela inteira. Ao rolar, ela dá zoom (js/home.js). */
.hero__fundo {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
}
.hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 46%; /* faixa do copo na foto 5:4 */
  transform-origin: center 46%;
  will-change: transform;
}
/* Véu sólido para o texto respirar sobre a foto — cor chapada, sem gradiente.
   A cena já é escura por natureza; véu leve deixa o âmbar do copo brilhar. */
.hero__veu {
  position: absolute; inset: 0;
  background: rgba(5, 5, 5, 0.45);
}

.hero__conteudo { position: relative; z-index: 1; width: 100%; }

/* Conteúdo do hero centralizado sobre a imagem, no eixo do meio da tela. */
.hero__content {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-5);
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}
.hero__acoes { justify-content: center; }
.hero__stats { justify-content: center; }
.hero__lead { margin-inline: auto; }

/* Título grande, mas dimensionado para o hero inteiro caber numa tela só
   (o --fs-hero de até 11rem estourava a altura sobre a imagem). */
.hero__title {
  font-size: clamp(2.6rem, 5.6vw, 5.5rem);
  font-weight: 900; letter-spacing: var(--tr-hero);
}
.hero__title > span,
.hero__title > em { display: block; }
/* Segunda linha em âmbar — o único ponto de cor do bloco de texto. */
.hero__title em { font-style: normal; color: var(--amber); }

.hero__lead { font-size: var(--fs-md); color: var(--text); max-width: 44ch; }

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-2); }

.hero__stats {
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  margin-top: var(--s-5); padding-top: var(--s-5);
  border-top: 1px solid rgba(251, 239, 221, 0.16);
}
.hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hero__stat b {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 800; color: var(--cream);
  letter-spacing: -0.02em;
}
.hero__stat span {
  font-size: var(--fs-xs); color: var(--muted);
  letter-spacing: 0.06em; text-transform: uppercase;
}

.hero__scroll {
  position: absolute;
  bottom: var(--s-5); left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  font-size: var(--fs-eyebrow); letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase; color: var(--faint);
  z-index: 2;
}
.hero__scroll-linha {
  width: 1px; height: 42px;
  background: var(--line-strong);
  position: relative; overflow: hidden;
}
.hero__scroll-linha::after {
  content: '';
  position: absolute; inset-inline: 0; top: 0;
  height: 40%;
  background: var(--amber);
  animation: descer 2s var(--ease) infinite;
}
@keyframes descer {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-linha::after { animation: none; background: var(--amber); }
}

/* ==========================================================================
   Faixa de valores
   ========================================================================== */

.valores {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid var(--line);
}
.valor {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-7) var(--s-5);
  border-right: 1px solid var(--line);
}
.valor:last-child { border-right: 0; }
.valor svg { width: 24px; height: 24px; color: var(--amber); }
.valor h3 { font-size: var(--fs-md); font-weight: 700; }
.valor p { font-size: var(--fs-sm); color: var(--muted); }

/* ==========================================================================
   Categorias
   ========================================================================== */

.grid-categorias {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
}
/* Primeira categoria ocupa dois quadros — quebra a monotonia da grade. */
.grid-categorias > :first-child { grid-column: span 2; }

/* ==========================================================================
   Grid de produtos
   ========================================================================== */

.grid-produtos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: var(--s-4);
}

/* ==========================================================================
   Sobre
   ========================================================================== */

.sobre {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: clamp(var(--s-6), 6vw, var(--s-10));
}
.sobre__midia {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.sobre__midia img {
  width: 100%; height: 120%;
  object-fit: cover;
  will-change: transform;
}
.sobre__texto { display: flex; flex-direction: column; gap: var(--s-5); }
.sobre__lista { display: grid; gap: var(--s-4); margin-top: var(--s-2); }
.sobre__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--s-4);
  align-items: start;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.sobre__item-num {
  font-family: var(--font-display);
  font-size: var(--fs-sm); font-weight: 800; color: var(--amber);
  letter-spacing: 0.06em;
}
.sobre__item h3 { font-size: var(--fs-md); font-weight: 700; margin-bottom: 3px; }
.sobre__item p { font-size: var(--fs-sm); color: var(--muted); }

/* ==========================================================================
   Números
   ========================================================================== */

/* auto-fit: a faixa aceita 4, 5 ou quantos números o config mandar. */
.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s-5); }
.numero { display: flex; flex-direction: column; gap: var(--s-2); }
.numero b {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
  font-weight: 900; letter-spacing: -0.04em; color: var(--cream);
  line-height: 1;
}
.numero span {
  font-size: var(--fs-xs); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--muted);
}

/* ==========================================================================
   Localização — contato + mapa
   ========================================================================== */

.local {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s-5);
  align-items: stretch;
}
/* Itens de grid não podem empurrar a largura da coluna para além dela. */
.local__painel, .local__mapa { min-width: 0; }

.local__painel {
  display: flex; flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-6);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.local__lista { display: grid; gap: var(--s-5); }
.local__item { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; }
.local__ico {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--amber);
}
.local__ico svg { width: 20px; height: 20px; }
.local__rot {
  display: block;
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--faint);
  margin-bottom: 3px;
}
.local__val {
  display: block;
  font-size: var(--fs-base); color: var(--cream); font-weight: 500;
}
a.local__val { transition: color var(--d-micro) var(--ease); }
a.local__val:hover { color: var(--amber); }

.local__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: auto; }
.local__acoes .btn { flex: 1; min-width: 160px; }

.local__mapa {
  position: relative;
  min-height: 340px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-850);
}
.local__mapa iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  /* Escurece o mapa para casar com o preto do site. O "Ver no Google Maps"
     abre a versão real, sem filtro. */
  filter: invert(0.9) hue-rotate(180deg) contrast(0.9) saturate(0.85);
}
/* Quem pede movimento/estímulo reduzido tende a preferir menos manipulação
   visual — mostra o mapa nas cores originais. */
@media (prefers-reduced-motion: reduce) {
  .local__mapa iframe { filter: none; }
}
.local__mapa-ver {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  z-index: 2;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 9px var(--s-4);
  background: var(--ink-900);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: 0.04em; color: var(--cream);
  transition: border-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease);
}
.local__mapa-ver:hover { border-color: var(--amber); color: var(--amber); }
.local__mapa-ver svg { width: 14px; height: 14px; }

@media (max-width: 900px) {
  .local { grid-template-columns: 1fr; }
  /* Altura fixa, não aspect-ratio: com min-height o aspect-ratio derivaria a
     largura da altura e estouraria a coluna no celular. */
  .local__mapa { min-height: 0; height: 320px; }
}
@media (max-width: 600px) {
  .local__painel { padding: var(--s-5); }
  .local__acoes .btn { min-width: 100%; }
}

/* ==========================================================================
   Faixa de chamada
   ========================================================================== */

.chamada {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-5);
  padding: clamp(var(--s-8), 8vw, var(--s-10)) var(--s-5);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.chamada__ring { inset: -30% 0 auto; width: 720px; margin-inline: auto; left: 50%; transform: translateX(-50%); }
.chamada > * { position: relative; z-index: 1; }
.chamada h2 { font-size: var(--fs-2xl); max-width: 18ch; }
.chamada p { color: var(--muted); max-width: 52ch; }
.chamada__acoes { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; }

/* Variante com o carrossel da equipe: texto à esquerda, fotos à direita. */
/* Coluna única centralizada: foto em cima, texto centralizado embaixo.
   Sem cara de card — nada de borda, canto arredondado ou moldura. O conteúdo
   senta direto no preto da página, só centralizado. */
.chamada--split {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--s-6), 4vw, var(--s-8));
  text-align: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
/* O círculo é a própria foto do vendedor — o anel decorativo grande sairia
   competindo com ela, então some nesta variante. */
.chamada--split .chamada__ring { display: none; }
.chamada__texto {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-5); width: 100%; max-width: 620px; min-width: 0;
}
.chamada--split .chamada__texto h2 { max-width: 20ch; }
.chamada--split .chamada__acoes { justify-content: center; }

/* ==========================================================================
   Carrossel do comercial — rosto dentro de um círculo, em cross-fade
   ========================================================================== */

.comercial {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--s-5);
}

/* Moldura circular. O aro NÃO recorta — é aqui que o selo do WhatsApp se
   ancora, para não ser cortado pela borda do círculo. */
.comercial__aro {
  position: relative;
  width: clamp(230px, 30vw, 380px);
  aspect-ratio: 1;
  flex: none;
}

/* O círculo em si: aqui a foto é recortada em disco. Um anel só, na borda. */
.comercial__palco {
  position: absolute; inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ink-850);
  border: 2px solid var(--amber);
  isolation: isolate;
}

.comercial__slide {
  position: absolute; inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--d-macro) var(--ease), transform 6s linear;
  will-change: opacity;
}
.comercial__slide.is-ativa {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}
/* Foto que não carregou não fica como buraco preto no rodízio. */
.comercial__slide[data-quebrada] { display: none; }

.comercial__slide img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 20%;
}

/* Selo redondo do WhatsApp na borda de baixo do círculo. */
.comercial__badge {
  position: absolute; right: 8%; bottom: 8%;
  z-index: 3;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: var(--amber); color: var(--ink-900);
  border: 3px solid var(--ink-850);
  border-radius: 50%;
}
.comercial__badge svg { width: 22px; height: 22px; }

/* Nome e cargo abaixo do círculo, trocando junto com a foto. */
.comercial__legenda {
  display: flex; flex-direction: column; gap: 3px;
  text-align: center; min-height: 3.2em;
}
.comercial__legenda.is-in { animation: legendaEntra var(--d-meso) var(--ease); }
.comercial__nome {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 800; color: var(--cream);
  letter-spacing: -0.015em;
}
.comercial__cargo {
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--amber);
}

@keyframes legendaEntra {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to   { opacity: 1; transform: none; }
}

.comercial__pontos { display: flex; justify-content: center; gap: var(--s-2); }
.comercial__ponto {
  width: 22px; height: 4px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  transition: background-color var(--d-micro) var(--ease), width var(--d-micro) var(--ease);
}
.comercial__ponto:hover { background: var(--muted); }
.comercial__ponto.is-ativo { width: 30px; background: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  .comercial__slide { transition: opacity var(--d-micro) linear; transform: none; }
  .comercial__slide.is-ativa { transform: none; }
  .comercial__legenda.is-in { animation: none; }
}

/* ==========================================================================
   Cabeçalho de página interna
   ========================================================================== */

.pagina-topo {
  padding-top: calc(76px + var(--s-8));
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}
.pagina-topo__inner { display: flex; flex-direction: column; gap: var(--s-4); }
.pagina-topo h1 { font-size: var(--fs-2xl); }
.pagina-topo p { color: var(--muted); max-width: var(--measure); }

.migalha { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--faint); }
.migalha a { transition: color var(--d-micro) var(--ease); }
.migalha a:hover { color: var(--amber); }
.migalha svg { width: 12px; height: 12px; }

/* ==========================================================================
   Cortina de transição entre páginas
   ========================================================================== */

/* Sobe cobrindo a tela quando um link com data-transicao é clicado; a página
   de destino abre com a própria cortina saindo — emenda uma na outra. */
.transicao {
  position: fixed;
  inset: 0;
  z-index: var(--z-boot);
  background: var(--ink-900);
  pointer-events: all;
}

/* ==========================================================================
   Blocos de marca — tela principal, banner que abre em dropdown
   ========================================================================== */

/* A dobra: a pilha de banners nasce recolhida para a home não ficar poluída.
   Mesmo truque de altura dos painéis de marca — 0fr fechada, 1fr aberta. */
.marcas-dobra {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-meso) var(--ease-inout);
}
.marcas-dobra.is-aberta { grid-template-rows: 1fr; }
.marcas-dobra__conteudo { overflow: hidden; min-height: 0; }

/* Ações da cabeça da seção: o "Abrir" e o link do catálogo lado a lado. */
.marcas-acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

/* Botão que abre a vitrine: pílula com rótulo + chevron, três movimentos.
   Fechado, um anel âmbar pulsa avisando que dá para clicar; no hover a
   pílula veste o âmbar; aberto, o rótulo gira para "Fechar" e o chevron
   aponta para cima. */
.marcas-abrir {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 13px 24px;
  background: var(--ink-800);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  color: var(--cream);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1;
  transition:
    background var(--d-micro) var(--ease),
    border-color var(--d-micro) var(--ease),
    color var(--d-micro) var(--ease);
}
.marcas-abrir:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--ink-900);
}

/* O anel: nasce colado na borda da pílula, cresce e some. Para quando a
   dobra está aberta — aberta não precisa de convite. */
.marcas-abrir::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--amber);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  animation: marcas-abrir-anel 3.2s var(--ease) infinite;
}
.marcas-abrir[aria-expanded="true"]::before { animation: none; }
@keyframes marcas-abrir-anel {
  0%        { opacity: 0; transform: scale(1); }
  12%       { opacity: 0.9; }
  48%, 100% { opacity: 0; transform: scale(1.35, 1.9); }
}
@media (prefers-reduced-motion: reduce) {
  .marcas-abrir::before { animation: none; }
}

/* Rótulo em duas camadas: "Abrir" sobe e sai, "Fechar" entra por baixo. */
.marcas-abrir__rotulos {
  display: inline-grid;
  justify-items: center;
  overflow: hidden;
}
.marcas-abrir__rotulo {
  grid-area: 1 / 1;
  transition:
    transform var(--d-meso) var(--ease-inout),
    opacity var(--d-meso) var(--ease-inout);
}
.marcas-abrir__rotulo--fechar { transform: translateY(120%); opacity: 0; }
.marcas-abrir[aria-expanded="true"] .marcas-abrir__rotulo { transform: translateY(-120%); opacity: 0; }
.marcas-abrir[aria-expanded="true"] .marcas-abrir__rotulo--fechar { transform: translateY(0); opacity: 1; }

.marcas-abrir__seta {
  width: 16px; height: 16px;
  transition: transform var(--d-meso) var(--ease-inout);
}
.marcas-abrir[aria-expanded="true"] .marcas-abrir__seta { transform: rotate(180deg); }

/* Pilha contínua em sangria total: as imagens ocupam 100% da largura da
   tela, coladas uma na outra — zero espaço entre elas. As linhas de marca
   são sombra interna (não ocupam layout), então "colada" é colada mesmo.
   O "bloco de divisão" só nasce ao abrir. */
.blocos-marcas {
  display: grid;
  gap: 0;
  /* recuo que alinha o conteúdo interno dos painéis ao container--wide
     (o mesmo do título da seção), mesmo com a faixa sangrando até as bordas */
  --sangria: max(var(--gutter), calc((100% - var(--container-wide)) / 2 + var(--gutter)));
}

.bloco-marca {
  --acento: var(--amber);
  overflow: hidden;
  transition:
    margin var(--d-meso) var(--ease-inout),
    box-shadow var(--d-micro) var(--ease);
}
.bloco-marca:hover {
  box-shadow: inset 0 3px 0 var(--acento), inset 0 -3px 0 var(--acento);
}

/* Aberta, a marca se separa da pilha: respira nas margens e ganha as linhas
   de divisão no próprio tom — o bloco existe só enquanto está aberta. */
.bloco-marca.is-aberto {
  margin-block: var(--s-6);
  box-shadow: inset 0 3px 0 var(--acento), inset 0 -3px 0 var(--acento);
}
.bloco-marca.is-aberto:first-child { margin-top: 0; }
.bloco-marca.is-aberto:last-child { margin-bottom: 0; }

.bloco-marca__topo {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

/* Modo arte pronta: a imagem enviada É o bloco — no desktop aparece inteira,
   na proporção original da arte. */
.bloco-marca__banner {
  width: 100%;
  height: auto;
}

/* Modo automático: foto do produto + nome grande no tom da marca.
   Tem fundo próprio porque, sem arte, precisa se distinguir do preto da
   página e das bandas vizinhas. O recuo lateral acompanha o container. */
.bloco-marca__auto {
  display: grid;
  grid-template-columns: 148px 1fr;
  align-items: center;
  gap: clamp(var(--s-5), 4vw, var(--s-8));
  padding: var(--s-5) var(--sangria, var(--s-6));
  min-height: 168px;
  background: var(--ink-850);
}
.bloco-marca__foto {
  width: 148px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-800);
}
.bloco-marca__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-meso) var(--ease);
}
.bloco-marca__topo:hover .bloco-marca__foto img { transform: scale(1.05); }

.bloco-marca__texto { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.bloco-marca__nome {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--acento);
}
.bloco-marca__itens {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

/* Chevron que gira quando o bloco abre. */
.bloco-marca__abrir {
  position: absolute;
  right: clamp(var(--s-4), 3vw, var(--s-6));
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(5, 5, 5, 0.6);
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--cream);
  transition: border-color var(--d-micro) var(--ease);
}
.bloco-marca__topo:hover .bloco-marca__abrir { border-color: var(--acento); }
.bloco-marca__abrir svg {
  width: 18px; height: 18px;
  transition: transform var(--d-meso) var(--ease-inout);
}
.bloco-marca.is-aberto .bloco-marca__abrir svg { transform: rotate(180deg); }

/* O dropdown: 0fr fechado, 1fr aberto — anima altura sem medir nada no JS. */
.bloco-marca__painel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-meso) var(--ease-inout);
}
.bloco-marca.is-aberto .bloco-marca__painel { grid-template-rows: 1fr; }
.bloco-marca__conteudo { overflow: hidden; min-height: 0; }
.bloco-marca__interno {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6) var(--sangria, var(--s-5)) var(--s-7);
  border-top: 1px solid var(--line);
  background: var(--ink-850); /* base enquanto o clone da arte carrega */
}

/* Clone da arte da marca atrás dos itens: desfocado para virar atmosfera,
   com um véu sólido por cima ("a sombra") segurando a leitura dos cards. */
.bloco-marca__fundo {
  position: absolute; inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.bloco-marca__fundo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(16px) saturate(1.1);
  transform: scale(1.15); /* esconde as bordas lavadas do blur */
}
.bloco-marca__fundo::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(5, 5, 5, 0.66);
}

/* Arte de fundo própria (enviada junto com o banner): entra limpa, sem blur —
   ela já nasceu para ficar atrás dos itens — e com véu mais leve. */
.bloco-marca__fundo.is-proprio img { filter: none; transform: none; }
.bloco-marca__fundo.is-proprio::after { background: rgba(5, 5, 5, 0.42); }

@media (max-width: 620px) {
  .bloco-marca__auto {
    grid-template-columns: 96px 1fr;
    min-height: 128px;
    padding: var(--s-4);
  }
  .bloco-marca__foto { width: 96px; }
  /* A arte aparece inteira em qualquer largura — o corte de antes decepava
     garrafa e nome conforme a arte. Faixa mais baixa, porém completa. */
  .bloco-marca__abrir { width: 38px; height: 38px; right: var(--s-3); }
}

/* ==========================================================================
   Barra de filtros do catálogo
   ========================================================================== */

.filtros {
  position: sticky; top: 76px;
  z-index: var(--z-sticky);
  padding-block: var(--s-4);
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
}
.filtros__linha { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.filtros__linha + .filtros__linha { margin-top: var(--s-3); }
.filtros__toggle { display: none; }

/* Tablet e abaixo: cabeçalho compacto (66px, casa com o header), a busca ocupa
   a linha inteira e os dois selects dividem a linha de baixo — tira a sensação
   de "espremido" e a fresta entre o header e a barra de filtros. */
@media (max-width: 900px) {
  .filtros { top: 66px; }
  .pagina-topo { padding-top: calc(66px + var(--s-7)); }
  .filtros .search { flex: 1 0 100%; }
  .filtros .select { flex: 1; }
  .filtros .select select { width: 100%; }
}

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

.produto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: start;
}
.produto__midia {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--ink-850);
}
.produto__midia img { width: 100%; height: 100%; object-fit: cover; }
.produto__flag {
  position: absolute; top: var(--s-4); left: var(--s-4);
  padding: 6px 12px;
  background: var(--amber); color: var(--ink-900);
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  border-radius: var(--r-pill);
}

.produto__info { display: flex; flex-direction: column; gap: var(--s-5); position: sticky; top: 108px; }
.produto__marca {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--amber);
}
.produto__nome { font-size: var(--fs-2xl); }
.produto__desc { color: var(--muted); max-width: 48ch; }

.ficha {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ficha__item { display: flex; flex-direction: column; gap: 3px; padding: var(--s-4); background: var(--ink-800); }
.ficha__rot {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); letter-spacing: var(--tr-label);
  text-transform: uppercase; color: var(--faint);
}
.ficha__rot svg { width: 13px; height: 13px; color: var(--gold); }
.ficha__val { font-size: var(--fs-base); font-weight: 600; color: var(--cream); }

.compra {
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.compra__topo { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
.compra__acoes { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.compra__acoes .btn { flex: 1; min-width: 170px; }
.compra__nota { font-size: var(--fs-xs); color: var(--faint); }

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

.carrinho { display: grid; grid-template-columns: 1fr 380px; gap: var(--s-7); align-items: start; }

.linha-item {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.linha-item + .linha-item { margin-top: var(--s-3); }
.linha-item__foto {
  width: 88px; aspect-ratio: 1;
  object-fit: cover; border-radius: var(--r-sm);
  background: var(--ink-850);
}
.linha-item__nome {
  font-family: var(--font-display);
  font-size: var(--fs-base); font-weight: 700; color: var(--cream);
  transition: color var(--d-micro) var(--ease);
}
.linha-item__nome:hover { color: var(--amber); }
.linha-item__meta { font-size: var(--fs-xs); color: var(--faint); margin-top: 3px; }
/* Aviso de pedido mínimo do item — informa sem bloquear o envio. */
.linha-item__alerta {
  display: inline-block; margin-top: var(--s-2);
  font-size: var(--fs-xs); color: var(--amber);
}
.linha-item__ctrl { display: flex; align-items: center; gap: var(--s-4); }
.linha-item__preco { text-align: right; min-width: 106px; }

.resumo {
  position: sticky; top: 108px;
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-6);
  background: var(--ink-800);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.resumo h2 { font-size: var(--fs-lg); }
.resumo__linha { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-sm); color: var(--muted); }
.resumo__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}
.resumo__total b {
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 800;
  letter-spacing: -0.02em; color: var(--cream);
}
.resumo__aviso {
  display: flex; gap: var(--s-3);
  padding: var(--s-4);
  border: 1px solid var(--amber-24);
  background: var(--amber-06);
  border-radius: var(--r-sm);
  font-size: var(--fs-xs); color: var(--text);
}
.resumo__aviso svg { width: 16px; height: 16px; color: var(--amber); flex: none; }

/* ==========================================================================
   Responsivo
   ========================================================================== */

@media (max-width: 1180px) {
  .grid-categorias { grid-template-columns: repeat(3, 1fr); }
  .grid-categorias > :first-child { grid-column: span 3; }
  .valores { grid-template-columns: repeat(2, 1fr); }
  .valor:nth-child(2) { border-right: 0; }
  .valor:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}

@media (max-width: 1024px) {
  .hero__scroll { display: none; }
  .carrinho { grid-template-columns: 1fr; }
  .resumo { position: static; }
  .produto { grid-template-columns: 1fr; }
  .produto__info { position: static; }
  .numeros { grid-template-columns: repeat(2, 1fr); row-gap: var(--s-7); }
}

@media (max-width: 860px) {
  .sobre { grid-template-columns: 1fr; }
  .sobre__midia { aspect-ratio: 16 / 10; }
  .grid-categorias { grid-template-columns: repeat(2, 1fr); }
  .grid-categorias > :first-child { grid-column: span 2; }
  .produto__info { position: static; }

  /* A CTA já é coluna centralizada na base; no celular só o círculo encolhe e
     os botões empilham em largura total (o "Falar com o comercial" não cabe
     numa linha, então o rótulo pode quebrar em vez de estourar). */
  .comercial__aro { width: min(74vw, 320px); }
  .chamada--split .chamada__acoes { flex-direction: column; align-items: stretch; width: 100%; }
  .chamada--split .chamada__acoes .btn { width: 100%; white-space: normal; }
}

@media (max-width: 620px) {
  .grid-produtos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s-3); }
  .card-produto__body { padding: var(--s-4); }
  .card-produto__foot { padding: var(--s-3) var(--s-4); flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .card-produto__foot .btn { width: 100%; }
  .valores { grid-template-columns: 1fr; }
  .valor { border-right: 0; border-bottom: 1px solid var(--line); }
  .valor:last-child { border-bottom: 0; }
  .ficha { grid-template-columns: 1fr; }
  .linha-item { grid-template-columns: 64px 1fr; row-gap: var(--s-3); }
  .linha-item__foto { width: 64px; }
  .linha-item__preco { grid-column: 1 / -1; text-align: left; }
  .hero__selo { width: 84px; height: 84px; right: -2%; }
  .boot__logo { width: 100px; height: 100px; }
  .boot__ring { width: 190px; height: 190px; }

  /* O topo do catálogo ocupava a primeira tela inteira do celular: respiro
     menor, selects lado a lado e categorias numa linha só com rolagem
     lateral — o produto aparece sem rolar uma tela. */
  .pagina-topo { padding-top: calc(66px + var(--s-5)); padding-bottom: var(--s-5); }
  .filtros__linha + .filtros__linha { margin-top: var(--s-2); }
  .filtros .select { flex: 1; }
  .filtros .select select { width: 100%; }
  .filtros .chips {
    flex: 0 0 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .filtros .chips::-webkit-scrollbar { display: none; }
}

/* ==========================================================================
   Página "Nossa história" — capítulos alternados com as cenas da casa
   ========================================================================== */

.historia {
  display: flex;
  flex-direction: column;
  gap: clamp(var(--s-9), 10vw, var(--s-10));
}

.historia-cap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(var(--s-6), 5vw, var(--s-9));
  align-items: center;
}
/* Alterna o lado da foto a cada capítulo — a leitura serpenteia. */
.historia-cap:nth-child(even) .historia-cap__midia { order: 2; }

.historia-cap__midia {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--ink-850);
}
.historia-cap__midia img {
  width: 100%; height: 100%;
  object-fit: cover;
}

/* O marco: ano ou era, grande e no âmbar — funciona como a "data" da linha
   do tempo sem precisar de linha desenhada. */
.historia-cap__marco {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--amber);
}
.historia-cap__texto h2 {
  margin-top: var(--s-4);
  font-size: var(--fs-xl);
}
.historia-cap__texto p {
  margin-top: var(--s-4);
  color: var(--muted);
  max-width: 52ch;
}

.historia-acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

@media (max-width: 860px) {
  .historia-cap { grid-template-columns: 1fr; gap: var(--s-5); }
  .historia-cap:nth-child(even) .historia-cap__midia { order: 0; }
  .historia-cap__midia { aspect-ratio: 16 / 10; }
}