/* TEMA "METRÓPOLE" — guinchoproximosaopaulo | roxo profundo + âmbar quente, cards em faixa horizontal */
:root{--bg:#120a1f;--bg2:#1b1030;--pan:#241640;--bd:#3a2560;--tx:#f4eeff;--mu:#a596c4;
--p1:#ffa62b;--p2:#ff5a5f;--p3:#7b61ff;--ok:#1fbf63;--r:20px;--mx:1150px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:16px/1.8 Verdana,Geneva,"DejaVu Sans",sans-serif;color:var(--tx);background:var(--bg);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--p1);text-decoration:none}a:hover{text-decoration:underline}
.wrap{max-width:var(--mx);margin:0 auto;padding:0 20px}
/* fundo: skyline + estrelas + aurora */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
 radial-gradient(900px 560px at 50% -10%,#3a1d63 0%,transparent 60%),
 linear-gradient(180deg,#120a1f,#1b1030 55%,#0d0717)}
.bg .st{position:absolute;inset:0;background-image:radial-gradient(#fff 1px,transparent 1px);
 background-size:120px 120px;opacity:.18;animation:twk 5s ease-in-out infinite}
@keyframes twk{50%{opacity:.4}}
.bg .au{position:absolute;top:-25%;left:-25%;width:150%;height:90%;opacity:.3;filter:blur(60px);
 background:conic-gradient(from 200deg,#ff5a5f,#7b61ff,#ffa62b,#ff5a5f);animation:au 22s linear infinite}
@keyframes au{to{transform:rotate(360deg)}}
.bg .sky{position:absolute;bottom:0;left:0;right:0;height:230px;opacity:.5;
 background:repeating-linear-gradient(90deg,#1b1030 0 26px,transparent 26px 34px,#241640 34px 70px,transparent 70px 76px);
 mask-image:linear-gradient(0deg,#000 20%,transparent);animation:sky 40s linear infinite}
@keyframes sky{to{background-position-x:280px}}
.bg .car{position:absolute;bottom:34px;left:-18%;font-size:30px;animation:car 13s linear infinite;opacity:.55}
@keyframes car{to{left:118%}}
/* topo */
header{position:sticky;top:0;z-index:50;background:rgba(18,10,31,.93);backdrop-filter:blur(12px);
 border-bottom:1px solid var(--bd)}
.bar{display:flex;align-items:center;gap:16px;padding:12px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:16px}
.logo img{width:44px;height:44px;border-radius:50%;background:#fff;padding:3px;animation:sp 9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.logo b{color:var(--p1)}
nav{margin-left:auto}nav ul{display:flex;gap:4px;list-style:none;flex-wrap:wrap}
nav a{display:block;padding:9px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--tx);
 border:1px solid transparent;transition:.25s}
nav a:hover{background:rgba(255,166,43,.14);border-color:var(--p1);color:var(--p1);text-decoration:none}
nav a.on{background:var(--p1);color:#2a1500;border-color:var(--p1)}
.fone{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;
 background:linear-gradient(135deg,var(--p2),var(--p1));color:#2a1500;font-weight:700;
 animation:bt 2.6s ease-in-out infinite}
@keyframes bt{50%{transform:scale(1.045)}}
.fone:hover{text-decoration:none;filter:brightness(1.08)}
/* hero */
.hero{padding:54px 0 32px}
.kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
 color:#2a1500;background:var(--p1);padding:5px 13px;border-radius:999px;margin-bottom:16px}
h1{font-size:clamp(30px,5.4vw,52px);line-height:1.1;font-weight:800;letter-spacing:-1px;color:#fff}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--p1),var(--p2));-webkit-background-clip:text;
 background-clip:text;color:transparent}
.lead{font-size:clamp(16px,2.2vw,19px);color:var(--mu);margin:18px 0 0;max-width:720px}
.stats{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0}
.stat{flex:1 1 140px;padding:16px;border-radius:var(--r);background:var(--pan);border:1px solid var(--bd)}
.stat b{display:block;font-size:22px;color:var(--p1);font-weight:800}
.stat span{font-size:13px;color:var(--mu)}
.acts{display:flex;gap:11px;flex-wrap:wrap}
.bt{display:inline-flex;align-items:center;gap:8px;padding:15px 26px;border-radius:999px;font-weight:700;
 font-size:15px;border:0;cursor:pointer;transition:.25s}
.bt:hover{transform:translateY(-3px);text-decoration:none;filter:brightness(1.07)}
.bt-z{background:var(--ok);color:#fff}.bt-l{background:linear-gradient(135deg,var(--p2),var(--p1));color:#2a1500}
.bt-g{background:transparent;color:var(--tx);border:1px solid var(--bd)}
/* texto */
section{padding:36px 0}
h2{font-size:clamp(22px,3.4vw,32px);font-weight:800;color:#fff;margin:0 0 16px;letter-spacing:-.5px}
h2::before{content:"";display:block;width:56px;height:5px;border-radius:3px;margin-bottom:12px;
 background:linear-gradient(90deg,var(--p1),var(--p2))}
h3{font-size:clamp(17px,2.4vw,21px);color:var(--p1);margin:26px 0 9px;font-weight:700}
h4{font-size:16.5px;color:#fff;margin:18px 0 7px;font-weight:700}
p{margin:0 0 14px;color:#ded5f0}
section ul,section ol{margin:0 0 15px 20px;color:#ded5f0}section li{margin:6px 0}
strong{color:#fff}.big{font-size:17.5px;color:#eae3f8}
/* cards horizontais com faixa superior */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.box{background:var(--pan);border:1px solid var(--bd);border-radius:var(--r);padding:20px;
 position:relative;overflow:hidden;transition:.28s}
.box::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
 background:linear-gradient(90deg,var(--p3),var(--p1));transform:scaleX(0);transform-origin:left;transition:.35s}
.box:hover::before{transform:scaleX(1)}
.box:hover{transform:translateY(-6px);border-color:var(--p1)}
.sym{font-size:30px;display:inline-block;margin-bottom:9px;transition:.4s}
.box:hover .sym{transform:translateY(-4px) scale(1.18)}
.mapa{border-radius:var(--r);overflow:hidden;border:1px solid var(--bd)}
.mapa iframe{display:block;width:100%;height:360px;border:0;filter:saturate(.8) hue-rotate(255deg)}
/* form */
.ff{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:14px}
.campo{display:flex;flex-direction:column;gap:6px}.campo.w{grid-column:1/-1}
label{font-size:13px;font-weight:700;color:var(--mu)}
input,select,textarea{width:100%;padding:13px;border-radius:12px;background:#190f2c;color:var(--tx);
 border:1px solid var(--bd);font:inherit;font-size:15px;transition:.2s}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--p1);box-shadow:0 0 0 3px rgba(255,166,43,.18)}
textarea{min-height:86px;resize:vertical}
.aviso{color:var(--p2);font-size:13.5px;min-height:18px;font-weight:600}
.painel{background:var(--pan);border:1px solid var(--bd);border-radius:var(--r);padding:22px}
details{background:var(--pan);border:1px solid var(--bd);border-radius:14px;padding:14px 18px;margin:9px 0}
summary{cursor:pointer;font-weight:700;color:#fff;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"▾";float:right;color:var(--p1);transition:.25s}
details[open] summary::after{transform:rotate(180deg)}
details p{margin-top:11px}
.lk{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:7px;list-style:none;margin:0}
.lk a{display:block;padding:9px 12px;border-radius:999px;font-size:14px;color:#ded5f0;
 background:var(--pan);border:1px solid var(--bd);transition:.2s}
.lk a:hover{background:var(--p3);border-color:var(--p3);color:#fff;text-decoration:none}
.tri{font-size:13px;color:var(--mu);padding:14px 0 0}.tri a{color:var(--mu)}
.obs{font-size:14px;color:var(--mu);background:rgba(123,97,255,.12);border-radius:14px;padding:13px 16px;margin:16px 0}
footer{border-top:1px solid var(--bd);margin-top:36px;padding:32px 0 92px;color:var(--mu);font-size:14px}
footer h4{color:var(--p1);font-size:13px;text-transform:uppercase;letter-spacing:1.2px;margin:0 0 10px}
footer ul{list-style:none;margin:0}footer li{margin:5px 0}
footer a{color:var(--mu)}footer a:hover{color:var(--p1)}
.fcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px}
.zap{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;align-items:center;gap:8px;
 padding:14px 20px;border-radius:999px;background:var(--ok);color:#fff;font-weight:700;
 box-shadow:0 10px 30px rgba(0,0,0,.5);animation:bt 3s ease-in-out infinite}
.zap:hover{text-decoration:none;filter:brightness(1.1)}
@media(max-width:780px){nav{width:100%;order:3;margin-left:0}nav a{padding:8px 11px;font-size:13.5px}
 .hero{padding:32px 0 22px}.mapa iframe{height:290px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}