/* ==========================================================================
   PIZZARIA VIA VENETO — folha de estilo unica
   --------------------------------------------------------------------------
   Direcao visual: identidade aprovada em 19/10/2026 (Manual de Marca v1).
   Creme de fundo, Vermelho Veneto na marca e nos titulos, Grafite no texto
   (proporcao 60/30/10); titulos em Marcellus e textos em Montserrat.
   Grade fluida: uma coluna no celular, duas no tablet e tres no desktop.

   Sumario
     01. Tokens
     02. Reset e base
     03. Utilitarios
     04. Tipografia editorial
     05. Cabecalho, navegacao e menu hamburguer
     06. Hero
     07. Barra de filtros
     08. Grade 6 colunas e cartao de pizza
     09. Secoes de conteudo
     10. Formulario e contato
     11. Rodape
     12. Dialogo de detalhe
     13. Responsivo
     14. Movimento reduzido e impressao
     15. Refino visual e UX
     16. Carrinho e checkout
   ========================================================================== */

/* 01. TOKENS ------------------------------------------------------------- */

:root {
  /* Paleta oficial (Manual de Marca v1). Contraste sobre o creme entre
     parenteses (WCAG AA: 4,5:1 para texto, 3:1 para contornos). */
  --vermelho: #810407; /* Vermelho Veneto (9,4:1) - marca, titulos, botoes */
  --vermelho-escuro: #650305; /* hover dos botoes (branco sobre ele: 13,4:1) */
  --vermelho-suave: #ecddcc; /* fundo de hover/selecao (vermelho sobre ele: 8,1:1) */
  --grafite: #383a37; /* Grafite (10:1) - texto; branco sobre ele: 11,5:1 */
  --creme: #f4f0dd; /* Creme - fundo padrao */

  /* Derivados da paleta */
  --preto: #262725; /* grafite mais fundo: veus e selecao (13,1:1) */
  --tinta: var(--grafite);
  --cinza: #5a5c57; /* 5,9:1 no creme e 5,4:1 no papel-2 - texto secundario */
  --linha: #ddd6bf;
  --linha-forte: #85826f; /* 3,4:1 - contraste minimo de contorno (WCAG 1.4.11) */
  --papel-2: #ebe5cd;
  --papel: var(--creme);
  --superficie: #fbf9f1; /* campos e etiquetas um tom acima do creme */
  --sombra-suave: 0 12px 32px -20px rgb(56 58 55 / 0.32);
  --sombra-elevada: 0 20px 48px -24px rgb(56 58 55 / 0.42);
  --raio-cartao: 20px;

  /* Cores das letras */
  --texto-titulo: var(--grafite); /* rotulos, valores e estado ativo */
  --texto: var(--grafite); /* navegacao e corpo */
  --texto-suave: var(--cinza); /* texto secundario */
  --texto-marca: var(--vermelho); /* titulos em Marcellus, precos e rotulos */

  /* Tipografia: Marcellus nos titulos (mesmo desenho do nome no logo) e
     Montserrat no texto, precos e informacoes. A Marcellus so tem peso 400. */
  --fonte: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue",
    Arial, sans-serif;
  --fonte-display: "Marcellus", Georgia, "Times New Roman", serif;

  /* Grade e largura de leitura */
  --gap-x: clamp(18px, 2.4vw, 32px);
  --gap-y: clamp(24px, 3vw, 40px);
  /* Mesma conta da grade de referencia (eyrc.com/work): margem lateral de 6%
     da tela e conteudo crescendo ate ~1680px (tela de 1920px). */
  --respiro-lateral: clamp(20px, 6vw, 120px);
  --largura-max: 1920px;

  /* Ritmo vertical */
  --secao-y: clamp(56px, 8vw, 112px);
  --altura-header: 64px;
  --altura-filtros: 64px;

  /* Movimento */
  --t-rapido: 160ms;
  --t-medio: 300ms;
  --t-lento: 520ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 02. RESET E BASE ------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ancoras nao ficam escondidas sob o cabecalho fixo. */
  scroll-padding-top: calc(var(--altura-header) + var(--altura-filtros) + 8px);
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Trava de scroll usada pelo menu hamburguer e pelo dialogo. */
  overflow-x: hidden;
}

body.sem-scroll {
  overflow: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  /* Fundo neutro enquanto a foto carrega (evita "flash" branco). */
  background-color: var(--papel-2);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* Foco visivel apenas para teclado, nunca removido. */
:focus-visible {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
}

/* Sobre a imagem do hero, o foco branco permanece perceptível. */
.hero--tela-cheia :focus-visible,
.site-header--sobre-hero:not(.esta-rolado) :focus-visible {
  outline-color: #fff;
}

::selection {
  background: var(--preto);
  color: var(--papel);
}

/* 03. UTILITARIOS -------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--largura-max);
  margin-inline: auto;
  padding-inline: var(--respiro-lateral);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pular-para-conteudo {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--vermelho);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--t-rapido) var(--ease);
}

.pular-para-conteudo:focus {
  transform: translateY(0);
}

.regua {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--linha);
}

/* 04. TIPOGRAFIA EDITORIAL ---------------------------------------------- */

/* Rotulo curto em caixa alta com espacamento largo, como a palavra PIZZARIA
   no logo (Manual de Marca, Tipografia). */
.sobretitulo {
  display: block;
  margin-bottom: 14px;
  color: var(--texto-marca);
  font-family: var(--fonte-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.titulo-display {
  color: var(--texto-marca);
  font-family: var(--fonte-display);
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}

.titulo-secao {
  color: var(--texto-marca);
  font-family: var(--fonte-display);
  font-size: clamp(1.75rem, 3.3vw, 2.75rem);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: 0;
  text-wrap: balance;
}

.titulo-bloco {
  color: var(--texto-titulo);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.texto-guia {
  max-width: min(62ch, 100%);
  color: var(--texto-suave);
  font-size: clamp(0.95rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
}

.texto-guia + .texto-guia {
  margin-top: 1.1em;
}

/* Botoes ---------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid var(--vermelho);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  transition: background-color var(--t-rapido) var(--ease),
    color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease),
    box-shadow var(--t-medio) var(--ease), transform var(--t-medio) var(--ease);
}

.botao--solido {
  background: var(--vermelho);
  color: #fff;
}

.botao--solido:hover {
  background: var(--vermelho-escuro);
  border-color: var(--vermelho-escuro);
  color: #fff;
}

.botao--vazado {
  background: transparent;
  border-color: var(--linha-forte);
  color: var(--texto-titulo);
}

.botao--vazado:hover {
  background: var(--grafite);
  border-color: var(--grafite);
  color: #fff;
}

/* Pedidos pelo WhatsApp: vidro transparente com borda nas cores do
   WhatsApp. O fundo e branco a 40% com a pagina desfocada por tras (sem
   saturar: o creme saturado puxava para o amarelo); como o site e claro, o
   texto e o grafite da marca (10:1 sobre o creme) e o contorno escuro fino e
   o brilho no alto desenham o vidro. O verde do WhatsApp fica so no balao e
   nas linhas do hover, como pede o Manual de Marca. O balao fica
   no verde do WhatsApp (4:1).
   No hover (e no foco por teclado) duas linhas verdes correm em volta do
   botao. Sao os tracos de um retangulo SVG (.botao__contorno, dentro de cada
   botao) com o mesmo arredondamento do botao: com pathLength="100" o
   tracejado e medido em porcentagem do contorno, entao as linhas tem o mesmo
   tamanho e a mesma velocidade em botao curto ou largo. */
.botao--whatsapp {
  --raio-whatsapp: 18px;
  position: relative;
  border-color: rgb(56 58 55 / 0.16);
  border-radius: var(--raio-whatsapp);
  background: rgb(255 255 255 / 0.4);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--texto-titulo);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7),
    0 8px 24px rgb(56 58 55 / 0.12);
}

.botao--whatsapp .botao__icone {
  color: #128c7e;
}

.botao--whatsapp .botao__seta {
  transition: transform var(--t-medio) var(--ease);
}

/* O SVG cobre o botao inteiro, borda incluida; o traco de 2px fica em cima
   da borda de 1px. */
.botao__contorno {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  max-width: none; /* o reset de svg limita a 100% */
  height: calc(100% + 2px);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 0 3px rgb(37 211 102 / 0.55));
  transition: opacity var(--t-medio) var(--ease);
}

.botao__contorno rect {
  x: 1px;
  y: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  rx: calc(var(--raio-whatsapp) - 1px);
  fill: none;
  stroke: #25d366;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-dasharray: 22 28; /* duas linhas de 22%, em lados opostos */
}

.botao--whatsapp:hover,
.botao--whatsapp:focus-visible {
  border-color: rgb(37 211 102 / 0.35);
  color: var(--texto-titulo);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7),
    0 12px 30px rgb(56 58 55 / 0.18), 0 0 18px rgb(37 211 102 / 0.18);
}

.botao--whatsapp:hover .botao__contorno,
.botao--whatsapp:focus-visible .botao__contorno {
  opacity: 1;
}

.botao--whatsapp:hover .botao__contorno rect,
.botao--whatsapp:focus-visible .botao__contorno rect {
  animation: contornar-whatsapp 2.4s linear infinite;
}

@keyframes contornar-whatsapp {
  to {
    stroke-dashoffset: -100;
  }
}

/* No celular o hover "gruda" depois do toque: o botao so sobe com mouse. */
@media (hover: hover) {
  .botao--whatsapp:hover {
    transform: translateY(-3px);
  }

  .botao--whatsapp:hover .botao__seta {
    transform: translate(2px, -2px);
  }
}

/* "Reduzir transparencia" ligado no sistema: vidro vira branco solido. */
@media (prefers-reduced-transparency: reduce) {
  .botao--whatsapp {
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Variante para fundo escuro */
.botao--fantasma {
  background: rgb(38 39 37 / 0.24);
  color: #fff;
  border-color: rgb(255 255 255 / 0.72);
}

.botao--fantasma:hover {
  background: #fff;
  color: var(--texto-titulo);
  border-color: #fff;
}

.botao svg {
  flex: none;
}

/* Link com sublinhado que cresce (usado em textos corridos) */
.link-linha {
  position: relative;
  color: var(--texto-titulo);
  font-weight: 600;
  white-space: nowrap;
}

.link-linha::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: left;
  transition: transform var(--t-medio) var(--ease);
}

.link-linha:hover::after {
  transform: scaleX(0);
}

/* 05. CABECALHO, NAVEGACAO E MENU HAMBURGUER ---------------------------- */

.site-header {
  /* Cores do cabecalho como tokens: assim o mesmo markup serve o cabecalho
     branco das paginas internas e o cabecalho claro sobre o hero escuro. */
  --fundo-header: var(--papel);
  --tinta-header: var(--texto-titulo);
  --suave-header: var(--texto-suave);
  --linha-header: transparent;

  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--fundo-header);
  box-shadow: 0 6px 20px rgb(56 58 55 / 0.035);
  border-bottom: 1px solid var(--linha-header);
  transition: background-color var(--t-medio) var(--ease),
    border-color var(--t-medio) var(--ease);
}

.site-header.esta-rolado {
  --linha-header: var(--linha);
}

/* Home: o cabecalho flutua sobre o video do hero ate a pagina rolar.
   `esta-rolado` e aplicado pelo JS quando o hero sai de cena (ou quando o menu
   mobile abre, que pinta o painel de branco atras do cabecalho). */
.site-header--sobre-hero:not(.esta-rolado) {
  --fundo-header: transparent;
  --tinta-header: #fff;
  /* texto branco sobre o hero com overlay escuro para manter contraste. */
  --suave-header: rgb(255 255 255 / 0.9);
  --linha-header: transparent;
}

/* Rolando sobre o escuro (hero ou inicio do degrade): o cabecalho continua
   claro, mas ganha fundo preto. Sobre o hero escuro ele quase nao aparece, e
   impede que o texto do cabecalho se sobreponha ao texto do hero que passa
   por baixo. */
.site-header--sobre-hero.saiu-do-topo:not(.esta-rolado) {
  --fundo-header: #262725; /* solido: qualquer transparencia deixa o texto vazar */
}

.site-header__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--altura-header);
}

