/*RESTABLECIMIENTO BÁSICO*/

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

html, body{
    height: 100%;
}

h1{font-size:  3rem;}
h2{font-size: 2rem; color: gray; font-family: Arial, sans-serif; font-style: oblique;}
p{font-size: 1.5rem; font-family: Arial, sans-serif; color: gray;}
a{text-decoration: none;}

/*ESTILO DEL FONDO DE VIDEO*/

.video-back{
    position:fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

.video-back video{
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-back::after{
    content: '';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    
    background: rgba(0,0,0,0.5);
    z-index:1;
}

header{
    position: relative;
    z-index: 1;
    width: 100%;
    background-color: black;
    overflow: hidden;
}

.logo-principal{padding: .5rem; width: 50%; text-align: right; float: left; box-sizing: border-box;}
.caja-de-logos{width: 50%; float: left; padding: .5rem; box-sizing: border-box;}
.logo-fb,.logo-wa{float: left; padding: .5rem;}

menu{width:50%; margin: 1rem auto; text-align: center; overflow: hidden;}
menu p{width: 33%; float: left; background-color: white; padding: .5rem; border-radius: 20px;}

#promocion{
    width: 50%;
    margin: 1rem auto;
    background-color: red;
    padding: 1.5rem;
    text-align: center;
    position: relative;
}

#promocion h1{color: white; font-family: Arial, sans-serif; font-style: italic; text-shadow: 2px 2px 4px #000000;}
#promocion p{color: lightgoldenrodyellow; font-family: cursive; font-size: 2rem;}

.producto-promocion{ width: 50vw; margin: 0 auto; position: relative;}
.descripcion-producto-promocion{width: 50%; margin: 0 auto; background-color: white; text-align: left; line-height: 2rem; padding: 2rem;}
.descripcion-producto-promocion h2{text-align: center;}
.caja-productos-promocion{width: 100%; overflow: hidden; }

#linea-de-productos{width: 50%; margin: 0 auto; background-color: white; overflow: hidden;}
#linea-de-productos h2{text-align: center;}
#otros-productos{width: 50%; margin: 0 auto; background-color: white; overflow: hidden;}
.producto-portada{width: 33%; padding: 1rem; float: left; text-align: center;}
.producto-portada a{text-decoration: none;}

.contacto-wa{width: 50%; margin: 0 auto; background-color: black; text-align: center;  display: flex; align-items: center; justify-content: center; padding: 1rem;}
.contacto-wa p{display: inline-block;}
.contacto-wa img{width: 50px;}

.seccion-productos{
    width: 70%;
    margin: 3rem auto;
    background-color: black;
    padding: 1.5rem;
    text-align: center;
    position: relative;
}

.seccion-productos h1{color: white; font-family: Arial, sans-serif; font-style: italic; text-shadow: 2px 2px 4px #000000;}
.seccion-productos p{color: lightgoldenrodyellow; font-family: cursive; font-size: 2rem;}

#productos-musicales{width: 70%; margin: 0 auto;}
.duo{width: 50%; overflow: hidden; float: left; padding: 1rem; background-color: white;}
.duo p{background-color: white; text-align: center; padding: .5rem 0;}

.imagen-sola{width: 50%; margin: 0 auto; text-align: center;}

/*ZONA BAZAR*/
#bazar{width: 70%; background-color: black; margin: 0 auto; text-align: center;}
#bazar img{width: 50%;}
.frase{width: 70%; padding: 1.5rem 0; text-align: center; margin: 1rem auto; background-color: red;}
.frase p{color: white; font-size: 2rem; font-style: italic;}
#productos-bazar{width: 70%; margin: 3rem auto; overflow: hidden; text-align: center; background-color: white;}
.tercio{width: 33%; float: left; padding: 1rem; }

/*PIE DE PAGINA*/
footer{width: 100%; overflow: hidden; background-color: black; margin: 2rem auto;}
.formas-contacto{width: 75%; box-sizing: border-box; padding: 1rem; margin: 0 auto;}
.formas-contacto{text-align: left;}
.formas-contacto p{font-size: 1rem; color: white; line-height: 2rem;}
.formas-contacto a{text-decoration: none;}
hr{width: 30%; display: inline-block; height: .2rem;}
.whats{display: flex; justify-content: left; align-items: center;}
.whats img{padding: .3rem;}
.whats p{font-size: 1.5rem;}


/*ESTABLECER LOS BREAKPOINTS*/

@media screen and (min-width: 320px){
    
    menu{width: 100%;}
    menu p{font-size: 1rem;}
    .logo-fb img{width: 40px;}
    .logo-principal img{width: 180px;}
    #promocion{width: 90%;}
    .seccion-productos{width: 90%;}
    .producto-promocion{width: 90%;}
    .frase{width: 90%;}
    .descripcion-producto-promocion{width: 90%;}
    .contacto-wa{width: 90%;}
    #linea-de-productos{width:90%;}
    #otros-productos{width: 90%}
    h1{1rem;}
    h2{1.5rem;}
    .contacto-wa p{font-size: 1rem;}
    
    .producto-portada p{font-size: 1.5rem;}
    #productos-musicales{width: 90%;}
    .duo{float: none; width: 100%;}
    .frase p{font-size: 1.5rem;}
    #productos-bazar{width: 90%;}
    .tercio{float: none; width: 95%; margin: 0 auto;}
    #bazar{width: 95%;}
    .producto-portada{width: 100%;}
    .imagen-sola{width: 90%; margin: 0 auto;}
}

@media screen and (min-width: 768px){
    
    menu{width: 90%;}
    menu p{font-size: 1.2rem;}
    .logo-fb img{width: 50px;}
    #promocion{width: 90%;}
    .seccion-productos{width: 90%;}
    .producto-promocion{width: 90%;}
    .descripcion-producto-promocion{width: 90%;}
    .frase{width: 90%;}
    .contacto-wa{width: 90%;}
    .contacto-wa p{font-size: 1.5rem;}
    #linea-de-productos{width:90%;}
    #otros-productos{width: 90%}
    .producto-portada p{font-size: 1.5rem;}
    #productos-musicales{width: 90%;}
    #productos-bazar{width: 90%;}
    .duo{float: none; width: 100%;}
    
    .tercio{width: 33%; float: left; padding: 1rem; }
    #bazar{width: 90%;}
    

}

@media screen and (min-width: 992px){
    
    menu{width: 80%;}
    menu p{font-size: 1.2rem;}
    .logo-fb img{width: 70px;}
    #promocion{width: 80%;}
    .seccion-productos{width: 80%;}
    .producto-promocion{width: 80%;}
    .descripcion-producto-promocion{width: 80%;}
    .frase{width: 80%;}
    .contacto-wa{width: 80%;}
    #linea-de-productos{width:80%;}
    #otros-productos{width: 80%}
    #productos-musicales{width: 80%; margin: 0 auto;}
    #productos-bazar{width: 80%; margin: 0 auto;}
    .duo{width: 50%; overflow: hidden; float: left; padding: 1rem; background-color: white;}
    .tercio{width: 33%; float: left; padding: 1rem; }
    #bazar{width: 85%;}
    
    .producto-portada{width: 33%; padding: 1rem; float: left; text-align: center;}
    .imagen-sola{width: 50%; margin: 0 auto; text-align: center;}

}

@media screen and (min-width: 1200px){
    
    menu{width: 70%;}
    menu p{font-size: 1.5rem;}
    .logo-fb img{width: 70px;}
    #promocion{width: 70%; border: 2px solid red;}
    .seccion-productos{width: 70%;}
    .producto-promocion{width: 70%;}
    .descripcion-producto-promocion{width: 70%;}
    .contacto-wa{width: 70%;}
    #linea-de-productos{width:70%;}
    #otros-productos{width: 70%}
    #productos-musicales{width: 70%; margin: 0 auto;}
    #productos-bazar{width: 70%; margin: 0 auto;}
    #bazar{width: 70%;}
    
}