/* Casa di Florença: da massa ao balcão. Verde profundo da fachada, branco quente e o vermelho da logo, as fotos da cozinha em sequência. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fontes/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  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;
}

/* Reserva com as métricas da Schibsted sobre a Arial: o texto não pula quando a fonte chega. */
@font-face {
  font-family: "Schibsted Reserva";
  src: local("Arial");
  size-adjust: 107.2%;
  ascent-override: 91.1%;
  descent-override: 24%;
  line-gap-override: 0%;
}

:root {
  --verde: #253520;
  --verde-fundo: #1c2818;
  --verde-marca: #32442b;
  --verde-marca-fundo: #3b5033;
  --branco: #fbfaf6;
  --painel: #f2f0e9;
  --espera: #e7e4db;
  --espera-verde: #2f4229;
  --tinta: #1f2b1b;
  --texto: #2f3a2b;
  --tinta-2: #4f5a49;
  --sobre-verde: #f7f5ee;
  --sobre-verde-2: #c6d0bd;
  --linha: rgb(37 53 32 / 0.16);
  --linha-verde: rgb(247 245 238 / 0.18);
  --vermelho: #b3261f;
  --tricolor-verde: #4d7c45;
  --saida: cubic-bezier(0.23, 1, 0.32, 1);
  --gaveta: cubic-bezier(0.32, 0.72, 0, 1);
  --raio: 18px;
  --barra: 0px;
  --margem: 16px;
  /* Envelope mais junto desde 03/11/2026 (pedido de conforto do gabri): 1080 no lugar de 1200. */
  --largura: 1080px;
  /* Botão no toque (celular e tablet): 48 px de altura, acima dos 44 de conforto. No desktop volta aos 54. */
  --botao-altura: 48px;
  --botao-lado: 1.25rem;
  --botao-fonte: 1rem;
  --foco: var(--verde-marca);
  color-scheme: light;
}

