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

@font-face {
    font-family: alkatra;
    src: url(fuentes/Alkatra-VariableFont_wght.ttf);
}

body {  
     /* background: linear-gradient( 180deg,
    rgba(255, 33, 140, 1) 16%,
    rgba(255, 255, 255, 1) 84%);  */
  /* background: linear-gradient(
    90deg,
    rgba(212, 0, 255, 1) 12%,
    rgba(255, 91, 3, 1) 96%
  );
  background-blend-mode: normal; */
    background: linear-gradient(
      360deg,
      rgba(255, 138, 210, 1) 12%,
      rgba(255, 102, 77, 1) 84%
    );
    background-blend-mode: normal;
}

#contenedor {
    width: 95%;
    margin: .5em auto;
    padding-bottom: 1em;
    background-color: #a22;
}

/* #contenedor1 {
    width: 95%;
    margin: .5em auto;
    padding-bottom: 1em;
    background: linear-gradient(
      90deg,
      rgba(212, 0, 255, 1) 12%,
      rgba(255, 91, 3, 1) 96%
    );
    background-blend-mode: normal;
} */

/* #header {
    background: linear-gradient(
      90deg,
      rgba(212, 0, 255, 1) 12%,
      rgba(255, 91, 3, 1) 96%
    );
    background-blend-mode: normal;    
} */

header {
    /* background: linear-gradient(
        180deg,
        rgba(77, 118, 255, 1) 9%,
        rgba(255, 244, 140, 1) 52%,
        rgba(77, 118, 255, 1) 93%
      );
    } */
    background-color: rgb(95, 0, 0);
    /* background: linear-gradient(
      270deg,
      rgba(0, 0, 0, 1) 12%,
      rgba(255, 91, 3, 1) 96%
    ); */
}

#logo {
    /* margin-left: 1em; */
    margin: 0 auto;
    width: 20em;
    display: block;
}

/* #titulo {
    position: relative;
    display: inline-block;
    top: -2.7em;
    font-family: 'Lobster';
    margin-left: 1em;
    text-shadow: #000 1px 1px 1px;
    font-size: 2em;
    color: #800;
} */

#buscar {
    width: 30vw;
    padding: 1em;
    border-radius: 5px;
    border: none;
    position: absolute;
    top: 4em;
    left: 25%;
}

span {
    padding-left: 5px;
}

#articulo {
    text-align: center;
    /* padding: 1em; */
}

#contenido {
    /* padding: 2em; */
}

.img {
    height: 40vh;
    max-width: 300px;
    width: auto;
    margin: 0 1em 1em 0;
    display: inline-block;
    opacity: .88;
    border: #000 1px solid;
    border-radius: 1em;
    transition: all .3s;
}

.img:hover {
    opacity: 1;
}

#muffins {
    margin-right: 0;
}

footer {
    margin: auto;
    padding: 1em;
    color: black;
    text-align: center;
    background-color: #a22;
    width: 95%;
    font-family: alkatra;
}

a {
    text-decoration: none;
}

.producto {
    width: 65vw;
    display: block;
    border: #800 dashed 3px;
    margin: 0 auto;
}

.ttl-pdt {
    text-align: center;
    color: purple;
    text-shadow: #000 2px 2px 2px;
    font-family: 'Times New Roman', Times, serif;
    font-size: 2em;
}

.precio, .precio a{
    text-align: center;
    color: #a22;
    font-family: alkatra;
    transition: all .2s;
}

.precio a:hover {
    font-size: 1.05em;
}

.descripcion {
    margin: 0 1em;
    font-size: 1em;
    font-family: alkatra;

}

.descripcionnn {
    margin: 0 1em;
    font-size: 1em;
    font-family: alkatra;
    text-align: center;

}

.icono {
    position: relative;
    top: .3em;
    height: 1.5em;
    transition: .2s;
}

.descripcionn {
    color: #000;
    margin: 0 1em;
    font-size: 1em;
    font-family: alkatra;
    text-align: center;
    transition: all .3s;
}

