/* JEB Decor — folha de estilo do site. Sistema travado em design.md; tokens em ../tokens.css.
   Uma família (Urbanist), hierarquia por peso: display 600–700 · voz 300 itálico · funcional 400. */

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-func);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.sobre-foto :focus-visible { outline-color: var(--color-over-ink); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: clip; clip-path: inset(50%); white-space: nowrap;
}

/* ---------- display: sempre Urbanist, sempre caixa alta, roman ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-style: normal;
  text-transform: uppercase;
  margin: 0;
  overflow-wrap: anywhere;
  min-width: 0;
}
h1 { font-weight: 700; font-size: var(--text-d1); letter-spacing: var(--tr-xl); line-height: 1.26; }
h2 { font-weight: 600; font-size: var(--text-d2); letter-spacing: var(--tr-lg); line-height: 1.3; }
h3 { font-weight: 600; font-size: var(--text-d3); letter-spacing: var(--tr-md); line-height: 1.4; }

/* ---------- os dois registros do corpo ---------- */

.voz {
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-voz);
  line-height: 1.85;
  color: var(--color-ink-2);
}
.func {
  font-weight: 400;
  font-style: normal;
  font-size: var(--text-func);
  line-height: 1.75;
  color: var(--color-ink-2);
}
.selo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-selo);
  letter-spacing: var(--tr-sm);
  text-transform: uppercase;
  color: var(--color-accent);
}
.medida { max-width: min(54ch, 100%); }

/* ---------- nav (N9 edge-aligned, sobre a foto) ---------- */

.nav {
  position: relative;
  z-index: var(--z-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--page-gutter);
}
.nav__marca { display: inline-flex; align-items: center; }
.nav__marca img { width: 104px; height: 53px; object-fit: contain; }
.nav__links { display: flex; align-items: center; gap: var(--space-md); }
.nav__links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: var(--tr-md);
  text-transform: uppercase;
  color: var(--color-over-ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid transparent;
  padding-bottom: 3px;
  transition: border-color var(--dur-short) var(--ease-out);
}
.nav__links a:hover,
.nav__links a[aria-current="page"] { border-bottom-color: var(--color-over-ink); }

/* nav sobre papel claro (páginas sem hero fotográfico) */
.nav--papel { background: var(--color-paper); }
.nav--papel .nav__links a { color: var(--color-ink); }
.nav--papel .nav__links a:hover,
.nav--papel .nav__links a[aria-current="page"] { border-bottom-color: var(--color-ink); }

/* ícones sociais (Instagram/WhatsApp) ao lado do Contato — pedido do cliente, ref. sanmattoni */
.nav__social { display: flex; align-items: center; gap: var(--space-xs); }
.nav__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-over-ink-2);
  transition: color var(--dur-short) var(--ease-out);
}
.nav__icone svg { width: 18px; height: 18px; display: block; }
.nav__icone:hover { color: var(--color-over-ink); }
.nav--papel .nav__icone { color: var(--color-ink-2); }
.nav--papel .nav__icone:hover { color: var(--color-ink); }

/* botão do menu lateral — só existe no breakpoint mobile */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-over-ink);
  line-height: 1;
  cursor: pointer;
}
/* ícone em SVG de traço fino (1.5px), no mesmo peso visual da tipografia — não o ☰ unicode */
.nav__burger svg { width: 22px; height: 22px; display: block; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; fill: none; }
.nav--papel .nav__burger { color: var(--color-ink); }
.nav__overlay { display: none; }

/* ---------- ação tipográfica (sem botão de caixa) ---------- */

.acao {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: var(--tr-md);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-bottom: 6px;
  min-height: 44px;
  line-height: 2.1;
  white-space: nowrap;
  transition: border-color var(--dur-short) var(--ease-out);
}
.acao:hover { border-bottom-color: var(--color-ink); }
.acao--clara { color: var(--color-over-ink); border-bottom-color: var(--color-over-muted); }
.acao--clara:hover { border-bottom-color: var(--color-over-ink); }

/* ---------- hero fotográfico ---------- */

