@charset "UTF-8";
/* =========================================================================
   REBU — Fogo e Fumaça
   Sistema visual herdado do cardápio impresso da casa: vermelho aplicado
   como massa (não como detalhe), coroa dourada marcando os campeões,
   display condensado-pesado-itálico contra serifa clássica nos pratos.

   Ordem: 1 tokens · 2 reset · 3 tipografia · 4 layout · 5 componentes
          6 estados · 7 modo escuro · 8 utilitários · 9 media queries
          10 prefers-reduced-motion
   ========================================================================= */

/* ============================ 1. CUSTOM PROPERTIES ====================== */
:root {
  /* --- Cor: modo claro "Papel" ---------------------------------------- */
  --cor-fundo:        #E9E5DD;  /* papel de açougue */
  --cor-fundo-2:      #F5F2EC;  /* painel */
  --cor-texto:        #17130F;  /* 14,7:1 sobre o fundo */
  --cor-texto-2:      #5A5149;  /* 6,2:1 */
  --cor-acento:       #C81414;  /* vermelho da pincelada — 4,7:1 */
  --cor-acento-forte: #C81414;  /* preenchimento de botão */
  --cor-apoio:        #8A5A0A;  /* bronze da coroa — 4,7:1 */
  --cor-coroa:        #8A5A0A;
  --cor-borda:        #D3CCC0;  /* separadores decorativos */
  --cor-borda-forte:  #8C8171;  /* limite de controle — 3,4:1 */
  --cor-sobre-acento: #F5F2EC;  /* texto sobre vermelho — 5,3:1 */
  --cor-sombra:       #17130F;

  /* --- Tipografia ------------------------------------------------------ */
  --f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --f-corpo:   "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-prato:   "Newsreader", Georgia, "Times New Roman", serif;

  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.25rem;
  --t-2xl:  1.5rem;
  --t-3xl:  1.875rem;
  --t-4xl:  2.25rem;
  --t-5xl:  3rem;
  --t-6xl:  3.75rem;

  /* --- Espaçamento (base 8) -------------------------------------------- */
  --e-1: 4px;   --e-2: 8px;   --e-3: 12px;  --e-4: 16px;
  --e-6: 24px;  --e-8: 32px;  --e-12: 48px; --e-16: 64px;
  --e-24: 96px; --e-32: 128px;

  /* --- Raio ------------------------------------------------------------
     A marca não tem cantos arredondados: as formas dela são rasgadas e
     pinceladas. O padrão do projeto é zero; o raio pequeno existe só para
     controles de formulário, onde o arredondamento é convenção de uso.   */
  --r-none: 0;
  --r-sm:   3px;
  --r-full: 9999px;

  /* --- Sombra ----------------------------------------------------------
     Deslocamento duro, sem blur: gesto de cartaz serigrafado, coerente com
     a pincelada. No modo escuro isso é trocado por borda (ver seção 7).   */
  --s-sm: 3px 3px 0 var(--cor-sombra);
  --s-md: 5px 5px 0 var(--cor-sombra);
  --s-lg: 8px 8px 0 var(--cor-sombra);

  /* --- Movimento -------------------------------------------------------- */
  --mov-ui:     150ms cubic-bezier(0.4, 0, 0.2, 1);
  --mov-entra:  520ms cubic-bezier(0.16, 1, 0.3, 1);
  /* Mesma curva de entrada do resto do site, com duração maior: a pincelada
     é o gesto mais longo da página. Chega perto do fim cedo e desacelera —
     dá peso, sem o solavanco de um overshoot, que aqui esticaria o traço
     inteiro (inclusive a origem, já "seca") em vez de só a ponta. */
  --mov-pincel: 700ms cubic-bezier(0.16, 1, 0.3, 1);

  /* --- Medidas ---------------------------------------------------------- */
  --largura:  1200px;
  --estreito: 760px;
  --cab-alt:  68px;

  color-scheme: light;
}

/* ============================ 2. RESET E BASE =========================== */
*, *::before, *::after { box-sizing: border-box; }

* { -webkit-tap-highlight-color: transparent; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cab-alt) + var(--e-4));
}

body {
  margin: 0;
  background-color: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: var(--f-corpo);
  font-size: var(--t-base);
  line-height: 1.7;
  font-synthesis-weight: none;
  overflow-x: hidden;
  transition: background-color 300ms ease, color 300ms ease;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; }

a { color: var(--cor-acento); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--cor-acento);
  outline-offset: 3px;
}
[data-theme="dark"] :focus-visible { outline-color: var(--cor-apoio); }

::selection { background: var(--cor-acento); color: var(--cor-sobre-acento); }

/* Trava de rolagem para menu e modal (padrão iOS-safe) */
[data-scroll-lock="true"] {
  position: fixed;
  width: 100%;
  overflow-y: scroll;
}

/* ============================ 3. TIPOGRAFIA ============================= */
h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 78%;      /* condensado do wordmark REBU */
  font-style: italic;
  line-height: 1.03;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--e-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

dl, dd, dt, figure, blockquote { margin: 0; }

/* ============================ 4. LAYOUT E GRID ========================== */
.secao { padding-block: clamp(var(--e-16), 9vw, var(--e-32)); }
.secao:nth-of-type(even) { background-color: var(--cor-fundo-2); }

.secao__int {
  width: min(100% - 2 * var(--e-6), var(--largura));
  margin-inline: auto;
}
.secao__int--estreito { max-width: var(--estreito); }

