/* =========================================================
   Buffet Hullabaloo · buffet infantil no Jardim Flamboyant, Campinas
   Identidade: a própria fachada. O verde e o laranja da parede, as bolas amarelas,
   o trilho vinho do monotrilho, o sapo de gravata borboleta e o letreiro colorido.
   A placa azul de rua entra porque o slogan deles é "A diversão tem endereço certo".
   Grandstander (letras gordas de parque), Onest no texto e Overpass nas placas de rua.
   ========================================================= */
:root {
  --creme: #fff7e6;
  --papel: #fffdf6;
  --tinta: #17321f;
  --tinta-2: #45604d;
  --verde: #3cb44a;
  --verde-claro: #8fdc5e;
  --verde-escuro: #1d5a2c;
  --laranja: #f47321;
  --laranja-escuro: #c9531a;
  --amarelo: #ffc72c;
  --amarelo-escuro: #d99a00;
  --vermelho: #e2312b;
  --trilho: #8a1e2a;
  --noite: #2a1752;
  --noite-2: #3a2470;
  --placa: #1f4e9e;
  --placa-escura: #163a78;

  /* títulos como nas artes do Instagram deles (Montserrat pesada) */
  --f-titulo: "Montserrat", "Onest", system-ui, sans-serif;
  --f-letreiro: "Grandstander", "Montserrat", system-ui, sans-serif; /* só o HULLABALOO colorido, imitando o logo */
  --f-corpo: "Onest", system-ui, sans-serif;
  --f-placa: "Overpass", "Onest", system-ui, sans-serif;

  --borda: clamp(20px, 5vw, 76px);
  --topo-h: 76px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mola: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--f-corpo);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 3px;
  border-radius: 6px;
}

blockquote,
figure {
  margin: 0;
}

cite {
  font-style: normal;
}

/* itens tortos e animados não podem alargar a página no celular */
main > section {
  position: relative;
  overflow-x: clip;
}

/* ---------- Tipografia comum ---------- */
.titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: min(4.2vw, 7svh, 62px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* títulos que sobem linha a linha (SplitText): a máscara de cada linha ganha folga para o acento
   das maiúsculas (É, Ê) e as pernas do g, p, q e ç da Montserrat, sem mudar o espaço entre as linhas */
.ln-mask {
  padding: 0.16em 0 0.22em;
  margin: -0.16em 0 -0.22em;
}

.etiqueta {
  margin: 0;
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- Botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 12px 26px;
  border: 3px solid var(--tinta);
  border-radius: 16px;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
  text-decoration: none;
  text-align: center;
  transition: transform 0.25s var(--mola), box-shadow 0.25s var(--mola), background-color 0.2s, color 0.2s;
  cursor: pointer;
}

.botao:hover {
  transform: translateY(-2px);
}

.botao:active {
  transform: translateY(3px);
}

.botao--laranja {
  background: var(--laranja);
  color: #fff;
  box-shadow: 0 5px 0 var(--tinta);
}

.botao--laranja:hover,
.botao--contorno:hover {
  box-shadow: 0 7px 0 var(--tinta);
}

.botao--laranja:active,
.botao--escuro:active,
.botao--contorno:active {
  box-shadow: 0 1px 0 var(--tinta);
}

.botao--contorno {
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 5px 0 var(--tinta);
}

.botao--escuro {
  background: var(--tinta);
  color: var(--creme);
  box-shadow: 0 5px 0 #000;
}

.botao--topo {
  min-height: 46px;
  padding: 8px 20px;
  font-size: 17px;
  box-shadow: 0 4px 0 var(--tinta);
}

/* =========================================================
   O letreiro: as letras coloridas da fachada, com contorno verde e volume
   ========================================================= */
.letreiro {
  display: inline-flex;
  margin: 0;
  font-family: var(--f-letreiro);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.l {
  display: inline-block;
  color: var(--c);
  -webkit-text-stroke: 0.085em var(--tinta);
  paint-order: stroke fill;
  text-shadow: 0.02em 0.07em 0 var(--tinta), 0.03em 0.11em 0 var(--tinta);
}

.l--amarelo {
  --c: var(--amarelo);
}

.l--verde {
  --c: var(--verde-claro);
}

.l--vermelho {
  --c: #ff5a4e;
}

.l--laranja {
  --c: #ff8a3d;
}

/* =========================================================
   Abertura
   ========================================================= */
.abertura {
  display: none;
}

.abrindo .abertura {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--verde);
  overflow: hidden;
}

.abrindo .abertura::before {
  content: "";
  position: absolute;
  left: -12%;
  bottom: -34%;
  width: 92%;
  aspect-ratio: 1.4;
  border-radius: 46% 54% 40% 60%;
  background: var(--laranja);
}

.abrindo .abertura::after {
  content: "";
  position: absolute;
  right: 9%;
  top: 12%;
  width: min(14vw, 110px);
  aspect-ratio: 1;
  border: 5px solid var(--tinta);
  border-radius: 50%;
  background: var(--amarelo);
}

.abertura__miolo {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
}

.abertura__sapo {
  width: min(42vw, 250px);
  margin-bottom: -7%;
  filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff);
}

.letreiro--abertura {
  position: relative;
  font-size: min(12.5vw, 112px);
}

/* a placa escura atrás das letras, como na fachada (também esconde os pés do sapo) */
.letreiro--abertura,
.letreiro--hero,
.letreiro--rodape {
  padding: 0.13em 0.2em 0.03em 0.16em;
  line-height: 0.8;
  border-radius: 0.3em;
  background: var(--tinta);
  box-shadow: 0 0 0 0.045em var(--creme), 0 0.09em 0 0.045em #0b1d10;
}

.abrindo body {
  overflow: hidden;
}

/* =========================================================
   Topo
   ========================================================= */
.topo {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--topo-h);
  padding: 0 var(--borda);
  transition: transform 0.45s var(--ease), background-color 0.3s, box-shadow 0.3s;
}

.topo--solido {
  background: rgb(255 247 230 / 0.95);
  box-shadow: 0 3px 0 rgb(23 50 31 / 0.1);
  backdrop-filter: blur(8px);
}

.topo--oculto {
  transform: translateY(-100%);
}

.marca {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  text-decoration: none;
}

.marca__sapo {
  width: 50px;
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff);
  transition: transform 0.4s var(--mola);
}

.marca:hover .marca__sapo {
  transform: translateY(-4px) rotate(-8deg);
}

.letreiro--mini {
  font-size: 25px;
}

.nav {
  display: flex;
  gap: 26px;
}

.nav a {
  position: relative;
  font-weight: 600;
  font-size: 15.5px;
  text-decoration: none;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 3px;
  border-radius: 3px;
  background: var(--laranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.nav a:hover::after {
  transform: scaleX(1);
}

.nav__whats {
  display: none;
}

.menu-botao {
  display: none;
}

/* =========================================================
   1. Hero
   ========================================================= */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: 3vw;
  min-height: 100svh;
  padding: calc(var(--topo-h) + 1.5svh) var(--borda) 4svh;
}

.hero__onde {
  margin: 0 0 1.6svh;
  font-weight: 700;
  font-size: 15px;
  color: var(--verde-escuro);
}

.hero__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: min(6.4vw, 9.2svh, 100px); /* 4 linhas, como na arte deles: um pouco menor nas telas baixas */
  line-height: 0.94;
  letter-spacing: -0.035em;
}

/* a máscara de cada linha tem folga para o til em cima e a cedilha (com o contorno) embaixo */
.linha {
  display: block;
  overflow: hidden;
  padding: 0.04em 0.06em 0.22em 0;
  margin-bottom: -0.24em;
}

.linha > span {
  display: inline-block;
}

/* "endereço certo." na mesma fonte, só em laranja (como na arte deles do slogan) */
.hero__titulo .destaque {
  font-style: normal;
  color: var(--laranja);
  -webkit-text-stroke: 0.035em var(--tinta);
  paint-order: stroke fill;
}

.anima .hero__titulo .linha > span {
  transform: translateY(112%);
}

