/* =====================================================================
   Grupo Zen: BASE comum das páginas novas (/...)
   Tokens, escala de tipo e de espaço, fontes, reset, cabeçalho, menu do
   celular, rodapé, botões, foco, faixa de contato, quadros de foto, kit de
   interações e o contrato do modo estático. Cada página soma o seu CSS depois
   deste (a home soma o home.css). Como montar uma página: BASE.md.

   Rodada v4 (13/10/2026, skill design-taste-frontend): sem degradê, sem sombra
   em repouso, sem vidro, sem fio de 1 px, sem sobretítulo, sem contador
   "01 / 05". Cada regra tem o porquê no BASE.md.

   Três estados, com as mesmas media queries do base.js:
   - ESTÁTICO   o HTML de base. Vale com "reduzir movimento", sem JS, com o
                celular deitado e quando fontes/scripts não chegam em 4 s.
   - html.mov   movimento ligado (o <head> põe; o base.js confirma ou tira)
   - html.pronto o script da página terminou de montar
   ===================================================================== */

/* ---------- FONTES (hospedadas no próprio site; ver BASE.md, "Fontes") ----------
   Anybody (variável: largura 50-150%, peso 100-900) e Atkinson Hyperlegible Next (variável: pesos
   400 a 700). Os arquivos estão em /fontes/ (woff2 + OFL.txt com a origem de cada um). Dois
   subconjuntos por família: latin (o português inteiro) e latin-ext (o resto). O navegador só baixa
   o latin-ext se a página tiver algum caractere dele. O <head> pré-carrega só o anybody-latin. */
