/* Estilos básicos para business lines */
.business-lines {
    background-color: #f9fafb;
}

/* Contenedor principal más ancho */
.business-line-item .tw-bg-white {
    padding: 10px 10px !important;
    min-height: 380px !important;
}

/* Contenedor de logos - SIN fondo, SIN efectos hover, más ancho y centrado */
.logo-container {
    width: 200px !important;
    height: 230px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    background: none !important;
    border: none !important;
    position: relative !important;
}

/* Imágenes de logos - 300px como solicitó el usuario, perfectamente centradas */
.logo-container img {
    width: 400px !important;
    height: 400px !important;
    max-width: 400px !important;
    max-height: 400px !important;
    object-fit: contain !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    background: transparent !important;
    margin: 0 auto !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* SIN efectos hover en logos como solicitó el usuario */

/* Efecto de caída de columnas cuando se ve la sección */
@keyframes fallDownColumn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    60% {
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.business-line-item {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animación activada cuando la sección es visible */
.business-lines.animate-in .business-line-item:nth-child(1) {
    animation: fallDownColumn 0.8s ease-out forwards;
    animation-delay: 0.1s;
}

.business-lines.animate-in .business-line-item:nth-child(2) {
    animation: fallDownColumn 0.8s ease-out forwards;
    animation-delay: 0.2s;
}

.business-lines.animate-in .business-line-item:nth-child(3) {
    animation: fallDownColumn 0.8s ease-out forwards;
    animation-delay: 0.3s;
}

.business-lines.animate-in .business-line-item:nth-child(4) {
    animation: fallDownColumn 0.8s ease-out forwards;
    animation-delay: 0.4s;
}

/* CTA styles */
.business-lines-cta {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.business-lines-cta:hover {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #3b82f6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.15);
}

/* Responsive - logos grandes como solicitó el usuario */
@media (max-width: 1024px) {
    .business-line-item .tw-bg-white {
        padding: 28px 20px !important;
        min-height: 380px !important;
    }
    
    .logo-container {
        width: 170px !important;
        height: 200px !important;
    }
    
    .logo-container img {
        width: 250px !important;
        height: 250px !important;
        max-width: 250px !important;
        max-height: 250px !important;
    }
}

@media (max-width: 768px) {
    .business-line-item .tw-bg-white {
        padding: 24px 16px !important;
        min-height: 340px !important;
    }
    
    .logo-container {
        width: 250px !important;
        height: 200px !important;
    }
    
    .logo-container img {
        width: 200px !important;
        height: 200px !important;
        max-width: 200px !important;
        max-height: 200px !important;
    }
}

@media (max-width: 640px) {
    .business-line-item .tw-bg-white {
        padding: 20px 12px !important;
        min-height: 300px !important;
    }
    
    .logo-container {
        width: 220px !important;
        height: 180px !important;
    }
    
    .logo-container img {
        width: 180px !important;
        height: 180px !important;
        max-width: 180px !important;
        max-height: 180px !important;
    }
}