/* a placa azul de rua */
.placa-rua {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: 14px;
  margin: 2.6svh 0 0;
  padding: 10px 12px 9px 18px;
  border-radius: 10px;
  background: var(--placa);
  color: #fff;
  font-family: var(--f-placa);
  line-height: 1;
  box-shadow: inset 0 0 0 3px var(--placa), inset 0 0 0 5px #fff, 0 6px 0 var(--placa-escura), 0 14px 24px rgb(23 50 31 / 0.18);
  rotate: -2deg;
}

.placa-rua__nome {
  font-weight: 800;
  font-size: min(2.5vw, 4svh, 34px);
  letter-spacing: -0.01em;
}

.placa-rua__nome small {
  font-size: 0.62em;
  font-weight: 700;
}

.placa-rua__numero {
  grid-row: span 2;
  display: grid;
  place-items: center;
  min-width: 2.1em;
  padding: 0.2em 0.3em 0.12em;
  border-radius: 7px;
  background: #fff;
  color: var(--placa);
  font-weight: 800;
  font-size: min(2.5vw, 4svh, 34px);
}

.placa-rua__bairro {
  margin-top: 6px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.9;
}

.hero__apoio {
  max-width: 33em;
  margin: 2.8svh 0 0;
  font-size: min(18px, 2.3svh);
  color: var(--tinta-2);
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 3svh;
}

.provas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 3svh 0 0;
  padding: 0;
  list-style: none;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--tinta-2);
}

.provas li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.provas li + li::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--verde);
}

.provas strong {
  color: var(--tinta);
}

/* O palco: a parede verde e laranja, o trilho e o sapo em cima do letreiro */
.hero__palco {
  position: relative;
  container-type: inline-size;
  justify-self: center;
  width: min(100%, calc(80svh * 700 / 640));
  aspect-ratio: 700 / 640;
}

.fachada-tinta,
.trilho {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.fachada-tinta__verde {
  fill: var(--verde);
}

.fachada-tinta__laranja {
  fill: var(--laranja);
}

.fachada-tinta__bola {
  fill: var(--amarelo);
  stroke: var(--tinta);
  stroke-width: 5;
}

.trilho {
  z-index: 1;
}

.trilho path {
  fill: none;
  stroke-linecap: round;
}

.trilho__sombra {
  stroke: rgb(23 50 31 / 0.22);
  stroke-width: 24;
  transform: translate(6px, 12px);
}

.trilho__barra {
  stroke: var(--trilho);
  stroke-width: 20;
}

.trilho__brilho {
  stroke: #c8434f;
  stroke-width: 5;
  transform: translateY(-4px);
}

.sapo {
  position: absolute;
  z-index: 2;
  left: 19%;
  top: 9%;
  width: 60%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  /* contorno branco de adesivo (fica no pai: o GSAP mexe só na imagem) */
  filter: drop-shadow(0.9cqi 0 0 #fff) drop-shadow(-0.9cqi 0 0 #fff) drop-shadow(0 0.9cqi 0 #fff) drop-shadow(0 -0.9cqi 0 #fff)
    drop-shadow(0 2.4cqi 2cqi rgb(23 50 31 / 0.28));
}

.sapo__img {
  width: 100%;
}

.letreiro--hero {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 61%;
  translate: -50% 0;
  font-size: 12.4cqi;
}

/* =========================================================
   2. A fachada (por fora e por dentro)
   ========================================================= */
.fachada {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 2.6svh;
  min-height: 100svh;
  padding: calc(var(--topo-h) + 2svh) var(--borda) 4svh;
  background: var(--verde-escuro);
  color: var(--creme);
}

.fachada__texto {
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  align-items: end;
  gap: 1svh 4vw;
}

.fachada__texto .etiqueta {
  grid-column: 1 / -1;
  color: var(--amarelo);
}

.fachada__titulos {
  display: grid;
}

.fachada__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: min(3.9vw, 6.6svh, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.fachada__titulo--dentro {
  color: var(--verde-claro);
}

.fachada__recado p {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.25;
}

.fachada__recado cite {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.75;
}

.fachada__quadro {
  grid-row: 2;
  display: grid;
  gap: 14px;
}

.fachada__foto {
  width: 100%;
  border: 6px solid var(--creme);
  border-radius: 22px;
}

.fachada__veu {
  display: none;
}

/* Com animação e tela grande: as duas fotos ficam no mesmo quadro e a rolagem entra pela porta */
@media (min-width: 961px) {
  .anima .fachada__titulos > * {
    grid-area: 1 / 1;
  }

  .anima .fachada__quadro {
    position: relative;
    display: block;
    justify-self: center;
    align-self: start;
    height: 100%;
    max-width: 100%;
    aspect-ratio: 1800 / 972;
    border: 7px solid var(--creme);
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 24px 50px rgb(0 0 0 / 0.3);
  }

  .anima .fachada__foto {
    position: absolute;
    inset: 0;
    height: 100%;
    border: 0;
    border-radius: 0;
    object-fit: cover;
  }

  .anima .fachada__foto--fora {
    transform-origin: 80% 68%;
  }

  .anima .fachada__foto--dentro {
    object-position: 50% 64%;
    opacity: 0;
  }

  .anima .fachada__titulo--dentro,
  .anima .fachada__recado {
    opacity: 0;
  }
}

/* =========================================================
   3. Atrações (a roda gigante)
   ========================================================= */
.atracoes {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas:
    "roda cabeca"
    "roda vitrine";
  column-gap: 4vw;
  row-gap: 3.4svh;
  min-height: 100svh;
  padding: calc(var(--topo-h) + 2svh) var(--borda) 4svh;
  background: radial-gradient(120% 90% at 25% 60%, var(--noite-2), var(--noite) 70%);
  color: var(--creme);
}

.atracoes__cabeca {
  grid-area: cabeca;
  align-self: end;
}

.atracoes__cabeca .titulo {
  color: var(--amarelo);
}

.atracoes__apoio {
  max-width: 30em;
  margin: 2svh 0 0;
  font-size: min(18px, 2.3svh);
  opacity: 0.88;
}

/* todos os brinquedos à vista, nas cores das cestinhas */
.fichas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 7px;
  max-width: none;
  margin: 1.8svh 0 0;
  padding: 0;
  list-style: none;
}

.fichas button {
  padding: 0.5em 0.9em 0.42em;
  border: 2.5px solid var(--tinta);
  border-radius: 999px;
  background: var(--cor);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: min(15px, 1.95svh);
  line-height: 1;
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.4);
  cursor: pointer;
  transition: transform 0.35s var(--mola), box-shadow 0.2s;
}

.fichas button:hover {
  transform: translateY(-3px) rotate(-2deg);
}

.fichas button[aria-pressed="true"] {
  transform: translateY(-3px) scale(1.07);
  box-shadow: 0 0 0 3px var(--creme), 0 6px 0 rgb(0 0 0 / 0.4);
}

.fichas button:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}

.atracoes__corpo {
  display: contents;
}

.roda {
  grid-area: roda;
  align-self: center;
  display: grid;
  justify-items: center;
  gap: 1.4svh;
}

.roda__svg {
  width: min(100%, calc((100svh - var(--topo-h) - 9svh - 64px) * 600 / 640));
  height: auto;
  overflow: visible;
}

.roda__pe {
  fill: none;
  stroke: #f3e2c0;
  stroke-width: 16;
  stroke-linecap: round;
}

.roda__base {
  fill: #f3e2c0;
}

.roda__aro {
  fill: none;
  stroke: #ffe9b8;
  stroke-width: 12;
}

.roda__aro--dentro {
  stroke-width: 5;
  stroke: #f7c2e0;
}

.roda__raios line {
  stroke: #ffe9b8;
  stroke-width: 5;
}

.roda__lampadas circle {
  fill: var(--amarelo);
  animation: piscar 1.6s steps(2, jump-none) infinite;
}

.roda__lampadas circle:nth-child(even) {
  fill: #fff;
  animation-delay: 0.8s;
}

@keyframes piscar {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.35;
  }
}

.roda__eixo {
  fill: var(--verde);
  stroke: #ffe9b8;
  stroke-width: 8;
}

.cesta {
  cursor: pointer;
  outline: none;
}

.cesta__haste {
  stroke: #ffe9b8;
  stroke-width: 4;
}

.cesta__caixa {
  stroke: var(--tinta);
  stroke-width: 4;
}