.descripcionn:hover {
    color: #00D10D;
}

#icon {
    position: fixed;
    bottom: 1em;
    right: 1em;
    z-index: 20;
    height: 2em;
}

#formulario {
    padding: 1em;
}

.input {
    display: block;
    padding: 1em;
    border: none;
    margin: 2em auto;
    width: 75%;
    box-shadow: #000 2px 2px 5px;
}

#enviar {
    font-family: alkatra;
    font-size: 1.1em;
    padding: .1em;
    cursor: pointer;
    background-color: #000;
    color: #fff;
    border-radius: 2em;
    transition: all .4s;
}

#enviar:hover {
    background-color: #00D10D;
    color: #000;
}

.titulo-f, .titulo-f a {
    font-family: alkatra;
    display: block;
    background-color: rgba(0, 0, 0, .8);
    color: #f88;
    margin: .5em 0;
    text-align: center;
}

.titulo-c {
    font-family: alkatra;
    display:block;
    color: black;
    background: linear-gradient(
      90deg,
      rgba(212, 0, 255, 1) 12%,
      rgba(255, 91, 3, 1) 96%
    );
    background-blend-mode: normal;
    width: 30%;
    margin: .5em auto;
    text-align: center;
    border-radius: 20px;
    padding: .5em;
    transition: all .2s;
}

.titulo-c:hover {
    /* color: #F553F3; */
    background: linear-gradient(
        270deg,
        rgba(212, 0, 255, 1) 12%,
        rgba(255, 91, 3, 1) 96%
      );
      background-blend-mode: normal;
    border-radius: 25px;
}

.p-f, #p-e {
    border-radius: 5px;
    display: block;
    font-size: 1em;
    font-family: alkatra;
    width: 72.5%;
    color: #000;
    text-decoration: none;
    text-align: center;
    margin: 1em auto;
    padding: 3px;
    background-color: #F00583;
    box-shadow: black 2px 2px 5px;
    transition: all .3s;
}

.p-f:hover {
    background-color: orangered;
}

.p-n {
    background: linear-gradient(
    180deg,
    rgba(240, 5, 131, 1) 12%,
    /* rgba(230, 3, 255, 1) 12%, */
    rgba(104, 7, 179, .7) 84%
    /* rgba(144, 0, 255, 0.7) 84% 
    rgba(255, 131, 0, 1) 12%, */);
    font-size: 1em;
    font-family: alkatra;
    margin: 0 2em 4em 2em;
    border-radius: 1em;
    padding: 1em;
    transition: all .7s;
}

.contactos {
    display: inline-block;
    width: 12em;
    margin: 0 3em 1em 0;
    padding: 3em;
    background-color: #F00583;
    border-radius: 1em;
    border: #a22 solid 2px;
    transition: all .3s;
}

.contactos:hover {
    background-color: orangered;
}

#contactos {
    text-align: center;
}

#tiktok {
    margin-right: 0;
}

.p-c {
    font-family: alkatra;
    font-size: 1.3em;
    text-shadow: #000 1px 1px 1px;
    text-align: center;
    color: #800;
}

.i-contactos {
    display: block;
    margin: 0 auto;
    height: 2.5em;
}

.contactos-f {
    display: inline-block;
    margin: 0 1em 1em 0;
    padding: .5em;
    background-color: #F00583;
    border-radius: 1em;
    border: #a22 solid 2px;
    transition: all .3s;
}

.contactos-f:hover {
    border: #000 solid 1.5px;
    background-color: #F553F3;
}

.c-f {
    font-family: alkatra;
    font-size: .8em;
    text-shadow: #000 1px 1px 1px;
    text-align: center;
    color: #800;
}

.i-f {
    display: block;
    margin: 0 auto;
    height: 1.5em;
}

#ig {
    display: none;
}

#nombre {
    margin-left: -.5em;
    margin-bottom: -1em;
    text-align: left;
}