/* Marca ----------------------------------------------------------------- */

/* No cabecalho vai o monograma VV (Manual de Marca: "espacos pequenos"). O
   logo vertical completo so cabe a partir de 150px de largura, entao ele fica
   no rodape. O arquivo ja traz a area de protecao em volta do desenho. */
.marca {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--tinta-header);
}

.marca__monograma {
  width: auto;
  height: 52px;
  background: none;
}

@media (max-width: 29.99em) {
  .marca__monograma {
    height: 46px;
  }
}

/* Logo vertical completo (rodape). */
.logo-vertical {
  width: 200px;
  height: auto;
  margin-bottom: 8px;
  background: none;
}

/* Acoes do cabecalho ---------------------------------------------------- */

.site-header__acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.header-cta {
  display: none;
}

/* Botao hamburguer ------------------------------------------------------ */

/* Referencia: hamburguer 9 de T.RICKS Hamburgers
   (tricks-hamburgers.webflow.io). Tres tracos finos e brancos sobre o quase
   preto do Sistema, alinhados a direita. No hover ficam escalonados
   (50%, 70%, 100%); aberto, o do meio some e os outros dois viram um X
   largo, girando 35 graus. Vale em todas as larguras de tela. */
.hamburguer {
  --espessura: 1.5px;
  --vao: 6px;
  --giro: 35deg;
  display: grid;
  place-items: center;
  width: 76px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  background: var(--texto-titulo);
  color: #fff;
  transition: background-color var(--t-rapido) var(--ease);
}

.hamburguer:hover {
  background: var(--preto);
}

.hamburguer__tracos {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--vao);
  width: 40px;
}

.hamburguer__tracos > span {
  display: block;
  width: 100%;
  height: var(--espessura);
  background: currentColor;
  transition: transform 0.2s ease, width 0.2s ease;
}

.hamburguer[aria-expanded="false"]:hover .hamburguer__tracos > span {
  width: 70%;
}

.hamburguer[aria-expanded="false"]:hover .hamburguer__tracos > span:first-child {
  width: 50%;
}

.hamburguer[aria-expanded="false"]:hover .hamburguer__tracos > span:last-child {
  width: 100%;
}

/* Aberto: o do meio encolhe ate sumir e os das pontas se cruzam no centro. */
.hamburguer[aria-expanded="true"] .hamburguer__tracos > span {
  transform: scaleX(0);
}

.hamburguer[aria-expanded="true"] .hamburguer__tracos > span:first-child {
  transform: translateY(calc(var(--espessura) + var(--vao)))
    rotate(calc(var(--giro) * -1));
}

.hamburguer[aria-expanded="true"] .hamburguer__tracos > span:last-child {
  transform: translateY(calc((var(--espessura) + var(--vao)) * -1))
    rotate(var(--giro));
}

/* Celular estreito: o botao encolhe um pouco para caber ao lado da marca e
   do carrinho. */
@media (max-width: 29.99em) {
  .hamburguer {
    width: 64px;
    height: 44px;
  }

  .hamburguer__tracos {
    width: 34px;
  }
}

/* Painel do menu (todas as larguras) ---------------------------------- */

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(var(--altura-header) + 32px) var(--respiro-lateral) 32px;
  background: var(--papel);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity var(--t-medio) var(--ease),
    transform var(--t-medio) var(--ease), visibility var(--t-medio) step-end;
}

/* Vidro: o fundo do painel e o marfim do site translucido, com a pagina
   desfocada por tras. Sem suporte a backdrop-filter, ou com "reduzir
   transparencia" ligado no sistema, volta o marfim solido. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu-mobile {
    /* Sobre as fotos escuras o vidro escurece um pouco: o texto de apoio do
       painel passa para o cinza mais forte (8:1 no pior caso, em vez de 2,5:1). */
    --texto-suave: var(--texto);
    background: rgb(244 240 221 / 0.72);
    -webkit-backdrop-filter: blur(24px) saturate(150%);
    backdrop-filter: blur(24px) saturate(150%);
  }

  /* Com o menu aberto o cabecalho tambem fica transparente: sem a faixa
     solida no topo, o vidro parece uma placa so. */
  body:has(.menu-mobile[data-aberto="true"]) .site-header {
    background: transparent;
    box-shadow: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .menu-mobile {
    background: var(--papel);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  body:has(.menu-mobile[data-aberto="true"]) .site-header {
    background: var(--fundo-header);
  }
}

.menu-mobile[data-aberto="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--t-medio) var(--ease),
    transform var(--t-medio) var(--ease), visibility 0s;
}

.menu-mobile__lista > li {
  border-bottom: 1px solid var(--linha);
}

.menu-mobile__lista > li:first-child {
  border-top: 1px solid var(--linha);
}

.menu-mobile__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 14px 2px;
  color: var(--texto-titulo);
  font-family: var(--fonte-display);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
}

