/* LF Mecanica Especializada · landing Google Ads Pesquisa
   Tokens = 02_Identidade_Feed/paleta.md. Vermelho so em botao, selo e destaque pontual.
   --preto-2 e --linha sao degraus entre o Preto LF e o grafite, para separar secoes sem cor nova. */

@font-face{font-family:'Oswald';src:url(/assets/fonts/oswald-latin-500-700.woff2) format('woff2');font-weight:500 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url(/assets/fonts/inter-latin-400-700.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Anton';src:url(/assets/fonts/anton-digitos.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020,U+0030-0039}
/* fallbacks com metrica casada (troca de fonte sem pulo de layout) */
@font-face{font-family:'Oswald Fallback';src:local('Arial Bold'),local('Arial-BoldMT'),local('Arial');font-weight:500 700;size-adjust:78.2%;ascent-override:152.6%;descent-override:37%;line-gap-override:0%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT');size-adjust:106.3%;ascent-override:91.1%;descent-override:22.7%;line-gap-override:0%}

:root{
  --preto:#0E0E0E;
  --preto-2:#151515;
  --grafite:#2A2A2A;
  --linha:#232323;
  --cinza:#C9C9C9;
  --branco:#FFFFFF;
  --vermelho:#DD0000;
  --vermelho-hover:#C20000;

  --f-titulo:'Oswald','Oswald Fallback','Arial Narrow',sans-serif;
  --f-corpo:'Inter','Inter Fallback',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-num:'Anton','Oswald','Oswald Fallback',sans-serif;

  --gutter:16px;
  --max:1200px;
  --raio:4px;
  --barra-h:72px;
  --sec-y:56px;
}
@media (min-width:600px){:root{--gutter:24px;--sec-y:72px}}
@media (min-width:960px){:root{--gutter:40px;--sec-y:96px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--preto);color:var(--branco);font-family:var(--f-corpo);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  padding-bottom:calc(var(--barra-h) + env(safe-area-inset-bottom))}
@media (min-width:960px){body{padding-bottom:0}}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-titulo);font-weight:700;text-transform:uppercase;line-height:1.04;letter-spacing:.01em;margin:0}
h3{line-height:1.14}
h1,h2,.chamada p{text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--branco);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:calc(var(--max) + var(--gutter)*2);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- botoes ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:var(--raio);
  font-family:var(--f-titulo);font-weight:600;font-size:17px;letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  border:2px solid transparent;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease;-webkit-tap-highlight-color:transparent}
