/* ======================================================================
   VITÓRIA RESTAURANTE E PIZZARIA — base do cardápio e do painel

   ⚠ A CARA DO CARDÁPIO NÃO ESTÁ AQUI.
   Esta folha só tem reset, medidas, botões e um jogo de cores de
   emergência. Quem manda na aparência é assets/css/tema.css, que o
   cardapio.html carrega DEPOIS desta e de cardapio.css.

   Foi feito assim de propósito: trocar o visual inteiro da loja é
   trocar uma folha só, sem encostar em estrutura. Os temas que não
   foram escolhidos estão guardados em _briefing/temas-alternativos/.

   Tema em uso: "Assinatura Vitória" — branco, vinho e logo oficial.

   REGRA QUE VALE EM QUALQUER TEMA: toda cor de texto precisa de 4.5 de
   contraste sobre o fundo em que vai cair (3.0 se for texto grande).
   Os valores conferidos de cada tema estão no cabeçalho do tema.
   ====================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
picture { display: contents; }
ul[role="list"], ol[role="list"] { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* ---------- Tokens ---------- */
:root {
  /* chão — do mais fundo ao mais alto */
  --carvao:    #140a05;
  --carvao-2:  #1d1109;   /* barra, painel, superfície elevada */
  --carvao-3:  #2a1810;   /* hover, superfície mais alta */

  /* tinta */
  --creme:     #f5e9dc;
  --creme-2:   #c9b6a4;
  --creme-3:   #9a8879;

  /* marca */
  --vinho:     #860018;   /* fita e estrutura — nunca texto */
  --vinho-2:   #6b0013;   /* a dobra de trás da fita */
  --vermelho:  #be1d2d;   /* ação */
  --vermelho-2:#a01624;
  --ouro:      #fdc903;   /* preço */
  --ouro-2:    #fdeb03;
  --laranja:   #f78628;
  --zap:       #25d366;

  /* linhas: claras, porque o chão é escuro */
  --linha:     rgba(245, 233, 220, .13);
  --linha-2:   rgba(245, 233, 220, .26);

  /* ---- apelidos que o cardapio.css e o painel.css já usam ----
     Mantidos para não reescrever as duas folhas inteiras. */
  --preto:     var(--carvao);
  --preto-2:   var(--carvao-2);
  --preto-3:   var(--carvao-3);
  --pink:      var(--vermelho);   /* fundo de ação */
  --pink-2:    var(--ouro);       /* texto de destaque = o preço */
  --turq:      var(--laranja);    /* apoio e foco */
  --choco:     var(--carvao);
  --tinta:     var(--creme);
  --tinta-2:   var(--creme-2);
  --tinta-3:   var(--creme-3);

  /* tipografia — três vozes com contraste de verdade:
     display pesada de placa, condensada para nome e preço,
     humanista para a lista de ingredientes (que aqui é longa). */
  --f-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --f-titulo:  'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --f-texto:   'Karla', system-ui, -apple-system, sans-serif;

  --larg:  1180px;
  --lado:  clamp(1.1rem, 4vw, 3rem);
  --bloco: clamp(3rem, 2rem + 3.4vw, 5.5rem);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; touch-action: pan-x pan-y; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
body {
  background: var(--carvao); color: var(--creme);
  font-family: var(--f-texto);
  font-size: clamp(.95rem, .91rem + .2vw, 1.02rem); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4 {
  font-family: var(--f-titulo); font-weight: 600; text-transform: uppercase;
  line-height: 1; letter-spacing: .01em; color: var(--creme);
}
::selection { background: var(--ouro); color: var(--carvao); }
.pular {
  position: absolute; left: -999px; top: 0; background: var(--ouro); color: var(--carvao);
  font-weight: 700; padding: .8rem 1.2rem; z-index: 300;
}
.pular:focus { left: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; }
.icone { width: 1.15em; height: 1.15em; fill: currentColor; flex-shrink: 0; }

/* Grão: em chão escuro tem que CLAREAR, não multiplicar. */
.grao {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.miolo { max-width: var(--larg); margin-inline: auto; padding-inline: var(--lado); }

/* ---------- Tipos de texto ---------- */
.rotulo {
  display: inline-block; font-family: var(--f-titulo); font-weight: 500; font-size: .82rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--laranja); margin-bottom: .7rem;
}
.titulo { font-family: var(--f-display); font-weight: 400; text-transform: none;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -.01em; }
.titulo em { font-style: normal; color: var(--ouro); }
.texto { color: var(--creme-2); max-width: 54ch; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-titulo); font-weight: 600; font-size: 1rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .9rem 1.6rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn--pink  { background: var(--vermelho); color: #fff; }
.btn--pink:hover { background: var(--vermelho-2); }
.btn--zap   { background: var(--zap); color: #06301a; }
.btn--zap:hover { background: #33e07a; }
.btn--linha { border-color: var(--linha-2); color: var(--creme); }
.btn--linha:hover { border-color: var(--creme); background: var(--carvao-3); }
.btn--claro { background: var(--ouro); color: var(--carvao); }
.btn--claro:hover { background: var(--ouro-2); }
.link-seta {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-titulo);
  font-weight: 500; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ouro);
}
.link-seta::after { content: "→"; transition: transform .2s; }
.link-seta:hover::after { transform: translateX(4px); }

.reveal { opacity: 0; transform: translateY(24px); }
.reveal--ativo {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--atraso, 0s);
}