/* =====================================================================
   Grupo Zen: HOTEL ROSÁRIO (soma-se ao base.css), rodada v4
   O capítulo do hotel no "Filme de estrada". Um momento forte por seção:
   - CHEGADA  palco preso; cada plano se parte ao meio como PORTA e mostra o
              seguinte (o momento forte da página);
   - QUARTOS  a foto do quarto abre como cortina (duas folhas que correm para os
              lados); embaixo, a fileira uniforme dos três itens do título (lupa no
              item com o mouse);
   - GALERIA  no computador a seção prende e a rolagem leva as fotos para o
              lado; no celular é a galeria arrastável do kit; toda foto abre
              em tela cheia;
   - VIZINHOS os cinco lugares numa fileira; as fotos abrem do meio, como porta;
   - PÁTIO    escopo de cinema que abre e passa de lado; a ficha de como chegar.
   As revelações são folhas e faixas que andam por transform (não clip-path, que
   repinta a foto a cada quadro). Sem degradê, sem sombra, sem fio de 1 px, sem
   sobretítulo e sem contador "01 / 06" (regras da casa no BASE.md).
   Fotos irmãs sempre do mesmo tamanho e proporção (.quadro / .fileira do base).
   Três modos, com as mesmas media queries do hotel.js:
   - PALCO LARGO  (min-width:1024px) and (orientation:landscape) and (min-height:540px), com movimento
   - PALCO EM PÉ  todo o resto, com movimento
   - ESTÁTICO     reduzir movimento, sem JS ou celular deitado
   ===================================================================== */

:root {
  /* FRASE GRANDE (a da chegada e a dos quartos, as duas do cliente): é parágrafo no tamanho de
     frase, não título. A skill aceita até 3 linhas (4 no celular) se ficar em no máximo 24 px no
     celular, 32 px no tablet e 36 px no computador; acima disso vira título e vale o limite de 2
     linhas. As palavras do cliente não mudam (TEXTOS.md HO03 e HO06). */
  --frase: min(24px, 6.15vw);
  --pe-texto: calc(32px + var(--seguro));     /* pé do texto no palco */
  /* logo da abertura: a mesma medida da home */
  --abre-w: clamp(160px, 56vw, 340px);
}
@media (min-width: 600px) { :root { --frase: min(32px, 4.2vw); } }
@media (min-width: 1024px) { :root { --frase: clamp(28px, 2.5vw, 36px); } }
@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  :root { --pe-texto: 9vh; }
}

/* =====================================================================
   1. A CHEGADA: base ESTÁTICA: a foto do topo e, embaixo, os três
      planos numa fileira 4:5 (todos do mesmo tamanho)
   ===================================================================== */
.chegada {
  position: relative;
  background: var(--grao), var(--fundo); color: var(--texto);
}
.palco { position: relative; padding-bottom: var(--respiro); }
.plano { margin: 0; }
.plano__quadro { position: relative; overflow: hidden; background: var(--espera); }
.folha { position: relative; width: 100%; height: 100%; }
.plano__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos-pe);
}
.folha--dir, .plano__veu, .palco__veu, .porta, .porta__luz, .abre-logo { display: none; }

/* "e sobe": no palco do celular em pé (com movimento, tela cheia) entra a fachada vista
   do alto (torre com a estrela, placa e porta). As mesmas condições do <source> no HTML. */
@media (max-aspect-ratio: 3/5) and (prefers-reduced-motion: no-preference) {
  .plano[data-plano="2"] .plano__img { object-position: 70% 50%; }
  /* no quadro, só no estático: com movimento o quadro tem de ficar sem fundo, senão a cor
     (cinza) tampa o vão da porta e o quarto só aparece de repente, no fim da abertura */
  html:not(.mov) .plano[data-plano="2"] .plano__quadro,
  .mov .plano[data-plano="2"] .folha { background: var(--espera-estreito); }
}

