/**
 * Página "Sobre nosotros".
 */

.ht-about {
	background: #faf6f3;
	overflow: hidden;
}

.ht-about h1,
.ht-about h2 {
	font-family: var(--ht-font-ui);
	letter-spacing: -0.055em;
}

/* ---------- Presentación ---------- */

.ht-about-hero {
	position: relative;
	min-height: 710px;
	background: #faf6f3;
	overflow: hidden;
}

.ht-about-hero::after {
	content: "";
	position: absolute;
	top: -205px;
	right: -245px;
	width: 860px;
	height: 860px;
	border-radius: 50%;
	background: #ece8dc;
}

.ht-about-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(420px, 0.84fr) minmax(620px, 1.16fr);
	align-items: center;
	gap: 48px;
	min-height: 710px;
	padding-top: 58px;
	padding-bottom: 52px;
}

.ht-about-hero__content {
	max-width: 540px;
	padding-left: 1px;
}

.ht-about-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 18px;
	margin-bottom: 23px;
	border-radius: 999px;
	background: var(--ht-color-primary);
	color: var(--ht-white);
	font-family: var(--ht-font-ui);
	font-size: 1rem;
	font-weight: 600;
}

.ht-about-hero h1 {
	max-width: 500px;
	margin: 0 0 30px;
	color: var(--ht-color-primary);
	font-size: clamp(3.75rem, 5vw, 5rem);
	font-weight: 600;
	line-height: 0.98;
}

.ht-about-hero h1 span {
	display: block;
}

.ht-about-hero__lede {
	max-width: 515px;
	margin: 0 0 28px;
	color: var(--ht-color-text-muted);
	font-size: 1.02rem;
	line-height: 1.56;
}

.ht-about-hero__support {
	margin: 0 0 15px;
	color: var(--ht-color-text-muted);
	font-size: 0.94rem;
}

.ht-about-audiences {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.ht-about-audiences li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-height: 38px;
	padding: 0 16px;
	border: 1px solid rgba(188, 155, 104, 0.2);
	border-radius: 999px;
	background: #eee9df;
	color: #665f57;
	font-size: 0.88rem;
	font-weight: 500;
}

.ht-about-audiences svg {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: var(--ht-color-tan);
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.ht-about-collage {
	display: grid;
	grid-template-columns: minmax(0, 1.53fr) minmax(0, 1fr);
	align-items: center;
	gap: 18px;
	width: 100%;
	max-width: 690px;
	justify-self: end;
}

.ht-about-collage img {
	width: 100%;
	height: auto;
}

.ht-about-collage__main {
	align-self: stretch;
	object-fit: contain;
}

.ht-about-collage__side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 13px;
}

/* ---------- Quiénes somos ---------- */

.ht-about-identity {
	position: relative;
	min-height: 540px;
	background-color: #1f602e;
	background-image:
		repeating-radial-gradient(circle at 0 100%, transparent 0 32px, rgba(255, 255, 255, 0.028) 33px 35px, transparent 36px 63px),
		repeating-radial-gradient(circle at 100% 0, transparent 0 32px, rgba(255, 255, 255, 0.024) 33px 35px, transparent 36px 63px);
	color: var(--ht-white);
	overflow: hidden;
}

.ht-about-identity__inner {
	display: grid;
	grid-template-columns: minmax(0, 44%) minmax(0, 56%);
	align-items: center;
	min-height: 540px;
	padding-left: 0;
}

.ht-about-identity__media {
	align-self: center;
	height: 450px;
	margin: 0;
	filter: drop-shadow(0 10px 8px rgba(10, 30, 12, 0.24));
}

.ht-about-identity__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.ht-about-identity__content {
	max-width: 720px;
	padding: 56px 40px 56px 115px;
}

.ht-about-identity__content h2 {
	margin: 0 0 29px;
	color: var(--ht-white);
	font-size: clamp(3rem, 4.5vw, 4.3rem);
	font-weight: 600;
	line-height: 1;
}

.ht-about-identity__content p {
	margin: 0 0 24px;
	color: rgba(255, 255, 255, 0.93);
	font-size: 1rem;
	line-height: 1.56;
}

.ht-about-identity__content p:last-child {
	margin-bottom: 0;
}

/* ---------- Valores ---------- */

