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

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Poppins", sans-serif;
    background: #080b16;
    color: #f4f7ff;
    overflow-x: hidden;
}


/* =========================================================
   ACESSIBILIDADE
========================================================= */

.skip-link {
    position: fixed;
    top: 10px;
    left: 10px;

    z-index: 100001;

    padding: 13px 18px;

    background: #ffffff;
    color: #000000;

    border-radius: 9px;

    font-weight: 700;

    text-decoration: none;

    transform: translateY(-150px);

    transition: transform .2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}


/* =========================================================
   PAINEL DE ACESSIBILIDADE
========================================================= */

.accessibility-panel {
    position: fixed;

    left: 15px;
    bottom: 15px;

    z-index: 10000;

    max-width: calc(100vw - 30px);

    padding: 13px 15px;

    border-radius: 15px;

    background: rgba(8, 11, 22, .97);

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

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .45);

    backdrop-filter: blur(15px);

    color: white;
}

.accessibility-panel > strong {
    display: block;

    margin-bottom: 9px;

    color: #4db8ff;

    font-family: "Orbitron";

    font-size: 10px;

    letter-spacing: 1px;

    text-align: center;
}

.accessibility-controls {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;
}

.accessibility-controls button,
.accessibility-controls span {
    min-height: 42px;

    padding: 9px 12px;

    border-radius: 9px;

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

    background: #111827;

    color: white;

    font-family: "Poppins";

    font-weight: 600;

    cursor: pointer;
}

.accessibility-controls button:hover {
    border-color: #4db8ff;
}

.accessibility-controls span {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 56px;

    cursor: default;

    color: #4db8ff;
}


/* =========================================================
   FOCO VISÍVEL
========================================================= */

:focus-visible {
    outline: 3px solid #ffffff !important;

    outline-offset: 4px !important;
}

body.usando-teclado :focus-visible {
    box-shadow:
        0 0 0 5px #0077ff !important;
}


/* =========================================================
   ABERTURA
========================================================= */

#pokemonIntro {
    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(239,35,60,.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #05070e,
            #0b1020 50%,
            #05070e
        );

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 99999;

    transition:
        opacity .7s ease,
        visibility .7s ease;
}

#pokemonIntro::before {
    content: "";

    position: absolute;

    inset: 0;

    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: 45px 45px;
}

.intro-content {
    position: relative;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    z-index: 2;

    animation:
        introEntrada 1s ease;
}

@keyframes introEntrada {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            scale(.9);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}

.intro-pokeball {
    width: 150px;
    height: 150px;

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            #ef233c 0%,
            #ef233c 46%,
            #080b16 46%,
            #080b16 54%,
            #f5f7fb 54%,
            #f5f7fb 100%
        );

    position: relative;

    box-shadow:
        0 0 30px rgba(239,35,60,.4),
        0 0 90px rgba(239,35,60,.15);

    animation:
        introPokeball
        2s
        ease-in-out
        infinite;
}

@keyframes introPokeball {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }

}

.intro-pokeball-center {
    width: 48px;
    height: 48px;

    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background: #080b16;

    border: 9px solid white;

    box-shadow:
        0 0 20px rgba(255,255,255,.5);
}

.intro-mini {
    font-family: "Orbitron";

    font-size: 11px;

    letter-spacing: 4px;

    color: #4db8ff;

    margin-top: 35px;
}

.intro-content h1 {
    font-family: "Orbitron";

    font-size:
        clamp(45px, 8vw, 80px);

    margin: 10px 0;

    line-height: 1;
}

.intro-content h1 span {
    color: #ef233c;
}

.intro-content p {
    color: #9da9c0;

    font-size: 14px;

    letter-spacing: 2px;
}

.intro-loading {
    display: flex;

    gap: 8px;

    margin: 25px 0;
}

.intro-loading span {
    width: 8px;
    height: 8px;

    background: #ef233c;

    border-radius: 50%;

    animation:
        introLoading
        1s
        infinite;
}

.intro-loading span:nth-child(2) {
    animation-delay: .15s;
}

.intro-loading span:nth-child(3) {
    animation-delay: .3s;
}

@keyframes introLoading {

    0%,
    100% {
        opacity: .2;

        transform:
            translateY(0);
    }

    50% {
        opacity: 1;

        transform:
            translateY(-6px);
    }

}

#entrarSite {
    border:
        1px solid
        rgba(255,255,255,.2);

    background:
        linear-gradient(
            135deg,
            #ef233c,
            #b51735
        );

    color: white;

    padding: 15px 25px;

    min-height: 48px;

    border-radius: 10px;

    font-family: "Orbitron";

    font-size: 11px;

    letter-spacing: 1px;

    cursor: pointer;

    box-shadow:
        0 10px 35px
        rgba(239,35,60,.25);

    transition: .3s;
}

