/* Pizzeria Premium — "do forno à sua casa"
   Paleta: fundo oliva quase preto, superfície verde da marca, tinta creme, UM acento (ouro).
   Tipos: Oswald (display) + Jost (texto). Escala 15/18/24/36/56/96. Espaço 8/16/24/40/64/104. */
:root {
  --fundo: #141a10;
  --superficie: #1d2617;
  --verde: #27321d;
  --tinta: #f4efe3;
  --tinta-suave: rgba(244, 239, 227, 0.68);
  --linha: rgba(222, 169, 79, 0.22);
  --ouro: #dea94f;
  --display: "Oswald", "Arial Narrow", system-ui, sans-serif;
  --texto: "Jost", system-ui, sans-serif;
  --borda: max(16px, 4vw);
  --largura: 1240px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--fundo); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: transparent; color: var(--tinta); font: 400 18px/1.55 var(--texto); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.02; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
button { font: inherit; color: inherit; }
.rotulo { display: block; font: 500 13px/1.2 var(--texto); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro); margin-bottom: 16px; }
.pular { position: absolute; left: -999px; }
.pular:focus { left: 16px; top: 16px; z-index: 50; background: var(--tinta); color: var(--fundo); padding: 8px 16px; }
:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }

/* fundo vivo: duas luzes quentes que passeiam devagar (só transform: leve para o navegador) */
.ambiente { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 120%, #22301a 0%, var(--fundo) 60%); }
.ambiente i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform; }
.ambiente i:nth-child(1) { left: -30vmax; top: -40vmax; background: radial-gradient(circle, rgba(222, 169, 79, 0.13), transparent 62%); animation: passeio1 38s ease-in-out infinite alternate; }
.ambiente i:nth-child(2) { right: -35vmax; bottom: -45vmax; background: radial-gradient(circle, rgba(111, 165, 68, 0.1), transparent 60%); animation: passeio2 46s ease-in-out infinite alternate; }
@keyframes passeio1 { to { transform: translate(40vw, 30vh) scale(1.15); } }
@keyframes passeio2 { to { transform: translate(-45vw, -35vh) scale(0.9); } }

/* palco 3D fixo atrás do conteúdo */
#palco { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100lvh; z-index: 0; pointer-events: none; opacity: 0; will-change: opacity, transform; }
main, .rodape { position: relative; z-index: 1; }

/* topo */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px var(--borda); transition: background 0.4s ease; }
.rolou .topo { background: rgba(20, 26, 16, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(222, 169, 79, 0.12); }
.marca img { width: 96px; height: auto; transition: opacity 0.4s ease, transform 0.4s ease; }
html:not(.rolou) .marca img { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.topo-acoes { display: flex; align-items: center; gap: 8px; }
.topo-acoes .status { margin-right: 8px; }
.pilula { font: 500 15px/1 var(--texto); text-decoration: none; padding: 0 18px; border-radius: 999px; border: 1px solid var(--linha); background: rgba(20, 26, 16, 0.5); min-height: 44px; display: inline-flex; align-items: center; transition: border-color 0.2s ease, background 0.2s ease; }
.pilula:hover { border-color: var(--ouro); }
.pilula.ouro, .barra-acoes .ouro { background: var(--ouro); color: #1c1608; border-color: var(--ouro); font-weight: 600; animation: chamar 2.8s ease-out infinite; }
.pilula.ouro:hover { background: #ecbf6a; }
@keyframes chamar { 0% { box-shadow: 0 0 0 0 rgba(222, 169, 79, 0.45); } 70%, 100% { box-shadow: 0 0 0 14px rgba(222, 169, 79, 0); } }

/* status aberto/fechado */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--tinta-suave); white-space: nowrap; }
.status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #8a8a7a; flex: none; }
.status.aberto { color: var(--tinta); }
.status.aberto::before { background: #6fd36a; animation: vivo 2s ease-out infinite; }
@keyframes vivo { 0% { box-shadow: 0 0 0 0 rgba(111, 211, 106, 0.6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(111, 211, 106, 0); } }

/* barra de ações do celular */
.barra-acoes { display: none; }

/* botões */
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.botao { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--ouro); color: #1c1608; border: 1px solid var(--ouro); font: 600 16px/1 var(--texto); letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: transform 0.2s ease, background 0.2s ease; }
.botao:hover { transform: translateY(-2px); background: #ecbf6a; }
.botao.vazado { background: transparent; color: var(--tinta); border-color: rgba(244, 239, 227, 0.3); }
.botao.vazado:hover { border-color: var(--ouro); background: rgba(222, 169, 79, 0.08); }
.botao.grande { min-height: 60px; padding: 0 36px; font-size: 17px; }

/* 1 · abertura */
.cena-inicio { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding: 96px var(--borda) 64px; position: relative; }
.abertura { max-width: 760px; }
.selo { position: relative; width: clamp(170px, 19vw, 280px); margin-bottom: 32px; animation: acender 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; filter: drop-shadow(0 0 30px rgba(222, 169, 79, 0.28)); }
.selo img { width: 100%; height: auto; }
/* um reflexo de luz passa pela logo, recortado no formato dela */
.selo-brilho { position: absolute; inset: 0; -webkit-mask: url(../img/logo-premium.png) center / contain no-repeat; mask: url(../img/logo-premium.png) center / contain no-repeat; background: linear-gradient(110deg, transparent 38%, rgba(255, 246, 220, 0.95) 50%, transparent 62%); background-size: 260% 100%; background-position: 130% 0; animation: reflexo 6s ease-in-out 1.2s infinite; }
@keyframes reflexo { 0% { background-position: 130% 0; } 40%, 100% { background-position: -30% 0; } }
@keyframes acender { from { opacity: 0; transform: scale(0.94); } }
.abertura h1 { font-size: clamp(48px, min(7.6vw, 11vh), 112px); text-transform: uppercase; line-height: 0.95; }
.abertura .lead { margin-top: 24px; font-size: clamp(18px, 1.5vw, 22px); color: var(--tinta-suave); max-width: 40ch; }
.abertura .acoes { margin-top: 32px; }
.selos-linha { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; font-size: 14px; }
.nota { text-decoration: none; color: var(--tinta-suave); }
.nota b { color: var(--ouro); font-weight: 600; }

/* blocos comuns: cabeçalho + cartões */
.bloco { padding: 120px var(--borda) 40px; max-width: calc(var(--largura) + 2 * var(--borda)); margin: 0 auto; }
.cab { max-width: 720px; margin-bottom: 40px; }
.cab h2 { font-size: clamp(40px, 5vw, 72px); text-transform: uppercase; margin-bottom: 16px; }
.cab p:last-child { color: var(--tinta-suave); max-width: 56ch; }
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.cartoes.quatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cartoes.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* fotos: todas no mesmo formato, deitadas, com legenda */
.foto { margin: 0; }
.ampliar { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; overflow: hidden; position: relative; }
.ampliar img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.drink .ampliar img { aspect-ratio: 4 / 5; }
.ampliar::after { content: "+"; position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 26, 16, 0.7); color: var(--tinta); font-size: 20px; opacity: 0; transition: opacity 0.3s ease; }
.ampliar:hover img { transform: scale(1.05); }
.ampliar:hover::after, .ampliar:focus-visible::after { opacity: 1; }
.foto figcaption { padding-top: 16px; font-size: 15px; color: var(--tinta-suave); line-height: 1.45; }
.foto figcaption span { display: block; font: 500 13px/1 var(--display); letter-spacing: 0.1em; color: var(--ouro); margin-bottom: 8px; }
.foto figcaption strong { display: block; font: 600 20px/1.15 var(--display); text-transform: uppercase; color: var(--tinta); margin-bottom: 6px; }

/* foto em destaque */
.destaque { border: 0; padding: 0; background: transparent; max-width: min(92vw, 1200px); max-height: 92vh; color: var(--tinta); overflow: visible; }
.destaque::backdrop { background: rgba(8, 10, 6, 0.9); }
.destaque img { max-width: 100%; max-height: 80vh; width: auto; margin: 0 auto; border-radius: 6px; }
.destaque p { text-align: center; margin-top: 16px; font-size: 16px; color: var(--tinta-suave); }
.destaque p span { display: none; }
.destaque p strong { font: 600 20px/1.2 var(--display); text-transform: uppercase; color: var(--tinta); margin-right: 8px; }
.destaque .fechar { position: absolute; top: -52px; right: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); background: rgba(20, 26, 16, 0.8); font-size: 24px; cursor: pointer; }
.destaque[open] { animation: abrir 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes abrir { from { opacity: 0; transform: scale(0.96); } }

/* 3 · pico */
.palco-pico { justify-content: flex-start; align-items: center; padding: 0 var(--borda); }
.receita { position: relative; z-index: 2; width: min(440px, 38vw); }
.receita-titulo { font-size: clamp(52px, 6vw, 96px); text-transform: uppercase; margin-bottom: 32px; }
.passos { list-style: none; margin: 0; padding: 0; counter-reset: passo; }
.passos li { counter-increment: passo; position: relative; padding: 11px 0 11px 48px; font-size: 18px; color: rgba(244, 239, 227, 0.3); transition: color 0.4s ease; border-top: 1px solid rgba(244, 239, 227, 0.08); }
.passos li::before { content: counter(passo, decimal-leading-zero); position: absolute; left: 0; top: 13px; font: 500 14px/1 var(--display); letter-spacing: 0.08em; color: inherit; }
.passos li.feito { color: var(--tinta-suave); }
.passos li.agora { color: var(--tinta); }
.passos li.agora::before { color: var(--ouro); }
.progresso-pico { margin-top: 24px; height: 2px; background: rgba(244, 239, 227, 0.1); border-radius: 2px; overflow: hidden; }
.progresso-pico i { display: block; height: 100%; background: var(--ouro); transform-origin: left; transform: scaleX(0); }
.foto-final { position: absolute; inset: 0; margin: 0; opacity: 0; pointer-events: none; z-index: 3; }
.foto-final img { width: 100%; height: 100%; object-fit: cover; }
.foto-final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 12, 8, 0.8), transparent 50%); }
.foto-final figcaption { position: absolute; z-index: 1; left: var(--borda); bottom: 10vh; max-width: 32ch; font-size: 18px; color: var(--tinta); }
.foto-final figcaption strong { display: block; font: 600 clamp(40px, 5vw, 72px)/1 var(--display); text-transform: uppercase; margin-bottom: 8px; }
.retrato-reduzido { display: none; }

/* 4 · famílias */
.familias-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.familia { display: grid; grid-template-columns: 132px 1fr; gap: 20px; align-items: center; padding: 20px; border-radius: 8px; background: rgba(29, 38, 23, 0.72); border: 1px solid rgba(244, 239, 227, 0.07); transition: border-color 0.3s ease, transform 0.3s ease; }
.familia:hover { border-color: var(--cor); transform: translateY(-3px); }
.familia-pizza { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(244, 239, 227, 0.06), transparent 70%); }
.familia-pizza img { width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s ease, transform 0.8s ease; transform: rotate(-30deg) scale(0.9); filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5)); }
.familia-pizza.pronta img { opacity: 1; transform: none; }
.familia:hover .familia-pizza img { transform: rotate(25deg); }
.familia h3 { font-size: 26px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.familia h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); }
.familia .qtd { font-size: 13px; color: var(--ouro); letter-spacing: 0.04em; margin-bottom: 8px; }
.familia p:last-child { font-size: 14px; color: var(--tinta-suave); line-height: 1.45; }
.mais-link { margin-top: 32px; }

/* 5 · monte a sua */
.cena-monte { min-height: 100vh; position: relative; margin-top: 64px; }
.monte-fixo { display: grid; grid-template-columns: minmax(0, 520px) 1fr; min-height: 100vh; align-items: center; padding: 96px var(--borda) 48px; gap: 40px; }
.monte-painel h2 { font-size: clamp(40px, 4.4vw, 64px); text-transform: uppercase; margin-bottom: 16px; }
.dica { color: var(--tinta-suave); margin-bottom: 24px; max-width: 42ch; }
.familias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.familias button, .sabores-lista button { font: 500 15px/1.2 var(--texto); color: var(--tinta); background: transparent; border: 1px solid rgba(244, 239, 227, 0.18); border-radius: 999px; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.familias button[aria-selected="true"] { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.familias button i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cor); margin-right: 8px; vertical-align: 1px; }
.sabores-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; max-height: 200px; overflow-y: auto; scrollbar-width: thin; }
.sabores-lista button[aria-selected="true"] { border-color: var(--ouro); color: var(--ouro); background: rgba(222, 169, 79, 0.08); }
.sabores-lista button.lado-b[aria-selected="true"] { border-style: dashed; }
.meia { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; min-height: 44px; cursor: pointer; }
.meia input { width: 20px; height: 20px; accent-color: var(--ouro); }
.escolha { min-height: 92px; margin: 8px 0 24px; padding-top: 16px; border-top: 1px solid var(--linha); }
.escolha-nome { font: 600 28px/1.1 var(--display); text-transform: uppercase; }
.escolha-ing { color: var(--tinta-suave); font-size: 16px; margin-top: 8px; }
.monte-pizza { height: 72vh; cursor: grab; touch-action: pan-y; }
.monte-pizza:active { cursor: grabbing; }

/* 6 · drinks */
.cena-drinks .foto figcaption strong { font-size: 18px; }

/* 8 · playlists */
.playlists { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.playlist { min-height: 352px; border-radius: 12px; background: rgba(29, 38, 23, 0.72); display: grid; align-content: end; overflow: hidden; }
.playlist iframe { width: 100%; height: 352px; border: 0; border-radius: 12px; display: block; }
.playlist a { padding: 16px; font-size: 14px; color: var(--tinta-suave); }
.playlist iframe + a { display: none; }

/* 9 · avaliar */
.cena-avaliar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.avaliar-texto h2 { font-size: clamp(40px, 5vw, 72px); text-transform: uppercase; margin-bottom: 24px; }
.avaliar-texto > p:not(.rotulo):not(.nota-grande) { color: var(--tinta-suave); max-width: 46ch; }
.nota-grande { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 24px; }
.nota-grande b { white-space: nowrap; }
.nota-grande b { font: 600 72px/1 var(--display); color: var(--ouro); }
.nota-grande span { color: var(--tinta-suave); font-size: 16px; }
.links-avaliar { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; }
.links-avaliar a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; border-bottom: 1px solid var(--linha); }
.links-avaliar a:hover { border-color: var(--ouro); }
.avaliacao { background: rgba(29, 38, 23, 0.8); border: 1px solid rgba(244, 239, 227, 0.08); border-radius: 12px; padding: 32px; display: grid; gap: 24px; }
.estrelas { border: 0; padding: 0; margin: 0; }
.estrelas legend { font: 600 20px/1.2 var(--display); text-transform: uppercase; margin-bottom: 12px; padding: 0; }
.estrelas-linha { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.estrelas input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.estrelas label { font-size: 40px; line-height: 1; width: 48px; height: 48px; display: grid; place-items: center; color: rgba(244, 239, 227, 0.2); cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; }
.estrelas label:hover, .estrelas label:hover ~ label, .estrelas input:checked ~ label { color: var(--ouro); }
.estrelas label:hover { transform: scale(1.12); }
.estrelas input:focus-visible + label { outline: 2px solid var(--ouro); border-radius: 6px; }
.campo span { display: block; font-size: 15px; color: var(--tinta-suave); margin-bottom: 8px; }
.campo textarea { width: 100%; font: 400 17px/1.5 var(--texto); color: var(--tinta); background: rgba(20, 26, 16, 0.7); border: 1px solid rgba(244, 239, 227, 0.15); border-radius: 8px; padding: 14px 16px; resize: vertical; }
.campo textarea:focus { outline: none; border-color: var(--ouro); }
.avaliacao-aviso { font-size: 15px; color: var(--ouro); min-height: 1.4em; }

/* 10 · fechamento */
.cena-fim { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: center; gap: 64px; padding: 120px var(--borda) 104px; max-width: calc(var(--largura) + 2 * var(--borda)); margin: 0 auto; }
.fim-foto { margin: 0; border-radius: 8px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); }
.fim-foto img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.fim-texto h2 { font-size: clamp(52px, 6.4vw, 104px); text-transform: uppercase; margin-bottom: 24px; }
.fim-texto .status { font-size: 16px; margin-bottom: 32px; }
.info { margin: 40px 0 24px; display: grid; gap: 16px; }
.info div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; border-top: 1px solid var(--linha); padding-top: 16px; }
.info dt { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ouro); padding-top: 4px; }
.info dd { margin: 0; font-size: 18px; }
.info a { text-decoration: none; border-bottom: 1px solid var(--linha); }
.mais { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; color: var(--tinta-suave); }
.mais a { min-height: 44px; display: inline-flex; align-items: center; }
.rodape { padding: 24px var(--borda) 40px; color: var(--tinta-suave); font-size: 14px; text-align: center; }

