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

/* Fontes em estilo Pokemon */

@font-face {
    font-family: 'PokemonTitulo';
    src: url('../fonts/Ketchum.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'PokemonParagrafo';
    src: url('../fonts/Pokemon-Classic.ttf') format('truetype'); 
    font-weight: normal;
    font-style: normal;
}

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

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

body {

      cursor: url('../cursor/Cartoon-Hand-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: #800000;       /* Vermelho vinho profundo */
    --color2: #A30000;       /* Vermelho escuro de transição */
    --color3: #CC0000;       /* Vermelho Pokédex (sombra/detalhes) */
    --color4: #E60000;       /* Vermelho vivo intermediário */
    --color5: #FF1A1A;       /* Vermelho claro para brilhos */
    --purple-main: #FF0000;     /* Vermelho oficial Pokémon */
    --purple-dark: #3A0000;     /* Fundo escuro contrastante */
    --glass-bg: rgba(255, 255, 255, 0.07);
    --border-glass: rgba(255, 0, 0, 0.3);
    --text-muted: #8E8E93;   /* Cinza neutro para leitura */
    --grid-line: rgba(255, 107, 107, 0.08);
    --highlight: rgba(255, 0, 0, 0.05);
}




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

}

p {
    font-family: 'PokemonParagrafo';
}

/* 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,
.logo-title:hover,
.logo-img:hover,
.logo-link:hover,
.logo:hover,
 
/* 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/Cartoon-Hand-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/Cartoon-Hand-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 a {
    font-size: 12.5px;
}

.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: wobble-hor-bottom 0.8s ease-in-out infinite alternate-reverse both;
	        animation: wobble-hor-bottom 0.8s ease-in-out infinite alternate-reverse both;
     cursor: url('../cursor/Cartoon-Hand-Link.cur'), pointer !important;
}

.logo img {
    transition: all 0.7s ease;
     filter: brightness(0) invert(100%);}

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

}

.logo:hover img {
    transform: rotate(180deg) scale(1.1);
    filter: brightness(1) invert(0%) drop-shadow(0 0 10px white);

}




/* ----------------------------------------------
 * Generated by Animista on 2026-6-1 14:45:15
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@-webkit-keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}
@keyframes wobble-hor-bottom {
  0%,
  100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}








.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: #FF1A1A
}

/* 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: #3A0000;
    background: linear-gradient(180deg, #800000 0%, #CC0000 35%, #FF1A1A 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(13%) sepia(100%) saturate(7471%) hue-rotate(360deg) brightness(101%) contrast(105%);

}

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

.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 #A30000;

}


.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:white;
    background: linear-gradient(80deg, rgb(204, 204, 204) 0%, rgb(230, 230, 230) 35%, white 100%);

    color: var(--purple-main);
    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: var(--purple-main);
    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: var(--purple-main);
}

footer img {
filter: brightness(0) saturate(100%) invert(26%) sepia(99%) saturate(7386%) hue-rotate(0deg) brightness(101%) contrast(106%);
    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: var(--purple-main);
    padding: 10px;
    border-radius: 15px;
    filter: drop-shadow(0 0 10px var(--purple-main));
}

.footer-social a:hover img {
    filter: invert(100%)

}

.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;
}

.footer-bg p{
    font-size: 12.5px;
}

.footer-a-list a {
    font-size: 12.5px;
}


@keyframes borderGlow {
  0% {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 255, 255, 1);
    border: 1px solid rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
}

/* ==================== 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;
    align-self: center;
    justify-self: 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%);
}


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



.site-home-outdoor-title b {
    color: #f16565;
    font-size: clamp(1.5rem, 4vw, 3rem);
}


/* ==================== 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);
}



.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);
}

/* Portal Sona */

.pilares-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 100px;
    flex-wrap: wrap; 
}

.ranking-classes-container {
    display: flex;
    justify-content: center; 
    align-items: center;
    flex-direction: row;
    gap: 20px;
    flex-wrap: nowrap;
    margin: 30px auto 0 auto; 
    width: 80vw;
}

