/* Modelo KRIA — loja de suplementos. Direção "O palco dividido" (skill site-master, estilo autoral taste, seed
   508926319): no computador, a coluna da esquerda rola e a da direita fica presa com a foto da seção. A peça impressa
   da página é o rótulo do pote: o código de barras, a tabela da informação nutricional, a folha da prateleira e o
   cupom do pedido. Escrito para 360 px e ampliado depois.
   Cores trocáveis pelo site.json do cliente (cores.*): fundo, superficie, papel, texto, suave, destaque,
   destaque_tinta, escuro, escuro_tinta. */

@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/schibsted-grotesk.woff2') format('woff2'); }

:root {
  --c-fundo: #DDD6C6;          /* areia: o fundo da página */
  --c-superficie: #D2CAB8;     /* um tom abaixo: as linhas alternadas do endereço, o que recebe o mouse */
  --c-papel: #F4F3EF;          /* o papel do rótulo, da folha e do cupom */
  --c-tinta: #2A2A26;          /* texto, títulos, as barras do rótulo */
  --c-suave: #535149;          /* texto secundário (4,6:1 no tom de baixo, 5,3:1 na areia) */
  --c-destaque: #4F6238;       /* musgo: só nos botões */
  --c-destaque-forte: #3E4E2B;
  --c-destaque-tinta: #FFFFFF;
  --c-escuro: #3F5A2A;         /* verde-escuro: a faixa das marcas e o rodapé */
  --c-escuro-tinta: #F4F3EF;
  --c-aberto: #2F6B2F;

  --f: 'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* cinco degraus de letra */
  --t-pequeno: 1rem;
  --t-corpo: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --t-frase: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --t-titulo: clamp(2.125rem, 1.4rem + 2.1vw, 3.5rem);
  --t-cartaz: clamp(2.5rem, 0.6rem + 6.2vw, 5.5rem);

  --margem: clamp(16px, 2.4vw, 32px);
  --coluna: clamp(20px, 5vw, 72px);  /* o recuo do texto na coluna do palco */
  --topo: 64px;
  --faixa: 0px;
  --secao: clamp(96px, 11vw, 180px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --zigue: polygon(0 0, 100% 0, 100% calc(100% - 10px), 95.833% 100%, 91.667% calc(100% - 10px), 87.5% 100%, 83.333% calc(100% - 10px), 79.167% 100%, 75% calc(100% - 10px), 70.833% 100%, 66.667% calc(100% - 10px), 62.5% 100%, 58.333% calc(100% - 10px), 54.167% 100%, 50% calc(100% - 10px), 45.833% 100%, 41.667% calc(100% - 10px), 37.5% 100%, 33.333% calc(100% - 10px), 29.167% 100%, 25% calc(100% - 10px), 20.833% 100%, 16.667% calc(100% - 10px), 12.5% 100%, 8.333% calc(100% - 10px), 4.167% 100%, 0% calc(100% - 10px));
  --onda: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Ccircle cx='10' cy='0' r='7'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo) + 8px);
  /* o WhatsApp flutuante não cobre o item que recebe o foco perto da borda de baixo */
  scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom));
  accent-color: var(--c-destaque);
  caret-color: var(--c-tinta);
  scrollbar-color: var(--c-suave) var(--c-fundo);
  background: var(--c-fundo);
}
body {
  margin: 0;
  background: var(--c-fundo);
  color: var(--c-tinta);
  font: 400 var(--t-corpo)/1.5 var(--f);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
a, button, summary, label, select, input { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-weight: 400; color: inherit; }
p, ul, ol, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
button, select, input { font: inherit; color: inherit; letter-spacing: inherit; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
::selection { background: var(--c-tinta); color: var(--c-papel); }

/* Foco em anel duplo, visível na areia, no papel, no musgo e no verde-escuro */
:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-papel); } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
.marcas :focus-visible, .rodape :focus-visible, .faixa-demo :focus-visible, .fim :focus-visible, .onde__linha--saudacao :focus-visible { outline-color: var(--c-escuro-tinta); box-shadow: 0 0 0 3px var(--c-escuro); } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
[tabindex="-1"]:focus { outline: none; box-shadow: none; } /* taste-skill-ignore: tira o anel do ponto de partida do Tab */

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; /* taste-skill-ignore: texto só para leitor de tela, não é linha */
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 12px 18px; background: var(--c-tinta); color: var(--c-papel);
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* botões: cheios e de canto reto, como o papel impresso */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 0; border-radius: 0;
  font: 500 var(--t-corpo)/1.2 var(--f); letter-spacing: -0.01em; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, transform 160ms ease;
}
.btn:active { transform: scale(0.98); }
.btn--destaque { background: var(--c-destaque); color: var(--c-destaque-tinta); }
.btn--tinta { background: var(--c-tinta); color: var(--c-papel); }
.btn--papel { background: var(--c-papel); color: var(--c-tinta); }
.btn--pequeno { min-height: 44px; padding: 0 16px; }
.btn--largo { width: 100%; }
.btn--grande { min-height: 56px; padding: 0 28px; }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em;
}