.menu-mobile__link[aria-current="page"] {
  color: var(--texto-marca);
}

.menu-mobile__indice {
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Sublista de categorias dentro do menu mobile */
.menu-mobile__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 2px 20px;
}

.menu-mobile__sub a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
}

.menu-mobile__sub a:hover {
  border-color: var(--preto);
  color: var(--texto-titulo);
}

/* Entrada escalonada dos itens do menu */
.menu-mobile[data-aberto="true"] .menu-mobile__lista > li,
.menu-mobile[data-aberto="true"] .menu-mobile__rodape {
  animation: sobe-suave var(--t-lento) var(--ease) both;
  animation-delay: calc(var(--i, 0) * 55ms + 80ms);
}

@keyframes sobe-suave {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-mobile__rodape {
  display: grid;
  gap: 22px;
  padding-top: 26px;
  border-top: 1px solid var(--linha);
}

.menu-mobile__rodape .botao {
  justify-content: center;
}

.contato-inline {
  display: grid;
  gap: 4px;
  font-size: 13px;
  line-height: 1.7;
}

.contato-inline dt {
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.contato-inline dd {
  margin: 0 0 12px;
  color: var(--texto);
}

/* 06. HERO -------------------------------------------------------------- */

/* Hero padrao (paginas internas): titulo e apoio em duas colunas, no fluxo. */

.hero {
  padding-top: clamp(40px, 7vw, 86px);
}

.hero__cabecalho {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  padding-bottom: clamp(28px, 4vw, 48px);
}

.hero__cabecalho > * {
  min-width: 0;
}

.hero__apoio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-content: start;
}

.hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* VITRINE (home) -----------------------------------------------------------
   A home comeca direto pelas fotos, com as medidas da referencia
   (eyrc.com/work?tag=houses), conferidas no navegador:

     >= 1024px  6 colunas, 30px entre colunas e 12px entre linhas; a cada
                cinco pizzas, 2 largas (3 colunas) + 3 menores (2 colunas),
                o JS marca as largas (bloco 05). Fotos 4:3: em tela de 1440px,
                611x458 e 397x298. Primeira foto a 140px do topo da janela.
     <  1024px  uma coluna, foto na largura toda, primeira a 236px do topo.
     legenda    8px abaixo da foto, altura minima de 40px e 20px de respiro:
                de uma foto a proxima sao 80px (8 + 40 + 20 + 12).

   Os seletores levam .vitrine para vencer as regras gerais da grade (secao
   13), que valem para o menu. */

.vitrine .grade-obras {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 30px;
  row-gap: 12px;
  /* 236px do topo da janela, menos os 65px do cabecalho */
  padding: 171px 0 var(--secao-y);
}

.vitrine .cartao__corpo {
  gap: 0;
  min-height: 68px; /* 8 + 40 + 20 */
  padding: 8px var(--recuo-nome) 20px;
}

.vitrine .cartao__topo {
  gap: 16px;
}

/* Nome como na referencia: caixa alta, 16px, entrelinha 25,6px; o
   espacamento largo segue o rotulo PIZZARIA do logo. */
.vitrine .cartao__nome {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vitrine .cartao__preco {
  line-height: 1.6;
}

/* Uma linha de legenda so, como na referencia: os ingredientes ficam para a
   pagina do menu (a descricao completa abre no detalhe da pizza). */
.vitrine .cartao__ingredientes {
  display: none;
}

@media (min-width: 64em) {
  .vitrine .grade-obras {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    /* 140px do topo da janela, menos os 65px do cabecalho */
    padding-top: 75px;
  }
}

/* Hero em tela cheia (home) -------------------------------------------- */

/* A foto ocupa a janela inteira. O cabecalho flutua sobre a imagem, por isso
   a secao e puxada para cima pela altura dele. */
.hero--tela-cheia {
  position: relative;
  isolation: isolate;
  --respiro-base-hero: clamp(22px, 3.5vh, 40px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh; /* nao "pula" quando a barra do navegador mobile some */
  margin-top: calc(var(--altura-header) * -1);
  padding-top: calc(var(--altura-header) + clamp(72px, 12vh, 140px));
  padding-bottom: var(--respiro-base-hero);
  background: var(--preto);
  overflow: hidden;
}

.hero--tela-cheia .hero__palco {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--preto);
}

.hero--tela-cheia .hero__poster,
.hero--tela-cheia .hero__filme {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}

/* Camadas grafite sobre a imagem preservam contraste do texto e do cabeçalho.
   No desktop o conteúdo fica à esquerda e mantém a pizza livre à direita; em
   telas menores, imagem e texto empilham com um fundo sólido atrás da leitura. */
.hero--tela-cheia .hero__veu {
  /* faixa do cabecalho, em px: cobre o cabecalho em qualquer altura de tela */
  --faixa-cabecalho: linear-gradient(
    to bottom,
    rgb(38 39 37 / 0.92) 0,
    rgb(38 39 37 / 0.92) calc(var(--altura-header) + 4px),
    rgb(38 39 37 / 0) calc(var(--altura-header) + 150px)
  );
  /* a base se dissolve em grafite para emendar com a página clara. */
  --esmaecer-base: linear-gradient(to top, #262725 0, rgb(38 39 37 / 0) 10%);
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    var(--faixa-cabecalho),
    var(--esmaecer-base),
    rgb(38 39 37 / 0.42);
}

/* Celular e tablet: o veu e ancorado no bloco de texto e o acompanha onde quer
   que ele caia (o texto comeca mais alto ou mais baixo conforme a tela). */
.hero__camada {
  --folga-veu: clamp(90px, 16vh, 180px);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vh, 56px);
}

.hero__camada::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--folga-veu) * -1);
  right: 0;
  bottom: calc(var(--respiro-base-hero) * -1);
  left: 0;
  /* sobe suave ate .80 exatamente onde o texto comeca, e fica >= .80 dali
     para baixo */
  background: linear-gradient(
    to bottom,
    rgb(38 39 37 / 0) 0,
    rgb(38 39 37 / 0.84) var(--folga-veu),
    rgb(38 39 37 / 0.94) 100%
  );
  pointer-events: none;
}

/* Celular e tablet: imagem acima, bloco de texto abaixo, sem sobreposicao que
   esconda a comida ou reduza o contraste da chamada. */
@media (max-width: 63.99em) {
  .hero--tela-cheia {
    min-height: 100svh;
    padding-top: 0;
  }

  /* O palco entra no fluxo e cresce para ocupar o que o texto nao usa. */
  .hero--tela-cheia .hero__palco {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    min-height: 34svh;
  }

  .hero--tela-cheia .hero__poster,
  .hero--tela-cheia .hero__filme {
    position: absolute;
    inset: 0;
    /* fatia do terco direito (onde esta o fogo), ancorada na base do quadro */
    object-position: 75% 100%;
  }

  .hero__camada {
    padding-top: 22px;
  }

  /* Transição curta entre a imagem e o bloco sólido de texto. */
  .hero__camada::before {
    top: -64px;
    background: linear-gradient(to bottom, rgb(38 39 37 / 0) 0, #262725 64px);
  }
}

.hero__conteudo {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 20px;
  color: #fff;
}

/* Texto pequeno sobre o video e branco SOLIDO: translucido, ele se mistura ao
   fundo e perde contraste (ver a conta em .hero__veu). A hierarquia fica por
   tamanho e peso. */
.hero__conteudo .sobretitulo {
  margin-bottom: 0;
  color: #fff;
}

.hero__conteudo .titulo-display {
  max-width: 26ch;
  color: #fff;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.45);
}

.hero__texto {
  max-width: 52ch;
  color: #fff;
  text-shadow: 0 1px 20px rgb(0 0 0 / 0.5);
}

.hero__conteudo .hero__acoes {
  margin-top: 8px;
}

/* Rodape do hero: credito a esquerda, chamada para descer a direita. */
.hero__base {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}

.hero__creditos,
.hero__descer {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero__descer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--t-rapido) var(--ease);
}

.hero__descer:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.hero__descer svg {
  animation: pisca-descer 2.4s var(--ease) infinite;
}

