/* @group Example
------------------------------------ */

.hero-main {
    position: relative;
}

.hero-main .deco {
    position: absolute;
    bottom: -4px;
    left: 50%;
    translate: -50% 0;
}

.hero-main :is(.bg, .bp-group) {
    width: 100%;
    height: 100%;
}

.hero-main .deco {
    width: 5.5rem;
}

@media only screen and (min-width : 961px) {
    .hero-main {
        height: calc(100vh - var(--heightNav) - 40px);
    }
}

@media only screen and (min-width : 0) and (max-width : 960px) {
    .hero-main {
        height: 58vh;
    }

    .hero-main ~ .title-center h1 {
        --fs: 3.5rem;
        --lh: 1.2em;
    }
    .hero-main ~ .title-center h1 strong {
        font-weight: 500;
    }
}

/* @end */


/* Animations
------------------------------------ */
:where(#wrapper) .contenedor .elemento {
    opacity: 0;
    --duration: 1s;
}

:where(#wrapper) .contenedor.animateActive .elemento {
    animation: fade var(--duration) forwards;
    animation-delay: var(--delay, 0);
}

:where(#wrapper) .contenedor.animateActive .elemento {
    --delay: 0.3s;
}