/* =============================================================================
   MISTURARIA FINA MEZCLA — SISTEMA DE DESIGN
   Preservado do protótipo v1.6 e estendido para as páginas internas.
   Paleta: carvão, marrom café, vinho escuro, laranja queimado, dourado
   envelhecido, creme e verde natural.
   ========================================================================== */
:root{
  --ink-950:#0A0705;--ink-900:#120C08;--ink-800:#1D140D;--ink-700:#2E2117;
  --clay-600:#7A3B1E;--ember-500:#C0701F;--ember-400:#DA8B2E;
  --gold-300:#E3B06A;--gold-200:#F2D3A0;
  --bone-100:#F6EFE3;--bone-300:#CBBCA6;--bone-500:#8F8271;
  --wine-700:#4A1420;      /* vinho escuro */
  --green-600:#3B4A32;     /* verde natural — folhagem da fachada */
  /* TIPOGRAFIA
     Montserrat — fonte da marca. Todo o texto, navegação e botões.
     Cinzel     — fonte da logo. Entra só em rótulos curtos e nos números.
     Cormorant  — base editorial dos títulos. */
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-brand:'Cinzel',Georgia,serif;
  --font-ui:'Montserrat',-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(3rem,9vw,7.5rem);
  --fs-beat:clamp(2.3rem,6.2vw,5.2rem);
  --fs-h2:clamp(2.1rem,5vw,4rem);
  --fs-h3:clamp(1.4rem,2.4vw,2rem);
  --fs-lead:clamp(1.05rem,1.7vw,1.35rem);
  --fs-body:1.0625rem;--fs-small:.9375rem;--fs-eyebrow:.75rem;
  --sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-6:24px;--sp-8:32px;--sp-12:48px;--sp-16:64px;
  --section-y:clamp(72px,11vw,160px);--gutter:clamp(20px,5vw,64px);--maxw:1280px;
  --nav-h:72px;
  --radius-sm:2px;--radius-lg:10px;--radius-pill:999px;
  --shadow-2:0 18px 50px -12px rgb(0 0 0/.8);
  --dur-fast:160ms;--dur-base:320ms;--dur-slow:680ms;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Durante a apresentação automática o scroll-behavior:smooth precisa sair:
   ele tenta animar CADA quadro que o script move, e as duas animações brigam.
   Era o que fazia a rolagem engasgar. */
html.is-touring{scroll-behavior:auto}
body{margin:0;background:var(--ink-950);color:var(--bone-100);font-family:var(--font-ui);
  font-size:var(--fs-body);font-weight:300;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:300;line-height:.98;letter-spacing:-.02em}
p{margin:0 0 1em}
:focus-visible{outline:2px solid var(--gold-300);outline-offset:3px;border-radius:var(--radius-sm)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--sp-4);top:-100px;z-index:400;background:var(--ember-500);color:var(--ink-950);
  padding:var(--sp-3) var(--sp-6);border-radius:var(--radius-pill);font-weight:500;transition:top var(--dur-fast)}
.skip:focus{top:var(--sp-4)}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--section-y)}
.alt{background:var(--ink-900)}
.eyebrow{font-family:var(--font-brand);font-size:var(--fs-eyebrow);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-300);margin:0 0 var(--sp-4);display:block}
.h2{font-size:var(--fs-h2)}.h3{font-size:var(--fs-h3)}
.lead{font-size:var(--fs-lead);color:var(--bone-300);max-width:68ch;line-height:1.55}
.small{font-size:var(--fs-small);color:var(--bone-500)}
.rule{width:48px;height:2px;background:var(--clay-600);border:0;margin:var(--sp-8) 0 0}
.sec-head{margin-bottom:var(--sp-16)}
/* tabela de preços/capacidade da política de reservas (eventos.html) */
.policy-table{border:1px solid var(--ink-700);border-radius:var(--radius-lg);overflow:hidden}
.policy-table__row{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:var(--sp-4);
  padding:var(--sp-5) var(--sp-6);border-bottom:1px solid var(--ink-700);font-size:var(--fs-small)}
.policy-table__row:last-child{border-bottom:0}
.policy-table__row--head{background:var(--ink-900);color:var(--gold-300);
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:640px){
  .policy-table__row{grid-template-columns:1fr;gap:var(--sp-2)}
  .policy-table__row--head{display:none}
  .policy-table__row:not(.policy-table__row--head){padding:var(--sp-4) var(--sp-6)}
}
.policy-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4);
  color:var(--bone-300);font-size:var(--fs-small);line-height:1.6}
.policy-list li{padding-left:var(--sp-6);position:relative}
.policy-list li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;
  border-radius:50%;background:var(--clay-600)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:48px;
  text-align:center;padding:var(--sp-3) var(--sp-8);font-size:.9375rem;font-weight:500;letter-spacing:.06em;
  border-radius:var(--radius-pill);transition:background var(--dur-fast) var(--ease),
  transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast),color var(--dur-fast)}
.btn--primary{background:var(--ember-500);color:var(--ink-950)}
.btn--primary:hover{background:var(--ember-400);transform:translateY(-1px);box-shadow:var(--shadow-2)}
.btn--primary:active{transform:none;box-shadow:none}
.btn--secondary{border:1px solid rgb(246 239 227/.28);color:var(--bone-100);backdrop-filter:blur(6px)}
.btn--secondary:hover{border-color:var(--gold-300);color:var(--gold-200);transform:translateY(-1px)}
.btn--ghost{padding-inline:0;color:var(--gold-300);border-bottom:1px solid transparent;border-radius:0;min-height:auto}
.btn--ghost:hover{border-bottom-color:var(--gold-300)}
.btn--sm{min-height:40px;padding:var(--sp-2) var(--sp-6);font-size:.8125rem}
.actions{display:flex;flex-wrap:wrap;gap:var(--sp-4)}

/* ===================== NAV ===================== */
.nav{position:fixed;inset:0 0 auto;z-index:200;border-bottom:1px solid transparent;
  transition:background var(--dur-base),backdrop-filter var(--dur-base),border-color var(--dur-base)}
.nav.is-stuck{background:rgb(10 7 5/.9);backdrop-filter:blur(14px);border-bottom-color:var(--ink-700)}
.nav--solid{background:rgb(10 7 5/.94);backdrop-filter:blur(14px);border-bottom-color:var(--ink-700)}
.nav__in{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  max-width:var(--maxw);margin-inline:auto;padding:var(--sp-4) var(--gutter)}
.nav__logo img{height:40px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.nav__links{display:flex;align-items:center;gap:clamp(14px,2vw,28px);list-style:none;margin:0;padding:0}
.nav__links a{font-size:.8125rem;letter-spacing:.04em;color:var(--bone-300);position:relative;padding-block:var(--sp-2)}
.nav__links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-300);transition:width var(--dur-base) var(--ease)}
.nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--bone-100)}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after{width:100%}
.nav__cta{padding:var(--sp-2) var(--sp-6);min-height:40px;font-size:.8125rem}
.nav__toggle{display:none;width:48px;height:48px;align-items:center;justify-content:center;color:var(--bone-100)}
.nav__toggle span{display:block;width:22px;height:1px;background:currentColor;position:relative}
.nav__toggle span::before,.nav__toggle span::after{content:"";position:absolute;left:0;width:22px;height:1px;background:currentColor;transition:transform var(--dur-fast)}
.nav__toggle span::before{top:-7px}.nav__toggle span::after{top:7px}
@media (max-width:1080px){
  /* altura real do cabeçalho mobile alinhada ao --nav-h já usado em todo o
     site (hero, páginas internas, percurso, cardápio, FAQ) — hoje o botão
     (48px) era mais alto que a logo (40px) e o padding somava 80px reais
     contra os 72px assumidos por --nav-h, criando uma folga incorreta entre
     o cabeçalho fixo e o conteúdo abaixo dele. Com toggle e logo do mesmo
     tamanho (44px) e padding de 14px, a soma bate exatamente 72px. */
  :root{--nav-h:calc(72px + env(safe-area-inset-top))}
  .nav__in{padding:calc(14px + env(safe-area-inset-top)) var(--gutter) 14px}
  .nav__toggle{display:flex;width:44px;height:44px}
  .nav__logo img{height:44px}
  .nav__links{position:fixed;inset:0;flex-direction:column;justify-content:center;gap:var(--sp-6);
    background:var(--ink-950);transform:translateX(100%);transition:transform var(--dur-base) var(--ease);overflow-y:auto;padding:var(--nav-h) var(--gutter)}
  .nav__links a{font-size:1.4rem;font-family:var(--font-display);color:var(--bone-100)}
  .nav.is-open .nav__links{transform:none}
  .nav.is-open .nav__toggle span{background:transparent}
  .nav.is-open .nav__toggle span::before{transform:translateY(7px) rotate(45deg)}
  .nav.is-open .nav__toggle span::after{transform:translateY(-7px) rotate(-45deg)}
  .nav__cta{display:none}
}

