/* ----------------------------- Resets Iniciais ----------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins';
}

html {
    scroll-behavior: smooth;
    height: 100%;
    margin: 0;
}

body {

      cursor: url('../cursor/normal.cur'), default;
    scroll-behavior: smooth;
    margin: 0;
    background-color: #161616 !important;

    color: white;

    display: grid;
    grid-template-rows: auto 1fr auto;
    /* Cabeçalho, Conteúdo, Rodapé */
    min-height: 100vh;
    overflow-x: hidden;
}

/* ----------------------------- Background ----------------------------- */

.hero-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px);
    background-size: 40px 40px;

    mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black 20%, transparent 80%);
}

.hero-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(var(--highlight), var(--highlight));
    background-size: 120px 120px;
    background-repeat: repeat;
    mask-image: radial-gradient(square, white 40px, transparent 40px);
    opacity: 0.4;
    filter: blur(1px);
}



/* ----------------------------- Paleta de Cor ----------------------------- */

:root {

    --color1: #27199b;
    --color2: #432fb4;
    --color3: #6045cd;
    --color4: #7c5be6;
    --color5: #9871ff;
    --purple-main: #7652f7;
    --purple-dark: #130444;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --border-glass: rgba(118, 82, 247, 0.3);
    --text-muted: #727272;
    --grid-line: rgba(255, 255, 255, 0.08);
    --highlight: rgba(255, 255, 255, 0.03);
}




h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Exo 2';

}

p {
    font-family: 'Poppins';
}

/* Barra de rolagem estilizada */

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {

    background: linear-gradient(80deg, var(--color1) 0%, var(--color2) 35%, var(--color5) 100%);
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color1);
}

/* Mouse estilizado para links e textos */

a,
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="checkbox"],
input[type="radio"],
input[type="file"],
input[type="range"],
input[type="color"],
label[for],
select,
summary,
[role="button"],
[data-bs-toggle],
[data-bs-dismiss],
[onclick],
 
/* Navbar & Logo */
.logo,
.logo-img,
.nav-link,
.navbar-menu,
.navbar-links a,
.btn-close,
 
/* Botões gerais Bootstrap / custom */
.btn,
.btn-primary,
.btn-danger,
 
/* Missões (index) */
.mission-button,
.nav-btn,
.nav-btn.prev,
.nav-btn.next,
.btn-missao,
.btn-missao-quiz,
 
/* Cryptex / Enigma (tratado) */
.btn-seta,
.btn-hackear,
.simbolo,
.engrenagem,
 
/* Kit IA — carrossel de ferramentas */
.ferramenta-card,
.ferramenta-section .nav-btn,
 
/* Ranking — pódio e pilares */
.pilar-card,
.pilar-card.primeiro-lugar,
.pilar-card.segundo-lugar,
.pilar-card.terceiro-lugar,
.pilar-card.quarto-lugar,
.degrau,
 
/* Tratado — botões e inputs de categoria */
.assinar-button,
.assinar-tratado-button,
.assinar-tratado-categorias input,
.assinar-tratado-regra,
.checkbox-real,
.circulo-check,
 
/* FAQ / Trocar Ideia */
.ti-cla-btn,
.ti-btn-enviar,
.ti-radio + label,
 
/* Social */
.instagram-box,
.tik-tok-box,
.tik-tok-button,
.social-section a,
 
/* Offcanvas */
.offcanvas-start .nav-link,
 
/* Modal */
.modal-footer button,
.modal-header .btn-close,
 
/* Terminal */
.terminal-box,
.rec-dot,
.rec-status,
 
/* Cards com hover (sobre / kit) */
.site-sobre-outdoor .card,
.ferramenta-tip,
.mmision-box,
.mmsion-next-class-box {
    cursor: url('../cursor/link.cur'), pointer !important;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
.input-hacker,
 
p,
span,
li,
blockquote,
h1,
h2,
h3,
h4,
h5,
h6,
.texto-terminal,
.texto-obj,
.nav-link-text,
.descricao-regra,
.tik-tok-description,
.tik-tok-name,
.tik-tok-arroba,
.assinar-tratado-info,
.assinar-tratado-info-name,
.assinar-tratado-h1,
.cla-nome,
.modal-title {
    cursor: url('../cursor/text.cur'), text !important;
}



.terminal-cursor {
    display: inline-block;
    width: 10px;
    height: 1.2em;
    background-color: #a2ff00; /* Verde do Charada */
    margin-left: 5px;
    vertical-align: middle;
    animation: blink 0.8s infinite;
    box-shadow: 0 0 8px #a2ff00; /* Glow opcional para combinar com o site */
}



@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* -------------------------------------------------------- Menu de Navegação -------------------------------------------------------- */

/* Background do Nav */

.nav-bg {

    background: var(--color1);
    background: linear-gradient(80deg, var(--color1) 0%, var(--color2) 35%, var(--color5) 100%);

    color: white;
    width: 100%;
    box-shadow: 0px 4px 15px var(--color1);
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;



}

/* Estilo do Nav */

.navbar {
    display: flex;
    justify-content: space-between;

    margin: 0 auto;
    color: white;
    padding: 20px;
    align-items: center;
    flex-direction: row;
    width: 85vw;
    gap: 50px;
}

.navbar-links {
    display: flex;
    gap: 25px;
    flex-direction: row !important;
    gap: 30px !important;
}


.logo-img {
    display: flex;

}


nav img {
    width: 35px;

}

.logo-img img {
    height: 80px !important;
    width: 80px !important;
}

nav a {
    color: white !important;
}




.logo {
    display: flex;
    gap: 20px;
    transition: all 0.3s ease;
    align-items: center;
    text-decoration: none;
}

.logo-img {
    display: inline-block;
    transition: all 0.1s ease;
    transform-style: preserve-3d;


}

.logo-img:hover {
    -webkit-animation: jello-horizontal 0.9s both;
    animation: jello-horizontal 0.9s both;
     cursor: url('../cursor/link.cur'), pointer !important;
}

.logo img {
    transition: all 0.7s ease;
}

.logo * :hover {
    cursor: pointer !important;

}

.logo:hover img {
    transform: rotate(180deg) scale(1.3);
    filter: drop-shadow(0 0 10px white);

}




/* ----------------------------------------------
 * Generated by Animista on 2026-4-18 15:19:33
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes jello-horizontal {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    30% {
        -webkit-transform: scale3d(1.25, 0.75, 1);
        transform: scale3d(1.25, 0.75, 1);
    }

    40% {
        -webkit-transform: scale3d(0.75, 1.25, 1);
        transform: scale3d(0.75, 1.25, 1);
    }

    50% {
        -webkit-transform: scale3d(1.15, 0.85, 1);
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        -webkit-transform: scale3d(0.95, 1.05, 1);
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        -webkit-transform: scale3d(1.05, 0.95, 1);
        transform: scale3d(1.05, 0.95, 1);
    }

    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}







.logo-title {

    font-weight: bold;
}

.navbar-nav {
    display: flex;
    gap: 15px;
}

.menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.menu-icon div {
    width: 25px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
}




.navbar-menu:hover .menu-icon {

    transform: rotate(90deg);
    transition: all 0.3s ease;


}


.navbar-menu {
    transition: all 0.3s ease;
}



.navbar-menu .btn-primary {
    background-color: transparent;

    border: none;
    padding: 15px 15px;
    border-radius: 5px;
    cursor: pointer !important;

    transition: all 0.3s ease;
}


.navbar-menu .btn-primary:hover {
    background-color: rgb(255, 255, 255);
    color: rgb(255, 255, 255);
    border: none;
    box-shadow: 0.1px 0.1px 5px 0px var(--color1);
    border-radius: 10px;
    cursor: pointer !important;
    transition: background-color 0.3s, color 0.3s;
    transform: scale(1.08);



}

.navbar-menu .btn-primary:hover .menu-icon div {
    background-color: #7c5be6
}

/* Menu Offcanvas */

.offcanvas-start {
    display: flex;

    align-items: center;

    color: white;
    padding: 20px;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    justify-content: center;
    background: #220059;
    background: linear-gradient(180deg, rgba(34, 0, 89, 1) 0%, rgba(46, 13, 163, 1) 35%, rgba(138, 43, 226, 1) 100%);
    border-radius: 0 60px 60px 0;
    height: 95vh;


}

.offcanvas-body {
    display: flex;
    flex-direction: column;
    gap: 50px;
    border-bottom: 2px solid white;


}

.offcanvas .logo {
    color: white;
}

.offcanvas .logo img {
    height: 100px !important;
    width: 100px !important;
}

.offcanvas-body .navbar-nav {

    gap: 15px;
    display: flex;
    flex-direction: column;
    align-self: center;
    margin: auto;


}

.offcanvas-start .nav-link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    width: 300px;
    justify-content: center;
    backdrop-filter: blur(10);
    background-color: transparent;
    font-weight: 600;
    background: var(--color4);





}





