/* VARIABLES: */
:root {
    /* FUENTES */
    --principal: 'Lora', serif;
    --secundaria: 'Open Sans', sans-serif;
    /* COLORES */
    --gris: #C9C9CA;
    --grisOscuro: #757476;
    --grisClaro: #A9A9AA;
    --blanco: #fff;
    --negro: #000;
    --marron: #9E8E8E;
    --fondo-contacto: #E9E1DC;
    --fondo-contacto2: #C7B4A8;
}
/* GLOBALES */
body {
    font-family: var(--secundaria);
}
.quitar-margen {
    margin-top: -15px;
}
@media (min-width: 1280px) { 
    body {
        margin: 20px 200px;
    }
}
@media (min-width: 1280px) { 
    footer {
        margin: 20px -200px;
    }
}
/* A PARTIR DE 769px SE EJECUTARÁ TODO DEL MQ. ANTES DE ESA CIFRA, NO */

@media (min-width: 768px) { 
    img {
        padding: 0;
    }
}
h1 {
    font-size: 30px;
    margin: 0;
}
h2 {
    font-size: 25px;
}
h3 {
    font-size: 20px;
}
h4 {
    font-size: 15px;
}
p {
    font-size: 15px;
}
@media (min-width: 768px) { 
    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 30px;
    }
    h3 {
        font-size: 20px;
    }
    h4 {
        font-size: 18px;
    }
}
h1 {
    margin-top: 25px;
    margin-bottom: 19px;
    margin-top: -30px;
}
@media (min-width: 375px) { 
    h1 {
        margin-top: -15px;

    }
}

h1 {
    text-align:center;
    font-weight: 500;
    color:rgb(95, 93, 93);
    text-transform: uppercase;
    font-family: var(--principal);
    
}
a {
    text-decoration: none;
    font-size: 20px;
    color: rgb(80, 77, 77);
   
}
/* NAVEGACION MENU PRINCIPAL Y HAMBURGESA */
.menu-principal {
    margin: 15px auto;
    display: none;
  }
@media (min-width: 1280px) { 
       
    .menu-principal {
    display: block;
    }
    .logo {
        margin-top: -20px;
    }
    .dir-contacto {
        margin-bottom: 25px;
    }

}

.menu-principal a {
    display: none;
    
}
/* CONTACTO - BOTON */
.icono-contacto {
    width: 15%; 
}
.boton-contacto1 {
    font-size: 12px;
}
.dir-contacto {
    display: block;
}
@media (min-width: 300px) {
    .barra {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        margin-bottom: -45px;
    }
    .hamburguesa .icono-menu{
        display: block;
    }
}
@media (min-width: 1100px) { 
    .hamburguesa, .icono-menu {
        display: none;
    }
    .menu-principal a {
        display: block;
        font-size: 20px;
    }
    .dir-contacto {
        grid-area: 2 / 3;
        grid-row: 1 / 3;
        margin-top: 15px;
    }
    .logo {
        margin-left: 50px;
    }
}
@media (min-width: 1280px) { 
    .barra {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
    .hamburguesa .icono-menu{
        display: none;
    }
    .logo-grid {
        grid-area: 1 / 2;
    }
    .dir-contacto {
        grid-area: 2 / 3;
        grid-row: 1 / 3;
        margin-top: 15px;
    }
    .menu-principal {
        margin-top: 25px;
    }

}
.boton-contacto1 {
    font-size: 18px;
}
@media (min-width: 768px) { 
    .icono-contacto {
        width: 10%;
    }   
}
/* diversos cambios en la barra y menu - media queries para vista pc */
.dir-contacto {
    display: none;
}
@media (min-width: 1280px) { 
    .menu-principal a {
        display: block;
    }
    /* cambio de tamaño de fuente */
    .menu-principal a {
        font-size: 17px;
    }
    .menu-hamburgesa {
        display: none;
    }
    .dir-contacto {
        display: block;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
}
.logo-centrado {
    margin-left: 5px;
    max-width: 100%;
    width: 80%;
    margin-bottom: 10px;
}
@media (min-width: 768px) { 
    .logo {
        margin-left: 95px;
    }
}
@media (min-width: 1280px) { 
    .logo {
        width: 50%;
        margin-left: 100px;
    }
}

.enlace-contacto {
    display: flex;
    justify-content: flex-end;
}

/* MENU PRINCIPAL */
.menu-principal {
    margin-top: 10px auto;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
}
/* MAIN */
.tam {
    padding: 11px;
}
.colchones-grid {
    padding-bottom: 0;
}
@media (min-width: 768px) { 
    .tam {
        padding: 0;
    }
}
.grid2 img, .grid4 img {
    margin-bottom: 2px;
}
@media (min-width: 768px) { 
    .grid2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 40px;
        margin-bottom: 40px;
        margin-top: 20px;
    }    
    .grid4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: 40px;
    }
}

