/*=========================================================
DJ RENAN VALLE
PÁGINA SOBRE
=========================================================*/

/*==============================
RESET
==============================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}

:root{

    --bg:#04060d;

    --bg2:#07111d;

    --card:rgba(255,255,255,.05);

    --glass:rgba(255,255,255,.04);

    --border:rgba(255,255,255,.08);

    --green:#45E026;

    --cyan:#00ffff;

    --blue:#00aaff;

    --text:#ffffff;

    --text2:#b8b8b8;

}

body{

    font-family:'Orbitron',sans-serif;

    background:var(--bg);

    color:white;

    overflow-x:hidden;

    position:relative;

}
/*==============================
BACKGROUND
==============================*/

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at 20% 20%,
    rgba(0,255,255,.08),
    transparent 30%),

    radial-gradient(circle at 80% 80%,
    rgba(69,224,38,.08),
    transparent 35%),

    linear-gradient(
    180deg,
    #04060d,
    #06101b,
    #04060d);

    z-index:-10;

}

.grid-bg{

    position:fixed;

    inset:0;

    background-image:

    linear-gradient(
    rgba(255,255,255,.03) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,.03) 1px,
    transparent 1px);

    background-size:55px 55px;

    animation:gridMove 18s linear infinite;

    opacity:.35;

    z-index:-9;

}

@keyframes gridMove{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(55px);

    }

}
/*==============================
LOADING
==============================*/

#loading{

    position:fixed;

    inset:0;

    background:#02040a;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.loader-box{

    width:420px;

    text-align:center;

}

.loader-title{

    display:block;

    color:var(--green);

    font-size:14px;

    letter-spacing:5px;

    margin-bottom:30px;

}

.loader-bar{

    width:100%;

    height:10px;

    border-radius:30px;

    overflow:hidden;

    background:#111;

}

.loader-progress{

    width:0;

    height:100%;

    background:linear-gradient(
    90deg,
    var(--green),
    var(--cyan));

}

#loadingText{

    margin-top:20px;

    color:#aaa;

    font-size:.9rem;

}
/*==============================
HEADER
==============================*/

header{

    position:fixed;

    top:0;

    width:100%;

    z-index:9999;

    backdrop-filter:blur(18px);

    background:rgba(0,0,0,.25);

    border-bottom:1px solid rgba(255,255,255,.05);

}

nav{

    max-width:1400px;

    margin:auto;

    padding:22px 40px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:2rem;

    font-weight:800;

    color:var(--green);

    text-shadow:

    0 0 15px var(--green);

}

nav ul{

    display:flex;

    gap:35px;

    list-style:none;

}

nav a{

    color:white;

    text-decoration:none;

    transition:.35s;

    position:relative;

}

nav a:hover{

    color:var(--green);

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--green);

    transition:.35s;

}

nav a:hover::after{

    width:100%;

}
/*==============================
HERO
==============================*/

.hero{

    min-height:100vh;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:80px;

    padding:160px 8% 100px;

}

.hero-left{

    width:50%;

}

.hero-right{

    width:50%;

    display:flex;

    justify-content:center;

}

.tag{

    display:inline-block;

    padding:10px 24px;

    border-radius:40px;

    border:2px solid var(--green);

    color:var(--green);

    margin-bottom:25px;

    letter-spacing:3px;

}

.hero h1{

    font-size:7rem;

    line-height:.9;

    margin-bottom:20px;

    color:white;

}

.hero h2{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-bottom:30px;

    color:var(--cyan);

    font-size:1rem;

    letter-spacing:3px;

}

.hero p{

    color:var(--text2);

    line-height:2;

    max-width:600px;

    margin-bottom:40px;

}


.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:250px;

    height:60px;

    border-radius:50px;

    text-decoration:none;

    color:#000;

    font-weight:bold;

    background:linear-gradient(
    45deg,
    var(--green),
    var(--cyan));

    transition:.35s;

}

.hero-btn:hover{

    transform:translateY(-8px);

    box-shadow:

    0 0 25px var(--green),

    0 0 60px rgba(69,224,38,.4);

}

