/* ==========================================================================
   Páginas de aplicativos (apps/*.php) — sección de funciones con teléfono.
   Usa los tokens de custom.css y el marco .phone-frame ya existente.
   ========================================================================== */

.app-feat {
    overflow: hidden;
    background: var(--surface-alt);
}

.app-feat-head {
    max-width: 44rem;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.app-feat-head h2 {
    margin: .9rem 0 .7rem;
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    letter-spacing: -.015em;
}

.app-feat-head p {
    margin: 0;
    font-size: 1.08rem;
    color: var(--ink-500);
}

.app-feat-layout {
    display: grid;
    grid-template-columns: 1fr minmax(240px, 290px) 1fr;
    align-items: center;
    gap: 2.5rem;
}

.app-feat-col {
    display: grid;
    gap: 1rem;
}

.app-feat-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    padding: 1.15rem 1.25rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    text-align: left;
    color: inherit;
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.app-feat-col.is-left .app-feat-item {
    flex-direction: row-reverse;
    text-align: right;
}

.app-feat-item:hover {
    background: var(--surface);
    border-color: var(--ink-100);
}

.app-feat-item.is-active {
    background: var(--surface);
    border-color: var(--ink-100);
    box-shadow: var(--shadow-md);
}

.app-feat-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--brand-primary-light);
    font-size: 1.15rem;
    color: var(--brand-primary);
    transition: background-color .25s ease, color .25s ease;
}

.app-feat-item.is-active .app-feat-icon {
    background: var(--brand-primary);
    color: #fff;
}

.app-feat-text strong {
    display: block;
    margin-bottom: .2rem;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink-900);
}

.app-feat-text span {
    display: block;
    font-size: .9rem;
    line-height: 1.5;
    color: var(--ink-500);
}

.app-feat-phone {
    position: relative;
}

.app-feat-phone::before {
    content: '';
    position: absolute;
    inset: 8% -18%;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(4, 76, 177, .22), transparent);
    pointer-events: none;
}

.app-feat-phone .phone-frame {
    position: relative;
    z-index: 1;
    max-width: 290px;
}

.app-feat-phone .phone-frame-screen img {
    transition: opacity .25s ease;
}

.app-feat-phone .phone-frame-screen img.is-changing {
    opacity: 0;
}

/* Tarjeta destacada bajo las funciones */
.app-feat-note {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    max-width: 52rem;
    margin: 3.5rem auto 0;
    padding: 1.3rem 1.6rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #021a3f 0%, var(--brand-primary) 100%);
    color: rgba(255, 255, 255, .85);
    box-shadow: var(--shadow-md);
}

.app-feat-note > i {
    flex: 0 0 auto;
    font-size: 1.8rem;
    color: #ff8a4c;
}

.app-feat-note strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.1rem;
    color: #fff;
}

[data-theme="dark"] .app-feat-item:hover,
[data-theme="dark"] .app-feat-item.is-active {
    border-color: rgba(255, 255, 255, .1);
}

@media (max-width: 991.98px) {
    .app-feat-layout {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    .app-feat-phone {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 1.5rem;
    }

    .app-feat-phone .phone-frame {
        max-width: 240px;
    }

    .app-feat-col.is-left .app-feat-item {
        flex-direction: row;
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .app-feat-layout {
        grid-template-columns: 1fr;
    }

    .app-feat-phone {
        grid-row: auto;
        order: -1;
    }

    .app-feat-note {
        flex-direction: column;
        text-align: center;
    }
}