.offcanvas-start hr {
    border: 1px solid white !important;
    width: 100%;
    margin: 0 auto;
}

.btn-close {
    filter: invert(100) !important;

}

.offcanvas-start .nav-link:hover {
    filter: drop-shadow(0 0 10px white);
    background-color: white !important;
    border-radius: 10px;
}

.offcanvas-start .nav-link:hover img {
    filter: invert(10%) sepia(91%) saturate(5437%) hue-rotate(248deg) brightness(92%) contrast(106%);

}

.offcanvas-start .nav-link:hover .nav-link-text {
    color: #27199b;
}

.offcanvas-header {
    display: flex;
    gap: 20px;
    border-bottom: 2px solid white;

}

.offcanvas-start img {
    width: 50px;
    height: 50px;

}



.nav-item {
    display: flex;
    flex-direction: row;
}

.nav-link {
    text-decoration: none;
    color: white;
    font-size: 17px;
    padding: 8px 12px;
    border-radius: 8px;
    transition: color 0.3s, transform 0.3s;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;

}

.nav-link img {
    width: 35px;
    height: 35px;
    filter: invert(100);
}

.off-menu {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
}

.navbar-nav {
    display: flex !important;
    width: 100%;

}

nav .nav-link:hover {
    color: rgb(255, 255, 255);
    transform: scale(1.1);
    background: var(--color1);
    background: linear-gradient(80deg, var(--color3) 0%, var(--color4) 35%, var(--color5) 100%);
    transition: color 0.3s, transform 0.3s;
    transition: all 0.3s ease;
    padding: 10px;
    border-radius: 10px;

}

.nav-link-text {
    color: white;

}

.navbar .navbar-nav .nav-link.active {
    background-color: white;
    transform: scale(1.1);
    box-shadow: 0px 4px 15px #220059;

}


.navbar .navbar-nav .nav-link:active .nav-link-text {
    color: black;
    font-weight: 700;
}


.navbar .navbar-nav .nav-link:active img {
    filter: brightness(0);
}





/* Background do Nav */

.footer-bg {

    background: var(--color1);
    background: linear-gradient(80deg, var(--color1) 0%, var(--color2) 35%, var(--color5) 100%);

    color: white;
    width: 100%;
    box-shadow: 0px 4px 15px var(--color1);
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;



}

/* ================== Footer ================== */

footer {
    display: flex;
    justify-content: space-between;

    margin: auto;
    color: white;
    padding: 20px;
    align-items: center;
    flex-direction: column;
    width: 85vw;
    gap: 50px;
    bottom: 0;
}

.footer-top,
.footer-bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.footer-top,
.footer-bottom {
    gap: 100px;
    align-items: center;
}

footer a {
    text-decoration: none;
    overflow: none;
    color: white;
}

footer img {
    filter: invert(100);
    width: 35px;
    height: auto;
}

.footer-social {
    display: flex;
    flex-direction: row;
    gap: 15px;
    transition: all 0.3s ease;

}

.footer-social a {
    padding: 10px;
    transition: all 0.3s ease;
    border-radius: 15px
}

.footer-social a:hover {

    background-color: white;
    padding: 10px;
    border-radius: 15px;
    filter: drop-shadow(0 0 10px white);
}

.footer-social a:hover img {
    filter: invert(10%) sepia(91%) saturate(5437%) hue-rotate(248deg) brightness(92%) contrast(106%);

}

.footer-iai {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-name {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5)
}

.footer-links {
    display: flex;
    flex-direction: row;
    gap: 100px;
}

.footer-a-list a:hover {
    text-decoration: underline;
}

.footer-a-list {
    display: flex;
    flex-direction: column;
}

.footer-text p {

    font-size: small;
}

/* ==================== Site ==================== */

.site {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.site-home,
.site-sobre,
.site-missoes,
.site-kit,
.site-terminal,
.site-social {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    /* justify-content: center; */

    width: 100%;
    min-height: 100vh;
    padding: 50px;
}

.site-home:after,
.site-sobre:after,
.site-encontros:after,
.site-missoes:after,
.site-kit:after,
.site-terminal:after,
.site-social:after {

    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;

    /* Gradiente do border-bottom */
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0) 100%);
}

.home-status {
    display: flex;
    background-color: #6045cd77;
    flex-direction: row;
    width: 20vw;
    border: 1px solid rgba(155, 51, 252, 0.3);
    border-radius: 300px;
    color: white;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 10px;
    margin-bottom: 25px;

}


.home-status p {
    margin: 0;
    font-weight: 600;
    font-size: 12px;
    font-family: 'Inter';
    color: #c1aeff;
}

.home-status img {
    width: 15px;
    height: auto;
}

.site-home-outdoor-title h1 {
    color: white;
    font-weight: 700;
    font-size: 4.5rem;
    text-align: center;
}



.site-home-outdoor-title b {
    color: #7c5be6;
}

.site-home-outdoor-title i {
    color: #9276ee;
}

/* ==================== Hero Section (Outdoor) ==================== */

.site-home-outdoor {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50vh;
    margin: 40px auto;
}

.site-home-outdoor-title {
    z-index: 5;
    text-align: center;
}

.site-home-outdoor-title h1 {
    color: white;
    font-weight: 700;
    font-size: 5rem;
    text-align: center;
    line-height: 1.1;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8);
}

/* --- Ícones Flutuantes --- */

.site-home-outdoor-gif {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0.7;
    filter: drop-shadow(0 0 30px var(--color4));
    transition: all 0.3s ease;


    -webkit-mask-image: radial-gradient(ellipse at center,
            black 20%,
            rgba(0, 0, 0, 0.5) 50%,
            transparent 80%);
    mask-image: radial-gradient(ellipse at center,
            black 20%,
            rgba(0, 0, 0, 0.5) 50%,
            transparent 80%);


    animation: flutuarLateral 4s ease-in-out infinite alternate;
}


.site-home-outdoor-gif:nth-child(1) {
    left: 5%;
}


.site-home-outdoor-gif:nth-child(3) {
    right: 5%;
    animation-delay: 2s;
}

.site-home-outdoor-gif img {
    max-width: 250px;
    transition: all 0.3s ease;
    height: auto;
}

.site-home-outdoor-gif:hover img {
    transform: scale(1.1);
    cursor: pointer !important
}

@keyframes flutuarLateral {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-60%) rotate(5deg);
    }
}

.site-home-description {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40vw;
}

.site-home-description p {
    color: white;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    line-height: 1.1;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8);
}

.site-home-description b {
    color: #c1aeff;
}


.site-home-info {
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.site-home-info .home-status {
    width: 12vw;
    height: 30px;
    display: flex;
    align-items: center;
}

.site-home-info .home-status img {
    width: 20px;
    height: auto;
}

.site-home-info b {
    font-weight: 700;
    font-size: 1.2rem;
    margin: 2.5px;
    text-align: center;
    line-height: 1.1;
    color: #7c5be6;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.8);
}

.site-home-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items: center;
    align-items: center;
    gap: 10px;
}

.site-home-button a {
    background: var(--color1);
    background: linear-gradient(360deg, var(--color1) 0%, var(--color2) 35%, var(--color5) 100%);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    color: white;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 15px;
}

.site-home-button a:hover {
    transform: scale(1.1);
    margin: 10px;
    cursor: pointer !important;
}

.site-home-button p {
    margin: 0;
}

.site-home-button p:hover {
    cursor: pointer !important;
}

.site-home-button img {
    filter: invert(100);
    width: auto;
    height: 25px;
}

#conhecer {
    color: #432fb4;
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(145, 145, 145, 1) 100%);
}

#conhecer img {
    filter: invert(10%) sepia(91%) saturate(5437%) hue-rotate(248deg) brightness(92%) contrast(106%);
}

#conhecer:hover {
    background: var(--color1);
    background: linear-gradient(360deg, var(--color1) 0%, var(--color2) 35%, var(--color5) 100%);

    color: white;
    font-weight: 700;
}

#conhecer:hover img {
    filter: invert(100);
}

#aprender:hover {
    color: #432fb4;
    font-weight: 700;
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(145, 145, 145, 1) 100%);
}

#aprender:hover img {
    filter: invert(10%) sepia(91%) saturate(5437%) hue-rotate(248deg) brightness(92%) contrast(106%);
}

/*=============== Sobre o Projeto ===============*/


.site-sobre {
    display: flex;
}




.site-sobre-outdoor,
.site-missoes-outdoor {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    align-content: center;
    align-self: center;
    justify-content: center;



}

.site-sobre-sinopse-bg,
.site-missoes-sinopse-bg {

    display: flex;
    flex-wrap: wrap;
    text-align: center !important;
}

.site-sobre-sinopse,
.site-missoes-sinopse {
    flex: 0 0 auto;
    width: 66.66666667%;
    margin-right: auto !important;
    margin-left: auto !important;
    gap: 25px;
}

