/* ========================================================================================================= PC */
.objeto {
    padding: 0;
    margin: 0;
    width: 100%;
    height:180px;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-areas: "obj_info  make_forma";
    justify-content: start;
    align-content: center;
    background: #FFF;
}
.objetoSim {
    padding: 0;
    margin: 0;
    width: 100%;
    height:180px;
    display: grid;
    grid-template-columns: auto;
    grid-template-areas: "obj_info";
    justify-content: start;
    align-content: center;
    background: #FFF;
}
.obj_info {
    grid-area: obj_info;
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-rows: 15px 50px 50px 50px 15px;
    grid-template-columns: 200px  330px  230px;
    grid-template-areas: "obj_imagen  .           ."
                         "obj_imagen  obj_nombre  obj_precioA"
                         "obj_imagen  obj_extra   obj_precioB"
                         "obj_imagen  obj_marca   obj_precioC"
                         "obj_imagen  .           .";
    text-decoration: none;
}
.make_forma {
    grid-area: make_forma;
    display: grid;
    justify-content: center;
    align-content: center;
    grid-template-rows: 5px 70px 45px 45px 15px;
    grid-template-columns: 190px  1fr;
    grid-template-areas: ".             ."
                         "mk_cantidad  mk_stock"
                         "mk_pack      mk_carrito"
                         "mk_total     mk_carrito"
                         ".             .";
}
/*------------------------------------------------------------------------------- INFO */
/* -------------------------------------------------------- Imagen */
.obj_imagen {
    grid-area: obj_imagen;
    display: grid;
    wdith:100%;
    height:100%;
    place-items:center;
}
.obj_imagen img {
    height:160px;
    object-fit:contain;
    object-position: center;
}
/* -------------------------------------------------------- Nombre */
.obj_nombre {
    grid-area: obj_nombre;
    color:#009;     
    font-size: 27px;
    display: grid;
    align-content: center;
}
.obj_extra {
    grid-area: obj_extra;
    height: 100%;
    width: 100%;
    color:#666;
    font-size: 24px;
    display: grid;
    align-content: center;
    grid-template-columns: auto   15px  1fr;
    grid-template-areas: "Oextra  .    Omedida";
}
.Oextra {
    grid-area: Oextra;
    color:#666;
}
.Omedida {  
    grid-area: Omedida;
    color:#00A;     
}
.obj_marca {   
    grid-area: obj_marca;
    color:#9CF;     
    font-size: 25px;
    display: grid;
    align-content: center;
}
/* -------------------------------------------------------- Precio */
.obj_precioA {
    grid-area: obj_precioA;
    display: grid;
    grid-template-columns: 55% 4% 41%;
    grid-template-areas: "empaqueQ . precioQ";
    justify-content: center;
    align-content: center;
    background: #EEE;
}
.obj_precioB {
    grid-area: obj_precioB;
    display: grid;
    grid-template-columns: 55% 4% 41%;
    grid-template-areas: "empaqueQ . precioQ";
    justify-content: center;
    align-content: center;
    background: #EEE;
}
.obj_precioC {
    grid-area: obj_precioC;
    display: grid;
    grid-template-columns: 55% 4% 41%;
    grid-template-areas: "empaqueQ . precioQ";
    justify-content: center;
    align-content: center;
    background: #EEE;
}
.empaqueP {
    grid-area: empaqueQ;
    display: grid;
    justify-content: end;
    align-content: center;
    font-size: 19px;
    color: #999;
}
.precioP {
    grid-area: precioQ;
    display: grid;
    justify-content: start;
    align-content: center;
}
.fsoles {
    font-size: 16px;
    color: #CCC;
    letter-spacing: 1px;
}
.fentero {
    font-size: 22px;
    font-weight: bold;
    color: #000;
}
.fdecimal {
    font-size: 20px;
    font-weight: bold;
    color: #777;
}
/* -------------------------------------------------------- Cantidad */
.mk_cantidad {
    grid-area: mk_cantidad;
    justify-content: center;
    height: 100%;
    background: #FFF;
    display: flex;
    align-items: center;
}
.cuadro_cantidad {
    border-style: solid; 
    border-width:2px; 
    border-radius: 10px;
    border-color:#BBB; 
    width:100px;
    height:50px;
}
.cuadro_grid {
    width:100%;
    height:100%;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 75%  25%;
    grid-template-rows:    25px 25px;
    grid-template-areas: "number  arriba"
                         "number  abajo";
    justify-items: center;
    align-items: center;
}
.number {
    grid-area: number;
    width:100%;
    height:100%;
    font-size: 32px;
    font-weight: bold;
    display: grid;
    align-items: center;
    justify-items: center;
}
.number input {
    background:#FFF; 
    border:0; 
    outline: none;
    width:100%;
    font-family:lato;
    font-size:32px; 
    font-weight: bold;
    box-sizing: border-box;
    text-align: center;
}
.number a {
    text-decoration: none;
    color: #000;
}
.arriba {
    grid-area: arriba;
    display: grid;
    align-items: center;
    justify-items: center;

}
.abajo {
    grid-area: abajo;
    display: grid;
    align-items: center;
    justify-items: center;
}
/* -------------------------------------------------------- Pack */
.mk_pack {
    grid-area: mk_pack;
    height: 100%;
    width: 100%;
    background: #FFF;
    display: grid;
    align-items: center;
    justify-items: center;
    border-bottom:2px solid #EEE;
}
.mk_pack a{
    text-decoration: none;
    color:#009;
    width:100%;
    font-family:lato;
    font-size:24px; 
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
}
/* -------------------------------------------------------- Total */
.mk_total {
    grid-area: mk_total;
    height: 100%;
    width: 100%;
    text-align: center;
}
.tsoles {
    font-size: 24px;
    color: #CCC;
    letter-spacing: 1px;
    padding-right: 5px;
}
.tentero {
    font-size: 35px;
    font-weight: bold;
}
.tdecimal {
    font-size: 30px;
    font-weight: bold;
    color: #777;
}
/* ------------------------------------------------------- Carrito */
.mk_carrito {
    grid-area: mk_carrito;
    display: grid;
    justify-content: center;
    align-content: start;
}
.mk_carrito img { height: 60px; }
.mk_stock {
    grid-area: mk_stock;
    height: 100%;
    width: 100%;
    display: grid;
    align-items: center;
    justify-items: center;
    color:#CCC;
    font-family:Roboto;
    font-size:20px; 
}
/*========================================================================================================= 1024 */
@media screen and (max-width:1024px) {
    .objeto {
        height:155px;
    }
    .objetoSim {
        height:155px;
    }
    .obj_info {
        grid-template-rows: 10px 45px 45px 45px 10px;
        grid-template-columns: auto  200px  210px;
    }

   .make_forma {
        grid-template-rows: 5px 60px 40px 40px 10px;
        grid-template-columns: 180px  1fr;
        grid-template-areas: ".            ."
                             "mk_cantidad  mk_carrito"
                             "mk_pack      mk_carrito"
                             "mk_total     mk_carrito"
                             ".            .";
    }
    .obj_imagen img { height: 155px; }
    /* -------------------------------------------------------- Nombre */
    .obj_nombre {   font-family: Roboto; font-size: 23px;  }
    .obj_extra {    
        font-family: Roboto; 
        font-size: 22px;  
        grid-template-columns: 100%;
        grid-template-areas: "Omedida";
    }
    .Oextra {   display: none;    }
    .obj_marca {    font-family: Roboto; font-size: 22px;    }
    /* -------------------------------------------------------- Precios */
    .obj_precioA {  grid-template-columns: 58% 4% 38%;    }
    .obj_precioB {  grid-template-columns: 58% 4% 38%;    }
    .obj_precioC {  grid-template-columns: 58% 4% 38%;    }
    .empaqueP {    font-family: Roboto;  font-size: 18px;  }
}
/*========================================================================================================= 790 */
@media screen and (max-width:790px) {
    .objeto {
        height: 152px;
        grid-template-rows: 82px 70px;
        grid-template-columns: 100%;
        grid-template-areas: "obj_info"
                             "make_forma";
    }
    .objetoSim {
        height: 82px;
        grid-template-rows: 82px;
        grid-template-columns: 100%;
        grid-template-areas: "obj_info";
    }
    .obj_info {
        grid-template-rows: 7px 25px 25px 25px;
        grid-template-columns: 21%  37%  42%;
        grid-template-areas: "obj_imagen  .           ."
                             "obj_imagen  obj_nombre  obj_precioA"
                             "obj_imagen  obj_extra   obj_precioB"
                             "obj_imagen  obj_marca   obj_precioC";
        
    }
    .make_forma {
        grid-area: make_forma;
        width: 100%;
        height: 100%;
        display: grid;
        justify-content: center;
        align-content: center;
        grid-template-rows: 31px 39px;
        grid-template-columns: 35%  35%  30%;
        grid-template-areas: "mk_cantidad  mk_pack   mk_stock"
                             "mk_cantidad  mk_total  mk_carrito";
    }
    /* --------------------------------------------------- Imagen_Box */
    .obj_imagen img { height: 82px;}
    /* ------------------------------------------------------- NOMBRE */
    .obj_nombre {   font-family: Roboto; font-size: 18px;  }
    .obj_extra {    font-family: Roboto; font-size: 18px;  }
    .Oextra {       font-family: Roboto; margin-right: 8px;    }
    .obj_marca {    font-family: Roboto; font-size: 18px;    }
    /*-------------------------------------------------------- Precio  */
    .obj_precioA {
        background: #FFF;
        border-bottom:2px solid #EEE;
        grid-template-columns: 54% 4% 42%;
    }
    .obj_precioB {
        background: #FFF;
        border-bottom:2px solid #EEE;
        grid-template-columns: 54% 4% 42%;
    }
    .obj_precioC {
        background: #FFF;
        border-bottom:2px solid #EEE;
        grid-template-columns: 54% 4% 42%;
    }
    .empaqueP {
        font-family: Roboto;
        font-size: 15px;
    }
    .fcantidad {
        font-family: Roboto;
        font-size: 12px;
    }
    .fsoles {
        font-family: Roboto;
        font-size: 12px;
    }
    .fentero {
        font-family: Roboto;
        font-size: 16px;
    }
    .fdecimal {
        font-family: Roboto;
        font-size: 15px;
    }
    /*-------------------------------------------------------- Pack  */
    .mk_pack a{
        font-family:Roboto;
        font-size:19px; 
    }
    .mk_stock {
       font-size:16px; 
    }
    .mk_carrito img { height: 37px; }
    /*------------------------------------------------------ Total  */
/* -------------------------------------------------------- Total */
    .tsoles {
        font-size: 18px;
    }
    .tentero {
        font-size: 25px;
    }
    .tdecimal {
        font-size: 23px;
    }
}