:root {
	--main-color: #2F80ED;
	--light-main-color: #86B6F6;
	--lightest-main-color: #EEF5FF;
	--black: #333333;
	--soft-black: #565656;
	--softest-black: #DADADA;
	--white: #FBFBFB;
	--soft-white: #eeeeee;
	--mobile-box-shadow: 4px 4px 16px 0px #cecece;
	--light-blue-shadow: 12px 0px 24px 4px #EEF5FF;
	--white-shadow: 0px 0px 12px 0px #eeeeee;
	--main-gradient: linear-gradient(to right, #2F80ED, #55a8ff);
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: "Hind";
	margin: 0;
}

h1, h2, h3, h4, h5, p {
	margin: 0;	
}

h1 {
	font-family: "Montserrat";
	font-size: clamp(2.68rem, 13vw, 4.6rem);
	line-height: 1.2;
	font-weight: 800;
	letter-spacing: -.05em;
}

h2 {
	font-family: "Montserrat";
	font-size: clamp(1.5rem, 7vw, 2.5rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.04rem;
}

h3 {
	font-family: "Hind";
	font-size: clamp(1rem, 5.5vw, 2rem);
	font-weight: 500;
	line-height: 1.5;
	text-wrap: balance;
}

h4 {
	font-family: "Hind";
	font-size: clamp(1rem, 5vw, 1.6rem);
	font-weight: 600;
	line-height: 1.5;
	text-wrap: balance;
}

h5 {
	font-family: "Hind";
	font-size: clamp(1rem, 4.8vw, 1.4rem);
	font-weight: 500;
	line-height: 1.5;
}

p, span, li {
	font-family: "Hind";
	font-size: clamp(1.05rem, 4vw, 1.2rem);
	line-height: 2;
	font-weight: 400;
}

img {
	display: block;
	font-style: italic;
	max-width: 100%;
}

button {
	padding: 0;
}

ul {
	margin: 0;
	padding: 0;	
}

section {
	padding: calc(8vw + 32px) 6vw;
	background-color: var(--white);
	
	#faq {
	}
}

	@keyframes my-animation {
		from { opacity: 0;  }	
		to { opacity: 1;  }
	}

nav {
	position: fixed;
	right: 0;
	z-index: 4;
	
	>  button {
		position: absolute;
		top: 24px;
		right: 24px;
		border: transparent;
		background: #00000040; 
		background-image: url(images/white-menu.svg);
		background-size: contain;
		background-repeat: no-repeat;
		height: 48px;
		width: 48px;
		border-radius: 8px;
		box-shadow: 0 0 12px #0000003b;
	}

	> .links {
		display: none;
		animation: .2s my-animation;
	}

	&.-expanded {
	
		> button {
			background-image: url(images/white-cross.svg);
			background-size: contain;
			background-repeat: no-repeat;
		}
	
		> .links {
			display: grid;
			background: var(--white);
			padding: 1em;
			position: relative;
			top: 96px;
			right: 16px;
			border-radius: 16px;
			box-shadow: var(--mobile-box-shadow);

			> a {
				padding: 24px;	
				border-radius: 8px;
				text-decoration: none;
				color: var(--black);

				> h3 {
					font-weight: 600;
				}
			}
			
			> a:hover {
				background-color: var(--main-color);
				color: var(--white);
			}
		}
	}
}

footer#contacto {
	background: var(--main-gradient);
}

.card {
	border-radius: 16px;	
	border: solid 1.2px var(--light-main-color);
	background: var(--white);
	box-shadow: var(--mobile-box-shadow);

	p {
		text-wrap: balance;
	}
}

@keyframes hero-animation {
	from { transform: translate(-16px);}
	to { opacity: 1; }
}

