/* Magnos Car — institucional premium: claro (#f5f3ef) e grafite (#141516), títulos em Cormorant leve.
   Verde só em logo/links em foco; laranja só em números e anos. */
:root{
  --claro:#f5f3ef; --claro2:#ebe8e2; --grafite:#141516; --grafite2:#1c1e1f;
  --tinta:#141516; --texto:#45484a; --suave:#7d8083; --fio:#d9d5cd; --fio-escuro:rgba(255,255,255,.14);
  --verde:#005e2a; --laranja:#c97614;
  --zap:#1fa855;
  --largura:1240px; --gutter:clamp(20px,5vw,72px);
  --titulo:"Cormorant Garamond",Georgia,serif; --corpo:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px;background:var(--claro)}
body{margin:0;font:400 17px/1.7 var(--corpo);color:var(--texto);background:var(--claro)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,.tempo b,.metodo span,.manifesto p.grande{font-variant-numeric:lining-nums}
h1,h2,h3{font-family:var(--titulo);font-weight:300;color:var(--tinta);margin:0 0 .45em;letter-spacing:-.005em;line-height:1.06}
h1{font-size:clamp(2.7rem,6vw,5.4rem)}
h2{font-size:clamp(2rem,4vw,3.4rem)}
h3{font-size:clamp(1.5rem,2.4vw,2rem)}
p{margin:0 0 1em}
.rotulo{display:block;font:500 .72rem/1 var(--corpo);letter-spacing:.18em;text-transform:uppercase;color:var(--suave);margin-bottom:28px}
.envoltorio{max-width:calc(var(--largura) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.pular{position:absolute;left:-999px}.pular:focus{left:16px;top:8px;z-index:99;background:#fff;padding:8px 12px}
.escuro{background:var(--grafite);color:#b9bcbe}
.escuro h1,.escuro h2,.escuro h3{color:#f3f1ec}
.escuro .rotulo{color:#8b8f92}

/* Links e botões: discretos */
.link{display:inline-flex;align-items:center;gap:10px;font:500 .78rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--tinta);padding:10px 0;border-bottom:1px solid currentColor}
.link::after{content:"→";letter-spacing:0;font-size:.95rem}
.link:hover{color:var(--verde)}
.escuro .link{color:#f3f1ec}.escuro .link:hover{color:#fff}
.escuro .botao{border-color:rgba(255,255,255,.7);color:#f3f1ec}
.escuro .botao:hover{background:#f3f1ec;color:var(--grafite)}
.botao{display:inline-flex;align-items:center;justify-content:center;gap:12px;font:500 .78rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:20px 30px;border:1px solid var(--tinta);color:var(--tinta);transition:background .25s,color .25s;min-height:56px}
.botao svg{width:17px;height:17px}
.botao:hover{background:var(--tinta);color:var(--claro)}

.so-pc{display:inline}
@media(max-width:600px){.so-pc{display:none}}

/* Conversão do Google Ads lê o texto do elemento clicado: o clique sempre cai no próprio link do WhatsApp */
a[data-evento="whatsapp"] *{pointer-events:none}
/* o acionador do GTM procura "WhatsApp" (maiúsculas e minúsculas contam): versalete no lugar de caixa alta, que não altera o texto lido */
a.botao[data-evento="whatsapp"],a.agendar[data-evento="whatsapp"]{text-transform:none;font-variant-caps:all-small-caps;font-size:.92rem;letter-spacing:.12em}

/* Topo */
.topo{position:sticky;top:0;z-index:50;background:rgba(245,243,239,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--fio)}
.topo .envoltorio{display:flex;align-items:center;gap:48px;height:80px}
.topo .marca img{height:30px;width:auto}
.menu{display:flex;gap:40px;margin-left:auto}
.menu a,.agendar{font:500 .72rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--tinta)}
.menu a:hover,.agendar:hover{color:var(--verde)}
.agendar{border-left:1px solid var(--fio);padding-left:40px}
.abre-menu{display:none;background:none;border:0;padding:8px 0;font:500 .72rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);cursor:pointer}
@media(max-width:900px){
  .menu{display:none}.abre-menu{display:block;margin-left:auto}.agendar{border-left:1px solid var(--fio);padding-left:20px}
  .topo .envoltorio{height:64px;gap:20px}.topo .marca img{height:26px}
  .menu-aberto .topo{backdrop-filter:none;background:var(--claro)}
  .menu-aberto .menu{display:flex;flex-direction:column;gap:0;position:fixed;left:0;right:0;top:64px;height:calc(100vh - 64px);background:var(--claro);padding:24px var(--gutter);z-index:49}
  .menu-aberto{overflow:hidden}
  .menu-aberto .menu a{font:300 2.1rem/1 var(--titulo);letter-spacing:0;text-transform:none;padding:22px 0;border-bottom:1px solid var(--fio)}
}

/* Abertura: texto sobre grafite + foto de detalhe */
.capa.escuro{background:var(--grafite);color:#b9bcbe}
.capa.escuro h1{color:#f3f1ec}
.capa.escuro .lead-capa{color:#a9adb0}
.capa.escuro .botao{border-color:rgba(255,255,255,.7);color:#f3f1ec}
.capa.escuro .botao:hover{background:#f3f1ec;color:var(--grafite)}
.capa{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);min-height:min(88vh,820px)}
.capa .texto{display:flex;flex-direction:column;justify-content:flex-end;padding:96px var(--gutter) 88px max(var(--gutter),calc((100vw - var(--largura))/2 + var(--gutter)))}
.capa h1{max-width:9em;margin-bottom:28px}
.capa .lead-capa{font-size:1.06rem;line-height:1.75;color:#a9adb0;max-width:33em;margin:0 0 44px}
.capa figure{margin:0;position:relative;overflow:hidden}
.capa figure img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.capa{grid-template-columns:1fr;min-height:0}.capa figure{order:-1;aspect-ratio:4/3.6}.capa .texto{padding:48px var(--gutter) 56px}.capa .botao{width:100%}}

/* Seções */
.secao{padding:clamp(88px,12vw,176px) 0}
.tom{background:var(--claro2)}

/* Manifesto */
.manifesto p.grande{font:300 clamp(1.7rem,3.2vw,2.7rem)/1.28 var(--titulo);color:var(--tinta);max-width:22em;margin:0 0 44px}

/* Especialidades numeradas */
.lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--tinta);counter-reset:n}
.lista li{counter-increment:n;border-bottom:1px solid var(--fio)}
.lista a{display:grid;grid-template-columns:72px minmax(0,5fr) minmax(0,4fr) 24px;gap:24px;align-items:baseline;padding:34px 0;text-decoration:none;transition:color .2s}
.lista a::before{content:"0" counter(n);font:500 .8rem var(--corpo);letter-spacing:.08em;color:var(--laranja)}
.lista h3{margin:0;font-size:clamp(1.6rem,2.6vw,2.2rem)}
.lista p{margin:0;color:var(--suave);font-size:.98rem}
.lista a::after{content:"→";color:var(--suave);justify-self:end}
.lista a:hover h3{color:var(--verde)}
.lista a:hover::after{color:var(--verde)}
.cabeca{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px;margin-bottom:56px}
.cabeca h2{margin:0}
@media(max-width:900px){.lista a{grid-template-columns:44px 1fr;gap:6px 14px;padding:24px 0}.lista p{grid-column:2}.lista a::after{display:none}}

/* Engenheiro */
.engenheiro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,8vw,128px);align-items:center}
.engenheiro img{width:100%;aspect-ratio:4/5;object-fit:cover}
.engenheiro .cargo{font:500 .72rem/1.8 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:#8b8f92;margin:-8px 0 30px}
.engenheiro p{font-size:1.05rem;max-width:30em}
@media(max-width:900px){.engenheiro{grid-template-columns:1fr}.engenheiro img{max-width:420px}}

/* Método */
.metodo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--tinta)}
.metodo li{padding:30px 32px 0 0}
.metodo li+li{padding-left:32px;border-left:1px solid var(--fio)}
.metodo b{display:block;font:500 .8rem var(--corpo);letter-spacing:.08em;color:var(--laranja);margin-bottom:18px}
.metodo span{font:300 clamp(1.4rem,2.2vw,1.85rem)/1.25 var(--titulo);color:var(--tinta)}
@media(max-width:900px){.metodo{grid-template-columns:1fr}.metodo li,.metodo li+li{padding:24px 0;border-left:0;border-bottom:1px solid var(--fio)}}

/* Contato resumido */
.contato-curto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;border-top:1px solid var(--fio-escuro);padding-top:30px;margin:8px 0 52px}
.contato-curto dt{font:500 .7rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:#8b8f92;margin-bottom:14px}
.contato-curto dd{margin:0;color:#e9e7e2;font-size:1rem}
.contato-curto a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
.acoes{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center}
@media(max-width:900px){.contato-curto{grid-template-columns:1fr;gap:24px}.acoes .botao{width:100%}}

/* Páginas internas */
.capa-int{padding:clamp(96px,13vw,190px) 0 clamp(64px,8vw,110px)}
.capa-int h1{font-size:clamp(2.5rem,5.4vw,4.8rem);max-width:12em}
.capa-int .lead{font-size:1.1rem;max-width:36em;color:var(--suave);margin:8px 0 40px}
.escuro .capa-int .lead,.capa-int.escuro .lead{color:#9a9ea1}
.trilha{font:500 .7rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--suave);margin-bottom:40px}
.trilha a{text-decoration:none}.trilha a:hover{color:var(--tinta)}
@media(max-width:900px){.capa-int .botao{width:100%}}

.corpo-texto{max-width:760px}
.corpo-texto h2{font-size:clamp(1.8rem,3vw,2.5rem);margin-top:1.6em}
.corpo-texto h2:first-child{margin-top:0}
.corpo-texto p{font-size:1.04rem}
.corpo-texto b{color:var(--tinta);font-weight:500}
.corpo-texto ul.itens{list-style:none;padding:0;margin:0 0 1em;border-top:1px solid var(--fio)}
.corpo-texto ul.itens li{padding:16px 0;border-bottom:1px solid var(--fio)}
.casos{list-style:none;margin:0 0 1em;padding:0}
.casos li{padding:2px 0 2px 22px;border-left:1px solid var(--laranja);margin-bottom:20px}
.aviso{border-top:1px solid var(--tinta);border-bottom:1px solid var(--fio);padding:18px 0}
details{border-bottom:1px solid var(--fio)}
.corpo-texto h2+details{border-top:1px solid var(--fio)}
summary{cursor:pointer;color:var(--tinta);padding:20px 44px 20px 0;list-style:none;position:relative;font-weight:500}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:15px;font:300 1.5rem var(--corpo);color:var(--suave)}
details[open] summary::after{content:"−"}
details p{margin:-6px 0 20px}
.conteudo{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(48px,8vw,120px);align-items:start}
.lateral{position:sticky;top:110px;border-top:1px solid var(--tinta);padding-top:24px}
.lateral p{font-size:.95rem;color:var(--suave);margin:0 0 6px}
.lateral p b{color:var(--tinta);font-weight:500}
.lateral .botao{width:100%;margin:22px 0 28px}
.lateral .outras{border-top:1px solid var(--fio);padding-top:18px}
.lateral .outras a{display:block;padding:8px 0;text-decoration:none;color:var(--tinta);font-size:.95rem}
.lateral .outras a:hover{color:var(--verde)}
@media(max-width:900px){.conteudo{grid-template-columns:1fr}.lateral{position:static}}

/* Linha do tempo (A Oficina) */
.tempo{list-style:none;margin:0;padding:0;border-top:1px solid var(--tinta)}
.tempo li{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--fio);align-items:baseline}
.tempo b{font:300 clamp(2rem,3.4vw,2.8rem)/1 var(--titulo);color:var(--laranja)}
.tempo span{font-size:1.04rem;color:var(--texto);max-width:36em}
@media(max-width:700px){.tempo li{grid-template-columns:1fr;gap:8px}}

/* Formação (Engenharia) */
.formacao,.treinamentos{list-style:none;margin:0 0 72px;padding:0;border-top:1px solid var(--tinta)}
.formacao li{display:grid;grid-template-columns:140px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--fio)}
.formacao span{font:500 .8rem/1.9 var(--corpo);letter-spacing:.06em;color:var(--laranja)}
.treinamentos div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;padding:20px 0;border-bottom:1px solid var(--fio)}
.treinamentos dt{color:var(--tinta);font-weight:500}
.treinamentos .anos{display:block;font:500 .78rem/1.6 var(--corpo);letter-spacing:.06em;color:var(--laranja);margin-top:4px}
.treinamentos dd{margin:0;color:var(--texto);font-size:.98rem}
@media(max-width:700px){.formacao li{grid-template-columns:96px 1fr;gap:12px}.treinamentos div{grid-template-columns:1fr;gap:4px}}

/* Marcas (A Oficina) */
.marcas{display:flex;flex-wrap:wrap;align-items:center;gap:28px 56px;padding:36px 0;border-top:1px solid var(--fio);border-bottom:1px solid var(--fio)}
.marcas img{height:22px;width:auto;filter:grayscale(1);opacity:.55}

/* Contato (página) */
.contato{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,110px);align-items:stretch}
.contato dl{margin:0 0 40px;display:grid;grid-template-columns:120px 1fr;gap:18px;border-top:1px solid var(--tinta);padding-top:26px}
.contato dt{font:500 .7rem/1.9 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
.contato dd{margin:0;color:var(--tinta)}
.contato dd a{text-decoration:none;border-bottom:1px solid var(--fio)}
.mapa{position:relative;min-height:480px;background:var(--claro2);overflow:hidden}
.mapa iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.85) contrast(.95)}
.mapa button{position:absolute;inset:0;width:100%;border:0;cursor:pointer;background:var(--claro2);font:500 .74rem var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.mapa button svg{width:28px;height:28px}
.mapa button small{font:400 .9rem var(--corpo);letter-spacing:0;text-transform:none;color:var(--suave)}
@media(max-width:900px){.contato{grid-template-columns:1fr}.contato dl{grid-template-columns:96px 1fr}.mapa{min-height:320px}.contato .botao{width:100%}}

/* Botão de rota sobre o mapa: discreto, no padrão dos botões do site */
.mapa-rota{position:absolute;left:20px;bottom:20px;z-index:2;display:inline-flex;align-items:center;gap:10px;background:var(--grafite);color:#f3f1ec;text-decoration:none;font:500 .74rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;padding:16px 22px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.mapa-rota svg{width:18px;height:18px}
.mapa-rota:hover{background:var(--verde)}
@media(max-width:900px){.mapa{display:flex;flex-direction:column;min-height:0;overflow:visible;background:none}.mapa iframe{position:relative;inset:auto;height:340px;width:100%}.mapa-rota{position:static;justify-content:center;width:100%;box-shadow:none}}

/* Rodapé */
.rodape{background:var(--grafite);color:#8b8f92;padding:88px 0 120px;font-size:.92rem}
.rodape .colunas{display:grid;grid-template-columns:minmax(0,4fr) repeat(3,minmax(0,3fr));gap:40px}
.rodape h4{font:500 .7rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:#d9d7d2;margin:0 0 20px}
.rodape a{color:#b9bcbe;text-decoration:none}.rodape a:hover{color:#fff}
.rodape ul{list-style:none;padding:0;margin:0}.rodape li{margin-bottom:10px}
.rodape .logo img{height:30px;width:auto;margin-bottom:22px}
.rodape .base{border-top:1px solid var(--fio-escuro);margin-top:64px;padding-top:24px;display:flex;flex-wrap:wrap;gap:8px 32px;justify-content:space-between;font-size:.8rem}
.rodape .base strong{color:#b9bcbe;font-weight:500}
@media(max-width:900px){.rodape .colunas{grid-template-columns:1fr 1fr}.rodape .colunas>div:first-child{grid-column:1/-1}}

/* Flutuantes (pedido do dono): Bosch à esquerda, WhatsApp à direita — pequenos e discretos */
.selo-bosch{position:fixed;left:18px;bottom:18px;z-index:60;width:54px;overflow:hidden;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.18)}
.selo-bosch img{width:100%;height:auto}
.zap-fixo{position:fixed;right:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--zap);color:#fff;box-shadow:0 4px 16px rgba(0,0,0,.22)}
.zap-fixo svg{width:27px;height:27px}
.zap-fixo span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:600px){.selo-bosch{left:12px;bottom:12px;width:44px}.zap-fixo{right:12px;bottom:12px;width:50px;height:50px}}

/* Acesso da equipe no menu: discreto, mas sempre à mão */
.menu a.equipe{color:var(--suave);border-left:1px solid var(--fio);padding-left:24px}
.menu a.equipe::before{content:"\1F512\FE0E";margin-right:8px;font-size:.85em}
@media(max-width:900px){.menu-aberto .menu a.equipe{border-left:0;padding-left:0;color:var(--suave);font-size:1.4rem}}

/* Selos Bosch e ZF */
.selos{display:flex;flex-wrap:wrap;align-items:center;gap:32px 64px}
.selos-logos{display:flex;align-items:center;gap:48px}
.selos-logos img{height:44px;width:auto}
.selos-logos img[alt^="Especialista"]{height:96px;box-shadow:0 0 0 1px #d9d5cd}
.selos-logos img[alt^="ZF"]{height:72px}
.grande-curta{font:300 clamp(1.6rem,3vw,2.4rem)/1.2 var(--titulo);color:var(--tinta);margin:0;font-variant-numeric:lining-nums}

/* Passos do atendimento (5): no celular, coluna única */
.metodo.cinco{grid-template-columns:repeat(5,minmax(0,1fr))}
.metodo.cinco span{font-size:clamp(1.15rem,1.6vw,1.35rem)}
@media(max-width:900px){.metodo.cinco{grid-template-columns:1fr}}

/* Problemas mais comuns */
.problemas{list-style:none;margin:0 0 1em;padding:0;border-top:1px solid var(--fio)}
.problemas li{padding:16px 0;border-bottom:1px solid var(--fio);display:grid;gap:4px}
.problemas b{color:var(--tinta);font-weight:500}
.problemas span{font-size:.97rem;color:var(--texto)}

/* Casos em vídeo */
.videos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:40px 32px}
.videos a{text-decoration:none;display:block}
.videos img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 35%;margin-bottom:16px;background:var(--claro2)}
.videos .data{font:500 .7rem/1 var(--corpo);letter-spacing:.16em;text-transform:uppercase;color:var(--suave)}
.videos h3{font-size:1.35rem;margin:8px 0 0;line-height:1.2}
.videos a:hover h3{color:var(--verde)}
@media(max-width:600px){.videos{grid-template-columns:1fr 1fr;gap:28px 16px}.videos h3{font-size:1.1rem}}
