/* ============================================================
   About People — a flat grid of profile cards. The brief says not to
   imply hierarchy, so all six cards are identical: same size, same
   weight, same portrait.
   ============================================================ */
.srweb .srw-ab-gen-cab { max-width: 62ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.srweb .srw-ab-gente .eyebrow { color: var(--c-ink); }
.srweb .srw-ab-gente .srw-ab-gen-cab p { font-size: 1rem; line-height: 1.68; color: var(--c-text-soft); margin: 0 0 1rem; }
.srweb .srw-ab-gente .srw-ab-gen-cab p:last-child { margin-bottom: 0; }
.srweb .srw-ab-gente .srw-ab-lead { color: var(--c-text); }
.srweb .srw-ab-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.6rem); }
@media (max-width: 56.25em) { .srweb .srw-ab-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 35em)   { .srweb .srw-ab-rejilla { grid-template-columns: 1fr; } }

/* The card is the link to the profile, laid out sideways: portrait left,
   name and badge right. A stacked column left the right third of every
   card empty. */
.srweb .srw-ab-pf {
	--pf-r: clamp(78px, 6.2vw, 96px);
	container-type: inline-size;
	display: grid; grid-template-columns: var(--pf-r) minmax(0, 1fr);
	align-items: center; gap: clamp(.85rem, 1.6vw, 1.15rem);
	padding: clamp(.95rem, 1.7vw, 1.25rem);
	background: rgba(255,255,255,.72);
	border: 1px solid rgba(255,255,255,.9);
	border-radius: var(--r-xl);
	box-shadow: 0 16px 36px rgba(20,29,55,.09), inset 0 1px 0 rgba(255,255,255,.9);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	        backdrop-filter: blur(14px) saturate(1.2);
	transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out), border-color .3s var(--ease-out);
}
/* As a link it must not pick up the body link styling (blue, underline). */
.srweb a.srw-ab-pf, .srweb a.srw-ab-pf:hover { text-decoration: none; color: inherit; border-bottom: 0; font-weight: 400; }
.srweb a.srw-ab-pf:hover {
	transform: translateY(-4px);
	border-color: rgba(14,116,144,.28);
	box-shadow: 0 24px 52px rgba(20,29,55,.14);
}
@media (max-width: 68.75em) { .srweb .srw-ab-pf { --pf-r: clamp(76px, 8vw, 92px); } }
@media (max-width: 35em)    { .srweb .srw-ab-pf { --pf-r: 88px; } }

/* The portrait, circular. The files are 200px, so the box is capped to
   avoid scaling them past their own resolution. */
.srweb .srw-ab-pf-foto {
	display: block; box-sizing: border-box; width: 100%; aspect-ratio: 1;
	border-radius: 50%; margin: 0;
	background: linear-gradient(160deg, #f2f7fc, #e8f0f9);
	box-shadow: 0 8px 20px rgba(20,29,55,.14);
	transition: box-shadow .3s var(--ease-out);
}
.srweb .srw-ab-pf-foto img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; transition: transform .35s var(--ease-expo); }
/* Some portraits arrive with a teal ring baked into the file itself. This
   draws the same ring, at the same weight, for the ones that do not. */
.srweb .srw-ab-pf-foto--ring {
	padding: 4.5%;
	background: conic-gradient(from 205deg, #6ec8dc 0deg, #1b93b3 78deg, #2f6ea8 186deg, #1b93b3 288deg, #6ec8dc 360deg);
}
.srweb a.srw-ab-pf:hover .srw-ab-pf-foto { box-shadow: 0 10px 26px rgba(14,116,144,.28); }
.srweb a.srw-ab-pf:hover .srw-ab-pf-foto img { transform: scale(1.06); }

/* Name left, badge hard against the right edge, so the card fills. */
.srweb .srw-ab-pf-dato { display: flex; align-items: center; justify-content: space-between; gap: .9rem; min-width: 0; }
.srweb .srw-ab-pf-txt { display: grid; gap: .16rem; min-width: 0; }
.srweb .srw-ab-pf h3 {
	font-family: var(--font-display); font-weight: 700; font-size: 1.16rem;
	color: var(--c-ink-deep); line-height: 1.22; margin: 0;
	letter-spacing: -.01em; text-wrap: balance;
}
.srweb .srw-ab-pf-rol { font-size: .82rem; line-height: 1.3; color: var(--c-text-soft); }
/* Role not supplied yet. Declared gap, not invented copy. */
.srweb .srw-ab-pf-rol--pend { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--c-ink); }

/* The badge marks the card as a link, so the name never has to be
   coloured — which would break the flat reading of the grid. */
.srweb .srw-ab-pf-in {
	display: inline-flex; align-items: center; gap: .5rem; flex: none;
	padding: .3rem .62rem .3rem .32rem; border-radius: var(--r-pill);
	border: 1px solid rgba(14,116,144,.22); background: rgba(14,116,144,.05);
	transition: background .28s var(--ease-out), border-color .28s var(--ease-out);
}
.srweb .srw-ab-pf-in-mk {
	display: grid; place-items: center; flex: none; width: 22px; height: 22px;
	border-radius: 7px; background: linear-gradient(150deg, #1b93b3, #0e7490);
	box-shadow: 0 2px 6px rgba(14,116,144,.34);
	transition: background .28s var(--ease-out);
}
.srweb .srw-ab-pf-in-mk svg { width: 14px; height: 14px; fill: #fff; display: block; }
.srweb .srw-ab-pf-in-tx {
	font-family: var(--font-display); font-weight: 700; font-size: .72rem;
	letter-spacing: .05em; line-height: 1; color: #0e7490;
	transition: color .28s var(--ease-out);
}
.srweb a.srw-ab-pf:hover .srw-ab-pf-in { background: rgba(14,116,144,.11); border-color: rgba(14,116,144,.42); }
.srweb a.srw-ab-pf:hover .srw-ab-pf-in-mk { background: linear-gradient(150deg, #2aa6c6, #0b5f77); }
.srweb a.srw-ab-pf:hover .srw-ab-pf-in-tx { color: var(--c-ink-deep); }

/* Whether the row fits depends on how wide the CARD is, not the window:
   at three columns on a 1024px screen the name broke into three lines.
   372px is what the row actually needs — portrait 89 + gap 19 + 155 for the
   longest name + gap 14 + badge 95. A container query measures the CONTENT
   box, so the card's own padding is already out of that sum. Below it the
   card stacks, which keeps the layout from flipping between breakpoints. */
@container (max-width: 372px) {
	.srweb .srw-ab-pf-dato { flex-direction: column; align-items: flex-start; gap: .55rem; }
}