/* Protótipo 01 · Hamburgueria — Ferro & Fogo
   Tokens do 01-design-system.md (com os ajustes de contraste A1–A9). */

/* fontes auto-hospedadas (SIL OFL; licenças em fontes/): subset latino, variáveis */
@font-face { font-family: "Cinzel"; src: url("fontes/cinzel-latin-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("fontes/cormorant-garamond-latin-wght-normal.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Cormorant Ampersand"; src: url("fontes/cormorant-ampersand.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }  /* só o "&" do logotipo */
@font-face { font-family: "Inter"; src: url("fontes/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fontes/montserrat-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --color-gold: #C6A66B; --color-gold-light: #E5CE91; --color-gold-dark: #8F713D; --color-gold-active: #A3844A;
  --color-background: #0A0A0C; /* ajuste A9: 1 nível abaixo de #0B0B0C para casar com o fundo decodificado do WebP (sem emenda) */
  --color-background-soft: #151619; --color-surface: #1B1C20; --color-surface-raised: #252529;
  --color-border: #373536; --color-border-input: #7A7678; --color-border-gold: #74603C;
  --color-text-primary: #F5F0E7; --color-text-secondary: #C2BCB2; --color-text-muted: #928B80; --color-text-inverse: #121212;
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-heading: "Cinzel", Georgia, serif;
  --font-body: "Inter", system-ui, Arial, sans-serif;
  --font-ui: "Montserrat", system-ui, Arial, sans-serif;
  --text-xs: .75rem; --text-sm: .8125rem; --text-base: .9375rem; --text-lg: 1.0625rem;
  --text-display: clamp(2rem, 4.5vw, 3.75rem);
  --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem;
  --radius-sm: .25rem; --radius-lg: .875rem;
  --container-max: 1280px; --container-gutter: 24px;
  --transition-fast: 150ms ease; --transition-base: 220ms ease;
  --focus-ring: 2px solid var(--color-gold-light);
  --color-success: #6F9B70; --color-error: #D96B60; --color-warning: #D5A34F; --color-info: #8299AE;   /* estados semânticos do design system */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  background: var(--color-background); color: var(--color-text-primary);
  font: 400 var(--text-base)/1.55 var(--font-body); -webkit-font-smoothing: antialiased;
}
:where(a, button):focus-visible { outline: var(--focus-ring); outline-offset: 3px; }
.container { width: min(calc(100% - 2 * var(--container-gutter)), var(--container-max)); margin-inline: auto; }

/* ——— marcador de protótipo (todo conteúdo provisório fica sinalizado) ——— */
.proto-tag {
  display: inline-flex; gap: var(--space-2); align-items: center;
  font: 600 var(--text-xs)/1 var(--font-ui); letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-gold-light); border: 1px solid var(--color-border-gold); border-radius: var(--radius-sm); padding: .4rem .6rem;
}
.ph { /* placeholder */ outline: 1px dashed var(--color-border-gold); outline-offset: 6px; }

/* ——— cabeçalho (uma única barra) ——— */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 10; background: rgba(9, 9, 9, .72); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; }
/* logotipo: chama dourada + "FERRO & FOGO" (Cinzel em caixa alta, "&" em Cormorant itálico) */
.logo { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--color-gold-light); }
.logo__chama { width: 22px; height: 22px; display: block; flex: none; }
.logo__texto { display: inline-flex; align-items: baseline; gap: .55em; font: 600 1rem/1 var(--font-heading); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.logo__e { font: italic 500 1.5em/1 "Cormorant Ampersand", var(--font-display); letter-spacing: 0; text-transform: none; color: var(--color-gold); }
.logo:hover .logo__texto { color: var(--color-text-primary); }
@media (max-width: 380px) { .logo__texto { font-size: .875rem; letter-spacing: .16em; } }
.site-header__nav { display: flex; gap: var(--space-8); font: 500 var(--text-xs)/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.site-header__nav a { color: var(--color-text-primary); text-decoration: none; padding: .75rem 0; }
.site-header__nav a:hover { color: var(--color-gold-light); }
@media (max-width: 767px) { .site-header__nav { display: none; } }

/* ——— hero ——— */
.hero { position: relative; isolation: isolate; overflow: hidden; overflow: clip; min-height: 100vh; min-height: 100svh; display: grid; align-items: center; padding-block: 88px var(--space-8); background: var(--color-background); }
/* fundo de fogo e fumaça + camadas de proteção de leitura e de destaque do produto */
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 72%, var(--color-background) 100%),                           /* funde o fim do hero com o cardápio */
    radial-gradient(34% 58% at 73% 56%, rgba(10, 10, 12, .58), transparent 72%),                      /* escurece atrás do hambúrguer: ele não se perde nas chamas */
    linear-gradient(90deg, rgba(8, 8, 9, .94) 0%, rgba(8, 8, 9, .72) 42%, rgba(8, 8, 9, .14) 100%);  /* overlay do design system: protege o texto à esquerda */
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.hero__content { display: grid; gap: var(--space-6); max-width: 34rem; }
.hero__eyebrow { display: flex; align-items: center; gap: var(--space-3); font: 500 var(--text-xs)/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); }
.hero__eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--color-gold); }          /* filete dourado (decorativo) */
.hero__title { font: 500 var(--text-display)/1.05 var(--font-display); letter-spacing: .015em; text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--color-gold-light); }
.hero__lead { color: var(--color-text-secondary); font-size: var(--text-base); max-width: 28rem; text-wrap: pretty; }
.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 600 var(--text-xs)/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.button--primary { background: var(--color-gold); color: var(--color-text-inverse); }
.button--primary:hover { background: var(--color-gold-light); }
.button--primary:active { background: var(--color-gold-active); }
.button--outline { background: transparent; border-color: var(--color-text-secondary); color: var(--color-text-primary); }
.button--outline:hover { border-color: var(--color-gold-light); }

