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

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    body {
        min-height: 100vh;

        font-family: Georgia, "Times New Roman", serif;

        color: white;

        background:
            linear-gradient(
                rgba(0, 0, 0, 0.78),
                rgba(0, 0, 0, 0.92)
            ),
            url("assets/img/fundo.jpg");

        background-size: cover;
        background-position: center;
        background-attachment: fixed;
    }

    /* =========================
       CONTAINER
    ========================= */

    .container {
        width: 92%;
        max-width: 1150px;
        height: 100vh;

        margin: auto;

        padding: 25px 0 15px;

        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    /* =========================
       CABEÇALHO
    ========================= */

    .cabecalho {
        position: relative;

        padding: 28px 20px;

        text-align: center;

        background:
            linear-gradient(
                135deg,
                rgba(25, 25, 25, 0.98),
                rgba(5, 5, 5, 0.98)
            );

        border: 1px solid #a88932;

        border-radius: 8px;

        box-shadow:
            0 0 0 5px rgba(0, 0, 0, 0.8),
            0 0 0 7px rgba(168, 137, 50, 0.25),
            0 15px 40px rgba(0, 0, 0, 0.9);

        overflow: hidden;

        margin-bottom: 20px;
    }

    .cabecalho::before,
    .cabecalho::after {
        content: "";

        position: absolute;

        left: 8%;
        right: 8%;

        height: 1px;

        background: linear-gradient(
            90deg,
            transparent,
            #a88932,
            transparent
        );
    }

    .cabecalho::before {
        top: 12px;
    }

    .cabecalho::after {
        bottom: 12px;
    }

    /* =========================
       SÍMBOLO
    ========================= */

    .simbolo {
        font-size: 30px;

        color: #b99635;

        margin-bottom: 5px;

        text-shadow:
            0 0 15px rgba(185, 150, 53, 0.5);
    }

    /* =========================
       CATEGORIA
    ========================= */

    .categoria {
        display: inline-block;

        padding: 5px 16px;

        border: 1px solid #8b0000;

        background: rgba(110, 0, 0, 0.25);

        color: #c9a227;

        font-size: 10px;

        font-weight: bold;

        letter-spacing: 3px;

        border-radius: 3px;

        margin-bottom: 10px;
    }

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

    h1 {
        font-size: clamp(42px, 7vw, 78px);

        letter-spacing: 8px;

        color: #d2ae3f;

        line-height: 1;

        text-shadow:
            4px 4px 0 #080808,
            0 0 10px rgba(210, 174, 63, 0.3);

        margin-bottom: 10px;
    }

    .subtitulo {
        color: #888;

        font-size: 15px;

        font-style: italic;

        letter-spacing: 3px;
    }

    /* =========================
       ÁREA PRINCIPAL
    ========================= */

    .principal {
        position: relative;

        background:
            linear-gradient(
                145deg,
                rgba(18, 18, 18, 0.97),
                rgba(3, 3, 3, 0.97)
            );

        border: 1px solid #333;

        border-radius: 8px;

        padding: 35px 25px;

        text-align: center;

        box-shadow:
            0 15px 40px rgba(0, 0, 0, 0.85),
            inset 0 0 40px rgba(0, 0, 0, 0.8);

        overflow: hidden;
    }

    .principal::before {
        content: "";

        position: absolute;

        top: 0;
        left: 0;

        width: 100%;
        height: 3px;

        background:
            linear-gradient(
                90deg,
                transparent,
                #8b0000,
                #c9a227,
                #8b0000,
                transparent
            );
    }

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

    .principal h2 {
        color: #d2ae3f;

        font-size: clamp(22px, 3vw, 32px);

        margin-bottom: 12px;

        text-shadow:
            0 0 12px rgba(210, 174, 63, 0.25);
    }

    /* =========================
       TEXTO
    ========================= */

    .descricao {
        max-width: 650px;

        margin: auto;

        color: #aaa;

        font-size: 16px;

        line-height: 1.6;
    }

    /* =========================
       SEPARADOR
    ========================= */

    .separador {
        width: 150px;

        height: 1px;

        margin: 18px auto;

        background:
            linear-gradient(
                90deg,
                transparent,
                #a88932,
                transparent
            );
    }

    .frase-destaque {
        color: #777;

        font-size: 12px;

        letter-spacing: 2px;

        text-transform: uppercase;

        margin-bottom: 18px;
    }

    /* =========================
       BOTÕES
    ========================= */

    .botoes {
        width: 80%;
        max-width: 480px;

        margin: auto;

        display: flex;

        flex-direction: column;

        gap: 12px;
    }

    .botao {
        position: relative;

        display: block;

        padding: 13px 20px;

        color: #d2ae3f;

        text-decoration: none;

        font-size: 15px;

        font-weight: bold;

        letter-spacing: 2px;

        background:
            linear-gradient(
                90deg,
                rgba(40, 40, 40, 0.8),
                rgba(10, 10, 10, 0.9)
            );

        border: 1px solid #806a2b;

        border-radius: 4px;

        transition: 0.35s;

        overflow: hidden;
    }

    .botao::before {
        content: "";

        position: absolute;

        top: 0;
        left: -100%;

        width: 100%;
        height: 100%;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(255,255,255,0.08),
                transparent
            );

        transition: 0.5s;
    }

    .botao:hover::before {
        left: 100%;
    }

    .botao:hover {
        transform: translateY(-3px);

        color: white;

        border-color: #a88932;

        background:
            linear-gradient(
                90deg,
                #650000,
                #250000
            );

        box-shadow:
            0 8px 20px rgba(0, 0, 0, 0.7),
            0 0 18px rgba(139, 0, 0, 0.35);
    }

    .voltar {
        color: #888;

        border-color: #444;
    }

    .voltar:hover {
        background: #222;

        border-color: #777;

        color: white;
    }

    /* =========================
       RODAPÉ
    ========================= */

    footer {
        text-align: center;

        margin-top: 15px;

        padding: 8px;
    }

    .frase {
        color: #666;

        font-size: 13px;

        font-style: italic;

        margin-bottom: 8px;
    }

    .winchester {
        display: inline-block;

        padding: 6px 18px;

        border: 1px solid #8b0000;

        color: #aaa;

        background: rgba(40, 0, 0, 0.35);

        font-size: 10px;

        font-weight: bold;

        letter-spacing: 3px;

        border-radius: 3px;
    }

    /* =========================
       CELULAR
    ========================= */

    @media (max-width: 600px) {

        .container {
            width: 94%;
            padding: 15px 0;
        }

        .cabecalho {
            padding: 22px 12px;
            margin-bottom: 15px;
        }

        h1 {
            font-size: 38px;
            letter-spacing: 3px;
        }

        .simbolo {
            font-size: 25px;
        }

        .principal {
            padding: 30px 15px;
        }

        .principal h2 {
            font-size: 21px;
        }

        .descricao {
            font-size: 14px;
        }

        .botoes {
            width: 100%;
        }

        .botao {
            padding: 12px;
            font-size: 13px;
        }

        footer {
            margin-top: 10px;
        }
    }