@media (max-width: 1023.98px) {
  /* Reserva da barra de pedido antes do script medir a altura real. */
  :root { --barra: calc(69px + env(safe-area-inset-bottom, 0px)); }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-bottom: calc(var(--barra) + 16px);
  /* O cabeçalho fixo (encolhido a 50 px quando a página rola) não cobre o destino das âncoras. */
  scroll-padding-top: calc(50px + env(safe-area-inset-top, 0px) + 12px);
  /* Sem a barra de rolagem lateral (pedido do gabri, 23/10/2026): a faixa clara dela cortava o verde do cabeçalho e
     da abertura na borda direita. A página continua rolando pela roda, pelo trackpad, pelo toque e pelo teclado. */
  scrollbar-width: none;
}
/* Safari até a versão 18.1 e Chrome antes do 121 não conhecem scrollbar-width. */
html::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--branco);
  color: var(--texto);
  font-family: "Schibsted Grotesk", "Schibsted Reserva", Arial, sans-serif;
  /* 16 px no celular; 17 a partir do tablet. */
  font-size: 1rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  color: inherit;
  font-weight: 680;
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 {
  font-size: clamp(2rem, 7.5vw + 0.5rem, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
}

/* 24 px no celular (um degrau menor, pedido do gabri em 03/11/2026); o tablet repõe a rampa no bloco de 768. */
h2 {
  font-size: 1.5rem;
  line-height: 1.06;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  font-weight: 650;
}

p { text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:active:not(.botao) { text-decoration-thickness: 2px; }

a, button { touch-action: manipulation; }

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

::selection { background: #d5e0c8; color: var(--tinta); }

.abertura,
.pedir,
.rodape,
.topo,
.barra-pedido,
.pular { --foco: var(--sobre-verde); }

.abertura ::selection,
.pedir ::selection,
.rodape ::selection { background: var(--sobre-verde); color: var(--verde); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

.envelope {
  width: min(100% - 2 * max(var(--margem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), var(--largura));
  margin-inline: auto;
}

/* Escondido pela própria altura, não por um valor fixo: com texto ampliado ele quebra em duas linhas e continua fora da tela. */
.pular {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: 12px;
  z-index: 60;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--sobre-verde);
  color: var(--verde);
  font-weight: 600;
  text-decoration: none;
  max-width: calc(100% - 24px);
  transform: translateY(calc(-100% - 16px - env(safe-area-inset-top, 0px)));
}
.pular:focus { transform: none; }

/* Ícones */
.icone { width: 1.25em; height: 1.25em; flex: none; fill: currentColor; }
.icone--seta { width: 1.15em; height: 1.15em; fill: none; transition: transform 180ms var(--saida); }

/* Botões */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--botao-altura);
  padding: 0.625rem var(--botao-lado);
  border: 1px solid transparent;
  border-radius: 14px;
  font: inherit;
  font-size: var(--botao-fonte);
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: transform 140ms var(--saida), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.botao:active { transform: scale(0.97); }

.botao--claro { background: var(--sobre-verde); color: var(--verde); }
.botao--claro:active { background: #e4e1d6; }

.botao--contorno { border-color: rgb(247 245 238 / 0.42); background: transparent; color: var(--sobre-verde); }
.botao--contorno:active { background: rgb(247 245 238 / 0.12); }

.botao--verde { background: var(--verde-marca); color: var(--branco); }
.botao--verde:active { background: var(--verde); }

.botao--pequeno { min-height: 44px; padding: 0.5rem 1rem; border-radius: 12px; font-size: 0.9375rem; }
.topo .botao { white-space: nowrap; }

@media (hover: hover) and (pointer: fine) {
  .botao--claro:hover { background: #fffefb; }
  .botao--contorno:hover { border-color: rgb(247 245 238 / 0.75); background: rgb(247 245 238 / 0.06); }
  .botao--verde:hover { background: var(--verde-marca-fundo); }
  .botao:hover .icone--seta { transform: translateX(3px); }
  .topo__link:hover { color: var(--sobre-verde); background: rgb(247 245 238 / 0.07); }
  .rodape a:hover,
  address a:hover { text-decoration-color: currentColor; }
}

/* Cabeçalho: fixo no alto em toda tela e, depois de 24 px de rolagem, um pouco mais baixo (o site.js marca
   data-encolhido). A troca é uma transição interruptível; com movimento reduzido ela é seca. */
.topo {
  position: sticky;
  top: 0;
  z-index: 20;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--verde);
  color: var(--sobre-verde);
}
.topo__faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
  transition: min-height 220ms var(--saida);
}
.topo[data-encolhido] .topo__faixa { min-height: 50px; }
/* No alto do cabeçalho, o filete verde, branco e vermelho que corre sobre o letreiro da fachada. Ele corre da
   esquerda para a direita uma vez, quando a página abre, e fica. */
.topo::before {
  content: "";
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--tricolor-verde) 0 33.34%, var(--sobre-verde) 33.34% 66.67%, var(--vermelho) 66.67%);
  /* Abaixo dos links: o anel de foco deles passa por cima do filete. */
  z-index: -1;
  transform-origin: 0 50%;
  animation: filete 900ms var(--saida) 120ms backwards;
}
@keyframes filete {
  from { transform: scaleX(0); }
}
.topo__marca { display: inline-flex; padding: 8px 0; border-radius: 8px; }
.topo__marca img {
  display: block;
  width: auto;
  height: 30px;
  transition: height 220ms var(--saida);
}
/* A logo acompanha a faixa (30 para 28; o alvo da marca segue em 44 px). */
.topo[data-encolhido] .topo__marca img { height: 28px; }
.topo__nav { display: none; }

/* Selo: o arco de 9 pedras da logo em miniatura, alternando as duas cores da casa (verde e vermelho no claro). Abre
   cada seção, acima do título. */
.selo {
  display: block;
  width: 40px;
  height: auto;
  margin-bottom: 14px;
  overflow: visible;
}
.selo path {
  fill: var(--selo-a, var(--verde-marca));
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.selo path:nth-child(even) { fill: var(--selo-b, var(--vermelho)); }
/* Montagem: pedra por pedra, das duas bases até a chave, cada uma assentando de baixo para cima. */
.selo path:nth-child(1),
.selo path:nth-child(9) { --atraso: 0ms; }
.selo path:nth-child(2),
.selo path:nth-child(8) { --atraso: 70ms; }
.selo path:nth-child(3),
.selo path:nth-child(7) { --atraso: 140ms; }
.selo path:nth-child(4),
.selo path:nth-child(6) { --atraso: 210ms; }
.selo path:nth-child(5) { --atraso: 300ms; }
/* O site.js marca data-espera só no que ainda está abaixo da tela ao abrir a página e troca por data-visto quando
   aparece. Sem JavaScript, com movimento reduzido ou já na tela, o selo aparece pronto. */
.selo[data-espera] path { opacity: 0; }
.selo[data-visto] path { animation: pedra 460ms var(--saida) var(--atraso) backwards; }
@keyframes pedra {
  from { opacity: 0; transform: translateY(35%) scale(0.6); }
}


/* Abertura: no celular, a foto sangrada vem primeiro e o texto fica no verde logo abaixo. */
/* A abertura vai até o pé da primeira tela, logo abaixo do cabeçalho (60 px mais a área segura do topo): a seção
   seguinte não aparece cortada embaixo. svh é a altura com as barras do navegador à mostra, que não muda ao rolar. */
.abertura {
  min-height: calc(100svh - 60px - env(safe-area-inset-top, 0px));
  padding-bottom: 36px;
  /* hidden antes de clip: o Safari até a versão 15 não conhece clip e deixaria o arco abrir rolagem lateral. */
  overflow: hidden;
  overflow: clip;
  background: var(--verde);
  color: var(--sobre-verde);
}
.abertura__grade { position: relative; display: flex; flex-direction: column; }
/* O palco leva a posição da foto. A margem negativa é a mesma folga lateral do envelope: a foto encosta nas bordas da tela. */
.abertura__palco {
  position: relative;
  order: -1;
  margin: 0 calc(-1 * max(var(--margem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)));
}
.abertura__foto {
  position: relative;
  margin: 0;
  /* Reserva: toda tela redefine a proporção (o celular em pé usa 16:10 no bloco retrato desde 03/11/2026). */
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--espera-verde);
  /* Sombra curta e funda embaixo da foto: ela pousa no verde em vez de flutuar. */
  box-shadow: 0 22px 34px -24px rgb(9 14 7 / 0.78);
}
.abertura__foto picture,
.abertura__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.abertura__foto img { animation: assentar 900ms var(--saida) backwards; }
@keyframes assentar {
  from { transform: scale(1.035); }
  to { transform: none; }
}
/* Celular em pé mais compacto e em quadro (pedido do gabri, 03/11/2026): a foto deixa a sangria e vira
   quadro 16:10 de canto suave dentro do envelope, como nas outras telas, com a pizza inteira (o que sai é a
   esteira do alto); os respiros encurtam um degrau e a sobra de altura da primeira tela fica dividida em
   cima e embaixo do texto, em vez de acumular toda embaixo dos fatos. Só este bloco: celular deitado,
   tablet e desktop ficam como estão. */
@media (max-width: 767.98px) and (orientation: portrait) {
  .abertura {
    display: flex;
    flex-direction: column;
    padding-bottom: 24px;
  }
  .abertura__grade { flex-grow: 1; }
  .abertura__palco { margin: 12px 0 0; }
  .abertura__foto {
    aspect-ratio: 16 / 10;
    border-radius: 16px;
  }
  .abertura__foto img { object-position: 50% 77%; }
  .abertura__texto { margin-block: auto; padding-top: 20px; }
  .abertura h1 { margin-bottom: 10px; }
  .abertura__apoio { margin-bottom: 16px; }
  .abertura .acoes { gap: 10px; }
  .abertura__fatos { margin-top: 14px; }
}
/* O texto fica acima do arco, que no celular deitado sobe para o lado dele. */
.abertura__texto { position: relative; z-index: 1; padding-top: 24px; }

/* O arco do forno da logo em 9 pedras finas: as ímpares em contorno creme, as pares no vermelho cheio da logo. No
   desktop é uma coroa sobre a foto; no celular deitado, fica ao lado do texto. Monta uma vez e fica parado. */
.abertura__arco {
  display: none;
  position: absolute;
  left: var(--arco-x);
  bottom: var(--arco-y);
  width: var(--arco-largura);
  pointer-events: none;
}
.abertura__arco svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.arco__pedra {
  fill: none;
  stroke: rgb(247 245 238 / 0.3);
  stroke-width: var(--arco-traco, 1.2);
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  animation: tracar 900ms var(--saida) var(--atraso, 0ms) backwards;
}
/* Pedra vermelha: o contorno corre e o vermelho enche a pedra logo em seguida. */
.arco__pedra:nth-child(even) {
  fill: var(--vermelho);
  stroke: var(--vermelho);
  animation: tracar 900ms var(--saida) var(--atraso, 0ms) backwards, encher 520ms ease-out calc(var(--atraso, 0ms) + 360ms) backwards;
}
/* Como num arco de verdade: as pedras sobem das duas bases e a chave, no alto, entra por último. */
.arco__pedra:nth-child(1),
.arco__pedra:nth-child(9) { --atraso: 320ms; }
.arco__pedra:nth-child(2),
.arco__pedra:nth-child(8) { --atraso: 430ms; }
.arco__pedra:nth-child(3),
.arco__pedra:nth-child(7) { --atraso: 540ms; }
.arco__pedra:nth-child(4),
.arco__pedra:nth-child(6) { --atraso: 650ms; }
.arco__pedra:nth-child(5) { --atraso: 770ms; }
@keyframes tracar {
  from { stroke-dashoffset: 1; }
}
@keyframes encher {
  from { fill-opacity: 0; }
}

/* Celular em pé e tablet: a foto não deixa espaço para o arco em volta dela, então ele vem pequeno, como selo, acima
   do título, em creme e vermelho sobre o verde. Monta junto com a entrada do texto. */
.selo--abertura {
  --selo-a: var(--sobre-verde);
  --selo-b: var(--vermelho);
  width: 44px;
  margin-bottom: 14px;
}
.selo--abertura path { animation: pedra 460ms var(--saida) calc(var(--atraso) + 80ms) backwards; }
/* Depois que a abertura montou, girar a tela (que mostra o arco ou o selo) não remonta nada. */
.abertura[data-montada] .arco__pedra,
.abertura[data-montada] .selo--abertura path { animation: none; }

/* Entrada: título, texto, botões, fatos e por fim a foto, com pouco deslocamento e intervalos curtos. */
.abertura h1,
.abertura__apoio,
.abertura .acoes,
.abertura__fatos,
.abertura__foto { animation: entrar 560ms var(--saida) backwards; }
.abertura__apoio { animation-delay: 70ms; }
.abertura .acoes { animation-delay: 140ms; }
.abertura__fatos { animation-delay: 190ms; }
.abertura__foto { --subida: 16px; animation-delay: 240ms; }
/* Parte de 0.01, não de 0: o Chrome ignora na LCP o que pinta com opacidade zero, e a foto sairia da métrica. */
@keyframes entrar {
  from { opacity: 0.01; transform: translate3d(0, var(--subida, 10px), 0); }
}
@keyframes surgir {
  from { opacity: 0.01; }
}

/* Celular deitado: a foto fica abaixo da dobra e só entra quando aparece (o site.js marca data-esperando). */
.abertura[data-esperando] .abertura__foto,
.abertura[data-esperando] .abertura__foto img { animation-play-state: paused; }
/* No celular o título fica entre 26 e 30 px (um degrau menor desde 03/11/2026): duas linhas, sem empurrar os
   botões para fora da primeira tela. Em celular deitado a tela é baixa, então ele acompanha a altura. */
.abertura h1 { margin-bottom: 12px; font-size: min(clamp(1.625rem, 3.4vw + 0.95rem, 2rem), 9svh + 1rem); }
.abertura__apoio {
  max-width: 36ch;
  margin: 0 0 20px;
  color: var(--sobre-verde-2);
  font-size: 0.9375rem;
}
.acoes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.abertura__fatos {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--sobre-verde-2);
  font-size: 0.875rem;
  line-height: 1.45;
}
.abertura__fatos strong { color: var(--sobre-verde); font-weight: 620; }
.sem-quebra { white-space: nowrap; }

