@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/*GENERAL*/

body {
    background: #ffffff;
    color: #232323;
    font-family: 'Montserrat', sans-serif;
}

p {
    color: #232323;
}

h1 {
    color: #c04432;
    text-transform: uppercase;
    font-weight: 400;
    font-size:1.2rem;
}

h1 span.title {
    color:  #232323;
    font-weight: 600;
    display: block;
    font-size: 2rem;
    margin-bottom: 10px;
}

h1 span.subtitle {
    color: #4f4f4f;
    font-weight: 400;
    font-size:1rem;
    display: block;
    text-transform: initial;
}

h2, h3 {
    font-weight: 600;
    color: #232323;
}

h2 {
    font-size: 1.7rem;
}

h3 {
    font-size:1.2rem;
}

p {
    font-weight: 400;
}

a,
a:hover {
    color: inherit;
    text-decoration: none;
}

img {
    width: 100%;
    max-width: 100%;
}

.btn-primary {
    background: #232323;
    border: 2px solid #232323;
    border-radius: 20px;
    font-weight: 700;
    color: white;
    padding: 5px 30px;
    width: fit-content;
}

.btn-primary:hover {
    background: transparent;
    border: 2px solid #232323;
    color: #232323;
}

.btn-secondary {
    background: #c04432;
    border: 2px solid #c04432;
    border-radius: 20px;
    font-weight: 700;
    color: white;
    padding: 5px 30px;
    width: fit-content;
}

.btn-secondary:hover {
    background: transparent;
    border: 2px solid #c04432;
    color: #c04432;
}

.banner-fullwidth {
    height: 600px;
}

.main-banner {
    padding: 300px 0 20px;
}

.main-banner h1 {
    text-transform: uppercase;
    font-weight: 400;
    color: white;
    font-size: 1.7rem;
}


/*HEADER*/

header {
    width: 100%;
    z-index:11;
    color: black;
    /*background: linear-gradient(#0000009c, transparent);*/
    background: #ffffff;
}

header .rrss {
    padding: 5px;
    width: 28px !important;
}

header .right {
    text-align: right;
}

header .logo {
    max-height: 80px;
    width: auto;
    padding: 5px 0;
}

header #topheader {
    padding: 0;
}

header hr {
    margin: 0;
}

header .cotiza-boton {
    background: #c04432;
    color: #ffffff;
    padding: 5px 20px;
    margin-left: 20px;
    position: relative;
    z-index: 1;
}

.navbar-toggler {
}

.navbar {
    padding: 0;
}

.bg-light {
    background: transparent !important;
}

.nav-link {
    color: black;
}

.nav-link:focus, .nav-link:hover {
    color: #c04432;
}

.dropdown:hover>.dropdown-menu {
    display: block;
}

.dropdown-menu {
    background: #232323;
}

.dropdown-item {
    color: white;
}

.dropdown-item:focus, .dropdown-item:hover {
    background: #c04432;
    color: white;
}

#servicios {
    padding: 40px 0 60px;
}

.carousel-caption {
    text-align: left;
    position: initial;
    padding: 40px 0;
}

.carousel-caption {
    bottom: initial !important;
}

.carousel-item {
    transition: transform 1.5s ease-in-out;
}

#servicios .carousel-control-next, #servicios .carousel-control-prev {
    position: absolute;
    top: 30px;
    bottom: unset;
    z-index: 1;
    display: unset;
    align-items: end;
    justify-content: center;
    width: 6%;
    padding: 0px;
    color: #fff;
    text-align: center;
    background: 0 0;
    border: 0;
    opacity: .5;
    transition: opacity .15s ease;
    filter: invert(1);
}

#servicios .carousel-control-prev {
    margin-left: 35px;
}

#servicios .carousel-control-next {
    left: 70px;
}

#servicios .carousel-control-next-icon, #servicios .carousel-control-prev-icon {
    width: 1.2rem;
    height: 1.2rem;
}

#servicios .carousel-item-container {
    padding: 40px;
}

