@import url(reset.css);
@import url('https://fonts.googleapis.com/css2?family=Handlee&family=Montserrat:wght@400;700&display=swap');

/*
font-family: 'Montserrat', sans-serif;
font-family: 'Handlee', cursive;
color primario: #fa573a;
color secundario: #21242e;
--breakpoint-movil: 26.563em;
--breakpoint-tablet: 48.000em;
--breakpoint-desktop: 62.750em;

*/

:root {
    --color-principal: #fa573a;
    --color-secundario: #21242e;
    --ancho-maximo: 1100px;
    --fuentePrincipal: 'Montserrat', sans-serif;
    --fuenteSecundaria: 'Handlee', cursive;

}

*{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    font-family: var(--fuentePrincipal);
    font-size: 1em;
}

img {
    width: 100%;
    height: auto;
    display: block;
}

/*inicio header*/

.container {
    max-width: var(--ancho-maximo);
    margin: 0 auto;
}

.container-fluid{
    width: 100%;
}

header .nav_top {
    background-color: var(--color-secundario);
    padding: 20px 0;
}

.row{
    display: flex;
}

header .nav_top a{
    color: white;
    text-decoration: none;
    font-size: 120%;

}

header .nav_top span{
    display: none;
}

header .nav_top .row{
    justify-content: space-between;
}

header .nav_top .row div{
    padding: 0 10px;
}

/*OTRA MANERA DE SOLUCIONAR LA POSICION DE LOS ICONOS
header .nav_top .row div {
    width: 100%;
    text-align: center;
}*/

header .nav_top i {
    color: var(--color-principal);
}

header nav{
    padding: 20px;
}

header .logo{
    width: 30%;
    margin-right: 60%;

}

header .logo img{
    max-width: 150px;
}

header .hamburguesa{
    cursor: pointer;
    width: 10%;
    
}

header .hamburguesa div {
    border-top: 2px solid #aaa;
    margin: 0.625em;
    width: 1.875em;
}

header nav .row{
    flex-wrap: wrap;
}

/*OTRA SOLUCION PARA LA HAMBURGUESA CON FLEX

header .hamburguesa {
    cursor: pointer;
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

header .hamburguesa div {
    border-top: 2px solid #aaa;
    margin: 0.35em;
    width: 1.875em;
}

*/

header nav ul{
    width: 100%;
}


header nav ul li a{
    display: block;
    padding: 1.250em;
    text-align: center;
    text-decoration: none;
    border-bottom: 1px solid #aaa;
    color: #aaa;

}

header nav ul li a:hover{
    color: var(--color-principal);
}


header nav ul li .activo{
    color: var(--color-principal);
}

@media(min-width: 48.000em){
    header .nav_top span{
        display: inline;
    }
}

@media(min-width:62.750em){
    header .hamburguesa{
        display: none;
    }

    header .logo{
        width: 50%;
        margin-right: 0;
    }

    header nav ul {
        width: 50%;
        display: flex;
        align-items: flex-end;
    }

    header nav ul li{
        width: 60%;
    }

    header nav ul li a{
        padding: 0.8em 0;
        text-align: center;
        border-bottom: 0px;
    }
}

/*inicio hero*/

.hero {
    background-image: url(../images/fondo.jpg);
    height: 35em;
    background-size: cover;
    background-position: center;
    background-color: #777777;
    background-blend-mode: multiply;
    /*EJEMPLO PARA EL FLEX*/
    display: flex;
    
}

/*EJEMPLO CON FLEX*/
.hero>div {
    display:flex;
    flex-direction: column;
    width: 80%;
    justify-content: center;

}
/*ejemplo sin flex
.hero>div{
    padding: 15% 3%;
*/


.hero h1{
    font-size: 2.5em;
    font-family: var(--fuenteSecundaria);
    color: white;
}

.hero h2{
    color: var(--color-principal);
    font-size: 1.5em;
    margin: 1em 0;
}

.hero p{
    font-size: 1.15em;
    color: white;
}

.button {
    display: inline-block;
    background-color: var(--color-principal);
    padding: 1.15em;
    color: white;
    text-decoration: none;
    border: 1px solid var(--color-principal);
    margin: 1em 0;
}
/*Para mover la flecha de ida y de vuelta*/
.button i{
    transition: transform 0.5s;
}

.button:hover{
    background-color: transparent;
    color: var(--color-principal);
}
/*para mover la flecha d0.5e ida y de vuelta*/
.button:hover i{
    transform: translateX(5px);
}

.hero .social li{
    display: inline-block;
    font-size: 2em;
    margin-right: 1em;
}

.hero .social a {
    color: white;
}

/*Inicio Main section ourservices*/

main section {
    padding: 2.125em 0;

}

main section h2 {
    color: black;
    font-family: var(--fuenteSecundaria);
    font-size: 2em;
    text-align: center;
}

main section h2 span {
    color: var(--color-principal);

}

main section .underline{
    position: relative;
    width: 5em;
    margin: 0 auto;
    color: var(--color-principal);
    font-weight: bold;
    margin-bottom: 2em;
}

main section .underline hr{
    border-color: var(--color-principal);
    position: absolute;
    top: -0.126em;
    width: 100%;
    
}

main section .underline span{
    text-align: center;
    display: block;
}

main section .row{
    flex-wrap: wrap;
    padding: 0 0.825em;
}

main section .row article{
    width: 100%;
    padding: 1.825em 0;
    border-bottom: 1px solid #aaa;
}

main section article div i{
    color: var(--color-principal);
    font-size: 2em;
    padding: 0.8rem;
    border: 2px solid var(--color-principal);
}