/* Títulos e textos de seção sobre claro */
.massa h2,
.casa h2,
.atendimento h2 { color: var(--tinta); }
.massa__texto p,
.casa__texto p {
  max-width: 36ch;
  margin: 12px 0 0;
  color: var(--tinta-2);
  font-size: 1rem;
}

/* A massa: a borda dourada como prova da fermentação, uma foto só (o pote em plástico saiu a pedido do gabri,
   03/11/2026). No celular o quadro fica 4:3, focado na borda; do tablet em diante volta ao 4:5 inteiro. */
.massa { padding: 48px 0 28px; }
.massa__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.massa__foto { margin: 0; }
.massa__foto picture {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--espera);
}
/* No corte 4:3 do celular, o quadro desce: a borda fica inteira e o que sai é o alto da foto. */
.massa__foto img { object-position: 50% 72%; }
.massa__foto img,
.casa__pa img,
.casa__maionese-foto img,
.sabores__foto img,
.atendimento__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A casa: a pá do pizzaiolo e a maionese que acompanha. */
.casa { padding: 40px 0 60px; }
.casa__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  container-type: inline-size;
}
.casa__pa {
  margin: 4px 0 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 16px;
  background: var(--espera);
}
.casa__maionese {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 14px 16px;
}
/* Em 320 px ou com texto ampliado a coluna do texto fica estreita demais: foto em cima, texto embaixo. A medida é em
   em da fonte do celular (16 px), então acompanha o texto ampliado. */
