/* Modelo KRIA — chaveiro · "Só tipografia" (estilo autoral, direção type-only-statement)
   Escrito para 360 px e ampliado em 560, 900 e 1100 px. Cada capítulo é um campo de cor inteiro: noite no
   início, latão no atendimento 24h e na faixa "Ligar", pedra e areia no resto. O topo assume a cor do
   capítulo que passa por baixo dele. Uma família só (Bricolage Grotesque), cinco tamanhos: texto, destaque,
   título, número e letreiro. Sem etiquetas acima de títulos, numeração, linhas finas, sombras em repouso,
   gradientes ou vidro. As cores mudam pelo "cores" do site.json. */

/* Fonte servida pelo próprio site (subconjunto latino do Google Fonts, licença SIL OFL), variável:
   peso 400 a 800 e tamanho ótico automático. */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/bricolage-grotesque.woff2') format('woff2'); }

:root {
  --c-fundo: #EEECEA;
  --c-fundo-alt: #E2DED8;
  --c-tinta: #262422;
  --c-suave: #5B5752;
  --c-noite: #17191D;
  --c-noite-tinta: #EEECEA;
  --c-noite-suave: #B9B4AC;
  --c-latao: #D9B25A;
  --c-latao-tinta: #262422;

  --f: 'Bricolage Grotesque', 'Segoe UI', Roboto, Arial, sans-serif;

  /* os cinco tamanhos da página */
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.375rem, 1.2rem + 0.75vw, 1.875rem);
  --step-head: clamp(2.3rem, 1.1rem + 5vw, 5.5rem);
  --step-numero: clamp(2.15rem, 9.4vw, 9rem);
  --step-display: clamp(4.25rem, 18.5vw, 17rem);

  --topo: 64px;
  --margem: clamp(16px, 3vw, 32px);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- 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));
  scrollbar-color: var(--c-tinta) var(--c-fundo-alt);
  accent-color: var(--c-latao);
}
body {
  margin: 0;
  background: var(--c-fundo);
  color: var(--c-tinta);
  font: 400 var(--step-body)/1.55 var(--f);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: contents; }
a { color: inherit; }
a, button, summary, label { touch-action: manipulation; }
h1, h2, h3 { margin: 0; font-weight: 800; color: inherit; }
p, ul, ol, dl, dd, figure { margin: 0; }
input { caret-color: var(--c-latao); }
::selection { background: var(--c-latao); color: var(--c-latao-tinta); }

/* Foco em anel duplo, visível em todos os campos de cor */
:focus-visible { outline: 3px solid var(--c-tinta); outline-offset: 3px; box-shadow: 0 0 0 3px var(--c-fundo); border-radius: 2px; } /* taste-skill-ignore: anel duplo de foco (acessibilidade da casa) */
.capitulo--noite :focus-visible, .topo[data-tema="noite"] :focus-visible, .menu :focus-visible { outline-color: var(--c-noite-tinta); box-shadow: 0 0 0 3px var(--c-noite); } /* 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 */

.container { padding-inline: var(--margem); }
.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-fundo);
  text-decoration: none;
}
.pular:focus { top: 12px; }

/* ---------- capítulos: um campo de cor inteiro por seção ---------- */
.capitulo--noite { background: var(--c-noite); color: var(--c-noite-tinta); }
.capitulo--latao { background: var(--c-latao); color: var(--c-latao-tinta); }
.capitulo--pedra { background: var(--c-fundo); color: var(--c-tinta); }
.capitulo--areia { background: var(--c-fundo-alt); color: var(--c-tinta); }

h2 { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.035em; text-wrap: balance; }

/* botões: retos, uma cor cheia */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 24px;
  border: 2px solid transparent; border-radius: 0;
  font: 600 var(--step-body)/1.2 var(--f); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--latao { background: var(--c-latao); color: var(--c-latao-tinta); }
