:root {
    /* --- PALETA ESTRITA: PRETO, AMARELO, BRANCO, VERMELHO --- */
    --bg: #000000;
    --surface: #111111;
    --surface-2: #222222;
    --text: #ffffff;
    --muted: #a0a0a0;
    --muted-2: #666666;
    --primary: #FFC107;
    --primary-2: #FFD54F;
    --danger: #FF3B30;
    --ok: #32D74B;
    --border: #333333;
    --shadow: 0 10px 40px rgba(0, 0, 0, 1);
    --radius: 8px;
    --focus: 0 0 0 2px var(--primary);
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    --container: 1100px;
    --gap: 16px;
}

* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--text);
    background-color: var(--bg);

    /* --- CONFIGURAÇÃO BASE DO BACKGROUND --- */
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* Efeito Parallax */
    background-size: cover;
    /* Cobre a tela sem distorcer */
}

/* ===========================================================
   REGRA INTELIGENTE DE IMAGEM DE FUNDO (ORIENTAÇÃO)
   ===========================================================
*/

/* CENÁRIO 1: RETRATO (Celular em pé ou Monitor vertical) */
/* A tela é mais alta do que larga */
@media (orientation: portrait) {
    body {
        /* Usa a imagem vertical */
        background-image: url('./img/bg-mobile.jpg');

        /* Foca no topo e centro (para não cortar cabeças/logos) */
        background-position: center top;
    }
}

/* CENÁRIO 2: PAISAGEM (Celular deitado, Tablet ou PC Widescreen) */
/* A tela é mais larga do que alta */
@media (orientation: landscape) {
    body {
        /* Usa a imagem horizontal */
        background-image: url('./img/bg-desktop.jpg');

        /* Centraliza a imagem perfeitamente */
        background-position: center center;
    }
}

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


/* --- MÁSCARA ESCURA (OVERLAY) --- */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: -1;
    pointer-events: none;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--primary);
}

img {
    max-width: 100%;
    display: block;
}

.container {
    width: min(var(--container), calc(100% - 32px));
    margin: 0 auto;
    position: relative;
}

.hidden {
    display: none !important;
}

hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 20px 0;
}

/* Scrollbar escura */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}