/* plano 0 = topo */
.plano[data-plano="0"] .plano__quadro { height: 64svh; }
.topo { padding: 28px var(--m) 0; }
.topo__titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 760;
  /* "Rosário" mede 4,77em na largura 112 (medido): a 18vw ocupa 86vw dos 88vw úteis */
  font-size: min(18vw, 10svh, 132px); line-height: .86; letter-spacing: -.025em;
}
.topo__titulo .linha-mask { display: block; overflow: clip; }
.topo__titulo .linha { display: block; }
.topo__apoio {
  margin-top: var(--passo); max-width: 40ch;
  font-size: var(--t-corpo); line-height: 1.5; text-wrap: pretty;
}
/* no computador estático o .topo é coluna flex: o botão fica do tamanho do rótulo */
.topo__reservar { margin-top: var(--passo); align-self: flex-start; }

/* a frase grande: Anybody 700 na largura dos títulos, no tamanho de frase (acima) */
.frase,
.quartos__frase,
.quartos__p {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--frase); line-height: 1.08; letter-spacing: -.01em;
  text-wrap: balance;
}
.frase { margin: var(--respiro) var(--m) 0; max-width: 26ch; }

/* planos 1 a 3: fileira uniforme (uma coluna no celular, três a partir de 600 px) */
.seq {
  margin: var(--vao) var(--m) 0;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px var(--g); align-items: start;
}
@media (min-width: 600px) { .seq { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seq .plano__quadro { aspect-ratio: 4 / 5; }
.legenda {
  margin-top: 16px; max-width: 42ch;
  font: 500 var(--t-legenda)/1.45 var(--f-texto); color: var(--texto-2); text-wrap: pretty;
}

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  .plano[data-plano="0"] .plano__img, .mov .plano__img { object-position: var(--pos); }
  .plano[data-plano="0"] .plano__quadro { height: 100svh; }
  /* o título mora no pé da foto: véu chapado sobre a foto inteira (sem degradê) */
  .plano[data-plano="0"] .plano__quadro::after {
    content: ""; position: absolute; inset: 0; background: rgb(20 17 16 / .5);
  }
  .topo {
    position: absolute; z-index: 30; top: 0; left: 0; height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 0 var(--m) var(--pe-texto);
  }
  .topo__titulo {
    font-stretch: 150%;
    /* "Rosário" mede 6,5em na largura 150; limitada também pela altura da tela */
    font-size: clamp(72px, min(11vw, 19vh), 200px);
  }
  .topo__apoio { margin-top: var(--passo); }
  .frase { max-width: calc((100% - 11 * var(--g)) / 12 * 9 + 8 * var(--g)); }
}

/* =====================================================================
   A CHEGADA com movimento: palco preso por sticky (sem pin)
   ===================================================================== */
.mov .chegada { height: calc(100svh + 220svh); }
.mov .palco {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  padding: 0; background: var(--fundo);
}
/* a fileira do estático some como caixa: os planos passam a ser do palco */
.mov .seq { display: contents; }
.mov .plano,
.mov .plano:not([data-plano="0"]) { margin: 0; }
.mov .plano__quadro,
.mov .plano:not([data-plano="0"]) .plano__quadro,
.mov .plano[data-plano="0"] .plano__quadro {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  aspect-ratio: auto; visibility: hidden;
}
.mov .plano[data-plano="0"] .plano__quadro::after { content: none; }
/* o primeiro fica na frente: as folhas dele se abrem e mostram o de trás */
.mov .plano[data-plano="0"] .plano__quadro { visibility: visible; z-index: 4; }
.mov .plano[data-plano="1"] .plano__quadro { z-index: 3; }
.mov .plano[data-plano="2"] .plano__quadro { z-index: 2; }
.mov .plano[data-plano="3"] .plano__quadro { z-index: 1; }

/* as duas folhas da porta: a mesma foto, cada uma mostrando a sua metade
   (recorte fixo; quem anda é o transform). A da esquerda passa 1 px do meio
   para não abrir fresta clara entre as duas em largura ímpar. */
/* a cor de espera vai com cada folha: no quadro, ela tamparia o vão da porta */
.mov .plano__quadro { background: none; }
.mov .folha { position: absolute; inset: 0; width: auto; height: auto; background: var(--espera); }
.mov .folha--esq { clip-path: inset(0 calc(50% - 1px) 0 0); }
.mov .folha--dir { display: block; clip-path: inset(0 0 0 50%); }
.mov .plano[data-plano="3"] .folha--esq { clip-path: none; }
.mov .plano__img { position: absolute; inset: 0; }
/* o quadro e as folhas do plano que está saindo são caixas transparentes por cima da foto de trás:
   não recebem o toque (o palco não tem nada clicável); só a foto, onde ela aparece de fato */
.mov .plano__quadro { pointer-events: none; }
.mov .plano__img { pointer-events: auto; }
.mov .plano__veu { display: block; position: absolute; inset: 0; background: var(--fundo); opacity: 0; }

/* véu de leitura do palco: Asfalto chapado sobre a foto inteira (sem degradê). As palavras moram
   no pé da tela e o logo da abertura voa por cima da foto, então o véu cobre tudo. Começa em 50%
   (topo, foto clara) e o hotel.js muda a força a cada porta, conforme a foto: 42% no Haru Joy à
   noite, 50% na fachada de dia, 30% na cama (fotos escuras não precisam do mesmo véu): o script
   anima a opacidade da camada (1 = 50%). */
.mov .palco__veu {
  display: block; position: absolute; z-index: 10; inset: 0; pointer-events: none;
  background: rgb(20 17 16 / .5);
}
/* EXCEÇÃO DO VÉU (BASE.md, colour.md §7): nas duas fotos de DIA (a aérea do topo e a fachada) o véu
   chapado apagava a foto inteira (brilho médio 91 para 64). Nelas o véu é UM degradê neutro de Asfalto,
   linear, duas paradas, só nos 45% de baixo, sob a frase e a legenda; nas de noite continua o chapado
   acima. O hotel.js troca uma camada pela outra junto com a porta. */
.mov .palco__veu-sob {
  display: block; position: absolute; z-index: 10; inset: 55% 0 0 0; pointer-events: none; opacity: 0;
  background: linear-gradient(to top, rgb(20 17 16 / .72), rgb(20 17 16 / 0)); /* taste-skill-ignore: véu neutro só sob o texto (colour.md §7) */
}

/* abertura: a porta fechada (Asfalto) com uma faixa de luz no vão; o hotel.js abre.
   A luz é uma faixa Cal chapada de 4 px, sem degradê e sem brilho. */
.mov .porta {
  display: block; position: absolute; z-index: 25; top: 0; bottom: 0;
  width: calc(50% + 1px); background: var(--fundo); will-change: transform;
}
.mov .porta--esq { left: 0; }
.mov .porta--dir { right: 0; }
.mov .porta__luz {
  display: block; position: absolute; z-index: 26; left: calc(50% - 1px); top: 16%;
  width: 4px; margin-left: -1px; height: 68%; pointer-events: none;
  background: var(--texto);
  animation: luz-entra .7s cubic-bezier(.2, .7, .2, 1) .1s backwards;
}
@keyframes luz-entra { from { opacity: 0; transform: scaleY(0); } }

/* LOGO DA ABERTURA (só quando o site abre por esta página): sobre o vão da porta,
   no meio da tela; o hotel.js o leva por transform até o logo do cabeçalho.
   Solto, sem pílula e sem halo: o véu do palco dá o fundo para ele ler. */
.mov.de-fora .abre-logo {
  display: block; position: absolute; z-index: 40; 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;
}

/* zona das palavras: no pé do palco, sobre o véu */
.mov .topo,
.mov .frase,
.mov .legenda {
  position: absolute; z-index: 30; left: var(--m); right: var(--m); margin: 0;
}
.mov .topo { top: auto; height: auto; display: block; bottom: var(--pe-texto); padding: 0; }
.mov .frase { bottom: var(--pe-texto); max-width: none; }
/* o título (z 30) fica por cima da frase e da legenda: enquanto os três moram no mesmo pé de tela,
   nada tampa o título (a frase só aparece depois que ele saiu) */
.mov .frase, .mov .legenda { z-index: 29; }
/* a legenda fica logo acima da frase (o hotel.js mede a altura dela em --frase-h) */
.mov .legenda {
  bottom: calc(var(--pe-texto) + var(--frase-h, 4em) + 20px);
  right: auto; width: fit-content; max-width: min(40ch, calc(100% - 2 * var(--m)));
  padding: 8px 14px; background: var(--veu-tarja);
  font-size: var(--t-corpo); opacity: 0; color: var(--texto);
}

/* antes do hotel.js montar, nada pisca. O cabeçalho só espera a abertura quando o logo vai voar até ele
   (html.de-fora); quem chega de outra página do site vê o cabeçalho entrar pelo CSS, sem esperar o JS */
.mov:not(.pronto) .topo,
.mov:not(.pronto) .frase { visibility: hidden; }
.mov.de-fora:not(.pronto) .cab { visibility: hidden; }
.mov:not(.de-fora) .cab { animation: cab-entra .7s ease .85s both; }
.mov .cab:focus-within { animation: none; }
@keyframes cab-entra { from { opacity: 0; } }

@media (min-width: 1024px) and (orientation: landscape) and (min-height: 540px) {
  .mov .chegada { height: calc(100svh + 200svh); }
  .mov .topo { right: auto; }
  .mov .frase {
    right: auto;
    width: calc((100% - 2 * var(--m) - 11 * var(--g)) / 12 * 9 + 8 * var(--g));
  }
  .mov .legenda { max-width: 36ch; }
}

/* =====================================================================
   2. QUARTOS: a foto inteira (largura da tela) e, embaixo, a fileira
      uniforme dos três itens: a diferença de tamanho é a intencional
   ===================================================================== */
.quartos { padding: var(--respiro) var(--m); }
/* a cabeça: "Quartos." em tamanho de título e a frase do cliente no tamanho de frase, o Wi-Fi e a reserva.
   A partir de 1200 px, lado a lado: o título nas colunas 1 a 7 ("Quartos." mede 5,27em: 607 px a
   1440, sobra uma coluna de ar) e o texto de 8 a 12. Abaixo, empilhados. */
.quartos__cabeca { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--passo); }
.quartos__titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 700;
  font-size: var(--t-titulo); line-height: .95; letter-spacing: -.012em;   /* tamanho de título (era display, 115 px): a frase do cliente pesa mais que o nome da seção */
}
.quartos__frase { max-width: 30ch; }
.quartos__p { margin-top: 8px; }
.quartos__acoes { margin-top: var(--passo); }
@media (min-width: 1200px) {
  .quartos__cabeca {
    grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: start;
  }
  .quartos__titulo { grid-column: 1 / span 7; }
  .quartos__texto { grid-column: 8 / -1; }
}
.quartos__grande { margin: var(--vao) calc(-1 * var(--m)) 0; }
.quartos__grande .quadro { --quadro-r: 4 / 3; }
.quartos__grande .kit-amplia::after { right: var(--m); bottom: 16px; z-index: 2; }
@media (min-width: 600px) { .quartos__grande .quadro { --quadro-r: 16 / 9; } }
/* a cortina: duas folhas de Piche fecham a foto e correm para os lados com a rolagem
   (hotel.js; só transform). Sem fio de luz no vão: as folhas fechadas somem no fundo. */