#MainCarousel h2 {
    color: #c04432;
    text-transform:uppercase;
    font-weight:400;
    font-size: 1.2rem;
    margin:0;
}

#MainCarousel span {
    color: #232323;
    font-weight: 600;
    display: block;
    font-size: 2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.innerCarousel {
    margin-bottom: 20px;
}

.carousel1-1 {
    background: url("./img/area-de-asadores-1.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 50% 0;
}

.carousel1-2 {
    background: url("./img/cocinas-contemporaneas-7.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 50% 0;
}

.carousel1-3 {
    background: url("./img/area-de-asadores-8.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 50% 0;
}

.carousel2-1 {
    background: url("./img/cocinas-contemporaneas-1.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 50% 0;
}

.carousel2-2 {
    background: url("./img/cocinas-contemporaneas-2.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 50% 0;
}

.carousel2-3 {
    background: url("./img/cocinas-contemporaneas-3.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 50% 0;
}

.carousel3-1 {
    background: url("./img/lavanderias-2.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 50% 0;
}

.carousel3-2 {
    background: url("./img/cocinas-clasicas-1.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 50% 0;
}

.carousel3-3 {
    background: url("./img/cocinas-clasicas-2.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 50% 0;
}

.carousel4-1 {
    background: url("./img/cocinas-contemporaneas-4.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 35% 0;
}

.carousel4-2 {
    background: url("./img/cocinas-contemporaneas-5.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 35% 0;
}

.carousel4-3 {
    background: url("./img/cocinas-contemporaneas-6.jpg");
    background-size: cover;
    width: 100%;
    height: 0;
    padding: 35% 0;
}

#video {
    background: #e8e8e8;
    padding: 100px 0px;
}

#video span {
    color: #c04432;
    text-transform:uppercase;
    font-weight:400;
    font-size: 1.2rem;
    margin:0;
}

#video h2 {
    color: #232323;
    font-weight: 600;
    display: block;
    font-size: 2rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/*NOSOTROS*/

.carousel h2 {
    font-size: 2rem;
}

.slider-img1 {
    background-image: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url(./img/cocina-contemporanea.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 800px;
}

.slider-img2 {
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url(./img/area-de-asadores-1.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 800px;
}

.slider-img3 {
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url(./img/lavanderias-1.jpg);
    background-size: cover;
    background-position: center center;
    width: 100%;
    height: 800px;
}

#nosotros {
    /*background: url(./img/nosotros-bg.jpg);
    background-size: 50%;
    background-position: top left;
    background-repeat: no-repeat;*/
    padding: 120px 20px;
}

#nosotros h2 {
    font-size: 1.4rem;
    z-index: 1;
    color: #232323;
    text-transform: uppercase;
}

#nosotros p {
    font-size: .9rem;
}

/*#nosotros .caract img {
    filter: brightness(0.7);
}*/

#nosotros .caract {
    width: 100%;
    height: 0;
    padding: 50% 0;
    margin-bottom: 20px;
}

.contenedor {
    position: relative;
    width: 100%;
}
  
.caract {
    display: block;
    width: 100%;
    height: auto;
}
  
.overlay {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    right: 0;
    background-color: rgb(0 0 0 / 50%);
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: .4s ease-in-out;
}
  
.contenedor:hover .overlay {
    bottom: 0;
    height: 100%;
}

#nosotros .caract1 {
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 0%)), url(./img/inicio/accesorios.jpg);
    background-size: cover;
    background-position: center center;
}

#nosotros .caract2 {
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 0%)), url(./img/inicio/acabados.jpg);
    background-size: cover;
    background-position: center center;
}

#nosotros .caract3 {
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 0%)), url(./img/inicio/equipos.jpg);
    background-size: cover;
    background-position: center center;
}

#nosotros .caract4 {
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 0%)), url(./img/inicio/diseno.jpg);
    background-size: cover;
    background-position: center center;
}

#nosotros .caract5 {
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 0%)), url(./img/inicio/fabricacion.jpg);
    background-size: cover;
    background-position: center center;
}