.btn--tinta { background: var(--c-tinta); color: var(--c-latao); }
.btn--contorno { border-color: var(--c-tinta); color: var(--c-tinta); }
.btn--grande { min-height: 60px; padding: 0 28px; }
.btn--pequeno { min-height: 44px; padding: 0 16px; }

.link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em;
  transition: text-decoration-color 180ms ease;
}
.nota { max-width: 56ch; margin-top: 28px; color: var(--c-suave); }

/* ---------- faixa do modelo de demonstração ---------- */
/* o início desconta a altura da faixa para o número e o botão caberem na primeira tela */
body:has(> .faixa-demo) { --faixa: 52px; }
.faixa-demo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px;
  padding: 4px var(--margem);
  background: var(--c-fundo-alt); color: var(--c-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: 600; text-underline-offset: 4px; }

/* ---------- topo: barra simples que troca de cor por capítulo (300 ms) ---------- */
.topo {
  --topo-fundo: var(--c-noite); --topo-tinta: var(--c-noite-tinta);
  position: sticky; top: 0; z-index: 50;
  background: var(--topo-fundo); color: var(--topo-tinta);
  transition: background-color 300ms ease, color 300ms ease;
}
.topo[data-tema="latao"] { --topo-fundo: var(--c-latao); --topo-tinta: var(--c-latao-tinta); }
.topo[data-tema="pedra"] { --topo-fundo: var(--c-fundo); --topo-tinta: var(--c-tinta); }
.topo[data-tema="areia"] { --topo-fundo: var(--c-fundo-alt); --topo-tinta: var(--c-tinta); }
/* no capítulo de latão, o botão de latão some no fundo: ele inverte */
.topo[data-tema="latao"] .topo__cta { background: var(--c-tinta); color: var(--c-latao); }
.topo__barra { display: flex; align-items: center; gap: 6px; 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: 38px; width: auto; max-width: 46vw; object-fit: contain; object-position: left center; }
.marca__nome { font-size: var(--step-body); font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a { text-decoration: none; }
.topo__cta { flex: none; }
.menu-btn {
  flex: none; min-width: 64px; min-height: 44px; padding: 0 10px; margin-right: -10px;
  border: 0; background: none; color: inherit; cursor: pointer;
  font: 600 var(--step-body)/1 var(--f); text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em;
}
.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 */
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; font-weight: 600; }
html:not(.js) .menu-btn, html:not(.js) .menu__acoes { display: none; }

/* Com JavaScript, até 1099 px: menu de tela cheia no campo da noite */
@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-noite); color: var(--c-noite-tinta);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; opacity: 0;
    transition: opacity 240ms var(--ease-out), visibility 0s 240ms;
  }
  .js.menu-aberto .menu { visibility: visible; opacity: 1; transition: opacity 240ms var(--ease-out); }
  .js .menu li a {
    display: flex; align-items: center; min-height: 56px;
    font-size: var(--step-head); font-weight: 800; line-height: 1; letter-spacing: -0.035em;
  }
  .js .menu li, .js .menu__acoes { opacity: 0; transform: translateY(16px); transition: opacity 300ms var(--ease-out), transform 400ms 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 { display: grid; gap: 16px; margin-top: auto; padding-top: 40px; }
  .menu__acoes .btn { width: 100%; }
  .menu__numero { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .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; }
}