#mapa {
    display: block;
    width: 95%;
    height: 50vh;
    margin: 0 auto;
}

.icon-nav {
    height: 1em;
    margin-left: .3em;
    position: relative;
    top: 3px;
}

.img4 {
    display: block;
    width: 50%;
    height: auto;
    margin: 0 auto;
}









li {
    list-style: none;
}

/* .main-nav {
    position: sticky;
    top: 0;
    z-index: 20;
} */

 .main-menu /*, .main-menu li ul */{ 
    /* margin-top: -1em; */
    list-style: none;
    opacity: .8;
    display: flex;
    align-items: center;
    flex-direction: column;
    background-color: rgba(173, 0, 0, .8);
    z-index: 20;
    transition: all .2s;
}

.main-menu:hover {
    opacity: 1;
}

@media screen and (min-width: 612px) {
    .main-menu { flex-direction: row; }


}

.titulo-c {
    width: 50%;
}

.menu-vertical {
    display: none;
    position: absolute;
}

.menu-vertical:hover {
    display: block;
}

.main-menu__item {
    padding: .4em;
    float: left;
    /* transition: all .3s; */
}

.main-menu li ul {
    display: none;
}

/* .main-menu li:hover > ul {
    display: block;
} */

.main-menu__item:hover {
    box-shadow: black 1px 1px 5px;
}

.main-menu_link {
    color: #000;
    text-transform: uppercase;
    font-family: alkatra;
    text-decoration: none;
}

me encanta que me des la razon 









 @media all and (min-width:600) and (max-width:1023px){

    .img {
        width: 85%;
        margin: 0 auto;
        height: auto;
        margin-bottom: 1em;
        display: block;
    }

    .img3 {
        width: 80%;
        height: auto;
    }
    
    #muffins {
        margin: 0 auto;
    }
    
.titulo-c {
    width: 70%;
}

    .producto {
        width: 85vw;
        height: auto;
    }

    #contenido {
        padding: 1em;
    }
}

@media all and (max-width:599px) {

    header {
        border-radius: 1em 1em 0 0;
    }

    #logo {
        width: 60vw;
    }
    
    .titulo-c {
        width: 80%;
    }

    .img3 {
        width: 85%;
        height: auto;
    }

    #buscar {
        left: 40%;
        top: 3em;
        width: 45vw;
        padding: .8em 1em;
    }

    #contenedor {
        border-radius: 1em;
    }

    .producto {
        width: 75vw;
        height: auto;
    }
    
    #contenido {
        padding: 0;
    }

    .contactos {
        display: block;
        margin: 1em auto;
        padding: 1em;
    }
    
    #tiktok {
        margin-right: auto;
        margin-left: auto;
    }

    .img {
        opacity: 1;
        width: 100%;
        margin: auto;
        height: auto;
        margin-bottom: 1em;
        display: block;
    }

    #muffins {
        margin-right: auto;
    }
}












/* 
#articuloo {
    text-align:;
    padding: 1em;
} */

.ttl-pdtt {
	margin-left: 2em;
	color: black ;
	font-family: Georgia;
    transition: all .2s;
}

.ttl-pdtt:hover {
    color:#13006a;
}


.article {
	margin-bottom: 15px;
	background: #800;
	box-shadow: 5px 5px 5px rgba(0,0, 0, 0.5);
	margin: 2%;
}

.img1 {
	height: 200px;
	opacity: .8;
	margin: 5px 0px 5px 10px;
	box-shadow: 2px 2px 10px #000;
	transition: all .5s;	
}
.img1:hover {
	height: 210px;
	opacity: 10;
}

.img2 {
	height: 200px;
	margin: 5px 0px 5px 2em;
	box-shadow: 2px 2px 10px #000;
    border-radius: 5px;
}

.img2:hover {
	box-shadow: 2px 2px 10px #F00583;
    border-radius: 7px;
}


.img3 {
	height: 500px;
	display: block;
	margin: auto;
	box-shadow: 5px 5px 10px #000;
}