/* =========================================================
   TREM BÃO — design system do Restaurante Mineirão
   Fonte única de tokens: site, cardápio, vitrine e peças (render.py lê este arquivo).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Caveat+Brush&family=Cinzel:wght@600;700;800&family=Work+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* --- cor: tirada da marca que já existe (brasão, selo, fachada) --- */
  --mata:#12332A;        /* verde-mata do fundo do brasão — fundo escuro principal */
  --mata-2:#0B2019;      /* mata profunda */
  --selo:#23713A;        /* verde do selo de delivery */
  --ouro:#D4A43A;        /* ouro do brasão — ornamento, preço, destaque nobre */
  --ouro-claro:#F1D27A;
  --brasa:#C62B3A;       /* vermelho da fachada — ação, CTA */
  --brasa-2:#A41F2D;
  --milho:#F5C542;       /* marca-texto */
  --pano:#F6EEDF;        /* creme de pano de prato — fundo claro */
  --pano-2:#EBDDC6;
  --madeira:#8A5A35;     /* moldura de madeira do selo */
  --cafe:#3E2718;        /* texto quente sobre claro */
  --ferro:#14100C;       /* panela de ferro — preto da casa */
  --zap:#25D366;

  /* --- tipo --- */
  --f-display:'Alfa Slab One',Georgia,serif;   /* grito: o letreiro da fachada */
  --f-marca:'Cinzel',Georgia,serif;             /* nobreza do brasão: marca, eyebrow, preço */
  --f-texto:'Work Sans',system-ui,sans-serif;   /* leitura */
  --f-mao:'Caveat Brush',cursive;               /* bilhete de mineiro: "é trem bão!" */

  /* --- forma --- */
  --r-s:10px; --r-m:18px; --r-l:28px; --r-pill:999px;
  --sombra:0 18px 50px rgba(20,16,12,.28);
  --sombra-brasa:0 16px 40px rgba(198,43,58,.35);
  --grao:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/></svg>");
  --xadrez:repeating-linear-gradient(0deg,rgba(198,43,58,.55) 0 14px,transparent 14px 28px),repeating-linear-gradient(90deg,rgba(198,43,58,.55) 0 14px,transparent 14px 28px);
}

[hidden]{display:none!important}

/* ---------- utilitários de marca ---------- */
.hl{background:linear-gradient(180deg,transparent 52%,var(--milho) 52% 90%,transparent 90%);padding:0 .08em;color:inherit}
.s-escuro .hl,.hl-ouro{background:none;color:var(--ouro-claro)}
.eyebrow{font:700 .8rem/1 var(--f-marca);letter-spacing:.24em;text-transform:uppercase;color:var(--brasa);display:inline-flex;align-items:center;gap:.8em}
.eyebrow::before{content:"";width:2.4em;height:2px;background:currentColor}
.s-escuro .eyebrow{color:var(--ouro)}
.t-display{font-family:var(--f-display);font-weight:400;line-height:1.02;letter-spacing:-.005em}
.mao{font-family:var(--f-mao);color:var(--brasa);line-height:1}
.s-escuro .mao{color:var(--milho)}
.grao{position:absolute;inset:0;background-image:var(--grao);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.xadrez{height:18px;background:var(--xadrez),var(--pano)}
.costura{outline:2px dashed currentColor;outline-offset:-10px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;font:800 1rem/1 var(--f-texto);letter-spacing:.02em;
  padding:1.05em 1.6em;border-radius:var(--r-pill);border:0;cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .15s;
  background:var(--brasa);color:#fff;box-shadow:var(--sombra-brasa);position:relative}
.btn::after{content:"";position:absolute;inset:5px;border-radius:inherit;border:1.5px dashed rgba(255,255,255,.45);pointer-events:none}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:1.3em;height:1.3em;flex:none}
.btn-ouro{background:var(--ouro);color:var(--ferro);box-shadow:0 14px 34px rgba(212,164,58,.35)}
.btn-ouro::after{border-color:rgba(20,16,12,.3)}
.btn-zap{background:var(--zap);color:#073b1d;box-shadow:0 14px 34px rgba(37,211,102,.3)}
.btn-zap::after{border-color:rgba(7,59,29,.3)}
.btn-linha{background:transparent;color:inherit;box-shadow:none;outline:2px solid currentColor;outline-offset:-2px}
.btn-linha::after{display:none}

/* ---------- selo carimbado ---------- */
.selo{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;text-align:center;position:relative;
  background:var(--selo);color:var(--ouro-claro);box-shadow:0 0 0 6px var(--madeira),var(--sombra);transform:rotate(-8deg)}
.selo::before{content:"";position:absolute;inset:8px;border-radius:50%;border:1.5px dashed rgba(241,210,122,.6)}
.selo b{display:block;font:400 2.1rem/1 var(--f-display)}
.selo small{display:block;font:700 .62rem/1.2 var(--f-marca);letter-spacing:.16em;text-transform:uppercase;margin-top:.3em}
.selo-brasa{background:var(--brasa);color:#fff}

/* ---------- cartões, preço ---------- */
.card{background:#fff;border-radius:var(--r-l);padding:28px;box-shadow:0 1px 0 rgba(62,39,24,.08),0 18px 40px rgba(62,39,24,.08);position:relative}
.card-pano{background:var(--pano);outline:2px dashed rgba(138,90,53,.35);outline-offset:-10px}
.preco{font:800 1.25rem/1 var(--f-marca);color:var(--brasa);letter-spacing:.02em}
.preco small{font:600 .7em var(--f-texto);color:var(--madeira)}
.etiqueta{display:inline-block;font:700 .7rem/1 var(--f-texto);letter-spacing:.12em;text-transform:uppercase;padding:.5em .8em;border-radius:var(--r-pill);background:var(--pano-2);color:var(--cafe)}
.etiqueta-brasa{background:var(--brasa);color:#fff}
.etiqueta-ouro{background:var(--ouro);color:var(--ferro)}

/* ---------- seções ---------- */
.s-claro{background:var(--pano);color:var(--cafe)}
.s-escuro{background:var(--mata);color:var(--pano)}
.s-ferro{background:var(--ferro);color:var(--pano)}
.s-brasa{background:var(--brasa);color:#fff}

/* ---------- brasão vetorial (redesenho fiel da marca atual) ---------- */
.brasao{display:block;color:var(--ouro)}
.brasao .nome{font-family:var(--f-marca);font-weight:800;fill:var(--pano)}
.brasao .sub{font-family:var(--f-marca);font-weight:700;fill:var(--pano);letter-spacing:.32em}
.brasao .rm{font-family:var(--f-marca);font-weight:800;fill:currentColor}
.brasao-claro .nome,.brasao-claro .sub{fill:var(--mata)}
.brasao-claro{color:#B98A25}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}