/* ===================== NAV: SUBMENUS (Cardápio / A Casa) + DELIVERY =====================
   Botão + JS puro (sem <details>/<summary>) — trocado nesta correção porque
   o <details> nativo, dentro do painel mobile que já é animado/transformado
   (.nav__links com transform+transition), travava em alguns celulares reais
   (relatado: menu abre, mas trava ao mostrar os primeiros itens). Sem
   biblioteca nova — só um botão comum controlado por classe. */
.nav__actions{display:flex;align-items:center;gap:var(--sp-3)}
.nav__group{position:relative}
.nav__group__toggle{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;
  background:none;border:0;font:inherit;color:var(--bone-300);
  font-size:.8125rem;letter-spacing:.04em;position:relative;padding-block:var(--sp-2)}
.nav__group__toggle::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--gold-300);transition:width var(--dur-base) var(--ease)}
.nav__group__toggle:hover,.nav__group__toggle[aria-current="page"]{color:var(--bone-100)}
.nav__group__toggle:hover::after,.nav__group__toggle[aria-current="page"]::after{width:100%}
.nav__caret{width:8px;height:8px;flex:none;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform var(--dur-base)}
.nav__group.is-open .nav__caret{transform:rotate(225deg) translateY(2px)}
.nav__submenu{display:none;position:absolute;top:100%;left:0;min-width:240px;margin:var(--sp-2) 0 0;padding:var(--sp-3);
  list-style:none;background:var(--ink-900);border:1px solid var(--ink-700);border-radius:var(--radius-lg)}
.nav__group.is-open .nav__submenu{display:block}
.nav__group--casa .nav__submenu{left:auto;right:0}
.nav__submenu a{display:block;padding:var(--sp-2) var(--sp-4);font-size:.8125rem;color:var(--bone-300);
  border-radius:var(--radius-sm);white-space:nowrap;transition:color var(--dur-fast),background var(--dur-fast)}
.nav__submenu a:hover{color:var(--gold-200);background:var(--ink-800)}
.nav__mobile-only{display:none}
@media (max-width:1080px){
  .nav__actions{display:none}
  .nav__mobile-only{display:block}
  .nav__group__toggle{font-size:1.4rem;font-family:var(--font-display);color:var(--bone-100);padding-block:0}
  .nav__submenu{position:static;margin:var(--sp-4) 0 0;padding:0 0 0 var(--sp-6);border:0;background:none}
  .nav__submenu a{font-size:1rem;color:var(--bone-300);padding:var(--sp-2) 0}
}

/* ===================== HERO / PORTAL ===================== */
.portal{position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;background:var(--ink-950)}
.portal__glow{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 40%,rgba(192,112,31,.16) 0%,rgba(122,59,30,.09) 42%,transparent 74%),
             radial-gradient(90% 70% at 50% 115%,rgba(227,176,106,.07) 0%,transparent 65%);
  animation:brasa 9s ease-in-out infinite alternate}
@keyframes brasa{from{opacity:.75}to{opacity:1}}
/* vídeo de fundo do hero: mudo, com capa e opção de dispensar */
.portal__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.portal__media img,.portal__media video{width:100%;height:100%;object-fit:cover}
.portal__media video{position:absolute;inset:0;opacity:0;transition:opacity 900ms var(--ease)}
.portal__media.is-live video{opacity:1}
/* o véu só existe quando há vídeo tocando: sem mídia, o hero é fundo escuro puro */
.portal__media.is-live::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgb(10 7 5/.94) 0%,rgb(10 7 5/.72) 46%,rgb(10 7 5/.5) 100%),
             linear-gradient(to top,rgb(10 7 5/.8) 0%,transparent 46%)}
.portal__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;
  padding:calc(var(--nav-h) + var(--sp-12)) var(--gutter) var(--sp-16);
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(32px,6vw,88px);align-items:center}
.portal__mark{display:flex;justify-content:center;align-items:center;min-width:0;position:relative}
.portal__logo{width:auto;max-width:100%;height:auto;max-height:min(46vh,360px);
  filter:brightness(0) invert(1) drop-shadow(0 0 44px rgba(227,176,106,.2));opacity:.97;
  animation:logoIn 1400ms var(--ease) both}
@keyframes logoIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:.97;transform:none}}
.portal__text{min-width:0;text-align:left}
.portal h1{font-size:clamp(2.6rem,5.4vw,5rem);margin:var(--sp-6) 0 var(--sp-8);max-width:16ch}
.portal h1 em{font-style:italic;color:var(--gold-200)}
.portal__lead{font-size:var(--fs-lead);color:var(--bone-300);max-width:46ch;margin:0 0 var(--sp-12)}
.portal .actions{justify-content:flex-start}
.portal__mark::after{content:"";position:absolute;right:0;top:18%;bottom:18%;width:1px;
  background:linear-gradient(transparent,rgb(246 239 227/.16),transparent)}
@media (max-width:900px){
  .portal__in{grid-template-columns:1fr;gap:clamp(24px,6vw,40px);text-align:center;
    padding-top:calc(var(--nav-h) + var(--sp-8))}
  .portal__mark::after{display:none}
  .portal__logo{max-height:min(26vh,210px)}
  .portal__text{text-align:center}
  .portal h1{margin-inline:auto}
  .portal__lead{margin-inline:auto}
  .portal .actions{justify-content:center}
}
.nav:not(.is-stuck):not(.nav--solid) .nav__logo{opacity:0;pointer-events:none}
.nav__logo{transition:opacity var(--dur-base)}
.portal__hint{position:absolute;left:50%;bottom:var(--sp-8);transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone-500)}
.portal__hint::after{content:"";width:1px;height:40px;background:linear-gradient(var(--bone-500),transparent);animation:drip 2.6s var(--ease) infinite}
@keyframes drip{0%,100%{opacity:.25;transform:scaleY(.55)}50%{opacity:1;transform:scaleY(1)}}
@media (max-height:640px){.portal__hint{display:none}}

/* ===================== HOJE NA MISTURARIA ===================== */
.today{border-top:1px solid var(--ink-700);border-bottom:1px solid var(--ink-700);background:var(--ink-900)}
.today__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-6);margin-bottom:var(--sp-12)}
.today__day{font-family:var(--font-brand);font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300)}
.week{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-12);list-style:none;padding:0}
.week button{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:72px;padding:0 var(--sp-6);border:1px solid var(--ink-700);
  border-radius:var(--radius-pill);font-size:.8125rem;line-height:1;
  letter-spacing:.1em;text-indent:.1em;text-transform:uppercase;color:var(--bone-500);
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.week button:hover{border-color:var(--gold-300);color:var(--gold-200)}
.week button[aria-pressed="true"]{background:var(--ember-500);border-color:var(--ember-500);color:var(--ink-950);font-weight:500}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-6)}
.card{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:var(--radius-lg);
  padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4);
  transition:border-color var(--dur-base),transform var(--dur-base) var(--ease)}
.card:hover{border-color:var(--clay-600);transform:translateY(-3px)}
.card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-4)}
/* o selo desce 3px para o miolo dele bater com a altura das maiúsculas do
   título, em vez de alinhar pelo topo da caixa — que é o que parecia torto */
.card__top .tag{margin-top:3px}
.card h3{font-family:var(--font-ui);font-weight:500;font-size:1.15rem;letter-spacing:.01em;line-height:1.3}
.card__when{font-size:.8125rem;color:var(--gold-300);letter-spacing:.06em}
.card p{margin:0;color:var(--bone-300);font-size:var(--fs-small);flex:1}
.card__price{font-family:var(--font-brand);font-size:1.35rem;color:var(--gold-200);letter-spacing:.02em}
.card__price small{display:block;font-family:var(--font-ui);font-size:.75rem;color:var(--bone-500);letter-spacing:.06em}
.card__note{font-size:.8125rem;color:var(--bone-500);border-left:2px solid var(--ink-700);padding-left:var(--sp-4)}

/* CARD DE PAUSA — segunda-feira
   Mesma identidade dos outros cards, mas com uma luz quente saindo do canto e
   borda dourada. De propósito NÃO usa vermelho nem cara de erro: é uma pausa
   da casa, não uma falha nem um fechamento definitivo. */
.card--pausa{
  border-color:rgb(227 176 106/.34);
  background:radial-gradient(130% 120% at 0% 0%,rgba(122,59,30,.26) 0%,transparent 64%),var(--ink-800);
  gap:var(--sp-6)}
