/**
 * Team Section Improvements CSS
 * Reduce el tamaño del bloque anaranjado en la sección "Nuestro MEJOR ACTIVO"
 * Mantiene la información legible pero con un diseño más compacto
 */

/* ================================================
   SECCIÓN NUESTRO MEJOR ACTIVO - TEAM OVERLAY COMPACTO
   ================================================ */

/* Reducir el tamaño del contenedor del equipo */
.our-team .team-member {
    /* border: 1px solid #d14715 !important; */
    width: 220px !important;
    height: 260px !important; /* Reducido aún más de 280px a 260px */
    overflow: hidden !important;
    border-radius: 8px !important;
}

/* Ajustar el overlay anaranjado para que sea más compacto */
.our-team .team-overlay {
    margin-top: -6px !important; /* Ajustado de -8px a -6px */
    width: 222px !important;
    color: #fff !important;
    margin-left: -2px !important;
    position: relative !important;
}

/* Reducir la altura del bloque de información anaranjado - MÁS PEQUEÑO */
.our-team .team-overlay .info {
    height: 90px !important; /* Reducido de 120px a 90px - AÚN MÁS PEQUEÑO */
    padding: 6px 0px !important; /* Reducido el padding aún más */
    background: #d14715 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* Ajustar el texto dentro del overlay para que sea más compacto */
.our-team .team-overlay .info h4 {
    font-size: 15px !important; /* Reducido de 16px a 15px */
    margin: 0 0 3px 0 !important; /* Reducido el margen inferior */
    line-height: 1.1 !important; /* Línea más compacta */
    font-weight: bold !important;
}

.our-team .team-overlay .info .puesto {
    font-size: 11px !important; /* Reducido de 12px a 11px */
    margin: 0 !important;
    line-height: 1.2 !important;
    padding: 0 6px !important; /* Reducido el padding lateral */
    opacity: 0.95 !important;
}

/* Ajustar el botón/sección learn-more si existe */
.our-team .team-overlay .learn-more {
    height: 35px !important; /* Reducido de 40px a 35px */
    line-height: 35px !important;
    width: 100% !important;
    text-align: center !important;
    background: #d14715 !important;
    position: relative !important;
    cursor: pointer !important;
    font-size: 11px !important; /* Reducido de 12px a 11px */
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

/* Tablets */
@media (max-width: 991px) {
    .our-team .team-member {
        width: 200px !important;
        height: 240px !important; /* Ajustado proporcionalmente */
    }
    
    .our-team .team-overlay {
        width: 202px !important;
        margin-top: -5px !important;
    }
    
    .our-team .team-overlay .info {
        height: 80px !important; /* Reducido de 110px a 80px */
        padding: 5px 0px !important;
    }
    
    .our-team .team-overlay .info h4 {
        font-size: 14px !important;
        margin-bottom: 2px !important;
    }
    
    .our-team .team-overlay .info .puesto {
        font-size: 10px !important;
    }
    
    .our-team .team-overlay .learn-more {
        height: 30px !important;
        line-height: 30px !important;
        font-size: 10px !important;
    }
}

/* Móviles */
@media (max-width: 767px) {
    .our-team .team-member {
        width: 180px !important;
        height: 220px !important; /* Ajustado proporcionalmente */
    }
    
    .our-team .team-overlay {
        width: 182px !important;
        margin-top: -4px !important;
    }
    
    .our-team .team-overlay .info {
        height: 70px !important; /* Reducido de 100px a 70px */
        padding: 4px 0px !important;
    }
    
    .our-team .team-overlay .info h4 {
        font-size: 13px !important;
        margin-bottom: 2px !important;
        line-height: 1.0 !important;
    }
    
    .our-team .team-overlay .info .puesto {
        font-size: 9px !important;
        line-height: 1.1 !important;
    }
    
    .our-team .team-overlay .learn-more {
        height: 28px !important; /* Más pequeño */
        line-height: 28px !important;
        font-size: 9px !important;
    }
}

/* Móviles pequeños */
@media (max-width: 575px) {
    .our-team .team-member {
        width: 160px !important;
        height: 200px !important; /* Reducido aún más */
        margin: 0 auto 20px auto !important;
    }
    
    .our-team .team-overlay {
        width: 162px !important;
        margin-top: -3px !important;
    }
    
    .our-team .team-overlay .info {
        height: 60px !important; /* Reducido de 90px a 60px - MUY COMPACTO */
        padding: 3px 0px !important;
    }
    
    .our-team .team-overlay .info h4 {
        font-size: 12px !important;
        margin-bottom: 1px !important;
        line-height: 1.0 !important;
    }
    
    .our-team .team-overlay .info .puesto {
        font-size: 8px !important;
        padding: 0 4px !important;
        line-height: 1.0 !important;
    }
    
    .our-team .team-overlay .learn-more {
        height: 25px !important; /* Muy pequeño */
        line-height: 25px !important;
        font-size: 8px !important;
    }
}

/* ================================================
   MEJORAS ADICIONALES DE DISEÑO
   ================================================ */

/* Mejorar la transición entre estados */
.our-team .team-member {
    transition: all 0.3s ease !important;
}

.our-team .team-overlay .info {
    transition: all 0.3s ease !important;
}

/* Hover effect más sutil */
.our-team .team-member:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(209, 71, 21, 0.3) !important;
}

.our-team .team-member:hover .team-overlay .info {
    background: #c13e12 !important; /* Color ligeramente más oscuro en hover */
}

/* Asegurar que el texto no se desborde */
.our-team .team-overlay .info * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* ================================================
   OPTIMIZACIÓN PARA DIFERENTES RESOLUCIONES
   ================================================ */

/* Pantallas muy grandes */
@media (min-width: 1400px) {
    .our-team .team-member {
        width: 240px !important;
        height: 280px !important; /* Ajustado proporcionalmente */
    }
    
    .our-team .team-overlay {
        width: 242px !important;
    }
    
    .our-team .team-overlay .info {
        height: 100px !important; /* Reducido de 130px a 100px */
        padding: 8px 0px !important;
    }
    
    .our-team .team-overlay .info h4 {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    
    .our-team .team-overlay .info .puesto {
        font-size: 12px !important;
    }
    
    .our-team .team-overlay .learn-more {
        height: 38px !important;
        line-height: 38px !important;
        font-size: 12px !important;
    }
}

/* ================================================
   FIX PARA ELEMENTOS ESPECÍFICOS
   ================================================ */

/* Asegurar que las imágenes mantengan su proporción */
.our-team .team-member img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    object-position: center top !important;
}

/* Fix para el badge de especialidad si existe */
.specialty-badge {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: rgba(209, 71, 21, 0.9) !important;
    color: white !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    z-index: 10 !important;
}