.btn-ranking-classes {
    display: flex;
    justify-content: center;
    align-items: center;
    animation: borderGlow 1s infinite alternate;
    gap: 10px;
    
   
    width: 70%; 
    max-width: 100%; 
    overflow: hidden; 

    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 var(--color1);
}

.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); 
}




/* ===== Em desenvolvimento ===== */

.em-desenvolvimento {
    position: relative;
    min-height: 15vh;
    background: repeating-linear-gradient(
        45deg,
        #1a1a2e 0px, #1a1a2e 20px,
        #12122a 20px, #12122a 40px
    );
    margin-top:15px;
    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%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faixa-listra-span{
    display: flex;
    align-items: center;
    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 50s linear infinite;
}


.faixa span {
    font-family: 'PokemonParagrafo';
    font-weight: 600;
    font-size: 13px;
    color: #1a1100;
    letter-spacing: 0.08em;
    padding: 0 12px;
    flex-shrink: 0;
}

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




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



.ano-ia-outdoor {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.ano-ia-title {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    width: fit-content;
    justify-self: center;
    align-self: center;
    margin-bottom: 25px;
margin-top: 100px}

    .ano-ia-title h1{
        font-size: 3.5rem;
        color: #FF1A1A;
    animation: glowPulse 2s ease-in-out infinite alternate, pokemonColors 4s linear infinite;
}

.ano-ia-title-hr {
    position: relative;
    display: inline-block; 
    width: 100%;           
    padding-bottom: 15px; 
}

/* Linha gradiente */
.ano-ia-title-hr::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
      background: linear-gradient(90deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 1) 50%,
            rgba(255, 255, 255, 0) 100%);
    height: 1px; 
}

.ano-ia-title p {
    font-size: 1rem;
    color: #ffffff;
    text-shadow: 0px 4px 20px rgba(255, 255, 255, 0.8);
}
@keyframes glowPulse {
    0% {
        text-shadow: 0 0 5px rgba(255, 26, 26, 0.6), 0 0 10px rgba(255, 26, 26, 0.4);
    }
    100% {
        text-shadow: 0 0 15px #FF1A1A, 0 0 25px #ffffff, 0 0 35px #ffffff;
    }
}

@keyframes pokemonColors {
    0%, 100% { color: #FF1A1A; }     
    50% { color: #ffffff; }        
}

/* =============== IA-Codex Outdoor =============== */


.ia-codex-outdoor{
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-items:center;
    justify-self: center;
    align-items: center;
    align-self: center;
    align-content: center;
    padding: 50px;
    width: 100%;
}
.ano-ia-outdoor{
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    align-content: center;
    width: 100%;



}

.ano-ia-outdoor a{
     display: flex;
    justify-content: center;
    align-items: center;

    gap: 10px;
    width: 80%; 
    max-width: 100%; 
    overflow: hidden; 

    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);
}

.ano-ia-outdoor img{
    width: 100%;
    height: auto;
    display: block;
    

}



.ano-ia-outdoor a:hover {
    transform: translateY(-10px) scale(1.02);
    cursor: pointer;
   
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.6); 
}

#bg-cla{border: 1px solid rgb(255, 0, 0); animation: borderGlowbg 1s infinite alternate;}
#tp-cla{border: 1px solid rgb(255, 223, 42); animation: borderGlowtp 1s infinite alternate;}
#cc-cla{border: 1px solid rgb(0, 240, 255); animation: borderGlowcc 1s infinite alternate;}
#mm-cla{border: 1px solid rgb(0, 255, 65); animation: borderGlowmm 1s infinite alternate;}

@keyframes borderGlowbg {
  0% {
    box-shadow: 0 0 15px rgba(255, 65, 65, 0.6);
    border: 1px solid rgba(255, 65, 65, 0.6);
  }
  50% {
    box-shadow: 0 0 25px rgb(255, 0, 0);
    border: 1px solid rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 15px rgba(160, 0, 0, 0.3);
    border: 1px solid rgba(160, 0, 0, 0.3);
  }
}