.site-sobre-sinopse h2,
.site-missoes-sinopse h2 {
    color: #6045cd;
    font-weight: 500;
    font-size: 3rem;
    line-height: 1.1;
}

.site-sobre-sinopse i,
.site-missoes-sinopse i {
    font-weight: 500;
    font-size: 2.5rem;
    line-height: 1.1;
    color: white;
}

.site-sobre-sinopse-p {
    background-color: #13044446;
    border-radius: 15px;
    padding: 20px;
    backdrop-filter: blur(10px);
    margin: 20px;
    margin-left: 0;
    text-align: center;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(118, 82, 247, 0.5);
}

.site-sobre-sinopse-p span {
    font-weight: 700;
    color: #9276ee;
}

.site-sobre-sinopse-p p {
    color: white;
    margin: 0;
}

.site-sobre-outdoor img {
    width: 150px;
    height: auto;
    transition: all 0.3s ease;
    border-radius: 15px;

}

.site-sobre-outdoor img:hover {
    transform: scale(1.1);
    cursor: pointer !important;
    filter: drop-shadow(0 0 30px var(--color5));
}

.site-sobre-outdoor .card {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px;
    background-color: #13044446;
    border-radius: 15px;
    color: white;
    transition: all 0.3s ease;
}

.site-sobre-outdoor .card:hover {
    filter: drop-shadow(0 0 30px var(--color2));
    cursor: pointer !important;
    transform: scale(1.05);
}

.site-sobre-outdoor .badge {
    background-color: #6045cd;
    color: white;
    font-weight: 700;
}


/* =============== Missões =============== */

.missoes-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background-color: #13044446;
    border-radius: 15px;
    border: 1px solid rgba(118, 82, 247, 0.5);
    color: white;
    transition: all 0.3s ease;
}

.missoes-card:hover {
    filter: drop-shadow(0 0 30px var(--color2));
    cursor: pointer !important;
    transform: scale(1.05);
}


.mission-section {
    padding: 40px 0;
    background-color: #0a041a;
    border-radius: 20px;
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
}

.mission-container {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    color: white;
}

/* "Trilho" do Carrossel */
.mission-track {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    gap: 25px;
    padding: 20px;
    scrollbar-width: none;
}

.mission-track::-webkit-scrollbar {
    display: none;
}

/* Estilo do Card */
.mission-card {
    min-width: 300px;
    background: rgba(46, 10, 161, 0.801);
    border: 1px solid rgba(118, 82, 247, 0.3);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    scroll-snap-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    gap: 15px;
}

.mission-card:hover {
    transform: scale(1.05);
    border-color: #7652f7;
    box-shadow: 0 0 30px rgba(118, 82, 247, 0.2);
}

/* Cabeçalho do Card */
.card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.badge-mission {
    background: rgba(96, 69, 205, 0.2);
    color: #c1aeff;
    border: 1px solid #7652f7;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

.badge-xp {
    background: rgba(69, 205, 80, 0.1);
    color: #aeffbb;
    border: 1px solid #60f752;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

/* Botões de Navegação */
.nav-btn {
    background: rgba(118, 82, 247, 0.0001);
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer !important;
    padding: 10px;
    z-index: 10;
    border-radius: 50%;
    transition: background 0.3s;
}

.nav-btn:hover {
    background: rgba(118, 82, 247, 0.5);
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
}

/* Estado Bloqueado */
.mission-card.locked {
    filter: grayscale(0.8) opacity(0.5) blur(4px);
    cursor: not-allowed;
}

.lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    z-index: 2;
}

.lock-icon {
    font-size: 2.5rem;
}

.lock-icon img {
    filter: invert(100);
}


.mission-button {
    background: var(--color1);
    background: linear-gradient(360deg, var(--color1) 0%, var(--color2) 35%, var(--color5) 100%);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    color: white;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin-top: 15px;
}

.mission-button:hover {
    transform: scale(1.1);
    margin-top: 10px;
    cursor: pointer !important;
    color: #432fb4;
    background: #ffffff;
    font-weight: 700;
    font-family: 'Exo 2' !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(145, 145, 145, 1) 100%);
}

.mission-button p {
    margin: 0;
}

.mission-button img {
    filter: invert(100);
    width: auto;
    height: 25px;
}


.mission-button:hover img {
    filter: invert(10%) sepia(91%) saturate(5437%) hue-rotate(248deg) brightness(92%) contrast(106%);
    cursor: pointer !important;
}


.level-tag {
    background: rgba(96, 69, 205, 0.2);
    color: #c1aeff;
    border: 1px solid #7652f7;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: bold;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
}

.level-tag p {
    margin: 0;
}

.level-tag img {

    width: 20px;
    height: auto;
}

.lock-icon:hover img {
    cursor: not-allowed;
    filter: invert(100);
}


/* ============ Kit de Sobrevivência ========= */



/* Estilo do Card */
.ferramenta-card {
    min-width: 300px;
    background: rgba(46, 10, 161, 0.801);
    border: 1px solid rgba(118, 82, 247, 0.3);
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    scroll-snap-align: center;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    gap: 15px;
    scroll-snap-align: start;
    /* O card vai "grudar" no topo ao rolar */
    min-height: 300px;
    color: white;
    width: 100%;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.ferramenta-card:hover {
    transform: scale(1.05);
    border-color: #7652f7;
    filter: drop-shadow(0 0 30px var(--color2));
    cursor: pointer !important;
    box-shadow: 0 0 30px rgba(118, 82, 247, 0.2);
}


.ferramenta-section {
    padding: 40px 0;
    background-color: #0a041a;
    border-radius: 20px;
    width: 100%;
    align-self: center;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 10%,
            black 90%,
            transparent 100%);
}

.ferramenta-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
    max-width: 1200px;
    margin: 0 auto;
    color: white;
}

/* "Trilho" do Carrossel */
.ferramenta-track {
    display: flex;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
    gap: 25px;
    flex-direction: column;
    padding: 20px;

    scrollbar-width: none;
    height: 550px;
}

.ferramenta-track::-webkit-scrollbar {
    display: none;
}


.ferramenta-ai-tool {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    border-bottom: 1px solid rgba(118, 82, 247, 0.3);
    padding-bottom: 20px;


}

.ferramenta-ai-how,
.ferramenta-tip-box-content {
    display: flex;
    background-color: #13044446;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    padding: 20px;
    border: 1px solid rgba(118, 82, 247, 0.3);
    color: white;
}

