/* =====================================================================
   Grupo Zen: RESTAURANTES v2 (soma-se ao base.css; paleta "Asfalto e Brasa")
   A página é um dia de estrada, em quatro momentos:
   - TOPO (Asfalto): a íris abre como um prato visto de cima. No computador o
     quadro é a metade direita da tela e o título fica no escuro, à esquerda.
   - O DIA (Piche): A LINHA DO BUFFET, palco preso em que a 1ª foto começa
     cobrindo a tela, encolhe até a fila e a fila corre de lado. Depois, as três
     casas: capa larga que termina de abrir para os lados + uma fileira de 5 fotos iguais (4:5).
   - A NOITE (Asfalto): a fachada do Haru Joy Premium, a mesa do Haru Joy (os pratos se
     fundem na mesma mesa; o título no alto e o nome do prato no pé da coluna da esquerda)
     e as duas casas Haru Joy em quadros 4:5 do mesmo tamanho, lado a lado, com a foto que
     troca conforme o mouse anda sobre ela.
   - O fim (bloco da rede, faixa de contato e rodapé) vem do rede.css/base.css.
   Três estados (BASE.md): o HTML de base é o ESTÁTICO; html.mov liga o
   movimento; html.pronto = o restaurantes.js montou tudo. Classes que só o
   script põe: .esteira--palco (fila presa) e .haru--troca (foto pelo mouse).
   LARGO = (min-width:1024px) and (orientation:landscape) and (min-height:540px),
   a mesma media query do restaurantes.js.
   Rodada v4 (13/10/2026): sem sobretítulo, sem degradê (nem o véu sob o nome do prato: o nome
   saiu de cima da foto), sem sombra, sem fio, tamanhos só da escala do base.css.
   ===================================================================== */

:root {
  /* logo da abertura: largura com que ele aparece no meio do quadro (a mesma da home) */
  --abre-w: clamp(160px, 56vw, 340px);
  /* topo: altura do quadro da foto (celular deitado; o celular e o tablet em pé ficam abaixo) */
  --topo-h: 62svh;
  /* à mesa: curso do palco preso (o restaurantes.js usa as mesmas unidades em UNID.TOTAL).
     Cinco pratos desde 13/10 (eram sete): 340 → 240 no celular, 380 → 268 no computador */
  --curso: 240svh;
  /* celular e tablet em pé: quadro do prato e o nome logo abaixo dele. O bloco (foto + 24 px +
     nome de duas linhas, ~72 px) fica no meio da tela: antes sobravam 108 px em cima e 175 embaixo
     a 390 × 844 (rodada v4). 140vw: a roda de colheres ainda cabe no recorte do quadrado. */
  --mf-h: min(calc(100svh - 176px), 140vw);
  --mf-top: max(16px, calc((100svh - var(--mf-h) - 72px) / 2));
}
/* celular em pé: a 1ª tela inteira a 390 × 844 (foto, título, apoio e as cinco pílulas); com 62svh o
   grupo Haru Joy ficava abaixo da dobra. Tablet em pé: 58svh pelo mesmo motivo a 768 × 1024. */
@media (max-width: 599.98px) and (orientation: portrait) { :root { --topo-h: 50svh; } }
@media (min-width: 600px) and (max-width: 1023.98px) and (orientation: portrait) { :root { --topo-h: 58svh; } }

/* =====================================================================
   TOPO: base ESTÁTICA: a foto inteira em cima e o título embaixo, no Asfalto
   ===================================================================== */
.topo {
  position: relative;
  display: flex; flex-direction: column; min-height: 100svh;
  background: var(--fundo); color: var(--texto);
}
.topo__quadro {
  --q-w0: 100vw;
  /* a íris mede a largura mais a altura do quadro (sempre maior que a diagonal): aberta, cobre os cantos */
  --iris-d: calc(var(--q-w, var(--q-w0)) + var(--q-h, var(--topo-h)));
  position: relative;
  height: var(--topo-h);
  background: var(--espera);
}
/* quem recorta a íris é a janela, não o quadro: o logo da abertura (filho do quadro) voa
   para fora dele até o canto do cabeçalho e não pode ser cortado no caminho */
