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

.servicios-destacados {

    position: relative;
    overflow: hidden;

    padding: 180px 0 150px;

    background:#000000;
}



.servicios-destacados-grid {

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

    align-items:end;

    gap:80px;
}


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

.servicio-card {

    position:relative;

    min-height:760px;


    display:flex;
    flex-direction:column;

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

    isolation:isolate;
}


/* ============================================================
   CONTENT
============================================================ */


.servicio-content {

    position:relative;
    z-index:3;


    width:100%;


    display:flex;
    flex-direction:column;
    align-items:center;


    text-align:center;

    gap:30px;
}



.servicio-logo,
.servicio-content p,
.servicio-btn,
.servicio-animation {

    position:relative;
    z-index:2;
}



.servicio-logo {

    width:100%;
    max-width:430px;
}



.servicio-content p {

    margin:0;

    max-width:520px;

    line-height:1.35;
}



/* ============================================================
   BOTON
============================================================ */

.servicio-btn {

    width:100%;
    max-width:420px;

    height:56px;

    border-radius:999px;


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


    color:white;

    text-decoration:none;


    transition: transform var(--nx-dur-media) var(--nx-ease), box-shadow var(--nx-dur-media) var(--nx-ease);
}



.servicio-btn span {
    margin-left:8px;
}



.servicio-btn:hover {

    transform:translateY(-4px);
}



/* ============================================================
   VIDEO
============================================================ */


.servicio-visual {

    width:100%;

    margin-top:90px;


    display:flex;
    justify-content:center;
}



.servicio-animation {

    width:100%;
    max-width:620px;
}



.servicio-video {

    width:100%;
    display:block;

    object-fit:contain;

    mix-blend-mode:screen;
}



/* ============================================================
   GLOW
============================================================ */

.servicio-content,
.servicio-visual {

    position:relative;
    isolation:isolate;
}



.servicio-local-glow {

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%);

    width:115%;
    height:115%;


    filter:blur(48px);

    mix-blend-mode:screen;

    pointer-events:none;

    opacity:.7;
}


/* ============================================================
   INSUVEX THEME
============================================================ */


.servicio-card-insuvex p {

    color:#ff5e5e;

    text-shadow:
    0 0 18px rgba(255,72,72,.10),
    0 0 38px rgba(255,72,72,.06);
}


.servicio-card-insuvex strong {

    color:#ff4b4b;
}


.servicio-card-insuvex .servicio-btn {


    background:
    linear-gradient(
        90deg,
        #ff5a5a,
        #ff4747,
        #ff6a4d
    );


    box-shadow:
    0 16px 35px rgba(255,72,72,.20);
}



.servicio-card-insuvex .servicio-local-glow {

    background:
    radial-gradient(
        circle,
        rgba(255,72,72,.18),
        rgba(255,59,59,.10),
        transparent 70%
    );
}




/* ============================================================
   SOLVIX THEME
============================================================ */


.servicio-card-solvix p {

    color:#5ab9ff;

    text-shadow:
    0 0 18px rgba(67,180,255,.10),
    0 0 38px rgba(67,180,255,.06);
}



.servicio-card-solvix strong {

    color:#42b4ff;
}



.servicio-card-solvix .servicio-btn {


    background:
    linear-gradient(
        90deg,
        #48b9ff,
        #3ca9ef,
        #2b8fd9
    );


    box-shadow:
    0 16px 35px rgba(67,180,255,.20);
}



.servicio-card-solvix .servicio-local-glow {


    background:
    radial-gradient(
        circle,
        rgba(67,180,255,.18),
        rgba(41,156,255,.10),
        transparent 70%
    );
}



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


@media(max-width:1100px){


    .servicios-destacados-grid {

        grid-template-columns:1fr;

        gap:90px;
    }


    .servicio-card {

        min-height:auto;
    }


    .servicio-animation {

        max-width:650px;
    }

}



@media(max-width:768px){


    .servicios-destacados {

        padding:130px 0 100px;
    }



    .servicio-logo {

        max-width:340px;
    }


    .servicio-btn {

        max-width:340px;
    }


    .servicio-animation {

        max-width:420px;
    }

}