.btn svg{width:22px;height:22px;flex:none;fill:currentColor}
.btn-wpp{background:var(--vermelho);color:var(--branco)}
.btn-wpp:hover{background:var(--vermelho-hover)}
.btn-wpp:active{transform:translateY(1px)}
.btn-linha{background:transparent;color:var(--branco);border-color:#5a5a5a}
.btn-linha:hover{border-color:var(--branco)}
.btn-bloco{width:100%}

/* ---------- cabecalho ---------- */
.topo{position:relative;z-index:3;border-bottom:1px solid var(--linha);background:var(--preto)}
.topo .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.marca{display:block;line-height:0}
.marca img{width:150px;height:auto}
.topo-local{display:none;font-size:13px;color:var(--cinza);letter-spacing:.02em}
@media (min-width:960px){.topo .wrap{height:76px}.marca img{width:190px}.topo-local{display:block}}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--preto)}
.hero-media{position:relative;display:block;overflow:hidden;background:var(--preto-2)}
.hero-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,14,14,0) 45%,rgba(14,14,14,.55) 75%,var(--preto) 100%)}
.tarja{display:none;position:absolute;left:0;bottom:0;z-index:1;height:4px;width:96px;background:var(--vermelho)}
.selo{position:absolute;z-index:2;right:12px;top:12px;width:84px;height:84px;transform:rotate(-10deg);
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.hero-corpo{position:relative;z-index:2;margin-top:-36px;padding:0 0 26px}
.hero h1{font-size:clamp(34px,10.4vw,46px);line-height:1.02}
.hero-apoio{margin-top:12px;font-size:16.5px;line-height:1.5;color:var(--cinza);max-width:34em}
.hero-acoes{display:grid;gap:10px;margin-top:20px}
.hero-acoes .btn-wpp{min-height:56px;font-size:18px}
.faixa{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:14px;line-height:1.45;color:var(--cinza)}
.faixa svg{flex:none;width:16px;height:16px;margin-top:2px;fill:var(--vermelho)}

@media (min-width:600px){
  .hero-media img{aspect-ratio:16/9}
  .hero-acoes{grid-template-columns:auto auto;justify-content:start}
}
@media (min-width:960px){
  .hero{padding:56px 0 72px;border-bottom:1px solid var(--linha)}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
  .hero-corpo{order:1;margin:0;padding:0}
  .hero-media{order:2;border-radius:var(--raio)}
  .hero-media img{aspect-ratio:4/5}
  .hero-media::after{background:linear-gradient(180deg,rgba(14,14,14,0) 60%,rgba(14,14,14,.5) 100%)}
  .tarja{display:block}
  .selo{top:auto;bottom:22px;right:22px;width:116px;height:116px}
  .hero h1{font-size:clamp(48px,5.4vw,70px)}
  .hero-apoio{font-size:19px;margin-top:20px}
  .hero-acoes{margin-top:30px}
  .faixa{font-size:15px;margin-top:22px}
}
/* no celular a foto sangra; no desktop entra no grid */
@media (max-width:959.98px){.hero .wrap{padding:0}.hero-corpo{padding-left:var(--gutter);padding-right:var(--gutter)}}

/* ---------- secoes ---------- */
.sec{padding:var(--sec-y) 0}
.sec-alt{background:var(--preto-2);border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}
.sec-titulo{font-size:clamp(28px,7.4vw,44px);position:relative;padding-top:18px}
.sec-titulo::before{content:"";position:absolute;left:0;top:0;width:40px;height:4px;background:var(--vermelho)}
.sec-sub{margin-top:10px;color:var(--cinza);font-size:16px}
.fecho{margin-top:24px;font-family:var(--f-titulo);font-weight:500;font-size:19px;text-transform:uppercase;letter-spacing:.03em;color:var(--branco)}

/* servicos (home) */
.servicos{display:grid;gap:0;margin-top:28px;border-top:1px solid var(--grafite)}
.servico{display:grid;grid-template-columns:44px 1fr;align-content:start;gap:4px 12px;padding:16px 0;border-bottom:1px solid var(--grafite)}
.servico .n{grid-row:span 2;font-family:var(--f-num);font-size:22px;line-height:1.1;color:#8a8a8a}
.servico h3{font-size:19px;letter-spacing:.03em}
.servico p{color:var(--cinza);font-size:15px;line-height:1.5}
@media (min-width:600px){.servicos{grid-template-columns:1fr 1fr;column-gap:32px}}
@media (min-width:960px){.servicos{grid-template-columns:repeat(3,1fr);column-gap:40px}.servico{padding:22px 0}}

/* bloco de servico (paginas de servico) */
.dor{display:grid;gap:28px;margin-top:28px}
.lista-sinais li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--grafite);font-size:17px;line-height:1.45}
.lista-sinais{margin-top:24px}
.lista-sinais li:first-child{border-top:1px solid var(--grafite)}
.lista-sinais li::before{content:"";position:absolute;left:0;top:19px;width:16px;height:16px;border:2px solid var(--vermelho);border-radius:50%}
.lista-sinais li::after{content:"";position:absolute;left:6px;top:25px;width:4px;height:4px;background:var(--vermelho);border-radius:50%}
.apoio-destaque{margin-top:22px;padding:18px 20px;border-left:4px solid var(--vermelho);background:var(--preto-2);color:var(--branco);font-size:16.5px;line-height:1.55}
.sec-alt .apoio-destaque{background:var(--preto)}
.faz h3{font-size:24px;padding-top:14px;position:relative}
.faz h3::before{content:"";position:absolute;left:0;top:0;width:28px;height:3px;background:var(--vermelho)}
.lista-faz{margin-top:16px;counter-reset:f}
.lista-faz li{position:relative;padding:12px 0 12px 40px;font-size:16.5px;line-height:1.5;color:var(--branco);counter-increment:f}
.lista-faz li::before{content:counter(f);position:absolute;left:0;top:10px;width:28px;height:28px;display:grid;place-items:center;
  font-family:var(--f-num);font-size:16px;background:var(--grafite);border-radius:var(--raio)}
.outros{margin-top:20px;font-size:15px;color:var(--cinza)}
.outros strong{color:var(--branco);font-weight:600}
@media (min-width:960px){.dor{grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}}

/* diferenciais */
.difs{display:grid;gap:16px;margin-top:28px}
.dif{position:relative;display:grid;grid-template-columns:40px 1fr;align-content:start;column-gap:14px;padding:20px 18px;background:var(--preto);border:1px solid var(--grafite);border-radius:var(--raio)}
.dif .n{grid-row:span 2}
.sec-alt .dif{background:var(--preto)}
.dif .n{display:block;font-family:var(--f-num);font-size:44px;line-height:1;color:var(--vermelho)}
.dif h3{margin-top:2px;font-size:21px}
.dif p{margin-top:6px;color:var(--cinza);font-size:15.5px}
@media (min-width:960px){.difs{grid-template-columns:repeat(3,1fr);gap:24px}.dif{display:block;padding:30px 28px}.dif h3{margin-top:14px;font-size:22px}}

/* fotos */
.galeria{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:26px}
.galeria img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--raio);background:var(--preto-2)}
@media (min-width:960px){.galeria{grid-template-columns:repeat(4,1fr);gap:16px}}

/* como funciona */
.passos{display:grid;gap:0;margin-top:30px;counter-reset:p}
.passo{position:relative;padding:0 0 26px 62px}
.passo::before{content:"";position:absolute;left:21px;top:46px;bottom:4px;width:2px;background:var(--grafite)}
.passo:last-child{padding-bottom:0}
.passo:last-child::before{display:none}
.passo .n{position:absolute;left:0;top:0;width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--vermelho);border-radius:50%;
  font-family:var(--f-num);font-size:20px;line-height:1;color:var(--branco)}