/* Desktop: texto a esquerda, fogo livre a direita. Fica DEPOIS das regras-
   base do hero de proposito: mesma especificidade, a ultima vence. */
@media (min-width: 64em) {
  .hero--tela-cheia .hero__veu {
    background:
      var(--faixa-cabecalho),
      var(--esmaecer-base),
      linear-gradient(
        to right,
        rgb(38 39 37 / 0.84) 0,
        rgb(38 39 37 / 0.84) 50%,
        rgb(38 39 37 / 0) 70%
      ),
      rgb(38 39 37 / 0.42);
  }

  /* O veu lateral ja cobre a coluna de texto do topo ao pe da tela. */
  .hero__camada::before {
    display: none;
  }

  /* A coluna termina antes dos 50% da largura, onde o veu lateral e solido.
     (A especificidade repete a do titulo para vencer o max-width geral dele.) */
  .hero__conteudo > *,
  .hero__conteudo .titulo-display {
    max-width: min(34rem, 40vw);
  }

  .hero__conteudo .titulo-display {
    font-size: clamp(2rem, 3.1vw, 3rem);
  }

  /* Credito e chamada juntos, dentro da coluna escura. */
  .hero__base {
    justify-content: flex-start;
    gap: 10px 40px;
  }
}

/* Celular: hero enxuto. Cada linha de texto a menos e fogo a mais na tela.
   O paragrafo sai (a mesma ideia esta na secao "A casa", logo abaixo), os
   botoes ficam lado a lado e o credito some - fica so a chamada de descer. */
@media (max-width: 39.99em) {
  .hero--tela-cheia {
    min-height: auto;
    min-height: 100svh;
  }

  .hero__texto,
  .hero__creditos {
    display: none;
  }

  .hero__conteudo .titulo-display {
    font-size: clamp(2rem, 8vw, 3.25rem);
  }

  .hero__conteudo .hero__acoes .botao {
    min-height: 48px;
    padding: 12px 18px;
  }

  .hero__base {
    justify-content: flex-start;
  }
}

/* Tela baixa (celular na horizontal): 100svh nao cabe o bloco inteiro.
   O hero passa a ter altura livre e o conteudo respira. */
@media (max-height: 34em) and (orientation: landscape) {
  .hero--tela-cheia {
    --respiro-base-hero: 28px;
    min-height: auto;
    padding-top: calc(var(--altura-header) + 32px);
  }

  .hero__camada {
    gap: 24px;
  }

  .hero__conteudo .titulo-display {
    font-size: clamp(1.5rem, 3.6vw, 2.25rem);
  }

  .hero__descer {
    display: none;
  }
}

@keyframes pisca-descer {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(4px);
    opacity: 1;
  }
}

/* Hero em video: primitivas ------------------------------------------- */

.hero__palco {
  position: relative;
  overflow: hidden;
  background: var(--papel-2);
  line-height: 0;
}

.hero__filme {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Aparece so quando ha frame para mostrar; ate la vale o poster. */
  opacity: 0;
  transition: opacity 600ms var(--ease);
}

.hero__filme[data-pronto="true"] {
  opacity: 1;
}

/* WCAG 2.2.2: conteudo em movimento automatico por mais de 5s precisa de um
   controle para parar. Fica no topo, para nao disputar espaco com o rodape. */
.hero__controle {
  position: absolute;
  right: var(--respiro-lateral);
  top: calc(var(--altura-header) + 16px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  border: 1px solid rgb(255 255 255 / 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color var(--t-rapido) var(--ease),
    color var(--t-rapido) var(--ease),
    border-color var(--t-rapido) var(--ease);
}

.hero__controle:hover {
  background: #fff;
  color: var(--texto-titulo);
  border-color: #fff;
}

/* Faixa de numeros/valores */
.faixa-dados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--gap-x);
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.faixa-dados dt {
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.faixa-dados dd {
  margin: 10px 0 0;
  color: var(--texto-titulo);
  font-size: clamp(1.5rem, 2.6vw, 2.125rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* 07. BARRA DE FILTROS -------------------------------------------------- */

.barra-filtros {
  position: sticky;
  top: var(--altura-header);
  z-index: 90;
  background: var(--papel);
  border-top: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
}

.barra-filtros__interno {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--altura-filtros);
}

.filtros {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
  /* Em telas estreitas a lista rola na horizontal dentro do espaco que sobra.
     `min-width: 0` e obrigatorio: sem ele o flex item nao encolhe e a lista
     passa por baixo da contagem. */
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--vermelho) var(--papel-2);
  -ms-overflow-style: auto;
  scroll-snap-type: x proximity;
  padding: 10px 2px;
}

.filtros::-webkit-scrollbar {
  height: 4px;
}

.filtros::-webkit-scrollbar-thumb {
  background: var(--vermelho);
  border-radius: 999px;
}

.filtros::-webkit-scrollbar-track {
  background: var(--papel-2);
}

.filtro {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  padding: 4px 1px;
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  scroll-snap-align: start;
  transition: color var(--t-rapido) var(--ease);
}

.filtro::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -2px;
  height: 1.5px;
  background: var(--vermelho);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-medio) var(--ease);
}

.filtro:hover {
  color: var(--texto-titulo);
}

.filtro[aria-pressed="true"] {
  color: var(--texto-titulo);
}

.filtro[aria-pressed="true"]::after,
.filtro:hover::after {
  transform: scaleX(1);
}

.barra-filtros__contagem {
  flex: none;
  color: var(--texto-suave);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* 08. GRADE 6 COLUNAS E CARTAO DE PIZZA --------------------------------- */

/* "Bebidas" no filtro do menu esconde a grade de pizzas (ela e display: grid). */
.grade-obras[hidden] {
  display: none;
}

.grade-obras {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--gap-x);
  row-gap: clamp(28px, 3.5vw, 48px);
  padding: clamp(24px, 3vw, 36px) 0 var(--secao-y);
}

/* Cartao ---------------------------------------------------------------- */

.cartao {
  /* Linha de alinhamento do cartao: o nome impresso nas fotos de exemplo
     comeca a 5,5% da largura da imagem (margem do tools/gerar-placeholders.py).
     Etiqueta, "Ver detalhes" e nome da legenda partem dessa mesma linha. Em %
     para acompanhar a foto em qualquer tamanho de cartao. */
  --recuo-nome: 5.5%;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Obrigatorio: `.cartao { display: flex }` venceria o `[hidden]` do navegador,
   e os cartoes filtrados continuariam visiveis. */
.cartao[hidden] {
  display: none;
}

.cartao__midia {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background: var(--papel-2);
}

/* Proporcao 4:3 — mesma da referencia. A foto preenche sem distorcer. */
.cartao__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: scale(1);
  /* o zoom do hover cresce a partir da linha de alinhamento: o nome impresso
     na foto nao sai do lugar e continua alinhado com o resto do cartao */
  transform-origin: var(--recuo-nome) 50%;
  transition: transform var(--t-lento) var(--ease),
    filter var(--t-medio) var(--ease);
}

.cartao:hover .cartao__foto,
.cartao:focus-within .cartao__foto {
  transform: scale(1.035);
}

/* Etiqueta de categoria sobre a foto */
.cartao__etiqueta {
  position: absolute;
  top: 12px;
  /* o texto (depois dos 12px de padding) comeca na linha do nome */
  left: max(4px, calc(var(--recuo-nome) - 12px));
  z-index: 2;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--papel);
  color: var(--texto-marca);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Camada de acao que aparece no hover/foco. Fundo transparente (a foto
   aparece por tras): so um degrade escuro suave subindo da base, que some no
   alto, mais a sombra nas letras - o que segura o branco legivel ate sobre
   foto clara. Entra com fade e uma subida curta. */
.cartao__acao {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* O texto comeca na linha do nome (--recuo-nome, no .cartao). */
  padding: 36px var(--recuo-nome) 24px;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-medio) var(--ease),
    transform var(--t-medio) var(--ease);
}

.cartao__acao svg {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.6));
}

/* Contorno fino em volta do "Ver detalhes": linha branca de 1px, sem
   preenchimento, 12px para fora do texto (nunca a menos de 4px da borda da
   foto). A altura (46px) e a linha do texto (22px) + 12px em cima e embaixo. */
