/* Forno do Frade - pagina de aterrissagem, v2 ("a boca do forno").
   Tokens: mesmos nomes e valores do docs/DESIGN.md do forno-do-frade-gestao, mais os do site (docs/DESIGN.md).
   Hex so neste bloco de tokens. */

@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url("../fonts/baloo-2-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  --fundo: #FDF8EB;
  --superficie: #FAF3E1;
  --cartao: #FFFFFF;
  --texto: #382518;
  --apoio: #755C4C;
  --linha: #ECDDCB;
  --linha-forte: #8F796B;
  --marca: #A7441D;
  --sobre-marca: #FFFFFF;
  --marca-forte: #8A3814;
  --link: #A7441D;
  --topo: #5A2D1B;
  --sobre-topo: #FDF8EB;
  --sobre-topo-apoio: #F7C18A;
  --chama: #F5B64C;
  --sobre-chama: #382518;
  --chama-forte: #F7C18A;
  --foco: #382518;
  --foco-topo: #F5B64C;
  --ok: #2E6B3F;
  --ok-suave: #E2EEDF;
  --esqueleto: #E8D9C2;
  --esqueleto-faixa: #E2D0B5;
  --alerta: #7A4E0E;
  --alerta-suave: #FBE7C4;
  --placa-logo: #FDF8EB;
  --contorno: #382518;
  --forno-brasa: #F5B64C;

  --arte-traco: #382518;
  --arte-borda: #E4A064;
  --arte-tostado: #B77824;
  --arte-queijo: #F5B64C;
  --arte-brilho: #FDF8EB;
  --arte-habito: #5A2D1B;
  --arte-pele: #F7C18A;

  --mapa-fundo: #FDF8EB;
  --mapa-rua: #E8D7C0;
  --mapa-via: #CDB59A;
  --mapa-agua: #C4D6D1;
  --mapa-rodovia: #F5B64C;
  --mapa-rodovia-borda: #382518;
  --mapa-avenida: #A7441D;

  --f-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
  --f-texto: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: 1.375rem;
  --t-xl: 1.625rem;
  --t-valor: 2rem;
  --t-hero: clamp(2.5rem, 3vw + 1.5rem, 3.75rem);
  --t-secao: clamp(1.875rem, 3vw + 1rem, 3rem);
  --t-fecho: clamp(2.25rem, 5vw + 1rem, 4.5rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;

  --r-campo: 12px;
  --r-cartao: 16px;
  --r-pilula: 999px;
  --r-arco: 999px 999px 12px 12px;
  --r-foco: 4px;

  --alvo: 48px;
  --alvo-acao: 56px;
  --controle-sm: 40px;
  --controle-md: 44px;
  --barra-h: 64px;
  --pagina-x: var(--s-4);
  --conteudo-max: 72rem;
  --medida: 38rem;

  --z-barra: 20;
  --z-pular: 30;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-cor: 150ms;
  --dur-toque: 160ms;
  --dur-barra: 240ms;
  --dur-barra-sai: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --fundo: #241710;
    --cartao: #382518;
    --superficie: #43301F;
    --texto: #FDF8EB;
    --apoio: #CDC2BB;
    --linha: #4D3828;
    --linha-forte: #B4A499;
    --marca: #E0713F;
    --sobre-marca: #241710;
    --marca-forte: #EC8A5E;
    --link: #EC8A5E;
    --topo: #382518;
    --sobre-topo: #FDF8EB;
    --sobre-topo-apoio: #F5B64C;
    --chama: #F5B64C;
    --sobre-chama: #382518;
    --chama-forte: #F7C18A;
    --foco: #F5B64C;
    --foco-topo: #F5B64C;
    --ok: #8FCB9B;
    --ok-suave: #1F3324;
    --esqueleto: #43301F;
    --esqueleto-faixa: #5A4230;
    --alerta: #F5B64C;
    --alerta-suave: #4A3315;
    --placa-logo: #FDF8EB;
    --contorno: #120B07;
  --forno-brasa: #E0713F;

    --mapa-fundo: #2B1C13;
    --mapa-rua: #4A3526;
    --mapa-via: #6E5642;
    --mapa-agua: #2C4440;
    --mapa-rodovia: #F5B64C;
    --mapa-rodovia-borda: #120B07;
    --mapa-avenida: #E0713F;
  }
}

