/* default */
body {
	background-color: #eeeee6;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-size: 1rem;
	letter-spacing: 0.05rem;
	line-height:125%;
	color:#666;
}
hr{border-top:1px dotted #aaa !important;}
a, a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}

.clickable{cursor:pointer;}
.tachado{text-decoration:line-through; color:#c00;}
.ombra{box-shadow: 0px 0px 10px #000;}

.corporative{color:#212529;}
.bg-corporative{background-color:#212529;}
.link-corporative, .link-corporative:visited {color:#212529 !important;}
.link-corporative:hover {color:#444 !important;}

.custom,.grafit{color:#212529;}
.bg-custom,.bg-grafit{background-color:#212529;}
.link-custom, .link-custom:visited {color:#212529 !important;}
.link-custom:hover {color:#444 !important;}

.custom2,.daurat{color:#7f6124;}
.bg-custom2,.bg-daurat{background-color:#7f6124;}
.link-custom2, .link-custom2:visited {color:#7f6124 !important;}
.link-custom2:hover {color:#444 !important;}

.titol{color:#212529; margin:1em 0; font-weight:700;}
.left {overflow:hidden; float:left;}
.right {overflow:hidden; float:right;}
.white {color:#fff;}
.bg-white {background-color:#fff;}
.white {color:#fff;}
.link-white, .link-white:visited {color:#fff !important;}
.link-white:hover {color:#aaa !important;}
.black {color:#000;}
.bg-black {background-color:#000;}
.gris {color:#aaa;}
.bg-gris {background-color:#aaa;}
.clar {color:#eeeee6;}
.bg-clar {background-color:#eeeee6;}
.fosc {color:#212529;}
.bg-fosc {background-color:#212529;}
.red{color:#c00;}
.justificat {text-align:justify;}
.center {text-align:center;}
.cela{display:table-cell; padding:0 0.5em;}
.rodo{
	-moz-border-radius:6px; 
	-webkit-border-radius:6px;
	border-radius: 6px;  
}

/*----------------- estils d'impresió -------------------------*/
.printable { display: none; }
@media print {
	.non-printable { display: none; }
    .printable { display: block; }
}
/*----------------/ estils d'impresió -------------------------*/

/*----------------------------------- NAVBAR BOOTSTRAP -----------------------**/
.font-ferres{font-family: 'DM Sans', sans-serif; font-weight: 800;}
.font-properties{font-family: 'Hanken Grotesk', sans-serif; font-weight: 900;}
.font-titol{font-family: 'DM Sans', sans-serif; font-weight: 400;}
.font-titol-bold{font-family: 'DM Sans', sans-serif; font-weight: 900;}
.font-body-light{font-family: 'Open Sans', sans-serif; font-weight: 300;}
.font-body{font-family: 'Open Sans', sans-serif; font-weight: 400;}
.font-body-medium{font-family: 'Open Sans', sans-serif; font-weight: 600;}
.font-body-bold{font-family: 'Open Sans', sans-serif; font-weight: 800;}

.fs07{font-size:0.7em !important;}
.fs075{font-size:0.75em !important;}
.fs08{font-size:0.8em !important;}
.fs09{font-size:0.9em !important;}
.fs10{font-size:1em !important;}
.fs11{font-size:1.1em !important;}
.fs12{font-size:1.2em !important;}
.fs13{font-size:1.3em !important;}
.fs14{font-size:1.4em !important;}
.fs15{font-size:1.5em !important;}
.fs16{font-size:1.6em !important;}
.fs17{font-size:1.7em !important;}
.fs18{font-size:1.8em !important;}
.fs19{font-size:1.9em !important;}
.fs20{font-size:2em !important;}
.fs21{font-size:2.1em !important;}
.fs22{font-size:2.2em !important;}
.fs23{font-size:2.3em !important;}
.fs24{font-size:2.4em !important;}
.fs25{font-size:2.5em !important;}
.fs30{font-size:3em !important;}

.lh80{line-height:80% !important;}
.lh90{line-height:90% !important;}
.lh100{line-height:100% !important;}
.lh110{line-height:110% !important;}
.lh120{line-height:120% !important;}
.lh130{line-height:130% !important;}
.lh140{line-height:140% !important;}
.lh150{line-height:150% !important;}
.lh160{line-height:160% !important;}
.lh170{line-height:170% !important;}
.lh180{line-height:180% !important;}
.lh190{line-height:190% !important;}
.lh200{line-height:200% !important;}

.titol-main{width:100%; padding:4em 2em; font-family: 'DM Sans', sans-serif; font-weight: 400; text-align:center; color:#212529; background-color:transparent;}

/*----------------------------------- NAVBAR BOOTSTRAP -----------------------**/
#navbarTop{
	background-color: #fff;
	/*background-image: url(../images/BACK/back-rose-light.jpg); 
	background-repeat: no-repeat; 
	background-position: top right;
	background-size:cover;*/
}
.navbar-brand img{max-height:70px;}
#navbarTop .navbar-nav .nav-link {
    padding-right: 1.1rem;
    padding-left: 1.2rem;
    color: #222;
	font-weight: 400;
	font-size: 0.85rem;
}
#navbarTop .navbar-nav .nav-link:hover {
    color: #666;
}
#navbarTop .navbar-nav .nav-link.active {color: #000;}
#navbarTop .navbar-toggler{border-color: #666;}

#navbarTop .dropdown-menu{border-top:1px solid #666; padding-top:10px;}
#navbarTop .dropdown-menu .nav-link {color: #999;}

/*----------------------------------- PERSONALITZACIÓ BOOTSTRAP -----------------------**/
.with-errors{color:#c00;}

.btn:hover{cursor:pointer;}

.btn-custom {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
}
.btn-custom:hover {
    color: #fff;
    background-color: #444;
    border-color: #212529;
}
.btn-custom:not([disabled]):not(.disabled).active, .btn-custom:not([disabled]):not(.disabled):active, .show>.btn-custom.dropdown-toggle {
    color: #fff;
    background-color: #212529;
    border-color: #212529;
    box-shadow: 0 0 0 0.2rem rgba(255,0,0,.5);
}

.btn-custom2 {
    color: #fff;
    background-color: #7f6124;
    border-color: #7f6124;
}
.btn-custom2:hover {
    color: #fff;
    background-color: #444;
    border-color: #7f6124;
}
.btn-custom2:not([disabled]):not(.disabled).active, .btn-custom:not([disabled]):not(.disabled):active, .show>.btn-custom.dropdown-toggle {
    color: #fff;
    background-color: #7f6124;
    border-color: #7f6124;
    box-shadow: 0 0 0 0.2rem rgba(255,0,0,.5);
}
.panel-breadcrumb a{color:#ccc;}
.panel-breadcrumb a:hover{color:#fff;}

/*----------------------------------- GLOBAL DIVS -----------------------**/
.divSpace{overflow:hidden; height:1em;}
#divMenuSpace{overflow:hidden; height:204px;}
#divBottom{background-color:#eee; padding:2em 2em 10em 2em;}
#divMenuShop{margin:1em 0 1em 0;}
#divDebug{display:none;}

/*---------------- menu idiomes -------------------------*/
.ulIdiomes{list-style:none; margin:auto; display:block; text-align:left; padding:1em 0; background-color:transparent; width:auto; float:right;}
	.ulIdiomes li{display:inline-block; margin:0 0.5rem;}
		.ulIdiomes li a{color:#aaa;}
		.ulIdiomes li a:hover{color:#00a2d1;}	
		.ulIdiomes .active > a{color:#00a2d1;}
/*----------------/ menu idiomes -------------------------*/

/*---------------- menu xarxes -------------------------*/
.ulXarxes{list-style:none; margin:auto; display:block; text-align:right; padding:0.5rem 0 0.5rem 0; background-color:transparent; width:100%; float:right;}
	.ulXarxes li{display:inline-block; margin:0 0.5em;}
		.ulXarxes li a{color:#aaa;}
		.ulXarxes li a:hover{color:#fff;}	
/*----------------/ menu xarxes -------------------------*/
/*---------------- menu legal -------------------------*/	
#divMenuLegal{width:100%; text-align:center; margin:0 0 1em 0;}	
	#divMenuLegal ul{list-style:none; padding:0;}
		#divMenuLegal ul li{display:inline-block; cursor:pointer; font-size:0.8em; margin:0 0.2em; color:#444;}
			#divMenuLegal a{color:#666;}
			#divMenuLegal a:hover{color:#000;}
/*----------------/ menu legal -------------------------*/


/*----------------------------------- FORM SMALL TO LARGER --------------------*/
/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */ 

/* Small devices (landscape phones, 576px and up) sm */
@media (min-width: 576px) { }

/* Medium devices (tablets, 768px and up) md */
@media (min-width: 768px) { }

/* Large devices (desktops, 992px and up) lg */
@media (min-width: 992px) { }

/* Extra large devices (large desktops, 1200px and up) xl */
@media (min-width: 1200px) { }

/*----------------------------------- FROM LARGER TO SMALL --------------------*/
.hidden-xs{display:block;}
.visible-xs{display:none;}

/* Extra small devices (portrait phones, less than 576px) xs */
@media (max-width: 575px){
	.hidden-xs{display:none;}
	.visible-xs{display:block;}
}

/* Small devices (landscape phones, less than 768px) sm */
@media (max-width: 767px){
}

/* Medium devices (tablets, less than 992px) md */
@media (max-width: 991px) { ... }

/* Large devices (desktops, less than 1200px) lg */
@media (max-width: 1199px) { ... }

/* Extra large devices (large desktops)
No media query since the extra-large breakpoint has no upper bound on its width */

/*----------------------------------- MIXED --------------------*/
/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) { ... }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

/*---------------- bootstrap z-indexs --------------------------
$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;
---------------------------------------------------------------*/

/*-------------------- particularitats impressió ---------------------*/
@media print {
}

/* SEARCH q */
.divSearchFormQ{overflow:hidden;}

/* Aviso Cookies */
#divAvisCookies {
	width:100%; 
	background-color:#CCC;
	padding:2em;
	display:none; 
	text-align:center; 
	position:fixed; left:0px; bottom:0px; z-index:50;
} 

/* Scroll */
.scroll-top-wrapper {
    position: fixed;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	text-align: center;
	z-index: 99999999;
    background-color: #777777;
	color: #eeeeee;
	width: 50px;
	height: 48px;
	line-height: 48px;
	right: 70px;
	bottom: 10px;
	padding-top: 2px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
.scroll-top-wrapper:hover {
	background-color: #888888;
}
.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
	opacity: 1.0;
}
.scroll-top-wrapper i.fa {
	line-height: inherit;
}

/*----------------------- FOTO HERO ------------------------------*/
.foto-hero-comprar{width:100%; height:25vh; background-image:url("/web/images/ferres-properties-dormitori.jpg"); background-size:cover; background-position:center;}
.foto-hero-referits{width:100%; height:25vh; background-image:url("/web/images/ferres-properties-a-casa.jpg"); background-size:cover; background-position:center;}
.foto-hero-parlem{width:100%; height:25vh; background-image:url("/web/images/ferres-properties-salo-1.jpg"); background-size:cover; background-position:center;}
.foto-hero-promotores{width:100%; height:25vh; background-image:url("/web/images/ferres-properties-salo-2.jpg"); background-size:cover; background-position:center;}
.foto-hero-calc-impostos{width:100%; height:25vh; background-image:url("/web/images/ferres-properties-bany.jpg"); background-size:cover; background-position:center;}
.foto-hero-calc-hipoteca{width:100%; height:25vh; background-image:url("/web/images/ferres-properties-cuina-illa.jpg"); background-size:cover; background-position:center;}

/*----------------------- VIDEO HERO ------------------------------*/
/* Contenidor principal del Hero */
.video-hero-container {
    position: relative;
    width: 100%;
    min-height: 750px;
    height: 70vh;
    overflow: hidden;
}
/* Contenidor que retalla el desbordament */
.video-hero-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none; /* Evita que clics de l'usuari pausessin el vídeo o mostressin elements de YouTube */
}
/* Escala l'iframe per cobrir l'àrea sense barres negres */
.video-hero-iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw; /* Ratio 16:9 */
    min-height: 100%;
    min-width: 177.77vh; /* 16:9 respecte a l'alçada */
    transform: translate(-50%, -50%);
    border: 0;
}
/* Capa fosca superposada */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.15); /* Foscor del fons */
    z-index: 2;
}
/* Contingut per sobre del vídeo i la capa fosca */
.video-content {
    position: relative;
    z-index: 3;
    top: 50%;
    transform: translateY(-50%);
}
	
/*----------------------- VALORACIO -> CLAIMS ------------------------*/
/* Línia separadora central */
.border-divider {
  border-right: 2px solid #444;
}
@media (max-width: 991.98px) {
  .border-divider {
	border-right: none;
	border-bottom: 2px solid #2b2b2b;
	padding-bottom: 2.5rem;
	margin-bottom: 2.5rem;
  }
}
/* Títols de les seccions */
.section-title {
  font-size: 1.35rem;
  font-weight: 400;
  color: #212529;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.section-title strong {
  font-weight: 800;
}
.subtitle-italic {
  font-style: italic;
  color: #212529;
  font-size: 0.95rem;
}
.lead-description {
  font-size: 0.95rem;
  line-height: 1.45;
  color: #6a675e;
}
/* Botons estilitzats en píndola */
.btn-gold {
  background-color: #212529;
  color: #ffffff;
  border: none;
  border-radius: 50rem;
  padding: 0.55rem 0.6rem 0.55rem 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}
.btn-gold:hover {
  background-color: #444;
  color: #ffffff;
  transform: translateY(-1px);
}
.btn-gold .btn-arrow {
  background-color: #ffffff;
  color: #212529;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
/* Secció 'Com funciona?' */
.section-subtitle {
  font-size: 1.2rem;
  color: #212529;
  text-transform: uppercase;
  font-weight: 400;
}
.section-subtitle strong {
  font-weight: 800;
}
.steps-list {
  padding-left: 1.2rem;
  font-size: 0.92rem;
  line-height: 1.2;
  color: #6a675e;
}
.steps-list li {
  margin-bottom: 0.5rem;
}
/* Imatge lateral amb arc superior esquerre */
.arch-corner-img-esq {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-top-left-radius: 5.5rem;
  display: block;
}

/* Imatge lateral amb arc superior dret */
.arch-corner-img-dre {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-top-right-radius: 5.5rem;
  display: block;
}

/*----------------------- VOLS-VIURE -----------------------------------*/
#vols-viure-grid{width:100% !important;}
.vols-viure-thumb {position:relative;padding:0;margin:0;}
.vols-viure-thumb .titol{position:absolute;z-index:1;text-align:center;background-color:transparent; width:100%; height:100%;margin:0;padding:0;font-size:1.9rem;color:white;line-height:110%;pointer-events:none; cursor:pointer;}
.vols-viure-thumb .foto{padding:0.5em;}
.vols-viure-thumb .foto:hover{filter: brightness(0.5);}
@media (min-width: 992px) {
  #vols-viure-grid{width:100% !important;}
}
@media (min-width: 1024px) {
  #vols-viure-grid{width:100% !important;}
}
@media (min-width: 1280px) {
  #vols-viure-grid{width:100% !important;}
}
@media (min-width: 1500px) {
  #vols-viure-grid{width:100% !important;}
}

/*----------------------- EQUIP -----------------------------------*/
/* Contenidor amb forma d'arc superior */
.arch-image-wrapper {
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  /* Defineix l'arc superior */
  border-top-left-radius: 50% 35%;
  border-top-right-radius: 50% 35%;
  background-color: #e5e3dc;
}
.arch-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Estil dels noms */
.team-name {
  font-size: 1.45rem;
  line-height: 1.15;
  color: #5d5b54;
}
.team-name .first-name {
  font-style: italic;
  font-weight: 300;
  display: block;
}
.team-name .last-name {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}
/* Icones d'acció */
.action-icon {
  font-size: 1.6rem;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.action-icon:hover {
  transform: scale(1.1);
  opacity: 0.85;
}
.icon-whatsapp {
  color: #4ade80; /* Verd WhatsApp */
}
.icon-email {
  color: #333; /* Negre/Gris fosc */
}
/* Enllaços de contacte inferiors */
.contact-info {
  font-size: 0.85rem;
  line-height: 1.35;
}
.contact-info a {
  text-decoration: none;
  display: block;
}
.contact-info a:hover {
  text-decoration: underline;
}

/*----------------------- PROMOTORES -----------------------------------*/
#accordionPromocions{margin:3em 0 !important; width:100% !important;}
@media (min-width: 1280px) {
  #accordionPromocions{margin:3em auto !important; width:80% !important;}
}
.accordion-button {
	font-weight:600;
    font-family:'DM Sans', sans-serif;;
    font-size:0.75em;
}
.accordion-button:not(.collapsed) {
    color: white !important;
    background-color: #212529;
	font-weight:400;
}
.accordion-button:not(.collapsed)::after {
	color: white !important;
	background-color: #212529;
	/*filter: brightness(1.5);*/
}

/*----------------------- METODO -----------------------------------*/
:root {
    /* Defineix aquí el color corporatiu */
    --color-primary: #212529;        /* Substitueix pel color corporatiu HEX */
    --color-primary-rgb: 33, 37, 41; /* Valors RGB equivalents per a les transparències */
    --color-muted: #aaa;          /* Gris suau per als passos inactius */
    --color-track: #ddd;          /* Línia de fons inactiva */
}

/* Contenidor general */
.stepper-wrapper {
    max-width: 85%;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 0;
}

/* Línia base de fons */
.stepper-track {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-track);
    transform: translateY(-50%);
    z-index: 1;
}

/* Línia de progrés activa */
.stepper-progress {
    position: absolute;
    top: 50%;
    left: 0;
    height: 3px;
    background-color: var(--color-primary);
    transform: translateY(-50%);
    transition: width 0.4s ease;
    z-index: 2;
}

/* Cercles/Nodes numerats */
.step-node {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--color-muted);
    background-color: #ffffff;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    z-index: 3;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.step-node:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    transform: scale(1.1);
}

/* Pas actiu actual */
.step-node.active {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    color: #ffffff;
    box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb), 0.2);
    transform: scale(1.15);
}

/* Passos ja completats (anteriors a l'actiu) */
.step-node.completed {
    border-color: var(--color-primary);
    background-color: #ffffff;
    color: var(--color-primary);
}

/* Icona superior del menú quan està seleccionada */
.metodo-tab-btn.active {
    color: var(--color-primary) !important;
}