.topo__janela { position: absolute; inset: 0; overflow: hidden; }
.iris, .iris__dentro { position: absolute; inset: 0; }
.topo__img {
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.abre-logo { display: none; }

.topo__texto {
  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px var(--m) calc(clamp(32px, 6svh, 64px) + var(--seguro));
}
.topo__titulo {
  font-family: var(--f-titulo); font-stretch: 118%; font-weight: 760;
  /* "Prato feito" mede ~7,3em (medido): a 12vw cabe na largura útil de 320 a 599 px */
  font-size: min(12vw, 7.4svh, 72px); line-height: .9; letter-spacing: -.02em;
  text-wrap: balance;
}
.topo__apoio {
  margin-top: var(--passo); max-width: 34ch;
  font-size: var(--t-corpo); line-height: 1.55; text-wrap: pretty;
}

/* índice das cinco casas: pílulas com contorno Prata (controle), 44 px de altura. O nome do
   grupo fica na MESMA linha das pílulas, em caixa normal (não é sobretítulo de nada): uma grade de
   duas colunas (rótulo | pílulas), alinhada pela linha de base da 1ª pílula. No celular a 3ª pílula
   dos restaurantes desce dentro da coluna das pílulas, e o rótulo nunca fica sozinho em cima. */
.indice {
  margin-top: var(--passo);
  display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 12px 16px;
  align-items: baseline;
}
.indice__grupo { display: contents; }
.indice__rotulo {
  font: 400 var(--t-legenda)/1.4 var(--f-texto); color: var(--texto-2);
}
.indice__lista { display: flex; flex-wrap: wrap; gap: 8px; }
.indice__lista a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; white-space: nowrap;
  border-radius: 999px; border: 1.5px solid var(--texto-2);
  font: 700 var(--t-corpo)/1 var(--f-texto); text-decoration: none; color: var(--texto);
  transition: background-color .18s ease, border-color .18s ease, transform .12s var(--curva);
}
@media (hover: hover) {
  .indice__lista a:hover { background: var(--superficie); border-color: var(--texto); }
}
.indice__lista a:active { transform: scale(.97); }

/* computador: o quadro é a metade direita da tela, de cima a baixo; o título fica no
   Asfalto à esquerda e o logo do cabeçalho pousa no escuro (nada atrás dele) */
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  :root { --topo-h: 100svh; }
  .topo {
    display: grid; grid-template-columns: minmax(0, 1fr) 50vw;
    column-gap: clamp(32px, 4vw, 72px); padding-left: var(--m);
  }
  .topo__quadro { --q-w0: 50vw; grid-column: 2; grid-row: 1; height: 100svh; }
  .topo__texto {
    grid-column: 1; grid-row: 1;
    padding: calc(var(--cab-h) + 32px) 0 8svh;
  }
  /* "Prato feito" (~7,3em) numa linha na coluna da esquerda (50vw menos a margem e o vão) */
  .topo__titulo { font-size: clamp(52px, min(5.2vw, 11svh), 112px); }
  .topo__apoio { margin-top: var(--passo); max-width: 32ch; }
  .indice { margin-top: var(--vao); }
  /* o cabeçalho é uma barra chapada de Asfalto: nenhum véu de topo na foto */
}

/* ---------- TOPO com movimento: a íris ---------- */
/* A íris é um círculo (overflow + raio) do tamanho do quadro aberto; o restaurantes.js
   começa com ele quase fechado (scale) e escala a foto lá dentro no inverso, então a
   foto fica parada enquanto o círculo abre. Só transform. */