.cortina { display: none; }
/* as folhas levam o mesmo grão da seção: fechadas, somem no fundo em vez de virar uma caixa lisa */
.mov .cortina {
  display: block; position: absolute; z-index: 1; top: 0; bottom: 0; width: calc(50% + 1px);
  background: var(--grao), var(--fundo-2); pointer-events: none;
}
.mov .cortina--esq { left: 0; }
.mov .cortina--dir { right: 0; }
.quartos__itens { margin-top: var(--g); }
.item { margin: 0; }
/* a lupa (abaixo) aproxima o item que dá nome à foto: --foco é o ponto dele no quadro */
/* --zoom: recorte fixo mais fechado no item (o ar-condicionado do quarto 01 é pequeno na foto) */
.item__foto img { transform-origin: var(--foco, 50% 50%); transform: scale(var(--zoom, 1)); }
.item__nome {
  margin-top: 16px;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 650;
  font-size: var(--t-chamada); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance;
}
/* lupa: com o mouse, a foto se aproxima do ar-condicionado, da TV e das toalhas */
@media (hover: hover) and (pointer: fine) {
  .mov .item__foto img { transition: transform 1.1s var(--curva); }
  .mov .item:hover .item__foto img { transform: scale(calc(var(--zoom, 1) * 1.5)); }
}

