/* =============================================================
   ABOUT US — diseño Pencil. Prefijo .abx
   Reusa tokens de la marca. Cormorant + Inter. Iconos Lucide.
   ============================================================= */
.abx {
	--abx-blue:    var(--son-primary-blue, #1F4768);
	--abx-green:   var(--son-secondary-green, #3E775E);
	--abx-burg:    var(--son-deep-burgundy, #752632);
	--abx-rose:    var(--son-rose-red, #AF4462);
	--abx-bg:      var(--son-background, #F8F8F5);
	--abx-surface: var(--son-surface, #FFFFFF);
	--abx-text:    var(--son-text, #10202D);
	--abx-text-2:  var(--son-text-secondary, #4A5A66);
	--abx-border:  var(--son-border-subtle, #E4E4DD);
	--abx-accent:  var(--son-accent-green, #B4D882);
	--abx-head:    var(--son-font-heading, 'Cormorant Garamond', serif);
	--abx-body:    'Inter', 'Noto Sans', sans-serif;
	--abx-shadow:  var(--son-shadow-card, 0 1.2rem 3rem rgba(16,32,45,.14));
	--abx-radius:  2rem;
	background: var(--abx-bg);
	color: var(--abx-text);
	font-family: var(--abx-body);
}
.abx-container { max-width: 120rem; margin-inline: auto; padding-inline: 4rem; }
.abx-section { padding: 10rem 0; }
.abx-section--bg { background: var(--abx-bg); }
.abx-section--surface { background: var(--abx-surface); }
.abx-eyebrow { font-size: 1.3rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--abx-green); margin-bottom: 1.2rem; }
.abx-eyebrow--light { color: var(--abx-accent); }
.abx-h2 { font-family: var(--abx-head); font-size: clamp(3.2rem, 4vw, 4.6rem); font-weight: 600; line-height: 1.05; color: var(--abx-text); }
.abx-prose { font-size: 1.6rem; line-height: 1.7; color: var(--abx-text-2); margin-top: 1.6rem; }
.abx-head--center { text-align: center; margin-bottom: 5.6rem; }
.abx-head__sub { font-size: 1.6rem; line-height: 1.5; color: var(--abx-text-2); max-width: 60ch; margin: 1.4rem auto 0; }

/* Botones */
.abx-btn { display: inline-flex; align-items: center; gap: 1rem; font-size: 1.5rem; font-weight: 600; padding: 1.5rem 2.8rem; border-radius: 100px; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.abx-btn:hover { transform: translateY(-2px); }
.abx-btn--blue { background: var(--abx-blue); color: #fff; }
.abx-btn--primary { background: linear-gradient(90deg, var(--abx-burg), var(--abx-rose)); color: #fff; box-shadow: 0 1rem 2.4rem rgba(117,38,50,.35); }
.abx-btn--glass { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.4); backdrop-filter: blur(10px); }
.abx-btn--glass:hover { background: rgba(255,255,255,.22); }
.abx-btn .sonadv-ic { width: 1.7rem; height: 1.7rem; }

/* ═══ HERO ═══ */
.abx-hero { position: relative; min-height: 56rem; display: flex; align-items: center; justify-content: center; text-align: center; background-size: cover; background-position: center; color: #fff; }
.abx-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,32,45,.65), rgba(16,32,45,.5) 50%, rgba(16,32,45,.8)); }
.abx-hero__content { position: relative; z-index: 1; max-width: 90rem; padding: 12rem 4rem 6rem; }
.abx-hero__title { font-family: var(--abx-head); font-size: clamp(4.4rem, 7vw, 8rem); font-weight: 500; line-height: 1.02; margin-bottom: 2rem; }
.abx-hero__sub { font-size: 1.8rem; line-height: 1.6; color: rgba(255,255,255,.88); max-width: 60ch; margin-inline: auto; }

/* ═══ STORY (img + texto) ═══ */
.abx-story { display: grid; grid-template-columns: 1fr 1fr; gap: 7.2rem; align-items: center; }
.abx-story__img { border-radius: var(--abx-radius); min-height: 46rem; background-size: cover; background-position: center; background-color: var(--abx-blue); box-shadow: var(--abx-shadow); }
.abx-story__body .abx-prose:first-of-type { margin-top: 2rem; }
.abx-story__body .abx-btn { margin-top: 2.8rem; }

/* ═══ MISSION (texto + img) ═══ */
.abx-mission { display: grid; grid-template-columns: 1fr 1fr; gap: 7.2rem; align-items: center; }
.abx-mission__img { border-radius: var(--abx-radius); min-height: 46rem; background-size: cover; background-position: center; background-color: var(--abx-blue); box-shadow: var(--abx-shadow); }

/* ═══ STATS ═══ */
.abx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4rem; }
.abx-stat { background: var(--abx-surface); border: 1px solid var(--abx-border); border-radius: var(--abx-radius); padding: 4rem 2.8rem; text-align: center; }
.abx-stat__num { display: block; font-family: var(--abx-head); font-size: 5.8rem; font-weight: 600; line-height: 1; color: var(--abx-blue); }
.abx-stat__label { display: block; font-size: 1.5rem; color: var(--abx-text-2); margin-top: 1rem; }

/* ═══ TEAM ═══ */
.abx-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.8rem; }
.abx-member { background: var(--abx-surface); border: 1px solid var(--abx-border); border-radius: var(--abx-radius); overflow: hidden; box-shadow: var(--abx-shadow); }
.abx-member__photo { height: 32rem; background-size: cover; background-position: center; background-color: var(--abx-blue); }
.abx-member__body { padding: 2.2rem 2.4rem 2.6rem; }
.abx-member__name { font-family: var(--abx-head); font-size: 2.5rem; font-weight: 600; line-height: 1; margin-bottom: .6rem; }
.abx-member__role { font-size: 1.1rem; font-weight: 600; letter-spacing: .15em; color: var(--abx-green); margin-bottom: 1rem; }
.abx-member__bio { font-size: 1.35rem; line-height: 1.5; color: var(--abx-text-2); }

/* ═══ VALUES ═══ */
.abx-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.8rem; }
.abx-value { background: var(--abx-surface); border: 1px solid var(--abx-border); border-radius: var(--abx-radius); box-shadow: var(--abx-shadow); padding: 3.6rem; }
.abx-value__icon { width: 5.8rem; height: 5.8rem; border-radius: 1.6rem; background: rgba(31,71,104,.1); color: var(--abx-blue); display: grid; place-items: center; margin-bottom: 1.8rem; }
.abx-value__icon .sonadv-ic { width: 2.6rem; height: 2.6rem; }
.abx-value__title { font-family: var(--abx-head); font-size: 2.6rem; font-weight: 600; margin-bottom: 1rem; }
.abx-value__text { font-size: 1.5rem; line-height: 1.6; color: var(--abx-text-2); }

/* ═══ CTA ═══ */
.abx-cta { position: relative; padding: 10rem 4rem; text-align: center; color: #fff; background-size: cover; background-position: center; background-color: var(--abx-blue); }
.abx-cta__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,32,45,.8), rgba(16,32,45,.6) 50%, rgba(16,32,45,.85)); }
.abx-cta__content { position: relative; z-index: 1; max-width: 78rem; margin-inline: auto; }
.abx-cta__headline { font-family: var(--abx-head); font-size: clamp(3.6rem, 5vw, 6.4rem); font-weight: 500; line-height: 1.02; margin-bottom: 1.8rem; }
.abx-cta__sub { font-size: 1.7rem; line-height: 1.6; color: rgba(255,255,255,.9); max-width: 58ch; margin: 0 auto 3.2rem; }
.abx-cta__buttons { display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap; }
.abx-cta__buttons .abx-btn i { font-size: 1.7rem; }

/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) {
	.abx-section { padding: 7rem 0; }
	.abx-story, .abx-mission { grid-template-columns: 1fr; gap: 4rem; }
	.abx-mission__body { order: -1; }
	.abx-stats { grid-template-columns: repeat(2, 1fr); }
	.abx-team { grid-template-columns: repeat(2, 1fr); }
	.abx-values { grid-template-columns: 1fr; max-width: 50rem; margin-inline: auto; }
}
@media (max-width: 680px) {
	.abx-container, .abx-cta { padding-inline: 2rem; }
	.abx-stats { grid-template-columns: 1fr; }
	.abx-team { grid-template-columns: 1fr; max-width: 38rem; margin-inline: auto; }
	.abx-story__img, .abx-mission__img { min-height: 32rem; }
}