@media (min-width: 768px) {
  :root {
    --pagina-x: var(--s-6);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-h) + var(--s-3));
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3 {
  font-family: var(--f-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

::selection {
  background: var(--chama);
  color: var(--sobre-chama);
}

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: var(--r-foco);
}

.faixa-abertura :focus-visible,
.barra :focus-visible,
.fecho :focus-visible,
.bloco-quem :focus-visible,
.bloco-porque :focus-visible {
  outline-color: var(--foco-topo);
}

.icone {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

.icone-sm {
  width: 20px;
  height: 20px;
}

.so-leitor {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pular {
  position: absolute;
  left: var(--s-4);
  top: var(--s-2);
  z-index: var(--z-pular);
  padding: var(--s-3) var(--s-4);
  background: var(--chama);
  color: var(--sobre-chama);
  font-weight: 700;
  border-radius: var(--r-campo);
  transform: translateY(-200%);
}

.pular:focus {
  transform: none;
}

.largura {
  width: 100%;
  max-width: var(--conteudo-max);
  margin-inline: auto;
  padding-inline: max(var(--pagina-x), env(safe-area-inset-left)) max(var(--pagina-x), env(safe-area-inset-right));
}

/* Botoes. Principal: --marca. Na faixa marrom (abertura e barra) a acao principal e a chama do forno. */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--alvo-acao);
  padding: 0 var(--s-5);
  border-radius: var(--r-campo);
  border: 2px solid transparent;
  font-family: var(--f-texto);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-toque) var(--ease-out), background-color var(--dur-cor) ease, border-color var(--dur-cor) ease;
}

.botao:active {
  transform: scale(0.97);
}

.botao-sm {
  min-height: var(--controle-md);
  padding: 0 var(--s-4);
  font-size: var(--t-base);
}

.botao-principal {
  background: var(--marca);
  color: var(--sobre-marca);
}

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

.botao-faixa {
  background: var(--chama);
  color: var(--sobre-chama);
}

.botao-faixa-secundario {
  background: transparent;
  color: var(--sobre-topo);
  border-color: var(--sobre-topo-apoio);
}

@media (hover: hover) and (pointer: fine) {
  .botao-principal:hover {
    background: var(--marca-forte);
  }

  .botao-secundario:hover {
    border-color: var(--texto);
  }

  .botao-faixa:hover {
    background: var(--chama-forte);
  }

  .botao-faixa-secundario:hover {
    border-color: var(--sobre-topo);
  }

  .topo-insta:hover {
    color: var(--sobre-topo-apoio);
  }

  a:hover {
    text-decoration-thickness: 3px;
  }
}

/* Primeira dobra: a marca faz parte da faixa marrom (o habito do frade), sem barra separada */
.faixa-abertura {
  background: var(--topo);
  color: var(--sobre-topo);
}

.topo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding-top: max(var(--s-4), env(safe-area-inset-top));
}

.marca-nome {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: var(--alvo);
  color: var(--sobre-topo);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  line-height: 1;
}

.marca-nome img {
  width: 48px;
  height: 48px;
}

.topo-insta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--alvo);
  height: var(--alvo);
  margin-right: calc(var(--s-3) * -1);
  color: var(--sobre-topo);
  border-radius: var(--r-campo);
}

.abertura {
  padding-top: var(--s-6);
}

.abertura-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.abertura-texto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  justify-items: start;
  align-content: center;
}

.abertura h1 {
  font-size: var(--t-hero);
  max-width: 14ch;
}

.abertura-frase {
  font-size: var(--t-md);
  color: var(--sobre-topo-apoio);
  max-width: 32ch;
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--controle-sm);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border-radius: var(--r-pilula);
  border: 2px solid transparent;
  background: var(--cartao);
  color: var(--texto);
  font-weight: 700;
  line-height: 1.2;
}

.selo[data-estado="fechado"] {
  background: var(--alerta-suave);
  color: var(--alerta);
}

.selo[data-estado="aberto"] {
  border-color: var(--ok);
  background: var(--ok-suave);
  color: var(--ok);
}

/* na faixa marrom a borda verde some (1,8:1); a pilula ja se separa pelo fundo */
.faixa-abertura .selo[data-estado="aberto"] {
  border-color: var(--ok-suave);
}

.acoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.75rem), 1fr));
  gap: var(--s-3);
  width: 100%;
  max-width: 26rem;
  margin-top: var(--s-2);
}

.acoes .botao {
  padding-inline: var(--s-3);
}

/* o frade fica de pe no chao da faixa: a base do arco e o fim da primeira dobra */
.abertura-frade {
  align-self: end;
  width: min(100%, 22rem);
}

.abertura-frade img {
  width: 100%;
  height: auto;
}