.ferramenta-card img {
    width: 100px;
    height: auto;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.ferramenta-ai {
    border-right: 1px solid rgba(118, 82, 247, 0.3);
    padding-right: 20px;
}

.ferramenta-ai-why,
.ferramenta-ai-tool p,
.ferramenta-tip-box-title {

    color: #c1aeff;
    font-weight: 700;
}

.ferramenta-ai-why {
    padding-top: 20px;
}

.ferramenta-card:hover img {
    filter: drop-shadow(0 0 30px var(--color5));
    transform: scale(1.1);
    cursor: pointer !important;
}

.ferramenta-card p {
    margin: 0;
    font-size: 0.8rem;
}


.ferramenta-section .nav-btn {
    transform: rotate(90deg);
    /* Vira o < para cima */
}

.ferramenta-section .nav-btn:hover {
    background: rgba(118, 82, 247, 0.5);
    mask-image: linear-gradient(to right,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
            transparent 0%,
            black 15%,
            black 85%,
            transparent 100%);
}

.ferramenta-section a {
    text-decoration: none;
}




/*============== Terminal Anônimo ============*/

/* Container Principal */
.terminal-container {
    max-width: 1200px;
    width: 50vw;

    background: rgba(22, 22, 22, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    /* Bordazinha Neon braba */
    box-shadow: 0 0 15px var(--color1);
    animation: borderGlow 5s infinite alternate;
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 15px var(--color1);
        border: 1px solid var(--color1);
    }

    50% {
        box-shadow: 0 0 25px var(--color3);
        border: 1px solid var(--color3);
    }

    100% {
        box-shadow: 0 0 15px var(--color5);
        border: 1px solid var(--color5);
    }
}




.terminal-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.terminal-buttons {
    display: flex;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.red {
    background: #ff5f56;
}

.yellow {
    background: #ffbd2e;
}

.green {
    background: #27c93f;
}

.terminal-title {
    flex-grow: 1;
    text-align: center;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'Exo 2', sans-serif;
}

/* Corpo do Terminal */
.terminal-body {
    padding: 20px;
    min-height: 200px;
}

.terminal-prompt {
    display: flex;
    gap: 10px;
    font-family: monospace;
    font-size: 18px;
}

.terminal-prompt .user {
    color: var(--color5);
    font-size: 17px;
}

.terminal-prompt .dir {
    color: #fff;
}

.terminal-prompt .char {
    color: #fff;
}

.terminal-prompt input {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    width: 100%;
    font-family: monospace;
}

.terminal-box {
    display: flex;
    flex-direction: column;
    gap: 5px;

    border-radius: 15px;
    padding: 20px;

    width: fit-content;
    align-self: center;
    margin: 50px auto;
}

.terminal-title-status p {
    color: lime;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    margin: 0;
     text-shadow: 
        0 0 5px lime,   /* Brilho interno (mais nítido) */
        0 0 10px lime,  /* Brilho médio */
        0 0 20px green; /* Brilho externo (mais difuso) */

         animation: glow-pulse 1.5s infinite alternate;
}

@keyframes glow-pulse {
    from {
        text-shadow: 0 0 5px lime, 0 0 10px lime, 0 0 20px green;
    }
    to {
        text-shadow: 0 0 20px lime, 0 0 40px lime, 0 0 80px green;
    }
}





/* Redes Sociais */


.social-section {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.social-section p {
    margin: 0;
}

.tik-tok-box {
    display: flex;
    flex-direction: column;

    justify-content: center;
    gap: 15px;
    background-color: #0c032c;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(118, 82, 247, 0.3);
    color: white;
    transition: all 0.3s ease;
}

.instagram-box {
    display: flex;
    flex-direction: column;

    justify-content: center;
    gap: 15px;
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    border-radius: 15px;
    padding: 20px;
    border: 1px solid rgba(118, 82, 247, 0.3);
    color: white;
    transition: all 0.3s ease;
}

.tik-tok-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-self: start;
    gap: 10px;
}

.tik-tok-logo img {
    width: 30px;
    height: auto;
    filter: invert(100);
}

.tik-tok-name {
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
}

.tik-tok-description {
    color: white;
    font-size: 0.9rem;
    text-align: center;
}

.tik-tok-button {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
    color: white;
    text-decoration: none;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    align-content: center;
    justify-content: center;
    transition: all 0.3s ease;
}


.tik-tok-button:hover {
    transform: scale(1.05);
    cursor: pointer !important;
    color: rgb(114, 114, 114);
    background: #ffffff;
    font-weight: 700;
    font-family: 'Exo 2' !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(145, 145, 145, 1) 100%);
}


.tik-tok-button:hover img {
    filter: brightness(0) saturate(100%) invert(48%) sepia(0%) saturate(0%) hue-rotate(167deg) brightness(91%) contrast(85%);
    cursor: pointer !important;
}


.instagram-box:hover,
.tik-tok-box:hover {
    transform: scale(1.05);
    cursor: pointer !important;
    color: rgb(94, 94, 94);
    backdrop-filter: blur(0.5px);
    filter: blur(0.5px);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
    font-weight: 700;
    font-family: 'Exo 2' !important;

}


.tik-tok-button img {
    filter: invert(100);
    width: auto;
    height: 20px;
}

.tik-tok-stats {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.tik-tok-stats p {
    color: rgb(189, 189, 189);
    font-family: monospace;
}

.tik-tok-arroba {
    color: white;
    font-weight: 700;
    font-size: 1.1rem;
}


/* ---------------------------------------------------
   MISSÕES (Modelo Principal das Missões)
--------------------------------------------------- */




.mmision-home {
    margin: 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    color: rgb(184, 184, 184);
    margin-bottom: 0px !important;
}

.mmision-home span {
    color: #c1aeff;
    font-weight: 700;
}

.mmision-header {
    display: flex;
    align-items: center;
    flex-direction: row;
    gap: 20px;
    margin: 20px;
}

.mmision-header p {
    margin: 0;
}

.mmision-header img {
    width: 20px;
    height: auto;
}

.mmision-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(69, 205, 80, 0.1);
    color: #aeffbb;
    border: 1px solid #60f752;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

.mmision-num {
    background: rgba(96, 69, 205, 0.2);
    color: #c1aeff;
    border: 1px solid #7652f7;
    padding: 4px 12px;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: bold;
}

.mmision-title-content .site-sobre-sinopse {
    margin: 0 !important;
    margin: 20px !important;
}

.mmision-title-content .site-sobre-sinopse-p {
    margin-left: 0 !important;
    margin-top: 20px !important;
}


.mmision-title-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0px;
    margin-bottom: 40px;
}


.mmision-title-content>div:nth-child(2) {
    display: flex;
    gap: 25px;
    margin: 20px;
    align-items: center;
    justify-content: flex-end;
}


.mmision-total-xp {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-direction: column;
    padding-right: 5px;



}

.mmision-total-progress {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-direction: column;
    border-left: 1px solid rgba(118, 82, 247, 0.3);
    padding-left: 5px;

}


#progress-yellow {
    color: #ffbd2e;
    font-weight: 700;
    font-size: 2rem;
    text-shadow: 0 0 10px #ffbd2e;
}

#total-xp-purple {
    color: #6045cd;
    font-weight: 700;
    font-size: 2rem;
    text-shadow: 0 0 10px #6045cd;
}

.mmision-total-progress p,
.mmision-total-xp p {
    margin: 0;
}


.mmision-progress-bar-container {
    width: 97%;

    align-self: center;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
}


.mmision-progress-bar-fill {
    height: 100%;
    width: 15%;


    background: linear-gradient(90deg, #4b2cb3 0%, #7652f7 100%);


    box-shadow: 0 0 10px rgba(118, 82, 247, 0.5);

    border-radius: 10px;
    transition: all 0.3s ease;
}



.mmision-progress-bar:hover,
.mmision-progress-bar-fill:hover {
    box-shadow: 0 0 15px rgba(118, 82, 247, 0.8);
    transform: scale(1.5);
    cursor: pointer !important;
}

/* ---------------------------------------------------
   3. Layout do conteúdo da Missão (Vídeo + Sidebar)
--------------------------------------------------- */
.mmision-outdoor {
    display: grid;
    grid-template-columns: 2fr 1fr;

    gap: 30px;

}

/* --- Layout dos Slides e Quiz --- */
.mmision-outdoor-content {
    display: flex;
    flex-direction: column;
    gap: 20px;

}

/* Caixa do Slides */
.mmision-outdoor-content-embed {
    display: flex;
    flex-direction: column;
    width: 100%;
    aspect-ratio: 16 / 12.5;

}

.mmision-outdoor-content-embed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

.terminal-buttons,
.rec-status {
    display: flex;
    align-items: center;
    gap: 5px;
}

.mmision-outdoor-content-embed-footer {
    display: flex;
    justify-content: space-between;

    align-items: center;
    padding: 10px;
    margin-top: auto;

}

/* Botão Modal*/
.mmision-quiz-button {
    display: flex;
    width: 100%;
}

/* --- COLUNA DA DIREITA --- */
.mmision-information {
    display: flex;
    flex-direction: column;
    gap: 20px;

}


.mmision-objectives-box {
    min-height: 180px;
}

.mmision-xp-box {
    min-height: 150px;
}

























.mmision-total-xp,
.mmision-total-progress {
    background: var(--glass-bg);
    border: 1px solid var(--border-glass);
    padding: 15px 25px;
    border-radius: 15px;
    text-align: center;
}

.mmision-total-xp p,
.mmision-total-progress p {
    color: var(--text-muted);
    font-size: 10px;
    margin-bottom: 5px;
}

.mmision-total-xp h3,
.mmision-total-progress h3 {
    font-size: 24px;
    margin: 0;
    color: #fff;
}

/* Layout Grid Principal */
.mmision-outdoor {
    display: grid;
    grid-template-columns: 2.5fr 1fr;
    gap: 25px;
    margin-left: 20px;
    margin-right: 20px;
}

/* Área do Vídeo/Terminal */
.mmision-outdoor-content-embed {
    background: rgba(10, 5, 25, 0.8);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mmision-outdoor-content-embed-header {
    background: rgba(255, 255, 255, 0.03);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-glass);
}

.rec-status p {
    margin: 0;
}

.rec-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ff5f56;
    font-weight: bold;
    font-size: 12px;
}

.rec-dot {
    width: 8px;
    height: 8px;
    background: #ff5f56;
    border-radius: 50%;
    animation: blink 1s infinite;
}



.embed-container {
    width: 100%;
    aspect-ratio: 16/9;
}

.embed-container iframe {
    width: 100%;
    height: 100%;
}

.mmision-outdoor-content-embed-footer {
    display: flex;
    justify-content: space-around;
    padding: 15px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-size: 12px;
}

.mmision-outdoor-content-embed-footer span {
    color: white;
    margin-left: 5px;
}

/* Botão */
.btn-missao {
    width: 100%;
    padding: 18px;
    margin-top: 15px;
    background: var(--purple-main);
    border: none;
    border-radius: 12px;
    color: white;
    font-weight: bold;
    cursor: pointer !important;
    transition: 0.3s;
}

.btn-missao:hover {
    background: #5d3bc2;
    transform: translateY(-2px);
}

