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

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

html{
    scroll-behavior:smooth;
}

body{
   background:#000000;
    color:#d4b896;
    font-family:'Crimson Pro',serif;
    min-height:100vh;
}

/* ============================= */
/* NAVBAR */
/* ============================= */

.navbar{

    position:sticky;

    top:0;

    z-index:999;

    height:70px;

    background:#000;

    border-bottom:2px solid #c8923a;

    display:grid;

    grid-template-columns:280px 1fr 280px;

    align-items:center;

    padding:0 40px;

}

/* Logo */

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    justify-self:start;

}

.star{

    font-size:34px;

}

.brand h2{

    color:#c8923a;

    font-family:'Rye', serif;

    font-size:24px;

}

.brand span{

    color:#777;

    font-size:13px;

    letter-spacing:4px;

}

/* Menu */

.menu{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:35px;

}

.nav-btn{

    color:#d4b896;

    text-decoration:none;

    font-size:16px;

    padding:22px 0;

    position:relative;

    transition:.3s;

}

.nav-btn::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:12px;

    width:0;

    height:2px;

    background:#68ce24;

    transform:translateX(-50%);

    transition:.3s;

}

.nav-btn:hover{

    color:#68ce24;

}

.nav-btn:hover::after{

    width:100%;

}

.nav-btn.active{

    color:#68ce24;

}

.nav-btn.active::after{

    width:100%;

}

/* Busca */

.search-box{

    display:flex;

    justify-content:flex-end;

}

.search-box input{

    width:220px;

    padding:10px 15px;

    border:1px solid #c8923a;

    background:#111;

    color:#fff;

    border-radius:25px;

    outline:none;

}

.search-box input::placeholder{

    color:#777;

}

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

.hero{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-content{

     width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:50px;

    background-size:cover;

    background-position:center;

    position:relative;

}

.hero-content::before{

    content:"";

    position:absolute;

    inset:0;

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

}

.hero-content>*{

    position:relative;

    z-index:2;

}

.hero h1{

    font-family:'Rye';

    font-size:55px;

    color:#ca9c03;

}

.hero p{

    margin-top:20px;

    max-width:850px;

    color:#ffffff;

    line-height:1.8;

}

.home-hero .hero-content{
    min-height: calc(77vh - 9px);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    padding:120px 40px 80px;

    background-image:url("img/banner_novo.png");
    background-size:cover;
    background-position:left center;
    background-repeat:no-repeat;

}


.rules-hero .hero-content{

    background: linear-gradient(#3afa29, #000);

    height: 220px;

}

.regulations-hero .hero-content{

    background: linear-gradient(#3afa29, #000);

    height: 220px;

}

.lore-hero .hero-content{

    background: linear-gradient(#3afa29, #000);

    height: 220px;

}

.team-hero .hero-content{

    background: linear-gradient(#3afa29, #000);

    height: 220px;

}

/* ============================= */
/* LAYOUT */
/* ============================= */

.container{

    display:flex;

    height:calc(100vh - 180px);
}

/* ============================= */
/* SIDEBAR */
/* ============================= */



.sidebar-title{

    color:#ca9c03;

    font-family:'Rye';

    font-size:18px;

    text-align:center;

    margin-bottom:20px;

    border-bottom:1px solid #000000;

    padding-bottom:15px;

}

.category-btn{

    width:100%;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 16px;

    margin-bottom:10px;

    background:#000000;

    border:1px solid #ca9c03;

    border-radius:8px;

    color:#ffffff;

    cursor:pointer;

    transition:.25s;

    text-align:left;

    font-size:15px;

}

.category-btn:hover{

    background:#000000;

    border-color:#c8923a;

    transform:translateX(5px);

}

.category-btn.active{

    border-color: #3afa29;

    color:#207c17;

    background:rgba(77, 190, 25, 0.137);

    font-weight: bold;
}

.chapter-number{

    width:32px;

    height:32px;

    border-radius:50%;

    background:#c8923a;

    color:#000;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:bold;

    flex-shrink:0;

}

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

.content{

    
    width:100%;

    padding:60px;

    background:#000;

    color:#fff;

}

#ruleContent{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.rule-card{

    background:#111111;

    border:1px solid #2d2d2d;

    border-left:5px solid #68ce24;

    border-radius:10px;

    padding:28px;

    transition:.3s;

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

}

.rule-card:hover{

    transform:translateY(-4px);

    border-left-color:#c8923a;

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

}

.rule-card h3{

    display:flex;

    align-items:center;

    gap:12px;

    color:#c8923a;

    font-family:'Rye';

    font-size:24px;

    margin-bottom:18px;

}

.rule-card h3 span{

    font-size:22px;

}

.rule-card ul{

    list-style:none;

    margin:0;

    padding:0;

}

.rule-card li{

    position:relative;

    padding-left:28px;

    margin-bottom:14px;

    line-height:1.8;

    color:#dddddd;

}

.rule-card li::before{

    content:"✔";

    position:absolute;

    left:0;

    color:#68ce24;

    font-weight:bold;

}

/* ============================= */
/* CARTAZ */
/* ============================= */

.poster{

    background:#427222d5;

    border:1px solid #24360b;

    border-top:3px solid #8cee30;

    padding:30px;

    margin-bottom:35px;

    text-align:center;
}

.poster span{

    color:#f7be04;

    letter-spacing:4px;

    text-transform:uppercase;

    font-size:12px;
    
    font-weight: bold;
}

.poster h2{

    margin-top:10px;

    font-family:'Rye';

    color:#f3f3f2;

    font-size:30px;
}

.poster p{

    margin-top:12px;

    color:#ffc506;

    font-weight: bold;
}

/* ============================= */
/* SEÇÕES */
/* ============================= */

.section{

    margin-bottom:35px;
    margin-left: 20px;
}

.section h3{

    color:#c8923a;

    margin-bottom:12px;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:15px;
}

.section ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.section li{

     display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;

    color: #c4a882;

    font-size: 18px;
    line-height: 1.7;
}

.section li::before{

    content: "›";

    color: #39a024;

    font-size: 24px;

    font-weight: bold;

    flex-shrink: 0;
}

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

footer{

    margin-top:50px;

    padding-top:25px;

    padding-bottom: 25px;

    border-top:1px solid #ca9c03;

    color:#ffffff;

    text-align:center;

    font-style:italic;
}

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

::-webkit-scrollbar{

    width:6px;
}

::-webkit-scrollbar-track{

    background:#000000;
}

::-webkit-scrollbar-thumb{

    background:#68ce24;
}

::-webkit-scrollbar-thumb:hover{

    background:#0a460d;
}

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

@media(max-width:900px){

    .sidebar{

        width:210px;
    }

    .content{

        padding:25px;
    }

}

@media(max-width:700px){

    .container{

        flex-direction:column;
    }

    .sidebar{

        width:100%;

        height:230px;
    }

    .navbar{

        flex-wrap:wrap;

        height:auto;

        padding:15px;
    }

    .menu{

        width:100%;

        justify-content:center;

        margin:10px 0;
    }

    .search-box{

        width:100%;
    }

    .search-box input{

        width:100%;
    }

}

.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:35px;

    flex-wrap:wrap;

}

.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:20px;

    margin-top:35px;

    flex-wrap:wrap;

}

.discord-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    min-width:170px;

    height:50px;

    background:#68ce24;

    color:#ffffff;

    text-decoration:none;

    font-weight:bold;

    border-radius:8px;

    transition:.3s;

}

.discord-btn:hover{

    box-shadow:0 0 30px rgba(104,206,36,.45);

    transform:translateY(-3px);

}

.social-buttons{

    margin-top:25px;

    display:flex;

    justify-content:center;

}

.discord-btn,.instagram-btn{

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px 28px;

    background-color: #ca9c03;

    color:#1e7a15;

    text-decoration:none;

    font-weight:bold;

    border-radius:8px;

    transition:.3s;
}

.instagram-btn i{

    font-size:22px;

}

.instagram-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 0 30px rgba(104,206,36,.45);

}