/* composição dos produtos do hero: recortes com transparência sobre o fundo de fogo */
.stage { position: relative; justify-self: center; width: min(100%, 620px, calc((100svh - 130px) * 1.1)); aspect-ratio: 1.1 / 1; }
.stage__item { position: absolute; display: block; height: auto; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .55)); will-change: transform; }
.stage__item--molho   { width: 60%; left: 6%;  top: 26%; z-index: 1; animation: flutuar-b 7s ease-in-out -2s infinite; }
.stage__item--cheddar { width: 58%; left: 31%; top: 5%;  z-index: 2; animation: flutuar-a 6s ease-in-out infinite; }

/* flutuar: lento e discreto, em fases opostas (sem zoom nem giros grandes) */
@keyframes flutuar-a { 0%, 100% { transform: translateY(0) rotate(-.7deg); } 50% { transform: translateY(-12px) rotate(.9deg); } }
@keyframes flutuar-b { 0%, 100% { transform: translateY(0) rotate(.9deg); }  50% { transform: translateY(-9px) rotate(-.7deg); } }
@media (prefers-reduced-motion: reduce) { .stage__item { animation: none; will-change: auto; } }

/* ——— cardápio "Signature Creations" (cartões do design system §5.3) ——— */
.button--small { min-height: 44px; padding: 0 14px; }
.signature-section { padding-block: var(--space-16); background: var(--color-background); border-top: 1px solid var(--color-border); scroll-margin-top: 64px; }
.signature-section__head { display: grid; justify-items: center; gap: var(--space-3); text-align: center; margin-bottom: var(--space-12); }
.signature-section__eyebrow { font: 500 var(--text-xs)/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); }
.signature-section__title:focus { outline: none; }
.signature-section__title { font: 500 clamp(1.5rem, 3vw, 2.25rem)/1.2 var(--font-heading); letter-spacing: .015em; }
.signature-section__note { font-size: var(--text-xs); color: var(--color-text-muted); }

