/* =========================================================
   STYLE.CSS
   Identidade visual principal do Brasília Participa
   ========================================================= */

/* -------------------------
   VARIÁVEIS
------------------------- */

:root {
    /* Azul institucional (linha gov.br) */
    --primary: #1351b4;
    --primary-dark: #0b2c6b;
    --secondary: #2670e8;

    /* Amarelo institucional, usado só como detalhe/realce */
    --accent: #ffcd07;

    --success: #168821;
    --warning: #ad7000;
    --danger: #e52207;

    --background: #f8f9fb;
    --surface: #ffffff;
    --surface-2: #eef1f6;

    --text: #1d1d1d;
    --text-light: #5d5d5d;
    --border: #dde3ec;

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow: 0 6px 20px rgba(15, 23, 42, 0.08);

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 8px;

    --transition: 0.2s ease;
}


.hero {
    position: relative;
    background: url("../imagens/bsb.jpg") center/cover no-repeat;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(11, 44, 107, 0.88),
        rgba(11, 44, 107, 0.72)
    );
    z-index: 1;
}

.hero-overlay::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--accent);
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero h1,
.hero p {
    color: white;
}



/* -------------------------
   PROFUNDIDADE NAS LATERAIS
   (preenche o vazio ao lado do
   conteúdo central em telas largas)
------------------------- */

.section-band {
    background: var(--surface);
    box-shadow:
        inset 0 1px 0 var(--border),
        inset 0 -1px 0 var(--border);
}

.section-decor {
    position: relative;
    overflow: hidden;
}

.section-decor::before,
.section-decor::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 460px;
    height: 460px;

    border-radius: 50%;
    transform: translateY(-50%);

    z-index: 0;
    pointer-events: none;
}

.section-decor::before {
    left: -220px;
    background: radial-gradient(circle, rgba(19, 81, 180, 0.10), transparent 70%);
}

.section-decor::after {
    right: -220px;
    background: radial-gradient(circle, rgba(255, 205, 7, 0.16), transparent 70%);
}

.section-decor > .container {
    position: relative;
    z-index: 1;
}

body.dark-mode .section-decor::before {
    background: radial-gradient(circle, rgba(38, 112, 232, 0.20), transparent 70%);
}

body.dark-mode .section-decor::after {
    background: radial-gradient(circle, rgba(255, 205, 7, 0.10), transparent 70%);
}

/* -------------------------
   MODO ESCURO
------------------------- */

body.dark-mode {
    --background: #040914;
    --surface: #111827;
    --surface-2: #172033;

    --text: #f1f5f9;
    --text-light: #94a3b8;
    --border: #263247;

    --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.25);
    --shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

/* -------------------------
   BODY
------------------------- */

body {
    background: var(--background);
    color: var(--text);
    transition:
        background var(--transition),
        color var(--transition);
}

/* -------------------------
   CONTAINER
------------------------- */

.container {
    width: min(1180px, 92%);
    margin: 0 auto;
}

/* -------------------------
   TÍTULOS
------------------------- */

.page-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 8px;
}

.page-subtitle {
    color: var(--text-light);
    margin-bottom: 30px;
}

/* -------------------------
   ANIMAÇÕES
------------------------- */

.fade-in {
    animation: fadeIn 0.7s ease forwards;
}

.slide-up {
    animation: slideUp 0.7s ease forwards;
}

.scale-in {
    animation: scaleIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* -------------------------
   SCROLLBAR
------------------------- */

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 20px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}