/* =====================================================================
   3. MAIS FOTOS: galeria do kit (arrastável); no computador com
      movimento, presa: a rolagem leva as fotos para o lado (hotel.js)
   ===================================================================== */
.galeria { padding: var(--respiro) 0; }
.galeria__topo {
  padding: 0 var(--m);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}
.galeria__titulo { max-width: 12ch; }
/* "1 de 7": 15 px, Prata, junto do título (o hotel.js troca o número; no kit, pelo rolar do trilho) */
.galeria__conta {
  flex: none; margin: 0 0 .4em; color: var(--texto-2);
  font: 500 var(--t-legenda)/1.4 var(--f-texto); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.galeria__kit { margin-top: var(--vao); --kg-w: min(74vw, 420px); }
@media (min-width: 1024px) {
  .galeria__titulo { max-width: none; }
  .galeria__kit { --kg-w: clamp(300px, 28vw, 440px); }
}

/* presa (só palco largo com movimento; o hotel.js põe a classe e mede --percurso) */
.mov .galeria--presa { height: calc(100svh + var(--percurso, 0px)); padding: 0; }
.mov .galeria--presa .galeria__palco {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--cab-h) + 8px) 0 28px;
}
.galeria__atual { display: inline-block; }
.mov .galeria--presa .galeria__kit {
  margin-top: clamp(20px, 4vh, 44px);
  --kg-w: min(30vw, calc((100svh - 360px) * .8));
}
.mov .galeria--presa .kit-galeria__trilho {
  position: relative; overflow: visible; scroll-snap-type: none; cursor: default;
  padding-block: 0; will-change: transform;
}
.mov .galeria--presa .kit-galeria__pe { margin-top: clamp(14px, 3vh, 28px); }
/* o trilho preso passa das bordas da tela (anda por transform): o anel de foco dele seria
   cortado pela seção. O anel vai na caixa da galeria, por dentro, por cima das fotos.
   Só com :has() (@supports): sem ele, o anel do próprio trilho continua valendo. */