.ht-about-values {
	padding: 80px 0 96px;
	background: #faf6f3;
}

.ht-about-values__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 55px;
}

.ht-about-value {
	display: grid;
	grid-template-rows: auto 1fr;
	min-height: 490px;
	overflow: hidden;
	border-radius: 34px;
	background: var(--ht-color-primary);
	box-shadow: 0 7px 8px rgba(96, 85, 70, 0.09);
}

.ht-about-value > img {
	width: 100%;
	aspect-ratio: 1.478 / 1;
	object-fit: cover;
}

.ht-about-value__content {
	padding: 30px 30px 34px;
	color: var(--ht-white);
}

.ht-about-value__content h2 {
	margin: 0 0 25px;
	color: var(--ht-white);
	font-size: clamp(1.65rem, 2.25vw, 2.15rem);
	font-weight: 600;
	line-height: 1.05;
}

.ht-about-value__content p {
	margin: 0;
	color: rgba(255, 255, 255, 0.94);
	font-size: 0.9rem;
	line-height: 1.52;
}

.ht-about-value--dark {
	background: #123e1b;
}

.ht-about-value--mid {
	background: #225d2a;
}

.ht-about-certifications {
	display: grid;
	grid-template-columns: 86px minmax(225px, 0.82fr) minmax(0, 2.2fr);
	align-items: center;
	gap: 24px;
	min-height: 148px;
	margin-top: 78px;
	padding: 24px 48px;
	border: 1px solid rgba(194, 182, 162, 0.26);
	border-radius: 999px;
	background: var(--ht-white);
	box-shadow: 0 4px 8px rgba(110, 101, 87, 0.08);
}

.ht-about-certifications__badge {
	width: 82px;
	height: 82px;
	object-fit: contain;
}

.ht-about-certifications__copy h2 {
	margin: 0 0 7px;
	color: #6c655d;
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.03em;
}

.ht-about-certifications__copy p {
	max-width: 250px;
	margin: 0;
	color: var(--ht-color-text-muted);
	font-size: 0.8rem;
	line-height: 1.45;
}

.ht-about-certifications__logos {
	display: grid;
	grid-template-columns: 0.72fr 1.4fr 1.45fr 0.7fr 0.82fr;
	align-items: center;
	gap: 27px;
}

.ht-about-certifications__logos img {
	width: 100%;
	max-height: 66px;
	object-fit: contain;
}

/* ---------- Misión ---------- */

.ht-about-mission {
	position: relative;
	min-height: 630px;
	background: #e4d1ad;
	overflow: hidden;
}

.ht-about-mission__fish {
	position: absolute;
	top: 62px;
	left: 0;
	width: 100%;
	height: auto;
	opacity: 0.8;
}

.ht-about-mission__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 630px;
}

.ht-about-mission__card {
	position: relative;
	width: min(660px, 70vw);
	min-height: 285px;
	padding: 62px 65px 54px;
	border-radius: 38px;
	background: rgba(255, 252, 249, 0.96);
	box-shadow: 0 5px 7px rgba(100, 84, 59, 0.08);
}

.ht-about-mission__card h2 {
	margin: 0 0 30px;
	color: var(--ht-color-primary);
	font-size: clamp(2.6rem, 4vw, 3.75rem);
	font-weight: 600;
	line-height: 1;
}

.ht-about-mission__card p {
	max-width: 515px;
	margin: 0;
	color: var(--ht-color-text-muted);
	font-size: 0.88rem;
	line-height: 1.53;
}

.ht-about-mission__card > img {
	position: absolute;
	right: -50px;
	bottom: -115px;
	width: 145px;
	filter: drop-shadow(0 10px 8px rgba(96, 77, 55, 0.14));
	transform: rotate(8deg);
}

/* ---------- CTA compartido ---------- */

.ht-about__cta {
	background: #faf6f3;
}

.ht-about__cta .ht-home-cta-wrap {
	padding-top: 78px;
	padding-bottom: 92px;
}

/* ---------- Adaptación ---------- */