.secao__cab { margin-bottom: clamp(var(--e-8), 5vw, var(--e-16)); }

.secao__intro {
  max-width: 58ch;
  margin-top: var(--e-6);
  font-size: var(--t-lg);
  color: var(--cor-texto-2);
}

/* ============================ 5. COMPONENTES ============================ */

/* --- 5.0 Assinatura visual: a pincelada --------------------------------
   Todo cabeçalho de seção vive dentro de um bloco de cor com recorte
   irregular de pincel, que se pinta da esquerda para a direita ao entrar
   na viewport. O texto é revelado no mesmo passo, com o mesmo tempo e a
   mesma curva, para que nunca exista texto claro sobre fundo claro.      */
.pincel {
  position: relative;
  display: inline-block;
  padding: 0.12em 0.42em 0.2em 0.34em;
  font-size: clamp(1.75rem, 5.5vw, var(--t-5xl));
  isolation: isolate;
}

.pincel__tinta {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--cor-acento);
  /* Borda superior e inferior irregulares: cerda do pincel, não retângulo */
  clip-path: polygon(
    0.6% 14%,   6% 5%,   14% 11%,  23% 3%,   34% 9%,   45% 2%,
    57% 8%,     68% 3%,  79% 10%,  89% 4%,   97% 12%,  100% 22%,
    99% 78%,    94% 91%, 85% 84%,  74% 95%,  63% 87%,  52% 97%,
    41% 89%,    30% 96%, 19% 88%,  9% 95%,   2% 86%,   0% 60%
  );
  transform: scaleX(0);
  transform-origin: left center;
}

.pincel__txt {
  position: relative;
  display: block;
  color: var(--cor-sobre-acento);
}

/* Estado inicial só existe quando há JS para desfazê-lo */
[data-js="true"] .pincel__txt { clip-path: inset(0 100% 0 0); }
[data-js="true"] .pincel__tinta,
[data-js="true"] .pincel__txt {
  transition: transform var(--mov-pincel), clip-path var(--mov-pincel);
}
.pincel[data-visible="true"] .pincel__tinta { transform: scaleX(1); }
.pincel[data-visible="true"] .pincel__txt  { clip-path: inset(0 0 0 0); }

/* --- 5.1 Coroa (marcador dos campeões da casa) ------------------------- */
.coroa {
  width: 1.15em;
  height: auto;
  flex: none;
  fill: var(--cor-coroa);
}

/* --- 5.2 Botões --------------------------------------------------------- */
.bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 48px;
  padding: var(--e-3) var(--e-6);
  border: 2px solid transparent;
  border-radius: var(--r-none);
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 88%;
  font-style: italic;
  font-size: var(--t-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--mov-ui), box-shadow var(--mov-ui),
              background-color var(--mov-ui), color var(--mov-ui);
}

.bt--g { min-height: 56px; padding-inline: var(--e-8); font-size: var(--t-base); }
.bt--bloco { width: 100%; }

.bt--primario {
  background-color: var(--cor-acento-forte);
  color: var(--cor-sobre-acento);
  border-color: var(--cor-texto);
  box-shadow: var(--s-sm);
}

.bt--secundario {
  background-color: transparent;
  color: var(--cor-texto);
  border-color: var(--cor-texto);
}

.bt--claro {
  background-color: var(--cor-fundo-2);
  color: var(--cor-texto);
  border-color: var(--cor-texto);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

.bt--fantasma {
  background: transparent;
  color: var(--cor-texto);
  border-color: transparent;
  border-bottom-color: currentColor;
  padding-inline: var(--e-2);
  min-height: 44px;
}

.bt__ext { font-size: 0.85em; transition: transform var(--mov-ui); }

/* --- 5.3 Cabeçalho ------------------------------------------------------ */
.cab {
  position: sticky;
  top: 0;
  z-index: 60;
  background-color: var(--cor-fundo);
  border-bottom: 1px solid var(--cor-borda);
  padding-top: env(safe-area-inset-top);
  transition: background-color 300ms ease, border-color 300ms ease;
}
/* O painel de navegação vive dentro deste header, e isso só é seguro porque
   o header não tem transform, filter, backdrop-filter nem opacity < 1 — as
   propriedades que prenderiam um filho position:fixed (ver COMPONENTS.md,
   stacking context). O header cria contexto de empilhamento por position +
   z-index, então o menu paga o z-index 60 do pai: fica acima do conteúdo e
   do CTA fixo (55), e abaixo do modal (200), que é o comportamento correto.
   Se algum dia entrar um hide-on-scroll com transform aqui, o menu precisa
   sair para fora do header, como irmão dele. */

.cab__int {
  width: min(100% - 2 * var(--e-4), var(--largura));
  margin-inline: auto;
  min-height: var(--cab-alt);
  display: flex;
  align-items: center;
  gap: var(--e-4);
}

.cab__marca { flex: none; line-height: 0; }
.cab__logo { width: clamp(88px, 22vw, 118px); height: auto; }
.cab__logo--escuro { display: none; }

.cab__acoes {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.cab__reservar { display: none; }

.cab__menu {
  order: 3;
  width: 48px;
  height: 48px;
  display: grid;
  place-content: center;
  gap: 6px;
  background: transparent;
  border: 2px solid var(--cor-texto);
  border-radius: var(--r-none);
  cursor: pointer;
}
.cab__risco {
  display: block;
  width: 22px;
  height: 3px;
  background-color: var(--cor-texto);
  transition: transform var(--mov-ui), opacity var(--mov-ui);
}
[data-nav-toggle][aria-expanded="true"] .cab__risco:first-child { transform: translateY(4.5px) rotate(45deg); }
[data-nav-toggle][aria-expanded="true"] .cab__risco:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

/* --- 5.4 Alternador de tema -------------------------------------------- */
.tema {
  width: 48px;
  height: 48px;
  display: grid;
  place-content: center;
  background: transparent;
  border: 2px solid var(--cor-borda-forte);
  border-radius: var(--r-none);
  cursor: pointer;
  transition: border-color var(--mov-ui), background-color var(--mov-ui);
}
.tema__ic { width: 21px; height: 21px; }
.tema__ic--fogo   { fill: var(--cor-acento); }
.tema__ic--fumaca { fill: none; stroke: var(--cor-apoio); stroke-width: 1.9; stroke-linecap: round; display: none; }

/* --- 5.5 Navegação ------------------------------------------------------ */
.nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--e-4);
  padding: var(--e-8) var(--e-6) calc(var(--e-8) + env(safe-area-inset-bottom));
  padding-top: calc(var(--cab-alt) + env(safe-area-inset-top) + var(--e-8));
  background-color: var(--cor-fundo);  /* painel opaco */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms;
}
.nav[data-state="open"] { transform: translateX(0); visibility: visible; }