.card--pausa:hover{border-color:var(--gold-300);transform:none}
.card--pausa h3{font-size:1.35rem}
.tag--pausa{border-color:var(--gold-300);color:var(--gold-200)}
.card__sub{margin:0;font-family:var(--font-brand);font-size:.75rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-300)}
.card__horarios{margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-3);font-size:var(--fs-small)}
.card__horarios li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2) var(--sp-6);
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--ink-700);color:var(--bone-300)}
.card__horarios li:last-child{border-bottom:0;padding-bottom:0}
.card__horarios b{font-weight:400;color:var(--bone-100)}
.card__horarios .fechado{color:var(--gold-300)}
.card__fecho{margin:0;color:var(--bone-100);font-family:var(--font-display);
  font-size:1.2rem;line-height:1.4}
/* o card de pausa aparece sozinho na grade: não deve esticar até 100% da tela */
.cards:has(.card--pausa){grid-template-columns:minmax(0,720px)}
/* =============================================================================
   PÍLULAS — selos, etiquetas e filtros
   ---------------------------------------------------------------------------
   Duas correções que valem para todas as pílulas do site:

   1. CENTRALIZAÇÃO HORIZONTAL. O letter-spacing acrescenta o espaço DEPOIS de
      cada letra, inclusive da última. Isso empurra o texto para a esquerda e o
      espaço sobra à direita — era o desalinhamento visível. O text-indent
      devolve a mesma medida no começo e o texto volta ao centro real.

   2. CENTRALIZAÇÃO VERTICAL. Antes era inline-block com padding e line-height
      herdado (1.65), o que deixava o texto flutuando dentro da cápsula. Agora é
      inline-flex com altura mínima e line-height 1: a letra fica no eixo.

   Ao criar uma pílula nova, repita a dupla letter-spacing + text-indent com o
   MESMO valor. É a regra da casa.
   ========================================================================== */
.tag{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:26px;padding:0 12px;
  font-size:.625rem;line-height:1;letter-spacing:.16em;text-indent:.16em;
  text-transform:uppercase;white-space:nowrap;vertical-align:middle;
  border:1px solid rgb(246 239 227/.2);border-radius:var(--radius-pill);color:var(--bone-300)}
.tag--on{border-color:var(--ember-500);color:var(--ember-400)}
.tag--off{opacity:.5}
.tag--pend{border-color:var(--wine-700);color:#C98BA0}

/* =============================================================================
   SELOS VIVOS — animação dos badges de status
   ---------------------------------------------------------------------------
   Só vale para selos com a classe .tag--live (status dos cards). Os marcadores
   alimentares do cardápio ficam de propósito estáticos: "contém glúten" é
   informação de segurança e não pode piscar nem sair de cena.

   O selo chega vindo do fundo — desfocado, menor e recuado — e pousa na
   posição. Ao pousar, um brilho quente atravessa a borda uma vez. Depois entra
   numa flutuação contínua quase imperceptível. O texto nunca gira nem some,
   então a legibilidade é a mesma do estado parado.

   PARA AJUSTAR, mexa só nestas variáveis:
     --badge-dur        duração da entrada
     --badge-step       atraso entre um card e o seguinte (efeito cascata)
     --badge-depth      o quanto o selo vem "de trás" (intensidade)
     --badge-scale      tamanho inicial (quanto menor, mais profundidade)
     --badge-blur       desfoque da chegada
     --badge-float-dur  tempo de um ciclo de flutuação
     --badge-float      distância da flutuação (intensidade do movimento)
     --badge-sheen-dur  de quanto em quanto tempo o brilho passa
   ========================================================================== */
:root{
  --badge-dur:900ms;
  --badge-step:90ms;
  --badge-ease:cubic-bezier(.16,.84,.3,1);
  --badge-depth:14px;
  --badge-scale:.82;
  --badge-blur:6px;
  --badge-float-dur:7s;
  --badge-float:1.5px;
  --badge-sheen-dur:9s;
}
.tag--live{position:relative;overflow:hidden;backface-visibility:hidden;
  /* antes de entrar na tela o selo já fica invisível, para não "pular" */
  opacity:0}
.tag--live.is-in{
  opacity:1;
  animation:
    badgeIn var(--badge-dur) var(--badge-ease) calc(var(--badge-step) * var(--i,0)) both,
    badgeFloat var(--badge-float-dur) ease-in-out calc(var(--badge-dur) + var(--badge-step) * var(--i,0)) infinite;
}
@keyframes badgeIn{
  0%  {opacity:0;transform:translateY(var(--badge-depth)) scale(var(--badge-scale));filter:blur(var(--badge-blur))}
  55% {opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:blur(0)}
}
@keyframes badgeFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(calc(var(--badge-float) * -1))}
}
/* brilho quente atravessando o selo — passa rápido e some por vários segundos */
.tag--live::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(242,211,160,.42) 50%,transparent 62%);
  transform:translateX(-130%)}
.tag--live.is-in::after{
  animation:badgeSheen var(--badge-sheen-dur) ease-in-out calc(var(--badge-dur) + var(--badge-step) * var(--i,0)) infinite}
@keyframes badgeSheen{
  0%  {transform:translateX(-130%)}
  16% {transform:translateX(130%)}
  100%{transform:translateX(130%)}
}
/* selo de "acontecendo" ganha um ponto de brasa pulsando, sem mexer no texto.
   O ponto é item do flex, não elemento posicionado: assim ele fica sempre no
   eixo vertical do texto, em qualquer tamanho de fonte. */
.tag--live.tag--on::before{content:"";flex:none;
  width:6px;height:6px;border-radius:50%;background:var(--ember-500);
  animation:badgeDot 2.4s ease-in-out infinite}
@keyframes badgeDot{0%,100%{opacity:.35;transform:scale(.72)}50%{opacity:1;transform:scale(1)}}

/* no celular o desfoque e a profundidade são menores: mesma sensação, menos custo */
@media (max-width:760px){
  :root{--badge-blur:3px;--badge-depth:10px;--badge-scale:.88}
}
/* quem pediu menos movimento recebe o selo parado e legível */
@media (prefers-reduced-motion:reduce){
  .tag--live{opacity:1}
  .tag--live.is-in,.tag--live.is-in::after,.tag--live.tag--on::before{animation:none}
  .tag--live::after{display:none}
}
/* sem JavaScript o selo aparece normalmente, sem depender da animação */
html.no-js .tag--live{opacity:1}
html.no-js .tag--live::after{display:none}

/* ===================== PERCURSO ===================== */
.percurso{position:relative;background:var(--ink-950)}
.stage{position:sticky;top:0;height:100svh;overflow:hidden;z-index:1}
/* IMPORTANTE PARA A FLUIDEZ:
   a camada inativa fica com visibility:hidden e SEM filtro. A versão anterior
   mantinha blur(6px) em todas as 8 camadas de tela cheia o tempo todo — sete
   desfoques de imagem inteira rodando na GPU sem aparecer para ninguém. Era a
   causa principal da rolagem travada. Agora só opacidade e escala fazem a
   transição, e as duas rodam no compositor, sem repintar nada. */
.layer{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.04);
  transition:opacity 1500ms var(--ease),transform 1900ms var(--ease),visibility 0s linear 1500ms}
.layer.is-on{opacity:1;visibility:visible;transform:scale(1);transition-delay:0s,0s,0s}
.layer video,.layer img{width:100%;height:100%;object-fit:cover}
.layer img{position:absolute;inset:0;z-index:0}
.layer video{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity 1400ms var(--ease)}
.layer.is-live video{opacity:1}
.layer--still.is-on img{animation:kenburns 16s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.0) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-2%,-1.5%,0)}}
/* foto retrato (1536×2048) usada na passagem 08: bem mais pesada para decodificar
   que as demais (paisagem ~1600×900). Até ela ser recortada/otimizada, tiramos
   a animação contínua de zoom para não sobrecarregar a composição durante a
   rolagem automática — foi o que travou a página. */
.layer--pesada.is-on img{animation:none}
.layer--fogo.is-on img{animation:fogoZoom 22s ease-in-out infinite alternate}
@keyframes fogoZoom{from{transform:scale(1.04)}to{transform:scale(1.16)}}
.layer--fogo .fogo{position:absolute;inset:0;z-index:2;pointer-events:none;
  mix-blend-mode:screen;opacity:0;transition:opacity 900ms var(--ease)}
