/*------------fuentes-----------------------*/
@font-face{    
    font-family:jost;
    src: url(fuentes/static/Jost-ExtraLight.ttf);
}
@font-face{    
    font-family:jost-bold;
    src: url(fuentes/static/Jost-Bold.ttf);
}
body{
   font-family: jost;
   background-color: #f4f4f4;
   display: flex;   
   flex-direction: column;        
   justify-content: center;  
   align-items: center;                          
   height: 100%; 
   width: 100%;
   max-width: 500px;  
    margin: 0 auto; /* Centra el contenedor principal horizontalmente */
   box-sizing: border-box;          
}
   
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;     
}
    
    /*---------------------------HEADER Y NAV BAR-----------------------*/
    header{        
        display: flex;  
        position: sticky;  
        top: 0;    
        align-items: center;    
        justify-content: center;
        background-color: rgb(64, 165, 212);
        padding: 0.5rem;
        gap: 1rem;
        width: 100%;              
    }
    header img{           
        width: 5rem;
        height: auto;        
    }
    header h3{   
        font-family: jost-bold;            
        color: #2A3D5B;  
          text-align: center; 
          width: max-content;          
    }  
    header h5{               
        color: #2A3D5B;
        text-align: center;
        font-family: jost-bold;       
       font-size: 1rem;
    } 
    .iconoQuienesSomos{
        display: flex;          
        flex-direction: column;
        align-items: center; 
        justify-content: center;
        text-align: center;         
    }    
    .iconoQuienesSomos a{
        text-decoration: none;        
        color: #2A3D5B;        
        display: flex;
        flex-direction: column;
        align-items: center; 
        justify-content: center;  
        font-family: jost-bold;    
    }
    .iconoQuienesSomos img{
        width: 5rem;
        height: auto;
        border-radius: 50%;
    }  
    /*--------------------------FIN HEADER Y NAV BAR------------------------*/

    /*--------------------------CONTENEDOR PRINCIPAL----------------------- */
    .contenedorPrincipal{
       display: flex;
       flex-direction: column; 
       justify-content: center;
       align-items: center;
       width: 100%;
    }
    /*-----------------------FIN CONTENEDOR PRINCIPAL---------------------- */

    /*--------------------------CUADRICULA---------------------------------*/
        .containerCuadricula{
            display: flex;
            flex-direction: column;  
            justify-content: center;                                                    
            overflow: hidden;        
            margin-top: 0.5em; 
            margin-bottom: 0.5em;        
            justify-content: center;
            align-items: center; 
            padding-bottom: 1em; 
            width: 100%;          
        }    
        .titulo{
            font-family: jost;            
            color: #2A3D5B;  
            text-align: center;            
        }

        .seccion{
            font-family: jost-bold;
            display: flex;  
            justify-content: center;  
            align-items: center;            
            background-color: #2A3D5B; 
            color: rgb(228, 20, 214); 
            width: 95%; 
            height: 2.5em; 
            margin-top: 1em; 
            border-radius: 0.5em; 
            box-shadow: 2px 2px 5px 5px rgba(0, 0, 0, .5);  
        }  
        .tarjeta{
            display: flex;
            flex-direction: column;
            border-radius: 0.5em;
            border: 2px solid darkgray;
            overflow: hidden; 
            box-shadow: 5px 5px 2px 2px rgba(0, 0, 0, .5);  
            width: 88%;  
            margin-top: 1em; 
                 
        }    
        .tarjeta:hover{
            box-shadow: 6px 5px 5px 5px rgba(0, 0, 0, .5); 
            border-color: red;
        }
        .productoPrecio{
            display: flex;
            justify-content: space-between;                       
        }
        .contImagenProducto{
            display: flex;                   
            padding: 0.5em;
            background-color: white;            
            height: 15em;                                        
        }
        .contImagenProducto img{              
            height: 100%;/* Ocupa el 60% de la altura de la celda */
            margin: auto; /* Centra la imagen vertical y horizontalmente */
            object-fit: cover; /* Ajusta la imagen para cubrir la celda */ 
                        
        }
        .imgProducto{
            border-radius: 30px; /* Bordes redondeados a una imagen generada por IA que salio sin bordes */
            height: 100%;/* Ocupa el 60% de la altura de la celda */
            max-width: 95%;            
        }
        .contSubtitulos { 
            background-color: #2A3D5B;           
            padding: 0.5em 0.5em;            
            text-align: left; 
            font-size: 1rem;             
            color: white;             
            max-width: 100%; /* Establece el ancho máximo del contenedor */
            
            text-overflow: ellipsis; /* Agrega puntos suspensivos (...) al texto desbordado */
                               
        }
        .contSubtitulos h3{
            color: rgb(228, 20, 214);
            text-align: center;
            margin-bottom: 0.5em;
        } 
        .tarjeta p{
            font-size: 0.7rem;
            margin-left: 1em;  
            text-align: justify;          
        }
    /*---------------------------------FIN CUADRICULA--------------------------------*/

    /*--------------------------------------MAPA-------------------------------------*/
    .mapa{
        display: flex;  
        justify-content: center;  
        align-items: center;
        margin-top: 1em;    
        width: 90%;                         
        box-shadow: 2px 0vw 10px 10px rgba(0, 0, 0, .5);
        }  
    /*-------------------------------------FIN MAPA----------------------------------*/

     /*-----------------------------------FOOTER-------------------------------------*/
     footer{  
        position: relative;    
        background-color: rgb(64, 165, 212);
        height: 5rem;
        color: white;
        display: flex;    
        justify-content: center;
        align-items: center;      
        gap: 0.5rem; 
        margin-top: 2em;   
        width: 100%;       
        }
        footer a{
            display: flex;
            color: rgb(228, 20, 214);
            font-family: jost-bold;
            font-size: 1.2rem;
            align-items: center;
            text-decoration: none;       
        }
        footer img{
            width: auto;
            height: 4rem;            
        }         
    /*----------------------------------FIN FOOTER---------------------------------*/