.mov .topo__quadro { background: var(--fundo); }
.mov .iris {
  inset: auto; left: 50%; top: 50%;
  width: var(--iris-d); height: var(--iris-d);
  margin: calc(var(--iris-d) / -2) 0 0 calc(var(--iris-d) / -2);
  border-radius: 50%; overflow: hidden;
  background: var(--espera);
  transform-origin: 50% 50%;
}
.mov .iris__dentro {
  inset: auto; left: 50%; top: 50%;
  width: var(--q-w, var(--q-w0)); height: var(--q-h, var(--topo-h));
  margin: calc(var(--q-h, var(--topo-h)) / -2) 0 0 calc(var(--q-w, var(--q-w0)) / -2);
  transform-origin: 50% 50%;
}
/* logo da abertura (só quando o site abre por aqui): no meio da íris, solto (desenho no base.css).
   Fica ACIMA do cabeçalho (z 50): por baixo, o véu do topo (Asfalto a ~85% na altura do logo)
   apagava o logo no fim do voo e ele "acendia" quando o do cabeçalho aparecia. */
.mov.de-fora .abre-logo {
  display: block; position: absolute; z-index: 60; left: 50%; top: 50%;
  width: var(--abre-w);
  margin: calc(var(--abre-w) * -80 / 438) 0 0 calc(var(--abre-w) / -2);
  pointer-events: none; transform-origin: 50% 50%; will-change: transform;
  animation: abre-logo-entra .7s cubic-bezier(.2, .7, .2, 1) .05s backwards;
}

/* antes do restaurantes.js montar a abertura, nada pisca: a tela fica no Asfalto (com o logo) */
.mov:not(.pronto) .iris,
.mov:not(.pronto) .topo__texto,
.mov.de-fora:not(.pronto) .cab { visibility: hidden; }
/* quem chega de outra página do site não vê o voo do logo: o cabeçalho entra por CSS, no 1º quadro,
   sem esperar o script (o restaurantes.js só mexe nele com .de-fora). Com o foco dentro, entra na hora. */
.mov:not(.de-fora) .cab { animation: cab-entra .7s ease .85s both; }
.mov .cab:focus-within { animation: none; }
@keyframes cab-entra { from { opacity: 0; } }

/* =====================================================================
   O DIA: Piche. A linha do buffet e as três casas
   ===================================================================== */
.dia {
  background: var(--grao), var(--fundo-2); color: var(--texto);
  padding-bottom: var(--respiro);
}
/* os dois títulos de horário (dia e noite) no desenho do título do topo */
.dia__titulo, .noite__titulo { font-stretch: 118%; font-weight: 760; letter-spacing: -.02em; }

/* ---------- a linha do buffet: base ESTÁTICA: galeria arrastável (kit b) ---------- */
.esteira { padding-top: var(--respiro); }
.esteira__cabeca { padding: 0 var(--m); }
.esteira__apoio { margin-top: 24px; max-width: 44ch; text-wrap: pretty; }
.esteira__galeria { margin-top: var(--vao); --kg-r: 3 / 4; --kg-w: min(68vw, 340px); }
/* tablet (600 a 1023 px): duas fotos e um bom pedaço da terceira (30 a 40%), para o corte da borda convidar a rolar */
@media (min-width: 600px) and (max-width: 1023.98px) {
  .esteira__galeria { --kg-w: calc((100vw - var(--m)) / 2.35); }
}
/* a mesma grade de 12 colunas das casas: o apoio começa na coluna 8, a mesma linha do texto das
   três casas logo abaixo (rodada v4: encostado à direita, ele abria uma 3ª borda, 94 px adiante) */
@media (min-width: 1024px) {
  .esteira__cabeca {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--g); align-items: end;
  }
  .esteira__titulos { grid-column: 1 / span 7; }
  .esteira__apoio { grid-column: 8 / -1; margin: 0 0 .3em; max-width: 40ch; }
  .esteira__galeria { --kg-w: clamp(260px, 22vw, 360px); }
}
.esteira__item figcaption { display: grid; gap: 2px; margin-top: 14px; }
.esteira__prato { color: var(--texto); font: 500 var(--t-corpo)/1.35 var(--f-texto); }
.esteira__casa { color: var(--texto-2); font: 400 var(--t-legenda)/1.35 var(--f-texto); }
/* sem script, as setas não fazem nada: somem (a tira rola sozinha) */
html:not(.js) .kit-galeria__setas { display: none; }