.cartao__acao::before {
  content: "";
  position: absolute;
  right: max(4px, calc(var(--recuo-nome) - 12px));
  bottom: 12px;
  left: max(4px, calc(var(--recuo-nome) - 12px));
  height: 46px;
  border: 1px solid rgb(255 255 255 / 0.75);
  border-radius: 10px;
  pointer-events: none;
}

.cartao:hover .cartao__acao,
.cartao:focus-within .cartao__acao {
  opacity: 1;
  transform: translateY(0);
}

/* Legenda: nome em caixa alta (igual a referencia) + apoio */
.cartao__corpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* nome na linha do nome impresso na foto; preco espelhado a direita */
  padding: 10px var(--recuo-nome) 0;
}

.cartao__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

/* Nome da pizza em Marcellus, no vermelho da marca (como no cardapio A4). */
.cartao__nome {
  color: var(--texto-marca);
  font-family: var(--fonte-display);
  font-size: clamp(1.15rem, 1.45vw, 1.3rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
}

/* O botao cobre o cartao: a area de clique e toda a imagem + legenda. */
.cartao__gatilho {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cartao__gatilho:focus-visible {
  outline: 2px solid var(--preto);
  outline-offset: 4px;
}

.cartao__preco {
  flex: none;
  color: var(--texto-marca);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cartao__ingredientes {
  color: var(--texto-suave);
  font-size: 14px;
  line-height: 1.6;
}

/* Fallback quando o arquivo da foto nao existe (CA-10). */
.cartao__midia[data-foto="erro"] {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    -45deg,
    var(--papel-2) 0 10px,
    var(--linha) 10px 20px
  );
}

.cartao__midia[data-foto="erro"] .cartao__foto {
  display: none;
}

.cartao__midia[data-foto="erro"]::after {
  content: attr(data-fallback);
  padding: 0 24px;
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Estado vazio do filtro (CA-07) */
.estado-vazio {
  grid-column: 1 / -1;
  padding: clamp(48px, 8vw, 96px) 0;
  border-top: 1px solid var(--linha);
  text-align: center;
}

.estado-vazio[hidden] {
  display: none;
}

.estado-vazio__titulo {
  color: var(--texto-marca);
  font-family: var(--fonte-display);
  font-size: 24px;
  font-weight: 400;
}

.estado-vazio p {
  margin: 10px auto 22px;
  max-width: 44ch;
  color: var(--texto-suave);
  font-size: 14px;
}

/* 09. SECOES DE CONTEUDO ------------------------------------------------ */

.secao {
  padding: var(--secao-y) 0;
}

.secao--linha {
  border-top: 1px solid var(--linha);
}

.secao__cabecalho {
  display: grid;
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  padding-bottom: clamp(28px, 4vw, 48px);
}

.secao__cabecalho > * {
  min-width: 0;
}

.duas-colunas {
  display: grid;
  gap: clamp(28px, 4vw, var(--gap-x));
}

.lista-detalhes {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linha);
}

.lista-detalhes > div {
  display: grid;
  gap: 4px 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--linha);
}

.lista-detalhes dt {
  color: var(--texto-marca);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.lista-detalhes dd {
  margin: 0;
  color: var(--texto-suave);
  font-size: 14px;
  line-height: 1.7;
}

/* Bebidas (menu.html#bebidas): cartoes com foto como os das pizzas, numa
   grade de 4 colunas (2 abaixo de 1024px). Reaproveitam foto, nome, preco e
   descricao do cartao de pizza (.cartao__*); o que e so delas e o pedido
   embaixo - sabor e "Adicionar" -, que o JS do carrinho mostra (sem JS ele
   fica escondido e a bebida e pedida no WhatsApp). Cada foto tem um fundo
   proprio, diferente do fundo padrao das bebidas no Sistema. */
.grade-bebidas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-y) var(--gap-x);
  margin-bottom: clamp(40px, 6vw, 72px);
}

@media (min-width: 64em) {
  .grade-bebidas {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bebida {
  --recuo-nome: 5.5%;
  display: flex;
  flex-direction: column;
}

.bebida .cartao__corpo {
  flex: 1;
}

/* Cartao estreito: o preco desce para baixo do nome em vez de espremer. */
.bebida .cartao__topo {
  flex-wrap: wrap;
  gap: 4px 12px;
}

.bebida:hover .cartao__foto,
.bebida:focus-within .cartao__foto {
  transform: scale(1.035);
}

.bebida__pedido {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.bebida__pedido[hidden] {
  display: none;
}

.bebida__sabor {
  flex: 1 1 130px;
}

/* Cartao estreito no celular: menos folga para a seta, o sabor cabe inteiro.
   (.bebida na frente para vencer o .campo select, que vem depois.) */
.bebida .bebida__sabor select {
  min-height: 44px;
  padding: 9px 32px 9px 12px;
  background-position: right 12px center;
}

.bebida__adicionar {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 18px;
}

/* Cardapio em lista (entradas, sobremesas sem foto) */
.lista-cardapio {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linha);
}

.lista-cardapio__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}

.lista-cardapio__nome {
  color: var(--texto-titulo);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.lista-cardapio__preco {
  color: var(--texto-titulo);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.lista-cardapio__desc {
  grid-column: 1 / -1;
  color: var(--texto-suave);
  font-size: 14px;
}

/* Galeria de apoio (pagina "A casa") */
.galeria {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--gap-x);
  row-gap: var(--gap-y);
}

.galeria figure {
  margin: 0;
}

.galeria img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  object-fit: cover;
}

/* Mesmo fallback dos cartoes, para as fotos de apoio. */
.galeria figure[data-foto="erro"] img {
  display: none;
}

.galeria figure[data-foto="erro"]::before {
  content: "Foto indisponível";
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    -45deg,
    var(--papel-2) 0 10px,
    var(--linha) 10px 20px
  );
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.galeria figcaption {
  padding-top: 12px;
  color: var(--texto);
  font-size: 13px;
  font-weight: 600;
}

/* Chamada final */
.chamada {
  display: grid;
  gap: 24px;
  padding: clamp(44px, 6vw, 80px) 0;
  border-top: 1px solid var(--linha);
  text-align: center;
  justify-items: center;
}

/* Ornamento das pecas da marca (traco · losango · traco) abrindo o bloco. */
.chamada::before {
  content: "";
  width: 120px;
  height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cpath d='M0 5h48M72 5h48' stroke='%23810407'/%3E%3Cpath d='M60 1l4 4-4 4-4-4z' fill='%23810407'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* 10. FORMULARIO E CONTATO --------------------------------------------- */

.mapa-estatico {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  background: repeating-linear-gradient(
      0deg,
      transparent 0 39px,
      var(--linha) 39px 40px
    ),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--linha) 39px 40px),
    var(--papel-2);
  text-align: center;
}

.mapa-estatico__selo {
  display: grid;
  gap: 8px;
  padding: 22px 28px;
  background: var(--papel);
  border: 1px solid var(--linha-forte);
}

.mapa-estatico__selo strong {
  color: var(--texto-titulo);
  font-size: 14px;
  font-weight: 700;
}

.mapa-estatico__selo span {
  color: var(--texto-suave);
  font-size: 14px;
}

.horarios {
  border-top: 1px solid var(--linha);
}

.horarios__linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
  font-size: 13px;
}

.horarios__dia {
  color: var(--texto-titulo);
  font-weight: 700;
}

