/* Clique Delivery: tema do site publico (inicio, blog, post, termos, privacidade e erro).
   Tudo preso a classe "publico" do body (posta por pagina_abrir): painel, cadastro e lojas nao leem este arquivo.
   Ideia: o ponto amarelo da marca vira o palco. Gema, carvao e papel; pimenta so na promocao.
   Letras: Gabarito (a voz da marca, nos titulos) e Albert Sans (texto). Fotos de prato sempre em circulo. */

body.publico {
  --gema: #FFD23F;
  --gema-clara: #FFE27A;
  --carvao: #1E1714;
  --carvao-claro: #2E2521;
  --papel: #FFFDF7;
  --manteiga: #FFF3C7;
  --pimenta: #D4351A;
  --fumo: #6B5F58;
  --risco: #E9DFCC;

  /* Os nomes antigos do site.css, apontados para a paleta nova (so dentro do site publico). */
  --tinta: var(--carvao);
  --azul: var(--carvao);
  --azul-escuro: #000000;
  --amarelo: var(--gema);
  --nevoa: #F6EEDC;
  --cinza: var(--fumo);
  --linha: var(--risco);

  --margem: clamp(1.25rem, 4vw, 4.5rem);
  --largura: 110rem;
  --secao: clamp(4.5rem, 9vw, 9.5rem);
  --suave: cubic-bezier(0.2, 0.75, 0.2, 1);

  background: var(--papel);
  color: var(--carvao);
}

html:has(body.publico) { scroll-padding-top: 6rem; }

.publico ::selection { background: var(--carvao); color: var(--gema); }

/* ---------- Botoes: o ponto da marca e o "clique" ---------- */
.publico .botao {
  gap: 0.625rem;
  background: var(--carvao);
  color: #FFFFFF;
  white-space: nowrap;
  transition: background-color 0.15s ease, scale 0.15s ease;
}