/* títulos que se dividem em palavras para entrar em cascata (main.js); sem o script ficam inteiros */
.palavra { display: inline-block; }

/* a faixa do código de barras: barras de tinta e espaços de papel, larguras tiradas do nome da loja */
.barras { display: flex; height: 40px; }
.barras i { flex-basis: 0; }
.barras i:nth-child(odd) { background: var(--c-tinta); }

/* ---------- faixa do modelo de demonstração ---------- */
body:has(> .faixa-demo) { --faixa: 52px; }
.faixa-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  min-height: 52px; padding: 4px var(--margem);
  background: var(--c-escuro); color: var(--c-escuro-tinta);
  font-size: 1rem; line-height: 1.4;
}
.faixa-demo span { padding-block: 8px; }
.faixa-demo a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 500; text-underline-offset: 4px; }

/* ---------- topo: o nome, os links e uma ação, numa barra simples ---------- */
.topo { position: sticky; top: 0; z-index: 50; background: var(--c-fundo); }
.topo__barra { display: flex; align-items: center; gap: 12px; height: var(--topo); padding-inline: var(--margem); }
.marca { display: flex; align-items: center; min-height: 44px; min-width: 0; margin-right: auto; text-decoration: none; }
.marca img { height: 40px; width: auto; max-width: 46vw; object-fit: contain; object-position: left center; }
.marca__nome { font: 600 var(--t-corpo)/1 var(--f); letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu a { text-decoration: none; }
.topo__cta { flex: none; display: none; }
.menu-btn {
  flex: none; min-width: 64px; min-height: 44px; padding: 0 10px; margin-right: -10px;
  border: 0; background: none; cursor: pointer;
  font-weight: 500; line-height: 1; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em;
}
.menu-btn__fechar, .menu-btn[aria-expanded="true"] .menu-btn__abrir { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__fechar { display: inline; }

/* Sem JavaScript: os links viram uma linha logo abaixo do nome, num topo que não flutua */
html:not(.js) .topo { position: relative; }
html:not(.js) .topo__barra { flex-wrap: wrap; height: auto; padding-block: 8px; }
html:not(.js) .menu { order: 3; width: 100%; }
html:not(.js) .menu ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
html:not(.js) .menu a { display: inline-flex; align-items: center; min-height: 44px; }
html:not(.js) .menu-btn, html:not(.js) .menu__acoes { display: none; }

/* Com JavaScript, até 1099 px: menu de tela cheia */
@media (max-width: 1099px) {
  .js .menu {
    position: fixed; inset: 0; z-index: 45;
    display: flex; flex-direction: column;
    padding: calc(var(--topo-fim, var(--topo)) + 24px) var(--margem) calc(24px + env(safe-area-inset-bottom));
    background: var(--c-fundo);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity 260ms var(--ease-out), visibility 0s 260ms;
  }
  .js.menu-aberto .menu { visibility: visible; opacity: 1; transition: opacity 260ms var(--ease-out); }
  .js .menu li a { display: flex; align-items: center; min-height: 56px; font: 400 var(--t-titulo)/1.05 var(--f); letter-spacing: -0.03em; }
  .js .menu li, .js .menu__acoes { opacity: 0; transform: translateY(16px); transition: opacity 300ms var(--ease-out), transform 420ms var(--ease-out); }
  .js.menu-aberto .menu li, .js.menu-aberto .menu__acoes { opacity: 1; transform: none; }
  .js.menu-aberto .menu li:nth-child(2) { transition-delay: 40ms; }
  .js.menu-aberto .menu li:nth-child(3) { transition-delay: 80ms; }
  .js.menu-aberto .menu li:nth-child(4) { transition-delay: 120ms; }
  .js.menu-aberto .menu li:nth-child(5) { transition-delay: 160ms; }
  .js.menu-aberto .menu__acoes { transition-delay: 200ms; }
  .menu__acoes { margin-top: auto; padding-top: 40px; }
  .menu__acoes .btn { width: 100%; }
  .js .marca, .js .topo__cta, .js .menu-btn { position: relative; z-index: 46; }
  .menu-aberto, .menu-aberto body { overflow: hidden; }
  .menu-aberto .flutuante { opacity: 0; pointer-events: none; visibility: hidden; }
}

/* ---------- palco: no celular, a foto do início vem primeiro e o rótulo sobe por cima da borda dela ---------- */
.palco { display: grid; grid-template-columns: minmax(0, 1fr); }
.palco__coluna { min-width: 0; }
.palco__fotos { order: -1; padding: 12px 12px 0; }
.palco__foto { display: none; }
.palco__foto[data-foto="inicio"] { display: block; position: relative; height: 36svh; min-height: 220px; max-height: 440px; overflow: hidden; background: var(--c-superficie); }
.palco__foto img { width: 100%; height: 100%; object-fit: cover; }

/* foto de cada seção no celular (no computador ela está no palco) */
.secao-foto { margin: 0 calc(12px - var(--coluna)) 40px; aspect-ratio: 5 / 4; overflow: hidden; background: var(--c-superficie); }
.secao-foto img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- início: o rótulo do pote ---------- */
.inicio { position: relative; z-index: 1; margin-top: -24px; padding: 0 12px; }
.palco--sem-foto .inicio { margin-top: 12px; }
.rotulo { --rp: clamp(18px, 4vw, 56px); display: flex; flex-direction: column; background: var(--c-papel); }
.rotulo__corpo {
  flex: 1; display: grid; justify-items: center; align-content: center; text-align: center;
  padding: 0 var(--rp) clamp(20px, 3vw, 36px);
}
.rotulo__nome { margin-top: 24px; font: 600 var(--t-frase)/1.15 var(--f); letter-spacing: -0.025em; }
.rotulo__nome img { max-height: 56px; width: auto; }
.rotulo__titulo {
  margin-top: 16px; max-width: 100%;
  /* duas linhas em qualquer largura: a letra diminui com o tamanho do título (--letras = metade das letras + 3) */
  font: 400 min(var(--t-titulo), calc((100vw - 24px - 2 * var(--rp)) / (var(--letras, 22) * 0.55)))/1.06 var(--f);
  letter-spacing: -0.035em; text-wrap: balance;
}
.rotulo__sub { margin-top: 14px; max-width: 36ch; }
.rotulo__acoes { margin-top: 24px; width: 100%; }
.rotulo__acoes .btn { width: 100%; }

/* a tabela da informação nutricional: barra grossa no alto e no fim, linhas finas entre as linhas (tabela de verdade) */
.tabela-rotulo { width: 100%; margin-top: 28px; text-align: left; border-top: 10px solid var(--c-tinta); border-bottom: 6px solid var(--c-tinta); }
.tabela-rotulo caption { caption-side: top; padding-bottom: 6px; text-align: left; font: 700 var(--t-corpo)/1.2 var(--f); letter-spacing: -0.02em; }
.tabela-rotulo tr + tr { border-top: 1px solid var(--c-tinta); }
.tabela-rotulo th, .tabela-rotulo td { padding: 9px 0; vertical-align: baseline; }
.tabela-rotulo th { padding-right: 16px; font-weight: 700; white-space: nowrap; }
.tabela-rotulo td { text-align: right; }
.rotulo__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 22px; margin-top: 14px; }
.rotulo__links a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }

