@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Bartle&family=Bungee&family=Gravitas+One&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Meie+Script&display=swap');



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;

}

body {
    max-width: 500px;
    height: auto;
    overflow-x: hidden;
    font-family: "Inter", sans-serif;
    
   
}

/*header movil*/

header {
    width: 100vw;
    height: 13vh;
    background: #0c0c0c;
    padding: 3vw 5.5vw;
    position: fixed;
    z-index: 100;
    margin-top: 0;
    backdrop-filter: blur(10px);
     
}

.encabezado {
     
    .menu-desptok {
        display: none;
    }
}

.movil {
    width: 100%;    
    display: flex;
    justify-content: space-between;
    padding: 3.5vw 0;

    .logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3vw;

        img {

            width: 10vw;
            height: 10vw;
        }


        p {
            color: #eeeeee;
            font-size: 1.2rem;
            font-family: "BBH Sans Bartle", sans-serif;
            font-weight: 400;
            line-height: 0.7;

            b {
                color: #7f9aa3;
                font-family: "Gravitas One", serif;
                font-size: 0.7rem;
                
            }
        
        }
    }
    

    button {
        border: none;
        background: transparent;
       

        img {
            width: 10vw;
            height: 10vw;
        }
    }


}

.menu-movil {
    
    width: 70%;
    height: 93vh;
    backdrop-filter: blur(10px);
    position: absolute;
    top: 0;
    right: 0;
    background: #121313f3;



    img {
        width: 12vw;
        height: 12vw;
    }

    ul {
        display: flex;
        justify-content: left;
        flex-direction: column;
        gap: 30px;
        padding: 6vw;
        font-size: 1.2rem;
        color: white;
        font-weight: 200;

        a {
            color: whitesmoke;
        }

        #boton-cerrar {
            max-width: 3vw;
            max-height: 3vw;
            background: transparent;
            border: none;
        }


        #reservas {
            background: whitesmoke;
            width: 35vw;
            height: 9vw;
            width: 95%;
            height: 6vh;
            border-radius: 10px;
            filter: drop-shadow(3px 3px 3px #020202c5);
           
            a {
                color: #333;
                font-size: 1.1rem;
                font-weight: 600;
                text-align: center;
                padding: 4vw 10vw;
            }
        }
    }
}



.active{

    transform: translateX(100%); /* menú oculto fuera de pantalla */
    transition: transform all 4s ease-out;
    
}
        


/*main*/


main {
    width: 100%;
    overflow-x: hidden;
    background: whitesmoke;
}

/*banner*/

.hero{

    background-image: url(./imagenes/auto-movil.webp);
    background-repeat: no-repeat;
    background-size: cover;
    height: 90vh;
    width: 103vw;
    margin-top: 5vh;
    z-index: 0;
   
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 3vh;
    width: 97%;
    height: 88vh;
    padding: 24vh 8vw;
    text-align: left;
    background: #000000af;
    
      
}


.presentacion {

    
   

    h1 {
        font-size: 1.8rem;
        color: #f5f5f5;
        margin-bottom: 20px;
       
    }

    b {
        color: #7f9aa3;
        
    }

    h2 {
        font-size: 1.1rem;
        color: white;
        font-family: "Montserrat", sans-serif;
        font-weight: 500;
        line-height: 1.5;
       
    }

}


.redes {
     
    
    display: flex;
    justify-content: left;
    align-items: left;
    text-align: left;
    gap: 2vw;


    a {

        img {
            width: 36px;
            height: 36px;
            
        }

        .tiktok {
            width: 42px;
            height: 42px;
            margin-top: -3px;
        }

    } 

}

