/* Site do Edinho: um cartaz de rua para cada negócio, e todo pedido vira uma comanda no WhatsApp. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body, h1, h2, h3, p, ul, ol, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }

:root {
  --papel: #f3eee4;
  --papel-2: #e8e0d0;
  --tinta: #151412;
  --tinta-2: #45403a;
  --tinta-3: #625b4f;
  --branco: #fffdf8;
  --zap: #25d366;
  --zap-tinta: #06301a;
  --erro: #b3261e;
  --erro-fundo: #fdecea;
  --ok: #0f7a3d;

  --barb: #141414;
  --barb-acento: #e3262a;
  --barb-azul: #1d4fd8;
  --agua: #0a4ea6;
  --agua-acento: #2bbcff;
  --agua-claro: #dff3ff;
  --moveis: #171614;
  --moveis-acento: #ffc21a;
  --carreto: #0f2240;
  --carreto-acento: #ff8a1f;

  --raio: 16px;
  --borda: 2.5px solid var(--tinta);
  --sombra: 4px 4px 0 var(--tinta);
  --fonte: "Archivo", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;

  /* tema da página (cada negócio troca) */
  --tema: var(--tinta);
  --tema-texto: var(--papel);
  --acento: var(--moveis-acento);
  --chip-on: var(--tinta);
  --chip-on-texto: var(--branco);
  --foco: var(--barb-azul);
  color-scheme: light;
}