/* ---------- seções da coluna ---------- */
.ofertas, .prateleira, .pedido, .entrega { padding: var(--secao) var(--coluna) 0; }
.entrega { padding-bottom: var(--secao); }

/* lista de ofertas: uma coluna estreita, com uma faixa vazia à direita de propósito */
.ofertas__texto { display: grid; gap: 1.1em; width: min(78%, 22rem); }
.ofertas__primeiro { font-weight: 500; }

/* prateleira: a folha impressa, com as bordas de cima e de baixo em ondas */
.folha {
  position: relative; margin-inline: calc(10px - var(--coluna));
  padding: 56px 18px 52px; background: var(--c-papel); text-align: center;
}
.folha::before, .folha::after {
  content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--c-fundo);
  -webkit-mask: var(--onda) 0 0 / 20px 10px repeat-x; mask: var(--onda) 0 0 / 20px 10px repeat-x;
}
.folha::before { top: 0; }
.folha::after { bottom: 0; transform: scaleY(-1); }
.folha__titulo { font: 400 var(--t-titulo)/1.04 var(--f); letter-spacing: -0.035em; }
.folha__nota { max-width: 36ch; margin: 12px auto 0; font-size: var(--t-pequeno); color: var(--c-suave); }
.folha__grupo { margin-top: 48px; }
.folha__grupo-nome { font: 600 var(--t-frase)/1.2 var(--f); letter-spacing: -0.025em; }
.folha__itens { display: grid; gap: 2px; max-width: 26.5rem; margin: 14px auto 0; text-align: left; }
.item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 16px;
  min-height: 44px; padding: 9px 12px; margin-inline: -12px;
  text-decoration: none; transition: background-color 200ms ease;
}
.item__nome { font-weight: 500; }
.item__valor { max-width: 12rem; text-align: right; text-wrap: balance; }
.item__detalhe { grid-column: 1 / -1; font-size: var(--t-pequeno); color: var(--c-suave); }
.item.e-escolhido { background: var(--c-fundo); }
.folha__horario { display: grid; gap: 2px; margin-top: 48px; font-weight: 500; }