.photo-box{

    width:500px;

    height:650px;

    position:relative;

    border-radius:35px;

    overflow:hidden;

    background:var(--card);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(25px);

}

.photo-box img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.circle-glow{

    position:absolute;

    width:450px;

    height:450px;

    background:var(--green);

    filter:blur(130px);

    opacity:.25;

    left:50%;

    top:50%;

    transform:translate(-50%,-50%);

    animation:pulse 4s infinite;

}

@keyframes pulse{

    50%{

        transform:

        translate(-50%,-50%)

        scale(1.12);

    }

}

/*=========================================================
TIMELINE
=========================================================*/

.timeline-section{

    position:relative;

    padding:180px 8%;

}

/*==============================
TÍTULOS
==============================*/

.section-title{

    max-width:900px;

    margin:auto;

    text-align:center;

    margin-bottom:120px;

}

.section-title span{

    display:inline-block;

    color:var(--green);

    letter-spacing:6px;

    margin-bottom:20px;

    font-size:.9rem;

}

.section-title h2{

    font-size:4rem;

    margin-bottom:30px;

    text-transform:uppercase;

}

.section-title p{

    color:var(--text2);

    font-size:1.1rem;

    line-height:2;

}

.timeline{

    position:relative;

    width:100%;

    max-width:1400px;

    margin:auto;

}

.timeline::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    width:5px;

    height:100%;

    transform:translateX(-50%);

    background:

    linear-gradient(

    to bottom,

    transparent,

    var(--green),

    var(--cyan),

    var(--green),

    transparent

    );

    box-shadow:

    0 0 20px var(--green),

    0 0 60px rgba(69,224,38,.5);

}

.timeline-item{

    position:relative;

    width:50%;

    margin-bottom:140px;

}

.timeline-item.left{

    padding-right:80px;

}

.timeline-item.right{

    margin-left:50%;

    padding-left:80px;

}

.timeline-dot{

    position:absolute;

    top:45px;

    width:26px;

    height:26px;

    border-radius:50%;

    background:var(--green);

    box-shadow:

    0 0 20px var(--green),

    0 0 40px var(--green);

    animation:dotPulse 2s infinite;

}

.left .timeline-dot{

    right:-13px;

}

.right .timeline-dot{

    left:-13px;

}

@keyframes dotPulse{

    50%{

        transform:scale(1.3);

    }

}

.platinum{

    background:gold;

    box-shadow:

    0 0 25px gold,

    0 0 60px orange;

}

.timeline-card{

    position:relative;

    overflow:hidden;

    padding:45px;

    border-radius:30px;

    background:rgba(255,255,255,.05);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    transition:.45s;

}

.timeline-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    130deg,

    transparent,

    rgba(255,255,255,.05),

    transparent

    );

    transform:translateX(-120%);

    transition:1s;

}

.timeline-card:hover::before{

    transform:translateX(120%);

}

.timeline-card:hover{

    transform:

    translateY(-12px)

    scale(1.02);

    border-color:var(--green);

    box-shadow:

    0 0 40px rgba(69,224,38,.35);

}

.year{

    display:inline-block;

    margin-bottom:25px;

    padding:10px 22px;

    border-radius:40px;

    background:rgba(69,224,38,.12);

    color:var(--green);

    font-weight:bold;

    letter-spacing:3px;

}

.timeline-card h3{

    font-size:2rem;

    margin-bottom:20px;

    color:white;

}

.timeline-card p{

    line-height:2;

    color:var(--text2);

}

.platinum-card{

    border:2px solid gold;

    background:

    linear-gradient(

    145deg,

    rgba(255,215,0,.08),

    rgba(255,255,255,.04)

    );

}

.platinum-card h3{

    color:gold;

}

.left::after{

    content:"";

    position:absolute;

    top:55px;

    right:0;

    width:80px;

    height:3px;

    background:

    linear-gradient(

    to left,

    var(--green),

    transparent

    );

}

.right::after{

    content:"";

    position:absolute;

    top:55px;

    left:0;

    width:80px;

    height:3px;

    background:

    linear-gradient(

    to right,

    var(--green),

    transparent

    );

}


