/* ═══════════════════════════════════════════════════════════════════════════
   ESTILO — V. Color Lenses
   Depende de vcl-tokens.css. Zero hex e zero ms aqui: se aparecer um, é bug.
   A gramática é a de FG Store (via o porte CSS-puro de Cat's Eye); o
   acabamento é V. Color. Ver docs/DESIGN.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── RESET ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--ff-ui);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  font-weight: var(--peso-corpo);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh; display: flex; flex-direction: column;
}
/* ⚠️ `clip`, e não `hidden`: hidden transforma o body em contêiner de rolagem e
   quebra o `position: sticky` do cabeçalho (achado em Cat's Eye, 30/08). Nos
   dois, html e body, senão o que estoura acima do body rola a página de lado. */
html, body { overflow-x: clip; }
img, picture, video, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 {
  font-family: var(--ff-voz);
  font-weight: var(--peso-medio);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tr-titulo);
}
main { flex: 1; }

/* ── ACESSIBILIDADE ───────────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--cor-marca); outline-offset: 3px; border-radius: var(--raio-conteudo); }
:focus:not(:focus-visible) { outline: none; }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pular {
  position: absolute; top: var(--e-2); left: var(--e-2); z-index: calc(var(--z-header) + 10);
  padding: var(--e-3) var(--e-5); background: var(--cor-campo-vivo); color: var(--cor-texto);
  border-radius: var(--raio-interativo); font-size: var(--t-peq); font-weight: var(--peso-forte);
  transform: translateY(-200%); transition: transform var(--dur-fast) var(--curva-saida);
}
.pular:focus { transform: translateY(0); }
@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; scroll-behavior: auto !important; }
  .paralaxe__fundo { transform: none !important; }
}

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */
.faixa { width: 100%; padding-inline: var(--gutter); }
.container { width: 100%; max-width: var(--largura-max); margin-inline: auto; }
.dobra { padding-block: var(--dobra); }
.dobra--espiada { padding-top: var(--e-6); }
.medida { max-width: var(--largura-texto); }
.dobra__cabeca { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--e-5); margin-bottom: var(--e-7); }
.dobra__titulo { font-size: var(--t-h2); max-width: 20ch; text-wrap: balance; }
.dobra__sub { margin-top: var(--e-4); max-width: 46ch; }

/* ── TIPOGRAFIA DE APOIO ──────────────────────────────────────────────────── */
/* Rótulo: caixa alta miúda, tracking aberto, no SISTEMA. Nunca na voz. */
.rotulo { font-family: var(--ff-ui); font-size: var(--t-micro); font-weight: var(--peso-medio); letter-spacing: var(--tr-alta); text-transform: uppercase; color: var(--cor-texto-sutil); line-height: 1.3; }
.rotulo--marca { color: var(--cor-marca); }
.rotulo--ouro { color: var(--cor-ouro-texto); }
/* Ação: o tratamento de botão e link de ação (13px, caixa alta). */
.acao { font-family: var(--ff-ui); font-size: var(--t-peq); font-weight: var(--peso-medio); letter-spacing: var(--tr-acao); text-transform: uppercase; line-height: 1.2; }
/* Voz: display em caixa mista. */
.voz { font-family: var(--ff-voz); font-weight: var(--peso-medio); letter-spacing: var(--tr-display); line-height: var(--lh-apertada); }
/* Lead: o parágrafo que fala pela marca, na voz (como a Tracksmith e FG). */
.lead { font-family: var(--ff-leitura); font-size: var(--t-lead); line-height: 1.45; font-weight: var(--peso-corpo); color: var(--cor-texto-mudo); }
.mudo { color: var(--cor-texto-mudo); }
.sutil { color: var(--cor-texto-sutil); }
.tabular { font-variant-numeric: tabular-nums lining-nums; }
/* Contador dentro de bolinha: receita única (lição medida de FG). */
.contador[hidden] { display: none; }
.contador { display: inline-flex; align-items: center; justify-content: center; font-weight: var(--peso-medio); font-variant-numeric: tabular-nums lining-nums; letter-spacing: normal; line-height: 1.35; border-radius: var(--raio-interativo); }

/* ── BOTÃO ────────────────────────────────────────────────────────────────
   Pill de 48px (FG: maior que o da Tracksmith).
   🔄 13/09/2026, Mateus: "o hover do botão está bem feio". Os dois anéis que
   abriam em volta (09/09) liam como borda tremendo. Agora a assinatura é a
   LENTE ABRINDO: um disco nasce do centro e cobre o botão com a cor de hover.
   O botão não se mexe (regra da casa: hover nunca move o botão) e o disco só
   anima `transform`. Cada variante declara o par repouso/hover em variável,
   e os dois lados do par foram medidos (comentário em cada variante). */
.botao {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-3);
  min-height: 3rem; padding-inline: var(--e-6);
  border-radius: var(--raio-interativo);
  background: var(--botao-fundo, transparent); color: var(--botao-texto, currentColor);
  border: 1px solid var(--botao-borda, transparent);
  font-family: var(--ff-ui); font-size: var(--t-peq); font-weight: var(--peso-medio);
  letter-spacing: var(--tr-acao); text-transform: uppercase; line-height: 1.2;
  text-align: center; text-wrap: balance;
  transition: color var(--dur-fast) var(--curva-saida),
              border-color var(--dur-fast) var(--curva-saida),
              transform var(--dur-instant) var(--curva-saida);
}
/* O disco: 150% da largura e quadrado, então cobre o botão inteiro em qualquer
   proporção (inclusive o de bloco, 100% da coluna). Nasce em escala 0 no centro,
   onde está o rótulo: o texto é coberto no começo do gesto, e é por isso que a
   troca de cor do texto (quando existe) não passa por contraste ruim. */
.botao::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 150%; aspect-ratio: 1; border-radius: var(--raio-interativo);
  background: var(--botao-hover, transparent); pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--dur-base) var(--curva-saida);
}
.botao:hover::before, .botao:focus-visible::before { transform: translate(-50%, -50%) scale(1); }
.botao:hover, .botao:focus-visible { color: var(--botao-texto-hover, var(--botao-texto)); border-color: var(--botao-borda-hover, var(--botao-borda, transparent)); }
.botao:active { transform: translateY(1px); }
/* A seta avança; o ícone que abre o rótulo (WhatsApp) fica parado. */
.botao svg { transition: transform var(--dur-fast) var(--curva-saida); }
.botao:hover svg:last-child:not(:first-child) { transform: translateX(3px); }
/* Sólido: 🔄 14/09/2026 deixou de ser slate (cliente: "muito pesado"). É o dourado
   do manual com texto escuro (5,05:1) → hover ouro claro (8,60:1). */
.botao--solido { --botao-fundo: var(--cor-ouro); --botao-texto: var(--cor-texto); --botao-hover: var(--cor-ouro-claro); }
/* Ouro: só com texto ESCURO por cima (5,05:1) → hover ouro claro (8,60:1). */
.botao--ouro { --botao-fundo: var(--cor-ouro); --botao-texto: var(--cor-texto); --botao-hover: var(--cor-ouro-claro); }
/* Linha: contorno de UI (3,05:1), texto escuro → o disco de azul-céu enche e o
   texto continua escuro (7,77:1). Secundário no claro. */
.botao--linha { --botao-borda: var(--cor-borda-campo); --botao-texto: var(--cor-texto); --botao-hover: var(--cor-campo-vivo); --botao-texto-hover: var(--cor-texto); --botao-borda-hover: var(--cor-campo-vivo); }
/* Claro: off-white SÓLIDO com texto slate (5,30:1) → hover azul-cinza (4,52:1).
   Era vidro com blur e reprovou em três lentes do council de 09/09/2026. */
.botao--claro { --botao-fundo: var(--cor-invertido); --botao-texto: var(--cor-marca); --botao-hover: var(--cor-invertido-mudo); }
/* Contorno claro: secundário SOBRE SLATE. Texto invertido sobre o fundo do
   herói (7,16:1) → o disco off-white enche e o texto vira slate fundo (7,16:1). */
