.pros-container {
    width:100%;
    padding:10px;
    max-width:1280px;
    overflow: hidden;
    margin:auto;
}

.pros-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}



.pros-card {
    background: var(--white);
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    text-align: center;
    transition: all 0.3s ease;
    flex: 1 1 calc(25% - 20px); /* 4 por fila en desktop */
    max-width: calc(25% - 20px);
    text-decoration:none;
}

/* Hover */
.pros-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.pros-icon {
    font-size: 2.4rem;
    color: var(--primary);
    margin-bottom: 1rem;
}

.pros-name {
    font-size: 1rem;
    color: var(--black);
    margin-bottom: 0.5rem;
    font-weight: 500;
}



@media (max-width: 1460px) {
    .pros-container {
        max-width:1250px;
    }
}

@media (max-width: 1400px) {
    .pros-container {
        max-width:1200px;
    }
}


@media (max-width: 1320px) {
    .pros-container {
        max-width:1150px;
    }
}


@media (max-width: 1280px) {
    .pros-container {
        max-width:1100px;
    }
}



@media (max-width: 1250px) {
    .pros-container {
        max-width:1050px;
    }
}


@media (max-width: 1150px) {
    .pros-container {
        max-width:1000px;
    }
}

@media (max-width: 1130px) {
    .pros-container {
        max-width:950px;
    }
}





/* Tablet: 3 por fila */
@media (max-width: 992px) {
    .pros-card {
        flex: 1 1 calc(33.333% - 20px);
        max-width: calc(33.333% - 20px);
    }
}

/* Móvil: 2 por fila hasta 330px */
@media (max-width: 768px) {
    .pros-card {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
        padding: 20px;
    }
}

/* Mismo comportamiento en 480px, 400px, etc. */
@media (max-width: 480px) {
    .pros-card {
        flex: 1 1 calc(50% - 20px);
        max-width: calc(50% - 20px);
        font-size: 0.6rem;
    }
}

/* Solo cuando es menor a 330px: 1 por fila */
@media (max-width: 370px) {
    .pros-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

/* Texto más pequeño en pantallas pequeñas */
@media (max-width: 572px) {
    .pros-name {
        font-size: 0.8rem;
    }
}

 
/* Features */
        .features {
            display: flex;
            flex-wrap: wrap;
            gap:60px;
            justify-content:center;
        }

        .feature-item {
            background-color: var(--primarylightV2);
            border-radius: 8px;
            padding: 30px;
            display: flex;
            width: 375px;
            text-align: left;
            display: flex;
            flex-direction: column;
            align-items: start;
        }

        .feature-icon {
            font-size: 1.5rem;
            background-color: var(--white);
            border-radius:50%;
            width:60px;
            height:60px;
            display:flex;
            justify-content:center;
            align-items:center;
            color: var(--primary);
            margin-bottom: 20px;
            border: 2px solid var(--primary);
            transition: all ease .9s;
        }

        .feature-item:hover .feature-icon{
            transform: rotate(360deg);
        }

        .feature-item:nth-child(even) {
            background-color: #F1F1F1;
        }

        .feature-item h4 {
            color: #333;
            margin-bottom: 15px;
            font-size: 1.3rem;
            font-weight:500;
        }

        .feature-item p {
            color: #666;
            line-height: 1.5;
        }

        /* Responsive */


        @media (max-width:1434px) {
            .feature-item {
                width:360px;
            }
         }


         
        @media (max-width:1395px) {
            .feature-item {
                width:355px;
            }
         }


        @media (max-width:1375px) {
            .feature-item {
                width:345px;
            }
         }


          @media (max-width:1355px) {
            .feature-item {
                width:340px;
            }
         }

          @media (max-width:1335px) {
            .feature-item {
                width:330px;
            }
         }


         @media (max-width:1300px) {
            .feature-item {
                width:320px;
            }
         }


         @media (max-width:1260px) {
            .features {
                gap:40px;
            }
         }



          @media (max-width:1230px) {
            .features {
                gap:30px;
            }
         }



          @media (max-width:1210px) {
            .feature-item {
                width:310px;
            }
         }


           @media (max-width:1180px) {
            .feature-item {
                width:300px;
            }
         }


          @media (max-width:1150px) {
            .feature-item {
                width:290px;
            }
         }


          @media (max-width:1120px) {
            .feature-item {
                width:280px;
            }
         }


          @media (max-width:1100px) {
            .feature-item {
                width:270px;
            }
            .feature-item h4{
                font-size: 1rem;
            }
            .feature-item p{
                font-size:0.8rem;
            }
         }


          @media (max-width:1060px) {
            .feature-item {
                width:260px;
            }
         }


          @media (max-width:1030px) {
            .feature-item {
                width:250px;
            }
         }



         @media (max-width:1000px) {
            .feature-item {
                width:240px;
            }
         }


        @media (max-width:970px) {
            .feature-item {
                width:230px;
            }
         }


        @media (max-width:950px) {
            .feature-item {
                width:220px;
            }
         }


        @media (max-width:915px) {
            .features {
                gap:20px;
            }
        }
                    


        @media (max-width: 768px) {
            .features {
                flex-direction: column;
                align-items: center;
            }
            
            .feature-item {
                width: 100%;
                max-width: 100%;
            }
        }