/* Sidebar Boxes */
.mmision-box {
    background: var(--glass-bg);
    border: 1px solid var(--border-glass);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.mmision-box h4 {
    margin-top: 0;
    color: var(--purple-main);
    font-size: 14px;
}


.mmsion-next-class-box {
    background: var(--glass-bg);
    border: 1px solid var(--border-glass);

    border-radius: 15px;
    display: inline-flex;
    width: 100%;
    height: fit-content;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 15px;
    color: white;
    margin-bottom: 20px;
    height: auto;
}

.mmsion-next-class-box a {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    width: 100%;
    height: fit-content;
    color: white;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0);
    border-radius: 12px;
    justify-content: center;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0);
}

.mmsion-next-class-box:hover,
.mmsion-next-class-box:hover p,
.mmsion-next-class-box:hover h5 {
    cursor: pointer !important;
}

.mmsion-next-class-box:hover a {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
    transition: all 0.3s ease;

    cursor: pointer !important;
}

.mmsion-next-class-box p,
.mmsion-next-class-box h5,
.mmsion-next-class-box a {
    margin: 0;
    line-height: 1.2;
}

.mmsion-next-class-box img {
    filter: invert(100);
    width: auto;
    height: 20px;
}




/* XP Total e Progresso Total */


.mission-list,
.xp-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Itens da lista de Objetivos */

.mission-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    color: var(--text-muted);
    font-size: 14px;
}

/* Checkbox Vazio */
.circulo-check {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 2px solid var(--border-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

/* Esconde o checkbox padrão feio do navegador */

.checkbox-real {
    display: none;
}

/* Transforma o label */

.missao-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    cursor: pointer !important;
    /* Mãozinha de cliquezin */
}



.texto-obj {
    color: var(--text-muted);
    font-size: 14px;
}


.checkbox-real:checked~.circulo-check {
    background-color: var(--color4);
    border-color: var(--color4);
    box-shadow: 0 0 10px var(--color4);
}

.checkbox-real:checked~.circulo-check::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.checkbox-real:checked~.texto-obj {
    color: white;
    font-weight: bold;
}

/* Itens da Lista de XP */

.xp-list li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
    color: white;
}

.xp-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 10px;
}

.xp-texto {
    flex-grow: 1;
}

.xp-pontos {
    color: #27c93f;
    font-family: monospace;
    font-weight: bold;
}

/* Botão do Quiz */

.btn-missao-quiz {
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, var(--color1), var(--color4));
    border: 1px solid var(--color5);
    border-radius: 12px;
    color: white;
    font-family: 'Exo 2', sans-serif;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    letter-spacing: 1px;
    justify-content: center;
    align-items: center;
    gap: 15px;
    cursor: pointer !important;
    margin-bottom: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(118, 82, 247, 0.4);
}

.btn-missao-quiz p {
    margin: 0;
}

.btn-missao-quiz:hover p {
    cursor: pointer !important;
    color: var(--color3);

}

.btn-missao-quiz:hover img {
    filter: invert(31%) sepia(43%) saturate(8075%) hue-rotate(950deg) brightness(89%) contrast(92%);
}

.btn-missao-quiz img {
    width: 25px;
    height: auto;
}

.btn-missao-quiz:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px var(--color5);
    background: #ffffff;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(145, 145, 145, 1) 100%);
    cursor: pointer !important;
}


#ia-codex-m3-button{
    text-decoration: none;
}


#ia-codex-m3-button img{
    filter: invert(1) brightness(100);
}

#ia-codex-m3-button:hover img{
    filter: invert(0);
}


.mmision-box-header {

    display: flex;
    justify-content: space-between;
    color: white;
    font-family: monospace;
    font-size: 12px;
    border-bottom: 1px solid var(--border-glass);
    padding-bottom: 10px;
    margin-bottom: 15px;


}

.mmision-box-header div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-direction: row;

}

#mmision-objectives-header p {
    color: var(--color5);

}



.mmision-box-header p {
    margin: 0;
}

.mmision-box-header img {
    width: 16px;
    height: auto;
}


#mmision-rewards-header p {
    color: #ffbd2e;
}


.modal-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Garante que o corpo do modal ocupe o máximo de altura possível */
.modal-body {
    height: calc(100vh - 120px); /* Ajusta a altura descontando o header/footer */
    overflow: hidden;
}


/* ============ Tratado ================ */



.site-sobre-icon-circle {
    height: 30vh;
    width: 15vw;
    border-radius: 50%;

    display: flex;
    border: 1px solid rgba(118, 82, 247, 0.3);
    align-items: center;
    justify-content: center;
    background: var(--color1);
    background: linear-gradient(180deg, var(--color1) 0%, var(--color2) 35%, var(--color5) 100%);
    margin: 25px;
    align-self: center;
    transition: all 0.3s ease;
    justify-self: center;
    box-shadow: 0 0 15px var(--color2);
    animation: borderGlow 5s infinite alternate;
}

.site-sobre-icon-circle:hover {
    box-shadow: 0 0 30px var(--color5);
    transform: scale(1.05);
    background: #ffffff;
    background: linear-gradient(360deg, rgba(255, 255, 255, 1) 0%, rgba(189, 189, 189, 1) 50%, rgba(145, 145, 145, 1) 100%);

    cursor: pointer !important;
}

.site-sobre-icon-circle:hover img {
    filter: invert(31%) sepia(43%) saturate(8075%) hue-rotate(950deg) brightness(89%) contrast(92%) drop-shadow(0 0 10px var(--color5));
    cursor: pointer !important;

}

.site-sobre-icon-circle img {
    width: 80%;
    height: auto;

}

.tratado-status {
    display: flex;
    align-items: center;
    gap: 30px;
    align-self: center;
    color: var(--text-muted);
    font-weight: bold;

    font-size: 12px;
}

.tratado-status div {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1px;

}

#signatarios-tratado {
    text-shadow: 0 0 15px #27c93f;
    color: #27c93f;
    font-weight: bold;
    backdrop-filter: blur(10px);
}

#regras-ativas-tratado {
    text-shadow: 0 0 15px #ffbd2e;
    color: #ffbd2e;
    backdrop-filter: blur(10px);
    font-weight: bold;
}

#versao-tratado {
    text-shadow: 0 0 15px #e65b5b;
    color: #e65b5b;
    font-weight: bold;
    backdrop-filter: blur(10px);
}


#tratado-box {
    display: flex;
    justify-items: center;
animation: borderGlow 5s infinite alternate;
    width: 90vw;
    align-self: center;
    flex-direction: column;
    margin: 40px 0;

    background: rgba(10, 5, 25, 0.8);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;



}




/* Cartas do Tratado (Flip Cards) */

.flip-card {
    background-color: transparent;
    width: 300px;
    height: 200px;
    margin: 20px;
    perspective: 1000px;
    cursor: pointer !important;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Base comum para Frente e Verso */

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    border: 1px solid;
}

/* FRENTE: Tipo da Regra e Descrição */
.flip-card-front {
    background: rgba(10, 5, 25, 0.9);
    /* Fundo escuro igual do print */
    color: white;
    border: 1px solid;
    align-items: flex-start;
}

.tag-regra {
    background: rgba(96, 69, 205, 0.2);
    border: 1px solid;
    padding: 4px 12px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.descricao-regra {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
}

/* VERSO: Autor, Foto e Data */
.flip-card-back {
    background: linear-gradient(135deg, #130444 0%, #2e0da1 100%);

    transform: rotateY(180deg);
    align-items: center;
}

.autor-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}


.autor-info h4 {
    margin: 0;
    font-size: 1.2rem;
    color: #c1aeff;
}

.data-envio {
    font-size: 0.8rem;
    color: #aeffbb;
    font-family: monospace;
}

.tratado-regras-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    grid-column-gap: 10px;
    grid-row-gap: 10px;

    gap: 20px;
    padding: 30px;

    justify-content: center; 
    
    
    justify-items: center; 
    width: 100%;
    box-sizing: border-box;


    box-shadow: 0 2px 8px 0 rgba(63, 69, 81, 0.16);


    border-radius: 8px;

    background: rgba(10, 5, 25, 0.8);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    grid-auto-flow: row;

}

#produtividade-card .tag-regra{color: #f7de52;}

#privacidade-card .tag-regra{color:  #60f752;}

#prompt-card .tag-regra{color: #f75252}

#etica-card .tag-regra{color: #f752ef}

#seguranca-card .tag-regra{color:  #52d6f7}





#produtividade-card .flip-card-front,
#produtividade-card .flip-card-back{border: 1px solid #f7de52;}

#privacidade-card .flip-card-front, #privacidade-card .flip-card-back{border: 1px solid #60f752}

#prompt-card  .flip-card-front, #prompt-card  .flip-card-back {border: 1px solid #f75252}

#etica-card .flip-card-front, #etica-card  .flip-card-back{border: 1px solid #f752ef}

#seguranca-card .flip-card-front,#seguranca-card .flip-card-back{border: 1px solid  #52d6f7}