/* uma coluna: o frade no arco e unidade isolada e fica no eixo da pagina */
@media (max-width: 767px) {
  .abertura-frade {
    justify-self: center;
  }
}

@media (min-width: 768px) {
  .abertura {
    padding-top: var(--s-5);
  }

  .abertura-grade {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--s-6);
  }

  .abertura-texto {
    padding-bottom: var(--s-8);
  }

  .abertura-frade {
    justify-self: end;
    width: 100%;
    max-width: 34rem;
  }
}

/* celular deitado: titulo menor e o frade ao lado, para o "Pedir agora" caber sem rolar */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 560px) {
  .topo-linha {
    padding-top: var(--s-2);
  }

  .abertura {
    padding-top: var(--s-2);
  }

  .abertura-grade {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--s-5);
  }

  .abertura h1 {
    font-size: clamp(1.75rem, 3.5vw + 0.5rem, 2.5rem);
    max-width: 18ch;
  }

  .abertura-texto {
    gap: var(--s-3);
    padding-bottom: var(--s-5);
  }

  .abertura-frade {
    max-width: 19rem;
  }
}

/* Header compacto preso no topo, ligado pelo site.js quando o cardapio chega ao topo.
   Entra de cima (transform + opacity, 240 ms, ease-out); sai mais rapido (160 ms). Sem JS fica escondido. */
.barra {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-barra);
  padding-top: env(safe-area-inset-top);
  background: var(--topo);
  color: var(--sobre-topo);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-100%);
  transition: transform var(--dur-barra-sai) var(--ease-out), opacity var(--dur-barra-sai) var(--ease-out), visibility 0s linear var(--dur-barra-sai);
}

.barra[data-visivel] {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: transform var(--dur-barra) var(--ease-out), opacity var(--dur-barra) var(--ease-out), visibility 0s;
}

.barra-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: var(--barra-h);
}

.barra-marca {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--alvo);
  min-width: var(--alvo);
  color: var(--sobre-topo);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-lg);
  line-height: 1;
  white-space: nowrap;
}

.barra-marca img {
  width: 36px;
  height: 36px;
}

/* o conteudo chega logo depois da faixa: rosto, nome e botao em cascata curta */
.barra-marca img,
.barra-nome,
.barra-pedir {
  opacity: 0;
  transform: translateY(-6px);
  transition: transform var(--dur-barra-sai) var(--ease-out), opacity var(--dur-barra-sai) var(--ease-out);
}

.barra[data-visivel] .barra-marca img,
.barra[data-visivel] .barra-nome,
.barra[data-visivel] .barra-pedir {
  opacity: 1;
  transform: none;
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out);
}

.barra[data-visivel] .barra-pedir {
  transition: transform 200ms var(--ease-out), opacity 200ms var(--ease-out), background-color var(--dur-cor) ease;
}

.barra[data-visivel] .barra-nome {
  transition-delay: 30ms;
}

.barra[data-visivel] .barra-pedir {
  transition-delay: 60ms;
}

.barra[data-visivel] .barra-pedir:active {
  transform: scale(0.97);
  transition-delay: 0ms;
  transition-duration: var(--dur-toque);
}

@media (max-width: 419px) {
  .barra-marca {
    font-size: var(--t-md);
  }

  .barra-linha {
    gap: var(--s-2);
  }
}

