:root {
    --verde: #123524;
    --verde-escuro: #071b11;
    --verde-claro: #214d35;

    --dourado: #c7a34a;
    --dourado-claro: #e0c46d;

    --creme: #f6f1e6;
    --branco: #ffffff;

    --texto: #27342c;
    --cinza: #68736c;

    --borda: #e5dfd1;
}


/* =====================================================
   RESET
===================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: #fbf9f3;

    color: var(--texto);

    line-height: 1.7;
}

a {
    text-decoration: none;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {
    background: rgba(7, 27, 17, .97) !important;

    padding: 14px 0;

    box-shadow:
        0 4px 20px rgba(0, 0, 0, .08);
}

.navbar-brand {
    color: #fff !important;

    line-height: 1.05;
}

.navbar-brand strong {
    display: block;

    font-size: 1.05rem;

    letter-spacing: .5px;
}

.navbar-brand span {
    display: block;

    color: #d9c477;

    font-family: 'century';

    font-size: .58rem;

    letter-spacing: 3px;

    margin-top: 4px;
}

.navbar .nav-link {
    color: #fff !important;

    text-transform: uppercase;

    font-size: .76rem;

    letter-spacing: .6px;

    margin: 0 7px;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--dourado-claro) !important;
}


/* =====================================================
   BOTÃO
===================================================== */

.btn-dourado {
    background: var(--dourado);

    color: #102417;

    border: none;

    border-radius: 3px;

    padding: 11px 22px;

    font-weight: 700;

    transition: .25s;
}

.btn-dourado:hover {
    background: var(--dourado-claro);

    color: #102417;

    transform: translateY(-2px);
}


/* =====================================================
   HERO
===================================================== */

.escritorio-hero {
    min-height: 680px;

    display: flex;

    align-items: center;

    padding-top: 100px;

    color: #fff;

    background:
        linear-gradient(
            90deg,
            rgba(5, 24, 14, .94),
            rgba(5, 24, 14, .55)
        ),
        url("https://images.unsplash.com/photo-1500382017468-9049fed747ef?auto=format&fit=crop&w=2200&q=85")
        center / cover;
}

.hero-content {
    max-width: 760px;
}

.tag {
    color: #a48335;

    text-transform: uppercase;

    letter-spacing: 2px;

    font-size: .72rem;

    font-weight: 700;
}

.escritorio-hero .tag {
    color: var(--dourado-claro);
}

.escritorio-hero h1 {
    font-size: clamp(3rem, 6vw, 5.3rem);

    line-height: 1.03;

    margin: 15px 0 25px;
}

.escritorio-hero p {
    max-width: 650px;

    font-size: 1.08rem;

    color: #e8eee9;
}


/* =====================================================
   APRESENTAÇÃO
===================================================== */

.apresentacao {
    padding: 110px 0;

    background: var(--creme);
}

.apresentacao h2 {
    color: var(--verde);

    font-size: clamp(2.2rem, 4vw, 3.4rem);

    line-height: 1.12;

    margin-top: 12px;
}

.apresentacao p {
    max-width: 600px;

    color: var(--cinza);

    font-size: .98rem;
}

.linha-dourada {
    width: 55px;

    height: 3px;

    background: var(--dourado);

    margin: 20px 0 28px;
}

.imagem-escritorio {
    min-height: 480px;

    background:
        linear-gradient(
            rgba(10, 35, 21, .12),
            rgba(10, 35, 21, .12)
        ),
        url("https://images.unsplash.com/photo-1464226184884-fa280b87c399?auto=format&fit=crop&w=1200&q=85")
        center / cover;

    box-shadow:
        20px 20px 0 var(--dourado);
}


/* =====================================================
   ATUAÇÃO
===================================================== */

.atuacao {
    padding: 110px 0;

    background: #fbf9f3;
}

.cabecalho {
    max-width: 850px;

    margin-bottom: 55px;
}

.cabecalho h2 {
    color: var(--verde);

    font-size: clamp(2.1rem, 4vw, 3.2rem);

    line-height: 1.15;

    margin-top: 12px;
}


/* =====================================================
   CARDS DE ATUAÇÃO
===================================================== */

.atuacao-card {
    position: relative;

    height: 100%;

    min-height: 220px;

    padding: 35px;

    background: #fff;

    border: 1px solid var(--borda);

    border-radius: 5px;

    overflow: hidden;

    transition: .3s;
}

.atuacao-card:hover {
    transform: translateY(-7px);

    border-color: var(--dourado);

    box-shadow:
        0 18px 40px rgba(20, 50, 32, .10);
}

.atuacao-card .numero {
    position: absolute;

    top: 18px;

    right: 23px;

    color: #e1dccf;

    font-family: 'century';

    font-size: 2rem;

    font-weight: bold;
}

.atuacao-card > i {
    display: flex;

    width: 53px;

    height: 53px;

    align-items: center;

    justify-content: center;

    margin-bottom: 22px;

    border-radius: 50%;

    background: #f4eee0;

    color: var(--dourado);

    font-size: 1.35rem;
}

.atuacao-card h3 {
    color: var(--verde);

    font-size: 1.35rem;

    line-height: 1.25;

    margin-bottom: 8px;
}

.atuacao-card p {
    color: var(--cinza);

    font-size: .9rem;

    margin: 0;
}