main section article .fa-truck{
    transform: rotateY(180deg);
}

main section article h3{
    font-weight: 700;
    margin: 1em 0;
}

.enlace{
    text-decoration: none;
    color: var(--color-principal);
    margin-top: 1em;
    display: block;
}

@media(min-width: 48.000em){
    main section .row article{
        width: 50%;
        padding: 1.825em 0.825em;
        border-bottom: 0px;
        border-left: 1px solid #aaa;
        margin-bottom: 1em;
    }
    main section .row article:nth-child(3){
        width: 100%;
    }
}

@media(min-width: 62.750em){
    main section .row article{
        width: 33.33%;
    
    }
    main section .row article:nth-child(3){
        width: 33.33%;
    }

}

/*Main section about us*/

main section .row .columna{
    border: 0;
}

main section .row .columna h4{
    margin-bottom: 1em;
    color: var(--color-principal);
}

main section .marco {
    border: 3px solid var(--color-principal);
    transform: rotateZ(10deg);
    transition: 0.5s;
    width: 85%;
    margin: 0 auto;
}

main section .marco img{
    transform: rotateZ(-10deg);
    transition: 0.5s;
}

main section .columna:hover .marco, main section .columna:hover img{
    transform: rotateZ(0deg);

}


@media(min-width: 48.000em){

    main section .row .columna{
        width: 50%;
    }

}

/*inicio footer*/

footer{
    background-color: var(--color-secundario);
    padding: 1.825em 0;
    text-align: center;
    
}

footer p, footer a {
    color: white;
}

footer a:hover {
    text-decoration: none;
}

@media(min-width: 48.000em){
    footer{
        text-align: left;
    }
}


/*Inicio seccion BLOG*/

/*ME VAS A TIRAR DE LAS OREJAS POR NO DECIR DE OTRO SITIO PERO NO ME SALEN LAS COLUMNAS*/

.contenedor_blog{
    max-width: 40%;
    margin: 0 auto;

}



main section .entrada_blog .imagen{
    margin: 0 auto;
    width: 300px;
    position: relative;
    display: flex;

    
}

main section .entrada_blog .fecha {
   background-color: rgba(250, 87, 58, 0.8);
   text-align: center;
   padding: 0.625em;
   width: 3.125em;
   height: 3.125em;
   position: relative;
   top: -12.480em;


}  

main section .entrada_blog .fecha p{
    font-weight: 700;
    color: white;
    
}

main .column{
    max-width: var(--ancho-maximo);
    margin: 0 auto;
    
    
}

.flex {
    display: flex;
    flex-wrap: wrap;
}

main .column article{
    padding: 0 0.825em;

    
}

main section div .entrada_blog {
  width: 300px;

}
    

main .column article h4{
    margin-bottom: 1em;
    color: var(--color-principal);
    font-weight: 700;
}

hr {
    background: var(--color-principal);
}


@media(min-width: 62.750em){
    .flex{
        flex-wrap: nowrap;
    }

    .contenedor_blog{
        max-width: 100%;
        margin: 0;
    
    }

    main .contenedor_blog .entrada_blog{
        padding: 0 ;
     }
    
   
}



/*INICIO SECCION MENU*/

main #menu {
    background-color: var(--color-secundario);

}

.contenedor_menu {
    max-width: 80%;
}

.blanco {
    color: white;
}

main section h3 {
    font-weight: 700;
    font-size: 1.750em;
}

.alinear{
    display: flex;
}

.order_now{
    display: inline-block;
    padding: 1em;
    color: var(--color-principal);
    text-decoration: none;
    font-weight: 700;
    margin: 1em 0;
    text-align: center;

}

.order_now i{
    transform: translateY(0.2em);
    border: 0;
}

.order_now:hover{
    background-color: transparent;
    color: var(--color-principal);
}
/*para mover la flecha de ida y de vuelta*/
.order_now:hover{
    transform: translateX(0.2em);
   
}

main section p.precio{
    color: var(--color-principal);
    font-weight: 700;
    font-size: 1.750em;
    padding: 1em;
    
    
}



section .container .nav_list ul {
    width: 100%;
}


section .container .nav_list ul li a{
    display: block;
    padding: 1.250em;
    text-align: left;
    text-decoration: none;
    color: white

}

section .container .nav_list ul li a:hover{
    color: var(--color-principal);
}

section .container .nav_list ul li a.activo:hover{
    color: var(--color-secundario);
}


section .container .nav_list ul li a.activo{
    background-color: var(--color-principal);
    border-radius: 10px;
}

.todayoffers {
    border-color: var(--color-principal);
    width: 5.500em;
    margin: 1em 0;
}

.encabezado_menu {
    margin-left: 5em;
}

.container .producto {
    max-width: 70%;
    margin: 0 auto;
    padding: 1em;
}

@media(min-width: 62.750em){
    .encabezado_menu {
        display: flex;
        flex-direction: column;
        width: 15%;
        height: 30%;
        position: absolute;
    }

    .today_hot_offers{
        margin: 5em 0;
        
    }
   

    .productos{
        display: inline-block;
        position: relative;
        left: 25%;
        height: 20%;
        width: 50%;
        padding-left: 10em;

    }

    .producto{
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        
    }

    .alinear {
        width: 900px;
        justify-content: center;
        position: absolute;
        left: 25em;
        margin-top: -2em;
        
    }

    .alinear_descripcion{
        width: 900px;
        justify-content: center;
        position: absolute;
        left: 31.750em;
        margin-top: 3em;
    }
}