/* Parte de Adicionar Regra */

.assinar-tratado{    
    display: flex;
    justify-items: center;
    animation: borderGlow 5s infinite alternate;
    width: 90vw;
    align-self: center;
    flex-direction: column;
    justify-items: center;

    margin-bottom: 150px;

    background: rgba(10, 5, 25, 0.8);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    flex-direction: column;
    padding: 20px;


}

.assinar-tratado-form{
      display: flex;
    justify-items: center;
     align-self: center;
    flex-direction: column;
    justify-items: center;


}

.assinar-tratado-header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.assinar-tratado p{margin: 0;}

.assinar-tratado-header img{

    width: 15px;
    height: auto;
}

/* .assina-tratado-info, .assinar-tratado-regra{
    display: flex;
    width: 90vw;
} */

.assinar-tratado-header-name{
    display: flex;
        background: rgba(96, 69, 205, 0.2);
    border: 1px solid var(--color3);
    padding: 4px 12px;
    justify-content: space-around;
    color: var(--color3);
    align-items: center;
    gap: 8px;
    width: fit-content;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 15px;
}

.assinar-tratado-hr {

  
  flex-grow: 1;
  align-self: center;
  justify-self: center;
    display: flex;
  height: 1px ; /* Espessura da linha */

 background: linear-gradient(to right, #302b5e, rgba(48, 43, 94, 0));
}
    

.assinar-tratado-h1 p{
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.8rem;
}


/* Inputs das Categorias /*


/* Esconde o círculo original do rádio */

input[type="radio"] {
  display: none;

}

/* Estilo padrão do label */

.assinar-tratado-categorias-input label {
  display: flex;
  padding: 8px 15px;
 
  border: 1px solid #333; /* Cor da borda apagada */
  border-radius: 5px;
  color: #888; /* Cor do texto apagado */
  cursor: pointer !important;
  font-size: 0.8rem;
  transition: all 0.3s ease;
}

/* Quando o rádio estiver marcado, estiliza a label que vem logo depois dele (+) */

input[id="produtividade"]:checked + label {
  border-color: #f7de52; /* Cor neon */
  color: #fff;           /* Texto branco */
  box-shadow: 0 0 10px rgba(247, 222, 82, 0.3); /* Brilho suave */
}

input[id="privacidade"]:checked + label {
  border-color: #60f752; /* Cor neon */
  color: #fff;           /* Texto branco */
  box-shadow: 0 0 10px rgba(96, 247, 82, 0.3); /* Brilho suave */
}

input[id="prompts"]:checked + label {
  border-color: #f75252; /* Cor neon */
  color: #fff;           /* Texto branco */
  box-shadow: 0 0 10px rgba(247, 82, 82, 0.3); /* Brilho suave */
}

input[id="etica"]:checked + label {
  border-color: #f752ef; /* Cor neon */
  color: #fff;           /* Texto branco */
  box-shadow: 0 0 10px rgba(247, 82, 239, 0.3); /* Brilho suave */
}

input[id="seguranca"]:checked + label {
  border-color: #52d6f7; /* Cor neon */
  color: #fff;           /* Texto branco */
  box-shadow: 0 0 10px rgba(82, 214, 247, 0.3); /* Brilho suave */
}

.assinar-tratado-categorias-input{
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.assinar-tratado-categorias{
    display: flex;
    flex-direction: column;

}

.assinar-tratado-info{
    display: flex;
    flex-direction: row;
    align-items: center;

    justify-content: space-between;
    gap: 40px;
}

.assinar-tratado-nome

.assinar-tratado-regra .assinar-tratado-h1 label,.assinar-tratado-h1 label, .assinar-tratado-categorias .assinar-tratado-h1 label{
    border: none;
    padding: 0;
    color: #9e9e9e;

    margin-bottom: 5px;
}

.assinar-tratado-nome {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.assinar-tratado-info-name{display: flex; width: 100% !important;}

.assinar-tratado-info-name input{
    display: flex;
    border: 1px solid var(--color5);
    border-radius: 10px;
     min-width: 0;
    padding: 10px;
    color: white;
    flex: 1 !important;
    background-color: var(--glass-bg);
}

.assinar-tratado-regra{
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    flex: 1;
    margin-bottom: 25px;

}

.assinar-tratado-regra textarea{
    display: flex; width: 100% !important;
    border: 1px solid var(--color5);
    background-color: var(--glass-bg);
    border-radius: 10px;
    padding: 10px;
}


.assinar-tratado-button{
    width: fit-content;
    display: flex;
    justify-items: center;
    align-items: center;
    justify-self: center;
    align-self: center;
}





.assinar-button {
  position: relative;
  width: 11em;
  height: 4em;
  outline: none;
  transition: 0.1s;
  background-color: transparent;
  border: none;
  font-size: 13px;
  font-weight: bold;
  color: #ddebf0;
}

#clip {
  --color: var(--color4);
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  border: 5px double var(--color4);
  box-shadow: inset 0px 0px 15px var(--color1);
  -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

.arrow {
  position: absolute;
  transition: 0.2s;
  background-color: var(--color5);
  top: 35%;
  width: 11%;
  height: 30%;
}

#leftArrow {
  left: -13.5%;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
}

#rightArrow {
  -webkit-clip-path: polygon(100% 49%, 0 0, 0 100%);
  left: 102%;
}

.assinar-button:hover #rightArrow {
  background-color: white;
  left: -15%;
  animation: 0.6s ease-in-out both infinite alternate rightArrow8;
}

.assinar-button:hover #leftArrow {
  background-color: white;

  left: 103%;
  animation: 0.6s ease-in-out both infinite alternate leftArrow8;
}

.corner {
  position: absolute;
  width: 4em;
  height: 4em;
  background-color: var(--color5);
  box-shadow: inset 1px 1px 8px var(--color5);
  transform: scale(1) rotate(45deg);
  transition: 0.2s;
}

#rightTop {
  top: -1.98em;
  left: 91%;
}

#leftTop {
  top: -1.96em;
  left: -3.0em;
}

#leftBottom {
  top: 2.10em;
  left: -2.15em;
}

#rightBottom {
  top: 45%;
  left: 88%;
}

.assinar-button:hover #leftTop {
  animation: 0.1s ease-in-out 0.05s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

.assinar-button:hover #rightTop {
  animation: 0.1s ease-in-out 0.15s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

.assinar-button:hover #rightBottom {
  animation: 0.1s ease-in-out 0.25s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

.assinar-button:hover #leftBottom {
  animation: 0.1s ease-in-out 0.35s both changeColor8,
  0.2s linear 0.4s both lightEffect8;
}

.assinar-button:hover .corner {
  transform: scale(1.25) rotate(45deg);
}

.assinar-button:hover #clip {
  animation: 0.2s ease-in-out 0.55s both greenLight8;
  --color: var(--color2);
}

@keyframes changeColor8 {
  from {
    background-color: var(--color5);
  }

  to {
    background-color: var(--color1);
  }
}

@keyframes lightEffect8 {
  from {
    box-shadow: 1px 1px 5px var(--color1);
  }

  to {
    box-shadow: 0 0 2px var(--color5);
  }
}

@keyframes greenLight8 {
  from {
  }

  to {
    box-shadow: inset 0px 0px 32px var(--color4);
  }
}

@keyframes leftArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(10px);
  }
}

@keyframes rightArrow8 {
  from {
    transform: translate(0px);
  }

  to {
    transform: translateX(-10px);
  }
}

/* ================== PILARES DO RANKING ================== */

.pilares-container {
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Alinha eles por baixo */
    gap: 20px;
    flex-wrap: wrap; /* Pra não quebrar no celular */
}

.pilar-card {
    position: relative;
    overflow: visible;
    background: rgba(10, 5, 25, 0.8);
    border: 1px solid var(--cor-cla);
    border-radius: 20px;
    padding: 30px 20px;
    width: 100%;
     max-width: 300px; 
    min-width: 200px; 
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    transition: all 0.4s ease;
    backdrop-filter: blur(10px);
    /* Um brilho bem sutil da cor do clã */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.02);
}

.pilar-podio{
     display: flex;
    justify-content: center;
    align-items: flex-end; /* Alinha eles por baixo */
    gap: 20px;
    flex-wrap: wrap; 


}




/* O Efeito quando passa o mouse */
.pilar-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 30px var(--cor-cla);
    cursor: pointer !important;
}

/* O Destaque pro 1º Lugar (Fica maior e brilha sem precisar de hover) */
.pilar-card.primeiro-lugar {
    transform: scale(1.08);
    border-width: 2px;
    box-shadow: 0 0 40px var(--cor-cla);
    z-index: 2;
}
.pilar-card.primeiro-lugar:hover {
    transform: scale(1.15) translateY(-10px);
}




/* O Destaque pro 2º Lugar */

