.use-cases__hero {
    margin: 0 auto;
    padding: 72px 0 75px 0;

    & .use-cases__hero-container {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-flow: column nowrap;
        gap: 16px;
        width: 100%;
        max-width: calc(100% - 2rem);

        & h2.h2-title-hero {
            color: var(--color-blue-dark);
        }

        & .txt-large {
            color: var(--color-gray);
            font-family: var(--font-family-primary);
            max-width: 782px;

            & strong {
                color: var(--color-gray);
                max-width: 782px;
                width: 100%;
                text-align: center;
            }
        }
    }
}

@media (max-width: 768px) {
    .use-cases__hero {
        & .use-cases__hero-container {
            max-width: 100%;
            padding: 0 24px;

            & h2.h2-title-hero {
                text-align: left;

            }
        }
    }

}

/* Contenedor de filtros */
.use-cases__filters {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: row nowrap;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
    max-width: calc(100% - 42px);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin: 0 auto 24px;
    /* Añade un poco de espacio para que el scroll no se sobreponga al contenido */
}

/* Contenedor específico donde están los botones */
.use-cases__filters-cotainer {
    display: flex;
    justify-content: flex-start;
    /* Los botones se alinean al inicio */
    gap: 16px;
    /* Espacio entre los botones */
    width: fit-content;
    /* El ancho del contenedor se ajusta al tamaño de los botones */
    min-width: 0;
    /* Asegura que el contenedor no se expanda más allá del contenido */
    padding-bottom: 8px;
}

/* Estilos para los botones */
.use-cases__filter-btn {
    background-color: var(--color-white);
    color: var(--color-ultra-light-gray);
    white-space: nowrap;
    border: none !important;
    padding: 8px 22px;

    &:hover {
        border: none !important;
    }
}

/* Estilo para el botón activo */
.use-cases__filter-btn.active {
    background-color: var(--color-green);
    color: var(--color-white);
    border: none;
}

/* Personaliza el scroll horizontal */
.use-cases__filters::-webkit-scrollbar {
    height: 8px;
    /* Altura del scroll horizontal */
}

.use-cases__filters::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

.use-cases__filters::-webkit-scrollbar-track {
    background-color: transparent;
}