.btn-reservas {

    button {
        width: 97%;
        height: 7vh;
        border-radius: 8px;
        border: 1px solid #ffffff;
        background: whitesmoke;
        margin-top: 30px;
        filter: drop-shadow(3px 3px 3px #020202c5);
        

        a {
            color: #232323;
            font-size: 1.3rem;
            font-weight: 600;
            padding: 2vh 10vw;
            cursor: pointer;
        }
    }
}



/*servicios*/

.titulo {
     font-size: 1.7rem;
     text-align: center;
     margin-bottom: 6vw;
     color: #333;
}

.servicios {
    width: 100%;
    margin: 5vw 0;
    padding: 8vw;
   

   
    p {
        font-size: 1.2rem;
        color: #333;
        text-align: justify;
       
      
    }

    .iten-servicio {
         margin-top: 10vw;

    }

}
   



.lista{
        
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 8vw;
    margin-top: 10vw;

}  

.card{
    background: white;
    border-radius: 15px;
    box-shadow: 0 6px 16px #0000001a;
    padding: 10vw 5vw;
    width: 100%;
    height: auto;
    text-align: left;
    transition: transform all 4s ease;
    overflow: hidden;


    

    img {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
        background: #0e0d0d;
        border-radius: 5px;
        padding: 3vw;

    }                
                    
    h4 {
        color: #62767e;
        margin-bottom: 5px;
        font-size: 1.3rem;
    }

    p {
        font-size: 1.05rem;
        color: #555;
        margin: 5px 0 20px 0;
    }


    li {
        text-align: left;
        font-size: 1rem;
        color: #333;
        line-height: 1.8;   
        
           
    }

    .extra-items {
        display: none;
               
    } 
                                      
                
            
}   

 
.card:hover {

    .extra-items {
    display: block;
    }

    .mas {
        display: none;
    }

}


.ver-mas {
 
  color: #333;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  margin-top: 10px;
  transition: 0.3s;
}


/*Galeria*/

.videoteca {
    width: 100%;
    padding: 4.5vw;
    margin-top: 5vw;

    h3{
        text-align: center;
        font-size: 1.7rem;
        margin: 8vw auto 5vw auto;
        padding-left: -5vw;

    }

    p {
        width: 96%;
        color: #333;
        margin-bottom: 10vw;
        padding: 0 3.2vw;
        font-size: 1.1rem;
        text-align: justify;
       
     
    }

}

.carrusel {

    width: 100vw;
    height: auto;
    margin-bottom: 10vw;
    


    ul {
        
        display: flex;
        align-items: center;
        justify-content: left;
        overflow: auto;
        gap: 3.5vw;
        margin-right: 10vw;

           
       
    }

}


/*reseñas*/

.reseñas {
    width: 100%;
    height: 77vh;
    padding: 10vw 6vw;
    background: #e2e2e2;
    z-index: 0;
    margin-top: 2vw;

    h3 {
        margin-top: 3vw;
    }
   

    button {
        
        width: 98%;
        height: 6vh;
        background: #161515;
        border-radius: 10px;
        margin-bottom: 7vw;
     
       

        a {
            font-size: 1.1rem;
            color: whitesmoke;
            padding: 3vw 10vh;
            cursor: pointer;
        }

    }

}

 .reviews {
        width: 100%;
        height: 300px;
        margin: 12vw 0 3vw 0;
        z-index: 50;
        
            
    }



/*diferenciales*/

.diferenciales {
    width: 100%;
    height: auto;
    margin: 5vw 0;
   
}

.items {
    width: 100%;

    ul {
        display: flex;
        justify-content: space-between;
        padding:  5vw 10vw;

        li {
            width: 45%;
            height: auto;
            background: #050505d5;
            color: whitesmoke;
            padding: 5vw;

            font-size: 1.1rem;
            border-radius: 10px;
            border: 2px solid #7f9aa3;
        }

        .experiencia {
            display: none;
        }
    }
}



/*Ubicación datos-datos*/

.ubicacion {
    width: 100%;
    padding: 5vw;
    margin-bottom: 10vh;
}

.flex {
    display: flex;
    flex-direction: column;
    justify-content: left;
    gap: 5vw;
    margin-top: 10vw;

    iframe {
        width: 300px;
        height: 300px;
        margin-bottom: 10vh;
        margin: 0 4vw ;
    }
}

.datos {
    

    ul {
        display: flex;
        justify-content: left;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 10vw;
        margin: 7vw 4vw 4vw 4vw;
    }
        

    .encabezado {
        display: flex;
        align-items: center;
        justify-content: left;
        gap: 2vw;
        margin-bottom: 2vw;

       

        img {
            width: 48px;
            height: 48px;
            background: #0e0d0d;
            padding: 3vw;
            border-radius: 8px;
        }


    }

    p {
        color: #333;
    }
}


/*whatsapp*/


.whatsapp {
    width: 5vw;
    height: 5vw;
    text-align: right;
    margin-right: 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2vw;


      
    
   a {
    position:fixed;
    bottom: 9vh;
    right: 3vw;
    top: 88vh;
  
        img {
            width: 60px;
            height: 60px;
        }
   }

  
}



/*footer*/

footer {
    width: 100%;
    height: auto;
    text-align: center;
    color: whitesmoke;
    background: #0e0d0d;    
   
   

}

.pie {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5vh;
}



.sociales a {
   margin-top: 13px;

    img {
        width: 40px;
        height: 40px;

    }
    

}

.tiktok {
        width: 48px;
        height: 48px;
        margin-top: -4px;
        
}



.sociales h3 {
   font-weight: 300;
   margin: 2vw;
}

.creditos a {

    color: #cccbcb;
    cursor: pointer;
       
}


.creditos {
    
    font-weight: 300;
    font-size: 1rem;
    padding-bottom: 4vh;

    h3 {
        font-weight: 200;
        font-size: 1.2rem;
    }

    
}

.autor {
        width: 100%;
        padding: 10px;
        border-top: 1px solid #525252;
        padding: 2vh 0;
        font-size: 1.1rem;

         a {
        color:  #c8c7c7;
         }
}


/*RESPONSIVO TABLET*/

@media (min-width: 500px) and (max-width: 900px) {

    body {
        max-width: 900px;

    }

    /*header*/

    header {
        height: 14vw;
        padding: 4vw 7vw;
    }


    
    .movil {
        padding: 0;
        align-items: start;

        .logo {
            gap: 1.5vw;

            img {
                width: 5vw;
                height: 5vw;
            }


            p {
                color: #eeeeee;
                font-size: 1.6rem;
                font-family: "BBH Sans Bartle", sans-serif;
                font-weight: 400;
                line-height: 0.7;

                b {
                    color: #7f9aa3;
                    font-family: "Gravitas One", serif;
                    font-size: 0.9rem;
                    
                }
        
            }




        }

       
        
        button {
                        
            img {
                width: 5vw;
                height: 5vw;
            }
        }

    }


    /*menu desplegable movil*/

    .menu-movil {
        
        width: 50%;
        height: 95vh;
    
        img {
            width: 6vw;
            height: 6vw;
        }

        ul {
        
            gap: 35px;
            padding: 6vw;
            font-size: 1.3rem;

            #boton-cerrar {
                max-width: 3vw;
                max-height: 3vw;
            }


            #reservas {

                background: whitesmoke;
                width: 40vw;
                height: 5vh;
                border-radius: 10px;
            
                a {
                
                    font-size: 1.3rem;
                    padding: 4vw 10vw;
                }
            }
        }
    }




    /*MAIN*/

   
    /*banner*/

    .hero {

        background-image: url(./imagenes/auto-banner.webp);
        background-repeat: no-repeat;
        background-size: cover;
        height: 87vh;
        width: 103vw;
        margin-top: 0;
        z-index: 0;

              
    }


    .presentacion {
        width: 100%;
        height: 105vh;
        padding: 0 5vw;
       
        h1 {
            max-width: 80%;
            font-size: 2.5rem;
            color: #f5f5f5;
            margin: 40px 0 20px 0;
        
        }

       
        h2 {
            width: 80%;
            font-size: 1.5rem;
            font-weight: 200;
            
        }



    }


    .redes {
        
        padding: 0 5vw;
        display: flex;
        justify-content: left;
        text-align: left;
        gap: 3vw;


        a {

            img {
                width: 42px;
                height: 42px;
                
            }

            .tiktok {
                width: 47px;
                height: 47px;
            }

        } 

    }



    .btn-reservas{ 
          padding: 0 5vw;
    
        button {
                width: 80%;
                height: 7vh;
                border-radius: 8px;
                border: 1px solid #ffffff;
                background: whitesmoke;
            

                a {
                    color: #232323;
                    font-size: 1.5rem;
                    font-weight: 600;
                    padding: 2vh 12vw;
                    cursor: pointer;
                }
        }

    }

   

    .titulo {
        font-size: 2rem;
        text-align: center;
        margin-bottom: 5vw;
        color: #333;
    }


    /*servicios*/


  

    .servicios {
        width: 100%;
        margin: 6vw 0;
        padding:  7vw 10vw;
    

    
        p {
            font-size: 1.5rem;
            color: #333;
            font-weight: 300;

            b {
               font-size: 400;
               color: #161515;
            }
        }

        
    }
    

    .card{
       
        padding: 10vw 10vw;
            

        img {
            width: clamp(9vw, 10vw, 12vw);
            height: clamp(9vw, 10vw, 12vw);
            margin-bottom: 15px;
            border-radius: 10px;
        }                
                        
        h4 {
            color: #647d86;
            margin-bottom: 9px;
            font-size: 1.7rem;
        }

        p {
            font-size: 1.4rem;
            color: #555;
            margin: 5px 0 20px 0;
        }


        li {
            text-align: left;
            font-size: 1.1rem;
                     
        }
                          
                    
                
    }   

   
    .ver-mas {
    
      transition: tranform 2s ease-in-out;
    }

   
    /*Galeria*/

    .videoteca {
        width: 100%;
        padding: 0 10vw;
        

        h3{
            font-size: 2rem;
            margin: 8vw auto 5vw auto;
            padding-left: -5vw;

        }

    }

    .carrusel {
     
       

        p {
            width: 80%;          
            text-align: justify;
            font-size: 1.4rem;
        
        }


        ul {
                        
            gap: 1vw;
            margin-right: 10vw;
                  
        }

    }


    /*reseñas*/

    .reseñas {

        height: 63vh;

        padding: 10vw 7vw 6vw 7vw;
     
    
        button {
            
            width: 100%;
            max-height: 7vh;
                 

            a {
                font-size: 1.2rem;
                
            }

        }

    }

    .reviews {
            width: 100%;
            height: 305px;
               
                
    }


    /*diferenciales*/

   
    .items {
        width: 100%;
        margin-top: 7vw;

        ul {
            padding: 2vw 7vw;
            gap: 2vw;

            li {
                width: 35%;
                padding: 5vw 4vw;
                font-size: 1.3rem;
            }

            .experiencia {
                display: block;
            }
        }
    }

   
    /*Ubicación datos-datos*/

    .ubicación {
          padding: 0 1vw;

    }


    .flex {
        margin-top: 10vw;
      
        gap: 3vw;

        iframe {
            width: 100%;
            height: 400px;
            padding-right: 6vw;
        }
    }

    .datos {

         padding: 0;  

        .encabezado {
                   

            img {
                width: clamp(8vw, 10vw, 12vw);
                height: clamp(8vw, 10vw, 12vw);
               
            }

            h3 {
                font-size: 1.5rem;
            }

        }

        p {
            color: #333;
            font-size: 1.1rem;
        }
    }


   /*whatsapp*/


    .whatsapp {
        text-align: right;
        margin-right: 5vw;
        
        a {
            position:fixed;
            bottom: 20vw;
            right: 3vw;
            top: 89vh;
        
                img {
                    width: 10vw;
                    height: 10vw;
                }
        }

    }
 


}