/* ---------- a linha com movimento no computador: o palco preso ---------- */
/* .esteira--palco só existe com movimento no LARGO (o script põe e tira). O curso vem
   do script (--esteira-curso: o encolher da 1ª foto + a corrida da fila + uma pausa),
   e a altura do quadro (--esteira-q-h), medida no palco. */
.esteira--palco { padding-top: 0; height: calc(100svh + var(--esteira-curso, 220svh)); }
.esteira--palco .esteira__palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  /* uma coluna da largura da tela: a fila (bem mais larga) transborda e corre por transform */
  grid-template-columns: minmax(0, 1fr);
  padding: calc(var(--cab-h) + clamp(12px, 3svh, 36px)) 0 clamp(16px, 3.5svh, 36px);
}
.esteira--palco .esteira__cabeca { position: relative; z-index: 2; }
.esteira--palco .dia__titulo { font-size: min(var(--t-titulo), 8.4svh); }
.esteira--palco .esteira__galeria { display: contents; }
.esteira--palco .kit-galeria__trilho {
  position: relative; z-index: 3; min-height: 0; min-width: 0;
  overflow: visible; scroll-snap-type: none; cursor: default;
  padding: clamp(16px, 3.4svh, 40px) var(--m) 0;
  align-items: flex-start;
}
.esteira--palco .esteira__item { width: calc(var(--esteira-q-h, 48svh) * .75); }
.esteira--palco .esteira__item .quadro { aspect-ratio: auto; height: var(--esteira-q-h, 48svh); }
.esteira--palco .esteira__item:first-child { position: relative; z-index: 2; }
.esteira--palco .esteira__item:first-child .quadro { transform-origin: 50% 50%; }
.esteira--palco .esteira__item img { transform-origin: 50% 50%; }
/* tudo o que anda no palco vira camada própria: a corrida, a inclinação e a foto dentro
   do quadro só recompõem, sem repintar a fila a cada quadro */
.esteira--palco .kit-galeria__trilho,
.esteira--palco .esteira__item,
.esteira--palco .esteira__item:first-child .quadro,
.esteira--palco .esteira__item img { will-change: transform; }
.esteira--palco .kit-galeria__pe { margin-top: 0; position: relative; z-index: 1; }
.esteira--palco .kit-galeria__setas { display: none; }

/* ---------- as três casas ---------- */
.casa { padding: 0 var(--m); margin-top: var(--respiro); }
.casa__capa {
  margin-inline: calc(-1 * var(--m));
  --quadro-r: 4 / 5;
  --pos: var(--pos-pe, 50% 50%);
}
@media (min-width: 600px) { .casa__capa { --quadro-r: 3 / 2; } }
@media (min-width: 1024px) { .casa__capa { --quadro-r: 2.39 / 1; --pos: var(--pos-largo, 50% 50%); } }
/* capas e fachada (data-abre, restaurantes.js): com movimento a foto já ENTRA aberta (52% da largura
   nas capas, a metade de baixo na fachada) e termina de abrir com a rolagem. O kit (c) da base abria
   do zero e deixava uma fresta de foto no meio de um campo vazio (rodada v4, telas 5 e 10 a 1440).
   Antes do script montar, o mesmo recorte de partida (sem piscar a foto inteira). */
.mov:not(.pronto) [data-abre="lados"] { clip-path: inset(0% 24% 0% 24%); }
.mov:not(.pronto) [data-abre="baixo"] { clip-path: inset(42% 0% 0% 0%); }

.casa__corpo { margin-top: var(--passo); display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--passo); }
.casa__cabeca { display: flex; align-items: baseline; gap: 14px; }
.casa__cabeca > * { min-width: 0; }
/* o nome da casa é mais largo e mais leve que o título da seção: placa, não manchete.
   --cw é a largura da letra (o script abre de 62 a 128 na entrada). As três casas do dia
   abrem com capa e fileira: o nome delas é título (--t-titulo); o dos cartões Haru Joy,
   mais abaixo, é chamada. */
