/* =====================================================
   ARQUIVO: BASE.CSS
   CSS NUTRIBEM
===================================================== */

/* =====================================================
   VARIÁVEIS DO PROJETO
===================================================== */

:root {

    /* CORES DA MARCA */
    --vermelho-principal: #ec2b32;
    --vermelho-escuro: #b31116;
    --vermelho-hover: #8d0d11;
    --amarelo-principal: #FFD800;

    /* CORES NEUTRAS */
    --branco: #FFFFFF;
    --preto: #202020;
    --cinza-escuro: #444444;
    --cinza: #777777;
    --cinza-claro: #F5F5F5;

    /* CONFIGURAÇÕES */
    --fonte-site: "Segoe UI", Arial, sans-serif;
    --largura-maxima: 1200px;
    --altura-cabecalho: 82px;

}


/* =====================================================
   RESET BÁSICO
===================================================== */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family: var(--fonte-site);
    color: var(--preto);
    background-color: var(--branco);
    line-height: 1.6;

}


a {

    text-decoration: none;
    color: inherit;

}


img {

    max-width: 100%;
    display: block;
    height:auto;
}


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

.container {

    width: 100%;
    max-width: var(--largura-maxima);
    margin: 0 auto;
    padding: 0 30px;

}



:focus-visible {
    outline: 2px solid var(--preto);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--branco);
}

.pular-conteudo {
    position: absolute;
    z-index: 10;
    top: 12px;
    left: 12px;
    padding: 10px 16px;
    background: var(--branco);
    color: var(--vermelho-escuro);
    transform: translateY(calc(-100% - 16px));
}

.pular-conteudo:focus {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}