.signature-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.product-card {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: 0 8px 24px rgba(0, 0, 0, .32);
  transition: transform var(--transition-base), border-color var(--transition-base);
}
.product-card:hover, .product-card:focus-within { transform: translateY(-3px); border-color: var(--color-gold-dark); }
.product-card__image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--color-background); }   /* 1:1 — formato das fotos (design system permite 4:5 ou 1:1) */
.product-card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 350ms ease; }
.product-card:hover .product-card__image img { transform: scale(1.025); }
.product-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.product-card__title { font: 600 1.0625rem/1.35 var(--font-ui); }
.product-card__description { color: var(--color-text-secondary); font: 400 var(--text-sm)/1.5 var(--font-body); }
.product-card__footer { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.product-card__price { color: var(--color-gold-light); font: 600 1.125rem/1.4 var(--font-ui); }

.badge {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 1;
  padding: .375rem .625rem; border: 1px solid var(--color-border-gold); border-radius: var(--radius-sm);
  background: rgba(10, 10, 12, .82); font: 600 var(--text-xs)/1.2 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
}
.badge--signature { color: var(--color-gold-light); }
.badge--popular { color: var(--color-text-primary); border-color: var(--color-border); }
.badge--new { color: var(--color-gold-light); border-color: var(--color-gold-dark); }

@media (max-width: 1023px) { .signature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 380px) { .signature-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
  .product-card, .product-card__image img { transition: none; }
  .product-card:hover, .product-card:focus-within, .product-card:hover .product-card__image img { transform: none; }
}

/* ——— mobile ——— */
@media (max-width: 767px) {
  .hero { align-items: start; padding-block: 80px var(--space-6); }
  .hero::before {
    background:
      linear-gradient(180deg, transparent 78%, var(--color-background) 100%),
      radial-gradient(60% 40% at 50% 68%, rgba(10, 10, 12, .55), transparent 72%),
      linear-gradient(180deg, rgba(8, 8, 9, .94) 0%, rgba(8, 8, 9, .80) 36%, rgba(8, 8, 9, .30) 100%);   /* texto no topo no celular */
  }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .hero__content { max-width: none; gap: var(--space-3); }
  .hero__lead { font-size: var(--text-sm); max-width: 32rem; }
  .stage { width: min(100%, calc((100svh - 300px) * 0.9)); min-width: 260px; aspect-ratio: .9 / 1; margin-top: var(--space-6); }
  .stage__item--molho   { width: 72%; left: 3%;  top: 36%; }
  .stage__item--cheddar { width: 68%; left: 27%; top: 3%; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ═══════════ Elemento 4 — navegação e carrinho ═══════════ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.site-header__acoes { display: flex; align-items: center; gap: var(--space-3); }
.cart-button, .icon-button {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-primary); cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.cart-button:hover, .icon-button:hover { border-color: var(--color-gold-light); color: var(--color-gold-light); }
.cart-button svg, .icon-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cart-button__count {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  border-radius: var(--radius-pill, 999px); background: var(--color-gold); color: var(--color-text-inverse); font: 700 var(--text-xs)/1 var(--font-ui);
}
.cart-button__count[hidden] { display: none; }
.cart-button.is-bump { animation: bump .35s ease; }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* botão "Adicionar" depois de clicar: verde discreto + texto (não só cor) */
.button--primary.is-ok { background: var(--color-success); color: var(--color-text-inverse); }

/* carrinho lateral (design system §5.6) */
.cart {
  margin: 0 0 0 auto; padding: 0; width: min(440px, 100vw); max-width: none; height: 100dvh; max-height: none;
  border: 0; border-left: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-primary);
  box-shadow: -16px 0 40px rgba(0, 0, 0, .45);
}
.cart::backdrop { background: rgba(9, 9, 9, .78); }
.cart[open] { display: flex; animation: cart-entra .26s cubic-bezier(.2, .8, .2, 1); }
.cart[open]::backdrop { animation: fundo-entra .2s ease; }
@keyframes cart-entra { from { transform: translateX(32px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fundo-entra { from { opacity: 0; } to { opacity: 1; } }
.cart__painel { display: flex; flex-direction: column; width: 100%; min-height: 0; }
.cart__topo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border); }
.cart__titulo { font: 500 1.375rem/1.2 var(--font-heading); letter-spacing: .015em; }
.cart__corpo { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4) var(--space-6); overscroll-behavior: contain; }
.cart__rodape { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--color-border); background: var(--color-surface-raised); }
.cart__rodape[hidden] { display: none; }

.cart-lista { list-style: none; padding: 0; display: grid; }
.cart-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.cart-item:first-child { padding-top: 0; }
.cart-item__img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-md, .5rem); background: var(--color-background); }
.cart-item__nome { font: 600 var(--text-base)/1.3 var(--font-ui); }
.cart-item__preco { color: var(--color-gold-light); font: 600 var(--text-sm)/1.4 var(--font-ui); }
.cart-item__un { color: var(--color-text-secondary); font-weight: 400; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); }
.qty__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--color-text-primary); font: 500 1.25rem/1 var(--font-ui); cursor: pointer; }
.qty__btn:hover:not(:disabled) { color: var(--color-gold-light); background: var(--color-surface-raised); }
.qty__btn:disabled { color: var(--color-text-muted); cursor: not-allowed; }
.qty__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.qty__valor { min-width: 28px; text-align: center; font: 600 var(--text-base)/1 var(--font-ui); }