.layer--fogo.is-on .fogo{opacity:1}
@media (prefers-reduced-motion:reduce){.layer--fogo .fogo{display:none}}
.layer--placa.is-on img{animation:aproximar 9s ease-in-out infinite alternate;transform-origin:58% 52%}
@keyframes aproximar{from{transform:scale(1)}to{transform:scale(1.6)}}
@keyframes entrar{from{transform:scale(1.02)}to{transform:scale(1.16)}}
.layer--quintal.is-on img{animation:entrar 24s ease-out infinite alternate;transform-origin:52% 58%}
/* Os dois vídeos preservados (farinha e forno) ocupam passagens separadas,
   cada um em tela cheia. Usam o comportamento padrão de .layer: a foto real
   fica atrás como capa e o vídeo assume por cima quando termina de carregar. */
/* =============================================================================
   03 — O MUNDO · galeria cinematográfica
   ---------------------------------------------------------------------------
   Uma fotografia por vez, nunca colagem. A coluna da esquerda é o fundo escuro
   onde a legenda respira; a da direita recebe a foto, com margem real, moldura
   de 1px e um fio dourado separando as duas — nada de emenda seca.
   As etiquetas de país (.paises) comandam qual foto aparece.

   PARA AJUSTAR:
     --gal-texto     largura da coluna de texto (35% a 42%)
     --gal-margem    respiro entre a moldura e a borda da tela
     --gal-fade      duração do crossfade entre as fotos
   ========================================================================== */
:root{--gal-texto:40%;--gal-margem:clamp(18px,2.6vw,44px);--gal-fade:700ms}

.layer--galeria .gal{display:grid;grid-template-columns:var(--gal-texto) 1fr;height:100%}
.layer--galeria .gal__side{position:relative;
  background:radial-gradient(95% 85% at 8% 42%,rgba(122,59,30,.32) 0%,transparent 72%),var(--ink-950)}
/* o fio dourado envelhecido que separa texto e fotografia */
.layer--galeria .gal__side::after{content:"";position:absolute;top:10%;bottom:10%;right:0;width:1px;
  background:linear-gradient(transparent,rgb(227 176 106/.42),transparent)}
.layer--galeria .gal__frame{position:relative;margin:0;padding:var(--gal-margem);
  background:var(--ink-950);min-width:0;overflow:hidden}
.layer--galeria .gal__stage{position:relative;width:100%;height:100%;overflow:hidden;
  border-radius:var(--radius-lg);border:1px solid rgb(246 239 227/.11);
  box-shadow:0 34px 90px -34px rgb(0 0 0/.92)}
.layer--galeria .gal__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.02);
  /* padronização discreta de exposição, contraste e saturação entre as fotos.
     Não altera prato, ingrediente nem montagem — é ajuste de tela. */
  filter:saturate(1.03) contrast(1.04) brightness(.99);
  transition:opacity var(--gal-fade) var(--ease),transform 900ms var(--ease)}
.layer--galeria .gal__img.is-on{opacity:1;transform:scale(1)}
/* sem véu por cima: a coluna escura já dá o contraste do texto */
.stage:has(.layer--galeria.is-on) .stage__veil{opacity:0}

/* etiquetas de país — viram controles, mantendo o desenho das demais.
   Escopado à trilha ativa (.is-on): como todas as trilhas ocupam a mesma
   célula do grid (empilhadas), sem isso os botões de país continuavam
   clicáveis mesmo com a trilha invisível (opacity:0), podendo interceptar
   cliques destinados à trilha realmente visível na tela. */
.beat.is-on .paises{pointer-events:auto}
.beat .paises button{font:inherit;font-size:.6875rem;line-height:1;
  letter-spacing:.16em;text-indent:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--bone-300);border:1px solid rgb(246 239 227/.2);border-radius:var(--radius-pill);
  padding:0 16px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.beat .paises button:hover{border-color:var(--gold-300);color:var(--gold-200)}
.beat .paises button[aria-pressed="true"]{background:var(--clay-600);border-color:var(--clay-600);
  color:var(--bone-100)}

@media (max-width:900px){
  /* no celular a galeria em duas colunas (pensada pro desktop) não cabe
     junto com o texto sem sobrepor a foto. Em vez de dividir a tela, a
     foto passa a ocupar a tela inteira, exatamente como nos outros
     trilhos — as fotos continuam trocando pelos botões de país, só a
     moldura/coluna dupla é que some aqui. O texto volta a usar o mesmo
     véu escuro por cima que os demais trilhos já usam. */
  .layer--galeria .gal{display:block;height:100%}
  .layer--galeria .gal__side{display:none}
  .layer--galeria .gal__frame{position:absolute;inset:0;margin:0;padding:0;background:none}
  .layer--galeria .gal__stage{border-radius:0;border:0;box-shadow:none}
  .layer--galeria .gal__img{position:absolute;inset:0}
  .stage:has(.layer--galeria.is-on) .stage__veil{opacity:1}
}
/* passagem sem foto real ainda: placeholder ocupando a cena inteira */
.layer--ph{background:var(--ink-950)}
.layer--ph .ph{width:100%;height:100%;border:0;border-radius:0;
  background:radial-gradient(60% 60% at 50% 45%,rgba(122,59,30,.18) 0%,transparent 72%),
    repeating-linear-gradient(135deg,var(--ink-900) 0 14px,var(--ink-950) 14px 28px)}
.stage:has(.layer--flip.is-on) .stage__veil{
  background:linear-gradient(to left,rgb(10 7 5/.92) 0%,rgb(10 7 5/.5) 44%,rgb(10 7 5/.06) 74%,rgb(10 7 5/.3) 100%),
             linear-gradient(to top,rgb(10 7 5/.55) 0%,transparent 38%)}
/* trilha da farinha (pedido seguinte, mesmo checkpoint): a partir de
   1280px (--maxw) o bloco .beats para de crescer e fica centralizado na
   tela, com folga vazia dos dois lados — então mesmo essa trilha já sendo
   "início" (esquerda) por padrão, ela acaba ficando visualmente puxada
   pro centro, caindo em cima da nuvem clara de farinha do vídeo e ficando
   difícil de ler. Reconquista exatamente essa folga só nessa trilha,
   pousando ela na borda real da tela (a --gutter de distância), igual
   ficaria se .beats não tivesse teto de largura. */
