/* ======================================================
   SERVICES
====================================================== */

.services{

    padding: 120px 8%;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(239,184,16,.07),
            transparent 38%
        ),
        #0d0d0d;

    position: relative;

    overflow: hidden;

        display: flex;

    flex-direction: column;
}


/* ======================================================
   SERVICES HEADER
====================================================== */

.services-header{

    max-width: 750px;

    margin: 0 auto 70px;

    text-align: center;

}


.services-header .section-subtitle{

    display: inline-block;

    color: var(--gold);

    text-transform: uppercase;

    letter-spacing: 4px;

    font-size: .85rem;

    font-weight: 600;

    margin-bottom: 18px;

}


.services-header h2{

    font-family: 'Cormorant Garamond', serif;

    font-size: 4rem;

    font-weight: 500;

    line-height: 1.1;

    color: var(--white);

    margin-bottom: 22px;

        position: relative;

    display: inline-block;

    padding-bottom: 22px;

}

.services-header h2::after{

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    width: 55px;

    height: 1px;

    background: var(--gold);

    transform: translateX(-50%);

}

.services-header p{

    color: #bdbdbd;

    font-size: 1rem;

    line-height: 1.8;

}


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

.services-grid{

    max-width: 1400px;

    margin: 0 auto;

    display: grid;

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

    gap: 28px;

}


/* ======================================================
   SERVICE CARD
====================================================== */

.service-card{

    position: relative;

    padding: 50px 38px 40px;

    min-height: 350px;

    background: #151515;

    border: 1px solid rgba(239,184,16,.16);

    transition: all .45s ease;

    overflow: hidden;
}


/* Línea dorada decorativa */

.service-card::before{

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 2px;

    background: var(--gold);

    transform: scaleX(0);

    transform-origin: left;

    transition: transform .45s ease;

}

.service-card::after{

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 2px;

    height: 0;

    background: var(--gold);

    transition: height .45s ease;

}

/* Número */

.service-number{

    position: absolute;

    top: 25px;

    right: 30px;

    color: rgba(239,184,16,.25);

    font-family: 'Cormorant Garamond', serif;

    font-size: 3rem;

    line-height: 1;

}


/* Icono */

.service-icon{

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid rgba(239,184,16,.45);

    border-radius: 50%;

    color: var(--gold);

    font-size: 20px;

    margin-bottom: 24px;

    transition: all .45s ease;

}


.service-card h3{

    font-family: 'Cormorant Garamond', serif;

    font-size: 2.2rem;

    font-weight: 600;

    color: var(--white);

    margin-bottom: 18px;

}


.service-card p{

    color: #bdbdbd;

    font-size: .95rem;

    line-height: 1.8;

    max-width: 320px;

}


/* ======================================================
   SERVICE LINK
====================================================== */

.service-link{

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: auto;

    color: var(--gold);

    font-size: .85rem;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: all .35s ease;

}


.service-link i{

    transition: transform .35s ease;

}


/* ======================================================
   HOVER
====================================================== */

.service-card:hover{

    transform: translateY(-8px);

    border-color: rgba(239,184,16,.45);

    box-shadow: 0 20px 50px rgba(0,0,0,.35);

}


.service-card:hover::before{

    transform: scaleX(1);

}

.service-card:hover::after{

    height: 100%;

}
.service-card:hover .service-icon{

    background: var(--gold);

    color: #111;

    transform: translateY(-3px);

}


.service-card:hover .service-link{

    color: var(--white);

}


.service-card:hover .service-link i{

    transform: translateX(6px);

}

/* ======================================================
   SERVICES — RESPONSIVE MÓVIL
====================================================== */

@media (max-width: 768px){

    .services{

        padding: 80px 6%;

    }


    .services-header{

        margin-bottom: 50px;

    }


    .services-header h2{

        font-size: 3rem;

    }


    .services-grid{

        grid-template-columns: 1fr;

        gap: 22px;

        width: 100%;

    }


    .service-card{

        width: 100%;

        min-height: 350px;

        padding: 45px 28px 35px;

    }


    .service-card h3{

        font-size: 2rem;

    }


    .service-card p{

        max-width: none;

    }

}