/* Prévia do Ryori: feita à mão pela Capixel (padrão Cardiosul). */

@font-face { font-family: "Shippori Mincho B1"; font-style: normal; font-weight: 700; font-display: swap; src: url(fontes/shippori-mincho-b1-700.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: "Zen Kaku Gothic New"; font-style: normal; font-weight: 400; font-display: swap; src: url(fontes/zen-kaku-400.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: "Zen Kaku Gothic New"; font-style: normal; font-weight: 700; font-display: swap; src: url(fontes/zen-kaku-700.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; }
/* Reservas com as medidas das fontes da página (fontTools), para a troca não mexer na tela */
@font-face { font-family: "Mincho reserva"; font-weight: 700; src: local("Georgia Bold"), local("Georgia-Bold"), local("Georgia"), local("Noto Serif Bold"), local("NotoSerif-Bold"); size-adjust: 95.28%; ascent-override: 121.75%; descent-override: 30.23%; line-gap-override: 0%; }
@font-face { font-family: "Gothic reserva"; font-weight: 400; src: local("Arial"), local("ArialMT"), local("Roboto"), local("Roboto-Regular"); size-adjust: 97.7%; ascent-override: 118.73%; descent-override: 29.48%; line-gap-override: 0%; }
@font-face { font-family: "Gothic reserva"; font-weight: 700; src: local("Arial Bold"), local("Arial-BoldMT"), local("Roboto Bold"), local("Roboto-Bold"); size-adjust: 92.99%; ascent-override: 124.74%; descent-override: 30.97%; line-gap-override: 0%; }

:root {
  --sumi: #161210;
  --madeira: #221813;
  --madeira-2: #2c2019;
  --linha: #43332a;
  --papel: #f5efe6;
  --nevoa: #c7bdb1;
  --ambar: #ffb547;
  --vermelho: #c8231c;
  --vermelho-escuro: #a41b15;
  --parede: #ece8e3;
  --parede-2: #e1dcd5;
  --tinta: #1b1714;
  --tinta-2: #4b4139;
  --zap: #0f7a41;
  --f-titulo: "Shippori Mincho B1", "Mincho reserva", Georgia, serif;
  --f-texto: "Zen Kaku Gothic New", "Gothic reserva", Arial, sans-serif;
  --largura: 1180px;
  --margem: 20px;
  --topo-altura: 64px;
  --chips-altura: 60px;
  --raio: 14px;
}
@media (min-width: 960px) { :root { --margem: 40px; --topo-altura: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-altura) + 16px); scroll-padding-bottom: 96px; scrollbar-gutter: stable; }
html:has(dialog[open]) { overflow: hidden; }
body { margin: 0; background: var(--sumi); color: var(--papel); font-family: var(--f-texto); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
::selection { background: var(--vermelho); color: #fff; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--ambar); outline-offset: 3px; border-radius: 6px; }
.onde :focus-visible, .perguntas :focus-visible, .janela :focus-visible { outline-color: var(--vermelho); }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }

.pular { position: absolute; left: 12px; top: -80px; z-index: 200; background: var(--papel); color: var(--tinta); padding: 12px 18px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.pular:focus-visible { top: 12px; outline-color: var(--vermelho); }

.nao-quebra { white-space: nowrap; }
.dentro { max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); }

/* faixa da prévia */
.faixa-previa { background: #2a1f18; color: #e9dfd2; font-size: .8125rem; line-height: 1.3; text-align: center; padding: 8px 16px; font-weight: 700; letter-spacing: .01em; }

/* topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(22, 18, 16, .96); border-bottom: 1px solid transparent; transition: border-color .25s; }
.topo.rolou { border-color: var(--linha); }
.topo__dentro { position: relative; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 0 var(--margem); height: var(--topo-altura); display: flex; align-items: center; gap: 14px; }
.topo__marca { display: flex; align-items: center; margin-right: auto; min-height: 48px; border-radius: 10px; }
.topo__marca img { width: 44px; height: 44px; border-radius: 10px; }
.topo__nav { display: none; gap: 2px; }
.topo__nav a { color: var(--papel); text-decoration: none; font-weight: 700; padding: 10px 13px; border-radius: 999px; transition: background-color .2s; }
.topo__nav a:hover { background: var(--madeira-2); }
.topo__pedir { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 999px; background: var(--vermelho); color: #fff; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.topo__pedir:hover { background: var(--vermelho-escuro); }
.topo__pedir svg { width: 20px; height: 20px; }
.topo__menu { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--linha); border-radius: 999px; background: transparent; }
.topo__menu svg { width: 22px; height: 22px; }
.topo__menu-fechar, .topo__menu[aria-expanded="true"] .topo__menu-abrir { display: none; }
.topo__menu[aria-expanded="true"] .topo__menu-fechar { display: block; }
@media (max-width: 959px) {
  .topo__nav.aberto { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--sumi); border-bottom: 1px solid var(--linha); padding: 8px var(--margem) 16px; }
  .topo__nav.aberto a { padding: 12px 8px; border-radius: 10px; min-height: 48px; display: flex; align-items: center; }
}
@media (max-width: 380px) { .topo__pedir span { font-size: .9375rem; } .topo__pedir { padding: 0 13px; } }
@media (min-width: 960px) { .topo__nav { display: flex; } .topo__menu { display: none; } }

/* botões */
.botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 1.0625rem; text-decoration: none; border: 2px solid transparent; transition: background-color .2s, border-color .2s, color .2s; text-align: center; line-height: 1.25; }
.botao svg { width: 21px; height: 21px; flex: none; }
.botao--vermelho { background: var(--vermelho); color: #fff; }
.botao--vermelho:hover { background: var(--vermelho-escuro); }
.botao--linha { border-color: rgba(245, 239, 230, .55); color: var(--papel); background: transparent; }
.botao--linha:hover { border-color: var(--papel); background: rgba(245, 239, 230, .06); }
.botao--escuro { background: var(--tinta); color: var(--papel); }
.botao--escuro:hover { background: #000; }
.botao--linha-escura { border-color: rgba(27, 23, 20, .45); color: var(--tinta); }
.botao--linha-escura:hover { border-color: var(--tinta); }
.botao--zap { background: var(--zap); color: #fff; width: 100%; }
.botao--zap:hover { background: #0b6634; }
.link-forte { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--ambar); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.link-forte:hover { color: #ffd08a; }

/* capa: o letreiro do salão acende */
.capa { display: grid; gap: 24px; padding: 0 0 8px; }
.capa__texto { padding: 0 var(--margem); }
.capa__linha { color: var(--ambar); font-weight: 700; font-size: .9375rem; margin-bottom: 12px; }
.capa h1 { font-family: var(--f-titulo); font-size: clamp(2.125rem, 1.4rem + 3.4vw, 3.6rem); line-height: 1.12; letter-spacing: -.005em; max-width: 15ch; text-wrap: balance; }
.capa__sub { margin-top: 16px; color: var(--nevoa); font-size: 1.0625rem; line-height: 1.6; max-width: 34em; }
.capa .botoes { margin-top: 26px; }
.selos { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.selos li { border: 1px solid var(--linha); border-radius: 999px; padding: 6px 14px; font-size: .9375rem; color: var(--papel); background: var(--madeira); }
.capa__foto { position: relative; margin: 0; overflow: hidden; background: #2a2724; aspect-ratio: 4 / 3; order: -1; }
.capa__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
.capa__foto picture { display: block; width: 100%; height: 100%; }
.js .capa__foto img { animation: acender 1.1s both; }
@keyframes acender {
  0%, 30% { filter: brightness(.55) saturate(.15); }
  36% { filter: brightness(1.04) saturate(1.05); }
  44% { filter: brightness(.68) saturate(.45); }
  54%, 100% { filter: brightness(1) saturate(1); }
}
.status { position: absolute; left: 12px; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 10px; width: fit-content; max-width: calc(100% - 28px); padding: 9px 14px; border-radius: 12px; background: rgba(22, 18, 16, .86); color: var(--papel); font-size: .9375rem; font-weight: 700; line-height: 1.35; }
.js .status { animation: aparecer .3s .8s both; }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.status__longo { display: none; }
@media (min-width: 960px) and (min-height: 481px) { .status { top: auto; bottom: 14px; left: 14px; } .status__curto { display: none; } .status__longo { display: inline; } }
.status__luz { width: 10px; height: 10px; border-radius: 50%; background: var(--nevoa); flex: none; }
.status.aberto .status__luz { background: #59d98e; box-shadow: 0 0 0 4px rgba(89, 217, 142, .2); }
.status.fechado .status__luz { background: var(--ambar); }
@media (min-width: 700px) and (max-width: 959px) { .capa__foto { aspect-ratio: 16 / 9; } }
@media (min-width: 960px) {
  .capa { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 48px; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding: 48px var(--margem) 64px; }
  .capa__texto { padding: 0; }
  .capa__foto { order: 0; aspect-ratio: 5 / 6; border-radius: 22px; max-height: calc(100vh - 170px); min-height: 460px; }
}
/* celular deitado: título e botão principal na primeira tela */
@media (orientation: landscape) and (max-height: 480px) {
  .capa { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; gap: 20px; padding: 16px var(--margem) 24px; }
  .capa__texto { padding: 0; }
  .capa__linha { margin-bottom: 6px; font-size: .875rem; }
  .capa h1 { font-size: 1.625rem; max-width: 20ch; }
  .capa__sub { font-size: .9375rem; margin-top: 8px; }
  .capa .botoes { margin-top: 14px; }
  .capa .botao { min-height: 46px; padding: 0 18px; font-size: 1rem; }
  .selos { display: none; }
  .capa__foto { order: 0; aspect-ratio: 4 / 3; border-radius: 16px; min-height: 0; max-height: none; }
}

/* cardápio */
.cardapio { padding: 72px 0 40px; background: var(--sumi); }
.cardapio__topo { display: grid; gap: 20px; align-items: end; }
.cardapio h2, .como h2, .salao h2, .perguntas h2, .onde h2, .final h2 { font-family: var(--f-titulo); font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.6rem); line-height: 1.18; text-wrap: balance; }
.cardapio h2 { max-width: 20ch; }
.cardapio__intro { margin-top: 12px; color: var(--nevoa); max-width: 40em; }
.cardapio__acoes .botao { width: 100%; }
@media (min-width: 760px) { .cardapio__topo { grid-template-columns: 1fr auto; } .cardapio__acoes .botao { width: auto; } }
.cardapio__busca { position: relative; margin-top: 28px; display: flex; align-items: center; }
.cardapio__busca > svg { position: absolute; left: 16px; width: 20px; height: 20px; color: var(--nevoa); pointer-events: none; }
.cardapio__busca input { width: 100%; min-height: 52px; padding: 0 96px 0 46px; border-radius: 14px; border: 1px solid var(--linha); background: var(--madeira); color: var(--papel); font-size: 1rem; }
.cardapio__busca input::placeholder { color: #a99d90; }
.cardapio__busca input:focus-visible { outline: 2px solid var(--ambar); outline-offset: 1px; border-color: var(--ambar); }
.cardapio__busca input::-webkit-search-cancel-button { display: none; }
.cardapio__limpar { position: absolute; right: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--madeira-2); color: var(--papel); font-weight: 700; }
.cardapio__limpar[hidden] { display: none; }
.cardapio__resultado { min-height: 1.6em; margin-top: 8px; color: var(--nevoa); font-size: .9375rem; }

.chips { position: sticky; top: var(--topo-altura); z-index: 40; background: rgba(22, 18, 16, .97); border-bottom: 1px solid var(--linha); }
.chips__trilho { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px var(--margem); max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; scroll-padding-inline: var(--margem); -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--margem), #000 calc(100% - var(--margem)), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 var(--margem), #000 calc(100% - var(--margem)), transparent 100%); }
.chips__trilho::-webkit-scrollbar { display: none; }
.chip { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linha); color: var(--papel); text-decoration: none; font-weight: 700; font-size: .9375rem; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.chip:hover { border-color: var(--nevoa); }
.chip.ativo { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.chip[hidden] { display: none; }

.cardapio__lista { padding-top: 8px; }
.categoria { padding-top: 40px; scroll-margin-top: calc(var(--chips-altura) - 8px); }
.categoria[hidden] { display: none; }
.categoria__topo { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--linha); position: relative; }
.categoria__topo::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 56px; background: var(--vermelho); transform-origin: left; }
.js .categoria__topo::after { transform: scaleX(0); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .categoria.visto .categoria__topo::after { transform: scaleX(1); }
.categoria__titulo { font-family: var(--f-titulo); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); line-height: 1.2; }
.categoria__conta { color: var(--nevoa); font-size: .9375rem; }
.categoria__nota { margin: -6px 0 18px; color: var(--nevoa); font-size: .9375rem; }
.categoria__itens { display: grid; gap: 12px; }
@media (min-width: 960px) { .categoria__itens { grid-template-columns: 1fr 1fr; gap: 14px 18px; } }

.item { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: var(--raio); background: var(--madeira); border: 1px solid #2f231b; }
.item[hidden] { display: none; }
.item__foto { width: 88px; height: 88px; border-radius: 10px; object-fit: cover; background: var(--madeira-2); }
.item__foto--desenho { display: flex; align-items: center; justify-content: center; color: var(--ambar); }
.item__foto--desenho svg { width: 52px; height: 52px; }
@media (min-width: 960px) { .item { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; } .item__foto { width: 112px; height: 112px; } .item__foto--desenho svg { width: 62px; height: 62px; } }
.item__texto { display: flex; flex-direction: column; min-width: 0; }
.item__nome { font-size: 1.0625rem; line-height: 1.35; font-weight: 700; }
.item__desc { margin-top: 4px; color: var(--nevoa); font-size: .9375rem; line-height: 1.5; }
.item__desc--nota { font-size: .875rem; }
.item__var { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: .9375rem; }
.item__var li { display: flex; align-items: baseline; gap: 6px; }
.var__nome { color: var(--papel); }
.var__nome small { display: block; color: var(--nevoa); font-size: .8125rem; line-height: 1.4; }
.var__pontos { flex: 1 1 auto; min-width: 12px; border-bottom: 1px dotted #6d5a4c; transform: translateY(-4px); }
.var__preco { color: var(--ambar); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.item__aviso { margin-top: 8px; font-size: .8125rem; font-weight: 700; color: var(--papel); background: #3a2a20; border-radius: 8px; padding: 6px 10px; }
.item__pe { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.item__preco { color: var(--ambar); font-weight: 700; font-size: 1.0625rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__preco small { color: var(--nevoa); font-weight: 400; font-size: .8125rem; }
.item__add { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid #5a463a; background: var(--madeira-2); color: var(--papel); font-weight: 700; font-size: .9375rem; transition: background-color .2s, border-color .2s, transform .15s; }
.item__add svg { width: 18px; height: 18px; }
.item__add:hover { border-color: var(--ambar); }
.item__add.adicionou { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.cardapio__vazio { padding: 40px 0; display: grid; gap: 16px; justify-items: start; color: var(--nevoa); }
.cardapio__vazio[hidden] { display: none; }

/* como pedir */
.como { padding: 72px 0; background: var(--madeira); border-top: 1px solid #2f231b; }
.como__grade { display: grid; gap: 40px; }
.como__intro { margin-top: 12px; color: var(--nevoa); max-width: 36em; }
.canais { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 22px; }
.canal { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; }
.canal__icone { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--sumi); color: var(--ambar); }
.canal h3 { font-size: 1.125rem; line-height: 1.35; }
.canal p { margin-top: 4px; color: var(--nevoa); }
.como__pagamento { margin-top: 28px; padding: 16px 18px; border-radius: 12px; background: var(--sumi); color: var(--nevoa); font-size: .9375rem; }
.como__pagamento strong { color: var(--papel); }
.como__fotos { position: relative; min-height: 300px; max-width: 400px; width: 100%; justify-self: center; }
.polaroide { position: absolute; margin: 0; padding: 10px 10px 12px; background: var(--papel); border-radius: 6px; width: 170px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); }
.polaroide img { width: 150px; height: 150px; object-fit: cover; border-radius: 2px; }
.polaroide--a { left: 6%; top: 10px; transform: rotate(-5deg); }
.polaroide--b { right: 6%; top: 104px; transform: rotate(4deg); }
.js .polaroide { transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .6s; }
.js .como:not(.visto) .polaroide--a { transform: rotate(0) translateY(16px); opacity: 0; }
.js .como:not(.visto) .polaroide--b { transform: rotate(0) translateY(26px); opacity: 0; }
@media (min-width: 960px) {
  .como__grade { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: 64px; }
  .como__fotos { min-height: 380px; }
  .polaroide { width: 200px; } .polaroide img { width: 180px; height: 180px; }
  .polaroide--b { top: 150px; }
}

/* salão */
.salao { padding: 80px 0; background: var(--sumi); }
.salao__grade { display: grid; gap: 28px; }
.salao__texto p { margin-top: 14px; color: var(--nevoa); max-width: 36em; }
.salao__texto h2 + p { margin-top: 18px; }
.salao__foto { margin: 0; overflow: hidden; border-radius: 18px; background: var(--madeira); }
.salao__foto img { width: 100%; height: 100%; object-fit: cover; }
.salao__fotos { position: relative; padding-bottom: 56px; margin-right: 12px; }
.salao__foto--grande { aspect-ratio: 4 / 5; }
.salao__foto--drink { position: absolute; right: -12px; bottom: 0; width: 40%; aspect-ratio: 3 / 4; border: 6px solid var(--sumi); border-radius: 18px; }
.salao__extras { display: grid; gap: 16px; margin-top: 26px; }
.extra { padding: 18px; border-radius: 14px; background: var(--madeira); border: 1px solid #2f231b; }
.extra h3 { font-size: 1.125rem; }
.extra p { margin-top: 6px !important; }
.aviso-alcool { font-size: .8125rem; font-weight: 700; color: var(--papel) !important; }
.js .salao__foto { transition: opacity .8s, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .salao:not(.visto) .salao__foto { opacity: 0; transform: translateY(18px); }
@media (min-width: 700px) { .salao__extras { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .salao__grade { grid-template-columns: 440px minmax(0, 1fr); gap: 72px; align-items: center; }
  .salao__foto--drink { width: 200px; right: -40px; }
}

/* perguntas (parede clara, como a do salão) */
.perguntas { padding: 80px 0; background: var(--parede); color: var(--tinta); }
.perguntas__grade { display: grid; gap: 32px; }
.perguntas__lado p { margin-top: 12px; color: var(--tinta-2); max-width: 30em; }
.perguntas__lado .botao { margin-top: 22px; }
.perguntas__foto { margin: 28px 0 0; max-width: 300px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; }
.perguntas__foto img { width: 100%; height: 100%; object-fit: cover; }
.js .perguntas__foto img { transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); transform: scale(1.06); }
.js .perguntas.visto .perguntas__foto img { transform: scale(1); }
.pergunta { border-bottom: 1px solid #cfc8bf; }
.pergunta summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 4px; cursor: pointer; font-weight: 700; font-size: 1.0625rem; line-height: 1.4; list-style: none; border-radius: 8px; }
.pergunta summary::-webkit-details-marker { display: none; }
.pergunta summary svg { width: 22px; height: 22px; flex: none; color: var(--vermelho); transition: transform .25s; }
.pergunta[open] summary svg { transform: rotate(180deg); }
.pergunta p { padding: 0 4px 18px; color: var(--tinta-2); max-width: 40em; }
.js .pergunta[open] p { animation: abrir .3s ease-out; }
@keyframes abrir { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (min-width: 960px) { .perguntas__grade { grid-template-columns: 360px minmax(0, 1fr); gap: 64px; align-items: start; } .perguntas__lado { position: sticky; top: calc(var(--topo-altura) + 24px); } }

/* onde fica */
.onde { padding: 80px 0 64px; background: var(--parede-2); color: var(--tinta); }
.onde__grade { display: grid; gap: 32px; align-items: center; }
.onde__endereco { margin-top: 14px; font-size: 1.125rem; line-height: 1.6; }
.onde .botoes { margin-top: 22px; }
.horarios { margin: 28px 0 0; display: grid; gap: 10px; }
.horarios div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #c9c1b7; }
.horarios dt { font-weight: 700; }
.horarios dd { margin: 0; color: var(--tinta-2); }
.onde__agora { margin-top: 16px; font-weight: 700; min-height: 1.6em; }
.onde__desenho svg { width: 100%; height: auto; }
.mont { stroke: none; }
.telhado { fill: var(--tinta); }
.pino-mapa path { fill: var(--vermelho); }
.pino-mapa circle { fill: var(--parede-2); }
.js .telhado { clip-path: inset(0 100% 0 0); transition: clip-path 1.1s .2s cubic-bezier(.4, .1, .2, 1); }
.js .onde.visto .telhado { clip-path: inset(0 0 0 0); }
.js .nevoa-faixa { transition: transform 2.4s ease-out, opacity 1.2s; transform: translateX(-24px); opacity: 0; }
.js .onde.visto .nevoa-faixa { transform: none; opacity: 1; }
.js .pino-mapa { transition: transform .7s 1s cubic-bezier(.3, 1.4, .5, 1), opacity .3s 1s; transform: translateY(-26px); opacity: 0; transform-box: fill-box; }
.js .onde.visto .pino-mapa { transform: none; opacity: 1; }
@media (min-width: 960px) { .onde__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; } }

/* chamada final */
.final { padding: 80px 0; background: var(--sumi); }
.final__grade { display: grid; gap: 32px; align-items: center; }
.final p { margin-top: 14px; color: var(--nevoa); max-width: 32em; }
.final .botoes { margin-top: 26px; }
.final__foto { margin: 0; overflow: hidden; border-radius: 20px; aspect-ratio: 1620 / 1100; background: var(--madeira); }
.final__foto img { width: 100%; height: 100%; object-fit: cover; }
.js .final__foto img { transition: transform 1.4s cubic-bezier(.2, .7, .2, 1); transform: scale(1.05); }
.js .final.visto .final__foto img { transform: scale(1); }
@media (min-width: 960px) { .final__grade { grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; } }

/* rodapé */
.rodape { background: #0f0c0b; color: var(--nevoa); padding: 56px 0 120px; font-size: .9375rem; }
.rodape__dentro { display: grid; gap: 28px; }
.rodape__marca img { width: 72px; height: 72px; border-radius: 14px; }
.rodape__marca p { margin-top: 12px; max-width: 24em; }
.rodape__titulo { color: var(--papel); font-weight: 700; margin-bottom: 6px; }
.rodape__links { list-style: none; margin: 0; padding: 0; }
.rodape__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--papel); text-underline-offset: 3px; }
.rodape__base { margin-top: 36px; padding-top: 22px; border-top: 1px solid #2a211b; display: grid; gap: 14px; }
.rodape__aviso { font-weight: 700; color: var(--papel); font-size: .875rem; }
.rodape__credito a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--nevoa); text-decoration: none; font-size: .875rem; }
.rodape__credito a:hover { color: var(--papel); }
@media (min-width: 760px) { .rodape__dentro { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; } .rodape__base { grid-template-columns: 1fr auto; align-items: center; } }

/* botão flutuante e barra do pedido */
.zap-flutuante { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 20px 0 16px; border-radius: 999px; background: var(--zap); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7); }
.zap-flutuante svg { width: 24px; height: 24px; }
.zap-flutuante:hover { background: #0b6634; }
.zap-flutuante[hidden] { display: none; }
.barra-pedido { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 61; display: flex; justify-content: center; }
.barra-pedido[hidden] { display: none; }
.barra-pedido__botao { width: 100%; max-width: 560px; min-height: 60px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 0 20px; border: 0; border-radius: 16px; background: var(--vermelho); color: #fff; font-weight: 700; box-shadow: 0 16px 36px -14px rgba(0, 0, 0, .8); text-align: left; }
.barra-pedido__botao:hover { background: var(--vermelho-escuro); }
.barra-pedido__conta { font-size: .875rem; background: rgba(0, 0, 0, .22); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.barra-pedido__total { font-variant-numeric: tabular-nums; white-space: nowrap; }
.js .barra-pedido:not([hidden]) { animation: subir .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes subir { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* janelas (opções do item e o pedido) */
.janela { padding: 0; border: 0; background: transparent; color: var(--tinta); max-width: 100vw; max-height: 100dvh; width: 100%; margin: auto 0 0; }
.janela::backdrop { background: rgba(10, 8, 7, .62); }
.janela__caixa { display: flex; flex-direction: column; max-height: 92dvh; background: var(--papel); border-radius: 20px 20px 0 0; overflow: hidden; }
.janela__topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 12px 20px; border-bottom: 1px solid #ddd3c7; }
.janela__titulo { font-family: var(--f-titulo); font-size: 1.375rem; line-height: 1.25; }
.janela__fechar { flex: none; width: 46px; height: 46px; border-radius: 999px; border: 1px solid #cfc4b7; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.janela__fechar svg { width: 20px; height: 20px; }
.janela__corpo { overflow-y: auto; padding: 16px 20px 20px; overscroll-behavior: contain; }
.janela__pe { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--papel); border-top: 1px solid #ddd3c7; }
.janela__erro { flex: 1 1 100%; color: #a01a14; font-weight: 700; font-size: .9375rem; }
.janela__erro:empty { display: none; }
.janela__confirmar { flex: 1 1 auto; }
.janela__pe--pedido { flex-direction: column; align-items: stretch; }
.janela__loja { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; color: var(--tinta-2); font-weight: 700; text-underline-offset: 3px; }
@media (min-width: 700px) {
  .janela { width: min(560px, calc(100vw - 48px)); margin: auto; }
  .janela__caixa { border-radius: 20px; max-height: 88dvh; }
}
.js .janela[open] .janela__caixa { animation: janela .28s cubic-bezier(.2, .8, .2, 1); }
@keyframes janela { from { transform: translateY(18px); opacity: .4; } to { transform: none; opacity: 1; } }

.op-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 8px; }
.op-item img, .op-item .item__foto--desenho { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--madeira); }
.op-item p { color: var(--tinta-2); font-size: .9375rem; }
.op-item .op-preco { color: var(--tinta); font-weight: 700; margin-top: 4px; }
.op-grupo { border: 0; margin: 18px 0 0; padding: 0; }
.op-grupo legend { font-weight: 700; font-size: 1.0625rem; padding: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.op-grupo legend small { font-weight: 400; color: var(--tinta-2); font-size: .875rem; }
.op-grupo.erro legend { color: #a01a14; }
.opcao { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; margin-top: 8px; border: 1px solid #d9cfc3; border-radius: 12px; background: #fffaf3; cursor: pointer; }
.opcao input { width: 20px; height: 20px; accent-color: var(--vermelho); flex: none; margin: 0; }
.opcao span { flex: 1 1 auto; line-height: 1.35; }
.opcao small { display: block; color: var(--tinta-2); font-size: .8125rem; }
.opcao b { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.opcao:has(input:checked) { border-color: var(--vermelho); background: #fff1ea; }
.opcao:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.opcao:has(input:focus-visible) { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.opcao input:focus-visible { outline: none; }
.qtd { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cfc4b7; border-radius: 999px; padding: 2px; }
.qtd__botao { width: 44px; height: 44px; border-radius: 999px; border: 0; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.qtd__botao svg { width: 18px; height: 18px; }
.qtd__valor { min-width: 2ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid #e2d8cc; }
.linha__nome { font-weight: 700; line-height: 1.35; }
.linha__nome small { display: block; font-weight: 400; color: var(--tinta-2); font-size: .875rem; }
.linha__preco { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha .qtd { grid-column: 1 / -1; justify-self: start; }
.linhas__total { margin-top: 14px; font-size: 1.0625rem; }
.campo-grupo { border: 0; margin: 22px 0 0; padding: 0; }
.campo-grupo legend { font-weight: 700; padding: 0; margin-bottom: 2px; }
.campo-grupo legend small, .campo small { font-weight: 400; color: var(--tinta-2); }
.campo { display: grid; gap: 6px; margin-top: 18px; font-weight: 700; }
.campo[hidden] { display: none; }
.campo input, .campo textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid #cfc4b7; background: #fffaf3; font-weight: 400; font-size: 1rem; }
.campo textarea { resize: vertical; min-height: 72px; }
.campo input:focus-visible, .campo textarea:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 1px; border-color: var(--vermelho); }
.campo-aviso { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: #fff1d9; color: #6a4210; font-weight: 700; font-size: .9375rem; }
.campo-aviso[hidden] { display: none; }
.balao-rotulo { margin-top: 22px; font-weight: 700; font-size: .9375rem; color: var(--tinta-2); }
.balao { margin-top: 8px; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: #dcf5d5; color: #13240f; white-space: pre-line; font-size: .9375rem; line-height: 1.5; }

/* entradas ao rolar (só com JS e sem "reduzir movimento") */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .capa__foto img { filter: none; }
  .js .polaroide--a, .js .polaroide--b, .js .salao__foto, .js .pino-mapa { opacity: 1 !important; }
  .js .como:not(.visto) .polaroide--a { transform: rotate(-5deg); }
  .js .como:not(.visto) .polaroide--b { transform: rotate(4deg); }
  .js .salao:not(.visto) .salao__foto { transform: none; }
  .js .telhado { clip-path: none; }
  .js .nevoa-faixa { transform: none; opacity: 1; }
  .js .pino-mapa { transform: none; }
  .js .categoria__topo::after { transform: scaleX(1); }
  .js .perguntas__foto img, .js .final__foto img { transform: none; }
}