@supports selector(:has(*)) {
  .mov .galeria--presa .kit-galeria__trilho:focus-visible { outline: none; box-shadow:none; }
  /* o anel é um pseudo-elemento por cima do trilho (que anda por transform e cobria a borda de cima) */
  .mov .galeria--presa .galeria__kit:has(> .kit-galeria__trilho:focus-visible)::after {
    content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    outline: 3px solid var(--foco); outline-offset: -5px;
  }
}
/* a tampa de Asfalto que encolhe para a esquerda e mostra cada foto (criada pelo hotel.js) */
.galeria__tampa {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--grao), var(--fundo); transform-origin: 0 50%;
}

/* =====================================================================
   4. VIZINHOS: fileira uniforme de cinco (tira no celular)
   ===================================================================== */
.complexo { padding: var(--respiro) var(--m); }
.complexo__titulo { max-width: 14ch; }
.vizinhos { margin-top: var(--vao); }
.vizinho { position: relative; transition: opacity .35s ease; }
.vizinho__foto img { transition: transform .8s var(--curva); }
/* com movimento, cada foto chega fechada por duas folhas de porta (Piche) que se abrem
   uma atrás da outra quando a fileira entra na tela (o hotel.js põe .vizinhos--abertos).
   Transição só de transform. */
.mov .vizinho__foto::before,
.mov .vizinho__foto::after {
  content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; width: calc(50% + 1px);
  background: var(--grao), var(--fundo-2); pointer-events: none;
  transition: transform 1.1s cubic-bezier(.76, 0, .24, 1);
}
.mov .vizinho__foto::before { left: 0; }
.mov .vizinho__foto::after { right: 0; }
.mov .vizinhos--abertos .vizinho__foto::before { transform: translateX(-101%); }
.mov .vizinhos--abertos .vizinho__foto::after { transform: translateX(101%); }
.mov .vizinhos:not(.vizinhos--abertos) .vizinho__foto img { transform: scale(1.16); }
.mov .vizinhos--abertos .vizinho:nth-child(2) .vizinho__foto::before,
.mov .vizinhos--abertos .vizinho:nth-child(2) .vizinho__foto::after { transition-delay: .08s; }
.mov .vizinhos--abertos .vizinho:nth-child(3) .vizinho__foto::before,
.mov .vizinhos--abertos .vizinho:nth-child(3) .vizinho__foto::after { transition-delay: .16s; }
.mov .vizinhos--abertos .vizinho:nth-child(4) .vizinho__foto::before,
.mov .vizinhos--abertos .vizinho:nth-child(4) .vizinho__foto::after { transition-delay: .24s; }
.mov .vizinhos--abertos .vizinho:nth-child(5) .vizinho__foto::before,
.mov .vizinhos--abertos .vizinho:nth-child(5) .vizinho__foto::after { transition-delay: .32s; }
.vizinho__nome {
  margin-top: 16px;
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 650;
  font-size: var(--t-chamada); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance;
}
.vizinho__nome a { text-decoration: none; text-underline-offset: .14em; text-decoration-thickness: 2px; }
/* o cartão inteiro é o alvo do toque e do clique */
.vizinho__nome a::after { content: ""; position: absolute; inset: 0; }
.vizinho__desc { margin-top: 12px; font-size: var(--t-corpo); line-height: 1.45; text-wrap: pretty; }
.vizinho__hora { margin-top: 8px; font-size: var(--t-corpo); font-weight: 700; line-height: 1.45; }
.vizinho:hover .vizinho__nome a,
.vizinho:focus-within .vizinho__nome a { text-decoration-line: underline; text-decoration-color: var(--acento); }
/* no toque não há hover: o nome já chega com o mesmo sinal de link que o mouse mostra */
@media (hover: none) {
  .vizinho__nome a { text-decoration-line: underline; text-decoration-color: var(--acento); }
}
@media (hover: hover) and (pointer: fine) {
  .vizinhos:hover .vizinho:not(:hover) { opacity: .42; }
  .vizinho:hover .vizinho__foto img { transform: scale(1.06); }
}
@media (min-width: 1024px) {
  .complexo__titulo { max-width: none; }
}

