/* =============================================================
   Campamentos MasterChef — Home nova
   Full de classes i variables pròpies en català. S'aprofiten al
   màxim les utilitats de Bootstrap 5; aquí només s'afegeix el que
   Bootstrap no cobreix (colors de marca, tipografies, decoracions).
   ============================================================= */

:root{
	--color-taronja: #FF512F;
	--color-taronja-suau: #EF9430;
	--color-turquesa: #20BCAC;
	--color-blau: #70ABF7;
	--color-indigo: #5D5FEF;
	--color-porpra: #B463B2;
	--color-rosa: #F694CA;
	--color-menta: #74CFAB;
	--color-mostassa: #F3BB43;
	--color-crema: #F0EADF;
	--color-text: #61605E;
	--font-titols: 'Fraunces', 'Georgia', serif;
	--font-cos: 'Inter', 'Segoe UI', sans-serif;
}

/* Container igual que el de WordPress (1420px en lloc dels 1320px de Bootstrap) */
@media (min-width: 1400px){
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
		max-width: 1420px;
	}
}
body{
	font-family: var(--font-cos);
	font-size: 18px;
	font-weight: 500;
	line-height: 22px;
	color: var(--color-text);
}

h2{
	font-size: 36px;
	line-height: 40px;
	font-weight: 700;
	letter-spacing: 0;
}

h1, h2, h3, .titol{
	font-family: var(--font-titols);
	font-weight: 700;
}