.nav__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }

.nav__link {
  display: inline-block;
  position: relative;
  padding: var(--e-3) 0;
  min-height: 44px;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 82%;
  font-style: italic;
  font-size: var(--t-3xl);
  text-transform: uppercase;
  color: var(--cor-texto);
  text-decoration: none;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 8px;
  width: 100%; height: 4px;
  background-color: var(--cor-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__cta { margin-top: var(--e-6); }

/* --- 5.6 Hero ----------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: 78vh;
  min-height: 78dvh;
  isolation: isolate;
}

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

/* Véu de fumaça. O objetivo é duplo e nesta ordem: garantir contraste do
   texto sobre a foto e, ainda assim, deixar a comida aparecer — ela é o
   argumento de venda. Por isso o escurecimento é dirigido, não uma lavagem
   uniforme: forte onde o texto assenta, quase ausente onde está o prato.
   O calor vermelho na base é a brasa, não enfeite. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(105% 68% at 14% 100%, rgba(200, 20, 20, 0.26) 0%, rgba(200, 20, 20, 0) 62%),
    linear-gradient(to top,
      rgba(12, 10, 8, 0.95) 0%,
      rgba(12, 10, 8, 0.9) 42%,
      rgba(12, 10, 8, 0.52) 68%,
      rgba(12, 10, 8, 0.12) 100%);
}

.hero__int {
  width: min(100% - 2 * var(--e-6), var(--largura));
  margin-inline: auto;
  padding-block: clamp(var(--e-16), 11vw, var(--e-24)) clamp(var(--e-12), 8vw, var(--e-16));
  color: #F3EDE3;
}

.hero__olho {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 90%;
  font-style: normal;
  font-size: var(--t-sm);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #E7B65C;
  margin-bottom: var(--e-4);
}

.hero__tit {
  font-size: clamp(2.6rem, 10.5vw, 6.5rem);
  color: #F6F1E7;
  margin-bottom: var(--e-6);
}

.hero__sub {
  max-width: 46ch;
  font-size: clamp(var(--t-base), 2.4vw, var(--t-xl));
  color: #E4DBCD;
  margin-bottom: var(--e-8);
}

.hero__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-8); }
.hero .bt--fantasma { color: #F3EDE3; }

.hero__selo {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--t-sm);
  color: #E4DBCD;
  margin: 0;
}
.hero__selo .coroa { fill: #E7B65C; }

/* --- 5.7 Barra de status ------------------------------------------------ */
.status {
  background-color: var(--cor-texto);
  color: #F0EAE0;
  padding: var(--e-3) var(--e-6);
}
.status__linha {
  width: min(100%, var(--largura));
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  font-size: var(--t-sm);
  line-height: 1.5;
}
.status__ponto {
  width: 9px; height: 9px;
  flex: none;
  border-radius: var(--r-full);
  background-color: #8C8171;
}
[data-status-barra][data-aberto="sim"] .status__ponto { background-color: #43B14B; }
[data-status-barra][data-aberto="nao"] .status__ponto { background-color: #E8342B; }

/* --- 5.8 Carimbo (marquee) ---------------------------------------------- */
.carimbo {
  background-color: var(--cor-acento);
  color: var(--cor-sobre-acento);
  padding-block: var(--e-4);
  overflow: hidden;
  border-block: 2px solid var(--cor-texto);
}
.carimbo__trilho { display: flex; }
.carimbo__fita {
  display: flex;
  align-items: center;
  gap: var(--e-6);
  margin: 0;
  padding-right: var(--e-6);
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 80%;
  font-style: italic;
  font-size: clamp(var(--t-lg), 3.4vw, var(--t-3xl));
  text-transform: uppercase;
  letter-spacing: 0.02em;
  animation: desliza 34s linear infinite;
}
.carimbo__fita i { font-style: normal; opacity: 0.55; }
@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }

/* --- 5.9 Pratos --------------------------------------------------------- */
.pratos {
  display: grid;
  gap: var(--e-6);
  grid-template-columns: 1fr;
}

.prato {
  display: grid;
  background-color: var(--cor-fundo);
  border: 2px solid var(--cor-texto);
  transition: transform var(--mov-ui), box-shadow var(--mov-ui);
}
.secao:nth-of-type(even) .prato { background-color: var(--cor-fundo-2); }

.prato__foto { overflow: hidden; }
.prato__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.prato--largo .prato__foto img { aspect-ratio: 16 / 10; }

.prato__txt { padding: var(--e-6); }

.prato__tag {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 90%;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cor-apoio);
  margin-bottom: var(--e-2);
}

/* Serifa clássica nos nomes de prato — a tensão que o cardápio impresso
   faz entre brush de rua e tipografia de menu. */
.prato__nome {
  font-family: var(--f-prato);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  font-size: clamp(var(--t-2xl), 3.6vw, var(--t-4xl));
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: var(--e-3);
}

.prato__desc { color: var(--cor-texto-2); margin-bottom: 0; }

.prato__nota {
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--cor-apoio);
}

/* --- 5.10 Cardápios ----------------------------------------------------- */
.cardapios {
  margin-top: clamp(var(--e-12), 6vw, var(--e-16));
  padding: var(--e-8);
  border: 2px dashed var(--cor-borda-forte);
  text-align: center;
}
.cardapios__txt { max-width: 52ch; margin-inline: auto; color: var(--cor-texto-2); }
.cardapios__bts { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; margin-top: var(--e-6); }
.cardapios__nota { margin-top: var(--e-4); margin-bottom: 0; font-size: var(--t-xs); color: var(--cor-texto-2); }

/* --- 5.11 Troca de unidade ---------------------------------------------- */
.troca {
  display: flex;
  gap: 0;
  margin-bottom: var(--e-12);
  border: 2px solid var(--cor-texto);
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
}
.troca__bt {
  flex: 1 1 auto;
  min-height: 56px;
  padding: var(--e-3) var(--e-6);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 86%;
  font-style: italic;
  font-size: var(--t-lg);
  text-transform: uppercase;
  color: var(--cor-texto);
  display: grid;
  gap: 2px;
  transition: background-color var(--mov-ui), color var(--mov-ui);
}
.troca__bt + .troca__bt { border-left: 2px solid var(--cor-texto); }
.troca__nota {
  font-family: var(--f-corpo);
  font-weight: 400;
  font-style: normal;
  font-size: var(--t-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;
}
.troca__bt[aria-selected="true"] {
  background-color: var(--cor-acento);
  color: var(--cor-sobre-acento);
}

/* --- 5.12 Casa ---------------------------------------------------------- */
.casa { display: grid; gap: clamp(var(--e-8), 5vw, var(--e-16)); }
.casa[hidden] { display: none; }

.casa__estrela { display: flex; align-items: baseline; gap: var(--e-3); margin-bottom: var(--e-3); }
.casa__nota {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 80%;
  font-style: italic;
  font-size: var(--t-3xl);
  color: var(--cor-acento);
  line-height: 1;
}
.casa__aval { font-size: var(--t-sm); color: var(--cor-texto-2); }

.casa__nome { font-size: clamp(var(--t-2xl), 4.4vw, var(--t-4xl)); margin-bottom: var(--e-4); }
.casa__desc { max-width: 52ch; color: var(--cor-texto-2); margin-bottom: var(--e-8); }

.dados { display: grid; gap: var(--e-4); margin-bottom: var(--e-8); }
.dados__par {
  display: grid;
  gap: var(--e-1);
  padding-bottom: var(--e-4);
  border-bottom: 1px solid var(--cor-borda);
}
.dados dt {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-apoio);
}
.dados dd { margin: 0; }
.dados__leve { color: var(--cor-texto-2); font-size: var(--t-sm); }

.casa__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-bottom: var(--e-4); }
.casa__tel { font-size: var(--t-sm); color: var(--cor-texto-2); margin: 0; }

