/* =========================================================
   MADERÓH
   RESPONSIVE
========================================================= */


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

@media (max-width: 900px) {

    /* =====================================================
       CATÁLOGOS
    ====================================================== */

    .category-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .products-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    /* =====================================================
       CONFIGURADOR
    ====================================================== */

    .configurator-section {
        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .configurator-info {
        position:
            static;
    }

}



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

@media (max-width: 768px) {


    /* =====================================================
       HEADER
    ====================================================== */

    .site-header {
        position:
            relative;

        z-index:
            1100;
    }


    .nav-container {
        position:
            relative;

        min-height:
            64px;
    }


    /* =====================================================
       BOTÓN HAMBURGUESA
    ====================================================== */

    .menu-toggle {
        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        width:
            44px;

        height:
            44px;

        padding:
            0;

        margin:
            0;

        color:
            #f4f1ea;

        background:
            transparent;

        border:
            0;

        font-size:
            1.7rem;

        line-height:
            1;

        cursor:
            pointer;

        transition:
            color 0.2s ease,
            opacity 0.2s ease;
    }


    .menu-toggle:hover {
        color:
            var(
                --business-accent,
                #caa96b
            );
    }


    .menu-toggle:focus-visible {
        outline:
            1px solid
            var(
                --business-accent,
                #caa96b
            );

        outline-offset:
            3px;
    }



    /* =====================================================
       MENÚ MÓVIL
    ====================================================== */

    .main-nav {
        position:
            absolute;

        top:
            100%;

        left:
            0;

        right:
            0;

        z-index:
            1050;

        width:
            100%;

        max-height:
            calc(100vh - 64px);

        padding:
            10px
            20px
            26px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            0;

        overflow-y:
            auto;

        background:
            #111111;

        border-top:
            1px solid
            rgba(
                255,
                255,
                255,
                0.08
            );

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.12
            );

        box-shadow:
            0
            24px
            45px
            rgba(
                0,
                0,
                0,
                0.42
            );
    }


    /* =====================================================
       MENÚ ABIERTO
    ====================================================== */

    .main-nav.active {
        display:
            flex;
    }



    /* =====================================================
       LINKS DEL MENÚ
    ====================================================== */

    .main-nav a {
        position:
            relative;

        width:
            100%;

        display:
            flex;

        align-items:
            center;

        min-height:
            58px;

        padding:
            17px
            4px;

        margin:
            0;

        color:
            #f4f1ea;

        font-size:
            1rem;

        font-weight:
            500;

        line-height:
            1.3;

        text-decoration:
            none;

        opacity:
            1;

        border-bottom:
            1px solid
            rgba(
                255,
                255,
                255,
                0.09
            );

        transition:
            color 0.2s ease,
            padding-left 0.2s ease,
            background 0.2s ease;
    }


    .main-nav a:hover {
        color:
            var(
                --business-accent,
                #caa96b
            );

        padding-left:
            10px;
    }



    /* =====================================================
       LINK ACTIVO
    ====================================================== */

    .main-nav a.active {
        color:
            var(
                --business-accent,
                #caa96b
            );
    }


    .main-nav a.active::before {
        content:
            "";

        position:
            absolute;

        left:
            -20px;

        top:
            0;

        bottom:
            0;

        width:
            3px;

        background:
            var(
                --business-accent,
                #caa96b
            );
    }



    /* =====================================================
       BOTÓN COTIZAR DEL MENÚ
    ====================================================== */

    .main-nav .btn-cotizar {
        width:
            100%;

        min-height:
            54px;

        margin-top:
            18px;

        padding:
            15px
            20px;

        justify-content:
            center;

        color:
            #111111;

        background:
            var(
                --business-accent,
                #caa96b
            );

        border:
            1px solid
            var(
                --business-accent,
                #caa96b
            );

        border-radius:
            4px;

        font-weight:
            700;

        text-align:
            center;
    }


    .main-nav .btn-cotizar:hover {
        padding-left:
            20px;

        color:
            #111111;

        background:
            #d7b97d;
    }


    .main-nav .btn-cotizar::before {
        display:
            none;
    }



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

    .hero {
        min-height:
            75vh;
    }


    .hero-content {
        padding:
            60px
            0;
    }



    /* =====================================================
       SECCIONES
    ====================================================== */

    .section,
    .page-header,
    .products-section,
    .configurator-section {
        padding:
            60px
            0;
    }



    /* =====================================================
       GRIDS
    ====================================================== */

    .category-grid,
    .products-grid,
    .steps-grid {
        grid-template-columns:
            1fr;
    }


    .dimensions-grid {
        grid-template-columns:
            1fr;
    }



    /* =====================================================
       CONFIGURADOR
    ====================================================== */

    .configurator-form {
        padding:
            22px;
    }



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

    .cta-section {
        padding:
            55px
            5%;

        flex-direction:
            column;

        align-items:
            flex-start;
    }



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

    .site-footer {
        grid-template-columns:
            1fr;
    }


    .copyright {
        text-align:
            left;
    }



    /* =====================================================
       WHATSAPP FLOTANTE
    ====================================================== */

    .whatsapp-floating {
        right:
            15px;

        bottom:
            15px;

        padding:
            11px
            15px;

        font-size:
            0.85rem;
    }

}



/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 480px) {


    /* =====================================================
       MENÚ
    ====================================================== */

    .main-nav {
        padding:
            8px
            16px
            22px;
    }


    .main-nav a {
        min-height:
            56px;

        padding:
            16px
            4px;

        font-size:
            0.98rem;
    }


    .main-nav a.active::before {
        left:
            -16px;
    }


    .main-nav .btn-cotizar {
        margin-top:
            16px;
    }



    /* =====================================================
       CATEGORÍAS
    ====================================================== */

    .category-grid {
        grid-template-columns:
            1fr;
    }



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

    .hero-actions {
        flex-direction:
            column;
    }


    .hero-actions .btn {
        width:
            100%;
    }



    /* =====================================================
       WHATSAPP
    ====================================================== */

    .whatsapp-floating {
        right:
            14px;

        bottom:
            14px;
    }

}