/* ============================================================
   SECCIÓN SOLUCIONES DESTACADAS
============================================================ */

.soluciones-destacadas {
    position: relative;
    overflow: hidden;
    padding: 180px 0 150px;
    background: #000000;
}

.soluciones-destacadas .container {
    position: relative;
    z-index: 2;
}

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

.soluciones-destacadas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 80px;
}

/* ============================================================
   CARD DE CADA SOLUCIÓN
============================================================ */

.solucion-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 760px;
    isolation: isolate;
}

/* ============================================================
   CONTENIDO
============================================================ */

.solucion-content {
    position: relative;
    z-index: 3;

    width: 100%;
    text-align: center;

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

    gap: 30px;
}

.solucion-logo,
.solucion-content p,
.solucion-btn,
.solucion-animation {
    position: relative;
    z-index: 2;
}

.solucion-logo {
    width: 100%;
    max-width: 430px;
    display: block;
}

.solucion-content p {
    margin: 0;
    padding: 0;

    max-width: 520px;

    line-height: 1.35;
    font-weight: 400;
}

.solucion-content p strong {
    font-weight: 700;
}

/* ============================================================
   BOTÓN
============================================================ */

.solucion-btn {
    width: 100%;
    max-width: 420px;
    height: 56px;

    border: none;
    border-radius: 999px;

    cursor: pointer;

    color: #ffffff;
    font-weight: 500;

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

    text-decoration: none;

    transition:
        transform 0.3s var(--nx-ease),
        box-shadow 0.3s var(--nx-ease);
}

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

.solucion-btn:hover {
    transform: translateY(-4px);
}

/* ============================================================
   VISUAL
============================================================ */

.solucion-visual {
    position: relative;
    z-index: 2;

    width: 100%;
    margin-top: 90px;

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

.solucion-animation {
    width: 100%;
    max-width: 620px;
    overflow: visible;
}

.solucion-video {
    width: 100%;
    height: auto;

    display: block;
    object-fit: contain;

    opacity: 1;
    mix-blend-mode: screen;
}

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

.solucion-content,
.solucion-visual {
    position: relative;
    isolation: isolate;
}

.solucion-local-glow {
    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 115%;
    height: 115%;

    z-index: 1;

    pointer-events: none;

    filter: blur(48px);
    mix-blend-mode: screen;

    opacity: 0.7;
}

/* ============================================================
   DOCUVEX THEME
============================================================ */

.solucion-card-docuvex .solucion-content p {
    color: #2fd8c8;

    text-shadow:
        0 0 18px rgba(0, 255, 221, 0.10),
        0 0 38px rgba(0, 255, 221, 0.06);
}

.solucion-card-docuvex .solucion-content p strong {
    color: #00cfc0;
}

.solucion-card-docuvex .solucion-btn {
    background:
        linear-gradient(
            90deg,
            #22c7b8 0%,
            #5bd8cb 50%,
            #2d9b8f 100%
        );

    box-shadow:
        0 16px 35px rgba(0, 179, 159, 0.20);
}

.solucion-card-docuvex .solucion-btn:hover {
    box-shadow:
        0 24px 50px rgba(0, 179, 159, 0.32);
}

.solucion-card-docuvex .solucion-local-glow {
    background:
        radial-gradient(
            circle at center,
            rgba(0, 255, 221, 0.18) 0%,
            rgba(0, 207, 192, 0.11) 25%,
            rgba(0, 179, 159, 0.05) 48%,
            transparent 72%
        );
}

/* ============================================================
   ORVIX THEME
============================================================ */

.solucion-card-orvix .solucion-content p {
    color: #f6bd2a;

    text-shadow:
        0 0 18px rgba(255, 199, 53, 0.10),
        0 0 38px rgba(255, 199, 53, 0.06);
}

.solucion-card-orvix .solucion-content p strong {
    color: #ffc735;
}

.solucion-card-orvix .solucion-btn {
    background:
        linear-gradient(
            90deg,
            #ffc735 0%,
            #e4ac22 50%,
            #b98512 100%
        );

    box-shadow:
        0 16px 35px rgba(255, 199, 53, 0.20);
}

.solucion-card-orvix .solucion-btn:hover {
    box-shadow:
        0 24px 50px rgba(255, 199, 53, 0.32);
}

.solucion-card-orvix .solucion-local-glow {
    background:
        radial-gradient(
            circle at center,
            rgba(255, 199, 53, 0.18) 0%,
            rgba(228, 172, 34, 0.11) 25%,
            rgba(185, 133, 18, 0.05) 48%,
            transparent 72%
        );
}

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

@media (max-width: 1100px) {

    .soluciones-destacadas-grid {
        grid-template-columns: 1fr;
        gap: 90px;
    }

    .solucion-card {
        min-height: auto;
    }

    .solucion-visual {
        margin-top: 64px;
    }

    .solucion-animation {
        max-width: 650px;
    }
}

@media (max-width: 768px) {

    .soluciones-destacadas {
        padding: 130px 0 100px;
    }

    .soluciones-destacadas-grid {
        gap: 80px;
    }

    .solucion-content {
        gap: 24px;
    }

    .solucion-logo {
        max-width: 340px;
    }

    .solucion-content p {
        line-height: 1.38;
    }

    .solucion-btn {
        height: 58px;
        max-width: 340px;
    }

    .solucion-visual {
        margin-top: 46px;
    }

    .solucion-animation {
        max-width: 420px;
    }

    .solucion-local-glow {
        width: 130%;
        height: 110%;
        filter: blur(42px);
    }
}