body[data-tema="barbearia"] { --tema: var(--barb); --tema-texto: #fff; --acento: var(--barb-acento); --chip-on: var(--barb); --chip-on-texto: #fff; --foco: var(--barb-azul); }
body[data-tema="agua"] { --tema: var(--agua); --tema-texto: #fff; --acento: var(--agua-acento); --chip-on: var(--agua); --chip-on-texto: #fff; --foco: var(--agua); }
body[data-tema="moveis"] { --tema: var(--moveis); --tema-texto: var(--papel); --acento: var(--moveis-acento); --chip-on: var(--moveis-acento); --chip-on-texto: var(--tinta); --foco: #b07d00; }
body[data-tema="carretos"] { --tema: var(--carreto); --tema-texto: #fff; --acento: var(--carreto-acento); --chip-on: var(--carreto-acento); --chip-on-texto: var(--tinta); --foco: var(--carreto); }

body {
  font-family: var(--fonte);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-size-adjust: from-font;
  background: var(--papel);
  color: var(--tinta);
  padding-bottom: calc(104px + env(safe-area-inset-bottom));
  overflow-x: clip;
}

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

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--tinta); color: var(--papel); padding: 10px 14px; border-radius: 10px; font-weight: 700; text-decoration: none;
}
.pular:focus { top: 12px; }

.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.miolo { width: min(100% - 32px, 680px); margin-inline: auto; }

/* ---------- Tipografia de cartaz ---------- */
.cartaz {
  font-stretch: 62%;
  font-weight: 900;
  text-transform: uppercase;
  line-height: .86;
  letter-spacing: -.005em;
  font-size-adjust: cap-height from-font;
}
.titulo-secao {
  font-stretch: 70%;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 9vw, 2.9rem);
  line-height: .9;
  margin-bottom: 14px;
}
.titulo-secao small { display: block; font-size: .42em; letter-spacing: .08em; font-stretch: 100%; font-weight: 700; color: var(--tinta-3); margin-bottom: 6px; }
.texto-secao { color: var(--tinta-2); max-width: 46ch; margin-bottom: 18px; }
.secao { padding: 34px 0 6px; }

/* ---------- Topo ---------- */
.topo { padding: 14px 0 10px; }
.topo .miolo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.marca { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; }
.marca-nome { font-stretch: 62%; font-weight: 900; font-size: 1.9rem; line-height: 1; letter-spacing: .01em; }
.marca-local { font-size: .8rem; font-weight: 600; color: var(--tinta-3); }
body[data-pagina="inicio"] .topo .miolo { justify-content: flex-end; }
body[data-pagina="inicio"] .marca { display: none; }
.topo-compartilhar {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px;
  border: 2px solid var(--tinta); border-radius: 999px; background: var(--branco); font-weight: 700; font-size: .85rem;
}

/* ---------- Capa (topo de cada negócio) ---------- */
.capa {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--tema); color: var(--tema-texto);
  border-radius: 0 0 30px 30px;
  padding: 22px 0 30px;
}
.capa .miolo { position: relative; z-index: 1; }
.capa-kicker { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
.capa-kicker .ic { color: var(--acento); }
.capa h1 { font-size: clamp(3.1rem, 15.5vw, 6.4rem); margin-bottom: 14px; text-wrap: balance; }
.capa h1 em { font-style: normal; color: var(--acento); }
.capa-sub { font-size: 1.12rem; max-width: 34ch; margin-bottom: 18px; }
.capa-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.selo-preco {
  display: inline-grid; place-items: center; text-align: center;
  background: var(--acento); color: var(--tinta);
  border: var(--borda); border-radius: 18px; box-shadow: var(--sombra);
  padding: 8px 14px; rotate: -4deg; line-height: 1;
}
.selo-preco b { font-stretch: 62%; font-weight: 900; font-size: 2.3rem; }
.selo-preco span { font-size: .78rem; font-weight: 700; margin-top: 2px; }
.selo-preco.claro { background: var(--branco); rotate: 3deg; }

.capa figure { margin-top: 28px; }
.foto-colada { position: relative; rotate: 2deg; border: 4px solid var(--branco); border-radius: 6px; box-shadow: 6px 8px 0 rgba(0,0,0,.35); background: #222; }
.foto-colada img { width: 100%; height: auto; border-radius: 2px; }
.foto-colada::before, .foto-colada::after {
  content: ""; position: absolute; width: 74px; height: 22px; background: rgba(255, 246, 214, .78); top: -12px; rotate: -8deg;
}
.foto-colada::before { left: 18px; }
.foto-colada::after { right: 18px; rotate: 9deg; }
.foto-legenda { font-size: .8rem; opacity: .85; margin-top: 10px; }

/* faixa de poste de barbearia */
.poste { position: absolute; top: 0; right: 0; width: 12px; height: 100%; overflow: hidden; z-index: 0; border-left: 2px solid #fff; }

/* galão da página de água */
.galao-area { display: grid; place-items: center; margin-top: 8px; }
.galao-grande { width: min(34vw, 136px); height: auto; filter: drop-shadow(6px 8px 0 rgba(0,0,0,.28)); rotate: 4deg; }
@media (min-width: 760px) { .galao-grande { width: 220px; } }
.poste::before {
  content: ""; position: absolute; inset: -68px 0 0; height: calc(100% + 68px);
  background: repeating-linear-gradient(-45deg, var(--barb-acento) 0 12px, #fff 12px 24px, var(--barb-azul) 24px 36px, #fff 36px 48px);
}

/* onda da água */
.onda { position: absolute; left: 0; right: 0; bottom: -2px; height: 46px; z-index: 0; overflow: hidden; }
.onda svg { width: 200%; height: 100%; }

/* estrada do carreto */
.estrada { position: absolute; left: 0; right: 0; bottom: 14px; height: 6px; z-index: 0; overflow: hidden; opacity: .55; }
.estrada::before { content: ""; position: absolute; inset: 0 -60px 0 0; background: repeating-linear-gradient(90deg, var(--acento) 0 34px, transparent 34px 60px); }
.setas { position: absolute; top: 18px; right: 18px; display: grid; gap: 2px; color: var(--acento); opacity: .9; }
.setas .ic { width: 22px; height: 22px; stroke-width: 3; }

/* etiquetas dos móveis */
.etiqueta-deco { position: absolute; right: -26px; top: 30px; width: 150px; height: 78px; background: var(--acento); border-radius: 12px 40px 40px 12px; rotate: -12deg; opacity: .95; z-index: 0; }
.etiqueta-deco::after { content: ""; position: absolute; right: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--tema); }

/* ---------- Status ao vivo ---------- */
.status { display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px 7px 11px; border-radius: 999px; font-weight: 700; font-size: .9rem; background: rgba(255,255,255,.14); }
.status-ponto { position: relative; width: 10px; height: 10px; border-radius: 50%; background: #9a958c; flex: none; }
[data-aberto="true"] .status-ponto { background: #36e27a; }
.status-ponto::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #36e27a; opacity: 0; pointer-events: none; }
.status.no-claro { background: var(--branco); border: 2px solid var(--tinta); }

/* ---------- Início ---------- */
.inicio-capa { padding: 6px 0 26px; }
.inicio-kicker { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .85rem; color: var(--tinta-2); margin-bottom: 4px; }
.inicio-nome { font-size: clamp(5.4rem, 32vw, 11rem); margin-left: -4px; }
.bandeira { display: grid; grid-template-columns: repeat(4, 1fr); height: 14px; border: var(--borda); border-radius: 999px; overflow: hidden; margin: 10px 0 16px; }
.bandeira span:nth-child(1) { background: var(--barb-acento); }
.bandeira span:nth-child(2) { background: var(--agua-acento); }
.bandeira span:nth-child(3) { background: var(--moveis-acento); }
.bandeira span:nth-child(4) { background: var(--carreto-acento); }
.inicio-lead { font-size: 1.25rem; line-height: 1.35; font-weight: 500; max-width: 30ch; margin-bottom: 18px; }
.inicio-lead strong { font-weight: 800; }

.letreiro { background: var(--tinta); color: var(--papel); border-radius: var(--raio); padding: 16px; box-shadow: 4px 4px 0 var(--barb-acento); }
.letreiro-titulo { display: flex; justify-content: space-between; align-items: baseline; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: #c9c2b4; margin-bottom: 8px; }
.letreiro-hora { font-variant-numeric: tabular-nums; letter-spacing: .04em; color: var(--papel); }
.letreiro li a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 11px 2px; text-decoration: none; border-top: 1px solid rgba(255,255,255,.12); }
.letreiro li:first-child a { border-top: 0; }
.letreiro .ic { color: var(--cor); }
.letreiro-nome { font-weight: 800; }
.letreiro-estado { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #d8d1c3; justify-self: end; text-align: right; }

.placas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.placa {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 182px;
  padding: 16px 14px 14px; text-decoration: none;
  background: var(--cor-fundo); color: var(--cor-texto);
  border: var(--borda); border-radius: 20px; box-shadow: var(--sombra);
  transition: translate .15s ease, box-shadow .15s ease;
}
.placa:active { translate: 2px 2px; box-shadow: 2px 2px 0 var(--tinta); }
@media (hover: hover) { .placa:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--tinta); } }
.placa-icone { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: var(--cor); color: var(--tinta); border: 2px solid var(--tinta); }
.placa-icone .ic { width: 26px; height: 26px; }
.placa h3 { font-stretch: 70%; font-weight: 900; text-transform: uppercase; font-size: 1.55rem; line-height: .92; margin-top: 6px; }
.placa p { font-size: .92rem; line-height: 1.3; opacity: .9; }
.placa-preco { margin-top: auto; align-self: flex-start; background: var(--cor); color: var(--tinta); font-weight: 800; font-size: .82rem; padding: 4px 9px; border-radius: 8px; border: 2px solid var(--tinta); }
.placa-seta { position: absolute; top: 14px; right: 12px; opacity: .8; }
.placa-foto { display: block; width: calc(100% + 28px); max-width: none; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: -16px -14px 0; border-radius: 17px 17px 0 0; border-bottom: var(--borda); background: var(--papel-2); }
.placa-foto + .placa-icone { position: relative; margin-top: -26px; margin-left: 2px; }
.placa:has(.placa-foto) .placa-seta { top: 10px; right: 10px; box-sizing: content-box; padding: 5px; border-radius: 999px; border: 2px solid var(--tinta); background: var(--cor-fundo); color: var(--cor-texto); opacity: 1; }

.passos { display: grid; gap: 12px; counter-reset: passo; }
.passos li { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: start; background: var(--branco); border: var(--borda); border-radius: var(--raio); padding: 14px; }
.passos li::before { counter-increment: passo; content: counter(passo); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--tinta); color: var(--papel); font-stretch: 62%; font-weight: 900; font-size: 1.7rem; }
.passos b { display: block; font-size: 1.08rem; }
.passos span { color: var(--tinta-2); font-size: .95rem; }
.confianca { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: .92rem; color: var(--tinta-2); }
.confianca .ic { color: var(--ok); }

/* ---------- Montador (pedido) ---------- */
.montador { background: var(--branco); border: var(--borda); border-radius: 22px; box-shadow: var(--sombra); padding: 20px 16px 18px; }
.passo { border: 0; margin: 0 0 24px; min-width: 0; }
.passo legend, .passo-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-stretch: 75%; font-weight: 900; text-transform: uppercase; font-size: 1.28rem; line-height: 1; margin-bottom: 12px; padding: 0; }
.passo legend .num, .passo-titulo .num { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tema); color: var(--tema-texto); font-size: 1.05rem; flex: none; }
.passo-dica { font-size: .92rem; color: var(--tinta-2); margin: -4px 0 10px; }
.opcional { font-stretch: 100%; font-weight: 600; text-transform: none; font-size: .85rem; color: var(--tinta-3); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 9px 15px;
  border: 2px solid var(--tinta); border-radius: 999px; background: var(--branco);
  font-weight: 700; font-size: 1rem; line-height: 1.15; text-align: left;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, color .15s ease, translate .12s ease, box-shadow .12s ease;
}
.chip small { font-weight: 600; font-size: .85rem; opacity: .8; }
.chip .marcado { display: none; width: 18px; height: 18px; }
.chip[aria-pressed="true"], .chip:has(input:checked) { background: var(--chip-on); color: var(--chip-on-texto); box-shadow: 3px 3px 0 var(--tinta); translate: -1px -1px; }
.chip[aria-pressed="true"] .marcado, .chip:has(input:checked) .marcado { display: block; }
.chip:has(input:focus-visible) { outline: 3px solid var(--foco); outline-offset: 3px; }
.chip:disabled, .chip:has(input:disabled) { opacity: .38; cursor: not-allowed; text-decoration: line-through; box-shadow: none; translate: none; }
.chip:active { translate: 1px 1px; }
.chip.grande { min-height: 62px; border-radius: 16px; padding: 10px 14px; flex: 1 1 150px; justify-content: space-between; }
.chip.grande b { display: block; font-size: 1.05rem; }
.chip.grande small { display: block; }
.chip .preco { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; margin-left: auto; }
.chips.lista .chip { justify-content: space-between; }

.servicos-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 440px) { .servicos-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.servicos-lista .chip { border-radius: 14px; justify-content: space-between; min-height: 56px; min-width: 0; }
.servicos-lista .chip .preco { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }

.contador { display: inline-flex; align-items: center; border: 2px solid var(--tinta); border-radius: 999px; overflow: hidden; background: var(--branco); }
.contador button { width: 52px; height: 52px; border: 0; background: transparent; display: grid; place-items: center; touch-action: manipulation; }
.contador button:active { background: var(--papel-2); }
.contador button:disabled { opacity: .3; }
.contador output { min-width: 56px; text-align: center; font-stretch: 62%; font-weight: 900; font-size: 1.9rem; font-variant-numeric: tabular-nums; border-inline: 2px solid var(--tinta); line-height: 52px; }
.galoes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; color: var(--agua); }
.galoes svg { width: 22px; height: 30px; }

