﻿/* 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,.daurat{color:#7f6124;}
.bg-corporative,.bg-daurat{background-color:#7f6124;}
.link-corporative, .link-corporative:visited {color:#7f6124 !important;}
.link-corporative:hover {color:#444 !important;}
.titol{color:#666; margin:1em 0; font-weight:700;}
.left {overflow:hidden; float:left;}
.right {overflow:hidden; float:right;}
.white {color:#fff;}
.b-white {background-color:#fff;}
.white {color:#fff;}
.link-white, .link-white:visited {color:#fff !important;}
.link-white:hover {color:#aaa !important;}
.black {color:#000;}
.b-black {background-color:#000;}
.gris {color:#aaa;}
.b-gris {background-color:#aaa;}
.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-titol{font-family: 'Lato', sans-serif; font-weight: 400;}
.font-titol-bold{font-family: 'Lato', 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;}

/*----------------------------------- 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: #7f6124;
    border-color: #7f6124;
}
.btn-custom:hover {
    color: #fff;
    background-color: #444;
    border-color: #7f6124;
}
.btn-custom: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-referits{width:100%; height:25vh; background-image:url("/web/images/ferres-properties-a-casa.jpg"); background-size:cover; background-position:center;}

/*----------------------- VIDEO HERO ------------------------------*/
/* Contenidor a pantalla completa o alçada fixa */
.video-hero-container {
  position: relative;
  width: 100%;
  height: 80vh; /* Pots canviar-ho a 100vh si el vols a tota la pantalla vertical */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

/* El vídeo cobreix tot l'espai sense deformar-se */
.video-hero-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

/* Capa semitransparent perquè el text es llegeixi bé */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35); /* 35% d'opacitat negra */
  z-index: 2;
}

/* El text queda a la capa superior */
.video-content {
  position: relative;
  z-index: 3;
}
	
/*----------------------- 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: #7f6124;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.section-title strong {
  font-weight: 800;
}
.subtitle-italic {
  font-style: italic;
  color: #7d7a71;
  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: #7f6124;
  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: #5c4c0e;
  color: #ffffff;
  transform: translateY(-1px);
}
.btn-gold .btn-arrow {
  background-color: #ffffff;
  color: #7f6124;
  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: #7f6124;
  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 {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  border-top-left-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:90% !important;}
}
@media (min-width: 1024px) {
  #vols-viure-grid{width:80% !important;}
}
@media (min-width: 1280px) {
  #vols-viure-grid{width:60% !important;}
}
@media (min-width: 1500px) {
  #vols-viure-grid{width:40% !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 -----------------------------------*/
.accordion-button {
	font-weight:600;
}
.accordion-button:not(.collapsed) {
    color: white;
    background-color: #7f6124;
	font-weight:400;
}
.accordion-button:not(.collapsed)::after {
	color: white !important;
	background-color: white;
	filter: brightness(1.5);
}