@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    /*Variaveis das cores*/
    --marrom-text: #8B4513;
    --marrom-background_footer: #5C4033;
    --marrom-background_nav: #8B4513;
    --marrom-border_footer: #81543F;
    --laranja-botao: #DAA520;
    --laranja-botao_hover: #daa520d3;
    --amarelo-text: #FFF503;
    --verde-negrito: #475a25;
    --preto-text_padrao: #333333;
    --branco: #ffffff;
    --branco_opacidade: rgba(255, 255, 255, 0.7);
    --botao-nav: #D2691E;
    --botao-nav_hover: #556B2F;
    --background-padrao: #f0f0f0;
    --laranja-text: #E59600;
    --vermelho-banner: #A70B08;

    /*Variaveis das fontes*/
    --cinzel: "Cinzel Decorative", serif;
    --oswald: "Oswald", sans-serif;
    --open-sans: "Open Sans", sans-serif;
    --rubik: "Rubik", sans-serif;
}

body {
    background: var(--background-padrao);
}

.aviso-header {
    text-align: center;
    padding: 1em;
    font-size: .9em;
    font-family: var(--open-sans);
    letter-spacing: .9px;
    line-height: 1.2em;
    font-weight: 600;
    background: var(--vermelho-banner);
    color: var(--branco);
}
.aviso-header p {
    width: fit-content;
    margin: 0 auto;
}

nav {
    background: var(--marrom-background_nav);
    color: var(--branco);
    font-family: var(--oswald);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    padding: 1em 2.5em;
    border-bottom: 2px solid var(--laranja-botao);
}

nav h2 {
    font-size: 0.9em;
    font-weight: 700;
    letter-spacing: .5px;
}

.botao_padrao {
    text-decoration: none;
    color: var(--branco);
    background-color: var(--laranja-botao);
    font-weight: 700;
    padding: 16px 34px;
    border-radius: 5px;
    display: block;
    width: fit-content;
}

.botao_padrao:hover {
    background: var(--laranja-botao_hover);
}

.botao_padrao:active {
    scale: 0.95;
}

.nav_telefone {
    color: var(--laranja-text);
    text-decoration: none;
}

.logo_nav {
    width: 10vw;
    margin: auto;
}

.nav_links {
    margin-left: auto;
}

.links_redes_midias {
    display: flex;
    gap: 12px;
}

.links_redes_midias a {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--botao-nav);
    padding: 12px;
    border-radius: 50%;
}

.links_redes_midias a img {
    width: 20px;
    height: 20px;
}

.links_redes_midias a:hover {
    background: var(--botao-nav_hover);
}
/*Fim NavBar*/

.aviso-entrega {
    display: flex;
    flex-direction: column;
    width: fit-content;
    align-items: center;
    margin: 5vh auto 5.5vh;
    font-family: var(--oswald);
    font-weight: 700;
    color: var(--branco);
    letter-spacing: 0.5px;
}

.aviso-entrega a {
    text-decoration: none;
}

.aviso-entrega .aviso-entrega_content {
    display: flex;
    font-size: 1.1em;
    color: white;
    align-items: center;
    gap: 8px;
    background-color: var(--marrom-background_nav);
    border: 2px solid var(--laranja-text);
    border-radius: 5px 5px 0 0;
    padding: 10px 18px;
}

.aviso-entrega_text h2 {
    display: inline-block;
    width: fit-content;
    text-decoration: none;
}

.aviso-entrega_text h2:nth-child(1)::after {
    content: "|";
    margin-left: 5px;
}  

.aviso-entrega .aviso-entrega_content img {
    width: 2em;
}

.aviso-entrega img {
    width: 100%;
}

/*Banner*/

.banner-section {
    height: 65vh;
    width: 90vw;
    margin: auto;
    background: url(../img/background-banner.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    border-radius: 10px;
}

.inner-banner_bombomInfo {
    align-self: end;
    padding: 0 0 2em 2.5em;
    font-family: var(--oswald);
}

.inner-banner_bombomInfo h3 {
    font-weight: 700;
    font-size: 1.25em;
    color: var(--branco);
    margin-bottom: 8px;
}

.inner-banner_bombomInfo p {
    color: var(--branco_opacidade);
    font-size: .9em;
}

.inner-banner {
    text-align: center;
    align-self: center;
    font-family: var(--open-sans);
}

.inner-banner h1 {
    font-family: var(--oswald);
    font-weight: 700;
    color: var(--branco);
    font-size: 2em;
}

.inner-banner p {
    color: var(--amarelo-text);
    margin: 12px 0 24px;
    font-size: 1.2em;
    font-weight: 600;
}

.inner-banner a {
    margin: 0 auto;
}


/*Section Sobre*/

.secao-sobre {
    font-family: var(--rubik);
    margin-top: 8vh;
}

.secao-sobre h2 {
    color: var(--marrom-text);
    font-weight: 900;
    font-size: 1.7em;
    text-align: center;
    margin-bottom: 8vh;
}

.secao-sobre_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 10vh;
    justify-items: center;
    align-items: center;
    padding: 0 5vw;
}

.secao-sobre_img-txt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.secao-sobre_img-txt span {
    font-weight: 600;
    font-size: 0.90em;
    opacity: .9;
}

.secao-sobre_grid img {
    width: 30vw;
    filter: brightness(0.7);
    border-radius: 6px;
}

#section2Img {
    width: auto;
    height: 35vh;
}

.secao-sobre_info {
    width: 35vw;
    text-align: justify;
    letter-spacing: .2px;
    line-height: 1.2em;
}