.casa__nome {
  --cw: 128;
  font-family: var(--f-titulo); font-stretch: calc(var(--cw) * 1%); font-weight: 600;
  font-size: var(--t-chamada); line-height: .98; letter-spacing: -.01em;
  text-wrap: balance;
}
.casa__cabeca .casa__nome { font-size: var(--t-titulo); }
.casa__serve { margin-top: 0; max-width: 40ch; text-wrap: pretty; }
.casa__onde { margin-top: 8px; max-width: 40ch; }
/* "Traçar rota": alvo de 44 px de altura também com o mouse (o sublinhado continua no texto) */
.casa__rota { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-weight: 700; }

/* cinco fotos por casa, todas 4:5 e do mesmo tamanho (no celular e no tablet, tira de rolagem) */
.casa__fotos { --fileira-n: 5; --fileira-n-meio: 5; --fileira-w: min(62vw, 300px); }
.casa__fotos figure { margin: 0; }
.casa__fotos .quadro { aspect-ratio: 4 / 5; }
.casa__fotos figcaption { margin-top: 12px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; }

@media (min-width: 1024px) {
  .casa__corpo {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); row-gap: var(--vao);
    margin-top: var(--vao);
  }
  .casa__cabeca { grid-column: 1 / span 7; align-self: start; }
  .casa__info { grid-column: 8 / -1; align-self: end; }
  .casa__fotos { grid-column: 1 / -1; }
}

/* =====================================================================
   A NOITE: Asfalto: o pôr do sol, a mesa do Haru Joy e as duas casas
   ===================================================================== */
.noite {
  background: var(--grao), var(--fundo); color: var(--texto);
  padding-bottom: var(--respiro);
}

.escopo { margin: 0; }
/* a fachada do Haru Joy Premium (opt/haru-prem-03): em pé, o recorte fica na quina do letreiro
   vertical (8% da largura da foto); deitado, a casa inteira com a faixa de luz */
.escopo__moldura { --quadro-r: 4 / 5; --pos: 4% 55%; }
@media (min-width: 600px) { .escopo__moldura { --quadro-r: 16 / 9; --pos: 50% 50%; } }
@media (min-width: 1024px) { .escopo__moldura { --quadro-r: 2.39 / 1; --pos: 50% 45%; } }
@media (min-width: 600px) and (orientation: portrait) and (max-width: 1023.98px) { .escopo__moldura { --quadro-r: 4 / 3; --pos: 12% 50%; } }
.escopo__legenda {
  padding: 16px var(--m) 0;
  font: 500 var(--t-legenda)/1.45 var(--f-texto); color: var(--texto-2);
}

/* ---------- à mesa: base ESTÁTICA: título e os pratos em grade ---------- */
.mesa { padding: var(--respiro) var(--m) 0; }
.mesa__apoio { margin-top: var(--passo); max-width: 46ch; text-wrap: pretty; }
/* cinco pratos: o primeiro maior de propósito (linha inteira no celular, um quadrado de
   2 × 2 no computador) e os outros quatro iguais, sem buraco na grade */
.pratos {
  margin-top: var(--vao);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px;
}
.prato figure { margin: 0; }
.prato__quadro { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: var(--espera); }
.prato__img {
  width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 55%;
}
.prato__nome { margin-top: 12px; font: 500 var(--t-corpo)/1.4 var(--f-texto); text-wrap: pretty; }
.prato__nome span { display: block; }
.prato:first-child { grid-column: 1 / -1; }
@media (min-width: 1024px) {
  .pratos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vao) var(--g); }
  .prato:first-child { grid-column: 1 / span 2; grid-row: 1 / span 2; }
  html:not(.mov) .prato:first-child figure { height: 100%; display: flex; flex-direction: column; }
  html:not(.mov) .prato:first-child .prato__quadro { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
}

/* cópia dos pratos só para leitor de tela (.sr-only): existe só com movimento, quando a lista
   animada fica aria-hidden (os pratos 2 a 5 ficam escondidos até a rolagem) */
html:not(.mov) .pratos__leitor { display: none; }

/* ---------- à mesa com movimento: o palco preso ---------- */
.mov .mesa__trilho { height: calc(100svh + var(--curso)); }
/* celular e tablet em pé: o prato vai de borda a borda (a .mesa tem margem lateral);
   o nome continua na margem da página, alinhado com o título */
