/* ==========================================
   HERO
========================================== */

.services-hero{

    padding:140px 0 70px;

}

.services-hero .section-description{

    max-width:820px;
    margin:20px auto 0;
    text-align:center;

}


/* ==========================================
   GRID
========================================== */

.services{

    padding-bottom:90px;

}

.services-grid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:35px;
    align-items:stretch;

}


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

.service-card{

    display:flex;
    flex-direction:column;

    height:100%;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

    transition:.35s ease;

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.15);

}


/* ==========================================
   IMAGEN
========================================== */

.service-card-image{

    display:block;

    overflow:hidden;

    background:#f3f3f3;

}

.service-card-image img{

    width:100%;

    aspect-ratio:16/10;

    object-fit:cover;

    display:block;

    transition:.45s;

}

.service-card:hover .service-card-image img{

    transform:scale(1.05);

}


/* ==========================================
   CONTENIDO
========================================== */

.service-card-content{

    flex:1;

    display:flex;
    flex-direction:column;

    padding:30px;

}

.service-card h3{

    font-size:28px;

    line-height:1.25;

    margin-bottom:15px;

    min-height:70px;

}

.service-card p{

    flex:1;

    color:#666;

    line-height:1.75;

    margin-bottom:28px;

}

.service-card-link{

    margin-top:auto;

}


/* ==========================================
   ENLACE
========================================== */

.service-card-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--primary-color);

    text-decoration:none;

    transition:.25s;

}

.service-card-link:hover{

    gap:16px;

}


/* ==========================================
   CATEGORÍAS
========================================== */

.services-category{

    padding-bottom:70px;

}

.services-category-title{

    font-size:34px;

    text-align:center;

    margin-bottom:35px;

    color:var(--title-color);

    position:relative;

}

.services-category-title::after{

    content:"";

    display:block;

    width:70px;
    height:4px;

    margin:15px auto 0;

    border-radius:10px;

    background:var(--primary-color);

}


/* ==========================================
   CTA
========================================== */

.services-cta{

    background:#f8f8f8;

    padding:80px 0;

    text-align:center;

}

.services-cta p{

    max-width:700px;

    margin:20px auto 35px;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width:1000px){

    .services-grid{

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

    }

}

@media (max-width:700px){

    .services-grid{

        grid-template-columns:1fr;

    }

}