:root{
     /* PREDEFINED CLASES */
    --margin-top-s: clamp(15px, 4.910px + 3.153vw, 50px);
    --margin-top-m: clamp(30px, 18.468px + 3.604vw, 70px);
    --margin-top-l: clamp(50px, 35.586px + 4.505vw, 100px);
    --margin-bottom-s: clamp(15px, 4.910px + 3.153vw, 50px);
    --margin-bottom-m: clamp(30px, 18.468px + 3.604vw, 70px);
    --margin-bottom-l: clamp(50px, 35.586px + 4.505vw, 100px);
    --margin-left-s: clamp(15px, 4.910px + 3.153vw, 50px);
    --margin-left-m: clamp(30px, 18.468px + 3.604vw, 70px);
    --margin-left-l: clamp(50px, 35.586px + 4.505vw, 100px);
    --margin-right-s: clamp(15px, 4.910px + 3.153vw, 50px);
    --margin-right-m: clamp(30px, 18.468px + 3.604vw, 70px);
    --margin-right-l: clamp(50px, 35.586px + 4.505vw, 100px);

    --padding-top-s: clamp(15px, 4.910px + 3.153vw, 50px);
    --padding-top-m: clamp(30px, 18.468px + 3.604vw, 70px);
    --padding-top-l: clamp(50px, 35.586px + 4.505vw, 100px);
    --padding-bottom-s: clamp(15px, 4.910px + 3.153vw, 50px);
    --padding-bottom-m: clamp(30px, 18.468px + 3.604vw, 70px);
    --padding-bottom-l: clamp(50px, 35.586px + 4.505vw, 100px);
    --padding-left-s: 15px;
    --padding-left-m: 30px;
    --padding-left-l: 45px;
    --padding-right-s: 15px;
    --padding-right-m: 30px;
    --padding-right-l: 45px;
}

@media only screen and (min-width: 1200px){
    #index header .navbar-light .navbar-nav .nav-link {  color: #000;}
    #index .cbp-af-header .main-navigation #navbarSupportedContent .navbar-nav .nav-item .nav-link::before {color: #000;}
    /* .cbp-af-header .main-navigation #navbarSupportedContent .navbar-nav .nav-item .nav-link::before{all:unset; content: "|"; font-weight: 600;position: absolute; right: -15px; color: #000;} */
    .cbp-af-header .main-navigation .nav-item.dropdown .dropdown-menu{ }
    .cbp-af-header .main-navigation #navbarSupportedContent .navbar-nav .nav-item.dropdown a:after{content: unset !important;}
    
    #index header .cbp-af-header:not(.cbp-af-header-shrink) .navbar-light .navbar-nav .nav-link { color: #fff;}
#index header .cbp-af-header.cbp-af-header-shrink .navbar-light .navbar-nav .nav-link { color: #000;}
#index header .cbp-af-header:not(.cbp-af-header-shrink) .main-navigation #navbarSupportedContent .navbar-nav .nav-item .nav-link::before { color: #fff;}
#index header .cbp-af-header.cbp-af-header-shrink .main-navigation #navbarSupportedContent .navbar-nav .nav-item .nav-link::before { color: #000;}
#index header .cbp-af-header{background-color: transparent; box-shadow: unset; border: unset !important;}
#index header .cbp-af-header.cbp-af-header-shrink{background-color: #fff; border-bottom: 2px solid var(--gris-borde) !important;}
/* Home sense scroll: logo, extratop-links, idiomes en blanc */
#index header .cbp-af-header:not(.cbp-af-header-shrink) .navbar-brand img { filter: brightness(0) invert(1); }
#index header .cbp-af-header:not(.cbp-af-header-shrink) .extratop-links .imagelink img { filter: brightness(0) invert(1); }
#index header .cbp-af-header:not(.cbp-af-header-shrink) .extratop-links .idiomes li a { color: rgba(255,255,255,0.6); }
#index header .cbp-af-header:not(.cbp-af-header-shrink) .extratop-links .idiomes li.active a { color: #fff; }
#index header .cbp-af-header:not(.cbp-af-header-shrink) .extratop-links .idiomes { border-left-color: rgba(255,255,255,0.4); }
#index header .cbp-af-header:not(.cbp-af-header-shrink) .buscador-expander .search-toggler{color: #fff;}
}

@media screen and (max-width: 1199px) {
    .banner figure{width: 100%;}
    .main-navigation .dropdown-menu{width: 100% !important;}
    
    #servicio_fitxa .servicios-foto-2{display: none;}
    #servicio_fitxa .servicios-titular-2 { position: static; padding: 50px 45px; max-width: 100%; flex: 0 0 100%; }

    .empresa-first-box-left .effect1{display: none;}

    #blog .listado-especial.listado-blog .main-content-wrap article .single-post-slide-wrap {flex-direction: column;}
    #blog .listado-especial.listado-blog .main-content-wrap article .single-post-slide-wrap .post-details{position: static !important; margin: 0 !important; width: 100% !important;}
}
@media screen and (min-width: 991px) {
    #index .banner-makeup .individualbanner1 {background-image: unset !important;}
    #servicios .listado-servicios .icontext-bloc .individualbanner1 .caption h2 a{display: flex; max-width: 7ch; text-align: center; justify-content: center; }
    .bannerproducto.banner.left .foto{order:0}
    .bannerproducto.banner.left .info{order:1}
}
@media screen and (max-width: 1100px) {
    .contenedor-banner-nosotros .flotar { position: static; width: 100%; background: #f2f2f2; padding: 30px; }
    .contenedor-banner-nosotros .bloque-imagen{display: none;}
}

@media screen and (max-width: 991px) {
    .Productos.fitxa .table-legend{display: block;}
    #footer .footer-text{ padding-left: 15px; }
    #footer .footer-text p{text-align: center;}
    #footer .footer-text > .row{justify-content: center;}
    #footer .footer-contact > div.row{padding-left: 0; }
    #footer .footer-contact .btn.btn-brand{width: fit-content; max-width: 100%; margin: 0 auto;}

    #footer .footer-member > .row{justify-content: center;}
    #footer .footer-member .beauty{justify-content: end;}
    #footer .footer-member .h3{/* text-align: left !important; */}
    #footer .miembro-footer img{ width: 100px !important; height: auto;}
    #footer .miembro-footer { align-items: center; /* max-width: unset !important; flex: unset !important; width: fit-content !important; */}
    /* #footer .miembro-footer:has(+ .miembro-footer){margin-bottom: var(--margin-bottom-s);} */
    #footer .logo-footer img { margin: 0 auto; display: block; }
    #footer .footer-contact p{text-align: center;}

    .listado-categorias .product-list article.item .post-details { display: flex; justify-content: center; align-items: center; top: 0 !important; right: 0 !important; left: 0 !important; bottom: 0 !important; padding: 0 !important;}
    .listado-categorias .product-list article.item .post-details .post-content{position: static !important;}
    .listado-categorias .product-list article.item .single-post-slide-wrap .post-details a h3{line-height: normal !important;}

    #categoria-productos .listado-categorias .item:not(.active){display: none !important;}

    body .overlay .overlay-content{width: 100%;}

    #index .banner-makeup .individualbanner1 img{display: none;}
    #index .banner-makeup .individualbanner1 {background-repeat: no-repeat; background-position: top left; padding-top: 60px; padding-bottom: 60px;}
    #index .banner-makeup .individualbanner1 .caption{position: static !important;}

    #index .banner-sostenibilidad .imagen-encima-contenedor{display: none !important;}

    #productos .banner-animacion .banner-animacion-item .titol{ top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; display: flex; align-items: center; justify-content: center; text-align: center; width: 100% !important; margin: 0 !important;}

    #servicio_fitxa .servicios-foto{display: none;}
    #servicio_fitxa .servicios-titular{position: static; padding: 50px 45px;}

    #banners_servicios .banner-animacion-item{padding: 15px !important;}

    #blog .listado-especial.listado-blog .listado-pagina > .row > .item {max-width: 100%; flex: 0 0 100%;}
    
    .filter-box{padding: 0 30px !important;}
}
@media screen and (max-width: 768px) {
    
}
@media screen and (min-width: 576px) and (max-width: 768px) {
    .listado-eventos .item{max-width: 50% !important; flex: 0 0 50% !important;}
}
@media screen and (max-width: 576px) {
    .listado-blog .main-content-wrap article {height: auto;}
    .listado-blog .main-content-wrap article .single-post-slide-wrap{flex-direction: column; height: 100%;}
    .listado-blog .main-content-wrap article .single-post-slide-wrap .post-details{position: static; height: 100%;}
    .product-list .Equipo .item .single-post-slide-wrap, .product-list .Equipo .item .single-post-slide-wrap .post-details{position: static !important;}
    .product-list .Equipo .item .single-post-slide-wrap, .product-list .Equipo .item .single-post-slide-wrap .post-details .post-content-overflow{background-color: #fff !important;}
}
@media screen and (max-width: 480px) {
    
}
@media screen and (max-width: 320px) {
    
}


body .mt-l.mt-l { margin-top: var(--margin-top-l); }
body .mt-m.mt-m { margin-top: var(--margin-top-m); }
body .mt-s.mt-s { margin-top: var(--margin-top-s); }

body .mb-l.mb-l { margin-bottom: var(--margin-bottom-l); }
body .mb-m.mb-m { margin-bottom: var(--margin-bottom-m); }
body .mb-s.mb-s { margin-bottom: var(--margin-bottom-s); }

body .mr-l.mr-l { margin-right: var(--margin-right-l); }
body .mr-m.mr-m { margin-right: var(--margin-right-m); }
body .mr-s.mr-s { margin-right: var(--margin-right-s); }

body .ml-l.ml-l { margin-left: var(--margin-left-l); }
body .ml-m.ml-m { margin-left: var(--margin-left-m); }
body .ml-s.mb-s { margin-left: var(--margin-left-s); }

body .pt-l.pt-l { padding-top: var(--padding-top-l); }
body .pt-m.pt-m { padding-top: var(--padding-top-m); }
body .pt-s.pt-s { padding-top: var(--padding-top-s); }

body .pb-l.pb-l { padding-bottom: var(--padding-bottom-l); }
body .pb-m.pb-m { padding-bottom: var(--padding-bottom-m); }
body .pb-s.pb-s { padding-bottom: var(--padding-bottom-s); }

body .pr-l.pr-l { padding-right: var(--padding-right-l); }
body .pr-m.pr-m { padding-right: var(--padding-right-m); }
body .pr-s.pr-s { padding-right: var(--padding-right-s); }

body .pl-l.pl-l { padding-left: var(--padding-left-l); }
body .pl-m.pl-m { padding-left: var(--padding-left-m); }
body .pl-s.pl-s { padding-left: var(--padding-left-s); }

@media (max-width: 991px){
    body .tablet-mt-l.tablet-mt-l { margin-top: var(--margin-top-l); }
    body .tablet-mt-m.tablet-mt-m { margin-top: var(--margin-top-m); }
    body .tablet-mt-s.tablet-mt-s { margin-top: var(--margin-top-s); }
    body .tablet-mt-0.tablet-mt-0 { margin-top: 0; }

    body .tablet-mb-l.tablet-mb-l { margin-bottom: var(--margin-bottom-l); }
    body .tablet-mb-m.tablet-mb-m { margin-bottom: var(--margin-bottom-m); }
    body .tablet-mb-s.tablet-mb-s { margin-bottom: var(--margin-bottom-s); }
    body .tablet-mb-0.tablet-mb-0 { margin-bottom: 0; }

    body .tablet-mr-l.tablet-mr-l { margin-right: var(--margin-right-l); }
    body .tablet-mr-m.tablet-mr-m { margin-right: var(--margin-right-m); }
    body .tablet-mr-s.tablet-mr-s { margin-right: var(--margin-right-s); }
    body .tablet-mr-0.tablet-mr-0 { margin-right: 0; }

    body .tablet-ml-l.tablet-ml-l { margin-left: var(--margin-left-l); }
    body .tablet-ml-m.tablet-ml-m { margin-left: var(--margin-left-m); }
    body .tablet-ml-s.tablet-mb-s { margin-left: var(--margin-left-s); }
    body .tablet-ml-0.tablet-mb-0 { margin-left: 0; }

    body .tablet-pt-l.tablet-pt-l { padding-top: var(--padding-top-l); }
    body .tablet-pt-m.tablet-pt-m { padding-top: var(--padding-top-m); }
    body .tablet-pt-s.tablet-pt-s { padding-top: var(--padding-top-s); }
    body .tablet-pt-0.tablet-pt-0 { padding-top: 0; }

    body .tablet-pb-l.tablet-pb-l { padding-bottom: var(--padding-bottom-l); }
    body .tablet-pb-m.tablet-pb-m { padding-bottom: var(--padding-bottom-m); }
    body .tablet-pb-s.tablet-pb-s { padding-bottom: var(--padding-bottom-s); }
    body .tablet-pb-0.tablet-pb-0 { padding-bottom: 0; }

    body .tablet-pr-l.tablet-pr-l { padding-right: var(--padding-right-l); }
    body .tablet-pr-m.tablet-pr-m { padding-right: var(--padding-right-m); }
    body .tablet-pr-s.tablet-pr-s { padding-right: var(--padding-right-s); }
    body .tablet-pr-0.tablet-pr-0 { padding-right: 0; }

    body .tablet-pl-l.tablet-pl-l { padding-left: var(--padding-left-l); }
    body .tablet-pl-m.tablet-pl-m { padding-left: var(--padding-left-m); }
    body .tablet-pl-s.tablet-pb-s { padding-left: var(--padding-left-s); }
    body .tablet-pl-0.tablet-pb-0 { padding-left: 0; }
}
@media (max-width: 576px){
    body .mobile-mt-l.mobile-mt-l { margin-top: var(--margin-top-l); }
    body .mobile-mt-m.mobile-mt-m { margin-top: var(--margin-top-m); }
    body .mobile-mt-s.mobile-mt-s { margin-top: var(--margin-top-s); }
    body .mobile-mt-0.mobile-mt-0 { margin-top: 0; }

    body .mobile-mb-l.mobile-mb-l { margin-bottom: var(--margin-bottom-l); }
    body .mobile-mb-m.mobile-mb-m { margin-bottom: var(--margin-bottom-m); }
    body .mobile-mb-s.mobile-mb-s { margin-bottom: var(--margin-bottom-s); }
    body .mobile-mb-0.mobile-mb-0 { margin-bottom: 0; }

    body .mobile-mr-l.mobile-mr-l { margin-right: var(--margin-right-l); }
    body .mobile-mr-m.mobile-mr-m { margin-right: var(--margin-right-m); }
    body .mobile-mr-s.mobile-mr-s { margin-right: var(--margin-right-s); }
    body .mobile-mr-0.mobile-mr-0 { margin-right: 0; }

    body .mobile-ml-l.mobile-ml-l { margin-left: var(--margin-left-l); }
    body .mobile-ml-m.mobile-ml-m { margin-left: var(--margin-left-m); }
    body .mobile-ml-s.mobile-mb-s { margin-left: var(--margin-left-s); }
    body .mobile-ml-0.mobile-mb-0 { margin-left: 0; }

    body .mobile-pt-l.mobile-pt-l { padding-top: var(--padding-top-l); }
    body .mobile-pt-m.mobile-pt-m { padding-top: var(--padding-top-m); }
    body .mobile-pt-s.mobile-pt-s { padding-top: var(--padding-top-s); }
    body .mobile-pt-0.mobile-pt-0 { padding-top: 0; }

    body .mobile-pb-l.mobile-pb-l { padding-bottom: var(--padding-bottom-l); }
    body .mobile-pb-m.mobile-pb-m { padding-bottom: var(--padding-bottom-m); }
    body .mobile-pb-s.mobile-pb-s { padding-bottom: var(--padding-bottom-s); }
    body .mobile-pb-0.mobile-pb-0 { padding-bottom: 0; }

    body .mobile-pr-l.mobile-pr-l { padding-right: var(--padding-right-l); }
    body .mobile-pr-m.mobile-pr-m { padding-right: var(--padding-right-m); }
    body .mobile-pr-s.mobile-pr-s { padding-right: var(--padding-right-s); }
    body .mobile-pr-0.mobile-pr-0 { padding-right: 0; }

    body .mobile-pl-l.mobile-pl-l { padding-left: var(--padding-left-l); }
    body .mobile-pl-m.mobile-pl-m { padding-left: var(--padding-left-m); }
    body .mobile-pl-s.mobile-pb-s { padding-left: var(--padding-left-s); }
    body .mobile-pl-0.mobile-pb-0 { padding-left: 0; }

        .banner-overlay .banner-overlay-content { justify-content: center !important; align-items: center !important; }
}