/* ---------- início: o letreiro ---------- */
.hero { display: flex; min-height: calc(100svh - var(--topo) - var(--faixa, 0px)); padding-block: clamp(28px, 7vh, 88px) clamp(24px, 4vh, 48px); }
.hero__grade { display: flex; flex-direction: column; width: 100%; }
.hero__titulo { font-size: var(--step-display); line-height: 0.84; letter-spacing: -0.045em; }
.hero__linha { display: block; white-space: nowrap; }
.hero__linha--1 { color: var(--c-noite-tinta); }
.hero__linha--2 { color: var(--c-latao); }
.hero__numero {
  align-self: flex-start;
  margin-top: clamp(20px, 4vh, 44px);
  font-size: var(--step-numero); font-weight: 800; line-height: 1; letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--c-noite-tinta); text-decoration: none;
}
.hero__base { display: grid; gap: 24px; margin-top: auto; padding-top: clamp(32px, 6vh, 64px); }
.hero__sub { max-width: 38ch; color: var(--c-noite-tinta); }
.hero__acoes { display: grid; gap: 14px; justify-items: start; }
.hero__acoes .btn { width: 100%; }
.selo { display: inline-flex; align-items: center; gap: 10px; color: var(--c-noite-suave); }
.selo__ponto { width: 10px; height: 10px; border-radius: 50%; background: #4CB26A; flex: none; }
.selo--fechado .selo__ponto { background: #E0645A; }

/* ---------- atendimento 24h: frases em escada ---------- */
.emergencia { padding-block: clamp(80px, 14vw, 200px); }
.escada { list-style: none; padding: 0; display: grid; gap: 40px; }
.escada__degrau:nth-child(2) { padding-left: 6vw; }
.escada__degrau:nth-child(3) { padding-left: 12vw; }
.escada__degrau:nth-child(4) { padding-left: 18vw; }
.escada__frase { font-size: var(--step-head); font-weight: 800; line-height: 1; letter-spacing: -0.035em; text-wrap: balance; }
.escada__detalhe { max-width: 34ch; margin-top: 12px; }
.emergencia__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 56px; }
.emergencia__acoes .btn { font-variant-numeric: tabular-nums; }

/* ---------- fotos em faixa inteira (a parede de chaves, a chave de carro) ---------- */
.faixa-foto { position: relative; overflow: hidden; height: 56svh; min-height: 300px; background: var(--c-noite); }
.faixa-foto--baixa { height: 46svh; }
.faixa-foto img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; max-width: none; object-fit: cover; }

/* ---------- serviços: preços como num cardápio ---------- */
.servicos { padding-block: clamp(96px, 14vw, 200px); }
.servicos__grade { display: grid; gap: 40px; }
.servicos__lado h2 { font-size: var(--step-head); }
.servicos__legenda { margin-top: 14px; color: var(--c-suave); }
.foto-quadro { position: relative; overflow: hidden; background: var(--c-fundo-alt); }
.foto-quadro img { width: 100%; height: 100%; object-fit: cover; }
/* no celular, a foto vem depois do cardápio, na largura inteira */
.servicos__foto { order: 1; aspect-ratio: 4 / 3; }
.cardapio__grupo + .cardapio__grupo { margin-top: 40px; }
.cardapio__grupo-nome { margin-bottom: 18px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; }
.cardapio__lista { list-style: none; padding: 0; display: grid; gap: 22px; }
.cardapio__item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px;
  min-height: 44px; text-decoration: none;
}
.cardapio__nome { font-weight: 600; }
.cardapio__preco { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cardapio__desc { grid-column: 1 / -1; max-width: 36ch; color: var(--c-suave); }

/* ---------- chave de carro: os tipos em letra de cartaz ---------- */
.carros { padding-block: clamp(96px, 18vh, 220px); }
.cartaz__titulo { font-size: var(--step-head); line-height: 1; letter-spacing: -0.035em; color: var(--c-suave); }
.cartaz__lista { list-style: none; padding: 0; display: grid; gap: 52px; margin-top: 36px; }
.cartaz__item { display: grid; gap: 8px; text-decoration: none; }
.cartaz__nome { font-size: var(--step-head); font-weight: 800; line-height: 1; letter-spacing: -0.035em; transition: color 180ms ease; }
.cartaz__desc { max-width: 40ch; padding-left: var(--margem); }
.cartaz__pedir { font-weight: 600; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em; white-space: nowrap; }
.carros__nota { max-width: 48ch; margin-top: 48px; font-size: var(--step-lead); line-height: 1.3; }

/* ---------- fechaduras: "Chave ou senha" em dois campos de cor ---------- */
.fechaduras { padding-block: clamp(96px, 14vw, 200px) clamp(56px, 7vw, 112px); }
.fechaduras__topo { display: grid; gap: 16px; }
.fechaduras__topo h2 { font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.02em; }
.fechaduras__texto { max-width: 46ch; }
.duelo { display: grid; gap: 12px; margin-top: clamp(40px, 6vw, 80px); }
.duelo__lado {
  display: grid; gap: clamp(28px, 4vw, 56px);
  padding: clamp(20px, 2.4vw, 36px);
  text-decoration: none;
  transition: background-color 180ms ease, color 180ms ease;
}
.duelo__lado--chave { background: var(--c-latao); color: var(--c-latao-tinta); }
.duelo__lado--senha { background: var(--c-noite); color: var(--c-noite-tinta); }
/* a palavra ocupa a largura do campo; o desenho tem a medida exata das letras (sem corte) */
.duelo__palavra { display: block; width: 100%; height: auto; overflow: visible; }
.duelo__palavra text { font: 800 200px/1 var(--f); letter-spacing: -0.05em; fill: currentColor; }
.duelo__lado--senha .duelo__palavra { color: var(--c-latao); }
.duelo__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; }
.duelo__legenda { font-weight: 600; }
.duelo__pedir {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.22em;
}
.duelo__pedir svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.duelo__lado:active { transform: scale(0.99); }