.botao--contorno-claro { --botao-borda: var(--cor-invertido-mudo); --botao-texto: var(--cor-invertido); --botao-hover: var(--cor-invertido); --botao-texto-hover: var(--cor-marca-fundo); --botao-borda-hover: var(--cor-invertido); }
/* WhatsApp: cor da plataforma, rótulo ESCURO (8,19:1) → hover (6,43:1). */
.botao--whatsapp { --botao-fundo: var(--cor-whatsapp); --botao-texto: var(--cor-texto); --botao-hover: var(--cor-whatsapp-alto); }
.botao--bloco { width: 100%; }
.botao--grande { min-height: 3.5rem; padding-inline: var(--e-7); }
.botao svg { width: 1.125rem; height: 1.125rem; flex: 0 0 auto; }
.botao[disabled], .botao[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
/* Link de ação com sublinhado que cresce. */
/* min-height 1.5rem: alvo de toque de 24px (WCAG 2.5.8), medido pelo axe em 14/09/2026. */
.link-acao { position: relative; display: inline-flex; align-items: center; gap: var(--e-2); min-height: 1.5rem; padding-bottom: 2px; color: var(--cor-marca); }
.link-acao::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-fast) var(--curva-saida); }
.link-acao:hover::after, .link-acao:focus-visible::after { transform: scaleX(1); }
.link-acao svg { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--curva-saida); }
.link-acao:hover svg { transform: translateX(3px); }

/* ── BARRA DE ANÚNCIO (rotativa) ──────────────────────────────────────────
   Campo de slate, texto invertido. Uma condição por vez (Cat's Eye). */
.anuncio { position: relative; height: var(--h-anuncio); overflow: hidden; background: var(--cor-campo-vivo); color: var(--cor-texto); }
.anuncio__trilho { position: relative; height: 100%; }
.anuncio__item {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  padding-inline: var(--gutter);
  font-size: var(--t-mini); font-weight: var(--peso-medio); letter-spacing: 0.06em; text-transform: uppercase;
  opacity: 0; transform: translateY(60%);
  transition: opacity var(--dur-base) var(--curva-suave), transform var(--dur-base) var(--curva-suave);
}
.anuncio__item[data-ativo="true"] { opacity: 1; transform: translateY(0); }
.anuncio__item[data-saindo="true"] { opacity: 0; transform: translateY(-60%); }

/* ── CABEÇALHO ────────────────────────────────────────────────────────────
   Estrutura de FG (Tracksmith): logo CENTRADA e empilhada (monograma em cima,
   wordmark embaixo), nav à esquerda, ações à direita. Sticky, nunca some; só
   a ALTURA muda. Transparente sobre o herói (que sobe por baixo dele), claro
   fora dele, no hover do mouse e com painel aberto. */
.cabecalho {
  position: sticky; top: 0; z-index: var(--z-header);
  color: var(--cor-invertido);
  transition: background-color var(--dur-slow) var(--curva-suave), color var(--dur-slow) var(--curva-suave), box-shadow var(--dur-slow) var(--curva-suave);
}
.cabecalho.preenchido, .cabecalho.encolhido, .cabecalho.sob-ponteiro, .cabecalho.com-painel, .no-js .cabecalho {
  background: color-mix(in srgb, var(--cor-fundo) 94%, transparent);
  backdrop-filter: blur(14px);
  color: var(--cor-texto);
  box-shadow: 0 1px 0 var(--cor-borda);
}
/* Com o painel aberto, barra e painel são uma folha só (FG, 2026-08-07). */
.cabecalho.com-painel { background: var(--cor-superficie); backdrop-filter: none; box-shadow: none; }
.cabecalho__barra {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--e-4);
  height: var(--h-header);
  transition: height var(--dur-slow) var(--curva-suave);
}
.cabecalho.encolhido .cabecalho__barra { height: var(--h-header-compacto); }
.nav { display: flex; align-items: center; gap: var(--e-6); }
.nav__item { position: relative; flex: 0 0 auto; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.375rem; padding-block: var(--e-2); cursor: pointer; color: inherit; }
.nav__item svg { width: 0.625rem; height: 0.625rem; opacity: 0.45; transition: transform var(--dur-fast) var(--curva-saida), opacity var(--dur-fast) var(--curva-saida); }
.nav__item::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; opacity: 0.5; transition: transform var(--dur-fast) var(--curva-saida), opacity var(--dur-fast) var(--curva-saida); }
.nav__item:hover::after, .nav__item:focus-visible::after { transform: scaleX(1); }
.nav__item:hover svg { opacity: 0.9; }
.nav__item[aria-expanded="true"]::after { transform: scaleX(1); opacity: 1; }
.nav__item[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }

.marca { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; justify-self: center; }
.marca__monograma { display: block; height: var(--h-logo); width: auto; aspect-ratio: 620 / 380; transition: transform var(--dur-slow) var(--curva-suave); transform-origin: center; }
.marca__monograma svg { height: 100%; width: auto; }
.cabecalho.encolhido .marca__monograma { transform: scale(0.82); }
/* Wordmark: recolhe ao rolar. `max-height` + opacity + translate, numa célula só. */
.marca__wordmark { display: grid; place-items: center; overflow: hidden; max-height: 3.5rem; opacity: 1; transform: translateY(0); transition: max-height var(--dur-slow) var(--curva-suave), opacity var(--dur-slow) var(--curva-suave), transform var(--dur-slow) var(--curva-suave); }
.marca__wordmark svg { width: 8.5rem; height: auto; color: currentColor; }
.cabecalho.encolhido .marca__wordmark { max-height: 0; opacity: 0; transform: translateY(-4px); }

.acoes { display: flex; align-items: center; justify-content: end; gap: var(--e-1); }
.botao-icone { position: relative; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--raio-interativo); color: inherit; transition: background-color var(--dur-fast) var(--curva-saida); }
.botao-icone svg { width: 1.375rem; height: 1.375rem; }
.botao-icone:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.botao-icone__contador { position: absolute; top: 0.375rem; right: 0.25rem; width: 1rem; height: 1rem; font-size: 0.5625rem; background: var(--cor-marca); color: var(--cor-invertido); }
.cabecalho:not(.preenchido):not(.encolhido):not(.sob-ponteiro):not(.com-painel) .botao-icone__contador { background: var(--cor-invertido); color: var(--cor-marca); }
.botao-icone--menu { justify-self: start; }

/* Mega-menu: máscara + casca que desce; itens em cascata; saída reversa. */
.painel-mascara { position: absolute; left: 0; right: 0; top: 100%; overflow: hidden; z-index: var(--z-painel); pointer-events: none; }
.painel {
  background: var(--cor-superficie); color: var(--cor-texto);
  border-bottom: 1px solid var(--cor-borda);
  transform: translateY(calc(-100% - 2px));
  transition: transform var(--dur-base) var(--curva-suave);
}
.painel-mascara[data-aberto="true"] { pointer-events: auto; }
.painel-mascara[data-aberto="true"] .painel { transform: translateY(0); transition-duration: var(--dur-slow); }
/* Teto de altura: o piso comum das seções, pra troca não pular (FG: 32rem). */
.painel__miolo { min-height: 30rem; padding-block: var(--e-7) var(--e-8); }
.painel__secao { display: grid; grid-template-columns: minmax(0, 27.5rem) minmax(0, 32.5rem); justify-content: space-between; gap: var(--e-9); }
.painel__secao[hidden] { display: none; }
.painel__chamada { max-width: 34ch; }
.painel__lista { display: flex; flex-direction: column; margin-top: var(--e-6); }
.painel__link { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); padding-block: var(--e-3); border-bottom: 1px solid var(--cor-borda); transition: border-color var(--dur-fast) var(--curva-saida); }
.painel__link:hover { border-color: var(--cor-marca); }
.painel__nome { font-family: var(--ff-voz); font-size: 1.75rem; font-weight: var(--peso-medio); line-height: 1.1; transition: color var(--dur-fast) var(--curva-saida); display: flex; align-items: center; gap: var(--e-3); }
.painel__link:hover .painel__nome { color: var(--cor-marca); }
.painel__seta { width: 1.125rem; height: 1.125rem; color: var(--cor-marca); opacity: 0; transform: translateX(-8px); transition: transform var(--dur-fast) var(--curva-saida), opacity var(--dur-fast) var(--curva-saida); }
.painel__link:hover .painel__seta { opacity: 1; transform: translateX(0); }
.painel__qtd { font-size: var(--t-micro); letter-spacing: var(--tr-alta); text-transform: uppercase; color: var(--cor-texto-sutil); }
.painel__foto { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--raio-conteudo); background: var(--cor-foto); }
.painel__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.painel__ver { margin-top: var(--e-4); }
/* Cascata: entra a 80% da casca; sai em ordem reversa, mais curto. */
.painel__item { opacity: 0; transform: translateY(12px); }
.painel__secao[data-visivel="true"] .painel__item {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-slow) var(--curva-suave), transform var(--dur-slow) var(--curva-suave);
  transition-delay: calc(var(--espera, 0ms) + var(--i, 0) * var(--cascata));
}
.painel__item[data-saindo="true"] {
  opacity: 0; transform: translateY(12px);
  transition: opacity var(--dur-fast) var(--curva-suave), transform var(--dur-fast) var(--curva-suave);
  transition-delay: calc(var(--i-saida, 0) * var(--cascata) * 0.66);
}

