/* ==========================================================================
   AUTO ELÉTRICA — escuro como um painel de carro à noite: grafite quase
   preto, âmbar das luzes de aviso, vermelho e verde de LED. Chakra Petch
   (técnica, de painel) + Inter. Ferramenta em forma de painel de
   instrumentos, com as luzes que acendem ao tocar.
   ========================================================================== */

body { background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto); }
h1, h2, h3, .marca { font-family: var(--fonte-titulos); letter-spacing: -.01em; line-height: 1.05; }
h2 { font-size: clamp(2rem, 4.6vw, 3.3rem); font-weight: 700; margin: 12px 0 10px; text-transform: uppercase; }
section { padding: 90px 5vw; }
.cab { max-width: 700px; margin-bottom: 38px; }
.cab > p { color: var(--suave); font-size: 1.06rem; }
.tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fonte-titulos); font-weight: 600; font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; color: var(--primaria); }
.tag::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--primaria); box-shadow: 0 0 10px var(--primaria); }
.rot { font-family: var(--fonte-titulos); font-weight: 600; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); margin: 4px 0 10px; }
.led { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--primaria); box-shadow: 0 0 10px var(--primaria); }
.led.verde { background: var(--verde); box-shadow: 0 0 10px var(--verde); }
.led.amarelo { background: var(--primaria); }

.botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primaria); color: #14100a; font-family: var(--fonte-titulos); font-weight: 700; font-size: 1.02rem; letter-spacing: .02em; padding: 15px 26px; border-radius: 10px; clip-path: polygon(0 0, 100% 0, 100% 70%, 92% 100%, 0 100%); transition: transform .15s, filter .15s; }
.botao:hover { transform: translateY(-2px); filter: brightness(1.08); }
.botao.claro { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--linha); clip-path: none; }
.botao.pequeno { padding: 10px 18px; font-size: .92rem; }
.botao.largo { width: 100%; }
.botao.whats { background: #1faa59; color: #fff; clip-path: none; }

/* ---------- Topo ---------- */
.topo { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 26px; padding: 14px 5vw; background: color-mix(in srgb, var(--fundo) 80%, transparent); backdrop-filter: blur(12px); transition: box-shadow .2s; }
.topo.rolou { box-shadow: 0 1px 0 var(--linha); }
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.15rem; margin-right: auto; text-transform: uppercase; min-width: 0; }
.marca span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-ico { width: 34px; height: 34px; flex: none; }
.topo-nav { display: flex; gap: 24px; font-weight: 600; font-size: .95rem; color: var(--suave); }
.topo-nav a:hover { color: var(--texto); }
@media (max-width: 860px) { .topo-nav { display: none; } }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: min(86vh, 760px); display: flex; align-items: center; padding-top: 60px; padding-bottom: 60px; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% center; opacity: .9; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at 75% 50%, transparent 0, rgba(10,12,16,.4) 45%, var(--fundo) 85%), linear-gradient(90deg, var(--fundo) 0, rgba(10,12,16,.75) 45%, transparent 75%); }
.hero-txt { position: relative; z-index: 2; max-width: 640px; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--suave); font-weight: 600; margin-bottom: 16px; }
.hero h1 { font-size: clamp(2.6rem, 6.6vw, 5.4rem); font-weight: 700; text-transform: uppercase; margin-bottom: 18px; }
.hero h1 span { color: var(--primaria); text-shadow: 0 0 30px color-mix(in srgb, var(--primaria) 45%, transparent); }
.hero-frase { color: #c3cad6; font-size: 1.1rem; max-width: 540px; margin-bottom: 28px; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.selos { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 30px; color: #c3cad6; font-size: .9rem; font-weight: 600; }
.selos li::before { content: '✓'; color: var(--verde); margin-right: 7px; font-weight: 800; }

/* ---------- Painel (ferramenta) ---------- */
.painel-sec { background: linear-gradient(180deg, var(--fundo), var(--escuro)); }
.cluster { position: relative; display: grid; grid-template-columns: 200px 1fr 200px; gap: 26px; align-items: center; padding: 34px; border-radius: 120px 120px 40px 40px; background: radial-gradient(ellipse at 50% 0, #1b202b, #0b0d12 70%); box-shadow: inset 0 0 0 1px #262c3a, inset 0 20px 60px rgba(0,0,0,.6), 0 40px 80px -40px rgba(255,176,32,.25); }
.mostrador { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #10131a 55%, transparent 56%), conic-gradient(from 225deg, #2a3140 0 270deg, transparent 270deg); }
.mostrador i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 225deg, var(--primaria) 0 var(--g, 60deg), transparent var(--g, 60deg)); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 68%, transparent 69%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 68%, transparent 69%); opacity: .85; }
.m-dir i { --g: 110deg; background: conic-gradient(from 225deg, #5ad1ff 0 var(--g), transparent var(--g)); }
.mostrador span { font-family: var(--fonte-titulos); color: var(--suave); letter-spacing: .2em; font-size: .8rem; }
.luzes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.luz { display: grid; justify-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: 16px; background: #0c0f14; box-shadow: inset 0 0 0 1px #212736; color: #3a4252; transition: color .25s, box-shadow .25s, transform .15s, background .25s; }
.luz svg { width: 44px; height: 44px; }
.luz span { font-size: .78rem; font-weight: 600; color: #6b7487; }
.luz:hover { color: #59627a; transform: translateY(-2px); }
.luz.acesa.amarelo { color: var(--primaria); filter: drop-shadow(0 0 10px rgba(255,176,32,.55)); box-shadow: inset 0 0 0 1.5px rgba(255,176,32,.6); background: rgba(255,176,32,.06); }
.luz.acesa.vermelho { color: var(--vermelho); filter: drop-shadow(0 0 10px rgba(255,59,48,.55)); box-shadow: inset 0 0 0 1.5px rgba(255,59,48,.6); background: rgba(255,59,48,.06); }
.luz.acesa span { color: var(--texto); }
.luz-info { margin-top: 22px; background: var(--papel); border-radius: 22px; padding: 24px; box-shadow: inset 0 0 0 1px var(--linha); min-height: 92px; }
.luz-vazio { color: var(--suave); text-align: center; padding: 10px 0; font-weight: 600; }
.li-cab { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.li-cab svg { width: 52px; height: 52px; flex: none; }
.li-cab.amarelo svg { color: var(--primaria); filter: drop-shadow(0 0 8px rgba(255,176,32,.6)); }
.li-cab.vermelho svg { color: var(--vermelho); filter: drop-shadow(0 0 8px rgba(255,59,48,.6)); }
.li-cab small { color: var(--suave); font-weight: 600; }
.li-cab h3 { font-size: 1.6rem; text-transform: uppercase; }
.nivel { margin-left: auto; padding: 8px 14px; border-radius: 999px; font-family: var(--fonte-titulos); font-weight: 700; font-size: .9rem; white-space: nowrap; }
.nivel.n-pare { background: rgba(255,59,48,.16); color: #ff7a71; }
.nivel.n-cuidado, .nivel.n-logo { background: rgba(255,176,32,.15); color: var(--primaria); }
.luz-info dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.luz-info dl div { background: var(--papel2); border-radius: 14px; padding: 14px; }
.luz-info dt { font-family: var(--fonte-titulos); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); margin-bottom: 6px; }
.li-rodar.n-pare { box-shadow: inset 3px 0 0 var(--vermelho); }
.li-rodar.n-cuidado, .li-rodar.n-logo { box-shadow: inset 3px 0 0 var(--primaria); }
.li-aviso { display: block; margin-top: 12px; color: var(--suave); font-size: .82rem; }
@media (max-width: 900px) {
  .cluster { grid-template-columns: 1fr; border-radius: 30px; padding: 18px; }
  .mostrador { display: none; }
  .luz-info dl { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .luz svg { width: 36px; height: 36px; } .luz span { font-size: .7rem; } }

/* ---------- Socorro ---------- */
.socorro { margin: 0 5vw; padding: 26px 30px; border-radius: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; background: linear-gradient(110deg, #2a1c05, #1a1307 60%, #12151c); box-shadow: inset 0 0 0 1px rgba(255,176,32,.35); }
.socorro b { font-family: var(--fonte-titulos); font-size: 1.4rem; text-transform: uppercase; }
.socorro p { color: #d8c6a2; max-width: 620px; }

/* ---------- Serviços ---------- */
.serv-grade { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 12px; }
.sv { position: relative; border-radius: 20px; overflow: hidden; background: var(--papel); box-shadow: inset 0 0 0 1px var(--linha); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.sv.grande { grid-column: span 2; grid-row: span 2; }
.sv.foto { padding: 0; }
.sv.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.sv.foto:hover img { transform: scale(1.04); }
.sv.foto figcaption { position: absolute; inset: auto 0 0 0; padding: 60px 18px 18px; background: linear-gradient(180deg, transparent, rgba(6,7,10,.92)); display: grid; gap: 4px; }
.sv b { font-family: var(--fonte-titulos); font-size: 1.2rem; text-transform: uppercase; line-height: 1.1; }
.sv.grande b { font-size: 1.7rem; }
.sv span, .sv p { color: var(--suave); font-size: .92rem; }
.sv.foto span { color: #c3cad6; }
.sv-ico { font-size: 1.8rem; margin-bottom: auto; }
@media (max-width: 960px) { .serv-grade { grid-template-columns: 1fr 1fr; grid-auto-rows: 210px; } }
@media (max-width: 560px) { .serv-grade { grid-template-columns: 1fr; grid-auto-rows: auto; } .sv.foto, .sv.grande { grid-column: auto; grid-row: auto; height: 240px; } .sv:not(.foto) { min-height: 150px; } }

/* ---------- Marcas ---------- */
.marcas { padding-top: 20px; padding-bottom: 40px; overflow: hidden; }
.esteira { margin: 18px -5vw 0; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.esteira > div { display: flex; gap: 40px; width: max-content; animation: esteira 40s linear infinite; }
.esteira span { font-family: var(--fonte-titulos); font-weight: 700; font-size: 1.6rem; text-transform: uppercase; color: #3d4556; white-space: nowrap; }
@keyframes esteira { to { transform: translateX(-50%); } }

/* ---------- Diagnóstico (formulário) ---------- */
.diagnostico { background: var(--escuro); }
.form { max-width: 820px; background: var(--papel); border-radius: 24px; padding: 28px; display: grid; gap: 14px; box-shadow: inset 0 0 0 1px var(--linha); }
.sintomas { display: flex; flex-wrap: wrap; gap: 8px; }
.sintomas button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--papel2); box-shadow: inset 0 0 0 1px var(--linha); font-weight: 600; font-size: .92rem; color: #c3cad6; transition: all .2s; }
.sintomas button.ativo { background: rgba(255,176,32,.12); box-shadow: inset 0 0 0 1.5px var(--primaria); color: var(--texto); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form label { display: grid; gap: 6px; font-weight: 600; font-size: .9rem; color: #c3cad6; }
.form input, .form select { padding: 13px 14px; border-radius: 12px; border: 1px solid var(--linha); background: var(--papel2); color: var(--texto); }
.form input:focus, .form select:focus { outline: none; border-color: var(--primaria); }
.form input[type=date] { color-scheme: dark; }
.parado { display: flex !important; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(255,59,48,.07); box-shadow: inset 0 0 0 1px rgba(255,59,48,.3); cursor: pointer; }
.parado input { width: 20px; height: 20px; accent-color: var(--vermelho); }
.parado b { display: block; color: var(--texto); }
.parado small { color: var(--suave); }
.anexo { background: rgba(255,176,32,.1); border-radius: 14px; padding: 12px 14px; display: grid; gap: 2px; box-shadow: inset 0 0 0 1px rgba(255,176,32,.35); }
.anexo b { color: var(--primaria); }
.anexo span { color: #c3cad6; font-size: .9rem; }
.erro { color: #ff7a71; font-weight: 600; min-height: 1em; }
.form .aviso-horario { color: var(--texto); }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } .form { padding: 20px; } }

/* ---------- Como trabalhamos ---------- */
.passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.passos li { position: relative; background: var(--papel); border-radius: 20px; padding: 26px; box-shadow: inset 0 0 0 1px var(--linha); }
.passos .led { position: absolute; top: 24px; right: 24px; }
.passos span { font-family: var(--fonte-titulos); font-weight: 700; font-size: 2.4rem; color: #2c3342; }
.passos h3 { font-size: 1.3rem; text-transform: uppercase; margin: 4px 0 6px; }
.passos p { color: var(--suave); }
@media (max-width: 860px) { .passos { grid-template-columns: 1fr; } }

/* ---------- Depoimentos, dúvidas, rodapé ---------- */
.depos { padding-top: 0; }
.depos-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.depos blockquote { background: var(--papel); border-radius: 20px; padding: 24px; box-shadow: inset 0 0 0 1px var(--linha); }
.depos p { margin-bottom: 12px; color: #d6dbe4; }
.depos cite { font-style: normal; font-weight: 700; color: var(--primaria); }
.faq { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--linha); }
.faq-item button { width: 100%; display: flex; justify-content: space-between; gap: 14px; text-align: left; padding: 20px 0; font-weight: 600; font-size: 1.04rem; }
.faq-item button span { color: var(--primaria); font-size: 1.4rem; transition: transform .2s; }
.faq-item.aberto button span { transform: rotate(45deg); }
.faq-resp { max-height: 0; overflow: hidden; transition: max-height .3s; }
.faq-resp p { padding-bottom: 20px; color: var(--suave); }
.rodape { background: var(--escuro); color: var(--suave); text-align: center; padding: 50px 5vw; display: grid; justify-items: center; gap: 8px; border-top: 1px solid var(--linha); }
.rodape .marca { color: var(--texto); margin: 0; }
@media (max-width: 760px) { section { padding: 66px 5vw; } }
@media (max-width: 520px) { .topo > .botao.pequeno { display: none; } }