.hero { position: relative; min-height: 74dvh; display: grid; }
/* Um acima do --z-base: o .hero__texto também é --z-base e vem depois no DOM, então
   o empate era decidido a favor dele — o padding do topo dele cobria a faixa do
   header e engolia o clique nos links do menu (só na home, só no desktop; no mobile
   o menu aberto já sobe o header para --z-sticky + 3). Coberto por
   test/e2e/nav-clicavel.mjs. */
.hero__nav { position: absolute; inset: 0 0 auto 0; z-index: calc(var(--z-base) + 1); }
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    var(--color-scrim-topo) 0%, var(--color-scrim-topo) 7%,
    var(--color-scrim-meio) 26%, var(--color-scrim-meio) 54%,
    var(--color-scrim-base) 86%, var(--color-scrim-base) 100%);
}
.hero__texto {
  position: relative;
  z-index: var(--z-base);
  align-self: end;
  justify-self: center;
  text-align: center;
  display: grid;
  gap: var(--space-md);
  justify-items: center;
  padding: var(--space-3xl) var(--page-gutter) var(--space-xl);
  max-width: 48rem;
}
.hero h1 { color: var(--color-over-ink); }
.acoes { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.hero .voz { color: var(--color-over-ink-2); max-width: 46ch; }
/* legenda de ambientação saiu em 18/08 a pedido do Robson (.legenda / .legenda--hero removidas) */

/* ---------- bandas ---------- */

.banda {
  padding: var(--space-3xl) var(--page-gutter);
  display: grid;
  /* minmax(0,1fr): sem isso a coluna implícita se dimensiona pelo conteúdo e estoura no mobile */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  justify-items: center;
  text-align: center;
}
/* em grid com justify-items:center o filho é dimensionado pelo conteúdo — prender à largura da banda */
.banda > * { max-width: 100%; }
.banda--alta { padding-block: var(--space-4xl); }
.banda--media { padding-block: var(--space-2xl); }
/* banda que continua a anterior (ex.: grade logo após o título da página): não dobra o respiro */
.banda--sem-topo { padding-top: 0; }
.banda--tom { background: var(--color-paper-2); }
.banda--escura { background: var(--color-ink); color: var(--color-over-ink); }
.banda--escura h2 { color: var(--color-over-ink); }
.banda--escura .voz, .banda--escura .func { color: var(--color-over-ink-2); }
.banda--escura .selo { color: var(--color-over-muted); }
/* banda escura com foto ao fundo — o véu garante o contraste do texto */
.banda--foto { position: relative; overflow: clip; }
.banda__media { position: absolute; inset: 0; }
.banda__media img { width: 100%; height: 100%; object-fit: cover; }
.banda__media::after { content: ""; position: absolute; inset: 0; background: var(--color-scrim-base); }
.banda--foto > *:not(.banda__media) { position: relative; z-index: var(--z-base); }

.fio { width: 44px; height: 1px; background: var(--color-rule); border: 0; margin: 0; }
.banda--escura .fio { background: var(--color-rule-escura); }

/* ---------- faixa de fotos ---------- */

.tiras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 2px; }
.tira { overflow: clip; }
.tira img {
  width: 100%; height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform var(--dur-longa) var(--ease-out);
}

/* ---------- listas (linhas do mix, processo) ---------- */

.lista { list-style: none; margin: 0; padding: 0; max-width: 46rem; width: 100%; text-align: left; }
.lista li {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-md);
  border-top: var(--rule-hair) solid var(--color-rule);
}
.lista li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }

.passos { counter-reset: p; }
.passos li { grid-template-columns: 3.5ch minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); counter-increment: p; }
.passos li::before {
  content: "0" counter(p);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  padding-top: 0.45em;
}
.passos h3 { grid-column: 2; grid-row: 1; }
.passos p { grid-column: 2; }

/* ---------- grade de categorias (home) ---------- */

.categorias {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-xl) var(--space-lg);
  max-width: 68rem;
  width: 100%;
  text-align: left;
}
.categoria { display: grid; gap: var(--space-2xs); align-content: start; justify-items: start; }
.categoria__foto { overflow: clip; width: 100%; }
.categoria__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--dur-longa) var(--ease-out); }
.categoria h3 { margin-top: var(--space-xs); font-family: var(--font-display); }
.categoria .func { max-width: 32ch; }

@media (hover: hover) and (pointer: fine) {
  .categoria__foto:hover img { transform: scale(1.02); }
}