@media not all and (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  .mov .mesa__trilho { margin-inline: calc(-1 * var(--m)); }
}
.mov .mesa__palco { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.mov .pratos { position: absolute; inset: 0; margin: 0; display: block; }
.mov .prato { position: absolute; inset: 0; }
/* celular: o prato no meio da tela, o nome logo abaixo, sobre o Asfalto */
.mov .prato__quadro {
  position: absolute; left: 0; right: 0; top: var(--mf-top); height: var(--mf-h);
  aspect-ratio: auto;
}
.mov .prato__img { transform-origin: 50% 60%; }
.mov .prato__nome {
  position: absolute; z-index: 3; left: var(--m); right: var(--m);
  top: calc(var(--mf-top) + var(--mf-h) + var(--passo)); margin: 0;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 600;
  font-size: min(24px, 6.2vw); line-height: 1.1; letter-spacing: -.01em;   /* celular: 24 px, o máximo de frase (era 22) */
  text-wrap: balance;
}
/* sem o restaurantes.js montar, só o 1º prato aparece (sem piscar os outros) */
.mov:not(.pronto) .prato + .prato { visibility: hidden; }

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  :root { --curso: 268svh; --mesa-vao: clamp(32px, 4vw, 72px); }
  /* o título fica preso à esquerda; o prato ocupa a metade direita até a borda. Metade e metade
     (era 5/12): "Haru Joy, 18h às 23h." precisa de 11 caracteres por linha no --t-titulo, e a
     5/12 cabiam 10 (a 1280 e a 1440). Logo depois da fachada (mesma seção): --vao, não --respiro. */
  .mov .mesa {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 0; margin-top: var(--vao);
  }
  .mov .mesa__cabeca { grid-column: 1; grid-row: 1; }
  /* o título no ALTO da coluna: entra junto com o topo da foto (no meio, ele ficava 50svh abaixo
     e a mesa entrava com meia tela vazia à esquerda). O pé da coluna é do nome do prato. */
  .mov .mesa__cabeca-dentro {
    position: sticky; top: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-start;
    padding: calc(var(--cab-h) + var(--vao)) var(--mesa-vao) 0 var(--m);
  }
  .mov .mesa__trilho { grid-column: 2; grid-row: 1; }
  .mov .mesa .noite__titulo { font-size: min(var(--t-titulo), 9svh); }
  .mov .mesa__apoio { margin-top: var(--passo); }
  /* o nome do prato sai de cima da foto e vai para o pé da coluna da esquerda, no Asfalto: sem véu
     em degradê e sem texto sobre a foto. O palco não corta (overflow visível): quem corta a foto
     é o .prato__quadro. O nome mede a coluna da esquerda (o palco é a coluna da direita). */
  .mov .mesa__palco { overflow: visible; }
  .mov .prato__quadro { top: 0; bottom: 0; height: auto; }
  .mov .prato__nome {
    top: auto; bottom: var(--vao);
    left: calc(-100% + var(--m)); right: calc(100% + var(--mesa-vao));
    font-size: 36px; line-height: 1.1;   /* 36 px: o máximo de frase da casa (era 29 px, o nome saiu de cima da foto) */
  }
}
/* tela larga: a foto do prato volta a 7/12 (o título "Haru Joy, 18h às 23h." ainda cabe em 2 linhas na coluna de 5/12) */
@media (min-width: 1600px) and (orientation: landscape) and (min-height: 540px) {
  .mov .mesa { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* a coluna da esquerda agora mede 5/7 do palco (antes, 1/1): o nome do prato acompanha */
  .mov .prato__nome { left: calc(-500% / 7 + var(--m)); }
}

/* ---------- as duas casas Haru Joy: quadros 4:5 do mesmo tamanho, lado a lado do tablet em diante ----------
   Duas colunas iguais que vão de margem a margem (sem vão no meio, que leria como uma casa
   faltando). No computador a dupla é limitada pela ALTURA da tela: o quadro 4:5 inteiro cabe
   abaixo do cabeçalho (em 1920 × 1080 ele passaria da tela); quando o limite pega, as duas
   continuam do mesmo tamanho, encostadas à esquerda. */
/* dentro da mesma seção (a noite): o vão é --vao, não --respiro. Com --respiro, o fim da mesa e a
   1ª casa ficavam a 220 px no celular, mais que entre duas seções (rodada v4). */
.casas-haru { padding: var(--vao) var(--m) 0; }
.casas-haru__lista {
  --haru-vao: clamp(20px, 3vw, 56px);
  display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--vao);
}
@media (min-width: 720px) {
  .casas-haru__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--haru-vao);
    align-items: start;
  }
}
@media (min-width: 1024px) {
  /* largura de cada quadro = (altura da tela − cabeçalho − folga) × 4/5 */
  .casas-haru__lista { max-width: calc(2 * (100svh - var(--cab-h) - 56px) * 4 / 5 + var(--haru-vao)); }
}
/* base ESTÁTICA (e no toque): uma tira com encaixe, uma foto por vez, arrastável */
.haru__fotos {
  display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  background: var(--superficie);
}
.haru__fotos::-webkit-scrollbar { display: none; }
.haru__foto { flex: none; width: 100%; --quadro-r: 4 / 5; scroll-snap-align: start; scroll-snap-stop: always; }
/* os traços: um botão por foto (alvo de 44 px de altura), o da foto atual em Cal; 4 px de
   espessura (traço de verdade, não fio). Os outros são Prata a 45% (3,5:1 sobre o Asfalto);
   cada botão tem nome ("Foto 2 de 5"). */
