/* CSS original do arquivo info.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); } *{ 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); overflow-x:hidden; 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% ); } 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 80% ); 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:1050px; margin:0 auto; padding:30px 18px 70px; } .brand{ text-align:center; } .brand-label{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border:1px solid rgba(120,104,255,.25); border-radius:100px; background:rgba(120,104,255,.07); color:#bdb6ff; font-size:10px; font-weight:800; letter-spacing:2px; } .brand-label i{ color:var(--cyan); font-size:8px; } .title{ margin-top:16px; text-align:center; font-family:'Cinzel',serif; font-size:clamp(27px,4vw,42px); line-height:1.2; font-weight:800; color:#fff; text-shadow: 0 0 20px rgba(120,104,255,.25); } .title span{ background: linear-gradient( 90deg, #ffffff, #bdb5ff, #71e8ff ); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .subtitle{ max-width:650px; margin:12px auto 0; text-align:center; color:var(--muted); font-size:13px; line-height:1.8; } .top-nav{ display:flex; justify-content:center; margin-top:25px; } .back-button{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:0 19px; border-radius:12px; color:#d8deea; text-decoration:none; font-size:11px; font-weight:800; background: linear-gradient( 145deg, rgba(255,255,255,.055), rgba(255,255,255,.018) ); border:1px solid rgba(255,255,255,.09); transition:.3s ease; } .back-button:hover{ transform:translateY(-2px); color:#fff; border-color:rgba(120,104,255,.40); background: linear-gradient( 145deg, rgba(120,104,255,.13), rgba(37,217,255,.04) ); box-shadow: 0 12px 30px rgba(0,0,0,.30); } .divider{ width:100%; height:1px; margin:40px 0; background: linear-gradient( 90deg, transparent, rgba(120,104,255,.45), rgba(37,217,255,.35), transparent ); } .projects-box{ position:relative; padding:30px; border:1px solid rgba(120,104,255,.16); border-radius:24px; background: radial-gradient( circle at 10% 0%, rgba(120,104,255,.08), transparent 35% ), linear-gradient( 145deg, rgba(13,18,31,.96), rgba(7,10,17,.96) ); box-shadow: 0 25px 70px rgba(0,0,0,.42); } .projects-header{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:25px; } .projects-heading{ display:flex; align-items:center; gap:14px; } .projects-icon{ width:48px; height:48px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:14px; color:#b8afff; background: linear-gradient( 145deg, rgba(120,104,255,.17), rgba(37,217,255,.05) ); border:1px solid rgba(120,104,255,.20); box-shadow: 0 0 25px rgba(120,104,255,.08); } .projects-heading h2{ font-family:'Cinzel',serif; font-size:22px; color:#fff; } .projects-heading p{ margin-top:4px; color:#778296; font-size:10px; } .status{ display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:9px; color:#7df5b0; background:rgba(37,211,102,.055); border:1px solid rgba(37,211,102,.13); font-size:9px; font-weight:800; white-space:nowrap; } .status-dot{ width:6px; height:6px; border-radius:50%; background:#35ed8b; box-shadow:0 0 10px #35ed8b; } .links-list{ display:grid; grid-template-columns:1fr 1fr; gap:15px; } .link-item{ position:relative; display:flex; align-items:center; gap:16px; min-height:125px; padding:20px; overflow:hidden; color:#fff; text-decoration:none; border:1px solid rgba(255,255,255,.07); border-radius:17px; background: linear-gradient( 145deg, rgba(255,255,255,.045), rgba(255,255,255,.012) ); transition:.35s ease; } .link-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: linear-gradient( 180deg, var(--primary), var(--cyan) ); opacity:.65; } .link-item::after{ content:""; position:absolute; width:150px; height:150px; right:-80px; bottom:-100px; border-radius:50%; background:rgba(120,104,255,.12); filter:blur(25px); transition:.35s ease; } .link-item:hover{ transform:translateY(-4px); border-color:rgba(120,104,255,.35); background: linear-gradient( 145deg, rgba(120,104,255,.10), rgba(255,255,255,.025) ); box-shadow: 0 18px 45px rgba(0,0,0,.35), 0 0 30px rgba(120,104,255,.08); } .link-item:hover::after{ transform:scale(1.5); } .project-icon{ width:50px; height:50px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:14px; color:#aaa1ff; background: linear-gradient( 145deg, rgba(120,104,255,.15), rgba(37,217,255,.04) ); border:1px solid rgba(120,104,255,.18); font-size:18px; transition:.3s ease; } .link-item:hover .project-icon{ color:#fff; border-color:rgba(37,217,255,.25); box-shadow: 0 0 20px rgba(120,104,255,.15); } .project-content{ position:relative; z-index:2; flex:1; } .project-tag{ display:inline-block; margin-bottom:7px; color:var(--cyan); font-size:8px; font-weight:800; letter-spacing:1.5px; } .project-title{ display:block; color:#fff; font-family:'Cinzel',serif; font-size:16px; line-height:1.4; } .project-description{ display:block; margin-top:6px; color:#7f899b; font-size:10px; line-height:1.6; } .project-arrow{ position:relative; z-index:3; width:35px; height:35px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:10px; color:#747f92; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.025); transition:.3s ease; } .link-item:hover .project-arrow{ color:#fff; border-color:rgba(120,104,255,.30); background:rgba(120,104,255,.10); transform:translateX(3px); } .contact-box{ margin-top:20px; padding:18px 20px; display:flex; align-items:center; justify-content:center; gap:10px; text-align:center; border-radius:15px; border:1px solid rgba(37,211,102,.12); background:rgba(37,211,102,.025); } .contact-box span{ color:#788397; font-size:10px; } .contact-box a{ display:inline-flex; align-items:center; gap:6px; color:#72edaa; text-decoration:none; font-size:10px; font-weight:800; } .contact-box a:hover{ color:#fff; } footer{ margin-top:45px; 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); } .snow{ position:fixed; top:-20px; color:#fff; pointer-events:none; z-index:1000; opacity:.35; animation:snowFall linear forwards; } @keyframes snowFall{ from{ transform:translateY(-20px); } to{ transform:translateY(110vh); } } @media(max-width:750px){ .wrapper{ padding-left:12px; padding-right:12px; } .projects-box{ padding:22px 16px; border-radius:20px; } .projects-header{ align-items:flex-start; } .links-list{ grid-template-columns:1fr; } .link-item{ min-height:110px; } } @media(max-width:500px){ header{ padding:22px 15px; } header img{ max-width:155px; } .title{ font-size:26px; } .subtitle{ font-size:11px; } .projects-header{ flex-direction:column; align-items:flex-start; } .projects-heading h2{ font-size:19px; } .status{ align-self:flex-start; } .link-item{ padding:16px; gap:12px; } .project-icon{ width:43px; height:43px; font-size:15px; } .project-title{ font-size:14px; } .project-description{ font-size:9px; } .project-arrow{ width:32px; height:32px; } .whatsapp-float{ right:16px; bottom:16px; } }