.cesta__vidro {
  fill: rgb(255 255 255 / 0.6);
}

.cesta__txt {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 15px;
  fill: var(--tinta);
  text-anchor: middle;
  pointer-events: none;
}

.cesta:hover .cesta__caixa {
  stroke-width: 6;
}

.cesta:focus-visible .cesta__caixa {
  stroke: var(--amarelo);
  stroke-width: 6;
}

.cesta--ativa .cesta__caixa {
  stroke: #fff;
  stroke-width: 6;
}

.roda__botoes {
  display: flex;
  align-items: center;
  gap: 16px;
}

.roda__seta {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding: 0 0 4px;
  border: 3px solid var(--creme);
  border-radius: 50%;
  background: transparent;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--creme);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.3s var(--mola);
}

.roda__seta:hover {
  background: var(--creme);
  color: var(--noite);
  transform: scale(1.08);
}

.roda__conta {
  min-width: 4.5em;
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-align: center;
}

/* a foto ocupa todo o espaço que sobra embaixo do título (em paisagem, como foi tirada),
   com o nome por cima; um toque abre em tela cheia */
.vitrine {
  grid-area: vitrine;
  position: relative;
  justify-self: start;
  height: 100%;
  max-width: 100%;
  max-height: 480px;
  aspect-ratio: 16 / 10;
  rotate: -1.5deg;
  transition: rotate 0.45s var(--mola), scale 0.45s var(--mola);
}

.vitrine:hover {
  rotate: 0deg;
  scale: 1.015;
}

.vitrine__foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 7px solid var(--creme);
  border-radius: 22px;
  overflow: hidden;
  background: var(--noite-2);
  box-shadow: 0 20px 40px rgb(0 0 0 / 0.35);
  cursor: zoom-in;
}

.vitrine .lupa {
  top: 10px;
  bottom: auto;
}

.vitrine__texto {
  position: absolute;
  right: 7px;
  bottom: 7px;
  left: 7px;
  padding: 54px 22px 16px;
  border-radius: 0 0 15px 15px;
  background: linear-gradient(to top, rgb(26 12 56 / 0.94), rgb(26 12 56 / 0.62) 58%, rgb(26 12 56 / 0));
  pointer-events: none;
}

/* selo de "ver grande" no canto das fotos que abrem em tela cheia */
.lupa {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgb(23 50 31 / 0.74);
  color: #fff;
  pointer-events: none;
  transition: transform 0.35s var(--mola), background-color 0.2s;
}

.lupa svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button:hover > .lupa {
  transform: scale(1.14);
  background: var(--laranja);
}

.vitrine__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vitrine__n {
  margin: 0;
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.14em;
  color: var(--amarelo);
}

.vitrine__nome {
  margin: 4px 0 0;
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: min(2.7vw, 4.6svh, 42px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.vitrine__desc {
  max-width: 36em;
  margin: 0.9svh 0 0;
  font-size: min(16.5px, 2.1svh);
  opacity: 0.9;
}

/* sem a roda (script desligado), as atrações viram uma lista simples */
.atracoes__lista {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.atracoes__lista li::before {
  content: attr(data-nome);
  display: block;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 22px;
  color: var(--amarelo);
}

.atracoes.roda-pronta .atracoes__lista,
.atracoes:not(.roda-pronta) .roda,
.atracoes:not(.roda-pronta) .vitrine {
  display: none;
}

.atracoes:not(.roda-pronta) {
  grid-template-areas: "cabeca cabeca";
}

/* =========================================================
   4. Os dois lados (salão e brinquedos)
   ========================================================= */
.lados {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 4.5vw;
  min-height: 100svh;
  padding: calc(var(--topo-h) + 2svh) var(--borda) 5svh;
  background: var(--creme);
}

.lados__apoio {
  max-width: 31em;
  margin: 2.6svh 0 0;
  font-size: min(18px, 2.3svh);
  color: var(--tinta-2);
}

.lados__apoio em {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-style: normal;
  color: var(--laranja-escuro);
}

.recado--grande {
  position: relative;
  margin-top: 3.4svh;
  padding: 2.4svh 26px 2.4svh 28px;
  border: 3px solid var(--tinta);
  border-radius: 18px;
  background: var(--papel);
  box-shadow: 6px 6px 0 var(--verde);
}

.recado--grande p {
  margin: 0;
  font-size: min(17px, 2.2svh);
  line-height: 1.5;
}

.recado--grande cite {
  display: block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--verde-escuro);
}

.lados__extra {
  margin: 2.6svh 0 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: min(21px, 2.7svh);
}

.lados__extra cite {
  margin-left: 6px;
  font-family: var(--f-corpo);
  font-weight: 700;
  font-size: 14px;
  color: var(--verde-escuro);
}

.comparador {
  position: relative;
  height: min(76svh, 680px);
  border: 4px solid var(--tinta);
  border-radius: 26px;
  overflow: hidden;
  background: var(--tinta);
  box-shadow: 10px 10px 0 var(--laranja);
  user-select: none;
}

.comparador__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.comparador__foto--brinquedos {
  clip-path: inset(0 0 0 var(--corte));
}

.comparador__placa {
  position: absolute;
  bottom: 18px;
  z-index: 2;
  padding: 8px 14px 7px;
  border-radius: 9px;
  background: var(--placa);
  color: #fff;
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.1;
  box-shadow: inset 0 0 0 2px var(--placa), inset 0 0 0 4px #fff;
  pointer-events: none;
}

.comparador__placa--salao {
  left: 18px;
}

.comparador__placa--brinquedos {
  right: 18px;
  background: var(--laranja-escuro);
  box-shadow: inset 0 0 0 2px var(--laranja-escuro), inset 0 0 0 4px #fff;
}

.comparador__divisa {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--corte);
  z-index: 3;
  width: 6px;
  margin-left: -3px;
  background: var(--creme);
  box-shadow: 0 0 0 2px var(--tinta);
  pointer-events: none;
}

.comparador__alca {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border: 4px solid var(--tinta);
  border-radius: 50%;
  background: var(--amarelo);
  box-shadow: 0 6px 0 var(--tinta);
}

.comparador__alca::before,
.comparador__alca::after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -9px;
  border: 9px solid transparent;
}

.comparador__alca::before {
  left: -28px;
  border-right: 12px solid var(--creme);
}

.comparador__alca::after {
  right: -28px;
  border-left: 12px solid var(--creme);
}

.comparador__alca img {
  width: 50px;
}

.comparador__controle {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  touch-action: pan-y;
}

.comparador:has(.comparador__controle:focus-visible) .comparador__alca {
  outline: 4px solid var(--laranja);
  outline-offset: 4px;
}

/* =========================================================
   4b. Passeio (as fotos do espaço, grandes, uma por vez)
   ========================================================= */
.passeio {
  display: grid;
  grid-template-columns: minmax(250px, 0.62fr) minmax(0, 1.9fr);
  grid-template-areas:
    "texto palco"
    "estacoes estacoes";
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: clamp(28px, 3.4vw, 56px);
  row-gap: 2.4svh;
  height: 100svh;
  min-height: 600px;
  padding: calc(var(--topo-h) + 2svh) var(--borda) 3svh;
  background: radial-gradient(110% 90% at 72% 35%, #24502f, var(--tinta) 72%);
  color: var(--creme);
}

.passeio .etiqueta {
  color: var(--verde-claro);
}

.passeio .titulo {
  margin-top: 1.4svh;
}

.passeio__texto {
  grid-area: texto;
  align-self: center;
}

.passeio__apoio {
  max-width: 22em;
  margin: 1.8svh 0 0;
  font-size: min(17px, 2.2svh);
  opacity: 0.85;
}

.passeio__legenda {
  margin-top: 3.4svh;
  padding-top: 3svh;
  border-top: 2px dashed rgb(255 247 230 / 0.25);
}

.passeio__n {
  margin: 0;
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--amarelo);
}

.passeio__nome {
  margin: 6px 0 0;
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: min(2.8vw, 4.8svh, 44px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--amarelo);
}

.passeio__desc {
  max-width: 21em;
  margin: 1.4svh 0 0;
  font-size: min(17px, 2.2svh);
  opacity: 0.9;
}

/* o quadro da foto: no computador ganha o formato de cada foto (o script mede) */
.passeio__palco {
  grid-area: palco;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  height: 100%;
}

.palco {
  position: relative;
  width: 100%;
  height: 100%;
  transition: width 0.6s var(--ease), height 0.6s var(--ease);
}

.palco__foto {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 7px solid var(--creme);
  border-radius: 22px;
  overflow: hidden;
  background: #0f2416;
  box-shadow: 0 26px 50px rgb(0 0 0 / 0.45);
  cursor: zoom-in;
  touch-action: pan-y;
}

/* fundo: a própria foto, borrada, para quando ela não ocupa o quadro inteiro */
.palco__fundo {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  max-width: none;
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(24px) brightness(0.55) saturate(1.2);
}

.palco__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.palco__seta {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0 0 4px;
  border: 3px solid var(--tinta);
  border-radius: 50%;
  background: var(--creme);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  box-shadow: 0 4px 0 var(--tinta);
  translate: 0 -50%;
  cursor: pointer;
  transition: transform 0.3s var(--mola), background-color 0.2s;
}

.palco__seta:hover {
  background: var(--amarelo);
  transform: scale(1.08);
}

.palco__seta--ant {
  left: -24px;
}

.palco__seta--prox {
  right: -24px;
}

/* as paradas: o trilho vinho, o carrinho pendurado e as fotos pequenas embaixo */
.estacoes {
  grid-area: estacoes;
  min-width: 0;
}

.estacoes__linha {
  position: relative;
  padding-top: 48px;
}

.estacoes__linha::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: 4px;
  background: var(--trilho);
  box-shadow: 0 3px 0 rgb(0 0 0 / 0.35);
}

.estacoes__carrinho {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 54px;
  translate: -50% 0;
  transition: left 0.8s var(--ease);
  pointer-events: none;
}

.estacoes__carrinho svg {
  display: block;
  width: 100%;
  height: auto;
}

.estacoes__lista {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.estacao {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--creme);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: min(13.5px, 1.8svh);
  line-height: 1.1;
  text-align: center;
  cursor: pointer;
}

.estacao img {
  width: 100%;
  max-height: 11svh;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid rgb(255 247 230 / 0.45);
  border-radius: 12px;
  opacity: 0.7;
  transition: opacity 0.25s, border-color 0.25s, transform 0.4s var(--mola);
}

.estacao:hover img {
  opacity: 1;
  transform: translateY(-3px);
}

.estacao[aria-pressed="true"] img {
  border-color: var(--amarelo);
  opacity: 1;
  transform: translateY(-5px) scale(1.04);
}

.estacao[aria-pressed="true"] span {
  color: var(--amarelo);
}

@media (max-width: 960px) {
  .passeio {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
    grid-template-rows: none;
    row-gap: 0;
    height: auto;
    min-height: 0;
    padding: 64px var(--borda) 52px;
  }

  .passeio__texto {
    display: contents;
  }

  .passeio .etiqueta {
    order: 0;
  }

  .passeio .titulo {
    order: 1;
  }

  .passeio__apoio {
    order: 2;
    font-size: 16.5px;
  }

  .passeio__palco {
    order: 3;
    grid-area: auto;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    margin-top: 22px;
  }

  .palco {
    aspect-ratio: 4 / 3;
    height: auto;
  }

  .palco__seta {
    width: 42px;
    height: 42px;
    font-size: 26px;
  }

  .palco__seta--ant {
    left: 8px;
  }

  .palco__seta--prox {
    right: 8px;
  }

  .passeio__legenda {
    order: 4;
    margin-top: 18px;
    padding-top: 0;
    border-top: 0;
  }

  .passeio__nome {
    font-size: 30px;
  }

  .passeio__desc {
    font-size: 16px;
  }

  /* no celular as paradas rolam de lado */
  .estacoes {
    order: 5;
    grid-area: auto;
    margin: 22px calc(var(--borda) * -1) 0;
    padding: 0 var(--borda) 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .estacoes::-webkit-scrollbar {
    display: none;
  }

  .estacoes__linha {
    width: max-content;
  }

  .estacoes__lista {
    grid-template-columns: repeat(12, 92px);
    gap: 10px;
  }

  .estacao {
    font-size: 13px;
  }

  .estacao img {
    max-height: none;
  }
}

/* =========================================================
   5. Cardápio (a tampa da bandeja)
   ========================================================= */
.cardapio {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: center;
  gap: 4vw;
  min-height: 100svh;
  padding: calc(var(--topo-h) + 2svh) var(--borda) 5svh;
  background: var(--laranja);
  color: var(--tinta);
}

.cardapio__apoio {
  max-width: 30em;
  margin: 2.4svh 0 0;
  font-size: min(18px, 2.3svh);
  font-weight: 500;
}

/* duas fotos deles, como polaroides largadas na mesa */
.cardapio__fotos {
  display: flex;
  align-items: flex-start;
  width: min(100%, calc((100svh - var(--topo-h) - 430px) * 1.7));
  margin-top: 3.4svh;
}

.cardapio__foto {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 10px 10px 0;
  border: 0;
  color: var(--tinta);
  text-align: center;
  cursor: zoom-in;
  background: var(--papel);
  box-shadow: 0 16px 30px rgb(23 50 31 / 0.28);
  rotate: -4deg;
  transition: rotate 0.5s var(--mola), translate 0.5s var(--mola);
}

.cardapio__foto + .cardapio__foto {
  margin: 6% 0 0 -7%;
  rotate: 3.5deg;
}

.cardapio__foto:hover {
  z-index: 1;
  rotate: 0deg;
  translate: 0 -6px;
}

.cardapio__foto img {
  width: 100%;
  aspect-ratio: 4 / 3.3;
  object-fit: cover;
}

.cardapio__foto span {
  display: block;
  padding: 8px 4px 10px;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

.cardapio__album {
  gap: 9px;
  min-height: 46px;
  margin-top: 2.6svh;
  padding: 8px 18px;
  font-size: 16px;
}

.cardapio__album svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.bandeja:not(.bandeja--fechada) .bandeja__foto {
  cursor: zoom-in;
}

.bandeja {
  display: grid;
  justify-items: center;
  gap: 1.8svh;
}

/* margem em cima: espaço para a tampa subir sem bater no topo */
.bandeja__mesa {
  position: relative;
  width: min(100%, 42svh, 440px);
  aspect-ratio: 1 / 0.86;
  margin-top: 9svh;
}

/* a toalha de bolinhas por baixo do prato */
.bandeja__mesa::before {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -6%;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(23 50 31 / 0.16) 0 6px, transparent 7px) 0 0 / 30px 30px, var(--laranja-escuro);
}

.bandeja__prato {
  position: absolute;
  inset: 0;
}

.bandeja__comida {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 2%;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 0.6;
  border: 4px solid var(--tinta);
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0 64%, #e9edf1 65% 72%, #fff 73%);
  box-shadow: 0 9px 0 var(--tinta);
}

.bandeja__miolo {
  display: grid;
  justify-items: center;
  gap: 6px;
  max-width: 78%;
}

/* a foto do prato (fundo recortado) fica em cima do prato, por baixo da tampa */
.bandeja__foto {
  position: absolute;
  left: 50%;
  bottom: 19%;
  width: 82%;
  height: 62%;
  object-fit: contain;
  object-position: 50% 100%;
  translate: -50% 0;
  filter: drop-shadow(0 12px 10px rgb(23 50 31 / 0.3));
  transition: opacity 0.2s;
}

.bandeja__foto[hidden] {
  display: none;
}

.bandeja--fechada .bandeja__foto {
  opacity: 0;
}

.bandeja__legenda {
  display: grid;
  justify-items: center;
  gap: 0.8svh;
  min-height: calc(min(34px, 4.2svh) + 6.4em);
  transition: opacity 0.35s;
}

.bandeja__nome {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: min(34px, 4.2svh);
  line-height: 1;
  text-align: center;
  color: var(--papel);
  text-shadow: 0 3px 0 var(--tinta);
  text-wrap: balance;
}

.bandeja__marmita {
  width: min(9vw, 110px);
}

.bandeja__tampa {
  position: absolute;
  left: 4%;
  bottom: 17%;
  width: 92%;
  overflow: visible;
  pointer-events: none;
}

html:not(.anima) .bandeja__tampa {
  transform: translate(46%, -40%) rotate(16deg) scale(0.5);
}

.bandeja__recado {
  max-width: 27em;
  margin: 0;
  text-align: center;
}

.bandeja__recado[hidden] {
  display: none;
}

.bandeja--fechada .bandeja__legenda,
.bandeja--fechada .bandeja__miolo {
  opacity: 0;
}

.bandeja__miolo {
  transition: opacity 0.2s;
}

.bandeja__recado p {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: min(22px, 2.9svh);
  line-height: 1.25;
  text-wrap: balance;
}

.bandeja__recado cite {
  display: block;
  margin-top: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--papel);
}