@media (max-width: 359px) {
  .barra-nome {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Secoes */
.secao {
  padding-block: var(--s-7);
}

.secao h2 {
  font-size: var(--t-secao);
}

.secao-intro {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
  max-width: var(--medida);
}

.secao-intro p {
  color: var(--apoio);
  font-size: var(--t-md);
}

@media (min-width: 768px) {
  .secao {
    padding-block: var(--s-8);
  }

  .secao-intro {
    margin-bottom: var(--s-7);
  }
}

/* Sobre: tres blocos de cor (terracota, marrom e bege), sem foto */
.sobre .secao-intro {
  max-width: 44rem;
}

.sobre .sobre-abre {
  color: var(--texto);
  font-size: var(--t-lg);
  line-height: 1.4;
}

.sobre-blocos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

.bloco {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-cartao);
}

.bloco h3 {
  font-size: var(--t-xl);
}

.bloco p {
  font-size: var(--t-md);
  max-width: 40ch;
}

.bloco-quem {
  grid-template-columns: minmax(0, 1fr) auto;
  background: var(--marca);
  color: var(--sobre-marca);
}

.bloco-quem > :not(.bloco-rosto) {
  grid-column: 1;
}

.bloco-rosto {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  width: 72px;
  height: auto;
}

.bloco-porque {
  background: var(--topo);
  color: var(--sobre-topo);
}

.bloco-porque p {
  color: var(--sobre-topo-apoio);
}

.bloco-como {
  background: var(--superficie);
  border: 2px solid var(--linha);
}

.bloco-forno {
  width: 9rem;
  height: auto;
  margin-bottom: var(--s-2);
  color: var(--texto);
  fill: currentColor;
}

.forno-brasa {
  fill: var(--forno-brasa);
}

.sobre-nome {
  margin-top: var(--s-6);
  max-width: 44ch;
  color: var(--apoio);
  font-size: var(--t-md);
}

@media (min-width: 768px) {
  .sobre-blocos {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
      "quem como"
      "porque como";
    gap: var(--s-5);
  }

  .bloco {
    padding: var(--s-6);
  }

  .bloco-quem {
    grid-area: quem;
  }

  .bloco-porque {
    grid-area: porque;
  }

  .bloco-como {
    grid-area: como;
    align-content: end;
  }

  .bloco-rosto {
    width: 88px;
  }

  .bloco-forno {
    width: min(100%, 17rem);
    margin-bottom: var(--s-5);
  }
}

/* Careca do Frade: a pizza individual em folha; vista de cima, a borda e a coroa de cabelo do frade.
   Desenho proprio no estilo da marca (contorno grosso, cores da pizza do logo); igual nos dois temas. */
.careca {
  background: var(--marca);
  color: var(--sobre-marca);
}

.careca-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
}

.careca-arte {
  width: min(100%, 22rem);
}

.careca-svg {
  width: 100%;
  height: auto;
}

.cc-sombra {
  fill: var(--arte-traco);
  transform: translateY(8px);
}

.cc-habito,
.cc-borda {
  stroke: var(--arte-traco);
  stroke-width: 6;
  stroke-linejoin: round;
}

.cc-habito {
  fill: var(--arte-habito);
}

.cc-cabelo {
  fill: var(--arte-traco);
}

.cc-pele {
  fill: var(--arte-pele);
}

.cc-borda {
  fill: var(--arte-borda);
}

.cc-queijo {
  fill: var(--arte-queijo);
}

/* a beirada ondulada: no frade e o cabelo entrando na careca, na pizza e a borda entrando no queijo */
.cc-onda {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-dasharray: 0 12;
}

.cc-onda-cabelo {
  stroke: var(--arte-traco);
}

.cc-onda-borda {
  stroke: var(--arte-borda);
}

.cc-tostado {
  fill: var(--arte-tostado);
}

.cc-brilho {
  fill: var(--arte-brilho);
  opacity: 0.6;
}

.cc-igual {
  fill: var(--sobre-marca);
}

.careca-legendas {
  display: grid;
  grid-template-columns: 44fr 56fr;
  margin-top: var(--s-3);
  font-size: var(--t-sm);
  font-weight: 700;
  text-align: center;
}

.careca-texto {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  max-width: 34rem;
}

.careca-texto h2 {
  font-size: var(--t-secao);
}

.careca-texto p {
  font-size: var(--t-md);
}

.careca-texto .careca-abre {
  font-size: var(--t-lg);
  font-weight: 700;
  line-height: 1.35;
}

.careca-preco {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
  padding: var(--s-2) var(--s-4) var(--s-2) var(--s-3);
  border-radius: var(--r-pilula);
  background: var(--sobre-marca);
  color: var(--marca);
  font-weight: 700;
}

/* uma coluna: a secao abre com o desenho centrado, entao titulo e frase de abertura vem no mesmo eixo, e a pilula
   tambem; o texto corrido fica a esquerda */
@media (max-width: 767px) {
  .careca-arte,
  .careca-texto {
    justify-self: center;
  }

  .careca-texto h2,
  .careca-texto .careca-abre,
  .careca-preco {
    justify-self: center;
    text-align: center;
    text-wrap: balance;
  }
}

@media (min-width: 768px) {
  .careca-grade {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-7);
  }

  .careca-arte {
    width: 100%;
    max-width: 30rem;
    justify-self: center;
  }
}

/* Cardapio */
.cardapio {
  background: var(--superficie);
}

.cardapio-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.cardapio-lado {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  justify-items: start;
}

.cardapio-intro {
  color: var(--apoio);
  font-size: var(--t-md);
  max-width: 34ch;
}