.cart-subtotal { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); font: 500 var(--text-base)/1.4 var(--font-ui); }
.cart-subtotal__valor { color: var(--color-gold-light); font: 600 1.375rem/1.2 var(--font-ui); }
.cart-nota { color: var(--color-text-secondary); font-size: var(--text-sm); }
.cart-finalizar { width: 100%; }
.cart__rodape .button { width: 100%; }

.cart-vazio, .cart-sucesso { display: grid; justify-items: center; gap: var(--space-3); text-align: center; padding-block: var(--space-12); }
.cart-vazio__icone svg, .cart-sucesso__icone svg { width: 56px; height: 56px; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cart-vazio__icone svg { stroke: var(--color-gold-dark); }
.cart-sucesso__icone svg { stroke: var(--color-success); }
.cart-vazio__titulo, .cart-sucesso__titulo { font: 500 1.5rem/1.2 var(--font-display); }
.cart-sucesso__titulo:focus { outline: none; }
.cart-vazio__texto, .cart-sucesso__texto { color: var(--color-text-secondary); max-width: 26rem; }
.cart-resumo { list-style: none; padding: 0; display: grid; gap: var(--space-2); width: 100%; margin-top: var(--space-4); text-align: left; color: var(--color-text-secondary); }
.cart-resumo li, .cart-resumo__total { display: flex; justify-content: space-between; gap: var(--space-4); }
.cart-resumo__total { width: 100%; margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border); color: var(--color-text-primary); }
.cart-resumo__total strong { color: var(--color-gold-light); }

/* cabeçalho compacto no celular: logotipo + rótulo + carrinho cabem em 375 px */
@media (max-width: 480px) {
  .site-header__acoes { gap: var(--space-2); }
  .proto-tag { padding: .3rem .45rem; letter-spacing: .06em; }
  .logo__texto { letter-spacing: .12em; }
}
@media (max-width: 767px) { .cart { width: 100vw; border-left: 0; } }
@media (prefers-reduced-motion: reduce) {
  .cart[open], .cart[open]::backdrop, .cart-button.is-bump { animation: none; }
}

/* ═══════════ Elemento 5 — microanimações e estados ═══════════
   Regras do design system: transições curtas (150–250 ms), só opacity/transform, nada de efeito constante
   exagerado; tudo que se move fica dentro de prefers-reduced-motion: no-preference. */