/* tablet */
@media (max-width: 1100px) {
  .so-largo:not(.ouro) { display: none; }
  .cartoes.cinco { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .familias-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* celular e tablet em pé */
@media (max-width: 900px) {
  body { font-size: 17px; padding-bottom: 76px; }
  .topo { padding: 10px var(--borda); }
  .marca img { width: 76px; }
  .so-largo { display: none; }
  .barra-acoes { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px var(--borda) calc(10px + env(safe-area-inset-bottom)); background: rgba(20, 26, 16, 0.94); border-top: 1px solid rgba(222, 169, 79, 0.15); }
  .barra-acoes a { min-height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 999px; text-decoration: none; font-weight: 500; border: 1px solid rgba(244, 239, 227, 0.25); }
  .cena-inicio { align-items: end; padding: 30vh var(--borda) 40px; }
  .selo { width: 150px; margin-bottom: 24px; }
  .abertura h1 { font-size: clamp(40px, 11.5vw, 64px); }
  .abertura .acoes .botao { flex: 1 1 100%; }
  .bloco { padding-top: 88px; }
  .cab { margin-bottom: 32px; }
  /* fotos em fileira que desliza para o lado, no lugar de uma coluna comprida */
  .cartoes.quatro, .cartoes.cinco { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 calc(-1 * var(--borda)); padding: 0 var(--borda) 8px; scrollbar-width: none; }
  .cartoes.quatro::-webkit-scrollbar, .cartoes.cinco::-webkit-scrollbar { display: none; }
  .cartoes.quatro > li { flex: 0 0 78%; scroll-snap-align: start; }
  .cartoes.cinco > li { flex: 0 0 62%; scroll-snap-align: start; }
  .familias-grade { grid-template-columns: 1fr; gap: 12px; }
  .familia { grid-template-columns: 96px 1fr; padding: 16px; gap: 16px; }
  .familia h3 { font-size: 22px; }
  .palco-pico { align-items: flex-end; padding-bottom: calc(4vh + 76px); }
  .receita { width: 100%; }
  .receita-titulo { font-size: 40px; margin-bottom: 12px; }
  .passos li { padding: 6px 0 6px 40px; font-size: 16px; }
  .passos li::before { top: 8px; }
  .passos li:not(.agora) { position: absolute; visibility: hidden; } /* escondido, mas ainda conta no número da etapa */
  .passos li.agora { border-top: 0; }
  .progresso-pico { margin-top: 12px; }
  .cena-monte { margin-top: 32px; }
  .monte-fixo { grid-template-columns: 1fr; padding-top: 80px; gap: 16px; }
  .monte-pizza { height: 44vh; order: -1; }
  .monte-painel .acoes .botao { flex: 1 1 100%; }
  .playlists { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 calc(-1 * var(--borda)); padding: 0 var(--borda); scrollbar-width: none; }
  .playlist { flex: 0 0 86%; scroll-snap-align: start; }
  .cena-avaliar { grid-template-columns: 1fr; gap: 32px; }
  .nota-grande b { font-size: 56px; }
  .avaliacao { padding: 24px; }
  .avaliacao .acoes .botao { flex: 1 1 100%; }
  .cena-fim { grid-template-columns: 1fr; gap: 32px; padding: 88px var(--borda) 64px; min-height: 0; }
  .fim-foto img { aspect-ratio: 4 / 3; }
  .fim-texto .acoes .botao { flex: 1 1 100%; }
}

/* sem 3D (navegador antigo): as fotos seguram a página */
.sem-3d .monte-pizza { display: none; }

/* movimento reduzido: tudo parado e legível */
.fx-reduzido .ambiente i, .fx-reduzido .selo, .fx-reduzido .selo-brilho, .fx-reduzido .pilula.ouro, .fx-reduzido .barra-acoes .ouro, .fx-reduzido .status.aberto::before { animation: none; }
.fx-reduzido #palco { display: none; }
.fx-reduzido .retrato-reduzido:not([hidden]) { display: block; width: min(80vw, 480px); margin: 24px auto; }
.fx-reduzido .foto-final { position: relative; opacity: 1; height: 70vh; margin-top: 40px; }
.fx-reduzido .passos li { color: var(--tinta-suave); display: list-item; }
.fx-reduzido .familia-pizza img { opacity: 1; transform: none; }

/* véu atrás do texto: escurece e desfoca o 3D só ali, como foco de câmera no texto */
.abertura, .receita { position: relative; isolation: isolate; }
.abertura::before, .receita::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -18% -30% -18% -40%;
  background: radial-gradient(ellipse 60% 55% at 45% 50%, rgba(20, 26, 16, 0.82), rgba(20, 26, 16, 0.55) 55%, rgba(20, 26, 16, 0) 100%);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 45% 50%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 55% at 45% 50%, #000 45%, transparent 100%);
}
@media (max-width: 900px) {
  .abertura::before { inset: -12% -20% -8% -20%; }
  .receita::before { inset: -30% -20% -20% -20%; }
}
.fx-reduzido .abertura::before, .fx-reduzido .receita::before { display: none; }
.familia-pizza img { font-size: 0; color: transparent; } /* sem texto alternativo aparecendo enquanto a pizza 3D é desenhada */
.fx-reduzido .palco-pico { flex-wrap: wrap; gap: 24px; padding-top: 104px; }
.fx-reduzido .receita { width: min(440px, 100%); }
.fx-reduzido .foto-final { flex: 1 1 100%; transform: none !important; }

/* pico: a frase que fecha a montagem */
.convicao { margin-top: 24px; font: 600 clamp(28px, 2.6vw, 40px)/1.05 var(--display); text-transform: uppercase; color: var(--ouro); opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.convicao.on { opacity: 1; transform: none; }

/* monte a sua: tudo numa tela só, com a pizza sempre à vista */
.monte-painel h2 { font-size: clamp(36px, 3.6vw, 54px); }
.monte-painel .dica { margin-bottom: 16px; }
.sabores-lista { max-height: 140px; }
.escolha { min-height: 0; margin: 4px 0 16px; }
.escolha-nome { font-size: 24px; }
.escolha-ing { font-size: 15px; }

/* 6 · a casa em 3D */
.cena-ambiente { position: relative; }
.palco-ambiente { justify-content: flex-start; align-items: center; padding: 0 var(--borda); }
.casa3d { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.casa-pronta .casa3d { opacity: 1; }
.casa3d canvas { display: block; width: 100% !important; height: 100% !important; }
/* degradê que funde a maquete com o fundo do site, em cima e embaixo */
.palco-ambiente::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, var(--fundo), transparent 16%, transparent 78%, var(--fundo)), linear-gradient(to right, rgba(20, 26, 16, 0.95) 22%, rgba(20, 26, 16, 0.6) 38%, transparent 55%); }
.ambiente-cartao { position: relative; z-index: 2; width: min(400px, 36vw); }
.ambiente-cartao h2 { font-size: clamp(44px, 5vw, 80px); text-transform: uppercase; margin-bottom: 12px; transition: opacity 0.3s ease; }
.amb-numero { font: 500 14px/1 var(--display); letter-spacing: 0.12em; color: var(--tinta-suave); margin-bottom: 12px; }
.amb-texto { color: var(--tinta-suave); min-height: 3.2em; margin-bottom: 24px; }
.amb-pontos { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.amb-pontos button { font: 500 14px/1 var(--texto); color: var(--tinta-suave); background: rgba(20, 26, 16, 0.6); border: 1px solid rgba(244, 239, 227, 0.14); border-radius: 999px; padding: 0 14px; min-height: 40px; cursor: pointer; transition: all 0.25s ease; }
.amb-pontos button[aria-current="true"] { color: #1c1608; background: var(--ouro); border-color: var(--ouro); }
.sem-casa .casa3d { display: none; }
.sem-casa .palco-ambiente { background: url(../img/casa-salao-1600.jpg) center / cover; }
.sem-casa #explorar { display: none; }
/* explorar: a casa ocupa a tela toda e responde ao dedo e ao mouse */
.travado, .travado body { overflow: hidden; }
.explorando .casa3d { position: fixed; inset: 0; z-index: 40; pointer-events: auto; background: radial-gradient(120% 90% at 50% 40%, #1f2a18, var(--fundo)); }
.explorando .ambiente-cartao { position: fixed; z-index: 41; left: var(--borda); bottom: 24px; width: auto; max-width: calc(100% - 2 * var(--borda)); }
.explorando .ambiente-cartao .rotulo, .explorando .amb-numero, .explorando .amb-texto, .explorando #explorar { display: none; }
.explorando .ambiente-cartao h2 { font-size: 32px; }
.explorando .amb-pontos { margin: 0; }
.explorar-topo { position: fixed; z-index: 41; top: 16px; left: var(--borda); right: var(--borda); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.explorar-topo[hidden] { display: none; }
.explorar-topo p { font-size: 14px; color: var(--tinta-suave); }
.explorando ~ * .topo, .travado .topo, .travado .barra-acoes { visibility: hidden; }

@media (max-width: 900px) {
  /* monte: a pizza no alto; famílias e sabores em fileiras que deslizam para o lado */
  .monte-fixo { padding-top: 64px; min-height: calc(100svh - 76px); align-content: start; gap: 8px; }
  .monte-pizza { height: 34vh; }
  .monte-painel .rotulo, .monte-painel .dica { display: none; }
  .monte-painel h2 { font-size: 30px; margin-bottom: 12px; }
  .familias, .sabores-lista { flex-wrap: nowrap; overflow-x: auto; max-height: none; margin: 0 calc(-1 * var(--borda)) 8px; padding: 0 var(--borda); scrollbar-width: none; }
  .familias::-webkit-scrollbar, .sabores-lista::-webkit-scrollbar { display: none; }
  .familias button, .sabores-lista button { flex: none; white-space: nowrap; }
  .meia { min-height: 40px; }
  .escolha { margin: 0 0 12px; padding-top: 10px; }
  .escolha-nome { font-size: 22px; }
  .escolha-ing { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .monte-painel .acoes .botao:first-child { display: none; } /* o "Pedir delivery" já está na barra de baixo */
  /* casa 3D: maquete em cima, cartão embaixo */
  .palco-ambiente { align-items: flex-end; padding-bottom: calc(16px + 76px); }
  .palco-ambiente::after { background: linear-gradient(to bottom, var(--fundo), transparent 14%, transparent 45%, rgba(20, 26, 16, 0.92) 70%, var(--fundo)); }
  .ambiente-cartao { width: 100%; }
  .ambiente-cartao h2 { font-size: 40px; }
  .amb-texto { min-height: 0; margin-bottom: 16px; }
  .amb-pontos { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--borda)) 16px; padding: 0 var(--borda); scrollbar-width: none; }
  .amb-pontos button { white-space: nowrap; }
  .explorando .ambiente-cartao { bottom: 12px; }
  .explorando .ambiente-cartao h2 { font-size: 24px; margin-bottom: 8px; }
  .explorar-topo p { display: none; }
}
.fx-reduzido .casa3d { position: relative; height: 70vh; }
.fx-reduzido .palco-ambiente { flex-direction: column; align-items: stretch; }
/* fileiras que deslizam não podem alargar a coluna */
.monte-fixo > * { min-width: 0; }
@media (max-width: 900px) { .monte-fixo { grid-template-columns: minmax(0, 1fr); } }

/* pico: o fim da montagem vira a pizza de verdade, na mesa da casa (vídeo que anda com a rolagem) */
.video-final { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; }
.video-final video, .video-final .video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-final video { opacity: 0; transition: opacity 0.4s ease; }
.video-final.pintou video { opacity: 1; }
.video-final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 26, 16, 0.92) 0%, rgba(20, 26, 16, 0.55) 34%, transparent 58%), linear-gradient(to top, rgba(20, 26, 16, 0.6), transparent 30%); }
.no-video .passos, .no-video .progresso-pico { opacity: 0; transition: opacity 0.4s ease; }
.passos, .progresso-pico { transition: opacity 0.4s ease; }
.no-video .convicao { font-size: clamp(36px, 4vw, 60px); }
@media (max-width: 900px) {
  .video-final::after { background: linear-gradient(to top, rgba(20, 26, 16, 0.95) 0%, rgba(20, 26, 16, 0.6) 32%, transparent 55%); }
}
.fx-reduzido .video-final { position: relative; opacity: 1; height: 56vw; max-height: 70vh; flex: 1 1 100%; }
.passos, .progresso-pico { max-height: 420px; overflow: hidden; transition: max-height 0.5s ease, opacity 0.4s ease, margin 0.5s ease; }
.no-video .passos, .no-video .progresso-pico { max-height: 0; margin: 0; }
.de-verdade { margin-top: 12px; font-size: 16px; color: var(--tinta-suave); max-width: 30ch; opacity: 0; transition: opacity 0.6s ease 0.2s; }
.no-video .de-verdade { opacity: 1; }

/* ================= versão "tudo real" (03/10) ================= */
/* 1 · abertura: vídeo real da cozinha atrás do texto */
.cena-inicio { overflow: hidden; }
.abertura-fundo { position: absolute; inset: 0; z-index: -1; }
.abertura-fundo img, .abertura-fundo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abertura-fundo video { opacity: 0; transition: opacity 1.2s ease; }
.abertura-fundo.tocando video { opacity: 1; }
.abertura-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 26, 16, 0.94) 0%, rgba(20, 26, 16, 0.72) 38%, rgba(20, 26, 16, 0.25) 70%, rgba(20, 26, 16, 0.4) 100%), linear-gradient(to top, var(--fundo) 0%, transparent 22%); }
.abertura::before { display: none; }
@media (max-width: 900px) {
  .abertura-fundo::after { background: linear-gradient(to top, var(--fundo) 0%, rgba(20, 26, 16, 0.9) 42%, rgba(20, 26, 16, 0.35) 75%, rgba(20, 26, 16, 0.5) 100%); }
}

/* 3 · a pizza de verdade: vídeo de tela cheia, texto à esquerda */
.palco-pico .video-final { opacity: 1; }
.palco-pico .receita { width: min(480px, 40vw); }
.palco-pico .receita::before { display: none; }
.palco-pico .convicao { opacity: 1; transform: none; margin: 0 0 16px; font-size: clamp(44px, 5vw, 80px); line-height: 0.98; }
.palco-pico .de-verdade { opacity: 1; font-size: 18px; max-width: 34ch; }
@media (max-width: 900px) { .palco-pico .receita { width: 100%; } .palco-pico .convicao { font-size: 40px; } .palco-pico .de-verdade { font-size: 16px; } }