@container (max-width: 18.75em) {
  .casa__maionese { grid-template-columns: minmax(0, 1fr); }
  .casa__maionese-foto { max-width: 168px; }
}
.casa__maionese-foto {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--espera);
}
.casa__maionese h3 { margin-bottom: 4px; color: var(--tinta); }
.casa__maionese p { max-width: 36ch; margin: 0; color: var(--tinta-2); font-size: 1rem; }

/* Do salgado ao doce: as pizzas do balcão em cards 4:5 sobre o painel. No celular viram uma faixa que rola de
   lado com parada por card (rolagem nativa com snap, sem script); do tablet em diante, três quadros lado a lado. */
.sabores { padding: 48px 0 56px; background: var(--painel); }
.sabores h2 { color: var(--tinta); }
.sabores__texto p {
  max-width: 40ch;
  margin: 12px 0 0;
  color: var(--tinta-2);
  font-size: 1rem;
}
.sabores__trio {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(75vw, 21.25rem);
  gap: 12px;
  /* Sangra até as bordas da tela, como o palco da abertura, e alinha o primeiro card no envelope. */
  margin: 24px calc(-1 * max(var(--margem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))) 0;
  padding: 0 max(var(--margem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) 4px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--margem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  scrollbar-width: none;
}
.sabores__trio::-webkit-scrollbar { display: none; }
.sabores__foto { margin: 0; scroll-snap-align: start; }
.sabores__foto picture {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
  background: var(--espera);
}
.sabores__foto figcaption {
  margin-top: 8px;
  color: var(--tinta-2);
  font-size: 0.875rem;
  line-height: 1.35;
}

/* Como pedir: o mesmo verde da abertura. O selo fica creme e vermelho, como o da abertura. */
.pedir {
  --selo-a: var(--sobre-verde);
  --selo-b: var(--vermelho);
  padding: 56px 0 64px;
  background: var(--verde);
  color: var(--sobre-verde);
}
.pedir__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 44px;
}
.pedir__canais p {
  max-width: 40ch;
  margin: 12px 0 24px;
  color: var(--sobre-verde-2);
  font-size: 1rem;
}
.pedir__tamanhos h3 { font-size: 1.0625rem; }
.pedir__nota { margin: 4px 0 20px; color: var(--sobre-verde-2); font-size: 0.9375rem; }

/* Régua dos tamanhos: cada linha de cota mede o diâmetro na mesma escala (40 cm = largura toda). */
.regua {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.regua__item {
  width: calc(var(--cm) / 40 * 100%);
  min-width: min(100%, max-content);
}
.regua__item--25 { --cm: 25; }
.regua__item--35 { --cm: 35; }
.regua__item--40 { --cm: 40; }
.regua__rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  margin-bottom: 8px;
}
/* O diâmetro é o destaque; o nome do tamanho acompanha. */
.regua__nome { color: var(--sobre-verde-2); font-weight: 560; }
.regua__medida {
  color: var(--sobre-verde);
  font-size: 1.25rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Linha de cota: traço com as duas pontas marcadas, como no desenho técnico. */
.regua__barra {
  position: relative;
  display: block;
  height: 14px;
  border-inline: 2px solid var(--sobre-verde);
}
.regua__barra::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 3px solid var(--sobre-verde);
  transform: translateY(-50%);
}
/* Cota ainda abaixo da tela ao abrir a página: espera e, quando aparece inteira, corre da esquerda para a direita,
   como quem desenha a medida. As três que aparecem juntas saem uma depois da outra. */
.regua__item[data-espera] .regua__barra { clip-path: inset(0 100% 0 0); }
.regua__item[data-visto] .regua__barra { animation: cota 760ms var(--saida) backwards; }
.regua__item--35[data-visto] .regua__barra { animation-delay: 130ms; }
.regua__item--40[data-visto] .regua__barra { animation-delay: 260ms; }
@keyframes cota {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

/* Horário, entrega e retirada, ao lado da fachada e do endereço */
.atendimento { padding: 56px 0 64px; background: var(--painel); }
.atendimento__grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
.atendimento h2 { margin-bottom: 20px; }
.consulta { margin: 0; border-top: 1px solid var(--linha); }
.consulta__linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 16px 0;
  border-bottom: 1px solid var(--linha);
}
.consulta dt { color: var(--tinta); font-weight: 650; }
.consulta dd { margin: 0; }
.consulta dd p { max-width: 46ch; margin: 0; }

/* Sete casas numa linha; com texto ampliado a largura mínima cresce em em e a semana quebra em duas linhas. */
.semana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(2.6em, 1fr));
  gap: calc(0.9rem + 10px) 6px;
  font-size: 0.875rem;
  max-width: 420px;
  margin: 14px 0 24px;
  padding: 0;
  list-style: none;
}
.semana li {
  position: relative;
  display: grid;
  place-items: center;
  height: 40px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--verde-marca);
  color: var(--branco);
  font-size: 0.875rem;
  font-weight: 620;
}
.semana li[data-fechado],
.semana li[data-folga] {
  border-color: var(--linha);
  background: transparent;
  color: var(--tinta-2);
  font-weight: 500;
}
/* Hoje com atendimento: a casa fica vermelha, a cor do letreiro. Hoje fechado ou de folga: a casa vazada ganha o
   contorno vermelho. */
