/* ============================================================
   SITE.CSS — Identidade deste projeto (APOIO)
   Variáveis (cores/tipografia/raios) + variantes de botão da marca.
   Para outro site, mudas sobretudo estas variáveis.
   ============================================================ */

:root {
    /* Paleta */
    --azul:           #3B8ACE;   /* 59,138,206 */
    --vermelho:       #DE554F;   /* 222,85,79  */
    --azul-botao:     #5D9FCD;   /* 93,159,205 */
    --azul-claro-fundo: #D7E7F3; /* fundo secção números */
    --branco:         #ffffff;
    --texto-escuro:   #333333;

    /* Texto */
    --titulo:   #2b3a45;
    --esbatido: #6a7885;

    /* Layout */
    --barra-topo-altura: 64px;
    --raio: 16px;
}

html {
    scroll-behavior: smooth;
    font-size: 18px;            /* tamanho base do site */
}

body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--texto-escuro);
    overflow-x: hidden;
}

/* O Bootstrap sublinha os links por defeito — tiramos isso.
   (O sublinhado que quisermos definimos por componente, ex.: no :hover.) */
a { text-decoration: none; }

/* --- Variantes de botão da marca (usam o .btn do Bootstrap) ---
   Uso no HTML:  class="btn btn-vermelho rounded-pill px-4 py-3"      */
.btn-vermelho {
    --bs-btn-color: #fff;             --bs-btn-bg: var(--vermelho);   --bs-btn-border-color: var(--vermelho);
    --bs-btn-hover-color: #fff;       --bs-btn-hover-bg: #c8463f;     --bs-btn-hover-border-color: #c8463f;
    --bs-btn-active-color: #fff;      --bs-btn-active-bg: #c8463f;    --bs-btn-active-border-color: #c8463f;
}
.btn-azul {
    --bs-btn-color: #fff;             --bs-btn-bg: var(--azul-botao); --bs-btn-border-color: var(--azul-botao);
    --bs-btn-hover-color: #fff;       --bs-btn-hover-bg: #4b8cb9;     --bs-btn-hover-border-color: #4b8cb9;
    --bs-btn-active-color: #fff;      --bs-btn-active-bg: #4b8cb9;    --bs-btn-active-border-color: #4b8cb9;
}
.btn-azul-claro {
    --bs-btn-color: #2b3a45;          --bs-btn-bg: #d6ecfa;          --bs-btn-border-color: #d6ecfa;
    --bs-btn-hover-color: #2b3a45;    --bs-btn-hover-bg: #c3e2f6;    --bs-btn-hover-border-color: #c3e2f6;
    --bs-btn-active-color: #2b3a45;   --bs-btn-active-bg: #c3e2f6;   --bs-btn-active-border-color: #c3e2f6;
}


/* --- Ajustes mobile: texto base mais pequeno + mais margem lateral --- */
@media (max-width: 767px) {
    html { font-size: 16px; }
    .container { padding-left: 20px; padding-right: 20px; }
}