/* VARIAVEIS */
:root {
    /* cores */
    --gradiente-vermelho: linear-gradient(to right, #c62828, #b20e19);
    --vermelho-effex: #c62828;
    --vermelho-bg: #911616;
    --vermelho-bg2: #b20e19;
    --dourado-effex: #c0b18e;
    --dourado-hover: #a09376;
    --amarelo-queimado: #DFD8C6;
    --preto: #222;
    --shadow1: rgba(0, 0, 0, 0.1);
    --shadow2: rgba(0, 0, 0, 0.2);
    --shadow3: rgba(0, 0, 0, 0.3);
    --shadow5: rgba(0, 0, 0, 0.5);
    --shadow6: rgba(0, 0, 0, 0.6);
    --cinza-escuro: #333;
    --cinza: #646464;
    --cinza2: #999999;
    --cinza-claro: #a0a0a0;
    --cinza-claro2: #ccc;
    --cinza-claro3: #bfbfbf;
    --branco: #fff;
    --branco-bg: #ddd;
    --branco-bg2: #F2F2F2;

    /* altura do cabeçalho */
    --header-height: 80px;
    --radius-sm: 0.45rem;
    --radius-md: 0.65rem;
    --radius-lg: 0.8rem;
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--preto);
    background-color: #fff;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
}

#simular {
  scroll-margin-top: var(--header-height); 
}

/* BOTOES */
.btn-outline-effexlog-red {
    color: var(--vermelho-effex);
    border-color: var(--vermelho-effex);
}

.btn {
    min-height: 44px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: normal;
}

.btn-outline-effexlog-red:hover {
    background-color: var(--vermelho-effex);
    border-color: var(--vermelho-effex);
    color: #fff;
}

.btn-effexlog-red {
    color: #fff !important;
    background-color: var(--vermelho-effex) !important;
    border-color: var(--vermelho-effex) !important;
}

.btn-effexlog-red:hover {
    color: #fff !important;
    background-color: var(--vermelho-bg2) !important;
    border-color: var(--vermelho-bg2) !important;
}

.btn-effexlog-bg-red {
    color: #fff !important;
    border-color: #fff !important;
}

.btn-effexlog-bg-red:hover {
    color: var(--vermelho-effex) !important;
    border-color: #fff !important;
    background-color: #fff !important;
}

.btn-effexlog-amarelo {
    color: #fff !important;
    background-color: var(--dourado-effex) !important;
    border-color: var(--dourado-effex) !important;
}

.btn-effexlog-amarelo:hover {
    color: #fff !important;
    background-color: var(--dourado-hover) !important;
    border-color: var(--dourado-hover) !important;
}

/* BACKGROUNDS */
.bg-effexlog-red {
    color: #fff !important;
    background-color: var(--vermelho-effex) !important;
}

.bg-effexlog-cinza {
    background-color: var(--branco-bg2) !important;
}

.bg-effexlog-cinza-escuro {
    background-color: var(--cinza2) !important;
}

.bg-effexlog-amarelo {
    background-color: var(--amarelo-queimado) !important;
}

.form-control,
.form-select {
    min-height: 44px;
    border-radius: var(--radius-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--vermelho-effex);
    box-shadow: 0 0 0 0.2rem rgba(198, 40, 40, 0.16);
}

/* TEXTO */
.text-effexlog-red {
    color: var(--vermelho-effex) !important;
}

.text-preto {
    color: var(--preto) !important;
}

.text-cinza-escuro {
    color: var(--cinza-escuro) !important;
}

.text-dourado {
    color: var(--dourado-effex) !important;
}

.text-justify {
    text-align: justify;
}

/* tracinho */
.espaco-tracinho {
    width: 100%;
    display: flex;
    justify-content: start;
    margin-top: 1rem;
}

.tracinho {
    height: 0.4rem;
    width: 120px;
    background-color: var(--vermelho-effex);
}

.imagem-fill {
    object-fit: cover !important;
    object-position: center !important;
}

/* ===== MELHORIAS DE FOCO ACESSÍVEL (sem escurecer botões) ===== */

/* foco global para links e botões */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--dourado-effex) !important; 
  outline-offset: 3px !important;
  box-shadow: 0 0 0 0.25rem rgba(192, 177, 142, 0.4) !important;
  border-radius: 4px !important;
  transition: outline-offset 0.1s ease-in-out, box-shadow 0.1s ease-in-out !important;
}

/* para botões principais, reforça o contorno */
.btn-effexlog-red:focus-visible {
  outline: 3px solid var(--dourado-effex) !important;
  box-shadow: 0 0 0 0.3rem rgba(192, 177, 142, 0.5) !important;
}

/* para botões de borda vermelha (como o "Entrar") */
.btn-outline-effexlog-red:focus-visible {
  outline: 2px solid var(--vermelho-effex) !important;
  box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.3) !important;
  color: var(--vermelho-effex) !important;
}

@media (max-width: 575.98px) {
    :root {
        --header-height: 68px;
    }

    .display-4 {
        font-size: 2.15rem;
        line-height: 1.08;
    }

    .display-5 {
        font-size: 1.65rem;
        line-height: 1.12;
    }

    .lead {
        font-size: 1.02rem;
    }

    .text-justify {
        text-align: left;
    }

    .tracinho {
        width: 84px;
        height: 0.3rem;
    }
}