.pilar-card.segundo-lugar {
    transform: scale(0.98);
    border-width: 2px;
    box-shadow: 0 0 40px var(--cor-cla);
    z-index: 2;
}
.pilar-card.segundo-lugar:hover {
    transform: scale(1.05) translateY(-5px);
}



/* O Destaque pro 3º Lugar */

.pilar-card.terceiro-lugar {
    transform: scale(0.89);
    border-width: 2px;
    box-shadow: 0 0 40px var(--cor-cla);
    z-index: 2;
}
.pilar-card.terceiro-lugar:hover {
    transform: scale(0.98) translateY(-2.5px);
}




/* O Destaque pro 4º Lugar */

.pilar-card.quarto-lugar {
    transform: scale(0.8);
    border-width: 2px;
    box-shadow: 0 0 40px var(--cor-cla);
    z-index: 2;
}
.pilar-card.quarto-lugar:hover {
    transform: scale(0.87) translateY(-1.25px);
}


@media (max-width: 768px) {
    .pilar-card.primeiro-lugar,
    .pilar-card.segundo-lugar,
    .pilar-card.terceiro-lugar,
    .pilar-card.quarto-lugar {
        transform: scale(1) !important; /* Todos ficam do mesmo tamanho no celular */
        margin-bottom: 20px; /* Espaço entre eles na vertical */
    }
}



/* Textos e Ícones dentro do Card */


.cla-icone {

    margin-bottom: 10px;
    filter: drop-shadow(0 0 10px var(--cor-cla));
}

.cla-nome {
     font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    color: white;
    font-weight: 700;
    margin-bottom: 5px;
}

.cla-nivel {
    color: #727272;
     font-size: clamp(0.8rem, 1.5vw, 1rem);
    font-family: monospace;
    margin-bottom: 15px;
}

.cla-xp-total {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px;
    border-radius: 8px;
    font-family: monospace;
    font-weight: bold;
     font-size: clamp(0.9rem, 2vw, 1.2rem);
    border-bottom: 2px solid var(--cor-cla);
}

/* A barrinha de progresso de cada Clã */
.barra-xp-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
}

.barra-xp-fill {
    height: 100%;
    background-color: var(--cor-cla);
    box-shadow: 0 0 10px var(--cor-cla);
    border-radius: 10px;
}

.site-sobre-sinopse-description-gray{

    display: flex;
    align-self: center;
    justify-self: center;
    margin-bottom: 100px;
}

.cla-icone img{
    width: 100%;
    height: auto;
}

@keyframes flutuarCima {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(-60%);
    }
}

.img-medalha {
    position: absolute;
    top: -80px;
    width: 80px;
    height: auto;
    filter: drop-shadow(0 0 10px var(--cor-cla));
    animation: flutuarCima 1s ease-in-out infinite alternate;
}





.pilar-card.primeiro-lugar {
    transform: scale(1.1);
    z-index: 10;
}

.pilar-card.segundo-lugar {
    transform: scale(1.0); /* Tamanho normal */
}

.pilar-card.terceiro-lugar {
    transform: scale(0.9); /* Um pouco menor */
}

.pilar-card.quarto-lugar {
    transform: scale(0.85); /* Bem menor */
}

/* Corrigindo a animação para não bugar o posicionamento absolute */
@keyframes flutuarCima {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}




.degrau {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 300px;
    min-width: 200px;
    margin-top: 25px;
    border-radius: 15px 15px 0 0; /* Arredondado só em cima */
    background: rgba(255, 255, 255, 0.05); /* Fundo sutil */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: none;
    backdrop-filter: blur(5px);
}

.degrau h5 {
    font-size: 2rem;
    font-weight: bold;
    margin: 0;
    opacity: 0.7;
}

/* ALTURAS DOS DEGRAUS (O PÓDIO) */

.degrau-primeiro {
    height: 120px; /* Mais alto */
    border-top: 2px solid #ffdf2a; /* Brilho do campeão */
    background: linear-gradient(to top, rgba(255, 223, 42, 0.1), transparent);
}

.degrau-segundo {
    height: 80px; /* Médio */
    border-top: 2px solid #00f0ff;
}

.degrau-terceiro {
    height: 65px; /* Mais baixo */
    border-top: 2px solid #00ff41;
}

.degrau-quarto {
    height: 50px; 
    border-top: 2px solid #ff2a2a; /* Brilho do campeão */
    
}

/* Estilo do número dentro do degrau conforme a cor do clã */
.degrau-primeiro h5 { color: #ffdf2a; opacity: 1; }
.degrau-segundo h5 { color: #00f0ff; }
.degrau-terceiro h5 { color: #00ff41;}
.degrau-quarto h5 { color: #ff2a2a;}

.pilar-card-container{display: flex;
flex-direction: column; }


.ranking-classes-container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;
    flex-direction: row; /* Garante que fiquem na mesma linha */
    gap: 20px;
    flex-wrap: nowrap; /* Impede que o segundo botão pule para baixo */
    margin: 30px auto 0 auto; /* O auto nas laterais ajuda a centralizar o container na tela */
    width: 80vw; /* Aumentei um pouco para dar respiro, mas pode manter 50vw se preferir */
}

.btn-ranking-classes {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: borderGlow 1s infinite alternate;
    gap: 10px;
    
    /* AQUI ESTÁ O SEGREDO: */
    width: 70%; /* Defina um tamanho fixo ou uma porcentagem como 45% */
    max-width: 100%; 
    overflow: hidden; /* Garante que a imagem não saia do border-radius */

    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7%;
    color: white;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(118, 82, 247, 0.4);
}

.btn-ranking-classes img {
    width: 100%;
    height: auto;
    display: block;
}


.btn-ranking-classes:hover {
    transform: translateY(-10px) scale(1.02);
    cursor: pointer;
   
    box-shadow: 0 15px 40px rgba(118, 82, 247, 0.6); 
}


.modal-body .pilar-podio{
    justify-self: center;
    align-self: center;
    margin-top: 200px;
        margin-bottom: 50px;
}

.modal-body:has(.pilar-podio) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.pilar-podio {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;            
    width: 100%;
    min-height: 85vh;   
    padding-top: 80px;   
    padding-bottom: 40px; 

}


.pilar-card-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;      
}

/* O card escuro com a foto e o XP */
.pilar-card {
    position: relative;  
    width: 320px;         
    min-height: 400px;    
    height: auto;         
    text-align: center;
    
    background-color: #0b0e14;
    border-radius: 12px;
}


.img-medalha {
    position: absolute;
    top: -45px;           
    left: 36.5%;
    transform: translateX(-50%);
    z-index: 2;
}
/* ===== Em desenvolvimento ===== */

.em-desenvolvimento {
    position: relative;
    min-height: 60vh;
    background: repeating-linear-gradient(
        45deg,
        #1a1a2e 0px, #1a1a2e 20px,
        #12122a 20px, #12122a 40px
    );
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
}

.em-dev-faixas {
    position: absolute;
    width: 130%;
    left: -15%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faixa {
    display: flex;
    align-items: center;
    height: 42px;
    background: #f5c400;
    overflow: hidden;
    white-space: nowrap;
}

.faixa-inner {
    display: inline-flex;
    animation: rolar-faixa 14s linear infinite;
}

.faixa-2 .faixa-inner {
    animation-direction: reverse;
    animation-duration: 18s;
}

.faixa span {
    font-family: 'Arial Black', Impact, sans-serif;
    font-weight: 900;
    font-size: 15px;
    color: #1a1100;
    letter-spacing: 0.08em;
    padding: 0 12px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.listra {
    width: 22px;
    min-height: 42px;
    background: #1a1100;
    flex-shrink: 0;
}

.faixa-1 { transform: rotate(-3deg); }
.faixa-2 { transform: rotate(3deg); }

.em-dev-badge {
    position: relative;
    z-index: 10;
    background: #1a1100;
    border: 3px solid #f5c400;
    border-radius: 10px;
    padding: 14px 28px;
    text-align: center;
}

.em-dev-badge p {
    margin: 0;
    font-family: 'Arial Black', Impact, sans-serif;
    font-size: 11px;
    color: #f5c400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.8;
}

.em-dev-badge h2 {
    margin: 4px 0 0;
    font-size: 22px;
    font-weight: 900;
    color: #f5c400;
}

@keyframes rolar-faixa {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}







/* ===== Trocar Ideia ===== */

.ti-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 30px;
    border-radius: 30px;
    background-color:rgba(34, 0, 89, 0.5);
        box-shadow: 0 0 15px var(--color1);
    animation: borderGlow 5s infinite alternate;
}

/* --- Cabeçalho --- */

.ti-header {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ti-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--purple-main);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 20px rgba(118, 82, 247, 0.4);
}

.ti-header-icon img {
    width: 28px;
    height: 28px;
    filter: invert(100);
}

.ti-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: white;
    margin: 0;
    line-height: 1.2;
}

.ti-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* --- Card --- */

.ti-card {
    background-color: #13044446;
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 28px;
    backdrop-filter: blur(10px);
}

/* --- Campos --- */

.ti-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ti-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0 18px;
}