#nosotros .caract6 {
    background: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 0%)), url(./img/inicio/instalacion.jpg);
    background-size: cover;
    background-position: center center;
}

#nosotros .next {
    width: 11px;
    opacity: .4;
}


/*EXPERIENCIA*/

#experiencia .box {
    /*background: #161616;*/
    /*background-image: url(./img/cotiza-bg.jpg), linear-gradient(#2f3841, #2f3841);*/
    background-size: contain;
    background-position: top right;
    background-repeat: no-repeat;
    /*padding: 70px 30px;*/
}

#experiencia span {
    color: #c04432;
    text-transform: uppercase;
    font-weight: 400;
    display: block;
}

#experiencia .bg {
    background: url(./img/experiencia-bg.jpg);
    /*background: #2e2e2e;*/
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    padding-left: 16% !important;
}

#experiencia p {
    font-size: .8rem;
}

/*BENEFICIOS*/

#beneficios {
    /*background: url(./img/beneficios-bg.jpg);
    background-size: 50%;
    background-position: bottom right;
    background-repeat: no-repeat;*/
    padding: 120px 20px;
}

#beneficios h3 {
    font-size: 1.1rem;
}

#beneficios p {
    font-size: .9rem;
}

/*#beneficios .icon {
    background: #2f3841;
    border-radius: 50%;
    margin: 0 auto;
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: 30px;
}*/

#beneficios .icon img {
    margin: 0 auto;
    display: block;
    padding: 0 0 25px;
    width: 30%;
}

#beneficios .icon img:hover {
    filter: invert(1);
}

#banner-juntos {
    background: url("./img/inicio/juntos-en-cada-decision.jpg");
    background-size: cover;
    background-position: center center;
    padding: 180px 20px;
}

/*COTIZA*/

#cotiza {
    background-image: linear-gradient(rgb(0 0 0 / 50%), rgb(0 0 0 / 50%)), url(./img/cocinas-contemporaneas-3.jpg);
    background-size: cover;
    background-position: center center;
    padding: 150px 0 0;
    color: #ffffff;
    background-attachment: fixed;
}

#cotiza h2,
#cotiza p {
    color: white;
}

#cotiza .margin-bottom {
    margin-bottom: 150px;
}

/*FOOTER*/

footer {
    padding: 70px 20px;
    color: #d6d6d6;
    background: linear-gradient(rgb(46 46 46 / 40%), #2e2e2e);
    width: 100%;
}

#otros-espacios footer,
#cocinas footer,
#puntos-de-venta footer,
#inspiracion footer {
    background: #232323;
}

footer h3 {
    font-size: 1rem;
    color: white;
}

footer h4 {
    font-size: .9rem;
    font-weight: bold;
}

footer .left {
    text-align: left;
}

footer .right {
    text-align: right;
}

footer .logo {
    max-height: 50px;
    width: auto;
}

footer p {
    font-size: .9rem;
    color: white;
}

footer ul {
    padding: 0;
}

footer ul li {
    list-style: none;
    font-size: .9rem;
}

footer .rrss li {
    display: inline-block;
    max-width: 20px;
}

footer .terminos li {
    display: inline-block;
    padding-right: 20px;
}


/**********************PUNTOS DE VENTA*******************/

/*BANNER*/

#puntos-de-venta h1 {
    color: #232323;
    font-weight: 600;
    text-transform: capitalize;
    display: block;
    font-size: 2rem;
}

#puntos-de-venta #ubicaciones {
    background: white;
    background-size: cover;
    background-position: center center;
    color: #232323;
}

#puntos-de-venta #ubicaciones .banner {
    padding: 100px 0;
}

#puntos-de-venta #ubicaciones span {
    color: #c04432;
    text-transform: uppercase;
    font-weight: 400;
    display: block;
    font-size: 1.2rem;
}

#puntos-de-venta #ubicaciones .mapa {
    margin-bottom: 130px;
}

#puntos-de-venta #ubicaciones .info {
    background: #c04432;
    color: white;
    border-radius: 20px;
    padding: 30px;
    margin-top: -120px;
    margin-left: -180px;
    width: 590px;
    position: initial;
    padding-right: 80px
}