.bandeja__controles {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* os pratinhos: escolha direto o prato que vai para baixo da tampa */
.pratinhos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
}

.pratinho {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 5px;
  border: 3px solid var(--tinta);
  border-radius: 50%;
  background: var(--papel);
  box-shadow: 0 3px 0 var(--tinta);
  cursor: pointer;
  transition: transform 0.35s var(--mola), background-color 0.2s, box-shadow 0.2s;
}

.pratinho img,
.pratinho svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pratinho:hover {
  transform: translateY(-4px) rotate(-6deg);
}

.pratinho[aria-pressed="true"] {
  background: var(--amarelo);
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 5px 0 var(--tinta);
}

.pratinho:focus-visible {
  outline: 3px solid var(--papel);
  outline-offset: 3px;
}

/* sem script: a lista de pratos aparece inteira e a bandeja some */
.cardapio__lista {
  display: none;
}

html:not(.js) .bandeja {
  display: none;
}

html:not(.js) .cardapio__lista {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html:not(.js) .cardapio__lista li::before {
  content: attr(data-nome);
  display: block;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 22px;
}

/* =========================================================
   5b. Decoração (o mesmo salão, um tema por festa)
   ========================================================= */
/* o fundo da seção acompanha o tema da vez (as cores ficam em cada botão) */
.decoracao {
  --tema: #cfe9fb;
  --tema-forte: #3aa6e8;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 4vw;
  min-height: 100svh;
  padding: calc(var(--topo-h) + 2.5svh) var(--borda) 5svh;
  overflow: hidden;
  background: var(--tema);
  color: var(--tinta);
  transition: background-color 0.9s var(--ease);
}

.decoracao__apoio {
  max-width: 28em;
  margin: 2.4svh 0 0;
  font-size: min(18px, 2.3svh);
  font-weight: 500;
}

/* a lista dos temas: miniatura e nome; a barrinha do tema da vez enche até a foto trocar */
.temas {
  display: grid;
  gap: 0.5svh;
  margin: 3.2svh 0 0;
  padding: 0;
  list-style: none;
}

.tema {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0.55svh 0;
  border: 0;
  background: none;
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: min(25px, 3.2svh);
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.3s, translate 0.45s var(--mola);
}

.tema img {
  flex: none;
  width: min(60px, 7svh);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 3px solid var(--tinta);
  border-radius: 10px;
  transition: box-shadow 0.35s var(--mola);
}

.tema span {
  position: relative;
  padding-bottom: 7px;
}

.tema span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  border-radius: 4px;
  background: var(--forte-tema);
  transform: scaleX(0);
  transform-origin: left;
}

.tema:hover,
.tema:focus-visible {
  opacity: 0.85;
}

.tema:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 4px;
  border-radius: 8px;
}

.tema[aria-pressed="true"] {
  opacity: 1;
  translate: 12px 0;
}

.tema[aria-pressed="true"] img {
  box-shadow: 5px 5px 0 var(--forte-tema);
}

.tema[aria-pressed="true"] span::after {
  animation: tema-tempo 5.5s linear forwards;
}

.decoracao.pausada .tema span::after {
  animation-play-state: paused;
}

/* sem troca automática (movimento reduzido): a barrinha fica cheia no tema escolhido */
.decoracao.parada .tema[aria-pressed="true"] span::after {
  animation: none;
  transform: scaleX(1);
}

@keyframes tema-tempo {
  to {
    transform: scaleX(1);
  }
}

/* o palco: a mesma parede, a decoração troca por cima */
.decoracao__palco {
  position: relative;
  justify-self: center;
  width: min(100%, calc((100svh - var(--topo-h) - 16svh) * 4 / 3));
}

.decoracao__foto {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 4px solid var(--tinta);
  border-radius: 26px;
  overflow: hidden;
  background: var(--tinta);
  box-shadow: 12px 12px 0 var(--tema-forte);
  rotate: 1.2deg;
  cursor: zoom-in;
  transition: box-shadow 0.9s var(--ease), rotate 0.45s var(--mola), scale 0.45s var(--mola);
}

.decoracao__foto:hover {
  rotate: 0deg;
  scale: 1.012;
}

.decoracao__foto:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 6px;
}

/* a que sai espera a nova cobrir antes de sumir (sem piscar o fundo) */
.decoracao__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  scale: 1.05;
  transition: opacity 0.4s 0.75s, scale 1.4s var(--ease);
}

.decoracao__img.ativa {
  z-index: 1;
  opacity: 1;
  scale: 1;
  transition: opacity 0.75s var(--ease), scale 1.4s var(--ease);
}

.decoracao__placa {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 2;
  padding: 8px 14px 7px;
  border-radius: 9px;
  background: var(--placa);
  color: #fff;
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.1;
  box-shadow: inset 0 0 0 2px var(--placa), inset 0 0 0 4px #fff;
  pointer-events: none;
}

/* o selo da cortesia, girando devagar no canto da foto */
.selo {
  position: absolute;
  top: -54px;
  right: -40px;
  z-index: 3;
  width: 146px;
  height: 146px;
  rotate: 8deg;
  overflow: visible;
  filter: drop-shadow(5px 5px 0 var(--tinta));
  pointer-events: none;
}

.selo__fundo {
  fill: var(--amarelo);
  stroke: var(--tinta);
  stroke-width: 3;
}

.selo__miolo {
  fill: var(--papel);
  stroke: var(--tinta);
  stroke-width: 3;
}

.selo__txt {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 10.5px;
  fill: var(--tinta);
}

.selo__giro {
  transform-origin: 70px 70px;
  animation: selo-gira 24s linear infinite;
}

@keyframes selo-gira {
  to {
    transform: rotate(360deg);
  }
}

/* =========================================================
   6. Avaliações (a máquina de tickets)
   ========================================================= */
.avaliacoes {
  --maq-h: min(58svh, 520px);
  display: grid;
  align-content: center;
  gap: 3.4svh;
  min-height: 100svh;
  padding: calc(var(--topo-h) + 2svh) var(--borda) 5svh;
  background: var(--amarelo);
}

.avaliacoes__cabeca {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  align-items: end;
  gap: 4vw;
}

.avaliacoes__apoio {
  margin: 0;
  font-size: min(18px, 2.3svh);
  font-weight: 500;
}

.fliper {
  display: flex;
  align-items: flex-start;
}

.maquina {
  position: relative;
  z-index: 2;
  flex: none;
  display: grid;
  grid-template-rows: auto auto 1fr;
  justify-items: center;
  gap: calc(var(--maq-h) * 0.05);
  width: calc(var(--maq-h) * 0.6);
  height: var(--maq-h);
  padding: calc(var(--maq-h) * 0.05) 22px 0;
  border: 5px solid var(--tinta);
  border-radius: 46px 46px 14px 14px;
  background: linear-gradient(90deg, rgb(0 0 0 / 0.12), transparent 18% 82%, rgb(0 0 0 / 0.14)), var(--vermelho);
  box-shadow: 10px 10px 0 var(--tinta);
}

.maquina__topo {
  display: flex;
  gap: 14px;
}

.maquina__luz {
  width: 20px;
  height: 20px;
  border: 3px solid var(--tinta);
  border-radius: 50%;
  background: var(--amarelo);
  animation: piscar 1.2s steps(2, jump-none) infinite;
}

.maquina__luz:nth-child(2) {
  animation-delay: 0.4s;
  background: #fff;
}

.maquina__luz:nth-child(3) {
  animation-delay: 0.8s;
}