/* =====================================================================
   5. PÁTIO: escopo de cinema (2,39:1 no computador) e duas fotos iguais;
      COMO CHEGAR: a ficha (onde, recepção, coordenadas)
   ===================================================================== */
.patio { padding: var(--respiro) var(--m); }
/* frase do cliente (HO09): as palavras não mudam. Coluna inteira e, só em celular estreito, o
   mesmo tamanho que a base dá às frases do cliente na faixa de contato (7,2vw: 28 px a 390) */
.patio__titulo { font-size: min(var(--t-titulo), 7.2vw); }
/* a 7,2vw "caminhão e carreta." mede 100,2% da coluna (344 px em 343, medido a 390): com a
   entrelinha de display (a do h1) cai para 337 px e fica em 2 linhas de 320 a 479 px */
@media (max-width: 479.98px) { .patio__titulo { letter-spacing: -.025em; } }
.patio__cinema { margin: var(--vao) calc(-1 * var(--m)) 0; }
.patio__moldura { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--espera); }
.patio__img {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 55% 45%;
}
/* com movimento a foto passa de lado (travelling): mais larga que o escopo */
.mov .patio__img { width: 124%; object-position: 50% 45%; }
/* e o escopo abre: duas faixas de Asfalto (em cima e embaixo) saem com a rolagem (só transform) */
.patio__faixa { display: none; }
.mov .patio__faixa {
  display: block; position: absolute; z-index: 1; left: 0; right: 0; height: 20%;
  background: var(--grao), var(--fundo); pointer-events: none;
}
.mov .patio__faixa--cima { top: 0; }
.mov .patio__faixa--baixo { bottom: 0; }
.patio__fotos { margin-top: var(--g); }
.patio__foto figcaption { margin-top: 12px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; text-wrap: pretty; }
@media (min-width: 1024px) {
  .patio__titulo { max-width: calc((100% - 11 * var(--g)) / 12 * 8 + 7 * var(--g)); }
  .patio__moldura { aspect-ratio: 2.39 / 1; }
}