@media (min-width:1280px){
  .beat.beat--massa{margin-left:calc(-1 * (100vw - var(--maxw)) / 2)}
}
@media (min-width:1024px){
  /* TESTE (pedido 21h12): título maior só no site — a base em :root usa vw
     e cai pro piso do clamp em telas estreitas, então bumpar ali vazava
     pro celular. Sobrescrevendo só aqui dentro. */
  :root{--fs-beat:clamp(2.6rem,6.8vw,5.8rem)}
  .beat--dir{justify-self:end;text-align:right}
  .beat--dir .beat__num{flex-direction:row-reverse}
  .beat--dir .beat__num::after{background:linear-gradient(270deg,var(--gold-300),transparent)}
  .beat--dir ul{justify-content:flex-end}
  /* especificidade reforçada (.beats.beats) de propósito: a regra geral de
     .beats (mais abaixo no arquivo) define padding-inline:var(--gutter), que
     tem a MESMA especificidade e vem DEPOIS — por isso sobrescrevia esse
     padding-right silenciosamente, tirando toda a folga extra reservada pro
     rótulo da trilha lateral (#rail span). Resultado real: em passagens
     alinhadas à direita (.beat--dir, ex. "A reserva"), o texto do título
     ficava embaixo do rótulo da trilha ao passar o mouse/focar o botão —
     mesmo padrão de bug já corrigido pro celular em outro ponto deste
     arquivo, só que este caso (desktop) tinha ficado de fora.
     96px não bastava; a folga precisa caber: distância do botão até a borda
     (até 30px) + vão do rótulo (34px) + rótulo mais longo, "Gran Finale"
     (~99px) + margem de segurança — por isso 190px. */
  /* TESTE (pedido 21h12): igualando ao respiro esquerdo, sem os 190px extra
     reservados pro rótulo do rail — risco conhecido: título pode voltar a
     ficar embaixo do rótulo mais comprido ("Gran Finale") no hover/foco do
     rail. Conferir esse trilho especificamente antes de aprovar. */
  .beats.beats{padding-right:var(--gutter)}
  /* NÃO usar "ch" aqui — "ch" é sempre relativo ao font-size do PRÓPRIO
     .beat (17px, herdado do corpo do texto), não ao do h2 lá dentro,que usa
     --fs-beat e cresce até 83px em telas grandes. Resultado: em telas
     largas (a partir de ~1342px, onde --fs-beat atinge o teto do clamp) o
     título gigante ficava espremido numa caixa de ~425px pensada pra uma
     fonte de 17px — quebrava em 6+ linhas empilhadas, cortando/estourando a
     passagem. Quanto maior a tela, pior, porque --fs-beat cresce com vw até
     esse teto.
     A correção: calcular a largura a partir do PRÓPRIO --fs-beat (a mesma
     variável que já define o tamanho do título), não de "ch". O multiplicador
     11.5 foi escolhido pra reproduzir a largura de ~425px que já funcionava
     bem nas telas menores (34ch a 17px ≈ 425px ≈ --fs-beat(36.8px) × 11.5),
     e a partir daí escala junto com o título em vez de ficar para trás. */
  /* .beat.beat (especificidade reforçada, mesmo motivo do comentário acima):
     a regra geral ".beat{max-width:38ch}" vem depois no arquivo e tem a
     MESMA especificidade — sem reforçar, ela vencia e a correção acima
     nunca chegava a valer, mesmo dentro do media query certo. */
  .beat.beat{max-width:calc(var(--fs-beat) * 11.5)}
  /* TESTE (pedido 21h12): parágrafo das trilhas maior só no site — não usa
     --fs-lead pra não alterar o tamanho em outras partes do site que
     compartilham essa mesma variável (hero, FAQ etc.) */
  .beat p{font-size:clamp(1.2rem,2vw,1.6rem)}
  /* corredor (pedido seguinte, mesmo checkpoint): título com folga extra
     (1.2, ver comentário mais abaixo) somado ao título maior do site fazia
     esse trilho especificamente estourar em telas baixas e cobrir as
     pílulas do rodapé. Aperta só no site, igualando ao espaçamento padrão
     dos demais títulos — celular mantém o 1.2 original.
     especificidade reforçada (.beat--extra.beat--extra) de propósito: a
     regra geral ".beat.beat--extra h2{line-height:1.2}" vem DEPOIS no
     arquivo com a MESMA especificidade — sem reforçar, ela vence e este
     ajuste nunca chega a valer (foi exatamente o que aconteceu: testado,
     não resolveu). */
  .beat.beat--extra.beat--extra h2{line-height:1.04}
  /* corredor (causa real, achada pelo print): a caixa do corredor usa
     max-width:46ch, um valor pensado pra fonte pequena do corpo do texto
     (17px). O título dele é enorme (--fs-beat × 1.08) — na tela grande do
     print, a caixa de ~460px só cabe 1-2 palavras por linha, e "Este
     corredor mostra a você o coração da casa." vira 6 linhas empilhadas,
     empurrando o parágrafo pra cima da pílula "pular a experiência".
     Mesma correção já aplicada em ".beat.beat" (calcular a largura a
     partir do PRÓPRIO --fs-beat, não de "ch") — 14 reproduz uma caixa um
     pouco mais generosa que o 11.5 dos demais títulos, mantendo o "um
     pouco maior" que já era a proposta original do corredor. */
  .beat.beat--extra.beat--extra{max-width:calc(var(--fs-beat) * 14)}
  /* mesmo ajuste, agora no parágrafo e na dica: a folga de 1.75/1.7 fazia
     sentido pro corredor antigo (fonte pequena), mas com o parágrafo
     maior de hoje (regra acima) ficou alto demais somado ao título.
     Aperta pro mesmo respiro dos demais textos do site. */
  .beat.beat--extra.beat--extra p{line-height:1.5}
  .beat.beat--extra.beat--extra .beat__hint{margin-top:var(--sp-4);line-height:1.4}
}
.stage__veil{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to right,rgb(10 7 5/.92) 0%,rgb(10 7 5/.5) 44%,rgb(10 7 5/.06) 74%,rgb(10 7 5/.3) 100%),
             linear-gradient(to top,rgb(10 7 5/.55) 0%,transparent 38%)}
@media (max-width:760px){
  .stage__veil{background:
    linear-gradient(to bottom,rgb(10 7 5/.55) 0%,rgb(10 7 5/.78) 34%,rgb(10 7 5/.80) 62%,rgb(10 7 5/.92) 100%)}
  .beat h2,.beat p,.beat .beat__num{text-shadow:0 1px 2px rgb(10 7 5/.9),0 2px 22px rgb(10 7 5/.75)}
  /* em telas baixas, centralizar verticalmente corta o topo do texto das
     passagens mais longas (título+lista+botão). No celular a legenda volta
     a começar do topo da área, sem cortar nada. Embaixo, espaço extra pra
     não encostar no aviso "apresentando" nem no botão "pular", que ficam
     fixos na base da tela. */
  /* especificidade reforçada (.beats.beats / .beat.beat) de propósito: as
     regras gerais de .beats/.beat vêm DEPOIS no arquivo, e com a mesma
     especificidade a que vem por último vence — mesmo dentro de @media.
     Sem isso, essas correções de celular são sobrescritas silenciosamente. */
  .beats.beats{align-items:start;padding-top:var(--sp-12);padding-bottom:320px}
  /* max-width em "ch" depende da fonte e, em alguns celulares reais, ficava
     mais largo que a tela, cortando texto e botões pra fora da borda. No
     celular o texto passa a respeitar a largura real disponível. */
  /* min-width:0 é essencial aqui: item de grid, por padrão, se recusa a
     encolher abaixo da largura do próprio conteúdo (min-width:auto) — é
     por isso que max-width sozinho não bastava e o texto/botões vazavam
     pra fora da tela. */
  .beats.beats{grid-template-columns:minmax(0,1fr)}
  .beat.beat{max-width:100%;width:100%;min-width:0;overflow-wrap:break-word}
  .beat.beat ul{max-width:100%;min-width:0}
  .beat.beat .paises{flex-wrap:wrap;min-width:0}
  .beat.beat .paises button{white-space:normal}
  /* fundo sólido em vez de backdrop-filter: no celular o desfoque de fundo
     repinta a cada quadro da rolagem e é um dos maiores custos da tela */
  .beat li{background:rgb(10 7 5/.62)}
  /* o grão usa mix-blend-mode em tela cheia, caro em GPU de celular */
  .grain{display:none}
  .skip-exp{backdrop-filter:none;background:rgb(10 7 5/.78)}
  /* Trilho 1 (A Rua) ficou mais alto no celular depois do bloco de Delivery
     (frase + botão) — compacta só este trilho, sem mexer nos demais. */
  .beat.beat--street .beat__num{margin-bottom:var(--sp-3)}
  .beat.beat--street h2{font-size:clamp(2.25rem,10vw,2.75rem);line-height:.98;max-width:22rem;margin-bottom:var(--sp-4)}
  .beat.beat--street p{font-size:clamp(1rem,4.3vw,1.18rem);line-height:1.37;margin-top:1.25rem}
  .beat.beat--street ul{gap:.48rem;margin-top:.65rem}
  .beat.beat--street li{padding:.45rem .95rem;min-height:2.2rem}
  /* Trilho 6 (O Mundo) ficou mais alto no celular com o segundo parágrafo +
     etiquetas de país + botão — compacta só este trilho, mesmo padrão já
     usado no Trilho 1 (A Rua). */
  .beat.beat--mundo .beat__num{margin-bottom:var(--sp-3)}
  .beat.beat--mundo h2{font-size:clamp(2.25rem,10vw,2.75rem);line-height:.98;max-width:22rem;margin-bottom:var(--sp-4)}
  .beat.beat--mundo p{font-size:clamp(1rem,4.3vw,1.18rem);line-height:1.37;margin-top:.65rem}
  .beat.beat--mundo p:first-of-type{margin-top:1.25rem}
  .beat.beat--mundo ul{gap:.48rem;margin-top:.65rem}
  .beat.beat--mundo .paises button{padding:.45rem .95rem;min-height:2.2rem}
  .beat.beat--mundo .actions{margin-top:.65rem}
  .beat.beat--mundo .actions .btn{min-height:3.1rem;padding-inline:1.65rem}
  /* Trilho 7 (A casa) ficou mais alto no celular com dois parágrafos + selos
     + botão, encostando no pill fixo do tour — compacta só este trilho,
     mesmo padrão já usado nas trilhas anteriores. */
  .beat.beat--casa .beat__num{margin-bottom:var(--sp-3)}
  .beat.beat--casa h2{font-size:clamp(2.25rem,10vw,2.75rem);line-height:.98;max-width:22rem;margin-bottom:var(--sp-4)}
  .beat.beat--casa p{font-size:clamp(1rem,4.3vw,1.18rem);line-height:1.37;margin-top:.65rem}
  .beat.beat--casa p:first-of-type{margin-top:1.25rem}
  .beat.beat--casa ul{gap:.48rem;margin-top:.65rem}
  .beat.beat--casa li{padding:.45rem .95rem;min-height:2.2rem}
  .beat.beat--casa .actions{margin-top:.65rem}
  .beat.beat--casa .actions .btn{min-height:3.1rem;padding-inline:1.65rem}
}
#dust{position:absolute;inset:0;z-index:4;pointer-events:none}
.flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(70% 55% at 50% 55%,rgba(255,206,140,.55) 0%,rgba(214,126,40,.22) 45%,transparent 78%);
  mix-blend-mode:screen;transition:opacity 90ms linear}