.maquina__visor {
  display: grid;
  justify-items: center;
  width: 100%;
  padding: calc(var(--maq-h) * 0.035) 10px;
  border: 4px solid var(--tinta);
  border-radius: 14px;
  background: #15102b;
  color: var(--amarelo);
  box-shadow: inset 0 0 22px rgb(255 199 44 / 0.25);
}

.maquina__nota {
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: calc(var(--maq-h) * 0.15);
  line-height: 0.95;
  text-shadow: 0 0 14px rgb(255 199 44 / 0.7);
}

.maquina__estrelas {
  font-size: calc(var(--maq-h) * 0.04);
  letter-spacing: 0.12em;
}

.maquina__total {
  margin-top: 4px;
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffe9b8;
}

.maquina__botao {
  align-self: start;
  display: grid;
  place-items: center;
  width: calc(var(--maq-h) * 0.26);
  aspect-ratio: 1;
  margin-top: calc(var(--maq-h) * 0.02);
  padding: 8px;
  border: 5px solid var(--tinta);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff3b0 0 12%, var(--amarelo) 38%, var(--amarelo-escuro));
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: max(13px, calc(var(--maq-h) * 0.034));
  line-height: 1;
  text-align: center;
  box-shadow: 0 9px 0 var(--tinta);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.maquina__botao:hover {
  transform: translateY(-2px);
  box-shadow: 0 11px 0 var(--tinta);
}

.maquina__botao:active {
  transform: translateY(7px);
  box-shadow: 0 2px 0 var(--tinta);
}

/* a boca de onde os tickets saem */
.maquina__boca {
  position: absolute;
  right: -5px;
  top: calc(var(--maq-h) * 0.5);
  width: 18px;
  height: calc(var(--maq-h) * 0.34);
  border-radius: 6px 0 0 6px;
  background: #15102b;
  box-shadow: inset 4px 0 0 rgb(255 255 255 / 0.15);
}

.saida {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  height: var(--maq-h);
}

.tickets {
  position: relative;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticket {
  --px: 0px;
  --py: 0px;
  --pr: 0deg;
  position: absolute;
  left: -8px;
  top: calc(var(--maq-h) * 0.5 + 8px);
  width: min(100%, 660px);
  padding: 22px 34px 20px 72px;
  background: #ffe3ee;
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 15px, #000 16px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 15px, #000 16px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle at 0 50%, transparent 15px, #000 16px) left / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, transparent 15px, #000 16px) right / 51% 100% no-repeat;
  transform: translate(-100%, 0);
  clip-path: inset(0 0 0 100%);
  opacity: 0;
  transition: transform 1s var(--ease), clip-path 1s var(--ease), opacity 0.25s;
}

/* o canhoto: a picotada e o nome impresso de lado */
.ticket::before {
  content: "HULLABALOO";
  position: absolute;
  left: 25px;
  top: 50%;
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--vermelho);
  white-space: nowrap;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.ticket::after {
  content: "";
  position: absolute;
  left: 48px;
  top: 10px;
  bottom: 10px;
  border-left: 2px dashed rgb(23 50 31 / 0.35);
}

.ticket:nth-child(3n + 2) {
  background: #fff0bd;
}

.ticket:nth-child(3n) {
  background: #dcf3cf;
}

.ticket p {
  margin: 4px 0 0;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: min(23px, 2.9svh);
  line-height: 1.28;
}

.ticket cite {
  display: block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--tinta-2);
}

.ticket__estrelas {
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--laranja);
}

.ticket.atual {
  z-index: 30;
  transform: none;
  clip-path: inset(-30px);
  opacity: 1;
}

/* os que já saíram caem na pilha, tortos */
.ticket.foi {
  clip-path: inset(-30px);
  opacity: 1;
  transform: translate(var(--px), var(--py)) rotate(var(--pr));
}

.ticket.foi-velho {
  opacity: 0;
}

/* na pilha só aparece o papel */
.ticket > * {
  transition: opacity 0.4s;
}

.ticket.foi > * {
  opacity: 0;
}

html:not(.js) .tickets {
  height: auto;
}

html:not(.js) .saida {
  height: auto;
}

html:not(.js) .ticket {
  position: relative;
  top: 0;
  margin-bottom: 12px;
  transform: none;
  clip-path: none;
  opacity: 1;
}

/* =========================================================
   7. Orçamento (a placa da festa)
   ========================================================= */
.orcamento {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  align-items: center;
  gap: 4vw;
  min-height: 100svh;
  padding: calc(var(--topo-h) + 2svh) var(--borda) 4svh;
  background: var(--verde-claro);
}

.orcamento__apoio {
  max-width: 32em;
  margin: 1.8svh 0 0;
  font-size: min(18px, 2.3svh);
  font-weight: 500;
}

.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2.2svh 22px;
  margin-top: 3svh;
  padding: 2.8svh 28px;
  border: 4px solid var(--tinta);
  border-radius: 22px;
  background: var(--papel);
  box-shadow: 8px 8px 0 var(--verde-escuro);
}

.campo {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.campo > span,
.campo legend {
  padding: 0;
  font-weight: 700;
  font-size: 14.5px;
}

.campo legend {
  margin-bottom: 7px;
}

.campo input[type="text"],
.campo input[type="date"] {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 3px solid var(--tinta);
  border-radius: 12px;
  background: #fff;
  font-size: 16.5px;
}

.campo input:focus-visible {
  outline: 3px solid var(--laranja);
  outline-offset: 1px;
}

.contador {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
}

.contador button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0 0 3px;
  border: 3px solid var(--tinta);
  border-radius: 12px;
  background: var(--amarelo);
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--tinta);
}

.contador button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--tinta);
}

.contador output {
  min-width: 1.6em;
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: 30px;
  text-align: center;
}

.contador small {
  font-weight: 600;
  font-size: 15px;
}

.pilulas {
  display: flex;
  gap: 8px;
}

.pilulas label {
  flex: 1;
}

.pilulas input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pilulas span {
  display: grid;
  place-items: center;
  min-height: 50px;
  padding: 6px 8px;
  border: 3px solid var(--tinta);
  border-radius: 12px;
  background: #fff;
  font-weight: 700;
  font-size: 15px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.pilulas input:checked + span {
  background: var(--placa);
  color: #fff;
}

.pilulas input:focus-visible + span {
  outline: 3px solid var(--laranja);
  outline-offset: 2px;
}

.campo--convidados {
  grid-column: 1 / -1;
}

.campo--convidados output {
  font-weight: 800;
  color: var(--verde-escuro);
}

.campo input[type="range"] {
  width: 100%;
  height: 30px;
  margin: 0;
  accent-color: var(--laranja);
  cursor: pointer;
}

.visita {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
  font-size: 15.5px;
  cursor: pointer;
}

.visita input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--verde-escuro);
  cursor: pointer;
}

.ficha__enviar {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.ficha__status {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--tinta-2);
}

/* o poste com a placa da festa */
.poste {
  position: relative;
  display: grid;
  justify-items: center;
  align-self: stretch;
  align-content: center;
}

.placa-festa {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: start;
  width: min(100%, 440px);
  padding: 24px 30px 20px;
  border-radius: 16px;
  background: var(--placa);
  color: #fff;
  font-family: var(--f-placa);
  line-height: 1;
  box-shadow: inset 0 0 0 5px var(--placa), inset 0 0 0 8px #fff, 0 8px 0 var(--placa-escura), 0 22px 40px rgb(23 50 31 / 0.3);
  transform-origin: 50% 0;
}

.placa-festa__parafuso {
  position: absolute;
  top: 14px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c8d3e6;
  box-shadow: inset -2px -2px 0 rgb(0 0 0 / 0.25);
}

.placa-festa__parafuso:first-child {
  left: 16px;
}

.placa-festa__parafuso:nth-child(2) {
  right: 16px;
}

.placa-festa__de {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.9;
}

