/* =========================
   CONFIGURAÇÕES GERAIS
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --azul: #172B4C;
    --azul-escuro: #0c1c35;
    --laranja: #D48F1A;
    --cinza: #DCDBDB;
    --branco: #FFFFFF;
}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: Georgia, "Times New Roman", serif;
    background: var(--azul);
    color: var(--branco);
}


/* =========================
   PÁGINA
========================= */

.pagina {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:

        radial-gradient(
            circle at center,
            #19345c 0%,
            #172b4c 55%,
            #0b1c35 100%
        );

}


/* =========================
   ALVO DECORATIVO
========================= */

.alvo-fundo {

    position: absolute;

    right: -70px;
    top: -40px;

    font-size: 330px;

    color: rgba(255,255,255,0.055);

    transform: rotate(-10deg);

    pointer-events: none;

}


/* =========================
   SLOGAN SUPERIOR
========================= */

.slogan-topo {

    position: absolute;

    top: 30px;
    left: 40px;

    display: flex;

    gap: 15px;

    z-index: 2;

}

.barra-slogan {

    width: 3px;

    background: var(--laranja);

}

.slogan-topo p {

    font-size: 17px;

    line-height: 1.45;

    color: var(--branco);

}

.slogan-topo strong {

    color: var(--laranja);

    font-weight: normal;

}

.aspas {

    display: block;

    color: var(--laranja);

    font-size: 40px;

    line-height: 20px;

    margin-bottom: 8px;

}


/* =========================
   CONTEÚDO CENTRAL
========================= */

.conteudo {

    flex: 1;

    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    padding:

        40px
        25px
        25px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    z-index: 1;

}


/* =========================
   LOGO
========================= */

.logo {

    width: 390px;

    max-width: 80%;

    height: auto;

    display: block;

    margin-bottom: 25px;

}


/* =========================
   TEXTOS
========================= */

h1 {

    font-size: clamp(
        22px,
        2.2vw,
        34px
    );

    font-weight: normal;

    line-height: 1.3;

    margin-bottom: 5px;

}

h2 {

    color: var(--laranja);

    font-size: clamp(
        23px,
        2.5vw,
        38px
    );

    font-weight: normal;

    margin-bottom: 10px;

}


/* =========================
   SEPARADOR
========================= */

.separador {

    width: 430px;

    max-width: 75%;

    display: flex;

    align-items: center;

    gap: 9px;

    margin: 5px 0 20px;

}

.separador span {

    height: 1px;

    background: var(--laranja);

    flex: 1;

}

.quadrado {

    width: 10px;
    height: 10px;

    background: var(--laranja);

}


/* =========================
   DESCRIÇÃO
========================= */

.descricao {

    max-width: 540px;

    font-size: 16px;

    line-height: 1.5;

    color: var(--cinza);

}


/* =========================
   BOTÃO EM BREVE
========================= */

.em-breve {

    margin-top: 25px;

    padding: 12px 30px;

    min-width: 340px;

    border:

        2px solid
        var(--laranja);

    border-radius: 12px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    font-size: 25px;

    color: var(--laranja);

}

.em-breve i {

    font-size: 26px;

}


/* =========================
   RODAPÉ
========================= */

.rodape {

    width: 100%;

    padding:

        0
        35px
        30px;

    z-index: 2;

}


/* =========================
   LINHA CONTATO
========================= */

.titulo-contato {

    width: 100%;

    display: flex;

    align-items: center;

    gap: 20px;

    margin-bottom: 25px;

}

.titulo-contato span {

    flex: 1;

    height: 1px;

    background: var(--laranja);

}

.titulo-contato p {

    font-size: 13px;

    color: var(--cinza);

    text-align: center;

}


/* =========================
   CONTATOS
========================= */

.contatos {

    max-width: 1250px;

    margin: auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 30px;

}


/* =========================
   CONTATO INDIVIDUAL
========================= */

.contato {

    display: flex;

    align-items: center;

    gap: 15px;

    text-decoration: none;

    color: var(--branco);

    padding-right: 20px;

    border-right:

        1px solid
        rgba(212,143,26,.6);

}

.contato:last-child {

    border-right: none;

}


/* =========================
   ÍCONE
========================= */

.icone {

    min-width: 55px;

    width: 55px;
    height: 55px;

    border:

        2px solid
        var(--laranja);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    color: var(--laranja);

    font-size: 25px;

}

.contato div:last-child {

    display: flex;

    flex-direction: column;

    gap: 5px;

}

.contato span {

    font-size: 14px;

    line-height: 1.3;

}

.contato strong {

    color: var(--laranja);

    font-weight: normal;

    font-size: 15px;

}


/* =========================
   EFEITO NOS LINKS
========================= */

a.contato {

    transition: .25s;

}

a.contato:hover {

    transform: translateY(-3px);

}

a.contato:hover .icone {

    background: var(--laranja);

    color: var(--azul);

}


/* =========================
   TABLET
========================= */

@media (max-width: 900px) {

    .contatos {

        grid-template-columns:
            repeat(2, 1fr);

    }

    .contato:nth-child(2) {

        border-right: none;

    }

    .alvo-fundo {

        font-size: 240px;

    }

}


/* =========================
   CELULAR
========================= */

@media (max-width: 600px) {

    .slogan-topo {

        position: relative;

        top: auto;
        left: auto;

        margin:

            25px
            20px
            0;

    }

    .conteudo {

        padding-top: 30px;

    }

    .logo {

        width: 330px;

        max-width: 95%;

    }

    .em-breve {

        min-width: auto;

        width: 100%;

        font-size: 21px;

    }

    .rodape {

        padding:

            0
            20px
            25px;

    }

    .titulo-contato span {

        display: none;

    }

    .titulo-contato {

        justify-content: center;

    }

    .contatos {

        grid-template-columns: 1fr;

    }

    .contato {

        border-right: none;

        border-bottom:

            1px solid
            rgba(212,143,26,.35);

        padding-bottom: 15px;

    }

    .contato:last-child {

        border-bottom: none;

    }

    .alvo-fundo {

        right: -100px;

        font-size: 220px;

    }

}