#entrarSite:hover {
    transform:
        translateY(-4px)
        scale(1.03);
}

#pokemonIntro.sair {
    opacity: 0;

    visibility: hidden;

    pointer-events: none;
}


/* =========================================================
   FUNDO
========================================================= */

body::before {
    content: "";

    position: fixed;

    inset: 0;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(0,119,255,.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(255,0,70,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(0,255,180,.08),
            transparent 30%
        );

    pointer-events: none;

    z-index: -2;
}

.background-grid {
    position: fixed;

    inset: 0;

    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;

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   TOPO
========================================================= */

.topo {
    min-height: 90px;

    padding: 20px 6%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    background:
        rgba(5,8,18,.9);

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

    position: sticky;

    top: 0;

    z-index: 1000;

    backdrop-filter: blur(15px);
}

.logo {
    display: flex;

    align-items: center;

    gap: 14px;
}

.logo-mini {
    font-family: "Orbitron";

    font-size: 9px;

    color: #7f8ba3;

    letter-spacing: 2px;
}

.logo h1 {
    font-family: "Orbitron";

    font-size: 25px;

    line-height: 1;
}

.logo h1 span {
    color: #ff3152;
}

.header-info {
    display: flex;

    gap: 15px;
}

.header-info span {
    padding: 7px 12px;

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

    border-radius: 20px;

    font-size: 11px;

    color: #aab5cc;
}


/* =========================================================
   POKÉBALL
========================================================= */

.pokeball {
    width: 45px;
    height: 45px;

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            #ef233c 0%,
            #ef233c 46%,
            #111827 46%,
            #111827 54%,
            #f5f7fb 54%,
            #f5f7fb 100%
        );

    position: relative;

    box-shadow:
        0 0 25px
        rgba(239,35,60,.3);
}

.pokeball-center {
    width: 15px;
    height: 15px;

    background: #080b16;

    border:
        4px solid
        #f5f7fb;

    border-radius: 50%;

    position: absolute;

    left: 50%;
    top: 50%;

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

.pokeball.small {
    width: 30px;
    height: 30px;
}

.pokeball.small .pokeball-center {
    width: 10px;
    height: 10px;

    border-width: 2px;
}


/* =========================================================
   MENU
========================================================= */

.menu {
    display: flex;

    justify-content: center;

    gap: 12px;

    padding: 20px 5%;

    position: sticky;

    top: 90px;

    z-index: 999;

    background:
        rgba(8,11,22,.82);

    backdrop-filter: blur(15px);

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

.menu-btn {
    border:
        1px solid
        rgba(255,255,255,.1);

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

    color: #9da9c0;

    padding: 13px 20px;

    min-height: 48px;

    border-radius: 12px;

    cursor: pointer;

    font-family: "Poppins";

    display: flex;

    align-items: center;

    gap: 9px;

    transition: .3s;
}

.menu-btn:hover {
    border-color: #ff3152;

    color: white;

    transform:
        translateY(-2px);
}

.menu-btn.active {
    background:
        linear-gradient(
            135deg,
            #ef233c,
            #b51735
        );

    border-color: transparent;

    color: white;

    box-shadow:
        0 8px 30px
        rgba(239,35,60,.25);
}


/* =========================================================
   ABAS
========================================================= */

.aba {
    display: none;

    width: 100%;
}

.aba.ativa {
    display: block;

    animation:
        aparecer
        .45s
        ease;
}

@keyframes aparecer {

    from {
        opacity: 0;

        transform:
            translateY(15px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


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

.hero {
    min-height: 620px;

    padding: 90px 8%;

    display: grid;

    grid-template-columns:
        1.1fr .9fr;

    align-items: center;

    gap: 50px;
}

.tag,
.badge {
    font-family: "Orbitron";

    font-size: 10px;

    letter-spacing: 2px;

    color: #4db8ff;

    padding: 7px 11px;

    border:
        1px solid
        rgba(77,184,255,.3);

    border-radius: 5px;

    display: inline-block;
}

.hero h2 {
    font-family: "Orbitron";

    font-size:
        clamp(
            35px,
            6vw,
            70px
        );

    line-height: 1.05;

    margin: 20px 0;
}

.hero h2 strong {
    display: block;

    color: #ff3152;
}

.hero p {
    max-width: 650px;

    color: #9da9c0;

    line-height: 1.8;

    font-size: 16px;
}

.hero-buttons {
    display: flex;

    gap: 12px;

    margin-top: 30px;
}

.hero-buttons button,
.pokemon-button,
.youtube-button {
    border: none;

    padding: 14px 22px;

    min-height: 48px;

    border-radius: 10px;

    cursor: pointer;

    font-weight: 700;

    color: white;

    background:
        linear-gradient(
            135deg,
            #ef233c,
            #b51735
        );

    transition: .3s;

    text-decoration: none;

    display: inline-block;
}

.hero-buttons button:hover,
.pokemon-button:hover,
.youtube-button:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 10px 30px
        rgba(239,35,60,.3);
}

.hero-buttons .secondary {
    background: transparent;

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


/* =========================================================
   ORBIT
========================================================= */

.hero-orbit {
    width: 360px;
    height: 360px;

    margin: auto;

    position: relative;
}

.orbit {
    position: absolute;

    border:
        1px solid
        rgba(77,184,255,.25);

    border-radius: 50%;

    left: 50%;
    top: 50%;

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

    animation:
        orbitar
        12s
        linear
        infinite;
}

.orbit-1 {
    width: 220px;
    height: 220px;
}

.orbit-2 {
    width: 290px;
    height: 290px;

    animation-duration: 18s;
}

.orbit-3 {
    width: 350px;
    height: 350px;

    animation-duration: 25s;
}

@keyframes orbitar {

    to {
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

}

.pokemon-core {
    width: 130px;
    height: 130px;

    position: absolute;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ff5d73,
            #ef233c 40%,
            #7d0d22
        );

    box-shadow:
        0 0 40px
        rgba(239,35,60,.5),

        inset
        0 -15px 30px
        rgba(0,0,0,.3);
}

.core-eye {
    position: absolute;

    width: 18px;
    height: 25px;

    background: #10131f;

    border-radius: 50%;

    left: 35px;
    top: 40px;
}

.core-eye.right {
    left: auto;

    right: 35px;
}

.core-energy {
    position: absolute;

    width: 35px;
    height: 35px;

    background: white;

    border-radius: 50%;

    left: 50%;
    bottom: 20px;

    transform:
        translateX(-50%);

    box-shadow:
        0 0 25px #fff;
}


/* =========================================================
   BANNERS
========================================================= */

.page-banner {
    padding: 90px 8% 70px;

    background:
        linear-gradient(
            90deg,
            rgba(0,119,255,.12),
            transparent
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(255,49,82,.12),
            transparent 30%
        );
}

.page-banner h2 {
    font-family: "Orbitron";

    font-size:
        clamp(
            40px,
            6vw,
            70px
        );

    line-height: 1.05;

    margin: 20px 0;
}

.page-banner h2 strong {
    color: #4db8ff;

    display: block;
}

.page-banner p {
    color: #9da9c0;

    max-width: 700px;

    line-height: 1.8;
}

.fake-banner {
    background:
        linear-gradient(
            90deg,
            rgba(239,35,60,.13),
            transparent
        ),

        radial-gradient(
            circle at 80% 30%,
            rgba(77,184,255,.1),
            transparent 30%
        );
}

.fake-banner h2 strong {
    color: #ff3152;
}


/* =========================================================
   CONTEÚDO
========================================================= */

.conteudo {
    width:
        min(
            1150px,
            90%
        );

    margin: auto;

    padding: 80px 0;
}

.section-title {
    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 45px;
}

.section-title > span {
    font-family: "Orbitron";

    font-size: 24px;

    color: #ff3152;
}

.section-title small {
    color: #4db8ff;

    font-family: "Orbitron";

    font-size: 10px;

    letter-spacing: 2px;
}

.section-title h2 {
    font-family: "Orbitron";

    font-size:
        clamp(
            25px,
            4vw,
            40px
        );

    margin-top: 5px;
}


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

.timeline {
    position: relative;

    padding-left: 35px;
}

.timeline::before {
    content: "";

    position: absolute;

    left: 11px;

    top: 0;

    bottom: 0;

    width: 2px;

    background:
        linear-gradient(
            #ef233c,
            #4db8ff,
            transparent
        );
}

.timeline-item {
    display: flex;

    gap: 20px;

    margin-bottom: 35px;

    position: relative;
}

.timeline-icon {
    width: 25px;
    height: 25px;

    border-radius: 50%;

    background: #111827;

    border:
        2px solid
        #4db8ff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 8px;

    position: absolute;

    left: -35px;

    color: #4db8ff;
}

.timeline-content {
    background:
        rgba(255,255,255,.035);

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

    padding: 25px;

    border-radius: 14px;

    width: 100%;
}

.timeline-content h3 {
    margin-bottom: 10px;
}

.timeline-content p {
    color: #9da9c0;

    line-height: 1.7;
}


/* =========================================================
   NEWTON
========================================================= */

.scientist-card {
    display: grid;

    grid-template-columns:
        260px 1fr;

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

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

    border-radius: 20px;

    overflow: hidden;
}

.newton-portrait {
    min-height: 300px;

    display: grid;

    place-items: center;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.12),
            transparent 50%
        ),

        linear-gradient(
            135deg,
            #151c2e,
            #080b16
        );
}

.portrait-symbol {
    width: 150px;
    height: 150px;

    border-radius: 50%;

    display: grid;

    place-items: center;

    font-family: "Orbitron";

    font-size: 70px;

    border:
        2px solid
        #4db8ff;

    color: #4db8ff;
}

.scientist-info {
    padding: 40px;
}

.scientist-info h3 {
    font-family: "Orbitron";

    font-size: 38px;

    margin: 20px 0 5px;
}

.periodo {
    color: #ff3152 !important;

    font-family: "Orbitron";

    margin-bottom: 20px;
}

.scientist-info p {
    color: #aab5cc;

    line-height: 1.8;

    margin-bottom: 15px;
}


/* =========================================================
   CARDS
========================================================= */

.cards-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 20px;

    margin-top: 25px;
}

.info-card {
    padding: 30px;

    border-radius: 16px;

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

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

    transition: .3s;
}

.info-card:hover,
.experiment-card:hover,
.technology-card:hover,
.robot-image-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(77,184,255,.4);
}

.card-icon {
    font-size: 30px;

    margin-bottom: 20px;
}

.info-card h3 {
    margin-bottom: 12px;
}

.info-card p {
    color: #98a4bb;

    line-height: 1.7;
}


/* =========================================================
   DISCO
========================================================= */

.disco-layout {
    display: grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap: 50px;

    align-items: center;
}

.disco-area {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 30px;
}

#discoNewton {
    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        conic-gradient(
            #ef233c 0deg 51.42deg,
            #ff7b00 51.42deg 102.84deg,
            #ffd60a 102.84deg 154.26deg,
            #38b000 154.26deg 205.68deg,
            #0077ff 205.68deg 257.1deg,
            #4b0082 257.1deg 308.52deg,
            #8f00ff 308.52deg 360deg
        );

    border:
        8px solid
        #171c2c;

    box-shadow:
        0 0 50px
        rgba(255,255,255,.08),

        inset
        0 0 30px
        rgba(0,0,0,.25);

    position: relative;
}

#discoNewton.girando {
    animation:
        discoGirar
        .08s
        linear
        infinite;
}