/* Menu mobile: desliza da esquerda, opaco. */
.menu-mobile { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--cor-fundo); color: var(--cor-texto); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--dur-slow) var(--curva-suave); }
.menu-mobile[data-aberto="true"] { transform: translateX(0); }
.menu-mobile__topo { display: flex; align-items: center; justify-content: space-between; height: var(--h-header-compacto); padding-inline: var(--gutter); }
.menu-mobile__topo svg.wordmark { width: 7.5rem; height: auto; color: var(--cor-marca); }
.menu-mobile__corpo { overflow-y: auto; padding: 0 var(--gutter) var(--e-8); }
.menu-mobile__item { opacity: 0; transform: translateY(12px); }
.menu-mobile[data-aberto="true"] .menu-mobile__item { opacity: 1; transform: translateY(0); transition: opacity var(--dur-slow) var(--curva-suave), transform var(--dur-slow) var(--curva-suave); transition-delay: calc(var(--atraso-conteudo) + var(--i, 0) * var(--cascata)); }
.menu-mobile__grupo > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-block: var(--e-4); border-bottom: 1px solid var(--cor-borda); font-family: var(--ff-voz); font-size: 1.875rem; font-weight: var(--peso-medio); text-align: left; }
.menu-mobile__grupo > button svg { width: 1rem; height: 1rem; transition: transform var(--dur-fast) var(--curva-saida); }
.menu-mobile__grupo > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.menu-mobile__sub { padding: var(--e-3) 0 var(--e-4); display: flex; flex-direction: column; gap: var(--e-3); }
.menu-mobile__sub a { display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-corpo); color: var(--cor-texto-mudo); }
.menu-mobile__rodape { margin-top: var(--e-7); display: flex; flex-direction: column; gap: var(--e-4); }

/* ── HERÓI ────────────────────────────────────────────────────────────────
   Começa ATRÁS do header (margem negativa de --h-header) pra ele ser
   transparente sobre a foto. Dobra inteira (100svh, piso de 42rem). Conteúdo
   centralizado; véu chapado + faixa do header (C10) + véu local do texto,
   as três camadas de FG, com os números medidos lá como ponto de partida.
   🔄 13/09/2026, Mateus: "exatamente do jeito que estava, com três banners e
   texto legível". O layout de 09/09 voltou inteiro; o que mudou: (1) cada
   banner é um slide com a própria foto, todos na MESMA célula de grade (a
   altura é a do maior, a troca não empurra a página); (2) o véu do texto
   ficou mais denso e o texto ganhou sombra curta, medido por pixel da foto
   atrás de cada letra (docs/DESIGN.md §Herói). A tentativa de meia tela do
   mesmo dia foi descartada por ele. */
.heroi { position: relative; isolation: isolate; overflow: hidden; color: var(--cor-invertido); background: var(--cor-campo); }
/* Só a primeira seção da página sobe por baixo do header (senão empurra a anterior). */
.heroi--sob-header { margin-top: calc(-1 * var(--h-header)); }
.heroi__palco { display: grid; }
.heroi__slide {
  grid-area: 1 / 1; position: relative; isolation: isolate; overflow: hidden;
  --veu-n: calc(var(--veu, 0.42) + 0.18);   /* celular: mais véu, o texto pousa em cima do assunto */
  min-height: max(42rem, 100svh);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: calc(4rem + var(--h-header));
  text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-page) var(--curva-suave), visibility 0s step-end var(--dur-page);
}
.heroi__slide[data-ativo="true"] { opacity: 1; visibility: visible; transition: opacity var(--dur-page) var(--curva-suave), visibility 0s; }
.no-js .heroi__slide:first-child { opacity: 1; visibility: visible; }
.heroi__midia { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: var(--cor-campo); }
.paralaxe__fundo { position: absolute; inset: calc(var(--paralaxe-folga) * -1%) 0 auto 0; height: calc(100% + var(--paralaxe-folga) * 2%); will-change: transform; }
.paralaxe__fundo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50% 45%); transform: scale(1.06); transition: transform var(--dur-assentar) var(--curva-saida); }
.heroi__slide[data-ativo="true"] .paralaxe__fundo img { transform: scale(1); }
.heroi__veu { position: absolute; inset: 0; z-index: -2; background: rgb(var(--cor-veu-rgb) / var(--veu-n)); }
.heroi__veu-header { position: absolute; inset: 0 0 auto 0; z-index: -1; height: calc(var(--h-header) + 3rem); background: linear-gradient(to bottom, var(--veu-header), transparent); }
/* Véu do texto: elipse do tamanho do bloco de texto. Era 80% do chapado e deixava
   letra fina sobre ponto claro da foto abaixo de 4,5:1; agora é o chapado inteiro
   somado, e o centro fica sempre escuro o bastante. */
.heroi__veu-texto { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(var(--veu-n) + 0.3); background: radial-gradient(70% 50% at 50% 50%, var(--cor-marca-fundo) 0%, transparent 100%); }
.heroi__conteudo { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--e-5); max-width: 64rem; margin-inline: auto; }
.heroi__titulo { font-size: var(--t-heroi); max-width: 16ch; text-wrap: balance; color: var(--cor-invertido); text-shadow: var(--sombra-texto); }
/* Peso 500, não 400: a Cormorant fina sobre foto virava fio de cabelo (council 09/09). */
.heroi__sub { max-width: 40ch; color: var(--cor-invertido); font-size: var(--t-lead); font-weight: var(--peso-medio); text-wrap: pretty; text-shadow: var(--sombra-texto); }
.heroi__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-4); padding-top: var(--e-3); }
/* Texto do slide que entra: cascata curta depois do cruzamento começar. */
.heroi__item { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--curva-suave), transform var(--dur-slow) var(--curva-suave); }
.heroi__slide[data-ativo="true"] .heroi__item { opacity: 1; transform: translateY(0); transition-delay: calc(var(--dur-fast) + var(--i, 0) * var(--cascata) * 2); }
.no-js .heroi__item { opacity: 1; transform: none; }
/* Anel de foco sobre foto: o slate some (1,3:1 medido). */
.heroi :focus-visible, .cabecalho:not(.preenchido):not(.encolhido) :focus-visible { outline-color: var(--cor-invertido); }
@media (min-width: 64rem) { .heroi__slide { --veu-n: var(--veu, 0.42); } }
@media (max-width: 40rem) { .heroi__acoes { flex-direction: column; align-self: stretch; } .heroi__acoes .botao { width: 100%; } }
@media (max-height: 50rem) { .heroi__slide { padding-block: calc(2.5rem + var(--h-header)); } }
@media (prefers-reduced-motion: reduce) { .heroi__slide[data-ativo="true"] .heroi__item { transition-delay: 0s; } }

/* Controlo: centrado no pé da foto. Contador, uma barra por banner (a do ativo
   enche no tempo do banner), setas e pausa. A pausa é obrigatória: conteúdo que
   se move sozinho por mais de 5 s precisa de um jeito de parar (WCAG 2.2.2). */
