/* Estilo compartilhado das páginas de serviço — mesmas cores e fontes da index.html */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0B0C0D; color: #F2F2F0; font-family: Archivo, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #4C8DFF; text-decoration: none; }
a:hover { color: #8CB6FF; }
img { max-width: 100%; }
body::before { content: ''; position: fixed; inset: -25%; z-index: 0; pointer-events: none; background-image: radial-gradient(38% 30% at 22% 26%, rgba(30,107,255,0.30), transparent 66%), radial-gradient(34% 28% at 74% 62%, rgba(30,107,255,0.20), transparent 68%), radial-gradient(30% 26% at 52% 88%, rgba(94,150,255,0.14), transparent 70%); filter: blur(70px); animation: omAurora 34s ease-in-out infinite alternate; }
@keyframes omAurora { 0% { transform: translate3d(-4%, -3%, 0) scale(1); } 50% { transform: translate3d(5%, 4%, 0) scale(1.14); } 100% { transform: translate3d(-3%, 6%, 0) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } html { scroll-behavior: auto; } }

.pg { position: relative; z-index: 1; max-width: 100%; overflow-x: hidden; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }

/* Topo + hero */
.hero { background-size: cover; background-position: center 40%; padding-bottom: clamp(64px, 9vw, 120px); }
.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: clamp(20px, 3vw, 32px); padding-bottom: clamp(20px, 3vw, 32px); }
.topo img { display: block; width: clamp(130px, 14vw, 190px); height: auto; }
.topo-cta { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #C9CBCD; border: 1px solid rgba(242,242,240,0.22); border-radius: 2px; padding: 10px 14px; white-space: nowrap; }
.topo-cta:hover { color: #fff; border-color: rgba(242,242,240,0.5); }
@media (max-width: 480px) { .topo-cta .longo { display: none; } }

.trilha { display: flex; flex-wrap: wrap; gap: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #7E8286; margin: clamp(28px, 6vw, 72px) 0 clamp(20px, 3vw, 28px); }
.trilha a { color: #8A8D90; }
.trilha a:hover { color: #4C8DFF; }

.selo { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid rgba(242,242,240,0.22); border-radius: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #C9CBCD; margin-bottom: clamp(20px, 3vw, 28px); }
.selo::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #1E6BFF; }

h1 { font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(34px, 6vw, 68px); line-height: 1; letter-spacing: -0.025em; margin: 0 0 clamp(20px, 3vw, 28px); max-width: 920px; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,0.85); }
.lead { font-size: clamp(17px, 2vw, 22px); line-height: 1.5; color: #BFC2C5; max-width: 720px; margin: 0 0 clamp(28px, 4vw, 40px); text-wrap: pretty; text-shadow: 0 2px 18px rgba(0,0,0,0.8); }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

.btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; background: #1E6BFF; color: #fff; border-radius: 2px; font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(14px, 1.6vw, 16px); letter-spacing: 0.05em; text-transform: uppercase; }
.btn:hover { background: #0F55DB; color: #fff; }
.btn-sec { display: inline-flex; align-items: center; gap: 12px; padding: 17px 28px; border: 1px solid rgba(242,242,240,0.3); color: #F2F2F0; border-radius: 2px; font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(14px, 1.6vw, 16px); letter-spacing: 0.05em; text-transform: uppercase; }
.btn-sec:hover { border-color: rgba(242,242,240,0.6); color: #fff; }
.tel { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #8A8D90; }
.tel:hover { color: #4C8DFF; }

/* Seções */
.secao { padding: clamp(56px, 8vw, 112px) 0; border-top: 1px solid rgba(242,242,240,0.08); }
.faixa { background: linear-gradient(180deg, rgba(242,242,240,0) 0%, rgba(242,242,240,0.035) 14%, rgba(242,242,240,0.035) 86%, rgba(242,242,240,0) 100%); }
.rotulo { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #1E6BFF; margin-bottom: 20px; }
h2 { font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(26px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 clamp(28px, 4vw, 44px); max-width: 780px; text-wrap: balance; }

.texto { display: flex; flex-direction: column; gap: 20px; font-size: clamp(16px, 1.85vw, 18px); line-height: 1.65; color: #BFC2C5; max-width: 760px; }
.texto p { margin: 0; text-wrap: pretty; }
.texto strong { color: #F2F2F0; font-weight: 600; }
.destaque { color: #F2F2F0; font-weight: 600; border-left: 2px solid #1E6BFF; padding-left: 20px; }

.fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: clamp(40px, 5vw, 60px); }
.fotos figure { margin: 0; position: relative; border-radius: 2px; overflow: hidden; background: #131517; }
.fotos img { display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; filter: saturate(0.85); }
.fotos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 44px 16px 14px; background: linear-gradient(to top, rgba(11,12,13,0.92), rgba(11,12,13,0)); font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.5; color: #E4E5E6; }

.sinais { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 clamp(28px, 4vw, 56px); }
.sinais li { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid rgba(242,242,240,0.12); font-size: clamp(15px, 1.7vw, 17px); line-height: 1.5; color: #E4E5E6; text-wrap: pretty; }
.sinais li::before { content: ''; flex: 0 0 6px; height: 6px; margin-top: 0.6em; border-radius: 50%; background: #1E6BFF; }
.nota { margin: clamp(28px, 4vw, 40px) 0 0; max-width: 760px; font-size: clamp(15px, 1.75vw, 17px); line-height: 1.65; color: #BFC2C5; text-wrap: pretty; }

.passos { list-style: none; padding: 0; margin: 0; counter-reset: passo; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(28px, 3vw, 40px) clamp(28px, 3.4vw, 48px); }
.passos li { counter-increment: passo; border-top: 1px solid rgba(242,242,240,0.14); padding-top: 20px; }
.passos li::before { content: counter(passo, decimal-leading-zero); display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.2em; color: #1E6BFF; margin-bottom: 14px; }
.passos h3 { font-family: Archivo, sans-serif; font-weight: 700; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.3; letter-spacing: -0.01em; margin: 0 0 10px; color: #F2F2F0; }
.passos p { margin: 0; font-size: 15px; line-height: 1.6; color: #8A8D90; text-wrap: pretty; }

/* Cartões de serviço com link (página de aplicativo e frotas) */
.cards-servico { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(10px, 1.2vw, 14px); }
.cards-servico a { display: block; padding: clamp(22px, 2.6vw, 28px); border: 1px solid rgba(242,242,240,0.1); border-radius: 2px; color: #8A8D90; }
.cards-servico a:hover { border-color: rgba(242,242,240,0.28); color: #BFC2C5; }
.cards-servico h3 { display: flex; justify-content: space-between; gap: 12px; font-family: Archivo, sans-serif; font-weight: 700; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.3; margin: 0 0 10px; color: #F2F2F0; }
.cards-servico h3::after { content: '→'; color: #1E6BFF; }
.cards-servico p { margin: 0; font-size: 15px; line-height: 1.6; text-wrap: pretty; }

.duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(14px, 2vw, 24px); }
.cartao { display: flex; flex-direction: column; gap: 24px; padding: clamp(24px, 3.4vw, 40px); border: 1px solid rgba(242,242,240,0.14); border-radius: 2px; background: rgba(242,242,240,0.02); }
.cartao h3 { font-family: Archivo, sans-serif; font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; letter-spacing: -0.015em; margin: 0; }
.cartao .sinais { grid-template-columns: 1fr; flex: 1; }
.cartao .btn, .cartao .btn-sec { align-self: flex-start; }

.faq { max-width: 840px; border-top: 1px solid rgba(242,242,240,0.14); }
.faq details { border-bottom: 1px solid rgba(242,242,240,0.14); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-weight: 600; font-size: clamp(16px, 1.9vw, 19px); line-height: 1.35; color: #F2F2F0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: #8CB6FF; }
.faq .mais { flex: 0 0 auto; color: #1E6BFF; font-size: 24px; line-height: 1; transition: transform 0.2s; }
.faq details[open] .mais { transform: rotate(45deg); }
.faq .resp { padding: 0 0 24px; max-width: 740px; font-size: clamp(15px, 1.75vw, 17px); line-height: 1.65; color: #BFC2C5; }
.faq .resp p { margin: 0; text-wrap: pretty; }

.cta { padding: clamp(52px, 7vw, 88px) 0; border-top: 1px solid rgba(242,242,240,0.08); }
.cta .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(24px, 3vw, 44px); }
.cta p { margin: 0; flex: 1 1 360px; max-width: 620px; font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.25; letter-spacing: -0.015em; color: #BFC2C5; text-wrap: pretty; }

.outros { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(10px, 1.2vw, 14px); }
.outros a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: clamp(20px, 2.4vw, 26px) 20px; border: 1px solid rgba(242,242,240,0.1); border-radius: 2px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.4; color: #9EA2A6; }
.outros a:hover { border-color: rgba(242,242,240,0.24); color: #F2F2F0; }

/* Rodapé */
.rodape { padding: clamp(48px, 7vw, 88px) 0 clamp(100px, 12vw, 64px); border-top: 1px solid rgba(242,242,240,0.1); }
.rodape-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: clamp(28px, 4vw, 48px); align-items: start; }
.rodape-grid img { display: block; width: 200px; max-width: 100%; height: auto; }
.mini { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: #5A5E62; margin-bottom: 14px; }
.rodape p { margin: 0; font-size: 16px; line-height: 1.6; color: #E4E5E6; }
.rodape-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.rodape-links a, .rodape p a { font-size: 16px; line-height: 1.5; color: #E4E5E6; }
.rodape-links a:hover, .rodape p a:hover { color: #4C8DFF; }
.link-mono { display: inline-block; margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #8A8D90; }
.link-mono:hover { color: #4C8DFF; }
.rodape-base { margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid rgba(242,242,240,0.1); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.1em; }
.rodape-base p { font-family: inherit; font-size: inherit; color: #5A5E62; }
.rodape-base a { color: #8A8D90; }
.rodape-base a:hover { color: #4C8DFF; }

.flutuante { position: fixed; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 16px 22px; background: #1E6BFF; color: #fff; border-radius: 2px; font-family: Archivo, sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; box-shadow: 0 12px 32px rgba(0,0,0,0.5); }
.flutuante:hover { background: #0F55DB; color: #fff; }