#puntos-de-venta #ubicaciones .info p {
    margin: 0;
}

#puntos-de-venta footer {
    padding-top: 150px;
    margin-top: -80px;
}

.hidden {
    display: none;
}

#puntos-de-venta .contamos {
    margin-top: 80px;
}

#puntos-de-venta .sucursal img {
    margin-bottom: 20px;
}

#puntos-de-venta .sucursal p {
    font-size: .8rem;
    margin-bottom: 0;
}

#puntos-de-venta .sucursal a {
    font-size: .8rem;
}

#puntos-de-venta .whatsapp,
footer .whatsapp {
    width: 19px;
    margin-bottom: 0 !important;
}

/*CONTACTO*/

#contacto {
    margin-top: 100px;
    display: flex;
}

#contacto h2 {
    margin-bottom: 20px;
    color: white;
}

#contacto span {
    color: #c04432;
    text-transform: uppercase;
    font-weight: 400;
    font-size:1.2rem;
}

#contacto .box {
    background-image: url(./img/contacto-bg.jpg);
    background-size: cover;
    background-position: top left;
    padding: 60px;
    background-repeat: no-repeat;
}

#contacto .row {
    margin: 0;
    margin-bottom: 10px;
}

#contacto input,
#contacto textarea {
    background: #3e3e3e;
    color: #f1f1f2;
    border: none;
    padding: 13px 23px;
    border-radius: 20px;
}

#contacto input::placeholder,
#contacto textarea::placeholder {
    color: #f1f1f2;
}

#contacto input[type="submit"] {
    background: #c04432;
    color: #f1f1f2;
    border-radius: 20px;
    width: -webkit-fill-available;
    padding: 5px;
    margin: 0 12px;
}

#contacto input[type="submit"]:hover {
    background: #9b2614;
}
  
#contacto .rrss {
    margin-right: 5px;
    width: 22px;
}

#contacto p {
    color: white;
}

/*SUBPAGE*/

.info {
    padding: 100px 20px;
}

.info2 {
    padding: 20px 20px;
}

.info2 p {
    font-size: .9rem;
}

.info h2 {
    text-transform: uppercase;
}

.text-description {
    padding: 80px;
}

/******************COCINAS*****************/

.espacio h1 {
    color: #ffffff;
    font-weight: 600;
    text-transform: capitalize;
    display: block;
    font-size: 2rem;
}

.espacio #detalle1 {
    margin-bottom: 100px;
    color: white;
}

.espacio .galeria {
    margin-bottom: 100px;
}

.espacio #detalle1 {
    margin-bottom: 100px;
    color: white;
}

.espacio #detalle2 .box img {
    margin-bottom: 20px;
}

.espacio .cocinas {
    width: 100%;
    height: 200px;
    cursor: pointer;
}

.espacio footer {
    padding-top: 170px;
    margin-top: -170px;
    z-index: -9;
    position: relative;
}

.espacio #detalle2 {
    margin: 100px 0;
    color: white;
}


/*
#cocinas-clasicas #banner {
    background-image: linear-gradient(rgb(26 30 41 / 60%), rgb(26 30 41)), url(./img/cocinas-clasicas-1.jpg);
    background-size: cover;
    background-position: center center;
    color: white;
    padding: 150px 0;
}

#cocinas-clasicas #detalle1 .box {
    background-image: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url(./img/cocinas-clasicas-3.jpg);
    background-size: cover;
    background-position: center center;
    padding: 50px;
}

#cocinas-clasicas #detalle2 {
    margin: 100px 0;
    color: white;
}

#cocinas-clasicas #detalle2 .box {
    background-image: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url(./img/cocinas-clasicas-2.jpg);
    background-size: cover;
    background-position: center center;
    padding: 50px;
}

#cocinas-clasicas #detalle1 span,
#cocinas-clasicas #detalle2 span {
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 400;
    font-size:1.2rem;
}
*/