.horarios__hora {
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.horarios__linha[data-hoje="true"] {
  background: var(--vermelho-suave);
  padding-inline: 12px;
  margin-inline: -12px;
}

.horarios__linha[data-hoje="true"] .horarios__hora {
  color: var(--texto-titulo);
  font-weight: 600;
}

.etiqueta-hoje {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 8px;
  background: var(--vermelho);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

/* 11. RODAPE ----------------------------------------------------------- */

.site-footer {
  padding: var(--secao-y) 0 32px;
  border-top: 1px solid var(--linha);
}

.site-footer__grade {
  display: grid;
  gap: clamp(32px, 4vw, var(--gap-x));
  padding-bottom: clamp(36px, 5vw, 64px);
}

.site-footer__titulo {
  margin-bottom: 16px;
  color: var(--texto-marca);
  font-family: var(--fonte-display);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.site-footer__lista {
  display: grid;
  gap: 8px;
  font-size: 13px;
  line-height: 1.7;
}

.site-footer__lista a:hover {
  color: var(--texto-marca);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  color: var(--texto-suave);
  font-size: 12px;
}

/* Voltar ao topo, no modelo do botao do site da Vale: circulo vazado de
   60px com contorno cinza fino, seta fina no meio e um anel que vai se
   enchendo (no sentido horario, a partir do alto) conforme a pagina rola -
   mostra quanto da pagina ja foi lido. O anel e um SVG por cima da borda
   (.voltar-ao-topo__anel); o JS (bloco 10) atualiza o stroke-dashoffset e,
   sem JS, o anel fica vazio e sobra o circulo com a seta.
   Diferenca para o original: la o fundo e transparente; aqui e o marfim do
   site a 80% com desfoque, porque o botao passa por cima das fotos das
   pizzas e a seta sumiria nelas. Sobre o papel ele parece transparente.
   Anel e seta no Vermelho Veneto (9,4:1 sobre o creme).
   No hover (ou foco de teclado) a seta "sobe": a de cima sai pelo alto e a
   segunda entra por baixo. O alvo e o <body id="topo"> - no cabecalho, que e
   sticky, o navegador achava que ja estava no lugar e nao rolava.
   Fixo no canto inferior direito; o JS esconde o botao no topo da pagina e
   mostra depois de 300px de rolagem (sem JS ele fica sempre visivel). Com o
   menu aberto (body.sem-scroll) ele some, para nao ficar por cima; o
   detalhe da pizza e um <dialog> modal e ja cobre tudo. */
.voltar-ao-topo {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 2px solid rgb(56 58 55 / 0.16);
  border-radius: 50%;
  background: rgb(244 240 221 / 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--texto-marca);
  transition: opacity var(--t-medio) var(--ease),
    transform var(--t-medio) var(--ease), visibility 0s linear 0s;
}

/* Escondido tambem sai da ordem de foco (visibility), depois do fade. */
.voltar-ao-topo[data-escondido="true"],
body.sem-scroll .voltar-ao-topo {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--t-medio) var(--ease),
    transform var(--t-medio) var(--ease), visibility 0s linear var(--t-medio);
}

@media (max-width: 39.99em) {
  .voltar-ao-topo {
    right: 16px;
    bottom: 16px;
  }
}

/* O SVG cobre o botao com a borda (60px); o circulo de raio 29 e traco 2
   cai exatamente em cima da borda de 2px. Girado -90 graus, o traco comeca
   no alto. pathLength="100": o dashoffset vai de 100 (vazio) a 0 (cheio). */
.voltar-ao-topo__anel {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  max-width: none;
  height: calc(100% + 4px);
  overflow: visible;
  transform: rotate(-90deg);
  pointer-events: none;
}

.voltar-ao-topo__anel circle {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.15s linear;
}

.voltar-ao-topo__icone {
  display: grid;
  place-items: center;
  width: 16px;
  height: 26px;
  overflow: hidden;
}

.voltar-ao-topo__icone svg {
  grid-area: 1 / 1;
  transition: transform 0.45s var(--ease);
}

/* 160% da altura da seta: fica inteira fora da janelinha, sem ponta aparecendo */
.voltar-ao-topo__icone svg + svg {
  transform: translateY(160%);
}

.voltar-ao-topo:hover .voltar-ao-topo__icone svg:first-child,
.voltar-ao-topo:focus-visible .voltar-ao-topo__icone svg:first-child {
  transform: translateY(-160%);
}

.voltar-ao-topo:hover .voltar-ao-topo__icone svg + svg,
.voltar-ao-topo:focus-visible .voltar-ao-topo__icone svg + svg {
  transform: none;
}

/* 12. DIALOGO DE DETALHE ----------------------------------------------- */

.dialogo {
  width: min(960px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--papel);
  color: var(--texto);
  overflow: hidden;
}

/* Sem `backdrop-filter`: o blur mantém a composição da página ativa o tempo
   todo e derruba o desempenho enquanto o diálogo está aberto. */
.dialogo::backdrop {
  background: rgb(0 0 0 / 0.62);
}

.dialogo[open] {
  animation: dialogo-entra var(--t-medio) var(--ease);
}

@keyframes dialogo-entra {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.99);
  }
}

.dialogo__interno {
  display: grid;
  max-height: min(88vh, 900px);
  overflow-y: auto;
}

.dialogo__fechar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--papel);
  color: var(--texto-titulo);
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
}

.dialogo__fechar:hover {
  background: var(--vermelho);
  color: #fff;
  border-color: var(--vermelho);
}

.dialogo__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Meio a meio: a foto do 2o sabor fica por cima e mostra so a metade
   direita, com um traco claro na divisa. O tamanho da area nao muda. */
.dialogo__midia {
  position: relative;
}

.dialogo__foto--metade {
  position: absolute;
  inset: 0;
  height: 100%;
  clip-path: inset(0 0 0 50%);
}

.dialogo__midia[data-meia]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgb(255 255 255 / 0.85);
  pointer-events: none;
}

.dialogo__conteudo {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: clamp(24px, 4vw, 40px);
}

.dialogo__nome {
  color: var(--texto-marca);
  font-family: var(--fonte-display);
  font-size: clamp(1.5rem, 3.2vw, 2.25rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0;
}

/* Ingredientes: um bloco na inteira, um por metade no meio a meio. */
.dialogo__sabores {
  display: grid;
  gap: 10px;
}

.dialogo__sabores > div {
  display: grid;
  gap: 2px;
}

.dialogo__sabores dt {
  color: var(--texto-titulo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.dialogo__sabores dd {
  color: var(--texto);
  font-size: 15px;
  line-height: 1.6;
}

.dialogo__meia {
  display: grid;
  gap: 8px;
}

.dialogo__nota {
  color: var(--texto-suave);
  font-size: 13px;
  line-height: 1.5;
}

/* Pedido dentro do dialogo: tamanho, quantidade, observacao e total. Os
   campos (.campo, .contador) estao na secao 16. */
.dialogo__pedido {
  display: grid;
  gap: 18px;
  padding-top: 4px;
}

.opcoes-tamanho {
  display: grid;
  gap: 8px;
}

.opcao-tamanho {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--linha);
  border-radius: 14px;
  background: var(--superficie);
  cursor: pointer;
  transition: border-color var(--t-rapido) var(--ease),
    background-color var(--t-rapido) var(--ease);
}

.opcao-tamanho:hover {
  border-color: var(--linha-forte);
}

.opcao-tamanho:has(input:checked) {
  border-color: var(--vermelho);
  background: var(--vermelho-suave);
}

.opcao-tamanho input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--vermelho);
}

.opcao-tamanho__nome {
  flex: 1;
  color: var(--texto-titulo);
  font-size: 14px;
  font-weight: 700;
}

