/* ═══════════════════════════════════════════════════════════════════════════
   CASA RAVACHE · TOKENS
   Fonte da verdade: Design System oficial da Casa Ravache (Manual da Marca,
   28 páginas) — https://claude.ai/design/p/5f208747-5670-4b4b-a890-8c38879a3189
   Os valores abaixo são TRANSCRITOS do sistema do cliente. Não inventar.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── AS 6 CORES INSTITUCIONAIS (manual 4.2) ────────────────────────────── */
  --navy-900:#0c1e3a;   /* Azul profundo  */
  --navy-700:#223759;   /* Azul           */
  --gold-500:#ceac52;   /* Dourado        */
  --ink-900:#1d1d1b;    /* Preto          */
  --brown-500:#936b4d;  /* Terroso        */
  --white:#ffffff;      /* Branco         */

  /* ── AZUIS DERIVADOS (extensão do sistema) ─────────────────────────────── */
  --navy-950:#081426;
  --navy-500:#3a5378;
  --navy-100:#dde3ec;
  --navy-50:#eef1f6;

  /* ── DOURADOS E TERROSOS · dourado é ACENTO, nunca área grande ─────────── */
  --gold-600:#b8963f;
  --gold-400:#dabf74;
  --gold-100:#f3ead3;
  --brown-700:#75543c;
  --brown-100:#eae0d7;

  /* ── MOSTARDA DAS PLACAS · acento quente da fachada ────────────────────── */
  --amber-500:#d1922b;
  --amber-600:#b57a1f;

  /* ── NEUTROS E CREME · papel das aplicações ────────────────────────────── */
  --cream-50:#f7f5ef;
  --cream-100:#f0ecdf;
  --gray-100:#ececea;
  --gray-300:#c9c9c4;
  --gray-500:#6b6b67;

  /* ── FEEDBACK (extensão em harmonia com a paleta) ──────────────────────── */
  --success:#2f6b4f;
  --warning:var(--amber-600);
  --danger:#a33a32;
  --info:var(--navy-700);

  /* ── SEMÂNTICOS ────────────────────────────────────────────────────────── */
  --bg:var(--cream-50);
  --bg-alt:var(--cream-100);
  --bg-escuro:var(--navy-900);
  --bg-escuro-2:var(--navy-950);
  --surface:var(--white);
  --texto:var(--ink-900);
  --texto-suave:var(--gray-500);
  --texto-inverso:var(--cream-50);
  --texto-inverso-suave:var(--navy-100);
  --acento:var(--gold-500);
  --border-hairline:var(--gray-300);
  --border-accent:var(--gold-500);
  --border-inversa:color-mix(in srgb,var(--gold-500) 42%,transparent);
  --foco:var(--gold-500);

  /* ── TIPOGRAFIA (manual 5.1) · duas famílias, sem terceira ─────────────── */
  --font-display:"Cormorant Garamond",'Iowan Old Style',Georgia,serif;
  --font-text:"Manrope",'Helvetica Neue',Arial,sans-serif;

  /* Escala do sistema: display para títulos, Manrope do md para baixo       */
  --text-3xl:2.75rem;    /* 44 · Título de página   · Cormorant */
  --text-2xl:2.125rem;   /* 34 · Título de seção    · Cormorant */
  --text-xl:1.625rem;    /* 26 · Subtítulo          · Cormorant */
  --text-md:1.0625rem;   /* 17 · Destaque de corpo  · Manrope   */
  --text-base:.9375rem;  /* 15 · Texto corrido      · Manrope   */
  --text-sm:.8125rem;    /* 13 · Apoio e legendas   · Manrope   */
  --text-xs:.6875rem;    /* 11 · Eyebrow            · Manrope   */

  /* Versões fluidas para hero e telas grandes — teto ancorado na escala     */
  --text-hero:clamp(1.85rem,3.5vw,3.35rem);
  --text-3xl-fluid:clamp(2rem,4vw,2.75rem);
  --text-2xl-fluid:clamp(1.65rem,3vw,2.125rem);
  --text-xl-fluid:clamp(1.3rem,2vw,1.625rem);

  --tracking-caps:.18em;  /* eco do "C A S A" do logotipo */
  --tracking-tight:-.015em;
  --leading-display:1.14;
  --leading-body:1.62;

  /* ── ESPAÇAMENTO · base 4px, space-1 a space-9 ─────────────────────────── */
  --space-1:.25rem;  /*  4 */
  --space-2:.5rem;   /*  8 */
  --space-3:.75rem;  /* 12 */
  --space-4:1rem;    /* 16 */
  --space-5:1.5rem;  /* 24 */
  --space-6:2rem;    /* 32 */
  --space-7:3rem;    /* 48 */
  --space-8:4rem;    /* 64 */
  --space-9:6rem;    /* 96 */
  --secao-y:clamp(3rem,7vw,6rem);
  --secao-y-larga:clamp(4rem,10vw,9rem);

  /* ── RAIOS · cantos contidos. Nada de cartão super arredondado ─────────── */
  --radius-sm:3px;
  --radius-md:6px;
  --radius-lg:10px;
  --radius-pill:999px;

  /* ── SOMBRAS · suaves, tom tinta-azul. Sem glow, sem neon ──────────────── */
  --shadow-card:0 1px 2px rgba(12,30,58,.06), 0 2px 8px rgba(12,30,58,.06);
  --shadow-raised:0 2px 4px rgba(12,30,58,.07), 0 8px 20px rgba(12,30,58,.09);
  --shadow-modal:0 8px 16px rgba(12,30,58,.10), 0 24px 56px rgba(12,30,58,.16);

  /* ── FILETES DOURADOS · moldura e o filete duplo do MENU (manual pág. 25) */
  --rule:1px solid var(--gold-500);
  --rule-hairline:1px solid var(--border-hairline);

  /* ── MOVIMENTO · discreto. Fades e elevação. SEM BOUNCE. ───────────────── */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.45,.05,.55,.95);
  --dur-fast:120ms;   /* press / feedback tátil */
  --dur-base:200ms;   /* padrão do sistema: hover, fade, elevação */
  --dur-slow:320ms;   /* entrada de componente, expandir */
  --dur-reveal:480ms; /* revelação de seção no scroll */

  /* ── GRID · Bootstrap 5.3 ──────────────────────────────────────────────── */
  --gutter:1.5rem;
  --container:1240px;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms;--dur-reveal:0ms}
}
/* ═══ RESET ════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-text);font-size:var(--text-base);line-height:var(--leading-body);
  font-weight:400;color:var(--texto);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--foco);outline-offset:2px;border-radius:var(--radius-sm)}
::selection{background:var(--gold-500);color:var(--navy-900)}

/* ═══ GRID BOOTSTRAP 5.3 · subconjunto fiel (12 col · gutter 1.5rem) ═══════
   Em produção: carregar bootstrap-grid.css oficial (~12 kB) e apagar isto.
   ═════════════════════════════════════════════════════════════════════════ */