.use-cases-grid {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 30px;
    max-width: 1140px;
    width: 100%;
    padding: 0;
    margin-bottom: 72px;

    & .use-case-card .card-content,
    .use-case-card .card-content h4,
    .use-case-card .use-card__learn-more-link,
    .use-case-card .card-content .subtitle {
        transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
        will-change: transform, color, opacity;
    }

    & .use-case-card:hover .use-card__principal-link .card-content {
        background-color: var(--color-green-light);

    }

    & .use-case-card:hover .card-content h4 {
        background: var(--GC-MainGradient, linear-gradient(42deg, var(--color-blue) 4.8%, #377EF7 98.12%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    & .use-case-card:hover .use-card__learn-more-link {
        color: var(--color-black);
    }

    & .use-case-card:hover .use-card__principal-link .card-content .category {
        border: solid 1px var(--color-green);
    }

    & .use-case-card {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-flow: column nowrap;
        background: var(--color-white);
        border-radius: 8px;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        padding: 0;
        width: 100%;
        max-width: 360px;
        margin: 0;
        text-align: center;
        border: none;
        border-radius: 20px;



        & .use-card__principal-link {
            height: 100%;
            width: 100%;
            display: flex;
            flex-flow: column;
            border-radius: 20px;
            background-color: var(--color-white);

            text-decoration: none;

            & .card-image {
                width: 100%;
                height: 217px;
                border-radius: 20px 20px 0 0;
                overflow: hidden;
                position: relative;
                margin-bottom: 0;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;

                & .background {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    border-radius: 20px 20px 0 0;
                    position: relative;
                    display: inline-block;
                    transition: transform 0.3s ease;

                    &::after {
                        content: '';
                        position: absolute;
                        inset: 0;
                        background-color: #25c3c180;
                        /* el color que querías */
                        mix-blend-mode: multiply;
                        pointer-events: none;
                        transition: opacity 0.3s ease;
                    }
                }

                & .logo {
                    position: absolute;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    width: 100%;
                    object-fit: contain;
                    margin: auto auto;
                    max-width: 350px;
                    padding: 0rem;
                    z-index: 10;
                    max-height: 137px;
                    max-width: 241px;
                }
            }

            & .card-content {
                display: flex;
                flex-flow: column nowrap;
                padding: 24px;

                & .category {
                    display: flex;
                    padding: 6px 16px;
                    align-items: flex-start;
                    gap: 8px;
                    border-radius: 4px;
                    background-color: var(--color-green-light);
                    width: fit-content;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 160%;
                    /* 22.4px */
                    letter-spacing: 0.84px;
                    text-transform: uppercase;
                    font-family: var(--font-family-primary);
                    color: var(--color-green);
                    border: solid 1px var(--color-green-light);
                    margin-bottom: 30px;

                    & span {
                        text-decoration: underline;
                        text-decoration-color: var(--color-green-light);
                        -moz-text-decoration-color: var(--color-green-light);
                    }

                    &:hover {
                        & span {
                            text-decoration: underline;
                            text-decoration-color: var(--color-green-light);
                            -moz-text-decoration-color: var(--color-green-light);
                        }
                    }
                }

                & h4.h4-title {
                    color: var(--color-blue-dark);
                    text-decoration: none;
                    text-align: left;
                    margin-left: 0;
                    margin-right: 0;
                    margin-bottom: 24px;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                }

                & .subtitle {
                    display: none;
                }

                & .use-card__learn-more-link {
                    text-decoration: none;
                    text-decoration-color: var(--color-white);
                    margin-left: 0;
                    margin-bottom: 0;
                    color: var(--color-green);
                    text-align: left;
                    color: var(--color-blue);
                    font-family: var(--font-family-primary);
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 16px;
                    letter-spacing: 0.56px;
                    display: inline-flex;
                    align-items: center;
                    transition: color 0.3s ease;

                    -moz-text-decoration-color: var(--color-white);

                    & .learn-more-icon {
                        height: 16px;
                        width: 16px;
                        margin-left: 8px;
                        transition: var(--transition);

                        & svg {
                            height: 16px;
                            width: 16px;
                        }
                    }
                }
            }
        }

        &.first {
            width: 100%;
            max-width: 100%;

            & .use-card__principal-link {
                display: flex;
                flex-flow: row nowrap;
                border-radius: 8px 0 0 8px;
                border-radius: 8px;
                background: var(--color-white);
                text-decoration: none;
                max-height: 350px;

                & .card-image {
                    margin-bottom: 0;
                    width: 50%;
                    max-width: 570px;
                    height: 100%;
                    border-radius: 8px 0 0 8px;
                    -webkit-border-radius: 8px 0 0 8px;
                    -moz-border-radius: 8px 0 0 8px;
                    -ms-border-radius: 8px 0 0 8px;
                    -o-border-radius: 8px 0 0 8px;

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 8px 0 0 8px;
                        -webkit-border-radius: 8px 0 0 8px;
                        -moz-border-radius: 8px 0 0 8px;
                        -ms-border-radius: 8px 0 0 8px;
                        -o-border-radius: 8px 0 0 8px;

                        &.logo {
                            object-fit: contain;
                            max-height: 250px;
                            max-width: 350px;
                        }
                    }
                }

                & .card-content {
                    display: flex;
                    align-items: flex-start;
                    padding: 30px;
                    width: 50%;

                    & .category {
                        display: flex;
                        margin-right: auto;
                        margin-top: 0;
                        margin-left: 0;

                    }

                    & h4.h4-title {
                        grid-area: title;
                        display: flex;
                        color: var(--color-blue-dark);
                        text-decoration: none;
                        margin-bottom: 16px;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        height: auto;
                        overflow: hidden;

                    }

                    & .subtitle {
                        display: -webkit-box !important;
                        /* Asegura que el recorte funcione */
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        /* Limita a 2 líneas */
                        overflow: hidden;
                        /* Oculta el texto excedente */

                        color: var(--color-gray);
                        font-family: var(--font-family-primary);
                        font-size: 16px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 20.8px;
                        letter-spacing: 0.16px;
                        text-align: left;
                        margin: 0;
                        height: 42px;
                        text-decoration: none;
                        text-decoration-color: var(--color-white);
                        margin-bottom: 24px;

                    }

                    & .btn-contact {
                        height: 24px;
                        margin: 24px 0;
                    }
                }


            }

        }

        &:hover {
            & .use-card__principal-link {
                & .card-content {
                    & .use-card__learn-more-link {
                        & .learn-more-icon {
                            margin-left: 12px;
                        }
                    }
                }

                & .card-image {
                    & .background {
                        transform: scale(1.05);
                        filter: none;
                    }
                }
            }
        }
    }


}

.use-case-detail__container {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: auto;
    justify-content: center;

    & .use-case-detail__article {
        display: flex;
        flex-flow: column nowrap;
        height: auto;
        width: 100%;
        max-width: 100%;

        & .use-case-detail__hero {
            display: flex;
            padding-bottom: 128px;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            align-self: stretch;
            height: auto;
            background: var(--GC-MainGradient, linear-gradient(42deg, #25C3C1 4.8%, #377EF7 98.12%));

            & .use-case-detail__hero-header {
                display: flex;
                width: calc(100% - 42px);
                justify-content: space-between;
                margin: 30px auto 55px;
                max-width: 1140px;

                & .use-case-detail__hero-header-left {
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: center;
                    align-items: center;
                    gap: 30px;

                    & .use-cases__back {
                        display: flex;
                        padding: 6px 16px;
                        gap: 8px;
                        color: var(--color-white);
                        font-family: var(--font-family-primary);
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        letter-spacing: 0.56px;
                        text-transform: uppercase;
                        border-radius: 4px;
                        border: 1px solid var(--color-white);
                        text-decoration: none;
                    }

                    & .use-case__category {
                        display: flex;
                        padding: 6px 16px;
                        align-items: center;
                        border-radius: 4px;
                        background: var(--color-white);
                        gap: 8px;
                        color: var(--color-green);
                        font-family: var(--font-family-primary);
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: normal;
                        letter-spacing: 0.56px;
                        text-transform: uppercase;
                        text-decoration: none;
                    }

                }

                & .use-case-detail__hero-header-right {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    & .btn-back {
                        color: var(--color-white);
                        /* Tag-Large */
                        font-family: var(--font-family-primary);
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 14px;
                        letter-spacing: 0.56px;
                        text-transform: uppercase;
                        text-decoration: none;
                        z-index: 1;

                        & svg {
                            margin-right: 8px;
                            z-index: 0;
                        }
                    }
                }
            }

            & .use-case-detail__hero-content {
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                align-items: center;
                gap: 24px;
                max-width: 1140px;

                & .use-case-detail__hero-content-left {
                    flex: 1 0 70%;
                    display: flex;
                    flex-flow: column;
                    gap: 1rem;

                    & h1.h1-title-use-case {
                        color: var(--color-white);
                        margin-bottom: 24px;
                        max-width: 749px;
                        width: 100%;

                    }

                    & p.txt-large {
                        color: var(--color-white);
                        max-width: 718px;
                        width: 100%;
                    }

                }

                & .use-case-detail__hero-content-right {
                    flex: 1 0 30%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 100%;
                    max-width: 407px;

                    & img {
                        width: fit-content;
                        height: auto;
                        max-width: 250px;
                        max-height: auto;
                        border-radius: 8px;
                    }
                }
            }

            & .use-case-detail__hero-footer {
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                gap: 30px;
                margin: 88px auto;
                padding: 0;
                max-width: 1140px;

                & .use-case-detail__hero-footer-content {
                    display: flex;
                    flex-flow: column wrap;
                    flex: 1 0 min-content;
                }

                & h5.tag-medium {
                    color: var(--color-white);
                    margin-bottom: 8px;
                    text-transform: uppercase;
                }

                & p.txt-medium {
                    color: var(--color-white);
                }
            }
        }

        & .use-case-detail__content {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;

            & .use-case-detail__float-card {
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: flex-start;
                margin-bottom: 72px;
                width: 1140px;
                padding: 38px 65px;
                gap: 10%;
                height: auto;
                border-radius: 20px;
                background: var(--color-white);
                margin-top: -160px;

                & h3.tag-medium {
                    color: var(--color-gray);
                    text-transform: uppercase;
                    margin-bottom: 16px;
                }

                & p.txt-medium {
                    color: var(--color-ultra-light-gray);
                }

                & a.txt-medium {
                    color: var(--color-ultra-light-gray);
                    text-decoration: none;
                    font-family: var(--font-family-primary);
                    text-decoration: underline;
                }

                & .use-case-detail__content-left {
                    flex: 0 1 auto;
                    display: flex;
                    flex-flow: row wrap;
                    align-items: flex-start;
                    justify-content: flex-start;
                    width: 100%;
                    max-width: 586px;
                    gap: 30px;

                    & .use-case-detail__content-top {
                        flex: 1 0 100%;
                        display: flex;
                        flex-flow: column;
                    }

                    & .use-case-detail__content-bottom-left {
                        flex: 1 0 100%;
                        display: flex;
                        flex-flow: column;
                    }

                    & .use-case-detail__content-bottom-right {
                        flex: 1 0 100%;
                        display: flex;
                        flex-flow: column;

                    }
                }

                & .use-case-detail__container-right {
                    flex: 1 0 auto;
                    display: flex;
                    flex-flow: column;
                    align-items: flex-start;
                    justify-content: space-between;
                    width: 100%;
                    max-width: 703px;
                    margin-bottom: 0;
                    height: auto;

                    & .use-case-detail__content-right {
                        flex: 1 0 auto;
                        display: flex;
                        flex-flow: column;
                        align-items: flex-start;
                        justify-content: flex-start;
                        width: auto;
                        max-width: 703px;
                        margin-bottom: 30px;

                    }

                    & .use-case-detail__tags {
                        display: flex;
                        flex-flow: column;
                        width: 100%;

                        & .use-case-tags {
                            display: flex;
                            flex-flow: row wrap;
                            justify-content: space-between;
                            gap: 16px;
                            width: 100%;

                            & li {
                                flex: 0 1 31%;
                                display: flex;
                                align-items: center;
                                gap: 5px;

                                & p {
                                    white-space: nowrap;
                                    min-height: max-content;
                                }
                            }
                        }
                    }

                }

            }

            & .use-case-detail__description {
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                align-items: center;
                margin-bottom: 0;
                width: 752px;
                gap: 10%;
                margin-left: auto;
                margin-right: auto;

                & .use-case-detail__item {
                    display: flex;
                    flex-flow: column;

                    & h4.tag-medium {
                        color: var(--color-gray);
                        margin-bottom: 30px;
                        text-transform: uppercase;
                    }

                    & .use-case-detail__item-text {
                        display: flex;
                        flex-flow: column;
                        gap: 16px;
                        padding-left: 30px;
                        border-left: solid 3px var(--color-green);

                        & h3.h3-title {
                            color: var(--color-blue-dark);

                        }

                        & p.txt-medium {
                            color: var(--color-gray);
                        }

                    }

                    & img {
                        display: flex;
                        width: 752px;
                        height: 478.791px;
                        padding: 10.82px;
                        align-items: flex-start;
                        gap: 10.82px;
                        margin: 88px auto 0;
                        border-radius: 24px;
                    }
                }

                .use-case-detail__item {
                    & .use-case-texts-group {
                        display: flex;
                        flex-flow: column;
                        gap: 88px;
                        margin: 88px 0;


                        & .use-case-block {
                            display: flex;
                            flex-flow: column;
                            gap: 24px;

                            & h3.h3-title {
                                color: var(--color-blue-dark);
                                margin-bottom: 0;
                            }

                            & p.txt-medium {
                                color: var(--color-gray);
                                margin-bottom: 0;
                            }

                            & img.challenge {
                                width: 100%;
                                height: auto;
                                max-width: 100%;
                                border-radius: 20px;
                                margin: 0 auto;
                            }
                        }
                    }
                }
            }

            & .use-case-detail__iso {
                display: flex;
                padding: 65px;
                justify-content: center;
                align-items: center;
                align-self: stretch;
                background-color: var(--color-gray-100);
                margin-bottom: 88px;
                max-width: 1140px;
                margin: 0 auto;
                border-radius: 20px;

                & .use-case-detail__iso-text {
                    flex: 1 0 50%;
                    display: flex;
                    flex-flow: column;
                    max-width: 560px;
                    width: 100%;

                    & p.txt-large {
                        color: var(--color-gray);
                        width: 100%;
                        max-width: 560px;
                        margin-bottom: 16px;

                    }
                }

                & .use-case-detail__iso-imgs {
                    flex: 1 0 50%;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: flex-end;
                    align-items: center;
                    gap: 24px;
                    max-width: 550px;
                    width: 100%;

                    & .use-case-detail__iso-img-container {
                        display: flex;
                        flex-flow: column;
                        justify-content: center;
                        align-items: center;
                        gap: 8px;

                        & img {
                            width: 138.524px;
                            height: 116px;
                            flex-shrink: 0;
                        }

                        & a {
                            color: #000;
                            font-family: var(--font-family-primary);
                            font-size: 10px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 160%;
                            letter-spacing: 0.6px;
                            text-decoration-line: underline;
                            text-decoration-style: solid;
                            text-decoration-skip-ink: auto;
                            text-decoration-thickness: auto;
                            text-underline-offset: auto;
                            text-underline-position: from-font;
                            text-transform: uppercase;
                        }
                    }


                }
            }

            & .use-case-detail__description.alternate {
                & .use-case-detail__item {
                    display: flex;
                    flex-flow: row nowrap;
                    gap: 30px;

                    & h4.tag-medium {
                        color: var(--color-gray);
                        margin-bottom: 30px;

                    }

                    & .use-case-detail__item-left {
                        flex: 1 0 50%;

                        & .use-case-detail__item-text {
                            display: flex;
                            flex-flow: column;
                            gap: 16px;
                            padding-left: 30px;
                            border-left: solid 3px var(--color-blue);

                            & p.txt-medium {
                                color: var(--color-gray);

                            }

                        }
                    }


                    & .use-case-detail__item-right {
                        flex: 1 0 50%;
                        display: flex;
                        align-items: flex-start;
                        margin-top: 58px;
                        width: 100%;
                        max-width: 362px;

                        & img {
                            display: flex;
                            width: 362px;
                            height: 320px;
                            padding: 0;
                            align-items: flex-end;
                            justify-content: flex-end;
                            gap: 10.82px;
                            object-fit: cover;
                            margin: 0;
                            border-radius: 20px;
                        }
                    }
                }
            }

            & .use-case-detail__cita {
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                gap: 30px;
                width: 100%;
                padding: 30px 30px 88px 30px;
                max-width: 1200px;

                & .use-case-detail__cita-content-left {
                    flex-flow: column;
                    display: flex;
                    padding: 30px 65px 65px 65px;
                    justify-content: center;
                    align-items: flex-start;
                    gap: 30px;
                    align-self: stretch;
                    border-radius: 20px;
                    background: var(--color-gray-100);
                    position: relative;

                    & .use-case-detail__cita-text {
                        color: var(--color-gray);
                        font-family: var(--font-family-primary);
                        font-size: 18px;
                        font-style: italic;
                        font-weight: 400;
                        line-height: 130%;
                        /* 26px */
                        letter-spacing: 0.2px;
                        padding-left: 30px;
                    }

                    & img {
                        position: absolute;

                        &.left {
                            left: 2rem;
                            top: 2rem;
                        }

                        &.right {
                            right: 2rem;
                            bottom: 2rem;
                        }
                    }

                    & .use-case-detail__author {
                        color: var(--color-gray);

                        /* Body Medium */
                        font-family: var(--font-family-primary);
                        font-size: 14px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 130%;
                        /* 20.8px */
                        letter-spacing: 0.16px;
                        padding-left: 30px;
                    }

                }

                & .use-case-detail__cita-content-right {
                    display: flex;
                    width: 356px;
                    height: 318px;
                    padding: 0;
                    align-items: flex-start;
                    gap: 30px;
                    flex-shrink: 0;
                    align-self: stretch;
                    border-radius: 20px;
                    background-color: var(--color-white);
                    flex-flow: column;


                    & img {
                        width: 100%;
                        height: 100%;
                    }

                }
            }


        }

        & .use-case-detail__navigation {
            display: flex;
            flex-flow: column nowrap;
            align-items: center;
            justify-content: space-between;
            width: calc(100% - 2rem);
            max-width: 1140px;
            margin: 72px auto;

            & .use-case-detail__nav-links {
                display: flex;
                flex-flow: row nowrap;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                max-width: 1140px;

                & .use-case-pagination {
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    max-width: 1140px;

                    & a.tag-title {
                        color: var(--color-ultra-dark-gray);
                        font-family: var(--font-family-primary);
                        display: flex;
                        align-items: center;
                        text-transform: uppercase;
                        position: relative;
                        text-decoration: none;

                        &.use-case-detail__prev::before {
                            content: '«';
                            font-size: 1.5em;
                            /* Ajusta según lo que necesites */
                            margin-right: 0.4em;
                            line-height: 1;
                            position: relative;
                            bottom: 3px;

                        }

                        &.use-case-detail__next::after {
                            content: '»';
                            font-size: 1.5em;
                            margin-left: 0.4em;
                            line-height: 1;
                            position: relative;
                            bottom: 3px;
                        }


                    }
                }


            }
        }
    }
}

@media (max-width: 1200px) {

    .use-cases__filters {
        padding: 0;
    }

    .use-cases-grid {
        max-width: 990px;

        & .use-case-card {
            max-width: 310px;
        }

    }

    .use-case-detail__container {
        & .use-case-detail__article {
            & .use-case-detail__hero {
                height: auto;

                & .use-case-detail__hero-content {
                    max-width: 960px;
                }

                & .use-case-detail__hero-footer {
                    max-width: 960px;
                }
            }


            & .use-case-detail__content {
                & .use-case-detail__float-card {
                    display: flex;
                    flex-flow: column nowrap;
                    width: 960px;
                    gap: 30px;

                    & .use-case-detail__content-left {
                        flex: 1 0 fit-content;
                        display: flex;
                        flex-flow: row wrap;
                    }
                }

                & .use-case-detail__iso {
                    flex-flow: column;

                    & .use-case-detail__iso-text {
                        text-align: center;
                        max-width: 768px;

                        & p {
                            max-width: 768px;
                        }
                    }

                    & .use-case-detail__iso-imgs {
                        justify-content: center;
                    }
                }
            }
        }
    }
}

@media (max-width: 991px) {


    .use-cases__hero {
        & .use-cases__hero-container {
            & .use-cases__hero-subtitulo {
                font-family: var(--font-family-primary);
                max-width: 782px;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 130%;
                letter-spacing: 0.18px;
            }
        }
    }

    .use-cases__hero {
        & .use-cases__hero-container {
            & .use-cases__hero-subtitulo {
                font-size: 16px;

                & strong {
                    font-size: 16px;
                }

            }
        }
    }



    .use-cases-grid {
        max-width: 720px;

        & .use-case-card {
            max-width: 220px;

        }

    }

    .use-case-detail__container {
        & .use-case-detail__article {
            & .use-case-detail__content {
                & .use-case-detail__float-card {
                    display: flex;
                    flex-flow: column nowrap;
                    width: 720px;

                    & .use-case-detail__content-left {
                        & .use-case-detail__content-top {
                            flex: 1 0 33%;
                        }

                        & .use-case-detail__content-bottom-left {
                            flex: 1 0 33%;
                        }

                        & .use-case-detail__content-bottom-right {
                            flex: 1 0 33%;
                        }
                    }
                }
            }

            & .use-case-detail__hero {
                height: auto;

                & .use-case-detail__hero-content {
                    max-width: 720px;
                }

                & .use-case-detail__hero-footer {
                    max-width: 720px;
                }
            }
        }
    }
}

.use-card__learn-more-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--color-green);
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0.56px;
    line-height: 16px;
    text-decoration: none;
    overflow: hidden;
    transition: color 0.3s ease;
    width: fit-content;
    height: 24px;

    /* subrayado base invisible */
    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        height: 1px;
        width: 0;
        background-color: currentColor;
        transition: width 0.4s ease;
    }

    /* icono con espacio por defecto */
    .learn-more-icon {
        height: 16px;
        width: 16px;
        margin-left: 8px;
        transition: margin-left 0.3s ease;

        & svg {
            height: 16px;
            width: 16px;
        }
    }
}