.campo { display: grid; gap: 6px; margin-bottom: 14px; }
.campo label, .campo .rotulo { font-weight: 800; font-size: 1rem; }
.campo .dica { font-size: .88rem; color: var(--tinta-2); }
.campo input[type="text"], .campo input[type="date"], .campo select, .campo textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  border: 2px solid var(--tinta); border-radius: 12px; background: #fff;
  font-size: 1.02rem;
}
.campo textarea { min-height: 96px; resize: vertical; line-height: 1.4; }
.duas-colunas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.erro-msg { display: none; align-items: center; gap: 6px; color: var(--erro); font-weight: 700; font-size: .92rem; }
.erro-msg .ic { width: 18px; height: 18px; }
.campo:has(:user-invalid) :is(input[type="text"], input[type="date"], textarea, select),
.campo.tem-erro :is(input[type="text"], input[type="date"], textarea, select),
.tem-erro .campo :is(select) { border-color: var(--erro); background: var(--erro-fundo); }
.campo:has(:user-invalid) .erro-msg, .tem-erro .erro-msg { display: flex; }
.tem-erro > .chips .chip, .tem-erro > .servicos-lista .chip { border-color: var(--erro); }
.tem-erro:has([data-validade-aviso][data-tipo="erro"]:not([hidden])) .erro-msg { display: none; }
.resumo-erros { display: none; gap: 8px; align-items: flex-start; background: var(--erro-fundo); color: var(--erro); border: 2px solid var(--erro); border-radius: 12px; padding: 12px 14px; font-weight: 700; margin-bottom: 14px; }
.resumo-erros.mostrar { display: flex; }