.container,.container-fluid{width:100%;padding-inline:var(--gutter);margin-inline:auto}
.container{max-width:var(--container)}
.container-leitura{max-width:820px;width:100%;padding-inline:var(--gutter);margin-inline:auto}
.row{display:flex;flex-wrap:wrap;margin-inline:calc(var(--gutter) * -.5)}
.row>*{flex-shrink:0;width:100%;max-width:100%;min-width:0;padding-inline:calc(var(--gutter) * .5)}
.g-0{--gutter:0rem}.g-2{--gutter:.5rem}.g-3{--gutter:1rem}.g-5{--gutter:3rem}
.col{flex:1 0 0%}.col-auto{flex:0 0 auto;width:auto}
.col-1{flex:0 0 auto;width:8.33333%}.col-2{flex:0 0 auto;width:16.6667%}.col-3{flex:0 0 auto;width:25%}.col-4{flex:0 0 auto;width:33.3333%}.col-5{flex:0 0 auto;width:41.6667%}.col-6{flex:0 0 auto;width:50%}.col-7{flex:0 0 auto;width:58.3333%}.col-8{flex:0 0 auto;width:66.6667%}.col-9{flex:0 0 auto;width:75%}.col-10{flex:0 0 auto;width:83.3333%}.col-11{flex:0 0 auto;width:91.6667%}.col-12{flex:0 0 auto;width:100%}.offset-0{margin-left:0%}.offset-1{margin-left:8.33333%}.offset-2{margin-left:16.6667%}.offset-3{margin-left:25%}.offset-4{margin-left:33.3333%}.offset-5{margin-left:41.6667%}.offset-6{margin-left:50%}.offset-7{margin-left:58.3333%}.offset-8{margin-left:66.6667%}.offset-9{margin-left:75%}.offset-10{margin-left:83.3333%}.offset-11{margin-left:91.6667%}
@media (min-width:576px){.col-sm{flex:1 0 0%}.col-sm-auto{flex:0 0 auto;width:auto}.col-sm-1{flex:0 0 auto;width:8.33333%}.col-sm-2{flex:0 0 auto;width:16.6667%}.col-sm-3{flex:0 0 auto;width:25%}.col-sm-4{flex:0 0 auto;width:33.3333%}.col-sm-5{flex:0 0 auto;width:41.6667%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-7{flex:0 0 auto;width:58.3333%}.col-sm-8{flex:0 0 auto;width:66.6667%}.col-sm-9{flex:0 0 auto;width:75%}.col-sm-10{flex:0 0 auto;width:83.3333%}.col-sm-11{flex:0 0 auto;width:91.6667%}.col-sm-12{flex:0 0 auto;width:100%}.offset-sm-0{margin-left:0%}.offset-sm-1{margin-left:8.33333%}.offset-sm-2{margin-left:16.6667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.3333%}.offset-sm-5{margin-left:41.6667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.3333%}.offset-sm-8{margin-left:66.6667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.3333%}.offset-sm-11{margin-left:91.6667%}}
@media (min-width:768px){.col-md{flex:1 0 0%}.col-md-auto{flex:0 0 auto;width:auto}.col-md-1{flex:0 0 auto;width:8.33333%}.col-md-2{flex:0 0 auto;width:16.6667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.3333%}.col-md-5{flex:0 0 auto;width:41.6667%}.col-md-6{flex:0 0 auto;width:50%}.col-md-7{flex:0 0 auto;width:58.3333%}.col-md-8{flex:0 0 auto;width:66.6667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.3333%}.col-md-11{flex:0 0 auto;width:91.6667%}.col-md-12{flex:0 0 auto;width:100%}.offset-md-0{margin-left:0%}.offset-md-1{margin-left:8.33333%}.offset-md-2{margin-left:16.6667%}.offset-md-3{margin-left:25%}.offset-md-4{margin-left:33.3333%}.offset-md-5{margin-left:41.6667%}.offset-md-6{margin-left:50%}.offset-md-7{margin-left:58.3333%}.offset-md-8{margin-left:66.6667%}.offset-md-9{margin-left:75%}.offset-md-10{margin-left:83.3333%}.offset-md-11{margin-left:91.6667%}}
@media (min-width:992px){.col-lg{flex:1 0 0%}.col-lg-auto{flex:0 0 auto;width:auto}.col-lg-1{flex:0 0 auto;width:8.33333%}.col-lg-2{flex:0 0 auto;width:16.6667%}.col-lg-3{flex:0 0 auto;width:25%}.col-lg-4{flex:0 0 auto;width:33.3333%}.col-lg-5{flex:0 0 auto;width:41.6667%}.col-lg-6{flex:0 0 auto;width:50%}.col-lg-7{flex:0 0 auto;width:58.3333%}.col-lg-8{flex:0 0 auto;width:66.6667%}.col-lg-9{flex:0 0 auto;width:75%}.col-lg-10{flex:0 0 auto;width:83.3333%}.col-lg-11{flex:0 0 auto;width:91.6667%}.col-lg-12{flex:0 0 auto;width:100%}.offset-lg-0{margin-left:0%}.offset-lg-1{margin-left:8.33333%}.offset-lg-2{margin-left:16.6667%}.offset-lg-3{margin-left:25%}.offset-lg-4{margin-left:33.3333%}.offset-lg-5{margin-left:41.6667%}.offset-lg-6{margin-left:50%}.offset-lg-7{margin-left:58.3333%}.offset-lg-8{margin-left:66.6667%}.offset-lg-9{margin-left:75%}.offset-lg-10{margin-left:83.3333%}.offset-lg-11{margin-left:91.6667%}}
@media (min-width:1200px){.col-xl{flex:1 0 0%}.col-xl-auto{flex:0 0 auto;width:auto}.col-xl-1{flex:0 0 auto;width:8.33333%}.col-xl-2{flex:0 0 auto;width:16.6667%}.col-xl-3{flex:0 0 auto;width:25%}.col-xl-4{flex:0 0 auto;width:33.3333%}.col-xl-5{flex:0 0 auto;width:41.6667%}.col-xl-6{flex:0 0 auto;width:50%}.col-xl-7{flex:0 0 auto;width:58.3333%}.col-xl-8{flex:0 0 auto;width:66.6667%}.col-xl-9{flex:0 0 auto;width:75%}.col-xl-10{flex:0 0 auto;width:83.3333%}.col-xl-11{flex:0 0 auto;width:91.6667%}.col-xl-12{flex:0 0 auto;width:100%}.offset-xl-0{margin-left:0%}.offset-xl-1{margin-left:8.33333%}.offset-xl-2{margin-left:16.6667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.3333%}.offset-xl-5{margin-left:41.6667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.3333%}.offset-xl-8{margin-left:66.6667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.3333%}.offset-xl-11{margin-left:91.6667%}}
@media (min-width:1400px){.col-xxl{flex:1 0 0%}.col-xxl-auto{flex:0 0 auto;width:auto}.col-xxl-1{flex:0 0 auto;width:8.33333%}.col-xxl-2{flex:0 0 auto;width:16.6667%}.col-xxl-3{flex:0 0 auto;width:25%}.col-xxl-4{flex:0 0 auto;width:33.3333%}.col-xxl-5{flex:0 0 auto;width:41.6667%}.col-xxl-6{flex:0 0 auto;width:50%}.col-xxl-7{flex:0 0 auto;width:58.3333%}.col-xxl-8{flex:0 0 auto;width:66.6667%}.col-xxl-9{flex:0 0 auto;width:75%}.col-xxl-10{flex:0 0 auto;width:83.3333%}.col-xxl-11{flex:0 0 auto;width:91.6667%}.col-xxl-12{flex:0 0 auto;width:100%}.offset-xxl-0{margin-left:0%}.offset-xxl-1{margin-left:8.33333%}.offset-xxl-2{margin-left:16.6667%}.offset-xxl-3{margin-left:25%}.offset-xxl-4{margin-left:33.3333%}.offset-xxl-5{margin-left:41.6667%}.offset-xxl-6{margin-left:50%}.offset-xxl-7{margin-left:58.3333%}.offset-xxl-8{margin-left:66.6667%}.offset-xxl-9{margin-left:75%}.offset-xxl-10{margin-left:83.3333%}.offset-xxl-11{margin-left:91.6667%}}

/* ═══ TIPOGRAFIA · duas famílias, papéis fixos ═════════════════════════════
   Cormorant Garamond → títulos e campanhas. Em tela pede pesos 500–700.
   Manrope            → textos e interface, do md para baixo.
   ═════════════════════════════════════════════════════════════════════════ */
.display{
  font-family:var(--font-display);font-weight:600;
  line-height:var(--leading-display);letter-spacing:var(--tracking-tight);
  text-wrap:balance;color:var(--texto);
}
.display-hero{font-size:var(--text-hero);font-weight:600}
.display-3xl{font-size:var(--text-3xl-fluid)}
.display-2xl{font-size:var(--text-2xl-fluid)}
.display-xl{font-size:var(--text-xl-fluid);font-weight:500}
.display em{font-style:italic}

.eyebrow{ /* eco do C A S A do logotipo */
  font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--tracking-caps);
  line-height:1.4;
  /* ACESSIBILIDADE: sobre superfície clara o dourado do manual entrega apenas
     2,58:1 — reprova em WCAG AA. Usamos o terroso escuro do próprio sistema
     (--brown-700, 6,23:1). Sobre superfície escura, o dourado passa (9,26:1). */
  color:var(--brown-700);
}
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"]) .eyebrow,.eyebrow-inv{color:var(--gold-400)}

.lead{font-size:var(--text-md);line-height:1.6;color:var(--texto-suave);max-width:62ch;text-wrap:pretty}
.corpo{max-width:66ch;text-wrap:pretty;color:var(--texto-suave)}
.corpo p+p{margin-top:var(--space-4)}
.legenda{font-size:var(--text-sm);color:var(--texto-suave)}
.dado{font-variant-numeric:tabular-nums}

/* superfícies escuras — texto e acento sobre azul profundo.
   UM só grupo de seletores para TODAS as superfícies escuras do site. */
.escuro{background:var(--navy-900);color:var(--texto-inverso)}
.legenda-prato{color:var(--cream-50)}
.legenda-prato :is(.titulo,h3,p,.eyebrow){color:var(--cream-50)}
.legenda-prato .eyebrow{color:var(--gold-400)}
.escuro-2{background:var(--navy-950);color:var(--texto-inverso)}
.papel{background:var(--cream-100);color:var(--texto)}
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"]) :is(.display,h1,h2,h3,h4,.titulo){color:var(--cream-50)}
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"]) :is(.lead,.corpo,.legenda,p,li,dd){color:var(--texto-inverso-suave)}
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"]) :is(.eyebrow,.indice){color:var(--gold-400)}
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"]) .ficha dd{color:var(--cream-50)}
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"]) hr,
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"]) .divisor-secao{background:color-mix(in srgb,var(--gold-500) 38%,transparent)}
h1,h2,h3,h4{font-weight:inherit}

/* superfícies claras dentro de seções escuras retomam a tinta escura */
:is(.bloco-cor.creme,.papel,.card:not(.card-escuro),.card-creme,.moldura-clara){color:var(--texto)}
:is(.bloco-cor.creme,.papel,.card:not(.card-escuro),.card-creme) :is(.display,h1,h2,h3,h4,.titulo){color:var(--texto)}
:is(.bloco-cor.creme,.papel,.card:not(.card-escuro),.card-creme) :is(.lead,.corpo,p,li,dd){color:var(--texto-suave)}
:is(.bloco-cor.creme,.papel,.card:not(.card-escuro),.card-creme) :is(.eyebrow,.indice){color:var(--brown-700)}
.bloco-cor.creme .btn-link,.papel .btn-link{color:var(--navy-900)}
.bloco-cor.creme .ficha dt,.papel .ficha dt{color:var(--brown-700)}
.bloco-cor.creme .ficha dd,.papel .ficha dd{color:var(--texto)}
.eyebrow.centro{display:flex;justify-content:center}
/* ═══════════════════════════════════════════════════════════════════════════
   ELEMENTOS DE MARCA · Casa Ravache
   Reproduções fiéis dos elementos do Design System oficial. Em produção,
   substituir pelos arquivos originais indicados em cada bloco.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── LOGOTIPO · lockup "C A S A / RAVACHE" + brasão ────────────────────────
   PRODUÇÃO: usar os SVGs oficiais —
   logo-color-light-bg.svg · logo-color-dark-bg.svg
   logo-mono-black.svg     · logo-mono-white.svg
   Área de proteção: a altura do escudo ao redor de toda a marca (manual 6.5)
   ───────────────────────────────────────────────────────────────────────── */
/* ═══ MARCA · arte oficial do design system ══════════════════════════════
   Cartucho arqueado + «CASA» + «Ravache» + brasão da águia. Duas versões:
   `marca-clara` (creme e ouro, para fundo escuro) e `marca-ouro`
   (tinta e ouro, para creme). Nunca redesenhar, nunca recompor em texto.
   ═════════════════════════════════════════════════════════════════════════ */
.logo{
  display:block;width:auto;height:var(--logo-h,54px);
  aspect-ratio:766/400;background-repeat:no-repeat;
  background-position:center;background-size:contain;
  background-image:var(--marca-clara);
}
.logo.claro,.claro .logo,.papel .logo,.bloco-cor.creme .logo{background-image:var(--marca-ouro)}
.logo-sm{--logo-h:40px}
.logo-lg{--logo-h:clamp(72px,8vw,104px)}
.logo-xl{--logo-h:clamp(84px,10vw,118px)}
@media (max-width:575px){.logo{--logo-h:44px}}

/* brasão isolado — a águia do escudo, sem o cartucho */
.aguia-arte{
  display:block;aspect-ratio:139/103;background-repeat:no-repeat;
  background-position:center;background-size:contain;background-image:var(--aguia);
}

/* ── BRASÃO · escudo com águia (selo secundário) ───────────────────────────
   PRODUÇÃO: brasao-navy.svg · brasao-dourado.png · brasao-creme.png
   O desenho abaixo é MARCADOR DE POSIÇÃO geométrico.
   ───────────────────────────────────────────────────────────────────────── */
.brasao{display:block;color:var(--gold-500)}
.brasao.navy{color:var(--navy-900)}
.brasao.creme{color:var(--cream-50)}

/* ── PADRÃO FLOR-DE-LIS · textura navy com losangos e flor-de-lis dourada ──
   PRODUÇÃO: padrao-flordelis-tile-hd.png (tile 522×174, background-repeat,
   background-size ~520px). A malha CSS abaixo é a aproximação de trabalho.
   ───────────────────────────────────────────────────────────────────────── */
.padrao{
  --p-gap:46px;
  --p-linha:color-mix(in srgb,var(--gold-500) 30%,transparent);
  background-color:var(--navy-900);
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb,var(--gold-500) 62%,transparent) 1.4px, transparent 1.6px),
    repeating-linear-gradient(45deg,  transparent 0 calc(var(--p-gap) - 1px), var(--p-linha) calc(var(--p-gap) - 1px) var(--p-gap)),
    repeating-linear-gradient(-45deg, transparent 0 calc(var(--p-gap) - 1px), var(--p-linha) calc(var(--p-gap) - 1px) var(--p-gap));
  background-size:calc(var(--p-gap) * 1.4142) calc(var(--p-gap) * 1.4142), auto, auto;
  background-position:calc(var(--p-gap) * .7071) calc(var(--p-gap) * .7071), 0 0, 0 0;
}
.padrao-sutil{position:relative;isolation:isolate}
.padrao-sutil::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.5;pointer-events:none;
  --p-gap:46px;--p-linha:color-mix(in srgb,var(--gold-500) 22%,transparent);
  background-image:
    repeating-linear-gradient(45deg,  transparent 0 calc(var(--p-gap) - 1px), var(--p-linha) calc(var(--p-gap) - 1px) var(--p-gap)),
    repeating-linear-gradient(-45deg, transparent 0 calc(var(--p-gap) - 1px), var(--p-linha) calc(var(--p-gap) - 1px) var(--p-gap));
}

/* ── MOLDURA ORNAMENTADA · cantos recortados, filete duplo dourado ─────────
   PRODUÇÃO: moldura-ornamentada-dourada.png / -navy.png (8 peças escaláveis)
   ───────────────────────────────────────────────────────────────────────── */