.flash.is-hot{opacity:1;transition:opacity 620ms var(--ease)}
.grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.7'/></svg>")}
/* ALINHAMENTO DAS LEGENDAS
   Antes cada legenda era centralizada pelo próprio bloco. Como umas têm
   etiquetas e botão e outras não, o título de cada passagem caía numa altura
   diferente — subia e descia a cada troca.
   Agora a linha do grid é dimensionada pela legenda mais alta e centralizada
   como um bloco só (align-content:center), enquanto cada legenda começa no
   topo dessa linha (align-items:start). Resultado: o número e o título ficam
   sempre na MESMA altura nas oito passagens. */
.beats{position:absolute;z-index:9;top:var(--nav-h);bottom:0;left:0;right:0;
  width:100%;max-width:var(--maxw);margin-inline:auto;
  padding-inline:var(--gutter);
  /* folga em cima e embaixo: sem ela a legenda mais alta encosta na borda do
     palco e a primeira letra é cortada. Embaixo, abre espaço para o botão de
     pular a experiência, que agora fica centralizado na base. */
  padding-top:var(--sp-6);padding-bottom:calc(var(--sp-16) + var(--sp-6));
  pointer-events:none;
  display:grid;grid-template-rows:auto;
  /* "safe center": centraliza normalmente, mas nos trilhos com mais linhas
     (07 e 08, que têm 2-3 parágrafos) evita que o topo do texto suba atrás
     da barra de navegação fixa quando não cabe centralizado. */
  align-content:safe center;align-items:safe center;justify-items:start}
.beat{grid-area:1/1;max-width:38ch;
  opacity:0;transform:translateY(34px);transition:opacity 1100ms var(--ease),transform 1100ms var(--ease)}
.beat.is-on{opacity:1;transform:none}
.beat__num{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-6);
  font-family:var(--font-brand);font-size:var(--fs-eyebrow);letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold-300)}
.beat__hint{margin-top:var(--sp-6);font-size:.6875rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--bone-500)}
.beat__num::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-300),transparent);opacity:.45}
/* line-height menor que 1 fazia a maiúscula do começo estourar a caixa de
   linha e ser cortada pela borda do palco (que tem overflow:hidden).
   1.04 devolve o espaço da haste alta sem afrouxar o título. */
.beat h2{font-size:var(--fs-beat);line-height:1.04;margin-bottom:var(--sp-6)}
.beat h2 em{font-style:italic;color:var(--gold-200)}
.beat p{color:var(--bone-300);margin:0;font-size:var(--fs-lead);line-height:1.5}
/* tela extra (bem-vindo/corredor): composição centralizada, um pouco maior,
   com mais espaço entre linhas — pedido específico dessa passagem */
.beat.beat--extra{justify-self:center;text-align:center;max-width:46ch}
.beat.beat--extra .eyebrow{text-align:center}
.beat.beat--extra h2{font-size:calc(var(--fs-beat) * 1.08);line-height:1.2}
.beat.beat--extra p{line-height:1.75}
.beat.beat--extra .beat__hint{margin-top:var(--sp-8);line-height:1.7}
.beat ul{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-8) 0 0;padding:0}
.beat li{display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:0 15px;
  font-size:.6875rem;line-height:1;letter-spacing:.16em;text-indent:.16em;
  text-transform:uppercase;color:var(--bone-300);white-space:nowrap;
  border:1px solid rgb(246 239 227/.2);border-radius:var(--radius-pill)}
.beat .actions{margin-top:var(--sp-8)}
/* mesmo motivo do .paises acima: só a trilha visível pode receber clique. */
.beat.is-on .actions{pointer-events:auto}
/* Em janela baixa (notebook, celular deitado) a legenda mais alta não cabe na
   altura do palco e o topo do título fica cortado. Em vez de esconder
   conteúdo, o conjunto encolhe proporcionalmente.
   Limite subiu de 860 para 900 (pedido 21h12, ajuste seguinte): notebook comum
   de 15,6" com Windows a 125% de zoom mede 864px de altura de viewport — só
   4px acima do limite antigo. Como o título/parágrafo do site cresceram no
   bloco min-width:1024px, essa faixa (861-900px) deixou de ter espaço e o
   texto passou a cobrir as pílulas fixas (tour/pular) no rodapé da tela. */
@media (max-height:900px){
  :root{--fs-beat:clamp(1.8rem,4.2vw,3rem)}
  .beat__num{margin-bottom:var(--sp-4)}
  .beat h2{margin-bottom:var(--sp-3)}
  .beat p{font-size:.9375rem;line-height:1.35}
  .beat ul,.beat .actions{margin-top:var(--sp-4)}
}
@media (max-height:700px){
  :root{--fs-beat:clamp(1.55rem,3.6vw,2.3rem)}
  .beat__num{margin-bottom:var(--sp-3)}
  .beat p{font-size:.875rem;line-height:1.3}
  .beat ul,.beat .actions{margin-top:var(--sp-3)}
  .beat li{padding:4px 11px;min-height:26px}
}
/* passagens com mais parágrafos + botão (06, 07, 08) em telas bem baixas
   (celular com barra do navegador visível, notebook pequeno): mais um
   nível de encolhimento para o botão nunca ficar fora da área visível. */
@media (max-height:600px){
  :root{--fs-beat:clamp(1.4rem,3.2vw,2rem)}
  .beat h2{margin-bottom:var(--sp-2)}
  .beat p{font-size:.8125rem;line-height:1.25}
  .beat__hint{margin-top:var(--sp-3)}
}
/* Trilho 6 (O Mundo): no celular (bloco @media max-width:760px acima) o h2 e
   os espaçamentos usam tamanhos fixos, não a variável --fs-beat — por isso
   não encolhiam junto com as passagens comuns quando a tela também é baixa
   (celular real com a barra do navegador visível, ~640-700px de altura). O
   botão "Viajar pelo cardápio" ficava embaixo da barra fixa de Delivery/
   Reservar. Este bloco cobre exatamente essa combinação (estreita + baixa)
   e encolhe só o Trilho 6 mais um passo, liberando altura suficiente. */
@media (max-width:760px) and (max-height:760px){
  .beats.beats{padding-top:var(--sp-6)}
  .beat.beat--mundo .beat__num{margin-bottom:var(--sp-2)}
  .beat.beat--mundo h2{font-size:clamp(1.55rem,6.6vw,2rem);margin-bottom:var(--sp-2)}
  .beat.beat--mundo p{font-size:.8125rem;line-height:1.25;margin-top:.35rem}
  .beat.beat--mundo ul{gap:.3rem;margin-top:.35rem}
  .beat.beat--mundo .paises button{padding:.28rem .6rem;min-height:1.7rem}
  .beat.beat--mundo .actions{margin-top:.35rem}
  .beat.beat--mundo .actions .btn{min-height:2.4rem;padding-inline:1.1rem}
}
.progress{position:absolute;z-index:7;left:0;bottom:0;height:2px;width:100%;background:rgb(246 239 227/.12)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--clay-600),var(--ember-500),var(--gold-300))}
.rail{position:absolute;z-index:6;right:clamp(14px,2.2vw,30px);top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:var(--sp-3)}
.rail button{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);color:var(--bone-500);
  font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;transition:color var(--dur-fast);position:relative;min-height:20px}
.rail span{opacity:0;transform:translateX(6px);transition:opacity var(--dur-fast),transform var(--dur-fast);
  position:absolute;right:34px;white-space:nowrap;pointer-events:none}
.rail i{width:20px;height:1px;background:currentColor;flex:none;transition:width var(--dur-base) var(--ease)}
.rail button:hover,.rail button.is-active{color:var(--gold-300)}
.rail button:hover span,.rail button:focus-visible span{opacity:1;transform:none}
.rail button.is-active i{width:38px}
@media (max-width:1023px){.rail{display:none}}
.trigger{height:100vh}
/* apresentação automática — sempre visível e sempre interrompível */
.tour{position:fixed;left:var(--gutter);bottom:var(--sp-8);z-index:195;
  display:inline-flex;align-items:center;gap:var(--sp-3);min-height:44px;
  padding:10px 20px;border-radius:var(--radius-pill);
  background:rgb(10 7 5/.72);backdrop-filter:blur(10px);
  border:1px solid rgb(246 239 227/.22);color:var(--bone-300);
  font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity var(--dur-base),transform var(--dur-base) var(--ease),border-color var(--dur-fast),color var(--dur-fast)}