.ti-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted);
}

.ti-lbl-icon {
    width: 16px;
    height: 16px;
    filter: invert(50%);
    flex-shrink: 0;
}

.ti-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin: 0 0 18px;
}

/* Inputs e textarea */

.ti-form input[type="text"],
.ti-form textarea {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: white;
    padding: 14px 16px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.ti-form input[type="text"]:focus,
.ti-form textarea:focus {
    border-color: var(--purple-main);
    box-shadow: 0 0 0 3px rgba(118, 82, 247, 0.18);
}

.ti-form input[type="text"]::placeholder,
.ti-form textarea::placeholder {
    color: #4a4a5a;
}

.ti-form textarea {
    resize: vertical;
    min-height: 130px;
}

/* --- Grid de Clãs --- */

.ti-cla-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ti-radio {
    display: none;
}

.ti-cla-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 18px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 500;
     cursor: url('../cursor/link.cur'), pointer !important;
    transition: all 0.2s ease;
    user-select: none;
}

.ti-cla-btn:hover {
    border-color: rgba(118, 82, 247, 0.4);
    background-color: rgba(118, 82, 247, 0.07);
    color: white;
}

.ti-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.ti-radio:checked + .ti-cla-btn {
    border-color: var(--purple-main);
    background-color: rgba(118, 82, 247, 0.15);
    color: white;
    font-weight: 700;
    box-shadow: 0 0 14px rgba(118, 82, 247, 0.25);
}

/* --- Rodapé --- */

.ti-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.ti-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-muted);
}

.ti-btn-enviar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
     cursor: url('../cursor/link.cur'), pointer !important;
    transition: all 0.3s ease;
}

.ti-btn-enviar:hover {
    background-color: white;
    color: var(--color1);
    border-color: white;
    transform: scale(1.04);
}

.ti-btn-enviar:hover .ti-btn-icon {
    filter: invert(10%) sepia(91%) saturate(5437%) hue-rotate(248deg) brightness(92%) contrast(106%);
}

.ti-btn-icon {
    width: 18px;
    height: 18px;
    filter: invert(100);
    transition: filter 0.3s ease;
}


/* --- Responsividade --- */

@media (max-width: 768px) {
    .ti-card {
        padding: 20px 16px;
    }

    .ti-title {
        font-size: 1.4rem;
    }

    .ti-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .ti-btn-enviar {
        justify-content: center;
        width: 100%;
    }
}








/* ========================================= Responsividade ========================================= */

/* -----------------------------------------------------------------------
   TABLET — até 1024px
   ----------------------------------------------------------------------- */
@media (max-width: 1024px) {
 
    /* --- Navbar --- */
    .navbar {
        width: 95vw;
        gap: 20px;
    }
 
    .navbar-links {
        gap: 15px !important;
    }
 
    /* --- Hero --- */
    .site-home-outdoor-title h1 {
        font-size: 3.5rem;
    }
 
    .site-home-outdoor-gif img {
        max-width: 180px;
    }
 
    .site-home-description {
        width: 65vw;
    }
 
    .site-home-info .home-status {
        width: 20vw;
    }
 
    /* --- Sinopse --- */
    .site-sobre-sinopse,
    .site-missoes-sinopse {
        width: 85%;
    }
 
    /* --- Enigma / Cryptex --- */
    .enigma-box {
        width: 90vw;
        padding: 25px;
    }
 
    /* --- Footer --- */
    .footer-links {
        gap: 40px;
    }
 
    .footer-top,
    .footer-bottom {
        gap: 40px;
    }
}
 
 
/* -----------------------------------------------------------------------
   MOBILE GRANDE — até 768px
   ----------------------------------------------------------------------- */
@media (max-width: 768px) {
 
    /* --- Navbar --- */
    .navbar {
        flex-direction: row;
        width: 95vw;
        padding: 12px 16px;
        gap: 10px;
        justify-content: space-between;
    }
 
    /* Esconde links da navbar no mobile (usa o offcanvas) */
    .navbar-links {
        display: none !important;
    }
 
    .logo-img img,
    .logo img {
        height: 85px !important;
        width: 85px !important;
    }
 
    .logo-title h1 {
        font-size: 1.1rem;
    }
 
    /* --- Seções principais --- */
    .site-home,
    .site-sobre,
    .site-missoes,
    .site-kit,
    .site-terminal,
    .site-social {
        padding: 30px 20px;
        min-height: auto;
    }
 
    /* --- Hero --- */
    .site-home-outdoor {
        flex-direction: column;
        margin: 20px auto;
    }
 
    .site-home-outdoor-title h1 {
        font-size: 2.4rem;
        line-height: 1.2;
    }
 
    /* Imagens flutuantes ficam pequenas e estáticas nos lados */
    .site-home-outdoor-gif {
        position: static;
        transform: none !important;
        animation: none !important;
        opacity: 0.5;
        display: none; /* Oculta no mobile para não atrapalhar o texto */
    }
 
    .site-home-description {
        width: 90vw;
    }
 
    .home-status {
        width: 80vw;
        max-width: 320px;
    }
 
    .site-home-info {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }
 
    .site-home-info .home-status {
        width: 70vw;
        max-width: 280px;
        height: auto;
        padding: 8px 12px;
    }
 
    .site-home-button {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
 
    .site-home-button a {
        width: 80%;
        justify-content: center;
    }
 
    /* --- Sinopse / Sobre / Missões --- */
    .site-sobre-sinopse,
    .site-missoes-sinopse {
        width: 100%;
    }
 
    .site-sobre-sinopse h2,
    .site-missoes-sinopse h2 {
        font-size: 2rem;
    }
 
    .site-sobre-sinopse i,
    .site-missoes-sinopse i {
        font-size: 1.6rem;
    }
 
    .site-sobre-sinopse-bg,
    .site-missoes-sinopse-bg {
        flex-direction: column;
    }
 
    .site-sobre-sinopse-p {
        margin: 10px 0;
    }
 
    /* --- Cards de missão --- */
    .missoes-card {
        width: 100% !important;
    }
 
    /* --- Enigma / Cryptex --- */
    .enigma-box {
        width: 95vw;
        padding: 20px 12px;
    }
 
    .maquina-enigma-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }
 
    /* --- Pódio / Pilares --- */
    .pilar-card.primeiro-lugar,
    .pilar-card.segundo-lugar,
    .pilar-card.terceiro-lugar,
    .pilar-card.quarto-lugar {
        transform: scale(1) !important;
        margin-bottom: 20px;
    }
 
    .degrau {
        max-width: 100%;
        min-width: 0;
    }
 
    /* --- Footer --- */
    footer {
        width: 95vw;
        gap: 25px;
    }
 
    .footer-top,
    .footer-bottom {
        flex-direction: column;
        gap: 25px;
        text-align: center;
    }
 
    .footer-links {
        flex-direction: column;
        gap: 20px;
    }
 
    .footer-social {
        justify-content: center;
    }


     .social-section{
        flex-direction: column;
    }


    .ferramenta-card{
        flex-direction: column;
        gap: 30px;
    }

    .ferramenta-ai{
        border: none;
    }


    .site-home-button{
        margin-top: 45px ;
        margin-bottom: 45px;
    }



    .site-sobre-sinopse-bg{
        margin: 50px;
        gap: 20px;
    }
}
 
 
/* -----------------------------------------------------------------------
   MOBILE PEQUENO — até 480px
   ----------------------------------------------------------------------- */
@media (max-width: 480px) {
 


    /* --- Hero título menor --- */
    .site-home-outdoor-title h1 {
        font-size: 1.9rem;
    }
 
    /* --- Navbar compacta --- */
    .logo-title h1 {
        font-size: 0.95rem;
    }
 
    .logo-img img,
    .logo img {
        height: 44px !important;
        width: 44px !important;
    }
 
    /* --- Seções com menos padding --- */
    .site-home,
    .site-sobre,
    .site-missoes,
    .site-kit,
    .site-terminal,
    .site-social {
        padding: 20px 12px;
    }
 
    /* --- Status badge menor --- */
    .home-status {
        width: 95vw;
        font-size: 10px;
    }
 
    /* --- Cryptex menor --- */
    .cryptex-wrapper-single {
        width: 40px;
    }
 
    .simbolo img {
        width: 38px;
    }
 
    /* --- Botões empilhados com largura total --- */
    .site-home-button a {
        width: 90%;
    }
 
    /* --- Texto do offcanvas --- */
    .offcanvas-start .nav-link {
        width: 260px;
    }
 
    /* --- Seção sinopse --- */
    .site-sobre-sinopse h2,
    .site-missoes-sinopse h2 {
        font-size: 1.6rem;
    }
 
    .site-sobre-sinopse i,
    .site-missoes-sinopse i {
        font-size: 1.3rem;
    }
}