/* ========================================
   SERVICIOS
======================================== */

.servicios-section{
    position:relative;
    padding:120px 8%;
    scroll-margin-top:160px;
    background:
        linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),
        url('../img/servicios-fondo.png');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.servicios-container{
    max-width:1300px;
    margin:0 auto;
}

.servicios-header{
    max-width:760px;
    margin-bottom:55px;
}

.servicios-header h2{
    font-size:48px;
    font-weight:800;
    color:var(--primary);
    margin-bottom:18px;
}

.servicios-header p{
    font-size:18px;
    color:var(--text);
    line-height:1.8;
}

.servicios-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.servicio-card{
    position:relative;
    background:rgba(255,255,255,.94);
    border-radius:22px;
    padding:34px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    overflow:hidden;
    transition:.35s;
}

.servicio-card::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:5px;
    background:var(--accent);
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s;
}

.servicio-card:hover{
    transform:translateY(-8px);
    box-shadow:0 22px 55px rgba(0,0,0,.13);
}

.servicio-card:hover::before{
    transform:scaleX(1);
}

.servicio-card h3{
    font-size:22px;
    font-weight:800;
    color:var(--primary);
    margin-bottom:14px;
}

.servicio-card p{
    font-size:16px;
    line-height:1.7;
    color:var(--text);
    margin:0;
}

@media(max-width:992px){
    .servicios-section{
        padding:100px 6%;
    }

    .servicios-header{
        max-width:100%;
        margin-bottom:45px;
    }

    .servicios-header h2{
        font-size:42px;
        line-height:1.2;
    }

    .servicios-grid{
        grid-template-columns:repeat(2,1fr);
        gap:24px;
    }
}

@media(max-width:768px){
    .servicios-section{
        padding:85px 6%;
        background:
            linear-gradient(rgba(255,255,255,.84), rgba(255,255,255,.84)),
            url('../img/servicios-fondo.png');
        background-size:cover;
        background-position:center;
    }

    .servicios-header{
        text-align:center;
        margin-bottom:38px;
    }

    .servicios-header h2{
        font-size:32px;
        line-height:1.2;
        margin-bottom:15px;
    }

    .servicios-header p{
        font-size:16px;
        line-height:1.7;
    }

    .servicios-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .servicio-card{
        padding:28px;
    }

    .servicio-card h3{
        font-size:20px;
    }

    .servicio-card p{
        font-size:15px;
    }
}

@media(max-width:480px){
    .servicios-section{
        padding:75px 5%;
    }

    .servicios-header h2{
        font-size:29px;
    }

    .servicio-card{
        padding:24px;
        border-radius:18px;
    }

    .servicio-card h3{
        font-size:18px;
    }

    .servicio-card p{
        font-size:14px;
    }
}