/* a pizza da foto sai do forno da marca: disco com o contorno e a forma de baixo, como a pizza na mao do frade */
.pizza-forno {
  display: grid;
  justify-items: center;
  width: min(100%, 15rem);
  margin-top: var(--s-3);
  padding-bottom: var(--s-3);
}

.pizza-forno-arco {
  width: 100%;
  height: auto;
  color: var(--texto);
  fill: currentColor;
}

.pizza-disco {
  display: block;
  width: 56%;
  margin-top: -24%;
  border-radius: 50%;
  border: 4px solid var(--contorno);
  overflow: hidden;
  background: var(--esqueleto-faixa);
  box-shadow: 0 var(--s-2) 0 0 var(--marca-forte), 0 var(--s-2) 0 4px var(--contorno);
}

.pizza-disco img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  transform: scale(1.22);
  transform-origin: 50% 62%;
}

/* tres tamanhos, desenhados na proporcao: 35 cm, 25 cm e a folha da Careca */
.tamanhos {
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 2px solid var(--linha);
}

.tamanhos-lista {
  display: grid;
  gap: var(--s-4);
}

.tamanho {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  column-gap: var(--s-4);
  align-items: center;
}

.tamanho-arte {
  grid-row: 1 / span 2;
  width: 4rem;
  height: 4rem;
}

.tamanho-arte .cc-borda {
  stroke-width: 3;
}

.tamanho-nome {
  align-self: end;
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.3;
}

.tamanho-desc {
  align-self: start;
  color: var(--apoio);
}

.tamanhos-nota {
  margin-top: var(--s-5);
  color: var(--texto);
  font-weight: 700;
}

/* uma coluna: o disco da pizza fica no eixo da pagina */
@media (max-width: 767px) {
  .pizza-forno {
    justify-self: center;
  }
}

/* celular: os tres tamanhos viram medalhoes centrados (desenho em cima, nome e descricao embaixo), com o titulo e a
   nota no mesmo eixo */
@media (max-width: 599px) {
  .tamanhos {
    text-align: center;
  }

  .tamanhos-lista {
    gap: var(--s-5);
  }

  .tamanho {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    row-gap: var(--s-1);
  }

  .tamanho-arte {
    grid-row: auto;
    margin-bottom: var(--s-2);
  }

  .tamanho-desc,
  .tamanhos-nota {
    text-wrap: balance;
  }
}

@media (min-width: 600px) {
  .tamanhos-lista {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-5);
    align-items: start;
  }

  .tamanho {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-1);
  }

  .tamanho-arte {
    grid-row: auto;
    margin-bottom: var(--s-2);
  }
}

/* reserva a altura medida da lista pronta, para o resto da pagina nao saltar quando o cardapio chega */
.cardapio-lista {
  min-height: 115rem;
}

.cardapio-lista.pronto {
  min-height: 0;
}

.cardapio-lista h3 {
  font-size: var(--t-lg);
  line-height: 1.15;
  margin-bottom: var(--s-4);
}

.pizzas {
  display: grid;
  gap: var(--s-5);
}

.item-topo {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
}

.item-nome {
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.3;
}

.item-topo::after {
  content: "";
  order: 2;
  flex: 1;
  min-width: var(--s-4);
  border-bottom: 2px dotted var(--linha-forte);
  transform: translateY(-0.3em);
}