/* COMO CHEGAR: a ficha e, ao lado (computador), o complexo visto da rodovia, na mesma medida
   das duas fotos de cima (fecha uma grade 2 × 2: foto, foto / ficha, foto). Abaixo de 1024 px,
   a foto vem embaixo da ficha, na coluna inteira.
   A ficha: sem fio acima, o espaço separa. Rótulo (dt, 15 px Prata) e valor (dd, corpo 700 Cal)
   na MESMA linha, em duas colunas que alinham as três linhas. */
.chegar { margin-top: var(--vao); }
.chegar__foto { margin: var(--vao) 0 0; }
.chegar__foto figcaption { margin-top: 12px; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.4; text-wrap: pretty; }
@media (min-width: 1024px) {
  .chegar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--g); align-items: start; }
  .chegar__foto { margin: 0; }
}
.chegar__titulo {
  font-family: var(--f-titulo); font-stretch: 112%; font-weight: 650;
  font-size: var(--t-chamada); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance;
}
.ficha { margin-top: var(--passo); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ficha__par { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); column-gap: 16px; align-items: baseline; }
.ficha__par dt { font: 500 var(--t-legenda)/1.4 var(--f-texto); color: var(--texto-2); }
.ficha__par dd { margin: 0; font-size: var(--t-corpo); font-weight: 700; line-height: 1.4; text-wrap: pretty; }
.chegar__acoes { margin-top: 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.chegar__copiar[hidden] { display: none; }
/* o link de rota também é alvo de toque de 44 px (o texto continua sublinhado como link) */
.chegar__acoes .link { display: inline-flex; align-items: center; min-height: 44px; }
.chegar__copiar svg { fill: none; stroke: currentColor; stroke-width: 2; }
.chegar__aviso { margin-top: 14px; min-height: 1.45em; color: var(--texto-2); font-size: var(--t-legenda); line-height: 1.45; }
@media (max-width: 1023.98px) {
  .chegar__acoes .botao { width: 100%; padding-inline: 12px; }
}
@media (min-width: 1024px) {
  .chegar__acoes { flex-direction: row; align-items: center; gap: 28px; }
}

/* =====================================================================
   6. CELULAR DEITADO (sempre estático): as medidas vêm da altura da tela
   ===================================================================== */
@media (orientation: landscape) and (max-height: 539px) {
  :root { --frase: min(3.4vw, 7svh, 30px); }
  .plano[data-plano="0"] .plano__img { object-position: var(--pos); }
  .plano[data-plano="0"] .plano__quadro { height: 70svh; }
  .topo__titulo { font-size: min(9vw, 15svh, 72px); }
  .frase { max-width: 40ch; }
  .patio__moldura { aspect-ratio: 2.39 / 1; }
}

/* =====================================================================
   7. REDUZIR MOVIMENTO: nada de transição (o estático já está no lugar)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .vizinho, .vizinho__foto img { transition: none; }
  .vizinho:hover .vizinho__foto img { transform: none; }
}