/* ==========================================================
   SERVICES PAGE
   SOSMedical
========================================================== */

.services-page {
    background: var(--background);
}

/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.services-hero {
    position: relative;
    overflow: hidden;

    padding: 120px 0 100px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(0,153,216,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f9fcfe,
            #eef8fc,
            #ffffff
        );
}

.services-hero::before {
    position: absolute;
    top: -180px;
    right: -180px;

    width: 520px;
    height: 520px;

    content: "";

    border: 70px solid rgba(0,153,216,.04);
    border-radius: 50%;
}

.services-hero__content {
    max-width: 850px;
}

.services-hero__eyebrow {
    color: var(--secondary);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.services-hero__title {
    margin-top: 18px;

    font-size: clamp(44px,6vw,74px);
    line-height: 1.05;
}

.services-hero__text {
    max-width: 720px;
    margin-top: 24px;

    color: var(--text-light);

    font-size: 18px;
    line-height: 1.9;
}

/*
|--------------------------------------------------------------------------
| Services Grid
|--------------------------------------------------------------------------
*/

.services-section {
    padding: 100px 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 32px;
}

/*
|--------------------------------------------------------------------------
| Service Card
|--------------------------------------------------------------------------
*/

.service-card {
    position: relative;

    overflow: hidden;

    background: var(--white);

    border: 1px solid rgba(11,35,65,.08);
    border-radius: 28px;

    box-shadow: var(--shadow-sm);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.service-card:hover {
    transform: translateY(-8px);

    border-color: rgba(0,153,216,.18);

    box-shadow:
        0 25px 50px rgba(11,35,65,.10);
}

.service-card__image {
    width: 100%;
    height: 260px;

    object-fit: cover;
}

.service-card__body {
    padding: 32px;
}

.service-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 62px;
    height: 62px;

    color: var(--secondary);

    background:
        rgba(0,153,216,.08);

    border-radius: 18px;

    font-size: 26px;
}

.service-card__title {
    margin-top: 24px;

    font-size: 30px;
}

.service-card__description {
    margin-top: 16px;

    color: var(--text-light);

    font-size: 15px;
    line-height: 1.8;
}

.service-card__actions {
    margin-top: 24px;
}

/*
|--------------------------------------------------------------------------
| Process
|--------------------------------------------------------------------------
*/

.services-process {
    padding: 110px 0;

    background: var(--white);
}

.services-process__heading {
    text-align: center;

    margin-bottom: 70px;
}

.services-process__grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
}

.process-card {
    position: relative;

    text-align: center;

    padding: 40px 24px;

    background: var(--background);

    border-radius: 24px;
}

.process-card__number {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin: 0 auto 24px;

    color: var(--white);

    font-size: 24px;
    font-weight: 700;

    background: var(--secondary);

    border-radius: 50%;
}

.process-card__title {
    font-size: 22px;
}

.process-card__text {
    margin-top: 12px;

    color: var(--text-light);

    line-height: 1.8;
}

/*
|--------------------------------------------------------------------------
| Benefits
|--------------------------------------------------------------------------
*/

.services-benefits {
    padding: 110px 0;
}

.services-benefits__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 28px;
}

.benefit-card {
    padding: 32px;

    background: var(--white);

    border: 1px solid rgba(11,35,65,.08);
    border-radius: 24px;

    box-shadow: var(--shadow-sm);
}

.benefit-card__icon {
    color: var(--secondary);

    font-size: 34px;
}

.benefit-card__title {
    margin-top: 18px;

    font-size: 24px;
}

.benefit-card__text {
    margin-top: 14px;

    color: var(--text-light);

    line-height: 1.8;
}

/*
|--------------------------------------------------------------------------
| Coverage
|--------------------------------------------------------------------------
*/

.services-coverage {
    padding: 100px 0;

    background: var(--white);
}

.services-coverage__box {
    padding: 60px;

    background:
        linear-gradient(
            135deg,
            rgba(0,153,216,.05),
            rgba(0,153,216,.02)
        );

    border-radius: 32px;
}

.services-coverage__brands {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 30px;
}