.semana li[aria-current] { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.semana li[aria-current]:not([data-fechado]):not([data-folga]) { outline: 0; background: var(--vermelho); }
.semana__hoje {
  position: absolute;
  top: calc(100% + 5px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--vermelho);
  font-size: 0.75rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.atendimento__lugar { max-width: 40rem; }
.atendimento__foto {
  margin: 0 0 20px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--raio);
  background: var(--espera);
}
/* Ancorada no alto: o filete verde, branco e vermelho acima do letreiro fica no quadro. */
.atendimento__foto img { object-position: 50% 0%; }
.atendimento__lugar h3 { margin-bottom: 8px; color: var(--tinta); font-size: 1.0625rem; }
address { margin-bottom: 20px; font-style: normal; line-height: 1.6; }
.endereco__nome { color: var(--tinta); font-weight: 620; }
address a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--verde-marca);
  font-weight: 620;
  text-decoration-color: var(--vermelho);
}

/* Rodapé */
/* A reserva da barra de pedido fica no próprio rodapé: o verde vai até o fim da página, embaixo da barra. */
.rodape {
  padding: 44px 0 calc(24px + max(var(--barra), env(safe-area-inset-bottom, 0px)));
  background: var(--verde-fundo);
  color: var(--sobre-verde-2);
  font-size: 0.9375rem;
}
.rodape__corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.rodape__marca { display: grid; justify-items: start; gap: 14px; }
.rodape__logo { display: block; width: 128px; height: auto; }
.rodape__lema {
  position: relative;
  margin: 0;
  padding-top: 16px;
  color: var(--sobre-verde);
  font-size: 1rem;
  font-weight: 500;
}
/* O filete verde, branco e vermelho que corre no alto do letreiro da fachada. */
.rodape__lema::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--tricolor-verde) 0 33.33%, var(--sobre-verde) 33.33% 66.66%, var(--vermelho) 66.66% 100%);
}
.rodape__redes { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.rodape__redes a {
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--sobre-verde);
  text-decoration: none;
  transition: opacity 120ms ease;
}
.rodape__redes a:active { opacity: 0.72; }
.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  padding-top: 18px;
  border-top: 1px solid var(--linha-verde);
}
.rodape__legal p { margin: 0; }
.rodape__legal a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--sobre-verde);
  text-decoration-color: rgb(247 245 238 / 0.4);
}

/* Barra de pedido (celular e tablet) */
.barra-pedido {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: flex;
  gap: 10px;
  padding: 10px max(var(--margem), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--margem), env(safe-area-inset-left, 0px));
  border-top: 1px solid rgb(247 245 238 / 0.1);
  background: var(--verde-fundo);
  transform: none;
  visibility: visible;
  transition: transform 220ms var(--gaveta), visibility 0s linear 0s;
}
.barra-pedido[data-estado="oculta"] {
  transform: translateY(100%);
  visibility: hidden;
  transition: transform 220ms var(--gaveta), visibility 0s linear 220ms;
}
.barra-pedido { container-type: inline-size; }
.barra-pedido .botao { min-height: 48px; }
.barra-pedido__principal { flex: 1; min-width: 0; }
.barra-pedido__whats { flex: none; padding: 0 1rem; white-space: nowrap; }

/* O WhatsApp vira só ícone quando o texto não cabe: a medida é em em (da fonte da barra, 16 px), então acompanha o texto ampliado. */
@container (max-width: 19.2em) {
  .barra-pedido__whats { width: 48px; padding: 0; }
  .barra-pedido__whats .rotulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Celular deitado: texto primeiro e a foto em quadro presa à altura da tela, como no tablet. */
@media (max-width: 767.98px) and (orientation: landscape) {
  .abertura { padding-top: 20px; }
  /* Título preso à altura da tela para os dois botões aparecerem inteiros acima da barra de pedido. */
  .abertura h1 { font-size: min(clamp(1.625rem, 3.4vw + 0.95rem, 2rem), 8svh + 1rem); }
  .abertura__palco {
    order: 0;
    width: min(100%, 83svh);
    margin: 24px 0 0;
  }
  .abertura__foto {
    aspect-ratio: 16 / 10;
    border-radius: var(--raio);
    box-shadow: 0 20px 34px -18px rgb(9 14 7 / 0.7);
  }
  .abertura__texto { padding-top: 0; }
  /* A foto fica abaixo da dobra: o arco sobe para o espaço livre à direita do texto, na primeira tela, e o selo sai. */
  .abertura__arco { display: block; --arco-largura: 140%; --arco-x: 162%; --arco-y: 121%; --arco-traco: 1.6; }
  .selo--abertura { display: none; }
}
/* Celular em pé de tela baixa (abaixo de 730 px de altura visível, como o iPhone com as barras do Safari): o selo
   empurraria o Ver cardápio para baixo da barra de pedido. Ele sai e o botão fica na primeira tela. */
@media (max-width: 767.98px) and (orientation: portrait) and (max-height: 729.98px) {
  .selo--abertura { display: none; }
}

@media (max-width: 359.98px) {
  .semana { column-gap: 4px; }
  .semana li { font-size: 0.8125rem; }
}

/* Política de privacidade */
/* Sem barra de pedido nesta página: nada a reservar embaixo. */
.pagina-legal { --barra: 0px; background: var(--branco); }
.topo__voltar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--sobre-verde);
  font-size: 0.9375rem;
  font-weight: 560;
}
.legal { overflow-wrap: anywhere; }
.legal.envelope {
  width: min(100% - 2 * max(var(--margem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)), 46rem);
  padding: 48px 0 80px;
}
.legal h1 { margin-bottom: 10px; color: var(--tinta); font-size: clamp(2rem, 4vw + 1rem, 3rem); }
.legal h2 { margin: 40px 0 10px; color: var(--tinta); font-size: 1.375rem; letter-spacing: -0.015em; }
.legal p,
.legal ul { max-width: 68ch; margin: 0 0 14px; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--verde-marca); }
.legal strong { color: var(--tinta); font-weight: 620; }
.legal a { color: var(--verde-marca); }
.legal__data { color: var(--tinta-2); }
.rodape--simples { padding-top: 28px; }
.rodape--simples .rodape__legal { padding-top: 0; border-top: 0; }