@keyframes discoGirar {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}

.disco-center {
    width: 40px;
    height: 40px;

    background: #111827;

    border:
        5px solid
        #f3f4f6;

    border-radius: 50%;

    position: absolute;

    left: 50%;
    top: 50%;

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

.disco-text h3 {
    font-family: "Orbitron";

    font-size: 27px;

    margin: 20px 0;
}

.disco-text p {
    color: #9da9c0;

    line-height: 1.8;

    margin-bottom: 15px;
}

.disco-controls {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 10px;

    flex-wrap: wrap;
}

.disco-stop {
    background:
        linear-gradient(
            135deg,
            #20283c,
            #111827
        ) !important;
}

.disco-status {
    width: 100%;

    text-align: center;

    color: #9da9c0;

    font-size: 13px;
}

.spectrum {
    display: flex;

    margin-top: 25px;

    height: 15px;

    border-radius: 20px;

    overflow: hidden;
}

.spectrum span {
    flex: 1;
}

.spectrum-legend {
    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(
                100px,
                1fr
            )
        );

    gap: 10px;

    margin-top: 14px;
}

.spectrum-legend span {
    display: flex;

    align-items: center;

    gap: 7px;

    color: #c4ccda;

    font-size: 11px;
}

.spectrum-legend i {
    width: 14px;
    height: 14px;

    border-radius: 50%;

    display: inline-block;

    border:
        1px solid
        white;

    flex-shrink: 0;
}