/* pedido: o cupom com a borda de baixo em zigue-zague */
.pedido__titulo, .entrega__titulo { max-width: 14ch; font: 400 var(--t-titulo)/1.04 var(--f); letter-spacing: -0.035em; text-wrap: balance; }
.pedido__texto { max-width: 36ch; margin-top: 16px; }
.pedido__sem-js { max-width: 36ch; margin-top: 16px; font-weight: 500; }
.pedido__sem-js a { text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
.js .pedido__sem-js { display: none; }
html:not(.js) .cupom { display: none; }
.cupom {
  display: grid; gap: 32px; max-width: 30rem; margin: 36px calc(10px - var(--coluna)) 0;
  padding: 28px 20px 46px; background: var(--c-papel);
  clip-path: var(--zigue);
}
.cupom__grupo { display: grid; gap: 14px; }
.cupom__cabeca { padding-bottom: 6px; border-bottom: 6px solid var(--c-tinta); font: 700 var(--t-corpo)/1.2 var(--f); letter-spacing: -0.02em; width: 100%; }
.campo { display: grid; gap: 6px; }
.campo > span { font-size: var(--t-pequeno); font-weight: 500; }
.campo select, .campo input {
  width: 100%; min-height: 48px; padding: 10px 12px;
  border: 1px solid var(--c-tinta); border-radius: 0; background: #FFFFFF; /* taste-skill-ignore: campo de formulário (pode ter borda) */
  font-size: max(16px, var(--t-corpo));
}
.campo select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%232A2A26' stroke-width='2'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.qtd { display: grid; grid-template-columns: 48px 72px 48px; }
.qtd__botao { min-height: 48px; border: 1px solid var(--c-tinta); background: var(--c-fundo); cursor: pointer; font-size: 1.375rem; line-height: 1; } /* taste-skill-ignore: botão do campo de quantidade (formulário) */
.qtd input { text-align: center; border-inline: 0; -moz-appearance: textfield; appearance: textfield; }
.qtd input::-webkit-outer-spin-button, .qtd input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cupom__preco:empty { display: none; }
.cupom__preco { font-weight: 500; }

.cupom__itens { display: grid; gap: 4px; }
.cupom__itens li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 10px; }
.ci__linha { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.ci__nome { min-width: 0; }
.ci__tirar { min-width: 44px; min-height: 44px; padding: 0 2px; border: 0; background: none; cursor: pointer; font-size: var(--t-pequeno); text-decoration: underline; text-underline-offset: 0.25em; }
.cupom__vazio { color: var(--c-suave); font-size: var(--t-pequeno); }
.linha { display: flex; align-items: baseline; gap: 8px; }
.linha > span:first-child, .linha > span:last-child { flex: none; max-width: 70%; }
.linha__pontos { flex: 1 1 16px; min-width: 16px; border-bottom: 4px dotted var(--c-suave); transform: translateY(-5px); }
.linha--total { font-weight: 700; }

.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.opcao span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--c-fundo); font-weight: 500; transition: background-color 160ms ease, color 160ms ease; }
.opcao input:checked + span { background: var(--c-tinta); color: var(--c-papel); }
.opcao input:focus-visible + span { outline: 3px solid var(--c-tinta); outline-offset: 3px; } /* taste-skill-ignore: foco da opção */
.cupom__entrega { display: grid; gap: 14px; }
/* a caixa de marcar: o campo de verdade cobre a linha inteira (44 px para o dedo) e o quadrado é desenhado */
.marcar { position: relative; display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 500; }
.marcar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.marcar span { display: inline-flex; align-items: center; gap: 12px; }
.marcar span::before {
  content: ""; flex: none; width: 22px; height: 22px; border: 2px solid var(--c-tinta); background: #FFFFFF; /* taste-skill-ignore: caixa de marcar (formulário) */
  background-position: center; background-repeat: no-repeat; background-size: 14px 14px;
}
.marcar input:checked + span::before { background-color: var(--c-tinta); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 7.5l3.2 3L12 3.5' fill='none' stroke='%23FFFFFF' stroke-width='2.4'/%3E%3C/svg%3E"); }
.marcar input:focus-visible + span::before { outline: 3px solid var(--c-tinta); outline-offset: 3px; } /* taste-skill-ignore: foco da caixa de marcar */

.cupom__enviar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  min-height: 60px; padding: 12px 18px; margin-inline: -6px;
  border: 0; background: var(--c-destaque); color: var(--c-destaque-tinta);
  font: 600 var(--t-corpo)/1.25 var(--f); letter-spacing: -0.01em; text-align: left; cursor: pointer;
  transition: background-color 200ms ease;
}
.cupom__enviar:focus-visible { outline-offset: -7px; outline-color: var(--c-destaque-tinta); box-shadow: inset 0 0 0 3px var(--c-tinta); } /* taste-skill-ignore: anel de foco por dentro (o recorte do cupom cortaria o de fora) */
.cupom__contagem { font-weight: 400; }
.cupom__aviso { font-size: var(--t-pequeno); color: var(--c-suave); }
.cupom__aviso.e-alerta { color: var(--c-tinta); font-weight: 600; }

