.alt{background:var(--bg2)}
.sec h2{margin-top:14px}

/* filters */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:44px 0 34px}
.chip{padding:10px 20px;border-radius:99px;border:1.5px solid var(--line);font-weight:700;font-size:14px;transition:.25s}
.chip:hover{border-color:var(--ember2)}
.chip.on{background:var(--sand);color:#160a04;border-color:var(--sand)}
input,select,textarea{width:100%;background:#ffffff0d;border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;color:var(--sand);font:inherit;font-size:16px;transition:border-color .2s,background .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember2);background:#ffffff14}
select option{background:#201b16}
.filters input{max-width:300px;margin-left:auto;border-radius:99px}
@media(max-width:700px){.filters input{max-width:none;margin-left:0;flex:1 1 100%}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transform-style:preserve-3d;transition:border-color .3s,box-shadow .4s,opacity .4s;will-change:transform}
.card:hover{border-color:var(--ember);box-shadow:0 30px 60px -30px #ff5a1f66}
.card .ph{height:190px;background-size:cover;background-position:center;position:relative;overflow:hidden}
.card .ph:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,#201b16)}
.card .ph i{position:absolute;left:16px;top:16px;z-index:1;font-style:normal;font-family:var(--f-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:99px;background:#12100dcc;border:1px solid var(--line)}
.card .bd{padding:6px 22px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h3{font-size:34px}
.card .loc{color:var(--mute);font-size:14px}
.card .meta{display:flex;gap:16px;font-family:var(--f-m);font-size:12px;color:var(--sand);flex-wrap:wrap}
.card .row{display:flex;gap:10px;margin-top:auto;padding-top:12px}
.card .row .btn{flex:1;justify-content:center}
.card.out{display:none}
.empty{color:var(--mute);margin-top:20px}
.t-leve{--tc:#7bd88f}.t-media{--tc:#ffb020}.t-pesada{--tc:#ff4a3a}
.card .ph i{color:var(--tc)}

/* map */
.mapbox{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;margin-top:50px;align-items:stretch}
.map{position:relative;background:radial-gradient(60% 60% at 50% 40%,#2a2218,#1a1612);border:1px solid var(--line);border-radius:var(--r);padding:20px;overflow:hidden}
.map svg{width:100%;height:auto;display:block}
#mapgrid line{stroke:#ffffff0d}
#br{fill:#2b2318;stroke:#ffffff30;stroke-width:1.5;stroke-linejoin:round}
.pin{cursor:pointer;outline:none}
.pin circle.c{transition:r .3s,fill .3s}
.pin .pulse{fill:none;stroke-width:2;animation:pl 2.2s infinite;transform-box:fill-box;transform-origin:center}
@keyframes pl{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
.pin:hover circle.c,.pin:focus circle.c,.pin.on circle.c{r:12}
.pin.on circle.c{stroke:#fff;stroke-width:3}
.pin.dim{opacity:.18}
.legend{position:absolute;left:20px;bottom:16px;display:flex;gap:16px;font-size:11px;color:var(--mute)}
.legend .d{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.d.leve{background:#7bd88f}.d.media{background:#ffb020}.d.pesada{background:#ff4a3a}
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:30px;display:flex;flex-direction:column;gap:14px}
.panel h3{font-size:clamp(40px,5vw,64px)}
.panel p{color:var(--mute)}
.panel .bar{height:8px;border-radius:9px;background:#ffffff14;overflow:hidden}
.panel .bar b{display:block;height:100%;background:linear-gradient(90deg,var(--ember2),var(--ember));width:0;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.panel .kv{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.panel .kv div{background:#ffffff0a;border-radius:12px;padding:12px 14px}
.panel .kv small{display:block;font-family:var(--f-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.panel .kv b{font-family:var(--f-d);font-size:28px;font-weight:800}
.panel .btn{align-self:flex-start;margin-top:auto}
@media(max-width:900px){.mapbox{grid-template-columns:1fr}}

/* roles */
.roles{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;margin-top:50px;align-items:start}
.list{display:flex;flex-direction:column;gap:14px}
.role{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;transition:border-color .3s,transform .3s}
.role:hover{border-color:var(--ember2);transform:translateX(6px)}
.role .dt{text-align:center;font-family:var(--f-d);font-weight:800;line-height:1;min-width:60px}
.role .dt b{display:block;font-size:44px;color:var(--ember)}
.role .dt span{font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.role h4{font-family:var(--f-d);font-size:28px;text-transform:uppercase;line-height:1}
.role p{color:var(--mute);font-size:14px;margin-top:4px}
.role .slots{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap}
.role .slots i{width:14px;height:14px;border-radius:4px;background:#ffffff1c}
.role .slots i.f{background:var(--ember)}
.role .btn{padding:11px 20px;font-size:14px;white-space:nowrap}
.role .btn.joined{background:transparent;border:1.5px solid var(--ok);color:var(--ok)}
.role.new{animation:flash 1.4s}
@keyframes flash{0%{background:#ff5a1f55}100%{background:var(--card)}}
@media(max-width:900px){.roles{grid-template-columns:1fr}}
@media(max-width:520px){.role{grid-template-columns:1fr;gap:12px}.role .dt{text-align:left;display:flex;gap:10px;align-items:baseline}.role .btn{width:100%;justify-content:center}}

.form{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:16px}
.form h3{font-size:36px}
.form label{display:flex;flex-direction:column;gap:6px;font-family:var(--f-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.form label input,.form label select,.form label textarea{font-family:var(--f-b);text-transform:none;letter-spacing:0;color:var(--sand)}
.two{display:grid;grid-template-columns:1fr 1.4fr;gap:12px}
.form .btn{justify-content:center}
.msg{min-height:1.5em;font-size:14px;color:var(--ok)}
.msg.err{color:#ff7a6a}
.bad{border-color:#ff5a4a !important}

/* pilots */
.pilots{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:50px}
.pilot{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:12px;transition:.3s}
.pilot:hover{transform:translateY(-6px);border-color:var(--ember2)}
.av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-d);font-weight:900;font-size:30px;color:#160a04;background:linear-gradient(135deg,var(--ember2),var(--ember))}
.pilot h4{font-family:var(--f-d);font-size:30px;text-transform:uppercase;line-height:1}
.pilot p{color:var(--mute);font-size:14px}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tags span{font-family:var(--f-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:99px;border:1px solid var(--line);color:var(--mute)}
.pilot .btn{justify-content:center;margin-top:auto}
.pilot .btn.joined{background:transparent;border:1.5px solid var(--ok);color:var(--ok)}

/* feed */
.feedbox{display:grid;grid-template-columns:1fr 1.4fr;gap:28px;margin-top:50px;align-items:start}
.form textarea{resize:vertical;min-height:90px}
.posts{display:flex;flex-direction:column;gap:14px}
.post{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 22px;animation:pin .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pin{from{opacity:0;transform:translateY(-14px)}}
.post header{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.post .av{width:38px;height:38px;font-size:18px}
.post header b{font-weight:700}
.post header span{margin-left:auto;font-family:var(--f-m);font-size:11px;color:var(--mute)}
.post p{overflow-wrap:anywhere}
.post .like{margin-top:10px;font-size:14px;color:var(--mute);padding:6px 12px;border-radius:99px;border:1px solid var(--line);transition:.2s}
.post .like.on{color:var(--ember);border-color:var(--ember)}
@media(max-width:900px){.feedbox{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:50px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--f-d);font-weight:800;font-size:clamp(24px,3vw,38px);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:40px;color:var(--ember);transition:transform .3s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--mute);max-width:70ch;padding:0 0 22px}

/* cta */
.cta{overflow:hidden;text-align:center;padding-top:clamp(100px,14vw,200px);padding-bottom:clamp(100px,14vw,200px)}
.ctabg{position:absolute;inset:-10% 0;background:url(img/utv-trilha.webp) center/cover;opacity:.28;will-change:transform}
.cta:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg),transparent 30%,transparent 70%,var(--bg));z-index:1}
.cta .wrap{position:relative;z-index:2}
.join{display:flex;gap:12px;max-width:560px;margin:44px auto 0;flex-wrap:wrap}
.join input{flex:1 1 260px;border-radius:99px}
.cta .msg{margin-top:16px}

footer{border-top:1px solid var(--line);padding:50px 0 90px}
footer .wrap{display:flex;gap:30px;flex-wrap:wrap;justify-content:space-between;align-items:center}
footer p{color:var(--mute);font-size:14px;max-width:60ch}

/* bot */
.botfab{position:fixed;right:20px;bottom:20px;z-index:95;width:62px;height:62px;border-radius:50%;background:var(--ember);font-size:28px;box-shadow:0 10px 40px -6px var(--ember);transition:transform .25s}
.botfab:hover{transform:scale(1.1) rotate(-8deg)}
.bot{position:fixed;right:20px;bottom:96px;z-index:96;width:min(380px,calc(100vw - 40px));max-height:min(540px,70vh);display:flex;flex-direction:column;background:#17130f;border:1px solid var(--line);border-radius:20px;box-shadow:0 30px 80px #000a;overflow:hidden;animation:pin .35s}
.bot[hidden]{display:none}
.bot header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--ember);color:#160a04;font-weight:800}
.bot header button{font-size:18px;width:32px;height:32px}
.botlog{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:160px}
.bm{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;animation:pin .3s}
.bm.b{background:#ffffff12;border-bottom-left-radius:4px}
.bm.u{background:var(--ember);color:#160a04;align-self:flex-end;border-bottom-right-radius:4px}
.botq{display:flex;flex-wrap:wrap;gap:8px;padding:12px 14px 16px;border-top:1px solid var(--line)}
.botq button{font-size:13px;padding:8px 14px;border-radius:99px;border:1.5px solid var(--line);transition:.2s}
.botq button:hover{border-color:var(--ember2);background:#ffffff10}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,120px);background:var(--sand);color:#160a04;padding:14px 24px;border-radius:99px;font-weight:700;z-index:300;transition:transform .45s cubic-bezier(.2,.8,.2,1);max-width:92vw;text-align:center}
.toast.show{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rv{opacity:1;transform:none}
  .hero h1 .ch{transform:none}
}

/* foto da rota no painel do mapa */
.pimg{height:170px;border-radius:14px;margin-bottom:14px;background-size:cover;background-position:center;box-shadow:0 10px 30px rgba(0,0,0,.45);animation:pimgIn .6s ease both}
@keyframes pimgIn{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
.card .ph{background-size:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .ph{transform:scale(1.04)}