a{ color: var(--color-taronja); }
a:hover{ color: #000; }

img{ max-width: 100%; }

/* ---------- Botons ---------- */

.boto{
	font-family: var(--font-cos);
	font-weight: 700;
	font-size: 16px;
	color: #fff;
	height: 62px;
	padding: 0 37px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	text-align: center;
	border: 0;
	transition: opacity .15s ease-in-out;
}
.boto:hover{ color:#fff; opacity: .88; }

.boto-taronja{ background: var(--color-taronja); }
.boto-turquesa{ background: var(--color-turquesa); }
.boto-indigo{ background: var(--color-indigo); }
.boto-blanc{ background: #fff; color: var(--color-taronja); }
.boto-blanc:hover{ color: var(--color-taronja); }

/* =============================================================
   Capçalera
   ============================================================= */

/* Capçalera fixa (sticky). A dalt de tot és transparent amb logo i textos
   blancs sobre l'heroi; en fer scroll (.capcalera--fosca) passa a fons crema,
   logo de color i textos taronja. Mesures copiades de devel.campamentosmasterchef.com */
.capcalera{
	z-index: 1000;
	transition: background-color .25s ease-in-out;
}

.barra-superior{
	background: var(--color-taronja);
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.barra-superior a{
	text-transform: uppercase;
	color: #fff;
	font-family: var(--font-titols);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
}

.capcalera .contenidor-nav{
	height: 118px;
	padding: 25px 0 20px;
}

.logo-capcalera{ width: 240px; }
.logo-capcalera .logo-color{ display: none; }

.telefons{
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.telefons, .telefons a, .enllac-capcalera{
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
}

.enllac-capcalera{
	font-size: 14px;
	font-weight: 600;
	padding: 16px 20px;
	white-space: nowrap;
}

/* Bootstrap fa servir !important a les classes d-flex/d-none, per això
   cal forçar-ho també aquí quan s'amaga aquest bloc en obrir el menú */
#capcaleraDreta.amagat{ display: none !important; }


/* Botó hamburguesa — icona real copiada de devel.campamentosmasterchef.com */
.boto-menu{
	background: none;
	border: 0;
	padding: 0;
	margin-left: 15px;
	cursor: pointer;
}
.boto-menu .menu-icon{ width: 30px; height: 30px; }
.boto-menu .menu-icon-color{ display: none; }
.boto-menu .text-menu{
	font-size: 9px;
	line-height: 22px;
	font-weight: 500;
	text-transform: uppercase;
	color: #fff;
	margin-top: -4px;
}
.capcalera--fosca .boto-menu .menu-icon-blanc{ display: none; }
.capcalera--fosca .boto-menu .menu-icon-color{ display: block; }
.capcalera--fosca .boto-menu .text-menu{ color: var(--color-taronja); }

/* Estat en fer scroll */
.capcalera--fosca .contenidor-nav-fons{ background: rgba(244, 243, 239, .95); }
.capcalera--fosca .logo-blanc{ display: none; }
.capcalera--fosca .logo-color{ display: block; }
.capcalera--fosca .telefons,
.capcalera--fosca .telefons a,
.capcalera--fosca .enllac-capcalera{ color: var(--color-taronja); }
.capcalera--fosca .boto-menu .linia{ background: var(--color-taronja); }

/* =============================================================
   Secció Heroi (vídeo)
   ============================================================= */

.heroi{
	position: relative;
	height: 92vh;
	min-height: 620px;
	background: #000;
	overflow: hidden;
}

.heroi .video-fons{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.heroi::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.05) 40%, rgba(0,0,0,.55) 100%);
	z-index: 1;
}

.heroi h1{
	color: #fff;
	font-size: 48px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin-bottom: 28px;
	text-shadow: 0 2px 12px rgba(0,0,0,.25);
}

.heroi .botons-heroi{ gap: 38px !important; }

.bloc-descobreix{ max-width: 450px; }

/* =============================================================
   Secció 2 — Descobreix el programa
   ============================================================= */

.seccio-descobreix{
	background: #F5F4EF url('../images/seccio2-nens.png') center bottom / contain no-repeat;
	padding: 80px 0 350px;
}

.seccio-descobreix .titol{
	color: var(--color-taronja);
	margin-bottom: 26px;
}


.seccio-descobreix p.avis{ font-weight: 700; color: var(--color-text); margin-top: 22px; }

.seccio-descobreix .boto{ margin-top: 30px; }
/* =============================================================
   Secció 3 — Què faràs
   ============================================================= */

.seccio-que-faras{
	position: relative;
	background: #F3E9E1 url('../images/que-haras-sal.png') left bottom no-repeat;
	padding: 70px 0 110px;
}

.seccio-que-faras .titol{
	text-align: center;
	color: var(--color-taronja);
	margin-bottom: 22px;
}

.seccio-que-faras .intro{
	max-width: 720px;
	margin: 0 auto 55px;
	text-align: center;
}

.seccio-que-faras{ overflow-x: clip; }
.carrusel-targetes{ position: relative; left: 50%; width: 1350px; transform: translateX(-50%); }
.carrusel-targetes .slick-list{ overflow: hidden; }

.carrusel-targetes .targeta{
	position: relative;
	width: 450px;
	padding-top: 26px;
}

.targeta-que-faras{
	position: relative;
	width: 350px;
	margin: 60px auto 0;
	overflow: hidden;
	transition: width .35s ease, margin .35s ease;
}
.slick-current .targeta-que-faras{ width: 450px; margin-top: 0; }

.targeta-que-faras .galeria-targeta{
	position: relative;
	aspect-ratio: 4/5;
	background: #eee;
}
.targeta-que-faras .galeria-targeta img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .8s ease-in-out;
}
.targeta-que-faras .galeria-targeta img.visible{ opacity: 1; }

.targeta-que-faras .capa-hover{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	color: #fff;
	font-weight: 500;
	font-size: 15px;
	line-height: 1.5;
	padding: 24px;
	opacity: 0;
	transition: opacity .25s ease-in-out;
}
.slick-current .targeta-que-faras:hover .capa-hover{ opacity: 1; }

.targeta-que-faras[data-color="turquesa"] .capa-hover{ background: rgba(32,188,172,.94); }
.targeta-que-faras[data-color="blau"] .capa-hover{ background: rgba(112,171,247,.94); }
.targeta-que-faras[data-color="porpra"] .capa-hover{ background: rgba(93,95,239,.94); }
.targeta-que-faras[data-color="taronja"] .capa-hover{ background: rgba(255,81,47,.94); }

/* Solapa de color sobre la foto de la targeta central */
.slick-current.targeta::before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -225px;
	width: 107px;
	height: 26px;
	border-radius: 10px 10px 0 0;
}
.slick-current.targeta[data-color="turquesa"]::before{ background: var(--color-turquesa); }
.slick-current.targeta[data-color="blau"]::before{ background: var(--color-blau); }
.slick-current.targeta[data-color="porpra"]::before{ background: var(--color-indigo); }
.slick-current.targeta[data-color="taronja"]::before{ background: var(--color-taronja); }
.peu-targeta{
	text-align: center;
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	margin-top: 22px;
	min-height: 54px;
}
.carrusel-targetes .peu-targeta{ visibility: hidden; }
.carrusel-targetes .slick-current .peu-targeta{ visibility: visible; }
.peu-targeta[data-color="turquesa"]{ color: var(--color-turquesa); }
.peu-targeta[data-color="blau"]{ color: var(--color-blau); }
.peu-targeta[data-color="porpra"]{ color: var(--color-indigo); }
.peu-targeta[data-color="taronja"]{ color: var(--color-taronja); }

.carrusel-targetes .slick-dots{
	position: relative;
	margin-top: 30px;
	text-align: center;
	padding: 0;
	list-style: none;
}
.carrusel-targetes .slick-dots li{ display: inline-block; margin: 0 5px; }
.carrusel-targetes .slick-dots button{
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #d9cfc3;
	font-size: 0;
	padding: 0;
}
.carrusel-targetes .slick-dots li.slick-active button{ background: var(--color-taronja); border-color: var(--color-taronja); }

.jurats-que-faras{
	position: absolute;
	right: 0px;
	bottom: -126px;
	max-height: 285px;
	width: auto;
	z-index: 1;
}

@media (max-width: 991px){
	.jurats-que-faras{ display: none; }
}

/* =============================================================
   Secció Opinions
   ============================================================= */

.seccio-opinions{
	position: relative;
	background: var(--color-mostassa);
	padding: 170px 50px 38px 50px;
	overflow: hidden;
}

.decoracio{
	position: absolute;
	pointer-events: none;
	z-index: 0;
}
.decoracio-alfabrega{ top: 40px; left: 6%; width: auto; height: 158px; }
.decoracio-que-haras-bol{ top: 30px; left: 0; z-index: 1; }
.decoracio-que-haras-cullera{ top: 40px; right: 0; z-index: 1; }
.decoracio-llimona{ left: 43.5%; bottom: 120px; width: auto; height: 115px; transform: translateX(-50%); z-index: 5; }
.decoracio-cullera-baix{ right: 8%; bottom: 80px; width: auto; height: 180px; z-index: 6; }

.graella-opinions{ position: relative; z-index: 1; }
.gx-graella{ --bs-gutter-x: 35px; }
.gy-graella{ --bs-gutter-y: 35px; }

.targeta-opinio{
	height: 100%;
	color: #fff;
}

.targeta-opinio{ display: flex; flex-direction: column; justify-content: center; }
.targeta-opinio.titol-opinions{ padding: 32px; }
.targeta-opinio--mitjana{ width: 300px; padding: 25px; }
.targeta-opinio--gran{ padding: 25px; }
.targeta-opinio.titol-opinions h2{
	color: #fff;
	margin: 0;
}

.targeta-opinio .estrelles{ color: #FDFF8E; margin-bottom: 14px; font-size: 25px; line-height: 22px; height: 22px; margin-bottom: 15px; }
.targeta-opinio .frase{ font-weight: 700; font-size: 18px; line-height: 22px; margin-bottom: 15px; }
.targeta-opinio .cita{ font-size: 16px; font-weight: 500; line-height: 22px; margin-bottom: 15px; }
.targeta-opinio .autor{ font-weight: 700; font-size: 18px; line-height: 22px; margin: 0; }

.targeta-opinio[data-color="indigo"]{ background: var(--color-indigo); }
.targeta-opinio[data-color="porpra"]{ background: var(--color-porpra); }
.targeta-opinio[data-color="taronja"]{ background: var(--color-taronja); }
.targeta-opinio[data-color="rosa"]{ background: var(--color-rosa); }
.targeta-opinio[data-color="menta"]{ background: var(--color-menta); }

.veure-mes-opinions{ text-align: center; margin: 0; position: relative; z-index: 1; }
/* =============================================================
   Peu de pàgina (copiat de devel.campamentosmasterchef.com/contacto)
   ============================================================= */

.peu{
	padding-top: 30px;
	background: #F4F3EF;
	color: #4A4B45;
}

.peu__container{ background: url('../images/peu-fons-dona.png') right bottom no-repeat; }

.peu p{ margin: 0 0 15px; }
.peu a{ text-decoration: none; }
.peu a:hover{ color: var(--color-taronja); }

.peu__text{ padding-top: 20px; }
.peu__titol{ font-size: 32px; line-height: 42px; font-weight: 400; color: var(--color-taronja); margin-bottom: 5px !important; }
.peu__titol strong{ font-weight: 700; }
.peu__cita{ font-size: 26px; line-height: 50px; font-weight: 400; color: var(--color-taronja); }
.peu__descripcio{ font-size: 24px; line-height: 30px; font-weight: 400; color: var(--color-taronja); margin-bottom: 40px !important; }

.peu__enllacos, .peu__enllacos a{ font-size: 20px; line-height: 33px; font-weight: 700; color: #605E59; }
.peu__socials, .peu__socials a{ font-size: 20px; line-height: 29px; font-weight: 500; color: #605E59; }
.peu__legal, .peu__legal a{ font-size: 16px; line-height: 27px; font-weight: 500; color: #605E59; }
.peu__enllacos{ margin-bottom: 20px !important; }
.peu__legal{ margin-bottom: 20px !important; }

.peu__logo{ display: block; width: 149px; height: auto; }

.peu__llibre{ padding-top: 40px; }
.peu__comprar{
	width: 213px;
	height: 49px;
	margin-top: 10px;
	background: var(--color-taronja);
	color: #fff;
	font-size: 14px;
	line-height: 16.8px;
	font-weight: 700;
	text-transform: uppercase;
}
.peu .peu__comprar:hover{ color: #fff; opacity: .88; }

/* Breakpoints copiats del comportament real del peu a devel.campamentosmasterchef.com:
   fins a 959px el llibre i les xarxes comparteixen fila (el text ocupa tota l'amplada);
   a partir de 767px el llibre passa a ocupar el 75% i les xarxes es col·loquen a sota. */
@media (max-width: 991px){
	.peu{ padding-bottom: 30px; }
	.peu__container{ background-image: none; }
}

@media (max-width: 959px){
	.peu__text{ width: 100%; max-width: 100%; }
	.peu__llibre{ width: 50%; max-width: 50%; flex: 0 0 50%; padding-top: 30px; }
	.peu__xarxes{ width: 150px; max-width: 150px; flex: 0 0 150px; padding-top: 30px; }
	.peu__enllacos, .peu__enllacos a{ font-size: 22px; line-height: 35px; }
	.peu__socials, .peu__socials a{ font-size: 23px; line-height: 32px; }
}

@media (max-width: 767px){
	.peu__titol{ font-size: 28px; line-height: 38px; }
	.peu__cita{ font-size: 22px; line-height: 30px; }
	.peu__descripcio{ font-size: 20px; line-height: 25px; }
	.peu__llibre{ width: 75%; max-width: 75%; flex: 0 0 75%; }
}

/* =============================================================
   Responsive general
   ============================================================= */

@media (max-width: 991px){
	.capcalera .contenidor-nav{ height: 90px; padding: 15px 0; }
	.logo-capcalera, .capcalera--fosca .logo-capcalera{ width: 170px; }

	.heroi h1{ font-size: 34px; }

	.seccio-descobreix{ padding-bottom: 200px; }

	.carrusel-targetes{ padding: 0 10px; }
}

@media (max-width: 575px){
	.heroi h1{ font-size: 28px; }
	.heroi .boto{ padding: 0 20px; font-size: 14px; }
}



/* Els enllaços del header no canvien de color en hover */
.capcalera{ --color-capcalera: #fff; }
.capcalera--fosca{ --color-capcalera: var(--color-taronja); }
.telefons, .telefons a, .telefons a:hover, .enllac-capcalera, .enllac-capcalera:hover{ color: var(--color-capcalera); }
.capcalera--fosca .telefons, .capcalera--fosca .telefons a, .capcalera--fosca .enllac-capcalera{ color: var(--color-capcalera); }

.boto-petit{ height: 51px; padding: 16px 50px; font-size: 16px; font-weight: 400; }
.veure-mes-opinions .boto-petit{ height: 40px; margin-top: 90px; }
@media (max-width: 991px){ .targeta-opinio--mitjana{ width: 100%; } }

@media (max-width: 991px){
	.carrusel-targetes .targeta{ width: 100%; padding-top: 0; }
	.targeta-que-faras, .slick-current .targeta-que-faras{ width: 100%; max-width: 450px; margin: 0 auto; }
	.targeta-que-faras:hover .capa-hover{ opacity: 1; }
	.carrusel-targetes{ left: 0; width: auto; transform: none; }
	.carrusel-targetes .peu-targeta{ visibility: visible; }
}

/* ---------- Mòbil ---------- */
@media (max-width: 991px){
	.carrusel-targetes .targeta{ max-width: none; }
	.slick-current.targeta::before{ left: 50%; margin-left: calc(min(50%, 225px) * -1); }
}
@media (max-width: 767px){
	.contenidor-heroi{ padding-left: 25px; padding-right: 0; }
	.heroi .botons-heroi{ gap: 16px !important; }
	.heroi .botons-heroi .boto{ width: 100%; }
	h2 br{ display: none; }
	h2{ font-size: 30px !important; line-height: 35px !important; }
	.seccio-opinions{ padding: 60px 15px 30px; }
	.targeta-opinio--mitjana{ width: 100%; }
	.targeta-opinio--gran, .targeta-opinio--mitjana{ padding: 20px; }
	.targeta-opinio.titol-opinions{ padding: 25px 20px; }
}
/* =============================================================
   Menú lateral (mides copiades de devel.campamentosmasterchef.com)
   ============================================================= */
.panell-menu{
	position: fixed;
	top: 38px;
	right: -800px;
	bottom: 0;
	width: 800px;
	max-width: 100%;
	overflow-y: auto;
	background: #F4F3EF;
	z-index: 10000;
	opacity: 0;
	visibility: hidden;
	transition: right .3s, opacity .3s, visibility .3s;
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
}
.panell-menu.obert{ right: 0; opacity: 1; visibility: visible; }

.panell-menu__cap{
	position: relative;
	height: 104px;
	padding: 25px 25px 0 0;
}
.panell-menu .telefons{ padding-left: 30px; margin-right: 12px !important; }
.panell-menu .telefons .bi{ margin-right: 6px; }
.panell-menu .telefons, .panell-menu .telefons a, .panell-menu .enllac-capcalera{ color: var(--color-taronja); }

.panell-menu__tancar{
	width: 30px;
	height: 30px;
	margin-left: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 19px;
	line-height: 19px;
	color: var(--color-taronja);
	text-decoration: none;
}
.panell-menu__tancar:hover{ color: #000; }

.panell-menu__llista{
	list-style: none;
	margin: 50px 12px 100px 52px;
	padding: 0;
}
.panell-menu__llista--inferior{ margin: 0 12px 0 52px; padding-bottom: 40px; }
.panell-menu ul ul{ list-style: none; margin: 0; padding: 0; display: none; }

.panell-menu__enllac{
	display: flex;
	padding: 4px 0;
	font-size: 32px;
	line-height: 50px;
	font-weight: 500;
	color: var(--color-taronja);
	text-decoration: none;
}
.panell-menu__enllac:hover{ color: var(--color-taronja); }
.panell-menu__submenu .panell-menu__enllac,
.panell-menu__llista--inferior .panell-menu__enllac{ font-size: 22px; line-height: 30px; }

.panell-menu .etiqueta{ position: relative; }
.panell-menu .etiqueta::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--color-taronja);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.panell-menu__enllac:hover .etiqueta::after{ transform: scaleX(1); }

/* Fletxes de l'slider */
.carrusel-targetes .slick-prev,
.carrusel-targetes .slick-next{
	position: absolute;
	top: 45%;
	transform: translateY(-50%);
	z-index: 5;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #FF512F;
	color: #fff;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.carrusel-targetes .slick-prev{ left: -20px; }
.carrusel-targetes .slick-next{ right: -20px; }
.carrusel-targetes .slick-prev i,
.carrusel-targetes .slick-next i{
	color: #fff;
	line-height: 1;
	-webkit-text-stroke: 2px #fff;
}
.carrusel-targetes .slick-arrow:hover{ opacity: .85; }

@media (max-width: 991px){
	.carrusel-targetes .slick-prev{ left: 5px; }
	.carrusel-targetes .slick-next{ right: 5px; }
}
@media (max-width: 991px){ .seccio-que-faras{ background-size: 260px auto; } }

@media (max-width: 1399px){
	.decoracio-que-haras-bol{ display: none; }
}

@media (max-width: 1199px){
	.seccio-que-faras{ padding-bottom: 150px; }
	.jurats-que-faras{ bottom: -166px; }
}

@media (max-width: 999px){
	.bloc-descobreix{ max-width: none; }
}