@keyframes borderGlowtp {
  0% {
    box-shadow: 0 0 15px rgba(255, 223, 42, 0.6);
    border: 1px solid rgba(255, 223, 42, 0.6);
  }
  50% {
    box-shadow: 0 0 25px rgb(255, 223, 42);
    border: 1px solid rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 15px rgba(255, 223, 42, 0.3);
    border: 1px solid rgba(255, 223, 42, 0.3);
  }
}

@keyframes borderGlowcc {
  0% {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.6);
    border: 1px solid rgba(0, 240, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 25px rgb(0, 240, 255);
    border: 1px solid rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
    border: 1px solid rgba(0, 240, 255, 0.3);
  }
}

@keyframes borderGlowmm {
  0% {
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.6);
    border: 1px solid rgba(0, 255, 65, 0.6);
  }
  50% {
    box-shadow: 0 0 25px rgb(0, 255, 65);
    border: 1px solid rgba(255, 255, 255, 1);
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 134, 34, 0.3);
    border: 1px solid rgba(0, 134, 34, 0.3);
  }
}

.ano-ia-deck{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
    margin-top: 50px;
    flex-wrap: wrap;
    text-align: center;
    width: 100%;
}

.slot{
    display: flex;
    flex-direction: column;
    width: 25%;
    height: auto;
    flex-wrap: wrap;
    padding: 20px;
    padding-top: 7%;
    padding-bottom: 7%;
    background: rgba(255, 255, 255, 0.1);
    border: 3px dashed rgba(255, 255, 255, 0.2);
    border-radius: 7%;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px --;
}

.slot p{
    font-size: clamp(0.5rem, 2vw, 3rem);
    color: rgba(255, 255, 255, 0.5);
    
}

.slot img{
    width: 25%;
    height: auto;
    display: flex;
    margin-bottom: 15px;
    align-self: center;
    justify-self: center;
    filter: grayscale(100%) brightness(150%) contrast(120%);
}
.slot:hover {
    transform: translateY(-10px) scale(1.05);
    cursor: pointer;
   
    box-shadow: 0 15px 40px rgba(255, 255, 255, 0.6); 
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.slot:hover p{
    color: white;
}

.slot:hover img{
    filter:  brightness(0) invert(1);
}




.quest-dashboard{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    justify-items: center;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 100%;
}

.quest-board-body{
    text-wrap: wrap;
    position: relative;
     display: flex;
     overflow: auto;
    justify-content: start;
}

.quest-board-body pre,.quest-dashboard p, .quest-submission-inputs label, .quest-submission-inputs ::placeholder, .quest-submission-inputs input {
    font-family: 'PokemonParagrafo', monospace;
    font-size: clamp(0.5rem, 0.8vw, 2rem);
    margin: 0;
    color: white;
}

.quest-submission-inputs-item-label label{
    color: #ff0000;
}

.quest-board-body pre {
    white-space: pre-wrap;       
    white-space: -moz-pre-wrap;  
    word-break: break-word;         
    margin: 0;
    width: 100%;
}

.quest-dashboard h1{
    font-size: clamp(1rem, 2.5vw, 4rem);
    
}

.quest-board, .quest-submission{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 45%;
    padding: 20px;
    
    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(255, 255, 255, 0.4);
}


.quest-submission-inputs{
    display: flex;
    flex-direction: column;
    gap: 15px;
}



.quest-board-header, .quest-board-footer{
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 20px;
    align-items: center;
    justify-content: space-between;
}


.quest-board-header:after, .quest-board-body:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 38%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
}

#quest-board-header-1:after{
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 0, 0) 50%, rgba(255, 255, 255, 0) 100%);

}

.quest-board-header img{
    width: 25px;
    height: auto;
    filter: hue-rotate(240deg) saturate(1.5);
}

.quest-board-header h1{
    font-size: clamp(1rem, 2.5vw, 4rem);
    color: rgb(255, 0, 0);
}