/* entrega: linhas de duas pontas numa coluna estreita */
.entrega__texto { max-width: 38ch; margin-top: 16px; }
.entrega__grupo { max-width: 32.5rem; margin-top: 40px; }
.entrega__regiao { margin-bottom: 2px; font: 400 var(--t-corpo)/1.4 var(--f); color: var(--c-suave); }
.entrega__grupo li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; min-height: 44px; padding: 9px 0; }
.entrega__bairro { font-weight: 500; }
.entrega__valor { flex: none; text-align: right; font-size: var(--t-pequeno); color: var(--c-suave); }
.entrega__pergunta { margin-top: 32px; }

/* ---------- marcas: a faixa verde de ponta a ponta ---------- */
.marcas { padding: clamp(64px, 8vw, 128px) 0; background: var(--c-escuro); color: var(--c-escuro-tinta); overflow-x: clip; }
.marcas__titulo { padding-inline: var(--margem); font: 500 var(--t-frase)/1.2 var(--f); letter-spacing: -0.02em; }
.marcas__linha {
  display: flex; flex-wrap: wrap; gap: 0 0.45em; margin-top: 20px; padding-inline: var(--margem);
  font: 500 var(--t-cartaz)/1.08 var(--f); letter-spacing: -0.04em;
}
.marcas__linha li { white-space: nowrap; }
.marcas__linha li + li::before { content: "·"; margin-right: 0.45em; opacity: 0.55; }
.marcas__linha + .marcas__linha { margin-top: 4px; }
/* com o movimento pronto, cada fileira vira uma linha só, que corre com a rolagem (main.js) */
.marcas--corre .marcas__linha { flex-wrap: nowrap; width: max-content; will-change: transform; }
.marcas__nota { max-width: 60ch; margin-top: 32px; padding-inline: var(--margem); font-size: var(--t-pequeno); }