.checar { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 700; }
.checar input { width: 24px; height: 24px; accent-color: var(--tema); }

.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--tinta); background: var(--papel); font-size: .95rem; margin-top: 10px; }
.aviso .ic { margin-top: 2px; }
.aviso[data-tipo="ok"] { border-color: var(--ok); background: #e7f6ec; color: #0b4f28; }
.aviso[data-tipo="atencao"] { border-color: #9a6700; background: #fff4d6; color: #5c3d00; }
.aviso[data-tipo="erro"] { border-color: var(--erro); background: var(--erro-fundo); color: #7a1611; }
.aviso button { margin-top: 8px; }

/* ---------- Comanda ---------- */
.comanda-area { margin-top: 8px; }
.comanda {
  --z: 9px;
  position: relative; background: #fffef9; color: var(--tinta);
  padding: 18px 18px calc(20px + var(--z));
  border-radius: 6px 6px 0 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 14px 26px -16px rgba(0,0,0,.45);
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--z)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x;
  rotate: -.6deg;
  font-variant-numeric: tabular-nums;
  background-image: repeating-linear-gradient(#fffef9 0 27px, #f1ece0 27px 28px);
  border-top: 6px solid var(--tema);
}
.comanda-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; font-size: .78rem; color: var(--tinta-3); padding-bottom: 8px; border-bottom: 2px dashed #cfc7b6; margin-bottom: 8px; }
.comanda-topo b { color: var(--tinta); }
.comanda-linhas li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 1rem; }
.comanda-linhas li span:last-child { font-weight: 700; text-align: right; }
.comanda-linhas li.vazia { color: var(--tinta-3); font-style: italic; }
.comanda-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px dashed #cfc7b6; margin-top: 8px; padding-top: 10px; }
.comanda-total span { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.comanda-total strong { font-stretch: 62%; font-weight: 900; font-size: 2.3rem; line-height: 1; }
.comanda-total small { display: block; text-align: right; font-size: .78rem; color: var(--tinta-3); font-weight: 600; }
.comanda-msg-titulo { margin-top: 14px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); }
.comanda-msg { margin-top: 6px; background: #dcf8c6; border-radius: 12px 12px 4px 12px; padding: 10px 12px; font-size: .95rem; line-height: 1.4; white-space: pre-line; box-shadow: 0 1px 0 rgba(0,0,0,.12); }
.carimbo {
  display: none; padding: 4px 8px; border: 3px solid var(--ok); border-radius: 8px; color: var(--ok);
  font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 1.05rem; line-height: 1; letter-spacing: .04em;
  rotate: 8deg; margin: -6px 0; pointer-events: none;
}
.comanda[data-pronta="true"] .carimbo { display: inline-block; }
.comanda[data-pronta="true"] [data-comanda-data] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .comanda[data-pronta="true"] .carimbo { animation: carimbar .32s cubic-bezier(.2, 1.6, .4, 1) both; }
}
@keyframes carimbar { from { opacity: 0; scale: 1.8; } }
@media (prefers-reduced-motion: reduce) { .carimbo { transition: none; } }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 12px 20px;
  border: var(--borda); border-radius: 16px; background: var(--branco); color: var(--tinta);
  font-weight: 800; font-size: 1.05rem; text-decoration: none; box-shadow: var(--sombra);
  transition: translate .12s ease, box-shadow .12s ease; touch-action: manipulation;
}
.botao:active { translate: 2px 2px; box-shadow: 2px 2px 0 var(--tinta); }
.botao-zap { width: 100%; margin-top: 16px; min-height: 60px; font-size: 1.15rem; background: var(--zap); color: var(--zap-tinta); }
.botao-zap .ic { width: 26px; height: 26px; }
.botao-escuro { background: var(--tinta); color: var(--papel); box-shadow: 4px 4px 0 var(--acento); }
.botao-pequeno { min-height: 44px; padding: 8px 14px; font-size: .95rem; border-radius: 12px; }
.link-seta { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; text-underline-offset: 4px; }

/* ---------- Galeria e vitrine ---------- */
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.galeria li { aspect-ratio: 3 / 4; }
.galeria button { width: 100%; height: 100%; padding: 0; border: var(--borda); border-radius: 12px; overflow: hidden; background: var(--papel-2); }
.galeria img { width: 100%; height: 100%; object-fit: cover; }
.galeria .vazio { display: grid; place-items: center; align-content: center; gap: 6px; height: 100%; border: 2.5px dashed var(--tinta-3); border-radius: 12px; color: var(--tinta-3); font-size: .78rem; font-weight: 700; text-align: center; padding: 6px; }
.galeria .vazio .ic { width: 26px; height: 26px; }
.galeria-pedir { display: grid; place-items: center; align-content: center; gap: 4px; height: 100%; padding: 8px; border: 2.5px dashed var(--tinta); border-radius: 12px; background: var(--branco); color: var(--tinta); text-align: center; text-decoration: none; font-size: .78rem; line-height: 1.2; }
.galeria-pedir .ic { width: 28px; height: 28px; color: var(--acento); }
.galeria-pedir b { font-size: .98rem; font-stretch: 70%; text-transform: uppercase; }

.feitos { display: grid; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin: 0 -16px; padding: 2px 16px 12px; scroll-padding-inline: 16px; scrollbar-width: none; }
.feitos::-webkit-scrollbar { display: none; }
.feitos li { scroll-snap-align: start; }
.feitos button { display: grid; width: 100%; height: 100%; padding: 0; text-align: left; background: var(--branco); border: var(--borda); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); color: var(--tinta); }
.feitos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: var(--borda); }
.feitos span { padding: 10px 12px 12px; font-weight: 800; line-height: 1.2; }
.feitos-dica { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.feitos-dica .ic { width: 18px; height: 18px; }

.fotos-reais { display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; align-items: start; margin: 0 0 20px; }
.fotos-reais figure { margin: 0; }
.fotos-reais button { display: block; width: 100%; padding: 0; border: var(--borda); border-radius: 14px; overflow: hidden; box-shadow: var(--sombra); background: var(--agua-claro); }
.fotos-reais img { width: 100%; height: auto; }
.fotos-reais figcaption { margin-top: 8px; font-size: .82rem; font-weight: 800; line-height: 1.2; }
.foto-loja { margin: 6px 6px 24px; }

.modo { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: var(--borda); border-radius: 18px; overflow: hidden; background: var(--branco); box-shadow: var(--sombra); margin-top: 18px; }
.modo button { min-height: 60px; border: 0; background: transparent; font-weight: 900; font-stretch: 70%; text-transform: uppercase; font-size: 1.08rem; padding: 6px 8px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--tinta); }
.modo button + button { border-left: var(--borda); }
.modo button[aria-pressed="true"] { background: var(--acento); }