.item-preco {
  order: 3;
  font-weight: 700;
  font-size: var(--t-md);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.item-desc {
  margin-top: var(--s-1);
  color: var(--apoio);
  max-width: 34ch;
}

.etiqueta {
  display: inline-block;
  padding: 0 var(--s-2);
  border-radius: var(--r-pilula);
  background: var(--chama);
  color: var(--sobre-chama);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.6;
}

.item-nome .etiqueta {
  display: block;
  width: fit-content;
  margin-top: var(--s-1);
}

.dois-sabores {
  display: grid;
  gap: var(--s-1);
  margin-block: var(--s-6);
  padding: var(--s-5);
  border-radius: var(--r-cartao);
  background: var(--cartao);
  border: 2px solid var(--linha);
}

.dois-sabores .item-desc {
  margin-top: 0;
}

.dois-sabores .item-topo {
  align-items: last baseline;
}

.dois-sabores .item-preco {
  white-space: normal;
  text-align: right;
}

.item-a-partir {
  display: block;
  font-size: var(--t-sm);
  font-weight: 400;
  color: var(--apoio);
  text-align: right;
}

.bebidas {
  display: grid;
  gap: var(--s-3) var(--s-6);
}

.bebidas .item-nome,
.bebidas .item-preco {
  font-size: var(--t-base);
}

.cardapio-rodape {
  margin-top: var(--s-6);
  color: var(--apoio);
}

/* link no meio do texto: inline, para nao esticar a linha; o alvo de 48 px vem de uma area invisivel por cima */
.cardapio-rodape a,
.link-no-texto {
  position: relative;
  display: inline;
  font-weight: 700;
  white-space: nowrap;
}

.cardapio-rodape a::after,
.link-no-texto::after {
  content: "";
  position: absolute;
  inset: calc((var(--alvo) - 100%) / -2) 0;
}

.cardapio-rodape a .icone,
.link-no-texto .icone {
  display: inline-block;
  margin-left: var(--s-1);
  vertical-align: middle;
}

.carregando {
  display: grid;
  gap: var(--s-5);
}

.carregando span {
  display: block;
  height: 3.5rem;
  border-radius: var(--r-campo);
  background: var(--esqueleto-faixa);
}

.aviso {
  padding: var(--s-5);
  border-radius: var(--r-cartao);
  background: var(--cartao);
  border: 2px solid var(--linha-forte);
}

.aviso p + p {
  margin-top: var(--s-2);
}

.aviso .botao {
  margin-top: var(--s-4);
  white-space: normal;
  text-align: left;
}

@media (max-width: 399px) {
  .dois-sabores,
  .jeito,
  .bloco {
    padding: var(--s-4);
  }
}

@media (min-width: 600px) {
  .cardapio-lista:not(.pronto) {
    min-height: 93rem;
  }
}

@media (min-width: 1024px) {
  .cardapio-grade {
    grid-template-columns: 19rem minmax(0, 1fr);
    gap: var(--s-8);
    align-items: start;
  }

  .cardapio-lado {
    position: sticky;
    top: calc(var(--barra-h) + var(--s-6));
  }

  .pizza-forno {
    width: 100%;
    margin-top: var(--s-5);
  }

  .pizzas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6) var(--s-7);
  }

  .bebidas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--s-7);
  }

  .cardapio-lista:not(.pronto) {
    min-height: 72rem;
  }
}

/* Como pedir: os jeitos lado a lado, mesma altura e mesmo peso; a acao fica no pe de cada um */
.jeitos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
}

.jeito {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-5);
  border-radius: var(--r-cartao);
  background: var(--cartao);
  border: 2px solid var(--linha);
}

.jeito[hidden] {
  display: none;
}

.jeito-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alvo-acao);
  height: var(--alvo-acao);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--marca);
}

.jeito h3 {
  font-size: var(--t-xl);
  margin-top: var(--s-2);
}

.jeito p {
  color: var(--apoio);
  max-width: 36ch;
}

.jeito .jeito-extra {
  color: var(--texto);
  font-weight: 700;
}

.jeito .botao {
  margin-top: auto;
}

.jeito p:last-of-type {
  margin-bottom: var(--s-3);
}

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

.jeito-tel {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  color: var(--texto);
}

/* celular: botao sozinho na linha ocupa a largura toda (o mesmo padrao em todos) */
@media (max-width: 599px) {
  .jeito .botao,
  .onde-info > .botao,
  .aviso .botao {
    align-self: stretch;
    justify-self: stretch;
    width: 100%;
  }
}

@media (min-width: 768px) {
  .jeitos {
    gap: var(--s-5);
  }

  .jeito {
    padding: var(--s-6);
  }
}

@media (min-width: 1024px) {
  .jeitos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Onde estamos: mapa ilustrado (geometria do OpenStreetMap, desenhada no estilo da marca) e o horario */
.onde {
  background: var(--superficie);
}

.onde-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
}

.mapa {
  display: grid;
  gap: var(--s-3);
}

.mapa-caixa {
  position: relative;
  aspect-ratio: 600 / 640;
  border-radius: var(--r-cartao);
  border: 2px solid var(--linha);
  overflow: hidden;
  background: var(--mapa-fundo);
  container-type: inline-size;
}

.mapa-svg {
  width: 100%;
  height: 100%;
}

.m-fundo {
  fill: var(--mapa-fundo);
}

.m-agua {
  fill: var(--mapa-agua);
}