/* DESTAQUES */

.atuacao-card.destaque {
    background: var(--verde);

    border-color: var(--verde);
}

.atuacao-card.destaque h3 {
    color: #fff;
}

.atuacao-card.destaque .numero {
    color: rgba(255,255,255,.12);
}

.atuacao-card.destaque > i {
    background: rgba(255,255,255,.08);

    color: var(--dourado-claro);
}


/* =====================================================
   FILOSOFIA
===================================================== */

.filosofia {
    padding: 110px 0;

    background: var(--creme);
}

.imagem-filosofia {
    min-height: 520px;

    background:
        linear-gradient(
            rgba(9, 35, 21, .18),
            rgba(9, 35, 21, .18)
        ),
        url("https://images.unsplash.com/photo-1500076656116-558758c991c1?auto=format&fit=crop&w=1200&q=85")
        center / cover;
}

.filosofia h2 {
    color: var(--verde);

    font-size: clamp(2.3rem, 4vw, 3.6rem);

    line-height: 1.1;

    margin-top: 12px;
}

.frase {
    max-width: 700px;

    color: var(--texto);

    font-family: 'century';

    font-size: 1.3rem;

    line-height: 1.65;
}

.produzir {
    color: var(--dourado);

    font-family: 'century';

    font-size: 2.2rem;

    font-weight: bold;

    letter-spacing: 4px;
}


/* =====================================================
   DIFERENCIAIS
===================================================== */

.diferenciais {
    padding: 105px 0;

    background: #fbf9f3;
}

.cabecalho-diferenciais {
    max-width: 850px;

    margin: 0 auto 55px;
}

.cabecalho-diferenciais h2 {
    color: var(--verde);

    font-size: clamp(2.1rem, 4vw, 3.2rem);

    line-height: 1.15;

    margin-top: 12px;
}

.diferencial {
    height: 100%;

    padding: 40px 30px;

    text-align: center;

    background: #fff;

    border: 1px solid var(--borda);

    transition: .3s;
}

.diferencial:hover {
    transform: translateY(-5px);

    box-shadow:
        0 15px 35px rgba(20,50,32,.08);
}

.diferencial > i {
    display: inline-flex;

    width: 65px;

    height: 65px;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: var(--verde);

    color: var(--dourado-claro);

    font-size: 1.5rem;

    margin-bottom: 20px;
}

.diferencial h3 {
    color: var(--verde);

    font-size: 1.4rem;
}

.diferencial p {
    color: var(--cinza);

    font-size: .9rem;
}


/* =====================================================
   CTA
===================================================== */

.cta {
    padding: 105px 20px;

    color: #fff;

    text-align: center;

    background:
        linear-gradient(
            rgba(7,27,17,.94),
            rgba(7,27,17,.94)
        ),
        url("https://images.unsplash.com/photo-1495107334309-fcf20504a5ab?auto=format&fit=crop&w=2000&q=85")
        center / cover;
}

.cta .tag {
    color: var(--dourado-claro);
}

.cta h2 {
    max-width: 850px;

    margin: 15px auto 20px;

    font-size: clamp(2.2rem, 4vw, 3.6rem);

    line-height: 1.12;
}

.cta p {
    color: #d8e0da;

    max-width: 650px;

    margin: 0 auto 25px;
}


/* =====================================================
   FOOTER
===================================================== */

.footer {
    background: var(--verde-escuro);

    color: #cbd5ce;

    padding: 55px 0 25px;
}

.footer h5 {
    color: #fff;

    font-family: 'century';

    font-size: .78rem;

    text-transform: uppercase;

    letter-spacing: 1px;

    margin-bottom: 18px;
}

.footer a {
    display: block;

    color: #cbd5ce;

    font-size: .86rem;

    margin-bottom: 7px;
}

.footer a:hover {
    color: var(--dourado-claro);
}

.footer p {
    font-size: .86rem;
}

.footer p i {
    color: var(--dourado);

    margin-right: 8px;
}

.footer hr {
    border-color: rgba(255,255,255,.12);

    margin: 35px 0 20px;
}


/* =====================================================
   RESPONSIVO
===================================================== */

@media (max-width: 991px) {

    .escritorio-hero {
        min-height: 580px;
    }

    .navbar .nav-link {
        margin: 5px 0;
    }

    .imagem-escritorio {
        margin-top: 20px;
    }

}


@media (max-width: 767px) {

    .escritorio-hero {
        min-height: 600px;

        padding-top: 130px;
    }

    .apresentacao,
    .atuacao,
    .filosofia,
    .diferenciais {
        padding: 75px 0;
    }

    .imagem-escritorio {
        min-height: 350px;

        box-shadow:
            10px 10px 0 var(--dourado);
    }

    .imagem-filosofia {
        min-height: 380px;
    }

}


@media (max-width: 575px) {

    .escritorio-hero h1 {
        font-size: 3rem;
    }

    .escritorio-hero p {
        font-size: .95rem;
    }

    .apresentacao h2,
    .cabecalho h2,
    .cabecalho-diferenciais h2 {
        font-size: 2.2rem;
    }

    .filosofia h2 {
        font-size: 2.3rem;
    }

    .produzir {
        font-size: 1.7rem;
    }

}