/* A partir de 480 px: rótulo da consulta ao lado do valor */
@media (min-width: 480px) {
  .consulta__linha { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 16px; }
}

/* A partir de 560 px */
@media (min-width: 560px) {
  :root { --margem: 24px; }
  .acoes { display: flex; flex-wrap: wrap; gap: 12px; }
  /* De 560 a 767 a foto única da massa não passa de 560 px: o degrau de 1120 serve o 2x inteiro.
     O teto fica na picture (bloco), porque margem auto no próprio figure, item de grade, o encolheria. */
  .massa__foto picture { max-width: 560px; margin-inline: auto; }
  .casa__pa { border-radius: var(--raio); }
  .rodape__corpo { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .rodape__legal { grid-column: 1 / -1; }
  .rodape__legal .rodape__credito { margin-left: auto; }
}

/* A partir de 768 px: texto primeiro e a foto em quadro, com a altura presa à tela */
@media (min-width: 768px) {
  body { font-size: 1.0625rem; }
  /* 34 a 38 px no tablet; o teto é o mesmo 38 do desktop, para a escala não voltar atrás. */
  h2 { font-size: clamp(1.625rem, 2.2vw + 1.05rem, 2.375rem); }
  /* O lead dos sabores volta ao tamanho de tablet (a base desceu para o celular). */
  .sabores__texto p { font-size: 1.0625rem; }
  .selo { width: 46px; margin-bottom: 18px; }
  .selo--abertura { width: 48px; margin-bottom: 16px; }

  .topo__nav { display: flex; align-items: center; gap: 4px; }
  .topo__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    color: var(--sobre-verde-2);
    font-size: 0.9375rem;
    font-weight: 520;
    text-decoration: none;
    transition: color 160ms ease, background-color 160ms ease;
  }
  .topo__link:active { color: var(--sobre-verde); background: rgb(247 245 238 / 0.1); }
  .topo__nav .botao { margin-left: 8px; }

  /* A sobra de altura da tela fica dividida em cima e embaixo: o conteúdo da abertura fica centrado no verde. */
  .abertura {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 0 48px;
  }
  /* Foto de no máximo 600 px e, em tela deitada, de no máximo metade da altura; a largura acompanha o 16:10. */
  .abertura__palco {
    order: 0;
    width: min(100%, 83svh, 37.5rem);
    margin: 32px 0 0;
  }
  .abertura__foto {
    aspect-ratio: 16 / 10;
    border-radius: var(--raio);
    box-shadow: 0 26px 44px -26px rgb(9 14 7 / 0.78);
  }
  .abertura__texto { padding-top: 0; }
  /* Tablet: título perto de 40 px, abaixo dos 55 a 60 do desktop. */
  .abertura h1 { max-width: 13ch; margin-bottom: 16px; font-size: min(clamp(2.5rem, 1.2vw + 1.9rem, 3rem), 9svh + 1rem); }
  .abertura__apoio { font-size: 1.0625rem; }
  .abertura__fatos { margin-top: 20px; font-size: 0.9375rem; }

  .massa__texto p,
  .casa__texto p,
  .pedir__canais p { font-size: 1.125rem; }

  .sabores { padding: 56px 0 64px; }
  .sabores__trio {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 0;
    padding: 0;
    overflow: visible;
  }
  .sabores__foto figcaption { margin-top: 10px; font-size: 0.9375rem; }
  .massa__foto picture { aspect-ratio: 4 / 5; max-width: none; margin-inline: 0; }

  .pedir { padding: 64px 0 72px; }
  /* Já no tablet os canais ficam ao lado da régua: empilhados, a coluna única deixava a direita vazia. */
  .pedir__grade { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 40px; align-items: start; }
  .regua { gap: 20px; }
  .regua__medida { font-size: 1.375rem; }

  .atendimento { padding: 64px 0 72px; }
  .atendimento__grade { gap: 44px; }
  .consulta__linha { padding: 18px 0; }

  .rodape { padding-top: 48px; }
  .rodape--simples { padding-top: 28px; }
  .rodape__logo { width: 140px; }

  .massa { padding: 64px 0 40px; }
  /* Já no tablet o par fica à esquerda e o texto à direita: as fotos ficam contidas em vez de ocupar a largura toda. */
  .massa__grade {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: 40px;
    align-items: center;
  }
  .massa__foto { grid-row: 1; grid-column: 1; }
  .massa__texto { grid-row: 1; grid-column: 2; }

  .casa { padding: 56px 0 84px; }
  .casa__maionese { grid-template-columns: 152px minmax(0, 1fr); }
}

/* Celular grande deitado (812 a 932 px de largura, tela baixa): mesma ideia do celular deitado menor, o arco à
   direita do texto na primeira tela, com o pé esmaecendo no verde, e o selo sai. Não alcança tablet, que tem mais
   de 500 px de altura: no tablet a foto fica abaixo do texto, sem lugar para o arco, e o selo fica acima do título. */