.opcao-tamanho__preco {
  color: var(--texto-titulo);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dialogo__linha {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.dialogo__total {
  display: grid;
  gap: 2px;
  text-align: right;
}

.dialogo__total strong {
  color: var(--texto-titulo);
  font-family: var(--fonte);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Quando os dois botoes nao cabem lado a lado, cada um ocupa a linha toda. */
.dialogo__pedido .dialogo__acoes .botao {
  flex: 1 1 auto;
}

.dialogo__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}

/* 13. RESPONSIVO ------------------------------------------------------- */

/* >= 480px: legenda do cartao ganha respiro */
@media (min-width: 30em) {
  .cartao__corpo {
    padding-top: 12px;
  }
}

/* >= 640px: duas colunas deixam ingredientes e preços mais fáceis de comparar. */
@media (min-width: 40em) {
  .grade-obras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grade-obras > .cartao,
  .grade-obras > .cartao.cartao--destaque {
    grid-column: span 1;
  }

  .galeria {
    grid-template-columns: repeat(2, 1fr);
    row-gap: clamp(24px, 3vw, 40px);
  }

  .duas-colunas {
    grid-template-columns: repeat(2, 1fr);
  }

  .lista-detalhes > div {
    grid-template-columns: 200px 1fr;
  }

  .dialogo__interno {
    grid-template-columns: 1.05fr 1fr;
  }

  .dialogo__foto {
    height: 100%;
    aspect-ratio: auto;
    min-height: 320px;
  }

  /* A foto fica parada na altura visivel do dialogo enquanto o pedido rola:
     sem isso ela esticaria junto com o formulario e a pizza sairia cortada. */
  .dialogo__midia {
    position: sticky;
    top: 0;
    align-self: start;
    height: min(88vh, 900px);
  }
}

/* >= 64em (1024px): menu em duas colunas e grade de três pizzas por linha. */
@media (min-width: 64em) {
  /* O mesmo painel do celular, em tela cheia: links grandes a esquerda,
     contato e WhatsApp a direita, alinhados pela base. */
  .menu-mobile {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
    align-items: end;
    column-gap: clamp(48px, 8vw, 160px);
    padding-bottom: 56px;
  }

  .menu-mobile__link {
    min-height: 88px;
    font-size: clamp(2.25rem, 4vw, 3.5rem);
  }

  .menu-mobile__rodape {
    padding-top: 0;
    border-top: 0;
  }

  .header-cta {
    display: inline-flex;
    padding: 12px 20px;
    font-size: 11px;
  }

  /* Grade da referencia (eyrc.com/work): 6 colunas com 30px de intervalo. A
     cada cinco pizzas, duas largas (3 colunas) e tres menores (2 colunas); o
     JS marca as largas com .cartao--destaque (bloco 05). Fotos sempre 4:3 -
     em tela de 1440px ficam com 611x458 e 397x298, como na referencia. */
  .grade-obras {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 30px;
  }

  .grade-obras > .cartao {
    grid-column: span 2;
  }

  .grade-obras > .cartao.cartao--destaque {
    grid-column: span 3;
  }

  .hero__cabecalho {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }

  .secao__cabecalho {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .galeria {
    grid-template-columns: repeat(3, 1fr);
  }

  .galeria--duas {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__grade {
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  }

  .duas-colunas--assimetrica {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 80px);
  }
}

@media (min-width: 80em) {
  .grade-obras {
    row-gap: clamp(40px, 3.4vw, 56px);
  }
}

/* Telas muito estreitas (<=360px): reduz o respiro para caber tudo */
@media (max-width: 22.5em) {
  :root {
    --respiro-lateral: 16px;
  }
}

/* 14. MOVIMENTO REDUZIDO E IMPRESSAO ---------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cartao:hover .cartao__foto {
    transform: none;
  }

  /* Excecao: as linhas em volta do botao do WhatsApp continuam correndo,
     so que mais devagar. Sao 2px de borda, so com o mouse em cima, e o
     botao em si nao se move - "reduzir" aqui e desacelerar, nao tirar. */
  .botao--whatsapp:hover .botao__contorno rect,
  .botao--whatsapp:focus-visible .botao__contorno rect {
    animation-duration: 3.6s !important;
    animation-iteration-count: infinite !important;
  }
}

@media print {
  .site-header,
  .menu-mobile,
  .barra-filtros,
  .cartao__acao,
  .cartao__gatilho,
  .hero__acoes,
  .site-footer__base,
  .botao-carrinho,
  .aviso-carrinho {
    display: none !important;
  }

  body {
    color: #000;
  }

  /* O hero de tela cheia vira um bloco de texto normal no papel. */
  .hero--tela-cheia {
    min-height: auto;
    margin-top: 0;
    padding: 0 0 24px;
    background: none;
  }

  .hero__veu,
  .hero__filme,
  .hero__controle,
  .hero__descer,
  .hero__palco {
    display: none !important;
  }

  .hero__conteudo,
  .hero__conteudo *,
  .hero__creditos {
    color: #000 !important;
    text-shadow: none !important;
  }

  .grade-obras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
  }

  .grade-obras > .cartao,
  .grade-obras > .cartao.cartao--destaque {
    grid-column: span 1;
    break-inside: avoid;
  }
}

/* 15. REFINO VISUAL E UX ----------------------------------------------- */

@media screen {
  .site-header {
    box-shadow: 0 4px 18px rgb(56 58 55 / 0.045);
  }

  .botao:not(.botao--whatsapp):hover {
    box-shadow: var(--sombra-suave);
    transform: translateY(-2px);
  }

  .botao:active {
    transform: translateY(0) scale(0.98);
  }

  .site-header.esta-rolado {
    box-shadow: 0 12px 28px -22px rgb(56 58 55 / 0.48);
  }

  .hero:not(.hero--tela-cheia) {
    padding-bottom: clamp(32px, 5vw, 64px);
    background: linear-gradient(180deg, var(--papel-2), var(--papel) 88%);
  }

  .titulo-display,
  .titulo-secao,
  .secao__cabecalho .titulo-display {
    text-wrap: balance;
  }

  .vitrine .grade-obras {
    padding-top: clamp(24px, 4vw, 48px);
  }

  .vitrine .grade-obras--vitrine {
    padding-bottom: clamp(56px, 8vw, 112px);
  }

  .cartao__midia,
  .galeria img {
    border-radius: var(--raio-cartao);
    box-shadow: var(--sombra-suave);
  }

  .cartao__etiqueta {
    box-shadow: 0 4px 14px rgb(38 39 37 / 0.12);
  }

  .cartao__corpo {
    padding-top: 14px;
  }

  .cartao__preco {
    padding: 4px 9px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: var(--superficie);
    font-size: 13px;
  }

  .vitrine .cartao__corpo {
    padding-top: 10px;
  }

  .barra-filtros {
    background: rgb(244 240 221 / 0.96);
    box-shadow: 0 8px 20px -20px rgb(38 39 37 / 0.5);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .filtros {
    gap: 8px;
  }

  .filtro {
    min-height: 40px;
    padding: 6px 13px;
    border-radius: 999px;
    transition: color var(--t-rapido) var(--ease),
      background-color var(--t-rapido) var(--ease);
  }

  .filtro::after {
    display: none;
  }

  .filtro:hover,
  .filtro[aria-pressed="true"] {
    background: var(--vermelho-suave);
    color: var(--texto-marca);
  }

  .barra-filtros__contagem {
    padding: 7px 11px;
    border: 1px solid var(--linha);
    border-radius: 999px;
    background: var(--superficie);
  }

  .chamada {
    margin-block: clamp(36px, 5vw, 64px);
    padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
    border: 1px solid var(--linha);
    border-radius: var(--raio-cartao);
    background: linear-gradient(135deg, var(--superficie), var(--papel-2));
  }

  .dialogo {
    border-radius: 24px;
    box-shadow: var(--sombra-elevada);
  }

  .dialogo__fechar {
    min-width: 44px;
    min-height: 44px;
    background: var(--superficie);
    box-shadow: var(--sombra-suave);
  }
}

/* Em telas táteis, o convite para abrir cada pizza não depende de hover. */
@media (hover: none) {
  .cartao__acao {
    opacity: 1;
    transform: none;
  }
}

/* Em tablets, o atalho de pedido fica visível ao lado do menu móvel. */
@media (min-width: 40em) and (max-width: 63.99em) {
  .header-cta {
    display: inline-flex;
    padding: 11px 18px;
    font-size: 10px;
  }
}

/* 16. CARRINHO E CHECKOUT ---------------------------------------------- */

/* O botao do carrinho, a gaveta e o aviso sao criados pelo JS (bloco 11).
   Como varios deles usam display: flex/grid, o [hidden] do navegador perderia;
   aqui ele volta a valer. */
.dialogo [hidden],
.gaveta [hidden],
.botao-carrinho [hidden],
.aviso-carrinho[hidden] {
  display: none !important;
}

/* Campos de formulario ------------------------------------------------- */

.campo {
  display: grid;
  gap: 6px;
}

.campo__rotulo {
  color: var(--texto-titulo);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.campo__opcional {
  color: var(--texto-suave);
  font-weight: 400;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--linha-forte);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto-titulo);
  font: inherit;
  /* 16px: abaixo disso o iPhone da zoom na pagina ao focar o campo. */
  font-size: 16px;
  line-height: 1.4;
  transition: border-color var(--t-rapido) var(--ease);
}

.campo textarea {
  min-height: 76px;
  resize: vertical;
}

/* Select com a mesma cara dos campos e uma seta propria. */
.campo select {
  appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23383a37' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.campo input::placeholder,
.campo textarea::placeholder {
  color: var(--texto-suave);
  opacity: 0.75;
}

.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--vermelho);
  outline-offset: 1px;
}

.campo input:user-invalid {
  border-color: var(--vermelho);
}