/* ---------- produtos: o mesmo cardápio dos serviços, só com nome e preço ---------- */
.produtos { padding-block: clamp(56px, 7vw, 112px) clamp(96px, 14vw, 200px); }
.produtos__grade { display: grid; gap: 36px; }
.produtos__titulo { font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.02em; }
.produtos__legenda { margin-top: 14px; max-width: 34ch; color: var(--c-suave); }
.produtos__lista { display: grid; gap: 36px; }
.produtos__grupo-nome { margin-bottom: 10px; font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; }
.produtos__grupo ul { list-style: none; padding: 0; }
.produtos__grupo li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-block: 8px; }
.produtos__nome { min-width: 0; }
.produtos__preco { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.produtos__acao .btn { width: 100%; }
.produtos__foto { aspect-ratio: 4 / 3; }

/* ---------- área atendida: o bairro digitado em letra de cartaz ---------- */
.area { padding-block: clamp(88px, 12vw, 180px); }
.area__grade { display: grid; gap: clamp(48px, 7vw, 96px); width: 100%; }
.area__frase { max-width: 24ch; font-size: var(--step-lead); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; }
.area__campo {
  width: 100%; margin: 0; padding: 0 0 10px;
  border: 0; border-bottom: 3px solid var(--c-latao); border-radius: 0;
  background: transparent; color: var(--c-noite-tinta);
  font: 800 var(--step-head)/1.05 var(--f); letter-spacing: -0.035em;
  -webkit-appearance: none; appearance: none;
}
.area__campo::placeholder { color: var(--c-noite-suave); opacity: 1; }
.area__campo::-webkit-search-cancel-button { -webkit-appearance: none; }
.area__campo:focus-visible { outline-offset: 6px; }
.area__resposta { display: grid; gap: 16px; justify-items: start; margin-top: 24px; }
.area__resposta:has(.area__veredito:empty) { margin-top: 0; }
.area__resposta [hidden] { display: none; }
.area__veredito { max-width: 30ch; font-size: var(--step-lead); font-weight: 600; line-height: 1.2; }
html:not(.js) .area__form { display: none; }
.area__lista-titulo { margin-bottom: 8px; color: var(--c-noite-suave); }
.area__lista ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
.area__lista li { padding-block: 3px; }
.area__lista li.area__achado { color: var(--c-latao); font-weight: 600; }
.area__nota { margin-top: 16px; color: var(--c-noite-suave); }

/* ---------- sobre: fatos ao lado, parágrafo largo ---------- */
.sobre { padding-block: clamp(96px, 14vw, 200px); }
.sobre__grade { display: grid; gap: 36px; }
.sobre__texto { order: -1; max-width: 42ch; font-size: var(--step-lead); line-height: 1.35; letter-spacing: -0.01em; }
.sobre__fatos { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; }
.sobre__fatos dt { color: var(--c-suave); }
.sobre__fatos dd { margin: 0; font-weight: 600; }
.sobre__listas { display: grid; gap: 40px; }
.sobre__lista-titulo { margin-bottom: 10px; font-weight: 600; }
.sobre__lista ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.sobre__lista li { display: flex; justify-content: space-between; gap: 16px; }
.sobre__detalhe { color: var(--c-suave); text-align: right; }
.sobre__nota { margin-top: 0; }

/* ---------- dúvidas: texto corrido ---------- */
.duvidas { padding-block: clamp(96px, 12vw, 180px); }
.duvidas__grade { display: grid; gap: 28px; }
.duvidas__grade h2 { font-size: var(--step-lead); line-height: 1.1; letter-spacing: -0.02em; }
.duvidas__texto p { max-width: 62ch; margin-bottom: 18px; break-inside: avoid; }
.duvidas__texto strong { font-weight: 700; }

/* ---------- onde fica: os dados à esquerda, o mapa à direita ---------- */
.onde { padding-block: clamp(96px, 12vw, 180px); }
.onde__grade { display: grid; gap: 40px; }
.onde__titulo { font-size: var(--step-head); }
.onde__dados { display: grid; gap: 24px; margin-top: clamp(28px, 4vw, 48px); }
.onde__dado dt { color: var(--c-suave); }
.onde__dado dd { margin: 2px 0 0; font-size: var(--step-lead); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; }
.onde__dado dd a { text-decoration-thickness: 0.06em; text-underline-offset: 0.16em; }
.onde__horarios { list-style: none; padding: 0; }
.onde__dia { font-weight: 400; }
.onde__acoes { display: grid; gap: 10px; margin-top: clamp(32px, 4vw, 48px); }
.onde__lado { display: grid; gap: 12px; align-content: start; }
.onde__foto { aspect-ratio: 3 / 2; }
.onde__mapa { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--c-fundo-alt); }
.onde__mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.7) contrast(1.05); }
/* o foco do Tab entra no mapa (outro site): o contorno fica na moldura dele */
.onde__mapa:focus-within, .onde__mapa--foco { outline: 3px solid var(--c-tinta); outline-offset: 3px; }
.onde__mapa--reservado { display: grid; place-items: center; padding: 24px; text-align: center; }
.onde__mapa--reservado p { color: var(--c-suave); font-size: var(--step-lead); }