.hero-section {
	color: var(--white);
	min-height: 96vh;
	padding-block: 10vh 6vh;
	background: #56CCF2;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);  /* Chrome 10-25, Safari 5.1-6 */
	background: var(--main-gradient);  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

	a {
		text-decoration: none;
	}
	
	.cta-button {
		margin-top: 48px;
		animation: 2s hero-animation .2s forwards;
		opacity: 0;
	}

	> main > div {
		position: relative;
		display: grid;
		gap: calc(1vh + 16px);

		> .greeting {
			color: var(--soft-white);
			max-width: 100%; 
			font-size: 1rem;
			line-height: 1;
		}
	
		> .paragraph::before {
			content: "";
			display: inline-block;
			background-image: url(images/rocket-2.gif);
			background-size: cover;
			background-position: center;
			width: 32px;
			height: 32px;
			border-radius: 100%;
			margin-right: 8px;
			position: relative;
			top: 10px;
		}	

		> .paragraph {
			font-size: clamp(1rem, 5vw, 1.4rem);
			text-wrap: pretty;
		}
	}

	.illustration {
		display: none;
	}
}


.cta-button {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 20px;
	width: 100%;	
	height: 92px;
	border-radius: 16px;
	background: var(--white);
	border: solid 1px var(--soft-black);
	box-shadow: -3px 6px 0em 0px #575757;

	> img {
		width: 32px;
		height: 32px;
	}

	> span {
		font-family: "Montserrat";
		font-size: 1rem;
		font-weight: 500;
		letter-spacing: -0.03em;
	}
}

.frequent-questions {
	display: grid;
	gap: 32px;
	place-items: center;
	background: var(--lightest-main-color);
		
	ul, li, p {
		display: none;
	}

	> h2 {
		width: 100%;
		max-width: 900px;
	}

	> .card {
		display: grid;
		grid-template-columns: 1fr 64px;
		grid-template-rows: 96px;	
		align-items: center;
		width: 100%;
		max-width: 900px;
		animation-name: fade-in;
		animation-timeline: view();
		animation-range: -5% 40%;

		> h5 {
			padding-inline : 24px;
		}

		> button {
			place-items: center;
			min-height: 100%;
			border: transparent;
			border-radius: 0 16px 16px 0;
			background: var(--main-color);

			> img {
				width: 64px;
				height: 64px;
			}
		}
		
		&.-expanded {
			grid-template-columns: 1fr;
			grid-template-rows: 96px 1fr 48px;

			ul, li, p {
				display: block;
			}
			
			li, p {
				display: block;
				color: var(--soft-black);
				font-weight: 300;
				position: relative;
				top: -20px;
				animation: 1s my-animation;
				padding-inline: 1.5em;
				text-wrap: balance;
			}
			
			li  {
				padding-bottom: 1em;
			}
			
			li:last-child {
				padding-bottom: 0;
			}

			> h5 {
				padding-right: 0;
			}

			> button {
				background-color: transparent;
				padding: 0 8px 8px 0;
				border-radius: 0;
				place-self: end;
				position: relative;

				> img {
					rotate: 180deg;
					filter: invert(1);
					max-width: 64px;
				}	
			}
		}
	}
}

.thomas-work {
	display: grid;
	gap: 64px;
	text-align: center;
	padding: 160px 0;
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%232f80ed' fill-opacity='0.1'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

	.phrase {
		background: var(--main-gradient);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;	
		animation-name: fade-in;
		animation-timeline: view();
		animation-range: -5%;
	}

	> .work {
		display: grid;
		row-gap: 32px;	
	
		> .carrousel {
			display: flex;
			gap: 16px;
			max-width: 100%;
			overflow: auto;
			padding: 16px;
			background-color: var(--light-main-color);
	
			> a {
				text-decoration: none;
			}

			
			.item {
				flex-shrink: 0;
				flex-basis: auto;
				width: 80vw;
				max-width: 800px;
				background-size: cover;
				aspect-ratio: 2;
				border-radius: 16px;

				> h2 {
					display: grid;
					place-content: center;
					height: 100%;
					text-decoration: underline;
					text-underline-offset: 0.2em;
					backdrop-filter: brightness(0.4);
					color: var(--white);
					border-radius: 16px;
				}
			}
			
			.riztowebsite {	
				background-image: url(images/rizto.png);
			}

			.weatherapp {
				background-image: url(images/weather-app-image.png);
			}

			.webdesignlawyer {
				background-image: url(images/estudio-abogados.png);
			} 

			.webdesignstore {
				background-image: url(images/tienda-ropa.png);
			} 

			.socialmediacontent {
				background-image: url(images/posteos-redes.png);
			} 
		}
	}
}


.about-thomas {
	display: flex;
	flex-direction: column;
	gap: 32px;
	max-width: 900px;
	margin-inline: auto;

		
	> .container {
		display: grid;
		gap: 32px;
		place-content: center;
		grid-template-columns: repeat(auto-fill, minmax(280px, 430px));	

		> .card {
			display: flex;
			flex-direction: column;
			gap: 16px;
			margin-bottom: 16px;
			box-shadow: var(--light-blue-shadow);
			position: relative;
			animation-name: from-bottom;
			animation-timeline: view();
			animation-range: -5% 60%;
			
			> img {
				border-bottom: solid 1px var(--light-main-color);
				padding: 32px;
				margin-bottom: 8px;
				width: 100%;
				height: 100%;
			}
			
			> .text {
				padding: 16px 32px 48px;	

				> h2 { 
					font-size: 1.3rem; 
					margin-bottom: 16px;
				}

				> p {
					color: var(--soft-black);
					font-weight: 300;
				}
			}
		}
	}
}

.contact-section {
	display: grid;
	grid-template-columns: 100%;
	gap: 80px;
	max-width: 900px;
	margin-inline: auto;
	color: var(--white);
	padding: 64px 6vw 96px;
	background-color: transparent;
	
	a {
		color: var(--white);
		text-decoration: underline;
		text-underline-offset: .3em;
	}

	> hgroup > h2 {
		font-size: clamp(1.3rem, 6vw, 2.5rem);
		text-align: center;
	}

	> a {
		color: var(--soft-white);
		text-align: center;
	}
	
	.data {
		display: grid;
		row-gap: 8px;
		
		> h3 {
			margin-bottom: 16px;
		}
		
		> a {
			
	 		&.-phone > p::before {
				background-image: url(images/white-whatsapp.svg);
			}

			&.-email > p::before {
			    background-image: url(images/white-email.svg);
		    	}

			> p::before {
				content: "";
				display: inline-block;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;
				width: 32px;
				height: 32px;
				position: relative;
				top: 12px;
				margin-right: 24px;
			}
			
			> p {
				font-size: clamp(.9rem, 3.5vw, 1.2rem);
				line-height: 4;
				text-decoration: underline;
				text-underline-offset: .3em;
			}
		}
	
	}
}

@keyframes fade-in {
	from { opacity: .5; scale: .8;  }
}

@keyframes from-bottom {
	from { transform: translateY(150px); }
}

@media (min-width: 824px) {
	nav > button {
		width: 64px;
		height:64px;
	}

	.cta-button {
		max-width: 500px;	
		gap: 32px;
		
		> span {
			font-size: 1.2rem
		}
	}
	
	.hero-section {
			display: flex;
			align-items: center;
			place-content: center;
			gap: 12vw;
			min-height: 100vh;


			> main > div {

				> .paragraph::before {
					display: none;
				}
				
				> .paragraph {
					max-width: 470px;
				}
			}

			> .illustration {
				display: block;
				width: 30vw;
				background-size: cover;
				
			}

			.cta-button {
				height: 96px;
				margin-block: 64px;
			}
	}

	.frequent-questions > .card {
		grid-template-rows: 120px;
		grid-template-columns: 1fr 96px;
		
		> h5 {
			padding-inline: 32px;
		}
	}

	.about-thomas { 
		gap: 64px;

		> .container {
			grid-template-columns: 1fr;

			> .card {
				display: grid;
				grid-template-columns: 40% 1fr;
				height: 340px;
				place-items: center;
				padding-right: 0;
				gap: 16px;

				> img {
					border-bottom: transparent;
					margin-bottom: 0;
					padding-block: 16px;
					border-right: 1px solid var(--light-main-color);
				}

				> .text {
					padding: 32px 24px;

					> h2 {
						margin-bottom: 8px;
					}

				}
			}
		}
	}
}