.m-rua,
.m-via,
.m-rodovia,
.m-rodovia-borda,
.m-avenida {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.m-rua {
  stroke: var(--mapa-rua);
  stroke-width: 3;
}

.m-via {
  stroke: var(--mapa-via);
  stroke-width: 5;
}

.m-rodovia-borda {
  stroke: var(--mapa-rodovia-borda);
  stroke-width: 12;
}

.m-rodovia {
  stroke: var(--mapa-rodovia);
  stroke-width: 6;
}

.m-avenida {
  stroke: var(--mapa-avenida);
  stroke-width: 8;
}

.m-ponto-halo {
  fill: var(--mapa-avenida);
  opacity: 0.22;
}

.m-ponto-disco {
  fill: var(--placa-logo);
  stroke: var(--contorno);
  stroke-width: 4;
}

.m-ponto-forno {
  fill: var(--sobre-chama);
}

/* rotulos em HTML sobre o desenho: ficam legiveis em qualquer largura */
.mapa-rotulo {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-campo);
  font-size: clamp(0.75rem, 2.4cqi + 0.25rem, 1rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

/* acima e a esquerda do ponto, sem transform e fora da caixa da avenida (o axe nao mede rotulo que corta outro desenho) */
.rotulo-orla {
  right: calc(51.3% + 2rem);
  bottom: calc(69.7% + 0.75rem);
  white-space: normal;
  max-width: 9.5em;
  text-align: right;
  padding: var(--s-2) var(--s-3);
  background: var(--texto);
  color: var(--fundo);
  font-family: var(--f-display);
  font-weight: 800;
  font-size: clamp(0.875rem, 2.8cqi + 0.25rem, 1.25rem);
}

.rotulo-avenida {
  left: 3%;
  bottom: 3%;
  gap: var(--s-2);
  color: var(--texto);
  background: var(--mapa-fundo);
}

/* legenda: o traco terracota da avenida */
.rotulo-avenida::before {
  content: "";
  width: 1.25rem;
  height: 6px;
  border-radius: var(--r-pilula);
  background: var(--mapa-avenida);
}

.rotulo-br {
  left: 49%;
  top: 60%;
  background: var(--mapa-rodovia);
  color: var(--sobre-chama);
  border: 2px solid var(--mapa-rodovia-borda);
}

.rotulo-cg {
  right: 3%;
  top: 3%;
  color: var(--texto);
  background: var(--mapa-fundo);
}

.mapa figcaption {
  color: var(--apoio);
  font-size: var(--t-sm);
}

.mapa-fonte,
.sem-quebra {
  white-space: nowrap;
}

.mapa figcaption a {
  display: inline-block;
  min-height: 24px;
  padding-block: 2px;
}

.onde-info {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  justify-items: start;
}

.endereco {
  display: flex;
  gap: var(--s-3);
  font-size: var(--t-md);
}

/* o pino fica na altura da linha do nome (t-xl, entrelinha 1.2), nao da linha do endereco */
.endereco .icone {
  height: calc(var(--t-xl) * 1.2);
  color: var(--marca);
}

.endereco strong,
.endereco span span {
  display: block;
}

.endereco strong {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-xl);
  line-height: 1.2;
}

.horario {
  container-type: inline-size;
  display: grid;
  gap: var(--s-3);
  width: 100%;
  max-width: 26rem;
  margin-top: var(--s-3);
  padding-top: var(--s-5);
  border-top: 2px solid var(--linha);
}

.horario h3 {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.5;
}

.horario-faixa {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: var(--t-valor);
  line-height: 1.1;
}

.semana {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--s-1);
}

.dia {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: var(--alvo);
  padding: var(--s-1) 0;
  border-radius: var(--r-campo);
  border: 2px solid transparent;
  background: var(--cartao);
  font-size: var(--t-sm);
  font-weight: 700;
  line-height: 1.2;
}

.dia[data-fechado] {
  background: transparent;
  border-style: dashed;
  border-color: var(--linha-forte);
  color: var(--apoio);
}

.dia[data-hoje] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
}

.dia[data-hoje][data-fechado] {
  background: transparent;
  border-style: solid;
  color: var(--texto);
}

.dia::after {
  content: "\00a0";
  font-size: 0.75rem;
  font-weight: 400;
}

.dia[data-hoje]::after {
  content: "hoje";
}

.horario-nota {
  color: var(--apoio);
}

/* cada frase inteira numa linha quando nao cabem as duas (a frase so quebra por dentro se nao couber sozinha) */
.horario-nota span {
  display: inline-block;
}