.heroi__controlo { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--h-anuncio) + var(--e-3)); transform: translateX(-50%); display: flex; align-items: center; gap: var(--e-2); color: var(--cor-invertido); }
.heroi__contador { min-width: 3.5rem; color: var(--cor-invertido); font-variant-numeric: tabular-nums; text-shadow: var(--sombra-texto); }
.heroi__pontos { display: flex; align-items: center; }
.heroi__ponto { position: relative; width: 2.75rem; height: 2.75rem; }
.heroi__ponto::before, .heroi__progresso { position: absolute; left: var(--e-2); right: var(--e-2); top: 50%; height: 2px; margin-top: -1px; border-radius: var(--raio-interativo); }
.heroi__ponto::before { content: ""; background: color-mix(in srgb, var(--cor-invertido) 40%, transparent); transition: background-color var(--dur-fast) var(--curva-saida); }
.heroi__ponto:hover::before { background: color-mix(in srgb, var(--cor-invertido) 70%, transparent); }
.heroi__progresso { display: block; background: var(--cor-invertido); transform: scaleX(0); transform-origin: left; }
.heroi__ponto[aria-current="true"] .heroi__progresso { transform: scaleX(1); }
.heroi[data-tocando="true"] .heroi__ponto[aria-current="true"] .heroi__progresso { animation: progresso var(--dur-slide) var(--curva-tempo) forwards; }
.heroi[data-tocando="true"][data-segurando="true"] .heroi__ponto[aria-current="true"] .heroi__progresso { animation-play-state: paused; }
@keyframes progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.heroi__controlo .botao-icone svg { width: 1.125rem; height: 1.125rem; }
.heroi__seta-volta { transform: scaleX(-1); }
.heroi__controlo [data-icone-play][hidden], .heroi__controlo [data-icone-pausa][hidden] { display: none; }
@media (max-width: 40rem) { .heroi__slide { padding-bottom: calc(4rem + var(--e-8)); } }

/* ── RECORTE DE LENTE ─────────────────────────────────────────────────────
   Uma peça só pra toda miniatura de lente (disco da dobra de cores, chip do
   menu e do filtro, cores irmãs no produto, 2ª face do card). A foto é
   posicionada por TRÊS números em fração da largura dela: centro (--cx, --cy)
   e raio (--r) do círculo que interessa. Por que números e não uma foto
   recortada: as fotos moram no CDN da Shopify e Johny troca pelo editor; o
   recorte tem que viver no tema. Medições em docs/DESIGN.md §Fotos. */
.recorte { position: relative; display: block; overflow: hidden; border-radius: var(--raio-interativo); background: var(--cor-texto); isolation: isolate; }
.recorte__giro { position: absolute; inset: 0; transition: transform var(--dur-page) var(--curva-saida); }
.recorte .recorte__giro img {
  position: absolute; max-width: none; height: auto;
  width: calc(100% / (2 * var(--r, 0.5)));
  left: calc(50% - var(--cx, 0.5) * 100% / (2 * var(--r, 0.5)));
  top: calc(50% - var(--cy, 0.5) * 100% / (2 * var(--r, 0.5)));
}
/* Lente fotografada fora do olho: centro transparente vira pupila. */
.recorte--pupila::after { content: ""; position: absolute; inset: 34%; z-index: 1; border-radius: var(--raio-interativo); background: radial-gradient(circle, var(--cor-pupila) 55%, transparent 72%); pointer-events: none; }
/* Tom de efeito: gira a cor de uma íris real pro vermelho (disco de Halloween e
   Cosplay, 13/09/2026). Filtro estático, nunca animado. */
.recorte--tom .recorte__giro img { filter: hue-rotate(-24deg) saturate(1.2) brightness(0.82); }
/* Quadrado: o olho recortado de dentro do cartão do fornecedor (card). */
.recorte--quadrado { border-radius: 0; background: var(--cor-foto); }

/* ── EXPLORA POR COR ──────────────────────────────────────────────────────
   🔄 13/09/2026, Mateus: "os ícones estão muito feios; em Cat's Eye estão
   bonitos, não copie, mas veja como estão". De Cat's veio a MECÂNICA: disco
   fotográfico grande, em grade, nome e contagem embaixo. O acabamento é daqui:
   as íris são macros reais do catálogo (Siesta, fundo preto), e o hover é a
   lente ASSENTANDO (gira um pouco e aproxima) com o anel de ouro fechando em
   volta. A piscada de Cat's fica em Cat's.
   A lista vertical de 09/09 media 1.300 px; a grade cabe numa tela. */
.cores__grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e-6) var(--gutter); }
.cor__link { display: flex; flex-direction: column; align-items: center; gap: var(--e-4); text-align: center; }
.cor__disco { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.cor__disco .recorte { position: absolute; inset: 0; box-shadow: var(--sombra-flutua); }
.cor__disco::after {
  content: ""; position: absolute; inset: -0.625rem; border-radius: var(--raio-interativo); pointer-events: none;
  border: 1px solid var(--cor-ouro); opacity: 0; transform: scale(0.94);
  transition: opacity var(--dur-base) var(--curva-saida), transform var(--dur-base) var(--curva-saida);
}
.cor__link:hover .cor__disco::after, .cor__link:focus-visible .cor__disco::after { opacity: 1; transform: scale(1); }
.cor__link:hover .recorte__giro, .cor__link:focus-visible .recorte__giro { transform: rotate(14deg) scale(1.08); }
.cor__nome { font-family: var(--ff-voz); font-size: var(--t-h3); font-weight: var(--peso-medio); line-height: 1.1; text-wrap: balance; transition: color var(--dur-fast) var(--curva-saida); }
.cor__link:hover .cor__nome { color: var(--cor-marca); }
.cor__qtd { margin-top: calc(var(--e-2) * -1); }
.cor__link:focus-visible { outline: none; }
.cor__link:focus-visible .cor__nome { text-decoration: underline; text-underline-offset: 0.2em; }
@media (hover: none) { .cor__link:active .recorte__giro { transform: rotate(14deg) scale(1.08); } }
/* Celular: trilho com snap, o 3º disco espreita (diz que há mais). */
@media (max-width: 48rem) {
  .cores__grade { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); gap: var(--e-5); margin-inline: calc(var(--gutter) * -1); padding: var(--e-3) var(--gutter) var(--e-2); scrollbar-width: none; }
  .cores__grade::-webkit-scrollbar { display: none; }
  .cores__grade > li { flex: 0 0 38%; scroll-snap-align: start; }
}

/* ── CARD DE PRODUTO ──────────────────────────────────────────────────────
   Sem box, sem movimento (FG). Foto 1 = macro do olho; hover/toque = estojo.
   Nome na VOZ a 20px, puxa pro slate no hover. Altura determinística: nome
   em duas linhas sempre, spec numa linha, preço. */
.grade { display: grid; gap: var(--e-6) var(--e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) { .grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grade { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-7) var(--e-5); } }
.card { position: relative; display: flex; flex-direction: column; gap: var(--e-4); }
.card__foto { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--raio-conteudo); background: var(--cor-foto); }
.card__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__face { position: absolute; inset: 0; transition: opacity var(--dur-base) var(--curva-saida); }
.card__face--2 { opacity: 0; }
.card:hover .card__face--2, .card[data-face="2"] .card__face--2 { opacity: 1; }
/* Cartão do fornecedor (Série C e Halloween: olho em cima, faixa cinza com
   código e texto, disco da lente embaixo à direita). 🔄 13/09/2026: a vitrine
   deixou de mostrar o cartão inteiro. Face 1 = o OLHO recortado de dentro do
   cartão, sem texto nenhum; face 2 = a LENTE do disco, com pupila, pousada na
   caixa de foto com o anel de ouro. Mateus: "melhora as segundas imagens dos
   três primeiros produtos" (eram o disco ampliado 2,7×, com o pontilhado e a
   ponta do texto dentro). O cartão inteiro continua na galeria do produto,
   que é onde a ficha dele serve. Medidas em docs/DESIGN.md §Fotos. */