.filtros { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -16px 8px; padding-inline: 16px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtros .chip { flex: none; min-height: 42px; }

.vitrine { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.item-botao { position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; text-align: left; background: var(--branco); border: var(--borda); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); }
.item-mais-fotos { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px 3px 6px; border-radius: 999px; background: var(--tinta); color: var(--branco); font-size: .75rem; font-weight: 800; }
.item-mais-fotos .ic { width: 15px; height: 15px; }
.item-fotos { display: flex; gap: 8px; margin-top: 10px; }
.item-fotos button { width: 60px; height: 60px; padding: 0; border: 2.5px solid var(--tinta-3); border-radius: 10px; overflow: hidden; background: var(--papel-2); opacity: .65; }
.item-fotos button[aria-pressed="true"] { border-color: var(--tinta); opacity: 1; box-shadow: 3px 3px 0 var(--acento); }
.item-fotos img { width: 100%; height: 100%; object-fit: cover; }
.item-foto { aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; background: var(--papel-2); border-bottom: var(--borda); }
.item-foto.sem { display: grid; place-items: center; color: var(--tinta-3); }
.item-info { display: grid; gap: 2px; padding: 10px 12px 12px; }
.item-nome { font-weight: 800; line-height: 1.2; }
.item-preco { font-stretch: 62%; font-weight: 900; font-size: 1.7rem; line-height: 1; }
.item-data { font-size: .78rem; color: var(--tinta-3); font-weight: 600; }
.item-novo { justify-self: start; margin-bottom: 3px; padding: 1px 8px; border: 2px solid var(--tinta); border-radius: 999px; background: var(--acento); color: var(--tinta); font-size: .72rem; font-weight: 900; line-height: 1.35; rotate: -2deg; }
.vitrine-vazia { display: grid; gap: 10px; justify-items: start; background: var(--branco); border: 2.5px dashed var(--tinta-3); border-radius: 18px; padding: 18px; }
.vitrine-vazia .ic { width: 34px; height: 34px; color: var(--tinta-3); }

/* ---------- Informações ---------- */
.cartao { background: var(--branco); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); padding: 18px 16px; }
.endereco { display: grid; gap: 14px; }
.mapinha { position: relative; height: 130px; border-radius: 12px; border: 2px solid var(--tinta); overflow: hidden; background: #e9e4d6; }
.mapinha svg { width: 100%; height: 100%; }
.endereco-linha { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.endereco-linha .ic { margin-top: 3px; }
.horarios { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.horarios caption { text-align: left; font-weight: 900; font-stretch: 75%; text-transform: uppercase; font-size: 1.15rem; padding-bottom: 6px; }
.horarios th, .horarios td { padding: 8px 6px; border-top: 1px solid #ddd5c5; text-align: left; font-weight: 600; }
.horarios th { font-weight: 800; width: 34%; }
.horarios tr.hoje { background: var(--acento-claro, #fff4c9); }
.horarios tr.hoje th::after { content: "hoje"; margin-left: 8px; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; background: var(--tinta); color: var(--papel); padding: 2px 6px; border-radius: 6px; vertical-align: 2px; }
.duas-tabelas { display: grid; gap: 18px; }
.nota { font-size: .9rem; color: var(--tinta-2); margin-top: 8px; }

.lista-servicos { display: grid; gap: 10px; }
.lista-servicos li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; background: var(--branco); border: var(--borda); border-radius: var(--raio); padding: 12px; }
.lista-servicos .ic-caixa { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--acento); border: 2px solid var(--tinta); }
.lista-servicos b { display: block; font-size: 1.05rem; }
.lista-servicos span { color: var(--tinta-2); font-size: .95rem; }
.selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.selos li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.4); font-weight: 700; font-size: .9rem; }
.selos .ic { color: var(--acento); }

.dura { background: var(--agua-claro); border: var(--borda); border-radius: 22px; padding: 18px 16px; box-shadow: var(--sombra); }
.dura-resultado { font-stretch: 70%; font-weight: 900; text-transform: uppercase; font-size: 1.9rem; line-height: 1; margin: 14px 0 6px; }
.dura-resultado em { font-style: normal; color: var(--agua); }

.arte-botao { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 10px; background: var(--branco); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.arte-botao img { width: 92px; height: 92px; object-fit: cover; object-position: top; border-radius: 10px; border: 2px solid var(--tinta); }
.arte-botao b { display: block; }
.arte-botao span { font-size: .9rem; color: var(--tinta-2); }

.veja { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.veja a { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 14px 6px; text-decoration: none; font-weight: 800; font-size: .95rem; background: var(--cor-fundo); color: var(--cor-texto); border: var(--borda); border-radius: var(--raio); }
.veja .ic { width: 28px; height: 28px; color: var(--cor); }

/* ---------- Janelas ---------- */
dialog { padding: 0; border: 0; background: transparent; color: var(--tinta); max-width: 100vw; max-height: 100dvh; }
dialog:modal { overscroll-behavior: contain; }
dialog::backdrop { background: rgba(21, 20, 18, .6); overflow: hidden; overscroll-behavior: contain; }
.folha[open] {
  margin: auto auto 0; width: min(100%, 560px);
  background: var(--branco); border: var(--borda); border-bottom: 0; border-radius: 24px 24px 0 0;
  padding: 10px 16px calc(18px + env(safe-area-inset-bottom));
  max-height: 92dvh; overflow: auto;
}
.folha-alca { width: 54px; height: 6px; border-radius: 6px; background: #cfc7b6; margin: 2px auto 12px; }
.folha-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.folha-topo h2 { font-stretch: 70%; font-weight: 900; text-transform: uppercase; font-size: 1.8rem; line-height: .95; }
.fechar { width: 44px; height: 44px; display: grid; place-items: center; border: 2px solid var(--tinta); border-radius: 50%; background: var(--branco); flex: none; }
.arte-janela[open] { margin: auto; width: min(100% - 24px, 520px); }
.arte-janela .moldura { background: var(--branco); border: var(--borda); border-radius: 18px; padding: 10px; }
.arte-janela img { width: 100%; height: auto; border-radius: 10px; max-height: 76dvh; object-fit: contain; }
.arte-janela .fechar { margin: 10px auto 0; }
@media (prefers-reduced-motion: no-preference) {
  .folha { transition: translate .28s cubic-bezier(.2, .9, .3, 1), display .28s allow-discrete, overlay .28s allow-discrete; }
  .folha[open] { translate: 0 0; }
  @starting-style { .folha[open] { translate: 0 100%; } }
  .folha:not([open]) { translate: 0 100%; }
  dialog::backdrop { transition: background-color .28s ease, display .28s allow-discrete, overlay .28s allow-discrete; }
  @starting-style { dialog[open]::backdrop { background-color: rgba(21, 20, 18, 0); } }
}

/* ---------- Doca (abas embaixo) ---------- */
.doca {
  position: fixed; z-index: 40; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom)); translate: -50% 0;
  width: min(100% - 20px, 540px);
  display: grid; grid-template-columns: repeat(4, 1fr) 1.15fr; gap: 2px; padding: 6px;
  background: var(--tinta); color: var(--papel); border-radius: 24px;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.55);
  view-transition-name: doca;
}
.doca a { position: relative; display: grid; justify-items: center; gap: 3px; padding: 8px 2px 7px; border-radius: 18px; text-decoration: none; font-size: .72rem; font-weight: 800; letter-spacing: .02em; isolation: isolate; }
.doca a .ic { width: 24px; height: 24px; }
.doca a[aria-current="page"] { color: var(--tinta); }
.doca-marca { position: absolute; inset: 0; z-index: -1; border-radius: 18px; background: var(--cor); view-transition-name: aba-ativa; }
.doca .doca-zap { background: var(--zap); color: var(--zap-tinta); }

/* ---------- Rodapé ---------- */
.rodape { margin-top: 40px; padding: 28px 0 18px; border-top: var(--borda); background: var(--papel-2); }
.rodape .miolo { display: grid; gap: 14px; }
.rodape-nome { font-stretch: 62%; font-weight: 900; text-transform: uppercase; font-size: 2.6rem; line-height: .9; }
.rodape p { color: var(--tinta-2); }
.rodape .linha-icone { display: flex; gap: 8px; align-items: flex-start; }
.rodape .linha-icone .ic { margin-top: 3px; }
.rodape-links { display: flex; flex-wrap: wrap; gap: 8px 16px; font-weight: 700; }
.rodape [data-movimento-botao][aria-pressed="true"] { background: var(--tinta) !important; color: var(--papel); padding: 4px 12px !important; border-radius: 999px; }
.credito { font-size: .85rem; color: var(--tinta-3); padding-top: 12px; border-top: 1px solid #cfc7b6; }
.credito a { font-weight: 700; color: var(--tinta-2); }

/* ---------- Aviso rápido ---------- */
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); translate: -50% 20px; opacity: 0; pointer-events: none; background: var(--tinta); color: var(--papel); padding: 12px 16px; border-radius: 14px; font-weight: 700; box-shadow: var(--sombra); transition: opacity .2s ease, translate .2s ease; max-width: calc(100% - 32px); }
.toast.mostrar { opacity: 1; translate: -50% 0; }

/* ---------- Transição entre páginas ---------- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}
::view-transition-old(root) { animation: .22s ease-in both sair; }
::view-transition-new(root) { animation: .3s cubic-bezier(.2, .9, .3, 1) both entrar; }
::view-transition-group(aba-ativa) { animation-duration: .32s; animation-timing-function: cubic-bezier(.2, .9, .3, 1.15); }
@keyframes sair { to { opacity: 0; scale: .985; } }
@keyframes entrar { from { opacity: 0; translate: 0 18px; } }

/* ---------- Faixa de preços, títulos e barra de leitura ---------- */
.faixa-area { position: relative; z-index: 2; overflow: clip; margin: -24px 0 -8px; padding: 14px 0 12px; pointer-events: none; }
.faixa { rotate: -2deg; width: 108%; margin-left: -4%; background: var(--acento); color: var(--faixa-texto, var(--tinta)); border-block: 2.5px solid var(--tinta); box-shadow: 0 6px 0 rgba(0, 0, 0, .16); pointer-events: auto; }
[data-tema="barbearia"] .faixa { --faixa-texto: #fff; }
.faixa-trilho { display: flex; align-items: center; width: max-content; padding: 9px 0; }
.faixa-trilho span { padding: 0 14px; font-stretch: 70%; font-weight: 900; font-size: 1.02rem; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.faixa-trilho i { flex: none; width: 15px; height: 15px; background: currentColor; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }

.cartaz .palavra, .cartaz .letra { display: inline-block; }
.inicio-nome > [aria-hidden] { white-space: nowrap; }

.progresso { position: fixed; z-index: 45; top: 0; left: 0; width: 100%; height: 4px; background: var(--acento); transform-origin: 0 50%; scale: 0 1; pointer-events: none; }

.botao-zap { position: relative; overflow: hidden; }
.botao-zap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .6) 50%, transparent 65%); translate: -120% 0; pointer-events: none; }

