/* Auto Mecânica Coco — prévia Vorkeza Digital (Site Express)
   Cores tiradas da logo do cliente (ciano -> azul). */
@font-face { font-family: 'Manrope'; src: url('assets/fontes/manrope.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('assets/fontes/dm-sans.woff2') format('woff2'); font-weight: 100 1000; font-display: swap; }

:root {
  --noite: #0C1117;
  --noite-2: #141B24;
  --linha-escura: rgba(255, 255, 255, .09);
  --papel: #F2F6F9;
  --branco: #fff;
  --tinta: #0F1A26;
  --tinta-2: #4A5866;
  --linha: #DCE4EB;
  --ac: #1A6FD6;          /* azul da logo, botões */
  --ac-forte: #1457AB;
  --ciano: #5ADBE8;       /* ciano da logo, destaques no escuro */
  --zap: #1FAF5A;
  --raio: 20px;
  --sombra: 0 24px 60px -28px rgba(10, 30, 60, .35);
  --m-luz: rgba(90, 219, 232, .55);
  --m-luz-fundo: rgba(90, 219, 232, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 17px/1.6 'DM Sans', system-ui, sans-serif; color: var(--tinta); background: var(--branco); overflow-x: hidden; }
h1, h2, h3 { font-family: 'Manrope', system-ui, sans-serif; letter-spacing: -.03em; line-height: 1.08; margin: 0; }
p { margin: 0; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }
.caixa { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* faixa de prévia */
.faixa-previa { background: #FFF4D6; color: #5B4300; font-size: 13.5px; line-height: 1.45; text-align: center; padding: 8px 16px; }
.faixa-previa a { font-weight: 700; }

/* topo */
.topo { position: sticky; top: 0; z-index: 50; background: rgba(12, 17, 23, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--linha-escura); color: #fff; }
.topo-in { display: flex; align-items: center; gap: 28px; height: 70px; }
.marca { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.marca-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ciano), var(--ac)); }
.marca-ico svg { width: 22px; height: 22px; fill: #fff; }
.marca-txt { display: flex; flex-direction: column; line-height: 1; }
.marca-txt b { font: italic 800 16px 'Manrope', sans-serif; letter-spacing: .02em; text-transform: uppercase; }
.marca-txt i { font: 800 12px 'Manrope', sans-serif; font-style: normal; letter-spacing: .32em; text-transform: uppercase; color: var(--ciano); margin-top: 4px; }
.menu { display: flex; gap: 26px; margin-left: auto; }
.menu a { text-decoration: none; font-size: 15px; color: rgba(255, 255, 255, .78); transition: color .2s; }
.menu a:hover { color: #fff; }

/* botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font: 700 15px/1 'DM Sans', sans-serif; text-decoration: none; padding: 14px 22px; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, border-color .2s, transform .15s, box-shadow .2s; }
.btn:active { transform: translateY(1px); }
.btn-grande { padding: 18px 26px; font-size: 16px; }
.btn-pq { padding: 11px 18px; font-size: 14px; }
.btn-zap { background: var(--ac); color: #fff; box-shadow: 0 14px 30px -14px rgba(26, 111, 214, .8); }
.btn-zap:hover { background: var(--ac-forte); }
.btn-linha { color: #fff; border-color: rgba(255, 255, 255, .28); }
.btn-linha:hover { border-color: #fff; }
.btn-escuro { background: var(--tinta); color: #fff; width: 100%; }
.btn-escuro:hover { background: #000; }
.m-seta svg { width: 18px; height: 18px; }

/* hero */
.hero { position: relative; background: radial-gradient(900px 500px at 85% 10%, rgba(26, 111, 214, .35), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(90, 219, 232, .16), transparent 60%), var(--noite); color: #fff; padding: 84px 0 96px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 60% 30%, #000 20%, transparent 75%); pointer-events: none; }
.hero-faixa { position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, var(--ciano), var(--ac)); }
.hero-grade { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.selo { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ciano); border: 1px solid rgba(90, 219, 232, .3); padding: 7px 14px; border-radius: 999px; margin-bottom: 26px; }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ciano); box-shadow: 0 0 0 0 rgba(90, 219, 232, .6); animation: pulsa 2s infinite; }
@keyframes pulsa { 70% { box-shadow: 0 0 0 10px rgba(90, 219, 232, 0); } 100% { box-shadow: 0 0 0 0 rgba(90, 219, 232, 0); } }
.hero h1 { font-size: clamp(40px, 5.8vw, 72px); font-weight: 800; }
.hero h1 em { font-style: normal; background: linear-gradient(90deg, var(--ciano), #7FB8FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-sub { font-size: 19px; color: rgba(255, 255, 255, .74); max-width: 560px; margin-top: 22px; }
.hero-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.hero-chips { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips li { font-size: 14px; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .06); border: 1px solid var(--linha-escura); padding: 7px 13px; border-radius: 999px; }

/* painel do hero */
.painel { background: linear-gradient(180deg, var(--noite-2), #0F151D); border: 1px solid var(--linha-escura); border-radius: 26px; padding: 22px; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .8); }
.painel-topo { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.status { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; }
.status i { width: 10px; height: 10px; border-radius: 50%; background: #8A97A6; }
.status.aberto i { background: #2BD07B; box-shadow: 0 0 0 4px rgba(43, 208, 123, .18); }
.status.fechado i { background: #F06262; box-shadow: 0 0 0 4px rgba(240, 98, 98, .18); }
.painel-dia { font-size: 13px; color: rgba(255, 255, 255, .55); }
.painel-logo { border-radius: 16px; width: 100%; box-shadow: 0 18px 40px -20px rgba(26, 111, 214, .7); }
.painel-horas { list-style: none; padding: 0; margin: 18px 0 0; }
.painel-horas li { display: flex; justify-content: space-between; padding: 12px 4px; border-bottom: 1px solid var(--linha-escura); font-size: 15px; color: rgba(255, 255, 255, .7); }
.painel-horas li b { color: #fff; font-weight: 600; }
.painel-horas li.hoje { color: #fff; }
.painel-horas li.hoje span::after { content: "hoje"; margin-left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--noite); background: var(--ciano); padding: 2px 7px; border-radius: 999px; }
.painel-zap { margin-top: 16px; display: flex; align-items: center; gap: 14px; text-decoration: none; background: rgba(31, 175, 90, .12); border: 1px solid rgba(31, 175, 90, .35); padding: 14px 16px; border-radius: 16px; transition: background .2s; }
.painel-zap:hover { background: rgba(31, 175, 90, .2); }
.painel-zap svg { width: 34px; height: 34px; flex: none; fill: none; stroke: #2BD07B; stroke-width: 1.6; }
.painel-zap svg .cheio { fill: #2BD07B; stroke: none; }
.painel-zap small { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.painel-zap b { font: 800 20px 'Manrope', sans-serif; letter-spacing: -.01em; }

/* letreiro */
.letreiro { background: var(--ac); color: #fff; padding: 14px 0; }
.letreiro li { font: 800 15px 'Manrope', sans-serif; letter-spacing: .06em; text-transform: uppercase; padding: 0 22px; display: inline-flex; align-items: center; gap: 44px; white-space: nowrap; }
.letreiro li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ciano); }

/* seções */
.secao { padding: 104px 0; }
.secao-escura { background: var(--noite); color: #fff; }
.secao-papel { background: var(--papel); }
.cab { max-width: 680px; margin-bottom: 52px; }
.rotulo { font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ac); margin-bottom: 14px; }
.cab-claro .rotulo, .secao-escura .rotulo { color: var(--ciano); }
.cab h2, .secao h2 { font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; }
.cab-sub { font-size: 18px; color: var(--tinta-2); margin-top: 18px; }
.cab-claro .cab-sub { color: rgba(255, 255, 255, .7); }

/* serviços */
.servicos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.serv { position: relative; display: flex; flex-direction: column; background: var(--branco); border: 1px solid var(--linha); border-radius: var(--raio); padding: 28px 24px 24px; transition: transform .3s, box-shadow .3s; --m-luz: rgba(26, 111, 214, .5); --m-luz-fundo: rgba(26, 111, 214, .05); }
.serv:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.serv-ico { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(135deg, #E3F8FB, #DCEBFF); margin-bottom: 22px; }
.serv-ico svg { width: 34px; height: 34px; fill: none; stroke: var(--ac); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.serv-ico svg .cheio { fill: var(--ac); stroke: none; }
.serv h3 { font-size: 21px; font-weight: 800; }
.serv p { font-size: 15.5px; color: var(--tinta-2); margin: 10px 0 22px; flex: 1; }
.serv-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ac); text-decoration: none; }
.serv-link:hover { color: var(--ac-forte); }

/* lembrete de óleo */
.oleo-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.oleo-grade .cab { margin-bottom: 0; }
.oleo { background: var(--noite-2); border: 1px solid var(--linha-escura); border-radius: 26px; padding: 28px; }
.oleo-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.oleo-campos label:last-child { grid-column: 1 / -1; }
.oleo label { display: grid; gap: 8px; font-size: 14px; color: rgba(255, 255, 255, .7); }
.oleo input, .oleo select { font: 600 16px 'DM Sans', sans-serif; color: #fff; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 13px 14px; width: 100%; -webkit-appearance: none; appearance: none; }
.oleo select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235ADBE8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
.oleo select option { color: #000; }
.oleo input:focus, .oleo select:focus { outline: 2px solid var(--ciano); outline-offset: 1px; }
.oleo-medidor { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); margin: 24px 0 14px; overflow: hidden; }
.oleo-medidor span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #2BD07B, #F5C542 70%, #F06262); background-size: 300px 100%; transition: width .7s cubic-bezier(.2, .75, .2, 1); }
.oleo-msg { font-size: 16px; min-height: 52px; color: rgba(255, 255, 255, .85); }
.oleo-msg b { color: #fff; }
.oleo .btn { width: 100%; margin-top: 10px; }

/* passos */
.passos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: p; }
.passos li { position: relative; border: 1px solid var(--linha); border-radius: var(--raio); padding: 26px 22px; --m-luz: rgba(26, 111, 214, .5); --m-luz-fundo: rgba(26, 111, 214, .05); }
.passo-n { font: 800 14px 'Manrope', sans-serif; color: var(--ac); background: #E6F0FC; padding: 6px 10px; border-radius: 10px; display: inline-block; margin-bottom: 18px; }
.passos h3 { font-size: 19px; font-weight: 800; }
.passos p { font-size: 15.5px; color: var(--tinta-2); margin-top: 8px; }

/* horário e endereço */
.local-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.local-grade h2 { margin-bottom: 30px; }
.tabela-horas { width: 100%; border-collapse: collapse; font-size: 16px; }
.tabela-horas th, .tabela-horas td { padding: 14px 6px; border-bottom: 1px solid var(--linha); text-align: left; }
.tabela-horas th { font-weight: 600; }
.tabela-horas td { text-align: right; color: var(--tinta-2); }
.tabela-horas tr.hoje th, .tabela-horas tr.hoje td { color: var(--ac); font-weight: 800; }
.tabela-horas tr.hoje th::after { content: " · hoje"; font-weight: 600; }
.local-card { background: var(--branco); border: 1px solid var(--linha); border-radius: 26px; padding: 14px; box-shadow: var(--sombra); }
.mapa-falso { border-radius: 18px; overflow: hidden; background: #E8EEF3; aspect-ratio: 5 / 3; }
.mapa-falso svg { width: 100%; height: 100%; }
.mapa-falso .rua { fill: none; stroke: #fff; stroke-width: 12; }
.mapa-falso .rua-g { fill: none; stroke: #fff; stroke-width: 20; }
.mapa-falso .pino path { fill: var(--ac); }
.mapa-falso .pino circle { fill: #fff; }
.local-dados { margin: 18px 8px; display: grid; gap: 4px; }
.local-dados div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.local-dados dt { color: var(--tinta-2); }
.local-dados dd { margin: 0; font-weight: 700; text-align: right; }
.a-confirmar { color: #9A6B00; background: #FFF4D6; border-radius: 8px; padding: 2px 9px; font-size: 14px; }
.local-card .btn { margin-top: 4px; }

/* chamada final */
.final { background: linear-gradient(120deg, #3FC3DE, var(--ac) 55%, #1747B5); color: #fff; padding: 92px 0; text-align: center; }
.final-in { display: grid; justify-items: center; gap: 18px; }
.final h2 { font-size: clamp(30px, 4vw, 48px); font-weight: 800; max-width: 820px; }
.final p { font-size: 19px; color: rgba(255, 255, 255, .85); }
.final .btn-zap { background: #fff; color: var(--ac-forte); margin-top: 12px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.final .btn-zap:hover { background: #EEF6FF; }

/* rodapé */
.rodape { background: var(--noite); color: rgba(255, 255, 255, .7); padding: 56px 0 28px; font-size: 15px; }
.rodape-in { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--linha-escura); }
.rodape b { color: #fff; font: 800 18px 'Manrope', sans-serif; display: block; margin-bottom: 8px; }
.rodape-links { display: grid; gap: 8px; justify-items: end; }
.rodape-links a { text-decoration: none; }
.rodape-links a:hover { color: #fff; }
.feito { text-align: center; font-size: 13px; margin-top: 22px; color: rgba(255, 255, 255, .45); }

/* botão flutuante */
.zap-flutua { position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 50%; background: var(--zap); display: grid; place-items: center; box-shadow: 0 16px 36px -12px rgba(31, 175, 90, .8); z-index: 60; transition: transform .2s; }
.zap-flutua:hover { transform: scale(1.06); }
.zap-flutua svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 2; }

a:focus-visible, button:focus-visible { outline: 3px solid var(--ciano); outline-offset: 3px; }

/* responsivo */
@media (max-width: 1000px) {
  .servicos, .passos { grid-template-columns: repeat(2, 1fr); }
  .hero-grade, .oleo-grade, .local-grade { grid-template-columns: 1fr; gap: 40px; }
  .painel { max-width: 520px; }
}
@media (max-width: 720px) {
  .menu { display: none; }
  .topo-in { justify-content: space-between; height: 62px; }
  .hero { padding: 52px 0 64px; }
  .hero-sub { font-size: 17px; }
  .hero-acoes .btn { width: 100%; }
  .secao { padding: 72px 0; }
  .servicos, .passos { grid-template-columns: 1fr; }
  .oleo { padding: 20px; }
  .oleo-campos { grid-template-columns: 1fr; }
  .rodape-links { justify-items: start; }
  .faixa-previa { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .ponto { animation: none; } html { scroll-behavior: auto; } }

/* ===== barra de progresso (pneu) ===== */
.pneu-progresso { position: fixed; top: 0; left: 0; right: 0; height: 5px; z-index: 80; pointer-events: none; }
.pneu-progresso span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: repeating-linear-gradient(115deg, var(--ciano) 0 6px, var(--ac) 6px 12px); }

/* ===== engrenagem do hero ===== */
.engrenagem { position: absolute; right: -140px; top: -120px; width: 520px; height: 520px; fill: none; stroke: rgba(90, 219, 232, .09); stroke-width: 1.2; animation: gira 40s linear infinite; pointer-events: none; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ===== cena do check-up ===== */
.checkup { position: relative; padding: 96px 0 110px; color: #fff; overflow: hidden; background: linear-gradient(100deg, #5DDAE8 0%, #47BFE3 22%, #2484D6 55%, #0D47B7 100%); }
.checkup::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.checkup-cab { position: relative; text-align: center; max-width: 720px; margin: 0 auto 40px; }
.checkup-cab .rotulo { color: #fff; opacity: .85; }
.checkup-cab h2 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; text-shadow: 0 6px 30px rgba(10, 40, 110, .35); }
.checkup-cab p:last-child { margin-top: 12px; font-size: 17px; color: rgba(255, 255, 255, .85); }
.palco { position: relative; max-width: 980px; margin: 0 auto; padding: 10px 0 78px; }
.palco::after { content: ""; position: absolute; left: 6%; right: 4%; bottom: 70px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(8, 30, 90, .45), transparent); }
.carro { position: relative; z-index: 2; transform: translateX(-75%) skewX(-8deg); opacity: 0; filter: blur(8px); transition: transform 1.25s cubic-bezier(.16, .84, .24, 1.06), opacity .5s, filter .9s; }
.carro svg { width: 100%; height: auto; display: block; overflow: visible; }
.c-marinho { fill: #17325F; }
.c-branco { fill: #fff; }
.palco.entrou .carro { transform: none; opacity: 1; filter: none; animation: freia .5s 1.15s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes freia { 40% { transform: translateX(1.2%) rotate(-.6deg); } 100% { transform: none; } }
.velocidade { position: absolute; inset: 18% 10% 30% 0; z-index: 1; pointer-events: none; }
.velocidade i { position: absolute; left: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9)); opacity: 0; }
.velocidade i:nth-child(1) { top: 10%; width: 40%; } .velocidade i:nth-child(2) { top: 26%; width: 55%; } .velocidade i:nth-child(3) { top: 42%; width: 35%; }
.velocidade i:nth-child(4) { top: 58%; width: 60%; } .velocidade i:nth-child(5) { top: 74%; width: 45%; } .velocidade i:nth-child(6) { top: 90%; width: 30%; }
.palco.entrou .velocidade i { animation: risco 1.1s cubic-bezier(.2, .7, .3, 1) both; }
.palco.entrou .velocidade i:nth-child(2n) { animation-delay: .08s; } .palco.entrou .velocidade i:nth-child(3n) { animation-delay: .16s; }
@keyframes risco { 0% { opacity: 0; transform: translateX(-30%) scaleX(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(80%) scaleX(1); } }
.roda-giro { position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: repeating-conic-gradient(rgba(255,255,255,.55) 0 8deg, transparent 8deg 36deg); -webkit-mask: radial-gradient(circle, transparent 18%, #000 20%, #000 62%, transparent 64%); mask: radial-gradient(circle, transparent 18%, #000 20%, #000 62%, transparent 64%); opacity: 0; pointer-events: none; }
.palco.entrou .roda-giro { animation: roda 1.2s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes roda { 0% { opacity: .9; transform: translate(-50%, -50%) rotate(0); } 85% { opacity: .6; } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(1080deg); } }
.farol { position: absolute; right: -4%; top: 44%; width: 26%; height: 22%; background: radial-gradient(ellipse at 0% 50%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .25) 35%, transparent 70%); opacity: 0; filter: blur(2px); pointer-events: none; }
.palco.entrou .farol { animation: pisca 1.4s 1.2s both; }
@keyframes pisca { 0%, 30%, 60% { opacity: 0; } 15%, 45% { opacity: 1; } 100% { opacity: .55; } }
.scanner { position: absolute; z-index: 3; top: 0; bottom: 78px; left: 0; width: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 18px 6px rgba(255, 255, 255, .75), 0 0 60px 20px rgba(90, 219, 232, .55); opacity: 0; pointer-events: none; }
.scanner::before { content: ""; position: absolute; right: 3px; top: 0; bottom: 0; width: 120px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18)); }
.palco.varrendo .scanner { animation: varre 2.6s cubic-bezier(.45, 0, .55, 1) both; }
@keyframes varre { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.ponto-c { position: absolute; z-index: 4; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; opacity: 0; scale: .6; transition: opacity .35s, scale .45s cubic-bezier(.34, 1.56, .64, 1); }
.ponto-c i { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255, 255, 255, .28), 0 6px 18px rgba(8, 30, 90, .45); flex: none; }
.ponto-c i::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #fff; animation: onda 1.8s infinite; }
@keyframes onda { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.ponto-c b { font: 800 14px 'Manrope', sans-serif; white-space: nowrap; background: rgba(12, 17, 23, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 7px 12px; border-radius: 999px; translate: -6px 0; opacity: 0; transition: opacity .3s .1s, translate .4s .1s cubic-bezier(.2, .75, .2, 1); }
.ponto-c.on { opacity: 1; scale: 1; }
.ponto-c.on b { opacity: 1; translate: 0 0; }
.ponto-esq { flex-direction: row-reverse; }
.ponto-c:hover b, .ponto-c:focus-visible b { background: #fff; color: var(--ac-forte); }
.checkup-ok { position: absolute; z-index: 5; left: 50%; bottom: 0; translate: -50% 20px; display: inline-flex; align-items: center; gap: 10px; font: 800 16px 'Manrope', sans-serif; background: #fff; color: #0F7A3D; padding: 12px 20px; border-radius: 999px; box-shadow: 0 18px 40px -16px rgba(8, 30, 90, .6); opacity: 0; transition: opacity .4s, translate .6s cubic-bezier(.34, 1.56, .64, 1); white-space: nowrap; }
.checkup-ok svg { width: 20px; height: 20px; fill: none; stroke: #1FAF5A; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .5s .25s; }
.checkup-ok.on { opacity: 1; translate: -50% 0; }
.checkup-ok.on svg { stroke-dashoffset: 0; }

/* ===== ícones dos serviços animados ===== */
.serv-ico svg { transform-origin: center; }
.serv-ico { transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), background .3s; }
.serv:hover .serv-ico { transform: translateY(-3px) rotate(-4deg); background: linear-gradient(135deg, var(--ciano), var(--ac)); }
.serv:hover .serv-ico svg { stroke: #fff; }
.serv:hover .serv-ico svg .cheio { fill: #fff; }
.serv:nth-child(1):hover .serv-ico svg { animation: ponteiro .9s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes ponteiro { 0% { transform: rotate(-60deg); } 60% { transform: rotate(12deg); } 100% { transform: rotate(0); } }
.serv:nth-child(2):hover .serv-ico svg { animation: mola .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes mola { 30% { transform: scaleY(.72); } 60% { transform: scaleY(1.1); } 100% { transform: none; } }
.serv:nth-child(3):hover .serv-ico svg { animation: gota 1s ease-in-out; }
@keyframes gota { 0% { transform: translateY(-8px) scale(.8); opacity: .3; } 50% { transform: translateY(2px) scale(1.08); opacity: 1; } 100% { transform: none; } }
.serv:nth-child(4):hover .serv-ico svg { animation: treme .25s linear 4; }
@keyframes treme { 25% { transform: translate(1px, -1px) rotate(-3deg); } 50% { transform: translate(-1px, 1px); } 75% { transform: translate(1px, 1px) rotate(3deg); } }

/* ===== agendamento ===== */
.agenda-grade { display: grid; grid-template-columns: .85fr 1.15fr; gap: 56px; align-items: start; }
.agenda-vant { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.agenda-vant li { display: flex; gap: 12px; align-items: center; font-size: 16px; }
.agenda-vant li::before { content: ""; width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat; }
.agenda { background: var(--branco); border: 1px solid var(--linha); border-radius: 26px; padding: 26px; box-shadow: var(--sombra); display: grid; gap: 22px; min-width: 0; }
.agenda fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.agenda legend { display: flex; align-items: center; gap: 10px; font: 800 17px 'Manrope', sans-serif; margin-bottom: 12px; padding: 0; }
.agenda legend span { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; color: #fff; background: var(--ac); }
.chips-escolha { display: flex; flex-wrap: wrap; gap: 8px; }
.chips-escolha label, .dias label, .horas label { position: relative; }
.chips-escolha input, .dias input, .horas input { position: absolute; opacity: 0; pointer-events: none; }
.chips-escolha span, .dia, .hora { display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--linha); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s, color .2s, transform .15s; user-select: none; }
.chips-escolha span { padding: 10px 14px; font-size: 15px; font-weight: 600; }
.chips-escolha span:hover, .dia:hover, .hora:hover { border-color: var(--ac); }
.chips-escolha input:checked + span { background: var(--ac); border-color: var(--ac); color: #fff; }
.chips-escolha input:focus-visible + span, .dias input:focus-visible + .dia, .horas input:focus-visible + .hora { outline: 3px solid var(--ciano); outline-offset: 2px; }
.dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.dias label { scroll-snap-align: start; flex: none; }
.dia { flex-direction: column; width: 66px; height: 76px; line-height: 1.1; }
.dia small { font-size: 12px; color: var(--tinta-2); }
.dia b { font: 800 22px 'Manrope', sans-serif; margin-top: 4px; }
.dia em { font-style: normal; font-size: 11px; color: var(--tinta-2); }
.dias input:checked + .dia { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.dias input:checked + .dia small, .dias input:checked + .dia em { color: rgba(255, 255, 255, .7); }
.horas { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.hora { width: 100%; height: 44px; font-weight: 700; font-size: 15px; animation: surge .35s both; }
@keyframes surge { from { opacity: 0; transform: translateY(6px); } }
.horas input:checked + .hora { background: var(--ac); border-color: var(--ac); color: #fff; }
.dica { color: var(--tinta-2); font-size: 15px; grid-column: 1 / -1; }
.ag-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ag-campos label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tinta-2); }
.ag-campos label small { font-weight: 400; }
.ag-campos .largo { grid-column: 1 / -1; }
.ag-campos input, .ag-campos textarea { font: 400 16px 'DM Sans', sans-serif; color: var(--tinta); border: 1.5px solid var(--linha); border-radius: 12px; padding: 12px 14px; width: 100%; resize: vertical; }
.ag-campos input:focus, .ag-campos textarea:focus { outline: none; border-color: var(--ac); box-shadow: 0 0 0 4px rgba(26, 111, 214, .12); }
.ag-erro { color: #C0392B; font-weight: 600; font-size: 15px; }
.ag-erro:empty { display: none; }
.largo { width: 100%; }
.ag-ok { background: #EAF8F0; border: 1px solid #BFE8D0; border-radius: 16px; padding: 16px; display: grid; gap: 12px; animation: surge .4s both; }
.ag-ok[hidden] { display: none; }

/* ===== luzes do painel ===== */
.luzes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.luz { text-align: left; font: inherit; color: inherit; background: var(--noite); border: 1px solid #1E2731; border-radius: var(--raio); padding: 22px 20px; cursor: pointer; display: grid; gap: 10px; align-content: start; text-decoration: none; transition: transform .3s, box-shadow .3s; }
.luz:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .6); }
.luz-ico { width: 54px; height: 54px; animation: acende 3.2s infinite; animation-delay: var(--d, 0s); }
.luz-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.luz-v .luz-ico { color: #FF4D4D; filter: drop-shadow(0 0 10px rgba(255, 77, 77, .7)); }
.luz-a .luz-ico { color: #FFB020; filter: drop-shadow(0 0 10px rgba(255, 176, 32, .65)); }
.luz-i .luz-ico { color: #FFD84D; filter: drop-shadow(0 0 8px rgba(255, 216, 77, .5)); }
@keyframes acende { 0%, 70%, 100% { opacity: 1; } 76% { opacity: .25; } 82% { opacity: 1; } 88% { opacity: .35; } }
.luz h3 { color: #fff; font-size: 17px; font-weight: 800; }
.luz p { color: rgba(255, 255, 255, .68); font-size: 14.5px; line-height: 1.5; }
.nv { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin: 0 4px 0 12px; }
.luz .nv { margin: 0; justify-self: start; }
.nv-v { background: rgba(255, 77, 77, .16); color: #E03B3B; }
.nv-a { background: rgba(255, 176, 32, .18); color: #B77800; }
.nv-i { background: rgba(255, 216, 77, .25); color: #8A6D00; }
.luz .nv-v { color: #FF6B6B; } .luz .nv-a { color: #FFB020; } .luz .nv-i { color: #FFD84D; }
.luz-zap { color: var(--ciano); font-weight: 700; font-size: 14px; }
.luzes-leg { margin-top: 18px; font-size: 14px; color: var(--tinta-2); line-height: 2; }
.luzes-leg .nv:first-child { margin-left: 0; }

/* indicar */
.btn-indicar { font: inherit; color: var(--ciano); background: none; border: 1px solid rgba(90, 219, 232, .35); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.btn-indicar:hover { background: rgba(90, 219, 232, .1); }

@media (max-width: 1000px) {
  .agenda-grade { grid-template-columns: 1fr; gap: 32px; }
  .luzes { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .checkup { padding: 72px 0 84px; }
  .palco { margin: 0 -16px; padding-bottom: 72px; }
  .ponto-c b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ponto-c i { width: 14px; height: 14px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .28); }
  .ponto-c i::after { inset: -4px; }
  .agenda { padding: 18px; }
  .ag-campos { grid-template-columns: 1fr; }
  .luzes { grid-template-columns: 1fr 1fr; gap: 10px; }
  .luz { padding: 16px 14px; }
  .luz p { font-size: 13.5px; }
  .luz-ico { width: 44px; height: 44px; }
  .engrenagem { width: 320px; height: 320px; right: -120px; top: -80px; }
}
@media (prefers-reduced-motion: reduce) {
  .engrenagem, .luz-ico, .ponto-c i::after { animation: none; }
  .carro { transform: none; opacity: 1; filter: none; transition: none; }
  .ponto-c { opacity: 1; scale: 1; }
  .ponto-c b { opacity: 1; translate: 0 0; }
}