/* ——— estados de interação (valem para todos) ——— */
.button--primary:hover { box-shadow: var(--shadow-gold, 0 0 18px rgba(198, 166, 107, .12)); }
.button--primary:active { box-shadow: none; }
.button--outline:hover { background: rgba(229, 206, 145, .06); }
.button:disabled, .button[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.button:disabled:hover { background: var(--color-gold); }   /* desabilitado não reage ao hover */
.button--outline:disabled:hover { background: transparent; }

/* cabeçalho: ganha corpo ao rolar */
.site-header { transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.site-header.is-scrolled { background: rgba(9, 9, 9, .94); border-bottom-color: var(--color-border-gold); box-shadow: 0 10px 28px rgba(0, 0, 0, .4); }

/* links do menu: filete dourado que cresce no hover e marca a seção visível */
.site-header__nav a { position: relative; transition: color var(--transition-fast); }
.site-header__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1px; background: var(--color-gold);
  transform: scaleX(0); transform-origin: left; transition: transform var(--transition-base);
}
.site-header__nav a:hover::after, .site-header__nav a[aria-current="true"]::after { transform: scaleX(1); }
.site-header__nav a[aria-current="true"] { color: var(--color-gold-light); }

/* imagens dos cartões: carregamento (brilho passando) e erro (mensagem em texto) */
.product-card__image img { transition: transform 350ms ease, opacity .45s ease; }
.js .product-card__image:not(.is-loaded) img { opacity: 0; }
.js .product-card__image:not(.is-loaded) {
  background: linear-gradient(100deg, var(--color-background) 30%, #15161a 50%, var(--color-background) 70%) 0 0 / 220% 100%;
}
.product-card__image.is-erro img { display: none; }
.product-card__image.is-erro::after {
  content: "Imagem indisponível"; position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-6); text-align: center;
  color: var(--color-text-muted); font: 500 var(--text-xs)/1.3 var(--font-ui); letter-spacing: .08em; text-transform: uppercase;
  outline: 1px dashed var(--color-border-gold); outline-offset: -10px;
}

/* ——— movimento (só quando o usuário não pediu para reduzir) ——— */
@media (prefers-reduced-motion: no-preference) {
  /* entrada do hero: texto sobe em sequência; fogo surge devagar; hambúrgueres aparecem e depois flutuam */
  .js .hero__eyebrow, .js .hero__title, .js .hero__lead, .js .hero__actions { animation: sobe .7s cubic-bezier(.2, .7, .2, 1) both; }
  .js .hero__title   { animation-delay: .12s; }
  .js .hero__lead    { animation-delay: .26s; }
  .js .hero__actions { animation-delay: .38s; }
  .js .hero__bg img { animation: fundo-surge 1.2s ease-out both; }
  .js .stage__item--cheddar { animation: item-entra .9s .2s cubic-bezier(.2, .7, .2, 1) both, flutuar-a 6s ease-in-out infinite; }
  .js .stage__item--molho   { animation: item-entra .9s .4s cubic-bezier(.2, .7, .2, 1) both, flutuar-b 7s ease-in-out -2s infinite; }
  @keyframes sobe        { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
  @keyframes fundo-surge { from { opacity: 0; } to { opacity: 1; } }
  @keyframes item-entra  { from { opacity: 0; translate: 0 26px; scale: .94; } to { opacity: 1; translate: 0 0; scale: 1; } }

  /* revelação ao rolar: cada item do cardápio entra com pequeno atraso (usa translate, para não brigar com o hover dos cartões) */
  .js .reveal { opacity: 0; translate: 0 18px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .reveal.is-visible { opacity: 1; translate: 0 0; }

  /* carregamento das imagens: brilho passa devagar enquanto a foto não chegou */
  .js .product-card__image:not(.is-loaded) { animation: brilho 1.4s linear infinite; }
  @keyframes brilho { to { background-position: -220% 0; } }

  /* botão: toque com leve afundar */
  .button:active:not(:disabled) { transform: translateY(1px); }
}

/* ═══════════ Elemento 6 — refino do cardápio e dos cartões ═══════════ */
.product-card__categoria { font: 500 var(--text-xs)/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); }
.product-card__body { gap: var(--space-2); }
.product-card__price, .cart-item__preco, .cart-subtotal__valor { font-variant-numeric: tabular-nums; }

/* hover/foco: o cartão ativo se destaca; foco por teclado fica mais forte que o hover */
.product-card:hover { border-color: var(--color-gold-dark); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 18px rgba(198, 166, 107, .10); }
.product-card:focus-within { border-color: var(--color-gold); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), 0 0 0 1px var(--color-gold); }
.product-card--no-pedido { border-color: var(--color-border-gold); }

/* etiqueta "n no pedido" (canto inferior esquerdo da foto) */
.badge-pedido {
  position: absolute; left: var(--space-3); bottom: var(--space-3); z-index: 1;
  padding: .375rem .625rem; border: 1px solid var(--color-gold); border-radius: var(--radius-sm);
  background: rgba(10, 10, 12, .86); color: var(--color-gold-light);
  font: 600 var(--text-xs)/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; font-variant-numeric: tabular-nums;
}
.badge-pedido[hidden] { display: none; }

/* indisponível (design system: selo cinza escuro; foto apagada; botão desabilitado) */
.badge--unavailable { left: auto; right: var(--space-3); color: var(--color-text-secondary); border-color: var(--color-border); background: rgba(21, 22, 25, .92); }
.product-card--indisponivel .product-card__image img { filter: grayscale(.85) brightness(.7); }
.product-card--indisponivel .product-card__title, .product-card--indisponivel .product-card__price { color: var(--color-text-secondary); }
.product-card--indisponivel:hover { transform: none; border-color: var(--color-border); box-shadow: 0 8px 24px rgba(0, 0, 0, .32); }
.product-card--indisponivel .badge-pedido { display: none; }
.product-card--indisponivel .badge:not(.badge--unavailable) { display: none; }

/* ===== Elemento 7 — celular: refino ===== */
/* telas muito estreitas (320–359 px): o carrinho nunca pode sair da tela */
@media (max-width: 359px) {
  :root { --container-gutter: 16px; }
  .logo { gap: .45rem; }
  .logo__chama { width: 18px; height: 18px; }
  .logo__texto { font-size: .75rem; letter-spacing: .08em; gap: .4em; }
  .proto-tag { font-size: .625rem; padding: .3rem .4rem; letter-spacing: .04em; }
  .site-header__acoes { gap: 6px; }
}
/* áreas seguras (entalhe, barra inferior do iPhone) — só têm efeito com viewport-fit=cover */
.container { width: min(calc(100% - 2 * max(var(--container-gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))), var(--container-max)); }
.cart__rodape { padding-bottom: max(var(--space-6), calc(var(--space-4) + env(safe-area-inset-bottom, 0px))); }
.cart__topo { padding-top: max(var(--space-4), env(safe-area-inset-top, 0px)); }
/* toque: sem atraso de duplo toque e sem o "flash" cinza do navegador */
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

/* ===== Elemento 8 — contato e rodapé ===== */
.contato { padding-block: var(--space-16); border-top: 1px solid var(--color-border); background: var(--color-background-soft, #151619); scroll-margin-top: 64px; }
.contato__head { text-align: center; display: grid; gap: var(--space-2); margin-bottom: var(--space-12); }
.contato__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.contato__bloco { display: grid; align-content: start; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.contato__bloco h3 { font: 500 1.125rem/1.3 var(--font-heading); letter-spacing: .02em; color: var(--color-gold-light); }
.contato__bloco p, .contato__bloco address { color: var(--color-text-secondary); font-style: normal; font-size: var(--text-base); }
.contato__nota { font-size: var(--text-sm); color: var(--color-text-muted); }
.contato__horarios { display: grid; gap: var(--space-2); }
.contato__horarios > div { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); font-size: var(--text-base); }
.contato__horarios dt { color: var(--color-text-secondary); }
.contato__horarios dd { margin: 0; color: var(--color-text-primary); font-variant-numeric: tabular-nums; text-align: right; }
.contato__rotulo { display: block; font: 500 var(--text-xs)/1.3 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.contato__fone { font-variant-numeric: tabular-nums; color: var(--color-text-primary) !important; }
.contato .button { justify-self: start; margin-top: var(--space-2); }
@media (max-width: 899px) { .contato__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } .contato { padding-block: var(--space-12); } .contato__head { margin-bottom: var(--space-8); } }

.site-footer { border-top: 1px solid var(--color-border-gold); background: var(--color-background); padding-block: var(--space-8) max(var(--space-8), env(safe-area-inset-bottom, 0px)); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-8); }
.site-footer__nota { color: var(--color-text-muted); font-size: var(--text-xs); flex: 1 1 16rem; }
.site-footer__nav { display: flex; gap: var(--space-6); font: 500 var(--text-xs)/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.site-footer__nav a { color: var(--color-text-secondary); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__nav a:hover { color: var(--color-gold-light); }
@media (max-width: 599px) { .site-footer__inner { flex-direction: column; align-items: flex-start; } .site-footer__nav { gap: var(--space-6); } }
.site-footer .logo { min-height: 44px; }

/* Correção (portfólio): em 381–599 px a grade tem 2 colunas e o botão "Adicionar" ficava cortado; o rodapé do cartão agora quebra linha */
@media (max-width: 599px) {
  .product-card__footer { flex-wrap: wrap; }
  .product-card__footer > * { min-width: 0; }
  .product-card__price { white-space: nowrap; }
}

/* ===== Clube Brasa (fidelização): seção, painel do membro e blocos no carrinho ===== */
.clube { padding-block: var(--space-16); background: var(--color-background); border-top: 1px solid var(--color-border); scroll-margin-top: 64px; }
.clube__grade { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-top: var(--space-8); align-items: start; }
.clube__regras { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.clube__regras li { display: grid; gap: 2px; padding: var(--space-4) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.clube__regras b { font: 600 1.25rem/1.2 var(--font-heading); color: var(--color-gold-light); letter-spacing: .02em; }
.clube__regras span { color: var(--color-text-secondary); }
.clube__painel { padding: var(--space-6); border: 1px solid var(--color-border-gold); border-radius: var(--radius-lg); background: var(--color-surface); }
.clube-titulo { font: 500 1.5rem/1.2 var(--font-display); color: var(--color-text-primary); }
.clube-titulo:focus { outline: none; }
.clube-texto, .clube-cupom, .clube-nota { color: var(--color-text-secondary); font-size: var(--text-base); }
.clube-nota { font-size: var(--text-sm); }
.clube-cupom { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px dashed var(--color-border-gold); border-radius: var(--radius-sm); color: var(--color-gold-light); }
.clube-erro { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-error); border-radius: var(--radius-sm); color: #F3B3AC; }
.clube-form, .clube-cartao { display: grid; gap: var(--space-3); }
.clube-campo { display: grid; gap: 6px; }
.clube-campo label { font: 500 var(--text-sm)/1.3 var(--font-ui); color: var(--color-text-secondary); }
.clube-campo input { min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: transparent; color: var(--color-text-primary); font: inherit; }
.clube-campo input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.clube-campo input[aria-invalid="true"] { border-color: var(--color-error); }
.clube-pontos { display: flex; align-items: baseline; gap: var(--space-2); }
.clube-pontos b { font: 600 3rem/1 var(--font-heading); color: var(--color-gold-light); font-variant-numeric: tabular-nums; }
.clube-pontos span { color: var(--color-text-secondary); }
.clube-barra { height: 10px; border-radius: 999px; background: var(--color-surface-raised); border: 1px solid var(--color-border); overflow: hidden; }
.clube-barra span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light)); border-radius: 999px; }
.clube-sempre { display: grid; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.clube-sempre h4, .clube-sub { font: 500 1rem/1.3 var(--font-heading); color: var(--color-gold-light); letter-spacing: .02em; }
.clube-sempre ul { margin: 0; padding-left: 1.1rem; color: var(--color-text-secondary); }
.clube-historico { list-style: none; padding: 0; display: grid; gap: 6px; font-size: var(--text-sm); color: var(--color-text-secondary); }
.clube-historico li { display: flex; justify-content: space-between; gap: var(--space-3); padding-bottom: 6px; border-bottom: 1px solid var(--color-border); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .clube__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); } }
.cart-desconto { display: flex; justify-content: space-between; gap: var(--space-4); color: var(--color-gold-light); font-size: var(--text-base); font-variant-numeric: tabular-nums; }
.cart-clube { color: var(--color-text-secondary); font-size: var(--text-sm); }
.cart-clube a, .cart-sucesso__clube a { color: var(--color-gold-light); text-underline-offset: 3px; }
.cart-pontos { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-gold); border-radius: var(--radius-sm); font-size: var(--text-sm); cursor: pointer; }
.cart-pontos input { flex: none; width: 20px; height: 20px; margin-top: 1px; accent-color: var(--color-gold); }
.cart-sucesso__clube { color: var(--color-text-secondary); max-width: 26rem; }