.legend-red {
    background: #ef233c;
}

.legend-orange {
    background: #ff7b00;
}

.legend-yellow {
    background: #ffd60a;
}

.legend-green {
    background: #38b000;
}

.legend-blue {
    background: #0077ff;
}

.legend-indigo {
    background: #4b0082;
}

.legend-violet {
    background: #8f00ff;
}


/* =========================================================
   EXPERIMENTOS
========================================================= */

.experiment-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 20px;
}

.experiment-card {
    padding: 30px;

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

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

    border-radius: 16px;

    transition: .3s;
}

.number {
    color: #ff3152;

    font-family: "Orbitron";

    font-size: 13px;
}

.experiment-card h3 {
    margin: 15px 0;
}

.experiment-card p {
    color: #98a4bb;

    line-height: 1.7;
}


/* =========================================================
   VÍDEOS
========================================================= */

.video-list {
    display: grid;

    gap: 25px;
}

.video-card {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

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

    border-radius: 18px;

    overflow: hidden;

    background:
        rgba(255,255,255,.035);
}

.video-preview {
    min-height: 260px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 20px;

    background:
        radial-gradient(
            circle,
            rgba(255,49,82,.25),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #151b2c,
            #070910
        );
}

.play-icon {
    width: 80px;
    height: 80px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: #ef233c;

    font-size: 25px;

    padding-left: 5px;

    box-shadow:
        0 0 40px
        rgba(239,35,60,.4);
}