.moldura{--mf-cut:16px;position:relative;padding:var(--space-7) var(--space-6)}
.moldura::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--gold-500),var(--gold-500)) 0 0   /100% 1px no-repeat,
    linear-gradient(var(--gold-500),var(--gold-500)) 0 100%/100% 1px no-repeat,
    linear-gradient(var(--gold-500),var(--gold-500)) 0 0   /1px 100% no-repeat,
    linear-gradient(var(--gold-500),var(--gold-500)) 100% 0/1px 100% no-repeat;
  clip-path:polygon(var(--mf-cut) 0,calc(100% - var(--mf-cut)) 0,100% var(--mf-cut),
    100% calc(100% - var(--mf-cut)),calc(100% - var(--mf-cut)) 100%,var(--mf-cut) 100%,
    0 calc(100% - var(--mf-cut)),0 var(--mf-cut));
}
.moldura::after{ /* as quatro diagonais dos cantos recortados */
  content:"";position:absolute;inset:0;pointer-events:none;
  --d:linear-gradient(45deg,transparent calc(50% - .5px),var(--gold-500) 50%,transparent calc(50% + .5px));
  --e:linear-gradient(-45deg,transparent calc(50% - .5px),var(--gold-500) 50%,transparent calc(50% + .5px));
  background:
    var(--e) 0 0 / var(--mf-cut) var(--mf-cut) no-repeat,
    var(--d) 100% 0 / var(--mf-cut) var(--mf-cut) no-repeat,
    var(--d) 0 100% / var(--mf-cut) var(--mf-cut) no-repeat,
    var(--e) 100% 100% / var(--mf-cut) var(--mf-cut) no-repeat;
}
.moldura-dupla::before{box-shadow:inset 0 0 0 0 transparent}
.moldura-dupla>.interna{
  position:absolute;inset:5px;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--gold-500) 55%,transparent);
}

/* ── FILETE DUPLO · cabeçalho de cardápio/menu (manual pág. 25) ───────────── */
.filete-duplo{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  text-align:center;
}
.filete-duplo::before,.filete-duplo::after{
  content:"";width:min(100%,380px);height:4px;flex:none;
  border-top:1px solid var(--gold-500);border-bottom:1px solid var(--gold-500);
}
.filete-titulo{
  font-family:var(--font-text);font-weight:600;font-size:var(--text-sm);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--brown-700);
}
.escuro .filete-titulo,[class*="grad-9"] .filete-titulo{color:var(--gold-400)}

/* ── ORNAMENTOS · filete pontilhado, fileira de estrelas ───────────────────
   PRODUÇÃO: orn-flordelis.png · orn-flordelis-par.png · orn-filete-pontos.png
             orn-estrelas.png · orn-volutas.png (fundo transparente)
   ───────────────────────────────────────────────────────────────────────── */
.orn-filete{
  display:flex;align-items:center;gap:var(--space-3);color:var(--gold-500);
}
.orn-filete::before,.orn-filete::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,currentColor 22%,currentColor 78%,transparent);
}
.orn-filete i{width:5px;height:5px;background:currentColor;transform:rotate(45deg);flex:none}
.orn-estrelas{display:flex;justify-content:center;gap:var(--space-2);color:var(--gold-500)}
.orn-estrelas i{
  width:11px;height:11px;background:currentColor;flex:none;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.divisor-secao{ /* filete dourado simples entre blocos */
  height:1px;background:color-mix(in srgb,var(--gold-500) 45%,transparent);border:0;
}

/* ── REVELAÇÃO NO SCROLL · fade e elevação discretos, conforme o sistema ─── */
.rev{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .rev{opacity:0;transform:translateY(10px);
       transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out)}
  .rev.visivel{opacity:1;transform:none}
  .rev-d1{transition-delay:60ms}.rev-d2{transition-delay:120ms}
  .rev-d3{transition-delay:180ms}.rev-d4{transition-delay:240ms}.rev-d5{transition-delay:300ms}
}
/* ═══ BOTÕES · 5 variantes × 3 tamanhos ═══════════════════════════════════
   Hover: escurece um passo. Press: escurece mais, SEM shrink. Sem blur.
   ═════════════════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:.7rem 1.4rem;border-radius:var(--radius-md);border:1px solid transparent;
  font-family:var(--font-text);font-size:var(--text-base);font-weight:600;
  line-height:1.2;text-align:center;white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             color var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.btn:disabled,.btn[aria-disabled="true"]{
  background:var(--gray-300);color:var(--white);border-color:var(--gray-300);
  cursor:not-allowed;pointer-events:none;
}
.btn .seta{transition:transform var(--dur-base) var(--ease-out)}
.btn:hover .seta{transform:translateX(3px)}

.btn-primario{background:var(--navy-900);color:var(--white)}
.btn-primario:hover{background:var(--navy-950)}
.btn-primario:active{background:#040a13}

.btn-secundario{background:var(--gold-500);color:var(--navy-900)}
.btn-secundario:hover{background:var(--gold-600)}
.btn-secundario:active{background:#a38334}

.btn-contorno{background:var(--white);color:var(--navy-900);border-color:var(--navy-900)}
.btn-contorno:hover{background:var(--navy-50)}
.btn-contorno:active{background:var(--navy-100)}
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"]) .btn-contorno{background:transparent;color:var(--cream-50);border-color:var(--border-inversa)}
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"]) .btn-contorno:hover{background:color-mix(in srgb,var(--cream-50) 8%,transparent);border-color:var(--gold-500)}

.btn-texto{background:none;color:var(--navy-900);padding-inline:var(--space-2)}
.btn-texto:hover{color:var(--brown-700)}
:is(.escuro,.escuro-2,.rodape,.hero,.bloqueio,[class*="grad-9"]) .btn-texto{color:var(--cream-50)}
.escuro .btn-texto:hover{color:var(--gold-400)}

.btn-link{ /* link com sublinha dourada no hover */
  display:inline-flex;align-items:center;gap:var(--space-2);
  font-weight:600;font-size:var(--text-base);padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.btn-link:hover{border-bottom-color:var(--gold-500);color:var(--brown-700)}
:is(.escuro,.escuro-2,.rodape,.hero,.bloqueio,[class*="grad-9"]) .btn-link:hover{color:var(--gold-400)}

.btn-sm{padding:.5rem 1rem;font-size:var(--text-sm)}
.btn-lg{padding:.9rem 1.8rem;font-size:var(--text-md)}

/* ═══ CARTÕES · padrão, papel-creme e escuro ══════════════════════════════ */
.card{
  background:var(--white);border:1px solid var(--border-hairline);
  border-radius:var(--radius-md);box-shadow:var(--shadow-card);
  padding:var(--space-5);display:grid;gap:var(--space-2);
  transition:box-shadow var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out);
}
a.card:hover,.card-interativo:hover{box-shadow:var(--shadow-raised);transform:translateY(-2px)}
.card-creme{background:var(--cream-100);border-color:var(--border-accent)}
.card-escuro{background:var(--navy-900);border-color:var(--navy-700);color:var(--texto-inverso)}
.card-escuro .titulo,.card-creme .titulo,.card .titulo{
  font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);line-height:1.2;
}
.card-escuro .titulo{color:var(--cream-50)}
.card p{font-size:var(--text-base);color:var(--texto-suave)}
.card-escuro p{color:var(--texto-inverso-suave)}

/* ═══ SELOS / BADGES ══════════════════════════════════════════════════════ */
.selo{
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.25rem .6rem;border-radius:var(--radius-sm);
  font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;line-height:1.4;
  border:1px solid transparent;
}
.selo-novidade{background:var(--gold-100);color:var(--brown-700);border-color:var(--gold-400)}
.selo-dado{background:var(--navy-50);color:var(--navy-700);border-color:var(--navy-100)}
.selo-casa{background:var(--navy-900);color:var(--gold-400)}
.selo-ok{background:#e8f1ec;color:var(--success);border-color:#bcd8c9}
.selo-off{background:#f6e9e8;color:var(--danger);border-color:#e0c2bf}
.escuro .selo-dado,[class*="grad-9"] .selo-dado{background:var(--navy-700);color:var(--navy-100);border-color:var(--navy-500)}
.escuro .selo-novidade,[class*="grad-9"] .selo-novidade{background:transparent;color:var(--gold-400);border-color:var(--gold-600)}

/* ═══ ABAS ════════════════════════════════════════════════════════════════ */
.abas{display:flex;gap:var(--space-5);border-bottom:1px solid var(--border-hairline);overflow-x:auto;scrollbar-width:none}
.abas::-webkit-scrollbar{display:none}
.abas button,.abas a{
  padding:.7rem .2rem;font-size:var(--text-base);font-weight:600;color:var(--texto-suave);
  border-bottom:2px solid transparent;white-space:nowrap;
  transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out);
}
.abas button:hover,.abas a:hover{color:var(--texto)}
.abas [aria-selected="true"],.abas .ativo{color:var(--navy-900);border-bottom-color:var(--navy-900)}

/* ═══ FICHA TÉCNICA ═══════════════════════════════════════════════════════ */
.ficha{display:grid;gap:var(--space-5)}
.ficha div{display:grid;gap:var(--space-1)}
.ficha dt{
  font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;
  text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--brown-700);
}
:is(.escuro,.escuro-2,.rodape,.hero,.bloqueio,[class*="grad-9"]) .ficha dt{color:var(--gold-400)}
.ficha dd{font-family:var(--font-display);font-weight:500;font-size:var(--text-xl);line-height:1.25}
.escuro .ficha dd{color:var(--cream-50)}
.ficha-linha{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

/* ═══ QUADRO DE IMAGEM ════════════════════════════════════════════════════
   Sem foto, o quadro NÃO fica vazio: vira uma placa de marca — campo navy
   com a malha flor-de-lis, brasão em marca-d'água e a direção de arte
   impressa numa cartela dourada. Lê como elemento desenhado, não como erro.
   ═════════════════════════════════════════════════════════════════════════ */
.quadro{
  position:relative;overflow:hidden;background:var(--navy-900);
  aspect-ratio:var(--ratio,16/10);border-radius:var(--radius-md);isolation:isolate;
}
.quadro img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,center);
  position:relative;z-index:2}
.quadro::before{ /* campo navy + malha flor-de-lis */
  content:"";position:absolute;inset:0;z-index:0;
  --pg:38px;--pl:color-mix(in srgb,var(--gold-500) 16%,transparent);
  background-color:var(--navy-900);
  background-image:
    repeating-linear-gradient( 45deg,transparent 0 calc(var(--pg) - 1px),var(--pl) calc(var(--pg) - 1px) var(--pg)),
    repeating-linear-gradient(-45deg,transparent 0 calc(var(--pg) - 1px),var(--pl) calc(var(--pg) - 1px) var(--pg));
}
.quadro::after{ /* marca-d'água: a águia do brasão oficial */
  content:"";position:absolute;inset:0;z-index:1;opacity:.20;
  background-repeat:no-repeat;background-position:center;
  background-size:min(34%,124px) auto;background-image:var(--aguia);
}
.quadro.sem-foto::after,.quadro:not(:has(img))::after{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold-500) 26%,transparent);
}
/* A pauta fotográfica é informação de produção, não de layout: sai da tela
   (continua no DOM e no §12 do blueprint) para o painel vazio ler como
   chapa de marca, e não como imagem faltando. */
