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

#servicios{
    padding:100px 20px;
    background:var(--gris-claro);
}

.servicios-container{
    max-width:1200px;
    margin:auto;
    text-align:center;
}

.servicios-container h2{
    font-size:2.2rem;
    margin-bottom:15px;
    color:var(--gris-oscuro);
}

.servicios-subtitle{
    max-width:600px;
    margin:0 auto 60px auto;
    font-size:1rem;
    color:#666;
}

/* GRID */

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

/* TARJETAS */

/* TARJETA CON FONDO */

.servicio-card{
    position:relative;
    height:260px;

    background-size:cover;
    background-position:center;

    border-radius:8px;
    overflow:hidden;

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

    text-align:center;

    color:white;

    transition:transform .3s ease;
}

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

/* overlay oscuro */

.servicio-overlay{
    position:absolute;
    inset:0;

    background:rgba(0,0,0,.55);
}

/* contenido */

.servicio-content{
    position:relative;
    z-index:2;

    padding:25px;
}

.servicio-content h3{
    font-size:1.3rem;
    margin-bottom:10px;
}

.servicio-content p{
    font-size:.9rem;
}

/*RESPONSIVE DESIGN*/
@media (max-width:1024px){

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

}

@media (max-width:768px){

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

#servicios{
    padding:80px 20px;
}
.servicio-card{
    height:220px;
}

}