@font-face {
  font-family: "Anybody"; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap;
  src: url("/fontes/anybody-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Anybody"; font-style: normal; font-weight: 100 900; font-stretch: 50% 150%; font-display: swap;
  src: url("/fontes/anybody-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fontes/atkinson-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/fontes/atkinson-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Reservas com a medida das fontes de verdade: enquanto o woff2 não chega (ou se falhar), o texto
   usa o Arial (ou o Liberation Sans/Helvetica), esticado para a largura e com a linha na altura
   da fonte final. A troca não mexe em quebra de linha nem em altura. Valores medidos no navegador
   (BASE.md, "Fontes"). */
@font-face {
  font-family: "Anybody Reserva"; font-style: normal; font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"), local("Helvetica-Bold");
  size-adjust: 128.2%; ascent-override: 62%; descent-override: 18.7%; line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Reserva"; font-style: normal; font-weight: 400 500;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Helvetica");
  size-adjust: 98.4%; ascent-override: 100%; descent-override: 32.1%; line-gap-override: 0%;
}
@font-face {
  font-family: "Atkinson Reserva"; font-style: normal; font-weight: 600 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Helvetica Bold"), local("Helvetica-Bold");
  size-adjust: 98.4%; ascent-override: 100%; descent-override: 32.1%; line-gap-override: 0%;
}

:root {
  color-scheme: dark;

  /* ---------- PALETA v2 "Asfalto e Brasa" (aprovada; ver BASE.md) ---------- */
  --fundo: #141110;               /* Asfalto: fundo principal, seções ímpares, barra do cabeçalho, rodapé */
  --fundo-2: #1E1B19;             /* Piche: seções pares, bloco da rede */
  --superficie: #2F2A28;          /* Grafite: cartão, linha da vez, trilho de barra, espera de foto */
  --texto: #FAF7F2;               /* Cal: texto principal e títulos */
  --texto-2: #BCBDC0;             /* Prata: texto secundário, legenda, borda do botão secundário */
  --acento: #DB0408;              /* Brasa: botão principal, anel de foco. Nunca texto pequeno */
  --acento-2: #BD0306;            /* Brasa escura: botão principal com o mouse em cima */
  --destaque: #780103;            /* Bordô: só a faixa de contato do fim da página, chapado */
  --espera: var(--superficie);    /* cor da foto que ainda não chegou (a página pode trocar) */

  /* véus CHAPADOS de Asfalto (sem degradê). Escolha pelo uso:
     --veu-foto   sobre a foto inteira, sob título grande (de .35 a .55 conforme a foto)
     --veu-tarja  atrás de texto pequeno, botão e controle que ficam sobre foto ou vídeo
     --veu        legado (72%): ainda vale, mas prefira os dois acima */
  --veu-foto: rgb(20 17 16 / .45);
  --veu-tarja: rgb(20 17 16 / .85);
  --veu: rgb(20 17 16 / .72);

  /* OBSOLETO desde 13/10: o fio de 1 px saiu do site. Fica só como apelido do degrau de tom
     Grafite para a página que ainda o usa não quebrar (barra de progresso passa a ter trilho
     Grafite). Não use em CSS novo; sai da base quando nenhuma página citar. */
  --fio: var(--superficie);

  /* grão de ruído (ladrilho SVG fixo, nunca sobre foto): pontos claros e escuros na mesma
     medida, para a cor média continuar a do token. Uso: background: var(--grao), var(--fundo) */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g' x='0' y='0' width='1' height='1' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='discrete' tableValues='0 1'/%3E%3CfeFuncG type='discrete' tableValues='0 1'/%3E%3CfeFuncB type='discrete' tableValues='0 1'/%3E%3CfeFuncA type='table' tableValues='.6 .6 .5 .32 .14 0 .018 .036 .05 .06 .06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");

  --f-titulo: "Anybody", "Anybody Reserva", "Arial Narrow", system-ui, sans-serif;
  --f-texto: "Atkinson Hyperlegible Next", "Atkinson Reserva", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- ESCALA DE TIPO: cinco tamanhos, só estes ---------- */
  /* display: h1 do topo, nome do palco, "8 postos, 5 restaurantes." (até 26 caracteres em 2 linhas) */
  --t-display: clamp(44px, 8vw, 144px);
  /* título: h2 de seção, título da faixa de contato (até 34 caracteres em 2 linhas).
     "embarcadores." mede 9,35em: abaixo de 390 px o mínimo de 34 px acompanha a tela */
  --t-titulo: clamp(min(34px, 8.7vw), 4.6vw, 72px);
  /* chamada: h3, nome de unidade/prato/serviço, frase grande (até 36 caracteres em 2 linhas) */
  --t-chamada: clamp(22px, 2vw, 30px);
  /* corpo: parágrafo, apoio, valor de ficha, botão */
  --t-corpo: 17px;
  /* legenda: legenda de foto, rótulo de ficha, contador "1 de 6", rodapé, nota. Nada abaixo disto */
  --t-legenda: 15px;

  /* ---------- ESPAÇO ---------- */
  --respiro: clamp(88px, 6vw + 72px, 200px);   /* entre seções */
  --vao: clamp(40px, 2vw + 32px, 64px);        /* o maior vão DENTRO de uma seção */
  --passo: 24px;                               /* título → apoio, apoio → botão */

  /* margem lateral; nunca menor que a área segura do notch (viewport-fit=cover; fora do notch o env() vale 0) */
  --m: max(clamp(16px, 6vw, 96px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --g: 16px;                        /* calha */
  --cab-h: 64px;
  --logo-w: 104px;                  /* largura do logo no cabeçalho */
  --logo-n: 104;                    /* a mesma largura sem unidade */
  --abre-w: clamp(160px, 56vw, 340px);  /* logo da abertura: largura no meio da tela */
  --foco: var(--acento);
  --seguro: env(safe-area-inset-bottom, 0px);
  --curva: cubic-bezier(.2, .7, .2, 1);

  /* distância da linha de base até o pé da caixa, medida no navegador */
  --base-titulo: .2em;   /* Anybody com entrelinha .95 */
  --base-texto: .445em;  /* Atkinson com entrelinha 1.55 */
}
@media (min-width: 1024px) {
  :root { --g: 24px; --cab-h: 84px; --logo-w: 132px; --logo-n: 132; --t-corpo: 18px; }
}
/* coluna única em pé de 600 a 1023 px: o título na escala da tela (a 4,6vw ficava com 35 px em 676 px) */
@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) {
  :root { --t-titulo: min(7vw, 64px); }
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgb(250 247 242 / .12);   /* Cal a 12%: só no toque, nunca em repouso */
  overflow-x: clip;
  background: var(--fundo);
  /* o cabeçalho é fixo: foco por teclado e âncoras nunca param embaixo dele */
  scroll-padding-top: calc(var(--cab-h) + 8px);
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--grao), var(--fundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-corpo);
  line-height: 1.55;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
p, h1, h2, h3, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
/* toque: sem o atraso de duplo toque e sem o clarão do navegador onde já existe o :active (scale .97) */
a, button, summary, label, [role="button"] { touch-action: manipulation; }
.botao, button { -webkit-tap-highlight-color: transparent; }
/* a rolagem do menu e da foto ampliada não passa para a página */
.menu, .kit-tela { overscroll-behavior: contain; }
/* computador: sem o elástico de fim de página (só no eixo y: o gesto de voltar do trackpad continua) */
@media (pointer: fine) { html { overscroll-behavior-y: none; } }
::selection { background: var(--acento); color: var(--texto); }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- foco: anel duplo em todo o site (MANTIDO, defendido no BASE.md) ---------- */
/* Brasa por fora e um fio Cal por dentro: o Cal garante o contraste onde a Brasa
   sozinha some (sobre o Grafite e o Bordô). Só existe em :focus-visible (estado do
   teclado), nunca em repouso. */
:focus-visible {
  outline: 3px solid var(--foco); outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--texto); /* taste-skill-ignore: anel de foco, só em :focus-visible */
}
:focus:not(:focus-visible) { outline: none; }
/* título que recebe foco por script (âncora, "Pular"): o leitor anuncia, o anel não aparece */
h2[tabindex="-1"]:focus, main[tabindex="-1"]:focus, section[tabindex="-1"]:focus { outline: none; box-shadow:none; }

/* ---------- utilitários ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.inteiro { white-space: nowrap; }

/* fundos de seção (alternar entre uma seção e a seguinte), com o grão */
.fundo { background: var(--grao), var(--fundo); color: var(--texto); }
.fundo-2 { background: var(--grao), var(--fundo-2); color: var(--texto); }

/* classes de tipo: o mesmo desenho dos tokens, para a página não reinventar tamanho */
.t-display { font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700; font-size: var(--t-display); line-height: .9; letter-spacing: -.025em; text-wrap: balance; }
.t-titulo { font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700; font-size: var(--t-titulo); line-height: .95; letter-spacing: -.012em; text-wrap: balance; }
.t-chamada { font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700; font-size: var(--t-chamada); line-height: 1.1; text-wrap: balance; }
.t-corpo { font-size: var(--t-corpo); line-height: 1.55; }
.t-legenda { font-size: var(--t-legenda); line-height: 1.4; color: var(--texto-2); }

/* .olho (sobretítulo) SAIU do site em 13/10: sobretítulo é tique de página gerada.
   A classe fica neutra (legenda em caixa normal, sem traço) só para a página que ainda tem o
   elemento não quebrar. A página tira o elemento e põe a informação no título ou na primeira
   frase (BASE.md, "O que entra no lugar do sobretítulo"). */
.olho { font: 400 var(--t-legenda)/1.4 var(--f-texto); color: var(--texto-2); }

/* quebras de linha por modo: .br-largo só no palco largo, .br-pe fora dele */
.br-largo { display: none; }
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  .br-largo { display: inline; }
  .br-pe { display: none; }
}

/* ---------- botões e links ---------- */
/* UMA forma no site todo: pílula. Controle só de ícone é a mesma pílula com lados iguais.
   Um botão CHEIO por tela (Brasa, ou a pílula Cal do WhatsApp); o segundo é contorno ou link.
   Com o mouse só troca de cor; ao apertar, scale .97 em 120 ms. Sem brilho, sem sombra. */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid transparent;
  font: 700 var(--t-corpo)/1 var(--f-texto);
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
@media (min-width: 1024px) { .botao { height: 52px; } }
.botao:active { transform: scale(.97); }
.botao svg { width: 20px; height: 20px; fill: currentColor; flex: none; }

/* principal: Brasa com texto Cal (4,87:1); com o mouse, Brasa escura */
.botao--principal { background: var(--acento); color: var(--texto); }
.botao--principal:hover, .botao--principal:active { background: var(--acento-2); }
/* secundário: contorno Prata; com o mouse, Grafite e contorno Cal */
.botao--secundario { background: transparent; color: var(--texto); border-color: var(--texto-2); }
.botao--secundario:hover { background: var(--superficie); border-color: var(--texto); }
/* sobre foto ou vídeo: tarja chapada de Asfalto a 85% (sem desfoque) */
.botao--veu { background: var(--veu-tarja); color: var(--texto); border-color: var(--texto-2); }
.botao--veu:hover { background: var(--fundo); border-color: var(--texto); }
/* WhatsApp: pílula Cal com texto e ícone Asfalto (17,6:1) */
.botao--wa { background: var(--texto); color: var(--fundo); border-color: transparent; }
.botao--wa:hover { background: #E9E4DC; border-color: transparent; }

.link {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
  transition: text-decoration-color .18s ease;
}
.link:hover { text-decoration-thickness: 2px; text-decoration-color: var(--acento); }
.link--forte {
  font: 700 var(--t-corpo)/1.3 var(--f-texto);
  text-decoration-thickness: 2px;
}

/* ---------- "Pular ..." (link de pular, aparece com o foco) ---------- */
.pular {
  position: fixed; z-index: 70; top: 12px; left: var(--m);
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  border-radius: 999px; background: var(--texto); color: var(--fundo);
  font: 700 var(--t-corpo)/1 var(--f-texto); text-decoration: none;
  transform: translateY(calc(-100% - 24px));
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.pular:focus-visible { transform: none; }

/* =====================================================================
   CABEÇALHO
   Barra CHAPADA de Asfalto desde o topo, da altura --cab-h: sem desfoque, sem fio,
   sem sombra, sem véu de topo. Some ao descer e volta ao subir (base.js).
   Durante a abertura com o logo voando (html.abrindo) a barra fica transparente e
   entra com opacity depois do pouso. Com o menu aberto também fica transparente.
   ===================================================================== */
.cab {
  position: absolute; z-index: 50; top: 0; left: 0; right: 0;
  height: var(--cab-h);
  display: flex; align-items: center;
  padding: 0 var(--m);
  color: var(--texto);
  transition: transform .45s cubic-bezier(.215, .61, .355, 1);
}
.cab::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  background: var(--fundo);
  pointer-events: none;
  transition: opacity .3s ease;
}
/* o logo da abertura passa por baixo do cabeçalho: a barra espera o pouso (a página tira
   html.abrindo no pouso e a barra entra pela transição de .3 s) */
.abrindo .cab::before, .menu-aberto .cab::before { opacity: 0; }
/* fixo só quando o base.js está vivo (ele cuida de esconder e mostrar); sem ele, o cabeçalho rola junto */
.cab-viva .cab { position: fixed; }
.cab--escondido { transform: translateY(-100%); }
.cab__logo { display: block; flex: none; margin-right: auto; }
.cab__logo img { width: var(--logo-w); height: auto; }
/* celular: a caixa do logo tem 44 px de altura (alvo de toque), sem fundo */
@media (max-width: 1023.98px) {
  .cab__logo { display: flex; align-items: center; height: 44px; padding: 0 12px; margin-left: -12px; }
}
.cab__nav { display: none; }
.cab__nav ul { display: flex; gap: 32px; }
.cab__nav a, .rodape__nav a {
  display: inline-block; padding-block: 12px;
  font: 500 var(--t-corpo)/1.2 var(--f-texto); text-decoration: none;
  text-underline-offset: .32em; text-decoration-thickness: 2px;
  transition: color .18s ease;
}
.cab__nav a:hover, .rodape__nav a:hover { text-decoration-line: underline; }
.cab__nav a[aria-current="page"], .rodape__nav a[aria-current="page"] {
  text-decoration-line: underline; text-decoration-color: var(--acento);
}

.botao--cab {
  height: 44px; width: 44px; padding: 0;
  background: var(--texto); color: var(--fundo);
}
.botao--cab:hover { background: #E9E4DC; }
.botao--cab .botao__texto {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* "Menu": pílula com contorno Prata sobre a barra, sem fundo e sem desfoque */
.cab__menu {
  height: 44px; min-width: 44px; margin-left: 8px; padding: 0 18px;
  border-radius: 999px; border: 1.5px solid var(--texto-2);
  background: transparent;
  font: 500 var(--t-corpo)/1 var(--f-texto); color: var(--texto);
  transition: border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.cab__menu:hover { border-color: var(--texto); background: var(--superficie); }
.cab__menu:active { transform: scale(.97); }
html:not(.cab-viva) .cab__menu { display: none; }
/* sem JavaScript o botão "Menu" não funciona: no lugar dele, um link para os links do rodapé */
.cab__ir-menu { display: none; }
@media (max-width: 1023.98px) {
  html:not(.cab-viva) .cab__ir-menu {
    display: inline-flex; align-items: center; height: 44px; margin-left: 8px; padding: 0 18px;
    border-radius: 999px; border: 1.5px solid var(--texto-2); background: transparent;
    font: 500 var(--t-corpo)/1 var(--f-texto); color: var(--texto); text-decoration: none;
  }
}

@media (min-width: 1024px) {
  .cab__nav { display: block; }
  .botao--cab { width: auto; padding: 0 20px; margin-left: 32px; }
  .botao--cab .botao__texto { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .cab__menu { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cab, .cab::before, .pular, .cab__menu, .botao { transition: none; } }

/* ---------- menu do celular ---------- */
.menu {
  position: fixed; z-index: 45; inset: 0;
  display: flex; flex-direction: column;
  padding: calc(var(--cab-h) + 32px) var(--m) calc(24px + var(--seguro));
  background: var(--grao), var(--fundo); color: var(--texto);
  overflow-y: auto;
}
.menu[hidden] { display: none; }
.menu__lista { display: grid; gap: 4px; }
/* durante a abertura, cada item é a máscara de onde o link sobe (base.js);
   depois a máscara sai, para não cortar o anel de foco */
.menu__lista li { padding-block: .08em; margin-block: -.08em; }
.menu--abrindo .menu__lista li { overflow: clip; }
.menu__link {
  display: inline-block; padding-block: 6px;   /* alvo de 49 px */
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-titulo); line-height: 1.1; text-decoration: none;
  color: var(--texto-2);
  text-underline-offset: .16em; text-decoration-thickness: 3px;
  transition: color .18s ease, transform .4s var(--curva);
}
/* com o mouse ou o foco, o link acende e anda um passo (sem mudar a largura da letra: nada quebra de linha) */
.menu__link:hover, .menu__link:focus-visible { color: var(--texto); transform: translateX(8px); }
.menu__link[aria-current="page"] { color: var(--texto); text-decoration-line: underline; text-decoration-color: var(--acento); }
.menu__wa { margin-top: auto; width: 100%; background: var(--texto); color: var(--fundo); border-color: transparent; }
.menu-aberto, .menu-aberto body { overflow: hidden; }
.menu-aberto .cab { transform: none; }
@media (min-width: 1024px) { .menu { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .menu__link { transition: none; } }

/* =====================================================================
   TÍTULO DE SEÇÃO E AÇÕES (botão + link)
   ===================================================================== */
.titulo-secao {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-titulo); line-height: .95; letter-spacing: -.012em;
  text-wrap: balance; hyphens: manual;
}
.acoes { margin-top: var(--passo); display: flex; flex-direction: column; align-items: flex-start; gap: var(--passo); }
/* largura cheia e texto centrado: o respiro lateral menor só aparece em 320 px, onde o rótulo encosta */
.acoes .botao { width: 100%; padding-inline: 12px; }
@media (min-width: 1024px) {
  .acoes { flex-direction: row; align-items: center; }
  .acoes .botao { width: auto; padding-inline: 24px; }
}

/* =====================================================================
   FIM DE PÁGINA: faixa de contato (Bordô CHAPADO) e rodapé
   Ordem em toda página: bloco da rede (Piche) → faixa de contato → rodapé.
   Dentro do Bordô o texto é só Cal e o botão principal vira pílula Cal
   (o vermelho não entra ali). O logo nunca vai sobre o Bordô.
   O campo Bordô sobe de baixo quando a faixa chega (rede.css/rede.js); sem
   movimento, já está no lugar.
   ===================================================================== */
/* (o bloco da rede, antes do contato, é do rede.css: gerado por tools/novo/rede.mjs) */
.faixa-contato { background: var(--destaque); color: var(--texto); }
.faixa-contato .botao--principal {
  background: var(--texto); color: var(--fundo); border-color: transparent;
}
.faixa-contato .botao--principal:hover { background: #E9E4DC; }

/* o salto Bordô → Asfalto separa a faixa do rodapé: sem fio */
.rodape {
  background: var(--grao), var(--fundo); color: var(--texto-2);
  padding: var(--vao) var(--m) calc(var(--vao) + var(--seguro));
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 28px;
  font: 400 var(--t-legenda)/1.4 var(--f-texto);
}
.rodape__logo { display: inline-block; justify-self: start; }
.rodape__logo img { width: 120px; height: auto; aspect-ratio: 438 / 160; }
.rodape__nav ul { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 32px; row-gap: 0; }
.rodape__nav a { padding-block: 7px; font: 400 var(--t-legenda)/1.4 var(--f-texto); }
.rodape__nav a:hover, .rodape__nav a[aria-current="page"] { color: var(--texto); }
.rodape__direitos { color: var(--texto-2); }

@media (min-width: 1024px) {
  .rodape {
    display: flex; align-items: baseline; justify-content: space-between; gap: 32px;
  }
  .rodape__logo img { display: inline-block; vertical-align: baseline; }
  .rodape__nav ul { display: flex; gap: 28px; }
}

/* =====================================================================
   LOGO DA ABERTURA (as páginas põem só a posição e quando ele aparece)
   Solto desde o primeiro quadro, sem pílula, sem sombra e sem halo. Quem garante a
   leitura é a página: o logo não passa sobre a fresta de foto (a fresta abre depois
   que ele sai do meio). .abre-logo__halo saiu; a classe fica escondida para o HTML
   e o JS que ainda a citam não quebrarem.
   ===================================================================== */
.abre-logo img { position: relative; width: 100%; height: auto; }
.abre-logo__halo { display: none; }
@keyframes abre-logo-entra { from { opacity: 0; } }

/* =====================================================================
   QUADROS DE FOTO
   Poucas proporções nomeadas. A foto (img, video ou picture > img) cobre o
   quadro com object-fit: cover; o enquadramento vem de --pos.
   REGRA: fotos irmãs (mesma fileira, tira ou sequência) têm o mesmo tamanho e
   a mesma proporção. Diferença só se for intencional e evidente (uma foto de
   largura inteira e, embaixo, uma fileira uniforme).
   ===================================================================== */
.quadro {
  position: relative; overflow: hidden; margin: 0;
  aspect-ratio: var(--quadro-r, 3 / 2);
  background: var(--espera);
}
.quadro > img, .quadro > video, .quadro > picture, .quadro > picture > img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  color: transparent;   /* a foto que ainda carrega não mostra o texto alternativo em caixa cinza */
}
.quadro--paisagem { --quadro-r: 3 / 2; }
.quadro--classico { --quadro-r: 4 / 3; }
.quadro--retrato  { --quadro-r: 4 / 5; }
.quadro--cinema   { --quadro-r: 2.39 / 1; }
.quadro--video    { --quadro-r: 16 / 9; }

/* fileira: colunas iguais e UMA proporção para todos (a da fileira manda; a do
   quadro é ignorada aqui dentro) → todas as fotos com a mesma altura.
   --fileira-n colunas no computador, --fileira-n-pe no celular (padrão 1). */
.fileira {
  --fileira-r: 3 / 2;
  display: grid; gap: var(--fileira-gap, var(--g));
  grid-template-columns: repeat(var(--fileira-n-pe, 1), minmax(0, 1fr));
}
@media (min-width: 600px) {
  .fileira { grid-template-columns: repeat(var(--fileira-n-meio, 2), minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .fileira { grid-template-columns: repeat(var(--fileira-n, 3), minmax(0, 1fr)); }
}
.fileira > * { min-width: 0; margin: 0; }
.fileira > .quadro, .fileira > * > .quadro { aspect-ratio: var(--fileira-r); }
.fileira--paisagem { --fileira-r: 3 / 2; }
.fileira--classico { --fileira-r: 4 / 3; }
.fileira--retrato  { --fileira-r: 4 / 5; }
.fileira--video    { --fileira-r: 16 / 9; }
/* no celular, em vez de empilhar: tira com rolagem lateral, cada foto com a mesma largura */
@media (max-width: 1023.98px) {
  .fileira--rolar {
    display: flex; gap: 12px;
    margin-inline: calc(-1 * var(--m)); padding-inline: var(--m);
    /* 6 px de folga em cima e embaixo para o anel de foco (3 + 2 px) não ser cortado pela rolagem; a margem negativa devolve o espaço */
    padding-block: 6px; margin-block: -6px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
    scrollbar-width: none;
  }
  .fileira--rolar::-webkit-scrollbar { display: none; }
  .fileira--rolar > * { flex: none; width: var(--fileira-w, 78vw); scroll-snap-align: start; }
}

/* =====================================================================
   KIT DE INTERAÇÕES (base.js → Base.kit). Marcação mínima no BASE.md.
   Cada peça é completa e legível no estático; o movimento só acrescenta.
   ===================================================================== */

/* ---------- (a) lista com foto ---------- */
/* sem fio entre as linhas: o espaço e o degrau de tom (Grafite na linha da vez) separam */
.kit-lista { --kl-r: 4 / 3; }
.kit-lista__item {
  position: relative;
  display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; column-gap: 20px; align-items: center;
  padding: 12px 8px 12px 0;
  transition: background-color .2s ease;
}
.kit-lista__foto {
  grid-column: 1; grid-row: 1 / span 2;
  width: 104px; height: auto; aspect-ratio: var(--kl-r); max-width: none;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  background: var(--espera);
}
/* unidade sem foto (Rosário II): quadro Grafite do mesmo tamanho */
.kit-lista__foto--vazia { display: block; }
.kit-lista__link {
  grid-column: 2; grid-row: 1; align-self: end;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-chamada); line-height: 1.05; letter-spacing: -.01em;
  text-decoration: none;
}
/* a linha inteira é o alvo do toque e do clique */
.kit-lista__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kit-lista__info { grid-column: 2; grid-row: 2; align-self: start; margin-top: 4px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
.kit-lista__seta {
  grid-column: 3; grid-row: 1 / span 2;
  width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2;
  color: var(--texto-2);
  transition: transform .35s var(--curva), color .2s ease;
}
.kit-lista__item:hover, .kit-lista__item:focus-within { background: var(--superficie); }
.kit-lista__item:hover .kit-lista__seta, .kit-lista__item:focus-within .kit-lista__seta { color: var(--acento); transform: translateX(6px); }
/* celular e tablet: cartões numa tira de rolagem lateral (arrastável), foto em cima */
@media (max-width: 1023.98px) {
  .kit-lista {
    display: flex; gap: 12px;
    margin-inline: calc(-1 * var(--m)); padding: 0 var(--m) 8px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
    scrollbar-width: none;
  }
  .kit-lista::-webkit-scrollbar { display: none; }
  .kit-lista__item {
    flex: none; width: min(72vw, 320px); scroll-snap-align: start;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; row-gap: 0;
    padding: 0 0 12px; align-items: start;
  }
  .kit-lista__foto { grid-column: 1 / -1; grid-row: 1; width: 100%; margin-bottom: 14px; }
  .kit-lista__link { grid-column: 1; grid-row: 2; }
  .kit-lista__info { grid-column: 1; grid-row: 3; }
  .kit-lista__seta { grid-column: 2; grid-row: 2; width: 24px; height: 24px; margin-top: 2px; }
  .kit-lista__item:hover, .kit-lista__item:focus-within { background: none; }
}
/* a foto que segue o cursor (só computador com mouse e movimento; criada pelo base.js).
   Sem sombra: é um quadro de foto que anda, não um painel. */
.kit-prev {
  position: fixed; z-index: 40; left: 0; top: 0;
  width: var(--kp-w, clamp(260px, 22vw, 380px)); aspect-ratio: var(--kp-r, 4 / 5);
  pointer-events: none; overflow: hidden;
  background: var(--superficie);
  opacity: 0; visibility: hidden;
}
.kit-prev img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}

/* ---------- (b) galeria arrastável ---------- */
.kit-galeria { position: relative; --kg-r: 4 / 5; }
.kit-galeria__trilho {
  display: flex; gap: var(--g);
  padding: 6px var(--m); margin-block: -2px;   /* 6 px de folga para o anel de foco; a margem negativa mantém o espaço de antes */
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; scroll-padding-inline: var(--m);
  scrollbar-width: none;
  cursor: grab;
}
/* o trilho vai de borda a borda: o anel de foco entra por dentro (Brasa fora, fio Cal dentro) */
.kit-galeria__trilho:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 5px var(--texto); /* taste-skill-ignore: anel de foco, só em :focus-visible */ }
.kit-galeria__trilho::-webkit-scrollbar { display: none; }
.kit-galeria__trilho.arrastando { cursor: grabbing; scroll-snap-type: none; user-select: none; -webkit-user-select: none; }   /* a legenda só deixa de ser selecionável durante o arrasto */
.kit-galeria__item { flex: none; width: var(--kg-w, min(74vw, 420px)); margin: 0; scroll-snap-align: start; }
.kit-galeria__item .quadro { aspect-ratio: var(--kg-r); }
.kit-galeria__item img { -webkit-user-drag: none; }
.kit-galeria__item figcaption { margin-top: 12px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }
.kit-galeria__pe {
  display: flex; align-items: center; gap: 20px;
  margin: 24px var(--m) 0;
}
/* barra de progresso: 4 px (é desenho, não fio), trilho Grafite e preenchimento Cal */
.kit-galeria__barra { position: relative; flex: 1; height: 4px; background: var(--superficie); overflow: hidden; }
.kit-galeria__barra > span {
  position: absolute; inset: 0; background: var(--texto);
  transform-origin: 0 50%; transform: scaleX(var(--kg-p, .08));
}
.kit-galeria__setas { display: flex; gap: 12px; }
.kit-galeria__seta { width: 48px; padding: 0; }
.kit-galeria__seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.kit-galeria__seta[aria-disabled="true"] { opacity: .4; cursor: default; }
/* sem setas só onde a rolagem é por toque; com o mouse numa janela estreita elas continuam */
@media (max-width: 1023.98px) and (hover: none) { .kit-galeria__setas { display: none; } }

/* ---------- (c) revelação por máscara presa à rolagem ---------- */
/* o base.js anima clip-path e a escala da foto; no estático, a foto já está inteira */
.mov:not(.pronto) .kit-revela { clip-path: inset(16% 20% 16% 20% round 24px); }

/* ---------- (d) foto que abre em tela cheia ---------- */
.kit-amplia { display: block; position: relative; cursor: zoom-in; }
.kit-amplia::after {
  content: ""; position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px;
  border-radius: 999px; background: var(--veu-tarja) center / 20px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F2' stroke-width='2'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E");
  opacity: 0; transform: scale(.8);
  transition: opacity .2s ease, transform .3s var(--curva);
}
.kit-amplia:hover::after, .kit-amplia:focus-visible::after { opacity: 1; transform: none; }
.kit-tela { position: fixed; z-index: 80; inset: 0; }
.kit-tela[hidden] { display: none; }
.kit-tela__fundo { position: absolute; inset: 0; background: rgb(20 17 16 / .95); }
.kit-tela__img {
  position: fixed; left: 0; top: 0; max-width: none; object-fit: contain;
  transform-origin: 0 0;
}
.kit-tela__legenda {
  position: absolute; left: var(--m); right: calc(var(--m) + 220px); bottom: calc(20px + var(--seguro));
  color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4;
}
.kit-tela__fechar { position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: var(--m); z-index: 2; }
.kit-tela__navega { position: absolute; right: var(--m); bottom: calc(12px + var(--seguro)); display: flex; align-items: center; gap: 12px; z-index: 2; }
.kit-tela__conta { color: var(--texto-2); font-size: var(--t-legenda); min-width: 4.5em; text-align: center; font-variant-numeric: tabular-nums; }
.kit-tela__seta { width: 48px; padding: 0; }
.kit-tela__seta svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.kit-aberta, .kit-aberta body { overflow: hidden; }

/* ---------- (e) vídeo que toca na tela ou com o mouse ---------- */
.kit-video { position: relative; }
.kit-video video { transition: transform .8s var(--curva); }
.kit-video:hover video { transform: scale(1.03); }
.kit-video__botao {
  position: absolute; z-index: 3; left: 12px; bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1.5px solid var(--texto-2);
  background: var(--veu-tarja); color: var(--texto);
  font: 700 var(--t-legenda)/1 var(--f-texto);
  transition: border-color .18s ease, background-color .18s ease, transform .12s ease;
}
.kit-video__botao:hover { border-color: var(--texto); background: var(--fundo); }
.kit-video__botao:active { transform: scale(.97); }
.kit-video__botao svg { width: 18px; height: 18px; fill: currentColor; }
.kit-video__botao .kit-video__pausa { display: none; }
.kit-video.tocando .kit-video__botao .kit-video__play { display: none; }
.kit-video.tocando .kit-video__botao .kit-video__pausa { display: block; }
@media (prefers-reduced-motion: reduce) {
  .kit-lista__item, .kit-lista__seta, .kit-lista__link, .kit-amplia::after, .kit-video video, .kit-video__botao { transition: none; }
  .kit-video:hover video { transform: none; }
}

/* =====================================================================
   MOVIMENTO (só vale com html.mov)
   ===================================================================== */
/* máscaras do SplitText: espaço para acento e descendente sem mudar o layout
   (Anybody: ascendente .80em, descendente .24em; com entrelinha .9 a tinta passa ~.07em da caixa) */
.linha-mask { padding-block: .1em; margin-block: -.1em; }
/* Entre DUAS linhas as margens negativas se juntam (fica -.1em, não -.2em): cada linha a mais
   crescia .1em quando o título se dividia, e o que vinha embaixo andava durante a leitura (medido
   em postos em 13/10: 56 px a 1440). Da 2ª linha em diante a máscara compensa os dois lados. */
.linha-mask + .linha-mask { margin-top: -.2em; }
.palavra-mask { padding-block: .1em; margin-block: -.1em; }
.texto-mask { padding: 0; margin: 0; }
/* o que a página vai animar na entrada não pisca antes de o script montar */
.mov:not(.pronto) .mov-espera { visibility: hidden; }

/* =====================================================================
   TOQUE (até 1023 px e telas de toque): alvos de pelo menos 44 px sem mexer no desenho.
   A área de toque cresce por um ::before invisível; o anel de foco continua
   justo no texto. Onde os links se empilham, um vão separa as áreas.
   ===================================================================== */
@media (max-width: 1023.98px), (pointer: coarse) {
  .link, .rodape__nav a { position: relative; }
  .link::before, .rodape__nav a::before { content: ""; position: absolute; }
  .link::before { inset: -11px -8px; }                          /* 22 + 22 = 44 (o link de 26 px chega a 48) */
  .link--forte::before { inset: -11px -8px; }                   /* 23 + 22 = 45 */
  .rodape__nav ul { row-gap: 12px; }
  .rodape__nav a::before { inset: -6px -9px; }                  /* 34 + 12 = 46; "Safe" (27 px) + 18 = 45 */
}