/* Página pública da oficina — feita para abrir no celular (link da bio do Instagram).
   Quatro modelos trocam só as variáveis; a estrutura é a mesma. Fonte: Archivo, usando a largura
   variável (estreita e pesada nos títulos, normal no texto). */

:root {
  --fundo: #16191c; --superficie: #1f2327; --texto: #f2f2ee; --suave: #a6adb3; --linha: #31373c;
  --destaque: #f5c518; --sobre-destaque: #16191c; --whats: #1faa53;
  --titulo-largura: 75%; --titulo-peso: 850; --raio: 10px;
  --faixa: repeating-linear-gradient(-45deg, var(--destaque) 0 14px, var(--fundo) 14px 28px);
}
.tema-classico {
  --fundo: #f7f9fb; --superficie: #ffffff; --texto: #14202b; --suave: #5a6875; --linha: #dbe2e8;
  --destaque: #1f5f8b; --sobre-destaque: #ffffff; --titulo-largura: 88%; --titulo-wdth: 88; --titulo-peso: 780;
  --faixa: linear-gradient(90deg, var(--destaque), var(--destaque));
}
.tema-premium {
  --fundo: #0e0f10; --superficie: #17181a; --texto: #ece7dc; --suave: #9b968b; --linha: #2a2a2a;
  --destaque: #c9a45c; --sobre-destaque: #0e0f10; --titulo-largura: 118%; --titulo-wdth: 118; --titulo-peso: 340; --raio: 2px;
  --faixa: linear-gradient(90deg, transparent, var(--destaque) 20%, var(--destaque) 80%, transparent);
}
.tema-fresco {
  --fundo: #ffffff; --superficie: #f2f8f7; --texto: #10302c; --suave: #4f6f6a; --linha: #d6e8e5;
  --destaque: #0f9a8a; --sobre-destaque: #ffffff; --titulo-largura: 100%; --titulo-wdth: 100; --titulo-peso: 720; --raio: 18px;
  --faixa: linear-gradient(90deg, var(--destaque), #7fd3c7);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 400 1rem/1.55 "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible, .botao:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; }
svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg .cheio { fill: currentColor; stroke: none; }

/* ---------- topo ---------- */
.topo { position: relative; padding: 48px 0 36px; background: var(--fundo); }
/* Banner no alto (foto da oficina ou um dos prontos) com o logo por cima da borda, como no LinkedIn. */
.topo.com-banner { padding-top: 0; }
.com-banner .banner { aspect-ratio: 3 / 1; max-height: 340px; width: 100%; }
.com-banner .topo-conteudo { padding-top: 16px; }
.com-banner .identidade { align-items: flex-start; }
.com-banner .identidade.com-logo h1 { padding-top: 6px; }
.com-banner .logo { margin-top: -76px; position: relative; z-index: 1; border: 4px solid var(--fundo); padding: 6px;
                    width: 128px; height: 128px; }
.topo-conteudo { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 20px; }
/* Logo à esquerda do nome, grande o bastante para ser reconhecido de longe. */
.identidade { display: flex; align-items: center; gap: 16px; }
.logo { width: 120px; height: 120px; flex: none; object-fit: contain; border-radius: var(--raio); background: #fff; padding: 8px;
        box-shadow: 0 8px 22px -10px rgba(0,0,0,.6); }
.com-logo h1 { font-size: clamp(2rem, 9vw, 4.4rem); }
h1 {
  margin: 0; font-size: clamp(2.5rem, 11vw, 5rem); line-height: .95; letter-spacing: -.01em;
  font-weight: var(--titulo-peso); font-stretch: var(--titulo-largura); text-wrap: balance;
  font-variation-settings: "wdth" var(--titulo-wdth, 75);
}
.tema-premium h1 { letter-spacing: .02em; line-height: 1.02; }
/* Nome numa linha só: js/nome_linha.js diminui a letra até caber; sem JS, corta com reticências. */
h1[data-uma-linha] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto;
                     padding-bottom: .08em; }
/* Celular: logo em cima e o nome embaixo, com a largura toda (senão o nome fica minúsculo ao lado do logo). */
@media (max-width: 759px) {
  .identidade.com-logo { flex-direction: column; align-items: flex-start; gap: 12px; }
  .identidade.com-logo h1 { width: 100%; padding-top: 0 !important; }
}
.chamada { margin: 14px 0 0; font-size: 1.15rem; max-width: 34ch; opacity: .92; }
.local { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 14px 0 0; font-size: .95rem; opacity: .8; }
.selo { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 6px 12px; border-radius: 999px;
        border: 1px solid var(--destaque); color: var(--texto); font-size: .9rem; font-weight: 600; }
.selo svg { color: var(--destaque); width: 1.25em; height: 1.25em; }
.local span { display: inline-flex; align-items: center; gap: 6px; }
/* No celular só as redes ficam aqui (WhatsApp e Agendar estão na barra de baixo); no computador, tudo. */
/* Agendar (só no computador; no celular está na barra de baixo) + redes em botões redondos só com o logo. */
.acoes-topo { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
.acoes-topo .so-largo { display: none; }
.redondos { display: flex; gap: 12px; }
.redondos:empty { display: none; }
.redondo { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: #fff; text-decoration: none;
           box-shadow: 0 6px 16px -8px rgba(0,0,0,.55); transition: transform .15s; }
.redondo:hover { transform: translateY(-2px); }
.redondo:focus-visible { outline: 3px solid var(--destaque); outline-offset: 3px; }
.redondo svg { width: 26px; height: 26px; }
.redondo.whatsapp { background: var(--whats); }
.redondo.whatsapp .icone-whats { width: 28px; height: 28px; }
.redondo.instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.redondo.instagram .cheio { fill: currentColor; }
.redondo.facebook { background: #1877f2; }
.redondo.facebook svg { fill: currentColor; stroke: none; }
.redondo.google { background: #fff; }
.redondo.google svg { stroke: none; }

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px;
  border-radius: var(--raio); border: 2px solid currentColor; font-weight: 700; font-size: 1rem; text-decoration: none;
  background: transparent; color: inherit;
}
.botao.principal { background: var(--whats); border-color: var(--whats); color: #fff; }
.icone-whats { width: 1.35em; height: 1.35em; fill: currentColor; stroke: none; }

.faixa { height: 10px; background: var(--faixa); }
.tema-premium .faixa { height: 1px; }
.tema-classico .faixa, .tema-fresco .faixa { height: 6px; }

/* ---------- blocos ---------- */
main { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.bloco { padding: 40px 0 8px; }
h2 {
  margin: 0 0 18px; font-size: 1.7rem; line-height: 1.1; font-weight: var(--titulo-peso);
  font-stretch: var(--titulo-largura); color: var(--texto); font-variation-settings: "wdth" var(--titulo-wdth, 75);
}
h2::after { content: ""; display: block; width: 44px; height: 4px; background: var(--destaque); margin-top: 10px; border-radius: 2px; }
.tema-premium h2::after { height: 1px; width: 64px; }

.servicos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linha); }
.servicos li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--linha); }
.servico-nome { font-weight: 600; font-size: 1.05rem; }
.servico-nome small { display: block; font-weight: 400; color: var(--suave); font-size: .88rem; margin-top: 2px; }
.servico-preco { text-align: right; white-space: nowrap; font-weight: 700; color: var(--destaque); }
.tema-garagem .servico-preco, .tema-premium .servico-preco { color: var(--destaque); }
.servico-preco small { display: block; font-weight: 400; color: var(--suave); font-size: .75rem; }

.galeria { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
           margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; }
.galeria::-webkit-scrollbar { display: none; }
.galeria figure { margin: 0; scroll-snap-align: start; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio); background: var(--superficie); }
.galeria figcaption { font-size: .88rem; color: var(--suave); margin-top: 6px; }