/* ---------- "Ligar": a faixa inteira é o botão; a palavra, a frase e o número ---------- */
.ligar { display: block; padding-block: clamp(40px, 7vw, 104px); text-decoration: none; transition: background-color 180ms ease, color 180ms ease; }
.ligar__grade { display: grid; gap: 20px; }
.ligar__palavra { font-size: var(--step-display); font-weight: 800; line-height: 0.8; letter-spacing: -0.05em; }
.ligar__texto { display: grid; gap: 10px; }
.ligar__frase { max-width: 32ch; font-size: var(--step-lead); line-height: 1.25; letter-spacing: -0.01em; }
.ligar__numero {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: var(--step-lead); font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ligar__seta { width: 0.9em; height: 0.9em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ligar:focus-visible { outline-offset: -6px; background: var(--c-tinta); color: var(--c-latao); box-shadow: none; } /* taste-skill-ignore: tira o anel de fora: o foco da faixa é a troca de cores */
.ligar:active .ligar__palavra { transform: scale(0.99); }

/* ---------- rodapé: a empresa, os contatos e os atalhos ---------- */
.rodape { padding: clamp(56px, 7vw, 96px) 0 calc(100px + env(safe-area-inset-bottom)); }
.rodape__grade { display: grid; gap: 40px; }
.rodape__marca { display: grid; gap: 4px; align-content: start; max-width: 40ch; }
.rodape__empresa { margin-bottom: 8px; font-size: var(--step-lead); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; }
.rodape__horario { display: block; }
.rodape__titulo { color: var(--c-noite-suave); }
.rodape__links { list-style: none; padding: 0; }
.rodape__links a, .rodape__assinatura a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-noite-tinta); text-underline-offset: 0.22em; }
.rodape__links a { font-variant-numeric: tabular-nums; }
.rodape__fim { display: grid; gap: 4px; color: var(--c-noite-suave); }
.rodape__creditos summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--c-noite-tinta); }
.rodape__creditos li { padding-block: 3px; }
.rodape__creditos a { color: var(--c-noite-tinta); }
.rodape__creditos ul { list-style: none; padding: 0; max-width: 80ch; }
.rodape__assinatura { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }

