/* Mancal Auto Center · exemplo de estilo da Studios Prumo
   Ideia: oficina com cara de laboratório. Desenho técnico em linha sobre asfalto, verde-sinal de
   diagnóstico aprovado e vermelho só para desgaste. O painel dá partida na abertura, o carro se
   separa em peças com a rolagem e o hodômetro roda até a quilometragem digitada. */

@font-face { font-family: "Encode Sans"; src: url("fontes/encode-sans.woff2") format("woff2"); font-weight: 100 900; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url("fontes/martian-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --faixa: 32px;
  --asfalto: #0F1215;
  --chassi: #161A1F;
  --aco: #232A31;
  --linha: rgba(232, 236, 239, 0.12);
  --linha-forte: rgba(232, 236, 239, 0.3);
  --chapa: #E8ECEF;
  --chapa-2: #A3ADB7;
  --sinal: #C8F031;
  --sinal-escuro: #A6CC14;
  --desgaste: #FF5A3D;
  --papel: #EEF1F3;
  --tinta: #0F1215;
  --tinta-2: #48515A;
  --titulo: "Encode Sans", "Arial Narrow", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --margem: clamp(16px, 4vw, 56px);
  --largura: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--faixa) + 72px); -webkit-text-size-adjust: 100%; }
body { margin: 0; padding-top: var(--faixa); background: var(--asfalto); color: var(--chapa); font: 400 1.0625rem/1.6 var(--titulo); overflow-x: clip; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure, address, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; max-width: 100%; }
address { font-style: normal; }
:focus-visible { outline: 3px solid var(--sinal); outline-offset: 3px; border-radius: 4px; }
.claro :focus-visible, .revisao :focus-visible, .agendar :focus-visible, .chamada :focus-visible { outline-color: var(--tinta); }

/* Faixa da Studios Prumo (igual em todos os exemplos) */
.faixa-prumo { position: fixed; inset: 0 0 auto 0; z-index: 100; display: flex; align-items: center; justify-content: center; min-height: var(--faixa); padding: 4px 16px; background: #0E0E10; color: #F2F0EB; font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: 0.01em; text-align: center; text-decoration: none; }
.faixa-prumo:hover { text-decoration: underline; text-underline-offset: 3px; }
.faixa-prumo:focus-visible { outline: 2px solid #6875FF; outline-offset: -4px; border-radius: 0; }
@media (max-width: 480px) { :root { --faixa: 40px; } .faixa-prumo { font-size: 11px; } }

/* Tipografia */
h1, h2, h3 { font-family: var(--titulo); font-stretch: 75%; font-weight: 760; text-transform: uppercase; letter-spacing: -0.005em; line-height: 0.92; }
h1 { font-size: clamp(3.1rem, 9.4vw, 8rem); }
h2 { font-size: clamp(2.3rem, 5.6vw, 4.6rem); max-width: 16ch; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1; }
.rotulo { font: 500 0.72rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.14em; color: var(--sinal); }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--chapa-2); max-width: 40ch; }

