/* ===============================

   SEÇÃO GERAL – FUNDO

================================ */

.info-page {

    width: 100%;

    background: rgba(7, 3, 3, 0.986); /* marrom MUITO escuro */

    color: #020101;

    padding: 80px 0 120px;



    box-shadow:

        inset 0 1px rgba(5, 4, 4, 0),

        inset 0 -1px rgba(0, 0, 0, 0);

}



/* ===============================

   CONTAINER CENTRAL

================================ */

.info-header,

.info-content {

    max-width: 1100px;

    margin: 0 auto;

}



/* ===============================

   TÍTULO

================================ */

.info-header {

    padding: 0 20px;

    margin-bottom: 60px;

}



.info-header h1 {

    font-size: 36px;

    color: #eceae5;

    margin-bottom: 10px;

}



.info-header p {

    color: #bfb2a0;

    font-size: 16px;

}



/* ===============================

   BLOCO DE CONTEÚDO (CARD)

================================ */

.info-content {

    background: rgba(28, 18, 12, 0.75); /* marrom translúcido */

    border-radius: 6px;



    padding: 50px 60px;

    margin-top: 20px;



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



    box-shadow:

        inset 0 1px rgb(3, 3, 3),

        0 0 40px rgba(0,0,0,0.6);

}



/* ===============================

   TEXTO

================================ */

.info-text p {

    line-height: 1.8;

    margin-bottom: 40px;

    color: #e4e1dd;

}



/* ===============================

   SUBTÍTULO

================================ */

.info-text h2 {

    color: #f19d16;

    margin-bottom: 20px;

}



/* ===============================

   LISTA

================================ */

.info-text ul {

    list-style: none;

    padding-left: 0;

}



.info-text ul li {

    padding-left: 18px;

    margin-bottom: 12px;

    position: relative;

    color: #e2ded9;

}



.info-text ul li::before {

    content: "◆";

    position: absolute;

    left: 0;

    color: #e2b56f;

    font-size: 12px;

}



/* ===============================

   DIVISOR ENTRE SECTIONS (SÓ LINHA)

================================ */

.section-divider {

    width: 100%;

    height: 1px;

    margin: 30px 0;



    background: linear-gradient(

        to right,

        transparent,

        rgba(0, 0, 0, 0.993),

        transparent

    );



    box-shadow: 0 0 8px rgb(0, 0, 0);

}

/* ===============================

   BOTÕES RPG – INFORMAÇÕES

================================ */

/* ===============================

   FAIXA DE BOTÕES (PONTA A PONTA)

================================ */

.info-buttons {

    width: 100%;

    background: rgba(20, 6, 6, 0.11); /* marrom quase preto */

    padding: 20px 0 20px;

    margin-bottom: 40px;



    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;



    box-shadow:

        inset 0 -1px rgba(255,255,255,0.04),

        inset 0 1px rgba(0,0,0,0.7);

}





/* BOTÃO */

.rpg-btn {

    min-width: 150px;

    padding: 14px 28px;



    text-decoration: none;

    text-align: center;

    font-weight: bold;

    letter-spacing: 1px;



    color: #f7f6f4;

    background: linear-gradient(

        to bottom,

        #1f140e,

        #1a0f09

    );



    border: 1px solid #6e4a2a;

    border-radius: 4px;



    box-shadow:

        inset 0 1px rgba(255,255,255,0.08),

        0 6px 20px rgba(0,0,0,0.6);



    transition: all 0.25s ease;

}



/* HOVER */

.rpg-btn:hover {

    color: #fff3c4;



    background: linear-gradient(

        to bottom,

        #5a3a20,

        #000000

    );



    border-color: #e2b56f;



    box-shadow:

        inset 0 1px rgba(255,255,255,0.15),

        0 0 18px rgba(226,181,111,0.6);



    transform: translateY(-2px);

}



/* CLIQUE */

.rpg-btn:active {

    transform: translateY(0);

    box-shadow:

        inset 0 2px rgba(0, 0, 0, 0.952);

}

/* ===============================

   ANIMAÇÃO GRADATIVA DOS BOTÕES RPG

================================ */



/* Keyframes mais suaves */

@keyframes fadeUpRPG {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* Botões começam invisíveis */

.rpg-btn {

    opacity: 0;

    animation: fadeUpRPG 1.3s cubic-bezier(.22,1,.36,1) forwards;

}



/* Delay progressivo mais lento */

.rpg-btn:nth-child(1) { animation-delay: 0.3s; }

.rpg-btn:nth-child(2) { animation-delay: 0.6s; }

.rpg-btn:nth-child(3) { animation-delay: 0.9s; }

.rpg-btn:nth-child(4) { animation-delay: 1.2s; }

.rpg-btn:nth-child(5) { animation-delay: 1.5s; }



.info-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 40px 20px;

    gap: 20px;

}



/* Texto */

.info-texto {

    max-width: 600px;

}



.info-texto h1 {

    font-size: 32px;

    margin-bottom: 10px;

}



.info-texto p {

    font-size: 16px;

    opacity: 0.9;

}



/* Imagem à direita */

.info-imagem {

    flex-shrink: 0;

}



.info-imagem img {

    width: 220px; /* ajuste se quiser maior ou menor */

    max-width: 100%;

}