.card__face .recorte--quadrado { position: absolute; inset: 0; }
.card__face--lente { display: grid; place-items: center; background: var(--cor-foto); }
.card__face--lente .recorte { width: 62%; aspect-ratio: 1; background: var(--cor-superficie); box-shadow: var(--sombra-flutua); outline: 1px solid color-mix(in srgb, var(--cor-ouro) 60%, transparent); outline-offset: 0.5rem; }
.card__faces { position: absolute; bottom: var(--e-3); right: var(--e-3); z-index: 2; display: none; gap: 0.375rem; }
.card__faces button { width: 0.5rem; height: 0.5rem; border-radius: var(--raio-interativo); background: var(--cor-borda-forte); transition: background-color var(--dur-fast) var(--curva-saida); }
.card__faces button[aria-pressed="true"] { background: var(--cor-marca); }
@media (hover: none) { .card__faces { display: flex; } .card:hover .card__face--2 { opacity: 0; } .card[data-face="2"] .card__face--2 { opacity: 1; } }
.card__selo { position: absolute; top: var(--e-3); left: var(--e-3); z-index: 2; padding: var(--e-1) var(--e-3); border-radius: var(--raio-interativo); background: var(--cor-superficie); color: var(--cor-texto); font-size: var(--t-micro); font-weight: var(--peso-medio); letter-spacing: 0.06em; text-transform: uppercase; }
.card__corpo { display: flex; flex-direction: column; gap: 0.375rem; }
.card__linha { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__nome { font-family: var(--ff-voz); font-size: var(--t-card); font-weight: var(--peso-medio); line-height: 1.2; min-height: 2.4em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--dur-fast) var(--curva-saida); }
.card:hover .card__nome { color: var(--cor-marca); }
.card__spec { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__preco { display: flex; align-items: baseline; gap: var(--e-2); padding-top: var(--e-1); font-variant-numeric: tabular-nums; }
.card__preco-de { font-size: var(--t-mini); color: var(--cor-texto-sutil); text-decoration: line-through; }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* ── CARTÃO VIVO: hover dos cartões de avaliação, linha e diâmetro ─────────
   🔄 13/09/2026, Mateus: "hover mais interessante nos cards: animação de
   preenchimento, as estrelas se movimentam, igual ao botão". É o MESMO gesto do
   botão: um disco nasce do centro e enche o cartão. 🔄 14/09/2026: o disco era
   slate e virou azul-céu (cliente: "o azul escuro é pesado"). Sobre o azul-céu
   TODO texto do cartão fica --cor-texto (7,77:1): o slate e o texto mudo não
   passam ali (2,84 e 2,85:1). O cartão não sobe nem cresce.
   Teclado: o mesmo estado com foco dentro (o link do cartão). */
.avaliacao, .linha-cartao, .medida { position: relative; isolation: isolate; overflow: hidden; transition: border-color var(--dur-base) var(--curva-saida); }
.avaliacao::before, .linha-cartao::before, .medida::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: 160%; aspect-ratio: 1; border-radius: var(--raio-interativo);
  background: var(--cor-campo-vivo); pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--dur-slow) var(--curva-saida);
}
:is(.avaliacao, .linha-cartao, .medida):is(:hover, :focus-within)::before { transform: translate(-50%, -50%) scale(1); }
:is(.avaliacao, .linha-cartao, .medida):is(:hover, :focus-within) { border-color: var(--cor-campo-vivo); }
/* O conteúdo troca de cor junto (as transições ficam nos próprios elementos). */
:is(.avaliacao__texto, .avaliacao .rotulo, .avaliacao__quem, .linha-cartao__nome, .linha-cartao .rotulo, .linha-cartao__preco, .linha-cartao__preco small, .linha-cartao__texto, .linha-cartao__pe, .medida__valor, .medida__valor small, .medida__nome, .medida__texto, .medida .rotulo, .medida__pe) { transition: color var(--dur-fast) var(--curva-saida), border-color var(--dur-fast) var(--curva-saida); }
:is(.avaliacao, .linha-cartao, .medida):is(:hover, :focus-within) :is(.avaliacao__texto, .linha-cartao__nome, .linha-cartao__preco, .medida__valor, .medida__nome, .link-acao) { color: var(--cor-texto); }
:is(.avaliacao, .linha-cartao, .medida):is(:hover, :focus-within) :is(.rotulo, .linha-cartao__preco small, .linha-cartao__texto, .medida__valor small, .medida__texto) { color: var(--cor-texto); }
:is(.avaliacao, .linha-cartao, .medida):is(:hover, :focus-within) :is(.avaliacao__quem, .linha-cartao__pe, .medida__pe) { border-color: color-mix(in srgb, var(--cor-texto) 22%, transparent); }
:is(.linha-cartao, .medida):is(:hover, :focus-within) .link-acao svg { transform: translateX(3px); }
/* As estrelas saltam uma a uma, como uma onda, e escurecem pro ouro de texto. */
.avaliacao__estrela { display: inline-block; transition: color var(--dur-fast) var(--curva-saida); }
.avaliacao:is(:hover, :focus-within) .avaliacao__estrela { color: var(--cor-ouro-texto); animation: estrela-salta var(--dur-slow) var(--curva-saida) both; animation-delay: calc(var(--dur-fast) * 0.5 + var(--i, 0) * var(--cascata)); }
@keyframes estrela-salta { 0% { transform: translateY(0) scale(1) rotate(0); } 40% { transform: translateY(-6px) scale(1.25) rotate(-12deg); } 100% { transform: translateY(0) scale(1) rotate(0); } }
/* No diâmetro, o disco da medida cresce: é o gesto que diz "o olhar muda de tamanho". */
.medida__disco { transition: transform var(--dur-slow) var(--curva-saida); }
.medida:is(:hover, :focus-within) .medida__disco { transform: scale(1.12); }
.linha-cartao__preco { transition: transform var(--dur-slow) var(--curva-saida), color var(--dur-fast) var(--curva-saida); transform-origin: left bottom; }
.linha-cartao:is(:hover, :focus-within) .linha-cartao__preco { transform: scale(1.06); }

/* ── COMO ESCOLHER: linha e diâmetro em abas ──────────────────────────────
   🔄 13/09/2026, Mateus: "linhas não faz sentido ser uma sessão só, diâmetro
   também não; coloca em abas, mais para baixo". As duas grades de três
   cartões continuam as mesmas; o que mudou é que dividem uma dobra. As abas
   seguem o padrão ARIA de tablist (setas trocam, Tab entra no painel). */
.escolha__abas { display: inline-flex; gap: var(--e-1); padding: var(--e-1); margin-bottom: var(--e-6); border: 1px solid var(--cor-borda); border-radius: var(--raio-interativo); background: var(--cor-superficie); }
.escolha__aba { min-height: 2.75rem; padding-inline: var(--e-5); border-radius: var(--raio-interativo); color: var(--cor-texto-mudo); transition: background-color var(--dur-fast) var(--curva-saida), color var(--dur-fast) var(--curva-saida); }
.escolha__aba:hover { color: var(--cor-marca); }
.escolha__aba[aria-selected="true"] { background: var(--cor-campo-vivo); color: var(--cor-texto); }
.escolha__painel[hidden] { display: none; }
.escolha__painel > * { animation: painel-entra var(--dur-base) var(--curva-saida); }
@keyframes painel-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.escolha .diametro__grade { margin-top: 0; }
/* 🔄 14/09/2026, Mateus: "linha e diâmetro poderiam ter imagem, a sacola do manual".
   Cada aba tem a sua: Linha = a sacola sem fundo (pág. 8); Diâmetro = o olho com a
   lente transparente no dedo (pág. 15), que é foto e fica com o fundo (recortar o rosto
   não dá objeto). A imagem troca junto com a aba porque mora dentro do painel. */
.escolha__conteudo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--e-6); align-items: center; }
.escolha__imagem { display: grid; place-items: center; }
.escolha__imagem img { width: 100%; height: auto; max-height: 24rem; object-fit: contain; filter: var(--sombra-objeto); }
.escolha__imagem--foto { align-self: stretch; position: relative; min-height: 18rem; overflow: hidden; border-radius: var(--raio-conteudo); }
.escolha__imagem--foto img { position: absolute; inset: 0; height: 100%; max-height: none; object-fit: cover; object-position: 50% 30%; filter: none; }
.escolha .linhas__grade, .escolha .diametro__grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Com a imagem ao lado, o cartão fica estreito: o pé empilha pra contagem e link não quebrarem no meio. */
.escolha :is(.medida__pe, .linha-cartao__pe) { flex-direction: column; align-items: flex-start; gap: var(--e-2); }
@media (max-width: 64rem) { .escolha__conteudo { grid-template-columns: minmax(0, 1fr); } .escolha__imagem img { max-height: 16rem; width: auto; } .escolha__imagem--foto { min-height: 0; aspect-ratio: 4 / 3; } .escolha__imagem--foto img { width: 100%; object-position: 50% 50%; } }
@media (max-width: 48rem) { .escolha .linhas__grade, .escolha .diametro__grade { grid-template-columns: minmax(0, 1fr); } }