@media (min-width: 768px) and (max-width: 1023.98px) and (orientation: landscape) and (max-height: 500px) {
  .abertura__arco {
    display: block;
    --arco-largura: 140%;
    --arco-x: 159%;
    /* Preso ao palco da foto: com o texto menor do tablet o palco sobe, e o arco desce junto para a chave não cortar
       na linha do cabeçalho. */
    --arco-y: 158%;
    --arco-traco: 1.6;
    -webkit-mask-image: linear-gradient(0deg, transparent 5%, #000 30%);
    mask-image: linear-gradient(0deg, transparent 5%, #000 30%);
  }
  .selo--abertura { display: none; }
}

/* Já no tablet a consulta fica ao lado da fachada com o endereço, como no desktop: empilhadas, as duas
   colunas deixavam metade da largura vazia. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .atendimento__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; }
  .atendimento__lugar { max-width: none; }
}

/* A partir de 1024 px: grade de 12 colunas, cabeçalho fixo, sem barra de pedido. A escala de texto, botões e respiros
   volta à do desktop, maior que a do celular e do tablet. */
@media (min-width: 1024px) {
  :root { --margem: 40px; --raio: 20px; --botao-altura: 54px; --botao-lado: 1.375rem; --botao-fonte: 1.0625rem; }
  html { scroll-padding-top: calc(68px + 1rem); }
  /* 38 px no lugar dos 48 antigos (pedido de conforto do gabri, 03/11/2026): o salto do tablet fica curto. */
  h2 { font-size: 2.375rem; }
  h3 { font-size: 1.25rem; }
  .massa__texto p,
  .casa__texto p { margin-top: 14px; font-size: 1.125rem; }
  .sabores__texto p { margin-top: 14px; font-size: 1.125rem; }
  .pedir__canais p { margin: 14px 0 28px; font-size: 1.125rem; }
  .pedir__tamanhos h3 { font-size: 1.125rem; }
  .pedir__nota { margin-bottom: 24px; }
  .regua { gap: 20px; }
  .regua__rotulo { margin-bottom: 10px; }
  .regua__medida { font-size: 1.375rem; }
  .atendimento h2 { margin-bottom: 20px; }
  .consulta__linha { padding: 20px 0; }
  .semana li { height: 44px; }
  .atendimento__foto { margin-bottom: 24px; }
  .casa__maionese { gap: 16px 20px; }
  .rodape__corpo { gap: 32px; }
  .rodape__logo { width: 148px; }
  .topo { position: sticky; top: 0; }
  .topo__faixa { min-height: 68px; }
  .topo[data-encolhido] .topo__faixa { min-height: 56px; }
  .topo__marca img { height: 34px; }
  .topo[data-encolhido] .topo__marca img { height: 30px; }
  .barra-pedido { display: none; }

  /* Texto e foto lado a lado no verde: a abertura inteira cabe na primeira tela. */
  .abertura { min-height: calc(100svh - 68px); padding: 40px 0 56px; }
  .abertura__grade {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: center;
  }
  .abertura__texto { grid-column: 1 / span 5; }
  /* Sempre acima dos 48 px do H2 das seções, e crescendo junto com a tela a partir do tablet. */
  .abertura h1 {
    max-width: none;
    margin-bottom: 18px;
    /* 48 a 54 px desde 03/11/2026 (antes 52 a 60): mais confortável, ainda acima do H2 de 38. */
    font-size: clamp(3rem, 1.3vw + 2.2rem, 3.375rem);
  }
  .abertura__apoio { margin-bottom: 24px; font-size: 1.125rem; }
  /* O alto do palco guarda o lugar da coroa: 18% da largura dele, o arco inteiro menos as bases. */
  .abertura__palco {
    grid-column: 7 / span 6;
    width: 100%;
    margin: 0;
    padding-top: 18%;
  }
  /* Fora da altura da tela: cabeçalho (68), respiro da abertura (40 e 56) e a coroa, que mede 18% do palco (até 95
     no envelope de 1080). Em tela baixa a foto encolhe inteira, sem cortar a pizza, e fica centrada embaixo da coroa. */
  .abertura__foto {
    margin-inline: auto;
    max-height: calc(100svh - 164px - min(95px, 9vw - 9px));
    aspect-ratio: 4 / 3;
    box-shadow: 0 34px 56px -30px rgb(9 14 7 / 0.82), 0 4px 10px -6px rgb(9 14 7 / 0.4);
  }
  /* Desktop: o arco é uma coroa centrada sobre a foto, como a boca do forno da logo, com as bases escondidas atrás
     dela. O traço é mais grosso no desenho porque o arco é desenhado pequeno (cerca de 1,3 px na tela). */
  .abertura__arco {
    display: block;
    top: 0;
    bottom: auto;
    --arco-largura: 40%;
    --arco-x: 30%;
    --arco-traco: 5.5;
  }
  .selo--abertura { display: none; }

  .massa { padding: 80px 0 48px; }
  .massa__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: center;
  }
  .massa__foto { grid-row: 1; grid-column: 1 / span 5; }
  .massa__texto { grid-row: 1; grid-column: 7 / span 6; max-width: none; }
  .massa__foto picture { border-radius: var(--raio); }

  .casa { padding: 72px 0 96px; }
  .casa__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: 24px;
    row-gap: 32px;
  }
  .casa__texto { grid-row: 1; grid-column: 1 / span 5; }
  .casa__maionese {
    grid-row: 2;
    grid-column: 1 / span 5;
    align-self: end;
    /* Maionese maior no desktop: a coluna da esquerda fecha junto com a foto da pá, sem faixa vazia no meio. */
    grid-template-columns: clamp(136px, 15vw - 16px, 208px) minmax(0, 1fr);
    padding-top: 24px;
    border-top: 1px solid var(--linha);
  }
  .casa__pa { grid-row: 1 / span 2; grid-column: 6 / span 7; margin: 0; }
  .casa__maionese-foto { border-radius: 16px; }

  .sabores { padding: 88px 0 96px; }
  .sabores__trio { gap: 24px; margin-top: 32px; }
  .sabores__foto picture { border-radius: var(--raio); }

  .pedir { padding: 88px 0 96px; }
  .pedir__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: center;
  }
  .pedir__canais { grid-column: 1 / span 6; }
  .pedir__tamanhos { grid-column: 8 / span 5; }

  .atendimento { padding: 88px 0 96px; }
  .atendimento__grade {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
  }
  .atendimento__consulta { grid-column: 1 / span 6; }
  .atendimento__lugar { grid-column: 8 / span 5; max-width: none; }
  .atendimento__foto { aspect-ratio: 3 / 2; }

  .rodape { padding-top: 60px; }
}