.use-case-card:hover .use-card__learn-more-link {}

.use-case-card:hover .use-card__learn-more-link::after {
    width: 100%;
}

.use-case-card:hover .use-card__learn-more-link .learn-more-icon {
    margin-left: 10px;
}

@media (max-width: 768px) {
    .use-cases-grid {
        justify-content: center;

        & .use-case-card {
            &.first {
                width: calc(100% - 24px);
                max-width: 340px;

                & .use-card__principal-link {
                    display: flex;
                    grid-template-areas: "image category"
                        "image title"
                        "image subtitle"
                        "image learn-more";
                    border-radius: 8px 0 0 8px;
                    grid-template-rows: 68px 96px 44px auto;
                    border-radius: 8px;
                    flex-flow: column;
                    max-height: 100%;

                    & .card-image {
                        height: 200px;
                        border-radius: 8px 8px 0px 0;
                        -webkit-border-radius: 8px 8px 0 0;
                        -moz-border-radius: 8px 0 0 8px;
                        -ms-border-radius: 8px 0 0 8px;
                        -o-border-radius: 8px 0 0 8px;
                        width: 100%;

                        & img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            border-radius: 8px 8px 0 0;
                            -webkit-border-radius: 8px 8px 0 0;
                            -moz-border-radius: 8px 0 0 8px;
                            -ms-border-radius: 8px 0 0 8px;
                            -o-border-radius: 8px 0 0 8px;
                        }
                    }

                    & .card-content {
                        width: 100%;
                        padding-top: 24px;




                        & h4.h4-title {
                            color: var(--color-black);
                            text-decoration: none;
                            text-align: left;
                            margin-left: 0;
                            margin-right: 0;
                            margin-bottom: 24px;
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                            overflow: hidden;
                            height: auto;
                        }

                        & .subtitle {
                            display: none !important;
                        }

                        & .use-card__learn-more-link {
                            grid-area: learn-more;
                            height: fit-content;
                            margin: 24px auto 24px 24px;
                        }
                    }
                }
            }
        }

        & .use-case-card {
            width: calc(100% - 24px);
            max-width: 340px;

            & .use-card__principal-link {
                display: flex;
                grid-template-areas: "image category"
                    "image title"
                    "image subtitle"
                    "image learn-more";
                grid-template-rows: 68px 96px 44px auto;
                border-radius: 20px;





                & .card-image {
                    height: 200px;
                    border-radius: 8px 8px 0px 0;
                    -webkit-border-radius: 8px 8px 0 0;
                    -moz-border-radius: 8px 0 0 8px;
                    -ms-border-radius: 8px 0 0 8px;
                    -o-border-radius: 8px 0 0 8px;

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: 8px 8px 0 0;
                        -webkit-border-radius: 8px 8px 0 0;
                        -moz-border-radius: 8px 0 0 8px;
                        -ms-border-radius: 8px 0 0 8px;
                        -o-border-radius: 8px 0 0 8px;
                    }
                }

                & h1 {
                    font-size: 22px;
                    margin-bottom: 0;
                }

                & .use-card__learn-more-link {
                    grid-area: learn-more;
                    height: fit-content;
                    margin: 24px auto 24px 24px;
                    font-size: 16px;
                }

            }
        }
    }

    .use-cases__hero {
        padding: 40px 0 40px 0;

        & .use-cases__hero-container {
            & .use-cases__hero-h1 {
                color: var(--color-black);
                font-size: 44px;
                font-style: normal;
                font-weight: 500;
                line-height: 44px;
            }
        }
    }

    .use-case-detail__container {
        & .use-case-detail__article {
            & .use-case-detail__hero {
                & .use-case-detail__hero-header {
                    margin: 24px 0;

                    & .use-case-detail__hero-header-left {
                        display: flex;

                        & .use-cases__back {
                            display: none;
                        }

                        & .use-case__category-icon {
                            display: none;
                        }

                    }

                    & .use-case-detail__hero-header-right {
                        margin-left: auto;
                    }
                }

                & .use-case-detail__hero-content {
                    flex-flow: column-reverse nowrap;

                    & .use-case-detail__hero-content-left {
                        gap: 0;

                        & h1.h1-title-use-case {
                            color: var(--color-white);
                            margin-bottom: 24px;
                            max-width: 749px;
                            width: 100%;
                            text-align: left;
                        }

                        & p.txt-large {
                            color: var(--color-white);
                            max-width: 718px;
                            width: 100%;
                            text-align: left;
                        }
                    }
                }

                & .use-case-detail__hero-footer {
                    flex-flow: column;
                    padding: 0 24px;

                    & .use-case-detail__hero-footer-content {
                        display: flex;
                        flex-flow: column wrap;
                        max-width: 100%;
                    }

                    & h5.tag-medium {
                        color: var(--color-white);
                    }

                    & p.txt-medium {
                        color: var(--color-white);

                    }

                }
            }

            & .use-case-detail__content {
                & .use-case-detail__float-card {
                    width: calc(100% - 42px);
                    padding: 38px 24px;
                    gap: 24px;

                    & .use-case-detail__container-right {
                        flex: 1 0 auto;
                        display: flex;
                        flex-flow: column;
                        align-items: flex-start;
                        justify-content: space-between;
                        width: 100%;
                        max-width: 703px;
                        margin-bottom: 0;
                        height: auto;
                    }

                    & a.txt-medium {
                        color: var(--color-ultra-dark-gray);
                        text-decoration: none;
                    }

                    & p.txt-medium {
                        color: var(--color-ultra-dark-gray);
                    }

                    & .use-case-detail__content-left {
                        flex-flow: row wrap;
                        margin-bottom: 30px;

                        & .use-case-detail__content-top {
                            flex: 1 0 100%;
                        }

                        & .use-case-detail__content-bottom-left {
                            flex: 1 0 50%;
                        }

                        & .use-case-detail__content-bottom-right {
                            flex: 1 0 50%;
                        }
                    }
                }

                & .use-case-detail__description {
                    width: 100%;

                    & .use-case-detail__item {
                        & img {
                            display: flex;
                            width: 100%;
                            height: auto;
                            padding: 0;
                            align-items: flex-start;
                            gap: 10.82px;
                            margin: 0 auto;
                            border-radius: 20px;
                        }
                    }
                }


                & .use-case-detail__description,
                .use-case-detail__description.alternate {
                    width: 100%;
                    margin-bottom: 24px;

                    & .use-case-detail__item {
                        width: calc(100% - 42px);
                        display: flex;
                        flex-flow: column nowrap;
                        gap: 30px;

                        & .use-case-detail__item-right {
                            margin-top: 0;
                            flex: 1 0 fit-content;

                            & img {
                                width: 100%;
                                height: auto;
                                margin: 0;
                            }
                        }


                        & h4.tag-medium {
                            color: var(--color-ultra-dark-gray);
                            margin-bottom: 0;
                        }

                        & .use-case-detail__item-left {
                            & .use-case-detail__item-text {
                                & p.txt-medium {
                                    color: var(--color-gray);

                                }
                            }
                        }

                        & .use-case-detail__item-text {
                            & p.txt-medium {
                                color: var(--color-gray);

                            }
                        }
                    }
                }

                & .use-case-detail__iso {
                    flex-flow: row wrap;
                    padding: 48px;
                    margin: 0 1rem 72px;

                    & .use-case-detail__iso-text {
                        text-align: center;
                        max-width: 100%;
                        flex: 1 0 100%;

                        & p.txt.large {
                            color: var(--color-gray);
                            width: 100%;
                            max-width: 560px;
                            margin-bottom: 16px;
                        }
                    }


                    & .use-case-detail__iso-imgs {
                        max-width: 100%;
                        gap: 16px;
                        width: 100%;
                        flex: 1 0 100%;
                        flex-flow: row;

                        & .use-case-detail__iso-img-container img {
                            width: 100%;
                            height: auto;
                            flex-shrink: 0;
                            min-width: 60px;
                        }
                    }
                }

                & .use-case-detail__cita {
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: center;
                    gap: 30px;
                    width: 100%;
                    padding: 1rem;
                    max-width: 1200px;

                    & .use-case-detail__cita-content-left {
                        flex-flow: column;
                        display: flex;
                        padding: 6rem 30px;
                        justify-content: center;
                        align-items: flex-start;
                        gap: 8px;
                        align-self: stretch;
                        border-radius: 20px;
                        background: var(--color-gray-100);

                        & .use-case-detail__cita-text {
                            color: var(--color-gray);
                            font-family: var(--font-family-primary);
                            font-size: 18px;
                            font-style: italic;
                            font-weight: 400;
                            line-height: 130%;
                            /* 23.4px */
                            letter-spacing: 0.18px;
                            padding-left: 0;
                        }

                        & .use-case-detail__author {
                            color: var(--color-gray);
                            font-family: var(--font-family-primary);
                            font-size: 14px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 14px;
                            letter-spacing: 0.14px;
                            padding-left: 0;
                        }
                    }

                    & .use-case-detail__cita-content-right {
                        width: 100%;
                        padding: 0;

                        & .use-case-tags {
                            & li {
                                p {
                                    display: flex;
                                    align-items: center;
                                    color: var(--color-ultra-dark-gray);
                                    font-family: var(--font-family-primary);
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 14px;
                                    letter-spacing: 0.16px;
                                    height: 14px;
                                    padding: 2px 0 0 5px;
                                }
                            }
                        }

                    }
                }
            }
        }
    }
}


.use-case-detail__video {
    margin-top: 2rem;
    text-align: center;
}

.use-case-detail__video iframe,
.use-case-detail__video video {
    max-width: 100%;
    width: 100%;
    height: 350px;
}

.use-case-detail__gob-images {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 58px;
    gap: 16px;
    padding-left: 0;
    width: calc(100% - 42px);
    max-width: 1140px;

    & h3.h3-title {
        color: var(--color-blue-dark);
        text-align: left;
        margin-bottom: 0;
    }

    & img {
        width: 100%;
        height: auto;
        max-width: 100%;
        border-radius: 20px;
        margin: 0 auto;

        &.desktop-img {
            display: flex;
            border-radius: 0;
        }

        &.mobile-img {
            display: none;
            border-radius: 0;
        }
    }

}

@media screen and (max-width: 768px) {
    .use-case-detail__gob-images img.desktop-img {
        display: none;

    }

    .use-case-detail__gob-images img.mobile-img {
        display: flex;
    }

    .use-case-detail__gob-images {
        width: calc(100% - 42px);
        margin: 0 0 88px;
    }

}