/* GENERAL */
figure{margin-bottom: 0; width: 100%;}
a:hover{text-decoration: none;}
.btn{transition: all .3s ease-in-out !important;}

/* HEADER EXTRATOP */
.extratop { /* background-color: #999999; */ padding: 8px 0; }
.extratop .social-language-wrapper { display: flex; align-items: center; justify-content: end; gap: 15px; height: 100%; --header-li-font-size: 12px; }
.extratop .language-section{display: flex; gap: 10px; list-style: none; padding-left: 0; margin-bottom: 0;}
.extratop .language-section .lang-item.active a{opacity: 0.5;}
.extratop .splitter{height: 14px; width: 2px; display: block; background-color: #ffffff; }
.extratop .social-section{display: flex; gap: 10px; list-style: none; padding-left: 0; margin-bottom: 0;}
.extratop .contact-details { --header-li-font-size: 12px; display: flex; justify-content: start; align-items: center; list-style: none; padding-left: 0; margin-bottom: 0; gap: 15px; height: 100%; }

/* EXTRATOP: colapsar suavemente cuando el header hace shrink (al scrollear) */
.extratop { overflow: hidden; max-height: 70px; transition: max-height .4s ease, padding-top .4s ease, padding-bottom .4s ease, opacity .35s ease; }
.cbp-af-header-shrink .extratop { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

/* HEADER */
header .lock-container{--container-max-width: 1730px; }
.main-navigation .navbar-nav{align-items: center;}

.navigation-wrap .dropdown-menu{ padding: 25px 0; min-width: 320px; --header-menu-item-padding-top: 10px; --header-menu-item-padding-bottom: 10px; --header-menu-item-padding-left: 30px; --header-menu-item-padding-right: 30px; --header-menu-item-margin-bottom: 5px; --header-menu-item-margin-right: 0; --header-menu-item-font-weight: 400; --header-menu-item-letter-spacing: 0; --header-menu-item-line-height: normal; --header-menu-item-text-transform: capitalize; --header-menu-font-size: 14px; }
.navigation-wrap .dropdown-menu .nav-item { padding-top: 0!important; padding-bottom: 0!important; padding-left: var(--header-menu-item-padding-left) !important; padding-right: var(--header-menu-item-padding-right) !important; font-weight: var(--header-menu-item-font-weight) !important; letter-spacing: var(--header-menu-item-letter-spacing) !important; line-height: var(--header-menu-item-line-height) !important; text-transform: var(--header-menu-item-text-transform) !important; }
.navigation-wrap .dropdown-menu .nav-item .nav-link { font-weight: var(--header-menu-item-font-weight) !important; letter-spacing: var(--header-menu-item-letter-spacing) !important; line-height: var(--header-menu-item-line-height) !important; text-transform: var(--header-menu-item-text-transform) !important; }
.navigation-wrap .dropdown-menu .nav-item .nav-link span{position: relative;}
.navigation-wrap .dropdown-menu .nav-item .nav-link span:not(.toggler-inside)::before { content: ""; width: 40%; height: 1px; position: absolute; top: 105%; left: 0; right: 0; margin: 0 auto; transition: all 0.3s ease; z-index: 1100; background-color: transparent; }
.navigation-wrap .dropdown-menu .nav-item .nav-link span:not(.toggler-inside)::before { height: 3px; }
.navigation-wrap .dropdown-menu .nav-item .nav-link:hover span:not(.toggler-inside)::before, .navigation-wrap .dropdown-menu .nav-item .nav-link.active span:not(.toggler-inside)::before { width: 100%; }
.navigation-wrap .dropdown-menu .nav-item .nav-link:hover span:not(.toggler-inside)::before, .navigation-wrap .dropdown-menu .nav-item .nav-link.active span:not(.toggler-inside)::before { background-color: var(--header-menu-active-bg-color); }


.dropdown-menu .nav-item + .nav-item{ margin-top: 5px; }

/* FOOTER */
footer { --content-heading-color: var(--footer-p-color); padding-top: 50px;}
footer  .single-footer-con-info .h3 { color: #7b7766; font-size: 20px; font-weight: 600; line-height: 1; margin-bottom: 26px; }

@media only screen and (max-width: 767.98px) {
    footer .single-footer-con-info .h3 { font-size: 20px; margin-bottom: 15px; }
}

footer .single-footer-con-info a { display: block; }
footer .single-footer-con-info p { margin-bottom: 0; }
footer .footer-bottom-left a { color: #fff !important; font-size: 26px; font-weight: 600; line-height: 1; }
footer .footer-social-icons.icons-rounded a { background-color: #7b7766; border-radius: 50%; line-height: 45px; text-align: center; margin-left:0; margin-right: 10px; font-size: 20px; height: 45px; width: 45px;    color: #fff; }
footer .footer-social-icons.icons-rounded a:hover{color:#fff;}

footer { --content-h2-font-size: 40px; --content-h3-font-size: 20px; --content-h4-font-size: 18px; --content-heading-font-weight: 600; --content-heading-line-height: 1; --content-title-margin-bottom: 26px; --content-heading-color: var(--main-color-1); --content-strong-color: var(--main-color-1); --footer-a-hover-color: #999999; }
footer .h4 { margin-bottom: 10px; }
footer .valign-end > div, footer .valign-end{width: 100%; justify-content: center;}

footer .extrafooter { margin-top: 30px; padding-top: 15px; padding-bottom: 15px; --footer-p-font-size: 14px; }
footer .footer-social-icons {--footer-p-font-size: 13px; font-size: 13px;}
footer .footer-social-icons a { line-height: 1; margin-left: 30px; }
footer .footer-social-icons a:first-child { margin-left: 0; }

/* SCROLLBAR */
body::-webkit-scrollbar-thumb, .table-responsive::-webkit-scrollbar-thumb, .list::-webkit-scrollbar-thumb { border-radius: 0; border: 0; background-color: #999999; }
body::-webkit-scrollbar, .table-responsive::-webkit-scrollbar, .list::-webkit-scrollbar { -webkit-appearance: none; width: 10px; height: 5px; background-color: rgba(253, 198, 87, 0.3); }

/* OPINIONES */
/* H2 */
.Opiniones .swiper .swiper-wrapper{align-items: flex-start;} /* abans center: les opinions curtes deixaven un buit gran sota el títol */
.Opiniones .swiper .title_wrapper:has(.h3) { margin-bottom: 18px; padding-bottom: 0; position: relative; left: 0; right: 0; --content-title-margin-bottom: 0; --content-h3-font-size: 19px; --content-heading-line-height: 1.2; --content-heading-font-weight: 600; }
/* Sense filet sota el nom: quedava just a sota del filet del títol de la secció */

/* SLIDERBANNER */
.sliderbanner.sliderbanner_home { justify-content: center; align-items: center; --content-h2-font-size: min(max(16px, 2vw), 60px); --content-heading-line-height: 4vw; --content-heading-font-weight: bold; --content-p-font-size: min(max(14px, 1.5vw), 35px); --content-heading-color: #000000; --content-p-color: #000000; --content-a-color: #000000; --content-a-hover-color: #000000; }
.sliderbanner_home .banner-content{ max-width: 70%; padding: 30px; border-left: 6px solid #797664; background: rgba(255, 255, 255, 0.40); }
.sliderbanner_home .banner-content .title{ margin-bottom: 0; }
.sliderbanner_home .banner-content .content-text{ font-size: min(max(14px, 1.5vw), 35px); }

/* GALERIAS LISTADO */
.galeria-listado .row > .blog-content-area-wrap {width: 100%; margin-left: -10px; margin-right: -10px;}
.galeria-listado .item{padding: 10px;}

/* BANNER 1 HOME */
@media (min-width: 991px){
  #bannershome .item:not(.item-especial) { padding-right: 7.5px; padding-left: 7.5px; }
}
#bannershome .item{padding-left: 10px; padding-right: 10px;}
.individualbanner1_home { --content-p-color: #ffffff; --content-h3-font-size: 22px; --content-heading-color: #000000; --content-a-color: #000000; --content-a-hover-color: #000000; --content-title-margin-bottom: 15px; }
.individualbanner1_home .portfolio-thumb-wrapper { position: relative; }
.individualbanner1_home .portfolio-thumb-wrapper .portfolio-thumb{width: 100%;}
.individualbanner1_home .floating-banner-content{display: flex; height: 100%; width: 100%; align-items: end; text-align: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.individualbanner1_home .floating-banner-content-details{height: 100%;display: flex;justify-content: center;flex-direction: column;}
.individualbanner1_home .floating-banner-content-details .content-text{transition: all .3s ease-in-out;transform: translateY(-20px);opacity: 0;margin-bottom: 20px; padding: 30px;}
.individualbanner1_home .floating-banner-content-details .btn{transition: all .3s ease-in-out;transform: translateY(20px);opacity: 0;margin-left: auto;margin-right: auto;position: absolute;bottom: 30px;left: 0;right: 0;}
.individualbanner1_home:hover .floating-banner-content-details .content-text,
.individualbanner1_home:hover .floating-banner-content-details .btn{transform: none; opacity: 1;}
.individualbanner1_home .floating-banner-content-details .btn:hover{ gap: 10px;}
.individualbanner1_home .banner-content-details{padding-top: 15px;}

/* SWIPER */
.swiper .swiper-button { width: 44px; height: 44px; margin-top: -22px; border-radius: 100px; background: #dddddd; color: #999999; transition: background .2s ease, transform .2s ease, box-shadow .2s ease, opacity .2s ease; --swiper-navigation-size: 14px; --swiper-navigation-color: #111; }
.swiper .swiper-button-prev { left: 14px; }
.swiper .swiper-button-next { right: 14px; }
.swiper .swiper-button:after{ content: none; }
.swiper .swiper-button:hover { opacity: 1; /* transform: scale(1.08); */ /* box-shadow: 0 4px 14px rgba(0, 0, 0, .28); */ }
.swiper .swiper-button-disabled { opacity: 0.5; box-shadow: none; pointer-events: none; }
.swiper .swiper-button svg { stroke-width: 2px; }

/* CARRUSELES: evitar el salto de maquetacion antes de que cargue/inicialice Swiper.
   Sin esto los .swiper-slide son bloques a ancho completo y se apilan en vertical;
   al inicializarse Swiper los pone en fila y la pagina "pega un bote".
   Esto es la red generica (1 slide a la vista). Las plantillas que saben cuantas
   columnas tienen (galerias y carruseles de producto) llevan su propio bloque con
   selector por #id, que gana a este por especificidad y reserva el hueco exacto. */
.swiper:not(.swiper-initialized) { overflow: hidden; }
.swiper:not(.swiper-initialized) > .swiper-wrapper { display: flex; flex-wrap: nowrap; }
.swiper:not(.swiper-initialized) > .swiper-wrapper > .swiper-slide { flex: 0 0 auto; width: 100%; }
/* Mientras no hay JS, las flechas y los puntos no hacen nada: se ocultan. */
.swiper:not(.swiper-initialized) > .swiper-button, .swiper:not(.swiper-initialized) > .swiper-pagination { visibility: hidden; }

/* PAGINACION SWIPER (global) — dots gris claro + activo color marca */
.swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 5px !important; border-radius: 50%; background: #d6d6d6; opacity: 1; transform: none; box-shadow: none; transition: background .2s ease; }
.swiper-pagination-bullet-active { width: 8px; height: 8px; background: #7B7766; opacity: 1; box-shadow: none; }
.swiper-pagination-bullet-active:hover { width: 8px; height: 8px; background: #7B7766; box-shadow: none; }
.swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; }
.swiper-pagination-bullet:hover { background: #b9b9b9; }
.swiper-pagination-bullet-active:hover { width: 8px; height: 8px; background: #6a6659; box-shadow: none; }
.swiper:has(> .swiper-pagination) { padding-bottom: 40px; }
/* PAGINADOR COMPACTO (dynamicBullets) — solo galerias con muchas fotos (fichas de Proyecto).
   Swiper calcula el ancho del paginador y el desplazamiento con bullet.offsetWidth, que NO
   incluye margenes. El bloque de arriba fuerza 'margin: 0 5px !important', asi que Swiper
   creia 8px cuando ocupaban 18px y recortaba los bullets: por eso fallo el primer intento.
   Solucion: dentro del variante dinamico el margen se mete DENTRO de la caja (18px) y el
   punto se pinta con ::after, de forma que offsetWidth coincide con lo que se ve. */
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet { margin: 0 !important; width: 18px; height: 18px; background: transparent; position: relative; }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #d6d6d6; transition: background .2s ease; }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet:hover::after { background: #b9b9b9; }
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active::after { background: #7B7766; }

/* GALERIA MARCAS */
.galeria-marcas .gallery.swiper{ position: relative; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 54px; padding-right: 54px; }
/* Tapar los canalones (padding) para que NO asome el 6o slide. Color = fondo seccion #eeeeee (background-type3) */
.galeria-marcas .gallery.swiper::before,
.galeria-marcas .gallery.swiper::after{ content:""; position:absolute; top:0; bottom:0; width:54px; background:#eeeeee; z-index:2; pointer-events:none; }
.galeria-marcas .gallery.swiper::before{ left:0; }
.galeria-marcas .gallery.swiper::after{ right:0; }
.galeria-marcas .gallery .swiper-wrapper{ margin-left: auto; margin-right: auto; }
.galeria-marcas .gallery .swiper-button{ z-index:3; }
.galeria-marcas .gallery .swiper-button-prev{ left: 2px; }
.galeria-marcas .gallery .swiper-button-next{ right: 2px; }
.galeria-marcas .gallery .item {padding: 10px; background-color: #ffffff;}
.galeria-marcas .gallery .item img{display: block; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }


#marcas .title_wrapper:has(.h1) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0;}
#marcas .title_wrapper .h1 { margin-top: -4px; margin-bottom: 14px;}
#marcas .title_wrapper:has(.h1)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }
#marcas .galeria-marcas-2 .item{ height: auto; display: flex; align-items: center; background-color: rgba(255, 255, 255, 0.6); padding-bottom: 35px; padding: 25px !important; border: 1px solid #eee; }
#marcas .galeria-marcas-2 .item > div{width: 100%;}

/* INICIO */
/* FONDO CONTACTO HOME */
#index .fondo-contacto { height: 25vw !important; min-height: 410px; background-image: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .5)), url(/media/images/contacto/computer-768696_1920.jpg); padding: 45px; background-size: cover; text-align: center; background-position-y: center; height: 450px; margin-left: 0; --content-heading-color: #000000; --content-p-color: #000000; --content-a-color: #000000; --content-a-hover-color: #000000; }
#index .fondo-contacto .row{height: 100%; align-items: center; }
#index .fondo-contacto a{font-weight: 300;}
#index .fondo-contacto h2{ font-size: 20px; font-weight: normal;  margin-top: -14px;  margin-bottom: 15px;}

/* TITULOS HOME */
/* H2 */
#index .title_wrapper:has(.h2) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0; --content-title-margin-bottom: 0; --content-h2-font-size: 22px; --content-heading-line-height: 1; --content-heading-font-weight: 600; }
#index .title_wrapper .h2 { margin-top: -4px; }
#index .title_wrapper:has(.h2)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }

/* BLOQUE INICIAL HOME */
#index .bloque-inicial{position: relative;}
/* Filet sota el bloc inicial eliminat: quedava enganxat als botons i duplicava el de "Destacamos" */


/* EMPRESA */
#empresa .title_wrapper:has(.h2) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0; --content-title-margin-bottom: 0; --content-h2-font-size: 22px; --content-heading-line-height: 1; --content-heading-font-weight: 600; }
#empresa .title_wrapper .h2 { margin-top: -4px; }
#empresa .title_wrapper:has(.h2)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }


/* SANTOS */
/* #santos .logossantos{}
#santos .logossantos img{float: none!important;    display: block;    text-align: center;    margin: 0 auto;    width: 40%;    max-width: 300px;}
#santos .logossantos img:first-child{margin-bottom:25px;}
#santos .foto{padding:0;}
#santos .text{padding:30px;} */

#santos .fullwidth:has(.menusantoshor){padding-top: 12px; padding-bottom: 12px;}
#santos .fullwidth:has(.reusable-block){padding-top: 0; padding-bottom: 0;}
#santos .menusantoshor { display: flex; justify-content: center; list-style: none; margin-bottom: 0; padding-left: 0; --content-li-font-size: 14px; flex-wrap: wrap;}
#santos .menusantoshor li:not(:first-child)::before {	content: '|'; padding-left: 10px; margin-right: 10px;}
#santos .menusantoshor li a{opacity:0.6;}
#santos .menusantoshor li.active a,#santos .breadcrumb.breadcrumb li:hover a{opacity:1;}
#santos .title_wrapper:has(.h1) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0;}
#santos .title_wrapper .h1 { margin-top: -4px; margin-bottom: 14px;}
#santos .title_wrapper:has(.h1)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }
#santos:not(.colecciones-santos, .acabados-santos, .accesorios-de-cocina) .title_wrapper:has(.h2) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0; --content-title-margin-bottom: 0; --content-h2-font-size: 22px; --content-heading-line-height: 1; --content-heading-font-weight: 600; }
#santos:not(.colecciones-santos, .acabados-santos, .accesorios-de-cocina) .title_wrapper .h2 { margin-top: -4px; }
#santos:not(.colecciones-santos, .acabados-santos, .accesorios-de-cocina) .title_wrapper:has(.h2)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }

.accesorios-de-cocina p,
.acabados-santos p{margin-bottom: 15px;}

#santos .nofancy{margin-top: 15px;}

#santos .row > .blog-content-area-wrap { width: 100%; padding-right: 20px; padding-left: 20px; margin-left: 0; margin-right: 0;}
#santos .section-title-wrap{ font-size: 13px; font-weight: 500; margin-bottom: 80px; padding-bottom: 65px; }
#santos .section-title-wrap:after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }

@media (min-width: 991px){
  #santos .contingut .foto{padding-left: 0;}
  #santos .contingut .text{padding-right: 30px;}
  #santos .contingut2 .foto{padding-right: 0;}
  #santos .contingut2 .text{padding-left: 30px;}
}

/* SERVICIOS */
/* --- Pestanyas --- */
#servicios .nav-tabs{ justify-content: space-between; padding-bottom: 25px; border: none; }
#servicios .nav-tabs .nav-item{ font-family: 'Roboto Condensed', sans-serif; font-size: 20px; max-width: 150px; text-align: center; line-height: normal; }
#servicios .nav-tabs .nav-item a{ color: #000; background: transparent; }
#servicios .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active{ border: none !important; margin: 0 auto; }
#servicios .nav-tabs .nav-link:focus, #servicios .nav-tabs .nav-link:hover, #servicios .nav-tabs .nav-link{ border: none !important; }
#servicios .tab-content{ margin-top: 25px; }
#servicios .relative > div{ position: relative; }
#servicios .liniapassos{ position: absolute; top: 55px; width: calc(100% - 80px); z-index: -10; left: 0; right: 0; margin: 0 auto; }
#servicios .item {
    margin-bottom: 25px;
}
#servicios .nav-link .number{ background-color: #999; padding: 25px; color: #fff; border-radius: 50%; width: 90px; height: 90px; display: block; text-align: center; font-size: 36px; line-height: normal; margin: 0 auto 15px; -webkit-transition: background-color .3s ease, -webkit-transform .3s ease; -o-transition: background-color .3s ease, -o-transform .3s ease; transition: background-color .3s ease, transform .3s ease; }
#servicios .nav-link:hover .number{ background-color: #797664; -webkit-transform: translateY(-3px); transform: translateY(-3px); }
#servicios .nav-link.active .number{ background-color: #797664; }
#servicios .product-list .post-content h2{font-size: 18px}
#servicios .product-list .post-content{margin-top: 20px;}
#servicios .tab-pane{ margin-left: auto; margin-right: auto; max-width: var(--container-max-width); padding-top: var(--container-padding-top); padding-bottom: var(--container-padding-bottom); display: none; opacity: 0; -webkit-transform: translateY(12px); transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; /* 2a declaracion: los navegadores que no entiendan allow-discrete la descartan y se quedan con la de arriba, en vez de perder toda la transicion. */ transition: opacity .3s ease, transform .3s ease, display .3s allow-discrete; }
#servicios .tab-pane.show{ display: flex; opacity: 1; -webkit-transform: none; transform: none; }
@starting-style{
  #servicios .tab-pane.show{ opacity: 0; transform: translateY(12px); }
}
@media (prefers-reduced-motion: reduce){
  #servicios .nav-link .number, #servicios .tab-pane{ transition: none; }
  #servicios .tab-pane, #servicios .nav-link:hover .number{ transform: none; }
}

#servicios .title_wrapper:has(.h1) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0;}
#servicios .title_wrapper .h1 { margin-top: -4px; margin-bottom: 14px;}
#servicios .title_wrapper:has(.h1)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }
#servicios main > div > div:not(.tab-pane) .title_wrapper:has(.h2) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0; --content-title-margin-bottom: 0; --content-h2-font-size: 22px; --content-heading-line-height: 1; --content-heading-font-weight: 600; }
#servicios main > div > div:not(.tab-pane) .title_wrapper .h2 { margin-top: -4px; }
#servicios main > div > div:not(.tab-pane) .title_wrapper:has(.h2)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }


#contacte .title_wrapper:has(.h1) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0;}
#contacte .title_wrapper .h1 { margin-top: -4px; margin-bottom: 14px;}
#contacte .title_wrapper:has(.h1)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }
#contacte p{margin-bottom: 15px;}
#contacte label:has(.form-control){padding-left: 15px; padding-right: 15px;}
#contacte h2 { font-weight: normal; font-size: 20px; }
#contacte #accept{font-size: 14px; padding: 15px;}
#contacte #accept input{margin: 0 10px !important;}

body.showroom .title_wrapper:not(.no-line):has(.h2) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0; --content-title-margin-bottom: 0; --content-h2-font-size: 22px; --content-heading-line-height: 1; --content-heading-font-weight: 600; }
body.showroom .title_wrapper:not(.no-line) .h2 { margin-top: -4px; }
body.showroom .title_wrapper:not(.no-line):has(.h2)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }


#profesionales .title_wrapper:has(.h1),
#buscador .title_wrapper:has(.h1),
#politica-cookies .title_wrapper:has(.h1),
#aviso-legal .title_wrapper:has(.h1) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0;}
#profesionales .title_wrapper .h1,
#buscador .title_wrapper .h1,
#politica-cookies .title_wrapper .h1,
#aviso-legal .title_wrapper .h1 { margin-top: -4px; margin-bottom: 14px;}
#profesionales .title_wrapper:has(.h1)::after,
#buscador .title_wrapper:has(.h1)::after,
#politica-cookies .title_wrapper:has(.h1)::after,
#aviso-legal .title_wrapper:has(.h1)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }

/* COMPARTIR PAGINA */
.share-page .share-title{ --content-p-font-size: 15px; }
.share-page .share-item{ display: flex; flex-wrap: wrap; gap: 15px; align-items: center; justify-content: start; --content-a-color: #444444; --content-p-font-size: 16px; }
.share-page { display: flex; flex-wrap: wrap; border-top: 1px solid #e7e7e7; border-bottom: 1px solid #e7e7e7; justify-content: center; align-items: center; gap: 15px; padding-top: 15px; padding-bottom: 15px; margin-top: 30px; margin-bottom: 30px; }

/* FICHA PROYECTOS */
#contentfitxa .infotecnica .blocinfo { background: #eee; padding: 15px 25px; margin-bottom: 25px; }


.breadcrumb-container{padding-top: 12px; padding-bottom: 12px; padding-left: 0; padding-right: 0;}
.breadcrumb-container .breadcrumb-list{display: flex; align-items: center;}
.breadcrumb-container .breadcrumb-list li{margin-top: 0; margin-bottom: 0;}
.breadcrumb-item+.breadcrumb-item::before{color: #fff; line-height: 1;}
/* Del breadcrumb solo se muestra la PRIMERA categoria de cada nivel (1, 2 y 3).
   Truco: "X ~ X" selecciona toda X que venga precedida de otra X, asi que cada
   regla oculta los duplicados de su nivel y deja el primero. Funciona aunque los
   niveles vengan intercalados y sin depender de :nth-child.
   Para admitir un nivel 4 basta con anadir otra linea igual con [data-nivel="4"]. */
.breadcrumb-container .breadcrumb-list li[data-nivel="1"] ~ li[data-nivel="1"] { display: none; }
.breadcrumb-container .breadcrumb-list li[data-nivel="2"] ~ li[data-nivel="2"] { display: none; }
.breadcrumb-container .breadcrumb-list li[data-nivel="3"] ~ li[data-nivel="3"] { display: none; }


/* FICHA COLECCIONES */
.Colecciones.fitxa .blog-content-area-wrap{margin: 0 !important;}
.Colecciones.fitxa .blog-content-area-wrap .gallerycontent {margin-left: 0; margin-right: 0; padding: 5px; margin-top: 20px;}
.Colecciones.fitxa .blog-content-area-wrap .gallerycontent .item img{aspect-ratio: 1; object-fit: cover;}


.Colecciones.fitxa .title_wrapper:has(.h2) { margin-bottom: 30px; padding-bottom: 15px; position: relative; left: 0; right: 0;}
.Colecciones.fitxa .title_wrapper .h2 { margin-top: -4px; margin-bottom: 14px;}
.Colecciones.fitxa .title_wrapper:has(.h2)::after { background-color: #797664; content: ''; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); height: 4px; width: 70px; }

#contactfitxa h3{font-size: 20px;text-align: left;}
#contactfitxa p{padding-bottom: 25px;}
#contactfitxa ul{display: flex;flex-wrap: wrap;padding: 0 25px;}
#contactfitxa ul li{text-align:left; margin-right:25px;margin-bottom:15px;}
#contactfitxa ul li a{color:#444;}
#contactfitxa ul li.tel:before{content: "\f095"; font-family: "FontAwesome"; margin-right: 10px; font-size: 14px; background: #999; padding: 10px; color: #fff; border-radius: 50%; width: 36px; height: 36px; display: inline-block; line-height: initial; text-align: center;}
#contactfitxa ul li.mail:before{content:"\f003"; font-family: "FontAwesome"; margin-right: 10px; font-size: 14px; background: #999; padding: 10px; color: #fff; border-radius: 50%; width: 36px; height: 36px; display: inline-block; line-height: initial; text-align: center;}
#contactfitxa.contactoutlet i{font-size:40px; color:green;text-align: left;display:block;}
#contactfitxa.contactoutlet h3{text-align:left;}
#contactfitxa.contactoutlet p {    padding:0;text-align: left;}
#contactfitxa.contactoutlet ul {    display: block;    padding: 0 25px;}
#contactfitxa.contactoutlet ul li{margin-bottom: 5px;}
#contactfitxa li.wha a{display: flex;flex-wrap: wrap;}
#contactfitxa li.wha a span{margin-top: 10px;	margin-left: 10px;}

#solicita{margin-top:40px;}
#formfitxa .contact-form-wrapper { background-color: #eee; padding: 30px; --form-input-bg: #ffffff; --form-input-height: 44px; --form-input-color: #000000; --form-input-placeholder-color: #000000; --form-input-margin-top: 0; }
#formfitxa #accept{display: inherit; font-size: 14px; margin-block: 15px;}
#TitleForm{font-size:22px; text-align: center;margin-top:40px;}

/* FILTRO COLECCIONES */
/*==============================
Start Portfolio Area Wrapper
================================*/
.filter 

.portfolio-filter-menu { margin-bottom: 40px;margin-top: 40px; }
.todos{ background-color: #eee; }
.portfolio-filter-menu ul li, .menu-horizontal li { border: 1px solid #e7e7e7; color: #222222; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1; padding: 20px 30px; margin-right: 10px; margin-bottom: 10px; text-transform: uppercase; position: relative; cursor: pointer; }
.menu-horizontal li a{ color: #222222!important; }
.menu-horizontal li a:hover, .menu-horizontal li.active a { color: #002C83!important; }
.menu-horizontal ul { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; justify-content: center !important;  }
.portfolio-filter-menu ul li:before { background-color: #002C83; content: ''; position: absolute; left: 0; bottom: 0; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; height: 3px; width: 100%; }
.portfolio-filter-menu ul li.active:before { opacity: 1; visibility: visible; }
.portfolio-filter-menu ul li:last-child { margin-right: 0; }

/* Pestanyas del filtro de categorias (radio) — mismo look que .portfolio-filter-menu.
   .filter-pills la ponen las plantillas protected/modules/{Linea}/filter.html (Colecciones, Proyectos). */
.filter-pills { margin-top: 40px; margin-bottom: 40px; }
.filter-pills .filters-list.collapse { display: block; }
.filter-pills .filter-field:not(.d-none) { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.filter-pills .filter-buttons { margin: 0; }
.filter-pills .filter-field > .btn { display: none; }
.filter-pills .form-check { padding: 0; margin: 0; }
.filter-pills .form-check-input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.filter-pills .form-check-label, .filter-pills #cancelar { display: block; position: relative; border: 1px solid #e7e7e7; background-color: #fff; color: #222222; cursor: pointer; font-size: 14px; font-weight: 600; line-height: 1; margin: 0; padding: 20px 30px; text-align: center; text-transform: uppercase; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }
.filter-pills .form-check-label::before { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background-color: var(--main-color-1); opacity: 0; visibility: hidden; -webkit-transition: 0.4s; -o-transition: 0.4s; transition: 0.4s; }
.filter-pills .form-check-input:checked + .form-check-label::before { opacity: 1; visibility: visible; }
.filter-pills .form-check-label:hover, .filter-pills #cancelar:hover { color: var(--main-color-1); }
.filter-pills #cancelar:hover, .filter-pills #cancelar:focus, .filter-pills #cancelar:active { background-color: #eee; border-color: #e7e7e7; box-shadow: none; }
.filter-pills .form-check-input:focus-visible + .form-check-label { outline: 2px solid var(--main-color-1); outline-offset: 2px; }
/* "TODOS" = boton de reset del filtro, siempre el primero de la fila */
.filter-pills #cancelar { background-color: #eee; }

/* LISTADO DE COLECCIONES */
.item-list-wrapper.Colecciones .item-list > .row{margin-left: -5px; margin-right: -5px;}
.item-list-wrapper.Colecciones .item-list .item{padding-left: 5px; padding-right: 5px;}


/*llistat de productes filtrables*/
.item-list .item{margin-bottom: 10px;}
.item-list .item > div::before { background-color:transparent; content: ""; position: inherit; left: inherit; top: inherit; pointer-events: none; height: inherit; width: inherit; z-index: inherit; }
.item-list .item > div .item-miniature::before { background-color: rgba(0, 0, 0, 0.0); content: ""; position: absolute; left: 0; top: 0; pointer-events: none; height: 100%; width: 100%; transition: 0.5s; }
.item-list .item > div:hover .item-miniature:before { background-color: rgba(0, 0, 0, 0.3); content: ""; position: absolute; left: 0; top: 0; pointer-events: none; height: 100%; width: 100%; }
.item-list .item .item-miniature {position:relative}
.item-list.Colecciones .item .item-miniature img{width:100%; max-height: 267.5px;}
.item-list .item > div{ height: auto;}
.item-list .item > div .item-content { margin-top: 20px; color: #666666; padding: 0; display: block; }
.item-list .item > div .item-content .title {    font-size: 18px;}
.item-list .item > div .masonry-grid{display: flex;flex-wrap: wrap;}
.item-list .item .modern-masonry, .modern-basic {    margin-top: 0px;}

/*==========================================
61. Start Blog Details Page Content
===========================================*/
.single-post-details { font-size: 16px; line-height: 2; }
.single-post-details .blog-post-head { margin-top: 50px; }
.single-post-details .blog-post-head h2 { color: #333333; font-size: 30px; margin-top: -10px; }
.single-post-details .blog-post-thumb-gallery { max-height: 500px; overflow: hidden; }
.single-post-details .post-meta { margin-bottom: 25px; }
.single-post-details .post-meta a { color: #212121; margin-right: 20px; font-size: 14px; }
.single-post-details .post-meta a:last-child { margin-right: 0; }
.single-post-details .post-meta a i { color: #002C83; margin-right: 5px; }
.single-post-details__footer { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 40px 0 47px; }

.single-post-details__footer__item { border-top: 1px solid #e7e7e7; max-width: 50%; -ms-flex-preferred-size: 50%; flex-basis: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px 20px; }
.single-post-details__footer__item:nth-child(1n + 3) { border-bottom: 1px solid #e7e7e7; }
.single-post-details__footer__item:nth-child(2n + 1) { border-right: 1px solid #e7e7e7; padding-left: 0; }
.single-post-details__footer__item:nth-child(2n + 2) { padding-right: 0; }
.single-post-details__footer__item:first-child { border-top: 1px solid #e7e7e7; }
.single-post-details__footer__item h5 { font-size: 15px; line-height: 1; font-weight: 600; text-transform: uppercase; margin-bottom: 0; }
.single-post-details__footer__item h5 i { color: #888888; margin-right: 10px; }
.single-post-details__footer__item .cate-list li { margin-right: 10px; }
.single-post-details__footer__item .cate-list li:last-child { margin-right: 0; }
.single-post-details__footer__item .cate-list li a { color: #666666; font-size: 15px; }
.single-post-details__footer__item .cate-list li a:hover { color: #002C83; }
.single-post-details__footer__item .share-item a { color: #222222; margin-right: 15px; }
.single-post-details__footer__item .share-item a:last-child { margin-right: 0; }
.single-post-details__footer__item .share-item a:hover { color: #002C83; }
.single-post-details p, .single-post-details blockquote { margin-bottom: 20px; }
.single-post-details p:last-child, .single-post-details blockquote:last-child { margin-bottom: 0; }

/*============================
Start Comment Area Wrapper
============================*/
.comment-area-wrapper h3 { font-size: 16px; margin-bottom: 30px; }
.single-comment-wrap { font-size: 14px; line-height: 1.6; margin-bottom: 35px; }
.single-comment-wrap:last-child { margin-bottom: 0; }
.single-comment-wrap.comment-reply { margin-left: 50px; }
.single-comment-wrap .author-thumb { margin-right: 15px; height: 70px; max-width: 70px; -ms-flex-preferred-size: 70px; flex-basis: 70px; overflow: hidden; }
.single-comment-wrap .comments-info { margin-top: -4px; -ms-flex-preferred-size: calc(100% - 70px); flex-basis: calc(100% - 70px); }
.single-comment-wrap .comment-footer a { font-size: 12px; color: #666666; }
.single-comment-wrap .comment-footer a strong { color: #222222; }
.single-comment-wrap .comment-footer a.btn-reply:hover { color: #002C83; }

/*================================
63. Start Portfolio Details Content
===================================*/
.port-con-item h2 { color: #002C83; font-weight: 600; margin-top: -10px; margin-bottom: 52px; }
.port-feature-content-inner .single-welcome-feature { margin-top: 0; }
.port-feature-content-inner .single-welcome-feature:nth-child(1n + 2) { margin-top: 54px; }
.port-feature-content-inner .single-welcome-feature p:last-child { margin-bottom: 0; }
.port-details-con-inner .single-post-details__footer { display: block; margin-top: 0; }
.port-details-con-inner .single-post-details__footer__item { max-width: 100%; border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid #e7e7e7; padding: 20px 0; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
.port-details-con-inner .single-post-details__footer__item:first-child { border-top: 1px solid #e7e7e7; }
.port-details-con-inner .single-post-details__footer__item .footer-item-left { min-width: 25%; margin-right: 15px; }
.port-details-pagination { padding: 100px; }
.port-details-pagination a { color: #222222; font-size: 40px; line-height: 1; }
.port-details-pagination a.middle-icon { font-size: 14px; border: 2px solid; text-align: center; line-height: 56px; width: 60px; height: 60px; }
.port-details-pagination a:hover { color: #002C83; }
.full-width-section-title-con { color: #fff; height: 240px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
.full-width-section-title-con h2 { color: #fff; font-size: 40px; margin-bottom: 0; }
.work-process-content .single-desc-item-wrap { color: #666666; }
.work-process-content .single-desc-item-wrap P:last-child { margin-bottom: 0; }
.work-process-content .single-desc-item-wrap .desc-number { border-color: #002C83; color: #002C83; font-weight: 600; }
.port.is-affixed .inner-wrapper-sticky { bottom: -20px !important; }


/* FICHA SERVICIOS */
.fitxa.Servicios .gallery img{aspect-ratio: 1; object-fit: cover;}

/* LISTADO PROYECTOS */
.item-list-wrapper.Proyectos .item-list > .row{margin-left: -5px; margin-right: -5px;}
.item-list-wrapper.Proyectos .item-list .item{padding-left: 5px; padding-right: 5px;}
.menu-vertical ul li {list-style: none;margin:0}
.menu-vertical li a { border: 1px solid #e7e7e7; border-bottom: 0; display: block; font-weight: 600; font-size: 14px!important; line-height: 1!important; text-transform: uppercase; padding: 20px;}
.menu-vertical .category-menu{padding: 0;}
.menu-vertical ul{border-bottom: 1px solid #e7e7e7;}
/* FICHA PROYECTOS */
.Proyectos.fitxa .blog-content-area-wrap{padding-top: 20px;}
.Proyectos.fitxa .blog-content-area-wrap .item img{aspect-ratio: 1; object-fit: cover;}
.Proyectos.fitxa .quieres-ver{ font-weight: normal; margin-bottom: 10px; margin-top: 15px; }
.Proyectos.fitxa .infotecnica .content-text { background: #eee; padding: 15px 25px; margin-bottom: 25px; }

@media (max-width: 991px){
  .seccion-contenido{order: 0;}
  .seccion-imagen{order: 1;}
}

.item-list.swiper.Proyectos .item{padding-left: 0; padding-right: 0;}
.item-list.swiper.Proyectos .item .title{color: #000000;}
/* menu auto - sidebar categorías */
button.mobile-menu-auto{margin-bottom:15px;}
.menuauto{margin-bottom:15px;}
@media only screen and (min-width: 991px) {
    button.mobile-menu-auto{display:none;}
    .menuauto.collapse{display:block; border-bottom: 1px solid #e7e7e7;}
}
/* fi menu auto */

/* Botón toggle mobile del AutoMenu */
button.mobile-menu-auto {
    background: transparent;
    border: none;
    color: #222;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.05em;

    padding: 8px 14px;
    cursor: pointer;
    border-radius: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
button.mobile-menu-auto:hover {
    background: #f5f5f5;
}

@media only screen and (min-width: 991px) {
    button.mobile-menu-auto { display: none; }
}

/* icontext - icono imagen a la izquierda del texto */
.icontext.d-flex { gap: 20px; }
.icontext .icon-img { flex-shrink: 0; }
.icontext .icon-img img { display: block; }
.icontext .icon-img.xSmallText img { width: 40px;  height: 40px;  }
.icontext .icon-img.smallText  img { width: 60px;  height: 60px;  }
.icontext .icon-img.mediumText img { width: 80px;  height: 80px;  }
.icontext .icon-img.bigText    img { width: 100px; height: 100px; }
.icontext .icon-img.giantText  img { width: 120px; height: 120px; }

/* Logo cabecera: iOS Safari deformaba el logo (height:100% + width:auto en item flex) */
header .navbar-brand{flex-shrink: 0;}
header .navbar-brand img{height: var(--header-navbar-logo-height); width: auto; max-width: 100%; object-fit: contain; object-position: left center;}
header .cbp-af-header.header-transparent.cbp-af-header-shrink .navbar-brand img{height: var(--header-shrink-navbar-logo-height);}

/* ===== Listado de marcas (/marcas): foto cuadrada + nombre + categoria ===== */
.item-list-wrapper.Marcas{ margin-top: 80px; }
.item-list-wrapper.Marcas .item-list > .row{ row-gap: 44px; }
.item-list-wrapper.Marcas .item-list .item{ margin-bottom: 0; }
.item-list-wrapper.Marcas .item-list .item .item-miniature{ position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #f5f3ef; }
.item-list-wrapper.Marcas .item-list .item .item-miniature a,
.item-list-wrapper.Marcas .item-list .item .item-miniature picture{ display: block; width: 100%; height: 100%; }
.item-list-wrapper.Marcas .item-list .item .item-miniature img{ width: 100%; height: 100%; max-height: none; object-fit: cover; transition: transform .5s ease; }
.item-list-wrapper.Marcas .item-list .item:hover .item-miniature img{ transform: scale(1.04); }
.item-list-wrapper.Marcas .item-list .item > div:hover .item-miniature::before{ background-color: rgba(0, 0, 0, .12); z-index: 1; }
/* Marcas sin foto: logo de Boix pequeno y atenuado sobre el fondo */
.item-list-wrapper.Marcas .item-list .item .item-miniature img[src*="logo_boix_interiorisme"]{ object-fit: contain; padding: 0 20%; opacity: .3; filter: grayscale(1); mix-blend-mode: multiply; }
.item-list-wrapper.Marcas .item-list .item:hover .item-miniature img[src*="logo_boix_interiorisme"]{ transform: none; opacity: .45; }
/* Texto */
.item-list-wrapper.Marcas .item-list .item > div .item-content{ margin-top: 16px; padding: 0; }
.item-list-wrapper.Marcas .item-list .item .item-heading{ margin: 0; }
.item-list-wrapper.Marcas .item-list .item .item-title{ font-size: 18px; line-height: 1.3; font-weight: 600; color: #222; margin: 0 0 6px; }
.item-list-wrapper.Marcas .item-list .item .item-title-link:hover .item-title{ color: #7b7766; }
.item-list-wrapper.Marcas .item-list .item .item-categories,
.item-list-wrapper.Marcas .item-list .item .categories-list{ margin: 0; }
.item-list-wrapper.Marcas .item-list .item .item-categories a{ color: #7b7766; font-size: 13px; line-height: 1.4; letter-spacing: .04em; text-transform: uppercase; }
.item-list-wrapper.Marcas .item-list .item .item-categories a:hover{ color: #222; }
@media (max-width: 767px){
  .item-list-wrapper.Marcas{ margin-top: 50px; }
  .item-list-wrapper.Marcas .item-list > .row{ row-gap: 30px; }
  .item-list-wrapper.Marcas .item-list .item .item-title{ font-size: 16px; }
  .item-list-wrapper.Marcas .item-list .item .item-categories a{ font-size: 12px; }
}

/* ===== FICHA PROYECTOS: bloque de contenido SEO (#seo) =====
   Columna de lectura centrada, jerarquía H2/H3 clara y separación entre sub-bloques.
   El último bloque de texto (antes del botón) se presenta como llamada a la acción. */
#seo{
  padding-top: 80px; padding-bottom: 80px;
  --content-h2-font-size: clamp(24px, 20px + 0.8vw, 30px);
  --content-h3-font-size: clamp(19px, 17px + 0.3vw, 21px);
  --content-heading-line-height: 1.25;
  --content-p-font-size: 16px;
}
#seo > .bloque > .row{ max-width: 880px; margin-left: auto; margin-right: auto; }
#seo > .bloque > .row > div{ margin-bottom: 0; }
#seo > .bloque > .row > div + div{ margin-top: 56px; padding-top: 56px; border-top: 1px solid #e7e7e7; }
#seo .content-text h2{ position: relative; margin-bottom: 28px; padding-bottom: 16px; color: #222; }
#seo .content-text h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background-color: #797664; }
#seo .content-text h3{ margin-top: 32px; margin-bottom: 12px; color: #222; }
#seo .content-text h2 + h3{ margin-top: 0; }
#seo .content-text p{ line-height: 1.75; color: #444; }
/* Textos largos con varios H2 en un mismo bloque (p. ej. ficha de servicio) */
#seo .content-text h2:not(:first-child){ margin-top: 56px; }
#seo .content-text p:has(> .btn-brand){ margin-top: 28px; margin-bottom: 8px; }
#seo .content-text p:has(> .btn-brand) .btn-brand{ color: #fff; text-decoration: none; }

/* ===== FICHA PROYECTOS: llamada a la acción final (#ctafinal) =====
   Franja a ancho completo color crema, contenido centrado. */
main .fullwidth:has(> #ctafinal){ background-color: #f5f3ef; padding-top: 80px; padding-bottom: 80px; }
#ctafinal{
  --content-h2-font-size: clamp(24px, 20px + 0.8vw, 30px);
  --content-heading-line-height: 1.25;
  --content-p-font-size: 16px;
  text-align: center;
}
#ctafinal > .bloque > .row{ max-width: 760px; margin-left: auto; margin-right: auto; }
#ctafinal > .bloque > .row > div{ margin-bottom: 0; }
#ctafinal :is(.content-text, .accordion-intro) h2{ position: relative; margin-bottom: 28px; padding-bottom: 16px; color: #222; }
#ctafinal :is(.content-text, .accordion-intro) h2::after{ content: ''; position: absolute; left: 50%; bottom: 0; width: 70px; height: 4px; background-color: #797664; transform: translateX(-50%); }
#ctafinal :is(.content-text, .accordion-intro) p{ line-height: 1.75; color: #444; }
#ctafinal :is(.content-text, .accordion-intro) p:last-child{ margin-top: 22px; }
#ctafinal :is(.content-text, .accordion-intro) p:last-child strong{ color: #222; font-size: 17px; }
#ctafinal :is(.content-text, .accordion-intro) a:not(.btn){ color: #222; text-decoration: underline; text-underline-offset: 3px; }
#ctafinal :is(.content-text, .accordion-intro) a:not(.btn):hover{ color: #797664; }
#ctafinal .acordio:empty{ display: none; }
#ctafinal > .bloque > .row > div:has(> .btn-brand){ margin-top: 28px; display: flex; justify-content: center; }
#ctafinal .btn-brand{ padding: 14px 32px; letter-spacing: .04em; }

/* ===== Acordeón FAQ (plantilla acordeonfaqs.html) ===== */
.faqs-accordion__intro{ margin-bottom: 8px; }
.faqs-accordion__list{ border-top: 1px solid #d9d6cc; }
.faqs-accordion__item{ border-bottom: 1px solid #d9d6cc; }
.faqs-accordion__question{ display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; cursor: pointer; list-style: none; }
.faqs-accordion__question::-webkit-details-marker{ display: none; }
.faqs-accordion__question::marker{ content: ''; }
.faqs-accordion__question h3,
#seo .faqs-accordion__question h3{ margin: 0; font-size: clamp(17px, 16px + 0.25vw, 19px); line-height: 1.35; font-weight: 700; color: #222; transition: color .3s ease-in-out; }
.faqs-accordion__question:hover h3{ color: #797664; }
.faqs-accordion__question:focus-visible{ outline: 2px solid #797664; outline-offset: 4px; }
.faqs-accordion__icon{ position: relative; flex-shrink: 0; width: 32px; height: 32px; border: 1px solid #797664; border-radius: 50%; transition: background-color .3s ease-in-out; }
.faqs-accordion__icon::before,
.faqs-accordion__icon::after{ content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 1.5px; background-color: #797664; transform: translate(-50%, -50%); transition: transform .3s ease-in-out, background-color .3s ease-in-out; }
.faqs-accordion__icon::after{ transform: translate(-50%, -50%) rotate(90deg); }
.faqs-accordion__item[open] .faqs-accordion__icon{ background-color: #797664; }
.faqs-accordion__item[open] .faqs-accordion__icon::before,
.faqs-accordion__item[open] .faqs-accordion__icon::after{ background-color: #fff; }
.faqs-accordion__item[open] .faqs-accordion__icon::after{ transform: translate(-50%, -50%) rotate(0deg); }
.faqs-accordion__answer{ padding: 0 56px 26px 0; }
.faqs-accordion__item[open] .faqs-accordion__answer{ animation: fade-in .35s ease-in-out; }

@media (max-width: 767px){
  #seo{ padding-top: 50px; padding-bottom: 50px; }
  #seo > .bloque > .row > div + div{ margin-top: 40px; padding-top: 40px; }
  main .fullwidth:has(> #ctafinal){ padding-top: 50px; padding-bottom: 50px; }
  .faqs-accordion__question{ padding: 18px 0; gap: 16px; }
  .faqs-accordion__answer{ padding-right: 0; }
}
@media (prefers-reduced-motion: reduce){
  .faqs-accordion__item[open] .faqs-accordion__answer{ animation: none; }
  .faqs-accordion__icon, .faqs-accordion__icon::before, .faqs-accordion__icon::after{ transition: none; }
}

/* ===== Grupo de botones (bloque Html con dos .btn-brand en columnas .right/.left) =====
   Centrados uno al lado del otro en lugar de repartidos en dos mitades. */
:is(#ctafinal, #marca-descripcion) .row:has(> .right > .btn-brand){ justify-content: center; gap: 16px; margin-left: 0; margin-right: 0; }
:is(#ctafinal, #marca-descripcion) .row:has(> .right > .btn-brand) > div{ flex: 0 0 auto; width: auto; max-width: none; padding: 0; }
:is(#ctafinal, #marca-descripcion) .row:has(> .right > .btn-brand) .btn-brand{ margin: 0; }

/* ===== FICHA MARCAS (estructura de la línea Marcas) =====
   Secciones: #marca-intro (logo + resumen), #marca-descripcion (H1 + descripción + botones),
   #marca-proyectos, #marca-detalle (colecciones / fortalezas), #marca-integracion, #marca-faqs, #ctafinal.
   Alternancia blanco / crema y columna de lectura centrada como en la ficha de proyecto. */
.Marcas.fitxa{ --marca-crema: #f5f3ef; --marca-oliva: #797664; }
:is(#marca-intro, #marca-descripcion, #marca-detalle, #marca-integracion, #marca-faqs){
  --content-h2-font-size: clamp(24px, 20px + 0.8vw, 30px);
  --content-h3-font-size: clamp(19px, 17px + 0.3vw, 21px);
  --content-heading-line-height: 1.25;
  --content-p-font-size: 16px;
}
:is(#marca-descripcion, #marca-detalle, #marca-integracion, #marca-faqs) .content-text h2{ position: relative; margin-bottom: 28px; padding-bottom: 16px; color: #222; }
:is(#marca-descripcion, #marca-detalle, #marca-integracion, #marca-faqs) .content-text h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background-color: var(--marca-oliva); }
:is(#marca-descripcion, #marca-detalle, #marca-integracion) .content-text h2:not(:first-child){ margin-top: 48px; }
:is(#marca-descripcion, #marca-detalle, #marca-integracion) .content-text h3{ margin-top: 32px; margin-bottom: 12px; color: #222; }
:is(#marca-descripcion, #marca-detalle, #marca-integracion) .content-text h2 + h3{ margin-top: 0; }
:is(#marca-intro, #marca-descripcion, #marca-detalle, #marca-integracion) .content-text p{ line-height: 1.75; color: #444; }
:is(#marca-descripcion, #marca-detalle, #marca-integracion) .content-text ul{ list-style: none; padding-left: 0; margin: 4px 0 20px; }
:is(#marca-descripcion, #marca-detalle, #marca-integracion) .content-text ul li{ position: relative; padding-left: 24px; margin-bottom: 10px; line-height: 1.65; color: #444; }
:is(#marca-descripcion, #marca-detalle, #marca-integracion) .content-text ul li::before{ content: ''; position: absolute; left: 2px; top: .62em; width: 8px; height: 8px; background-color: var(--marca-oliva); }

/* Intro: logo y resumen centrados */
.container:has(> #marca-intro){ padding-top: 60px; padding-bottom: 60px; }
#marca-intro > .col-lg-3:not(:has(img, p, .content-text)){ display: none; }
#marca-intro > .col-lg-6{ flex: 0 0 100%; max-width: 100%; }
#marca-intro .image{ display: flex; justify-content: center; }
#marca-intro .image picture{ width: auto; }
#marca-intro .image img{ width: auto; max-width: min(380px, 80%); max-height: 200px; object-fit: contain; }
#marca-intro > .col-lg-12 .content-text{ max-width: 760px; margin: 36px auto 0; text-align: center; }
#marca-intro > .col-lg-12 .content-text p{ font-size: 17px; }

/* Descripción: franja crema con H1 de la marca */
.fullwidth:has(> #marca-descripcion),
.fullwidth:has(> #marca-integracion){ --background1-bg-color: var(--marca-crema); --background1-color: #444; padding-top: 80px; padding-bottom: 80px; }
:is(#marca-descripcion, #marca-integracion) > .bloque > .row{ max-width: 880px; margin-left: auto; margin-right: auto; }
:is(#marca-descripcion, #marca-integracion) :is(h1, h2, h3, strong){ color: #222; }
:is(#marca-descripcion, #marca-integracion) .btn-brand{ color: #fff; }
#marca-descripcion .title_wrapper{ margin-bottom: 18px; }
#marca-descripcion .title_wrapper .h1{ margin: 0; font-size: clamp(34px, 28px + 1.4vw, 48px); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; color: #222; }
#marca-descripcion .content-text h2{ font-size: clamp(20px, 17px + 0.6vw, 24px); font-weight: 600; color: var(--marca-oliva); }
#marca-descripcion .content-text p:last-child strong{ display: block; margin-top: 8px; }

/* Proyectos relacionados: si el listado no tiene ningún proyecto no se muestra (ni el título) */
.container:has(> #marca-proyectos){ padding-top: 70px; padding-bottom: 20px; }
.container:has(> #marca-proyectos):not(:has(.item-list-wrapper article.item)){ display: none; }
#marca-proyectos h2{ position: relative; margin-bottom: 30px; padding-bottom: 16px; font-size: clamp(24px, 20px + 0.8vw, 30px); }
#marca-proyectos h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background-color: var(--marca-oliva); }

/* Detalle (colecciones / fortalezas): 2 columnas cuando hay imagen o galería; si una mitad está vacía, el texto ocupa la columna de lectura */
.container:has(> #marca-detalle){ padding-top: 80px; padding-bottom: 80px; }
#marca-detalle > .bloque + .bloque{ margin-top: 56px; }
#marca-detalle > .bloque + .bloque > .row::before{ content: ''; flex: 0 0 100%; max-width: 880px; margin: 0 auto 56px; border-top: 1px solid #e7e7e7; }
#marca-detalle > .bloque:not(:has(img, .content-text)){ display: none; }
#marca-detalle > .bloque > .row{ align-items: center; row-gap: 32px; }
/* (CSS no permite :has() anidado: se detecta la mitad vacía con :empty o galería sin imágenes) */
#marca-detalle > .bloque > .row > div:empty,
#marca-detalle > .bloque > .row > div:has(.gallerycontent):not(:has(img)){ display: none; }
#marca-detalle > .bloque > .row:has(> div:empty) > div,
#marca-detalle > .bloque > .row:has(.gallerycontent):not(:has(.gallerycontent img)) > div{ flex: 0 0 100%; max-width: 880px; margin-left: auto; margin-right: auto; }
#marca-detalle img{ width: 100%; height: auto; }
/* Si una de las dos secciones está vacía, la línea de separación sobra */
#marca-detalle > .bloque:not(:has(img, .content-text)) + .bloque{ margin-top: 0; }
#marca-detalle > .bloque:not(:has(img, .content-text)) + .bloque > .row::before{ display: none; }

/* Integración: segunda franja crema */
#marca-integracion .content-text h2:not(:first-child){ padding-top: 48px; border-top: 1px solid #e2ddd2; }

/* FAQ */
.container:has(> #marca-faqs){ padding-top: 80px; padding-bottom: 80px; }
#marca-faqs > .bloque > .row{ max-width: 880px; margin-left: auto; margin-right: auto; }
.container:has(> #marca-faqs):not(:has(.faqs-accordion, .content-text)){ display: none; }

@media (max-width: 767px){
  .container:has(> #marca-intro){ padding-top: 36px; padding-bottom: 36px; }
  .fullwidth:has(> #marca-descripcion),
  .fullwidth:has(> #marca-integracion),
  .container:has(> #marca-detalle),
  .container:has(> #marca-faqs){ padding-top: 50px; padding-bottom: 50px; }
  .container:has(> #marca-proyectos){ padding-top: 50px; }
  #marca-detalle > .bloque + .bloque{ margin-top: 40px; }
  #marca-detalle > .bloque + .bloque > .row::before{ margin-bottom: 40px; }
  :is(#ctafinal, #marca-descripcion) .row:has(> .right > .btn-brand){ flex-direction: column; align-items: center; gap: 12px; }
}

/* ===== Listados relacionados vacíos: no mostrar la sección (ni su título) =====
   Ficha de servicio ("Otros proyectos relacionados") y ficha de colección ("Colecciones relacionadas"). */
.Servicios.fitxa .main-element > :is(.container, .fullwidth):has(.item-list-wrapper):not(:has(.item-list-wrapper article.item)),
.Colecciones.fitxa .main-element > :is(.container, .fullwidth):has(.item-list-wrapper):not(:has(.item-list-wrapper article.item)){ display: none; }

/* ===== BLOG: ficha de artículo (estructura de la línea Blog) =====
   #blog-hero (imagen), #blog-articulo (título + entradilla, texto 8 col + lateral 4 col),
   #ctafinal (franja crema) y #blog-final (texto de cierre). */
#blog-hero img{ width: 100%; height: clamp(220px, 34vw, 460px); object-fit: cover; }
.container:has(> #blog-articulo){ padding-top: 64px; padding-bottom: 72px; }
:is(#blog-articulo, #blog-final){
  --content-h2-font-size: clamp(22px, 19px + 0.6vw, 27px);
  --content-h3-font-size: clamp(19px, 17px + 0.3vw, 21px);
  --content-heading-line-height: 1.25;
}
/* Cabecera: título y entradilla en columna de lectura */
#blog-articulo > .col-lg-12:first-child .title_wrapper{ margin-bottom: 0; }
#blog-articulo > .col-lg-12:first-child .h1{ max-width: 900px; margin-bottom: 24px; font-size: clamp(28px, 22px + 1.4vw, 42px); line-height: 1.15; color: #222; }
#blog-articulo > .col-lg-12:first-child .content-text{ max-width: 820px; padding-bottom: 32px; margin-bottom: 8px; border-bottom: 1px solid #e7e7e7; }
#blog-articulo > .col-lg-12:first-child .content-text p{ font-size: 18px; line-height: 1.7; color: #444; }
#blog-articulo > .col-lg-12:first-child .row > div:not(:has(img, p, h1, h2, h3, a, .splitter)){ display: none; }
/* Texto del artículo */
#blog-articulo > .col-lg-8{ padding-right: 48px; }
:is(#blog-articulo, #blog-final) .content-text h2{ position: relative; margin-top: 40px; margin-bottom: 24px; padding-bottom: 14px; color: #222; }
:is(#blog-articulo, #blog-final) .content-text h2::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background-color: #797664; }
:is(#blog-articulo, #blog-final) .content-text h3{ margin-top: 36px; margin-bottom: 12px; color: #222; }
:is(#blog-articulo, #blog-final) .content-text :is(h2, h3):first-child{ margin-top: 0; }
#blog-articulo > .col-lg-8 .content-text p,
#blog-final .content-text p{ font-size: 17px; line-height: 1.8; color: #444; }
/* Lateral: imagen, botones apilados y compartir; fijo al hacer scroll */
#blog-articulo > .col-lg-4 > .row{ position: sticky; top: 120px; }
#blog-articulo > .col-lg-4 .image img{ width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
#blog-articulo > .col-lg-4 .row:has(> .right > .btn-brand){ flex-direction: column; gap: 10px; margin: 0; }
#blog-articulo > .col-lg-4 .row:has(> .right > .btn-brand) > div{ flex: 0 0 auto; max-width: 100%; padding: 0; }
#blog-articulo > .col-lg-4 .row:has(> .right > .btn-brand) .btn-brand{ display: block; width: 100%; margin: 0; padding: 14px 20px; text-align: center; }
#blog-articulo > .col-lg-4 .bloque:has(> .row > .right > .btn-brand){ padding: 0; }
#blog-articulo > .col-lg-4 .share-page{ justify-content: flex-start; margin-top: 24px; margin-bottom: 0; }
/* Texto de cierre */
.container:has(> #blog-final){ padding-top: 72px; padding-bottom: 80px; }
#blog-final > .bloque > .row{ max-width: 880px; margin-left: auto; margin-right: auto; }
#blog-final .content-text p:last-child{ margin-bottom: 0; }
/* CTA intermedio sin título: texto un poco mayor */
#ctafinal .content-text:not(:has(h2)) p{ font-size: 18px; line-height: 1.7; color: #222; }

/* ===== BLOG: categoría (listado de artículos en tarjetas) ===== */
.Blog.lev-1 .container:has(> #categoria-listado){ padding-top: 56px; padding-bottom: 80px; }
#categoria-listado .title_wrapper .h1{ position: relative; margin-bottom: 36px; padding-bottom: 16px; font-size: clamp(28px, 22px + 1.4vw, 40px); }
#categoria-listado .title_wrapper .h1::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background-color: #797664; }
#categoria-listado > .bloque:not(:has(img, p, h1, h2, h3, .item-list-wrapper)){ display: none; }
#categoria-listado .product-list article.item .post-miniature :is(a, picture){ display: block; }
/* Artículo sin miniatura: logo de Boix pequeño y atenuado sobre fondo crema (como en marcas) */
#categoria-listado .product-list article.item .post-miniature img[src*="logo_boix_interiorisme"]{ object-fit: contain; padding: 0 22%; opacity: .3; filter: grayscale(1); mix-blend-mode: multiply; }
#categoria-listado .product-list article.item:hover .post-miniature img[src*="logo_boix_interiorisme"]{ transform: none; opacity: .45; }
#categoria-listado .product-list > .row{ row-gap: 48px; }
#categoria-listado .product-list article.item .single-post-slide-wrap{ display: flex; flex-direction: column; height: 100%; }
#categoria-listado .product-list article.item .post-miniature{ overflow: hidden; background: #f5f3ef; }
#categoria-listado .product-list article.item .post-miniature img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s ease; }
#categoria-listado .product-list article.item:hover .post-miniature img{ transform: scale(1.04); }
#categoria-listado .product-list article.item .post-content{ padding-top: 18px; }
#categoria-listado .product-list article.item .post-content h3{ margin: 0 0 10px; font-size: 19px; line-height: 1.3; font-weight: 700; color: #222; transition: color .3s ease-in-out; }
#categoria-listado .product-list article.item:hover .post-content h3{ color: #797664; }
#categoria-listado .product-list article.item .post-content a:hover{ text-decoration: none; }
#categoria-listado .product-list article.item .categories-list a{ font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #797664; }
#categoria-listado .product-list article.item .post-summary:empty{ display: none; }
#categoria-listado .product-list article.item .post-summary{ margin-top: 8px; font-size: 15px; line-height: 1.6; color: #666; }

@media (max-width: 991px){
  #blog-articulo > .col-lg-8{ padding-right: 15px; }
  #blog-articulo > .col-lg-4 > .row{ position: static; margin-top: 40px; }
  #blog-articulo > .col-lg-4 .image img{ aspect-ratio: 16 / 9; }
}
@media (max-width: 767px){
  .container:has(> #blog-articulo){ padding-top: 40px; padding-bottom: 48px; }
  .container:has(> #blog-final){ padding-top: 48px; padding-bottom: 56px; }
  #blog-articulo > .col-lg-12:first-child .content-text p{ font-size: 17px; }
  #categoria-listado .product-list article.item{ flex: 0 0 100%; max-width: 100%; }
}

/* ===== Botón secundario en los grupos de dos botones (Pide cita | Visita nuestro showroom) =====
   El segundo pasa a contorneado para jerarquizar la acción principal. Se usa sombra interior
   en lugar de borde para que los dos botones mantengan exactamente la misma altura. */
.row:has(> .right > .btn-brand) > .left > .btn-brand{
  --button-bg-color: transparent;
  --button-color: var(--main-color-1);
  --button-bg-color-hover: var(--main-color-1);
  --button-color-hover: #ffffff;
  box-shadow: inset 0 0 0 1px var(--main-color-1);
}
.row:has(> .right > .btn-brand) > .left > .btn-brand:hover{ box-shadow: inset 0 0 0 1px var(--main-color-1); }
/* Sobre fondo crema el secundario lleva fondo blanco (si no, parece un hueco) y texto oliva:
   hay que ganar a ":is(#marca-descripcion, #marca-integracion) .btn-brand{ color:#fff }" */
:is(#marca-descripcion, #marca-integracion, #ctafinal) .row:has(> .right > .btn-brand) > .left > .btn-brand{ --button-bg-color: #ffffff; color: var(--main-color-1); }
:is(#marca-descripcion, #marca-integracion, #ctafinal) .row:has(> .right > .btn-brand) > .left > .btn-brand:hover{ color: #ffffff; }

/* Fletxes dels carrusels de llistats: centrades sobre la imatge (variable calculada a custom.js) */
.item-list.swiper > .swiper-button{ top: var(--swiper-media-mid, 50%); }

/* ===== Revisió general de maquetació ===== */
/* Pàgines curtes: el peu no ha de quedar a mitja pantalla */
main.margin-principal{ min-height: calc(100svh - 360px); }

/* Categoria de marques (p. ex. /mobiliario-e-iluminacion): títol amb línia com la resta i menys aire sobre el llistat */
.Marcas.lev-1 main .container:first-child{ padding-top: 56px; padding-bottom: 80px; }
.Marcas.lev-1 main .title_wrapper .h1{ position: relative; margin-bottom: 0; padding-bottom: 16px; font-size: clamp(26px, 21px + 1.2vw, 36px); }
.Marcas.lev-1 main .title_wrapper .h1::after{ content: ''; position: absolute; left: 0; bottom: 0; width: 70px; height: 4px; background-color: #797664; }
.Marcas.lev-1 .item-list-wrapper.Marcas{ margin-top: 48px; }

/* Enllaços del contingut: oliva en lloc del blau marí #002C83 heretat de la plantilla anterior.
   Es defineix a body perquè system.css (generat pel panell) es carrega després i redefineix :root. */
body{ --content-a-color: #797664; --content-a-hover-color: #222222; }
main .content-text a:not(.btn){ text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Títols que segueixen un paràgraf o una llista dins d'un text: aire per sobre */
main .content-text :is(p, ul, ol) + :is(h2, h3, h4){ margin-top: 1.6em; }
/* Opinions en mòbil: sense fletxes (tapaven el text); es llisca i hi ha els punts */
@media (max-width: 767px){ .Opiniones .swiper .swiper-button{ display: none; } }
/* Dos blocs de text seguits on el segon comença amb un títol (p. ex. Santos > Cajones y puertas) */
main .row > [class*="col-"]:has(> .content-text) + [class*="col-"]:has(> .content-text > :is(h2, h3, h4):first-child){ margin-top: 28px; }