.lore{

    max-width:1200px;

    margin:auto;

    padding:70px 30px;

}

.lore-intro{

    text-align:center;

    margin-bottom:70px;

}

.lore-intro h2{

    font-family:'Rye';

    color:#c8923a;

    font-size:40px;

    margin-bottom:20px;

}

.lore-intro p{

    max-width:850px;

    margin:auto;

    line-height:2;

    color:#d8d8d8;

}

.timeline{

    position:relative;

    margin-top:40px;

}

.timeline::before{

    content:"";

    position:absolute;

    left:22px;

    top:0;

    bottom:0;

    width:3px;

    background:#68ce24;

}

.chapter{

    position:relative;

    margin-left:60px;

    margin-bottom:60px;

    padding:30px;

    background:#111;

    border-radius:10px;

    border-left:5px solid #68ce24;

}

.chapter::before{

    content:"";

    position:absolute;

    width:18px;

    height:18px;

    background:#68ce24;

    border-radius:50%;

    left:-48px;

    top:35px;

}

.chapter span{

    color:#c8923a;

    letter-spacing:3px;

    font-size:12px;

}

.chapter h3{

    margin:12px 0;

    font-family:'Rye';

    color:#fff;

    font-size:30px;

}

.chapter p{

    line-height:1.9;

    color:#ccc;

}

.regulations{

    max-width:1300px;

    margin:auto;

    padding:60px 40px;

}

.intro-card{

    background:#121212;

    border-left:5px solid #68ce24;

    border-radius:10px;

    padding:35px;

    margin-bottom:40px;

}

.intro-card h2{

    font-family:'Rye';

    color:#c8923a;

    margin-bottom:15px;

}

.intro-card p{

    line-height:1.8;

    color:#ddd;

}

.regulations{

    max-width:1300px;

    margin:auto;

    padding:50px;

}

.regulations-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:20px;

    margin-bottom:40px;

}

.regulation-card{

    background:#111;

    border:1px solid #2a2a2a;

    border-left:5px solid #68ce24;

    border-radius:8px;

    padding:25px;

    cursor:pointer;

    transition:.3s;

}