.passo h3{font-size:22px;padding-top:9px}
.passo p{margin-top:6px;color:var(--cinza);font-size:15.5px}
@media (min-width:960px){
  .passos{grid-template-columns:repeat(4,1fr);gap:32px}
  .passo{padding:62px 0 0}
  .passo::before{left:56px;right:-24px;top:21px;bottom:auto;width:auto;height:2px}
  .passo:last-child::before{display:none}
  .passo .n{top:0}
  .passo h3{padding-top:0}
}

/* chamada do meio */
.chamada{margin-top:40px;padding:26px 22px;background:var(--grafite);border-radius:var(--raio);display:grid;gap:18px;position:relative;overflow:hidden}
.chamada::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--vermelho)}
.chamada p{font-family:var(--f-titulo);font-weight:600;font-size:22px;line-height:1.2;text-transform:uppercase;letter-spacing:.02em}
@media (min-width:960px){.chamada{grid-template-columns:1fr auto;align-items:center;padding:32px 40px;margin-top:56px}.chamada p{font-size:28px}}

/* FAQ */
.faq{margin-top:26px;border-top:1px solid var(--grafite)}
.faq details{border-bottom:1px solid var(--grafite)}
.faq summary{list-style:none;cursor:pointer;position:relative;padding:18px 44px 18px 0;font-weight:600;font-size:17px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px;
  background:linear-gradient(var(--vermelho),var(--vermelho)) center/14px 2px no-repeat,linear-gradient(var(--vermelho),var(--vermelho)) center/2px 14px no-repeat;
  transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--cinza);font-size:16px;line-height:1.6;max-width:44em}
@media (min-width:960px){.faq{max-width:860px}}

/* onde fica */
.onde{display:grid;gap:26px;margin-top:28px}
.onde-foto{position:relative;border-radius:var(--raio);overflow:hidden;background:var(--preto-2)}
.onde-foto img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 0%}
.onde-foto .pino{position:absolute;left:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(14,14,14,.86);
  border-radius:var(--raio);font-size:13px;font-weight:600;letter-spacing:.02em}
.onde-foto .pino svg{width:16px;height:16px;fill:var(--vermelho)}
.endereco{font-size:18px;line-height:1.5;font-weight:600;font-style:normal}
.horario{margin-top:18px;border-top:1px solid var(--grafite)}
.horario div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--grafite);font-size:15.5px}
.horario dt{color:var(--cinza)}
.horario dd{margin:0;font-weight:600;text-align:right}
.fone{margin-top:16px;font-size:15.5px;color:var(--cinza)}
.fone strong{color:var(--branco);font-weight:600;white-space:nowrap}
.onde-acoes{display:grid;gap:10px;margin-top:22px}
@media (min-width:600px){.onde-acoes{grid-template-columns:1fr 1fr}}
@media (min-width:960px){.onde{grid-template-columns:1fr 1fr;gap:56px;align-items:center}.onde-foto img{aspect-ratio:4/5;object-position:50% 50%}}

/* rodape */
.rodape{padding:44px 0 36px;border-top:1px solid var(--linha);background:var(--preto);font-size:15px;color:var(--cinza)}
.rodape .nome{font-family:var(--f-titulo);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em;color:var(--branco)}
.rodape address{font-style:normal;margin-top:8px;line-height:1.6}
.rodape address a{color:var(--branco);text-decoration:none;font-weight:600}
.rodape address a:hover{text-decoration:underline}
.rodape .assinatura{margin-top:16px;color:var(--branco);font-weight:600}
.rodape .acao{margin-top:22px;max-width:360px}
.rodape .links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;padding-top:18px;border-top:1px solid var(--linha);font-size:13.5px}
.rodape .links a{color:var(--cinza);text-underline-offset:3px}
.rodape .links a:hover{color:var(--branco)}
.rodape-logo{width:150px;margin-bottom:18px}
@media (min-width:960px){.rodape .grid{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}.rodape .acao{margin-top:0;justify-self:end;width:100%}}

/* barra fixa do celular */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:8px;
  padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background:rgba(14,14,14,.97);border-top:1px solid var(--grafite);box-shadow:0 -8px 24px rgba(0,0,0,.35)}
.barra .btn{min-height:52px;padding:0 14px;font-size:16px}
.barra .btn-wpp{flex:1 1 auto}
.barra .btn-linha{flex:0 0 auto;border-color:#5a5a5a}
.barra .btn{white-space:nowrap}
@media (max-width:389.98px){.barra{gap:6px}.barra .btn{font-size:14.5px;padding:0 10px;gap:7px;letter-spacing:.03em}.barra .btn svg{width:19px;height:19px}}
@media (min-width:960px){.barra{display:none}}
@supports not (padding:env(safe-area-inset-bottom)){.barra{padding-bottom:10px}}