.casa__midia { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); align-items: start; }
.casa__midia img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 4; border: 2px solid var(--cor-texto); }

/* --- 5.13 Churrascada (seção de vermelho chapado) ----------------------- */
.churrascada { background-color: var(--cor-acento) !important; color: var(--cor-sobre-acento); }
.churrascada .secao__intro { color: rgba(245, 242, 236, 0.88); }
.churrascada .pincel__tinta { background-color: var(--cor-texto); }
.churrascada .pincel__txt { color: var(--cor-sobre-acento); }

.festa { display: grid; gap: clamp(var(--e-8), 5vw, var(--e-16)); }

.festa__precos { display: grid; gap: var(--e-4); align-content: start; }
.festa__preco {
  padding: var(--e-6);
  border: 2px solid var(--cor-sobre-acento);
  text-align: center;
}
.festa__preco--forte { background-color: var(--cor-sobre-acento); color: var(--cor-acento); }
.festa__dia {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--e-2);
}
.festa__valor {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 78%;
  font-style: italic;
  font-size: clamp(var(--t-3xl), 7vw, var(--t-5xl));
  line-height: 1;
  margin: 0;
}

.festa__sub {
  font-size: var(--t-lg);
  letter-spacing: 0.1em;
  margin-bottom: var(--e-3);
  color: var(--cor-sobre-acento);
}
.festa__lista {
  font-family: var(--f-prato);
  font-size: var(--t-lg);
  line-height: 1.6;
  color: rgba(245, 242, 236, 0.92);
  margin-bottom: var(--e-8);
}
.festa__aviso { margin-top: var(--e-4); margin-bottom: 0; font-size: var(--t-sm); color: rgba(245, 242, 236, 0.85); }
.churrascada .bt--primario {
  background-color: var(--cor-sobre-acento);
  color: var(--cor-acento);
  border-color: var(--cor-sobre-acento);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.4);
}