#cocinas .cocinas-clasicas-1,
#inspiracion .cocinas-clasicas-1 {
    background: url("./img/cocinas-clasicas-1.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas .cocinas-clasicas-2,
#inspiracion .cocinas-clasicas-2 {
    background: url("./img/cocinas-clasicas-2.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas .cocinas-clasicas-3,
#inspiracion .cocinas-clasicas-3 {
    background: url("./img/cocinas-clasicas-3.jpg");
    background-size: cover;
    background-position: center center;
}

#banner2 {
    color: white;
}

#inicio #banner,
#cocinas #banner {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/cocinas-contemporaneas-8.jpg);
    background-size: cover;
    background-position: center center;
    color: white;
    padding: 150px 0;
}

#cocinas #banner p,
#otros-espacios #banner p,
#inspiracion #banner p {
    color: white;
}

#inspiracion #banner {
    background: white;
    color: black;
    padding: 100px 0;
}

#inspiracion #banner h1,
#inspiracion #banner p {
    color: black;
}

#area-de-asadores #banner,
#otros-espacios #banner {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/otros-espacios1.jpg);
    background-size: cover;
    background-position: center center;
    color: #232323;
    padding: 150px 0;
}

#lavanderias #banner {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/lavanderias-1.jpg);
    background-size: cover;
    background-position: center center;
    color: #232323;
    padding: 150px 0;
}

.banner-cocinas {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/cocinas-contemporaneas-8.jpg);
    background-size: cover;
    background-position: center center;
    color: #232323;
    padding: 220px 0;
}

.banner-cocinas2 {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/cocinas-clasicas-1.jpg);
    background-size: cover;
    background-position: center center;
    color: #232323;
    padding: 220px 0;
}

.banner-cocinas3 {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/cocinas-contemporaneas-5.jpg);
    background-size: cover;
    background-position: center center;
    color: #232323;
    padding: 220px 0;
}

.banner-asadores {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/area-de-asadores-1.jpg);
    background-size: cover;
    background-position: center center;
    color: #232323;
    padding: 220px 0;
}

.banner-otrosespacios {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/otros-espacios1.jpg);
    background-size: cover;
    background-position: center center;
    color: #232323;
    padding: 220px 0;
}

.banner-otrosespacios2 {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/otros-espacios/banner13.jpg);
    background-size: cover;
    background-position: center center;
    color: #232323;
    padding: 220px 0;
}

.banner-otrosespacios3 {
    background-image: linear-gradient(rgb(0 0 0 / 30%), rgb(0 0 0 / 30%)), url(./img/otros-espacios4.jpg);
    background-size: cover;
    background-position: center center;
    color: #232323;
    padding: 220px 0;
}

.banner-cocinas h2,
.banner-cocinas2 h2,
.banner-cocinas3 h2,
.banner-otrosespacios h2,
.banner-otrosespacios2 h2,
.banner-otrosespacios3 h2 {
    font-size: 1.7rem !important;
    margin-bottom: 20px !important;
    color: white !important;
}

#detalle1 .box h2,
#detalle1 .box p,
#detalle2 .box h2,
#detalle2 .box p  {
    color: white;
}

#cocinas #detalle1 .box {
    background-image: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url(./img/cocinas-contemporaneas-1.jpg);
    background-size: cover;
    background-position: center center;
    padding: 50px;
}

#area-de-asadores #detalle1 .box,
#otros-espacios #detalle1 .box {
    background-image: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url(./img/area-de-asadores-2.jpg);
    background-size: cover;
    background-position: center center;
    padding: 50px;
}

#lavanderias #detalle1 .box,
#otros-espacios #detalle2 .box {
    background-image: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url(./img/lavanderias-1.jpg);
    background-size: cover;
    background-position: center center;
    padding: 50px;
}

#cocinas #detalle2 .box,
#lavanderias #detalle2 .box {
    background-image: linear-gradient(rgb(0 0 0 / 40%), rgb(0 0 0 / 40%)), url(./img/cocinas-contemporaneas-2.jpg);
    background-size: cover;
    background-position: center center;
    padding: 50px;
}