/* página 404: rodapé curto, sempre no fim da tela */
.pagina-404 { display: flex; flex-direction: column; min-height: 100svh; }
.pagina-404 main { flex: 1; display: flex; }
.pagina-404 .hero { flex: 1; }
.rodape--curto { min-height: 0; padding: 20px 0 calc(20px + env(safe-area-inset-bottom)); }

/* ---------- WhatsApp flutuante ---------- */
.flutuante {
  position: fixed; z-index: 40;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--c-latao); color: var(--c-latao-tinta);
  border: 2px solid var(--c-latao-tinta);
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5); /* taste-skill-ignore: o botão flutuante flutua de verdade */
  transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s;
}
.flutuante svg { width: 28px; height: 28px; fill: currentColor; }
.flutuante:focus-visible { outline: 3px solid var(--c-noite-tinta); outline-offset: 3px; box-shadow: 0 0 0 6px var(--c-noite); border-radius: 50%; } /* taste-skill-ignore: anel duplo de foco do botão flutuante */
.js .flutuante:not(.flutuante--visivel) { opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition: opacity 240ms var(--ease-out), transform 300ms var(--ease-out), visibility 0s 240ms; }

/* ---------- 560 px ---------- */
@media (min-width: 560px) {
  .hero__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
  .hero__acoes .btn { width: auto; }
  .area__lista ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rodape__bloco { grid-column: auto; }
  .rodape__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .rodape__marca, .rodape__fim { grid-column: 1 / -1; }
}