.regulation-card:hover{

    transform:translateY(-5px);

    border-left-color:#c8923a;

}

.regulation-card h3{

    color:#c8923a;

    font-family:'Rye';

    margin-bottom:15px;

}

.regulation-card p{

    color:#ddd;

    line-height:1.7;

}

#regulationContent{

    display:flex;

    flex-direction:column;

    gap:25px;

}

/* ============================= */
/* GRID DAS LORES */
/* ============================= */

.lore-grid{
    display:grid;
    grid-template-columns:repeat(3, 280px);
    justify-content:center;
    gap:25px;
    padding:40px 20px;
}

/* ============================= */
/* CARD */
/* ============================= */

.lore-card{

    width:100%;
    min-height:220px;

    display:flex;
    flex-direction:column;

    padding:22px;

    background:#1d140d;

    border:2px solid #c8923a;
    border-radius:10px;

    transition:.3s;

}

.lore-card:hover{

    transform:translateY(-8px);

    border-color:#68ce24;

    box-shadow:0 0 25px rgba(104,206,36,.25);

}

/* ============================= */
/* ÍCONE */
/* ============================= */

.lore-icon{

    font-size:30px;

    margin-bottom:18px;

}

/* ============================= */
/* TÍTULO */
/* ============================= */

.lore-card h2{

    font-family:'Rye';

    color:#c8923a;

    font-size:24px;

    margin-bottom:12px;

}

/* ============================= */
/* DESCRIÇÃO */
/* ============================= */

.lore-card p{

    color:#d2c6b5;

    font-size:15px;

    line-height:1.7;

    margin-bottom:20px;

}

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

.read-btn{

    display:block;

    width:100%;

    margin-top:auto;

    padding:12px;

    background:#68ce24;

    color:#000;

    text-align:center;

    text-decoration:none;

    font-weight:bold;

    border-radius:6px;

    transition:.25s;

}

.read-btn:hover{

    background:#8cee30;

    transform:translateY(-2px);

}

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

@media(max-width:1000px){

    .lore-grid{

        grid-template-columns:repeat(2,280px);

    }

}

@media(max-width:650px){

    .lore-grid{

        grid-template-columns:280px;

    }

}

.lore-book{

    max-width:900px;

    margin:50px auto;

    padding:50px;

    background:#18130f;

    border:1px solid #5a4426;

    border-top:5px solid #c8923a;

    border-radius:12px;

    box-shadow:0 0 30px rgba(0,0,0,.6);

    margin-bottom: 40px;

}

.lore-book h2{

    font-family:'Rye';

    color:#c8923a;

    font-size:34px;

    margin:45px 0 20px;

}

.lore-book p{

    color:#d8d1c4;

    line-height:2;

    text-align:justify;

    font-size:18px;

    margin-bottom: 20px;

}

.lore-book hr{

    border:none;

    border-top:1px solid #5f4727;

    margin:40px 0;

}

.paragraph-space{
    height:30px;
}

.lore-image {
    display: block;

    width: 100%;
    max-width: 500px;

    height: auto;

    margin: 40px auto;

    border: 2px solid #c8923a;
    border-radius: 8px;

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

.team-about{

    max-width:1100px;

    margin:0 auto;

    padding:70px 30px;

}


/* FUNDADOR */

.founder-card{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:40px;

    padding:35px;

    background:#000000;

    border:2px solid #c8923a;

    border-radius:12px;

    margin-bottom:70px;

}

.founder-photo{

    width:180px;

    height:180px;

    object-fit:cover;

    border-radius:50%;

    border:4px solid #c8923a;

}

.founder-info{

    text-align:left;

}

.founder-label{

    color:#68ce24;

    font-size:13px;

    letter-spacing:4px;

    font-weight:bold;

}

.founder-info h2{

    font-family:'Rye';

    color:#c8923a;

    font-size:38px;

    margin:10px 0;

}

.founder-info p{

    color:#d2c6b5;

    font-size:17px;

}


/* TEXTO */

.about-text{

    max-width:850px;

    margin:0 auto;

    text-align:center;

}

.about-text .subtitle{

    color:#68ce24;

}

.about-text h2{

    font-family:'Rye';

    color:#c8923a;

    font-size:32px;

    margin:15px 0 30px;

}

.about-text p{

    color:#d2c6b5;

    font-size:18px;

    line-height:1.9;

    margin-bottom:20px;

}


/* CELULAR */

@media(max-width:700px){

    .founder-card{

        flex-direction:column;

        text-align:center;

    }

    .founder-info{

        text-align:center;

    }

}

.rule-btn{

    display:inline-block;

    margin-top:12px;

    padding:10px 18px;

    background:#68ce24;

    color:#000;

    text-decoration:none;

    font-weight:bold;

    border-radius:6px;

    transition:.3s;

}

.rule-btn:hover{

    background:#8cee30;

    transform:translateY(-2px);

}

.banner-e {
    display: block;

    width: 100%;
    max-width: 400px;

    height: auto;

    margin: 40px auto;

    

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

/* Cactus RP - FelipeNader - 2026 */

body::before {
    content: "FelipeNader";
    position: fixed;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}