/* 4 · cardápio vivo: fotos reais trocando devagar + painel de sabores */
.cena-cardapio { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); min-height: 100vh; align-items: center; gap: 48px; padding: 104px var(--borda) 64px; max-width: calc(var(--largura) + 2 * var(--borda)); margin: 0 auto; }
.cardapio-palco { position: relative; aspect-ratio: 4 / 5; max-height: 78vh; border-radius: 10px; overflow: hidden; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5); background: var(--superficie); }
.cardapio-palco picture { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.cardapio-palco picture.on { opacity: 1; }
.cardapio-palco img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.cardapio-palco picture.on img { animation: aproximar 7s ease-out forwards; }
@keyframes aproximar { from { transform: scale(1.12) translate(1%, 1%); } to { transform: scale(1.0) translate(0, 0); } }
.cardapio-painel h2 { font-size: clamp(40px, 4.4vw, 64px); text-transform: uppercase; margin-bottom: 16px; }
.cardapio-painel .dica { color: var(--tinta-suave); margin-bottom: 20px; max-width: 42ch; }
.cardapio-painel .acoes { margin-top: 8px; }
@media (max-width: 900px) {
  .cena-cardapio { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 88px var(--borda) 40px; min-height: 0; }
  .cardapio-palco { aspect-ratio: 4 / 3; max-height: none; }
  .cardapio-painel h2 { font-size: 34px; }
  .cardapio-painel .acoes .botao { flex: 1 1 100%; }
}

/* 6 · casa 3D: sem borda preta — fundo vivo com o salão de verdade, desfocado, e luzes quentes passeando */
.ambiente-fundo { position: absolute; inset: 0; overflow: hidden; }
.ambiente-fundo img { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(14px) saturate(1.15) brightness(0.62); animation: respirar 26s ease-in-out infinite alternate; }
@keyframes respirar { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-2%, 1.5%); } }
.ambiente-fundo i { position: absolute; width: 46vmax; height: 46vmax; border-radius: 50%; mix-blend-mode: screen; filter: blur(30px); will-change: transform; }
.ambiente-fundo i:nth-of-type(1) { left: -10%; top: 10%; background: radial-gradient(circle, rgba(255, 190, 110, 0.35), transparent 65%); animation: luz1 18s ease-in-out infinite alternate; }
.ambiente-fundo i:nth-of-type(2) { right: -12%; bottom: -10%; background: radial-gradient(circle, rgba(222, 169, 79, 0.3), transparent 65%); animation: luz2 23s ease-in-out infinite alternate; }
.ambiente-fundo i:nth-of-type(3) { left: 40%; top: -20%; background: radial-gradient(circle, rgba(140, 190, 110, 0.18), transparent 65%); animation: luz1 29s ease-in-out infinite alternate-reverse; }
@keyframes luz1 { to { transform: translate(18vw, 12vh) scale(1.2); } }
@keyframes luz2 { to { transform: translate(-16vw, -14vh) scale(0.85); } }
/* só um esfumado suave nas pontas, para emendar com as seções vizinhas */
.palco-ambiente::after { background: linear-gradient(to bottom, var(--fundo), transparent 12%, transparent 88%, var(--fundo)), linear-gradient(to right, rgba(20, 26, 16, 0.7) 0%, rgba(20, 26, 16, 0.35) 34%, transparent 52%); }
@media (max-width: 900px) { .palco-ambiente::after { background: linear-gradient(to bottom, var(--fundo), transparent 10%, transparent 48%, rgba(20, 26, 16, 0.85) 72%, var(--fundo)); } }
.explorando .casa3d { background: transparent; }
.explorando .ambiente-fundo { position: fixed; z-index: 39; }
.fx-reduzido .ambiente-fundo img, .fx-reduzido .ambiente-fundo i, .fx-reduzido .cardapio-palco picture.on img { animation: none; }

/* 8 · drinks vivos: vídeo vertical recortado do quadro, texto por cima */
.vivos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.vivo { position: relative; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--superficie); }
.vivo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foco, 50%) 50%; transform: scale(1.02); transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.vivo:hover video { transform: scale(1.07); }
.vivo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(12, 15, 9, 0.92) 0%, rgba(12, 15, 9, 0.45) 30%, transparent 55%); pointer-events: none; }
.vivo-texto { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; }
.vivo-texto h3 { font-size: 26px; text-transform: uppercase; margin-bottom: 6px; }
.vivo-texto p { font-size: 15px; color: var(--tinta-suave); line-height: 1.4; }
@media (max-width: 1100px) { .vivos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .vivos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 calc(-1 * var(--borda)); padding: 0 var(--borda) 8px; scrollbar-width: none; }
  .vivos::-webkit-scrollbar { display: none; }
  .vivo { flex: 0 0 74%; scroll-snap-align: start; }
}
/* abertura: dois vídeos revezando com dissolvência */
.abertura-fundo { inset: -4%; will-change: transform; }
.abertura-fundo video { transition: opacity 0.9s linear; opacity: 0; }
.abertura-fundo.tocando video.frente { opacity: 1; }

/* abertura: farinha do clique/toque, por cima do vídeo e por baixo do texto */
.farinha { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.cena-inicio { cursor: crosshair; }
.cena-inicio a, .cena-inicio button { cursor: pointer; }
.abertura { z-index: 1; }
@media (max-width: 900px) { .abertura-fundo video, .abertura-fundo img { object-position: 72% 50%; } }

/* 2 · as mãos: cena grande, presa na tela; a foto ocupa a metade direita e muda a cada etapa */
.cena-maos2 { position: relative; }
.palco-maos { justify-content: flex-start; align-items: stretch; }
.maos-midia { position: absolute; top: 0; right: 0; bottom: 0; width: 58%; overflow: hidden; }
.maos-midia figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.9s ease, clip-path 1.1s cubic-bezier(0.65, 0, 0.35, 1); clip-path: inset(0 0 0 100%); }
.maos-midia img, .maos-midia video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12) translate(calc(var(--mx, 0) * -2%), calc(var(--my, 0) * -2%)); transition: transform 6s ease-out; }
[data-etapa="1"] .maos-midia figure:nth-of-type(1), [data-etapa="2"] .maos-midia figure:nth-of-type(2),
[data-etapa="3"] .maos-midia figure:nth-of-type(3), [data-etapa="4"] .maos-midia figure:nth-of-type(4) { opacity: 1; clip-path: inset(0 0 0 0); }
[data-etapa="1"] .maos-midia figure:nth-of-type(1) img, [data-etapa="2"] .maos-midia figure:nth-of-type(2) img,
[data-etapa="3"] .maos-midia figure:nth-of-type(3) img, [data-etapa="4"] .maos-midia figure:nth-of-type(4) video { transform: scale(1.02) translate(calc(var(--mx, 0) * -2%), calc(var(--my, 0) * -2%)); }
.maos-midia::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--fundo) 0%, rgba(20, 26, 16, 0.4) 18%, transparent 40%); pointer-events: none; }
.maos-texto2 { position: relative; z-index: 2; width: min(520px, 44%); padding: 0 var(--borda); display: flex; flex-direction: column; justify-content: center; }
.maos-texto2 h2 { font-size: clamp(48px, 5.4vw, 88px); text-transform: uppercase; line-height: 0.95; margin-bottom: 40px; }
.maos-etapas { list-style: none; margin: 0; padding: 0; position: relative; min-height: 190px; }
.maos-etapas li { position: absolute; inset: 0 0 auto 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-etapa="1"] .maos-etapas li:nth-of-type(1), [data-etapa="2"] .maos-etapas li:nth-of-type(2),
[data-etapa="3"] .maos-etapas li:nth-of-type(3), [data-etapa="4"] .maos-etapas li:nth-of-type(4) { transform: none; }
.maos-etapas span { display: block; font: 600 64px/1 var(--display); color: var(--ouro); opacity: 0.9; margin-bottom: 8px; }
.maos-etapas h3 { font-size: 30px; text-transform: uppercase; margin-bottom: 10px; }
.maos-etapas p { color: var(--tinta-suave); font-size: 18px; max-width: 36ch; }
.maos-pontos { display: flex; gap: 10px; margin-top: 32px; }
.maos-pontos i { width: 34px; height: 4px; border-radius: 4px; background: rgba(244, 239, 227, 0.18); cursor: pointer; transition: background 0.4s ease, width 0.4s ease; }
[data-etapa="1"] .maos-pontos i:nth-child(-n+1), [data-etapa="2"] .maos-pontos i:nth-child(-n+2),
[data-etapa="3"] .maos-pontos i:nth-child(-n+3), [data-etapa="4"] .maos-pontos i:nth-child(-n+4) { background: var(--ouro); }
@media (max-width: 900px) {
  .palco-maos { flex-direction: column; justify-content: flex-end; }
  .maos-midia { width: 100%; bottom: 40%; }
  .maos-midia::after { background: linear-gradient(to top, var(--fundo) 0%, transparent 35%); }
  .maos-texto2 { width: 100%; padding-bottom: calc(24px + 76px); justify-content: flex-end; flex: 0 0 auto; }
  .maos-texto2 h2 { font-size: 34px; margin-bottom: 16px; }
  .maos-etapas { min-height: 150px; }
  .maos-etapas span { font-size: 40px; }
  .maos-etapas h3 { font-size: 22px; }
  .maos-etapas p { font-size: 16px; }
  .maos-pontos { margin-top: 12px; }
}
.fx-reduzido .maos-midia { position: relative; width: 100%; height: 60vh; }
.fx-reduzido .maos-midia figure { position: relative; clip-path: none; opacity: 1; height: 60vh; }
.fx-reduzido .maos-etapas li { position: static; margin-bottom: 24px; }
.maos-midia { -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 34%); mask-image: linear-gradient(to right, transparent 0%, #000 34%); }
.maos-midia::after { display: none; }
@media (max-width: 900px) { .maos-midia { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%); mask-image: linear-gradient(to top, transparent 0%, #000 30%); } }
.fx-reduzido .maos-midia { -webkit-mask-image: none; mask-image: none; }

/* ===== ajustes 03/10 (2) ===== */
/* mãos: agora sem prender a rolagem; as etapas passam sozinhas */
.palco-maos { position: relative; height: 100vh; height: 100svh; min-height: 620px; display: flex; overflow: hidden; }
.maos-etapas li { opacity: 0; }
[data-etapa="1"] .maos-etapas li:nth-of-type(1), [data-etapa="2"] .maos-etapas li:nth-of-type(2),
[data-etapa="3"] .maos-etapas li:nth-of-type(3), [data-etapa="4"] .maos-etapas li:nth-of-type(4) { opacity: 1; }
.maos-pontos i { position: relative; overflow: hidden; }
.maos-pontos i::after { content: ""; position: absolute; inset: 0; background: var(--tinta); transform-origin: left; transform: scaleX(0); }
[data-etapa="1"] .maos-pontos i:nth-child(1)::after, [data-etapa="2"] .maos-pontos i:nth-child(2)::after,
[data-etapa="3"] .maos-pontos i:nth-child(3)::after, [data-etapa="4"] .maos-pontos i:nth-child(4)::after { animation: encher 4.8s linear forwards; }
@keyframes encher { to { transform: scaleX(1); } }
.maos-pontos i { width: 46px; height: 5px; }

/* a pizza de verdade: tela cheia, vídeo tocando sozinho */
.palco-pico { position: relative; height: 100vh; height: 100svh; min-height: 560px; display: flex; align-items: center; padding: 0 var(--borda); overflow: hidden; }
@media (max-width: 900px) { .palco-pico { align-items: flex-end; padding-bottom: calc(32px + 76px); } }

/* cardápio: as famílias em linhas elegantes */
.familias-lista { list-style: none; margin: 8px 0 24px; padding: 0; border-top: 1px solid var(--linha); }
.familias-lista li { display: grid; grid-template-columns: 14px 1fr; gap: 16px; align-items: start; padding: 14px 8px; border-bottom: 1px solid var(--linha); cursor: default; transition: background 0.3s ease, padding 0.3s ease; }
.familias-lista li:hover { background: rgba(222, 169, 79, 0.06); padding-left: 16px; }
.familias-lista i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); margin-top: 8px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--cor) 22%, transparent); }
.familias-lista h3 { font-size: 22px; text-transform: uppercase; margin-bottom: 2px; }
.familias-lista h3 small { font: 500 13px/1 var(--texto); color: var(--ouro); margin-left: 6px; vertical-align: 3px; }
.familias-lista p { font-size: 14px; color: var(--tinta-suave); }

/* a casa em fotos: faixa que passa sozinha */
.cena-casa2 { padding: 120px 0 64px; overflow: hidden; }
.bloco-cab { padding: 0 var(--borda); max-width: calc(var(--largura) + 2 * var(--borda)); margin: 0 auto 40px; }
.faixa { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.faixa-trilho { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; width: max-content; animation: passar 70s linear infinite; }
.faixa:hover .faixa-trilho, .faixa:focus-within .faixa-trilho { animation-play-state: paused; }
@keyframes passar { to { transform: translateX(calc(-50% - 10px)); } }
.faixa-trilho li { width: clamp(260px, 30vw, 440px); }
.faixa-trilho li:nth-child(even) { margin-top: 48px; }
.faixa-trilho .ampliar img { aspect-ratio: 4 / 5; }
.faixa-trilho li:nth-child(3n) .ampliar img { aspect-ratio: 5 / 4; }
@media (max-width: 900px) { .cena-casa2 { padding-top: 88px; } .faixa-trilho { animation-duration: 50s; } .faixa-trilho li { width: 72vw; } .faixa-trilho li:nth-child(even) { margin-top: 24px; } }
.fx-reduzido .faixa-trilho { animation: none; flex-wrap: wrap; width: auto; padding: 0 var(--borda); }
.fx-reduzido .faixa-trilho li[aria-hidden] { display: none; }

/* drinks: o cartão inclina seguindo o mouse, como se estivesse na mão */
.vivos { perspective: 1200px; }
.vivo { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; transform-style: preserve-3d; }
.vivo:hover { box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55); }
.vivo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(circle at var(--bx, 50%) var(--by, 30%), rgba(255, 240, 210, 0.16), transparent 45%); opacity: 0; transition: opacity 0.4s ease; }
.vivo:hover::before { opacity: 1; }

/* ===== abertura com ingredientes reais (03/10, 3) ===== */
.ingredientes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.abertura-luzes { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(90% 70% at 72% 40%, #1d2716 0%, var(--fundo) 70%); }
.abertura-luzes i { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(236, 184, 96, 0.55), rgba(236, 184, 96, 0) 70%); filter: blur(6px); animation: flutuar 14s ease-in-out infinite alternate; }
.abertura-luzes i:nth-child(1) { width: 90px; height: 90px; left: 48%; top: 22%; animation-duration: 13s; }
.abertura-luzes i:nth-child(2) { width: 60px; height: 60px; left: 62%; top: 18%; opacity: 0.7; animation-duration: 17s; }
.abertura-luzes i:nth-child(3) { width: 120px; height: 120px; left: 80%; top: 30%; opacity: 0.5; animation-duration: 19s; }
.abertura-luzes i:nth-child(4) { width: 70px; height: 70px; left: 55%; top: 55%; opacity: 0.45; animation-duration: 15s; }
.abertura-luzes i:nth-child(5) { width: 50px; height: 50px; left: 90%; top: 12%; opacity: 0.6; animation-duration: 21s; }
.abertura-luzes i:nth-child(6) { width: 100px; height: 100px; left: 70%; top: 70%; opacity: 0.35; animation-duration: 16s; }
.abertura-luzes i:nth-child(7) { width: 40px; height: 40px; left: 44%; top: 40%; opacity: 0.5; animation-duration: 12s; }
@keyframes flutuar { to { transform: translate(-30px, 24px) scale(1.15); opacity: 0.25; } }
.cena-inicio .abertura::before { display: block; } /* o véu escuro atrás do texto volta */
.role-mais { position: absolute; z-index: 3; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta-suave); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; transition: opacity 0.5s ease; }
.role-mais i { width: 24px; height: 38px; border: 1.5px solid rgba(244, 239, 227, 0.55); border-radius: 14px; position: relative; }
.role-mais i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ouro); animation: rodinha 1.8s ease-in-out infinite; }
@keyframes rodinha { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }
.ja-rolou .role-mais { opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .role-mais { bottom: calc(76px + 14px); } .role-mais span { display: none; } .cena-inicio { padding-bottom: 96px; } }
.fx-reduzido .abertura-luzes i, .fx-reduzido .role-mais i::after { animation: none; }

