/* [IRIDIAN AI LAYER] CSS extern Staff. Fase G + tokens 2026-05-19.
 * Variables per-usuari: --card-bg, --accent-color, --name-color
 * Tokens globals: _iailayer-base.css
 */
.iaLayer-staff {
    display: flex;
    flex-direction: column;
    background: var(--card-bg, #faf7f4);
    border-radius: var(--ial-r-lg);
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    max-width: 320px;
    width: 100%;
    font-family: inherit;
    transition: box-shadow var(--ial-t-base), transform var(--ial-t-base);
}
.iaLayer-staff:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.16); transform: translateY(-4px); }
.iaLayer-staff .sc-avatar-wrap {
    display: flex; justify-content: center; align-items: center;
    background: var(--accent-color, #c8a96e);
    padding: 36px 0 28px;
}
.iaLayer-staff .sc-avatar-icon {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    border: 3px solid rgba(255,255,255,0.55);
}
.iaLayer-staff .sc-avatar-icon svg { width: 56px; height: 56px; fill: var(--ial-c-white); }
.iaLayer-staff .sc-body { padding: 24px 24px 20px; display: flex; flex-direction: column; flex: 1; }
.iaLayer-staff .sc-name {
    font-size: 1.15rem; font-weight: 700;
    color: var(--name-color, #1a1a2e);
    margin: 0 0 4px; line-height: 1.3;
}
.iaLayer-staff .sc-role {
    font-size: 0.82rem; font-weight: 600;
    color: var(--accent-color, #c8a96e);
    text-transform: uppercase; letter-spacing: 0.07em;
    margin: 0 0 10px;
}
.iaLayer-staff .sc-bio {
    font-size: 0.9rem; color: var(--ial-c-text-2);
    line-height: 1.55; margin: 0 0 18px; flex: 1;
}
.iaLayer-staff .sc-social { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.iaLayer-staff .sc-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--accent-color, #c8a96e);
    color: var(--ial-c-text-inverse);
    text-decoration: none;
    font-size: 0.85rem; font-weight: 700;
    transition: opacity var(--ial-t-base);
}
.iaLayer-staff .sc-social a:hover { opacity: 0.75; }
.iaLayer-staff .sc-social a svg { width: 16px; height: 16px; fill: var(--ial-c-white); }
.iaLayer-staff .sc-btn {
    display: inline-block;
    padding: 10px 22px;
    background: var(--accent-color, #c8a96e);
    color: var(--ial-c-text-inverse);
    border-radius: var(--ial-r-sm);
    font-size: 0.88rem; font-weight: 600;
    text-decoration: none;
    text-align: center;
    letter-spacing: 0.03em;
    transition: opacity var(--ial-t-base), background var(--ial-t-base);
}
.iaLayer-staff .sc-btn:hover { opacity: 0.85; }
@media (max-width: 480px) {
    .iaLayer-staff { max-width: 100%; }
    .iaLayer-staff .sc-body { padding: 18px 16px 16px; }
}