.sobre p { margin: 0; max-width: 62ch; font-size: 1.05rem; }

.onde-grade { display: grid; gap: 20px; }
.endereco { font-size: 1.1rem; font-weight: 600; margin: 0 0 6px; max-width: 32ch; }
.link-forte { font-weight: 700; color: var(--destaque); text-underline-offset: 3px; }
.tema-garagem .link-forte { color: var(--destaque); }
.horario { list-style: none; margin: 18px 0; padding: 14px 16px; background: var(--superficie); border-radius: var(--raio); border-left: 4px solid var(--destaque); }
.horario li + li { margin-top: 4px; }
.mapa { width: 100%; height: 260px; border: 0; border-radius: var(--raio); filter: grayscale(.2); }
.tema-garagem .mapa, .tema-premium .mapa { filter: grayscale(.6) contrast(1.05); }

.rodape { max-width: 960px; margin: 48px auto 0; padding: 22px 20px 28px; font-size: .85rem; color: var(--suave); }
.rodape a { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px solid var(--linha); }
/* O "BOX" do logo é branco: fica numa etiqueta escura para aparecer também nos modelos claros. */
.rodape-logo { flex: none; display: inline-flex; padding: 7px 10px; border-radius: 8px; background: #1c2329; }
.rodape-logo img { height: 24px; width: auto; }
.rodape a { text-decoration: none; }
.rodape b { color: var(--texto); }
.rodape a.rodape-cookies { display: inline-block; padding-top: 10px; border: 0; color: var(--suave); text-decoration: underline; }
.terceiro-bloqueado.mapa { filter: none; color: var(--suave); }

/* Barra fixa no polegar (celular). No computador some e os botões ficam no topo. */
.barra-acoes {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fundo) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--linha);
}
.barra-acoes .botao { min-height: 50px; padding: 0 12px; color: var(--texto); }
.barra-acoes .botao.principal { color: #fff; }
.botao.agendar, .barra-acoes .botao.agendar { background: var(--destaque); border-color: var(--destaque); color: var(--sobre-destaque); }

@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .barra-acoes { display: none; }
  .acoes-topo { margin-top: 26px; }
  .acoes-topo .so-largo { display: inline-flex; }
  .topo { padding: 72px 0 56px; }
  .topo-conteudo, .rodape { padding-left: 32px; padding-right: 32px; }
  .topo.com-banner { padding-top: 0; }
  .com-banner .banner { aspect-ratio: 4 / 1; }
  .com-banner .topo-conteudo { padding-top: 20px; }
  .com-banner .logo { margin-top: -112px; width: 184px; height: 184px; padding: 10px; }
  .com-banner .identidade.com-logo h1 { padding-top: 14px; }
  main { padding: 0 32px; }
  .bloco { padding-top: 64px; }
  h2 { font-size: 2.2rem; }
  .galeria { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 0; overflow: visible; }
  .onde-grade { grid-template-columns: 1fr 1.2fr; align-items: start; gap: 36px; }
  .mapa { height: 320px; }
  .identidade { gap: 24px; }
  .logo { width: 168px; height: 168px; padding: 12px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Horário da semana (como no Google): hoje em destaque e "Aberto agora · fecha às…". */
.agora-horario { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; font-weight: 700; font-size: .98rem;
                 text-decoration: none; color: var(--texto); }
.agora-horario::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #e5484d; flex: none; }
.agora-horario.aberto::before { background: #30a46c; box-shadow: 0 0 0 4px rgba(48,164,108,.2); }
.agora-topo { margin: 0; }
.horario-semana { width: 100%; margin: 14px 0 18px; border-collapse: collapse; background: var(--superficie);
                  border-radius: var(--raio); border-left: 4px solid var(--destaque); overflow: hidden; font-size: .95rem; }
.horario-semana th, .horario-semana td { padding: 7px 14px; text-align: left; vertical-align: top; }
.horario-semana th { font-weight: 500; white-space: nowrap; opacity: .85; width: 1%; }
.horario-semana tr.hoje th, .horario-semana tr.hoje td { font-weight: 800; opacity: 1; }