.placa-festa__nome {
  max-width: 100%;
  margin-top: 8px;
  font-weight: 800;
  font-size: min(3.5vw, 5.8svh, 50px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.placa-festa__idade {
  position: absolute;
  right: -18px;
  top: -24px;
  display: grid;
  place-content: center;
  width: 84px;
  height: 84px;
  border: 4px solid var(--tinta);
  border-radius: 50%;
  background: var(--amarelo);
  color: var(--tinta);
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: 32px;
  line-height: 0.85;
  text-align: center;
  rotate: 10deg;
}

.placa-festa__idade small {
  display: block;
  font-size: 14px;
}

.placa-festa__idade:empty {
  display: none;
}

.placa-festa__linha {
  width: 100%;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px solid rgb(255 255 255 / 0.5);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 0.04em;
}

.placa-cep {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  margin-top: 16px;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--placa);
  color: #fff;
  font-family: var(--f-placa);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-align: center;
  box-shadow: inset 0 0 0 3px var(--placa), inset 0 0 0 5px #fff, 0 5px 0 var(--placa-escura);
}

.placa-cep span:first-child {
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
}

.poste__cano {
  position: absolute;
  top: 18%;
  bottom: -6svh;
  left: 50%;
  z-index: 0;
  width: 22px;
  margin-left: -11px;
  border: 3px solid var(--tinta);
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, #6f7a86, #c9d1da 40%, #8b95a1);
}

/* =========================================================
   8. Como chegar
   ========================================================= */
.onde {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  align-items: center;
  gap: 4vw;
  min-height: 100svh;
  padding: calc(var(--topo-h) + 2svh) var(--borda) 5svh;
  background: var(--placa);
  color: #fff;
}

.onde .titulo {
  font-size: min(5vw, 8.4svh, 76px);
}

.onde__lista {
  display: grid;
  gap: 2svh;
  margin-top: 3.6svh;
  font-style: normal;
}

.onde__lista p {
  margin: 0;
  font-size: 17.5px;
}

.onde__lista strong {
  display: block;
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amarelo);
}

.onde__lista a {
  font-weight: 600;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.onde__nota {
  margin: 3svh 0 0;
  font-weight: 600;
}

.onde__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 2.6svh;
}

.onde__mapa {
  height: min(70svh, 600px);
  border: 7px solid #fff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 0 0 4px var(--placa-escura), 0 24px 50px rgb(0 0 0 / 0.3);
}

.onde__mapa iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   9. Rodapé
   ========================================================= */
.rodape {
  position: relative;
  display: grid;
  justify-items: center;
  padding: 7svh var(--borda) 4svh;
  background: var(--verde-escuro);
  color: var(--creme);
  text-align: center;
  overflow: hidden;
}

.rodape__sapo {
  position: relative;
  z-index: 1;
  width: min(30vw, 220px);
  margin-bottom: -4%;
  filter: drop-shadow(4px 0 0 #fff) drop-shadow(-4px 0 0 #fff) drop-shadow(0 4px 0 #fff) drop-shadow(0 -4px 0 #fff);
}

.letreiro--rodape {
  position: relative;
  z-index: 2;
  font-size: min(12vw, 170px);
}

.rodape__base {
  display: grid;
  gap: 6px;
  margin-top: 5svh;
  font-size: 15px;
}

.rodape__base p {
  margin: 0;
}

.rodape__slogan {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 26px;
  color: var(--amarelo);
}

.rodape__direitos {
  opacity: 0.7;
  font-size: 13.5px;
}

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 40;
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 3px solid var(--tinta);
  border-radius: 50%;
  background: var(--verde);
  box-shadow: 0 5px 0 var(--tinta), 0 14px 28px rgb(23 50 31 / 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.8);
  transition: opacity 0.3s, transform 0.4s var(--mola);
}

.flutuante.visivel {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.flutuante svg {
  width: 30px;
  fill: #fff;
}

/* =========================================================
   Tela cheia (as fotos abertas grandes)
   ========================================================= */
.visor {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgb(9 20 13 / 0.96);
  color: var(--creme);
  overflow: hidden;
  touch-action: pan-y;
}

.visor::backdrop {
  background: transparent;
}

.visor__quadro {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  height: 100%;
  margin: 0;
  padding: 64px clamp(16px, 7vw, 104px) 22px;
}

.visor__img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}

.visor__legenda {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 12px;
  text-align: center;
}

.visor__n {
  font-family: var(--f-placa);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--amarelo);
}

.visor__nome {
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
}

.visor__desc {
  flex-basis: 100%;
  font-size: 15.5px;
  opacity: 0.8;
}

.visor__botao {
  position: absolute;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0 0 4px;
  border: 2.5px solid rgb(255 247 230 / 0.7);
  border-radius: 50%;
  background: rgb(255 247 230 / 0.1);
  color: var(--creme);
  font-family: var(--f-titulo);
  font-weight: 900;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.3s var(--mola);
}

.visor__botao:hover {
  border-color: var(--amarelo);
  background: var(--amarelo);
  color: var(--tinta);
  transform: scale(1.06);
}

.visor__botao:focus-visible {
  outline: 3px solid var(--amarelo);
  outline-offset: 3px;
}

.visor__fechar {
  top: 12px;
  right: 14px;
  padding: 0;
}

.visor__fechar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
}

.visor__seta {
  top: 50%;
  translate: 0 -50%;
}

.visor__seta--ant {
  left: 18px;
}

.visor__seta--prox {
  right: 18px;
}

html.visor-aberto {
  overflow: hidden;
}

@media (max-width: 960px) {
  .visor__quadro {
    padding: 64px 0 18px;
  }

  .visor__legenda {
    min-height: 52px;
    padding: 0 72px;
  }

  .visor__nome {
    font-size: 19px;
  }

  .visor__desc {
    font-size: 14px;
  }

  .visor__seta {
    top: auto;
    bottom: 18px;
    translate: none;
  }

  .visor__seta--ant {
    left: 12px;
  }

  .visor__seta--prox {
    right: 12px;
  }
}

/* =========================================================
   Telas médias
   ========================================================= */
@media (max-width: 1180px) {
  .nav {
    gap: 18px;
  }

  .nav a {
    font-size: 14.5px;
  }

  .letreiro--mini {
    display: none;
  }
}

/* =========================================================
   Tablet e celular
   ========================================================= */
