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

.servicios {

    position: relative;

    padding: 120px 0;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #eef4ff,
            #f8fafc,
            #ffffff
        );

}

/* ==========================================
   CABECERA
========================================== */

.servicios-cabecera {

    max-width: 850px;

    margin: 0 auto 70px;

    text-align: center;

}

.servicios-tag {

    display: inline-flex;

    padding: 10px 22px;

    border-radius: 999px;

    background: white;

    color: #2563eb;

    font-weight: 700;

    margin-bottom: 25px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.05);

}

.servicios-cabecera h2 {

    font-size: clamp(2.2rem,4vw,3.8rem);

    line-height: 1.1;

    color: #0f172a;

    margin-bottom: 25px;

}

.servicios-cabecera p {

    color: #64748b;

    font-size: 1.08rem;

    line-height: 1.9;

}

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

.servicios-grid {

    display: grid;

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

    gap: 30px;

}

/* ==========================================
   TARJETAS
========================================== */

.servicio-card {

    position: relative;

    padding: 40px 35px;

    border-radius: 35px;

    background: rgba(255,255,255,.55);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255,255,255,.85);

    box-shadow:
        0 20px 45px rgba(15,23,42,.08);

    transition: .4s;

    overflow: hidden;

}

.servicio-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #06b6d4
        );

    transform: scaleX(0);

    transform-origin: left;

    transition: .4s;

}

.servicio-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 35px 70px rgba(15,23,42,.12);

}

.servicio-card:hover::before {

    transform: scaleX(1);

}

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

.destacado {

    background:
        linear-gradient(
            135deg,
            #96b4f5,
            #ebe9ef
        );

    color: white;

}

.destacado h3,
.destacado p {

    color: white;

}

.destacado .servicio-icono {

    background: rgba(255,255,255,.15);

    border-color: rgba(255,255,255,.2);

}

.destacado svg {

    stroke: white;

}

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

.servicio-icono {

    width: 75px;

    height: 75px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 24px;

    margin-bottom: 25px;

    background: rgba(37,99,235,.08);

    border: 1px solid rgba(37,99,235,.12);

}

.servicio-icono svg {

    width: 36px;

    height: 36px;

    stroke: #2563eb;

    stroke-width: 1.8;

    fill: none;

    stroke-linecap: round;

    stroke-linejoin: round;

}

/* ==========================================
   TEXTO
========================================== */

.servicio-card h3 {

    font-size: 1.4rem;

    color: #0f172a;

    margin-bottom: 18px;

}

.servicio-card p {

    color: #64748b;

    line-height: 1.8;

}

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

.servicios-cta {

    display: flex;

    justify-content: center;

    margin-top: 70px;

}

.servicios-boton {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 38px;

    border-radius: 999px;

    text-decoration: none;

    font-weight: 700;

    color: white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #06b6d4
        );

    box-shadow:
        0 20px 45px rgba(37,99,235,.35);

    transition: .35s;

}

.servicios-boton:hover {

    transform: translateY(-5px);

    box-shadow:
        0 30px 60px rgba(37,99,235,.4);

}

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

@media (max-width: 1000px) {

    .servicios {

        padding: 90px 0;

    }

    .servicios-grid {

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

    }

}

/* ==========================================
   MÓVIL
========================================== */

@media (max-width: 768px) {

    .servicios-grid {

        grid-template-columns: 1fr;

    }

    .servicios-cabecera {

        margin-bottom: 50px;

    }

    .servicio-card {

        padding: 35px 28px;

    }

    .servicio-icono {

        width: 65px;

        height: 65px;

    }

    .servicio-icono svg {

        width: 30px;

        height: 30px;

    }

    .servicios-boton {

        width: 100%;

        max-width: 350px;

    }

}



.crystal-link{
    display:inline-block;
    margin-top:1.2rem;
    padding:.8rem 1.5rem;
    border-radius:999px;
    text-decoration:none;
    color:#0f172a;
    font-weight:600;

    background:#fff;
    border:1px solid rgba(0,0,0,.08);

    box-shadow:
        0 10px 30px rgba(15,23,42,.08),
        inset 0 1px 1px rgba(255,255,255,.8);

    transition:.3s;
}

.crystal-link:hover{
    transform:translateY(-3px);
    box-shadow:
        0 16px 40px rgba(37,99,235,.18);
}