/* =========================================================================
   Top Dental Care — /about-us
   Equipo (7 doctores + 8 staff, SIN Esteban), Eugenio destacado, ángulo familiar.
   Depende de tokens de main.css. Responsive + neuromarketing.
   ========================================================================= */

.ab-main { overflow-x: clip; }
.ab-wrap { max-width: var(--td-maxw); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); box-sizing: border-box; }
.ab-section { padding-block: clamp(48px, 6.5vw, 92px); }
.ab-kicker { font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .8rem; color: var(--td-primary); margin: 0 0 .6rem; }
.ab-h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 .5rem; }
.ab-lead { color: var(--td-ink-soft); font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 64ch; }
.ab-center { text-align: center; }
.ab-center .ab-lead { margin-inline: auto; }

/* ---------- HERO compacto (foto + overlay navy) ---------- */
.ab-hero { position: relative; color: #fff; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(70px, 10vw, 120px); }
.ab-hero__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center 35%; }
.ab-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(1,45,80,.86), rgba(1,79,138,.82)); }
.ab-hero__inner { position: relative; z-index: 2; max-width: 820px; margin-inline: auto; padding-inline: clamp(18px,5vw,40px); box-sizing: border-box; }
.ab-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); margin: 0 0 .5rem; overflow-wrap: break-word; }
.ab-hero p { color: rgba(255,255,255,.92); font-size: clamp(1.02rem, 1.6vw, 1.25rem); margin: 0; }

/* ---------- Family story (ángulo de confianza) ---------- */
.ab-family { background: var(--td-bg-tint); }
.ab-family__box { max-width: 900px; margin-inline: auto; text-align: center; }
.ab-family__box .ab-lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--td-ink); }
.ab-family__tag { display: inline-flex; align-items: center; gap: .5rem; background: var(--td-primary-050); color: var(--td-primary); font-weight: 700; padding: .4rem 1rem; border-radius: 999px; margin-bottom: 1.2rem; font-size: .9rem; }
.ab-family__note { font-size: .82rem; color: #8892a0; font-style: italic; margin-top: 1.2rem; }

/* ---------- Eugenio spotlight (differenciador) ---------- */
.ab-eugenio__card { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.4rem, 4vw, 3rem); align-items: center; background: linear-gradient(135deg, var(--td-primary), var(--td-primary-dark)); color: #fff; border-radius: var(--td-radius-lg); padding: clamp(1.6rem, 4vw, 2.6rem); box-shadow: var(--td-shadow); }
.ab-eugenio__photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 5px solid rgba(255,255,255,.25); justify-self: center; }
.ab-eugenio__card h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 .2rem; }
.ab-eugenio__role { color: #ffd15c; font-weight: 700; letter-spacing: .04em; margin: 0 0 1rem; }
.ab-eugenio__card p { color: rgba(255,255,255,.94); margin: 0 0 1.3rem; }
.ab-eugenio__cta { display: inline-flex; align-items: center; gap: .5rem; background: #25D366; color: #062b16; font-weight: 700; padding: .8rem 1.5rem; border-radius: 999px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.ab-eugenio__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22); text-decoration: none; color: #062b16; }

/* ---------- Team grids (doctores / staff) con aro de acento (igual que el Home) ---------- */
.ab-team { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem 1.3rem; margin-top: 2.4rem; }
.ab-member { flex: 1 1 180px; max-width: 208px; text-align: center; }
.ab-member__ph {
	width: 178px; height: 178px; margin: 0 auto 1rem; border-radius: 50%; padding: 4px;
	background: linear-gradient(140deg, var(--td-primary) 0%, var(--td-accent) 100%);
	box-shadow: 0 10px 24px rgba(1,112,185,.18);
	transition: transform .3s ease;
}
.ab-member:hover .ab-member__ph { transform: translateY(-4px) scale(1.03); }
.ab-member__photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; border: 3px solid #fff; background: var(--td-bg-tint); }
.ab-member h3 { font-size: 1.06rem; margin: 0 0 .15rem; }
.ab-member__role { color: var(--td-primary); font-size: .8rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin: 0; }

/* ---------- Brands strip (autoridad, reutiliza patrón) ---------- */
.ab-brands { background: var(--td-bg-tint); padding-block: clamp(40px, 5vw, 60px); }
.ab-brands__strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.4rem, 4vw, 2.8rem); margin-top: 1.4rem; }
.ab-brands__strip img { height: 38px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: .6; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.ab-brands__strip img:hover { filter: none; opacity: 1; transform: translateY(-2px); }

/* ---------- CTA band ---------- */
.ab-cta { background: linear-gradient(135deg, var(--td-primary), var(--td-primary-dark)); color: #fff; text-align: center; }
.ab-cta h2 { color: #fff; font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: 0 0 .5rem; }
.ab-cta p { color: rgba(255,255,255,.92); max-width: 56ch; margin: 0 auto 1.6rem; }
.ab-cta__row { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.ab-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; border-radius: 999px; padding: .9rem 1.6rem; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background-color .25s, color .25s; }
.ab-btn:hover { transform: translateY(-2px); text-decoration: none; }
.ab-btn--wa { background: #25D366; color: #062b16; }
.ab-btn--wa:hover { background: #1fbb59; color: #062b16; box-shadow: 0 10px 26px rgba(0,0,0,.22); }
.ab-btn--ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.6); }
.ab-btn--ghost:hover { background: #fff; color: var(--td-primary-dark); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.ab-eugenio__card { grid-template-columns: 1fr; text-align: center; }
	.ab-eugenio__photo { width: 160px; height: 160px; }
}
@media (max-width: 680px) {
	.ab-member { flex-basis: 142px; }
	.ab-member__ph { width: 150px; height: 150px; }
}