body{margin:0;background:#162542;font-family:"IBM Plex Sans",system-ui,sans-serif;color:#eaf4fd;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#8cb8ff;text-decoration:none}a:hover{color:#ffffff}
.disp{font-family:"Chakra Petch","Saira",sans-serif;text-transform:uppercase;letter-spacing:.02em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.hero-bg{background-image:linear-gradient(180deg,rgba(22,37,66,.78) 0%,rgba(22,37,66,.92) 70%,#162542 100%),url(../assets/img/foto-cidade.jpg);background-size:cover;background-position:center}
.grid-bg{background-image:linear-gradient(rgba(234,244,253,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(234,244,253,.045) 1px,transparent 1px);background-size:56px 56px}
.grid-persp{background-image:linear-gradient(rgba(19,108,252,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(19,108,252,.35) 1px,transparent 1px);background-size:64px 64px;transform:perspective(600px) rotateX(62deg);transform-origin:center top;-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 80%);mask-image:linear-gradient(180deg,#000 0%,transparent 80%)}
.glow{background:radial-gradient(circle at 50% 50%,rgba(19,108,252,.55) 0%,rgba(30,60,124,.25) 40%,transparent 70%)}
.sweep{background:conic-gradient(from 0deg,rgba(19,108,252,0) 0deg,rgba(19,108,252,0) 290deg,rgba(19,108,252,.55) 360deg);animation:spin 6s linear infinite}
.ping{animation:ping 3.2s ease-out infinite}
.ping2{animation:ping 3.2s ease-out 1.1s infinite}
.ping3{animation:ping 3.2s ease-out 2.2s infinite}
.pulse{animation:pulse 2.4s ease-in-out infinite}
.ring{animation:ring 2.6s ease-out infinite}
.marquee{animation:marquee 32s linear infinite}
.scan{animation:scan 3.6s ease-in-out infinite}
.blink{animation:blink 1.6s steps(2,start) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(.4);opacity:0}15%{opacity:1}100%{transform:scale(2.4);opacity:0}}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(19,108,252,.55)}100%{box-shadow:0 0 0 18px rgba(19,108,252,0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes scan{0%,100%{transform:translateY(0)}50%{transform:translateY(120px)}}
@keyframes blink{to{visibility:hidden}}
.btn-p{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn-p:hover{background:#2a7bff !important;box-shadow:0 0 44px rgba(19,108,252,.55) !important;transform:translateY(-1px);color:#fff}
.btn-g{transition:background .2s ease,border-color .2s ease}
.btn-g:hover{background:rgba(234,244,253,.1) !important;border-color:rgba(234,244,253,.5) !important;color:#fff}
.card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.card:hover{transform:translateY(-4px);border-color:#136cfc !important;box-shadow:0 18px 50px rgba(19,108,252,.22)}
.card-l{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card-l:hover{transform:translateY(-4px);border-color:#136cfc !important;box-shadow:0 18px 40px rgba(22,37,66,.14)}
.nav a{color:rgba(234,244,253,.78)}.nav a:hover{color:#fff}
.photo-sec{background-image:linear-gradient(180deg,rgba(22,37,66,.15),rgba(22,37,66,.85)),url(../assets/img/foto-central.jpg);background-size:cover;background-position:center}
.photo-gestor{background-image:linear-gradient(90deg,rgba(234,244,253,0) 82%,#eaf4fd 100%),url(../assets/img/foto-equipe.jpg);background-size:cover;background-position:center 25%}
.photo-cam{background-image:linear-gradient(135deg,rgba(22,37,66,.92) 20%,rgba(19,108,252,.55) 100%),url(../assets/img/foto-camera.jpg);background-size:cover;background-position:center}
.photo-eye{background-image:linear-gradient(180deg,rgba(22,37,66,.92),rgba(22,37,66,.97)),url(../assets/img/foto-olho.jpg);background-size:cover;background-position:center}
.cta-bg{background:radial-gradient(ellipse at 80% 20%,rgba(19,108,252,.65) 0%,rgba(30,60,124,.6) 35%,#162542 75%)}
.field{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid #c9dcf2;background:#ffffff;font:inherit;font-size:15px;color:#162542;outline:none;transition:border-color .2s,box-shadow .2s}
.field:focus{border-color:#136cfc;box-shadow:0 0 0 4px rgba(19,108,252,.15)}
button:focus-visible,a:focus-visible,.field:focus-visible{outline:3px solid #136cfc;outline-offset:3px}
.srv-bg{background-size:cover;background-position:center}
.srv-portaria{background-image:linear-gradient(180deg,rgba(22,37,66,.25) 0%,rgba(22,37,66,.78) 45%,rgba(22,37,66,.96) 100%),url(../assets/img/servico-portaria.jpg)}
.srv-gerais{background-image:linear-gradient(180deg,rgba(22,37,66,.15) 0%,rgba(22,37,66,.55) 40%,rgba(22,37,66,.95) 72%,#162542 100%),url(../assets/img/servico-limpeza.jpg);background-position:center 22%}
.srv-vigilancia{background-image:linear-gradient(180deg,rgba(22,37,66,.25) 0%,rgba(22,37,66,.78) 45%,rgba(22,37,66,.96) 100%),url(../assets/img/servico-vigilancia.jpg)}
.srv-recepcao{background-image:linear-gradient(180deg,rgba(22,37,66,.15) 0%,rgba(22,37,66,.55) 40%,rgba(22,37,66,.95) 72%,#162542 100%),url(../assets/img/servico-recepcao.jpg);background-position:55% 12%}
.photo-sec,.srv-bg,.photo-gestor,.photo-cam,.photo-eye,.hero-bg{background-origin:border-box;background-repeat:no-repeat}
.srv-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr);gap:20px}
.srv-main{grid-row:span 2}
@media (max-width:1000px){.srv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.srv-main{grid-column:span 2;grid-row:auto}}
@media (max-width:620px){.srv-grid{grid-template-columns:minmax(0,1fr)}.srv-main{grid-column:auto}}
.spin-slow{animation:spin 40s linear infinite}
.spin-rev{animation:spin 60s linear infinite reverse}
.sweep-line{animation:spin 6s linear infinite;transform-origin:50% 100%}
.blip{animation:blip 6s ease-out infinite;opacity:0}
@keyframes blip{0%{transform:scale(.5);opacity:1}55%{transform:scale(2.6);opacity:0}100%{opacity:0}}
.dotflash{animation:dotflash 6s ease-out infinite}
@keyframes dotflash{0%{opacity:1;box-shadow:0 0 18px 4px #8cb8ff}45%,100%{opacity:.4;box-shadow:0 0 0 0 transparent}}
.flow{stroke-dasharray:4 8;animation:flow 1.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
.glowpulse{animation:glowpulse 2.4s ease-in-out infinite}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 0 rgba(79,147,255,0)}50%{box-shadow:0 0 24px 8px rgba(79,147,255,.55)}}
.shine{position:relative}
.shine::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.14) 50%,transparent 65%);transform:translateX(-110%);transition:transform .9s ease}
.shine:hover::after{transform:translateX(110%)}
.card:hover .ico{animation:ring 1.4s ease-out infinite}
.card:hover svg rect[fill]{animation:pulse 1.1s ease-in-out infinite}
.travel{animation:travel 8s linear infinite}
@keyframes travel{0%{left:28px;opacity:0}4%{opacity:1}92%{opacity:1}100%{left:calc(100% - 28px);opacity:0}}
.stepn{animation:stepglow 8s linear infinite}
@keyframes stepglow{0%,9%{background:#136cfc;transform:scale(1.1)}16%,100%{background:#162542;transform:none}}
.pill{transition:background .2s,color .2s,transform .2s,border-color .2s}
.pill:hover{background:#136cfc !important;border-color:#136cfc !important;color:#fff !important;transform:translateY(-2px)}
.pill:hover svg{stroke:#fff}
.city-btn{transition:background .2s,border-color .2s,color .2s}
.city-btn:hover{border-color:#4f93ff !important;color:#fff !important}
.menu-btn{display:none;width:44px;height:44px;border-radius:50%;border:1px solid rgba(234,244,253,.22);background:transparent;cursor:pointer;align-items:center;justify-content:center;color:#eaf4fd}
@media (max-width:900px){
.menu-btn{display:inline-flex;margin-left:auto}
.hdr-cta{display:none !important}
.nav{display:none !important;flex-basis:100%;flex-direction:column;gap:2px !important;padding:6px 4px 12px}
.nav.is-open{display:flex !important}
.nav a{padding:12px;border-radius:12px;font-size:16px}
.hdr-pill{border-radius:26px !important}
}
@media (max-width:640px){
section[style*="padding: 120px 24px"]{padding:72px 20px !important}
.hero-sec{padding:132px 20px 48px !important;min-height:0 !important}
/* ---- Mobile (até 640px) ---- */
h2.disp{font-size:30px !important;line-height:1.08 !important}
section[style*="padding: 120px 24px"] > div{gap:36px !important}
/* Hero */
.hero-row{gap:36px !important}
.hero-badge{padding:7px 12px !important}
.hero-badge .mono{font-size:9.5px !important;letter-spacing:.06em !important;white-space:nowrap}
.hero-sec h1{font-size:32px !important;line-height:1.05 !important}
.hero-sec p{font-size:17px !important}
.hero-ctas{flex-direction:column;gap:12px !important}
.hero-ctas a{justify-content:center;width:100%;min-height:52px !important}
.radar-box{width:min(250px,66vw) !important}
.radar-tag,.spin-rev{display:none !important}
.stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important;margin-top:40px !important}
.stats > div{padding:16px !important}
.stats .disp{font-size:26px !important}
/* Serviços: foto em faixa no topo, texto abaixo (sem sobreposição) */
.srv-grid{gap:16px !important}
.srv-grid > article{background-image:none !important;background-color:#1a2b4c !important;padding:0 0 24px !important;min-height:0 !important;justify-content:flex-start !important;gap:12px !important}
.srv-grid > article > *{margin-left:22px !important;margin-right:22px !important}
.srv-grid > article::before{content:"";display:block;aspect-ratio:16/10;margin-bottom:6px;background-size:cover;background-repeat:no-repeat;background-position:center}
.photo-sec::before{background-image:url(../assets/img/foto-central.jpg)}
.srv-portaria::before{background-image:url(../assets/img/servico-portaria.jpg)}
.srv-gerais::before{background-image:url(../assets/img/servico-limpeza.jpg);background-position:center 22% !important}
.srv-vigilancia::before{background-image:url(../assets/img/servico-vigilancia.jpg)}
.srv-recepcao::before{background-image:url(../assets/img/servico-recepcao.jpg);background-position:55% 12% !important}
.srv-grid .ico{display:none !important}
.srv-main h3{font-size:26px !important}
.srv-main > div{gap:10px !important}
/* Jeito Arena */
.jeito > div:nth-child(2){padding:14px !important;gap:12px !important}
.jeito > div:nth-child(2) > div{padding:18px !important}
.jeito > div:last-child{margin:0 14px 14px !important;min-height:140px !important;padding:22px 18px !important}
.jeito > div:last-child > div[aria-hidden]{right:-150px !important;opacity:.55}
.jeito > div:last-child p{font-size:20px !important}
/* Como funciona: número ao lado do card */
#como-funciona{padding-bottom:24px !important}
#como-funciona ol{gap:14px !important}
#como-funciona ol > li{flex-direction:row !important;align-items:flex-start;gap:14px !important}
#como-funciona .stepn{flex:none;width:44px !important;height:44px !important;border-radius:14px !important;font-size:16px !important;box-shadow:0 0 0 4px #eaf4fd,0 8px 20px rgba(22,37,66,.2) !important}
#como-funciona .card-l{padding:18px !important;gap:6px !important}
#como-funciona .card-l h3{font-size:17px !important}
#como-funciona .card-l p{font-size:14px !important}
.tl-line,.travel{display:none !important}
section[aria-label="Clientes"]{padding:40px 0 48px !important}
section[aria-label="Clientes"] .marquee > div{width:150px !important;height:56px !important;font-size:12px !important}
/* Segmentos: ilustração no topo do card, texto abaixo */
.seg-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important}
.seg-grid > article{min-height:0 !important;padding:14px 16px 18px !important;justify-content:flex-start !important;gap:6px !important}
.seg-grid > article svg{position:static !important;display:block;width:100% !important;height:96px !important;margin-bottom:8px}
.seg-grid > article:last-child{grid-column:span 2}
.seg-grid h3{font-size:15px !important;line-height:1.15}
.seg-grid p{font-size:13px !important}
/* Propósito */
.purpose-txt{padding:56px 20px 64px !important;gap:22px !important}
.purpose-photo{min-height:300px !important}
.purpose-txt > img{height:300px !important;right:-80px !important}
.pill{padding:10px 14px !important;font-size:14px !important}
/* Depoimentos e contato */
figure.card{padding:24px !important}
figure.card blockquote{font-size:16px !important}
.form-card{padding:22px !important;border-radius:22px !important}
.ct-val{word-break:break-word}
/* Mapa: sem painel sobreposto; a cidade ativa já aparece nos botões */
.map-box{aspect-ratio:4/3 !important;border-radius:20px !important}
.map-panel,.mk-label,.map-note,.map-box [data-city] .v-on span.mono{display:none !important}
/* Rodapé mais compacto */
footer{padding:56px 20px 96px !important}
footer > div{gap:36px !important}
footer nav[aria-label="Rodapé"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:28px 16px !important}
footer nav[aria-label="Rodapé"] > div:last-child{grid-column:span 2}
footer img[alt="Arena Multisserviços"]{height:72px !important}
.wa-float{width:52px !important;height:52px !important;right:16px !important;bottom:16px !important}
}
@media (prefers-reduced-motion:reduce){.spin-slow,.spin-rev,.sweep-line,.blip,.dotflash,.flow,.glowpulse,.travel,.stepn{animation:none}.blip{opacity:0}}
@media (prefers-reduced-motion:reduce){.sweep,.ping,.ping2,.ping3,.pulse,.ring,.marquee,.scan,.blink{animation:none}}

[hidden]{display:none !important}
.v-on{display:none}.v-off{display:contents}
[data-city].is-active .v-on{display:contents}[data-city].is-active .v-off{display:none}

.chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #b8cde8;background:#fff;color:#1e3c7c;font:inherit;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s,border-color .2s,color .2s}
.chip .chip-check{display:none}
.chip[aria-pressed="true"]{background:#136cfc;border-color:#136cfc;color:#fff;font-weight:600}
.chip[aria-pressed="true"] .chip-check{display:block}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-visible{opacity:1;transform:none}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}