/* =========================================
   SECCIÓN SERVICIOS
========================================= */

.servicios-section {
    width: 100%;
    padding: 50px 30px;

    background: #f1f1f1;

    box-sizing: border-box;
}


/* =========================================
   CONTENEDOR
========================================= */

.servicios-container {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


/* =========================================
   TARJETA
========================================= */

.servicio-item {
    min-height: 310px;

    padding: 35px 45px;

    background: #ffffff;

    border-radius: 18px;

    box-sizing: border-box;

    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;

    transition: all 0.3s ease;
}


/* Efecto al pasar el mouse */

.servicio-item:hover {
    transform: translateY(-5px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.10);
}


/* =========================================
   ICONO CIRCULAR
========================================= */

.servicio-icon {
    width: 72px;
    height: 72px;

    margin-bottom: 15px;

    border-radius: 50%;

    background: #ffffff;

    display: flex;

    align-items: center;
    justify-content: center;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.10);
}


/* Icono */

.servicio-icon span {

    color: #ff5a1f;

    font-size: 32px;

    line-height: 1;
}


/* =========================================
   TÍTULO
========================================= */

.servicio-item h3 {

    margin: 0 0 12px;

    color: #172536;

    font-family: Arial, sans-serif;

    font-size: 24px;

    font-weight: 700;

    line-height: 1.2;
}


/* =========================================
   DESCRIPCIÓN
========================================= */

.servicio-item p {

    max-width: 400px;

    margin: 0;

    color: #334155;

    font-family: Arial, sans-serif;

    font-size: 16px;

    line-height: 1.6;

    font-weight: 400;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1000px) {

    .servicios-container {

        grid-template-columns: repeat(2, 1fr);

    }

    .servicio-item {

        padding: 30px;

    }

}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 650px) {

    .servicios-section {

        padding: 30px 15px;

    }

    .servicios-container {

        grid-template-columns: 1fr;

    }

    .servicio-item {

        min-height: auto;

        padding: 35px 25px;

    }

    .servicio-item h3 {

        font-size: 22px;

    }

    .servicio-item p {

        font-size: 15px;

    }

}