/* ---------- dúvidas: as respostas como texto corrido ---------- */
.duvidas { padding: var(--secao) var(--margem) 0; }
.duvidas__titulo { font: 400 var(--t-titulo)/1.04 var(--f); letter-spacing: -0.035em; }
.duvidas__texto { display: grid; gap: 18px; margin-top: 28px; }
.duvidas__texto p { max-width: 62ch; line-height: 1.55; }
.duvidas__texto strong { font-weight: 600; }

/* ---------- onde fica: o endereço em linhas grandes ---------- */
.onde { margin-top: var(--secao); }
.onde__linha {
  display: flex; align-items: flex-end; gap: 0.35em;
  min-height: clamp(84px, 10.5vw, 150px); padding: 14px var(--margem) clamp(10px, 1.4vw, 20px);
  font: 400 min(var(--t-cartaz), 9.6vw)/1.02 var(--f); letter-spacing: -0.04em; overflow-wrap: anywhere;
}
.onde__linha:nth-child(odd) { background: var(--c-superficie); }
.onde__linha a { text-decoration: none; }
.onde__linha--saudacao { justify-content: space-between; align-items: center; background: var(--c-destaque) !important; color: var(--c-destaque-tinta); }
.onde__seta { flex: none; display: grid; place-items: center; width: 56px; height: 56px; background: var(--c-papel); color: var(--c-tinta); }
.onde__seta svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.onde__mais { display: grid; gap: 32px; padding: 48px var(--margem) 0; }
.onde__sub { margin-bottom: 8px; font: 600 var(--t-corpo)/1.3 var(--f); }
.horarios { display: grid; gap: 2px; max-width: 26rem; }
.horarios li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 10px; margin-inline: -10px; }
.horarios li.e-hoje { background: var(--c-superficie); font-weight: 600; }
.onde__rotas { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 16px; }
.onde__mapa { aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-superficie); }
.onde__mapa iframe { display: block; width: 100%; height: 100%; border: 0; }
.onde__mapa--reservado { display: grid; place-items: center; padding: 24px; text-align: center; color: var(--c-suave); font-weight: 500; }
.onde__mapa--foco { outline: 3px solid var(--c-tinta); outline-offset: 3px; } /* taste-skill-ignore: o mapa recebeu o foco pelo teclado */

/* ---------- chamada final: a última foto; no celular o texto desce para o verde ---------- */
.fim { margin-top: var(--secao); background: var(--c-escuro); color: var(--c-escuro-tinta); }
.fim__foto { height: 70svh; min-height: 320px; overflow: hidden; }
.fim__foto img { width: 100%; height: 100%; object-fit: cover; }
.fim__texto { display: grid; gap: 18px; justify-items: start; padding: 44px var(--margem) 8px; }
.fim__titulo { max-width: 14ch; font: 400 var(--t-titulo)/1.04 var(--f); letter-spacing: -0.035em; text-wrap: balance; }
.fim__texto p { max-width: 36ch; }
.fim__texto .btn { width: 100%; margin-top: 8px; }