.colchones-grid {
    width: 100%;
}
.ropa-cama-grid {
    width: 100%;
}
.grid4 img {
    width: 100%;
}
/* PRODUCTOS COLCHON */
.productos-inicio h2 {
    text-align: center;
    font-weight: 300;
    margin: 20px;
    font-size: 40px;
    color: var(--grisOscuro);
}
.producto h3, h4 {
    color: var(--grisClaro);
    font-weight: 400;
}
.producto h3, h4 {
    margin-left: 30px;
}
@media (min-width: 768px) { 
    .producto h3, h4 {
        margin-left: 0;
    }
}
.producto h3 {
    color: grey;
}
.producto h4 {
    margin-top: 0;
    margin-bottom: 25px;
}
/* PACKS */
.packs {
    width: 100%;
    display: none;
}
.packsMovil {
    display: block;
}
@media (min-width: 768px) { 
    .packs {
        display: block;
    }
    .packsMovil {
        display: none;
    }
}
/* PATROCINADORES */
.patrocinadores {
    width: 100%;
}
@media (min-width: 768px) { 
    .patrocinadores {
        margin-top: 30px;
    }
}
/* SERVICIOS WEB */
.servicios-web {
    width: 100%;
}
.opinionclientes {
    font-size: 30px;
    text-align: center;
    font-weight: 300;
    color: var(--grisOscuro);
    padding-top: 20px;
}
.huckla {
    text-align: center;
    font-weight: 300;
    color: var(--grisOscuro);
    padding: 20px;
    font-size: 40px;
}
@media (min-width: 768px) { 
    .huckla {
        font-size: 40px;
        margin: 20px;

    }
}
/* OPINIONES */
blockquote {
    text-align: right;
    font-weight: 600;
    font-size: 15px;
    margin: 20px;
}
.opinion p {
    margin-top: 30px;
    margin-left: 40px;
    margin-right: 40px;
    font-weight: 300;
}
.opinion-movil2 {
    display: none;
}

@media (min-width: 768px) { 
    .opinion {
        margin: 10px 10px;
    }
    .opinion p {
        font-size: 15px;
    }
    .opinion-movil2 {
        display: block;
    }
}


/******* BASES Y SOMIERES ********/