/* ---------- grade de peças (showroom) ---------- */

.pecas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--space-xl) var(--space-md);
  max-width: 68rem;
  width: 100%;
  text-align: left;
}
.pecas--vazio { display: block; max-width: 46ch; text-align: center; }
.peca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.peca .acao { margin-top: auto; padding-top: var(--space-2xs); }
.peca__foto { overflow: clip; width: 100%; }
.peca__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform var(--dur-longa) var(--ease-out); }
.peca h3 { margin-top: var(--space-xs); }
.peca__badge {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: var(--tr-sm);
  text-transform: uppercase;
  color: var(--color-accent);
}
.peca__preco { font-variant-numeric: tabular-nums; color: var(--color-ink); }
.peca__preco-de { color: var(--color-muted); font-weight: 400; }
.peca__preco-final { color: var(--color-accent); font-weight: 700; }
/* nota editorial abaixo da grade (no lugar do asterisco): condição real das peças e natureza das fotos */
.nota { color: var(--color-muted); font-size: 12px; line-height: 1.7; max-width: 58ch; }

@media (hover: hover) and (pointer: fine) {
  .peca__foto:hover img { transform: scale(1.02); }
}

/* ---------- prova social ---------- */

.provas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-lg);
  max-width: 68rem; width: 100%;
  text-align: left;
}
.provas figure { margin: 0; display: grid; gap: var(--space-sm); }
.provas blockquote {
  margin: 0;
  font-weight: 300; font-style: italic;
  font-size: 14.5px; line-height: 1.8;
  color: var(--color-ink);
}
.provas figcaption { font-family: var(--font-display); font-weight: 600; font-size: 11.5px; letter-spacing: var(--tr-sm); text-transform: uppercase; color: var(--color-muted); }
.provas--unica { grid-template-columns: minmax(0, 1fr); max-width: 48rem; text-align: center; }

.nota-google { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--space-sm); }
.nota-google b {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.4rem;
  letter-spacing: var(--tr-lg);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- lojas: dois painéis com a fachada real ao fundo (pedido do João, 19/08) ----------
   Grid de 2 colunas × 2 linhas: as fotos ocupam as duas linhas da sua coluna; o h2 atravessa as
   duas colunas na linha 1 e cada .unidade fica na linha 2 — texto sempre sobre o véu da foto. */

.lojas {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  color: var(--color-over-ink);
  text-align: center;
  overflow: clip;
  background: var(--color-ink); /* aparece só enquanto a foto carrega */
}
.lojas__fundo { position: relative; grid-row: 1 / 3; min-height: 100%; }
.lojas__fundo--merces { grid-column: 1; }
.lojas__fundo--uberaba { grid-column: 2; }
.lojas__fundo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 62%; }
/* véu: mais leve em cima (o h2 é grande e pesado), mais denso embaixo, onde mora o texto funcional */
.lojas__fundo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--color-scrim-lojas-topo) 0%, var(--color-scrim-lojas-base) 58%, var(--color-scrim-lojas-base) 100%);
}
.lojas h2 {
  grid-row: 1; grid-column: 1 / -1; z-index: 1;
  justify-self: center; max-width: 100%;
  color: var(--color-over-ink);
  padding: var(--space-3xl) var(--page-gutter) var(--space-xl);
}
.lojas .unidade { grid-row: 2; z-index: 1; padding: 0 var(--page-gutter) var(--space-3xl); }
.lojas .unidade--merces { grid-column: 1; }
.lojas .unidade--uberaba { grid-column: 2; }
.lojas h3 { color: var(--color-over-ink); }
.lojas .func { color: var(--color-over-ink-2); }
.lojas .unidade a[href^="tel:"] { color: var(--color-over-ink); border-bottom-color: var(--color-over-muted); }
.lojas .unidade a[href^="tel:"]:hover { border-bottom-color: var(--color-over-ink); }

/* ---------- unidades ---------- */

/* base: empilhado (o antigo auto-fit já caía em 1 coluna aqui embaixo — agora é explícito,
   e evita o estado intermediário de 2 colunas com a 3ª sobrando numa linha à parte). */