.quadro .nota-foto{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
/* chapa de marca: campo navy, malha e a águia — sem etiqueta de debug */
.quadro.sem-foto::after,.quadro:not(:has(img))::after{
  opacity:.30;background-size:min(42%,168px) auto;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--gold-500) 24%,transparent);
}
.quadro.sem-foto::before,.quadro:not(:has(img))::before{--pg:44px}
.quadro-zoom img{transition:transform 600ms var(--ease-out)}
a:hover .quadro-zoom img,.quadro-zoom:hover img{transform:scale(1.03)}
.quadro-fosco img+*,.quadro-fosco::after{}
.quadro-fosco img~.legenda-prato{z-index:4}

/* ═══ ITEM DE CARDÁPIO · condutor pontilhado ══════════════════════════════ */
.item{display:grid;gap:var(--space-2);padding-block:var(--space-5);
  border-bottom:1px solid var(--border-hairline)}
.item .linha{display:flex;align-items:baseline;gap:var(--space-3)}
.item .nome{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);flex:none;line-height:1.2}
.item .fio{flex:1;border-bottom:1px dotted var(--gray-300);transform:translateY(-.3em)}
.item .preco{font-family:var(--font-text);font-weight:600;font-size:var(--text-md);
  font-variant-numeric:tabular-nums;flex:none;color:var(--navy-900)}
.item .desc{font-size:var(--text-base);color:var(--texto-suave);max-width:60ch}

/* ═══ CAMPOS DE FORMULÁRIO ════════════════════════════════════════════════ */
.campo{display:grid;gap:var(--space-2)}
.campo label{font-size:var(--text-sm);font-weight:600;color:var(--texto)}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.65rem .8rem;background:var(--white);
  border:1px solid var(--border-hairline);border-radius:var(--radius-md);
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--gold-500);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold-500) 22%,transparent);
}
.campo .ajuda{font-size:var(--text-sm);color:var(--texto-suave)}
.campo .erro{font-size:var(--text-sm);color:var(--danger)}
.escuro .campo label{color:var(--cream-50)}
.escuro .campo input,.escuro .campo select,.escuro .campo textarea{
  background:var(--navy-950);border-color:var(--navy-500);color:var(--cream-50)}

/* ═══ TÍTULO DE BLOCO ═════════════════════════════════════════════════════ */
.titulo{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  line-height:1.22;letter-spacing:var(--tracking-tight)}
.escuro .titulo{color:var(--cream-50)}

/* ═══ NÚMERO CIRCULADO · dado dentro de anel dourado ══════════════════════ */
.circulado{
  width:58px;height:58px;border:1px solid var(--gold-500);border-radius:var(--radius-pill);
  display:grid;place-items:center;flex:none;
  font-family:var(--font-text);font-size:var(--text-sm);font-weight:600;
  color:var(--brown-700);font-variant-numeric:tabular-nums;text-align:center;line-height:1.1;
}
.escuro .circulado{color:var(--gold-400)}

/* ═══ PERFIL DE SABOR · escala de pontos ══════════════════════════════════ */
.sabor{display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:var(--space-4);padding-block:.5rem}
.sabor+.sabor{border-top:1px solid var(--navy-700)}
.sabor span:first-child{font-family:var(--font-display);font-style:italic;
  font-weight:500;font-size:var(--text-md)}
.pontos{display:flex;gap:5px}
.pontos i{width:8px;height:8px;border-radius:var(--radius-pill);
  border:1px solid var(--gold-500);background:transparent;
  opacity:0;transition:opacity var(--dur-base) var(--ease-out),
                       background-color var(--dur-base) var(--ease-out)}
.visivel .pontos i{opacity:1}
.pontos i.cheio{background:var(--gold-500)}
.pontos i:nth-child(2){transition-delay:40ms}.pontos i:nth-child(3){transition-delay:80ms}
.pontos i:nth-child(4){transition-delay:120ms}.pontos i:nth-child(5){transition-delay:160ms}
/* ═══ CABEÇALHO GLOBAL · superfície sólida (sem blur, conforme o sistema) ══ */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:90;
  background:var(--navy-900);border-bottom:1px solid var(--navy-700);
  transition:transform var(--dur-slow) var(--ease-out),
             background-color var(--dur-slow) var(--ease-out),
             border-color var(--dur-slow) var(--ease-out);
}
.topo.sobre-hero{background:transparent;border-bottom-color:transparent}
.topo.oculto{transform:translateY(-100%)}
.topo-in{display:flex;align-items:center;gap:var(--space-5);height:76px}
.marca{display:flex;align-items:center;gap:var(--space-3);flex:none;margin-right:auto}
.nav{display:none;gap:var(--space-1)}
@media (min-width:1200px){.nav{display:flex}}
.nav a{
  position:relative;padding:.5rem .7rem;font-size:var(--text-base);font-weight:500;
  color:var(--navy-100);transition:color var(--dur-base) var(--ease-out);
}
.nav a::after{
  content:"";position:absolute;left:.7rem;right:.7rem;bottom:.25rem;height:1px;
  background:var(--gold-500);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-base) var(--ease-out);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--cream-50)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.topo-acoes{display:flex;align-items:center;gap:var(--space-2);flex:none}
.so-md{display:none}
@media (min-width:768px){.so-md{display:inline}}
.hamburguer{
  display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-md);
  border:1px solid var(--border-inversa);color:var(--cream-50);
  transition:background-color var(--dur-base) var(--ease-out);
}
.hamburguer:hover{background:var(--navy-700)}
@media (min-width:1200px){.hamburguer{display:none}}
.hamburguer span{display:block;width:17px;height:1.5px;background:currentColor;
  transition:transform var(--dur-slow) var(--ease-out),opacity var(--dur-fast)}
.hamburguer span+span{margin-top:4px}
body.gaveta-aberta .hamburguer span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
body.gaveta-aberta .hamburguer span:nth-child(2){opacity:0}
body.gaveta-aberta .hamburguer span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ── GAVETA MOBILE · superfície sólida, entrada por fade e elevação ─────── */
.gaveta{
  position:fixed;inset:0;z-index:89;background:var(--navy-900);
  display:grid;grid-template-rows:76px 1fr auto;
  opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out),
             visibility 0s linear var(--dur-slow);
}
body.gaveta-aberta .gaveta{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.gaveta nav{display:grid;align-content:center;gap:var(--space-1);padding:var(--space-5);overflow-y:auto}
.gaveta nav a{
  display:flex;align-items:baseline;gap:var(--space-4);padding:.45rem 0;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.5rem,6vw,2.25rem);color:var(--cream-50);line-height:1.15;
  transition:color var(--dur-base) var(--ease-out);
}
.gaveta nav a:hover{color:var(--gold-400)}
.gaveta nav a i{
  font-family:var(--font-text);font-size:var(--text-xs);font-style:normal;font-weight:600;
  color:var(--gold-500);letter-spacing:var(--tracking-caps);
}
.gaveta .pe{padding:var(--space-5);border-top:1px solid var(--navy-700);
  display:flex;flex-wrap:wrap;gap:var(--space-3)}

