/* =============================================
   pages/equipo-roster.css
   Equipo, parte 2/3: panel de tarjetas, portado de una referencia de
   diseño (grilla de 3 columnas: foto en blanco y negro + nombre + rol +
   bio corta + enlace a ficha) sobre la banda de color de
   equipo-hero.css. El panel se superpone a la banda con margen negativo
   (mismo efecto de "capas" de la referencia, donde el bloque blanco
   tapa el borde inferior de la franja amarilla) -- aqui en un tono navy
   elevado (--bg-elevated) en vez de blanco, para no romper el tema
   oscuro del resto del sitio.
   Viene de pages/equipo-hero.css, sigue en pages/equipo-modal.css.
   ============================================= */

/* Barra de progreso de scroll fija arriba de todo. */
.team-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 500;
    pointer-events: none;
}

.team-scroll-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cyan-glow), #7c8cff);
    transition: width 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
    .team-scroll-progress-bar {
        transition: none;
    }
}

.team-panel {
    position: relative;
    max-width: 1320px;
    margin: clamp(-100px, -8vw, -64px) auto 0;
    padding: clamp(40px, 6vw, 64px) 5% 90px;
    /* Exactamente --bg-dark (no un tono "elevado" propio): el panel debe
       fundirse con el fondo del resto del sitio en modo oscuro, no leerse
       como una caja de otro color encima de la pagina. */
    background: var(--bg-dark);
    border: 1px solid var(--glass-border);
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

/* Blur lateral: los bordes izquierdo/derecho del panel difuminan lo que
   tienen detras (mismo fondo del body) para que el corte del panel no
   se sienta como un borde recto, sino como un desvanecido de vidrio. */
.team-panel::before,
.team-panel::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(48px, 7vw, 130px);
    z-index: 2;
    pointer-events: none;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.team-panel::before {
    left: 0;
    mask-image: linear-gradient(90deg, black, transparent);
    -webkit-mask-image: linear-gradient(90deg, black, transparent);
}

.team-panel::after {
    right: 0;
    mask-image: linear-gradient(270deg, black, transparent);
    -webkit-mask-image: linear-gradient(270deg, black, transparent);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
}

.team-grid.is-empty {
    display: block;
}

/* =========================================================
   TARJETA: foto en blanco y negro (a color al pasar el mouse), sin
   fondo ni borde de card -- el gesto minimalista de la referencia, la
   separacion la da el espacio de la grilla, no una caja.
   ========================================================= */
.team-card {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: left;
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.team-card.is-visible {
    opacity: 1;
    transform: none;
}

.team-card-media {
    position: relative;
    width: 100%;
    max-width: 240px;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    background: var(--glass);
}

.team-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(1) contrast(1.02);
    transition: filter 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .team-card:hover .team-card-media img {
        filter: grayscale(0);
        transform: scale(1.045);
    }
}

/* Velo de acento del integrante: aparece muy tenue al pasar el mouse,
   detras de la foto (mismo lenguaje de --member-accent que el resto del
   sitio usa para identidad de locutor). */
.team-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--member-accent, var(--cyan-glow)) 55%, transparent) 100%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
    pointer-events: none;
}

.team-card:hover .team-card-media::after,
.team-card:focus-within .team-card-media::after {
    opacity: 1;
}

.team-card-name {
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--text-main);
    margin-bottom: 4px;
}

.team-card-role {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--member-accent, var(--cyan-glow));
    margin-bottom: 12px;
}

.team-card-desc {
    flex: 1;
    color: var(--soft-text);
    line-height: 1.6;
    font-size: var(--text-sm);
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.team-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    border: 0;
    background: transparent;
    padding: 0 0 3px;
    font-size: var(--text-sm);
    font-weight: 800;
    color: var(--text-main);
    cursor: pointer;
    border-bottom: 1px solid var(--glass-border);
    transition: color var(--duration-base) var(--ease-out),
                border-color var(--duration-base) var(--ease-out),
                gap var(--duration-base) var(--ease-out);
}

.team-card-link i {
    width: 15px;
    height: 15px;
    transition: transform var(--duration-base) var(--ease-out);
}

.team-card-link:hover {
    color: var(--member-accent, var(--cyan-glow));
    border-color: var(--member-accent, var(--cyan-glow));
    gap: 12px;
}

.team-card-link:hover i {
    transform: translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .team-card {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Estado "Proximamente" para reporteros. */
.team-reel-empty {
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    text-align: center;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.team-reel-empty.is-visible {
    opacity: 1;
    transform: none;
}

.team-reel-empty i {
    width: 52px;
    height: 52px;
    color: var(--cyan-glow);
    stroke: currentColor;
}

.team-reel-empty p {
    color: var(--soft-text);
}

@media (prefers-reduced-motion: reduce) {
    .team-reel-empty {
        opacity: 1;
        transform: none;
        transition: none;
    }
}