:root {
    --canasta-width: 700px;
 }

.mostrador-detalle {
    display: flex; 
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    /* width: fit-content;  */
    min-height: 600px; 
    padding: 20px 0px 40px 0px;
}


.dtl-zone-A {
    display: flex;
    flex-direction: column;
    /* width: min-content; */
    /* width: 770px; */
    width: 830px;
}

@media (max-width:400px) {

    .dtl-zone-A {
        width: 100vw;
    }

}

    /* ############### ZONA A1 ############### */
    .modulo-identificacion-cuenta {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;                        /* ??????? */
        width: 830px;
        justify-content: space-between;
    }

        .modulo-identificacion,                 /* IDENTIFICACIÓN - USOS */
        .modulo-cuenta {                        /* PRECIOS - BOTONES DE AGREGACIÓN Y DIMINUCIÓN */
            display: flex;
            flex-direction: column;
            width: 400px;
            justify-content: center;
        }
        
        @media (max-width:830px) {
    
            .modulo-identificacion-cuenta {
                display: flex;
                flex-direction: column;
                width: 100vw;
                align-items: center;
            }

                .modulo-identificacion,
                .modulo-cuenta {
                    display: flex;
                    flex-direction: column;
                    width: 100vw; 
                }
    
        }
        
        @media (max-width:360px) {
    
            .modulo-identificacion-cuenta {
                display: flex;
                flex-direction: column;
                width: 100vw;
                align-items: center
            }

                .modulo-identificacion,
                .modulo-cuenta {
                    display: flex;
                    flex-direction: column;
                    width: 100vw; 
                }
    
        }


        /*.modulo-identificacion-descripcion,                  DESCRIPCION  ?????????????????? */
        /*.modulo-cuenta-botones,                              BOTONES DE AGREGACION  ?????????????????? */
            .modulo-identificacion-nombre-stock-sku,            /* NOMBRE-SKU-STOCK */
            .modulo-cuenta-precios {                            /* PRECIOS */
                display: flex;
                flex-direction: column;
            }


                #nombre {
                    display: flex;
                    flex-direction: row;
                    justify-content: left;
                    /* width: 370px; */
                    padding: 0px 0px 10px 0px;
                }

                    #nombre h1 {
                        font-family: var(--font-card-title);
                        font-size: 25px;
                        text-transform: uppercase;
                        color: var(--text-color-detail-title);
                    }

                    #nombre p {
                        font-family: var(--font-card-title);
                        font-size: 25px;
                        text-transform: uppercase;
                        color: var(--text-color-detail-title);
                    }

                #stk,
                #sku {
                    display: flex; 
                    /*flex-direction: row; */
                    /* width: auto; */
                    padding: 0px 0px 15px 0px;
                    justify-content: center;
                    align-items: center;
                }

            .modulo-identificacion-descripcion {
                display: flex;
                flex-direction: column;
            }           

                #descripcion {
                    display: flex;
                    flex-direction: row;
                    justify-content: left;
                    /* width: 360px; */
                    padding: 0px 0px 15px 0px;
                }

                    #descripcion p {
                        font-family: var(--font-survey-field-content);
                        font-size: 16px;
                        color: #5c5c5c;
                    }

            @media (max-width:600px) {

                #nombre ,
                #descripcion {
                    display: flex;
                    /* align-items: center; */
                    justify-content: center;            
                }
    
            }

                #precio-normal,
                #precio-rebaja {
                    display: flex; 
                    /*flex-direction: row; */
                    /* width: auto; */
                    padding: 0px 0px 5px 0px;
                    justify-content: center;
                    align-items: center;
                }

                    #precio-normal p,
                    #precio-rebaja p {
                        font-family: var(--font-detail-price);
                        font-size: 30px;
                        color: var(--text-color-detail-title);
                    }

                    
                .container-descuento {
                    display: flex; 
                    flex-direction: row;
                    margin-bottom: 7px;
                    justify-content: center;
                    align-items: center;
                }

                .descuento-minimized {
                    width: min-content;
                    /* background-color: #464545; */
                    background-color: var(--text-color-detail-title);
                    margin-left: 10px;
                }
                .descuento-minimized p {
                    font-family: var(--font-detail-price);
                    line-height: 20px;
                    font-size: 15px;
                    /* color: var(--text-color-detail-title); */
                    color: #fff;
                }

                .precio-normal-minimized-strikethrough p {
                    font-family: var(--font-detail-price);
                    font-size: 20px;
                    color: var(--text-color-detail-title);
                    text-decoration: line-through;
                }


            .modulo-cuenta-botones {          /* BOTONES DE AGREGACIÓN Y DIMINUCIÓN */
                display: flex;
                flex-direction: column;
            }
                .btns-ctrl-dtl-container {
                    display: flex; 
                    flex-direction: column; 
                    align-items: center; 
                    justify-content: center; 
                    /* width: 100%;  */
                    padding: 5px 0px 10px 0px;
                }
                .contador-dtl-titulo {
                    margin-bottom: 5px;
                }
                .contador-dtl-titulo p {
                    font-family: var(--font-card-title);
                    color: var(--text-color-detail-title);
                    font-size: 10px;
                    font-weight: lighter;
                    text-transform: uppercase;
                    letter-spacing: 1px;
                }
                .wrapper-btns-ctrl-dtl{
                    height: 40px;
                    /* min-width: 40px; */
                    width:fit-content;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background: #FFF;
                    border-radius: 7px;
                    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
                    }
                .wrapper-btns-ctrl-dtl span{
                    width: 40px;
                    font-family: var(--font-detail-count);
                    font-size: 20px;
                    font-weight: 500;
                    text-align: center;
                    cursor: pointer;
                    user-select: none;
                    }
                .wrapper-btns-ctrl-dtl span.num {
                    width: 60px;
                    font-family: var(--font-detail-count);
                    /* font-weight: 600; */
                    font-weight: 500;
                    font-size: 20px;
                    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-btns-ctrl-dtl 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-btns-ctrl-dtl span.restar {
                    writing-mode: vertical-rl;
                    rotate: 180deg;
                }
                .wrapper-btns-ctrl-dtl span.sumar {
                    writing-mode: vertical-rl;
                }
                .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: 20px;
                    font-weight: 500;
                    cursor: pointer;
                    user-select: none;
                }





            .modulo-usos-personalizacion {          /* AVISO PERSONALIZACIÓN */
                display: flex;
                flex-direction: row;
                width: auto;
            }

                #avisa-personalizacion {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    justify-content: center;
                    align-items: center;
                    margin-bottom: 20px;
                }

                    #avisa-personalizacion p {
                        font-family: var(--font-survey-field-content);
                        font-size: 16px;
                        color: #5c5c5c;
                        font-weight: bold;
                    }

    /* ############### ZONA A2 ############### */
    .modulo-presentacion-usos {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 830px;
        justify-content: space-between;
    }

    @media (max-width:830px) {

        .modulo-presentacion-usos {
            display: flex;
            flex-direction: column;
            width: 100vw;
            align-items: center;
        }

    }

    @media (max-width:360px) {

        .modulo-presentacion-usos {
            display: flex;
            flex-direction: column;
            width: 100vw;
            align-items: center
        }

    }


        .modulo-presentacion,                 /* FOTOS - PRODUCTOR - CLASIFICACIONES */
        .modulo-usos {                /* DESCRIPCIÓN DETALLADA Y USOS - BOTONES DE AGREGACIÓN Y DIMINUCIÓN */
            display: flex;
            flex-direction: column;
            width: 400px;
            width: fit-content;
        }

            .modulo-presentacion-fotos {          /* FOTOS */
                display: flex; 
                flex-direction: row;
            }

                /* #dtl-photos-container {
                    display: flex; 
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: space-between;
                    width: 370px;
                } */

                #dtl-photos-container {
                    display: grid;
                    /* ----- Para 370px ancho de contenedor ----- */
                    /* grid-template-columns: 242px 118px; */
                    /* grid-template-rows: 177px 177px; */
                    /* ----- Para 400px ancho de contenedor ----- */
                    grid-template-columns: 262px 128px;
                    grid-template-rows: 192px 192px;
                    column-gap: 10px;
                    row-gap: 10px;
                }

                    #figura-1 {
                        grid-column-start: 1;
                        grid-column-end: 2;
                        grid-row-start: 1;
                        grid-row-end: -1;
                    }
                    #figura-2 {
                        grid-column-start: 2;
                        grid-column-end: -1;
                        grid-row-start: 1;
                        grid-row-end: 2;
                    }
                    #figura-3 {
                        grid-column-start: 2;
                        grid-column-end: -1;
                        grid-row-start: 2;
                        grid-row-end: -1;
                    }

                @media (max-width:360px) {

                    .modulo-usos {                /* DESCRIPCIÓN DETALLADA Y USOS - BOTONES DE AGREGACIÓN Y DIMINUCIÓN */
                        display: flex;
                        flex-direction: column;
                        width: 280px;
                        width: fit-content;
                        margin-left: 5px;
                    }

                    #dtl-photos-container {
                        display: grid;
                        grid-template-columns: 280px;
                        grid-template-rows: 420px 420px 420px;
                        row-gap: 20px;
                    }

                    #figura-1 {
                        grid-column-start: 1;
                        grid-column-end: -1;
                        grid-row-start: 1;
                        grid-row-end: 2;
                    }
                    #figura-2 {
                        grid-column-start: 1;
                        grid-column-end: -1;
                        grid-row-start: 2;
                        grid-row-end: 3;
                    }
                    #figura-3 {
                        grid-column-start: 1;
                        grid-column-end: -1;
                        grid-row-start: 3;
                        grid-row-end: -1;
                    }

                }


                    #figura-1,
                    #figura-2,
                    #figura-3,
                    #figura-4 {
                        display: flex;
                        flex-direction: row;
                        /* width: 150px;
                        height: 225px; */
                        /* width: 175px;                   MEDIDA IMPORTANTE */
                        /* height: 262px;                  MEDIDA IMPORTANTE */
                        /* margin: 10px; */
                        /* margin: 5px 0px 5px 0px; */
                        border: 1.5px;
                        border-style: solid;
                        border-radius: 7px;
                        border-color: #c7c7c4;
                        /* background: var(--background7); */
                        background-color: color-mix(in srgb, var(--background4), transparent 40%);
                        box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.5);
                        justify-content: center;
                        align-items: center;
                    }
                    
                    #figura-1 img,
                    #figura-2 img,
                    #figura-3 img,
                    #figura-4 img {
                        width: 95%;
                        /* padding: 2px; */
                        border-radius: 7px;
                        border-color: #fff;
                        /* box-shadow: 7px 7px 10px rgba(0, 0, 0, 0.5); */
                    }


            .modulo-presentacion-productor,                 /* PRODUCTOR */
            .modulo-presentacion-clasificaciones {          /* CLASIFICACIONES */
                display: flex;
                flex-direction: row;
                /* width: min-content; */
            }

            .modulo-presentacion-clasificaciones {
                margin-top: 15px;
            }

                #presentación-clasificaciones,
                #dtl-productor-id {
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    padding: 15px 0px 0px 0px;
                }

                    #presentación-clasificaciones-titulo,
                    #productor-titulo {
                        width: 70px;
                    }
                    
                        #presentacion-clasificaciones-titulo p,
                        #productor-titulo p {
                            font-family: var(--font-survey-field-content);
                            font-size: 10px;
                        }
                    
                    #presentacion-clasificaciones-simbolos,
                    #productor-symbols {
                        display: flex; 
                        flex-direction: row;
                        justify-content: left;
                        align-items: center;
                        width: 100%;
                        /* width: auto; */
                    }
                    
                        #productor-isotipo p {
                            /* display: flex; 
                            flex-direction: row;
                            justify-content: left;
                            align-items: center;
                            width: 100%; */
                            /* height: 40px; */
                            padding: 0px 0px 0px 20px;
                            font-family: var(--font-survey-field-content);
                            font-size: 10px;
                            font-style: italic;
                            font-weight: bold;
                        }
                
                        #presentacion-clasificaciones-simbolos p {
                            font-size: 35px;
                            font-weight: 700;
                            color: var(--font-clasific-symbols);
                        }

            .modulo-usos-resena {                           /* DESCRIPCIÓN DETALLADA Y USOS */
                display: flex;
                flex-direction: column;
                width: 400px;
            }
            
                #usos {
                    display: flex; 
                    flex-direction: column; 
                    justify-content: flex-start; 
                    align-items: flex-start;
                    /* width: 100%; */
                    height: auto;
                    min-height: 50px;
                    margin: 0px 0px 20px 0px;
                    border: 1.5px;
                    border-style: dotted;
                    border-radius: 7px;
                    /* border-color: #c7c7c4; */
                    border-color: black;
                    /* background: var(--background7); */
                    background-color: color-mix(in srgb, var(--background4), transparent 40%);
                }
                
                #usos p {
                    padding: 15px 15px 15px 15px;
                    font-family: var(--font-survey-field-content);
                    font-size: 16px;
                    color: #5c5c5c;
                }

            @media (max-width:360px) {

                .modulo-usos-resena {                       /* DESCRIPCIÓN DETALLADA Y USOS */
                    display: flex;
                    flex-direction: column;
                    width: 280px;
                }

            }

            @media (max-width:420px) {

                #usos p {
                    padding: 10px 10px 10px 10px;
                    font-family: var(--font-survey-field-content);
                    font-size: 14px;
                    letter-spacing: 0.5px;
                    color: #5c5c5c;
                }

            }

    /* ############### ZONA A3 ############### */
    .modulo-personalizacion {
        display: flex; 
        flex-direction: column;
        width: 830px;
        width: clamp(21.875rem, 54.0365vw, 51.875rem);
        padding: 15px 0px 15px 0px
    }

    @media (max-width:830px) {

        .modulo-personalizacion {
            display: flex;
            flex-direction: column;
            width: 100vw;
            align-items: center;
        }

    }

        #modulo-personalizacion-instrucciones {
            display: flex; 
            flex-direction: column;
            padding: 0px 20px 7px 10px;
        }

            #modulo-personalizacion-instrucciones p {
                font-family: var(--font-survey-field-content);
                font-size: 14px;
                line-height: 16px;
                margin-bottom: 10px;
            }

            .instruccion {
                display: flex;
                flex-direction: row;
                line-height: clamp(25px, 1.5vw, 40px);
                align-items:start;
                padding: 0px 0px 7px 0px;
            }

                #instruccion-symbol {
                    margin-right: 14px;
                }
                    #instruccion-symbol span {
                        font-size: clamp(18px, 1.5vw, 40px);
                        color: #1E4D52;
                        color: #056b1d;
                        text-shadow: 5px 5px 7px rgba(77, 77, 77, 0.7);
                    }

                #instruccion-content p {
                    font-family: var(--font-survey-field-content);
                    font-size: 14px;
                }

                    .instruccion-items {
                        display: flex;
                        flex-direction: row;
                        line-height: clamp(25px, 1.5vw, 40px);
                        align-items:start;
                        padding: 0px 0px 0px 30px;
                    }

                        #instruccion-item-symbol {
                            margin-right: 14px;
                        }

                            #instruccion-item-symbol span {
                                font-size: clamp(18px, 1.5vw, 40px);
                                color: #1E4D52;
                                color: #056b1d;
                                /* color: #0695f5; */
                                text-shadow: 5px 5px 7px rgba(77, 77, 77, 0.7);
                            }

                        #instruccion-item-content p {
                            font-family: var(--font-survey-field-content);
                            font-size: 14px;
                            /* color: rgb(245, 78, 26); */
                        }


            .personalizacion-warning {
                margin-top: 10px;
            }
            
            #modulo-personalizacion-checkbox {
                display: flex; 
                flex-direction: row;
                justify-content: left;
                align-items: center;
                height: auto;
                min-height: 50px;
                margin: 0px 0px 0px 0px;
                padding: 15px 15px 15px 15px;
                border: 1.5px;
                border-style: solid;
                border-radius: 7px;
                border-color: #c7c7c4;
                background: var(--background7);
            }
            
            #personalized-field-title-checkbox p {
                
                font-family: var(--font-survey-field-content);
                font-size: 14px;
                margin-right: 30px;
            }

            @media (max-width:360px) {

                #modulo-personalizacion-checkbox {
                    width: 90%;
                }

            }

            
            .modulo-personalizacion-quiz {
                border: 1.5px;
                border-style: solid;
                border-radius: 7px;
                border-color: #c7c7c4;
                background: var(--background7);
                padding: 10px 10px 10px 10px;
                margin-top: 15px;
            
            }
            
            
            
            .form-przd-title {
                /* width: 800px; */
                /* height: 30px; */
                justify-self: left;
                padding: 15px 0px 0px 0px;
                /* font-family: var(--font-card-descr);
                font-size: large;
                color: var(--text-card-title1); */
            }
            
                .form-przd-title p {
                    font-family: var(--font-survey-field-content);
                    font-size: 14px;
                    font-variant: small-caps;
                    font-weight: bold;
                    /* color: var(--text-card-title1); */
                }
            
            .form-przd-data {
                display: flex; 
                flex-direction: column;
            }
            
                .przd-receiver-legend,
                .przd-intention-legend,
                .przd-decret-legend {
                    width: auto;
                    margin: 15px 0px 0px 0px;
                }
            
                    .przd-receiver-legend p,
                    .przd-intention-legend p,
                    .przd-decret-legend p{
                        font-family: var(--font-survey-field-content);
                        font-size: 14px;
                    }
            
                #przd-receiver,
                #przd-intention,
                #przd-decret {
                    width: auto;
                    margin: 5px 0px 0px 0px;
                    font-family: var(--font-survey-field-content);
                    font-size: 14px;
                    border-style: solid;
                    border-radius: 7px;
                    border-color: #c7c7c4;
                }
            
                #przd-receiver{
                    height: 30px;
                }
            
                #przd-intention,
                #przd-decret {
                    text-align: left;
                    line-height: 30px;
                }
            
                .przd-btn-container {
                    display: flex;
                    flex-direction: row;
                    margin: 15px 0px 0px 0px;
                    justify-content: right;
                    align-items: center;
            
                    /* line-height: 12px; */
                }
            
                    #legend-przd-btn {
                        font-size: 14px;
                        color: rgb(144, 50, 3);
                        padding-right: 10px;
                    }