.quest-board-footer-reward, .quest-board-footer-level{
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: center;
    align-items: center;
    padding: 5px;
    border: 1px solid;
    border-radius: 10px;

}



.quest-board-footer-reward img{
    width: 20px;
    height: auto;
   filter: brightness(0) saturate(100%) invert(81%) sepia(59%) saturate(4831%) hue-rotate(11deg) brightness(103%) contrast(103%);
}

.quest-board-footer-reward h1{ 
    margin:0;
    font-size: clamp(0.5rem, 1.5vw, 2rem);
    color: rgb(255, 208, 0);
}

.quest-board-footer-level img{
    width: 20px;
    height: auto;
}

.quest-board-footer-level p{
    margin:0;
    color: rgb(0, 255, 65);
    font-size: clamp(0.25rem, 0.9vw, 2rem);
    font-weight: bold;
}

.quest-submission-inputs input, .quest-submission-inputs textarea, .quest-submission-inputs select{
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7%;
    color: white;
    margin-top: 10px;
    font-weight: bold;
    width: 100%;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    padding: 5px;
}

.quest-submission-inputs input:focus, .quest-submission-inputs textarea:focus, .quest-submission-inputs select:focus{
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
}


.quest-submission-footer{
    display: flex;
    justify-content: center;
    justify-self: center;
    width: 75%;
    transition: all 0.3s ease;
    margin: 20px auto;
    font-family: 'PokemonTitulo', sans-serif;
    font-size: clamp(1rem, 2vw, 3rem);
}

.quest-submission-footer button{

    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 7%;
    color: black;
    width: 75% !important;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
    padding: 10px;
    width: fit-content;
    background: #ffffff;
background: linear-gradient(92deg, rgba(255, 255, 255, 1) 0%, rgba(255, 204, 204, 1) 50%, rgba(255, 0, 0, 1) 100%);
}

.quest-submission-footer button:hover{
   background: rgb(255, 0, 0);
background: linear-gradient(92deg, rgba(255, 0, 0, 1) 0%, rgba(255, 204, 204, 1) 50%,rgba(255, 255, 255, 1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
    transform: scale(1.05);
    cursor: pointer;
}








/* CSS das Cards */




.ano-ia-outdoor-central{
    display: flex;
    flex-direction: column;
    gap: 20px;

    align-items: center;
}

.ano-ia-banco-cards-header{
    display: flex;
    position: relative;
    margin: 5%;
    color: white;
    justify-self: center;
    transition:all 0.3s ease;
    align-items: center;
    

}

.ano-ia-banco-cards-header:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    transition:all 0.3s ease;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgb(255, 0, 0) 50%, rgba(255, 255, 255, 0) 100%);
    animation: pulse 4s linear infinite;
    
}

@keyframes pulse {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}



.arena-split-layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    width: 90vw;
    margin: 0 auto;
}

.card-banco {
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: rgba(25, 5, 5, 0.8);
    border: 1px solid white;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.25);
    justify-content: center;
}

.ia-codex-inventory {
    width: 40%;
    background: rgba(10, 5, 25, 0.8);
    border: 1px solid var(--color2);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}


.ia-codex-inventory-stats {
    display: flex;
    gap: 25px;
    flex-direction: row;
    margin: 10%;
    align-items: center;
    justify-content: center;
}





.ia-codex-inventory-stats-box {
    display: flex;
    border: 1px solid white;
    border-radius: 15px;
    color: white;

    gap: 5px;
    align-items: center;
    background-color: rgb(26, 26, 46,0.5);
    flex-direction: column;
    font-size: clamp(0.5rem, 0.7vw, 0.7rem);
    padding: 3%;



}



#num h1 {
    color: #ffbd2e;
    font-weight: 700;

    text-shadow: 0 0 10px #ffbd2e;
}

#tool h1 {
    color: #6045cd;
    font-weight: 700;

    text-shadow: 0 0 10px #6045cd;
}