/* ── LINHAS ───────────────────────────────────────────────────────────────── */
.linhas__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
.linha-cartao { position: relative; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-6) var(--e-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-conteudo); transition: border-color var(--dur-fast) var(--curva-saida); }
.linha-cartao__nome { font-size: var(--t-h3); }
.linha-cartao__preco { font-family: var(--ff-voz); font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); font-weight: var(--peso-medio); line-height: 1; letter-spacing: var(--tr-display); font-variant-numeric: tabular-nums; }
.linha-cartao__preco small { font-family: var(--ff-ui); font-size: var(--t-micro); letter-spacing: var(--tr-alta); text-transform: uppercase; color: var(--cor-texto-sutil); display: block; margin-bottom: var(--e-1); font-weight: var(--peso-medio); }
.linha-cartao__texto { color: var(--cor-texto-mudo); font-size: var(--t-peq); }
.linha-cartao__pe { margin-top: auto; padding-top: var(--e-4); display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); border-top: 1px solid var(--cor-borda); }
.linha-cartao__link::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 48rem) { .linhas__grade { grid-template-columns: 1fr; } }

/* ── COMPROMISSOS ─────────────────────────────────────────────────────────
   🔄 14/09/2026: era campo de slate; virou o azul-gris do manual com a caixa com
   laço do manual (pág. 17) ao lado: "em cada encomenda" mostrado, não só dito.
   🔄 14/09/2026 (2ª): a caixa perdeu o fundo (recorte do Vision, sem serviço
   externo) e aparece INTEIRA: `contain`, nunca `cover`, pra ponta da fita não ser
   cortada (Mateus). A marca d'água de monogramas saiu daqui e foi pra newsletter.
   Texto slate e escuro sobre o azul-gris (4,52 e 12,37:1). */
.compromissos { position: relative; isolation: isolate; overflow: hidden; background: var(--cor-campo); color: var(--cor-texto); }
.compromissos .dobra__titulo { color: var(--cor-marca); }
.compromissos .rotulo { color: var(--cor-texto-mudo); }
.compromissos__miolo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); align-items: center; }
.compromissos__foto { display: grid; place-items: center; padding: var(--e-4); }
.compromissos__foto img { width: 100%; height: auto; max-height: 34rem; object-fit: contain; filter: var(--sombra-objeto); }
.compromissos__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6); margin-top: var(--e-6); }
.compromisso { display: flex; flex-direction: column; gap: var(--e-3); padding-top: var(--e-4); border-top: 1px solid color-mix(in srgb, var(--cor-marca) 35%, transparent); }
.compromisso svg { width: 1.5rem; height: 1.5rem; color: var(--cor-ouro-texto); }
.compromisso h3 { font-size: var(--t-h3); color: var(--cor-marca); }
.compromisso p { font-size: var(--t-peq); color: var(--cor-texto-mudo); }
@media (max-width: 60rem) { .compromissos__miolo { grid-template-columns: minmax(0, 1fr); gap: var(--e-6); } .compromissos__foto img { max-height: 22rem; width: auto; } }
@media (max-width: 40rem) { .compromissos__grade { grid-template-columns: 1fr; gap: var(--e-5); } }

/* ── DIÂMETRO ─────────────────────────────────────────────────────────────── */
.diametro__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); margin-top: var(--e-7); }
.medida { position: relative; display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-6) var(--e-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-conteudo); transition: border-color var(--dur-fast) var(--curva-saida); }
.medida__disco { width: var(--tam, 4.5rem); height: var(--tam, 4.5rem); border-radius: var(--raio-interativo); border: 1px solid var(--cor-ouro); background: radial-gradient(circle at 50% 50%, var(--cor-foto) 0 34%, var(--cor-ceu) 36% 100%); margin-bottom: var(--e-2); position: relative; }
.medida__disco::after { content: ""; position: absolute; inset: 30%; border-radius: inherit; background: var(--cor-texto); opacity: 0.85; }
.medida__valor { font-family: var(--ff-voz); font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); font-weight: var(--peso-medio); line-height: 1; letter-spacing: var(--tr-display); font-variant-numeric: tabular-nums; }
.medida__valor small { font-family: var(--ff-ui); font-size: var(--t-peq); font-weight: var(--peso-medio); color: var(--cor-texto-mudo); margin-left: 0.25em; letter-spacing: 0; }
.medida__nome { font-size: var(--t-h3); }
.medida__texto { font-size: var(--t-peq); color: var(--cor-texto-mudo); }
.medida__pe { margin-top: auto; padding-top: var(--e-4); display: flex; justify-content: space-between; align-items: center; gap: var(--e-3); border-top: 1px solid var(--cor-borda); }
.medida__link::after { content: ""; position: absolute; inset: 0; }
.diametro__nota { margin-top: var(--e-5); font-size: var(--t-peq); color: var(--cor-texto-mudo); }
@media (max-width: 48rem) { .diametro__grade { grid-template-columns: 1fr; } }

/* ── HISTÓRIA + QUEM JÁ USA ───────────────────────────────────────────────
   🔄 13/09/2026, Mateus: "a nossa história poderia se juntar com a sessão de
   depoimentos". Uma dobra: à esquerda o cartão da história (foto + texto), à
   direita os depoimentos em grade 2×2. Sem esteira: parada, a grade lê
   inteira de uma vez e ocupa metade da altura. */
.historia { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); align-items: start; }
.sobre { display: flex; flex-direction: column; overflow: hidden; background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-conteudo); }
.sobre__foto { position: relative; aspect-ratio: 16 / 9; background: var(--cor-foto); }
.sobre__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sobre__foto .selo { position: absolute; right: var(--e-4); bottom: var(--e-4); width: 4.5rem; color: var(--cor-invertido); opacity: 0.9; }
.sobre__texto { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-4); padding: var(--e-6); }
.sobre__titulo { font-size: var(--t-h2); max-width: 14ch; }
.sobre__texto .lead { font-size: var(--t-corpo); font-family: var(--ff-ui); line-height: var(--lh-corpo); }
.avaliacoes__grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); }
.avaliacao { display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda); border-radius: var(--raio-conteudo); }
.avaliacao__estrelas { color: var(--cor-ouro-texto); letter-spacing: 0.1em; font-size: var(--t-peq); }
.avaliacao__texto { font-family: var(--ff-leitura); font-size: 1.1875rem; line-height: 1.4; }
.avaliacao__quem { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e-2) var(--e-3); margin-top: auto; padding-top: var(--e-3); border-top: 1px solid var(--cor-borda); }
.avaliacoes__nota { margin-top: var(--e-4); }
@media (max-width: 64rem) { .historia { grid-template-columns: minmax(0, 1fr); gap: var(--e-7); } .sobre { flex-direction: row; } .sobre__foto { aspect-ratio: auto; flex: 0 0 40%; } }
@media (max-width: 40rem) { .sobre { flex-direction: column; } .sobre__foto { aspect-ratio: 16 / 11; } .avaliacoes__grade { grid-template-columns: minmax(0, 1fr); } }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq-grade { display: grid; grid-template-columns: 1fr 1.6fr; gap: var(--e-8); align-items: start; }
.faq-grade__lado { position: sticky; top: calc(var(--h-header-compacto) + var(--e-5)); }
.faq__item { border-top: 1px solid var(--cor-borda); }
.faq__item:last-child { border-bottom: 1px solid var(--cor-borda); }
.faq__botao { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); width: 100%; padding-block: var(--e-5); text-align: left; font-family: var(--ff-voz); font-size: var(--t-h3); font-weight: var(--peso-medio); line-height: 1.2; transition: color var(--dur-fast) var(--curva-saida); }
.faq__botao:hover { color: var(--cor-marca); }
.faq__sinal { flex: 0 0 auto; position: relative; width: 1rem; height: 1rem; }
.faq__sinal::before, .faq__sinal::after { content: ""; position: absolute; inset: 50% 0 auto 0; height: 1px; background: currentColor; transition: transform var(--dur-base) var(--curva-saida); }
.faq__sinal::after { transform: rotate(90deg); }
.faq__item[data-aberto="true"] .faq__sinal::after { transform: rotate(0deg); }
.faq__resposta { overflow: hidden; height: 0; transition: height var(--dur-base) var(--curva-saida); }
.faq__resposta > div { padding-bottom: var(--e-5); color: var(--cor-texto-mudo); max-width: 60ch; }
@media (max-width: 60rem) { .faq-grade { grid-template-columns: 1fr; gap: var(--e-6); } .faq-grade__lado { position: static; } }