.grupo-opcoes,
.opcoes-tamanho,
.gaveta__endereco {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.grupo-opcoes legend,
.opcoes-tamanho legend {
  margin-bottom: 8px;
  padding: 0;
}

/* Opcoes em pilula (entrega/retirada, forma de pagamento). O radio fica
   invisivel por cima da pilula: continua recebendo clique, foco e setas. */
.segmentado {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.segmentado label {
  position: relative;
  display: inline-flex;
}

.segmentado input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segmentado span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--superficie);
  color: var(--texto-titulo);
  font-size: 13px;
  font-weight: 700;
  transition: background-color var(--t-rapido) var(--ease),
    border-color var(--t-rapido) var(--ease), color var(--t-rapido) var(--ease);
}

.segmentado label:hover span {
  border-color: var(--vermelho);
}

.segmentado input:checked + span {
  border-color: var(--vermelho);
  background: var(--vermelho);
  color: #fff;
}

.segmentado input:focus-visible + span {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
}

/* Quantidade: menos | numero | mais */
.contador {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--superficie);
}

.contador button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--texto-titulo);
  transition: background-color var(--t-rapido) var(--ease),
    color var(--t-rapido) var(--ease);
}

.contador button:hover:not([aria-disabled="true"]) {
  background: var(--vermelho-suave);
  color: var(--texto-marca);
}

.contador button[aria-disabled="true"] {
  color: var(--linha-forte);
  cursor: default;
}

.contador__valor {
  min-width: 2ch;
  color: var(--texto-titulo);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.contador--compacto button {
  width: 34px;
  height: 34px;
}

/* Botao do carrinho no cabecalho --------------------------------------- */

.botao-carrinho {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  color: var(--tinta-header);
  transition: background-color var(--t-rapido) var(--ease),
    border-color var(--t-rapido) var(--ease), color var(--t-medio) var(--ease);
}

.botao-carrinho:hover {
  border-color: var(--vermelho);
  background: var(--vermelho-suave);
  color: var(--texto-marca);
}

.site-header--sobre-hero:not(.esta-rolado) .botao-carrinho:hover {
  border-color: #fff;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
}

/* Selo com a quantidade, no Vermelho Veneto (branco sobre ele: 10,8:1). */
.botao-carrinho__qtd {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--vermelho);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--papel);
}

.botao-carrinho[data-pulso] .botao-carrinho__qtd {
  animation: selo-pulsa var(--t-lento) var(--ease);
}

@keyframes selo-pulsa {
  40% {
    transform: scale(1.4);
  }
}

/* Gaveta lateral ------------------------------------------------------- */

.gaveta {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(440px, 100vw);
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--papel);
  color: var(--texto);
  box-shadow: var(--sombra-elevada);
  overflow: hidden;
}

.gaveta[open] {
  animation: gaveta-entra var(--t-medio) var(--ease);
}

@keyframes gaveta-entra {
  from {
    transform: translateX(100%);
  }
}

.gaveta::backdrop {
  background: rgb(0 0 0 / 0.5);
}

.gaveta__form,
.gaveta__enviado {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

.gaveta__enviado {
  grid-template-rows: auto minmax(0, 1fr);
}

.gaveta__cabeca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 14px 24px;
  border-bottom: 1px solid var(--linha);
}

.gaveta__titulo {
  color: var(--texto-marca);
  font-family: var(--fonte-display);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
}

.gaveta__contagem {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--vermelho-suave);
  color: var(--texto-marca);
  font-size: 12px;
  font-weight: 700;
}

.gaveta__contagem:empty {
  display: none;
}

.gaveta__fechar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
  color: var(--texto-titulo);
  transition: background-color var(--t-rapido) var(--ease),
    color var(--t-rapido) var(--ease), border-color var(--t-rapido) var(--ease);
}

.gaveta__fechar:hover {
  border-color: var(--vermelho);
  background: var(--vermelho);
  color: #fff;
}

.gaveta__corpo {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px 24px 28px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gaveta__corpo--centro {
  align-content: center;
  justify-items: center;
  text-align: center;
  color: var(--texto-suave);
  font-size: 15px;
}

.gaveta__itens {
  display: grid;
  gap: 12px;
}

.gaveta__vazio {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 40px 12px 8px;
  color: var(--texto-suave);
  font-size: 14px;
  text-align: center;
}

.gaveta__vazio svg {
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  color: var(--linha-forte);
}

.gaveta__destaque {
  color: var(--texto-titulo);
  font-size: 17px;
  font-weight: 700;
}

.gaveta__mais {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 16px;
  border: 1px dashed var(--linha-forte);
  border-radius: 999px;
  color: var(--texto-marca);
  font-size: 13px;
  font-weight: 700;
  transition: background-color var(--t-rapido) var(--ease),
    border-color var(--t-rapido) var(--ease);
}

.gaveta__mais:hover {
  border-color: var(--vermelho);
  background: var(--vermelho-suave);
}

.gaveta__vazio:not([hidden]) + .gaveta__mais {
  justify-self: center;
}

.gaveta__dados {
  display: grid;
  gap: 16px;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--linha);
}

.gaveta__subtitulo {
  color: var(--texto-titulo);
  font-size: 16px;
  font-weight: 700;
}

.gaveta__endereco {
  display: grid;
  gap: 12px;
}

.gaveta__rodape {
  display: grid;
  gap: 12px;
  padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--linha);
  background: var(--superficie);
  box-shadow: 0 -14px 24px -22px rgb(56 58 55 / 0.4);
}

.gaveta__resumo {
  display: grid;
  gap: 2px;
}

.gaveta__resumo > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.gaveta__resumo dt {
  color: var(--texto-titulo);
  font-size: 14px;
  font-weight: 700;
}

.gaveta__resumo dd {
  margin: 0;
  color: var(--texto-titulo);
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.gaveta__taxa dt,
.gaveta__taxa dd {
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 400;
}

.gaveta__finalizar {
  width: 100%;
}

.gaveta__ok {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: var(--vermelho-suave);
  color: var(--texto-marca);
}

.gaveta__corpo--centro .botao {
  width: 100%;
}

/* Item do carrinho: foto | nome e detalhes | lixeira
                     quantidade ............. total */
.item-carrinho {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 4px 12px;
  padding: 12px;
  border: 1px solid var(--linha);
  border-radius: 16px;
  background: var(--superficie);
}

.item-carrinho__midia {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--papel-2);
}

.item-carrinho__foto {
  width: 64px;
  height: 64px;
  object-fit: cover;
}

/* Meio a meio: metade direita com a foto do 2o sabor. */
.item-carrinho__foto--metade {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 50%);
}

.item-carrinho__midia:has(.item-carrinho__foto--metade)::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: rgb(255 255 255 / 0.85);
}

.item-carrinho__info {
  display: grid;
  align-content: start;
  gap: 2px;
}

.item-carrinho__nome {
  color: var(--texto-titulo);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.item-carrinho__detalhe,
.item-carrinho__obs {
  color: var(--texto-suave);
  font-size: 13px;
  line-height: 1.45;
}

.item-carrinho__obs {
  font-style: italic;
  overflow-wrap: anywhere;
}

.item-carrinho__remover {
  align-self: start;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--texto-suave);
  transition: background-color var(--t-rapido) var(--ease),
    color var(--t-rapido) var(--ease);
}

.item-carrinho__remover:hover {
  background: var(--vermelho-suave);
  color: var(--texto-marca);
}

.item-carrinho__rodape {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.item-carrinho__preco {
  color: var(--texto-titulo);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Aviso de "adicionado ao carrinho" ------------------------------------ */

.aviso-carrinho {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 8px 8px 8px 20px;
  border-radius: 999px;
  background: var(--tinta);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  box-shadow: var(--sombra-elevada);
  transform: translateX(-50%);
  animation: aviso-entra var(--t-medio) var(--ease);
}

@keyframes aviso-entra {
  from {
    opacity: 0;
    transform: translate(-50%, 12px);
  }
}

.aviso-carrinho__ver {
  flex: none;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--texto-titulo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.aviso-carrinho__ver:hover {
  background: var(--vermelho-suave);
  color: var(--texto-marca);
}

.aviso-carrinho :focus-visible {
  outline-color: #fff;
}

/* Celular: gaveta em tela cheia e aviso acima do "voltar ao topo". */
@media (max-width: 39.99em) {
  .gaveta__cabeca {
    padding-left: 16px;
  }

  .gaveta__corpo {
    padding: 16px 16px 24px;
  }

  .gaveta__rodape {
    padding-inline: 16px;
  }

  .aviso-carrinho {
    bottom: 80px;
    border-radius: 20px;
  }
}