/**
 * Nosotros page (template-nosotros.php) — page-specific styles.
 *
 * @package Astra_Child
 */

/* ==========================================================================
   Team section — fit inside the viewport (no scroll) while keeping the
   square portrait photos uncropped (the grid width is reduced instead).
   ========================================================================== */
.team-section {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: calc(100svh - 84px);
	padding-block: clamp(14px, 2.6vh, 40px);
	padding-bottom: 0;
}
.team-section .section-heading {
	margin-bottom: clamp(14px, 2.2vh, 28px);
}
.team-section .section-heading h2 {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
}
.team-section .section-heading p:not(.eyebrow) {
	font-size: 0.88rem;
}
.team-section .team-grid {
	max-width: 880px;
	margin-inline: auto;
	gap: clamp(16px, 1.6vw, 22px);
}
.team-section .team-card {
	background: transparent;
	padding-bottom: 0;
}
.team-section .team-card-body {
	background: #fff;
	border-radius: 15px 15px 0 0;
	padding: 0 12px 10px;
}
/* 4px breathing room above each of the three text tags */
.team-section .team-card-body > * {
	padding-top: 4px;
}
.team-section .team-card-body > a {
	display: inline-block;
}
/* Let the section background show through the transparent team photos */
.team-section .team-image {
	background: transparent;
}
.team-section .team-card h3 {
	margin: 4px 0 4px;
	font-size: 1.06rem;
}
.team-section .team-card p {
	margin-bottom: 4px;
	font-size: 0.8rem;
}
.team-section .team-card a {
	font-size: 0.74rem;
}

@media (max-width: 900px) {
	.team-section {
		min-height: 0;
		padding-block: 64px;
	}
	.team-section .team-grid {
		max-width: none;
	}
}

/* ==========================================================================
   About hero — shorter band.
   ========================================================================== */
.about-hero {
	min-height: clamp(400px, 55vh, 540px);
}
.about-image {
	min-height: 0;
}
.about-copy {
	padding-block: clamp(36px, 5vh, 64px);
}
.about-hero .about-copy h1 {
	margin-bottom: 24px;
	font-size: clamp(2.1rem, 3.6vw, 2.9rem);
}
@media (max-width: 900px) {
	.about-hero {
		min-height: 0;
	}
	.about-image {
		min-height: 360px;
	}
}

/* ==========================================================================
   Value cards — line icons instead of the old numeric badges.
   ========================================================================== */
/* No bottom padding: the next section already contributes its own top
   padding and both share the same background colour. */
.value-grid {
	padding-top: 72px;
	padding-bottom: 0;
}
.feature-card > span {
	width: 52px;
	height: 52px;
	border: 1px solid var(--berry);
	border-radius: 50%;
	background: transparent;
}
.feature-card > span svg {
	display: block;
	width: 26px;
	height: 26px;
}

/* ==========================================================================
   Closing sections: integral approach + "a tu servicio" note.
   ========================================================================== */
.about-scope {
	padding-top: 72px;
}
.about-block-head {
	max-width: 880px;
	margin-bottom: 44px;
}
.about-block-head h2 {
	margin: 0 0 14px;
	font-size: clamp(1.7rem, 2.8vw, 2.4rem);
	line-height: 1.12;
}
.about-block-head p {
	margin: 0;
	color: var(--muted);
	font-size: 1.02rem;
	line-height: 1.75;
}
.about-block-head--center {
	max-width: 860px;
	margin-inline: auto;
	margin-bottom: 0;
	text-align: center;
}
.scope-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.scope-card {
	padding: 30px 32px;
	border: 1px solid var(--line);
	background: var(--paper);
}
.scope-card h3 {
	margin: 0 0 10px;
	font-size: 1.12rem;
}
.scope-card p {
	margin: 0;
	color: var(--muted);
	font-size: 0.92rem;
	line-height: 1.7;
}

@media (max-width: 900px) {
	.scope-grid {
		grid-template-columns: 1fr;
	}
	.scope-card {
		padding: 26px 24px;
	}
}