/* Botões */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 2px solid transparent; border-radius: 4px; font: 700 0.95rem/1 var(--titulo); font-stretch: 85%; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; cursor: pointer; transition: transform 200ms var(--curva), background-color 200ms; }
.botao:active { transform: translateY(1px); }
.botao-sinal { background: var(--sinal); color: var(--tinta); }
.botao-sinal:hover { background: #D7FA55; }
.botao-linha { border-color: var(--linha-forte); color: var(--chapa); }
.botao-linha:hover { border-color: var(--chapa); }
.botao-escuro { background: var(--tinta); color: var(--papel); }
.botao-escuro:hover { background: #262C33; }

/* Topo */
.topo { position: sticky; top: var(--faixa); z-index: 50; display: flex; align-items: center; gap: 24px; padding: 12px var(--margem); background: rgba(15, 18, 21, 0.94); border-bottom: 1px solid var(--linha); }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca-simbolo { width: 36px; height: 36px; flex: none; }
.m-anel { fill: none; stroke: var(--sinal); stroke-width: 3.2; }
.m-cubo { fill: var(--sinal); }
.m-esferas circle { fill: var(--chapa); }
.marca-nome { font: 800 1.6rem/1 var(--titulo); font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.02em; }
.marca-sub { font: 500 0.62rem/1.1 var(--mono); text-transform: uppercase; letter-spacing: 0.16em; color: var(--chapa-2); max-width: 6ch; }
.menu { display: none; margin-left: auto; gap: 28px; }
.menu a { font: 600 0.92rem/1 var(--titulo); font-stretch: 85%; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; color: var(--chapa-2); }
.menu a:hover { color: var(--chapa); }
.topo > .botao { margin-left: auto; min-height: 42px; padding: 0 18px; }
@media (min-width: 960px) { .menu { display: flex; } .topo > .botao { margin-left: 0; } }

/* Seções */
section { position: relative; padding: clamp(72px, 10vw, 136px) var(--margem); }
.cabeca { max-width: var(--largura); margin: 0 auto clamp(36px, 5vw, 64px); display: grid; gap: 16px; }
.cabeca > p:not(.rotulo) { color: var(--chapa-2); max-width: 52ch; font-size: 1.1rem; }

/* 1. Abertura */
.abertura { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; max-width: calc(var(--largura) + 2 * var(--margem)); margin: 0 auto; padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(56px, 8vw, 112px); }
.abertura-texto { display: grid; gap: 24px; }
.abertura h1 .linha { display: block; overflow: clip; padding-bottom: 0.04em; }
.abertura h1 .linha > span { display: inline-block; }
.abertura h1 .linha:last-child > span { color: var(--sinal); }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; }
.painel-carro { position: relative; }
.velocimetro { width: 100%; height: auto; overflow: visible; }
.v-arco { fill: none; stroke: var(--linha-forte); stroke-width: 3; }
.v-marca-grande line { stroke: var(--chapa); stroke-width: 4; }
.v-marca-pequena line { stroke: var(--chapa-2); stroke-width: 2; }
.v-numeros text { fill: var(--chapa-2); font: 500 21px var(--mono); text-anchor: middle; }
.v-faixa-vermelha { fill: none; stroke: var(--desgaste); stroke-width: 8; }
.v-km { fill: var(--chapa-2); font: 500 16px var(--mono); text-anchor: middle; letter-spacing: 0.12em; }
.ponteiro { transform-box: fill-box; transform-origin: 50% 92.6%; transform: rotate(-112deg); }
.ponteiro path { fill: var(--sinal); }
.ponteiro circle { fill: var(--chassi); stroke: var(--sinal); stroke-width: 3; }
.ponteiro .ponteiro-centro { fill: var(--sinal); stroke: none; }
.v-ok { fill: var(--sinal); font: 600 17px var(--mono); text-anchor: middle; letter-spacing: 0.16em; text-transform: uppercase; }
.luz path, .luz rect, .luz circle { fill: none; stroke: var(--chapa-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.luz text { fill: var(--chapa-2); font: 700 8px var(--mono); text-anchor: middle; }
.luz { opacity: 0.3; }
@media (min-width: 960px) { .abertura { grid-template-columns: 1.05fr 1fr; } }

/* Entrada orquestrada (CSS puro; com "reduzir movimento", nada disso roda) */
.entra { animation: entrar 900ms var(--curva) both; animation-delay: calc(var(--i) * 90ms + 60ms); }
.abertura h1 .entra { animation-name: subir; animation-duration: 760ms; }
@keyframes entrar { from { opacity: 0; transform: translateY(26px); } }
@keyframes subir { from { transform: translateY(102%); } }
.ponteiro { animation: partida 2400ms cubic-bezier(0.5, 0, 0.3, 1) 350ms both; }
@keyframes partida {
  0% { transform: rotate(-120deg); }
  42% { transform: rotate(118deg); }
  78% { transform: rotate(-118deg); }
  100% { transform: rotate(-112deg); }
}
.luz { animation: acender 2200ms linear both; animation-delay: calc(var(--i) * 70ms + 250ms); }
.luz-motor, .luz-oleo, .luz-pneu { --acesa: #FFB02E; }
.luz-bateria, .luz-freio, .luz-abs { --acesa: var(--desgaste); }
@keyframes acender {
  0% { opacity: 0.12; }
  6%, 70% { opacity: 1; }
  100% { opacity: 0.3; }
}
.luz path, .luz rect, .luz circle { animation: cor-luz 2200ms step-end both; animation-delay: inherit; }
.luz text { animation: cor-luz-texto 2200ms step-end both; animation-delay: inherit; }
@keyframes cor-luz { 0% { stroke: var(--acesa); } 74% { stroke: var(--chapa-2); } }
@keyframes cor-luz-texto { 0% { fill: var(--acesa); } 74% { fill: var(--chapa-2); } }
.v-ok { animation: entrar 700ms var(--curva) 2500ms both; }
.v-brilho { animation: brilhar 2600ms ease-out 300ms both; }
@keyframes brilhar { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0.55; } }

/* Revelação ligada à rolagem (data-revelar) */
.js [data-revelar] { opacity: 0; transform: translateY(34px); transition: opacity 800ms var(--curva), transform 900ms var(--curva); transition-delay: calc(var(--i, 0) * 80ms); }
.js [data-revelar].visto { opacity: 1; transform: none; }

/* 2. Serviços */
.servicos { background: linear-gradient(var(--asfalto), var(--chassi)); }
.cartoes { max-width: var(--largura); margin: 0 auto; display: grid; gap: 1px; background: var(--linha); border: 1px solid var(--linha); }
.cartao { display: grid; align-content: start; gap: 14px; padding: clamp(24px, 3vw, 36px); background: var(--asfalto); }
.cartao-codigo { font: 500 0.75rem var(--mono); color: var(--sinal); letter-spacing: 0.1em; }
.cartao p { color: var(--chapa-2); }
.cartao .preco { margin-top: auto; padding-top: 14px; border-top: 1px dashed var(--linha-forte); color: var(--chapa); font-size: 0.95rem; }
.preco strong { font-size: 1.35rem; font-stretch: 80%; }
.preco span { display: block; font: 500 0.66rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--chapa-2); }
@media (min-width: 640px) { .cartoes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .cartoes { grid-template-columns: repeat(3, 1fr); } }

/* 3. Vista explodida */
.por-dentro { background: var(--chassi); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); }
.explodida { max-width: var(--largura); margin: 0 auto; display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
.explodida-palco { position: relative; border: 1px solid var(--linha); border-radius: 6px; background: var(--asfalto); padding: clamp(8px, 2vw, 24px); }
.carro { width: 100%; height: auto; color: var(--chapa); }
.carro .grade { color: rgba(232, 236, 239, 0.05); }
.carro .chao { stroke: var(--linha-forte); stroke-width: 1.5; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; }
.peca { --e2: var(--e, 0); transform: translate(calc(var(--dx) * var(--e2) * 1px), calc(var(--dy) * var(--e2) * 1px)); cursor: pointer; transition: opacity 260ms var(--curva); }
.peca :is(path, rect, circle):not(.alvo) { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.peca .detalhe, .peca .detalhe * { stroke-opacity: 0.55; }
.peca .casca { fill: rgba(232, 236, 239, 0.035); }
.peca .pinca { fill: rgba(255, 90, 61, 0.18); }
.peca .alvo { fill: transparent; stroke: none; pointer-events: all; }
.carro.tem-ativa .peca { opacity: 0.5; }
.carro .peca.ativa, .carro .peca:hover { opacity: 1; }
.carro .peca.ativa { color: var(--sinal); }
.rotulos text { fill: var(--chapa-2); font: 500 15px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; opacity: calc(var(--e, 0) * 2.4 - 1.2); }
@media (max-width: 720px) { .rotulos { display: none; } }
.explodida-lado { display: grid; gap: 20px; }
.pecas { display: flex; flex-wrap: wrap; gap: 8px; }
.pecas button { min-height: 40px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: 999px; background: transparent; color: var(--chapa); font: 500 0.72rem/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color 200ms, color 200ms, border-color 200ms; }
.pecas button:hover { border-color: var(--chapa); }
.pecas button[aria-pressed="true"] { background: var(--sinal); border-color: var(--sinal); color: var(--tinta); }
.ficha { display: grid; gap: 12px; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--linha-forte); border-radius: 6px; background: var(--asfalto); transition: opacity 180ms var(--curva), transform 220ms var(--curva); }
.ficha.trocando { opacity: 0; transform: translateY(8px); }
.ficha-codigo { font: 500 0.7rem var(--mono); color: var(--chapa-2); letter-spacing: 0.12em; text-transform: uppercase; }
.ficha-nome { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--sinal); }
.ficha-servico { color: var(--chapa); }
.ficha-subtitulo { margin-top: 6px; font: 500 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--chapa-2); }
.ficha-sinais { display: grid; gap: 8px; }
.ficha-sinais li { position: relative; padding-left: 22px; }
.ficha-sinais li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; border-radius: 50%; background: var(--desgaste); box-shadow: 0 0 0 4px rgba(255, 90, 61, 0.18); }
.ficha-preco { color: var(--chapa-2); font-size: 0.95rem; }
.ficha-agendar { justify-self: start; margin-top: 4px; }
@media (min-width: 1000px) { .explodida { grid-template-columns: 1.7fr 1fr; } }

