/* VPA Serviços Automotivos (#392): "o painel do carro, por dentro" (LEITURA.md).
   Console azul-marinho do site (#193344) com a luz do painel no bege do logo (#ad9985), fundo frio (#f3f5f8),
   âmbar só no teste das luzes-espia. Saira (títulos) + Be Vietnam Pro (texto) + Doto (computador de bordo). */
:root {
  --fundo: #f3f5f8;
  --tinta: #13202b;
  --suave: #3a4f66;
  --marca: #193344;
  --marca-2: #ad9985;
  --linha: #d3dae3;
  --cartao: #ffffff;
  --console: #0f2230;
  --console-2: #152c3c;
  --luz: #c9b7a2;
  --ambar: #f2a127;
  --fonte-titulo: "Saira", system-ui, sans-serif;
  --fonte-texto: "Be Vietnam Pro", system-ui, sans-serif;
  --raio: 10px;
}
body { font-size: clamp(16px, 1vw, 17px); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.04; }
a { text-underline-offset: 3px; }
p a, dd a, figcaption a { text-decoration: underline; text-decoration-thickness: 1px; }
.botao { border-radius: 8px; font-family: var(--fonte-texto); font-weight: 600; }
.botao--luz { --b-fundo: var(--marca-2); --b-tinta: #10202c; }

/* Cabeçalho azul com o logo metálico (só funciona sobre o azul) */
.topo { position: sticky; top: 0; z-index: 50; background: var(--marca); color: #eef2f6; }
.topo.rolou { box-shadow: 0 10px 30px -18px rgb(0 0 0 / .6); }
.topo__linha { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.topo__marca { display: inline-flex; align-items: center; min-height: 48px; }
.topo__marca img { height: 34px; width: auto; }
.topo__nav { display: flex; gap: 22px; margin-left: auto; font-size: .92rem; font-weight: 500; }
.topo__nav a { padding: 8px 0; color: #dfe5ec; }
.topo__nav a:hover { color: #fff; }
.topo__cta { padding: .7em 1.1em; }
.topo__cta { --b-fundo: var(--marca-2); --b-tinta: #10202c; }
.topo__menu { display: none; }

/* Hero: a cabine à noite */
.cabine { position: relative; background: radial-gradient(120% 90% at 85% 10%, #22415a 0%, var(--marca) 45%, #0e1d29 100%); color: #eef2f6; padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 7vw, 100px); overflow: clip; }
.cabine__grade { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.cabine h1 { font-size: clamp(2.5rem, 5.6vw, 4.9rem); line-height: 1; font-weight: 700; letter-spacing: -0.02em; max-width: 14ch; }
.cabine__lead { margin: 22px 0 30px; max-width: 46ch; color: #c9d3de; font-size: 1.08rem; }

.console { position: relative; padding: 26px 26px 22px; border-radius: 22px; background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--console-2), var(--console));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), inset 0 -18px 40px rgb(0 0 0 / .35), 0 30px 60px -30px rgb(0 0 0 / .7); border: 1px solid rgb(255 255 255 / .06); }
.console__titulo { font: 600 .78rem/1 var(--fonte-texto); letter-spacing: .14em; text-transform: uppercase; color: var(--luz); opacity: .8; margin-bottom: 14px; }
.seletor { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 14px; }
.seletor__fenda { width: 40px; height: 232px; }
.seletor__fenda path { fill: none; stroke: #050c12; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.seletor__manopla { position: absolute; left: var(--mx, 14px); top: var(--my, 22px); width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5d7489, #1d3446 55%, #0a1620); box-shadow: 0 0 0 2px var(--marca-2), 0 6px 14px rgb(0 0 0 / .55); transition: left .35s cubic-bezier(.3,.8,.3,1), top .35s cubic-bezier(.3,.8,.3,1); pointer-events: none; }
.seletor__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(4, 58px); }
.seletor__pos { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-content: center; height: 58px; padding: 0 10px; border-radius: 10px; color: #a9b6c3; transition: background-color .25s, color .25s; }
.seletor__letra { grid-row: 1 / 3; align-self: center; font: 800 1.7rem/1 var(--fonte-titulo); color: color-mix(in srgb, var(--luz) 55%, transparent); transition: color .25s, text-shadow .25s; }
.seletor__nome { font: 600 1.02rem/1.15 var(--fonte-titulo); color: #e8edf2; }
.seletor__linha { font-size: .8rem; line-height: 1.2; color: #93a3b3; }
.seletor__pos:hover, .seletor__pos:focus-visible, .seletor__pos.ativa { background: rgb(255 255 255 / .045); }
.seletor__pos:hover .seletor__letra, .seletor__pos:focus-visible .seletor__letra, .seletor__pos.ativa .seletor__letra { color: var(--luz); text-shadow: 0 0 14px color-mix(in srgb, var(--marca-2) 70%, transparent); }

.bordo { display: grid; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgb(255 255 255 / .07); text-decoration: none; }
.bordo__rotulo { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8798a9; }
.bordo__visor { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; background: radial-gradient(140% 120% at 50% 0%, #0f1e28, #060d12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05), inset 0 6px 18px rgb(0 0 0 / .6); font: 900 clamp(1.15rem, 1.9vw, 1.45rem)/1.15 "Doto", ui-monospace, monospace; letter-spacing: .06em; color: #e9d9c4; text-shadow: 0 0 8px rgb(233 217 196 / .35); }
.bordo__visor span + span { font-size: .78em; color: #bfae99; }
.bordo:hover .bordo__visor { color: #fff3e2; }

.wa-flutuante { background: var(--marca); box-shadow: 0 0 0 2px var(--marca-2), 0 14px 34px -10px rgb(0 0 0 / .45); }

/* Rótulo de posição do câmbio no topo de cada serviço */
.posicao { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; font: 600 .82rem/1 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.posicao__letra { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: var(--marca); color: var(--luz); font: 800 1rem/1 var(--fonte-titulo); letter-spacing: 0; }

/* Sobre: o dono e a fala dele */
.sobre { padding: clamp(64px, 8vw, 120px) 0; }
.sobre__grade { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.sobre__quadro { overflow: hidden; border-radius: 14px; aspect-ratio: 1468 / 819; background: #0e1d29; }
.sobre__quadro img { width: 100%; height: 112%; object-fit: cover; margin-top: -6%; }
.sobre__foto { margin: 0; }
.sobre figcaption a { display: inline-block; padding: 12px 0; }
.sobre figcaption { margin-top: 4px; font-size: .88rem; color: var(--suave); }
.sobre__fala { margin: 22px 0 18px; padding: 0; }
.sobre__fala p { font-size: clamp(1.08rem, 1.45vw, 1.28rem); line-height: 1.55; color: var(--tinta); }
.sobre__fala footer { margin-top: 12px; font-weight: 600; color: var(--suave); }
.sobre__ig, .sobre__rede { font-size: .95rem; color: var(--suave); margin-top: 12px; max-width: 58ch; }

/* Serviços com câmbio em H */
.servico { padding: clamp(64px, 8vw, 116px) 0; background: var(--cartao); border-top: 1px solid var(--linha); }
.servico--vender { background: var(--fundo); }
.servico__cabeca { max-width: 640px; margin-bottom: clamp(32px, 4vw, 52px); }
.servico__cabeca > p:not(.posicao) { margin-top: 14px; font-size: 1.08rem; color: var(--suave); }
.servico > .wrap > .botao, .servico__nota { margin-top: 30px; }
.servico__nota { max-width: 62ch; padding-left: 14px; border-left: 2px solid var(--marca-2); color: var(--suave); }
.servico__nota + .botao { margin-top: 22px; }

.h { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 120px auto; column-gap: clamp(20px, 3vw, 44px); }
.h__legenda { display: none; }
.h__etapas { display: contents; list-style: none; }
.h__etapa { position: relative; padding: 18px 0; transition: color .3s; color: var(--suave); }
.h__etapa[data-marcha="1"] { grid-area: 1 / 1; } .h__etapa[data-marcha="2"] { grid-area: 3 / 1; }
.h__etapa[data-marcha="3"] { grid-area: 1 / 2; } .h__etapa[data-marcha="4"] { grid-area: 3 / 2; }
.h__etapa[data-marcha="5"] { grid-area: 1 / 3; } .h__etapa[data-marcha="6"] { grid-area: 3 / 3; }
.h__etapa:nth-child(odd) { align-self: end; }
.h__etapa h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.15; margin: 6px 0 8px; color: inherit; }
.h__etapa p { font-size: .96rem; }
.h__obs { margin-top: 8px; font-size: .88rem !important; }
.h__num { display: inline-flex; align-items: center; gap: 8px; font: 700 .78rem/1 var(--fonte-texto); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--suave) 80%, transparent); }
.h__num::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.h__etapa.engatada, .sem-anim-h .h__etapa { color: var(--tinta); }
.h__etapa.engatada .h__num { color: var(--marca); }
.h__etapa.engatada .h__num::before { background: var(--marca-2); border-color: var(--marca); }
.h__trilho { grid-area: 2 / 1 / 3 / 4; position: relative; margin-inline: calc(-1 * clamp(10px, 1.5vw, 22px)); }
.h__trilho svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h__fenda { fill: none; stroke: var(--marca); stroke-width: 12; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .92; }
.h__ponto { position: absolute; left: var(--x); top: var(--y); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--marca); box-shadow: 0 0 0 3px var(--cartao); }
.servico--vender .h__ponto { box-shadow: 0 0 0 3px var(--fundo); }
.h__manopla { position: absolute; left: var(--kx, 16.667%); top: var(--ky, 0%); width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 28%, #607a90, #1d3548 52%, #08131c); box-shadow: 0 0 0 3px var(--marca-2), 0 10px 22px -6px rgb(0 0 0 / .55); z-index: 2; }
.h__manopla span { font: 800 .62rem/1 var(--fonte-titulo); letter-spacing: .08em; color: var(--luz); }

/* Vistoria: faixa de painel com luzes-espia */
.vistoria { background: var(--marca); color: #eef2f6; padding: clamp(64px, 8vw, 116px) 0; }
.vistoria__grade { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.vistoria .posicao { color: #b9c5d1; }
.vistoria .posicao__letra { background: var(--marca-2); color: #10202c; }
.vistoria__texto > p:not(.posicao) { margin-top: 16px; color: #c9d3de; max-width: 52ch; }
.vistoria__texto .botao { margin-top: 28px; }
.painel { padding: 24px; border-radius: 26px 26px 18px 18px; background: linear-gradient(180deg, #0c1b26, #07121a); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), inset 0 20px 40px rgb(0 0 0 / .45); }
.painel__titulo { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #8b9cad; margin-bottom: 14px; }
.luzes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px 10px; }
.luz { display: grid; justify-items: center; gap: 8px; text-align: center; }
.luz__icone { width: 54px; height: 54px; display: grid; place-items: center; color: color-mix(in srgb, var(--luz) 85%, transparent); transition: color .18s, filter .18s; }
.luz__icone svg { width: 38px; height: 38px; }
.luz__nome { font-size: .8rem; line-height: 1.25; color: #c7d0da; }
.luz.acesa .luz__icone { color: var(--ambar); filter: drop-shadow(0 0 6px rgb(242 161 39 / .85)) drop-shadow(0 0 16px rgb(242 161 39 / .45)); }

/* Funilaria */
.funilaria { padding: clamp(64px, 8vw, 116px) 0; background: var(--cartao); }
.oficina { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 32px); }
.oficina li { padding-top: 16px; border-top: 3px solid var(--marca); }
.oficina__etapa { font: 700 .78rem/1 var(--fonte-texto); letter-spacing: .1em; text-transform: uppercase; color: var(--suave); }
.oficina h3 { font-size: 1.3rem; margin: 8px 0; }
.oficina p { font-size: .96rem; color: var(--suave); }
.funilaria__pe { display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; justify-content: space-between; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linha); }
.funilaria__ig { max-width: 60ch; color: var(--suave); }

/* Cases: fotos VENDIDO! e fichas no jeito das legendas */
.cases { padding: clamp(64px, 8vw, 116px) 0; }
.cases__grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cases__grade a { display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 1; background: #dfe4ea; }
.cases__grade img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.cases__grade a:hover img { transform: scale(1.03); }
.fichas__titulo { margin: clamp(48px, 6vw, 72px) 0 20px; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.fichas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
.ficha { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--tinta); }
.ficha__topo { display: flex; justify-content: space-between; gap: 10px; font: 700 .82rem/1 var(--fonte-texto); letter-spacing: .04em; color: var(--marca); }
.ficha__topo time { font-weight: 500; color: var(--suave); }
.ficha__checks, .ficha__itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .95rem; }
.ficha__checks li::before { content: "✔"; margin-right: 8px; color: #6d5a46; font-weight: 700; }
.ficha__itens li::before { content: "-"; margin-right: 6px; color: var(--suave); }
.ficha__barra { display: block; height: 9px; background: repeating-linear-gradient(90deg, var(--marca) 0 13px, transparent 13px 16px); -webkit-mask: linear-gradient(#000, #000) bottom / 100% 70% no-repeat; mask: linear-gradient(#000, #000) bottom / 100% 70% no-repeat; opacity: .85; }
.ficha h4 { font-size: 1.25rem; line-height: 1.15; }
.ficha__extra { font-size: .95rem; color: var(--suave); }
.ficha__dados { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; font-size: .92rem; }
.ficha__dados div { display: flex; gap: 6px; }
.ficha__dados dt { color: var(--suave); }
.ficha__dados dt::after { content: ":"; }
.ficha__dados dd { margin: 0; font-weight: 600; }
.ficha__link { margin-top: auto; align-self: flex-start; padding: 6px 0; font-weight: 600; color: var(--marca); text-decoration: underline; }

/* Depoimentos: texto e nome, sem estrela nem foto */
.depoimentos { padding: clamp(64px, 8vw, 116px) 0; background: var(--cartao); border-top: 1px solid var(--linha); }
.depo { list-style: none; margin: 0; padding: 0; columns: 3 300px; column-gap: 40px; }
.depo li { break-inside: avoid; padding: 18px 0 22px; border-top: 1px solid var(--linha); }
.depo p { font-size: 1rem; }
.depo__nome { margin-top: 10px; font-weight: 700; color: var(--marca); }

/* Contato */
.contato { background: var(--marca); color: #eef2f6; padding: clamp(64px, 8vw, 116px) 0; }
.contato__grade { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.contato__texto > p { margin-top: 16px; color: #c9d3de; max-width: 48ch; }
.contato__areas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.contato__miudo { font-size: .88rem; }
.contato__miudo a { text-decoration: underline; }
.contato__dados { margin: 0; display: grid; gap: 22px; align-content: start; }
.contato__dados div { padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .14); }
.contato__dados dt { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--luz); margin-bottom: 6px; }
.contato__dados dd { margin: 0; color: #e3e9ef; line-height: 1.7; }
.contato__dados a { display: inline-block; padding: 4px 0; }

.rodape { background: #0d1b26; color: #aebbc8; padding: 36px 0 40px; }
.rodape__grade { display: grid; gap: 10px; justify-items: start; }
.rodape img { height: 30px; width: auto; }
.rodape__miudo { font-size: .85rem; opacity: .8; }

/* Até 1100: hero e vistoria mais estreitos */
@media (max-width: 1100px) {
  .luzes { grid-template-columns: repeat(5, 1fr); }
  .luz__nome { font-size: .76rem; }
}

/* Até 900: câmbio em H vira lista com o H pequeno parado no topo; console abaixo do texto */
@media (max-width: 899px) {
  .topo__nav { position: fixed; inset: 0; z-index: 55; display: none; flex-direction: column; justify-content: center; gap: 4px; padding: 80px 24px 24px; background: var(--marca); font-size: 1.3rem; }
  html.menu-aberto .topo__nav { display: flex; }
  .topo__nav a { padding: 10px 0; }
  .topo__cta { margin-left: auto; }
  .topo__menu { position: relative; z-index: 56; display: grid; place-items: center; gap: 6px; width: 46px; height: 46px; border: 0; border-radius: 8px; background: rgb(255 255 255 / .06); cursor: pointer; align-content: center; }
  .topo__menu span { display: block; width: 20px; height: 2px; background: #eef2f6; transition: transform .3s; }
  html.menu-aberto .topo__menu span:first-child { transform: translateY(4px) rotate(45deg); }
  html.menu-aberto .topo__menu span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .cabine__grade, .sobre__grade, .vistoria__grade, .contato__grade { grid-template-columns: 1fr; }
  .h { display: block; }
  .h__legenda { display: block; width: 132px; height: 84px; margin: 0 0 16px; }
  .h__legenda path { fill: none; stroke: var(--marca); stroke-width: 5; stroke-linecap: round; }
  .h__legenda text { font: 700 12px var(--fonte-texto); fill: var(--marca); text-anchor: middle; dominant-baseline: middle; }
  .h__etapas { display: grid; gap: 0; padding: 0; margin: 0; }
  .h__etapa { grid-area: auto !important; padding: 16px 0 18px; border-top: 1px solid var(--linha); color: var(--tinta); }
  .h__etapa[data-marcha="1"] { order: 1; } .h__etapa[data-marcha="2"] { order: 2; } .h__etapa[data-marcha="3"] { order: 3; }
  .h__etapa[data-marcha="4"] { order: 4; } .h__etapa[data-marcha="5"] { order: 5; } .h__etapa[data-marcha="6"] { order: 6; }
  .h__trilho { display: none; }
  .oficina { grid-template-columns: 1fr 1fr; }
  .fichas { grid-template-columns: 1fr 1fr; }
  .cases__grade { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .topo__linha { min-height: 60px; gap: 10px; }
  .topo__marca img { height: 26px; }
  .topo__cta span { display: none; }
  .topo__cta { width: 46px; height: 46px; padding: 0; min-height: 46px; }
  .cabine { padding: 36px 0 44px; }
  .cabine h1 { font-size: clamp(2.05rem, 9.4vw, 2.6rem); }
  .cabine__lead { margin: 16px 0 22px; }
  .cabine .botao { width: 100%; }
  .console { padding: 20px 16px 16px; border-radius: 18px; }
  .seletor { gap: 6px; }
  .seletor__pos { padding: 0 6px; column-gap: 10px; grid-template-columns: 28px 1fr; }
  .seletor__letra { font-size: 1.45rem; }
  .sobre__fala p { font-size: 1.05rem; }
  .luzes { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .luz { grid-template-columns: 44px 1fr; justify-items: start; align-items: center; text-align: left; }
  .luz__icone { width: 44px; height: 44px; }
  .luz__icone svg { width: 32px; height: 32px; }
  .painel { padding: 18px 14px; }
  .oficina, .fichas { grid-template-columns: 1fr; }
  .cases__grade { grid-template-columns: 1fr 1fr; gap: 8px; }
  .funilaria__pe .botao, .servico .botao, .vistoria .botao { width: 100%; }
  .contato__areas .botao { width: 100%; }
  .depo { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .seletor__manopla { transition: none; }
}