#cocinas-contemporaneas-galeria .cocinas:hover,
#cocinas-clasicas-galeria .cocinas:hover,
#area-de-asadores-galeria .cocinas:hover,
#lavanderias-galeria .cocinas:hover,
#otros-espacios-galeria .cocinas:hover {
    filter: brightness(0.5);
}

#cocinas #cocinas-contemporaneas-galeria .galeria1,
#inspiracion #cocinas-contemporaneas-galeria .galeria1 {
    background: url("./img/cocinas-contemporaneas-1.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria2,
#inspiracion #cocinas-contemporaneas-galeria .galeria2 {
    background: url("./img/cocinas-contemporaneas-2.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria3,
#inspiracion #cocinas-contemporaneas-galeria .galeria3 {
    background: url("./img/cocinas-contemporaneas-3.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria4,
#inspiracion #cocinas-contemporaneas-galeria .galeria4 {
    background: url("./img/cocinas-contemporaneas-4.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria5,
#inspiracion #cocinas-contemporaneas-galeria .galeria5 {
    background: url("./img/cocinas-contemporaneas-5.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria6,
#inspiracion #cocinas-contemporaneas-galeria .galeria6 {
    background: url("./img/cocinas-contemporaneas-6.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria7,
#inspiracion #cocinas-contemporaneas-galeria .galeria7 {
    background: url("./img/cocinas-contemporaneas-7.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria8,
#inspiracion #cocinas-contemporaneas-galeria .galeria8 {
    background: url("./img/cocinas-contemporaneas-8.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria9,
#inspiracion #cocinas-contemporaneas-galeria .galeria9 {
    background: url("./img/cocinas-contemporaneas-9.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria10,
#inspiracion #cocinas-contemporaneas-galeria .galeria10 {
    background: url("./img/cocinas-contemporaneas-10.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria11,
#inspiracion #cocinas-contemporaneas-galeria .galeria11 {
    background: url("./img/cocinas-contemporaneas-11.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria12,
#inspiracion #cocinas-contemporaneas-galeria .galeria12 {
    background: url("./img/cocinas-contemporaneas-12.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria13,
#inspiracion #cocinas-contemporaneas-galeria .galeria13 {
    background: url("./img/cocinas-contemporaneas-13.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria14,
#inspiracion #cocinas-contemporaneas-galeria .galeria14 {
    background: url("./img/cocinas-contemporaneas-14.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria15,
#inspiracion #cocinas-contemporaneas-galeria .galeria15 {
    background: url("./img/cocinas-contemporaneas-15.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria16,
#inspiracion #cocinas-contemporaneas-galeria .galeria16 {
    background: url("./img/cocinas-contemporaneas-16.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria17,
#inspiracion #cocinas-contemporaneas-galeria .galeria17 {
    background: url("./img/cocinas-contemporaneas-17.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas #cocinas-contemporaneas-galeria .galeria18,
#inspiracion #cocinas-contemporaneas-galeria .galeria18 {
    background: url("./img/cocinas-contemporaneas-18.jpg");
    background-size: cover;
    background-position: center center;
}

#area-de-asadores #area-de-asadores-galeria .galeria1,
#inspiracion #area-de-asadores-galeria .galeria1,
#otros-espacios #area-de-asadores-galeria .galeria1 {
    background: url("./img/area-de-asadores-1.jpg");
    background-size: cover;
    background-position: center center;
}

#area-de-asadores #area-de-asadores-galeria .galeria2,
#inspiracion #area-de-asadores-galeria .galeria2,
#otros-espacios #area-de-asadores-galeria .galeria2 {
    background: url("./img/area-de-asadores-2.jpg");
    background-size: cover;
    background-position: center center;
}

#area-de-asadores #area-de-asadores-galeria .galeria3,
#inspiracion #area-de-asadores-galeria .galeria3,
#otros-espacios #area-de-asadores-galeria .galeria3 {
    background: url("./img/area-de-asadores-3.jpg");
    background-size: cover;
    background-position: center center;
}

#area-de-asadores #area-de-asadores-galeria .galeria4,
#inspiracion #area-de-asadores-galeria .galeria4,
#otros-espacios #area-de-asadores-galeria .galeria4 {
    background: url("./img/area-de-asadores-4.jpg");
    background-size: cover;
    background-position: center center;
}

#area-de-asadores #area-de-asadores-galeria .galeria5,
#inspiracion #area-de-asadores-galeria .galeria5,
#otros-espacios #area-de-asadores-galeria .galeria5 {
    background: url("./img/area-de-asadores-5.jpg");
    background-size: cover;
    background-position: center center;
}

#area-de-asadores #area-de-asadores-galeria .galeria6,
#inspiracion #area-de-asadores-galeria .galeria6,
#otros-espacios #area-de-asadores-galeria .galeria6 {
    background: url("./img/area-de-asadores-6.jpg");
    background-size: cover;
    background-position: center center;
}

#area-de-asadores #area-de-asadores-galeria .galeria7,
#inspiracion #area-de-asadores-galeria .galeria7,
#otros-espacios #area-de-asadores-galeria .galeria7 {
    background: url("./img/area-de-asadores-7.jpg");
    background-size: cover;
    background-position: center center;
}

#lavanderias #lavanderias-galeria .galeria1,
#inspiracion #lavanderias-galeria .galeria1 {
    background: url("./img/lavanderias-1.jpg");
    background-size: cover;
    background-position: center center;
}

#cocinas .box span {
    color: #d73727;
    text-transform: uppercase;
    font-weight: 400;
    font-size:1.2rem;
}

.modal-content {
    background: transparent;
}

.modal-header {
    border: none;
}

.btn-close {
    position: fixed;
    top: 40px;
    right: 40px;
    filter: invert(1) brightness(100);
    opacity: .7;
}

.whats-header {
    width: 60px;
    position:fixed;
    bottom: 20px;
    right: 20px;
    z-index:111;
    cursor: pointer;
}

.whatsapp-hover {
    display: none;
    position: fixed;
    bottom: 90px;
    right: 20px;
    background: white;
    padding: 20px 30px;
    text-transform: initial;
    font-size: .9rem;
    border-radius: 10px;
    box-shadow: 2px 2px 14px -2px #000000b0;
    font-weight: 600;
    z-index: 111;
}

.whatsapp-hover a:hover {
    color: green;
}


.whatsapp-hover.visible {
    display: block; /* Muestra el elemento cuando se añade la clase visible */
}

.whats-container {
    position: relative; /* Necesario para el posicionamiento absoluto de .whatsapp-hover */
    display: inline-block; /* Para mantener el elemento en línea */
}

.whats-container:focus .whatsapp-hover {
    display: block; /* Muestra el elemento cuando se hace hover sobre .whats-header */
}

@media screen and (max-width: 600px) {
    footer .left,
    footer .right {
        text-align: center;
    }

    #nosotros h2 {
        margin-bottom: 20px;
    }

    #puntos-de-venta #ubicaciones .info {
        margin: 0;
        width: 100%;
        margin-top: 30px;
        background: transparent;
        padding: 0 30px;
    }

    #puntos-de-venta #visitanos {
        display: none;
    }

    #puntos-de-venta #monterrey,
    #puntos-de-venta #chihuahua,
    #puntos-de-venta #durango,
    #puntos-de-venta #mazatlan {
        display: block;
        margin-bottom: 20px;
    }

    #puntos-de-venta #ubicaciones .mapa {
        margin-bottom: 100px;
    }

    #contacto .box {
        padding: 40px;
    }

    #puntos-de-venta .contamos {
        padding: 0 30px;
    }

    #puntos-de-venta form {
        margin-top: 30px;
    }

    .carousel4-1,
    .carousel4-2,
    .carousel4-3 {
        padding: 50% 0;
    }

    #video video {
        margin-top: 40px;
    }

    #cotiza {
        background-attachment: initial;
    }

    .text-description {
        padding: 40px;
    }
}