@media(max-width:1000px){

.timeline::before{

left:20px;

}

.timeline-item{

width:100%;

padding-left:70px !important;

padding-right:0 !important;

margin-left:0;

}

.timeline-dot{

left:8px !important;

right:auto;

}

.left::after,
.right::after{

left:20px;

width:40px;

}

}

/*=========================================================
ANIMAÇÕES AO ROLAR A PÁGINA
=========================================================*/

.reveal{

    opacity:0;

    transform:translateY(80px);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:translateY(0);

}

/*=========================================================
FLOAT
=========================================================*/

.timeline-card,
.stat-card,
.media-card,
.social-card{

    animation:floatCard 8s ease-in-out infinite;

}

@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*=========================================================
SCANNER
=========================================================*/

.timeline-card::after,
.stat-card::after,
.media-card::after{

    content:"";

    position:absolute;

    top:-100%;

    left:-50%;

    width:200%;

    height:80px;

    background:

    linear-gradient(

        transparent,

        rgba(255,255,255,.08),

        transparent

    );

    transform:rotate(20deg);

    animation:scanner 6s linear infinite;

}

@keyframes scanner{

    from{

        top:-150%;

    }

    to{

        top:250%;

    }

}

/*=========================================================
NEON
=========================================================*/

.hero h1{

    text-shadow:

        0 0 10px #45E026,

        0 0 30px rgba(69,224,38,.6),

        0 0 80px rgba(69,224,38,.3);

}

.section-title h2{

    text-shadow:

        0 0 15px rgba(69,224,38,.3);

}

/*=========================================================
HUD
=========================================================*/

.hero::before{

    content:"SYSTEM ONLINE";

    position:absolute;

    left:40px;

    top:160px;

    color:rgba(69,224,38,.4);

    letter-spacing:6px;

    font-size:.75rem;

}

.hero::after{

    content:"RENAN VALLE DATABASE";

    position:absolute;

    right:40px;

    bottom:80px;

    color:rgba(0,255,255,.35);

    letter-spacing:4px;

    font-size:.8rem;

}

.corner{

    position:absolute;

    width:45px;

    height:45px;

    border-top:3px solid #45E026;

    border-left:3px solid #45E026;

}

.corner.top-right{

    right:20px;

    top:20px;

    transform:rotate(90deg);

}

.corner.bottom-left{

    left:20px;

    bottom:20px;

    transform:rotate(-90deg);

}

.mouse-light{

    position:fixed;

    width:450px;

    height:450px;

    border-radius:50%;

    pointer-events:none;

    background:

        radial-gradient(

            circle,

            rgba(69,224,38,.12),

            transparent 70%

        );

    mix-blend-mode:screen;

    z-index:0;

    transform:translate(-50%,-50%);

}

/*=========================================================
SCROLL
=========================================================*/

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#060606;

}

::-webkit-scrollbar-thumb{

    background:

        linear-gradient(

            #45E026,

            cyan

        );

    border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

    background:#45E026;

}

::selection{

    background:#45E026;

    color:#000;

}

.glass{

    background:rgba(255,255,255,.05);

    backdrop-filter:blur(25px);

    border:1px solid rgba(255,255,255,.08);

}

.rotate-light{

    position:absolute;

    inset:-150px;

    border-radius:50%;

    background:

        conic-gradient(

            transparent,

            rgba(69,224,38,.15),

            transparent,

            rgba(0,255,255,.15),

            transparent

        );

    animation:rotateLight 18s linear infinite;

}