.unidades { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); max-width: 62rem; width: 100%; }
/* align-items:start impede que os filhos do card (título, telefone, ação...) estiquem até a
   altura cheia da faixa subgrid quando ela é mais alta por causa de outro card — sem isso o
   filete de sublinhado da ação fica solto, longe do texto. */
.unidade { display: grid; gap: var(--space-2xs); justify-items: center; align-items: start; }
.unidade address { font-style: normal; }
.unidade a[href^="tel:"] { color: var(--color-ink); text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule); }
.unidade a[href^="tel:"]:hover { border-bottom-color: var(--color-ink); }

/* alinhamento por subgrid: título com título, telefone com telefone, horário com horário,
   ações com ações — independente de quantos conteúdo cada card tem (o WhatsApp não tem
   endereço nem "como chegar"; a linha 2/5 fica vazia nele e a faixa segue alinhada mesmo assim).
   Só entra em vigor com 3 colunas fixas lado a lado — abaixo disso os cards ficam empilhados
   e não existe "faixa" para alinhar entre eles. */
@media (min-width: 60rem) {
  .unidades {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    align-items: start;
  }
  .unidades > .unidade {
    grid-row: 1 / span 5;
    grid-template-rows: subgrid;
  }
  .unidades > .unidade > h3          { grid-row: 1; }
  .unidades > .unidade > address     { grid-row: 2; }
  .unidades > .unidade > .canal__numero { grid-row: 3; }
  .unidades > .unidade > p.func      { grid-row: 4; }
  .unidades > .unidade > .acao,
  .unidades > .unidade > .acoes      { grid-row: 5; }
}

/* ---------- FAQ ---------- */

.faq { max-width: 46rem; width: 100%; text-align: left; }
.faq details { border-top: var(--rule-hair) solid var(--color-rule); }
.faq details:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-d3);
  letter-spacing: var(--tr-md);
  text-transform: uppercase;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.2rem; line-height: 1; color: var(--color-accent); transition: transform var(--dur-short) var(--ease-out); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: var(--space-md); max-width: 60ch; }
/* abre/fecha com transição de altura, sem JS: ::details-content + interpolate-size (Chrome 131+, Safari 26+).
   Onde não há suporte, o <details> abre em salto como antes — melhoria progressiva. */
@supports (interpolate-size: allow-keywords) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size var(--dur-short) var(--ease-out), content-visibility var(--dur-short) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- rodapé (Ft1) ---------- */

.foot {
  border-top: var(--rule-hair) solid var(--color-rule);
  padding: var(--space-2xl) var(--page-gutter) var(--space-xl);
  display: grid;
  gap: var(--space-sm);
  justify-items: center;
  text-align: center;
}
.foot__marca img { width: 96px; height: 48px; object-fit: contain; }
.foot__linhas { display: grid; gap: var(--space-xs); font-size: 11.5px; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.foot__loja { display: grid; gap: 2px; }
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-md); }
.foot__links a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: var(--tr-md);
  text-transform: uppercase;
  color: var(--color-ink-2);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: var(--rule-hair) solid transparent;
  padding-bottom: 2px;
}
.foot__links a:hover { border-bottom-color: var(--color-ink-2); }
.foot__legal { font-size: 11px; color: var(--color-muted); }

/* ---------- WhatsApp flutuante (fora da gramática tipográfica, de propósito) ---------- */