/* ---------- rodapé: linhas baixas no verde, o código de barras de volta como faixa fina ---------- */
.rodape { padding: 48px var(--margem) calc(96px + env(safe-area-inset-bottom)); /* embaixo, o espaço do WhatsApp flutuante */ background: var(--c-escuro); color: var(--c-escuro-tinta); font-size: var(--t-pequeno); }
.rodape a { text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.barras--fina { height: 8px; margin-bottom: 28px; }
.rodape .barras i:nth-child(odd) { background: var(--c-escuro-tinta); }
.rodape__linha { display: grid; gap: 10px; }
.rodape__quem { font-weight: 500; }
.rodape__links, .rodape__contatos { display: flex; flex-wrap: wrap; gap: 0 22px; }
.rodape__links a, .rodape__contatos a { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.rodape__legal { display: grid; gap: 8px; justify-items: start; margin-top: 28px; }
.rodape__aviso { max-width: 60ch; font-weight: 500; }
.rodape__legal a { display: inline-flex; align-items: center; min-height: 44px; }
.rodape__mais summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; }
.rodape__privacidade, .rodape__creditos { display: grid; gap: 8px; max-width: 70ch; padding: 4px 0 12px; }
.rodape__creditos a, .rodape__privacidade a { display: inline; min-height: 0; }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px;
  background: var(--c-destaque); color: var(--c-destaque-tinta);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s 300ms;
}
.flutuante svg { width: 28px; height: 28px; fill: currentColor; }
.flutuante--visivel { opacity: 1; visibility: visible; transform: none; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); }
html:not(.js) .flutuante { opacity: 1; visibility: visible; transform: none; }

