/* contact-team.css — Sección "Equipo Comercial" en /contact */

.team-section {
    max-width: 1200px;
    margin: 100px auto 40px;
    padding: 0 24px;
}

.team-section-header {
    text-align: center;
    max-width: 640px;
    /* La foto sobresale -64px sobre la tarjeta y en hover sube ~12px más
       (tarjeta + foto); este margen deja aire de sobra para que nunca
       tape el subtítulo, ni siquiera con el hover activo. */
    margin: 0 auto 130px;
}

.team-eyebrow {
    display: inline-block;
    color: var(--secondary, #F28C30);
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

.team-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: #11345d;
    margin: 0 0 0.75rem;
}

.team-subtitle {
    font-size: 1.05rem;
    color: var(--muted, #64748b);
    line-height: 1.6;
    margin: 0;
}

/* La fila de gap vertical debe superar lo que la foto sobresale de su
   tarjeta (64px en reposo, ~76px con el hover activo) para que la foto
   de una fila nunca invada la tarjeta de la fila anterior. */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 90px 32px;
}

@media (max-width: 900px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 90px 24px;
    }
}

@media (max-width: 560px) {
    .team-grid {
        grid-template-columns: 1fr;
        max-width: 340px;
        margin: 0 auto;
        gap: 90px;
    }
}

/* TARJETA */
.team-card {
    position: relative;
    background: #ffffff;
    border-radius: 20px;
    padding: 150px 28px 32px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(17, 52, 93, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);
    overflow: visible;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease;
}

.team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 55px rgba(17, 52, 93, 0.14);
}

/* FOTO — "flota" fuera del marco de la tarjeta */
.team-photo-wrap {
    position: absolute;
    top: -64px;
    left: 50%;
    transform: translateX(-50%) rotate(var(--team-tilt, 0deg));
    width: 168px;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.team-card:nth-child(2n) .team-photo-wrap {
    --team-tilt: 2.5deg;
}

.team-card:nth-child(2n+1) .team-photo-wrap {
    --team-tilt: -2.5deg;
}

.team-card:hover .team-photo-wrap {
    transform: translateX(-50%) rotate(0deg) translateY(-6px);
}

.team-photo-ring {
    position: absolute;
    inset: 10px;
    z-index: 0;
    border-radius: 46% 54% 58% 42% / 55% 45% 55% 45%;
    background: linear-gradient(150deg, var(--primary, #009FE3) 0%, var(--secondary, #F28C30) 100%);
    filter: blur(2px);
    opacity: 0.9;
}

.team-photo {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    object-position: top center;
    border-radius: 46% 54% 58% 42% / 55% 45% 55% 45%;
    box-shadow: 0 18px 30px -8px rgba(17, 52, 93, 0.35), 0 0 0 6px #fff;
    background: #fff;
}

/* CONTENIDO */
.team-name {
    font-size: 1.35rem;
    font-weight: 800;
    color: #11345d;
    margin: 0 0 4px;
    letter-spacing: 0.5px;
}

.team-role {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--secondary, #F28C30);
    background: rgba(242, 140, 48, 0.1);
    padding: 4px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
}

.team-desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #475569;
    margin: 0 0 22px;
}

.team-contact {
    border-top: 1px solid #eef1f5;
    padding-top: 18px;
}

.team-contact-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--primary, #009FE3);
    margin-bottom: 8px;
}

.team-contact a {
    display: block;
    font-size: 0.92rem;
    color: #334155;
    text-decoration: none;
    line-height: 1.6;
    word-break: break-word;
    transition: color 0.2s ease;
}

.team-contact a:hover {
    color: var(--secondary, #F28C30);
}