@media (min-width: 901px) { .role-mais { left: auto; right: var(--borda); transform: none; bottom: 32px; } }
.role-mais { padding: 10px 14px 8px; border-radius: 18px; background: rgba(15, 19, 12, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* casa 3D: o nome do ambiente da vez, flutuando em cima dele no mapa */
.casa3d { position: absolute; }
.amb-etiqueta { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; font: 600 15px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: #1c1608; background: var(--ouro); padding: 9px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); opacity: 0; transition: opacity 0.5s ease; }
.amb-etiqueta::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--ouro); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.amb-etiqueta.on { opacity: 1; }

/* ===== rodada 03/10 (4): rolagem por telas, galeria em passos, lupa, cardápio completo, como chegar ===== */
/* reservar sempre à mão: pílula no topo em qualquer largura de computador, botão na barra do celular */
@media (max-width: 1100px) and (min-width: 901px) { .topo-acoes .status { display: none; } }
@media (max-width: 900px) { .so-medio { display: none; } .barra-acoes { grid-template-columns: 1fr 1fr 1.3fr; } .barra-acoes a { font-size: 15px; } }

/* rolagem por telas (html.snap): a casa 3D vira uma tela só; a etapa muda pela roda do mouse (js/rolagem.js) */
.snap { scrollbar-gutter: stable; }

/* a casa em fotos: um cartão por vez, todos alinhados, sem máscara nas bordas */
.cena-casa2 { padding-bottom: 40px; }
.faixa { overflow: hidden; -webkit-mask-image: none; mask-image: none; padding: 0 var(--borda); touch-action: pan-y; }
.faixa-trilho { animation: none; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.faixa-trilho.sem-transicao { transition: none; }
.faixa-trilho li, .faixa-trilho li:nth-child(even) { margin-top: 0; }
.faixa-trilho .ampliar img, .faixa-trilho li:nth-child(3n) .ampliar img { aspect-ratio: 4 / 5; }
.faixa-controles { display: flex; align-items: center; gap: 16px; padding: 24px var(--borda) 0; }
.faixa-pontos { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.faixa-pontos button { width: 28px; height: 4px; border-radius: 4px; border: 0; padding: 0; background: rgba(244, 239, 227, 0.18); cursor: pointer; transition: background 0.4s ease, width 0.4s ease; }
.faixa-pontos button[aria-current="true"] { background: var(--ouro); width: 44px; }
.seta { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244, 239, 227, 0.25); background: rgba(20, 26, 16, 0.6); color: var(--tinta); font: 500 20px/1 var(--texto); cursor: pointer; display: grid; place-items: center; transition: border-color 0.2s ease, background 0.2s ease; }
.seta:hover { border-color: var(--ouro); background: rgba(222, 169, 79, 0.12); }
.faixa-controles .seta.prox { margin-left: auto; }
@media (max-width: 900px) { .faixa-trilho li { width: 72vw; } .faixa-trilho li:nth-child(even) { margin-top: 0; } .faixa-controles { padding-top: 16px; } }

/* a lupa: sempre visível, pra ninguém ter que adivinhar que a foto abre */
.ampliar::after { content: ""; opacity: 0.85; width: 36px; height: 36px; border: 1px solid rgba(244, 239, 227, 0.25); background: rgba(20, 26, 16, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4efe3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16l4.5 4.5M11 8.5v5M8.5 11h5'/%3E%3C/svg%3E") center / 18px no-repeat; transition: opacity 0.3s ease, background-color 0.3s ease, transform 0.3s ease; }
.ampliar:hover::after, .ampliar:focus-visible::after { opacity: 1; background-color: rgba(222, 169, 79, 0.9); transform: scale(1.08); }
/* drinks: o cartão inteiro abre o vídeo grande */
.vivo-abrir { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.vivo-abrir::after { content: ""; position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(244, 239, 227, 0.25); background: rgba(20, 26, 16, 0.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f4efe3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E") center / 18px no-repeat; opacity: 0.85; transition: opacity 0.3s ease, background-color 0.3s ease; }
.vivo:hover .vivo-abrir::after { opacity: 1; background-color: rgba(222, 169, 79, 0.9); }
.vivo-texto { z-index: 2; pointer-events: none; }

/* destaque: setas dos lados, vídeo grande */
.destaque .seta { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; }
.destaque .seta.ant { left: -64px; }
.destaque .seta.prox { right: -64px; }
.destaque .seta[hidden], .destaque [hidden] { display: none; }
.destaque video { display: block; max-width: 100%; max-height: 80vh; width: auto; margin: 0 auto; border-radius: 6px; background: #000; }
@media (max-width: 1340px) { .destaque .seta.ant { left: 8px; } .destaque .seta.prox { right: 8px; } }

/* cardápio completo */
.cardapio-completo { width: min(96vw, 1100px); max-height: 92vh; padding: 0; border: 1px solid var(--linha); border-radius: 14px; background: var(--superficie); color: var(--tinta); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.cardapio-completo:not([open]) { display: none; }
.cardapio-completo::backdrop { background: rgba(8, 10, 6, 0.9); }
.cardapio-completo[open] { animation: abrir 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.cc-topo { position: relative; padding: 28px 32px 16px; border-bottom: 1px solid var(--linha); background: var(--superficie); }
.cc-titulo h2 { font-size: clamp(32px, 4vw, 48px); text-transform: uppercase; }
.cc-topo .fechar { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--linha); background: rgba(20, 26, 16, 0.8); font-size: 24px; cursor: pointer; }
.cc-abas { display: flex; gap: 6px; margin-top: 16px; overflow-x: auto; scrollbar-width: none; }
.cc-abas::-webkit-scrollbar { display: none; }
.cc-abas button { flex: none; font: 500 14px/1 var(--texto); color: var(--tinta-suave); background: rgba(20, 26, 16, 0.6); border: 1px solid rgba(244, 239, 227, 0.14); border-radius: 999px; padding: 0 14px; min-height: 40px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: all 0.25s ease; }
.cc-abas button i, .cc-familia h3 i { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); flex: none; }
.cc-abas button[aria-current="true"] { color: var(--tinta); border-color: var(--cor); background: color-mix(in srgb, var(--cor) 16%, transparent); }
.cc-corpo { overflow-y: auto; padding: 0 32px 32px; scrollbar-width: thin; }
.cc-familia { padding-top: 32px; }
.cc-familia h3 { font-size: 28px; text-transform: uppercase; display: flex; align-items: center; gap: 12px; }
.cc-familia h3 small { font: 500 13px/1 var(--texto); letter-spacing: 0.04em; color: var(--ouro); text-transform: none; }
.cc-sabores { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 32px; }
.cc-sabores li { border-top: 1px solid var(--linha); padding: 14px 0; }
.cc-sabores h4 { font: 600 20px/1.1 var(--display); text-transform: uppercase; margin: 0 0 4px; }
.cc-sabores h4 small { font: 500 11px/1 var(--texto); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ouro); margin-left: 8px; vertical-align: 3px; white-space: nowrap; }
.cc-sabores p { font-size: 14px; color: var(--tinta-suave); line-height: 1.45; }
.cc-rodape { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-suave); }
.familias-lista li { cursor: pointer; }
@media (max-width: 900px) { .cardapio-completo { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: 0; } .cc-topo { padding: 20px var(--borda) 12px; } .cc-corpo { padding: 0 var(--borda) 32px; } .cc-sabores { grid-template-columns: minmax(0, 1fr); } }

/* como chegar: mapa à esquerda, o essencial à direita */
.onde-grade { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mapa { position: relative; aspect-ratio: 16 / 11; border-radius: 12px; overflow: hidden; background: var(--superficie); border: 1px solid var(--linha); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45); }
.mapa::before { content: "Carregando o mapa…"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; color: var(--tinta-suave); }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.8s ease; filter: invert(0.92) hue-rotate(180deg) saturate(0.6) brightness(0.92); }
.mapa.carregado iframe { opacity: 1; }
.onde-texto h2 { font-size: clamp(40px, 4.4vw, 64px); text-transform: uppercase; margin-bottom: 16px; }
.onde-texto > p:not(.rotulo) { color: var(--tinta-suave); }
.onde-texto .info { margin: 32px 0 28px; }
@media (max-width: 900px) { .onde-grade { grid-template-columns: 1fr; gap: 28px; } .mapa { aspect-ratio: 4 / 3; } .onde-texto .acoes .botao { flex: 1 1 100%; } }

/* ===== rodada 03/10 (5): passeio automático, chamariz de rolagem, abertura ===== */
/* a casa em 3D: uma tela só, o passeio anda sozinho (a seção não é mais presa pela rolagem) */
#ambiente { height: 100vh; height: 100svh; min-height: 560px; }
.amb-barra { height: 3px; border-radius: 3px; background: rgba(244, 239, 227, 0.14); margin: -8px 0 24px; overflow: hidden; max-width: 320px; }
.amb-barra i { display: block; height: 100%; background: var(--ouro); transform-origin: left; transform: scaleX(0); }
.amb-barra i.andando { animation: encher 6s linear forwards; }
.explorando .amb-barra, .fx-reduzido .amb-barra { display: none; }
.ambiente-cartao h2, .amb-texto { transition: opacity 0.4s ease; }

/* chamariz de rolagem: grande, no centro, impossível de não ver */
.role-mais, .role-mais[class] { left: 50%; right: auto; bottom: 28px; transform: translateX(-50%); flex-direction: column; gap: 10px; padding: 14px 22px 12px; border-radius: 22px; background: rgba(15, 19, 12, 0.6); border: 1px solid rgba(222, 169, 79, 0.35); color: var(--ouro); font: 600 13px/1 var(--texto); letter-spacing: 0.2em; text-transform: uppercase; box-shadow: 0 0 0 0 rgba(222, 169, 79, 0.4); animation: chamar-role 2.6s ease-out infinite; }
@keyframes chamar-role { 0% { box-shadow: 0 0 0 0 rgba(222, 169, 79, 0.45); } 70%, 100% { box-shadow: 0 0 0 18px rgba(222, 169, 79, 0); } }
.role-mais i { width: 30px; height: 50px; border: 2px solid var(--ouro); border-radius: 18px; position: relative; }
.role-mais i::after { content: ""; position: absolute; left: 50%; top: 9px; width: 5px; height: 10px; margin-left: -2.5px; border-radius: 3px; background: var(--ouro); animation: rodinha 1.8s ease-in-out infinite; }
.role-mais span { display: block; }
.role-mais b { width: 12px; height: 12px; border-right: 2px solid var(--ouro); border-bottom: 2px solid var(--ouro); transform: rotate(45deg); animation: pular 1.6s ease-in-out infinite; }
@keyframes pular { 0%, 100% { transform: translateY(-4px) rotate(45deg); opacity: 0.4; } 50% { transform: translateY(4px) rotate(45deg); opacity: 1; } }
.role-mais:hover { background: rgba(222, 169, 79, 0.14); }
@media (max-width: 900px) { .role-mais, .role-mais[class] { bottom: calc(76px + 16px); padding: 10px 16px 8px; } .role-mais span { display: block; font-size: 11px; } .role-mais i { width: 24px; height: 40px; } }
.fx-reduzido .role-mais, .fx-reduzido .role-mais b { animation: none; }

/* ===== rodada 03/10 (6): enquadramento da abertura em tela larga e baixa ===== */
/* o chamariz tem lugar reservado embaixo (não invade o texto); logo e título escalam também pela altura */
.cena-inicio { padding: 88px var(--borda) 150px; }
.selo { width: min(clamp(150px, 17vw, 260px), 24vh); margin-bottom: 20px; }
.abertura h1 { font-size: clamp(44px, min(6.8vw, 10.5vh), 104px); }
.abertura .lead { margin-top: 16px; font-size: clamp(16px, min(1.35vw, 2.4vh), 20px); }
.abertura .acoes { margin-top: 24px; }
.selos-linha { margin-top: 16px; }
.role-mais, .role-mais[class] { bottom: 20px; }
@media (max-height: 760px) and (min-width: 901px) {
  .cena-inicio { padding-top: 72px; }
  .selo { width: min(clamp(130px, 15vw, 220px), 20vh); margin-bottom: 14px; }
  .abertura .lead { max-width: 46ch; }
  .role-mais, .role-mais[class] { padding: 10px 18px 8px; gap: 6px; }
  .role-mais i { width: 24px; height: 40px; }
}
@media (max-height: 640px) and (min-width: 901px) { .selos-linha { display: none; } .role-mais span { display: none; } }

/* ===== rodada 03/10 (7): forno vivo, brilho nos botões, cursor, reserva, monte a sua, ajustes ===== */
/* fechamento: o título não estoura a coluna */
.fim-texto h2 { font-size: clamp(44px, 5vw, 96px); overflow-wrap: anywhere; }

/* forno: brasas e vapor por cima do vídeo, por baixo do texto */
.forno { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.palco-pico .receita { z-index: 2; }

/* brilho dourado passando nos botões cheios, de tempos em tempos */
.botao:not(.vazado), .pilula.ouro, .barra-acoes .ouro { position: relative; overflow: hidden; }
.botao:not(.vazado)::after, .pilula.ouro::after, .barra-acoes .ouro::after { content: ""; position: absolute; top: -40%; bottom: -40%; left: -60%; width: 36%; background: linear-gradient(105deg, transparent 0%, rgba(255, 252, 240, 0.65) 50%, transparent 100%); transform: skewX(-18deg); animation: brilhar 5.5s ease-in-out infinite; pointer-events: none; }
@keyframes brilhar { 0%, 72% { left: -60%; } 100% { left: 140%; } }
.fx-reduzido .botao::after, .fx-reduzido .pilula.ouro::after { animation: none; }

/* cursor: um cortador de pizza no computador; nos links e botões, a mãozinha de sempre */
@media (hover: hover) and (pointer: fine) {
  body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Ccircle cx='11' cy='11' r='8.5' fill='%23f4efe3' stroke='%231c1608' stroke-width='1.5'/%3E%3Ccircle cx='11' cy='11' r='2' fill='%231c1608'/%3E%3Cpath d='M16.5 16.5l9 9' stroke='%23dea94f' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M16.5 16.5l9 9' stroke='%231c1608' stroke-width='1.2' stroke-linecap='round' opacity='.35'/%3E%3C/svg%3E") 11 11, auto; }
  a, button, [role="button"], .ampliar, .vivo-abrir, label, input, select, textarea, .maos-pontos i, .faixa-pontos button { cursor: pointer; }
  input[type="text"], textarea { cursor: text; }
  .cena-inicio { cursor: inherit; }
}

/* reserva e monte a sua: mesmos painéis do cardápio completo */
.reserva, .mt-corpo { color: var(--tinta); }
.reserva-corpo { padding: 8px 32px 32px; display: grid; gap: 18px; overflow-y: auto; }
.reserva-linha { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }
.campo input, .campo select { width: 100%; font: 400 17px/1.4 var(--texto); color: var(--tinta); background: rgba(20, 26, 16, 0.7); border: 1px solid rgba(244, 239, 227, 0.15); border-radius: 8px; padding: 12px 14px; min-height: 50px; color-scheme: dark; }
.campo input:focus, .campo select:focus { outline: none; border-color: var(--ouro); }
.reserva-aviso { font-size: 15px; color: var(--ouro); min-height: 1.4em; }
.reserva-nota { font-size: 14px; color: var(--tinta-suave); }
.mt-modo { display: flex; gap: 6px; margin-top: 16px; }
.mt-modo button { font: 500 15px/1 var(--texto); color: var(--tinta-suave); background: rgba(20, 26, 16, 0.6); border: 1px solid rgba(244, 239, 227, 0.14); border-radius: 999px; padding: 0 18px; min-height: 42px; cursor: pointer; transition: all 0.25s ease; }
.mt-modo button[aria-selected="true"] { color: #1c1608; background: var(--ouro); border-color: var(--ouro); }
.mt-corpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 0.9fr); gap: 0; min-height: 0; }
.mt-escolhas { overflow-y: auto; padding: 8px 24px 32px 32px; scrollbar-width: thin; }
.mt-lado[data-lado="B"], .mt-rotulo { display: none; }
.meia .mt-lado[data-lado="B"], .meia .mt-rotulo { display: block; }
.meia .mt-lado[data-lado="A"] { padding-bottom: 16px; border-bottom: 1px solid var(--linha); margin-bottom: 16px; }
.mt-rotulo { margin: 12px 0 4px; }
.mt-familia { padding-top: 14px; }
.mt-familia h4 { font: 600 17px/1.1 var(--display); text-transform: uppercase; display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.mt-familia h4 i { width: 9px; height: 9px; border-radius: 50%; background: var(--cor); }
.mt-sabores { display: flex; flex-wrap: wrap; gap: 6px; }
.mt-sabores button { font: 500 14px/1.2 var(--texto); color: var(--tinta); background: transparent; border: 1px solid rgba(244, 239, 227, 0.18); border-radius: 999px; padding: 8px 14px; min-height: 38px; cursor: pointer; transition: all 0.2s ease; }
.mt-sabores button:hover { border-color: var(--cor); }
.mt-sabores button[aria-selected="true"] { border-color: var(--cor); background: color-mix(in srgb, var(--cor) 22%, transparent); color: var(--tinta); }
.mt-resumo { border-left: 1px solid var(--linha); padding: 24px 32px 32px 28px; display: flex; flex-direction: column; gap: 18px; background: rgba(20, 26, 16, 0.35); }
.mt-pizza { position: relative; width: 150px; height: 150px; border-radius: 50%; background: #e2b86a; box-shadow: inset 0 0 0 10px #d9a85a, 0 20px 40px rgba(0, 0, 0, 0.45); overflow: hidden; margin: 0 auto; }
.mt-pizza i { position: absolute; top: 10px; bottom: 10px; width: 65px; transition: background 0.4s ease; }
.mt-pizza i.a { left: 10px; border-radius: 65px 0 0 65px; background: var(--ca); }
.mt-pizza i.b { right: 10px; border-radius: 0 65px 65px 0; background: var(--cb); }
.mt-pizza b { position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; background: rgba(28, 22, 8, 0.25); opacity: 0; transition: opacity 0.3s ease; }
.meia .mt-pizza b { opacity: 1; }
.mt-texto h3 { font: 600 24px/1.1 var(--display); text-transform: uppercase; margin: 0 0 4px; }
.mt-texto h3 small { display: block; font: 500 11px/1 var(--texto); letter-spacing: 0.14em; color: var(--ouro); margin-bottom: 4px; }
.mt-texto h3 + p { font-size: 14px; color: var(--tinta-suave); margin-bottom: 14px; }
.mt-vazio { color: var(--tinta-suave); font-weight: 400; text-transform: none; font-family: var(--texto); font-size: 16px; }
@media (max-width: 900px) {
  .reserva-linha { grid-template-columns: 1fr; }
  .reserva-corpo { padding: 8px var(--borda) 32px; }
  .mt-corpo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .mt-escolhas { padding: 8px var(--borda) 16px; }
  .mt-resumo { border-left: 0; border-top: 1px solid var(--linha); padding: 16px var(--borda) 24px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .mt-pizza { width: 84px; height: 84px; margin: 0; box-shadow: inset 0 0 0 6px #d9a85a; }
  .mt-pizza i { top: 6px; bottom: 6px; width: 36px; } .mt-pizza i.a { left: 6px; border-radius: 36px 0 0 36px; } .mt-pizza i.b { right: 6px; border-radius: 0 36px 36px 0; }
  .mt-texto { flex: 1 1 160px; } .mt-texto h3 { font-size: 18px; } .mt-texto h3 + p { margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .mt-resumo .acoes { flex: 1 1 100%; } .mt-resumo .acoes .botao { width: 100%; } .mt-resumo .reserva-nota { display: none; }
}

/* ===== rodada 04/10: vida no site inteiro ===== */
/* camada de atmosfera atrás de tudo (pó e ingredientes gigantes desfocados) */
.atmosfera { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; }
/* grão de filme bem leve por cima de tudo (dá textura de cinema, tira o liso de tela) */
body::after { content: ""; position: fixed; inset: -60%; width: 220%; height: 220%; z-index: 2; pointer-events: none; opacity: 0.045; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grao 0.7s steps(4) infinite; }
@keyframes grao { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-1%, -1%); } 100% { transform: translate(3%, 1%); } }
.travado body::after, .fx-reduzido body::after { display: none; }

/* linha dourada que se desenha sob os títulos quando a seção chega */
.cab h2::after, .cardapio-painel h2::after, .avaliar-texto h2::after, .onde-texto h2::after, .maos-texto2 h2::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 14px; background: var(--ouro); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s; }
.fx-em-cena.cab h2::after, h2.fx-em-cena::after, .cardapio-painel h2.fx-em-cena::after { transform: scaleX(1); }
.fx-reduzido h2::after { transform: none; }

/* letreiro passando (dentro da seção da casa, acima do título) */
.faixa-letreiro { overflow: hidden; border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); margin: 0 0 56px; padding: 14px 0; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.letreiro { display: inline-flex; align-items: center; white-space: nowrap; gap: 28px; padding-right: 28px; animation: letreiro 46s linear infinite; font: 500 14px/1 var(--texto); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tinta-suave); will-change: transform; }
.letreiro i { width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); flex: none; }
@keyframes letreiro { to { transform: translateX(-50%); } }
.cena-casa2 { padding-top: 64px; }
.fx-reduzido .letreiro { animation: none; }

/* cascata nos cartões de drinks e playlists (o motor cuida da entrada; aqui só o atraso escalonado) */
.vivos > li:nth-child(2), .playlists > .playlist:nth-child(2) { transition-delay: 120ms; }
.vivos > li:nth-child(3), .playlists > .playlist:nth-child(3) { transition-delay: 240ms; }
.vivos > li:nth-child(4) { transition-delay: 360ms; }
.vivos > li:nth-child(5) { transition-delay: 480ms; }
.vivos > li:nth-child(6) { transition-delay: 600ms; }

/* equalizador ao lado do título das playlists */
.equalizador { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; margin-left: 14px; vertical-align: baseline; }
.equalizador i { width: 4px; height: 100%; background: var(--ouro); border-radius: 2px; transform-origin: bottom; animation: eq 1.1s ease-in-out infinite; }
.equalizador i:nth-child(2) { animation-delay: 0.15s; animation-duration: 0.9s; }
.equalizador i:nth-child(3) { animation-delay: 0.3s; animation-duration: 1.3s; }
.equalizador i:nth-child(4) { animation-delay: 0.45s; animation-duration: 0.8s; }
.equalizador i:nth-child(5) { animation-delay: 0.6s; animation-duration: 1.2s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }
.fx-reduzido .equalizador i { animation: none; transform: scaleY(0.6); }

/* a foto grande do cardápio e a do fechamento entram crescendo (o motor anima); o mouse puxa de leve o texto */
[data-fx-mouse] { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
/* cartões de drinks e playlists: entram em cascata quando a lista chega (a lista tem data-fx="surgir") */
.vivos > li, .playlists > .playlist { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.vivos.fx-em-cena > li, .playlists.fx-em-cena > .playlist { opacity: 1; transform: none; }
.vivos.fx-em-cena > .vivo { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: opacity 0.8s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; }
.fx-reduzido .vivos > li, .fx-reduzido .playlists > .playlist { opacity: 1; transform: none; }

/* abertura em tela larga: o título em duas linhas (a coluna de texto pode ser mais larga; a massa fica embaixo à direita) */
.abertura { max-width: min(900px, 60vw); }
.abertura h1 { font-size: clamp(44px, min(6.2vw, 10.5vh), 96px); }
@media (max-width: 900px) { .abertura { max-width: none; } }

/* ===== rodada 04/10 (2): abertura ainda mais viva ===== */
/* o título alterna frases: as palavras apagam descendo e acendem subindo */
[data-fx="palavras"]:not(.fx-em-cena) .fx-palavra { opacity: 0; transform: translateY(0.6em); }
.abertura h1 { min-height: 2.1em; }

/* cartão "sugestão da casa" flutuando no canto de cima, à direita do texto */
.destaque-casa { position: absolute; z-index: 3; right: var(--borda); top: 104px; width: 236px; padding: 10px 10px 12px; border-radius: 14px; background: rgba(20, 26, 16, 0.72); border: 1px solid rgba(222, 169, 79, 0.3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); text-decoration: none; color: var(--tinta); transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease; animation: flutuar-cartao 6s ease-in-out infinite; }
@keyframes flutuar-cartao { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
.destaque-casa:hover { border-color: var(--ouro); }
.destaque-casa img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.destaque-casa .rotulo { margin: 10px 0 2px; font-size: 11px; }
.destaque-casa strong { display: block; font: 600 20px/1.1 var(--display); text-transform: uppercase; }
.destaque-casa span { display: inline-flex; align-items: center; margin-top: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--ouro); color: #1c1608; font: 600 13px/1 var(--texto); }
@media (max-width: 1100px) { .destaque-casa { display: none; } }
@media (max-height: 760px) { .destaque-casa { width: 200px; top: 92px; } .destaque-casa strong { font-size: 17px; } }
.fx-reduzido .destaque-casa { animation: none; }

/* o vídeo da cozinha ao fundo da abertura, bem escurecido, com a luz quente por cima */
.abertura-video { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.abertura-video video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; filter: saturate(0.85) brightness(0.55); }
.abertura-video.tocando video { opacity: 0.55; }
.abertura-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(20, 26, 16, 0.96) 0%, rgba(20, 26, 16, 0.78) 40%, rgba(20, 26, 16, 0.45) 70%, rgba(20, 26, 16, 0.6) 100%), linear-gradient(to top, var(--fundo) 0%, transparent 30%); }
.abertura-luzes { z-index: 0; background: transparent; mix-blend-mode: screen; }
@media (max-width: 900px) { .abertura-video::after { background: linear-gradient(to top, var(--fundo) 0%, rgba(20, 26, 16, 0.85) 45%, rgba(20, 26, 16, 0.5) 100%); } }

/* arrastar um ingrediente pra massa */
.cena-inicio.pegando, .cena-inicio.pegando * { cursor: grabbing !important; }
/* celular: o painel ocupa a tela inteira, a partir da borda (o navegador dava uma margem e cortava 16 px à direita) */
@media (max-width: 900px) { .cardapio-completo { margin: 0; inset: 0; } }
.reserva-corpo, .cc-corpo { min-width: 0; }
/* topo legível mesmo com ingredientes passando atrás */
html:not(.rolou) .topo { background: linear-gradient(to bottom, rgba(14, 18, 11, 0.85), rgba(14, 18, 11, 0)); }

/* leveza (04/10): sem desfoque ao vivo no fundo da casa e sem mistura de camadas */
.ambiente-fundo img { filter: none; opacity: 0.55; animation-duration: 40s; }
.ambiente-fundo i { filter: none; mix-blend-mode: normal; opacity: 0.6; }

/* ===== abertura: luminária na mesa (04/10) ===== */
.cena-inicio { background: #0b0d08; }
.luminaria { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; }
.luminaria-pronta .luminaria { opacity: 1; }
.dica-luz { margin-top: 18px; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 239, 227, 0.5); display: flex; align-items: center; gap: 10px; }
.dica-luz::before { content: ""; width: 26px; height: 1px; background: var(--ouro); }
@media (hover: none) { .dica-luz { font-size: 0; } .dica-luz::after { content: "Toque na mesa"; font-size: 12px; } }
/* o texto fica sobre a parte escura; um véu suave garante a leitura */
.cena-inicio::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to right, rgba(8, 10, 6, 0.75) 0%, rgba(8, 10, 6, 0.35) 34%, transparent 55%); }
@media (max-width: 900px) { .cena-inicio::after { background: linear-gradient(to top, rgba(8, 10, 6, 0.92) 0%, rgba(8, 10, 6, 0.55) 40%, transparent 62%); } }
/* celular: a pizza fica no alto; o logo grande sai (o topo já mostra o logo) */
@media (max-width: 900px) { .cena-inicio .selo { display: none; } }
/* computador: "Sugestão da casa" no canto de baixo, para não cobrir a mesa */
@media (min-width: 901px) { .destaque-casa { top: auto; bottom: 36px; } }

/* ===== efeitos do Não Codei (04/10) ===== */
.botao, .pilula.ouro { will-change: transform; }
.status { font-variant-numeric: tabular-nums; }
.acende { transition: opacity 0.35s ease; }
.anel-nota { position: relative; width: 92px; height: 92px; flex: none; margin-right: 6px; }
.anel-nota svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anel-nota circle { fill: none; stroke-width: 8; }
.anel-nota .trilha { stroke: rgba(244, 239, 227, 0.1); }
.anel-nota .valor { stroke: var(--ouro); stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(222, 169, 79, 0.45)); }
.nota-grande { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.confete { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 200; pointer-events: none; }

.anel-nota { width: 128px; height: 128px; }
.anel-centro { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; font: 600 38px/1 var(--display); color: var(--ouro); }
.anel-centro span { font: inherit; }
dialog .confete { position: fixed; }

/* ===== abertura: mesa viva (04/10) ===== */
.cena-inicio { background: var(--fundo); }
.mesa-viva { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.mesa-foto { position: absolute; top: 0; right: 0; height: 100%; aspect-ratio: 1365 / 2048; pointer-events: auto;
  transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -14px), 0);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to top, transparent 0%, #000 12%);
  mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  opacity: 0; transition: opacity 1.2s ease; }
.mesa-pronta .mesa-foto { opacity: 1; }
.mesa-foto picture, .mesa-foto img { display: block; width: 100%; height: 100%; }
.mesa-foto img { object-fit: cover; animation: aproximar-mesa 22s ease-in-out infinite alternate; transform-origin: 60% 60%; }
@keyframes aproximar-mesa { from { transform: scale(1.02); } to { transform: scale(1.09); } }
.vapor { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* brilho que passa pelas taças de vez em quando */
.brilho-taca { position: absolute; left: 20%; top: 6%; width: 52%; height: 32%; pointer-events: none; background: linear-gradient(105deg, transparent 40%, rgba(255, 240, 215, 0.28) 50%, transparent 60%); background-size: 300% 100%; background-position: 140% 0; animation: brilho-taca 7s ease-in-out 2s infinite; mix-blend-mode: screen; border-radius: 40%; }
@keyframes brilho-taca { 0%, 60% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
/* pontos dourados (andam mais que a foto: parecem estar na frente) */
.ponto { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) translate3d(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -12px), 0); display: grid; place-items: center; width: 44px; height: 44px; text-decoration: none; color: var(--tinta); z-index: 2; }
.ponto i { width: 16px; height: 16px; border-radius: 50%; background: var(--ouro); box-shadow: 0 0 0 0 rgba(222, 169, 79, 0.6), 0 2px 10px rgba(0, 0, 0, 0.5); animation: pulso-ponto 2.2s ease-out infinite; }
.ponto:nth-of-type(2) i { animation-delay: 0.7s; } .ponto:nth-of-type(3) i { animation-delay: 1.4s; }
@keyframes pulso-ponto { 0% { box-shadow: 0 0 0 0 rgba(222, 169, 79, 0.65), 0 2px 10px rgba(0, 0, 0, 0.5); } 75%, 100% { box-shadow: 0 0 0 18px rgba(222, 169, 79, 0), 0 2px 10px rgba(0, 0, 0, 0.5); } }
.ponto span { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translate(-50%, 6px); white-space: nowrap; padding: 8px 14px; border-radius: 12px; background: rgba(16, 20, 12, 0.88); border: 1px solid rgba(222, 169, 79, 0.4); font-size: 12px; color: var(--tinta-suave); text-align: center; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.ponto span b { display: block; font: 600 15px/1.2 var(--display); text-transform: uppercase; letter-spacing: 0.04em; color: var(--tinta); }
.ponto:hover span, .ponto:focus-visible span { opacity: 1; transform: translate(-50%, 0); }
.ponto:hover i { transform: scale(1.25); }
/* rótulos sempre visíveis por alguns segundos na entrada, para a pessoa descobrir os pontos */
.mesa-pronta .ponto span { animation: mostrar-rotulo 4.5s ease 1.6s 1 both; }
.mesa-pronta .ponto:nth-of-type(2) span { animation-delay: 2.1s; } .mesa-pronta .ponto:nth-of-type(3) span { animation-delay: 2.6s; }
@keyframes mostrar-rotulo { 0% { opacity: 0; transform: translate(-50%, 6px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 6px); } }
.cena-inicio::after { background: linear-gradient(to right, rgba(20, 26, 16, 0.6) 0%, rgba(20, 26, 16, 0.2) 40%, transparent 55%); }
.cena-inicio .abertura::before { display: none; }
@media (max-width: 900px) {
  .mesa-foto { left: 50%; right: auto; height: 62vh; height: 62svh; transform: translateX(-50%) translate3d(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -8px), 0);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 30%); mask-image: linear-gradient(to top, transparent 0%, #000 30%); }
  .cena-inicio::after { background: linear-gradient(to top, var(--fundo) 0%, rgba(20, 26, 16, 0.85) 40%, transparent 62%); }
  .ponto span { font-size: 11px; padding: 6px 10px; }
}
/* tchau, cortador de pizza: cursor normal em todo o site */
body, .cena-inicio { cursor: auto !important; }
.fx-reduzido .mesa-foto img, .fx-reduzido .ponto i, .fx-reduzido .brilho-taca { animation: none; }
@media (max-width: 900px) {
  .mesa-foto { height: 44svh; top: 56px; }
  .cena-inicio { padding-top: calc(44svh + 40px); align-items: start; }
  .cena-inicio::after { background: linear-gradient(to bottom, transparent 0%, transparent calc(44svh - 40px), var(--fundo) calc(44svh + 56px)); }
  .cena-inicio .abertura h1 { font-size: clamp(34px, 9.6vw, 48px); }
  .cena-inicio .role-mais { display: none; }
}
.mesa-foto img { object-position: 50% 40%; }
@media (max-width: 900px) {
  .mesa-foto { left: 0; right: 0; width: 100%; aspect-ratio: auto; height: 50svh; top: 0; transform: translate3d(calc(var(--px, 0) * -10px), calc(var(--py, 0) * -8px), 0);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%); mask-image: linear-gradient(to top, transparent 0%, #000 22%); }
  .cena-inicio { padding-top: calc(50svh - 10px); }
  .cena-inicio::after { background: linear-gradient(to bottom, rgba(20, 26, 16, 0.45) 0%, transparent 18%, transparent calc(50svh - 70px), var(--fundo) calc(50svh + 10px)); }
  /* no celular o nome aparece embaixo do ponto (em cima ele bateria no topo da tela) */
  .ponto span { bottom: auto; top: calc(100% + 4px); }
}

/* ===== computador: cada seção = exatamente uma tela, começando abaixo do topo fixo (04/10) ===== */
@media (min-width: 901px) {
  html.snap main > section:not(#inicio):not(#maos):not(#pico):not(#ambiente) {
    min-height: 100vh; max-height: none; box-sizing: border-box;
    padding-top: 112px !important; padding-bottom: 28px !important;
  }
  /* seções em bloco: conteúdo centrado na altura da tela */
  html.snap #playlists, html.snap #onde, html.snap #drinks, html.snap #casa { display: flex; flex-direction: column; justify-content: center; }
  html.snap #avaliar, html.snap #cardapio, html.snap #fim { align-content: center; }
  /* a casa: a faixa com as informações fica abaixo do topo; as fotos cabem inteiras na altura */
  html.snap #casa .faixa-letreiro { margin-bottom: 28px; }
  html.snap #casa .cab { margin-bottom: 24px; }
  html.snap #casa .cab h2 { font-size: clamp(36px, 4.2vw, 60px); }
  html.snap #casa .ampliar img { height: clamp(220px, calc(100vh - 470px), 520px); width: 100%; aspect-ratio: auto; object-fit: cover; }
  html.snap #casa .faixa-trilho li, html.snap #casa .galeria-trilho li { width: clamp(220px, calc((100vh - 470px) * 0.82), 430px); }
  /* drinks: os seis numa fileira só, altos como um copo */
  html.snap #drinks .cab { margin-bottom: 24px; }
  html.snap #drinks .vivos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  html.snap #drinks .vivo { aspect-ratio: auto; height: clamp(260px, calc(100vh - 430px), 520px); }
  html.snap #drinks .vivo-texto h3 { font-size: 19px; }
  html.snap #drinks .vivo-texto p { font-size: 13px; }
  html.snap #drinks .mais-link { margin-top: 20px; }
  /* cardápio: a foto e a lista cabem na tela */
  html.snap #cardapio .cardapio-palco { max-height: calc(100vh - 160px); }
  html.snap #cardapio .familias-lista li { padding-top: 9px; padding-bottom: 9px; }
  html.snap #cardapio h2 { font-size: clamp(36px, 4vw, 58px); }
}
@media (min-width: 901px) {
  html.snap #casa .ampliar img { height: clamp(200px, calc(100vh - 580px), 500px); }
  html.snap #casa .faixa-trilho li, html.snap #casa .galeria-trilho li { width: clamp(220px, calc((100vh - 560px) * 0.95), 420px); }
  html.snap #casa .faixa-letreiro { margin-bottom: 18px; padding: 10px 0; }
}
/* telas baixas (notebook 1366×768 e parecidos): tudo um pouco mais compacto para caber */
@media (min-width: 901px) and (max-height: 820px) {
  html.snap main > section:not(#inicio):not(#maos):not(#pico):not(#ambiente) { padding-top: 104px !important; padding-bottom: 16px !important; }
  html.snap #cardapio h2, html.snap #casa .cab h2 { font-size: 38px; margin-bottom: 8px; }
  html.snap #cardapio .dica { margin-bottom: 8px; }
  html.snap #cardapio .familias-lista li { padding-top: 6px; padding-bottom: 6px; }
  html.snap #cardapio .familias-lista h3 { font-size: 18px; }
  html.snap #cardapio .familias-lista p { font-size: 12px; }
  html.snap #fim .fim-texto h2 { font-size: 56px; margin-bottom: 12px; }
  html.snap #fim .info { margin: 18px 0 12px; gap: 10px; }
  html.snap #fim .info div { padding-top: 10px; }
  html.snap #fim .fim-foto img { max-height: calc(100vh - 160px); }
  .cena-inicio .abertura h1 { font-size: clamp(44px, 8.2vh, 76px); }
  .cena-inicio .selo { width: 150px; margin-bottom: 18px; }
  .cena-inicio .abertura .acoes { margin-top: 20px; }
}
@media (min-width: 901px) and (max-height: 910px) {
  html.snap #cardapio .familias-lista li { padding-top: 7px; padding-bottom: 7px; }
  html.snap #cardapio { padding-bottom: 16px !important; }
}
/* abertura: rótulos que não batem no topo nem somem no degradê; aviso de rolar fora da foto */
.ponto span { transform: translate(var(--lx, -50%), 6px); }
.ponto:hover span, .ponto:focus-visible span { transform: translate(var(--lx, -50%), 0); }
@keyframes mostrar-rotulo { 0% { opacity: 0; transform: translate(var(--lx, -50%), 6px); } 12%, 80% { opacity: 1; transform: translate(var(--lx, -50%), 0); } 100% { opacity: 0; transform: translate(var(--lx, -50%), 6px); } }
.ponto.abaixo span { bottom: auto; top: calc(100% + 6px); }
@media (min-width: 901px) { .ponto.direita span { left: 50%; --lx: -22px; } }
@media (min-width: 901px) {
  .role-mais, .role-mais[class] { left: var(--borda); right: auto; transform: none; bottom: 26px; flex-direction: row; gap: 12px; padding: 10px 18px; border-radius: 999px; font-size: 11px; }
  .role-mais i { width: 20px; height: 32px; border-radius: 12px; }
  .role-mais i::after { top: 5px; }
  .role-mais b { display: none; }
}
@media (max-width: 900px) { .ponto.direita span { left: 0; --lx: -14px; } }
/* ===== abertura v2 (04/10 noite): a mesa toma a tela inteira ===== */
.mesa-fundo { position: absolute; inset: -5%; z-index: 0; transform: translate3d(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -6px), 0); }
.mesa-fundo::before { content: ""; position: absolute; inset: 0; background: url(../img/mesa-032-fundo.webp) 70% 50% / cover; animation: fundo-respira 24s ease-in-out infinite alternate; }
@keyframes fundo-respira { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.5%, 1%); } }
/* o texto continua legível: escurece à esquerda e some antes da foto */
.mesa-fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(14, 18, 11, 0.9) 0%, rgba(14, 18, 11, 0.72) 30%, rgba(14, 18, 11, 0.3) 52%, rgba(14, 18, 11, 0.1) 70%), linear-gradient(to bottom, rgba(14, 18, 11, 0.5), transparent 22%, transparent 80%, rgba(14, 18, 11, 0.6)); }
/* luzes de bokeh, só transform e opacidade (leve) */
.mesa-fundo i { position: absolute; z-index: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 200, 130, 0.5), rgba(255, 190, 110, 0.12) 45%, transparent 70%); opacity: 0; animation: bokeh 14s ease-in-out infinite; will-change: transform, opacity; }
.mesa-fundo i:nth-child(1) { left: 38%; top: 22%; width: 120px; height: 120px; animation-delay: 0s; }
.mesa-fundo i:nth-child(2) { left: 52%; top: 62%; width: 70px; height: 70px; animation-delay: -4s; animation-duration: 17s; }
.mesa-fundo i:nth-child(3) { left: 30%; top: 70%; width: 160px; height: 160px; animation-delay: -8s; animation-duration: 19s; }
.mesa-fundo i:nth-child(4) { left: 60%; top: 14%; width: 90px; height: 90px; animation-delay: -2s; animation-duration: 15s; }
.mesa-fundo i:nth-child(5) { left: 46%; top: 40%; width: 46px; height: 46px; animation-delay: -10s; animation-duration: 12s; }
.mesa-fundo i:nth-child(6) { left: 22%; top: 36%; width: 64px; height: 64px; animation-delay: -6s; animation-duration: 21s; }
@keyframes bokeh { 0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.8); } 30%, 70% { opacity: 0.55; } 50% { opacity: 0.7; transform: translate(26px, -34px) scale(1.1); } }
.mesa-viva.parada .mesa-fundo::before, .mesa-viva.parada .mesa-fundo i { animation-play-state: paused; }
.cena-inicio::after { display: none; }
.mesa-cena { position: absolute; inset: 0; z-index: 1; transform: translate3d(calc(var(--px, 0) * -18px), calc(var(--py, 0) * -12px), 0); }
.mesa-viva .mesa-foto { top: 0; right: 0; height: 100%; width: 44vw; aspect-ratio: auto; transform: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 18%), linear-gradient(to bottom, transparent 0, #000 10%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, #000 18%); }
.mesa-viva .mesa-foto img { object-position: 50% 42%; animation: none; }
.mesa-viva .brilho-taca { top: 2%; }
/* anotações de revista: anel, traço que se desenha e o texto */
.anota-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.anota-linha { fill: none; stroke: var(--ouro); stroke-width: 1.2; stroke-dasharray: calc(var(--comp) * 1px); stroke-dashoffset: calc(var(--comp) * 1px); opacity: 0.85; }
.anota-anel { fill: var(--ouro); stroke: rgba(222, 169, 79, 0.35); stroke-width: 8; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.mesa-pronta .anota-linha { animation: traco 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.mesa-pronta .anota-anel { animation: anel-surge 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) forwards, anel-respira 3s ease-in-out 2.4s infinite; }
@keyframes traco { to { stroke-dashoffset: 0; } }
@keyframes anel-surge { to { transform: scale(1); } }
@keyframes anel-respira { 0%, 100% { stroke-width: 8; stroke-opacity: 0.35; } 50% { stroke-width: 16; stroke-opacity: 0.12; } }
.anota { position: absolute; margin: 0; transform: translate(-100%, -50%); padding-right: 14px; text-align: right; white-space: nowrap; pointer-events: none; opacity: 0; }
.anota b { display: block; font: 600 17px/1.15 var(--display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6); }
.anota span { display: block; margin-top: 3px; font-size: 13px; color: var(--tinta-suave); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); }
.mesa-pronta .anota { animation: nota-entra 0.7s ease forwards; }
@keyframes nota-entra { from { opacity: 0; transform: translate(calc(-100% + 12px), -50%); } to { opacity: 1; transform: translate(-100%, -50%); } }
.dica-luz { display: none !important; }
@media (min-width: 901px) and (max-width: 1500px) { .anota b { font-size: 15px; } .anota span { font-size: 12px; } }
@media (max-width: 900px) {
  .mesa-viva .mesa-foto { left: 0; right: 0; width: 100%; height: 50svh; transform: none; -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 26%); mask-image: linear-gradient(to top, transparent 0%, #000 26%); }
  .mesa-viva .mesa-foto img { object-position: 50% 40%; }
  .mesa-cena { transform: translate3d(calc(var(--px, 0) * -8px), calc(var(--py, 0) * -6px), 0); }
  .mesa-fundo::after { background: linear-gradient(to bottom, rgba(14, 18, 11, 0.4), rgba(14, 18, 11, 0.86) 52%, var(--fundo) 100%); }
  .anota { padding: 6px 10px; border-radius: 10px; background: rgba(14, 18, 11, 0.78); border: 1px solid rgba(222, 169, 79, 0.3); }
  .anota b { font-size: 13px; } .anota span { font-size: 11px; margin-top: 1px; }
}
.fx-reduzido .mesa-fundo::before, .fx-reduzido .mesa-fundo i { animation: none; }
.fx-reduzido .anota, .fx-reduzido .anota-anel { opacity: 1; transform: translate(-100%, -50%); }
.fx-reduzido .anota-anel { transform: none; } .fx-reduzido .anota-linha { stroke-dashoffset: 0; }
/* ===== A casa (04/10 noite): menos informação de uma vez — fotos maiores, nome sobre a foto, descrição só ao passar o mouse ===== */
#casa .cab > p:not(.rotulo) { display: none; }
#casa .foto { position: relative; }
#casa .foto figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 20px 18px; border-radius: 0 0 var(--raio, 14px) var(--raio, 14px); background: linear-gradient(to top, rgba(10, 12, 8, 0.82), rgba(10, 12, 8, 0.35) 60%, transparent); pointer-events: none; }
#casa .foto figcaption strong { margin: 0; font-size: 22px; }
#casa .foto figcaption span { display: block; margin: 0; max-height: 0; opacity: 0; overflow: hidden; font: 400 14px/1.4 var(--texto); letter-spacing: 0; color: var(--tinta-suave); transition: max-height 0.35s ease, opacity 0.35s ease, margin 0.35s ease; }
#casa .foto:hover figcaption span, #casa .foto:focus-within figcaption span { max-height: 3em; opacity: 1; margin-top: 6px; }
#casa .faixa-pontos { display: none; }
#casa .faixa-controles { justify-content: flex-end; gap: 12px; padding-top: 18px; }
#casa .faixa-controles .seta.prox { margin-left: 0; }
@media (min-width: 901px) {
  html.snap #casa .faixa-trilho li, html.snap #casa .galeria-trilho li { width: clamp(300px, calc((100vh - 400px) * 0.95), 560px); }
  html.snap #casa .ampliar img { height: clamp(260px, calc(100vh - 420px), 600px); }
  html.snap #casa .cab { margin-bottom: 20px; }
}
@media (hover: none) { #casa .foto figcaption span { max-height: 3em; opacity: 1; margin-top: 4px; } }
/* casa 3D: o desfoque cobre a tela toda (antes cortava à direita) */
.ambiente-fundo img, .ambiente-fundo img[src] { inset: 0; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 50% 50%; animation: respirar-cheio 40s ease-in-out infinite alternate; }
@keyframes respirar-cheio { from { transform: scale(1.06); } to { transform: scale(1.14) translate(-1.5%, 1%); } }
.palco-ambiente::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 60% at 62% 52%, transparent 40%, rgba(12, 15, 9, 0.55) 100%); }
/* ===== CELULAR (04/10): nada vaza para o lado (animações de entrada laterais alargavam a página para 422px) ===== */
html, body { overflow-x: clip; }
main > section, main > section > *, .barra-acoes { max-width: 100vw; }
main > section { overflow-x: clip; }
/* texto que acende: começa legível (40%) e termina 100% aceso; sombra para ler sobre a foto */
.acende { opacity: 0.4; transition: opacity 0.5s ease; }
.acesa .acende { opacity: 1; }
.palco-pico .de-verdade { color: var(--tinta); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 2px 18px rgba(0, 0, 0, 0.8); }
@media (max-width: 900px) {
  /* menos vão entre as seções (o topo fixo tem 76px; 88 + 40 de respiro deixava buracos de ~130px) */
  #cardapio, #casa, #drinks, #playlists, #avaliar, #onde { padding-top: 56px !important; padding-bottom: 20px !important; }
  #fim { padding-top: 48px; padding-bottom: 24px; gap: 24px; }
  /* abertura: termina junto com o conteúdo (sobravam 150px vazios) */
  .cena-inicio { padding-bottom: 92px !important; min-height: 100svh; }
  /* "mãos" e "pico": o texto encosta na barra de baixo, sem buraco */
  .maos-texto2 { padding-bottom: calc(12px + 76px); }
  /* no fim, horário/endereço/telefone já estão logo acima em "Como chegar": sem repetir */
  #fim .info, #fim .fim-texto > .status { display: none; }
  #fim .fim-foto img { aspect-ratio: 5 / 4; }
  #fim .mais { margin-top: 20px; }
  /* 3D: cartão mais enxuto, a maquete ganha a tela */
  .ambiente-cartao .rotulo { display: none; }
  .ambiente-cartao h2 { font-size: 34px !important; margin-bottom: 6px; }
  .amb-numero { margin-bottom: 4px; }
  .amb-texto { font-size: 15px; margin-bottom: 12px; }
  #explorar { margin-top: 12px; }
  .amb-pontos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .amb-pontos::-webkit-scrollbar { display: none; }
}
.avaliacao-aviso:empty { display: none; }
.palco-pico .rotulo { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 14px rgba(0, 0, 0, 0.9); }
@media (max-width: 900px) {
  .nota-3d { display: none !important; }
  #onde .onde-texto > p:not(.rotulo) { display: none; }
  /* a marca aparece já na primeira tela (a logo grande da abertura fica escondida no celular) */
  html:not(.rolou) .marca img { opacity: 1; transform: none; pointer-events: auto; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); }
}
.anota.direita { transform: translate(0, -50%); text-align: left; }
.mesa-pronta .anota.direita { animation-name: nota-entra-dir; }
@keyframes nota-entra-dir { from { opacity: 0; transform: translate(-12px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
/* carta de drinks do salão */
.cd-aviso { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; color: var(--ouro); }
.cd-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.cd-grade li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px; border-radius: 14px; background: rgba(244, 239, 227, 0.04); border: 1px solid rgba(244, 239, 227, 0.08); }
.cd-grade img { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; }
.cd-grade h4 { margin: 2px 0 4px; font: 600 17px/1.15 var(--display); text-transform: uppercase; }
.cd-grade p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.4; color: var(--tinta-suave); }
.cd-grade small { font-size: 12px; color: var(--ouro); line-height: 1.35; display: block; }
/* ===== CELULAR (06/10): uma rolada, uma tela — cada seção para no começo e ocupa a tela inteira (sem "buracos") ===== */
@media (max-width: 900px) {
  html { scroll-snap-type: y mandatory; }
  main > section { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; min-height: 100svh; box-sizing: border-box; }
  footer { scroll-snap-align: end; }
  #casa, #drinks, #playlists, #fim, #onde, #avaliar, #cardapio { display: flex; flex-direction: column; justify-content: center; }
  #inicio { min-height: 100svh; padding-bottom: 84px !important; }
  #onde .mapa { height: 210px; min-height: 0; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { html { scroll-snap-type: y proximity; } }
@media (max-width: 900px) { #fim { min-height: 100svh !important; align-content: center; } }
.cd-sem { width: 84px; height: 84px; border-radius: 12px; background: rgba(222, 169, 79, 0.12); }
@media (max-width: 420px) { .cd-grade li { grid-template-columns: 72px minmax(0, 1fr); } .cd-grade img, .cd-sem { width: 72px; height: 72px; } }

/* ===== CELULAR · iPhone (06/10): tela útil real do Safari (~664 px no iPhone 13). Sem barra de baixo; "Pedir" no topo;
   topo mais baixo; cada seção cabe entre o topo e o fim da tela. Mesmas cores, fotos e fontes. ===== */
.so-celular { display: none; }
@media (max-width: 900px) {
  :root { --topo-cel: 56px; }
  .barra-acoes { display: none !important; }
  body { padding-bottom: 0 !important; }
  .topo { padding: 8px var(--borda) !important; min-height: var(--topo-cel); }
  .topo .marca img { width: 64px !important; }
  .topo .status { display: none; }
  .so-celular { display: inline-flex; padding: 9px 18px; font-size: 15px; min-height: 40px; align-items: center; }
  main > section { padding-top: calc(var(--topo-cel) + 14px) !important; padding-bottom: 18px !important; }

  /* abertura: foto abaixo do topo, texto e botões sempre visíveis */
  .mesa-viva .mesa-foto { top: var(--topo-cel); height: 38svh; }
  .cena-inicio { padding-top: calc(var(--topo-cel) + 38svh - 16px) !important; padding-bottom: 20px !important; }
  .cena-inicio h1 { font-size: 30px !important; }
  .cena-inicio .abertura > p:not(.rotulo):not(.selos-linha) { font-size: 14px; margin-top: 6px; }
  .cena-inicio .acoes { margin-top: 14px !important; gap: 8px !important; }
  .cena-inicio .acoes .botao { min-height: 46px; padding: 11px 18px; }
  .cena-inicio .selos-linha { margin-top: 10px !important; font-size: 12.5px; }
  .role-mais { display: none !important; }

  /* mãos e pico: texto acima do fim da tela */
  .maos-texto2 { padding-bottom: 18px !important; }
  .palco-pico { padding-bottom: 24px !important; }

  /* cardápio: famílias em grade compacta (toque abre a família) */
  #cardapio .cardapio-palco { max-height: 24svh; }
  #cardapio h2 { font-size: 30px !important; }
  #cardapio .dica { font-size: 13.5px; margin-bottom: 8px; }
  .familias-lista { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; }
  .familias-lista li { padding: 10px 10px !important; border: 1px solid rgba(244, 239, 227, 0.12) !important; border-radius: 12px; min-height: 48px; align-items: center; }
  .familias-lista li p { display: none; }
  .familias-lista li h3 { font-size: 16px !important; margin: 0 !important; }
  #cardapio .acoes { margin-top: 12px; gap: 8px; }
  #cardapio .acoes .botao { min-height: 46px; padding: 11px 16px; }

  /* casa 3D: maquete maior; cartão enxuto embaixo */
  .palco-ambiente { padding-bottom: 16px !important; }
  .ambiente-cartao h2 { font-size: 28px !important; }
  .amb-texto { font-size: 13.5px !important; margin-bottom: 8px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .amb-numero { font-size: 12px; }
  #explorar { margin-top: 8px !important; min-height: 42px; padding: 9px 16px; }

  /* a casa (fotos): fotos cabem com o título */
  #casa .cab h2 { font-size: 28px !important; }
  #casa .faixa-letreiro { margin-bottom: 8px; }
  #casa .ampliar img { height: calc(100svh - var(--topo-cel) - 250px) !important; min-height: 220px; aspect-ratio: auto !important; width: 100%; object-fit: cover; }
  #casa .faixa-controles { padding-top: 10px; }

  /* drinks: cartões cabem e o botão aparece */
  #drinks .cab > p:not(.rotulo) { display: none; }
  #drinks .cab h2 { font-size: 30px; }
  #drinks .vivo { height: calc(100svh - var(--topo-cel) - 230px) !important; min-height: 240px; aspect-ratio: auto !important; }
  #drinks .mais-link { margin-top: 12px; }

  /* playlists, avaliar, onde, fim: menos altura */
  #playlists .cab > p:not(.rotulo) { font-size: 13.5px; }
  #avaliar .cab > p:not(.rotulo), #avaliar .avaliar-texto > p:not(.rotulo):not(.nota-grande) { font-size: 13.5px; }
  #avaliar textarea { min-height: 72px; }
  #onde .mapa { height: 150px !important; }
  #onde h2 { font-size: 30px; }
  #fim .fim-foto img { aspect-ratio: 16 / 9 !important; max-height: 30svh; }
  #fim h2 { font-size: 34px; }
  #fim .acoes .botao { min-height: 46px; }

  /* toque confortável (≥ 44 px) */
  .pular, .selos-linha a, #onde dd a, .mais a { display: inline-block; padding-block: 10px; }
}
/* pedido online: alvos de toque */
@media (max-width: 900px) {
  /* a altura "pequena" da tela (com as barras do Safari aparecendo), nunca a grande */
  .palco-maos, .palco-pico, .palco-ambiente { height: 100svh !important; min-height: 0 !important; }
  #maos, #pico, #ambiente { min-height: 100svh !important; height: auto; }
  /* centraliza sem empurrar o começo para baixo do topo quando o conteúdo é maior que a tela */
  #casa, #drinks, #playlists, #fim, #onde, #avaliar, #cardapio { justify-content: safe center !important; }
  #casa .ampliar img { height: calc(100svh - var(--topo-cel) - 300px) !important; min-height: 200px; }
  #onde .mapa { height: 120px !important; }
  #onde .info div { padding-top: 6px !important; padding-bottom: 6px !important; }
  #onde .acoes { margin-top: 10px; gap: 8px; }
}
@media (max-width: 900px) {
  #maos, #pico, #ambiente { padding-top: 0 !important; padding-bottom: 0 !important; }
  #cardapio, #casa, #drinks, #playlists, #avaliar, #onde, #fim { padding-top: calc(var(--topo-cel) + 14px) !important; padding-bottom: 18px !important; }
}
/* telas baixas (iPhone SE, ~568 px úteis): um pouco mais compacto */
@media (max-width: 900px) and (max-height: 620px) {
  .cena-inicio .selos-linha .nota { display: none; }
  .mesa-viva .mesa-foto { height: 34svh; }
  .cena-inicio { padding-top: calc(var(--topo-cel) + 34svh - 16px) !important; }
  .maos-texto2 h2 { font-size: 28px !important; margin-bottom: 8px !important; }
  .maos-etapas { min-height: 120px !important; }
  .maos-etapas span { font-size: 30px !important; }
  #playlists .cab > p:not(.rotulo), #onde .onde-texto > p:not(.rotulo) { display: none; }
  #avaliar .avaliar-texto > p:not(.rotulo):not(.nota-grande) { display: none; }
  #fim .fim-foto img { max-height: 24svh; }
  #fim .mais { margin-top: 10px; }
  #onde .info div { font-size: 13.5px; }
}
@media (max-width: 900px) { #onde .acoes { display: grid !important; grid-template-columns: 1fr 1fr; } #onde .acoes .botao { min-height: 46px; padding: 10px 8px; font-size: 14.5px; } #onde h2 { font-size: 28px !important; margin-bottom: 4px; } #onde .info { margin: 8px 0 0 !important; } }
/* celular: entradas curtas e verticais — nada desliza de lado (parecia cortado) e tudo aparece logo que a tela para */
@media (max-width: 900px) {
  [data-fx="surgir"], [data-fx="subir"], [data-fx="esquerda"], [data-fx="direita"], [data-fx="crescer"] { transition-duration: 0.45s !important; }
  [data-fx="esquerda"]:not(.fx-em-cena), [data-fx="direita"]:not(.fx-em-cena), [data-fx="subir"]:not(.fx-em-cena) { transform: translateY(14px); }
  [data-fx="crescer"]:not(.fx-em-cena) { transform: scale(0.97); }
  .mesa-viva .anota:not(.anota-cel), .mesa-viva .anota.direita { display: none !important; }
}
@media (max-width: 900px) { #onde .mapa { width: 100% !important; max-width: none; } }
/* iPhone (06/10, prints do Rafael): o Safari recolhe a barra ao rolar e a tela cresce ~100 px; com "svh" cada seção ficava
   menor que a tela e a seguinte aparecia embaixo. "dvh" acompanha a tela do momento (barras abertas ou recolhidas). */
@media (max-width: 900px) {
  main > section { min-height: 100svh; }
  #maos, #pico, #ambiente { min-height: 100svh !important; }
  .palco-maos, .palco-pico, .palco-ambiente { height: 100svh !important; }
  #fim { min-height: 100svh !important; }
  .cena-inicio { min-height: 100svh; }
}
@media (max-width: 900px) { #cardapio, #casa, #drinks, #playlists, #onde { min-height: 100svh !important; } #casa .ampliar img { height: calc(100svh - var(--topo-cel) - 315px) !important; } #drinks .vivo { height: calc(100svh - var(--topo-cel) - 245px) !important; } }
@media (max-width: 900px) { #cardapio .cardapio-palco { flex: 0 0 auto; width: 100%; height: 26svh; max-height: none; aspect-ratio: auto; margin-bottom: 14px; } }
@media (max-width: 900px) and (max-height: 720px) { #cardapio .cardapio-palco { height: 16svh; margin-bottom: 10px; } #cardapio .dica { display: none; } }
@media (max-width: 900px) and (max-height: 700px) { .mesa-viva .mesa-foto { height: 35svh; } .cena-inicio { padding-top: calc(var(--topo-cel) + 35svh - 16px) !important; } }
@media (max-width: 900px) and (max-height: 620px) { #cardapio .cardapio-palco { display: none; } .cena-inicio h1 { font-size: 26px !important; } .cena-inicio .abertura > p:not(.rotulo):not(.selos-linha) { display: none; } #playlists h2 { font-size: 26px; } #onde .mapa { height: 96px !important; } }
/* avaliação no celular: uma tela só (o formulário já tem Google e gerência; TripAdvisor fica como link discreto) */
@media (max-width: 900px) {
  #avaliar { gap: 10px !important; }
  #avaliar h2 { font-size: 28px !important; margin-bottom: 6px !important; }
  #avaliar .avaliar-texto > p:not(.rotulo):not(.nota-grande) { display: none !important; }
  #avaliar .nota-grande { display: flex !important; align-items: center; gap: 12px; margin: 4px 0 0 !important; }
  #avaliar .anel-nota { width: 64px !important; height: 64px !important; flex: none; }
  #avaliar .anel-centro b, #avaliar .nota-grande b { font-size: 20px !important; }
  #avaliar .links-avaliar { margin-top: 6px !important; gap: 4px 14px !important; }
  #avaliar .links-avaliar a:not([href*="tripadvisor"]) { display: none !important; }
  #avaliar .links-avaliar a { font-size: 13px; padding-block: 8px; }
  #avaliar .avaliacao { padding: 14px !important; gap: 10px !important; }
  #avaliar .avaliacao legend { font-size: 16px !important; margin-bottom: 4px; }
  #avaliar textarea { min-height: 64px !important; height: 64px; }
  #avaliar .avaliacao .acoes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin: 0 !important; }
  #avaliar .avaliacao .acoes .botao { min-height: 46px; padding: 10px 6px; font-size: 13.5px; }
}
@media (max-width: 900px) { #avaliar .anel-centro { font-size: 19px !important; gap: 2px; } #avaliar .anel-centro * { font-size: inherit !important; } #avaliar .anel-nota circle { stroke-width: 6; } }
/* ===== abertura no CELULAR (06/10, v2): foto em cima com as taças inteiras e a pizza; texto embaixo, sem cobrir a foto;
   a altura da foto acompanha a tela, então não sobra vazio embaixo ===== */
@media (max-width: 900px) {
  .cena-inicio { --hero-txt: 300px; min-height: 100svh !important; display: flex !important; flex-direction: column; justify-content: flex-end; padding: 0 var(--borda) 18px !important; }
  .mesa-viva .mesa-foto { top: var(--topo-cel) !important; left: 0; right: 0; width: 100% !important; height: calc(100svh - var(--topo-cel) - var(--hero-txt) + 28px) !important;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 44px) !important; mask-image: linear-gradient(to top, transparent 0, #000 44px) !important; }
  .mesa-viva .mesa-foto img { object-position: 50% 14% !important; }
  .mesa-viva .anota, .mesa-viva .anota-linhas, .mesa-viva .vapor { display: none !important; }
  .mesa-fundo::after { background: linear-gradient(to bottom, rgba(14, 18, 11, 0.5), var(--fundo) 60%) !important; }
  .cena-inicio .abertura { position: relative; z-index: 2; width: 100%; height: var(--hero-txt); display: flex; flex-direction: column; justify-content: flex-end; }
  .cena-inicio h1 { font-size: 32px !important; line-height: 1.02; margin: 0 !important; }
  .cena-inicio .abertura > p:not(.rotulo):not(.selos-linha):not(.dica-luz) { display: block !important; font-size: 14px; line-height: 1.45; margin: 8px 0 0 !important; color: var(--tinta-suave); }
  .cena-inicio .acoes { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-top: 14px !important; }
  .cena-inicio .acoes .botao { min-height: 48px; padding: 10px 6px; font-size: 14.5px; width: 100%; }
  .cena-inicio .selos-linha { display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 14px !important; font-size: 12.5px; }
  .cena-inicio .selos-linha .nota { display: inline !important; }
}
/* tela baixa (barras do Safari abertas): texto um pouco mais curto, a foto mantém as taças */
@media (max-width: 900px) and (max-height: 700px) {
  .cena-inicio { --hero-txt: 246px; }
  .cena-inicio h1 { font-size: 28px !important; }
  .cena-inicio .abertura > p:not(.rotulo):not(.selos-linha):not(.dica-luz) { display: none !important; }
  .mesa-viva .mesa-foto img { object-position: 50% 10% !important; }
}
@media (max-width: 900px) {
  #inicio { padding-bottom: 16px !important; }
  .cena-inicio { --hero-txt: 262px; }
  .cena-inicio .dica-luz, .cena-inicio .selos-linha .nota-3d { display: none !important; }
  .cena-inicio .abertura { height: auto; min-height: var(--hero-txt); }
}
@media (max-width: 900px) and (max-height: 700px) { .cena-inicio { --hero-txt: 196px; } }
@media (max-width: 360px) { .cena-inicio .acoes .botao { font-size: 13px; } }
@media (max-width: 900px) { .cena-inicio .abertura > p.dica-luz { display: none !important; } }
/* abertura no celular (v3): foto e texto empilhados — a foto ocupa o espaço que sobra ACIMA do texto, nunca por baixo dele */
@media (max-width: 900px) {
  .cena-inicio { justify-content: flex-start !important; padding-top: var(--topo-cel) !important; height: 100svh; min-height: 0 !important; }
  .cena-inicio .mesa-viva { position: relative !important; inset: auto !important; flex: 1 1 auto; min-height: 140px; margin: 0 calc(-1 * var(--borda)); overflow: hidden; order: 0; }
  .cena-inicio .mesa-viva .mesa-foto { position: absolute !important; inset: 0 !important; top: 0 !important; height: 100% !important; width: 100% !important; }
  .cena-inicio .mesa-fundo { inset: 0 !important; }
  .cena-inicio .abertura { order: 1; flex: 0 0 auto; height: auto !important; min-height: 0 !important; margin-top: 4px; }
  .cena-inicio::before, .cena-inicio::after { display: none !important; }
}
@media (max-width: 900px) { .cena-inicio .mesa-viva { align-self: stretch; width: calc(100% + 2 * var(--borda)); } .cena-inicio .abertura { align-self: stretch; } }
.amb-barra { display: none !important; }
/* movimento reduzido: a maquete e o cartão ficam um embaixo do outro, sem altura fixa (nada passa por cima do botão) */
.fx-reduzido .cena-ambiente, .fx-reduzido .cena-ambiente .palco-ambiente { height: auto !important; min-height: 0 !important; padding-bottom: 32px !important; }
.fx-reduzido .cena-ambiente .casa3d { height: min(70vh, 640px); flex: 0 0 auto; }
/* casa 3D: "Explorar" e "Reservar neste ambiente" lado a lado */
.amb-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.amb-acoes #explorar { margin-top: 0 !important; }
.amb-acoes .so-cel-txt { display: none; }
@media (max-width: 900px) {
  .amb-acoes { margin-top: 8px; gap: 8px; flex-wrap: nowrap; }
  .amb-acoes .botao { min-height: 42px; padding: 9px 16px; white-space: nowrap; }
  .amb-acoes .so-largo-txt { display: none; }
  .amb-acoes .so-cel-txt { display: inline; }
}
/* ===== leveza e nada piscando (06/10): sem grão animado, sem pulsos de sombra (repintavam a tela a cada quadro);
   o reflexo dos botões e o cartão flutuante passam a andar só por transformação (a placa de vídeo faz, sem repintar) ===== */
body::after { animation: none !important; inset: 0; width: 100%; height: 100%; }
.pilula.ouro, .barra-acoes .ouro { animation: none; }
.status.aberto::before { animation: none; }
.role-mais, .role-mais[class] { animation: none; }
.ponto i { animation: none; }
.mesa-pronta .anota-anel { animation: anel-surge 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) forwards; }
.destaque-casa { animation: flutuar-leve 6s ease-in-out infinite; }
@keyframes flutuar-leve { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.botao:not(.vazado)::after, .pilula.ouro::after, .barra-acoes .ouro::after { left: -60%; animation: brilhar-leve 5.5s ease-in-out infinite; }
@keyframes brilhar-leve { 0%, 72% { transform: translateX(0) skewX(-18deg); } 100% { transform: translateX(560%) skewX(-18deg); } }
.explorando #reservarAmb { display: none; }
.fx-reduzido .botao::after, .fx-reduzido .pilula.ouro::after, .fx-reduzido .destaque-casa { animation: none; }
#reservarAmb[hidden] { display: none !important; }
/* ===== CELULAR (06/10, enquete): rolagem LIVRE (sem encaixe, que dava tranco no iPhone), alturas fixas (svh);
   topo com ícones de Reservar e WhatsApp + Pedir, que some ao descer e volta ao subir; botões afundam ao toque ===== */
@media (max-width: 900px) {
  html, html.snap { scroll-snap-type: none !important; }
  main > section, footer { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
  .topo { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
  .topo-oculto .topo { transform: translateY(-110%); }
  .topo .topo-acoes { gap: 6px; }
  .topo-icone { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(222, 169, 79, 0.45); color: var(--ouro); background: rgba(20, 26, 16, 0.55); }
  .topo-icone svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .topo-icone svg .cheio { fill: currentColor; stroke: none; }
  /* 22/10: o .so-celular dava 18px de lado ao ícone redondo e empurrava o desenho para fora do círculo */
  .topo-icone.so-celular { padding: 0; min-height: 0; flex: 0 0 auto; }
}
.topo-icone { display: none; }
@media (max-width: 900px) { .topo-icone.so-celular { display: inline-grid; } }
/* toque: o botão afunda um pouco e volta (resposta imediata ao dedo), sem o quadrado cinza do iPhone */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
.botao, .pilula, .topo-icone, #ambPontos button, .familias-lista li, .cd-grade li, button.fechar { transition: scale 0.15s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.botao:active, .pilula:active, .topo-icone:active, #ambPontos button:active, .familias-lista li:active, button.fechar:active { scale: 0.96; }
/* iPhone pequeno: "Como chegar" cabia mal (a grade crescia além da tela e cortava título, endereço e botões) */
@media (max-width: 900px) {
  .onde-grade { grid-template-columns: minmax(0, 1fr) !important; }
  .onde-grade > *, .onde-texto .info, .onde-texto .info div, .onde-texto dd { min-width: 0; }
  .onde-texto dd { overflow-wrap: anywhere; }
  .onde-texto .acoes { display: flex; flex-wrap: wrap; }
  .onde-texto .acoes .botao { flex: 1 1 0; min-width: 0; white-space: nowrap; padding-inline: 12px; }
}
@media (max-width: 360px) { #onde h2 { font-size: 26px; } }
@media (max-width: 900px) { #onde .status { white-space: normal; display: inline; } }
/* celular: o topo com fundo sólido (o desfoque atrás dele era refeito a cada quadro, por cima da camada que se mexe) */
@media (max-width: 900px) { .rolou .topo, .topo { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .rolou .topo { background: rgba(20, 26, 16, 0.96); } }

/* cardápio completo: foto do recheio ao lado de cada sabor; no fim, o botão para pedir */
.cc-sabores li { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: center; min-width: 0; }
.cc-foto { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; background: rgba(244, 239, 227, 0.06); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35); }
.cc-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cc-rodape p { margin: 0; }
/* os painéis (cardápio, reserva, drinks) nunca ficam mais largos que a tela: a fileira de abas rola dentro dela */
.cardapio-completo { grid-template-columns: minmax(0, 1fr); }
.cc-topo { min-width: 0; }
/* "Onde" no celular: o endereço já é o título (e a cidade está no rótulo), então a linha repetida sai e a de pagamento cabe */
@media (max-width: 900px) { #onde .info .so-pc { display: none; } }
#onde .so-cel { display: none; }
@media (max-width: 900px) {
  #onde .so-cel { display: inline; } #onde dd .so-pc { display: none; }
  #onde .info div { grid-template-columns: 88px minmax(0, 1fr); gap: 10px; }
  #onde .info dt { font-size: 11.5px; letter-spacing: 0.12em; }
  #onde .info dd { font-size: 15px; }
  #onde .info .status { font-size: 14px; }
}
/* iPhone SE e telas baixas: cada seção ainda cabe numa tela só */
@media (max-width: 900px) and (max-height: 620px) {
  #onde h2 { font-size: 24px !important; }
  #onde .onde-texto .info { margin: 14px 0 10px !important; gap: 6px !important; }
  #onde .info dd { font-size: 14px; }
  #onde .mapa { height: 84px !important; }
  #avaliar h2 { font-size: 26px !important; }
  #avaliar .nota-grande { flex-wrap: nowrap !important; }
  #avaliar .estrelas-linha label { font-size: 26px !important; }
  #avaliar textarea { min-height: 50px !important; height: 50px !important; }
  #avaliar .links-avaliar { margin: 6px 0 !important; }
  /* o player do Spotify só tem dois tamanhos (352 e 152): na tela baixa, o compacto, sem sobra branca */
  #playlists .playlist { min-height: 152px !important; max-height: none !important; } #playlists iframe { height: 152px !important; max-height: none !important; }
  #fim .fim-foto img { max-height: 20svh; }
}
@media (max-width: 900px) and (max-height: 620px) {
  #playlists .cab { margin-bottom: 12px !important; } #playlists .cab h2 { margin-bottom: 8px !important; }
  #avaliar .rotulo, #playlists .rotulo { margin-bottom: 8px !important; }
  #avaliar .links-avaliar { margin: 0 !important; }
}
@media (max-width: 900px) and (max-height: 620px) { #playlists .cab > p:not(.rotulo) { display: block !important; font-size: 13.5px; } }
/* telas estreitas (320 px): os nomes das famílias numa linha só */
@media (max-width: 360px) {
  .familias-lista li { padding-inline: 8px !important; }
  .familias-lista li h3 { font-size: 14.5px !important; letter-spacing: 0.02em; white-space: nowrap; }

}
/* tablet em pé (tela alta): o mapa ganha altura de verdade */
@media (max-width: 900px) and (min-height: 860px) { #onde .mapa { height: 30vh !important; } }

/* 08/10: painel de reserva nunca corta — o formulário vira a grade (topo fixo + corpo que rola) e fica mais compacto */
#reservaPainel { width: min(96vw, 760px); grid-template-rows: minmax(0, 1fr); }
#reservaPainel > .reserva { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; max-height: 100%; }
#reservaPainel .reserva-corpo { gap: 14px; padding-bottom: 24px; overscroll-behavior: contain; }
#reservaPainel .cc-topo { padding-top: 22px; padding-bottom: 14px; }
@media (max-height: 760px) { #reservaPainel .cc-titulo h2 { font-size: clamp(26px, 4vh, 40px); } #reservaPainel .reserva-corpo { gap: 10px; } #reservaPainel textarea { min-height: 0; } }

/* ===== 1.3.0 (23/10): O QUE DIZEM — avaliações reais do Google passando devagar; para ao passar o mouse ou focar ===== */
.cena-opinioes .cab { margin-bottom: 0; }
.opinioes-topo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-bottom: 32px; }
.opinioes-nota { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px 20px; border: 1px solid var(--linha); border-radius: 16px; background: var(--superficie); }
.opinioes-nota > b { font: 600 40px/1 var(--display); color: var(--ouro); }
.opinioes-nota > span { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--tinta-suave); }
.op-estrelas { color: var(--ouro); letter-spacing: 3px; font-size: 16px; }
.opinioes-faixa { margin: 0 calc(-1 * var(--borda)); overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%); }
.opinioes-faixa:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }
.opinioes-trilho { display: flex; gap: 18px; width: max-content; margin: 0; padding: 4px var(--borda); list-style: none; animation: opinioes-rolar 110s linear infinite; }
.opinioes-faixa:hover .opinioes-trilho, .opinioes-faixa:focus-within .opinioes-trilho { animation-play-state: paused; }
@keyframes opinioes-rolar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.opinioes-trilho li { width: min(340px, 78vw); flex: none; }
.opinioes-trilho figure { margin: 0; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 18px; background: var(--superficie); border: 1px solid rgba(222, 169, 79, 0.16); }
.opinioes-trilho blockquote { margin: 0; font-size: 17px; line-height: 1.5; color: var(--tinta); }
.opinioes-trilho figcaption { margin-top: auto; font-size: 14px; color: var(--tinta-suave); }
.opinioes-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 20px; }
.opinioes-links a { color: var(--ouro); display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .opinioes-trilho { animation: none; } .opinioes-faixa { overflow-x: auto; } }
.fx-reduzido .opinioes-trilho { animation: none; }
.fx-reduzido .opinioes-faixa { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .opinioes-trilho li[aria-hidden="true"] { display: none; } }
.fx-reduzido .opinioes-trilho li[aria-hidden="true"] { display: none; }
@media (min-width: 901px) { html.snap #opinioes { display: flex; flex-direction: column; justify-content: center; } }
@media (max-width: 900px) {
  #opinioes { padding-top: calc(var(--topo-cel, 56px) + 14px) !important; padding-bottom: 18px !important; display: flex; flex-direction: column; justify-content: safe center; min-height: 100svh !important; }
  #opinioes .cab h2 { font-size: 30px; margin-bottom: 8px; }
  #opinioes .cab > p:not(.rotulo) { font-size: 14px; }
  .opinioes-topo { margin-bottom: 18px; gap: 12px; }
  .opinioes-nota { padding: 10px 14px; }
  .opinioes-nota > b { font-size: 30px; }
  .opinioes-trilho figure { padding: 16px; }
  .opinioes-trilho blockquote { font-size: 15.5px; }
}
@media (max-width: 900px) and (max-height: 700px) {
  #opinioes .cab > p:not(.rotulo) { display: none; }
  #opinioes .cab h2 { font-size: 26px; }
  .opinioes-nota { padding: 8px 12px; } .opinioes-nota > b { font-size: 26px; }
  .opinioes-trilho figure { padding: 14px; gap: 8px; } .opinioes-trilho blockquote { font-size: 14px; line-height: 1.4; }
  .opinioes-links { margin-top: 10px; }
}
@media (max-width: 900px) and (max-height: 660px) {
  #opinioes .cab .rotulo { display: none; }
  #opinioes .cab h2 { font-size: 24px; margin-bottom: 4px; }
  .opinioes-nota { padding: 6px 10px; gap: 10px; } .opinioes-nota > b { font-size: 22px; }
  .opinioes-trilho figure { padding: 12px 14px; gap: 6px; }
  .opinioes-trilho li { width: 86vw; }
  .opinioes-trilho blockquote { font-size: 13px; line-height: 1.38; }
  .opinioes-topo { margin-bottom: 12px; }
  .opinioes-links { gap: 0 16px; margin-top: 6px; }
  .opinioes-links a { font-size: 14px; }
}
@media (min-width: 901px) and (max-height: 820px) {
  #opinioes .opinioes-topo { margin-bottom: 22px; }
  .opinioes-trilho li { width: 420px; }
  .opinioes-trilho figure { padding: 18px 20px; gap: 10px; }
  .opinioes-trilho blockquote { font-size: 15.5px; line-height: 1.45; }
  .opinioes-links { margin-top: 14px; }
}