/* ---------- 900 px: a grade de 12 colunas ---------- */
@media (min-width: 900px) {
  :root { --topo: 72px; --step-display: clamp(6rem, 13vw, 15rem); --step-numero: clamp(3rem, 7.4vw, 8rem); }
  .grade, .servicos__grade, .sobre__grade, .duvidas__grade, .produtos__grade, .onde__grade, .fechaduras__topo, .cartaz, .ligar__grade, .rodape__grade {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem);
  }

  /* o número fica embaixo, à esquerda; a frase e o botão, à direita, na mesma linha de base */
  .hero__grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; column-gap: var(--margem); }
  .hero__titulo { grid-column: 1 / -1; }
  .hero__numero { grid-column: 1 / span 8; grid-row: 2; }
  .hero__base { grid-column: 8 / -1; grid-row: 2 / 4; align-self: end; padding-top: 32px; }
  /* a frase do início cresce só a partir de 1200 px: na coluna de 1024 px, no tamanho de destaque, passaria de 3 linhas */

  .escada { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); gap: 56px var(--margem); }
  .escada__degrau { grid-column: 1 / span 8; padding-left: 0 !important; }
  .escada__degrau:nth-child(2) { grid-column: 3 / span 8; }
  .escada__degrau:nth-child(3) { grid-column: 5 / span 8; }
  .escada__degrau:nth-child(4) { grid-column: 7 / span 6; }
  .emergencia__acoes { margin-left: calc((100% + var(--margem)) / 12 * 6); }

  .faixa-foto { height: 72svh; }
  .faixa-foto--baixa { height: 60svh; }

  .servicos__grade { grid-template-rows: auto 1fr; row-gap: 32px; }
  .servicos__lado { grid-column: 1 / span 3; }
  /* na coluna estreita do cardápio, o título fica no tamanho de destaque (duas linhas no máximo) */
  .servicos__lado h2 { font-size: var(--step-lead); line-height: 1.05; }
  .servicos__foto { order: 0; grid-column: 1 / span 3; grid-row: 2; align-self: start; aspect-ratio: 4 / 5; }
  .cardapio { grid-column: 5 / -1; grid-row: 1 / span 2; columns: 2; column-gap: 64px; }
  .cardapio__grupo { break-inside: avoid; }
  .cardapio__grupo + .cardapio__grupo { margin-top: 0; padding-top: 0; }
  .cardapio > .nota { column-span: all; }

  .cartaz__titulo { grid-column: 1 / -1; }
  .cartaz__lista { grid-column: 1 / -1; gap: 0.35em; }
  .cartaz__item { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--margem); align-items: first baseline; }
  .cartaz__nome { grid-column: 1 / span 8; }
  .cartaz__desc { grid-column: 9 / -1; padding-left: 0; }

  .fechaduras__topo h2 { grid-column: 1 / span 5; }
  .fechaduras__texto { grid-column: 7 / -1; }
  .duelo { grid-template-columns: 1fr 1fr; gap: var(--margem); }
  .duelo__legenda { font-size: var(--step-lead); font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; }

  .produtos__grade { grid-template-rows: auto auto 1fr; row-gap: 32px; }
  .produtos__lado { grid-column: 1 / span 4; }
  .produtos__lista { grid-column: 6 / -1; grid-row: 1 / span 3; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; align-content: start; }
  .produtos__acao { grid-column: 1 / span 4; grid-row: 2; }
  .produtos__acao .btn { width: auto; }
  .produtos__foto { grid-column: 1 / span 4; grid-row: 3; align-self: start; aspect-ratio: 4 / 5; }

  .area__frase { grid-column: 1 / -1; }
  .area__lista ul { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--margem); }

  .sobre__fatos { grid-column: 1 / span 3; grid-template-columns: 1fr; align-self: start; }
  .sobre__texto { order: 0; grid-column: 5 / span 7; }
  .sobre__listas { grid-column: 5 / -1; grid-template-columns: 1fr 1fr; column-gap: 64px; margin-top: 64px; }
  .sobre__nota { grid-column: 5 / -1; }

  .duvidas__grade h2 { grid-column: 1 / span 3; }
  .duvidas__texto { grid-column: 5 / -1; columns: 2; column-gap: 56px; }

  .onde__info { grid-column: 1 / span 5; }
  .onde__acoes { display: flex; flex-wrap: wrap; }
  .onde__lado { grid-column: 7 / -1; }

  /* "Ligar" à esquerda; a frase e o número à direita, na linha de base da palavra */
  .ligar__grade { align-items: end; }
  .ligar__palavra { grid-column: 1 / span 6; }
  .ligar__texto { grid-column: 8 / -1; gap: 14px; padding-bottom: 0.4vw; }
  .ligar__numero { font-size: clamp(2rem, 3.4vw, 3.25rem); }

  .rodape__grade { row-gap: 56px; }
  .rodape__marca { grid-column: 1 / span 5; }
  .rodape__marca + .rodape__bloco { grid-column: 7 / span 3; }
  .rodape__bloco + .rodape__bloco { grid-column: 10 / span 3; }
  .rodape__fim { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 32px; }
  .rodape__creditos { order: -1; }
}

/* ---------- 1200 px ---------- */
@media (min-width: 1200px) {
  .hero__sub { font-size: var(--step-lead); line-height: 1.3; }
}

/* ---------- 1100 px: menu em linha ---------- */
@media (min-width: 1100px) {
  .menu { display: flex; align-items: center; margin-right: 16px; }
  .menu ul { display: flex; gap: 4px 24px; }
  .menu li a {
    display: inline-flex; align-items: center; min-height: 44px; font-weight: 500;
    text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 0.08em; text-underline-offset: 0.3em;
    transition: text-decoration-color 180ms ease;
  }
  .menu__acoes, .menu-btn { display: none; }
}

