.card-menu-long {
    /* form____________________ */
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* atributes_______________ */
    padding: 10px 10px 10px 10px;
    margin-bottom: 20px;
    /* width: 100%; */
    /* height: 100%; */
    /* background: var(--background7); */
    background-color: color-mix(in srgb, var(--background4), transparent 60%);
    border: 2px;
    border-style: solid;
    border-color: #c7c7c4;
    border-radius: 10px;
    /* behaviour_______________ */
    overflow: hidden;                           /*esconde lo que quede fuera de la tarjeta*/
    box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
    /* box-shadow: 10px 10px 5px 5px rgba(13, 13, 13, 0.3); */
    cursor: default;                            /*mantiene el tipo de cursor al pasar sobre elemntos */
    transition: all 400ms ease;
}

.card-menu-long:hover {
    background-color: color-mix(in srgb, var(--background4), transparent 10%);
    /* box-shadow: 1px 5px 20px rgb(247, 172, 215);
    transform: translateY(-5%); */
}

    .cml-imagen {
        display: flex;
        flex-direction: column;
        width: 120px;
        height: 100%;
        justify-content: flex-start;
        align-items: center;
    }
        .cml-imagen figure {
            border-radius: 6px;
            justify-content: center;
        }
            .cml-imagen figure img {
                width: 120px;
            }

    .cml-descriptor {
        display: flex; 
        flex-direction: column; 
        height: auto; 
        width: 100%; 
        justify-content: left; 
        margin-left: 20px;
    }
        .cml-1 {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 15px;
        }

            .caja-cml-titulo-nombre{
                display: flex;
                flex-direction: column;
            }
            .cml-titulo-nombre {
                display: flex;
                align-self: flex-end;
                width: 300px;
                width: clamp(11.25rem, 19.5313vw, 18.75rem);
            }
            
                .cml-titulo-nombre h4 {
                    font-family: var(--font-card-title);
                    font-weight: 400;
                    font-style: normal;
                    color:#c10404;
                    font-size: 10px;
                    line-height: 12px;
                    text-shadow: var(--text-card-title1-shadow);
                    text-transform: uppercase;
                    text-decoration: none;
                }
        
                .card-menu-long:hover .cml-titulo-nombre h4 {
                    color: #c69f07;
                    text-shadow:1px 1px 10px #f6c70e, 1px 1px 10px #ccc;
                }

                .cml-titulo-nombre h3 a {
                    font-family: var(--font-card-title);
                    font-weight: 400;
                    font-style: normal;
                    color: var(--text-card-title1);
                    font-size: 18px;
                    line-height: 20px;
                    text-shadow: var(--text-card-title1-shadow);
                    text-transform: uppercase;
                    text-decoration: none;
                }
        
                .card-menu-long:hover .cml-titulo-nombre h3 a {
                    color: var(--text-card-title1-hover);
                }

            .cml-ctrl-btns {
                display: flex; 
                flex-direction: column; 
                align-items: center; 
                justify-content: center; 
                width: min-content; 
                padding: 0px 0px 0px 0px;
                align-self: flex-end;
                
            }
            .cml-contador-titulo {
                margin-bottom: 5px;
            }
            .cml-contador-titulo p {
                font-family: var(--font-card-title);
                color: var(--text-color-detail-title);
                font-size: 8px;
                font-weight: lighter;
                text-transform: uppercase;
                letter-spacing: 1px;
            }
            .wrapper-cml-ctrl-btns{
                height: 25px;
                /* min-width: 40px; */
                width:fit-content;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #FFF;
                border-radius: 4px;
                box-shadow: 0 5px 10px rgba(0,0,0,0.2);
                }
            .wrapper-cml-ctrl-btns span{
                width: 40px;
                font-family: var(--font-detail-count);
                font-size: 12px;
                font-weight: 500;
                text-align: center;
                cursor: pointer;
                user-select: none;
                }
            .wrapper-cml-ctrl-btns span.cml-contador {
                width: 40px;
                font-family: var(--font-detail-count);
                /* font-weight: 600; */
                font-weight: 500;
                font-size: 16px;
                color: var(--text-color-detail-title);
                border-right: 2px solid rgba(0,0,0,0.2);
                border-left: 2px solid rgba(0,0,0,0.2);
                pointer-events: none;
                }
            .wrapper-cml-ctrl-btns span.button-point-crux {
                width: 40px;
                font-family: Inter,Helvetica,Arial,sans-serif;
                font-size: 14px;
                /* color: var(--text-color-detail-title); */
                /* border-right: 2px solid rgba(0,0,0,0.2); */
                border-left: 2px solid rgba(0,0,0,0.2);
                }
            .wrapper-cml-ctrl-btns span.button-point-crux button:hover {
                color: #c10404;
                }
            .wrapper-cml-ctrl-btns span.button-point-crux-alone {
                width: 40px;
                font-family: Inter,Helvetica,Arial,sans-serif;
                font-size: 14px;
                /* color: var(--text-color-detail-title); */
                /* border-right: 2px solid rgba(0,0,0,0.2); */
                /* border-left: 2px solid rgba(0,0,0,0.2); */
                }
            .wrapper-cml-ctrl-btns span.button-point-crux-alone button:hover {
                color: #c10404;
                }
            .wrapper-cml-ctrl-btns span.instru {
                font-family: Inter,Helvetica,Arial,sans-serif;
                color: var(--text-color-detail-title);
                font-size: 10px;
                font-weight: lighter;
                text-transform: capitalize;
                width: 10px;
                margin: 0px 0px 0px 5px;
                pointer-events: none;
            }
            .wrapper-cml-ctrl-btns span.restar {
                writing-mode: vertical-rl;
                rotate: 180deg;
            }
            .wrapper-cml-ctrl-btns span.sumar {
                writing-mode: vertical-rl;
            }
            .cml-no-button {
                background: none;
                border: none;
                width: 40px;
                /* text-align: center; */
                font-family: Inter,Helvetica,Arial,sans-serif;
                color: var(--text-color-detail-title);
                font-size: 16px;
                font-weight: 500;
                cursor: pointer;
                user-select: none;
            }

        .cml-2 {
            display: flex;
            flex-direction: column;
        }

    .card-menu-long .content {
        /* atributes_______________ */
        width: 90%;
        height: 80px;
        padding: 20px 15px 0px 15px; /* top right bottom left */
        justify-items:flex-start;
        text-align: left;
    }

        .card-menu-long .content p, b{
            height: 70px;
            padding: 10px 0px 0px 0px; /* top right bottom left */
            font-size: 16px;
            line-height: 20px;
            /* font-family: var(--font-card-descr); */
            font-family: var(--font-survey-field-content);
            font-weight: 400;
            font-style: normal;
            color: var(--text-card-descr1);
        }

        .card-menu-long .content precio {
            color: #a3790e;
            text-decoration: none;
            font-size: 16px;
            line-height: 16px;
            font-weight: bold;
            padding-bottom: 10px;
        }

        .card-menu-long .content a {
            width: 40px;
            height: 30px;
            margin-top: 20px;
            padding: 5px;
            color: #a3790e;
            text-decoration: none;
            font-size: 14px;
            line-height: 25px;
            font-weight: bold;
            letter-spacing: 0.5px;
            border-style: solid;
            /* border-width: 3px; */
            /* border-color: #a3790e; */
            border-width: 2px;
            border-color: #c7c7c4;
            border-radius: 6px;
            transition: all 400ms ease;
        }
        .card-menu-long .content a:hover {
            background: #d19a10;
            border-color: #d19a10;
            color: #ffffff;
        }

        #porta-contador-canasta,
        #porta-sub-total-canasta {
            height: 30px;
            padding: 10px 0px 10px 0px;
            padding: 5px;
            /* color: #a3790e; */
            color: #484848;
            /* background: #f1f3f0; */
            background: #ffffff;
            text-decoration: none;
            font-size: 14px;
            line-height: 16px;
            font-weight: bold;
            letter-spacing: 0.5px;
            border-style: solid;
            /* border-width: 3px; */
            /* border-color: #a3790e; */
            border-width: 2px;
            border-color: #c7c7c4;
            border-radius: 6px;
            transition: all 400ms ease;
            text-align: center;
        }



        #porta-precio-unitario-canasta,
        #porta-precio-unitario-canasta-promo {
            height: 25px;
            padding: 10px 0px 10px 0px;
            padding: 5px;
            /* transition: all 400ms ease; */
            /* text-align: center; */
        }

            #porta-precio-unitario-canasta p ,
            #porta-precio-unitario-canasta p span {
                font-family: var(--font-detail-price);
                color: var(--text-color-detail-title);
                text-decoration: none;
                font-size: 16px;
                line-height: 16px;
                font-weight: bold;
                /* letter-spacing: 0.5px; */
            }

            #porta-precio-unitario-canasta-promo p {
                font-family: var(--font-detail-price);
                color: #d44b06;
                text-decoration: none;
                font-size: 16px;
                line-height: 16px;
                font-weight: bold;
                letter-spacing: 0.5px;
            }

            /* No funciona desde aquí, se insertó codigo en tag */
            /* #porta-precio-unitario-canasta-promo p span {
                color: #f8f800;
            } */


        #porta-contador-canasta {
            width: 60px;
        }
        #porta-precio-unitario-canasta,
        #porta-sub-total-canasta {
            width: 120px;
        }