:root {

            --jachin-dorado: #C28436;
            --jachin-dorado-claro: #EBB567;
            --jachin-dorado-oscuro: #96560D;
            --jachin-oscuro: #0E0704;
            --jachin-crema: #F6F2E4;
            --jachin-gris: #5B5753;
            --jachin-blanco: #FFFFFF;

        }


        body {

            background: var(--jachin-crema);

            color: var(--jachin-oscuro);

        }


        /*
        |--------------------------------------------------------------------------
        | NAVBAR
        |--------------------------------------------------------------------------
        */

        .navbar-jachin {

            background:
                rgba(14, 7, 4, .97);

            backdrop-filter:
                blur(8px);

        }


        .navbar-brand-jachin {

            color:
                var(--jachin-dorado) !important;

            font-weight:
                800;

            letter-spacing:
                3px;

        }


        .navbar-jachin .nav-link {

            color:
                rgba(255,255,255,.82);

            transition:
                .2s ease;

        }


        .navbar-jachin .nav-link:hover,
        .navbar-jachin .nav-link.active {

            color:
                var(--jachin-dorado-claro);

        }


        /*
        |--------------------------------------------------------------------------
        | HERO
        |--------------------------------------------------------------------------
        */

        .catalogo-hero {

            background:
                linear-gradient(
                    rgba(14,7,4,.84),
                    rgba(14,7,4,.84)
                );

            padding:
                110px 0 80px;

            color:
                #fff;

            text-align:
                center;

        }


        .catalogo-hero .eyebrow {

            color:
                var(--jachin-dorado-claro);

            font-size:
                13px;

            font-weight:
                700;

            letter-spacing:
                4px;

            text-transform:
                uppercase;

            margin-bottom:
                15px;

        }


        .catalogo-hero h1 {

            font-size:
                clamp(42px, 6vw, 72px);

            font-weight:
                800;

            margin-bottom:
                20px;

        }


        .catalogo-hero p {

            max-width:
                700px;

            margin:
                0 auto;

            color:
                rgba(255,255,255,.78);

            font-size:
                18px;

            line-height:
                1.8;

        }


        /*
        |--------------------------------------------------------------------------
        | FILTROS
        |--------------------------------------------------------------------------
        */

        .catalogo-filtros {

            padding:
                45px 0 20px;

        }


        .filtros-wrap {

            display:
                flex;

            flex-wrap:
                wrap;

            justify-content:
                center;

            gap:
                10px;

        }


        .filtro-categoria {

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            padding:
                11px 20px;

            border:
                1px solid rgba(14,7,4,.15);

            border-radius:
                999px;

            color:
                var(--jachin-oscuro);

            background:
                #fff;

            text-decoration:
                none;

            font-size:
                14px;

            font-weight:
                700;

            transition:
                .2s ease;

        }


        .filtro-categoria:hover {

            color:
                #fff;

            background:
                var(--jachin-dorado);

            border-color:
                var(--jachin-dorado);

            transform:
                translateY(-2px);

        }


        .filtro-categoria.activo {

            color:
                #fff;

            background:
                var(--jachin-oscuro);

            border-color:
                var(--jachin-oscuro);

        }


        /*
        |--------------------------------------------------------------------------
        | CONTENIDO
        |--------------------------------------------------------------------------
        */

        .catalogo-contenido {

            padding:
                25px 0 100px;

        }


        .catalogo-heading {

            display:
                flex;

            align-items:
                end;

            justify-content:
                space-between;

            gap:
                20px;

            margin-bottom:
                35px;

        }


        .catalogo-heading h2 {

            font-size:
                34px;

            font-weight:
                800;

            margin:
                0;

        }


        .catalogo-heading p {

            margin:
                8px 0 0;

            color:
                var(--jachin-gris);

        }


        .contador-muebles {

            color:
                var(--jachin-gris);

            font-size:
                14px;

        }


        /*
        |--------------------------------------------------------------------------
        | CARD
        |--------------------------------------------------------------------------
        */

        .mueble-card {

            height:
                100%;

            background:
                #fff;

            border:
                0;

            border-radius:
                18px;

            overflow:
                hidden;

            box-shadow:
                0 10px 35px rgba(14,7,4,.08);

            transition:
                transform .25s ease,
                box-shadow .25s ease;

        }


        .mueble-card:hover {

            transform:
                translateY(-7px);

            box-shadow:
                0 18px 45px rgba(14,7,4,.14);

        }


        .mueble-imagen-wrap {

            position:
                relative;

            overflow:
                hidden;

            aspect-ratio:
                4 / 3;

            background:
                #e9e5de;

        }


        .mueble-imagen {

            width:
                100%;

            height:
                100%;

            object-fit:
                cover;

            transition:
                transform .5s ease;

        }


        .mueble-card:hover .mueble-imagen {

            transform:
                scale(1.045);

        }


        .mueble-sin-imagen {

            width:
                100%;

            height:
                100%;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            color:
                #999;

            font-size:
                14px;

        }


        .mueble-badges {

            position:
                absolute;

            top:
                15px;

            left:
                15px;

            right:
                15px;

            display:
                flex;

            justify-content:
                space-between;

            align-items:
                flex-start;

            gap:
                8px;

        }


        .badge-jachin {

            display:
                inline-block;

            padding:
                7px 11px;

            border-radius:
                5px;

            font-size:
                11px;

            font-weight:
                800;

            letter-spacing:
                .5px;

        }


        .badge-destacado {

            background:
                var(--jachin-dorado);

            color:
                #fff;

        }


        .badge-personalizable {

            background:
                rgba(14,7,4,.88);

            color:
                #fff;

        }


        .mueble-contenido {

            padding:
                25px;

        }


        .mueble-categoria {

            color:
                var(--jachin-dorado);

            font-size:
                12px;

            font-weight:
                800;

            letter-spacing:
                1.5px;

            text-transform:
                uppercase;

            margin-bottom:
                8px;

        }


        .mueble-nombre {

            font-size:
                24px;

            font-weight:
                800;

            margin-bottom:
                10px;

        }


        .mueble-descripcion {

            color:
                var(--jachin-gris);

            font-size:
                14px;

            line-height:
                1.7;

            min-height:
                48px;

        }


        .mueble-footer {

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            gap:
                15px;

            border-top:
                1px solid #eee;

            margin-top:
                20px;

            padding-top:
                18px;

        }


        .mueble-precio {

            font-size:
                18px;

            font-weight:
                800;

        }


        .mueble-cotizar {

            color:
                var(--jachin-dorado);

            font-size:
                14px;

            font-weight:
                800;

        }


        .mueble-botones {

            display:
                flex;

            flex-wrap:
                wrap;

            gap:
                8px;

            margin-top:
                20px;

        }


        .btn-jachin {

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            padding:
                11px 17px;

            border:
                1px solid var(--jachin-dorado);

            background:
                var(--jachin-dorado);

            color:
                #fff;

            font-size:
                12px;

            font-weight:
                800;

            text-decoration:
                none;

            transition:
                .2s ease;

        }


        .btn-jachin:hover {

            background:
                var(--jachin-dorado-oscuro);

            border-color:
                var(--jachin-dorado-oscuro);

            color:
                #fff;

        }


        .btn-jachin-outline {

            background:
                transparent;

            color:
                var(--jachin-oscuro);

            border-color:
                rgba(14,7,4,.25);

        }


        .btn-jachin-outline:hover {

            background:
                var(--jachin-oscuro);

            border-color:
                var(--jachin-oscuro);

        }


        /*
        |--------------------------------------------------------------------------
        | SIN RESULTADOS
        |--------------------------------------------------------------------------
        */

        .sin-resultados {

            background:
                #fff;

            border-radius:
                18px;

            padding:
                70px 30px;

            text-align:
                center;

            box-shadow:
                0 10px 35px rgba(14,7,4,.06);

        }


        .sin-resultados h3 {

            font-weight:
                800;

            margin-bottom:
                10px;

        }


        .sin-resultados p {

            color:
                var(--jachin-gris);

            margin-bottom:
                25px;

        }


        /*
        |--------------------------------------------------------------------------
        | CTA
        |--------------------------------------------------------------------------
        */

        .catalogo-cta {

            background:
                var(--jachin-oscuro);

            color:
                #fff;

            padding:
                90px 0;

            text-align:
                center;

        }


        .catalogo-cta h2 {

            font-size:
                clamp(32px, 5vw, 52px);

            font-weight:
                800;

            margin-bottom:
                18px;

        }


        .catalogo-cta p {

            max-width:
                680px;

            margin:
                0 auto 30px;

            color:
                rgba(255,255,255,.72);

            line-height:
                1.8;

        }


        /*
        |--------------------------------------------------------------------------
        | RESPONSIVE
        |--------------------------------------------------------------------------
        */

        @media (max-width: 767px) {

            .catalogo-hero {

                padding:
                    80px 0 60px;

            }


            .catalogo-heading {

                display:
                    block;

            }


            .contador-muebles {

                margin-top:
                    10px;

            }


            .mueble-contenido {

                padding:
                    20px;

            }

        }