#prom h1 {
    color: #09ff16;
    font-weight: 700;

    text-shadow: 0 0 10px #09ff16;
}



.card {
    position: relative;
    width: 280px;
    min-height: 400px; /* Mudamos de height fixo para min-height (ela cresce se precisar) */
    height: auto;
    border-radius: 15px;
    overflow: hidden;
    color: white;
    cursor: url('../cursor/Cartoon-Hand-Link.cur'), pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.6);
    background: #1a1a2e;
    border: 3px solid #444;
    
    display: flex;
    flex-direction: column; /* Organiza os itens em coluna */
    padding-bottom: 50px; /* CRUCIAL: Deixa um buraco de 50px no fundo pro Rodapé não esmagar o texto */
}


.card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 15px 35px rgba(255,255,255,0.2);
}


.psquico-theme {

    background: linear-gradient(135deg, #2a0d3b 0%, #5010a3 100%);
    animation: borderGlow 5s infinite alternate;
}

.psquico-theme .card-weak p{
    color: white;
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 15px rgb(60, 0, 128);
        border: 1px solid rgb(60, 0, 128);
    }

    50% {
        box-shadow: 0 0 25px rgb(79, 0, 170);
        border: 1px solid rgb(79, 0, 170);
    }

    100% {
        box-shadow: 0 0 15px rgb(104, 0, 223);
        border: 1px solid rgb(104, 0, 223);
    }
}
.psquico-theme:hover { box-shadow: 0 15px 35px rgba(55, 16, 163, 0.6); }


.psquico-theme .card-type, .psquico-theme .card-name{
    color: white;
}


/* --- EFEITO HOLOGRÁFICO --- */
.holo-glare {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.4) 25%, rgba(255,255,255,0.5) 50%, transparent 55%);
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-100%);
    transition: opacity 0.3s, transform 0.6s ease-in-out;
}
.card:hover .holo-glare {
    opacity: 1;
    transform: translateX(100%);
}


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

.card-name h2 {
    font-size: 1.2rem;
    margin: 0;
    text-shadow: 1px 1px 2px black;
    letter-spacing: 1px;
}

.card-type {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(0,0,0,0.5);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
}

.card-type img { width: 15px; height: 15px; }

.card-image-box {
    width: 90%;
    height: 140px;
    margin: 10px auto;
    border: 2px solid silver;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 10px black;
}
.card-image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-body { padding: 0 15px; }

.card-description p {
    font-size: 0.7rem;
    font-style: italic;
    color: #ccc;
    text-align: center;
    margin-bottom: 10px;
}