.video-preview span {
    font-family: "Orbitron";

    font-size: 10px;

    color: #9da9c0;

    letter-spacing: 2px;
}

.video-info {
    padding: 40px;
}

.video-info h3 {
    font-family: "Orbitron";

    font-size: 25px;

    margin: 20px 0;
}

.video-info p {
    color: #9da9c0;

    line-height: 1.8;

    margin-bottom: 25px;
}


/* =========================================================
   IA
========================================================= */

.ai-box {
    display: grid;

    grid-template-columns:
        100px 1fr;

    gap: 30px;

    padding: 40px;

    border-radius: 20px;

    border:
        1px solid
        rgba(77,184,255,.2);

    background:
        linear-gradient(
            135deg,
            rgba(77,184,255,.07),
            rgba(239,35,60,.04)
        );
}

.ai-icon {
    width: 80px;
    height: 80px;

    display: grid;

    place-items: center;

    font-size: 35px;

    background:
        rgba(77,184,255,.1);

    border-radius: 20px;

    border:
        1px solid
        rgba(77,184,255,.25);
}

.ai-box h2 {
    font-family: "Orbitron";

    margin: 15px 0;
}

.ai-box p {
    color: #9da9c0;

    line-height: 1.8;

    margin-bottom: 12px;
}


/* =========================================================
   FONTES
========================================================= */

.source-box {
    display: grid;

    gap: 15px;

    padding: 30px;

    border-radius: 18px;

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

    background:
        rgba(255,255,255,.035);
}

.source-box p {
    color: #aab5cc;

    line-height: 1.7;

    padding: 15px;

    border-left:
        3px solid
        #4db8ff;

    background:
        rgba(255,255,255,.025);
}


/* =========================================================
   TECNOCIÊNCIA
========================================================= */