.secao-sobre_info h3 {
    font-size: 1.2em;
    font-weight: 900; 
    color: var(--marrom-text);
}

.secao-sobre_info-text p {
    margin: 1em 0;
    line-height: 1.25em;
    font-size: 1em;
}

.bold {
    font-weight: 600;
}

.frase-info_text {
    display: block;
    margin-top: 1em;
    font-weight: 700;
    color: var(--verde-negrito);
}

/*Footer*/
footer {
    background: var(--marrom-background_footer);
    margin-top: 10vh;
    padding: 2em 5em;
    color: var(--branco);
}

.footer_logo {
    display: block;
    border-bottom: 2px solid var(--marrom-border_footer);
    padding-bottom: 1em;
    margin-bottom: 1em;
}

.footer_conteudo,
.flex_footer,
.mago_text_icone {
    display: flex;
    align-items: center;
}

.footer_midias {
    border-right: 2px solid var(--marrom-border_footer);
    margin-right: 1em;
    padding: 12px 1em 16px 0;
}

.footer_midias-mobile {
    display: none;
}

.flex_footer {
    width: 100%;
    font-family: var(--oswald);
    justify-content: space-between;
}

.footer_local {
    letter-spacing: .8px;
}

.local-mobile {
    display: none;
}

.footer_local p:nth-child(1) {
    font-size: 1.2em;
}

.footer_local p:nth-child(2) {
    font-size: .9em;
    margin-top: 4px;
    color: var(--branco_opacidade);
}

.mago_text_icone {
    font-family: var(--cinzel);
    color: var(--branco_opacidade);
}

.mago_text_icone img {
    width: 40px;
    margin: 0 4px;
    position: relative;
    bottom: 6px;
    vertical-align: middle;
}

#emailFooter a {
    text-decoration: none;
    font-size: .9em;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.603);
}

.cnpj_footer {
    text-align: end;
    letter-spacing: 1px;
    font-family: var(--oswald);
    opacity: .85;
    font-size: .8em;
}

.cnpj_footer span {
    font-weight: 600;
}

/*Adaptação mobile*/

@media (max-width: 768px) {

    /*Nav mobile*/
    nav {
        display: flex;
        gap: 2em;
    }

    nav h2 {
        display: none;
    }

    .logo_nav {
        width: 25vw;
        margin: auto;
    }

    .links_redes_midias a img {
        width: 15px;
        height: 15px;
    }

    /*Fim navbar*/

    main {
        padding: 0 1.5vw 0;
        /*mudança no main para adicionar espaçamento entre o banner e a borda do navegador*/
    }

    .aviso-entrega .aviso-entrega_content {
        padding: 8px 12px;
        font-size: 1em;
        line-height: 1.1em;
    }

    .aviso-entrega_text h2 {
        display: block;
        margin: 8px auto;
        text-align: center;
        text-decoration: none;
    }
    
    .aviso-entrega_text h2:nth-child(1)::after {
        content: none;
    }

    .aviso-entrega .aviso-entrega_content img {
        width: 2.5em;
    }
    
    /*Banner mobile*/
    .banner-section {
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    .inner-banner {
        height: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .inner-banner h1 {
        font-size: 1.5em;
    }

    .inner-banner p {
        font-size: 1.1em;
        padding: 0 8px;
    }

    .inner-banner_bombomInfo {
        align-self: self-start;
        padding: 0 0 0 1em;
    }

    .inner-banner_bombomInfo h3 {
        font-size: .9em;
    }

    .inner-banner_bombomInfo p {
        font-size: .8em;
    }

    /*Section sobre mobile*/
    .secao-sobre_grid {
        display: flex;
        flex-direction: column;
    }

    .secao-sobre_grid img {
        width: 80vw;
    }

    #section2Img {
        width: 80vw;
        height: auto;
    }

    .secao-sobre_info {
        width: 80vw;
    }

    /*Adicionando order dos itens Section sobre*/
    .secao-sobre_grid .secao-sobre_info:nth-child(2) {
        order: 1;
    }

    .secao-sobre_grid .secao-sobre_img-txt:nth-child(1) {
        order: 2;
    }

    .secao-sobre_grid .secao-sobre_info:nth-child(3) {
        order: 3;
    }

    .secao-sobre_grid .secao-sobre_img-txt:nth-child(4) {
        order: 4;
    }

    /*Footer mobile*/
    footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2em 1em;
    }

    footer,
    .footer_conteudo {
        flex-direction: column;
    }

    .footer_logo {
        padding: 12px 0 16px;
        text-align: center;
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .footer_logo img {
        width: 30%;
        padding-right: 12px;
        border-right: 2px solid var(--marrom-border_footer);
    }

    
    .flex_footer {
        display: grid;
        gap: 18px;
        justify-content: center;
        grid-template-areas: 
            "midias midias"
            "magoText magoText";
    }
    
    .footer_midias {
        display: none;
    }

    .footer_midias-mobile {
        grid-area: midias;
        display: flex;
        gap: 8px;
        padding-right: 8px;
        justify-content: center;
        
    }

    .footer_local {
        display: none;
        font-size: .7em;
    }
    
    .local-mobile {
        display: block;
        text-align: start;
        font-family: var(--oswald);
    }

    .footer_local p:nth-child(1) {
        font-size: 1em;
    }
    
    .footer_local p:nth-child(2) {
        font-size: .9em;
        margin: 4px 0;
    }
    
    .mago_text_icone {
        grid-area: magoText;
        font-size: .8em;
        justify-self: center;
    }

    .mago_text_icone img {
        width: 25px;
    }

    .cnpj_footer {
        margin-top: 1.3em;
        font-size: .7em;
    }
}