/* Estilos exclusivos da /motos (visual da maquete do sócio). Carregado depois de base.css e components.css; a home.css não é mais usada aqui.
   Tudo é escopado por body.mt / .mt-* / #plans-grid / .g-sticky: nada afeta outras páginas.
   Fontes: Sora 800 (títulos), Inter 400/600/700 (texto), Barlow Condensed 700 (placa), IBM Plex Mono (já carregada pelo base.css). */

.mt {
  --mt-navy: #0a2342;
  --mt-navy-2: #0f2c55;
  --mt-red: #d62828;
  --mt-cream: #f7f3ea;
  --mt-line: #e4ddcc;
  --mt-ink: #0b1730;
  --mt-muted: #4b5568;
  --mt-sora: 'Sora', 'Inter', system-ui, sans-serif;
  --mt-inter: 'Inter', system-ui, -apple-system, sans-serif;
  --mt-plate: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  background: #fff;
  background-image: none;
  color: var(--mt-ink);
  font-family: var(--mt-inter);
  overflow-x: hidden;
}

.mt h1, .mt h2, .mt h3 { font-family: var(--mt-sora); font-weight: 800; }
.mt a { color: var(--mt-navy); }
.mt a:hover { color: var(--mt-red); }
.mt-wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* ---------- Cabeçalho ---------- */
.mt-header { background: #fff; border-bottom: 1px solid #eee9dd; position: sticky; top: 0; z-index: 20; }
.mt-header-in { padding-top: 12px; padding-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mt-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.mt-logo-box { --lh: 40px; position: relative; display: block; flex: none; height: var(--lh); width: calc(var(--lh) * 5.07); overflow: hidden; }
/* img/marca/logo-*.webp|png já vêm recortados (sem margem em branco), na proporção da caixa (5,07:1): a imagem enche a caixa */
.mt-logo-box picture { display: block; width: 100%; height: 100%; }
.mt-logo { display: block; width: 100%; height: 100%; max-width: none; }
.mt-logo-foot { --lh: 44px; }
/* rodapé: usa img/marca/logo-branco.* (antes: filtro CSS sobre a versão colorida) */
.mt-brand-tag { font-size: 15px; font-weight: 700; letter-spacing: 2.6px; color: var(--mt-navy); border-left: 1px solid var(--mt-line); padding-left: 12px; }
.mt-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 26px; font-size: 15px; font-weight: 600; }
.mt-nav a { text-decoration: none; }
.mt-pill { background: var(--mt-navy); color: #fff !important; border-radius: 999px; padding: 12px 22px; font-weight: 700; }
.mt-pill:hover { background: var(--mt-red); }

/* ---------- Grade de fundo (hero e relatório) ---------- */
.mt-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(10, 35, 66, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(10, 35, 66, 0.05) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.mt-grid-bg-dark { background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); }

/* ---------- Hero ---------- */
.mt-hero { position: relative; background: var(--mt-cream); overflow: hidden; }
.mt-hero-in { position: relative; padding-top: 64px; padding-bottom: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
.mt-hero-copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.mt-eyebrow-pill { align-self: flex-start; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: 1.4px; color: var(--mt-navy); background: #fff; border: 1px solid var(--mt-line); border-radius: 999px; padding: 8px 14px; }
.mt-dot { position: relative; width: 10px; height: 10px; display: inline-block; border-radius: 50%; background: var(--mt-red); }
.mt-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--mt-red); animation: mt-ring 1.8s ease-out infinite; }
.mt-l1 { display: block; white-space: nowrap; }
.mt-h1 { margin: 0; font-size: clamp(34px, 4.1vw, 58px); line-height: 1.02; letter-spacing: -2px; color: var(--mt-navy); }
.mt-word-box { color: var(--mt-red); display: inline-block; min-height: 1.05em; }
.mt-word { display: inline-block; animation: mt-wordin 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.mt-sub { margin: 0; font-size: 19px; line-height: 1.55; color: #3a4458; max-width: 520px; }
.mt-sub strong { color: var(--mt-navy); }

.mt-plate-card { background: #fff; border: 1px solid var(--mt-line); border-radius: 18px; padding: 16px; box-shadow: 0 20px 40px rgba(10, 35, 66, 0.1); max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.mt-plate-label { font-size: 14px; font-weight: 700; color: var(--mt-navy); }
.mt-plate-row { display: flex; flex-wrap: wrap; gap: 10px; }
.mt-plate { flex: 1 1 230px; display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; border: 2.5px solid var(--mt-navy); }
.mt-plate:focus-within { box-shadow: 0 0 0 3px rgba(214, 40, 40, 0.35); }
.mt-plate-band { background: #1c4fa1; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-align: center; padding: 3px 0; }
.mt-plate-input { border: 0; outline: none; text-align: center; font-family: var(--mt-plate); font-weight: 700; font-size: 38px; letter-spacing: 5px; color: var(--mt-ink); padding: 4px 10px 6px; text-transform: uppercase; width: 100%; background: transparent; }
.mt-plate-input::placeholder { color: #a3abba; }
.mt-btn-red, .mt-btn-navy { flex: 1 1 210px; min-height: 66px; border: 0; border-radius: 10px; color: #fff; font-family: var(--mt-sora); font-weight: 800; font-size: 17px; letter-spacing: 0.5px; padding: 0 22px; cursor: pointer; text-transform: uppercase; }
.mt-btn-red { background: var(--mt-red); box-shadow: 0 10px 24px rgba(214, 40, 40, 0.35); }
.mt-btn-red:hover { background: #b81f1f; }
.mt-btn-navy { background: var(--mt-navy); }
.mt-btn-navy:hover { background: #061830; }
.mt-btn-red:disabled, .mt-btn-navy:disabled { opacity: 0.7; cursor: progress; }
.mt-plate-card .plate-error { margin: 0; min-height: 0; }
.mt-plate-card .plate-error:empty { display: none; }
.mt-plate-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 13px; color: #4b5568; }
.mt-plate-foot strong { color: var(--mt-navy); }
.mt-plate-foot a { font-weight: 700; }

/* Prévia (components.css) no hero: largura do campo */
/* Quadro da prévia (markup do previa.js, compartilhado com a home): visual da /motos só aqui, escopado em .mt */
.mt .previa-card { max-width: 560px; margin-top: 0; background: #fff; border: 1px solid var(--mt-line); border-radius: 18px; padding: 18px; box-shadow: 0 20px 40px rgba(10, 35, 66, 0.1); font-family: var(--mt-inter); color: var(--mt-ink); }
.mt .previa-card .previa-head { margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
.mt .previa-card .stamp { transform: none; border: 0; background: #e3f7ec; color: #0f6b3c; font-family: var(--mt-inter); font-size: 12px; font-weight: 700; letter-spacing: 1.4px; padding: 7px 12px; }
.mt .previa-card .previa-head strong { font-family: var(--mt-plate); font-weight: 700; font-size: 24px; letter-spacing: 3px; line-height: 1; color: var(--mt-ink); background: #fff; border: 2px solid var(--mt-navy); border-radius: 6px; padding: 4px 12px 3px; }
.mt .previa-grid { gap: 14px; }
.mt .previa-grid dt { font-family: var(--mt-inter); font-size: 11px; font-weight: 600; letter-spacing: 1.2px; color: var(--mt-muted); }
.mt .previa-grid dd { margin: 3px 0 0; font-size: 16px; font-weight: 700; color: var(--mt-ink); }
.mt .g-aviso-carro { margin: 16px 0 0; padding: 12px 14px; background: #fff8e8; border: 1px solid #f0c36d; border-left: 4px solid #d9a441; border-radius: 12px; font-size: 14px; line-height: 1.5; color: #5c3a00; }
.mt .previa-lock { margin-top: 18px; padding-top: 16px; border-top: 1px dashed #cfc6af; }
.mt .previa-lock-title { margin: 0 0 12px; font-family: var(--mt-sora); font-weight: 800; font-size: 17px; letter-spacing: -0.3px; color: var(--mt-navy); }
.mt .previa-lock-list { gap: 8px; margin-bottom: 14px; }
.mt .previa-lock-list li { background: var(--mt-cream); border: 1px solid var(--mt-line); border-radius: 10px; padding: 9px 11px; font-size: 13.5px; font-weight: 600; color: #3a4458; }
.mt .previa-lock-note { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--mt-muted); }
/* "Escolher o pacote": mesmo botão do "Consultar placa" (texto branco; o a:hover do .mt não pode avermelhar o texto) */
.mt .previa-lock a.btn, .mt .previa-lock a.btn:hover { color: #fff; }
.mt .previa-lock a.btn { min-height: 56px; border: 0; border-radius: 10px; background: var(--mt-red); box-shadow: 0 10px 24px rgba(214, 40, 40, 0.35); font-family: var(--mt-sora); font-weight: 800; font-size: 17px; letter-spacing: 0.5px; text-transform: uppercase; }
.mt .previa-lock a.btn:hover { background: #b81f1f; transform: none; }
.mt .previa-lock a.btn:focus-visible { outline: 3px solid var(--mt-navy); outline-offset: 2px; }

/* Ilustração */
.mt-hero-art { flex: 1 1 520px; min-width: 0; display: flex; justify-content: center; }
.mt-art-box { position: relative; width: 100%; max-width: 600px; }
.mt-moto { width: 100%; height: auto; display: block; }
.mt-chip { position: absolute; background: #fff; border-radius: 12px; box-shadow: 0 14px 30px rgba(10, 35, 66, 0.16); padding: 10px 14px; display: flex; align-items: center; gap: 10px; font-size: 14px; }
/* Rótulos sobre a ilustração (como na maquete), fora do tanque e do motor: Roubo e furto em cima à esquerda; Leilão à direita, na
   altura do meio da moto, encostado na linha vermelha (que pára à direita); Gravame embaixo à esquerda. */
.mt-chip-1 { top: 2%; left: 0; }
.mt-chip-2 { top: 47%; right: 1%; }
.mt-chip-3 { bottom: 2%; left: 6%; }
.mt-chip-ic { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
.mt-ic-ok { background: #e3f7ec; }
.mt-ic-bad { background: #fde7e7; }
.mt-ic-warn { background: #fff2de; }
.mt-chip-k { display: block; font-size: 11px; color: #5b6577; font-weight: 600; }
.mt-ex { position: absolute; bottom: -18px; right: 0; font-size: 11px; color: #6a7385; }

/* ---------- Números ---------- */
.mt-stats-sec { background: #fff; padding: 56px 0 48px; border-bottom: 1px solid #eee9dd; }
.mt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mt-stat { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.mt-stat-n { font-family: var(--mt-sora); font-weight: 800; font-size: 56px; color: var(--mt-navy); line-height: 1; }
.mt-stat-l { font-size: 15px; color: var(--mt-muted); }
.mt-qualquer { margin: 40px 0 0; text-align: center; font-size: 16px; font-weight: 600; color: var(--mt-navy); padding: 0 24px; }

/* ---------- Seções ---------- */
.mt-sec { position: relative; padding: 96px 0; overflow: hidden; }
.mt-sec-cream { background: var(--mt-cream); padding: 88px 0; }
.mt-sec-white { background: #fff; }
.mt-sec-navy { background: var(--mt-navy); color: #fff; }
.mt-head { display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; margin-bottom: 40px; }
.mt-head-left { align-items: flex-start; text-align: left; }
.mt-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--mt-red); }
.mt-eyebrow-light { color: #ff8a8a; }
.mt-h2 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -1px; color: var(--mt-navy); max-width: 760px; }
.mt-h2-light { color: #fff; max-width: none; }
.mt-seguro { margin: 44px 0 0; text-align: center; font-size: 14px; color: var(--mt-muted); }

/* ---------- Cards dos pacotes: markup da home (components.css), visual da maquete ---------- */
#plans-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; padding-top: 6px; }
#plans-grid .plan-folder {
  display: flex; flex-direction: column; gap: 16px;
  background: #fff; border: 1px solid var(--mt-line); border-radius: 22px; padding: 30px;
  box-shadow: none; color: var(--mt-ink);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#plans-grid .plan-folder:hover { transform: translateY(-8px); box-shadow: 0 28px 50px rgba(10, 35, 66, 0.16); }
#plans-grid .plan-folder::before { content: none; }
#plans-grid .plan-folder h3 { margin: 0; font-size: 26px; color: var(--mt-navy); }
#plans-grid .plan-desc { margin: 0; font-size: 15px; color: var(--mt-muted); line-height: 1.5; }
#plans-grid .plan-price { margin: 0; font-family: var(--mt-sora); font-weight: 800; font-size: 42px; letter-spacing: -1px; color: var(--mt-navy); display: flex; align-items: baseline; gap: 8px; }
#plans-grid .plan-price::after { content: 'por consulta'; font-family: var(--mt-inter); font-size: 13px; font-weight: 400; letter-spacing: 0; color: #5b6577; }
#plans-grid .plan-items { flex-grow: 1; margin: 4px 0 0; gap: 10px; }
#plans-grid .plan-items li { font-size: 14.5px; line-height: 1.4; color: #1e2a40; padding-left: 28px; }
#plans-grid .plan-items li::before { top: 1px; font-size: 16px; color: #14804a; }
#plans-grid .plan-items li.item-nao-incluso { color: #8a93a3; opacity: 1; }
#plans-grid .plan-items li.item-nao-incluso::before { color: #b0b7c3; }
#plans-grid .plan-toggle { margin: -4px 0 0; color: var(--mt-muted); }
#plans-grid .btn { min-height: 54px; border-radius: 12px; font-family: var(--mt-inter); font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
#plans-grid .btn-ghost { background: transparent; border: 2px solid var(--mt-navy); color: var(--mt-navy); }
#plans-grid .btn-ghost:hover { background: var(--mt-navy); color: #fff; }

/* Selos de cada card (inseridos por motos.js) */
.mt-selos { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mt-selo { font-size: 12px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--mt-navy); background: #eef2f8; border-radius: 999px; padding: 6px 12px; }
.mt-selo-rec { font-weight: 800; letter-spacing: 1px; color: #fff; background: var(--mt-red); }

/* Completa: fundo azul-marinho (sem anel animado: ele deixava uma linha avermelhada na borda direita) */
/* Na home a descrição do card escuro usa --ink-2 (quase ilegível); aqui fica na cor do papel. */
#plans-grid .plan-folder.is-featured .plan-desc {
  color: var(--paper);
}
#plans-grid .plan-folder.is-featured { border: 0; background: var(--mt-navy); color: #fff; box-shadow: 0 24px 50px rgba(10, 35, 66, 0.28); }
#plans-grid .plan-folder.is-featured h3, #plans-grid .plan-folder.is-featured .plan-price { color: #fff; }
#plans-grid .plan-folder.is-featured .plan-price { font-size: 46px; }
#plans-grid .plan-folder.is-featured .plan-price::after { color: #c9d3e3; }
#plans-grid .plan-folder.is-featured .mt-selo { color: #fff; background: rgba(255, 255, 255, 0.12); }
#plans-grid .plan-folder.is-featured .mt-selo-rec { background: var(--mt-red); }
#plans-grid .plan-folder.is-featured .plan-items li { color: #e3e9f3; }
#plans-grid .plan-folder.is-featured .plan-items li::before { color: #3ddc97; }
#plans-grid .plan-folder.is-featured .btn-primary { background: var(--mt-red); border: 0; color: #fff; }
#plans-grid .plan-folder.is-featured .btn-primary:hover { background: #b81f1f; }

/* ---------- O relatório ---------- */
.mt-rel { position: relative; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.mt-rel-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.mt-rel-p { margin: 0; font-size: 18px; line-height: 1.6; color: #c9d3e3; }
.mt-rel-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 16px; }
.mt-rel-list li { display: flex; gap: 12px; align-items: center; }
.mt-rel-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; flex: none; }
.mt-rel-demo { flex: 1 1 480px; min-width: 0; display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.mt-panel { flex: 1 1 300px; min-width: 0; background: var(--mt-navy-2); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.mt-panel-top, .mt-panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: #9fb0cb; }
.mt-panel-live { display: flex; align-items: center; gap: 8px; }
.mt-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; display: inline-block; animation: mt-pulse 1.3s ease-in-out infinite; }
.mt-panel-plate { font-family: var(--mt-plate); font-weight: 700; font-size: 18px; letter-spacing: 2px; color: var(--mt-ink); background: #fff; border-radius: 5px; padding: 0 8px; }
.mt-panel-scan { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 14px; color: #c9d3e3; }
.mt-panel-pct { font-family: var(--font-mono); font-weight: 600; font-size: 34px; color: #fff; }
.mt-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 999px; overflow: hidden; }
.mt-bar-fill { height: 100%; background: var(--mt-red); border-radius: 999px; }
.mt-checks { display: flex; flex-direction: column; min-height: 300px; }
.mt-row { display: none; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 14px; color: #e3e9f3; }
.mt-row.is-on { display: flex; animation: mt-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.mt-tag { font-weight: 700; font-size: 12px; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.mt-tag-ok { color: #3ddc97; background: rgba(61, 220, 151, 0.14); }
.mt-tag-bad { color: #ff7a7a; background: rgba(255, 90, 90, 0.16); }
.mt-tag-warn { color: #ffc266; background: rgba(255, 181, 71, 0.16); }
.mt-panel-foot strong { color: #ff8a8a; }

.mt-phone { flex: 1 1 250px; min-width: 0; background: #ece5da; border-radius: 26px; border: 8px solid #091b36; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.mt-phone-top { background: #075e54; color: #fff; padding: 12px 14px; display: flex; align-items: center; gap: 10px; }
.mt-phone-av { width: 34px; height: 34px; border-radius: 50%; background: var(--mt-cream); display: flex; align-items: center; justify-content: center; overflow: hidden; flex: none; }
.mt-phone-av img { width: 26.3px; /* = 28px da arte inteira antiga x 0,939 (largura visível do desenho) */ height: auto; display: block; }
.mt-phone-nome { display: flex; flex-direction: column; line-height: 1.2; }
.mt-phone-nome strong { font-size: 14px; }
.mt-phone-nome span { font-size: 11px; opacity: 0.8; }
.mt-chat { padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 330px; font-size: 13px; line-height: 1.4; }
.mt-msg { display: none; padding: 8px 10px; color: #111b21; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08); }
.mt-msg.is-on { display: block; animation: mt-pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.mt-msg-bot { align-self: flex-start; background: #fff; border-radius: 10px 10px 10px 2px; max-width: 86%; }
.mt-msg-me { align-self: flex-end; background: #dcf8c6; border-radius: 10px 10px 2px 10px; max-width: 80%; }
.mt-typing { display: none; align-self: flex-start; background: #fff; border-radius: 10px; padding: 10px 12px; gap: 4px; }
.mt-typing.is-on { display: flex; }
.mt-typing span { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; display: inline-block; animation: mt-pulse 1.3s ease-in-out infinite; }
.mt-typing span:nth-child(2) { animation-delay: 0.2s; }
.mt-typing span:nth-child(3) { animation-delay: 0.4s; }

/* ---------- Como funciona ---------- */
.mt-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.mt-step { background: var(--mt-cream); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.mt-step:hover { transform: translateY(-8px); box-shadow: 0 28px 50px rgba(10, 35, 66, 0.16); }
.mt-step-n { font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--mt-red); }
.mt-step h3 { margin: 0; font-size: 21px; color: var(--mt-navy); }
.mt-step p { margin: 0; font-size: 15px; color: var(--mt-muted); line-height: 1.5; }
.mt-step-dark { background: var(--mt-navy); }
.mt-step-dark .mt-step-n { color: #ff8a8a; }
.mt-step-dark h3 { color: #fff; }
.mt-step-dark p { color: #c9d3e3; }

/* ---------- Dúvidas ---------- */
.mt-wrap-faq { max-width: 860px; }
.mt-faq { display: flex; flex-direction: column; gap: 12px; }
.mt-faq-item { background: #fff; border: 1px solid var(--mt-line); border-radius: 14px; padding: 20px 24px; }
.mt-faq-item summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; color: var(--mt-navy); display: flex; justify-content: space-between; gap: 16px; }
.mt-faq-item summary::-webkit-details-marker { display: none; }
.mt-faq-item p { margin: 12px 0 0; font-size: 16px; color: #3a4458; line-height: 1.6; }
.mt-chev { color: var(--mt-red); font-size: 22px; line-height: 1; display: inline-block; transition: transform 0.25s ease; }
.mt-faq-item[open] .mt-chev { transform: rotate(45deg); }

/* ---------- Fechamento ---------- */
.mt-final { background: var(--mt-red); color: #fff; padding: 80px 0; }
.mt-final-in { max-width: 860px; display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.mt-final-h { margin: 0; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -1.5px; color: #fff; }
.mt-final-form { width: 100%; max-width: 580px; }
.mt-plate-white { border-color: #fff; }
.mt-final-foot { font-size: 14px; color: #ffe3e3; }

/* ---------- Botão fixo no celular ---------- */
.g-sticky { display: none; }

/* ---------- Rodapé ---------- */
.mt-footer { background: #071a33; color: #aeb8c9; padding: 64px 0 28px; }
.mt-footer .mt-wrap { display: flex; flex-direction: column; gap: 40px; }
.mt-foot-top { display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; }
.mt-foot-brand { flex: 1 1 300px; max-width: 360px; display: flex; flex-direction: column; gap: 14px; }
.mt-foot-brand p { margin: 0; font-size: 14px; line-height: 1.6; }
.mt-foot-cols { display: flex; flex-wrap: wrap; gap: 48px; font-size: 14px; }
.mt-foot-cols div { display: flex; flex-direction: column; gap: 10px; }
.mt-foot-cols strong { color: #fff; font-size: 13px; letter-spacing: 1.4px; }
.mt-footer a, .mt-footer a:hover { color: #aeb8c9; text-decoration: none; }
.mt-footer a:hover { color: #fff; }
.mt-foot-legal { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 22px; font-size: 13px; }

/* ---------- Banner de cookies (js/consent.js): visual novo, igual na home e na /motos ----------
   O consent.js cria o banner no <body> (que aqui é .mt) com as classes de components.css. Aqui o banner ganha a identidade nova, só dentro
   de .mt (as demais páginas seguem com o banner de sempre). Recusar e Aceitar: MESMO estilo, peso e largura (LGPD: sem destacar o Aceitar).
   Fundo #0a2342, texto #e3e9f3 (12,9:1), botões brancos com texto #0a2342 (15,8:1), link branco sublinhado. */
.mt .cookie-banner { gap: 14px 28px; padding: 16px max(24px, calc((100% - 1240px) / 2 + 24px)); background: var(--mt-navy); border-top: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 -10px 30px rgba(10, 35, 66, 0.28); font-family: var(--mt-inter); font-size: 14.5px; line-height: 1.5; color: #e3e9f3; }
.mt .cookie-banner p { max-width: 880px; }
.mt .cookie-banner a, .mt .cookie-banner a:hover { color: #fff; text-decoration: underline; font-weight: 600; }
.mt .cookie-banner-actions { gap: 12px; }
.mt .cookie-banner-btn { flex: 0 0 auto; width: 128px; min-height: 46px; padding: 0 18px; border: 2px solid #fff; border-radius: 10px; background: #fff; color: var(--mt-navy); font-family: var(--mt-inter); font-size: 15px; font-weight: 700; letter-spacing: 0.3px; }
.mt .cookie-banner-btn:hover { background: #e3e9f3; border-color: #e3e9f3; color: var(--mt-navy); }
.mt .cookie-banner-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* Com o banner aberto, o botão do WhatsApp (e, no celular, a barra fixa) sobem para ficar acima dele; o fim da página ganha o espaço. */
.mt .whatsapp-float { bottom: calc(var(--hc-banner-h, 0px) + 20px); }

/* ---------- Animações ---------- */
@keyframes mt-draw { to { stroke-dashoffset: 0; } }
.mt-draw { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: mt-draw 2.8s cubic-bezier(0.6, 0.1, 0.2, 1) forwards; }
.mt-d2 { animation-delay: 0.5s; }
@keyframes mt-spin { to { transform: rotate(360deg); } }
.mt-spin { transform-box: fill-box; transform-origin: center; animation: mt-spin 1.1s linear infinite; }
@keyframes mt-scan { 0% { transform: translateX(0); } 100% { transform: translateX(500px); } }
/* a linha varre a moto de um lado a outro e volta, sem parar (como na maquete); só transform, leve no celular */
.mt-scan { animation: mt-scan 3.4s ease-in-out infinite alternate; will-change: transform; }
/* hero fora da tela (motos.js liga .is-fora): todas as animações do hero pausam e retomam ao voltar */
.mt-hero.is-fora *, .mt-hero.is-fora *::before, .mt-hero.is-fora *::after { animation-play-state: paused !important; }
@keyframes mt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.mt-pulse { animation: mt-pulse 1.3s ease-in-out infinite; }
@keyframes mt-speed { to { stroke-dashoffset: -80; } }
.mt-speed { stroke-dasharray: 40 40; animation: mt-speed 0.7s linear infinite; }
@keyframes mt-ring { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes mt-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes mt-wordin { from { opacity: 0; transform: translateY(45%); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes mt-fadein { from { opacity: 0; } }
.mt-fade { animation: mt-fadein 0.8s 1.6s both; }
@keyframes mt-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.mt-float1 { animation: mt-float 4.6s ease-in-out infinite; }
.mt-float2 { animation: mt-float 5.4s 0.8s ease-in-out infinite; }
.mt-float3 { animation: mt-float 5s 1.6s ease-in-out infinite; }

/* Sem movimento: tudo parado, ilustração desenhada, anel do card estático (o base.css só encurta; aqui desliga de vez) */
@media (prefers-reduced-motion: reduce) {
  .mt *, .mt *::before, .mt *::after { animation: none !important; transition: none !important; }
  .mt-draw { stroke-dashoffset: 0; }
  .mt-scan { transform: translateX(500px); } /* parada à direita, junto ao rótulo do Leilão; sem loop */
  #plans-grid .plan-folder:hover, .mt-step:hover { transform: none; }
}

/* ---------- Telas menores ---------- */
@media (max-width: 980px) {
  #plans-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  #plans-grid .plan-folder.is-featured { order: -1; }
  .mt-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  body.mt { padding-bottom: 84px; }
  .mt-nl { display: none; }
  .mt-header-in { flex-wrap: nowrap; }
  .mt-logo-box { --lh: 36px; }
  .mt-brand { gap: 8px; }
  .mt-brand-tag { padding-left: 8px; font-size: 13px; letter-spacing: 1.6px; }
  .mt-pill { padding: 9px 12px; font-size: 12px; white-space: nowrap; }
  #plans-grid .plan-folder { padding: 24px 22px; }
  #plans-grid .plan-price, #plans-grid .plan-folder.is-featured .plan-price { font-size: 38px; flex-wrap: wrap; gap: 2px 8px; }
  .mt-selo { font-size: 11px; letter-spacing: 1px; padding: 5px 10px; white-space: nowrap; }
  .mt-hero-in { padding: 28px 18px 56px; gap: 28px; }
  .mt-h1 { font-size: min(40px, 8.6vw); letter-spacing: -1.2px; }
  .mt-sub { font-size: 17px; }
  .mt-chip { padding: 7px 10px; font-size: 12px; gap: 7px; }
  .mt-chip-ic { width: 24px; height: 24px; }
  /* testada a mesma disposição do desktop (rótulos menores): em 390 px o Leilão cobre o tanque e o Gravame cobre o motor.
     Por isso, no celular, os rótulos ficam em fileira abaixo da moto. */
  .mt-art-box { display: flex; flex-wrap: wrap; gap: 8px; }
  .mt-moto { flex: 0 0 100%; }
  .mt-chip { position: static; }
  .mt-ex { position: static; flex: 0 0 100%; text-align: right; }
  .mt-stats { gap: 10px; }
  .mt-stat-n { font-size: 38px; }
  .mt-stat-l { font-size: 13px; }
  .mt-sec, .mt-sec-cream { padding: 64px 0; }
  .mt-steps { grid-template-columns: 1fr; }
  .mt-plate-input { font-size: 34px; }
  .mt-faq-item { padding: 16px 18px; }
  .mt-faq-item summary { font-size: 16px; }

  .g-sticky {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    /* direita livre para o botão flutuante do WhatsApp (fixo no canto) não cobrir o botão */
    padding: 10px 84px calc(10px + env(safe-area-inset-bottom)) 14px;
    background: #fff;
    border-top: 1px solid var(--mt-line);
    box-shadow: 0 -10px 30px rgba(10, 35, 66, 0.12);
    transform: translateY(110%);
    transition: transform 0.2s ease;
  }
  .g-sticky.is-visible { transform: translateY(0); }
  .mt .g-sticky { bottom: var(--hc-banner-h, 0px); }
  body.mt { padding-bottom: calc(84px + var(--hc-banner-h, 0px)) !important; }
  .mt .cookie-banner-actions { width: 100%; }
  .mt .cookie-banner-btn { flex: 1 1 0; width: auto; }
  .mt .whatsapp-float { bottom: calc(var(--hc-banner-h, 0px) + 14px); }
  .g-sticky-preco { display: flex; flex-direction: column; line-height: 1.2; font-size: 12px; color: #5b6577; }
  .g-sticky-preco strong { font-family: var(--mt-sora); font-size: 20px; color: var(--mt-navy); }
  .g-sticky .mt-btn-red { flex: 1 1 auto; min-height: 52px; font-size: 14px; padding: 0 12px; max-width: 200px; }
}

/* Celulares estreitos: o botão do cabeçalho some (a barra fixa de baixo já tem o "Consultar placa") e o logo mantém "MOTOS" legível */
@media (max-width: 520px) {
  .mt-pill { display: none; }
  .mt-logo-box { --lh: 38px; }
}