/* ═══ DOCA DE CTA FLUTUANTE ═══════════════════════════════════════════════ */
.doca{
  position:fixed;z-index:88;right:var(--space-4);bottom:var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-end;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out);
}
.doca.pronta{opacity:1;transform:none;pointer-events:auto}
@media (max-width:991px){.doca{opacity:1;transform:none;pointer-events:auto}}
.doca-btn{
  display:flex;align-items:center;gap:var(--space-2);height:48px;padding:0 1rem;
  border-radius:var(--radius-md);border:1px solid var(--navy-700);
  background:var(--navy-900);color:var(--cream-50);box-shadow:var(--shadow-raised);
  font-family:var(--font-text);font-size:var(--text-sm);font-weight:600;white-space:nowrap;
  transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
.doca-btn:hover{background:var(--gold-500);color:var(--navy-900);border-color:var(--gold-500)}
.doca-btn.zap{background:#1f7a52;border-color:#1f7a52;color:#fff}
.doca-btn.zap:hover{background:#186340;border-color:#186340}
.doca-btn svg{flex:none}
@media (max-width:575px){.doca-btn .rot{display:none}.doca-btn{padding:0;width:48px;justify-content:center}}

/* barra de progresso de leitura */
.progresso{position:fixed;inset:0 0 auto 0;height:2px;z-index:95;background:transparent}
.progresso i{display:block;height:100%;width:0%;background:var(--gold-500)}

/* ═══ TICKER · faixa de informação, ritmo lento ═══════════════════════════ */
.ticker{display:flex;overflow:hidden;border-block:1px solid var(--navy-700);
  padding-block:var(--space-3);user-select:none;background:var(--navy-950)}
.ticker ul{display:flex;gap:var(--space-6);padding-right:var(--space-6);flex:none;
  animation:desliza 58s linear infinite;will-change:transform}
.ticker:hover ul{animation-play-state:paused}
.ticker li{display:flex;align-items:center;gap:var(--space-6);white-space:nowrap;
  font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy-100)}
.ticker li::after{content:"";width:5px;height:5px;background:var(--gold-500);
  transform:rotate(45deg);flex:none}
@keyframes desliza{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ticker ul{animation:none}}

/* ═══ SEÇÕES E RODAPÉ ═════════════════════════════════════════════════════ */
.secao{padding-block:var(--secao-y);position:relative}
.secao-larga{padding-block:var(--secao-y-larga)}
.cabeca{display:grid;gap:var(--space-4);margin-bottom:var(--space-7)}
/* ═══ TOAST ═══════════════════════════════════════════════════════════════ */
.toast{
  position:fixed;left:50%;bottom:var(--space-6);transform:translate(-50%,10px);z-index:99;
  background:var(--navy-900);color:var(--cream-50);border:1px solid var(--gold-500);
  border-radius:var(--radius-md);box-shadow:var(--shadow-modal);
  padding:.7rem 1.1rem;font-size:var(--text-base);font-weight:500;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.toast.aberto{opacity:1;transform:translate(-50%,0)}

/* utilidades */
.pilha{display:grid;gap:var(--space-5)}
.flex{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.centro{text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pular{position:fixed;top:.5rem;left:.5rem;z-index:120;transform:translateY(-200%);
  background:var(--gold-500);color:var(--navy-900);padding:.6rem 1rem;
  border-radius:var(--radius-md);font-weight:600;font-size:var(--text-sm)}
.pular:focus{transform:none}

/* ═══ RODAPÉ ══════════════════════════════════════════════════════════════ */
/* Um único corte (creme → escuro) marcado por um filete de ouro; daí para
   baixo é rampa contínua até navy-950. Antes eram três degraus empilhados. */
.rodape{background:var(--navy-950);color:var(--texto-inverso);padding-bottom:var(--space-5)}
.rodape-topo{
  background-color:var(--navy-950);
  background-image:linear-gradient(180deg,var(--navy-900) 0%,var(--navy-950) 100%);
  border-top:1px solid color-mix(in srgb,var(--gold-500) 30%,transparent);
  padding-block:var(--space-8) var(--space-9);
}
.rodape-chamada{display:grid;gap:var(--space-6);align-items:center}
@media (min-width:992px){.rodape-chamada{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .rodape-chamada .flex{justify-content:flex-end}}
.rodape-grade{display:grid;gap:var(--space-7)}
@media (min-width:768px){.rodape-grade{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rodape-grade{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--space-6)}}
.rodape-grade>*{min-width:0}

.rodape a:hover{color:var(--gold-400)}
.rodape h3{font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-500);
  margin-bottom:var(--space-4)}
.rodape-col li+li{margin-top:var(--space-2)}
.horarios li{display:flex;justify-content:space-between;gap:var(--space-3);
  padding-block:.4rem;border-bottom:1px solid color-mix(in srgb,var(--gold-500) 14%,transparent);font-size:var(--text-sm)}
.horarios li:last-child{border-bottom:0}
.horarios b{font-weight:600;color:var(--cream-50);font-variant-numeric:tabular-nums}
.horarios .fechado b{color:var(--navy-100);font-weight:500}
.sociais a{display:inline-flex;align-items:center;gap:var(--space-2)}
.rodape .marca .logo{--logo-h:clamp(70px,7vw,92px)}
.rodape-base{margin-top:var(--space-8);padding-top:var(--space-5);
  border-top:1px solid color-mix(in srgb,var(--gold-500) 18%,transparent);display:grid;gap:var(--space-3);
  font-size:var(--text-sm);color:var(--navy-100)}
@media (min-width:992px){.rodape-base{grid-template-columns:auto 1fr auto;align-items:center;
  gap:var(--space-6)}.rodape-base .flex{justify-content:center}}
.aviso-legal{color:var(--gold-400);font-weight:600}
/* ═══ HERO · ver 08-hero.css (meia-a-meia com foto real) ══════════════════
   As regras antigas do hero centralizado foram removidas: sobreviviam à
   redefinição do 08 e reinjetavam padding no grid, deixando faixas vazias.
   ═════════════════════════════════════════════════════════════════════════ */
.rolar{display:grid;gap:var(--space-2);justify-items:center;
  font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-caps);color:var(--navy-500);text-transform:uppercase}
.rolar i{display:block;width:1px;height:40px;background:linear-gradient(var(--gold-500),transparent)}


/* ═══ EDITORIAL · split assimétrico ═══════════════════════════════════════ */
.editorial{display:grid;gap:var(--space-7);align-items:center}
@media (min-width:992px){
  .editorial{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-8)}
  .editorial.invertida>*:first-child{order:2}
}
.marco-ano{position:relative;display:grid}
.marco-ano{padding-left:clamp(0px,10%,110px)}
.marco-ano .quadro{max-width:400px;width:100%;justify-self:end}
.numeral{
  position:absolute;left:0;top:36%;z-index:3;
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(3rem,7vw,5.5rem);line-height:.85;color:var(--gold-500);
  text-shadow:0 2px 24px var(--navy-950);
}
@media (max-width:991px){.marco-ano .quadro{justify-self:stretch;max-width:none}
  .numeral{position:static;margin-top:var(--space-4)}}

/* ═══ MOSAICO · alturas controladas, sem imagem gigante ═══════════════════ */
.mosaico{display:grid;gap:var(--space-1);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){
  .mosaico{grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:minmax(0,240px)}
  .mosaico .grande{grid-row:span 2}
  .mosaico .largo{grid-column:span 2}
}
@media (min-width:1200px){.mosaico{grid-auto-rows:minmax(0,268px)}}
.mos-item{position:relative;overflow:hidden;min-height:240px;display:grid;
  border-radius:var(--radius-md)}
.mos-item .quadro{height:100%;width:100%;aspect-ratio:auto;border-radius:var(--radius-md)}
.bloco-cor{background:var(--navy-700);color:var(--texto-inverso);
  align-content:center;gap:var(--space-4);padding:var(--space-6)}
.bloco-cor.creme{background:var(--cream-100);color:var(--texto)}
.legenda-prato{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:var(--space-5);
  background:linear-gradient(transparent,color-mix(in srgb,var(--navy-950) 92%,transparent) 62%);
  color:var(--cream-50);display:grid;gap:var(--space-1)}
.legenda-prato .titulo{color:var(--cream-50)}

/* ═══ OS CHOPPS · copo e régua ════════════════════════════════════════════
   NOTA: as cores de líquido (--srm-*) são EXTENSÃO proposta ao sistema.
   Uso restrito ao desenho do copo e à amostra da régua — nunca em fundo,
   botão ou texto. Ver §3.1 do blueprint.
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  --srm-pilsen-leve:#f0c24e;--srm-pilsen:#e8b23c;--srm-gold:#de9f2e;--srm-ipa:#c9762a;
  --srm-vinho:#7b1e38;--srm-malzbier:#5a2e18;--srm-black:#241009;
}
.srm-palco{display:grid;gap:var(--space-7);align-items:center}
@media (min-width:992px){.srm-palco{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--space-8)}}
.copo{position:relative;display:grid;place-items:center;min-height:min(48vh,400px)}
.copo svg{width:min(230px,60%);height:auto;overflow:visible}
.copo .liquido{transition:fill var(--dur-slow) var(--ease-out)}
.copo svg path[stroke]{stroke:color-mix(in srgb,var(--gold-500) 55%,transparent);stroke-width:1.6}
.copo .nome-fundo{position:absolute;z-index:-1;inset:auto 0 8% 0;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:clamp(3rem,9vw,6.5rem);
  text-transform:uppercase;line-height:.9;
  color:color-mix(in srgb,var(--cream-50) 8%,transparent);white-space:nowrap}
.regua{display:flex;gap:0;border-top:1px solid var(--navy-700);margin-top:var(--space-6);
  overflow-x:auto;scrollbar-width:none}
.regua::-webkit-scrollbar{display:none}
.regua button{flex:1 0 auto;min-width:92px;padding:var(--space-4) var(--space-3) var(--space-5);
  position:relative;text-align:left;
  border-right:1px solid color-mix(in srgb,var(--gold-500) 14%,transparent);
  transition:background-color var(--dur-base) var(--ease-out)}
.regua button:last-child{border-right:0}
.regua button:hover{background:var(--navy-700)}
.regua button .amostra{display:block;width:100%;height:6px;margin-bottom:var(--space-3);
  background:var(--c);border-radius:var(--radius-sm)}
.regua button .rot{display:block;font-family:var(--font-text);font-size:var(--text-sm);
  font-weight:600;color:var(--navy-100);transition:color var(--dur-base) var(--ease-out)}
/* ACESSIBILIDADE: navy-500 sobre navy-950 dá 2,36:1 — subimos para navy-100 */
.regua button .srm-n{display:block;font-family:var(--font-text);font-size:var(--text-xs);
  color:var(--navy-100);opacity:.72;margin-top:2px;letter-spacing:.06em}
.regua button[aria-selected="true"]{background:var(--navy-700)}
.regua button[aria-selected="true"] .rot{color:var(--cream-50)}
.regua button[aria-selected="true"]::after{content:"";position:absolute;inset:auto 0 0 0;
  height:2px;background:var(--gold-500)}

/* expandir · ficha completa sem modal */
.expandir{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.expandir>div{overflow:hidden}
.expandir[data-aberto="true"]{grid-template-rows:1fr}
.gatilho-ficha{display:inline-flex;align-items:center;gap:var(--space-2);
  font-family:var(--font-text);font-size:var(--text-sm);font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;color:var(--gold-400);
  border-bottom:1px solid currentColor;padding-bottom:3px;margin-top:var(--space-5)}
.gatilho-ficha .mais{transition:transform var(--dur-slow) var(--ease-out)}
.gatilho-ficha[aria-expanded="true"] .mais{transform:rotate(45deg)}

/* ═══ TERMÔMETRO ══════════════════════════════════════════════════════════ */
.termo{display:grid;gap:var(--space-5);max-width:600px}
.termo-trilho{position:relative;height:52px;display:grid;align-items:center}
.termo-trilho .faixa{height:8px;border-radius:var(--radius-sm);
  background:linear-gradient(90deg,#7fa8d6,#bfd8ee 25%,var(--gold-100) 50%,var(--srm-ipa) 78%,#9e4a22)}
.termo-trilho .ideal{position:absolute;left:25%;width:25%;height:24px;
  border:1px solid var(--gold-500);border-radius:var(--radius-sm);pointer-events:none}
.termo-trilho .ideal::after{content:"IDEAL 2–6 °C";position:absolute;top:-1.3rem;left:0;
  font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-caps);color:var(--gold-400)}
.termo input[type=range]{position:absolute;inset:0;width:100%;opacity:0;cursor:grab;margin:0}
.termo .marcador{position:absolute;top:0;width:2px;height:52px;background:var(--cream-50);
  pointer-events:none;transition:left var(--dur-fast) linear}
.termo .marcador::before{content:attr(data-t);position:absolute;top:-1.4rem;left:50%;
  transform:translateX(-50%);font-family:var(--font-text);font-size:var(--text-sm);
  font-weight:600;color:var(--cream-50);white-space:nowrap}
.termo-msg{min-height:3.2em;font-family:var(--font-display);font-weight:500;
  font-size:var(--text-xl);line-height:1.35;transition:color var(--dur-slow) var(--ease-out)}

/* ═══ SEÇÃO PINADA · fábrica ══════════════════════════════════════════════ */
.pin-palco{position:relative}
@media (min-width:992px){
  .pin-palco{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:var(--space-8);align-items:start}
  .pin-fixo{position:sticky;top:110px;align-self:start}
}
.etapas{display:grid;gap:var(--space-7)}
.etapa{display:grid;gap:var(--space-3);padding-left:var(--space-6);position:relative;
  border-left:1px solid var(--navy-700);padding-bottom:var(--space-4)}
.etapa::before{content:"";position:absolute;left:-4px;top:.5rem;width:7px;height:7px;
  background:var(--navy-900);border:1px solid var(--gold-500);transform:rotate(45deg);
  transition:background-color var(--dur-slow) var(--ease-out)}
.etapa.visivel::before{background:var(--gold-500)}

/* ═══ LINHA DO TEMPO ══════════════════════════════════════════════════════ */
.tempo{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:var(--space-4)}
.tempo>li{flex:0 0 min(78vw,320px);scroll-snap-align:start;padding:var(--space-6) var(--space-5);
  border-left:1px solid var(--navy-700);position:relative}
.tempo>li .ano{font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.25rem,5vw,3.25rem);line-height:.95;color:var(--gold-500)}
.tempo>li.futuro{background:var(--navy-700)}
.tempo>li.futuro .ano{color:var(--cream-50)}

/* ═══ CARDÁPIO ════════════════════════════════════════════════════════════ */
.cardapio-nav{position:sticky;top:76px;z-index:60;background:var(--bg);
  border-bottom:1px solid var(--border-hairline);margin-bottom:var(--space-5)}
.cardapio-nav ul{display:flex;gap:var(--space-5);overflow-x:auto;scrollbar-width:none}
.cardapio-nav ul::-webkit-scrollbar{display:none}
.cardapio-nav a{flex:none;padding:.8rem .2rem;font-size:var(--text-sm);font-weight:600;
  color:var(--texto-suave);white-space:nowrap;border-bottom:2px solid transparent;
  transition:color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.cardapio-nav a.ativo{color:var(--navy-900);border-bottom-color:var(--gold-500)}
.cat-titulo{font-family:var(--font-display);font-weight:600;font-size:var(--text-2xl-fluid);
  color:var(--navy-900)}

/* ═══ CARDS DE EVENTO / POST ══════════════════════════════════════════════ */
.card-midia{display:grid;gap:var(--space-3);position:relative}
.card-midia .meta{display:flex;gap:var(--space-3);font-family:var(--font-text);
  font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--brown-700)}
.escuro .card-midia .meta,[class*="grad-9"] .card-midia .meta{color:var(--gold-400)}
.card-midia .titulo{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl-fluid);
  line-height:1.2;transition:color var(--dur-base) var(--ease-out)}
a:hover .card-midia .titulo{color:var(--brown-700)}
.escuro a:hover .card-midia .titulo,[class*="grad-9"] a:hover .card-midia .titulo{color:var(--gold-400)}
.data-bloco{position:absolute;top:var(--space-3);left:var(--space-3);z-index:3;
  background:var(--navy-900);color:var(--cream-50);padding:.45rem .7rem;text-align:center;
  border-radius:var(--radius-sm);border:1px solid var(--gold-600);line-height:1.2}
.data-bloco b{display:block;font-family:var(--font-display);font-size:var(--text-xl);font-weight:600}
.data-bloco span{display:block;font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-caps);color:var(--gold-400)}

/* ═══ NÚMEROS E MAPA ══════════════════════════════════════════════════════ */
.numeros{display:grid;gap:0;border-top:1px solid var(--navy-700)}
@media (min-width:768px){.numeros{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.numeros{grid-template-columns:repeat(4,minmax(0,1fr))}}
.numeros li{padding:var(--space-6) var(--space-5);
  border-bottom:1px solid color-mix(in srgb,var(--gold-500) 16%,transparent);
  border-right:1px solid color-mix(in srgb,var(--gold-500) 16%,transparent)}
/* sem filete solto na última coluna nem na última linha de cada quebra */
.numeros li:last-child{border-right:0}
@media (min-width:1200px){.numeros li:nth-child(4n){border-right:0}
  .numeros li:nth-last-child(-n+4){border-bottom:0}}
@media (min-width:768px) and (max-width:1199px){.numeros li:nth-child(2n){border-right:0}
  .numeros li:nth-last-child(-n+2){border-bottom:0}}
@media (max-width:767px){.numeros li{border-right:0}.numeros li:last-child{border-bottom:0}}
.numeros b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.25rem,4.5vw,3.25rem);line-height:.95;color:var(--gold-500)}
.numeros span{display:block;margin-top:var(--space-3);font-size:var(--text-base);
  color:var(--texto-inverso-suave);max-width:26ch}
.mapa-bloco{display:grid;gap:var(--space-3);margin:0}
.mapa-svg{
  width:100%;height:auto;display:block;
  border:1px solid color-mix(in srgb,var(--gold-500) 30%,transparent);
  border-radius:var(--radius-md);background:var(--navy-950);
}
.mapa-nota{font-size:var(--text-sm);color:var(--texto-inverso-suave);max-width:56ch}
.papel .mapa-nota,.claro .mapa-nota{color:var(--texto-suave)}

/* ═══ CARTELA DE ACESSO · acompanha o mapa ═══════════════════════════════ */
.acesso{display:grid;gap:0;border-top:1px solid var(--navy-700)}
.acesso li{display:grid;grid-template-columns:auto 1fr;gap:var(--space-4);
  padding-block:var(--space-4);border-bottom:1px solid var(--navy-700);align-items:start}
.acesso .rot{font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-400);
  min-width:9ch;padding-top:.2rem}
