/*
|--------------------------------------------------------------------------
| Layout geral
|--------------------------------------------------------------------------
*/

.ec-page {
    min-height: 100vh;
}

.ec-section {
    position: relative;
    padding-block: clamp(5rem, 9vw, 9rem);
    overflow: hidden;
}

.ec-section-fluid {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ec-content {
    width: min(
        calc(100% - 2rem),
        var(--ec-content-max)
    );
    margin-inline: auto;
}

/*
|--------------------------------------------------------------------------
| Navbar pública
|--------------------------------------------------------------------------
*/

.ec-navbar {
    position: relative;
    z-index: 100;
    min-height: var(--ec-navbar-height);
    border-bottom: 1px solid rgba(17, 17, 17, .08);
    background: rgba(246, 241, 232, .86);
    backdrop-filter: blur(18px);
}

.ec-navbar-inner {
    display: flex;
    min-height: var(--ec-navbar-height);
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.ec-brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--ec-black);
    font-family: var(--ec-font-body);
    font-weight: 700;
    text-decoration: none;
}

.ec-brand-mark {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    background: var(--ec-orange);
}

.ec-nav {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.ec-nav a:not(.ec-btn) {
    position: relative;
    color: var(--ec-zinc-700);
    font-family: var(--ec-font-body);
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--ec-transition-fast);
}

.ec-nav a:not(.ec-btn):hover {
    color: var(--ec-orange);
}

/*
|--------------------------------------------------------------------------
| Rodapé
|--------------------------------------------------------------------------
*/

.ec-footer {
    padding-block: 3rem;
    border-top: 1px solid rgba(17, 17, 17, .1);
    background: var(--ec-black);
    color: var(--ec-white);
}

@media (max-width: 767.98px) {
    .ec-nav {
        gap: .75rem;
    }

    .ec-nav a:not(.ec-btn) {
        display: none;
    }
}