/* ============================================================
   Sección: ZERO AGENTS  (pieza reutilizable — ver ADR-0006 y ADR-0008)
   Los 10 AI Specialists (del CMS) en dos filas "en abanico": cada card tapa a
   la de su derecha y al hover salta al frente. Portado fiel de la v1.
   ============================================================ */

.zero-agents {
    padding-block: var(--section-y);
}

.zero-agents__title {
    text-align: center;
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    font-size: var(--fs-h2);
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.zero-agents__subtitle {
    margin-top: var(--space-2);
    text-align: center;
    font-size: var(--fs-subtitle);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

/* ---------- Abanico ----------
   Se mide en cqw contra .fan (= ancho del .container) → ocupa exacto el mismo
   ancho que el resto de las secciones. cqw (no %) porque --card-w también
   alimenta border-radius: un % ahí se resolvería contra el propio elemento.
   El 4.6 sale de: 5 anchos − 4 solapes = 5W − 4(0.1W) = 4.6W = 100%. */
.zero-agents__fan {
    container-type: inline-size;
}

.zero-agents__row {
    --card-w: calc(100cqw / 4.6);
    --overlap: calc(var(--card-w) * 0.1);
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding-block: var(--space-4); /* el hover levanta la card: sin esto recortaría */
    margin-top: var(--space-6);
}

/* La fila del líder tiene la card 8% más ancha → se compensa con un poco más de
   solape para que las DOS filas midan 100% y queden alineadas. */
.zero-agents__row--leader {
    --overlap: calc(var(--card-w) * 0.12);
}

.zero-agents__card {
    --w: var(--card-w);
    position: relative;
    z-index: var(--z);
    flex: 0 0 var(--w);
    width: var(--w);
    /* 12.7% = el redondeo que las fotos ya traen en sus esquinas de arriba. */
    border-radius: calc(var(--w) * 0.127);
    overflow: hidden;
    background: var(--color-surface);
    box-shadow: 0 20px 30px -12px rgba(229, 0, 126, 0.32);
    transition:
        transform 500ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.zero-agents__card:first-child {
    margin-left: 0;
}

.zero-agents__card + .zero-agents__card {
    margin-left: calc(var(--overlap) * -1);
}

/* al pasar por encima se despega del abanico y tapa a todas las hermanas.
   z-index 50: le gana a cualquier card (el --z máximo = cantidad de cards, un
   dígito) pero queda POR DEBAJO del navbar sticky (z-index 100). Si igualara al
   nav (100), desempataría por orden del DOM y la card taparía la barra al scrollear. */
.zero-agents__card:hover {
    z-index: 50;
    transform: translateY(-16px);
    box-shadow: 0 32px 44px -14px rgba(229, 0, 126, 0.45);
}

/* el líder es más grande por ANCHO, no por scale → sin pérdida de nitidez */
.zero-agents__card--leader {
    --w: calc(var(--card-w) * 1.08);
}

/* ---------- Foto ---------- */
.zero-agents__photo-wrap {
    position: relative;
}

.zero-agents__photo {
    width: 100%;
    aspect-ratio: 268 / 353;
    object-fit: cover;
}

.zero-agents__badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: 0.5625rem; /* 9px */
    color: var(--color-white);
    white-space: nowrap;
}

/* ---------- Texto ---------- */
.zero-agents__body {
    padding: var(--space-5);
    text-align: center;
}

/* la card de al lado le tapa este ancho: el centrado va sobre lo que SE VE */
.zero-agents__card + .zero-agents__card .zero-agents__body {
    padding-left: calc(var(--space-5) + var(--overlap));
}

.zero-agents__role {
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-caption);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.zero-agents__name {
    margin-top: var(--space-2);
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    font-size: var(--fs-h4);
    color: var(--color-ink);
}

.zero-agents__bio {
    margin-top: var(--space-3);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-body);
    color: var(--color-text-muted);
}

/* ---------- Canales ---------- */
.zero-agents__channels {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-12);
}

.zero-agents__channels-label {
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: var(--fs-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-neutral-400);
}

.zero-agents__channel-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

.zero-agents__channel {
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: transparent;
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-text);
}

/* ---------- Responsive ---------- */
/* Laptop (1024–1280): cards angostas → la bio a 14px se vuelve un chorizo. */
@media (max-width: 1280px) {
    .zero-agents__bio {
        font-size: var(--fs-caption);
        line-height: 1.5;
    }
}

/* 1024: card más angosta y --fs-h4 es fijo → el nombre se parte. Baja todo un escalón. */
@media (max-width: 1024px) {
    .zero-agents__role {
        font-size: 0.5625rem; /* 9px */
        letter-spacing: 0.06em;
    }
    .zero-agents__name {
        font-size: var(--fs-body); /* 16px */
    }
    .zero-agents__bio {
        font-size: 0.625rem; /* 10px */
    }
}

/* Acá el abanico ya no entra: las cards se despliegan en grilla de 2 columnas. */
@media (max-width: 860px) {
    .zero-agents__fan {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
        --card-w: calc((100cqw - var(--space-4)) / 2);
    }
    .zero-agents__row {
        display: contents; /* las 10 cards fluyen a UNA sola grilla */
    }
    .zero-agents__card {
        width: auto; /* la grilla la dimensiona; --card-w queda para el radius */
    }
    .zero-agents__card + .zero-agents__card {
        margin-left: 0;
    }
    .zero-agents__card--leader {
        --w: var(--card-w); /* el líder NO va más ancho: rompería la grilla de a 2 */
    }
    .zero-agents__name {
        font-size: var(--fs-body);
    }
    .zero-agents__bio {
        font-size: var(--fs-caption);
    }
    .zero-agents__body {
        padding: var(--space-3);
    }
    .zero-agents__card + .zero-agents__card .zero-agents__body {
        padding-left: var(--space-3); /* en grilla no hay solape */
    }
    .zero-agents__role {
        font-size: 0.625rem;
    }
}

@media (max-width: 640px) {
    .zero-agents {
        padding-bottom: var(--space-8);
    }
    .zero-agents__channels {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        background: var(--color-surface);
        box-shadow: var(--shadow-md);
    }
    .zero-agents__channels-label {
        display: inline-flex;
        align-items: center;
        gap: var(--space-3);
        font-size: var(--fs-small);
        letter-spacing: normal;
        text-transform: none;
        color: var(--color-ink);
    }
    .zero-agents__channels-label::before {
        content: '';
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--color-success);
        box-shadow: 0 0 0 4px rgba(18, 183, 106, 0.18);
    }
    .zero-agents__channel-list {
        align-self: stretch;
        min-width: 0;
        justify-content: flex-start;
        gap: var(--space-1) 0;
    }
    .zero-agents__channel {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        font-size: var(--fs-small);
        font-weight: var(--fw-bold);
        color: var(--color-neutral-600);
        white-space: nowrap;
    }
    .zero-agents__channel:not(:first-child)::before {
        content: '·';
        margin: 0 0.4em;
        color: var(--color-text-muted);
    }
}

@media (prefers-reduced-motion: reduce) {
    .zero-agents__card {
        transition: none;
    }
    .zero-agents__card:hover {
        transform: none;
    }
}