/* ---------- interação no computador ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn--latao:hover { background: var(--c-tinta); color: var(--c-latao); }
  .btn--tinta:hover { background: var(--c-noite); }
  .btn--contorno:hover { background: var(--c-tinta); color: var(--c-fundo); }
  .topo[data-tema="latao"] .topo__cta:hover { background: var(--c-noite); }
  .menu li a:hover { text-decoration-color: currentColor; }
  .link:hover, .menu-btn:hover { text-decoration-thickness: 0.14em; }
  .cardapio__item:hover .cardapio__nome { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.2em; }
  .cartaz__lista:hover .cartaz__nome { color: var(--c-suave); }
  .cartaz__lista .cartaz__item:hover .cartaz__nome { color: var(--c-tinta); }
  .hero__numero:hover { color: var(--c-latao); }
  .ligar:hover { background: var(--c-tinta); color: var(--c-latao); }
  /* no "Chave ou senha", as cores dos dois campos trocam de lugar */
  .duelo__lado--chave:hover { background: var(--c-noite); color: var(--c-noite-tinta); }
  .duelo__lado--chave:hover .duelo__palavra { color: var(--c-latao); }
  .duelo__lado--senha:hover { background: var(--c-latao); color: var(--c-latao-tinta); }
  .duelo__lado--senha:hover .duelo__palavra { color: var(--c-latao-tinta); }
  .rodape__links a:hover, .rodape__assinatura a:hover { color: var(--c-latao); }
}

/* ---------- movimento (só com a classe .movimento, que respeita "reduzir movimento") ----------
   Opacidade e deslocamento: o conteúdo continua na ordem do Tab e para o leitor de tela (nunca
   visibility: hidden), e o main.js revela na hora o bloco que recebe o foco. O título e o número do
   início aparecem no primeiro quadro (só deslizam). */
.movimento [data-revelar] {
  opacity: 0; transform: translateY(24px);
  transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.movimento [data-revelar].is-in { opacity: 1; transform: none; }
.movimento [data-revelar-foto] { clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-in-out); }
.movimento [data-revelar-foto] img { transform: scale(1.12); transition: transform 1500ms var(--ease-soft); }
.movimento [data-revelar-foto].is-in { clip-path: inset(0); }
.movimento [data-revelar-foto].is-in img { transform: none; }

.movimento .hero__linha { animation: deslizar 1100ms var(--ease-out) both; }
.movimento .hero__linha--2 { animation-delay: 90ms; }
.movimento .hero__numero { animation: deslizar 1100ms var(--ease-out) 180ms both; }
.movimento .hero__base { animation: subir 900ms var(--ease-out) 320ms both; }
.movimento .hero__base:focus-within { animation: none; }
@keyframes deslizar { from { transform: translateY(18px); } }
@keyframes subir { from { opacity: 0; transform: translateY(18px); } }

/* a parede de chaves e a chave de carro derivam devagar com a rolagem (sem script) */
@supports (animation-timeline: view()) {
  .movimento .deriva { animation: deriva linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
}
@keyframes deriva { from { transform: translateY(-5%); } to { transform: translateY(5%); } }

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

/* ---------- celular (até 767 px): ajustes que não mexem no computador ---------- */
@media (max-width: 767.98px) {
  /* o número do letreiro e o telefone de "Onde fica" são alvos de toque de 44 px ou mais */
  .hero__numero { padding-block: 6px; }
  .onde__dado dd a { display: inline-block; min-height: 44px; padding-block: 8px; }
  /* os tipos de chave de carro ficam bem separados: o "Pedir orçamento" de um não encosta no nome do seguinte */
  .cartaz__lista { gap: 80px; }
  /* o início não ocupa a tela inteira à força: o vão entre o número e a frase acompanha a altura da tela,
     e o botão do WhatsApp aparece na primeira tela */
  .hero { min-height: 0; }
  .hero__base { margin-top: 0; padding-top: clamp(40px, 11vh, 120px); }
}