/* --- 5.14 Manifesto ----------------------------------------------------- */
.manifesto__int { display: grid; gap: clamp(var(--e-8), 5vw, var(--e-16)); align-items: start; }
.manifesto__p { max-width: 56ch; color: var(--cor-texto-2); }
.manifesto__p--forte {
  font-family: var(--f-prato);
  font-size: clamp(var(--t-lg), 2.8vw, var(--t-2xl));
  line-height: 1.5;
  color: var(--cor-texto);
  margin-top: var(--e-8);
}
.manifesto__assina {
  margin-top: var(--e-8);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: var(--t-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cor-apoio);
}
.manifesto__fig img { width: 100%; border: 2px solid var(--cor-texto); }
.manifesto__fig figcaption {
  margin-top: var(--e-3);
  font-size: var(--t-sm);
  font-style: italic;
  color: var(--cor-texto-2);
}

/* --- 5.15 Vozes --------------------------------------------------------- */
.vozes { display: grid; gap: var(--e-6); margin-bottom: clamp(var(--e-12), 7vw, var(--e-24)); }
.voz {
  position: relative;
  padding: var(--e-8) var(--e-6) var(--e-6);
  background-color: var(--cor-fundo);
  border: 2px solid var(--cor-texto);   /* mesma moldura dos demais cards */
}
/* Aspas em serifa como marca gráfica, no lugar da barra lateral */
.voz::before {
  content: "\201C";
  position: absolute;
  top: -0.34em;
  left: var(--e-4);
  font-family: var(--f-prato);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--cor-acento);
  background-color: var(--cor-fundo);
  padding-inline: var(--e-2);
}
.secao:nth-of-type(even) .voz,
.secao:nth-of-type(even) .voz::before { background-color: var(--cor-fundo-2); }
.voz__txt {
  font-family: var(--f-prato);
  font-size: var(--t-lg);
  font-style: italic;
  line-height: 1.55;
  margin-bottom: var(--e-4);
}
.voz__quem {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.voz__quem span {
  display: block;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--cor-texto-2);
  font-size: var(--t-xs);
  margin-top: 2px;
}

.fofocam__sub { font-size: var(--t-2xl); margin-bottom: var(--e-6); }

/* --- 5.16 Reels --------------------------------------------------------- */
.reels { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--e-3); }
.reel {
  position: relative;
  display: block;
  overflow: hidden;
  border: 2px solid var(--cor-texto);
  text-decoration: none;
  color: #F3EDE3;
  transition: transform var(--mov-ui), box-shadow var(--mov-ui);
}
.reel__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9 / 13; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 12, 10, 0.9) 0%, rgba(15, 12, 10, 0.42) 48%, rgba(15, 12, 10, 0.08) 100%);
}
.reel__play {
  position: absolute;
  top: var(--e-3);
  left: var(--e-3);
  z-index: 2;
  width: 34px; height: 34px;
  display: grid;
  place-content: center;
  background-color: var(--cor-acento);
  border: 2px solid #F3EDE3;
}
.reel__play::before {
  content: "";
  width: 0; height: 0;
  border-left: 10px solid #F3EDE3;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: 3px;
}
.reel__txt {
  position: absolute;
  z-index: 2;
  inset: auto var(--e-3) var(--e-3) var(--e-3);
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 86%;
  font-style: italic;
  font-size: var(--t-sm);
  line-height: 1.2;
  text-transform: uppercase;
}
.reels__nota { margin-top: var(--e-4); font-size: var(--t-xs); color: var(--cor-texto-2); }

/* --- 5.17 FAQ ----------------------------------------------------------- */
.faq { display: grid; }
.fq { border-top: 2px solid var(--cor-texto); }
.fq:last-child { border-bottom: 2px solid var(--cor-texto); }

.fq__p {
  list-style: none;
  cursor: pointer;
  padding: var(--e-6) var(--e-8) var(--e-6) 0;
  position: relative;
  min-height: 44px;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 88%;
  font-style: italic;
  font-size: clamp(var(--t-lg), 2.6vw, var(--t-2xl));
  text-transform: uppercase;
  line-height: 1.2;
}
.fq__p::-webkit-details-marker { display: none; }
.fq__p::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px; height: 14px;
  border-right: 3px solid var(--cor-acento);
  border-bottom: 3px solid var(--cor-acento);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fq[open] .fq__p::after { transform: translateY(-30%) rotate(-135deg); }