/* ---------- celular grande e tablet ---------- */
@media (min-width: 420px) {
  .topo__cta { display: inline-flex; }
}
@media (min-width: 600px) {
  .rotulo__acoes { width: auto; }
  .rotulo__acoes .btn { width: auto; }
  .folha { margin-inline: 0; padding-inline: 40px; }
  .cupom { margin-inline: 0; padding-inline: 28px; }
  .cupom__escolha { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  .cupom__escolha .campo--largo, .cupom__escolha .btn, .cupom__preco { grid-column: 1 / -1; }
  .fim__texto .btn { width: auto; }
  .onde__seta { width: 0.9em; height: 0.9em; min-width: 56px; min-height: 56px; }
}

/* ---------- só no celular e no tablet (abaixo do palco dividido) ---------- */
@media (max-width: 979.98px) {
  /* os links grandes do endereço com 44 px de altura para o dedo */
  .onde__linha a { display: inline-block; min-height: 44px; padding-block: 6px; }
}

/* ---------- computador: o palco dividido ---------- */
@media (min-width: 980px) {
  .palco { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .palco__coluna { grid-column: 1; grid-row: 1; }
  .palco__fotos {
    order: 0; grid-column: 2; grid-row: 1;
    position: sticky; top: var(--topo); height: calc(100svh - var(--topo)); padding: 0;
  }
  .palco__foto, .palco__foto[data-foto="inicio"] {
    display: block; position: absolute; inset: 12px 12px 12px 6px; height: auto; min-height: 0; max-height: none;
    opacity: 0; background: var(--c-superficie);
  }
  .palco__foto.e-atual { opacity: 1; z-index: 1; }
  .secao-foto { display: none; }
  .palco--sem-palco { grid-template-columns: minmax(0, 1fr); }

  .inicio { margin-top: 0; padding: 12px 6px 0 12px; }
  .palco--sem-palco .inicio { padding-right: 12px; }
  .rotulo { min-height: calc(100svh - var(--topo) - 24px); }
  .rotulo .barras { height: 56px; }
  .rotulo__titulo { font-size: min(var(--t-titulo), calc((50vw - 18px - 2 * var(--rp)) / (var(--letras, 22) * 0.55))); }
  .palco--sem-palco .rotulo__titulo { font-size: min(var(--t-titulo), calc((100vw - 24px - 2 * var(--rp)) / (var(--letras, 22) * 0.55))); }
  .tabela-rotulo { max-width: 30rem; }

  .ofertas__texto { width: min(100%, 21.25rem); }
  .folha, .cupom { margin-inline: 0; }
  .folha { padding: 64px clamp(32px, 4vw, 64px) 60px; }
  .cupom { max-width: 30rem; }

  .marcas__titulo, .marcas__linha, .marcas__nota { padding-inline: var(--margem); }

  .duvidas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .duvidas__titulo { grid-column: 1 / 4; max-width: 8ch; }
  .duvidas__texto { grid-column: 5 / -1; display: block; columns: 2; column-gap: 56px; margin-top: 8px; }
  .duvidas__texto p { break-inside: avoid; margin-bottom: 20px; }

  .onde__linha { font-size: var(--t-cartaz); }
  .onde__mais { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; padding-top: 64px; }
  .onde__info { grid-column: 1 / 6; }
  .onde__mapa { grid-column: 7 / -1; aspect-ratio: 16 / 10; }

  .fim { position: relative; min-height: 90svh; display: grid; }
  .fim__foto { position: absolute; inset: 0; height: auto; }
  /* a foto anda um pouco para a esquerda: o assunto fica na metade esquerda e o lado calmo recebe o texto */
  .fim__foto img { width: 118%; max-width: none; margin-left: -18%; filter: brightness(0.72); }
  .fim__texto {
    position: relative; z-index: 1; align-self: end;
    width: min(38%, 32rem); margin-left: 58%; padding: 0 0 12svh;
  }
  .fim--sem-foto { min-height: 0; }
  .fim--sem-foto .fim__texto { margin-left: var(--margem); width: auto; padding: 96px 0; }

  .rodape { padding-top: 0; }
  .barras--fina { margin-inline: calc(-1 * var(--margem)); }
  .rodape__linha { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .rodape__quem { grid-column: auto; padding-top: 11px; }
  .rodape__links { justify-content: center; }
  .rodape__contatos { justify-content: flex-end; }
  .rodape__legal { grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: start; gap: 0 32px; margin-top: 36px; }
  .rodape__aviso { grid-column: 1 / -1; margin-bottom: 8px; }
}

@media (min-width: 1100px) {
  .topo__barra { gap: 28px; }
  .menu { display: flex; align-items: center; gap: 28px; }
  .menu ul { display: flex; gap: 24px; }
  .menu a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; }
  .menu__acoes { display: none; }
  .menu-btn { display: none; }
}

/* ---------- só com mouse ---------- */
@media (hover: hover) and (pointer: fine) {
  .menu a:hover, .rotulo__links a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.28em; }
  .btn--destaque:hover, .cupom__enviar:hover { background: var(--c-destaque-forte); }
  .btn--tinta:hover { background: #000000; }
  .btn--papel:hover { background: #FFFFFF; }
  .item:hover { background: var(--c-fundo); }
  .item:hover .item__nome { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
  .link:hover { text-decoration-thickness: 3px; }
  .opcao:hover span { background: var(--c-superficie); }
  .opcao input:checked:hover + span { background: var(--c-tinta); }
  .qtd__botao:hover { background: var(--c-superficie); }
  .onde__linha a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
  .onde__seta:hover { background: #FFFFFF; }
}

/* ---------- toque: alvos de pelo menos 44 px (ergonomia, sem mudar o layout) ---------- */
@media (hover: none), (pointer: coarse) {
  .rodape__links a, .rodape__contatos a, .rotulo__links a { min-width: 44px; }
  .onde__linha a { display: inline-block; padding-block: 6px; }
}

/* ---------- movimento (só sem "reduzir movimento"; o resto fica no main.js) ---------- */
/* o início se move só com CSS: a foto assenta, o rótulo sobe e o código de barras "imprime". Nada começa escondido. */
.movimento .palco__foto[data-foto="inicio"] img { animation: assenta 1.8s var(--ease-out) both; }
.movimento .rotulo { animation: sobe 1s var(--ease-out) both; }
.movimento .rotulo .barras { animation: imprime 1.1s 0.15s var(--ease-out) both; transform-origin: 0 50%; }
.movimento .rotulo:focus-within { animation: none; }
/* a troca macia da foto do palco */
.movimento .palco__foto { transition: opacity 1.6s ease; }
.movimento .palco__foto.e-atual img { animation: assenta 2.4s var(--ease-out) both; }
/* a linha nova do cupom desce de dentro do papel */
.movimento .cupom__itens li.e-novo { animation: linha-nova 0.5s var(--ease-out) both; }
@keyframes assenta { from { transform: scale(1.06); } }
@keyframes sobe { from { transform: translateY(28px); } }
@keyframes imprime { from { transform: scaleX(0); } }
@keyframes linha-nova { from { opacity: 0; transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}