/* Até 1279 px o texto ganha uma coluna para os dois botões caberem na mesma linha. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .abertura__texto { grid-column: 1 / span 6; }
}

/* Tela em pé a partir de 1024 (iPad Pro, monitor em pé): lado a lado, a foto ficava presa a 6 colunas e a abertura,
   que vai até o pé da tela, ficava quase toda vazia. Volta o empilhado do tablet: texto em cima, foto 16:10 na
   largura do envelope embaixo, selo acima do título no lugar da coroa. A altura extra vai para a foto. */
@media (min-width: 1024px) and (orientation: portrait) {
  .abertura__grade { display: flex; flex-direction: column; align-items: stretch; }
  .abertura h1 { max-width: 13ch; }
  .abertura__palco { width: 100%; margin: 36px 0 0; padding-top: 0; }
  .abertura__foto { aspect-ratio: 16 / 10; max-height: none; margin-inline: 0; }
  .abertura__arco { display: none; }
  .selo--abertura { display: block; }
}

/* Centralizado nas telas empilhadas (pedido do gabri, 03/11/2026): quando a abertura empilha texto e foto
   (toda tela em pé), o texto alinha no eixo; as seções de coluna única acompanham em qualquer orientação,
   para nada saltar de alinhamento quando o aparelho gira. */
@media (orientation: portrait) {
  .abertura__texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .abertura .acoes { width: 100%; justify-content: center; }
  .abertura__fatos { justify-items: center; }
}
@media (min-width: 768px) and (max-width: 1023.98px), (min-width: 1024px) and (orientation: portrait) {
  /* A foto de até 600 px ficava encostada à esquerda, com a direita vazia: centra em todo tablet,
     deitado também, e na tela em pé a partir de 1024, que usa o mesmo empilhado. */
  .abertura__palco { margin-inline: auto; }
}
@media (max-width: 767.98px) {
  .massa__texto,
  .casa__texto,
  .sabores__texto,
  .pedir__canais,
  .atendimento__consulta h2 { text-align: center; }
  .massa__texto .selo,
  .casa__texto .selo,
  .sabores__texto .selo,
  .pedir__canais .selo,
  .atendimento__consulta .selo { margin-inline: auto; }
  .massa__texto p,
  .casa__texto p,
  .sabores__texto p,
  .pedir__canais p { margin-inline: auto; }
  .pedir__canais .acoes { justify-content: center; }
}
/* Rodapé de coluna única centrado no celular estreito. */
@media (max-width: 559.98px) {
  .rodape__corpo { text-align: center; }
  .rodape__marca,
  .rodape__redes { justify-items: center; }
  .rodape__lema::before { left: 50%; transform: translateX(-50%); }
  .rodape__legal { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .abertura__foto img { animation: none; }
  /* Abertura sem deslocamento: entrada só em opacidade. Arco, selos, filete do cabeçalho e cotas já prontos. */
  .abertura h1,
  .abertura__apoio,
  .abertura .acoes,
  .abertura__fatos,
  .abertura__foto { animation-name: surgir; animation-duration: 240ms; }
  .topo::before,
  .arco__pedra,
  .arco__pedra:nth-child(even),
  .selo path,
  .selo--abertura path,
  .selo[data-visto] path,
  .regua__item[data-visto] .regua__barra { animation: none; }
  .arco__pedra { stroke-dasharray: none; }
  .botao,
  .icone--seta { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
  /* O cabeçalho ainda encolhe (estado funcional), mas sem deslizar. */
  .topo__faixa,
  .topo__marca img { transition: none; }
  .botao:active { transform: none; }
  .botao:hover .icone--seta { transform: none; }
  .barra-pedido,
  .barra-pedido[data-estado="oculta"] { transform: none; }
  .barra-pedido { opacity: 1; transition: opacity 160ms ease, visibility 0s linear 0s; }
  .barra-pedido[data-estado="oculta"] { opacity: 0; transition: opacity 160ms ease, visibility 0s linear 160ms; }
}

@media (forced-colors: active) {
  .botao { border: 1px solid ButtonText; }
  .semana li { border: 1px solid CanvasText; }
  .semana li[data-fechado],
  .semana li[data-folga] { border-style: dashed; color: GrayText; }
  .semana li[aria-current],
  .semana li[aria-current]:not([data-fechado]):not([data-folga]) { outline: 2px solid Highlight; outline-offset: 2px; }
  .regua__barra { border-color: CanvasText; }
  .regua__barra::before { border-top-color: CanvasText; }
  /* As logos são brancas: no tema claro de alto contraste o fundo vira branco, então cada uma leva a própria placa verde. */
  .topo__marca img,
  .rodape__logo { forced-color-adjust: none; background-color: #253520; border-radius: 6px; }
  .abertura__foto,
  .massa__foto picture,
  .casa__pa,
  .casa__maionese-foto,
  .sabores__foto picture,
  .atendimento__foto { border: 1px solid CanvasText; }
  .rodape__lema::before { background: CanvasText; }
  /* Arco, selos e o filete do cabeçalho são cor pura: sem as cores da casa, saem. */
  .topo::before,
  .abertura__arco,
  .selo { display: none; }
}

/* Impressão: tudo já montado, inclusive o que ainda esperava abaixo da tela. */
@media print {
  .selo[data-espera] path { opacity: 1; }
  .sabores__trio {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .regua__item[data-espera] .regua__barra { clip-path: none; }
  .topo::before,
  .arco__pedra,
  .arco__pedra:nth-child(even),
  .selo path,
  .selo--abertura path,
  .selo[data-visto] path,
  .regua__item[data-visto] .regua__barra { animation: none; }
}