:root {

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

        }


        body {

            background:
                var(--jachin-crema);

            color:
                var(--jachin-oscuro);

        }


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

        .navbar-jachin {

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

        }


        .navbar-brand-jachin {

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

            font-weight:
                800;

            letter-spacing:
                3px;

        }


        .navbar-jachin .nav-link {

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

        }


        .navbar-jachin .nav-link:hover {

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

        }


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

        .personaliza-hero {

            background:
                var(--jachin-oscuro);

            color:
                #fff;

            padding:
                90px 0 75px;

            text-align:
                center;

        }


        .personaliza-eyebrow {

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

            font-size:
                12px;

            font-weight:
                800;

            letter-spacing:
                4px;

            text-transform:
                uppercase;

            margin-bottom:
                15px;

        }


        .personaliza-hero h1 {

            font-size:
                clamp(40px, 6vw, 68px);

            line-height:
                1;

            font-weight:
                800;

            margin-bottom:
                20px;

        }


        .personaliza-hero p {

            max-width:
                700px;

            margin:
                0 auto;

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

            font-size:
                17px;

            line-height:
                1.8;

        }


        /*
        |--------------------------------------------------------------------------
        | CONTENEDOR
        |--------------------------------------------------------------------------
        */

        .personaliza-section {

            padding:
                70px 0 100px;

        }


        .personaliza-card {

            background:
                #fff;

            border-radius:
                20px;

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

            padding:
                35px;

        }


        /*
        |--------------------------------------------------------------------------
        | MUEBLE SELECCIONADO
        |--------------------------------------------------------------------------
        */

        .mueble-seleccionado {

            background:
                #f8f5ef;

            border-left:
                4px solid var(--jachin-dorado);

            padding:
                20px;

            margin-bottom:
                35px;

        }


        .mueble-seleccionado small {

            display:
                block;

            color:
                var(--jachin-dorado);

            font-size:
                11px;

            font-weight:
                800;

            letter-spacing:
                2px;

            text-transform:
                uppercase;

            margin-bottom:
                5px;

        }


        .mueble-seleccionado strong {

            font-size:
                23px;

        }


        .mueble-seleccionado a {

            color:
                var(--jachin-gris);

            font-size:
                13px;

            text-decoration:
                none;

        }


        /*
        |--------------------------------------------------------------------------
        | SECCIONES
        |--------------------------------------------------------------------------
        */

        .form-section {

            margin-bottom:
                35px;

        }


        .form-section-title {

            display:
                flex;

            align-items:
                center;

            gap:
                12px;

            margin-bottom:
                22px;

            padding-bottom:
                12px;

            border-bottom:
                1px solid #eee;

        }


        .form-section-number {

            width:
                34px;

            height:
                34px;

            border-radius:
                50%;

            background:
                var(--jachin-oscuro);

            color:
                #fff;

            display:
                flex;

            align-items:
                center;

            justify-content:
                center;

            font-size:
                13px;

            font-weight:
                800;

        }


        .form-section-title h2 {

            font-size:
                21px;

            font-weight:
                800;

            margin:
                0;

        }


        .form-label {

            font-weight:
                700;

            font-size:
                14px;

        }


        .form-control {

            border-radius:
                8px;

            padding:
                12px 14px;

            border:
                1px solid #ddd;

        }


        .form-control:focus {

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

            box-shadow:
                0 0 0 3px rgba(194,132,54,.12);

        }


        .form-help {

            color:
                #888;

            font-size:
                12px;

            margin-top:
                6px;

        }


        /*
        |--------------------------------------------------------------------------
        | OPCIONES
        |--------------------------------------------------------------------------
        */

        .opciones-grid {

            display:
                grid;

            grid-template-columns:
                repeat(2, 1fr);

            gap:
                10px;

        }


        .opcion {

            position:
                relative;

        }


        .opcion input {

            position:
                absolute;

            opacity:
                0;

            pointer-events:
                none;

        }


        .opcion label {

            display:
                block;

            padding:
                15px;

            border:
                1px solid #ddd;

            border-radius:
                10px;

            cursor:
                pointer;

            transition:
                .2s ease;

        }


        .opcion label strong {

            display:
                block;

            font-size:
                14px;

            margin-bottom:
                3px;

        }


        .opcion label span {

            color:
                #888;

            font-size:
                12px;

        }


        .opcion input:checked + label {

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

            background:
                #fbf6ed;

            box-shadow:
                0 0 0 2px rgba(194,132,54,.12);

        }


        /*
        |--------------------------------------------------------------------------
        | AVISO
        |--------------------------------------------------------------------------
        */

        .personaliza-aviso {

            background:
                #f8f5ef;

            padding:
                18px;

            border-radius:
                10px;

            color:
                var(--jachin-gris);

            font-size:
                13px;

            line-height:
                1.7;

            margin-bottom:
                30px;

        }


        /*
        |--------------------------------------------------------------------------
        | BOTÓN
        |--------------------------------------------------------------------------
        */

        .btn-jachin {

            display:
                inline-flex;

            align-items:
                center;

            justify-content:
                center;

            width:
                100%;

            padding:
                16px 25px;

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

            background:
                var(--jachin-dorado);

            color:
                #fff;

            text-decoration:
                none;

            font-size:
                13px;

            font-weight:
                800;

            border-radius:
                0;

            transition:
                .2s ease;

        }


        .btn-jachin:hover {

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

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

            color:
                #fff;

        }


        /*
        |--------------------------------------------------------------------------
        | LATERAL
        |--------------------------------------------------------------------------
        */

        .personaliza-lateral {

            position:
                sticky;

            top:
                30px;

        }


        .lateral-card {

            background:
                var(--jachin-oscuro);

            color:
                #fff;

            border-radius:
                18px;

            padding:
                30px;

        }


        .lateral-card h3 {

            font-size:
                26px;

            font-weight:
                800;

            margin-bottom:
                15px;

        }


        .lateral-card p {

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

            font-size:
                14px;

            line-height:
                1.8;

        }


        .lateral-list {

            list-style:
                none;

            padding:
                0;

            margin:
                25px 0 0;

        }


        .lateral-list li {

            padding:
                12px 0;

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

            font-size:
                13px;

        }


        .lateral-list li::before {

            content:
                "✓";

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

            font-weight:
                800;

            margin-right:
                10px;

        }


        @media (max-width: 767px) {

            .personaliza-card {

                padding:
                    22px;

            }


            .opciones-grid {

                grid-template-columns:
                    1fr;

            }


            .personaliza-lateral {

                position:
                    static;

            }

        }