/* ── NEWSLETTER ───────────────────────────────────────────────────────────
   🔄 14/09/2026, Mateus: (1) a marca d'água de monogramas VC (manual, pág. 19) mora
   aqui, não nos compromissos; (2) o cartão azul do manual (pág. 11) sem fundo, e o
   corte que ele tem em cima fica ENCOSTADO na borda de cima da seção: parece que
   a seção corta o cartão, não que a imagem veio cortada. Por isso a foto sobe a
   mesma altura do respiro da dobra (--dobra) e a seção faz overflow: hidden.
   Fundo azul-gris; título 12,37:1, apoio (texto mudo) 4,53:1. */
.newsletter { position: relative; isolation: isolate; overflow: hidden; background: var(--cor-campo); }
.newsletter::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none; background-image: url("vcl-monograma.svg"); background-size: 5.5rem auto; background-repeat: space; opacity: 0.16; transform: rotate(-28deg); }
/* Apoio no tom de texto cheio: por cima da marca d'água o mudo caía pra 3,91:1 (medido por pixel). */
.newsletter .lead { color: var(--cor-texto); }
.newsletter__miolo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-7); align-items: center; }
.campo { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.campo input[type="email"] { flex: 1 1 14rem; min-height: 3rem; padding: var(--e-3) var(--e-5); background: var(--cor-superficie); border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-interativo); color: var(--cor-texto); transition: border-color var(--dur-fast) var(--curva-saida); }
.campo input[type="email"]::placeholder { color: var(--cor-texto-sutil); }
.campo input[type="email"]:focus { border-color: var(--cor-marca); outline: none; }
.newsletter__miolo--foto { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--e-8); }
.newsletter__texto { display: flex; flex-direction: column; gap: var(--e-6); }
.newsletter__miolo:not(.newsletter__miolo--foto) .newsletter__texto { display: contents; }
.newsletter__foto { align-self: start; margin-top: calc(-1 * var(--dobra)); }
.newsletter__foto img { display: block; width: 100%; height: auto; filter: var(--sombra-objeto); }
@media (max-width: 48rem) { .newsletter__miolo { grid-template-columns: 1fr; gap: var(--e-5); } .newsletter__foto { width: 80%; } }

/* ── RODAPÉ ───────────────────────────────────────────────────────────────
   Convite em cima (faixa, separada por filete), colunas, idioma e pagamentos, e o
   wordmark fechando a página (FG / Buenas Open).
   🔄 14/09/2026: era campo de slate; virou o azul-gris do manual com texto slate,
   como o cliente pediu ("o azul escuro fica bem em texto"). Pares: slate 4,52:1,
   texto mudo 4,53:1, texto 12,37:1, todos sobre --cor-campo. */
.rodape { position: relative; isolation: isolate; overflow: hidden; background: var(--cor-campo); color: var(--cor-texto); margin-top: auto; }
.rodape__fundo { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.rodape__fundo img { width: 100%; height: 100%; object-fit: cover; }
.rodape__veu { position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--cor-campo) 93%, transparent); }
.convite { display: flex; flex-direction: column; align-items: center; gap: var(--e-6); text-align: center; padding-block: var(--e-9); border-bottom: 1px solid color-mix(in srgb, var(--cor-marca) 35%, transparent); }
.convite__titulo { font-size: var(--t-h2); color: var(--cor-marca); max-width: 18ch; }
.convite__sub { max-width: 44ch; color: var(--cor-texto-mudo); }
.convite__acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-4); }
.rodape__grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e-7); padding-block: var(--e-8); }
.rodape__titulo { color: var(--cor-texto-mudo); margin-bottom: var(--e-4); }
.rodape__lista { display: flex; flex-direction: column; gap: var(--e-2); }
.rodape__lista a, .rodape__lista span { font-size: var(--t-peq); color: var(--cor-texto-mudo); transition: color var(--dur-fast) var(--curva-saida); }
.rodape__lista a:hover { color: var(--cor-texto); }
.rodape__meio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-4); padding-block: var(--e-5); border-top: 1px solid color-mix(in srgb, var(--cor-marca) 35%, transparent); }
.rodape__idioma { display: flex; gap: var(--e-2); }
.rodape__idioma select { min-height: 2.5rem; padding: 0 var(--e-4); background: transparent; border: 1px solid color-mix(in srgb, var(--cor-marca) 35%, transparent); border-radius: var(--raio-interativo); color: var(--cor-texto); font-size: var(--t-peq); }
.pagamentos { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.pagamentos span { display: inline-flex; align-items: center; height: 1.5rem; padding-inline: var(--e-2); border: 1px solid color-mix(in srgb, var(--cor-marca) 35%, transparent); border-radius: var(--raio-conteudo); font-size: var(--t-micro); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-texto-mudo); }
/* O wordmark gigante. Assinatura, não decoração. `clamp` + overflow clip na
   página inteira: tipografia gigante é onde o celular quebra. */
/* 🔄 13/09/2026, Mateus: "diminua, está muito, muito grande". Era min(92%, 74rem):
   no desktop o wordmark media ~1.290 px e virava a dobra mais alta do rodapé. */
.assinatura { padding-block: var(--e-7) var(--e-5); display: flex; justify-content: center; }
.assinatura svg { width: min(64%, 34rem); height: auto; color: var(--cor-marca); }
.rodape__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e-3); padding-block: var(--e-4) var(--e-6); font-size: var(--t-micro); color: var(--cor-texto-mudo); line-height: 1.7; }
@media (max-width: 60rem) { .rodape__grade { grid-template-columns: repeat(2, 1fr); gap: var(--e-6); } }
@media (max-width: 40rem) { .rodape__grade { grid-template-columns: 1fr; } }

/* ── WHATSAPP FLUTUANTE (suporte) ─────────────────────────────────────────── */
.whats { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: var(--z-flutuante); width: 3.25rem; height: 3.25rem; display: grid; place-items: center; background: var(--cor-whatsapp); color: var(--cor-branco-puro); border-radius: var(--raio-interativo); box-shadow: var(--sombra-flutua); transition: background-color var(--dur-fast) var(--curva-saida), transform var(--dur-fast) var(--curva-saida); }
.whats:hover { background: var(--cor-whatsapp-alto); transform: scale(1.06); }
.hero-a-vista .whats { opacity: 0; transform: translateY(8px); pointer-events: none; }
.whats { transition: background-color var(--dur-fast) var(--curva-saida), transform var(--dur-base) var(--curva-suave), opacity var(--dur-base) var(--curva-suave); }
.whats svg { width: 1.625rem; height: 1.625rem; }

