/* CLARENCIO CLUB · Identidade própria baseada nas cores do personagem */
:root{
  --bg:#090d17;--surface:#111927;--surface2:#152033;--surface3:#1b283a;
  --border:#344253;--green:#86f04c;--green2:#65d73d;--green-dark:#203f29;
  --pink:#ff9faf;--blue:#68adf4;--purple:#a98bff;--text:#f8fbff;
  --muted:#acb8c9;--radius:20px;--shadow:0 16px 60px rgba(0,0,0,.24)
}
body{background:#090d17;color:var(--text)}
.background-grid{
 background:radial-gradient(ellipse 40% 42% at 80% 15%,rgba(255,122,167,.12),transparent 75%),
 radial-gradient(ellipse 36% 27% at 24% 10%,rgba(121,229,70,.13),transparent 78%),
 radial-gradient(ellipse 45% 40% at 40% 89%,rgba(69,128,245,.07),transparent 80%),
 linear-gradient(90deg,rgba(112,147,202,.052) 1px,transparent 1px),
 linear-gradient(0deg,rgba(112,147,202,.052) 1px,transparent 1px),#090d17;
 background-size:auto,auto,auto,38px 38px,38px 38px,auto
}
.site-header{background:rgba(9,13,23,.88);border-color:rgba(164,162,210,.2)}
.brand{font-size:20px;gap:12px;letter-spacing:-.7px}
.brand b{color:var(--pink);text-shadow:0 0 18px rgba(255,159,175,.16)}
.brand small{font-size:10px;display:block;color:var(--green);letter-spacing:2.4px;line-height:1;font-weight:900;margin-top:2px}
.brand-avatar{width:50px;height:53px;background:linear-gradient(140deg,#7cf244,#5b9bd9 65%,#ff9faf);border-radius:15px;transform:rotate(-7deg);overflow:visible}
.brand-avatar img{height:49px;width:49px;object-fit:contain;transform:rotate(7deg)}
.nav-link{color:#d5d7e2;font-weight:900;letter-spacing:.45px}
.nav-button{background:var(--green);border-radius:12px;color:#172319;box-shadow:0 8px 27px rgba(132,240,76,.13);font-weight:900;letter-spacing:.3px}
.nav-button:hover,.button.primary:hover{background:#a0ff74}
.hero{grid-template-columns:1.05fr .95fr;padding:75px 0 26px;gap:30px;min-height:510px}
.eyebrow{background:linear-gradient(90deg,rgba(143,238,86,.18),rgba(255,153,172,.08));border-color:#4d7553;color:#d7ffbc;letter-spacing:1.1px;font-size:11px;font-weight:950}
.eyebrow-star{color:var(--pink);font-size:15px}
.eyebrow.mini{font-size:10px;padding:5px 10px;margin-bottom:12px}
.hero h1{font-size:clamp(48px,5.6vw,76px);font-weight:1000;letter-spacing:-3.2px;line-height:1.04;margin:23px 0 17px}
.hero h1 .hero-clarencio{color:var(--pink);text-shadow:4px 6px 0 rgba(65,36,61,.54),0 0 40px rgba(255,156,177,.13)}
.hero h1 .hero-on{color:var(--green);text-shadow:3px 6px 0 rgba(34,76,33,.5)}
.hero p{max-width:480px;font-size:16px;color:#bdc7d5}
.hero-reward{max-width:385px;display:flex;align-items:center;gap:14px;border:1px solid rgba(150,235,95,.42);border-radius:16px;background:linear-gradient(112deg,#1e382f,#172537 60%,#292138);padding:13px 16px;margin-bottom:21px;box-shadow:inset 0 1px rgba(255,255,255,.07),0 17px 40px #0004}
.hero-reward .reward-symbol{width:50px;height:50px;display:grid;place-items:center;flex:none;transform:rotate(18deg);background:var(--green);border-radius:13px;color:#294628;font-size:26px;box-shadow:4px 4px 0 #3e8a3a}
.hero-reward small{display:block;font-size:10px;color:#b2bfca;letter-spacing:1.1px;font-weight:900}
.hero-reward strong{display:block;color:#f8fff6;font-size:29px;letter-spacing:-.9px;white-space:nowrap;font-weight:1000;line-height:1.2}
.hero-reward strong span{font-size:12px;color:var(--green);letter-spacing:.4px}
.hero-reward .reward-spark{margin-left:auto;color:var(--pink);font-size:24px}
.button{border-radius:12px;font-weight:880;letter-spacing:.25px}
.button.primary{background:var(--green);box-shadow:0 10px 27px rgba(126,241,74,.12);color:#102c18}
.button.secondary{border-color:#526078;background:rgba(18,25,40,.75)}
.button.secondary:hover{background:#273348}
.button.ghost{background:#202e43}
.security-note{color:#bcc9ce}
.mascot-stage{min-height:495px}
.mascot-stage:before{width:415px;height:415px;background:radial-gradient(circle,#c4ffbb 0%,rgba(135,239,86,.26) 24%,rgba(255,160,188,.16) 45%,transparent 71%);filter:blur(28px)}
.mascot-stage:after{width:405px;height:405px;box-shadow:inset 0 0 70px rgba(123,211,106,.08),0 0 95px rgba(255,115,179,.10);border:3px dashed rgba(146,239,104,.22);background:linear-gradient(150deg,rgba(255,158,174,.09),rgba(106,173,244,.07));transform:rotate(-15deg)}
.mascot-orbit{position:absolute;width:390px;height:390px;border:2px solid rgba(255,154,180,.25);border-radius:41% 59% 58% 42% / 45% 46% 54% 55%;transform:rotate(16deg);pointer-events:none}
.mascot-orbit.orbit-two{width:350px;height:350px;transform:rotate(36deg);border-color:rgba(114,171,237,.22);border-style:dotted}
.mascot-img{width:min(355px,100%);max-height:455px;position:relative;z-index:1;filter:drop-shadow(7px 9px 0 rgba(26,36,44,.75)) drop-shadow(0 8px 31px rgba(137,247,104,.25));animation:mascotFloat 4.4s ease-in-out infinite}
.mascot-speech{position:absolute;z-index:3;top:5%;right:-5%;transform:rotate(8deg);padding:11px 14px;background:#fff5db;color:#26333b;border:3px solid #1b2633;border-radius:20px 20px 20px 5px;box-shadow:5px 6px 0 #101524;font-size:14px;letter-spacing:.2px;font-weight:1000;white-space:nowrap}
.mascot-speech span{color:#f0628f}
.mascot-label{z-index:3;right:-3%;bottom:14%;padding:10px 15px;background:#202336;border:2px solid var(--pink);color:#ffb6c2;box-shadow:6px 7px 0 #10131f;border-radius:11px;font-size:13px}
.mascot-label span{color:var(--green)}
.mascot-sticker{position:absolute;z-index:2;left:6%;bottom:20%;height:76px;width:76px;border-radius:50%;display:grid;place-content:center;text-align:center;transform:rotate(-12deg);background:var(--blue);border:4px solid white;color:#0d2441;box-shadow:5px 6px 0 #1b2434;font-size:27px;line-height:.85;font-weight:1000}
.mascot-sticker small{font-size:13px;line-height:1.3;letter-spacing:1px}
.mascot-spark{z-index:2;color:var(--pink);font-size:32px}.mascot-spark.b{color:var(--green)}.mascot-spark.c{color:var(--blue)}
.steps{gap:17px;margin:30px auto 65px}.step-card{position:relative;border-color:rgba(151,168,203,.23);border-radius:18px;background:linear-gradient(138deg,rgba(31,43,62,.88),rgba(16,24,38,.91));overflow:hidden;min-height:173px;padding:24px}
.step-card:nth-child(1){border-top:3px solid var(--pink)}.step-card:nth-child(2){border-top:3px solid var(--green)}.step-card:nth-child(3){border-top:3px solid var(--blue)}
.step-card h3{font-size:14px;letter-spacing:.4px}.step-card p{color:#bcc6d3}.step-card:nth-child(1) .step-icon{color:var(--pink)}.step-card:nth-child(3) .step-icon{color:var(--blue)}
.step-bubble{position:absolute;right:15px;top:8px;color:#ffffff13;font-size:54px;font-weight:1000;letter-spacing:-4px}
.pack-heading{display:flex;align-items:center;justify-content:space-between;max-width:515px}.pack-face{width:80px;height:80px;object-fit:contain;filter:drop-shadow(0 5px 8px #0008);transform:rotate(-7deg)}
.pack-heading .section-heading{font-size:29px;letter-spacing:-1px;margin-bottom:11px}.pack-heading .section-heading span{color:var(--pink)}
.packs{padding-bottom:84px}.package{position:relative;width:515px;max-width:100%;border:1px solid rgba(153,232,95,.45);background:linear-gradient(120deg,#1d3c2e,#182841 65%,#32223e);border-radius:20px;padding:25px;overflow:hidden}
.package:after{content:'✦';position:absolute;right:32px;bottom:-37px;font-size:150px;color:#ffb6c20b;transform:rotate(25deg)}
.package-ribbon{display:block;width:max-content;background:#fc9eaf;color:#392032;padding:4px 10px;font-size:10px;letter-spacing:1.3px;font-weight:1000;border-radius:50px;margin-bottom:13px}
.package small{color:#cbd3d9}.package strong{font-size:53px;letter-spacing:-2px;color:var(--green);text-shadow:none;position:relative;z-index:1;line-height:1.1}
.package strong span{font-size:14px;color:#d5fbd9;letter-spacing:1.1px}
.package p{color:#bbcad0;font-size:13px}.package em{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#182d1e;border-radius:10px;padding:10px 15px;margin-top:20px;position:relative;z-index:1;font-size:12px;font-weight:900}
.page-title{font-weight:1000;letter-spacing:-1px}.page .eyebrow.mini{margin-bottom:16px}
.form-card,.tracker-card{background:linear-gradient(120deg,#182233,#111b2b);border-color:#30445d}
.notice{background:#1d2b39;border-color:#425372;color:#c5d4df}.notice strong{color:#f9fdff}
.form-card .step-header{font-weight:950}.step-number{color:#16321c}.input{background:#0e1725;border-color:#40546a}.input:focus{box-shadow:0 0 0 3px rgba(131,240,76,.13)}.input::placeholder{color:#8798a9}
.profile-preview{background:#193042;border-color:#628b69}.profile-preview img{background:#233a50}
.package-select{background:linear-gradient(125deg,#244b39,#223152);border-color:#82cf60}.package-select .amount{color:var(--green)}
.mission-box{background:#152338;border-color:#3a5067}.mission-desc,.inline-help{color:#b1c3cf}.preview-image{background:#223b33}
.order-result{background:#182539}.success-code{background:#1b382f}.success-code strong{color:#e8ffe9}
.site-footer{background:#0a101b;border-color:#313a4b;color:#a1acb7}.admin-footer{color:#718796}
.tab{background:#182334;border-color:#40566a;color:#c8d1db}.tab.active{background:#2b5935;color:#ebfff0}.admin-table-wrap{background:#121d2e}.admin-table th{background:#1d293b}.admin-table td,.admin-table th{border-color:#344559}.admin-settings,.admin-login{background:#142035}
@media(max-width:760px){
 .brand{font-size:16px}.brand-avatar{width:40px;height:42px}.brand-avatar img{width:40px;height:40px}.brand small{font-size:8px}
 .nav-link{font-size:10px}.nav-button{font-size:11px;padding:10px 11px}
 .hero{flex-direction:column-reverse;padding:20px 0 14px;gap:12px}.mascot-stage{min-height:305px}.mascot-img{height:290px;max-width:245px}.mascot-stage:before,.mascot-stage:after{width:255px;height:255px}.mascot-orbit{width:260px;height:260px}.mascot-orbit.orbit-two{width:235px;height:235px}.mascot-speech{right:1%;top:3%;font-size:10px;padding:8px}.mascot-sticker{height:54px;width:54px;left:8%;bottom:15%;font-size:19px;border-width:3px}.mascot-sticker small{font-size:10px}.mascot-label{right:0;bottom:11%;font-size:10px}
 .hero h1{font-size:clamp(41px,11.2vw,62px);margin:14px 0;letter-spacing:-2px}.hero p{font-size:14px}.hero-reward{max-width:100%}.hero-reward strong{font-size:26px}
 .steps{gap:12px}.step-card{min-height:0;padding:14px 16px}.step-card:nth-child(n){border-top-width:2px}.step-bubble{top:0;right:10px;font-size:43px}.pack-face{width:57px;height:57px}
 .pack-heading .section-heading{font-size:23px}.package strong{font-size:43px}
}
.tutorial-page{max-width:660px;padding-bottom:55px}
.tutorial-page .page-title{font-size:clamp(27px,5vw,35px);line-height:1.2;max-width:510px;margin-bottom:12px}
.tutorial-media{margin:25px 0 20px;border:1px solid #344b48;border-radius:18px;overflow:hidden;background:#0a111d}
.tutorial-video{display:block;width:100%;max-height:65vh;object-fit:contain;background:#080d15}
.tutorial-player-hint{margin:-9px 0 20px;text-align:center;color:var(--muted);font-size:12px}
.tutorial-watch{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;min-height:250px;padding:35px 20px;text-align:center;background:radial-gradient(ellipse at center,rgba(134,240,76,.07),transparent 70%)}
.tutorial-watch:hover{background-color:rgba(134,240,76,.025)}
.tutorial-play{display:grid;place-items:center;width:66px;height:66px;border:1px solid rgba(134,240,76,.45);border-radius:50%;color:var(--green);background:rgba(134,240,76,.08)}
.tutorial-play svg{margin-left:3px}
.tutorial-watch strong{font-size:18px}
.tutorial-watch>span:last-child{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px}
.tutorial-next{text-align:center;font-size:12px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.tutorial-review{display:inline-flex;align-items:center;gap:7px;border:0;background:none;color:var(--green);padding:5px 0;margin:5px 0 8px;font-size:12px}
.tutorial-review:hover{text-decoration:underline}
/* Keep the requested effect visible with less movement and a pause control. */
@media(prefers-reduced-motion:reduce){
 #particles{display:block}
 #particles .particle{--t:60s;animation-duration:var(--t)!important}
 #particles .particle:nth-child(n+5){display:none}
}