/*Responsive DESPTOK*/

@media (min-width: 901px) {

    body {
        max-width: 1480px;
        height: auto;

    }

    /*header*/

    header {
        position: fixed;
        width: 100%;
        height: 9vw;
        padding: 1vw 0;  
        top: -3vw;   
    
    }
       
    .encabezado {

        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 4vw;

            
        .movil {
            
            .logo {
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1vw;

                img {
                    width: 3.5vw;
                    height: 3.5vw;
                }

                p{
                    font-size: 1.5rem;
                    color: #e0e0e0;

                    b{
                        font-size: 0.9rem;
                    }
                }
            }    

            button {
                    display: none;
            }



            
        }

        .menu-movil {
            display: none;

        }

        
    }


    .encabezado .menu-desptok {
        
        display: block;
        
            ul {

                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: right;
                gap: 4vw;
                font-size: 1.2rem;

                button {
                    width: 12vw;
                    height: 3vw;
                    text-align: center;
                    border-radius: 8px;

                    a {
                        color: #333;
                        font-size: 1.3rem;
                    }

                   
                }

                button:hover {

                    background: #7f9aa3;

                    a {
                        color: white;
                    }
                }

                a{
                    color: whitesmoke;
                    font-size: 1.2rem;
                   
                }

                a:hover {

                   color: #7f9aa3;
                }
                    
            }



    }


    .active {

    display: none;
    }
    
       
    
    /*MAIN*/

    main {
        background: #eeeeee;
    }
    
        /*banner*/

    .hero {

        background-image: url(./imagenes/auto-banner.webp);
        background-repeat: no-repeat;
        background-size: cover;
        height: 120svh;
        width: 100vw;
        margin-top: -6vw;
        z-index: 0;
         
            
    }


    .container {
        display: flex;
        flex-direction: column;
        justify-content: left;
        gap: 3vh;
        width: 100%;
        height: 120vh;
        padding: 47vh 8vw;
        text-align: left;
        background: #000000af;
         
    }


    .presentacion {

        width: 50%;

        h1 {
            font-size: 2.5rem;
            color: #f5f5f5;
            margin-bottom: 20px;
        
        }

        b {
            color: #7f9aa3;
            
        }

        h2 {
            font-size: 1.6rem;
            color: white;
            font-family: "Montserrat", sans-serif;
            font-weight: 300;
            line-height: 1.5;
        
        }

    }


    .redes {
        
        
        display: flex;
        justify-content: left;
        align-items: left;
        gap: 1vw;  

        a {

            img {
                width: 36px;
                height: 36px;  
                
            }

            .tiktok {
                width: 42px;
                height: 42px;
                margin-top: -3px;
            }

        } 

    }

    .btn-reservas {

        button {
            width: 43%;
            height: 8vh;
            border-radius: 8px;
            border: 1px solid #ffffff;
            background: whitesmoke;
            margin-top: 30px;
        
            

            a {
                color: #232323;
                font-size: 1.3rem;
                font-weight: 600;
                padding: 2vh 10vw;
                cursor: pointer;
            }
        }

        button:hover {
             background: #7f9aa3;

                    a {
                        color: white;
                    }
        }
    }


        .titulo {
            font-size: 1.7rem;
            text-align: center;
            margin-bottom: 5vw;
            color: #333;
        }


        /*servicios*/


        .titulo {
            font-size: 2rem;
            
            
        }

        .servicios {
            width: 100%;
            margin: 2vw 0;
            padding: 7vw;
        

        
            p {
                font-size: 1.5rem;
                color: #3e3e3e;
                font-weight: 400;
                font-family: "inter", sans-serif;
                text-align: center;

                b {
                    color: #161515;
                    font-weight: 600;
                }
            }

            
        }

        .lista {
           flex-direction: row;
           flex-wrap: wrap; 
           gap: 4vw;
        }
        

        .card{
            
            
            padding: 10vw 7vw;
            background: white;
            border-radius: 15px;
            box-shadow: 0 6px 16px #0000001a;
            padding: 3vw 2vw;
            width: 30%;
            height: auto;
            text-align: left;
            transition: transform all 4s ease;
            overflow: hidden;    

            img {
                width: 4vw;
                height: 4vw;
                padding: 1vw;
                margin-bottom: 15px;
                border-radius: 10px;
            }                
                            
            h4 {
                color: #647d86;
                margin-bottom: 9px;
                font-size: 1.6rem;
            }

            p {
                font-size: 1.3rem;
                color: #555;
                margin: 5px 0 20px 0;
                text-align: left;
                font-weight: 300;
            }


            li {
                text-align: left;
                font-size: 1.1rem;
                        
            }
                            
                        
                    
        }   

    
        .ver-mas {
        
        transition: tranform all 4s ease-in-out;
        }

    
        /*Galeria*/

        .videoteca {
            width: 100%;
            padding: 0 7vw;
            margin-top: 0;
            

            h3{
                font-size: 2rem;
                margin: 0 auto 2.5vw auto;
                padding-left: -5vw;
                text-align: center;

            }

            p {
                width: 100%;        
                font-size: 1.5rem;
                padding: 0 15%;
                text-align: center;
               
            }

        }


        .carrusel {
           padding: 0;
           margin-top: -3vw;
              
            ul {
                            
                gap: 1vw;
                margin-right: 10vw;
                padding: 0;
                    
            }

            li video {
                width: 400;
                height: 400;
            }

        }


        /*reseñas*/

        .reseñas {
            height: 103vh;
            padding: 3vw 7vw;
            margin-top: -3vw;
        
            button {
              
                width: 50%;
                height: 9vh;
                margin: 0 25%;
                text-align: center;
                
                                    

                a {
                    font-size: 1.2rem;
                    
                }

                a:hover {
                    color:#95b7c2;
                }

            }

        }

        .reviews {
                width: 100%;
                height: 290px;
                margin-top: 0;
                
                    
        }


        /*diferenciales*/

    
        .items {

            width: 100%;
            margin-top: 6vw;

            ul {
                padding: 2vw 7vw;
                gap: 3vw;
                justify-content: center;

                li {
                    width: 25%;
                    padding: 4vw 3vw ;
                    font-size: 1.1rem;
                    background: rgb(43, 47, 48);
                    border: none;
                    color: whitesmoke;
                    font-size: 1.8rem;
                    text-align: center;
                    border-radius: 15px;
                    filter: drop-shadow(3px 3px 3px #929292da);

                }

                li:hover {
                    color: #97bbc9;
                    filter: drop-shadow(3px 3px 4px #808080);
                }

                .experiencia {
                    display: block;
                }
            }
        }

    
        /*Ubicación datos-datos*/
        
        .ubicacion {
            margin-top: 7vw;
            padding: 0 5vw;

        }


        .flex {
            width: 100%;
            padding: 3vw 0;
            margin-top: -2vw;
            display: flex;
            flex-direction: row;
            align-items: start;
            justify-content: left;
            gap: 3vw;


            iframe {
                width: 550px;
                height: 620px;
                padding: 0;
            }
        }


  
        .datos {

             margin-top: -7vw;
                       
            ul {
                display: flex;
                justify-content: left;
                flex-direction: column;
                gap: 3.5vw;
                text-align: left;
                
            }
        

            .encabezado {
                display: flex;
                align-items: center;
                justify-content: left;
                gap: 1vw;
                margin-bottom: 1vw;
                padding-left: 0;

          

                img {
                    width: 50px;
                    height: 50px;
                    background: #0e0d0d;
                    padding: 1vw;
                    border-radius: 8px;
                    z-index: 50;
                }

            }

                h3 {
                    font-size: 1.5rem;
                }


                p {
                    color: #333;
                    font-size: 1.1rem;
                    margin-top: 0;
                }        
        }            
            


    /*whatsapp*/


    .whatsapp {
        text-align: right;
        margin-right: 5vw;
            
        a {
            position:fixed;
            bottom: 20vw;
            right: 3vw;
            top: 86vh;
            
            img {
                width: 5vw;
                height: 5vw;
            }

        }

    }


    /*footer*/

    footer {
        width: 100%;
        height: auto;
        text-align: center;
        color: whitesmoke;
        background: #0e0d0d;    
        padding:0;
        margin: 0;
    

    }

    .pie {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: left;
        align-items:first baseline;
        gap: 17vw;
        padding: 4vh 0;
   

    } 


    .sociales {
    margin-top: 0; 
    padding: 0;
    text-align: center;
    gap: 2vw;

    }


    .sociales img {

        width: 39px;
        height: 39px;
              
    
    }

       .sociales .tiktok {
            padding-top: 0.3vw;
            width: 46px;
            height: 46px;
        ;
            
        }

    

    .sociales h3 {

        font-weight: 300;
        margin: 1vw;
        font-size: 1.3rem;

    }



    .creditos {
        
    
        a {

            color: #cccbcb;
            cursor: pointer;
        }
        
    }


    .creditos {
        margin: 0;
        text-align: center;
        font-weight: 300;
        font-size: 1rem;
        

        h3 {
            font-weight: 200;
            font-size: 1.2rem;
        }

        p {
            margin-top: 10px;
        }

       
    }

    .autor {
        width: 100%;
        padding: 2vw 0;
        border-top: 1px solid #525252;
        margin-top: 2vh;
        color: #cccbcb;
        text-align: center;
        font-size: 1.1rem;
        font-weight: 200;

        a {
            color: #b1b1b1;

        }

        a:hover {
            color:#0999ac
        }

    }

    
}