.fq__caixa {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fq[open] .fq__caixa { grid-template-rows: 1fr; }
.fq__caixa > div { overflow: hidden; }
.fq__caixa p { max-width: 62ch; padding-bottom: var(--e-6); color: var(--cor-texto-2); margin: 0; }

/* --- 5.18 Fecho --------------------------------------------------------- */
.fecho {
  background-color: var(--cor-texto);
  color: #F3EDE3;
  padding-block: clamp(var(--e-16), 9vw, var(--e-32));
  text-align: center;
}
.fecho__int { width: min(100% - 2 * var(--e-6), var(--estreito)); margin-inline: auto; }
.fecho__tit { font-size: clamp(var(--t-3xl), 7.5vw, var(--t-6xl)); margin-bottom: var(--e-6); color: #F6F1E7; }
.fecho__sub { font-size: var(--t-lg); color: #CFC4B4; margin-bottom: var(--e-8); }
.fecho__nota { margin-top: var(--e-4); margin-bottom: 0; font-size: var(--t-sm); color: #CFC4B4; }

/* --- 5.19 Rodapé -------------------------------------------------------- */
.rodape { background-color: #100D0B; color: #CFC4B4; padding-top: clamp(var(--e-16), 8vw, var(--e-24)); }
.rodape__int {
  width: min(100% - 2 * var(--e-6), var(--largura));
  margin-inline: auto;
  display: grid;
  gap: var(--e-8);
  padding-bottom: var(--e-16);
}
.rodape__logo { width: 132px; height: auto; }
.rodape__frase {
  margin-top: var(--e-4);
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 90%;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #E7B65C;
}
.rodape__tit {
  font-size: var(--t-base);
  letter-spacing: 0.12em;
  color: #F3EDE3;
  margin-bottom: var(--e-4);
}
.rodape p { font-size: var(--t-sm); margin-bottom: var(--e-2); }
.rodape a { color: #F3EDE3; }

/* Link que ocupa o parágrafo inteiro é alvo autônomo, não link no meio de
   uma frase: precisa de área de toque de verdade (WCAG 2.2, 2.5.8). Os que
   ficam dentro de frase seguem sem padding, e são isentos pela regra. */
.rodape__col p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--e-1);
}
.rodape__base {
  border-top: 1px solid #2A231E;
  padding: var(--e-6) 0 calc(var(--e-6) + env(safe-area-inset-bottom));
}
.rodape__base > * {
  width: min(100% - 2 * var(--e-6), var(--largura));
  margin-inline: auto;
  font-size: var(--t-xs);
  margin-bottom: var(--e-1);
}

/* --- 5.20 CTA fixo no mobile -------------------------------------------- */
.fixo {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  background-color: var(--cor-fundo);
  border-top: 2px solid var(--cor-texto);
  transform: translateY(110%);
  transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.fixo[data-visivel="true"] { transform: translateY(0); }
/* Com o menu ou o modal abertos, o CTA fixo sai de cena */
[data-scroll-lock="true"] .fixo { transform: translateY(110%); }

/* --- 5.21 Modal de reserva ---------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--e-4);
  background-color: rgba(12, 10, 8, 0.78);
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms ease, visibility 250ms;
}
.modal[data-state="open"] { opacity: 1; visibility: visible; }

.modal__caixa {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 560px);
  max-height: min(92dvh, 900px);
  background-color: var(--cor-fundo-2);
  border: 2px solid var(--cor-texto);
  transform: translateY(18px);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.modal[data-state="open"] .modal__caixa { transform: translateY(0); }

.modal__topo {
  display: flex;
  align-items: flex-start;
  gap: var(--e-4);
  padding: var(--e-6) var(--e-6) var(--e-4);
}
.modal__tit { font-size: var(--t-2xl); }
.modal__desc { margin: var(--e-2) 0 0; font-size: var(--t-sm); color: var(--cor-texto-2); }

.modal__x {
  margin-left: auto;
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-content: center;
  background: transparent;
  border: 2px solid var(--cor-borda-forte);
  cursor: pointer;
  transition: background-color var(--mov-ui), border-color var(--mov-ui);
}
.modal__x svg { width: 18px; height: 18px; stroke: var(--cor-texto); stroke-width: 2.4; stroke-linecap: round; fill: none; }

.modal__troca { display: flex; padding-inline: var(--e-6); gap: 0; border: 0; }
.modal__bt {
  flex: 1;
  min-height: 46px;
  padding: var(--e-2) var(--e-3);
  background: transparent;
  border: 2px solid var(--cor-texto);
  cursor: pointer;
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 88%;
  font-style: italic;
  font-size: var(--t-sm);
  text-transform: uppercase;
  transition: background-color var(--mov-ui), color var(--mov-ui);
}
.modal__bt + .modal__bt { border-left: 0; }
.modal__bt[aria-pressed="true"] { background-color: var(--cor-acento); color: var(--cor-sobre-acento); }

.modal__quadro { position: relative; flex: 1; min-height: 460px; margin: var(--e-4) var(--e-6) 0; }
.modal__frame { width: 100%; height: 100%; min-height: 460px; border: 0; background-color: #FFFFFF; }
.modal__carregando {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
  font-size: var(--t-sm);
  color: var(--cor-texto-2);
  background-color: var(--cor-fundo-2);
}
[data-modal-quadro][data-pronto="sim"] .modal__carregando { display: none; }

.modal__rodape {
  padding: var(--e-4) var(--e-6) calc(var(--e-6) + env(safe-area-inset-bottom));
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--cor-texto-2);
}

/* --- 5.22 Documento corrido (privacidade) ------------------------------- */
.doc__tit { font-size: clamp(var(--t-3xl), 7vw, var(--t-5xl)); margin-bottom: var(--e-3); }
.doc__data {
  font-family: var(--f-display);
  font-weight: 700;
  font-stretch: 92%;
  font-size: var(--t-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cor-apoio);
  margin-bottom: var(--e-8);
}
.doc__lead {
  font-family: var(--f-prato);
  font-size: clamp(var(--t-lg), 2.6vw, var(--t-xl));
  line-height: 1.55;
  padding-bottom: var(--e-8);
  border-bottom: 2px solid var(--cor-texto);
  margin-bottom: var(--e-8);
}
.doc h2 { font-size: clamp(var(--t-xl), 3.4vw, var(--t-2xl)); margin: var(--e-12) 0 var(--e-4); }
.doc p { max-width: 68ch; color: var(--cor-texto-2); }
.doc strong { color: var(--cor-texto); }
.doc .dados { margin-block: var(--e-6); }
.doc .dados dt { font-family: var(--f-corpo); font-size: var(--t-sm); letter-spacing: 0.04em; text-transform: none; }
.doc .dados dd { color: var(--cor-texto-2); }

/* Marca o que ainda depende de informação do cliente para ir ao ar */
.doc__pendente {
  padding: var(--e-4);
  border-left: 0;
  border: 2px dashed var(--cor-borda-forte);
  font-size: var(--t-sm);
  font-style: italic;
}
.doc__volta { margin-top: var(--e-16); }

/* --- 5.23 Página 404 ----------------------------------------------------- */
.perdido {
  min-height: 74vh;
  min-height: 74dvh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: var(--e-16) var(--e-6);
}
.perdido__num {
  font-family: var(--f-display);
  font-weight: 900;
  font-stretch: 78%;
  font-style: italic;
  font-size: clamp(5rem, 22vw, 12rem);
  line-height: 0.85;
  color: var(--cor-acento);
  margin-bottom: var(--e-6);
}
.perdido__tit { font-size: clamp(var(--t-2xl), 6vw, var(--t-4xl)); margin-bottom: var(--e-4); }
.perdido__txt { max-width: 46ch; margin-inline: auto; color: var(--cor-texto-2); margin-bottom: var(--e-8); }
.perdido__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); justify-content: center; }

/* ============================ 6. ESTADOS E INTERAÇÕES =================== */
@media (hover: hover) {
  .bt--primario:hover, .bt--claro:hover { transform: translateY(-2px); box-shadow: var(--s-md); }
  .bt--secundario:hover { background-color: var(--cor-texto); color: var(--cor-fundo); }
  .bt--fantasma:hover { color: var(--cor-acento); }
  .bt:hover .bt__ext { transform: translate(2px, -2px); }
  .prato:hover { transform: translateY(-4px); box-shadow: var(--s-md); }
  .prato:hover .prato__foto img { transform: scale(1.045); }
  .reel:hover { transform: translateY(-4px); box-shadow: var(--s-sm); }
  .reel:hover .reel__foto img { transform: scale(1.06); }
  .nav__link:hover::after { transform: scaleX(1); }
  .troca__bt:not([aria-selected="true"]):hover { background-color: var(--cor-borda); }
  .modal__bt:not([aria-pressed="true"]):hover { background-color: var(--cor-borda); }
  .tema:hover { border-color: var(--cor-acento); }
  .modal__x:hover { border-color: var(--cor-acento); }
  .fq__p:hover { color: var(--cor-acento); }
}

button:active, a:active { opacity: 0.82; }

/* Revelação ao rolar — o estado inicial só existe quando há JS */
[data-js="true"] [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--mov-entra), transform var(--mov-entra);
}
[data-js="true"] [data-reveal][data-visible="true"] { opacity: 1; transform: translateY(0); }
[data-reveal][data-delay="1"] { transition-delay: 90ms; }
[data-reveal][data-delay="2"] { transition-delay: 180ms; }
[data-reveal][data-delay="3"] { transition-delay: 270ms; }
[data-reveal][data-delay="4"] { transition-delay: 360ms; }

/* Entrada do hero: título, subtítulo, ações — tudo antes de 800ms */
[data-js="true"] .hero__olho,
[data-js="true"] .hero__tit,
[data-js="true"] .hero__sub,
[data-js="true"] .hero__acoes,
[data-js="true"] .hero__selo {
  animation: sobe 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-js="true"] .hero__tit    { animation-delay: 90ms; }
[data-js="true"] .hero__sub    { animation-delay: 220ms; }
[data-js="true"] .hero__acoes  { animation-delay: 350ms; }
[data-js="true"] .hero__selo   { animation-delay: 460ms; }
@keyframes sobe { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ============================ 7. MODO ESCURO ============================
   Não é inversão. O papel vira fumaça quente (não preto azulado), o
   vermelho sobe em luminosidade para manter 4,9:1, o bronze da coroa vira
   âmbar aceso, e a sombra dura de cartaz é substituída por borda — porque
   sombra preta sobre fundo escuro não existe.                            */
[data-theme="dark"] {
  --cor-fundo:        #191512;
  --cor-fundo-2:      #221D19;
  --cor-texto:        #F0EAE0;
  --cor-texto-2:      #A89C8E;
  --cor-acento:       #F2564B;  /* 5,4:1 — usado em texto e traço */
  --cor-acento-forte: #C81414;  /* preenchimento; bone por cima dá 4,9:1 */
  --cor-apoio:        #E0A32B;  /* 8,2:1 */
  --cor-coroa:        #E0A32B;
  --cor-borda:        #352E27;
  --cor-borda-forte:  #857A72;  /* 4,0:1 sobre o painel */
  --cor-sobre-acento: #F0EAE0;
  --cor-sombra:       #000000;

  --s-sm: 0 0 0 1px rgba(240, 234, 224, 0.14);
  --s-md: 0 0 0 2px rgba(242, 86, 75, 0.5);
  --s-lg: 0 0 0 2px rgba(242, 86, 75, 0.6);

  color-scheme: dark;
}

[data-theme="dark"] .cab__logo--claro  { display: none; }
[data-theme="dark"] .cab__logo--escuro { display: block; }
[data-theme="dark"] .tema__ic--fogo    { display: none; }
[data-theme="dark"] .tema__ic--fumaca  { display: block; }

[data-theme="dark"] .bt--primario { border-color: var(--cor-acento-forte); }
[data-theme="dark"] .bt--claro    { background-color: var(--cor-texto); color: #191512; border-color: var(--cor-texto); box-shadow: none; }
[data-theme="dark"] .status       { background-color: #0F0C0A; }
[data-theme="dark"] .fecho        { background-color: #0F0C0A; }
[data-theme="dark"] .rodape       { background-color: #0B0908; }
[data-theme="dark"] .rodape__base { border-top-color: #2A231E; }

/* Nas superfícies de vermelho chapado o preenchimento continua sendo o
   vermelho de marca — o tom claro só vale para texto sobre fundo escuro. */
[data-theme="dark"] .carimbo,
[data-theme="dark"] .churrascada { background-color: var(--cor-acento-forte) !important; }
[data-theme="dark"] .pincel__tinta { background-color: var(--cor-acento-forte); }
[data-theme="dark"] .churrascada .pincel__tinta { background-color: #17130F; }
[data-theme="dark"] .troca__bt[aria-selected="true"],
[data-theme="dark"] .modal__bt[aria-pressed="true"],
[data-theme="dark"] .reel__play { background-color: var(--cor-acento-forte); }
[data-theme="dark"] .churrascada .bt--primario { background-color: var(--cor-texto); color: #17130F; border-color: var(--cor-texto); box-shadow: none; }

/* O hero é uma faixa fotográfica e permanece igual nos dois modos: dar a ele
   um véu próprio no escuro exigiria um seletor mais específico que o da
   media query de desktop, e o véu horizontal do desktop deixaria de valer.
   Um véu só, definido em um lugar só. */

[data-theme="dark"] .modal__frame { background-color: #F5F2EC; }

/* ============================ 8. UTILITÁRIOS ============================ */
.vis-oculto {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular {
  position: absolute;
  left: var(--e-4);
  top: -100px;
  z-index: 300;
  padding: var(--e-3) var(--e-6);
  background-color: var(--cor-acento-forte);
  color: var(--cor-sobre-acento);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--mov-ui);
}
.pular:focus { top: var(--e-4); }

/* ============================ 9. MEDIA QUERIES ========================== */
@media (min-width: 560px) {
  .festa__precos { grid-template-columns: repeat(2, 1fr); }
  .vozes { grid-template-columns: repeat(2, 1fr); }
  .reels { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
  :root { --cab-alt: 76px; }

  .pratos { grid-template-columns: repeat(2, 1fr); }
  .prato--largo { grid-column: 1 / -1; grid-template-columns: 1.05fr 1fr; align-items: center; }
  .prato--largo .prato__foto img { height: 100%; aspect-ratio: auto; min-height: 340px; }
  .prato--largo .prato__txt { padding: var(--e-12); }

  /* No desktop o texto ocupa só a coluna da esquerda, então o véu passa a
     ser horizontal: a metade direita da foto fica praticamente limpa. */
  .hero::after {
    background:
      radial-gradient(80% 90% at 8% 100%, rgba(200, 20, 20, 0.3) 0%, rgba(200, 20, 20, 0) 60%),
      linear-gradient(to right,
        rgba(12, 10, 8, 0.93) 0%,
        rgba(12, 10, 8, 0.86) 30%,
        rgba(12, 10, 8, 0.5) 58%,
        rgba(12, 10, 8, 0.16) 82%,
        rgba(12, 10, 8, 0.08) 100%),
      linear-gradient(to top, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0) 55%);
  }

  .casa { grid-template-columns: 1.1fr 0.9fr; align-items: start; }
  .festa { grid-template-columns: 0.8fr 1.2fr; }
  .manifesto__int { grid-template-columns: 1.15fr 0.85fr; }
  .vozes { grid-template-columns: repeat(3, 1fr); }

  .rodape__int { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .cab__menu { display: none; }
  .cab__reservar { display: inline-flex; }

  .nav {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--e-6);
    padding: 0;
    margin-left: auto;
    background: transparent;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .cab__acoes { order: 3; margin-left: var(--e-4); }
  .nav__lista { grid-auto-flow: column; gap: var(--e-6); }
  .nav__link {
    font-size: var(--t-sm);
    letter-spacing: 0.08em;
    font-stretch: 92%;
    padding: var(--e-2) 0;
  }
  .nav__link::after { height: 3px; bottom: 2px; }
  .nav__cta { display: none; }

  .fixo { display: none; }

  .rodape__int { grid-template-columns: 1.3fr repeat(3, 1fr); gap: var(--e-12); }
  .modal__quadro, .modal__frame { min-height: 540px; }
}

@media (min-width: 1440px) {
  :root { --largura: 1280px; }
}

/* Sem zoom automático no iOS ao focar campos do widget */
input, select, textarea { font-size: max(16px, 1rem); }

/* ============================ 10. REDUCED MOTION ======================== */
@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;
  }

  /* Garante o estado final visível mesmo sem transição */
  [data-js="true"] [data-reveal] { opacity: 1; transform: none; }
  [data-js="true"] .pincel__txt  { clip-path: inset(0 0 0 0); }
  .pincel__tinta { transform: scaleX(1); }
  .carimbo__fita { animation: none; }
  .fixo { transform: translateY(0); }
}