/* Visual da página. As cores de cada cliente vêm do dados.js (cores.marca e cores.fundo). */

:root {
  --marca: #24506b;
  --fundo: #f6f8f9;
  --verde: #12803f;
  --verde-forte: #0c6a33;
  --texto: #1c2124;
  --suave: #596166;
  --linha: #e1e5e8;
  --tinta: #eaf0f3;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fonte-titulo: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

/* Tons tirados da cor da marca, para tudo combinar com ela. */
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --texto: color-mix(in srgb, var(--marca) 22%, #141414);
    --suave: color-mix(in srgb, var(--marca) 20%, #5a5a5a);
    --linha: color-mix(in srgb, var(--marca) 13%, #e8e8e8);
    --tinta: color-mix(in srgb, var(--marca) 10%, #fff);
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

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

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.45 var(--fonte);
}

#pagina {
  max-width: 560px;
  min-height: 100vh;
  margin: 0 auto;
  background: var(--fundo);
}

/* No computador, a página fica numa coluna no meio. */
@media (min-width: 600px) {
  body { background: var(--tinta); }
  #pagina { box-shadow: 0 0 0 1px var(--linha); }
}

a { color: inherit; }
a:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--fonte-titulo); }

.icone {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Faixa de rascunho e erro ---------- */
.rascunho,
.erro {
  margin: 0;
  padding: 10px 16px;
  background: #fff3c4;
  color: #574000;
  font-size: 0.875rem;
  border-bottom: 1px solid #ecd583;
}

/* ---------- Primeira tela ---------- */
.capa,
.promocao {
  background-color: var(--marca);
  background-image: radial-gradient(circle, rgb(255 255 255 / 0.13) 1.6px, transparent 2px);
  background-size: 18px 18px;
}

.capa {
  height: 156px;
  overflow: hidden;
}

.capa img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topo-texto { padding: 0 20px 22px; }

.logo {
  position: relative;
  display: block;
  width: 88px;
  height: 88px;
  margin-top: -44px;
  border: 4px solid var(--fundo);
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.logo.reserva {
  background: var(--marca);
  color: #fff;
}

h1 {
  margin: 10px 0 4px;
  color: var(--marca);
  font-size: 2.375rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.vende {
  margin: 0 0 14px;
  font-size: 1.0625rem;
}

.info {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  color: var(--suave);
}

.info li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.info b {
  color: var(--texto);
  font-weight: 650;
}

.info .icone {
  margin-top: 1px;
  color: var(--marca);
}

.whats-grande {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  padding: 0 20px;
  border-radius: 16px;
  background: var(--verde);
  color: #fff;
  font: 750 1.1875rem/1.2 var(--fonte-titulo);
  text-decoration: none;
  box-shadow: 0 8px 18px -10px var(--verde);
}

.whats-grande .icone {
  width: 26px;
  height: 26px;
}

.whats-grande:active,
.pedir:active { background: var(--verde-forte); }

.aviso-pedido {
  margin: 10px 0 0;
  color: var(--suave);
  font-size: 0.9375rem;
  text-align: center;
}

.apps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.app {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1.5px solid var(--linha);
  border-radius: 14px;
  background: #fff;
  font-weight: 650;
  text-decoration: none;
}

/* ---------- Atalhos ---------- */
.atalhos {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  overflow-x: auto;
  background: var(--fundo);
  border-block: 1px solid var(--linha);
  scrollbar-width: none;
}

.atalhos::-webkit-scrollbar { display: none; }

.atalhos a {
  flex: none;
  padding: 8px 14px;
  border: 1px solid var(--linha);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* ---------- Cardápio ---------- */
main { padding: 4px 16px 0; }

.como-pedir {
  margin: 16px 0 0;
  color: var(--suave);
  font-size: 0.9375rem;
}

.secao { padding-top: 28px; }

h2 {
  margin: 0 0 4px;
  color: var(--marca);
  font-size: 1.625rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.nota {
  margin: 0;
  color: var(--suave);
  font-size: 0.9375rem;
}

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

.item,
.lista,
.grupos,
.insta {
  border: 1px solid var(--linha);
  border-radius: 20px;
  background: #fff;
}

.item { padding: 14px; }

.item-topo {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: start;
}

.item-foto {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 14px;
  object-fit: cover;
  background: var(--tinta);
}

.item h3 {
  margin: 2px 0 4px;
  font-size: 1.1875rem;
  font-weight: 750;
  line-height: 1.2;
}

.item p {
  margin: 0;
  color: var(--suave);
  font-size: 0.9375rem;
}

.precos,
.lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.precos { margin-top: 12px; }

.precos li,
.lista li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 0;
  border-top: 1px solid var(--linha);
}

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

.lista { padding: 0 16px; }

.itens,
.lista,
.grupos { margin-top: 14px; }

/* Preço que vale para a categoria inteira, escrito uma vez só. */
.preco-categoria {
  margin: 0 0 2px;
  color: var(--marca);
  font: 800 1.25rem/1.25 var(--fonte-titulo);
  font-variant-numeric: tabular-nums;
}

/* Grupos de opções: sabores, mix, adicionais de preço único. */
.grupos { padding: 0 16px; }

.grupo { padding: 14px 0 16px; }
.grupo + .grupo { border-top: 1px solid var(--linha); }

.grupo h3 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 750;
}

.grupo p {
  margin: 2px 0 0;
  color: var(--suave);
  font-size: 0.875rem;
}

.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.opcoes li {
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--tinta);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.lista li:first-child { border-top: 0; }

.tamanho {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.tamanho b { font-weight: 700; }

.tamanho small {
  color: var(--suave);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.valor {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pedir {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px 0 10px;
  border-radius: 999px;
  background: var(--verde);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- Montar o pedido ---------- */
.montar { margin-top: 4px; }

.passo {
  min-width: 0;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border: 0;
  background: linear-gradient(var(--linha), var(--linha)) top / 100% 1px no-repeat;
}

.passo[hidden] { display: none; }

.passo legend {
  float: left;
  width: 100%;
  padding: 0;
  font: 750 1.0625rem/1.2 var(--fonte-titulo);
}

/* Tudo depois do título vai para baixo dele (o título flutua para a linha ficar no lugar certo). */
.passo legend ~ * { clear: both; }

.passo h4 {
  margin: 12px 0 0;
  color: var(--suave);
  font-size: 0.875rem;
  font-weight: 700;
}

.passo-nota {
  margin: 2px 0 0;
  color: var(--suave);
  font-size: 0.875rem;
}

.passo-nota:empty { display: none; }

.tamanhos {
  display: grid;
  gap: 8px;
  padding-top: 10px;
}

.tamanho-opcao,
.chip { position: relative; }

.tamanho-opcao input,
.chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.tamanho-opcao {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1.5px solid var(--linha);
  border-radius: 14px;
}

/* A bolinha de marcar fica à direita do preço. */
.tamanho-opcao::after {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  border: 2px solid var(--linha);
  border-radius: 50%;
  box-sizing: border-box;
}

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

.tamanho-opcao:has(input:checked)::after { border: 7px solid var(--marca); }
.tamanho-opcao:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 8px;
}

.chip span {
  display: block;
  padding: 9px 13px;
  border: 1.5px solid var(--linha);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9375rem;
  line-height: 1.25;
}

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

.chip input:checked + span::before { content: "✓ "; }
.chip input:disabled + span { opacity: 0.4; }
.chip input:disabled { cursor: not-allowed; }
.chip input:focus-visible + span { outline: 3px solid var(--marca); outline-offset: 2px; }

.montar-falta {
  margin: 16px 0 8px;
  color: var(--suave);
  font-size: 0.9375rem;
  text-align: center;
}

.montar-falta:empty { display: none; }
.montar-falta.chamar { color: #9a2f12; font-weight: 700; }
.montar-falta:empty + .montar-enviar { margin-top: 16px; }

.montar-enviar[aria-disabled="true"] {
  background: #8b938e;
  box-shadow: none;
}

/* ---------- Promoção ---------- */
.promocao {
  margin-top: 32px;
  padding: 24px 20px 20px;
  border-radius: 24px;
  color: #fff;
}

.promocao h2 { color: #fff; }

.promocao p { margin: 0; }

.promo-preco {
  margin: 10px 0 16px !important;
  font: 800 2.5rem/1 var(--fonte-titulo);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.promo-aviso {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--marca);
  font-weight: 700;
  line-height: 1.3;
}

.promocao .whats-grande { margin-top: 14px; }
.promocao a:focus-visible { outline-color: #fff; }

/* ---------- Como chegar e Instagram ---------- */
.fachada {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 14px 0;
  border-radius: 20px;
  object-fit: cover;
  background: var(--tinta);
}

.fachada.reserva {
  color: var(--suave);
  font: 600 1rem var(--fonte);
}

.endereco {
  margin: 14px 0;
  font-size: 1.0625rem;
}

.fachada + .endereco { margin-top: 0; }
.endereco span { color: var(--suave); }

.botao-mapa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  border: 2px solid var(--marca);
  border-radius: 16px;
  background: #fff;
  color: var(--marca);
  font: 750 1.0625rem/1.2 var(--fonte-titulo);
  text-decoration: none;
}

.insta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  text-decoration: none;
}

.insta .icone {
  width: 34px;
  height: 34px;
  color: var(--marca);
}

.insta span {
  display: flex;
  flex-direction: column;
  color: var(--suave);
}

.insta b {
  color: var(--marca);
  font-size: 1.0625rem;
}

/* Espaço reservado de foto: a inicial do nome sobre um tom da marca.
   Fica no fim para valer por cima do "display: block" das fotos. */
.reserva {
  display: grid;
  place-items: center;
  background: var(--tinta);
  color: var(--marca);
  font: 800 2.25rem/1 var(--fonte-titulo);
}

/* ---------- Rodapé ---------- */
.rodape {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 32px 20px 40px;
  color: var(--suave);
  font-size: 0.875rem;
  text-align: center;
}