.haru__marcas { display: flex; gap: 8px; }
.haru__marca { position: relative; flex: 1 1 0; min-width: 0; height: 44px; }
.haru__marca::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px;
  background: var(--texto-2); opacity: .45;
  transition: background-color .2s ease, opacity .2s ease, transform .3s var(--curva);
}
@media (hover: hover) {
  .haru__marca:hover::before { opacity: 1; }
}
.haru__marca:active::before { transform: scaleY(.6); }
.haru__marca[aria-current="true"]::before { background: var(--texto); opacity: 1; }
html:not(.js) .haru__marcas { display: none; }
.haru__nome { margin-top: var(--passo); }
.haru .casa__serve { margin-top: 16px; }

/* com o mouse e movimento (o script põe .haru--troca): as fotos ficam empilhadas no
   mesmo quadro e a da vez entra por um corte de lado, conforme o cursor anda */
.haru--troca .haru__fotos { display: block; position: relative; overflow: hidden; aspect-ratio: 4 / 5; cursor: ew-resize; }
.haru--troca .haru__foto { position: absolute; inset: 0; }

/* =====================================================================
   CELULAR DEITADO (sempre estático) e TABLET EM PÉ
   ===================================================================== */
@media (orientation: landscape) and (max-height: 539px) {
  .topo__titulo { font-size: min(8vw, 13svh, 64px); }
  .casa__capa, .escopo__moldura { --quadro-r: 21 / 9; }
}
/* as duas casas Haru Joy no celular deitado: o quadro 4:5 inteiro na altura da tela
   (uma coluna abaixo de 720 px, duas a partir daí) */
@media (orientation: landscape) and (max-height: 539px) {
  .casas-haru__lista { max-width: calc((100svh - 32px) * 4 / 5); }
}
@media (orientation: landscape) and (max-height: 539px) and (min-width: 720px) {
  .casas-haru__lista { max-width: calc(2 * (100svh - 32px) * 4 / 5 + var(--haru-vao)); }
}
@media (min-width: 600px) and (orientation: portrait) {
  .topo__titulo { font-size: min(11vw, 8svh, 112px); }
}

/* =====================================================================
   TOQUE (até 1023 px e telas de toque): o resto está no base.css
   ===================================================================== */
@media (max-width: 1023.98px), (pointer: coarse) {
  .casa__rota { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .indice__lista a, .haru__marca::before { transition: none; }
  .indice__lista a:active, .haru__marca:active::before { transform: none; }
}