/* ==================================================
   HERO NOSOTROS
================================================== */

.about-hero{

	padding:4rem 0;

	background:var(--color-accent-light);

	text-align:center;
}

.about-hero__content{

	max-width:900px;

	margin:0 auto;
}

.about-hero__eyebrow{

	display:inline-block;

	margin-bottom:1rem;

	padding:8px 18px;

	border-radius:999px;

	background:rgba(58,155,255,.12);

	color:var(--color-primary);

	font-size:.85rem;

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:1px;
}

.about-hero h1{

	margin-bottom:1.5rem;

	color:var(--color-primary-dark);

	font-size:clamp(
		2.5rem,
		5vw,
		4rem
	);
}

.about-hero p{

	max-width:700px;

	margin:0 auto;

	line-height:1.8;

	color:var(--color-text-light);

	font-size:1.6rem;
}

/* ==================================================
   ABOUT CONTENT
================================================== */

.about-content{

	padding:4rem 0;
	background: var(--color-primary-light);
}

.about-content__grid{

	display:grid;

	grid-template-columns:1fr;

	gap:3rem;

	align-items:center;
}

.about-content__image img{

	width:100%;

	border-radius:24px;

	display:block;

	box-shadow:
	0 20px 50px rgba(0,0,0,.08);
}

.about-content__text h2{

	margin-bottom:1.5rem;

	color:var(--color-primary-dark);
}

.about-content__text p{

	margin-bottom:1.5rem;

	line-height:1.9;

	color:var(--color-text-light);
}

.section-tag{

	display:inline-block;

	margin-bottom:1rem;

	color:var(--color-primary);

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:1px;
}

/* ==================================================
   VALORES
================================================== */

.values{

	padding:4rem 0;

	background:var(--color-accent-light);
}

.values .section-header{

	text-align:center;

	max-width:800px;

	margin:0 auto 3rem;
}

.values .section-header h2{

	color:var(--color-primary-dark);
}

.values-grid{

	display:grid;

	grid-template-columns:1fr;

	gap:1.5rem;
}

.value-card{

	background:#fff;

	padding:2rem;

	border-radius:20px;

	border:1px solid rgba(58,155,255,.12);

	box-shadow:
	0 8px 25px rgba(0,0,0,.04);

	transition:.3s ease;
}

.value-card:hover{

	transform:translateY(-6px);

	box-shadow:
	0 18px 40px rgba(0,0,0,.08);
}

.value-card h3{

	margin-bottom:1rem;

	color:var(--color-primary-dark);
}

.value-card p{

	color:var(--color-text-light);

	line-height:1.8;

	margin:0;
}

/* ==================================================
   SOCIAL
================================================== */

.social-section{

	padding:4rem 0;
	background: var(--color-primary-light);
}

.social-section__header{

	max-width:800px;

	margin:0 auto 3rem;

	text-align:center;
}

.social-section__header h2{

	margin-bottom:1rem;

	color:var(--color-primary-dark);
}

.social-section__header p{

	line-height:1.8;

	color:var(--color-text-light);
}

.social-grid{

	display:grid;

	grid-template-columns:repeat(
		2,
		1fr
	);

	gap:1rem;
}

.social-card{

	display:flex;

	align-items:center;

	justify-content:center;

	min-height:120px;

	border-radius:20px;

	background:#fff;

	border:1px solid rgba(58,155,255,.12);

	font-weight:700;

	color:var(--color-primary-dark);

	box-shadow:
	0 8px 25px rgba(0,0,0,.04);

	transition:.3s ease;
}

.social-card:hover{

	transform:translateY(-5px);

	background:var(--color-primary);

	color:#fff;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (min-width:768px){

	.values-grid{

		grid-template-columns:
			repeat(2,1fr);
	}

	.social-grid{

		grid-template-columns:
			repeat(4,1fr);
	}
}

@media (min-width:992px){

	.about-content__grid{

		grid-template-columns:
			1fr
			1fr;

		gap:5rem;
	}

	.values-grid{

		grid-template-columns:
			repeat(4,1fr);
	}
}