/*!
 * home.css
 *
 * Home — above the fold.
 * Titulo principal y subtitulo (responsive 900px).
 */

/* =========================================================
   🏠 HOME – ESTILOS PRINCIPALES
========================================================= */

/* -------- Above the fold -------- */
@media (min-width: 900px) { 
.titulo-principal {
  font-size: 68px;
  font-weight: 700;
  display: block;
  line-height: 1.1; /* Ajuste proporcional */
}

.subtitulo-principal {
  font-size: 42px;
  font-weight: 400;
  display: block;
  line-height: 1.2;
}
}
@media (max-width: 900px) {
.titulo-principal {
  font-size: 45px;
  font-weight: 700;
  display: block;
  line-height: 1.1;
	margin-top:30px;
}

.subtitulo-principal {
  font-size: 32px;
  font-weight: 400;
  display: block;
  line-height: 1.2;
}
}

/* =========================================================
   🏠 HOME — Hub de tipus (Apartaments / Bungalows / Càmping)
   Tiles muntats a mà en Kadence amb el llenguatge del §08:
   foto a sang + panell translúcid #2A2520 al peu + fletxa
   indicadora a baix-dreta. Aquestes regles serveixen només
   per ancorar la fletxa dins del panell i centralitzar-ne
   l'estil (evita style inline al bloc Custom HTML).
========================================================= */
.er-tile-panel {
	position: relative;
}

.er-tile-arrow {
	position: absolute;
	right: 18px;
	bottom: 18px;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #FBF9F4;
	opacity: 0.85;
	pointer-events: none;
}
.er-tile-arrow svg {
	width: 16px;
	height: 16px;
	display: block;
}

/* ═════════════════════════════════════════════════════
   HANDOFF HOME 2026-06 — seccions noves/modificades
   §2 Vine i Gaudeix · §3 Bento · §5 Social proof
   ═════════════════════════════════════════════════════ */

/* ───── §2 Vine i Gaudeix — banda emocional sobre paper ─────
   El fons #F7F3EA i el padding els posa el Kadence Row; aquí la
   tipografia del handoff i el centrat del bloc. */
.vine-i-gaudeix .kt-inside-inner-col {
	max-width: 720px;
	margin: 0 auto;
}
.vine-i-gaudeix h2[data-kb-block] {
	font-family: 'Playfair Display', Georgia, serif !important;
	font-weight: 600 !important;
	font-size: 34px !important;
	line-height: 1.16 !important;
	letter-spacing: -0.01em;
	color: #2A2520;
}
.vine-i-gaudeix h3[data-kb-block] {
	font-family: 'Jost', sans-serif;
	font-size: 17px !important;
	line-height: 1.66 !important;
	color: #6B6258 !important;
	font-weight: 400;
}
/* Fila de 3 icones: més ample que el bloc central. */
.vine-i-gaudeix .kb-row-layout-wrap {
	max-width: 980px;
	margin: 0 auto;
}
.vine-i-gaudeix .icon-link p {
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	line-height: 1.55;
	color: #6B6258;
	max-width: 24ch;
	margin-left: auto;
	margin-right: auto;
}
.vine-i-gaudeix .icon-link .kt-svg-icons {
	display: flex;
	justify-content: center;
}
.vine-i-gaudeix .icon-link svg {
	width: 46px;
	height: 46px;
}

/* ───── §3 Bento "Tot el que pots gaudir" ─────
   Tiles = Kadence Columns amb bgImg; scrim i tipografia aquí. */
.er-bento-tile {
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	isolation: isolate;
}
.er-bento-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top, rgba(16, 18, 10, 0.7) 0%, rgba(16, 18, 10, 0.15) 50%, transparent 78%);
}
.er-bento-tile > .kt-inside-inner-col {
	position: relative;
	z-index: 2;
	padding: 0 !important;
}
.er-bento-tile .kb-section-link-overlay {
	z-index: 3;
}
.er-bento-body {
	padding: 24px 26px;
}
.er-bento-kicker {
	font-family: 'Jost', sans-serif;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #C9E6B8;
	margin: 0 0 8px;
}
.er-bento-title {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 1.15;
	color: #fff;
	margin: 0;
}
.er-bento-title--big {
	font-size: 32px;
}
.er-bento-desc {
	font-family: 'Jost', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.82);
	max-width: 38ch;
	margin: 8px 0 0;
}
/* Espai entre les 2 tiles apilades de la dreta. */
.er-bento-side .kb-row-layout-wrap + .kb-row-layout-wrap {
	margin-top: 20px;
}
/* Hover: zoom no és possible amb background-image de columna sense
   wrapper extra — fem un lleu realç del scrim en hover com a feedback. */
.er-bento-tile:hover::before {
	background: linear-gradient(to top, rgba(16, 18, 10, 0.78) 0%, rgba(16, 18, 10, 0.2) 50%, rgba(16, 18, 10, 0.05) 78%);
}

/* ───── §5 Social proof ───── */
.er-proof {
	border-top: 1px solid #E7E0D2;
}
.er-proof-row .er-proof-col + .er-proof-col {
	border-left: 1px solid #E7E0D2;
}
.er-proof-col {
	text-align: center;
	padding: 0 24px;
}
.er-proof .er-proof-src {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #9A9184;
	margin: 0 0 18px;
}
.er-proof-score {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 6px;
}
.er-proof-score b {
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 600;
	font-size: 50px;
	line-height: 1;
	color: #2A2520;
}
.er-proof-score span {
	font-family: 'Jost', sans-serif;
	font-size: 15px;
	color: #6B6258;
}
.er-proof .er-proof-n {
	font-family: 'Jost', sans-serif;
	font-size: 13.5px;
	color: #6B6258;
	margin: 10px 0 0;
}
.er-proof .er-proof-foot {
	font-family: 'Jost', sans-serif;
	font-size: 13px;
	color: #9A9184;
	text-align: center;
	margin: 42px 0 0;
}
@media (max-width: 920px) {
	.er-proof-row .er-proof-col + .er-proof-col {
		border-left: 0;
		margin-top: 38px;
	}
}

/* §4 Ofertes — fons paper. Kadence marca kt-row-has-bg però no emet la
   regla de background per a aquesta row (colLayout:row, quirk del
   generador de CSS); l'apliquem aquí amb el selector d'id de la row. */
.kb-row-layout-id368_f554d5-06 {
	background-color: #F7F3EA;
}

/* ───── Home responsive (mòbil) — ajustos 2026-06-12 ───── */
@media (max-width: 767px) {
	/* Widget de reserves: ocult a mòbil perquè el hero càpiga a la
	   primera pantalla (la reserva es fa des de la barra/menú). */
	#widgetBookingContainer {
		display: none !important;
	}
	/* Bento "Tot el que pots gaudir": les 3 caixes apilades amb la
	   mateixa alçada (reforç de l'alçada 240 del contingut). */
	.er-bento-tile {
		min-height: 240px;
		height: 240px;
	}
}