.acesso p{margin:0;font-size:var(--text-base)}

/* ═══ NAVEGAÇÃO ENTRE PÁGINAS DO PROTÓTIPO ═══════════════════════════════ */
.pagina{display:none}
.pagina.ativa{display:block}
@media (prefers-reduced-motion:no-preference){
  .pagina.ativa{animation:entra var(--dur-slow) var(--ease-out) both}
  @keyframes entra{from{opacity:0}}
}

/* nota de foto no mosaico vai ao topo — a legenda do prato ocupa o rodapé */
.mosaico .nota-foto{inset:var(--space-4) var(--space-4) auto var(--space-4)}
.regua button[aria-selected="true"] .srm-n{color:var(--navy-100)}

/* ═══ BARRA DE FECHO · encerra uma seção sem deixar coluna órfã ═══════════ */
.barra-fecho{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);
  margin-top:var(--space-8);padding:var(--space-5) var(--space-6);
  background:color-mix(in srgb,var(--navy-700) 52%,transparent);
  border:1px solid color-mix(in srgb,var(--gold-500) 24%,transparent);
  border-radius:var(--radius-md);
}
.papel .barra-fecho,.claro .barra-fecho{
  background:color-mix(in srgb,var(--brown-500) 8%,transparent);
  border-color:color-mix(in srgb,var(--brown-700) 26%,transparent)}
.barra-fecho .corpo{flex:1 1 320px;min-width:0}
.barra-fecho .btn{margin-left:auto}
@media (max-width:575px){.barra-fecho .btn{margin-left:0;width:100%}}

/* ═══ TRIO DE ATRIBUTOS · linha fechada, sem coluna órfã ══════════════════ */
.trio-atributos{display:grid;gap:var(--space-6);border-top:1px solid var(--border-hairline)}
@media (min-width:900px){.trio-atributos{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)}}
.trio-atributos li{display:grid;gap:var(--space-3);padding-top:var(--space-6);min-width:0}
.trio-atributos .corpo{max-width:38ch}

/* ═══ GRADE DE EVENTOS · três colunas iguais, alturas casadas ═════════════ */
.grade-eventos{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.grade-eventos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.grade-eventos{grid-template-columns:repeat(3,minmax(0,1fr))}}
.grade-eventos>*{min-width:0;display:grid}
.grade-eventos .card-midia{align-content:start;height:100%}
.painel-cta{
  display:flex;flex-direction:column;gap:var(--space-4);
  background:color-mix(in srgb,var(--navy-700) 56%,transparent);
  border:1px solid color-mix(in srgb,var(--gold-500) 30%,transparent);
  border-radius:var(--radius-md);padding:var(--space-6);
}
.painel-cta .corpo{flex:1 1 auto;margin-bottom:var(--space-2)}
.painel-cta .btn{width:100%}

/* ═══ CARTA · prévia tipográfica do cardápio na home ══════════════════════
   Substitui o mosaico de fotos de prato: não existe fotografia de comida
   ainda, e painel vazio em série empobrece a página. A carta usa o condutor
   pontilhado do cardápio — mesma família visual, conteúdo real, zero fake.
   ═════════════════════════════════════════════════════════════════════════ */
.carta-palco{display:grid;gap:var(--space-7)}
@media (min-width:992px){
  .carta-palco{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--space-8)}
}
.carta-lista{display:grid;justify-items:stretch;min-width:0}
.carta{display:grid;border-top:1px solid color-mix(in srgb,var(--gold-500) 26%,transparent)}
.carta li{min-width:0}
.carta a{
  display:grid;gap:var(--space-2);padding-block:var(--space-4);
  border-bottom:1px solid color-mix(in srgb,var(--gold-500) 15%,transparent);
  transition:background-color var(--dur-base) var(--ease-out),
             padding-inline var(--dur-base) var(--ease-out);
}
.carta a:hover{background:color-mix(in srgb,var(--cream-50) 5%,transparent);
  padding-inline:var(--space-3)}
.carta .linha{display:flex;align-items:baseline;gap:var(--space-3);min-width:0}
.carta .nome{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  line-height:1.15;color:var(--cream-50);flex:none;transition:color var(--dur-base) var(--ease-out)}
.carta a:hover .nome{color:var(--gold-400)}
.carta .fio{flex:1 1 auto;min-width:1.5rem;
  border-bottom:1px dotted color-mix(in srgb,var(--gold-500) 55%,transparent);
  transform:translateY(-.3em)}
.carta .preco{flex:none;font-family:var(--font-text);font-weight:600;
  font-size:var(--text-md);font-variant-numeric:tabular-nums;color:var(--gold-400)}
.carta .par{font-size:var(--text-sm);color:var(--texto-inverso-suave);max-width:62ch}
.carta .par b{font-weight:600;color:var(--gold-400)}

.carta-lado{display:grid;gap:var(--space-5);align-content:start;min-width:0}
.carta-destaque{
  display:grid;gap:var(--space-4);justify-items:start;
  background:var(--cream-100);color:var(--texto);
  border-radius:var(--radius-md);padding:var(--space-6);
  border-top:3px solid var(--gold-500);
}
.carta-destaque .display{color:var(--navy-900)}
.carta-destaque .eyebrow{color:var(--brown-700)}
.carta-destaque .legenda{color:var(--gray-500);margin:0}
.carta-fatos{display:grid;gap:var(--space-5)}
.carta-fatos li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);
  align-items:start}
.carta-fatos b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-lg);color:var(--cream-50);margin-bottom:2px}
.carta-fatos span span,.carta-fatos li>span:last-child{font-size:var(--text-sm);
  color:var(--texto-inverso-suave)}

/* condutor pontilhado em superfície escura */
:is(.escuro,.escuro-2,[class*="grad-9"]) .item{border-bottom-color:var(--navy-700)}
:is(.escuro,.escuro-2,[class*="grad-9"]) .item .nome{color:var(--cream-50)}
:is(.escuro,.escuro-2,[class*="grad-9"]) .item .preco{color:var(--gold-400)}
:is(.escuro,.escuro-2,[class*="grad-9"]) .item .fio{
  border-bottom-color:color-mix(in srgb,var(--gold-500) 40%,transparent)}

/* ═══ MARCO DO ANO · numeral vertical na calha, sem colidir com a foto ════ */
.marco-ano{padding-left:clamp(52px,7vw,92px)}
.marco-ano .quadro{max-width:420px;width:100%;justify-self:end}
.numeral{
  position:absolute;left:0;top:0;bottom:0;z-index:3;display:flex;
  align-items:center;justify-content:flex-start;gap:var(--space-4);
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--font-display);font-weight:600;letter-spacing:.05em;
  font-size:clamp(2rem,3.4vw,3.1rem);line-height:1;color:var(--gold-500);
  text-shadow:none;
}
.numeral::after{content:"";display:block;width:1px;height:clamp(40px,8vh,90px);
  background:linear-gradient(var(--gold-500),transparent)}
@media (max-width:991px){
  .marco-ano{padding-left:0}
  .numeral{position:static;writing-mode:horizontal-tb;transform:none;
    justify-content:flex-start;margin-top:var(--space-4)}
  .numeral::after{width:clamp(40px,20vw,120px);height:1px;
    background:linear-gradient(90deg,var(--gold-500),transparent)}
}

/* ═══ DECLARAÇÃO · bloco tipográfico no lugar de uma foto que não existe ══
   Melhor uma afirmação bem composta do que um painel vazio esperando pauta.
   ═════════════════════════════════════════════════════════════════════════ */
.declaracao{
  display:grid;gap:var(--space-5);align-content:center;justify-items:start;
  margin:0;padding:var(--space-7);min-height:100%;
  background:var(--navy-900);color:var(--texto-inverso);
  border-radius:var(--radius-md);
  border-left:3px solid var(--gold-500);
}
.declaracao .ic-lg{width:34px;height:34px;color:var(--gold-500)}
.declaracao blockquote{margin:0;color:var(--cream-50);font-style:normal;max-width:26ch}
.declaracao .legenda{margin:0;color:var(--gold-400);font-size:var(--text-xs);
  font-weight:600;letter-spacing:var(--tracking-caps);text-transform:uppercase}

/* ═══ TRÊS DECISÕES · lista com pictogramas ══════════════════════════════ */
.decisoes{display:grid;gap:var(--space-5);margin-top:var(--space-6)}
.decisoes li{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-4);align-items:start}
.decisoes b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-lg);color:var(--navy-900);margin-bottom:2px}
.decisoes li>span:last-child{font-size:var(--text-sm);color:var(--texto-suave)}
:is(.escuro,.escuro-2,[class*="grad-9"]) .decisoes b{color:var(--cream-50)}
:is(.escuro,.escuro-2,[class*="grad-9"]) .decisoes li>span:last-child{color:var(--texto-inverso-suave)}

/* ═══ PRINCÍPIOS · faixa de três, abaixo do título de página ══════════════ */
.principios{display:grid;gap:var(--space-6);margin-top:var(--space-7);
  padding-top:var(--space-7);padding-bottom:var(--space-8);
  border-top:1px solid color-mix(in srgb,var(--gold-500) 22%,transparent)}
