html { height: 100%;} 

 
BODY {
        font-family :  verdana,Arial,  "Helvetica Neue","Droid Sans", Helvetica,sans-serif;
        font-size : 12px;
        color :  #333333;
        background-color: #FFF;
        margin-top : 0px;
        margin-bottom : 0;
        margin-left : 0px;
        margin-right : 0; 
        height : 100%;   
        } 
         
            a:link {
            text-decoration : none; 
            outline : none;
            color: #000;
            }
            a:visited {
            text-decoration : none; 
            outline : none;
            color: #000;
            }
            a:active {
            font-family : verdana;             
            outline : none;
            }
            a:hover {
            text-decoration : none; 
            outline : none;
            font-weight: bold;
            }
/**************************************************************************************************************/
   .cuerpo_general {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ocupa todo el alto de la ventana */ 
  }
  .div-contenido {
    flex-grow: 1; /* Para que el contenido ocupe el espacio disponible */
    padding: 20px; 
  }
  .pie_pagina { 
     margin-top: auto; /* ”Este es el truco para posicionarlo abajo! */
     background-color: #A25345;
  }             
/**************************************************************************************************************/
.menuprincipal {
                width: 200px;
                height: 200px;
                cursor: pointer;
               }

.menuprincipal:hover { 
                    width: 205px;
                    height: 205px;
               }

.menufijo {
           border:1px solid #C0C0C0;
           background-color: #D5EAF8;
           cursor: pointer;
           vertical-align: central;
          }

.menufijo:hover {
           border:1px solid #333333;
           background-color: #000080;
           color: #FFFFFF; 
           font-weight: bold;
           vertical-align: text-bottom;
          }
          

.vercarrito {
            width: 30px; 
            height: 30px; 
            background-color: #FFFF00;
            cursor: pointer;
            padding: 5px;
            }
.vercarrito:hover {
            background-color: #99CCFF;
            }    

 .vercarrito2 {
            width: 30px; 
            height: 30px; 
            background-color: #C0C0C0;
            cursor: pointer;
            }
.vercarrito2:hover {
            background-color: #99CCFF;
            }    

 .vercarrito3 {
            width: 20px; 
            height: 20px;  
            cursor: pointer;
            }
            
.vercarrito3:hover {
            background-color: #99CCFF;
            }  
 
.aceptacarrito {  
            cursor: pointer;
            }
.aceptacarrito:hover {
            background-color: #99CCFF;
            }                                
/**************************************************************************************************************/
.esquina     
          {
             -webkit-border-radius: 5px; /* en motores webkit Chrome y Safari*/   
             -moz-border-radius :   5px; /*en Firefox */              
              border-radius:        5px; /* En Opera e IE9 serķa */    
} 
.esquina10  ,.menuprincipal:hover   
          {
             -webkit-border-radius: 10px; /* en motores webkit Chrome y Safari*/   
             -moz-border-radius :   10px; /*en Firefox */              
              border-radius:        10px; /* En Opera e IE9 serķa */    
} 

.esquinasuperior {
                     border-radius: 10px 10px 0px 0px;
                     -moz-border-radius: 10px 10px 0px 0px;
                     -webkit-border-radius: 10px 10px 0px 0px;
                }

.transitorio  ,.menuprincipal:hover  
              ,.vercarrito
              ,.vercarrito:hover 
              ,.vercarrito3
              ,.vercarrito3:hover
              ,.aceptacarrito:hover
              ,.menufijo
              ,.menufijo:hover
              
               
            {    -webkit-transition:all .5s ease-out;  /* Chrome y Safari */
                  -o-transition:all .5s ease-out;  /* Opera */
                  -moz-transition:all .5s ease-out;  /* Mozilla Firefox */
                  -ms-transition:all 1s ease-out;   /* Internet Explorer */
                  transition:all .5s ease-out;  /* W3C */  
            }


.sombra     
         ,.menuprincipal:hover
         ,.vercarrito3:hover
         ,.aceptacarrito:hover
        {        
        -webkit-box-shadow: 3px 3px 4px 1px #808080;/* en motores webkit Chrome y Safari*/     
        -moz-box-shadow:    3px 3px 4px 1px #808080; /* en Firefox*/ 
         box-shadow:        3px 3px 4px 1px #808080;/* en Opera */
         z-index: 9999;
        }   


  
                
.sombra_interior {
                    -webkit-box-shadow: inset 6px 6px 14px -2px rgba(0,0,0,0.75);
                    -moz-box-shadow: inset 6px 6px 14px -2px rgba(0,0,0,0.75);
                     box-shadow: inset 6px 6px 14px -2px rgba(0,0,0,0.75);
                }   

.sombra_interior_pk {   -webkit-box-shadow: inset 2px 4px 3px 1px rgba(0,0,0,0.75);
                        -moz-box-shadow: inset 2px 4px 3px 1px rgba(0,0,0,0.75);
                        box-shadow: inset 2px 4px 3px 1px rgba(0,0,0,0.75);
                        }     
 .rota     
         ,.menuprincipal:hover
         ,.vercarrito3:hover
         ,.vercarrito:hover
         ,.aceptacarrito:hover
           { transform:rotate(10deg);
            -ms-transform:rotate(10deg); /* IE 9 */
            -webkit-transform:rotate(10deg); /* Opera, Chrome, and Safari */
             }       


  .lupa_uno{
    transform: scale(var(--escala, 1));
    transition: transform 0.25s;
  }
  .lupa_uno:hover{
    --escala: 2;
    cursor:pointer;
  }  
/*------------------------------------------------------------------------------------------------*/
 
.ver_menu { display:block; }
.ocultar_menu { display:none; } 

 
.cambiaimagen { 
          background-image: url('../imagenes/punto_a.png');
          background-repeat: no-repeat;
          background-size: 15px 15px; 
          background-color: #fff;
          color: #986C31; 
          cursor: pointer;
        }
.cambiaimagen:hover {
          background-image: url('../imagenes/punto_b.png');
          background-repeat: no-repeat;
          background-size: 15px 15px;
          background-color: #fff;
          color: #008000; 
          font-weight: bold;
        }  
          
.menupie {float: left;  
          height: 15px; 
          margin-left: 20px;  
          background-color: #FFFFFF;
          width: 150px;
          font-size: 11px;}  
.menupie:hover {
                background-color: #F8D692;   
                  }   
                  
.cabeza2 {  color: #000;
            font-size: 12px;
             
           }