@media (max-width: 960px) {
  :root {
    --topo-h: 64px;
  }

  body {
    font-size: 16.5px;
  }

  .titulo {
    font-size: min(9.6vw, 46px);
  }

  .letreiro--mini {
    display: inline-flex;
    font-size: 21px;
  }

  .marca__sapo {
    width: 42px;
  }

  .menu-botao {
    position: relative;
    z-index: 2;
    display: grid;
    align-content: center;
    gap: 6px;
    width: 46px;
    height: 46px;
    padding: 0 11px;
    border: 3px solid var(--tinta);
    border-radius: 12px;
    background: var(--papel);
    cursor: pointer;
  }

  .menu-botao span {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--tinta);
    transition: transform 0.3s var(--ease);
  }

  .menu-aberto .menu-botao span:first-child {
    transform: translateY(4.5px) rotate(45deg);
  }

  .menu-aberto .menu-botao span:last-child {
    transform: translateY(-4.5px) rotate(-45deg);
  }

  .topo {
    gap: 10px;
  }

  .botao--topo {
    min-height: 44px;
    padding: 6px 14px;
    font-size: 15.5px;
  }

  .nav {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    padding: 90px var(--borda) 40px;
    background: var(--creme);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s;
  }

  .menu-aberto .nav {
    opacity: 1;
    pointer-events: auto;
  }

  .nav a {
    font-family: var(--f-titulo);
    font-weight: 800;
    font-size: 32px;
  }

  .nav a::after {
    display: none;
  }

  .nav__whats {
    display: inline-flex;
    margin-top: 18px;
    color: var(--verde-escuro);
  }

  .menu-aberto .marca,
  .menu-aberto .botao--topo {
    position: relative;
    z-index: 2;
  }

  /* hero: título e botão na primeira tela; o palco vem logo abaixo */
  .hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
    min-height: 0;
    padding: calc(var(--topo-h) + 18px) var(--borda) 56px;
  }

  .hero__onde {
    margin-bottom: 12px;
    font-size: 14px;
  }

  .hero__titulo {
    font-size: min(13.6vw, 64px);
  }

  .placa-rua {
    margin-top: 18px;
  }

  .placa-rua__nome,
  .placa-rua__numero {
    font-size: min(6.6vw, 30px);
  }

  .placa-rua__bairro {
    font-size: 11px;
  }

  .hero__apoio {
    margin-top: 18px;
    font-size: 16.5px;
  }

  .hero__acoes {
    margin-top: 20px;
    gap: 10px;
  }

  .hero__acoes .botao {
    flex: 1 1 auto;
    padding-inline: 16px;
    font-size: 17.5px;
  }

  .provas {
    margin-top: 20px;
    gap: 6px 16px;
    font-size: 13.5px;
  }

  .hero__palco {
    width: min(100%, 520px);
  }

  /* fachada: as duas fotos uma embaixo da outra, sem prender a rolagem */
  .fachada {
    min-height: 0;
    padding: 64px var(--borda) 56px;
    gap: 22px;
  }

  .fachada__texto {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .fachada__titulos {
    gap: 6px;
  }

  .fachada__titulo {
    font-size: min(8.4vw, 40px);
  }

  .fachada__recado p {
    font-size: 18.5px;
  }

  .fachada__quadro {
    grid-row: auto;
  }

  .fachada__foto--dentro {
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: 50% 62%;
  }

  /* atrações */
  .atracoes {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "cabeca"
      "roda"
      "vitrine";
    min-height: 0;
    padding: 64px var(--borda) 60px;
    row-gap: 26px;
  }

  .atracoes:not(.roda-pronta) {
    grid-template-areas: "cabeca";
  }

  .atracoes__apoio {
    font-size: 16.5px;
  }

  .roda__svg {
    width: min(100%, 440px);
  }

  .cesta__txt {
    display: none;
  }

  .vitrine {
    display: grid;
    gap: 18px;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
    rotate: 0deg;
  }

  .vitrine:hover {
    rotate: 0deg;
    scale: 1;
  }

  .vitrine__foto {
    position: relative;
    inset: auto;
    aspect-ratio: 4 / 3;
    height: auto;
    rotate: -2deg;
  }

  .vitrine__texto {
    position: static;
    padding: 0;
    background: none;
  }

  .vitrine__nome {
    font-size: min(9vw, 40px);
  }

  .vitrine__desc {
    font-size: 16.5px;
  }

  /* lados */
  .lados {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 64px var(--borda) 64px;
    gap: 32px;
  }

  .lados__apoio,
  .recado--grande p {
    font-size: 16.5px;
  }

  .lados__extra {
    font-size: 19px;
  }

  .comparador {
    height: auto;
    aspect-ratio: 4 / 4.4;
    box-shadow: 7px 7px 0 var(--laranja);
  }

  .comparador__placa {
    bottom: 12px;
    max-width: 42%;
    padding: 7px 10px 6px;
    font-size: 12px;
  }

  .comparador__placa--salao {
    left: 12px;
  }

  .comparador__placa--brinquedos {
    right: 12px;
  }

  .comparador__alca {
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
  }

  .comparador__alca img {
    width: 42px;
  }

  /* cardápio */
  .cardapio {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 64px var(--borda) 64px;
    gap: 30px;
  }

  .cardapio__texto {
    display: contents;
  }

  .cardapio__apoio {
    margin-top: -16px;
    font-size: 16.5px;
  }

  .cardapio__fotos {
    order: 3;
    justify-self: center;
    width: min(100%, 460px);
    margin-top: 0;
  }

  .cardapio__foto {
    padding: 7px 7px 0;
  }

  /* no celular as polaroides ficam lado a lado, sem uma cobrir a outra */
  .cardapio__foto + .cardapio__foto {
    margin-left: 5%;
  }

  .cardapio__foto span {
    padding: 6px 2px 8px;
    font-size: 12.5px;
    line-height: 1.2;
  }

  .cardapio__album {
    order: 4;
    justify-self: center;
    margin-top: -8px;
  }

  /* no celular a bandeja é menor e ganha espaço em cima para a tampa subir sem cobrir a comida */
  .bandeja__mesa {
    width: min(74vw, 300px);
    margin-top: min(36vw, 132px);
  }

  .bandeja__nome {
    font-size: min(8vw, 32px);
  }

  .bandeja__legenda {
    min-height: 0;
  }

  .pratinhos {
    gap: 7px;
    max-width: 340px;
  }

  .pratinho {
    width: 46px;
    height: 46px;
  }

  .bandeja__marmita {
    width: 90px;
  }

  .bandeja__recado p {
    font-size: 19px;
  }

  /* decoração: a foto vem antes e os temas viram miniaturas, três por linha */
  .decoracao {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 64px var(--borda) 64px;
    gap: 26px;
  }

  .decoracao__texto {
    display: contents;
  }

  .decoracao .etiqueta {
    margin-bottom: -12px;
  }

  .decoracao__apoio {
    margin-top: -12px;
    font-size: 16.5px;
  }

  .decoracao__palco {
    order: 4;
    width: 100%;
    max-width: 560px;
    margin-top: 34px;
  }

  .decoracao__foto {
    rotate: 0deg;
    border-radius: 20px;
    box-shadow: 7px 7px 0 var(--tema-forte);
  }

  .decoracao__placa {
    left: 12px;
    bottom: 12px;
    font-size: 13.5px;
  }

  .selo {
    top: -50px;
    right: -8px;
    width: 104px;
    height: 104px;
    filter: drop-shadow(3px 3px 0 var(--tinta));
  }

  .temas {
    order: 5;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
    width: 100%;
    max-width: 560px;
    justify-self: center;
    margin: 0;
  }

  .tema {
    flex-direction: column;
    gap: 7px;
    padding: 0;
    font-size: 13.5px;
    text-align: center;
    opacity: 0.6;
  }

  .tema img {
    width: 100%;
    border-radius: 9px;
  }

  .tema span {
    padding-bottom: 6px;
  }

  .tema[aria-pressed="true"] {
    translate: 0 -3px;
  }

  /* avaliações: a máquina fica em pé e o ticket sai por baixo dela */
  .avaliacoes {
    --maq-h: 330px;
    min-height: 0;
    padding: 64px var(--borda) 64px;
    gap: 28px;
  }

  .avaliacoes__cabeca {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .avaliacoes__apoio {
    font-size: 16.5px;
  }

  .fliper {
    flex-direction: column;
    align-items: center;
  }

  .maquina {
    width: 230px;
  }

  .maquina__boca {
    right: auto;
    left: 15%;
    top: auto;
    bottom: -5px;
    width: 70%;
    height: 16px;
    border-radius: 6px 6px 0 0;
  }

  .saida {
    flex: none;
    width: 100%;
    height: 290px;
  }

  .ticket {
    left: 0;
    right: 0;
    top: -6px;
    width: auto;
    padding: 18px 18px 16px 58px;
    transform: translate(0, -100%);
    clip-path: inset(100% 0 0 0);
  }

  .ticket::before {
    left: 21px;
    font-size: 10px;
  }

  .ticket::after {
    left: 40px;
  }

  .ticket p {
    font-size: 17px;
  }

  /* orçamento */
  .orcamento {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 64px var(--borda) 64px;
    gap: 26px;
  }

  .orcamento__texto {
    display: contents;
  }

  .orcamento__apoio {
    margin-top: -12px;
    font-size: 16.5px;
  }

  .poste {
    order: 0;
    padding: 18px 8px 4px 0;
  }

  .ficha {
    order: 1;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 0;
    padding: 22px 18px;
    gap: 18px;
  }

  .placa-festa {
    padding: 20px 24px 16px;
  }

  .placa-festa__nome {
    font-size: min(9vw, 38px);
  }

  .placa-festa__idade {
    right: -8px;
    width: 70px;
    height: 70px;
    font-size: 26px;
  }

  .placa-cep,
  .poste__cano {
    display: none;
  }

  /* como chegar */
  .onde {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding: 64px var(--borda) 64px;
    gap: 30px;
  }

  .onde .titulo {
    font-size: min(11vw, 48px);
  }

  .onde__mapa {
    height: 320px;
  }

  .rodape__base {
    font-size: 14px;
  }

  .rodape__slogan {
    font-size: 22px;
  }

  .flutuante {
    right: 16px;
    bottom: 16px;
  }
}

@media (max-width: 380px) {
  .letreiro--mini {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}