/* CSS original do arquivo index.html; regras preservadas. */
:root{ --bg:#04060b; --bg-2:#070b14; --panel:#0b101b; --panel-2:#0e1421; --primary:#7868ff; --primary-2:#9b8cff; --cyan:#25d9ff; --cyan-2:#00a8ff; --green:#25d366; --white:#ffffff; --text:#eef1f7; --muted:#9ca7ba; --border:rgba(255,255,255,.08); --border-primary:rgba(120,104,255,.30); --shadow:0 20px 70px rgba(0,0,0,.45); --radius:22px; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ min-height:100vh; font-family:'Inter',Arial,sans-serif; color:var(--text); background: radial-gradient( circle at 50% -10%, rgba(120,104,255,.18), transparent 35% ), radial-gradient( circle at 10% 30%, rgba(37,217,255,.05), transparent 25% ), radial-gradient( circle at 90% 60%, rgba(120,104,255,.06), transparent 30% ), linear-gradient( 180deg, #05070d 0%, #04060b 100% ); overflow-x:hidden; } body::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.20; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size:50px 50px; mask-image:linear-gradient( to bottom, black, transparent 75% ); z-index:-1; } ::-webkit-scrollbar{ width:8px; } ::-webkit-scrollbar-track{ background:#03050a; } ::-webkit-scrollbar-thumb{ background:linear-gradient( 180deg, var(--primary), var(--cyan) ); border-radius:20px; } header{ position:relative; width:100%; padding:28px 20px 22px; display:flex; justify-content:center; align-items:center; border-bottom:1px solid rgba(255,255,255,.06); background: linear-gradient( 180deg, rgba(12,16,28,.95), rgba(5,7,13,.70) ); backdrop-filter:blur(18px); } header::after{ content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); width:220px; height:1px; background:linear-gradient( 90deg, transparent, var(--primary), var(--cyan), transparent ); box-shadow: 0 0 15px rgba(120,104,255,.6); } header img{ width:auto; max-width:190px; max-height:80px; object-fit:contain; filter: drop-shadow(0 0 15px rgba(120,104,255,.55)) drop-shadow(0 0 30px rgba(37,217,255,.12)); transition:.35s ease; } header img:hover{ transform:scale(1.04); filter: drop-shadow(0 0 20px rgba(120,104,255,.8)) drop-shadow(0 0 35px rgba(37,217,255,.2)); } .wrapper{ width:100%; max-width:1180px; margin:0 auto; padding:25px 18px 70px; } .brand-label{ display:inline-flex; align-items:center; gap:8px; padding:7px 13px; margin-top:5px; border:1px solid rgba(120,104,255,.25); border-radius:100px; background:rgba(120,104,255,.07); color:#bdb6ff; font-size:11px; font-weight:700; letter-spacing:2px; } .brand-label i{ color:var(--cyan); font-size:9px; } .main-title{ margin-top:15px; text-align:center; font-family:'Cinzel',serif; font-size:clamp(27px,4vw,44px); line-height:1.15; font-weight:800; letter-spacing:1px; color:#fff; text-shadow: 0 0 20px rgba(120,104,255,.25); } .main-title span{ background:linear-gradient( 90deg, #ffffff, #bdb5ff, #71e8ff ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .top-info{ display:flex; justify-content:center; margin-top:13px; } .top-info a{ display:inline-flex; align-items:center; gap:9px; color:var(--muted); text-decoration:none; font-size:13px; transition:.25s ease; } .top-info a:hover{ color:#fff; } .top-info i{ color:var(--green); font-size:16px; } .navbar{ margin-top:25px; } .navbar ul{ list-style:none; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; padding:9px; border:1px solid var(--border); border-radius:16px; background:rgba(8,12,21,.75); box-shadow: 0 15px 40px rgba(0,0,0,.25); backdrop-filter:blur(18px); } .navbar a{ position:relative; display:flex; align-items:center; justify-content:center; min-height:42px; padding:0 17px; border-radius:11px; color:#aeb7c8; text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.5px; transition:.25s ease; } .navbar a:hover{ color:#fff; background:rgba(255,255,255,.055); } .navbar .pacotes{ color:#fff; background: linear-gradient( 135deg, rgba(120,104,255,.20), rgba(37,217,255,.08) ); border:1px solid rgba(120,104,255,.35); box-shadow: 0 0 20px rgba(120,104,255,.12); } .navbar .pacotes::after{ content:""; position:absolute; bottom:4px; left:18px; right:18px; height:2px; border-radius:10px; background:linear-gradient( 90deg, var(--primary), var(--cyan) ); } .hero{ position:relative; display:grid; grid-template-columns:1.35fr .65fr; gap:25px; margin-top:28px; padding:38px; overflow:hidden; border:1px solid rgba(120,104,255,.16); border-radius:26px; background: radial-gradient( circle at 80% 20%, rgba(37,217,255,.08), transparent 30% ), radial-gradient( circle at 20% 100%, rgba(120,104,255,.10), transparent 35% ), linear-gradient( 135deg, rgba(13,18,31,.95), rgba(7,10,18,.92) ); box-shadow:var(--shadow); } .hero::before{ content:""; position:absolute; width:300px; height:300px; top:-180px; right:-120px; border-radius:50%; background:rgba(120,104,255,.12); filter:blur(50px); } .hero-left{ position:relative; z-index:2; } .hero-label{ display:inline-flex; align-items:center; gap:8px; margin-bottom:15px; color:var(--cyan); font-size:11px; font-weight:800; letter-spacing:2px; } .hero-label::before{ content:""; width:28px; height:1px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); } .hero-title{ max-width:700px; font-family:'Cinzel',serif; font-size:clamp(28px,4vw,48px); line-height:1.12; font-weight:800; color:#fff; } .hero-title span{ background:linear-gradient( 90deg, #fff, #a89eff, #5de6ff ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .hero-subtitle{ max-width:680px; margin-top:17px; color:var(--muted); font-size:14px; line-height:1.8; } .hero-buttons{ display:flex; flex-wrap:wrap; gap:11px; margin-top:25px; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:46px; padding:0 20px; border-radius:12px; text-decoration:none; font-size:12px; font-weight:800; transition:.3s ease; } .btn-primary{ color:#fff; background: linear-gradient( 135deg, #7665ff, #5849dc ); border:1px solid rgba(167,156,255,.45); box-shadow: 0 10px 30px rgba(120,104,255,.22); } .btn-primary:hover{ transform:translateY(-2px); box-shadow: 0 15px 35px rgba(120,104,255,.35); } .btn-secondary{ color:#d9deea; background:rgba(255,255,255,.035); border:1px solid rgba(255,255,255,.10); } .btn-secondary:hover{ transform:translateY(-2px); border-color:rgba(37,217,255,.35); color:#fff; } .hero-right{ display:flex; align-items:center; justify-content:center; } .hero-card{ width:100%; max-width:310px; padding:22px; border:1px solid rgba(255,255,255,.08); border-radius:20px; background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.018) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 50px rgba(0,0,0,.30); } .hero-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; } .hero-card-label{ color:#8e98ab; font-size:10px; font-weight:800; letter-spacing:1.5px; } .live{ display:flex; align-items:center; gap:7px; color:#7df5b0; font-size:10px; font-weight:800; } .live-dot{ width:7px; height:7px; border-radius:50%; background:#35ed8b; box-shadow:0 0 12px #35ed8b; } .hero-card-title{ font-family:'Cinzel',serif; font-size:20px; font-weight:800; color:#fff; } .hero-card-text{ margin-top:8px; color:#8792a5; font-size:12px; line-height:1.7; } .hero-stats{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:20px; } .hero-stat{ padding:13px; border:1px solid rgba(255,255,255,.06); border-radius:12px; background:rgba(0,0,0,.16); } .hero-stat strong{ display:block; color:#fff; font-size:14px; } .hero-stat span{ display:block; margin-top:3px; color:#737e92; font-size:9px; text-transform:uppercase; letter-spacing:.8px; } .divider{ width:100%; height:1px; margin:55px 0; background: linear-gradient( 90deg, transparent, rgba(120,104,255,.45), rgba(37,217,255,.35), transparent ); } .section-heading{ text-align:center; margin-bottom:25px; } .section-heading .small{ display:block; margin-bottom:7px; color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:3px; } .section-heading h2{ font-family:'Cinzel',serif; font-size:clamp(23px,3vw,31px); color:#fff; } .section-heading p{ max-width:650px; margin:9px auto 0; color:#7f899b; font-size:12px; line-height:1.7; } .packages-section{ position:relative; } .package-carousel{ position:relative; width:100%; max-width:590px; margin:0 auto; } .package-card{ display:none; width:100%; overflow:hidden; border:1px solid rgba(120,104,255,.20); border-radius:24px; background: linear-gradient( 145deg, rgba(16,22,37,.98), rgba(8,11,19,.98) ); box-shadow: 0 25px 80px rgba(0,0,0,.48), 0 0 40px rgba(120,104,255,.07); } .package-card.active{ display:block; animation:packageIn .55s ease; } @keyframes packageIn{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } } .package-media{ position:relative; width:100%; height:315px; display:flex; align-items:center; justify-content:center; padding:18px; overflow:hidden; background: radial-gradient( circle at center, rgba(120,104,255,.11), transparent 60% ), linear-gradient( 135deg, #0d1422, #080b13 ); border-bottom:1px solid rgba(255,255,255,.07); } .package-media img{ width:100%; height:100%; object-fit:contain; object-position:center; display:block; border-radius:14px; filter: drop-shadow(0 15px 35px rgba(0,0,0,.45)); transition:.5s ease; } .package-card:hover .package-media img{ transform:scale(1.025); } .package-badge{ position:absolute; top:15px; left:15px; z-index:5; padding:7px 11px; border-radius:8px; color:#fff; font-size:9px; font-weight:800; letter-spacing:1px; background: linear-gradient( 135deg, rgba(120,104,255,.95), rgba(82,68,210,.95) ); border:1px solid rgba(255,255,255,.15); box-shadow: 0 7px 20px rgba(0,0,0,.25); } .package-badge.exclusive{ background: linear-gradient( 135deg, rgba(37,217,255,.95), rgba(0,139,205,.95) ); } .package-promo{ position:absolute; top:15px; right:15px; z-index:5; padding:7px 11px; border-radius:8px; color:#fff; background:rgba(4,7,12,.82); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(10px); font-size:9px; font-weight:800; letter-spacing:1px; } .package-content{ padding:25px; } .package-category{ color:var(--cyan); font-size:9px; font-weight:800; letter-spacing:2px; text-transform:uppercase; } .package-title{ margin-top:8px; font-family:'Cinzel',serif; font-size:21px; line-height:1.3; color:#fff; } .package-description{ margin-top:10px; color:#8792a5; font-size:12px; line-height:1.7; } .package-benefits{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:18px; } .package-benefit{ display:flex; align-items:center; gap:7px; min-width:0; padding:9px; border-radius:9px; background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.045); color:#aab3c2; font-size:9px; } .package-benefit i{ color:#7f75ff; font-size:9px; } .package-price{ display:flex; align-items:flex-end; justify-content:space-between; gap:15px; margin-top:22px; padding-top:19px; border-top:1px solid rgba(255,255,255,.06); } .old-price{ display:block; color:#626c7c; font-size:11px; text-decoration:line-through; } .current-price{ display:block; margin-top:3px; color:#fff; font-size:29px; font-weight:800; letter-spacing:-1px; } .current-price small{ font-size:12px; font-weight:600; color:#929caf; } .discount{ padding:7px 9px; border-radius:8px; color:#7ff5b3; background:rgba(37,211,102,.07); border:1px solid rgba(37,211,102,.14); font-size:9px; font-weight:800; } .package-button{ width:100%; min-height:48px; margin-top:17px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:12px; text-decoration:none; color:#fff; font-size:11px; font-weight:800; letter-spacing:.5px; background: linear-gradient( 135deg, #7665ff, #5143d1 ); border:1px solid rgba(167,156,255,.40); box-shadow: 0 12px 28px rgba(120,104,255,.18); transition:.3s ease; } .package-button:hover{ transform:translateY(-2px); box-shadow: 0 16px 35px rgba(120,104,255,.30); } .package-controls{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:17px; } .package-arrow{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.035); color:#aab3c2; cursor:pointer; transition:.25s ease; } .package-arrow:hover{ color:#fff; border-color:rgba(120,104,255,.35); background:rgba(120,104,255,.08); } .package-dots{ display:flex; align-items:center; gap:6px; } .package-dot{ width:7px; height:7px; padding:0; border:0; border-radius:20px; background:#3c4554; cursor:pointer; transition:.3s ease; } .package-dot.active{ width:22px; background:linear-gradient( 90deg, var(--primary), var(--cyan) ); box-shadow:0 0 12px rgba(120,104,255,.35); } .package-progress{ width:100%; max-width:590px; height:2px; margin:13px auto 0; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.06); } .package-progress-bar{ width:0%; height:100%; background: linear-gradient( 90deg, var(--primary), var(--cyan) ); } .trailer-section{ margin-top:75px; } .video-container{ width:100%; max-width:900px; margin:0 auto; aspect-ratio:16/9; overflow:hidden; border-radius:22px; background:#000; border:1px solid rgba(120,104,255,.22); box-shadow: 0 25px 70px rgba(0,0,0,.45); } .video-container iframe{ width:100%; height:100%; display:block; border:0; } .video-controls{ display:flex; justify-content:center; gap:8px; margin-top:14px; } .video-controls button{ width:40px; height:38px; border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#c7cfdd; background:rgba(255,255,255,.035); cursor:pointer; transition:.25s ease; } .video-controls button:hover{ color:#fff; background:rgba(120,104,255,.10); border-color:rgba(120,104,255,.30); } .video-title{ margin-top:12px; text-align:center; color:#8f99aa; font-size:10px; font-weight:800; letter-spacing:1.5px; } .partners-section{ margin-top:75px; } .partners-box{ max-width:800px; min-height:130px; margin:0 auto; display:flex; align-items:center; justify-content:center; padding:25px; border:1px solid rgba(255,255,255,.07); border-radius:20px; background: linear-gradient( 145deg, rgba(255,255,255,.035), rgba(255,255,255,.012) ); } .partner-logo{ width:100%; max-width:250px; height:70px; object-fit:contain; opacity:.78; filter: grayscale(100%) brightness(1.2); transition:.4s ease; } .partner-logo:hover{ opacity:1; filter: grayscale(0%) brightness(1.1) drop-shadow(0 0 18px rgba(120,104,255,.3)); } .info-card{ margin-top:75px; padding:35px; border:1px solid rgba(120,104,255,.14); border-radius:24px; background: radial-gradient( circle at 10% 0%, rgba(120,104,255,.08), transparent 30% ), linear-gradient( 145deg, rgba(12,17,29,.96), rgba(7,10,17,.96) ); } .info-card h2{ font-family:'Cinzel',serif; color:#fff; font-size:25px; } .info-card > p{ max-width:780px; margin:10px auto 0; color:#8994a7; font-size:12px; line-height:1.8; } .info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:25px; } .info-item{ padding:20px; border-radius:15px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); text-align:left; } .info-item i{ color:var(--primary-2); font-size:18px; } .info-item strong{ display:block; margin-top:10px; color:#fff; font-size:12px; } .info-item span{ display:block; margin-top:6px; color:#798497; font-size:10px; line-height:1.6; } footer{ margin-top:65px; padding:25px 15px; text-align:center; border-top:1px solid rgba(255,255,255,.06); color:#606b7d; font-size:10px; line-height:1.7; } footer strong{ color:#9ca7ba; } .whatsapp-float{ position:fixed; right:22px; bottom:22px; z-index:999; width:54px; height:54px; display:flex; align-items:center; justify-content:center; border-radius:50%; color:#fff; text-decoration:none; background:#25d366; border:3px solid rgba(255,255,255,.12); box-shadow: 0 12px 35px rgba(0,0,0,.40), 0 0 25px rgba(37,211,102,.25); transition:.3s ease; } .whatsapp-float i{ font-size:25px; } .whatsapp-float:hover{ transform:translateY(-4px) scale(1.04); box-shadow: 0 15px 40px rgba(0,0,0,.50), 0 0 35px rgba(37,211,102,.40); } .top-button{ position:fixed; right:22px; bottom:88px; z-index:998; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; color:#9ba5b7; background:rgba(9,13,22,.85); border:1px solid rgba(255,255,255,.08); text-decoration:none; opacity:0; visibility:hidden; transform:translateY(10px); transition:.3s ease; } .top-button.show{ opacity:1; visibility:visible; transform:translateY(0); } .top-button:hover{ color:#fff; border-color:rgba(120,104,255,.35); } .snow{ position:fixed; top:-20px; color:#fff; pointer-events:none; z-index:1000; opacity:.45; animation:snowFall linear forwards; } @keyframes snowFall{ from{ transform:translateY(-20px); } to{ transform:translateY(110vh); } } .reveal{ opacity:0; transform:translateY(18px); animation:reveal .8s ease forwards; } @keyframes reveal{ to{ opacity:1; transform:translateY(0); } } @media(max-width:900px){ .hero{ grid-template-columns:1fr; padding:30px; } .hero-right{ justify-content:flex-start; } .hero-card{ max-width:100%; } } @media(max-width:700px){ .wrapper{ padding-left:12px; padding-right:12px; } header{ padding:22px 15px; } header img{ max-width:155px; } .navbar ul{ gap:5px; } .navbar a{ min-height:38px; padding:0 11px; font-size:10px; } .hero{ padding:25px 20px; border-radius:20px; } .hero-title{ font-size:29px; } .hero-buttons{ flex-direction:column; } .btn{ width:100%; } .package-media{ height:245px; padding:12px; } .package-content{ padding:20px; } .package-title{ font-size:18px; } .package-benefits{ grid-template-columns:1fr; } .current-price{ font-size:25px; } .info-grid{ grid-template-columns:1fr; } .info-card{ padding:25px 18px; } .whatsapp-float{ right:16px; bottom:16px; } .top-button{ right:16px; bottom:80px; } } @media(max-width:430px){ .main-title{ font-size:25px; } .brand-label{ font-size:9px; } .top-info a{ font-size:11px; } .navbar a{ padding:0 8px; font-size:9px; } .package-media{ height:215px; } .package-price{ align-items:flex-start; flex-direction:column; } .discount{ align-self:flex-start; } } @media(prefers-reduced-motion:reduce){ *{ scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }