:root {
  --min-height: 880px;
  --secondary-color: #490042;
  --main-color: #fff3e3;
  --accent-color: #ff5000;
}

body{
	font-family: 'Rethink Sans', sans-serif;
	color: var(--main-color);
	font-size:20px;
	line-height:1.5;
	margin:0;
}

h1,
.logoh1{
	margin-top:0;
	color: var(--main-color);

	}

img{
	max-width:100%;
}

/*
.logoh1 a:hover img{
	filter: brightness(0) saturate(100%) invert(11%) sepia(66%) saturate(6172%) hue-rotate(332deg) brightness(94%) contrast(117%);
}*/

.mb_gen{
	margin-bottom:40px;
}

h1.beta{
	color: var(--main-color);
	font-size: clamp(40px,3.6cqw, 60px);
	line-height:1;
	font-weight:600;
	margin: 0.7em 0 1em;
}

a{
	color:inherit;
	word-break: break-word; 
    word-break: break-all;  
    overflow-wrap: break-word;
}

a:hover{
	color:var(--secondary-color);
	text-decoration:none;
}

h2,p {margin-top:0;}


.container{

	display: grid;
	/*grid-template-columns: 1fr 1fr;*/
	grid-template-areas:
	"col1 col2";


	min-height: 100vh;
	background:url(fons_landing.svg) no-repeat center center;
	background-color: #490042;
	background-size:cover;
	overflow:hidden;


}

.container.unicol{

	justify-content: center;
	text-align:center;
	align-items: center;

}

.container.unicol .cols{
	max-width:620px;
	background-color:#a4926288;

	align-items: center;
   	justify-content: center;



}



.container .col1{
  grid-area: col1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.container .col2{

	grid-area: col2;
	display: flex;
	flex-direction: column;

	color:#FFF;
}







.container .col2 a{color:inherit;}

.container .col2 a:hover{
	/*color:var(--secondary-color);*/
	text-decoration:none;
}


.container .crida_receptari{
	font-size: 1.9rem;
	font-weight:600;
	display:flex;
	align-items: center;
	gap:20px;
	line-height:1;
}

.container .crida_receptari:before{
	content:'';
	height:58px;
	width:58px;
	background:url('ico_receptes.svg') no-repeat center center;
	background-size:contain;
	flex: 0 0 auto
}





.logos {margin-top:3em;}

.logos a{
	margin-right:0.5em;
}

.logos a:hover{
	opacity:0.7;
}

.info_text{
	margin-bottom: clamp(24px, 4cqw, 60px);
}

.logo_min{
	display:inline-block;
	max-width:300px;

}



form label{	
	display:block;

	font-size:20px;
	margin-bottom:30px;
	
}

form label input{
	display:block;
	margin-top:0.5em;
	width:100%;
	border:0;
	border-radius: 5px;
	padding:10px 20px;
	font-size:16px;
	box-sizing: border-box;
}

form label input:hover,
form label input:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--secondary-color);	
}


form .legal{
	background:rgba(255,255,255,0.9);
	padding:20px;
    border-radius: 5px;
	color: #4f1d16;
	margin-bottom:3rem;
}



form .legal label{font-weight:normal;}

form .legal input{
	position:absolute;
	left:0;
	top:0;
}

.btn_like,
form button{
	display:inline-block;
	color:#FFF;
	font-weight:bold;
	font-size:24px;
	background-color: var(--secondary-color);
	padding:30px 0;
	width:100%;
	border:0;
	border-radius:5px;
	text-decoration:none;
    transition: background-color 150ms ease, color 150ms ease;

}

button{cursor:pointer}


form button[disabled] {
    background-color: #d3d3d3; /* gris clar */
    color: #7a7a7a;            /* text grisós */
    cursor: not-allowed;
}


.btn_like:hover,
form button:hover:not([disabled]){
	color:#FFF;
	background-color:var(--accent-color);
}

.btn_like{
	border-radius:999px;
	border:2px solid #FFF;
	width:auto;
	padding: 20px 3vw;
}

.link_back{
	margin-top:40px;
}

.link_back a{
	color: var(--main-color);
	text-decoration:none;	
	
}

.link_back a:hover span{
	color:var(--secondary-color);
	text-decoration:underline;
}

.error{
	color: var(--main-color);
	font-weight:bold;
	
}




/*checkbox - https://bun.js.org/*/
.b-contain *, .b-contain *::before, .b-contain *::after {
	box-sizing: content-box !important;
}

.b-contain input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.b-contain span {
	display:block;
	line-height: 1.54;
	font-size: 1rem;
	font-family: inherit;
	margin-bottom:2rem;
}

.b-contain {
	display: table;
	position: relative;
	padding-left: 1.8rem;
	cursor: pointer;
	margin-bottom: .5rem;
}

.b-contain input[type="checkbox"] ~ .b-input {
	position: absolute;
	top: 5px;
	left: 0;
	height: 1.25rem;
	width: 1.25rem;

	transition: background 250ms;
	border: none;
	border-radius: 0.301rem;
	box-shadow: 0 0 0 2px var(--secondary-color);
}

.b-contain input[type="radio"] ~ .b-input {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.25rem;
	width: 1.25rem;

	transition: background 250ms;
	border: none;
	border-radius: 2.0rem;
}

.b-contain input[type="checkbox"] ~ .b-input::after {
	content: '';
	position: absolute;
	display: none;
	left: .45rem;
	top: .18rem;
	width: .25rem;
	height: .6rem;
	border: solid #000;
	border-width: 0 2px 2px 0;
	transition: background 250ms;
	transform: rotate(45deg);

	filter: invert(1) brightness(1);
}

.b-contain input[type="radio"] ~ .b-input::after {
	content: '';
	position: absolute;
	display: none;
	left: .25rem;
	top: .25rem;
	width: .75rem;
	height: .75rem;
	border-radius: 2.0rem;

	transition: background 250ms;
	
}

.b-contain input:disabled ~ .b-input::after {
	border-color: rgba(135, 149, 161, 1);
}

.b-contain input:checked ~ .b-input::after {
	display: block;
}

.b-contain:hover input ~ .b-input,
.b-contain input:focus ~ .b-input {

}

.b-contain input:checked  ~ .b-input{
	background-color: var(--secondary-color);
}

.b-contain input:hover ~ .b-input {
	box-shadow: 0 0 0 3px var(--secondary-color);	
}
}

.b-contain input:checked ~ .b-input {
	background: #FFF;
	border-color: #FFF;
}

.b-contain input[type="checkbox"]:disabled ~ .b-input {
	background: rgba(241, 245, 248, 1);
	border-color: rgba(184, 194, 204, 1);
	opacity: 0.6;
	cursor: not-allowed;
}

.b-contain input[type="radio"]:disabled ~ .b-input {
	background: rgba(241, 245, 248, 1);
	border-color: rgba(184, 194, 204, 1);
	opacity: 0.6;
	cursor: not-allowed;
}

.b-contain input[type="radio"]:disabled ~ .b-input::after {
	background: rgba(135, 149, 161, 1);
}

.b-contain input:checked:focus ~ .b-input, .b-contain:hover input:not([disabled]):checked ~ .b-input {

	border-color: #FFF;
}

.b-contain .b-input::before {
	content: '';
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 3rem;
	height: 3rem;
	margin-left: -0.85rem;
	margin-top: -0.85rem;
	background: rgba(0, 130, 243, 1);
	border-radius: 2rem;
	opacity: .6;
	z-index: 99999;
	transform: scale(0);
}

@keyframes b-ripple {
	0% {
		transform: scale(0);
	}

	20% {
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1);
  	}
}

@keyframes b-ripple-duplicate {
	0% {
		transform: scale(0);
	}

	30% {
		transform: scale(1);
	}

	60% {
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1);
  	}
}

.b-contain input + .b-input::before {
	animation: b-ripple 250ms ease-out;
}

.b-contain input:checked + .b-input::before {
	animation-name: b-ripple-duplicate;
}

.b-contain .b-input::before {
	visibility: hidden;
}

.b-contain input:focus + .b-input::before {
	visibility: visible;
}

.b-contain:first-child .b-input::before {
	visibility: hidden;
}



















@media (min-width: 840px)
{
	
	.container .cols{

		position:relative;
		min-height:var(--min-height);


		padding:40px;
		box-sizing: border-box;
	justify-content: center;


	}


	.container:not(.unicol) .col2{
		padding-top: clamp(40px, 9vw, 150px);
		background-color:#a4926288;
	}







	.container section{
		width:100%;
		max-width:600px;
		box-sizing: border-box;

	}



	

	
	
	
		
	

	
}

@media (max-width: 839px)
{

	.container:not(.unicol) {
		padding:40px;
		grid-template-columns: 1fr;
		grid-template-areas:
			"div1"
			"div3"
			"div2";
	}

	.container:not(.unicol) .cols {
		padding: 0;
		display: contents; /* deixem que els fills es comportin com a fills directes del grid */
	}

	#div1 { grid-area: div1; }
	#div3 { grid-area: div3; }
	#div2 { grid-area: div2; }


	.container .crida_receptari {display:none;}

	.container.unicol .cols{
		padding:40px;
		margin: 0 20px;
	}


}