.attack-deck {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.attack-deck a{
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    justify-items: space-between;
    transition: all 0.3s ease;
}

.attack-deck a:hover{
    background-color: #ffffff33;
    border-radius: 15px;
    transform: scale(1.08);
    padding: 5px;
}

.attack {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 5px;
}
.attack h4 { font-size: 0.9rem; margin: 0; color: white; }
.attack p { font-size: 0.8rem; margin: 0; color: #ffbd2e; font-weight: bold; } /* XP ou Dano */

.card-footer {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    display: flex;
    gap: 15%;
    justify-content: space-between;
    padding: 10px 15px;
    background: rgba(0,0,0,0.5);
    font-size: 0.7rem;
}

.card-weak p { margin: 0; }
.card-weak span { color: #ff1a1a; font-weight: bold; }

.card-touch {  display: flex; align-items: center; gap: 5px; color: #00ff41; font-weight: bold; gap: 10px;}

.card-touch p{
    margin: 0;
}

.card-touch img{
    width: 15%;
    height: auto;
     filter: brightness(0) saturate(100%) invert(60%) sepia(90%) saturate(3020%) hue-rotate(95deg) brightness(101%) contrast(106%);

}

/* Celular */
@media (max-width: 768px) {
    .arena-split-layout { flex-direction: column; }
    .card-banco, .ia-codex-inventory { width: 100%; }
}


.ia-codex-inventory-title img{
    width: 15%;
    height: 15%;
}

.ia-codex-inventory-title{
    display: flex;
    flex-direction: row;
    justify-content: start;
    position: relative;
    align-items: center;
    gap: 12.5%;
    color: white;
}


.ia-codex-inventory-title:after, .ia-codex-inventory-stats:after {
    content: "";
    position: absolute;
    bottom: -20%;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 1px;

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

.ia-codex-inventory-stats{
    display: flex;
    position: relative;
    flex-direction: row;
    gap: 5%;

}

.ia-codex-inventory-stats-box {
    display: flex;
    flex-direction: column;
    gap: 1%;
    background-color: rgba(68, 68, 68, 0.5);
}

.card-footer{
    display: flex;
    flex-direction: row;
}






.ia-codex-inventory-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-top: 15px;
}


.ia-codex-items {
    display: flex;
    flex-direction: column;
    background: rgba(15, 15, 25, 0.8); 
    border: 1px solid rgb(255, 255, 255);
    border-radius: 12px;
    padding: 15px;
    transition: all 0.3s ease;
}


.ia-codex-items:hover {

    transform: translateX(5px); 
}

#deck-dos-prompts{
        border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.1);
}

#codex-etica{
        border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 5px 20px rgba(0, 255, 0, 0.1);
}

#ferramentas-detec{
        border-color: rgba(55, 0, 255, 0.5);
    box-shadow: 0 5px 20px rgba(55, 0, 255, 0.1);
}

#kit-ia{
        border-color: rgba(255, 0, 0, 0.5);
    box-shadow: 0 5px 20px rgba(255, 0, 0, 0.1);
}




#kit-ia .ia-codex-items-img{
    background: rgba(255, 0, 0, 0.5);
}

#ferramentas-detec .ia-codex-items-img{
    background: rgba(55, 0, 255, 0.5);
}

#codex-etica .ia-codex-items-img{
    background:  rgba(0, 255, 0, 0.5);
}

#deck-dos-prompts .ia-codex-items-img{
    background: rgba(0, 255, 255, 0.5);
}

.ia-codex-items-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px; 
}


.ia-codex-items-img {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px; 
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    flex-shrink: 0;
}

.ia-codex-items-img img {
    width: 100%;
    height: auto;
    filter: invert(1); 
}


.ia-codex-items-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ia-codex-items-title h3 {
    margin: 0;
    font-size: clamp(1.25rem, 1vw, 2rem);
    color: white;
    font-family: 'PokemonTitulo', 'Exo 2', sans-serif;
    letter-spacing: 1px;
}

.ia-codex-items-title p {
    margin: 0;
    font-size: clamp(0.25rem, 0.75vw, 1rem);
    color: #8E8E93; /* Cinza hacker */
    font-family: 'PokemonParagrafo', monospace;
    text-transform: uppercase;
}

/* ==================================================
   O BOTÃO "BAIXAR" (Transformando a div em botão)
================================================== */
.ia-codex-items-body {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 15px;
    background: rgba(0, 240, 255, 0.05);
    border: 1px solid #ffffff; /* Borda Ciano Neon */
    border-radius: 20px; /* Formato de Pílula */
    width: fit-content;
    align-self: flex-start; /* Joga o botão pra esquerda */
    margin-left: 60px; /* Alinha o botão com o texto, ignorando o ícone */
    cursor: pointer;
    transition: all 0.3s ease;
}

.ia-codex-items-body p {
    margin: 0;
    font-size: 0.75rem;
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
}

.ia-codex-items-body img {
    width: 12px;
    height: auto;

    filter: invert(56%) sepia(85%) saturate(2329%) hue-rotate(152deg) brightness(101%) contrast(104%); 
}

.ia-codex-items-body:hover {
    background: #ffffff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.ia-codex-items-body:hover p {
    color: #050505; /* Fica preto quando o fundo fica ciano */
}

.ia-codex-items-body:hover img {
    filter: brightness(0); /* Deixa o ícone preto */
}