@media (min-width:900px){.principios{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)}}
.principios li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-4);align-items:start}
.principios b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-lg);color:var(--cream-50);margin-bottom:3px}
.principios li>span:last-child{font-size:var(--text-sm);color:var(--texto-inverso-suave)}

/* ═══ VITRINE · quatro pratos sem fotografia, só tipografia ═══════════════
   Enquanto não existir fotografia de comida, a carta se defende sozinha:
   numeral, nome em display, descrição curta e preço com condutor.
   ═════════════════════════════════════════════════════════════════════════ */
.vitrine{display:grid;gap:0;margin-top:var(--space-7);
  border-top:1px solid color-mix(in srgb,var(--gold-500) 20%,transparent)}
@media (min-width:900px){.vitrine{grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--space-8)}}
.vitrine li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-5);
  padding-block:var(--space-7);
  border-bottom:1px solid color-mix(in srgb,var(--gold-500) 20%,transparent)}
@media (min-width:900px){.vitrine li:nth-last-child(-n+2){border-bottom:0}}
.vitrine .num{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  color:var(--gold-500);line-height:1;margin:0;padding-top:.35rem;
  font-variant-numeric:tabular-nums}
.vitrine h3{margin-top:var(--space-2);color:var(--cream-50)}
.vitrine .corpo{margin-top:var(--space-3);max-width:44ch;color:var(--texto-inverso-suave)}
.preco-linha{display:flex;align-items:baseline;gap:var(--space-3);margin-top:var(--space-4)}
.preco-linha>span:first-child{font-family:var(--font-text);font-weight:600;
  font-size:var(--text-md);color:var(--gold-400);font-variant-numeric:tabular-nums}
.preco-linha .sep{flex:1 1 auto;min-width:1.5rem;
  border-bottom:1px dotted color-mix(in srgb,var(--gold-500) 45%,transparent);
  transform:translateY(-.3em)}
.preco-linha .serve{font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy-100)}

/* declaração em superfície clara */
.declaracao.clara{background:var(--navy-900)}
.papel .declaracao,.claro .declaracao,[style*="cream"] .declaracao{background:var(--navy-900)}
/* ═══════════════════════════════════════════════════════════════════════════
   BRASÃO, ÁGUIA E PICTOGRAMAS
   Sprite SVG único no topo do documento; cada uso é um <use href="#ic-...">.
   Traço 1.5, cor herdada — conversa com o repertório da marca.
   ═════════════════════════════════════════════════════════════════════════ */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;flex:none;stroke:currentColor;fill:none;
    stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
    vector-effect:non-scaling-stroke}
.ic [fill="currentColor"]{stroke:none}
.ic-lg{width:32px;height:32px}
.ic-xl{width:44px;height:44px}
.ic-dourado{color:var(--gold-500)}
.papel .ic-dourado,.bloco-cor.creme .ic-dourado{color:var(--brown-700)}

/* selo de ícone — pictograma dentro de anel dourado */
.selo-ic{
  width:64px;height:64px;border-radius:var(--radius-pill);flex:none;
  display:grid;place-items:center;color:var(--gold-500);
  border:1px solid color-mix(in srgb,var(--gold-500) 55%,transparent);
  background:color-mix(in srgb,var(--gold-500) 8%,transparent);
  transition:background-color var(--dur-base) var(--ease-out),
             border-color var(--dur-base) var(--ease-out);
}
/* superfícies claras: ouro sobre creme some. Terroso tem 6,23:1 sobre creme. */
:is(.papel,.claro,.bloco-cor.creme,.card-creme) .selo-ic,
[style*="cream"] .selo-ic,
.secao:not(.escuro):not(.escuro-2):not([class*="grad-9"]) .selo-ic{
  color:var(--brown-700);border-color:color-mix(in srgb,var(--brown-700) 42%,transparent);
  background:color-mix(in srgb,var(--brown-700) 7%,transparent)}
:is(.escuro,.escuro-2,.rodape,.hero,[class*="grad-9"]) .selo-ic{
  color:var(--gold-500);border-color:color-mix(in srgb,var(--gold-500) 55%,transparent);
  background:color-mix(in srgb,var(--gold-500) 8%,transparent)}
li:hover>.selo-ic,.card:hover .selo-ic{border-color:var(--gold-500);
  background:color-mix(in srgb,var(--gold-500) 16%,transparent)}

/* ── ÁGUIA HERÁLDICA · marca-d'água de seção ─────────────────────────────── */
.aguia-marca{
  position:absolute;pointer-events:none;z-index:0;
  opacity:.075;width:min(38vw,440px);max-width:100%;aspect-ratio:139/103;
}
.aguia-marca.direita{right:0;top:50%;transform:translateY(-50%)}
.aguia-marca.esquerda{left:0;bottom:0}
.secao,.secao-larga{isolation:isolate}
.secao>*,.secao-larga>*{position:relative;z-index:1}
/* a marca-d'água NÃO entra no fluxo: `.secao-larga>*` tem especificidade maior
   que `.aguia-marca` e a empurrava para dentro do layout, abrindo 600px de vazio. */
.secao>.aguia-marca,.secao-larga>.aguia-marca,
.portao>.aguia-marca,.bloqueio>.aguia-marca{position:absolute;z-index:0}

/* brasão em destaque, com anel */
.brasao-destaque{
  display:grid;place-items:center;width:clamp(84px,9vw,116px);aspect-ratio:1;
  border-radius:var(--radius-pill);flex:none;
  border:1px solid color-mix(in srgb,var(--gold-500) 42%,transparent);
  box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--gold-500) 12%,transparent);
}
.brasao-destaque .aguia-arte{height:auto}
.brasao-destaque svg{width:56%;height:auto}

/* ═══ DEGRADÊS DE TRANSIÇÃO entre seções de mesma família ════════════════ */
/* ═══ RAMPA DE SUPERFÍCIE ESCURA ═════════════════════════════════════════
   UMA regra: toda seção escura começa e termina em navy-950 e respira até
   navy-900 no miolo. Assim duas seções escuras consecutivas se encontram
   sempre no mesmo tom — não existe degrau, não existe emenda para disfarçar.
   O corte duro fica reservado para escuro → creme, que é mudança de papel.
   ═════════════════════════════════════════════════════════════════════════ */
.grad-9,.grad-950-900,.grad-900-950,.grad-950-900-950,.escuro-2{
  background-color:var(--navy-950);
  background-image:linear-gradient(180deg,
    var(--navy-950) 0%,
    var(--navy-900) 46%,
    var(--navy-900) 58%,
    var(--navy-950) 100%);
}
/* seção curta (menos de ~520px) não tem altura para a rampa inteira:
   fica no tom base, que continua casando com a vizinha */
.grad-plano{background-color:var(--navy-950);background-image:none}
/* faixa de transição para o creme — evita que o corte pareça acidental */
.grad-9 + .papel,.grad-9 + .claro{border-top:1px solid color-mix(in srgb,var(--gold-500) 22%,transparent)}

/* costura removida: filete dourado entre duas seções do MESMO tom era um
   separador anunciando uma divisão que não existe. */
.costura::before{content:none}

.px{will-change:transform}
@media (prefers-reduced-motion:reduce){.px{transform:none!important}}

/* ═══ GARRAFA REAL DA RAVACHE ════════════════════════════════════════════ */
.garrafa{
  position:relative;display:grid;place-items:center;
  min-height:min(60vh,520px);isolation:isolate;
}
/* pilha das sete garrafas: todas carregadas, uma visível — troca sem recarga */
.frasco{
  /* largura explícita: container-type contém o inline-size, então ela não pode
     vir do conteúdo. 294x1148 é a proporção do render de produto. */
  --alt-garrafa:min(60vh,520px);
  position:relative;display:grid;container-type:inline-size;
  height:var(--alt-garrafa);width:calc(var(--alt-garrafa) * 0.2561);
  filter:drop-shadow(0 28px 46px rgba(4,10,20,.6));
}
.frasco .vidro{
  grid-area:1/1;display:block;width:100%;height:100%;
  background-image:var(--g);background-size:contain;
  background-repeat:no-repeat;background-position:center;
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-slow) var(--ease-out);
}
.frasco .vidro.on{opacity:1;visibility:visible}
@media (prefers-reduced-motion:reduce){.frasco .vidro{transition:none}}

/* rótulo desenhado em CSS — tipografia real do sistema, nítida em qualquer tamanho */
.frasco .rotulo{
  position:absolute;z-index:3;left:6.5%;right:6.5%;top:46%;
  display:grid;justify-items:center;gap:.34em;
  padding:1.05em .5em 1.15em;pointer-events:none;
  background-color:var(--navy-900);
  background-image:linear-gradient(90deg,
    rgba(0,0,0,.5) 0%, rgba(0,0,0,.12) 14%, rgba(255,255,255,.07) 46%,
    rgba(255,255,255,.03) 58%, rgba(0,0,0,.14) 86%, rgba(0,0,0,.5) 100%);
  border-block:1px solid var(--gold-500);
  font-size:8.6cqw;line-height:1;
}
.frasco .rotulo .aguia{width:2.9em;height:2.15em;opacity:.95}
.frasco .rotulo .marca{
  font-family:var(--font-display);font-weight:600;font-size:1.02em;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cream-50);
}
.frasco .rotulo .fio{
  width:56%;height:0;border-top:1px solid var(--gold-500);
  box-shadow:0 3px 0 -2px var(--gold-600);
}
.frasco .rotulo .tipo{
  font-family:var(--font-display);font-weight:500;font-size:1.24em;
  color:var(--gold-400);white-space:nowrap;
}
.frasco .rotulo .srm-rot{
  font-family:var(--font-text);font-weight:600;font-size:.58em;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--gold-400);
}
.garrafa .halo{
  position:absolute;inset:auto 0 8% 0;height:62%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 60%,
    color-mix(in srgb,var(--c-chopp,var(--gold-500)) 26%,transparent),transparent 70%);
  transition:background var(--dur-slow) var(--ease-out);
}
.garrafa .nome-fundo{
  position:absolute;z-index:-2;inset:auto 0 6% 0;text-align:center;
  font-family:var(--font-display);font-weight:600;font-size:clamp(2.5rem,7vw,5rem);
  text-transform:uppercase;line-height:.9;white-space:nowrap;
  color:color-mix(in srgb,var(--cream-50) 7%,transparent);
}

/* ═══ GRADE DE EMBALAGENS · produto real sobre campo navy ════════════════ */
.grade-embalagens{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){.grade-embalagens{grid-template-columns:repeat(3,minmax(0,1fr))}}
.emb{
  display:grid;justify-items:center;gap:var(--space-4);margin:0;
  padding:var(--space-7) var(--space-5) var(--space-5);
  background:var(--navy-900);border:1px solid color-mix(in srgb,var(--gold-500) 22%,transparent);
  border-radius:var(--radius-md);min-width:0;
  transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out);
}
.emb:hover{border-color:color-mix(in srgb,var(--gold-500) 55%,transparent);transform:translateY(-2px)}
.emb img{height:clamp(150px,20vw,220px);width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 18px 28px rgba(4,10,20,.5))}
.emb.sem-foto{min-height:280px}
.emb figcaption{display:grid;gap:var(--space-1);text-align:center}
.emb b{font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);color:var(--cream-50)}

/* contraste: sobre superfície escura, o dourado claro volta a ser a cor certa */
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"])
  :is(.circulado,.card-midia .meta,.filete-titulo,.selo-ic){color:var(--gold-400)}
:is(.escuro,.escuro-2,.rodape,.hero,.card-escuro,.portao,.bloqueio,[class*="grad-9"])
  .circulado{border-color:color-mix(in srgb,var(--gold-500) 62%,transparent)}