.future-card {
    display: grid;

    grid-template-columns:
        120px 1fr;

    gap: 30px;

    padding: 40px;

    border-radius: 20px;

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

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

.future-icon {
    font-size: 70px;

    display: grid;

    place-items: center;
}

.future-card h3 {
    font-family: "Orbitron";

    font-size: 25px;

    margin-bottom: 15px;
}

.future-card p {
    color: #9da9c0;

    line-height: 1.8;

    margin-bottom: 15px;
}

.connection {
    display: flex;

    gap: 15px;

    align-items: center;

    margin-top: 25px;

    flex-wrap: wrap;
}

.connection span {
    padding: 10px 15px;

    border-radius: 10px;

    background: #111827;

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

.connection b {
    color: #4db8ff;
}


/* =========================================================
   TECNOLOGIAS
========================================================= */

.intro-text {
    color: #9da9c0;

    line-height: 1.8;

    margin-bottom: 30px;

    max-width: 850px;
}

.technology-grid {
    display: grid;

    grid-template-columns:
        repeat(3,1fr);

    gap: 18px;
}

.technology-card {
    padding: 25px;

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

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

    border-radius: 16px;

    transition: .3s;

    position: relative;
}

.tech-number {
    position: absolute;

    top: 20px;

    right: 20px;

    font-family: "Orbitron";

    font-size: 9px;

    color: #58647b;
}

.tech-icon {
    font-size: 35px;

    margin-bottom: 20px;
}

.technology-card h3 {
    margin-bottom: 12px;
}

.technology-card p {
    color: #9da9c0;

    line-height: 1.7;

    margin-bottom: 20px;
}

.technology-card > span {
    font-size: 9px;

    color: #4db8ff;

    font-family: "Orbitron";

    letter-spacing: 1px;
}


/* =========================================================
   SOLUÇÃO
========================================================= */

.solution,
.chroma-card {
    border-radius: 22px;

    border:
        1px solid
        rgba(77,184,255,.2);

    background:
        linear-gradient(
            135deg,
            rgba(77,184,255,.08),
            rgba(255,255,255,.02)
        );

    overflow: hidden;
}

.solution-header,
.chroma-header {
    display: flex;

    align-items: center;

    gap: 20px;

    padding: 35px;

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

.solution-logo,
.chroma-logo {
    width: 70px;
    height: 70px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #0077ff,
            #00d4ff
        );

    font-family: "Orbitron";

    font-weight: bold;
}

.solution-header span,
.chroma-header span {
    font-family: "Orbitron";

    font-size: 9px;

    color: #4db8ff;

    letter-spacing: 1px;
}

.solution-header h3,
.chroma-header h3 {
    font-family: "Orbitron";

    font-size: 23px;

    margin-top: 7px;
}

.solution-grid,
.chroma-grid {
    display: grid;

    grid-template-columns:
        repeat(2,1fr);

    gap: 1px;

    background:
        rgba(255,255,255,.07);
}

.solution-grid > div,
.chroma-grid > div {
    padding: 30px;

    background: #0b0f1b;
}

.solution-grid h4,
.chroma-grid h4 {
    margin-bottom: 12px;
}

.solution-grid p,
.chroma-grid p {
    color: #9da9c0;

    line-height: 1.7;
}

.components {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    padding: 25px 35px;
}

.components span {
    padding: 9px 13px;

    border-radius: 20px;

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

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

    color: #aab5cc;

    font-size: 12px;
}


/* =========================================================
   CONCLUSÃO
========================================================= */

.conclusion {
    padding: 60px;

    text-align: center;

    border-radius: 25px;

    background:
        radial-gradient(
            circle at center,
            rgba(239,35,60,.15),
            transparent 60%
        );

    border:
        1px solid
        rgba(239,35,60,.15);
}

.conclusion > span,
.robot-conclusion > div > span {
    font-family: "Orbitron";

    color: #ff3152;

    font-size: 10px;

    letter-spacing: 2px;
}

.conclusion h2 {
    font-family: "Orbitron";

    font-size: 35px;

    max-width: 850px;

    margin: 20px auto;
}

.conclusion p {
    max-width: 750px;

    margin: auto;

    color: #9da9c0;

    line-height: 1.8;
}

.fake-conclusion {
    background:
        radial-gradient(
            circle at center,
            rgba(255,49,82,.15),
            transparent 60%
        );
}


/* =========================================================
   ROBÓTICA
========================================================= */

.robot-project {
    display: grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap: 40px;

    align-items: center;

    padding: 35px;

    border-radius: 20px;

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

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

.robot-images {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 15px;
}

.robot-image-card {
    background: #070910;

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

    border-radius: 15px;

    overflow: hidden;

    transition: .3s;
}

.robot-image-card img {
    display: block;

    width: 100%;

    height: 210px;

    object-fit: contain;

    background: #f4f4f4;
}

.robot-image-title {
    padding: 12px 15px;

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: "Orbitron";

    font-size: 11px;

    letter-spacing: 1px;
}

.robot-image-title span {
    font-size: 9px;

    color: #7d899f;
}

.fade-in-title {
    color: #ff4fb3;
}

.fade-out-title {
    color: #ff3152;
}

.robot-image-card p {
    padding:
        12px
        15px
        16px;

    color: #8f9ab0;

    font-size: 11px;

    line-height: 1.5;
}


/* =========================================================
   PWM
========================================================= */

.pwm-box {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 40px;

    align-items: center;

    padding: 35px;

    border-radius: 20px;

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

    background:
        rgba(255,255,255,.035);
}

.pwm-visual {
    min-height: 200px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #070910;

    border-radius: 15px;

    overflow: hidden;
}

.wave {
    display: flex;

    align-items: center;

    gap: 15px;

    height: 100px;
}

.wave span {
    width: 20px;

    background: #4db8ff;

    box-shadow:
        0 0 15px
        rgba(77,184,255,.5);

    animation:
        pwm
        1s
        infinite
        alternate;
}

.wave span:nth-child(1) {
    height: 40px;
}

.wave span:nth-child(2) {
    height: 90px;
}

.wave span:nth-child(3) {
    height: 60px;
}

.wave span:nth-child(4) {
    height: 95px;
}

.wave span:nth-child(5) {
    height: 45px;
}

@keyframes pwm {

    to {
        opacity: .4;
    }

}

.pwm-box h3 {
    font-family: "Orbitron";

    margin-bottom: 15px;
}

.pwm-box p {
    color: #9da9c0;

    line-height: 1.8;

    margin-bottom: 15px;
}


/* =========================================================
   RGB
========================================================= */

.rgb-project {
    display: grid;

    grid-template-columns:
        .7fr 1.3fr;

    gap: 40px;

    align-items: center;

    padding: 40px;

    border-radius: 20px;

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

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

.rgb-led {
    width: 180px;
    height: 180px;

    margin: auto;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            white,
            #4db8ff 25%,
            #ef233c 50%,
            transparent 70%
        );

    box-shadow:
        0 0 80px
        rgba(77,184,255,.5);
}

.rgb-project h3 {
    font-family: "Orbitron";

    font-size: 28px;

    margin: 20px 0;
}

.rgb-project p {
    color: #9da9c0;

    line-height: 1.8;
}

.rgb-combinations {
    display: flex;

    gap: 15px;

    flex-wrap: wrap;

    margin-top: 25px;
}

.rgb-combinations div {
    display: flex;

    align-items: center;

    gap: 8px;

    color: #aab5cc;

    font-size: 12px;
}

.rgb-combinations i {
    width: 15px;
    height: 15px;

    border-radius: 50%;
}

.red-light {
    background: red;
}

.green-light {
    background: lime;
}

.blue-light {
    background: blue;
}

.mix-grid {
    display: grid;

    grid-template-columns:
        repeat(4,1fr);

    gap: 15px;

    margin-top: 20px;
}

.mix-grid div {
    padding: 20px;

    border-radius: 12px;

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

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

    text-align: center;

    color: #aab5cc;
}

.mix-grid strong {
    display: block;

    margin-top: 7px;

    color: white;
}


/* =========================================================
   ROBOT CONCLUSION
========================================================= */

.robot-conclusion {
    display: grid;

    grid-template-columns:
        180px 1fr;

    align-items: center;

    gap: 40px;

    padding: 45px;

    border-radius: 22px;

    background:
        linear-gradient(
            135deg,
            rgba(239,35,60,.08),
            rgba(77,184,255,.08)
        );

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

.pokeball-big {
    width: 150px;
    height: 150px;

    border-radius: 50%;

    margin: auto;

    background:
        linear-gradient(
            to bottom,
            #ef233c 0%,
            #ef233c 46%,
            #080b16 46%,
            #080b16 54%,
            #f7f7f7 54%,
            #f7f7f7 100%
        );

    position: relative;

    box-shadow:
        0 0 50px
        rgba(239,35,60,.3);
}

.pokeball-big div {
    width: 40px;
    height: 40px;

    background: #080b16;

    border:
        8px solid
        white;

    border-radius: 50%;

    position: absolute;

    top: 50%;
    left: 50%;

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

.robot-conclusion h2 {
    font-family: "Orbitron";

    font-size: 32px;

    margin: 15px 0;
}

.robot-conclusion p {
    color: #9da9c0;

    line-height: 1.8;
}


/* =========================================================
   FOOTER
========================================================= */

footer {
    padding: 50px 8%;

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

    text-align: center;

    background: #05070e;
}

.footer-logo {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    margin-bottom: 15px;
}

.footer-logo strong {
    font-family: "Orbitron";
}

footer p {
    color: #7d899f;

    font-size: 13px;
}

.footer-small {
    margin-top: 8px;

    font-size: 10px;
}


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

#topButton {
    position: fixed;

    right: 25px;
    bottom: 25px;

    width: 54px;
    height: 54px;

    border-radius: 50%;

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

    background: #111827;

    color: white;

    cursor: pointer;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        translateY(20px);

    transition: .3s;

    z-index: 1000;

    font-size: 22px;

    font-weight: 700;
}

#topButton.mostrar {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        translateY(0);
}

#topButton:hover {
    transform:
        translateY(-4px);
}


/* =========================================================
   ALTO CONTRASTE
========================================================= */

body.alto-contraste {
    background: #000 !important;

    color: #fff !important;
}

body.alto-contraste::before,
body.alto-contraste .background-grid {
    display: none;
}

body.alto-contraste .topo,
body.alto-contraste .menu,
body.alto-contraste footer,
body.alto-contraste .accessibility-panel {
    background: #000 !important;

    border-color:
        #fff !important;

    backdrop-filter: none;
}

body.alto-contraste .menu-btn,
body.alto-contraste .info-card,
body.alto-contraste .experiment-card,
body.alto-contraste .technology-card,
body.alto-contraste .timeline-content,
body.alto-contraste .future-card,
body.alto-contraste .source-box,
body.alto-contraste .video-card,
body.alto-contraste .scientist-card,
body.alto-contraste .ai-box,
body.alto-contraste .robot-project,
body.alto-contraste .pwm-box,
body.alto-contraste .rgb-project,
body.alto-contraste .solution,
body.alto-contraste .chroma-card,
body.alto-contraste .robot-conclusion,
body.alto-contraste .mix-grid div {
    background: #000 !important;

    color: #fff !important;

    border:
        2px solid
        #fff !important;

    box-shadow: none !important;
}

body.alto-contraste p,
body.alto-contraste .hero p,
body.alto-contraste .future-card p,
body.alto-contraste .info-card p,
body.alto-contraste .experiment-card p,
body.alto-contraste .technology-card p,
body.alto-contraste .source-box p,
body.alto-contraste .video-info p,
body.alto-contraste .scientist-info p,
body.alto-contraste .robot-conclusion p,
body.alto-contraste footer p {
    color: #fff !important;
}

body.alto-contraste .menu-btn.active,
body.alto-contraste .hero-buttons button:not(.secondary),
body.alto-contraste .pokemon-button,
body.alto-contraste .youtube-button {
    background: #fff !important;

    color: #000 !important;

    border-color:
        #fff !important;
}

body.alto-contraste .hero-buttons .secondary {
    background: #000 !important;

    color: #fff !important;

    border:
        2px solid
        #fff !important;
}

body.alto-contraste .tag,
body.alto-contraste .badge {
    color: #fff !important;

    background: #000 !important;

    border:
        2px solid
        #fff !important;
}

body.alto-contraste .section-title > span,
body.alto-contraste .section-title small,
body.alto-contraste .number,
body.alto-contraste .tech-number {
    color: #fff !important;
}

body.alto-contraste .connection span,
body.alto-contraste .components span {
    background: #000 !important;

    color: #fff !important;

    border:
        1px solid
        #fff !important;
}


/* =========================================================
   ANIMAÇÕES DESATIVADAS
========================================================= */

body.sem-animacao *,
body.sem-animacao *::before,
body.sem-animacao *::after {
    animation: none !important;

    transition: none !important;
}

body.sem-animacao,
body.sem-animacao html {
    scroll-behavior: auto !important;
}

body.sem-animacao .menu-btn:hover,
body.sem-animacao .info-card:hover,
body.sem-animacao .experiment-card:hover,
body.sem-animacao .technology-card:hover,
body.sem-animacao .hero-buttons button:hover,
body.sem-animacao .pokemon-button:hover,
body.sem-animacao .youtube-button:hover,
body.sem-animacao #topButton:hover {
    transform: none !important;
}


/* =========================================================
   RESPONSIVIDADE
========================================================= */

@media(max-width:900px) {

    .header-info {
        display: none;
    }

    .hero,
    .disco-layout,
    .video-card,
    .robot-project,
    .pwm-box,
    .rgb-project {
        grid-template-columns:
            1fr;
    }

    .robot-images {
        grid-template-columns:
            1fr 1fr;
    }

    .hero {
        text-align: center;
    }

    .hero p {
        margin: auto;
    }

    .hero-buttons {
        justify-content: center;

        flex-wrap: wrap;
    }

    .hero-orbit {
        width: 300px;
        height: 300px;
    }

    .cards-grid,
    .experiment-grid,
    .technology-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .mix-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .scientist-card {
        grid-template-columns:
            1fr;
    }

    .future-card {
        grid-template-columns:
            1fr;
    }

    .robot-conclusion {
        grid-template-columns:
            1fr;

        text-align: center;
    }

}


@media(max-width:650px) {

    .topo {
        padding:
            15px 5%;
    }

    .logo h1 {
        font-size: 20px;
    }

    .menu {
        overflow-x: auto;

        justify-content:
            flex-start;

        padding: 12px;
    }

    .menu-btn {
        white-space: nowrap;

        padding:
            11px 15px;
    }

    .menu-btn span {
        font-size: 11px;
    }

    .hero {
        padding:
            60px 5%;
    }

    .hero h2 {
        font-size: 38px;
    }

    .conteudo {
        width: 90%;

        padding:
            60px 0;
    }

    .cards-grid,
    .experiment-grid,
    .technology-grid,
    .solution-grid,
    .chroma-grid {
        grid-template-columns:
            1fr;
    }

    .robot-images {
        grid-template-columns:
            1fr;
    }

    .robot-image-card img {
        height: 240px;
    }

    .ai-box {
        grid-template-columns:
            1fr;

        text-align: center;
    }

    .ai-icon {
        margin: auto;
    }

    .solution-header,
    .chroma-header {
        flex-direction:
            column;

        text-align: center;
    }

    .scientist-info {
        padding: 30px;
    }

    #discoNewton {
        width: 220px;
        height: 220px;
    }

    .video-info {
        padding: 30px;
    }

    .future-card,
    .robot-project,
    .pwm-box,
    .rgb-project,
    .robot-conclusion {
        padding: 25px;
    }

    .mix-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .intro-pokeball {
        width: 120px;
        height: 120px;
    }

    .intro-pokeball-center {
        width: 40px;
        height: 40px;
    }

    .section-title {
        align-items:
            flex-start;
    }

    .section-title h2 {
        line-height: 1.2;
    }

    .accessibility-panel {
        left: 6px;
        right: 6px;

        bottom: 6px;

        max-width: none;

        padding: 9px;
    }

    .accessibility-panel > strong {
        text-align: center;
    }

    .accessibility-controls {
        justify-content: center;
    }

    .accessibility-controls button,
    .accessibility-controls span {
        min-height: 44px;

        padding:
            8px 10px;
    }

    .spectrum-legend {
        grid-template-columns:
            repeat(
                2,
                minmax(
                    120px,
                    1fr
                )
            );
    }

    .disco-controls {
        width: 100%;
    }

    .disco-controls button {
        width: 100%;

        max-width: 260px;
    }

    #topButton {
        right: 14px;

        bottom: 180px;
    }

}


/* =========================================================
   REDUÇÃO DE MOVIMENTO DO SISTEMA
========================================================= */

@media(prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;

        transition: none !important;
    }

}