/* 4. Revisão por quilometragem */
.revisao { background: var(--papel); color: var(--tinta); }
.revisao .rotulo { color: #4F6A00; }
.revisao .cabeca > p:not(.rotulo) { color: var(--tinta-2); }
.revisao-grade { max-width: var(--largura); margin: 0 auto; display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
.revisao .cabeca { margin: 0; }
.revisao-grade > *, .agendar-grade > *, .cabeca > *, .km > * { min-width: 0; }
.km { display: grid; gap: 10px; margin-top: 12px; }
.km label { font: 500 0.72rem var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--tinta-2); }
.km-linha { display: flex; gap: 10px; flex-wrap: wrap; }
.km input { flex: 1 1 200px; min-width: 0; min-height: 56px; padding: 0 16px; border: 2px solid var(--tinta); border-radius: 4px; background: #fff; color: var(--tinta); font: 500 1.5rem var(--mono); }
.km input[aria-invalid="true"] { border-color: #C2361F; }
.km .botao { min-height: 56px; }
.km-ajuda { font-size: 0.9rem; color: var(--tinta-2); }
.hodometro-bloco { display: grid; gap: 20px; }
.hodometro { display: flex; align-items: center; gap: 4px; justify-self: start; padding: 14px 16px; border-radius: 8px; background: var(--tinta); box-shadow: inset 0 0 0 2px #2B323A; }
.rolo { display: block; width: 1.05em; height: 1.3em; overflow: hidden; border-radius: 3px; background: linear-gradient(#000 0%, #1C2127 22%, #1C2127 78%, #000 100%); color: var(--papel); font: 500 clamp(2rem, 6vw, 3rem)/1.3 var(--mono); text-align: center; }
.rolo > span { display: block; width: 1ch; margin: 0 auto; word-break: break-all; line-height: 1.3em; transform: translateY(calc(var(--d, 0) * -1.3em)); transition: transform 1300ms cubic-bezier(0.3, 0.9, 0.2, 1); transition-delay: calc(var(--c, 0) * 90ms); }
.rolo:last-of-type { background: linear-gradient(#5F7A00 0%, var(--sinal) 30%, var(--sinal) 70%, #5F7A00 100%); color: var(--tinta); }
.hodometro-km { margin-left: 8px; font: 500 0.8rem var(--mono); color: var(--chapa-2); text-transform: uppercase; }
.checklist { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgba(15, 18, 21, 0.08), 0 18px 40px rgba(15, 18, 21, 0.08); }
.checklist-titulo { font: 760 clamp(1.5rem, 3vw, 2rem)/1 var(--titulo); font-stretch: 75%; text-transform: uppercase; }
.checklist-itens { display: grid; gap: 10px; }
.checklist-itens li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid rgba(15, 18, 21, 0.1); }
.js .checklist-itens li { animation: entrar 600ms var(--curva) both; animation-delay: calc(var(--i) * 60ms); }
.tag { display: inline-block; min-width: 80px; padding: 3px 8px; border-radius: 3px; font: 600 0.62rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
.tag-trocar { background: var(--tinta); color: var(--sinal); }
.tag-verificar { border: 1px solid var(--tinta); color: var(--tinta); }
.checklist-nota { font-size: 0.9rem; color: var(--tinta-2); }
@media (min-width: 960px) { .revisao-grade { grid-template-columns: 1fr 1.1fr; } }

/* 5. Diferenciais */
.dif-lista { max-width: var(--largura); margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 48px); }
.dif-lista li { display: grid; gap: 14px; align-content: start; }
.dif-lista p { color: var(--chapa-2); }
.dif-icone { width: 64px; height: 64px; }
.dif-icone :is(path, rect, circle) { fill: none; stroke: var(--sinal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dif-gira { transform: rotate(calc((var(--p, 0.5) - 0.5) * 140deg)); }
.dif-flutua { transform: translateY(calc((0.5 - var(--p, 0.5)) * 36px)); }
@media (min-width: 640px) { .dif-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dif-lista { grid-template-columns: repeat(4, 1fr); } }

/* 6. Como funciona */
.como { background: var(--chassi); }
.etapas { --f: clamp(0, (var(--p, 1) - 0.18) * 2.4, 1); position: relative; max-width: var(--largura); margin: 0 auto; display: grid; gap: 36px; padding-left: 40px; }
.etapas::before, .etapas::after { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 2px; background: var(--linha-forte); transform-origin: top; }
.etapas::after { background: var(--sinal); transform: scaleY(var(--f)); }
.etapa { position: relative; display: grid; gap: 10px; }
.etapa p { color: var(--chapa-2); max-width: 36ch; }
.etapa-num { position: absolute; left: -40px; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--chassi); border: 2px solid var(--linha-forte); font: 600 0.8rem var(--mono); color: var(--chapa); }
.etapa-num::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--sinal); box-shadow: 0 0 0 4px rgba(200, 240, 49, 0.16); opacity: clamp(0, (var(--f) - var(--k) * 0.28) * 10, 1); transform: scale(clamp(0.6, (var(--f) - var(--k) * 0.28) * 10 + 0.6, 1)); }
.etapa:nth-child(1) { --k: 0; } .etapa:nth-child(2) { --k: 1; } .etapa:nth-child(3) { --k: 2; } .etapa:nth-child(4) { --k: 3; }
.etapa-num { isolation: isolate; }
.etapa-num::after { z-index: -1; }
@media (min-width: 960px) {
  .etapas { grid-template-columns: repeat(4, 1fr); gap: 32px; padding-left: 0; padding-top: 56px; }
  .etapas::before, .etapas::after { left: 0; right: 0; top: 13px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .etapas::after { transform: scaleX(var(--f)); }
  .etapa-num { left: 0; top: -56px; }
}

/* 7. Agendamento */
.agendar { background: var(--papel); color: var(--tinta); }
.agendar .rotulo { color: #4F6A00; }
.agendar .cabeca > p:not(.rotulo) { color: var(--tinta-2); }
.agendar-grade { max-width: var(--largura); margin: 0 auto; display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
.agendar .cabeca { margin: 0; }
.form-agendar { display: grid; gap: 16px; padding: clamp(20px, 3vw, 36px); border-radius: 8px; background: #fff; box-shadow: 0 1px 0 rgba(15, 18, 21, 0.08), 0 22px 48px rgba(15, 18, 21, 0.1); }
.campo { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.campo label, .campo legend { font: 500 0.7rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--tinta-2); }
.campo input, .campo select { width: 100%; min-height: 48px; padding: 0 12px; border: 1.5px solid rgba(15, 18, 21, 0.35); border-radius: 4px; background: #fff; color: var(--tinta); font: 400 1rem var(--titulo); }
.campo input:focus, .campo select:focus { outline: 2px solid var(--tinta); outline-offset: 0; border-color: var(--tinta); }
.periodo { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.periodo legend { width: 100%; margin-bottom: 6px; }
.periodo label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 400 1rem var(--titulo); text-transform: none; letter-spacing: 0; color: var(--tinta); }
.periodo input { width: 20px; height: 20px; min-height: 0; accent-color: var(--tinta); }
.confirmacao { padding: 14px 16px; border-radius: 4px; background: var(--tinta); color: var(--sinal); font: 500 0.85rem/1.5 var(--mono); }
@media (min-width: 720px) { .form-agendar { grid-template-columns: 1fr 1fr; } .campo-largo { grid-column: 1 / -1; } }
@media (min-width: 1040px) { .agendar-grade { grid-template-columns: 0.8fr 1.2fr; } }

/* 8. Unidades */
.lista-unidades { max-width: var(--largura); margin: 0 auto; display: grid; gap: 16px; }
.lista-unidades li { display: grid; gap: 12px; padding: clamp(22px, 3vw, 32px); border: 1px solid var(--linha); border-top: 3px solid var(--sinal); border-radius: 4px; background: var(--chassi); }
.lista-unidades address { color: var(--chapa-2); }
.horario { font: 500 0.78rem/1.6 var(--mono); color: var(--chapa); }
.tel span { font: 500 0.66rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--chapa-2); }
@media (min-width: 900px) { .lista-unidades { grid-template-columns: repeat(3, 1fr); } }

/* 9. Perguntas */
.perguntas { background: var(--chassi); }
.faq { max-width: var(--largura); margin: 0 auto; border-top: 1px solid var(--linha-forte); }
.faq details { border-bottom: 1px solid var(--linha-forte); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0; font: 700 1.15rem/1.25 var(--titulo); font-stretch: 85%; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--sinal), var(--sinal)) center / 100% 2px no-repeat, linear-gradient(var(--sinal), var(--sinal)) center / 2px 100% no-repeat; transition: transform 300ms var(--curva); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 20px; color: var(--chapa-2); max-width: 64ch; }

/* 10. Chamada */
.chamada { display: grid; justify-items: center; gap: 18px; text-align: center; background: var(--sinal); color: var(--tinta); overflow: clip; }
.chamada h2 { max-width: 18ch; }
.chamada p { max-width: 46ch; font-size: 1.1rem; }
.chamada .botao-sinal { background: var(--tinta); color: var(--sinal); }
.chamada .botao-sinal:hover { background: #262C33; }
.chamada-numero { font: 500 0.75rem var(--mono); text-transform: uppercase; letter-spacing: 0.1em; }
.chamada-rolamento { position: absolute; right: -6vw; top: 50%; width: clamp(220px, 34vw, 460px); height: auto; opacity: 0.16; transform: translateY(-50%) rotate(calc(var(--p, 0) * 300deg)); pointer-events: none; }
.chamada-rolamento .m-anel { stroke: var(--tinta); }
.chamada-rolamento .m-cubo, .chamada-rolamento .m-esferas circle { fill: var(--tinta); }
.chamada > :not(.chamada-rolamento) { position: relative; }

/* Rodapé */
.rodape { padding: clamp(56px, 7vw, 88px) var(--margem) 28px; background: #0A0C0F; color: var(--chapa-2); }
.rodape-colunas { max-width: var(--largura); margin: 0 auto; display: grid; gap: 32px; }
.rodape h3 { margin-bottom: 14px; font-size: 1rem; color: var(--chapa); }
.rodape ul { display: grid; gap: 8px; }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--chapa); }
.rodape-marca { display: grid; gap: 14px; align-content: start; }
.rodape-marca .marca { color: var(--chapa); }
.rodape-legal { max-width: var(--largura); margin: 48px auto 0; padding-top: 20px; border-top: 1px solid var(--linha); display: grid; gap: 6px; font: 400 0.68rem/1.6 var(--mono); letter-spacing: 0.02em; }
@media (min-width: 760px) { .rodape-colunas { grid-template-columns: 1.6fr repeat(3, 1fr); } }

/* Reduzir movimento: tudo pronto, nada se mexe */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .entra, .ponteiro, .luz, .luz *, .v-ok, .v-brilho, .checklist-itens li { animation: none !important; }
  .js [data-revelar] { opacity: 1; transform: none; transition: none; }
  .rolo > span, .ficha, .peca, .botao { transition: none; }
  .dif-gira, .dif-flutua, .chamada-rolamento { transform: none; }
  .chamada-rolamento { transform: translateY(-50%); }
}