/* ── COLEÇÃO ──────────────────────────────────────────────────────────────── */
.colecao__cabeca { padding-block: var(--e-8) var(--e-6); display: flex; flex-direction: column; gap: var(--e-3); }
.colecao__titulo { font-size: var(--t-h1); }
.colecao__descricao { max-width: 56ch; color: var(--cor-texto-mudo); }
.navegacao { display: flex; flex-direction: column; gap: var(--e-3); padding-block: var(--e-4); border-block: 1px solid var(--cor-borda); margin-bottom: var(--e-6); }
.navegacao__eixo { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.navegacao__eixo > .rotulo { flex: 0 0 5rem; }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* Ordenação da coleção: rótulo + select nativo (o Dawn trata a submissão). */
.ordenar { display: flex; align-items: center; gap: var(--e-2); }
.ordenar select { border: 0; background: transparent; color: var(--cor-texto); font-family: var(--ff-ui); font-size: var(--t-peq); padding: var(--e-1) var(--e-2); border-radius: var(--raio-interativo); cursor: pointer; }
.ordenar select:hover { background: var(--cor-superficie); }
.chip { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.25rem; padding-inline: var(--e-4); border: 1px solid var(--cor-borda-campo); border-radius: var(--raio-interativo); font-size: var(--t-peq); color: var(--cor-texto); transition: border-color var(--dur-fast) var(--curva-saida), background-color var(--dur-fast) var(--curva-saida), color var(--dur-fast) var(--curva-saida); }
.chip:hover { border-color: var(--cor-marca); color: var(--cor-marca); }
.chip[aria-current="true"] { background: var(--cor-campo-vivo); border-color: var(--cor-campo-vivo); color: var(--cor-texto); }
.chip[aria-current="true"] .sutil { color: var(--cor-texto); }
/* Opção sem resultado: visível e desabilitada (regra de FG). */
.chip[aria-disabled="true"] { opacity: 0.4; pointer-events: none; text-decoration: line-through; }
/* Miniatura da lente ao lado do nome da família. É a LENTE, não o olho: o olho
   recortado a 18px vira mancha de pele e não diz a cor. Caixa com overflow
   porque a variante --disco escala a foto lá dentro. */
.chip__iris { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; border-radius: var(--raio-interativo); object-fit: cover; box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor-ouro) 55%, transparent); }
.chip__iris > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.painel__nome .chip__iris { width: 1.75rem; height: 1.75rem; }
.colecao__barra { display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); margin-bottom: var(--e-5); }
.colecao__mais { margin-top: var(--e-8); display: flex; justify-content: center; }
.vazio { display: flex; flex-direction: column; align-items: center; gap: var(--e-4); text-align: center; padding-block: var(--e-9); }
.vazio svg { width: 6rem; height: 6rem; color: var(--cor-marca); opacity: 0.6; }
.vazio h2 { font-size: var(--t-h2); }
/* 404: a marca no lugar do ícone (14/09/2026). Monograma em ouro, inteiro, e clicável pro início. */
.vazio--404 .vazio__marca { display: block; line-height: 0; margin-bottom: var(--e-4); }
.vazio--404 .vazio__marca svg { width: 8.5rem; height: auto; opacity: 1; }

/* ── PRODUTO ──────────────────────────────────────────────────────────────
   Galeria à esquerda rola; coluna de compra à direita FICA (Palmes via FG).
   No celular: galeria em trilho horizontal com snap, CTA fixo no pé. */
.trilha { display: flex; flex-wrap: wrap; gap: var(--e-2); padding-block: var(--e-5); font-size: var(--t-mini); color: var(--cor-texto-sutil); }
.trilha a:hover { color: var(--cor-marca); }
.produto { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--e-8); align-items: start; padding-bottom: var(--dobra); }
.galeria { display: flex; flex-direction: column; gap: var(--e-3); }
.galeria__foto { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--raio-conteudo); background: var(--cor-foto); }
.galeria__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compra { position: sticky; top: calc(var(--h-header-compacto) + var(--e-5)); display: flex; flex-direction: column; gap: var(--e-5); }
.compra__nome { font-size: var(--t-h1); line-height: 1.02; }
.compra__preco { font-size: var(--t-h3); font-family: var(--ff-ui); font-weight: var(--peso-medio); font-variant-numeric: tabular-nums; }
.compra__preco small { font-size: var(--t-mini); font-weight: var(--peso-corpo); color: var(--cor-texto-sutil); margin-left: var(--e-2); }
.compra__descricao { color: var(--cor-texto-mudo); max-width: 48ch; }
.ficha-curta { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.ficha-curta span { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2rem; padding-inline: var(--e-3); border: 1px solid var(--cor-borda); border-radius: var(--raio-interativo); font-size: var(--t-mini); font-variant-numeric: tabular-nums; }
.ficha-curta b { font-weight: var(--peso-medio); }
.irmas { display: flex; flex-direction: column; gap: var(--e-3); }
.irmas__lista { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* Cores irmãs: SEMPRE a lente (🔄 13/09/2026). Antes misturava olho e disco
   conforme o produto tinha uma foto ou várias, e a fileira ficava sem padrão.
   O anel é box-shadow e não border: o `::after` do recorte já é a pupila. */
.iris { display: block; width: 2.75rem; height: 2.75rem; border-radius: var(--raio-interativo); }
.iris .recorte { width: 100%; height: 100%; box-shadow: 0 0 0 1px color-mix(in srgb, var(--cor-ouro) 45%, transparent); transition: box-shadow var(--dur-fast) var(--curva-saida); }
.iris:hover .recorte { box-shadow: 0 0 0 1px var(--cor-marca); }
.iris[aria-current="true"] .recorte { box-shadow: 0 0 0 2px var(--cor-superficie), 0 0 0 4px var(--cor-marca); }
.compra__notas { display: flex; flex-direction: column; gap: var(--e-2); font-size: var(--t-peq); color: var(--cor-texto-mudo); }
.compra__notas li { display: flex; gap: var(--e-2); align-items: start; }
.compra__notas svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 0.2em; color: var(--cor-marca); }
.ficha { border: 1px solid var(--cor-borda); border-radius: var(--raio-conteudo); overflow: hidden; }
.ficha__linha { display: flex; justify-content: space-between; gap: var(--e-4); padding: var(--e-3) var(--e-4); border-top: 1px solid var(--cor-borda); }
.ficha__linha:first-child { border-top: 0; }
.ficha dt { font-size: var(--t-micro); letter-spacing: var(--tr-alta); text-transform: uppercase; color: var(--cor-texto-sutil); font-weight: var(--peso-medio); }
.ficha dd { font-size: var(--t-peq); font-variant-numeric: tabular-nums; text-align: right; }
.aviso { padding: var(--e-4) var(--e-5); border-left: 2px solid var(--cor-ouro); background: var(--cor-superficie); font-size: var(--t-peq); color: var(--cor-texto-mudo); }
.aviso .rotulo { display: block; margin-bottom: var(--e-2); }
.produto__abaixo { display: grid; gap: var(--e-8); padding-block: var(--dobra); border-top: 1px solid var(--cor-borda); }
.produto__bloco h2 { font-size: var(--t-h3); margin-bottom: var(--e-4); }
.produto__bloco .medida { max-width: none; }
.cta-fixo { display: none; }
@media (max-width: 60rem) {
  .produto { grid-template-columns: 1fr; gap: var(--e-6); }
  .galeria { flex-direction: row; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: var(--e-2); margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .galeria::-webkit-scrollbar { display: none; }
  .galeria__foto { flex: 0 0 86%; scroll-snap-align: center; }
  .compra { position: static; }
  .cta-fixo { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-flutuante); gap: var(--e-3); align-items: center; padding: var(--e-3) var(--gutter); background: color-mix(in srgb, var(--cor-fundo) 94%, transparent); backdrop-filter: blur(14px); box-shadow: 0 -1px 0 var(--cor-borda); }
  .cta-fixo .botao { flex: 1; }
  .cta-fixo .compra__preco { white-space: nowrap; font-size: var(--t-corpo); }
  .whats { bottom: calc(var(--gutter) + 4.25rem); }
}

/* ── SKELETON ─────────────────────────────────────────────────────────────── */
.skeleton { position: relative; overflow: hidden; background: var(--cor-superficie-baixa); border-radius: var(--raio-conteudo); }
.skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cor-superficie) 80%, transparent), transparent); transform: translateX(-100%); animation: shimmer var(--dur-shimmer) var(--curva-ida-volta) infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }

/* ── ENTRADA DE SEÇÃO ─────────────────────────────────────────────────────
   Nada aparece do nada. `.no-js` mostra tudo: loja indexável não pode
   depender de JS pra aparecer. */
.ao-entrar { opacity: 0; transform: translateY(24px); }
.ao-entrar[data-visivel="true"] { opacity: 1; transform: translateY(0); transition: opacity var(--dur-slow) var(--curva-suave), transform var(--dur-slow) var(--curva-suave); transition-delay: calc(var(--i, 0) * var(--cascata)); }
.no-js .ao-entrar, .no-js .painel__item, .no-js .menu-mobile__item { opacity: 1; transform: none; }

/* ── RESPONSIVO GLOBAL ────────────────────────────────────────────────────── */
@media (max-width: 64rem) { .nav { display: none; } .painel-mascara { display: none; } }
@media (min-width: 64.01rem) { .botao-icone--menu { display: none; } }
@media (max-width: 40rem) { .botao-icone--conta { display: none; } .dobra__cabeca { align-items: start; flex-direction: column; } }