.publico .botao:hover { background: #000000; }
.publico .botao:active { scale: 0.97; }
.publico .botao:has(.botao-ponto) { padding-right: 0.625rem; }
.publico .botao-menor:has(.botao-ponto) { padding-right: 0.5rem; }

.publico .botao-ponto {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 50%;
  background: var(--gema);
  transition: scale 0.2s var(--suave);
}

.publico .botao-ponto svg { width: 0.95em; height: 0.95em; fill: var(--carvao); transition: translate 0.2s var(--suave); }
.publico .botao:hover .botao-ponto { scale: 1.12; }
.publico .botao:hover .botao-ponto svg { translate: -1px -1px; }
.publico .botao:active .botao-ponto { scale: 0.88; }

.publico .botao-claro { background: var(--gema); color: var(--carvao); }
.publico .botao-claro:hover { background: #FFFFFF; }
.publico .botao-claro .botao-ponto { background: var(--carvao); }
.publico .botao-claro .botao-ponto svg { fill: var(--gema); }

.publico .botao-linha { border-color: var(--carvao); background: transparent; color: var(--carvao); }
.publico .botao-linha:hover { background: var(--carvao); color: #FFFFFF; }

.publico .link { color: inherit; font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.publico .link:hover { text-decoration-color: var(--pimenta); }

/* ---------- Topo: uma pilula branca que acompanha a pagina ---------- */
.publico .topo {
  position: fixed;
  top: 0.75rem;
  right: var(--margem);
  left: var(--margem);
  z-index: 20;
  max-width: calc(var(--largura) - 2 * var(--margem));
  margin-inline: auto;
  padding: 0.5rem 0.5rem 0.5rem 1.375rem;
  border: 0;
  border-radius: 999px;
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(30, 23, 20, 0.06), 0 14px 34px -14px rgba(30, 23, 20, 0.35);
}

.publico .topo-nav { gap: clamp(1.25rem, 2.2vw, 2.5rem); }
.publico .topo-nav a { position: relative; padding-block: 0.5rem; font-weight: 600; }
.publico .topo-nav a:hover { text-decoration: none; }

.publico .topo-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.25rem;
  left: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--gema);
  scale: 0 1;
  transform-origin: left;
  transition: scale 0.25s var(--suave);
}

.publico .topo-nav a:hover::after, .publico .topo-nav a:focus-visible::after { scale: 1 1; }
.publico.pagina-simples .topo { padding-block: 0.875rem; }

/* Celular: a marca e o botao cabem juntos na pilula, sem cortar nem quebrar linha. */
@media (max-width: 27rem) {
  .publico .topo { gap: 0.75rem; padding-left: 1rem; }
  .publico .topo .marca { font-size: 1.375rem; }
  .publico .topo .botao-ponto { display: none; }
  .publico .topo .botao:has(.botao-ponto) { padding-inline: 1.125rem; }
}

@media (max-width: 23.5rem) {
  .publico .topo .marca { font-size: 1.25rem; }
}

@media (max-width: 21rem) {
  .publico .topo { gap: 0.5rem; padding-left: 0.75rem; }
  .publico .topo .marca { font-size: 1.125rem; }
  .publico .topo .botao:has(.botao-ponto) { padding-inline: 0.875rem; font-size: 0.9375rem; }
}

/* ---------- Pratos: fotos em circulo, que giram devagar com a rolagem ---------- */
.publico .prato {
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.publico .prato img { width: 100%; max-width: none; height: 100%; object-fit: cover; }

/* O recorte de cada foto: o centro e o tamanho do prato dentro dela. */
.publico .prato-pizza img { object-position: 23.8% 50%; transform-origin: 50% 52.5%; scale: 1.13; translate: 0 -2.5%; }
.publico .prato-salada img { object-position: 51% 50%; transform-origin: 50% 48.7%; scale: 1.24; translate: 0 1.3%; }
.publico .prato-poke img { transform-origin: 50.3% 50.7%; scale: 1.18; translate: -0.3% -0.7%; }
.publico .prato-tigela img { object-position: 50.7% 50%; transform-origin: 50% 49.2%; scale: 1.11; translate: 0 0.8%; }

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    @keyframes girar-prato {
      from { rotate: -45deg; }
      to { rotate: 45deg; }
    }

    .publico .prato {
      animation: girar-prato linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* ---------- Abertura ---------- */
.publico .heroi {
  position: relative;
  overflow: clip;
  padding: clamp(6.25rem, 9.5vw, 9rem) 0 clamp(3rem, 5vw, 5rem);
  background: var(--gema);
}

.publico .heroi-miolo {
  display: grid;
  gap: 3.5rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .heroi-texto { min-width: 0; }

.publico .heroi h1 {
  max-width: 9.5ch;
  font-size: clamp(3.25rem, 14.4vw, 5.25rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  text-wrap: balance;
}

.publico .heroi-apoio {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: clamp(1.0625rem, 1.45vw, 1.375rem);
  font-weight: 500;
  line-height: 1.4;
}

.publico .nome-form { max-width: 40rem; margin-top: clamp(1.75rem, 3vw, 2.75rem); }

.publico .nome-form label {
  display: block;
  margin-bottom: 0.625rem;
  font-family: var(--titulo);
  font-size: 1.125rem;
  font-weight: 700;
}

.publico .nome-caixa {
  display: grid;
  gap: 0.375rem;
  padding: 0.375rem;
  border: 2px solid var(--carvao);
  border-radius: 1.75rem;
  background: #FFFFFF;
  box-shadow: 0 20px 40px -22px rgba(30, 23, 20, 0.6);
  transition: box-shadow 0.2s ease;
}

.publico .nome-caixa:focus-within { box-shadow: 0 0 0 4px #FFFFFF, 0 20px 40px -22px rgba(30, 23, 20, 0.6); }
.publico .nome-caixa:has(input[aria-invalid="true"]) { border-color: var(--pimenta); }

.publico .nome-form input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  padding: 0.5rem 1.125rem;
  border: 0;
  border-radius: 1.375rem;
  background: transparent;
  font-size: 1.25rem;
  font-weight: 600;
}

.publico .nome-form input[type="text"]:focus-visible { outline: none; }
.publico .nome-form input[type="text"]::placeholder { color: #A39A93; font-weight: 500; }
.publico .nome-caixa .botao { min-height: 3.5rem; border-radius: 1.375rem; font-size: 1.125rem; }

.publico .campo-erro { margin-top: 0.625rem; color: #8F1F0C; font-weight: 700; }

.publico .endereco {
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0;
  border-radius: 0;
  background: none;
  font-size: clamp(1rem, 1.5vw, 1.3125rem);
  font-weight: 500;
}

.publico .endereco .icone { color: var(--carvao); }
.publico .endereco-fixo { color: rgba(30, 23, 20, 0.72); }

.publico .endereco-nome {
  padding: 0.08em 0.3em;
  border-radius: 0.4em;
  background: #FFFFFF;
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.publico .endereco-nome.vazio { padding-inline: 0; background: none; color: rgba(30, 23, 20, 0.72); font-weight: 500; }

.publico .heroi-nota { max-width: 34rem; margin-top: 1.5rem; font-size: 1rem; }
.publico .heroi-nota s { text-decoration-thickness: 2px; text-decoration-color: var(--pimenta); }

/* O palco: o celular ao vivo e os outros estilos abertos em leque atras dele */
.publico .previa {
  display: grid;
  gap: 1.125rem;
  justify-items: center;
  align-content: start;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--carvao);
}

.publico .previa :focus-visible { outline-color: var(--carvao); }

.publico .palco {
  --fone: clamp(13.5rem, 58vw, 17.5rem);
  position: relative;
  width: var(--fone);
  margin-block: 0.5rem 0.75rem;
}

.publico .palco::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: 245%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gema-clara);
  translate: -50% -50%;
}

.publico .aparelho {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: none;
  padding: 0.5rem;
  border-radius: 2.5rem;
  background: var(--carvao);
  box-shadow: 0 2.5rem 4rem -1.75rem rgba(30, 23, 20, 0.7);
}

.publico .aparelho-barra { padding: 0.25rem 0.625rem 0.5rem; color: #FFFFFF; }
.publico .aparelho-tela { border-radius: 2rem; background: var(--carvao); }

.publico .aparelho-capa {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: opacity 0.45s ease;
}

.publico .aparelho-capa.entrando { opacity: 0; }
.publico .aparelho-tela.ao-vivo .aparelho-capa { opacity: 0; pointer-events: none; }

.publico .leque {
  position: absolute;
  top: 2.4rem;
  left: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 720;
  border: 0.4rem solid var(--carvao);
  border-radius: 2rem;
  background: var(--carvao);
  object-fit: cover;
  object-position: top;
  box-shadow: 0 2rem 3rem -1.75rem rgba(30, 23, 20, 0.6);
  transition: translate 0.6s var(--suave), rotate 0.6s var(--suave), scale 0.6s var(--suave);
}

.publico .leque-e1 { translate: -50% 1%; rotate: -8deg; scale: 0.88; }
.publico .leque-d1 { translate: 50% 1%; rotate: 8deg; scale: 0.88; }
.publico .leque-e2, .publico .leque-d2 { display: none; z-index: 1; }

/* Na troca de estilo o leque fecha atras do celular, troca as cartas e abre de novo. */
.publico .palco.fechado .leque { translate: 0 0; rotate: 0deg; scale: 0.82; }

@media (prefers-reduced-motion: no-preference) {
  @keyframes abrir-leque {
    from { translate: 0 0; rotate: 0deg; scale: 0.82; }
  }

  .publico .leque { animation: abrir-leque 0.9s var(--suave) 0.25s backwards; }
  .publico .leque-e2, .publico .leque-d2 { animation-delay: 0.4s; }
}

.publico .previa[data-aparelho="computador"] .palco { width: min(100%, 44rem); }
.publico .previa[data-aparelho="computador"] .palco::before { width: 70%; }
.publico .previa[data-aparelho="computador"] .aparelho { border-radius: 1.125rem; }
.publico .previa[data-aparelho="computador"] .aparelho-tela { border-radius: 0.625rem; background: #FFFFFF; }
.publico .previa[data-aparelho="computador"] .aparelho-capa,
.publico .previa[data-aparelho="computador"] .leque { display: none; }

.publico .previa-pe {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  width: min(100%, 27rem);
}

.publico .previa-estilo { display: grid; min-width: 0; font-size: 0.9375rem; line-height: 1.3; }
.publico .previa-estilo-nome { font-family: var(--titulo); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.01em; }
.publico .previa-estilo-nome strong { font-weight: 900; }

.publico .alternar { background: rgba(30, 23, 20, 0.12); }
.publico .alternar button { min-height: 2.5rem; padding-inline: 0.875rem; color: var(--carvao); white-space: nowrap; }
.publico .alternar button[aria-pressed="true"] { background: var(--carvao); color: #FFFFFF; }

.publico .chips {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.4rem;
  width: min(100%, 27rem);
  padding: 0;
  overflow: visible;
}

.publico .chip {
  display: block;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: none;
  transition: scale 0.2s var(--suave);
}

.publico .chip:hover { background: none; scale: 1.12; }
.publico .chip-cor { display: block; width: 100%; height: 100%; border: 2px solid var(--carvao); }
.publico .chip[aria-pressed="true"] { background: none; scale: 1.12; }
.publico .chip[aria-pressed="true"] .chip-cor { border-color: var(--carvao); box-shadow: 0 0 0 3px var(--gema), 0 0 0 5.5px var(--carvao); }

.publico .previa-links {
  position: relative;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.9375rem;
}

.publico .previa-pausa { padding: 0; border: 0; background: none; text-decoration: underline; }

@media (min-width: 64rem) {
  .publico .heroi-miolo {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(1.5rem, 3vw, 4rem);
    align-items: center;
  }

  /* As medidas olham tambem a altura da tela: a abertura inteira cabe na primeira dobra. */
  .publico .heroi { padding-top: clamp(6.25rem, 13svh, 9rem); }
  .publico .heroi h1 { max-width: 9.2ch; font-size: clamp(4rem, min(7.6vw, 12.6svh), 9.25rem); text-wrap: wrap; }
  .publico .nome-form { margin-top: clamp(1.5rem, 4svh, 2.75rem); }
  .publico .nome-caixa { grid-template-columns: minmax(0, 1fr) auto; border-radius: 999px; }
  .publico .nome-form input[type="text"], .publico .nome-caixa .botao { border-radius: 999px; }
  .publico .nome-caixa .botao { padding-left: 1.75rem; }
  .publico .palco { --fone: clamp(13.5rem, min(19.5vw, 30svh), 21rem); }
  .publico .leque-e1 { translate: -54% 1%; }
  .publico .leque-d1 { translate: 54% 1%; }
  .publico .leque-e2, .publico .leque-d2 { display: block; }
  .publico .leque-e2 { translate: -100% 4%; rotate: -15deg; scale: 0.76; }
  .publico .leque-d2 { translate: 100% 4%; rotate: 15deg; scale: 0.76; }
}

@media (min-width: 80rem) {
  .publico .previa-pe, .publico .chips { width: min(100%, 34rem); }
  .publico .previa-pe { flex-wrap: nowrap; }
  .publico .chips { grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 0.3rem; }
  .publico .chip-cor { border-width: 1.5px; }
  .publico .chip[aria-pressed="true"] .chip-cor { box-shadow: 0 0 0 2px var(--gema), 0 0 0 4px var(--carvao); }
}

@media (min-width: 34rem) and (max-width: 63.99rem) {
  .publico .nome-caixa { grid-template-columns: minmax(0, 1fr) auto; border-radius: 999px; }
  .publico .nome-form input[type="text"], .publico .nome-caixa .botao { border-radius: 999px; }
  .publico .heroi h1 { font-size: clamp(4.5rem, 12vw, 7rem); }
  .publico .palco { --fone: 19rem; }
  .publico .leque-e2, .publico .leque-d2 { display: block; }
  .publico .leque-e2 { translate: -100% 4%; rotate: -15deg; scale: 0.76; }
  .publico .leque-d2 { translate: 100% 4%; rotate: 15deg; scale: 0.76; }
}

/* ---------- O que vem junto: o pedido andando ---------- */
.publico .fluxo {
  position: relative;
  overflow: clip;
  padding-block: var(--secao);
  background: var(--carvao);
  color: #FFFFFF;
}

.publico .fluxo :focus-visible { outline-color: var(--gema); }

.publico .fluxo-miolo {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .fluxo h2 { max-width: 15ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }

.publico .fluxo-texto p {
  max-width: 36rem;
  margin-top: 1.5rem;
  font-size: clamp(1.0625rem, 1.45vw, 1.375rem);
  color: rgba(255, 255, 255, 0.74);
}

.publico .fluxo-mesa { position: relative; display: grid; min-height: 15rem; align-items: center; }

.publico .prato-pizza {
  position: absolute;
  top: 50%;
  right: calc(-1 * var(--margem) - 4.5rem);
  width: clamp(17rem, 78vw, 24rem);
  translate: 0 -50%;
}

/* A comanda: um pedido de exemplo, em papel de cupom */
.publico .comanda-saida { position: relative; z-index: 1; min-width: 0; }

.publico .comanda {
  --dente: 0.875rem;
  position: relative;
  width: min(100%, 18.5rem);
  padding: 1.375rem 1.375rem calc(1.5rem + var(--dente) / 2);
  background: #FFFFFF;
  color: var(--carvao);
  rotate: -4deg;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / var(--dente) calc(var(--dente) / 2) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--dente) / 2) no-repeat;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% 100% / var(--dente) calc(var(--dente) / 2) repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - var(--dente) / 2) no-repeat;
}

.publico .comanda-loja { font-family: var(--titulo); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; }

.publico .comanda-etapa {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.125rem;
  padding-bottom: 0.875rem;
  border-bottom: 2px dashed var(--risco);
  font-weight: 600;
}

.publico .comanda-sinal { flex: none; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--pimenta); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes piscar-sinal {
    from { box-shadow: 0 0 0 0 rgba(212, 53, 26, 0.55); }
    to { box-shadow: 0 0 0 0.75rem rgba(212, 53, 26, 0); }
  }

  .publico .comanda-etapa.mudou .comanda-sinal { animation: piscar-sinal 0.6s ease-out; }
}

.publico .comanda dl { display: grid; gap: 0.375rem; margin: 0.875rem 0 0; }
.publico .comanda dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.publico .comanda dt { min-width: 0; }
.publico .comanda dd { flex: none; margin: 0; font-variant-numeric: tabular-nums; }

.publico .comanda-total {
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 2px dashed var(--risco);
  font-family: var(--titulo);
  font-size: 1.375rem;
  font-weight: 900;
}

/* O trilho: as quatro etapas do pedido, ligadas por uma linha que acende */
.publico .trilho { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }

.publico .trilho li {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.125rem 1.125rem;
  align-content: start;
  padding-bottom: 2rem;
}

.publico .trilho li:last-child { padding-bottom: 0; }

.publico .trilho-no {
  position: relative;
  z-index: 1;
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--gema);
  color: var(--carvao);
}

.publico .trilho-no .icone { width: 1.625rem; height: 1.625rem; }
.publico .trilho h3 { align-self: end; font-size: clamp(1.375rem, 2vw, 1.875rem); letter-spacing: -0.02em; }
.publico .trilho p { color: rgba(255, 255, 255, 0.72); }

.publico .trilho li::before, .publico .trilho li::after {
  content: "";
  position: absolute;
  top: 3.75rem;
  bottom: 0;
  left: calc(1.875rem - 1.5px);
  width: 3px;
  background: rgba(255, 255, 255, 0.16);
}

.publico .trilho li::after { background: var(--gema); transform-origin: top; }
.publico .trilho li:last-child::before, .publico .trilho li:last-child::after { content: none; }

.publico .fluxo-pe {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
  color: rgba(255, 255, 255, 0.82);
}

.publico .fluxo-pe .icone { margin-top: 0.15em; color: var(--gema); }

@media (min-width: 48rem) {
  .publico .trilho { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3.5rem); }
  .publico .trilho li { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; padding-bottom: 0; }
  .publico .trilho-no { grid-row: auto; width: 4.5rem; height: 4.5rem; margin-bottom: 0.875rem; }
  .publico .trilho-no .icone { width: 1.875rem; height: 1.875rem; }

  .publico .trilho li::before, .publico .trilho li::after {
    top: calc(2.25rem - 1.5px);
    right: calc(-1 * clamp(1.5rem, 3vw, 3.5rem));
    bottom: auto;
    left: 4.5rem;
    width: auto;
    height: 3px;
  }

  .publico .trilho li::after { transform-origin: left; }
}

@media (min-width: 64rem) {
  .publico .fluxo-miolo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 3rem); }
  .publico .fluxo-texto { grid-column: 1 / span 7; align-self: center; }
  .publico .fluxo-mesa { grid-column: 9 / span 4; min-height: clamp(20rem, 30vw, 32rem); }
  .publico .trilho, .publico .fluxo-pe { grid-column: 1 / -1; }
  .publico .prato-pizza { right: calc(-1 * var(--margem) - 9vw); width: clamp(22rem, 36vw, 40rem); }
  .publico .comanda { width: min(100%, 20rem); }
}

/* ---------- Estilos: o fundo da secao veste a cor do estilo da vez ---------- */
.publico .estilos {
  --palco-cor: var(--papel);
  --palco-texto: var(--carvao);
  padding-block: var(--secao) calc(var(--secao) * 0.7);
  overflow: clip;
  background: var(--palco-cor);
  color: var(--palco-texto);
  transition: background-color 0.6s ease, color 0.4s ease;
}

.publico .estilos :focus-visible { outline-color: var(--palco-texto); }

.publico .estilos-topo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .estilos h2 { font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .estilos-topo p { max-width: 34rem; margin-top: 1rem; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); color: inherit; opacity: 0.78; }

.publico .seta {
  width: 3.5rem;
  height: 3.5rem;
  border: 2px solid var(--palco-texto);
  background: transparent;
  color: var(--palco-texto);
  transition: background-color 0.15s ease, color 0.15s ease, scale 0.15s ease;
}

.publico .seta:hover:not(:disabled) { background: var(--palco-texto); color: var(--palco-cor); }
.publico .seta:active:not(:disabled) { scale: 0.92; }

.publico .vitrine { --estilo-largura: min(68vw, 17.5rem); gap: clamp(1rem, 2vw, 2.25rem); margin-top: clamp(2rem, 4vw, 3.5rem); padding-block: 1rem 1.5rem; }
.publico .estilo { gap: 1.25rem; }
.js .publico .estilo:not([data-atual]) { opacity: 0.82; scale: 0.86; }

.publico .estilo-foto {
  border: 0.45rem solid #100C0A;
  border-radius: 2.25rem;
  background: #100C0A;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22), 0 2.5rem 3.5rem -2rem rgba(0, 0, 0, 0.55);
}

.publico .estilo-foto img { border-radius: 1.75rem; }
.publico .estilo-texto { gap: 0.25rem; justify-items: center; text-align: center; }
.publico .estilo-texto h3 { font-size: clamp(1.75rem, 2.4vw, 2.5rem); letter-spacing: -0.03em; }
.publico .estilo-texto p { min-height: 0; font-size: 1rem; color: inherit; opacity: 0.78; }
.publico .estilo-texto .botao { margin-top: 0.875rem; background: var(--palco-texto); color: var(--palco-cor); }
.publico .estilo-texto .botao:hover { background: var(--palco-texto); scale: 1.04; }
.js .publico .estilo:not([data-atual]) .estilo-texto { visibility: hidden; opacity: 0; }

.publico .marcadores button::before { background: var(--palco-texto); opacity: 0.35; }
.publico .marcadores button[aria-current="true"]::before { background: var(--palco-texto); opacity: 1; }

/* No celular os vinte marcadores cabem em uma linha so. */
@media (max-width: 40rem) {
  .publico .marcadores { flex-wrap: nowrap; gap: 0; }
  .publico .marcadores button { width: 1rem; height: 2rem; }
  .publico .marcadores button::before { width: 0.375rem; height: 0.375rem; }
  .publico .marcadores button[aria-current="true"] { width: 1.5rem; }
  .publico .marcadores button[aria-current="true"]::before { width: 1rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .publico .estilo { transition: opacity 0.35s ease, scale 0.45s var(--suave); }
  .publico .estilo-texto { transition: opacity 0.3s ease, visibility 0.3s; }
}

@media (min-width: 64rem) {
  /* A largura do celular olha a altura da tela: titulo, vitrine e botao cabem juntos em uma dobra. */
  .publico .vitrine { --estilo-largura: clamp(15rem, min(21vw, 30svh), 23rem); margin-top: clamp(1.5rem, 3vw, 2.75rem); }
  .publico .estilos { padding-top: calc(var(--secao) * 0.8); }
  .publico .estilos-topo > div:first-child { display: flex; flex: 1; align-items: flex-end; gap: clamp(2rem, 4vw, 5rem); min-width: 0; }
  .publico .estilos-topo h2 { flex: none; }
  .publico .estilos-topo p { max-width: 27rem; margin: 0 0 0.35em; }
}

/* ---------- Como funciona: quatro degraus ---------- */
.publico .degraus { padding-block: var(--secao); background: var(--papel); }
.publico .degraus-miolo { max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.publico .degraus h2 { max-width: 12ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }

.publico .degraus-lista {
  display: grid;
  gap: 2.5rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: degrau;
}

.publico .degrau { display: grid; gap: 0.5rem; align-content: start; min-width: 0; counter-increment: degrau; }
.publico .degrau h3 { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; font-size: clamp(1.5rem, 2vw, 2rem); letter-spacing: -0.02em; }

.publico .degrau h3::before {
  content: counter(degrau);
  display: grid;
  flex: none;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  border-radius: 50%;
  background: var(--gema);
  font-size: 0.85em;
}

.publico .degrau p { max-width: 28rem; color: var(--fumo); }

.publico .cena {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  padding: 1.25rem;
  border-radius: 1.75rem;
}

.publico .cena-nome { background: var(--gema); }
.publico .cena-estilo { background: var(--manteiga); }
.publico .cena-produto { background: var(--nevoa); }
.publico .cena-ligar { gap: 0.75rem; align-content: center; background: var(--carvao); color: #FFFFFF; }

.publico .cena-endereco {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.75rem 1.125rem;
  border: 2px solid var(--carvao);
  border-radius: 999px;
  background: #FFFFFF;
  font-size: clamp(0.8125rem, 1.05vw, 1rem);
  font-weight: 500;
  white-space: nowrap;
  rotate: -4deg;
  box-shadow: 0 1rem 1.5rem -1rem rgba(30, 23, 20, 0.5);
}

.publico .cena-endereco .icone { width: 1em; height: 1em; }
.publico .cena-endereco > span { overflow: hidden; text-overflow: ellipsis; }
.publico .cena-endereco b { font-weight: 700; }

.publico .cena-estilo img {
  position: absolute;
  top: 14%;
  left: 50%;
  width: 34%;
  height: auto;
  border: 0.25rem solid var(--carvao);
  border-radius: 0.875rem;
  box-shadow: 0 1rem 1.5rem -1rem rgba(30, 23, 20, 0.5);
  translate: -50% 0;
}

.publico .cena-estilo img:nth-child(1) { translate: -128% 8%; rotate: -9deg; }
.publico .cena-estilo img:nth-child(3) { translate: 28% 8%; rotate: 9deg; }
.publico .cena-estilo img:nth-child(2) { z-index: 1; }

.publico .cena-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: min(100%, 20rem);
  padding: 0.625rem 0.875rem 0.625rem 0.625rem;
  border-radius: 1.125rem;
  background: #FFFFFF;
  rotate: 2deg;
  box-shadow: 0 1rem 1.5rem -1rem rgba(30, 23, 20, 0.4);
}

.publico .cena-item img { flex: none; width: 3.75rem; height: 3.75rem; border-radius: 0.75rem; object-fit: cover; }
.publico .cena-item > span:not(.chave) { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.publico .cena-item b { font-family: var(--titulo); font-size: 1.0625rem; font-weight: 700; }
.publico .cena-item i { font-style: normal; color: var(--fumo); }

.publico .chave { position: relative; flex: none; width: 2.75rem; height: 1.5rem; border-radius: 999px; background: #C9BFB5; }
.publico .chave::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #FFFFFF; }
.publico .chave.ligada { background: var(--carvao); }
.publico .chave.ligada::after { right: 0.1875rem; left: auto; background: var(--gema); }

.publico .cena-botao {
  display: grid;
  place-items: center;
  width: clamp(4rem, 6vw, 5.5rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gema);
  color: var(--carvao);
  box-shadow: 0 0 0 0.625rem rgba(255, 210, 63, 0.22), 0 0 0 1.5rem rgba(255, 210, 63, 0.1);
}

.publico .cena-botao .icone { width: 45%; height: 45%; stroke-width: 2.5; }
.publico .cena-ligado { margin-top: 0.875rem; font-family: var(--titulo); font-size: 1.125rem; font-weight: 700; }

@media (min-width: 40rem) {
  .publico .degraus-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 2rem; }
  .publico .cena { aspect-ratio: 4 / 3; }
}

@media (min-width: 72rem) {
  .publico .degraus-miolo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 3rem); }
  .publico .degraus h2 { grid-column: 1 / span 5; grid-row: 1; align-self: start; }
  .publico .degraus-lista { grid-column: 1 / -1; grid-row: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.5vw, 3rem); margin-top: 0; align-items: start; }
  .publico .degrau:nth-child(1) { margin-top: clamp(15rem, 21vw, 24rem); }
  .publico .degrau:nth-child(2) { margin-top: clamp(15rem, 21vw, 24rem); }
  .publico .degrau:nth-child(3) { margin-top: clamp(7.5rem, 10.5vw, 12rem); }
  .publico .degrau:nth-child(4) { margin-top: 0; }
}

/* ---------- Campanhas: ligue para os seus clientes ---------- */
.publico .ligue { padding-block: var(--secao); background: var(--manteiga); }
.publico .ligue-miolo { display: grid; gap: clamp(2rem, 4vw, 3.5rem); max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.publico .ligue h2 { max-width: 11ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .ligue-texto p { max-width: 32rem; margin-top: 1.25rem; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); }

.publico .ligue-cena {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  min-width: 0;
  padding: clamp(1.25rem, 3.5vw, 3rem);
  border-radius: 1.75rem;
  background: var(--carvao);
  color: #FFFFFF;
}

.publico .ligue-recado {
  display: grid;
  gap: 0.75rem;
  width: min(100%, 30rem);
  padding: 1.125rem 1.25rem 1.25rem;
  border-radius: 1.125rem;
  background: #FFFFFF;
  color: var(--carvao);
  rotate: -1.5deg;
  box-shadow: 0 1.25rem 2rem -1.25rem rgba(0, 0, 0, 0.7);
}

.publico .ligue-rotulo { color: var(--fumo); font-size: 0.8125rem; font-weight: 600; }
.publico .ligue-recado p { font-family: var(--titulo); font-size: clamp(1.1875rem, 1.7vw, 1.625rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; }
.publico .ligue-som { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.publico .ligue-toca { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gema); }
.publico .ligue-toca .icone { width: 1.125rem; height: 1.125rem; }
.publico .ligue-ondas { display: flex; flex: 1; align-items: center; gap: 3px; min-width: 0; height: 2rem; overflow: hidden; }
.publico .ligue-ondas i { flex: none; width: 4px; height: 35%; border-radius: 2px; background: var(--carvao); }
.publico .ligue-ondas i:nth-child(3n + 1) { height: 70%; }
.publico .ligue-ondas i:nth-child(4n + 2) { height: 100%; }
.publico .ligue-ondas i:nth-child(5n + 3) { height: 50%; }
.publico .ligue-ondas i:nth-child(7n + 5) { height: 22%; }
.publico .ligue-ondas i:nth-child(n + 13) { background: #C9BFB5; }

.publico .ligue-fila { display: grid; gap: 0.5rem; justify-self: end; width: min(100%, 24rem); margin: 0; padding: 0; list-style: none; }
.publico .ligue-fila li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1.125rem 0.5rem 0.5rem; border-radius: 999px; background: var(--carvao-claro); color: rgba(255, 255, 255, 0.6); }
.publico .ligue-fone { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, 0.1); }
.publico .ligue-fone .icone { width: 1rem; height: 1rem; }
.publico .ligue-numero { flex: 1; min-width: 0; overflow: hidden; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; white-space: nowrap; }
.publico .ligue-fila b { flex: none; font-weight: 600; }
.publico .ligue-atendeu, .publico .ligue-ligando { color: #FFFFFF; }
.publico .ligue-fila .ligue-atendeu .ligue-fone { background: var(--gema); color: var(--carvao); }
.publico .ligue-fila .ligue-atendeu b { color: var(--gema); }
.publico .ligue-fila .ligue-ligando .ligue-fone { background: #FFFFFF; color: var(--carvao); }

@media (prefers-reduced-motion: no-preference) {
  .publico .ligue-ligando .ligue-fone { animation: ligue-toque 1.6s ease-out infinite; }
  @keyframes ligue-toque {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
    70%, 100% { box-shadow: 0 0 0 0.75rem rgba(255, 255, 255, 0); }
  }
}

.publico .ligue-passos { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: passo; }
.publico .ligue-passos li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.125rem 0.875rem; padding-block: 1.125rem; border-top: 2px solid var(--carvao); counter-increment: passo; }
.publico .ligue-passos li:last-child { border-bottom: 2px solid var(--carvao); }
.publico .ligue-passos li::before { content: counter(passo); grid-row: 1 / span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--gema); font-family: var(--titulo); font-size: 1.125rem; font-weight: 700; }
.publico .ligue-passos h3 { align-self: center; font-size: clamp(1.25rem, 1.8vw, 1.75rem); letter-spacing: -0.02em; }
.publico .ligue-passos p { grid-column: 2; color: var(--fumo); }

.publico .ligue-preco { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; max-width: 34rem; }
.publico .ligue-preco strong { font-family: var(--titulo); font-size: clamp(2rem, 3.4vw, 3.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.publico .ligue-preco span { flex: 1; min-width: 14rem; font-weight: 500; }

@media (min-width: 64rem) {
  .publico .ligue-miolo { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 3rem); align-items: start; }
  .publico .ligue-texto, .publico .ligue-passos, .publico .ligue-preco { grid-column: 1 / span 5; }
  .publico .ligue-cena { grid-column: 7 / -1; grid-row: 1 / span 3; align-self: center; }
}

/* Dois itens a parte no cardapio da casa: a linha de cima separa o grupo, nao cada item. */
.publico .cardapio-lista .a-parte + .a-parte { padding-top: 0; border-top: 0; }

/* ---------- O cardapio da casa: tudo o que vem junto, em lousa ---------- */
.publico .cardapio {
  position: relative;
  overflow: clip;
  padding-block: var(--secao);
  background: var(--carvao);
  color: #FFFFFF;
}

.publico .cardapio-miolo {
  position: relative;
  z-index: 1;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .prato-salada {
  position: absolute;
  top: 1.5rem;
  right: -5.5rem;
  width: 13.5rem;
}

.publico .cardapio h2 { max-width: 8ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .cardapio-topo p { max-width: 30rem; margin-top: 1.25rem; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); color: rgba(255, 255, 255, 0.74); }

.publico .cardapio-lista {
  display: grid;
  gap: 1.5rem;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
}

.publico .cardapio-linha { display: flex; align-items: baseline; gap: 0.625rem; }
.publico .cardapio-linha strong { font-family: var(--titulo); font-size: clamp(1.3125rem, 1.9vw, 1.875rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; }

.publico .cardapio-pontos {
  flex: 1;
  min-width: 1rem;
  height: 0.25rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 1.25px, transparent 1.75px) 0 50% / 0.5rem 0.25rem repeat-x;
  transform-origin: left;
}

.publico .cardapio-custo { flex: none; font-weight: 600; color: var(--gema); }
.publico .a-parte .cardapio-custo { color: #FF9175; }
.publico .cardapio-lista .a-parte { padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.publico .cardapio-descricao { max-width: 34rem; margin-top: 0.25rem; color: rgba(255, 255, 255, 0.7); }

@media (min-width: 48rem) {
  .publico .cardapio-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 4vw, 5rem); }
  .publico .cardapio-lista .a-parte { grid-column: 1 / -1; padding-top: 2rem; }
  .publico .prato-salada { top: 50%; right: auto; left: calc(-1 * clamp(9rem, 17vw, 20rem)); width: clamp(18rem, 34vw, 40rem); translate: 0 -50%; }
  .publico .cardapio-miolo { padding-left: calc(var(--margem) + clamp(9rem, 19vw, 24rem)); }
}

/* ---------- Preco: a conta ---------- */
.publico .conta { padding-block: var(--secao); overflow: clip; background: var(--gema); }

.publico .conta-miolo {
  display: grid;
  gap: 2.5rem;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--margem);
}

.publico .conta-valor { position: relative; justify-self: start; }
.publico .conta-de { font-family: var(--titulo); font-size: clamp(1.375rem, 2.2vw, 2.25rem); font-weight: 700; }
.publico .conta-de s { text-decoration-thickness: 0.12em; text-decoration-color: var(--pimenta); }

.publico .conta-preco {
  display: flex;
  align-items: flex-start;
  margin-top: 0.5rem;
  font-family: var(--titulo);
  font-size: clamp(10rem, 44vw, 13rem);
  font-weight: 900;
  line-height: 0.76;
  letter-spacing: -0.06em;
}

.publico .conta-moeda { margin: 0.04em 0.12em 0 0; font-size: 0.2em; line-height: 1; letter-spacing: -0.02em; }
.publico .conta-resto { display: grid; justify-items: start; margin-left: 0.04em; }
.publico .conta-centavos { font-size: 0.3em; line-height: 0.9; letter-spacing: -0.04em; }
.publico .conta-periodo { margin: 0.35em 0 0 0.3em; font-family: var(--texto); font-size: clamp(1rem, 0.085em, 1.75rem); font-weight: 600; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }

.publico .conta-selo {
  display: grid;
  place-content: center;
  width: clamp(6.5rem, 10.5vw, 11rem);
  aspect-ratio: 1;
  margin: 0.875rem 0 0 -0.5rem;
  padding: 0.625rem;
  border-radius: 50%;
  background: var(--pimenta);
  color: #FFFFFF;
  font-family: var(--texto);
  font-size: clamp(0.75rem, 1vw, 1rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0;
  text-align: center;
  rotate: 10deg;
}

.publico .conta-selo b { display: block; margin-top: 0.15em; font-family: var(--titulo); font-size: 1.7em; font-weight: 900; line-height: 1; letter-spacing: -0.02em; white-space: nowrap; }

.publico .conta-texto { display: grid; gap: 1.25rem; justify-items: start; align-content: center; }
.publico .conta h2 { max-width: 12ch; font-size: clamp(2.25rem, 4.2vw, 4.5rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .conta-texto > p { max-width: 32rem; font-size: clamp(1.0625rem, 1.45vw, 1.375rem); font-weight: 500; }
.publico .conta-texto .conta-extra { font-size: 0.9375rem; font-weight: 400; }
.publico .conta-texto .botao { min-height: 3.75rem; font-size: 1.1875rem; }

@media (min-width: 64rem) {
  .publico .conta-miolo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 5rem); align-items: center; }
  .publico .conta-preco { font-size: clamp(16rem, 25vw, 29rem); }
}

/* ---------- Duvidas ---------- */
.publico .duvidas { padding-block: var(--secao); background: var(--papel); }
.publico .duvidas-miolo { display: grid; gap: 2rem; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); align-items: start; }
.publico .duvidas-topo { position: relative; display: grid; gap: 2rem; }
.publico .duvidas h2 { position: static; max-width: 11ch; font-size: clamp(2.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; }
.publico .prato-poke { display: none; }
.publico .duvidas details { border-top: 2px solid var(--carvao); }
.publico .duvidas details:last-child { border-bottom: 2px solid var(--carvao); }
.publico .duvidas summary { padding-block: 1.25rem; font-size: clamp(1.125rem, 1.8vw, 1.75rem); letter-spacing: -0.015em; white-space: nowrap; }
.publico .duvidas summary:hover { color: #000000; }
.publico .duvidas summary::before { width: 1.5rem; height: 1.5rem; }
.publico .duvidas details p, .publico .duvidas details ul { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); }
.publico .duvidas details p { padding-left: 2.375rem; }
.publico .duvidas details ul { padding-left: 3.5rem; }

@media (min-width: 64rem) {
  .publico .duvidas-miolo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 6rem); }
  .publico .duvidas-topo { position: sticky; top: 7rem; }
  .publico .prato-poke { display: block; width: clamp(14rem, 22vw, 24rem); margin-left: -1rem; }
}

/* ---------- Chamada final ---------- */
.publico .fecho {
  position: relative;
  overflow: clip;
  padding-block: var(--secao) calc(var(--secao) * 1.1);
  background: var(--carvao);
  color: #FFFFFF;
}

.publico .fecho :focus-visible { outline-color: var(--gema); }
.publico .fecho-miolo { position: relative; z-index: 1; max-width: var(--largura); margin-inline: auto; padding-inline: var(--margem); }
.publico .fecho h2 { max-width: 9.5ch; font-size: clamp(3.25rem, 9.2vw, 10.5rem); line-height: 0.88; letter-spacing: -0.05em; }
.publico .fecho .botao { min-height: 3.75rem; margin-top: clamp(2rem, 3.5vw, 3rem); font-size: 1.1875rem; }

.publico .prato-tigela {
  width: min(78vw, 22rem);
  margin: 3rem -4rem -9rem auto;
}

@media (min-width: 48rem) {
  .publico .prato-tigela {
    position: absolute;
    top: 50%;
    right: calc(-1 * clamp(4rem, 8vw, 10rem));
    width: clamp(22rem, 46vw, 52rem);
    margin: 0;
    translate: 0 -50%;
  }
}

/* ---------- Rodape ---------- */
.publico .rodape { border-top: 1px solid rgba(255, 255, 255, 0.14); background: var(--carvao); }

.publico .rodape-miolo {
  display: grid;
  gap: 1.75rem;
  max-width: var(--largura);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.publico .rodape-marca { display: grid; gap: 0.5rem; justify-items: start; }
.publico .rodape .marca { font-size: clamp(2rem, 3.4vw, 3.25rem); }
.publico .rodape-marca p { color: rgba(255, 255, 255, 0.72); }
.publico .rodape-nav { gap: 0.75rem 2rem; margin-top: 0; }
.publico .rodape-nav a { font-weight: 600; text-decoration: none; }
.publico .rodape-nav a:hover { text-decoration: underline; text-decoration-color: var(--gema); text-decoration-thickness: 2px; }
.publico .rodape-fino { margin-top: 0; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.14); width: 100%; }

@media (min-width: 48rem) {
  .publico .rodape-miolo { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .publico .rodape-fino { grid-column: 1 / -1; }
}

/* ---------- Entrada ao rolar: cada coisa entra do jeito dela (so com JavaScript e sem "reduzir movimento") ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Titulos e blocos de texto: sobem de tras de uma mascara, como letreiro */
  .surge .publico h2[data-surge] > span { display: block; }
  .surge .publico [data-surge] > h2, .surge .publico h2[data-surge] > span { clip-path: inset(0 0 100% 0); translate: 0 0.4em; }
  .surge .publico [data-surge] > h2 + p { opacity: 0; }

  .surge .publico [data-surge].surgiu > h2, .surge .publico h2[data-surge].surgiu > span {
    clip-path: inset(-0.2em -0.2em -0.2em -0.2em);
    translate: 0 0;
    transition: clip-path 0.8s var(--suave), translate 0.8s var(--suave);
  }

  .surge .publico [data-surge].surgiu > h2 + p { opacity: 1; transition: opacity 0.6s ease 0.25s; }

  /* Comanda: sai da impressora, de cima para baixo */
  .surge .publico .comanda-saida[data-surge] .comanda { clip-path: inset(0 0 100% 0); translate: 0 -2rem; }
  .surge .publico .comanda-saida[data-surge].surgiu .comanda { clip-path: inset(0 0 0 0); translate: 0 0; transition: clip-path 0.9s var(--suave) 0.15s, translate 0.9s var(--suave) 0.15s; }

  /* Trilho: cada etapa acende, uma depois da outra */
  .surge .publico .trilho[data-surge] .trilho-no { background: var(--carvao-claro); color: rgba(255, 255, 255, 0.45); scale: 0.86; }
  .surge .publico .trilho[data-surge] li::after { scale: 1 0; }
  .surge .publico .trilho[data-surge] h3, .surge .publico .trilho[data-surge] p { opacity: 0.35; }

  .surge .publico .trilho[data-surge].surgiu .trilho-no { background: var(--gema); color: var(--carvao); scale: 1; transition: background-color 0.3s ease, color 0.3s ease, scale 0.45s var(--suave); }
  .surge .publico .trilho[data-surge].surgiu li::after { scale: 1 1; transition: scale 0.45s ease-in-out; }
  .surge .publico .trilho[data-surge].surgiu h3, .surge .publico .trilho[data-surge].surgiu p { opacity: 1; transition: opacity 0.4s ease; }

  .surge .publico .trilho.surgiu li:nth-child(1) :is(.trilho-no, h3, p) { transition-delay: 0.1s; }
  .surge .publico .trilho.surgiu li:nth-child(1)::after { transition-delay: 0.25s; }
  .surge .publico .trilho.surgiu li:nth-child(2) :is(.trilho-no, h3, p) { transition-delay: 0.7s; }
  .surge .publico .trilho.surgiu li:nth-child(2)::after { transition-delay: 0.85s; }
  .surge .publico .trilho.surgiu li:nth-child(3) :is(.trilho-no, h3, p) { transition-delay: 1.3s; }
  .surge .publico .trilho.surgiu li:nth-child(3)::after { transition-delay: 1.45s; }
  .surge .publico .trilho.surgiu li:nth-child(4) :is(.trilho-no, h3, p) { transition-delay: 1.9s; }

  /* Degraus: as cenas chegam em ordem */
  .surge .publico .degraus-lista[data-surge] .degrau { opacity: 0; translate: 0 2.5rem; }
  .surge .publico .degraus-lista[data-surge].surgiu .degrau { opacity: 1; translate: 0 0; transition: opacity 0.5s ease, translate 0.7s var(--suave); }
  .surge .publico .degraus-lista.surgiu .degrau:nth-child(2) { transition-delay: 0.12s; }
  .surge .publico .degraus-lista.surgiu .degrau:nth-child(3) { transition-delay: 0.24s; }
  .surge .publico .degraus-lista.surgiu .degrau:nth-child(4) { transition-delay: 0.36s; }

  /* Cardapio: os pontinhos correm do nome ate o preco */
  .surge .publico .cardapio-lista[data-surge] .cardapio-pontos { scale: 0 1; }
  .surge .publico .cardapio-lista[data-surge] .cardapio-custo, .surge .publico .cardapio-lista[data-surge] .cardapio-descricao { opacity: 0; }
  .surge .publico .cardapio-lista[data-surge].surgiu .cardapio-pontos { scale: 1 1; transition: scale 0.7s var(--suave); }
  .surge .publico .cardapio-lista[data-surge].surgiu .cardapio-custo, .surge .publico .cardapio-lista[data-surge].surgiu .cardapio-descricao { opacity: 1; transition: opacity 0.4s ease 0.45s; }
  .surge .publico .cardapio-lista.surgiu li:nth-child(n+3) .cardapio-pontos { transition-delay: 0.1s; }
  .surge .publico .cardapio-lista.surgiu li:nth-child(n+5) .cardapio-pontos { transition-delay: 0.2s; }
  .surge .publico .cardapio-lista.surgiu li:nth-child(n+7) .cardapio-pontos { transition-delay: 0.3s; }
  .surge .publico .cardapio-lista.surgiu li:nth-child(n+9) .cardapio-pontos { transition-delay: 0.4s; }
  .surge .publico .cardapio-lista.surgiu li:nth-child(n+11) .cardapio-pontos { transition-delay: 0.5s; }

  /* Conta: o preco cresce e o selo da promocao cai por cima */
  .surge .publico .conta-valor[data-surge] .conta-preco { clip-path: inset(0 0 100% 0); translate: 0 0.12em; }
  .surge .publico .conta-valor[data-surge] .conta-selo { opacity: 0; scale: 1.6; rotate: -8deg; }
  .surge .publico .conta-valor[data-surge].surgiu .conta-preco { clip-path: inset(-0.1em -0.4em -0.7em -0.1em); translate: 0 0; transition: clip-path 0.8s var(--suave), translate 0.8s var(--suave); }
  .surge .publico .conta-valor[data-surge].surgiu .conta-selo { opacity: 1; scale: 1; rotate: 10deg; transition: opacity 0.2s ease 0.6s, scale 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 0.6s, rotate 0.45s ease 0.6s; }
}

/* ---------- Paginas internas (blog, post, termos, privacidade, erro): so o que o topo novo pede ---------- */
/* Pagina curta (blog sem posts, erro): o rodape escuro fica no pe da tela, sem faixa clara embaixo. */
.publico:not(.inicio) main { min-height: calc(100svh - 19rem); }
.publico .blog { padding-top: clamp(7.5rem, 12vw, 10rem); }
.publico .post { padding-top: clamp(7.5rem, 11vw, 9.5rem); }
.publico .simples { padding-top: clamp(8.5rem, 14vw, 11rem); }
.publico .simples > .simples-codigo { color: var(--pimenta); }
.publico .blog-abre h1 { letter-spacing: -0.05em; }
.publico .blog-cartao { transition: background-color 0.2s ease, color 0.2s ease; }
.publico .blog-categoria { background: var(--gema); }
.publico .post-volta { color: var(--carvao); }
.publico .post-texto a { color: var(--carvao); text-decoration-color: var(--pimenta); text-decoration-thickness: 2px; }
.publico .post-texto li::marker { color: var(--pimenta); }
.publico .post-chamada { background: var(--gema); color: var(--carvao); }
.publico .post-chamada .botao-claro { background: var(--carvao); color: #FFFFFF; }
.publico .post-chamada .botao-claro:hover { background: #000000; }
.publico .post-chamada :focus-visible { outline-color: var(--carvao); }