/* Estilos Generales */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

*{
    border: 0;
    padding: 0;
    box-sizing: border-box;
}
:root{
    --amarillo:#ffa531;
    --azul:#f69619;
    --agua:aquamarine;
}
ul{
    list-style: none;
}

a{
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    color:var(--azul);
}

p {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
  }

#img-fondo{
   
    background-image:url("https://info.outletestufas.es/img/chimeneaa.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
#body{
    background-image:url("https://caparroz.es/img/metal.jpg");
    background-position:100% 100%;
}

  /* icono subir */

  .arrow{
    display:none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 90vh;
    right: 2rem;
    max-width: 70px;
    border-radius: 50%;
    background-color:rgba(255, 255, 255, 0.246);
    color:white;
    font-size: 2rem;
    padding: 1.3rem 1.7rem;
    /* animation: subir 1s 3s infinite ;
    -webkit-animation: subir 1s 3s infinite ; */
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.arrow.display{
    display:flex;
}
.arrow i{
    animation:dedo 1s 3s infinite;
    -webkit-animation:dedo 1s 3s infinite;
}

@keyframes subir {
    0% {
        transform: translatey(0rem);
        -webkit-transform: translatey(0rem);
        -moz-transform: translatey(0rem);
        -ms-transform: translatey(0rem);
        -o-transform: translatey(0rem);
}
        33% {
            transform: translatey(.5rem);
            -webkit-transform: translatey(.5rem);
            -moz-transform: translatey(.5rem);
            -ms-transform: translatey(.5rem);
            -o-transform: translatey(.5rem);
            }

            50% {
                transform: translatey(1rem);
                -webkit-transform: translatey(1rem);
                -moz-transform: translatey(1rem);
                -ms-transform: translatey(1rem);
                -o-transform: translatey(1rem);
}

75% {
    transform: translatey(.5rem);
    -webkit-transform: translatey(.5rem);
    -moz-transform: translatey(.5rem);
    -ms-transform: translatey(.5rem);
    -o-transform: translatey(.5rem);
}

100% {
    transform: translatey(0rem);
    -webkit-transform: translatey(0rem);
    -moz-transform: translatey(0rem);
    -ms-transform: translatey(0rem);
    -o-transform: translatey(0rem);
}



}

@keyframes dedo {
    0% {
        transform: translatey(0rem);
        -webkit-transform: translatey(0rem);
        -moz-transform: translatey(0rem);
        -ms-transform: translatey(0rem);
        -o-transform: translatey(0rem);
}
        33% {
            transform: translatey(.5rem);
            -webkit-transform: translatey(.5rem);
            -moz-transform: translatey(.5rem);
            -ms-transform: translatey(.5rem);
            -o-transform: translatey(.5rem);
            }

            50% {
                transform: translatey(1rem);
                -webkit-transform: translatey(1rem);
                -moz-transform: translatey(1rem);
                -ms-transform: translatey(1rem);
                -o-transform: translatey(1rem);
}

75% {
    transform: translatey(.5rem);
    -webkit-transform: translatey(.5rem);
    -moz-transform: translatey(.5rem);
    -ms-transform: translatey(.5rem);
    -o-transform: translatey(.5rem);
}

100% {
    transform: translatey(0rem);
    -webkit-transform: translatey(0rem);
    -moz-transform: translatey(0rem);
    -ms-transform: translatey(0rem);
    -o-transform: translatey(0rem);
}



}


/*  menu principal de stilo movil web */
/*  tiene que tener mas de +1200px   */

    

/* .menu-web hace referencia el menu lateral ocuto/visto  apciones izquierdo */
            .menu-web{
                z-index: 100;
                display: flex;
                justify-content:space-between;
                align-items: center;
                padding: 2rem;
                max-height: 80px;
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                transition:all  0.5s linear 0.1s;
                -webkit-transition:all  0.5s linear 0.1s;
                -moz-transition:all  0.5s linear 0.1s;
                -ms-transition:all  0.5s linear 0.1s;
                -o-transition:all  0.5s linear 0.1s;
                background-color: rgba(255, 255, 255, 0.573);
 }
               

            .menu-web.off{
                transform: translateY(-500px);
                background-color:transparent;
                -webkit-transform: translateY(-500px);
                -moz-transform: translateY(-500px);
                -ms-transform: translateY(-500px);
                -o-transform: translateY(-500px);
}

            .menu-web.solid{
                transform: translateY(0px);
                background-color:rgb(0, 0, 0);
                -webkit-transform: translateY(0px);
                -moz-transform: translateY(0px);
                -ms-transform: translateY(0px);
                -o-transform: translateY(0px);
                
}




.menu-web #burger{
    
    font-size: 300%;
    transition: color .2s ease-out .1s;
    color: var(--amarillo);
    -webkit-transition: color .2s ease-out .1s;
    -moz-transition: color .2s ease-out .1s;
    -ms-transition: color .2s ease-out .1s;
    -o-transition: color .2s ease-out .1s;
}
.menu-web i{
    transition: color .3s ease-out .1s;
    -webkit-transition: color .3s ease-out .1s;
    -moz-transition: color .3s ease-out .1s;
    -ms-transition: color .3s ease-out .1s;
    -o-transition: color .3s ease-out .1s;
}

.menu-web #burger:hover, .menu-web i:hover{
    color:var(--azul);
}











section.footer{

    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
min-height: 500px;
}


section.footer .logo{
    
    background-color: yellow;
}
section.footer .logo img{
    max-width: 400px;

}


section.footer .diseno{
    text-align: center;
   
    background-color: rgba(255, 255, 255, 0.261);

}
section.footer .diseno p{
    width: 300px;
    max-width: 300px;
    color: red;

}