@keyframes rotateLight{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================================
SCROLL PROGRESS
=========================================================*/

#scroll-progress{

    position:fixed;

    top:0;
    left:0;

    width:0;

    height:4px;

    background:linear-gradient(
        90deg,
        #45E026,
        #00ffff);

    z-index:999999;

    box-shadow:
        0 0 20px #45E026,
        0 0 40px #00ffff;

}

/*=========================================================
CURSOR
=========================================================*/

.cursor{

    position:fixed;

    width:18px;
    height:18px;

    border:2px solid #45E026;

    border-radius:50%;

    pointer-events:none;

    transform:translate(-50%,-50%);

    transition:
        width .2s,
        height .2s,
        background .2s,
        border .2s;

    z-index:999999;

}

.cursor.big{

    width:45px;
    height:45px;

    background:rgba(69,224,38,.12);

    border-color:#00ffff;

}

/*=========================================================
BOTÃO TOPO
=========================================================*/

.top-btn{

    position:fixed;

    right:40px;
    bottom:40px;

    width:60px;
    height:60px;

    border:none;

    border-radius:50%;

    background:linear-gradient(
        45deg,
        #45E026,
        #00ffff);

    color:#000;

    font-size:24px;

    cursor:pointer;

    opacity:0;

    transform:translateY(80px);

    transition:.35s;

    z-index:999;

}

.top-btn.show{

    opacity:1;

    transform:translateY(0);

}

.top-btn:hover{

    transform:
        translateY(-8px)
        scale(1.1);

    box-shadow:

        0 0 20px #45E026,

        0 0 60px rgba(69,224,38,.4);

}

/*=========================================================
STATUS ONLINE
=========================================================*/

.status{

    width:14px;
    height:14px;

    border-radius:50%;

    background:#666;

    display:inline-block;

}

.status.online{

    background:#45E026;

    box-shadow:

        0 0 15px #45E026,

        0 0 30px #45E026;

}

/*=========================================================
ANIMAÇÕES GERAIS
=========================================================*/

.fade-up{

    animation:fadeUp .8s ease forwards;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(60px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.zoom{

    animation:zoom 1s ease;

}

@keyframes zoom{

    from{

        transform:scale(.8);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

/*=========================================================
EFEITO NAS IMAGENS
=========================================================*/

.photo-box img{

    transition:1s;

}

.photo-box:hover img{

    transform:scale(1.08);

}

/*=========================================================
HOVER DOS CARDS
=========================================================*/

.timeline-card:hover,
.stat-card:hover,
.media-card:hover,
.social-card:hover{

    border-color:#45E026;

    box-shadow:

        0 0 25px rgba(69,224,38,.25),

        inset 0 0 20px rgba(69,224,38,.05);

}

/*=========================================================
BOTÕES
=========================================================*/

button,
.hero-btn,
.cta-buttons a{

    transition:.35s;

}

button:hover,
.hero-btn:hover,
.cta-buttons a:hover{

    filter:brightness(1.15);

}

/*=========================================================
RODAPÉ
=========================================================*/

footer{

    padding:100px 30px;

    text-align:center;

    border-top:1px solid rgba(255,255,255,.05);

}

.footer-line{

    width:250px;

    height:2px;

    margin:auto;

    margin-bottom:40px;

    background:linear-gradient(
        90deg,
        transparent,
        #45E026,
        transparent);

}

footer h2{

    font-size:2.2rem;

    color:#45E026;

    margin-bottom:20px;

}

footer p{

    color:#999;

    letter-spacing:3px;

}

/*=========================================================
RESPONSIVO
=========================================================*/

@media(max-width:1200px){

.hero{

    flex-direction:column;

    text-align:center;

}

.hero-left,
.hero-right{

    width:100%;

}

.photo-box{

    width:420px;
    height:550px;

}

}

@media(max-width:900px){

nav{

    flex-direction:column;

    gap:25px;

}

nav ul{

    flex-wrap:wrap;

    justify-content:center;

}

.section-title h2{

    font-size:2.8rem;

}

.hero h1{

    font-size:4rem;

}

.photo-box{

    width:330px;

    height:440px;

}

.timeline-card{

    padding:30px;

}

}

@media(max-width:600px){

.hero{

    padding-top:130px;

}

.hero h1{

    font-size:3rem;

}

.hero h2{

    justify-content:center;

}

.photo-box{

    width:270px;

    height:360px;

}

.top-btn{

    right:20px;

    bottom:20px;

}

}
/* 2026 final audit: accessibility + responsive hardening */
section[id]{scroll-margin-top:100px}
nav a:focus-visible,.hero-btn:focus-visible{outline:2px solid var(--green);outline-offset:5px}
.stats-section{text-align:center}
img{max-width:100%}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1!important;transform:none!important}#loading{display:none!important}}

.logo{display:flex;align-items:center;gap:10px}.logo img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(57,255,20,.25))}.logo span{color:var(--green);font-weight:800;letter-spacing:.08em}@media(max-width:600px){.logo span{display:none}.logo img{width:42px;height:42px}}


/* R28 — Resultados + tema unificado */
.trajectory-theme-toggle{width:48px;height:48px;border-radius:50%;border:1px solid var(--border);background:rgba(255,255,255,.045);color:var(--text);display:grid;place-items:center;font-size:20px;cursor:pointer;transition:.25s;flex:0 0 auto}
.trajectory-theme-toggle:hover{border-color:var(--green);box-shadow:0 0 22px rgba(69,224,38,.18);transform:translateY(-2px)}
.stats-section{position:relative;padding:120px max(5vw,24px);overflow:hidden}
.stats-section .section-title{max-width:1000px;margin:0 auto 54px}
.stats-section .section-title h2{font-size:clamp(38px,5.4vw,76px);line-height:1.03;margin-top:14px}
.stats-section .section-title p{max-width:760px;margin:24px auto 0;line-height:1.7}
.stats-grid{width:min(1280px,100%);margin:0 auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
.stat-card{position:relative;min-height:245px;padding:38px 30px;border:1px solid var(--border);border-radius:26px;background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025));display:flex;flex-direction:column;align-items:flex-start;justify-content:center;overflow:hidden;text-align:left;animation:none!important;transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.stat-card::after{display:none!important}
.stat-card::before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-65px;top:-65px;background:radial-gradient(circle,rgba(69,224,38,.16),transparent 68%);pointer-events:none}
.stat-card .card-glow{position:absolute;inset:auto -30% -65% 20%;height:150px;background:radial-gradient(ellipse,rgba(0,232,255,.09),transparent 65%);pointer-events:none}
.stat-card .counter,.stat-card>h3{position:relative;font-size:clamp(42px,4.4vw,66px);line-height:1;color:var(--text);text-shadow:0 0 24px rgba(69,224,38,.18);margin:0 0 14px}
.stat-card>span{position:relative;color:var(--text2);font-size:13px;line-height:1.55;letter-spacing:.13em;max-width:240px}
.stat-card .progress{position:relative;width:100%;height:4px;margin-top:28px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden}
.stat-card .progress-bar{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--cyan));box-shadow:0 0 14px rgba(69,224,38,.35)}
.p100{width:100%}.p95{width:95%}.p90{width:90%}.p85{width:85%}
.stat-card:hover{transform:translateY(-7px)!important;border-color:rgba(69,224,38,.48);box-shadow:0 18px 45px rgba(0,0,0,.22)}
.stat-card.platinum{grid-column:span 1;background:linear-gradient(145deg,#ffd928,#ffb800);color:#16130a;border-color:rgba(255,221,70,.7);box-shadow:0 18px 55px rgba(255,190,0,.14)}
.stat-card.platinum .platinum-icon{font-size:32px;margin-bottom:14px}
.stat-card.platinum>h3{font-size:clamp(24px,2.3vw,34px);color:#16130a;text-shadow:none;margin-bottom:10px}
.stat-card.platinum>p{font-family:inherit;font-size:13px;line-height:1.65;color:rgba(22,19,10,.72)}

body.light{--bg:#f4f7fb;--bg2:#eaf0f6;--card:rgba(255,255,255,.78);--glass:rgba(255,255,255,.7);--border:rgba(8,18,30,.12);--text:#08121e;--text2:#5b6674;background:var(--bg);color:var(--text)}
body.light::before{background:radial-gradient(circle at 20% 20%,rgba(0,190,210,.10),transparent 30%),radial-gradient(circle at 80% 80%,rgba(69,224,38,.11),transparent 35%),linear-gradient(180deg,#f8fbff,#edf4f8,#f8fbff)}
body.light header{background:rgba(248,251,255,.82)!important;border-bottom:1px solid rgba(8,18,30,.08);backdrop-filter:blur(18px)}
body.light nav a{color:#273240} body.light nav a:hover{color:#08121e}
body.light .stat-card,body.light .timeline-card,body.light .media-card,body.light .social-card{background:rgba(255,255,255,.72);border-color:rgba(8,18,30,.10);box-shadow:0 18px 45px rgba(23,42,65,.07)}
body.light .stat-card .progress{background:rgba(8,18,30,.10)}
body.light .grid-bg{opacity:.24}
body.light .section-title h2,body.light .section-title p,body.light .stat-card .counter,body.light .stat-card>h3{color:var(--text)}
body.light .stat-card>span{color:var(--text2)}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-section{padding-top:90px}.trajectory-theme-toggle{width:44px;height:44px}}
@media(max-width:600px){.stats-grid{grid-template-columns:1fr;gap:16px}.stat-card{min-height:190px;padding:30px 25px}.stat-card.platinum{grid-column:auto}.stats-section .section-title{margin-bottom:36px}.stats-section .section-title h2{font-size:clamp(34px,11vw,52px)}nav{gap:12px}.trajectory-theme-toggle{width:40px;height:40px;font-size:17px}}

/* R29 · SISTEMA ONLINE / AERO SOCIAL */
.digital-panel{padding:110px 32px 90px;position:relative;z-index:2}.system-console{max-width:1180px;margin:0 auto;padding:54px;border:1px solid rgba(69,224,38,.24);border-radius:34px;background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018));box-shadow:0 35px 90px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(24px);text-align:center;overflow:hidden;position:relative}.system-console:before{content:"";position:absolute;inset:-40% 45% 20% -10%;background:radial-gradient(circle,rgba(0,232,255,.16),transparent 68%);pointer-events:none}.system-kicker{font-size:.7rem;letter-spacing:.24em;color:#9ba6b3}.status-orb,.online-pulse{display:inline-block;width:9px;height:9px;border-radius:50%;background:#45e026;box-shadow:0 0 16px #45e026;margin-right:9px}.system-console h2{font-size:clamp(2.4rem,5vw,5.2rem);line-height:1;margin:14px 0 18px;letter-spacing:.03em}.system-console h2 span{color:#45e026;text-shadow:0 0 30px rgba(69,224,38,.28)}.system-lead{color:#9ba6b3;max-width:700px;margin:0 auto 38px}.system-network-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.system-network{min-height:150px;padding:22px;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 18px 40px rgba(0,0,0,.18);display:grid;grid-template-columns:58px 1fr 24px;align-items:center;gap:14px;text-decoration:none;color:#fff;text-align:left;transition:.32s cubic-bezier(.2,.8,.2,1);position:relative;overflow:hidden}.system-network:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.18) 45%,transparent 70%);transform:translateX(-130%);transition:.55s}.system-network:hover{transform:translateY(-8px) scale(1.02);border-color:rgba(69,224,38,.5);box-shadow:0 24px 60px rgba(0,0,0,.28),0 0 35px rgba(69,224,38,.09),inset 0 1px 0 rgba(255,255,255,.26)}.system-network:hover:before{transform:translateX(130%)}.system-network img{width:58px;height:58px;object-fit:contain;border-radius:14px}.system-network b{display:block;font-size:.9rem}.system-network small{display:block;margin-top:7px;color:#98a3b0;font-size:.5rem;letter-spacing:.14em}.system-network i{font-style:normal;font-size:1.2rem;color:#45e026}.network-note{font-size:.62rem;color:#66717f;margin-top:24px;letter-spacing:.06em}
html[data-theme="light"] .system-console{background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(240,247,244,.72));box-shadow:0 30px 75px rgba(19,45,37,.12),inset 0 1px 0 #fff}.aero-social{position:fixed;right:24px;bottom:24px;z-index:9990}.aero-trigger{height:54px;padding:0 18px;border-radius:18px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(30,44,58,.72),rgba(8,16,26,.72));color:#fff;backdrop-filter:blur(22px) saturate(150%);box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18);font:700 .62rem Orbitron;letter-spacing:.12em;cursor:pointer}.aero-flyout{position:absolute;right:0;bottom:66px;width:270px;padding:13px;border-radius:24px;border:1px solid rgba(255,255,255,.18);background:linear-gradient(145deg,rgba(34,48,65,.82),rgba(7,14,24,.82));backdrop-filter:blur(28px) saturate(165%);box-shadow:0 25px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18);opacity:0;visibility:hidden;transform:translateY(12px) scale(.96);transform-origin:bottom right;transition:.25s}.aero-social:hover .aero-flyout,.aero-social:focus-within .aero-flyout,.aero-social.open .aero-flyout{opacity:1;visibility:visible;transform:none}.aero-title{display:block;padding:8px 10px 12px;color:#72ff58;font-size:.58rem;letter-spacing:.18em}.aero-flyout a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:15px;color:#fff;text-decoration:none;transition:.2s}.aero-flyout a:hover{background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.15);transform:translateX(-3px)}.aero-flyout img{width:36px;height:36px;object-fit:contain;border-radius:9px}.aero-flyout span{font-size:.68rem}html[data-theme="light"] .aero-trigger,html[data-theme="light"] .aero-flyout{background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(215,232,241,.78));color:#14202a;border-color:rgba(255,255,255,.9);box-shadow:0 20px 60px rgba(35,64,75,.2),inset 0 1px 0 #fff}html[data-theme="light"] .aero-flyout a{color:#14202a}
@media(max-width:900px){.digital-panel{padding:80px 18px}.system-console{padding:34px 22px}.system-network-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.system-network-grid{grid-template-columns:1fr}.system-network{min-height:94px}.aero-social{right:14px;bottom:14px}.aero-trigger{width:50px;padding:0;font-size:0}.aero-trigger b{display:none}.aero-trigger .online-pulse{margin:0}.aero-flyout{width:245px}}

/* R30 · Sistema Online mini player + subtle availability beacon */
.aero-trigger{position:relative;isolation:isolate;animation:onlineBreath 3.4s ease-in-out infinite}
.aero-trigger::after{content:"";position:absolute;inset:-5px;border-radius:22px;border:1px solid rgba(69,224,38,.28);opacity:0;pointer-events:none;animation:onlineRing 3.4s ease-out infinite}
@keyframes onlineBreath{0%,100%{box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 rgba(69,224,38,0)}50%{box-shadow:0 18px 50px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.18),0 0 24px rgba(69,224,38,.24)}}
@keyframes onlineRing{0%,35%{transform:scale(.96);opacity:0}50%{opacity:.5}78%,100%{transform:scale(1.12);opacity:0}}
.aero-now{display:grid;grid-template-columns:48px 38px minmax(0,1fr);align-items:center;gap:9px;margin:0 3px 10px;padding:9px;border:1px solid rgba(255,255,255,.14);border-radius:17px;background:linear-gradient(110deg,rgba(69,224,38,.11),rgba(255,255,255,.045));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.aero-now-art{width:48px!important;height:48px!important;object-fit:contain!important;border-radius:0!important;filter:drop-shadow(0 7px 9px rgba(0,0,0,.28))}
.aero-now-play{width:36px;height:36px;border:1px solid rgba(69,224,38,.45);border-radius:50%;background:var(--primary,#45e026);color:#061006;display:grid;place-items:center;cursor:pointer;font-size:.78rem;box-shadow:0 0 18px rgba(69,224,38,.2);transition:.2s}
.aero-now-play:hover{transform:scale(1.08);box-shadow:0 0 25px rgba(69,224,38,.38)}
.aero-now-copy{min-width:0;overflow:hidden}.aero-now-copy small{display:block;color:var(--primary,#45e026);font-size:.46rem;letter-spacing:.13em;margin-bottom:3px}.aero-track-window{overflow:hidden;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.aero-track-name{display:inline-block;min-width:100%;padding-left:100%;font-size:.58rem!important;white-space:nowrap;animation:aeroTrack 11s linear infinite;color:inherit}
@keyframes aeroTrack{from{transform:translateX(0)}to{transform:translateX(-200%)}}
.aero-flyout{width:310px}
body.light .aero-now,html[data-theme="light"] .aero-now{border-color:rgba(16,40,32,.12);background:linear-gradient(110deg,rgba(69,224,38,.12),rgba(255,255,255,.55))}
@media(prefers-reduced-motion:reduce){.aero-trigger,.aero-trigger::after,.aero-track-name{animation:none}}
@media(max-width:620px){.aero-flyout{width:min(310px,calc(100vw - 28px))}}