@media (max-width: 1180px) {
	.ht-about-hero__inner {
		grid-template-columns: minmax(360px, 0.85fr) minmax(530px, 1.15fr);
		gap: 32px;
	}

	.ht-about-collage {
		max-width: 610px;
	}

	.ht-about-identity__content {
		padding-inline: 58px 32px;
	}

	.ht-about-values__grid {
		gap: 30px;
	}

	.ht-about-certifications {
		grid-template-columns: 74px minmax(190px, 0.8fr) minmax(0, 2.2fr);
		gap: 18px;
		padding-inline: 34px;
	}

	.ht-about-certifications__logos {
		gap: 18px;
	}
}

@media (max-width: 960px) {
	.ht-about-hero {
		min-height: 0;
	}

	.ht-about-hero::after {
		top: 38%;
		right: -40%;
		width: 780px;
		height: 780px;
	}

	.ht-about-hero__inner {
		grid-template-columns: 1fr;
		gap: 52px;
		min-height: 0;
		padding-top: 72px;
		padding-bottom: 76px;
	}

	.ht-about-hero__content {
		max-width: 680px;
	}

	.ht-about-collage {
		max-width: 700px;
		justify-self: center;
	}

	.ht-about-identity__inner {
		grid-template-columns: 1fr;
		padding-inline: 0;
	}

	.ht-about-identity__media {
		height: 440px;
		margin: 0;
	}

	.ht-about-identity__content {
		max-width: none;
		padding: 64px var(--ht-gutter-tablet) 72px;
	}

	.ht-about-values__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ht-about-certifications {
		grid-template-columns: 76px 1fr;
		border-radius: 36px;
	}

	.ht-about-certifications__logos {
		grid-column: 1 / -1;
		padding-top: 8px;
	}
}

@media (max-width: 700px) {
	.ht-about-hero::after {
		top: 50%;
		right: -85%;
		width: 680px;
		height: 680px;
	}

	.ht-about-hero__inner {
		gap: 36px;
		padding-top: 48px;
		padding-bottom: 56px;
	}

	.ht-about-hero__eyebrow {
		height: 34px;
		margin-bottom: 18px;
		font-size: 0.9rem;
	}

	.ht-about-hero h1 {
		margin-bottom: 24px;
		font-size: clamp(3rem, 14vw, 4rem);
	}

	.ht-about-hero__lede {
		font-size: 0.98rem;
	}

	.ht-about-audiences {
		gap: 8px;
	}

	.ht-about-audiences li {
		padding-inline: 13px;
		font-size: 0.8rem;
	}

	.ht-about-collage {
		grid-template-columns: 1.35fr 1fr;
		gap: 9px;
	}

	.ht-about-collage__side {
		gap: 7px;
	}

	.ht-about-identity__media {
		height: 315px;
	}

	.ht-about-identity__content {
		padding: 52px var(--ht-gutter-mobile) 58px;
	}

	.ht-about-identity__content h2 {
		font-size: 2.75rem;
	}

	.ht-about-identity__content p {
		font-size: 0.94rem;
	}

	.ht-about-values {
		padding-block: 56px;
	}

	.ht-about-values__grid {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.ht-about-value {
		min-height: 0;
	}

	.ht-about-certifications {
		grid-template-columns: 62px 1fr;
		gap: 14px;
		margin-top: 48px;
		padding: 24px 20px 28px;
	}

	.ht-about-certifications__badge {
		width: 62px;
		height: 62px;
	}

	.ht-about-certifications__logos {
		grid-template-columns: repeat(3, 1fr);
		gap: 18px;
	}

	.ht-about-certifications__logos img {
		max-height: 54px;
	}

	.ht-about-mission,
	.ht-about-mission__inner {
		min-height: 530px;
	}

	.ht-about-mission__fish {
		top: 62px;
		left: 50%;
		width: 920px;
		max-width: none;
		transform: translateX(-50%);
	}

	.ht-about-mission__card {
		width: 100%;
		min-height: 0;
		padding: 46px 28px 104px;
		border-radius: 30px;
	}

	.ht-about-mission__card h2 {
		font-size: 2.65rem;
	}

	.ht-about-mission__card > img {
		right: 12px;
		bottom: -54px;
		width: 112px;
	}

	.ht-about__cta .ht-home-cta-wrap {
		padding-top: 58px;
		padding-bottom: 64px;
	}
}

@media (max-width: 420px) {
	.ht-about-audiences li {
		flex: 1 1 auto;
		justify-content: center;
	}

	.ht-about-certifications__logos {
		grid-template-columns: repeat(2, 1fr);
	}
}