:root {
    --primary-color: #19315a;
    --secondary-color: #a12330;   
    --home-banner-height: auto;
}
body {
    overflow-y: scroll;
    padding: 0;
    margin: 0;

    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Para ocupar todo el alto de la ventana */
}
input[type="text"] {
    all: unset;
    color: var(--primary-color);
    background-color: #f0f0f0;    
    padding: 5px;
    width: 338px;
    border: 2px solid var(--secondary-color);
    height: 50px;
}
a {
    all: unset;
    color: var(--primary-color);
    text-decoration: none;
    cursor: pointer;
    border-bottom: 2px solid transparent
}
nav a.main:hover{
    color: var(--secondary-color);
    border-bottom: 2px solid var(--secondary-color);
}
nav a.main.selected{
    border-bottom: 2px solid var(--secondary-color);
}

.bg-primary-color{
    background-color: var(--primary-color);
}

.bg-secondary-color{
    background-color: var(--secondary-color);
}
.top-bar{
    background-color:var(--primary-color);;
    height: 132px;
}

.img-schedule{
    height: 31px;
}
.content{
    margin: 0 auto;
    width: 73.9%;
}
.banner{
    background-image: url('../images/banner.png');
    background-size: cover;
    background-position: center;
    padding: 0;
    width: 100%;
    padding-bottom: 30px;
}

.content-products{
    background-image: url('../images/bgProducts.png');
    background-size: cover;
    background-position: center;
    padding: 0;
    width: 100%;
}

.content-filter-products{
    background-image: url('../images/Fondo_HuellaGris.png');
    background-size: cover;
    background-position: center;
    padding: 0;
    width: 100%;
}
.contenedor-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

.card {
    width: 441px;
    height: 317px;
}

.card.classes{
    position: relative;
    background-color: transparent;
    color: white;
}
.card.classes .CardDescription{
    position: absolute;
    top: 0;
    right: 0;
}
.card.classes .CardBody{
    position: absolute;
    top: 45px;
    left: 35px;
    right: 35px;
}
.card.classes .name{
    position: absolute;
    bottom: 27px;
    left: 20px;
}
.card.classes .action{
    position: absolute;
    bottom: 10px;
    right: 20px;
    cursor: pointer;
    padding: 10px; 
    background-color: transparent;
    color: white;
    width: auto;
}

.nav-filters {
    padding: 10px;
    background-color: var(--primary-color);  
    color: white;  
    width: 330px;
}
.nav-filters.selected{
    background-color: var(--secondary-color);
}

.whatspp.content{
    background-image: url('../images/whatsApp.png');
    background-size: cover;
    background-position: center;   
    border-radius: 20px;
}

.enviar-mensaje{
    background-image: url('../images/whatsApp2.png');
    background-size: cover;
    background-position: center;   
    padding: 20px;
    border-radius: 20px;
}

.homeBanner{
    width: 100vw;
}
.homeBanner > img{
    width: 70vw;
}

.sucursal{
    background-color: var(--primary-color);
    border-radius: 20px;
    gap: 20px;
    font-family: 'MontserratUltraLight';
    color: white;
    font-style: italic;
    font-size: 20px;
    min-height: 338px;
    width: 455px;
}
.sucursal2{
    background-color: var(--primary-color);
    border-radius: 20px;
    gap: 20px;
    font-family: 'MontserratUltraLight';
    color: white;
    font-style: italic;
    font-size: 20px;
    height: 394px;
    width: 423px;
}

.sucursal3{
    background-color: white;
    border-radius: 20px;
    gap: 20px;
    font-family: 'MontserratUltraLight';
    font-style: italic;
    font-size: 20px;
    height: 394px;
    width: 500px;
}

.whatsappe{
    background-color: transparent;
    padding: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    cursor: pointer;
}
.whatsappe div img{
    height: 80px;
}
.whatsappe .pregunta{
/*display: none;*/
}
.whatsappe:hover .pregunta{
    display: block;
}

@media (min-width: 1582px) {
    .main-nav{
        gap: 70px;
        font-size: 27.5px;
    }
}
@media (min-width: 1171px) and (max-width: 1581px) {
    .main-nav{
        gap: 30px;
        font-size: 20px;
    }
}

@media (min-width: 940px) and (max-width: 1170px) {
    .main-nav{
        gap: 30px;
        font-size: 16px;
    }
    .main-nav-img{
        height: 60px;
    }
}

@media (min-width: 766px) and (max-width: 939px) {
    .main-nav{
        gap: 20px;
        font-size: 16px;
    }
    .main-nav-img{
        height: 45px;
    }
}

@media (max-width: 765px) {
    nav.nav{
        display: none;
    }
    .nav-movil{
        display: flex !important;
    }
}
.main-nav-movil{
    gap: 70px;
    font-size: 27.5px;
}