/* ---------- Movimento ----------
   Tudo que se mexe fica aqui: só liga quando o aparelho não pediu menos movimento e a pessoa
   não tocou em "Pausar animações" (que grava data-movimento="parado" no <html>).
   Só anima translate, rotate, scale e opacity, que o navegador faz sem redesenhar a página. */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-movimento="parado"]) {
    /* laços que rodam o tempo todo */
    .galao-agua { animation: galao 3.5s linear infinite; }
    .bolhas circle { animation: bolha 3.6s ease-in infinite; }
    .bolhas circle:nth-child(2) { animation-delay: -1.2s; }
    .bolhas circle:nth-child(3) { animation-delay: -2.3s; }
    .bolhas circle:nth-child(4) { animation-delay: -.6s; }
    .poste::before { animation: poste 3.2s linear infinite; }
    .onda svg { animation: onda 9s linear infinite; }
    .estrada::before { animation: estrada 1.6s linear infinite; }
    .setas .ic { animation: seta 1.2s ease-in-out infinite; }
    .setas .ic:nth-child(2) { animation-delay: .15s; }
    .setas .ic:nth-child(3) { animation-delay: .3s; }
    .etiqueta-deco { transform-origin: calc(100% - 28px) 50%; animation: balanca 3.2s ease-in-out infinite alternate; }
    [data-aberto="true"] .status-ponto::after { animation: pulso 2s ease-out infinite; }
    .faixa-trilho { animation: faixa var(--faixa-tempo, 36s) linear infinite; }
    .faixa:hover .faixa-trilho { animation-play-state: paused; }
    .comanda-area:has(.comanda[data-pronta="true"]) .botao-zap::after { animation: brilho 2.8s ease-in-out .5s infinite; }
    .doca a { transition: scale .15s ease; }
    .doca a:active { scale: .93; }

    /* inclinação do celular: botões e cartões giram um pouco seguindo o aparelho.
       O app.js liga a classe "inclina" quando o sensor está ativo e põe --tx e --ty (de -1 a 1)
       só nos que estão na tela. É transform, que não conflita com o translate do toque. */
    &.inclina :is(.botao, .placa, .topo-compartilhar, .selo-preco, .arte-botao, .modo, .galeria-pedir) {
      transform: perspective(700px) rotateX(calc(var(--ty, 0) * -9deg)) rotateY(calc(var(--tx, 0) * 9deg));
    }

    /* entrada quando a pessoa chega na página (com o prerender, só na hora em que ela abre) */
    &.revelado {
      .cartaz .palavra { animation: palavra .62s cubic-bezier(.2, .9, .3, 1.15) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
      .cartaz .letra { animation: letra .7s cubic-bezier(.2, .9, .3, 1.25) both; animation-delay: calc(var(--i) * 60ms + 60ms); }
      .capa .foto-colada { animation: colar .7s cubic-bezier(.2, .9, .3, 1.15) .35s both; }
      .faixa { animation: faixa-entra .65s cubic-bezier(.2, .9, .3, 1.15) .3s both; }
      .aparece { animation: aparece .5s cubic-bezier(.2, .9, .3, 1) both; }
      .aparece:nth-child(2) { animation-delay: .06s; }
      .aparece:nth-child(3) { animation-delay: .12s; }
      .aparece:nth-child(4) { animation-delay: .18s; }
    }

    /* barra de leitura no topo, na cor do negócio */
    @supports (animation-timeline: scroll()) {
      .progresso { animation: progresso auto linear both; animation-timeline: scroll(root); }
    }

    /* ligado à rolagem: é enfeite, então quem não tem suporte fica com a página parada, sem perder nada */
    @supports ((animation-timeline: view()) and (animation-range: entry)) {
      .titulo-secao { animation: titulo linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
      :is(.vitrine, .galeria, .lista-servicos, .passos, .duas-tabelas) > *, .fotos-reais > figure, .aviso, .confianca {
        animation: sobe linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
      }
      .capa :is(figure, .galao-area) { animation: sai linear both; animation-timeline: view(); animation-range: exit; }
      @media (max-width: 759px) {
        .feitos > li { animation: carrossel linear both; animation-timeline: view(inline); }
      }
      @media (min-width: 760px) {
        .feitos > li { animation: sobe linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
      }
    }
  }
}

/* filtro da vitrine: os cards deslizam para o lugar novo, sem a página inteira piscar */
:root.vt-filtro::view-transition-old(root), :root.vt-filtro::view-transition-new(root) { animation: none; }
:root.vt-filtro::view-transition-group(*) { animation-duration: .36s; animation-timing-function: cubic-bezier(.2, .9, .3, 1); }

@keyframes galao { to { translate: 80px 0; } }
@keyframes bolha { 0% { translate: 0 0; opacity: 0; } 15% { opacity: .9; } 100% { translate: 0 -112px; opacity: 0; } }
@keyframes poste { to { translate: 0 68px; } }
@keyframes onda { to { translate: -50% 0; } }
@keyframes estrada { to { translate: -60px 0; } }
@keyframes seta { 0%, 100% { opacity: .35; translate: 0 0; } 50% { opacity: 1; translate: 5px 0; } }
@keyframes balanca { from { rotate: -15deg; } to { rotate: -8deg; } }
@keyframes pulso { from { opacity: .6; scale: 1; } to { opacity: 0; scale: 3; } }
@keyframes faixa { to { translate: -50% 0; } }
@keyframes brilho { 0% { translate: -120% 0; } 55%, 100% { translate: 120% 0; } }
@keyframes palavra { from { opacity: 0; translate: 0 .55em; rotate: -6deg; } }
@keyframes letra { from { opacity: 0; translate: 0 -.5em; scale: 1.35; rotate: 8deg; } }
@keyframes colar { from { opacity: 0; translate: 0 -28px; rotate: -10deg; scale: 1.08; } }
@keyframes faixa-entra { from { opacity: 0; translate: -30% 0; } }
@keyframes aparece { from { opacity: 0; translate: 0 14px; } }
@keyframes progresso { to { scale: 1 1; } }
@keyframes titulo { from { opacity: 0; translate: -22px 0; } }
@keyframes sobe { from { opacity: 0; translate: 0 32px; scale: .97; } }
@keyframes sai { to { translate: 0 -46px; rotate: -2deg; } }
@keyframes carrossel { 0% { scale: .86; opacity: .55; rotate: -2deg; } 50% { scale: 1; opacity: 1; rotate: 0deg; } 100% { scale: .86; opacity: .55; rotate: 2deg; } }

/* ---------- Telas maiores ---------- */
@media (min-width: 760px) {
  .miolo { width: min(100% - 48px, 980px); }
  .capa { padding: 34px 0 42px; border-radius: 0 0 40px 40px; }
  .capa-grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: 36px; align-items: center; }
  .placas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .inicio-grade { display: grid; grid-template-columns: 1.2fr .8fr; gap: 32px; align-items: end; }
  .montador-grade { display: grid; grid-template-columns: 1.1fr .9fr; gap: 28px; align-items: start; }
  .montador-grade .comanda-area { position: sticky; top: 20px; margin-top: 0; }
  .duas-tabelas { grid-template-columns: 1fr 1fr; }
  .galeria { grid-template-columns: repeat(4, 1fr); }
  .feitos { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0 0 4px; }
  .feitos-dica { display: none; }
  .vitrine { grid-template-columns: repeat(3, 1fr); }
  .lista-servicos { grid-template-columns: 1fr 1fr; }
  .veja { grid-template-columns: repeat(3, 1fr); }
}