/* frasco reduzido — usado no harmonizador, ao lado da ficha */
.frasco-sm{--alt-garrafa:min(38vh,340px)}
.frasco-sm .rotulo{font-size:9.4cqw}
/* ═══════════════════════════════════════════════════════════════════════════
   HERO · meia-a-meia · texto emoldurado à esquerda, fábrica real à direita
   ═════════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr);
  align-items:stretch;padding:0;
  min-height:100svh;background:var(--navy-950);color:var(--texto-inverso);overflow:clip;
}
@media (max-width:575px){.hero{min-height:auto}}
@media (min-width:992px){.hero{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}}

.hero-texto{
  position:relative;z-index:2;display:grid;align-content:center;gap:var(--space-4);
  padding-block:calc(76px + var(--space-6)) var(--space-6);
  padding-inline:max(var(--gutter),calc((100vw - var(--container)) / 2)) clamp(1rem,4vw,3.5rem);
}
@media (max-width:991px){
  .hero-texto{padding-inline:var(--gutter);padding-block:calc(76px + var(--space-7)) var(--space-7)}
}
.hero-campo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  --pg:54px;--pl:color-mix(in srgb,var(--gold-500) 12%,transparent);
  background-image:
    repeating-linear-gradient( 45deg,transparent 0 calc(var(--pg) - 1px),var(--pl) calc(var(--pg) - 1px) var(--pg)),
    repeating-linear-gradient(-45deg,transparent 0 calc(var(--pg) - 1px),var(--pl) calc(var(--pg) - 1px) var(--pg));
}
.hero-selo{display:flex;align-items:center;gap:var(--space-4)}
.hero h1{color:var(--cream-50);max-width:23ch}
.hero h1 em{font-style:italic;color:var(--gold-400)}
.hero .lead{color:var(--navy-100);max-width:46ch}

/* faixa de dados com pictogramas */
.hero-dados{
  display:flex;flex-wrap:wrap;gap:var(--space-5) var(--space-6);
  padding-top:var(--space-4);margin-top:0;
  border-top:1px solid color-mix(in srgb,var(--gold-500) 26%,transparent);
}
.hero-dados li{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.hero-dados .ic{width:22px;height:22px;color:var(--gold-500)}
.hero-dados b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-xl);line-height:1;color:var(--cream-50)}
.hero-dados span{display:block;font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--navy-100);margin-top:3px}

/* ── metade da foto ─────────────────────────────────────────────────────── */
.hero-foto{position:relative;overflow:hidden;min-height:44svh;background:var(--navy-900)}
.hero-foto.sem-foto::before{
  content:"";position:absolute;inset:0;z-index:0;--pg:40px;
  --pl:color-mix(in srgb,var(--gold-500) 15%,transparent);
  background-color:var(--navy-900);
  background-image:
    repeating-linear-gradient( 45deg,transparent 0 calc(var(--pg) - 1px),var(--pl) calc(var(--pg) - 1px) var(--pg)),
    repeating-linear-gradient(-45deg,transparent 0 calc(var(--pg) - 1px),var(--pl) calc(var(--pg) - 1px) var(--pg));
}
@media (min-width:992px){.hero-foto{min-height:100%}}
.hero-foto img{
  position:absolute;inset:-9% -3%;width:106%;max-width:none;height:118%;
  object-fit:cover;object-position:50% 42%;
  transform:scale(1.06);opacity:0;
  transition:transform 1400ms var(--ease-out),opacity 900ms var(--ease-out);
}
.hero.pronta .hero-foto img{transform:scale(1);opacity:1}
.hero-foto::after{ /* vinheta que costura a foto ao campo navy */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,var(--navy-950) 0%,color-mix(in srgb,var(--navy-950) 34%,transparent) 13%,transparent 38%),
    linear-gradient(180deg,color-mix(in srgb,var(--navy-950) 46%,transparent) 0%,transparent 22%,
      color-mix(in srgb,var(--navy-950) 40%,transparent) 100%);
}
@media (max-width:991px){
  .hero-foto::after{background:linear-gradient(180deg,color-mix(in srgb,var(--navy-950) 70%,transparent),
    transparent 34%,color-mix(in srgb,var(--navy-950) 78%,transparent))}
}
.hero-legenda{
  position:absolute;z-index:2;right:var(--space-5);bottom:var(--space-5);
  font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-caps);
  text-transform:uppercase;color:var(--gold-400);text-align:right;
  border-right:1px solid var(--gold-500);padding-right:var(--space-3);
}
/* filete dourado costurando as duas metades */
@media (min-width:992px){
  .hero::after{content:"";position:absolute;left:calc(100% * 1.04 / 2.04);top:0;bottom:0;width:1px;z-index:3;
    background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--gold-500) 55%,transparent) 22%,
      color-mix(in srgb,var(--gold-500) 55%,transparent) 78%,transparent);pointer-events:none}
}
.rolar{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-2);
  font-size:var(--text-xs);font-weight:600;letter-spacing:var(--tracking-caps);
  color:var(--navy-100);text-transform:uppercase}
.rolar i{display:block;width:44px;height:1px;background:linear-gradient(90deg,var(--gold-500),transparent);
  position:relative;overflow:visible}
.rolar i::after{content:"";position:absolute;top:-2px;left:0;width:5px;height:5px;
  background:var(--gold-500);transform:rotate(45deg);animation:corre 2.4s var(--ease-out) infinite}
@keyframes corre{0%{left:0;opacity:0}20%{opacity:1}80%{opacity:1}100%{left:40px;opacity:0}}
@media (prefers-reduced-motion:reduce){.rolar i::after{animation:none}}

/* ═══ PORTÃO DE IDADE ════════════════════════════════════════════════════ */
.portao{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--navy-950);padding:var(--space-5);
  opacity:0;visibility:hidden;transition:opacity 320ms var(--ease-out),visibility 0s linear 320ms;
}
.portao.aberto{opacity:1;visibility:visible;transition-delay:0s}
.portao-campo{position:absolute;inset:0;z-index:0;pointer-events:none;--pg:54px;
  --pl:color-mix(in srgb,var(--gold-500) 12%,transparent);
  background-image:
    repeating-linear-gradient( 45deg,transparent 0 calc(var(--pg) - 1px),var(--pl) calc(var(--pg) - 1px) var(--pg)),
    repeating-linear-gradient(-45deg,transparent 0 calc(var(--pg) - 1px),var(--pl) calc(var(--pg) - 1px) var(--pg))}
.portao-caixa{
  position:relative;z-index:1;--mf-cut:20px;width:100%;max-width:560px;text-align:center;
  padding:clamp(2rem,5vw,3rem) clamp(1.25rem,4vw,2.5rem);
  background:color-mix(in srgb,var(--navy-900) 88%,transparent);
}
.portao-caixa .brasao-destaque{margin-inline:auto}
.portao h2{color:var(--cream-50);margin-top:var(--space-5)}
.portao p{color:var(--navy-100);margin-inline:auto}
.portao .flex{justify-content:center;margin-top:var(--space-6)}
.portao .aviso{font-size:var(--text-sm);color:var(--navy-100);margin-top:var(--space-6)}
body.portao-ativo{overflow:hidden}

/* ═══ PÁGINA DE BLOQUEIO (menor de 18) ═══════════════════════════════════ */
.bloqueio{
  min-height:100svh;display:grid;place-items:center;text-align:center;
  background:var(--navy-950);color:var(--texto-inverso);padding:var(--space-7) var(--space-5);
  position:relative;overflow:hidden;
}
.bloqueio-in{position:relative;z-index:1;max-width:660px;display:grid;gap:var(--space-5);justify-items:center}
.bloqueio .lei{
  text-align:left;border:1px solid color-mix(in srgb,var(--gold-500) 34%,transparent);
  border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);
  background:color-mix(in srgb,var(--navy-900) 70%,transparent);margin-top:var(--space-4);
}
.bloqueio .lei h3{font-family:var(--font-text);font-size:var(--text-xs);font-weight:600;
  letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--gold-400);margin-bottom:var(--space-3)}
.bloqueio .lei p{font-size:var(--text-sm);color:var(--navy-100)}
.bloqueio .lei p+p{margin-top:var(--space-3)}
.bloqueio .lei cite{font-style:normal;color:var(--cream-50);font-weight:600}

/* casca escondida na página de bloqueio */
body.bloqueado .topo,body.bloqueado .doca,body.bloqueado .rodape,
body.bloqueado .progresso,body.bloqueado .gaveta,body.bloqueado .ticker{display:none!important}

/* ═══ MAPA GOOGLE · facade + iframe sob clique ═══════════════════════════ */
.mapa-quadro{position:relative;border-radius:var(--radius-md);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--gold-500) 30%,transparent);background:var(--navy-950)}
.mapa-quadro iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.mapa-quadro .facade{display:block;position:relative;z-index:1}
.mapa-quadro.carregado .facade,.mapa-quadro.carregado .abrir-mapa{opacity:0;pointer-events:none}
.abrir-mapa{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;gap:var(--space-3);
  background:color-mix(in srgb,var(--navy-950) 46%,transparent);
  transition:opacity var(--dur-base) var(--ease-out),background-color var(--dur-base) var(--ease-out);
  cursor:pointer;border:0;width:100%;
}
.abrir-mapa:hover{background:color-mix(in srgb,var(--navy-950) 28%,transparent)}
.abrir-mapa .rotulo-mapa{
  display:inline-flex;align-items:center;gap:var(--space-2);
  background:var(--navy-900);color:var(--cream-50);
  border:1px solid var(--gold-500);border-radius:var(--radius-md);
  padding:.7rem 1.2rem;font-weight:600;font-size:var(--text-base);
  box-shadow:var(--shadow-raised);
  transition:background-color var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out);
}
.abrir-mapa:hover .rotulo-mapa{background:var(--gold-500);color:var(--navy-900)}
.abrir-mapa:active .rotulo-mapa{background:var(--gold-600)}
@media (max-width:575px){
  .hero-dados{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
  .hero-dados li{min-width:0}
  .hero-dados span span{white-space:normal;line-height:1.35}
}

:root{--marca-clara:image-set(url("../img/marca-clara-766.avif") type("image/avif"),url("../img/marca-clara-766.webp") type("image/webp"));--marca-ouro:image-set(url("../img/marca-ouro-766.avif") type("image/avif"),url("../img/marca-ouro-766.webp") type("image/webp"));--aguia:image-set(url("../img/aguia-139.avif") type("image/avif"),url("../img/aguia-139.webp") type("image/webp"));}
:root{--g-pilsen-leve:image-set(url("../img/garrafa-pilsen-leve-294.avif") type("image/avif"),url("../img/garrafa-pilsen-leve-294.webp") type("image/webp"));--g-pilsen:image-set(url("../img/garrafa-pilsen-294.avif") type("image/avif"),url("../img/garrafa-pilsen-294.webp") type("image/webp"));--g-gold:image-set(url("../img/garrafa-gold-294.avif") type("image/avif"),url("../img/garrafa-gold-294.webp") type("image/webp"));--g-ipa:image-set(url("../img/garrafa-ipa-294.avif") type("image/avif"),url("../img/garrafa-ipa-294.webp") type("image/webp"));--g-vinho:image-set(url("../img/garrafa-vinho-294.avif") type("image/avif"),url("../img/garrafa-vinho-294.webp") type("image/webp"));--g-malzbier:image-set(url("../img/garrafa-malzbier-294.avif") type("image/avif"),url("../img/garrafa-malzbier-294.webp") type("image/webp"));--g-black:image-set(url("../img/garrafa-black-294.avif") type("image/avif"),url("../img/garrafa-black-294.webp") type("image/webp"));}