img {
    width: 100%;
}
.articulo {
    margin: 20px;
}
@media (min-width: 480px) { 
    .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1080px) { 
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media(min-width:768px){
    h3{
        margin-top: 20px;
        margin-bottom: 2px;
    }
}
h3 {
font-family: var(--secundaria);
margin-top: 10px;
margin-bottom: 2px;
color: var(--grisOscuro);
font-weight: 400;
}
p{
color: var(--grisOscuro);   
margin-top: 0px;
font-weight: 100;
font-size: 15px;
}
/* APARTADO SERVICIOS */
.servicios-movil {
    display: block;
}
.servicios-web {
    display: none;
}
@media (min-width: 768px) { 
    .servicios-movil {
        display: none;
    }
    .servicios-web {
        display: block;
    }
}
/* FOOTER */
.footer-index {
    background-color: var(--grisOscuro);
    padding-bottom: 20px;
    margin-bottom: -20px;
}
/* VISTA MOVIL */
.invisible {
    display: none;
}
.flex-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
}
footer {
    padding: 15px;
}
.logo-blanco {
    width: 80%;
    padding-top: 15px;
}
/* VISTA TABLET */
@media (min-width: 768px) { 
    .contenido-footer {
        display: flex;
        flex-direction: row-reverse;
    }
    .invisible {
        display: none;
    }
    .flex-footer {
        display: flex;
        flex-direction: column;
    }
    .logo-blanco {
        margin-right: 25px;
        width: 30%;
    }
}
/* VISTA PC */
@media (min-width: 1280px) {
    .flex-footer {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .logo-blanco {
        width: 15%;
        margin-left: 30px;
    }
    .invisible {
        display: block;
    }
    .flex2 {
        margin-top: 63px;
    }
    .invisible {
        margin-bottom: 111px;
    }
    .contenido-footer {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
    }
}

.blanco a {
    color: var(--blanco);
    display: flex;
    font-weight: 300;
    font-size: 13px;
    margin: 5px;
}

.blanco {
    padding: 10px;
}
.blanco h4{
    color: var(--blanco);
    text-transform: uppercase;
}
.blanco h5 {
    color: var(--blanco);
    font-weight: 300;
    font-size: 13px;
    margin: 5px;
}
/* COPYRIGHT */
.copyright p {
    font-size: 12px;
    color: var(--blanco);
    text-align: center;
    padding-bottom: 30px;
}
/* NOSOTROS */
.publicidad-target2 p {
    margin: 30px;
}
.publicidad-target p {
    margin: 30px;
}
@media (min-width: 375px) { 
    .publicidad-target {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .publicidad-target2 {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;

    }
}
@media (max-width: 768px) {
    .publicidad-target img {
        width: 100%;
    }
}
@media (min-width: 1280px) { 
    .publicidad-target2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
    }
    .publicidad-target {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
    }
    .publicidad-target p {
        font-size: 20px;
    }
    .publicidad-target2 p {
        font-size: 20px;
    }
}
@media (max-width: 374px) { 
    .texto-target {
        text-align: center;
    }
}
@media (min-width: 375px) { 
    .texto-target {
        margin: 20px;
        text-align: center;
    }
}
@media (min-width: 768px) { 
    .texto-target {
        background-color: var(--marron);
        padding: 70px;
        margin: 60px auto;
        text-align: center;
        color: var(--blanco);
        font-family: var(--principal);
        font-weight: 300;
        font-size: 25px;
    }
}
.nosotros {
    text-align: center;
    font-family: var(--secundaria);
    text-transform: uppercase;
    font-weight: 500;
    color: var(--grisOscuro);
    padding-top: 40px;
}
@media (min-width: 768px) { 
    .nosotros {
        padding-top: 0;
    }
}
/* DESCRIPCION DE CADA PRODUCTO */
.contenedorcolchones {
    width: 100%;
    max-width: 1500px;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(2,1fr);
    align-items: stretch;
    
}
 .Ergo {
    text-align: left;
    margin: 0px;
    padding-left: 15px;
    font-size: 25px;
    padding-right: 3px;
    
}
.Ergosub {
    text-align: left;
    margin: 0px;
    padding-left: 15px;
    padding-right: 3px;
}

.Ergosub {
    text-align: left;
    margin: 0px;
    padding-left: 15px;
    padding-right: 3px;

}

.Ergotexto {
    text-align: left;
    margin: 0px;
    padding-left: 15px;
    padding-top: 15px;
    font-weight: 400;
    font-size: 16px;
    padding-bottom: 10px;
    padding-right: 10px;
   
}

.contenedorcolchones {
    display: flex;
    flex-direction: column;
    align-items: center;

}
.imagenHybrid {
    margin: 0 auto;
}
.imghybrid {
    width: 100%;
}
@media (min-width: 768px) {
    .contenedorcolchones {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .iconowonder {
       margin-bottom: 10px;
    }
        
        
    
}
@media (min-width: 1280px) { 
    .contenedorcolchones {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        align-items: flex-start;
        margin-top: 50px;
        margin-bottom: 40px;
    }
    .imghybrid {
        margin-bottom: 10px;
    }
}

/* wonder */


.iconowonder {
    margin-bottom: 40px;
}

/* canapé */
.acabadosmadera {
    width: 320px;
    padding-left: 8px;
    display: flex;
    flex-direction: row;
    

}
@media (max-width: 1300px) {

    .acabadosmadera {
        display: flex;
        flex-direction: column;
    }

   
}
/* ROPA DE CAMA */
.articulo-vMovil {
    display: block;
}
.articulo-vPC {
    display: none;
}
@media (min-width: 768px) { 
    .articulo-vMovil {
        display: none;
    }
    .articulo-vPC {
        display: block;
    }   
}
/* cpolitic apriv */
 .politica {
    text-align: left;
    margin-left: 0%;
    margin-bottom: 10px;
    margin-top: 10px;
}
 .condiciones {
    font-weight: 400;
 }

 .efectocolor:hover {
    color: rgb(0, 0, 0);
    transition: ease-in 0.2s all;
 }

.efectoagrandar {
    transition: all 300ms ease-in-out;
}
.efectoagrandar:hover {
    transform: scale(1.02);
}
.canapes-invisible {
    display: block;
}
.canapesPC {
    display: none;
}
@media (min-width: 768px) { 
    .canapes-invisible {
        display: none;
    }

    .canapesPC {
        display: block;
    }
}


@media (min-width: 768px) { 
    .bannersecciónmovil   {
        margin-bottom: 10px;
       
        display: none;
        width: 10%;
    }
    

   
}
@media (max-width: 768px) { 
    .bannersección  {
        width: 90%;
     
        display: none;
        margin-bottom: 0%;

        
      
    }

   
}

.bannersección {
   
    width: 100%;
}


/* TEXTO VERSION MOVIL */
.textocolchon    { 
    width: 90%;
    text-align: center;
    margin: 0%;
    padding: 0%;
    color: rgb(114, 114, 114);
    display: flex;
    justify-content: center;
    margin-left: 16px;
    font-family: var(--secundaria);
    font-size: 15px;
}
/* TEXTO VERSION TABLET Y PC */
@media (min-width: 768px) { 
    .textocolchon    { 
     
        width: 97%;
        text-align: center;
        font-weight:500 ;
        color: rgb(126, 125, 125);
        display: flex;
        justify-content: center;
        
        margin-top: 7px;
    }
}

@media (max-width: 440px) { 
    .textocolchon    { 
        width: 97%;
        text-align: center;
        margin: 0%;
        padding: 0%;
        color: rgb(129, 129, 129);
        display: flex;
        justify-content: center;
        margin-left: 5px;
        margin-top: 3px;
    }
}


/* MENU HAMBURGUESA */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #ffffff;
}

/*  Menúhamburguesa */
/* Estilos para el ícono del Menú */
.icono-menu{
    margin: 40px 50px;
    position: relative;
    z-index: 10;

}

.icono-menu img{
    vertical-align: top;
    width: 40px;
    cursor: pointer;
}

/* Estilos para el contenedor del Menú */
.cont-menu{
    background-color: rgb(109, 102, 102);
    box-shadow: 2px 0px 5px 2px rgb(73, 73, 73);
    width: auto;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .5s ease;
}

/* Estilos por agregar en JavaScript */
.active{
    transform: translate(-600px);
}

/* Estilos para el listado del Menú */
.cont-menu ul{
    padding: 100px 0px 20px 0px;
    list-style: none;
}

.cont-menu ul li{
    color: white;
    display: block;
    font-size: 25px;
    text-decoration: none;
    padding: 10px 50px;
    cursor: pointer;
}

.cont-menu ul li:hover{
    background-color: rgb(228,228,228);
    color: rgb(70, 70, 70);
}
/* CARRUSEL HTML Y CSS */
@media (min-width: 200px) { 
    .slider {
        width: 95%;
        margin: auto;
        overflow: hidden;
        display: block;
    }
    
    .slider ul {
        display: flex;
        padding: 0;
        width: 400%;
        
        animation: cambio 26s infinite normal linear;
    }
    
    .slider li {
        width: 25%;
        list-style: none;
    }
    
    .slider img {
        width: 100%;
    }
    
    @keyframes cambio {
        0% {margin-left: 0;}
        20% {margin-left: 0;}
        
        25% {margin-left: -100%;}
        45% {margin-left: -100%;}
        
        50% {margin-left: -200%;}
        70% {margin-left: -200%;}
    }
}
@media (max-width: 768px) {
    .politica{
    margin: 10px;
    font-size: 25px;
}
    .condiciones{
        margin: 10px;
        font-size: 15px;
    }
}
.condiciones {
font-size: 17px;
}
.politica {
    font-size: 30px;
    }
@media (min-width: 768px) {
    .slider {
        display: none;
        padding: -10px;
    }
    .no-visible {
        display: none;
    }
    .slider-item {
        display: none;
    }
    .slider-container {
        display: none;
    }
    
    #carrusel-caja {
        
        -moz-animation: automatizacion 30s infinite linear;
        -o-animation: automatizacion 30s infinite linear;
        -webkit-animation: automatizacion 30s infinite linear;
        animation: automatizacion 25s infinite linear;
        -webkit-transition: all 2s ease;
        -moz-transition: all 2s ease;
        -ms-transition: all 2s ease;
        -o-transition: all 2s ease;
        transition: all 6s ease;
        width: 300%;
        display: block;
    }
    #carrusel-contenido {
       
        margin: 0 auto;
        overflow: hidden;
        text-align: left;
        display: block;
    }
    .imagenes{
        margin-bottom: 15px;
        width: 100%;
        display: block;
    }
    .carrusel-elemento {
        float: left;
        width: 33.333%;
        display: block;
    }
    @-moz-keyframes automatizacion {
        0% {
            margin-left: 0;
        }
        30% {
            margin-left: 0;
        }
        35% {
            margin-left: -100%;
        }
        65% {
            margin-left: -100%;
        }
        70% {
            margin-left: -200%;
        }
        95% {
            margin-left: -200%;
        }
        100% {
            margin-left: 0;
        }
    }
    @-webkit-keyframes automatizacion {
        0% {
            margin-left: 0;
        }
        30% {
            margin-left: 0;
        }
        35% {
            margin-left: -100%;
        }
        65% {
            margin-left: -100%;
        }
        70% {
            margin-left: -200%;
        }
        95% {
            margin-left: -200%;
        }
        100% {
            margin-left: 0;
        }
    }
    @keyframes automatizacion {
        0% {
            margin-left: 0;
        }
        30% {
            margin-left: 0;
        }
        35% {
            margin-left: -100%;
        }
        65% {
            margin-left: -100%;
        }
        70% {
            margin-left: -200%;
        }
        95% {
            margin-left: -200%;
        }
        100% {
            margin-left: 0;
        }
    }
}

