/*
====================================================
MO. CA HOME - MOBILE RESPONSIVE
Aplica solo en Home (front page), breakpoint mobile
====================================================*/

:root {
    --mobile-header-height: 70px;
}

@media (max-width: 767px) {

    body.moca-home-page {
        height: 100dvh;
        overflow: hidden;
    }

    body.moca-home-page header {
        position: relative;
        height: var(--mobile-header-height);
    }

    body.moca-home-page .home-navigation {
        height: calc(55dvh - var(--mobile-header-height));
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }

    body.moca-home-page .home-index {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    body.moca-home-page .home-content-panel {
        height: 45dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    body.moca-home-page .projects-group {
        padding: 1.5rem 1rem;
    }
}