.tour.is-on{opacity:1;transform:none;pointer-events:auto}
.tour:hover{border-color:var(--gold-300);color:var(--gold-200)}
.tour__flame{flex:none;fill:var(--ember-500);transform-origin:50% 85%;
  animation:chama 2.4s ease-in-out infinite}
@keyframes chama{
  0%,100%{opacity:.7;transform:scale(.9) rotate(-2deg)}
  40%{opacity:1;transform:scale(1.06) rotate(1.5deg)}
  70%{opacity:.85;transform:scale(.97) rotate(-1deg)}
}
@media (max-width:1080px){.tour{bottom:calc(var(--sp-8) + 60px)}}
@media (prefers-reduced-motion:reduce){.tour{display:none}}

/* dica de deslizar, só em celular — mesma linguagem visual da dica "role
   para entrar" do hero, só que na lateral e indicando gesto vertical. */
.swipe-hint{display:none;position:fixed;right:var(--sp-5);top:50%;z-index:190;
  transform:translateY(-50%);flex-direction:column;align-items:center;gap:var(--sp-3);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone-500);
  pointer-events:none;opacity:0;transition:opacity 500ms var(--ease)}
.swipe-hint.is-on{opacity:1}
.swipe-hint i{width:14px;height:14px;border-right:2px solid var(--bone-500);border-bottom:2px solid var(--bone-500);
  transform:rotate(45deg);animation:swipeBounce 1.6s ease-in-out infinite}
@keyframes swipeBounce{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(4px,4px)}}
@media (max-width:760px){.swipe-hint{display:flex}}
@media (prefers-reduced-motion:reduce){.swipe-hint{display:none}}

/* pular a experiência — centralizado na base, onde não cruza com o texto.
   Antes ficava no topo direito e passava por cima do título das passagens. */
.skip-exp{position:absolute;z-index:10;left:50%;transform:translateX(-50%);
  bottom:var(--sp-8);
  font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone-300);
  border:1px solid rgb(246 239 227/.22);border-radius:var(--radius-pill);padding:10px 18px;
  background:rgb(10 7 5/.5);backdrop-filter:blur(6px);min-height:40px;display:inline-flex;align-items:center;
  transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.skip-exp:hover{border-color:var(--gold-300);color:var(--gold-200);background:rgb(10 7 5/.72)}
/* no celular sobe para não encostar no botão fixo de reserva */
@media (max-width:1080px){
  .skip-exp{bottom:calc(var(--sp-4) + 92px + env(safe-area-inset-bottom))}
  /* o aviso da apresentação também vai para o centro, acima do botão de pular */
  .tour{left:50%;right:auto;transform:translate(-50%,12px);bottom:calc(var(--sp-4) + 148px + env(safe-area-inset-bottom));
    max-width:calc(100% - var(--gutter) * 2)}
  .tour.is-on{transform:translate(-50%,0)}
}

/* No celular a barra fixa (.dock) já oferece Delivery e Reservar o
   tempo todo — os botões "Pedir Delivery" espalhados pelo conteúdo
   (trilhos, seção "O que a casa faz de melhor", topo do Cardápio)
   ficam redundantes nessa largura e foram a causa da sobreposição
   com o pill do tour. Somem só no celular; no desktop continuam. */
@media (max-width:1080px){
  .beat.beat--fogo .small,.beat.beat--fogo .actions{display:none}
  .beat.beat--maos .actions{display:none}
  .beat.beat--mundo a[data-track-label="mundo"]{display:none}
  a[data-track="delivery"][data-track-label="mesa"]{display:none}
  a[data-track="delivery"][data-track-label="cardapio-topo"]{display:none}
}

/* Trilha 9 (O Gran Finale) — o vídeo já reserva o sujeito mais à direita;
   no celular (tela estreita), o recorte automático (object-fit:cover)
   cortaria a sobremesa pela esquerda sem isso. */
@media (max-width:1080px){
  .layer--finale video,.layer--finale img{object-position:70% 50%}
}

/* ===================== SEÇÕES ===================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink-700);border-bottom:1px solid var(--ink-700)}
.stat{padding:var(--sp-12) var(--sp-6);text-align:center;border-right:1px solid var(--ink-700);transition:opacity var(--dur-base);min-width:0}
.stat:hover,.stat:focus-visible{opacity:.82}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:var(--font-brand);font-weight:500;font-size:clamp(1.5rem,3.1vw,2.3rem);color:var(--gold-300);line-height:1.15;overflow-wrap:break-word}
.stat span{display:block;margin-top:var(--sp-3);font-size:.8125rem;color:var(--bone-300)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--ink-700)}
  /* no celular, "no TripAdvisor" e "seguidores" no tamanho de desktop
     quebravam palavra inteira no meio da linha; reduz só aqui. */
  .stat b{font-size:clamp(1.15rem,4.6vw,1.5rem)}
}
.manifesto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.manifesto ul{list-style:none;margin:var(--sp-12) 0 0;padding:0;display:grid;gap:var(--sp-6)}
.manifesto li{padding-left:var(--sp-6);border-left:2px solid var(--clay-600);color:var(--bone-300)}
.manifesto b{font-family:var(--font-brand);font-size:1.15rem;font-weight:500;letter-spacing:.04em;color:var(--bone-100);display:block}
.manifesto figure{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-lg);margin:0}
.manifesto figure img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.manifesto{grid-template-columns:1fr}.manifesto figure{order:-1;aspect-ratio:4/3}}
.dishes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--sp-6)}
.dish{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color var(--dur-base),transform var(--dur-base) var(--ease)}
.dish[hidden]{display:none}
.dish:hover{border-color:var(--clay-600);transform:translateY(-3px)}
.dish__img{aspect-ratio:16/10;overflow:hidden;position:relative}
.dish__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.dish:hover .dish__img img{transform:scale(1.04)}
.dish__body{padding:var(--sp-8);display:flex;flex-direction:column;flex:1;gap:var(--sp-4)}
.dish__body h3{font-family:var(--font-ui);font-weight:500;font-size:1.06rem;letter-spacing:.01em;line-height:1.35}
.dish__body p{margin:0;color:var(--bone-300);font-size:var(--fs-small);flex:1}
.dish__meta{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.dish__serve{font-size:.75rem;color:var(--bone-500);letter-spacing:.06em}
/* curadorias */
.curation{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-12);padding:0;list-style:none}
.curation button{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 var(--sp-6);border:1px solid var(--ink-700);border-radius:var(--radius-pill);
  font-size:.8125rem;line-height:1;letter-spacing:.08em;text-indent:.08em;white-space:nowrap;
  color:var(--bone-300);transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)}
.curation button:hover{border-color:var(--gold-300);color:var(--gold-200)}
.curation button[aria-pressed="true"]{background:var(--clay-600);border-color:var(--clay-600);color:var(--bone-100)}

/* placeholder de imagem real pendente */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--sp-8);
  min-height:180px;height:100%;background:
    repeating-linear-gradient(135deg,var(--ink-800) 0 12px,var(--ink-900) 12px 24px);
  border:1px dashed var(--clay-600);border-radius:var(--radius-lg);color:var(--bone-500);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.6}
.ph span{max-width:34ch}
.ph b{display:block;font-family:var(--font-brand);color:var(--gold-300);margin-bottom:var(--sp-2);letter-spacing:.2em}

.menus{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--sp-4)}
.menu-card{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-8);min-height:180px;
  padding:var(--sp-8);background:var(--ink-800);border:1px solid var(--ink-700);border-radius:var(--radius-lg);
  transition:border-color var(--dur-base),background var(--dur-base),transform var(--dur-base) var(--ease)}
.menu-card:hover{border-color:var(--gold-300);background:var(--ink-700);transform:translateY(-3px)}
.menu-card h3{font-size:1.5rem;margin-bottom:var(--sp-2)}
.menu-card p{margin:0;font-size:var(--fs-small);color:var(--bone-500)}
.menu-card .link{font-size:.8125rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-300)}
/* abas de cardápio (Cardápio Principal / Vinhos / Drinks / Fondue) —
   mesmo padrão visual dos botões de país da Trilha 6 (fundo sólido no
   estado ativo, mesma paleta) */