/* APARTADO DE CONTACTO */

.grid-contacto {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (min-width: 768px) { 
    .grid-contacto {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

}
.forma-contacto {
    padding: 40px 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.contacto1 {
    width: 100%;
}
.contacto2 {
    width: 100%;
}
.contacto3 {
    width: 100%;
}
.forma-contacto h2 {
    font-family: var(--principal);
    font-size: 18px;
    color: var(--blanco);
}
.forma-contacto {
    background-color: var(--fondo-contacto2);
}
@media (min-width: 768px) {
    .forma-contacto {
        padding: 0;
        flex-direction: row;
        align-items: center;
    }
    .forma-contacto h2 {
        font-size: 25px;
    }
    .forma-contacto {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
    }
}
/* MEDIOS PARA CONTACTAR */

@media (min-width: 768px) {
    .contenedor-contacto {
        padding: 50px;
        margin-top: -20px;
    }
    .ordenar {
        width: 100%;
    }
}
.contenedor-contacto {
    background-color: var(--fondo-contacto);
}
.fondo {
    background-color: var(--fondo-contacto);
}
.horario-heading {
    font-family: var(--principal);
}
.horario-heading {
    color: var(--fondo-contacto2);
    font-size: 18px;
    text-align: center;
}
.horario-heading {
    font-weight: 700;
    margin-bottom: 15px;
    margin-left: 0;
    padding-top: 20px;
}
@media (min-width: 300px) { 
    .forma-contacto img {
        width: 20%;
        padding: 30px auto;
    }
    .forma-contacto {
        padding: 20px;
    }
    .texto-contacto h4 {
        font-size: 18px;
        margin-bottom: -10px;
    }
}
@media (min-width: 768px) { 
    .telefono img {
        width: 20.7%;
    }
  
    .direccion img {
        width: 20%;
    }
    .email img{
        width: 19.9%;
    }   
}

.texto-contacto p {
    color: var(--grisOscuro);
    font-size: 18px;
    text-align: center;
    padding: 22px;
}
/* HORARIO */
.horario-h3 {
    margin-top: 0;
    padding-top: 30px;
}
.horario {
    width: 80%;
    padding: 30px;
}
@media (min-width: 768px) { 
    .mapa {
        width: 100%;
        height: 800px;
        margin: 80px;
        margin-bottom: 0;
    }
    .mapa-contacto {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--fondo-contacto);
        margin-top: 50px;
        padding-top: 50px;
    }
    .mapa-contacto h3 {
        padding-bottom: 20px;
    }
}
@media (min-width: 1280px) { 
    .horario {
        padding: 60px;
        width: 50%;
        margin-left: 280px;
    }
}
.mapa {
    width: 100%;
    margin: 0;
}
.mapa-contacto h3, .horario-heading, .horario-h3 {
    margin-bottom: 25px;
    text-align: center;
    font-family: var(--principal);
    font-weight: bold;
    font-size: 30px;
    color: var(--grisOscuro);
}