.services-coverage__brand {
    display: inline-flex;
    align-items: center;

    padding: 12px 18px;

    color: var(--secondary);

    font-size: 13px;
    font-weight: 700;

    background: var(--white);

    border-radius: 999px;
}

/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.services-cta {
    position: relative;

    overflow: hidden;

    padding: 110px 0;

    background:
        linear-gradient(
            135deg,
            var(--secondary),
            #0085bf,
            var(--primary)
        );
}

.services-cta::before {
    position: absolute;
    top: -140px;
    right: -120px;

    width: 340px;
    height: 340px;

    content: "";

    border: 60px solid rgba(255,255,255,.05);
    border-radius: 50%;
}

.services-cta__content {
    position: relative;
    z-index: 2;

    text-align: center;
}

.services-cta__title {
    color: var(--white);

    font-size: clamp(34px,5vw,58px);
}

.services-cta__text {
    max-width: 700px;
    margin: 22px auto 0;

    color: rgba(255,255,255,.80);

    font-size: 18px;
    line-height: 1.8;
}

.services-cta__actions {
    margin-top: 36px;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px) {

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

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

@media (max-width: 992px) {

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

@media (max-width: 768px) {

    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

    .services-hero {
        padding: 62px 0 48px;
    }

    .services-hero::before {
        top: -120px;
        right: -170px;

        width: 380px;
        height: 380px;

        border-width: 52px;
    }

    .services-hero__content {
        max-width: 100%;
    }

    .services-hero__eyebrow {
        font-size: 10px;
        letter-spacing: .09em;
    }

    .services-hero__title {
        margin-top: 14px;

        font-size: clamp(32px, 7vw, 42px);
        line-height: 1.08;
        letter-spacing: -.025em;

        text-wrap: balance;
    }

    .services-hero__text {
        max-width: 600px;
        margin-top: 16px;

        font-size: 14px;
        line-height: 1.65;
    }


    /*
    |--------------------------------------------------------------------------
    | Espacios generales
    |--------------------------------------------------------------------------
    */

    .services-section,
    .services-process,
    .services-benefits,
    .services-coverage {
        padding: 58px 0;
    }


    /*
    |--------------------------------------------------------------------------
    | Encabezados generales
    |--------------------------------------------------------------------------
    */

    .services-page .section-heading,
    .services-process__heading {
        max-width: 620px;
        margin-right: auto;
        margin-bottom: 30px;
        margin-left: auto;

        text-align: center;
    }

    .services-page .section-heading__eyebrow {
        font-size: 9px;
        line-height: 1.3;
        letter-spacing: .09em;
    }

    .services-page .section-heading__title {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;

        font-size: 30px;
        line-height: 1.12;
        letter-spacing: -.025em;

        text-wrap: balance;
    }

    .services-page .section-heading__text {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;

        font-size: 13px;
        line-height: 1.6;
    }


    /*
    |--------------------------------------------------------------------------
    | Servicios — encabezado
    |--------------------------------------------------------------------------
    */

    .services-section .section-heading {
        text-align: center;
    }

    .services-section .section-heading__title {
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;

        font-size: 30px;
        line-height: 1.1;
    }

    .services-section .section-heading__text {
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;

        font-size: 13px;
        line-height: 1.6;
    }


    /*
    |--------------------------------------------------------------------------
    | Servicios — carrusel horizontal
    |--------------------------------------------------------------------------
    */

    .services-grid {
        display: grid;
        grid-auto-columns:
            minmax(275px, 82vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 14px;

        overflow-x: auto;
        overflow-y: hidden;

        margin-right: -14px;
        padding-right: 14px;
        padding-bottom: 12px;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .services-grid::-webkit-scrollbar {
        display: none;
    }

    .service-card {
        border-radius: 22px;

        scroll-snap-align: start;
    }

    .service-card:hover {
        transform: none;
    }

    .service-card__image {
        height: 200px;
    }

    .service-card__body {
        padding: 22px;
    }

    .service-card__icon {
        width: 52px;
        height: 52px;

        border-radius: 15px;
    }

    .service-card__title {
        margin-top: 18px;

        font-size: 22px;
        line-height: 1.15;
    }

    .service-card__description {
        display: -webkit-box;
        overflow: hidden;

        margin-top: 11px;

        font-size: 12px;
        line-height: 1.6;

        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }

    .service-card__actions {
        margin-top: 18px;
    }

    .service-card__actions .btn {
        width: 100%;
        min-height: 44px;
    }


    /*
    |--------------------------------------------------------------------------
    | Proceso — encabezado
    |--------------------------------------------------------------------------
    */

    .services-process__heading {
        margin-bottom: 30px;
    }

    .services-process .section-heading__title {
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;

        font-size: 29px;
        line-height: 1.12;
    }

    .services-process .section-heading__text {
        max-width: 500px;
        margin-right: auto;
        margin-left: auto;

        font-size: 13px;
        line-height: 1.6;
    }


    /*
    |--------------------------------------------------------------------------
    | Proceso — carrusel horizontal
    |--------------------------------------------------------------------------
    */

    .services-process__grid {
        display: grid;
        grid-auto-columns:
            minmax(220px, 72vw);
        grid-auto-flow: column;
        grid-template-columns: none;
        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        margin-right: -14px;
        padding-right: 14px;
        padding-bottom: 12px;

        scroll-snap-type: x mandatory;
        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }

    .services-process__grid::-webkit-scrollbar {
        display: none;
    }

    .process-card {
        min-height: 210px;
        padding: 26px 20px;

        border-radius: 20px;

        scroll-snap-align: start;
    }

    .process-card__number {
        width: 58px;
        height: 58px;

        margin-bottom: 18px;

        font-size: 19px;
    }

    .process-card__title {
        font-size: 19px;
        line-height: 1.2;
    }

    .process-card__text {
        margin-top: 9px;

        font-size: 12px;
        line-height: 1.6;
    }


    /*
    |--------------------------------------------------------------------------
    | Beneficios
    |--------------------------------------------------------------------------
    */

    .services-benefits__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .benefit-card {
        padding: 22px;

        border-radius: 19px;
    }

    .benefit-card__icon {
        font-size: 29px;
    }

    .benefit-card__title {
        margin-top: 14px;

        font-size: 20px;
        line-height: 1.2;
    }

    .benefit-card__text {
        margin-top: 9px;

        font-size: 12px;
        line-height: 1.6;
    }


    /*
    |--------------------------------------------------------------------------
    | Cobertura
    |--------------------------------------------------------------------------
    */

    .services-coverage__box {
        padding: 30px 20px;

        border-radius: 24px;
    }

    .services-coverage__brands {
        justify-content: center;
        gap: 9px;

        margin-top: 22px;
    }

    .services-coverage__brand {
        padding: 9px 13px;

        font-size: 11px;
    }


    /*
    |--------------------------------------------------------------------------
    | CTA
    |--------------------------------------------------------------------------
    */

    .services-cta {
        padding: 58px 0;
    }

    .services-cta::before {
        top: -100px;
        right: -140px;

        width: 270px;
        height: 270px;

        border-width: 45px;
    }

    .services-cta__title {
        max-width: 520px;
        margin-right: auto;
        margin-left: auto;

        font-size: 30px;
        line-height: 1.12;
        letter-spacing: -.025em;

        text-wrap: balance;
    }

    .services-cta__text {
        max-width: 500px;
        margin-top: 16px;
        margin-right: auto;
        margin-left: auto;

        font-size: 13px;
        line-height: 1.6;
    }

    .services-cta__actions {
        margin-top: 24px;
    }

    .services-cta__actions .btn {
        width: 100%;
        min-height: 48px;
    }


    /*
    |--------------------------------------------------------------------------
    | Estado vacío
    |--------------------------------------------------------------------------
    */

    .services-empty {
        min-height: 300px;
        padding: 35px 22px;

        border-radius: 20px;
    }

    .services-empty__icon {
        width: 64px;
        height: 64px;

        border-radius: 18px;
    }

    .services-empty__icon svg {
        width: 29px;
        height: 29px;
    }

    .services-empty__title {
        margin-top: 18px;

        font-size: 21px;
    }

    .services-empty__text {
        margin-top: 9px;

        font-size: 13px;
        line-height: 1.6;
    }

    .services-empty__action {
        margin-top: 18px;
    }
}

@media (max-width: 480px) {

    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

    .services-hero {
        padding: 46px 0 38px;
    }

    .services-hero::before {
        top: -100px;
        right: -150px;

        width: 310px;
        height: 310px;

        border-width: 42px;
    }

    .services-hero__eyebrow {
        font-size: 9px;
        letter-spacing: .08em;
    }

    .services-hero__title {
        margin-top: 11px;

        font-size: 30px;
        line-height: 1.07;
        letter-spacing: -.025em;

        text-wrap: balance;
    }

    .services-hero__text {
        margin-top: 13px;

        font-size: 13px;
        line-height: 1.58;
    }


    /*
    |--------------------------------------------------------------------------
    | Espacios generales
    |--------------------------------------------------------------------------
    */

    .services-section,
    .services-process,
    .services-benefits,
    .services-coverage {
        padding: 48px 0;
    }


    /*
    |--------------------------------------------------------------------------
    | Encabezados generales
    |--------------------------------------------------------------------------
    */

    .services-page .section-heading {
        margin-bottom: 26px;
    }

    .services-page .section-heading__eyebrow {
        font-size: 9px;
        line-height: 1.3;
        letter-spacing: .08em;
    }

    .services-page .section-heading__title {
        max-width: 350px;
        margin-right: auto;
        margin-left: auto;

        font-size: 26px;
        line-height: 1.12;
        letter-spacing: -.025em;

        text-wrap: balance;
    }

    .services-page .section-heading__text {
        max-width: 370px;
        margin-right: auto;
        margin-left: auto;

        font-size: 12px;
        line-height: 1.55;
    }


    /*
    |--------------------------------------------------------------------------
    | Encabezado de servicios
    |--------------------------------------------------------------------------
    */

    .services-section .section-heading__title {
    max-width: 330px;
    margin-right: auto;
    margin-left: auto;

    font-size: 27px;
    line-height: 1.1;
    }

    .services-section .section-heading__text {
        max-width: 350px;
        margin-right: auto;
        margin-left: auto;

        font-size: 12px;
        line-height: 1.55;
    }


    /*
    |--------------------------------------------------------------------------
    | Servicios — carrusel
    |--------------------------------------------------------------------------
    */

    .services-grid {
        grid-auto-columns:
            minmax(245px, 86vw);
        gap: 11px;

        margin-right: -11px;
        padding-right: 11px;
        padding-bottom: 10px;
    }

    .service-card {
        border-radius: 18px;
    }

    .service-card:hover {
        transform: none;
    }

    .service-card__image {
        height: 170px;
    }

    .service-card__body {
        padding: 18px;
    }

    .service-card__icon {
        width: 46px;
        height: 46px;

        border-radius: 13px;
    }

    .service-card__icon svg {
        width: 23px;
        height: 23px;
    }

    .service-card__title {
        margin-top: 15px;

        font-size: 20px;
        line-height: 1.12;
    }

    .service-card__description {
        margin-top: 9px;

        font-size: 11px;
        line-height: 1.5;

        -webkit-line-clamp: 3;
    }

    .service-card__actions {
        margin-top: 15px;
    }

    .service-card__actions .btn {
        min-height: 42px;

        font-size: 11px;
    }


    /*
    |--------------------------------------------------------------------------
    | Proceso
    |--------------------------------------------------------------------------
    */

    .services-process__heading {
        margin-bottom: 26px;
    }

    .services-process .section-heading__title {
        max-width: 340px;

        font-size: 25px;
        line-height: 1.12;
    }

    .services-process .section-heading__text {
        max-width: 350px;

        font-size: 12px;
        line-height: 1.55;
    }

    .services-process__grid {
        grid-auto-columns:
            minmax(200px, 72vw);
        gap: 10px;

        margin-right: -11px;
        padding-right: 11px;
        padding-bottom: 10px;
    }

    .process-card {
        min-height: 185px;
        padding: 22px 17px;

        border-radius: 17px;
    }

    .process-card__number {
        width: 50px;
        height: 50px;

        margin-bottom: 15px;

        font-size: 17px;
    }

    .process-card__title {
        font-size: 17px;
        line-height: 1.2;
    }

    .process-card__text {
        margin-top: 8px;

        font-size: 11px;
        line-height: 1.5;
    }


    /*
    |--------------------------------------------------------------------------
    | Beneficios
    |--------------------------------------------------------------------------
    */

    .services-benefits__grid {
        gap: 11px;
    }

    .benefit-card {
        padding: 18px;

        border-radius: 17px;
    }

    .benefit-card__icon {
        font-size: 28px;
    }

    .benefit-card__icon svg {
        width: 28px;
        height: 28px;
    }

    .benefit-card__title {
        margin-top: 11px;

        font-size: 18px;
        line-height: 1.2;
    }

    .benefit-card__text {
        margin-top: 7px;

        font-size: 11px;
        line-height: 1.52;
    }


    /*
    |--------------------------------------------------------------------------
    | Cobertura
    |--------------------------------------------------------------------------
    */

    .services-coverage__box {
        padding: 24px 16px;

        border-radius: 20px;
    }

    .services-coverage__brands {
        gap: 7px;

        margin-top: 18px;
    }

    .services-coverage__brand {
        padding: 8px 11px;

        font-size: 10px;
    }


    /*
    |--------------------------------------------------------------------------
    | CTA
    |--------------------------------------------------------------------------
    */

    .services-cta {
        padding: 48px 0;
    }

    .services-cta::before {
        top: -90px;
        right: -130px;

        width: 250px;
        height: 250px;

        border-width: 40px;
    }

    .services-cta__title {
        max-width: 350px;
        margin-right: auto;
        margin-left: auto;

        font-size: 27px;
        line-height: 1.1;
        letter-spacing: -.025em;

        text-wrap: balance;
    }

    .services-cta__text {
        max-width: 360px;
        margin-top: 13px;
        margin-right: auto;
        margin-left: auto;

        font-size: 12px;
        line-height: 1.58;
    }

    .services-cta__actions {
        margin-top: 20px;
    }

    .services-cta__actions .btn {
        width: 100%;
        min-height: 46px;

        font-size: 12px;
    }


    /*
    |--------------------------------------------------------------------------
    | Estado vacío
    |--------------------------------------------------------------------------
    */

    .services-empty {
        min-height: 260px;
        padding: 30px 18px;

        border-radius: 17px;
    }

    .services-empty__icon {
        width: 58px;
        height: 58px;

        border-radius: 16px;
    }

    .services-empty__icon svg {
        width: 26px;
        height: 26px;
    }

    .services-empty__title {
        margin-top: 16px;

        font-size: 19px;
        line-height: 1.2;
    }

    .services-empty__text {
        margin-top: 8px;

        font-size: 12px;
        line-height: 1.55;
    }

    .services-empty__action {
        width: 100%;
        margin-top: 17px;
    }

    .services-empty__action .btn {
        width: 100%;
    }
}
/*
|--------------------------------------------------------------------------
| Empty state
|--------------------------------------------------------------------------
*/

.services-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    min-height: 400px;
    padding: 50px 30px;

    text-align: center;

    background: var(--white);
    border: 1px solid rgba(11, 35, 65, 0.08);
    border-radius: var(--radius-lg);

    box-shadow: var(--shadow-sm);
}

.services-empty__icon {
    display: grid;

    width: 80px;
    height: 80px;

    color: var(--secondary);

    background: rgba(0, 153, 216, 0.08);
    border-radius: 23px;

    place-items: center;
}

.services-empty__icon svg {
    width: 37px;
    height: 37px;
}

.services-empty__title {
    margin-top: 23px;

    color: var(--primary);
    font-size: 25px;
}

.services-empty__text {
    max-width: 540px;
    margin-top: 11px;

    color: var(--text-light);
    font-size: 15px;
    line-height: 1.75;
}

.services-empty__action {
    margin-top: 24px;
}