estilo.css

/* Configuraciones generales-----------------------------------------------*/

* {
    margin:0;
	padding:0;
    box-sizing:border-box;
}

html {
    scroll-behavior: smooth;
  }

img {
    max-width: 100%;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color:#f5f0ed;
    line-height: 1.5;
    max-width: 100%;
    position: relative;
     }

h1 {
    font-family: 'Open Sans', sans-serif;
    font-weight: bold;
    font-size: 35px;
    text-align: center;
    color: #f5f0ed;
    line-height: 1;
}

h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight:bold;
    font-size: 28px;
    text-align: center;
    color: #f5f0ed;
    line-height: 1.2;
}

p { 
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
}



/* Header ----------------------------------------------------------------*/
header {
    background-image: url(imagenes/imagenes/Fondo1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 450px;
    min-width: 400px;
}

.lanzador-menu {
    background-image: url(imagenes/imagenes/nav.png);
    background-color: #d03b40;
    position: relative;
    float: right;
    border: 4px solid #d03b40;
    width: 33px;
    height: 32px;
    top: 25px;
    right: 20px;
}

.logo {
    background-image: url(imagenes/imagenes/Logo.png);
    background-repeat: no-repeat;
    width: 160px;
    display: inline-block;
    position: relative;
    height: 50px;
    left: 20px;
    top: 15px;
}

.fondo1{
    padding: 73px 0px;
}

.titulo1{
    max-width: 400px;
    margin: 0px auto;
}

.sub_1 {
    width: 100px;
    height: 1.5px;
    margin: 0 auto;
    background-color: #F5f0ed;
    margin-top: 25px;
}

.text1 {
    margin: 0px auto;
    color: #f5f0ed;
    max-width: 400px;
    margin-top: 25px;
    padding: 0px 25px;
}

ul{
    list-style: none;
}

.navegacion a{
    text-decoration: none;
    color: #f5f0ed;
    margin: 0px 2px;
    font-size: 10px;
    display: block;
    transition: .3s;
}

.navegacion a:hover {
    text-decoration: underline;
}

.navegacion li{
    transition: 1s background-color  1s;            
    }

/* Caja 2 (Roja) -----------------------------------------------------------------------------------------------------------*/

.caja2{
    background-color: #d03b40;
    min-height: 300px;
    min-width: 400px;
    padding: 45px 20px;
}

.subtitulo1{
    color: #ded6c0;
    max-width: 400px;
    position: relative;
    margin: 0px auto;
    padding: 0px 40px;
}

.text2{
    color: #ded6c0;
    max-width: 400px;
    position: relative;
    top: 20px;
    margin: 0px auto;
    padding: 0px 40px;
}

/* Caja 3 (Beige) ------------------------------------------------------------------------------*/

.caja3{
    background-color: #ded6c0;
    min-height: 300px;
    min-width: 400px;
    padding: 65px 20px;
}

.subtitulo2{
    color: #d03b40;
    max-width: 400px;
    position: relative;
    margin: 0px auto;
    padding: 0px 40px;
}

.text3{
    color: #d03b40;
    max-width: 400px;
    position: relative;
    top: 20px;
    margin: 0px auto;
    padding: 0px 40px;
}

/* Caja 4 (Beige) ------------------------------------------------------------------------------*/

.caja4{
    background-image: url(imagenes/imagenes/Fondo2.jpg);
    font-family: 'Open Sans', sans-serif;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 450px;
    min-width: 400px;
    padding: 80px 0px;
}

.titulo2{
    max-width: 400px;
    position: relative;
    margin: 0px auto;
    padding: 0px 30px;
}

.sub_2 {
    width: 100px;
    height: 1.5px;
    margin: 0 auto;
    position: relative;
    background-color: #F5f0ed;
    top: 30px;
}

.text4 {
    color: #f5f0ed;
    max-width: 400px;
    position: relative;
    top: 60px;
    margin: 0px auto;
    padding: 0px 40px;
}

.boton_productos{
    position: relative;
    top: 85px;
    text-align: center;
    width: 280px;
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: #F5f0ed;
    margin: 0px auto;
    border: 3px solid #F5f0ed;
    padding: 10px 15px;
    font-size: 16px;
    transition: .3s;
}

.boton_productos:hover {
    color: #d03b40;
    border: 3px solid #d1cdca;
    transition: .3s;
}

/* Productos ---------------------------------------------------------------- */

/* Panes ---------------------------------------------------------------- */

.panes{
    background-color: #f5f0ed;
    padding: 0px 30px;
    min-width: 400px;
    padding-top: 20px;
}

.icono_pan{
    background-image: url(imagenes/imagenes/Icono1.png);
    background-repeat: no-repeat;
    background-position: center 25px;
    background-size: 100px;
    min-height: 135px;
}

.titulo_pan{
    color: #3c3c3b;
    position: relative;
    padding-top: 5px;
}

.text_pan{
    color: #3c3c3b;
    padding: 5px 1px;
    margin: 0px auto;
    max-width: 400px;
}

/* Tartas ---------------------------------------------------------------- */

.tartas{
    background-color: #f5f0ed;
    padding: 0px 30px;
    min-width: 400px;
}

.icono_tartas{
    background-image: url(imagenes/imagenes/Icono2.png);
    background-repeat: no-repeat;
    background-position: center 25px;
    background-size: 100px;
    min-height: 135px;
}

.titulo_tartas{
    color: #3c3c3b;
    position: relative;
    padding-top: 5px;
}

.text_tartas{
    color: #3c3c3b;
    padding: 5px 1px;
    margin: 0px auto;
    max-width: 400px;
}

/* Dulces ---------------------------------------------------------------- */

.dulces{
    background-color: #f5f0ed;
    padding: 0px 30px;
    min-width: 400px;
}

.icono_dulces{
    background-image: url(imagenes/imagenes/Icono3.png);
    background-repeat: no-repeat;
    background-position: center 25px;
    background-size: 100px;
    min-height: 135px;
}

.titulo_dulces{
    color: #3c3c3b;
    position: relative;
    padding-top: 5px;
}

.text_dulces{
    color: #3c3c3b;
    padding: 5px 1px;
    margin: 0px auto;
    max-width: 400px;
}
    
/* ingredientes ---------------------------------------------------------------- */
.ingredientes{
    background-color: #f5f0ed;
    padding: 0px 30px;
    min-width: 400px;
    padding-bottom: 30px;
}

.icono_ingredientes{
    background-image: url(imagenes/imagenes/Icono4.png);
    background-repeat: no-repeat;
    background-position: center 25px;
    background-size: 100px;
    min-height: 135px;
}

.titulo_ingredientes{
    color: #3c3c3b;
    position: relative;
    padding-top: 5px;
}

.text_ingredientes{
    color: #3c3c3b;
    padding: 5px 1px;
    margin: 0px auto;
    max-width: 400px;
}

/* contacto ---------------------------------------------------------------- */

.caja5{
    background-color: #ded6c0;
    min-height: 300px;
    padding: 70px 30px;
    min-width: 400px;
}

.subtitulo3{
    color: #d03b40;
}

.text5{
    color: #d03b40;
    padding-top: 15px;
    margin: 0px auto;
    max-width: 400px;
}

.mail{
    color: #d03b40;
    text-align: center;
    font-weight: 800;
}

/* ubicacion ---------------------------------------------------------------- */
.caja6{
    background-color: #d03b40;
    min-height: 300px;
    padding: 70px 30px;
    min-width: 400px;
}

.subtitulo4{
    color: #ded6c0;
}

.text6{
    color: #ded6c0;
    padding-top: 15px;
    margin: 0px auto;
    max-width: 400px;
}

.direccion{
    color: #ded6c0;
    text-align: center;
    transition: .3s;
}

.direccion:hover {
    color:#c9c3b4;
}

.footer{
    background-color:#241d1b;
    min-height: 60px;
    padding: 12px 30px;
    min-width: 400px;
}

.terminos_condiciones{
    color: #ded6c0;
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
    font-size: 10px;
}

@media screen and (min-width: 600px){
    .text1,
    .text2,
    .text3,
    .text4,
    .text_pan,
    .text_tartas,
    .text_dulces,
    .text_ingredientes,
    .text5,
    .text6{
        max-width: 500px;
    }        
}

@media screen and (min-width: 768px){
    .text1,
    .text2,
    .text3,
    .text4,
    .text_pan,
    .text_tartas,
    .text_dulces,
    .text_ingredientes,
    .text5,
    .text6{
        max-width: 600px;
    }        
}

@media screen and (max-width:1023px){
    .js .navegacion{
        max-height: 0px;
        overflow: hidden;
        transition: max-height .5s;
        position: absolute;
        top: 56px;
        left: 30px;
        right: 30px;
        background-color:#d03b40;
    }
    
    .js .navegacion a{
        padding: 5px 10px;
        color: #ded6c0;
        border-top: 1px solid rgba(255, 255, 255, .4);
    }
    
    .js .navegacion.menu-desplegado{
        max-height: 250px;
    }
}

@media screen and (min-width: 1024px){
    
    .lanzador-menu{
        display: none;
    }
    
    .navegacion{
        position: absolute;
        top: 25px;
        right:15px;
    }
    
    .navegacion li{
        display: inline-block;
        margin-right: 2px;
        font-weight: 600;
    }
    
    .caja2,
    .caja3 {
        float: left;
        width: 50%;
        min-width: 380px;
        padding: 90px 35px;
    }  
    
    .caja4 {
        margin-top: 300px;
        padding: 116px 0px;
    }

    .text1,
    .text4 {
        max-width: 500px;
        font-size: 12px;
    }  
    
    .text2,
    .text3,
    .text_pan,
    .text_tartas,
    .text_dulces,
    .text_ingredientes,
    .text5,
    .text6 {
        max-width: 400px;
        font-size: 12px;
    }     
}

    
@media screen and (min-width: 1200px){ 
    h1 {
        font-size: 43px;
    }

    h2 {
        font-size: 29px;
    }
    
    .text1,
    .text4 {
        max-width: 500px;
        font-size: 15px;
    }  
    
    .text2,
    .text3,
    .text5,
    .text6 {
        max-width: 400px;
        font-size: 15px;
    } 
    
    .text_pan,
    .text_tartas,
    .text_dulces,
    .text_ingredientes{
        max-width: 400px;
        font-size: 15px;
        text-align: inherit;
        padding-top: 2px;
    }
    
    .caja2,
    .caja3 {
        padding: 60px 35px;
    }  
    
    .caja4 {
        margin-top: 299px;
        padding: 75px 0px;
    }
    
    .caja5,
    .caja6 {
        float: left;
        width: 50%;
        min-height: 370px;
        padding: 110px 35px;
    }
    
    .panes,
    .tartas,
    .dulces,
    .ingredientes{        
        float: left;
        width: 50%;
        padding: 0px;
        padding-left: 30px;
        padding-bottom: 30px;
        font-size: 21px;
    }
    
    .panes,
    .tartas{
        padding-top: 55px;
    }
    
    .dulces,
    .ingredientes{
        padding-bottom: 30px;
    }
    
    .icono_pan,
    .icono_tartas,
    .icono_dulces,
    .icono_ingredientes{
        float: left;
        width: 50%;
        background-position: left 0px;
        background-size: 150px;
        min-height: 187px;
        margin-right: -85px;
    }
    
    .titulo_pan,
    .titulo_tartas,
    .titulo_dulces,
    .titulo_ingredientes{
        padding-bottom: 0px;
        text-align: inherit;
        padding-left: 190px;
        font-size: 25px;
    } 
    
    .footer{
        padding: 10px 25px;
        margin-top: 858px;   
    }
}