.menu-tabs{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.menu-tab{font:inherit;background:none;border:1px solid rgb(246 239 227/.2);border-radius:var(--radius-pill);
  color:var(--bone-300);padding:var(--sp-2) var(--sp-6);font-size:.8125rem;letter-spacing:.04em;cursor:pointer;
  transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}
.menu-tab:hover{color:var(--gold-200);border-color:var(--gold-300)}
.menu-tab.is-active{background:var(--clay-600);border-color:var(--clay-600);color:var(--bone-100)}
.menu-panel[hidden]{display:none}
.chef{display:grid;grid-template-columns:.85fr 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.chef figure{aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-lg);margin:0}
.chef figure img{width:100%;height:100%;object-fit:cover}
.chef blockquote{margin:var(--sp-8) 0 0;padding-left:var(--sp-6);border-left:2px solid var(--clay-600);
  font-family:var(--font-display);font-style:italic;font-size:1.6rem;line-height:1.35;color:var(--gold-200)}
@media (max-width:900px){.chef{grid-template-columns:1fr}.chef figure{aspect-ratio:4/3}}
.events{position:relative;overflow:hidden;border-radius:var(--radius-lg);isolation:isolate}
.events__bg{position:absolute;inset:0;z-index:-1}
.events__bg img{width:100%;height:100%;object-fit:cover}
.events__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgb(10 7 5/.96) 8%,rgb(10 7 5/.78) 48%,rgb(10 7 5/.3) 100%)}
.events__in{padding:clamp(48px,8vw,110px);max-width:64ch}
.book{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,110px)}
.info{margin:0;padding:0;display:grid;gap:var(--sp-8)}
.info dt{font-size:var(--fs-eyebrow);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-300);margin-bottom:var(--sp-2)}
.info dd{margin:0;color:var(--bone-300)}
.info dd strong{color:var(--bone-100);font-weight:400}
.map{aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--ink-700);margin-top:var(--sp-8)}
.map iframe{width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.86)}
@media (max-width:900px){.book{grid-template-columns:1fr}}

/* ===================== FORMULÁRIOS ===================== */
.form{display:grid;gap:var(--sp-6)}
.field{display:grid;gap:var(--sp-2)}
.field label{font-size:.8125rem;letter-spacing:.08em;color:var(--bone-300)}
.field label .req{color:var(--ember-400)}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;padding:var(--sp-3) var(--sp-4);
  background:var(--ink-900);color:var(--bone-100);font:inherit;font-size:var(--fs-small);
  border:1px solid var(--ink-700);border-radius:var(--radius-sm);
  transition:border-color var(--dur-fast),background var(--dur-fast)}
.field textarea{min-height:110px;resize:vertical;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold-300);background:var(--ink-800);outline:none}
.field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:#C0392B}
.field .err{font-size:.75rem;color:#E9917F;min-height:1em}
.field__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-6)}
.form__note{font-size:.8125rem;color:var(--bone-500);border-left:2px solid var(--clay-600);padding-left:var(--sp-4);margin:0}
fieldset{border:1px solid var(--ink-700);border-radius:var(--radius-lg);padding:var(--sp-8);margin:0}
legend{font-family:var(--font-brand);font-size:.8125rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300);padding-inline:var(--sp-3)}

.mlist{display:grid;gap:var(--sp-4);list-style:none;margin:0;padding:0}
.mempty{padding:var(--sp-12);text-align:center;color:var(--bone-500);border:1px dashed var(--ink-700);border-radius:var(--radius-lg)}

/* ===================== AMBIENTES ===================== */
.rooms{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--sp-8)}
.room{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color var(--dur-base),transform var(--dur-base) var(--ease)}
.room:hover{border-color:var(--clay-600);transform:translateY(-3px)}
.room__img{aspect-ratio:4/3;overflow:hidden;position:relative}
.room__img img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.room:hover .room__img img{transform:scale(1.04)}
.room__body{padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-4);flex:1}
.room__body h3{font-family:var(--font-ui);font-weight:500;font-size:1.2rem}
.room__specs{margin:0;padding:0;display:grid;gap:var(--sp-3);font-size:var(--fs-small)}
.room__specs div{display:flex;gap:var(--sp-4);justify-content:space-between;border-bottom:1px solid var(--ink-700);padding-bottom:var(--sp-3)}
.room__specs dt{color:var(--bone-500);letter-spacing:.06em}
.room__specs dd{margin:0;color:var(--bone-100);text-align:right}

/* ===================== FAQ ===================== */
.faq{display:grid;gap:var(--sp-3);max-width:80ch}
.faq details{border:1px solid var(--ink-700);border-radius:var(--radius-lg);background:var(--ink-900);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:var(--sp-6) var(--sp-8);min-height:56px;display:flex;
  align-items:center;justify-content:space-between;gap:var(--sp-4);font-size:var(--fs-small);color:var(--bone-100);
  transition:background var(--dur-fast)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--font-brand);color:var(--gold-300);font-size:1.2rem;flex:none;transition:transform var(--dur-base)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--ink-800)}
.faq .faq__a{padding:0 var(--sp-8) var(--sp-6);color:var(--bone-300);font-size:var(--fs-small);margin:0}

/* ===================== AVALIAÇÕES ===================== */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-6)}
.review{background:var(--ink-800);border:1px solid var(--ink-700);border-radius:var(--radius-lg);padding:var(--sp-8);
  display:flex;flex-direction:column;gap:var(--sp-4)}
.review blockquote{margin:0;font-family:var(--font-display);font-size:1.15rem;line-height:1.45;color:var(--bone-100)}
.review footer{font-size:.8125rem;color:var(--bone-500)}

/* ===================== RODAPÉ / DOCK ===================== */
.foot{border-top:1px solid var(--ink-700);padding-block:var(--sp-16) var(--sp-12)}
.foot__in{display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);text-align:center}
.foot__social{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-6);list-style:none;margin:0;padding:0}
.foot__social a{font-size:.875rem;color:var(--bone-300);border-bottom:1px solid transparent;transition:color var(--dur-fast),border-color var(--dur-fast)}
.foot__social a:hover{color:var(--gold-300);border-bottom-color:var(--gold-300)}
.foot__note{margin:var(--sp-12) 0 0;font-size:.8125rem;color:var(--bone-500);text-align:center}
.dock{position:fixed;left:var(--sp-4);right:var(--sp-4);
  bottom:calc(var(--sp-4) + env(safe-area-inset-bottom));z-index:190;display:none;gap:var(--sp-3);
  opacity:0;transform:translateY(120%);transition:opacity var(--dur-base),transform var(--dur-base) var(--ease)}
.dock.is-on{opacity:1;transform:none}
.dock .btn{flex:1;box-shadow:var(--shadow-2)}
@media (max-width:1080px){.dock{display:flex}}
.music-toggle{position:fixed;top:calc(var(--nav-h) + var(--sp-4));right:var(--sp-4);z-index:150;
  width:44px;height:44px;border-radius:50%;background:rgb(10 7 5/.7);backdrop-filter:blur(8px);
  border:1px solid var(--ink-700);color:var(--bone-300);
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--dur-fast),color var(--dur-fast)}
.music-toggle:hover{border-color:var(--gold-300);color:var(--gold-200)}
.music-toggle[aria-pressed="true"]{border-color:var(--gold-300);color:var(--gold-200)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}
.reveal.is-in{opacity:1;transform:none}

/* ===================== PÁGINAS INTERNAS ===================== */
.pagehead{padding-block:calc(var(--nav-h) + var(--sp-16)) var(--sp-16);border-bottom:1px solid var(--ink-700);
  background:radial-gradient(70% 100% at 20% 0%,rgba(122,59,30,.22) 0%,transparent 70%),var(--ink-950)}
.pagehead h1{font-size:var(--fs-h2);max-width:20ch}
.crumb{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone-500);margin-bottom:var(--sp-6)}
.crumb a:hover{color:var(--gold-300)}

/* ===================== MOVIMENTO REDUZIDO / SEM JS ===================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .stage{position:relative;height:62svh}
  .layer{position:absolute;opacity:1;transform:none;filter:none}
  .layer:not(:first-child){display:none}
  .trigger{height:auto}
  .beats{position:static;transform:none;display:block;margin-inline:auto;padding-block:var(--section-y)}
  .beat{opacity:1;transform:none;max-width:60ch;margin-bottom:var(--sp-16);text-align:left;justify-self:auto}
  #dust,.flash,.rail,.progress{display:none}
  .portal__glow{animation:none}
  .portal__logo{animation:none;opacity:.97;transform:none}
  .portal__hint::after{animation:none}
  .portal__media video{display:none}
}
html.no-js .stage{position:relative;height:62svh}
html.no-js .layer{opacity:1;transform:none;filter:none}
html.no-js .layer:not(:first-child){display:none}
html.no-js .trigger{height:auto}
html.no-js .beats{position:static;transform:none;display:block;margin-inline:auto;padding-block:var(--section-y)}
html.no-js .beat{opacity:1;transform:none;max-width:60ch;margin-bottom:var(--sp-16);text-align:left}
html.no-js #dust,html.no-js .flash,html.no-js .rail,html.no-js .progress{display:none}
html.no-js .reveal{opacity:1;transform:none}
html.no-js .week,html.no-js .curation{display:none}