/* coluna estreita ou fonte grande: a semana quebra em 4 + 3, com a segunda ocupando duas casas */
@container (max-width: 17.5rem) {
  .semana {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .dia[data-fechado] {
    grid-column: span 2;
  }
}

/* uma coluna: o horario com a semana e unidade isolada e fica no eixo da pagina */
@media (max-width: 767px) {
  .horario {
    justify-self: center;
    justify-items: center;
    text-align: center;
  }

  .horario h3 {
    justify-content: center;
  }

  .semana {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .onde-grade {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--s-7);
    align-items: center;
  }
}

/* Fecho: o frade de corpo inteiro dentro do arco do forno, na faixa marrom */
.fecho {
  background: var(--topo);
  color: var(--sobre-topo);
}

.fecho-grade {
  display: grid;
  gap: var(--s-6);
  align-items: end;
  padding-top: var(--s-8);
}

.fecho-arco {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 11rem;
  aspect-ratio: 11 / 12;
  padding-top: var(--s-5);
  border-radius: var(--r-arco);
  background: var(--placa-logo);
  overflow: hidden;
}

.fecho-arco img {
  width: 92%;
  height: auto;
}

.fecho-insta h2 {
  font-size: var(--t-fecho);
  line-height: 1;
  max-width: 12ch;
}

.fecho-insta p {
  max-width: var(--medida);
  margin-top: var(--s-4);
  color: var(--sobre-topo-apoio);
  font-size: var(--t-md);
}

.fecho-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--alvo);
  margin-top: var(--s-3);
  color: var(--sobre-topo);
  font-weight: 700;
  font-size: var(--t-lg);
}

/* uma coluna: arco, frase, texto e Instagram formam a composicao do fecho, no eixo da pagina; fatos e rodape
   (dados) ficam a esquerda */
@media (max-width: 767px) {
  .fecho-arco {
    justify-self: center;
  }

  .fecho-insta {
    text-align: center;
  }

  .fecho-insta h2 {
    max-width: none;
  }

  .fecho-insta p {
    margin-inline: auto;
    text-wrap: balance;
  }
}

@media (max-width: 399px) {
  .fecho-link {
    font-size: var(--t-md);
  }

  .jeito .botao {
    white-space: normal;
  }
}

.fecho-fatos {
  display: grid;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-block: var(--s-5);
  border-top: 1px solid var(--sobre-topo-apoio);
}

.fecho-fatos dt {
  color: var(--sobre-topo-apoio);
  font-size: var(--t-sm);
  font-weight: 700;
}

.fecho-fatos dd {
  margin-top: var(--s-1);
}

.fecho-fatos a {
  color: var(--sobre-topo);
  font-weight: 700;
}

.fecho-fatos a:not(.link-no-texto) {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  min-height: var(--alvo);
  vertical-align: middle;
}

.fecho-fatos dd {
  text-wrap: pretty;
}

.rodape {
  padding-block: var(--s-5) max(var(--s-6), env(safe-area-inset-bottom));
  border-top: 1px solid var(--sobre-topo-apoio);
  color: var(--sobre-topo-apoio);
  font-size: var(--t-sm);
}

.rodape p + p {
  margin-top: var(--s-1);
}

@media (min-width: 768px) {
  .fecho-grade {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-7);
    padding-top: var(--s-9);
  }

  .fecho-arco {
    width: 15rem;
  }

  .fecho-fatos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-5) var(--s-6);
  }
}

@media (min-width: 1024px) {
  .fecho-fatos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 404 */
.perdido {
  display: grid;
  gap: var(--s-4);
  justify-items: start;
  padding-block: var(--s-7) var(--s-8);
}

.perdido h1 {
  font-size: var(--t-secao);
  max-width: 18ch;
}

.perdido p {
  color: var(--apoio);
  font-size: var(--t-md);
  max-width: 34ch;
}

.perdido .placa {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 10rem;
  aspect-ratio: 11 / 12;
  padding-top: var(--s-4);
  border-radius: var(--r-arco);
  background: var(--superficie);
  overflow: hidden;
}

.perdido .placa img {
  width: 92%;
  height: auto;
}

.topo .largura:not(.topo-linha) {
  display: flex;
  align-items: center;
  min-height: 72px;
}

.topo {
  background: var(--topo);
  color: var(--sobre-topo);
}

.faixa-abertura .topo {
  background: transparent;
}

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

  .botao,
  .botao:active,
  .barra[data-visivel] .barra-pedir:active {
    transform: none;
    transition: background-color var(--dur-cor) ease, border-color var(--dur-cor) ease;
  }

  /* a barra troca de estado num corte, sem deslizar */
  .barra,
  .barra[data-visivel],
  .barra-marca img,
  .barra-nome,
  .barra-pedir,
  .barra[data-visivel] .barra-marca img,
  .barra[data-visivel] .barra-nome,
  .barra[data-visivel] .barra-pedir {
    transform: none;
    transition: none;
  }
}