.wa {
  position: fixed;
  right: max(var(--space-sm), env(safe-area-inset-right));
  bottom: max(var(--space-sm), env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 52px;
  padding: 0.75rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-over-ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: var(--tr-md);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: var(--shadow-pill);
  transition: background-color var(--dur-short) var(--ease-out);
}
/* O hover virava --color-accent (navy). Duas objeções do cliente em 21/08: o
   botão trocava de identidade ao encostar o mouse, e o navy não conversa com o
   verde que as pessoas associam ao WhatsApp — mas trazer o verde do WhatsApp
   está fora de questão, é cor estranha à paleta (design.md) justamente no
   elemento mais visível do site.
   Solução: mesma cor, luminosidade elevada (--color-ink de L 21% para 30%,
   matiz e croma idênticos). Não é cor nova, é feedback sobre o token existente
   — mesma técnica já usada em .btn--principal no painel. */
.wa:hover { background: oklch(30% 0.012 262); }
.wa svg { width: 20px; height: 20px; flex: none; }

/* ---------- movimento: dois, e só ---------- */

@media (hover: hover) and (pointer: fine) {
  .tira:hover img { transform: scale(1.02); }
}

/* entrada suave ao rolar — pedido do cliente (18/08). Só age quando o JS marcou <html class="js-reveal">
   (sem JS, tudo fica visível). Cada bloco entra uma vez; o hero não participa. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js-reveal [data-reveal][data-visivel] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 120ms !important; animation: none !important; }
  .tira img { transition: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- responsivo ---------- */

@media (max-width: 40rem) {
  .nav { padding-block: var(--space-sm); flex-wrap: wrap; }
  .nav__marca img { width: 88px; height: 45px; }
  .nav__burger { display: inline-flex; }
  /* O header é um stacking context (.nav tem z-index; na home ainda por dentro do
     .hero__nav absoluto). Sem isto o z-index do drawer fica confinado a esse contexto,
     que na página inteira vale --z-base (1): o véu, que mora fora do header, subia por
     cima do menu — daí o painel acinzentado e os links que não navegavam (o véu comia o
     toque). Com o menu aberto o header sobe acima do véu, levando o drawer junto. */
  body[data-menu-aberto] .hero__nav,
  body[data-menu-aberto] .nav { z-index: calc(var(--z-sticky) + 3); }

  /* menu lateral (drawer) — abre via data-aberto="true" no JS.
     Altura pelo conteúdo (pedido do cliente: não ocupar a tela toda nem encostar no
     rodapé); max-height + overflow-y garantem rolagem se um dia crescer. */
  .nav__links {
    position: fixed;
    inset: 0 0 auto auto;
    width: min(78vw, 320px);
    max-height: 100dvh;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-md);
    padding: var(--space-2xl) var(--space-lg) var(--space-xl);
    background: var(--color-paper);
    border-left: var(--rule-hair) solid var(--color-rule);
    border-bottom: var(--rule-hair) solid var(--color-rule);
    box-shadow: var(--shadow-pill);
    z-index: calc(var(--z-sticky) + 2);
    transform: translateX(100%);
    transition: transform var(--dur-short) var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav__links[data-aberto="true"] { transform: translateX(0); }
  .nav__links a,
  .nav--papel .nav__links a { font-size: 13px; letter-spacing: 0.1em; color: var(--color-ink); }
  .nav__links a:hover,
  .nav__links a[aria-current="page"],
  .nav--papel .nav__links a:hover,
  .nav--papel .nav__links a[aria-current="page"] { border-bottom-color: var(--color-ink); }
  /* drawer é sempre sobre papel claro — ícones acompanham a cor dos links de texto no mobile */
  .nav__social { margin-top: var(--space-2xs); }
  .nav__icone,
  .nav--papel .nav__icone { color: var(--color-ink-2); }
  .nav__icone:hover,
  .nav--papel .nav__icone:hover { color: var(--color-ink); }
  .nav__overlay {
    position: fixed;
    inset: 0;
    background: oklch(18% 0.012 262 / 0.5);
    /* acima do .wa (z-sticky) para o véu cobrir o botão flutuante; drawer fica um acima */
    z-index: calc(var(--z-sticky) + 1);
    display: none;
  }
  .nav__overlay[data-aberto="true"] { display: block; }
  .banda { padding-block: var(--space-2xl); }
  .banda--alta { padding-block: var(--space-3xl); }
  .lojas { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .lojas__fundo--merces { grid-column: 1; grid-row: 1 / 3; }
  .lojas__fundo--uberaba { grid-column: 1; grid-row: 3; }
  .lojas h2 { padding: var(--space-2xl) var(--page-gutter) var(--space-lg); }
  .lojas .unidade--merces { grid-column: 1; grid-row: 2; padding-bottom: var(--space-2xl); }
  .lojas .unidade--uberaba { grid-column: 1; grid-row: 3; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
  .acao { white-space: normal; letter-spacing: 0.1em; }
  .wa span { display: none; }
  .wa { padding: 0.75rem; min-width: 52px; justify-content: center; }
}

/* faixa fotográfica de uma imagem só (largura total) */
.tiras--unica { grid-template-columns: minmax(0, 1fr); }
.tira--larga img { aspect-ratio: 16 / 9; }